xây dựng ứng dụng website quản lý tài sản trực quan bằng hình ảnh

Nội dung chính của luận văn bao gồm: Chương 1: Tổng quan: Trình bày tổng quan về hiện trạng, các vấn đề cần giải quyết và các hướng để giải quyết yêu cầu của bài toán… Chương 2: Cơ sở

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

Sinh viên thực hiện: Cán bộ hướng dẫn: Trần Minh Hậu Ths Nguyễn Đức Khoa

Cần Thơ, 2015

TRƯỜNG ĐẠI HỌC CẦN THƠ KHOA CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG

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

Sinh viên thực hiện: Cán bộ hướng dẫn:

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: http://www.lrc.ctu.edu.vn/

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 đượ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ơ, Trường Đại học Cần Thơ vào ngày 26 tháng 6 năm

2015

XÂY DỰNG ỨNG DỤNG WEBSITE QUẢN

LÝ TÀI SẢN TRỰC QUAN BẰNG

HÌNH ẢNH

LỜI CẢM ƠN

Em xin gửi lời cảm ơn chân thành và biết ơn sâu sắc tới Trường Đại học Cần Thơ cùng toàn thể thầy, cô giáo đã tạo điều kiện học tập và giảng dạy cho em suốt thời gian học tập tại đây Kiến thức của các thầy, cô giáo giảng dạy là vô cùng quý báu và là hành trang cần thiết cho em sau khi ra trường

Em xin gửi lời cảm ơn chân thành và biết ơn sâu sắc tới toàn thể giáo viên trong 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ơ đã tận tình giảng dạy những kiến thức quý báu và giúp đỡ cho em rất nhiều để có cơ sở thực hiện đề tài tốt nghiệp

Em xin gửi lời cảm ơn chân thành và biết ơn sâu sắc tới thầy Nguyễn Đức Khoa (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ơ) đã chỉ bảo và hướng dẫn tận tình cho em trong suốt quá trình làm việc

Tôi xin cảm ơn tới toàn thể các bạn trong lớp Tin học Ứng dụng khóa 37 cùng toàn thể bạn bè đã giúp đỡ, ủng hộ và khuyến khích tôi trong quá trình nghiên cứu và thực hiện

Và cuối cùng, con xin gửi lời cảm ơn và lòng biết ơn tới bố, mẹ, anh chị, cảm ơn những người thân yêu của tôi, đã nuôi nấng, dạy dỗ và luôn động viên, làm chỗ dựa tinh thần cho con trong cuộc sống cũng như trong học tập và làm việc

Xin chân thành cảm ơn!

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

Trần Minh Hậu

MỤC LỤC

Trang

Lời cảm ơn 1

Mục lục 2

Danh mục hình i

DANH MỤC BẢNG iii

Danh mục ký hiệu và viết tắt iv

Tóm tắt v

Từ khóa v

Abstract vi

Keyword vi

Chương 1 Tổng quan 1

1.1 Đặt vấn đề 1

1.2 lịch sử phát triển đề tài 1

1.3 Phạm vi của đề tài 2

1.4 Phương pháp nghiên cứu 2

Chương 2 Cơ sở lý thuyết 3

2.1 JQUERY 3

2.1.1 Giới thiệu về JQuery 3

2.1.2 Những lợi ích mà JQuery đem lại 3

2.2 JSF 3

2.2.1 Giới thiệu về JSF 3

2.2.2 Các thành phần của JSF Framework 6

2.3 Primefaces 9

2.3.1 Giới thiệu primefaces 9

2.3.2 Primefaces Component 10

Hibernate và truy vấn HQL 12

2.3.3 Khái niệm ORM Framework và Persistent layer 12

2.3.5 Kiến trúc Hibernate Framework 14

2.3.6 Các thành phần của Hibernate project (các thành phần thư viện) 15

2.3.7 Lợi ích khi sử dụng Hibernate cho persistent layer 15

2.3.8 Cấu hình Hibernate 16

2.3.9 Truy vấn HQL 20

2.4 Ảnh Panorama 23

2.4.1 Giới thiệu 23

2.4.2 Một số phần mềm tạo ảnh Panorama 24

Chương 3 Nội dung và kết quả nghiên cứu 25

3.1 MÔ TẢ BÀI TOÁN 25

3.2 Giải pháp phân tích, thiết kế các mô hình 25

3.2.1 Sơ đồ Use Case 25

3.2.2 Mô tả chi tiết 28

3.2.3 Mô hình tập thực thể mối kết hợp 35

3.2.4 Mô hình vật lý 36

3.2.5 Mô hình cơ sở dữ liệu quan hệ 37

3.2.6 Sơ đồ chức năng cho ứng dụng BFD 38

3.2.7 Sơ đồ lớp 39

3.2.8 Sơ đồ tuần tự 40

3.3 KẾT QUẢ XÂY DỰNG HỆ THỐNG 42

3.3.1 Giao diện đăng nhập 42

3.3.2 Giao diện trang chủ 43

3.3.3 Giao diện Loại tài sản 43

3.3.4 Giao diện lập phiếu nhập 46

3.3.5 Giao diện lập phiếu nhập kho tài sản 47

3.3.6 Giao diện lập phiếu bàn giao tài sản 47

3.3.7 Giao diện lập phiếu sửa chữa tài sản 49

3.3.8 Giao diện lập phiếu thanh lý tài sản 50

3.3.10 Giao diện thống kê tài sản trong phòng: 52 KẾT LUẬN VÀ KIẾN NGHỊ 54 Tài liệu tham khảo 56

DANH MỤC HÌNH

Hình 2.1 Mô hình MVC 6

Hình 2.2 JSF component 8

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

Hình 2.4 Kết quả so sánh của PrimeFace 10

Hình 2.5 Minh họa kiến trúc Hibernate 14

Hình 3.1 Use Case chức năng hệ thống 25

Hình 3.2 Use case phân rã chức năng quản lý và cập nhật các nghiệp vụ 26

Hình 3.3 Use case phân rã chức năng cập nhật danh mục 26

Hình 3.4 Use case phân rã chức năng quản lý và cập nhật các nghiệp vụ 27

Hình 3.5 Use case phân rã chức năng quản lý nhân viên 27

Hình 3.6 Use case phân rã chức năng báo cáo, thống kê 28

Hình 3.7 Mô hình tập thực thể kết hợp 35

Hình 3.8 Mô hình vật lý 36

Hình 3.9 Sơ đồ cơ sở dữ liệu quan hệ 37

Hình 3.10 Sơ đồ chức năng cho ứng dụng 38

Hình 3.11 Sơ đồ lớp 39

Hình 3.12 Sơ đồ tuần tự đăng nhập 40

Hình 3.13 Sơ đồ tuần tự thêm Phiếu Nhập 40

Hình 3.14 Sơ đồ tuần tự cập nhật nhân viên 41

Hình 3.15 Giao diện đăng nhập 42

Hình 3.17 Giao diện trang chủ 43

Hình 3.18 Giao diện danh sách loại tài sản 43

Hình 3.19 Giao diện thêm mới sản phẩm 44

Hình 3.20 Giao diện textbox tìm kiếm 44

Hình 3.21 Giao diện xóa loại tài sản 44

Hình 3.22 Giao diện chỉnh sửa thông tin loại tài sản 45

Hình 3.23 Giao diện thông tin loại tài sản 45

Hình 3.25 Bảng danh sách loại tài sản cần nhập 46

Hình 3.26 Trang lập phiếu nhập 47

Hình 3.27 Dialog sửa thông tin tài sản 47

Hình 3.28 Trang lập bàn giao tài sản 48

Hình 3.29 PickList các tài sản trong phòng 48

Hình 3.30 Giao diện thêm phiếu bàn giao 49

Hình 3.31 Trang sửa chữa tài sản tài sản 49

Hình 3.32 Trang thanh lý tài sản 50

Hình 3.33 Trang xem thống kê tài sản 50

Hình 3.34 Tab lịch sử bàn giao 51

Hình 3.35 Tab lịch sử sửa chữa 51

Hình 3.36 Tab vị trí trong phòng 51

Hình 3.37 Tài sản khi đƣợc di chuyển sang vị trí khác 52

Hình 3.38 Trang thống kê tài sản trong phòng 52

Hình 3.39 Dialog xem các tài sản trong phòng 53

DANH MỤC BẢNG

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

Bảng 2.2 Attribute của Primefaces Error! Bookmark not defined. Bảng 3.1 Tập thực thể bophan 28

Bảng 3.2 Tập thực thể donvitinh 28

Bảng 3.3 Tập thực thể nhacungcap 29

Bảng 3.4 Tập thực thể quocgia 29

Bảng 3.5 Tập thực thể tinhtrangsudung 29

Bảng 3.6 Tập thực thể hangsanxuat 30

Bảng 3.7 Tập thực thể nhanvien 30

Bảng 3.8 Tập thực thể phong 30

Bảng 3.9 Tập thực thể bangiao 31

Bảng 3.10 Tập thực thể loaitaisan 31

Bảng 3.11 Tập thực thể phieunhap 31

Bảng 3.12 Tập thực thể kiemtradinhki 32

Bảng 3.13 Tập thực thể nhapdanhmuc 32

Bảng 3.14 Tập thực thể phieusuachua 32

Bảng 3.15 Tập thực thể thanhly 33

Bảng 3.16 Tập thực thể taisan 33

Bảng 3.17 Tập thực thể bangiaoct 33

Bảng 3.18 Tập thực thể suachuact 34

Bảng 3.19 Danh sách các tập thực thể 34

DANH MỤC KÝ HIỆU VÀ 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

tài luận văn “Xây dựng WEBSITE quản lý tài sản trực quan bằng hình ảnh” nhằm

giải quyết vấn đề trên

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 Người dùng có thể dễ dàng quản lý các nghiệp vụ: Quản lý nhập tài sản, Quản lý các quá trình bàn giao, Quản lý sửa chữa tài sản, Quản lý thanh lý tài sản Cuối cùng, ứng dụng ảnh Panorama có thể hiển thị tài sản đang ở vị trí nào trong phòng

Nội dung chính của luận văn bao gồm:

Chương 1: Tổng quan: Trình bày tổng quan về hiện trạng, các vấn đề cần giải quyết

và các hướng để giải quyết yêu cầu của bài toán…

Chương 2: 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, giới thiệu ảnh Panorama và cách tạo ảnh Panorama

Chương 3: Nội dung và kết quả nguyên cứu: 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ị

TỪ KHÓA

Từ khóa: JSF, Primefaces, Hibernate, HQL, Quản lý Tài Sản

ABSTRACT

Nowadays, information technology is being developed strongly, quickly and penetrate through many fields of science, engineering as well as in life, especially management task in general and financial management in particular

Previously, assets management is depended on bills, books, coupons,… Furthermore, the assets management needs a lot of different operations such as import, export, repair, handover, periodically check,… thus it is difficult to manage a company

of thousands of assets with inconsistent bills and recorded documents Therefore the thesis “BUILDING VISUAL ASSETS MANAGEMENT WEBSITE” is designed to solve this problems

Through research and implementation, complete website meets the objectives of the subject Users can easily manage the operations such as: assets import management, handover process management, assets repair management, assets liquidation management Finally, Panorama application can show the right position of assets in the room

Chapter 1 Overview: Presenting an overview of the current situation, problems,

and solution

Chapter 2 Theoretical Foundations: Overview of JSF, Primeface, Jquery,

Hibernate and Panorama

Chapter 3 Contents and results

KEYWORD

Keyword: JSF, Primefaces, Hibernate, HQL, Assets management Website

CHƯƠNG 1 TỔNG QUAN

1.1 ĐẶT VẤN ĐỀ

Quản lý tài sản là một nhu cầu không thể thiếu trong xã hội ngày càng phát triển hiện nay, công việc quản lý tài sản đòi hỏi cần phải có sự chính xác, nhanh chóng và tiện lợi nhằm đáp ứng nhu cầu của khách hàng cũng như người quản lý Việt Nam đang phát triển nên việc quản lý tài sản là nhu cầu thiết yếu và cần thiết cho tất cả mọi người

Nhưng tài sản có rất nhiều loại: bàn ghế, xe đạp, máy tính, tủ lạnh, Các nghiệp vụ quản lý tài sản bao gồm: nhập, bàn giao, quá trình sửa chữa, bảo dưỡng định kì, thanh lý,… Với một căn nhà nhỏ thì có thể quản lí dễ dàng nhưng với trường học, bệnh viện, khách sạn quản lí sẽ rất khó khăn

Với xu thế phát triển như vũ bão hiện nay, công nghệ thông tin đã đem lại những lợi ích không thể phủ nhận với mọi mặt đời sống xã hội Sự ưu việt của chiếc máy tính

đã giúp con người khắc phục những hạn chế, tăng năng suất và hiệu quả công việc Xây dựng ứng dụng quản lý tài sản đề có thể hình dung trong phòng có những loại tài sản nào bằng một hình ảnh trực quan nhất, chính xác nhất Các nghiệp vụ xử lý thực hiện một cách đồng bộ Để con người có thể quản lý dễ dàng, tránh mất mát, tiết kiệm chi phí, dễ dáng định giá tài sản, hỗ trợ công tác kế toán

- Giao diện vẫn chưa thật thân thiện với người dùng vì hạn chế về công nghệ

- Các tài sản chỉ thể hiện dưới dạng 1 textfield người dùng khó hình dung hình ảnh và vị trí

- Đa phần viết bằng winform nên chỉ khi đến công ty, trụ sở,… thực hiện được

Vì vậy tôi xây dựng trang web này nhằm bổ sung thêm những chức năng cần thiết:

- Xây dựng ảnh Panorama cho phép hình dung hình ảnh và vị trí tài sản

- Giao diện thân thiện người dùng

- Áp dụng công nghệ mới JSF, Primeface, Hibernate để triển khai Cho phép triển khai ứng dụng dưới dạng Website để người dùng ở bất cứ nơi đâu cũng có thể thao tác được

1.3 PHẠM VI CỦA ĐỀ TÀI

- Đối với Admin:

 Quản lý và cập nhật danh mục

 Quản lý và cập nhật các nghiệp vụ quản lý tài sản

 Quản lý thống kê tài sản

 Quản lý nhân viên

- Đối với User:

 Quản lý và cập nhật các nghiệp vụ quản lý tài sản

 Quản lý và cập nhật danh mục

1.4 PHƯƠNG PHÁP NGHIÊN CỨU

- 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

 Nắm vững cách tạo ảnh Panorama

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

 Các nghiệp vụ quản lý tài sản được diễn ra nhanh chóng

 Hỗ trợ việc thống kê tài sản

 Giúp người quản lý xem và thống kê các phiếu

 Giúp người quản lý hình dung ra tài sản nằm ở vị trí nào

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT

2.1 JQUERY

2.1.1 Giới thiệu về JQuery

JQuery là thư viện JavaScript được thiết kế nhằm làm đơn giản hóa việc lập trình đối với các kịch bản thi hành phía máy tính của người dùng (Client – side scripting) Phiên bản đầu tiên của jQuery được công bố vào tháng một năm 2006 tại BarCamp NYC bởi John Resig Đến nay, jQuery được xem là thư viện JavaScript phổ biến nhất thế giới và được sử dụng rộng rãi trên hầu hết các trang web hiện đại

JQuery được cung cấp miễn phí dưới dạng phần mềm mã nguồn mở, theo giấy phépMIT và GNUGeneral Public License Để sử dụng jQuery cho website của mình, bạn chỉ việc tải phiên bản mới nhất tại địa chỉ:http://jquery.com/rồi gắn vào website của mình là có thể sử dụng

2.1.2 Những lợi ích mà JQuery đem lại

Khi sử dụng jQuery cho mục đích xây dựng các kịch bản định trước, thi hành trên

trình duyệt tại máy truy cập trang web (Máy của người dùng – Client side), các nhà

phát triển ứng dụng hoạt động trên nền tảng web nhận thấy rằng có khá nhiều ưu điểm nhận được từ thư viện này, dưới đây là một số lợi ích thường được nhắc tới khi sử dụng jQuery cho trang web của bạn:

 Có thể hoạt động tốt trên hầu hết các trình duyệt web

 Cú pháp đơn giản, dễ sử dụng và đem lại hiệu quả cao

 Cho phép thao tác trên tập hợp các thành phần thuộc DOM

 Hỗ trợ việc tạo “hoạt cảnh” cho trình bày và tương tác trên giao diện

 Thư viện mã nguồn phong phú

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

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,

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

2.2.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.2.1.3 Mục đích ra đời của JSF

Bao gồm 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

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.2.2 Các thành phần của JSF Framework

2.2.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.2.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 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.2.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

Hình 2.2 JSF component

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

Hỗ trợ cơ chế “Look and Feel”

2.2.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.2.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ử

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

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

2.3.2 Primefaces Component

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

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

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

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

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

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

2.3.3.3 Quy tắc để tạo ra 1 lớp persistent

Những lớp Java mà đối tượng hay thể hiện của chúng được lưu trữ vào bảng cơ sở

dữ liệu được gọi là lớp persistent trong Hibernate

Hibernate framework sẽ hoạt động tốt nhất nếu các lớp này tuân theo một số quy tắc lập trình đơn giản (được gọi là mô hình lập trình POJO – Plain Old Java Object) Sau đây là những quy tắc để tạo 1 lớp persistent trong Hibernate:

 Phải có 1 phương thức khởi tạo mặc định (phương thức khởi tạo không tham số)

 Nên chứa một thuộc tính ID để ánh xạ tới khóa chính trong bảng cơ sở dữ liệu

 Tất cả các thuộc tính trong lớp cần đặt “private” hoặc protected, hoặc default (Hibernate không xử lý các thuộc tính để public)

 Chứa các phương thức set*, get*, is* tương tự như 1 lớp JavaBean

 Class không nên để final

 Các phương thức không nên để public final, chỉ nên để public

 Các lớp này không được kế thừa (extend) các lớp đặc biệt khác mà chỉ có thể kế thừa các lớp persistent khác

Dựa trên 1 số quy tắc trên mình đã tạo ra 1 lớp persistent trong ứng dụng Hibernate nhƣ sau:

Employee.java

public class Employee {

private int id ;

private String firstName ;

private String lastName ;

private int salary ;

public Employee ()

public Employee (String fname, String lname, int salary ) {

this firstName fname ;

this lastName lname ;

this salary salary ;

public void setFirstName (String first_name ) {

this firstName first_name ;

public String getLastName ()

return lastName ;

public void setLastName (String last_name ) {

this lastName last_name ;

public int getSalary ()

return salary ;

public void setSalary (int salary ) {

this salary salary ;

}

2.3.4 Giới thiệu Hibernate Framework.

Hibernate là một trong những ORM Framework Hibernate framework là một framework cho persistence layer Nhƣ vậy, nhờ có Hibernate framework mà giờ đây

bận tâm nhiều về persistence layer nữa Hibernate giúp lưu trữ và truy vấn dữ liệu quan hệ mạnh mẽ và nhanh Hibernate cho phép bạn truy vẫn dữ liệu bằng ngôn ngữ SQL mở rộng của Hibernate (HQL) hoặc bằng SQL thuần

2.3.5 Kiến trúc Hibernate Framework

Hình 2.5 Minh họa kiến trúc Hibernate

Mô tả chức năng các file cấu hình trong Hibernate:

A. Mỗi table trong database là một object trong Hibernate Do đó, bạn cần có một java bean cho mỗi table trong database Các java bean này sẽ có các getters/setters

và một số ngoại lệ theo quy ước của Hibernate

B Mỗi file mapping (ánh xạ) có dạng ***.hbm.xml có nhiệm vụ đặc tả mỗi quan

hệ giữa các thuộc tính của đối tượng và các trường trong bảng CSDL

C File Hibernate.cfg.xml: Đây là tập tin được load đầu tiên khi khởi chạy ứng dụng Hibernate Nó chứa các thông tin sau:

 Connection JDBC (URL, Driver class, Username, password, pool_size,…)

 SQL Dialect

 Hibernate configuration (show_sql, format_sql, use_sql_comment,

default_schema, order_updates,…)

 Hibernate cache configuration (class cache, collection cache)

 Hibernate transaction configuration (factory_class, auto_close_sesion, manager_lookup_class)

 Miscellaneous confguration (current_session_context_class, factory_class)

 Mapping source configuration

2.3.6 Các thành phần của Hibernate project (các thành phần thư viện)

 Hibernate Core: Cung cấp các chức năng cơ bản của persistent layer cho các ứng dụng java với các APIs và hỗ trợ XML Mapping metadata

 Hibernate Annotations: các map class với JDK 5.0 Anootations, bao gồm Hibernate Validator

 Hibernate EntityManager: sử dụng EJB 3.0 API trong JSE hoặc với bất kỳ JEE nào

 Hibernate Tools: các tool tích hợp với Eclipse và Ant giúp tạo ra các persistent object từ 1 schema có sẵn trong database (reverse-engineering) và từ các file hbm sinh ra các class java thực hiện các persistent object rồi Hibernate

tự tạo tác object trong database (forward-engineering)

 NHibernate: Hibernate cho NET Framework

 Jboss Seam: Một Java EE 5.0 framework cho phát triển các ứng dụng JSF, Ajax và EJB 3.0 với sự hỗ trợ của Hibernate Seam hiện rất mới và tỏ ra rất mạnh để phát triển các ứng dụng Web 2.0 Nó tích hợp đầy đủ tất cả các công nghệ “hot” nhất hiện nay

2.3.7 Lợi ích khi sử dụng Hibernate cho persistent layer

Trước tiên cần kể tới những khó khăn khi triển khai ứng dụng business dùng ngôn ngữ SQL thuần túy:

 Mã thì rải rác khắp nơi đến những nơi không quản lý nổi

 Nếu thiết kế bị thay đổi sau khi phát triển ứng dụng, phải trả giá rất đắt để nhận ra những nơi cần phải thay đổi

 Khó tìm và sửa lỗi

 Quản lý các kết nối database là một nhiệm vụ cực kỳ khó khăn vì mã SQL nằm rời rạc, kết nối database cũng vậy

 Quản lý transaction là một nhiệm vụ phức tạp

Lợi ích khi sử dụng Hibernate (với HQL – Hibernate Query Language)

 Tìm kiếm và sắp xếp nhanh

 Làm việc được với dữ liệu lớn

 Làm việc trên nhóm dữ liệu

 Joining, aggregating

 Chia sẽ nhiều người dùng và nhiều vùng

 Giải quyết tương tranh (Transaction)

Hibernate được cấu hình theo hai bước:

- Cấu hình service bao gồm: tham số kết nối CSDL, caching và tập các lớp persistent

- Cung cấp cho Hibernate các thông tin về các lớp được persist

Để giải quyết hai bước theo yêu cầu của Hibernate, chúng ta sẽ thảo luận từng vấn

đề sau:

- Tạo file cấu hình hibernate.cfg.xml

- Xây dựng các file định nghĩa ánh xạ để cung cấp cho Hibetnate các thông tin về các lớp persistent

dụng thì hibernate.cfg.xml sẽ override lên các thiết lập được tìm thấy trong hibernate.properties

Trước khi cấu hình Hibernate, đầu tiên bạn nên xác định service giữ kết nối đến CSDL như thế nào Kết nối đến CSDL có thể được cung cấp bởi Hibernate hoặc từ JNDI DataSource Một phương pháp thứ ba là kết nối JDBC được cung cấp bởi người dùng

Sử dụng kết nối JDBC được quản lý bởi Hibernate:

Sau đây là file cấu hình mẫu sử dụng loại kết nối JDBC được quản lý bởi Hibernate:

1 <?xml version="1.0"?>

2 <!DOCTYPE hibernate-configuration PUBLIC

3 "-//Hibernate/Hibernate Configuration DTD 3.0//EN"

Hibernate cũng cần biết vị trí (đường dẫn tương đối so với classpath của ứng dụng)

và tên của các mapping file - mô tả persistent class

Sử dụng JNDI DataSource

Để sử dụng Hibernate với kết nối CSDL được cung cấp bởi JNDI DataSource, bạn cần thay đổi một vài chỗ trong file cấu hình như sau:

1 <?xml version="1.0"?>

2 <!DOCTYPE hibernate-configuration PUBLIC

3 "-//Hibernate/Hibernate Configuration DTD 3.0//EN"

2.3.8.2 Một số thuộc tính khi cấu hình Hibernate

Các thuộc tính cấu hình JDBC:

1 hibernate.connection.driver_class: lớp driver class

2 hibernate.connection.url: url để kết nối tới CSDL thông qua driver

3 hibernate.connection.username: uername để truy nhập vào CSDL

4 hibernate.connection.password: password để truy nhập vào CSDL

5 hibernate.connection.pool_size: số lượng tối đa các kết nối tới CSDL trong

1 thời điểm

Các thuộc tính điểu khiển thực hiện của Hibernate:

1 hibernate.dialect: Cho phép hibernate tối ưu hóa SQL cho thích hợp với CSDL quan hệ đặc biệt

2 hibernate.show_sql: hiển thị câu lệnh SQL ra console khi thực thi (cách này thường được chọn để debug thay cho việc ghi log)

3 hibernate.format_sql: định dạng lại câu lệnh SQL và in ra console

4 hibernate.use_sql_comments: cho phép sử dụng comment trong câu lệnh SQL

Các thuộc tính transaction hibernate:

- Hibernate.transaction.factory_class: tên lớp TransactionFactory để sử dụng với Transaction API (mặc định là JDBCTransactionFractory)

- Giá trị của thuộc tính Dialect với từng HQTCSDLQH như sau: [table id=1 /]

2.3.8.3 Cách tạo 1 project Hibernate trong Netbeans

1 Tạo 1 project java application như bình thường và thực hiện add thư viện

Hibernate vào trong Library của Project: Nhấp phải chuột vào Library -> Add Library (Download bản Netbeans full J2EE)

2 Xuất hiện cửa sổ Library Available: Tìm và chọn Hibernate

3 Thư viện Hibernate xuất hiện trong Library project:

2.3.9 Truy vấn HQL

Hibernate Query Language (HQL) là một ngôn ngữ truy vấn hướng đối tượng, tương tự như SQL, nhưng thay vì hoạt động trên các bảng và các cột, HQL làm việc với các các đối tượng persistent và thuộc tính của chúng Truy vấn HQL được chuyển đổi bởi Hibernate vào các truy vấn SQL thông thường sau đó lại thực hiện trên cơ sở

dữ liệu

Mặc dù bạn có thể sử dụng câu lệnh SQL trực tiếp với Hibernate bằng cách sử dụng SQL Native nhưng tốt nhất nên sử dụng HQL để tránh việc làm cho cơ sở dữ liệu thêm phức tạp, và để tận dụng lợi thế của các chiến lược tạo bộ nhớ đệm của Hibernate

Các từ khóa như SELECT, FROM và WHERE,… không phân biệt hoa thường nhưng các thuộc tính như bảng và cột tên là phân biệt hoa thường trong HQL

from Cat

Truy vấn có thể đặt lại tên cho lớp Cat và bạn có thể sử dụng tên này cho truy vấn

from Cat as cat

2.3.9.2 Associations and Joins

Bạn cũng có thể gán bí danh cho các đối tượng có liên quan hoặc các yếu tố của tập các giá trị sử dụng joins với nhau Ví dụ như:

from Cat as cat

inner join cat.mate as mate

left outer join cat.kittens as kitten

from Cat as cat left join cat.mate.kittens as kittens

from Formula form full join form.parameter param

Các loại hỗ trợ tham gia được vay mượn từ ANSI SQL:

inner join

left outer join

right outer join

full join (not usually useful)

2.3.9.3 Hình thức của cú pháp Joins

HQL hỗ trợ hai hình thức liên kết gia nhập: tuyệt đối và rõ ràng

Các truy vấn được hiển thị trong phần trước sử dụng tất cả các hình thức rõ ràng, các

từ khóa được sử dụng một cách rõ ràng trong mệnh đề From Đây là hình thức khuyến khích

Các hình thức tuyệt đối không sử dụng các từ khóa Join Thay vào đó, các Associations được sử dụng dấu chấm-ký hiệu Join tuyệt đối có thể xuất hiện ở bất kỳ câu truy vấn HQL Kết quả join tuyệt đối trong inner joins trong kết quả các lệnh SQL

from Cat as cat where cat.mate.name like '%s%'

2.3.9.4 Mệnh đề Select

Mệnh đề Select giúp chọn bảng hoặc thuộc tính tiêu biểu để trả về kết quả truy vấn

select mate

from Cat as cat

inner join cat.mate as mate

select mother, offspr, mate.name

from DomesticCat as mother

inner join mother.mate as mate

left outer join mother.kittens as offspr

2.3.9.5 Các hàm tổng hợp

Truy vấn HQL có thể trả lại kết quả của các chức năng tổng hợp về thuộc tính:

select avg(cat.weight), sum(cat.weight), max(cat.weight), count(cat)

from Cat cat

Các chức năng tổng hợp được hỗ trợ là:

avg( ), sum( ), min( ), max( )

count(*)

count( ), count(distinct ), count(all )

Các distinct cũng có thể được sử dụng và có ngữ nghĩa tương tự như trong SQL

select distinct cat.name from Cat cat

select count(distinct cat.name), count(cat) from Cat cat

2.3.9.6 Mệnh đề Where

Mệnh đề Where cho phép bạn lọc danh sách các trường hợp trả lại

from Cat as cat where cat.name='Fritz'

from bank.Account account

where account.owner.id.country = 'AU'

Logic: and, or, not

Dấu ngoặc đơn () chỉ ra rằng nhóm in, not in, between, is null, is not null, is empty, is not empty, member of and not member of

"Simple" case, case when then else end, and "searched" case, case when then else end