Đồ án xây dựng website quản lý tour du lịch

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

ĐỒ ÁN 2
Đề Tài: XÂY DỰNG WEBSITE
QUẢN LÝ TOUR DU LỊCH
Giảng viên hướng dẫn: ThS. Trần Thị Hống Yến

Thành viên: Vũ Phạm Ngọc Tân - 19520930

Thành phố Hồ Chí Minh, năm 2023

i


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

ĐỒ ÁN 2
Đề Tài: XÂY DỰNG WEBSITE
QUẢN LÝ TOUR DU LỊCH
Giảng viên hướng dẫn: ThS. Trần Thị Hống Yến

Thành viên: Vũ Phạm Ngọc Tân - 19520930

Thành phố Hồ Chí Minh, năm 2023

ii

LỜI CẢM ƠN
Sau quá trình học tập và rèn luyện tại khoa Công nghệ phần mềm trường
Đại học Công nghệ Thông tin – ĐHQG TP.HCM em đã được trang bị các
kiến thức cơ bản, các kỹ năng thực tế để có thể lần đầu thực hiện Đồ án 2 của
mình.
Để hoàn thành Đồ án này, em xin gửi lời cảm ơn chân thành đến:
Ban Giám hiệu trường Đại học Công nghệ Thơng tin – ĐHQG
TP.HCM vì đã tạo điều kiện về cơ sở vật chất với hệ thống thư viện hiện đại,
đa dạng các loại sách, tài liệu thuận lợi cho việc tìm kiếm, nghiên cứu thơng
tin.
Em xin gửi lời cảm ơn chân thành đến cô Trần Thị Hồng Yến đã tận
tình giúp đỡ, định hướng cách tư duy và cách làm việc khoa học. Đó là những
góp ý hết sức q báu khơng chỉ trong q trình thực hiện luận văn này mà
còn là hành trang tiếp bước cho chúng em trong quá trình học tập và lập nghiệp
sau này.
Và cuối cùng, chúng em xin gửi lời cảm ơn đến gia đình, tất cả thầy cơ
trong khoa, bạn bè, tập thể lớp KTPM2019 là những người luôn sẵn sàng sẻ
chia và giúp đỡ trong học tập và cuộc sống. Mong rằng, chúng ta sẽ mãi mãi
gắn bó với nhau.
Trong q trình làm Đồ án này em khơng tránh khỏi được những sai
sót, em kính mong nhận được sự chỉ dẫn và góp ý của q thầy cơ để hồn
thiện và phát triển đồ án hơn trong tương lai.
Em xin chân thành cảm ơn. Xin chúc những điều tốt đẹp nhất sẽ ln
đồng hành cùng mọi người.
Thành phố Hồ Chí Minh, … tháng … năm 2023
Sinh viên
Vũ Phạm Ngọc Tân
iii

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

iv


MỤC LỤC
LỜI CẢM ƠN .......................................................................................................... iii
NHẬN XÉT CỦA GIẢNG VIÊN ...........................................................................iv
MỤC LỤC .................................................................................................................. v
DANH MỤC HÌNH ẢNH ...................................................................................... vii

NỘI DUNG ................................................................................................................ 1
Chương 1: Tóm tắt đề tài ......................................................................................... 1
1.1.

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

1.2.

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

1.3.

Đối tượng sử dụng ..........................................................................................................1

1.4.

Phạm vi nghiên cứu .......................................................................................................2

Chương 2: Cơ sỏ lý thuyết ........................................................................................ 3
2.1.

ReactJS ..............................................................................................................................3

2.2.

NextJs ................................................................................................................................3

2.3.

JavaScript..........................................................................................................................4

2.4.

Firebase .............................................................................................................................4

2.5.

HTML ................................................................................................................................5

2.6.

Tailwind ............................................................................................................................5

2.7.

Github ................................................................................................................................6

Chương 3: Hiện thực hệ thống ................................................................................. 7
3.1.

Đặc tả Use-case ...............................................................................................................7

3.1.1.

Sơ đồ Use case ......................................................................................................7

3.1.2.

Danh sách tác nhân ..............................................................................................8

v


3.1.3.

Danh sách Use case .............................................................................................8

3.1.4.

Mô tả Use case ......................................................................................................9

3.2.

Thiết kế dữ liệu .............................................................................................................21

3.2.1.

Sơ đồ hoàn chỉnh ................................................................................................21

3.2.2.

Danh sách các bảng dữ liệu (table) trong sơ đồ: ........................................22

3.2.3.

Mô tả từng bảng dữ liệu ...................................................................................23

3.3.

Thiết kế hệ thống ..........................................................................................................27

3.3.1.

Kiến trúc hệ thống: Mơ hình 3 lớp ................................................................27

3.3.2.

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

3.4. Thiết kế giao diện ................................................................................................................29
3.4.1.

Danh sách màn hình ..........................................................................................29

3.4.2.

Mơ tả chi tiêt từng màn hình ...........................................................................30

Chương 4: Tổng kết ................................................................................................ 50
4.1.

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

4.2.

Kết luận ...........................................................................................................................51

4.2.1.

Đánh giá ................................................................................................................51

4.2.2.

Hướng phát triển trong tương lai ...................................................................52

4.3.

Link Github ....................................................................................................................52

TÀI LIỆU THAM KHẢO ...................................................................................... 53

vi


DANH MỤC HÌNH ẢNH
HÌnh 2.1: React JS ....................................................................................................... 3
HÌnh 2.2. Next JS ........................................................................................................ 3
HÌnh 2.3. Javascript..................................................................................................... 4
HÌnh 2.4. Firebase ....................................................................................................... 4
HÌnh 2.5. HTML ......................................................................................................... 5
HÌnh 2.6. Tailwind ...................................................................................................... 5
HÌnh 2.7. Github ......................................................................................................... 6
HÌnh 3.1. Sơ đồ Use case ............................................................................................ 7
HÌnh 3.2. Sơ đồ dữ liệu quan hệ ............................................................................... 21
HÌnh 3.3. Sơ đồ mơ hình 3 lớp .................................................................................. 27
HÌnh 3.4. Màn hình đăng nhập.................................................................................. 30
HÌnh 3.5. Màn hình đăng ký ..................................................................................... 31
HÌnh 3.6. Trang chủ .................................................................................................. 32
HÌnh 3.7. Màn hình tin tức ........................................................................................ 33
HÌnh 3.8. Màn hình Liên hệ ...................................................................................... 34

HÌnh 3.9. Màn hình chi tiết bài viết .......................................................................... 35
HÌnh 3.10. Màn hình chi tiết tour .............................................................................. 36
HÌnh 3.11. Màn hình đăng ký tour ............................................................................ 37
HÌnh 3.12. Màn hình hồ sơ người dùng .................................................................... 38
HÌnh 3.13. Màn hình lịch sử tour .............................................................................. 40
HÌnh 3.14. Màn hình trang chủ - Admin................................................................... 41
HÌnh 3.15. Màn hình tour -Admin ............................................................................ 42

vii


HÌnh 3.16. Màn hình tạo tour .................................................................................... 43
HÌnh 3.17. Màn hình tin tức – Admin ....................................................................... 44
HÌnh 3.18. Màn hình tao bài viết .............................................................................. 45
HÌnh 3.19. Màn hình lịch sử đặt tour – Admin ......................................................... 46
HÌnh 3.20. Màn hình sửa phiếu đặt tour ................................................................... 47
HÌnh 3.21. Màn hình hồ sơ cá nhân – Admin ........................................................... 49

viii


NỘI DUNG
Chương 1: Tóm tắt đề tài
1.1.

Tổng quan đề tài
• Tên ứng dụng: GoWorld
• Chủ đề chính: Website Quản lý tour du lịch
• Nền tảng phát triển: ReactJS, NextJS
• Mơ hình phát triển: MVC

1.2.

Lý do chọn đề tài

Du lịch Việt Nam được Nhà nước Việt Nam xem là một ngành kinh tế mũi
nhọn vì cho rằng đất nước Việt Nam có tiềm năng du lịch đa dạng và phong phú. Đặc
biệt, sau đợt đại dịch COVID khiến toàn xã hội phải tiến vào trạng thái cách ly, ngành
du lịch ngày càng bùng nổ hơn. Với sự phát triển này, các nhà kinh doanh trong lĩnh
vực du lịch nhu cầu phát triển một website hỗ trợ đặt tour du lịch trực tuyển và nó là
vơ cùng cần thiết để tạo cơ hội tiếp cận với khách hàng dễ dàng và tối ưu hóa hoạt
động của họ thơng qua cơng nghệ.
Một website hỗ trợ đặt tour du lịch có thể góp phần lớn cho cả khách hàng truy
cập và doanh nghiệp kinh doanh:
• Khách hàng: cung cấp nền tảng cho phép khách hàng tiếp cận với thông
tin về các tour du lịch một cách nhanh nhất, chính xác và trực quan
nhất, giảm thiểu thời gian đến trực tiếp các đại lý như trước đây.
• Doanh nghiệp: tổi ưu hóa q trình quản lý các tour hiện có, thu thập
thơng tin về sở thích, xu hướng của khách hàng dễ dàng hơn từ đó đưa
ra các chiến lược kinh doanh hợp lý hơn.
1.3.

Đối tượng sử dụng

Các doanh nghiệp, công ty hoạt động trong lĩnh vực du lịch.

1


Các khách hàng có nhu cầu đặt tour du lịch.

1.4.

Phạm vi nghiên cứu

Nền tảng hỗ trợ: Triển khai trên website
• Chức năng:
• Hệ thống đặt tour của khách hàng: khách hàng có thể đặt tour trực tuyến
và xem thơng tin về các tour.
• Hệ thống các bài đăng du lịch: cung cấp thông tin về các địa điểm du
lịch đang xu hướng, các điểm tham quan, các trị chơi, món ăn khi đến
nơi du lịch dưới dạng các blog.
• Quản lý các tour du lịch: quản lý thông tin các tour, theo dõi dữ liệu và
trạng thái các tour.
• Quản lý dữ liệu khách hàng: khách hàng có thể tạo tài khoản để lưu
thông tin cá nhân và lịch sử đặt tour.
• Tích hợp hệ thống thanh tốn: tích hợp với các cổng thanh toán phổ
biến để thực hiện các giao dịch trực tuyến an tồn.
• Báo cáo và phân tích: khả năng tạo báo cáo và phân tích dữ liệu để cung
cấp thông tin cho các quyết định kinh doanh.

2


Chương 2: Cơ sỏ lý thuyết
2.1.

ReactJS

HÌnh 2.1: React JS

ReactJS là một thư viện trong đó có chứa nhiều JavaScript mã nguồn mở và
cha đẻ của ReactJS đó chính là một ơng lớn với cái tên ai cũng biết đó chính là
Facebook. Mục đích của việc tạo ra ReactJS là để tạo ra những ứng dụng website hấp
dẫn với tốc độ nhanh và hiệu quả cao với những mã hóa tối thiểu. Và mục đích chủ
chốt của ReactJS đó chính là mỗi website khi đã sử dụng ReactJS thì phải chạy thật
mượt thật nhanh và có khả năng mở rộng cao và đơn giản thực hiện.
2.2.

NextJs

HÌnh 2.2. Next JS

Next.js là một open-source React front-end framework được bổ sung các tính
năng như Server Side Rendering (SSR) và Static Site Generation (SSG). Next.js được
xây dựng dựa trên thư viện React có nghĩa là Next.js lấy những lợi thế của React và
bổ sung các tính năng.

3


2.3.

JavaScript

HÌnh 2.3. Javascript

JavaScript là ngơn ngữ lập trình website phổ biến hiện nay, nó được tích hợp
và nhúng vào HTML giúp website trở nên sống động hơn. JavaScript đóng vai trò
như là một phần của trang web, thực thi cho phép Client-side script từ phía người
dùng cũng như phía máy chủ (Nodejs) tạo ra các trang web động.

2.4.

Firebase

HÌnh 2.4. Firebase

Firebase là platform do Google cung cấp, nhằm hỗ trợ việc tạo ra các web
application, mobile application với chất lượng cao. Với việc sử dụng Firebase,
developer có thể tập trung vào việc phát triển application mà không cần lo về việc
sản phẩm của mình sẽ hoạt động và được quản lý thể nào ở phía Backend. Khái niệm
Backend nhắc tới trong câu trên để chỉ việc xử lý và lưu trữ dữ liệu trong service, ở
4


vùng "phía sau" mà người dùng khơng nhìn thấy. Firebase là một trong những BaaS
(Backend as a service). Serverless architecture được chú ý như một giải pháp đáp ứng
yêu cầu release một dịch vụ trong thời gian ngắn, trong bối cảnh đó, BaaS ra mắt
người dùng. BaaS hướng đến thiết bị chủ yếu là mobile nên còn được gọi với một tên
gọi khác là MBaaS.
2.5.

HTML

HÌnh 2.5. HTML

HTML là viết tắt của cụm từ Hypertext Markup Language (tạm dịch là Ngôn
ngữ đánh dấu siêu văn bản). HTML được sử dụng để tạo và cấu trúc các thành phần
trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, titles,
blockquotes… và HTML khơng phải là ngơn ngữ lập trình.
2.6.

Tailwind

HÌnh 2.6. Tailwind

5


Tailwind là một utility-first CSS framework, nó cũng giống như Bootstrap, nó
có những class built-in mà chúng ta có thể dùng. Tailwind CSS có nhiều các class
bao gồm các thuộc tính CSS khác nhau và quan trọng, chúng ta có thể dễ dàng mở
rộng tạo mới ra những class bằng chính những class của nó.
2.7.

Github

HÌnh 2.7. Github

GitHub là một hệ thống quản lý dự án và phiên bản code, hoạt động giống như
một mạng xã hội cho lập trình viên. Các lập trình viên có thể clone lại mã nguồn từ
một repository và Github chính là một dịch vụ máy chủ repository cơng cộng, mỗi
người có thể tạo tài khoản trên đó để tạo ra các kho chứa của riêng mình để có thể
làm việc. Github có đầy đủ những tính năng của Git, ngồi ra nó cịn bổ sung những
tính năng về social để các developer tương tác với nhau.
Github cung cấp các tính năng social networking như feeds, followers, và
network graph để các developer học hỏi kinh nghiệm của nhau thông qua lịch sử
commit.

6

Chương 3: Hiện thực hệ thống
3.1.

Đặc tả Use-case

3.1.1. Sơ đồ Use case

HÌnh 3.1. Sơ

đồ Use case

7


3.1.2.

Danh sách tác nhân

STT

Tác nhân

1

Khách hàng

2

Admin

3.1.3.

Mô tả
Là người dùng, sử dựng website để xem thông tin
tour và đặt tour trực tuyến.
Là người quản lý website và hệ thống đặt tour

Danh sách Use case

STT

Tính năng

1

Đăng nhập

2

Đăng ký

3

Đổi mật khẩu

4

Xem thơng tin
tour

Mơ tả
Đăng nhập vào hệ thống website bằng tài khoản cá
nhân
Dành cho khách hàng: đăng ký tài khoản để đăng
nhập vào hệ thống
Dành cho khách hàng: thực hiện đổi mật khẩu cá
nhân mới
Xem thơng tin tour được doanh nghiệp đăng tải
• Với khách hàng: Xem lại lịch sử đặt tour
của tài khoản hiện tại.
• Với Admin: Xem lại lịch sử đặt tour của tất
cả khách hàng để có thể quản lý hoặc xác
nhận phiếu đặt.

5

Xem lịch sử đặt
tour

6

Đặt tour

Dành cho khách hàng: đặt tour du lịch trực tuyến

7

Xem bài viết

Xem nội dung bài viết về du lịch được doanh

nghiệp đăng tải

8

Cài đặt tài khoản

Dành cho khách hàng: chỉnh sửa thông tin cá nhân

9

Quản lý tour

Dành cho Admin: các thao tác thêm, sửa, xóa
thơng tin về các tour du lịch

10

Quản lý đặt tour

Dành cho Admin: xem lịch sử và xác nhận các
phiếu đặt

11

Quản lý bài viết

Dành cho Admin: các thao tác thêm, sửa, xóa nội
dung các bài viết liên quan du lịch

12

Xem báo cáo

Dành cho Admin: xem các báo cáo về doanh thu
cũng như top tour tháng

8


3.1.4.

Mô tả Use case

Mô tả “Đăng nhập”
Người dùng sở hữu tài khoản, sử dụng

Mô tả chi tiết

tài khoản truy cập hệ thống
Luồng sự kiện
1. Chọn đến trang đăng nhập
2. Nhập thơng tin tài khoản gồm tên

Luồng chính

tài khoản và mật khẩu
3. Nhấn nút đăng nhập
1. Thực hiện các bước ở luồng chính

Luồng phụ

2. Hệ thống thơng báo đăng nhập
thất bại do sai thông tin

Điều kiện trước

Yêu cầu tài khoản

Điều kiện sau

9


Mô tả “Đăng ký”

Mô tả chi tiết

Khách hàng thực hiện tạo tài khoản cá
nhân để truy cập hệ thống
Luồng sự kiện
1. Chọn đến trang đăng ký
2. Nhập thông tin của tài khoản

Luồng chính

mới
3. Nhấn nút đăng ký
1. Thực hiện các bước luồng chính
2. Hệ thống hiện thơng báo khơng

Luồng phụ

đăng ký được do trùng tên đăng
nhập hoặc email

Điều kiện trước

Truy cập website

Điều kiện sau

10


Mô tả “Đổi mật khẩu”

Mô tả chi tiết

Khách hàng thực hiện đổi mới lại mật
khẩu của tài khoản hiện dùng
Luồng sự kiện
1. Chọn đến trang tài khoản cá
nhân

Luồng chính

2. Nhập mật khẩu cũ, mật khẩu
mới
3. Nhấn nút đổi mật khẩu
1. Thực hiện các bước luồng chính

2. Hệ thống báo lỗi khi mật khẩu

Luồng phụ

mới và được nhập lại không
khớp

Điều kiện trước

Đăng nhập trước vào hệ thống

Điều kiện sau

11


Mô tả “Xem thông tin tour”

Mô tả chi tiết

Người dùng xem danh sách tour và
thông tin chi tiết của từng tour du lịch
Luồng sự kiện
1. Chọn đến trang chủ
2. Chọn vào tour muốn xem chi tiết

Luồng chính

3. Hệ thống chuyến đến trang
thông tin tour

Luồng phụ
Điều kiện trước
Điều kiện sau

Đăng nhập trước vào hệ thống
Hệ thống truy xuất và hiển thị thông tin

12


Mô tả “Xem lịch sử đặt tour”
Người dùng xem danh sách các tour đã
Mô tả chi tiết

được đặt (cả trạng thái xác nhận và chưa
xác nhận)
Luồng sự kiện
1. Chọn đến trang lịch sử đặt tour
2. Hệ thống hiển thị danh sách lịch

Luồng chính

sử
3. Chọn tour muốn xem thơng tin

Luồng phụ
Điều kiện trước
Điều kiện sau

Đăng nhập trước vào hệ thống
Hệ thống truy xuất và hiển thị thông tin

13


Mô tả “Đặt tour”

Mô tả chi tiết

Khách hàng thực hiện đặt tour du lịch
mong muốn
Luồng sự kiện
1. Chọn đến trang thông tin tour
2. Ở phần đặt tour nằm trên đầu

Luồng chính

bên phải trang, nhập thơng tin
u cầu để đặt tour
3. Nhấn nút đặt tour

Luồng phụ

Điều kiện trước

Điều kiện sau

Đăng nhập trước vào hệ thống bằng tài
khoản khách hàng

Hệ thống xác nhận và lưu trữ

14


Mô tả “Xem bài viết”

Mô tả chi tiết

Người dùng xem danh sách bài viết và
nội dung của từng bài viết du lịch
Luồng sự kiện
1. Chọn đến trang chủ
2. Chọn vào bài viết muốn xem chi

Luồng chính

tiết
3. Hệ thống chuyến đến trang chi
tiết bài viết

Luồng phụ
Điều kiện trước
Điều kiện sau

Đăng nhập trước vào hệ thống
Hệ thống truy xuất và hiển thị thông tin

15

Mô tả “Cài đặt tài khoản”

Mô tả chi tiết

Người dùng thực hiện thay đổi thông tin
cá nhân của tài khoản hiện tại
Luồng sự kiện
1. Chọn đến trang tài khoản
2. Nhập thơng tin cá nhân vào ơ

Luồng chính

theo u cầu tương ứng
3. Chọn nút lưu thay đổi
1. Thực hiện các bước ở luồng
chính

Luồng phụ

2. Hệ thống báo lỗi khi nhập thơng
tin không hợp lệ

Điều kiện trước

Đăng nhập trước vào hệ thống

Điều kiện sau

Hệ thống xác nhận và lưu trữ

16


Mô tả “Quản lý tour”

Mô tả chi tiết

Cho phép Admin thực hiện các thao tác thêm mới
tour, sửa hoặc xóa đi 1 tour du lịch trong hệ thống
Luồng sự kiện
1. Chọn đến trang chủ
2. Thực hiện thao tác thêm/ sửa -xóa
2.1 Nếu thêm tour mới:
• Chọn nút thêm
• Nhập thơng tin tour mới
• Nhấn nút lưu thay đổi

Luồng chính

2.2 Nếu sửa – xóa tour:
•

Chọn tour muốn sửa – xóa

•

Thay đổi thơng tin nếu muốn sửa
và nhấn lưu thay đổi

•

Nhấn xóa nếu muốn loại tour khỏi
hệ thống

1. Thực hiện các bước ở luồng chính
Luồng phụ

2. Hệ thống báo lỗi nếu thơng tin nhập vào
không hợp lệ

Điều kiện trước

Điều kiện sau

Đăng nhập trước vào hệ thống bằng tài khoản
admin
Hệ thống xác nhận và lưu trữ

17