Xây dựng từ điển multimedia dùng công nghệ ajax trên nền php

troller = 'index'; } /*** Get action ***/ if (empty($this->action)) { $this->action = 'index'; } /*** set the file path ***/ $this->file = $this->path .'/'. $this->controller . '.php'; } ?> Controller Thêm code sau vào controller.class.php: <?php Abstract Class baseController { /* @registry object */ protected $registry; function __construct($registry) { $this->registry = $registry; } /* @all controllers must contain an index method */ abstract function index(); } class indexController extends baseController { public function index() { /*** set a template variable ***/ $this->registry->template->welcome = 'Welcome to PHPRO MVC'; /*** load the index template ***/ $this->registry->template->show('index'); } } Class blogController Extends baseController { public function index() { $this->registry->template-blog_heading = 'This is the blog Index'; $this->registry->template->show('blog_index'); 36 } public function view(){ /*** should not have to call this here.... FIX ME ***/ $this->registry->template->blog_heading = 'This is the blog heading'; $this->registry->template->blog_content = 'This is the blog content'; $this->registry->template->show('blog_view'); } } ?> View Phần này hiển thị template. Code sau trong file template.class.php: <?php Class Template { /* @the registry * @access private */ private $registry; /* @Variables array * @access private */ private $vars = array(); /* @constructor * @access public * @return void */ function __construct($registry) { $this->registry = $registry; } /* @set undefined vars * @param string $index * @param mixed $value * @return void */ public function __set($index, $value) { $this->vars[$index] = $value; } function show($name) { $path = __SITE_PATH . '/views' . '/' . $name . '.php'; 37 if (file_exists($path) == false) { throw new Exception('Template not found in '. $path); return false; } // Load variables foreach ($this->vars as $key => $value) { $$key = $value; } include ($path); } } ?> Template Template bản thân nó các file HTML với một số PHP được nhúng vào. Đây là file index.php: blog_index.php: blog_view.php: 38 6. MÔ HÌNH MVC CHO ỨNG DỤNG TỪ ĐIỂN View Controller Model TreeNodes, Connnections... Hình 2.3 – Mô hình MVC cho các chức năng bên trong của một cây widget onMouseMove(){ } onClick(){ Controller code Model JavaScript Objects View Hình 2.4 – Mô hình MVC cho } ứng dụng Ajax client 39 Controller trong mô hình này là code liên kết giao diện với các đối tượng dịch vụ trong JavaScript. Browser View onMouseMove(){ } onClick(){ } Controller code Model JavaScript Objects Controller PHP Controller Server Smarty View Model Hình 2.5 – Ki ến trúc MVC lồng 40 CHƯƠNG 3: CÁC CÔNG NGHỆ TRONG AJAX 1. CASCADING STYLE SHEET 1.1. GIỚI THIỆU AJAX là một tập hợp các công nghệ bổ sung lẫn nhau. JavaScript có vai trò là chất kết dính các ứng dụng lại với nhau. Giao diện người dùng được tạo và tái nạp bằng cách dùng JavaScript để điều khiển Document Object Model, đồng thời xử lí các tương tác trên chuột và bàn phím. Cascading Style Sheets (CSS) cung cấp một sự nhất quán trên cảm quan “look and feel” cho ứng dụng và khả năng thao tác mạnh mẽ với DOM. Đối tượng XMLHttpRequest (hay một cơ chế tương đương nào đó) được dùng để liên lạc một cách bất đồng bộ với server, đảm bảo việc gửi yêu cầu người dùng và tái nạp dữ liệu trong khi người dùng vẫn làm việc. Cascading Style Sheet – tạm dịch là bảng kiểu xếp chồng - là một phần không thể thiếu trong thiết kế Web. Nó được dùng rất nhiều trong các ứng dụng web truyền thống cũng như trong Ajax. Một stylesheet đưa ra cách kiểm soát các loại định dạng trực quan. Nó có thể được áp dụng cho các thành phần riêng lẻ trên các trang. Hơn nữa, cho các thành phần định dạng trực quan như màu sắc, lề, hình nền, tính trong suốt, kích cỡ. Stylesheet có thể xác định cách mà các phần tử được bố trí quan hệ với các phần tử khác và tương tác với người dùng, cho phép các hiệu ứng khá mạnh mẽ. Trong ứng dụng web truyền thống, stylesheet cung cấp một cách hiệu quả để xác định cách thể hiện vị trí và có thể được dùng lại trong nhiều trang web khác nữa.Với AJAX, stylesheet cung cấp một “kho chứa” các giao diện xác định trước, có thể áp dụng cho các phần tử động với độ dài các đoạn mã nguồn là nhỏ nhất. CSS định dạng một trang web theo ba cách: ƒ Sử dụng trực tiếp với các thẻ HTML (Inline Style Sheet). ƒ Định nghĩa trong một trang web (Internal Style Sheet). ƒ Định nghĩa thành một file CSS riêng (External Style Sheet), trang web của ta sẽ tham chiếu tới file CSS này. 41 Một quy tắc định dạng và bố trí gồm có hai phần: thành phần lựa chọn (selector) và phần khai báo (style declaration). Selector đặc tả các phần tử được định dạng và bố trí; style declaration khai báo các thuộc tính định dạng sẽ được áp dụng. Giả sử muốn tạo ra dòng text level-1 heading trong tài liệu (đó là đoạn nằm trong thẻ ) có màu đỏ, ta có thể khai báo các thuộc tính CSS như sau: h1 {color : #FF0000} ƯU ĐIỂM CỦA CSS CSS giúp tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế web: Style trong phiên bản HTML 4.0 qui định cách thức thể hiện các thẻ. Style thường được lưu trong các file nằm ngoài trang web. Chúng giúp thay đổi cách thức định dạng và cách bố trí các trang web chỉ bằng cách thay đổi riêng file CSS. CSS cho phép điều khiển cách định dạng và cách bố trí của cùng lúc nhiều trang web với chỉ duy nhất một lần thay đổi tại một vị trí. Có thể định nghĩa nhiều style vào một thẻ HTML: CSS cho phép đưa các thông tin định nghĩa thẻ thông qua nhiều con đường khác nhau. Style có thể được qui định chỉ trong một thẻ HTML, trong một trang web hoặc trong một file CSS bên ngoài. Thứ tự áp dụng các định dạng: Như trên đã nói, có thể sử dụng nhiều cách khác nhau để làm CSS. Điều gì sẽ xảy ra nếu áp dụng nhiều cách định dạng cho một thẻ HTML. Theo một cách chung nhất ra có thể nói các style sẽ được "xếp tầng" (cascade). Việc xếp tầng này tuân theo thứ tự ưu tiên giảm dần như sau: ƒ Inline Style (Style được qui định trong một thẻ HTML cụ thể). ƒ Internal Style(Style được qui định trong phần của trang HTML). ƒ External Style (style được qui định trong file CSS ngoài). ƒ Browser Default (thiết lập mặc định của trình duyệt). 1.2. CÚ PHÁP VÀ THUỘC TÍNH CÚ PHÁP CƠ BẢN CỦA CSS Cú pháp của CSS gồm ba phần: Thành phần lựa chọn (Selector), thuộc tính (Property), giá trị (Value). Thể hiện dưới dạng code như sau: 42 Selector { Property1: Value1; Property2: Value2; } Selector có thể là các thẻ/nhóm thẻ HTML, các lớp khai báo, hay bằng định danh duy nhất của phần tử. Khi chèn các đoạn mã CSS vào trang web, trình duyệt sẽ hiển thị trang web theo cách CSS đã qui định cho nó, có ba cách để chèn CSS vào trang web. ƒ Inline Style: Đây là phương pháp kém hiệu quả nhất, không nên sử dụng phương pháp này vì làm mất các ưu điểm của CSS. Ví dụ: <span style=”font-family : Arial; font-size : 12px; color : #FF0000”> Hello Ajax ƒ Internal Style: Trong trường hợp mỗi trang web sử dụng các định dạng khác nhau, dùng Internal Style Sheet. Để định nghĩa Internal Style Sheet, sử dụng thẻ đặt bên trong thẻ . Ví dụ: body {background-image:url(“images/button.gif”)} ƒ External Style: Mỗi trang web sử dụng file CSS ngoài này đều phải sử dụng thẻ . Thẻ được đặt bên trong thẻ . Ví dụ: THUỘC TÍNH CỦA CSS Mỗi phần tử trong trang HTML có thể được qui định theo nhiều kiểu. Phần text của một phần tử có thể được quy định theo các thuộc tính color, font size, độ đậm của font, và kiểu chữ sử dụng. Có rất nhiều tùy chọn được áp dụng cho thuộc tính trên. 43 Ví dụ: Để qui định cho một paragraph arial12 { font-family : Arial; font-size : 12px; color : #FF0000; font-weight : bold; } 2. JAVASCRIPT JavaScript là một ngôn ngữ lập trình đa năng, nó tương đối giống C. JavaScript được biết dưới dạng một ngôn ngữ có kiểu tự do, thông dịch, ngôn ngữ kịch bản đa năng. Kiểu tự do nghĩa là các biến không được khai báo cụ thể như string, integer, hay object, các biến giống nhau có thể được gán bởi các kiểu khác nhau. Ví dụ, đoạn mã sau là hợp lệ: var x=3.1415926; x='pi'; Biến x lúc đầu được định nghĩa là giá trị số và sau đó được gán lại bởi giá trị xâu kí tự. Thông dịch nghĩa là các mã nguồn không được biên dịch thành các đoạn mã nhị phân có thể thực thi được, mà nó được thực thi trực tiếp, cụ thể là qua các trình duyệt. Khi triển khai một ứng dụng JavaScript, ta đặt mã nguồn trên web server, và mã nguồn này được truyền trực tiếp qua Internet tới web browser. Đa năng nghĩa là ngôn ngữ này thích hợp để lập trình theo hầu hết các thuật toán và các tác vụ. JavaScript cơ bản hỗ trợ các kiểu number, string, date, time, array, các biểu thức toán học được xử lí trong văn bản, và các hàm toán học như các hàm lượng giác, bộ tạo số ngẫu nhiên. Hoàn toàn có thể định nghĩa cấu trúc một đối tượng bằng JavaScript, điều này mang đến nguyên lý cơ bản cho lập trình để viết những đoạn mã phức tạp. Trong môi trường trình duyệt web, các chức năng cơ bản của trình duyệt gồm CSS, DOM, và các đối tượng XMLHttpRequest, được coi là các phương tiện của JavaScript, cho phép các nhà phát triển điều khiển các trang ở các mức độ khác nhau. Trong các công nghệ của Ajax, JavaScript là chất kết dính các thành phần lại với nhau. 44 2.1. BIẾN Trước khi sử dụng biến trong JavaScript, ta không nhất thiết phải khai báo biến. Có hai cách để định nghĩa biến trong JavaScript. Một là sử dụng cú pháp var để khai báo biến: var tên_biến; Ngoài ra, ta có thể chỉ việc gán cho biến một giá trị để sử dụng biến đó. Biến được định nghĩa ngoài tất cả các hàm hoặc được sử dụng mà không khai báo với cú pháp var sẽ được coi là biến toàn cục, những biến này có thể sử dụng trên toàn trang web. Biến được khai báo với var bên trong một hàm là biến cục bộ của hàm đó và chỉ có thể sử dụng được bên trong hàm đó. 2.2. ĐỐI TƯỢNG Kiểu của JavaScript được chia ra làm hai loại: kiểu cơ bản và đối tượng. Đối tượng trong JavaScript là một thực thể có tên xác định và có thuộc tính trỏ tới giá trị, hàm hoặc cũng có thể là một đối tượng khác. Có nghĩa là đối tượng trong JavaScript là một mảng kết hợp tương tự như mảng trong PHP. JavaScript có một số đối tượng định nghĩa sẵn, bao gồm: mảng (array), đại số Bool (Boolean), ngày tháng (Date), hàm (Function), toán học (Math), số (Number), đối tượng (Object), biểu thức tìm kiếm (RegExp), và chuỗi (String). Bằng cách định nghĩa hàm khởi tạo, ta có thể tạo đối tượng. JavaScript là một ngôn ngữ lập trình dựa trên nguyên mẫu, do đó thừa kế diễn ra giữa các đối tượng, không phải giữa các lớp. Đối tượng thừa kế thuộc tính từ các nguyên mẫu của chúng. Ta có thể thêm, xóa thuộc tính hoặc hàm trong đối tượng sau khi đối tượng đã được tạo. Để làm việc này cho tất cả các đối tượng được tạo từ cùng một hàm khởi tạo, ta có thể sử dụng thuộc tính prototype của hàm khởi tạo để truy cập đối tượng nguyên mẫu. Ta không nhất thiết phải tự xóa các đối tượng đã tạo, JavaScript tự động gom rác tất cả những biến không còn được dùng nữa. 45 2.3. CẤU TRÚC DỮ LIỆU Một cấu trúc dữ liệu tiêu điểm là mảng (Array). Mảng trong JavaScript là một bảng liên kết chỉ mục đến giá trị. Trong JavaScript, tất cả các đối tượng đều có thể liên kết chỉ mục đến giá trị, nhưng mảng là một đối tượng đặc biệt có thêm nhiều tính năng xử lý chỉ mục và dữ liệu đặc biệt (Ví dụ: push, join,...) Mảng trong JavaScript có thuộc tính length. Thuộc tính length của JavaScript luôn luôn lớn hơn số chỉ mục lớn nhất trong mảng một đơn vị. Trong phần lớn ngôn ngữ lập trình, những thuộc tính có tính năng như length thường là thuộc tính chỉ đọc. Tuy nhiên, với JavaScript, ta có thể thay đổi thuộc tính length. Bằng cách thay đổi thuộc tính length, làm mảng lớn hơn hoặc nhỏ hơn (và xóa đi những chỉ mục lớn hơn hoặc bằng thuộc tính length mới). Mảng trong JavaScript là mảng rải rác, có nghĩa là cho dù ta có một mảng như sau: var test = new Array(); test[2] = 1; test[100] = 3; Trong trường hợp này, dù mảng có đến chỉ mục mang số 100 thì mảng cũng chỉ chiếm bộ nhớ của hai số 1 và 3. Tuy nhiên, thuộc tính length sẽ có giá trị 101 do chỉ mục lớn nhất của mảng trong ví dụ trên là 100. 2.4. CẤU TRÚC ĐIỀU KHIỂN RẼ NHÁNH ĐIỀU KIỆN IF...ELSE Cú pháp if...else dùng trong trường hợp muốn rẽ nhánh theo điều kiện và có thể lồng vào nhau. TOÁN TỬ ĐIỀU KIỆN Toán từ điều kiện còn được gọi là toán tử tam phân. Cú pháp: điều_kiện ? biểu_thức_đúng : biểu_thức_sai; 46 Toán tử này sẽ trả lại giá trị là kết quả của biểu_thức_đúng nếu điều_kiện có giá trị bool bằng true, ngược lại nó sẽ trả lại giá trị bằng biểu_thức_sai. VÒNG LẶP WHILE Vòng lặp while có tác dụng lặp đi lặp lại một khối lệnh nhất định cho đến khi biểu thức điều kiện trả về false. Khi dùng vòng lặp while phải chú ý tạo lối thoát cho vòng lặp (làm cho biểu thức điều kiện có giá trị false), nếu không đoạn mã nguồn sẽ rơi vào vòng lặp vô hạn. While thường được dùng khi không biết chính xác cần lặp bao nhiêu lần. VÒNG LẶP DO...WHILE Cơ bản, vòng lặp do ... while gần như giống hệt như vòng lặp while. Tuy nhiên, trong trường hợp biểu thức điều kiện trả về false ngay từ đầu, khối lệnh trong vòng lặp while sẽ không bao giờ được thực hiện. Trong khi đó, vòng lặp do ... while luôn đảm bảo khối lệnh trong vòng lặp được thực hiện ít nhất một lần. VÒNG LẶP FOR Vòng lặp for thường được sử dụng khi cần lặp một khối lệnh mà ta biết trước sẽ cần lặp bao nhiêu lần. VÒNG LẶP FOR...IN Vòng lặp for ... in dùng để lặp qua tất cả các thuộc tính của một đối tượng (hay lặp qua tất cả các phần tử của một mảng). CÚ PHÁP SWITCH Cú pháp switch cũng là cú pháp điều kiện như if ... else hay toán tử tam phân. Tuy nhiên, cú pháp switch thường được dùng khi cần so sánh bằng với số lượng kết quả cần kiểm tra lớn. 47 HÀM Hàm là một khối các câu lệnh với danh sách một hoặc nhiều đối số (có thể không có đối số) và thường có tên (mặc dù trong JavaScript hàm không nhất thiết phải có tên). Hàm có thể trả lại một giá trị. 3. DOM 3.1. GIỚI THIỆU Document Object Model (DOM) giúp phân tích một tài liệu (một trang web chẳng hạn) phục vụ cho cơ chế của JavaScript. Sử dụng DOM, cấu trúc của tài liệu có thể được phân rã theo cấu trúc cây và thao tác theo các node. Đây là một khả năng đặc biệt hữu ích để viết một ứng dụng Ajax. Trong các ứng dụng web truyền thống, trình duyệt phải nạp các trang HTML theo một luồng từ server. Trong một ứng dụng AJAX, sự thay đổi giao diện người dùng chủ yếu được tạo ra bởi DOM. Các thẻ HTML trong trang web được tổ chức theo cấu trúc cây. Gốc của cây là thẻ , để biểu diễn tài liệu. Trong đó thẻ biểu diễn phần thân của tài liệu, là gốc của phần hiển thị của tài liệu. Trong thân của tài liệu, có các table, paragraph, list và các loại thẻ khác với các thẻ ở mức thấp hơn nữa. Một biểu diễn theo mô hình DOM của một trang web là một cấu trúc cây, có các phần tử là các node, rồi nó chứa các node con trong nó, và cứ tiếp tục một cách đệ qui như vậy. JavaScript làm việc với node gốc của trang web hiện thời qua một biến toàn cục gọi là document. Biến này là điểm bắt đầu của mọi thao tác trên DOM. Phần tử DOM đã được đặc tả bởi W3C. Mỗi phần tử DOM có một phần tử cha duy nhất, có hoặc không có các phần tử con, và có một số bất kỳ các thuộc tính, chúng được lưu trữ trong mảng móc nối. 3.2. LÀM VIỆC VỚI DOM BẰNG JAVASCRIPT Trong một ứng dụng bất kỳ, nếu muốn thay đổi giao diện người dùng khi họ đang làm việc thì phải cung cấp các phản hồi lại khi người dùng gửi các yêu cầu. 48 Để hiểu rõ cơ chế làm việc với DOM bằng JavaScript, ta xét một ví dụ về một trang HTML đơn giản. Ví dụ: hello Ta đã thêm vào các tham chiếu đến các file hello.css (dùng Cascading Style Sheet) và một file chứa mã nguồn JavaScript là hello.js. Ở đây cũng đồng thời khai báo một thẻ với một ID. Còn đây là file hello.css chứa stylesheet để áp dụng cho các mục trong file HTML .declared{ color: red; font-family: Arial; font-weight: normal; font-size: 16px; } .programmed{ color: blue; font-family: helvetica; font-weight: bold; font-size: 10px; } Chúng ta định nghĩa hai style để mô tả gốc của các nút DOM (tên của các style là tùy chọn). Các style này không dược dùng trong file HTML, nhưng chúng sẽ được áp dụng qua file JavaScript. 49 window.onload=function() { var hello=document.getElementById('hello'); hello.className='declared'; var empty=document.getElementById('empty'); addNode(empty,"reader of"); addNode(empty,"Ajax in Action!"); var children=empty.childNodes; for (var i=0;i<children.length;i++) { children[i].className='programmed'; } empty.style.border='solid green 2px'; empty.style.width="200px"; } function addNode(el,text) { var childEl=document.createElement("div");//tạo một phần tử mới el.appendChild(childEl); var txtNode=document.createTextNode(text); //tạo một phần tử mới childEl.appendChild(txtNode); } Hàm window.onload() sẽ được gọi khi trang web được nạp. Tại thời điểm này, cấu trúc cây DOM sẽ được thiết lập. TÌM KIẾM NODE DOM Yêu cầu đầu tiên để làm việc trên DOM với JavaScript là đi tìm kiếm một phần tử để thay đổi. Trước hết cần bắt đầu tham chiếu qua node gốc (root node). Node này thể hiện qua biến toàn cục document. Mỗi node trong DOM là một node con (hoặc node con cấp hai, ba…) của document, nhưng cứ đi dần vào cây DOM, sẽ thấy một tài liệu phức tạp được biểu diễn bởi DOM, và việc tìm kiếm là rất khó khăn. Vì vậy có các cách sau để tìm kiếm một node nhanh chóng hơn. ƒ Mỗi phần tử HTML có một thuộc tính ID Ví dụ: hay 50 ƒ Mỗi một node DOM có thể có một ID gán cho nó, và ID này có thể được dùng để tham chiếu tới node qua hàm Ví dụ: var hello = document.getElementById(“hello”); ƒ Trong một số trường hợp, cần duyệt qua cấu trúc cây từng bước một, mỗi node DOM có một node cha và nhiều node con. Chúng có thể được truy cập bởi các thuộc tính parentNode và childNodes. Thuộc tính parentNode trả về một đối tượng DOM node khác, trong khi childNodes trả về một mảng javascript Ví dụ: var children = empty.childNodes; for(var i=0;i<children.length;i++) {...} ƒ Một cách khác để tìm kiếm là dựa trên loại thẻ HTML, dùng phương thức getElementsByTagName(). Ví dụ: document.getElementsByTagName("UL") sẽ trả về chuỗi tất cả các thẻ trong tài liệu. TẠO DOM NODE Trong nhiều trường hợp cần tạo các node mới và thêm nó vào tài liệu. JavaScript cung cấp một số phương thức để làm điều đó. Các phương thức chuẩn để tạo node mới là document.createElement() và document.createTextNode(). ƒ Phương thức createElement() có thể được dùng để tạo ra bất kỳ phần tử HTML nào, tham số là kiểu của loại thẻ HTML. var childEl=document.createElement("div"); ƒ createTextNode() tạo một node thể hiện qua một đoạn text, thường được tìm thấy trong các thẻ về heading, div, paragraph, và list item. var txtNode=document.createTextNode("some text"); Chuẩn DOM coi các text node tách rời khỏi biểu diễn HTML. Chúng không có các stye để áp đặt trực tiếp và vì thế chúng yêu cầu ít bộ nhớ hơn. Một node khi được tạo ra phải được gắn vào tài liệu trước khi hiển thị trên trình duyệt. Phương thức appendChild() được dùng để thực hiện điều này el.appendChild(childEl). 51 Ba phương thức createElement(), createTextNode(), và appendChild() cho phép thực hiện hầu hết các thao tác để thêm một node vào tài liệu. THÊM STYLE VÀO TÀI LIỆU DOM cũng cung cấp các phương thức để chỉnh sửa style của các phần tử và tạo định dạng lại cho cấu trúc đã được định nghĩa trong stylesheet. Mỗi phần tử trong trang web có thể có nhiều giao diện trực quan, có thể được áp đặt qua DOM, như vị trí, chiều dài và rộng, mằu sắc, canh lề và đường viền. Các trình duyệt ngày nay đều cung cấp các ràng buộc JavaScript cho phép thay đổi giao diện mức thấp và áp đặt các định dạng một cách nhất quán, dễ dàng với các lớp CSS. ƒ Thuộc tính className Ví dụ: Đoạn code sau sẽ áp đặt các quy tắc biểu diễn của lớp declared cho một node, với hello tham chiếu tới một node DOM hello.className = ‘declared’; ƒ Thuộc tính style Ví dụ: Đoạn mã sau bổ sung các thuộc tính style cho node empty empty.style.border = “2px #FF0000 solid”; empty.style.width = “200px”; SỬ DỤNG THUỘC TÍNH innerHTML Các phần tử DOM của các trình duyệt web đều hỗ trợ một thuộc tính gọi là innerHTML. Thuộc tính này cho phép các nội dung kiểu string tùy ý được gán cho các phần tử theo thuộc tính này. Ví dụ: function addListItemUsingInnerHTML (el, text) { el.innerHTML += “”+text+””; } 4. ĐỐI TƯỢNG XMLHTTPREQUEST 4.1. GIỚI THIỆU XMLHttpRequest được đưa ra ban đầu trong Internet Explorer 5 như một thành phần ActiveX. Nó chỉ hoạt động trong Internet Explorer. Điều này làm cho ít nhà phát triển 52 làm việc với XMLHttpRequest, cho tới khi nó trở thành một chuẩn chính thức trong Mozilla 1.0 và Safari 1.2. Một điều rất quan trọng cần chú ý là XMLHttpRequest không là chuẩn của W3C, mặc dù rất nhiều chức năng của nó được đề xuất trong các đặc tả: DOM Level 3 Load and Save Specification. Vì XMLHttpRequest không phải là một chuẩn, nên có những sự khác biệt nhỏ trong các trình duyệt về hỗ trợ đối tượng này. Tuy nhiên hầu hết các phương thức và thuộc tính của nó đều được hỗ trợ. Hiện tại, Firefox, Safari, Opera, Konqueror, và Internet Explorer tất cả đều hỗ trợ XMLHttpRequest tương tự nhau. Nếu ta truy cập website với các trình duyệt phiên bản cũ thì phải cân nhắc về sự lựa chọn công nghệ sẽ ứng dụng. Trước tiên cần tạo một đối tượng XMLHttpRequest bằng JavaScript trước khi sử dụng đối tượng này để gửi request và xử lý các response. XMLHttpRequest chưa là chuẩn của W3C, vì thế phải dùng JavaScript theo nhiều cách để tạo một thể hiện của XMLHttpRequest. Internet Explorer thực thi XMLHttpRequest như một đối tượng ActiveX. Các trình duyệt khác như Firefox, Safari, và Opera thực thi nó như một đối tượng JavaScript nguyên thủy. Vì sự khác nhau này, đoạn mã JavaScript phải chứa các cấu trúc logic để tạo một thể hiện của XMLHttpRequest dùng kỹ thuật ActiveX hay đối tượng JavaScript nguyên thủy. Rất may mắn, trong trường hợp này không cần phải viết mã một cách tỉ mỉ để xác định kiểu trình duyệt và làm thế nào để tạo một thể hiện của đối tượng XMLHttpRequest. Công việc chỉ đơn giản là kiểm tra sự hỗ trợ đối tượng ActiveX của trình duyệt. Nếu hỗ trợ ActiveX, thì tạo một đối tượng XMLHttpRequest dùng ActiveX. Trường hợp khác, tạo đối tượng này bằng kỹ thuật tạo đối tượng JavaScript nguyên thủy. Đoạn mã JavaScript sau dễ dàng tạo ra các thể hiện của đối tượng XMLHttpRequest mà không quan tâm tới trình duyệt. Tạo một thể hiện của đối tượng XMLHttpRequest: var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 53 } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } Việc tạo một đối tượng XMLHttpRequest khá là đơn giản. Trước tiên, tạo một biến toàn cục (giả sử có tên là) xmlHttp để lưu trữ một tham chiếu đến đối tượng. Phương thức createXMLHttpRequest thực hiện việc tạo một thể hiện của XMLHttpRequest. Đoạn chương trình này chứa một câu lệnh rẽ nhánh đơn giản để xác định cách thức tạo một đối tượng. Lệnh gọi window.ActiveXObject sẽ trả về một biến kiểu object hay giá trị null, tương đương với điều kiện true hay false của câu lệnh if. Đây là dấu hiệu chỉ ra cho ta biết trình duyệt hỗ trợ ActiveX control, đó là Internet Explorer. Nếu vậy, XMLHttpRequest được tạo ra là một thể hiện của ActiveXObject, truyền một chỉ báo kiểu string để xác định loại đối tượng ActiveX cần tạo. Trong thể hiện này, ta cung cấp tham số Microsoft.XMLHTTP cho hàm tạo, để chỉ ra rằng cần tạo một thể hiện của XMLHttpRequest. Nếu lệnh gọi tới window.ActiveXObject không được thực thi (điều kiện false của lệnh if), lệnh JavaScript sẽ rẽ nhánh tương ứng với lệnh else, để xác định rằng trình duyệt thực thi XMLHttpRequest dưới dạng một đối tượng JavaScript nguyên thủy. Nếu window.XMLHttpRequest tồn tại, sau đó một thể hiện của XMLHttpRequest được tạo ra. Kiểu dữ liệu XMLHttpRequest của JavaScript tương thích với rất nhiều trình duyệt khác nhau, có thể truy cập các thuộc tính và phương thức của một thể hiện của XMLHttpRequest mà không cần quan tâm tới cách tạo các thể hiện này. Điều này làm cho việc phát triển các ứng dụng đơn giản hơn và làm cho JavaScript không phụ thuộc vào trình duyệt cụ thể. 4.2. PHƯƠNG THỨC, THUỘC TÍNH Sau đây là các phương thức điển hình của đối tượng XMLHttpRequest: 54 + void open(string method, string url, boolean asynch, string username, string password) + void send(content) + void setRequestHeader (string header, string value) + void abort() + string getAllResponseHeaders() + string getResponseHeader() Ngoài những phương thức chuẩn này, đối tượng XMLHttpRequest còn có các thuộc tính được liệt kê dưới đây. Ta sẽ phải sử dụng các thuộc tính mở rộng này khi làm việc với XMLHttpRequest. onreadystatechange Bộ xử lý sự kiện cho một sự kiện phát sinh mỗi khi có sự thay đổi trạng thái. readyState Trạng thái của request. Có 5 giá trị là 0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, và 4 = complete responseText Response trả về từ server dưới dạng string. responseXML Response trả về từ server dưới dạng XML. Đối tượng này có thể được phân tách và khảo sát như một đối tượng tài liệu DOM. status Mã trạng thái HTTP từ server (chẳng hạn 200 nếu không có lỗi, 404 cho lỗi Not Found, …). statusText Thông điệp của mã trạng thái HTTP (chẳng hạn OK hay Not Found, …). 4.3. SỰ TƯƠNG TÁC Ta xét một ví dụ để tìm hiểu các tương tác của Ajax. Hình sau cho thấy mô hình tương tác chuẩn trong một ứng dụng Ajax. 55 XHR Function callback(){ //do something } Event Server Resource Data Store 1 2 3 5 4 6 client Server Ajax-Enabled Web Application Hình 4.1 – Mô hình tương tác chuẩn Web Container Không giống như các cách tiếp cận kiểu request/response thông thường trong các chuẩn web client, một ứng dụng Ajax có những khác biệt. Sau đây là mô tả quá trình tương tác: 1. Một event client-side gây ra một sự kiện - Ajax event. Bất kỳ một tác động nào cũng có thể gây ra Ajax event, từ một sự kiện onchange đơn giản cho đến một số tác động của người dùng. Ví dụ: <input type="text" id="email" name="email" onblur = "validateEmail()";> 2. Một thể hiện của XMLHttpRequest được tạo ra. Dùng phương thức open(), tạo lời gọi hàm - địa chỉ URL được thiết lập cùng với phương thức HTTP yêu cầu, thông thường là GET hay POST. Request được tạo ra qua việc gọi phương thức send(). Ví dụ: var xmlHttp; function validateEmail() { var email = document.getElementById("email"); var url = "validate?email=" + escape(email.value); if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { 56 xmlHttp = new XMLHttpRequest(); } xmlHttp.open("GET", url); xmlHttp.onreadystatechange = callback; xmlHttp.send(null); } 3. Một request được tạo và gửi đến server. Có thể là một lời gọi tới một servlet, một CGI script, hay một công nghệ phía server nào đó tương tự như ASP.NET, JSP, hay PHP… 4. Server xử lí các yêu cầu, chẳng hạn như truy cập cơ sở dữ liệu hay một tác vụ hệ thống nào đấy. 5. Response được trả về cho trình duyệt. Trường Content-Type được thiết lập ở dạng text/xml; XMLHttpRequest chỉ có thể xử lí kết quả dạng text/html. Trong các thể hiện phức tạp hơn, response khá rắc rối, bao gồm JavaScript, các thao tác trên đối tượng DOM, hoặc các công nghệ liên quan khác. Chú ý là cũng cần thiết lập header, vì trình duyệt sẽ không lưu kết quả một cách cục bộ. Ví dụ: response.setHeader("Cache-Control","no-cache"); response.setHeader("Pragma", "no-cache"); 6. Trong ví dụ sau, cấu hình XMLHttpRequest để gọi hàm callback() khi kết quả xử lí được trả về. Hàm này kiểm tra thuộc tính readyState trên đối tượng XMLHttpRequest và sau đó xem xét mã trạng thái trả về từ server. Mọi thứ hoàn toàn bình thường. Hàm callback() có thể làm nhiều việc trên phía client. Một phương thức callback thường có dạng sau: function callback() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { //do something interesting here } } } 57 Có một số khác biệt với mô hình request/response thông thường nhưng không quá lạ lẫm đối với các lập trình viên web. Rõ ràng, phải xem xét thêm về việc tạo và thiết lập một đối tượng XMLHttpRequest và sau đó (hàm) callback sẽ kiểm tra các trạng thái. Thường thì các lời gọi chuẩn này được đóng gói vào một thư viện để dùng trong ứng dụng, hay nói cách khác là dùng một thư viện có sẵn để thực thi Ajax cho ứng dụng web (có rất nhiều thư viện như thế, ta sẽ xét trong các phần sau). Ajax là vấn đề tuy còn mới mẻ, nhưng đã có một lượng đáng kể các thư viện và ứng dụng mã nguồn mở được công bố. Hầu hết các framework và toolkit Ajax trên các trang web đều dùng các kĩ thuật cơ bản và trừu tượng hóa các trình duyệt, thêm vào một số thành phần giao diện người dùng (UI). Một số là các framework thuần client; còn lại làm việc trên server. Nhiều framework trong số này mới được bắt đầu xây dựng, nhưng chúng liên tục có các phiên bản và có thêm các thư viện mới. Một số giải pháp để thực thi Ajax là các thư viện Ajax.NET, Atlas, libXmlRequest, RSLite, sarissa, JavaScript Object Notation (JSON), JSRS, Direct Web Remoting (DWR), và Ruby on Rails… 4.4. GET VÀ POST Trên lý thuyết, sử dụng GET khi request không thay đổi giá trị, tức là nhiều request sẽ trả về cùng kết quả. Trong thực tế, nếu phương thức tương ứng ở server thay đổi trạng thái theo một vài cách thì điều này không còn đúng nữa. Điều này có nghĩa, nó là một chuẩn. Có rất nhiều sự khác biệt với chuẩn trong điều kiện kích thước của phần đệm (payload). Trong nhiều trường hợp, các trình duyệt và server sẽ giới hạn độ dài của địa chỉ URL sử dụng để gửi dữ liệu tới server. Tóm lại, dùng GET để truy lục dữ liệu từ server; hay nói cách khác tránh được việc thay đổi trạng thái trên với lời gọi GET. Phương thức POST được dùng khi muốn thay đổi trạng thái trên server. Không giống như GET, phải thiết lập phần Content-Type header trên đối tượng XMLHttpRequest như sau: xmlHttp.setRequestHeader("Content-Type","application/ x-www-form-urlencoded"); 58 POST không hạn chế kích thước của payload được gửi tới server, và POST request không cần bảo đảm tính không đối. Hầu hết các request được thiết lập ở GET request. Tuy nhiên trạng thái POST cũng luôn sẵn sàng khi cần thiết. 4.5. GỞI REQUEST Các bước cơ bản để gởi request dùng đối tượng XMLHttpRequest: 1. Dùng một tham chiếu tới một thể hiện của XMLHttpRequest, có thể bằng cách tạo mới hay truy cập vào một biến có thể hiện của XMLHttpRequest. 2. Khai báo cho đối tượng XMLHttpRequest về hàm sẽ xử lí các trạng thái của XMLHttpRequest. Ta hoàn thành việc này bằng cách thiết lập thuộc tính onreadystatechange của đối tượng với một con trỏ về một hàm JavaScript. 3. Gán các thuộc tính của request. Phương thức open() của đối tượng XMLHttpRequest được gán về request trạng thái đợi. Phương thức open() có ba tham số: một biến string chỉ báo (thường dùng GET hay POST), một biến string biểu diễn địa chỉ URL của tài nguyên, một biến boolean chỉ báo request sẽ là bất đồng bộ 4. Gửi request tới server. Phương thức send() sẽ truyền request để yêu cầu tài nguyên. Phương thức send() chấp nhận một tham số, thông thường là một biến kiểu string hay một đối tượng DOM. Tham số này được truyền tới địa chỉ URL đích như là một phần của request. Khi truyển tham số cho send(), phải đảm bảo rằng kiểu phương thức được gán trong open() là POST. Sử dụng null khi không có dữ liệu nào được gửi với request. Có thể diễn giải các bước trên như sau: cần một thể hiện của đối tượng XMLHttpRequest, chỉ ra xem nó cần làm gì khi thay đổi trạng thái, khi nào thì gửi các request và gửi như thế nào, cuối cùng là định hướng XMLHttpRequest để truyền request. Ta xét khái niệm con trỏ hàm, nó cũng gần giống con trỏ dữ liệu, ngoại trừ thay vì trỏ vào dữ liệu thì nó trỏ vào một hàm. Trong JavaScript, tất cả các hàm đều được định địa 59 chỉ trong bộ nhớ và có thể tham chiếu bằng tên hàm. Điều này cho ta một cách truyền tham số qua con trỏ hàm rất linh động và mềm dẻo hay lưu trữ một con trỏ hàm trong một thuộc tính của lớp. Đối với đối tượng XMLHttpRequest, thuộc tính onreadystatechange lưu trữ một con trỏ tới hàm callback(). Hàm callback() được gọi khi trạng thái nội tại của đối tượng XMLHttpRequest thay đổi. Khi một lời gọi bất đồng bộ được tạo ra, request được truyền đi, và script tiếp tục xử lí ngay lập tức – nó sẽ không đợi request được đáp ứng để tiếp tục. Mỗi lần request được gửi đi, thuộc tính readyState của đối tượng sẽ thay đổi. Ví dụ: Trong ví dụ này, có một trang HTML với một nút bấm. Khi nhấn vào nút bấm, sẽ khởi tạo một request bất đồng bộ gửi tới server. Server sẽ đáp ứng bằng cách gửi một file text đơn giản. Response được hiển thị nội dung trên một cửa sổ alert. simpleRequest.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> Simple XMLHttpRequest var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function startRequest() { createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", "simpleResponse.xml", true); 60 xmlHttp.send(null); } function handleStateChange() { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { alert("The server replied with:"+ xmlHttp.responseText); } } } <input type="button" value="Start Basic Asynchronous Request" onclick="startRequest();"/> File response của server (simpleResponse.xml) chứa một dòng text duy nhất. Khi nhấn vào nút bấm trên trang HTML sẽ trả về một hộp alert với nội dung của file simpleResponse.xml. Request tới server được gửi một cách bất đồng bộ, cho phép trình duyệt tiếp tục đáp ứng người dùng trong khi chờ đợi response của server phía background (còn được gọi là AjaxEngine). Nếu một thao tác bất đồng bộ được chọn và nếu response của server cần vài giây để trả về, trình duyệt sẽ không thể đáp ứng người dùng trong thời gian đợi. Sự bất đồng bộ có thể cải thiện tình trạng này bằng cách tránh hiển thị khi trình duyệt bị tê liệt và không thể đáp ứng người dùng. Điều này cho phép người dùng tiếp tục làm việc trong khi server tiếp tục làm việc với request trước trong background. Khả năng liên lạc với server; không có lỗi ngắt với luồng làm việc của người dùng đã mở ra rất nhiều kỹ thuật cải thiện cho phía người dùng. Một ứng dụng, chẳng hạn như chứng thực dữ liệu nhập từ người dùng. Khi một người dùng điền vào một trường dữ liệu trên form nhập, trình duyệt có thể định kỳ liên tục gửi các form giá trị tới server để kiểm chứng mà không cần ngắt quãng quá trình điền dữ liệu vào form nhập. Nếu nhập 61 dữ liệu không đúng, người dùng có thể ngay lập tức được thông báo, trước khi form thực sự được gửi đến server để xử lí. Điều này tiết kiệm được thời gian và giảm quá trình nạp dữ liệu trên server. Nội dung của form sẽ không được nạp lại sau một form đệ trình không thành công. VẤN ĐỀ BẢO MẬT Bất kỳ một công nghệ nào dựa trên nền tảng trình duyệt sẽ không trọn vẹn nếu bỏ qua vấn đề bảo mật. Đối tượng XMLHttpRequest được xử lí bảo mật theo mô hình “sandbox” của trình duyệt. Sức mạnh của phương pháp bảo mật giới hạn này tùy thuộc vào từng trình duyệt. Internet Explorer hiển thị một cảnh báo tình trạng một nguy cơ không an toàn có thể tồn tại và cho phép người dùng sự lựa chọn có tiếp tục với request đó nữa hay không. Trình duyệt Firefox sẽ dừng request lại và hiển thị thông điệp lỗi trên JavaScript. 5. STREAMING 5.1. GIỚI THIỆU Streaming thường được đề cập đến như một hệ thống phân phát nội dung media hay dữ liệu động, hỗ trợ cả broadcasts và multicasts (gởi một luồng dữ liệu tới nhiều người). Trình chơi nhạc xử lý dữ liệu khi nó nhận và sau đó loại bỏ. Nó bắt đầu quá trình trong khi dữ liệu được phân phát. Bất cứ lúc nào ta được cung cấp broadcasts hay video-on-demand (VOD) động được lưu trữ trên server, streaming cho phép broadcasts để chạy khi nó cần. Chức năng chính của streaming video là để duy trì thời gian thực phát lại ở các tốc độ kết nối khác nhau. Để làm được điều này, streaming media dựa vào các giao thức, server khác nhau cho việc phân phát các trang web chuẩn. Giao thức thời gian thực (Real-Time Protocol) và giao thức phân luồng thời gian thực (Real-Time Streaming Protocol) là các giao thức không kết nối, tốc độ cao hơn sự chính xác. Streaming server giảm bớt băng thông phía trên bằng cách broadcasts dữ liệu qua mạng mà không thẩm tra là nó thật sự được nhận chưa. 62 5.2. CÁC PHƯƠNG THỨC STREAMING DOWNLOADING Khi ta tải xuống một file, toàn bộ file được lưu trên máy (thường trong thư mục tạm) trước khi mở và xem. Điều này có một số lợi ích (chẳng hạn xử lý nhanh) nhưng bất lợi lớn là phải đợi toàn bộ file được tải xuống trước khi nó được xem. Nếu file nhỏ không đáng nói, nhưng với những file lớn sẽ rất khó chịu. Cách dễ nhất có thể download các file video là sử dụng một hyperlink tới file đó. Có một phương thức cải tiến nhỏ là nhúng (embed) file vô trang web sử dụng code HTML đặc biệt. Phân phát các file video theo cách này gọi là HTTP streaming hay HTTP delivery. HTTP (Hyper Text Transfer Protocol) là giao thức truyền các trang web. STREAMING Streaming media xử lý theo bit. Bằng cách này người sử dụng có thể xem file khi nó đang được tải xuống. Với khả năng này, file được gởi tới người sử dụng theo một luồng liên tục, và người sử dụng có thể xem khi nó đến. Lợi ích của phương thức này là không phải đợi lâu. Streaming media có một lợi ích nữa là có thể broadcast các sự kiện động. PROGRESSIVE DOWNLOADING Phương thức khác tương tự là progressive download. Trong phương thức này, video clip được tải xuống nhưng bắt đầu chơi chỉ một phần của file nhận được. Do đó, nếu người sử dụng muốn nhảy đến đoạn nào của clip thì phải download từ đoạn hiện tại tới tới đoạn cần đến. Lợi ích của phương thức này là chất lượng cao ở bất kỳ tốc độ kết nối nào. Do đó rất phổ biến trong công nghiệp giải trí. Phương thức này sử dụng hai giao thức khác nhau: HTTP (Hyper Text Transfer Protocol) và FTP (File Transmission Protocol). Hai giao thức này được phân phát thường sử dụng các Web Server. 63 SỰ KHÁC NHAU GIỮA PHƯƠNG THỨC DOWNLOAD VÀ PROGRESSIVE DOWNLOAD Lợi ích Progressive Download Download Real-Time broadcast x Độ dài clip x Truy xuất ngẫu nhiên lập tức tới các đoạn khác nhau của clip x Tải xuống toàn bộ clip x Tải xuống phần được yêu cầu của clip FLV được cache trên hệ thống cục bộ x Yêu cầu streaming server đặc trưng x Yêu cầu web server với PHP Có thể bị dừng lại bởi firewall x Phát lại chất lượng cao ở bất kỳ tốc độ kết nối nào x Phát lại các packet bị mất x CÁC NHU CẦU THƯỜNG SỬ DỤNG Nhu cầu Progressive Download Download Broadcasts động x WebTV x E-learning x Biểu diễn online rich media x Clip quảng cáo x Sản phẩm offline x Việc lựa chọn phương thức phụ thuộc vào tình hình cụ thể, thường thì ta chọn HTTP streaming (downloading và progressive download). Cách này dễ nhất và ít tốn kém nhất. Khi cần ta có thể nâng cấp streaming server sau. 64 Phần 2: THIẾT KẾ VÀ CÀI ĐẶT ¾ Ngôn ngữ lập trình: PHP, JavaScript, HTML, CSS ¾ Công cụ lập trình: DreamWaver 8 ¾ Web Server: Apache ¾ Hệ quản trị cơ sở dữ liệu: MySQL Chương 4: THIẾT KẾ 1. SƠ ĐỒ ỨNG DỤNG Từ điển Anh – Việt Từ điển Máy tính Từ điển Đồng nghĩa Admin Tìm trong CSDL đăng nhập thêm, sửa, xóa từ Kết quả nghĩa, hình, clip, phát âm Tìm với Google hình hay các website liên quan từ đó Kết quả Trang chủ 2. CƠ SỞ DỮ LIỆU Trong ứng dụng từ điển này, phần cơ sở dữ liệu không thực hiện theo chuẩn của các ứng dụng từ điển khác nên vấn đề khó khăn là ở chỗ dấu của từ. Theo framework của em, việc nhập trực tiếp từ có dấu vào MySQL thì ta sẽ khó tinh chỉnh hiển thị theo ý muốn. Vì vậy em đã chọn giải pháp là nhập từ từ form. Hạn chế: Nhập từ hơi lâu và không sử dụng được database cơ sở dữ liệu có sẵn trên mạng. 65 Cơ sở dữ liệu được tổ chức như sau: Tên cơ sở dữ liệu: multimedia_dictionary Dữ liệu có các bảng: wordlist_ev (từ điển Anh-Việt) wordlist_computer (từ điển máy tính) wordlist_synonym (từ điển đồng nghĩa) admin (quản trị) Mỗi bảng có cấu trúc như sau: wordlist Ý nghĩa id int(11) id của từ word varchar(50) Từ transcription varchar(50) Phiên âm meaning longtext Nghĩa của từ 3. CÀI ĐẶT SERVER XAMPP là một công cụ để cài đặt PHP, ApacheServer, MySQL, phpMyAdmin vào hệ thống một cách nhanh chóng và dễ dàng. Các bước thực hiện như sau: 1. Cài XAMPP trong C:\XAMPP\ 2. Chạy XAMPP Control Panel (trên desktop) 66 3. Trong XAMPP Control Panel, chạy Apache và MySQL * Nếu Apache hay MySQL không chạy, việc cài đặt của ta bị lỗi. Ta qua bước 4 để kiểm tra. * Nếu các dịch vụ đã chạy ta qua bước 5. 4. Kiểm tra xem các port được sử dụng bởi các ứng dụng khác chưa Chạy C:\XAMPP\xampp\ xampp-portcheck.exe để kiểm tra port nào được sử dụng bởi ứng dụng khác rồi. Nếu port được sử dụng: * Hoặc vô hiệu hay thay đổi các port của ứng dụng đó (ví dụ IIS Admin, Skype...) . Ở đây ta nên sử dụng các port mặc định cho ứng dụng XAMPP. * Hoặc thay đổi port của ứng dụng XAMPP. 5. Kiểm tra và cấu hình các dịch vụ Apache: Thư mục c:\XAMPP\xampp\htdocs\ chứa tất cả ứng dụng web. MySQL: Mặc định XAMPP cài đặt MySQL 5 nhưng cấu hình INNODB bị vô hiệu. Để kiểm tra ta gõ vào IE, nhấp Storage Engines, sau đó nhấp InnoDB ta sẽ thấy nó bị vô hiệu hóa. Để enable nó ta mở file C:\XAMPP\xampp\mysql\bin\my.cnf và thực hiện các thao tác sau: * Thêm dấu # vào dòng skip-innodb * Bỏ dấu # ở các dòng: innodb_data_home_dir = C:/XAMPP/xampp/mysql/data/ innodb_data_file_path = ibdata1:10M:autoextend 67 innodb_log_group_home_dir = C:/XAMPP/xampp/mysql/data/ innodb_log_arch_dir = C:/XAMPP/xampp/mysql/data/ set-variable = innodb_buffer_pool_size=16M set-variable = innodb_additional_mem_pool_size=2M set-variable = innodb_log_file_size=5M set-variable = innodb_log_buffer_size=8M innodb_flush_log_at_trx_commit=1 set-variable = innodb_lock_wait_timeout=50 68 Chương 5: CÁC MODULE, LỚP CHÍNH CỦA ỨNG DỤNG 1. HỆ THỐNG TẬP TIN Do hệ thống dùng ứng dụng XAMPP làm web server nên toàn bộ cơ sở dữ liệu về từ được lưu trong MySQL. Về phần tập tin hình ảnh hay clip được cập nhật trong framework. 2. CÁC MODULE CỦA ỨNG DỤNG Toàn bộ project gồm hai module chính: Tên module Ý nghĩa app Chứa dữ liệu, cấu hình, ngôn ngữ, template... cho toàn bộ ứng dụng. libs Chứa toàn bộ thư viện, hàm được định nghĩa trước cho việc gọi từ ứng dụng. admin quản lý file upload. 3. CÁC LỚP ĐỐI TƯỢNG CHÍNH TRONG TỪNG MODULE File Ý nghĩa app\config\ ConfigObject.php Khai báo các lớp chính của thư viện như: ConfigUser, ConfigDB, ConfigPath app\language\ Khai báo các từ mặc định được hiển thị trong template HTML app\library\db\Word.php Chứa các lớp cho việc tạo ra các đối tượng (như WordEV, WordUtilEV...) để truy xuất cơ sở dữ liệu trong MySQL app\module\ Chứa từng module nhỏ của ứng dụng như: admin, word_ev, word_ve, ... app\template\ Chứa toàn bộ template HTML và javascript 69 Phần 3: KẾT QUẢ, ĐÁNH GIÁ VÀ HƯỚNG PHÁT TRIỂN Qua quá trình thực hiện đồ án tốt nghiệp, em đã thu thập được rất nhiều kiến thức bổ ích về công nghệ Ajax trên nền PHP. Với quỹ thời gian có hạn, em đã xây dựng được một ứng dụng từ điển multimedia trên nền PHP với các chức năng khá đầy đủ. Các chức năng nâng cao phục vụ cho việc tra từ, cũng như cho việc quản trị nâng cấp chương trình đòi hỏi nhiều thời gian, kỹ thuật, em đang tìm hiểu và sẽ hoàn thành trong thời gian tới. Sau đây là những thành quả mà em đã học hỏi được trong quá trình thực hiện và những định hướng phát triển trong tương lai: 1. KẾT QUẢ THỬ NGHIỆM Ứng dụng Multimedia Dictionary thử nghiệm được cài đặt trên server có cấu hình máy P.4, CPU 2.4GHz, bộ nhớ RAM 256M, đĩa cứng 40GB. Dữ liệu demo khoảng 100MB. 2. HOẠT ĐỘNG CỦA ỨNG DỤNG Giao diện trang chủ ứng dụng 70 Giao diện từ điển Anh-Việt Mô tả: Vùng dữ liệu Mô tả Từ điển Anh-Việt từ điển Anh-Việt Từ điển máy tính từ điển máy tính Từ điển đồng nghĩa từ điển đồng nghĩa Tra từ vùng nhập từ cần tra Kết quả vùng hiển thị kết quả sau khi tra từ Kiểu tìm tìm từ vừa nhập thông qua google Phát âm nút phát âm từ đã tra Hình nút hiển thị hình minh họa của từ đã tra 71 Giao diện từ điển máy tính Mô tả: Vùng dữ liệu Mô tả Từ điển Anh-Việt từ điển Anh-Việt Từ điển máy tính từ điển máy tính Từ điển đồng nghĩa từ điển đồng nghĩa Tra từ vùng nhập từ cần tra Kết quả vùng hiển thị kết quả sau khi tra từ Kiểu tìm tìm từ vừa nhập thông qua google Phát âm nút phát âm từ đã tra Hình nút hiển thị hình minh họa của từ đã tra 72 Giao diện từ điển đồng nghĩa Mô tả: Vùng dữ liệu Mô tả Từ điển Anh-Việt từ điển Anh-Việt Từ điển máy tính từ điển máy tính Từ điển đồng nghĩa từ điển đồng nghĩa Tra từ vùng nhập từ cần tra Kết quả vùng hiển thị kết quả sau khi tra từ Kiểu tìm tìm từ vừa nhập thông qua google Phát âm nút phát âm từ đã tra Hình nút hiển thị hình minh họa của từ đã tra 73 Giao diện sau khi tra một từ Mô tả: Vùng dữ liệu Mô tả Từ điển Anh-Việt từ điển Anh-Việt Từ điển máy tính từ điển máy tính Từ điển đồng nghĩa từ điển đồng nghĩa Tra từ vùng nhập từ cần tra Kết quả vùng hiển thị kết quả sau khi tra từ Kiểu tìm tìm từ vừa nhập thông qua google Phát âm nút phát âm từ đã tra Hình nút hiển thị hình minh họa của từ vừa tra Clip minh họa clip minh họa cho từ vừa tra 74 Giao diện đăng nhập quảng trị Mô tả: Vùng dữ liệu Mô tả Tài khoản tài khoản đăng nhập Mật khẩu mật khẩu đăng nhập 75 Giao diện nhập từ Anh-Việt Mô tả: Vùng dữ liệu Mô tả Upload file upload file của từ cần nhập Thêm từ thêm từ vào cơ sở dữ liệu Sửa sửa từ trong cơ sở dữ liệu Xóa xóa từ trong cơ sở dữ liệu Từ cần nhập từ muốn nhập vào cơ sở dữ liệu Phiên âm phiên âm của từ cần nhập Nghĩa của từ nghĩa của từ cần nhấp 76 Giao diện nhập từ và upload file từ điển Anh-Việt Mô tả: Vùng dữ liệu Mô tả File clip clip của từ cần nhập File hình file hình minh họa của từ cần nhập File phát âm file phát âm từ cần nhập 77 Giao diện nhập từ và kết quả sau khi upload 3. KẾT LUẬN Ưu điểm: Về cơ bản đồ án đã thực hiện được các nội dung đề ra và đạt được một số kết quả nhất định: ƒ Đồ án đã trình bày cơ sở lý thuyết về công nghệ Ajax trên nền PHP đối với hoạt động của một ứng dụng từ điển multimedia. ƒ Tìm hiểu các kỹ thuật và phương thức trong việc thiết kế từng module. ƒ Tìm hiểu các vấn đề đặc trưng của một ứng dụng tra từ điển multimedia. ƒ Tìm hiểu các vấn đề đặc trưng của việc tra từ và hiển thị hình, clip, phát âm đúng với từ đã nhập. ƒ Thời gian xử lý clip của từ tra nhanh. ƒ Cho phép tìm kiếm mở rộng từ đã nhập thông qua google. ƒ Cho phép upload các file hình, file phát âm, file clip ngay lúc nhập từ. ƒ Thời gian xử lý yêu cầu rất nhanh và kết quả chính xác. ƒ Giao diện đẹp, thân thiện, dễ sử dụng. 78 Nhược điểm: Do ứng dụng chỉ mang tính chất minh họa nên còn một số hạn chế cần phải cải tiến: ƒ Chưa sử dụng được cơ sở dữ liệu từ có sẵn trên mạng. 4. HƯỚNG PHÁT TRIỂN 4.1. ĐỐI VỚI TỪNG MODULE 9 Quản trị: ƒ Sử dụng cơ sở dữ liệu từ có sẵn trên mạng. ƒ Thực hiện việc đăng ký user, phân quyền user. ƒ Cho phép user post các câu đố, mẫu truyện anh văn vui. ƒ Cho phép user tạo riêng cho mình các chỉ mục từ vựng về lĩnh vực nào đó để học. 9 Tra từ: ƒ Sau khi hiển thị nghĩa một từ, có thể tra bất kỳ từ nào trong phần nghĩa của từ đó bằng việc nhấp đôi vào từ muốn tra (tương tự phần mềm từ điển Babylon). ƒ Hỗ trợ tra từ gần đúng. ƒ Dịch đoạn văn. ƒ Tự động lưu các từ đã tra vào mục history để khi cần ta tìm lại cho nhanh. 4.2. ĐỐI VỚI TOÀN BỘ ĐỒ ÁN 9 Hỗ trợ đa ngôn ngữ. 9 Tăng tính hiệu quả, tính ổn định và bảo mật của ứng dụng. 9 Thêm các module như: các mẫu truyện, câu đố anh văn vui…giúp cho ứng dụng thêm phong phú. 79 80 TÀI LIỆU THAM KHẢO [1] Dave Crane, Eric Pascarello with Darren James, (2006). “Ajax in action”. Manning Publications Co. [2] Cristain Darie, Brinzarea Bogdan, Filip Chereches-Tosa, Mihai Bucica, (2006). “Ajax and PHP – Building Responsive Web Applications”. Packt Publishing. [3] Lee Babin, (2007). “Begining Ajax with PHP: From Novice to Professional”. Springer-Verlag New York. [4] Kris Hadlock, (2007). “Ajax for Web Application Developers”. Sams Publishing. [5] Joshua Eichorn, (2007). “Understanding Ajax: Using JavaScript to Create Rich Internet Applications”. [6] [7] [8]