Thực hành Java web Lab 3

Fundamentals of Java Enterprise Components Lab 03 Introduction to Web Application Development Mục tiêu - Thực hành với thành phần Web Application sử dụng Netbeans (Forms, User Beans) - Biết cách sử dụng 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 trang web đơn giản cho phép nhập profile người dùng (First name, Last name, Email, UserID, Pass) - Sau nhập thành công kết thông tin người dùng để view - Sử dụng Form, Java Bean thẻ tag-lib JSP Step 1: Mở Netbeans -> New Project IT Research Department @BKAP 2015 Trang / 17 Fundamentals of Java Enterprise Components IT Research Department @BKAP 2015 Trang / 17 Fundamentals of Java Enterprise Components Step 2: Netbeans tạo ứng dụng web mới, mặc định, file index.html file mở ứng dụng chạy Server Trong này, config lại file mở addProfile.jsp IT Research Department @BKAP 2015 Trang / 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 trang mặc định Khi tạo web application với Netbeans, theo mặc định file web.xml chưa khởi tạo (sẽ tự động tạo servlet tạo) Nếu khơng có web.xml, project build sử dụng web.xml cung cấp web server Nếu open file web.xml mặc định thấy có dòng config sau: index.html index.htm index.jsp Do đó, file index.html/index.jsp/index.htm thiết lập sẵn trang mặc định project Chúng ta config lại thành addProfile.jsp sau: IT Research Department @BKAP 2015 Trang / 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 file web.xml, xuất dòng config sau: IT Research Department @BKAP 2015 Trang / 17 Fundamentals of Java Enterprise Components addProfile.jsp Step 4: Tạo bean class chứa thông tin 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 / 17 Fundamentals of Java Enterprise Components Tạo 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 accessors methods cho thuộc tính Chuột phải class UserProfile.java->Refactoring->Encapsulate Fields>Select All->Refactor IT Research Department @BKAP 2015 Trang / 17 Fundamentals of Java Enterprise Components Step 5: Tạo form nhập thông tin cho user trang addProfile.jsp Mở Pallette (Windows Menu->IDE Tools->Pallette) Kéo thả Form từ tab HTML Forms vào vị trí sau thẻ , điền thông tin form sau: IT Research Department @BKAP 2015 Trang / 17 Fundamentals of Java Enterprise Components Sau thẻ insert table: Với row (thẻ ) điền text add Input Text ví dụ: UserID Text Input Component kéo thả vào cặp thẻ thứ Làm tương tự với row lại Chú ý rằng, name text input phải giống với name thuộc tính User Profile để sử dụng thẻ bean-taglib JSP trang viewUserProfile.jsp Sau table, thêm Button submit IT Research Department @BKAP 2015 Trang / 17 Fundamentals of Java Enterprise Components File addProfile.jsp sau: Add Profile Enter user information: User ID Password Email IT Research Department @BKAP 2015 Trang 10 / 17 Fundamentals of Java Enterprise Components First Name Last Name Step 6: Tạo trang jsp hiển thị thông tin sau nhập user: viewUserProfile.jsp New JSP->viewUserProfile.jsp IT Research Department @BKAP 2015 Trang 11 / 17 Fundamentals of Java Enterprise Components Mở tab JSP Pallette->Thêm Use Bean vào sau thẻ Để thông tin người dùng, tạo table tương tự trang addProfile.jsp Trước table, kéo thả Set Bean Property, ví dụ: Xố value="" Netbeans tự động add vào dòng code thẻ IT Research Department @BKAP 2015 Trang 12 / 17 Fundamentals of Java Enterprise Components Làm tương tự cho tất thuộc tính UserProfile Thêm Get Bean Property vào sau cặp thẻ thứ row để lấy thơng tin cho thuộc tính UserProfile: Làm tương tự cho thuộc tính lại UserProfile Code file viewUserProfile.jsp sau: User Profile User Profile Information IT Research Department @BKAP 2015 Trang 13 / 17 Fundamentals of Java Enterprise Components User ID Password Email IT Research Department @BKAP 2015 Trang 14 / 17 Fundamentals of Java Enterprise Components First Name Last Name Step 7: Build 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 tập step by step làm HẾT IT Research Department @BKAP 2015 Trang 17 / 17 ... JSP file Step 3: Tạo file web deployment descriptor (web. xml) để config trang addProfile.jsp trang mặc định Khi tạo web application với Netbeans, theo mặc định file web. xml chưa khởi tạo (sẽ... web. xml chưa khởi tạo (sẽ tự động tạo servlet tạo) Nếu khơng có web. xml, project build sử dụng web. xml cung cấp web server Nếu open file web. xml mặc định thấy có dòng config sau: ... project -> New Others->Standard Deployment Descriptor Mở file web. xml -> Pages -> Welcome Files -> Browse to addProfile.jsp Xem source file web. xml, xuất dòng config sau: