đồ á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

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN MÔN HỌC ĐỒ ÁN 1

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

Giảng viên hướng dẫn : thầy Nguyễn Tấn Toàn Sinh viên thực hiện 1 : Võ Công Bình

Mã sinh viên 1 : 21521880

Sinh viên thực hiện 2 : Lê Phan Hiển Mã sinh viên 2 : 21520839

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN MÔN HỌC ĐỒ ÁN 1

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

Giảng viên hướng dẫn : thầy Nguyễn Tấn Toàn Sinh viên thực hiện 1 : Võ Công Bình

Mã sinh viên 1 : 21521880

Sinh viên thực hiện 2 : Lê Phan Hiển Mã sinh viên 2 : 21520839

Tp HCM, tháng 12 năm 2023

ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI:

Nghiên cứu và phát triển hệ thống hỗ trợ quản lí sự kiện Tên đề tài tiếng Anh:

Research and develop event management support system

Cán bộ hướng dẫn: Thầy Nguyễn Tấn Toàn

Thời gian thực hiện: Từ ngày 05/09/2023 đến tháng 31/12/2023 Sinh viên thực hiện:

Javascript là ngôn ngữ lập trình dễ học với cả những người không có bất kỳ kiến thức gì về ngôn ngữ lập trình khác Chính vì tính phổ biến, dễ học và dễ sử dụng này mà

Express.js cho phép các tài năng trẻ tham gia và đạt được nhiều thành công trong phát triển ứng dụng web

Thông qua đề tài này, nhóm sẽ xây dựng website hỗ trợ quản lý sự kiện

Website được thiết kế để quản lý và phân phối vé cho các sự kiện, chương trình giải trí, hoặc các buổi biểu diễn khác

Hệ thống này sẽ có chức năng cơ bản như hiển thị thông tin sự kiện, bán vé trực tuyến, tương tác để chọn chỗ ngồi, thanh toán đơn giản và an toàn, … Về phía người tạo sự kiện sẽ có những chức năng chính như: quản lý sự kiện, quản lý chỗ ngồi, thống kê và báo cáo doanh thu, quản lý và kiểm tra số lượng người tham gia sự kiện, quản lý các mã giảm

giá,

2 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 cá nhân cũng như tổ chức có thể tạo sự kiện với các

chức năng quản lý thông tin đa dạng và tiện dụng 3 Phạm vi

• Phạm vi môi trường:

o Triển khai sản phẩm đề tài trên môi trường web

• Phạm vi chức năng:

o Quản lý thông tin sự kiện đã tạo

o Quản lý danh sách vé đã đặt cho sự kiện o Quản lý danh sách người tham gia sự kiện

o Quản lý danh sách người điều hành trong sự kiện

o Cho phép người dùng hoặc tổ chức đăng ký nhà tổ chức, chỉnh sửa thông tin nhà tổ chức o Quản lý mã giảm giá của sự kiện

o Tìm kiếm sự kiện theo nhu cầu o Phân loại sự kiện theo thể loại

o Cho phép thanh toán bằng phương thức thanh toán điện tử ZaloPay o Cho phép tạo sự kiện

o Thống kê, báo cáo doanh thu của sự kiện

4 Đối tượng:

• Người dùng (không đăng ký nhà tổ chức) • Người dùng (có đăng ký nhà tổ chức) • Quản trị viên (admin)

5 Phương pháp thực hiện:

• Tìm hiểu về ReactJS, NodeJS, MongoDB

• Khảo sát các website hỗ trợ quản lý sự kiện, từ đó tiến hành phân tích, xác định các yêu

cầu, tính năng cụ thể cho đề tài

• Phân tích và thiết kế hệ thống website

• Tìm hiểu quy trình thiết kế UX/UI và tiến hành thiết kế giao diện cho website • Xây dựng website cho người dùng và website cho quản trị viên

• Tiến hành triển khai và kiểm thử

6 Công nghệ:

• Front-end: ReactJS

• Back-end: NodeJS, ExpressJS • Database: MongoDB

7 Kết quả mong đợi

• Nắm bắt và áp dụng được các công nghệ mới để xây dựng sản phẩm đề tài - Hiểu rõ các nghiệp vụ, chức năng của một website hỗ trợ quản lý sự kiện - Áp dụng được các kiến thức đã học về phân tích và thiết kế hệ thống phần mềm, quy trình phát triển phần mềm, cũng như quản lý và triển khai dự án phần mềm để xây dựng website sản phẩm đề tài • Xây dựng được website hỗ trợ quản lý sự kiện đáp ứng được các yêu cầu về giao diện và

chức năng đã đề ra

Có thể thay đổi giao diện một cách linh động và mở rộng thêm các chức năng mới cho

website sản phẩm đề tài để phù hợp với nhu cầu thực tiễn trong tương lai Kế hoạch thực hiện:

Thời gian Nội dung

05/09/2022 – 16/09/2022 Tìm hiểu đề tài, đánh giá thị trường, xác định các chức năng của hệ thống

17/09/2022 – 07/10/2022 Tìm hiểu, nghiên cứu công nghệ 08/10/2022 – 17/10/2022 Phân tích và thiết kế hệ thống website

18/10/2022 – 08/11/2022 Tìm hiểu quy trình thiết kế UX/UI và thiết kế giao diện cho website

09/11/2022 – 06/12/2022 Cài đặt phần back-end, xử lý của hệ thống

06/12/2022 – 24/12/2022 Kiểm thử hệ thống và hoàn thiện báo cáo

Xác nhận của GVHD

(Ký tên và ghi rõ họ tên)

Thầy Nguyễn Tấn Toàn

TP HCM, ngày 18 tháng 02 năm 2023 Sinh viên Sinh viên

(Ký tên và ghi rõ họ tên)

Võ Công Bình

(Ký tên và ghi rõ họ tên)

Lê Phan Hiển

LỜI CẢM ƠN

Đầu tiên, nhóm thực hiện đề tài “Nghiên cứu và xây dựng hệ thống hỗ trợ quản lý sự kiện” xin gửi lời cảm ơn đến quý thầy cô đã đang giảng dạy chúng em ở ngôi trường Đại học Công nghệ thông tin – Đại học quốc gia thành phố Hồ Chí Minh những kiến thức nền tảng vững chắc để nhóm có thể tự tìm hiểu và hoàn thiện đề tài này một cách tốt nhất

Đặc biệt, chúng em xin gửi lời cảm ơn tới thầy Nguyễn Tấn Toàn vì sự tận tình hướng dẫn cũng như những góp ý, đề xuất quý báu của thầy dành cho nhóm trong quá trình thực hiện đồ án

Trong suốt thời gian qua, nhóm đã tự tìm hiểu các công nghệ mới và kết hợp với những kiến thức nền tảng trong quá trình học tập, nghiên cứu và vận dụng để thực hiện đề tài này Với quỹ thời gian có hạn cũng như kinh nghiệm xây dựng sản phẩm còn thiếu, sản phẩm đồ án cuối cùng có thể sẽ mắc phải một số sai sót và chúng em rất mong sẽ nhận được những góp ý của thầy để bổ sung, cải tiến sản phẩm cũng như nâng cao kiến thức để xây dựng các sản phẩm tiếp theo sẽ chỉn chu và hoàn thiện hơn, và tích luỹ thêm cho mình những kinh nghiệm quý giá để đáp ứng tốt cho những công việc thực tế trong tương lai

Một lần nữa, xin cảm ơn thầy vì đã đồng hành cùng chúng em trong suốt học kỳ I của năm học này

Sinh viên thực hiện

Võ Công Bình - Lê Phan Hiển

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

2.1.1 Giới thiệu về ReactJS: 17

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

2.1.3 Cách ReactJS hoạt động: 18

2.1.4 Ưu điểm của ReactJS: 18

2.1.5 Nhược điểm của ReacJS: 19

2.2 NodeJS: 19

2.2.1 NodeJS là gì? 19

2.2.2 Cách NodeJS hoạt động: 20

2.2.3 Ưu điểm của NodeJS: 20

2.2.4 Nhược điểm của NodeJS: 20

2.4.2 Ưu điểm của Bootstrap: 22

2.4.3 Nhược điểm của bootstrap: 23

2.5 MongoDB: 23

2.5.1 MongoDB là gì: 23

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

2.5.3 Ưu điểm của MongoDB: 24

2.5.4 Nhược điểm của MongoDB: 25

2.6 Render 25

2.6.1 Render là gì: 25

2.6.2 Ưu điểm của Render: 25

2.6.3 Nhược điểm của Render: 25

2.7 Netlify: 26

2.7.1 Netlify là gì: 26

2.7.2 Ưu điểm của Netlify: 26

2.7.3 Nhược điểm của Netlify: 26

CHƯƠNG 3 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 26

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

3.1.1 Yêu cầu chức năng 27

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

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

3.3.10 Tạo mã giảm giá 38

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

3.3.12 Xem danh sách đặt chỗ 40

3.3.13 Xem danh sách vé 40

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

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

3.3.16 Tạo người đồng hành 43

3.3.17 Duyệt sự kiện 44

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

CHƯƠNG 4 THIẾT KẾ GIAO DIỆN 45

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

5.2.2 Ưu điểm của đồ án: 67

5.2.3 Nhược điểm của đồ án: 67

5.3 Hướng phát triển của đồ án: 67

TÀI LIỆU THAM KHẢO 68

MỤC LỤC HÌNH ẢNH Hình 2 1 Mô tả cách Virtual DOM hoạt động 17

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

Hình 2 3 Ví dụ về React được viết bằng JSX 18

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.22 Hình 3 1 Sơ đồ use-case cho người dùng chưa đăng ký nhà tổ chức 28

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

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

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

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

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

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 database48 Hình 4 5 Giao diện trang chủ 49

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

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

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

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

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

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

Hình 4 12 Giao diện my events 54

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

DANH MỤC VIẾT TẮT

STT Ký hiệu chữ viết tắt Chữ viết đầy đủ

CHƯƠNG 1 GIỚI THIỆU ĐỀ TÀI 1.1 Tên đề tài

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

1.2 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

1.3 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

đặ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

1.4 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

1.5 Công nghệ sử dụng:

• ReactJS • NodeJS • ExpressJS • MongoDB

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

• Visual Studio Code

1.7 Công cụ hỗ trợ:

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

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT

2.1 Tổng quan về ReactJS: 2.1.1 Giới thiệu 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: 2.1.2.1 Virtual DOM:

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

• 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 <MyCounter> đượ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 <DashboardUnit> 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 đó

2.1.4 Ưu điểm của ReactJS:

• 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 • Thân thiện với SEO

• 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

2.2 NodeJS:

2.2.1 NodeJS là gì?

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

2.2.3 Ưu điểm của NodeJS:

• 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

2.2.4 Nhược điểm của NodeJS:

• 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

2.3.2 Tính năng của ExpressJS:

• 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

2.4 Bootstrap

2.4.1 Bootstrap là gì:

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

2.4.2 Ưu điểm của Bootstrap:

• 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

2.4.3 Nhược điểm của bootstrap:

• 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

• 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

Các lệnh cơ bản:

Tạo csdl use test;

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

2.5.3 Ưu điểm của MongoDB:

• 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

với MySQL

2.5.4 Nhược điểm của MongoDB:

• 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

2.6 Render

2.6.1 Render là gì:

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

2.6.2 Ưu điểm của Render:

• 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

2.6.3 Nhược điểm của Render:

• 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

2.7 Netlify:

2.7.1 Netlify là gì:

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

2.7.2 Ưu điểm của Netlify:

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

2.7.3 Nhược điểm của Netlify:

• 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

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

3.1 Phân tích yêu cầu 3.1.1 Yêu cầu chức năng

cho người dùng

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ự

đồ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é

đượ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

3.2 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

3.3 Đặc tả use-case 3.3.1 Đăng nhập

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

hệ thống

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

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

7 Kết thúc use-case

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

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

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

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

4 Kết thúc use-case

3.3.3 Đăng ký

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

khoản hệ thố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

7 Kết thúc use-case

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

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

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

3.3.5 Tìm kiếm sự kiện

kiện

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

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

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

3.3.6 Lọc sự kiện

kiện theo thời gian, mức giá, thành phố, loại, tên

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