Báo cáo đặt vé xe trực tuyến viết bẳng JSF

Page 1























Nong Lam University
Thành viên:
Thạch Mi Na 09130051
Thạch Thanh Tuấn 09130093
Võ Minh Phụng 09130067
Phạm Thị Hiếu Nhiên 10329046
Đề Tài: ĐẶT VÉ XE TRỰC TUYẾN

Môn: Chuyên đề web
GVHD: ThS.Mai Anh Thơ
KS.Lê Nhật Tùng

Page 2





Mục Lục
I. FSF Framework 3
1.1 Khái niệm về JSF 3
1.2 Ưu điểm của JSF 3
1.3 Các thành phần của JSF 3
1.4 Mục tiêu của JSF 4
1.5 Các pha vòng đời của ứng dụng JSF 4
1.6 Các dịch vụ framework JSF 6
1.7 Các thành phần chính của JSF 7
1.8 Managed Beans 8
1.9 Cấu hình Beans 9
1.10 Beans Scopes 9
1.11 Tổng quan các thẻ JSF core 10
1.12 Tổng quan cá thẻ JSF HTML 11
II. Web bán vé xe trực tuyến 13
2.1 Giới thiệu 13
2.2 Trang chủ 13
2.3 Các chức năng của Admin 13
2.3.1. Chức năng login vào hệ thống 14

2.3.2. Chức năng của admin 14
a. Quản lý xe 14
b. Quản lý đăt vé 15
c. Quản lý tài khoản 16
d. Quản lý thời gian 17
e. Quản lý tuyến 18
Page 3

2.4 Đặt vé 20
2.5 Bảng giá 23
2.6 Văn phòng đại diện 23

Page 4

I. JSF FRAMEWORK
Công nghệ Java Server Faces(JSF) cung cấp kiến thức về nền tảng của
JavaServerFaces, thường được gọi tắt là JSF, một đặc tả và cũng là một công nghệ
then chốt của Sun Microsytems, cho phép lập trình viên xây dựng các ứng dụng
web trên nền tảng Java một cách nhanh chóng và hiệu quả hơn. Vì JSF không chỉ là
một công nghệ mà còn là một đặc tả, cho phép các nhà phát triển khác nhau viết mã
thực thi (implementation) cho đặc tả này, làm phong phú thêm trong việc lựa chọn
JSF làm nền tảng xây dựng web với Java, như Apache MyFaces, ICEFaces, JBoss
RichFaces
1.1 Khái niệm về JSF
- JSF (Java Server Faces) là một framework Java.
- JSF là một 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.
- Là tập hợp các điều khiển giao diện trên nền web.
- Là framework cung cấp điều khiển giao diện không phụ thuộc thiết bị.
- JSF có thể sử dụng để tạo ra các giao diện ở các định dạng khác ngoài HTML và

sử dụng các protocol khác ngoài HTTP.
- Là một framework ứng dụng web dựa trên mô hình MVC.
1.2 Ưu điểm của JSF
- JSF là một kiến trúc mà các nhà phát triển dễ dàng sử dụng.
- Giao diện người dùng có thể tạo ra một cách dễ dàng cùng với thư viện thành
phần giao diện người dùng của nó, xử lý hầu hết những phức tạp của quản lý giao
diện người dùng.
- 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).
- 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.
Page 5

- Cơ chế xử lý sự kiện mạnh mẽ.
1.3 Các thành phần của JSF
Java Server Faces là một UI framework cho phép xây dựng các ứng dụng
web chạy trên Java server và thay thế UI phía sau cho client. Các thành phần chính
của công nghệ JSF bao gồm:
- Một tập các hàm API để biểu diễn các thành phần UI (giao diện người dùng) và
quản lý trạng thái của chúng, xử lí các sự kiện và kiểm tra dữ liệu vào, qui định
việc di chuyển trang, hỗ trợ tính đa ngôn ngữ và hỗ trợ cho người dùng.
- Một số thành phần có sẵn.
- Hai thư viện chứa các thẻ tùy biến JSP để có thể biểu diễn một JavaServer Faces
interface bên trong một trang JSP.
- Mô hình sự kiện ở dưới máy chủ.
- Khả năng quản lý trạng thái.
- Managed Bean.
1.4 Mục tiêu của JSF
- 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.
- Đị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 đó.
- 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.
- Cung cấp một mô hình JavaBeans để có thể truyền đi (dispatch) các sự kiện từ
Page 6

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ủ.
- Chỉ định một mô hình để có thể đa ngôn ngữ hóa hay địa phương hóa các GUI.
- 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.
1.5 Các pha vòng đời của ứng dụng JSF
Sáu pha xuất hiện theo trình tự mà JSF xử lý tiêu biểu một biểu mẫu (form) GUI.
Danh sách hiển thị các pha theo thứ tự thực hiện của chúng với việc xử lý sự kiện
ở mỗi pha, nhưng vòng đời JSF hầu như không được thiết lập cứng nhắc như vậy.
Chúng ta có thể thay đổi thứ tự thực hiện bằng cách bỏ qua các pha. Ví dụ, nếu
một giá trị yêu cầu không hợp lệ được sao chép vào một thành phần, khung nhìn
hiện tại sẽ được hiển thị lại, và một số pha có thể không thực hiện được.

Hình 4.5: Vòng đời của ứng dụng JSF

Page 7

1.5.1. Pha 1 – Restore view (Khôi phục khung nhìn)
- Thực hiện xây dựng các thành phần giao diện từ form yêu cầu của người dùng
- Các UI Component được tổ chức theo dạng hình cây và trạng thái của các control
hay nói cách khác là giá trị nhập liệu của người dùng (State), trạng thái kích hoạt
biến cố mà người dùng chọn lựa kích hoạt được thu thập, tổng hợp và đưa vào
Faces Servlet

1.5.2. Pha 2 – Apply request values; process events (Áp dụng các giá trị yêu cầu;
xử lý sự kiện)
- Từ thông tin thu thập được, JSF chuyển qua ép kiểu tương ứng thành kiểu dữ liệu
khai báo từ trong managed bean hay tương ứng với loại control của form nhập
liệu
- Nếu dữ liệu không thể ép kiểu thì tức thời JSF thông báo lỗi và response cho
Faces Context hay Faces Servlet để Faces Servlet thông báo cho người dùng
- Nếu việc ép kiểu – chuyển kiểu diễn ra thông thường, JSF chuyển dữ liệu sang
giai đoạn tiếp theo.
1.5.3. Pha 3 – Process validations; process events (Xử lý duyệt tính hợp lệ dữ liệu)
- Dữ liệu tiếp tục được kiểm tra ràng buộc tương ứng với yêu cầu xây dựng ứng
dụng và cấu hình trong thành phần validators, trong bean.
- Nếu dữ liệu validators bị sai thì tức thời JSF thông báo lỗi và response cho Faces
Context hay Faces Servlet để Faces Servlet thông báo cho người dùng.
- Nếu đúng thì chuyển dữ liệu cập nhật vào trong managed beans.
1.5.4. Pha 4 – Update model values; process events (Cập nhập các giá trị của
model)
- Cập nhật giá trị tương ứng vào các thuộc tính trong backing beans – managed
beans
Page 8

1.5.5. Pha 5 – Invoke application; process events (Gọi ứng dụng)
- Khi cập nhật thành công, Faces Servlet hay Faces Context dựa trên biến cố kích

hoạt, thực hiện gọi (invoke) phương thức xử lý tương ứng, xác định trang jsf kết
xuất
- Đón nhận kết quả xử lý
1.5.6. Pha 6 – Render response (Hoàn trả đáp ứng)
- Dữ liệu kết xuất khi xử lý xong sẽ được chuyển đổi tương ứng nạp vào form, cập
nhật giá trị các control UI
Render để trình bày kết quả trên form và đưa kết xuất cho Faces Servlet hay Faces
Context để response cho người dùng kết quả thực hiện.
1.6 Các dịch vụ framework JSF
Các dịch vụ quan trọng nhất JSF cung cấp là:
Data Conversion: JSF hỗ trợ chuyển đổi bằng thẻ (<f:converter>), khi dữ liệu
người dùng nhập vào qua giao diện dữ liệu ở dạng String các đối tượng chúng ta khai
báo có thể ở dạng dữ liệu khác, bởi thế JSF hỗ trợ quá trình conversion dữ liệu sang
dạng khác khi dữ liệu xử lý ở tầng nghiệp vụ.
Validation: JSF hỗ trợ chuyển đổi bằng thẻ (<f:validator>) và có thể validation
tùy chỉnh(bằng cách thực thi các interface validation) trong ứng dụng web.
Error Handling: JSF hỗ trợ bạn kiểm soát dữ liệu ngay khi nhập vào từ giao diện
như ‘giá trị nhập vào phải là 1 số’ hoặc ‘nhập sai định dạng dữ liệu’. Thông báo lỗi
sẽ được hiển thị ngay khi người dùng submit dữ liệu.
Custom Components
Internationalization: JSF cho phép quản lý vấn đề đa ngôn ngữ trong ứng dụng.
Alternative Renderers: Tùy theo client, JSF sẽ renders ra các dạng định dạng
khác nhau.
Model-View-Controller Architecture: JSF cung cấp kiến trúc MVC (Model
View Control).
Page 9


Hình 1.1: Mô hình MVC trong JSF Framework
1.7 Các thành phần chính của JSF

JSF có những quy định của nó nhằm đưa ra các khái niệm cơ bản cho những
element mà nó cung cấp. Để sử dụng được các element của JSF bạn phải hiểu
được những khái niệm và những quy đinh trong JSF.
UI Component (còn gọi là một control hay đơn giản là 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.

Hình 1.2: Mô hình UI Components trong JSF
Rederer
- Trả lời cho việc hiển thị một UI component và trao đổi một dữ liệu nhập của user
Page 10

vào giá trị của component.
- Renderer có thể được thiết kế để làm việc với một hoặc nhiều UI component, và
một UI component có thể tập hợp với nhiều renderer khác nhau.
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.
Backing beans (hay còn gọi là Managed Bean)
- Backing beans phải được đăng ký với tập tin cấu hình (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 với Backing Beans sử dụng EL language với
syntax #{EL expression} (dùng dấu # thay cho dấu $).
- Beans có khả năng hỗ trợ Biến cố - Event Handling, hỗ trợ chuyển trang
Navigation, thực hiện Validation.
Converter
- Hỗ trợ cơ chế ép kiểu dữ liệu trong quá trình xử lý.
Event/listener
- Hỗ trợ cơ chế đón nhận biến cố và xử lý biến cố (Event Handling) trên khái niệm
của M (Model) trong MVC kết hợp với Managed Bean.

Messages
- 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ữ.
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
Page 11

(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.
1.8 Managed Beans
Định nghĩa
Managed bean là một lớp Java bình thường, được đăng ký và được quản lý bởi
JSF framework, managed bean được sử dụng như là tầng model của UI component.
Để một lớp java là một managed bean, bạn phải cấu hình nó trong configuration file
(cụ thể trong jsf gọi là faces-config.xml)
ManagedBean: đăng ký java class là managed bean, với thuộc tính name, nếu
không chỉ rõ thuộc tính name thì managed bean sẽ mặc định lấy tên class với chữ
cái đầu tiên viết thường là tên managed bean. Trong trường hợp trên, tên của
managed bean là userBean. Mỗi khi bean được định nghĩa, nó có thể được truy cập
bởi các UI components của JSF (khi JSF render một page, nó sẽ gọi phương thức
getName, khi user submit page, nó sẽ gọi phương thức setName để thiết lập lại giá
trị của managed bean)
1.9 Cấu hình Beans
Configuring Beans thường sử dụng file cấu hình là WEB-INF/faces-config.xml.
Tuy nhiên cũng có thể cấu hình thông tin trong file cấu hình sau:

- File tên: là META-INF/faces-config.xml.
Ví dụ:
<web-app>
<context-param>
<param-name>javax.faces.CONFIG_FILES</param-name>
<param-value>
WEB-INF/navigation.xml,WEB-INF/beans.xml
</param-value>
</context-param>
Page 12


</web-app>

- Danh sách các file trong tham số javax.faces.CONFIG_FILES bên trong WEB
INF/web.xml.
- Một bean được định nghĩa bằng element managed-bean bên trong element faces
config. Bạn có thể xác định tên, lớp và scope của bean.
- Scope có thể là request, session, application hoặc none. Scope none có nghĩa là
đối tượng không được giữ ở 1 trong 3 scope.
1.10 Beans Scopes
1.10.1. Request
Phạm vi của request tồn tại ngắn, nó bắt đầu khi một HTTP request được submit
và kết thúc khi response được gửi trở lại cho client.
Ghi chú: Nếu một request là forward đến một request khác, tất cả các cặp
name/value lưu trong request scope được mang đến request mới. Trái lại, nếu một
request được redirect, dữ liệu của request sẽ bị mất.
1.10.2. Session scope
Session Scope beans được tạo ra và được lưu trữ thành các đối tượng trong
session. Session sẽ tắt nếu ứng dụng web gọi phương thức invalidate trên đối tượng

HttpSession hoặc nếu nó time out.
1.10.3. Application Scope
Application scope giống như một session nhưng được tồn tại trong suốt khoảng
thời gian của ứng dụng web (giống như một biến toàn cục), nó chỉ mất khi ứng dụng
web đóng.
1.1.1 Tổng quan các thẻ JSF Core

Page 13

Thẻ
Mô tả
f:attribute
Thiết lập một thuộc tính (khóa/giá trị)
f:param
Thêm một parameter
f:facet
Thêm một facet
f:actionListener
Thêm một action listener
f:setPropertyActionListener
Thêm một action listener thiết lập một property
f:valueChangeListener
Thêm một value change listener
f:phaseListener
Thêm một phase listener
f:event
Thêm một thành phần hệ thống event listener
f:converter
Thêm một converter tùy ý
f:convertDateTime

Thêm một datetime converter
f:convertNumber
Thêm một number converter
f:validator
Thêm một validator
f:validateDoubleRange
Kiểm tra giá trị nằm trong khoảng kiểu Double
f:validateLength
Kiểm tra độ dài của giá trị
f:validateLongRange
Kiểm tra giá trị nằm trong khoảng kiểu Long
f:validateRequired
Kiểm tra giá trị có được nhập vào hay không
f:validateRegex
Kiểm tra giá trị có thích hợp điều kiện hay không
f:validateBean
Sử dụng Bean Validation API để kiểm tra
f:loadBundle
Tải một gói tài nguyên, các gói thuộc tính như
Map
f:selectitems
Chỉ định chọn nhiều item
f:selectitem
Chỉ định chọn một item
f:verbatim
Điều chỉnh nội dung, văn bản
f:viewParam
Xác định một view parameter khởi tạo bởi một
request parameter
f:metadata

Chứa view parameter
f:ajax
Cho phép dùng Ajax
f:view
Tạo một khung nhìn cấp ngoài cùng
f:subview
Tạo một khung nhìn cấp con
Page 14

Bảng 1.1: Bảng các thẻ JSF core
Attribute, Parameter và Facet.
- Các thẻ f:attribute, f:param và f:facet là những thẻ thường dùng để thêm thông tin
vào một thành phần. Có thể thiết lập một thuộc tính trong một trang và lập trình
truy xuất nó.
- Thẻ f:param cũng cho phép xác định một cặp tên/giá trị, nhưng giá trị được đặt
trong một thành phần con khác. Có thể sử dụng f:param nếu cần thêm vào các giá
trị cùng tên.
- Thẻ f:facet thêm một thành phần vào facet map. Một trang Facets gốc có hai facet
là “head” và “body”.
Thuộc tính
Mô tả
name
Tên của thuộc tính, tham số hoặc facet
value
Giá trị của thuộc tính hoặc tham số (không áp dụng cho
facet)
binding
Kết nối với đối tượng dữ liệu (chỉ dùng cho f:param)
id
Id của thẻ (chỉ dùng cho f:param)

Bảng 1.2: Bảng các thuộc tính của Attribute, Parameter và Facet

1.11 Tổng quan các thẻ JSF HTML
Các thẻ JSF HTML được chia thành các nhóm khác nhau tùy theo công dụng và
đặc tính của các thẻ.
Input
Thẻ
Mô tả
h:inputText
Điều khiển nhập dạng single-line
h:inputTextarea
Điều khiển nhập dạng multiline
h:inputSecret
Điều khiển nhập dạng password
h:inputHidden
Hidden field
Page 15

Bảng 1.3: Bảng các thẻ Input trong JSF HTML
Output
Thẻ
Mô tả
h:outputLabel
Text dạng label
h:outputLink
Link liên kết
h:outputFormat
Text dạng single-line nhưng định dạng thông điệp phức
tạp
h:outputText

Text dạng single-line
h:outputStylesheet
Thêm một stylesheet vào trang
h:outputScript
Thêm một script vào trang
h:graphicImage
Hiển thị một image
Bảng 1.4: Bảng các thẻ Output trong JSF HTML
Command
Thẻ
Mô tả
h:commandButton
Button: submit, reset hoặc pushbutton
h:commandLink
Link dạng button
Bảng 1.5: Bảng các thẻ Command trong JSF HTML

Selection
Thẻ
Mô tả
h:selectOneListbox
Danh sách chỉ được chọn 1 item
h:selectOneMenu
Danh mục chỉ được chọn 1 item
h:selectOneRadio
Radio button chỉ được chọn 1 item
h:selectBooleanCheckbox
Checkbox
h:selectManyCheckbox
Danh sách các checkbox

h:selectManyListbox
Danh sách được chọn nhiều listbox
h:selectManyMenu
Danh mục được chọn nhiều item
Bảng 1.6: Bảng các thẻ Selection trong JSF HTML
Page 16


Layout
Thẻ
Mô tả
h:panelGrid
Layout dạng lưới
h:panelGroup
Nhóm các panel
Bảng 1.7: Bảng các thẻ Layout trong JSF HTML

DataTable
Thẻ
Mô tả
h:dataTable
Table để lưu dữ liệu
Bảng 1.8: Bảng các thẻ DataTable trong JSF HTML

Message
Thẻ
Mô tả
h:message
Hiển thị thông điệp gần đây
h:messages

Hiển thị tất cả các thông điệp
Bảng 1.9: Bảng các thẻ Message trong JSF HTML

Page 17

II. Web bán vé xe trực tuyến
2.1 Giới thiệu

Web bán vé xe trực tuyến là website dành riêng cho lĩnh vực đặt vé trực tuyến.
Phù hợp cho các đơn vị chủ quản có thể quản trị toàn bộ thông tin, quản lý toàn bộ
tiến trình đặt tour, đặt xe, đặt vé trực tuyến, hỗ trợ mạnh khả năng khai thác và
phát triển mạng lưới khách hàng trên internet.

2.2 Trang chủ


Hình 2.1 Trang chủ
Page 18

2.3 Các chức năng của Admin
2.3.1. Chức năng login vào hệ thống
Người quản trị đăng nhập vào hệ thống để có các chức năng quản lý đặt vé xe
trực tuyến.

Hình 2.2 Giao diện login
2.3.2. Chức năng của admin
Sau khi đăng nhập vào hệ thống, người quản trị có thể quản lý các chức năng
chính.

Hình 2.3 Chức năng của Admin

a. Quản lý xe
Page 19

- Người quản trị có thể quản lý thêm các loại xe hoặc co thể xóa các loại xe sau
khi đã được thêm vào.

Hình 2.4 Quản lý xe
- Cập nhật thông tin xe

Hình 2.5 Thay đổi thông tin loại xe
b. Quản lý đặt vé
- Người dùng quản lý đặt vé cũng như thêm hoặc xóa các vé xe
Page 20


Hình 2.6 Quản lý đặt vé xe
- Cập nhật thông tin đặt vé

Hình 2.7 Cập nhật thông tin đặt vé
c. Quản lý tài khoản
- Người dùng có thể xóa,thêm thông tin người quản trị vào hệ thống
Page 21


Hình 2.8 Quản lý tài khoản
- Cập nhật thông tin tài khoản

Hình 2.9 Cập nhật thông tin tài khoản
d. Quản lý thời gian
- Quản lý việc khởi hành,kết thúc cũng như tổng thời gian chạy

Page 22


Hình 2.10 Quản lý thời gian chạy
- Cập nhật thông tin thơi gian chạy

Hình 2.11 Cập nhật thông tin thời gian chạy
e. Quản lý tuyến
- Người dùng quản lý các tuyến đi, điểm đi và điểm đến
Page 23


Hình 2.12 Quản lý tuyến đi
- Cập nhật thông tin tuyến đi

Hình 2.12 Thay đổi thông tin tuyến
f. Quản lý bến
- Người dùng quản lý các bên đi, bến đến
Page 24


Hình 2.13 Quản lý bến
- Cập nhật thông tin bến

Hình 2.14 Cập nhật thông tin bến
2.4 Đặt vé
- Chức năng này giúp cho hành khách có thể tìm được tuyến xe mình cần đi.
Page 25

Hình 2.15 Giao diện đặt vé

Bước 1: chọn điểm đi và điểm đến, sau đó nhập vào ngày tháng năm để xác định tuyến
cần đi.sau đó dùng chuột nhấp vào nút tìm chuyến.

Hình 2.16 Chọn điểm đi và điểm đến
- Trước khi nhấp nút Tìm chuyến.