44 trang 11 lượt tải

Đồ án cơ sở - Tìm hiểu framework ReactJS và xây dựng giao diện website giới thiệu và đặt tour du lịc

21

báo cáo đồ án cơ sở

Môn: Đồ án cơ sở (Phenikaa) 6 tài liệu

Trường: Đại học Phenika 1.3 K tài liệu

Tác giả:

Profile

Thang Luong Van

6 ngày trước
Tải xuống
Báo cáo
Danh sách Quiz
Tải xuống
/44
PHENIKAA UNIVERSITY
FACULTY OF COMPUTER SCIENCE
BÁO CÁO ĐỒ ÁN CƠ SỞ
Nhóm 3
Đề tài: Tìm hiểu framework ReactJS và xây dựng giao diện website
giới thiệu và đặt tour du lịch
Họ và tên: Lương Văn Thắng – MSSV: 22010192
Email: 22010192@st.phenikaa-uni.edu.vn
Giảng viên hướng dẫn: TS Nguyễn Thị Thùy Liên
Hà Nội, 07/2025
Mục Lục
1. Giới thiệu......................................................................................................................2
1.1 Đặt vấn đề............................................................................................................................2
1.2 Các giải pháp đã có..............................................................................................................2
1.3 Giải pháp đề xuất.................................................................................................................3
2. Cơ sở lý thuyết..............................................................................................................4
3. Thiết kế và triển khai...................................................................................................6
3.2 Các yêu cầu phi chức năng...................................................................................................7
3.3 Mô hình hệ thống / Thiết kế giải pháp..................................................................................8
3.3.1 Mô hình Use-case..........................................................................................................8
3.3.2 Đặc tả UseCase:..........................................................................................................10
3.3.3 Mô hình lớp và đối tượng............................................................................................17
3.3.4 Các biểu đồ tuần tự......................................................................................................19
5.1 Kế hoạch dự án..................................................................................................................39
5.2 Đảm bảo thực hiện đúng tiến độ cá nhân...........................................................................40
5.3 Các vấn đề về đạo đức và làm việc chuyên nghiệp............................................................40
5.4 Tác động xã hội..................................................................................................................41
5.5 Kế hoạch cho kiến thức mới và chiến lược học tập............................................................41
6. Tài liệu tham khảo......................................................................................................42
1
1. Giới thiệu
1.1 Đặt vấn đề
Trong bối cảnh cuộc Cách mạng Công nghiệp 4.0 và xu hướng chuyển đổi
số đang diễn ra mạnh mẽ trên mọi lĩnh vực, ngành du lịch cũng không ngoại lệ và
đang chứng kiến những sự thay đổi sâu sắc. Hiện nay, Internet đã trở thành một
công cụ không thể thiếu, làm thay đổi hoàn toàn hành vi của du khách; họ có xu
hướng chủ động tìm kiếm thông tin, so sánh các tour và thực hiện đặt dịch vụ trực
tuyến thay vì phụ thuộc vào các phương thức truyền thống.
Các doanh nghiệp lữ hành truyền thống đang đối mặt với thách thức lớn
trong việc cạnh tranh nếu không hiện diện trên Internet. Việc thiếu một website
chuyên nghiệp không chỉ làm giảm độ uy tín của công ty trong mắt khách hàng mà
còn bỏ lỡ một lượng lớn khách hàng tiềm năng. Một trong những vấn đề lớn nhất
mà các công ty du lịch gặp phải là việc cung cấp thông tin về các tour, điểm đến
một cách trực quan và hấp dẫn, cũng như quy trình đặt tour còn thủ công, phức tạp,
gây mất thời gian và làm giảm trải nghiệm của khách hàng.
Bên cạnh đó, việc không có một nền tảng tập trung để quản lý thông tin,
tương tác và chăm sóc khách hàng khiến doanh nghiệp khó xây dựng được lòng tin
và giữ chân du khách. Do đó, việc xây dựng một website giới thiệu và đặt tour du
lịch chuyên nghiệp, hiện đại không chỉ là xu hướng mà còn là một yêu cầu cấp
thiết để tồn tại và phát triển trong thời đại số. Một trang web được thiết kế tốt sẽ là
"bộ mặt" trực tuyến của doanh nghiệp, giúp vượt qua các giới hạn địa lý để tiếp
cận thị trường toàn cầu, đồng thời cung cấp một công cụ marketing mạnh mẽ và
một kênh bán hàng tiện lợi, hoạt động 24/7.
1.2 Các giải pháp đã có
Để giải quyết bài toán giới thiệu và kinh doanh tour du lịch, hiện nay có một số
phương pháp và nền tảng đang được áp dụng. Tuy nhiên, mỗi giải pháp đều có những ưu
và nhược điểm riêng.
Về kinh doanh theo phương thức truyền thống nó có ưu điểm như này:
Tương tác trực tiếp với khách hàng qua văn phòng, điện thoại, giúp tạo dựng mối
quan hệ và tư vấn chuyên sâu.
Chi phí đầu tư ban đầu cho công nghệ thấp.
Tuy nhiên nó cũng có những nhược điểm sau:
Tiếp cận khách hàng bị giới hạn về mặt địa lý, khó mở rộng thị trường.
Quy trình thủ công, tốn nhiều thời gian và nhân lực để quản lý thông tin, tư vấn và
xử lý đặt tour.
Không hoạt động 24/7, gây bất tiện cho những khách hàng muốn tìm hiểu thông
tin ngoài giờ hành chính.
Với thời đại công nghệ hiện nay, chúng ta còn có phương pháp xây dựng website
bằng các nền tảng quản trị nội dung (CMS) như WordPress, với ưu điểm:
2
Thời gian triển khai nhanh với nhiều giao diện (theme) và tính năng (plugin) có
sẵn dành cho ngành du lịch.
Chi phí phát triển ban đầu thường thấp hơn và dễ sử dụng cho người không
chuyên về lập trình.
Dễ dàng quản lý nội dung như bài viết, thông tin tour cho người không có chuyên
môn kỹ thuật cao.
o Tuy thế nó lại cũng có nhược điểm:
Hiệu suất và tốc độ tải trang có thể bị ảnh hưởng do sử dụng nhiều plugin.
Khả năng tùy biến sâu về giao diện và luồng xử lý nghiệp vụ đặc thù bị hạn chế.
Vấn đề bảo mật có thể phát sinh nếu các plugin từ nguồn không uy tín được cài
đặt.
Với sự bùng nổ của thanh toán, đặt trực tuyến, chúng ta lại có thêm phương pháp
là dùng các nền tảng đại lý du lịch trực tuyến (OTA - Online Travel Agency), với
những ưu điểm:
Tiếp cận được một lượng khách hàng khổng lồ có sẵn trên các nền tảng như
Booking.com, Agoda, Klook.
Tận dụng được uy tín và hệ thống marketing mạnh mẽ của các nền tảng này để
tăng lượng đặt phòng.
Nhưng cái gì có lợi thì cũng có nhược điểm nhất định, dưới đây là các nhược
điểm:
Phí hoa hồng rất cao, thường từ 15-30%, làm giảm đáng kể lợi nhuận của doanh
nghiệp.
Doanh nghiệp bị phụ thuộc hoàn toàn vào nền tảng và phải cạnh tranh gay gắt với
hàng ngàn đối thủ khác.
Khó khăn trong việc xây dựng và quảng bá thương hiệu riêng.
1.3 Giải pháp đề xuất
Nhằm khắc phục các nhược điểm của những hệ thống hiện có, nhóm phát
triển đề xuất xây dựng Giao diện website giới thiệu và đặt tour du lịch sử dụng
framework ReactJS. Đây là một nền tảng hiện đại, tập trung vào việc xây dựng
giao diện người dùng nhanh, linh hoạt và mang lại trải nghiệm mượt mà, giúp
doanh nghiệp nâng cao năng lực cạnh tranh và chủ động trong hoạt động kinh
doanh.
Hệ thống sẽ được thiết kế với các tính năng chính như sau:
Giao diện người dùng hiện đại, tối ưu cho trải nghiệm (UI/UX):
o Xây dựng trên nền tảng ReactJS, tạo ra một ứng dụng trang đơn (Single
Page Application - SPA) giúp tải trang gần như tức thì và điều hướng mượt
mà, không cần tải lại toàn bộ trang.
3
o Thiết kế giao diện trực quan, hấp dẫn, tập trung vào hình ảnh và nội dung
chất lượng cao để thu hút khách hàng.
o Đảm bảo tương thích trên nhiều loại thiết bị từ máy tính, máy tính bảng đến
điện thoại di động (Responsive Design).
Hệ thống tìm kiếm, lọc và trình bày thông tin tour thông minh:
o Cung cấp bộ lọc mạnh mẽ, cho phép người dùng dễ dàng tìm kiếm tour
theo điểm đến, khoảng giá, thời gian, loại hình du lịch.
o Trang chi tiết tour được trình bày rõ ràng, đầy đủ thông tin về lịch trình,
dịch vụ bao gồm/không bao gồm, chính sách và đánh giá từ khách hàng cũ.
Quy trình đặt tour trực tuyến đơn giản và hiệu quả:
o Xây dựng một quy trình đặt tour chỉ qua vài bước đơn giản, từ việc chọn
tour, điền thông tin khách hàng đến xác nhận, giảm thiểu sự phức tạp cho
người dùng.
o Hệ thống cho phép quản lý các đơn đặt tour một cách tập trung, giúp doanh
nghiệp dễ dàng theo dõi và xử lý.
Nền tảng công nghệ mạnh mẽ và có khả năng mở rộng:
o Sử dụng ReactJS giúp việc phát triển và bảo trì giao diện trở nên dễ dàng
nhờ vào kiến trúc dựa trên thành phần (component-based).
o Kiến trúc hệ thống cho phép dễ dàng tích hợp với các API backend và các
dịch vụ của bên thứ ba (như cổng thanh toán, bản đồ) trong tương lai.
2. Cơ sở lý thuyết
2.1 Giới thiệu tổng quan về ReactJS
ReactJS: Là một thư viện JavaScript mã nguồn mở, được phát triển bởi
Facebook (nay là Meta), chuyên dùng để xây dựng giao diện người dùng (UI
- User Interface). React tập trung vào việc chia nhỏ giao diện thành các
thành phần độc lập, có thể tái sử dụng, giúp quá trình phát triển ứng dụng,
đặc biệt là các ứng dụng trang đơn (Single Page Application - SPA), trở nên
hiệu quả và dễ quản lý hơn.
2.2 Các khái niệm cốt lõi của ReactJS
2.2.1 Components (Thành phần):
Định nghĩa: Components là những khối xây dựng (building block) cốt lõi trong
React. Chúng là các đoạn mã độc lập, có thể tái sử dụng, dùng để định nghĩa và
hiển thị một phần của giao diện người dùng. Việc chia ứng dụng thành các
component giúp mã nguồn trở nên dễ quản lý, dễ bảo trì và mở rộng.
Phân loại: Có hai loại component chính là Functional Components (viết dưới dạng
hàm JavaScript) và Class Components (viết dưới dạng lớp ES6). Hiện nay,
Functional Components kết hợp với Hooks là cách tiếp cận hiện đại và được
khuyến khích sử dụng.
4
2.2.2 JSX (JavaScript XML)
Định nghĩa: JSX là một phần mở rộng cú pháp cho JavaScript, cho phép viết mã
trông giống như HTML trực tiếp bên trong các tệp JavaScript. Mặc dù không bắt
buộc, việc sử dụng JSX giúp việc mô tả cấu trúc UI trở nên trực quan, dễ đọc và
gần gũi hơn với các nhà phát triển web.
Cơ chế hoạt động: Trình biên dịch (như Babel) sẽ chuyển đổi cú pháp JSX thành
các lệnh gọi hàm React.createElement() thuần túy trước khi thực thi trên trình
duyệt.
2.2.3 Props và State
Props (Properties): Là một đối tượng dùng để truyền dữ liệu theo một chiều từ
component cha xuống component con. Props có đặc tính "chỉ đọc" (read-only),
nghĩa là component con không thể tự thay đổi props mà nó nhận được, giúp đảm
bảo luồng dữ liệu nhất quán và dễ dự đoán.
State: Là một đối tượng dùng để lưu trữ và quản lý dữ liệu nội tại của một
component. Không giống như props, state có thể thay đổi dựa trên tương tác của
người dùng hoặc các sự kiện khác. Mỗi khi state thay đổi, React sẽ tự động render
lại component đó để cập nhật giao diện.
2.2.4 Virtual DOM (DOM ảo)
Định nghĩa: Virtual DOM là một bản sao của DOM thật (Document Object
Model) được lưu trữ trong bộ nhớ dưới dạng một đối tượng JavaScript. Đây là một
khái niệm lập trình giúp React tối ưu hóa hiệu suất.
Cơ chế hoạt động: Khi state của một component thay đổi, React sẽ tạo ra một cây
Virtual DOM mới. Sau đó, nó sử dụng một thuật toán "diffing" (so sánh sự khác
biệt) để đối chiếu cây Virtual DOM mới với cây cũ. Dựa trên kết quả so sánh,
React sẽ xác định những thay đổi tối thiểu cần thiết và chỉ cập nhật những phần tử
đó trên DOM thật, thay vì phải render lại toàn bộ trang. Quá trình này giúp giảm
thiểu các thao tác tốn kém trên DOM thật, từ đó cải thiện đáng kể hiệu suất của
ứng dụng.
2.2.5 Hooks
Định nghĩa: Hooks là các hàm đặc biệt được giới thiệu từ phiên bản React 16.8,
cho phép các Functional Components "móc" vào các tính năng của React như state
và lifecycle mà không cần viết class.
Các Hooks cơ bản:
o useState: Cho phép thêm state vào Functional Components.
o useEffect: Cho phép thực hiện các "side effects" (tác dụng phụ) như gọi
API, tương tác với DOM, hoặc thiết lập các subscription.
2.3 Hệ sinh thái ReactJS
Việc xây dựng một ứng dụng hoàn chỉnh thường yêu cầu kết hợp React với
các thư viện khác.
React Router: Là thư viện định tuyến (routing) tiêu chuẩn cho các ứng dụng React.
Nó cho phép quản lý việc điều hướng giữa các trang (views) khác nhau trong một
5
ứng dụng trang đơn (SPA) mà không cần tải lại trang, giúp duy trì sự đồng bộ giữa
giao diện người dùng và URL trên trình duyệt.
Redux: Là một thư viện quản lý trạng thái (state management) toàn cục cho các
ứng dụng JavaScript. Khi ứng dụng trở nên phức tạp với nhiều component cần
chia sẻ và truy cập cùng một trạng thái, Redux cung cấp một "store" duy nhất để
chứa toàn bộ trạng thái của ứng dụng, giúp luồng dữ liệu trở nên dễ quản lý và gỡ
lỗi hơn.
3. Thiết kế và triển khai
3.1 Các yêu cầu chức năng
3.1.1 Chức năng của Quản trị viên (Admin)
Quản trị viên có quyền cao nhất trong hệ thống, tập trung vào việc quản lý
nội dung cốt lõi.
Quản lý Tour:
o Thêm Tour mới: Cho phép tạo một tour mới với đầy đủ thông tin chi tiết.
o Cập nhật thông tin Tour: Chỉnh sửa thông tin của một tour đã có.
o Xóa Tour: Xóa một tour khỏi hệ thống.
Quản lý Người dùng:
o Xem danh sách Người dùng: Hiển thị danh sách tất cả tài khoản người dùng
đã đăng ký trong hệ thống.
Quản lý Đặt tour (Booking):
o Xem tất cả Đặt tour: Xem danh sách toàn bộ các lượt đặt tour từ tất cả
người dùng.
3.1.2 Chức năng của Người dùng (User/Khách hàng)
Người dùng là khách hàng sử dụng hệ thống để tìm kiếm, đặt và đánh giá
các tour du lịch.
Xác thực và Tài khoản:
o Đăng ký: Người dùng có thể tạo tài khoản mới.
o Đăng nhập: Đăng nhập vào hệ thống bằng email và mật khẩu.
o Đăng xuất: Kết thúc phiên làm việc an toàn (thường được xử lý ở phía
client).
Quản lý hồ sơ cá nhân:
o Xem thông tin cá nhân: Xem chi tiết tài khoản của mình.
o Cập nhật thông tin cá nhân: Chỉnh sửa và cập nhật thông tin tài khoản.
6
o Xóa tài khoản: Xóa tài khoản của mình khỏi hệ thống.
Tương tác với Tour:
o Xem danh sách Tour: Xem tất cả các tour hiện có.
o Xem chi tiết Tour: Xem thông tin chi tiết của một tour cụ thể.
o Tìm kiếm Tour: Tìm kiếm tour theo địa điểm, khoảng cách và số lượng
người.
o Xem Tour nổi bật: Xem danh sách các tour đang được giới thiệu.
Đặt tour (Booking):
o Tạo Đặt tour: Thực hiện đặt một tour đã chọn.
o Xem lịch sử Đặt tour: Xem chi tiết một lượt đặt tour của chính mình.
Đánh giá (Review):
o Viết đánh giá: Gửi đánh giá và xếp hạng cho một tour đã tham gia.
3.2 Các yêu cầu phi chức năng
Các yêu cầu này đảm bảo hệ thống hoạt động hiệu quả, an toàn và đáng tin
cậy.
3.2.1 Hiệu suất (Performance Requirements)
Hệ thống phải có khả năng phục vụ một lượng lớn người dùng truy cập đồng thời
để tìm kiếm và đặt tour.
Thời gian phản hồi cho các thao tác chính (đăng nhập, tìm kiếm tour, xem chi tiết)
cần dưới 2 giây.
Thời gian xử lý đặt tour phải nhanh chóng, ngay cả trong thời gian cao điểm.
3.2.2 Khả năng mở rộng (Scalability Requirements)
Kiến trúc hệ thống (sử dụng MERN Stack) cần được thiết kế để dễ dàng mở rộng
khi lượng người dùng và dữ liệu tour tăng lên.
Cơ sở dữ liệu MongoDB phải được tối ưu để xử lý hiệu quả lượng lớn dữ liệu về
tour, người dùng và các lượt đặt chỗ.
3.2.3 Tính bảo mật (Security Requirements)
Mật khẩu người dùng phải được băm (hashing) trước khi lưu vào cơ sở dữ liệu.
Hệ thống sử dụng JSON Web Tokens (JWT) để xác thực và phân quyền người
dùng sau khi đăng nhập.
Triển khai cơ chế phân quyền rõ ràng: chỉ Admin mới có quyền tạo/xóa/sửa tour,
trong khi người dùng thường chỉ có thể tương tác với dữ liệu của chính họ.
7
Tất cả dữ liệu nhạy cảm cần được bảo vệ khi truyền tải bằng cách sử dụng
HTTPS.
3.2.4 Tính sẵn sàng và độ tin cậy (Availability & Reliability)
Hệ thống phải có thời gian hoạt động (uptime) cao, đảm bảo người dùng có thể
truy cập bất cứ lúc nào.
Cần có cơ chế sao lưu (backup) cơ sở dữ liệu định kỳ để phòng ngừa mất mát dữ
liệu.
3.2.5 Tính dễ sử dụng (Usability Requirements)
Giao diện người dùng (được xây dựng bằng React) phải trực quan, thân thiện và
dễ dàng cho người dùng trong việc tìm kiếm, so sánh và đặt tour.
Thiết kế responsive, tương thích tốt trên nhiều thiết bị như máy tính, máy tính
bảng và điện thoại di động.
3.2.6 Khả năng tương thích (Compatibility Requirements)
Ứng dụng web phải hoạt động ổn định trên các trình duyệt phổ biến như Google
Chrome, Firefox, và Edge.
3.2.7 Bảo trì và nâng cấp (Maintainability & Upgradability)
Mã nguồn được cấu trúc rõ ràng thành các module (controllers, routes, models)
giúp việc bảo trì và mở rộng tính năng trong tương lai trở nên dễ dàng hơn.
3.2.8 Tính tuân thủ (Compliance Requirements)
Hệ thống phải tuân thủ các quy định về bảo vệ dữ liệu cá nhân của người dùng
theo pháp luật hiện hành (ví dụ: Nghị định 13/2023/NĐ-CP của Việt Nam).
3.3 Mô hình hệ thống / Thiết kế giải pháp
3.3.1 Mô hình Use-case
8
Hình 1: Sơ đồ usecase tổng quan
Hình 2: Usecase xác thực người dùng
9
Hình 3: Usecase chức năng của admin
Hình 4: Usecase chức năng của người dùng
3.3.2 Đặc tả UseCase:
UC-01: Đăng ký tài khoản
10
Mã Use case
UC001
Tên Use case
Đăng ký
tài khoản
Tác nhân
Khách (Guest)
Mô tả
Khách truy cập cung cấp tên người dùng, email và mật khẩu để tạo một tài
khoản mới. Hệ thống xác thực thông tin, lưu trữ và chuyển hướng người dùng đến
trang đăng nhập sau khi đăng ký thành công.
Sự kiện kích
hoạt
Click vào nút "Register" trên trang đăng ký.
Tiền điều kiện
Người dùng đã truy cập vào trang đăng ký
Luồng sự kiện
chính
(Thành công)
S
TT
Thực
hiện bởi
Hành động
1
.
Người
dùng
Điều hướng đến trang đăng ký
2
.
Hệ thống Hiển thị form đăng ký với các trường:
username, email, password.
3
.
Người
dùng
Điền đầy đủ thông tin vào các trường và
nhấn nút "Register".
4
.
Hệ thống
(Frontend)
Gửi yêu cầu POST đến API endpoint
/api/v1/auth/register với dữ liệu đã nhập.
5
.
Hệ thống
(Backend)
Tại authController.js:- Hash mật khẩu.- Tạo
một bản ghi User mới.- Lưu người dùng vào cơ sở
dữ liệu.- Trả về response JSON với success: true.
6
.
Hệ thống
(Frontend)
Nhận được response thành công, hiển thị
thông báo và điều hướng người dùng đến trang đăng
nhập (/login).
Luồng sự
kiện thay thế
S
TT
Thực
hiện bởi
Hành động
6
a.
Hệ
thống (Backend)
Nếu email đã tồn tại, trả về lỗi với thông
báo "Email is already taken".
7
a.
Hệ
thống (Frontend)
Nhận được lỗi, hiển thị thông báo lỗi cho
người dùng.
Hậu điều kiện
- Một tài khoản người dùng mới được tạo và lưu trong cơ sở dữ liệu.
- Người dùng được chuyển hướng đến trang đăng nhập.
UC-02: Đăng nhập
Mã Use case
UC002
Tên Use case
Đăng
nhập
Tác nhân
Khách (Guest)
Mô tả
Người dùng cung cấp email và mật khẩu để đăng nhập. Hệ thống xác thực
thông tin, nếu thành công sẽ tạo một JSON Web Token (JWT) và cho phép người
dùng truy cập các chức năng dành cho thành viên.
Sự kiện kích
hoạt
Click vào nút "Login" trên trang đăng nhập.
Tiền điều kiện
Người dùng đã có tài khoản và đang ở trang đăng nhập (/login).
11
Luồng sự kiện
chính
(Thành công)
S
TT
Thực
hiện bởi
Hành động
1
.
Người
dùng
Truy cập trang đăng nhập
2
.
Hệ thống Hiển thị form đăng nhập với các trường:
email, password.
3
.
Người
dùng
Điền email, mật khẩu và nhấn nút "Login".
4
.
Hệ thống
(Frontend)
Gửi yêu cầu POST đến API endpoint
/api/v1/auth/login.
5
.
Hệ thống
(Backend)
Tại authController.js:- Tìm người dùng
bằng email.- So sánh mật khẩu đã hash.- Nếu khớp,
tạo một JWT chứa id và role.- Trả về response JSON
với success: true, dữ liệu người dùng và token.
6
.
Hệ thống
(Frontend)
- Nhận response thành công.
- Lưu trạng thái đăng nhập, thông tin người
dùng và token vào localStorage thông qua
AuthContext.js
.- Điều hướng người dùng về trang chủ
(/home).
Luồng sự
kiện thay thế
S
TT
Thực
hiện bởi
Hành động
6
a.
Hệ
thống (Backend)
Nếu email không tồn tại, trả về lỗi 404
"User not found".
7
b.
Hệ
thống (Backend)
Nếu mật khẩu không đúng, trả về lỗi 400
"Incorrect email or password".
7
a.
Hệ
thống (Frontend)
Nhận được lỗi, hiển thị thông báo lỗi tương
ứng.
Hậu điều kiện
- Người dùng được xác thực thành công.
- Trạng thái đăng nhập được lưu ở client.
- Người dùng có thể truy cập các chức năng yêu cầu đăng nhập.
UC-03: Tìm kiếm Tour
Mã Use case
UC003
Tên Use case
Tìm kiếm
Tour
Tác nhân
Khách (Guest), Người dùng (User)
Mô tả
Người dùng nhập địa điểm, khoảng cách tối đa và số lượng người tối đa để
tìm kiếm các tour du lịch phù hợp. Hệ thống sẽ trả về danh sách các tour khớp với tiêu
chí.
Sự kiện kích
hoạt
Click vào nút "Search" trên thanh tìm kiếm.
Tiền điều kiện
Người dùng đang ở trang có thanh tìm kiếm (ví dụ: trang chủ).
Luồng sự kiện
chính
(Thành công)
S
TT
Thực
hiện bởi
Hành động
1
.
Người
dùng
Nhập các thông tin vào thanh tìm kiếm và
nhấn nút tìm kiếm.
12
2
.
Hệ thống
(Frontend)
- Kiểm tra các trường nhập.- Nếu hợp lệ,
điều hướng đến trang kết quả tìm kiếm với các tham
số trong URL
3
.
Hệ thống
(Frontend)
Trang SearchResultList.jsx được render, đọc
tham số từ URL và gọi API
/api/v1/tours/search/getTourBySearch bằng hook
useFetch.js.
4
.
Hệ thống
(Backend)
Tại tourController.js:- Nhận các tham số
city, distance, maxGroupSize.- Truy vấn cơ sở dữ
liệu để tìm các tour phù hợp.- Trả về response JSON
với success: true và danh sách các tour tìm được.
5
.
Hệ thống
(Frontend)
Nhận dữ liệu và hiển thị danh sách kết quả
dưới dạng các thẻ tour.
Luồng sự
kiện thay thế
S
TT
Thực
hiện bởi
Hành động
6
a.
Hệ
thống (Frontend)
Nếu người dùng không nhập đủ thông tin,
hiển thị cảnh báo "All fields are required!".
6
a.
Hệ
thống (Frontend)
Nếu không tìm thấy tour nào, trang kết quả
sẽ hiển thị thông báo "No tour found".
Hậu điều kiện
Giao diện hiển thị danh sách các tour phù hợp với tiêu chí tìm kiếm của
người dùng.
UC-04: Xem chi tiết Tour
Mã Use case
UC004
Tên Use case
Xem chi
tiết Tour
Tác nhân
Khách (Guest), Người dùng (User)
Mô tả
Người dùng chọn một tour cụ thể từ danh sách để xem thông tin chi tiết, bao
gồm hình ảnh, mô tả, giá, các bài đánh giá, và form đặt tour.
Sự kiện kích
hoạt
Click vào một tour bất kỳ trên trang chủ, trang tour, hoặc trang kết quả tìm
kiếm.
Tiền điều kiện
Người dùng đang xem danh sách các tour.
Luồng sự kiện
chính
(Thành công)
S
TT
Thực
hiện bởi
Hành động
1
.
Người
dùng
Nhấn vào một thẻ tour
2
.
Hệ thống
(Frontend)
Điều hướng đến trang chi tiết tour với ID của
tour trong URL (/tours/:id).
3
.
Hệ thống
(Frontend)
Trang TourDetails.jsx được render, đọc ID
từ URL và gọi API /api/v1/tours/:id để lấy dữ liệu.
4
.
Hệ thống
(Backend)
Tại tourController.js, hàm getSingleTour:-
Tìm tour trong cơ sở dữ liệu bằng ID.- Populate (làm
đầy) thông tin các bài đánh giá liên quan.- Trả về
response JSON với success: true và dữ liệu chi tiết
của tour.
4
.
Hệ thống
(Frontend)
Nhận dữ liệu và hiển thị đầy đủ thông tin
chi tiết của tour, bao gồm cả khu vực đánh giá và
form đặt tour
Luồng sự
kiện thay thế
S
TT
Thực
hiện bởi
Hành động
13
4
a.
Hệ
thống
(Backend)
Nếu không tìm thấy tour với ID cung
cấp, trả về lỗi 404 "Tour not found".
4
a.
Hệ
thống (Frontend)
Nhận lỗi và hiển thị thông báo lỗi cho
người dùng.
Hậu điều kiện
Người dùng xem được toàn bộ thông tin chi tiết về tour và có thể tiến hành
đặt tour hoặc viết đánh giá.
UC-05: Đặt Tour
Mã Use case
UC005
Tên Use case
Đặt Tour
Tác nhân
Người dùng (User)
Mô tả
Người dùng đã đăng nhập điền thông tin vào form đặt tour (số khách, ngày
đi) và xác nhận để đặt tour. Hệ thống sẽ tạo một đơn đặt chỗ mới.
Sự kiện kích
hoạt
Click vào nút "Book Now" trên form đặt tour ở trang chi tiết.
Tiền điều kiện
- Người dùng đã đăng nhập.
- Người dùng đang ở trang chi tiết của một tour.
Luồng sự kiện
chính
(Thành công)
S
TT
Thực
hiện bởi
Hành động
1
.
Người
dùng
Điền thông tin vào form đặt tour và nhấn
"Book Now".
2
.
Hệ thống
(Frontend)
Gửi yêu cầu POST đến API endpoint
/api/v1/booking với các thông tin: tourId, userId,
userEmail, tourName, fullName, guestSize, phone,
bookAt.
3
.
Hệ thống
(Backend)
Tại bookingController.js, hàm
createBooking:- Tạo một bản ghi Booking mới với
thông tin được gửi lên.- Lưu vào cơ sở dữ liệu. - Trả
về response JSON với success: true và dữ liệu của
đơn đặt chỗ vừa tạo.
4
.
Hệ thống
(Frontend)
Nhận được response thành công và điều
hướng người dùng đến trang cảm ơn (/thank-you).
Luồng sự
kiện thay thế
S
TT
Thực
hiện bởi
Hành động
6
a.
Hệ
thống (Frontend)
Nếu người dùng chưa đăng nhập, hiển thị
thông báo yêu cầu đăng nhập.
6
a.
Hệ
thống (Backend)
Nếu có lỗi xảy ra trong quá trình tạo, trả về
lỗi 500.
Hậu điều kiện
- Một đơn đặt chỗ mới được tạo và lưu trong cơ sở dữ liệu.
- Người dùng được chuyển đến trang xác nhận/cảm ơn.
UC-06: Gửi đánh giá
Mã Use case
UC006
Tên Use case
Gửi đánh
giá
Tác nhân
Người dùng (User)
Mô tả
Người dùng đã đăng nhập viết nhận xét và cho điểm (rating) một tour. Hệ
14
thống sẽ lưu lại đánh giá này và liên kết nó với tour tương ứng.
Sự kiện kích
hoạt
Click vào nút "Submit" trong khu vực viết đánh giá.
Tiền điều kiện
- Người dùng đã đăng nhập.
- Người dùng đang ở trang chi tiết của một tour.
Luồng sự kiện
chính
(Thành công)
S
TT
Thực
hiện bởi
Hành động
1
.
Người
dùng
Nhập nội dung đánh giá và chọn số sao
trong form ở trang TourDetails.jsx. |
2
.
Hệ thống
(Frontend)
Gửi yêu cầu POST đến API endpoint
/api/v1/review/:tourId với nội dung đánh giá và điểm
số.
3
.
Hệ thống
(Backend)
Tại reviewController.js, hàm
createReview:- Tạo một bản ghi Review mới.- Lưu
đánh giá vào cơ sở dữ liệu.- Cập nhật (push) ID của
đánh giá mới này vào mảng reviews của tour tương
ứng.- Trả về response JSON với success: true và dữ
liệu của đánh giá vừa tạo.
4
.
Hệ thống
(Frontend)
Nhận được response thành công, tự động
cập nhật và hiển thị đánh giá mới ngay trên trang mà
không cần tải lại.
Luồng sự
kiện thay thế
S
TT
Thực
hiện bởi
Hành động
6
a.
Hệ
thống (Backend)
Nếu có lỗi xảy ra, trả về lỗi 500.
Hậu điều kiện
- Một đánh giá mới được tạo và liên kết với tour.
- Đánh giá mới được hiển thị ngay lập tức trong danh sách đánh giá của tour.
UC-07: Quản lý Tour (Thêm, Sửa, Xóa)
Mã Use case
UC007
Tên Use case
Quản lý
Tour (Thêm, Sửa,
Xóa)
Tác nhân
Quản trị viên (Admin)
Mô tả
Admin có thể thêm, cập nhật và xóa các tour khỏi hệ thống thông qua các
API endpoint. (Lưu ý: Dự án không có giao diện admin, các hành động này được thực
hiện qua API).
Sự kiện kích
hoạt
Gửi yêu cầu API đến các endpoint quản lý tour.
Tiền điều kiện
- Người dùng đã đăng nhập với vai trò admin.
- Có một token JWT hợp lệ của admin.
Luồng sự kiện
chính
(Thành công)
S
TT
Thực
hiện bởi
Hành động
1
.
Admin (Thêm) Gửi yêu cầu POST đến
/api/v1/tours với đầy đủ thông tin của tour mới.
2
.
Hệ thống
(Backend)
Hàm createTour (tourController.js) tạo và
lưu tour mới.
3
.
Admin
(Sửa) Gửi yêu cầu PUT đến /api/v1/tours/:id
với thông tin cần cập nhật.
4
.
Hệ thống
(Backend)
Hàm updateTour (tourController.js) tìm và
cập nhật tour.
15
5
.
Admin
(Xóa) Gửi yêu cầu DELETE đến
/api/v1/tours/:id
5
.
Hệ thống
(Backend)
Hàm deleteTour (tourController.js) tìm và
xóa tour.
Luồng sự
kiện thay thế
S
TT
Thực
hiện bởi
Hành động
6
a.
Hệ
thống (Backend)
Nếu token không hợp lệ hoặc vai trò không
phải admin (kiểm tra bởi middleware
verifyToken.js), trả về lỗi 401 "You are not
authorized".
Hậu điều kiện
Dữ liệu các tour trong cơ sở dữ liệu được cập nhật (thêm, sửa, hoặc xóa).
UC-08: Quản lý Người dùng (Xem, Xóa)
Mã Use case
UC008
Tên Use case
Quản lý
Người dùng (Xem,
Xóa)
Tác nhân
Quản trị viên (Admin)
Mô tả
Admin có thể xem danh sách tất cả người dùng và xóa một người dùng khỏi
hệ thống.
Sự kiện kích
hoạt
Gửi yêu cầu API đến các endpoint quản lý người dùng.
Tiền điều kiện
- Người dùng đã đăng nhập với vai trò admin.
Luồng sự kiện
chính
(Thành công)
S
TT
Thực
hiện bởi
Hành động
1
.
Admin (Xem) Gửi yêu cầu GET đến /api/v1/users.
2
.
Hệ thống
(Backend)
Hàm getAllUser (userController.js) trả về
danh sách tất cả người dùng.
3
.
Admin
(Xóa) Gửi yêu cầu DELETE đến
/api/v1/users/:id
4
.
Hệ thống
(Backend)
Hàm deleteUser (userController.js) tìm và
xóa người dùng.
Luồng sự
kiện thay thế
S
TT
Thực
hiện bởi
Hành động
6
a.
Hệ
thống (Backend)
Nếu không phải admin, middleware
verifyAdmin sẽ trả về lỗi 401.
Hậu điều kiện
- Admin nhận được danh sách người dùng.
- Người dùng bị xóa khỏi cơ sở dữ liệu.
UC-09: Quản lý Đặt chỗ (Xem)
Mã Use case
UC009
Tên Use case
Quản lý
Đặt chỗ (Xem)
Tác nhân
Quản trị viên (Admin)
Mô tả
Admin có thể xem danh sách tất cả các đơn đặt chỗ trong hệ thống.
Sự kiện kích
hoạt
Gửi yêu cầu API đến endpoint xem tất cả đặt chỗ.
Tiền điều kiện
- Người dùng đã đăng nhập với vai trò admin.
16
Luồng sự kiện
chính
(Thành công)
S
TT
Thực
hiện bởi
Hành động
1
.
Admin Gửi yêu cầu GET đến /api/v1/booking.
2
.
Hệ thống
(Backend)
Hàm getAllBooking (bookingController.js)
trả về danh sách tất cả các đơn đặt chỗ.
Luồng sự
kiện thay thế
S
TT
Thực
hiện bởi
Hành động
6
a.
Hệ
thống (Backend)
Nếu không phải admin, middleware
verifyAdmin sẽ trả về lỗi 401.
Hậu điều kiện
Admin nhận được danh sách tất cả các đơn đặt chỗ.
3.3.3 Mô hình lớp và đối tượng
Các đối tượng trừu tượng chính của hệ thống (Key Abstractions)
STT Tên đối tượng Vai trò Thuộc tính Phương thức
1 User Đại diện cho thông
tin và xác thực
người dùng.
username, email,
password, photo,
role
Đăng ký, Đăng
nhập, Tạo/Cập
nhật/Xóa người
dùng, Lấy thông tin
người dùng.
2 Tour Quản lý thông tin
chi tiết của các tour
du lịch.
title, city, address,
distance, photo,
desc, price,
maxGroupSize,
reviews, featured
Tạo/Cập nhật/Xóa
tour, Lấy thông tin
tour, Tìm kiếm tour,
Lấy các tour nổi bật.
3 Booking Quản lý thông tin
đặt tour của người
dùng.
userId, userEmail,
tourName,
fullName,
guestSize, phone,
bookAt,
totalAmount
Tạo mới đơn đặt
tour, Lấy thông tin
đơn đặt tour.
4 Review Quản lý các đánh
giá của người dùng
về các tour.
productId (ID của
Tour), username,
reviewText, rating
Tạo mới một đánh
giá cho tour.
Các lớp trong hệ thống
STT Chức năng Tên lớp / Tệp Loại lớp Vai trò
1 Xác thực &
Quản lý
Người dùng
Login.jsx
Register.jsx
Boundary Cung cấp giao diện cho người
dùng thực hiện đăng nhập và đăng
ký tài khoản. Tương tác với
authController để gửi yêu cầu.
authController.js Control Xử lý các yêu cầu logic từ giao
diện: xác thực thông tin đăng
nhập, mã hóa mật khẩu khi đăng
ký, và tạo JSON Web Token
(JWT).
userController.js Control Xử lý các hoạt động quản lý dữ
liệu người dùng như tạo, cập nhật,
xóa, và truy xuất thông tin người
dùng. Tương tác với lớp User
17
(Entity).
User.js Entity Lưu trữ thông tin chi tiết của
người dùng trong cơ sở dữ liệu,
bao gồm username, email,
password, photo, và role.
2 Quản lý Tour Tours.jsx
TourDetails.jsx
SearchBar.jsx
Boundary Cung cấp giao diện cho người
dùng để tìm kiếm, xem danh sách
và xem chi tiết thông tin các tour
du lịch.
tourController.js Control Xử lý toàn bộ logic nghiệp vụ liên
quan đến tour: tạo, cập nhật, xóa,
tìm kiếm theo tiêu chí, lấy các
tour nổi bật. Tương tác với lớp
Tour (Entity).
Tour.js Entity Lưu trữ thông tin chi tiết của một
tour trong cơ sở dữ liệu, như title,
city, price, maxGroupSize, desc,
reviews, v.v.
3 Quản lý Đặt
tour
(Booking)
Booking.jsx Boundary Cung cấp giao diện (form) để
người dùng nhập thông tin và thực
hiện đặt một tour.
bookingController.js Control Xử lý yêu cầu tạo mới một đơn
đặt tour và lấy thông tin các đơn
đã đặt. Tương tác với lớp Booking
(Entity).
Booking.js Entity Lưu trữ thông tin về một lần đặt
tour của người dùng, bao gồm
userId, userEmail, tourName,
guestSize, phone, bookAt.
4 Quản lý
Đánh giá
(Review)
TourDetails.jsx (phần
đánh giá)
Boundary Cung cấp giao diện cho người
dùng để gửi đánh giá và xếp hạng
(rating) cho một tour đã tham gia.
reviewController.js Control Xử lý yêu cầu tạo mới một đánh
giá. Sau khi lưu đánh giá, nó sẽ
cập nhật danh sách reviews trong
tài liệu Tour tương ứng.
Review.js Entity Lưu trữ thông tin của một đánh
giá, bao gồm username,
reviewText, rating, và productId
(ID của tour được đánh giá).
18
Hình 5: Biểu đồ lớp
3.3.4 Các biểu đồ tuần tự
Biểu đồ tuần tự: Đăng ký người dùng
Các bước diễn ra như sau:
1. Người dùng nhập thông tin (tên, email, mật khẩu) vào form đăng ký trên giao diện.
2. Khi nhấn nút "Đăng ký", Giao diện (Frontend) gửi yêu cầu POST đến
api/v1/auth/register trên API Server, kèm theo dữ liệu người dùng.
3. API Server (Backend) nhận yêu cầu và gọi đến hàm xử lý register trong
backend/controllers/authController.js:8.
4. Server mã hóa mật khẩu của người dùng để bảo mật.
5. Server tạo một đối tượng người dùng mới và gửi lệnh lưu vào Cơ sở dữ liệu
(Database).
6. Cơ sở dữ liệu lưu thông tin người dùng thành công và trả về kết quả cho Server.
7. Server gửi lại thông báo đăng ký thành công cho Giao diện.
19

Tài liệu khác của Đại học Phenika

Tài liệu liên quan: