Xây dựng website bán tour du lịch có hỗ trợ thanh toán trực tuyến

Mục tiêu Xây dựng website bán tour du lịch với các chức năng: • Phía bên client o Xem thông tin tour du lịch o Tìm kiếm tour o Đặt tour, thanh toán • Phía bên admin: CÔNG NGHỆ THÔNG T

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

NGUYỄN TRUNG HIẾU - 19521508 NGUYỄN TIẾN DŨNG - 19521398

BÁO CÁO ĐỒ ÁN 1 XÂY DỰNG WEBSITE BÁN TOUR DU LỊCH CÓ HỖ

TRỢ THANH TOÁN TRỰC TUYẾN Building a website to sell tours with online payment support

GIẢNG VIÊN HƯỚNG DẪN THS THÁI THỤY HÀN UYỂN

ĐẠI HỌC QUỐC GIA TP.HCM TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

NGUYỄN TRUNG HIẾU – 19521508 NGUYỄN TIẾN DŨNG – 19521398

BÁO CÁO ĐỒ ÁN 1

XÂY DỰNG WEBSITE BÁN TOUR DU LỊCH CÓ

HỖ TRỢ THANH TOÁN TRỰC TUYẾN

Building a website to sell tours with online payment support

GIẢNG VIÊN HƯỚNG DẪN TH.S THÁI THỤY HÀN UYỂN

TP HỒ CHÍ MINH, 2022

TP HCM, ngày 15 tháng 6 năm 2022

ĐỀ CƯƠNG CHI TIẾT

Tên đề tài: Xây dựng website bán tour du lịch có hỗ trợ thay toán

Tên đề tài (tiếng Anh): Building a website to sell tours with online payment support Cán bộ hướng dẫn: Th.s Thái Thụy Hàn Uyển

Sinh viên thực hiện:

Nguyễn Tiến Dũng – 19521398

Nguyễn Trung Hiếu - 19521508

Nội dung đề tài:

1 Mục tiêu

Xây dựng website bán tour du lịch với các chức năng:

• Phía bên client

o Xem thông tin tour du lịch

o Tìm kiếm tour

o Đặt tour, thanh toán

• Phía bên admin:

CÔNG NGHỆ THÔNG TIN

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

Độc Lập – Tự Do – Hạnh Phúc

• Tiến hành kiểm thử và bảo trì

6 Kết quả mong đợi

• Xây dựng được ứng dụng với tất cả các yêu cầu được đặt ra

• Giao diện ứng dụng thân thiện, dễ sử dụng

• Ứng dụng dễ dàng phát triển và mở rộng trong tương lai

Kế hoạch thực hiện

Thời gian Nội dung Phân công

21/03/2022 - 11/03/2022 Tìm hiểu đề tài, đánh

giá thị trường, xác định các chức năng của hệ thống

Nguyễn Tiến Dũng Nguyễn Trung Hiếu

12/03/2022 - 26/03/2022 Tìm hiểu công nghệ Nguyễn Tiến Dũng

Nguyễn Trung Hiếu

27/03/2022 – 16/04/2022 Phân tích thiết kế hệ

thống

Nguyễn Tiến Dũng Nguyễn Trung Hiếu 17/04/2022 – 29/05/2022 Xây dựng website Nguyễn Tiến Dũng: Xây

dựng frontend bên phía client

Nguyễn Trung Hiếu: Xây dựng frontend bên phía admin, xây dựng backend 30/05/2022 – 08/06/2022 Kiểm thử và sửa lỗi Nguyễn Tiến Dũng

Nguyễn Trung Hiếu 09/06/2022 – 15/06/2022 Hoàn thành báo cáo Nguyễn Tiến Dũng

Xác nhận của CBHD

(Ký tên và ghi rõ họ tên)

ThS Thái Thụy Hàn Uyển

TP HCM ngày 15 tháng 6 năm 2022

Sinh viên

(Ký tên và ghi rõ họ tên)

Nguyễn Tiến Dũng

Nguyễn Trung Hiếu

LỜI CẢM ƠN

Để hoàn thành được dự án cho môn đồ án 1 này, chúng em xin gửi lời cảm ơn chân thành đến Ths Thái Thụy Hàn Uyển đã tận tình hướng dẫn, giúp đỡ và định hướng xuyên suốt quá trình hoàn thành đồ án Những lời góp ý, nhắc nhở của cô là những hành trang và tiền đề cho chúng em trong quá trình học tập và phát triển bản thân sau này.Chúng em cũng xin gửi lời càm ơn đến Khoa Công Nghệ Phần Mềm đã tạo điều kiện cho chúng em được học tập trong môi trường tốt nhất

Trong quá trình làm đồ án này chúng em có thể vẫn còn những thiết sót, mong nhận được góp ý và chỉ dẫn cùa cô để đồ án của chúng em có thể hoàn thiện hơn

TP HCM, ngày 12 tháng 06 năm 2022

Sinh viên thực hiện

NGUYỄN TIẾN DŨNG

Sinh viên thực hiện

NGUYỄN TRUNG HIẾU

MỤC LỤC

Chương 1 MỞ ĐẦU 1

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

1.2 Pham vi nghiên cứu 1

1.3 Đối tượng nghiên cứu 1

Chương 2 CƠ SỞ LÝ THUYẾT 2

2.1 React 2

2.1.1 React là gì 2

2.1.2 Tại sao sử dụng React 2

2.1.3 Một số khái niệm 2

2.1.4 Một số React Hook phổ biến 5

2.1.5 React Router Dom 5

2.2 NodeJs 5

2.2.1 NodeJs là gì? 5

2.2.2 Tính năng vượt trội của NodeJs 6

2.2.3 Khi nào nên sử dụng NodeJs 6

2.3 ExpressJs 6

2.3.1 ExpressJs là gì 6

2.3.2 ExpressJs được sử dụng làm gì? 7

2.4 MySQL 7

2.4.1 MySQL là gì? 7

2.4.2 Ưu điểm của MySQL 8

2.5 Các phần mềm và công nghệ khác 8

2.5.1 Visual Studio Code 8

2.5.2 GitHub 8

2.5.3 VietQR 9

Chương 3 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 10

3.1 Kiến trúc hệ thống 10

3.2 Sơ đồ Use case 10

3.2.1 Sơ đồ Usecase 10

3.2.2 Danh sách Actor 12

3.2.3 Danh sách Use case 12

3.2.4 Đặc tả use case 13

3.3 Sơ đồ Sequence 25

3.4 Cơ sở dữ liệu 40

3.4.1 Lược đồ cơ sở dữ liệu 40

3.4.2 Chi tiết các bảng dữ liệu 41

3.5 Thiết kế giao diện 46

3.5.1 Danh sách các trang trong hệ thống 46

3.5.2 Giao diện khách hàng 48

3.5.3 Giao diện quản lý 53

Chương 4 KẾT LUẬN 57

4.1 Kết quả đạt được 57

4.1.1 Về mặt nghiên cứu 57

4.1.2 Về mặt sản phẩm 57

4.2 Ưu điểm 57

4.3 Nhược điểm 57

4.4 Hướng phát triển 57

DANH MỤC HÌNH

Hình 2.1: Logo của React 2

Hình 2.2 React component lifecycle 4

Hình 2.3: Logo của NodeJs 6

Hình 2.4: ExpressJs 6

Hình 2.5: MySQL 8

Hình 3.1: Sơ đồ kiến trúc hệ thống 10

Hình 3.2: Sơ đồ use case tổng quát 10

Hình 3.3: Sơ đồ use case quản lý tour 11

Hình 3.4: Sơ đồ use case quản lý điểm đến 11

Hình 3.5: Sơ đồ use case quản lý đơn hàng 12

Hình 3.6: Sequence Diagram use case “tìm kiếm tour” 26

Hình 3.7: Sequence Diagram use case “xem tour” 27

Hình 3.8: Sequence diagram use case “nhập thông tin liên hệ” 28

Hình 3.9: Sequence Diagram use case "Thanh toán" 29

Hình 3.10: Sequence diagram use case "Đặt tour" 30

Hình 3.11: Sequence Diagram use case "Đăng nhập" 30

Hình 3.12: Sequence diagram use case "Thêm điểm đến” 31

Hình 3.13: Sequence diagram use case "Cập nhật điểm đến" 32

Hình 3.14: Sequence diagram use case “Xóa điểm đến" 33

Hình 3.15: Sequence diagram use case “Thêm tour" 34

Hình 3.16: Sequence diagram use case “Cập nhật tour" 35

Hình 3.17: Sequence diagram use case “Xóa tour" 36

Hình 3.18: Sequence diagram use case “Thêm ngày khởi hành" 37

Hình 3.19: Sequence diagram use case “Cập nhật ngày khởi hành" 38

Hình 3.20: Sequence diagram use case “xóa ngày khởi hành" 39

Hình 3.21: Sequence diagram use case “cập nhật đơn hàng” 40

Hình 3.22: Cơ sở dữ liệu 41

Hình 3.23: Giao diện màn hình trang chủ 48

Hình 3.24: Giao diện màn hình danh sách tour 49

Hình 3.25: Giao diện màn hình chi tiết tour 50

Hình 3.26: Giao diện màn hình nhập thông tin liên hệ 51

Hình 3.27: Giao diện màn hình thanh toán 52

Hình 3.28: Giao diện trang không tồn tại 53

Hình 3.29: Giao diện màn hình đăng nhập 53

Hình 3.30: Giao diện màn hình dashboard 54

Hình 3.31: Giao diện màn hình quản lý tour 55

Hình 3.32: Giao diện màn hình quản lý điểm đến 55

Hình 3.33: Giao diện màn hình quản lý thanh toán 56

Hình 3.34: Giao diện màn hình phân tích 56

DANH MỤC BẢNG

Bảng 3.1: Bảng danh sách các actor 12

Bảng 3.2: Bảng mô tả ngắn các use case 13

Bảng 3.3: Bảng đặc tả use case "tìm kiếm tour" 14

Bảng 3.4: Bảng đặc tả use case xem tour 15

Bảng 3.5: Bảng đặc tả use case "nhập thông tin liên hệ" 16

Bảng 3.6: Bảng đặc tả use case "Thanh toán" 17

Bảng 3.7: Bảng đặc tả use case "Đặt tour" 17

Bảng 3.8: Bảng đặc tả use case đăng nhập 18

Bảng 3.9: Bảng đặc tả use case thêm điểm đến 19

Bảng 3.10: Bảng đặc tả use case cập nhật điểm đến 19

Bảng 3.11: Bản đặc tả use case xóa điểm đến 20

Bảng 3.12: Bản đặc tả use case thêm tour 21

Bảng 3.13: Bản đặc tả use case cập nhật tour 21

Bảng 3.14: Bảng đặc tả use case xóa tour 22

Bảng 3.15: Bảng đặc tả use case thêm ngày khởi hành 23

Bảng 3.16: Bảng đặc tả use case cập nhật ngày khởi hành 24

Bảng 3.17: Bảng đặc tả use case xóa ngày khởi hành 24

Bảng 3.18: Bảng đặc tả use case xem đơn đặt hàng 25

Bảng 3.19: Bảng đặc tả use case cập nhật thanh toán 25

Bảng 3.20: Bảng mô tả các thông tin được lưu trữ ở CSDL 41

Bảng 3.21: Bảng tours 42

Bảng 3.22: Bảng detination 43

Bảng 3.23: Bảng chi tiết tour 43

Bảng 3.24: Bảng Lịch trình (Schedule) 44

Bảng 3.25: Bảng payment 45

Bảng 3.26: Bảng user 46

Bảng 3.27: Bảng danh sách các màn hình 47

Locator

Địa chỉ của một tài nguyên duy nhất trên Web

Update – Delete

Thêm, đọc, sửa và xóa

dữ liệu trên cơ sở dữ liệu

Chương 1 MỞ ĐẦU

1.1 Lý do chọn đề tài

Trong những năm vừa rồi tình hình dịch covid diễn biến phức tạp, người dân trong nước không thể tự do ra ngoài Cũng vì vậy, những hình thức mua bán trực tuyến và thanh toán hàng online càng trở nên phổ biến và quen thuộc hơn Vài tháng trở lại đây, tình hình dịch đã nằm trong tầm kiểm soát, mọi hoạt động được quay trở lại như bình thường Sau một thời gian không được thoải mái ra đường, nhu cầu được đi đây mai đó của mọi người cũng cao hơn Hơn thế nữa, những thói quen mua hàng trực tuyến vẫn còn đó, vì vậy chúng em đã quyết định cho ra đời một website cung cấp các tour du lịch với hình thức thanh toán trực tuyến

1.2 Pham vi nghiên cứu

o Tìm hiểu bài toán về cung cấp các tour du lịch đến khách hàng

o Xây dựng website với phần frond-end sử dụng React, backend sử dụng NodeJs và MySQL cho việc lưu trữ dữ liệu

1.3 Đối tượng nghiên cứu

• Khách hàng (người mua tour du lịch)

• Admin (Người cung cấp tour du lịch)

Chương 2 CƠ SỞ LÝ THUYẾT

2.1 React

2.1.1 React là gì

React là một thư viện JavaScript được phát triển bởi Facebook, được sử dụng

để phát triển giao diện người dùng (UI) có tính tương tác cao React phát triển giao diện bằng cách chia giao diện thành các thành phần (components), nhờ đó các thành phần giao diện trùng lặp có thể tái sử dụng mà không cần phải code lại React hiện được sử dụng bởi rất nhiều công ty lớn trên thế giới, bao gồm Neflix, Facebook, WhatsApp, Instagram…

Hình 2.1: Logo của React

2.1.2 Tại sao sử dụng React

o React là một thư viện có mã nguồn mở, dễ sử dụng

o React cho phép sử dụng lại components (Reusable Component) đã được phát triển trước đó

o Có nhiều thư viện được xây dựng phù hợp cho các nhu cầu khác nhau

này sẽ chức hoặc không chứa những trạng thái (state) Khi trạng thái của một component bị thay đổi, React sẽ so sánh phiên bản sau khi bị thay đổi và phiên bản trước khi thay đổi và thực hiện cập nhật trên Virtual DOM Quá trình này gọi là “Diffing”

• An toàn: JSX là kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch

• Dễ dàng hơn: JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng

c Props và State

Props là một từ viết ngắn gọn của properties Trong React, props là một đối tượng lưu trữ giá trị được truyền từ bên ngoài vào bên trong component, thường

là truyền từ componet cha đến component con

Khác với props, state được dùng để lưu trữ dữ liệu của chính component đó, giá trị của state có thể thay đổi và sẽ component sẽ được render lại ngay sau khi state thay đổi

d Component Lifecycle

Hình 2.2 React component lifecycle

Để lập trình một ứng dụng React, thì việc nắm rõ vòng đời của một component sẽ giúp lập trình viên lập trình quản lí dữ liệu tốt hơn Vòng đời của một component sẽ bao gồm ba nhóm chính:

• Mouting: là giai đoạn mà component được khởi tạo và mount on the DOM (chèn vào DOM)

• Updating: giai đoạn các state của componet thay đổi, component sẽ render lại

• Unmouting: component được unmout DOM (xóa khỏi DOM)

d React Hook

Những người mới tiếp xúc với React lần đầu, sẽ cảm thấy rất bối rối trong việc làm quen với lifecycle của component Hơn thế, việc sử dụng các component với các hàm trong lifecycle cũng khiến nhiều lập trình viên dù đã có kinh nghiệm những vẫn sẽ gặp nhiều khó khăn Nhận thấy điều này, React đã cho ra đời React Hook Với Hook, lập trình viên có thể dễ dàng quản lý state

mà không cần sử dụng đến class

2.1.4 Một số React Hook phổ biến

a UseState

UseState là một hàm nhận vào một tham số là giá trị khởi tạo của state và trả

về một mảng gồm hai phần tử Phần tử thứ nhất là state hiện tại phần tử thứ 2

là một hàm sử dụng để cập nhật state

b UseEffect

UseEffect là một hàm nhận vào hai tham số Tham số thứ nhất là một hàm, tạm gọi là callback Tham số thứ hai sẽ là một mảng mảng hoặc không có gì cả Callback sẽ được gọi mặc dịnh lần đầu tiên khi component được mout vào DOM, sau khi render xong component Nếu như không truyền tham số thứ hai cho useEffect, callback sẽ được gọi mỗi khi component rerender Nếu như tham

số thứ 2 là mảng, callback được gọi mỗi khi mảng đó thay đổi

c UseContext

UseContext được sinh ra để giải quyết việc chia sẻ các state giữa các component UseContext có thể giúp lưu trữ các state ở toàn cục, giúp cho tất cả các component con bên trong context đều có thể lấy state ở bất kỳ đâu

2.1.5 React Router Dom

React không tích hợp sẵn router, nhưng chúng ta có thể làm điều này bằng cách cài đặt thư viện React Router Dom Thư viên này cho phép thay đổi URL của trình duyệt và render ra giao diện tương ứng

2.2 NodeJs

2.2.1 NodeJs là gì?

Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng trên V8 JavaScript Engine – một trình thông dịch thực thi mã JavaScript NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ Windows cho tới Linux, MacOs nên đó cũng là một lợi thế NodeJs hỗ trợ nhiều thư viện giúp việc lập trình trở nên đơn giản hóa

Hình 2.3: Logo của NodeJs

2.2.2 Tính năng vượt trội của NodeJs

• Thực thi các sự kiện không đồng bộ, cho phép xử lí nhiều yều cầu đồng thời

• Nodejs được xây dựng dựa vào nền tảng V8 Javascript Engine nên việc thực thi chương trình rất nhanh

2.2.3 Khi nào nên sử dụng NodeJs

• Xây dựng ứng dụng Restful API

Hình 2.4: ExpressJs

2.3.2 ExpressJs được sử dụng làm gì?

ExpressJS sẽ giúp bạn tổ chức kiến trúc back-end của mình ExpressJs có thể triển khai website với mô hình MVC – một mô hình web phổ biến, giúp cho việc bảo trì tương đối dễ dàng

Một số tính năng của ExpressJs:

• Phát triển máy chủ nhanh hơn: cung cấp cho bạn nhiều tính năng phổ biến của Node.js dưới dạng hàm có thể dễ dàng sử dụng ở bất kỳ đâu trong chương trình Điều này sẽ giúp rút ngắn thời gian để viết code

• Định tuyến: cung cấp cơ chế định tuyến cao giúp duy trì trạng thái của trang web

• Khuôn mẫu: cung cấp các công cụ tạo khuôn mẫu cho phép các nhà phát triển tạo nội dung động trên các trang web bằng việc xây dựng các mẫu HTML ở phía máy chủ

• Gỡ lỗi: cung cấp một cơ chế có khả năng xác định chính xác phần ứng dụng web có lỗi

2.4 MySQL

2.4.1 MySQL là gì?

MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (gọi tắt là RDBMS) hoạt động theo mô hình client-server Với RDBMS là viết tắt của Relational Database Management System

MySQL được đánh giá cao nhờ việc tích hợp với Apache và PHP Không chỉ vậy, việc có tính tương thích với nhiều trình duyệt, với nhiều hệ điều hành tiêu biểu như Ubuntu, Linux, macOS, Windows càng giúp việc sử dụng MySQL được tin tưởng và ưa chuộng nhiều hơn

Hình 2.5: MySQL

2.4.2 Ưu điểm của MySQL

MySQL được ưa chuộc trong các ứng dụng website nhờ một số ưu điểm sau:

o MySQL là một cơ sở dữ liệu tốc độ cao, ổn định dễ sử dụng và có thể hoạt động được trên nhiều hệ điều hành khác nhau

o MySQL có độ bảo mật cao, thích hợp cho các ứng dụng truy cập CSDL trên internet

o Có khả năng xử lý rất nhiều dữ liệu và có thể mở rộng nếu cần thiết

o MySQL hoàn toàn miễn phí sử dụng

2.5 Các phần mềm và công nghệ khác

2.5.1 Visual Studio Code

Visual Studio Code là một trình soạn thảo mã nguồn được phát triển bởi Microsoft dành cho Windows, Linux và macOS Nó hỗ trợ chức năng debug, đi kèm với Git, có chức năng nổi bật cú pháp (syntax highlighting), tự hoàn thành

mã thông minh, snippets, và cải tiến mã nguồn Nó cũng cho phép tùy chỉnh, do

đó, người dùng có thể thay đổi theme, phím tắt, và các tùy chọn khác Nó miễn phí và là phần mềm mã nguồn mở theo giấy phép MIT, mặc dù bản phát hành của Microsoft là theo giấy phép phần mềm miễn phí

2.5.2 GitHub

GitHub là một hệ thống quản lý dự án và phiên bản code, GitHub

được coi giống như một mạng xã hội dành riêng cho các lập trình

viên Với GitHub, các lập trình viên có thể clone lại mã nguồn từ một

repository Nó cũng là một dịch vụ máy chủ repository giúp lưu trữ

code và mỗi người có thể tạo tài khoản trên đó để tạo ra các kho chứa

của riêng mình để làm việc

Github có đầy đủ tính năng của Git, ngoài ra nó còn bổ sung những

tính năng về social giúp các developer có thể tương tác với nhau

GitHub giống như một trang mạng xã hội dành riêng cho lập trình

viên cung cấp các chức năng social networking như feeds, follower

và network graph để các lập trình viên học hỏi kinh nghiệm từ lịch

sử commit

VietQR là nhận diện thương hiệu chung cho các dịch vụ thanh toán, chuyển khoản bằng mã QR được xử lý qua mạng lưới Napas, các Ngân hàng thành viên, Trung gian thanh toán, các đối tác thanh toán tại Việt Nam và quốc tế của Napas

Mã QR sử dụng tuân thủ theo tiêu chuẩn thanh toán QR của EMV Co và Tiêu chuẩn cơ sở cho mã QR do Ngân hàng Nhà nước Việt Nam ban hành

Chuyển khoản bằng mã QR: là phương thức chuyển tiền giữa tài khoản/thẻ ngân hàng thông qua hình thức quét mã QR Thông tin thanh toán được mã hóa trong mã QR gồm: Số tài khoản/thẻ, Mã hiệu ngân hàng, Số tiền, Nội dung thanh toán, Thông tin đơn hàng và các thông tin liên quan khác (nếu có) giúp việc khởi tạo lệnh thanh toán được thực hiện Chính xác, Nhanh chóng và An toàn.)

Chương 3 PHÂN TÍCH THIẾT KẾ HỆ THỐNG

Hình 3.3: Sơ đồ use case quản lý tour

Hình 3.4: Sơ đồ use case quản lý điểm đến

Hình 3.5: Sơ đồ use case quản lý đơn hàng

3.2.2 Danh sách Actor

1 Guest Khách hàng, người đặt và thanh toán các tour

trên hệ thống

2 Admin Quản trị viên, người thực hiện quản lý các dịch

vụ trên website

Bảng 3.1: Bảng danh sách các actor

3.2.3 Danh sách Use case

UC01 Tìm kiếm tour Guest Tìm kiếm các tour dựa trên nơi xuất phát,

điểm đến, giá tiền,…

UC02 Xem tour Guest Hiển thị thông tin chi tiết của một tour

UC03 Nhập thông tin

UC05 Đặt tour Guest

Sau khi hoàn tất phần nhập thông tin liên

hệ và thanh toán, gửi email thông báo về đơn hàng

UC06 Đăng nhập Admin Đăng nhập để thực hiện các nghiệp vụ

quản lý UC07 Thêm điểm đến Admin Thêm một điểm đến

UC08 Cập nhật điểm

UC09 Xóa điểm đến Admin Xóa thông tin của điểm đến

UC10 Thêm tour Admin Thêm tour

UC11 Cập nhật tour Admin Cập nhật thông tin tour

UC12 Xóa Tour Admin Xóa thông tin tour

UC13 Thêm ngày

khởi hành Admin Thêm ngày khởi hành của tour

UC14 Cập nhật ngày

Cập nhật các thông tin về ngày khởi hành của tour

UC15 Xóa ngày khởi

hành Admin Xóa thông tin khởi hành của tour

UC16 Xem thông tin

thanh toán Admin Xem thông tin các đơn đặt tour

UC17 Cập nhật thông

tin thanh toán Admin Cập nhật thông tin thanh toán tour

Bảng 3.2: Bảng mô tả ngắn các use case

3.2.4 Đặc tả use case

Description Tìm kiếm các tour dựa trên nơi xuất phát, điểm đến, giá

tiền, giảm giá, ngày xuất phát

kiếm

kiện tìm kiếm của actor

2 Backend trả về kết quả dựa trên điều kiện tìm kiếm cho client (front end)

3 Client hiển thị kết quả cho người dùng

Bảng 3.3: Bảng đặc tả use case "tìm kiếm tour"

điểm đến, giá tiền, ngày khởi hành, lịch trình và một số ngày khởi hành khác

Basic flow 1 Frontend gửi mã tour cần lấy thông tin xuống

backend

2 Backend trả về đầy đủ thông tin chi tiết của mã tour

đó

3 Hiển thị lên giao diện cho người dùng

không trả về kết quả

Bảng 3.4: Bảng đặc tả use case xem tour

tour, bao gồm họ tên, số điện thoại, email, địa chỉ và số lượng vé tương ứng với lứa tuổi

click

2 Frontend gửi mã tour và mã khởi hành để lấy chi tiết bảng giá

3 Hiển thị thông tin bảng giá

4 Người dùng nhập thông tin liên hệ, số lượng vé đặt

5 Người dùng chọn “hoàn thành”

6 Kiểm tra thông tin:

6.1 Nếu thông tin không hợp lệ thông báo lỗi và

chuyển về mục 1 6.2 Nếu thông tin hợp lệ, chuyển qua mục 4

7 Frontend lưu thông tin và chuyển sang trang thanh toán

Bảng 3.5: Bảng đặc tả use case "nhập thông tin liên hệ"

thông tin liên hệ

4 Hiển thị mã thanh toán

5 Người dùng quét mã thanh toán

6 Người dùng chọn “Tôi đã thanh toán”

7 Frontend yêu câu backend kiểm tra thông tin thanh toán

8 Backend kiểm tra thông tin thanh toán, cập nhật dữ liệu và trả về kết quả

9 Nếu chưa thanh toán, hiển thị thông báo “Không tìm thấy thông tin thanh toán”, quay về mục 5

10 Thông báo “Thánh toán thành công”

Bảng 3.6: Bảng đặc tả use case "Thanh toán"

2 Gửi email chứa các thông tin về đơn đặt tour

3 Điều hướng về trang chủ

Bảng 3.7: Bảng đặc tả use case "Đặt tour"

quản lý

Actor Admin

2 Người dùng chọn “Đăng nhập”

3 Frontend gửi thông tin tài khoản xuống backend

4 Backend kiểm tra thông tin và trả về kết quả

5 Frontend nhận kết quả , nếu đúng chuyển sang màn hình Dashboard

“Tài khoản hoặc mật khẩu không chính xác.”

Bảng 3.8: Bảng đặc tả use case đăng nhập

đến

2 Fontend kiểm tra thông tin điểm đến hợp lệ (tên điểm đến không trùng với cả điểm đến khác trong CSDL)

3 Gửi thông tin của điểm đến mới backend

4 Backend lưu thông tin điểm đến và trả về kết quả

nhập tên điểm đến đã có trong CSDL

Bảng 3.9: Bảng đặc tả use case thêm điểm đến

2 Hệ thống hiển thị thông tin của điểm đến

3 Actor chỉnh sửa thông tin muốn cập nhật

4 Hệ thống kiểm tra thông tin chỉnh sửa hợp lệ

5 Hệ thống cập nhật thông tin điểm đến

nhập tên điểm đến đã có trong CSDL

Bảng 3.10: Bảng đặc tả use case cập nhật điểm đến

Actor Admin

2 Hệ thống kiểm tra ràng buộc

3 Hệ thống xóa điểm đến

đến muốn xóa thì thông báo “Không thể xóa điểm đến”

Bảng 3.11: Bản đặc tả use case xóa điểm đến

2 Actor nhập thông tin tour (tên, mô tả, giá lịch trình, ảnh minh họa…)

3 Hệ thống kiểm tra thông tin hợp lệ (các mục không được trống)

4 Hệ thống lưu thông tin tour

Exception -flow 1 Thông báo mục này là bắt buộc thông tin bắt buộc

2 Hệ thống hiển thị các thông tin của tour

3 Actor chỉnh sửa thông tin tour

4 Hệ thống kiểm tra thông tin hợp lệ

Pre-condition Đã đăng nhập vào hệ thống bằng tài khoản admin

2 Hệ thống kiểm tra ràng buộc

3 Hệ thống xóa tour

“Không thể xóa tour”

Bảng 3.14: Bảng đặc tả use case xóa tour

tour

2 Chọn thêm ngày khởi hành

3 Hệ thống hiển thị giao diện nhập thông tin

4 Actor nhập thông tin (giá tiền các loại vé, giá khách sạn, ngày khởi hành)

5 Hệ thống kiểm tra thông tin

6 Hệ thống lưu ngày khởi hành

nhập nếu actor để trống

2 Nếu ngày khởi hành là ngày trong quá khứ thông báo “Ngày khởi hành không thể là ngày trong quá khứ”

Bảng 3.15: Bảng đặc tả use case thêm ngày khởi hành

tour

Chưa có một đơn đặt hàng nào vào ngày muốn cập nhật

2 Hệ thống hiển thị những ngày khởi hành của tour

3 Actor chọn ngày muốn cập nhật

4 Hiển thị thông tin chi tiết của ngày đó

5 Actor chỉnh sửa thông tin muốn cập nhật (giá tiền các loại vé, giá khách sạn, ngày khởi hành)

6 Hệ thống kiểm tra thông tin

7 Hệ thống cập nhật thông tin

nhập nếu actor để trống