PDF:

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
Judy Taylor
Kỹ sư phần mềm
IBM
29 09 2008
(Xuất bản lần đầu tiên vào ngày 20 05
2009)
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
© Copyright IBM Corporation 2009
Bắt đầu với Project Zero, WebSphere sMash, và PHP
Nhẫn hiệu đăng ký
Trang 1 của 16
developerWorks®
ibm.com/developerWorks/vn/
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 (plugins) 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 Finish và Install 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).
Bắt đầu với Project Zero, WebSphere sMash, và PHP
Trang 2 của 16
ibm.com/developerWorks/vn/
developerWorks®
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)
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
extension
extension
extension
extension
extension
extension
extension
=
=
=
=
=
=
=
=
zero.php.ZeroExtension
zero.php.JSONExtension
zero.php.LoginServiceExtension
zero.php.ACFExtension
zero.data.php.QueryExtension
zero.php.XMLExtension
zero.php.NetworkExtension
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
Bắt đầu với Project Zero, WebSphere sMash, và PHP
Trang 3 của 16
developerWorks®
ibm.com/developerWorks/vn/
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>
Bắt đầu với Project Zero, WebSphere sMash, và PHP
Trang 4 của 16
ibm.com/developerWorks/vn/
developerWorks®
<?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):
Bắt đầu với Project Zero, WebSphere sMash, và PHP
Trang 5 của 16
developerWorks®
ibm.com/developerWorks/vn/
Hình 2. 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
Bắt đầu với Project Zero, WebSphere sMash, và PHP
Trang 6 của 16
ibm.com/developerWorks/vn/
developerWorks®
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.
Bắt đầu với Project Zero, WebSphere sMash, và PHP
Trang 7 của 16
developerWorks®
ibm.com/developerWorks/vn/
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
Hình 3b. 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
Bắt đầu với Project Zero, WebSphere sMash, và PHP
Trang 8 của 16
ibm.com/developerWorks/vn/
developerWorks®
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à
Bắt đầu với Project Zero, WebSphere sMash, và PHP
Trang 9 của 16
developerWorks®
ibm.com/developerWorks/vn/
"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
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ị.
Bắt đầu với Project Zero, WebSphere sMash, và PHP
Trang 10 của 16
ibm.com/developerWorks/vn/
developerWorks®
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
Bắt đầu với Project Zero, WebSphere sMash, và PHP
Trang 11 của 16
developerWorks®
ibm.com/developerWorks/vn/
Ứ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){
Bắt đầu với Project Zero, WebSphere sMash, và PHP
Trang 12 của 16
ibm.com/developerWorks/vn/
developerWorks®
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 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.
Bắt đầu với Project Zero, WebSphere sMash, và PHP
Trang 13 của 16
developerWorks®
•
•
•
•
•
•
ibm.com/developerWorks/vn/
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.
Bắt đầu với Project Zero, WebSphere sMash, và PHP
Trang 14 của 16
ibm.com/developerWorks/vn/
developerWorks®
Tài nguyên
Học tập
• Nếu bạn muốn tham gia cộng động Project Zero hay chỉ đơn thuần muốn biết tình hình của
nó, hãy ghé thăm trang chủ của Project Zero nơi bạn sẽ tìm thấy các nhật ký, diễn đàn thảo
luận và một cộng đồng các nhà phát triển.
• Tham khảo tất cả các tài liệu liên quan đến Project Zero, bao gồm các câu hỏi thường gặp
(FAQs), hướng dẫn, và các ứng dụng trình diễn:
• Tìm hiểu chỉ dẫn cài đặt Project Zero.
• Hãy ngó qua một ứng dụng mẫu trình diễn quản lý nhân viên bằng PHP.
• Bạn sẽ thấy bản hướng dẫn cho các nhà phát triển là một tài liệu đáng giá cho công cụ
Project Zero của bạn.
• Nghe cuộc thảo luận và phỏng vấn với các cộng sự IBM với WebSphere CTO Jerry Cuomo,
người đã chỉ cho chúng ta thấy ảnh hưởng của sự phát triển Web 2.0.
• Xem vùng developerWorks PHP để có được nguồn tài nguyên đầy đủ về các dự án PHP.
• Trang phát triển developerWorks bao gồm các tài nguyên cho các nhà phát triển ứng dụng
Web 2.0.
• Trang trung tâm tài nguyên developerWorks Ajax được đóng gói với nội dung và công cụ để
giúp bạn bắt đầu ngay với việc phát triển các ứng dụng Ajax.
• Trang developerWorks XML bao hàm tất cả các khía cạnh của việc phát triển công nghệ XML.
Lấy sản phẩm và công nghệ
• Bạn có thể tìm thấy các chỉ dẫn đầy đủ để tải về và cài đặt Project Zero cho PHP tại Project
Zero.
• Tải Eclipse, nền tảng được sử dụng trong bài tập này.
• Tải môi trường phát triển cho PHP trong Eclipse.
Thảo luận
• Tham dự diễn đàn thảo luận Project Zero.
Bắt đầu với Project Zero, WebSphere sMash, và PHP
Trang 15 của 16
developerWorks®
ibm.com/developerWorks/vn/
Đôi nét về tác giả
Judy Taylor
Judy Taylor là một chuyện gia phần mềm mã mở trong nhóm PHP với kiến thức cơ
bản về kiểm tra phần mềm
© Copyright IBM Corporation 2009
(www.ibm.com/legal/copytrade.shtml)
Nhẫn hiệu đăng ký
(www.ibm.com/developerworks/vn/ibm/trademarks/)
Bắt đầu với Project Zero, WebSphere sMash, và PHP
Trang 16 của 16