Tí nh cấp thiết của đề tài
Từ cuối năm 2019, đại dịch Covid-19 đã ảnh hưởng nghiêm trọng đến tình hình kinh tế Việt Nam và toàn cầu, đặc biệt là vào năm 2021 khi nhiều doanh nghiệp vừa và nhỏ, cùng các hàng quán ăn uống, phải đóng cửa Người dân lo ngại khi di chuyển bằng xe khách do nguy cơ lây lan dịch bệnh, khiến việc mua vé trực tiếp tại bến xe trở nên khó khăn Để giải quyết vấn đề này, website bán vé xe đã ra đời nhằm giảm thiểu những khó khăn mà đại dịch Covid-19 mang lại cho mọi người.
Mục tiêu nghiên cứu
Kết quả dự kiến đạt được
Xây dựng được trang web bán vé xe giúp cho những người có nhu cầu mua vé nhanh chóng với nhiều nhà xe, tuyến xe để lựa chọn, …
Đặc tả yêu cầu người dùng
Nhóm người dùng chưa đăng nhập
- Xem thông tin vé xe
- Xem thông tin chủ nhà xe
- Xem đánh giá và phản hồi của nhà xe
- Đăng ký tài khoản khách hàng
- Đăng ký tài khoản nhà xe.
Khách hàng
- Sửa đổi thông tin cá nhân
- Xem lịch sử đặt vé.
Chủ nhà xe
- Tạo vé từ danh sách bên ngoài
- Xem thông tin hành khách, tài xế
Admin
- Quản lý chủ nhà xe
Khi nhà xe sử dụng nhiều hệ thống đặt vé bên ngoài, việc quản lý thông tin và ghế đã đặt trở nên quan trọng Chủ nhà xe cần có người quản lý chuyên trách để đảm bảo thông tin vé xe luôn được cập nhật và chính xác Điều này giúp tránh tình trạng nhầm lẫn và nâng cao trải nghiệm khách hàng.
Các công nghệ sử dụng
- Front-End: HTML, CSS, Javascript (ReactJS)
CƠ SỞ LÝ THUYẾT
ReactJs
React là thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng (UI)
Công cụ này, được phát triển bởi Facebook và ra mắt như một thư viện JavaScript mã nguồn mở vào năm 2013, mang lại tốc độ phản hồi tuyệt vời khi người dùng nhập liệu nhờ vào phương pháp mới trong việc render trang web.
- Có thể sử dụng ReactJS để viết ứng dụng trực tiếp bằng JavaScript
- Biến các thành phần UI phức tạp trở thành những component độc lập
- Chuyển các dữ liệu đã được tùy biến đến một UI component cụ thể
- Giúp bạn có thể thay đổi trạng thái cho nhiều component con và không gây ảnh hưởng đến component gốc dù đang ở trong đang ở trạng thái Stateful
- Khả năng xác định chính xác khi nào cần render lại cũng như khi nào bỏ đi phần tử DOM
1.2 Các khái niệm liên quan:
- JavaScript: Javascript là ngôn ngữ được sử dụng để phát triển React Để sử dụng
ReactJS một cách hiệu quả, người dùng/ lập trình viên ít nhất phải hiểu về các khái niệm như: object, prototype và callback
Redux là một phần quan trọng trong ReactJS, vì ReactJS không có các module chuyên dụng để xử lý dữ liệu Điều này dẫn đến việc ReactJS hoạt động độc lập, chia nhỏ View thành các component nhỏ hơn, giúp quản lý dễ dàng và tăng cường sự liên kết giữa các thành phần.
Virtual DOM là một định dạng dữ liệu nhẹ trong JavaScript, được sử dụng để thể hiện nội dung của DOM (Document Object Model) tại một thời điểm cụ thể.
ReactJS là một framework sử dụng Virtual-DOM, cho phép thiết lập mô hình Model-View trong kiến trúc MVC Khi bạn thay đổi View trong DOM, Model cũng sẽ được cập nhật tương ứng và ngược lại.
- Component: ReactJS được xây dựng xoay quanh các component, trong khi đó, các
Framework khác dùng template Để tạo ra một component có đầy đủ những đặc tính,
4 bạn chỉ cần sử dụng phương thức createClass dùng để nhận một tham số mô tả đặc tính.
ExpressJs
ExpressJS là một framework ứng dụng web mã nguồn mở miễn phí, được phát triển trên nền tảng Node.js, giúp thiết kế và phát triển ứng dụng web nhanh chóng Người dùng chỉ cần kiến thức về JavaScript để hiểu và sử dụng ExpressJS, làm cho việc xây dựng ứng dụng web và API trở nên dễ dàng hơn cho lập trình viên đã quen thuộc với ngôn ngữ này.
ExpressJS là công cụ hữu ích để tổ chức kiến trúc back-end, giúp các nhà phát triển web triển khai mô hình MVC Việc áp dụng ExpressJS cho phép tạo ra một codebase back-end dễ bảo trì và quản lý hơn.
ExpressJS giúp phát triển máy chủ nhanh chóng nhờ vào việc cung cấp nhiều tính năng phổ biến của Node.js dưới dạng hàm dễ sử dụng Điều này không chỉ rút ngắn thời gian viết code mà còn nâng cao hiệu quả lập trình.
Phần mềm trung gian trong ExpressJS là một thành phần quan trọng, cho phép truy cập vào cơ sở dữ liệu và xử lý yêu cầu từ khách hàng cũng như các phần mềm trung gian khác Nó đóng vai trò tổ chức các chức năng khác nhau, đảm bảo quy trình hoạt động hiệu quả và linh hoạt.
- Định tuyến: ExpressJS cung cấp một cơ chế định tuyến nâng cao giúp duy trì trạng thái của trang web
ExpressJS cung cấp công cụ tạo khuôn mẫu, giúp các nhà phát triển tạo nội dung động cho trang web bằng cách xây dựng các mẫu HTML trên máy chủ.
Gỡ lỗi là một yếu tố quan trọng trong phát triển ứng dụng web, và ExpressJS hỗ trợ quá trình này bằng cách cung cấp cơ chế xác định chính xác vị trí có lỗi trong ứng dụng.
- Rất dễ học, chỉ cần bạn biết JavaScript, bạn sẽ không cần phải học một ngôn ngữ mới để học ExpressJS
- Giúp cho việc phát triển back-end dễ dàng hơn nhiều khi sử dụng ExpressJS
- Mã JavaScript được diễn giải thông qua Google V8 JavaScript Engine của Node.js
Do đó, mã sẽ được thực hiện một cách nhanh chóng và dễ dàng
- ExpressJS rất đơn giản để tùy chỉnh và sử dụng theo nhu cầu
- Cung cấp một module phần mềm trung gian linh hoạt và rất hữu ích để thực hiện các tác vụ bổ sung theo phản hồi và yêu cầu
- Hỗ trợ phát triển ứng dụng theo mô hình MVC, đây là mô hình phổ biến cho việc lập trình web hiện nay.
NodeJs
NodeJS là một nền tảng mã nguồn mở dựa trên Javascript V8 Engine, được phát triển từ năm 2009 và được bảo trợ bởi công ty Joyent tại California, Hoa Kỳ Nó được sử dụng phổ biến để xây dựng các ứng dụng web như trang video clip, diễn đàn và đặc biệt là mạng xã hội quy mô nhỏ, thu hút hàng ngàn lập trình viên trên toàn thế giới.
NodeJS hỗ trợ nhiều hệ điều hành như Windows, Linux và OS X, mang lại sự linh hoạt cho lập trình viên Với các thư viện phong phú dưới dạng Javascript Module, NodeJS giúp đơn giản hóa quy trình lập trình và tối ưu hóa thời gian phát triển.
NodeJS hoạt động theo nguyên tắc không đồng bộ (non-blocking), cho phép tất cả các API của nó chờ đợi dữ liệu từ máy chủ mà không làm gián đoạn quá trình xử lý Nhờ vào cơ chế thông báo sự kiện, Node.js có khả năng chuyển tiếp đến các API tiếp theo ngay sau khi gọi, giúp máy chủ nhận phản hồi nhanh chóng từ các cuộc gọi API trước đó, tạo ra trải nghiệm thời gian thực (Realtime) hiệu quả.
- Chạy rất nhanh: 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
Node.js sở hữu mô hình đơn luồng với khả năng mở rộng cao, sử dụng cơ chế tổ chức sự kiện để cho phép máy chủ phản hồi không ngăn chặn Điều này làm cho Node.js trở thành một lựa chọn vượt trội so với các máy chủ truyền thống, như Apache HTTP Server, khi xử lý một lượng lớn yêu cầu đồng thời Với chương trình đơn luồng, Node.js có thể phục vụ nhiều kết nối hơn, mang lại hiệu suất tối ưu cho các ứng dụng web hiện đại.
- Không đệm: NodeJS không đệm bất kì một dữ liệu nào và các ứng dụng này chủ yếu là đầu ra dữ liệu
- Có giấy phép: NodeJS đã được cấp giấy phép bởi MIT License
3.2 Hoạt động: Ý tưởng chính của Node js là sử dụng non-blocking, hướng sự vào ra dữ liệu thông qua các tác vụ thời gian thực một cách nhanh chóng Bởi vì, Node js có khả năng mở rộng nhanh chóng, khả năng xử lý một số lượng lớn các kết nối đồng thời bằng thông lượng cao Nếu như các ứng dụng web truyền thống, các request tạo ra một luồng xử lý yêu cầu mới và chiếm RAM của hệ thống thì việc tài nguyên của hệ thống sẽ được sử dụng không hiệu quả Chính vì lẽ đó giải pháp mà Node js đưa ra là sử dụng luồng đơn (Single-Threaded), kết hợp với non-blocking I/O để thực thi các request, cho phép hỗ trợ hàng chục ngàn kết nối đồng thời
Với cơ chế xử lý bất đồng bộ (non-blocking), hệ thống có khả năng xử lý nhanh chóng, cho phép quản lý hàng ngàn kết nối trong thời gian ngắn nhất.
- Giúp bạn dễ dàng mở rộng khi có nhu cầu phát triển website
Node.js cho phép nhận và xử lý nhiều kết nối chỉ với một luồng đơn, giúp tiết kiệm RAM và tăng tốc độ xử lý hệ thống một cách đáng kể.
- Có khả năng xử lý nhiều Request/s cùng một lúc trong thời gian ngắn nhất
- Có khả năng xử lý hàng ngàn Process cho hiệu suất đạt mức tối ưu nhất
- Phù hợp để xây dựng những ứng dụng thời gian thực như các ứng dụng chat, mạng xã hội, …
NodeJS có thể gây hao tốn tài nguyên và thời gian do được viết bằng C++ và JavaScript, yêu cầu một quá trình biên dịch khi xử lý Nếu bạn đang phát triển các ứng dụng tiêu tốn nhiều CPU, nên cân nhắc không sử dụng NodeJS.
Node.js không có sự chênh lệch đáng kể so với các ngôn ngữ lập trình khác như PHP, Ruby và Python Nó phù hợp cho việc phát triển ứng dụng mới, nhưng khi xây dựng và triển khai các dự án quan trọng, Node.js có thể không phải là sự lựa chọn tối ưu nhất.
MySQL
Hệ quản trị cơ sở dữ liệu MySQL là chương trình quản lý hệ thống cơ sở dữ liệu, cho phép lưu trữ thông tin một cách rõ ràng và ngăn nắp MySQL giúp truy cập dữ liệu nhanh chóng và thuận lợi, đồng thời hỗ trợ hầu hết các ngôn ngữ lập trình Đây là hệ quản trị cơ sở dữ liệu mã nguồn mở phổ biến nhất trên thế giới và được các nhà phát triển ưa chuộng trong quá trình phát triển ứng dụng.
MySQL là một cơ sở dữ liệu nhanh chóng và ổn định, tương thích với nhiều hệ điều hành Hệ thống này cung cấp một loạt các hàm tiện ích mạnh mẽ và hoàn toàn miễn phí, cho phép người dùng tải về dễ dàng từ trang chủ Ngoài ra, MySQL còn có nhiều phiên bản phù hợp với các hệ điều hành khác nhau.
- Hệ quản trị cơ sở dữ liệu MySQL chính là một trong những phần mềm quản trị CSDL dạng server based, hệ gần giống với SQL server of Microsoft
- MySQL là phần mềm quản lý dữ liệu thông qua CSDL Và mỗi một CSDL đều có bảng quan hệ chứa dữ liệu riêng biệt
MySQL cung cấp cơ chế quản lý người dùng riêng biệt, cho phép nhiều người sử dụng quản lý cùng lúc nhiều cơ sở dữ liệu Mỗi người dùng được cấp một tên đăng nhập và mật khẩu để truy cập và truy xuất dữ liệu từ cơ sở dữ liệu Khi thực hiện truy vấn, bạn cần cung cấp tài khoản và mật khẩu có quyền truy cập vào cơ sở dữ liệu tương ứng.
MySQL tương thích tốt với môi trường PHP, giúp hệ thống hoạt động hiệu quả Bạn có thể dễ dàng viết hoặc chỉnh sửa mã MySQL thông qua các IDE dành cho PHP Để tìm hiểu thêm về những công cụ hỗ trợ, bạn có thể tham khảo tại http://free-php-editor.com/.
- Hiệu năng sử dụng cao
- MySQL hỗ trợ giao dịch mạnh mẽ
- Hỗ trợ ngôn ngữ truy vấn
- Tính kết nối và bảo mật cao
- Mã nguồn mở tự do và hỗ trợ 24/7
- Chi phí sở hữu thấp nhất
Firebase
Firebase là nền tảng phát triển ứng dụng di động và web, cung cấp cho các nhà phát triển nhiều công cụ và dịch vụ hữu ích Nền tảng này hỗ trợ việc tạo ra các ứng dụng chất lượng cao, mở rộng cơ sở người dùng và gia tăng doanh thu hiệu quả.
5.1 Phát triển và thử nghiệm ứng dụng của bạn:
5.2 Phát triển và thu hút user của bạn:
PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Lược đồ usecase
Hình 1.Lược đồ usecase tổng quát
Đặc tả usecase – scennario
Name Tìm kiếm chuyến xe
Users can log into the system to access various features such as viewing routes, cars, and ticket history The platform allows users to manage their accounts, update information, and change passwords Admins have the ability to manage users, view user lists, change statuses, and create or edit cars and routes Additionally, users can view feedback on cars and services, search for tickets, and manage business listings, including changing business statuses and viewing related information Overall, the system provides a comprehensive management tool for users and admins alike, enhancing the booking and ticketing experience.
Actor(s) Người dùng, chủ nhà xe
Pre-conditions Người dùng đã được tạo tài khoản trong hệ thống
Post-conditions Hiển thị ra kết quả tìm kiếm
Usecase bắt đầu khi người dùng cần thực hiện chức năng tìm kiếm chuyến xe:
1 Hệ thống hiển thị form cho người dùng nhập thông tin
2 Người dùng nhập địa điểm xuất phát, địa điểm đến, ngày đi
3 Hệ thống nhận yêu cầu tìm kiếm địa điểm xuất phát, địa điểm đến, ngày đi
4 Hệ thống hiển thị danh sách kết quả phù hợp với dữ liệu đã nhập
Bảng 1 Usecase Tìm kiếm chuyến xe
2.2 Tìm kiếm tất cả xe:
Name Tìm kiếm tất cả xe
Brief description Người dùng đăng nhập vào hệ thống
Actor(s) Người dùng, chủ nhà xe
Pre-conditions Người dùng đã được tạo tài khoản trong hệ thống
Post-conditions Hiển thị ra kết quả tìm kiếm
Usecase bắt đầu khi người dùng cần thực hiện chức năng tìm kiếm tất cả xe:
1 Hệ thống hiển thị nút Nhà xe cho người dùng chọn
2 Người dùng nhấn nút Nhà xe trên thanh Navbar
3 Hệ thống nhận yêu cầu xem Nhà xe
4 Hệ thống hiển thị danh sách kết quả Nhà xe
Bảng 2 Usecase Tìm kiếm tất cả xe
Người dùng, guest liên hệ với admin
Nếu việc tạo thành công, hệ thống sẽ thông báo cho người dùng biết rằng quá trình đã diễn ra thành công Ngược lại, nếu việc tạo không thành công, hệ thống sẽ thông báo rằng việc thực thi không chính xác và yêu cầu người dùng thực hiện lại.
Use case bắt đầu khi người dùng chọn Liên hệ
1 Hệ thống hiển thị màn hình để người dùng thực thi
2 Người dùng nhập các thông tin cần thiết có trong form
3 Người dùng chọn nút Gửi
4 Hệ thống hiển thị thông báo tạo thành công
Nếu người dùng nhập sai hoặc bỏ sót 1 trong các trường, những công việc sau được thực hiện:
1 Hệ thống mô tả lỗi từ người dùng
2 Hệ thống lưu ý người dùng tra nhập lại
3 Khi người dùng nhập lại thời gian, bước 3 ở Basic flow được thực hiện
Người dùng tạo tài khoản để sử dụng hệ thống
Actor(s) Người dùng, chủ nhà xe
Pre-conditions Tài khoản người dùng không tồn tại trong hệ thống
Post-conditions Nếu đăng kí thành công: Người dùng được xác thực và chuyển sang giao diện đăng nhập
Nếu đăng nhập không thành công: Người dùng không tạo được tài khoản
Basic flow Usecase bắt đầu khi người dùng cần thực hiện chức năng đăng kí
(Thành công) 1 Hệ thống hiển thị cửa sổ cho người dùng nhập thông tin cá nhân
2 Người dùng nhập username, password, họ tên, ngày tháng năm sinh, địa chỉ, số điện thoại, email
3 Hệ thống xác thực username và password
4 Hệ thống xác định vai trò của người dùng
5 Hệ thống mở màn hình đăng nhập
Nếu người dùng nhập usename đã tồn tại trong hệ thống hoặc bỏ trống 1 trong các trường Những công việc sau được thực hiện:
1 Hệ thống mô tả lý do xác thực bị sai
2 Hệ thống lưu ý người dùng đăng kí lại
3 Khi người dùng nhập lại thông tin, bước 3 ở Basic flow được thực hiện
Brief description Người dùng đăng nhập vào hệ thống
Actor(s) Người dùng, quản trị viên, chủ nhà xe
Pre-conditions Người dùng đã được tạo tài khoản trong hệ thống
Post-conditions Nếu đăng nhập thành công: Người dùng được xác thực và hệ thống hiển thị nội dung trang chủ
Nếu đăng nhập không thành công: Người dùng không truy cập được và hệ thống
Usecase bắt đầu khi người dùng cần thực hiện chức năng nào đó của hệ thống cần thực quyền truy cập
1 Hệ thống hiển thị cửa sổ cho người dùng nhập username và password
2 Người dùng nhập username và password
3 Hệ thống xác thực username và password
4 Hệ thống xác định vai trò của người dùng
5 Hệ thống mở màn hình trang chủ và mở các chức năng được phép truy cập của người dùng
Nếu người dùng nhập sai username hay/và password Những công việc sau được thực hiện:
1 Hệ thống mô tả lý do xác thực bị sai
2 Hệ thống lưu ý người dùng đăng nhập lại
3 Khi người dùng nhập lại username và password, bước 3 ở Basic flow được thực hiện
Brief description Người dùng muốn tìm lại mật khẩu của tài khoản
Actor(s) Người dùng, chủ nhà xe
Post-conditions Nếu thành công: Người dùng được xác thực và hệ thống sẽ gửi mật khẩu về email
Usecase bắt đầu khi người dùng cần thực hiện chức năng nào đó của hệ thống cần thực quyền truy cập
1 Hệ thống hiển thị form nhập email
3 Hệ thống xác thực email
4 Hệ thống xác định vai trò của người dùng
Nếu người dùng nhập sai username hay/và password Những công việc sau được thực hiện:
1 Hệ thống mô tả lý do xác thực bị sai
2 Hệ thống lưu ý người dùng đăng nhập lại
3 Khi người dùng nhập lại username và password, bước 3 ở Basic flow được thực hiện
Bảng 6 Usecase Quên mật khẩu
2.7 Xem thông tin cá nhân:
Name Xem thông tin cá nhân
Người dùng muốn xem thông tin cá nhân của tài khoản
Actor(s) Người dùng, chủ nhà xe
Pre-conditions Tài khoản đã được tạo trong hệ thống
Post-conditions Hệ thống chuyển sang trang cá nhân và hiển thị thông tin cá nhân của người dùng, chủ nhà xe
Use case bắt đầu khi người dùng chọn chức năng xem thông tin
1 Hệ thống hiển thị nút để người dùng chọn
2 Hệ thống xác thực yêu cầu và lấy dữ liệu
3 Hệ thống chuyển sang trang thông tin cá nhân
4 Hệ thống hiển thị thông tin cá nhân
Bảng 7 Usecase Xem thông tin cá nhân
2.8 Cập nhập thông tin cá nhân:
Name Chỉnh sửa thông tin tài khoản
Người dùng muốn chỉnh sửa thông tin cá nhân của tài khoản
Actor(s) Người dùng, chủ nhà xe
Pre-conditions Tài khoản đã được tạo trong hệ thống
Post-conditions Nếu chỉnh sửa thành công: Hệ thống lưu thông tin xuống database và thông báo đã cập nhật thành công
Nếu tra cứu không thành công: Hệ thống thông báo cho người dùng việc thực thi thất bại
Use case bắt đầu khi người dùng chọn chức năng chỉnh sửa thông tin
1 Hệ thống hiển thị màn hình để người dùng nhập thông tin cần chỉnh sửa
2 Hệ thống xác thực thông tin và lưu về database
3 Hệ thống thông báo chỉnh sửa thành công
Nếu người dùng nhập sai hoặc bỏ trống 1 trong các trường, những công việc sau được thực hiện:
1 Hệ thống mô tả lỗi mà người dùng nhập sai hoặc bỏ trống tin
2 Hệ thống lưu ý người dùng nhập lại
3 Khi người dùng nhập lại thời gian, bước 3 ở Basic flow được thực hiện
Bảng 8 Usecase Cập nhật thông tin cá nhân
Người dùng đánh giá về chất lượng của nhà xe
Pre-conditions Tài khoản đã được đăng nhập vào hệ thống
Post-conditions Nếu tạo thành công: Hệ thống thông báo thành công
Use case bắt đầu khi người dùng chọn đánh giá
1 Hệ thống hiển thị màn hình để người dùng thực thi
2 Người dùng nhập bình luật vào form
3 Người dùng đánh giá bằng cách chọn số sao mong muốn
4 Người dùng chọn nút Đánh giá
6 Hệ thống hiển thị thông báo tạo thành công
Bảng 9 Usecase đánh giá xe
Người dùng muốn cập nhật mật khẩu cho tài khoản
Actor(s) Người dùng, chủ nhà xe
Pre-conditions Tài khoản đã được tạo trong hệ thống
Post-conditions Nếu thay đổi thành công: Hệ thống thông báo thành công
Nếu thay đổi không thành công: Hệ thống thông báo cho người dùng việc thực thi không chính xác và yêu cầu thực hiện lại
Use case bắt đầu khi người dùng chọn chức năng đổi mật khẩu
1 Hệ thống hiển thị màn hình để người dùng thay đổi mật khẩu
2 Người dùng nhập mật khẩu cũ và mật khẩu mới
3 Hệ thống xác thực mật khẩu cũ
4 Hệ thống hiển thị thông báo thay đổi thành công
Nếu người dùng nhập sai mật khẩu cũ hoặc bỏ sót 1 trong các trường, những công việc sau được thực hiện:
4 Hệ thống mô tả lỗi từ người dùng
5 Hệ thống lưu ý người dùng tra nhập lại
6 Khi người dùng nhập lại thời gian, bước 3 ở Basic flow được thực hiện
Bảng 10 Usecase Thay đổi mật khẩu
Name Xem lịch sử vé
Brief description Người dùng đăng nhập vào hệ thống
Actor(s) Người dùng, chủ nhà xe
Pre-conditions Người dùng đã được tạo tài khoản trong hệ thống
Post-conditions Hiển thị ra kết quả tìm kiếm
Usecase bắt đầu khi người dùng cần thực hiện chức năng xem lịch sử vé:
1 Hệ thống hiển thị nút Lịch sử vé cho người dùng chọn
2 Người dùng nhấn nút Lịch sử vé trên thanh Navbar
3 Hệ thống nhận yêu cầu xem Lịch sử vé
4 Hệ thống hiển thị danh sách kết quả Lịch sử vé
Bảng 11 Usecase Xem lịch sử vé
Chủ nhà xe đăng ký vé, người dùng mua vé
Actor(s) Người dùng, chủ nhà xe
Pre-conditions Tài khoản đã được tạo trong hệ thống
Post-conditions Nếu thành công: Hệ thống thông báo thành công và hiển thị trong trang thanh toán và tiếp tục thanh toán
Nếu không thành công: Hệ thống thông báo cho người dùng việc thực thi không chính xác và chuyển sang thất bại
Use case bắt đầu khi người dùng chọn chức năng tạo xe
1 Hệ thống hiển thị màn hình để người dùng đặt vé
2 Người dùng chọn vị trí ghế và tiến hành nhập thông tin cá nhân
3 Hệ thống xác thực vé xe có tồn tại hay không
4 Hệ thống điều hướng sang trang thanh toán
5 Người dùng thanh toán bằng tài khoản paypal
6 Chuyển sang trang thành công
Nếu người dùng nhập sai hoặc bỏ sót 1 trong các trường, những công việc sau được thực hiện:
1 Hệ thống mô tả lỗi từ người dùng
2 Hệ thống lưu ý người dùng tra nhập lại
3 Khi người dùng nhập lại, bước 3 ở Basic flow được thực hiện
Chủ nhà xe tạo thêm xe
Pre-conditions Tài khoản đã được tạo trong hệ thống
Post-conditions Nếu tạo thành công: Hệ thống thông báo thành công và hiển thị trong quản lý xe
Nếu tạo không thành công: Hệ thống thông báo cho người dùng việc thực thi không chính xác và yêu cầu thực hiện lại
Use case bắt đầu khi người dùng chọn chức năng tạo xe
1 Hệ thống hiển thị màn hình để chủ nhà xe thực thi
2 Chủ nhà xe nhập các thông tin cần thiết của xe: tên xe, biển số, số chỗ,
3 Hệ thống xác thực xe có tồn tại hay không
4 Hệ thống hiển thị thông báo tạo thành công
Nếu người dùng nhập sai hoặc bỏ sót 1 trong các trường, những công việc sau được thực hiện:
1 Hệ thống mô tả lỗi từ người dùng
2 Hệ thống lưu ý người dùng tra nhập lại
3 Khi người dùng nhập lại, bước 3 ở Basic flow được thực hiện
Name Xem danh sách xe
Chủ nhà xe muốn quản lý, xem danh sách xe hiện có
Pre-conditions Tài khoản đang được đăng nhập trên hệ thống
Post-conditions Danh sách xe
Use case bắt đầu khi người dùng thực hiện chức năng xem dánh sách xe
1 Hệ thống hiển thị nút Quản lý xe
2 Chủ nhà xe chọn nút Quản lý xe
3 Hệ thống chuyển sang màn hình quản lý xe và hiển thị danh sách tất cả xe đang có
Bảng 14 Usecase Xem danh sách xe
2.15 Thay đổi thông tin xe:
Name Thay đổi thông tin xe
Chủ nhà xe muốn chỉnh sửa thông tin cá nhân của tài khoản
Pre-conditions Tài khoản đã được tạo trong hệ thống
Post-conditions Nếu chỉnh sửa thành công: Hệ thống lưu thông tin xuống database và thông báo đã cập nhật thành công
Nếu tra cứu không thành công: Hệ thống thông báo cho chủ nhà xe việc thực thi thất bại
Use case bắt đầu khi chủ nhà xe chọn chức năng chỉnh sửa thông tin xe
1 Hệ thống hiển thị màn hình để chủ nhà xe nhập thông tin cần chỉnh sửa
2 Chủ nhà xe nhập thông tin cần chỉnh sửa
3 Hệ thống xác thực thông tin
4 Hệ thống lưu về database
5 Hệ thống thông báo chỉnh sửa thành công
Nếu người dùng nhập sai hoặc bỏ trống 1 trong các trường, những công việc sau được thực hiện:
1 Hệ thống mô tả lỗi mà người dùng nhập sai hoặc bỏ trống tin
2 Hệ thống lưu ý người dùng nhập lại
3 Khi người dùng nhập lại thời gian, bước 3 ở Basic flow được thực hiện
Bảng 15 Usecase Thay đổi thông tin xe
Chủ nhà xe tạo thêm chuyến
Pre-conditions Tài khoản đã được tạo trong hệ thống
Post-conditions Nếu tạo thành công: Hệ thống thông báo thành công và hiển thị trong quản lý chuyến
Nếu tạo không thành công: Hệ thống thông báo cho người dùng việc thực thi không chính xác và yêu cầu thực hiện lại
Use case bắt đầu khi người dùng chọn chức năng tạo xe
1 Hệ thống hiển thị màn hình để chủ nhà xe thực thi
2 Chủ nhà xe nhập các thông tin cần thiết của chuyến: nơi đi, nơi đến, thời gian đi, thời gian đến, giá vé, lộ trình
3 Hệ thống xác thực chuyến có tồn tại hay không
4 Hệ thống hiển thị thông báo tạo thành công
Nếu người dùng nhập sai hoặc bỏ sót 1 trong các trường, những công việc sau được thực hiện:
1 Hệ thống mô tả lỗi từ người dùng
2 Hệ thống lưu ý người dùng tra nhập lại
3 Khi người dùng nhập lại thời gian, bước 3 ở Basic flow được thực hiện
Name Xem danh sách chuyến
Chủ nhà xe xem danh sách tất cả chuyến xe đang có
Pre-conditions Tài khoản đang được đăng nhập trên hệ thống
Post-conditions Danh sách tất cả chuyến xe
Use case bắt đầu khi người dùng thực hiện chức năng xem danh sách tất cả chuyến xe
1 Hệ thống hiển thị nút Quản lý chuyến xe
2 Chủ nhà xe chọn nút Quản lý chuyến xe
3 Hệ thống chuyển sang màn hình quản lý chuyến xe và hiển thị danh sách tất cả chuyến xe đang có
Bảng 17 Usecase Xem danh sách chuyến
2.18 Hiển thị danh sách vé đã bán:
Name Hiển thị danh sách vé đã bán
Chủ nhà xe xem danh sách tất cả vé xe đã bán
Pre-conditions Tài khoản đang được đăng nhập trên hệ thống
Post-conditions Danh sách tất cả vé xe đã bán
Use case bắt đầu khi người dùng thực hiện chức năng xem danh sách tất cả vé xe đã bán
1 Hệ thống hiển thị nút Quản lý vé xe
2 Chủ nhà xe chọn nút Quản lý vé xe
3 Hệ thống chuyển sang màn hình quản lý vé xe và hiển thị danh sách tất cả vé xe đã bán
Bảng 18 Usecase Hiển thị danh sách vé đã bán
Name Hiển thị danh sách vé đã bán
Chủ nhà xe xem danh sách tất cả vé xe đã bán
Pre-conditions Tài khoản đang được đăng nhập trên hệ thống
Post-conditions Danh sách tất cả vé xe đã bán
Use case bắt đầu khi người dùng thực hiện chức năng xem danh sách tất cả vé xe đã bán
1 Hệ thống hiển thị nút Quản lý vé xe
2 Chủ nhà xe chọn nút Quản lý vé xe
3 Hệ thống chuyển sang màn hình quản lý vé xe và hiển thị danh sách tất cả vé xe đã bán
Bảng 19 Usecase Xem đánh giá xe
2.20 Xem danh sách người dùng:
Name Xem danh sách người dùng
Admin xem danh sách tất cả người dùng đang có
Pre-conditions Tài khoản đang được đăng nhập trên hệ thống
Post-conditions Danh sách tất cả người dùng
Use case bắt đầu khi người dùng thực hiện chức năng xem danh sách tất cả người dùng
1 Hệ thống hiển thị nút Quản lý người dùng
2 Admin chọn nút Quản lý người dùng
3 Hệ thống chuyển sang màn hình quản lý người dùng và hiển thị danh sách tất cả người dùng đang có
Bảng 20 Usecase Xem danh sách người dùng
2.21 Thay đổi trạng thái người dùng:
Name Thay đổi trạng thái người dùng
Admin muốn thay đổi trạng thái cho người dùng có được hoạt động hay không
Pre-conditions Tài khoản đã được tạo trong hệ thống
Post-conditions Nếu chỉnh sửa thành công: Hệ thống lưu thông tin xuống database và thông báo đã cập nhật thành công
Use case bắt đầu khi người dùng chọn chức năng thay đổi trạng thái người dùng
1 Hệ thống hiển thị màn hình để admin thay đổi trạng thái
2 Admin chọn nút lock hay unlock để thay đổi
3 Hệ thống xác thực thông tin và lưu về database
4 Hệ thống thông báo chỉnh sửa thành công
Bảng 21 Usecase Thay đổi trạng thái người dùng
2.22 Xem thông tin người dùng:
Name Xem thông tin cá nhân người dùng
Admin muốn xem thông tin cá nhân của người dùng
Pre-conditions Tài khoản đã được tạo trong hệ thống
Post-conditions Hệ thống chuyển sang trang thông tin cá nhân của người dùng
Use case bắt đầu khi admin chọn chức năng xem thông tin cá nhân của người dùng
1 Hệ thống hiển thị nút xem chi tiết để admin chọn
2 Hệ thống xác thực yêu cầu và lấy dữ liệu
3 Hệ thống chuyển sang trang thông tin cá nhân người dùng
4 Hệ thống hiển thị thông tin cá nhân người dùng
Bảng 22 Usecase Xem thông tin người dùng
2.23 Xem danh sách chủ nhà xe:
Name Xem danh sách chủ nhà xe
Admin xem danh sách tất cả chủ nhà xe đang có
Pre-conditions Tài khoản đang được đăng nhập trên hệ thống
Post-conditions Danh sách tất cả chủ nhà xe
Use case bắt đầu khi người dùng thực hiện chức năng xem danh sách tất cả chủ nhà xe
1 Hệ thống hiển thị nút Quản lý chủ nhà xe
2 Admin chọn nút Quản lý chủ nhà xe
3 Hệ thống chuyển sang màn hình quản lý chủ nhà xe và hiển thị danh sách tất cả chủ nhà xe đang có
Bảng 23 Usecase Xem danh sách chủ nhà xe
2.24 Thay đổi trạng thái chủ nhà xe:
Name Thay đổi trạng thái chủ nhà xe
Admin muốn thay đổi trạng thái cho chủ nhà xe có được hoạt động hay không
Pre-conditions Tài khoản đã được tạo trong hệ thống
Post-conditions Nếu chỉnh sửa thành công: Hệ thống lưu thông tin xuống database và thông báo đã cập nhật thành công
Use case bắt đầu khi người dùng chọn chức năng thay đổi trạng thái chủ nhà xe
5 Hệ thống hiển thị màn hình để admin thay đổi trạng thái
6 Admin chọn nút lock hay unlock để thay đổi
7 Hệ thống xác thực thông tin và lưu về database
8 Hệ thống thông báo chỉnh sửa thành công
Bảng 24 Usecase Thay đổi trạng thái chủ nhà xe
2.25 Xem thông tin chủ nhà xe:
Name Xem thông tin cá nhân chủ nhà xe
Admin muốn xem thông tin cá nhân của chủ nhà xe
Pre-conditions Tài khoản đã được tạo trong hệ thống
Post-conditions Hệ thống chuyển sang trang thông tin cá nhân của chủ nhà xe
Use case bắt đầu khi admin chọn chức năng xem thông tin cá nhân của chủ nhà xe
1 Hệ thống hiển thị nút xem chi tiết để admin chọn
2 Hệ thống xác thực yêu cầu và lấy dữ liệu
3 Hệ thống chuyển sang trang thông tin cá nhân chủ nhà xe
4 Hệ thống hiển thị thông tin cá nhân chủ nhà xe
Bảng 25 Usecase Xem thông tin chủ nhà xe
Lược đồ tuần tự (Sequence diagram)
3.1 Tìm kiếm tất cả chuyến:
Hình 2.Tìm kiếm tất cả chuyến
3.2 Tìm kiếm tất cả xe: sd show routes user home page application routes page routes controller alt result click button routes() send requirement() get routes() return routes() navigate to page routes() show list routes() sd show cars user home page application cars page cars controller alt result click button cars() send requirement() get cars() return cars() show list cars() show list cars()
Hình 3.Tìm kiếm tất cả xe
3.4 Đăng ký: sd contact user form contact contact controller contact database alt result enter information() send data() create new contact() save in database() return message() notify successful message() notify success() sd signin guest signin form Auth account alt result
Enter account information() send data() check data()
Create a new account() return message() return success message() notify success() return fail message() notify fail()
3.6 Quên mật khẩu: sd login user login form Auth Home account alt result
To access your account, enter your username and password, then submit the data for verification The system will check the information and return your account details if successful, along with a notification message confirming the login If the login fails, you will receive an error message prompting you to try again After a successful login, you will be directed to the home page, while unsuccessful attempts will require you to log in once more.
3.7 Xem thông tin cá nhân:
Hình 8 Xem thông tin cá nhân
3.8 Cập nhật thông tin cá nhân: sd forget passw ord user form forget password
The process begins by entering an email address, followed by sending and checking the email for correctness If the email is valid, it proceeds to send a confirmation; otherwise, it notifies the user of the failure The account information is displayed on the user’s homepage through the account controller Users can click a button in the navigation bar to request and retrieve their data, which is then shown on the designated information page.
Hình 9 Cập nhật thông tin cá nhân
3.9 Thay đổi mật khẩu: sd update personal information user form change information
Auth new password account alt result
The process involves entering information, sending data, and checking the data for accuracy Once verified, the system updates the new information and notifies the user of success or failure Additionally, users can change their password through the designated form, ensuring secure access to their accounts.
Auth new password account alt result
[ fail ] enter current and new password() send data() check data() return data() update new password() notify success() notify success() return message() notify fail() notify fail()
Hình 10 Thay đổi mật khẩu
Hình 12 Xem lịch sử vé sd feedback user form feedback feedback controller feedback feedback page database alt result
To enhance user experience, the application allows users to enter feedback and rate their experience, which is then sent to the database for storage If the feedback submission fails, a notification is displayed, guiding users back to the feedback page Additionally, users can view their ticket history by clicking the "Show Ticket History" button, which retrieves and displays a comprehensive list of their past tickets.
3.13 Tạo xe: sd book ticket user booking page booking controller payment page success page fail page tickets alt result
The process begins with selecting a seat and entering the necessary information, followed by sending the data for verification Once the data is checked, a message is returned to confirm the status If successful, the user is navigated to the payment page, and a success notification is issued Conversely, if the process fails at any stage, a failure notification is provided Additionally, the system allows for the creation of a new car through the car business form and the car controller, ultimately yielding the final results.
[ fail ] enter car information() send data() create a new car() return success message() notify success message() notify success message() return fail message() notify fail message() notify fail message()
Hình 15 Xem danh sách xe
3.15 Thay đổi thông tin xe: sd show list cars business business page car controller cars alt result click button show() send requirement() get data() return list cars() show list cars() show list cars() sd edit car business form edit car car controller car cars alt result
[ fail ] enter new information car() send data() check data() return data() update car information() notify successful message() notify successful car() return fail message() notify fail message() notify fail message()
Hình 16 Thay đổi thông tin xe
3.17 Xem danh sách chuyến: sd create route business form create a new route routes routes controller route alt result
[ fail ] enter information route() send data() check data() return message() create a new route() notify successful message() notify successful message() return fail message() notify fail message() notify fail message()
Hình 18 Xem danh sách chuyến
3.18 Hiển thị danh sách vé đã bán:
Hình 19 Hiển thị danh sách vé đã bán
3.19 Xem đánh giá xe: sd show list routes business business page routes controller routes alt result click button in sidebar() send requirement() get routes() return routes() show list routes() show list route() sd show ticket history business feedback page feedback controller ticket history page feedback alt result click show ticket history button() send requirement() get list tickets() return tickets history() show list tickets() show tickets history()
Hình 20 Xem đánh giá xe
3.20 Xem danh sách người dùng:
Hình 21 Xem danh sách người dùng
3.21 Thay đổi trạng thái người dùng: sd show feedback business feedback page feedback controller feedback alt result select car() send requirement() get feedback() return list feedback() show list feedback() show list feedback() sd show list user admin admin page user controller list user page users alt result click button show user() send requirement() get users() return list users() show list users() show list users()
Hình 22 Thay đổi trạng thái người dùng
3.22 Xem thông tin người dùng: sd change status user admin user information user controller users page user alt result click lock/unlock button() send data() check data() return message() update status user() notify successful message() sd show user information admin list users page user controller user information users page alt result click show detail() send requirement() get user information() return user information() navigate to user information page() show information()
Hình 23 Xem thông tin người dùng
3.23 Xem danh sách chủ nhà xe:
Hình 24 Xem danh sách chủ nhà xe
3.24 Thay đổi trạng thái chủ nhà xe:
The article discusses the process of changing the status of a business in an admin interface It outlines key functions such as displaying a list of businesses, managing business data, and updating the status through a lock/unlock button The system sends requests, checks data integrity, and returns messages to confirm successful status updates Overall, it highlights the essential steps for navigating the business management page and ensuring efficient administration of business statuses.
3.25 Xem thông tin chủ nhà xe:
The article discusses the process of accessing and displaying business information for a transportation service, highlighting key actions such as selecting a business, sending requirements, retrieving data, and navigating to the business information page It emphasizes the roles of admin and manager in managing and controlling business details effectively.
THIẾT KẾ XỬ LÝ WEBSITE
Thiết kế cơ bản
1.1 Mô tả cấu trúc, thành phần của website:
1.2.1 Cách tổ chức thư mục/ pakage:
Hình 28 Backend /config: chứa các cấu hình của server
Các controller trong hệ thống chứa toàn bộ mã nguồn xử lý dữ liệu từ server Mỗi khi có dữ liệu được truyền từ client, hệ thống sẽ gọi đến controller tương ứng với từng API khác nhau Điều này cho phép các controller có thể được tái sử dụng cho nhiều API khác nhau, tối ưu hóa quy trình xử lý.
/helpers: chứa các mẫu code dùng chung cho việc xử lý
/middleware: là những đoạn mã trung gian nằm giữa các request và response Nó nhận các request, thi hành các mệnh lệnh tương ứng trên request đó
/migrations: chức các tất cả các models để ánh xạ xuống database
/models: thư mục này chưa tất cả các file như schema, các chức năng của schema
/routes: thư mục chứa tất cả các định tuyến đã tạo bằng cách sử dụng Express Router và kết hợp với controller
/seeders: tạo dữ liệu xuống database
Thư mục /utils chứa các tiện ích cần thiết, được sử dụng nhiều trong các chức năng xử lý Một ví dụ điển hình là hàm catchAsync, giúp bắt lỗi cho các hàm async/await.
/.gitignore: cấu hình những file không muốn đưa lên git
/.env: file khai báo biến môi trường, ví dụ: đường dẫn đến database, tài khoản email,…
Thư mục /node_modules chứa tất cả các module mà server sử dụng, được khai báo trong file package.json Để cài đặt và tạo thư mục node_modules cho mỗi ứng dụng, cần sử dụng lệnh npm install Do thư mục này chiếm nhiều bộ nhớ, nên thường được đưa vào file gitignore.
/package.json: File chứa tất cả các chi tiết npm của dự án, các lệnh chạy như scripts và các thành phần dependencies
/app.js: file này sẽ khai báo tất cả các package/module cần thiết cho chương trình /server.js: file khởi chạy server
STT Tên thư viện Version License Mục đích
1 axios 0.21.1 MIT Dùng để gọi API
2 bcryptjs 2.4.3 MIT Dùng để mã hóa mật khẩu
3 body-parser 1.19.0 MIT Dùng để lắng nghe trên req.on (\’data\’) và xây dựng req.body từ các đoạn dữ liệu mà nó nhận được
4 cors 2.8.5 MIT Dùng để kích hoạt cors, cho phép chia sẻ tài nguyên giữa front-end và backend
5 dotenv 8.0.0 MIT Dùng để load các biến môi trường từ file env vào process.env
6 crypto 1.0.1 MIT Dùng để mã hóa mật khẩu
9 heroku 7.59.2 MIT Dùng để config các thông số liên quan đến Heroku trong terminal VSCode
10 express-joi-validator 2.0.1 MIT Dùng để kiểm tra dữ liệu đầu vào
11 jsonwebtoken 8.5.1 MIT Dùng để sử dụng cho mục đích xác thực
12 paypal-rest-sdk 1.8.1 MIT Dùng để cấu hình và thiết lập thanh toán
13 sequelize 5.15.1 MIT Dùng để mô hình hóa đối tượng MySQL, được thiết kế sử dụng cho môi trường bất đồng bộ
14 multer 1.4.3 MIT Dùng để lưu file
15 randomstring 1.2.1 MIT Dùng để random ra một chuỗi
16 nodemailer 6.6.5 MIT Dùng để gửi mail trong Node
17 uuid 8.3.2 MIT Dùng để cấu hình tạo ra id
18 nodemon 1.19.0 MIT Dùng để khởi động lại ứng dụng Node khi phát hiện có file thay đổi
19 sequelize-cli 5.4.0 MIT Dùng để thiết lập database
20 sharp 0.29.3 MIT Dùng để edit hình ảnh khi upload lên server
21 mysql2 1.6.5 MIT Dùng để cấu hình kết nối với
22 joi 14.3.1 MIT Dùng để xác thực đầu vào
23 express 4.16.4 MIT Sử dụng framework để phát triển phía server
Bảng 26 Thư viện sử dụng trong Back End
1.3.1 Cách tổ chức thư mục/ pakage:
/assets: chứa các tài nguyên của dự án
/components: chứa các thành phần dùng chung của dự án
/modals: chứa các mẫu code dùng chung cho modal
/pages: là chứa bố cục của từng trang trong trang web
/services: chứa các cấu hình gọi api
/app.css: thư mục này chứa tất cả các cấu hình css của trang web /app.js: file này là chính, để chạy tạo nên trang web
/index.js: khởi động chạy lên trang web
/.gitignore: cấu hình những file không muốn đưa lên git
/.env: file khai báo biến môi trường, ví dụ: đường dẫn đến database, tài khoản email,…
Thư mục /node_modules chứa tất cả các module mà server sử dụng và đã được khai báo trong file package.json Để chạy ứng dụng, cần sử dụng câu lệnh npm install để cài đặt và tạo thư mục node_modules Do thư mục này chiếm nhiều dung lượng bộ nhớ, nên thường được thêm vào file gitignore.
/package.json: File chứa tất cả các chi tiết npm của dự án, các lệnh chạy như scripts và các thành phần dependencies
STT Tên thư viện Version License Mục đích
1 axios 0.24.0 MIT Dùng để gọi API
2 bootstrap 5.1.3 MIT Dùng để trang trí trang web
3 react-hook-form 1.19.0 MIT Sử dụng form để tạo ra dữ liệu dạng chuẩn
2.8.5 MIT Dùng để tạo ra các đánh giá
8.0.0 MIT Dùng để phân trang trong trang web
6 react-validation 1.0.1 MIT Dùng để validate dữ liệu trong form
9 validator 7.59.2 MIT Dùng để validate dữ liệu trong form
10 yub 2.0.1 MIT Dùng để kiểm tra dữ liệu nhập vào hook-form
11 react-router-dom 8.5.1 MIT Dùng để chuyển trang
12 @hookform/resolvers 1.8.1 MIT Dùng để kiểm tra dữ liệu nhập vào hook-form
Bảng 27 Thư viện sử dụng trong Front End
Thiết kế chi tiết
2.1 Lược đồ cơ sở dữ liệu:
Hình 31 Sơ đồ thiết kế cơ sở dữ liệu
Mô tả sơ đồ thiết kế cơ sở dữ liệu:
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa
1 id int Giá trị được tạo tự động, đại diện cho 1 xe trong bảng
2 name varchar(255) Tên của xe
3 plate_number varchar(255) Mã biển số của xe
4 capacity int Số lượng ghế của xe
5 createdAt datetime Ngày tạo của xe
6 updatedAt datetime Ngày cập nhật của xe
7 companyId int Mã công ty của xe
8 image varchar(255) Ảnh của xe
9 status_trip tinyint(1) Tình trạng tuyến của xe
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa
1 id int Giá trị được tạo tự động, đại diện cho 1 vị trí ghế trong bảng
2 name varchar(255) Tên đại diện vị trí ghế
3 status tinyint(1) Trạng thái của ghế
4 carId int Mã id xe của ghế
5 createdAt datetime Ngày tạo ghế
6 updateAt datetime Ngày cập nhật ghế
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa
1 id int Giá trị được tạo tự động, đại diện cho 1 công ty trong bảng
2 name varchar(255) Tên công ty
3 address varchar(255) Địa chỉ công ty
4 phone int Số điện thoại của công ty
5 createAt datetime Ngày tạo công ty
6 updateAt datetime Ngày cập nhật công ty
7 creator varchar(255) Tên người tạo công ty
8 image varchar(255) Hình ảnh của công ty
9 disabled tinyint(1) Trạng thái hoạt động của công ty
10 email varchar(255) Địa chỉ email của công ty
11 userId int Mã id tài khoản của công ty
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa
1 id id Giá trị được tạo tự động, đại diện cho 1 mẫu tin liên hệ trong bảng
2 fullname varchar(255) Tên của người gửi
3 email varchar(255) Email của người gửi
4 subject varchar(255) Tiêu đề mẫu tin
5 message varchar(255) Nội dung mẫu tin
6 createAt datetime Ngày tạo mẫu tin
7 updateAt datetime Ngày cập nhật mẫu tin
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa
1 id int Giá trị được tạo tự động, đại diện cho 1 phản hồi trong bảng
2 content varchar(255) Nội dung phản hồi
3 rating int Giá trị đánh giá
4 userId int Mã id tài khoản đã đánh giá
5 carId int Mã id xe được đánh giá
6 createAt datetime Ngày tạo đánh giá
7 updateAt datetime Ngày cập nhập đánh giá
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa
1 id int Giá trị được tạo tự động, đại diện cho 1 lịch trình trong bảng
2 time_hour time Thời gian lịch trình
4 lineId int Mã id của tuyến xe
5 status tinyint(1) Trạng thái của lịch trình
6 createAt datetime Ngày tạo lịch trình
7 updateAt datetime Ngày cập nhật lịch trình
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa
1 id int Giá trị được tạo tự động, đại diện cho 1 tuyến xe trong bảng
2 start varchar(255) Địa điểm khởi hành
3 destination varchar(255) Địa điểm kết thúc
4 departure_time time Thời gian khởi hành
5 arrival_time time Thời gian kết thúc
6 initiated_date datetime Ngày bắt đầu tuyến xe
7 weekdays datetime Ngày hoạt động trong tuần
8 createAt datetime Ngày tạo tuyến xe
9 updateAt datetime Ngày cập nhật tuyến xe
10 carId int Mã id xe đăng ký tuyến xe
11 price float Giá của tuyến xe
12 station varchar(255) Bến đón của tuyến xe
13 station_to varchar(255) Bến trả của tuyến xe
14 companyId varchar(255) Mã id công ty đăng ký tuyến xe
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa
1 id int Giá trị được tạo tự động, đại diện cho 1 token trong bảng
3 expiryDate datetime Ngày hết hạn
4 userId int Mã id tài khoản sở hữu token
5 createAt datetime Ngày tạo token
6 updateAt datetime Ngày cập nhật token
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa
1 id int Giá trị được tạo tự động, đại diện cho 1 đơn vé được đặt trong bảng
2 receipt_number varchar(255) Mã của đơn vé được đặt
3 amount float Tổng giá trị của đơn vé
4 paid_amount float Tiền đã trả
5 paid_date datetime Ngày thanh toán
6 reservation_date datetime Ngày khởi hành của vé
7 createAt datetime Ngày tạo đơn vé
8 updateAt datetime Ngày cập nhật đơn vé
9 userId int Mã id người dùng đặt vé
10 carId int Mã id xe
11 quantity int Số lượng ghế được đặt
12 fullname varchar(255) Tên đầy đủ người đặt
13 phone varchar(255) Số điện thoại của người đặt
14 email varchar(255) Địa chỉ email của người đặt
15 cccd varchar(255) Mã căn cước công dân/ chứng minh nhân dân của người đặt
16 pickup_place varchar(255) Vị trí đón khách
17 dropoff_place varchar(255) Vị trí trả khách
18 position varchar(255) Vị trí ghế đã đặt
19 status varchar(255) Trạng thái của đơn vé
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa
1 id int Giá trị được tạo tự động, đại diện cho 1 role trong bảng
2 name varchar(255) Tên role (quyền truy cập)
3 createAt datetime Ngày tạo role
4 updateAt datetime Ngày cập role
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa
1 id int Giá trị được tạo tự động, đại diện cho 1 role người dùng trong bảng
2 rolesId int Mã role (quyền truy cập)
3 userId int Mã id tài khoản người dùng
4 createAt datetime Ngày tạo role người dùng
5 updateAt datetime Ngày cập nhật role người dùng
6 deletedAt datetime Ngày xóa role người dùng
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa
1 id int Giá trị được tạo tự động, đại diện cho 1 tài khoản trong bảng
2 username varchar(255) Tên đăng nhập của tài khoản
3 email varchar(255) Địa chỉ email của tài khoản
4 password varchar(255) Mật khẩu của tài khoản
5 firstname varchar(255) Tên đại diện của tài khoản
6 fullname varchar(255) Tên đại diện của tài khoản
7 phone varchar(20) Số điện thoại của tài khoản
8 address varchar(255) Địa chỉ của tài khoản
9 createAt datetime Ngày tạo tài khoản
10 updateAt datetime Ngày cập nhật tài khoản
Trạng thái xác thực của tài khoản
12 confirmationcode varchar(255) Mã xác thực của tài khoản
13 disabled tiny(1) Trạng thái hoạt động của tài khoản
Hình 32 Màn hình Trang chủ
Tại đây người dùng chọn điểm đi, điểm đến và thời gian khởi hành, sau đó chọn nút
Tìm chuyến để tiến hành tìm chuyến mà mình muốn
Hình 33 Màn hình Đăng ký
Người dùng điền thông tin và nhấn nút đăng ký để tạo tài khoản
Hình 34 Màn hình đăng nhập
Người dùng nhập tài khoản để tiến hành đăng nhập vào hệ thống
2.2.4 Trang danh sách vé sau khi tìm kiếm
Hình 35 Màn hình kết quả tìm kiếm vé
Sau khi tìm thấy màn hình hiển thị vé, người dùng có thể sắp xếp vé theo giá và thời gian khởi hành Họ cũng có khả năng lọc kết quả theo khoảng giá và loại xe mong muốn.
2.2.5 Trang xem đánh giá xe
Hình 36 Màn hình xem đánh giá xe
Sau khi nhấn nút xem đánh giá, người dùng xem được các bình luận và đánh giá theo sao của xe
Hình 37 Màn hình đặt vé
Nhấn nút đặt ngay để vào trang đặt vé Đây là màn hình đặt vé xe
2.2.7 Trang chọn vị trí ghế:
Hình 38 Màn hình chọn vị trí ghế
Trên màn hình đặt vé, người dùng có thể chọn vị trí ghế mong muốn, với ghế đã đặt được hiển thị bằng nền xám không thể chọn Ghế chưa được chọn có nền trắng, trong khi ghế người dùng chọn sẽ có nền màu xanh để dễ dàng nhận biết Thông tin về số lượng vé, vị trí ghế và giá tiền được hiển thị rõ ràng bên dưới để người dùng dễ quan sát và tránh nhầm lẫn Sau khi hoàn tất lựa chọn, người dùng chỉ cần bấm nút tiếp tục.
2.2.8 Trang chọn điểm đón trả
Hình 39 Màn hình chọn điểm đón trả khách
Tại đây người dùng chọn điểm đón và điểm trả theo ý muốn Bấm tiếp tục để đến màn hình kế tiếp
2.2.9 Trang điền thông tin người đặt vé:
Hình 40 Màn hình điền thông tin người đặt vé
Người dùng cần cung cấp thông tin cơ bản để hoàn tất quy trình Có hai phương thức thanh toán: qua Paypal hoặc thanh toán trực tiếp tại nhà xe Sau khi chọn phương thức thanh toán, người dùng tiến hành thực hiện giao dịch.
2.2.10 Trang thay đổi thông tin cá nhân
Hình 41 Màn hình navbar hiển thị menu quản lý thông tin cá nhân
Trên thanh navbar, người dùng chọn thay đổi thông tin cá nhân
Hình 42 Màn hình cập nhật thông tin cá nhân
Người dùng điền thông tin vào và nhấn gửi để cập nhật thông tin cá nhân
2.2.11 Trang xem thông tin cá nhân
Hình 43 Màn hình xem thông tin cá nhân
Hình 44 Màn hình thay đổi mật khẩu
Người dùng nhập mật khẩu cũ và mật khẩu mới để cập nhật
2.2.13 Trang xem vé đã đặt
Hình 45 Màn hình quản lý lịch sử đặt vé
Tại đây, người dùng xem được toàn bộ các vé và có thể hủy vé mà chưa đến thời điểm khởi hành
2.2.14 Trang xem chi tiết nhà xe
Hình 46 Màn hình xem chi tiết nhà xe
Màn hình hiển thị cho người dùng thông tin về xe và đánh giá của khách
Hình 47 Màn hình xem và bình luận Ở trang chi tiết về xe, người dùng có thể đánh giá và bình luận về nhà xe
2.2.16 Trang liên hệ với chúng tôi:
Hình 48 Màn hình liên hệ với chúng tôi
Người dùng nhập các thông tin cá nhân, nội dung cần liên hệ để ban quản lý trang web có thể cải thiện và phát triển hơn
2.2.17 Trang đăng ký trở thành đối tác
Hình 49 Màn hình đăng ký trở thành đối tác
Người dùng đã có tài khoản có thể đăng ký làm nhà xe để bán vé bằng cách nhập thông tin cơ bản Sau khi gửi thông tin, người dùng sẽ chờ Admin phê duyệt.
Hình 50 Màn hình đăng nhập admin
73 Đăng nhập tài khoản có quyền Admin để vào trang quản lý hệ thống
Hình 51 Màn hình trang chủ admin
Tại đây admin có thể nhìn thấy tổng doanh thu và biểu đồ doanh thu của từng công ty
2.2.20 Trang Admin – quản lý người dùng:
Hình 52 Màn hình quản lý người dùng
Admin có thể xem được có bao nhiêu user đã đăng ký tài khoản, có thể khóa tài khoản cũng như tìm kiếm user
2.2.21 Trang Admin - quản lý công ty
Hình 53 Màn hình quản lý công ty
Màn hình hiển thị tất cả công ty đã trở thành đối tác với hệ thống booknow
2.2.22 Trang Admin - xem xe của công ty
Hình 54 Màn hình xem số lượng xe của công ty
Tại đây admin có thể chỉnh sửa thông tin xe
Hình 55 Màn hình chỉnh sửa thông tin xe
Hình 56 Màn hình tạo xe mới cho công ty
Admin điền thông tin để tạo xe cho từng công ty
2.2.24 Trang quản lý của Công ty – trang chủ:
Hình 57 Màn hình xem doanh thu của công ty
Trang chủ của công ty sẽ hiển thị doanh thu của nhà xe, biểu đồ từng chiếc xe có doanh thu như thế nào
2.2.25 Trang quản lý của Công ty – quản lý hành trình:
Hình 58 Màn hình quản lý hành trình
Công ty xem các hành trình tuyến xe của mình đã đăng ký, biết được xe nào chạy tuyến nào Ngoài ra cập nhật được tuyến xe
Hình 59 Màn hình cập nhật thông tin tuyến xe
Nhập thông tin tuyến xe để sửa đổi
Hình 60 Màn hình cập nhật điểm đón trả khách
Sau đó cập nhật hành trình
Công ty có thể tạo hành trình riêng cho mình khi chọn chức năng Tạo hành trình:
Hình 61 Màn hình tạo tuyến xe mới
Nhập thông tin tuyến xe và chọn tiếp theo
Hình 62 Màn hình tạo điểm đón trả khách cho tuyến xe mới
Nhập thông tin để tạo các điểm đón và chọn nút Hoàn thành để hoàn tất việc tạo tuyến xe mới
2.2.26 Trang quản lý của Công ty – quản lý xe của công ty:
Hình 63 Màn hình xem xe hiện có trong công ty
Công ty xem số lượng xe có trong công ty của mình
Hình 64 Màn hình cập nhật thông tin xe Điền thông tin để cập nhật xe
2.2.27 Trang quản lý của Công ty – quản lý vé:
Hình 65 Màn hình quản lý vé đã đặt
Màn hình Quản lý vé xe cho thấy các vé đã được bán Khi nhập mã vé sẽ tìm được thông tin người đặt và vị trí đã đặt, …
2.2.28 Trang quản lý của Công ty – quản lý phản hồi:
Hình 66 Màn hình quản lý phản hồi
Trang phản hồi giúp Công ty biết tình trạng của xe được đánh giá như thế nào để cải thiện cũng như phát triển
PHÂN CÔNG CÔNG VIỆC
Bảng phân công công việc
STT Tên công việc đã làm Thành viên thực hiện
1 Thiết kế giao diện, màn hình Hồ Đức Thiện
2 Thiết kế cơ sở dữ liệu Phùng Công Chiến
3 Xây dựng API cho hệ thống Phùng Công Chiến
4 Gắn API vào giao diện Hồ Đức Thiện
5 Tổng kết và viết báo cáo Hồ Đức Thiện
Bảng 40 Phân công công việc
Bảng tỷ lệ đóng góp
STT Tên thành viên nhóm Tỷ lệ đóng góp
Bảng 41 Tỷ lệ đóng góp
TỔNG KẾT
Ưu điểm
4 Đề nghị cho bảo vệ hay không?
Tp Hồ Chí Minh, ngày… tháng… năm 2022
(Ký & ghi rõ họ tên)
CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh Phúc
Tp Hồ Chí Minh, ngày… tháng…năm 2022
PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN
Họ và tên sinh viên: Hồ Đức Thiện MSSV: 18110206
Ngành: Công nghệ thông tin Lớp: 18110CLST3
Họ và tên sinh viên: Phùng Công Chiến MSSV: 18147171
Ngành: Công nghệ thông tin Lớp: 18110CLST1
Giảng viên hướng dẫn: Th.S Nguyễn Thanh Phước
1 Về nội dung đề tài & khối lượng thực hiện:
4 Đề nghị cho bảo vệ hay không?
Tp Hồ Chí Minh, ngày… tháng… năm 2022
(Ký & ghi rõ họ tên)
Chúng em xin chân thành cảm ơn giảng viên Nguyễn Thanh Phước đã tận tình hỗ trợ và hướng dẫn chúng em trong suốt quá trình thực hiện đề tài và bài báo cáo này Sự giúp đỡ của thầy/cô là yếu tố quan trọng giúp chúng em hoàn thành tốt công việc.
Chúng em xin chân thành cảm ơn các thầy cô trong khoa Đào tạo Chất lượng cao, đặc biệt là ngành Công Nghệ Thông Tin, đã tận tâm truyền đạt kiến thức cần thiết, giúp chúng em có nền tảng vững chắc để thực hiện đề tài này Chúng em cũng cảm ơn các bạn cùng khóa đã cung cấp thông tin và kiến thức hữu ích, góp phần hoàn thiện đề tài Mặc dù thời gian thực hiện bài báo cáo ngắn và kiến thức còn hạn chế, nhưng chúng em nhận thức được những thiếu sót không thể tránh khỏi trong quá trình thực hiện dự án phần mềm Chúng em rất mong nhận được ý kiến đóng góp quý báu từ thầy để nâng cao kiến thức và cải thiện trong những lần sau Xin chân thành cảm ơn!
Cuối cùng, chúng em xin chúc thầy luôn khỏe mạnh và gặt hái nhiều thành công hơn nữa trong sự nghiệp giáo dục Chúng em chân thành cảm ơn thầy.
Hồ Đức Thiện Phùng Công Chiến
Việt Nam hiện đang trong quá trình hội nhập và phát triển mạnh mẽ, với sự tham gia của các nhà đầu tư và doanh nghiệp trong việc xây dựng nhà máy và khu công nghiệp, từ đó thu hút nguồn lực lao động Bên cạnh đó, giáo dục được chú trọng với nhiều trường đại học, cao đẳng và trường nghề được đầu tư, tạo ra cơ hội học tập cho học sinh, sinh viên Tuy nhiên, phần lớn các xí nghiệp và cơ sở giáo dục lại tập trung ở các thành phố lớn, dẫn đến nhu cầu đi lại của người dân ngày càng tăng cao.
Trong thời đại công nghệ 4.0, việc mua vé trở nên đơn giản hơn bao giờ hết, khi người dùng có thể dễ dàng truy cập các trang web bán vé lớn mà không cần đến tận nơi Điều này đặc biệt đúng với các nhà xe lớn có quy mô rộng rãi, thậm chí toàn quốc, nhờ vào tiềm lực kinh tế mạnh mẽ để phát triển website bán vé riêng Sự phát triển này minh chứng cho sức mạnh của thương mại điện tử trong việc mở rộng cơ hội tiếp cận dịch vụ cho người dân.
Các nhà xe quy mô vừa và nhỏ thường gặp khó khăn trong việc bán vé truyền thống, như việc khách hàng phải đến tận nơi hoặc gọi điện, dẫn đến việc lưu trữ thông tin khách hàng chủ yếu bằng tay Điều này có thể gây ra nhầm lẫn về ghế hoặc thiếu sót thông tin, ảnh hưởng đến uy tín của nhà xe Để giải quyết vấn đề này, website BookNow ra đời, giúp các chủ xe không có khả năng xây dựng trang web riêng có thể đăng tin bán vé dễ dàng Ngoài ra, BookNow còn cung cấp dịch vụ thanh toán online nhanh chóng và an toàn cho khách hàng khi đặt vé.
DANH MỤC BẢNG BIỂU IV CHƯƠNG I GIỚI THIỆU 1
1 Lí do chọn đề tài: 1
2 Tính cấp thiết của đề tài: 1
4 Kết quả dự kiến đạt được: 1
5 Đặc tả yêu cầu người dùng: 1
5.1 Nhóm người dùng chưa đăng nhập: 1
6 Các công nghệ sử dụng: 2
CHƯƠNG II CƠ SỞ LÝ THUYẾT 3
1.2 Các khái niệm liên quan: 3
CHƯƠNG III PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 9
2.2 Tìm kiếm tất cả xe: 10
2.7 Xem thông tin cá nhân: 15
2.8 Cập nhập thông tin cá nhân: 16
2.15 Thay đổi thông tin xe: 23
2.18 Hiển thị danh sách vé đã bán: 26
2.20 Xem danh sách người dùng: 28
2.21 Thay đổi trạng thái người dùng: 29
2.22 Xem thông tin người dùng: 29
2.23 Xem danh sách chủ nhà xe: 30
2.24 Thay đổi trạng thái chủ nhà xe: 31
2.25 Xem thông tin chủ nhà xe: 32
3 Lược đồ tuần tự (Sequence diagram): 34
3.1 Tìm kiếm tất cả chuyến: 34
3.2 Tìm kiếm tất cả xe: 34
3.7 Xem thông tin cá nhân: 37
3.8 Cập nhật thông tin cá nhân: 37
3.15 Thay đổi thông tin xe: 41
3.18 Hiển thị danh sách vé đã bán: 43
3.20 Xem danh sách người dùng: 44
3.21 Thay đổi trạng thái người dùng: 44
3.22 Xem thông tin người dùng: 45
3.23 Xem danh sách chủ nhà xe: 46
3.24 Thay đổi trạng thái chủ nhà xe: 46
3.25 Xem thông tin chủ nhà xe: 47
CHƯƠNG IV THIẾT KẾ XỬ LÝ WEBSITE 48
1.1 Mô tả cấu trúc, thành phần của website: 48
2.1 Lược đồ cơ sở dữ liệu: 55
CHƯƠNG V PHÂN CÔNG CÔNG VIỆC 81
1 Bảng phân công công việc: 81
2 Bảng tỷ lệ đóng góp 81
Hình 1.Lược đồ usecase tổng quát 9
Hình 2.Tìm kiếm tất cả chuyến 34
Hình 3.Tìm kiếm tất cả xe 35
Hình 8 Xem thông tin cá nhân 37
Hình 9 Cập nhật thông tin cá nhân 38
Hình 10 Thay đổi mật khẩu 39
Hình 12 Xem lịch sử vé 39
Hình 15 Xem danh sách xe 41
Hình 16 Thay đổi thông tin xe 42
Hình 18 Xem danh sách chuyến 43
Hình 19 Hiển thị danh sách vé đã bán 43
Hình 20 Xem đánh giá xe 44
Hình 21 Xem danh sách người dùng 44
Hình 22 Thay đổi trạng thái người dùng 45
Hình 23 Xem thông tin người dùng 46
Hình 24 Xem danh sách chủ nhà xe 46
Hình 25 Thay đổi trạng thái chủ nhà xe 46
Hình 26 Xem thông tin chủ nhà xe 47
Hình 31 Sơ đồ thiết kế cơ sở dữ liệu 55
Hình 32 Màn hình Trang chủ 61
Hình 33 Màn hình Đăng ký 62
Hình 34 Màn hình đăng nhập 62
Hình 35 Màn hình kết quả tìm kiếm vé 63
Hình 36 Màn hình xem đánh giá xe 63
Hình 37 Màn hình đặt vé 64
Hình 38 Màn hình chọn vị trí ghế 65
Hình 39 Màn hình chọn điểm đón trả khách 66
Hình 40 Màn hình điền thông tin người đặt vé 67
Hình 41 Màn hình navbar hiển thị menu quản lý thông tin cá nhân 68
Hình 42 Màn hình cập nhật thông tin cá nhân 68
Hình 43 Màn hình xem thông tin cá nhân 69
Hình 44 Màn hình thay đổi mật khẩu 69
Hình 45 Màn hình quản lý lịch sử đặt vé 70
Hình 46 Màn hình xem chi tiết nhà xe 70
Hình 47 Màn hình xem và bình luận 71
Hình 48 Màn hình liên hệ với chúng tôi 71
Hình 49 Màn hình đăng ký trở thành đối tác 72
Hình 50 Màn hình đăng nhập admin 72
Hình 51 Màn hình trang chủ admin 73
Hình 52 Màn hình quản lý người dùng 73
Hình 53 Màn hình quản lý công ty 74
Hình 54 Màn hình xem số lượng xe của công ty 75
Hình 55 Màn hình chỉnh sửa thông tin xe 75
Hình 56 Màn hình tạo xe mới cho công ty 75
Hình 57 Màn hình xem doanh thu của công ty 76
Hình 58 Màn hình quản lý hành trình 76
Hình 59 Màn hình cập nhật thông tin tuyến xe 77
Hình 60 Màn hình cập nhật điểm đón trả khách 77
Hình 61 Màn hình tạo tuyến xe mới 78
Hình 62 Màn hình tạo điểm đón trả khách cho tuyến xe mới 78
Hình 63 Màn hình xem xe hiện có trong công ty 79
Hình 64 Màn hình cập nhật thông tin xe 79
Hình 65 Màn hình quản lý vé đã đặt 80
Hình 66 Màn hình quản lý phản hồi 80
Bảng 1 Usecase Tìm kiếm chuyến xe 10
Bảng 2 Usecase Tìm kiếm tất cả xe 11
Bảng 6 Usecase Quên mật khẩu 15
Bảng 7 Usecase Xem thông tin cá nhân 16
Bảng 8 Usecase Cập nhật thông tin cá nhân 17
Bảng 9 Usecase đánh giá xe 18
Bảng 10 Usecase Thay đổi mật khẩu 19
Bảng 11 Usecase Xem lịch sử vé 20
Bảng 14 Usecase Xem danh sách xe 23
Bảng 15 Usecase Thay đổi thông tin xe 24
Bảng 17 Usecase Xem danh sách chuyến 26
Bảng 18 Usecase Hiển thị danh sách vé đã bán 27
Bảng 19 Usecase Xem đánh giá xe 28
Bảng 20 Usecase Xem danh sách người dùng 29
Bảng 21 Usecase Thay đổi trạng thái người dùng 29
Bảng 22 Usecase Xem thông tin người dùng 30
Bảng 23 Usecase Xem danh sách chủ nhà xe 31
Bảng 24 Usecase Thay đổi trạng thái chủ nhà xe 32
Bảng 25 Usecase Xem thông tin chủ nhà xe 33
Bảng 26 Thư viện sử dụng trong Back End 52
Bảng 27 Thư viện sử dụng trong Front End 54
Bảng 40 Phân công công việc 81
Bảng 41 Tỷ lệ đóng góp 81
1 Lí do chọn đề tài:
Ngày nay, với sự phát triển vượt bậc của ngành CNTT, con người ngày càng chuyển từ việc quản lý, ghi chú và lưu trữ trên giấy tờ sang sử dụng các công cụ hỗ trợ Lĩnh vực bán hàng cũng không ngoại lệ, khi mà việc ghi chép hóa đơn và tính toán thu chi thủ công đã trở nên lạc hậu và tốn thời gian Do đó, nhu cầu về một phần mềm hỗ trợ xử lý công việc nhanh chóng và hiệu quả ngày càng tăng cao Nhận thấy điều này, nhóm chúng tôi đã phát triển một phần mềm đặt vé xe, đáp ứng đầy đủ các tính năng cần thiết để nâng cao hiệu quả công việc cho người sử dụng.
2 Tính cấp thiết của đề tài:
Từ cuối năm 2019, đại dịch Covid-19 đã ảnh hưởng nghiêm trọng đến tình hình kinh tế toàn cầu, đặc biệt là tại Việt Nam vào năm 2021, khi nhiều doanh nghiệp vừa và nhỏ, hàng quán ăn uống, và công ty dịch vụ phải đóng cửa Người dân gặp khó khăn trong việc di chuyển, đặc biệt là khi đi xe khách, vì lo ngại lây lan dịch bệnh Để giải quyết vấn đề này, website bán vé xe ra đời nhằm giảm thiểu khó khăn mà Covid-19 gây ra cho mọi người.
Để đáp ứng nhu cầu mua vé thuận tiện hơn, chúng tôi cung cấp quy trình mua vé dễ dàng và nhanh chóng Khách hàng có thể nắm rõ thông tin về nhà xe và tuyến xe, từ đó có nhiều lựa chọn hơn Giao diện thiết kế đơn giản giúp người dùng dễ dàng thao tác.
4 Kết quả dự kiến đạt được:
Xây dựng được trang web bán vé xe giúp cho những người có nhu cầu mua vé nhanh chóng với nhiều nhà xe, tuyến xe để lựa chọn, …
5 Đặc tả yêu cầu người dùng:
5.1 Nhóm người dùng chưa đăng nhập:
- Xem thông tin vé xe
- Xem thông tin chủ nhà xe
- Xem đánh giá và phản hồi của nhà xe
- Đăng ký tài khoản khách hàng
- Đăng ký tài khoản nhà xe
- Sửa đổi thông tin cá nhân
- Xem lịch sử đặt vé
- Tạo vé từ danh sách bên ngoài
- Xem thông tin hành khách, tài xế
- Quản lý chủ nhà xe
Khi nhà xe sử dụng nhiều hệ thống đặt vé bên ngoài, việc yêu cầu có người quản lý để thường xuyên cập nhật thông tin và trạng thái ghế đã đặt là rất cần thiết Điều này giúp đảm bảo rằng vé xe luôn được cập nhật chính xác, tránh tình trạng nhầm lẫn và nâng cao trải nghiệm của khách hàng.
6 Các công nghệ sử dụng:
- Front-End: HTML, CSS, Javascript (ReactJS)
CHƯƠNG II CƠ SỞ LÝ THUYẾT
React là thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng (UI)
Công cụ này, được phát triển bởi Facebook và ra mắt vào năm 2013 dưới dạng mã nguồn mở JavaScript, mang lại tốc độ phản hồi ấn tượng khi người dùng nhập liệu nhờ vào phương pháp mới trong việc render trang web.
- Có thể sử dụng ReactJS để viết ứng dụng trực tiếp bằng JavaScript
- Biến các thành phần UI phức tạp trở thành những component độc lập
- Chuyển các dữ liệu đã được tùy biến đến một UI component cụ thể
- Giúp bạn có thể thay đổi trạng thái cho nhiều component con và không gây ảnh hưởng đến component gốc dù đang ở trong đang ở trạng thái Stateful
- Khả năng xác định chính xác khi nào cần render lại cũng như khi nào bỏ đi phần tử DOM
1.2 Các khái niệm liên quan:
- JavaScript: Javascript là ngôn ngữ được sử dụng để phát triển React Để sử dụng
ReactJS một cách hiệu quả, người dùng/ lập trình viên ít nhất phải hiểu về các khái niệm như: object, prototype và callback
Redux là một phần quan trọng trong ReactJS, giúp quản lý dữ liệu hiệu quả ReactJS không có các module chuyên dụng để xử lý dữ liệu, vì vậy nó hoạt động độc lập và chia nhỏ View thành các component nhỏ hơn, tạo điều kiện thuận lợi cho việc quản lý và kết nối giữa các thành phần.
Virtual DOM là một định dạng dữ liệu nhẹ của JavaScript, được sử dụng để biểu diễn nội dung của DOM (Document Object Model) tại một thời điểm cụ thể.
ReactJS là một framework kết hợp sử dụng Virtual-DOM, cho phép thiết lập mô hình Model-View trong kiến trúc MVC Khi View được thay đổi trong DOM, Model cũng sẽ tự động cập nhật và ngược lại.
- Component: ReactJS được xây dựng xoay quanh các component, trong khi đó, các
Framework khác dùng template Để tạo ra một component có đầy đủ những đặc tính,
4 bạn chỉ cần sử dụng phương thức createClass dùng để nhận một tham số mô tả đặc tính
ExpressJS là một framework ứng dụng web mã nguồn mở miễn phí, được xây dựng trên nền tảng Node.js, giúp thiết kế và phát triển ứng dụng web một cách nhanh chóng Người dùng chỉ cần có kiến thức về JavaScript để dễ dàng xây dựng các ứng dụng web và API, làm cho công việc của lập trình viên và nhà phát triển trở nên đơn giản hơn.
Nhược điểm
• Nhiều tính năng chưa được hoàn thiện
• Giao diện tuy trực quan nhưng xét về độ thẩm mỹ vẫn còn tồn đọng nhiều chỗ chưa được xử lý
• Nghiệp vụ xử lý bài toán chưa được triệt để
• Cách đặt tên còn chưa được tốt.
Khó khăn
• Tình hình dịch bệnh chính là rào cản lớn nhất cho nhóm
• Các thành viên trong nhóm đã đi làm dẫn đến có ít thời gian để làm cùng nhau
• Nghiệp vụ phức tạp nên dành nhiều thời gian tìm hiểu
• Công nghệ mới nên tốn thời gian để làm và tối ưu.
Hướng phát triển
• Tiếp tục hoàn chỉnh giao diện cho project
• Hoàn thành các tính năng mà mục tiêu đã đề ra
• Có giao diện dành cho mobile.