CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. Khái niệm ReactJs ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook nhằm tạo ra các ứng dụng web nhanh và hiệu quả với mã nguồn. Mục đích chính của ReactJS là khiến cho website hoạt động mượt mà, khả năng mở rộng cao và đơn giản. DOM thực tế: Đây là biểu diễn của cấu trúc HTML thực sự trên trang web [3].
Virtual DOM Là một bản sao nhẹ của DOM thực sự được lưu trữ trong bộ nhớ của máy tính. Nó là một cây DOM được tạo và duyệt bởi React để theo dõi sự thay đổi của component [3]. Quy trình làm việc: Khi state hoặc props của một component thay đổi, React tạo ra một cây Virtual DOM mới. Sau đó, React so sánh cây Virtual DOM mới với cây Virtual DOM trước đó (trước khi thay đổi state hoặc props).
React xác định ra những thay đổi (diffing) giữa hai cây và tạo ra một danh sách các thao tác cần thực hiện để đồng bộ hóa DOM thực tế với cây Virtual DOM mới. Cuối cùng, React chỉ cập nhật DOM thực tế trong những vị trí cần thay đổi thay vì cập nhật toàn bộ DOM [3]. Lợi ích: Hiệu suất: Thay vì cập nhật toàn bộ DOM, React chỉ cập nhật những phần thay đổi, giảm thiểu tác động đến hiệu suất. Tính nhất quán: Sử dụng Virtual DOM giúp đảm bảo rằng trạng thái của ứng dụng được bảo toàn mà không cần cập nhật toàn bộ trang.
JSX JSX (JavaScript XML) là một phần quan trọng của React, một thư viện JavaScript phổ biến được phát triển bởi Facebook để xây dựng giao diện người dùng (UI) cho ứng dụng web. JSX giúp bạn mô tả giao diện người dùng một cách dễ đọc và dễ hiểu bằng cách kết hợp cú pháp giống HTML với JavaScript [3]. Component: Một "component" là một khối xây dựng độc lập và tái sử dụng trong phát triển ứng dụng web. Components là một cách để bạn chia giao diện người dùng thành các phần nhỏ và độc lập để quản lý chúng dễ dàng hơn.
Functional Components: - Được định nghĩa thông qua các hàm JavaScript. - Không có trạng thái (state) và các phương thức vòng đời của riêng chúng. - Thường được sử dụng cho các components đơn giản, không có logic phức tạp. Class Components: - Được định nghĩa thông qua các lớp ES6.
- Có thể chứa trạng thái (state) và các phương thức vòng đời của riêng chúng. - Thường được sử dụng cho các components có độ phức tạp cao, chứa nhiều logic. Props: Props là viết tắt của "properties" (thuộc tính) và là một cách để truyền dữ liệu từ một component cha xuống các component con. Props là không thay đổi (immutable), có nghĩa là một component con không thể thay đổi giá trị của props mà nó nhận được.
Được truyền dưới dạng các thuộc tính của các thẻ React trong JSX. State: 4 State là dữ liệu mà một component có thể giữ và theo dõi trong quá trình thời gian chạy. State chỉ tồn tại trong các component lớp (class components), và có thể được khởi tạo trong hàm constructor. Khi state thay đổi, React sẽ tự động render lại component để hiển thị thông tin mới 1.
React Lifecycle: Lifecycle (vòng đời) là chuỗi các phương thức mà một component đi qua từ khi được tạo ra đến khi bị hủy. Các phương thức này cho phép bạn thực hiện các hành động cụ thể tại các điểm khác nhau trong vòng đời của một component. Điều này giúp bạn quản lý các tác vụ như khởi tạo trạng thái, lấy dữ liệu từ máy chủ, cập nhật giao diện người dùng, và nhiều hơn nữa [3]. Mounting Constructor(): Được gọi khi component được khởi tạo.
Bạn có thể khởi tạo state và bind các phương thức ở đây. Render(): Trả về JSX để hiển thị giao diện người dùng. ComponentDidMount(): Được gọi sau khi component đã được lắp đặt vào DOM. Thường được sử dụng để thực hiện các tác vụ sau khi component đã xuất hiện trên trang.
Updating ShouldComponentUpdate(nextProps, nextState): Cho phép bạn kiểm soát việc cập nhật component bằng cách trả về true hoặc false. Mặc định là true. Render(): Được gọi khi state hoặc props thay đổi. ComponentDidUpdate(prevProps, prevState): Được gọi sau khi component đã cập nhật.
Thường được sử dụng để thực hiện các tác vụ sau khi cập nhật. Unmounting ComponentWillUnmount(): Được gọi trước khi component bị hủy bỏ khỏi DOM. Thường được sử dụng để dọn dẹp tài nguyên không còn cần thiết. Error Handling Static GetDerivedStateFromError(error): Được sử dụng để cập nhật state khi có lỗi trong các phương thức con của component [3].
Giới thiệu C# C# là một ngôn ngữ lập trình đa năng được phát triển bởi Microsoft. Nó được thiết kế để chạy trên nền tảng .NET Framework và. C# chủ yếu được sử dụng cho phát triển ứng dụng dựa trên Windows, từ ứng dụng máy tính đến ứng dụng di động và web [6]. Đặc điểm: Ngôn ngữ lập trình hướng đối tượng (OOP): C# hỗ trợ các khái niệm của lập trình hướng đối tượng như lớp, đối tượng, kế thừa, và đa hình.
An toàn với kiểu (Type-safe): Có kiểm soát kiểu dữ liệu tại thời điểm biên dịch, giảm lỗi runtime. Thu gọn (Modern): C# được cập nhật liên tục để hỗ trợ các tính năng mới của ngôn ngữ lập trình và công nghệ. C# được sử dụng rộng rãi trong phát triển ứng dụng Windows, ứng dụng di động (sử dụng Xamarin), và phát triển trò chơi (sử dụng Unity) [6]. Giới thiệu ASP.NET là một framework phát triển ứng dụng web được phát triển bởi Microsoft [4].
Nó cung cấp một cách mạnh mẽ để xây dựng các ứng dụng web và dịch vụ web chất lượng cao. Các phiên bản ASP.NET Web Forms: Mô hình lập trình sự kiện và kiểm soát cho phát triển nhanh chóng.NET MVC (Model-View-Controller): Mô hình này tách biệt ứng dụng thành các phần khác nhau, dễ dàng kiểm soát và kiểm thử.NET Web API: Cho phép xây dựng các dịch vụ web RESTful.NET Core: Phiên bản dành cho cross-platform và open-source [1]. Giới thiệu Microsoft SQL Server là một hệ quản trị cơ sở dữ liệu quan hệ (Relational Database Management System - RDBMS) do Microsoft phát triển. Nó cung cấp một loạt các tính năng và công cụ mạnh mẽ để quản lý và tương tác với dữ liệu trong môi trường doanh nghiệp [6].
Quản lý cơ sở dữ liệu quan hệ SQL Server được thiết kế để lưu trữ và quản lý dữ liệu trong các bảng quan hệ (tables) theo mô hình quan hệ. Hỗ trợ ngôn ngữ truy vấn SQL (Structured Query Language) để thực hiện các thao tác như truy vấn, chèn, cập nhật, và xóa dữ liệu [6]. Hiệu suất và tính dự trữ Cung cấp các công cụ và cơ chế tối ưu hóa để đảm bảo hiệu suất cao khi thao tác với cơ sở dữ liệu. Hỗ trợ các kỹ thuật như chỉ mục (indexing), lập lịch nhiệm vụ (job scheduling), và xử lý đồng thời để tối ưu hóa tương tác với dữ liệu.
Bảo mật SQL Server có các tính năng bảo mật mạnh mẽ để bảo vệ dữ liệu, bao gồm quản lý quyền (permissions), mã hóa dữ liệu, và kiểm soát truy cập. Dịch vụ đám mây SQL Server có sẵn trên các nền tảng đám mây như Microsoft Azure SQL Database, cung cấp linh hoạt trong triển khai và quản lý cơ sở dữ liệu [6]. 8 CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG 2. Khảo sát hiện trạng 2.
Website VeXeRe - Website VeXeRe (https://vexere. Website Vexere - Giới thiệu chung: vexere.com là hệ thống cho phép người dùng có thể tìm kiếm, đặt vé xe khách máy bay hoặc thuê xe, ngoài ra còn phục vụ nhu cầu mở bán vé xe của các nhà xe lớn nhỏ trên toàn quốc. - Các chức năng chính: +Tìm kiếm chuyến đi + Đặt vé xe + Quản lý đơn hàng + Thuê xe - Ưu điểm: Là hệ thống hợp tác với nhiều nhà xe nên khách hàng có nhiều sự lựa chọn để tìm kiếm chuyến đi và tiến hành đặt mua vé, có nhiều sự kiện giảm giá nhân các dịp lễ hoặc ưu đãi từ các nhà xe nên thu hút được lượng lớn khách hàng. Có bộ lọc chuyến đi bao gồm theo giờ đi, điểm đón, điểm trả, hàng ghế… nên tối ưu hóa việc tìm kiếm chuyến đi cho khách hàng.
- Khuyết điểm: 9 + Hệ thống chưa sử dụng việc phân trang một cách tối ưu nhất, nên khi lọc chuyến đi phải kéo lên trên màn hình chính để thực hiện lọc, làm giảm cảm giác tương tác của người dùng. + Phần chân trang chiếm quá lớn kích thước màn hình làm cho hệ thống không được đẹp mắt. Footer của Vexere 10 2. Website MeGaBus - Website MeGaBus (https://megabus.
Website Megabus - Giới thiệu chung: megabus.com là hệ thống cho phép khách hàng tìm kiếm đặt xe khách, đặt phòng hoặc taxi trên toàn quốc. - Các chức năng chính: + Tìm kiếm chuyến đi + Đặt vé xe / phòng / thuê taxi + Kiểm tra đặt xe - Ưu điểm: Tra cứu chuyến đi hoặc phòng một cách nhanh chóng và có nhiều sự lựa chọn cho khách hàng. Áp dụng tốt việc phân trang cùng với lọc chuyến đi tăng trải nghiệm người dùng - Khuyết điểm: Không hỗ trợ hình thức thanh toán online mà chỉ gửi xác nhận qua gmail. Website EasyBook Hình 2.
Website EasyBook - Giới thiệu chung: EasyBook.com là hệ thống đặt xe, phà, tàu lửa không chỉ trong nước mà còn các nước ở Đông Nam Á. - Các chức năng chính + Tìm kiếm, đặt vé xe buýt, tàu hỏa trong nước + Tìm kiếm, đặt vé phà các nước trong khu vực Đông Nam Á - Ưu điểm: Là hệ thống cho cả các nước trong khu vực Đông Nam Á nên phù hợp cho khách hàng tìm kiếm phương án di chuyển đến các điểm du lịch. Hỗ trợ phương thức thanh toán trực tuyến, chấp nhận nhiều đơn vị tiền tệ. - Khuyết điểm: Tuy có thể tìm kiếm các chuyến đi đa quốc gia nhưng lại rất hạn chế chuyến đi, nên ảnh hưởng đến trải nghiệm người dùng khi thực hiện tra cứu nhiều lần mới tìm được chuyến đi phù hợp 12 2.
Xác định yêu cầu 2. Các chức năng yêu cầu nghiệp vụ Bảng 2. Các chức năng nghiệp vụ STT Tên Chức Năng Người Sử Dụng 1 Đăng ký Người dùng, nhà xe. 2 Đăng nhập Người dùng, nhà xe, admin 3 Cập nhật mật khẩu Người dùng, nhà xe.
4 Đăng xuất Người dùng, nhà xe, admin 5 Tìm kiếm chuyến đi Người dùng 6 Mua vé xe Người dùng 7 Đánh giá xe Người dùng 8 Cập nhật thông tin profile Người dùng 9 Quản lý xe của nhà xe Nhà xe 10 Chỉnh sửa thông tin chuyến đi Nhà xe 11 Thống kê doanh thu Nhà xe 12 Quản lý tài khoản Admin 13 Quản lý nhà xe Admin 14 Quản lý các điểm dừng đỗ, bến xe Admin 15 Gửi thông báo realtime Người dùng, nhà xe, admin 13 2. Các chức năng yêu cầu hệ thống Bảng 2.