xây dựng phần mềm quản lý nhà hàng với bộ công cụ jsf, primefaces và hibernate

TRƯỜNG ĐẠI HỌC CẦN THƠ
KHOA CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG
BỘ MÔN TIN HỌC ỨNG DỤNG
----------

LUẬN VĂN TỐT NGHIỆP ĐẠI HỌC

XÂY DỰNG PHẦN MỀM QUẢN LÝ
NHÀ HÀNG VỚI BỘ CÔNG CỤ JSF,
PRIMEFACES VÀ HIBERNATE
Sinh viên thực hiện:

Cán bộ hướng dẫn:

Cô Thanh Thiện
MSSV: 1117885

TS. Nguyễn Hữu Hòa

Cần Thơ, 2015


TRƯỜNG ĐẠI HỌC CẦN THƠ
KHOA CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG
BỘ MÔN TIN HỌC ỨNG DỤNG
----------

LUẬN VĂN TỐT NGHIỆP ĐẠI HỌC

XÂY DỰNG PHẦN MỀM QUẢN LÝ
NHÀ HÀNG VỚI BỘ CÔNG CỤ JSF,

PRIMEFACES VÀ HIBERNATE
Sinh viên thực hiện:

Cán bộ hướng dẫn:

Cô Thanh Thiện
MSSV: 1117885

TS. Nguyễn Hữu Hòa

Cán bộ phản biện:
Ks. Lê Văn Quan
Ks. Đặng Mỹ Hạnh
Luận văn được bảo vệ tại: Hội đồng chấm luận văn tốt nghiệp Bộ môn
Tin học Ứng dụng Khoa Công Nghệ Thông Tin & Truyền Thông, Trường
Đại học Cần Thơ vào ngày 15 tháng 05 năm 2015.

Mã số đề tài:
Có thể tìm hiểu luận văn tại:
- Trung tâm Học liệu, Trường Đại học Cần Thơ
- Website: />
Cần Thơ, 2015


LỜI CẢM ƠN
Bốn năm khoảng thời gian của thời sinh viên đã sắp trôi qua, khóa luận tốt nghiệp
là một công trình nghiên cứu tâm quyết, không chỉ riêng em mà đối với các bạn sinh
viên khác cũng thế khóa luận là nơi chúng em thể hiện đầy đủ nhất những gì mà chúng
em đã được học trong khoảng thời gian là sinh viên.
Trong suốt quá trình làm bài em luôn nhận được nhiều sự giúp đỡ của của nhiều

người là người quen, là bạn, và cả những người chưa hề quen biết, đó là động lực rất
lớn giúp em vượt qua các trở ngại các khó khăn chủ quan và khách quan trong quá
trình làm bài.
Em xin gửi lời cảm ơn đến thầy Nguyễn Hữu Hòa là giảng viên hướng dẫn bài
khóa luận của em, em chân thành cảm ơn những góp ý chân thành của thầy giúp bài
làm của em hoàn chỉnh hơn. Em cũng xin gửi lời cảm ơn đến các thầy cô trong Bộ
Môn Tin Học Ứng Dụng, các thầy cô trường ĐHCT đã dạy dỗ hướng dẫn em trong
suốt thời gian còn là sinh viên, để em có những kiến thức nhất định cho bài luận cũng
như công việc sau này của em.
Và em cũng chân thành cảm ơn những người thân luôn bên cạnh động viên, lo lắng
cũng như đã hỗ trợ hết mình cho em. Con xin cảm ơn Cha mẹ đã luôn ủng hộ con
trong suốt thời gian qua, cũng như những người bạn thân yêu luôn bên cạnh động viên
và gửi những lời chúc tốt đẹp.
Luận văn là công trình tâm huyết của em, nhưng do hạn chế về kiến thức lẫn kỹ
năng nên có những điểm chưa hoàn thiện, em rất mong nhận được sư góp ý từ phía
thầy cô, các anh chị và các bạn cho bài luận thêm đầy đủ.
Cuối lời em chúc mọi người sức khỏe, chúc thầy cô thành công trên con đường
giảng dạy của mình./.

Cần Thơ, ngày … tháng … năm 2015
Sinh viên

Cô Thanh Thiện
1


MỤC LỤC
Trang
Lời cảm ơn .......................................................................................................................1
Mục lục ............................................................................................................................2

Danh mục hình.................................................................................................................4
Danh mục bảng ................................................................................................................6
Danh mục ký hiệu và viết tắt ...........................................................................................7
Tóm tắt .............................................................................................................................8
Abstract ............................................................................................................................9
Chương 1.

Tổng quan .............................................................................................10

1.1

Đặt vấn đề ........................................................................................................10

1.2

Phạm vi của đề tài ............................................................................................10

1.3

Phương pháp nghiên cứu .................................................................................11

1.4

Nội dung chính của luận văn ...........................................................................12

Chương 2.
2.1

Cơ sở lý thuyết......................................................................................13

JSF ....................................................................................................................13
2.1.1 Giới thiệu về JSF .............................................................................................13
2.1.2 Các thành phần của JSF Framework ...............................................................16

2.2

Primefaces ........................................................................................................18
2.2.1 Giới thiệu primefaces ......................................................................................18
2.2.2 Primefaces Component ...................................................................................20
2.2.3 Hướng dẫn viết các tag Primefaces .................................................................25

2.3

Hibernate và truy vấn HQL..............................................................................31
2.3.1 Khái niệm ORM Framework và Persistent layer ............................................31
2.3.2 Giới thiệu Hibernate Framework ....................................................................33
2.3.3 Kiến trúc Hibernate Framework......................................................................33
2.3.4 Các thành phần của Hibernate project ............................................................34
2.3.5 Lợi ích khi sử dụng Hibernate cho persistent layer ........................................35
2


2.3.6 Cấu hình Hibernate..........................................................................................35
2.3.7 Truy vấn HQL .................................................................................................40
2.4

Web service ......................................................................................................44
2.4.1 Giới thiệu về Web service ...............................................................................44
2.4.2 Kiến trúc web service ......................................................................................45
2.4.3 Đặc điểm của Web service ..............................................................................45

2.4.4 Kỹ thuật dùng trong Web service....................................................................46

Chương 3.

Nội dung và kết quả nghiên cứu .........................................................48

3.1

Kết quả điều tra, thu thập thông tin .................................................................48

3.2

Giải pháp phân tích, thiết kế các mô hình ........................................................48
3.2.1 Sơ đồ Use Case................................................................................................48
3.2.2 Mô tả chi tiết ...................................................................................................51
3.2.3 Mô hình tập thực thể mối kết hợp ...................................................................60
3.2.4 Mô hình vật lý .................................................................................................61
3.2.5 Ràng buộc toàn vẹn .........................................................................................62
3.2.6 Mô hình cơ sở dữ liệu quan hệ ........................................................................63
3.2.7 Sơ đồ chức năng cho ứng dụng BFD ..............................................................64
3.2.8 Sơ đồ lớp .........................................................................................................65
3.2.9 Sơ đồ tuần tự ...................................................................................................69

3.3

Kết quả đạt được ..............................................................................................72
3.3.1 Chức năng chính ..............................................................................................72
3.3.2 Giao diện .........................................................................................................72
3.3.3 Module ............................................................................................................78
3.3.4 Thảo luận kết quả và những vấn đề chưa được giải quyết ..............................80

Kết luận và đề nghị ........................................................................................................82
Tài liệu tham khảo .........................................................................................................83

3


DANH MỤC HÌNH
Hình 2.1

Mô hình MVC ...........................................................................................16

Hình 2.2

JSF component ..........................................................................................17

Hình 2.3

Kết quả đánh giá về primeface của DevRates.com ...................................19

Hình 2.4

Kết quả so sánh của PrimeFace .................................................................19

Hình 2.5

Minh họa kiến trúc Hibernate ...................................................................33

Hình 2.6

Web service ...............................................................................................44

Hình 2.7

Kiến trúc Web service ...............................................................................45

Hình 2.8

Mô hình xây dựng Web service ................................................................47

Hình 3.1

Use Case chức năng hệ thống ...................................................................48

Hình 3.2

Use case phân rã chức năng lập phiếu, hóa đơn........................................49

Hình 3.3

Use case phân rã chức năng cập nhật danh mục .......................................49

Hình 3.4

Use case phân rã chức năng lập hóa đơn, phiếu........................................50

Hình 3.5

Use case phân rã chức năng quản lý nhân viên .........................................50

Hình 3.6

Use case phân rã chức năng báo cáo, thống kê .........................................51

Hình 3.7

Mối quan hệ kết hợp CT_MON_KHUYEN_MAI ...................................58

Hình 3.8

Mối quan hệ kết hợp CT_DATMON ........................................................58

Hình 3.9

Mối quan hệ kết hợp CT_HOADON_MON .............................................59

Hình 3.10

Mối quan hệ kết hợp THANH_PHAN ......................................................59

Hình 3.11

Mối quan hệ kết hợp CT_PHIEU_NHAP:................................................59

Hình 3.12

Mô hình tập thực thể kết hợp ....................................................................60

Hình 3.13

Mô hình vật lý ...........................................................................................61

Hình 3.14

Sơ đồ cơ sở dữ liệu quan hệ ......................................................................63

Hình 3.15

Sơ đồ chức năng cho ứng dụng .................................................................64

Hình 3.16

Sơ đồ lớp ...................................................................................................68

Hình 3.17

Sơ đồ tuần tự đăng nhập ............................................................................69

Hình 3.18

Sơ đồ tuần tự cho Hóa đơn ........................................................................69

Hình 3.19

Sơ đồ tuần tự Phiếu Nhập .........................................................................70
4


Hình 3.20

Sơ đồ tuần tự cập nhật nhân viên ..............................................................71

Hình 3.21

Trang chủ...................................................................................................73

Hình 3.22

Trang thực đơn ..........................................................................................73

Hình 3.23

Trang khuyến mãi .....................................................................................73

Hình 3.24

Trang Thông tin .........................................................................................74

Hình 3.25

Trang Liên hệ ............................................................................................74

Hình 3.26

Trang cập nhật danh mục ..........................................................................75

Hình 3.27

Trang phân quyền nhân viên .....................................................................75

Hình 3.28

Trang lập phiếu nhập .................................................................................75

Hình 3.29

Trang lập hóa đơn .....................................................................................76

Hình 3.30

Trang xem hóa đơn ...................................................................................76

Hình 3.31

Trang xem doanh thu ................................................................................77

Hình 3.32

Trang xem tồn kho ....................................................................................77

Hình 3.33

Trang xem thống kê doanh thu, chi ...........................................................77

Hình 3.34

Web service tải Nhóm món .......................................................................78

Hình 3.35

Web service tải Món .................................................................................78

Hình 3.36

Web service lập hóa đơn ...........................................................................79

5


DANH MỤC BẢNG
Bảng 2.1

Một số tag phổ biến của Primefaces .........................................................21

Bảng 2.2

Attribute của Primefaces ...........................................................................24

Bảng 3.1

Tập thực thể NHOM_MON ......................................................................51

Bảng 3.2

Tập thực thể DON_VI_TINH ...................................................................51

Bảng 3.3

Tập thực thể MON ....................................................................................52

Bảng 3.4

Tập thực thể LOAI_TIEC .........................................................................52

Bảng 3.5

Tập thực thể KHU_VUC ..........................................................................52

Bảng 3.6

Tập thực thể BAN .....................................................................................52

Bảng 3.7

Tập thực thể PHONG_TIEC .....................................................................53

Bảng 3.8

Tập thực thể KHACH_HANG ..................................................................53

Bảng 3.9

Tập thực thể CHUONG_TRINH_KHUYEN_MAI .................................53

Bảng 3.10 Tập thực thể BO_PHAN ...........................................................................54
Bảng 3.11 Tập thực thể NHAN_VIEN ......................................................................54
Bảng 3.12 Tập thực thể NHA_CUNG_CAP ..............................................................54
Bảng 3.13 Tập thực thể LOAI_NGUYEN_LIEU ......................................................55
Bảng 3.14 Tập thực thể NGUYEN_LIEU ..................................................................55
Bảng 3.15 Tập thực thể PHIEU_DAT_TIEC .............................................................55

Bảng 3.16 Tập thực thể HOADON ............................................................................56
Bảng 3.17 Tập thực thể PHIEU_NHAP .....................................................................56
Bảng 3.18 Tập thực thể PHIEU_CHI .........................................................................56
Bảng 3.19 Danh sách các tập thực thể ........................................................................57
Bảng 3.20 Danh sách các mối quan hệ .......................................................................57
Bảng 3.21 Ràng buộc toàn vẹn miền giá trị của PHIEU_DAT_TIEC .......................62
Bảng 3.22 Ràng buộc toàn vẹn miền giá trị của CT_HOADON ...............................62
Bảng 3.23 Thông tin chi tiết các phương thức chính .................................................65

6


DANH MỤC KÝ HIỆU VÀ VIẾT TẮT
Nguyên nghĩa

Chữ viết tắt

JSF

Là viết tắt của JavaServer Faces, JSF là một bộ khung
(framework) phát triển các ứng dụng Web viết bằng Java
nhằm làm đơn giản hóa quá trình phát triển giao diện
người dùng cho các ứng dụng J2EE.

ORM

(Object Relational Mapping) framework là một cơ chế cho
phép người lập trình thao tác với database một cách hoàn
toàn tự nhiên thông qua các đối tượng

HQL

Hibernate Query Language (HQL) là một ngôn ngữ truy
vấn hướng đối tượng, tương tự như SQL

MVC

viết tắt của Model-View-Controller (tiếng Anh) là một
mẫu kiến trúc phần mềm trong kỹ thuật kỹ sư phần mềm.

GUI

(Graphical User Interface) là một cách giao tiếp với máy
tính hay các thiết bị điện tử bằng hình ảnh và chữ viết thay
vì chỉ là các dòng lệnh đơn thuần

LAN

(Local Area Network, "mạng máy tính cục bộ") là một hệ
thống mạng dùng để kết nối các máy tính trong một phạm
vi nhỏ.

API

viết tắt của Application Programming Interface (giao diện
lập trình ứng dụng).

HTTP

viết tắt của HyperText Transfer Protocol. Là một trong

năm giao thức chuẩn về mạng Internet, được dùng để liên
hệ thông tin giữa máy cung cấp dịch vụ (Web server) và
máy sử dụng dịch vụ (Web client) là giao thức
Client/Server dùng cho World Wide Web-WWW.

7


TÓM TẮT
Trong thời đại ngày nay, công nghệ thông tin đang được phát triển mạnh mẽ, nhanh
chóng và xâm nhập vào nhiều lĩnh vực khoa học, kỹ thuật cũng như trong cuộc sống.
Nó trở thành công cụ đắc lực trong nhiều ngành nghề như giao thông, quân sự, y học.
đặc biệt trong công tác quản lý nói chung và quản lý nhà hàng nói riêng.
Trước đây, khi máy tính chưa được ứng dụng rộng rãi, hầu hết các công việc quản
lý nhà hàng đều được làm thủ công nên rất mất thời gian và tốn kém về nhân lực cũng
như chi phí. Ngày nay, với sự phát triển công nghệ thông tin, các công việc quản lý
của cơ quan, doanh nghiệp, trường học,… được hoàn thành một cách tốt hơn.
Việc nghiên cứu, phát triển phần mềm quản lý nhà hàng chạy trên nền Web đang
được quan tâm và phát triển, đặc biệt là trong thời kỳ mạng lưới Internet rộng khắp
như hiện nay. Nó không chỉ giúp cho chương trình quản lý thêm gọn nhẹ, người quản
lý có thể quản lý ở bất cứ nơi đâu và bất cứ thời điểm nào, và giúp cho khách hàng có
thể tương tác với trang web, nhằm quảng bá thương hiệu nhà hàng đến với những thực
khách yêu thích ăn uống. Mục tiêu chính của luận văn này là “Xây dựng phần mềm
quản lý nhà hàng với bộ công cụ JSF, Primefaces và Hibernate”.
Qua quá trình nghiên cứu và thực hiện, website đã hoàn thành đáp ứng mục tiêu
của đề tài. Phần mềm vừa có thể tương tác với khách hàng thông qua trang chủ, vừa có
thể giúp cho việc quản lý của nhà quản lý cũng như nhân viên thêm dễ dàng với trang
quản trị, giao diện trang web thân thiện, tiện ích cho người sử dụng, việc xử lý nhanh
chóng, tiết kiệm thời gian là một ưu thế của chương trình.
Với đề tài trên có thể mở rộng quy mô cơ sở dữ liệu lớn hơn để đáp ứng đầy đủ các

nghiệp vụ của nhà hàng, đồng thời có thể phát triển trên nền di động để giúp cho việc
tương tác với người dùng dễ dàng hơn thông qua những thiết bị điện thoại thông minh.

TỪ KHÓA
Từ khóa: JSF, Primefaces, Hibernate, HQL, Quản lý nhà hàng.

8


ABSTRACT
Today, information technology is being developed strongly, quickly and penetrate
many areas of science, engineering as well as in life. It became an effective tool in
many industries such as transportation, military and medicine. Especially, in
management in general and in particular the restaurant manager.
In the past, when the computer has not been widely used, most of the restaurant
management jobs are handmade so very laborious and costly in human resources as
well as costs. Nowadays, with the development of information technology, the
management of agencies, businesses, schools, ... are completed in a better way.
The research and development of restaurant management software that runs on the
Web are interested and development, especially during the extensive network of the
current Internet. It not only helps to manage the program more compact, managers can
manage at any where and any time, and enables customers to interact with the site, in
order to promote brand Restaurant diners come to the dining favorite. The main
objective of this essay is "Building management software toolkit restaurant with JSF,
Primefaces and Hibernate".
Through research and implementation, website completed to meet the objectives of
the subject. Medium software can interact with customers via their homepage, but you
can make the management of managers and employees more easily with site
management, friendly web interface, convenient for people manual, quick handling,
saving time is an advantage of the program.

With topics on extending the scale databases to fulfill the business of a restaurant,
and can build a mobile-based software to allow for the interaction with the site more
easy when the user easy to use smartphone.

KEYWORD
Keyword: JSF, Primefaces, Hibernate, HQL, Quản lý nhà hàng.

9


CHƯƠNG 1. TỔNG QUAN
1.1 ĐẶT VẤN ĐỀ
Trên địa bàn thành phố Cần Thơ hiện nay xuất hiện ngày càng nhiều những quán
ăn, nhà hàng với qui mô lớn, nhỏ khác nhau. Đa số việc quản lý ở những nơi này
thường được thể hiện qua sổ sách, hóa đơn viết bằng tay gây khó khăn cho việc quản
lý.
Để khắc phục vấn đề trên, nhiều quán ăn, nhà hàng đều đang thực hiện kinh doanh
theo hướng tin học hóa bằng cách sử dụng các phần mềm quản lý và bước đầu mang
đến sự tiện lợi trong việc quản lý, làm cho việc quản lý bớt phần nhàm chán và làm
thay đổi bộ mặt của nhà hàng trong mắt thực khách.
Tuy nhiên, những phần mềm về quản lý nhà hàng, quán ăn chủ yếu chạy trên PC
mà khả năng tương thích giữa PC với các phần mềm có phần hạn chế làm cho phần
mềm không mang tính khả thi cao. Do đó, việc xây dựng chương trình quản lý trên
nền web ngày càng được quan tâm và phát triển.
Với thực trạng trên, cần phải xây dựng một hệ thống quản lý nhà hàng chạy trên
nền Web nhằm đáp ứng nhu cầu quản lý 24/24h và có thể quản lý nhà hàng ở bất cư
nơi đâu. Cụ thể, mục tiêu chính của bài luận văn này là “Xây dựng hệ thống website
quản lý nhà hàng với JSF, Primefaces & Hibernate ” nhằm hỗ trợ việc quản lý nhà
hàng trên web một cách nhanh chóng và kịp thời.
1.2 PHẠM VI CỦA ĐỀ TÀI

Xây dựng một hệ thống có khả năng quản lý thông tin các món ăn, thực đơn, hóa
đơn của nhà hàng, có khả năng thực hiện các nghiệp vụ một cách nhanh chóng và
chính xác, cung cấp các chức năng cho thực khách và nhân viên nhà hàng có thể tương
tác từ xa.
Đối với nhân viên :
 Quản lý bàn, loại bàn, khu vực, trạng thái bàn
 Quản lý thực đơn, phân cấp, tìm kiếm, chọn các món ăn.
 Quản lý kho, nguyên liệu, định lượng sản phẩm, hạn chế thất thoát, tồn kho
chính xác.
 Sử dụng online, mạng LAN, mạng Internet. Ở nhà hoặc đi công tác đều quản lý
được.
 Báo cáo thống kê, quản lý công nợ khách hàng, nhà cung cấp.

10


Đối với khách hàng:
 Phần mềm có chức năng giới thiệu các thực đơn hiện có của nhà hàng nhằm
cung cấp cho khách hàng thông tin tổng quan về các món ăn.
 Xem thông tin về các chương trình khuyến mãi, ưu đãi.
 Khách hàng có thể gửi mail liên hệ đến nhà quản lý.
 Tìm kiếm các món ăn theo tên và theo loại.
1.3 PHƯƠNG PHÁP NGHIÊN CỨU
Phương pháp nghiên cứu là tìm hiểu và xây dựng phần mềm quản lý nhà hàng với
JSF, Primefaces & Hibernate.
-

Về lý thuyết:

 Nắm vững kỹ thuật phân tích thiết kế hệ thống.

 Nắm vững các phương pháp tổ chức, phân tích và thiết kế cơ sở dữ liệu.
 Nắm vững ngôn ngữ HQL.
 Nắm vững các kỹ thuật lập trình.
-

Về kỹ thuật:

 Sử dụng ngôn ngữ JSF và Primefaces cho việc xây dựng ứng dụng web.
 Sử dụng Hibernate để kết nối cơ sở dữ liệu.
 Sử dụng hệ quản trị cơ sở dữ liệu MySQL để tạo và quản lý cơ sở dữ liệu trên.
 Sử dụng Web Service hỗ trợ xây dựng bản đồ.
 Sử dụng template StartBootstrap cho việc thiết kế giao diện.
-

Về chức năng:

 Cho phép nhân viên cập nhật các danh mục một cách dễ dàng.
 Lập hóa đơn và các loại phiếu được thực hiện nhanh chóng.
 Hỗ trợ việc xem và tìm kiếm món ăn cho khách hàng.
 Giúp người quản lý xem và thống kê doanh thu.
 Quảng cáo món ăn của nhà hàng cũng như có thêm thu nhập từ việc quảng cáo
sản phẩm của các khách hàng yêu cầu.

11


1.4 NỘI DUNG CHÍNH CỦA LUẬN VĂN
Đề tài quản lý nhà hàng tuy không phải là mới mẻ, nhưng những phần mềm trước
đây chủ yếu đều làm việc trên máy tính nên không có khả năng tương thích cao. Do
đó, Việc xây dựng phần mềm quản lý nhà hàng trên nền web bằng bộ công cụ JSF,

Primefaces và Hibernate được xem là một đề tài mới và đáng chú ý.
Nhằm cung cấp thông tin về các nghiệp vụ cần có của nhà hàng, cũng như cung
cấp thêm những kiến thức đối những người đã biết hoặc những người chưa biết về
JSF, Primefaces và Hibernate. Em đã tìm hiểu, phân tích và viết nên cuốn luận văn
này. Cấu trúc của cuốn luận văn này gồm 3 chương, mỗi chương sẽ được chia thành
nhiều đề mục nhằm giúp cho người đọc dễ nắm bắt về nội dung cần tìm hiểu. Ở mỗi
phần nội dung còn có nhiều hình ảnh minh họa để làm rõ hơn về vấn đề đưa ra.
Nội dung chính của luận văn bao gồm:
Chương 1: Giới thiệu tổng quan về đề tài, vấn đề đặt ra để giải quyết bài toán, phạm vi
của đề tài và phương pháp để thực thiện đề tài.
Chương 2: Những cơ sở lý thuyết tìm hiểu để giúp cho việc giải quyết đề tài thêm gọn
nhẹ: Giới thiệu về JSF và các thành phần của JSF, giới thiệu về Primefaces và một số
hướng dẫn cơ bản, Hibernate và cách truy vấn HQL, một số thông tin về Web service.
Chương 3: Từ kết quả điều tra, thu thập thông tin, tiến hành phân tích, thiết kế các mô
hình và hoàn thiện chương trình. Từ đó đưa ra kết luận và kiến nghị.

12


CHƯƠNG 2. CƠ SỞ LÝ THUYẾT
2.1 JSF
2.1.1 Giới thiệu về JSF
JSF là viết tắt của JavaServer Faces, JSF là một bộ khung (framework) phát triển
các ứng dụng Web viết bằng Java nhằm làm đơn giản hóa quá trình phát triển giao
diện người dùng cho các ứng dụng J2EE. Để tạo ra giao diện hiển thị, JSF dùng dạng
cấu trúc cây của các thẻ, mỗi thẻ là một thành phần giao diện (component) và
FacesServlet servlet sẽ thực hiện công đoạn chuyển đổi ra giao diện tương ứng cho
người dùng với định dạng HTML.
JSF Framework được xây dựng trên nền tảng MVC Pattern trên Web và hỗ trợ khả
năng xử lý sự kiện điều này tương tự như mô hình Swing – xây dựng ứng dụng

desktop. Do vậy, JSF còn được mệnh danh là Swing được chạy trên phía Server
(Server Side).
JSF còn hỗ trợ cơ chế rendering trong việc hỗ trợ giao diện cho người dùng trong
quá trình xử lý (User Interface) và đây là đặc tính nổi bật của JSF theo nghĩa JSF đa số
hỗ trợ chữ V (View) trong mô hình MVC chuẩn (event – biến cố là một phần trong
View)
Do tính chất hỗ trợ giao diện cho nên JSF đưa ra một tập các thư viện trên trang jsp
– tag library để hỗ trợ giao diện, checking ràng buộc – validation, ép kiểu dữ liệu –
conversion, hỗ trợ đa ngôn ngữ - localization, …
2.1.1.1 Đặc điểm của JSF
Một trong những lợi điểm lớn nhất của công nghệ JSF là nó cho phép một sự phân
chia rạch ròi giữa behavior (cách xử lý) và presentation (cách trình bày). Xây dựng
ứng dụng web với công nghệ JSP lưu trữ từng phần của việc phân chia này. Tuy nhiên,
một ứng dụng JSP không thể ánh xạ những request HTTP thành những xử lý sự kiện
các thành phần cụ thể hoặc quản lý các thành phần UI như những đối tượng có trạng
thái trên server. Công nghệ JSF cho phép bạn xây dựng các ứng dụng Web nhằm bổ
sung việc phân chia rõ ràng hơn behavior và presentation được cho phép bởi kiến trúc
UI.
Việc phân chia luận lý từ presentation cũng cho phép mỗi thành viên của một nhóm
phát triển ứng dụng Web tập trung vào những phần trong tiến trình phát triển của họ,
và cung cấp một mô hình lập trình đơn giản để liên kết những phần đó với nhau. Một
mục tiêu quan trọng khác của công nghệ JSF là cung cấp các mức độ thân thuộc các
thành phần UI và các khái niệm tầng Web mà không giới hạn bạn trong một công nghệ
scripting cụ thể hoặc một ngôn ngữ đánh dấu. Trong khi công nghệ JSF bao gồm một
thư viện thẻ tùy biến JSP dùng thay thế các thành phần trên trang JSP, API của công
nghệ JSP được phân lớp trực tiếp trên đỉnh của JavaServlet API. Điều này cho phép
bạn làm được vài điều: sử dụng công nghệ trình bày khác bên cạnh JSP, tạo ra những

13

thành phần tùy biến của bản thân trực tiếp từ những lớp thành phần, và tạo ra luồng
xuất cho những thiết bị client khác nhau.
Quan trọng hơn hết, công nghệ JSF cung cấp một kiến trúc dành cho việc quản lý
trạng thái các thành phần, xử lý dữ liệu thành phần, kiểm tra nhập liệu của người dùng
và xử lý các sự kiện. Trong hầu hết những phần đó, các ứng dụng JSF cũng tương tự
như bất kỳ các ứng dụng Java Web khác, Chúng chạy trên một Java Servlet container,
và thông thường chứa:





Các thành phầns JavaBean (được gọi là những mô hình đối tượng trong công
nghệ JSF)
Các event listener
Các trang, chẳng hạn như JSP
Các lớp helper phía server, chẳng hạn như các bean truy cập dữ liệu

Thêm vào những thành phần ở trên, một ứng dụng JSF cũng có:





Một thư viện thẻ tùy biến thực thi các thành phần UI trên một trang
Một thư viện thẻ tùy biến thay thế các xử lý sự kiện, kiểm tra và những hành
động khác
Những thành phần UI thay thế trạng thái các đối tượng trên server
Các kiểm tra, xử lý sự kiện, và xử lý navigation

Mỗi ứng dụng JSF phải bao gồm một thư viên thẻ tùy biến nhằm định nghĩa các thẻ
thay thế các thành phần UI và một thư viện thẻ tùy biến nhằm thay thế các hành động
cốt lõi khác, chẳng hạn như các kiểm tra và các xử lý sự kiện. Cả hai loại thư viện thẻ
này được cung cấp bởi việc bổ sung JSF.
Thư viện thẻ tùy biến xóa bỏ những gì cần thiết cho các thành phần UI trong
HTML hoặc ngôn ngữ đánh dấu khác, kết quả là những thành phần tái sử dụng hoàn
toàn. Và thư viện core tạo nên sự dễ dàng để đăng ký các sự kiện, kiểm tra và những
hành động khác. Thư viện thẻ tùy biến có thể là thư viện thẻ HTML cơ bản chứa cùng
với công nghệ JSF tham khảo bổ sung, hoặc bạn có thể định nghĩa thư viện thẻ của
riêng mình nhằm tạo ra các thành phần tùy biến hoặc xuất ra kiểu khác HTML.
Cuối cùng, công nghệ JSF cho phép bạn chuyển đổi và kiểm tra dữ liệu trên những
thành phần riêng biệt và thông báo bất kỳ lỗi gì trước khi dữ liệu phía server được cập
nhật.

14


2.1.1.2 Vai trò của Framework
Bởi vì việc phân chia công việc được cho phép bởi thiết kế công nghệ JSF, việc
phát triển và sửa chữa các ứng dụng JSF có thể xử lý dễ dàng và nhanh chóng. Các
thành viên của một nhóm phát triển thông thường bao gồm một danh sách dưới đây.
Trong nhiều nhóm, các nhà phát triển riêng biệt đóng nhiều hơn một trong những vai
trò dưới đây:









PageAuthors: người sử dụng ngôn ngữ đánh dấu, giống như HTML, để tạo ra
các trang cho ứng dụng Web. Khi sử dụng framework công nghệ JSF, page
authors sẽ hầu hết sử dụng thư viện thẻ.
Application Developers: người lập trình mô hình các thành phần, các xử lý sự
kiện, các kiểm tra, và navigation của trang. Application developer có thể cung
cấp các lớp helper mở rộng
Component Writers: người có kinh nghiệm lập trình UI và đề nghị tạo ra các
thành phần tùy biến sử dụng ngôn ngữ lập trình.
Những người này có thể tạo ra các thành phần của riêng họ trực tiếp từ các lớp
thành phần, hoặc họ có thể kế thừa các thành phần chuẩn cung cấp bởi công
nghệ JSF.
Tool Verdors: người cung cấp các công cụ nhằm tạo ra công nghệ JSF xây
dựng UI phía server dễ dàng hơn. Những thành viên chính của công nghệ JSF
sẽ là page authors và application developers.
2.1.1.3 Mục đích ra đời của JSF

8 mục tiêu thiết kế sau là lí do cho sự ra đời của JSF:
1. Tạo ra một bộ khung gồm các thành phần giao diện người dùng chuẩn
(standard GUI component framework) nhằm giúp cho các công cụ phát triển dễ
dàng hơn cho người dùng trong việc tạo GUI chất lượng cao đồng thời quản lí
các kết quả của GUI với xử lí thực thi của chương trình.
2. Định ra một tập các lớp cơ sở của Java (lightweight Java base classes) biểu
diễn cho các thành phần UI, trạng thái mỗi thành phần, và các sự kiện đầu vào.
Những lớp này sẽ xử lí những vấn đề liên quan đến chu kì sống của GUI, đặc
biệt là quản lí trạng thái trong suốt chu trình sống của một trang của thành phần
GUI đó.
3. Cung cấp một tập các thành phần GUI chung, bao gồm các thành phần HTML

form input. Những thành phần này sẽ được dẫn xuất từ tập đơn giản các lớp cơ
sở để từ đó có thể định ra các thành phần mới.
4. Cung cấp một mô hình JavaBeans để có thể truyền đi (dispatch) các sự kiện từ
các GUI controls phía máy khách đến các xử lí hiện thực cụ thể từ phía ứng
dụng máy chủ.
5. Định ra các hàm APIs để kiểm chứng dữ liệu nhập, bao gồm hỗ trợ kiểm chứng
từ phía máy chủ.
6. Chỉ định một mô hình để có thể đa ngôn ngữ hóa hay địa phương hóa các GUI.
15


7. Khởi tạo tự động dữ liệu ra phù hợp cho máy khách đích, dựa vào mọi dữ liệu
cấu hình ở máy khách đó, bao gồm cả dựa vào phiên bản trình duyệt, ví dụ.
8. Việc khởi tạo tự động dữ liệu ra còn kèm theo các đòi hỏi về hỗ trợ người dùng
(accessibility), được qui định bởi WAI.
2.1.2 Các thành phần của JSF Framework
2.1.2.1 Kiến trúc của JSF

Hình 2.1

Mô hình MVC

Mô hình MVC thể hiện rất rõ ràng, khi người dùng request, toàn bộ request bắt
buộc phải qua Controller. Ở dây JSF Framework đặt tên Servlet là Faces và che nó lại
và cho phép người lập trình mapping linh động không bị code lệ thuộc như bình
thường trong mô hình MVC thông qua tập tin faces-config.xml, nơi người dùng khai
báo các managed beans, mapping việc chọn lựa trang xử lý, chuyển xử lý và truyền
thông số giữa các bean và các trang.
Sau khi tiếp nhận, Faces Servlet xác định bean tương ứng – Model để chuyển xử lý
hay xác định trang JSF – View tương tự như cơ chế MVC xác định trang JSP và

Model tương ứng để thực hiện xử lý và kết xuất dữ liệu lên form JSF để trình bày.
Kết quả, xử lý hay giao diện kết xuất phải được đưa qua Faces Servlet để chuyển
response về cho người yêu cầu.
2.1.2.2 Managed Bean
Managed Bean hay tên gọi khác là Backing Bean
 Bản chất là Java Beans được dùng kết hợp với các thành phần UI interface,
Java Beans bao gồm các phương thức hỗ trợ trình bày giao diện cho người

16








dùng, trao đổi dữ liệu với các thành phần khác trong ứng dụng, lưu trữ và
chuyển xử lý khi người dùng tương tác.
Hỗ trợ 5 scope khác nhau trong ứng dụng khi thao tác như request, session,
view, none và application.
Java beans phải được khai báo trong tập tin faces-config.xml của ứng dụng
để ứng dụng có thể cơ chế để lưu trữ và tương tác với bean.
Để tương tác giữa form, UI component thì Java Beans sử dụng cấu trúc
#{[JavaBeanName].[property/method]} với [JavaBeanName]là tên java
beans khi ta khai báo lớp bin và [property/method] là tên thuộc tính hoặc
phương thức của lớp java beans.
Beans có khả năng hỗ trợ Event Handling, hỗ trợ chuyển trang – Navigation,
và thực hiện Validation.

2.1.2.3 UI Component
Hỗ trợ trình bày giao diện để người dùng tương tác trực tiếp và trình bày kết quả về
phía người dùng.
UI components of JSF

UI Form

UIGraphics

UIMessage

UISelectItem

UIViewRoot

UIOutput

UIInput

Hình 2.2

JSF component

2.1.2.4 Rendered
Hỗ trợ tính toán, xử lý kết quả để kết xuất trình bày giá trị trong các thành phần UI
để trình bày giao diện chính xác và hợp lý từ kết xuất của chương trình trong lúc thực
thi.
17

Hỗ trợ cơ chế “Look and Feel”.
2.1.2.5 Events and Listener
Hỗ trợ cơ chế đón nhận các sự kiện và xử lý sự kiện (Event Handling) trên khái
niệm của M (Model) trong MVC kết hợp với Managed Bean.
2.1.2.6 Navigation
Cung cấp cơ chế chuyển trang, chuyển xử lý trong quá trình ứng dụng thực hiện
tượng tự khái niệm C (Controller) trong mô hình MVC.
Có 02 loại mô hình Static và Dynamic Model




Static Model: di chuyển đến duy nhất một trang cụ thể và không thay đổi hay
không thể thay đổi từ lúc lập trình hay trong quá trình trang thực thi (trang
chuyển đến đã được xác định chính xác).
Dynamic Model: cấu hình để chuyển đến trang tương ứng tùy theo kết quả xử
lý của ứng dụng.
2.1.2.7 Validator

Hỗ trợ cơ chế kiểm tra dữ liệu trên các thành phần UI để đảm bảo dữ liệu được
nhập đúng và có ràng buộc theo đúng yêu cầu của ứng dụng.
2.1.2.8 Converter
Hỗ trợ cơ chế ép kiểu dữ liệu trong quá trình xử lý.
2.1.2.9 Message
Hỗ trợ trình bày các thông tin – message về phía người dùng, thông báo lỗi hay hỗ
trợ cơ chế I18N – hỗ trợ ứng dụng đa ngôn ngữ.
2.2 PRIMEFACES
2.2.1 Giới thiệu primefaces
PrimeFace framework được mở rộng từ JSF. Đa dạng về các thành phần
(HtmlEditor, Dialog, AutoComplete, Charts và nhiều thành phần khác). Xây dựng

Ajax dựa trên chuẩn JSF 2.0 Nhẹ, không có cấu hình phức tạp.

18


 Đánh giá về primeface
Theo DevRates.com thì PrimeFace được đánh giá với đển 9.4 số với các framework
khác.

Hình 2.3

Kết quả đánh giá về primeface của DevRates.com

Kết quả trên cho ta thấy frimeface được đánh giá rất tốt, được tin cậy và sử dụng khá
nhiều.
So sánh primeface vơi các framework tương tự

Hình 2.4

Kết quả so sánh của PrimeFace

Hàng ngàn ứng dụng đã được tạo ra với PrimeFaces, sản phẩm thậm chí cạnh tranh
như IceFaces được cung cấp bởi PrimeFaces. Trên đây là một biểu đồ được tạo ra bởi
Google Trends so sánh các PrimeFaces phổ biến với các đối thủ cạnh tranh.

19


2.2.2 Primefaces Component
Một số tag phổ biến của PrimeFace

Tag

Mô tả

cellEditor

CellEditor được dùng trong datatable sử dụng cho việc sửa đổi giá trị
trong một ô của table.

commandButton

CommandButton mở rộng thêm từ JSF cơ bản và có thêm các tính
năng về ajax và giao diện.

commandLink

CommandLink mở rộng thêm từ commandLink của JSF cơ bản và
thêm một số tính năng về ajax.

confirmDialog

ConfirmDialog thay thế cho hộp thoại trong Javascript, hỗ trợ giao
diện, tùy biến mạnh.

contextMenu

ContextMenu hỗ trợ hiện thị menu khi right click

dataGrid

DataGrid hỗ trợ hiển thị danh sách dữ liệu theo bố cục dạng lưới(grid
layout).Hỗ trợ phân trang với tùy chọn mẫu phân trang, số dòng trên
một trang và nhiều tùy chọn hơn nữa.

dataTable

DataTable hỗ trợ hiển thị danh sách dữ liệu theo cột và nhiều chức
năng hỗ trợ như phân trang, sắp xếp, chọn, lazy loading, lọc dữ liệu
và nhiều hơn nữa.

fileUpload

FileUpload cho phép trỏ tới file cần chọn đồng thời hỗ trợ các tính
năng của flash-javascript cho việc upload nhiều file.Hỗ trợ lọc file,
upload nhiều file,cập nhật một phần trang, thanh tiến trình.

graphicImage

GraphicImage mở rộng JSF graphic image với khả năng hiện thị dữ
liệu theo kiểu binary giống như là một inputstream.Hỗ trợ hiển thị
hình ảnh từ database dễ dàng hơn.

growl

Growl sử dụng để hiển thị FacesMessages giống như là h:messages

inputMask

InputMask định nghĩa các khuân mẫu cho dữ liệu nhập vào như:
email, số điện thoại….

inputText

InputText mở rộng inputText của JSF cơ bản với hỗ trợ về giao diện.

20


inputTextarea

InputTextarea mở rộng inputTextarea của JSF cơ bản với hỗ trợ về
giao diện và khả năng tự động tăng kích thước khi tràn nội dung.

message

Hiển thị thông báo khi có lỗi xảy ra tại phần tử xác định.

messages

Hiển thị tất cả các thông báo khi có lỗi xảy ra.

panelGrid

Hiểu thì dữ liệu thoe cột bằng cách định nghĩa số lượng cột

rowEditor

Được khai báo trong datatable dùng để sửa đổi dữ liệu của một dòng
trong table.

selectOneMenu

Giống như Dropdown ở HTML.

selectOneRadio

Giống như button ở HTML.

subTable

Được khai báo trong datatable dùng để gom nhóm dữ liệu trong table.

Bảng 2.1 Một số tag phổ biến của Primefaces

Attribute
Name

Required Type

Description

id

false

Định danh sự duy
nhất của phần tử.

javax.el.ValueExpression

(must evaluate to java.lang.String)
rendered

false

javax.el.ValueExpression

(must evaluate to java.lang.Boolean)

value

false

javax.el.ValueExpression

Rendered=true hiển
thị
phần
tử,
rendered=false
ko
hiển thị phần tử.
Giá trị của phần tử.

(must evaluate to java.lang.Object)
actionListener

false

Một

actionlistener
to được gọi thực hiện khi
javax.faces.event.ActionListener) mà một lệnh nòa đó
đã được thực thi.
javax.el.ValueExpression

(must

action

false

evaluate

javax.el.ValueExpression

(must

evaluate

javax.el.MethodExpression)

21

Một phương thức
to hoặc kết quả một
chuỗi để xử lý khi


lệnh được thực thi.

ajax

false

javax.el.ValueExpression

(must evaluate to java.lang.Boolean)

async

false

javax.el.ValueExpression

(must evaluate to java.lang.Boolean)

process

false

javax.el.ValueExpression

(must evaluate to java.lang.String)

update

false

javax.el.ValueExpression

(must evaluate to java.lang.String)

onstart

false

javax.el.ValueExpression

(must evaluate to java.lang.String)

oncomplete

false

javax.el.ValueExpression

(must evaluate to java.lang.String)

onerror

false

javax.el.ValueExpression

(must evaluate to java.lang.String)

onsuccess

false

javax.el.ValueExpression

(must evaluate to java.lang.String)

disabled

false

javax.el.ValueExpression

(must evaluate to java.lang.String)
label

false

javax.el.ValueExpression

(must evaluate to java.lang.String)

22

Ajax=true(mặc
định),thì submit sẽ
được thực hiện với
Ajax.
Khi giá trị này là true,
thì yêu cầu ajax sẽ
thực hiện bất đồng bộ.
Component sẽ sử lý
cục bộ một phần thay

vì toàn bộ giao diện.
Dùng để khai báo các
component được cập
nhật từ ajax.
Trước khi yêu cầu
ajax được thực thi nó
sẽ được phản hồi ở
phía người dùng.
Khi yêu cầu ajax hoàn
tất sẽ có phản hồi ở
phía người dùng.
Khi yêu cầu ajax thất
bại sẽ có phản hồi ở
phía người dùng.
Khi yêu cầu ajax gửi
thành công sẽ có phản
hồi ở phía người
dùng.
Vô hiệu
(button).

hoá

nút

Đặt tên cho thành
phần.


tabindex

title

false

false

(must evaluate to java.lang.String)

Vị trí của thành phần
nút theo thứ tự tab.

javax.el.ValueExpression

Thông tin gợi ý.

javax.el.ValueExpression

(must evaluate to java.lang.String)
type

readonly

false

false

(must evaluate to java.lang.String)

Thiết lập hành vi cho

nút. Mặc định là
submit.

javax.el.ValueExpression

Chỉ cho đọc

javax.el.ValueExpression

(must evaluate to java.lang.String)
style

styleClass

false

false

(must evaluate to java.lang.String)

Kiểu inline cho các
thành phần nút.

javax.el.ValueExpression

Lớp kiểu cho nút.

javax.el.ValueExpression

(must evaluate to java.lang.String)

onblur

false

javax.el.ValueExpression

(must evaluate to java.lang.String)

onchange

false

javax.el.ValueExpression

(must evaluate to java.lang.String)

onclick

false

javax.el.ValueExpression

(must evaluate to java.lang.String)

ondblclick

false

javax.el.ValueExpression

(must evaluate to java.lang.String)

onfocus

false

javax.el.ValueExpression

(must evaluate to java.lang.String)

onkeydown

false

javax.el.ValueExpression

(must evaluate to java.lang.String)

23

Sau khi rời khỏi nút sẽ
có một phản hồi ở
phía người dùng.
Khi rời khỏi nút và
giá trị đã thay đổi sẽ
có phản hồi ở phía
người dùng.
Khi nhấn nút sẽ có
phản hổi từ ở phía
người dùng.

Khi nhấn đúp chuột
vào nút sẽ có phản hồi
ở phía người dùng.
Khi focus vào nút sẽ
có một phản hồi ở
phía người dùng.
Khi ấn giữ phím sẽ có
phản hồi ở phía người
dùng.