Đồ án Xây dựng từ điển Multimedia dùng công nghệ AJAX trên nền PHP

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC KỸ THUẬT CÔNG NGHỆ ---------------o0o--------------- ĐỒ ÁN TỐT NGHIỆP Đề tài XÂY DỰNG TỪ ĐIỂN MULTIMEDIA DÙNG CÔNG NGHỆ AJAX TRÊN NỀN PHP SVTH : LÊ THANH NHÀN Lớp : 03DTHM MSSV : 103102139 GVHD : Thầy HOÀNG ĐỨC QUANG THÀNH PHỐ HỒ CHÍ MINH NĂM 2009 1 BỘ GIÁO DỤC & ĐÀO TẠO ĐẠI HỌC KỸ THUẬT CÔNG NGHỆ TP.HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM ĐỘC LẬP – TỰ DO – HẠNH PHÚC _____oOo_____ Khoa: Công nghệ thông tin Bộ môn: Mạng máy tính NHIỆM VỤ THỰC HIỆN LUẬN VĂN TỐT NGHIỆP CUỐI KHOÁ Họ và tên : Lê Thanh Nhàn MSSV : 103102139 Ngành : Mạng máy tính Lớp : 03DTHM 1. Đầu đề đồ án tốt nghiệp : Xây dựng từ điển multimedia dùng công nghệ Ajax trên nền PHP. 2. Nhiệm vụ : a. Dữ liệu ban đầu : ..................................................................................................................................................... ..................................................................................................................................................... ..................................................................................................................................................... ..................................................................................................................................................... ..................................................................................................................................................... ..................................................................................................................................................... b. Nội dung  Phần tìm hiểu công nghệ : ............................................................................................................................... ............................................................................................................................... ............................................................................................................................... ............................................................................................................................... ...............................................................................................................................  Phần phân tích, thiết kế & xây dụng ứng dụng minh họa : 2 ............................................................................................................................... ............................................................................................................................... ............................................................................................................................... ............................................................................................................................... ............................................................................................................................... 3. Ngày giao nhiệm vụ đồ án: 7/10/2008 4. Ngày hoàn thành nhiệm vụ: 3/1/2009 5. Họ tên giáo viên hướng dẫn: thầy Hoàng Đức Quang Nội dung và yêu cầu đồ án tốt nghiệp đã thông qua. TP.HCM, ngày …… tháng …… năm 2009 CHỦ NHIỆM KHOA (Ký và ghi rõ họ tên) GIÁO VIÊN HƯỚNG DẪN CHÍNH (Ký và ghi rõ họ tên) PHẦN DÀNH CHO BỘ MÔN Người duyệt (chấm sơ bộ) : ................................................. Đơn vị : .................................................................................. Ngày bảo vệ : ........................................................................ Điểm tổng quát : .................................................................. 3 NHẬN XÉT ĐÁNH GIÁ CỦA GIẢNG VIÊN HƯỚNG DẪN ĐỀ TÀI: ............................................................................................................................. ............................................................................................................................................ Sinh Viên: ........................................................... Chuyên ngành ................................. ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ Điểm bằng số: ..................................................... Điểm bằng chữ: .................................................. Tp. Hồ Chí Minh, ngày tháng năm NGƯỜI NHẬN XÉT (Ký tên và ghi rõ họ tên) 4 NHẬN XÉT ĐÁNH GIÁ CỦA GIẢNG VIÊN PHẢN BIỆN ĐỀ TÀI: ............................................................................................................................. ............................................................................................................................................ Sinh Viên: ........................................................... Chuyên ngành ................................. ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ Các câu hỏi (tối đa 3 câu): ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ ............................................................................................................................................ Điểm bằng số: ..................................................... Điểm bằng chữ: .................................................. Tp. Hồ Chí Minh, ngày tháng năm NGƯỜI NHẬN XÉT (Ký tên và ghi rõ họ tên) 5 LỜI CÁM ƠN Để hoàn thành được đồ án tốt nghiệp này, em đã được sự trợ giúp rất nhiều của thầy cô, bạn bè và gia đình. Đầu tiên, em xin gởi lời cảm ơn đến Thầy, Cô khoa Công Nghệ Thông Tin trường Đại học Kỹ Thuật Công Nghệ đã tận tình dạy dỗ, dìu dắt em trong suốt bốn năm đại học. Em xin cảm ơn Thầy Hoàng Đức Quang, người tận tình hướng dẫn, giúp đỡ, động viên em trong quá trình tìm hiểu và thực hiện đề tài “Xây dựng từ điển multimedia dùng công nghệ Ajax trên nền PHP”. Cuối cùng, con cảm ơn Ba, Mẹ và những người thân đã khích lệ, động viên con trong thời gian học tập, nghiên cứu để có được kết quả như ngày nay. Tháng 1 năm 2009 Sinh viên Lê Thanh Nhàn 6 LỜI NÓI ĐẦU Trong thời đại ngày nay, chúng ta luôn hướng đến những gì đơn giản, gần gũi và tiện lợi trong mọi lĩnh vực. Công nghệ thông tin cũng không nằm ngoài mục tiêu này. Có điều đây là lĩnh vực có tốc độ thay đổi kinh ngạc, tính từng giây từng phút. Các công nghệ liên tục thay đổi và cũng liên tục ra đời các công nghệ mới thật phong phú, trợ giúp hữu ích cho các nhà quản trị và người sử dụng. Ajax có thể nói là một công nghệ khá mới, đặc biệt là ở Việt Nam nhưng nó được sử dụng ngày càng phổ biến vì khả năng tương tác cao, làm cho các ứng web gần với ứng dụng để bàn hơn. Ajax (Asynchronous JavaScript + XML) được tạo ra bởi Jesss James Garrett của Adaptive Path. Một số thành phần của Ajax đã được mô tả trước đây là Dynamic HTML và việc kịch bản hóa từ xa. Về mặt công nghệ, Ajax đưa ra các biểu thức cho các tiềm năng chưa thực hiện được trong các công nghệ trình duyệt web trước đây. Google và một số tổ chức chính khác đã sử dụng Ajax để xây dựng những gì có tính chất cộng đồng được mong đợi giống như những gì mà một ứng dụng web có thể thực hiện. Một số lượng lớn các kỹ thuật được sắp xếp để lấp đầy những thiếu sót với sự phong phú hơn, thông minh hơn hoặc về mặt cải tiến các client. Ajax cho phép thực hiện điều này tốt hơn, thông minh hơn mà chỉ sử dụng các kỹ thuật đã được cài đặt trên số lượng lớn các máy tính hiện đại. Một đặc điểm nữa cho thấy Ajax ngày càng được ứng dụng rộng rãi là nó độc lập với hệ điều hành (không phụ thuộc nền), xứ lý dữ liệu XML, sử dụng các JavaScript. Tóm lại, đây là một công nghệ thể hiện tính đáp ứng nhanh cao, thích hợp cho việc xây dựng các ứng dụng đòi hỏi tính tức thời trên môi trường web. Từ điển media trực tuyến là một ứng dụng điển hình. Và cũng là mục tiêu chính đồ án tốt nghiệp của em. 7 MỤC LỤC Phần 1: TÌM HIỂU VẤN ĐỀ Chương 1: TỔNG QUAN……………………………………………………….1 1. Tiền đề xuất hiện công nghệ Ajax…………………………………………1 1.1. Nguyên nhân xuất hiện công nghệ Ajax……………………………...1 1.2. Công nghê web thể hệ thứ hai – Web 2.0…………………………….4 1.3. Các thế mạnh của Ajax……………………………………………….9 2. Nhiệm vụ đồ án…………………………….……………………..……...12 Chương 2: MÔ HÌNH MVC…………………….…………………………….14 1. Giới thiệu mô hình MVC………………………………………………...14 2. View trong ứng dụng Ajax……………………………………….……....15 3. Controller trong ứng dụng Ajax………………………………….……....17 4. Model trong ứng dụng Ajax……………………………………….……..19 5. Ví dụ về mô hình MVC trên nền PHP…………………………….……..22 6. Mô hình MVC cho ứng dụng từ điển……………….……….…….……..30 Chương 3: CÁC CÔNG NGHỆ TRONG AJAX………………….…….……32 1. Cascading Style Sheet……………………….…………….….………….32 2. JavaScript………………………………………………………..……….35 3. DOM……………………………………………………………..………39 4. Đối tượng XMLHttpRequest……………………………….….………...43 4.1. Giới thiệu…………………………………………………..………..43 4.2. Phương thức, thuộc tính………………………………….…………45 4.3. Sự tương tác……………………………………………….………..46 4.4. Get và Post…………………………………………….……………49 4.5. Gởi Request…………………………………………….…………..50 5. Streaming…………………………………………………....………….53 5.1. Giới thiệu……………………………………………...…………...53 5.2. Các phương thức streaming……………………….……………….54 8 Phần 2: THIẾT KẾ VÀ CÀI ĐẶT Chương 4: THIẾT KẾ………………………………………………………56 1. Sơ đồ ứng dụng……………………………………………….……….56 2. Cơ sở dữ liệu………………………………………………….……….56 3. Cài đặt server………………………………………………………….57 Chương 5: CÁC MODULE, LỚP CHÍNH CỦA ỨNG DỤNG…….…….60 1. Hệ thống tập tin………………………………………….……………60 2. Các module của ứng dụng………………………………….…………60 3. Các lớp đối tượng chính trong từng module…………….……………60 Phần 3: KẾT QUẢ, ĐÁNH GIÁ VÀ HƯỚNG PHÁT TRIỂN 1. Kết quả thử nghiệm…………………………………….……….…….61 2. Hoạt động của ứng dụng………………………………..…………….61 3. Kết luận………………………………………………….…….….…..69 4. Hướng phát triển……………………………………….……..………70 9 Phần 1: TÌM HIỂU VẤN ĐỀ CHƯƠNG 1: TỔNG QUAN 1. TIỀN ĐỀ XUẤT HIỆN CÔNG NGHỆ AJAX 1.1. NGUYÊN NHÂN XUẤT HIỆN CÔNG NGHỆ AJAX Trước khi tìm hiểu về Ajax, ta cần xem xét quá trình phát triển các công nghệ web, nguyên nhân và hoàn cảnh xuất hiện công nghệ Ajax. Lúc đầu, các trang web là tĩnh, người dùng gửi yêu cầu một tài nguyên nào đó, và server sẽ trả về tài nguyên đó. Các trang Web không có gì hơn là một văn bản được định dạng và phân tán. Đối với các trình duyệt thì các trang web tĩnh không phải là các vấn đề khó khăn, và trang web lúc đầu chỉ để thông tin về các sự kiện, địa chỉ, hay lịch làm việc qua Internet mà thôi, chưa có sự tương tác qua các trang web. Năm 1990, Tim Berners-Lee, tại CERN, đã sáng chế ra HTML (Hyper Text Markup Language), ngôn ngữ đánh dấu siêu văn bản. HTML rất đơn giản, dễ dùng, và nó trở thành một ngôn ngữ rất phổ biến, cơ bản. Tuy nhiên, không lâu sau, nhu cầu về các trang web động, có sự tương tác ngày một tăng, chính vì thế sự ra đời các công nghệ web động là một điều tất yếu. Dưới đây là một số công nghệ web động cơ bản: JAVASCRIPT Netscape đã tạo ra một ngôn ngữ kịch bản gọi là JavaScript. JavaScript được thiết kế để việc phát triển dễ dàng hơn cho các nhà thiết kế web và các lập trình viên không thành thạo Java. (Microsoft cũng có một ngôn ngữ kịch bản gọi là VBScript). JavaScript ngay lập tức trở thành một phương pháp hiệu quả để tạo ra các trang web động. Việc coi các trang như là một đối tượng đã làm nảy sinh một khái niệm mới gọi là Document Object Model (DOM). Lúc đầu, JavaScript và DOM có một sự kết hợp chặt chẽ nhưng sau đó chúng được phân tách. DOM hoàn toàn là cách biểu diễn hướng đối tượng của trang web và nó có thể được sửa đổi với các ngôn ngữ kịch bản bất kỳ như JavaScript hay VBScript. 10 Tổ chức World Wide Web Consortium (W3C) đã chuẩn hóa DOM, trong khi European Computer Manufacturers Association (ECMA) phê duyệt JavaScript dưới dạng đặc tả ECMAScript. JSP/SERVLET, ASP VÀ PHP Cùng với Java, Sun đồng thời đưa ra một công nghệ mới gọi là Servlet. Các đoạn mã Java sẽ không chạy phía client như Applet; chúng sẽ được chạy trên một ứng dụng phía server. Servlet cũng đồng thời phục vụ các CGI script. Servlet là một bước tiến lớn, nó đưa ra một thư viện hàm API trên Java và một thư viện hoàn chỉnh để thao tác trên giao thức HTTP. JavaServer Page (JSP) là một công nghệ lập trình web của Sun, cùng với nó là một công nghệ khác của Microsoft - Active Server Pages (ASP). JSP là công nghệ đòi hỏi một trình chủ hiểu được Java. Microsoft đã nghiên cứu các nhược điểm của Servlet và tạo ra ASP dễ dàng hơn để thiết kế các trang web động. Microsoft thêm các bộ công cụ rất mạnh và sự tích hợp rất hoàn hảo với các web server. JSP và ASP có những nét tương đương vì chúng đều được thiết kế để phân tách quá trình xử lí khỏi quá trình biểu diễn. Có sự khác biệt về kỹ thuật, song cả hai đều cho phép các nhà thiết kế web tập trung vào cách bố trí (layout), trong khi các nhà phát triển phần mềm thì tập trung vào các kỹ thuật lập trình logic. Tất nhiên Microsoft và Sun không độc quyền ở các giải pháp phía server. Còn có các công nghệ khác, trong đó phải kể đến là PHP (Hypertext Preprocessor) cho tới Cold Fusion. Các công nghệ này cung cấp các bộ công cụ rất mạnh cho các nhà phát triển. PHP là gì PHP (viết tắt của Hypertext Preprocessor) là ngôn ngữ lập trình được kết nối chặc chẽ với máy chủ. Nói một cách đơn giản không theo thuật ngữ khoa học thì là một quá trình xử lý PHP được thực hiện trên máy chủ (Windows hoặc Unix). Khi một trang web muốn dùng PHP thì phải đáp ứng được tất cả các quá trình xử lý thông tin trong trang web đó, sau đó đưa ra kết quả như ngôn ngữ HTML. Vì quá trình xử lý này diễn 11 ra trên máy chủ nên trang web được viết bằng PHP sẽ dễ nhìn hơn ở bất kỳ hệ điều hành nào. Cũng giống hầu hết các ngôn ngữ lập trình khác, PHP có thể nối trực tiếp với HTML. Mã PHP tách biệt với HTML bằng các thực thể đầu và cuối. Khi một tài liệu được đưa ra phân tích, quá trình xử lý PHP chỉ được thực hiện ở những điểm quan trọng, rồi sau đó đưa ra kết quả. Nhưng bên cạnh đó, PHP cũng có khả năng tách biệt mã hoàn tòan với HTML. Nói rộng ra, việc đưa ra sự kết hợp này rất chi là lý tưởng, bởi vì nó cho phép các nhà thiết kết có thể làm việc trên trang web đã được bố trí theo kế hoạch mà không bị cản trở bởi các mã. Vì sao nên dùng PHP Không còn xa lạ gì khi có rất nhiều sự lựa chọn các ngôn ngữ lập trình khác ngoài PHP như ASP, Perl…và một số loại khác. Trong mỗi ngôn ngữ lập trình này đều có cấu hình và chức năng khác nhau nhưng chúng vẫn có thể đưa ra một kết quả giống nhau. Tại sao PHP lại là ưu tiên hàng đầu của bạn? Rất đơn giản, đối với những người còn xa lạ với chương trình, đây là sự lôi cuốn mạnh mẽ nhất. Thậm chí là rất ít hoặc không có một chương trình nào có thể tạo ra tốc độ đáng kinh ngạc trong việc phát triển web như PHP. Bởi vì nó được thiết kế đặc biệt trong các ứng dụng web. PHP xây dựng được rất nhiều tính năng để đáp ứng những nhu cầu chung nhất. PHP là một mã nguồn thông tin mở. Bởi vì mã nguồn của PHP sẵn có nên cộng đồng các nhà phát triển web luôn có ý thức cải tiến nó, nâng cao để khắc phục các lỗi trong chương trình này. PHP rất ổn định và tương hợp. PHP vận hành khá ổn định trên các hệ điều hành gồm cả Unix, Windows. Đồng thời nó chạy trên các máy chủ như IIS và Apache rất tốt. 12 Xét một cách toàn diện thì PHP là một ngôn ngữ rất dễ học. Nếu ta đã biết qua các ngôn ngữ như C hay Pascal thì việc học PHP sẽ rất mau, bởi nó có những nét tương đồng nhau. FLASH Năm 1996, FutureWave đã đưa ra sản phẩm FutureSplash Animator. Sau đó FutureWave thuộc sở hữu của Macromedia, và công ty này đưa ra sản phẩm Flash. Flash cho phép các nhà thiết kế tạo các ứng dụng hoạt họa và linh động. Flash không đòi hỏi các kỹ năng lập trình cao cấp và rất dễ học. Cũng giống như nhiều giải pháp khác Flash yêu cầu phần mềm phía client. Chẳng hạn như gói Shockwave Player plug- in có thể được tích hợp trong một số hệ điều hành hay trình duyệt. DHTML Khi Microsoft và Netscape đưa ra các phiên bản trình duyệt của họ, thì các nhà phát triển web có một lựa chọn mới: Dynamic HTML (DHTML). DHTML không phải là một chuẩn của W3C, nó giống một bộ công cụ thương mại hơn. Trong thực tế nó là một tập hợp gồm HTML, Cascading Style Sheets (CSS), Jav