TRƯỜNG ĐẠI HỌC BÁCH KHOA

KHOA CÔNG NGHỆ THÔNG TIN

Tel. (84-236) 3736949, Fax. (84-236) 3842771
Website: http://dut.udn.vn/khoacntt, E-mail: cntt@dut.udn.vn

BÁO CÁO
ĐỒ ÁN CHUYÊN NGHÀNH CNPM
THIẾT KẾ WEBSITE

ĐỀ TÀI:
XÂY DỰNG WEB THƯƠNG MẠI ĐIỆN TỬ

MÃ HỌC PHẦN: 17.11A

NHÓM SINH VIÊN THỰC HIỆN:

Họ và tên: Lâm Ngọc Huy Lớp: 17T3

Họ và tên: Nguyễn Văn Tự Lớp: 17T3
Họ và tên: Trần Văn Tú Lớp: 17T3

Đà Nẵng, 08/2021
 MỤC LỤC
MỞ ĐẦU …………………………………………………………………………5

CHƯƠNG 1: TỔNG QUAN VỀ REACTJS VÀ SPRING FRAMEWORK.......7

1.1. ReactJS.......................................................................................................7
1.1.1 ReactJS là gì?.....................................................................................7
1.1.2 Các tính năng của react JS là gì?......................................................7
1.1.3 Lợi ích của ReactJs............................................................................8
1.2. Spring Boot Framework............................................................................10
1.2.1. Tổng quan về API RESTful.............................................................10
1.2.2. Spring framework là gì?..................................................................11
1.3. Tổng quan về HTML/CSS........................................................................12
1.3.1. Sơ lược về HTML.............................................................................12
1.3.2. Sơ lược về CSS..................................................................................14
CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HÊ ̣ THỐNG E-COMMERCE.....16
2.1. Khảo sát...................................................................................................16
2.2. Phân tích hệ thống...................................................................................16
2.2.1 Đặc tả hệ thống.................................................................................16
2.2.2 Yêu cầu chức năng...........................................................................17
2.2.3 Yêu cầu phi chức năng.....................................................................17
2.2.4 Mô tả chức năng...............................................................................18
2.2.5 User case...........................................................................................19
2.2.6 Mô hình quan hê dữ liệu..................................................................28
CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG MUA HÀNG......................................29
3.1 Giao diện trang web và chức năng dành cho khách hàng....................29
3.2 Giao diện trang web và chức năng dành cho người bán......................33
3.3 Giao diện trang web và chức năng dành cho admin.............................37
KẾT LUẬN ……………………………………………………………………...39
1. Kết quả đạt được.....................................................................................39
2. Hạn chế của đề tài...................................................................................39
3. Hướng phát triển đề tài..........................................................................39
TÀI LIỆU THAM KHẢO.....................................................................................40

2
 Bảng phân chia công việc
Tên thành viên Tên công việc
Lâm Ngọc Huy + Hỗ trợ thiết kế Database
+ Hỗ trợ viết API cho khách hàng và người
bán hàng
+ Viết API cho admin
+ Frontend cho admin

Nguyễn Quang Tuấn + Thiết kế Database

Hoàng Trịnh Anh Thái
+ Viết API sign in, sign up
+ Viết API các chức năng của Diretor
(thêm, sửa, xoá khách sạn, thống kê khách
sạn)
+ Viết API các chức năng của Admin (mở
khoá director, thống kê admin)
+ Viết API các chức năng chung của tài
khoản (Cập nhật thông tin cá nhân, chỉnh
sửa ảnh, quên mật khẩu)
+Thiết kế Database
+ Viết API chức năng của User (booking,
huỷ booking, các thống kê user)
+ Viết API chức năng search phòng
+ Làm giao diện phía front-end

3
 MỞ ĐẦU

1. Tổng quan về đề tài

Thiết kế website đặt phòng khách sạn trực tuyến hiện là tiêu chí hàng đầu
cho nhu cầu truyền thông dịch vụ của nhiều trung tâm lữ hành cả công và tư trong
vào ngoài nước.
Một trong số những ngành dịch vụ quan trọng nhất hiện nay chính là dịch vụ du
lịch. Du lịch đã được chứng minh là mô ̣t chiếc phao cứu sinh cho rất nhiều cô ̣ng
đồng nông thôn, tuy nhiên sức mạnh thực sự của du lịch vẫn cần được khai thác triê ̣t
để hơn. Ngành du lịch không chỉ là nguồn cung cấp viê ̣c làm hàng đầu, đă ̣c biê ̣t đối
với phụ nữ và thanh niên, mà còn mang đến cơ hô ̣i gắn kết lãnh thổ và hòa nhâ ̣p
kinh tế – xã hô ̣i cho những vùng dễ bị tổn thương nhất.
Du lịch giúp các cộng đồng nông thôn gìn giữ di sản văn hóa và thiên nhiên độc đáo
của họ, hỗ trợ các dự án bảo tồn, bao gồm dự án bảo vệ các loài có nguy cơ bị tuyệt
chủng, các phong tục hoặc bản sắc đã mai mô ̣t.
Bây giờ là thời đại công nghệ, đã có khoảng ít nhất 70% dân số sử dụng điện
thoại thông minh. Trong đó khoảng 80% những người đó rất thông thạo việc tìm
kiếm trên mạng. Việc tìm kiếm thông tin về những chuyến du lịch, đặt khách sạn
bây giờ có thể hoàn tất trong vòng vài giây. Như vậy để những người chủ khách sạn
có thể tiếp cận với khách hàng của mình một cách tốt hơn chỉ có cách duy nhất là
thiết kế và phát triển website chuyên nghiệp phục vụ cho điều đó.

2. Mục đích và ý nghĩa của đề tài

2.1. Mục đích
 Nghiên cứu về cách tổ chức và hoạt động của framework React Js và áp
dụng xây dựng giao diện ứng dụng.

 Nghiên cứu về phương thức nhận và trả dữ liệu của Java Spring
framework và áp dụng xây dựng API cho ứng dụng.

 Xây dựng web application đáp ứng nhu cầu mua hàng online qua mạng,
tra cứu thông tin sản phẩm, trực tiếp đánh giá sản phẩm, dễ dàng thao tác
với nhiều đối tượng.

 Xây dựng được hệ thống quản lý thông tin cửa hàng, khách hàng.

5
  Xây dựng được chức năng thống kê, báo cáo số doanh số của cửa hàng
theo từng tháng, số lượng đơn đặt hàng trong tháng để nhà quản lý có thể
đưa ra những hướng đi phát triển đúng đắn cho thời gian tới.
2.2. Ý nghĩa
 Xây dựng 1 web application giúp cho việc quản lý cửa hàng,mua hàng
online trở nên dễ dàng hơn.

 Thuận tiện và dễ dàng trong việc đặt phòng, tìm kiếm thông tin, tối ưu
hoá thời gian của khách hàng.

3. Phương pháp thực hiện

 Phương pháp quan sát.

 Phương pháp điều tra, khảo sát nhu cầu thực tế, sử dụng các phương
pháp phân tích, điều tra thống kế từ đó xác định các yêu cầu chức năng
và yêu cầu phi chức năng cần thiết.

 Tổng hợp các tài liệu liên quan đến xây dựng và phát triển phần mềm.

4. Bố cục của đề tài

Báo cáo đề tài bao gồm các nội dung sau:

 Mở đầu

 Chương 1: Tổng quan về ReactJs và Spring Framework

 Chương 2: Phân tích và thiết kế hệ thống mua hàng online

 Chương 3: Xây dựng ứng dụng mua hàng online

 Kết luận.

6
 CHƯƠNG 1: TỔNG QUAN VỀ ReactJS VÀ Spring
Framework

ReactJS

1.1.1 ReactJS là gì?

ReactJS hay react là một thư viện, được viết bằng JavaScript, dùng để
xây dựng giao diện người dùng. Tính đến thời điểm hiện tại, đã có
khoảng 1300 developer và hơn 94000 trang web đang sử dụng. ReactJS
được hiểu nôm na là một thư viện, có chứa nhiều JavaScript mã nguồn
và “cha đẻ” đó chính là Facebook. Mục đích chính đó chính là mỗi
website sử dụng reactJS thì phải chạy thật mượt hoặc thật nhanh, có
khả năng mở rộng cao và đơn giản thực hiện.

Về cơ bản, các tính năng của reactJS thường xuất phát từ việc tập trung
các phần mềm riêng lẻ, cho phép các developer có chức năng phá vỡ
giao diện của người dùng từ một cách phức tạp và biến nó trở thành các
phần mềm đơn giản. Hiểu đơn giản thì các render dữ liệu không chỉ
được thực hiện ở vị trí server mà còn ở vị trí client khi sử dụng reactJS.

Hiện nay, reactJS thường được dùng để thiết kế bố cục cho trang web,
nhưng hạn chế đó chính là cấu trúc khó. Thay vào đó sử dụng JSX và
nhúng vào các đoạn HTML và javascript, bạn sẽ thấy cú pháp dễ hiểu
hơn và JSX cũng có thể tối ưu các code khi biên soạn, vừa giúp ích cho
người lập trình tiện cho việc biên dịch.

1.1.2 Các tính năng của react JS là gì?

Khi sử dụng react JS người dùng có thể khai thác được nhiều tính năng
khác nhau, trong đó phải kể đến:

  Viết ứng dụng trực tiếp trên JavaScript

 Phá vỡ những cấu trúc UI phức tạp, biến chúng trở thành các
component độc lập.

7
 Chuyển các dữ liệu đã được tùy biến đến một UI component cụ thể
 Thay đổi trạng thái cho nhiều component (child) trên ứng dụng
nhưng không làm ảnh hưởng tới các component gốc (parent) đang ở
trạng thái Stateful.
 Biết được chính xác khi nào cần render lại hoặc khi nào cần bỏ đi
các DOM chính.

1.1.3 Lợi ích của ReactJs

1.1.3.1 Dễ dàng sử dụng, giao diện thân thiện

Khi sử dụng reactJS người dùng có thể tạo ra các web hấp dẫn, nhanh
chóng, hiệu quả với mã hóa tối thiểu. Nhờ đó, người dùng sẽ dễ dàng
cảm nhận được tốc độ tối ưu của react JS ở các component (thành
phần) riêng lẻ. Thay vì phải làm việc trên toàn bộ ứng dụng website,
các lập trình viên có thể chia nhỏ các cấu trúc UI thành nhiều
component đơn giản.

1.1.3.2 Hỗ trợ reusable component trong Java

Không phải lập trình viên nào cũng thiết kế được các component hiệu
quả, việc tái sử dụng component sẽ giúp cho các developer có cơ hội sử
dụng rộng rãi các tính năng đã được tối ưu sẵn. Nhờ có react JS,
developer hoàn toàn có thể sử dụng lại các components được phát triển
thành các ứng dụng khác nhưng có cùng chức năng.

1.1.3.3 Viết component dễ dàng hơn

Khi viết react component bạn sẽ phải sử dụng tới JSX – là sự kết hợp
giữa JavaScript và HTML. Mặc dù không phải là phần mở rộng cú
pháp phổ biến nhất nhưng JSX vẫn được người dùng đánh giá cao khi
phát triển component đặc biệt hoặc các ứng dụng khối lượng lớn.

Khi sử dụng JSX việc xây dựng web app với reactJS trở nên dễ dàng
hơn, người dùng hoàn toàn có thể mở rộng cú pháp.

8
 1.1.3.4 Hiệu suất làm việc tốt hơn so với virtual DOM
Đa số các ứng dụng trên website đều gặp rắc rối trong quá trình DOM.
Với lợi thế sử dụng các virtual DOM, react JS giúp người dùng tránh
được các vấn đề này. Ngoài ra, reactJS cũng cho phép người dùng xây
dựng các virtual DOM và host chúng trong bộ nhớ. Ưu điểm này sẽ
giúp virtua thay đổi ngay cả khi DOM thực thế thay đổi; cập nhật liên
tục các ứng dụng để hạn chế tình trạng gián đoạn. Người dùng sử dụng
liên tục, website ổn định giúp doanh thu tăng trưởng mức cao.

1.1.3.5 Thân thiện với SEO

Đây là một trong những điều đặc biệt chỉ có ở reactJS và cũng chính là
vấn đề lớn nhất của các JS Frameworks vì hầu hết các JS Frameworks
không thân thiện với ổ máy tìm kiếm mặc dù đã được cải thiện rất
nhiều.

Đối với reactJS không nằm trong nhóm không thân thiện với SEO vì
dưới sự hỗ trợ của các render và trả về trình duyệt dưới dạng webpage
khi mà bạn chạy reactJS trên server và các virtual DOM. Chính vì lý do
này mà react dễ dàng đáp ứng được đầy đủ được các tính SEO
Friendly.

9
 Spring Boot Framework
1.2.1. Tổng quan về API RESTful
1.2.1.1. Resource
Quản lý resource (tài nguyên) là một phần quan trọng và chiếm phần
lớn trong việc phát triển website. Trong đó resource của các website khác
nhau có thể sẽ khác nhau. Với các trang mạng xã hội như Facebook thì
resource thường là danh sách người dùng (user hoặc account), danh sách
các bài viết (post hoặc article), các ảnh được đăng (photo hoặc image), các
trang fanpage (fanpage)... Đối với một trang chia sẻ ảnh như Instagram thì
resource có thể là các ảnh được đăng (photo), danh sách người dùng
(user)... Đối với các trang bán hàng thì resource có thể là danh sách sản
phẩm (product), danh sách các người bán (seller), danh sách khách hàng
(user hay customer)...
Việc quản lý resource của một website bao gồm 4 tác vụ chính:

 Tạo mới một resource (create)

 Lấy thông tin một resource (read)

 Cập nhật một resource (update)

 Xoá một resource (delete)

10
 1.2.1.2. RESTful API Là Gì
RESTful API là một tiêu chuẩn dùng trong việc thiết kế các thiết kế
API cho các ứng dụng web để quản lý các resource. RESTful là một trong
những kiểu thiết kế API được sử dụng phổ biến nhất ngày nay.
Trọng tâm của REST quy định cách sử dụng các HTTP method
(như GET, POST, PUT, DELETE...) và cách định dạng các URL cho ứng
dụng web để quản các resource
Với các ứng dụng web được thiết kế sử dụng RESTful, lập trình viên
có thể dễ dàng biết được URL và HTTP method để quản lý một resource.
Cũng cần lưu ý bản thân RESTful không quy định logic code ứng dụng và
RESTful cũng không giới hạn bởi ngôn ngữ lập trình ứng dụng. Bất kỳ
ngôn ngữ lập trình (hoặc framework) nào cũng có thể áp dụng RESTful
trong việc thiết kế API cho ứng dụng web.
1.2.1.3. REST và REST(ful)
REST và RESTful khác nhau như thế nào. REST là viết tắt của cụm
từ Representational State Transfer và các ứng dụng sử dụng kiểu thiết kế
REST thì được gọi là RESTful (-ful là tiếp vị ngữ giống
như beauty và beautiful). Tất nhiên bạn cũng có thể sử dụng thuật
ngữ REST thay cho RESTful và ngược lại.
1.2.2. Spring framework là gì?
Spring là một framework được ra đời để giúp các nhà phát triển có thể
xây dựng hệ thống và chạy ứng dụng trên JVM một cách thuận tiện, đơn giản
và nhanh chóng. Đây là một mã nguồn mở được phát triển và rất nhiều người
sử dụng. Với ít công đoạn hơn, Spring trao cho ta sức mạnh để:

 Nhanh chóng tạo API.

 Kết nối API của ta với các nguồn dữ liệu như cơ sở dữ liệu quan hệ,
MySQL, API REST, v.v.

 Kết hợp các mối quan hệ mô hình và kiểm soát truy cập cho các API
phức tạp.

 Mở rộng API.

11
 Tổng quan về HTML/CSS
1.3.1. Sơ lược về HTML
HTML (Tiếng Anh, viết tắt cho HyperText Markup Language, hay là
"Ngôn ngữ Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra
để tạo nên các trang web với các mẫu thông tin được trình bày trên World Wide
Web. HTML được định nghĩa như là một ứng dụng đơn giản của SGML và được
sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp. HTML đã trở
thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy
trì. Phiên bản chính thức mới nhất của HTML là HTML 4.01 (1999). Sau đó, các
nhà phát triển đã thay thế nó bằng XHTML. Hiện nay, HTML đang được phát
triển tiếp với phiên bản HTML5 hứa hẹn mang lại diện mạo mới cho Web.
HTML không phải là ngôn ngữ lập trình, nó là ngôn ngữ trình bày.
Cấu trúc cơ bản và các câu lệnh của HTML:
<!DOCTYPE HTML >
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
</body>
</html>

Các thẻ cơ bản hay sử dụng trong HTML

 <div>: Xác định một phân chia khu vực hay một vùng trong văn bản.

 <h1> tới <h6>: Xác định tiêu đề html.

12
 <img >: Hiển thị một image.

 <input >: Xác định một điều khiển nhập.

 <label>: Tạo một nhãn cho thành phần input.

 <button>: Xác định một button.

 <hr>: Tạo một đường ngang.

 <i>: Hiển thị chữ in nghiêng.

 <li>: Xác định danh sách item.

 <ul>: Định nghĩa một danh sách không có thứ tự.

 <ol>: Định nghĩa một danh sách có thứ tự.

 <a>: Định nghĩa một đường liên kết link tới trang khác.

 <b>: Định nghĩa một từ được in đậm.

 <u>: Định nghĩa một từ được gạch chân.

 <br>: Thẻ xuống dòng.

 <span>: Định nghĩa một khối văn bản.

Form, Frame, Table
Form: Tag <form> được dùng để tạo một "biểu mẫu" HTML cho người dùng,
được dùng để truyền dữ liệu lên máy chủ. Tag <form> không nên dùng để điều
khiển layout.
Cấu trúc: Trong <form> bắt buộc phải có tham số action.
<form action=""></form> một <form> có thể chứa thành phần <input>,
<select>,<texarea>,<fieldset>,<legend>,<label>, có thể chứa các tag khác.
Ví dụ:
<form action="#">
<ul>
<li>Họ tên: <input type="text" size="30" /></li>
<li>Email: <input type="text" size="30" /></li>
<li>Ngày sinh: <input type="text" size="10" /></li>
</ul>
<p><input type="submit" value="Gửi" /></p>
</form>

13
Frame:  <frame> định nghĩa một cửa sổ riêng (khung - frame) trong một
<frameset>.
Cấu trúc: tag <frame> đươc viết bên trong thành phần <frameset>
<html>
<frameset>
<frame src = "frame.html"></frame>
</frameset >
</html>
Table: Tag <table> dùng để tạo một bảng trong html
 <tr> xác định hàng của table.
 <th> xác định phần tử tiêu đề của table.
 <td> xác định phần tử nội dung của table.

1.3.2. Sơ lược về CSS

CSS (Cascading Style Sheet) được dùng để miêu tả cách trình bày tài liệu
viết bằng ngôn ngữ HTML và XHTML. Ngoài ra CSS còn có thể dùng cho
XML, SVG, XUL. Các đặc điểm kỹ thuật của CSS được quy định bởi World
Wide Web Consortium (W3C). CSS góp phần làm cho định dạng của các trang
web trở nên phong phú và đa dạng hơn. Do đó việc tìm hiểu CSS và HTML luôn
đi kề nhau. Bài viết đầu tiên này sẽ giới thiệu sơ lược về CSS để chúng ta có
được cái nhìn tổng quan nhất về CSS (tập tin định kiểu theo tầng).

14
Các cú pháp trong CSS
Một cú pháp của CSS có hai phần: Một sector, và một hay nhiều declaration

 Sector là phần tử thông thường của HTML mà bạn muốn chỉnh style.

 Mỗi một Declaration bao gồm 1 thuộc tính (property) và 1 giá trị (value): 
Property là thuộc tính phong cách mà bạn muốn thay đổi, mỗi một property có
một giá trị (value).

15
 CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ TH ỐNG
ĐẶT PHÒNG KHÁCH SẠN

2.1. Khảo sát

Để có được một trang web đảm bảo chất lượng và hoàn thiện em đã thực
hiện khảo sát và tham khảo một số trang web đặt phòng khách sạn khác để từ đó
giúp cho em trong việc hoàn thiện sản phẩm của mình tốt hơn.
Các trang web tham khảo: https://www.booking.com, …
Về mặt tổng thể một trang đặt phòng khách sạn cần đảm bảo những chức năng
cơ bản sau:

 Giới thiệu chung

o Giới thiệu thông tin về website.
o Các thông tin cơ bản về nội dung website và các điều lệ.
 Thông tin phòng khách sạn theo địa điểm.
o Thông tin chi tiết về khách sạn, thông tin phòng.
o Giá thuê phòng trong thời gian nhất định.
 Thông tin địa điểm.
o Thông tin chi tiết về các khách sạn tại địa điểm.
 Đặt phòng.
o Tìm kiếm phòng trống.
o Chức năng đặt phòng
 Lịch đã đặt.
 Kết luận: Từ việc tham khảo các trang web trên đã giúp cho em định hình
được cấu trúc cơ bản của một trang web đặt phòng online. Những chức năng về chủ
sở hữu khách sạn, phương thức đặt phòng..., ngoài ra một trang web phải có giao
diện dễ nhìn, thân thiện với người dùng, đơn giản nhưng đầy đủ tính năng để tiết
kiệm chi phí về thời gian và chủ động trong việc đi lại.
2.2. Phân tích hệ thống
2.2.1 Đặc tả hệ thống
 E-commerce là nền tảng mua hàng, bán hàng online giúp khách hàng dễ
dàng lựa chọn đúng những mă ̣t hàng phù hợp hơn với nhu cầu sử dụng.

16
  Cung cấp nội dung hướng dẫn giúp khách hàng lựa chọng địa điểm phù hợp
với các nhu cầu của khách hàng
 Đặc biệt hệ thống còn tiếp nhận và phản hồi các ý kiến đóng góp của khách
hàng đã từng tham gia, sử dụng dịch vụ mua hàng trực tuyến để đóng góp
và tăng thêm thông tin tham khảo dành cho các khách hàng khác để lựa
chọn đồ dùng, dụng cụ phù hợp với mình. Việc lựa chọn lựa mă ̣t hàng đúng
với mức chi tiêu .
2.2.2 Yêu cầu chức năng
 Website phải có đầy đủ các chức năng dành cho khách hàng(user), chủ
khách sạn (director), admin.
 Các chức năng dành cho khách hàng: Đăng nhập, đăng ký, xem thông tin
user, xem lịch sử đặt lịch phòng, tìm kiếm phòng phù hợp với yêu cầu, tìm
kiếm khách sạn theo địa điểm, đặt phòng, huỷ đặt phòng, nhận xét đánh giá
phòng, khách sạn, cập nhật thông tin cá nhân.
 Các chức năng dành cho chủ khách sạn: Đăng nhập, đăng ký, cập nhật
thông tin cá nhân, thêm, update, xoá khách sạn , thêm, update, xoá phòng
khách sạn. Thống kê đơn đặt lịch của khách sạn theo từng tháng, thống kê
doanh thu qua đó so sánh doanh thu của các khách sạn trong cùng 1 tháng
hay doanh thu của 1 khách sạn trong nhiều tháng.
 Các chức năng dành cho admin: Đăng nhập, đăng ký, quản lý danh sách
chủ khách sạn, xem thông tin chủ khách sạn, quản lý xác thực thông tin tin
đăng ký chủ khách sạn, thống kê số lượng khách sạn theo từng thành
phố,tỉnh lị.
2.2.3 Yêu cầu phi chức năng
 Giao diện đẹp mắt, thân thiện với người dùng.
 Hệ thống xử lý nhanh, ít bị sự cố.
 An toàn và bảo mật thông tin
 Có tính tương thích cao

17
2.2.4 Mô tả chức năng
Chức năng cho khách hàng(user):

 Đăng nhập: Đăng nhập vào website. Khách đăng nhập tài khoản đã
đăng ký với hệ thống trước khi thực hiện đặt phòng, nếu chưa có tài
khoản thì phải đăng ký tài khoản.

 Đăng ký: Đăng ký tài khoản vào website. Khách hàng điền các thông
tin cá nhân, thông tin về tài khoản vào chức năng đăng ký.

 Xem thông tin cá nhân: Khách hàng có thể xem thông tin cá nhân
của mình ở menubar thông tin tài khoản.

 Cập nhật thông tin tài khoản: Khách hàng có thể sửa là lưu thay đổi
về thông tin cá nhân của mình tại mục thông tin tài khoản.

 Tìm kiếm phòng: Khách hàng tìm kiếm phòng theo địa điểm, số
lượng người và thời gian

 Đặt phòng: Khách hàng thực hiện chức năng đặt phòng sau khi ưng ý
với phòng đã chọn.

 Đánh giá phòng: Khách hàng có thể đánh giá phòng đã đặt.

 Huỷ đặt phòng: Khách hàng có thể huỷ những phòng đã đặt nhưng
chưa làm thủ tục check in tại lễ tân khách sạn
Chức năng chủ khách sạn (director):

 Đăng nhập: Chủ khách sạn đăng nhập tài khoản đã được cấp để thực
hiện đăng nhập vào hệ thống.

 Đăng ký: Đăng ký tài khoản vào website. Chủ khách sạn điền các
thông tin cá nhân, thông tin về tài khoản vào chức năng đăng ký.

 Xem thông tin cá nhân: Chủ khách sạn có thể xem thông tin cá nhân
của mình ở menubar thông tin tài khoản.

 Cập nhật thông tin tài khoản: Chủ khách sạn có thể sửa là lưu thay
đổi về thông tin cá nhân của mình tại mục thông tin tài khoản.

 Quản lý khách sạn: Chủ khách sạn có thể thêm khách sạn cho riêng
mình sau khi được admin duyệt tài khoản, tiếp theo đó thì có thể sửa
đổi thông tin khách sạn, xoá khách sạn.

18
  Quản lý phòng: Chủ khách sạn có thể thêm phòng cho mỗi khách
sạn, với 1 số thông tin về giá tiền, ảnh,.. Sau đó có thể sửa đổi thông
tin phòng, xoá phòng.

 Quản lý danh sách booking: Chủ khách sạn có thể tìm ra tất cả các
booking có trong tháng của khách sạn, qua đó có thể so sánh được
lượng khách ở mỗi khách sạn.

 Quản lý doanh thu: Chủ khách sạn có thể thống kê doanh số của
từng khách sạn trong nhiều tháng, qua đó biết được đâu là khoảng thời
gian doanh thu trở nên cao nhất và ngược lại. Hoặc thống kê doang số
theo từng tháng của từng khách sạn để có thể nhận định cho những
bước đi phát triển tiếp theo.

Chức năng cho người quản trị (Admin):

 Quản lý đăng ký của bác sĩ: Người quản trị có thể duyệt tài toản của
1 chủ khách sạn sau khi đăng ký
 Quản lý số lượng khách sạn: Người quản trị có thể xem thông tin
khách sạn, số lượng khách sạn trong tỉnh, thành phố, quản lý các
thông tin về chủ sở hữu khách sạn.
 Thêm tài khoản: Người quản trị có thể thêm thông tin, đăng ký tài
khoản cho một người quản trị mới.

2.2.5 User case

2.2.5.1 Danh sách tác nhân
 KHÁCH HÀNG (user): là người sử dụng hệ thống thông qua các tác
vụ như đặt phòng, tìm phòng, huỷ đặt phòng, thống kê lịch sử đặt.
 CHỦ KHÁCH SẠN(Director): là người sử dụng hệ thống và thực
hiện các tác vụ như quản lý khách sạn, quản lý doanh thu, quản lý
phòng, quản ly đơn đặt phòng
 NGƯỜI QUẢN LÝ: là người trực tiếp điều hành hệ thống, quản lý
chủ khách sạn

2.2.5.2 Danh sách Use Case

 Tác nhân KHÁCH HÀNG có các UC sau:

19
 o Đăng ký.
o Đặt phòng
o Tìm phòng
o Huỷ đặt phòng
o Xem danh sách đặt phòng
o Đánh giá phòng.
 Tác nhân CHỦ KHÁCH SẠN( director) có các UC sau:
o Đăng ký.
o Xem danh sách đặt phòng
o Thống kê doanh thu
o Quản lý khách sạn
o Quản lý phòng
 Tác nhân NGƯỜI QUẢN LÝ(admin) có các UC sau:
o Quản lý danh sách khách sạn
o Thêm admin
o Quản lý danh sách bác sỹ
o Quản lý đăng ký bác sỹ
 Ngoài ra, các thành viên của hệ thống bao gồm người quản lý, director
và các khách hàng đã đăng ký làm thành viên còn có các UC sau:
o Đăng nhập/Đăng xuất
o Xem thông tin cá nhân
o Sửa đổi thông tin cá nhân

20
2.2.5.3 Biểu đồ UC tổng quát
 UC tổng quát director.

Hình 1. UC tổng quát Director.

21
 UC tổng quát user.

Hình 2. UC tổng quát bệnh nhân.

 UC tổng quát Admin.

Hình 3. UC tổng quát admin.

22
 Gói UC, biểu đồ UC chi tiết.
Từ việc phân tích các UC của từng tác nhân, em xây dựng đươc các
gói UC như sau:
o Đăng nhập/ Đăng ký.
o Quản lý thông tin cá nhân.
o Đặt phòng.
o Quản lý khách sạn
o Quản lý phòng
o Thống kê Chủ khách sạn

 Gói UC đăng nhập/ đăng ký.

Hình 4. UC đăng nhập/ đăng ký.

 Gói UC quản lý thông tin cá nhân.

Hình 5. UC quản lý thông tin cá nhân.

23
 Gói UC quản lý khách sạn.

Hình 6. UC quản lý khách sạn.

 Gói UC quản lý phòng.

Hình 7. UC quản lý phòng.

24
 Gói UC đặt phòng.

Hình 8. UC đặt phòng.

 Gói UC quản lý đăng ký chủ khách sạn.

Hình 9. UC quản lý đăng ký chủ khách sạn.

25
2.2.5.4 Biểu đồ tuần tự
 Biểu đồ tuần tự đăng ký

Hình 11. Biểu đồ tuần tự đăng ký

26
 Biểu đồ tuần tự đăng nhập

Hình 12. Biểu đồ tuần tự đăng nhập

 Biểu đồ tuần tự sửa thông tin cá nhân

Hình 13. Biểu đồ tuần tự sửa thông tin cá nhân

27
2.2.6 Mô hình quan hê dữ liệu
 Mô hình quan hệ dữ liệu

Mô hình quan hệ dữ liệu thể hiện mối quan quan hệ của các bảng trong cơ
sở dữ liệu. Kết quả cuối cùng của quá trình phân tích hệ thống thông tin.

Hình 14. Mô hình quan hệ dữ liệu.

28
CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG ĐẶT PHÒNG KHÁCH
SẠN HOTELBOOKING
3.1 Giao diện trang web và chức năng dành cho khách hàng
 Trang chủ: Hiển thị thông tin website, giới thiệu về trang web, danh sách lựa
chọn chức năng

29
Hình 15. Giao diện trang chủ

30
 Giao diện chức năng tìm phòng.

Hình 16. Giao diện tìm phòng.

31
 Giao diện chức năng xem thông tin tài khoản

Hình 17. Giao diện xem thông tin tài khoản.

 Giao diện chức năng thống kê lịch sử đặt

32
3.2 Giao diện trang web và chức năng dành cho chủ khách sạn
 Giao diện chức năng xem thông tin cá nhân

33
 Giao diện danh sách khách sạn

Hình 18. Giao diện xem khách sạn.

 Giao diện chức năng thêm khách sạn

Hình 19. Giao diện thêm khách sạn.

34
 Giao diện chức năng sửa thông tin khách sạn

Hình 20. Giao diện cập nhật thông tin khách sạn

 Giao diện danh sách phòng

35
 Giao diện thêm phòng

Hình 21. Giao diện thêm phòng

 Giao diện chỉnh sửa phòng

Hình 22. Giao diện chỉnh sửa phòng

 Giao diện thống kê của Director

36
 Hình: Thống kê doanh số tất cả các khách sạn theo tháng

Hình: Thống kê các đơn đặt khách sạn của khách sạn theo tháng

3.3 Giao diện trang web và chức năng dành cho admin
 Giao diện chức năng quản lý đăng ký director

37
 Hình 23. Giao diện duyệt director

 Giao diện thống kê khách sạn theo thành phố

Hình 24. Giao diện thống kê khách sạn theo thành phố

38
 KẾT LUẬN

1. Kết quả đạt được

 Nắm vững được kiến thức về thiết kế và xây dựng website với reactJs và
Springframework.
 Xây dựng được hệ thống cung cấp đầy đủ các chức năng cơ bản của một
website.
2. Hạn chế của đề tài

Ngoài những vấn đề đạt được vẫn còn những vấn đề vẫn chưa được giải quyết:
 Chưa xuất được hồ sơ qua thông tin bệnh nhân để giảm quá trình thủ tục.
 Hệ thống trang quản trị còn nhiều thiếu sót.
 Chưa cung cấp đầy đủ chức năng cho khách hàng và chủ khách sạn
 Giao diện còn đơn giản và thiếu thu hút.
 Cơ sở dữ liệu còn nhiều thiếu sót.
 Hệ thống bảo mật chưa cao.
3. Hướng phát triển đề tài

Xây dựng thêm các chức năng còn thiếu:

 Xây dựng giao diện đẹp mắt, sinh động hơn, cơ sở dữ liệu nhất quán hơn.
 Xây dựng thêm nhiều bộ lọc cho khách hàng dễ dàng hơn trong biệc tìm
kiếm
 Xây dựng thêm các tính năng của người quản trị

39
 TÀI LIỆU THAM KHẢO

[1] Website https://topdev.vn/blog/restful-api-la-gi/

[2] Website http/www.w3schools.com.
[3] Website https://bkaii.com.vn/tin-tuc/334-khai-niem-co-ban-ve-restful-api

40