TÌM HIỂU REACTJS và xây DỰNG WEB QUẢN lý RESORT

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO ĐỒ ÁN 1
ĐỀ TÀI:
TÌM HIỂU REACTJS VÀ XÂY DỰNG WEB
QUẢN LÝ RESORT

Giảng viên hướng dẫn: ThS. Huỳnh Tuấn Anh
Nhóm thực hiện:

19522167 – Trương Xuân Tâm
19521931 – Lê Anh Nhân


MỤC LỤC

MỤC LỤC

2

LỜI CẢM ƠN

4

Chương 1 - TỔNG QUAN ĐỀ TÀI
1.1. Mơ tả bài tốn
1.2. u cầu đặt ra

5

5
5

Chương 2 - PHÂN TÍCH ĐẶC TẢ YÊU CẦU
2.1 Sơ đồ usecase
2.1.1 Usecase khách hàng đặt phòng
2.1.2 Use Case khách vãng lai
2.2 Sequence Diagram
2.3 Danh sách Use case
2.4 Đặc tả Usecase
2.4.1 Đăng ký
2.4.2 Đăng nhập
2.4.3 Thay đổi mật khẩu
2.4.4 Đăng xuất
2.4.5 Trang chủ
2.4.6 Xem thơng tin nhà hàng
2.4.7 Xem thơng tin phịng
2.4.8 Đặt phòng

7
7
8
8
10
10
11
11
12
13
14

14
15
16
17

Chương 3 : THIẾT KẾ KIẾN TRÚC DỮ LIỆU
3.1 Kiến trúc tổng thể của hệ thống
3.2 Kiến trúc mô hình
3.2.1 Cấu trúc mơ hình MVC
3.2.2 Mơ hình MVC trong ứng dụng Web
3.2.3 NodeJS
3.2.4 ReactJS
3.2.5 MongoDB

17
17
18
18
19
21
23
29


Chương 4 : THIẾT KẾ DỮ LIỆU
4.1 Sơ đồ logic
4.2 Mô tả chi tiết kiểu dữ liệu
4.2.1 Bảng user
4.2.2 Bảng AwersomeService
4.2.3 Bảng Favorite Restaurant

4.2.4 Bảng Type of Room
4.2.5 Bảng Booking
4.2.6 Bảng Image Gallery

30
30
31
31
31
32
33
33
34

Chương 5 - Thiết kế giao diện
5.1. Danh sách các màn hình
5.2. Mơ tả các màn hình
5.2.1. Màn hình Register
5.2.2. Màn hình Log in
5.2.3 Màn hình Home
5.2.4 Màn hình List Rooms
5.2.6 Màn hình Contact Us

35
35
35
35
38
41
46

49

CHƯƠNG 6: TỔNG KẾT
6.1 Cơng nghệ sử dụng
6.2 Mức độ hồn thiện:
6.3.1 Kết quả đạt được:
6.3.2 Hướng phát triển:

52
52
52
53
53

CHƯƠNG 7: BẢNG PHÂN CÔNG CÔNG VIỆC

54

CHƯƠNG 8: TÀI LIỆU THAM KHẢO

55


LỜI CẢM ƠN
Trong quá trình học tập, nghiên cứu và phát triển đề tài chúng em đã nhận
được sự giúp đỡ, chỉ bảo nhiệt tình của thầy để hồn thành đồ án này.
Nhóm em xin chân thành gửi lời cảm ơn đến thầy Huỳnh Tuấn Anh – Giảng
viên Khoa Công Nghệ Phần Mềm, Trường Đại học Công Nghệ Thông Tin, Đại
học Quốc gia Thành phố Hồ Chí Minh – giảng viên dạy hướng dẫn mơn Đồ án
1, đã tận tình hướng dẫn và giúp đỡ về kiến thức, phương pháp cho chúng em

trong suốt q trình thực hiện và hồn thành đồ án.
Hi vọng với sự chỉ bảo và góp ý từ thầy, nhóm đề tài có thể tiếp tục phát triển
để ứng dụng ngày càng được mở rộng và phục vụ được tốt hơn cho người
dùng.
Mặc dù đã có nhiều cố gắng trong suốt quá trình thực hiện đề tài, song khơng
thể tránh khỏi những hạn chế, thiếu sót. Chúng em mong rằng sẽ nhận được
những đóng góp và nhận xét chân thành từ thầy, các bạn sinh viên và người
dùng trong quá trình sử dụng phần mềm để phần mềm ngày càng hồn thiện
hơn nữa. Mọi đóng góp xin vui lòng gửi về email:
hoặc
Mỗi ý kiến đóng góp của thầy và các bạn sẽ là một nguồn động lực to lớn đối
với chúng em để chúng em có thể cải thiện phần mềm tốt hơn và xây dựng
những phần mềm hữu ích đối với người dùng hơn nữa.
Chúng em xin trân trọng cảm ơn.

Thành phố Hồ Chí Minh, ngày 14 tháng 06 năm 2022


Chương 1 - TỔNG QUAN ĐỀ TÀI
1.1. Mô tả bài toán
- Hiện nay, sau khi Covid-19 đã đi qua, cuộc sống người dân dần đi vào ổn
định và bình thường mới. Với đa số mọi người, khi mà đã phải trải qua thời
kì giãn cách xã hội quá lâu, thì du lịch sẽ là lựa chọn hàng đầu. Nhu cầu du
lịch của người Việt Nam trong năm 2022 là rất lớn, đặc biệt là du lịch trong
nước. Theo đó, có tới 76% du khách Việt Nam tham gia khảo sát đang lên kế
hoạch du lịch giải trí trong nước vào năm 2022, cao hơn nhiều so với tỷ lệ
38% số người lập kế hoạch du lịch nước ngoài.
- Thực tế, chúng ta có thể thấy rõ được rằng, đời sống của người dân mỗi ngày
đều được nâng cao, cơ sở hạ tầng và giao thông lại được cải thiện và hiện đại
hơn, nhưng kéo theo đó chính là sự ơ nhiễm mơi trường ngày một nặng nề,

vì thế, con người thường có xu hướng muốn tìm đến những nơi gần gũi với
thiên nhiên để nghỉ dưỡng và thư giãn thoải mái hơn, bỏ lại tất cả những
khói bụi, ồn ào nơi thành phố.
- Bên cạnh đó, rất nhiều du khách có nhu cầu về chuyển đổi những điểm đến
khác nhau trong tour du lịch của mình. Chính vì thế, các hãng du lịch cần
chuẩn bị đầy đủ để có thể phục vụ và đáp ứng kịp thời cho khách du lịch.
- Nhận thấy được vấn đề đó, ứng dụng quản lý Resort được ra đời nhằm đáp
ứng được nhu cầu đặt phòng ở một cách tiện lợi, minh bạch hơn, giải quyết
được bài tốn về thơng tin của các địa điểm, chất lượng nơi ở mà du khách
sẽ đặt chân đến

1.2. Yêu cầu đặt ra
- Một số yêu cầu nhóm đặt ra khi phát triển ứng dụng:
+ Tính tiện dụng: ứng dụng phải thân thiện với người dùng, dễ dàng tiếp cận
với mọi lứa tuổi
+ Tính đúng đắn: thơng tin đưa lên phải được xác thực kĩ về độ chính xác, ứng
dụng chạy khơng lỗi
+ Tính thích nghi: ứng dụng chạy được trên nhiều nền tảng trình duyệt web
khác nhau


+ Tính tiến hố: ứng dụng phải dễ dàng phát triển thêm tính năng mà khơng
ảnh hưởng đến các tính năng đã phát triển trước đó
+ Tính bảo trì: ứng dụng có thể thay đổi một số chức năng hoặc cập nhật thêm
thơng tin một cách tiện lợi nhất
+ Tính tương tác: tạo ra được một môi trường tương tác tốt giữa hệ thống và
người dùng


Chương 2 - PHÂN TÍCH ĐẶC TẢ YÊU CẦU

2.1 Sơ đồ usecase

Hình 2.1 Sơ đồ usecase


2.1.1 Usecase khách hàng đặt phịng

Hình 2.1.1 Usecase khách hàng

2.1.2 Use Case khách vãng lai


Hình 2.1.2 Usecase khách vãng lai


2.2 Sequence Diagram

Hình 2.2 Sequence diagram

2.3 Danh sách Use case

STT

Tên Use case

Mô tả chung

1

Đăng nhập

Dùng tài khoản đã đăng ký đăng nhập
vào hệ thống

2

Đăng ký

3

Đăng xuất

4

Thay đổi mật khẩu

Tạo tài khoản mới
Thoát tài khoản khỏi hệ thống
Cho phép người dùng thay đổi mật


khẩu
5

Xem thông tin nhà hàng

Hiển thị chi tiết các thông tin về nhà
hàng như tên , giá , hình ảnh … vv

6

Xem thơng tin phịng

7

Xem các dịch vụ sẵn có

Hiển thị chi tiết các dịch vụ sẵn có để
phục vụ khách

8

Trang chủ

Hiển thị Image , Favorite room , ….
vv

9

Đặt Phòng

Cho phép khách hàng đặt các phịng
hiện có

10

Nhập thơng tin đặt phịng

Cho phép khách hàng nhập thơng tin
cá nhân và các thơng tin kèm theo để

đặt phịng

Hiển thị chi tiết các thơng tin về phịng
như tên loại phịng,giá, hình ảnh … vv

2.4 Đặc tả Usecase
2.4.1 Đăng ký
Mô tả

Khách hàng đăng ký tài khoản mới để sử dụng cho việc đăng
nhập vào

Tác nhân

Khách hàng

Luồng
chính

Hành vi của tác nhân

Hành vi của hệ thống

1. Khách hàng yêu cầu mở
màn hình Đăng ký

2. Hiển thị màn hình đăng ký

3. Nhập các thơng tin u cầu 4. Kiểm tra các thông tin xem đã
cho việc tạo tài khoản. Chọn đúng định dạng đặt ra bởi hệ

nút Đăng ký
thống hay chưa


5. Kiểm tra email đã được đăng
nhập ký trước đó hay chưa
6. Xác thực email
7. Người dùng xác thực thông 8. Thông báo đăng ký tài khoản
qua email đã gửi đến email
thành công
người dùng đăng ký
Luồng
thay thế

A1. Sai định dạng các thông tin đã nhập
5. Yêu cầu nhập lại đúng định dạng các thông tin sai định dạng
A2. Email đã được đăng ký cho một tài khoản khác
6. Hệ thống yêu cầu người dùng đăng ký bằng email khác
A3. Người dùng chưa xác thực tài khoản và hết thời gian xác
thực

Điều kiện
trước

Phải có email hợp lệ

Điều kiện
sau

Tạo tài khoản trên hệ thống và thông báo đã đăng ký tài khoản

thành công

2.4.2 Đăng nhập
Mô tả

Khách hàng đăng nhập vào ứng dụng thơng qua tài khoản đã tạo
trước đó

Tác nhân

Khách hàng

Luồng
chính

Hành vi của tác nhân

Hành vi của hệ thống

1. Khách hàng yêu cầu mở
màn hình Đăng nhập

2. Hiển thị màn hình đăng nhập

3. Nhập các thông tin yêu cầu 4. Kiểm tra thông tin tài khoản và
cho việc đăng nhập như tài
mật khẩu


khoản và password Chọn nút

Đăng nhập
5. Chuyển đến màn hình trang
chủ
Luồng
thay thế

A1. Sai Tài khoản hoặc mật khẩu
5. Yêu cầu đăng nhập lại
A2. Email đã được đăng ký cho một tài khoản khác
6. Hệ thống yêu cầu người dùng đăng ký bằng email khác
A3. Người dùng chưa xác thực tài khoản và hết thời gian xác
thực

Điều kiện
trước

Phải có email hợp lệ

Điều kiện
sau

Tạo tài khoản trên hệ thống và thông báo đã đăng ký tài khoản
thành công

2.4.3 Thay đổi mật khẩu
Mô tả

Khách hàng đã đăng nhập bằng tài khoản đã tạo

Tác nhân

Khách hàng

Luồng
chính

Hành vi của tác nhân

Hành vi của hệ thống

1. Khách hàng yêu cầu mở
màn hình đổi mật khẩu

2. Hiển thị màn hình đổi mật khẩu

3. Nhập các thơng tin yêu cầu 4. Kiểm tra thông tin tài khoản và
cho việc đổi mật khẩu như
mật khẩu
tài khoản và password và
nhập password mới


5. Thông báo đổi mật khẩu thành
công
Luồng
thay thế

A1. Sai Tài khoản hoặc mật khẩu
5. Yêu cầu đăng nhập lại

Điều kiện
trước

Phải có email hợp lệ và đã đăng nhập vào hệ thống

Điều kiện
sau

Đổi mật khẩu trên hệ thống và thông báo đã đổi mật khẩu thành
công

2.4.4 Đăng xuất
Mô tả

Khách hàng đăng xuất tài khoản khỏi ứng dụng

Tác nhân

Khách hàng

Luồng
chính

Hành vi của tác nhân

Hành vi của hệ thống

1. Khách hàng chọn Log out

2. Đăng xuất tài khoản khỏi ứng

dụng
3. Hiển thị trang đăng nhập

Luồng
thay thế

Khơng có

Điều kiện Khách hàng đã đăng nhập vào ứng dụng
trước
Điều kiện Hiển thị trang đăng nhập
sau

2.4.5 Trang chủ


Mơ tả

Khách hàng ở giao diện trang chủ có thể xem các hình ảnh và các
dịch vụ có sẵn

Tác nhân

Khách hàng

Luồng
chính

Hành vi của tác nhân

Hành vi của hệ thống

1. Khách hàng ở trang chủ

2. Hiển thị màn hình trang chủ
3. Hiển thị các thơng tin hiện có ở
trang chủ như banner, image ,
room,....

Luồng
thay thế

Khơng có

Điều kiện Khách hàng truy cập vào trang web
trước
Điều kiện Hiển thị trang chủ
sau

2.4.6 Xem thông tin nhà hàng
Mô tả

Khách hàng đăng nhập vào hệ thống , click vào “Nhà hàng” trên
thanh header

Tác nhân

Khách hàng

Luồng

chính

Hành vi của tác nhân

Hành vi của hệ thống

1. Khách hàng mở trang Nhà
hàng trên thanh header

2. Hiển thị màn hình nhà hàng

3. Kéo xem các thơng tin có
sẵn

4. Hiển thị các thơng tin của các
nhà hàng sẵn có như hình ảnh ,
tên ….


Luồng
thay thế

Không

Điều kiện Khách hàng truy cập vào trang web
trước
Điều kiện
sau

Hiển thị màn hình gồm các nhà hàng

2.4.7 Xem thơng tin phịng
Mơ tả

Khách hàng đăng nhập vào hệ thống , click vào “Room” trên
thanh header hoặc chọn view more ở mục favorite Room ở màn
hình trang chủ

Tác nhân

Khách hàng

Luồng
chính

Hành vi của tác nhân

Hành vi của hệ thống

1. Khách hàng mở trang
Room trên thanh header hoặc
click view more ở mục
favorite Room ở màn hình
trang chủ

2. Hiển thị màn hình Room

3. Kéo xem các thơng tin có
sẵn

4. Hiển thị các thơng tin của các
nhà hàng sẵn có như hình ảnh ,
tên, giá ….

Luồng
thay thế

Không

Điều kiện Khách hàng truy cập vào trang web
trước
Điều kiện
sau

Hiển thị màn hình gồm các phịng hiện có


2.4.8 Đặt phịng
Mơ tả

Khách hàng đăng nhập vào hệ thống , click vào “Book Room
now” ở màn hình trang chủ

Tác nhân

Khách hàng

Luồng
chính

Hành vi của tác nhân

Hành vi của hệ thống

1. Khách hàng click Book
Room ở màn hình trang chủ

2. Hiển thị màn hình gồm form
nhập thơng tin để đặt phịng

3. Nhập các thông tin cần
thiết

4. Hiển thị textbox để khách hàng
nhập

Luồng
thay thế

Không

Điều kiện Khách hàng truy cập vào trang web, đã đăng nhập tài khoản
trước
Điều kiện
sau

Thơng báo đặt phịng thành công

Chương 3 : THIẾT KẾ KIẾN TRÚC DỮ LIỆU
3.1 Kiến trúc tổng thể của hệ thống

Hình 3.1 Mern stack Development

MERN Stack :MERN stack là nguyên bộ combo open source các công nghệ đều
liên quan đến Javascript là cũng hot nhất hiện nay: MongoDB, ExpressJS,
React/React Native, NodeJS. Người ta dùng MERN stack để xây dựng React
Universal App.

3.2 Kiến trúc mơ hình
Mơ hình MVC (Model – View – Controller) là một trong những mơ hình kiến
trúc ứng dụng phổ biến nhất. Ban đầu mơ hình này được áp dụng chủ yếu ở các
ứng dụng desktop, nhưng sau này ý tưởng về mơ hình MVC được ứng dụng cho
các nền tảng khác như Web.

Hình 3.2.1 Mơ Hình MVC

3.2.1 Cấu trúc mơ hình MVC
Tầng xử lý – Controller


Xử lý logic của ứng dụng, là cầu nối giữa tầng View và Model. Hay nói một
cách cụ thể, Controller sẽ nhận yêu cầu được gửi từ View và thực hiện xử lí yêu
cầu, truy vấn hoặc thao tác dữ liệu lên tầng Model. Sau khi xử lý xong, kết quả sẽ
được trả về lại cho tầng View.

Tầng logic dữ liệu – Model
Tầng Model là trung gian giữa ứng dụng và hệ quản trị cơ sở dữ liệu để cung
cấp và quản lý mơ hình và các thao tác lên dữ liệu. Thông thường, tầng Model sẽ
kết

nối với một hoặc nhiều cơ sở dữ liệu để thực hiện các thao tác lên dữ liệu.
Tầng giao diện – View
Thể hiện giao diện người dùng, là thành phần giao tiếp giữa người dùng (user)
và ứng dụng (application).

3.2.2 Mơ hình MVC trong ứng dụng Web
Với sự phát triển của các công nghệ xây dựng web ở cả Frontend và Backend,
các nhà phát triển có thể xây dựng và phát triển ứng dụng web một cách độc lập
nhưng vẫn đảm bảo được tính kiến trúc của ứng dụng.


Hình 3.2.2 Mơ Hình MVC trong ứng dụng Web
− Tầng giao diện người dùng (View) sẽ được phát triển độc lập ở phía client sử
dụng các cơng nghệ Frontend như VueJS, ReactJS, ... Nói cách khác, client sẽ
được chạy trên 1 server độc lập và có thể tương tác với phía server của backend.
− Tầng xử lí (Controller) và logic dữ liệu (Model) sẽ được phát triển độc lập ở
phía server sử dụng các công nghệ Backend như ExpressJS, DotNetCore, Flank,
...
− Sau khi hoàn thành việc phát triển, client sẽ cung cấp 1 bản build hồn chỉnh để
thêm vào phía Server. Người dùng sẽ yêu cầu thành phần giao diện thông qua
request gửi đến Server.


3.2.3 NodeJS

Hình 3.2.3 Nodejs
Nodejs là gì ?
NodeJS là mã nguồn mở chạy trên mơi trường V8 JavaScript runtime (một trình
thơng dịch JavaScript chạy cực nhanh trên trình duyệt Chrome). NodeJS giúp các
nhà phát triển xây dựng các ứng dụng web một cách đơn giản và dễ dàng mở rộng.

NodeJS có thể được dùng để xây dựng các loại ứng dụng khác nhau như các ứng
dụng dòng lệnh, ứng dụng web, ứng dụng trò chuyện theo thời gian thực, máy chủ
REST API,.. Tuy nhiên, NodeJS thường được dùng chủ yếu để xây dựng các
chương trình mạng như máy chủ web, tương tự như PHP, Java hoặc ASP.NET.


Vì đây là mã nguồn mở nên cho phép bạn sử dụng miễn phí và đồng thời được liên
tục được chỉnh sửa, cải tiến bởi cộng đồng các nhà phát triển tồn cầu.
Lợi ích sử dụng Nodejs
● IO hướng sự kiện không đồng bộ giúp xử lý nhiều yêu cầu đồng thời.
● Đáp ứng được những yêu cầu về thời gian thực.
● Có tốc độ cực rất nhanh, đáp ứng được nhu cầu sử dụng của khách truy cập
‘khổng lồ’ trong thời gian ngắn.
● Sử dụng JavaScript, một ngôn ngữ lập trình rất dễ học.
● Chia sẻ cùng một đoạn mã với cả phía máy chủ và máy khách.
● Npm và các module rất mạnh mẽ và vẫn đang tiếp tục phát triển.
● Có một cộng đồng lớn mạnh, có nhiều mã được chia sẻ qua github
● Tương thích với nhiều thiết bị, nhiều hệ điều hành như MacOS, Window,
Linux,…


3.2.4 ReactJS

Hình 3.2.4 Reactjs
ReactJS là gì?
ReactJS là một thư viện JavaScript được tạo ra để xây dựng giao diện người dùng
có khả năng tương tác tốt và nhanh chóng cho các ứng dụng web và di động. Nó là
một thư viện mã nguồn mở, xây dựng dựa trên các component, giao diện người
dùng chỉ chịu trách nhiệm cho tầng view của ứng dụng.
Nó được sử dụng bởi các cơng ty lớn, đã thành lập và các công ty mới thành lập

như: Netflix, Airbnb, Instagram và New York Times..v..v. ReactJS mang lại nhiều
lợi thế cho các lập trình viên, khiến nó trở thành một lựa chọn tốt hơn so với các
Framework khác như Angular.
Trong kiến ​trúc Model View Controller (MVC), tầng view chịu trách nhiệm về
giao diện của ứng dụng. ReactJS được tạo ra bởi Jordan Walke, một kỹ sư phần
mềm tại Facebook.


Các tính năng của ReactJS
Chúng ta đã vừa tìm hiểu ReactJS là gì rồi, vậy bây giờ hãy xem nó có những tính
năng gì mà khiến cho nhiều cơng ty sử dụng nó đến vậy.
JSX – JavaScript Syntax Extension
JSX như tên gọi của nó, là một phần mở rộng cú pháp cho JavaScript. Nó được sử
dụng với ReactJS để mơ tả giao diện người dùng trông như thế nào. Bằng cách sử
dụng JSX, chúng ta có thể viết các cấu trúc HTML trong cùng một tệp chứa mã
JavaScript. Điều này làm cho mã dễ hiểu và dễ gỡ lỗi hơn, vì nó tránh việc sử dụng
các cấu trúc DOM JavaScript phức tạp.
Virtual DOM
Virtual DOM là một định dạng dữ liệu của JavaScript, với khối lượng nhẹ và được
dùng để thể hiện nội dung của DOM – Document Object Model – Mơ hình Đối
tượng Tài liệu tại một thời điểm nhất định nào đó. Khi trạng thái của một đối tượng
thay đổi, VDOM chỉ thay đổi đối tượng đó trong DOM thực thay vì cập nhật tất cả
các đối tượng.


Nghe có vẻ khá phức tạp đúng khơng? Đừng lo lắng quá, trước tiên chúng ta hãy
tìm hiểu DOM là gì, sau đó chúng ta sẽ xem xét cách VDOM và DOM thực tương
tác với nhau.
● Mơ hình Đối tượng Tài liệu (DOM) là gì?
DOM (Mơ hình Đối tượng Tài liệu) coi một file XML hoặc HTML như một cấu

trúc cây, trong đó mỗi nút là một đối tượng đại diện cho một phần của tài liệu.

● Virtual DOM và ReactJS DOM tương tác với nhau như thế nào?
Khi trạng thái của một đối tượng thay đổi trong ứng dụng ReactJS, VDOM sẽ được
cập nhật. Sau đó, nó so sánh trạng thái trước đó của nó và sau đó chỉ cập nhật các
đối tượng đó trong DOM thực thay vì cập nhật tất cả các đối tượng.
Điều này làm cho mọi thứ hoạt động nhanh chóng.
Performance
ReactJS sử dụng VDOM, giúp các ứng dụng web chạy nhanh hơn nhiều so với
những ứng dụng được phát triển với các Framework front-end khác.