Skip to main content

[Tutorial] Hướng dẫn phát triển ứng dụng quản lý nhân viên đơn giản với JSF

Hôm nay mình lại trở lại để làm thêm một bài hướng dẫn làm ứng dụng web quản lý nhân viên, nhưng lần này mình sẽ sử dụng JSF

JSF, tên đầy đủ là JavaServer Faces, là một framework phát triển ứng dụng web Java giúp đơn giản hoá việc phát triển giao diện bằng cách sử dụng XHTML để viết mã nhằm giúp việc phát triển giao diện trở nên chặt chẽ hơn so với HTML

Để có thể thực hiện project này, bạn cần có:

Bắt đầu vào phát triển nào! 😀

Cài đặt Maven

Nếu các bạn chưa cài Maven có thể nhấn vào link bên trên để truy cập vào trang download của Maven và download bản Binary zip archive

Sau khi tải về, giải nén file zip vừa tải và chép vào thư mục nào đó (tốt nhất nên chép vào C:\ , ở đây mình chép vào D:\)

Vào search trên Windows và tìm environment variables

Nhấn Environment Variables…

Chọn dòng PATH, sau đó nhấn Edit…

Nhấn New…, sau đó trỏ vào đường dẫn thư mục bin trong thư mục Maven vừa giải nén. Sau đó nhấn OK

Sau đó khởi động lại máy tính

Kiểm tra thử Maven chạy tốt không bằng cách gõ lệnh sau vào cmd

mvn -v

Nếu màn hình cmd xuất hiện như thế này tức là đã set PATH thành công

 

Tạo project

Đầu tiên truy cập vào thư mục bạn lưu project, mở cmd bằng cách nhấn vào thanh địa chỉ gõ cmd nhấn Enter. cmd sẽ trỏ ngay vào thư mục project bạn đang mở trên File Explorer

Sau đó gõ lệnh sau vào cmd

mvn archetype:generate -DgroupId=<package name> -DartifactId=<app name> -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false

Trong đó:

  • package name: Tên Java package. VD: com.sakadream
  • app name: Tên của ứng dụng. VD: jsf

Ví dụ:
mvn archetype:generate -DgroupId=com.sakadream -DartifactId=jsf -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false

Bạn phải nhớ package nameapp name để thiết lập các file trong project

Nếu cmd hiển thị như thế này tức là tạo project thành công

Cấu trúc thư mục của Project như sau:

 

Phát triể n ứng dụng

Cấu hình pom.xml

Đầu tiên ta thêm một vài thư viện cần thiết vào file pom.xml

 

Cấu hình web.xml và faces-config.xml

Ta cấu hình src/webapp/WEB-INF/web.xml để cấu hình servlet

Tiếp theo, cấu hình src/webapp/WEB-INF/faces-config.xml để khai báo các navigation rule tương ứng với việc return của các method trong controller và outcome

 

Tạo CSDL

Sử dụng SQL Server để tạo một CSDL cho ứng dụng

 

Tạo Functions

Functions src/main/java/com/sakadream/jsf/func/Functions.java này có chức năng connect với db, các phương thức truy vấn dữ liệu, làm việc với session

 

Tạo Java Bean

Ở đây ta có 2 Java Bean: User và Employee

User.java (src/main/java/com/sakadream/jsf/bean/User.java)

Employee.java (src/main/java/com/sakadream/jsf/bean/Employee.java)

 

Tạo Controller

Ứng dụng này gồm 2 controller chính

  • LoginController (src/main/java/com/sakadream/jsf/controller/LoginController.java) có chức năng điều phối đăng nhập vào ứng dụng và được JSF quản lý với bean là login (xem tại đây)

  • EmployeeController (src/main/java/com/sakadream/jsf/controller/EmployeeController.java) có chức năng điều phối các hành động xem, thêm, xoá, sửa dữ liệu và được JSF quản lý với bean là emp (xem tại đây)

 

Tạo Validator

Điểm đặc biệt của JSF đó là bạn có thể tạo một class validator với annotation @FacesValidator và gọi FacesMessage ra view

  • EmailValidator (src/main/java/com/sakadream/jsf/validator/EmailValidator.java) để kiểm tra nhập trống và định dạng email người dùng nhập vào và được trang view JSF gọi qua giá trị đã khai báo trong annotation @FacesValidator (xem tại đây)

  • PhoneValidator (src/main/java/com/sakadream/jsf/validator/PhoneValidator.java) để kiểm tra nhập trống và định dạng số điện thoại người dùng nhập vào và được trang view JSF gọi qua giá trị đã khai báo trong annotation @FacesValidator (xem tại đây)

  • SalaryValidator (src/main/java/com/sakadream/jsf/validator/SalaryValidator.java) để kiểm tra nhập trống và định dạng tiền lương (VND) người dùng nhập vào và được trang view JSF gọi qua giá trị đã khai báo trong annotation @FacesValidator (xem tại đây)

 

Tạo Filter

Ở đây ta tạo AuthorizationFilter để hạn chế truy cập vào trang quản lý nhân viên nếu người dùng chưa đãng nhập thành công. Trong LoginController sau khi login thành công, ta ghi giá trị username vào session để nhằm mục đích này
AuthorizationFilter.java (src/main/java/com/sakadream/jsf/filter/AuthorizationFilter.java)

 

Tạo View

Ở phần view, ngoài struts tag, mình sử dụng thêm thư viện bootsfaces tạo giao diện Bootstrap. Ngoài việc hỗ trợ Bootstrap, bootsfaces còn có thêm font-awsome và dataTables

login.xhtml (src/webapp/login.xhtml)

home-guest.xhtml (src/webapp/home-guest.xhtml) trang này dùng cho guest, chỉ có thể view được toàn bộ nhân viên

home.xhtml (src/webapp/management/home.xhtml)

add.xhtml (src/webapp/management/add.xhtml)

edit.xhtml (src/webapp/management/edit.xhtml)

 

Một vài điểm thú vị của JSF

  • Bạn có thể gọi trực tiếp phương thức của controller đã được JSF quản lý qua annotation @ManagedBean
  • Sử dụng tag h:message cho 1 message h:messages cho danh sách các message để bắt FacesMassage ta viết trong controller
  • Sau khi return ra chuỗi trong controller hay sử dụng attribute outcome trong view thì JSF sẽ dựa vào đó để mapping với file faces-config.xml. Tuỳ theo view của bạn đang ở vị trí nào mà JSF sẽ chuyển trang

VD1: Ở trang login.xhtml, sau khi thực hiện xong login trong LoginController, phương thức login trả về chuỗi “home”

Nó sẽ mapping theo file faces-config.xml

Nó bắt được outcome là home , sau đó trả về view /management/home.xhtml

VD2: Ở trang login.xhtml, khi bạn nhấn nút Login as Guest mà thực tế đó là tag h:link , nó sẽ trả về outcome là home-guest được khai báo trong attribute outcome

Nó sẽ mapping theo file faces-config.xml

Nó bắt được outcome là home-guest , sau đó trả về view /home-guest.xhtml

  • Sử dụng tag f:validator validatorId="vi.tri.class.validator" để chỉ ra Validator được sử dụng với field tương ứng. Điều này rất tiện khi bạn có thể tách và viết validator một cách thoải mái hơn

Lưu ý: Bỏ tag f:validator vào bên trong field

 

Demo

Trang đăng nhập
Trang hiển thị danh sách nhân viên
Trang thêm nhân viên
Nhập trống các trường
Kiểm tra validation
Thêm nhân Viên
Thêm nhân viên mới thành công
Chỉnh sửa thông tin nhân viên
Sửa nhân viên thành công
Xoá nhân viên
Xoá nhân viên thành công
Tìm kiếm nhân viên

 

Kết

Hi vọng qua tutorial này, các bạn đã có thể bước đầu làm quen với JSF. Chúc các bạn thành công! 😀

Link GitHub của ứng dụng: https://github.com/SakaDream/JSF-Example

One thought to “[Tutorial] Hướng dẫn phát triển ứng dụng quản lý nhân viên đơn giản với JSF”

Leave a Reply

%d bloggers like this: