BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ TP.HCM

ĐỒ ÁN CƠ SỞ

HỆ THỐNG ĐẶT PHÒNG KHÁCH SẠN ONLINE

Nghành: Công nghệ thông tin

Chuyên ngành: Công nghệ phần mềm

Giảng viên hướng dẫn: Ths. Nguyễn Đình Ánh

Sinh Viên Thực Hiện: Nguyễn Huy Hoàng MSSV: 2080600868
Nguyễn Ngọc Huy MSSV: 2082500236
Phạm Dự Hoàng MSSV: 2080600952

Tp.Hồ Chí Minh, tháng 6/2023

 LỜI NÓI ĐẦU
Công nghệ thông tin trong khoảng thập kỉ gần đây đã và đang phát triền một cách
chóng mặt. Mọi ngành nghề, mọi hoạt động, mọi lĩnh vực đều đang áp dụng công nghệ
thông tin vào các khâu như quản lí, sản xuất, thống kê, tính toán,… để đảm bảo tốc độ
thực hiện cũng như tính đúng đắn trong quá trình vận hành không để xảy ra sai sót. Trong
tương lai gần, nếu như công nghệ cứ trên đà phát triển như bây giờ thì nó sẽ hoàn toàn
thay thế con người trong hầu hết các khâu cũng như trong các lĩnh vực, ngành nghề khác
nhau.
Đối với Việt Nam ta, trong những năm gần đây các hãng công nghệ lớn trên thế
giới đang xem xét cũng như tìm thấy những yếu tố để có thể phát triển về công nghệ nên
họ đang dần chuyển tất cả các khâu sản xuất cũng như các phòng nghiên cứu sang Việt
Nam, điều đó cho thấy được nước ta có tiềm lực phát triển về công nghệ rất lớn.
Du lịch, nghỉ dưỡng đang rất phát triển vì những danh lam thắng cảnh cũng như
những dịch mà đơi đến cung cấp cho khách một cách rất tốt và chu đáo. Ngoài ra giới trẻ
hiện nay đang có nhu cầu đi du lịch rất lớn. Hiểu được nhu cầu đó, nhóm thực hiện đồ án
cơ sở chúng em sẽ làm ra một hệ thống đặt phòng khách sạn online nhằm đơn giản và tối
ưu hóa qui trình đặt phòng nhằm rút ngắn thời gian, bớt rườm rà trong quá trình du lịch
nghỉ dưỡng.
Trong quá trình thực hiện đồ án, nhóm chúng em cũng có nhiều thiếu xót cũng
như như những sai phạm không đáng có, kính mong thầy hướng dẫn cũng như hội đồng
chấm bài châm chướt và bỏ qua. Nhóm chúng em xin chân thành cảm ơn.
Sinh viên thực hiện
Nguyễn Huy Hoàng
Nguyễn Ngọc Huy
Phạm Dự Hoàng

2
Mục lục
LỜI NÓI ĐẦU .......................................................................................................... 2
Danh mục hình ảnh ................................................................................................... 5
1. Tổng quan ............................................................................................................. 6
1.1 Khảo sát thực trạng ......................................................................................... 6
1.2 Nhiệm vụ đồ án .............................................................................................. 6
1.2.1 Mục tiêu ................................................................................................... 6
1.2.2 Đối tượng sử dụng ................................................................................... 7
1.2.3 Mô tả nghiệp vụ ....................................................................................... 7
1.2.4 Các bước hoàn thành dự án ..................................................................... 8
1.2.5 Các chức năng đã làm được .................................................................... 8
1.2.6 Các chức năng chưa làm được và định hướng ........................................ 8
1.3 Cấu trúc đồ án ................................................................................................. 8
2. Cơ sở lý thuyết...................................................................................................... 9
2.1 Tổng quan về Spring Boot.............................................................................. 9
2.1.1 Ngôn ngữ lập trình Java .......................................................................... 9
2.1.2 Spring Boot ............................................................................................ 12
2.2 Tổng quan ReactJS. ...................................................................................... 15
2.2.1 ReactJS là gì? ........................................................................................ 15
2.2.2 JSX. ....................................................................................................... 16
2.2.3 Virtual DOM ......................................................................................... 16
2.2.4 Ưu và nhược điểm của ReactJS. ............................................................ 17
2.3 RestFul API. ................................................................................................. 19
2.3.1 Sơ bộ về API. ........................................................................................ 19
2.3.2 Sơ bộ về RestFul ................................................................................... 20
2.3.3 RestFul API. .......................................................................................... 21
2.3.4 Cách thức hoạt động. ............................................................................. 21
2.4 phpMyAdmin. .............................................................................................. 22
2.4.1 phpMyAdmin là gì?............................................................................... 22
2.4.2 Các tính năng của phpMyAdmin........................................................... 23
2.4.3 Ưu và nhược điểm của phpMyAdmin. .................................................. 24

3
 2.5 Sơ đồ thiết kế phần mềm. ............................................................................. 25
2.5.1 Sơ đồ thực thể kết hợp ( ERD – Entity Relationship Diagram) ............ 25
2.5.2 Sơ đồ Use Case ...................................................................................... 26
2.5.3 Sơ đồ hoạt động ( Activity Diagram ) ................................................... 27
3. Kết quả thực nghiệm .......................................................................................... 28
3.1 Giao diện đăng kí, đăng nhập ....................................................................... 28
3.2 Giao diện trang chủ ...................................................................................... 29
3.3 Giao diện quản lí phòng ............................................................................... 30
3.4 Giao diện tìm kiếm khách sạn. ..................................................................... 30
3.5 Chi tiết khách sạn. ........................................................................................ 31
3.6 Trang điểm đến nổi bật ................................................................................. 31
3.7 Trang đặt phòng. ........................................................................................... 32
4. Kết luận .............................................................................................................. 32
4.1 Ưu điểm ........................................................................................................ 32
4.2 Nhược điểm .................................................................................................. 32
4.3 Các tính năng đã phát triển được .................................................................. 32
4.4. Các tính năng chưa thực hiện được ............................................................ 32
4.5 Hướng phát triển phần mềm ......................................................................... 33
Tài liệu tham khảo .................................................................................................. 33

4
Danh mục hình ảnh
Hình 2.1 : Java là gì?........................................................................................................... 9
Hình 2.2: Đặc điểm của Java ............................................................................................ 10
Hình 2.3: Các ứng dụng của Java ..................................................................................... 11
Hình 2.4: Các phiên bản của Java ..................................................................................... 11
Hình 2.5: Spring Boot là gì? ............................................................................................. 12
Hình 2.6: Cách tổ chức Spring Boot ................................................................................. 13
Hình 2.7: Các tính năng Spring Boot ................................................................................ 13
Hình 2.8: Các đặc điểm của Spring Boot .......................................................................... 14
Hình 2.9: ReactJS là gì? .................................................................................................... 16
Hình 2.11: JSX .................................................................................................................. 16
Hình 2.12: JSX Code Style ............................................................................................... 16
Hình 2.13: Virtual DOM ................................................................................................... 17
Hình 2.14: Trend Search ReactJs ...................................................................................... 18
Hình 2.15: Các ưu và nhược điểm của ReactJS ................................................................ 19
Hình 2.16: API là gì? ........................................................................................................ 20
Hình 2.17: RestFul là gì? .................................................................................................. 20
Hình 2.18: RestFul API là gì? ........................................................................................... 21
Hình 2.19: Cách hoạt động API ........................................................................................ 22
Hình 2.20: Cách giao tiếp giữa Client và Server .............................................................. 22
Hình 2.21: phpMyAdmin là gì? ........................................................................................ 23
Hình 2.22: Giao diện phpMyAdmin ................................................................................. 23
Hình 2.23: Database .......................................................................................................... 24
Hình 2.24: Bảo mật ........................................................................................................... 24
Hình 2.25: ERD ................................................................................................................ 25
Hình 2.26: Use Case tổng quát ......................................................................................... 26
Hình 2.28: Use case quản lí Khách sạn............................................................................. 26
Hình 2.27: Use Case quản lí phòng .................................................................................. 26
Hình 2.28: Cập nhật phòng ............................................................................................... 27
Hình 2.29: Activity đặt phòng .......................................................................................... 27

5
 1. Tổng quan
1.1 Khảo sát thực trạng
Hiện nay, nhu cầu du lịch nghỉ dưỡng của con người ngày càng tăng. Nhất là đối
với đối tượng giới trẻ và trung niên để giảm bớt áp lực công việc và cũng như để phục vụ
cho những công việc có tính chất di chuyển liên tục, không cố định như tiếp viên hàng
không hay các công việc phải đi công tác thường xuyên.
Chính vì thế các dịch vụ kinh doanh nhà hàng khách sạn ra đời và phát triển cực kì
mạnh mẽ vào những năm gần đây. Nó cũng được coi là thị trường cạnh tranh khốc liệt
bậc nhất hiện nay. Ngoài việc cải thiện và nâng cấp kỹ thuật, cơ sở vật chất, chất lượng
phục vụ thì việc truyền thông online để bắt kịp xu hướng và thị hiếu người dùng vì tính
nhanh gọn, chính xác cũng như cực kì tiện lợi là điều cần thiết, nhất là những nhà hàng
khách sạn có quy mô vừa và nhỏ.
Và thiết kế website khách sạn chuyên nghiệp chính là cách để các doanh nghiệp có
thể tiếp cận khách hàng tiềm năng một cách nhanh chóng cũng như truyền tải các thông
điệp về sản phẩm, dịch vụ của mình một cách trực quan, sinh động nhất.

Việc đặt hàng qua mạng giảm được rủi ro không chọn được phòng ưng ý khi tới
nơi đó hoặc nói đơn giản là ta có thể lựa chọn được vị trí phòng, số giường, số người, các
tiện nghi phòng óc, các đánh giá của người đi trước, giá cả rõ ràng,…. Mà không phải
đến tận nơi tránh ùn ứ hoặc việc đến sau có thể không đặt được phòng như ý muốn.
1.2 Nhiệm vụ đồ án
1.2.1 Mục tiêu
- Xây dựng được hệ thống đặt phòng online gồm các chức năng thêm xóa sửa
phòng cho bên quản lí khách sạn. Đặt phòng, xem phòng, xem các khuyến mãi cũng như
các dịch vụ kèm theo khi đặt phòng.
- Xây dựng giao diện đẹp, trực quan, dễ sử dụng
- Bảo mật thông tin khách hàng, đảm bảo khách hàng có một trải nghiệm nhanh
chóng và toàn vẹn nhất
- Tối thiểu lỗi xảy ra khi sử dụng
6
 1.2.2 Đối tượng sử dụng
Hệ thống đặt phòng online được tạo ra nhằm cho các đối tượng sau sử dụng và các
quyền như sau :
 Khách hàng : là những người đặt phòng, có thể xem các phòng, các tiện ích
của phòng, các dịch vụ, các voucher giảm giá. Họ là người có thể sử dụng
chức năng đặt phòng, thanh toán.
 Quản lí khách sạn: những người xem là Admin, thêm xóa sửa các phòng
các dịch vụ các mã giảm giá. Xem được thông tin khách hàng, có thể thay
đổi thông tin đặt phòng của khách.
1.2.3 Mô tả nghiệp vụ
 Quy trình thêm xóa sửa phòng: chức năng này chỉ dành cho quản lí
khách sạn . Sau khi được cung cấp một tài khoản gồm có tên đăng nhập và
mật khẩu, người quản lí cũng sẽ được đưa đến trang chủ của khách sạn ,
nhưng đặc biệt là quản lí sẽ có thêm một phần là quản lí khách sạn. Trong
mục này khi bấm vào nó sẽ xổ ra một trang bao gồm tất cả các tỉnh thành
mà hệ thống khách sạn có mặt, sau đó sẽ bấm lựa chọn khách sạn phù hợp.
Sau đó, một trang bao gồm tất cả các phòng của khách sạn đó sẽ được hiển
thị. Quản lí sẽ được tự do thêm, xóa, sửa một phòng tùy ý hoặc có thể đưa
phòng đó vào trạng thái nghỉ ( sửa chữa, nâng cấp, hoặc đã có người đặt
trước).
 Quy trình đặt phòng : chức năng này bắt buộc người dùng phải đăng kí
một tài khoản nhằm dễ dàng quản lí cũng như xác định danh tính người
dùng nhằm không bị phá hoại hoặc có những tình trạng hack hệ thống. Sau
khi người dùng đăng nhập, họ sẽ được xem tất cả các phòng, tiện nghi,…
Để đặt được phòng các tùy chọn sẽ như sau : Chọn nơi cần đến -> Chọn
khách sạn -> Chọn phòng ( các phòng sẽ được ghi chú số giường, số người,
tiện nghi, vị trí, và giá ) -> Chọn ngày nhận, ngày trả -> Nhập thông tin
người đặt phòng-> Xác nhận lại thông tin đặt phòng -> Chọn phương thức

7
 thanh toán -> Thanh toán ( nếu như phương thức là thanh toán khi nhận
phòng thì người dùng phải trả trước 10% giá trị để giữ phòng cũng như
tránh tình trạng phá hoại). Sau đó hệ thống sẽ trả lại một mã code để khi
người dùng đến nhận phòng sẽ đưa cho nhân viên xác nhận và sau đó nhận
phòng.
1.2.4 Các bước hoàn thành dự án
 Lên ý tưởng
 Khảo sát thực trạng
 Phân tích thiết kế hệ thống
 Thiết kế
 Cài đặt
1.2.5 Các chức năng đã làm được
 Thêm, xóa, sửa khách sạn
 Đăng nhập, đăng kí
 Phân quyền người dùng
 Phân trang
 Đặt phòng
1.2.6 Các chức năng chưa làm được và định hướng
 Thanh toán bằng ví điện tử.
 Xử lí khi phòng đó đã đặt thì sẽ như thế nào.
1.3 Cấu trúc đồ án
Gồm 4 phần:
 Phần 1 : Tổng quan
Nêu thực trạng mà hệ thống đặt phòng online, mô tả nghiệp vụ của hệ
thống để có thể thiết kế phần mền một cách hiệu quả.
 Phần 2 : Cơ sở lí thuyết

8
 Các công nghệ được sử dụng trong đồ án, bản vẽ thiết kế phần mền, cơ sở
dữ liệu ERD, Use Case, Các diagram,..
 Phần 3 : Kết quả
Chạy hệ thống và xem các chức năng có chạy như đúng thiết kế hay không,
có dễ sử dụng hay không.
 Phần 4: Kết luận
Đưa ra kết quả, các mong muốn phát triển phần mềm, ưu nhược điểm của
hệ thống.

2. Cơ sở lý thuyết
2.1 Tổng quan về Spring Boot.
2.1.1 Ngôn ngữ lập trình Java
a. Java là gì?
- Java là một trong những ngôn ngữ lập trình hướng đối tượng. Nó được sử dụng
trong việc phát triển phần mềm, trang web, game, hay ứng dụng di động.

Hình 2.1 : Java là gì?

- Java được tạo ra với tiêu chí” Viết code một lần, thực thi khắp nơi” (Write once,
run anywhere- WORA). Chương trình phần mềm viết bằng Java có thể chạy trên mọi nền
tảng (platform) khác nhau thông qua một môi trường thực thi với điều kiện có môi
trường thực thi thích hợp hỗ trợ nền tảng đó.

9
 b. Đặc điểm của Java.

Hình 2.2: Đặc điểm của Java

- Hướng đối tượng hoàn toàn: sử dụng lại hầu như các cú pháp của C, C++
nhưng bị lược bỏ thao tác với con trỏ nhằm đảm bảo tính an toàn và dễ sử dụng hơn. Các
thao tác Overload, goto hay cấu trúc Struct và union cũng được loại bỏ khỏi Java.
- Độc lập phần cứng và hệ điều hành: chương trình viết bằng Java có thể chạy
tốt ở nhiều môi trường khác nhau, Gọi là cross-platform. Thể hiện ở 2 cấp độ là mã
nguồn và nhị phân.
- Ngôn ngữ thông dịch: chia làm 2 loại là Thông dịch ( dịch từng lệnh rồi chạy
từng lệnh) và biên dịch ( tạo ra một file nào đó có thể sử dụng lại mà k cần biên dịch lại).
Java thuộc loại vừa thông dịch vừa biên dịch.
- Cơ chế thu gom rác tự động: Khi tạo ra các đối tượng trong Java, JRE sẽ tự
động cấp phát không gian bộ nhớ cho các đối tượng ở trên heap.
- Đa luồng: Java hỗ trợ lập trình đa tiến trình (multithread) để thực thi các công
việc đồng thời. Đồng thời cũng cung cấp giải pháp đồng bộ giữa các tiến trình (giải pháp
sử dụng priority…).
- Tính an toàn và bảo mật
c. Ứng dụng của Java
Các ứng dụng tiêu biểu của Java như sau:
 Làm ứng dụng Android
 Làm hệ thống giao dịch trong ngành dịch vụ tài chính
 Làm ứng dụng Web
10
  Làm phần mềm phát triền ( IDE )
 Làm ứng dụng giao dịch
 Làm ứng dụng J2ME
 Lâp trình nhúng
 Công nghệ Big Data, …

Hình 2.3: Các ứng dụng của Java

d. Các thành phần của Java.
- JRE ( Java Runtime Enviroment) : cung cấp JVM ( Java Vitural Michine) và
thư viện được sử dụng để chạy chương trình Java.
- JDK ( Java Development Kit) : bộ phát triền Java gồm: trình biên dịch và trình
gỡ rối được sử dụng để phát triền ứng dụng Java.
e. Các phiên bản của Java

Hình 2.4: Các phiên bản của Java

- Java Standard Edition (Java SE) – Là một nền tảng cơ bản cho phép phát triển
giao diện điều khiển, các ứng dụng mạng và các ứng dụng dạng Win Form.

11
 - Java Enterprise Edition (Java EE) – Được xây dựng trên nền tảng Java SE,
giúp phát triển các ứng dụng web, các ứng dụng ở cấp doanh nghiệp, …
- Java Mobile Edition (Java ME) – Là một nền tảng cho phép phát triển các ứng
dụng nhúng vào các thiết bị điện tử như mobile,…
2.1.2 Spring Boot
a. Spring Boot là gì?

Hình 2.5: Spring Boot là gì?

Ở thời điểm hiện tại Spring Boot có lẽ đang là framework nổi tiếng và được sử
dụng nhiều bậc nhất trong phát triển các ứng dụng sử dụng ngôn ngữ Java. Được xây
dựng trên nền tảng Spring framework, nó có tất cả các tính năng của Spring cộng thêm
những tiện ích mà nó mang lại như giảm thiểu các bước cấu hình phức tạp, nhúng server
container (Tomcat, Jetty hoặc Undertow) tự động vào ứng dụng giúp chúng ta có thể khởi
chạy một ứng dụng ngay lập tức, quản lý dependence thông minh,…
b. Cách phát triển.
Để phát triển một ứng dụng web cơ bản HelloWorld sử dụng Spring framework
bạn sẽ cần ít nhất 5 công đoạn sau;
 Tạo một project sử dụng Maven với các dependency cần thiết của Spring
MVC và Servlet API.
 Một tập tin web.xml để khai báo DispatcherServlet của Spring MVC.
 Một tập tin cấu hình của Spring MVC.
 Một class Controller trả về một trang “Hello World” khi có request đến.
 Cuối cùng là phải có một web server dùng để triển khai ứng dụng lên chạy.

12
 Hình 2.6: Cách tổ chức Spring Boot
Giờ đây với Spring Boot, chúng ta có thể tạo dự án Spring một cách nhanh chóng
và cấu hình cũng đơn giản dùng Sublime Text để phát triển luôn khỏi cần cài đặt eclipse
hay netbean nặng.
c. Tính năng và đặc điểm của Spring Boot.

Hình 2.7: Các tính năng Spring Boot

Dưới đây là một số tính năng nổi bật của Spring Boot:
 Tạo các ứng dụng Spring độc lập
 Nhúng trực tiếp Tomcat, Jetty hoặc Undertow (không cần phải deploy ra
file WAR)
 Các starter dependency giúp việc cấu hình Maven đơn giản hơn
 Tự động cấu hình Spring khi cần thiết
 Không sinh code cấu hình và không yêu cầu phải cấu hình bằng XML …
Một số tính năng quan trọng:
 SpringApplication: Khi lập trình xong và bạn chỉ muốn chạy thử nghiệm
thì nên làm thế nào? Bạn chỉ cần gọi run() là được, vì Spring Boot được

13
 thiết kế theo dạng “just run”. Giúp cho các lập trình viên chỉ cần cấu hình ít
Spring nhất, phần còn lại Spring Boot sẽ lo liệu.
 Externalized Configuration: Bạn mong muốn tạo nên một ứng dụng có
thể chạy trên nhiều loại môi trường khác nhau? Spring Boot sẽ giúp bạn
config cấu hình từ ngoài và ứng dụng của bạn sẽ có thể chạy thoải mái.
 Profiles: Nếu có nhiều config khác nhau, bạn có thể sử dụng Profile để
phân chia từng loại cho từng môi trường để dễ dàng quản lý hơn.
 Logging: Tính năng này được sử dụng cho toàn bộ chức năng log trong
phạm vi nội bộ và nó được quản lý mặc định.

Hình 2.8: Các đặc điểm của Spring Boot

Đặc điểm của Spring Boot:

 Được phát triển tối ưu sao cho cấu hình XML trở nên đơn giản nhanh
chóng và dễ dàng nhất trong Spring.
 Gia tăng được năng suất trong quá trình lập trình.
 Giảm ở mức tối thiểu thời gian lập trình.
 Giúp người dùng mặc dù không có nhiều kiến thức lập trình vẫn có thể xây
dựng được một ứng dụng.
d. Ưu và nhược điểm của Spring Boot.
Ưu điểm:

14
  Tự động cấu hình tất cả các components cho một ứng dụng Spring cấp sản
xuất.
 Các máy chủ nhúng được tạo sẵn (Tomcat, Jetty và Undertow), dẫn đến
việc triển khai ứng dụng được tăng tốc và hiệu quả hơn.
 Không có cấu hình XML.
 Dễ dàng truy cập cơ sở dữ liệu và các dịch vụ hàng đợi như MySQL,
Oracle, MongoDB, Redis, ActiveMQ và các dịch vụ khác.
 Tích hợp trơn tru với hệ sinh thái Spring.
 Cộng đồng lớn và rất nhiều hướng dẫn, tạo điều kiện cho giai đoạn làm
quen.
Nhược điểm:
 Thiếu kiểm soát. Do style cố định, Spring Boot tạo ra nhiều phụ thuộc
không được sử dụng dẫn đến kích thước tệp triển khai lớn.
 Quá trình chuyển đổi dự án Spring cũ hoặc hiện có thành các ứng dụng
Spring Boot nhiều khó khăn và tốn thời gian.
2.2 Tổng quan ReactJS.
2.2.1 ReactJS là gì?
ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013,
bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các
thành phần trên website. Một trong những điểm nổi bật nhất của ReactJS đó là việc
render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client nữa.

15
 Hình 2.9: ReactJS là gì?
Hơn nữa, để tăng tốc quá trình phát triển và giảm thiểu những rủi ro có thể xảy ra
trong khi coding, React còn cung cấp cho chúng ta khả năng Reusable Code (tái sử dụng
code) bằng cách đưa ra 2 khái niệm quan trọng bao gồm: JSX và Virtual DOM.
2.2.2 JSX.

Hình 2.11: JSX

JSX (nói ngắn gọn là JavaScript extension) là một React extension giúp chúng ta
dễ dàng thay đổi cây DOM bằng các HTML-style code đơn giản.

Hình 2.12: JSX Code Style

Và kể từ lúc ReactJS browser hỗ trợ toàn bộ những trình duyệt Web hiện đại, bạn
có thể tự tin sử dụng JSX trên bất kỳ trình duyệt nào mà bạn đang làm việc.
2.2.3 Virtual DOM
Nếu bạn không sử dụng ReactJS (và JSX), website của bạn sẽ sử dụng HTML để
cập nhật lại cây DOM cho chính bản nó (quá trình thay đổi diễn ra tự nhiên trên trang mà
người dùng không cần phải tải lại trang), cách làm này sẽ ổn cho các website nhỏ, đơn
giản, static website. Nhưng đối với các website lớn, đặc biệt là những website thiên về xử

16
lý các tương tác của người dùng nhiều, điều này sẽ làm ảnh hưởng performance website
cực kỳ nghiêm trọng bởi vì toàn bộ cây DOM phải reload lại mỗi lần người dùng nhấn

vào tính năng yêu cầu phải tải lại trang).

Hình 2.13: Virtual DOM

Với việc cập nhật đúng chỗ như vậy, khỏi phải nói nó tiết kiệm cho chúng ta rất
nhiều tài nguyên cũng như thời gian xử lý. Ở các website lớn và phức tạp như thương mại
điện tử, đặt món ăn, v.v bạn sẽ thấy việc này là vô cùng cần thiết và quan trọng để làm
tăng trải trải nghiệm của khách hàng và performance được cải thiện đáng kể.Với việc cập
nhật đúng chỗ như vậy, khỏi phải nói nó tiết kiệm cho chúng ta rất nhiều tài nguyên cũng
như thời gian xử lý. Ở các website lớn và phức tạp như thương mại điện tử, đặt món ăn,
v.v bạn sẽ thấy việc này là vô cùng cần thiết và quan trọng để làm tăng trải trải nghiệm
của khách hàng và performance được cải thiện đáng kể.
2.2.4 Ưu và nhược điểm của ReactJS.
a. Ưu điểm
 Phù hợp với đa dạng thể loại website: ReactJS khiến cho việc khởi tạo
website dễ dàng hơn bởi vì bạn không cần phải code nhiều như khi tạo
trang web thuần chỉ dùng JavaScript, HTML và nó đã cung cấp cho bạn đủ
loại “đồ chơi” để bạn có thể dùng cho nhiều trường hợp.
 Tái sử dụng các Component: Nếu bạn xây dựng các Component đủ tốt, đủ
flexible để có thể thoả các “yêu cầu” của nhiều dự án khác nhau, bạn chỉ

17
 tốn thời gian xây dựng ban đầu và sử dụng lại hầu như toàn bộ ở các dự án
sau. Không chỉ riêng mỗi ReactJS mà các framework hiện nay cũng đều
cho phép chúng ta thực hiện điều đó, ví dụ Flutter chẳng hạn.
 Có thể sử dụng cho cả Mobile application: Hầu hết chúng ta đều biết rằng
ReactJS được sử dụng cho việc lập trình website, nhưng thực chất nó được
sinh ra không chỉ làm mỗi đều đó. Nếu bạn cần phát triển thêm ứng dụng
Mobile, thì hãy sử dụng thêm React Native – một framework khác được
phát triển cũng chính Facebook, bạn có thể dễ dàng “chia sẻ” các
Component hoặc sử dung lại các Business Logic trong ứng dụng.
 Thân thiện với SEO: SEO là một phần không thể thiếu để đưa thông tin
website của bạn lên top đầu tìm kiếm của Google. Bản chất ReactJS là một
thư viện JavaScript, Google Search Engine hiện nay đã crawl và index
được code JavaScript, tuy nhiên bạn cũng cần thêm một vài thư viện khác
để hỗ trợ điều này nhé!

Hình 2.14: Trend Search ReactJs

 Debug dễ dàng: Facebook đã phát hành 1 Chrome extension dùng trong
việc debug trong quá trình phát triển ứng dụng. Điều đó giúp tăng tốc quá
trình release sản phẩm cung như quá trình coding của bạn.

18
 b. Nhược điểm
 Reactjs chỉ phục vụ cho tầng View. React chỉ là View Library nó không
phải là một MVC framework như những framework khác. Đây chỉ là thư
viện của Facebook giúp render ra phần view. Vì thế React sẽ không có
phần Model và Controller, mà phải kết hợp với các thư viện khác. React
cũng sẽ không có 2-way binding hay là Ajax.
 Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải
cấu hình lại.
 React khá nặng nếu so với các framework khác React có kích thước tương
tương với Angular (Khoảng 35kb so với 39kb của Angular). Trong khi đó
Angular là một framework hoàn chỉnh.
 Khó tiếp cận cho người mới học Web.

Hình 2.15: Các ưu và nhược điểm của ReactJS

2.3 RestFul API.
2.3.1 Sơ bộ về API.
API (Application Programming Interface) là một tập hợp các định nghĩa và giao
thức để xây dựng, tích hợp các phần mềm ứng dụng. Khái niệm này đôi khi còn được
xem như một “hợp đồng” giữa người cung cấp thông tin và người sử dụng thông tin –
thiết lập nội dung được yêu cầu từ người dùng (call) và từ producer (response). Chẳng

19
hạn, một thiết kế API cho service liên quan đến thời tiết có thể yêu cầu người dùng cung
cấp zip code, sau đó producer sẽ phản hồi thông tin về nhiệt độ ở khu vực đó.

Hình 2.16: API là gì?

2.3.2 Sơ bộ về RestFul

Hình 2.17: RestFul là gì?

REST là một tập hợp các ràng buộc về kiến trúc. Các developer API có thể triển
khai REST theo nhiều cách khác nhau. Khi một client request được tạo thông qua
RESTful API, nó sẽ chuyển một biểu diễn trạng thái của tài nguyên đến người yêu cầu
(hoặc endpoint). Thông tin này sau đó sẽ được chuyển ở một trong số các định dạng như:
JSON, HTML, XLT, Python, PHP hay plain text. JSON là định dạng file phổ biến nhất vì
là một ngôn ngữ bất khả tri, có thể được đọc bởi cả con người lẫn máy.

20
 2.3.3 RestFul API.

Hình 2.18: RestFul API là gì?

RESTful API (hay REST API) là một giao diện lập trình ứng dụng (API hay web
API) tuân theo các ràng buộc của kiểu kiến trúc REST, cho phép tương tác với các dịch
vụ web RESTful. Hay nói đơn giản, RESTful API là một tiêu chuẩn được dùng trong
việc thiết kế API dành cho các ứng dụng web (thiết kế Web Services) để hỗ trợ cho việc
quản lý các resource. REST là viết tắt của cụm từ Representational state transfer (ứng
dụng chuyển đổi cấu trúc dữ liệu), được tạo ra lần đầu bởi nhà khoa học máy tính Roy
Fielding ở những năm 2000.
2.3.4 Cách thức hoạt động.
RESTful API chia một transaction (giao dịch) ra thành nhiều module nhỏ, mỗi
module giải quyết một phần cơ bản của transaction. Việc này giúp tăng tính linh hoạt
nhưng đôi khi lại tương đối khó khăn cho các developer khi muốn thiết kế REST API từ
đầu. Hiện tại có khá nhiều công ty cung cấp model cho các developer sử dụng, trong đó
phổ biến nhất gồm có Amazon S3, CDMI hay OpenStack Swift.Một RESTful API sử
dụng các câu lệnh để lấy tài nguyên, trạng thái của tài nguyên ở bất kỳ timestamp nào
được gọi là một biểu diễn của tài nguyên đó. Các phương thức HTTP mà RESTful API
sử dụng được xác định bởi giao thức RFC 2616:

21
 Hình 2.19: Cách hoạt động API
 GET: Trả về một tài nguyên.
 PUT: Thay đổi trạng thái hoặc cập nhật tài nguyên (có thể là đối tượng, file
hay block).
 POST: Tạo tài nguyên.
 DELETE: Xoá một tài nguyên.
Một số định dạng dữ liệu được RESTful API hỗ trợ:
 application/json.
 application/xml.
 application/x-wbe+xml.
 application/x-www-form-urlencoded.
 multipart/form-data

Hình 2.20: Cách giao tiếp giữa Client và Server

2.4 phpMyAdmin.
2.4.1 phpMyAdmin là gì?
phpMyAdmin là một công cụ nguồn mở, được viết bằng ngôn ngữ PHP. Vai trò
của nó là giúp người dùng quản lý cơ sở dữ liệu(CSDL) của MySQL, được thực hiện
22
thông qua một trình duyệt web.Đây là công cụ quản trị MySQL phổ biến nhất, được sử
dụng bởi hàng triệu người dùng khác nhau trên toàn thế giới. Đặc biệt, phpMyAdmin là
lựa chọn hàng đầu của những nhà quản trị cơ sở dữ liệu, database và administrator.

Hình 2.21: phpMyAdmin là gì?

2.4.2 Các tính năng của phpMyAdmin.

Hình 2.22: Giao diện phpMyAdmin

Người dùng thường sử dụng những tính năng chung của phpMyadmin như sau:
 Quản lý user – người dùng: Thêm, xóa, sửa thông tin, phân quyền cho
người dùng.
 Quản lý CSDL ( import/Export): Hỗ trợ các định dạng phpmyadmin mysql,
XML và CSV.
 Quản lý CSDL: Tạo mới, xóa, sửa, thêm hàng, thêm bảng, thêm trường, tìm
kiếm đối tượng phù hợp với truy xuất.
 Thực hiện những truy vấn MySQL, tiến hành giám sát quá trình và theo dõi
các truy vấn đó.
 Tiến hành sao lưu và khôi phục thông qua những thao tác thủ công.
23
 2.4.3 Ưu và nhược điểm của phpMyAdmin.
a. Ưu điểm.

Hình 2.23: Database

Tăng hiệu quả của công việc quản lý cơ sở dữ liệu: phpMyadmin giúp bạn có được
giao diện xử lý các thao tác trên CSDL một cách trực quan nhất. Từ đó, tiết kiệm thời
gian, thao tác so với việc thực hiện bằng dòng lệnh quen thuộc trên command line.
phpMyadmin đa ngôn ngữ, rất dễ sử dụng: Mã nguồn mở nổi tiếng này được duy trì bởi
The phpMyAdmin Project. Hiện tại, nó được cung cấp cho người sử dụng với 64 ngôn
ngữ khác nhau và có sẵn. Nhờ vậy việc làm quen và sử dụng với phpMyAdmin rất đơn
giản.
b. Nhược điểm.

Hình 2.24: Bảo mật

 Về tính bảo mật: Hạn chế lớn nhất của phpMyAdmin cũng như các mã
nguồn mở khác chính là khả năng bảo mật. Hạn chế truy cập vào URL của
phpMyAdmin từ những địa chỉ IP cố định là điều người dùng cần ghi nhớ.
 Về mặt sao lưu dữ liệu: Tính đến thời điểm hiện tại, phpMyAdmin vẫn còn
một số nhược điểm chưa được khắc phục về vấn đề sao lưu dữ liệu.

24
2.5 Sơ đồ thiết kế phần mềm.
2.5.1 Sơ đồ thực thể kết hợp ( ERD – Entity Relationship Diagram)

Hình 2.25: ERD

Các loại thực thể:

 Tai_Khoan ( id_Tai_Khoan, username, email, Pass_word, Phone).
 Hoa_Don (id_Hoa_Don, NgayDat, NgayNhan, NgayTra, CMND,
TenNguoiDat, Ghi_Chu, Phone, id_Tai_Khoan).
 Room ( id_Room, ten_Room, Dien_Tich, img, Mota, So_Luong, Price,
id_Hotel).
 Tien_Ich (id_Tien_ich, Ten_Tien_Ich, img).
 Hotel (id_Hotel, TenHotel, Dia_Chi, img, Mota, email, Phone,
id_Province).
 Roles( id_Role, Ten_id_Role).
 Province ( id_Province, Ten_Province, img).
 User_Role (id_Tai_Khoan, id_Role).
 Room_TienIch ( id_Room, id_Tien_Ich).
 CT_HoaDon ( id_Hoa_Don, id_Room, Price, SLDat).

25
2.5.2 Sơ đồ Use Case
a. Use Case tổng quát

Hình 2.26: Use Case tổng quát

b. Use Case quản lí khách sạn

Hình 2.28: Use case quản lí Khách sạn

c. Use Case quản lí phòng

Hình 2.27: Use Case quản lí phòng

26
2.5.3 Sơ đồ hoạt động ( Activity Diagram )
a. Activity cập nhật phòng.

Hình 2.28: Cập nhật phòng

b. Activity đặt phòng.

Hình 2.29: Activity đặt phòng

27
3. Kết quả thực nghiệm
3.1 Giao diện đăng kí, đăng nhập

28
3.2 Giao diện trang chủ

29
3.3 Giao diện quản lí phòng

3.4 Giao diện tìm kiếm khách sạn.

30
3.5 Chi tiết khách sạn.

3.6 Trang điểm đến nổi bật

31
 3.7 Trang đặt phòng.

4. Kết luận
4.1 Ưu điểm
Tin học hóa được việc đặt phòng qua mạng, giúp cho người dùng tiện hơn, nhanh
chóng, và dễ dàng trong việc lựa chọn và đặt những phòng theo ý thích của mình.
4.2 Nhược điểm
Còn một số tính năng chưa thể thực hiện được. Tính bảo mật chưa cao cũng như
chưa đảm bảo được tính an toàn của hệ thống. Một số chức năng còn hơi sơ sài chưa
hoàn chỉnh.
4.3 Các tính năng đã phát triển được
 Đăng kí, đăng nhập
 Quản lí phòng
 Quản lí khách sạn
 Phân quyền
4.4. Các tính năng chưa thực hiện được
 Thanh toán bằng ví điện tử.
 Giảm số phòng khi đã đặt.

32
 4.5 Hướng phát triển phần mềm
Chúng em sẽ cố gắng thực hiện các chức năng còn lại, cũng như đưa ra được một
số tính năng đặc biệt khác trong tương lai. Và có thể đưa lên trang web để sử dụng.

Tài liệu tham khảo

1. https://muongthanh.com
2. https://vietnix.vn/spring-boot-la-gi
3. https://vietnix.vn/phpmyadmin-la-gi/
4. https://viblo.asia/p/reactjs-uu-diem-va-nhuoc-diem-V3m5WzexlO7
5. https://techmaster.vn/posts/36698/loi-ich-va-han-che-cua-viec-su-dung-
spring-boot
6. https://www.javaguides.net/2021/10/login-and-registration-rest-api-using-
spring-boot-spring-security-hibernate-mysql-database.html
7. https://www.youtube.com/watch?v=4w2ZYxiIvkc&list=RDCMUCA1UW_
_WEiBd1bmzyKlBUyw&index=3
8. https://www.youtube.com/watch?v=m5eIuTGdwjU&list=WL&index=1&t
=817s&fbclid=IwAR2YhFx-Kl-
mWAFP3BJR3SvfswiW1E5Di5BJekLur5eJd7NcZ21700grYAQ
9. https://www.youtube.com/watch?v=9Zv-
hbxlRTc&list=WL&index=5&t=2786s&fbclid=IwAR3bB1FUE2KO-
pq9LzVJROo0F7MlTNwBHdw_UOo6e3m23HWO9N9Ct1E4B4Y
10. Trang W3School.
11. Trang F8.

33