Xây dựng website nghe nhạc trực tuyến

Ngày nay, công nghệ thông tin đã trở thành một phần quan trọng của cuộc sống. Sự phát triển của công nghệ thông tin là tiền đề cho sự phát triển của các nghành khoa học khác. Song song với sự phát triển mạnh mẽ của khoa học kỹ thuật, nhu cầu cập nhật thông tin của con người ngày càng cao. Có thông tin thì con người mới có thể tiếp cận, nắm bắt và hiểu biết được sự thay đổi của thế giới xung quanh. Muốn có được thông tin thì cần phải giao tiếp. Giao tiếp để trao đổi thông tin, giao tiếp để mở mang kiến thức, để học hỏi kinh nghiệm, để giải trí, kết bạn, nói chuyện với người thân , bạn bè .

BỘ GIÁO DỤC VÀ ĐÀO TẠO CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

TP HỒ CHÍ MINH - - -

-KHOA : Công Nghệ Thông Tin NHIỆM VỤ BÀI THI TỐT NGHIỆP (Sinh viên phải dán tờ này vào trang thứ nhất của Bản thuyết minh) HỌ VÀ TÊN :1/ Bùi Quang Sang MSSV: CD50812804 LỚP: C09_TH01 2/ Âu Bạch Yến MSSV: CD50817006 LỚP: C09_TH01 NGÀNH : Công Nghệ Thông tin 1 ĐẦU ĐỀ BÀI THI : Xây dựng website nghe nhạc trực tuyến 2 NHIỆM VỤ YÊU CẦU VỀ NỘI DUNG VÀ SỐ LIỆU BAN ĐẦU: Tìm hiểu PHP và Mysql Tìm hiểu kỹ thuật lập trình hướng đối tượng Tìm hiểu kỹ thuật lập trình Ajax Xây dựng CSDL Xây dựng website nghe nhạc trực tuyến hoàn chỉnh 3 CÁC HỒ SƠ VÀ TÀI LIỆU CUNG CẤP BAN ĐẦU :

4 NGÀY GIAO NHIỆM VỤ BÀI THI :

5 NGÀY HOÀN THÀNH NHIỆM VỤ :

6 HỌ TÊN NGƯỜI HƯỚNG DẪN: PHẦN HƯỚNG DẪN (1) Trần Văn Hùng Toàn Bộ

Nội dung và yêu cầu của Bài thi Tốt nghiệp đã được thông qua Khoa. Tp Hồ Chí Minh, ngày - tháng - năm

Trần Văn Hùng

TÓM TẮT ĐỀ TÀI

Ngày nay, công nghệ thông tin đã trở thành một phần quan trọng của cuộcsống Sự phát triển của công nghệ thông tin là tiền đề cho sự phát triển của cácnghành khoa học khác

Song song với sự phát triển mạnh mẽ của khoa học kỹ thuật, nhu cầu cậpnhật thông tin của con người ngày càng cao Có thông tin thì con người mới có thểtiếp cận, nắm bắt và hiểu biết được sự thay đổi của thế giới xung quanh Muốn cóđược thông tin thì cần phải giao tiếp Giao tiếp để trao đổi thông tin, giao tiếp để

mở mang kiến thức, để học hỏi kinh nghiệm, để giải trí, kết bạn, nói chuyện vớingười thân , bạn bè

Với thực trạng trên  chúng em đã xây dựng một ỨNG DỤNGWEBCHAT Thông qua Trang Web này có thể giúp mọi người có thể nói chuyệntrực tiếp với nhau một cách thoải mái, tiện ích, thân thiện

Trang Webchat có những chức năng chính sau đây:

 Thủ tục đăng ký thật đơn giản, nhanh gọn (mô tả: Mỗi người tham gia chatcần đăng ký user riêng cho mình và không được trùng với mọi người vàmật khẩu, email để đăng nhập vào hệ thống )

 Quản lý danh sách: Chat nick riêng và danh sách bạn, bạn có thể kết bạn,thêm bạn vào danh sách bạn của mình, và mở cửa sổ chat riêng cho 2người

 Quản lý nội dung chat: …Bên cạnh gửi tin chat, trang webchat này còn chophép bạn gửi những Emoticon, hình động có kèm nội dung ngộ nghĩnh, dễthương, …

 Bạn có thể gửi tin offline riêng cho người bạn trong danh sách bạn củamình

 Để phân biệt và trang trí dòng tin nhắn của mình thì đã có công cụ định dạng Font, kích cỡ, màu chữ

 Cho phép người khác add thêm nick mình vào danh sách hay không và cho phép xóa nick ra khỏi danh sách

 Bạn có thể gởi tin nhắn cho toàn bộ danh sách trong một nhóm nào đó bất kỳ

 Web chat cho phép gởi file bất kỳ giữa các user

Để thực hiện đồ án này chúng em đã tìm hiểu và ứng dụng công nghệ ajax kết hợp mô hình DOM, ngôn ngữ XML, javasript, ngôn ngữ PHP và cơ sở dữ liệu mySQL để thực hiện đồ án này

MỤC LỤC

TÓM TẮT ĐỀ TÀI 1

TÓM TẮT ĐỀ TÀI 2

PHẦN I: 6

TỔNG QUAN VỀ CƠ SỞ LÝ THUYẾT 6

CHƯƠNG I: 6

TÌM HIỂU VỀ PHP VÀ MYSQL 6

I.1.PHP: 6

I.2 MYSQL 7

CHƯƠNG 2: 14

TÌM HIỂU KỸ THUẬT LẬP TRÌNH AJAX 14

I.1 AJAX LÀ GÌ? 14

I.2 Các thuộc tính: 18

I.3 Ứng dụng: 19

CHƯƠNG III 22

TÌM HIỂU MÔ HÌNH DOM-XML 22

I XML 22

II DOM 26

PHẦN II 35

XÂY DỰNG ỨNG DỤNG WEB CHAT 35

SO SÁNH AJAX VỚI CÁC ỨNG DỤNG CÔNG NGHỆ WEB TRUYỀN THỐNG: 35

I.Ý tưởng chung: 35

II.Mô Hình truyền thống: 36

III.Mô hình Ajax: 39

PHẦN III 42

ỨNG DỤNG JAVASCRIPT, AJAX VÀO WEBCHAT ONLINE 42

I.Yêu cầu hệ thống của trang webchat 42

II.Cơ sở dữ liệu 43

I.1 Các bảng dữ liệu: 43

I.3 Các thuật toán xử lý trong chương trình 57

PHẦN IV: 64

KẾT LUẬN VÀ ĐỊNH HƯỚNG PHÁT TRIỂN 64

1.Kết quả đạt được 64

2.Khuyết điểm của chương trình 64

3.Hướng phát triển 64

PHẦN V 66

TÀI LIỆU THAM KHẢO 66

Chương 2

TÌM HIỂU KỸ THUẬT LẬP TRÌNH AJAX

AJAX là một trong những từ ngữ thời thượng bậc nhất hiện nay trong giớicông nghệ thông tin và là bí quyết kĩ thuật đứng đằng sau các ứng dụng lớn thuộcGoogle: Flickr, GMail, Google Suggest, Google Maps Ajax đang tạo nên cuộccách mạng trong thế giới web

I.1 AJAX LÀ GÌ?

JavaScript, ngôn ngữ lập trình chạy trên trình duyệt đã quá quen thuộc với thế giới web kể từ khi Netscape phát minh ra nó Sự phát triển của công nghệ và nhu cầu người sử dụng ngày càng cao buộc các nhà phát triển tạo ra một kĩ thuật khác cho phép xử lý các tác vụ phức tạp hơn Tháng 2/2005, trên Internet bắt đầu lan truyền thuật ngữ Ajax như là một kỹ thuật mới cho ứng dụng web Những thành công vang dội và sự hấp dẫn kì lạ của Gmail, Google Suggest và Google Maps đã khiến cho Ajax được chú ý một cách đặc biệt

Ajax là viết tắt của Asynchronous JavaScript and XML - kỹ thuật kết hợp hai tính năng mạnh của JavaScript được các nhà phát triển đánh giá rất cao:

• Gửi yêu cầu (request) đến máy chủ mà không cần nạp lại trang

• Phân tách và làm việc với XML

CHƯƠNG III TÌM HIỂU MÔ HÌNH DOM-XML

I XML

Muốn tìm hiểu XML trước hết ta phải tìm đọc qua SGML, có thể tóm tắcSGML như sau

SGML: Ngôn ngữ đánh dấu bằng chuỗi kí tự

-Kết hợp ưu điểm của binary files, và text files: có thể hiểu được bởi máy tính, lưutrữ được meta data và dễ dàng được sử dụng bởi nhiều chương trình

mark up data (hay meta data) dùng để tự mô tả

-HTML dựa trên chuẩn SGML

-SGML phức tạp không thích hợp để trao đổi dữ liệu trên môi trường web.do đócần một ngôn ngữ tương tự nhưng đơn giản hơn

XML (Extensible Markup Language): là nhánh con của SGML được giản lượchóa

-XML có thể dùng để tạo một tài liệu chứa bất kỳ thông tin nào ta muốn

-Hoàn toàn linh hoạt khi tổ chức dữ liệu (structured data)

…

…

…

II DOM

II.1.DOM (Document Object Model):

Được sử dụng để thao tác lên tất cả các tài liệu XML

DOM có nhiều phiên bản: DOM Level 1, DOM Level 2, DOM Level 3(draft)

Ứng với mỗi cấu trúc tài liệu XML phải có một cách thức để truy xuấtdẫn đến khó phát triển ứng dụng nên người ta xây dựng một thư viện tổngquát sử dụng cho mọi tài liệu

XML DOM đóng vai trò như lớp giao tiếp ở giữa của chương trình ứngdụng và XML parser

…

…

…

PHẦN II

XÂY DỰNG ỨNG DỤNG WEB CHAT

SO SÁNH AJAX VỚI CÁC ỨNG DỤNG CÔNG NGHỆ WEB

TRUYỀN THỐNG:

I Ý tưởng chung:

Trong thời kỳ bùng nổ công nghệ thông tin hiện nay internet góp phầnkhông nhỏ vào sự phát triển đó Để mang thông tin từ nơi này đến một nơikhác trong một thời gian ngắn và nhanh để mọi người dù bất cứ nơi nào mà cóinternet và một máy tính thì có thể nhận được thông tin Có nhiều cách thức đểtruyền đạt một trong những cách thức đó có nhiều ứng dụng chạy trên nền web

ra đời như trang báo điện tử, email …Bên cạnh sự cập nhật thông tin cần thiếtcủa thời đại chúng ta cần phải giải trí, trò chuyện gặp gỡ làm quen và trao đổithông tin trực tiếp thế là webchat ra đời

Ý tưởng tổng quát là mỗi người đăng ký một cái tên riêng không đượctrùng nhau và đăng nhập vào một hệ thống nơi đó có lưu danh sách nhữngngười đã đăng ký, khi một người có trong danh sách có thể thêm vào nhữngngười bạn mình và có thể trò chuyện được với nhau thông qua internet

Khi người đó đã đăng ký vào hệ thống (tạm gọi người đó là user A) thì cóthể gởi tin nhắn đến những người bạn của mình, khi tin nhắn của user A đó gởi

đi thì chương trình sẽ lưu tin nhắn đó lên server gồm thông tin người gởi A,thông tin người nhận (tạm gọi là user B) và nội dung tin nhắn… Một khi user

B đăng nhập vào hệ thống thì hệ thống sẽ kiểm tra thông tin người đăng nhập

có hợp lệ hay không, nếu hợp lệ thì hệ thống sẽ lấy tất cả tin nhắn của mọi user

đã gởi cho user B này trên server trước đó sẽ trả về cho user B này Quá trìnhnày được lặp đi lặp lại sau một khoảng thời gian nhất định (1 vài giây ) thì tinnhắn gởi giữa user A và user B gần như là lập tức.

So sánh AJAX với các ứng dụng công nghệ WEB truyền thống:

II.Mô Hình truyền thống:

hình 1

Với công nghệ web truyền thống mọi hoạt động đều phải thông quaphương thức giao dịch HTTP(HyperText Transport Photocol - Giao thứctruyền tải siêu liên kết).(Hình 1)

Ví dụ: Kiểm tra user đã có tồn tại trong hệ thống hay chưa

……

……

……

Khi người dùng nhập nhấn nút submit thì sẽ gởi dữ liệu đến trang (phía server )nhận được thông tin người gởi, người nhận và thông tin của tin nhắn đó Sau đóphía server sẽ cập nhật tất cả thông tin vào database và sau đó trả về phía clientgồm thông tin người nhận nội dung tin nhắn… và cấu trúc trang của người gởi(reload).

Quá trình này dẫn đến như sau:

+ khi phía client gởi dữ liệu lên server thì trong khi chờ đợi sự trả về thông tin củaserver thì phía client phải đợi

+ Khi server trả về cho phía client thì trả về tòan bộ trang web phía client dẫn đến

dư thông tin và phía client phải reload tòan bộ trang này trong khi đó phía clientchi cần thông tin của tin nhắn và người gời

III.Mô hình Ajax:

hình 2

Đề khắc phục tình trạng trên Chúng em đã áp dụng công nghệ mới đó làajax (hình 2)vào web chat để xử lý những vấn đề nêu trên đó là khi nhận về thìphía server chỉ trả về thông tin người gời, nội dung tin nhắn … dạng file XML vàdùng javascript để đọc cấu trúc DOM cùa file XML này và cho hiển thị nội dungtin nhắn mà không cần load lại trang web phía client

PHẦN III ỨNG DỤNG JAVASCRIPT, AJAX VÀO WEBCHAT

ONLINE

I Yêu cầu hệ thống của trang webchat

 Người dùng cần một trang web để có thể vào đó gởi tin nhắn đến ngườikhác

 Người dùng cần có một ID để phân biệt với người khác để khi đăng nhậpvào hệ thống thì hệ thống sẽ biết được thông tin của người dùng như họtên , password, email nguời dùng đăng nhập thành công thì hệ thống sẽ

mở ra một trang cửa sổ trong đó có danh sách bạn bè của người này theonhóm và trạng thái của những người bạn đó ví dụ như đang có trên mạnghay không, hay những thông báo riêng của từng người

 Khi người dùng cần gởi tin nhắn cho một user khác trong list danh sách củamình thì chỉ cần double Click vào tên người đó thì lập tức có một cửa sổhiện ra để người dùng nhập thông tin vào và gởi đi, người dùng cũng có thểgởi cùng lúc một tin nhắn cho tất cả những người khác trong cùng mộtnhóm

 Khi có tin nhắn của người khác gởi đến thì sẽ mở ra một cửa sổ cho người

đó và hiện tin nhắn của người đó gởi đến

 Người dùng có thể thay đổi font chữ , kích thước màu sắc … của tin nhắn

và có thể gởi file tài liệu

 Người dùng có thể thêm vào danh sách bạn bè và khi có yêu cầu thêm vào

từ một user nào đó thì người dùng có thể không đồng ý hoặc đồng ý thêmvào danh sách

Field Type Null Default Comments

Số điện thoạiĐịa chỉEmailMật mảTrạng thái

n 1

1n

1 Manhom Int 30 Id của nhóm(tự động tăng)

4.Bảng: Tin nhắn

Field Type Null Default Comments

0: Tin nhắn ofline

I.2 Cấu trúc Website:

I.2.1.Trang index:

Đây là trang chính khi người dùng truy cập trực tiếp vào website

http://localhost/chat/z Tại trang này, người dùng có thể Đăng ký một tài khoản mới hoặc Đăng nhập vào để sử dụng chương trình webchat

I.2.2.Trang Đăng ký:

Trước tiên để Đăng nhập vào webchat người sử dụng phải Đăng ký môt tài khoản Yêu cầu người sử dụng phải nhập đầy đủ các thông tin và mã xác nhận để đảm bảo vấn đề bảo mật Khi tất cả các thông tin như bắt buộc (*) được kiểm tra

đầy đủ và hợp lệ thì những thông tin này mới được gửi lên sever và lưu vào CSLD.

I.2.3.Trang Đăng Nhập :

Nếu người dùng đã đăng ký tài khoản thành công, thì có thể Đăng nhập vàogiao diện chính của Webchat Khi nhập tên đăng nhập và mật khẩu đầy đủ thì hệ thống sẽ kiểm tra sự hợp lệ, nếu hợp lý sẽ chuyển người dùng đến trang Home đểcho người dùng sử dụng chương trình chính của Webchat

I.2.5.Trang Home ( giao diện chính của webchat)

Nếu đăng nhập thành công thì bạn có thể sử dụng tất cả các tính năng của Webchat này như :

Thêm Nick chát vào danh sách ( có thể thêm Nick chat vào group cũ hoăc tạo ra thêm một group mới)

I.2.5.Trang cửa sổ chát

I.2.6 Trang thêm nhóm mới và thêm nick mới

Thêm nhóm mới

Thêm user mới

I.3 Các thuật toán xử lý trong chương trình

PHẦN IV:

KẾT LUẬN VÀ ĐỊNH HƯỚNG PHÁT TRIỂN

1.Kết quả đạt được

Tìm hiểu về ngôn ngữ javascript, công nghệ ajax, cách đọc tài liệu XML

và phân tích cây dữ liệu DOM

Về chương trình:

 Đăng ký nick chat đơn giản, nhanh gọn

 Chat nick riêng và danh sách bạn, bạn có thể kết bạn, thêm bạn vào danhsách bạn của mình, và mở cửa sổ chat riêng cho 2 người

 Gửi tin offline riêng cho người bạn trong danh sách bạn của mình

 Format tin nhắn dạng Font, kích cỡ, màu chữ

 Cho phép người khác add thêm nick mình vào danh sách hay không và cho phép xóa nick ra khỏi danh sách

 Có thể cấm nick một người bất kỳ

 Gởi tin nhắn cho toàn bộ danh sách trong một nhóm nào đó bất kỳ

2.Khuyết điểm của chương trình

 Chương trình chưa cho phép chat void (giọng nói)

 Chưa thể xem trực tiếp băng webcam

 Giao diện chưa thân thiện lắm với người dùng

TÀI LIỆU THAM KHẢO

I.Sách tham khảo:

[1].Giáo trình giảng dạy Webchat Ajax ,thầy Trần Văn Hùng

[2].Lee Babin Beginning Ajax with PHP, 2007, Apress

[3].Cristian Darie-Bogdan Brinzarea -Filip Chereche-Mihai Bucica, AJAX and PHP Building Responsive Web Applications 2006, Packt

[4].Steven Holzer, Thiết kế web động với PHP5 2005, NXB Thống Kê

II.Các trang web tham khảo:

[1].http://www.w3schools.com

[2].http://developer.yahoo.com/yui/