CHƯƠNG 1. ReactJS: ReactJS là một thư viện JavaScript phát triển bởi Facebook. Nó được sử dụng rộng rãi để xây dựng giao diện người dùng cho ứng dụng web hiện đại. Dưới đây là một số khái niệm cơ bản và cơ sở lý thuyết quan trọng về ReactJS: Components (Thành phần): ReactJS xây dựng giao diện bằng cách chia ứng dụng thành các thành phần độc lập.
Mỗi thành phần là một khối xây dựng có thể tái sử dụng, chứa logic và giao diện riêng của nó. Virtual DOM (DOM ảo): ReactJS sử dụng một cơ chế gọi là Virtual DOM để tối ưu hóa hiệu suất của ứng dụng. Virtual DOM là một biểu đồ ảo của cây DOM thực tế và giúp React cập nhật DOM thực tế chỉ khi cần thiết. JSX (JavaScript XML): JSX là một cú pháp mở rộng của JavaScript, cho phép bạn viết mã HTML trong mã JavaScript.
JSX giúp xây dựng các thành phần UI trong React một cách dễ đọc và dễ hiểu hơn. State (Trạng thái): State là dữ liệu mà một thành phần React có thể theo dõi và cập nhật. Khi trạng thái thay đổi, React sẽ tự động cập nhật giao diện người dùng để phản ánh thay đổi đó. Props (Thuộc tính): Props là dữ liệu được truyền từ thành phần cha đến thành phần con trong React.
Props giúp truyền dữ liệu giữa các thành phần và làm cho ứng dụng có tính tái sử dụng cao. Lifecycle (Vòng đời): Mỗi thành phần React có một vòng đời riêng, với các phương thức như componentDidMount, componentDidUpdate, và componentWillUnmount. Các phương thức này cho phép bạn thực hiện các tác vụ như tải dữ liệu, quản lý trạng thái và làm sạch tài nguyên khi thành phần được tạo ra và hủy bỏ. Trang | 9 Event Handling (Xử lý sự kiện): ReactJS cho phép bạn xử lý sự kiện người dùng bằng cách sử dụng các hàm xử lý sự kiện.
Ví dụ, bạn có thể xử lý sự kiện nhấp chuột hoặc nhập liệu từ bàn phím. Router (Định tuyến): Để quản lý định tuyến và chuyển đổi giữa các trang trong ứng dụng web, React thường sử dụng thư viện định tuyến như React Router. Flux và Redux: Flux và Redux là các kiến thức được sử dụng để quản lý trạng thái ứng dụng trong React. Redux là một thư viện quản lý trạng thái phổ biến được sử dụng trong nhiều ứng dụng React lớn.
Hooks: React Hooks là một tính năng được giới thiệu trong React 16.8, cho phép bạn sử dụng trạng thái và các tính năng React khác trong các thành phần hàm (functional components) thay vì chỉ trong các thành phần lớp (class components). NestJS: NestJS là một framework phát triển ứng dụng web và API cho Node.js, xây dựng trên cơ sở TypeScript hoặc JavaScript. Nó được thiết kế để cung cấp một cơ sở mạnh mẽ cho việc phát triển các ứng dụng server-side hiện đại. Dưới đây là một số khái niệm cơ bản và cơ sở lý thuyết về NestJS: Controllers (Bộ điều khiển): Controllers trong NestJS là các lớp hoặc functions chịu trách nhiệm xử lý các yêu cầu HTTP đến ứng dụng.
Chúng là nơi xử lý logic của ứng dụng và trả về các kết quả cho client. Providers (Cung cấp dịch vụ): Providers là các thành phần trong NestJS cung cấp dịch vụ và logic cho ứng dụng, chẳng hạn như các dịch vụ của database, xử lý logic kinh doanh, hoặc thậm chí là các service tiện ích. Modules (Mô-đun): Modules trong NestJS là các phần tổ chức của ứng dụng, chứa các controllers, providers, và có thể được sử dụng để xác định các thành phần phụ thuộc và quy tắc định tuyến của ứng dụng. Trang | 10 Middleware (Phần mềm trung gian): Middleware là các hàm được thực hiện trước khi yêu cầu đến controller hoặc sau khi yêu cầu rời khỏi controller.
Chúng có thể được sử dụng để xử lý logic như xác thực, ghi log, hoặc thay đổi yêu cầu và phản hồi. Pipes (Ống): Pipes trong NestJS là các bộ lọc dữ liệu có thể được sử dụng để kiểm tra, biến đổi và xác định dữ liệu đầu vào trước khi nó được gửi đến controller. Guards (Bảo vệ): Guards là các phần tử cho phép hoặc từ chối yêu cầu dựa trên các điều kiện nhất định, chẳng hạn như quyền truy cập hoặc xác thực người dùng. Interceptors (Người can thiệp): Interceptors là các bộ lọc thực hiện trước và sau khi controller xử lý yêu cầu.
Chúng có thể sử dụng để ghi log, ghi đoạn mã thời gian thực thi và thực hiện các thao tác tùy chỉnh khác trên yêu cầu và phản hồi. Dependency Injection (Cung cấp dịch vụ): NestJS sử dụng Dependency Injection để quản lý và cung cấp các thành phần và dịch vụ cho các controllers và providers. Điều này giúp quản lý phụ thuộc và làm cho ứng dụng dễ kiểm tra. Prisma (hoặc TypeORM): NestJS thường sử dụng thư viện như Prisma hoặc TypeORM để tương tác với cơ sở dữ liệu và quản lý mô hình dữ liệu.
Middleware Express: NestJS có khả năng tích hợp với các middleware của Express để mở rộng chức năng của ứng dụng. MariaDB: MariaDB là một hệ quản trị cơ sở dữ liệu (DBMS) mã nguồn mở, phát triển dựa trên nguồn gốc của MySQL. Nó được thiết kế để cung cấp một giải pháp quản lý cơ sở dữ liệu mạnh mẽ, an toàn và hiệu quả cho các ứng dụng và dự án khác nhau. Dưới đây là một số thông tin cơ bản về MariaDB: Trang | 11 Mã nguồn mở: MariaDB là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở, điều này có nghĩa là mã nguồn của nó có thể được xem xét, sửa đổi và phân phối miễn phí.
Điều này tạo điều kiện thuận lợi cho sự phát triển và tùy chỉnh. Khả năng tương thích: MariaDB được thiết kế để tương thích ngược với MySQL, có nghĩa là các ứng dụng và dự án sử dụng MySQL có thể chuyển sang MariaDB mà không gặp vấn đề lớn. Đặc điểm kỹ thuật: MariaDB hỗ trợ nhiều đặc điểm kỹ thuật quan trọng như hỗ trợ ACID (Atomicity, Consistency, Isolation, Durability), indexing mạnh mẽ, xác thực và quyền truy cập, xử lý truy vấn phức tạp, và nhiều loại dữ liệu khác nhau. Hiệu suất cao: MariaDB được tối ưu hóa để cung cấp hiệu suất cao cho các ứng dụng có tải công việc lớn.
Nó hỗ trợ lập chỉ mục, phân chia và bộ nhớ đệm dữ liệu để tối ưu hóa truy cập dữ liệu. Cộng đồng và hỗ trợ: MariaDB có một cộng đồng đông đảo và một loạt công cụ, tài liệu và diễn đàn trực tuyến để hỗ trợ người dùng và nhà phát triển. Sử dụng rộng rãi: MariaDB được sử dụng rộng rãi trong nhiều ứng dụng và dự án trên toàn thế giới, bao gồm các ứng dụng web, hệ thống quản lý nội dung (CMS), hệ thống e-commerce, và nhiều dự án khác. Trang | 12 CHƯƠNG 2.
XÁC ĐỊNH VÀ YÊU CẦU HỆ THỐNG 1. Khảo sát hiện trạng: Trang web mua bán vé cho các sự kiện giải trí StubHub URL : https://www.com/ "StubHub" là một trong những trang web nổi tiếng và đáng tin cậy nhất trong lĩnh vực mua bán vé cho các sự kiện giải trí StubHub là một trang web cho phép người dùng mua và bán lại vé cho các sự kiện như concert, sự kiện thể thao, sân khấu, sự kiện trực tiếp và nhiều sự kiện giải trí khác trên khắp thế giới. Các hình ảnh minh họa Hình 2. 1: Giao diện trang chủ website StubHub Nguồn: https://www.com/ Trang | 13 Hình 2.
2: Thanh tìm kiếm sự kiện StubHub Nguồn: https://www. 3: Danh mục các sự kiện (Sports, Concert,.) Nguồn: https://www. 4: Các sự kiện được đề xuất Nguồn: https://www.com/ Trang | 14 Hình 2. 5: Các sự kiện được đề xuất Nguồn: https://www.
6: Giao diện bán lại vé khi không còn nhu cầu Nguồn: https://www.com/ Trang | 15 Hình 2. 7: Giao diện mua vé Nguồn: https://www. 8: Giao diện bán vé Nguồn: https://www.com/ Trang | 16 Bảng 2. 1: So sánh ưu và nhược điểm của website Ưu điểm Nhược điểm Giao diện dễ dùng Phí dịch vụ cao Chính sách hoàn tiền rõ rang Giá vé chênh lệch Tính năng công nghệ tiên tiến Hỗ trợ khách hàng chậm (di động, bản đồ chỗ ngồi) Nguồn: Sinh viên thực hiện 1.
Yêu cầu đối với hệ thống: Bảng 2. 2: Các yêu cầu đối với hệ thống Guest + Đăng ký + Tìm kiếm + Xem danh mục + Xem chi tiết vé + Mua vé + Quên mật khẩu User + Đăng ký + Tìm kiếm + Xem danh mục + Xem chi tiết vé + Rút tiền + Nạp tiền + Quản lý thông tin cá nhân + Bán vé + Mua vé, đấu giá vé + Thêm voucher Admin + Quản lý khách hàng + Quản lý sự kiện + Quản lý mua vé + Quản lý rút tiền Trang | 17 + Quản lý voucher + Quản lý đăng ký bán vé + Quản lý phí ship + Quản lý phí sự kiện Clearance + Quản lý khiếu nại, báo cáo đơn hàng + Thêm sự kiện Nguồn: Sinh viên thực hiện Trang | 18 CHƯƠNG 3. PHÂN TÍCH HỆ THỐNG 3. Lược đồ Use Case của hệ thống: Hình 3.
1: Lược đồ Use Case của hệ thống Nguồn: Sinh viên thực hiện 3. Danh sách các Usecase: Bảng 3. 1: Danh sách các Usecase trong hệ thống STT Usecase Actor 1 Đăng ký Guest 2 Tìm kiếm User, Guest 3 Xem danh mục sự kiện User, Guest 4 Xem chi tiết vé User, Guest 5 Đăng nhập User Trang | 19 6 Mua vé User 7 Thanh toán User 8 Quên mật khẩu User 9 Quản lý thông tin tài khoản User 10 Bán vé User 11 Rút tiền User 12 Quản lý khách hàng Admin 13 Quản lý sự kiện Admin 14 Quản lý mua vé Admin 15 Quản lý rút tiền Admin 16 Quản lý voucher Admin 17 Quản lý đăng ký bán vé Admin 18 Quản lý phí ship Admin 19 Quản lý phí Clearance Admin 20 Quàn lý khiếu nại báo cáo đơn hàng Admin 21 Thêm voucher User Nguồn: Sinh viên thực hiện 3. Đặc tả Use Case Bảng 3.
2: Use case đăng ký Use Case ID G01 Use Case Đăng ký Short Description Use case này cho phép thực hiện đăng ký tài khoản Actors Guest Trigger Người dùng mở trang đăng ký tài khoản thành công Pre-conditions # Post-conditions Đăng ký thành công tài khoản Main Flow (1). Ở trang Login chọn vào mục “Sign Up” (2) Chọn “Sign up with email” (3). Hệ thống chuyển hướng tới trang “Sign Up” Trang | 20 (4). Guest nhập “name”, “dateofbirth”, “phone”, “email”, “email OTP”, “password” “confirm password” “address”, đánh dấu vào các ô để đồng ý với quy định và nhấn nút “Sign up” (4).
Hệ thống kiểm tra thông tin vừa nhập, tạo tài khoản cho Guest và chuyển tới trang Đăng nhập Alternate Flow(s): Exception Flow(s) (E4. Guest điền không đầy đủ thông tin, hệ thống thông báo yêu cầu điền các trường còn thiếu (E4. Guest nhập thông tin không đúng định dạng, hệ thống thông báo nhập lại (E4.