IT Research Department @BKAP 2015 Trang 1 / 17Lab 03 Introduction to Web Application Development Mục tiêu - Thực hành với các thành phần của Web Application sử dụng Netbeans Forms, Us
Trang 1IT Research Department @BKAP 2015 Trang 1 / 17
Lab 03 Introduction to Web Application Development
Mục tiêu
- Thực hành với các thành phần của Web Application sử dụng Netbeans (Forms, User Beans)
- Biết cách sử dụng các thẻ jsp-taglib để get/set thông tin từ beans
Phần I Bài tập step by step
Bài 1.1
- Thực hành tạo một trang web đơn giản cho phép nhập profile
của người dùng (First name, Last name, Email, UserID, Pass)
- Sau khi nhập thành công hiện ra kết quả thông tin của người
dùng để view
- Sử dụng Form, Java Bean và các thẻ tag-lib của JSP
Step 1: Mở Netbeans -> New Project
Trang 3IT Research Department @BKAP 2015 Trang 3 / 17
Step 2: Netbeans sẽ tạo một ứng dụng web mới, mặc định, file
index.html sẽ là file được mở khi ứng dụng chạy trên Server Trong bài này, chúng ta config lại file đầu tiên được mở sẽ là addProfile.jsp
Trang 4Chuột phải vào AddProfile project->New JSP file
Step 3: Tạo file web deployment descriptor (web.xml) để config trang addProfile.jsp là trang mặc định
Khi tạo mới web application với Netbeans, theo mặc định file
web.xml chưa được khởi tạo (sẽ được tự động tạo khi bất kì servlet nào được tạo) Nếu không có web.xml, project sẽ được build sử dụng web.xml cung cấp bởi web server Nếu open file web.xml mặc định này chúng ta sẽ thấy có dòng config sau:
<welcome-file-list>
<welcome-file> index.html </welcome-file>
<welcome-file> index.htm </welcome-file>
<welcome-file> index.jsp </welcome-file>
</welcome-file-list>
Do đó, file index.html/index.jsp/index.htm được thiết lập sẵn là trang mặc định của project Chúng ta sẽ config lại thành addProfile.jsp như sau:
Trang 5IT Research Department @BKAP 2015 Trang 5 / 17
Chuột phải vào AddProfile project -> New Others->Standard
Deployment Descriptor
Mở file web.xml -> Pages -> Welcome Files -> Browse to addProfile.jsp
Xem source của file web.xml, sẽ xuất hiện dòng config sau:
<welcome-file-list>
Trang 6<welcome-file>addProfile.jsp</welcome-file>
</welcome-file-list>
Step 4: Tạo bean class chứa thông tin của user (userID, email,
password, first name, last name)
Chuột phải AddProfile project -> New Java Package -> model
New Java Class -> UserProfile.java
Trang 7IT Research Department @BKAP 2015 Trang 7 / 17
Tạo các private properties cho UserProfile class:
package model;
public class UserProfile {
private String firstName;
private String lastName;
private String userID;
private String userEmail;
private String userPassword;
}
Tạo các accessors methods cho các thuộc tính trên
Chuột phải class UserProfile.java->Refactoring->Encapsulate
Fields->Select All->Refactor
Trang 8Step 5: Tạo form nhập thông tin cho user trên trang addProfile.jsp
Mở Pallette (Windows Menu->IDE Tools->Pallette)
Kéo thả Form từ tab HTML Forms vào vị trí sau thẻ <body></body>, điền thông tin của form như sau:
Trang 9IT Research Department @BKAP 2015 Trang 9 / 17
Sau thẻ <form></form> insert table:
Với từng row (thẻ <tr></tr>) điền text và add Input Text ví dụ:
<tr>
<td>UserID</td>
<td><input type="text" name="userID" value="" size="30" /></td>
</tr>
Text Input Component được kéo thả vào giữa cặp thẻ <td></td> thứ
2
Làm tương tự với các row còn lại Chú ý rằng, name của các text input phải giống với name của các thuộc tính trong User Profile để có thể sử dụng các thẻ bean-taglib của JSP trong trang viewUserProfile.jsp
Sau table, thêm Button submit
Trang 10File addProfile.jsp như sau:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>Add Profile</title>
</head>
<body>
<h1>Enter user information: </h1>
<form name="Profile Input Form" action="viewUserProfile.jsp"> <table border="0" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td>User ID</td>
<td><input type="text" name="userID" value=""
size="30" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="userPassword" value="" size="30" /></td>
</tr>
<tr>
<td>Email</td>
Trang 11IT Research Department @BKAP 2015 Trang 11 / 17
<td><input type="text" name="userEmail" value="" size="30" /></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" name="firstName" value="" size="50" /></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="lastName" value="" size="50" /></td>
</tr>
</tbody>
</table>
<input type="submit" value="OK" name="btSubmit" /> </form>
</body>
</html>
Step 6: Tạo trang jsp hiển thị thông tin sau khi nhập của user:
viewUserProfile.jsp
New JSP->viewUserProfile.jsp
Trang 12Mở tab JSP trên Pallette->Thêm Use Bean vào sau thẻ <body></body>
Để hiện thông tin của người dùng, tạo một table tương tự như trang addProfile.jsp Trước table, kéo thả Set Bean Property, ví dụ:
Xoá value="" nếu Netbeans tự động add vào dòng code của thẻ
<jsp:setProperty>
Trang 13IT Research Department @BKAP 2015 Trang 13 / 17
<jsp:setProperty name="userProfileBean" property="userID" />
Làm tương tự cho tất cả các thuộc tính của UserProfile
Thêm Get Bean Property vào sau mỗi cặp thẻ <td></td> thứ 2 của row
để lấy thông tin cho từng thuộc tính của UserProfile:
<jsp:getProperty name="userProfileBean" property="userID" />
Làm tương tự cho các thuộc tính còn lại của UserProfile
Code của file viewUserProfile.jsp như sau:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>User Profile</title>
</head>
<body>
<h1>User Profile Information</h1>
<jsp:useBean id="userProfileBean" scope="session"
class="model.UserProfile" />
<jsp:setProperty name="userProfileBean" property="userID" />
Trang 14<jsp:setProperty name="userProfileBean"
property="userPassword" />
<jsp:setProperty name="userProfileBean" property="userEmail" />
<jsp:setProperty name="userProfileBean" property="firstName" />
<jsp:setProperty name="userProfileBean" property="lastName" />
<table border="0" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td>User ID</td>
<td>
<jsp:getProperty name="userProfileBean"
property="userID" />
</td>
</tr>
<tr>
<td>Password</td>
<td>
<jsp:getProperty name="userProfileBean"
property="userPassword" />
</td>
</tr>
<tr>
<td>Email</td>
Trang 15IT Research Department @BKAP 2015 Trang 15 / 17
<td>
<jsp:getProperty name="userProfileBean"
property="userEmail" />
</td>
</tr>
<tr>
<td>First Name</td>
<td>
<jsp:getProperty name="userProfileBean"
property="firstName" />
</td>
</tr>
<tr>
<td>Last Name</td>
<td>
<jsp:getProperty name="userProfileBean"
property="lastName" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
Step 7: Build và Run project
Trang 17IT Research Department @BKAP 2015 Trang 17 / 17
PHẦN 2: BÀI TẬP THỰC HÀNH
Làm Form hiển thị thông tin nhập sách gồm: Book ID, Title, Author, Published Year, Publisher Hiển thị lại thông tin đã nhập giống như bài tập step by step đã làm
HẾT