Đồ án tốt nghiệp Công nghệ thông tin: Xây dựng hệ thống website đặt vé xe khách sử dụng reactjs và asp.net

Lược đồ chức năng thêm mới loại giá .... Lược đồ chức năng thêm mới chuyến đi .... Lược đồ chức năng thêm mới loại xe .... Để góp phần đưa người dùng tiếp cận với các nhà xe với nhu cầu

THÀNH PHỐ HỒ CHÍ MINH

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

XÂY DỰNG HỆ THỐNG WEBSITE ĐẶT VÉ XE

KHÁCH SỬ DỤNG REACTJS VÀ ASP.NET

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM

KHOA CÔNG NGHỆ THÔNG TIN

BỘ MÔN CÔNG NGHỆ PHẦN MỀM

-

Khóa 2020 - 2024

KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

ĐỀ TÀI: XÂY DỰNG HỆ THỐNG WEBSITE

ĐẶT VÉ XE KHÁCH SỬ DỤNG REACTJS VÀ ASP.NET

Giảng viên hướng dẫn: TS LÊ VĂN VINH

i

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

HCM KHOA CNTT

*******

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

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

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Họ và tên Sinh viên 1: Đỗ Minh Dũng MSSV 1: 20110620

Họ và tên Sinh viên 2: Nguyễn Thái Ngọc Tân MSSV 2: 20110719 Ngành: Công nghệ Thông tin

Tên đề tài: Xây dựng hệ thống website đặt vé xe khách sử dụng React

và ASP.NET

Họ và tên Giáo viên hướng dẫn: TS Lê Văn Vinh

NHẬN XÉT

1 Về nội dung đề tài & khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm:

4 Đề nghị cho bảo vệ hay không?

5 Đánh giá loại:

6 Điểm:

Tp Hồ Chí Minh, ngày tháng năm 2024

Giảng viên hướng dẫn

ii

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

TP HCM KHOA CNTT

*******

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

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

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ và tên Sinh viên 1: Đỗ Minh Dũng MSSV 1: 20110620

Họ và tên Sinh viên 2: Nguyễn Thái Ngọc Tân MSSV 2: 20110719

Ngành: Công nghệ Thông tin

Tên đề tài: Xây dựng hệ thống website đặt vé xe khách sử dụng React

và ASP.NET

Họ và tên Giáo viên phản biện:

NHẬN XÉT

1 Về nội dung đề tài & khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm:

4 Đề nghị cho bảo vệ hay không?

5 Đánh giá loại:

6 Điểm:

Tp Hồ Chí Minh, ngày tháng năm 2024

Giảng viên phản biện

iii

LỜI CẢM ƠN

Đầu tiên, nhóm chúng em xin gửi lời cảm ơn chân thành đến nhà trường, khoa Công Nghệ Thông Tin đã tạo điều kiện cho chúng em được học tập, rèn luyện tại một môi trường năng động, tích cực và đầy những kiến thức mới lạ Cảm ơn các thầy cô giảng viên bộ môn đã luôn giúp đỡ chúng em trong suốt quá trình học tập tại nhà trường

Nhóm chúng em cũng xin gửi lời cảm ơn chân thành đến thầy Lê Văn Vinh đã hướng dẫn chúng em trong quá trình thực hiện đề tài Sự hướng dẫn tận tâm và kiến thức sâu sắc của thầy đã giúp chúng em tiếp cận và hiểu rõ hơn với thực tế

Thầy không chỉ là một giảng viên tài năng, mà còn là một người thầy có tâm huyết và đam mê trong việc chia sẻ kiến thức và hướng dẫn sinh viên Chúng em biết ơn

sự cống hiến và tận tâm của quý vị trong quá trình hướng dẫn chúng tôi, và chúng tôi

tự hào được làm việc và học tập dưới sự chỉ dẫn của quý vị

Một lần nữa, chúng em xin bày tỏ lòng biết ơn sâu sắc đến giảng viên Lê Văn Vinh đã dành thời gian và nỗ lực để hướng dẫn chúng em trong quá trình thực hiện đề tài Sự hỗ trợ và sự khích lệ của thầy đã góp phần quan trọng vào thành công của em

Chúng em xin chân thành cảm ơn và mong rằng thầy tiếp tục thành công và tiếp tục truyền cảm hứng cho các thế hệ sinh viên tiếp theo

Nhóm sinh viên

iv

ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP

Họ và Tên SV thực hiện 1: Đỗ Minh Dũng Mã số SV: 20110620

Họ và Tên SV thực hiện 2: Nguyễn Thái Ngọc Tân Mã số SV: 20110719

Nhiệm vụ của luận văn:

1 Lý thuyết

• Tìm hiểu về các công nghệ: ASP.Net, ReactJS

2 Thực hành

• Sử dụng ASP.Net để viết Backend cho các module trong hệ thống

• Sử dụng SQLServer để lưu trữ dữ liệu của hệ thống

• Sử dụng JSON Web Token để xác thực và phân quyền cho hệ thống

• Sử dụng thư viện ReactJS, Ant Design, TailwindCSS để thiết kế và xử lý giao diện web cho người dùng thao tác

Đề cương viết luận văn:

PHẦN MỞ ĐẦU

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

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

3 Phạm vi nghiên cứu

4 Mục tiêu của đề tài

5 Ý nghĩa khoa học và thực tiễn

Thời gian làm luận văn: từ 01/09/2023 Đến 10/07/2024

v

PHÂN NỘI DUNG

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

3.2 Thiết kế cơ sở dữ liệu (ERD) 3.3 Lược đồ lớp

3.4 Lược đồ tuần tự

3.5 Thiết kế giao diện

CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ 4.1 Cài đặt

vi

KẾ HOẠCH THỰC HIỆN

1 01/03/2024-

01/04/2024

Khả sát hiện trạng Thiết kế usecase

2 01/04/2024-

05/04/2024

Tìm hiểu Reactjs Tìm hiểu các thư viện UI Tailwind css Tìm hiểu ASP.Net

Tìm hiểu Entity FrameWork Json Token

4 10/05/2024-

20/05/2024

Xây dựng giao diện người dùng

Xây dựng API liên quan đến quyền của người dùng

Hoàn thành báo cáo

Chuẩn bị bảo vệ khóa luận

Ngày tháng năm 2024

Người viết đề cương

vii

Ý kiến của giáo viên hướng dẫn

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

viii

MỤC LỤC

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN i

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN ii

LỜI CẢM ƠN iii

ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP iv

MỤC LỤC viii

DANH MỤC BẢNG x

DANH MỤC HÌNH xiii

PHẦN MỞ ĐẦU 1

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

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

3 Phạm vi nghiên cứu 1

4 Mục tiêu của đề tài 2

5 Ý nghĩa khoa học và thực tiễn 2

PHÂN NỘI DUNG 3

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 3

1.1 ReactJs 3

1.2 C# 6

1.3 ASP.NET 7

1.4 SQL Server 7

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG 9

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

2.2 Xác định yêu cầu 13

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

CHƯƠNG 3: THIẾT KẾ HỆ THỐNG 42

3.1 Thiết kế hệ thống 42

ix

3.2 Thiết kế cơ sở dữ liệu (ERD) 44

3.3 Lược đồ lớp 46

3.4 Lược đồ tuần tự 48

3.5 Thiết kế giao diện 78

CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ 119

4.1 Cài đặt 119

4.2 Kiểm thử 119

PHẦN KẾT LUẬN 126

1 Kết quả đạt được 126

2 Ưu điểm, nhược điểm 126

3 Hướng phát triển 127

TÀI LIỆU THAM KHẢO 128

x

DANH MỤC BẢNG

Bảng 2.2.1 Các chức năng nghiệp vụ 13

Bảng 2.2.2 Các chức năng yêu cầu hệ thống 14

Bảng 2.2.3 Các yêu cầu phi chức năng 15

Bảng 2.3.1 Usecase đăng kí 19

Bảng 2.3.2 Bảng usecase đăng nhập 20

Bảng 2.3.3 Use case đăng xuất 21

Bảng 2.3.4 Usecase tìm chuyến đi 22

Bảng 2.3.5 Usecase quản lý đơn hàng 23

Bảng 2.3.6 Usecase đặt vé xe 24

Bảng 2.3.7 Usecase đánh giá chất lượng chuyến đi 25

Bảng 2.3.8 Usecase quản lý xe 26

Bảng 2.3.9 Usecase xem doanh thu nhà xe 28

Bảng 2.3.10 Usecase quản lý chuyến đi 28

Bảng 2.3.11 Usecase thêm mới chuyến đi 29

Bảng 2.3.12 Use case quản lý bảng giá 30

Bảng 2.3.13 Usecase quản lý loại giá 30

Bảng 2.3.14 Usecase quản lý lộ trình 31

Bảng 2.3.15 Usecase quản lý tài khoản 33

Bảng 2.3.16 Use case quản lý nhà xe 34

Bảng 2.3.17 Usecase quản lý loại xe 35

Bảng 2.3.18 Usecase quản lý loại ghế 36

Bảng 2.3.19 Usecase quản lý bến bãi, điểm dừng 38

Bảng 2.3.20 Uscecase quản lý tuyến đi 40

Bảng 2.3.21 Usecase cập nhật trạng thái bảng giá 41

Bảng 3.5.1 Mô tả giao diện đăng nhập với người quản trị 78

Bảng 3.5.2 Mô ta trang quản lý xe 79

Bảng 3.5.3 Mô tả trang quản lý thông tin người dùng 79

Bảng 3.5.4 Mô tả trang quản lý loại xe 80

Bảng 3.5.5 Mô tả trang quản lý loại ghế 81

Bảng 3.5.6 Mô tả trang quản lý bến bãi 82

xi

Bảng 3.5.7 Mô tả trang quản lý bảng giá 83

Bảng 3.5.8 Mô tả trang quản lý loại giá 84

Bảng 3.5.9 Mô tả trang quản lý tuyến đường 85

Bảng 3.5.10 Mô tả trang quản lý chi tiết người dùng 86

Bảng 3.5.11 Mô tả trang quản lý chi tiết thông tin nhà xe 87

Bảng 3.5.12 Mô tả trang quản lý loại xe 88

Bảng 3.5.13 Trang chỉnh sửa loại xe 89

Bảng 3.5.14 Mô tả trang thêm mới loại ghế 90

Bảng 3.5.15 Môt tả trang chỉnh sửa loại ghế 91

Bảng 3.5.16 Mô tả trang thêm mới bến bãi 92

Bảng 3.5.17 Mô tả trang chi tiết bến bãi 93

Bảng 3.5.18 Mô tả trang thêm mới tuyến đường 94

Bảng 3.5.19 Mô tả trang dashboard 96

Bảng 3.5.20 Mô tả trang quản lý lộ trình 96

Bảng 3.5.21 Mô tả trang thêm mới lộ trình 97

Bảng 3.5.22 Mô tả trang quản lý bảng giá 98

Bảng 3.5.23 Mô tả trang quản lý loại giá 99

Bảng 3.5.24 Mô tả trang quản lý xe 100

Bảng 3.5.25 Mô tả trang chi tiết xe 101

Bảng 3.5.26 Mô tả trang thêm mới xe 102

Bảng 3.5.27 Mô tả trang chỉnh sửa xe 103

Bảng 3.5.28 Mô tả trang tạo vé 104

Bảng 3.5.29 Mô tả trang quản chuyến đi 105

Bảng 3.5.30 Mô tả trang đăng nhập cho người dùng 106

Bảng 3.5.31 Mô tả trang chủ 107

Bảng 3.5.32 Mô tả trang tìm kiếm 108

Bảng 3.5.33 Mô tả trang chọn ghế 109

Bảng 3.5.34 Mô tả trang chọn điểm đón trả 110

Bảng 3.5.35 Mô tả trang đặt vé 111

Bảng 3.5.36 Bảng mô tả thanh toán 112

Bảng 3.5.37 Mô tả trang thông tin cá nhân 113

Bảng 3.5.38 Mô tả trang tất cả hóa đơn 114

xii

Bảng 3.5.39 Mô tả trang vé đang chờ xuất bến 115

Bảng 3.5.40 Mô tả trang các chuyến đi đã hoàn thành 115

Bảng 3.5.41 Mô tả trang chuyến đi đã hủy 116

Bảng 3.5.42 Mô tả đăng ký tài khoản người dùng 117

Bảng 3.5.43 Mô tả xác thực OTP 118

Bảng 4.2.1 Kịch bản đăng ký 121

Bảng 4.2.2 Kịch bản đăng nhập 121

Bảng 4.2.3 Kịch bản tìm kiếm vé xe 121

Bảng 4.2.4 Kịch bản đặt vé xe 122

Bảng 4.2.5 Kịch bản tạo vé xe 122

Bảng 4.2.6 Testcase đăng ký 123

Bảng 4.2.7 Test case đăng nhập 124

Bảng 4.2.8 Testcase tìm kiếm vé xe 124

Bảng 4.2.9 Testcase đặt vé xe 124

Bảng 4.2.10 Testcase tạo vé xe 125

xiii

DANH MỤC HÌNH

Hình 2.1.1 Website Vexere 9

Hình 2.1.2 Footer của Vexere 10

Hình 2.1.3 Website Megabus 11

Hình 2.1.4 Website EasyBook 12

Hình 2.3.1 Lược đồ usecase dành cho khách hàng 16

Hình 2.3.2 Lược đồ usecase cho nhà xe 17

Hình 2.3.3 Lược đồ use case cho admin 18

Hình 3.1.1 Hệ thống Background Service 42

Hình 3.1.2 Hệ thống NotificationService 43

Hình 3.2.1 ERD 45

Hình 3.3.1 Class diagram 47

Hình 3.4.1 Lược đồ chức năng đăng nhập 48

Hình 3.4.2 Lược đồ chức năng đăng xuất 49

Hình 3.4.3 Lược đồ cập nhật thông tin xe 50

Hình 3.4.4 Lược đồ cập nhật thông tin xe 51

Hình 3.4.5 Lược đồ chức năng thêm xe mới 52

Hình 3.4.6 Lược đồ chức năng xem thống kê doanh thu nhà xe 53

Hình 3.4.7 Lược đồ chức năng thêm mới bảng giá 54

Hình 3.4.8 Lược đồ chức năng thêm mới loại giá 55

Hình 3.4.9 Lược đồ chức năng thêm mới chuyến đi 56

Hình 3.4.10 Lược đồ chức năng cập nhật trạng thái chuyến đi 57

Hình 3.4.11 Lược đồ chức năng thêm mới lộ trình 58

Hình 3.4.12 Lược đồ chức năng xem chi tiết lộ trình 59

Hình 3.4.13 Lược đồ chức năng đăng ký tài khoản 60

Hình 3.4.14 Lược đồ chức năng tìm kiếm chuyến đi 61

Hình 3.4.15 Lược đồ chức năng hủy đơn hàng 62

Hình 3.4.16 Lược đồ chức năng đặt vé xe 63

Hình 3.4.17 Lược đồ chức năng đặt vé xe 64

Hình 3.4.18 Lược đồ chức năng thay đổi trạng thái tài khoản 65

Hình 3.4.19 Lược đồ chức năng cập nhật trạng thái nhà xe 66

xiv

Hình 3.4.20 Lược đồ chức năng thêm mới bến bãi, điểm dừng 68

Hình 3.4.21 Lược đồ chức năng cập nhật trạng thái bến bãi, điểm dừng 69

Hình 3.4.22 Lược đồ chức năng thêm mới loại xe 70

Hình 3.4.23 Lược đồ chức năng cập nhật loại xe 71

Hình 3.4.24 Lược đồ chức năng cập nhật trạng thái loại xe 72

Hình 3.4.25 Lược đồ chức năng thêm mới loại ghế 73

Hình 3.4.26 Lược đồ chức năng cập nhật thông tin loại ghế 74

Hình 3.4.27 Lược đồ chức năng cập nhật trạng thái loại ghế 75

Hình 3.4.28 Lược đồ chức năng thêm mới tuyến đi 76

Hình 3.4.29 Lược đồ chức năng cập nhật trạng thái bảng giá 77

Hình 3.5.1 Trang đăng nhập 78

Hình 3.5.2 Trang quản lý nhà xe 79

Hình 3.5.3 Quản lý thông tin người dùng 79

Hình 3.5.4 Trang quản lý loại xe 80

Hình 3.5.5 Trang quản lý loại ghế 81

Hình 3.5.6 Trang quản lý bến bãi 81

Hình 3.5.7 Trang quản lý bảng giá 83

Hình 3.5.8 Trang quản lý loại giá 84

Hình 3.5.9 Trang quản lý tuyến đường 85

Hình 3.5.10 Trang quản chi tiết người dùng 86

Hình 3.5.11 Trang quản lý thông chi tiết nhà xe 87

Hình 3.5.12 Trang thêm mới loại xe 88

Hình 3.5.13 Trang chỉnh sửa loại xe 89

Hình 3.5.14 Trang thêm mới loại ghế 90

Hình 3.5.15 Trang chỉnh sửa loại ghế 91

Hình 3.5.16 Trang thêm mới bến bãi 92

Hình 3.5.17 Trang chi tiết bến bãi 93

Hình 3.5.18 Trang thêm mới tuyến đường 94

Hình 3.5.19 Trang dashboard 95

Hình 3.5.20 Trang quản lý lộ trình 96

Hình 3.5.21 Trang thêm mới lộ trình 97

Hình 3.5.22 Trang quản lý bảng giá 98

xv

Hình 3.5.23 Trang quản lý loại giá 99

Hình 3.5.24 Trang quản lý xe 100

Hình 3.5.25 Trang quản lí chi tiết xe 101

Hình 3.5.26 Trang thêm mới xe 102

Hình 3.5.27 Trang chỉnh sửa xe 103

Hình 3.5.28 Trang tạo vé 104

Hình 3.5.29 Trang quản lý chuyến đi 105

Hình 3.5.30 Trang đăng nhập cho người dùng 106

Hình 3.5.31 Trang chủ 107

Hình 3.5.32 Trang tìm vé 108

Hình 3.5.33 Trang chọn ghế 109

Hình 3.5.34 Trang chọn điểm đón, trả 110

Hình 3.5.35 Trang đặt vé 111

Hình 3.5.36 Trang thanh toán 112

Hình 3.5.37 Trang thông tin cá nhân 113

Hình 3.5.38 Tất cả hóa đơn 114

Hình 3.5.39 Trang vé đang chờ xuất bến 114

Hình 3.5.40 Trang các chuyến đi đã hoàn thành 115

Hình 3.5.41 Trang chuyến đi đã hủy 116

Hình 3.5.42 Trang đăng ký tài khoản người dùng 117

Hình 3.5.43 Modal xác thực OTP 118

1

PHẦN MỞ ĐẦU

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

Trong bối cảnh cuộc sống hiện đại, nhu cầu di chuyển của con người ngày càng tăng, đặc biệt là trong lĩnh vực vận tải Tuy nhiên, việc lựa chọn một chuyến xe có điểm dừng, đỗ phù hợp nhu cầu di chuyển gặp nhiều khó khăn và tốn nhiều thời gian cũng như là công sức

Để góp phần đưa người dùng tiếp cận với các nhà xe với nhu cầu chuyến đi như mong muốn, nhóm đã quyết định xậy dụng website đặt vé xe khách với đề tài “Xây dựng website đặt vé xe khách sử dụng REACTJS VÀ ASP.NET”

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

Đề tài tập trung vào việc xây dựng website đặt vé xe trực tuyến đem lại tiện ích cho người dùng cuối, vì thế đối tượng nghiên cứu của đề tài sẽ bao gồm các đơn vị quản

lý vận tải hành khách, doanh nghiệp cung cấp dịch vụ đặt vé trực tuyến, và người dùng cuối cùng là những người có nhu cầu sử dụng các dịch vụ di chuyển

3 Phạm vi nghiên cứu

Đối tượng nghiên cứu của đề tài là việc xây dựng một website đặt vé xe trực tuyến cho người dùng cuối, vì vậy tập trung xây dựng các yêu cầu chức năng và phi chức năng cần phải có cho một website là: Thiết kế giao diện người dùng, hiệu suất hệ thống, bảo mật thông tin, tối ưu hóa quy trình đặt vé, phản hồi của người dùng để cải thiện hệ thống

2

4 Mục tiêu của đề tài

Để hoàn thành đề tài “Xây dựng website đặt vé xe khách sử dụng REACTJS và ASP.NET”, mục tiêu cần đặt ra cho đề tài là:

- Giao diện đơn giản, dễ sử dụng

- Quản lý các bến bãi, nhà xe của admin

- Quản lý các xe, lộ trình và chuyến đi cho company

- Chức năng tìm kiếm chuyến đi

- Các hình thức bảo mật cho website

5 Ý nghĩa khoa học và thực tiễn

- Ý nghĩa khoa học:

+ Nâng cao kiến thức: Đề tài này có thể đóng góp kiến thức mới trong lĩnh vực công nghệ thông tin, quản lý vận tải và trải nghiệm người dùng, mang lại những hiểu biết sau sắc về phát triển hệ thống đặt vé

+ Ứng dụng công nghệ reactjs và asp.net vào trong hệ thống giúp hệ thống chạy mượt mà vượt trội so với các web dùng công nghệ cũ

3

PHÂN NỘI DUNG

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

1.1.1 Khái niệm 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 web nhanh và hiệu quả với mã nguồn

Mục đích chính của ReactJS là khiến cho website hoạt động mượt mà, khả năng

mở rộng cao và đơn giản

Là một bản sao nhẹ của DOM thực sự được lưu trữ trong bộ nhớ của máy tính

Nó là một cây DOM được tạo và duyệt bởi React để theo dõi sự thay đổi của component [3]

dễ hiểu bằng cách kết hợp cú pháp giống HTML với JavaScript [3]

1.1.2.3 Component:

Một "component" là một khối xây dựng độc lập và tái sử dụng trong phát triển ứng dụng web Components là một cách để bạn chia giao diện người dùng thành các phần nhỏ và độc lập để quản lý chúng dễ dàng hơn

Functional Components:

- Được định nghĩa thông qua các hàm JavaScript

- Không có trạng thái (state) và các phương thức vòng đời của riêng chúng

- Thường được sử dụng cho các components đơn giản, không có logic phức tạp

Class Components:

- Được định nghĩa thông qua các lớp ES6

- Có thể chứa trạng thái (state) và các phương thức vòng đời của riêng chúng

- Thường được sử dụng cho các components có độ phức tạp cao, chứa nhiều logic

1.1.2.4 Props & State

a Mounting

Constructor(): Được gọi khi component được khởi tạo Bạn có thể khởi tạo state

và bind các phương thức ở đây

Render(): Trả về JSX để hiển thị giao diện người dùng

ComponentDidMount(): Được gọi sau khi component đã được lắp đặt vào DOM Thường được sử dụng để thực hiện các tác vụ sau khi component đã xuất hiện trên trang

b Updating

ShouldComponentUpdate(nextProps, nextState): Cho phép bạn kiểm soát việc cập nhật component bằng cách trả về true hoặc false Mặc định là true

Render(): Được gọi khi state hoặc props thay đổi

ComponentDidUpdate(prevProps, prevState): Được gọi sau khi component đã cập nhật Thường được sử dụng để thực hiện các tác vụ sau khi cập nhật

6

1.2.1 Giới thiệu C#

C# là một ngôn ngữ lập trình đa năng được phát triển bởi Microsoft

Nó được thiết kế để chạy trên nền tảng NET Framework và NET Core

C# chủ yếu được sử dụng cho phát triển ứng dụng dựa trên Windows, từ ứng dụng máy tính đến ứng dụng di động và web [6]

7

1.3.1 Giới thiệu ASP.NET

ASP.NET là một framework phát triển ứng dụng web được phát triển bởi Microsoft [4]

Nó cung cấp một cách mạnh mẽ để xây dựng các ứng dụng web và dịch vụ web chất lượng cao

ASP.NET Web API: Cho phép xây dựng các dịch vụ web RESTful

ASP.NET Core: Phiên bản dành cho cross-platform và open-source [1]

1.4.1 Giới thiệu

Microsoft SQL Server là một hệ quản trị cơ sở dữ liệu quan hệ (Relational Database Management System - RDBMS) do Microsoft phát triển Nó cung cấp một loạt các tính năng và công cụ mạnh mẽ để quản lý và tương tác với dữ liệu trong môi trường doanh nghiệp [6]

1.4.2 Đặc điểm

a Quản lý cơ sở dữ liệu quan hệ

SQL Server được thiết kế để lưu trữ và quản lý dữ liệu trong các bảng quan hệ (tables) theo mô hình quan hệ

Hỗ trợ ngôn ngữ truy vấn SQL (Structured Query Language) để thực hiện các thao tác như truy vấn, chèn, cập nhật, và xóa dữ liệu [6]

b Hiệu suất và tính dự trữ

Cung cấp các công cụ và cơ chế tối ưu hóa để đảm bảo hiệu suất cao khi thao tác với cơ sở dữ liệu

Hỗ trợ các kỹ thuật như chỉ mục (indexing), lập lịch nhiệm vụ (job scheduling),

và xử lý đồng thời để tối ưu hóa tương tác với dữ liệu

8

c Bảo mật

SQL Server có các tính năng bảo mật mạnh mẽ để bảo vệ dữ liệu, bao gồm quản

lý quyền (permissions), mã hóa dữ liệu, và kiểm soát truy cập

d Dịch vụ đám mây

SQL Server có sẵn trên các nền tảng đám mây như Microsoft Azure SQL Database, cung cấp linh hoạt trong triển khai và quản lý cơ sở dữ liệu [6]

- Các chức năng chính:

+Tìm kiếm chuyến đi + Đặt vé xe

+ Quản lý đơn hàng + Thuê xe

- Ưu điểm: Là hệ thống hợp tác với nhiều nhà xe nên khách hàng có nhiều sự lựa chọn để tìm kiếm chuyến đi và tiến hành đặt mua vé, có nhiều sự kiện giảm giá nhân các dịp lễ hoặc ưu đãi từ các nhà xe nên thu hút được lượng lớn khách hàng Có bộ lọc chuyến đi bao gồm theo giờ đi, điểm đón, điểm trả, hàng ghế… nên tối ưu hóa việc tìm kiếm chuyến đi cho khách hàng

- Khuyết điểm:

10

+ Hệ thống chưa sử dụng việc phân trang một cách tối ưu nhất, nên khi lọc chuyến đi phải kéo lên trên màn hình chính để thực hiện lọc, làm giảm cảm giác tương tác của người dùng

+ Phần chân trang chiếm quá lớn kích thước màn hình làm cho hệ thống không được đẹp mắt

Hình 2.1.2 Footer của Vexere

11

2.1.2 Website MeGaBus

- Website MeGaBus (https://megabus.com)

Hình 2.1.3 Website Megabus

- Giới thiệu chung: megabus.com là hệ thống cho phép khách hàng tìm kiếm đặt

xe khách, đặt phòng hoặc taxi trên toàn quốc

- Các chức năng chính:

+ Tìm kiếm chuyến đi

+ Đặt vé xe / phòng / thuê taxi

+ Kiểm tra đặt xe

- Ưu điểm: Tra cứu chuyến đi hoặc phòng một cách nhanh chóng và có nhiều sự lựa chọn cho khách hàng Áp dụng tốt việc phân trang cùng với lọc chuyến đi tăng trải nghiệm người dùng

- Khuyết điểm: Không hỗ trợ hình thức thanh toán online mà chỉ gửi xác nhận qua gmail

+ Tìm kiếm, đặt vé xe buýt, tàu hỏa trong nước

+ Tìm kiếm, đặt vé phà các nước trong khu vực Đông Nam Á

- Ưu điểm: Là hệ thống cho cả các nước trong khu vực Đông Nam Á nên phù hợp cho khách hàng tìm kiếm phương án di chuyển đến các điểm du lịch Hỗ trợ phương thức thanh toán trực tuyến, chấp nhận nhiều đơn vị tiền tệ

- Khuyết điểm: Tuy có thể tìm kiếm các chuyến đi đa quốc gia nhưng lại rất hạn chế chuyến đi, nên ảnh hưởng đến trải nghiệm người dùng khi thực hiện tra cứu nhiều lần mới tìm được chuyến đi phù hợp

13

2.3.1 Các chức năng yêu cầu nghiệp vụ

Bảng 2.2.1 Các chức năng nghiệp vụ

14 Quản lý các điểm dừng đỗ, bến xe Admin

14

2.3.2 Các chức năng yêu cầu hệ thống

Bảng 2.2.2 Các chức năng yêu cầu hệ thống

1 Phân quyền Phân quyền cho từng người dùng trong hệ

thống

- Vai trò admin: Có quyền cao nhất trong hệ thống, có quyền quản lý tài khoản, quản lý người dùng, quản lý các vai trò trong hệ thống

- Vai trò của tài khoản nhà xe: Quản lý các

xe mà nhà xe hiện đang có, quản lý các bến đỗ, trạm dừng mà xe có thể dừng để đón trả khách

- Vai trò khách hàng: Tìm kiếm chuyến đi, đặt vé xe, chỉnh sửa thông tin cá nhân

15

2.3.3 Các yêu cầu phi chức năng

Bảng 2.2.3 Các yêu cầu phi chức năng

1 Dễ sử dụng Các chức năng, thao tác phải đơn giản, dễ

sử dụng

2 Tính đúng đắn Các thông tin phải mang tính đúng đắn, hợp

lệ và phải nằm trong khuôn khổ pháp luật đường bộ

16

2.3.1 Lược đồ Use Case

a Lược đồ usecase dành cho khách hàng

Hình 2.3.1 Lược đồ usecase dành cho khách hàng

17

b Lược đồ usecase dành cho nhà xe

Hình 2.3.2 Lược đồ usecase cho nhà xe

18

c Lược đồ usecase cho admin

Hình 2.3.3 Lược đồ use case cho admin

19

2.3.2 Đặc tả Use Case

2.3.2.1 Những Use Case dùng chung

Bảng 2.3.1 Usecase đăng kí

2 Hệ thống hiển thị form đăng ký cho actor

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

4 Actor nhấn nút “Lưu”

5 Hệ thống kiểm tra dữ liệu đầu vào

6 Tạo tài khoản dựa theo thông tin đăng ký do actor nhập

7 Trả về trang đăng nhập cho người dùng

4.1.1 Hệ thống hiển thị thông báo xác nhận

4.1.2 Actor xác nhận 4.1.3 Xóa tất cả dữ liệu vừa nhập và trả về trang chủ

6.1 Trả về thông báo lỗi nếu quá trình tạo tài khoản phát sinh lỗi

20

Bảng 2.3.2 Bảng usecase đăng nhập

2 Hệ thống chuyển sang trang Đăng nhập

3 Actor nhập thông tin để đăng nhập bao gồm username và password

4 Actor nhấn “Đăng nhập”

5 Hệ thống kiểm tra thông tin tài khoản bao gồm tên tài khoản và mật khẩu dưới cơ sở dữ liệu

6 Hệ thống xác nhận và chuyển qua trang chủ

thông báo yêu cầu actor phải nhập đầy đủ các thông tin, Actor quay lại bước 2 hoặc huỷ bỏ thao tác

5.1 Actor nhập sai thông tin tài khoản, hệ thống thông báo tài khoản/mật khẩu không đúng, Actor quay lại bước 3 hoặc huỷ bỏ thao tác

21

Bảng 2.3.3 Use case đăng xuất

2 Hiển thị thông báo: “Bạn có muốn đăng xuất”

3 Actor chọn “Có”

4 Hệ thống xóa thông tin đăng nhập và quay trở về trang chủ

trang hiện tại

22

2.3.2.2 Khách hàng

Bảng 2.3.4 Usecase tìm chuyến đi

điểm dừng và ngày tháng năm xuất phát

dừng kèm theo bộ lọc gồm các nhà xe, giờ xuất phát, giá vé

2 Actor nhấn vào ô nơi đến và nhập nơi đến

3 Actor nhấn vào ô thời gian xuất phát để chọn ngày tháng năm khởi hành

4 Actor nhấn nút “Tìm kiếm ”, hệ thống hiến thị danh sách các chuyến đi kèm theo bộ lọc

4.1 Actor chọn lọc theo nhà xe: hệ thống hiển thị danh sách chuyến đi theo nhà xe

4.2 Actor chọn lọc theo giờ xuất phát: hệ thống hiển thị danh sách chuyến xe theo giờ đi

4.3 Actor chọn lọc theo giá vé: có 2 phương án lựa chọn là từ thấp đến cao và ngược lại Hệ thống hiển thị danh sách chuyến xe theo giá vé

Luồng thay thế