Khóa luận Xây dựng ứ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 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. Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 4 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 dựng hệ thống của khóa luận. Kết hợp với các ngôn ngữ như là html, javascript, css để xây dựng nên một hệ thống như yêu cầu đặt ra. 2.1.1 HTML (Hyper text Mark Language) HTML hay là ngôn ngữ đánh dấu siêu văn bản. HTML không phải là một ngôn ngữ lập trình mà nó là một ngôn ngữ “đánh dấu” cho phép tạo ra một tài liệu có cấu trúc để định nghĩa nên một tran web cũng như tạo ra các liên kết hay cho phép nhúng các hình ảnh hay clip vào một trang tài liệu. HTML sử dụng các thẻ (tags) để tạo ra một trang web. Một file tài html cũng chính là một trang web. HTML được khai báo trong cặp thẻ chính là . Và cấu trúc của một thành phần HTML có dạng content. Sau đây là ví dụ về một file HTML đơn giản để minh họa: Ví dụ Hello Phần hiện thị chính của trang web được viết nằm trong cặp thẻ , phần ở giữa cặp thẻ là phần đầu của trang web cung cấp các thông tin của trang web như: tiêu đề (trong cặp thẻ ), hay cung cấp các khóa tìm kiếm (trong cặp thẻ ), …. 2.1.2 CSS (Cascading Style Sheets) CSS viết tắt của Cascading Style Sheets. CSS định nghĩa cách hiển thị một thành của các thành phần của HTML. CSS có thể được viết thẳng trong file html, hay viết ra một file *.css riêng và được khai báo trong phần head của 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...), Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 5 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 CSS tạo ra style có thể được áp dụng cho nhiều trang web, giúp tránh phải lặp lại việc định dạng cho các trang web giống nhau. Có 3 cách để sử dụng được CSS cho trang web: - Áp dụng trực tiếp cho đối tượng hay một thành phần của trang web bằng một thuộc tính style (trường hợp này css chỉ có thể được áp dụng cho một thành phần chứa nó). - Đặt CSS ở đầu trang web (phần header) để áp dụng cho duy nhất trang web ấy. - Đặt CSS trong một file *.css riêng biệt và có thể đưa vào nhiều trang khác nhau. Để khai báo cho một trang web sử dụng file style.css ta dùng đoạn mã sau: <link rel="stylesheet" type="text/css" href="style.css"> Một ví dụ về của CSS: body { font-family:arial; font-size: 14px; color:#000000; } 2.1.3 PHP (PHP: Hypertext Preprocessor) Là một ngôn ngữ lập trình dạng ngôn ngữ kịch bản chuyên dùng để phát triển các ứng dụng trên máy chủ. PHP thích hợp để lập trình web và có thể nhúng vào HTML một cách khá dễ dàng. PHP cũng là ngôn ngữ được tối ưu hóa cho các ứng dụng web, có tốc độ nhanh, nhỏ gọn…. Cấu trúc chương trình của PHP cũng gần tương tự như các ngôn ngữ lập trình như C hay Java là cho PHP dễ học, dễ tiếp cận hơn. Từ đó thời gian để xây dựng một hệ thống ứng dụng web bằng PHP là khá nhanh. Một ví dụ minh họa mã PHP được nhúng trong mã HTML: Example Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 6 <?php echo "Hi Nguyễn Ngọc Tráng!"; ?> 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 được viết bằng PHP như JOOMLA, DRUPAL, CAKE PHP. Với các frame work này việc xây dựng một hệ thống ứng dụng web trở nên tiện lợi và tiết kiệm thời gian hơn rất nhiều. Thêm vào đó PHP là ngôn ngữ mã nguồn mở được cả cộng đồng thế giới phát triển. Đó cũng chính là lý do mà khóa luận chọn PHP làm ngôn ngữ chính để xây dựng hệ thống Web Chat mà khóa luận đang hướng tới. 2.1.4 Javascript Javascript là một ngôn ngữ kịch bản dựa trên đối tượng. Được dùng rộng rãi trong để viết các ứng dụng web. Javascript hoạt động với hầu hết các trình duyệt phổ biến như là: Internet Explorer, Firefox, Chrome, Opera, và Safari…. Javascript được viết để thêm các tương tác vào một trang web HTML. Với Javascript bạn có thể làm một trang web HTML trở nên linh động hơn, hấp dẫn hơn và thực hiện được nhiều chức năng hơn. 2.2 Apache HTTP Server Để xây dựng một hệ thống ứng dụng web, ngoài việc thiết kế và lập trình hệ thống đó còn cần một nền tảng để thực thi ứng dụng đó trên nền web. Một trang web được xây dựng lên muốn truy cập được trên Internet cần được chứa trên một web server. Và được thực thi bởi một web http server. Apache đang nói đến ở đây là là một http server như thế. Apache hỗ trợ nhiều tính năng như, nhiều thực thi như là các module biên dịch được mở rộng từ module chức năng cốt lõi. Apache HTTP Server hỗ trợ nhiều ngôn ngữ lập trình phổ biến như: PHP, Perl, Python, Tcl. Apache có các module xác thực để hỗ trợ tính năng xác thực. Ngoài ra Apache còn có một số tính năng khác như hỗ trợ nén bằng module nén gzip…. Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 7 2.3 MySql MySql là hệ quản trị cơ sở dữ liệu mã nguồn mở, nhỏ, gọn tốc độ cao phù hợp với các ứng dụng web. MySql hiện nay được dùng một cách rất phổ biến và thường đi kèm với PHP và Apache thành một bộ công cụ phát triển web mà cộng đồng người dùng ưa thích và lựa chọn. MySql có cấu trúc truy vấn tương đối đơn giản và dễ sử dụng cũng gần giống như cấu trúc truy vấn của MS SQL Server. Và vì MySql có mã nguồn mở việc sử dụng là hoàn toàn miễn phí, rất phù hợp để phát triển ứng dụng mà khóa luận đang hướng đến. Vì thế tôi chọn MySql là hệ quản trị cơ sở dữ liệu mà khóa luận sẽ dùng. Bên cạnh đó ngôn ngữ PHP để kết nối và lấy dữ liệu từ MySql. Nên việc sử dụng là khá dễ dàng. Một ví dụ kết nối MySql bằng PHP: Mysql_connect(“localhost”, “root”, “password”); Mysql_select_db(“test”); Mysql_query(“Select * from users”) 2.4 Ajax Ajax viết tắt của “Asynchronous JavaScript and XML” – “JavaScript và XML không đồng bộ”. Ajax là một nhóm công nghệ phát triển web được sử dụng để tạo ra các ứng dụng web động hay các ứng dụng web đậm tính Internet. Ajax là một kỹ thuật phát triển web có tính tương tác cao bằng việc kết hợp các ngôn ngữ lập trình: o HTML và CSS cho việc hiển thị o Mô hình DOM được thực hiện thông qua JavaScript để thể hiện thông tin động hoặc các tương tác với thông tin. o Đối tượng XMLHttpRequest để trao đổi dữ liệu một cách không đồng bộ với máy chủ web. o XML định dạng cho việc truyền dữ liệu Với Ajax việc xử lý thông tin được thực hiện trên máy yêu cầu dịch vụ thay cho việc thực hiện trên máy phục vụ như cách truyền thống. Máy xử lý yêu cầu dịch vụ chỉ thực hiện việc nhận thông tin từ máy khách và trả lại dữ liệu về cho máy khách. Với Ajax các trang web được cập nhật nhưng không nạp 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 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 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 truyền. Ajax gửi các yêu cầu tới máy chủ và chỉ nhận về những thông tin cần thiết, trên máy client, JavaScript sẽ xử lý các dữ liệu nhận được. Kết quả là trang web được hiển thị nhanh hơn vì có lượng dữ liệu trao đổi giảm đi rất nhiều lần so với cách làm cũ. Hệ thống Ajax được mô tả qua sơ đồ sau đây: Hình 1: Chu trình xử lý của Ajax Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 9 2.5 Công nghệ OpenID 2.5.1 Giới thiệu về OpenID OpenID tạm hiểu là một hệ thống đăng nhập một lần không có tính tập trung. Đối với những trang web có hỗ trợ sử dụng OpenID người sử dụng không còn cần phải nhớ tài khoản và mật khẩu cá nhân của mình ở riêng trang ấy mà chỉ cần sử dụng tài khoản của một nhà cung cấp OpenID được hỗ trợ để đăng nhập vào hệ thống đó. OpenID cho phép bạn sử dụng một tài khoản hiện có để truy cập vào một hay nhiều trang web khác mà không cần phải đăng ký hay tạo ra mật khẩu mới. Việc sử dụng OpenID, bạn hoàn toàn có thể chọn những thông tin liên kết từ tài khoản sẵn có của bạn với trang web mà bạn muốn truy cập. Việc đó cho phép người dùng kiểm soát được lượng thông tin chia sẻ với các trang web mà họ sử dụng. Với OpenID người dùng chỉ cần trao mật khẩu cho nhà cung cấp định danh của họ. Sau đó nhà cung cấp định danh này sẽ xác nhận danh tính của người dùng với trang web mà họ truy cập. Vì thế trang web mà người dùng truy cập vào không bao giờ nhìn thấy hay biết được mật khẩu của người dùng. Điều này là tăng tính bảo mật thông tin người dùng, tăng tính tin cậy khi sử dụng web mà không còn phải lo lắng về một trang web xấu muốn khai thác thông tin của người dùng. 2.5.2 Các lợi ích khi sử dụng OpenID Việc sử dung OpenID có rất nhiều lợi ích như đã nói ở trên. Nó nhanh hơn, an toàn hơn cho người sử dụng mỗi khi truy cập vào một trang web. Sau đây là một số các điểm mạnh của công nghệ này: - Đẩy nhanh quá trình đăng ký đăng nhập: đa số các trang web yêu cầu người dùng đăng ký tài khoản với những thông tin yêu cầu thường là lặp đi lặp lại. Việc đăng ký các tài khoản cá nhân tại các trang web như vậy càng ngày càng tỏ ra quá nhiều bất cập. Người dùng phải khai báo lại các thông cá nhân của mình ở nhiều trang khác nhau để đăng ký tài khoản. Và không có gì đảm bảo các thông tin cá nhân đó được an toàn. OpenID giải quyết tốt vấn đề trên. Thông tin cá nhân chỉ cần được khai báo một lần với nhà cung cấp dịch vụ, có thể là Google hay AOL… và khi truy cập vào trang web nào đó, các nhà cung cấp này sẽ xác thực lại với trang web đó mà người dùng không cần phải làm gì thêm nữa. Điều này mang lại sự thuận tiện mà nhanh chóng cho người dùng. Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 10 - Tăng tính bảo mật: có thể thấy ngay rằng, việc chỉ có nhà cung cấp dịch vụ OpenID mới có mật khẩu hay tất cả các thông tin cá nhân sẽ đảm bảo hơn trong việc bảo mật thông tin cá nhân của người dùng so với các trang web cùng có được các thông tin đó. - Kiểm soát được lượng thông tin chia sẻ: OpenID là một tiêu chuẩn phân cấp. Nó không bị kiểm soát bởi trang web hay một nhà cung cấp dịch vụ nào. Chính người dùng lựa chọn và kiểm soát các thông tin được chia sẻ. 2.5.3 Google OpenID Các trang web hay một phần mềm ứng dụng ở bên thứ ba có thể cho phép người dùng của họ đăng nhập vào hệ thống thông qua tài khoản người dùng của họ. Google hỗ trợ giao thức OpenID 2.0, cung cấp hỗ trợ xác thực như là một nhà cung cấp OpenID. Theo yêu cầu của một trang web thuộc bên thứ ba, Google xác nhận người dùng đang đăng nhập với một tài khoản đã tồn tại của Google, và trả lại cho trang web này định danh và xác nhận của người dùng này. Ngoài ra Google OpenID còn hỗ trợ các chức năng mở rộng sau: - OpenID Attribute Exchange 1.0: cho phép những người phát triển web truy cập những thông tin người dùng được lưu trữ bởi google như là email, tên… với sự chấp nhận và kiểm soát của người dùng đó. - OpenID User Interface 1.0: hỗ trợ việc thay thế quá trình xác thực. Các quá trình xác thực thay thế này cho phép các ứng dụng chuyển hướng quá trình xác thực ở trang web hiện tại sang trang xác thực của google. - OpenID+OAuth Hybrid protocol: cho phép các những người phát triển kết hợp một OpenID request với một OAuth authentication request. Điều này cho phép người phát triển sử dụng cả hai OpenID và OAuth. Đặc biệt, nó đơn giản hóa quá trình phê duyệt người dùng chỉ một lần thay vì hai lần. - PAPE (Provider Authentication Policy Extension): cho phép 2.5.3.1 Các quá trình xác thực OpenID Phần này trình bày về cách thức xác thực của 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: Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 11 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 gồm “Sign in with Google”. Bước 2: Người dùng lựa chọn tùy chọn “Sign in with Google”. Bước 3: Ứng dụng web gửi một “Discovery” request tới Google và để lấy thông tin về điểm cuối của việc xác thực đăng nhập bằng Google. Bước 4: Google trả lại tài liệu XRDS trong đó chứa thông tin về điểm cuối. Bước 5: Ứng dụng web gửi yêu cầu xác thực đăng nhập tời điểm cuối của Google. Bước 6: Hành động này chuyển hướng người dùng tới trang Google Federated Login. Trong cùng một trình duyệt hoặc trong một popup, để yêu cầu người dùng đăng nhập. Bước 7: Sau khi đăng nhập Google sẽ hiện một trang xác thực thông báo việc xác thực đăng nhập vào ứng dụng web của bên thứ ba cho người dùng. Trang xác thực này yêu cầu người sử dụng xác nhận hoặc từ chối việc kết nối đăng nhập tài khoản Google của họ với ứng dụng web kể trên. Bước 8: Nếu người dùng chấp nhận việc xác thực, Google trả người dùng về một địa chỉ URL đặc biệt được chỉ định bằng tham số openid.return_to ở request ban đầu. Một định danh của Google, không có quan hệ với username và password của người Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 12 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 • Thiết kế giao diện đăng nhập: bạn nên giữ giao diện đơn giản nhất có thể. • Lựa chọn một thư viện OpenID 2.0 phù hợp với ngôn ngữ lập trình: có nhiều thư viện OpenID 2.0 dành cho các ngôn ngữ lập trình khác nhau. • Tạo cơ chế phát hiện và thực hiện yêu cầu chứng thực: gửi một discovery request tới đường dẫn URL mà Google cung cấp để lấy được thông tin về điểm cuối xác thực của Google OpenID. Sử dụng một trong các phương thức như: sử dụng thư viện, phương thức GET hay POST để thực hiện request lấy thông tin này. • Thêm các thuộc tính trao đổi vào request xác thực. Việc thêm các thuộc tính trao đổi để có được các thông tin ngoài thông tin về tài khoản của Google như tên, địa chỉ... tốt hơn là chỉ lấy mỗi thông tin về tài khoản. • Sử dụng giao diện người mở rộng cho việc xác thực OpenID. Ở phần này Google khuyên nghị nên sử dụng một trang popup để thể hiện việc đăng nhập bằng OpenID. • Sử dụng tính năng mở rộng PAPE để điều khiển tốt hơn việc xác thực thông tin người dùng. • Thêm khả năng OAuth vào yêu cầu xác thực b. Thực hiện OAuth với Federated Login Mục tiêu của OAuth là có được mã truy cập từ Google, sau đó sử dụng để trao đổi dữ liệu cụ thể với một dịch vụ nào đó của Google. Quá trình xử lý thông thường của OAuth bao gồm bốn bước: (1) yêu cầu một token request, (2) yêu cầu token ủy quyền, (3) đổi token ủy quền thành token truy cập, (4) sử dụng token truy cập để truy cập dịch vụ dữ liệu của Google. Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 13 Với OpenID + OAuth các quá trình này tương tự. Sự khác biệt nằm ở chỗ là ta nhận được một token ủy quyền OAuth được gói trong một một yêu cầu chứng thực OpenID. Bằng cách này người dùng có thể xác thực và truy cập dịch vụ một cách đồng thời.
Sử dụng OpenID + OAuth: • Quyết địnhc có hoặc không đăng ký trang web của bạn với Google. • Thiết lập một cơ chế để quản lý các yêu cầu OpenID, với tham số mở rộng OAuth. • Thiết lập một cơ chế để nhận được yêu cầu OAuth token và trao đổi nó cho một mã thông báo truy cập. • Thiết lập một cơ chế để yêu cầu truy cập vào một dịch vụ Google. 2.5.3.3 OpenID endpoint Phần này trình bày một cách toàn diện thành phần đầu cuối của OpenID. Để có được thành phần đầu cuối của Google, thực hiện việc phát hiện bằng cách gửi Get hoặc Head request tới địa chỉ https://www.google.com/accounts/o8/id. Khi đó Google sẽ trả về một tài liệu XRDS có chứa địa chỉ URL của thành phần đầu cuối của Google. Thông điệp trả về có dạng: {Google's login endpoint URI}
Các tham số yêu cầu của OpenID. Khi đã có được thành phần đầu cuối của Google, chúng ta cần gửi yêu cầu xác thực với nó, với các tham số được xác định. Kết nối với điểm cuối bằng cách gửi request bằng URL hoặc HTTP Post. Các request này cần có những tham số để Google hiểu được yêu cầu của hệ thống khác với mình. (Xem phụ lục).
Đáp ứng của các yêu cầu xác thực Khi Google đã chấp nhận yêu cầu xác thực người sử dụng được chuyển tới trang xác thực của Google, lúc này các quá trình trên được thực hiện. Khi xác thực thành công, Google chuyển hướng người sử dụng trở lại URL được khai báo trong biến openid.return_to ở yêu cầu ban đầu. Các dữ liệu trả về được nối vào như là các tham Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 14 số truy vấn, bao gồm định danh được Google cung cấp, thông tin người dùng, và nếu có yêu cầu sẽ có thêm Oauth. Nếu người dùng không chấp nhận việc xác thực, Google sẽ gửi một phủ định tới yêu cầu của ứng dụng web đã yêu cầu. Xem phần phụ lục để biết thêm chi tiết ví dụ về việc sử dụng Google OpenID cả việc gửi request yêu cầu cũng như nhận các thông điệp trả về. Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 15 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ư 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. - Các diễn đàn hiện nay cũng cung cấp shoutbox hỗ trợ người dùng thảo luận, tuy nhiên shoutbox lại chỉ cung cấp cách nói chuyện theo nhóm public mà không hỗ trợ trao đổi riêng tư như các phần mềm chat. - Tổng hợp các yêu cầu, mục tiêu của dự án: o Yêu cầu đầu tiên là người dùng có thể đăng ký tài khoản và dùng tài khoản đó để trao đổi thông tin trực tiếp với các tài khoàn khác. o Kết hợp được những ưu điểm: Sự tiên lợi nhanh chóng khi truy cập website so với cài đặt phần mềm. o Vẫn giữ được các đặc trưng của các phần mềm chat là có thể chat riêng hai người với nhau. o Ngoài ra còn có thể có thêm các yêu cầu như là webchat được xây dựng có thể liên kết với các dịch vụ chat khác như Yahoo, Google... để trao đổi thông tin trực tiếp. 3.2 Phân tích yêu cầu hệ thống Web Chat - Đăng ký, đăng nhập, và đăng nhập thông qua tài khoản của google - Hệ thống cho phép người dùng gửi thông điệp một cách dễ dàng và nhanh chóng cho người khác - Hệ thống cho phép người dùng tìm thông tin một người dùng khác thông qua thông tin về tài khoản hay thông tin về tên hoặc email đăng ký. Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 16 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 Hình 4: Biểu đồ phân rã chức năng Mô tả chức năng lá: - Đăng ký: Người dùng nhập các thông tin theo mẫu của hệ thống yêu cầu, Để đăng ký một tài khoản mới, tài khoản mới không được trùng với các tài Webchat Quản lý danh sách bạn Thêm bạn Xóa bạn Tìm bạn Chat Gửi thông điệp Trả lời thong điệp Quản lý người dùng Đăng ký Đăng nhập Thay đổi thông Reset password Đăng nhập bằng google id Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 17 khoản đã có và các thông tin do người sử dụng cung cấp phải tuân theo quy định của hệ thống. - Đăng nhập: Khi muốn tham gia vào hệ thống để trao đổi thông điệp người dùng cần phải đăng nhập vào một tài khoản đã được đăng ký trước đó, để cho hệ thống có thể quản lý được người dùng. Đăng nhập là bước xác định người dùng của hệ thống. - Đăng nhập bằng google id: Nếu người dùng đã có tài khoản của google. Người dùng có thể dùng ngay tài khoản này để đăng nhập vào hệ thống mà không cần phải đăng ký tài khoản của hệ thống. - Thay đổi thông tin: Chức năng này cho phép người dùng thay đổi thông tin cá nhân bao gồm cả password đăng nhập. - Reset password: Khi người dùng quên password đăng nhập vào tài khoản của mình. Người dùng có thể yêu cầu hệ thống cấp thay đổi password của mình một cách tự động và gửi mật khẩu mới vào mail đăng ký của người dùng đó. Chức năng này đảm nhiệm việc trên. - Thêm bạn: Người dùng có một danh sách bạn để tiện cho việc trao đổi thông điệp. Chức năng này cho phép người dùng thêm một người dùng mới vào trong danh sách bạn đó. - Xóa bạn: Chức năng này ngược với chức năng thêm bạn. Khi không muốn người dùng nào đó có trong danh sách bạn của mình nữa thì người dùng sử dụng chức năng này để xóa người đó ra khỏi danh sách bạn. - Tìm bạn: Người dùng có thể tìm bạn theo các thông tin như chatid của bạn nếu biết hoặc tìm theo một số thông tin khác như email đăng ký hay tên đầy đủ. - Gửi, trả lời thông điệp: Chức năng này bao gồm 2 chức năng con là tạo và gửi một thông điệp từ người dùng đến người dùng khác. Và chức năng nữa là nhận và trả lời thông điệp nhận được. Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 18 3.3.3 Mô hình thực thể liên kết Hình 5: Biểu đồ ngữ cảnh 3.3.4 Luồng sự kiện 3.3.4.1 Đăng nhập Tên Use Case Đăng nhập Tác nhân Người dùng, Web Chat Mức 2 Sự kiện kích hoạt Người dùng nhấn vào đăng nhập Luồng sự kiện chính: 1. Hiện lên cửa sổ yêu cầu nhập và mật khẩu 2. Nhấn nút Sign in 3. Đăng nhập thành công, quay lại trang chủ Luồng sự kiện phụ: 3.1 Đăng nhập thất bại, yêu cầu đăng nhập lại. Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 19 3.3.4.2 Đăng nhập bằng Google Account Tên Use Case Đăng nhập bằng google account Tác nhân Người dùng, Web Chat Mức 2 Sự kiện kích hoạt Người dùng nhấn vào đăng nhập bằng Gmail Luồng sự kiện chính: 4. Hiện lên cửa sổ yêu cầu nhập Gmail và mật khẩu 5. Nhấn nút Sign in 6. Dịch vụ của Google thực hiện đăng nhập 7. Đăng nhập thành công, quay lại trang chủ Luồng sự kiện phụ: 3.1 Đăng nhập thất bại, yêu cầu đăng nhập lại. 3.3.4.3 Đăng ký Tên Use Case Đăng ký Tác nhân Người dùng, Web Chat Mức 2 Sự kiện kích hoạt Người dùng nhấn vào đăng ký Luồng sự kiện chính: 1. Hiện lên cửa sổ yêu cầu nhập thông tin đăng ký 2. Nhấn nút Đăng ký 3. Đăng ký thành công quay lại trang đăng nhập Luồng sự kiện phụ: 3.1 Đăng ký thất bại, yêu cầu đăng ký lại. Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 20 3.3.4.4 Quản lý danh sách người dùng (list bạn) Tên Use Case Quản lý danh sách người dùng Tác nhân Người dùng, Web Chat Mức 2 Sự kiện kích hoạt Người dùng nhấn vào quản lý danh sách Luồng sự kiện chính: 1. Hiện lên cửa sổ yêu cầu nhập thông tin tìm kiếm 2. Nhấn nút Search 3. Tìm ra kết quả 4. Hiện ra danh sách kết quả 5. Người dùng chọn thêm vào danh sách bạn 6. Người dùng chọn xóa trong danh hiện có Luồng sự kiện phụ: 3.1 Không tìm thấy, hiện ra thông báo 5.1 Quay lại trang chính 6.1 Quay lại trang chính 3.3.4.5 Quản lý thông tin cá nhân Tên Use Case Quản lý thông tin cá nhân Tác nhân Người dùng, Web Chat Mức 2 Sự kiện kích hoạt Người dùng nhấn vào quản lý thông tin cá nhân Luồng sự kiện chính: 1. Hiện lên cửa sổ chứa thông tin cá nhân 2. Người dùng sửa thông tin cá nhân và nhập mật khẩu 3. Nhấn nút Update Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 21 Luồng sự kiện phụ: 3.1 Cập nhật thành công quay về trang chính 3.3.4.6 Chat Tên Use Case Chat Tác nhân Người dùng, Web Chat Mức 1 Sự kiện kích hoạt Double click vào một người trong danh sách bạn Luồng sự kiện chính: 1. Hiện lên cửa sổ chat 2. Người dùng nhập thông điệp 3. Nhấn nút gửi hoặc ấn enter 4. Hệ thống hiện thị thông điệp vào khung chat 3.4 Thiết kế hệ thống Web Chat 3.4.1 Chuyển mô hình ER thành mô hình quan hệ USER(userID, username, email, full_name, password, gender, birthday, address, mobile) MESSAGE(msgID, content, from_user, to_user, time, status) FRIENTLIST(id, owner, user_friend_id) 3.4.2 Thiết kế cơ sở dữ liệu vật lý Sử dụng hệ quản trị cở sở dữ liệu mysql Table User: Thuộc tính Kiểu dữ liệu Cỡ Định dạng Rảng buộc UserID Int 11 primary Username Varchar 12 unique Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 22 Email Varchar 255 ten@domain unique Full_Name Varchar 255 password Int 11 Gender Tinyint 1 Birthday Date Mm/dd/yyyy Address Varchar 255 Mobile Int 15 Bảng 1: Thiết kế cở sở dữ liệu – Bảng User Table Message Thuộc tính Kiểu dữ liệu Cỡ Định dạng Ràng buộc MsgID Int 11 primary Content Text From_id Int 11 Foreign key To_user Int 11 Foreign key Time Time status Tinyint 1 Bảng 2: Thiết kế cơ sở dữ liệu – Bảng Message Table Friendlist Thuộc tính Kiểu dữ liệu Cỡ Định dạng Ràng buộc flID Int 11 Primary Owner Int 11 Foreign key User_friend_id Int 11 Foreign key Bảng 3: Thiết kế cơ sở dữ liệu – Bảng Friendlist Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 23 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 Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 24
Giao diện chi tiết o Đăng nhập Hình 7: Thiết kế giao diện - Form đăng nhập o Đăng ký Hình 8: Thiết kế giao diện – Form đăng ký Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 25 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 Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 26 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 đã được cài đặt theo địa chỉ Với môi trường được cài là: web server cài sử dụng hệ điều hành linux phiên bản CentOS 5.2. Được cài đặt Apache, MySql và PHP. 4.2 Thực nghiệm Thực nghiệm trên một số brower như: Firefox 3.6, Internet Explorer 8.0… cho thấy chương trình hoạt động tốt. 4.2.1 Thực nghiệm về giao diện chương trình Về giao diện chương trình, qua thực nghiệm trên các brower kể trên cho kết quả tốt. Hình ảnh, khuôn hình, bố cục hiển thị đúng với thiết kế đề ra. Form chat và cách thức hiển thị thông điệp chat tạo cho người dùng cảm giác rõ ràng và thoải mái.... 4.2.2 Thực nghiệm về tính năng của chương trình o Tính năng đăng nhập bằng tài khoản Google. Vào địa chỉ chọn đăng nhập bằng tài khoản Google. Đầu tiên ta thấy một cửa sổ popup của trình duyệt hiện ra yêu cầu đăng nhập bằng tài khoản của Google, như hình (). Điều này chứng tỏ hệ thống hoạt động đúng theo mô hình các quá trình xác thực của Google OpenID. Nhập tài khoản và mật khẩu vào để đăng nhập vào tài khoản Google. Sau đó bạn phải xác nhận cho phép Coltech Chat sử dụng thông tin của bạn theo hình sau: Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 27 Hình 11: Xác nhận việc sử dụng thông tin của hệ thống Nếu bạn chọn “Cho phép” thì popup sẽ đóng lại và thông tin sẽ được chuyển sang cho hệ thống Coltech Chat và lúc này coi như bạn đã đăng nhập thành công. Chứng tỏ việc sử dụng OpenID để xác thực thông tin tài khoản thành công và hệ thống Coltech Chat đã nhận được những thông tin về tài khoản của bạn. Điều này cho thấy hệ thống hoạt động tốt với Google OpenID. o Tính năng chat Sau khi đăng nhập người dùng chọn một bạn trong danh sách bạn của mình. Form chat hiện ra với tên đối tượng đang gửi thông điệp ở trên như sau: Hình 12: Giao diện chat Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 28 Việc gửi và nhận thông điệp giữa hai người dùng (chat) diễn ra suôn sẻ. Điều đó chứng tỏ chức năng cơ bản nhất của hệ thống đã được đáp ứng tốt. o Các tính năng quản lý thôn tin người dùng và danh sách bạn Qua việc tiến hành sử dụng cũng như sử dụng cho thấy, các chức năng như quản lý thông tin người dùng hay quản lý thông tin về danh sách bạn của người dùng tỏ ra dễ thao tác, dễ sử dụng và rất tiện lợi cho người dùng. 4.2.3 Một số thực nghiệp khác o Thực nghiệm về tốc độ trao đổi thông điệp Về tốc độ, qua thực nghiệm cho thấy sau khi người gửi gửi đi một thông điệp chậm nhất là sau 0,1 giây người nhận sẽ nhận được nếu sử dụng localhost (thực nghiệm đăng nhập và chat trên một máy với hai người dùng). Và với môi trường internet thực tế thì con số đó là khoảng xấp xỉ 1 giây tùy vào môi trường cũng như khoảng cách của hai người cùng với tốc độ của máy chủ… o Thực nghiệm về số lượng người dùng kết nối đến hệ thống Qua thực nghiệm trên server thực tế cho thấy số lượng người dùng tối đa kết nối tới hệ thống cùng một lúc có thể lên tới hàng trăm ngàn kết nối. Tùy vào cấu hình của máy chủ đặt hệ thống và tốc độ cũng như băng thông đường truyền Internet tới máy chủ đó. 4.3 Đánh giá và hướng phát triển trong tương lai Từ những thực nghiệm trên cho thấy, hệ thống mà khóa luận trên cho thấy: hệ thống đã phần nào đáp ứng được yêu cầu đặt ra ban đầu. Tuy nhiên, hệ thống còn nhiều nhược điểm và cần phát triển hơn nữa trong tương lai. So với những phần mềm chat khác, hệ thống còn thiếu một số chức năng khác như: − Chat nhóm. − Video chat. − Voice chat. − Gửi và nhận file. Nếu phát triển hệ thống hơn nữa cần hướng tới công nghệ mới hơn, hoàn thiện hơn. Cũng như phát triển thêm nhiều chức năng mới không chỉ là các chức năng kể trên. Với việc sử dụng công nghệ Ajax, có nhiều các request không cần thiết đến server. Thay bằng Ajax, trong tương lai hệ thống có thể sử dụng công nghệ mới như Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 29 CommetD. Đây là công nghệ hoàn thiện hơn so với Ajax trong việc yêu cầu và đáp ứng yêu cầu của máy khách cũng như máy chủ. Công nghệ này cũng giúp cho hệ thống hoạt động với tốc độ nhanh hơn và có tính thời gian thực cao hơn. Với CommetD máy khách không cần phải thực hiện request liên tục lên máy chủ để lấy thông tin mà ngược lại, khi có thông tin cập nhật, máy chủ sẽ đẩy thông tin ấy cho máy khách một cách tức thì. Việc thực hiện và triển khai công nghệ này đòi hỏi nhiều thời gian cho việc nghiên cứu. Vì thế, đây sẽ là hướng phát triển rất tốt trong tương lai. Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 30 KẾT LUẬN Sau khi những mục tiêu của khóa luận đã hoàn thành, tôi rút ra một số kết luận. Để xây dựng hoàn thiện một hệ thống như mục tiêu mong muốn cần nhiều thời gian và khóa luận còn cần hoàn thiện hơn nữa. Những gì khóa luận đã làm vẫn còn phải chỉnh sửa và hoàn thiện rất nhiều nếu muốn hệ thống được sử dụng một cách đích thực. Tuy nhiên trong khuôn khổ khóa luận. Những kết quả đã đạt được cũng phần nào đáp ứng được mục tiêu. Đó là tạo ra một hệ thống website cho phép người dùng chat trực tiếp. Đáp ứng được những chức năng cơ bản như một phần mềm và hơn nữa người dùng có thể dùng tài khoản Google để đăng nhập ngay vào hệ thống mà không cần phải đăng ký. Điều này mang lại những tiện lợi nhất định cho người dùng. Với những kết quả đạt được và những gì nghiên cứu được. Tin tưởng đây sẽ là một hướng phát triển mới của các ứng dụng trong tương lai. Những ứng dụng được thiết kế và xây dựng trên nền web. Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 31 Phụ lục 1. Các tham số Google OpenID: [7] Tham số Loại Mô tả Openid.mode Yêu cầu Hình thức tương tác. Chỉ rõ liệu Google có thể tương tác với người dùng để thực hiện việc xác định các kết quả của yêu cầu. Các giá trị của tham số này có thể là: o Checkid_immediate: Không cho phép tương tác o Checkid_setup: Cho phép tương tác o Google hỗ trợ một nâng cao cho “checkid_immediate” thông qua giao diện người dùng mở rộng. Nếu request có chứa “openid.ui.mode=x-has-session”, nó sẽ được nhắc lại trong response nếu Google phát hiện một phiên chứng thực. Openid.ns Yêu cầu Phiên bản giao thức. Giá trị xác đinh phiên bản OpenID được sử dụng. Giá trị này nên là: “”. Openid.return_to Yêu cầu URL trả về. Giá trị xác định nơi người dùng được trả lại sau khi đăng nhập. Google hỗ trợ các loại địa chỉ HTTP và HTTPS. Openid.assoc_handle Tùy chọn Sự kết hợp xử lý. Được đặt nếu một sự kết hợp giữa ứng dụng web và nhà cung cấp OpenID được thiết lập. Openid.claimed_id Tùy chọn Tuyên bố chủ quyền định danh. Giá trị này phải được đặt là: “”. Openid.identity Tùy chọn Giá trị này phải đặt là: Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 32 “”. Openid.realm Tùy chọn Xác định tên miền mà người dùng cuối cùng tin tường. Giá trị này phải phù hợp với giá trị trong tham số openid.return_to. Nếu giá trị này không được khia báo, Google sẽ sử dụng các URL trong tham số openid.return_to. PAPE mở rộng Openid.ns.page Yêu cầu Xác định các giao thức mở rộng được sử dụng. Giá trị này nên được đặt là: “”. Openid.page.max_au th_age Tùy chọn Thiết lập thời gian chấp nhận tối đa (tính bằng giây) tính từ khi người dùng cuối cùng chức thực. Nếu session lâu hơn, người dùng sẽ được nhắc nhở đăng nhập lại. Bằng 0 nếu không bắt buộc đăng nhập lại. Giao diện người dùng mở rộng Openid.ns.ui Yêu cầu Chỉ ra rằng trang xác thực của nhà cung cấp OpenID sẽ được thay thế bằng một giao diện người dùng khác. Tham số này phải được đặt là: "". Openid.ui.mode Tùy chọn Chỉ định giao diện người dùng thay thế. Có thể là các giá trị sau đây: o “Popup”. o “X-has-session” (chỉ sự hiện diện của một phiên xác thực) Openid.ui.icon Tùy chọn Hiện thị icon của domain nếu đặt là “true” Thuộc tính trao đổi mở rộng Openid.ns.ax Yêu cầu Chỉ ra yêu cầu thuộc tính người dùng. Giá trị này phải được đặt là "". Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 33 Openid.ax.mode Yêu cầu Giá trị này phải đặt là “fetch_request”. Openid.ax.required Yêu cầu Chỉ định các thuộc tính yêu cầu, bao gồm: o “country”. o “email” o “firstname” o “lastname” o “language” Nếu yêu cầu nhiều thuộc tính, các thuộc tính cách nhau bởi dấu “,”. Openid.ax.type.coun try Tùy chọn Yêu cầu country của người dùng. Giá trị này phải được đặt là: "". Openid.ax.type.emai l Tùy chọn Yêu cầu thuộc tính email của người dùng. Giá trị này phải được đặt là: “” hoặc “”. Openid.ax.type.firstn ame Tùy chọn Yêu cầu thuộc tính firstname của người dùng. Giá trị phải được đặt là: "". Opend.ax.type.lastna me Tùy chọn Yêu cầu thuộc tính lastname của người dùng. Giá trị phải được đặt là: "". Openid.ax.type.lang uage Tùy chọn Yêu cầu ngôn ngữ yêu thích của người dùng. Giá trị phải được đặt là: "". Oauth mở rộng Openid.ns.ext2 Yêu cầu Chỉ ra một yêu cầu cho mã thông báo Oauth. Giá trị phải đặt là: "" Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 34 Openid.ext2.consum er Bắt buộc Khóa của người dùng được cung cấp bởi Google sau khi đăng ký trang web. Đây thường là một tên miền DNS. Giá trị này phải phù hợp với giá trị openid.realm Openid.ext2.scope Bắt buộc Danh sách các URL xác định các dịch vụ của Google có thể truy cập được. 2. Ví dụ về OpenID a. Mẫu các yêu cầu xác thực Ví dụ về việc yêu cầu chứng thực như là một URL: https://www.google.com/accounts/o8/id ?openid.ns= &openid.claimed_id= r_select &openid.identity= select &openid.return_to= &openid.realm= &openid.assoc_handle=ABSmpf6DNMw &openid.mode=checkid_setup [7] Ví dụ việc yêu cầu xác thực đăng nhập với độ dài phiên là 5 phút và kèm theo các yêu cầu thông tin cá nhân bổ sung như thuộc tính ngôn ngữ, sử dụng popup để yêu cầu đăng nhập: https://www.google.com/accounts/o8/id ?openid.ns= &openid.ns.pape= &openid.ns.max_auth_age=300 &openid.claimed_id= r_select &openid.identity= select &openid.return_to= &openid.realm= &openid.assoc_handle=ABSmpf6DNMw &openid.mode=checkid_setup &openid.ui.ns= &openid.ui.mode=popup &openid.ui.icon=true &openid.ns.ax= Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 35 &openid.ax.mode=fetch_request &openid.ax.type.email= &openid.ax.type.language= &openid.ax.required=email,language [7] Ví dụ minh họa một OpenID + Oauth: https://www.google.com/accounts/o8/id ?openid.ns= &openid.claimed_id= r_select &openid.identity= select &openid.return_to= &openid.realm= &openid.assoc_handle=ABSmpf6DNMw &openid.mode=checkid_setup &openid.ns.oauth= &openid.oauth.consumer=www.example.com &openid.oauth.scope= adsheets.google.com/feeds/ [7] b. Mẫu thông tin trả về của Google Url trả về khi đăng nhập thành công ?openid.ns= &openid.mode=id_res &openid.op_endpoint=https://www.google.com/accounts/o8/ud &openid.response_nonce=2008-09-18T04:14:41Zt6shNlcz-MBdaw &openid.return_to= &openid.assoc_handle=ABSmpf6DNMw &openid.signed=op_endpoint,claimed_id,identity,return_to,resp onse_nonce,assoc_handle &openid.sig=s/gfiWSVLBQcmkjvsKvbIShczH2NOisjzBLZOsfizkI= &openid.identity=https://www.google.com/accounts/o8/id/id=ACy QatixLeLODscWvwqsCXWQ2sa3RRaBhaKTkcsvUElI6tNHIQ1_egX_wt1x3fAY 983DpW4UQV_U &openid.claimed_id=https://www.google.com/accounts/o8/id/id=A CyQatixLeLODscWvwqsCXWQ2sa3RRaBhaKTkcsvUElI6tNHIQ1_egX_wt1x3f AY983DpW4UQV_U [7] Ví dụ về thông tin trả về khi quá trình xác thực không thành công ?openid.mode=cancel &openid.ns= Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 36 Ví dụ thông tin trả về khi xác thực thành công và có yêu cầu các thông tin tài khoản đi kèm như ngôn ngữ,… ?openid.ns= &openid.mode=id_res &openid.op_endpoint=https://www.google.com/accounts/o8/ud &openid.response_nonce=2008-09-18T04:14:41Zt6shNlcz-MBdaw &openid.return_to= &openid.assoc_handle=ABSmpf6DNMw &openid.ns.pape= &openid.pape.auth_time=2005-05-15T17:11:51Z &openid.pape.auth_policies= icies/2007/06/none &openid.signed=op_endpoint,claimed_id,identity,return_to,resp onse_nonce,assoc_handle,ax.mode,ax.type.email,ax.value.email &openid.sig=s/gfiWSVLBQcmkjvsKvbIShczH2NOisjzBLZOsfizkI= &openid.identity=https://www.google.com/accounts/o8/id/id=ACy QatixLeLODscWvwqsCXWQ2sa3RRaBhaKTkcsvUElI6tNHIQ1_egX_wt1x3fAY 983DpW4UQV_U &openid.claimed_id=https://www.google.com/accounts/o8/id/id=A CyQatixLeLODscWvwqsCXWQ2sa3RRaBhaKTkcsvUElI6tNHIQ1_egX_wt1x3f AY983DpW4UQV_U &openid.ns.ax= &openid.ax.mode=fetch_response &openid.ax.type.email= &openid.ax.value.email=fred.example@gmail.com &openid.ax.type.language= &openid.ax.value.language=english [7] Thông tin trả về với một token Oauth: ?openid.ns= &openid.mode=id_res &openid.op_endpoint=https://www.google.com/accounts/o8/ud &openid.response_nonce=2008-09-18T04:14:41Zt6shNlcz-MBdaw &openid.return_to= &openid.assoc_handle=ABSmpf6DNMw &openid.ns.pape= &openid.pape.auth_time=2005-05-15T17:11:51Z &openid.pape.auth_policies= icies/2007/06/none &openid.signed=op_endpoint,claimed_id,identity,return_to,resp onse_nonce,assoc_handle,ax.mode,ax.type.email,ax.value.email &openid.sig=s/gfiWSVLBQcmkjvsKvbIShczH2NOisjzBLZOsfizkI= &openid.identity=https://www.google.com/accounts/o8/id/id=ACy QatixLeLODscWvwqsCXWQ2sa3RRaBhaKTkcsvUElI6tNHIQ1_egX_wt1x3fAY 983DpW4UQV_U Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 37 &openid.claimed_id=https://www.google.com/accounts/o8/id/id=A CyQatixLeLODscWvwqsCXWQ2sa3RRaBhaKTkcsvUElI6tNHIQ1_egX_wt1x3f AY983DpW4UQV_U &openid.ns.ax= &openid.ax.mode=fetch_response &openid.ax.type.email= &openid.ax.value.email=fred.example@gmail.com &openid.ax.type.language= &openid.ax.value.language=english [7] Nguyễn Ngọc Tráng – Khoa CNTT - ĐHCN Đề tài: Xây dựng ứng dụng WEB CHAT 38 Tài liệu tham khảo [1] Jon Duckett. Beginning Web Programming with HTML XHTML and CSS. Wiley Publishing, Inc, 2004. [2] Michael Glass, Yann Le Scouarnec, Elizabeth Naramore, Gary Mailer, Jeremy Stolz, and Jason Gerner. Beginning PHP, Apache, MySQL Web Development. Wiley Publishing, Inc, 2004. [3] Christopher Cosentino. Advanced PHP for Web Professionals. Prentice Hall PTR, 2002. [4] Matthew Eernisse. Build Your Own Ajax Web Application. SitePoint, 2006. [5] Danny Goodman. JavaScript & DHTML Cookbook. O'Reilly, 2003. [6] Akinola Akintomide. Ajax For Web Application Developers. Sam, 2007. [7] Federated Login for Google Account Users. (