Khởi đầu các ứng dụng Java của bạn, Phần 2: Phát triển Ajax gọn nhẹ, dễ dàng ppsx

Khởi đầu các ứng dụng Java
của bạn, Phần 2: Phát triển
Ajax gọn nhẹ, dễ dàng
Xây dựng một ứng dụng web tương tác với bộ khởi đầu các ứng dụng Java của
bạn
Sing Li, Tư vấn, tác giả, Wrox Press
Tóm tắt: Tổ hợp của Eclipse, DB2® Express-C 9.5, và WebSphere® Application
Server Community Edition 2.0 — tất cả đều miễn phí để tải về, sử dụng và triển
khai — là một bộ sản phẩm từ bản mẫu đến sản xuất tuyệt vời cho mọi nhu cầu
phát triển Java™ và Java doanh nghiệp của bạn. Một điều có thể chưa hiển nhiên
lắm là bạn còn có thể sử dụng khá dễ dàng các công cụ đã qua kiểm chứng này để
tạo ra, thử nghiệm, và triển khai các ứng dụng hàng đầu gọn nhẹ. Hướng dẫn này
chỉ dẫn cho bạn đi qua các bước phát triển một ứng dụng quản lý nguồn nhân lực
nhỏ, trước tiên bằng cách sử dụng công nghệ dựa trên JavaServer Pages (JSP)
truyền thống và sau đó di chuyển nó đến một giải pháp tương tác cao là sử dụng
Ajax.
Trước khi bạn bắt đầu
Sự tích hợp chặt chẽ giữa các công cụ miễn phí tạo thành bộ khởi đầu các ứng
dụng Java của bạn: Eclipse, DB2 Express-C 9.5, và WebSphere Application
Server Community Edition 2.0 (gọi tắt là Máy chủ ứng dụng) đã đáp ứng tốt các
nhu cầu của các nhà phát triển ứng dụng Java EE và các dịch vụ web. Đi đôi với
hướng dẫn này là hướng dẫn, Khởi đầu các ứng dụng Java của bạn, Phần 1: Phần
mềm miễn phí, phát triển nhanh chóng, trình bày về cách các công cụ này làm việc
cùng nhau như thế nào để phát triển phần mềm Java EE.
Ngày càng có nhiều nhà phát triển Java đang thử nghiệm các giao diện người dùng
trên nền web tương tác cao, bao gồm các lựa chọn mà không đòi hỏi phải sử dụng
một thùng chứa Java EE truyền thống. Những khám phá như vậy thường bắt bạn
phải học thêm một ngôn ngữ lập trình chưa qua kiểm chứng, phải làm việc với
công cụ có mức chất lượng beta, và đặt cược vào công nghệ triển khai chưa qua
thử thách với thời gian.
Thật bất ngờ cho bạn khi biết được rằng bộ công cụ mạnh, làm ra sản phẩm thực

sự, do IBM hậu thuẫn miễn phí mà bạn đang dùng cho các nhiệm vụ phát triển
Java EE cũng có thể là người bạn tốt nhất của bạn trong việc khám phá lĩnh vực
phát triển giao diện người dùng thay thế. Tin tức tuyệt vời nhất là ở chỗ tất cả các
mã chương trình của bạn — gọn nhẹ hay truyền thống — có thể tận dụng ưu thế
của tập hợp đặc tính dễ sử dụng, phong phú của Eclipse, sự hoàn thiện và mạnh
mẽ của DB2 Express-C, và hỗ trợ triển khai cấp thế giới của Máy chủ ứng dụng.
Hướng dẫn này cho bạn thấy làm thế nào để di chuyển một ứng dụng từ một thiết
kế truyền thống tới một thiết kế dựa trên công nghệ JavaScript không đồng bộ
(Asynchronous JavaScript) và XML (Ajax) — tất cả nằm trong môi trường thân
thiện và quen thuộc của bộ khởi đầu ứng dụng Java của bạn.
Bộ tập hợp phần mềm khởi đầu
Để khởi đầu các ứng dụng Java của bạn, IBM đã gộp một tổ hợp mạnh các thành
phần phần mềm có sẵn miễn phí với nhau để truy cập dữ liệu, phát triển và triển
khai ứng dụng:
 Máy chủ cơ sở dữ liệu DB2 Express-C 9.5
 Máy chủ ứng dụng WebSphere phiên bản cộng đồng 2.0
 Môi trường phát triển tích hợp Eclipse (Eclipse IDE)
Bạn không bị buộc phải sử dụng những gói này trong tổ hợp như trên; mỗi gói đều
làm việc được với nhiều thành phần dựa trên các chuẩn mở khác nhau. Bạn có thể
sử dụng Eclipse với các máy chủ ứng dụng khác (kể cả không phải Java) và các cơ
sở dữ liệu khác. Máy chủ ứng dụng không đòi hỏi DB2 Express-C 9.5 hay Eclipse.
Và DB2 Express-C 9.5 có thể phù hợp với các môi trường phát triển và triển khai
khác với Eclipse và Máy chủ ứng dụng. Nhưng, rồi bạn sẽ hiểu đầy đủ từ hướng
dẫn này, khi sử dụng bộ tích hợp chặt chẽ như một tổng thể nói trên, bạn sẽ có rất
nhiều thuận lợi.
Thông tin về hướng dẫn này
Bạn sẽ bắt đầu hướng dẫn này bằng cách tạo ra một bảng thông tin nhân viên, sử
dụng công nghệ JSP và servlet tiêu chuẩn. Bạn sẽ làm tất cả các công việc phát
triển và thử nghiệm bằng cách sử dụng bộ khởi đầu các ứng dụng Java. Bạn sẽ
thiết kế các ứng dụng trong Eclipse và sau đó triển khai và thử nghiệm nó trên

Máy chủ ứng dụng. Các ứng dụng sẽ tìm về và hiển thị thông tin nhân viên, bao
gồm cả hình ảnh, từ một cơ sở dữ liệu DB2 Express-C 9.5 theo chế độ tương tác.
Sau đó, hướng dẫn này thảo luận về một số hạn chế trong thiết kế ứng dụng JSP và
chỉ ra cách làm thế nào để một giải pháp dựa trên Ajax nhẹ có thể giúp để vượt
qua các hạn chế này. Hướng dẫn này cũng giới thiệu các khái niệm Ajax cơ bản và
một bộ dụng cụ Java phổ biến có tên là Web trực tiếp từ xa (Direct Web Remoting
- DWR) (xem Tài nguyên). Bạn sẽ chuyển đổi ứng dụng sang một thiết kế nhẹ.
Các ứng dụng được thiết kế lại nằm trong một trang HTML, lưu trú trên Máy chủ
ứng dụng hoạt động như một máy chủ Web đơn giản, truy cập trực tiếp thông tin
cơ sở dữ liệu DB2 Express C sử dụng Ajax và tuần tự hóa ký pháp đối tượng
JavaScript (JavaScript Object Notation - JSON).
Hướng dẫn này dẫn dắt bạn qua:
 Việc phát triển một bảng thông tin - nhân viên, sử dụng các công nghệ JSP
và servlet truyền thống
 Xử lý hiển thị các hình ảnh GIF từ các trường đối tượng lớn nhị phân
(BLOB) của DB2 bằng một servlet tùy biến
 Được giới thiệu về Ajax và Web trực tiếp từ xa (Direct Web Remoting)
 Chuyển bảng thông tin -nhân viên sang một thiết kế Ajax nhẹ
 Viết mã hỗ trợ phía Java cho ứng dụng mới
 Viết mã JavaScript, sử dụng thư viện các tiện ích DWR
 Thử nghiệm bảng thông tin - nhân viên tương tác mới
Kết thúc hướng dẫn này, bạn sẽ đánh giá được một số khác biệt cơ bản giữa việc
thiết kế ứng dụng Java EE truyền thống và cách tiếp cận dựa trên Ajax tương tác
cao. Bạn cũng sẽ trở nên thoải mái khi sử dụng bộ Khởi đầu các ứng dụng Java để
khám phá các khung công tác phát triển trên nền Java hiện tại và tương lai.


Các điều kiện cần có trước
Bạn cần phải quen thuộc với việc phát triển Java nói chung và phát triển Java phía
máy chủ nói riêng. Hướng dẫn này giả định bạn biết rõ các khái niệm triển khai

Java EE cơ bản, ví dụ như các mô tả triển khai và tệp lưu trữ WAR. Bạn cũng cần
phải quen thuộc với việc lập trình JSP và sử dụng các thư viện thẻ, như Thư viện
thẻ tiêu chuẩn của các trang JavaServer (JavaServer Pages Standard Tag Library -
JSTL). Hướng dẫn này giả định rằng bạn hiểu các hoạt động chung của một cơ sở
dữ liệu quan hệ và đã lập trình các ứng dụng JDBC. Nó cũng giả định rằng bạn đã
hoàn thành việc tìm hiểu hướng dẫn Khởi đầu các ứng dụng Java của bạn: Phần
mềm miễn phí, phát triển nhanh chóng.


Các yêu cầu hệ thống
Để làm theo và thử nghiệm các đoạn mã cho hướng dẫn này, bạn cần các bản cài
đặt phần mềm đang hoạt động:
 Bản cập nhật 15 Java SE JDK 5 của Sun hoặc bản IBM SDK cho Java
phiên bản 5 SR6 hoặc mới hơn.
 Bộ khởi đầu các ứng dụng Java của bạn:
o DB2 Express-C 9.5
o Máy chủ ứng dụng phiên bản 2.0.0.1
o Eclipse 3.3 và bộ chuyển đổi máy chủ cho WTP cho Máy chủ ứng
dụng V.2.0
Để có một cấu hình đúng, bạn cần làm theo các chỉ dẫn tải về và cài đặt chi
tiết cho các thành phần này trong các phần có liên quan trong Khởi đầu các
ứng dụng Java của bạn: Phần mềm miễn phí, phát triển nhanh chóng.
 Ứng dụng danh sách-nhân viên do bạn đã xây dựng trong phần Khởi đầu
các ứng dụng Java của bạn: Phần mềm miễn phí, phát triển nhanh chóng.
 Cơ sở dữ liệu Sample DB2 Express-C 9.5.
 DWR. Các chỉ dẫn chi tiết để thử nghiệm với DWR có trong hướng dẫn
này.
Cấu hình phần cứng hệ thống được đề nghị để thử nghiệm hướng dẫn này là:
 Một hệ thống hỗ trợ JDK / JRE được liệt kê ở trên có ít nhất 1 GB bộ nhớ
chính (nên có 2GB).

 Thêm ít nhất 10MB dung lượng đĩa còn trống để cài đặt các thành phần
phần mềm và các ví dụ.
Các chỉ dẫn trong hướng dẫn này dựa trên hệ điều hành Windows®. Tất cả các
công cụ và kỹ thuật bao gồm trong hướng dẫn này cũng làm việc trên các hệ thống
Linux® và Unix®.
Tổng quan
Hướng dẫn này xây dựng trên nền tảng khái niệm và cấu hình hệ thống của bài
Khởi đầu các ứng dụng Java của bạn: Phần mềm miễn phí, phát triển nhanh chóng.
Bạn sẽ sử dụng Eclipse để tạo ra hai phiên bản của một ứng dụng quản lý nguồn
nhân sự để truy cập tương tác thông tin nhân viên được lưu trữ trong một cá thể
DB2 Express-C 9.5 và bạn sẽ sử dụng Máy chủ ứng dụng để triển khai các ứng
dụng.
Trong bài Khởi đầu các ứng dụng Java của bạn: Phần mềm miễn phí, phát triển
nhanh chóng, bạn đã:
 Tải về và cài đặt DB2 Express-C 9.5, Máy chủ ứng dụng, Eclipse, và bộ
chuyển đổi máy chủ WTP cho Máy chủ ứng dụng.
 Cài đặt một cơ sở dữ liệu mẫu, do bản cài đặt DB2 Express-C 9.5 cung cấp,
có chứa thông tin nhân viên.
 Triển khai một pool cơ sở dữ liệu do máy chủ quản lý trong Máy chủ ứng
dụng.
 Cấu hình khung nhìn Data Source Explorer tích hợp trong Eclipse để truy
cập vào các lược đồ và các nội dung bảng của cơ sở dữ liệu mẫu DB2.
 Viết mã một ứng dụng JSP để truy cập cơ sở dữ liệu mẫu DB2 để liệt kê
thông tin nhân viên, sử dụng hỗ trợ phát triển ứng dụng Web, Web Tools
Platform (WTP) của Eclipse.
 Triển khai ứng dụng JSP lên Máy chủ ứng dụng để thử nghiệm, sử dụng bộ
chuyển đổi máy chủ cho nền các công cụ Web (Web Tools Platform –
WTP) cho Máy chủ ứng dụng.
 Thử nghiệm ứng dụng JSP bằng cách triển khai nó trong một cài đặt hiện
có của Máy chủ ứng dụng.

Bắt đầu với ứng dụng đơn giản do bạn đã tạo ra trong bài Khởi đầu các ứng dụng
Java của bạn: Phần mềm miễn phí, phát triển nhanh chóng, hướng dẫn này bổ sung
thêm một trang JSP mới để cho phép bạn truy vấn tương tác thông tin nhân viên từ
cơ sở dữ liệu DB2. Không giống như ứng dụng gốc ban đầu, trong đó liệt kê thông
tin về tất cả các nhân viên trong một bảng, ứng dụng JSP này hiển thị một bản ghi
thông tin nhân viên mỗi lần.
Các thông tin được hiển thị bao gồm ảnh của nhân viên, như thấy trong Hình 1:

Hình 1. Ứng dụng hiển thị thông tin nhân viên tương tác

Để hiển thị một ảnh, một servlet chuyên dụng truy vấn cơ sở dữ liệu DB2 tìm các
dữ liệu hình ảnh nhị phân được lưu trữ trong các trường BLOB và sau đó chuyển
bức ảnh tới trình duyệt như là một hình ảnh. Các dụng cụ phát triển ứng dụng và
thử nghiệm của nền các công cụ Web của Eclipse giúp bạn tạo ra servlet này
nhanh chóng.
Tính tương tác của thiết kế này bị hạn chế, và nó không thể đối phó với một cơ sở
dữ liệu nhân viên lớn hơn, do đó, tôi sẽ giới thiệu một giải pháp tốt hơn để giải
quyết các thiếu sót này nhờ áp dụng các kỹ thuật Ajax nhẹ hiện đại.
Tạo ứng dụng thông tin nhân viên dựa trên JSP
Bản đầu tiên của ứng dụng sẽ hiển thị một thông tin của nhân viên, bao gồm cả
ảnh của họ nếu có, như thấy trong Hình 1. Người sử dụng chọn các thông tin nhân
viên cần hiển thị, từ một danh sách thả xuống các tên nhân viên. Trong Hình 1,
bản ghi nhân viên của Adamson Bruce được chọn và hiển thị.
Cách dễ nhất để tạo ra ứng dụng này là sửa đổi dự án từ bài Khởi đầu các ứng
dụng Java của bạn: Phần mềm miễn phí, phát triển nhanh chóng. Hình 2 cho thấy
các dự án trong IDE Eclipse từ hướng dẫn này:

Hình 2. Dự án dwapp gốc trong Eclipse hiển thị một bảng nhân viên

Bắt đầu từ dự án dwapp được hiển thị trong Hình 2, bạn sẽ thêm vào hoặc sửa đổi

các thành phần ứng dụng Web trong bảng 1:

Bảng 1. Các thành phần của ứng dụng Web về thông tin nhân viên
Thành phần Mô tả
employee.jsp
Một trang JSP không có kịch bản lệnh (không nhúng mã Java).
Nó x
ử lý tương tác của người dùng và sử dụng các thẻ JSTL
SQL để truy vấn các thông tin của cơ sở dữ liệu DB2. Bạn nên
thêm thành phần này.
ShowPhoto.java
servlet
Một Java servlet để truy vấn cơ sở dữ liệu DB2 tìm thông tin
ảnh
nhân viên. Các ảnh nhân viên được lưu trữ theo nhiều định dạng
trong cơ sở dữ liệu, trong các trường BLOB. Ở đây chỉ có các
định dạng ảnh GIF được sử dụng. Servlet này viết kết quả đầu ra
của nó theo một định dạng luồng tương thích với kiểu MIME,
đúng yêu cầu của phần tử hiển thị <IMG> của trình duyệt . Việc
truy cập cơ sở dữ liệu được thực hiện thông qua một nguồn dữ
liệu hệ thống, nhận được qua giao diện thư mục và đặt tên của
Java (Java Naming and Directory Interface - JNDI) và được hỗ
trợ bởi pool cơ sở dữ liệu toàn hệ thống đã cấu hình trên Máy
chủ ứng dụng trong bài Khởi đầu các ứng dụng Java của bạn:
Phần mềm miễn phí, phát triển nhanh chóng. Bạn nên thêm
thành phần này.
dwstyles.css
Bạn sẽ sửa đổi phiếu định kiểu (stylesheet) này để xử lý định
dạng bổ sung cho trang employee.jsp mới.

Làm thế nào để cho các thành phần ứng dụng phù hợp với nhau
Hình 3 cho thấy cách các thành phần ứng dụng phù hợp với nhau như thế nào:

Hình 3. Cấu trúc của ứng dụng thông tin - nhân viên

Thành phần employee.jsp sinh ra trang web có chứa giao diện người dùng. Trang
web đã tạo ra này được trình bày trên trình duyệt của người dùng. Người sử dụng
tương tác với trang đã trình bày để truy vấn thông tin nhân viên bằng cách đệ trình
một biểu mẫu (form) HTML. JSP xử lý dữ liệu biểu mẫu đã đệ trình và tìm thông
tin nhân viên từ cơ sở dữ liệu. JSP sau đó tạo ra và trả về một trang web chứa các
thông tin ấy. Ảnh nhân viên dưới định dạng GIF được tạo ra riêng biệt, do
ShowPhoto servlet thực hiện. Servlet này nhận các dữ liệu hình ảnh từ cùng một
cơ sở dữ liệu DB2 Express-C 9.5.


Sử dụng bộ khởi đầu các ứng dụng Java của bạn để mã hoá, thử nghiệm và triển
khai các ứng dụng
Hình 4 cho thấy bộ khởi đầu trợ giúp tạo ra ứng dụng này như thế nào:

Hình 4. Phát triển ứng dụng bằng các công cụ miễn phí

Bạn sẽ viết mã cho ứng dụng trong Eclipse và sử dụng một cá thể của Máy chủ
ứng dụng do Eclipse điều khiển để triển khai và thử nghiệm ứng dụng đó.
Thành phần JSP của ứng dụng truy cập vào cơ sở dữ liệu mẫu của DB2 Express-C
9.5 thông qua một pool JDBC do Máy chủ ứng dụng quản lý. Thành phần servlet
của ứng dụng cũng sử dụng cùng pool được quản lý ấy để truy cập vào các trường
BLOB từ cơ sở dữ liệu, chuyển đổi chúng thành thông tin đồ họa để hiển thị như
là các ảnh của nhân viên trong trình duyệt.

JSP lựa chọn nhân viên
Bắt đầu từ dự án dwapp trong Eclipse như thấy trong Hình 2, nhấn chuột phải vào
thư mục WebContent trong khung nhìn Navigator và chọn New > Other (hoặc
ấn Ctrl+N). Chọn Web > JSP từ thủ thuật New, như hiển thị trong Hình 5:

Hình 5. Tạo ra một JSP mới, sử dụng thủ thuật New của Eclipse

Nhấn Next và sau đó nhập tên của JSP mới là employee.jsp. Nhấn vào Finish để
hoàn thành việc tạo ra mẫu JSP ban đầu.
Bây giờ, biên tập JSP đã tạo ra bằng cách thêm đoạn mã được in đậm như hiển thị
trong Listing 1:

Listing 1. Thành phần employee.jsp để xử lý các tương tác giao diện người sử
dụng

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="sql" uri=" %>
<%@ taglib prefix="c" uri="
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="dwstyles.css"/>
<title>dW Example Employee Information from DB2 Express C Table</title>

</head>
<body>
<h1>DB2 Employee Information</h1>

<br/>
<c:url value="/employee.jsp" var="empURL"/>
<form action="${empURL}" method="get">
<table>
<tr>

<td colspan="2">
<select name="empno">
<sql:query var="employees" dataSource="jdbc/DataSource">
SELECT * FROM EMPLOYEE ORDER BY LASTNAME
</sql:query>

<c:forEach var="employee" items="${employees.rows}">
<option value="${employee.empno}">${employee.lastname},
${employee.firstnme}</option>
</c:forEach>
</select>
</td>
<td>
<input type="submit" value="find employee"/>
</td>
</tr>


<c:if test="${!(empty param.empno)}">
<tr>
<sql:query var="selected" dataSource="jdbc/DataSource">
SELECT * FROM EMPLOYEE WHERE EMPNO='${param.empno}'
</sql:query>
<c:forEach var="employee" items="${selected.rows}">

<tr>
<td colspan="3" class="name">
${employee.lastname}, ${employee.firstnme}
<br/>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<table>
<tr>
<td class="label">Employee
number:</td><td>${employee.empno}</td>
</tr>
<tr>
<td class="label">Position:</td><td>${employee.job}</td>
</tr>
<tr>
<td class="label">Hired:</td><td>${employee.hiredate}</td>
</tr>
<tr>
<td class="label">Department:</td><td>${employee.workdept}</td>
</tr>
<tr>
<td class="label">Phone number:</td><td>${employee.phoneno}</td>

</tr>
<tr>
<td class="label">Salary:</td><td>$${employee.salary}</td>
</tr>
<tr>

<td class="label">Bonus:</td><td>${employee.bonus}</td>
</tr>

</table>
</td>
<td>
<c:url value="/ShowPhoto" var="photoURL">
<c:param name="empno" value="${param.empno}" />
</c:url>
<img {photoURL}"/>
</td>
</c:forEach>
</tr>
</c:if>

</table>
</form>
</body>
</html>

Tuân theo cách làm JSP tốt nhất, employee.jsp không chứa mã Java nhúng; việc
tạo ra tất cả mã động được xử lý qua JSTL và Expression Language (EL).


employee.jsp hoạt động như thế nào
Hình 1 chỉ ra cách bố trí của employee.jsp. Một danh sách thả xuống — một phần
tử HTML <select> — duy trì danh sách các tên nhân viên.
Người sử dụng chọn bất kỳ một trong những nhân viên từ danh sách và nhấn vào
nút find employee. Thông tin chi tiết về nhân viên được chọn sau đó sẽ hiển thị,
cùng với một bức ảnh của nhân viên đó nếu có. (Không phải tất cả các nhân viên

đều có sẵn một ảnh trong cơ sở dữ liệu DB2 mẫu).
Trong employee.jsp, sử dụng mã JSTL trong Listing 2 để tạo ra danh sách thả
xuống:

Listing 2. Tạo ra các tên nhân viên động để lựa chọn

<select name="empno">
<sql:query var="employees" dataSource="jdbc/DataSource">
SELECT * FROM EMPLOYEE ORDER BY LASTNAME
</sql:query>
<c:forEach var="employee" items="${employees.rows}">
<option value="${employee.empno}">${employee.lastname},
${employee.firstnme}</option>
</c:forEach>
</select>

Bạn sử dụng thẻ JSTL SQL <sql:query> để thực hiện một truy vấn lựa chọn tất cả
các bản ghi nhân viên từ cơ sở dữ liệu DB2. Điều này tương tự như truy vấn đã
được bạn sử dụng trong ví dụ Khởi đầu các ứng dụng Java của bạn: Phần mềm
miễn phí, phát triển nhanh chóng. Lần này, thông tin nhân viên được trả về theo
tên họ được sắp xếp theo thứ tự chữ cái abc (nhờ mệnh đề ORDER BY
LASTNAME trong truy vấn SQL) để làm cho việc lựa chọn các tên từ danh sách
thả xuống dễ dàng hơn.
Bạn thực hiện truy vấn SQL đối với jdbc/DataSource Việc này được cấu hình
trong kế hoạch triển khai geronimo-web.xml của ứng dụng và trỏ tới pool cơ sở dữ
liệu toàn hệ thống có tên là dwDatasource, đã được cấu hình trên Máy chủ ứng
dụng.
Sau đó, bạn sử dụng thẻ vòng lặp <c:forEach> để lặp theo danh sách các nhân viên
được chọn mỗi lần một hàng. Một thẻ HTML <option> được tạo ra cho mỗi nhân
viên. Giá trị của <option> là một số nhân viên và văn bản được hiển thị là họ và

tên của nhân viên. Ví dụ, <option> được tạo ra cho Bruce Adamson là:
<option value="000150">ADAMSON, BRUCE</option>

Toàn bộ phần tử <select> tồn tại bên trong một thẻ HTML <form> bao quanh, như
hiển thị bằng chữ đậm trong Listing 3:

Listing 3. Danh sách <select> bên trong phần tử <form>

<c:url value="/employee.jsp" var="empURL"/>
<form action="${empURL}" method="get">
<table>
<tr>

<td colspan="2">
<select name="empno">

</select>
</td>
<td>
<input type="submit" value="find employee"/>
</td>
</tr>

</table>
</form>


Thẻ tạo ra liên kết URL <c:url> tạo ra một URL có định dạng đúng cho bạn, trỏ
ngược lại tới chính employee.jsp này để xử lý biểu mẫu. URL này được đặt trong
một biến gọi là empURL và được sử dụng trong thuộc tính hành động của thẻ

<c:form>.
Khi người sử dụng lựa chọn một nhân viên — ví dụ, Bruce Adamson
(empno=000150) — và nhấn vào nút find employee, thông tin biểu mẫu này được
đệ trình ngược lại tới employee.jsp để xử lý bằng URL này:
http://localhost:8080/dwapp/employee.jsp?empno=000150

Xử lý đệ trình biểu mẫu HTML
Trang employee.jsp có hai vai trò:
 Để hiển thị danh sách các nhân viên để lựa chọn
 Để xử lý việc đệ trình biểu mẫu sau khi một nhân viên được chọn
Để xác định xem việc đệ trình biểu mẫu đã được thực hiện chưa, bạn cần phải
kiểm tra xem có tồn tại một tham số empno HTTP GET không. Bạn có thể sử
dụng toán tử empty trong JSTL cho việc kiểm tra này. Mã lệnh để trình bày thông
tin và ảnh nhân viên được bao trong dấu ngoặc bằng một thẻ <c:if> để thực hiện
phép kiểm tra này. Đoạn mã này được hiển thị trong Listing 4:

Kiểm tra sự tồn tại của tham số biểu mẫu empno

<c:if test="${!(empty param.empno)}">
<tr>
<sql:query var="selected" dataSource="jdbc/DataSource">
SELECT * FROM EMPLOYEE WHERE EMPNO='${param.empno}'
</sql:query>
<c:forEach var="employee" items="${selected.rows}">

</c:forEach>
</tr>
</c:if>

Nếu yêu cầu HTTP đầu vào không có tham số empno, thì không có thông tin chi
tiết nhân viên nào được tạo ra.
Để tạo thông tin chi tiết nhân viên, một <sql:query> khác được thực hiện đối với
bảng EMPLOYEE (nhân viên). Lệnh SELECT này bây giờ xác định chính xác
một nhân viên có số hiệu nhân viên tương ứng. Đối tượng ẩn JSTL, param, được
sử dụng để trình bày giá trị tham số empno đầu vào trong lệnh SELECT như thấy
trong Listing 5:

Listing 5. Nhận được bản ghi của một nhân viên khi sử dụng một truy vấn
SQL được tạo ra động

<c:if test=""${!(empty param.empno)}">
<tr>
<sql:query var="selected" dataSource="jdbc/DataSource">
SELECT * FROM EMPLOYEE WHERE EMPNO='${param.empno}'
</sql:query>
<c:forEach var="employee" items="${selected.rows}">

</c:forEach>
</tr>
</c:if>

Mặc dù một cấu trúc <c:forEach> được sử dụng ở đây, bạn đang làm việc với chỉ
một hàng (vì mỗi nhân viên chỉ có một số nhân viên duy nhất). Cấu trúc JSTL này
làm đơn giản hoá việc truy cập vào dữ liệu hàng trong tập kết quả được trả về. Để
tạo ra thông tin văn bản, biến employee thiết lập bằng <c:forEach> có thể được sử
dụng trực tiếp. Ví dụ, biểu thức EL sau đây tạo ra số điện thoại của nhân viên
trong cấu trúc <c:forEach>:
${employee.phoneno}

Để tạo ra ảnh nhân viên, bạn sử dụng một thẻ HTML <img> Sử dụng thẻ JSTL
<c:url> tạo ra URL hiển thị hình ảnh này:
<c:url value="/ShowPhoto" var="photoURL">
<c:param name="empno" value="${param.empno}" />
</c:url>
<img L}"/>

Ví dụ, thẻ <img> được tạo ra có hiệu lực cho Bruce Adamson (có empno là
00150) là:
<img src="http://localhost:8080/dwapp/ShowPhoto?empno=00150"/>

Điều này có nghĩa là URL sau phải tạo ra một luồng bit để biểu diễn ảnh của nhân
viên:
http://localhost:8080/dwapp/ShowPhoto?empno=00150

servlet ShowPhoto.java tạo ra luồng bit của ảnh.


Hiển thị ảnh từ các trường BLOB DB2
Các bức ảnh nhân viên được lưu trữ trong bảng EMP_PHOTO của cơ sở dữ liệu
mẫu DB2. Bảng 2 mô tả các trường của bảng này:

Bảng 2. Các trường của bảng EMP_PHOTO
Tên trường

Mô tả
empno Số hiệu nhân viên của nhân viên tương ứng.
photo_format

Định dạng của ảnh. Các ảnh được lưu trữ theo nhiều định dạng để

giúp cho việc hiển thị hình ảnh dễ dàng hơn mà không cần mã
chuyển đổi phức tạp. Ứng dụng này chỉ sử dụng cho các ảnh có định
dạng GIF.
picture
Các bit nhị phân của hình ảnh, được lưu giữ trong một trường
BLOB. Kích thước lớn nhất của trường này là 102.400 byte.
Để tạo servlet ShowPhoto.java trong IDE Eclipse, đầu tiên hãy điểm sáng
WebContent và chọn New > Other (hoặc ấn Ctrl+N). Chọn Web > Servlet
trong trình thủ thuật New. Nhập com.ibm.dw làm tên gói Java Package và
ShowPhoto làm tên lớp, như được hiển thị trong Hình 6:

Hình 6. Tạo một servlet mới bằng trình thủ thuật Create Servlet của WTP
Eclipse

Nhấn Next. Trên màn hình kế tiếp, bạn có thể thiết lập phép ánh xạ URL cho
servlet. Phép ánh xạ URL này sẽ được đặt tự động vào trong bộ mô tả triển khai
web.xml của ứng dụng dưới dạng một phần tử <servlet-mapping>. Trong trường
hợp này, bạn có thể giữ nguyên phép ánh xạ mặc định tới /ShowPhoto. Nhấn vào
Finish.
Nếu bạn nhìn vào khung nhìn Navigator, bạn sẽ thấy tệp tin
com.ibm.dw.ShowPhoto.java trong thư mục src, bên ngoài thư mục WebContent.
WTP Eclipse giữ mã nguồn ở đây để dễ dàng bảo trì và tổ chức, nhưng sao chép
các tệp tin lớp được biên dịch vào đúng vị trí trong thư mục WEB-INF/classes để
triển khai ứng dụng Web tự động.
Các bước mà bạn vừa thực hiện xong tạo ra một khung sườn servlet trong
ShowPhoto.java. Bây giờ hãy sửa đổi mã nguồn bằng cách thêm các dòng chữ
đậm như hiển thị trong Listing 6:

Listing 6. Mã lệnh bổ sung thêm cho servlet ShowPhoto.java

package com.ibm.dw;

import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

import javax.naming.InitialContext;
import javax.naming.NamingException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.sql.DataSource;

/**
* Servlet implementation class for Servlet: ShowPhoto
*
*/
public class ShowPhoto extends javax.servlet.http.HttpServlet
implements javax.servlet.Servlet {
public ShowPhoto() {
super();
}

protected void doGet(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
String query = "select picture from emp_photo where

photo_format='gif' and empno='"
+ request.getParameter("empno") + "'";

DataSource dsource = null;