Xây dựng ứng dụng quản lý câu lạc bộ trong trường học (báo cáo cuối kì đồ án 1)

ĐẠ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: ThS Mai Trọng Khang 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: SE121.M21 Thành phố Hồ Chí Minh, ngày 10 tháng 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: ThS Mai Trọng Khang 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: SE121.M21 Thành phố Hồ Chí Minh, ngày 10 tháng 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 Thầy Mai Trọng Khang Đã 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 11 Lý chọn đề tài 11 Mục tiêu 12 Phạm vi 12 Người dùng 13 Phương pháp nghiên cứu 13 Chương II Cơ sở lý thuyết & Tổng quan công nghệ 14 Giới thiệu React JS 14 Giới thiệu MongoDB 14 2.1 Các đặc điểm MongoDB 14 2.2 Ưu nhược điểm MongoDB 15 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 20 Yêu cầu nghiệp vụ 20 1.1 Danh sách yêu cầu nghiệp vụ 20 3 Use case 22 2.1 Mơ hình Use Case 22 2.2 Danh sách Actor 27 2.3 Danh sách Use case 29 Acivity 62 3.1 Cập nhật thông tin đối tượng 62 3.2 Quản lý task công việc 64 Sequence 66 4.1 Đăng nhập 66 4.2 Thêm thành viên 67 4.3 Thêm nhóm 68 4.4 Xóa nhóm 69 4.5 Thêm tài khoản 70 4.6 Cập nhật câu lạc 71 4.7 Cập nhật nhóm 71 4.8 Xóa thành viên 72 4.9 Thêm câu lạc 74 4.10 Thêm hoạt động 75 4.11 Thêm phiếu quỹ (thu/chi) 76 4.12 Chặn câu lạc 77 4.13 Chặn tài khoản 78 Sơ đồ lớp 79 5.1 Sơ đồ lớp (Mức phân tích) 79 5.2 Danh sách lớp đối tượng quan hệ 81 5.3 Mô tả chi tiết đối tượng 81 Thiết kế CSDL 90 6.1 Sơ đồ logic 90 6.2 Mô tả chi tiết thành phần sơ đồ logic 91 Thiết kế giao diện 95 7.1 Danh sách hình 95 7.2 Mô tả chi tiết hình 97 Component diagram 125 Deploy diagram 126 Chương IV Tổng kết 126 Kết 126 1.1 Sản phẩm: 126 Hạn chế 127 Hướng phát triển 127 Bảng phân công công việc 127 Tài liệu tham khảo 127 Danh mục hình ảnh Hình Khả mở rộng Horizontal Scalability 17 Hình Mơ hình Client – Server 18 Hình Chi tiết thành phần hệ thống 19 Hình Use case tổng quát 22 Hình Use case đăng nhập 23 Hình Use case quản lý tài khoản 23 Hình Use case quản lý câu lạc 24 Hình Use case quản lý thành viên 24 Hình Use case quản lý nhóm 25 Hình 10 Use case quản lý hoạt động 25 Hình 11 Use case quản lý quỹ 26 Hình 15 Sơ đồ chức thêm thành viên 67 Hình 16 Sơ đồ chức thêm nhóm 68 Hình 17 Sơ đồ chức xóa nhóm 69 Hình 18 Sơ đồ chức thêm tài khoản 70 Hình 19 Sơ đồ chức cập nhật câu lạc 71 Hình 20 Sơ đồ chức cập nhật nhóm 72 Hình 21 Sơ đồ chức xóa thành viên 73 Hình 22 Sơ đồ chức thêm câu lạc 74 Hình 23 Sơ đồ chức thêm hoạt động 75 Hình 24 Sơ đồ chức thêm phiếu thu/chi 76 Hình 25 Sơ đồ chức chặn câu lạc 77 Hình 26 Sơ đồ chức chặn tài khoản 78 Hình 27 Sơ đồ lớp (mức phân tích) 80 Hình 28 Sơ đồ logic 90 Hình 29 Giao diện đăng nhập 97 Hình 30 Giao diện slideBar 98 Hình 31 Giao diện slideBarClub 100 Hình 32 Giao diện lịch hoạt động 102 Hình 33 Giao diện Tab câu lạc 103 Hình 34 Giao diện Thêm câu lạc 104 Hình 35 Giao diện tin nhắn cá nhân 105 Hình 36 Giao diện Tab quản lý câu lạc 107 Hình 37 Giao diện chỉnh sửa câu lạc 108 Hình 38 Giao diện chỉnh sửa câu lạc 109 Hình 39 Giao diện chỉnh sửa câu lạc 109 Hình 40 Giao diện tab quản lý tài khoản 111 Hình 41 Giao diện tab thơng tin cá nhân 112 Hình 42 Giao diện tab thơng tin cá nhân 113 Hình 43 Giao diện Tab hoạt động câu lạc 114 Hình 44 Giao diện Thêm hoạt động 115 Hình 45 Giao diện Chi tiết hoạt động 116 Hình 46 Giao diện chi tiết hoạt động 116 Hình 47 Giao diện Tab thành viên 117 Hình 48 Giao diện Tab nhóm 119 Hình 49 Giao diện Thêm thành viên 120 Hình 50 Giao diện Thêm nhóm 121 Hình 51 Giao diện Tab tin nhắn nhóm 122 Hình 52 Giao diện Tab quỹ câu lạc 123 Hình 53 Giao diện Thêm phiếu thu/chi 124 Hình 54 Component diagram 125 Hình 55 Deploy diagram 126 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 28 Bảng Danh sách Use Case 29 Bảng Chức đăng nhập 31 Bảng Chức quản lý câu lạc 32 Bảng Chức thêm thông tin 34 Bảng Chức sửa thông tin 36 Bảng Chức xóa thông tin 37 Bảng Chức tìm kiếm thơng tin 39 Bảng 10 Chức chặn quyền truy cập 40 Bảng 11 Chức thêm hoạt động 42 Bảng 12 Chức thêm thẻ 45 Bảng 13 Chi tiết thẻ hoạt động 46 Bảng 14 Tìm kiếm thành viên 48 Bảng 15 Thêm thành viên 50 Bảng 16 Xóa thành viên 51 Bảng 17 Thêm nhóm 53 Bảng 18 Chỉnh sửa nhóm 55 Bảng 19 Xóa nhóm 56 Bảng 20 Tin nhắn 58 Bảng 21 Tìm kiếm phiếu thu/chi 59 Bảng 22 Thêm phiếu thu/chi 61 Bảng 23 Mô tả trạng thái câp nhật đối tượng 63 Button Hủy Đóng form chỉnh sửa TextInput Nhập thơng tin cần sửa vào ButtonImage Chọn ảnh từ thư viện lên Bảng 75 Biến cố xử lý tương ứng Thông tin cá nhân 7.2.12 Tab hoạt động club Hình 40 Giao diện Tab hoạt động câu lạc Mô tả đối tượng hình 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 Card Hoạt động button Chọn hoạt động Thêm hoạt động button Thêm hoạt động Bảng 76 Đối tượng Tab hoạt động 114 Danh sách biến cố xử lý tương ứng STT Biến cố Xử lý Chọn icon Search Tìm kiếm thơng tin tên hoạt động text box Chọn TextInput Nhập thông tin Chọn button Card Activity Chuyển tới giao diện chi tiết hoạt động Chọn button Thêm (trong Hiển thị giao diện thêm hoạt động bảng danh sách) Bảng 77 Biến cố xử lý tương ứng Tab hoạt động 7.2.13 Thêm hoạt động Hình 41 Giao diện Thêm hoạt động Mơ tả đối tượng hình STT Tên Tên hoạt động Kiểu Chức Text/input Nhập tin hoạt động 115 Ngày bắt đầu DatePicker Chọn thời gian bắt đầu Ngày kết thúc DatePicker Chọn thời gian kết thúc Lưu Button Lưu thông tin Hủy Button Đóng form thêm Bảng 78 Đối tượng Thêm hoạt động Danh sách biến cố xử lý tương ứng STT Biến cố Xử lý Chọn text/input Nhập thông tin cần lưu Chọn Lưu Lưu thông tin Chọn Hủy Đóng giao diện thêm hoạt động Bảng 79 Biến cố xử lý tương ứng Thêm hoạt động 7.2.14 Chi tiết hoạt động Hình 43 Giao diện Chi tiết hoạt động Hình 44 Giao diện chi tiết hoạt động Danh sách biến cố xử lý tương ứng 116 STT Biến cố Xử lý Chọn thêm thẻ Nhập thông tin vào input vừa Chọn Lưu Thêm thẻ công việc vào bảng Chọn thẻ Hiển thị giao diện chi tiết thẻ Chọn button Tham gia Nhận task công việc Chọn button Thành viên Thêm thành viên vào task Text thêm mô tả Nhập thông tin cần mô tả Bảng 80 Biến cố xử lý tương ứng Giao diện chi tiết hoạt động 7.2.15 Tab thành viên Hình 44 Giao diện Tab thành viên Mơ tả đối tượng hình STT Tên Kiểu Chức Input/Text Nhập tên hoạt động cần tìm tbTimkiem 117 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 Thêm thành viên Button Hiển thị giao diện thêm thành viên Đuổi thành viên Button Xóa thành viên khỏi câu lạc Bảng 81 Đối tượng Tab thành viên Danh sách biến cố xử lý tương ứng STT Biến cố Xử lý Chọn icon Search Tìm kiếm thơng tin thành viên text box Chọn TextInput Nhập thông tin Chọn button thêm thành Hiển thị giao diện thêm thành viên viên Tick vào thành viên Xóa thành viên khỏi câu lạc bảng, chọn button đuổi thành viên Bảng 82 Biến cố xử lý tương ứng Tab thành viên 118 7.2.16 Tab nhóm Hình 45 Giao diện Tab nhóm Mơ tả đối tượng hình 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 Buttn Thêm nhóm Button Hiển thị giao diện thêm nhóm Danh sách nhóm Table Hiển thị thơng tin nhóm Icon chỉnh sửa Button Hiển thị giao diện chỉnh sửa Icon thùng rác Button Xóa nhóm Bảng 83 Đối tượng tab nhóm Danh sách biến cố xử lý tương ứng STT Biến cố Xử lý 119 Chọn icon Search Tìm kiếm thơng tin nhóm text box Chọn TextInput Nhập thơng tin Button thêm Hiển thị giao diện thêm nhóm Button chỉnh sửa Hiển thị giao diện chỉnh sửa Button xóa Xóa nhóm Bảng 84 Biến cố xử lý tương ứng tab nhóm 7.2.17 Thêm thành viên thêm nhóm Hình 47 Giao diện Thêm thành viên 120 Hình 48 Giao diện Thêm nhóm Mơ tả đối tượng hình 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 Bảng 85 Đối tượng Tab thêm thành viên/nhóm Danh sách biến cố xử lý tương ứng 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 121 Tick nhiều thành Thêm thành viên viên cần thêm, chọn thêm Bảng 86 Biến cố xử lý tương ứng thêm thành viên, thêm nhóm 7.2.18 Tab nhắn tin nhóm Hình 48 Giao diện Tab tin nhắn nhóm Mơ tả đối tượng hình 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 Bảng 87 Đối tượng tab nhắn tin nhóm Danh sách biến cố xử lý tương ứng 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 122 Bảng 88 Biến cố xử lý tương ứng tab nhắn tin nhóm 7.2.19 Tab quỹ Hình 49 Giao diện Tab quỹ câu lạc Mô tả đối tượng hình 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 Bảng 89 Đối tượng Tab quỹ Danh sách biến cố xử lý tương ứng STT Biến cố Chọn icon Search Xử lý Tìm kiếm thơng tin phiếu text box 123 Chọn TextInput Nhập thông tin Chọn thêm phiếu Hiển thị giao diện thêm phiếu Bảng 90 Biến cố xử lý tương ứng Tab quỹ 7.2.20 Thêm phiếu Hình 50 Giao diện Thêm phiếu thu/chi Mơ tả đối tượng hình 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 Icon upload Button Chọn tệp tải lên Lưu/Hủy Button Lưu/ đóng form Bảng 91 Đối tượng thêm phiếu Danh sách biến cố xử lý tương ứng 124 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 Bảng 92 Biến cố xử lý tương ứng thêm phiếu Component diagram Hình 51 Component diagram 125 Deploy diagram Hình 53 Deploy diagram Chương IV Tổng kết Kết Sau thời gian thực đề tài, chương trình hồ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 126 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 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 độ hồ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 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 Bảng 93 Phân công công việc 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) 127 • Các hướng dẫn Youtube Stack Overflow - Where Developers Learn, Share, & Build Careers 128 ... động, quy trình câu lạc • Nghiên cứu sở lý thuyết việc phát triển hệ thống thông tin quản lý câu lạc trường • Xây dựng hệ thống thơng tin quản lý câu lạc trường giúp cho việc quản lý trở nên đơn...ĐẠ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... 2.1.3 Use case quản lý tài khoản Hình Use case quản lý tài khoản 23 2.1.4 Use case quản lý câu lạc Hình Use case quản lý câu lạc 2.1.5 Use case quản lý thành viên Hình Use case quản lý thành viên