Xây dựng trang web đặt tour du lịch trực tuyến sử dụng công nghệ mern stack

Tính cấp thiết của đề tài

Việt Nam sở hữu nguồn tài nguyên du lịch phong phú, bao gồm thiên nhiên hùng vĩ, danh lam thắng cảnh đẹp và di tích lịch sử phong phú Bên cạnh đó, nền ẩm thực đặc sắc cũng góp phần tạo nên giá trị lớn cho ngành du lịch nước nhà.

Công nghệ ngày càng phát triển, kéo theo nhu cầu giải trí và du lịch của mọi người tăng cao để xua tan căng thẳng sau những ngày làm việc Điều này thúc đẩy nhu cầu tìm kiếm những công cụ hỗ trợ, giúp dễ dàng tiếp cận các tour du lịch và khám phá những vùng đất mới mà không phải lo lắng quá nhiều.

Mặc dù một số địa điểm du lịch mới phát triển vẫn còn gặp khó khăn trong việc quảng bá và truyền thông, dẫn đến việc du khách chưa thể tiếp cận đầy đủ các điểm đến Tại tỉnh Khánh Hòa, trong khi Nha Trang đã trở thành điểm đến nổi tiếng, vẫn còn nhiều tài nguyên du lịch tiềm năng khác mà chưa được khai thác, như đảo Bình.

Ba, Bình Hưng, Bãi Dài và vùng cao Khánh Sơn đều có tiềm năng du lịch lớn với đầy đủ điều kiện phát triển, nhưng lượng du khách thực tế vẫn còn hạn chế.

Du lịch tự phát đang gặp nhiều thách thức trong quản lý tour, với việc các nhà phát hành tour thiếu hệ thống cụ thể và vẫn xử lý thủ công nhiều khâu Điều này dẫn đến các sự cố trong quá trình đặt tour, đặc biệt là liên quan đến vấn đề tiền cọc và quản lý tour.

Để du khách dễ dàng tiếp cận các tour du lịch tại địa phương, cần xây dựng hệ thống thông tin rõ ràng và dễ sử dụng Đồng thời, các nhà tổ chức tour cần áp dụng công nghệ quản lý hiệu quả để theo dõi và điều phối các hoạt động du lịch, nhằm nâng cao trải nghiệm cho khách hàng.

Giải pháp cho bài toán này là phát triển một hệ thống cho phép du khách dễ dàng truy cập thông tin về các tour du lịch và thực hiện đặt tour nhanh chóng Đồng thời, những người tổ chức tour cũng cần một công cụ hiệu quả để quản lý hoạt động của mình.

Khảo sát hiện trạng

Vietnam Tourist

Hình 1.1 Giao diện trang chủ của Vietnam Tourist

• Là một hệ thống lớn, hỗ trợ cả tour trong và ngoài nước

• Có thể đặt tour mà không cần đăng kí tài khoản

Có chatbox để hỗ trợ tư vấnHình 2 0.1

• Đổ quá nhiều thông tin lên cũng một trang (thông tin tour, tin tuyển dụng…), màu sắc tưởng phản cao, quá nhiều quảng cáo tạo cảm giác rối mắt

• Tốc độ chuyển trang còn khá chậm

Saigon Star Travel

Hình 1.2 Giao diện trang chủ của Saigon Star Trevel

• Màu sắc hài hòa, dễ nhìn

• Hỗ trợ đa dạng dịch vụ

• Có thể đặt tour mà không cần đăng ký tài khoản

• Có chatbot hỗ trợ khách hàng

• Có khá nhiều nội dung thừa (vouchers đã hết hạn, thông tin tuyển dụng hết hạn,…)

Tour đảo Bình Hưng

Hình 1.3 Giao diện trang chủ Tour đảo Bình Hưng Đây là một trang web của một tổ chức địa phương

• Giao diện đơn giản, trực quan, dễ dàng nắm bắt thông tin

• Không có chi tiết dư thừa

• Giao diện chưa thực sự thu hút

• Chưa thực sự làm được chức năng đặt tour online, muốn đặt tour phải gọi điện thoại hoặc liên lạc qua Zalo.

Công nghệ lập trình

- Sử dụng ExpressJS và NodeJS để viết server backend và ReactJS phía Frontend

- Sử dụng một số công nghệ hỗ trợ để tối ưu hóa hệ thống: Redux và Ant Design

- Sử dụng MongoDB để tạo nên cơ sở dữ liệu chính cho project

SỞ LÝ THUYẾT

Giới thiệu về MERN Stack

Technical stack là gì? Trong quá trình phát triển sản phẩm khởi nghiệp, việc lựa chọn một technical stack phù hợp, như LAMP Stack hay MEAN Stack, đóng vai trò quan trọng Những thuật ngữ này thường xuất hiện trên mạng và cần được hiểu rõ để đảm bảo sự thành công của dự án.

2.1.1 Stack là gì, tại sao nó ra đời?

Để phát triển một ứng dụng hoàn chỉnh, việc viết code là chưa đủ; cần phải lưu trữ thông tin trong cơ sở dữ liệu Sau khi hoàn tất phần code, bước tiếp theo là triển khai (deploy) ứng dụng, tức là đưa code lên một môi trường để có thể chạy được.

Một chương trình hoàn thiện không chỉ bao gồm mã nguồn, mà còn cần có nền tảng hệ điều hành và các phần mềm đi kèm như web server và cơ sở dữ liệu Tất cả những thành phần này được kết hợp lại để hình thành một technical stack hoàn chỉnh.

Technical Stack, hay còn gọi là solution stack, là một tập hợp các phần mềm và công nghệ kết hợp với nhau để tạo thành nền tảng cho ứng dụng hoạt động hiệu quả.

Hình 2.1 Các bộ phận cấu thành một stack [1]

- Một stack cũng khá nổi trong vài năm trở lại đây là MERN stack

The MERN stack is a powerful open-source combination of technologies, all centered around JavaScript, that includes MongoDB/MySQL, ExpressJS, React/React Native, and NodeJS It is widely used for developing Single Page Applications (SPAs), making it one of the most popular choices in modern web development.

Stack này không hoàn toàn đúng chuẩn vì thiếu hệ điều hành NodeJS được sử dụng để viết mã server-side và có khả năng hoạt động như một web server Thông thường, người ta thường kết hợp thêm nginx làm proxy server để tối ưu hóa hiệu suất.

- MongoDB là một cơ sở dữ liệu mã nguồn mở và là cơ sở dữ liệu NoSQL(*) hàng đầu, được hàng triệu người sử dụng MongoDB được viết bằng C++

MongoDB là một cơ sở dữ liệu đa nền tảng, hoạt động dựa trên các khái niệm Collection và Document Nó nổi bật với hiệu suất cao, tính khả dụng tốt và khả năng mở rộng dễ dàng.

NoSQL là một loại cơ sở dữ liệu mã nguồn mở không sử dụng Transact-SQL để truy vấn thông tin Từ viết tắt NoSQL có thể hiểu là None-Relational SQL hoặc Not-Only SQL Cơ sở dữ liệu này được phát triển dựa trên ngôn ngữ Javascript.

Framework với kiểu dữ liệu JSON (Cú pháp của JSON là “key:value”)

NoSQL ra đời nhằm khắc phục những hạn chế của mô hình dữ liệu quan hệ RDBMS, bao gồm tốc độ, tính năng, khả năng mở rộng và bộ nhớ cache.

- Một số thuật ngữ thường hay sử dụng:

Trường _id là một thành phần bắt buộc trong mỗi document của MongoDB, đại diện cho một giá trị duy nhất và có thể được coi là khóa chính Khi thêm mới một document, MongoDB sẽ tự động tạo ra một _id duy nhất cho document đó trong cơ sở dữ liệu.

• Collection – Là nhóm của nhiều document trong MongoDB

Collection là một bảng tương ứng trong cơ sở dữ liệu RDBMS (Hệ quản trị cơ sở dữ liệu quan hệ), nằm trong một cơ sở dữ liệu duy nhất Các collection không yêu cầu định nghĩa trước các cột, hàng hay kiểu dữ liệu.

• Cursor – Đây là một con trỏ đến tập kết quả của một truy vấn Máy khách có thể lặp qua một con trỏ để lấy kết quả

Cơ sở dữ liệu (Database) trong MongoDB là nơi lưu trữ các Collection, tương tự như các bảng trong hệ thống cơ sở dữ liệu RDMS Mỗi Database được lưu trữ trong một tập tin riêng biệt trên bộ nhớ vật lý, và một máy chủ MongoDB có khả năng chứa nhiều Database khác nhau.

• Document – Một bản ghi thuộc một Collection thì được gọi là một

Document Các Document lần lượt bao gồm các trường tên và giá trị

• Field – Là một cặp name – value trong một document Một document có thể có không hoặc nhiều trường Các trường giống các cột ở cơ sở dữ liệu quan hệ

JSON, viết tắt của JavaScript Object Notation, là định dạng văn bản đơn giản dễ đọc cho con người, dùng để biểu diễn dữ liệu có cấu trúc Hiện nay, JSON được hỗ trợ bởi nhiều ngôn ngữ lập trình khác nhau.

Chỉ số (Index) là một cấu trúc dữ liệu đặc biệt, chứa một phần nhỏ của các tập dữ liệu để dễ dàng quét và sắp xếp theo giá trị của các fields cụ thể Khi có chỉ số, MongoDB có thể phân tích các truy vấn một cách hiệu quả hơn, tránh phải quét tất cả các documents của collection để chọn ra những document phù hợp Điều này giúp giảm thiểu khối lượng dữ liệu cần xử lý, tăng tốc độ truy vấn và cải thiện hiệu suất của hệ thống.

MongoDB hoạt động như một dịch vụ ngầm, luôn mở cổng 27017 để tiếp nhận và xử lý các yêu cầu truy vấn từ các ứng dụng.

Các công nghệ hỗ trợ khác

Redux.js là thư viện JavaScript giúp quản lý trạng thái ứng dụng hiệu quả Dựa trên tư tưởng của ngôn ngữ Elm và kiến trúc Flux do Facebook phát triển, Redux thường được sử dụng kết hợp hoàn hảo với React (bao gồm ReactJs và React Native).

Hình 2.9 Nguyên lý hoạt động Redux[7]

Redux được xây dựng dựa trên ba nguyên lý cơ bản Đầu tiên, nó sử dụng một nguồn dữ liệu tin cậy duy nhất, với trạng thái của toàn bộ ứng dụng được lưu trữ trong một cây đối tượng trong Store duy nhất Thứ hai, trạng thái chỉ được phép đọc, và cách duy nhất để thay đổi trạng thái là phát một Action, tức là một đối tượng mô tả những gì xảy ra Cuối cùng, các thay đổi chỉ được thực hiện thông qua các hàm thuần túy, gọi là Reducer, để xác định cách mà trạng thái được biến đổi bởi Action.

Redux bao gồm bốn thành phần chính: đầu tiên là Action, nơi chứa thông tin được gửi từ ứng dụng đến Store dưới dạng một object mô tả sự kiện đã xảy ra Thứ hai là Reducer, xác định cách thay đổi State Thứ ba là Store, quản lý State và cho phép truy cập thông qua getState(), cập nhật State qua dispatch(action), và đăng ký listener qua subscribe(listener) Cuối cùng, View là thành phần hiển thị dữ liệu từ Store.

- Ant là tập hợp các components của React được xây dựng theo chuẩn thiết kế của Ant UED Team

- Tương tự như chuẩn Material Design, Ant cung cấp hầu hết các component thông dụng trong ứng dụng web hiện đại, như Layout, Button, Icon, DatePicket, v.v…

- Bên cạnh đó Ant cũng có những component riêng thú vị, như LocaleProvider cho phép bạn thay đổi ngôn ngữ trên toàn ứng dụng.[7]

Hình 2.11 Ant Design cho ReactJS [7]

NHẬN, PHÂN TÍCH VÀ MÔ HÌNH HÓA YÊU CẦU

Phân tích yêu cầu đề tài

3.1.1 Tên đề tài: XÂY DỰNG TRANG WEB ĐẶT TOUR ONLINE BẰNG

3.1.2 Chức năng của trang web Đây là một website giới thiệu những tour du lịch đến những người có nhu cầu đi du lịch và có thể đặt tour online Có các chức năng sau:

- Đăng ký, đăng nhập phân quyền

- Cập nhật thông tin cá nhân

- Quản lý thông tin cá nhân

- Xem danh sách, chi tiết các tour

- Xem danh sách chi tiết các bài viết về du lịch

- Tìm kiếm tour du lịch

- Tìm kiếm bài đăng về các địa điểm du lịch

- Tương tác với đơn vị phát hành tour thông qua tin nhắn

- Hiển thị danh sách, chi tiết các tour

- Hiển thị danh sách, chi tiết các bài viết về địa điểm du lịch

- Xử lý quy trình đặt tour

- Hiển thị danh sách lịch sử đặt tour

- Xem, thêm, xóa, sửa danh sách tour, danh sách bài viết thư viện du lịch

3.1.3.1 Thiết bị và phần mềm xây dựng trang web:

- Máy tính có cấu hình tối thiểu Core i3, RAM 4Gb

- Phần mềm Visual Studio Code

- Máy tính có cài Nodejs

Guest: là những người có nhu cầu đặt tour online nhưng không cần đăng ký tài khoản Các chức năng chính:

- Tìm kiếm thông tin tour

- Tìm kiếm thông tin các bài viết về địa điểm du lịch

- Xem danh sách, chi tiết các tour

- Xem danh sách, chi tiết các bài viết về địa điểm du lịch

- Nhắn tin để nhận hỗ trợ

- Nhận thông báo về email nếu đặt tour thành công

Người dùng là những cá nhân có nhu cầu tìm kiếm và mua sắm các khóa học cần thiết từ hệ thống Do đó, hệ thống cần phải có các chức năng hỗ trợ việc tìm kiếm và giao dịch mua khóa học một cách hiệu quả.

- Cập nhật thông tin cá nhân

- Xem danh sách lịch sử tour đã đặt

- Tìm kiếm thông tin tour

- Tìm kiếm thông tin các bài viết về địa điểm du lịch

- Xem danh sách, chi tiết các tour

- Xem danh sách, chi tiết các bài viết về địa điểm du lịch

- Nhắn tin để nhận hỗ trợ

- Quản lý thông tin cá nhân

- Nhận thông báo về email nếu đặt tour thành công

Admin là những người có trách nhiệm quản lý danh sách người hướng dẫn, lĩnh vực và chủ đề của các khóa học, cũng như theo dõi trạng thái của chúng Để thực hiện nhiệm vụ này, họ cần có các chức năng quản lý hiệu quả và linh hoạt.

- Quản lý danh sách tour

- Quản lý danh sách bài viết về địa điểm du lịch

- Quản lý danh sách người dùng

Mô hình hóa yêu cầu

- Usecase Diagram người dùng cuối:

Hình 3.1 Usecase Diagram người dùng cuối

Đặc tả chi tiết usecase

Bảng 3.1 Thống kê nghiệp vụ đối với Guest

STT Tên nghiệp vụ Loại nghiệp vụ Mã quy định Ghi chú

1 Sign up Lưu trữ QD-SU

2 Search tour Tra cứu QD-ST

3 Book tour Xử lý QD-BT

4 View tour detail Tra cứu QD-VTD

5 View list tour Tra cứu QD-VLT

7 Search tour gallery Tra cứu QD-STG

Bảng 3.2 Thống kê, mô tả quy định cho từng nghiệp vụ của Guest

Tên quy định Mô tả Ghi chú

1 QD-SU Quy định về Sign up của Guest 1 Người dùng sẽ thao tác với biểu mẫu sign up

• Nhập thông tin tài khoản

2 Người dùng có thể sử dụng đăng nhập với google

• Nhấn nút đăng nhập với google

2 QD-ST Quy định Search tour của Guest

1.Người dùng sẽ thao tác với biểu mẫu tìm kiếm

• Nhập nội dung tìm kiếm vào ô input

• Nhấn nút search hoặc bấm nút enter trên bàn phím

3 QD-BT Quy định Book tour 1.Người dùng sẽ thao tác ở trang detail tour

• Điền đầy đủ thông tin ở biểu mẫu đặt tour

• Nhấn nút đồng ý điều khoản

• Nút book sẽ được hiển thị

Quy định View tour detail của Guest 1.Người dùng sẽ thao tác ở trang detail tour

• Nhấn vào tour bất kỳ

5 QD-VLT Quy định View list tour của Guest 1.Người dùng sẽ thao tác ở trang view list tour

• Xem danh sách các tour

Quy định View detail tour gallery của Guest

1.Người dùng sẽ thao tác ở trang detail tour gallery

• Hiển thị danh sách các bài viết về tour du lịch

• Nhấn vào bài viết bất kỳ

• Chuyển sang trang detail tour gallery

• Xem chi tiết bài viết này

7 QD-STG Quy định Search tour gallery của Guest

1.Người dùng sẽ thao tác ở form search trong trang detail tour gallery

• Nhập thông tin tìm kiếm vào ô input

• Hiển thị danh sách các bài viết liên quan tour du lịch

Bảng 3.3 Thống kê nghiệp vụ đối với User

STT Tên nghiệp vụ Loại nghiệp vụ Mã quy định Ghi chú

1 Sign up Lưu trữ QD-SU

2 Search tour Tra cứu QD-ST

3 Book tour Xử lý QD-BT

4 View tour detail Tra cứu QD-VTD

5 View list tour Tra cứu QD-VLT

7 Search tour gallery Tra cứu QD-STG

8 Manage account Lưu trữ QD-MA

10 Change password Lưu trữ QD-CP

11 Edit infor Lưu trữ QD-EI

12 Logout Xử lý QD-LO

13 Delete account Xử lý QD-DA

Bảng 3.4 Thống kê, mô tả quy đinh cho từng nghiệp vụ của user

Tên quy định Mô tả Ghi chú

1 QD-ST Search tour 1.Người dùng sẽ thao tác với biểu mẫu tìm kiếm

• Nhập nội dung tìm kiếm vào ô input

• Nhấn nút search hoặc bấm nút enter trên bàn phím

2 QD-BT Book tour 1.Người dùng sẽ thao tác ở trang detail tour

• Điền đầy đủ thông tin ở biểu mẫu đặt tour

• Nhấn nút đồng ý điều khoản

• Nút book sẽ được hiển thị

1.Người dùng sẽ thao tác ở trang detail tour

• Nhấn vào tour bất kỳ

4 QD-VLT View list tour 1.Người dùng sẽ thao tác ở trang view list tour

• Xem danh sách các tour

1.Người dùng sẽ thao tác ở trang detail tour gallery

• Hiển thị danh sách các bài viết về tour du lịch

• Nhấn vào bài viết bất kỳ

• Chuyển sang trang detail tour gallery

• Xem chi tiết bài viết này

6 QD-STG Search tour gallery

1.Người dùng sẽ thao tác ở biểu mẫu search trong trang detail tour gallery

• Nhập thông tin tìm kiếm vào ô input

• Hiển thị danh sách các bài viết liên quan tour du lịch

1.Người dùng sẽ thao tác ở biểu mẫu manage account

• Nhấn vào nút my account

• Người dùng sẽ được chuyển trang mypage

• Nhấn vào nút account more

• Sửa thông tin password và delete account

1.Người dùng sẽ thao tác ở biểu mẫu manage account

• Nhấn vào nút my account

• Người dùng sẽ được chuyển trang mypage

• Nhấn vào nút account more

• Sửa thông tin password và delete account

1.Người dùng sẽ thao tác ở biểu mẫu manage account

• Nhấn vào nút my account

• Người dùng sẽ được chuyển trang mypage

• Nhấn vào nút account more

• Nhấn vào nút change password

• Điền các thông tin cần thiết

10 QD-EI Edit infor 1.Người dùng sẽ thao tác ở trang my page

• Nhấn vào nút my account

• Người dùng sẽ được chuyển trang mypage

• Nhấn vào nút My information

• Sửa các thông tin cần thiết

11 QD-LO Logout 1.Người dùng sẽ thao tác ở biểu mẫu manage account

12 QD-DA Delete account 1.Người dùng sẽ thao tác ở trang manage account

• Nhấn vào nút my account

• Người dùng sẽ được chuyển trang mypage

• Nhấn vào nút My information

• Sửa các thông tin cần thiết

Bảng 3.5 Thống kê nghiệp vụ đối với admin

STT Tên nghiệp vụ Loại nghiệp vụ Mã quy định Ghi chú

1 Log out Xử lý QD-Admin-LO

2 Edit infor Lưu trữ QD-Admin-EI

3 Ban Account Xử lý QD-Admin-BA

4 Create tour Lưu trữ QD-Admin-CT

5 Edit tour Lưu trữ QD-Admin-ET

6 Config language Lưu trữ QD-Admin-CL

8 Create tour gallery Lưu trữ QD-Admin-VBH

9 Edit tour gallery Lưu trữ QD-Admin-CP

Bảng 3.6 Thống kê, mô tả quy định cho từng nghiệp vụ của admin

Tên quy định Mô tả Ghi chú

Log out 1.Người quản trị sẽ thao tác với với nút logout

• Người quản trị sẽ nhấn nút logout

Edit infor 1.Người dùng sẽ thao tác ở trang quản trị của admin

• Sau khi login vào trang quản trị thành công

• Hiển thị danh sách các tài khoản

• Chỉnh sửa thông tin các tài khoản, xem lịch sử booking của tài khoản…

Ban Account 1.Người dùng sẽ thao tác ở trang view list tour

• Sau khi login vào trang quản trị thành công

• Hiển thị danh sách các tài khoản

• Chỉnh sửa trạng thái của tài khoản

Create tour 1.Người dùng sẽ thao tác ở trang detail tour gallery

• Hiển thị danh sách các bài viết về tour du lịch

• Nhấn vào bài viết bất kỳ

• Chuyển sang trang detail tour gallery

• Xem chi tiết bài viết này

Edit tour 1.Người quản trị sẽ thao tác với biểu mẫu edit tour Khi người dùng chọn bất kì edit nào

1.Người dùng sẽ thao tác ở biểu mẫu config language

• kiểm soát, thêm ngon ngữ

1.Người dùng sẽ thao tác ở biểu mẫu boooking

• Nhấn vào nút my account

1.Người dùng sẽ thao tác ở biểu mẫu manage account

• Thay đổi các gallery tùy chung

1.Người quản trị sẽ thao tác với biểu mẫu config admin tour

Khi người dùng chọn bất kì edit nào

Các lược đồ tuần tự chính

Hình 3.3 Lược đồ tuần tự tìm kiếm tour

Hình 3.4 Lược đồ tuần tự xem chi tiết tour

Hình 3.5 Lược đồ tuần tự đăng ký

Hình 3.6 Lược đồ tuần tự đăng nhập

Hình 3.7 Lược đồ tuần tự tạo mới tour

Hình 3.8 Lược đồ tuần tự thanh toán bằng Paypal

Hình 3.9 Lược đồ tuần tự đăng xu

KẾ PHẦN MỀM

Thiết kế cơ sở dữ liệu

The default model structure includes various data types: a date field for date values, a string field with a default empty value, a unique string field that is required, an array field initialized as an empty array, a number field defaulting to zero, a boolean field set to true by default, a boolean field set to false, and an object field initialized as an empty object.

Hình 4.1 Cấu trúc dữ liệu của Default type

The user model includes essential fields such as a unique ID, first and last names, locale, email, and an image It also captures gender, resident number, phone, address, nationality, and nationality code Additionally, it requires a password and assigns a user role, defaulting to "member." The model tracks verification status, activity status, and device ID, ensuring comprehensive user management.

Hình 4.2 Cấu trúc dữ liệu của User

{ title: defaultModel.object, description: defaultModel.object, isBest: defaultModel.booleanFalse, subDescription: defaultModel.object, image: defaultModel.array, price: defaultModel.number,

The booking information includes various elements such as bookingInfoList, tourInfoList, and tourScheduleList, which are structured as objects and arrays Additionally, the contactList and bookingList provide essential details, while the viewList, reactionList, and commentList enhance user engagement A shareLink facilitates easy sharing, and the createdUser attribute identifies the user responsible for the content Lastly, the isActive boolean indicates the current status of the booking information.

Hình 4.3 Cấu trúc dữ liệu của Tour

{ title: defaultModel.object, image: defaultModel.array, description: defaultModel.object, isActive: defaultModel.boolean, createdUser: defaultModel.string

Hình 4.4 Cấu trúc dữ liệu của TourGallery

{ payment: defaultModel.object, tourId: defaultModel.string, isPayment: defaultModel.booleanFalse, createdUser: defaultModel.string, bookingInfo: defaultModel.object, isActive: defaultModel.boolean

Hình 4.5 Cấu trúc dữ liệu của BookingHistory

{ type: defaultModel.string, bonusValue: defaultModel.array, image: defaultModel.string, listUserID: defaultModel.array, isActive: defaultModel.boolean

Hình 4.6 Cấu trúc dữ liệu của Notification

{ firstName: defaultModel.string, lastName: defaultModel.string, email: defaultModel.string,

34 title: defaultModel.string, content: defaultModel.string, isActive: defaultModel.boolean

Hình 4.7 Cấu trúc dữ liệu của ContactUS

{ termOfService: defaultModel.object, headerConfig: defaultModel.object, aboutUs: defaultModel.object, companyConfig: defaultModel.object, languageConfig: defaultModel.array, timelineConfig: defaultModel.array, footerConfig: defaultModel.object, precautionConfig: defaultModel.object

Hình 4.8 Cấu trúc dữ liệu của Config

{ page: defaultModel.object, device: defaultModel.object, message: defaultModel.string, version: defaultModel.string, createdUser: defaultModel.string, isActive: defaultModel.boolean

Hình 4.9 Cấu trúc dữ liệu của Crash

The article discusses the structure of a model that includes various attributes such as title, description, images, view list, weight, parent category, and user information It highlights the type of model, which defaults to a normal category type, and specifies the created user along with the active status of the model.

Hình 4.10 Cấu trúc dữ liệu của Category

Thiết kế giao diện, mô tả mục đích của màn hình dành cho admin

Hình 4.11 Giao diện đăng nhập của admin Bảng 4.1 Đặc tả giao diện đăng nhập của admin

STT Kiểu Mô tả/Ghi chú

Hình 4.12 Giao diện thanh navbar của admin Bảng 4.2 Đặc tả giao diện thanh navbar của admin

STT Kiểu Mô tả/Ghi chú

2 Button Đăng xuất khỏi trang admin

Hình 4.13 Left menu của admin

Bảng 4.3 Đặc tả giao diện Left menu

STT Kiểu Mô tả/Ghi chú

1 Menulist Danh sách các tùy chọn quản lý

2 Button Thu gọn menu về bên trái

- Giao diện quản lý user:

Hình 4.14 Giao diện quản lý users Bảng 4.4 Đặc tả giao diện quản lý users

STT Kiểu Mô tả/Ghi chú

1 Input Nhập thông tin người dùng để tìm kiếm

2 Button Tải lại danh sách ban đầu

3 Selection Chọn điều kiện lọc

4 Button Sắp xếp tăng dần

5 Button Sắp xếp giảm dần

6 Table Hiển thị danh sách users

7 Button Đến giao diện chỉnh sửa user

8 Button Xem lịch sử đặt tour của user

9 Checkbox Trạng thái của user

- Màn hình xem/chỉnh sửa thông tin user:

Hình 4.15 Giao diện xem/chỉnh sửa thông tin user Bảng 4.5 Đặc tả giao diện xem/chỉnh sửa user

STT Kiểu Mô tả/Ghi chú

1 Text Hiển thị email user

2 Input Nhập họ và tên lót của user

3 Selection Chọn tên quốc gia của user

4 Input Nhập địa chỉ của user

5 Input Nhập số điện thoại của user

8 Input Chọn mã quốc gia

12 Button Lưu thông tin và đóng giao diện

- Giao diện xem lịch sử đặt tour của user:

Hình 4.16 Giao diện xem lịch sử đặt tour của một user

Bảng 4.6 Đặc tả giao diện xem lịch sử đặt tour của một user

STT Kiểu Mô tả/Ghi chú

1 Input Nhập thông tin tour để tìm kiếm

2 Button Tải lại danh sách ban đầu

3 Table Hiển thị danh sách tours mà user đã đặt

- Giao diện xác nhận unactive một

Hình 4.17 Popup xác nhận xóa một user Bảng 4.7 Đặc tả giao diện xác nhận xóa một user

STT Kiểu Mô tả/Ghi chú

1 Button Unactive user và đóng giao diện

- Giao diện quản lý tour gallery:

Hình 4.18 Giao diện quản lý Tour gallery Bảng 4.8 Đặc tả giao diện quản lý tour gallery

STT Kiểu Mô tả/Ghi chú

1 Input Nhập thông tin để tìm kiếm

2 Button Tải lại danh sách ban đầu

3 Selection Chọn điều kiện lọc

4 Button Sắp xếp tang dần

5 Button Sắp xếp giảm dần

6 Button Đến giao diện tạo tour gallery

7 Table Hiển thị danh sách tour gallery

8 Button Đến giao diện chỉnh sửa tour gallery

9 Checkbox Trạng thái tour gallery

- Giao diện chỉnh sửa/tạo mới tour gallery :

Hình 4.19 Giao diện giao diện chỉnh sửa tour gallery Bảng 4.9 Đặc tả giao diện chỉnh/tạo mới sửa tour gallery

STT Kiểu Mô tả/Ghi chú

1 Input Nhập tiêu đề bài viết bằng tiếng Anh

2 Input Nhập mô tả bài viết bằng tiếng Anh

3 Input Nhập tiêu đề bài viết bằng tiếng Nhật

4 Input Nhập mô tả bài viết bằng tiếng Nhật

5 Input Nhập tiêu đề bài viết bằng tiếng Việt

6 Input Nhập mô tả bài viết bằng tiếng Việt

7 Input Nhập tiêu đề bài viết bằng tiếng Trung

8 Input Nhập mô tả bài viết bằng tiếng Trung

9 Input Nhập tên người đăng bài viết

10 Image Ảnh minh họa cho bài viết

12 Button Chọn file ảnh để tải lên

14 Button Lưu thông tin, đóng giao diện (nếu tạo mới thì text trên button sẽ là Create)

- Giao diện quản lý tours:

Hình 4.20 Giao diện quản lý tours Bảng 4.10 Đặc tả giao diện quản lý tours

STT Kiểu Mô tả/Ghi chú

1 Input Nhập thông tin tour đề tìm kiếm

2 Button Tải lại danh sách tour ban đầu

3 Selection Chọn điều kiện lọc

4 Button Sắp xếp tang dần

5 Button Sắp xếp giảm dần

6 Button Đến giao diện tạo mới tour

7 Table Hiện thị danh sách tours

8 Button Đến giao diện chỉnh sửa tour

9 Checkbox Trạng thái của tour

- Giao diện chỉnh sửa/tạo mới chi tiết tour:

Hình 4.21 Giao diện chỉnh sửa/tạo mới chi tiết tour(1)

Hình 4.22 Giao diện chỉnh sửa/tạo mới chi tiết tour(2)

Hình 4.23 Giao diện chỉnh sửa/tạo mới chi tiết tour(3)

Hình 4.24 Giao diện chỉnh sửa/tạo mới chi tiết tour(4) Bảng 4.11 Đặc tả giao diện chỉnh sửa chi tiết tour

STT Kiểu Mô tả/Ghi chú

1 Input Nhập tên tour bằng tiếng Anh

2 Input Nhập tên tour bằng tiếng Việt

3 Input Nhập tên tour bằng tiếng Nhật

4 Input Nhập tên tour bằng tiếng Trung

5 Input Nhập mô tả chính bằng tiếng Anh

6 Input Nhập mô tả chính bằng tiếng Việt

7 Input Nhập mô tả chính bằng tiếng Nhật

8 Input Nhập mô tả chính bằng tiếng Trung

9 Input Nhập mô tả phụ bằng tiếng Anh

10 Input Nhập mô tả phụ bằng tiếng Việt

11 Input Nhập mô tả phụ bằng tiếng Nhật

12 Input Nhập mô tả phụ bằng tiếng Trung

13 Input Nhập số lượng người tối thiểu

14 Input Nhập số lượng người tối đa

15 Selection Chọn hình ảnh/video tải lên

16 Button Chọn file ảnh tải lên

17 Image Hình ảnh tải lên

18 Button Bỏ chọn hình ảnh

19 Button Xóa tùy chọn tải ảnh

20 Selection Chọn hình ảnh/video tải lên

21 Button Chọn file ảnh tải lên

23 Image Hình ảnh thumbnail của video

24 Input Nhập đường dẫn URL của video

26 Button Mở giao diện thêm ảnh/video mới

27 Input Nhập tên lịch trình bằng tiếng Anh

28 Input Nhập tên lịch trình bằng tiếng Việt

29 Input Nhập tên lịch trình bằng tiếng Nhật

30 Input Nhập tên lịch trình bằng tiếng Trung

31 Input Nhập tên lịch trình bằng tiếng Anh

32 Input Nhập tên lịch trình bằng tiếng Việt

33 Input Nhập tên lịch trình bằng tiếng Nhật

34 Input Nhập tên lịch trình bằng tiếng Trung

35 Input Nhập mô tả lịch trình bằng tiếng Anh

36 Input Nhập mô tả lịch trình bằng tiếng Việt

37 Input Nhập mô tả lịch trình bằng tiếng Nhật

38 Input Nhập mô tả lịch trình bằng tiếng Trung

39 Input Nhập tên địa điểm tham quan

41 Button Thêm địa điểm mới

42 Input Nhập địa điểm nổi bật

43 Button Chọn file ảnh tải lên

44 Image Hình ảnh tải lên

47 Button Thêm một địa điểm mới

49 Input Nhập địa chỉ điếm đến

50 Input Nhập điện thoại liên lạc

51 Input Nhập thông tin bữa ăn

53 Button Thêm một lịch trình mới

54 Input Nhập thông tin bao gồm trong tour

55 Input Nhập thông tin không bao gồm trong tour

56 Input Nhập tên từng bước của quá trình đặt tour

57 Button Bỏ bước trong quá trình đặt tour

58 Button Tạo một quy trình đặt tour mới

59 Button Lưu thông tin, đóng giao diện (nếu thêm mới thì text trên button sẽ là Create)

- Popup xác nhận xóa một tour:

Hình 4.25 Giao diện popup xác nhận xóa một tour Bảng 4.12 Đặc tả giao diện popup xác nhận xóa một tour

STT Kiểu Mô tả/Ghi chú

1 Button Xóa tour, đóng giao diện

4.2.6 Xem lịch sử đặt tour

- Giao diện xem lịch sử đặt tour:

Hình 4.26 Giao diện xem lịch sử đặt tour

Bảng 4.13 Đặc tả giao diện xem lịch sử đặt tour

STT Kiểu Mô tả/Ghi chú

1 Input Nhập thông tin tour để tìm kiếm

2 Button Tải lại danh sách ban đầu

3 Table Hiển thị danh sách các tour đã được đặt

4 Button Đến giao diện xem chi tiết người đặt tour

5 Checkbox Trạng thái của tour đã đặt

- Màn hình xem chi tiết người đặt tour:

Hình 4.27 Giao diện xem chi tiết người đặt tour Bảng 4.14 Đặc tả giao diện xem chi tiết người đặt tour

STT Kiểu Mô tả/Ghi chú

1 Form Hiển thị thông tin người đặt tour

- Giao diện cấu hình điều khoản đặt tour:

Hình 4.28 Giao diện cấu hình điều khoản đặt tour Bảng 4.15 Đặc tả giao diện cấu hình điều khoản đặt tour

STT Kiểu Mô tả/Ghi chú

1 Input Nhập điều khoản bằng tiếng Anh

2 Input Nhập điều khoản bằng tiếng Việt

3 Input Nhập điều khoản bằng tiếng Nhật

4 Input Nhập điều khoản bằng tiếng Trung

- Giao diện lựa chọn ngôn ngữ hiển thị cho trang đặt tour:

Hình 4.29 Giao diện lựa chọn ngôn ngữ hiển thị cho trang đặt tour

Bảng 4.16 Đặc tả giao diện lựa chọn ngông ngữ hiển thị cho trang tour

STT Kiểu Mô tả/Ghi chú

1 Checkbox, text Trạng thái và tên của ngôn ngữ

- Giao diện quản lý header:

Hình 4.30 Giao diện quản lý header Bảng 4.17 Đặc tả giao diện quản lý header

STT Kiểu Mô tả/Ghi chú

1 Button Đến giao diện tạo một header mới

2 Table Hiển thị danh sách thông tin trên header

3 Button Đến giao diện chỉnh sửa header

- Giao diện cấu hình tạo/chỉnh sửa một header:

Hình 4.31 Giao diện cấu hình tạo/chỉnh sửa một header Bảng 4.18 Đặc tả giao diện cấu hình tạo/chỉnh sửa một header mới

STT Kiểu Mô tả/Ghi chú

1 Input Nhập key cho header

2 Input Nhập tiêu đề header bằng tiếng Anh

3 Input Nhập tiêu đề phụ của header bằng tiếng Anh

4 Input Nhập tiêu đề header bằng tiếng Nhật

5 Input Nhập tiêu đề phụ của header bằng tiếng Nhật

6 Input Nhập tiêu đề header bằng tiếng Việt

7 Input Nhập tiêu đề phụ của header bằng tiếng Việt

8 Input Nhập tiêu đề header bằng tiếng Trung

9 Input Nhập tiêu đề phụ của header bằng tiếng Trung

10 Button Chọn file ảnh tải lên

12 Button Lưu thông tin, đóng giao diện (nếu là giao diện chỉnh sửa text trên button sẽ là Edit)s

- Giao diện cấu hình footer:

Hình 4.32 Giao diện cấu hình footer

Bảng 4.19 Đặc tả giao diện cấu hình footer

STT Kiểu Mô tả/Ghi chú

1 Input Nhập tiêu đề trên bằng tiếng Anh

2 Input Nhập tiêu đề trên bằng tiếng Việt

3 Input Nhập tiêu đề trên bằng tiếng Nhật

4 Input Nhập tiêu đề trên bằng tiếng Trung

6 Input Nhập điện thoại liên lạc

7 Input Nhập địa chỉ email liên lạc

8 Input Nhập địa chỉ wechat

11 Input Nhập tiêu đề dưới bằng tiếng Anh

12 Input Nhập tiêu đề dưới bằng tiếng Việt

13 Input Nhập tiêu đề dưới bằng tiếng Nhật

14 Input Nhập tiêu đề dưới bằng tiếng Trung

4.2.9 Cấu hình dòng thời gian

- Giao diện cấu hình dòng thời gian:

Hình 4.33 Giao diện cấu hình dòng thời gian Bảng 4.20 Đặc tả giao diện cấu hình dòng thời gian

STT Kiểu Mô tả/Ghi chú

1 Button Đến giao diện tạo một sự kiện mới

2 Button Xóa năm của timeline

3 Table Hiển thị danh sách các sự kiện của timeline

4 Button Đến giao diện chỉnh sửa timeline

6 Input Nhập một năm mới

7 Button Tạo một timeline mới

- Giao diện chỉnh sửa/tạo mới một sự kiện:

Hình 4.34 Giao diện chỉnh sửa/tạo mới một sự kiện Bảng 4.21 Đặc tả giao diện chỉnh sửa/tạo mới một sự kiện

STT Kiểu Mô tả/Ghi chú

1 Seletion Chọn ngày diễn ra sự kiện

2 Input Nhập nội dung sự kiện bằng tiếng Anh

3 Input Nhập nội dung sự kiện bằng tiếng Việt

4 Input Nhập nội dung sự kiện bằng tiếng Nhật

5 Input Nhập nội dung sự kiện bằng tiếng Trung

7 Button Lưu thông tin, đóng giao diện (nếu là giao diện tạo mới, text trên button sẽ là Create)

Thiết kế giao diện, mô tả mục đích các màn hình của người dùng cuối

Bảng 4.22 Đặc tả giao diện header

STT Kiểu Mô tả/Ghi chú

1 Image, text Vị trí của hệ thống

2 Image, text Số điện thoại liên lạc

3 Button Liên hệ qua wechat

4 Button Liên hệ qua Telegram

5 Button Liên hệ qua email

7 Button Đến giao diện đăng nhập

9 Menu list Đến các màn hình khác của trang web

Hình 4.36 Giao diện footer Bảng 4.23 Đặc tả giao diện footer

STT Kiểu Mô tả/Ghi chú

2 Button Các phương thức liên lạc

3 Image, text Hiển thị các thông tin chung của trang web

Hình 4.37 Giao diện đăng nhập Bảng 4.24 Đặc tả giao diện đăng nhập

STT Kiểu Mô tả/Ghi chú

4 Button Đăng nhập với Google

5 Button Đến giao diện đăng ký

Hình 4.38 Giao diện đăng ký (1)

Hình 4.39 Giao diện đăng ký (2) Bảng 4.25 Đặc tả giao diện đăng ký

STT Kiểu Mô tả/Ghi chú

3 Button Đến giao diện tiếp theo

4 Button Đăng ký bằng Google

5 Button Đến giao diện đăng nhập

7 Input Nhập họ và tên lót

9 Button Đăng ký tài khoản

- Giao diện thông báo kiểm tra email:

Hình 4.40 Giao diện thông báo kiểm tra email Bảng 4.26 Đặc tả giao diện thông báo kiểm tra email

STT Kiểu Mô tả/Ghi chú

1 Text Hiển thị thông báo

- Giao diện thông báo đăng ký tài khoản thành công:

Hình 4.41 Giao diện thông báo đăng ký tài khoản thành công

Bảng 4.27 Đặc tả giao diện thông báo đăng ký tài khoản thành công

STT Kiểu Mô tả/Ghi chú

1 Text Hiển thị thông báo

2 Image Hình ảnh minh họa

3 Button Đóng thông báo Người dùng có thể đăng nhập vào trang web

4.3.3 Trang chủ/danh sách tours

Hình 4.42 Giao diện xem danh sách tours

Bảng 4.28 Đặc tả giao diện xem danh sách tours

STT Kiểu Mô tả/Ghi chú

3 Image Hình ảnh mình họa

4 Input Nhập từ khóa tìm kiếm

6 Component Hiển thị các thông tin ngắn gọn của tours: thời gian diễn ra, giá tour, giới thiệu chung, hình ảnh

7 Button Đến giao diện xem chi tiết để đặt tour

- Giao diện giới thiệu chung:

Hình 4.43 Giao diện giới thiệu chung Bảng 4.29 Đặc tả giao diện giới thiệu chung

STT Kiểu Mô tả/Ghi chú

3 Tab Tên mục hiển thị

4 Image, text Thông tin chung

5 Slide Danh sách hình/video của tour

6 Text Giới thiệu điểm đến

7 Text Thông tin chung, giá tour

8 Button Đến giao diện đặt tour

9 Button Đến giao diện thanh toán

10 Button Liên lạc bằng email

11 Button Liên lạc bằng Telegram

12 Button Liên lạc bằng Wechat

- Giao diện xem lịch trình:

Hình 4.44 Giao diện xem lịch trình Bảng 4.30 Đặc tả giao diện xem lịch trình

STT Kiểu Mô tả/Ghi chú

1 Timeline Hiển thị lịch trình tour

2 Button Mở rộng/thu gọn chi tiết lịch trình

3 Image, text Hình ảnh và tên địa điểm nổi bật

4 Text Mô tả lịch trình chi tiết

5 Image, text Thông tin điểm đến, điện thoại liên lạc, bữa ăn

- Giao diện xem thông tin tour:

Hình 4.45 Giao diện xem thông tin

Bảng 4.31 Đặc tả giao diện xem thông tin

STT Kiểu Mô tả/Ghi chú

1 Text Thông tin tour bao gồm

2 Text Thông tin tour không bao gồm

3 Image, text Quy trình đặt tour

4 Text Thông tin về hủy tour

Hình 4.46 Giao diện đặt tour Bảng 4.32 Đặc tả giao diện đặt tour

STT Kiểu Mô tả/Ghi chú

1 Input Nhập tên người đặt

11 vv vv 12 vv 13 vv 14 vv

2 Input Nhập họ và tên lót người đặt

3 Radio button Chọn giới tính

4 Input Nhập địa chỉ mail người đặt

5 Selection Chọn tến quốc gia

7 Selection Chọn mã quốc gia

8 Input Nhập số điện thoại

11 Input Nhập tên bệnh tật (nếu có)

12 Text Điều khoản đặt tour

13 Checkbox Đồng ý với điều khoản đặt tour

14 Button Đặt tour, đóng giao diện, đến giao diện thanh toán

- Giao diện trước khi thanh thanh toán Paypal:

Hình 4.47 Giao diện trước khi thanh toán paypal

Bảng 4.33 Đặc tả giao diện trước khi thanh toán Paypal

STT Kiểu Mô tả/Ghi chú

1 Text Hiện thị thông báo, thông tin tour

2 Button Thanh toán với Paypal

- Giao diện thanh toán thành công:

Hình 4.48 Giao diện thông báo thanh toán thành công Bảng 4.34 Đặc tả giao diện thông báo thanh toán thành công

STT Kiểu Mô tả/Ghi chú

1 Text Hiện thị thông báo đã thanh toán thành công

- Giao diện danh sách các bài viết về địa điểm du lịch:

Hình 4.49 Giao diện dánh sách thư viện du lịch Bảng 4.35 Đặc tả giao diện danh sách thư viện du lịch

STT Kiểu Mô tả/Ghi chú

4 Input Nhập từ khóa để tìm kiếm

5 Button Tìm kiếm bài viết

6 Component Hiển thị hình ảnh, người đăng, thời gian đăng

Người dùng có thể click để xem chi tiết

- Giao diện xem chi tiết một bài viết:

Hình 4.50 Giao diện xem chi tiết một bài viết Bảng 4.36 Đặc tả giao diện xem chi tiết một bài viết

STT Kiểu Mô tả/Ghi chú

2 Text Nội dung bài viết

3 Image Ảnh minh họa địa điểm

4 Attachment File ảnh đính kèm

5 Button Quay lại trang xem danh sách thư viện du lịch

- Giao diện giới thiệu trang web:

Hình 4.51 Giao diện giới thiệu trang web

Bảng 4.37 Đặc tả giao diện giới thiệu trang web

STT Kiểu Mô tả/Ghi chú

3 Text Giới thiệu trang web

4 Iamge, text Đặc điểm nổi bật

5 Timeline Dòng thời gian cho các sự kiện

- Giao diện liên hệ với chúng tôi:

Hình 4.52 Giao diện liên hệ với chúng tôi Bảng 4.38 Đặc tả giao diện liên hệ với chúng tôi

STT Kiểu Mô tả/Ghi chú

1 Input Nhập tên người gửi

2 Input Nhập họ người gửi

3 Input Nhập email người gửi

4 Input Nhập tiêu đề email

5 Input Nội dung chính của mail

6 Button Gửi email về hệ thống, đóng giao diện

4.3.8 Trang cá nhân (dành cho người dùng đã đăng ký tài khoản)

- Giao diện trang cá nhân:

Hình 4.53 Giao diện trang cá nhân Bảng 4.39 Đặc tả giao diện trang cá nhân

STT Kiểu Mô tả/Ghi chú

2 Menulist Danh sách các tùy chọn

4 Button Đến giao diện chỉnh sửa thông tin cá nhân

5 Button Đến giao diện cài đặt tài khoản

6 List Danh sách các tours mà người dùng đã đặt

- Giao diện tạo xem chi tiết tour đã đặt:

Hình 4.54 Giao diện xem chi tiết tour đã đặt Bảng 4.40 Đặc tả giao diện xem chi tiết tour đã đặt

STT Kiểu Mô tả/Ghi chú

1 Text Thông tin tour đã đặt

- Giao diện chỉnh sửa thông tin cá nhân:

Hình 4.55 Giao diện chỉnh sửa thông tin cá nhân Bảng 4.41 Đặc tả giao diện chỉnh sửa thông tin cá nhân

STT Kiểu Mô tả/Ghi chú

2 Input Nhập tên người dùng

3 Input Nhập họ và tên lót

4 Radio button Chọn giới tính

5 Selection Chọn tên quốc gia

6 Selection Chọn mã quốc gia

8 Input Nhập số điện thoại

- Giao diện cài đặt tài khoản:

Hình 4.56 Giao diện cài đặt tài khoản Bảng 4.42 Đặc tả giao diện cài đặt tài khoản

STT Kiểu Mô tả/Ghi chú

1 Text Thông tin người dùng

2 Button Đến giao diện đổi mật khẩu

3 Button Đến giao diện xóa tài khoản

- Giao diện đổi mật khẩu:

Hình 4.57 Giao diện đối mật khẩu Bảng 4.43 Đặc tả giao diện thay đổi mật khẩu

STT Kiểu Mô tả/Ghi chú

1 Input Nhập mật khẩu cũ

2 Input Nhập mật khẩu mới

3 Input Xác nhận mật khẩu mới

Sau khi kiểm tra và thỏa mãn các điều kiện, nút "Lưu mật khẩu mới" sẽ chuyển sang màu cam, cho phép người dùng nhấn để lưu mật khẩu.

- Giao diện xóa tài khoản:

Hình 4.58 Giao diện xóa tài khoản Bảng 4.44 Đặc tả giao diện xóa tài khoản

STT Kiểu Mô tả/Ghi chú

1 Text, image Lời cảnh báo xóa tài khoản

2 Button Xác nhận xóa tài khoản

Thiết kế thư mục

- Thiết kế thư mục frontend của trang admin:

• Common: là thư mục chứa các component có tính tái sử dụng, xuất hiện ở nhiều màn hình

• Controller: thư mục gọi toàn bộ API ở backend

• Scss: thư mục này dùng để căn chỉnh và làm đẹp cho giao diện các màn hình của admin

Thư mục Views chứa các thư mục con, chủ yếu là các màn hình và chức năng dành cho admin Mỗi thư mục con đều bao gồm một file index.js, giúp tổ chức và quản lý mã nguồn hiệu quả.

Hình 4.59 Thiết kế thư mục cho fronend trang admin

- Thiết kế thư mục cho frontend trang đặt tour:

• Pages: Thư mục tổng chứ toàn bộ mã nguồn cho các màn hình ở trang đặt tour

• Components: thư mục chứa các component được tái sử dụng nhiều lần

• Container: thư mục chứa những thành phần luôn luôn xuất hiện ở tất cả các màn hình (header, footer)

Thư mục "Screen" chứa các giao diện màn hình và chức năng của trang web, bao gồm nhiều thư mục con Mỗi thư mục con thường có một file index.js để quản lý các thành phần giao diện.

1 file style.scss và 1 thư mục chứa các component con của nó

Hình 4.60 Thiết kế thư mục fronend cho trang đặt tour

- Thiết kế thư mục cho backend:

• Models: chứa các file mapping với database

• Controller: chứa các service bao gồm các APIs connect với database và hệ thống frontend

• Routes: chứa router của API

Hình 4.61 Thiết kế thư mục cho backend (1)

Hình 4.62 Thiết kế thư mục cho backend (2)

ĐẶT VÀ KIỂM THỬ

Môi trường cài đặt

- Sử dụng công nghệ Nodejs 14.7.0

- Trình duyệt Chrome phiên bản 87.0.4280.88 (Official Build) (64-bit)

Kiểm thử

Bảng 5.1 Bảng kiểm thử hệ thống

STT Tên test case Quy trình Kết quả mong đợi Kết quả

Kiểm thử chức năng đăng nhập

1 Nhấn vào nút Login trên header

2 Nhập username, password vào form đăng nhập

3 Gõ phím Enter hoặc nhấn vào nút Đăng nhập Ứng dụng vẫn giữ ở trang hiện tại, đồng thời nút Login trên header đổi thành nút

Kiểm thử chức năng đăng nhập với

1 Nhấn vào nút Login trên header

2 Nhấn vào biểu tượng Google+ trên giao diện đăng nhập

3 Chuyển đến giao diện login của Google

4 Thực hiện các bước cần thiết Ứng dụng vẫn giữ ở trang hiện tại, thay đổi nút Login trên header thành nút My page

Kiểm thử chức năng đăng kí

1 Nhấn vào nút Login trên header

2 Nhấn vào dòng chữ Sign up

3 Nhập các thông tin cần thiết vào form đăng kí

4 Nhấn vào nút Đăng kí Ứng dụng thông báo kiểm tra email để xác nhận Sau khi xác thực từ email bằng cách nhấp vào link trong email thì chuyển đến giao diện thông báo đăng ký thành công

Kiểm thử chức năng cập nhật thông tin

1 Nhấn vào nút My page

2 Nhấn tiếp vào nút Info More

3 Chỉnh sửa lại các trường muốn thay đổi

4 Nhấn nút Save Ứng dụng vẫn giữ ở trang hiện tại, đồng thời hiện thông báo đã cập nhập thông tin thành công

Kiểm thử chức năng tìm kiếm tour

1 Nhập từ khóa vào thanh tìm kiếm

2 Nhấn vào nút tìm kiếm hoặc gõ Enter

Hiển thị danh sách kết quả phủ hợp Pass

Kiểm thử chức năng đổi mật khẩu

1 Nhấn vào nút My page

2 Nhấn vào nút Account More

3 Nhấn vào thanh Chang password

4 Nhập thông tin mật khẩu cũ và mới

Cập nhật lại mật khẩu người dùng hiện tại Pass

Kiểm thử chức năng tìm kiếm bài viết trong thư viện du lịch

1 Nhập từ khóa vào thanh tìm kiếm

2 Nhấn nút tìm kiếm hoặc gõ Enter

Hiển thị danh sách kết quả phù hợp Pass

Kiểm thử chức năng thanh toán tour với

1 Chọn tour xem chi tiết

3 Nhập đầy đủ thông tin trong form Booking

6 Tiến hành thanh toán với Paypal

Thông báo đã đặt tour thành công đồng thời gửi email cho người dùng thông tin tour

Kiểm thử chức năng xem chi tiết một tour

1 Nhấn vào một tour ở trang danh sách tour

Hiển thị thông chi tiết tour đó

Kiểm thử chức năng xem chi tiết một bài viết trong thư viện du lịch

1 Nhấn vào một bài viets trong danh sách thư viện du lịch

Hiển thị chi tiết của bào viết đó Pass

Kiểm thử chức năng đăng xem lịch sử đặt tour

1 Nhấn vào nút My page

2 Nhấn vào nút Booking History

Hiển thị danh sách các tour mà người dùng đã đặt

Kiểm thử chức năng xem chi tiết tour đã đặt

2 Nhấn vào nút Booking history

3 Nhấn vào 1 tour cụ thể đã đặt

Hiển thị pop up thông tin chi tiết của tour đó Pass

LUẬN VÀ HƯỚNG PHÁT TRIỂN

Những điểm đạt được

Đề tài “XÂY DỰNG TRANG WEB ĐẶT TOUR ONLINE” đã hoàn thành đúng tiến độ và thực hiện đầy đủ các ý tưởng cùng thuật toán ban đầu Qua thời gian nghiên cứu và triển khai, dự án này đã đạt được sự hoàn thiện đáng kể so với mục tiêu đề ra.

Mục tiêu cơ bản đã được hoàn thành, và nhóm thực hiện đã áp dụng thêm nhiều công nghệ và kỹ thuật mới chưa được dự kiến ban đầu Dưới đây là những thành tựu cụ thể mà nhóm đã đạt được.

• Tìm hiểu được các công nghệ liên quan đến javacript – tổng hợp tạo nên công nghệ MERN Stack

Explore various supporting technologies such as Redux for easier state management, Ant Design, Font Awesome, and Sweet Alert for ready-to-use frontend components, and DraftJS for creating a WYSIWYG text editor Enhance security with JSON Web Tokens and utilize Cloudinary for storing large images efficiently.

• Hiện thực được các usecase chính của hệ thống.

Những khó khăn và cách khắc phục

Người thực hiện đang trong quá trình tìm hiểu về công nghệ MERN STACK và chưa có đủ thời gian để nắm vững các kiến thức chuyên môn liên quan.

- Tư duy thiết kế dữ liệu cũng như giao diện còn hạn chế

- Chưa có sự nhất quán trong khâu xử lý code cũng như các thuật toán, các giao diện sao cho thực sự đồng nhất

- Mặc dù đã cố gắng nhưng việc thực hiện còn tồn tại một số điểm chưa đạt được do thời gian có hạn

- Khâu thiết kế xử lý và giao diện còn khá vụng về

Để khắc phục vấn đề, tôi đã tham khảo tài liệu từ sách vở và internet Nhờ sự hướng dẫn, góp ý và ý tưởng từ giảng viên Lê Văn Vinh, tôi đã hoàn thành công việc một cách tốt nhất và đúng tiến độ.

Ưu điểm

- Thông tin được lưu trữ trực quan, nhất quán

- Có độ bảo mật tốt bằng json web token

- Giao diện hiện đại, dễ nhìn, thân thiện với người dùng

- Ứng dụng đơn giản, dễ sử dụng

- Áp dụng công nghệ mới

- Hệ thống chạy code online, tốc độ phản hồi nhanh

- Khả năng bảo trì, mở rộng dễ dàng, nhanh chóng

- Giao diện responsive khá mượt mà cho nhiều kích thước màn hình

Hướng phát triển

- Cải thiện, phát triển nhiều tính năng đã có

- Hỗ trợ kết nối API từ bên thứ ba

- Tối ưu hóa các nghiệp vụ

- Thêm animation cho các sự kiện

- Thêm các nghiệp vụ như thu phí theo tháng hoặc đưa vào quảng cáo

- Hỗ trợ nhiều ngôn ngữ hơn

- Cung cấp nhiều tour du lịch hơn

- Xây dựng các tính năng mới có hỗ trợ trí tuệ nhân tạo để tối ưu hóa hệ thống

- Hỗ trợ đa dạng dịch vụ hơn