đồ án 1 nghiên cứu và xây dựng hệ thống hỗ trợ quản lý sự kiện

Mục tiêu: • Xây dựng được website hỗ trợ quản lý sự kiện với giao diện thân thiện, màu sắc hài hòa, bố cục hợp lý, đáp ứng các chức năng cần thiết.. • Xây dựng được website dành cho các

GIỚI THIỆU ĐỀ TÀI

Tên đề tài

NGHIÊN CỨU VÀ XÂY DỰNG HỆ THỐNG HỖ TRỢ QUẢN LÝ SỰ KIỆN

Mô tả đề tài

Trong thời đại hiện nay, khi con người luôn bị cuốn vào nhịp điệu hối hã của công việc thì nhu cầu giải trí sau những giờ học tập lao động là cực kì quan trọng Do đó, nhu cầu tham dự các sự kiện ngày càng tăng cao Nó mang lại sự giải trí, thư giãn cho con người sau những mệt nhọc của cuộc sống hằng ngày, làm tăng thêm sự hung phấn, vui vẻ cho mọi người khi họ được tham gia các sự kiện như bóng đá, xoa dịu tâm hồn khi tham gia sự kiện hòa nhạc, nhạc kịch,…

Với sự phát triển nhanh chóng của internet, việc mua vé để tham gia sự kiện cũng như tạo sự kiện đã được đưa lên không gian mạng qua những website quản lý sự kiện Điều này giúp chúng ta tận hưởng thời gian giải trí cho bản thân một cách dễ dàng và thoải mái hơn trước, các nhà tổ chức có thể dễ dàng tạo sự kiện và đưa nó tới người dùng hơn

Website quản lý sự kiện với mục tiêu mang lại trải nghiệm tốt cho cả người dùng và nhà tổ chức, chúng em xây dựng website cung cấp đầy đủ các chức năng cơ bản hiện có của một website quản lý sự kiện

Website quản lý sự kiện được xây dựng bằng ReactJS kết hợp với các thư viện hỗ trợ khác.

Lý do chọn đề tài

Với sự phát triển của Internet, nhu cầu đặt mua vé sự kiện trên không gian mạng tăng vượt trội bởi vì sự đơn giản, dễ sử dụng, sự tiếp cận nhanh chóng đến các sự kiện hấp dẫn được tạo bởi các tổ chức

Với các tính năng vượt trội như đặt vé sự kiện realtime, tích hợp thanh toán trực tuyến, phần mềm “Đặt vé sự kiện trực tuyến” đã mang lại nhiều hiệu quả không những cho người dùng

16 đặt vé trực tuyến mà còn giúp người tổ chức và quản lý sự kiện

Chính vì vậy, cần phải xây dựng một phần mềm đòi hỏi khả năng hoạt động ổn định, thích ứng cao với số lượng người dùng đặt vé và hoạt động chính xác khi thanh toán trực tuyến.

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

Hiện nay, thị trường đã có rất nhiều website quản lý sự kiện nổi tiếng được mọi người biết đến như ticketgo, ticketbox, sansukien,… Với giao diện bắt mắt, dễ sử dụng, cùng với số lượng sản phầm khổng lồ, chúng nhanh chóng trở thành những website quản lý sự kiện hàng đầu Các chức năng của những website này đều tập trung vào tạo một hệ thống quản lý sự kiện hiệu quả, đảm bảo tổ chức một cách suôn sẻ và chuyên nghiệp

Chúng em cũng sẽ xây dựng một website quản lý sự kiện với những tính năng cơ bản nhằm mang lại trải nghiệm dễ sử dụng và tiện dụng cho người dùng cũng như các nhà tổ chức sự kiện.

Công nghệ sử dụng

Môi trường thiết kế

Công cụ hỗ trợ

• Trình duyệt Cốc Cốc, Chrome, FireFox.

CƠ SỞ LÝ THUYẾT

Tổng quan về ReactJS

ReactJS là một thư viện javascript mã nguồn mở được phát triển bởi Facebook, ra mắt vào

2013 ReactJS hỗ trợ việc xây dựng những thành phần trên website có tính tương tác cao, có trạng thái và có thể sử dụng lại được

Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng server mà còn ở dưới client React so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM (Document Object Model)

2.1.2 Khái niệm cơ bản trong ReactJS:

Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng Việc chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý

React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật

Hình 2 1 Mô tả cách Virtual DOM hoạt động

• Props: giúp các component tương tác với nhau, component nhận input gọi là props, và trả thuộc tính mô tả những gì component con sẽ render Prop là bất biến

• State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để cập nhật UI

• Tạo đại diện của nút DOM thông qua tạo hàm Element trong React Đây là một ví dụ:

Hình 2 2 Ví dụ về tạo một element trong React

• Cú pháp trong HTML code ở trên rất giống với XML components Tuy nhiên, thay vì sử dụng DOM class truyền thống, React sử dụng className

• Thẻ JSX có tên thẻ, con và thuộc tính Dấu ngoặc kép trong các thuộc tính JSX đại diện cho chuỗi Yếu tố này tương tự như JavaScript

• Ngoài ra, các giá trị số và biểu thức phải được viết bên trong dấu ngoặc nhọn

Hình 2 3 Ví dụ về React được viết bằng JSX o được gọi là Số đếm, hiển thị biểu thức số là giá trị của nó o GameScores là một đối tượng theo nghĩa đen có hai cặp giá trị prop o là khối XML được render trên trang o scores={GameScores}}: thuộc tính điểm nhận được giá trị từ GameScores, đã được xác định trước đó

• Phù hợp với đa dạng thể loại website

• Tái sử dụng các Component

• Có thể sử dụng cho cả Mobile application

• Công cụ phát triển web hot nhất hiện nay

• Reactjs chỉ phục vụ cho tầng View React chỉ là View Library nó không phải là một MVC framework như những framework khác Đây chỉ là thư viện của Facebook giúp render ra phần view Vì thế React sẽ không có phần Model và Controller, mà phải kết hợp với các thư viện khác React cũng sẽ không có 2-way binding hay là Ajax

• Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải cấu hình lại

• React khá nặng nếu so với các framework khác React có kích thước tương đương với Angular (Khoảng 35kb so với 39kb của Angular) Trong khi đó Angular là một framework hoàn chỉnh

• Khó tiếp cận cho người mới học Web

NodeJS

Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng trên V8 JavaScript Engine – trình thông dịch thực thi mã JavaScript giúp chúng ta có thể xây dựng được các ứng dụng web như các trang video clip, các forum và đặc biệt là trang mạng xã hội phạm vi hẹp một cách nhanh chóng và dễ dàng mở rộng

NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ Window cho tới Linux,

OS X nên đó cũng là một lợi thế NodeJS cung cấp các thư viện phong phú ở dạng

Javascript Module khác nhau giúp đơn giản hóa việc lập trình và giảm thời gian ở mức thấp nhất

Node.js được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại California, Hoa Kỳ

2.2.2 Cách NodeJS 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ì, NodeJS 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

• Tốc độ cực nhanh: Được xây dựng dựa trên engine JavaScript V8 của Google Chrome, do đó các thư viện của nó có khả năng thực thi code chỉ rất nhanh - NPM: Với hơn 50,000 package khác nhau, các developer có thể dễ dàng lựa chọn bất kỳ tính năng nào để xây dựng cho ứng dụng của mình

• Lập trình không đồng bộ: Mọi API của Node.JS đều có tính không đồng bộ (non blocking), do đó một server dựa trên Node.JS không cần phải đợi API trả về dữ liệu

• Không buffering: Node.JS giúp tiết kiệm thời gian xử lý file khi cần upload âm

• thanh hoặc video vì các ứng dụng này không bao giờ buffer dữ liệu mà chỉ xuất dữ liệu theo từng phần (chunk)

• Đơn luồng: Node.JS sử dụng mô hình đơn luồng với vòng lặp sự kiện Do đó các ứng dụng có thể xử lý số lượng request lớn hơn rất nhiều so với các server truyền thống như Apache HTTP Server

• Khả năng mở rộng cao: Server NodeJS phản hồi theo hướng non-blocking, do đó nó có thể mở rộng vô cùng dễ dàng, tạo ra các luồng giới hạn để xử lý request

• Các nhà phát triển không thể sử dụng phần cứng cấp máy chủ với mô hình đa lõi ngày nay vì NodeJS có khả năng mở rộng hạn chế

• NodeJS tỏ ra khó làm việc khi xử lý cơ sở dữ liệu quan hệ

• Mỗi callback phải đi kèm với nhiều callback lồng nhau

• Để sử dụng NodeJS, nhà phát triển phải quen thuộc với JavaScript

• NodeJS được phát hiện là không phù hợp với các thao tác hoạt động sử dụng nhiều CPU.

ExpressJS

Express.js là framework web phổ biến nhất dành cho Node.js Nó được thiết kế để xây dựng các ứng dụng web và API và được gọi là khung máy chủ tiêu chuẩn trên thực tế cho

Node.js Xây dựng phần phụ trợ từ đầu cho một ứng dụng trong Node.js có thể tẻ nhạt và tốn thời gian Từ việc thiết lập cổng đến trình xử lý định tuyến, việc viết tất cả mã soạn sẵn sẽ loại bỏ những gì thực sự quan trọng, đó là viết logic nghiệp vụ cho một ứng dụng Bằng cách sử dụng các khung web như Express.js, nhà phát triển có thể tiết kiệm thời gian và tập trung vào các nhiệm vụ quan trọng khác

• Phát triển máy chủ nhanh chóng: Expressjs cung cấp nhiều tính năng dưới dạng các hàm để dễ dàng sử dụng ở bất kỳ đâu trong chương trình Điều này đã loại bỏ nhu cầu viết mã từ đó tiết kiệm được thời gian

• Phần mềm trung gian Middleware: Đây là phần mềm trung gian có quyền truy cập vào cơ sở dữ liệu, yêu cầu của khách hàng và những phần mềm trung gian khác Phần mềm Middleware này chịu trách nhiệm chính cho việc tổ chức có hệ thống các chức năng của Express.js

• Định tuyến - Routing: Express js cung cấp cơ chế định tuyến giúp duy trì trạng thái của website với sự trợ giúp của URL

• Tạo mẫu - Templating: Các công cụ tạo khuôn mẫu được Express.js cung cấp cho phép các nhà xây dựng nội dung động trên các website bằng cách tạo dựng các mẫu HTML ở phía máy chủ

• Gỡ lỗi - Debugging: Để phát triển thành công các ứng dụng web không thể thiết đi việc gỡ lỗi Giờ đây với Expressjs việc gỡ lỗi đã trở nên dễ dàng hơn nhờ khả năng xác định chính xác các phần ứng dụng web có lỗi

Hình 2 4 Express js cung cấp cơ chế định tuyến giúp duy trì trạng thái của website.

Bootstrap

• Bootstrap là 1 framework HTML, CSS, và JavaScript cho phép người dùng dễ dàng thiết kế website theo 1 chuẩn nhất định, tạo các website thân thiện với các thiết bị cầm tay như mobile, ipad, tablet,

• Bootstrap bao gồm những cái cơ bản có sẵn như: typography, forms, buttons, tables, navigation, modals, image carousels và nhiều thứ khác Trong bootstrap có thêm nhiều Component, Javascript hỗ trợ cho việc thiết kế reponsive của bạn dễ dàng, thuận tiện và nhanh chóng hơn

• Dễ dàng thao tác: Bootstrap có cơ chế hoạt động mở, thông qua các mã nguồn như HTML, CSS, Javascript… Điều này giúp người dùng dễ dàng thao tác, thực hiện nếu có kiến thức cơ bản về 3 loại mã nguồn này Chỉ với vài thao tác, các nhà phát triển website đã có thể dễ dàng thay đổi và chỉnh sửa theo mong muốn

• Có thể tùy chỉnh dễ dàng: Khi tìm hiểu Bootstrap là gì, chúng ta đã biết, Bootstrap được tạo ra từ các mã nguồn mở Điều này cho phép người dùng có thể dễ dàng tùy chỉnh các thuộc tính và phần tử trên website Đặc biệt, do không phải tải mã nguồn mở về máy nên sử dụng Bootstrap sẽ giúp tiết kiệm rất nhiều dung lượng lưu trữ

• Chất lượng sản phẩm đầu ra hoàn hảo: Bootstrap là framework được tạo ra bởi các lập trình viên giỏi hàng đầu thế giới Đồng thời, công cụ này cũng được thử nghiệm trên nhiều thiết bị, nhiều trường hợp trước khi chính thức đưa vào sử dụng Điều này giúp bạn hoàn toàn có thể yên tâm về sản phẩm được tạo ra bởi Bootstrap

• Độ tương thích cao: Trong quá trình tìm hiểu Bootstrap là gì và lịch sử framework này, chúng ta đã biết, các phiên bản Bootstrap thường xuyên được nâng cấp để tương thích với mọi nền tảng và trình duyệt Điều này đem tới cho người dùng những trải nghiệm hài lòng và ấn tượng

• Nặng, tốc độ tối ưu chưa cao: Đây là một điểm trừ khá lớn cho Bootstrap, bởi framework của nó ôm quá nhiều chức năng tổng dung lượng lên tới gần 7MB

• Chưa hoàn thiện: Hiện nay, Bootstrap vẫn đang tiếp tục phát triển chưa có đầy đủ các thư viện cần thiết để tạo ra một framework hoàn hảo

• Nhiều code thừa: Bootstrap cung cấp gần như đầy đủ những tính năng cơ bản của một trang web responsive hiện đại Tuy nhiên, mặt trái của việc này là website của bạn sẽ phải tải thêm rất nhiều dòng code không cần thiết khi mà bạn chỉ cần chưa đến 10% những gì Bootstrap cung cấp

• Hạn chế sáng tạo: Bootstrap không khuyến khích sáng tạo: Chỉ cần nhét Bootstrap vào themes sẵn có, gọi ra cái class từ stylesheet và thế là bạn đã có một trang web responsive Tuy vậy các theme này sẽ khiến bạn gò bó và khó sáng tạo hơn.

MongoDB

• MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql và được hàng triệu người sử dụng

• MongoDB là một database hướng tài liệu (document), các dữ liệu được lưu trữ trong document kiểu JSON thay vì dạng bảng như CSDL quan hệ nên truy vấn sẽ rất nhanh - Với CSDL quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan hệ (như MySQL hay SQL Server ) sử dụng các bảng để lưu dữ liệu thì với MongoDB chúng ta sẽ dùng khái niệm là collection thay vì bảng

• So với RDBMS thì trong MongoDB collection ứng với table, còn document sẽ ứng với row , MongoDB sẽ dùng các document thay cho row trong RDBMS - Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ không cần tuân theo một cấu trúc nhất định

• Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh thông qua ngôn ngữ truy vấn MongoDB

2.5.2 Một số câu lệnh cơ bản

Tạo bảng db.createCollection('students');

Tạo bản ghi db.students.insert({ name:huy, gender:

Cập nhật db.students.update({ _id: 1 },{$set:{ name: huy update' }});

Xóa bản ghi db.students.remove({ _id: 1});

Tìm kiếm all db.students.find({});

Tìm kiếm db.students.find({ name: huy });

• Do MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một collection sẽ có các kích cỡ và các document khác nhau, linh hoạt trong việc lưu trữ dữ liệu, nên bạn muốn gì thì cứ insert vào thoải mái

• Dữ liệu trong MongoDB không có sự ràng buộc lẫn nhau, không có join như trong RDBMS nên khi insert, xóa hay update nó không cần phải mất thời gian kiểm tra xem có thỏa mãn các ràng buộc dữ liệu như trong RDBMS

• MongoDB rất dễ mở rộng (Horizontal Scalability) Trong MongoDB có một khái niệm cluster là cụm các node chứa dữ liệu giao tiếp với nhau, khi muốn mở rộng hệ thống ta chỉ cần thêm một node với vào cluster

• Trường dữ liệu “_id” luôn được tự động đánh index (chỉ mục) để tốc độ truy vấn thông tin đạt hiệu suất cao nhất

• Khi có một truy vấn dữ liệu, bản ghi được cached lên bộ nhớ Ram, để phục vụ lượt truy vấn sau diễn ra nhanh hơn mà không cần phải đọc từ ổ cứng

• Hiệu năng cao: Tốc độ truy vấn (find, update, insert, delete) của MongoDB nhanh hơn hẳn so với các hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) Với một lượng dữ liệu đủ lớn thì thử nghiệm cho thấy tốc độ insert của MongoDB có thể nhanh tới gấp 100 lần so

• Một ưu điểm của MongoDB cũng chính là nhược điểm của nó MongoDB không có các tính chất ràng buộc như trong RDBMS nên khi thao tác với mongoDB thì phải hết sức cẩn thận

• Tốn bộ nhớ do dữ liệu lưu dưới dạng key-value, các collection chỉ khác về value do đó key sẽ bị lặp lại Không hỗ trợ join nên dễ bị dữ thừa dữ liệu

• Khi insert/update/remove bản ghi, MongoDB sẽ chưa cập nhật ngay xuống ổ cứng, mà sau 60 giây MongoDB mới thực hiện ghi toàn bộ dữ liệu thay đổi từ RAM xuống ổ cứng điêù này sẽ là nhược điểm vì sẽ có nguy cơ bị mất dữ liệu khi xảy ra các tình huống như mất điện

Render

Render là một dịch vụ cloud hosting chuyên cung cấp môi trường phát triển và triển khai ứng dụng Render tập trung vào việc cung cấp một trải nghiệm phát triển dễ dàng và quản lý ứng dụng đơn giản cho các nhà phát triển

• Dễ sử dụng: Giao diện người dùng thân thiện và quy trình triển khai đơn giản, giúp người dùng nhanh chóng triển khai ứng dụng

• Tự động hóa: Render tập trung vào việc tự động hóa nhiều công đoạn trong quá trình triển khai và quản lý ứng dụng

• Hiệu suất và tính mở rộng: Render cung cấp hiệu suất ổn định và khả năng mở rộng, cho phép ứng dụng linh hoạt mở rộng khi cần

• Chính sách giá linh hoạt: Render thu phí theo sử dụng thực tế, có tính linh hoạt và cung cấp một số tính năng miễn phí

• Tính bảo mật cao: Render cung cấp các tính năng bảo mật như HTTPS tự động và cơ chế xác thực để bảo vệ ứng dụng

• Hạn chế về tính linh hoạt: Mặc dù Render rất dễ sử dụng, nhưng đôi khi nó có thể hạn chế trong việc tùy chỉnh và điều chỉnh cấu hình cho các yêu cầu đặc biệt của ứng dụng

• Giới hạn về tính năng: So với một số dịch vụ cloud hosting lớn hơn, Render có thể có ít tính năng hơn hoặc không hỗ trợ một số tính năng đặc biệt cho một số loại ứng dụng

• Hỗ trợ kỹ thuật: Mặc dù Render có cộng đồng lớn, nhưng hỗ trợ kỹ thuật có thể không đáp ứng kịp thời hoặc không thực sự chi tiết cho các vấn đề phức tạp

Netlify

Netlify là một dịch vụ đám mây (cloud service) cung cấp các công cụ và tính năng để phát triển, triển khai, và quản lý các ứng dụng web Nó tập trung vào việc làm cho quá trình phát triển và triển khai ứng dụng web trở nên dễ dàng và linh hoạt

• Dễ sử dụng: Giao diện người dùng của Netlify rất dễ sử dụng, giúp người phát triển dễ dàng triển khai và quản lý ứng dụng của họ mà không cần nhiều kiến thức chuyên sâu về hạ tầng

• Phục vụ động: Netlify hỗ trợ việc phục vụ động (serverless) thông qua các hàm

(functions) của họ, giúp giảm độ phức tạp của quy trình phát triển và triển khai

• Quản lý phiên bản (Versioning): Netlify giữ một lịch sử chi tiết của mọi phiên bản triển khai, giúp dễ dàng quản lý và quay lại các phiên bản trước đó

• Hỗ trợ các ngôn ngữ lập trình: Netlify hỗ trợ nhiều ngôn ngữ lập trình và framework, từ JavaScript và React đến Python và Hugo Điều này làm cho nó phù hợp cho nhiều dự án khác nhau

• Giới hạn về tài nguyên: Miễn phí tầm nhìn của Netlify có giới hạn về tài nguyên, bao gồm băng thông, dung lượng lưu trữ và thời gian thực thi hàm serverless Điều này có thể trở thành vấn đề đối với các dự án lớn hoặc có lượng truy cập cao

• Khả năng tích hợp có hạn: Mặc dù Netlify tích hợp sẵn với nhiều dịch vụ, nhưng có thể có trường hợp mà bạn cần tích hợp với một dịch vụ cụ thể mà Netlify không hỗ trợ

• Khả năng mở rộng có thể đắt đỏ: Nếu dự án của bạn phát triển và đòi hỏi nhiều tài nguyên hơn, chi phí có thể tăng lên nhanh chóng Netlify không phải là lựa chọn tốt nhất cho các dự án cần mở rộng lớn.

PHÂN TÍCH THIẾT KẾ HỆ THỐNG

Phân tích yêu cầu

Nhóm chức năng Chức năng Mô tả

Người dùng Đăng ký Đăng ký tài khoản mới cho người dùng Đăng nhập Người dùng đăng nhâp vào tài khoản Xem danh sách sự kiện Người dùng xem danh sách sự kiện Chỉnh sửa thông tin cá nhân

Người dùng chỉnh sửa thông tin cá nhân của mình

Mua vé cho sự kiện Người dùng tiến hành đặt vé Tìm sự kiện theo nhiều trường

Người dùng tìm kiếm sự kiện theo nhiều trường

Xem danh sách vé Người dùng có thể xem danh sách vé đã mua

Nhà tổ chức Tạo sự kiện Nhà tổ chứ có thể tạo sự kiện Tạo mã giảm giá Nhà tổ chức tạo mã giảm giá Chỉnh sửa mã giảm giá Nhà tổ chức chỉnh sửa mã giảm giá Xóa mã giảm giá Nhà tổ chức xóa mã giảm giá Đăng bài quảng cáo sự kiện

Nhà tổ chức đăng bài quảng cáo sự kiện

Mời người đồng hành Nhà tổ chức mời người đồng hành Xem thống kê của sự kiện

Nhà tổ chức xem thống kê sự kiện đã tạo Xem danh sách vé nhà tổ chức xem danh sách vé

Admin Duyệt sự kiện Admin duyệt sự kiện được phép đăng hay không

Thống kê các sự kiện Admin xem thống kê các sự kiện

3.1.2 Yêu cầu phi chức năng

• Tính tiện dụng:phần mềm thân thiện với người dùng, dễ sử dụng

• Tính hiệu quả: đảm bảo tốc độ xử lý ổn định, nhanh chóng

• Tính tương thích: ứng dụng có thể chạy và tương thích với nhiều nền tảng trên nhiều hệ điều hành khác nhau

• Tính bảo mật: Phải đảm bảo an toàn thông tin dữ liệu của người dùng, ngăn chặn các cuộc tấn công từ bên ngoài, giảm thiểu tối đa rủi ro, rò rỉ thông tin tài khoản người dùng.

Sơ đồ use-case

Hình 3 1 Sơ đồ use-case cho người dùng chưa đăng ký nhà tổ chức

Hình 3 2 Sơ đồ use-case người dùng đã đăng ký nhà tổ chức

Hình 3 3 Sơ đồ use-case admin

Đặc tả use-case

Bảng 3.1: Đặc tả đăng nhập:

Tên Use – Case Đăng nhập

Mô tả Use- case cho phép người dùng đăng nhập vào hệ thống

Actor Người dùng Điều kiện kích hoạt Người dùng nhấn vào nút “Login | Sign up”

Tiền điều kiện Đã có tài khoản

Hậu điều kiện Người dùng đăng nhập vào hệ thống thành công

Luồng sự kiện chính 1 Hệ thống hiển thị màn hình đăng nhập

2 Người dùng nhập số điện thoại

3 Người dùng nhấn nút “Continue”

4 Người dùng nhập mật khẩu

5 Người dùng nhấn nút “Login”

6 Hệ thống kiểm tra thông tin đăng nhập

Nếu thông tin hợp lệ hệ thống thông báo đăng nhập thành công

Luồng sự kiện phụ Số điện thoại sai:

Hệ thống hiển thị thông báo lỗi và quay lại bước 2

Hệ thống hiển thị thông báo lỗi và quay lại bước 4

Bảng 3.2: Đặc tả đăng xuất:

Tên Use – Case Đăng xuất

Mô tả Use- case cho phép người dùng đăng xuất khỏi hệ thống

Actor Người dùng Điều kiện kích hoạt Người dùng nhấn vào nút “Log out”

Tiền điều kiện Đã đăng nhập

Hậu điều kiện Người dùng đăng xuất khỏi hệ thống thành công Luồng sự kiện chính 1 Người dùng nhấn vào nút thông tin cá nhân

2 Người dùng nhấn nút “Log out”

3 Hệ thống log out khỏi người dùng hiện tại

Bảng 3.3: Đặc tả đăng ký:

Tên Use – Case Đăng ký

Mô tả Use- case cho phép người dùng đăng ký tài khoản hệ thống

Actor Người dùng Điều kiện kích hoạt Người dùng nhấn vào nút “Log in | Sign up”

Tiền điều kiện Chưa có tài khoản trên hệ thống

Hậu điều kiện Người dùng đăng ký thành công

Luồng sự kiện chính 1 Hệ thống hiển thị màn hình đăng ký

2 Người dùng nhập số điện thoại

3 Người dùng nhấn nút “Continue”

4 Người dùng nhập thông tin

5 Người dùng nhấn nút “Sign up”

6 Hệ thống kiểm tra thông tin đăng ký

Nếu thông tin hợp lệ hệ thống thông báo đăng ký thành công

Luồng sự kiện phụ Thông tin nhập không hợp lệ:

Hệ thống thông báo lỗi và quay lại bước 4

3.3.4 Chỉnh sửa thông tin cá nhân

Tên Use – Case Chinh sửa thông tin cá nhân

Mô tả Use- case cho phép người dùng chỉnh sửa thông tin cá nhân

Actor Người dùng Điều kiện kích hoạt Người dùng nhấn vào nút “Edit profile”

Hậu điều kiện Cập nhật thông tin người dùng trên hệ thống

Luồng sự kiện chính 1 Người dùng nhấn vào nút thông tin cá nhân

2 Người dùng nhấn nút “Edit profile”

3 Người dùng nhập thông tin

4 Người dùng nhấn nút “Save changes”

5 Hệ thống kiểm tra thông tin Nếu thông tin hợp lệ hệ thống thông báo cập nhật thành công

Luồng sự kiện phụ Thông tin nhập không hợp lệ:

Hệ thống thông báo lỗi và quay lại bước 3

Tên Use – Case Tìm kiếm sự kiện

Mô tả Use- case cho phép người dùng tìm kiếm sự kiện

Actor Người dùng Điều kiện kích hoạt Người dùng nhập nội dung vào ô search

Hậu điều kiện Hiển thị danh sách sự kiện tìm được

Luồng sự kiện chính 1 Người dùng nhập nội dung vào ô tìm kiếm

2 Hệ thống hiển thị danh sách sự kiện tìm được ở dưới

3 Kết thúc use-case Luồng sự kiện phụ Người dùng không nhập từ khóa:

Không hiển thị danh sách sự kiện

Tên Use – Case Lọc sự kiện

Mô tả Use- case cho phép người dùng tìm kiếm sự kiện theo thời gian, mức giá, thành phố, loại, tên

Actor Người dùng Điều kiện kích hoạt Người dùng nhập nội dung tìm kiếm hoặc chọn nội dung filter

Hậu điều kiện Hiển thị danh sách sự kiện tìm được

Luồng sự kiện chính 1 Người dùng nhấn vào mục loại sự kiện bên sidebar

2 Người dùng nhập nội dung vào ô tìm kiếm hoặc nhấn hoặc nhấn vào location dropdown và chọn thành phố hoặc nhấn vào dropdown ngày để chọn thời gian hoặc chọn các loại của sự kiện hoặc nhấn vào dropdown giá tiền để chọn giá

3 Hệ thống hiển thị danh sách sự kiện tìm được ở dưới

4 Kết thúc use-case Luồng sự kiện phụ Người dùng không nhập từ khóa tìm kiếm hoặc các filter:

1 Hiển thị toàn bộ sự kiện

Tên Use – Case Tạo sự kiện

Mô tả Use- case cho phép người tổ chức sự kiện sự kiện mới

Actor Người tổ chức sự kiện Điều kiện kích hoạt Người tổ chức sự kiện nhấn vào nút “New

Hậu điều kiện Hệ thống thêm sự kiện mới thành công

Luồng sự kiện chính 1 Người tổ chức sự kiện nhấn vào nút

“New Event” ở thanh header bar

2 Người tổ chức sự kiện chọn loại sự kiện

3 Người tổ chức sự kiện điền form các thông tin cơ bản của sự kiện

4 Người tổ chức sự kiện nhấn vào nút thêm sân khấu

5 Người tổ chức sự kiện điền thông tin vé

6 Người tổ chức sự kiện chọn danh sách

7 Hệ thống sẽ validate ở mỗi bước và thêm sự kiện Luồng sự kiện phụ Người tổ chức sự kiện nhập sai thông tin:

1 Hiển thị thông báo các trường nhập sai

2 Không thể tới bước tiếp theo

Tên Use – Case Đặt vé sự kiện

Mô tả Use- case cho phép dùng đặt vé sự kiện

Actor Người dùng Điều kiện kích hoạt Người dùng vào trang chi tiết sự kiện thành công

Hậu điều kiện Hệ thống cập nhật danh sách vé đã đặt thành công Luồng sự kiện chính 1 Người dùng click vào nút “Book Now” trong chi tiết sự kiện

2 Người dùng chọn danh sách vé cần thiết cho sự kiện đó

3 Người dùng điền thông tin cá nhân

4 Người dùng chuyển sang trang thanh toán

5 Người dùng hoàn thành thanh toán vả đặt vé thành công

Luồng sự kiện phụ Người tổ chức sự kiện nhập sai thông tin:

3.3.9 Đăng ký nhà tổ chức

Tên Use – Case Đặt vé sự kiện

Mô tả Use- case cần phải đăng ký thông tin nhà tổ chức trước khi tạo sự kiện

Actor Người dùng Điều kiện kích hoạt Người dùng đăng nhập thành công

Hậu điều kiện Hệ thống cập nhật danh sách vé đã đặt thành công Luồng sự kiện chính 1 Người dùng nhấn vào tạo sự kiện mới

2 Nếu người dùng chưa có thông tin nhà tổ chức, hệ thống sẽ rediret đến trang tạo nhà tổ chức

3 Người dùng cũng có thể vào nục My Organization để chỉnh sửa thông tin nhà tổ chức

Luồng sự kiện phụ Người tổ chức sự kiện nhập sai thông tin:

Tên Use – Case Tạo mã giảm giá

Mô tả Use- case cho phép người tổ chức sự kiện tạo mã giảm giá

Actor Người tổ chức sự kiện Điều kiện kích hoạt Người tổ chức sự kiện nhấn vào nút “Discount”

Hậu điều kiện Hệ thống thêm mã giảm giá vừa tạo vào database Luồng sự kiện chính 8 Người tổ chức sự kiện nhấn vào nút “My organization profile” ở mục thông tin cá nhân

9 Người tổ chức sự kiện nhấn vào nút

“Discount” ở sự kiện muốn tạo mã

10 Người tổ chức sự kiện chọn showtime

11 Người tổ chức sự kiện nhấn vào nút chỉnh sửa tại mã giảm giá muốn sửa

12 Người tổ chức sự kiện nhập thông tin

13 Hệ thống kiểm tra thông tin Nếu thông tin hợp lệ thì cập nhật mã giảm giá vào database

14 Kết thúc use-case Luồng sự kiện phụ Người tổ chức sự kiện nhập sai thông tin:

3.3.11 Chỉnh sửa mã giảm giá

Tên Use – Case Chỉnh sửa mã giảm giá

Mô tả Use- case cho phép người tổ chức sự kiện chỉnh sửa mã giảm giá

Actor Người tổ chức sự kiện Điều kiện kích hoạt Người tổ chức sự kiện nhấn vào nút “Discount”

Hậu điều kiện Hệ thống cập nhật mã giảm giá vừa chỉnh sửa vào database

Luồng sự kiện chính 1 Người tổ chức sự kiện nhấn vào nút “My organization profile” ở mục thông tin cá nhân

“Discount” ở sự kiện muốn tạo mã

5 Người tổ chức sự kiện nhập thông tin

6 Hệ thống kiểm tra thông tin Nếu thông tin hợp lệ thì thêm mã giảm giá vào database

7 Kết thúc use-case Luồng sự kiện phụ Người tổ chức sự kiện nhập sai thông tin:

3.3.12 Xem danh sách đặt chỗ

Tên Use – Case Xem danh sách đặt chỗ

Mô tả Use- case cho phép người tổ chức sự kiện xem danh sách đặt chỗ

Actor Người tổ chức sự kiện Điều kiện kích hoạt Người tổ chức sự kiện nhấn vào nút “RSVPs”

Hậu điều kiện Hệ thống hiển thị danh sách đặt chỗ

“RSVPs” ở sự kiện muốn xem

5 Người tổ chức sự kiện có thể chọn filter theo loại và thời gian

6 Hệ thống hiển thị danh sách đặt chỗ

7 Kết thúc use-case Luồng sự kiện phụ Người tổ chức sự kiện không chọn loại vé:

Hiển thị đặt chỗ của tất cả loại vé

Tên Use – Case Xem danh sách vé

Mô tả Use- case cho phép người tổ chức sự kiện xem danh sách vé

Actor Người tổ chức sự kiện Điều kiện kích hoạt Người tổ chức sự kiện nhấn vào nút “RSVPs”

“RSVPs” ở sự kiện muốn xem

12 Hệ thống hiển thị danh sách vé

13 Kết thúc use-case Luồng sự kiện phụ

3.3.14 Thống kê vé bán theo ngày

Tên Use – Case Thống kê vé bán theo ngày

Mô tả Use- case cho phép người tổ chức sự kiện xem thống kê vé bán theo ngày

Actor Người tổ chức sự kiện Điều kiện kích hoạt Người tổ chức sự kiện nhấn vào nút

“Summary” ở sự kiện muốn xem

4 Người tổ chức sự kiện chọn ngày bắt đầu và ngày kết thúc

5 Người tổ chức sự kiện nhấn nút “Apply”

6 Hệ thống hiển thị đồ thị vé bán theo ngày

7 Kết thúc use-case Luồng sự kiện phụ Ngày bắt đầu lớn hơn ngày kết thúc:

1 Hệ thống thông báo lỗi

3.3.15 Tạo bài viết quảng cáo

Tên Use – Case Tạo bài viết quảng cáo

Mô tả Use- case cho phép người tổ chức sự kiện tạo bài viết quảng cáo

Actor Người tổ chức sự kiện Điều kiện kích hoạt Người tổ chức sự kiện nhấn vào nút “Promote”

Hậu điều kiện Đăng quảng cáo sự kiện thành công lên facebook

“Promote” ở sự kiện muốn tạo quảng cáo

4 Link mua vé được đăng lên facebook

Tên Use – Case Tạo người đồng hành

Mô tả Use- case cho phép người tổ chức sự kiện thêm người đồng hành

Actor Người tổ chức sự kiện Điều kiện kích hoạt Người tổ chức sự kiện nhấn vào icon Moderator

Hậu điều kiện Thêm người đồng hành vào sự kiện thành công

2 Người tổ chức sự kiện nhấn vào icon Moderattor ở sự kiện muốn tạo

4 Người tổ chức sự kiện điền thông tin

5 Nếu thông tin hợp lệ hệ thống sẽ gửi mail mời người đồng hành đến email đã nhập

6 Kết thúc use-case Luồng sự kiện phụ Email nhập chưa được đăng ký trên hệ thống:

1 Hiển thị thông báo lỗi

Tên Use – Case Duyệt sự kiện

Mô tả Use- case cho phép admin duyệt sự kiện

Actor Admin Điều kiện kích hoạt Admin nhấn vào mục “Events”

Hậu điều kiện Sự kiện được hiển thị với người dùng

Luồng sự kiện chính 1 Admin nhấn vào nút “Manage events” ở mục thông tin cá nhân

2 Admin nhấn vào mục “Events”

3 Admin chọn event muốn duyệt

5 Hệ thống thay đổi trạng thái của sự kiện

3.3.18 Xem thống kê sự kiện

Tên Use – Case Xem thống kê sự kiện

Mô tả Use- case cho phép admin xem thống kê tất cả sự kiện

Actor Admin Điều kiện kích hoạt Admin nhấn vào mục “Statistic”

Hậu điều kiện Hiển thị thống kê sự kiện thành công

Luồng sự kiện chính 1 Admin nhấn vào nút “Manage events” ở mục thông tin cá nhân

2 Admin nhấn vào mục “Statistic”

3 Admin chọn ngày bắt đầu và ngày kết thúc

5 Hệ thống kiểm tra thông tin Nếu hợp lệ sẽ hiển thị đồ thị thống kê sự kiện

6 Kết thúc use-case Luồng sự kiện phụ Ngày bắt đầu lớn hơn ngày kết thúc:

1 Hệ thống thông báo lỗi

THIẾT KẾ GIAO DIỆN

Trang đăng nhập

Hình 4 1 Giao diện trang đăng nhập sau khi nhấn nút Log in | Sign up

• Khi click vào nút Log in | Sign up, sẽ dẫn vào trang đăng nhập, đăng kí của Website

• Ô phone number để nhập số điện thoại đã đăng ký

• Nhấn nút Continue để chuyển qua màn hình nhập mật khẩu nếu số điện thoại hợp lệ

Hình 4 2 Giao diện trang đăng nhập khi nhập số điện thoại hợp lệ

• Ô password để nhập mật khẩu

• Khi click vào nút Sign up, sẽ dẫn vào trang đăng ký tài khoản của Website

Trang đăng ký

Hình 4 3 Giao diện trang đăng ký sau khi nhấn nút Log in | Sign up

• Khi click vào nút Log in | Sign up, sẽ dẫn vào trang đăng nhập, đăng kí của Website

• Ô phone number để nhập số điện thoại

• Nhấn nút Continue để chuyển qua màn hình nhập thông tin đăng ký nếu số điện thoại

48 chưa tồn tại trong data

Hình 4 4 giao diện màn hình đăng ký khi nhập số điện thoại chưa có trong database

• Ô username để nhập tên người dùng

• Ô password để nhập mật khẩu muốn tạo

• Ô Retype password để xác nhận lại mật khẩu

• Nút đăng ký để đăng ký tài khoản để truy cập vào trang web

Trang chủ

Hình 4 5 Giao diện trang chủ

• Khi người dùng truy cập vào trang web sẽ thấy được danh sách các event đã được tạo

• Người dùng có thể nhấn chọn loại sự kiện muốn tìm bên ở thanh sidebar

• Người dùng có thể tìm kiếm sự kiện bằng cách nhập nội dung cần tìm vào ô tìm kiếm ở

• Người dùng có thể quản lý thông tin cá nhân cũng như sự kiện đã tạo bằng cách rê chuột vào nút thông tin cá nhân bên phải trên thanh header

• Người dùng có thể xem chi tiết sự kiện bằng cách nhấn vào ô sự kiện bên dưới

• Người dùng có thể tạo sự kiện bằng cách nhấn vào nút tạo sự kiện trên thanh header.

Trang thông tin chi tiết sự kiện

Hình 4 6 Giao diện trang thông tin chi tiết sự kiện

• Nhập nội dung tìm kiếm vào ô search trên header sẽ hiển thị danh sách sự kiện tìm được

• Hiển thị các thông tin chi tiết về sự kiện như tên, ngày bắt đầu, giá và các loại vé

• Nhấn vào nút Select your location sẽ hiển thị thành phố muốn tìm sự kiện

• Nhấn nút Create event để dẫn tới trang tạo sự kiện

• Nhấn vào loại sự kiện bên dưới header sẽ dẫn tới trang lọc sự kiện theo loại đó

• Nhấn vào nút Select showtime sẽ dẫn tới mục chọn showtime để mua vé

• Nhấn nút Book now sẽ dẫn tới trang book vé

• Mục recommend sẽ hiển thị các sự kiện liên quan.

Trang lọc sự kiện

Hình 4 7 Giao diện trang tìm kiếm

• Mặc định, website sẽ hiển thị sẵn đa dạng sự kiện đã lọc theo tất cả vị trí, tất cả các ngày, tất cá các loại và tất cả các mức giá

• Nhấn vào dropdown All location sẽ hiển thị vị trí muốn lọc Chọn 1 vị trí sẽ hiển thị danh sách sự kiện tìm được

Hình 4 8 Giao diện trang lọc sự kiện khi nhấn vào nút All location

• Nhấn vào dropdown All dât sẽ hiển thị ngày muốn lọc Chọn xong ngày sẽ hiển thị danh

53 sách sự kiện tìm được

Hình 4 9 Giao diện trang lọc sự kiện khi nhấn vào nút All Date

• Nhấn vào dropdown categories sẽ hiển thị tất cả loại sự kiện Chọn loại sự kiện sẽ hiển thị danh sách sự kiện tìm được Có thể chọn nhiều loại

Hình 4 10 Giao diện trang lọc sự kiện khi nhấn vào nút All Categories

• Nhấn vào dropdown All price sẽ hiển thị mức giá muốn lọc Chọn 1 loại giá sẽ hiển thị danh sách sự kiện tìm được

Hình 4 11 Giao diện trang lọc sự kiện khi nhấn vào nút All price

• Nhập nội dung tìm kiếm vào ô search sẽ hiển thị danh sách sự kiện tìm được

Trang thông tin my events

Hình 4 12 Giao diện my events

• Hiển thị danh sách các sự kiện đã tạo của người dùng

• Bên phải là sidebar chứa các thông tin của người dùng

• Mặc định sẽ hiển thị danh sách sự kiện đã tạo của người dùng

• Nhấn nút Create event để tạo sự kiện

• Nhập nội dung vào ô search để tìm kiếm sự kiện

• Nhấn vào dropdown button bên cạnh display per page để chọn số sự kiện muốn hiển thị

• Nhấn nút Next, Previous để chuyển trang

• Dưới thông tin mỗi sự kiện sẽ hiển thị danh sách các thao tác với sự kiện.

Trang thông tin mã giảm giá

Hình 4 13 Giao diện trang thông tin mã giảm giá

• Mặc định chưa chọn showtime nên giao diện trống, chỉ gồm 1 nút để chọn showtime

Hình 4 14 Giao diện trang thông tin mã giảm giá khi đã chọn showtime

• Hiển thị thông tin các mã giảm gồm tên mã, số lượng, ngày áp dụng và ngày hết hạn, số lượng đã dùng

• Nhấn vào icon chỉnh sửa sẽ hiển thị modal chỉnh sửa thông tin mã giảm

• Nhấn vào icon thùng rác sẽ xóa mã giảm

• Nhấn vào nút Add new discount code sẽ hiển thị modal tạo mã giảm giá

Hình 4 15 Giao diện modal tạo mã giảm giá

• Ô discount code để nhập tên mã

• Ô start để nhập thời gian bắt đầu

• Ô end để nhập thời gian hết hạn

• Nhấn nút save để tạo mã.

Trang tạo quảng cáo

Hình 4 16 Giao diện trang tạo quảng cáo

• Hiển thị thông tin tên event và nút chia sẻ lên facebook

• Nhấn nút Save on facebook sẽ hiển thị màn hình tạo bài viết đăng lên facebook

Hình 4 17 Giao diện trang tạo quảng cáo khi nhấn nút share on facebook

Trang thông tin người đồng hành

Hình 4 18 Giao diện trang thông tin người đồng hành

• Hiển thị thông tin tên event và danh sách các người đồng hành trong sự kiện

• Nhấn nút Add moderator sẽ hiển thị modal thêm người đồng hành

Hình 4 19 Giao diện modal tạo người đồng hành

• Ô email address để thêm thông tin email người đồng hành

• Nút select a role để chọn vai trò của người đó

• Nhấn nút Add moderator để gửi lời mời đến tài khoản email đã nhập

Trang thống kê sự kiện của người dùng

Hình 4 20 Giao diện thống kê sự kiện của người dùng

• Hiển thị thông tin tên event, mặc định sẽ chọn showtime đầu tiên của sự kiện

• Hiển các thông tin như tổng thu nhập, phí tạo dịch vụ, thông tin về số vé đã bán, giá của từng loại vé

• Nhấn vào ô bên cạnh chữ From để chọn ngày bắt đầu thống kê

• Nhấn vào ô bên cạnh chữ To để chọn ngày kết thúc thống kê

• Nhấn nút Apply để hiển thị đồ thị thống kê

Hình 4 21 Giao diện đồ thị thống kê

Trang thông tin đặt chỗ, số vé đã bán

Hình 4 22 Giao diện thông tin đặt chỗ, số vé đã bán

• Hiển thị thông tin tên event, mặc định chưa có showtime được chọn nên danh sách trống

• Nhấn vào ô select a date để chọn showtime

Hình 4 23 Giao diện trang thông tin đặt chỗ sau khi chọn showtime

• Nhấn vào nút all để lọc các đặt chỗ theo loại vé

• Nhấn vào nút Newest để sắp xếp theo thứ tự tăng dần hoặc giảm dần

• Nhấn vào nút Tickets để xem danh sách các vé

Hình 4 24 Giao diện trang thông tin danh sách vé

Trang tạo sự kiện mới

Hình 4 25 Trang chọn loại sự kiện muốn tạo

• Người dùng chọn các loại cho sự kiện

• Bấm nút “Continue” sẽ chuyển sang màn hình tạo sân khấu

Hình 4 26 Giao diện trang tạo sân khấu

• Tạo sơ đồ và loại vé cho sân khấu bằng seats.io Sau khi tạo xong, bấm nút Continue để chuyển sang màn hình tạo loại vé

Hình 4 27 Giao diện trang thông tin danh sách vé

• Ô ticket price để nhập giá vé, ô total number để nhập số lượng vé tối đa

• Ô minimum ticket để nhập số lượng vé tối thiểu có thể mua

• Ô maximun ticket để nhập số lượng vé tối đa có thể mua

• Nhấn vào nút Ticket image để chọn ảnh cho loại vé

• Nhấn nút Continue để chuyển sang màn hình tạo suất chiếu

Hình 4 28 Giao diện trang điền danh sách buổi biểu diễn

Giao diện trang đặt vé cho sự kiện

Hình 4 29 Giao diện trang chọn chỗ ngồi cho sự kiện

• Hiển thị danh sách chỗ ngồi theo từng loại vé

• Hiển thị chỗ ngồi và giá của các loại vé

• Bấm nút next để chuyển sang màn hình hiện thông tin

Hình 4 30 Giao diện trang điền thông tin đơn hàng

• Ô first name để điền tên người mua

• Ô last name để điền họ người mua

• Ô email để điền thông tin email

• Ô re-type email để xác nhận lại email

• Ô phone number để nhập số điện thoại người mua

Định dạng
Số trang	68
Dung lượng	2,79 MB