Đồ án ứng dụng quản lý câu lạc bộ trong trường học

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN ỨNG DỤNG QUẢN LÝ CÂU LẠC BỘ TRONG TRƯỜNG HỌC Giảng viên hướng dẫn: Huỳnh Hồ Thị Mộng Trinh Sinh viên thực 1: Phạm Xuân Bách – 19521233 Sinh viên thực 2: Nguyễn Tiến Đạt – 19521345 Lớp: SE122.N11 Thành phố Hồ Chí Minh, tháng 12 năm 2022 ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN ỨNG DỤNG QUẢN LÝ CÂU LẠC BỘ TRONG TRƯỜNG HỌC Giảng viên hướng dẫn: Huỳnh Hồ Thị Mộng Trinh Sinh viên thực 1: Phạm Xuân Bách – 19521233 Sinh viên thực 2: Nguyễn Tiến Đạt – 19521345 Lớp: SE122.N11 Thành phố Hồ Chí Minh, tháng 12 năm 2022 Lời mở đầu Đầu tiên, nhóm chúng em xin gởi lời cảm ơn chân thành đến tập thể quý Thầy Cô Trường Đại học Công nghệ thông tin – Đại học Quốc gia TP.HCM giúp cho nhóm chúng em có kiến thức làm tảng để thực đề tài Đặc biệt, nhóm chúng em xin gửi lời cảm ơn lòng biết ơn sâu sắc tới cô Huỳnh Hồ Thị Mộng Trinh Đã giúp nhóm chúng em hồn thành tốt báo cáo mơn học Trong thời gian học đề tài, nhóm chúng em vận dụng kiến thức tảng tích lũy đồng thời kết hợp với việc học hỏi nghiên cứu kiến thức Từ đó, nhóm chúng em vận dụng tối đa thu thập để hoàn thành báo cáo đồ án tốt Tuy nhiên, q trình thực hiện, nhóm chúng em khơng tránh khỏi thiếu sót Chính vậy, nhóm chúng em mong nhận góp ý từ phía Thầy Cơ nhằm hồn thiện kiến thức mà nhóm chúng em học tập hành trang để nhóm chúng em thực tiếp đề tài khác tương lai Nhóm em xin chân thành cảm ơn quý Thầy Cô! NHẬN XÉT CỦA GIẢNG VIÊN ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… Mục lục Danh mục hình ảnh Danh mục bảng biểu Chương I - Tổng quan 13 Lý chọn đề tài 13 Mục tiêu 13 Phạm vi 14 Người dùng 14 Phương pháp nghiên cứu 14 Chương II - Cơ sở lý thuyết & Tổng quan công nghệ 15 Giới thiệu React JS 15 Giới thiệu MongoDB 15 2.1 Các đặc điểm MongoDB 15 2.2 Ưu nhược điểm MongoDB 16 Kiến trúc hệ thống 18 3.1 Kiến trúc hệ thống 18 3.2 Mơ hình kiến trúc hệ thống 18 Mô tả chi tiết thành phần hệ thống 19 Chương III - Phân tích thiết kế ứng dụng 21 Yêu cầu nghiệp vụ 21 1.1 Danh sách yêu cầu nghiệp vụ 21 Use case 23 3 2.1 Mô hình Use Case 23 2.2 Danh sách Actor 30 2.3 Danh sách Use case 32 Acivity Diagram 70 3.1 Cập nhật thông tin đối tượng 70 3.2 Quản lý task công việc 72 3.3 Quản lý lời mời 74 Sequence Diagram 75 4.1 Đăng nhập 75 4.2 Thêm thành viên 76 4.3 Thêm nhóm 77 4.4 Xóa nhóm 78 4.5 Thêm tài khoản 79 4.6 Cập nhật câu lạc 80 4.7 Cập nhật nhóm 81 4.8 Xóa thành viên 81 4.9 Thêm câu lạc 83 4.10 Thêm hoạt động 84 4.11 Thêm phiếu quỹ (thu/chi) 85 4.12 Chặn câu lạc 86 4.13 Chặn tài khoản 87 Sơ đồ lớp 88 5.1 Sơ đồ lớp (Mức phân tích) 88 5.2 Danh sách lớp đối tượng quan hệ 89 5.3 Mô tả chi tiết đối tượng 89 Thiết kế CSDL 104 6.1 Sơ đồ logic 104 6.2 Mô tả chi tiết thành phần sơ đồ logic 105 Thiết kế giao diện 111 7.1 Danh sách hình 111 7.2 Mơ tả chi tiết hình 113 Component diagram 154 Deploy diagram 155 Chương IV - Tổng kết 155 Kết 155 1.1 Sản phẩm: 155 Hạn chế 155 Hướng phát triển 156 Bảng phân công công việc 156 Tài liệu tham khảo 157 Danh mục hình ảnh Hình Kiến trúc hệ thống với MongoDB 17 Hình Mơ hình Client - Server 19 Hình Chi tiết mơ hình Client - Server 20 Hình Use-case tổng quát 23 Hình Use-case Đăng nhập 24 Hình Use-case quản lý tài khoản 24 Hình Use-case quản lý câu lạc 25 Hình Use-case quản lý thành viên 25 Hình Use-case quản lý nhóm 26 Hình 10 Use-case quản lý hoạt động 26 Hình 11 Use-case quản lý quỹ 27 Hình 12 Use-case quản lý tin nhắn 28 Hình 13 Use-case quản lý điểm 29 Hình 14 Use-case quản lý lời mời 29 Hình 15 Sơ đồ trạng thái Cập nhật thông tin đối tượng 70 Hình 16 Sơ đồ trạng thái Quản lý task công việc 72 Hình 17 Sơ đồ trạng thái quản lý lời mời 74 Hình 18 Sơ đồ chức Đăng nhập 75 Hình 19 Sơ đồ chức Thêm thành viên 76 Hình 20 Sơ đồ chức Thêm nhóm 77 Hình 21 Sơ đồ chức Xóa nhóm 78 Hình 22 Sơ đồ chức Thêm tài khoản 79 Hình 23 Sơ đồ chức Cập nhật câu lạc 80 Hình 24 Sơ đồ chức Cập nhật nhóm 81 Hình 25 Sơ đồ chức Xóa thành viên 82 Hình 26 Sơ đồ chức Thêm câu lạc 83 Hình 27 Sơ đồ chức Thêm hoạt động 84 Hình 28 Sơ đồ chức Thêm phiếu quỹ 85 Hình 29 Sơ đồ chức Chặn câu lạc 86 Hình 30 Sơ đồ chức Chặn tài khoản 87 Hình 31 Sơ đồ lớp 89 Hình 32 Sơ đồ logic 104 Hình 33 Màn hình Đăng nhập 113 Hình 34 SlideBar 114 Hình 35 SlideBarClub 116 Hình 36 Màn hình Lịch hoạt động 118 Hình 37 Màn hình tab Câu lạc 119 Hình 38 Màn hình tab Câu lạc khác 120 Hình 39 Màn hình Thơng tin chung câu lạc 121 Hình 40 Màn hình Thêm câu lạc 122 Hình 41 Màn hình Tab Tin nhắn chung 123 Hình 42 Tab quản lý câu lạc 124 Hình 43 Chỉnh sửa câu lạc 126 Hình 44 Chỉnh sửa câu lạc 126 Hình 45 Chỉnh sửa câu lạc 127 Hình 46 Tab quản lý tài khoản 128 Hình 47 Tab Thơng tin cá nhân 130 Hình 48 Tab quản lý lời mời câu lạc cá nhân 131 Hình 49 Quản lý lời mời hoạt động cá nhân 132 Hình 50 Tab hoạt động câu lạc 132 Hình 51 Form Thêm hoạt động 134 Hình 52 Chi tiết hoạt động 135 Hình 53 Chi tiết thẻ hoạt động 136 Hình 54 Màn hình Cộng tác viên tham gia hoạt động 137 Hình 55 Cài đặt hoạt động 138 Hình 56 Tab thành viên Club 139 Hình 57 Tab nhóm 140 Hình 58 Thêm thành viên 142 Hình 59 Thêm nhóm 142 Hình 60 Tab điểm 144 Hình 61 Thêm phiếu điểm 145 Hình 62 Tab tin nhắn nhóm 146 Hình 63 Tab quỹ câu lạc 147 Hình 64 Thêm phiếu thu/chi 148 Hình 65 Tab quỹ hàng tháng 149 Hình 66 Xác nhận quỹ hàng tháng 150 Hình 67 Cài đặt quỹ 151 Hình 68 Lời mời tham gia câu lạc 152 Hình 69 Lời mời tham gia hoạt động 153 Hình 70 Tab Nhật ký 154 Hình 71 Sơ đồ thành phần 154 Hình 72 Sơ đồ triển khai 155 Danh mục bảng biểu Bảng Danh sách yêu cầu nghiệp vụ 21 Bảng Danh sách Actor 30 Bảng Danh sách Use-case 32 Bảng Đặc tả Use-case Đăng nhập 33 Mô tả đối tượng hình Bảng 102 Mơ tả đối tượng hình Thêm thành viên/nhóm STT Tên Kiểu Chức tbTimkiem Input/Text Nhập tên hoạt động cần tìm iconSearch Icon tìm kiếm theo ký tự textBox Tìm kiếm Danh sách thành viên Table Hiển thị thông tin thành viên Lưu Button Lưu thông tin thêm Danh sách biến cố xử lý tương ứng Bảng 103 Danh sách biến cố xử lý tương ứng Thêm Thành viên/nhóm STT Biến cố Xử lý Chọn icon Search Tìm kiếm thơng tin nhóm text box Chọn TextInput Nhập thông tin Tick nhiều thành Thêm thành viên viên cần thêm, chọn thêm 143 7.2.21 Tab điểm Hình 60 Tab điểm 144 7.2.22 Thêm phiếu điểm Hình 61 Thêm phiếu điểm 145 7.2.23 Tab tin nhắn nhóm Hình 62 Tab tin nhắn nhóm Mơ tả đối tượng hình Bảng 104 Mơ tả đối tượng Tab tin nhắn nhóm STT Tên Kiểu Chức Nhập tin nhắn Input Nhập tin nhắn cần nhắn Send Button Gửi tin nhắn Icon tệp Button Chọn tệp Danh sách biến cố xử lý tương ứng Bảng 105 Danh sách biến cố xử lý tương ứng Tab tin nhắn nhóm STT Biến cố Xử lý Chọn textinput Nhập tin nhắn cần nhắn Chọn send Gửi tin nhắn 146 7.2.24 Tab quỹ Hình 63 Tab quỹ câu lạc Mô tả đối tượng hình Bảng 106 Mơ tả đối tượng Tab quỹ câu lạc STT Tên Kiểu Chức tbTimkiem Input/Text Nhập tên phiếu cần tìm iconSearch Icon tìm kiếm theo ký tự textBox Tìm kiếm Danh sách phiếu Table Hiển thị thông tin phiếu thu/chi Thêm phiếu Button Thêm phiếu Biểu đồ thống kê Image Thống kê số liệu Danh sách biến cố xử lý tương ứng 147 Bảng 107 Danh sách biến cố xử lý tương ứng Tab quỹ câu lạc STT Biến cố Xử lý Chọn icon Search Tìm kiếm thơng tin phiếu text box Chọn TextInput Nhập thông tin Chọn thêm phiếu Hiển thị giao diện thêm phiếu 7.2.25 Thêm phiếu Hình 64 Thêm phiếu thu/chi Mơ tả đối tượng hình Bảng 108 Mơ tả đối tượng Thêm phiếu thu/chi STT Tên Kiểu Chức Thu Buton Loại phiếu thu Chi Button Loại phiếu chi Số tiền thu/chi Text/input Nhập thông tin Nội dung phiếu Text/input Nhập thông tin 148 Icon upload Button Chọn tệp tải lên Lưu/Hủy Button Lưu/ đóng form Danh sách biến cố xử lý tương ứng Bảng 109 Danh sách biến cố xử lý tương ứng Thêm phiếu thu/chi STT Biến cố Xử lý Chọn button chi/Thu Xác nhận loại phiếu Chọn text/input Nhập thông tin Chọn button upload Tải tệp lên Chọn button Lưu Lưu thông tin 7.2.26 Tab quỹ hàng tháng Hình 65 Tab quỹ hàng tháng 149 7.2.27 Xác nhận quỹ hàng tháng Hình 66 Xác nhận quỹ hàng tháng 150 7.2.28 Cài đặt quỹ Hình 67 Cài đặt quỹ 151 7.2.29 Tab Lời mời 7.2.29.1 Yêu cầu tham gia câu lạc Hình 68 Lời mời tham gia câu lạc 152 7.2.29.2 Yêu cầu tham gia hoạt động Hình 69 Lời mời tham gia hoạt động 153 7.2.30 Tab Nhật ký Hình 70 Tab Nhật ký Component diagram Hình 71 Sơ đồ thành phần 154 Deploy diagram Hình 72 Sơ đồ triển khai Chương IV - Tổng kết Kết Sau thời gian thực đề tài, chương trình hoàn thành đạt số kết sau: - Hiểu rõ quy trình quản lý quản lý câu lạc trường - Xây dựng thành công website quản câu lạc đáp ứng nhu cầu đặt người tiêu dùng - Giao diện chương trình thân thiện, dễ sử dụng, - Hiểu nắm kiến thức mơ hình Client - Server, Responsitory, MERN Stack, thư viện Material UI, Socket.IO - Luyện tập HTML, CSS, Javascript 1.1 Sản phẩm: Link source code: https://github.com/pxuanbach/Club-Management Hạn chế Do hạn chế mặt thời gian kinh phí nên nhóm hồn thành mức độ hoàn thành yêu cầu đặt đề tài 155 Hướng phát triển Đề tài quản lý câu lạc phổ biến có khả cao việc đưa vào ứng dụng thực tiễn Tuy nhiên hạn chế thời gian nghiên cứu kinh nghiệm, nhóm phát triển mức độ hoàn thành yêu cầu đặt đề tài, tốc độ xử lý chưa hồn thiện Nhóm cố gắng tìm hiểu sâu có phương pháp quản lý hệ thống xử lý khối liệu lớn với hiệu cao, mở rộng phạm vi dự án Bảng phân công công việc Bảng 110 Phân công công việc STT Tên sinh viên Phạm Xn Bách Nguyễn Tiến Đạt Hồn thành Cơng việc giao 100% 100% - Code BackEnd - Thiết kế liệu - Design Figma - Code FrontEnd - Design Figma - Làm Báo Cáo 156 Tài liệu tham khảo • Các thư viện HTML – CSS : https://mui.com • Tài liệu mongoDB : MongoDB Documentation • Các học JavaScipt website https://www.w3schools.com/ • Tài liệu NodeJS : Documentation | Node.js (nodejs.org) • Các hướng dẫn Youtube Stack Overflow - Where Developers Learn, Share, & Build Careers 157 ...ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN ỨNG DỤNG QUẢN LÝ CÂU LẠC BỘ TRONG TRƯỜNG HỌC Giảng viên hướng... Tab quản lý câu lạc 125 11 Bảng 86 Danh sách biến cố xử lý tương ứng Tab quản lý câu lạc 125 Bảng 87 Mô tả đối tượng hình Chỉnh sửa câu lạc 127 Bảng 88 Danh sách biến cố xử lý tương ứng. .. tin quản lý câu lạc trường giúp cho việc quản lý trở nên đơn giản hơn, nằm rõ thơng tin 13 Phạm vi Quy trình quản lý câu lạc bộ, hoạt động, thành viên, tài khoản, tin nhắn nhóm cá nhân, quản lý