Thông tin tài liệu
Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT
I
ĐẠI HỌC QUỐC GIA HÀ NỘI
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ
Nguyễn Ngọc Tráng
XÂY DỰNG ỨNG DỤNG WEBCHAT
KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY
Ngành
:
Công nghệ thông tin
Cán bộ hướng dẫn: Ths. Nguyễn Thị Hậu
HÀ NỘI – 2010
Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT
I
Lời cảm ơn
Trước tiên, tôi xin gửi lời cảm ơn và lòng biết ơn sâu sắc đến thạc sỹ Nguyễn Thị
Hậu người đã tận tình chỉ bảo hướng dẫn tôi trong suốt quá trình thực hiện khoá luận
tốt nghiệp.
Tôi xin bày tỏ lời cảm ơn sâu sắc đến các thầy cô giáo đã giảng dạy tôi trong suốt
bốn năm học qua, đã cho tôi nhiều kiến thức quý báu để tôi vững bước trên con đường
học tập của mình.
Tôi xin gửi lời cảm ơn tới các bạn trong lớp K51CB, và K51CHTTT đã ủng hộ
khuyến khích tôi trong suốt quá trình học tập tại trường.
Và cuối cùng, tôi xin bày tỏ niềm biết ơn vô hạn tới bố mẹ tôi, anh tôi, và những
người bạn thân luôn bên cạnh, động viên tôi trong suốt quá trình thực hiện khoá luận
tốt nghiệp.
Hà Nội, ngày 12 tháng 05 năm 2010
Sinh Viên
Nguyễn Ngọc Tráng
Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT
II
TÓM TẮT NỘI DUNG
Hiện nay, nhu cầu thông tin liên lạc phát triển, nhu cầu trao đổi thông tin nhanh
và hiệu quả ngày càng gia tăng. Cùng với đó là sự phát triển của công nghệ thông tin
và hệ thống mạng Internet. Với các yếu tố trên, yêu cầu về một loại hình trao đổi thông
tin nhanh đơn giản hiệu quả phù hợp về mặt sử dụng, được viết trên nền web được đặt
ra.
Cũng chính vì phát triển nhanh của công nghệ web. Có rất nhiều trang web hay
hữu ích cho người dùng nhưng đồng thời với đó là việc người dùng phải ghi nhớ quá
nhiều thông tin tài khoản, mà đôi khi là trùng lặp cho các trang web khác nhau. Vấn đề
đặt ra là làm thế nào để người dùng ít phải ghi nhớ những thông tin đó. Vấn đề đó
được giải quyết bằng cách sử dụng công nghệ OpenID. Công nghệ cho phép người
dùng sử dụng các tài khoản sẵn có để truy cập vào các trang web có hỗ trợ công nghệ
này.
Từ các yêu cầu trên, đối chiếu với một số loại hình trao đổi thông tin thông qua
mạng Internet như các phần mềm Yahoo Messenger, Window Messenger Ta thấy
được sự bất tiện khi muốn sử dụng các phần mền này phải cài đặt lên máy mới có thể
sử dụng. Vì thế ý tưởng xây dựng một trang web có thể thực hiện việc trao đổi
message nhanh, thuận tiện và có thể sử dụng được ngay các tài khoản người dùng sẵn
ra đời.
Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT
III
MỤC LỤC
Bảng các kí hiệu và chữ viết tắt V
Danh mục hình vẽ VI
Danh mục bảng biểu VI
MỞ ĐẦU 1
CHƯƠNG 1: GIỚI THIỆU BÀI TOÁN XÂY DỰNG ỨNG DỤNG WEB CHAT 2
1.1
Nội dung bài toán 2
1.2
Ứng dụng của bài toán 2
1.3
Các hướng giải quyết đã được nghiên cứu 3
CHƯƠNG 2: MỘT SỐ KIẾN THỨC HỖ TRỢ 4
2.1
Ngôn ngữ lập trình 4
2.1.1
HTML (Hyper text Mark Language) 4
2.1.2
CSS (Cascading Style Sheets) 4
2.1.3
PHP (PHP: Hypertext Preprocessor) 5
2.1.4
Javascript 6
2.2
Apache HTTP Server 6
2.3
MySql 7
2.4
Ajax 7
2.5
Công nghệ OpenID 9
2.5.1
Giới thiệu về OpenID 9
2.5.2
Các lợi ích khi sử dụng OpenID 9
2.5.3
Google OpenID 10
CHƯƠNG 3: PHÁT TRIỂN ỨNG DỤNG WEB CHAT 15
3.1
Khảo sát hệ thống Web Chat 15
3.2
Phân tích yêu cầu hệ thống Web Chat 15
3.3
Phân tích hệ thống Web Chat 16
3.3.1
Biểu đồ ngữ cảnh hệ thống 16
Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT
IV
3.3.2
Biểu đồ phân rã chức năng 16
3.3.3
Mô hình thực thể liên kết 18
3.3.4
Luồng sự kiện 18
3.4
Thiết kế hệ thống Web Chat 21
3.4.1
Chuyển mô hình ER thành mô hình quan hệ 21
3.4.2
Thiết kế cơ sở dữ liệu vật lý 21
3.4.3
Thiết kế giao diện người dùng 23
CHƯƠNG 4: THỰC NGHIỆM VÀ ĐÁNH GIÁ 26
4.1
Cài đặt ứng dụng 26
4.2
Thực nghiệm 26
4.2.1
Thực nghiệm về giao diện chương trình 26
4.2.2
Thực nghiệm về tính năng của chương trình 26
4.2.3
Một số thực nghiệp khác 28
KẾT LUẬN 30
Phụ lục 31
Tài liệu tham khảo 38
Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT
V
Bảng các kí hiệu và chữ viết tắt
Kí hiệu Diễn giải
HTML HyperText Markup Language
WWW World Wide Web
URL Uniform Resource Locator
CSS Cascading Style Sheets
PHP PHP: Hypertext Preprocessor
Ajax Asynchronous JavaScript and XML
HTTP Hypertext Transfer Protocol
Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT
VI
Danh
mục
hình
vẽ
Hình 1: Chu trình xử lý của Ajax 8
Hình 2: Quá trình xác thực Google OpenID 11
Hình 3: Biểu đồ ngữ cảnh hệ thống Coltech Chat 16
Hình 4: Biểu đồ phân rã chức năng 16
Hình 5: Biểu đồ ngữ cảnh 18
Hình 6: Thiết kế giao diện – Layout chương trình 23
Hình 7: Thiết kế giao diện - Form đăng nhập 24
Hình 8: Thiết kế giao diện – Form đăng ký 24
Hình 9: Thiết kế giao diện – Đăng nhập google 25
Hình 10: Thiết kế giao diện – Giao diện chính 25
Hình 11: Xác nhận việc sử dụng thông tin của hệ thống 27
Hình 12: Giao diện chat 27
Danh mục bảng biểu
Bảng 1: Thiết kế cở sở dữ liệu – Bảng User 22
Bảng 2: Thiết kế cơ sở dữ liệu – Bảng Message 22
Bảng 3: Thiết kế cơ sở dữ liệu – Bảng Friendlist 22
Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT
1
MỞ ĐẦU
Hiện nay, thế giới đang chứng kiến sự phát triển vượt bậc của Internet và các ứng
dụng trên Internet. Cùng với sự phát triển đó cộng với nhu cầu trao đổi và thông tin
liên lạc một cách nhanh chóng và tiện lợi đã thúc đẩy sự phát triển các phần mềm để
trao đổi thông tin một cách tức thì. Điển hình cho các phần mềm đó là ứng dụng
“chat”. Các ứng dụng cho phép người dùng gửi và nhận các thông điệp nhanh chóng
một cách trực tiếp với nhau. Vì thế những ứng dụng như “Window Messeger”, “Yahoo
Messeger”… ra đời. Nhưng vấn đề đặt ra là với các phần mềm “chat” như trên thì một
yêu cầu gần như bắt buộc là việc phải cài đặt ứng dụng để có thể sự dụng chúng. Từ
đó nảy sinh ra ý tưởng đưa các ứng dụng chat lên Web. Một câu hỏi đặt ra là tại sao lại
là web và sự tiện lợi có được là gì khi đưa những ứng dụng “chat” lên web. Câu trả lời
rất đơn giản: Với “Web” bạn có thể thao tác bất cứ đâu có Internet mà không yêu cầu
phải cài đặt ứng dụng. Điều đó mang lại sự thuận tiện cho người dùng và đồng thời là
sự tiết kiệm tài nguyên máy tính một cách đáng kể. Thử tưởng tượng nếu bạn phải làm
việc với một máy tính được kết nối Internet nhưng lại không cài sẵn một chương trình
ứng dụng chat mà bạn cần cho việc trao đổi thông tin với người khác. Thì việc phải tải
ứng dụng và cài đặt ứng dụng đó lên máy tính rõ ràng là rắc rối và phiền phức hơn rất
nhiều so với việc dùng một trang web có cùng chức năng.
Cùng với đó, với sự phát triển bùng nổ của công nghệ web và sự hỗ trợ ngày
càng mạnh của các ngôn ngữ lập trình. Việc tạo ra một trang web có khả năng hoạt
động với các chức năng như một ứng dụng được cài trên máy tính là hoàn toàn có thể.
Vì vậy, việc đưa một ứng dụng trên máy tính lên thành một trang web trở thành một
nhu cầu thiết thực và cần thiết.
Với những lý do trên, khóa luận sẽ tập trung để giải quyết vấn đề xây dựng một
ứng dụng web chat với đề tài “Xây dựng ứng dụng web chat”. Với mục tiêu đề tài là
xây dựng một trang web có khả năng tương tự như những phần mềm chat được cài đặt
trên máy tính đã có trước đây. Cùng với đó khóa luận cũng tập trung hướng tới những
công nghệ hỗ trợ cho sự tiện dụng của người dùng như công nghệ “OPENID” để
nhằm mục đích hoàn thiện hơn nữa các chức năng của một ứng dụng web chat.
Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT
2
CHƯƠNG 1: GIỚI THIỆU BÀI TOÁN XÂY DỰNG ỨNG DỤNG
WEB CHAT
1.1 Nội dung bài toán
Một website có chức năng phục vụ người dùng trao đổi thông tin trực tiếp với
nhau. Đầu tiên người dùng truy cập trang web, đăng ký một tài khoàn trên website.
Sau đó người dùng đăng nhập hệ thống. Sau khi người dùng đăng nhập vào hệ thống,
Hệ thống sẽ hiển thị danh sách bạn của người dùng, các thông điệp được gửi đến cho
người dùng khi người dùng không online (offline message). Khi tham gia hệ thống
người dùng có thể thực hiện một số thao tác:
− Thêm bạn mới
− Xóa một hay nhiều người trong danh sách bạn
− Gửi message tới một người dùng khác.
− Chỉnh sửa lại thông tin cá nhân của mình sau khi đăng ký.
− Thay đổi mật khẩu đăng nhập của tài khoản.
− Đăng nhập bằng tài khoản có sẵn của một hệ thống khác. (Công nghệ
OpenID).
1.2 Ứng dụng của bài toán
Ứng dụng của bài toán rất rõ ràng và được thể hiện ngay qua tên đề tài đó là xây
dựng một ứng dụng chat ngay trên web, tức là một trang web cho phép người dùng
trao đổi thông điệp một cách nhanh chóng. Và không như các phần mềm ứng dụng
chat yêu cầu phải cài đặt phần mềm lên máy tính vừa tốn thời gian vừa tốn tài nguyên
máy tính, web chat mà khóa luận hướng tới để xây dựng vừa đơn giản vừa tiện lợi lại
có thể sử dụng mọi lúc mọi nơi. Đấy là sự tiện lợi lớn nhất mà web chat mang lại cho
người dùng. Đó cũng chính là xu hướng chung của các hệ thống hiện nay.
Với ứng dụng web chat này chúng ta hoàn toàn có thể đưa vào như một chức
năng gắn kèm với một trang web, một diễn đàn trên Internet. Một trang web thông tin
sẽ trở nên thu hút người dùng hơn nếu nó có thêm các chức năng của hệ thống web
chat mà ta đang nói đến.
Hay như một trang web thương mại điện tử, nếu được đính kèm một hệ thống
tương tự như thế này, người dùng sẽ có nhiều cơ hội hơn để trao đổi thông tin với
Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT
3
nhau, tham khảo được nhiều hơn các thông tin của nhau, từ đó dễ dàng hơn trong việc
đưa ra quyết định có hay không mua sản phẩm của trang web kia. Thậm chí ở một cái
nhìn nào đó, hệ thống chat sẽ là kênh quảng cáo cho trang web thương mại điện tử
này.
1.3 Các hướng giải quyết đã được nghiên cứu
Hiện nay, người dùng đã quá quen thuộc với Yahoo Messeger hay Gtalk, những
phần mềm “chat” phổ biến và có rất nhiều tiện ích. Những phần mềm này mang đến
nhiều tính năng hữu dụng: gửi nhận tin nhắn (thông điệp), voice chat, video chat, send
file… Tuy nhiên những phần mềm này lại có nhược điểm như đã trình bày ở trên. Đó
là để sử dụng chúng ngoài việc cài đặt phần mềm tốn nhiều thời gian. Thì còn yêu cầu
phải đăng ký tài khoản người dùng với yahoo hay google tùy vào phần mềm mà bạn
dùng. Điều này không thực sự thuận tiện cho người dùng khi họ muốn có một công cụ
thật sự tiện dụng mà không mất thời gian cài đặt cũng như tài nguyên máy tính. Vì thế
mặc dù đã có những phần mềm rất tốt phục vụ cho việc trao đổi thông tin thì vẫn cần
có những hệ thống cho phép người dùng có thể “chat” ngay trên web với một trình
duyệt thông thường mà bất kỳ máy tính kết nối Internet nào cũng có thể thực thi.
1.4 Hướng giải quyết của khóa luận.
Với những hướng giải quyết đã được nghiên cứu, khóa luận chọn ra một hướng
giải quyết mới, đó là đưa ứng dụng chat lên nền web. Điều đó mang lại sự tiện lợi
không nhỏ cho người dùng vì có thể sử dụng ứng dụng ngay tức thì mà không cần phải
cài đặt phần mềm. Hơn nữa hiện nay, sự phát triển của công nghệ web cũng như các
hỗ trợ ngày càng cao của nó. Các ứng dụng trên nền web cũng có thể phát triển những
tính năng tương với các phần mềm ứng dụng cài đặt.
Từ đó, tôi đã xây dựng hệ thống “Ứng dụng Web Coltech Chat”. Ngoài các tính
năng truyền thống của một hệ thống chat, Hệ thống mà khóa luận xây dựng sẽ đưa ra
một tính năng mới là cho phép người dùng sử dụng một tài khoản người dùng sẵn có
của Google để đăng nhập và sử dụng hệ thống như một người dùng bình thường của
hệ thống.
[...]... tài: Xây dựng ứng dụng WEB CHAT o Cửa sổ đăng nhập bằng Google Account Hình 9: Thiết kế giao diện – Đăng nhập google o Giao diện chính của chương trình Hình 10: Thiết kế giao diện – Giao diện chính 25 Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT CHƯƠNG 4: THỰC NGHIỆM VÀ ĐÁNH GIÁ 4.1 Cài đặt ứng dụng Sau khi xây dựng, ứng dụng web chat đã hoàn thành ở một mức tương đối Ứng dụng. .. - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT CHƯƠNG 3: PHÁT TRIỂN ỨNG DỤNG WEB CHAT 3.1 Khảo sát hệ thống Web Chat - Hiện trạng: Có một số trang web đã triển khai có cùng chức năng như http://webmessenger.yahoo.com/, hay dịch vụ gtalk được cung cấp cùng với gmail Tuy nhiên những dịch vụ kể trên là dịch vụ đi kèm với phần mềm chat được đóng gói để cài đặt trên máy chứ không hẳn là một web chat chuyên biệt... Xây dựng ứng dụng WEB CHAT CHƯƠNG 2: MỘT SỐ KIẾN THỨC HỖ TRỢ 2.1 Ngôn ngữ lập trình Để xây dựng lên một hệ thống là phần mềm ứng dụng hay một trang web thì đầu tiên cần phải sử dụng đến các ngôn ngữ lập trình Và trong mục tiêu riêng của khóa luận các ngôn ngữ lập trình ở đây nói riêng là các ngôn ngữ lập trình web như: html, php, javascript, asp.net Và ở đây, tôi chọn php như là ngôn ngữ chính để xây. .. Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 3.4.3 Thiết kế giao diện người dùng Layout của trang chính Khung hiện thị thông tin chat Khung chứa danh sách bạn và các tác vụ liên quan của hệ thống Khung nhập thông điệp chat Hình 6: Thiết kế giao diện – Layout chương trình 23 Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT Giao diện chi tiết o Đăng nhập Hình... lại toàn bộ, chúng chỉ cập nhật những phần được yêu cầu và xử lý bằng Ajax Các ứng dụng trước không sử dụng Ajax, việc truyền dữ liệu thông qua form, được nhập bởi người dùng tới máy chủ web Máy chủ web sẽ trả về một trang web 7 Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT mới Điều này làm ứng dụng trở nên chậm hơn và lượng thông tin bị trùng lặp xuất hiện nhiều trên đường... ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT dùng Google thực tế, được trả về bằng tham số openid.claimed_id Nếu yêu cầu ban đầu có bao gồm việc trao đổi thuộc tính, các thông tin bổ sung có thể được gửi kèm Bước 9: Ứng dụng web sử dụng bộ nhận diện mà Google cung cấp để nhận ra người dùng và cho phép truy cập vào tính năng cũng như dữ liệu của ứng dụng 2.5.3.2 Làm việc với OpenID a Thiết lập chứng thực OpenID... trang web nếu muốn sử dụng các thành phần trong file css đó Việc sử dụng CSS hạn chế làm rối mã HTML của trang web bằng các thẻ quy định kiểu dáng (chữ đậm, chữ in nghiêng, chữ màu ), 4 Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT khiến mã nguồn của trang web được gọn, tách nội dung của trang web và định dạng hiển thị, dễ dàng cho việc cập nhật nội dung Đồng thời việc sử dụng. .. khoản hay thông tin về tên hoặc email đăng ký 15 Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 3.3 Phân tích hệ thống Web Chat 3.3.1 Biểu đồ ngữ cảnh hệ thống Hình 3: Biểu đồ ngữ cảnh hệ thống Coltech Chat 3.3.2 Biểu đồ phân rã chức năng Webchat Quản lý người dùng Quản lý danh sách Chat bạn Đăng ký Thêm bạn Gửi thông điệp Đăng nhập Xóa bạn Trả lời thong điệp Thay đổi thông... - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT Mã PHP được viết trong cặp thẻ ( đánh dấu sự kết thúc của đoạn mã PHP) Hiện nay, PHP trở nên phổ biến và là ngôn ngữ lập trình ứng dụng web phổ biến nhất trên thế giới Đã có rất nhiều frame work được xây dựng để làm một hệ thống ứng dụng web Các frame work nổi tiếng... OpenID Xác thực đăng nhập OpenID bao gồm một chuỗi các tương tác giữa ứng dụng web, dịch vụ xác thực đăng nhập của Google và người dùng Sơ đồ sau đây mô tả quá trình thao tác theo khuyến nghị của Google: 10 Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT Hình 2: Quá trình xác thực Google OpenID [7] Bước 1: Ứng dụng web yêu cầu người dùng đăng nhập bằng một bộ log-in tùy chọn bao . CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT
2
CHƯƠNG 1: GIỚI THIỆU BÀI TOÁN XÂY DỰNG ỨNG DỤNG
WEB CHAT
1.1 Nội dung bài toán
Một website có chức. chủ web. Máy chủ web sẽ trả về một trang web
Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT
8
mới. Điều này làm ứng dụng
Ngày đăng: 18/02/2014, 00:52
Xem thêm: xây dựng ứng dụng web chat, xây dựng ứng dụng web chat