Tìm hiểu về reactjs và spring boot framework

ĐẠI HỌC QUỐC GIA THÀNH PHỐ 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 về ReactJS và Spring Boot
Framework

Giảng viên hướng dẫn:
NGUYỄN CÔNG HOAN

Sinh viên thực hiện:
TRIỆU TUẤN TÚ 20522103
Thành phố Hồ Chí Minh, ngày tháng 7 năm 2023


Đồ án 1

Triệu Tuấn Tú 2052103

NHẬN XÉT CỦA GIẢNG VIÊN
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………

……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
TRANG 2


Đồ án 1

Triệu Tuấn Tú 2052103

MỤC LỤC
Giới thiệu tổng quan...........................................................................................................7

I.
1.

Thành viên nhóm:...........................................................................................................7

2.

Tổng quan đề tài:.............................................................................................................7

3.

Cơng cụ sử dụng:............................................................................................................7

II. Xây dựng ứng dụng............................................................................................................7
1.

2.

Tổng quan đề tài:.............................................................................................................7
1.1

Lý do chọn đề tài:....................................................................................................8

1.2

Đối tượng hướng đến:..............................................................................................8

1.3

Kết quả mong đợi.....................................................................................................9

Phân tích thiết kế hệ thống..............................................................................................9
2.1

3.

4.

5.

Xác định các yêu cầu...............................................................................................9

Thiết kế dữ liệu.............................................................................................................34
3.1

Danh sách các collection dữ liệu:..........................................................................34

3.2

Mô tả từng collection dữ liệu.................................................................................34

Thiết kế hệ thống...........................................................................................................36
4.1

Kiến trúc hệ thống:................................................................................................36

4.2

Chi tiết các thành phần trong hệ thống..................................................................37

Thiết kế giao diện..........................................................................................................38
5.1

Trang Home...........................................................................................................38

5.2

Trang Blog.............................................................................................................39

5.3

Giao diện xem chi tiết bài viết...............................................................................40

5.4

Trang Introduction.................................................................................................41

5.5

Trang Support........................................................................................................42

5.6

Trang Destination..................................................................................................43

5.7

Giao diện chi tiết tour............................................................................................44

5.8

Trang booking........................................................................................................45

5.9

Trang search...........................................................................................................46

5.10

Thiết kế trang Admin Dashboard...........................................................................47

5.11

Thiết kế trang quản lý đơn đặt tour........................................................................47

6.

Cài đặt và kiểm thử.......................................................................................................47

7.

Source code...................................................................................................................48

III.
1.

Tìm hiểu về ReactJS......................................................................................................48
Giới thiệu.......................................................................................................................48
TRANG 3

Đồ án 1

2.

IV.

Triệu Tuấn Tú 2052103

Các thành phần chính trong ReactJS.............................................................................49
2.1

Components...........................................................................................................49

2.2

Virtual DOM..........................................................................................................50

2.3

JSX.........................................................................................................................50

2.4

State.......................................................................................................................51

2.5

Props......................................................................................................................51

2.6

Lifecycle................................................................................................................52

2.7

React route dom.....................................................................................................52

2.8

Server-side Rendering(SSR)..................................................................................53

2.9

Client-side Rendering(CSR)..................................................................................53

Spring boot....................................................................................................................53

1.

Giới thiệu.......................................................................................................................53

2.

Một số component.........................................................................................................54
2.1

Spring Boot starter.................................................................................................54

2.2

Spring Boot mybatis-plus......................................................................................55

2.3

Spring Boot spring cache.......................................................................................56

2.4

Spring Boot rabbitmq.............................................................................................56

2.5

Spring Boot elasticsearch.......................................................................................57

2.6

Spring Boot docker................................................................................................58

2.7

Spring Boot elk......................................................................................................59

2.8

Spring Boot Admin 2.0..........................................................................................60

2.9

Spring Boot apollo.................................................................................................61

2.10

Spring Boot Security, OAuth2 + API, JWT + API, OAuth2 + JWT.....................61

2.11

Spring Boot Actuator Prometheus.........................................................................62

2.12

Spring Boot Seata..................................................................................................63

2.13

Spring Boot JSR303..............................................................................................63

2.14

Spring Boot với Eureka.........................................................................................64

2.15

Spring Boot với rest + ribbon................................................................................64

2.16

Spring Boot với Feign............................................................................................64

2.17

Spring Boot với Hystrix Turbine and Dashboard..................................................65

2.18

Spring Boot với Gateway.......................................................................................65

V. Tài liệu tham khảo............................................................................................................66

TRANG 4


Đồ án 1

Triệu Tuấn Tú 2052103

Danh mục hình ảnh
Hình 1: Sơ đồ use case.........................................................................................................................10
Hình 2: Chi tiết use case Xem bài viết..................................................................................................12
Hình 3 : Chi tiết use case Xem địa điểm...............................................................................................13
Hình 4: : Chi tiết use case Xem tour...................................................................................................15
Hình 5 : Chi tiết use case Quản lý bài viết...........................................................................................19
Hình 6 : Chi tiết use case Quản lý user................................................................................................21
Hình 7 : Chi tiết use case Quản lý tour.................................................................................................24
Hình 8 : Chi tiết use case Quản lý địa điểm.........................................................................................26
Hình 9 : Chi tiết use case Quản lý voucher...........................................................................................29
Hình 10 : Chi tiết use case Quản lý review...........................................................................................31
Hình 11 : Chi tiết use case Quản lý xác nhận đơn đặt tour..................................................................33
Hình 12: Giao diện trang home............................................................................................................38

Hình 13: Giao diện trang Blog..............................................................................................................39
Hình 14: Giao diện xem chi tiết bài viết...............................................................................................40
Hình 15: Giao diện trang Introduction.................................................................................................41
Hình 16: Giao diện trang Support........................................................................................................42
Hình 17: Giao diện trang Destination..................................................................................................43
Hình 18: Giao diện chi tiết tour...........................................................................................................44
Hình 19: Giao diện đặt tour.................................................................................................................45
Hình 20: Giao diện trang Tìm kiếm đơn đặt tour.................................................................................46
Hình 21: Bản thiết kế trang Admin Dashboard....................................................................................47
Hình 22: Bản thiết kế trang Quản lý đơn đặt tour...............................................................................47
Hình 23: Virtual Dom..........................................................................................................................50
Hình 24: Ví dụ khi sử dụng JSX..........................................................................................................50
Hình 25: Ví dụ khi khơng sử dụng JSX...............................................................................................51
Hình 26: Ví dụ khai báo và thay đổi state............................................................................................51
Hình 27: Ví dụ truyền props từ component cha...................................................................................51
Hình 28: Ví dụ về nhận props từ component cha.................................................................................52
Hình 29: Ví dụ về react route dom.......................................................................................................53
Hình 30: Ví dụ sử dụng springboot starter...........................................................................................54
Hình 31: Ví dụ sử dụng interface của mybatis plus.............................................................................55
Hình 32: Ví dụ code sử dụng mybatis plus..........................................................................................56
Hình 33: Câu lênh SQL tương ứng khi sử dung mybatis plus..............................................................56

Danh mục bảng
Bảng 1: Thành viên nhóm......................................................................................................................7
Bảng 2: Danh sách tác nhân.................................................................................................................10
Bảng 3: Đặc tả use cáe đăng nhập.......................................................................................................11
Bảng 4: Đặc tả use case đăng ký..........................................................................................................12
Bảng 5: Đặc tả use case Xem bài viết...................................................................................................12
TRANG 5

Đồ án 1

Triệu Tuấn Tú 2052103

Bảng 6:Đặc tả use case Xem bài viết theo tên.....................................................................................13
Bảng 7: Đặc tả use case Xem bài viết theo tag.....................................................................................13
Bảng 8: Đặc tả use case Xem danh sách địa điẻm...............................................................................14
Bảng 9: Đặc tả use case Xem chi tiết địa điểm.....................................................................................14
Bảng 10 : : Đặc tả use case Xem tour sắp khởi hành............................................................................15
Bảng 11 : : Đặc tả use case Xem danh sách tour của địa điểm............................................................16
Bảng 12: Đặc tả use case Xem chi tiết tour..........................................................................................16
Bảng 13: Đặc tả use case Đặt tour.......................................................................................................17
Bảng 14: Đặc tả use case Tra cứu đơn đặt tour...................................................................................17
Bảng 15: Đặc tả use case Đánh giá......................................................................................................18
Bảng 16: Đặc tả use case Xem thống kê báo cáo.................................................................................18
Bảng 17: Đặc tả use case Hiển thị danh sách bài viết..........................................................................19
Bảng 18: Đặc tả use case Thêm bài viết...............................................................................................20
Bảng 19: Đặc tả use case Sửa bài viết..................................................................................................20
Bảng 20: Đặc tả use case Xóa bài viết..................................................................................................21
Bảng 21: Đặc tả use case Hiênr thị danh sách user..............................................................................22
Bảng 22: Đặc tả use case Thêm user....................................................................................................22
Bảng 23: Đặc tả use case Sửa user.......................................................................................................23
Bảng 24: Đặc tả use case Xóa user.......................................................................................................23
Bảng 25: Đặc tả use case Hiển thị danh sách tour...............................................................................24
Bảng 26: Đặc tả use case Thêm tour....................................................................................................25
Bảng 27: Đặc tả use case Sửa tour.......................................................................................................25
Bảng 28: Đặc tả use case Xóa tour.......................................................................................................26
Bảng 29: Đặc tả use case Hiển hị danh sach địa điểm.........................................................................27
Bảng 30: Đặc tả use case Thêm địa điểm.............................................................................................27

Bảng 31: Đặc tả use case Sửa địa điểm................................................................................................28
Bảng 32: Đặc tả use case Xóa địa điểm................................................................................................28
Bảng 33: Đặc tả use case Hiển thị danh sách voucher.........................................................................29
Bảng 34: Đặc tả use case Thêm voucher..............................................................................................30
Bảng 35: Đặc tả use case Sửa voucher.................................................................................................30
Bảng 36: Đặc tả use case Xóa coucher.................................................................................................31
Bảng 37: Đặc tả use case Hiển thị danh sách review...........................................................................32
Bảng 38: Đặc tả use case Xóa review...................................................................................................32
Bảng 39: Hiển thị danh sách đơn đặt tour...........................................................................................33
Bảng 40: Đặc tả use case Sửa đơn đặt tour.........................................................................................34
Bảng 41: Danh sách collection dữ liệu.................................................................................................34
Bảng 42: Mô tả collection blog............................................................................................................34
Bảng 43: Mô tả collection booking......................................................................................................35
Bảng 44: Mô tả collection destination.................................................................................................35
Bảng 45: Mô tả collection review........................................................................................................35
Bảng 46: Mô tả collection review........................................................................................................35
Bảng 47: Mô tả collection tour............................................................................................................36
Bảng 48: Mô tả collection user............................................................................................................36
Bảng 49: Mô tả collection Voucher......................................................................................................36
Bảng 50: Kết quả cài đặt......................................................................................................................48

TRANG 6


Đồ án 1

I.

Triệu Tuấn Tú 2052103

Giới thiệu tổng quan
1. Thành viên nhóm:
MSSV
Họ tên
20522103
Triệu Tuấn Tú

Email

m

Số điện thoại
0393666925

Bảng 1: Thành viên nhóm

2. Tổng quan đề tài:
Đồ án này tập trung vào việc xây dựng một website sử dụng hai cơng nghệ
chính là Spring Boot và ReactJS.
- Spring Boot là một framework phát triển ứng dụng Java, cung cấp cho
chúng ta các tính năng mạnh mẽ để xây dựng các ứng dụng web và dịch vụ
web hiệu quả.
- ReactJS là một thư viện JavaScript phát triển bởi Facebook, được sử dụng
để xây dựng giao diện người dùng đáng tin cậy và tương tác trên các ứng
dụng web.
Mục tiêu của đồ án này là tạo ra một website cơ bản. Giúp hiểu rõ, sử dụng
được các cơng nghệ tìm hiểu. Để đạt được mục tiêu này, chúng ta sẽ sử dụng
Spring Boot làm backend để xây dựng các API và xử lý logic nghiệp vụ. Sử
dụng ReactJS làm frontend để xây dựng giao diện người dùng tương tác và gửi
các yêu cầu tới backend. Chúng ta sẽ sử dụng RESTful API để truyền thông tin

giữa hai phần của hệ thống. Các công nghệ và công cụ khác như MongoDB ,
CSS, Bootstrap và Git cũng sẽ được sử dụng trong quá trình phát triển đồ án.
Đồ án này hướng đến việc rèn kỹ năng lập trình và phát triển ứng dụng web,
cũng như làm quen với hai công nghệ phổ biến hiện nay là Spring Boot và
ReactJS. Ngồi ra, nó cũng nhằm cung cấp cho chúng ta một cái nhìn tổng
quan về quy trình phát triển ứng dụng web từ việc thiết kế cơ sở dữ liệu, triển
khai backend, xây dựng giao diện người dùng và triển khai website.
3. Công cụ sử dụng:
Visual Studio Code: IDE chính để xây dựng ứng dụng
MongoDB Compass: Kiểm tra, quản lý cơ sở dữ liệu
Postman: Hỗ trợ test các API được tạo bởi Server

II.

Xây dựng ứng dụng
1. Tổng quan đề tài:
- Tên website : DREAM HOLIDAY
- Chức năng chính : Giúp cung cấp nơi cho khách hàng xem, đặt tour du lịch
TRANG 7


Đồ án 1

-

Triệu Tuấn Tú 2052103

Nền tảng phát triển: ReactJS, SpringBoot, MongoDB
Mơ hình Client Server
Kiến trúc 3 lớp

1.1 Lý do chọn đề tài:

Trong đợt đại dịch COVID-19, xã hội đã phải trải qua giai đoạn cách ly
và điều này đã tạo ra một sự bùng nổ trong ngành du lịch ngay sau khi dịch
bệnh đi qua. Với sự phát triển mạnh mẽ này, các doanh nghiệp trong lĩnh vực
du lịch đang cần phát triển một website hỗ trợ đặt tour du lịch trực tuyến, và
điều này trở nên vô cùng cần thiết để tạo ra cơ hội tiếp cận khách hàng dễ dàng
và tối ưu hố hoạt động thơng qua cơng nghệ. Một website hỗ trợ đặt tour du
lịch có thể đóng góp quan trọng cho cả khách hàng và doanh nghiệp kinh
doanh trong các cách sau:
-

Đối với khách hàng: Website cung cấp một nền tảng cho phép khách hàng
tiếp cận thông tin về các tour du lịch một cách nhanh chóng, chính xác và
trực quan nhất, giảm thiểu thời gian và công sức phải đến trực tiếp các đại
lý như trước đây. Khách hàng có thể dễ dàng tìm hiểu về các tour du lịch,
xem các lịch trình, các điểm đến, giá cả và những thông tin cần thiết khác.
Họ có thể so sánh và lựa chọn tour phù hợp với mong muốn và ngân sách
của mình một cách thuận tiện từ bất kỳ đâu chỉ với một số thao tác trên
website.

-

Đối với doanh nghiệp: Website hỗ trợ đặt tour du lịch giúp doanh nghiệp tối
ưu hóa q trình quản lý các tour hiện có. Thơng qua website, doanh nghiệp
có thể dễ dàng cập nhật thơng tin về tour, thay đổi lịch trình, giá cả và các
chi tiết khác một cách linh hoạt. Họ cũng có thể thu thập thơng tin về sở
thích và xu hướng của khách hàng dễ dàng hơn thông qua hệ thống đặt tour
trực tuyến. Dựa trên những dữ liệu này, doanh nghiệp có thể phân tích và

đưa ra các chiến lược kinh doanh hợp lý hơn, nhằm tăng cường sự hấp dẫn
của tour và đáp ứng nhu cầu của khách hàng một cách tốt nhất.

Tóm lại, việc phát triển một website hỗ trợ đặt tour du lịch trực tuyến mang lại
nhiều lợi ích cho cả khách hàng và doanh nghiệp. Đối với khách hàng, website
cung cấp tiện ích tiếp cận thơng tin nhanh chóng và tiện lợi, trong khi đối với
doanh nghiệp, nó tạo ra cơ hội tối ưu hóa hoạt động kinh doanh và tăng cường
sự tương tác với khách hàng.
1.2 Đối tượng hướng đến:
Đối tượng website nhắm tới là tất cả những người có nhu cầu đặt tour, muốn đi
du lịch
-

Những người trẻ muốn tự đặt tour đi du lịch
Những người biết sử dụng internet giúp người khác đặt tour
Những người muốn tiết kiệm thời gian không cần đi đến các trung tâm, đại
lý
TRANG 8


Đồ án 1

Triệu Tuấn Tú 2052103

1.3 Kết quả mong đợi
- Học được cách phát triển một ứng dụng web
- Triển khai, hoàn thành được sản phẩm
- Áp dụng được các kiến thức đã học vào phát triển đồ án
2. Phân tích thiết kế hệ thống
2.1 Xác định các yêu cầu

Các yêu cầu ứng dụng cần có như:
-

-

Cho customer
 Đăng nhập, đăng kí
 Đổi mật khẩu
 Thay đổi thơng tin cá nhân
 Xem, tìm kiếm các tour, địa điểm
 Đặt tour
 Đánh giá các tour
 Xem bài viết
Cho Admin
 Quản lý các tour: thêm xóa sửa thơng tin
 Quản lý các địa điểm: thêm xóa sửa địa điểm
 Quản lý các bài viết: thêm xóa sửa bài viết
 Xác nhận các đơn đặt tour
 Xem thống kê báo cáo

TRANG 9


Đồ án 1

Triệu Tuấn Tú 2052103

Hình 1: Sơ đồ use case

Actor

Customer
Admin

Người sử dụng chính của website. Có thể thực hiện các chức
năng để đặt tour
Người quản lý website. Kiểm soát, chỉnh sửa các đối tượng hiện
có trong website
Bảng 2: Danh sách tác nhân

TRANG 10


Đồ án 1

Triệu Tuấn Tú 2052103

2.2.1 Đặc tả use case
Use case đăng nhập
Use case: Đăng nhập
Tác nhân: Customer, Admin
Mô tả ngắn gọn: Người dùng đăng nhập vào hệ thống
Điều kiện tiên quyết:
2. Chưa có người dùng đăng nhập
Sự kiện kích hoạt:
3. Chọn “Đăng nhập” tại trang bất kỳ
Luồng sự kiện chính:
1. Người dùng chọn “Đăng nhập”
2. Hệ thống hiển thị form đăng nhập
3. Người dùng nhập username, password và bấm đăng nhập
4. Hệ thống gửi username, password cho Server kiểm tra

5. Người dùng đăng nhập thành công vào hệ thống
Luồng sự kiện phụ:
4. Sai tài khoản hoặc mật khẩu: Thông báo sai tài khoản hoặc mật
khẩu
5. Lỗi từ phía Server: Thơng báo có lỗi từ phía Server
Bảng 3: Đặc tả use cáe đăng nhập

Use case đăng ký
Use case: Đăng nhập
Tác nhân: Customer
Mô tả ngắn gọn: Người dùng đăng ký tài khoản vào hệ thống
Điều kiện tiên quyết:
6. Chưa có người dùng đăng nhập
Sự kiện kích hoạt:
7. Chọn “Đăng ký” tại form đăng nhập
Luồng sự kiện chính:
1. Người dùng chọn “Đăng ký”
2. Hệ thống hiển thị form đăng ký
3. Người dùng nhập username, password và bấm đăng ký
4. Hệ thống gửi username, password cho Server kiểm tra
5. Thêm user vào csdl
6. Người dùng đăng ký thành công và đăng nhập thành công vào hệ
thống
Luồng sự kiện phụ:
8. Đã tồn tại user có email hoặc username đang đăng ký: Thơng báo
trùng email hoặc username
9. Lỗi từ phía Server: Thơng báo có lỗi từ phía Server
Bảng 4: Đặc tả use case đăng ký

TRANG 11

Đồ án 1

Triệu Tuấn Tú 2052103

Use case Xem bài viết

Hình 2: Chi tiết use case Xem bài viết

Use case: Xem bài viết
Tác nhân: Customer, Admin
Mô tả ngắn gọn: Xem các bài viết do chủ trang web đăng tải
Điều kiện tiên quyết:
Sự kiện kích hoạt:
10. Chọn tab “Blog” tại trên thanh navbar
Luồng sự kiện chính:
1. Người dùng chọn tab “Blog”
2. Hệ thống gửi yêu cầu lấy bài viết cho Server
3. Server trả về dữ liệu. Hệ thống hiện thị các bài viết lên trang web
Luồng sự kiện phụ:
11. Lỗi từ phía Server: Thơng báo có lỗi từ phía Server
Bảng 5: Đặc tả use case Xem bài viết

User case Xem bài viết theo tên
Use case: Xem bài viết theo tên
Tác nhân: Customer, Admin
Mơ tả ngắn gọn: Tìm kiếm, xem các bài viết theo tên
Điều kiện tiên quyết:
Sự kiện kích hoạt:

12. Chọn tab “Blog” tại trên thanh navbar
13. Nhập tên bài viết trên thanh “Search”
Luồng sự kiện chính:
1. Người dùng nhập tên bài viết và nhấn search
2. Hệ thống gửi yêu cầu tìm bài viết theo tên cho Server
3. Server trả về dữ liệu theo yêu cầu. Hệ thống hiện thị các bài viết
lên trang web
TRANG 12


Đồ án 1

Triệu Tuấn Tú 2052103

Luồng sự kiện phụ:
14. Lỗi từ phía Server: Thơng báo có lỗi từ phía Server
Bảng 6:Đặc tả use case Xem bài viết theo tên

User case Xem bài viết theo tag
Use case: Xem bài viết theo tên
Tác nhân: Customer, Admin
Mô tả ngắn gọn: Lọc xem các bài viết theo “tag”
Điều kiện tiên quyết:
Sự kiện kích hoạt:
15. Chọn tab “Blog” tại trên thanh navbar
16. Chọn vào “tag” của một bài viết bất kỳ
Luồng sự kiện chính:
1. Người dùng chọn vào “tag” của một bài viết bất kỳ
2. Hệ thống gửi yêu cầu tìm bài viết theo “tag” cho Server
3. Server trả về dữ liệu theo yêu cầu. Hệ thống hiện thị các bài viết

lên trang web
Luồng sự kiện phụ:
17. Lỗi từ phía Server: Thơng báo có lỗi từ phía Server
Bảng 7: Đặc tả use case Xem bài viết theo tag

Use case Xem địa điểm

Hình 3 : Chi tiết use case Xem địa điểm

Use case Xem danh sách địa điểm
Use case: Xem danh sách địa điểm
Tác nhân: Customer, Admin
Mô tả ngắn gọn: Hiển thị danh sách các địa điểm trong trang web
Điều kiện tiên quyết:
Sự kiện kích hoạt:
TRANG 13


Đồ án 1

Triệu Tuấn Tú 2052103

1. Người dùng truy cập vào trang chủ
Luồng sự kiện chính:
1. Người dùng truy cập vào trang chủ
2. Hệ thống gửi yêu cầu lấy dữ liệu địa điểm cho Server
3. Server trả dữ liệu. Hệ thống hiển thị ảnh, tên địa điể, vị trí lên
trang web
Luồng sự kiện phụ:
2. Lỗi từ phía Server: Thơng báo có lỗi từ phía Server

Bảng 8: Đặc tả use case Xem danh sách địa điẻm

Use case Xem chi tiết địa điểm
Use case: Xem chi tiết địa điểm
Tác nhân: Customer, Admin
Mô tả ngắn gọn: Hiển thị chi tiết của địa điểm được chọn
Điều kiện tiên quyết:
Sự kiện kích hoạt:
3. Người dùng chọn vào một địa điểm bất kỳ trong danh sách
Luồng sự kiện chính:
1. Người dùng chọn vào một địa điểm bất kỳ trong danh sách
2. Đưa người dùng đến trang xem chi tiết địa điểm
3. Hệ thống gửi yêu cầu lấy dữ liệu địa điểm cho Server
4. Server trả dữ liệu. Hệ thống hiển thị ảnh, tên địa điểm các tour có
trong địa điểm, các đánh giá về địa điểm lên trang web
Luồng sự kiện phụ:
4. Lỗi từ phía Server: Thơng báo có lỗi từ phía Server
Bảng 9: Đặc tả use case Xem chi tiết địa điểm

TRANG 14


Đồ án 1

Triệu Tuấn Tú 2052103

Use case Xem tour

Hình 4: : Chi tiết use case Xem tour

Use case Xem danh sách tour sắp khởi hành
Use case: Xem danh sách tour sắp khởi hành
Tác nhân: Customer, Admin
Mô tả ngắn gọn: Hiển thị một danh sách các tour sắp khởi hành
Điều kiện tiên quyết:
Sự kiện kích hoạt:
5. Người dùng truy cập vào trang chủ
Luồng sự kiện chính:
1. Người dùng truy cập vào trang chủ
2. Hệ thống yêu cầu lấy dữ liệu các tour
3. Server trả dữ liệu. Hệ thống hiển thị danh sách tên tour, ngày giờ
khởi hành, trở về, giá tour lên trang web
Luồng sự kiện phụ:
6. Lỗi từ phía Server: Thơng báo có lỗi từ phía Server
Bảng 10 : : Đặc tả use case Xem tour sắp khởi hành

Use case Xem danh sách tour của địa điểm cụ thể
Use case: Xem danh sách tour của địa điểm cụ thể
Tác nhân: Customer, Admin
Mô tả ngắn gọn: Hiển thị một danh sách các tour sắp khởi hành
Điều kiện tiên quyết:
Sự kiện kích hoạt:
TRANG 15


Đồ án 1

Triệu Tuấn Tú 2052103

7. Người dùng chọn xem thơng tin một địa điểm cụ thể

Luồng sự kiện chính:
1. Người dùng chọn vào một địa điểm bất kỳ trong danh sách
2. Đưa người dùng đến trang xem chi tiết địa điểm
3. Hệ thống gửi yêu cầu lấy dữ liệu các tour theo địa điểm đó cho
Server
4. Server trả dữ liệu. Hệ thống hiển thị danh sách tên tour, ngày giờ
khởi hành, trở về, giá tour theo địa điểm đó
Luồng sự kiện phụ:
8. Lỗi từ phía Server: Thơng báo có lỗi từ phía Server
Bảng 11 : : Đặc tả use case Xem danh sách tour của địa điểm

Use case Xem chi tiết tour
Use case: Xem chi tiết của một tour cụ thể
Tác nhân: Customer, Admin
Mô tả ngắn gọn: Hiển thị chi tiết thông tin tour mà người dùng chọn
Điều kiện tiên quyết:
Sự kiện kích hoạt:
9. Người dùng chọn xem thơng tin một tour cụ thể. Có thể là tour
trong danh sách tour sắp khởi hành, có thể là tour trong một địa
điểm
Luồng sự kiện chính:
1. Người dùng chọn vào một tour
2. Hệ thống lấy dữ liệu của tour đó. Tạo popup hiển thị thông tin chi
tiết của tour
Luồng sự kiện phụ:
Bảng 12: Đặc tả use case Xem chi tiết tour

Use case Đặt tour
Use case: Đặt tour
Tác nhân: Customer, Admin

Mô tả ngắn gọn: Cho phép người dùng đặt tour
Điều kiện tiên quyết:
Sự kiện kích hoạt:
10. Người dùng chọn vào “Đặt tour ngay” trong khi xem chi tiết tour
Luồng sự kiện chính:
1. Đưa người dùng đến trang đặt tour
2. Hệ thống gửi yêu cầu lấy dữ liệu các tour theo địa điểm đó cho
Server
TRANG 16


Đồ án 1

Triệu Tuấn Tú 2052103

3. Server trả dữ liệu. Hệ thống hiển thị danh sách tên tour, ngày giờ
khởi hành, trở về, giá tour theo địa điểm đó
4. Hiển thị form cho người dùng xác nhận Họ tên, Email, SDT, nhập
voucher nếu có
5. Người dùng chọn “Đặt tour” sau khi nhập đủ thông tin
6. Hệ thống gửi dữ liệu cho Server sử lý.
7. Server trả về kết quả. Hệ thống hiển thị đặt tour thành công
Luồng sự kiện phụ:
11. Hiển thị lỗi đặt tour không thành công
Bảng 13: Đặc tả use case Đặt tour

Use case Tra cứu tour đã đặt
Use case: Tra cứu tour đã đặt
Tác nhân: Customer, Admin
Mô tả ngắn gọn: Người dùng tra cứu các tour đã đặt

Điều kiện tiên quyết:
12. Người dùng đã đăng nhập
Sự kiện kích hoạt:
13. Chọn “Các tour đã đặt” tại “trang cá nhân”
Luồng sự kiện chính:
1. Người dùng chọn “Các tour đã đặt”
2. Hệ thống gửi yêu cầu lấy các tour đã đặt theo userId, email, SDT
cho Server
3. Server trả về dữ liệu theo yêu cầu. Hệ thống hiển thị thông tin các
tour đã đặt như: tên tour, ngày giờ khởi hành, kết thúc, giá tour, mã
giảm giá
Luồng sự kiện phụ:
14. Lỗi từ phía Server: Thơng báo có lỗi từ phía Server
Bảng 14: Đặc tả use case Tra cứu đơn đặt tour

Use case Đánh giá
Use case: Đánh giá
Tác nhân: Customer, Admin
Mô tả ngắn gọn: Người dùng để lại bình luận, đánh giá với các địa điểm đã
đi
Điều kiện tiên quyết:
15. Người dùng đã đăng nhập
Sự kiện kích hoạt:
16. Người dùng chọn đánh giá tại một địa điểm đã từng đi
Luồng sự kiện chính:
1. Người dùng nhập nội dung đánh giá, số sao đánh giá và nhấn
“Gửi”
TRANG 17

Đồ án 1

Triệu Tuấn Tú 2052103

2. Hệ thống gửi yêu cầu tạo review kèm dữ liệu cho Server
3. Server trả về dữ liệu theo yêu cầu. Hệ thống hiển thị bình luận mới
tại địa điểm đó
Luồng sự kiện phụ:
17. Lỗi từ phía Server: Thơng báo có lỗi từ phía Server
Bảng 15: Đặc tả use case Đánh giá

Use case Xem thống kê báo cáo
Use case: Xem thống kê báo cáo
Tác nhân: Admin
Mô tả ngắn gọn: Xem thống kê tổng quát của trang web
Điều kiện tiên quyết:
18. Người dùng đã đăng nhập bằng tài khoản có quyền là Admin
Sự kiện kích hoạt:
19. Người dùng truy cập trang Admin dashboard
Luồng sự kiện chính:
1. Người dùng truy cập trang Admin dashboard
2. Hệ thống gửi yêu cầu lấy các dữ liệu từ Server.
3. Hệ thống xử lý, hiển thị các thông số, bảng, biểu đồ thể hiện doanh
thu, số đơn đặt tour thành công, số tour đang sử lý v.v
Luồng sự kiện phụ:
20. Lỗi từ phía Server: Thơng báo có lỗi từ phía Server
Bảng 16: Đặc tả use case Xem thống kê báo cáo

TRANG 18

Đồ án 1

Triệu Tuấn Tú 2052103

Use case Quản lý bài viết

Hình 5 : Chi tiết use case Quản lý bài viết

Use case Hiển thị danh sách bài viết
Use case: Hiển thị danh sách bài viết
Tác nhân: Admin
Mô tả ngắn gọn: Hiển thị bảng chứa danh sách tất cả các bài viết
Điều kiện tiên quyết:
21. Người dùng đã đăng nhập bằng tài khoản có quyền là Admin
Sự kiện kích hoạt:
22. Chọn mục “Blog” tại trang bất kỳ trong Admin Dashboard
Luồng sự kiện chính:
1. Người dùng chọn “Blog”
2. Hệ thống gửi yêu cầu lấy dữ liệu bài viết từ Server
3. Server trả dữ liệu theo yêu cầu. Hệ thống hiển thị dữ liệu thành
dạng bảng
4. Hệ thống thêm các action cho mỗi dịng dữ liệu
Luồng sự kiện phụ:
23. Lỗi từ phía Server: Thơng báo có lỗi từ phía Server
Bảng 17: Đặc tả use case Hiển thị danh sách bài viết

Use case Thêm bài viết
Use case: Thêm bài viết
TRANG 19

Đồ án 1

Triệu Tuấn Tú 2052103

Tác nhân: Admin
Mô tả ngắn gọn: Thêm bài viết mới vào trang web
Điều kiện tiên quyết:
24. Người dùng đã đăng nhập bằng tài khoản có quyền là Admin
Sự kiện kích hoạt:
25. Chọn mục “Blog” tại trang bất kỳ trong Admin Dashboard
26. Chọn “Thêm” trang quản lý bài viết
Luồng sự kiện chính:
1. Người dùng chọn “Thêm”
2. Hệ thống hiển thị trang thêm bài viết
3. Người dùng nhập thơng tin bài viết và nhấn “Hồn tất”
4. Hệ thống gửi yêu cầu thêm bài viết cho server. Thông báo thêm
thành công và quay về trang quản lý bài viết
Luồng sự kiện phụ:
27. Lỗi từ phía Server: Thơng báo có lỗi từ phía Server
Bảng 18: Đặc tả use case Thêm bài viết

Use case Sửa bài viết
Use case: Sửa bài viết
Tác nhân: Admin
Mô tả ngắn gọn: Sửa bài viết đã có tại trang web
Điều kiện tiên quyết:
28. Người dùng đã đăng nhập bằng tài khoản có quyền là Admin
Sự kiện kích hoạt:

29. Chọn mục “Blog” tại trang bất kỳ trong Admin Dashboard
30. Chọn button/icon “Sửa” tại dòng của bài viết muốn sửa
Luồng sự kiện chính:
1. Người dùng chọn “Sửa”
2. Hệ thống hiển thị trang sửa bài viết với các thông tin load sẵn từ
bài viết đã chọn
3. Người dùng sửathông tin bài viết và nhấn “Hoàn tất”
4. Hệ thống gửi yêu cầu sửa bài viết cho server. Thông báo sửa
thành công và quay về trang quản lý bài viết
Luồng sự kiện phụ:
31. Lỗi từ phía Server: Thơng báo có lỗi từ phía Server
Bảng 19: Đặc tả use case Sửa bài viết

Use case Xóa bài viết
Use case: Xóa bài viết
Tác nhân: Admin
Mơ tả ngắn gọn: Xóa bài viết đã có tại trang web
Điều kiện tiên quyết:
32. Người dùng đã đăng nhập bằng tài khoản có quyền là Admin
Sự kiện kích hoạt:
TRANG 20