Xây dựng ứng dụng đặt vé xe có hỗ trợ thanh toán online đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

TỔNG QUAN

Lý do chọn đề tài

Hiện nay, sự phát triển mạnh mẽ của internet và công nghệ thông tin đã dẫn đến sự xuất hiện của nhiều phần mềm và công cụ ứng dụng, giúp con người làm việc chuyên nghiệp hơn Những ứng dụng này giải quyết hiệu quả nhiều bài toán phức tạp mà trước đây chỉ có máy móc mới có thể thực hiện chính xác.

Con người ngày càng thích ứng và phụ thuộc vào công nghệ, dẫn đến sự thay đổi trong thói quen sinh hoạt để tận dụng những tiện ích của công nghệ thông tin hiện đại Điều này giúp công việc trở nên thuận lợi và giảm thiểu bất cập Vì vậy, nhóm chúng tôi quyết định chọn đề tài này nhằm giúp mọi người đặt vé xe đi chơi hoặc về quê một cách nhanh chóng và thuận tiện.

Mục tiêu

Mục tiêu của đồ án là áp dụng kiến thức đã học để xây dựng nền tảng web, giúp khách hàng dễ dàng đặt vé và quản lý thông tin nhà xe một cách hiệu quả.

Công nghệ sử dụng

Trong đề tài này nhóm em đã tìm hiểu và tìm ra và áp dụng những công nghệ sau:

- Front-end: Ứng dụng web xây dựng bởi Angular

- Back-end: Nền tảng Java SpringBoot

- Một số công nghệ khác như: HTML, CSS và JavaScript

CƠ SỞ LÝ THUYẾT

Java

Java, được phát triển bởi James Gosling và nhóm của ông với tên gọi ban đầu là Oak, đã ra mắt vào năm 1994 Sau khi Oracle mua lại Sun Microsystems vào năm 2009-2010, họ đã cam kết trở thành "người quản lý công nghệ Java" với mục tiêu xây dựng một cộng đồng tham gia và minh bạch.

2.1.2 Giới thiệu về Java và SpringBoot

Java là ngôn ngữ lập trình hướng đối tượng (OOP) nổi bật với cách biên dịch mã nguồn thành bytecode thay vì mã máy Điều này cho phép bytecode được thực thi bởi môi trường thực thi (runtime environment), mang lại tính linh hoạt và khả năng tương thích cao cho các ứng dụng Java.

Java kế thừa nhiều cú pháp từ C và C++, nhưng có cú pháp hướng đối tượng đơn giản hơn và ít tính năng xử lý cấp thấp Nhờ đó, việc lập trình bằng Java trở nên dễ dàng hơn và giảm thiểu công sức trong việc sửa lỗi.

Spring MVC là một nền tảng phát triển web của Spring framework, nhưng quá trình cấu hình thường phức tạp và tốn thời gian do phải tải lại nhiều thư viện mỗi khi khởi tạo dự án mới Để khắc phục vấn đề này, nhóm phát triển đã giới thiệu Spring Boot, một công nghệ giúp giảm thiểu cấu hình và tích hợp sẵn các thư viện thường dùng Spring Boot thuộc nhóm module của Spring framework, cung cấp tính năng RAD (Rapid Application Development), giúp lập trình viên tiết kiệm thời gian và công sức trong việc phát triển ứng dụng.

Application Development) Spring boot được sử dụng để tạo ra ứng dụng độc lập dựa trên spring mà bạn có thể chạy ngay sau khi cấu hình lại spring

2.1.3 Lý do chọn Java Spring boot

Java được phát triển để biên dịch mã nguồn thành bytecode, cho phép bytecode này chạy trên môi trường thực thi Nhờ đó, chương trình Java có khả năng hoạt động trên nhiều thiết bị và hệ điều hành khác nhau.

- Quá trình cấp phát, giải phóng bộ nhớ thực hiện tự động Không sử dụng con trỏ hoặc phép toán con trỏ

Java được biên dịch qua máy ảo Java (JVM), điều này giúp tăng cường bảo mật cho ứng dụng, vì tất cả các đối tượng đều phải qua JVM trước khi tiếp cận hệ điều hành.

- Java hỗ trợ lập trình cho hệ thống phân tán như client-server, RMI… bằng Java Web, UDP, TCP

- Tạo các ứng dụng độc lập có thể được bắt đầu bằng cách sử dụng java-jar

- Nhúng trực tiếp Tomcat, Jetty hoặc Undertow Không cần triển khai các tệp WAR

- Cung cấp starter POMs được đề xuất để đơn giản hóa cấu hình Maven Tự động cấu hình Spring bất cứ khi nào có thể

- Không tự sinh mã và không yêu cầu XML.

Angular

AngularJS, được phát triển bởi Misko Hevery và Adam Abrons từ năm 2009, ban đầu chỉ là một dự án riêng Tuy nhiên, dự án này đã trở nên nổi bật khi Misko Hevery tham gia vào dự án Google Feedback với vai trò lập trình viên bán thời gian.

Lịch sử phát hành:

AngularJS 20/10/2010 Phiên bản đầu tiên

Bảng 1:Lịch sử phiên bản Angular

- Angular là một javascript framework do google phát triển để xây dựng các Single Page Application (SPA) bằng JavaScript, HTML và TypeScript

- Code được viết bằng TypeScript biên dịch thành JavaScript và hiển thị tương tự trong trình duyệt

Component là phần chính cho các ứng dụng Angular Mỗi thành phần bao gồm:

- HTML template khai báo những gì hiển thị trên trang

- Typescript class xác định các hành vi

- CSS xác định cách thành phần được sử dụng trong template

- Trong Angular, một template là một chunk của HTML Bên trong template có thể sử dụng nhiều cú pháp đặt biệt để tận dụng nhiều tính năng của Angular

- Mỗi Angular template trong ứng dụng là một section của HTML điều đó có thể bao gồm là một phần của page mà trình duyệt hiển thị

- Một Angular HTML template hiển thị chế độ xem hoặc giao diện người dùng trong browser giống như HTML thông thường nhưng có nhiều chức năng hơn

- Cho phép kiểm soát UX/UI bằng cách phối hợp dữ liệu giữa các lớp và template

Built-in attribute directives lắng nghe và sửa đổi hành vi của các elements, attributes, properties và components của HTML khác

Nhiều NgModules như RouterModule và FormsModule xác định các thuộc tính của riêng chúng Các attribute directives khác như là:

- NgClass – thêm và xóa bộ các lớp CSS

- NgStyles – thêm và xóa bộ các kiểu HTML

- NgModel – thêm ràng buộc dữ liệu hai chiều đến HTML form element

Built-in structural directives are responsible for shaping the HTML layout by modifying the structure of the DOM They typically achieve this by adding, removing, and manipulating host elements that are assigned to them.

Một số built-in structural directives:

- NgIf – điều kiện tạo hoặc hủy bỏ subviews từ template

- NgFor – lặp lại các node duyệt các item trong list

- NgSwitch – một tập hợp các lệnh chuyển đổi giữa các chế độ xem thay thế

Dependency refers to the services or objects that a class requires to perform its functions Dependency injection is a design pattern that allows a class to obtain its dependencies from an external source rather than creating them internally.

- Khả năng ràng buộc dữ liệu ở hai chiều: code ở cả JavaScript và HTML đều được đồng bộ hóa, giúp tiết kiệm thời gian lập trình

Việc mở rộng và phát triển tính năng của các file HTML trở nên dễ dàng hơn nhờ sự hiện diện của các chỉ thị Người dùng chỉ cần thêm tiền tố "ng-" trước thuộc tính HTML để kích hoạt các chỉ thị này.

- Hỗ trợ thiết kế ứng dụng bằng các đoạn code ngắn gọn nhờ các template mà cấu trúc Code – Angular

- Hỗ trợ việc thử nghiệm, tích hợp

Công cụ của tương lai với hệ thống chức năng vượt trội, liên tục phát triển cơ sở người dùng và thường xuyên cập nhật tài liệu chuyên sâu.

- Tương thích với nhiều thiết bị, bao gồm cả di động lẫn để bàn

- Bảo mật kém, có khả năng bảo mật thấp Phải có tính năng bảo mật và xác thực phía server sẽ giúp ứng dụng trở nên an toàn hơn

- Nếu người sử dụng ứng dụng của bạn vô hiệu hóa JavaScript thì họ chỉ nhìn được trang cơ bản, không thấy gì thêm

2.2.5 Tại sao lại sử dụng Angular

- Là một frameworks nên Angular mang đến một kiến trúc rõ ràng

- Extensive binding giúp quá trình hiển thị dữ liệu, điều khiển DOM, thực thi các event một cách trơn tru và dễ dàng

- Hỗ trợ đầy đủ các tính năng điều hướng có thể truyền dữ liệu giữa các route.

MySql

MySQL là một chương trình quản lý hệ thống cơ sở dữ liệu (CSDL), giúp lưu trữ và tổ chức thông tin một cách rõ ràng và ngăn nắp Hệ thống này cho phép người dùng truy cập dữ liệu dễ dàng và nhanh chóng Ngoài ra, MySQL cũng hỗ trợ hầu hết các ngôn ngữ lập trình hiện nay.

2.3.2 Tại sao cần sử dụng MySql

- Khả năng mở rộng và tính linh hoạt

- Hỗ trợ giao dịch mạnh mẽ

- Điểm mạnh của Web và Data Warehouse

- Bảo vệ dữ liệu mạnh mẽ

- Phát triển ứng dụng toàn diện

- Mã nguồn mở tự do và hỗ trợ 24/7

- Chi phí sở hữu thấp nhất

KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

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

Với sự phát triển kinh tế và chất lượng cuộc sống hiện nay, người dân địa phương ở các tỉnh thường đổ về các thành phố lớn để tìm việc làm Mỗi dịp lễ, Tết hay ngày nghỉ, họ trở về quê để đoàn tụ gia đình, tạo ra nhu cầu lớn về phương tiện di chuyển Để đáp ứng nhu cầu này, các nhà xe đã áp dụng công nghệ, cho ra đời trang web đặt vé xe trực tuyến, giúp khách hàng dễ dàng đặt vé mọi lúc, mọi nơi mà không cần phải đến trực tiếp hoặc gọi điện Điều này mang lại sự tự chủ cho khách hàng trong việc lựa chọn vé phù hợp với nhu cầu của mình.

Trang web hoamaicar là một trang web cho phép người dùng, khách hàng đặt vé xe thông qua biểu mẫu

Hình 2: Giao diện hoamaicai.com Ưu điểm:

- Đặt vé xe có thể đặt được nhiều khung giờ trải dài trong một ngày …

- Thiết kế đơn giản, tóm lược

- Có tương đối các chức năng cơ bản

- Chỉ được đặt trong khu vực cụ thể, không mở rộng ra khu vực khác

- Chưa có chức năng thanh toán online, chỉ có liện hệ để được đặt vé

- Chưa có giá cụ thể cho từng chuyến xe

- Khả năng tương tác và sự tiện lợi còn kém hiệu quả

3.1.2 Trang web tienoanh.com Đây là trang web đặt vé xe được thành lập từ năm 2010 cho đến nay, có trên 10 năm kinh nghiệm trong lĩnh vực vận tải, và phục vụ chỉ trên tuyến đường Hồ Chí Minh – Đăk Lăk

Hình 3: Trang web tienoanh.com Ưu điểm:

- Bộ lọc giá cả, thời gian, không gian xe

- Có vận chuyển hàng hóa ngoài hành khách

- Hiện đầy đủ các mục tuyến đi

- Giá cả rõ ràng, không mập mờ

- Thiếu sót lưu trữ thông tin người dùng

- Không thể tra cứu được những vé đã từng đi cho khách hàng

- Không có sự rõ ràng về chức năng thanh toán online như đã đề cập ở đầu trang web

Hình 4: Trang web Futabus.vn Ưu điểm:

- Có giao diện dễ dùng

- Hiển đầy đủ thông tin chuyến đi

- Xử lý tác vụ nhanh

- Không có phần chi tiết cho khách hàng

- Không có thông tin giá vé cụ thể

- Thanh toán chưa đa dạng, gây khó khăn cho người sử dụng phương thức thanh toán khác

3.1.3.1 Những vấn đề cần chú ý:

- Thiết kế giao diện đẹp mắt

- Tốc độ load ảnh của website

- Thêm các chức năng cơ bản cho người dùng: tìm kiếm tuyến xe, xem thông tin tuyến xe, đặt vé…

3.1.3.2 Những ưu điểm cần tiếp thu cho sản phẩm:

- Thiết kế giao diện đơn giản, dễ sử dụng, có bố cục gọn, rõ ràng, dễ nhìn.

Xác định yêu cầu

- Có giao diện dễ sử dụng, người dùng không cần phải xem hướng dẫn mà có thể đặt vé dễ dàng

- Có hệ thống đăng nhập tài khoản cho phép người dùng có thể lưu trữ thông tin cũng như các ưu đãi

- Có các chức năng hỗ trợ xem trang website

3.1.3.3 Những khuyết điểm cần tránh

- Giao diện trang website quá dài

- Các chức năng không đúng yêu cầu và dư thừa

- Hiển thị sai thông tin và dài dòng gây khó chịu khi tìm kiếm

- Hạn chế các quảng cáo trong trang web

- Những người có nhu cầu đi lại ,đặt vé xe (User)

- Người quản trị trang web (Admin)

- Hiển thị thông tin, hình ảnh của những tuyến xe

- Tìm kiếm và hiển thị chi tiết các thông tin cụ thể cũng như hình ảnh của một tuyến xe bất kỳ

- Người dùng được dùng chức năng đặt vé xe thông qua việc tìm kiếm tuyến phù hợp rồi chọn vị trí chỗ ngồi để đặt vé

- Cho phép người dùng thanh toán online

Hệ thống tài khoản người dùng cho phép truy cập vào lịch sử đặt vé, thông tin cá nhân, điểm thưởng, điểm tích lũy và mã số giảm giá.

3.2.2 Phạm vi Đối với người dùng

- Giúp cho việc đặt vé dễ dàng hơn

- Đem đến nhiều lựa chọn cho khách hàng khi muốn đặt vé xe và chính xác Đối với người quản trị

Đánh giá và lựa chọn công nghệ

- Cập nhật, xóa, thay đổi thông tin về vé dễ dàng

- Quản lý đặt vé cho khách hàng chặt chẽ và thuận tiện

- Đem đến nhiều lựa chọn cho khách hàng khi muốn đặt vé xe

3.3 Đánh giá và lựa chọn công nghệ

Xây dựng một trang web cho phép người dùng đặt vé dễ dàng, đồng thời cung cấp cho quản trị viên các chức năng quản lý như tạo, xóa và sửa đổi nội dung thông tin trên trang.

Tìm hiểu lý thuyết về các công nghệ để thực hiện đề tài

- Tìm hiểu về Java Spring boot

Phân tích yêu cầu và hiện thực hóa hệ thống

- Mô hình hóa hệ thống

Xây dựng trang Web đặt vé xe trực tuyến

- Dùng Java Spring boot để lập trình

- Cơ sở dữ liệu dùng MySql

- Dùng Angular, HTML, CSS và một số thư viện có sẵn

Front – end sử dụng Visual studio code để lập trình quản lý code

- Visual Studio Code là một trình biên tập mã, là sản phẩm của Microsoft dành cho Windows, Linux, macOS, ra mắt vào tháng 4 năm 2015 ở hội nghị Build Đặc điểm

Visual Studio Code nổi bật với tính năng đơn giản, gọn nhẹ và dễ dàng cài đặt Phần mềm này tương thích với cả Windows, Linux và Mac OS, đồng thời hỗ trợ nhiều ngôn ngữ lập trình khác nhau.

Visual Studio Code là một công cụ lập trình mạnh mẽ với chức năng debug tích hợp, hỗ trợ Git, và cung cấp tính năng tô màu cú pháp cùng với khả năng tự hoàn thành mã thông minh Nó cũng đi kèm với các snippets và cải tiến mã nguồn, cho phép người dùng tùy chỉnh theme, phím tắt và nhiều tùy chọn khác Đặc biệt, Visual Studio Code hoàn toàn miễn phí và là phần mềm mã nguồn mở.

Back- end sử dụng Eclipse để lập trình

Eclipse là một môi trường phát triển tích hợp (IDE) mạnh mẽ cho lập trình máy tính, cung cấp không gian làm việc cơ bản và hệ thống plug-in để tùy chỉnh Được phát triển chủ yếu bằng Java, Eclipse chủ yếu được sử dụng cho lập trình ứng dụng Java, giúp tối ưu hóa quy trình phát triển phần mềm.

Nó có khả năng phát triển tài liệu bằng LaTeX thông qua plug-in TeXlipse, trong khi môi trường phát triển sử dụng các công cụ phát triển Java (JDT) dành cho Java.

Phương pháp tổng hợp lý thuyết:

- Nghiên cứu và tìm hiểu các tài liệu, các trang web liên quan đến nội dung đang tìm hiểu

Để đảm bảo tính chính xác và khoa học cho đề tài khóa luận, cần tham khảo ý kiến từ Cô hướng dẫn, cũng như các anh, chị và bạn bè có kinh nghiệm trong lĩnh vực công nghệ và thực tiễn Phương pháp mô hình hóa sẽ được áp dụng để hỗ trợ quá trình thực hiện.

- Mô phỏng ứng dụng từ bước thiết kế cài đặt cho đến kết quả thành phẩm của ứng dụng

3.3.5 Ý nghĩa khoa học thực tiễn

- Trang web có giao diện đơn giản, dễ nhìn và bố cục phân bố hợp lý

Nghiệp vụ đặt vé xe không chỉ cung cấp các chức năng cơ bản đầy đủ mà còn tích hợp thêm nhiều tiện ích và chức năng bổ sung khác, nhằm nâng cao trải nghiệm người dùng.

Mô hình hóa hệ thống

- User: người chưa đăng nhập

- Customer: người đã đăng nhập, có tất các chức năng của User

- Admin: quản trị viên, có các chức năng của quản trị viên

3.4.3 Mô tả sơ đồ Usecase

STT TÊN CHỨC NĂNG MÔ TẢ

UC_01 Sign In Chức năng đăng ký tài khoản để truy cập vào trang web

UC_02 Log In Chức năng đăng nhập tài khoản (đã đăng ký) để đăng nhập vào trang web

UC_03 Send Gmail Chức năng gửi những phản hồi cho nhà xe qua gmail

UC_04 Book-Ticket Chức năng đặt vé qua các bước theo yêu cầu

Chức năng chọn tuyến xe trong UC_04.1 bao gồm các thông tin quan trọng như: địa điểm khởi hành, điểm đến, loại vé (một chiều hoặc khứ hồi), ngày đi và ngày về (nếu chọn vé khứ hồi).

UC_04.2 Select Seats Chức năng chọn vị trí giường mà bạn muốn, gồm có những thông tin như: giờ chạy, vị trí giường

Chức năng nhập thông tin cá nhân khi đặt vé bao gồm các thông tin cần thiết như họ và tên, số điện thoại, email, địa chỉ, tỉnh và thành phố Người dùng cũng cần tích vào ô chấp nhận điều khoản đặt vé của nhà xe.

UC_04.4 Pay Chức năng thanh toán, có 3 loại cổng thanh toán

PayPal, VN Pay và Zalo Pay

UC_05 View Popular Routes Chức năng xem những tuyến xe phổ biến

UC_06 View Schedule Routes Chức năng xem lịch trình của các tuyến xe

UC_07 View Detail Routes Chức năng xem chi tiết của tuyến xe

UC_08 View Invoice Chức năng xem thông tin vé sau khi đặt vé

UC_08.1 Cancel Ticket Chức năng có thể hoàn trả vé khi mà vé còn hiệu lực

UC_09 View Policy Chức năng xem những chính sách của nhà xe UC_10 Log Out Chức năng để đăng xuất ra khỏi trang web

Chức năng quản lý thông tin cá nhân cho phép người dùng xem và thay đổi các thông tin quan trọng như tên khách hàng, số điện thoại, CMND, địa chỉ, tỉnh/thành phố và quận/huyện.

Chức năng quản lý tài khoản cá nhân (xem, thay đổi tài khoản) gồm có: tên tài khoản, mật khẩu

Chức năng UC_13 cho phép người dùng xem lịch sử vé, hiển thị danh sách vé đã mua với các thông tin quan trọng như mã vé, tuyến xe, giờ chạy, ngày chạy và tổng tiền.

UC_13.1 Cancel Ticket Chức năng hủy vé khi vé còn hiệu lực

UC_14 View Bonus Points Chức năng xem điểm thưởng gồm có: thông tin về điểm thưởng, điểm thưởng của khách hàng, loại thành viên

Chức năng UC_15 cho phép người dùng xem thông tin sơ bộ về doanh thu qua bảng điều khiển UC_16 cung cấp khả năng quản lý tài khoản, bao gồm việc xem, thêm và sửa thông tin tài khoản UC_17 hỗ trợ người dùng trong việc quản lý bến xe, cho phép xem, thêm và sửa đổi thông tin bến xe Cuối cùng, UC_18 cung cấp chức năng quản lý tuyến xe, cho phép người dùng xem, thêm, sửa và chặn các tuyến xe khi cần thiết.

UC_18.1 Forever Ban Chức năng chặn tuyến xe vĩnh viễn khi mà không xác định được ngày chạy để mở lại tuyến xe

UC_18.2 Temporary Ban Chức năng chặn tuyến xe tạm thời khi mà xác định được ngày mở cho lại cho tuyến

UC_19 Manage Bus Chức năng quản lý xe chạy cho tuyến (xem, thêm, sửa và chặn xe)

UC_20 Export file Chức năng để xuất ra thông tin khách hàng đi trong ngày

Bảng 2: Bảng mô tả sơ đồ usecase

Đặt tả một số Usecase chính

Goal Đăng nhập vào trang web

Pre-conditions Có tài khoản, mật khẩu

Post-conditions Success: Hệ thống thông báo đăng nhập thành công

Fail: Hệ thống thông báo sai tài khoản, mật khẩu

Main Flow 1 Người dùng chọn chức năng đăng nhập từ website

2 Hệ thống hiển thị input để nhập tài khoản, mật khẩu cũng như là button đăng nhập

3 Người dùng click vào đăng nhập

4 Hệ thống sẽ kiểm tra xem tài khoản, mật khẩu và hiện ra thông báo thành công

Exception Hệ thống kiểm tra thất bại và thông báo sai tài khoản mật khẩu

Open Issues Tài khoản khi đăng ký phải vào gmail để xác nhận mới đăng nhập được

Goal Chọn tuyến xe để đặt vé

Main Flow 1 Người dùng truy cập vào website

2 Người dùng sẽ thấy được giao diện trang chủ của trang web

3 Người dùng chọn nơi đi, nơi đến, loại vé (1 chiều/ khứ hồi) và chọn ngày đi, ngày về (khứ hồi)

4 Người dùng click vào Tìm kiếm

5 Hệ thống kiểm tra tuyến xe và chuyển sang UC_04.2 nếu kiểm tra đúng

Exception - Không chọn nơi đi, nơi đến, hệ thống sẽ hiển thị thông báo chọn nơi đi, nơi đến

Relationship “Child Usecase” bởi UC_04

Goal Chọn vị trí giường trên xe

Pre-conditions Thực hiện thành công UC_04.1

Main Flow 1 Người dùng chọn vị trí giường và giờ xe chạy

2 Người dùng click Tiếp tục

3 Hệ thống sẽ chuyển sang UC_04.3

Exception - Hệ thống sẽ hiển thị tuyến bị chặn trong từ ngày … đến ngày

- Người dùng không đặt được vị trí giường đã được đặt trước

- Người dùng chỉ đặt được tối đa 5 ghế

3.5.2.3 Usecase Input Information Individual (UC_04.3)

Goal Nhập thông tin cá nhân khi mua vé

Pre-conditions Thành công thực hiện UC_04.2

Main Flow 1 Người dùng nhập các thông tin cá nhân bắt buộc như: Họ và tên, số điện thoại, cmnd, gmail, địa chỉ, tỉnh/ thành phố, quận/ huyện

2 Người dùng tích vào chấp nhận điều kiện đặt vé

3 Người dùng click vào Tiếp tục

4 Hệ thống kiểm tra thông tin và chuyển sang UC_04.4

Exception - Người dùng không nhập thông tin hoặc nhập sai format sẽ hiển thị thông báo nhập sai

- Người dùng không chấp nhận điều khoản đặt vé, hệ thống cũng sẽ thông báo không chấp nhận điều khoản

Open Issues - Người dùng nhập sai thông tin gmail, số điện thoại thì sẽ không nhận được tin nhắn xác nhận mua vé

Bảng 6: Usecase Input Information Individual

Goal Thanh toán vé online

Pre-conditions - Thành công thực hiện UC_04.3

- Có tài khoản PayPal, VN Pay hoặc Zalo Pay

Main Flow 1 Người dùng chọn loại thanh toán (PayPal, VN Pay hoặc Zalo

2 Người dùng chọn thanh toán

3 Hệ thống hiển thị thanh toán, người dùng click thanh toán

4 Hệ thống hiển thị màn hình đang xử lý, và hiện thông báo khi xử lý xong

Exception - Người dùng không chọn loại thanh toán mà thanh toán, hệ thống sẽ hiển thị thông báo chọn loại thanh toán

- Thông báo đặt vé thất bại

- Hệ thống hiển thị đặt vé thất bại

Name Tra cứu hóa đơn

Goal Tra cứu những vé đã mua

2 Người dùng chọn hóa đơn

3 Trang web hiển thị vùng nhập mã vé và button đặt vé

4 Người dùng nhập mã vé và chọn chức năng tra cứu

5 Hệ thống xử lý và hiển thị thông tin của vé

Exception Lỗi người dùng nhập vé:

- Thông báo nhắc nhở nếu không nhập mã vé hoặc nhập mã sai

Bảng 8: Usecase tra cứu hóa đơn

Goal Thành viên có thể thay đổi mật khẩu nếu muốn

Pre-conditions Khách đã đăng nhập vào website với vai trò thành viên với vai trò thành viên

2 Người dùng đăng nhập vào website, chọn chức năng đổi mật khẩu

3 Người dùng nhập mật khẩu cũ, mật khẩu mới và nhập lại mật khẩu mới, sau đó nhấn vào đổi mật khẩu

4 Hệ thống xử lý và hiển thị thành công

Exception Lỗi người dùng đổi mật khẩu:

- Thông báo nhắc nhở nếu không nhập gì cả hoặc nhập sai mật khẩu cũ hoặc nhập lại mật khẩu cũ không giống mật khẩu cũ Lỗi server:

- Đổi mật khẩu thất bại

Bảng 9: Usecase đổi mật khẩu

Goal Thành viên có thể thay đổi thông tin cá nhân của mình nếu muốn

Pre-conditions Khách đã đăng nhập vào website với vai trò thành viên

2 Người dùng đăng nhập vào website, chọn chức năng đổi thông tin cá nhân

3 Người dùng nhập email, số điện thoại, địa chỉ, tỉnh

Bảng 10: Usecase đổi thông tin cá nhân

Goal Admin người có thể thêm bến

Pre-conditions Người mà đăng nhập vào website với vai trò là admin

Main Flow 1 Quản trị viên truy cập vào website

2 Quản trị viên đăng nhập vào website, chọn chức năng thêm bến

3 Quản trị viên nhập tỉnh, tên bến, chọn hình ảnh và nhập địa chỉ

Goal Admin người có thể sửa bến

2 Quản trị viên đăng nhập vào website, chọn chức năng sửa bến của bến cần sửa

3 Quản trị viên nhập tên bến, chọn hình ảnh và nhập địa chỉ

Goal Admin người có thể chặn tuyến xe cho đến khi họ mở lại

2 Quản trị viên đăng nhập vào website, chọn chức tuyến xe

3 Hệ thống hiển thị danh sách các tuyến xe, với các chức năng

3 Người dùng chọn chức năng chặn tuyến xe, chọn chặn vĩnh viễn sau đó nhấn chọn chặn

Bảng 13: Usecase cấm tuyến xe vô thời hạn

Goal Admin người có thể chặn tuyến xe trong khoảng thời gian

2 Quản trị viên đăng nhập vào website, chọn chức tuyến xe

3 Hệ thống hiển thị danh sách các tuyến xe, với các chức năng

3 Người dùng chọn chức năng chặn tuyến xe, chọn chặn một khoảng thời gian, sau đó chọn ngày chặn từ ngày … đến ngày … cuối cùng chọn chức năng chặn

Bảng 14: Usecase cấm tuyến xe thời vụ

Goal Admin người có thể thêm tuyến

2 Quản trị viên đăng nhập vào website, chọn chức năng thêm tuyến

3 Quản trị viên chọn nơi đi, nơi đến, nhập quãng đường, thời gian, giá vé

Goal Admin người có thể sửa tuyến

2 Quản trị viên đăng nhập vào website, chọn chức năng sửa tuyến

3 Quản trị viên nhập quãng đường, thời gian, giá vé

Goal Admin người có thể thêm xe

2 Quản trị viên đăng nhập vào website, chọn chức năng thêm xe

3 Quản trị viên chọn nơi đi, nơi đến, nhập tên xe, hãng xe, thời gian xuất phát

Goal Admin người có thể sửa xe

2 Quản trị viên đăng nhập vào website, chọn chức năng sửa xe

3 Quản trị viên nhập tên xe, hãng xe, giờ chạy

Goal Admin người có thể xuất lịch trình trong ngày

2 Quản trị viên đăng nhập vào website, chọn chức năng xuất lịch trình

3 Quản trị viên chọn tuyến xe mà muốn xuất

4 Hệ thống xử lý và down file excel

Bảng 19: Usecase xuất lịch trình

THIẾT KẾ PHẦN MỀM

Thiết kế hệ thống

Hình 7: Lược đồ tuần tự đăng nhập

Hình 8: Lược đồ tuần tự đăng ký

4.1.2.3 Chức năng xem thông tin tài khoản:

Hình 9: Lược đồ tuần tự xem thông tin tài khoản

4.1.2.4 Chức năng xem lịch sử mua vé:

Hình 10: Lược đồ tuần tự lịch sử mua vé

4.1.2.5 Chức năng đổi mật khẩu:

Hình 11: Lược đồ tuần tự đổi mật khẩu

4.1.2.6 Chức năng cập nhập thông tin:

Hình 12: Lược đồ tuần tự cập nhập thông tin

Hình 13: Lược đồ tuần tự mua vé

4.1.2.8 Chức năng xem hóa đơn:

Hình 14: Lược đồ tuần tự xem hóa đơn

4.1.2.9 Chức năng xem danh sách tài khoản:

Hình 15: Lược đồ tuần tự xem danh sách tài khoản

4.1.2.10 Chức năng thêm nhân viên:

Hình 16: Lược đồ tuần tự thêm nhân viên

4.1.2.11 Chức năng xem tuyến xe:

Hình 17: Lược đồ tuần tự xem tuyến xe

4.1.2.12 Chức năng thêm tuyến xe:

Hình 18: Lược đồ tuần tự thêm tuyến xe

4.1.2.13 Chức năng chỉnh sửa tuyến xe:

Hình 19: Lược đồ tuần tự chỉnh sửa tuyến xe

4.1.2.14 Chức năng xem bến xe:

Hình 20: Lược đồ tuần tự xem bến xe

Hình 21: Lược đồ tuần tự thêm bến xe

4.1.2.16 Chức năng chỉnh sửa bến:

Hình 22: Lược đồ tuần tự chỉnh sửa biến

4.1.2.17 Chức năng xuất lịch trình:

Hình 23: Lược đồ tuần tự xuất lịch trình

Hình 24: Lược đồ tuần tự thống kê

Thiết kế dữ liệu

4.2.1 Lược đồ thực thể (ERD)

Hình 25: Lược đồ thực thể ERD

Thiết kế giao diện

STT Tên giao diện Mô tả

UI_02 Đặt vé Trang để người dùng chọn tuyến xe, loại vé và ngày đi, ngày về (nếu có)

UI_03 Chọn giường Trang để người dùng chọn giờ khởi hành, vị trí giường

UI_04 Nhập thông tin người mua vé

Trang để nhập thông tin người mua vé

UI_05 Thanh toán Trang để người dùng thanh toán vé online

UI_06 Lịch trình Trang để người dùng xem những tuyến xe đang chạy

UI_07 Chi tiết tuyến xe Trang để người dùng xem chi tiết thông tin chuyến xe

UI_08 Điều khoản Trang hiển thị thông tin điều lệ, chính sách của nhà xe

UI_09 Tra cứu hóa đơn Trang để người dùng tìm kiếm hóa đơn

UI_10 Đăng nhập Trang để người dùng đăng nhập vào website

UI_11 Đăng ký Trang để người dùng đăng ký tài khoản

UI_12 Lịch sử đặt vé Trang để khách hàng xem danh sách vé đã mua

UI_13 Thông tin cá nhân Trang để khách hàng xem thông tin cá nhân

UI_14 Thông tin tài khoản Trang để khách hàng xem thông tin tài khoản

UI_15 Điểm thưởng Trang để khách hàng xem điểm thưởng

UI_16 Đăng xuất Trang để khách hàng đăng xuất ra khỏi website

UI_17 Dashboard Trang điều khiển của admin

UI_18 Quản lý bến xe Trang để quản lý bến xe

UI_19 Quản lý tài khoản Trang để quản lý tài khoản

UI_20 Quản lý tuyến xe Trang để quản lý tuyến xe

UI_21 Quản lý xe Trang để quản lý xe

UI_22 Xuất lịch trình Trang để xuất lịch trình đi tuyến xe

Bảng 20: Danh sách giao diện

Hình 26: Giao diện header trang chủ

Hình 27: Danh sách hiện tuyến phổ biến

Hình 28: Giao diện hình ảnh điểm đến

STT Tên đối tượng Loại đối tượng Mô tả

1 Logo Text Khi nhấn vào logo thì trang web sẽ quay về trang chủ giao diện của trang web

2 Trang chủ ListItem Khi nhấn vào Trang chủ thì trang web sẽ quay về trang chủ giao diện của trang web

3 Lịch trình ListItem Khi nhấn vào Lịch trình thì trang web sẽ chuyển sang trang Lịch trình

4 Điều khoản ListItem Khi nhấn vào Điều khoản thì trang web sẽ chuyển Điều khoản

5 Hóa đơn ListItem Khi nhấn vào Hóa đơn thì trang web sẽ chuyển Hóa đơn

6 Đăng nhập ListItem Khi nhấn vào Đăng nhập thì trang web sẽ chuyển sang trang Đăng nhập

7 Điểm đi Select Khi nhấn vào Chọn điểm đi thì sẽ show ra các nơi đi để chọn

8 Điểm đến Select Khi nhấn vào Chọn điểm đi thì sẽ show ra các nơi tới để chọn

9 Ngày đi Input Khi nhấn vào Chọn điểm đi thì sẽ hiện thời gian để chọn ngày đi

Nếu bạn chọn vé thứ hồi (12), trang web sẽ cho phép bạn chọn Ngày về Khi có vé thứ hồi, việc chọn Ngày về sẽ hiện ra thời gian để bạn lựa chọn.

11 Một chiều RadioTextBox Khi tích vào Một chiều thì web sẽ không cho chọn Ngày về

12 Thứ hồi RadioTextBox Khi tích vào Thứ hồi thì web sẽ cho chọn Ngày về

Khi bạn nhấn vào nút Tìm kiếm, hệ thống sẽ chuyển bạn đến trang Chọn chỗ 1 chiều nếu bạn chọn chế độ Một chiều; ngược lại, bạn sẽ được chuyển đến trang Chọn chỗ 2 chiều.

Bảng 21: Giao diện trang chủ

4.3.2.2 Giao diện trang Lịch trình:

Hình 29: Giao diện lịch trình

STT TÊN ĐỐI TƯỢNG LOẠI ĐỐI TƯỢNG MÔ TẢ

1 Tìm điểm đi Input, Icon Search Input để nhập tên nơi đi và icon search để tìm kiếm

2 Tìm bến tới Input, Icon Search Input để nhập tên nơi tới và icon search để tìm kiếm

3 Danh sách các tuyến xe (tuyến xe, loại xe, quãng đường, thời gian hành trình, giờ chạy, đặt vé)

Table, Icon Infor, Icon Book Ticket

Hiển thị danh sách thông tin các tuyến xe và có chức năng xem chi tiết cũng như đặt vé

Bảng 22: Giao diện lịch trình

Hình 30: Giao điện đặt vé

STT TÊN ĐỐI TƯỢNG LOẠI ĐỐI

1 Một chiều, Khứ hồi Radio, Label - Khi nhấn vào Một chiều thì sẽ không cho phép chọn ngày về

- Khi nhấn vào chọn Khứ hồi thì sẽ cho chọn ngày về

2 Điểm đi, Điểm đến Input, Label,

- Khi nhấn vào Input (điểm đi) sẽ hiện danh sách các điểm đi là các button

- Khi nhập điểm đi thì sẽ hiển thị danh sách điểm đi chứa ký tự nhập

- Khi nhấn vào Input (điểm tới) sẽ hiện

50 danh sách các điểm tới theo điểm đi là các button

- Khi nhập điểm tới thì sẽ hiển thị danh sách điểm tới chứa ký tự nhập

3 Ngày đi, Ngày về Input, Label - Khi nhấn vào Ngày đi sẽ hiển thị ra lịch để chọn ngày tháng năm đi

- Khi nhấn vào Ngày về sẽ hiển thị ra lịch để chọn ngày tháng năm về

4 Tìm chuyến xe Button, Input Khi nhấn vào sẽ chuyển đến UI_03

5 Ngày đi Input Khi nhấn vào Ngày đi sẽ hiển thị ra lịch để chọn ngày tháng năm đi

Bảng 23: Giao điện đặt vé

Hình 31: Giao diện danh sách giường nằm

1 Chọn ghế Unordered List Thể hiện người dùng đang ở bước chọn ghế

2 Ngày Page Hiển thị ngày đi

Tuyến Page Hiển thị tuyến đi

Chọn bến xe Page Hiển thị tuyến xe và giá vé

Giờ khởi hành Label, Select Hiển thị giờ chạy của xe để chọn Điểm lên xe Select Hiển thị điểm lên xe

3 Sơ đồ ghế Page Hiển thị tiêu đề

Tầng 1 Page, Table, Button Hiển thị số ghế button trong table của tầng 1

Tầng 2 Page, Table, Button Hiển thị số ghế button trong table của tầng 2

4 Trạng thái Label Hiển thị ghi chú trạng thái ghế

5 Quay lại Button Khi click vào sẽ quay trở lại trang UI_02

Tiếp tục Button Khi click vào sẽ chuyển sang UI_04

Bảng 24:Giao diện danh sách giường nằm

4.3.2.5 Nhập thông tin người mua vé:

Hình 32: Giao diện nhập thông tin khi đặt v

1 Thông tin khách hàng Unordered List Thể hiện người dùng đang ở bước chọn ghế

2 Thông tin khách hàng Page Hiển thị tiêu đề

Họ tên khách hàng Label, Input Nơi để nhập tên

Số điện thoại Label, Input Nơi để nhập số điện thoại Email Label, Input Nơi để nhập gmail

Label, Select Nơi để chọn tỉnh, quận huyện

3 Điều khoản & Lưu ý Page Hiển thị điều khoản đặt vé

4 Chấp nhận điều khoản Check Box, Label Để chấp nhận điều khoản đặt vé

5 Quay lại Button Khi click vào sẽ quay trở lại UI_03

6 Tiếp tục Button Khi click vào sẽ chuyển sang UI_05

Bảng 25: Giao diện nhập thông tin khi đặt vé

Hình 33: Chọn hình thức thanh toán

1 Thanh Toán Unordered List Thể hiện người dùng đang ở bước chọn ghế

2 Thông tin mua vé Page Hiển thị tiêu đề

Thông tin vé Page Hiển thị những thông tin về vé

Thông tin khách hàng mua vé

Page Hiển thị thông tin về khách hàng mua vé

3 Loại thanh toán Picture, Button Hiển thị những loại thanh toán

4 Quay lại Button Khi click vào sẽ quay lại

Thanh toán Button Khi click vào sẽ thanh toán

Bảng 26: Chọn hình thức thanh toán

4.3.2.7 Giao diện trang chi tiết tuyến xe:

Hình 34: Chi tiết tuyến xe

Page Hiển thị tên bến xe và địa chỉ

2 Thông tin tuyến xe Select, Label - Hiển thị thông tin của tuyến xe, khoảng thời gian và khoảng cách

- Có thể chọn cái tuyến xe khách

3 Ngày đi Input, Label - Hiển thị cũng như chọn ngày đi

4 Đặt vé Button - Khi click vào sẽ chuyển sang UI_02

5 Thông tin giờ chạy Table - Hiển thị thông tin chi tiết giờ đi, giờ đến và giá vé

Bảng 27: Chi tiết tuyến xe

4.3.2.8 Giao diện trang Điều khoản:

Hình 35: Giao diện trang Điều khoản

1 Điều khoản Page Hiển thị nội dung điều khoản của nhà xe

Bảng 28: Giao diện trang Điều khoản

4.3.2.9 Giao diện trang Hóa đơn:

Hình 36: Giao diện truy xuất thông tin vé theo điều kiện

1 Tra cứu hóa đơn Page - Hiển thị tiêu đề

2 Tuyến xe Label, Input - Hiển thị và chọn tuyến xe

3 Ngày Label, Input - Hiển thị và chọn ngày đi

Giờ chạy Label, Select - Hiển thị và chọn giờ chạy

4 Gmail Label, Input - Nhập gmail

5 Số điện thoại Label, Input - Nhập số điện thoại

Bảng 29: Giao diện truy xuất thông tin vé

4.4.2.10 Giao diện trang Đăng nhập:

Hình 37: Giao diện trang Đăng nhập

1 Đăng nhập Page - Hiển thị tiêu đề

2 Tên tài khoản Label, Input - Nhập tên tài khoản

3 Mật khẩu Label, Input - Nhập mật khẩu

4 Đăng nhập Button - Khi click vào sẽ đăng nhập vào website

5 Đăng ký Anchor - Khi click vào sẽ chuyển sang UI_11

6 Cancel Button, Icon - Dóng đăng nhập modal

Bảng 30: Giao diện trang Đăng nhập

4.3.2.11 Giao diện trang Đăng ký:

Hình 38: Giao diện trang Đăng ký

1 Đăng ký Page - Hiển thị tiêu đề

2 Tên tài khoản Label, Input - Nhập tên tài khoản

3 Mật khẩu Label, Input - Nhập mật khẩu

4 Số điện thoại Label, Input - Nhập số điện thoại

5 CMND Label, Input - Nhập cmnd

6 Gmail Label, Input - Nhập gmail

Label, Select - Chọn tỉnh, quận

8 Đăng ký Button - Khi click vào sẽ đăng ký tài khoản

9 Đăng nhập Anchor - Khi click vào chuyển sang UI_10

10 Đóng modal Button, Icon - Khi click vào đóng đăng ký modal

Bảng 31: Giao diện trang Đăng ký

4.3.2.12 Giao diện trang Lịch sử mua vé:

Hình 39: Giao diện trang Lịch sử mua vé

1 Lịch sử đặt vé Page - Hiển thị tiêu đề

2 Đặt vé Button - Khi click vào sẽ chuyển sang UI_02

3 Từ khóa Label, Input - Nhập mã vé

4 Thời gian Label, Input - Chọn ngày mua vé

5 Tuyến đường Label, Input - Chọn ngày mua vé

6 Trạng thái Label, Select - Chọn trạng thái vé

7 Làm mới Button - Khi click vào sẽ làm mới lại thông tin ở table

8 Danh sách thông tin vé

Table, Icon - Hiển thị danh sách thông tin vé, và chức năng hoàn trả vé

Bảng 32: Giao diện trang Lịch sử mua vé

4.3.2.13 Giao diện trang Thông tin đăng nhập:

Hình 40: Giao diện trang Thông tin đăng nhập

1 Thông tin tài khoản Page - Hiển thị tiêu đề

2 Thông tin đăng nhập Page - Hiển thị tiêu đề mục

Tài khoản Page, Label - Hiển thị tài khoản

Mật khẩu Page, Label - Hiển thị mật khẩu Đổi mật khẩu Icon, Page - Khi click vào sẽ hiển thị đổi mật khẩu

3 Đổi mật khẩu Page - Hiển thị tiêu đề mục

Mật khẩu cũ Label, Input, Icon - Nhập mật khẩu cũ

- Khi click vào icon sẽ show mật khẩu

Mật khẩu mới Label, Input, Icon - Nhập mật khẩu mới

Xác nhận mật khẩu mới

Label, Input, Icon - Nhập lại mật khẩu mới

Bảng 33: Giao diện trang Thông tin đăng nhập

4.3.2.14 Giao diện trang Thông tin cá nhân:

Hình 41: Giao diện trang Thông tin cá nhân

1 Thông tin cá nhân Page - Hiển thị tiêu đề

2 Thông tin cá nhân Page - Hiển thị tiêu đề mục

Họ và tên Label - Hiển thị họ và tên

Email Label - Hiển thị gmail

Số điện thoại Label - Hiển thị số điện thoại

CMND Label - Hiển thị cmnd

Avata Icon - Hiển thị icon người dùng

3 Thông tin địa chỉ Page - Hiển thị tiêu đề mục Địa chỉ Label, Input - Hiển thị địa chỉ, nhập địa chỉ

Thành phố Label, Input, Select - Hiển thị thành phố, chọn thành phố

Huyện Label, Input, Select - Hiển thị huyện, chọn huyện

4 Lưu Button - Khi click vào lưu những thay đổi

Bảng 34: Giao diện trang Thông tin cá nhân

4.3.2.15 Giao diện trang Điểm thưởng:

Hình 42: Giao diện trang Tài khoản sau khi admin đăng nhập

Header 3 - Hiển thị tiêu đề

Page, Table - Hiển thị chính sách về điểm thưởng

3 Điểm thưởng Page - Hiển thị thông báo

4 Cấp độ thành viên Page, Label, Icon - Hiển thị cấp độ của khách hàng

Tổng điểm tích lũy Page, Label, Icon - Hiển thị tổng điểm tích lũy

Bảng 35: Giao diện trang Tài khoản sau khi admin đăng nhập

4.3.2.16 Giao diện trang Dashboard của Admin:

Hình 43: Giao diện trang Dashboard

1 Tài khoản Icon, Label - Hiển thị số lượng tài khoản

2 Bến xe Icon, Label - Hiển thị số lượng bến xe

3 Tuyến xe Icon, Label - Hiển thị số lượng tuyến xe

4 Xe Icon, Label - Hiển thị số lượng xe

5 Biểu đồ Chart - Hiển thị doanh thu từng tháng trong năm

6 Doanh thu Icon, Label - Hiển thị thông tin doanh thu của năm

7 Năm Button, Icon - Khi click vào sẽ lấy dữ liệu theo năm

Bảng 36: Giao diện trang Dashboard

4.3.2.17 Giao diện trang Quản lý tài khoản:

Hình 44: Giao diện trang Quản lý tài khoản

1 Quản lý tài khoản Icon, Label - Hiển thị tiêu đề

Table, Icon - Hiển thị danh sách tài khoản

- Khi click vào icon vẽ chuyển sang chỉnh sửa tài khoản

3 Thêm tài khoản Icon, Label - Khi click vào sẽ chuyển sang thêm tài khoản

Bảng 37: Giao diện trang Bến

4.3.2.18 Giao diện trang Quản lý bến xe:

Hình 45: Giao diện trang Xe

STT TÊN ĐÔI TƯỢNG LOẠI ĐỐI TƯỢNG MÔ TẢ

1 Biểu đồ thể hiện doanh thu

Header - Hiển thị tiêu đề

2 Biểu đồ Chart - Hiển thị doanh thu bến theo biểu đồ

3 Bến xe Icon, Label, Select - Hiển thị, chọn bến xe

4 Doanh thu Label, Icon - Hiển thị thông tin doanh thu của bến

5 Năm Button, Icon - Khi click vào dữ liệu thay đổi theo năm

6 Quản lý bến xe Label, Icon - Hiển thị tiêu đề mục

Input, Button - Tìm kiếm bến xe theo tên tỉnh

8 Danh sách bến xe Table, Button, Icon - Hiển thị danh sách bến xe

- Khi click vào button sẽ chuyển sang chỉnh sửa bến xe

9 Thêm bến xe Button, Icon - Khi click vào button sẽ chuyển sang thêm bến xe

Bảng 38: Giao diện trang Quản lý bến xe

4.3.2.19 Giao diện trang Xuất lịch trình sau khi admin đăng nhập:

Hình 46: Giao diện trang Xuất lịch

1 Biểu đồ thể hiện doanh thu

Header - Hiển thị tiêu đề mục

2 Biểu đồ Chart - Hiển thị doanh thu theo biểu đồ

3 Doanh thu tuyến Label, Select - Hiển thị năm và tuyến xe, chọn tuyến xe

Label, Icon - Hiển thị thông tin doanh thu của tuyến

5 Năm Button - Khi click vào sẽ lấy dữ liệu doanh thu theo tuyến của năm

6 Quản lý tuyến xe Label, Icon - Hiển thị tiêu đề mục

Input, Button - Tìm kiếm tuyến xe theo thành phố

8 Danh sách tuyến xe Table, Button, Icon - Hiển thị danh sách tuyến xe

- Khi click vào button sẽ chuyển sang chỉnh sửa tuyến xe

9 Thêm tuyến xe Button, Icon - Khi click vào sẽ chuyển sang thêm tuyến xe

Bảng 39: Giao diện trang Xuất lịch

4.3.2.20 Giao diện trang quản lý xe

Hình 47: Giao diện trang quản lý xe

1 Quản lý xe Label, Icon - Hiển thị tên tiêu đề

2 Danh sách xe Table, Button, Icon - Hiển thị danh sách xe

- Khi click vào button sẽ chuyển sang chỉnh sửa xe

3 Thêm xe Button, Icon - Khi click vào sẽ chuyển sang thêm xe

Bảng 40: Giao diện trang quản lý xe

CÀI ĐẶT VÀ KIỂM THỬ

Cài đặt

- Cài đặt NodeJS phiên bản mới (LTS hoặc bản hiện tại https://nodejs.org/en/download/)

- Cài đặt Visual Studio Code Link cài đặt: https://code.visualstudio.com/download

- Cài đặt Eclipse: https://www.eclipse.org/downloads/

+ Backend: https://github.com/letienhoa/KLTNBackEnd

+ Frontend: https://github.com/letienhoa/KLTN

To verify the correct installation of Node.js and NPM, first check the MySQL database by entering commands in the Command Prompt or Windows PowerShell on Windows, or in the Terminal on Mac and Linux.

Hình 48: CMD kiểm tra phiên bản node

Các bước chạy hệ thống

Các bước để chạy trang web:

- Vào thư mục Back-end: chạy trên Eclipse, chuột phải chọn Maven => Update Project sau đó chuột phải chọn Run as Spring Boot App

- Vào thư mục Font-end: mở bằng Visual Studio Code, Terminal => new

Terminal, sau đó nhập: npx ng serve –o để chạy

Kiểm thử

Trang người dùng chưa đăng nhập:

Test Steps Test Data Expected

Chuyển sang trang chọn chỗ

Chọn tuyến thứ hồi thất bại

Thông báo không chọn ngày về

72 thu hoi_2 hồi thành công

- Thứ hồi: true trang chọn chỗ chọn chỗ

Bảng 41: Chức năng Chọn tuyến

Chọn chỗ 1 chiều thất bại

Hiển thị thông báo chưa chọn ghế

Chọn chỗ 1 chiều thành công

Chuyển sang trang Điền thông tin khách hàng

Chuyển sang trang khách hàng

- Tuyến: Lâm Đồng – TP.HCM

- Giờ khởi hành: 18:00 báo chưa chọn ghế chưa chọn ghế

1 Chọn ghế cho tuyến đi

1 Chọn ghế cho tuyến về

Chọn chỗ 2 chiều thành công

1 Chọn ghế cho tuyến đi

2 Chọn ghế cho tuyến về

Chuyển sang trang điền thông tin khách hàng

Bảng 42: Chức năng Chọn chỗ

- Chức năng Lưu thông tin khách hàng khi đặt vé:

Dien thong tin khach hang

_1 Điền thông tin khách hàng thất bại

Hiển thị thông báo Xin hãy điền đầy đủ thông tin

Dien thong tin khach Điền thông tin khách hàng

- Họ tên: Lê Kim Đỉnh

Hiển thị thông báo Xin hãy điền thông tin

6 Chọn tiếp tục kimdinhgmail.co m

Tuy Hòa đúng format đúng format

_3 Điền thông tin khách hàng thất bại

5 Nhập Quận/ huyện Chọn tiếp tục

Hiển thị thông báo chưa xác nhận điều khoản

_4 Điền thông tin khách hàng thành công

- Xác nhận điều khoản: check

Chuyển sang trang thanh toán

Bảng 43: Chức năng Lưu thông tin khách hàng khi đặt vé

- Chức năng Tìm kiếm hóa đơn:

Tra cứu hóa đơn thất bại

-Mã vé: Hiển thị thông báo Nhập sai mã

Hiển thị thông báo Nhập sai mã

Tra cứu hóa đơn thất bại

-Mã vé: 123456 Hiển thị thông báo Nhập sai mã

Hiển thị thông báo Nhập sai mã

Tra cứu hóa đơn thành công

-Mã vé: vuf2eh65yylekim dinh1412@gmail com

Hiển thị thông tin của vé

Bảng 44: Chức năng Tìm kiếm hóa đơn

Trang người dùng đã đăng nhập:

- Chức năng tìm kiếm lịch sử mua vé:

Lịch sử mua vé thành công

Hiển thị thông tin lịch sử của tuyến đó

Lịch sử mua vé thành công

Hiển thị thông tin lịch sử của tuyến đó

Bảng 45: Chức năng tìm kiếm lịch sử mua vé

- Chức năng Đổi mật khẩu:

Doi mat khau_1 Đổi mật khẩu thất bại

Hiển thị thông báo chưa nhập dữ liệu

Doi mat khau_2 Đổi mật khẩu thất bại

4 Nhập lại mật khẩu mới

Hiển thị thông báo mật khẩu xác nhận không khớp với mật khẩu mới

Doi mat khau_3 Đổi mật khẩu thành công

Hiển thị thông báo thành công

4 Nhập lại mật khẩu mới

Bảng 46: Chức năng Đổi mật khẩu

- Chức năng Đổi thông tin cá nhân:

Doi thong tin ca nhan_1 Đổi thông tin cá nhân

Hiển thị thông báo chưa nhập dữ liệu

Doi thong tin ca nhan_2 Đổi mật khẩu thất bại

Hiển thị thông báo email không đúng format

Doi thong tin ca nhan_2 Đổi mật khẩu thành công

Bảng 47: Chức năng Đổi thông tin cá nhân

Hiển thị thông báo chưa nhập liệu

- Địa chỉ: Minh Khai - P.Phố Mới

- TP.Lào Cai - Tỉnh Lào Cai

Bảng 48: Chức năng Thêm Bến

- Hình ảnh: https://drive.goo gle.com/uc?id=1 RTbBsk2yyNepl 25B1VVRrIKJb wB_3vgx

Bảng 49: Chức năng Sửa bến

5 Nhập thời gian hành trình

Bảng 50: Chức năng Thêm Tuyến

3 Nhập thời gian hành trình

Bảng 51: Chức năng Sửa bến

- Tên xe: LC- TP.HCM

Bảng 52: Chức năng Thêm xe

- Tên xe: LC- TP.HCM

Bảng 53: Chức năng Sửa xe

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

Tiêu đề	Xây Dựng Ứng Dụng Đặt Vé Xe Có Hỗ Trợ Thanh Toán Online
Trường học	Khoa Đào Tạo Chất Lượng Cao
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Đồ Án Tốt Nghiệp

Định dạng
Số trang	95
Dung lượng	3,73 MB