Tải bản đầy đủ (.pdf) (17 trang)
  1. Trang chủ
    2. >>
  2. Công Nghệ Thông Tin
    3. >>
  3. Kỹ thuật lập trình

Thực hành Java web Lab 3

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.09 MB, 17 trang )

Fundamentals of Java Enterprise Components

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

IT Research Department

@BKAP 2015

Trang 1 / 17


Fundamentals of Java Enterprise Components



IT Research Department

@BKAP 2015

Trang 2 / 17


Fundamentals of Java Enterprise Components

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.
IT Research Department

@BKAP 2015

Trang 3 / 17


Fundamentals of Java Enterprise Components

Chuộ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:
IT Research Department

@BKAP 2015

Trang 4 / 17


Fundamentals of Java Enterprise Components

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>
IT Research Department

@BKAP 2015


Trang 5 / 17


Fundamentals of Java Enterprise Components

<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

IT Research Department

@BKAP 2015

Trang 6 / 17


Fundamentals of Java Enterprise Components

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

IT Research Department

@BKAP 2015

Trang 7 / 17


Fundamentals of Java Enterprise Components

Step 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:

IT Research Department

@BKAP 2015

Trang 8 / 17


Fundamentals of Java Enterprise Components

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.
IT Research Department

@BKAP 2015

Trang 9 / 17


Fundamentals of Java Enterprise Components

File addProfile.jsp như sau:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>

<title>Add Profile</title>
</head>
<body>

Enter user information:



<form name="Profile Input Form" action="viewUserProfile.jsp">
<table border="0" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td>User ID</td>
<td>size="30" /></td>
</tr>
<tr>
<td>Password</td>
<td>value="" size="30" /></td>
</tr>
<tr>
<td>Email</td>
IT Research Department

@BKAP 2015

Trang 10 / 17


Fundamentals of Java Enterprise Components

<td>size="30" /></td>
</tr>
<tr>
<td>First Name</td>
<td>

size="50" /></td>
</tr>
<tr>
<td>Last Name</td>
<td>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

IT Research Department

@BKAP 2015

Trang 11 / 17


Fundamentals of Java Enterprise Components

Mở 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>

IT Research Department

@BKAP 2015

Trang 12 / 17


Fundamentals of Java Enterprise Components

<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>

<title>User Profile</title>
</head>
<body>

User Profile Information


class="model.UserProfile" />
<jsp:setProperty name="userProfileBean" property="userID" />

IT Research Department

@BKAP 2015

Trang 13 / 17


Fundamentals of Java Enterprise Components

property="userPassword" />
/>
/>
/>
<table border="0" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td>User ID</td>
<td>
property="userID" />
</td>

</tr>
<tr>
<td>Password</td>
<td>
property="userPassword" />
</td>
</tr>
<tr>
<td>Email</td>
IT Research Department

@BKAP 2015

Trang 14 / 17


Fundamentals of Java Enterprise Components

<td>
property="userEmail" />
</td>
</tr>
<tr>
<td>First Name</td>
<td>
property="firstName" />
</td>

</tr>
<tr>
<td>Last Name</td>
<td>
property="lastName" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
Step 7: Build và Run project

IT Research Department

@BKAP 2015

Trang 15 / 17


Fundamentals of Java Enterprise Components

IT Research Department

@BKAP 2015

Trang 16 / 17



Fundamentals of Java Enterprise Components

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

IT Research Department

@BKAP 2015

Trang 17 / 17



Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay
×