Đồ án tốt nghiệp Công nghệ thông tin: Thiết kế và xây dựng website bán lại vé

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

Trang 1

THÀNH PHỐ HỒ CHÍ MINH

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

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN

Trang 2

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ

HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

KHÓA LUẬN TỐT NGHIỆP

NHÓM SINH VIÊN THỰC HIỆN

NGÀNH: CÔNG NGHỆ THÔNG TIN

TP HỒ CHÍ MINH, THÁNG 7 NĂM 2024

Trang 3

ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP

Họ tên SV: Nguyễn Phát Đạt ….………MSSV: 20110075

Họ tên SV: Thái Doãn Gia Bảo ……… MSSV: 20110443

Chuyên ngành: Công nghệ phần mềm

Tên đề tài: Thiết kế và xây dựng website bán lại vé

Nội dung thực hiện: Tìm hiểu và triển khai công nghệ Nestjs và Reactjs cho dự án:

_

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh phúc _

Trường Đại học Sư phạm Kỹ thuật

TP Hồ Chí Minh Khoa Công nghệ thông tin

_

Trang 4

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

Tên sinh viên: Nguyễn Phát Đạt Mã số sinh viên: 20110075

Tên sinh viên: Thái Doãn Gia Bảo Mã số sinh viên: 20110443

Tên dự án: Thiết kế và xây dựng website bán lại vé

Giảng viên hướng dẫn: PGS.TS Hoàng Văn Dũng

NHẬN XÉT

1 Về nội dung đề tài và khối lượng thực hiện:

……… ………

2 Ưu điểm:

……… ………

3 Khuyết điểm:

……… ………

4 Đánh giá loại:

……… ………

5 Điểm: ……

Thành phố Hồ Chí Minh, ngày … tháng … năm 2024

GIẢNG VIÊN HƯỚNG DẪN

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

_

Trang 5

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN

Tên sinh viên: Nguyễn Phát Đạt Mã số sinh viên: 20110075

Tên sinh viên: Thái Doãn Gia Bảo Mã số sinh viên: 20110443

Tên dự án: Thiết kế và xây dựng website bán lại vé

Giảng viên hướng dẫn: TS Lê Văn Vinh

NHẬN XÉT

1 Về nội dung đề tài và khối lượng thực hiện:

……… ………

2 Ưu điểm:

……… ………

3 Khuyết điểm:

……… ………

4 Đánh giá loại:

……… ………

5 Điểm: ……

Thành phố Hồ Chí Minh, ngày … tháng … năm 2024

GIẢNG VIÊN PHẢN BIỆN

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

_

Trang 6

LỜI CẢM ƠN

Chúng em xin gửi lời cảm ơn chân thành đến Khoa Công Nghệ Thông Tin, Trường Đại Học Sư Phạm Kỹ Thuật đã tạo điều kiện thuận lợi cho chúng em học tập và hoàn thành đề tài nghiên cứu này Đặc biệt, chúng em xin bày tỏ lòng biết

ơn sâu sắc đến thầy Hoàng Văn Dũng đã truyền đạt kiến thức và hướng dẫn chúng em trong quá trình thực hiện đề tài Em đã cố gắng vận dụng những kiến thức đã học được trong học kỳ qua để hoàn thành bài tiểu luận Nhưng do kiến thức hạn chế và không có nhiều kinh nghiệm thực tiễn nên khó tránh khỏi những thiếu sót trong quá trình nghiên cứu và trình bày Rất kính mong sự góp ý của quý thầy cô để đồ đồ án tốt nghiệp của em được hoàn thiện hơn

Một lần nữa, em xin trân trọng cảm ơn sự quan tâm giúp đỡ của các thầy cô đã giúp đỡ em trong quá trình thực hiện đồ án tốt nghiệp

Xin trân trọng cảm ơn!

TP Hồ Chí Minh, ngày … tháng … năm 2024

Nhóm sinh viên thực hiện

Trang 7

Mục lục

MỞ ĐẦU 6

1 MỤC TIÊU 6

2 LÝ DO CHỌN ĐỀ TÀI 6

3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU 7

4 KẾT QUẢ DỰ KIẾN 7

5 NỘI DUNG PHÁT TRIỂN THÊM TỪ TIỂU LUẬN CHUYÊN NGÀNH: 8

PHẦN NỘI DUNG 9

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

1.1 ReactJS: 9

1.2 NestJS: 10

1.3 MariaDB: 11

CHƯƠNG 2 XÁC ĐỊNH VÀ MÔ HÌNH HÓA YÊU CẦU 13

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

2.2 Yêu cầu đối với hệ thống: 17

CHƯƠNG 3 THIẾT KẾ HỆ THỐNG 19

3.1 Lược đồ Use Case của hệ thống: 19

3.2 Danh sách các Usecase: 19

3.3 Đặc tả Use Case 20

3.4 Lược đồ Sequence: 35

3.5 Lược đồ quan hệ: 44

3.6 Thiết kế giao diện: 45

3.6.1 Thiết kế giao diện người dùng 45

3.6.1.1 Giao diện trang Home: 45

3.6.1.2 Giao diện đăng nhập: 46

3.6.1.3 Giao diện đăng ký 47

3.6.1.4 Giao diện thông tin người dùng: 48

3.6.1.5 Giao diện thông tin vé: 49

3.6.1.6 Giao diện mua vé: 49

3.6.1.7 Giao diện bán vé: 52

3.6.2.Giao diện Admin: 57

3.6.2.1 Giao diện Dashboard: 58

3.6.2.2 Giao diện quản lý tài khoản khách hàng: 59

Trang 8

3.6.2.3 Giao diện quản lý vé: 59

3.6.2.4 Giao diện tạo vé: 60

3.6.2.5 Giao diện quản lý đăng ký bán vé của khách hàng: 61

3.6.2.6 Giao diện quản lý voucher: 62

3.6.2.7 Giao diện quản lý rút tiền: 63

3.6.2.8 Giao diện quản lý vé đã mua: 64

3.6.2.9 Giao diện quản lý phí shipping: 64

3.6.2.10 Giao diện quản lý phí sự kiện Clearance: 65

3.6.2.11 Giao diện quản lý phản hồi/báo cáo của khách hàng: 67

CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ 68

4.1 Các công cụ 68

4.2 Các công nghệ 68

4.3 Cài đặt 68

4.4 Kiểm thử 75

KẾT LUẬN 77

TÀI LIỆU THAM KHẢO 80

Trang 9

DANH MỤC CÁC BẢNG BIỂU

Bảng 2 1: So sánh ưu và nhược điểm của website 17

Bảng 2 2: Các yêu cầu đối với hệ thống 17

Bảng 3 1: Danh sách các Usecase trong hệ thống 19

Bảng 3 2: Use case đăng ký 20

Bảng 3 3: UseCase Tìm kiếm vé 21

Bảng 3 4: UseCase Xem danh mục sự kiện 22

Bảng 3 5: UseCase Xem chi tiết vé 22

Bảng 3 6: UseCase Đăng nhập 23

Bảng 3 7: UseCase Mua vé 24

Bảng 3 8: UseCase Thanh toán 24

Bảng 3 9: UseCase Quên mật khẩu 25

Bảng 3 10: UseCase Quản lý thông tin tài khoản 26

Bảng 3 11: UseCase Bán vé 26

Bảng 3 12: UseCase Rút tiền 27

Bảng 3 13: UseCase Quản lý tài khoản khách hàng 28

Bảng 3 14: UseCase Quản lý sự kiện 28

Bảng 3 15: UseCase Quản lý đăng ký bán vé 29

Bảng 3 16: UseCase Quản lý voucher 30

Bảng 3 17: UseCase Quản lý rút tiền 31

Bảng 3 18: UseCase Quản lý mua vé 31

Bảng 3 19: Usecase Quản lý phí ship 32

Bảng 3 20: UseCase Quản lý phí sự kiện Clearance 33

Bảng 3 21: UseCase Quản lý khiếu nại báo cáo 33

Bảng 3 22: UseCase Thêm sự kiện 34

Bảng 3 23: UseCase Thêm voucher 35

Bảng 3 24: Bảng chú thích giao diện trang Home 45

Bảng 3 25: Bảng chú thích giao diện đăng nhập 46

Bảng 3 26: Chú thích giao diện đăng ký 47

Bảng 3 27: Chú thích giao diện mua vé 52

Bảng 3 28: Chú thích giao diện bán vé 54

Bảng 3 29: Chú thích giao diện đấu giá vé 57

Bảng 3 30: Chú thích giao diện Dashboard 58

Bảng 3 31: Chú thích giao diện quản lý tài khoản khách hàng 59

Bảng 3 32: Chú thích giao diện quản lý vé 60

Bảng 3 33: Chú thích giao diện tạo vé 61

Bảng 3 34: Chú thích giao diện quản lý đăng ký bán vé của khách hàng 61

Bảng 3 35: Chú thích giao diện quản lý voucher 62

Bảng 3 36: Chú thích giao diện quản lý rút tiền 63

Bảng 3 37: Chú thích giao diện quản lý vé đã mua 64

Bảng 3 38: Chú thích giao diện quản lý phí shipping 65

Bảng 3 39: Chú thích giao diện quản lý phí sự kiện Clearance 66

Bảng 3 40: Chú thích giao diện quản lý phản hồi/báo cáo của khách hàng 67

Bảng 4 1: Các công cụ 68

Bảng 4 2: Các công nghệ 68

Bảng 4 3: Kiểm thử 75

Trang 10

DANH MỤC CÁC HÌNH ẢNH

Hình 2 1: Giao diện trang chủ website StubHub 13

Hình 2 2: Thanh tìm kiếm sự kiện StubHub 14

Hình 2 3: Danh mục các sự kiện (Sports, Concert, ) 14

Hình 2 4: Các sự kiện được đề xuất 14

Hình 2 5: Các sự kiện được đề xuất 15

Hình 2 6: Giao diện bán lại vé khi không còn nhu cầu 15

Hình 2 7: Giao diện mua vé 16

Hình 2 8: Giao diện bán vé 16

Hình 3 1: Lược đồ Use Case của hệ thống 19

Hình 3 2: <Guest>Đăng ký 36

Hình 3 3: <User>Đăng nhập 37

Hình 3 4: <Admin> Quản lý tài khoản khách hàng 38

Hình 3 5: <Guest,User> Tìm kiếm vé 38

Hình 3 6: <Guest,User> Xem danh mục sự kiện 39

Hình 3 7: <User> Mua vé 40

Hình 3 8: <User> Thanh toán 41

Hình 3 9: <User> Thông tin thông báo 42

Hình 3 10: <User> Xem thông tin cá nhân 42

Hình 3 11: <User> Bán vé 43

Hình 3 12: Lược đồ quan hệ 44

Hình 3 13: Giao diện trang Home 45

Hình 3 14: Giao diện đăng nhập 46

Hình 3 15: <Bước 1> Giao diện đăng ký 47

Hình 3 16: <Bước 2,3> Giao diện đăng ký 47

Hình 3 17: <Bước 1> Giao diện thông tin người dùng 48

Hình 3 18: <Bước 2> Giao diện thông tin người dùng 48

Hình 3 19: Giao diện thông tin vé 49

Hình 3 20: <Bước 1> Giao diện mua vé 49

Hình 3 25: <Bước 1> Giao diện bán vé 52

Hình 3 29: Giao diện thông báo đăng ký bán vé thành công và chờ Admin xét duyệt 55

Hình 3 30: Giao diện thông báo đăng ký bán vé thành công 55

Hình 3 31: <Bước 1> Giao diện đáu giá vé 56

Hình 3 34: Giao diện đăng nhập vào trang Admin 58

Hình 3 35: Giao diện Dashboard 58

Hình 3 36: Giao diện quản lý tài khoản khách hàng 59

Hình 3 37: Giao diện quản lý vé 59

Hình 3 38: <Bước 1> Giao diện tạo vé 60

Trang 11

Hình 3 39: <Bước 2> Giao diện tạo vé 60

Hình 3 40: Giao diện quản lý đăng ký bán vé của khách hàng 61

Hình 3 41: Giao diện quản lý voucher 62

Hình 3 42: Giao diện thêm voucher 62

Hình 3 43: Giao diện quản lý rút tiền 63

Hình 3 44: Giao diện quản lý vé đã mua 64

Hình 3 45: <Bước 1> Giao diện quản lý phí shipping 64

Hình 3 46: <Bước 2> Giao diện quản lý phí shipping 65

Hình 3 47: Giao diện quản lý phí sự kiện Clearance 65

Hình 3 48: Giao diện quản lý phí sự kiện Clearance 66

Hình 3 49: Giao diện quản lý phản hồi/báo cáo của khách hàng 67

Hình 4 1: <Bước 2> Cài đặt Backend 69

Hình 4 2: <Bước 3> Cài đặt Backend 69

Hình 4 3: <Bước 2> Cài đặt Docker 69

Hình 4 4: <Bước 2> Cài đặt Frontend 69

Hình 4 5: <Bước 3> Cài đặt Frontend 70

Hình 4 6: <Bước 2> Cài đặt Admin 70

Hình 4 7: <Bước 3> Cài đặt Admin 70

Hình 4 8: <Bước 1> Kết nối Database 71

Hình 4 12: Database đã được kết nối 74

Hình 4 13: Khởi động Docker 74

Hình 4 14: Thiết kế mô hình khán đài từ thực tế 78

Trang 12

− Đảm bảo tính bảo mật và an toàn cho thông tin cá nhân của khách hàng

− Xây dựng cơ sở dữ liệu sản phẩm đa dạng và phong phú để đáp ứng nhu cầu mua sắm đa dạng của khách hàng

− Tối ưu hóa quy trình vận chuyển và giao hàng để đảm bảo sự hài lòng của khách hàng về thời gian và chất lượng dịch vụ

2 LÝ DO CHỌN ĐỀ TÀI

Tình trạng lừa đảo trong giao dịch mua bán lại vé cho các sự kiện giải trí ở chợ đen đang là một vấn đề đáng lo ngại Trong thế giới kỹ thuật số ngày nay, nhiều người mua và người bán vé đã trở thành nạn nhân của các hình thức lừa đảo tinh vi

Trên chợ đen, có những người không đạo đức tạo ra các trang web giả mạo, sử dụng thông tin giả và hình thức thanh toán không an toàn để lừa đảo người mua Họ có thể bán vé giả, nhận tiền trước và không giao vé, hoặc thậm chí bán cùng một vé cho nhiều người khác nhau Một số người mua cũng có thể sử dụng thủ thuật để lừa người bán, chẳng hạn như sử dụng thông tin cá nhân giả mạo

Với sự gia tăng của thị trường vé giải trí và sự quan tâm của người hâm mộ, việc lựa chọn mua vé tại các nguồn tin cậy và thực hiện các biện pháp an toàn trong giao dịch trở nên càng quan trọng hơn bao giờ hết Điều này bao gồm kiểm tra tính xác đáng tin cậy của người bán, sử dụng phương thức thanh toán an toàn, và kiểm tra thông tin chi tiết về vé trước khi mua Việc làm này sẽ giúp ngăn chặn tình trạng lừa đảo và bảo

vệ quyền lợi của người mua và người bán

Vì thế nhóm em quyết định tạo ra một website “Resell ticket” để khắc phục tình trạng này

Trang 13

3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU

Đối tượng: Đối tượng nghiên cứu bao gồm khách hàng tiềm năng và quản trị

viên của trang web mua bán vé sự kiện Chúng em sẽ tiến hành cuộc khảo sát và thu thập ý kiến phản hồi từ họ để đánh giá và cải thiện dự án

Phạm vi: Phạm vi của dự án tập trung vào việc phát triển trang web, từ việc xây

dựng giao diện người dùng đến tạo cơ sở dữ liệu sản phẩm và quy trình giao hàng Không chỉ xem xét khía cạnh kỹ thuật mà còn tối ưu hóa trải nghiệm người dùng và quản lý hệ thống đối với quản trị viên

4 KẾT QUẢ DỰ KIẾN

Lý thuyết:

- Tìm hiểu RESTful API với NestJS

- Tìm hiểu về framework ReactJS

- Tìm hiểu về database Mariadb

- Tìm hiểu về SocketIO, Queue, Redis, Docker

Thực hành:

- Xây dựng Website Resell Ticket, với các tính năng chính như sau:

➢ User:

- Đăng ký, đăng nhập vào trang web

- Lựa chọn lĩnh vực cần mua lại vé (concert,sport,art )

- Tìm kiếm các sự kiện, thông tin về vé

Trang 14

- Quản lý rút tiền

- Quản lý voucher

- Quản lý mua vé

- Quản lý phí ship

- Quản lý phí sự kiện Clearance (sự kiện nhỏ hoặc không chính thống)

- Quản lý khiếu nại, báo cáo đơn hang

- Thêm sự kiện

5 NỘI DUNG PHÁT TRIỂN THÊM TỪ TIỂU LUẬN CHUYÊN

NGÀNH:

- Phát triển hệ thống đấu giá cho khách hàng

Trang 15

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

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 16

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

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 17

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

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

Trang 18

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

Trang 19

CHƯƠNG 2 XÁC ĐỊNH VÀ YÊU CẦU HỆ THỐNG 1.1 Khảo sát hiện trạng: Trang web mua bán vé cho các sự kiện giải trí

Các hình ảnh minh họa

Hình 2 1: Giao diện trang chủ website StubHub

Nguồn: https://www.stubhub.com/

Trang 20

Hình 2 2: Thanh tìm kiếm sự kiện StubHub

Trang 21

Hình 2 5: Các sự kiện được đề xuất

Hình 2 6: Giao diện bán lại vé khi không còn nhu cầu

Trang 22

Hình 2 7: Giao diện mua vé

Hình 2 8: Giao diện bán vé

Trang 23

Bảng 2 1: So sánh ưu và nhược điểm của website

Giao diện dễ dùng

Chính sách hoàn tiền rõ rang

Tính năng công nghệ tiên tiến

(di động, bản đồ chỗ ngồi)

Phí dịch vụ cao Giá vé chênh lệch

Hỗ trợ khách hàng chậm

Nguồn: Sinh viên thực hiện

1.2 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

+ Tìm kiếm + Xem danh mục + Xem chi tiết vé + Mua vé

+ Quên mật khẩu

+ 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

+ Quản lý sự kiện + Quản lý mua vé + Quản lý rút tiền

Trang 24

+ 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

Trang 25

CHƯƠNG 3 PHÂN TÍCH HỆ THỐNG 3.1 Lược đồ Use Case của hệ thống:

Hình 3 1: Lược đồ Use Case của hệ thống

3.2 Danh sách các Usecase:

Bảng 3 1: Danh sách các Usecase trong hệ thống

Trang 26

6 Mua vé User

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

(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.1) 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.2) Guest nhập thông tin không đúng định dạng, hệ thống thông báo nhập lại

(E4.3) Thông tin về “password” và “confirm password” không giống nhau, hệ thống thông báo nhập lại

(E4.4) “password” phải có chữ số, chữ cái thường, chữ cái viết hoa và ký tự đặc biệt

Bảng 3 3: UseCase Tìm kiếm sự kiện Use Case ID GU01

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

Short Description Use case này cho phép thực hiện tìm kiếm sự kiện

Actors Guest, User

Trigger Người dùng tìm kiếm sự kiện

Post-conditions Được tìm kiếm sản phẩm

Main Flow (1) Nhập sự kiện cần tra trên thanh tìm kiếm ở trên thanh tìm

kiếm (2) Hệ thống tra từ vừa gõ trong database và lấy danh sách các

sự kiện liên quan

Trang 28

(3) Hệ thống hiển thị một danh sách các sự kiện liên quan đến

kí tự vừa gõ (4) Nhấn vào từ gợi ý tương ứng muốn xem (5) Hệ thống chuyển hướng đến trang chủ và hiển thị list sự kiên liên quan đến từ khóa

Exception Flow(s) (E3.1) Không hiển thị khi không có từ nào trùng khớp

Bảng 3 4: UseCase Xem danh mục sự kiện Use Case ID GU02

Use Case Xem danh mục sự kiện

Short Description Use case cho phép xem danh mục sự kiện

Trigger Người dùng vào xem thông tin chi tiết sản phẩm

Post-conditions Xem được thông tin chi tiết sản phẩm

Main Flow (1) Ở trang Home sẽ có 1 navbar chứa các danh mục sự kiện

(2) Người dùng nhấn vào mục sự kiện nào muốn xem (3) Hệ thống chuyển hướng đến trang bán những vé liên quan

về danh mục sự kiện đó (vé concert,vé xem bóng đá, )

Exception Flow(s)

Bảng 3 5: UseCase Xem chi tiết vé Use Case ID GU03

Use Case Xem chi tiết vé

Trang 29

Short Description Use case cho phép xem thông tin chi tiết sản phẩm

Trigger Người dùng vào xem thông tin chi tiết sản phẩm

Post-conditions Xem được thông tin chi tiết sản phẩm

Main Flow (1) Người dùng nhấn vào vé cần xem

(2) Hệ thống chuyển hướng đến trang thông tin chi tiết của vé

Bảng 3 6: UseCase Đăng nhập Use Case ID GUA01

Use Case Đăng nhập

Short Description Use case này cho phép thực hiện đăng nhập tài khoản

Actors User

Trigger Người dùng/ Admin thực hiện đăng nhập tài khoản

Pre-conditions Người dùng đã đăng ký tài khoản

Post-conditions Đăng nhập thành công

Main Flow (1) Ở trang Home chọn “Login”

(2) Điền thông tin đăng nhập (“email” và “password”) (3) Ấn nút “Login”

(4) Hệ thống kiểm tra thông tin vừa nhập và chuyển hướng tới trang chủ

Alternate Flow(s): (A4.1) Tích vào ô “Save account” sẽ lưu lại session ở máy tính

đang sử dụng và sẽ tự đăng nhập sẵn

Trang 30

Exception Flow(s) (E4.1) Đ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 (E5.1) Khi nhập không có “@gmail.com” sẽ hiển thị “Invalid

email address”

Bảng 3 7: UseCase Mua vé Use Case ID GU04

Use Case Mua vé

Short Description Use case mua vé

Actors User

Trigger Người dùng mua hàng trực tiếp

Pre-conditions Người dùng có thể không cần đăng nhập hoặc đăng nhập rồi

Post-conditions Đặt vé thành công

Main Flow (1) Nhấn vào vé cần mua

(2) Hệ thống chuyển hướng đến trang thông tin vé (3) Ấn “Buy”

(4) Người dùng chọn các thông tin vé liên quan đến chỗ ngồi

và nhấn vào các vé có sẵn (5) Hệ thống chuyển hướng đến trang Product Detail

Bảng 3 8: UseCase Thanh toán Use Case ID GU05

Use Case Thanh toán

Short Description Use case thanh toán

Actors User

Trang 31

Trigger Người dùng mua hàng trực tiếp

Pre-conditions Người dùng có thể không cần đăng nhập hoặc đăng nhập rồi

Exception Flow(s) (E5.1) Nhập sai thông tin ví Paypal và hệ thống sẽ báo lỗi

Bảng 3 9: UseCase Quên mật khẩu Use Case ID GA01

Use Case Quên mật khẩu

Short Description Lấy lại mật khẩu tài khoản đã đăng ký

Actors User

Trigger Người dùng quên mật khẩu và muốn lấy lại

Post-conditions Lấy lại mật khẩu thành công

Main Flow (1) Nhấn vào quên mật khẩu ở trang đăng nhập

(2) Hệ thống chuyển hướng đến trang quên mật khẩu (3) Điền “email” và nhấn “Send OTP”

(4) Hệ thống sẽ gửi mail về email đã điền và nhập OTP vào ô tiếp theo

(5) Nhập “password” và “confirm password”

Trang 32

(6) Vào “Change password”

Exception Flow(s) (E5.1) Hệ thống thông báo “Email is required” cho đến khi

nhập email đúng (E6.1) Hệ thống thông báo sai OTP và không thể thay đổi mật khẩu

Bảng 3 10: UseCase Quản lý thông tin tài khoản Use Case ID U01

Use Case Xem thông tin tài khoản

Short Description Use case cho phép người dùng quản lý thông tin tài khoản

Actors User

Trigger Người dùng vào xem thông tin tài khoản

Pre-conditions Người dùng cần đăng nhập thành công

Post-conditions Xem thông tin tài khoản

Main Flow (1) Người dùng nhấn vào phần “My page”

(2) Hệ thống chuyển hướng đến trang thông tin tài khoản cá nhân

Bảng 3 11: UseCase Bán vé Use Case ID U02

Use Case Bán vé

Short Description Use case cho phép người dùng bán vé

Actors User

Trigger Người dùng cần bán vé

Trang 33

Pre-conditions Người dùng cần đăng nhập thành công

Post-conditions Bán vé thành công

Main Flow (1) Người dùng nhấn vào vé cần bán

(2) Hệ thống chuyển hướng đến trang thông tin vé (3) Nhấn vào “Sell”

(4) Hệ thống chuyển hướng đến trang seller registration và nhấn “Register”

(5) Hệ thống hiện form điền thông tin “email” ,hình ảnh vé và hình ảnh ví Paypal

(6) Nhập thông tin vé và nhấn đăng ký bán

Bảng 3 12: UseCase Rút tiền Use Case ID U03

Use Case Rút tiền

Short Description Use case cho phép người dùng rút tiền khi bán vé thành công

Actors User

Trigger Rút tiền về Paypal

Pre-conditions Người dùng cần đăng nhập thành công và bán vé thành công

Post-conditions Rút tiền thành công

Main Flow (1) Sau khi thực hiện giống usecase Bán vé và bán vé thành

công (2) Hệ thống sẽ thông báo đã bán vé thành công (3) Tiền sẽ được giữ ở ví ảo của web và admin xác nhận thành công

Trang 34

(4) Tiền sẽ được rút thẳng về Paypal của người dùng

Bảng 3 13: UseCase Quản lý tài khoản khách hàng Use Case ID A01

Use Case Quản lý khách hàng

Short Description Use case này cho phép Admin xem thông tin tài khoản của

khách hàng

Trigger Actor quản lý thông tin tài khoản của khách hàng

Pre-conditions Phải là Admin

Post-conditions Xem thông tin tài khoản người dùng

Main Flow (1) Người dùng đăng nhập vào hệ thống

(2) Người dùng chọn "User Management"

(3) Hệ thống hiển thị thông tin tài khoản hiện tại

(4) Người dùng có thể xem thông tin cá nhân khách hàng

Bảng 3 14: UseCase Quản lý sự kiện Use Case ID A02

Use Case Quản lý sự kiện

Short Description Use case này cho phép Admin xem chi tiết các sự kiện

Trigger Actor quản lý thông tin sự kiện

Trang 35

Post-conditions Xem thông tin sự kiện

(2) Người dùng chọn "Event Management"

(3) Hệ thống hiển thị thông tin các sự kiện (4) Người dùng có thể xem chi tiết các sự kiện, ngoài ra có thể tìm kiếm trên thanh công cụ hoặc lọc theo từng trạng thái,

Bảng 3 15: UseCase Quản lý đăng ký bán vé Use Case ID A03

Use Case Quản lý đăng ký bán vé

Short Description Use case này cho phép Admin xem các thông tin đăng ký bán

vé từ khách hàng và có thể cấp phép cho vé

Trigger Actor quản lý thông tin đăng ký bán vé và cấp phép

Post-conditions Xem thông tin đăng ký bán vé và cấp phép

(2) Người dùng chọn "Register Sell Management"

(3) Hệ thống hiển thị thông tin các vé được đăng ký bán (4) Người dùng có thể xem chi tiết các vé được đăng ký bán (5) Người dùng có thể “Approve” hoặc “Reject” vé của khách hàng đăng ký bán

Trang 36

(6) Nếu “Approve” thì hệ thống sẽ thông báo “Approve Succesfully”, nếu “Reject” thì hệ thống sẽ thông báo “Reject Succesfully”

Bảng 3 16: UseCase Quản lý voucher Use Case ID A04

Use Case Quản lý voucher

Short Description Use case này cho phép Admin xem và tạo các voucher

Trigger Actor quản lý voucher của hệ thống

Post-conditions Xem chi tiết các voucher và tạo voucher

(2) Người dùng chọn "Coupon Management"

(3) Hệ thống hiển thị thông tin các voucher đã được tạo (4) Người dùng có thể xem chi tiết các voucher

(5) Người dùng có thể tạo một voucher mới bằng cách nhấn

Trang 37

Bảng 3 17: UseCase Quản lý rút tiền

Use Case ID A05

Use Case Quản lý rút tiền

Short Description Use case này cho phép Admin xem thông tin các lần yêu cầu

rút tiền và cấp phép cho yêu cầu đó

Trigger Actor quản lý thông tin yêu cầu rút tiền và cấp phép

Post-conditions Xem thông tin yêu cầu rút tiền và cấp phép

(2) Người dùng chọn "Withdraw Management"

(3) Hệ thống hiển thị các yêu cầu rút tiền của khách hàng (4) Người dùng có thể xem chi tiết các yêu cầu từ tài khoản khách hàng và có thể cấp phép cho yêu cầu đó

(5) Người dùng có thể “Approve” hoặc “Reject” yêu cầu rút tiền của khách hàng

Bảng 3 18: UseCase Quản lý mua vé Use Case ID A06

Use Case Quản lý mua vé

Short Description Use case này cho phép Admin xem thông tin các vé đã được

mua

Trang 38

Actors Admin

Trigger Actor quản lý thông tin các vé đã được mua

Post-conditions Xem thông tin các vé đã được mua

(2) Người dùng chọn "Order Management"

(3) Hệ thống hiển thị thông tin các vé đã được mua (4) Người dùng có thể xem chi tiết bằng cách nhấn vào icon con mắt để xem tài khoản nào đã mua vé

Bảng 3 19: Usecase Quản lý phí ship Use Case ID A07

Use Case Quản lý phí ship

Short Description Use case này cho phép Admin chính sửa thông tin phí ship mặc

định

Trigger Actor quản lý thông tin phí ship

Post-conditions Chỉnh sửa thông tin phí ship

(2) Người dùng chọn "Shipping Fee Management"

(3) Hệ thống hiển thị phí ship mặc định (4) Người dùng có thể chỉnh sửa phí ship bằng các bấm vào

“Set new shipping fee”

Trang 39

(5) Hệ thống hiển thị ô “New shipping fee”, điền vào phí ship

và nhấn “Save” để lưu

Bảng 3 20: UseCase Quản lý phí sự kiện Clearance Use Case ID A08

Use Case Quản lý phí sự kiện Clearance

Short Description Use case này cho phép Admin chính sửa thông tin phí

Clearance hệ thống mặc định

Trigger Actor quản lý thông tin phí hệ thống Clearance

Post-conditions Chỉnh sửa thông tin phí hệ thống Clearance

(2) Người dùng chọn "Clearance Fee Management"

(3) Hệ thống hiển thị phí Clearancemặc định (4) Người dùng có thể chỉnh sửa phí Clearance bằng các bấm vào “Set new clearance fee”

(5) Hệ thống hiển thị ô “New clearance platform fee” và “New clearance comission fee”, điền vào và nhấn “Save” để lưu

Bảng 3 21: UseCase Quản lý khiếu nại báo cáo Use Case ID A09

Use Case Quản lý khiếu nại báo cáo

Trang 40

Short Description Use case này cho phép Admin xem thông tin các khiếu nại báo

cáo và cấp phép cho yêu cầu đó

Trigger Actor quản lý thông tin khiếu nại báo cáo

Post-conditions Xem thông tin khiếu nại báo cáo và cấp phép

(2) Người dùng chọn "Report Management"

(3) Hệ thống hiển thị phí Clearancemặc định (4) Người dùng có thể xem thông tin các khiếu nại báo cáo (5) Người dùng có thể “Approve” hoặc “Reject” yêu cầu rút tiền của khách hàng

Bảng 3 22: UseCase Thêm sự kiện Use Case ID A10

Use Case Thêm sự kiện

Short Description Use case này cho phép Admin thêm thông tin sự kiện

Trigger Actor thêm thông tin sự kiện

Post-conditions Thêm thông tin sự kiện

Tiêu đề	Thiết kế và xây dựng website bán lại vé
Tác giả	Nguyễn Phát Đạt, Thái Doãn Gia Bảo
Người hướng dẫn	PGS.TS. Hoàng Văn Dũng, TS. Lê Văn Vinh
Trường học	Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh
Chuyên ngành	Công nghệ thông tin
Thể loại	Đồ án tốt nghiệp
Năm xuất bản	2024
Thành phố	Thành phố Hồ Chí Minh

Định dạng
Số trang	87
Dung lượng	9,65 MB