Xây dựng hệ thống website đặt vé xe trực tuyến giá rẻ

Tên đề tài: Xây dựng hệ thống website đặt vé xe trực tuyến giá rẻ.Sinh viên thực hiện: Đặng Việt Anh Mã SV: 1811505310201 Lớp: 18T2 Đồ án với đề tài Website đặt vé xe trực tuyến giá rẻ đ

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

Sinh viên thực hiện : Đặng Việt Anh

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

KHOA CÔNG NGHỆ SỐ

ĐỒ ÁN TỐT NGHIỆP

ĐẠI HỌC

NGÀNH: CÔNG NGHỆ THÔNG TIN

CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

ĐỀ TÀI:

XÂY DỰNG WEBSITE ĐẶT VÉ XE TRỰC TUYẾN GIÁ RẺ

Giảng viên hướng dẫn duyệt

Đà Nẵng, tháng 2/2023

Tên đề tài: Xây dựng hệ thống website đặt vé xe trực tuyến giá rẻ.

Sinh viên thực hiện: Đặng Việt Anh

Mã SV: 1811505310201 Lớp: 18T2

Đồ án với đề tài Website đặt vé xe trực tuyến giá rẻ được xây dựng bằng ngônngữ lập trình javaScript, sử dụng ReactJs library, cùng các plugin hỗ trợ nhưBootstrap, Ant Design, ant Design Charts để xây dựng phía client, và sử dụng hệ quảntrị cơ sở dữ liệu MongoDB, NodeJs, Express để xây dựng phần server Website baogồm các chức năng chính dành cho người sử dụng không phải là khách hàng – kháchvãng lai như: đăng ký tài khoản, đăng nhập, xem danh sách các chuyến xe, tìm chuyến

xe tới địa điểm cần đến Các chức năng dành cho người sử dụng là bệnh nhân cũnggiống như khách hàng – khách vãng lai, thêm vào đó là chức năng thanh toán sau khiđặt vé Đối với người sử dụng là quản trị thì ngoài các chức năng của khách hàng, cóthể sử dụng các chức năng khác như xem thống kê, quản lý tài khoản, quản lý chuyến

xe, quản lý danh sách khách hàng,…

Giảng viên hướng dẫn: ThS Lê Vũ

Sinh viên thực hiện: Đặng Việt Anh Mã SV: 1811505310201

1 Tên đề tài

Xây dựng hệ thống website đặt vé xe trực tuyến giá rẻ

2 Các số liệu, tài liệu ban đầu

 Dựa trên qui định upload tài liệu, các qui tắc đặt câu hỏi

 Tài liệu tham khảo: https://reactjs.org/

3 Nội dung chính của đồ án

Quá trình xây dựng hệ thống website đặt vé xe giá rẻ

 Thu thập thông tin tài liệu liên quan và khảo sát thực tế;

 Phân tích thiết kế các chức năng của hệ thống;

 Phân tích thiết kế cơ sơ dữ liệu;

 Thiết kế giao diện cho các chức năng;

Lời đầu tiên, em xin gởi lời cảm ơn chân thành đến quý thầy cô đã giúp đỡ chúng

em thực hiện đề tài này Đặc biệt là ThS Lê Vũ đã tận tình giúp đỡ chúng em trongxuất quá trình thực hiện đề tài tốt nghiệp này

Đồng thời, chúng em cũng xin cảm ơn quý thầy cô thuộc ngành Công nghệThông tin trường Đại học Sư phạm Kỹ thuật Đà Nẵng đã truyền đạt những kiến thứccần thiết và những kinh nghiệm quý báu cho chúng em trong suốt thời gian 4 năm trêngiảng đường để em có thể thực hiện tốt đề tài này Đặc biệt, em xin gởi lời cảm ơnchân thành tới Ths Lê Vũ - giáo viên chủ nhiệm lớp 18T2 đã giúp đỡ chúng em rấtnhiều trong quá trình học tập và công việc

Em cũng xin gởi lời cảm ơn của mình tới quý thầy cô ở trung tâm IViettech đã hỗtrợ em những kiến thức cơ bản và cần thiết mà chúng em đã và đang áp dụng trong quátrình thực hiện đề tài

Cuối cùng, em xin chân thành cảm ơn những người bạn, và các anh chị tại công

ty STECH đã luôn đồng hành, chỉ bảo nhiệt tình trong quá trình thực tập tại công ty để

Em xin cam đoan:

- Những nội dung trong luận văn này do em thực hiện dưới sự hướng dẫn củathầy Lê Vũ

- Mọi tham khảo trong luận văn đều được trích dẫn rõ ràng tên tác giả, tên côngtrình, thời gian, địa điểm công bố

- Mọi sao chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, em xin chịuhoàn toàn trách nhiệm

Sinh viên thực hiện

NHẬN XÉT CỦA NGƯỜI HƯỚNG DẪN i

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP iv

MỤC LỤC iii

DANH MỤC BẢNG BIỂU vii

DANH MỤC HÌNH VẼ viii

DANH MỤC CHỮ VIẾT TẮT TIẾNG ANH x

MỞ ĐẦU 1

1 Mục tiêu đề tài 1

2 Đối tượng nghiên cứu và phạm vi nghiên cứu 2

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

b Phạm vi nghiên cứu 2

3 Phương pháp nghiên cứu 2

4 Giải pháp công nghệ 2

5 Cấu trúc đồ án 2

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

1.1 Ngôn ngữ lập trình JavaScript 3

1.1.1 Khái niệm về JavaScript 3

1.1.2 Lịch sử phát triển 3

1.2 Reactjs library 5

1.2.1 Khái niệm về ReactJs 5

1.2.2 Lợi ích khi sử dụng Reactjs 5

1.2.3 JSX 6

1.2.4 Virtual DOM 7

1.3.1 Khái niệm về NoSQL 8

1.3.2 Khái niệm về MongoDB 8

1.4 Khái niệm về NodeJs 9

1.5 Bootstrap và responsive 10

1.6 Ant Design 11

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

2.1 Khảo sát hệ thống 12

2.1.1 Khảo sát thực tế 12

2.1.2 Khảo sát người dùng 12

2.2 Đối tượng sử dụng hệ thống 12

2.2.1 Quản trị viên (Admin) 12

2.2.2 Khách hàng (User) 12

2.2.3 Khách vãng lai (Visiter) 13

2.3 Phân tích 13

2.3.1 Yêu cầu chất lượng 13

2.3.2 Yêu cầu chức năng 13

2.4 Biểu đồ Use Case 14

2.4.1 Chức năng Đặt vé 14

2.4.2 Quản lý Vé 15

2.4.3 Quản lý Thông tin người dùng 15

2.4.4 Quản lý Điểm trạm 16

2.4.5 Quản lý lịch trình chuyến xe 16

2.4.6 Quản lý Xe 17

2.4.7 Quản lý Nhà xe 17

2.5 Sơ đồ hoạt động 19

2.5.1 Sơ đồ hoạt động đặt vé 19

2.5.2 Sơ đồ hoạt động Thanh toán 20

2.5.3 Sơ đồ hoạt động quản lý vé 21

2.5.4 Sơ đồ hoạt quản lý chuyến xe 24

2.5.5 Sơ đồ hoạt động Thống kê 27

2.6 Sơ đồ tuần tự 28

2.6.1 Sơ đồ tuần tự Đăng nhập – Đặt vé 28

2.6.2 Sơ đồ tuần tự trang “Quản lý” 32

2.7 Sơ đồ class 38

2.7.1 Sơ đồ class xem trang Thống kê 38

2.7.2 .Sơ đồ lớp xem trang Quản lí vé 38

2.8 Sơ đồ mô tả công việc 39

2.9 Sơ đồ ERD 40

2.10 Thiết kế hệ thống 41

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

2.10.2 Đặc tả chức năng 45

Chương 3 TRIỂN KHAI HỆ THỐNG 48

3.1 Công cụ xây dựng chương trình 48

3.1.1 Công cụ 48

3.1.2 Môi trường phát triển 48

3.2 Giao diện chương trình 48

3.2.1 Trang giao diện 48

3.2.2 Trang quản trị 51

3.3 Ưu điểm 56

3.4 Hạn chế 56

3.5 Hướng phát triển 56

TÀI LIỆU THAM KHẢO 57

DANH MỤC BẢNG BIỂ

Bảng 2 2: Bảng User……….41

Bảng 2 3: Bảng Ticket (Vé)……… 41

Bảng 2 4: Bảng Vehicle (Xe)………42

Bảng 2 5: Bảng Trip (Chuyến đi)……… 42

Bảng 2 6: Bảng TripPassenger (Chuyến xe)……….42

Bảng 2 7: Bảng Station (Trạm xe)……… 43

Bảng 2 8: Bảng CarCompany (Nhà Xe)……… 43

Bảng 2 9: Bảng Seat (Ghế)……… 43

Bảng 2 10: Bảng Point (Điểm trả)……… 44

Bảng 2 11: Bảng Comment (Bình luận)……… 44

Bảng 2 12: Bảng Rate (Đánh giá)……….44

Bảng 2 13: Bảng Point (Thời gian điểm trả)……….45

Bảng 2 14: Bảng PointTicket (Đánh giá)……… 45

Hình 1.1: Hình ảnh cây DOM của một website cơ bản 6

Hình 1.2: Cách thức hoạt động của DOM ảo và DOM thực 7

Hình 2.1 Sơ đồ Usecase 14

Hình 2.2: Usecase Đặt vé 15

Hình 2.3: Usecase quản lý Vé 15

Hình 2.4: Usecase quản lý Thông tin người dùng 16

Hình 2.5: Usecase quản lý Điểm trạm 16

Hình 2.6: Usecase quản lý Lịch trình chuyến xe 17

Hình 2.7: Usecase thiết lập hệ thống 17

Hình 2.8: Usecase quản lý Nhà xe 18

Hình 2.9: Usecase Thống kê 18

Hình 2.10: Sơ đồ hoạt động Đặt vé 19

Hình 2.11: Sơ đồ hoạt động Thanh toán 20

Hình 2.12: Sơ đồ hoạt động quản lý vé 21

Hình 2.13: Sơ đồ hoạt động quản lý Vé - tiến trình 1 22

Hình 2.14: Sơ đồ hoạt động quản lý Vé - tiến trình 2 23

Hình 2.15: Sơ đồ hoạt động quản lý chuyến Xe 24

Hình 2.16: Sơ đồ hoạt động quản lý Chuyến xe - tiến trình 1 25

Hình 2.17: Sơ đồ hoạt động quản lý Chuyến xe - tiến trình 2 25

Hình 2.18: Sơ đồ hoạt động quản lý Chuyến xe - tiến trình 3 26

Hình 2.19: Sơ đồ hoạt động Thống kê 27

Hình 2.20: Sơ đồ hoạt động Đăng nhập 28

Hình 2.21: Sơ đồ hoạt động Đăng ký 29

Hình 2.22: Sơ đồ hoạt động Đặt vé 30

Hình 2.23: Sơ đồ hoạt động Thanh toán 31

Hình 2.24: Sơ đồ hoạt động trang Quản lý vé 32

Hình 2.25: Sơ đồ hoạt động trang Quản lý xe 33

Hình 2.26: Sơ đồ hoạt động trang Quản lý nhà xe 34

Hình 2.27: Sơ đồ hoạt động trang Quản lý thông tin cá nhân 35

Hình 2.29: Sơ đồ hoạt động trang Quản lý điểm đón/trả 37

Hình 2.30: Sơ đồ class xem trang Thống kê 38

Hình 2.31: Sơ đồ class xem trang Quản lí vé 38

Hình 2.32: Sơ đồ mô tả công việc 39

Hình 2.33: Sơ đồ ERD 40

Hình 3.1: Giao diện Đăng nhập 48

Hình 3.2: Giao diện Đăng ký 49

Hình 3.3: Giao diện trang chủ 49

Hình 3.4: Giao diện trang trang Đặt vé 50

Hình 3.5: Giao diện trang Thanh toán 50

Hình 3.6: Giao diện trang Quản lý vé 51

Hình 3.7: Giao diện Sửa thông tin vé 51

Hình 3.8: Giao diện trang Thông tin người dùng 52

Hình 3.9: Giao diện trang Quản lý chuyến xe 52

Hình 3.10: Giao diện trang Quản lý nhà xe 53

Hình 3.11: Giao diện Thêm nhà xe 53

Hình 3.12: Giao diện trang Quản lý xe 54

Hình 3.13: Giao diện trang Quản lý bến xe 54

Hình 3.14: Giao diện Thêm điểm đón/trả 55

Hình 3.15: Giao diện trang Thống kê 55

Stt Chữ viết tắt Giải nghĩa Nghĩa tiếng Việt

1 HTML Hyper Text Markup

Language Ngôn ngữ đánh dấu siêu văn bản

2 ERD Entity Relationship Diagram Sơ đồ thực thể quan hệ

MỞ ĐẦU

Trong đại dịch Covid nhiều người dân, người lao động, người ở các địa phươngkhác phải ở lại tại nơi để phòng chống lay lan dịch bệnh gây ra các tình trạng thiếuviệc làm nhưng lại không thể về quê Từ đó kéo theo sự di chuyển chỗ ở, chỗ làm việccủa rất nhiều người Mọi người có nhu cầu đi lại ngày càng nhiều Mặt khác, do kinh

tế phát triển nên nhu cầu đi thăm quan, thăm viếng người nhà ở xa tăng

Trên thực tế nhu cầu đi lại của người dân tăng đột biến và với cách mua và bán vé

xe truyền thống đã không đáp ứng được nhu cầu bức xúc đó Thường diễn ra cảnhchen lấn xô đẩy để mua vé Từ thực tế đó đã gây cho người dân rất nhiều bức xúc nhưchờ vài tiếng mà không mua được vé, đến lượt mua vé thì được thông báo hết vé Cònđối với các công ty vận tải thì cũng gặp khó khăn trong việc tổ chức bán vé xe Cảnhchen lấn xô đẩy đó đã tạo điều kiện cho bọn móc túi, cướp giật, bán vé chợ đen hoạtđộng Càng làm cho tình hình thêm tồi tệ, người dân và doanh nghiệp càng thêm bứcxúc

Từ những bức xúc đó, nên em đã quyết định chọn đề tài khóa luận tốt nghiệp là

Xây dựng hệ thống website đặt vé xe khách chất lượng cao Hệ thống sẽ giải quyết

được những khó khăn trên Khi mà công nghệ thông tin phát triển mạnh, mạng internet

về tận từng hộ gia đình, người dân thường xuyên tiếp xúc với máy tính, mạng internetthì hệ thống ra đời là rất phù hợp với tình hình thực tiễn Đặc biệt với những người bậnrộn không có thời gian ra bến xe mua vé thì với những cái click chuột mà mua được vé

xe thì điều này thật có ý nghĩa Khi hệ thống đưa vào hoạt động không chỉ mạng lại sựtiện lợi cho người dân trong việc mua vé xe mà còn giúp các công ty vận tải phục vụhành khách tốt hơn

1 Mục tiêu đề tài

Từ những lý do đã nêu trên,đề tài hướng đến xây dựng hệ thống website đặt vé xetrực tuyến giá rẻ nhầm:

- Xây dựng một website với giao diện trực quan;

- Website, tiện lời dễ sử dụng hướng tới người dung;

- Hỗ trợ quản lý người dùng trong việc đặt vé xe

2 Đối tượng nghiên cứu và phạm vi nghiên cứu

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

Phân tích thiết kế chức năng đặt vé, quản lý các thành phần liên quan đến đặt vàthanh toán vé xe

b Phạm vi nghiên cứu

Đề tài được áp dụng cho việc đặt vé xe trên toàn quốc

3 Phương pháp nghiên cứu

- Phương pháp nghiên cứu lý thuyết thu thập thông tin qua internet, tài liệu, sách

để tìm được các cơ sở lý thuyết liên quan vấn đề nghiên cứu

- Phương pháp triển khai thực nghiệm: xây dựng website

4 Giải pháp công nghệ

- Ngôn ngữ lập trình: Reactjs, Nodejs, Express

- Hệ quản trị cơ sở dữ liệu: MongoDB

- Công cụ hỗ trợ: VS Code, MongoDB Alat, MongoDB Compass

5 Cấu trúc đồ án

Cấu trúc đồ án tốt nghiệp gồm các phần như sau:

- Mở đầu

- Chương I: Cơ sở lý thuyết

- Chương II: Phân tích thiết kế hệ thống

- Chương III: Xây dựng chương trình

- Kết luận và hướng phát triển

Chương 1

CƠ SỞ LÝ THUYẾT 1.1 Ngôn ngữ lập trình JavaScript

1.1.1 Khái niệm về JavaScript

JavaScript là ngôn ngữ lập trình được nhà phát triển sử dụng để tạo trang webtương tác Từ làm mới bảng tin trên trang mạng xã hội đến hiển thị hình ảnh động vàbản đồ tương tác, các chức năng của JavaScript có thể cải thiện trải nghiệm ngườidùng của trang web Là ngôn ngữ kịch bản phía máy khách, JavaScript là một trongnhững công nghệ cốt lõi của World Wide Web Ví dụ: khi duyệt internet, bất cứ khinào bạn thấy quảng cáo quay vòng dạng hình ảnh, menu thả xuống nhấp để hiển thịhoặc màu sắc phần tử thay đổi động trên trang web cũng chính là lúc bạn thấy các hiệuứng của JavaScript

1.1.2 Lịch sử phát triển

Brendan Eich chính là người đã phát triển Javascript tại Netscape với tiền thân làMocha Sau đó, Mocha được đổi thành LiveScript và cuối cùng mới đổi thànhJavaScript

Lịch sử phiên bản JavaScript:

- Tháng 12 năm 1994 – ra mắt trình duyệt Navigator;

- Tháng 9 năm 1995 – ra mắt JavaScript: Netscape thuê Eich để nhúng Đề án vàotrình duyệt của mình với Java, được thêm vào như một phần của sự hợp tác vớiSun Microsystems Nhận thấy rằng đây không phải là cách tiếp cận tốt nhất,Eich được giao nhiệm vụ thiết kế một ngôn ngữ mới có các yếu tố của cả hainhưng gần với Java hơn là Scheme Anh ta chỉ mất chưa đầy hai tuần để hoànthành nhiệm vụ

- Tháng 6 năm 1997 – ECMAScript đầu tiên: Sau khi đệ trình lên ECMAInternational, một cơ quan đặt ra các tiêu chuẩn cho hệ thống thông tin, vàotháng 11 năm 1996, JavaScript thúc đẩy việc phát hành đặc tả ngôn ngữ chính

thức đầu tiên Các thông số kỹ thuật khác sẽ tiếp tục cho đến năm 2000, nơichúng sẽ gặp phải rào cản.

- Đầu năm 2000 – Microsoft nâng cấp tiêu chuẩn hóa: Giành 95% thị phần vớiExplorer, Microsoft ngừng hợp tác với ECMA International về ngôn ngữJScript của họ vì JScript đã trở thành kịch bản phía máy khách mặc định Điềunày dẫn đến việc tiếp tục tiêu chuẩn hóa ngừng hoạt động

- Tháng 9 năm 2002 – Firefox thay đổi trò chơi tiêu chuẩn hóa: Mozilla, người kếnhiệm Netscape, phát hành trình duyệt Firefox, cuối cùng đã dẫn đến sự trỗidậy của JavaScript trở lại Firefox là một trình duyệt phổ biến bắt đầu chiếm thịphần từ Internet Explorer Năm 2004, Mozilla bắt đầu làm việc với ECMAInternational về tiêu chuẩn hóa, nhưng không có thông số kỹ thuật mới nàođược công bố vì Microsoft tiếp tục từ chối cộng tác

- Tháng 2 năm 2005 – JavaScript hồi sinh: Jesse James Barrett giới thiệu sáchtrắng, “Ajax: Cách tiếp cận mới đối với ứng dụng web” về việc tạo ra các ứngdụng web cho phép tải nền thay vì tải lại toàn bộ trang và JavaScript là trungtâm của chúng Ajax là một phiên bản rút gọn của JavaScript + XML khôngđồng bộ Điều này đã thúc đẩy cộng đồng JavaScript bắt đầu phát triển nhiềukhung và thư viện bao gồm: Angular, Ember Js, Jquery, React Js, Vue Js, …

- Tháng 9 năm 2008 – Chrome phát triển vượt bậc với JavaScript: Google pháthành Chrome, một phần được viết bằng JavaScript và có công cụ JavaScriptV8 Nó là trình duyệt nhanh nhất trên thị trường vào thời điểm đó Chromechiếm 64% thị phần trình duyệt 95% cổ phần mà Microsoft từng sở hữu vớiExplorer hầu như không tồn tại Nó đã thay thế trình duyệt bằng Edge, chỉ có4% thị phần

- Tháng 12 năm 2009 – Tiêu chuẩn ECMA mới: Sau hơn một năm rưỡi nỗ lực,đặc tả ngôn ngữ ECMAScript 5 mới được phát hành Nó hiện đang ở phiên bảnthứ 11

- Năm 2012: Lấy cảm hứng từ trải nghiệm giáo dục phong phú mà anh có được ởHàn Quốc, Tony Phillips bắt đầu viết mã bootcamp Hack Reactor cùng với anhtrai Marcus Phillips và Shawn Drost Khoá đầu tiên của họ gồm 16 sinh viên,

tất cả đều tìm được việc làm Hack Reactor tập trung vào giáo dục JavaScript vàtrở thành bootcamp viết mã hàng đầu trên toàn quốc.

- Năm 2022: Hack Reactor ra mắt chương trình đào tạo trực tuyến hoàn toàn trựctuyến về Kỹ thuật phần mềm trong 12, 19 và 36 tuần, cho phép sinh viên ở bất

cứ đâu trở thành kỹ sư phần mềm sẵn sàng xây dựng các ứng dụng phức tạptrong công việc và giải quyết các vấn đề độc đáo, đầy thách thức

1.2 Reactjs library

1.2.1 Khái niệm về ReactJs

- Reactjs là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây dựngnhững thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sửdụng lại được

- Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt độngtrên phía client, mà còn được render trên server và có thể kết nối với nhau React sosánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ítthay đổi nhất trên DOM

1.2.2 Lợi ích khi sử dụng Reactjs

- ReactJS hỗ trợ cho việc viết các đoạn code Javascript sẽ trở nên dễ dàng hơnbởi nó sử dụng một cú pháp đặc biệt đó chính là cú pháp JSX Thông qua JSX chophép người lập trình có thể nhúng code HTML và Javascript

- ReactJS cho phép các Developer phá vỡ những cấu tạo UI phức tạp thànhnhững component độc lập Developer cũng sẽ không phải lo lắng về tổng thể ứng dụngweb, giờ đây người lập trình sẽ dễ dàng chia nhỏ các cấu trúc UI/UX phức tạp thànhtừng component đơn giản hơn

- Một trong những ưu điểm tuyệt vời nữa của ReactJS đó là sự thân thiện vớiSEO Hầu như các JS Frameworks hiện nay không thân thiện với các tìm kiếm mặc dù

đã được cải thiện nhiều nhưng dưới sự hỗ trợ của các render dữ liệu trả về dưới dạngweb page sẽ giúp cho SEO chuẩn hơn

- Có thể sử dụng cho cả Mobile application: Hầu hết chúng ta đều biết rằngReactJS được sử dụng cho việc lập trình website, nhưng thực chất nó được sinh rakhông chỉ làm mỗi đều đó Nếu bạn cần phát triển thêm ứng dụng Mobile, thì hãy sử

dụng thêm React Native – một framework khác được phát triển cũng chính Facebook,bạn có thể dễ dàng “chia sẻ” các Component hoặc sử dung lại các Business Logictrong ứng dụng.

- Debug dễ dàng: Facebook đã phát hành 1 Chrome extension dùng trong việcdebug trong quá trình phát triển ứng dụng Điều đó giúp tăng tốc quá trình release sảnphẩm cung như quá trình coding của bạn

- Công cụ phát triển web hot nhất hiện nay: Nếu bạn nhìn vào số liệu thống kê từGoogle Trend ở Việt Nam ở hình bên dưới, dạo lướt qua các trang tuyển dụng hàngđầu ở Việt Nam như Topdev, Itviec, v.v bạn sẽ thấy số lượng tuyển dụng cho vị tríReact Developer là cực kỳ lớn cùng với mức lương vô cùng hấp dẫn và độ phổ biếnhiện tại của ReactJS trên thị trường Việt Nam là như thế nào

1.2.3 JSX

Trọng tâm chính của bất kỳ website cơ bản nào đó là những HTML documents.Trình duyệt Web đọc những document này để hiển thị nội dung của website trên máytính, tablet, điện thoại của bạn Trong suốt quá trình đó, trình duyệt sẽ tạo ra một thứgọi là Document Object Model (DOM) – một tree đại diện cho cấu trúc website đượchiển thị như thế nào Lập trình viên có thể thêm bất kỳ dynamic content nào vào những

dự án của họ bằng cách sử dụng ngôn ngữ JavaScript để thay đổi cây DOM

Hình 1.1: Hình ảnh cây DOM của một website cơ bản

JSX (nói ngắn gọn là JavaScript extension) là một React extension giúp chúng ta

dễ dàng thay đổi cây DOM bằng các HTML-style code đơn giản Và kể từ lúc ReactJSbrowser hỗ trợ toàn bộ những trình duyệt Web hiện đại, bạn có thể tự tin sử dụng JSXtrên bất kỳ trình duyệt nào mà bạn đang làm việc

1.2.4 Virtual DOM

Khái niệm DOM ảo xuất hiện và hoạt động tốt hơn đáng kể so với DOM thực.DOM ảo chỉ là một đại diện ảo của DOM Mỗi khi trạng thái ứng dụng của chúng tôithay đổi, DOM ảo sẽ được cập nhật thay vì DOM thực

Hình 1.2: Cách thức hoạt động của DOM ảo và DOM thực

Trong ReactJs, mỗi phần giao diện người dùng là một thành phần, và mỗi thànhphần có một hoặc nhiều trạng thái React tuân theo mô hình có thể quan sát được vàlắng nghe các thay đổi trạng thái (observable pattern) Khi một trong các trạng thái củaphần giao diện thay đổi, React cập nhật DOM ảo Sau khi DOM ảo đã được cập nhật,

React sẽ so sánh phiên bản DOM ảo hiện tại với phiên bản trước đó Quá trình nàyđược gọi là "diffing".

Khi React biết các đối tượng DOM ảo nào đã thay đổi, sẽ tiến hành cập nhật duynhất đối tượng đó vào DOM thật Điều này làm cho hiệu xuất nhanh hơn đáng kể khi

so sánh với thao tác trực tiếp với DOM thực, làm cho React nổi bật như một thư việnJavaScript hiệu suất cao

1.3 Tổng quan về cơ sở dữ liệu MongoDB

1.3.1 Khái niệm về NoSQL

- NoSQL còn có nghĩa là Non-Relational (NoRel) – không ràng buộc Tuy nhiên,thuật ngữ đó ít phổ dụng hơn và ngày nay người ta thường dịch NoSQL thành NotOnly SQL – Không chỉ SQL NoSQL ám chỉ đến những cơ sở dữ liệu không dùng môhình dữ liệu quan hệ để quản lý dữ liệu trong lĩnh vực phần mềm

- Thuật ngữ NoSQL được giới thiệu lần đầu vào năm 1998 sử dụng làm tên gọichung cho các lightweight open source relational database (cơ sở dữ liệu quan hệnguồn mở nhỏ) nhưng không sử dụng SQL cho truy vấn

- Vào năm 2009, Eric Evans, nhân viên của Rackspace giới thiệu lại thuật ngữNoSQL trong một hội thảo về cơ sở dữ liệu nguồn mở phân tán Thuật ngữ NoSQLđánh dấu bước phát triển của thế hệ database mới: distributed (phân tán) + non-relational (không ràng buộc)

1.3.2 Khái niệm về MongoDB

- Là một database hướng tài liệu (document), một dạng NoSQL database Vì thế,MongoDB sẽ tránh cấu trúc table-based của relational database để thích ứng với các tàiliệu như JSON có một schema rất linh hoạt gọi là BSON MongoDB sử dụng lưu trữ

dữ liệu dưới dạng Document JSON nên mỗi một collection sẽ các các kích cỡ và cácdocument khác nhau Các dữ liệu được lưu trữ trong document kiểu JSON nên truyvấn sẽ rất nhanh

- MongoDB lần đầu ra đời bởi MongoDB Inc., tại thời điểm đó là thế hệ 10, vàotháng Mười năm 2007, nó là một phần của sản phẩm PaaS (Platform as a Service)

tương tự như Windows Azure và Google App Engine Sau đó nó đã được chuyểnthành nguồn mở từ năm 2009.

- MongoDB đã trở thành một trong những NoSQL database nổi trội nhất bấy giờ,được dùng làm backend cho rất nhiều website như eBay, SourceForge và The NewYork Times

- Các feature của MongoDB gồm có:

 Indexing: bất kì field nào trong BSON document cũng có thể đượcindex

 Replication: có ý nghĩa là “nhân bản”, là có một phiên bản giống hệtphiên bản đang tồn tại, đang sử dụng Với cơ sở dữ liệu, nhu cầu lưu trữlớn, đòi hỏi cơ sở dữ liệu toàn vẹn, không bị mất mát trước những sự cốngoài dự đoán là rất cao Vì vậy, người ta nghĩ ra khái niệm “nhân bản”,tạo một phiên bản cơ sở dữ liệu giống hệt cơ sở dữ liệu đang tồn tại, vàlưu trữ ở một nơi khác, đề phòng có sự cố

 Aggregation: Các Aggregation operation xử lý các bản ghi dữ liệu và trả

về kết quả đã được tính toán Các phép toán tập hợp nhóm các giá trị từnhiều Document lại với nhau, và có thể thực hiện nhiều phép toán đadạng trên dữ liệu đã được nhóm đó để trả về một kết quả duy nhất TrongSQL, count(*) và GROUP BY là tương đương với Aggregation trongMongoDB

 Lưu trữ file: MongoDB được dùng như một hệ thống file tận dụngnhững function trên và hoạt động như một cách phân phối qua sharding

1.4 Khái niệm về NodeJs

- NodeJS là một mã nguồn mở, đa nền tảng, chạy trên môi trường JavaSript,được xây dựng trên V8 JavaScript engine của Chrome - V8 thực thi mã JavaScript bênngoài trình duyệt Nó được tạo ra vào năm 2009 đi kèm với một lợi thế chính - NodeJScho phép thực hiện lập trình bất đồng bộ

- Ở chế độ đồng bộ thực thi từng dòng và tiến hành thực thi dòng tiếp theo khidòng hiện tại đã thực thi xong

- Khi bất đồng bộ thực thi tất cả dòng code cùng một lúc

- NodeJS là một nền tảng được xây dựng trên JavaScript runtime của Chrome vớimục đích xây dựng các ứng dụng mạng nhanh chóng và có thể mở rộng được một cách

dễ dàng hơn NodeJS sử dụng mô hình I/O lập trình theo sự kiện, non-blocking, do đónodeJS khá gọn nhẹ và hiệu quả - công cụ hoàn hảo cho các ứng dụng chuyên sâu về

dữ liệu theo thời gian thực chạy trên các thiết bị phân tán

- NodeJS là môi trường runtime mã nguồn mở đa nền tảng, được sử dụng để pháttriển các ứng dụng mạng và ứng dụng server-side Các ứng dụng NodeJS được viếtbằng JavaScript và có thể chạy trong NodeJS runtime trên OS X, Microsoft Windows

và Linux

- NodeJS cũng cung cấp một thư viện bao gồm rất nhiều các module JavaScriptkhác nhau nhằm đơn giản hóa việc phát triển các ứng dụng web, qua đó giảm thiểutình trạng sử dụng quá nhiều Node.js

1.5 Bootstrap và responsive

- Responsive Web Design (RWD) là thuật ngữ ám chỉ cách thiết kế trang webhiển thị tương thích với mọi kích thước thiết bị và là xu hướng mới theo đó quy trìnhthiết kế và phát triển web Tức là bố cục trang web sẽ tự đáp ứng theo hành vi ngườidùng và môi trường hiển thị Môi trường này chính là kích thước của trình duyệt, kíchthước hoặc hướng xoay thiết bị Và thiết bị ở đây đa phần là các thiết bị di động nhưsmartphone hoặc tablet Lấy một ví dụ với trang blog hiện tại thì đây chính là mộtdạng thiết kế Responsive Web Design Các bạn có thể thử thay đổi kích thước trìnhduyệt, xem trên di động, tablet,… mà vẫn đảm bảo giao diện hiển thị tốt

- Bootstrap là front-end framework, là một bộ sưu tập miễn phí các công cụ đểtạo ra các trang web và các ứng dụng web Bootstrap bao gồm HTML và CSS dựa trêncác mẫu thiết kế cho kiểu chữ, hình thức, các button và các thành phần giao diện khác,cũng như mở rộng tùy chọn JavaScript Boostrap định nghĩa sẵn các class CSS giúpngười thiết kế giao diện website tiết kiệm rất nhiều thời gian Các thư viện Bootstrap

có những đoạn mã sẵn sàng cho chúng ta áp dùng vào website của mình mà khôngphải tốn quá nhiều thời gian để tự viết Với Bootstrap, việc phát triển giao diện website

để phù hợp với đa thiết bị trở nên dễ dàng hơn bao giờ hết Bootstrap cung cấp tínhnăng responsive và mobile first, nghĩa là làm cho trang web có thể tự co giãn để tương

thích với mọi thiết bị khác nhau, từ điện thoại di động đến máy tính bảng, máy tínhxách tay, máy tính để bàn,

1.6 Ant Design

Ant.Design, thường được gọi là antd, là một khung thiết kế UI được xây dựngtrên thư viện React.js để phát triển các ứng dụng web và React Nó thuộc sở hữu củacông ty Ant Design của Trung Quốc và được xây dựng theo nguyên tắc Thiết kế Vậtliệu

Antd là một khung hoàn chỉnh, giàu tính năng, không có nhiều phức tạp, cung cấpcho bạn tùy chọn sử dụng trực tiếp với dự án React của bạn Do đó, nó cung cấp mộttập hợp các thành phần React chất lượng cao mà có lẽ bạn chưa từng chú ý đến

Ant.Design được viết bằng TypeScript và hoạt động tốt khi cộng tác với các côngnghệ khác, vì nó cung cấp quy trình phát triển front-end npm, webpack và DVA

Chương 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 2.1 Khảo sát hệ thống

2.1.1 Khảo sát thực tế

Hiện nay, các vấn đề về chen chúc, móc túi khi đi mua vé tại các bến xe hay cácđiểm bán vé truyền thống làm ảnh hưởng ít nhiều đến tâm lý người dân, nhu cầu ramua trực tiếp càng hạn chế lại Một phần những năm gần đây do ảnh ảnh hưởng từCOVID 19 dẫn đến nhu cầu lại chở nên ít đi, và với việc nhu cầu mọi người dân mongmuốn về quê trong những ngày giáp tết hay các ngày nghỉ lễ dài trong năm càng trởnên nhiều hơn nhưng lại chưa tìm được vé do lo sợ các vấn đề còn tồn động ở cácđiểm bán vé xe truyền thông Thấy được hiện trạng như vậy, để phục vụ cho nhu cầuđặt vé xe trở nên dễ dàng và nhanh chóng thì việc thành lập một website quản lý đặt vé

2.2.1 Quản trị viên (Admin)

- Là người quản trị website có quyền cao nhất, nắm tất cả các quyền trongwebsite;

- Có thể thiết lập được quyền của tất cả thành viên sử dụng trang web;

- Có thể quản lý thông tin cá nhân, quản lý các thành viên của hệ thống, quản lý

các loại vé xe, tuyến đường, loại xe, giá vé, hóa đơn

2.2.2 Khách hàng (User)

- Xem, tìm kiếm thông tin vé xe trên trang;

- Đặt vé xe và thanh toán trực tuyến.

2.2.3 Khách vãng lai (Visiter)

- Xem, tìm kiếm thông tin vé xe trên trang

2.3 Phân tích

2.3.1 Yêu cầu chất lượng

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

- Ngôn ngữ tiếng Việt;

Khách hàng

(User)

Là nhóm người đã đăng nhập vào hệ thống được cấp quyềnđặt vé xe ngoài ra còn có các quyền chung nhất như xemthông tin hoặc tìm kiếm thong tin về vé xe

Khách vãng lai

(Visiter)

Là nhóm người chưa đăng ký hoặc đăng nhập trên hệ thốngwebsite, chỉ được phép xem thông tin hoặc tìm kiếm thôngtin về vé xe

Bảng 2 1: Tác nhân của hệ thống

2.4 Biểu đồ Use Case

Hình 2.3 Sơ đồ Usecase

2.4.1 Chức năng Đặt vé

Hình 2.4: Usecase Đặt vé

2.4.2 Quản lý Vé

Hình 2.5: Usecase quản lý Vé

2.4.3 Quản lý Thông tin người dùng

Hình 2.6: Usecase quản lý Thông tin người dùng

2.4.6 Quản lý Xe

Hình 2.9: Usecase thiết lập hệ thống

2.4.7 Quản lý Nhà xe

Hình 2.10: Usecase quản lý Nhà xe

2.4.8 Thống kê

Hình 2.11: Usecase Thống kê

2.5 Sơ đồ hoạt động

2.5.1 Sơ đồ hoạt động đặt vé

Hình 2.12: Sơ đồ hoạt động Đặt vé

2.5.2 Sơ đồ hoạt động Thanh toán

Hình 2.13: Sơ đồ hoạt động Thanh toán