(Đồ án tốt nghiệp) Xây dựng website đặt tour du lịch

(Đồ án tốt nghiệp) Xây dựng website đặt tour du lịch(Đồ án tốt nghiệp) Xây dựng website đặt tour du lịch(Đồ án tốt nghiệp) Xây dựng website đặt tour du lịch(Đồ án tốt nghiệp) Xây dựng website đặt tour du lịch(Đồ án tốt nghiệp) Xây dựng website đặt tour du lịch(Đồ án tốt nghiệp) Xây dựng website đặt tour du lịch(Đồ án tốt nghiệp) Xây dựng website đặt tour du lịch(Đồ án tốt nghiệp) Xây dựng website đặt tour du lịch(Đồ án tốt nghiệp) Xây dựng website đặt tour du lịch(Đồ án tốt nghiệp) Xây dựng website đặt tour du lịch(Đồ án tốt nghiệp) Xây dựng website đặt tour du lịch(Đồ án tốt nghiệp) Xây dựng website đặt tour du lịch(Đồ án tốt nghiệp) Xây dựng website đặt tour du lịch(Đồ án tốt nghiệp) Xây dựng website đặt tour du lịch(Đồ án tốt nghiệp) Xây dựng website đặt tour du lịch

Tổng quan

Lý do chọn đề tài

Trước đây, việc kinh doanh bán tour du lịch chủ yếu dựa vào quản lý thủ công qua giấy tờ và bảng tính Excel, gây ra khó khăn trong quá trình quản lý Khi nhu cầu đi tour của khách hàng tăng, việc sử dụng phương pháp truyền thống không còn hiệu quả, dẫn đến mất thời gian và dễ xảy ra thiếu sót trong quản lý đặt tour và doanh thu Chính vì vậy, hệ thống quản lý bán tour trực tuyến ra đời nhằm tối ưu hóa quy trình kinh doanh, tăng hiệu quả và chính xác trong quản lý khách hàng, đặt tour và doanh thu.

Hệ thống bán tour trực tuyến là một giải pháp giúp khách hàng dễ dàng đặt chỗ và thanh toán trực tuyến, tiết kiệm thời gian và công sức cho người dùng Website du lịch trực tuyến là hình thức thể hiện rõ nhất của hệ thống này, mang lại trải nghiệm đặt tour nhanh chóng, tiện lợi cho khách du lịch.

Hệ thống bán tour trực tuyến ra đời đã giúp giảm thiểu hạn chế về không gian và thời gian trong quá trình liên kết bán tour Nó nâng cao khả năng quản trị doanh nghiệp một cách hiệu quả, giảm thiểu thời gian cho nhân viên và ban quản trị Ngoài ra, hệ thống này còn giúp tăng doanh thu bán hàng và tạo cầu nối gắn kết khách hàng với công ty du lịch Khách hàng có thể dễ dàng tra cứu thông tin du lịch trong và ngoài nước mọi lúc mọi nơi qua các kênh thông tin đa chiều, tiện ích của website.

Mục đích của đề tài

Discover how ExpressJS, Ant Design, Bootstrap Framework, and ReactJS libraries function, configure, and integrate into projects to build secure and high-performance servers with ExpressJS, create user-friendly interfaces using Ant Design, and develop seamless single-page applications (SPAs) with ReactJS This knowledge enables the development of fast, secure, and engaging web applications that deliver optimal user experiences.

Nhóm chọn đề tài “Xây dựng website đặt tour du lịch” với những mục đích sau:

Xây dựng một website kinh doanh tour du lịch là giải pháp hiệu quả giúp cá nhân hoặc doanh nghiệp quảng bá tour của họ trực tuyến và tiếp cận lượng khách hàng lớn hơn Website này đóng vai trò là kênh trao đổi thông tin hữu ích giữa người bán và người mua tour, tạo điều kiện thuận lợi cho việc giới thiệu dịch vụ, tăng doanh số và nâng cao nhận diện thương hiệu trong ngành du lịch.

− Tìm hiểu ExpressJS để xây dựng web application

− Tìm hiểu thư viện ReactJS để xây dựng giao diện người dùng

− Tìm hiểu và sử dụng Ant Design

Nâng cao kỹ năng giải quyết vấn đề và tìm kiếm thông tin là yếu tố then chốt giúp các doanh nghiệp du lịch thích nghi với thị trường cạnh tranh Ứng dụng các công nghệ mới trong xây dựng và phát triển các tính năng phổ biến về lĩnh vực tour du lịch không chỉ nâng cao trải nghiệm khách hàng mà còn thúc đẩy sự đổi mới sáng tạo Việc tích hợp công nghệ tiên tiến giúp tối ưu hóa quy trình, nâng cao hiệu quả hoạt động và đáp ứng nhanh chóng các yêu cầu của thị trường du lịch hiện đại.

Quy trình nghiệp vụ và phương pháp tiếp cận

Công ty du lịch chuyên thiết kế các tour riêng biệt, xây dựng lịch trình chi tiết cho từng chuyến đi Bộ phận văn phòng có trách nhiệm cập nhật đầy đủ thông tin về các tour lên website, bao gồm giá cả, loại hình tour, lịch trình, địa điểm đến và hình ảnh minh họa nếu có, giúp khách hàng dễ dàng lựa chọn Khách hàng truy cập website để xem thông tin chi tiết của các tour hiện có hoặc tìm kiếm theo yêu cầu về giá cả, địa phương muốn đến và ngày khởi hành, từ đó có thể đặt chỗ trực tiếp nếu ưng ý Các đơn đặt chỗ này sẽ được lưu trữ vào cơ sở dữ liệu và quản trị viên có thể xem, chỉnh sửa, xóa hoặc xác nhận sau khi kiểm tra độ chính xác của thông tin Ngoài ra, khách hàng còn có thể gửi yêu cầu hoặc liên hệ qua trang Liên hệ để cung cấp thông tin hoặc yêu cầu dịch vụ, các dữ liệu này cũng được lưu trữ và quản lý bởi hệ thống để đảm bảo hiệu quả vận hành.

− Cách tiếp cận: Nghiên cứu các trang web đặt tour đã có trên internet

− Sử dụng phương pháp nghiên cứu: o Phương pháp đọc tài liệu o Phương pháp phân tích mẫu o Phương pháp thực nghiệm làm những module nhỏ

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

Mytour.vn là một trong những ứng dụng đặt phòng trực tuyến hàng đầu tại Việt Nam, giúp người dùng dễ dàng tìm kiếm phòng khách sạn với giá cả hợp lý Với Mytour.vn, bạn sẽ nhận được thông tin khách sạn rõ ràng và chính xác, đồng thời có nhiều chương trình khuyến mãi hấp dẫn Đây là nền tảng tin cậy cho chuyến đi của bạn, cung cấp trải nghiệm đặt phòng tiện lợi, nhanh chóng và tiết kiệm.

Hình 1.1 Trang chủ website mytour.vn (1)

Hình 1.2 Trang chủ website mytour.vn (2)

Hình 1.3 Trang chủ website mytour.vn (3) 1.4.1.2 Ưu điểm

− Tông màu: Chủ đạo là màu trắng, xanh dương và điểm nhấn là màu hồng cùng font chữ kích cỡ vừa phải

Dịch vụ du lịch của chúng tôi cung cấp thông tin chi tiết về sản phẩm gồm tiêu đề mô tả ngắn gọn nội dung tour, đánh giá sao từ khách hàng đã đặt tour, thời lượng, loại tour phù hợp, quy mô nhóm, địa điểm tham quan, hình ảnh minh họa sinh động, giá cả cạnh tranh, ngày khởi hành cụ thể và số lượng người tham gia dự kiến (người lớn, trẻ em) Mỗi tour đều đi kèm lịch trình chi tiết và các chính sách hỗ trợ nhằm đảm bảo trải nghiệm thú vị và an toàn cho khách hàng.

Hình 1.4 Trang chi tiết tour của website mytour.vn (1)

Hình 1.5 Trang chi tiết tour của website mytour.vn (2)

Bố cục sắp xếp hài hòa và rõ ràng giúp tạo trải nghiệm người dùng tốt hơn Việc sử dụng cách sắp xếp quen thuộc cùng với thông tin cần thiết đảm bảo tính rõ ràng và dễ hiểu cho người xem Chất lượng hình ảnh cao góp phần nâng cao giá trị nội dung và thu hút sự chú ý của khách hàng.

− Hiệu ứng: Các hiệu ứng không nhiều, đơn giản (chủ yếu là chuyển tiếp và di chuyển ngang, đưa chuột vào sẽ nổi bật lên)

− Dữ liệu sản phẩm: Đầy đủ các thông tin quan trọng và có các thông tin liên quan 1.4.1.2.2 Chức năng

− Tìm kiếm: Có gợi ý tìm kiếm theo từ khóa thu hút

Hình 1.6 Chức năng tìm kiếm tour của website mytour.vn

− Sắp xếp, bộ lọc: Theo khoảng giá, địa điểm, chủ đề

Bạn có thể đặt tour dễ dàng qua tổng đài hoặc gửi đơn đặt tour để lựa chọn chương trình phù hợp Trước khi xác nhận, hãy xem kỹ lịch trình khởi hành, các điều khoản chính sách, dịch vụ đi kèm và đánh giá tour từ khách hàng trước để đảm bảo trải nghiệm tốt nhất.

Hình 1.7 Chức năng đặt tour của website mytour.vn

− Đăng nhập: Đăng nhập bằng email đã đăng ký, lưu thông tin người dùng và gợi ý các chuyến đi liên quan

Hình 1.8 Chức năng đăng nhập của website mytour.vn

− Thanh toán: Đặt tour qua tổng đài và gửi đơn đặt tour

− Các chức năng đặc biệt khác: Góp ý website, cẩm nang du lịch, chương trình khuyến mãi, thông báo đến người dùng, chia sẻ và like trên facebook

− Khi nhấn vào điểm đến phổ biến nước ngoài thì chuyển hướng sang trang web có tên miền khác

− Không gợi ý search tour theo địa điểm, ngày đi…

− Chưa có chức năng sắp xếp tour tăng, giảm dần theo giá…

− Chưa có phương thức thanh toán thuận tiện

− Chưa có tính năng đặc biệt khác như liên kết Messenger, Zalo…

Saigontourist là doanh nghiệp hàng đầu trong ngành dịch vụ - du lịch, đóng góp tích cực vào sự phát triển của ngành du lịch Việt Nam Các mô hình kinh doanh của công ty bao gồm lưu trú, nhà hàng, lữ hành, vui chơi giải trí, thương mại, xuất nhập khẩu, cửa hàng miễn thuế, vận chuyển, xây dựng, đào tạo nghiệp vụ du lịch và khách sạn, cùng với sản xuất và chế biến thực phẩm.

Hình 1.9 Trang chủ phần đầu của website saigontourist.net

Hình 1.10 Trang chủ phần các tour mùa hè của website saigontourist.net

Hình 1.11 Trang chủ các gói khuyến mãi của website saigontourist.net

− Tông màu: Tương phản, dịu mắt

− Chi tiết sản phẩm: Mô tả chi tiết về chuyến đi, có hình ảnh tham khảo, lịch trình đầy đủ…

Hình 1.12 Trang chi tiết tour của website saigontourist.net (1)

− Bố cục sắp xếp: Sắp xếp các thông tin dễ nhìn và tìm kiếm, các mục hài hòa

− Hiệu ứng: Hiệu ứng đơn giản, chủ yếu là chuyển tiếp trang, hiệu ứng zoom ảnh và các slider show bắt mắt

− Dữ liệu sản phẩm: Cung cấp được đầy đủ các thông tin cần thiết của một chuyến đi và những thông tin liên quan khác

Hình 1.13 Trang chi tiết tour của website saigontourist.net (2)

− Tìm kiếm: UX tốt – mờ nền, có chọn địa điểm đến, ngày đi, ngày về Kết quả trả về khá tốt nhưng còn giới hạn số tour

Hình 1.14 Chức năng tìm kiếm của website saigontourist.net

− Sắp xếp: Trang có 3 sự lựa chọn: ngày gần nhất, giá thấp nhất, hấp dẫn nhất

Trang web cung cấp đầy đủ thông tin về đặt tour, bao gồm giá cả chi tiết cho người lớn, trẻ em và em bé, ngày khởi hành, mã tour và các thông tin hấp dẫn về chương trình tour Người dùng dễ dàng tra cứu và lựa chọn tour phù hợp, tích hợp chức năng in chương trình để tiện lợi khi du lịch.

10 tour, lịch trình rõ ràng, hình ảnh nhiều, chính sách tour, các câu hỏi thường gặp, dịch vụ đi kèm và các tour liên quan

− Đăng nhập giúp lưu thông tin chuyến đi và nâng cấp tài khoản, đồng thời giúp đặt tour nhanh hơn ở lần sau

− Hỗ trợ khách hàng: hotline, trả lời thắc mắc qua email và chatbot (đa ngôn ngữ)

− Pop-up ở hình dưới luôn xuất hiện khi chuyển tới bất kỳ trang nào và khi người dùng xác nhận hoặc tắt mới biến mất

Hình 1.15 Pop-up hỏi người dùng ở khu vực nào của website saigontourist.net

Hiện tại, chưa có chức năng đánh giá chuyến đi, khiến người dùng khó có thể có cái nhìn tổng quan hoặc trải nghiệm thực tế từ những đánh giá của người dùng trước đó Việc bổ sung chức năng này sẽ giúp nâng cao trải nghiệm người dùng, cung cấp thông tin chân thực, từ đó đưa ra quyết định phù hợp hơn khi lựa chọn tour du lịch.

Công nghệ áp dụng

ExpressJS Framework

ExpressJS là một framework nhỏ gọn nhưng linh hoạt, xây dựng trên nền tảng của NodeJS, giúp phát triển các ứng dụng web và di động một cách dễ dàng Nó hỗ trợ các phương thức HTTP và middleware, cho phép tạo ra API mạnh mẽ, hiệu quả và dễ sử dụng Với hệ sinh thái phong phú các package hỗ trợ, ExpressJS cung cấp nhiều tính năng nâng cao mà không làm giảm tốc độ của NodeJS Chính nhờ điều này, các framework nổi tiếng như SailsJS và MEAN đều dựa trên ExpressJS như một thành phần cốt lõi, góp phần thúc đẩy phát triển ứng dụng web hiện đại.

2.1.2 Một vài tính năng nổi bật

Hình 2.2 Sơ đồ mô tả các lớp trung gian xử lý HTTP

− Thiết lập router cho phép sử dụng với các hành động khác nhau dựa trên phương thức HTTP và URL

− Cho phép trả về các trang HTML dựa vào các tham số với template engines

− Hiệu suất cao, super-high test coverage

− HTTP helpers (redirection, caching, etc)

− Tạo ứng dụng nhanh chóng

− Thiết lập các lớp trung gian để tiếp nhận và trả về các HTTP request (như hình dưới)

− Express (): một Express application, là hàm đầu tiên được gọi

− Application: một app object, có những phương thức để: Routing HTTP requests,

Cấu hình middleware, Rendering HTML views, đăng ký một template engine

Request (req) đại diện cho HTTP request trong quá trình xử lý, có các thuộc tính quan trọng như request query string, parameters, body và HTTP headers để xử lý dữ liệu một cách linh hoạt Đây là một phiên bản nâng cao của Node’s request, giúp xây dựng các ứng dụng web mạnh mẽ, tối ưu hơn trong việc quản lý và xử lý các yêu cầu từ phía client.

− Response: Đối tượng res đại diện cho HTTP response mà ứng dụng Express gửi khi nhận được HTTP request

Trong Express.js, router được xem như một đối tượng riêng biệt, đóng vai trò như một ứng dụng nhỏ với khả năng xử lý định tuyến và middleware độc lập Mỗi ứng dụng Express đều tích hợp sẵn bộ định tuyến ứng dụng, giúp tổ chức các tuyến đường và middleware một cách hiệu quả, nâng cao khả năng mở rộng và quản lý mã nguồn của dự án.

Công nghệ ReactJS

ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook nhằm tạo ra các ứng dụng website hấp dẫn với tốc độ nhanh và hiệu quả cao Mục đích chính của ReactJS là phát triển các website chạy mượt, nhanh, dễ mở rộng và dễ bảo trì bằng cách tối giản mã nguồn ReactJS giúp xây dựng các ứng dụng web có hiệu năng cao, dễ thao tác và tối ưu hóa trải nghiệm người dùng.

ReactJS nổi bật với khả năng tập trung vào các phần riêng lẻ của giao diện người dùng, giúp xây dựng các thành phần độc lập và dễ quản lý hơn Thay vì hoạt động toàn bộ trên ứng dụng web, ReactJS cho phép phá vỡ giao diện phức tạp thành các thành phần đơn giản, tối ưu hóa quá trình render dữ liệu Ngoài ra, ReactJS hỗ trợ render dữ liệu không chỉ trên server mà còn tại phía client, mang lại hiệu suất cao và trải nghiệm người dùng mượt mà hơn.

Trong React, thay vì phải sử dụng JavaScript thuần để tạo bố cục trang web, chúng ta sử dụng JSX, một cú pháp đơn giản hơn giúp trích dẫn HTML và render các thành phần con một cách dễ dàng JSX giúp tối ưu hóa mã nguồn, làm cho quá trình biên soạn nhanh hơn và hiệu quả hơn so với viết mã JavaScript thông thường Điều này giúp giảm thiểu phức tạp và tăng hiệu suất cho ứng dụng React.

Hình 2.5 Single-way data flow (Luồng dữ liệu một chiều)

ReactJS không có module chuyên dụng để xử lý dữ liệu, vì vậy nó chia nhỏ giao diện thành các component nhỏ liên kết chặt chẽ với nhau Việc hiểu rõ cấu trúc và mối quan hệ giữa các component là rất quan trọng vì luồng dữ liệu trong ReactJS là một chiều từ cha xuống con, giúp kiểm soát và quản lý dữ liệu hiệu quả Mặc dù cơ chế truyền dữ liệu một chiều có thể gây khó khăn cho người mới bắt đầu, nhưng chính nhờ ưu điểm này, ReactJS phát huy hiệu quả rõ rệt khi ứng dụng vào các dự án phức tạp với cấu trúc và chức năng mở rộng.

Frameworks như ReactJS sử dụng Virtual-DOM để tối ưu hóa việc cập nhật giao diện, giúp phản ánh mọi thay đổi mà không cần thao tác trực tiếp với DOM trên View Khi Virtual-DOM thay đổi, nó tự động cập nhật giao diện, giữ cho ứng dụng luôn nhất quán và phản hồi nhanh chóng Virtual-DOM đóng vai trò làm Model và View đồng thời, giúp đơn giản hóa quá trình quản lý trạng thái và hiển thị dữ liệu trong ứng dụng web Điều này giúp phát triển các ứng dụng web hiệu quả hơn, tối ưu về hiệu suất và dễ bảo trì hơn.

Trong mô hình này, 15 thay đổi trên Model sẽ tự động kéo theo sự cập nhật trên View, và ngược lại, tạo thành một cơ chế phản hồi dữ liệu (Data-binding) mạnh mẽ mà không cần tác động trực tiếp vào các phần tử DOM trong View Nhờ vào cơ chế này, tốc độ của ứng dụng được nâng cao rõ rệt, đặc biệt khi kết hợp với công nghệ Virtual-DOM, mang lại hiệu suất tối ưu và trải nghiệm người dùng mượt mà hơn.

2.2.2.4 Lợi ích khi sử dụng ReactJS

Hình 2.7 Lợi ích của ReactJS

Lợi ích đầu tiên của ReactJS là tạo ra một DOM ảo nơi các component được lưu trữ, giúp cải thiện hiệu suất làm việc đáng kể bằng cách tính toán trước các thay đổi Khi cần cập nhật nội dung, ReactJS chỉ thực hiện các thao tác đã được xử lý sẵn trên DOM ảo, từ đó tránh các thao tác không cần thiết trên DOM thực tế và giảm thiểu chi phí hoạt động.

Viết các đoạn mã JavaScript trở nên dễ dàng hơn nhờ vào cú pháp JSX đặc biệt, cho phép trộn lẫn mã HTML và JavaScript một cách linh hoạt JSX còn giúp chèn đoạn code vào trong hàm render mà không cần phải nối chuỗi phức tạp, đây chính là một trong những ưu điểm nổi bật của ReactJS Ngoài ra, việc chuyển đổi các đoạn HTML thành các hàm khởi động cũng được thực hiện dễ dàng thông qua bộ biến đổi chính là JSX, tăng tính hiệu quả trong phát triển ứng dụng.

ReactJS mang lại nhiều lợi ích phát triển, trong đó có các công cụ hỗ trợ mạnh mẽ Khi bắt đầu làm việc với ReactJS, đừng quên cài đặt tiện ích mở rộng Chrome dành riêng cho ReactJS để dễ dàng debug mã nguồn hơn Sau khi cài đặt, bạn có thể trực tiếp xem Virtual DOM, giúp bạn hiểu rõ hơn về cách React cập nhật giao diện Điều này giúp quá trình phát triển trở nên hiệu quả và thuận tiện hơn, mang lại trải nghiệm làm việc tối ưu cho lập trình viên.

ReactJS hỗ trợ mạnh mẽ cho SEO nhờ vào khả năng render trước (server-side rendering) và trả về trình duyệt dưới dạng web page hoàn chỉnh, giúp nội dung hiển thị đầy đủ và tối ưu cho các công cụ tìm kiếm Các Virtual DOM của React giúp tối ưu hiệu suất và khả năng SEO bằng cách cải thiện tốc độ tải trang và khả năng lập chỉ mục của Sitemap Nhờ các yếu tố này, React đảm bảo website của bạn thân thiện với các yêu cầu của các công cụ tìm kiếm, nâng cao khả năng hiển thị và xếp hạng trên các trang kết quả tìm kiếm.

Phân tích yêu cầu

Lược đồ use case

Hình 3.1 Lược đồ use case

Thống kê nghiệp vụ cho từng đối tượng

3.2.1 Người dùng chưa đăng nhập

Đây là nhóm các đối tượng chưa đăng nhập vào hệ thống, sử dụng ứng dụng web để đăng ký tài khoản, đặt tour du lịch, xem danh sách các tour, tìm kiếm tour phù hợp, truy cập danh sách blog và tìm kiếm các bài viết liên quan.

Bảng 3.1 Đặc tả nghiệp vụ xem trang chủ của người dùng chưa đăng nhập

Use case name Xem trang chủ

Brief description Hiển thị nội dung của trang chủ cho người dùng chưa đăng nhập truy cập vào đường dẫn tương ứng dẫn đến trang chủ

Preconditions Người dùng chưa đăng nhập truy cập vào đường dẫn đến trang chủ

Post-conditions Nội dung của website được hiển thị đầy đủ lên trình duyệt

Actor(s) Người dùng chưa đăng nhập

Secondary actor Người dùng đã đăng nhập, Người quản trị

Trigger Người dùng chưa đăng nhập truy cập vào đường dẫn tương ứng với trang chủ

1 Hệ thống nhận request từ trình duyệt

2 Hệ thống trả dữ liệu của trang chủ cho trình duyệt

Bảng 3.2 Đặc tả nghiệp vụ đăng ký của người dùng chưa đăng nhập

Use case name Đăng ký

Brief description Người dùng chưa đăng nhập tiến hành đăng ký tài khoản cho mình, hệ thống kiểm tra và lưu trữ tài khoản vào database

Preconditions Người dùng chưa đăng nhập truy cập đường dẫn đến trang đăng ký

Post-conditions Người dùng chưa đăng nhập đăng ký tài khoản thành công Hệ thống thông báo cho khách đăng ký thành công và gợi ý đến trang đăng nhập

Actor(s) Người dùng chưa đăng nhập

Trigger Người dùng chưa đăng nhập đã chọn đăng ký

1 Hệ thống trả về form đăng ký cho khách

2 Người dùng chưa đăng nhập nhập thông tin tài khoản theo yêu cầu (username, email, phone, password)

3 Hệ thống kiểm tra dữ liệu nhập vào từ form có hợp lệ không

4 Hệ thống trả về kết quả đăng ký

3.1 Nếu không hợp lệ đưa ra thông báo đến khách, yêu cầu nhập lại thông tin

Open issues 4 Hệ thống gợi ý khách đến trang đăng nhập

3.2.2 Người dùng đã đăng nhập

Người dùng đã đăng nhập vào hệ thống để sử dụng ứng dụng web, có thể đặt tour du lịch, xem thông tin chi tiết về các tour, lịch trình, và bài viết blog liên quan Họ còn có thể bình luận, đánh giá tour để chia sẻ trải nghiệm, đồng thời dễ dàng tiến hành đặt tour, xem lịch trình, và đăng xuất khi hoàn thành thao tác.

Bảng 3.3 Đặc tả nghiệp vụ đăng nhập của người dùng đã đăng nhập

Use case name Đăng nhập

Người dùng đăng nhập vào hệ thống bằng email và mật khẩu, sau đó cookie được khởi tạo để xác thực phiên làm việc Trang web hiển thị trạng thái đã đăng nhập bằng cách thay thế chữ “sign in” bằng avatar của người dùng ở phần header, mang lại trải nghiệm người dùng thuận tiện và trực quan.

Hệ thống ghi nhận người dùng đã đăng nhập thành công và hiển thị các chức năng phù hợp với quyền của người dùng, bao gồm mua tour, bình luận và truy cập các hóa đơn cùng dữ liệu khách hàng trước đó Các thông tin này được lưu trữ liên tục để cung cấp trải nghiệm cá nhân hóa, giúp người dùng dễ dàng thao tác và quản lý các hoạt động của mình trên nền tảng.

Actor(s) Người dùng đã đăng nhập

Trigger Người dùng nhấn vào các button hoặc link dẫn đến trang đăng nhập

1 Người dùng nhập thông tin login (email, password và tùy chọn ghi nhớ)

2 Hệ thống hiển thị trạng thái chờ và xử lý nghiệp vụ

3 Hệ thống hiển thị kết quả của nghiệp vụ

3.1 Nếu thông tin đăng nhập có email không hợp lệ thì trả về thông báo không tồn tại email trong hệ thống dữ liệu 3.2 Nếu password sai với email tương ứng thì trả về thông báo password không đúng 3.3 Nếu thông tin đăng nhập thành công thì chuyển về trang chủ và hiển thị avatar ở header thay cho chữ “sign in” Hệ thống lưu token ở trong cookie mà back-end gửi lên

Open issues 4 Hệ thống gợi ý người dùng đến trang đăng nhập và trang chủ

Bảng 3.4 Đặc tả nghiệp vụ xem thông tin của người dùng đã đăng nhập

Use case name Xem thông tin tài khoản

Người dùng có thể xem thông tin cá nhân và đơn hàng của mình trong một cửa sổ drawer phía bên phải, giúp dễ dàng truy cập và quản lý Trong drawer này, họ cũng có thể chỉnh sửa thông tin cá nhân, đơn hàng và tour một cách nhanh chóng và thuận tiện, mang lại trải nghiệm người dùng tối ưu.

Preconditions Người dùng đã đăng nhập vào hệ thống

Post-conditions Thông tin tài khoản không thay đổi gì so với lúc ban đầu drawer được hiển thị

Trigger Người dùng hover vào [avatar] ở thanh navigation

1 Người dùng chọn [profile] trong dropdown của [avatar]

2 Hệ thống kiểm tra tính hợp lệ của phiên và hiển thị thông tin của người dùng dưới dạng là drawer (bên phải)

2.1 Nếu token không hợp lệ thông báo lỗi cho client Front-end xóa token và cookie hiện tại và chuyển đến trang đăng nhập

Bảng 3.5 Đặc tả nghiệp vụ sửa thông tin tài khoản của người dùng đã đăng nhập

Use case name Sửa thông tin tài khoản

Khi người dùng chọn chức năng sửa tài khoản, hệ thống cho phép họ điền các thông tin muốn chỉnh sửa một cách dễ dàng Sau đó, hệ thống xác nhận các thay đổi và lưu trữ dữ liệu mới vào cơ sở dữ liệu một cách an toàn và chính xác Điều này giúp đảm bảo thông tin tài khoản luôn được cập nhật đúng và nhanh chóng.

Preconditions Người dùng đã đăng nhập vào hệ thống

Post-conditions Thông tin tài khoản thay đổi thành công

Trigger Người dùng đã chọn sửa tài khoản

1 Hệ thống hiển thị form nhập liệu với những thông tin tài khoản của người dùng tương ứng với phiên đăng nhập

2 Người dùng nhập liệu các thông tin muốn thay đổi

3 Hệ thống kiểm tra các thông tin nhập hợp lệ hay không

4 Hệ thống lưu trữ các thông tin và trả về thông tin mới đồng thời thông báo thành công cho người dùng

3.1 Nếu không hợp lệ thì thông báo đến người dùng và yêu cầu người dùng nhập lại thông tin

Bảng 3.6 Đặc tả nghiệp vụ xem danh sách tour của người dùng đã đăng nhập

Use case name Xem danh mục tour

Người dùng dễ dàng truy cập trang danh mục tour qua menu chính hoặc chức năng tìm kiếm trên trang chủ Danh sách tour được hiển thị dựa trên ngày khởi hành gần nhất hoặc theo kết quả tìm kiếm phù hợp, giúp khách hàng dễ dàng lựa chọn tour phù hợp nhất.

Trigger Người dùng truy cập vào link dẫn tới trang danh mục tour

1 Hệ thống gửi yêu cầu lấy dữ liệu theo param tại trình duyệt

2 Hệ thống tính toán và hiển thị tour theo điều kiện sắp xếp và lọc

2.1 Nếu không có sản phẩm hiển thị dòng chữ “Chưa có dữ liệu phù hợp” và trạng thái chờ dữ liệu

Bảng 3.7 Đặc tả nghiệp vụ thanh toán tour của người dùng đã đăng nhập

Use case name Thanh toán tour

Brief description Người dùng chọn hình thức thanh toán online ở bước 3 của đặt tour

Người dùng tiến hành thanh toán với cổng thanh toán đã chọn, hệ thống hiển thị kết quả trả về

Preconditions Người dùng đã hoàn thành bước 2 của đặt tour (mã đặc tả: 14-U-

Secondary actor Cổng thanh toán

Trigger Người dùng nhấn [Thanh toán ngay] của một trong các cổng thanh toán

1 Người dùng chọn hình thức thanh toán

2 Người dùng chọn một trong số các cổng thanh toán và chọn [Thanh toán ngay]

3 Hệ thống chuyển dữ liệu thanh toán tới trang của cổng thanh toán tương ứng

4 Người dùng tiến hành thanh toán với các yêu cầu của cổng thanh toán (nhập thông tin thẻ) và tiến hành xác nhận thanh toán

5 Hệ thống hiển thị kết quả thanh toán cho người dùng

3.1 Nếu người dùng chọn thanh toán chuyển khoản và chọn

[done], hệ thống chuyển tới trang kết quả đơn hàng đang được chờ thanh toán và hiển thị mã PIN cho người dùng lưu lại

5.1 Nếu người dùng chọn hủy thanh toán hệ thống hiển thị lại trang thanh toán ở bước 1 – xác nhận tour muốn mua

Open issues Hệ thống gửi mail xác nhận đã thanh toán đơn hàng với mã PIN tương ứng cho người dùng

Cổng thanh toán gửi mail xác nhận cho người dùng Trang kết quả thanh toán có điều hướng về trang chủ

Bảng 3.8 Đặc tả nghiệp vụ tìm kiếm tour của người dùng đã đăng nhập

Use case name Tìm kiếm tour

Người dùng có thể tìm kiếm dễ dàng trên trang chủ hoặc trang danh mục sản phẩm bằng cách nhập từ khóa liên quan đến địa chỉ, địa danh, tên tour hoặc loại tour mong muốn Họ cũng có thể tùy chỉnh các tùy chọn tìm kiếm như ngày dự định đi, chọn khoảng thời gian từ ngày nào đến ngày nào để có kết quả phù hợp Việc cung cấp các bộ lọc linh hoạt giúp nâng cao trải nghiệm người dùng và tối ưu hóa khả năng tìm thấy tour phù hợp nhanh chóng.

Trigger Người dùng đang ở một trong các trang: trang chủ, trang danh mục tour, và nhấn [Tìm kiếm Tour]

Người dùng nhập dữ liệu tìm kiếm và chọn các tùy chọn phù hợp để tìm tour du lịch, bao gồm ngày dự định khởi hành từ ngày nào đến ngày nào, cùng các tiêu chí như tên tour, địa chỉ, địa danh hoặc loại tour Việc lựa chọn các tùy chọn tìm kiếm chính xác giúp nâng cao hiệu quả tìm kiếm và giúp người dùng dễ dàng tìm thấy tour phù hợp với nhu cầu của mình.

2 Hệ thống hiển thị danh mục tour theo điều kiện tương ứng

Open issues Nếu dữ liệu tìm kiếm không có gợi ý người dùng đến các kết quả tìm kiếm có dữ liệu nhiều hơn

Bảng 3.9 Đặc tả nghiệp vụ xem chi tiết một tour của người dùng

Use case name Xem chi tiết một tour

Người dùng muốn xem thông tin chi tiết của một tour du lịch, do đó họ thường nhấn vào hình ảnh, tiêu đề hoặc nút [Xem chi tiết] trên mỗi tour để dễ dàng truy cập thông tin cần thiết Việc cung cấp các liên kết rõ ràng, hấp dẫn giúp nâng cao trải nghiệm người dùng và tăng khả năng tương tác trên trang Đảm bảo nội dung mô tả tour hấp dẫn, tối ưu hóa từ khóa liên quan để cải thiện thứ hạng tìm kiếm và thu hút nhiều khách hàng hơn.

Trigger Người dùng nhấn vào hình ảnh, tiêu đề của tour, hoặc nút [Xem chi tiết] tại một tour bất kỳ

1 Người dùng nhấn vào ảnh hoặc tiêu đề của tour

2 Hệ thống hiển thị trang chi tiết tour tương ứng với tour mà người dùng chọn

Bảng 3.10 Đặc tả nghiệp vụ thanh toán tour của người dùng đã đăng nhập

Use case name Thanh toán tour

Brief description Sau khi người dùng chọn được tour ưng ý, họ tiến hành đặt tour, hệ thống hiển thị trang với 3 bước:

Vui lòng xác nhận lại tour mà bạn muốn đặt để hệ thống có thể tính toán chính xác chi phí Tiếp theo, người dùng cần nhập đầy đủ thông tin cần thiết để hệ thống xử lý và tính toán giá cả một cách nhanh chóng và chính xác Sau đó, bạn chọn hình thức thanh toán phù hợp, bao gồm thanh toán trực tuyến hoặc chuyển khoản ngân hàng, để hoàn tất quá trình đặt tour một cách thuận tiện nhất.

Sau khi hoàn tất thanh toán, thông tin hóa đơn sẽ được gửi đến email của người dùng đã đăng ký, giúp họ dễ dàng lưu trữ và tra cứu sau này Họ còn nhận được kết quả thanh toán cho các khoản thanh toán trực tuyến cùng mã PIN riêng biệt để bảo mật và thuận tiện trong việc lưu trữ thông tin.

Secondary actor Quản lý, cổng thanh toán

Trigger Người dùng chọn [Thanh toán ngay] của tour họ muốn tiến hành thanh toán

1 Người dùng nhấn vào [Thanh toán ngay]

2 Hệ thống chuyển hướng đến trang thanh toán với 3 bước

3 Người dùng xác nhận thông tin và chọn next

Hệ thống hiển thị trang form cho người dùng nhập các thông tin cần thiết như tên, email, số điện thoại, địa chỉ, số người lớn và trẻ em, giúp thu thập dữ liệu một cách dễ dàng Trang form còn yêu cầu người dùng đồng ý với các điều khoản và chính sách để đảm bảo quyền lợi và sự đồng thuận từ phía người dùng Việc thiết kế trang form rõ ràng, dễ sử dụng không những nâng cao trải nghiệm khách hàng mà còn tối ưu hóa khả năng thu thập dữ liệu chính xác Điều này giúp doanh nghiệp xây dựng mối quan hệ tin cậy và phát triển các chiến dịch marketing hiệu quả dựa trên thông tin đã nhập.

5 Người dùng nhập các thông tin và chọn [Xác nhận thông tin là chính xác]

6 Hệ thống thông báo cho người dùng và yêu cầu đến bước tiếp theo

7 Người dùng chọn hình thức thanh toán và tiến hành thanh toán

8 Hệ thống hiển thị kết quả đặt tour cho người dùng

8.1 Nếu người dùng chọn thanh toán chuyển khoản và chọn

[done], hệ thống chuyển tới trang kết quả đơn hàng đang được chờ thanh toán và hiển thị mã PIN cho người dùng lưu lại

8.2 Nếu người dùng chọn hủy thanh toán hệ thống hiển thị lại trang thanh toán ở bước 1 – xác nhận tour muốn mua

Open issues Hệ thống gửi mail xác nhận đã thanh toán đơn hàng với mã PIN tương ứng cho người dùng

Bảng 3.11 Đặc tả nghiệp vụ xem danh sách các tour đã đặt của người dùng đã đăng nhập

Use case name Xem danh sách tour đã đặt

Brief description Người dùng muốn xem tour mà họ đã đặt, hệ thống hiển thị danh sách tour đã đặt dưới dạng drawer

Trigger Người dùng hover vào “Tên người dùng” ở thanh navigation

1 Người dùng chọn [Danh sách tour đã đặt] trong dropdown của “Tên người dùng”

2 Hệ thống kiểm tra người dùng có đăng nhập không và hiển thị dữ liệu tour đã đặt

2.1 Nếu token không hợp lệ thông báo lỗi cho client Front-end xóa token và cookie hiện tại và chuyển đến trang đăng nhập

2.2 Nếu người người dùng chưa đăng nhập, lấy dữ liệu được lưu ở local storage

Bảng 3.12 Đặc tả nghiệp vụ đánh giá tour đã đi của người dùng đã đăng nhập

Use case name Đánh giá tour đã đi

Hệ thống gửi email tự động cho người dùng sau khi tour du lịch kết thúc nhằm khuyến khích họ đánh giá mức độ hài lòng về trải nghiệm của mình Người dùng có thể dễ dàng chia sẻ phản hồi hoặc bỏ qua nếu không muốn đánh giá Việc này giúp nâng cao chất lượng dịch vụ và cải thiện trải nghiệm khách hàng trong các chuyến đi tiếp theo.

Preconditions Người dùng đã đặt tour và thời gian tour đã kết thúc

Trigger Người dùng nhấn vào link mà hệ thống gửi yêu cầu đánh giá tour sau thời gian tour kết thúc

1 Hệ thống hiển thị các input star để người dùng bình chọn và input cho người dùng nhập nhận xét của họ

2 Hệ thống ghi nhận và hiển thị trang cảm ơn người dùng

Bảng 3.13 Đặc tả nghiệp vụ xem blog du lịch của người dùng đã đăng nhập

Use case name Xem blog du lịch

Thiết kế hệ thống

Mô hình kiến trúc

Hình 4.1 Mô hình kiến trúc

Lược đồ lớp

Lược đồ tuần tự

Hình 4.3 Lược đồ tuần tự “Đăng ký”

Hình 4.4 Lược đồ tuần tự “Đăng nhập”

4.3.3 Chức năng “Sửa thông tin cá nhân”

Hình 4.5 Lược đồ tuần tự “Sửa thông tin cá nhân”

4.3.4 Chức năng “Xác nhận email”

Hình 4.6 Lược đồ tuần tự “Xác nhận email”

4.3.5 Chức năng “Thêm tour mới”

Hình 4.7 Lược đồ tuần tự “Thêm tour mới”

4.3.6 Chức năng “Tìm kiếm tour”

Hình 4.8 Lược đồ tuần tự “Tìm kiếm tour”

4.3.7 Chức năng “Đánh giá tour”

Hình 4.9 Lược đồ tuần tự “Đánh giá tour”

Hình 4.10 Lược đồ tuần tự “Đặt tour”

4.3.9 Chức năng “Thanh toán tour”

Hình 4.11 Lược đồ tuần tự “Thanh toán tour”

4.3.10 Chức năng “Xem trang chủ admin”

Hình 4.12 Lược đồ tuần tự “Xem trang chủ admin”

Hình 4.13 Lược đồ tuần tự “Thống kê”

Physical diagram

Hình 4.14 Physical diagram 4.4.1 Mô tả bảng

Bảng 4.1 Mô tả các bảng trong lược đồ cơ sở dữ liệu

STT Tên bảng Mô tả

Trong hệ thống quản lý tour du lịch, cả admin và người dùng đều cần có tài khoản để đăng nhập Tùy thuộc vào loại tài khoản và chức vụ của người dùng, hệ thống sẽ hiển thị các chức năng phù hợp, đảm bảo quản lý hiệu quả và trải nghiệm người dùng tối ưu.

2 evaluates Sau khi người dùng đã booking và đã đi, thì sẽ được đánh giá và bình luận về chất lượng cũng như dịch vụ của tour

3 images Lưu thông tin hình ảnh của từng tour du lịch và các bài viết

4 schedules Lưu thông tin lịch trình của tour du lịch như giá, chính sách, các ghi chú và cách thức liên lạc

5 timelines Lưu thông tin chi tiết về ngày, giờ và địa điểm di chuyển của từng tour du lịch

6 services Thông tin các dịch vụ được áp dụng cho tour

7 categories Thông tin các loại tour

8 orders Lưu trữ thông tin tour du lịch mà người dùng đã mua

9 posts Thông tin của các bài viết trên trang web

10 tours Lưu các thông tin của từng tour du lịch

4.4.2 Danh sách chi tiết các bảng

Bảng 4.2 Mô tả chi tiết bảng Accounts

STT Thuộc tính Mô tả Kiểu dữ liệu Ràng buộc

1 idAccount Mã tài khoản INT(11) PK, NN, AI

2 name Tên người dùng VARCHAR(100) / NULL

4 phone Số điện thoại VARCHAR(100) / NULL

5 role Quyền (user, admin) VARCHAR(100) NN / ‘user’

6 username Tên đăng nhập VARCHAR(100) / NULL

7 password Mật khẩu VARCHAR(100) / NULL

8 avatar Ảnh đại diện VARCHAR(200) NN / ‘img/ avatarDafault.jpg’

9 address Địa chỉ VARCHAR(200) / NULL

10 gender Giới tính VARCHAR(100) NN / ‘none’

11 dob Ngày sinh DATETIME / NULL

12 verify Xác thực tài khoản TINYINT(10) NN / 0

13 verifyToken Xác thực token VARCHAR(100) / ‘new’

Trạng thái của dữ liệu (new, edited, deleted)

15 dateAdded Ngày thêm DATETIME CURRENT_

16 dateEdited Ngày sửa DATETIME / NULL

17 dateDeleted Ngày xóa DATETIME / NULL

Bảng 4.3 Mô tả chi tiết bảng Evaluates

1 idEvaluate Mã đánh giá INT(11) PK, NN, AI

2 idTour Mã tour INT(11) FK

3 numberStarService Số sao đánh giá dịch vụ INT(10) / NULL

4 numberStarLocation Số sao đánh giá địa điểm INT(10) / NULL

5 numberStarPrice Số sao đánh giá giá cả INT(10) / NULL

6 numberStarCleanliness Số sao đánh giá sự sạch sẽ INT(10) / NULL

Số sao đánh giá cơ sở vật chất

8 titleEvaluate Tiêu đề VARCHAR(100) NN / ‘’

9 content Nội dung VARCHAR(2000) / NULL

11 status Trạng thái đánh giá VARCHAR(45) /NULL

12 rateAverage Điểm trung bình INT(10) / NULL

13 typeEvaluate Loại đánh giá VARCHAR(100) / NULL

Bảng 4.4 Mô tả chi tiết bảng Images

1 idImage Mã hình ảnh INT(11) PK, NN, AI

3 idPost Mã bài viết INT(11) FK

4 url Đường dẫn hình ảnh VARCHAR(200) NN / ‘img/ error.jpg’

5 status Trạng thái của hình VARCHAR(200) / ‘done’

6 name Tên hình ảnh VARCHAR(200) / ‘error’

Bảng 4.5 Mô tả chi tiết bảng Timelines

1 idTimeline Mã lịch trình INT(11) PK, NN, AI

3 title Tiêu đề lịch trình VARCHAR(200) / NULL

4 dayIndex Chỉ ngày số thứ INT(100) / NULL

5 Image Hình ảnh về lịch trình VARCHAR(200) / NULL

6 description Mô tả lịch trình VARCHAR(500) / NULL

Bảng 4.6 Mô tả chi tiết bảng Services

1 idService Mã dịch vụ INT(11) PK, NN, AI

2 titleService Tên dịch vụ VARCHAR(100) / NULL

3 description Mô tả dịch vụ VARCHAR(100) / NULL

Bảng 4.7 Mô tả chi tiết bảng Categories

1 idCategory Mã loại INT(11) PK, NN, AI

2 name Tên loại VARCHAR(100) / NULL

Bảng 4.8 Mô tả chi tiết bảng Orders

1 idOrder Mã đơn hàng INT(11) PK, NN, AI

2 idAccount Mã tài khoản INT(11) FK

4 PIN Mã PIN VARCHAR(100) / NULL

Trạng thái đơn hàng (chưa thanh toán, đã thanh toán)

6 totalPrice Tổng giá của đơn hàng DOUBLE / NULL

7 numberPeople Số lượng người lớn INT(11) / 1

8 address Địa chỉ VARCHAR(100) / NULL

9 phone Số điện thoại liên hệ VARCHAR(100) / NULL

10 email Hộp thư điện tử VARCHAR(100) / NULL

11 paymentMethod Phương thức thanh toán người dùng chọn VARCHAR(100) / NULL

12 notes Ghi chú của người dùng VARCHAR(100) / NULL

13 buyer Người mua tour VARCHAR(100) / NULL

Trạng thái của dữ liệu hiện tại (new, edited, deleted)

Bảng 4.9 Mô tả chi tiết bảng Posts

1 idPost Mã bài viết INT(11) PK, NN, AI

2 titlePost Tiêu đề bài viết VARCHAR(100) / NULL

3 describe Miêu tả bài viết VARCHAR(100) / NULL

4 contentPost Nội dung bài viết (html) MEDIUMTEXT / NULL

5 status Trạng thái bài viết (new

6 vote Bỏ phiếu bài viết INT(11) / 0

7 type Loại bài viết VARCHAR(100 / NULL

8 views Số lượt xem INT(11) / 0

9 tags Tag của bài viết VARCHAR(200) / ‘[]’

Bảng 4.10 Mô tả chi tiết bảng Schedule

1 idSchedules Mã lịch trình INT(11) PK, NN, AI

2 data Lịch trình MEDIUMTEXT / NULL

Bảng 4.11 Mô tả chi tiết bảng Tours

1 idTour Mã tour INT(11) PK, NN, AI

2 titleTour Tiêu đề tour VARCHAR(200) / NULL

3 price Giá tour DOUBLE / NULL

4 sale Khuyến mãi tour DOUBLE / NULL

5 departureDay Ngày khởi hành DATETIME / NULL

6 departureAddress Địa chỉ khởi hành VARCHAR(100) / ‘Hồ Chí

7 describe Mô tả VARCHAR(2000) / NULL

8 destination Địa chỉ VARCHAR(500) / NULL

9 vocationTime Thời lượng tour VARCHAR(200) / 1 ngày 0 đêm

10 groupSize Số lượng người tối đa INT(11) / NULL

11 minAge Độ tuổi thấp nhất được chấp nhận INT(11) / NULL

12 type Loại tour VARCHAR(100) / NULL

13 tags Tag của tour VARCHAR(200) / NULL

14 services Các dịch vụ của tour VARCHAR(200) / NULL

15 votes Số lượng đánh giá tour INT(11) 0

16 video Video giới thiệu tour VARCHAR(200) / NULL

Giao diện

Giao diện trang khách

Hình 5.5 Trang chủ (5) (user) Bảng 5.1 Mô tả trang chủ (user)

STT Tên Loại Thư viện Ghi chú

1 Trang chủ Link react-router-dom Dẫn tới trang chủ của khách

Hiển thị 2 lựa chọn xem: dạng lưới, dạng danh sách

3 Cẩm nang du lịch Link react-router-dom Dẫn tới trang các bài viết

4 Địa điểm yêu thích Link react-router-dom

5 Liên hệ Link react-router-dom

6 Đăng ký Button Ant Design Hiển thị modal đăng ký

7 Đăng nhập Link react-router-dom Hiển thị modal đăng nhập

8 Tiêu đề tour h3 html Hiển thị tiêu đề của tour

9 Mô tả tour p html Hiển thị mô tả của tour

10 Xem chi tiết Button Ant Design Dẫn tới trang chi tiết của tour tương ứng

11 Điểm đến Input Ant Design Ô nhập dữ liệu tìm kiếm

12 Thời gian RangePicker Ant Design Ô cho phép người dùng chọn ngày đến và đi Hiển thị dropdown lịch biểu để chọn ngày

13 Giá Seletc Ant Design Hiển thị các lựa chọn giá cả

14 Tìm kiếm Button Ant Design Dẫn tới trang danh sách tour đã được lọc

15 Hình ảnh tour Link react-router-dom Dẫn tới trang chi tiết của tour tương ứng

17 Điểm đánh giá Rate Ant Design

Hiển thị số sao trung bình mà người dùng đã đánh giá

18 Số lượt đánh giá p html Hiển thị số lượt được người dùng đánh giá

19 Số lượng ngày đi span html Hiển thị số lượng ngày đi

20 Giá span html Hiển thị số tiền của tour

ButtonNext Ant Design Chuyển slide sang trái và phải

23 Tên địa điểm Link Ant Design

Dẫn tới trang danh sách tour được lọc theo tên địa điểm

24 Hình ảnh bài viết img html Hiển thị hình ảnh của bài viết

25 Tiêu đề bài viết Link react-router-dom Hiển thị tiêu đề bài viết

26 Nội dung bài viết span html Hiển thị nội dung bài viết

27 Sao Rate Ant Design Hiển thị số sao bài viết được đánh giá

28 Nội dung đánh giá Typography Ant Design Hiển thị nội dung đánh giá

29 Tiêu đề đánh giá h4 html Hiển thị tên tiêu đề đánh giá

30 Email span html Hiển thị email người đánh giá

31 Thời gian đánh giá span html Hiển thị thời gian đã đánh giá

32 Sao đánh giá Rate Ant Design Hiển thị số sao trung bình được đánh giá

Hình 5.6 Trang đăng ký Bảng 5.2 Mô tả trang đăng ký

1 Họ và tên Input Ant Design Nhập họ và tên

2 Email Input Ant Design Nhập email

3 Mật khẩu Input Ant Design Nhập mật khẩu

4 Nhập lại mật khẩu Input Ant Design Nhập lại mật khẩu

5 Đăng ký Button Ant Design Đăng ký

6 Đóng modal Modal Ant Design Đóng modal

Hình 5.7 Trang đăng nhập Bảng 5.3 Mô tả trang đăng nhập

1 Email Input Ant Design Nhập email

2 Mật khẩu Input Ant Design Nhập mật khẩu

3 Đăng nhập Button Ant Design Đăng nhập

4 Đóng modal Modal Ant Design Đóng modal

5.1.4 Trang thông tin cá nhân

Hình 5.8 Trang thông tin cá nhân (user) Bảng 5.4 Mô tả trang thông tin cá nhân (user)

1 Hình ảnh Upload Ant Design Hiển thị và tải ảnh lên

2 Họ và tên Input Ant Design Chứa họ tên người dùng

3 Số điện thoại Input Ant Design Chứa số điện thoại người dùng

4 Email Input Ant Design Chứa email người dùng

5 Địa chỉ Input Ant Design Chứa địa chỉ người dùng

6 Lưu thông tin Button Ant Design Lưu thông tin người dùng nếu có thay đổi

7 Thông tin cá nhân Option Ant Design

Chuyến đến trang thông tin cá nhân của người dùng

8 Lịch sử đặt tour Option Ant Design

Chuyển đến trang các đơn đặt hàng người dùng đã đặt

9 Đăng xuất Option Ant Design Xóa cookie và quay lại trang chủ

Hình 5.9 Trang danh sách tour (1)

Hình 5.10 Trang danh sách tour (2) Bảng 5.5 Mô tả trang danh sách tour

1 Lọc theo địa chỉ Select Ant Design Hiển thị các lựa chọn

2 Mặc định Option Ant Design Hiển thị tour mặc định

3 Tour mới Option Ant Design Lọc các tour mới nhất

4 Giá: Thấp đến cao Option Ant Design Lọc theo giá từ thấp tới cao

5 Giá: Cao tới thấp Option Ant Design Lọc theo giá từ cao tới thấp

6 A đến z Option Ant Design Lọc theo bảng chữ cái

7 Dạng lưới Link react-router-dom Dẫn tới trang danh sách tour dạng lưới

8 Dạng danh sách Link react-router-dom Dẫn tới trang danh sách tour dạng danh sách

9 Điểm đến Input Ant Design Nhập địa điểm muốn đi

10 Ngày đi DatePicker Ant Design Chọn ngày đi

11 Ngày về DatePicker Ant Design Chọn ngày về

12 Loại tour Select Ant Design Hiển thị các lựa chọn loại tour

13 Tìm kiếm Button Ant Design Lọc danh sách tour theo các giá trị đã chọn

14 Chọn giá Select Ant Design Hiển thị các lựa chọn giá

Hình 5.11 Trang chi tiết tour (1)

Hình 5.14 Trang chi tiết tour (4) Bảng 5.6 Mô tả trang chi tiết tour

1 Hình ảnh Button Ant Design Hiển thị các hình ảnh của tour

2 Video Button Ant Design Hiển thị video của tour

3 Mô tả ngắn a html Di chuyển tới phần mô tả và các dịch vụ của tour

4 Hành trình a html Di chuyển tới phần lịch trình của tour

5 Chi tiết a html Di chuyển tới phần mô tả chi tiết lịch trình tour

6 Bản đồ a html Di chuyển tới bản đồ

7 Đánh giá a html Di chuyển tới phần đánh giá tour

8 Tiêu đề tour h3 html Hiển thị tiêu đề tour

9 Địa điểm p html Hiển thị địa điểm

10 Khoảng thời gian span html Hiển thị số ngày đi

11 Số lượng span html Hiển thị số lượng người tối đa

12 Loại tour span html Hiển thị loại tour

13 Ngày khởi hành span html Hiển thị ngày khởi hành

14 Độ tuổi nhỏ nhất span html Hiển thị độ tuổi nhỏ nhất được cho phép

15 Địa điểm khởi hành span html Hiển thị địa điểm khởi hành

16 Giá tiền span html Hiển thị giá tiền của tour

17 Giá gốc span html Hiển thị giá gốc của tour

18 Phần trăm giảm giá span html Hiển thị phần trăm giảm giá của tour

19 Thời gian RangePicker Ant Design Hiển thị ngày đi và ngày về

20 Giảm số lượng i html Giảm số lượng người đi

21 Tăng số lượng i html Tăng số lượng người đi

22 Đặt ngay Button Ant Design Dẫn tới trang đặt tour

23 Lịch trình đi Accordion Ant Design Hiển thị ngày đi, tiêu đề và nội dung

24 Mô tả chi tiết CKEditor Ckeditor4- react

Hiển thị nội dung mô tả chi tiết tour bao gồm hình ảnh, youtube, nội dung

25 Điểm đánh giá h2 html Hiển thị số điểm đánh giá trung bình

26 Trung bình số sao của ‘Dịch vụ’ Rate Ant Design

Hiển thị số sao trung bình được đánh giá cho ‘Dịch vụ’

27 Trung bình số sao của ‘Giá tiền’ Rate Ant Design

Hiển thị số sao trung bình được đánh giá cho ‘Giá tiền’

28 Trung bình số sao của ‘Tiện nghi’ Rate Ant Design

Hiển thị số sao trung bình được đánh giá cho ‘Tiện nghi’

29 Trung bình số sao của ‘Vị trí’ Rate Ant Design Hiển thị số sao trung bình được đánh giá cho ‘Vị trí’

30 Trung bình số sao của ‘Sạch sẽ’ Rate Ant Design

Hiển thị số sao trung bình được đánh giá cho ‘Sạch sẽ’

31 Tổng số bình luận span html Hiển thị tổng số bình luận của tour

32 Xem thêm đánh giá Button Ant Design Hiển thị thêm các đánh giá

‘Dịch vụ’ Rate Ant Design Hiển thị số sao ‘Dịch vụ’ để người dùng đánh giá

‘Giá tiền’ Rate Ant Design Hiển thị số sao ‘Giá tiền’ để người dùng đánh giá

35 Đánh giá số sao ‘Vị trí’ Rate Ant Design Hiển thị số sao ‘Vị trí’ để người dùng đánh giá

‘Sạch sẽ’ Rate Ant Design Hiển thị số sao ‘Sạch sẽ’ để người dùng đánh giá

‘Tiện nghi’ Rate Ant Design

Hiển thị số sao ‘Tiện nghi’ để người dùng đánh giá

38 Tiêu đề input html Ô nhập dữ liệu tiêu đề

39 Email input html Ô nhập dữ liệu email

40 Nội dung textarea html Ô nhập dữ liệu nội dung

41 Đánh giá Button Ant Design Đánh giá tour

5.1.7 Trang chi tiết đặt tour

Hình 5.15 Trang chi tiết đặt tour Bảng 5.7 Mô tả trang chi tiết đặt tour

1 Nhập họ và tên input html Nhập họ và tên của khách hàng

2 Nhập số điện thoại input html Nhập số điện thoại của khách hàng

3 Nhập email input html Nhập email của khách hàng

4 Nhập địa chỉ input html Nhập địa chỉ của khách hàng

5 Hình ảnh MOMO img html Hình ảnh phương thức thanh toán bằng MOMO

6 Hình ảnh Chuyển khoản img html

Hình ảnh phương thức thanh toán bằng Chuyển khoản

7 Hình ảnh Tiền mặt img html Hình ảnh phương thức thanh toán bằng Tiền mặt

8 Số người span html Số người đặt tour

9 Giá gốc span html Giá chưa có khuyến mãi

10 Khuyến mãi span html Số tiền được khuyến mãi

11 Tổng tiền span html Tổng tiền khi đã áp dụng khuyến mãi

Hình 5.16 Trang thanh toán momo Bảng 5.8 Mô tả trang thanh toán momo

1 Số tiền span html Hiển thị số tiền của hóa đơn

2 Email span html Hiển thị email của người dùng đặt tour

3 Mã đơn hàng span html Hiển thị mã đơn hàng

4 Mã QR QR MOMO Hiển thị mã QR để người dùng thanh toán

Hiển thị nút quay lại hóa đơn khi người dùng không muốn thanh toán nữa

5.1.9 Trang chi tiết hóa đơn

Hình 5.17 Trang chi tiết hóa đơn Bảng 5.9 Mô tả trang chi tiết hóa đơn

1 Các bước đặt tour li html Hiển thị các bước đặt tour

Hiển thị trạng thái của hóa đơn (Mới, Chờ thanh toán, Đã thanh toán, Đã hoàn thành, Đã hủy)

3 Giá gốc span html Hiển thị giá gốc của tour khi chưa có khuyến mãi

4 Phương thức thanh toán span html Phương thức thanh toán mà người dùng chọn

5 Khuyến mãi span html Hiển thị số tiền khuyến mãi

6 Tổng cộng span html Tổng cộng số tiền khách hàng phải thanh toán

7 Hoàn tất Link react-router-dom Dẫn đến trang danh sách các tour đã đặt

5.1.10 Trang danh sách bài viết

Hình 5.18 Trang danh sách bài viết Bảng 5.10 Mô tả trang danh sách bài viết

1 Tiêu đề danh sách bài viết title html Hiển thị tiêu đề danh sách bài viết

2 Tổng số bài viết title html Hiển thị tổng số bài viết

3 Hình ảnh bài viết img html Hiển thị hình ảnh đại diện của bài viết

4 Tiêu đề bài viết h3 html Hiển thị tiêu đề của bài viết

5 Nội dung bài viết span html Hiển thị nội dung của bài viết

6 Đánh giá và bình luận span html Hiển thị số lượt đánh giá và bình luận

5.1.11 Trang chi tiết bài viết

Hình 5.19 Trang chi tiết bài viết Bảng 5.11 Mô tả trang chi tiết bài viết

1 Tiêu đề bài viết h2 html Hiển thị tiêu đề bài viết

2 Lượt xem bài viết span html Hiển thị số lượt xem bài viết

3 Nội dung mô tả ngắn span html Hiển thị nội dung mô tả ngắn của bài viết

4 Nội dung bài viết CKEditor ckeditor4-react Hiển thị toàn bộ nội dung bài viết gồm hình ảnh, video, nội dung

5.1.12 Trang lịch sử đặt tour

Hình 5.20 Trang lịch sử đặt tour Bảng 5.12 Mô tả trang lịch sử đặt tour

1 Trạng thái: Mới Select.Option Ant Design

Hiển thị các đơn hàng có trạng thái ‘Mới’ của người dùng

2 Trạng thái: Chờ thanh toán Select.Option Ant Design

Hiển thị các đơn hàng có trạng thái ‘Chờ thanh toán’ của người dùng

3 Trạng thái: Đã thanh toán Select.Option Ant Design

Hiển thị các đơn hàng có trạng thái ‘Đã thanh toán’ của người dùng

4 Trạng thái: Đã hoàn thành Select.Option Ant Design

Hiển thị các đơn hàng có trạng thái ‘Đã hoàn thành’ của người dùng

5 Trạng thái: Đã hủy Select.Option Ant Design

Hiển thị các đơn hàng có trạng thái ‘Đã hủy’ của người dùng

6 Tiêu đề tour h3 html Hiển thị tiêu đề của tour

7 Hình ảnh tour img html Hiển thị hình ảnh tour

8 Trạng thái đơn hàng span html Hiển thị trạng thái của đơn hàng

9 Số người span html Hiển thị số người tham gia

10 Tên khách hàng span html Hiển thị tên khách hàng đặt tour

Giao diện trang quản trị

Hình 5.21 Trang chủ (admin) Bảng 5.13 Mô tả trang chủ (admin)

1 Trang chủ Link react-router-dom Dẫn tới trang chủ của admin

2 Quản lý booking Link react-router-dom

Dẫn tới trang quản lý danh sách các tour đã được đặt

3 Danh sách tour Link react-router-dom

Dẫn tới trang quản lý danh sách tour của doanh nghiệp

4 Danh sách dịch vụ Link react-router-dom Dẫn tới trang quản lý các dịch vụ

5 Đánh giá Link react-router-dom

Dẫn tới trang quản lý các tour được đánh giá bởi khách hàng

6 Danh sách bài viết Link react-router-dom Dẫn tới trang quản lý các bài viết

7 Danh sách yêu thích Link react-router-dom

Dẫn tới trang quản lý các tour được yêu thích

8 Avatar img Ant Design Avatar của người dùng

9 Tên người dùng Dropdown Ant Design Tên người dùng và các lựa chọn

10 Tổng lượt đặt tour p html Hiển thị số lượng các tour đã được đặt

11 Đơn đặt hàng mới p html Hiển thị số lượng các đơn đặt hàng mới

12 Tổng số tour p html Hiển thị số lượng tour hiện có

13 Tổng số bài viết p html Hiển thị số lượng các bài viết

14 Xem thêm Link react-router-dom Dẫn tới trang tương ứng

15 Doanh thu strong html Hiển thị doanh thu của doanh nghiệp

16 Doanh số strong html Hiển thị doanh số của doanh nghiệp

Biểu đồ thống kê doanh thu và doanh số của từng tháng

5.2.2 Trang quản lý danh sách booking

Hình 5.22 Trang quản lý danh sách booking Bảng 5.14 Mô tả trang quản lý danh sách booking

1 Bộ lọc trạng thái Select Ant Design Hiển thị các lựa chọn

2 Hình ảnh chuyến đi img html Hình ảnh của chuyến đi

3 Tên chuyến đi h3 html Tên của chuyến đi

4 Trạng thái span html Hiển thị trạng thái của đơn hàng

5 Ngày khởi hành span html Hiển thị ngày khởi hành của chuyến đi

6 Ngày kết thúc span html Hiển thị ngày kết thúc của chuyến đi

7 Số người span html Hiển thị số người đi

8 Tên khách hàng span html Hiển thị người đặt chuyến đi

9 Phê duyệt Button Ant Design Xác nhận chuyến đi

10 Hủy bỏ Button Ant Design Hủy bỏ chuyến đi

5.2.3 Trang quản lý danh sách tour

Hình 5.23 Trang quản lý danh sách tour Bảng 5.15 Mô tả trang quản lý danh sách tour

1 Thêm tour Button Ant Design Mở khung nhập dữ liệu cho tour mới

Biểu thị hình ảnh của chuyến đi ở từng dòng trong bảng

Biểu thị tên của chuyến đi ở từng dòng trong bảng

4 Địa chỉ khởi hành th html

Biểu thị địa chỉ khởi hành của chuyến đi ở từng dòng trong bảng

5 Ngày khởi hành th html

Biểu thị ngày khởi hành của chuyến đi ở từng dòng trong bảng

Biểu thị giá của chuyến đi ở từng dòng trong bảng

Biểu thị địa chỉ của chuyến đi ở từng dòng trong bảng

Biểu thị các dịch vụ của chuyến đi ở từng dòng trong bảng

Biểu thị mô tả của chuyến đi ở từng dòng trong bảng

10 Độ tuổi thấp nhất th html

Biểu thị yêu cầu độ tuổi thấp nhất ở từng dòng trong bảng

11 Số người tối đa th html

Biểu thị số người tối đa của chuyến đi ở từng dòng trong bảng

Biểu thị trạng thái chỉnh sửa và xóa ở từng dòng trong bảng

13 Chỉnh sửa tour Button Ant Design Mở khung chỉnh sửa dữ liệu tour

14 Xóa tour Button Ant Design Xóa dòng dữ liệu tương ứng

4 Phân trang Pagination Ant Design Phân trang theo danh sách tour đang có

Hình 5.24 Trang thêm tour mới Bảng 5.16 Mô tả trang thêm tour mới

1 Thông tin tour Tabs Ant Design Tab chứa thông tin tour

2 Hình ảnh tour Tabs Ant Design Tab chứa hình ảnh tour

3 Lịch trình tour Tabs Ant Design Tab chứa lịch trình tour

4 Mô tả chi tiết tour Tabs Ant Design Tab chứa mô tả chi tiết tour

5 Tên tour Input Ant Design Nhập tên tour

6 Ngày khởi hành DatePicker Ant Design Chọn ngày khởi hành

7 Youtube Input Ant Design Nhập link url của tour

8 Số người Input Ant Design Nhập số người giới hạn đối với tour

9 Loại tour Select Ant Design Chọn loại tour tương ứng

10 Giá Input Ant Design Nhập giá

11 Địa điểm khởi hành Select Ant Design Chọn địa điểm khởi hành

12 Độ tuổi thấp nhất Input Ant Design Nhập độ tuổi giới hạn của tour

13 Địa điểm Select Ant Design Chọn địa điểm

14 Dịch vụ Select Ant Design Chọn các dịch vụ có trong tour

15 Mô tả Input Ant Design Nhập mô tả tour

16 Thêm tour Button Ant Design

Lưu thông tin tour và quay lại trang danh sách tour

Hủy các dữ liệu đã nhập nếu có và quay lại trang danh sách tour

Hình 5.25 Trang hình ảnh tour Bảng 5.17 Mô tả trang hình ảnh tour

1 Hình ảnh tour Upload Ant Design Hiển thị hình ảnh dưới database của tour

2 Thêm hình Upload Ant Design Thêm hình cho tour

3 Đóng Button Ant Design Đóng form và quay lại danh sách tour

Hình 5.26 Trang lịch trình tour Bảng 5.18 Mô tả trang lịch trình tour

1 Ngày số th html Hiển thị ngày đi thứ mấy của tour

2 Tiêu đề th html Hiển thị tiêu đề của từng ngày đi

3 Mô tả th html Hiển thị mô tả cho từng ngày đi

4 Hoạt động th html Hiển thị trạng thái chỉnh sửa và xóa

5 Thêm lịch trình Button Ant Design Thêm số dòng lịch trình mới cho tour

7 Sửa lịch trình Typography Ant Design

Sửa chi tiết cho từng dòng lịch trình tương ứng

8 Xóa lịch trình Typography Ant Design Xóa dòng tương ứng

5.2.7 Trang mô tả chi tiết tour

Hình 5.27 Trang mô tả chi tiết tour Bảng 5.19 Mô tả trang mô tả chi tiết tour

1 Chọn heading CKEditor Ckeditor4-react Chọn loại heading cho dữ liệu đã chọn

2 In đậm CKEditor Ckeditor4-react In đậm dữ liệu đã chọn

3 In nghiêng CKEditor Ckeditor4-react In nghiêng dữ liệu đã chọn

4 Link CKEditor Ckeditor4-react Thêm link cho mô tả

5 Bulleted list CKEditor Ckeditor4-react Danh sách có gạch đầu dòng

6 Numbered list CKEditor Ckeditor4-react Danh sách đánh số

7 Tăng thụt lề CKEditor Ckeditor4-react Tăng thụt lề cho dữ liệu

8 Giảm thụt lề CKEditor Ckeditor4-react Giảm thụt lề cho dữ liệu

9 Thêm ảnh CKEditor Ckeditor4-react Thêm hình ảnh cho mô tả

10 Block quote CKEditor Ckeditor4-react Trích dẫn văn bản từ một nguồn khác

11 Thêm bảng CKEditor Ckeditor4-react Thêm bảng cho mô tả

12 Thêm video CKEditor Ckeditor4-react Thêm video cho mô tả

13 Undo CKEditor Ckeditor4-react Quay lại thao tác trước

14 Redo CKEditor Ckeditor4-react Khôi phục lại những thao tác đã undo

15 Lưu mô tả Button Ant Design Lưu thông tin mô tả

5.2.8 Trang quản lý danh sách dịch vụ

Hình 5.28 Trang quản lý danh sách dịch vụ Bảng 5.20 Mô tả trang quản lý danh sách dịch vụ

1 Thêm dịch vụ Button Ant Design Mở khung nhập dữ liệu cho dịch vụ mới

2 Tên dịch vụ th html

Biểu thị tên của dịch vụ cho các dòng trong bảng

Biểu thị mô tả của dịch vụ cho các dòng trong bảng

Biểu thị trạng thái chỉnh sửa và xóa cho các dòng trong bảng

5 Chỉnh sửa dịch vụ Button Ant Design Mở khung chỉnh sửa dữ liệu dịch vụ

6 Xóa dịch vụ Button Ant Design Xóa dòng dữ liệu tương ứng

7 Phân trang Pagination Ant Design Phân trang theo danh sách dịch vụ đang có

5.2.9 Trang quản lý danh sách bài viết

Hình 5.29 Trang quản lý danh sách bài viết Bảng 5.21 Mô tả trang quản lý danh sách bài viết

1 Thêm bài viết Button Ant Design Mở khung nhập dữ liệu cho bài viết mới

Biểu thị hình ảnh của bài viết cho các dòng trong bảng

Biểu thị tiêu đề của bài viết cho các dòng trong bảng

Biểu thị mô tả của bài viết cho các dòng trong bảng

Biểu thị trạng thái chỉnh sửa và xóa ở từng dòng trong bảng

6 Chỉnh sửa bài viết Button Ant Design Mở khung chỉnh sửa dữ liệu bài viết

7 Xóa bài viết Button Ant Design Xóa dòng dữ liệu tương ứng

8 Phân trang Pagination Ant Design Phân trang theo danh sách bài viết đang có

5.2.10 Trang quản lý danh sách đánh giá

Hình 5.30 Trang quản lý danh sách đánh giá Bảng 5.22 Mô tả trang quản lý danh sách đánh giá

1 Tiêu đề h3 html Tiêu đề của bài đánh giá

2 Sao Rate Ant Design Hiển thị số sao được đánh giá

3 Thời gian p html Hiển thị thời gian người dùng đánh giá

4 Nội dung p html Hiển thị nội dung đánh giá

5 Phê duyệt Button Ant Design Thay đổi trạng thái bài viết đánh giá

6 Hủy Button Ant Design Hủy bài viết đánh giá

7 Email p html Hiển thị email người đánh giá

8 Trạng thái: Chờ duyệt Option Ant Design Hiển thị danh sách các đánh giá cần duyệt

9 Trạng thái: Đã duyệt Option Ant Design Hiển thị danh sách các đánh giá đã duyệt

10 Trạng thái: Đã hủy Option Ant Design Hiển thị danh sách các đánh giá đã hủy

5.2.11 Trang thông tin cá nhân

Hình 5.31 Trang thông tin cá nhân (admin) Bảng 5.23 Mô tả trang thông tin cá nhân (admin)