Xây dựng website cộng đồng chia sẻ trải nghiệm du lịch và điểm đến

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT
THÀNH PHỐ HỒ CHÍ MINH

ĐỒ ÁN TỐT NGHIỆP
NGÀNH CƠNG NGHỆ THÔNG TIN

XÂY DỰNG WEBSITE CỘNG ĐỒNG
CHIA SẺ TRẢI NGHIỆM DU LỊCH VÀ ĐIỂM ĐẾN

GVHD: TS. LÊ VĂN VINH
SVTH : NGUYỄN HIẾU ĐAN
DƯƠNG ĐỨC THẮNG

SKL011291

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


TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP. HỒ CHÍ MINH
KHOA CƠNG NGHỆ THƠNG TIN
CHUN NGÀNH CƠNG NGHỆ PHẦN MỀM

KHĨA LUẬN TỐT NGHIỆP
ĐỀ TÀI

XÂY DỰNG WEBSITE CỘNG ĐỒNG CHIA SẺ
TRẢI NGHIỆM DU LỊCH VÀ ĐIỂM ĐẾN
GIẢNG VIÊN HƯỚNG DẪN
TS. LÊ VĂN VINH
NHÓM SINH VIÊN THỰC HIỆN

NGUYỄN HIẾU ĐAN - 19110345
DƯƠNG ĐỨC THẮNG - 19110461

TP. HỒ CHÍ MINH, THÁNG 07 NĂM 2023


ĐH SƯ PHẠM KỸ THUẬT TP. HCM

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

KHOA CNTT

Độc lập – Tự do – Hạnh Phúc

*******

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
Họ và tên Sinh viên 1: Nguyễn Hiếu Đan

MSSV 1: 19110345

Họ và tên Sinh viên 2: Dương Đức Thắng

MSSV 2: 19110461

Ngành: Công nghệ Thông tin
Tên đề tài: Xây dựng website cộng đồng chia sẻ trải nghiệm du lịch và điểm đến.
Họ và tên Giáo viên hướng dẫn: TS. Lê Văn Vinh

NHẬN XÉT
1. Về nội dung đề tài & khối lượng thực hiện:
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
2. Ưu điểm:
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
3. Khuyết điểm:
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
4. Đề nghị cho bảo vệ hay khơng? ....................................................................................
5. Đánh giá loại: ................................................................................................................
6. Điểm: .............................................................................................................................
Tp. Hồ Chí Minh, ngày 12 tháng 07 năm 2023
Giáo viên hướng dẫn
(Ký & ghi rõ họ tên)


ĐH SƯ PHẠM KỸ THUẬT TP. HCM

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

KHOA CNTT

Độc lập – Tự do – Hạnh Phúc

*******

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN
Họ và tên Sinh viên 1: Nguyễn Hiếu Đan

MSSV 1: 19110345

Họ và tên Sinh viên 2: Dương Đức Thắng

MSSV 2: 19110461

Ngành: Công nghệ Thông tin
Tên đề tài: Xây dựng website cộng đồng chia sẻ trải nghiệm du lịch và điểm đến.
Họ và tên Giáo viên phản biện: ThS. Mai Anh Thơ
NHẬN XÉT
1. Về nội dung đề tài & khối lượng thực hiện:
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
2. Ưu điểm:
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
3. Khuyết điểm:
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
4. Đề nghị cho bảo vệ hay khơng? ....................................................................................
5. Đánh giá loại: ................................................................................................................

6. Điểm: .............................................................................................................................
Tp. Hồ Chí Minh, ngày 12 tháng 07 năm 2023
Giáo viên phản biện
(Ký & ghi rõ họ tên)


LỜI CẢM ƠN
Chúng em xin bày tỏ lòng biết ơn chân thành nhất đến Khoa Công Nghệ Thông
Tin – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh vì đã tạo mọi
điều kiện thuận lợi để chúng em được rèn luyện, học tập và xây dựng nền tảng kiến
thức vững chắc nhằm hoàn thành đề tài này.
Thành thật gửi lời cảm kích sâu sắc tới thầy Lê Văn Vinh vì tấm lịng và sự tận
tâm hướng dẫn, đồng thời cung cấp những góp ý quý giá trong suốt q trình nhóm
chúng em thực hiện đề tài. Sự dẫn dắt chân thành của thầy đã góp phần quan trọng để
chúng em hoàn thiện đề tài này.
Cảm ơn Khoa Công Nghệ Thông Tin cùng đội ngũ giảng viên và đặc biệt là
thầy Lê Văn Vinh đã truyền đạt cho chúng em một lượng kiến thức và kinh nghiệm
đáng kể trong lĩnh vực chuyên ngành cũng như các yêu cầu thực tiễn của môi trường
xã hội. Điều này đã thúc đẩy chúng em hoàn thành đề tài và trang bị cho chúng em
một bảo tàng tri thức to lớn trước khi bước vào cuộc sống mới.
Dù chúng em đã cố gắng tối đa để hồn thành cơng việc này, nhận thức được
rằng kiến thức khơng bao giờ có hạn và chúng em cũng có những hạn chế riêng.
Chúng em mong nhận được sự góp ý tận tâm từ quý thầy (cơ) để rút ra bài học và
hồn thiện sản phẩm của mình tới mức tốt nhất có thể.
Một lần nữa, chúng em muốn bày tỏ lòng biết ơn chân thành đến Khoa Công
Nghệ Thông Tin, thầy Lê Văn Vinh và tồn thể giảng viên đã ủng hộ và đóng góp
vào thành công của chúng em. Sự hỗ trợ và tận tâm của quý thầy (cô) là nguồn động
lực lớn giúp chúng em tiếp tục nỗ lực và phát triển trong hành trình sắp tới. Chân
thành cảm ơn!
Nhóm thực hiện

Nguyễn Hiếu Đan – 19110345
Dương Đức Thắng – 19110461

1


Trường Đại học Sư phạm Kỹ thuật TP.HCM
Khoa Công nghệ Thông tin

ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP
Họ và Tên SV thực hiện 1: Nguyễn Hiếu Đan

Mã Số SV: 19110345

Họ và Tên SV thực hiện 2: Dương Đức Thắng

Mã Số SV: 19110461

Thời gian làm luận văn: Từ 27/02/2023 đến 10/07/2023.
Chuyên ngành: Công nghệ phần mềm
Tên luận văn: Xây dựng website cộng đồng chia sẻ trải nghiệm du lịch và điểm
đến
Giáo viên hướng dẫn: TS. Lê Văn Vinh
Nhiệm vụ của luận văn:
1. Lý thuyết:
Tìm hiểu về các cơng nghệ: ReactJS – NextJS, Redux, STOMP, Java Spring boot,
AWS, Socket.io, JSON Web Token.
2. Thực hành:
- Sử dụng Java Spring boot để xây dựng Backend, viết API cho các module trong

hệ thống.
- Sử dụng MySQL để lưu trữ dữ liệu người dùng của hệ thống.
- Sử dụng JSON Web Token để xác thực và ủy quyền cho hệ thống API hoạt động

tốt và hiệu quả.
- Sử dụng thư viện NextJS để thiết kế và xử lý giao diện web.

Đề cương viết luận văn:
MỤC LỤC
1. Phần MỞ ĐẦU
1.1. Tính cấp thiết của đề tài
1.2. Đối tượng nghiên cứu
1.3. Phạm vi nghiên cứu
1.4. Mục tiêu của đề tài
1.4.1. Phía người dùng
1.4.2. Phía quản trị viên
2


1.5. Ý nghĩa khoa học và thực tiễn
2. Phần NỘI DUNG
1. Chương 1: CƠ SỞ LÝ THUYẾT
1.1. Các công nghệ sử dụng ở Front – end
1.1.1. NextJS Framework
1.1.2. Redux Toolkit
1.1.3. React – query
1.1.4. Một vài thư viện hỗ trợ khác
1.2. Các công nghệ sử dụng ở Back – end
1.2.1. Java Spring Boot & Framework
1.2.2. MySQL

1.2.3. Docker
1.2.4. Các API tích hợp
2. Chương 2: KHẢO SÁT HIỆN TRẠNG
2.1. Khảo sát hiện trạng
2.2. Xác định yêu cầu
2.3. Kiến trúc chung của hệ thống
3. CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG
3.1. Mơ hình hóa u cầu
3.1.1. Lược đồ Use case
3.1.2. Mơ tả chi tiết Use case
3.2. Lược đồ lớp
3.3. Lược đồ tuần tự
3.4. Thiết kế cơ sở dữ liệu
3.5. Thiết kế giao diện
4. CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ
4.1. Cài đặt
4.2. Kiểm thử
4. Phần KẾT LUẬN
5. TÀI LIỆU THAM KHẢO

3


MỤC LỤC
KHÓA LUẬN TỐT NGHIỆP ..................................................................................1
KHÓA LUẬN TỐT NGHIỆP ..................................................................................2
PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN........................................3
PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN ..........................................1
LỜI CẢM ƠN ............................................................................................................1
ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP ...............................................................2

MỤC LỤC ................................................................................................................ 2
MỤC LỤC ..................................................................................................................4
DANH MỤC HÌNH ẢNH .........................................................................................8
DANH MỤC BẢNG BIỂU .....................................................................................11
PHẦN MỞ ĐẦU ......................................................................................................14
1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI ...................................................................... 14
2. ĐỐI TƯỢNG NGHIÊN CỨU ............................................................................ 14
3. PHẠM VI NGHIÊN CỨU ................................................................................. 14
4. MỤC TIÊU CỦA ĐỀ TÀI.................................................................................. 15
4.1. PHÍA NGƯỜI DÙNG ................................................................................ 15
4.2. PHÍA QUẢN TRỊ VIÊN ............................................................................ 15
5. Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN ........................................................ 15
PHẦN NỘI DUNG ..................................................................................................16
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT ....................................................................... 16
1.1. CÁC CÔNG NGHỆ SỬ DỤNG Ở FRONT – END ................................ 16
1.1.1. NextJS Framework .............................................................................. 16
1.1.2. Redux Toolkit....................................................................................... 16
1.1.3. React – query ....................................................................................... 17
1.1.4. Một vài thư viện hỗ trợ khác .............................................................. 18
1.2. CÁC CÔNG NGHỆ SỬ DỤNG Ở BACK – END ................................... 18
1.2.1. Java Spring Boot & Framework ........................................................ 18
1.2.2. MySQL ................................................................................................. 19
4


1.2.3. Docker ................................................................................................... 19
1.2.4. Các API tích hợp ................................................................................. 20
CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG ............................................................ 23
2.1. KHẢO SÁT HIỆN TRẠNG ...................................................................... 23
2.1.1. “HAHALOLO – MẠNG XÃ HỘI DU LỊCH TOÀN CẦU” ............. 23

2.1.2. “GODY.VN ĐI & KHÁM PHÁ THEO CÁCH CỦA BẠN” ............ 24
2.1.3. “GAFFL FIND A TRAVEL BUDDY, PLAN TRIPS AND TRAVEL
TOGETHER” .................................................................................................. 25
2.1.4. “COUCHSURFING: MEET AND STAY WITH LOCALS ALL
OVER THE WORLD” ................................................................................... 26
2.1.5. “TRIPGIRAFFE: GO EXPLORE TOGETHER” ............................ 27
2.2. XÁC ĐỊNH YÊU CẦU .............................................................................. 28
2.2.1. Yêu cầu chức năng............................................................................... 28
2.2.2. Yêu cầu phi chức năng ........................................................................ 28
2.3. KIẾN TRÚC CHUNG CỦA HỆ THỐNG ............................................... 29
CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG ............................................ 30
3.1. MƠ HÌNH HÓA YÊU CẦU ...................................................................... 30
3.1.1. Lược đồ Use case ................................................................................... 30
3.1.2. Mô tả chi tiết Use case ......................................................................... 33
3.2. LƯỢC ĐỒ LỚP.......................................................................................... 60
3.3. LƯỢC ĐỒ TUẦN TỰ................................................................................ 61
1.3.1. Chức năng “Đăng ký” ......................................................................... 61
3.3.2. Chức năng “Đăng nhập”..................................................................... 62
3.3.3. Chức năng “Điền thông tin cho lần đăng nhập đầu tiên” ............... 63
3.3.4. Chức năng “Thay đổi cảm xúc bài đăng” ......................................... 64
3.3.5. Chức năng “Thay đổi trạng thái bạn bè”.......................................... 65
5


3.3.6. Chức năng “Tạo bình luận” ............................................................... 66
3.3.7. Chức năng “Tạo bài đăng” ................................................................. 67
3.3.8. Chức năng “Xóa bình luận” ............................................................... 68
3.3.9. Chức năng “Xóa bài đăng” ................................................................. 69
3.3.10. Chức năng “Đăng xuất” ...................................................................... 70
3.3.11. Chức năng “Quên mật khẩu” ............................................................. 71

3.3.12. Chức năng “Tìm kiếm bài đăng, địa điểm, người dùng” ................ 72
3.3.13. Chức năng “Gửi tin nhắn” ................................................................. 73
3.3.14. Chức năng “Cập nhật bình luận” ...................................................... 74
3.3.15. Chức năng “Cập nhật thông tin cá nhân” ........................................ 75
3.3.16. Chức năng “Cập nhật mật khẩu” ...................................................... 76
3.3.17. Chức năng “Cập nhật bài đăng”........................................................ 77
3.3.18. Chức năng “Gợi ý kết bạn” ................................................................ 78
3.3.19. Chức năng “Đóng góp địa điểm du lịch” .......................................... 79
3.3.20. Chức năng “Tạo hành trình mới”...................................................... 80
3.3.21. Chức năng “Xóa hành trình” ............................................................. 81
3.3.22. Chức năng “Gửi u cầu tham gia hành trình” ............................... 82
3.3.23. Chức năng “Cập nhật thơng tin hành trình”.................................... 83
3.3.24. Chức năng “Cập nhật trạng thái yêu cầu tham gia hành trình” .... 84
3.3.25. Chức năng “Quản trị viên – Tạo khu vực” ....................................... 85
3.3.26. Chức năng “Quản trị viên – Tạo loại địa điểm mới” ....................... 86
3.3.27. Chức năng “Quản trị viên – Tạo địa điểm mới” .............................. 87
3.3.28. Chức năng “Quản trị viên – Tạo quản trị viên” ............................... 88
3.3.29. Chức năng “Quản trị viên – Cập nhật loại địa điểm” ..................... 89
3.3.30. Chức năng “Quản trị viên – Cập nhật địa điểm”............................. 90
6


3.3.31. Chức năng “Quản trị viên – Cập nhật trạng thái đóng góp” .......... 91
3.4. THIẾT KẾ CƠ SỞ DỮ LIỆU ................................................................... 92
1.4.1. Lược đồ thực thể kết hợp (ERD)........................................................ 92
3.4.2. Mô tả chi tiết bảng dữ liệu .................................................................. 92
3.5. THIẾT KẾ GIAO DIỆN ......................................................................... 103
1.5.1. Màn hình giao diện phía Người dùng ẩn danh và Người dùng..... 103
1.5.2. Màn hình giao diện phía Quản trị viên ........................................... 142
CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ ............................................................ 153

1.1. CÀI ĐẶT ................................................................................................... 153
1.1.1. Yêu cầu hệ thống ............................................................................... 153
1.1.2. Các bước tiến hành ............................................................................ 153
1.2. KIỂM THỬ............................................................................................... 154
1.2.1. Kế hoạch kiểm thử............................................................................. 154
1.2.2. Quy trình kiểm thử ............................................................................ 157
1.2.3. Kết quả kiểm thử ............................................................................... 158
PHẦN KẾT LUẬN ................................................................................................164
1. KẾT QUẢ ĐẠT ĐƯỢC ................................................................................... 164
1.1. VỀ LÝ THUYẾT ...................................................................................... 164
1.2. VỀ ỨNG DỤNG ....................................................................................... 164
2. ƯU ĐIỂM ......................................................................................................... 165
3. NHƯỢC ĐIỂM................................................................................................. 165
4. HƯỚNG PHÁT TRIỂN ................................................................................... 165
TÀI LIỆU THAM KHẢO ....................................................................................166

7


DANH MỤC HÌNH ẢNH
Hình 2. React query...................................................................................................17
Hình 5. Accessing AWS credentials through a user pool with an identity pool .......21
Hình 6. Website "Hahalolo - mạng xã hội du lịch toàn cầu" ....................................23
Hình 7. Website "Gody.vn đi & khám phá theo cách của bạn" ................................24
Hình 8. Website "Gaffl find a travel buddy, plan trips and travel together" ............25
Hình 9. Website "Couchsurfing: Meet and stay with locals all over the world" ......26
Hình 10. Website "Tripgiraffe: Go explore together"...............................................27
Hình 11. Kiến trúc chung của hệ thống sử dụng React & Spring Boot ....................29
Hình 12. Use cases phía Người dùng ........................................................................30
Hình 13. Chi tiết use cases phía Người dùng ............................................................31

Hình 14. Use cases phía Quản trị viên ......................................................................32
Hình 15. Chi tiết use cases phía Quản trị viên ..........................................................33
Hình 16. Class diagram .............................................................................................60
Hình 17. Sequence "Đăng ký" ..................................................................................61
Hình 18. Sequence "Đăng nhập" ...............................................................................62
Hình 19. Sequence "Điền thơng tin cho lần đăng nhập đầu tiên" .............................63
Hình 20. Sequence "Thay đổi cảm xúc bài đăng".....................................................64
Hình 21. Sequence "Thay đổi trạng thái bạn bè" ......................................................65
Hình 23. Sequence "Tạo bình luận" ..........................................................................66
Hình 24. Sequence "Tạo bài đăng" ...........................................................................67
Hình 25. Sequence "Xóa bình luận" .........................................................................68
Hình 26. Sequence "Xóa bài đăng" ...........................................................................69
Hình 27. Sequence "Đăng xuất"................................................................................70
Hình 28. Sequence "Quên mật khẩu" ........................................................................71
Hình 29. Sequence "Tìm kiếm bài đăng, địa điểm, người dùng" .............................72
Hình 30. Sequence "Gửi tin nhắn" ............................................................................73
Hình 32. Sequence "Cập nhật bình luận" ..................................................................74
Hình 33. Sequence "Cập nhật thơng tin cá nhân" .....................................................75
Hình 34. Sequence "Cập nhật mật khẩu" ..................................................................76
Hình 35. Sequence "Cập nhật bài đăng" ...................................................................77
8


Hình 39. Sequence "Gợi ý kết bạn" ..........................................................................78
Hình 41. Sequence "Đóng góp địa điểm du lịch" .....................................................79
Hình 42. Sequence "Tạo hành trình mới" .................................................................80
Hình 43. Sequence "Xóa hành trình" ........................................................................81
Hình 44. Sequence "Gửi yêu cầu tham gia hành trình" ............................................82
Hình 45. Sequence "Cập nhật thơng tin hành trình" .................................................83
Hình 46. Sequence "Cập nhật trạng thái yêu cầu tham gia hành trình" ....................84

Hình 50. Sequence "Quản trị viên - tạo khu vực" .....................................................85
Hình 51. Sequence "Quản trị viên - Tạo loại địa điểm mới" ....................................86
Hình 52. Sequence "Quản trị viên - Tạo địa điểm mới" ...........................................87
Hình 53. Sequence "Quản trị viên - Tạo quản trị viên" ............................................88
Hình 55. Sequence "Quản trị viên - Cập nhật loại địa điểm" ...................................89
Hình 56. Sequence "Quản trị viên - Cập nhật địa điểm" ..........................................90
Hình 60. Sequence "Quản trị viên – Cập nhật trạng thái đóng góp" ........................91
Hình 61. Database design ..........................................................................................92
Hình 63. Thanh điều hướng của Người dùng ẩn danh ............................................106
Hình 64. Thanh điều hướng của Người dùng .........................................................106
Hình 65. Chân trang ................................................................................................108
Hình 66. Trang trải nghiệm .....................................................................................108
Hình 67. Trang hỏi đáp ...........................................................................................110
Hình 68. Trang hành trình .......................................................................................111
Hình 69. Trang khám phá........................................................................................113
Hình 70. Trang đăng nhập .......................................................................................114
Hình 71. Trang đăng ký ..........................................................................................115
Hình 72. Trang quên mật khẩu ................................................................................116
Hình 73. Trang đặt lại mật khẩu..............................................................................116
Hình 74. Trang cá nhân chi tiết ...............................................................................118
Hình 75. Trang cá nhân danh sách bài đăng ...........................................................119
Hình 76. Trang cá nhân danh sách hình ảnh ...........................................................120
Hình 77. Trang cá nhân danh sách bạn bè ..............................................................120
Hình 78. Modal dialog tạo bài đăng ........................................................................121
9


Hình 79. Modal dialog chi tiết bài đăng..................................................................122
Hình 80. Trang xem bài đăng chi tiết......................................................................122
Hình 81. Trang cấu hình tài khoản ..........................................................................124

Hình 82. Trang cấu hình ngơn ngữ .........................................................................124
Hình 83. Trang giao diện nhắn tin ..........................................................................125
Hình 84. Trang giao diện phịng nhắn tin ...............................................................126
Hình 85. Modal dialog tìm kiếm .............................................................................127
Hình 86. Trang giao diện tìm kiếm .........................................................................127
Hình 87. Trang 404 .................................................................................................128
Hình 88. Trang thơng tin địa điểm ..........................................................................129
Hình 89. Trang danh sách địa điểm du lịch ............................................................130
Hình 90. Trang danh sách bài đăng kinh nghiệm du lịch .......................................130
Hình 91. Trang danh sách bài đăng hỏi đáp du lịch ................................................131
Hình 92. Trang danh sách hình ảnh địa điểm du lịch .............................................132
Hình 93. Trang đề xuất kết bạn ...............................................................................132
Hình 94. Trang tạo hành trình .................................................................................133
Hình 95. Trang cập nhật thơng tin hành trình .........................................................134
Hình 96. Trang hành trình chi tiết ...........................................................................136
Hình 97. Trang đóng góp địa điểm .........................................................................138
Hình 98. Trang danh sách các địa điểm đã đóng góp .............................................140
Hình 99. Trang danh sách thơng báo ......................................................................141
Hình 101. Trang quản lý tài khoản..........................................................................143
Hình 102. Trang quản lý người dùng ......................................................................144
Hình 103. Trang quản lý loại khu vực ....................................................................145
Hình 105. Trang quản lý địa điểm ..........................................................................146
Hình 106. Trang quản lý bài đăng ...........................................................................146
Hình 107. Trang cá nhân quản trị viên....................................................................147
Hình 108. Trang quản lý khu vực ...........................................................................149
Hình 109. Trang quản lý danh sách bài đóng góp ..................................................150
Hình 110. Trang duyệt bài đóng góp ......................................................................151
Hình 111. Configuration IntelliJ IDEA...................................................................153
10

DANH MỤC BẢNG BIỂU
Bảng 6. Mơ tả Use case "Tìm kiếm" .........................................................................33
Bảng 7. Mô tả Use case "Đăng ký" ...........................................................................34
Bảng 9. Mô tả Use case "Đăng nhập" .......................................................................36
Bảng 10. Mô tả Use case "Quên mật khẩu" ..............................................................37
Bảng 14. Mô tả Use case "Cập nhật thông tin cá nhân" ...........................................39
Bảng 15. Mô tả Use case "Tạo bài đăng"..................................................................39
Bảng 16. Mô tả Use case "Cập nhật bài đăng" .........................................................40
Bảng 17. Mô tả Use case "Xóa bài đăng" .................................................................41
Bảng 18. Mơ tả Use case "Thay đổi cảm xúc bài đăng" ...........................................42
Bảng 19. Mô tả Use case "Tạo bình luận" ................................................................43
Bảng 20. Mơ tả Use case "Cập nhật bình luận" ........................................................44
Bảng 21. Mơ tả Use case "Xóa bình luận" ................................................................45
Bảng 22. Mơ tả Use case "Thay đổi trạng thái bạn bè" ............................................46
Bảng 24. Mô tả Use case "Tạo phịng chat"..............................................................46
Bảng 25. Mơ tả Use case "Gửi tin nhắn" ..................................................................47
Bảng 27. Mô tả Use case "Đề xuất kết bạn" .............................................................48
Bảng 28: Mô tả Use case “Đóng góp địa điểm du lịch” ...........................................48
Bảng 31: Mơ tả Use case "Tạo hành trình mới" .......................................................49
Bảng 32: Mơ tả Use case "Cập nhật thơng tin hành trình" .......................................50
Bảng 33: Mơ tả Use case "Xóa hành trình" ..............................................................50
Bảng 34: Mơ tả Use case "Gửi yêu cầu tham gia hành trình" ..................................51
Bảng 35: Mô tả Use case "Cập nhật yêu cầu tham gia hành trình" ..........................52
Bảng 36. Mơ tả Use case "Tạo tài khoản mới" .........................................................52
Bảng 38. Mô tả Use case "Cập nhật thông tin địa điểm" ..........................................53
Bảng 39. Mô tả Use case "Tạo loại địa điểm mới" ...................................................54
Bảng 41. Mô tả Use case "Cập nhật thông tin địa điểm" ..........................................55
Bảng 42. Mô tả Use case "Tạo địa điểm mới" ..........................................................56
Bảng 44. Mô tả Use case "Tạo khu vực mới" ...........................................................57

Bảng 46. Mơ tả Use case "Xóa người dùng" ............................................................58
Bảng 50. Mô tả chi tiết bảng dữ liệu Areas...............................................................92
11


Bảng 51. Mô tả chi tiết bảng dữ liệu Chat_room_members .....................................93
Bảng 52. Mô tả chi tiết bảng dữ liệu Chat_rooms ....................................................93
Bảng 53. Mô tả chi tiết bảng dữ liệu Comments ......................................................94
Bảng 54. Mô tả chi tiết bảng dữ liệu Friends ............................................................94
Bảng 56. Mô tả chi tiết bảng dữ liệu Hashtags .........................................................95
Bảng 57. Mô tả chi tiết bảng dữ liệu Messengers .....................................................95
Bảng 58. Mô tả chi tiết bảng dữ liệu Place_categories .............................................96
Bảng 59. Mô tả chi tiết bảng dữ liệu Places ..............................................................96
Bảng 61. Mô tả chi tiết bảng dữ liệu Post_images....................................................97
Bảng 62. Mô tả chi tiết bảng dữ liệu Posts ...............................................................97
Bảng 64. Mô tả chi tiết bảng dữ liệu Users ...............................................................98
Bảng 65: Mô tả chi tiết bảng dữ liệu Notifications ...................................................99
Bảng 67: Mô tả chi tiết bảng dữ liệu Trip_days........................................................99
Bảng 68: Mô tả chi tiết bảng dữ liệu Trip_members ..............................................100
Bảng 69: Mô tả chi tiết bảng dữ liệu Trip_place_fees ............................................100
Bảng 70: Mô tả chi tiết bảng dữ liệu Trip_places ...................................................101
Bảng 71: Mô tả chi tiết bảng dữ liệu Trip_reviews ................................................102
Bảng 72. Danh sách màn hình sử dụng phía Người dùng ......................................104
Bảng 73. Các đối tượng trên thanh điều hướng ......................................................107
Bảng 74. Các đối tượng trên chân trang..................................................................108
Bảng 75. Các đối tượng trên trang trải nghiệm .......................................................108
Bảng 76. Các đối tượng trên trang hỏi đáp .............................................................110
Bảng 77. Các đối tượng trên trang hành trình .........................................................112
Bảng 78. Các đối tượng trên trang khám phá .........................................................113
Bảng 79. Các đối tượng trên trang đăng nhập ........................................................114

Bảng 80. Các đối tượng trên trang đăng ký ............................................................115
Bảng 81. Các đối tượng trên trang quên mật khẩu .................................................116
Bảng 82. Các đối tượng trên trang đặt lại mật khẩu ...............................................117
Bảng 83. Các đối tượng trên trang cá nhân chi tiết .................................................118
Bảng 84. Các đối tượng trên trang cá nhân danh sách bài đăng .............................119
Bảng 85. Các đối tượng trên trang cá nhân danh sách hình ảnh .............................120
12


Bảng 86. Các đối tượng trên trang cá nhân danh sách bạn bè ................................120
Bảng 87. Các đối tượng trên modal dialog tạo bài đăng .........................................121
Bảng 88. Các đối tượng trên trang xem bài đăng chi tiết .......................................122
Bảng 89. Các đối tượng trên trang cấu hình tài khoản............................................124
Bảng 90. Các đối tượng trên trang giao diện nhắn tin ............................................125
Bảng 91. Các đối tượng trên trang giao diện phòng nhắn tin .................................126
Bảng 92. Các đối tượng trên trang giao diện tìm kiếm ...........................................128
Bảng 94. Các đối tượng trên trang thông tin địa điểm ............................................129
Bảng 95. Các đối tượng trên trang danh sách địa điểm du lịch ..............................130
Bảng 96. Các đối tượng trên trang danh sách bài đăng kinh nghiệm du lịch .........131
Bảng 97. Các đối tượng trên trang danh sách bài đăng hỏi đáp du lịch .................131
Bảng 98. Các đối tượng trên trang danh sách hình ảnh địa điểm du lịch ...............132
Bảng 99. Các đối tượng trên trang đề xuất kết bạn .................................................132
Bảng 100. Các đối tượng trên trang tạo hành trình .................................................133
Bảng 101. Các đối tượng trên trang cập nhật thông tin hành trình .........................134
Bảng 102. Các đối tượng trên trang hành trình chi tiết ...........................................136
Bảng 103. Các đối tượng trên trang đóng góp địa điểm .........................................138
Bảng 104. Các đối tượng trên trang danh sách các địa điểm đã đóng góp .............140
Bảng 105. Các đối tượng trên trang danh sách thông báo ......................................141
Bảng 106. Danh sách màn hình sử dụng phía Quản trị...........................................142
Bảng 107. Các đối tượng trên trang quản lý tài khoản ...........................................143

Bảng 108. Các đối tượng trên trang quản lý người dùng ........................................144
Bảng 109. Các đối tượng trên trang quản lý loại khu vực ......................................145
Bảng 111. Các đối tượng trên trang quản lý địa điểm ............................................146
Bảng 112. Các đối tượng trên trang quản lý bài đăng ............................................147
Bảng 113. Các đối tượng trên trang cá nhân quản trị viên .....................................147
Bảng 114. Các đối tượng trên trang quản lý khu vực .............................................149
Bảng 115. Các đối tượng trên trang quản lý danh sách bài đóng góp ....................150
Bảng 116. Các phần tử trên trang duyệt bài đóng góp ............................................151
Bảng 118. Kết quả kiểm thử chức năng phía Người dùng ......................................158
Bảng 119. Kết quả kiểm thử chức năng phía Quản trị viên ....................................161
13


PHẦN MỞ ĐẦU
1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Hiện nay, mạng xã hội rất phổ biến không chỉ trên thế giới mà còn ở Việt Nam.
Và đặc biệt, các doanh nghiệp ngày nay đã sử dụng mạng xã hội để quảng bá sản
phẩm, dịch vụ và tăng sự nhận diện thương hiệu. Nhiều đơn vị kinh doanh dịch
vụ du lịch đã bắt đầu tận dụng thế mạnh của nguồn tài nguyên này để tiệm cận
gần hơn với du khách.
Thế nhưng theo tổ chức Diễn đàn Kinh tế thế giới (WEF), du lịch là một trong
những ngành bị ảnh hưởng nặng nề nhất trong năm 2020 do ảnh hưởng của đại
dịch Covid – 19. Nhận thức được thực tiễn ấy và với mong muốn hỗ trợ mọi
người có thể tiếp cận nguồn thông tin đáng tin cậy về địa điểm du lịch và khiến
mọi người trở nên gần gũi hơn với hướng tiếp cận là mạng xã hội, nhóm chúng
em quyết định chọn phát triển chủ đề tiểu luận chuyên ngành: “XÂY DỰNG
WEBSITE CỘNG ĐỒNG CHIA SẺ TRẢI NGHIỆM DU LỊCH VÀ ĐIỂM
ĐẾN”.

2. ĐỐI TƯỢNG NGHIÊN CỨU

Để hoàn thiện đề tài này, nhóm chúng em tiến hành nghiên cứu nhu cầu thực tế
của mỗi người trong việc tham gia mạng xã hội, cũng như nhu cầu tìm bạn đồng
hành, tìm vị trí du lịch hợp lý, ... Đồng thời chúng em cũng nghiên cứu các cơng
nghệ để có thể xây dựng hệ thống hoàn chỉnh nhất, bao gồm:
 Tập trung nghiêm cứu Restful API, Spring boot để xây dựng nên hệ thống các
API.
 Sử dụng Cơ sở dữ liệu MySQL để lưu trữ dữ liệu cho hệ thống.
 Về phần hiển thị cho người sử dụng cuối nhóm chúng em tiến hành nghiên
cứu: ReactJS và framework hỗ trợ là NextJS, Redux và một số thư viện khác.

3. PHẠM VI NGHIÊN CỨU
Ở đề tài này, chúng em chủ yếu xây dựng một webiste cho phép người dùng sử
dụng như một mạng xã hội thơng thường, ngồi ra cịn hỗ trợ người dùng tiếp
cận với một hành trình du lịch thú vị như: chia sẻ khoảnh khắc – trải nghiệm thực
tế, đặt câu hỏi thắc mắc về du lịch sẽ được tư vấn, khám phá khơng những vị trí
du lịch mà cịn những địa điểm ăn uống vui chơi được người dùng khác chia sẻ,
14


xây dựng một kế hoạch du lịch và tìm kiếm bạn đồng hành, cùng với những tính
năng liên quan đến tài khoản người dùng và nhiều tính năng khác.

4. MỤC TIÊU CỦA ĐỀ TÀI
4.1. PHÍA NGƯỜI DÙNG
Người dùng có thể thực hiện các chức năng:
- Đăng kí, đăng nhập với tài khoản email, mật khẩu.
- Xem các bài post chia sẻ, bài post hỏi đáp.
- Tuỳ chọn tìm kiếm bài viết, bạn bè, địa điểm du lịch, ...
- Tương tác với các bài viết: lượt tương tác, bình luận.
- Quản lí trang cá nhân, hình ảnh, bạn bè.

- Tìm kiếm khám phá địa điểm, tổng hợp hiển thị thông tin các bài viết chia
sẻ dựa trên hashtag, đóng góp địa điểm phát triển cộng đồng.
- Tạo một cuộc hành trình và tìm kiếm người đồng hành.
4.2. PHÍA QUẢN TRỊ VIÊN
Quản trị viên có thể thực hiện các chức năng:
- Quản lý người dùng, tài khoản.
- Quản lý các địa điểm trong hệ thống, các bài đóng góp địa điểm.
- Thống kê báo cáo các hoạt động của trang web.

5. Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN
Sau khi hoàn thiện đề tài, nhóm chúng em sẽ rèn luyện, tiếp thu được nhiều kỹ
năng và kiến thức mới, đặc biệt là về những công nghệ mới đang được sử dụng
hiện nay. Nâng cao tinh thần nghiên cứu và sáng tạo, cống hiến vì cộng đồng.
Khi đề tài chúng em được áp dụng vào thực tế, việc sử dụng một mạng xã hội
mang thiên hướng du lịch sẽ trở nên phổ biến hơn, tiếp cận được nhiều lứa tuổi
và giúp phát triển ngành du lịch trong thời gian sau đại dịch Covid như hiện nay.
Từ đó, có thể quảng bá, xây dựng hình ảnh du lịch ở khắp mọi nơi trên thế giới
dựa trên chính hình ảnh mà người dùng đã đóng góp.

15


PHẦN NỘI DUNG
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
1.1. CÁC CÔNG NGHỆ SỬ DỤNG Ở FRONT – END
1.1.1. NextJS Framework
1.1.1.1. Khái niệm
NextJs là một framework dùng để phát triển để có thể dễ dàng tạo được một
ứng dụng React theo tư tưởng Isomophic, có bao gồm chức năng Server Side
Redering (SSR). NextJs sẽ cung cấp một số thứ như [1]:

- Hiệu năng tốt hơn so với ứng dụng CSR
- Mang lại khả năng SEO tốt hơn mà CSR khơng có.
1.1.1.2. Tính năng của Nextjs
Tính năng mà Next.Js mang lại bao gồm: Server – side rendering, static site
generation, single – page application, phát triển ứng dụng web nhanh hơn và
tối ưu trang web
1.1.1.3. Ưu điểm của Nextjs
NextJS cung cấp cho chúng ta một vài ưu điểm sau: Trải nghiệm người dùng
tốt hơn, làm việc với cơ chế Static Site Generation, Server Side Rendering và
Client Side Rendering, hỗ trợ nền React, hỗ trợ phát triển tính năng nhanh
chóng cho việc cấu hình.
1.1.1.4. Nhược điểm của Nextjs
Bên cạnh những ưu điểm, nextjs còn tồn tại một vài nhược điểm như: Ít plug
– in thích ứng. Và next.js bị giới hạn bởi việc chỉ sử dụng bộ định tuyến trên
tệp của nó, khơng thể nào sửa đổi cách nó giao dịch với các tuyến. Vì vậy,
để sử dụng định tuyến động, cần làm việc thêm với Node.js máy chủ.
1.1.2. Redux Toolkit
1.1.2.1. Khái niệm
Redux là một thư viện JavaScript để quản lý trạng thái ứng dụng. Redux –
toolkit là một package được sinh ra nhằm giải quyết phần lớn những vấn đề
khó khăn trong việc cài đặt redux, giúp viết code redux nhanh gọn, hoàn
chỉnh theo một quy chuẩn thống nhất [3].

16