đồ án 1 xây dựng hệ thống quản trị sân bóng footex

Chính nhận thức về điều này đã thúc đẩy chúng tôi xây dựng ứng dụng web "Footex" - một hệ thống quản trị sân bóng nhằm hỗ trợ chủ sân bóng trong việc quản lý các sân bóng, các chi nhánh

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

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

ĐỒ ÁN 1

XÂY DỰNG HỆ THỐNG

QUẢN TRỊ SÂN BÓNG - FOOTEX

GIẢNG VIÊN HƯỚNG DẪN: ThS NGUYỄN TẤN TOÀN

SINH VIÊN THỰC HIỆN: TRẦN TUẤN KIỆT - 21522266 TRẦN THỊ TUYẾT MAI - 21520340

TP HỒ CHÍ MINH, 2023

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

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

ĐỒ ÁN 1

XÂY DỰNG HỆ THỐNG

QUẢN TRỊ SÂN BÓNG - FOOTEX

GIẢNG VIÊN HƯỚNG DẪN: ThS NGUYỄN TẤN TOÀN

SINH VIÊN THỰC HIỆN: TRẦN TUẤN KIỆT - 21522266 TRẦN THỊ TUYẾT MAI - 21520340

TP HỒ CHÍ MINH, 2023

LỜI CẢM ƠN

Đầu tiên, chúng tôi xin gửi lời cảm ơn chân thành đến thầy Nguyễn Tấn Toàn Thầy đã trực tiếp hướng dẫn, tận tình chia sẻ những kiến thức, hỗ trợ và đóng góp những ý kiến quý báu để giúp chúng tôi hoàn thành thật tốt đồ án và báo cáo của mình

Trong thời đại công nghệ phát triển mạnh mẽ vượt bậc ngày nay, việc quản trị và kinh doanh sân bóng đòi hỏi sự hiệu quả và tiện lợi Chính nhận thức về điều này đã thúc đẩy chúng tôi xây dựng ứng dụng web "Footex" - một hệ thống quản trị sân bóng nhằm hỗ trợ chủ sân bóng trong việc quản lý các sân bóng, các chi nhánh và tối ưu hóa quy trình kinh doanh Đồng thời, ứng dụng cũng mang đến cho khách hàng một trải nghiệm đặt sân trực tuyến thuận tiện và dễ dàng tìm kiếm các sân bóng chất lượng từ các chi nhánh mà chủ sân cung cấp trên hệ thống Ngoài ra khách hàng còn có thể tạo đội bóng hoặc tham gia đội bóng khác từ đó có thể tham gia các giải đấu mà chủ sân tổ chức

Trong quá trình thực hiện đồ án, chúng tôi không tránh khỏi những thách thức và sai sót, nhưng sự hỗ trợ và góp ý chân thành từ thầy đã giúp chúng tôi vượt qua những khó khăn và hoàn thiện đồ án một cách tốt nhất Chúng tôi xin cam kết sẽ tiếp thu và áp dụng những kinh nghiệm quý báu này để nâng cao khả năng thực hiện các dự án tương lai

Một lần nữa, chúng tôi xin chân thành cảm ơn thầy Nguyễn Tấn Toàn và hy vọng sự đóng góp của thầy sẽ tiếp tục giúp đỡ và hỗ trợ chúng tôi trong hành trình học tập và nghiên cứu trong tương lai

Xin chân thành cảm ơn quý thầy cô!

Nhóm sinh viên thực hiện: Trần Tuấn Kiệt - 21522266 Trần Thị Tuyết Mai - 21520340

1.5.3 Phạm vi khoa học và công nghệ 71.6 Tổng quan về đồ án 8Chương 2 CƠ SỞ LÝ THUYẾT 92.1 Thiết kế giao diện người dùng Figma 92.1.1 Tổng quan về Figma 92.1.2 Cách thức hoạt động 9

2.2 Ngôn ngữ lập trình JavaScript 102.2.1 Lịch sử hình thành JavaScript 11

2.2.4 JavaScript Framework 122.3 Ngôn ngữ lập trình TypeScript 13

2.5.1 Tổng quan về NextJS 172.5.2 Tại sao nên sử dụng NextJS? 18

2.6.1 Tổng quan về NodeJS 202.6.2 Cách thức hoạt động 21

2.7.1 Tổng quan về ExpressJS 222.7.2 Tính năng của ExpressJS 23

2.8 MongoDB 252.8.1 Tổng quan về MongoDB 252.8.2 Tính năng của MongoDB 26

2.9 Phần mềm lập trình VSCode 282.9.1 Tổng quan về VSCode 28

3.1.3.10 Usecase Cập nhật kết quả giải đấu 463.1.3.11 Usecase Xem thông tin chi nhánh 473.1.3.12 Usecase Thống kê doanh thu 483.2 Đặc tả Usecase hệ thống khách hàng 50

3.2.2 Danh sách Usecase 503.2.3 Đặc tả Usecase 513.2.3.1 Usecase Đăng nhập 513.2.3.2 Usecase Đăng ký 523.2.3.3 Usecase Xem thông tin sân bóng 543.2.3.4 Usecase Xem các sân bóng đã đặt 553.2.3.5 Usecase Xem các sân bóng đã lưu 563.2.3.6 Usecase Tạo đội bóng 573.2.3.7 Usecase Xem thông tin đội bóng 583.2.3.8 Usecase Tham gia đội bóng khác 593.2.3.9 Usecase Đánh giá đội bóng khác 613.2.3.10 Usecase Tham gia giải đấu 623.2.3.11 Usecase Báo cáo 633.3 Đặc tả Usecase hệ thống quản trị ứng dụng 65

3.3.2 Danh sách Usecase 653.3.3 Đặc tả Usecase 663.3.3.1 Usecase Đăng nhập 663.3.3.2 Usecase Phản hồi đăng ký tài khoản chủ sân 67

3.3.3.3 Usecase Xem thông tin chủ sân 683.3.3.4 Usecase Xem thông tin chi nhánh 693.3.3.5 Usecase Xem thông tin đội bóng 703.3.3.6 Usecase Xem thông tin khách hàng 713.3.3.7 Usecase Xem báo cáo 723.4 Phân tích hệ thống 733.4.1 Tổng quan kiến trúc hệ thống: 733.4.2 Ưu điểm của kiến trúc MVC: 743.4.3 Nhược điểm của kiến trúc MVC: 75

3.5.1 Sơ đồ cơ sở dữ liệu 763.5.2 Mô tả chi tiết các kiểu dữ liệu 76Chương 4 XÂY DỰNG ỨNG DỤNG 824.1 Thiết kế giao diện 824.1.1 Sơ đồ liên kết các màn hình 824.1.1.1 Sơ đồ liên kết các màn hình role quản trị của chủ sân bóng 824.1.1.2 Sơ đồ liên kết các màn hình role khách hàng 824.1.1.3 Sơ đồ liên kết các màn hình role quản trị ứng dụng 834.1.2 Danh sách các màn hình 844.1.2.1 Hệ thống quản trị của chủ sân bóng 844.1.2.2 Hệ thống khách hàng 854.1.2.3 Hệ thống quản trị ứng dụng 86

4.1.3.1 Các màn hình hệ thống quản trị của chủ sân 87

4.1.3.2 Các màn hình hệ thống khách hàng 964.1.3.3 Các màn hình hệ thống quản trị ứng dụng 1154.2 Cài đặt và thử nghiệm 1174.2.1 Môi trường triển khai và phát triển ứng dụng 1174.2.1.1 Môi trường phát triển 1174.2.1.2 Môi trường triển khai 118Chương 5 NHẬN XÉT VÀ KẾT LUẬN 1185.1 Kết quả đạt được 118

5.3 Hướng phát triển 119

Hình 2.6: Mô hình Client_Side Rendering 19

Hình 2.7: Mô hình Server-side Rendering 19

Hình 2.8: NodeJS 21

Hình 2.9: ExpressJS 23

Hình 2.10: Tính năng của ExpressJS 23

Hình 2.11: Cấu trúc tài liệu MongoDB đơn giản 25

Hình 3.5: Sơ đồ cơ sở dữ liệu 76

Hình 4.1: Sơ đồ liên kết các màn hình role quản trị của chủ sân bóng 82

Hình 4.2: Sơ đồ liên kết các màn hình role khách hàng 83

Hình 4.3: Sơ đồ liên kết các màn hình role quản trị ứng dụng 83

Hình 4.4: Màn hình Đăng nhập của hệ thống chủ sân 87

Hình 4.5: Màn hình Đăng ký của hệ thống chủ sân 87

Hình 4.6: Màn hình Quên mật khẩu của hệ thống chủ sân 88

Hình 4.7: Màn hình Chọn chi nhánh của hệ thống chủ sân 88

Hình 4.8: Màn hình Bảng điều khiển của hệ thống chủ sân 89

Hình 4.9: Màn hình Quản lý sân của hệ thống chủ sân 89

Hình 4.10: Màn hình Tạo sân bóng của hệ thống chủ sân 90

Hình 4.11: Màn hình Quản lý giải đấu của hệ thống chủ sân 90

Hình 4.12: Màn hình Tạo giải đấu của hệ thống chủ sân (1) 91

Hình 4.13: Màn hình Tạo giải đấu của hệ thống chủ sân (2) 91

Hình 4.14: Màn hình Chi tiết giải đấu của hệ thống chủ sân (1) 92

Hình 4.15: Màn hình Chi tiết giải đấu của hệ thống chủ sân (2) 92

Hình 4.16: Màn hình Chi tiết trận đấu của hệ thống chủ sân (1) 93

Hình 4.17: Màn hình Chi tiết trận đấu của hệ thống chủ sân (2) 93

Hình 4.18: Màn hình Hóa đơn của hệ thống chủ sân (1) 94

Hình 4.19: Màn hình Hóa đơn của hệ thống chủ sân (2) 94

Hình 4.20: Màn hình Cài đặt của hệ thống chủ sân 95

Hình 4.26: Màn hình Chi tiết sân bóng của hệ thống khách hàng 102

Hình 4.27: Màn hình Giải đấu của hệ thống khách hàng 102

Hình 4.28: Màn hình Chi tiết giải đấu của hệ thống khách hàng 103

Hình 4.29: Màn hình Tham gia giải đấu của hệ thống khách hàng 104

Hình 4.35: Màn hình Chỉnh sửa hồ sơ của hệ thống khách hàng 110

Hình 4.36: Màn hình Các đội bóng đã tham gia của hệ thống khách hàng 111

Hình 4.37: Màn hình Các đội bóng đã tạo của hệ thống khách hàng 112

Hình 4.38: Màn hình Lời mời giam gia đội bóng của hệ thống khách hàng 113

Hình 4.39: Màn hình Tạo đội bóng của hệ thống khách hàng 114

Hình 4.40: Màn hình Đăng nhập của hệ thống quản trị 115

Hình 4.41: Màn hình Danh sách chủ sân của hệ thống quản trị 115

Hình 4.42: Màn hình Danh sách chi nhánh của hệ thống quản trị 116

Hình 4.43: Màn hình Danh sách đội bóng của hệ thống quản trị 116

Hình 4.44: Màn hình Danh sách khách hàng của hệ thống quản trị 117

Hình 4.45: Màn hình Xem báo cáo của hệ thống quản trị 117

DANH MỤC BẢNG

Bảng 3.1: Danh sách usecase của hệ thống chủ sân 34

Bảng 3.2: Đặc tả usecase Đăng nhập 36

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

Bảng 3.4: Đặc tả usecase Tạo chi nhánh 38

Bảng 3.5: Đặc tả usecase Tạo sân bóng 39

Bảng 3.6: Đặc tả usecase Xem thông tin sân bóng 41

Bảng 3.7: Đặc tả usecase Phản hồi yếu cầu đặt sân bóng 42

Bảng 3.8: Đặc tả usecase In hóa đơn 43

Bảng 3.9: Đặc tả usecase Xem thông tin hóa đơn 44

Bảng 3.10: Đặc tả usecase Tạo giải đấu 46

Bảng 3.11: Đặc tả usecase Cập nhật kết quả giải đấu 47

Bảng 3.12: Đặc tả usecase Xem thông tin chi nhánh 48

Bảng 3.13: Đặc tả usecase Thống kê doanh thu 50

Bảng 3.14: Danh sách usecase của hệ thống khách hàng 51

Bảng 3.15: Đặc tả usecase Đăng nhập 52

Bảng 3.16: Đặc tả usecase Đăng ký 54

Bảng 3.17: Đặc tả usecase Xem thông tin sân bóng 55

Bảng 3.18: Đặc tả usecase Xem các sân bóng đã đặt 56

Bảng 3.19: Đặc tả usecase Xem các sân bóng đã lưu 57

Bảng 3.20: Đặc tả usecase Tạo đội bóng 58

Bảng 3.21: Đặc tả usecase Xem thông tin đội bóng 59

Bảng 3.22: Đặc tả usecase Tham gia đội bóng khác 61

Bảng 3.23: Đặc tả usecase Đánh giá đội bóng khác 62

Bảng 3.24: Đặc tả usecase Tham gia giải đấu 63

Bảng 3.25: Đặc tả usecase Báo cáo 64

Bảng 3.26: Danh sách usecase của hệ thống quản trị 66

Bảng 3.27: Đặc tả usecase Đăng nhập 67

Bảng 3.28: Đặc tả usecase Phản hồi đăng ký tài khoản chủ sân 68

Bảng 3.29: Đặc tả usecase Xem thông tin chủ sân 69

Bảng 3.30: Đặc tả usecase Xem thông tin chi nhánh 70

Bảng 3.31: Đặc tả usecase Xem thông tin đội bóng 71

Bảng 3.32: Đặc tả usecase Xem thông tin khách hàng 72

Bảng 3.33: Đặc tả usecase Xem báo cáo 73

Bảng 3.34: Bảng mô tả chi tiết các kiểu dữ liệu của Owner 77

Bảng 3.35: Bảng mô tả chi tiết các kiểu dữ liệu của Guest 77

Bảng 3.36: Bảng mô tả chi tiết các kiểu dữ liệu của Branch 77

Bảng 3.37: Bảng mô tả chi tiết các kiểu dữ liệu của Field 78

Bảng 3.38: Bảng mô tả chi tiết các kiểu dữ liệu của FieldBookedQueue 78

Bảng 3.39: Bảng mô tả chi tiết các kiểu dữ liệu của Team 78

Bảng 3.40: Bảng mô tả chi tiết các kiểu dữ liệu của Match 79

Bảng 3.41: Bảng mô tả chi tiết các kiểu dữ liệu của Tournament 79

Bảng 3.42: Bảng mô tả chi tiết các kiểu dữ liệu của Goal Detail 80

Bảng 3.43: Bảng mô tả chi tiết các kiểu dữ liệu của Card Fine 80

Bảng 3.44: Bảng mô tả chi tiết các kiểu dữ liệu của Prize 80

Bảng 3.45: Bảng mô tả chi tiết các kiểu dữ liệu của Rate 80

Bảng 3.46: Bảng mô tả chi tiết các kiểu dữ liệu của Report 81

Bảng 3.47: Bảng mô tả chi tiết các kiểu dữ liệu của Invitement 81

Bảng 3.48: Bảng mô tả chi tiết các kiểu dữ liệu của Invoice 81

Bảng 4.1: Danh sách các màn hình của hệ thống chủ sân 84

Bảng 4.2: Danh sách các màn hình của hệ thống khách hàng 86

Bảng 4.3: Danh sách các màn hình của hệ thống quản trị 86

1

TÓM TẮT ĐỒ ÁN

"Footex" là một trang web quản trị sân bóng được thiết kế để hỗ trợ hiệu quả trong quản lý các sân bóng và chi nhánh liên quan "Footex" còn cung cấp khả năng đặt sân và tạo đội bóng cho khách hàng và cho phép họ tham gia các giải đấu được tổ chức bởi các chi nhánh Với giao diện trực quan và dễ sử dụng, "Footex" mang lại trải nghiệm người dùng tuyệt vời

Trang web này giúp chủ sân kiểm soát và quản lý thông tin chi tiết về các sân bóng và chi nhánh, bao gồm tình trạng, giá cả, và các thông tin khác Nó cung cấp chức năng đặt sân cho khách vãng lai và thậm chí giúp xuất hóa đơn Ngoài ra, "Footex" cung cấp chức năng tổ chức các giải đấu và quản lý giải đấu Đồng thời, "Footex" giúp chủ sân thống kê doanh thu nhanh chóng và thuận tiện

Khách hàng cũng được cung cấp các tính năng tìm kiếm sân bóng, xem thông tin chi tiết và đánh giá về các sân Giúp họ có quyết định thông tin khi đặt sân Ngoài ra, họ có thể tạo và quản lý đội bóng để tham gia các giải đấu của chi nhánh

Với mục tiêu đơn giản hóa quản lý và tối ưu hóa quy trình kinh doanh, "Footex" là một giải pháp tiện ích cho chủ sân bóng, giúp họ nâng cao hiệu suất và đạt được thành công trong kinh doanh sân bóng của mình

Đồ án bao gồm 5 chương và một phần tài liệu tham khảo:

- Chương 1: Giới thiệu chung về đề tài: đặt vấn đề, giải pháp, mục tiêu đề tài, đối tượng sử dụng, phạm vi nghiên cứu và tổng quan về đồ án

- Chương 2: Tổng quan về cơ sở lý thuyết để xây dựng hệ thống bao gồm: Figma, ReactJS, NextJS, NodeJS, Express, VSCode, Github

- Chương 3: Phân tích thiết kế hệ thống bao gồm đặc tả Use case, phân tích hệ thống và thiết kế dữ liệu

- Chương 4: Xây dựng hệ thống: tổng quan về giao diện của hệ thống cũng như cài đặt và thử nghiệm hệ thống

2

- Chương 5: Nhận xét và kết luận về hệ thống bao gồm: kết quả đạt được, những hạn chế và hướng phát triển của hệ thống

Trong bối cảnh xã hội ngày càng phát triển, nhu cầu giải trí và thể thao ngày càng gia tăng, đặc biệt là môn bóng đá Sân bóng đóng vai trò quan trọng là nơi hội tụ cộng đồng và tạo nên những trải nghiệm giải trí độc đáo Việc quản lý và vận hành các sân bóng không chỉ là một thách thức lớn đối với chủ sân mà còn là mối quan tâm của người chơi và người hâm mộ

Trong quá trình quản trị sân bóng và các chi nhánh, các chủ sân thường phải đối mặt với các khía cạnh như:

- Khó khăn trong quản lý thông tin: Việc theo dõi thông tin chi tiết về sân bóng, tình trạng sử dụng, giá cả, và các thông tin liên quan khác đôi khi trở nên rối bời và tốn thời gian

- Thiếu hiệu quả trong quản lý đặt sân: Hệ thống đặt sân chưa linh hoạt, làm cho việc quản lý và theo dõi đơn đặt sân của khách hàng và đội bóng trở nên phức tạp

- Thiếu tiện ích trong tổ chức giải đấu: Việc tổ chức và quản lý giải đấu cũng gặp khó khăn, từ việc đăng ký, theo dõi kết quả

- Khó khăn trong quản lý doanh thu: Việc thống kê doanh thu tốn nhiều thời gian và công sức

1.2 Giải pháp

Để đáp ứng và giải quyết những thách thức trên, chúng tôi giới thiệu "Footex" - một hệ thống quản trị sân bóng tiên tiến và hiệu quả "Footex" không chỉ là một trang web quản lý thông tin về sân bóng mà còn là một nền tảng đặt sân và quản lý

o Quản lý đặt sân: Hệ thống cung cấp cho chủ sân chức năng đặt sân cho khách vãng lai và duyệt các yêu cầu đặt sân của khách hàng trên hệ thống

o Quản lý giải đấu: "Footex" không chỉ cung cấp chức năng đăng ký và quản lý giải đấu

o Thống kê doanh thu: Giúp chủ sân thống kê doanh thu một cách tự động, giúp họ đưa ra các quyết định kinh doanh thông minh

- Khách hàng:

o Tìm kiếm hiệu quả: “Footex” cung cấp các công cụ tìm kiếm khác nhau như tìm kiếm sân bóng, tìm kiếm đội bóng, v.v khách hàng có thể dễ dàng tìm kiếm thông tin mong muốn Ngoài ra, hệ thống còn cung cấp các bộ lọc hỗ trợ cho việc chọn lọc thông tin

o Đặt sân linh hoạt và nhanh chóng: Hệ thống đặt sân của "Footex" được thiết kế với giao diện trực quan, giúp khách hàng dễ dàng chọn sân và đặt sân một cách linh hoạt

o Gắn kết những người có cùng sở thích: Để giúp khách hàng tiếp cận với những người có cùng sở thích “Footex” cung cấp chức năng quản lý đội bóng Khách hàng có thể tạo đội bóng, quản lý các thành viên trong đội bóng cũng như tham gia gia đội bóng khác

o Tiếp cận với nhiều giải đấu: Hệ thống sẽ cung cấp thông tin của các giải đấu đến khách hàng, từ đó khách hàng có thêm thông tin cũng như dễ dàng tiếp cận đến các giải đấu

5

"Footex" không chỉ là một công cụ quản lý, mà còn mang lại trải nghiệm người dùng tuyệt vời Giao diện trực quan và dễ sử dụng giúp người chơi, khách hàng và chủ sân có thể tận hưởng trải nghiệm thuận lợi mà không cần mất nhiều công sức

1.3 Mục tiêu đề tài

Với "Footex", mục tiêu của chúng tôi là đơn giản hóa quản trị và tối ưu hóa quy trình kinh doanh, giúp các chủ sân bóng nâng cao hiệu suất và đạt được thành công trong việc kinh doanh các sân bóng của mình Chúng tôi đặt ra những mục tiêu cụ thể như sau:

- Tối ưu hóa quy trình đặt sân: Phát triển hệ thống đặt sân linh hoạt, với khả năng đáp ứng đồng thời nhiều yêu cầu đặt sân từ người chơi và khách hàng Kích thích tương tác nhanh chóng và dễ dàng, giúp người dùng tiết kiệm thời gian trong quá trình lựa chọn và đặt sân

- Tạo nền tảng quản lý đội bóng hiệu quả: Xây dựng tính năng tạo đội bóng và quản lý thành viên với các thông tin chi tiết như thành tích, lịch sử thi đấu Kết nối đội bóng với sân bóng để tạo ra một cộng đồng thể thao đầy đủ và tích cực - Hỗ trợ tổ chức giải đấu: Thiết kế module tổ chức giải đấu từ việc đăng ký, lập lịch đấu, đến công bố kết quả Cung cấp công cụ quản lý thông tin đội bóng, cầu thủ, và lịch thi đấu để giảm thiểu lỗi và đảm bảo tính minh bạch của giải đấu

- Quản lý chi tiết sân bóng: Tích hợp chức năng quản lý chi tiết sân bóng, bao gồm tình trạng sân, giá cả, và thông tin khác, để chủ sân có cái nhìn tổng quan về hiệu suất kinh doanh Kết hợp hệ thống thông báo và cảnh báo để thông tin về sân luôn được cập nhật và chính xác

- Cung cấp một cái nhìn tổng quan về các sân bóng: Cung cấp cho khách hàng các thông tin chi tiết về sân bóng cũng như các đánh giá từ đó khách hàng có thể đưa ra lựa chọn sân bóng mong muốn

- Đảm bảo chất lượng dịch vụ: Tạo một hệ thống kiểm duyệt các chủ sân bóng nhầm đảm bảo thông tin chính xác khi cung cấp đến cho khách hàng, ngoài ra

o Kiểm soát chất lượng thông tin và dịch vụ

o Người em và xử lý các báo cáo và tố cáo từ người dùng

1.5 Phạm vi nghiên cứu 1.5.1 Phạm vi chức năng

- Quản lý sân bóng và đặt sân: Mô-đun quản lý sân bóng bao gồm thông tin chi tiết về sân, tình trạng hiện tại, giá cả, và các tiện ích đi kèm Hỗ trợ đặt sân cho khách hàng và khách hàng vãng lai

- Quản lý chi nhánh: Một chủ sân có thể có nhiều chi nhánh, cung cấp chức năng quản lý chi nhánh giúp chủ sân quản lý hiệu quả hơn

- Tổ chức giải đấu: Phát triển module tổ chức giải đấu từ việc đăng ký, lập lịch đấu, đến công bố kết quả Quản lý thông tin đội bóng, cầu thủ, và lịch thi đấu để đảm bảo tính minh bạch của giải đấu

7

- Quản lý đội bóng: Chức năng tạo và quản lý đội bóng với các thông tin về thành viên, lịch sử thi đấu, và thành tích Liên kết đội bóng với sân bóng để tạo cộng đồng thể thao tích cực

- Thống kê doanh thu: Thống kê doanh thu theo từng chi nhánh và theo từng thời điểm Giúp chủ sân dễ dàng nắm bắt thông tin kinh doanh của sân bóng - Tìm kiếm thông tin: Các chức năng tìm kiếm sân bóng, giải đấu, đội bóng đều

được tích hợp bộ lọc Giúp việc tìm kiếm thông tin trở nên dễ sàng hơn - Báo cáo: Tích hợp chức năng báo cáo sân, chủ sân hoặc khách hàng Nhầm

đảm bảo chất lượng dịch vụ

- Phê duyệt chủ sân: Tích hợp chức năng phê duyệt chủ sân khi chủ sân đăng ký tài khoản trên hệ thống, sau khi được chấp nhận thì chủ sân mới được đăng thông tin trên hệ thống Để đảm bảo thông tin khi chủ sân cung cấp đến người dùng là thông tin chính xác

1.5.2 Phạm vi địa lý

- Phạm vi trên toàn Việt Nam:

o "Footex" sẽ được phát triển để có khả năng triển khai và sử dụng trên mọi tỉnh thành và địa phương ở Việt Nam

o Các tính năng sẽ được tối ưu hóa để đáp ứng nhu cầu và yêu cầu cụ thể của từng thị trường địa phương

1.5.3 Phạm vi khoa học và công nghệ

- Thiết kế giao diện người dùng: Figma

- Các ngôn ngữ lập trình và công nghệ phát triển website: HTML, CSS, JavaScript, Typescript

- Các framework hỗ trợ: ReactJS, NextJS, NodeJS, ExpressJS - Cơ sở dữ liệu: MongoDB

- Phần mềm lập trình: Visual Studio Code - Quản lý phiên bản: Github

8

1.6 Tổng quan về đồ án

"Footex" - một hệ thống quản trị sân bóng tiên tiến và hiệu quả "Footex" không chỉ là một trang web quản lý thông tin về sân bóng mà còn là một nền tảng đặt sân và quản lý đội bóng, mang lại trải nghiệm tuyệt vời cho cả chủ sân và khách hàng Mô tả quy trình thực hiện các công việc chính:

- Bước 1: Xác định các yêu cầu:

o Phân tích khả thi quy mô thực hiện o Tìm hiểu quy trình nghiệp vụ

o Tham khảo và trải nghiệm các ứng dụng liên quan o Khảo sát người dùng qua mạng

o Thu thập thông tin yêu cầu - Bước 2: Thiết kế hệ thống:

o Vẽ sơ đồ Use-case: phân tích nghiệp vụ tổng quan - Bước 3: Thiết kế dữ liệu

o Thiết kế dữ liệu tương ứng với từng loại yêu cầu của phần mềm để đảm bảo được tính đúng đắn và tính tiến hóa với phần mềm, có hiệu quả về mặt truy xuất và lưu trữ

o Xác định và lập danh sách các bảng dữ liệu cần thiết cho các yêu cầu của phần mềm

o Xây dựng sơ đồ logic cụ thể của phần mềm - Bước 4: Thiết kế giao diện

o Lập ra danh sách các màn hình khi người dùng tương tác với phần mềm o Mô tả các đối tượng trên từng màn hình

- Bước 5: Code và kiểm thử

o Code trình bày theo mô hình 3 lớp và được phân chia theo các nhiệm vụ yêu cầu

o Kiểm thử để kiểm tra tính hiệu quả của hệ thống

9

Chương 2 CƠ SỞ LÝ THUYẾT

2.1 Thiết kế giao diện người dùng Figma 2.1.1 Tổng quan về Figma

Hình 2.1: Figma

- Figma là một ứng dụng web, cho phép người dùng truy cập và làm việc trên trình duyệt mà không cần cài đặt phần mềm

- Nó cung cấp môi trường làm việc đám mây, giúp người dùng lưu trữ và chia sẻ dự án dễ dàng

- Figma hỗ trợ các tính năng như thiết kế giao diện, tạo wireframe, tạo prototype và quản lý thư viện

2.1.2 Cách thức hoạt động

- Người dùng có thể tạo mới dự án hoặc mở dự án đã tồn tại trên Figma

- Figma cung cấp một giao diện dễ sử dụng, với các công cụ vẽ và chỉnh sửa các yếu tố trên giao diện

- Cần kết nối internet để truy cập và làm việc

- Có thể hạn chế một số tính năng so với các ứng dụng thiết kế giao diện truyền thống

- Phiên bản miễn phí của Figma có giới hạn băng thông lưu trữ, số lượng dự án

2.2 Ngôn ngữ lập trình JavaScript

JavaScript là ngôn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm qua Nó cũng là một trong số 3 ngôn ngữ chính của lập trình web:

- HTML: Giúp bạn thêm nội dung cho trang web

- CSS: Định dạng thiết kế, bố cục, phong cách, canh lề của trang web - JavaScript: Cải thiện cách hoạt động của trang web

JavaScript có thể học nhanh và dễ dàng áp dụng cho nhiều mục đích khác nhau, từ việc cải thiện tính năng của website đến việc chạy game và tạo phần mềm nền web Hơn nữa, có hàng ngàn mẫu template JavaScript và ứng dụng ngoài kia, nhờ vào sự cống hiến của cộng đồng, đặc biệt là Github

Trong năm 1996, JavaScript được chính thức đặt tên là ECMAScript ECMAScript 2 phát hành năm 1998 và ECMAScript 3 tiếp tục ra mắt vào năm 1999 Nó liên tục phát triển thành JavaScript ngày nay, giờ đã hoạt động trên khắp mọi trình duyệt và trên khắp các thiết bị từ di động đến máy tính bàn

JavaScript liên tục phát triển kể từ đó, có lục đạt đến 92% website đang sử dụng JavaScript vào năm 2016 Chỉ trong 20 năm, nó từ một ngôn ngữ lập trình riêng

macOS cho đến các hệ điều hành trên mobile

- Javascript là một ngôn ngữ dễ tiếp cận, bạn sẽ dễ dàng học nó mà không cần phải cài đặt quá nhiều phần mềm

2.2.3 Nhược điểm

Vì là một ngôn ngữ rất dễ dàng bị lộ code nên dễ bị khai thác Hacker có thể nhập một đoạn code bất kì vào khung console của trình duyệt, lúc này trình duyệt sẽ hiểu rằng đoạn code đó là chính thống, nên hacker có thể gửi nhửng request lên server một cách dễ dàng

2.2.4 JavaScript Framework

Javascript Framework là một bộ thư viện được xây dựng dựa vào ngôn ngữ lập trình Javascript Mỗi framework thường được tạo ra để phục vụ cho một lĩnh vực nào đó Ví dụ với Angular và React thì chuyên xử lý frontend, NodeJS thì chuyên xử lý backend, jQuery là một thư viện rất mạnh khi xử lý DOM HTML và CSS

Sức mạnh của Javascript là không thể chối cãi, bằng chứng là hiện nay có rất nhiều libraries và framework được viết bằng Javascript ra đời như:

- Angular: Một thư viện dùng để xây dựng ứng dụng Single Page

- NodeJS: Một thư viện được phát triển phía Server dùng để xây dựng ứng dụng realtime

- Sencha Touch: Một Framework dùng để xây dựng ứng dụng Mobile

- ExtJS: Một Framework dùng xây dựng ứng dụng quản lý (Web Applications)

13

- jQuery: Một thư viện rất mạnh về hiệu ứng - ReactJS: Một thư viện viết ứng dụng web - Và còn nhiều thư viện khác

2.3 Ngôn ngữ lập trình TypeScript

TypeScript là một ngôn ngữ lập trình được phát triển và duy trì bởi Microsoft Nó là một tập hợp siêu cú pháp nghiêm ngặt của JavaScript và thêm tính năng kiểu tĩnh tùy chọn vào ngôn ngữ TypeScript được thiết kế để phát triển các ứng dụng lớn và chuyển đổi sang JavaScript Vì TypeScript là một siêu tập hợp JavaScript, các chương trình JavaScript hiện có cũng là các chương trình TypeScript hợp lệ

TypeScript có thể được sử dụng để phát triển các ứng dụng JavaScript cho cả thực thi phía máy khách và phía máy chủ (như với Node.js hoặc Deno) Có nhiều tùy chọn có sẵn để biên dịch Có thể sử dụng Trình kiểm tra TypeScript mặc định,[5] hoặc có thể sử dụng trình biên dịch Babel để chuyển đổi TypeScript sang JavaScript

Hình 2.3: TypeScript

ngày 29 tháng 12, 2023]

14

2.3.1 Lịch sử hình thành JavaScript

TypeScript được công bố lần đầu tiên vào tháng 10 năm 2012 (ở phiên bản 0.8), sau hai năm phát triển nội bộ tại Microsoft Ngay sau khi thông báo, Miguel de Icaza đã ca ngợi bản thân ngôn ngữ này, nhưng chỉ trích việc thiếu hỗ trợ IDE trưởng thành ngoài Microsoft Visual Studio, vốn chưa có trên Linux và OS X vào thời điểm đó Ngày nay, có hỗ trợ trong các IDE khác, đặc biệt là trong Eclipse, thông qua một trình cắm thêm do Palantir Technologies đóng góp Các trình soạn thảo văn bản khác nhau, bao gồm Emacs, Vim, Webstorm, Atom và Visual Studio Code của riêng Microsoft cũng hỗ trợ TypeScript

TypeScript 0.9, được phát hành vào năm 2013, đã thêm hỗ trợ cho generic TypeScript 1.0 được phát hành tại hội nghị nhà phát triển Build của Microsoft vào năm 2014 Visual Studio 2013 Update 2 cung cấp hỗ trợ tích hợp cho TypeScript

Vào tháng 7 năm 2014, nhóm phát triển đã công bố một trình biên dịch TypeScript mới, đạt hiệu suất gấp 5 lần Đồng thời, mã nguồn, ban đầu được lưu trữ trên CodePlex, đã được chuyển sang GitHub

Vào ngày 22 tháng 9 năm 2016, TypeScript 2.0 đã được phát hành; nó đã giới thiệu một số tính năng, bao gồm khả năng cho các lập trình viên tùy ý ngăn các biến được gán giá trị null, đôi khi được gọi là sai lầm hàng tỷ đô la

TypeScript 3.0 được phát hành vào ngày 30 tháng 7 năm 2018, mang đến nhiều bổ sung ngôn ngữ như bộ giá trị trong tham số phần còn lại và biểu thức trải rộng, tham số phần còn lại với các loại tuple, tham số rest chung, v.v

TypeScript 4.0 được phát hành vào ngày 20 tháng 8 năm 2020 Mặc dù 4.0 không giới thiệu bất kỳ thay đổi đột phá nào, nhưng nó đã bổ sung các tính năng ngôn ngữ như Hệ thống JSX tùy chỉnh và kiểu Tuple Đa dạng

2.3.2 Ưu điểm

- TypeScript thật sự thuận tiện và hoàn toàn miễn phí - Thao tác nhanh chóng và đơn giản hơn

15 - Tái cấu trúc

- Giảm tỷ lệ mắc lỗi trong hệ thống - Hạn chế thử nghiệm Boilerplate - Hợp nhất mã đơn giản

- Hỗ trợ tối ưu hóa quy trình làm việc

2.3.3 Nhược điểm

- Bắt buộc dùng biên dịch - Bước thiết lập cồng kềnh

Hình 2.4: ReactJS

2.4.3 Ưu điểm

- Hiệu suất cao: Nhờ sử dụng Virtual DOM và cách quản lý trạng thái thông minh, ReactJS có thể cải thiện hiệu suất ứng dụng web Thay vì cập nhật toàn bộ DOM, React chỉ cập nhật những phần cần thiết, giúp giảm độ phức tạp và tối ưu hóa tốc độ render

- Quản lý trạng thái dễ dàng: React sử dụng khái niệm "state" để quản lý trạng thái của các thành phần Việc quản lý trạng thái dễ dàng giúp phát triển ứng dụng dễ dàng hơn và giúp tái sử dụng thành phần một cách hiệu quả

- Cộng đồng và hệ sinh thái mạnh mẽ: ReactJS có một cộng đồng lớn và đông đảo, với rất nhiều tài liệu, tài nguyên và các thành phần có thể tái sử dụng Điều này giúp cho việc học hỏi và phát triển ứng dụng dễ dàng hơn

2.4.4 Nhược điểm

- Khả năng học và khởi đầu ban đầu: ReactJS có một học phần ngưỡng cao ban đầu Việc hiểu và áp dụng các khái niệm như JSX, Virtual DOM, props, state, lifecycle methods và Redux có thể đòi hỏi một quá trình học tập khá lâu và công phu

17

- Quản lý trạng thái phức tạp: Khi ứng dụng React phức tạp và có nhiều thành phần liên quan, quản lý trạng thái có thể trở nên phức tạp hơn Việc đồng bộ hóa và quản lý trạng thái giữa các thành phần có thể đòi hỏi sự quan tâm và kỹ năng để tránh việc gặp phải các vấn đề như rò rỉ bộ nhớ hoặc hiệu suất kém - Tuy nhiên, nhược điểm của ReactJS có thể được khắc phục và vượt qua thông qua việc nắm vững kiến thức và kỹ năng phù hợp và sử dụng các thư viện hỗ trợ như Redux hoặc MobX để quản lý trạng thái phức tạp hơn

2.5 NextJS

2.5.1 Tổng quan về NextJS

NextJS là một framework mã nguồn mở nhẹ được xây dựng trên nền tảng của React, giúp lập trình viên phát triển các ứng dụng và trang web rất nhanh chóng và dễ sử dụng

Mặc dù có một đường cong học tập, ngay cả những nhà phát triển front-end mới cũng có thể nhanh chóng nắm bắt được nó Nó dựa trên Babel và Node.js, tích hợp với React để phát triển ứng dụng

React xếp NextJS vào danh sách các công cụ được khuyến nghị của mình, nói rằng đây là một giải pháp cho việc tạo ra các trang web được render từ phía máy chủ Ứng dụng React chỉ có thể render nội dung của mình trong trình duyệt, phía máy khách

Hơn nữa, NextJS bao gồm tất cả các tính năng cần thiết để trở thành nền tảng hàng đầu cho việc xây dựng các trang web hiện đại, như xuất tĩnh, chế độ xem trước, tiền render, tối ưu hóa tự động và quá trình biên dịch nhanh chóng hơn

18

Hình 2.5: NextJS

tháng 12 năm 2023]

2.5.2 Tại sao nên sử dụng NextJS?

Ưu điểm chính của Next.js là hỗ trợ SSR tích hợp để tăng hiệu suất và SEO Server Side Rendering (SSR) hoạt động bằng cách thay đổi luồng yêu cầu (altering the request flow) của ứng dụng React để tất cả các thành phần ngoại trừ máy khách gửi thông tin của họ đến máy chủ

Với tất cả thông tin trên máy chủ, nó có thể hiển thị trước (pre-render) HTML của trang Máy khách có thể gửi một yêu cầu đến máy chủ và nhận toàn bộ trang HTML thay vì yêu cầu từng thành phần riêng lẻ với client-side rendering

19

Hình 2.6: Mô hình Client_Side Rendering

Hình 2.7: Mô hình Server-side Rendering

nhanh mà còn đơn giản để tìm kiếm và cung cấp trải nghiệm người dùng tuyệt vời Ba yếu tố: tốc độ, cấu trúc và trải nghiệm người dùng, là những yếu tố xếp hạng quan trọng sẽ tăng thứ hạng trên công cụ tìm kiếm của Google trang web của bạn

- Trải nghiệm người dùng tốt

- Bảo mật: An toàn vì nó không có liên kết trực tiếp đến database, dependencies, user data hoặc thông tin bí mật khác

- Thời gian tải trang nhanh hơn - Render phía server

2.5.4 Nhược điểm

- Ít plug-in thích ứng

- Nextjs bị giới hạn bởi việc chỉ sử dụng bộ định tuyến trên tệp của nó, bạn không thể nào sửa đổi cách nó giao dịch với các tuyến Vì vậy, để sử dụng tuyến động, bạn cần làm việc thêm với Node.js máy chủ

- Nextjs không cung cấp nhiều trang nhất tích hợp, để làm việc bạn cần phải tạo toàn bộ front-end từ đầu lên

2.6 NodeJS

2.6.1 Tổng quan về NodeJS

Node.js là một môi trường chạy mã JavaScript phía máy chủ, được xây dựng trên JavaScript engine của Chrome (V8 engine) Nó cho phép chúng ta thực thi mã

2.6.3 Ưu điểm

- Hiệu suất cao: Với mô hình non-blocking và event-driven, Node.js có khả năng xử lý hàng ngàn kết nối đồng thời mà không gây block Điều này giúp cải thiện hiệu suất của ứng dụng và đáp ứng tốt với tải cao

- Phát triển dễ dàng: Node.js sử dụng JavaScript, ngôn ngữ phổ biến và quen thuộc, cho phép lập trình viên sử dụng cùng một ngôn ngữ cả phía máy chủ và phía khách hàng Điều này giúp giảm độ phức tạp và đơn giản hóa quá trình phát triển ứng dụng

22

- Cộng đồng lớn: Node.js có một cộng đồng lớn và đông đảo, với rất nhiều thư viện và công cụ hữu ích Cộng đồng phát triển sôi nổi này cung cấp sự hỗ trợ, tài liệu và giải pháp cho các vấn đề phát triển

2.6.4 Nhược điểm

- Đơn luồng: Mặc dù Node.js có khả năng xử lý đồng thời, nhưng do chạy trên một luồng duy nhất, nếu một yêu cầu tốn nhiều thời gian xử lý, nó có thể làm giảm hiệu suất của toàn bộ ứng dụng Vì vậy, Node.js không phù hợp cho các tác vụ đòi hỏi xử lý trên nhiều luồng đồng thời

- Quản lý trạng thái phức tạp: Vì Node.js không có một framework hoàn chỉnh, việc quản lý trạng thái phức tạp có thể trở nên khó khăn Lập trình viên phải dựa vào các thư viện bên thứ ba hoặc tự xây dựng các cơ chế để quản lý trạng thái hiệu quả

2.7 ExpressJS

2.7.1 Tổng quan về ExpressJS

ExpressJS là một framework mạnh mẽ và phổ biến được xây dựng trên nền tảng Node.js Nó giúp đơn giản hóa quá trình phát triển ứng dụng web bằng cách cung cấp các công cụ và thư viện cần thiết để xử lý yêu cầu và phản hồi HTTP một cách dễ dàng

ExpressJS cho phép lập trình viên xây dựng các ứng dụng web độc lập, linh hoạt và có hiệu suất cao Với cú pháp đơn giản và dễ hiểu, ExpressJS giúp lập trình viên tập trung vào việc xây dựng logic ứng dụng thay vì phải lo lắng về các chi tiết cơ bản của việc xử lý yêu cầu và phản hồi

23

Hình 2.9: ExpressJS

2023]

2.7.2 Tính năng của ExpressJS

Hình 2.10: Tính năng của ExpressJS

2023]

24

- Phát triển máy chủ nhanh hơn: ExpressJS tối ưu hóa cú pháp và cung cấp các phương thức và hàm tiện ích để xử lý các tác vụ phổ biến trong lập trình web Nhờ đó, bạn có thể viết code ngắn gọn và tối giản hóa quy trình phát triển - Định tuyến (Routing): ExpressJS cung cấp một hệ thống định tuyến mạnh mẽ,

cho phép bạn xác định các tuyến đường (routes) để xử lý yêu cầu từ người dùng và phản hồi tương ứng Điều này giúp tổ chức và quản lý các thành phần của ứng dụng một cách dễ dàng

- Middleware: ExpressJS hỗ trợ middleware, cho phép bạn thêm các chức năng trung gian vào quy trình xử lý yêu cầu và phản hồi Middleware giúp xác thực người dùng, ghi log, xử lý lỗi, nén dữ liệu và thực hiện nhiều tác vụ khác một cách linh hoạt

- Cấu hình môi trường: ExpressJS cung cấp một cách để cấu hình môi trường phát triển và môi trường sản xuất Bạn có thể thiết lập các biến môi trường, cấu hình định dạng và quy tắc, tùy chỉnh ứng dụng của mình theo các môi trường khác nhau

- Xử lý lỗi: ExpressJS cung cấp cơ chế xử lý lỗi cho phép bạn kiểm soát và xử lý các lỗi xảy ra trong quá trình xử lý yêu cầu Bạn có thể tạo ra các middleware để xử lý lỗi và phản hồi với các thông báo lỗi tùy chỉnh

- Hiệu suất cao: ExpressJS được xây dựng trên Node.js, nền tảng có hiệu suất cao, cho phép xử lý nhanh chóng các yêu cầu web đồng thời và có khả năng mở rộng tốt

25

2.7.4 Nhược điểm

- Thiếu cấu trúc: Do ExpressJS không áp đặt một cấu trúc nghiêm ngặt, việc tổ chức dự án và quản lý mã nguồn có thể trở nên khó khăn, đặc biệt khi ứng dụng phát triển lớn và phức tạp

- Khả năng mở rộng: Khi ứng dụng phát triển lớn và phức tạp, việc quản lý mã nguồn và mở rộng có thể trở nên khó khăn với ExpressJS Cần có sự kiểm soát cẩn thận để tránh sự phức tạp và rối rắm trong việc quản lý các module và tương tác giữa chúng

2.8 MongoDB

2.8.1 Tổng quan về MongoDB

MongoDB, được biết đến như cơ sở dữ liệu NoSQL phổ biến nhất, là cơ sở dữ liệu định hướng tài liệu mã nguồn mở Thuật ngữ 'NoSQL' có nghĩa là 'không có mối quan hệ' (Non-relational) Điều đó có nghĩa là MongoDB không dựa trên cấu trúc cơ sở dữ liệu quan hệ giống như bảng mà cung cấp một cơ chế hoàn toàn khác để lưu trữ và truy xuất dữ liệu Định dạng lưu trữ này được gọi là BSON (tương tự như định dạng JSON)

Cấu trúc tài liệu MongoDB đơn giản:

Hình 2.11: Cấu trúc tài liệu MongoDB đơn giản

26

https://www.linkedin.com/pulse/t%E1%BB%95ng-quan-ki%E1%BA%BFn-[Truy cập ngày 30 tháng 12, 2023]

2.8.2 Tính năng của MongoDB

Hình 2.12: Các tính nắng của MongoDB

https://www.linkedin.com/pulse/t%E1%BB%95ng-quan-ki%E1%BA%BFn-[Truy cập ngày 30 tháng 12, 2023]

- Document Oriented: MongoDB lưu trữ subject chính với số lượng documents tối thiểu chứ không phải bằng cách chia nó thành nhiều cấu trúc quan hệ như RDBMS Ví dụ: nó lưu trữ tất cả thông tin của một máy tính trong một tài liệu duy nhất được gọi là Máy tính và không nằm trong các cấu trúc quan hệ riêng biệt như CPU, RAM, Đĩa cứng, v.v

- Indexing: Nếu không lập chỉ mục, CSDL sẽ không truy vấn hiệu quả vì phải quét mọi tài liệu của tập hợp để chọn những tài liệu phù hợp cho việc truy vấn đó Vì vậy, để tìm kiếm hiệu quả, Indexing là điều bắt buộc và MongoDB sử dụng nó để xử lý khối lượng dữ liệu khổng lồ trong thời gian rất ngắn

- Scalability: MongoDB mở rộng quy mô theo chiều ngang bằng cách sử dụng sharding (phân vùng dữ liệu trên các máy chủ khác nhau) Dữ liệu được phân