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)

Tổng quan

Mục tiêu

• Nghiên cứu tổng quan về các nghiệp vụ, hoạt động, các quy trình của câu lạc bộ

• Nghiên cứu trên cơ sở lý thuyết việc phát triển hệ thống thông tin quản lý câu lạc bộ trong trường

• Xây dựng hệ thống thông tin quản lý câu lạc bộ trong trường giúp cho việc quản lý trở nên đơn giản hơn, nằm rõ thông tin hơn.

Phạm vi

Quy trình quản lý các câu lạc bộ, hoạt động, thành viên, tài khoản, tin nhắn nhóm và cá nhân, quản lý quỹ của câu lạc bộ

Các vấn đề cần giải quyết trong quá trình quản câu lạc bộ, ví dụ như:

• Theo dõi tin nhắn nhóm, tin nhắn cá nhân

• Theo dõi, quản lý hoạt động, quản lý quỹ theo thời gian và quản lý tài khoản

• Thêm, xóa, sửa và tra cứu tìm kiếm thông tin của thành viên và nhóm thành viên

• Từ đó tiến hành xây dựng cơ sở dữ liệu và khai thác dữ liệu phục vụ công tác quản lý câu lạc bộ.

Người dùng

Hệ thống phần mềm thân thiện với người dùng giúp các quản lý câu lạc bộ tiết kiệm thời gian và công sức, đồng thời nâng cao hiệu quả quản lý với độ chính xác cao.

Phương pháp nghiên cứu

• Phương pháp hệ thống, phương pháp tư duy

• Phương pháp phân tích, tổng hợp

• Phương pháp tin học hóa bằng công cụ lập trình để giải quyết vấn đề

Cơ sở lý thuyết & Tổng quan công nghệ

Giới thiệu về React JS

React.js là thư viện Javascript ngày càng phổ biến trong xu hướng phát triển Single Page Application Khác với các framework khác như AngularJS, React nổi bật với sự đơn giản và khả năng tích hợp dễ dàng với các thư viện Javascript khác Trong khi AngularJS cho phép nhúng mã Javascript vào HTML qua các thuộc tính như ng-model hay ng-repeat, React sử dụng JSX để nhúng mã HTML vào Javascript, giúp việc lồng ghép các đoạn HTML trong JS trở nên dễ dàng và dễ hiểu hơn.

Giới thiệu về MongoDB

2.1 Các đặc điểm cơ bản của MongoDB

Mỗi cơ sở dữ liệu bao gồm nhiều collection, và mỗi collection chứa nhiều Document Các Document này có thể khác nhau về số lượng trường dữ liệu, kích thước và nội dung.

Cấu trúc của Document hỗ trợ các nhà phát triển trong việc xây dựng class và object bằng các ngôn ngữ lập trình khác nhau Mặc dù không có hàng và cột như trong bảng, nhưng cấu trúc dữ liệu vẫn rõ ràng thông qua các cặp key-value.

NoSQL cho phép người dùng linh hoạt trong việc tạo các trường mà không cần định nghĩa schema trước, điều này đặc biệt rõ ràng trong MongoDB, nơi các hàng hay còn gọi là documents có thể được tạo ra một cách tự do.

Mô hình dữ liệu của MongoDB hỗ trợ việc biểu diễn các quan hệ phân cấp, lưu trữ mảng và các cấu trúc phức tạp một cách dễ dàng hơn.

2.2 Ưu nhược điểm của MongoDB

• MongoDB là phần mềm mã nguồn mở miễn phí, có cộng đồng phát triển rất lớn

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

• Thử nghiệm cho thấy tốc độ insert, tốc độ insert của MongoDB có thể nhanh tới gấp 100 lần so với MySQL (So sánh hiệu suất của MongoDB với MySQL)

Tại sao MongoDB có hiệu năng cao như thế? Có các lý do sau:

• MongoDB lưu dữ liệu dạng JSON, khi bạn insert nhiều đối tượng thì nó sẽ là insert một mảng JSON gần như với trường hợp insert 1 đối tượng

Dữ liệu trong MongoDB không yêu cầu sự ràng buộc như trong hệ quản trị cơ sở dữ liệu quan hệ (RDBMS), cho phép thực hiện các thao tác như chèn, xóa hoặc cập nhật mà không cần kiểm tra tính liên kết với các bảng khác.

• Dữ liệu trong MongoDB được đánh chỉ mục (đánh index) nên khi truy vấn nó sẽ tìm rất nhanh

Khi thực hiện các thao tác như insert hoặc find trong MongoDB, hệ thống sẽ tạm thời khóa các thao tác khác Cụ thể, khi một thao tác find() đang diễn ra, nếu có thêm thao tác insert hoặc update, hệ thống sẽ dừng lại và chờ cho thao tác find() hoàn tất trước khi tiếp tục xử lý các yêu cầu khác.

MongoDB is a document database that stores data in JSON format, offering flexibility in the number of fields and data types This allows users to insert data freely without strict constraints.

• MongoDB là một rich query language tức là nó có sẵn các method để thực hiện create, read, update, delete dữ liệu (CRUD)

• MongoDB hỗ trợ replica set nhằm đảm bảo việc sao lưu và khôi phục dữ liệu

Khả năng mở rộng Horizontal Scalability:

Trong MongoDB, cụm (cluster) là tập hợp các node chứa dữ liệu và giao tiếp với nhau Để mở rộng hệ thống, người dùng chỉ cần thêm một node mới vào cụm.

Hình 1 Khả năng mở rộng Horizontal Scalability

• MongoDB không có các tính chất ràng buộc như trong RDBMS –> dễ bị làm sai dữ liệu

• Không hỗ trợ join giống như RDBMS nên khi viết function join trong code ta phải làm bằng tay khiến cho tốc độ truy vấn bị giảm

MongoDB sử dụng nhiều bộ nhớ do dữ liệu được lưu trữ dưới dạng key-value, dẫn đến việc lặp lại key trong các collection khác nhau Việc không hỗ trợ join gây ra tình trạng dư thừa dữ liệu, trong khi đó, trong RDBMS, chỉ cần lưu một bản ghi và các bản ghi khác có thể tham chiếu tới nó.

• Bị giới hạn kích thước bản ghi: mỗi document không được có kích thước

> 16Mb và không mức độ các document con trong 1 document không được

Kiến trúc hệ thống

• Trang web được xây dựng trên nền MERN STACK

• Sử dụng API để kết nối với MongoDB

3.2 Mô hình kiến trúc hệ thống

- Kiến trúc hệ thống theo mô hình Client – Sever

Tầng Client, hay còn gọi là máy tính (Host), có chức năng nhận thông tin hoặc sử dụng dịch vụ từ các nhà cung cấp dịch vụ (Server).

+ Tầng Sever: Tầng cung cấp các thông tin (dữ liệu) hoặc quyền truy cập vào các dịch vụ cụ thể

Hình 2 Mô hình Client – Server

+ Tầng Web (sẽ kết nối với tầng Sever & Client): Thành phần giao diện của chương trình tương tác với người sử dụng.

Mô tả chi tiết thành phần trong hệ thống

Mô hình client-server là một cấu trúc phổ biến trong mạng máy tính, được áp dụng rộng rãi cho mọi trang web hiện có Trong mô hình này, máy khách gửi yêu cầu đến máy chủ, nơi xử lý và trả kết quả về cho máy khách Chương trình ứng dụng được chia thành hai thành phần chính: Client (máy khách) bao gồm máy tính và các thiết bị điện tử, và Server (máy chủ) là nơi cài đặt các chương trình dịch vụ và lưu trữ tài nguyên.

Hình 3 Chi tiết thành phần trong hệ thống

Yêu cầu từ máy khách và phản hồi từ máy chủ tạo thành một dịch vụ, được gọi là dịch vụ web (web service), hoạt động trên nền tảng web.

Giao tiếp giữa Client và Server cần tuân thủ các giao thức chuẩn để đảm bảo tính hiệu quả và ổn định Hiện nay, các giao thức phổ biến nhất bao gồm TCP/IP, SNA của IBM, OSI, ISDN, X.25 và giao thức LAN-to-LAN NetBIOS.

Khách hàng (Client) là cá nhân hoặc tổ chức sử dụng một dịch vụ cụ thể, và trong thế giới kỹ thuật số, Client thường được hiểu là một máy tính (Host) có khả năng nhận thông tin hoặc sử dụng dịch vụ từ các nhà cung cấp dịch vụ (Server).

Server là một máy chủ cung cấp các dịch vụ và thông tin từ xa trong lĩnh vực công nghệ Trong mô hình Client-Server, Client là đối tượng yêu cầu thông tin hoặc dịch vụ, trong khi Server đáp ứng yêu cầu đó bằng cách truy xuất dữ liệu từ cơ sở dữ liệu.

Phân tích thiết kế ứng dụng

Yêu cầu nghiệp vụ

1.1 Danh sách yêu cầu nghiệp vụ

Stt Tên yêu cầu Biểu mẫu Qui định Ghi chú

1 Quản lý tài khoản Tạo, chặn

2 Quản lý câu lạc bộ Tạo, chặn, xóa, cập nhật

3 Quản lý thành viên Tạo, cập nhật, xóa

4 Quản lý hoạt động Tạo

5 Quản lý nhóm Tạo, sửa, xóa

6 Quản lý quỹ Tạo phiếu

7 Hội thoại trực tuyến Nhắn tin, gửi tệp

Bảng 1 Danh sách yêu cầu nghiệp vụ

Use case

Hình 4 Use case tổng quát

Hình 5 Use case đăng nhập

2.1.3 Use case quản lý tài khoản

Hình 6 Use case quản lý tài khoản

2.1.4 Use case quản lý câu lạc bộ

Hình 7 Use case quản lý câu lạc bộ

2.1.5 Use case quản lý thành viên

Hình 8 Use case quản lý thành viên

2.1.6 Use case quản lý nhóm

Hình 9 Use case quản lý nhóm

2.1.7 Use case quản lý hoạt động

Hình 10 Use case quản lý hoạt động

2.1.8 Use case quản lý quỹ

Hình 11 Use case quản lý quỹ

Hình 122 Use case tin nhắn

STT Tên Actor Ý nghĩa/Ghi chú

1 Admin Đăng nhập bằng tài khoản admin

• Danh sách thông tin tất cả tài khoản

• Thêm tài khoản, chặn tài khoản

• Nhập, xuất danh sách tài khoản Quản lý câu lạc bộ

• Chỉnh sửa thông tin câu lạc bộ (Chia chức vụ cho các thành viên, xóa thành viên, thêm thành viên vào câu lạc bộ)

• Chặn, xóa câu lạc bộ

• Nhập, xuất danh sách câu lạc bộ Nhắn tin

Cập nhật thông tin cá nhân

2 Chủ câu lạc bộ Đăng nhập

• Xem, tìm kiếm các hoạt động

• Xem chi tiết hoạt động

• Thêm, xóa các task cần làm

• Phân công công việc cho từng thành viên Quản lý thành viên

• Danh sách thành viên Quản lý nhóm

• Chỉnh sửa nhóm (đổi tên, xóa thành viên, thêm thành viên trong nhóm)

Cập nhật thông tin cá nhân

Xem các thông tin cơ bản của câu lạc bộ Nhắn tin

Bảng 2 Danh sách các Actor

2.3 Danh sách các Use case

STT Tên Use-case Ý nghĩa/Ghi chú

1 Đăng nhập Phân quyền Admin, chủ câu lạc bộ, thủ quỹ, thành viên

2 Quản lý câu lạc bộ Tìm kiếm, thêm, sửa, xóa, chăn câu lạc bộ

3 Quản lý tài khoản Tìm kiếm, thêm, chặn tài khoản

4 Quản lý hoạt động Tìm kiếm, thêm, xóa, hoạt động Thêm, xóa chi tiết hoạt động

5 Quản lý thành viên Tìm kiếm, thêm, xóa thành viên,

6 Quản lý nhóm Tìm kiếm, thêm, sửa, xóa nhóm Sửa nhóm (xóa thành viên, đổi tên nhóm, thêm thành viên)

7 Tìm kiếm thông tin Tìm kiếm thông tin

8 Chặn thông tin Không cho người dùng truy cập khi bị chặn

9 Thêm thông tin Thêm thông tin mơi vào dánh sách

10 Sửa thông tin Thay đổi thông tin

11 Xóa thông tin Xóa bỏ thông tin

12 Quản lý quỹ Tìm kiếm, thêm phiếu

13 Tin nhắn Tìn nhắn nhóm, tin nhắn cá nhân

Bảng 3 Danh sách các Use Case

Tên chức năng Đăng nhập

Mô tả chung Usecase này cho phép người dùng truy cập vào hệ thống

1 Người dùng truy cập ứng dụng “Ứng dụng quản lý câu lạc bộ trong trường”

2 Người dùng chọn phương thức đăng nhập

3 Người dùng nhập thông tin tài khoản và chọn lệnh đăng nhập

4 Hệ thống xác thực thông tin đăng nhập thành công và cho phép người dùng truy cập ứng dụng

Các yêu cầu đặc biệt

1 Tài khoản người dùng đã được tạo sẵn

2 Tài khoản người dùng đã được phân quyền

3 Thiết bị của người dùng đã được kết nối internet khi thực hiện đăng nhập

Trạng thái hệ thống trước khi thực hiện use case

Hệ thống chuyển sang màn hình Đăng nhập

Trạng thái hệ thống sau khi thực thiện use case

Use case thực hiện thành công:

→ Hệ thống truy cập website

Use case thực hiện không thành công:

Hệ thống sẽ thông báo khi thông tin đăng nhập không thành công Để khôi phục mật khẩu, nhân viên có thể chọn lệnh "Quên mật khẩu" và truy cập vào trường hợp sử dụng liên quan.

Bảng 4 Chức năng đăng nhập

2.3.3 Quản lý câu lạc bộ

Tên chức năng Quản lý câu lạc bộ

Use-case này cho phép người dùng quản lý các câu lạc bộ

1 Admin Đăng nhập vào hệ thống

2 Admin truy cập chức năng Quản lý câu lạc bộ

3 Hệ thống kiểm tra xác nhận tài khoản đăng nhập

4 Hệ thống hiển thị danh sách câu lạc bộ liên quan

1 Hệ thống không xác thực được tài khoản

2 Không hiển thị danh sách các câu lạc bộ ( Có thể do lỗi mạng )

Phải là tài khoản admin

Hệ thống chuyển sang màn hình Quản lý câu lạc bộ

→ Hệ thống hiển thị danh sách câu lạc bộ Use case thực hiện không thành công:

→ Hệ thống xác thực thông tin không thành công và hiển thị thông báo Điểm mở rộng Có thể chặn câu lạc bộ

Có thể thêm thành viên vào câu lạc bộ bất kì

Nhân viên chọn nút Nhập liệu → Vào Use case Nhập liệu

Bảng 5 Chức năng quản lý câu lạc bộ

Tên chức năng Thêm thông tin

Mô tả chung Use case này được sử dụng để thực hiện chức năng thêm thông tin câu lạc bô, hoặc thành viên viên, nhóm vào danh sách

Dòng sự kiện chính 1 Người dùng chọn chức năng “thêm” ở trang cần thêm

2 Hiển thị một giao diện mới để nhập thông tin

3 Chọn OK, hệ thống sẽ thêm nhân viên vào danh sách

4 Hệ thống trả về một thông báo “thêm thành công”

Dòng sự kiện khác 1 Nếu thông tin nhập vào bị trùng

2 Hệ thống thông báo lỗi và yêu cầu nhập lại

3 Nhập lại thông tin mới

4 Chọn OK, hệ thống sẽ thêm thành viên vào danh sách

Hệ thống chuyển sang màn hình Thêm câu lạc bộ/thành viên

→ Hệ thống hiển thị danh sách câu lạc bộ/thành viên Use case thực hiện không thành công:

→ Hệ thống xác thực thông tin không thành công và hiển thị thông báo Điểm mở rộng Không

Bảng 6 Chức năng thêm thông tin

Tên chức năng Sửa thông tin

Mô tả chung Use case này được sử dụng để thay đổi thông tin

Dòng sự kiện chính 1 Người dùng chọn một chức năng chỉnh sửa

2 Hiển thị một giao diện chỉnh sửa thông tin

3 Chỉnh sửa trực tiếp thông tin trên các textinput

4 Hệ thống xác nhận thông tin hợp lệ

5 Hiển thị thông tin đó lên chỗ vừa sửa

Dòng sự kiện khác Không

→ Hệ thống hiển thị danh câu lạc bộ/nhóm Use case thực hiện không thành công:

→ Hệ thống xác thực thông tin không thành công và hiển thị thông báo

Bảng 7 Chức năng sửa thông tin

Tên chức năng Xóa thông tin

Mô tả chung Use case này được sử dụng để xóa thông tin khỏi danh sách

Dòng sự kiện chính 1 Người dùng chọn một thông tin cần xóa tại danh sách

2 Chọn biểu tượng thùng rác để xóa thông tin

3 Hệ thống xác nhận xóa

→ Xóa thông tin khỏi hệ thống hiển thị danh sách sản phẩm/nhân viên

Bảng 8 Chức năng xóa thông tin

Tên chức năng Tìm kiếm thông tin

Use Case này cho phép người dùng thực hiện chức năng tìm kiếm nhân viên trên website Người dùng có thể tìm kiếm nhân viên cần thiết và kiểm tra xem thông tin của nhân viên đó có tồn tại trên trang web hay không.

Dòng sự kiện chính 1 Người dùng chọn chức năng tìm kiếm từ tab nhân viên

2 Người dùng nhập thông tin tìm kiếm

3 Hệ thống xác nhận thông tin và thực hiện tìm kiếm

4 Hệ thống trả về thông tin tìm kiếm

Các yêu cầu đặc biệt Không

Use case thực hiện thành công :

→ Hiển hiển thị danh sách sản phẩm/nhân viên Use case thực hiện không thành công:

→ Hệ thống xác thực thông tin không thành công và hiển thị thông báo

Bảng 9 Chức năng tìm kiếm thông tin

Use case này không cho phép người dùng truy cập vào câu lạc bộ khi tài khoản bị chặn

Dòng sự kiện chính 1 Admin chọn icon khóa (chặn)

2 Hệ thống sẽ chặn tài khoản

Hiển thi icon mở khóa

→ Hiển hiển thị icon khóa đóng

Bảng 10 Chức năng chặn quyền truy cập

Tên chức năng Thêm hoạt động

Mô tả chung Usecase này cho chủ câu lạc bộ thêm các hoạt động sắp diễn ra, để phân chia công việc

Dòng sự kiện chính 1 Người dùng đăng nhập thành công vào hệ thống với tư cách là chủ câu lạc bộ

2 Hệ thống sẽ hiển thị các tab

4 Hiển thị giao diện tab hoạt động

5 Chọn chức năng thêm hoạt động

6 Hiển thị form thêm hoạt động

7 Nhập thông tin cần thiết

8 Hệ thông xử lí và báo thêm thành công

Dòng sự kiện khác 1 Thông tin không hợp lệ (Hệ thống yêu cầu nhập lại thông tin)

2 Không thể cập nhật cơ sở dữ liệu (Do lỗi mạng hoặc tác nhân không mong muốn) hệ thống sẽ yêu cầu nhập lại, nếu vẫn bị lỗi thì liên hệ với nhà phát triển

Các yêu cầu đặc biệt Bắt buộc phải nhập tất cả thông tin

Actor: Chủ câu lạc bộ Điều kiện: người dùng đã đăng nhập vào hệ thống và có quyền sử dụng chức năng này

Hiển thị card hoạt động lên màn hình Điểm mở rộng Không có

Bảng 11 Chức năng thêm hoạt động

Tên chức năng Thêm thẻ công việc

Mô tả chung Usecase này cho phép chủ câu lạc bộ có thể thêm 1 hoặc nhiều task công việc vào các bảng

Dòng sự kiện chính 1 Chủ cửa hàng chọn một hoạt động

2 Hệ thống hiển màn hình chứa các bảng: cần làm, đang làm, đã xong, ghi chú

3 Chọn chức năng thêm thẻ, để thêm task công việc vào từng bảng

4 Hệ thống hiển thị textarea để điền tên task

6 Hệ thống sẽ thêm một thẻ mới vào bảng công việc

Dòng sự kiện khác 1 Thông tin không hợp lệ( Hệ thống yêu cầu nhập lại thông tin)

2 Không thể cập nhật cơ sở dữ liệu( Do lỗi mạng hoặc tác nhân không mong muốn) hệ thống sẽ yêu cầu nhập lại, nếu vẫn bị lỗi thì liên hệ với nhà phát triển

Các yêu cầu đặc biệt Bắt buộc phải nhập nội dung thẻ

Có thể chuyển thẻ từ bảng này sang bảng khác

Trạng thái hệ thống trước khi thực hiện use case Đăng nhập với tư cách là chủ câu lạc bộ

Một thẻ mới xuất hiện trên bảng công việc Điểm mở rộng Có thể chuyển thẻ từ bảng này sang bảng khác

Cập nhật chi tiết thông tin thẻ đó

Bảng 12 Chức năng thêm thẻ

2.3.9.3 Thêm thông tin chi tiết thẻ công việc

Tên chức năng Thêm thông tin chi tiết thẻ công việc

Usecase này cho phép chủ câu lạc bộ dễ dàng thêm các nội dung quan trọng vào thẻ công việc, bao gồm thông tin về thành viên tham gia, mô tả công việc và các file đính kèm cần thiết.

Dòng sự kiện chính 1 Chủ câu lạc bộ chọn 1 thẻ có trong bảng công việc

2 Hệ thống hiển thị một màn hình modal mới chưa các thông tin cần thêm của một thẻ

3 Chủ câu lạc bộ có thể thêm thành viên vào thẻ, thêm mô tả thẻ, đính kèm file

4 Sau khi thêm, hệ thống sẽ hiển thị các thông tin chi tiết của thẻ đó

Các yêu cầu đặc biệt Đăng nhập với tư cách là chủ câu lạc bộ

Actor: Chủ câu lạc bộ Điều kiện: người dùng đã đăng nhập vào hệ thống và có quyền sử dụng chức năng này

Không có Điểm mở rộng Không có

Bảng 13 Chi tiết thẻ hoạt động

Use Case này cho phép người dùng thực hiện chức năng tìm kiếm nhân viên, giúp họ dễ dàng tra cứu thông tin về nhân viên cần thiết và xác định xem thông tin đó có sẵn trên website hay không.

→ Hiển hiển thị danh sách thành viên Use case thực hiện không thành công:

Bảng 14 Tìm kiếm thành viên

Actor: Chủ câu lạc bộ

Tên chức năng Sửa thông tin

Mô tả chung Use case này được sử dụng để thay đổi thông tin

Dòng sự kiện chính 3 Người dùng chọn một chức năng chỉnh sửa

4 Hiển thị một giao diện chỉnh sửa thông tin

3 Chỉnh sửa trực tiếp thông tin trên các textinput

4 Hệ thống xác nhận thông tin hợp lệ

5 Hiển thị thông tin đó lên chỗ vừa sửa

→ Hệ thống hiển thị danh câu lạc bộ/nhóm Use case thực hiện không thành công:

Tên chức năng Nhắn tin

Mô tả chung Use case này được sử dụng để các thành viên nhắn tin với nhau

Dòng sự kiện chính 1 Người dùng chọn tab tin nhắn

2 Hệ thống hiển thị màn hình tin nhắn

3 Nhập thông tin cần nhắn hoặc file đính kèm

4 Nhấn Send để gửi tin nhắn

→ Tin nhắn được gửi, xuất hiện trên màn hình Use case thực hiện không thành công:

→ Không thấy tin nhắn trên màn hình Điểm mở rộng Có thể nhắn tin trong nhóm, hoặc nhắn tin với các tài khoản cá nhân khác

Use Case này cho phép người dùng thực hiện chức năng tìm kiếm nhân viên trên website Người dùng có thể dễ dàng tìm kiếm thông tin về nhân viên cần thiết và xác nhận xem thông tin đó có tồn tại trên trang web hay không.

→ Hiển hiển thị danh sách sản phẩm/nhân viên Use case thực hiện không thành công:

Bảng 21 Tìm kiếm phiếu thu/chi

Bảng 22 Thêm phiếu thu/chi

Acivity

3.1 Cập nhật thông tin đối tượng

Hình 13 Sơ đồ trạng thái cập nhật đối tượng

3.1.2 Bảng mô tả các trạng thái

STT Trạng thái Ý nghĩa Xử lý liên quan

1 Chọn đối tượng cần cập nhật

Chọn đối tượng mà mình muốn sửa đổi thông tin hay xóa

Click chọn 1 đối tượng có trong bảng

2 Nhập thông tin Nhập thông tin cần cập nhật vào giao diện mới

3 Thông tin không hợp lệ

Thông tin nhập vào sai hoặc đã trùng

Thông tin mới được lưu vào bảng

Xác nhận cập nhật thành công

Bảng 23 Mô tả trạng thái câp nhật đối tượng

3.2 Quản lý task công việc

Hình 14 Sơ đồ trạng thái quản lý task công việc

3.2.2 Bảng mô tả các trạng thái

STT Trạng thái Ý nghĩa Xử lý liên quan

1 Tạo task công việc Tạo 1 thẻ có tên công việc

2 Nhập tiêu đề của thẻ

3 Task nào ứng với bảng đó

Phân chia rõ ràng từng task vào từng bảng

4 Di chuyển thẻ Có thẻ chuyển thẻ từ cột này sang cột khác

Bảng 24 Mô tả trạng thái quản lý task công việc

Sequence

Hình 15 Sơ đồ tuần tự chức năng đăng nhập

Hình 13 Sơ đồ tuần tự chức năng thêm thành viên

Hình 14 Sơ đồ tuần tự chức năng thêm nhóm

Hình 15 Sơ đồ tuần tự chức năng xóa nhóm

Hình 16 Sơ đồ tuần tự chức năng thêm tài khoản

4.6 Cập nhật câu lạc bộ

Hình 16 Sơ đồ tuần tự chức năng cập nhật câu lạc bộ

Hình 17 Sơ đồ tuần tự chức năng cập nhật nhóm

Hình 19 Sơ đồ tuần tự chức năng xóa thành viên

Hình 20 Sơ đồ tuần tự chức năng thêm câu lạc bộ

Hình 21 Sơ đồ tuần tự chức năng thêm hoạt động

4.11 Thêm phiếu quỹ (thu/chi)

Hình 22 Sơ đồ tuần tự chức năng thêm phiếu thu/chi

Hình 23 Sơ đồ tuần tự chức năng chặn câu lạc bộ

Hình 24 Sơ đồ tuần tự chức năng chặn tài khoản

Sơ đồ lớp

5.1 Sơ đồ lớp (Mức phân tích)

Hình 24 Sơ đồ lớp (mức phân tích)

5.2 Danh sách các lớp đối tượng và quan hệ

STT Tên lớp/quan hệ Loại Ý nghĩa/Ghi chú

1 User Thông tin thành viên

2 Club Thông tin câu lạc bộ

3 Group Thông tin nhóm thành viên trong câu lạc bộ

4 Activity Thông tin hoạt động

5 ActivityCard Chi tiết hoạt động

6 FundHistory Thông tin phiếu thu/chi

7 Chatroom Thông tin nhóm chat

8 Message Thông tin các tin nhắn

Bảng 25 Danh sách các lớp đối tượng và quan hệ

5.3 Mô tả chi tiết từng đối tượng

STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi chú

1 username String public Tên tài khoản

2 password String public Mật khẩu

3 img_url String public Ảnh đại diện

4 Cloudinary_id String public Mã kho thư viện

5 email String public Email cá nhân

6 gender String public Giới tính

7 phone String public Số điện thoại

8 facebook String public Đường dẫn facebook

9 Description String Public Mô tả bản thân

10 Isblocked Boolean Public Chặn tài khoản

11 Clubs ObjectId Public Mã câu lạc bộ

Bảng 26 Danh sách thuộc tính của tài khoản

5.3.1.2 Danh sách các tính năng

STT Tên phương thức Kiểu trả về Ràng buộc Ý nghĩa/ghi chú

1 Login() Task Public Đăng nhập

2 UpdateInfo() Task Public Cập nhật thông tin cá nhân

3 changePassword() Task Pubic Thay đổi mật khẩu

4 getList() List Public Lấy thông tin thành viên

5 getOne() List Public Lấy thông tin 1 thành viên

6 Block() Task Public Chặn tài khoản thành viên

7 Search() List Public Tìm kiếm thành viên

Bảng 27 Danh sách các tính năng của tài khoản

1 Name String public Tên câu lạc bộ

2 Fund Number public Tổng quỹ

3 Img_url String public Ảnh câu lạc bộ

4 Cloudinary_id String public Mã kho ảnh

5 Leader ObjectId public Mã chủ câu lạc bộ

6 Treasure ObjectId public Mã thủ quỹ

7 Description String public Mô tả câu lạc bộ

8 Isblocked Boolean public Chặn câu lạc bộ

9 Members ObjectId public Mã thành viên

Bảng 28 Danh sách thuộc tính của câu lạc bộ

5.3.2.2 Danh sách các tính năng

1 Create() Task Public Tạo câu lạc bộ

2 Verifyclub() Task Public Xác thực câu lạc bộ

3 getList() List Public Lấy thông tin câu lạc bộ

4 getOne() List Public Lấy thông tin 1 câu lạc bộ

5 Block() Task Public Chặn tài câu lạc bộ

6 Search() List Public Tìm kiếm câu lạc bộ

7 getMembers() List Public Lấy tất cả thành viên

8 searchMembers() List Public Tìm kiếm thành viên trong câu lạc bộ

9 searchUserNotMembers() List Public Tìm kiếm tài khoản không trong câu lạc bộ

10 getUserNotMember() List Public Lấy tài khoản không phải thành viên câu lạc bộ

11 AddMember() Task Public Thêm thành viên vào câu lạc bộ

12 Update() Task Public Chỉnh sửa câu lạc bộ

13 Promote Task Public Chia chức vụ

14 removeMember() Task Public Xóa thành viên

15 Delete() Task Public Xóa câu lạc bộ

Bảng 29 Danh sách các tính năng của câu lạc bộ

1 Name String public Tên nhóm

2 Club ObjectId public Mã câu lạc bộ

3 Members ObjectId public Mã thành viên

Bảng 30 Danh sách thuộc tính của Group

5.3.3.2 Danh sách các phương thức

1 Create() Task public Tạo nhóm

2 AddMembers() Task Public Thêm thành viên vào nhóm

3 getList() List Public Lấy danh sách thành viên

4 getAll() List Public Lấy tất cả thông tin

5 getAllNotInGroup() List Public Lấy tất cả thông tin thành viên không có trong nhóm

6 getOne() List Public Lấy một thành viên/nhóm

7 searchGroupInClub List Public Tìm kiếm nhóm trong câu lạc bộ

8 searchAllNotInGroup List Public Tìm kiếm thành viên

9 Update() Task Public Cập nhật thông tin nhóm

10 Delete() Task Public Xóa nhóm

11 SearchAll() List Public Tìm kiếm tất cả

Bảng 31 Danh sách các phương thức của Group

2 Content String public Nội dung hoạt động

3 startDate Date public Ngày bắt đầu

4 endDate Date Public Ngày kết thúc

5 Title String Public Tiêu đề hoạt động

6 Cards ObjectId Public Mã thẻ hoạt động

Bảng 32 Danh sách thuộc tính của Activity

1 Create() Task public Tạo hoạt động

2 getList() List Public Lấy danh sách hoạt động

3 getOne() List Public Lấy 1 hoạt động

4 updateBoards() Task Public Cập nhật thông tin bảng hoạt động

Bảng 33 Danh sách các phương thức của Activity

1 Title String public Tiêu đề hoạt động

2 Description String public Mô tả hoạt động

3 url String public Ảnh hoạt động

4 cloudId String public Mã kho lưu trữ

5 userJoin ObjectId public Thành viên tham gia

6 groupJoin ObjectId public Nhóm tham gia

Bảng 34 Danh sách thuộc tính của ActivityCard

2 Content String public Nội dung phiếu

3 Type String public Loại phiếu (thu/chi)

4 Total Number public Tổng quỹ

5 File_url String public Đường dẫn phiếu

6 Cloudinary_id String public Mã kho lưu trữ

7 Author ObjectId public Người đóng quỹ

Bảng 35 Danh sách thuộc tính của FundHistory

1 Create() Task public Tạo phiếu

2 getList() List public Lấy danh sách phiếu

List public Lấy tiền trả theo tháng

4 Search() List public Tìm kiếm phiếu

Bảng 36 Danh sách các phương thức của FundHistory

1 Room_id String public Mã phòng

2 Type String public Loại phòng

Bảng 37 Danh sách thuộc tính của ChatRoom

1 sendMessage() Task public Gửi tin nhắn

List Public Lấy lịch sử tin nhắn

Bảng 38 Danh sách các phương thức của ChatRoom

1 Author ObjectId public Mã thành viên

2 Type String public Loại tin nhắn

3 Content String public Nội dung tin nhắn

4 Room_id String Public Mã phòng

Bảng 39 Danh sách thuộc tính của Message

1 Find() Task public Tìm tin nhắn

Bảng 40 Danh sách các phương thức của Message

Thiết kế CSDL

STT Tên bảng dữ liệu Diễn giải

1 User Thông tin cá nhân, tài khoản các thành viên

2 Admin Người quản lý phần mềm

3 Club Chưa thông tin của câu lạc bộ

4 Leader Chủ câu lạc bộ

6 Group Thông tin nhóm thành viên

7 Activity Thông tin hoạt động

8 ActivityCard Thông tin chi tiết hoạt động

9 FundHistory Thông tin phiếu thu/chi quỹ

Bảng 41 Các dữ liệu trong Sơ đồ logic Hình 25 Sơ đồ logic

6.2 Mô tả chi tiết các thành phần trong sơ đồ logic

STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/ghi chú

1 Username Nvarchar Not null Tên tài khoản

2 Password nvarchar 100 kí tự Mật khẩu

3 Img_url Nvarchar Ảnh đại diện

4 Cloudinary_id Nvarchar Mã thư viện

5 Email Nvarchar Thông tin email

7 Phone Nvarchar Số điện thoại

8 Facebook Nvarchar Đường dẫn facebook

9 Description Nvarchar Mô tả cá nhân

11 clubs Nvarchar Mã câu lạc bộ

Bảng 42 Các thành phần của User

1 Username Nvarchar Tài khoản admin

2 Password Nvarchar 100 kí tự Mật khẩu

11 Clubs Nvarchar Mã câu lạc bộ

Bảng 43 Các thành phần của Admin

1 Club Nvarchar Mã câu lạc bộ

2 Content Nvarchar 100 kí tự Nội dung thu/chi

3 Type Varchar 15 kí tự Loại thu/chi

5 File_url Nvarchar Đường đẫn

7 Author Nvarchar Mã người đóng

Bảng 44 Các thành phần của FundHistory

Bảng 45 Các thành phần của Leader

Bảng 46 Các thành phần của Treasure

1 Name Nvarchar Tên câu lạc bộ

3 Img_url Nvarchar Ảnh câu lạc bộ

4 Cloudinary_id Nvarchar Thư viện ảnh

5 Leader Nvarchar Mã chủ câu lạc bộ

6 Treasure Nvarchar Mã thủ quỹ

7 Description Nvarchar Mô tả câu lạc bộ

9 Members Nvarchar Mã thành viên

Bảng 47 Các thành phần của Club

3 Members Nvarchar Mã thành viên

Bảng 48 Các thành phẩn của Group

2 Content Nvarchar Nội dung hoạt động

3 startDate Date Ngày bắt đầu

4 endDate Date Ngày kết thúc

5 Title Nvarchar Tiêu đề hoạt động

6 Cards Nvarchar Mã thẻ hoạt động

Bảng 49 Các thành phần của Activity

2 Description Nvarchar Mô tả hoạt động

3 url Nvarchar Ảnh hoạt động

4 Cloudid Nvarchar Thư viện ảnh

5 Userjoin Nvarchar Mã thành viên tham gia

6 Groupjoin Nvarchar Mã nhóm tham gia

Bảng 50 Các thành phần của ActivityCard

1 Room_id Nvarchar Mã phòng

Bảng 51 Các thành phần của ChatRoom

1 Room_id Nvarchar Mã phòng

4 Author Nvarchar Mã người nhắn

Bảng 52 Các thành phần của Message

Thiết kế giao diện

7.1 Danh sách các màn hình

STT Tên màn hình Ý nghĩa / Ghi chú

2 SlideBar Chứa các thanh dẫn đến các trang tương ứng

3 SlideBarClub Chứa các thanh dẫn đến các trang tương ứng trong club

4 Tab Lịch hoạt động tổng Hiển thị các thời gian hoạt động sắp diễn ra

5 Tab Câu lạc bộ Chứa các card câu lạc bộ

6 Tab quản lý câu lạc bộ Hiển thị danh sách thông tin các câu lạc bộ

7 Tạo câu lạc bộ Thêm câu lạc bộ mới

8 Tab quản lý tài khoản Hiển thị danh sách thông tin tài khoản

9 Thêm tài khoản Màn hình thêm tài khoản

10 Thêm mới sản phẩm Thêm sản phẩm

11 Cập nhật sản phẩm Cập nhật sản phẩm

12 Chỉnh sửa câu lạc bộ Hiển thị màn hình chỉnh sửa câu lạc bộ

13 Đổi mật khẩu Đổi mật khẩu

14 Chức năng xóa, chặn Hiển thị dưới dạng icon

15 Tab thông tin cá nhân Hiển thị thông tin cá nhân

16 Chỉnh sửa thông tin cá nhân Để thay đổi thông tin

17 Chỉnh sửa thông tin cá nhân Hiển thị danh sách hóa đơn đổi trả

18 Giao diện khi vào câu lạc bộ Hiển thị giao diện chung của câu lạc bộ

19 Tab hoạt động Hiển thị các hoạt động

20 Thêm hoạt động Thêm hoạt động

21 Tab thành viên Hiển thị thành viên

22 Tab nhóm trong tab thành viên Hiển thị các nhóm

23 Màn hình thêm thành viên Thêm thành viên

24 Màn hình thêm nhóm Thêm nhóm

25 Màn hình chỉnh sửa nhóm Chỉnh sửa nhóm

26 Tab tin nhắn Hiển thị và nhắn tin trong nhóm

27 Tab Quỹ Hiển thị thông tin quỹ

28 Màn hình thêm phiếu Thêm phiếu

Bảng 53 Danh sách các màn hình giao diện

7.2 Mô tả chi tiết các màn hình

Mô tả các đối tượng trên màn hình

STT Tên Kiểu Chức năng

1 Tài khoản input/text Nhập tên đăng nhập

2 Mật khẩu input/password Nhập mật khẩu

3 Đăng nhập button Đăng nhập

Bảng 54 Đối tượng trên màn hình Đăng nhập

Danh sách biến cố và xử lý tương ứng

STT Biến cố Xử lý

1 Chọn button Đăng nhập Đăng nhập vào trang quản trị (Admin)

Bảng 55 Danh sách biến cố và xử lý tương ứng của màn hình Đăng nhập

Hình 26 Giao diện đăng nhập

1 btnLich Button Hiển thị trang lịch

2 btnCauLacBo Button Hiển thị các thẻ câu lạc bộ

3 btnTinnhan Button Hiển thị trang tin nhắn cá nhân

4 btnQuảnLyCLB Button Hiển thị trang quản lý câu lạc bộ

5 btnQuanLyTaiKhoan Button Hiển thị trang quản lý tài khoản

6 btnThongtincanhan Button Hiển thị trang thông tin cá nhân

7 btnDangXuat Button Trở về trang đăng nhập

Bảng 56 Đối tượng trên SlideBar

1 Chọn button Lịch trình Hiển thị màn hình lịch trình

2 Chọn button Câu lạc bộ của bạn

Chuyển sang màn hình các câu lạc bộ

3 Chọn button tin nhắn Chuyển sang màn hình tin nhắn cá nhân

4 Chọn button quản lý CLB Chuyển sang màn hình quản lý câu lạc bộ

5 Chọn button quản lý tài khoản

Chuyển sang màn hình quản lý tài khoản

6 Chọn button thông tin cá nhân

Chuyển sang màn hình thông tin cá nhân

7 Chọn button đăng xuất Chuyển sang màn hình đăng nhập

Bảng 57 Biến cố và xử lý tương ứng trên SlideBar

1 Avata Image Hiển thị ảnh CLB

2 buttonBack Button Trở về trang trước

3 Hoạt động Button Hiển thị màn hình hoạt động

4 Thành viên Button Hiển thị màn hình thành viên

5 Lịch hoạt động Button Hiển thị lịch trình của CLB

6 Tin nhắn Button Hiển thị màn hình tin nhắn nhóm

7 Qũy CLB Button Tab quản lý quỹ

Bảng 58 Đối tượng trên SlideBarClub

1 btnBack Trở về trang CLB

2 btnAcitivy Chuyển sang màn hình hoạt động

3 btnPerson Chuyển sang màn hình thành viên

4 btnCalendar Chuyển sang màn hình lịch trình CLB

5 btnMessage Chuyển sang màn hình tin nhắn CLB

6 btnFund Chuyển sang màn hình quỹ

Bảng 59 Biến cố và xử lý tương ứng trên SlideBarClub

1 Lịch Table Hiện thị ngày các thứ trong tuần

2 Today Button Hiển thị ngày hôm này

3 btnNext Button Chuyển tháng kế tiếp

4 June 2022 Button Chọn thời gian mong muốn

5 Chi tiết deadline Form Hiện thị card chưa thông tin hoạt động

Bảng 60 Đối tượng trên Lịch hoạt động

1 Chọn button btnToday Hiển thị các deadline vào ngày hiện tại

Hình 29 Giao diện lịch hoạt động

2 Chọn button back Hiển thị Lịch ở tháng trước

3 Chọn buttonNext Hiển thị Lịch ở tháng tiếp theo

4 Chọn buttonDate Chọn thời gian bất kì

5 Chọn 1 deadline bất kì Hiển thị chi tiết deadline đó

Bảng 61 Biến cố và xử lý tương ứng trên Lịch hoạt động

7.2.5 Tab Câu lạc bộ của tôi

1 tbTimKiem Input/Text Nhập chuỗi tìm kiếm

2 iconSearch Icon Tìm theo từ khóa

4 Card div Hiển thị card CLB

Bảng 62 Đối tượng trên Tab câu lạc bộ của tôi

Hình 30 Giao diện Tab câu lạc bộ của tôi

1 Chọn icon Search (trong thanh Tìm kiếm )

Tìm kiếm các CLB theo các từ khóa và hiển thị ở bên dưới

2 Chọn buttonAddClub Hiển thị Form thêm câu lạc bộ

3 Chọn Card Club Chuyển tới màn hình câu lạc bộ

Bảng 63 Biến cố và xử lý tương ứng trên Tab câu lạc bộ của tôi

7.2.6 Màn hình thêm câu lạc bộ

1 Ảnh đại diện Button Chọn ảnh CLB

2 Tên CLB Text/Input Nhập thông tin CLB

3 Mô tả CLB Text/Input Nhập mô tả CLB

Hình 31 Giao diện Thêm câu lạc bộ

4 Trưởng CLB Select Chọn trưởng clb

5 Thủ quỹ Select Chọn thủ quỹ

Bảng 64 Đối tượng trên Thêm CLB

1 Chọn TextInput Nhập thông tin

2 Chọn btnImage Upload file ảnh lên

3 Chọn select Chọn thành viên cho chức vụ

4 Chọn Lưu Lưu thông tin câu lạc bộ

Bảng 65 Biến cố và xử lý tương ứng trên Thêm CLB

Hình 32 Giao diện tin nhắn cá nhân

1 tbTimKiem Input/Text Nhập chuỗi tìm kiếm

2 iconSearch Icon Tìm theo từ khóa

3 MessageItem Button Hiển thị tin nhắn của từng cá nhân

4 Nhập tin nhắn TextInput Nhập thông tin cần nhắn

5 Send Button Gửi tin nhắn

6 Icon 3 chấm Button Xóa tin nhắn

Bảng 66 Đối tượng trên tab tin nhắn

Tìm kiếm tài khoản cần nhắn theo các từ khóa và hiển thị ở bên dưới

2 Chọn icon 3 chấm Để xóa các cuộc hội thoại

Bảng 67 Biến cố và xử lý tương ứng trên tab tin nhắn

7.2.8 Tab quản lý câu lạc bộ

1 tbTimKiem Input/Text Nhập thông tin khách hàng

2 iconSearch Icon Tìm kiếm thông tin khách hàng theo từ khóa

3 btnXuatFile Button Xuất file danh sách khách hàng

4 danhSachCLB Table Bảng danh sách CLB

5 btnThêmCLB Button Thêm câu lạc bộ

6 iconUpdate Butto Hiển thị màn hình chỉnh sửa

7 iconBlock Button Chặn câu lạc bộ

Bảng 68 Đối tượng trên Tab quản lý CLB Hình 33 Giao diện Tab quản lý câu lạc bộ

Tìm kiếm các sản phẩn theo từ khóa trong textBox Tìm kiếm và hiển thị bảng bên dưới

2 Chọn button Xuất File Xuất ra file exel danh sách CLB

3 Chọn iconUpdate Hiển thị form chỉnh sửa

6 Chon btnAddClub Hiển thị form thêm CLB

Bảng 69 Biến cố và xử lý tương ứng trên Tab quản lý CLB

Hình 35 Giao diện chỉnh sửa câu lạc bộ

Hình 37 Giao diện chỉnh sửa câu lạc bộ Hình 35 Giao diện chỉnh sửa câu lạc bộ

1 tbTimkiem Input/Text Nhập tên cần tìm

2 iconSearch Icon tìm kiếm theo ký tự trong textBox Tìm kiếm

3 Tên CLB Input/Text Nhập tên CLB

4 Mô tả CLB Input/Text Mô tả CLB

5 danhSach table Bảng danh sách thành viên

6 iconPromote Button Thăng chức vụ cho thành viên

7 iconDelete Icon Xóa thành viên

8 Chọn thành viên để thêm CheckBox Chọn thành viên cần thêm

9 Thêm Button Thêm thành viên

Bảng 70 Đối tượng trên Màn hình chỉnh sửa CLB

1 Chọn icon Search Tìm kiếm thông tin tên thành viên text box

3 Chọn iconPromote Chuyển chức vụ

4 Chọn iconDelete Xóa thành viên khỏi CLB

5 Chọn checkbok Thêm thành viên

Bảng 71 Biến cố và xử lý tương ứng Màn hình chỉnh sửa CLB

7.2.10 Tab quản lý tài khoản

1 tbTimkiem Input/Text Nhập mã sản phẩm hoặc tên tài khoản

3 Nhập file Button Nhập file

4 Xuất file Button Xuất file excel

5 Thêm tài khoản Button Hiển thị màn mình thêm tài khoản

6 Danh sách tài khoản Table Hiển thị danh sách thông tin tài khoản

Hình 37 Giao diện tab quản lý tài khoản

7 IconBlock Button Chặn tài khoản

Bảng 72 Đối tượng trên Tab quản lý tài khoản

1 Chọn icon Search Tìm kiếm thông tin tên thành viên text box

3 Chọn iconBlock Chặn tài khoản

4 Chọn button Thêm tài khoản

Hiển thị màn hình thêm tài khoản

5 Chọn button Xuất/nhập file Xuât/nhập file

Bảng 73 Biến cố và xử lý tương ứng của tab quản lý tài khoản

7.2.11 Tab thông tin cá nhân

Hình 38 Giao diện tab thông tin cá nhân

Hình 40 Giao diện tab thông tin cá nhân

1 Thông tin Label Hiển thị thông tin

2 Thông tin cần sửa Input/Text Nhập tên sản phẩm

3 Giới tính Select Input Chọn loại

4 Lưu Button Lưu thông tin

6 Chỉnh sửa Button Hiển thị màn hình chỉnh sửa

Bảng 74 Đối tượng của Thông tin cá nhân

1 Chọn button Lưu Lưu thông tin

2 Chọn button Chỉnh sửa Các thông tin hiển thị dưới dạng TextInput

3 Button Hủy Đóng form chỉnh sửa

4 TextInput Nhập thông tin cần sửa vào

5 ButtonImage Chọn ảnh từ thư viện lên

Bảng 75 Biến cố và xử lý tương ứng của Thông tin cá nhân

7.2.12 Tab hoạt động trong club

1 tbTimkiem Input/Text Nhập tên hoạt động cần tìm

3 Card Hoạt động button Chọn hoạt động

4 Thêm hoạt động button Thêm hoạt động

Bảng 76 Đối tượng của Tab hoạt động Hình 40 Giao diện Tab hoạt động trong câu lạc bộ

1 Chọn icon Search Tìm kiếm thông tin tên hoạt động trong text box

3 Chọn button Card Activity Chuyển tới giao diện chi tiết hoạt động

4 Chọn button Thêm (trong bảng danh sách)

Hiển thị giao diện thêm hoạt động

Bảng 77 Biến cố và xử lý tương ứng của Tab hoạt động

1 Tên hoạt động Text/input Nhập tin hoạt động

Hình 41 Giao diện Thêm hoạt động

2 Ngày bắt đầu DatePicker Chọn thời gian bắt đầu

3 Ngày kết thúc DatePicker Chọn thời gian kết thúc

4 Lưu Button Lưu thông tin

5 Hủy Button Đóng form thêm

Bảng 78 Đối tượng của Thêm hoạt động

1 Chọn text/input Nhập thông tin cần lưu

2 Chọn Lưu Lưu thông tin

3 Chọn Hủy Đóng giao diện thêm hoạt động

Bảng 79 Biến cố và xử lý tương ứng của Thêm 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

1 Chọn thêm thẻ Nhập thông tin vào input vừa hiện ra

2 Chọn Lưu Thêm thẻ công việc vào bảng

3 Chọn 1 thẻ bất kì Hiển thị giao diện chi tiết thẻ

4 Chọn button Tham gia Nhận task công việc

5 Chọn button Thành viên Thêm thành viên vào task

6 Text thêm mô tả Nhập thông tin cần mô tả

Bảng 80 Biến cố và xử lý tương ứng của Giao diện chi tiết hoạt động

Hình 44 Giao diện Tab thành viên

3 Danh sách thành viên Table Hiển thị thông tin thành viên

4 Thêm thành viên Button Hiển thị giao diện thêm thành viên

5 Đuổi thành viên Button Xóa thành viên khỏi câu lạc bộ

Bảng 81 Đối tượng của Tab thành viên

1 Chọn icon Search Tìm kiếm thông tin thành viên trong text box

3 Chọn button thêm thành viên

Hiển thị giao diện thêm thành viên

4 Tick vào 1 thành viên ở bảng, chọn button đuổi thành viên

Xóa thành viên khỏi câu lạc bộ

Bảng 82 Biến cố và xử lý tương ứng của Tab thành viên

3 Buttn Thêm nhóm Button Hiển thị giao diện thêm nhóm

4 Danh sách các nhóm Table Hiển thị thông tin các nhóm

5 Icon chỉnh sửa Button Hiển thị giao diện chỉnh sửa

6 Icon thùng rác Button Xóa nhóm

Bảng 83 Đối tượng của tab nhóm

Hình 45 Giao diện Tab nhóm

1 Chọn icon Search Tìm kiếm thông tin nhóm trong text box

3 Button thêm Hiển thị giao diện thêm nhóm

4 Button chỉnh sửa Hiển thị giao diện chỉnh sửa

Bảng 84 Biến cố và xử lý tương ứng của tab nhóm

7.2.17 Thêm thành viên và thêm nhóm

Hình 47 Giao diện Thêm thành viên

Hình 48 Giao diện Thêm nhóm mới

3 Danh sách thành viên Table Hiển thị thông tin thành viên

4 Lưu Button Lưu thông tin đã thêm

Bảng 85 Đối tượng của Tab thêm thành viên/nhóm

1 Chọn icon Search Tìm kiếm thông tin nhóm trong text box

3 Tick 1 hoặc nhiều thành viên cần thêm, chọn thêm

Bảng 86 Biến cố và xử lý tương ứng của thêm thành viên, thêm nhóm

1 Nhập tin nhắn Input Nhập tin nhắn cần nhắn

2 Send Button Gửi tin nhắn

3 Icon tệp Button Chọn tệp

Bảng 87 Đối tượng của tab nhắn tin nhóm

1 Chọn textinput Nhập tin nhắn cần nhắn

2 Chọn send Gửi tin nhắn

Hình 48 Giao diện Tab tin nhắn nhóm

Bảng 88 Biến cố và xử lý tương ứng của tab nhắn tin nhóm

1 tbTimkiem Input/Text Nhập tên phiếu cần tìm

3 Danh sách phiếu Table Hiển thị thông tin phiếu thu/chi

4 Thêm phiếu Button Thêm phiếu

Bảng 89 Đối tượng của Tab quỹ

1 Chọn icon Search Tìm kiếm thông tin phiếu trong text box

Hình 49 Giao diện Tab quỹ câu lạc bộ

3 Chọn thêm phiếu Hiển thị giao diện thêm phiếu

Bảng 90 Biến cố và xử lý tương ứng của Tab quỹ

1 Thu Buton Loại phiếu thu

2 Chi Button Loại phiếu chi

3 Số tiền thu/chi Text/input Nhập thông tin

4 Nội dung phiếu Text/input Nhập thông tin

5 Icon upload Button Chọn tệp tải lên

6 Lưu/Hủy Button Lưu/ đóng form

Bảng 91 Đối tượng của thêm phiếu

Hình 50 Giao diện Thêm phiếu thu/chi

1 Chọn button chi/Thu Xác nhận loại phiếu

2 Chọn text/input Nhập thông tin

3 Chọn button upload Tải tệp lên

4 Chọn button Lưu Lưu thông tin

Bảng 92 Biến cố và xử lý tương ứng của thêm phiếu

Component diagram

Deploy diagram

Tổng kết

Tiêu đề	Ứng Dụng Quản Lý Câu Lạc Bộ Trong Trường Học
Tác giả	Phạm Xuân Bách, Nguyễn Tiến Đạt
Người hướng dẫn	ThS. Mai Trọng Khang
Trường học	Đại học Quốc gia Thành phố Hồ Chí Minh
Chuyên ngành	Công nghệ thông tin
Thể loại	báo cáo đồ án
Năm xuất bản	2022
Thành phố	Thành phố Hồ Chí Minh

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