Bắt đầu với Project Zero, WebSphere sMash, và PHP

Một bài tập phát triển ứng dụng Web Ajax 2.0 đơn giản sử dụng Project Zero và PHP

Project Zero là một môi trường để phát triển các ứng dụng web tương tác dựa trên các công nghệ Web phổ biến như PHP một cách nhanh chóng và dễ dàng. Bài tập này trình cách bắt đầu với Project Zero, từ việc cài đặt cho đến việc xây dựng ứng dụng Web Ajax 2.0 mẫu với ngôn ngữ lập trình web PHP. Bài tập này cũng giới thiệu cách xuất bản và mở rộng một ứng dụng Web 2.0

Ghi chú của biên tập viên: IBM® WebSphere® sMash and IBM WebSphere sMash Developer Edition được đánh giá cao nhất Project Zero ươm mầm các dự án. Project Zero là cộng đồng phát triển cho WebSphere sMash và sẽ tiếp tục cung cấp cho các nhà phát triển một nền tảng miễn phí để phát triển các ứng dụng với các phiên bản, tính năng mới nhất và những hỗ trợ cần thiết.

Trước khi bắt đầu

Hãy bỏ ra vài phút để hiểu và làm quen với trang web Project Zero. Bạn có thể tham gia vào cộng đồng Project Zero, phát triển dự án hoặc tham gia diễn đàn thảo luận nơi mà bạn có thể góp ý với từng giai đoạn phát triển của dự án. Bài viết này giả định rằng bạn đã có một bộ công cụ phát triển Java™ Development Kit (JDK) phù hợp được cài đặt sẵn trên máy của bạn. Và bạn cần có kiến thức hoặc khái niệm cơ bản về PHP và JavaScript.

Tổng quan về Project Zero

Project Zero cung cấp một môi trường để phát triển ứng dụng Web tương tác một cách nhanh chóng và hiệu quả. Mục đích của Project Zero là cung cấp một cơ sở hạ tầng hoàn thiện cho phát triển ứng dụng web sao cho các nhà phát triển ứng dụng chỉ tập trung vào logic của công việc. Qua bài viết này, bạn sẽ thấy nó rất đơn giản. Bài viết này sẽ hướng dẫn bạn từng bước để thực hiện bài tập. Bạn sẽ bắt đầu với một thư mục rỗng, cài đặt các công cụ cần thiết và sau đó là phát triển một ứng dụng mẫu Web 2.0 Ajax với ngôn ngữ PHP. Trong bài này, Eclipse sẽ là môi trường phát triển

Các chỉ dẫn trong bài này hoàn toàn đủ cho bạn hoàn thành bài tập, nhưng bạn có thể tìm thấy chỉ dẫn đầy đủ cho việc tải về và cài đặt Project Zero cho PHP tại trang web Project Zero (xem Tài nguyên).

Cài đặt Project Zero cho PHP

Bây giờ, chúng ta bắt đầu bằng cách làm theo các bước sau để cài đặt Project Zero cho PHP:

  1. Tạo một thư mục rỗng (ví dụ, zero_example).
  2. Tải về môi trường phát triển Eclipse cho PHP (xem Tài nguyên). Lưu ý:: Từ trang tải về, bạn chọn một phiên bản (phiên bản ổn định S20070910-RC1 được sử dụng trong ví dụ này, nhưng bạn có thể chọn phiên bản ổn định mới nhất). Quan trọng: Các phiên bản trước đó, như là S20070611-M1, không hoạt động với phiên bản hiện tại của Project Zero. Bạn hãy tải tệp "All-in-One PDT.zip" phù hợp với hệ điều hành bạn đang sử dụng về (ví dụ: pdt-all-in-one-<phiên_bản>-win32.zip) và giải nén nó vào thư mục bạn tạo ra lúc trước (zero_example). Ví dụ, nếu bạn đang dùng Eclipse, bạn sẽ có một thư mục với tên là zero_example/<pdt_phiên_bản>/eclipse.

Bây giờ bạn đã cài đặt xong môi trường phát triển, bạn có thể cái đặt các ứng dụng cài thêm (plug-ins) của Eclipse cho phép bạn phát triển ứng dụng dùng PHP như sau:

  1. Tao một thư mục rỗng (ví dụ, zero_example/workspace).
  2. Từ thực đơn, chọn Help > Software Updates > Find and Install....
  3. Trong hộp thoại mới xuất hiện, chọn Search for new features to install và bấm chọn Next.

Bây giờ bạn có thể thêm vào một website từ xa để tìm kiếm các bản nâng cấp:

  1. Nhấn New remote site và trong hộp thoại mới xuất hiện, đưa vào tên website như là Project Zero.
  2. Liên kết website từ xa đó với tên sau: http://www.projectzero.org/update/zero.eclipse.php.latest
  3. Nhấn OK và trong hộp thoại bên ngoài, bấm chọn Finish.
  4. Trong hộp thoại kết quả tìm kiếm, lựa chọn tất cả các thành phần của Project Zero trong cây và bấm chọn Next.
  5. Chấp nhận thỏa thuận sử dụng và bấm chọn Next.
  6. Nhấn FinishInstall All.

Môi trường phát triển Project Zero đã được cài đặt xong. Bạn hãy khởi động lại Eclipse để bắt đầu tạo một ứng dụng PHP đơn giản.

Phát triển ứng dụng 1: MyFirstProject

Bước đầu tiên để bắt đầu với ứng dụng đầu tiên của bạn là tạo ra một dự án (Zero project) trong Eclipse như sau:

  1. Chọn File > New > Project... và mở rộng mục Zero trong hộp thoại (xem Hình 1).
  2. Chọn Project Zero PHP Application và bấm chọn Next.
  3. Nhập tên dự án (ví dụ, MyFirstProject) và bấm chọn Finish. Dự án của bạn đã được tạo.
Hình 1. Mục Project Zero (Project Zero category)
Mục Project Zero (Project Zero category)

Do bạn đã chọn Project Zero PHP application, Zero hiểu rằng bạn sẽ sử dụng ngôn ngữ PHP, nên nó sẽ thay thế một tệp cấu hình php.ini vào thư mục cấu hình của dự án. Ví dụ 1 liệt kê một đoạn nội dung của tệp INI. Đoạn mã trong Ví dụ 1 yêu cầu PHP tải các mở rộng của Zero khi thực thi.

Ví dụ 1. Các mở rộng cho PHP của Project Zero (The Project Zero PHP extensions)
extension = zero.php.ZeroExtension
extension = zero.php.JSONExtension
extension = zero.php.LoginServiceExtension
extension = zero.php.ACFExtension
extension = zero.data.php.QueryExtension
extension = zero.php.XMLExtension
extension = zero.php.NetworkExtension
extension = zero.php.URIUtilsExtension

Zero cũng đã thêm các yêu cầu của PHP vào tệp ivy.xml. Nếu bạn nháy đúp chuột vào tệp ivy.xml này, bạn sẽ thấy tệp zero.php trong danh sách. (Để tham khảo thêm, bạn có thể bấm chọn Add vào đây và kiểm tra danh sách mô-đun khác mà bạn có thể muốn thêm vào.)

Bây giờ, PHP và các mở rộng của zero đã sẵn sàng trong Zero, Zero có thể gọi được P8 engine để quả lý các dữ liệu nhập vào từ các ứng dụng Web. PHP có thể sử dụng các dịch vụ (services) của các phần mở rộng của PHP trong Zero để truy cập "ngữ cảnh toàn cục" (Zero Global Context) trong Zero.

Ngữ cảnh toàn cục Zero là một trong các giải pháp của Zero. Mọi yêu cầu từ máy chủ (server) đến máy trạm (client) đều có thể lưu trữ trong ngữ cảnh toàn cục. (Để biết thông tin chi tiết, xem Zero documentation's Core Developer's Guide; Xem Tài nguyên để biết đường dẫn.)

Bước tiếp theo là tạo ra một ứng dụng PHP đơn giản để nhập dữ liệu từ phía máy khách và xử lý dữ liệu đó ở phía máy chủ.

Tạo ứng dụng PHP

Trước khi bắt đầu, hãy đảm bảo rằng bạn đang viết ứng dụng bằng PHP bằng cách kiểm tra tên trong góc trên cùng bên phải của cửa sổ. Nếu bạn nó không phải là ngôn ngữ PHP, bạn hãy bấm chọn vào biểu tượng dấu cộng (+) trên góc trên cùng bên phải của cửa sổ để thay đổi.

Tiếp theo, thực hiện từng bước sau để bắt đầu:

  1. Mở thư mục MyFirstProject.
  2. Bấm chọn phải chuột lên thư mục public và tạo tệp PHP với tên là MyFirstForm.php. Sao chép đoạn mã trong Ví dụ 2 vào mẫu (form), ghi đè lên các thẻ có sẵn của PHP, rồi lưu lại:
Ví dụ 2. Một mẫu (form) đơn giản
<!--Input form with one field and a button-->
<html>
<head>
   <title>My First Form</title>
</head>
<body>
   <form name="input" action="/action.php" method="POST">
      <input type="text" name="item">
      <input type="submit" name="action" value="Post a message">
   </form>   
</body>
</html>

Ghi chú: Phần mở rộng của tệp tin là .php, nhưng nó không chứa bất kỳ mã PHP nào; nó chỉ là mã HTML, và nếu nó được lưu dưới dạng .html thì cũng không có vấn đề gì. Mã PHP có thể được tích hợp vào trong mẫu (form) này, nhưng bạn sẽ tạo ra một mẫu khác với tên là action.php để xử lý dữ liệu được gửi qua phương thức POST. Lưu ý rằng, các dòng mã form action='action.php' yêu cầu các script viết trong tệp action.php xử lý dữ liệu gửi về.

Bây giờ, tạo tệp PHP thứ hai trong thư mục public với tên là action.php, sao chép và dán đoạn mã trong Ví dụ 3 vào đó rồi lưu lại:

Ví dụ 3. Một đoạn mã PHP đơn giản
<html>
<body>
<b>Processing your entry</b>
<?php

$method = zget('/request/method');
echo "<p>The request was a $method</p>";

$keys = zlist('/request/params', true);

echo "<p>Here is the data:</p>";

echo "<table cellspacing='0' cellpadding='0' border='1' >";
echo "<tr><td>Key</td><td>Values</td></tr>";

for ($i=0;$i<count($keys);$i++) {
  echo  "<tr><td>$keys[$i]</td>";
  echo "<td>";
  $value = zget($keys[$i]);
  if (is_array($value)) {
  	 for ($j=0;$j<count($value);$j++) {
  	 	echo "$value[$j] ";
  	 }
  } else {
  	echo "$value";	
  }
  echo "</td>";
  echo "</tr>";
}

echo "</table>";
?>
</body>
</html>

Đoạn mã trong Ví dụ 3 là sự trộn lẫn mã HTML với PHP. Mã PHP sinh ra mã HTML nhưng lại sử dụng các giá trị được nhập vào từ mẫu (form) gốc. Phần Project Zero của mẫu này là các dòng lệnh sau:

Ví dụ 4. Thu thập dữ liệu từ ngữ cảnh toàn cục
$method = zget('/request/method');
$keys = zlist('/request/params', true);
...
$value = zget($keys[$i]);

Dòng đầu tiên trong Ví dụ 4 sử dụng zget(), một phần của Zero runtime được tích hợp vào PHP thông qua các phần mở rộng trong tệp php.ini. Phương thức này thu thập dữ liệu từ ngữ cảnh toàn cục. Dòng thứ 2 sử dụng zlist(), trong đó các đầu mối trong glocal context là một danh sách các cặp "khóa và giá trị", trong trường hợp '/request/params'. Vòng lặp ở dòng 3 sẽ duyệt qua các khóa thu nhận được để lấy các giá trị tương ứng, sau đó in ra như một mảng hoặc một chuỗi ký tự.

Thực thi ứng dụng PHP

Hai tệp được tạo ở bước trước tạo lên một ứng dụng Zero đầy đủ. Bấm chọn phải chuột lên tên dự án trong Eclipse và chọn Run as > Project Zero Application; một máy chủ Web sẽ được khởi động ở cổng 8080 tại máy của bạn. Bây giờ hãy sử dụng trình duyệt web của bạn và truy cập vào http://localhost:8080/MyFirstForm.php, bạn sẽ thấy mẫu nhập liệu. Nhập dữ liệu nào đó vào, ví dụ Đây là dự án Zero đầu tiên của tôi, và bấm chọn vào nút. Bạn sẽ thấy trang web hiển thị nội dung bạn vừa nhập vào (xem Hình 2):

Hình 2. Trang web hiển thị kết quả
Trang web hiển thị kết quả

Bạn có thể bấm chọn nút Back trên trình duyệt để quay lại trang web nhập liệu và nhập các dữ liệu khác và xem kết quả khi bấm chọn vào post a message. Để đóng ứng dụng, bấm chọn vào biểu tượng ô vuông màu đỏ ở cửa sổ lệnh.

Một điểm quan trọng để hiểu Project Zero là nắm bắt được thành phần dữ liệu nào mà chúng ta có thể yêu cầu và xác lập trong ngữ cảnh toàn cục (nơi mà phương thức get() tìm kiếm dữ liệu) và làm thế nào để sử dụng các trình cái thêm (plug-ins) ví dụ như Zero để lưu trữ vào và lấy ra từ các cơ sở dữ liệu

Xuất bản ứng dụng

Tệp .zip của tôi không xuất hiện trong Eclipse

Tệp .zip được tạo ra và lưu trữ trên đĩa nhưng không phải là được tạo ra từ Eclipse nên Eclipse không phát hiện được ngay. Bạn hãy bấm nút chuột phải vào tên dự án và chọn Refresh.

Trước khi thực hiện xuất bản ứng dụng, bạn phải đóng máy chủ Zero bằng cách bấm chọn lên hình vuông màu đỏ trong cửa sổ lệnh. Sau đó thực hiện các chỉ dẫn sau để bắt đầu xuất bản ứng dụng:

  1. Nhấn chuột phải vào menu project trong Eclipse và chọn Export....
  2. Mở rộng mục Zero và chọnProject Zero Export Wizard.
  3. Lựa chọn tên của thư mục sẽ xuất bản và đánh dấu vào hộp đánh dấu để xuất bản mã nguồn kèm theo.
  4. Cuối cùng, chọn Finish và dự án của bạn đã được xuất bản như là một tệp nén .zip trong thư mục bạn đã chọn.

Tệp nén được sử dụng để lưu trữ và vận chuyển. Nếu bạn muốn thực thi từ cửa sổ dòng lệnh, bạn phải cài đặt runtime dòng lệnh của Zero và giải nén nó vào thư mục ứng dụng nào đó.

Tại điểm này, để triển khai ứng dụng trong máy chủ Zero, bạn hãy thực hiện các chỉ dẫn trong tài liệu của Project Zero (xem Tài nguyên) để biến các câu lệnh. Bạn cũng sẽ phải cài đặt CLI để thực thi “zero seed”, lựa chọn các thư viện lõi của Zero. Phần còn lại của các chỉ dẫn trong phần này của tài liệu sẽ giới thiệu việc cài đặt mẫu, tạo thư mục ứng dụng, do đó bạn có thể hoặc tiếp tục và cài đặt để sử dụng sau này hoặc chỉ tạo ra thư mục ứng dụng bằng Windows® Explorer. Sau khi bạn hoàn thành các bước đó, hãy quay trở lại đây

Có vấn đề khi triển khai?

Nếu bạn gặp lỗi 500 khi mở tệp MyFirstForm.php, đầu tiên hãy kiểm tra xem tệp php.ini có nằm trong thư mục cấu hình của bạn hay không. Nếu không có, bạn hãy tìm nó trong các dự án mẫu khác hoặc trong thư mục mà bạn đã cài PHP rồi sao chép nó về thư mục cấu hình của bạn.

Nếu bạn gặp lỗi thất bại khi mở mẫu action như sau unknown method get() (không tìm thấy phương thức get()), kiểm tra rằng các phần mở rộng của Zero đã được thêm vào trong tệp php.ini.

Bây giờ, thực hiện các bước sau để thực thi ứng dụng của bạn:

  1. Giải nén tệp .zip mà được tạo bởi Eclipse vào thư mục <zerohome>/apps, ta sẽ được một thư mục ngay trong thư mục apps. Tùy thuộc vào việc bạn giải nén, bạn có thể có một thư mục ứng dụng đơn (ví dụ, MyFirstProject) hoặc một thư mục cơ sở chứa thư mục đó.
  2. Bạn phải chuyển vào thư mục cơ sở của ứng dụng của bạn (ở đó có thư mục con tên là config) và thực thi dòng lệnh zero resolve
  3. Cuối cùng, thực thi lệnh zero run. Một máy chủ web sẽ được thực thi trên cổng 8080 giống như khi bạn chạy trong Eclipse. Trình duyệt của bạn sẽ tải tệp MyFirstForm.php về được.
  4. Để dừng máy chủ, chỉ việc ấn Ctrl-C tại cửa sổ dòng lệnh.

Ứng dụng 2 với tính năng Ajax: Sử dụng Ajax và Project Zero trong MyFirstDojoApp

Bạn đã tạo được một ứng dụng PHP đơn giản, và bây giờ là lúc thêm tính năng Ajax bằng cách sử dụng JavaScript và Dojo vào. Hãy bắt đầu với những bước sau:

  1. Đầu tiên, tạo một dự án ứng dụng Zero trong Eclipse bằng cách bấm chọn vào File > New > Project....
  2. Chọn mẫu ứng dụng Project Zero PHP và bấm chọn Next.
  3. Nhập tên dự án của bạn vào (ví dụ, MyFirstDojoApp) và bấm chọn Finish.

Với ứng dụng này, bạn sẽ sử dụng Dojo, do đó bạn cần thực hiện các thao tác sau với Zero:

  1. Mở rộng MyFirstDojoApp và thư mục config.
  2. Mở tệp ivy.xml,và trong bảng Zero Package Information, bấm chọn Add....
  3. Trong cửa sổ Dependency Selection, tìm Dojo (xuất hiện ở đỉnh của danh sách trong Hình 3), và đi đến bước 8 (nếu tìm thấy).
  4. Nếu không tìm thấy Dojo, bấm chọn Manage Repository (xem Hình 3).
  5. Trong cửa sổ Manage Repository, bấm chọn Search (không nhập bất cứ thông tin gì).
  6. Sau vài giây, một danh sách sẽ hiện ra (xem Hình 3b).
  7. Chọn Dojo, bấm chọn Download, và sau đó bấm chọn Close.
  8. Chọn Dojo mới nhất trong cửa sổ Dependency Selection và bấm chọn OK. (Tôi sử dụng Dojo 0.9, nhưng Dojo đã có phiên bản mới hơn.) Bạn hãy kiểm tra xem Dojo đã được thêm vào danh sách trong Zero Package Information.
  9. Lưu các thay đổi của bạn lại sử dụng thực đơn File > Save.
Hình 3. Dojo dependency
Dojo dependency
Hình 3b. Cửa sổ Manage Repository
Cửa sổ Manage Repository

Cập nhật Zero dependencies

Để đảm bảo Dojo và PHP dependencies luôn là phiên bản mới nhất, bạn bấm chọn Update Dependencies ở thanh công cụ của Eclipse hoặc chọn Zero > Update Dependencies từ thực đơn (xem Hình 4).

Hình 4. Cập nhật dependencies
Cập nhật dependencies

Bây giờ chúng ta tạo mã JavaScript và HTML cho ứng dụng.

Trong thư mục public, tạo một tệp tên là Example.html. Dán đoạn mã trong Ví dụ 5 và lưu lại:

Ví dụ 5. Mã javascript
<html>
<head>
<title>Dojo Zero Example</title>
<style type="text/css">
 @import "dijit/themes/noir/noir.css";
 @import "dojo/dojo.css"
</style>
<script type="text/javascript" src="dojo/dojo.js" 
        djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.require("dojo.parser");

function enterPressed() {
alert('The enter button was pressed');
}
</script>
</head>
<body>
<br/>
<br/>
Type your name then press enter: <input type='text' id ='name'/>
<br/>
<br/>
<br/>
<button dojoType='dijit.form.Button' onclick='enterPressed' >Enter</button>
</body>
</html>

Đoạn mã trong Ví dụ 5 không tương tác gì với máy chủ tại thời điểm hiện tại; nó chỉ bật ra một thông báo "The button was pressed" nếu nút Enter được bấm chọn vào. Đoạn mã không sử dụng hàm onClick truyền thống trong nút Enter nhưng lại sử dụng hệ thống sự kiện Dojo để đăng ký một phương thức để gọi khi trang web được tải.

Chạy và kiểm tra Dojo

Chúng ta hãy chạy thử và kiểm nghiệm xem ứng dụng có thực sự hoạt động như mong muốn không:

  1. Bấm chọn phải chuột lên tên dự án và chọn Run as... > Project Zero Application.
  2. Sử dụng trình duyệt và truy cập đến http://localhost:8080/Example.html.
  3. Example.html sẽ có một hộp nhập liệu và một nút bấm (xem hình 5). Nhập dữ liệu nào đó vào hộp nhập liệu và bấm chọn nút. Hãy chắc chắn rằng bạn nhận được một thông báo như sau: "The enter button was pressed."
  4. Bạn có thể tìm bằng Google và cài đặt Firebug, một mở rộng của FireFox. Firefox sẽ giúp bạn rất nhiều trong việc theo dõi các tệp JavaScript phức tạp sau này.
  5. Nếu bạn thấy phần nhập liệu nhưng lại không thấy thông báo xuất hiện khi bấm chọn chuột, thì đó có thể là do Dojo đã không được sử dụng. Hãy kiểm tra font và hình dạng của nút Enter (xem hình 5). Các điều khiển của Dojo được hiển thị theo một mẫu (trong trường hợp này là "noir") như hiển thị trong phần header của trang; nếu bạn thấy một nút bấm với font chữ và hình dạng thông thường thì có nghĩa là Dojo không hoạt động. Hãy đảm bảo dependency của project của bạn được cài đặt đúng đắn như đã đề cập ở trên (xem Hình 3).
Hình 5. Nút Dojo
Nút Dojo

Thêm mã PHP và hoàn thiện mã HTML và JavaScript

Tiếp theo, hãy thêm một đoạn mã để chuyển sự kiện "click button" tới Zero và cung cấp một đoạn mã PHP nhỏ để xử lý sự kiện đó:

  1. Trong thu mục public, tạo một tệp tên là ExampleResponse.php.
  2. Dán đoạn mã trong Ví dụ 6 vào và lưu lại
Ví dụ 6. Mã PHP
<?php

$method = zget('/request/method');
echo " The request was a $method ";

$keys = zlist('/request/params', true);

echo "\n Here is the data: ";

for ($i=0;$i<count($keys);$i++) {
  echo  " Key: $keys[$i] value:";
  $value = zget($keys[$i]);
  if (is_array($value)) {
  	for ($j = 0; $j <count($value) ; $j++ ) {
  		echo " $value[$j] ";
  	}
  } else {
  	 echo " $value ";
  }
}
?>

Ví dụ 6 trông khá giống với đoạn mã PHP đầu tiên. Nó nhận một thông báo và trả lại nội dung của thông báo để hiển thị.

Tiếp theo, trở lại tệp Example.html và thêm hàm enterPressed để gắn kết với tệp ExampleResponse tạo ở phía trên:

Ví dụ 7. enterPressed Hàm tương ứng trong mã PHP
function enterPressed()
{
    var deferred = dojo.xhrGet({
        url: "ExampleResponse.php",
        handleAs: "text",
        content: {name: dojo.byId('name').value},
        timeout: 5000, //Time in milliseconds
        handle: function(response, ioArgs){
            if(response instanceof Error){
                if(response.dojoType == "cancel"){
                     alert("Request cancelled.");
                }else if(response.dojoType == "timeout"){
                     alert("Request timed out.");
                }else{
                     alert(response);
                }
            }else{
               alert(response);
            }
        return response;
        }
});
}

Phần định nghĩa của hàm đã bao gồm phần hiển thị nội dung thông báo enterPressed. Điều này thay thế lời gọi đến dojo.io.bind (được sử dụng trong phiên bản trước của bài viết này Dojo 0.4.3).

Hãy chắc chắn là bạn đã lưu lại tất cả các việc bạn đã làm.

Bây giờ bạn hãy quay lại trình duyệt của bạn, tải lại (refresh) trang Example.html, nhập dự liêu và bấm chọn Enter, và sẽ nhận được thông báo "request was a GET" từ phía máy chủ (xem Hình 6):

Hình 6. Ứng dụng Ajax
Ứng dụng Ajax

Ứng dụng Ajax Zero hoàn thiện

Chúc mừng, bạn đã hoàn thành một ứng dụng Ajax Zero. Có lẽ nó không phải là ứng dụng hoàn thiện nhất bạn đã từng viết, nhưng bạn phải công nhận rằng nó rất dễ.

Hi vọng rằng, các đoạn mã hoạt động tốt trên máy chủ, nhưng bạn sẽ làm gì nếu nó không hoạt động như mong đợi? Như một bài tập nhỏ, chúng ta thử thay đổi đoạn mã PHP một chút để sinh ra lỗi và xem xem chúng ta bắt lỗi làm sao.

Theo dõi vị trí con trỏ chuột

Để thư giãn, chúng ta hãy viết một ứng dụng nhỏ thông báo vị trí hiện tại của con trỏ chuột về máy chủ, và máy chủ sẽ hiển thị vị trí đó trong một hộp văn bản (text box). Việc gửi tất cả các di chuyển của chuột có thể sẽ tiêu tốn công năng của hệ thống, nhưng nó trình diễn khả năng tương tác của Ajax.

Để Dojo nhận trang web của bạn như là một điều khiển và do đó có thể theo dõi được sự di chuyển của con trỏ chuột, bạn phải gán một cái tên cho phần thân <body> của trang web. Và bạn cũng phải thêm một widget (một đối tượng nhỏ được nhúng vào trang web) cho kết quả trả về. Phần thân <body> của trang web của bạn sẽ như trong Ví dụ 8:

Ví dụ 8. Widget
<body id="body">
<br/>
<br/>
Type your name then press enter: <input type='text' id ='name'/>
<br/>
<br/>
<br/>
<button dojoType='dijit.form.Button' onclick='enterPressed' >Enter</button>
<br/>
Mouse Position: <input type='text' id='pos'/>
<br/>
</body>

Sau đó, thêm vào phương thức init() đoạn mã để liên kết sự di chuyển của con trỏ chuột với các sự kiện và lưu lại các thay đổi của bạn. Phương thức init() của bạn sẽ giống như trong Ví dụ 9:

Ví dụ 9: Liên kết di chuyển cua chuột trong thân <body> trang web
function init()
{
   var domElement = document.getElementById('body');
    
    dojo.connect(domElement, 'onmousemove',	
		function (evt)
		{
    		var deferred = dojo.xhrGet({
        	url: "MouseResponse.php",
        	handleAs: "text",
       		content: {x:evt.pageX , y:evt.pageY},
        	timeout: 5000, //Time in milliseconds
        	handle: function(response, ioArgs){
            if(!(response instanceof Error)){
        		dojo.byId('pos').value = response;
       		}
        	return response;
        }
		});
	}
    );}
    
dojo.addOnLoad(init);

Cuối cùng, thêm đoạn mã PHP xử lý di chuyển của chuột vào thư mục public và gọi MouseResponse.php như trong đoạn mã trong Ví dụ 9. Dán nội dung của Ví dụ 10 vào tệp:

Ví dụ 10. Mã PHP xử lý di chuyển chuột
<?php
$keys = zlist('/request/params',false);
for ($i=0;$i<count($keys);$i++) {
  echo  "$keys[$i]=";
  $value = zget('/request/params/'.$keys[$i]);
  echo "$value";	
}
?>

Bây giờ bạn có thể thử di chuyển chuột trên trình duyệt và xem vị trí của nó được cập nhật thế nào, giống như trong hình 8:

Hình 7. Ứng dụng
Ứng dụng

Đóng trang này lại trước khi bạn tắt máy chủ; nếu không, bạn sẽ nhận được các thông báo lỗi sau mỗi lần di chuột!

Tóm lược và các bước tiếp theo - Bạn đã hoàn thành những gì

Ở bài tập này, bạn đã:

  • Cài đặt môi trường phát triển Eclipse cho PHP.
  • Cài đặt môi trường phát triển web 2.0 Project Zero cho PHP.
  • Phát triển một ứng dụng với mẫu form HTML đơn giản cùng với mã PHP tương ứng.
  • Xuất bản ứng dụng và thực thi nó từ câu lệnh của Zero.
  • Phát triển ứng dụng PHP thứ 2 kết hợp cả JavaScript và HTML ở phía người dùng.
  • Học các tìm bắt lỗi bằng cách tạo ra một số lỗi.
  • Mở rộng ứng dụng Ajax với một hàm gọi ngược (extra callback) với một đối tượng widget Dojo.

Tiếp theo là gì?

Bây giờ, bạn đã hoàn thành một ứng dụng Ajax Zero nhỏ, bạn có thể mở rộng nó bằng cách sử dụng thư viện Dojo và mã PHP. Tại sao bạn không thử kết hợp những công cụ này với thành phần xử lý dữ liệu Zero Data và xây dựng một hệ thống truy xuất dữ liệu thực thụ sử dụng Apache Derby? Ứng dụng mẫu trình diễn quản lý nhân viên (The Employee Demo) sẽ là điểm khởi đầu tốt cho bạn. Tài liệu Project Zero Documentation liên kết trong phần Tài nguyên sẽ dẫn bạn đến các ứng dụng mẫu của Project Zero.

Nếu bạn muốn biết thêm về ngữ cảnh toàn cục của Zero và chủ để liên quan khác như là Resource (REST) Handling, hãy xem sách hướng dẫn dành cho những nhà phát triển của Project Zero được liệt kê trong Tài nguyên.

Chúng tôi hy vọng bài tập này sẽ giúp các bạn bắt đầu tốt với Project Zero. Hãy ghé thăm projectzero.org nếu bạn muốn đóng góp cho cộng đồng đang phát triển này. Hãy thường xuyên kiểm tra các bản cập nhật của thư viện Project Zero.

Tài nguyên

Học tập

Lấy sản phẩm và công nghệ

Thảo luận

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Nguồn mở
ArticleID=387569
ArticleTitle=Bắt đầu với Project Zero, WebSphere sMash, và PHP
publish-date=09292008