Nghiên cứu và xây dựng hệ thống hỗ trợ quản lý sự kiện trực tuyến

MỤC LỤC

GIỚI THIỆU ĐỀ TÀI

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,…. Đ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.

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. 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.

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. 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Ơ SỞ LÝ THUYẾT

NodeJS
ExpressJS
Bootstrap
MongoDB
Render
Netlify

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. 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ạ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ủ. • 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,. • 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.

- 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. • 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.

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

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

Phân tích yêu cầu .1 Yêu cầu chức nă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. 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. • 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.

Đặc tả use-case .1 Đăng nhập

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. Đ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. 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á.

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 “My organization profile” ở mục thông tin cá nhân. 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ấn vào nút “My organization profile” ở mục thông tin cá nhân. 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. 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.

THIẾT KẾ GIAO DIỆN

Trang đăng nhập

• Khi click vào nút Log in | Sign up, sẽ dẫn vào trang đăng nhập, đăng kí của Website. • 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ệ. • 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ý

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

Trang chủ

• 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

• 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 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 đó.

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

Trang lọc sự kiện

• 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

• Nhấn vào dropdown button bên cạnh display per page để chọn số sự kiện muốn hiển thị. • 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á .1 Giao diện

• 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 nút Add new discount code sẽ hiển thị modal tạo mã giảm giá.

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

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

• 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é.

Trang thông tin đặt chỗ, số vé đã bán .1 Giao diện

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

Trang tạo sự kiện mới .1 Giao diện

Sau khi tạo xong, bấm nút Continue để chuyển sang màn hình tạo loại vé. • Ô ticket price để nhập giá vé, ô total number để nhập số lượng vé tối đa.