Xây dựng website quản lý đoàn viên và công tác đoàn trường đh sư phạm kỹ thuật tp hcm

Mục tiêu của đề tài Nhóm mong muốn xây dựng một website để hỗ trợ đoàn trường trong việc quản lý đoàn viên và cơng tác đồn, đờng thời giúp đồn viên có thể theo dõi thông tin cá nhân và

CƠ SỞ LÝ THUYẾT

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

2.1.1 Phương pháp thu thập thông tin

Phương pháp thu thập thông tin bao gồm việc nghiên cứu lý thuyết về các công nghệ sẽ được áp dụng trong đề tài, đồng thời thu thập thông tin về các yêu cầu và tiêu chuẩn của phong trào Để thực hiện điều này, cần tìm hiểu tài liệu từ các website và nguồn tài liệu liên quan đến công nghệ ứng dụng.

2.1.2 Phương pháp xử lý thông tin

Phương pháp xử lý thông tin bao gồm việc phân tích lý thuyết đã tìm hiểu để xác định các chức năng và mục tiêu cần thiết dựa trên yêu cầu của phong trào Đồng thời, thực hành sẽ được thực hiện dựa trên lý thuyết về các công nghệ đã được nghiên cứu.

Phát triển mô hình: Phát triển dự án theo mô hình phát triển phần mềm từ đặc tả, thiết kế đến hoàn thành sản phẩm.

Cơ sở lý thuyết

Stack là sự kết hợp của các công nghệ cần thiết để xây dựng một ứng dụng hoàn chỉnh, bao gồm ngôn ngữ lập trình, khuôn khổ, cơ sở dữ liệu, cũng như các công cụ front-end và back-end Tất cả các thành phần này được kết nối thông qua API, tạo nên một hệ sinh thái đồng bộ cho phát triển ứng dụng.

MERN stands for MongoDB, Express, React, and Node, enabling users to effortlessly build a three-tier architecture entirely using JavaScript and JSON This stack includes the front-end display layer (React), the application layer (Express and Node), and the database layer (MongoDB).

- MongoDB: là một cơ sở dữ liệu NoSQL, sử dụng các tài liệu giống JSON với các lược đồ tùy chọn

- Node.js: là một trình chạy Javascript được xây dựng trên công cụ Javascript V8 của Chrome

- Express.js: là một khung ứng dụng web phụ trợ cho Node.js Nó được thiết kế để xây dựng các ứng dụng web và API

React là một thư viện JavaScript mã nguồn mở chuyên dùng để phát triển giao diện người dùng hoặc các thành phần UI Thư viện này có khả năng hỗ trợ việc xây dựng cả ứng dụng web và ứng dụng di động.

2.2.1.3 Ưu điểm của việc sử dụng MERN Stack

Hệ thống MERN Stack tích hợp front-end, back-end và cơ sở dữ liệu thông qua API REST, cho phép tái sử dụng trong nhiều ứng dụng như di động và web một cách đơn giản Các API REST dựa trên giao thức HTTP, giúp việc kết nối giữa các lớp trong MERN Stack trở nên dễ dàng và thuận lợi.

MERN Stack sử dụng Node.js, một ngôn ngữ không đồng bộ, mang lại hiệu suất ấn tượng so với các ngôn ngữ khác Điều này giúp backend hoạt động nhanh chóng, cho phép người dùng ứng dụng web truy cập dữ liệu của họ một cách nhanh hơn nhiều.

MERN Stack, được xây dựng trên nền tảng React.js, mang lại trải nghiệm người dùng tốt hơn thông qua việc phát triển Single Web Application Single Web Application giúp cải thiện tốc độ tải trang bằng cách tìm nạp trước nội dung từ máy chủ, giảm thiểu thời gian chờ đợi Điều này giúp người dùng cảm thấy thoải mái và dễ dàng hơn khi sử dụng các ứng dụng mạng xã hội.

2.2.2 Công cụ tìm kiếm Elasticsearch

Elasticsearch là một công cụ tìm kiếm mạnh mẽ được xây dựng trên nền tảng Apache Lucene, cung cấp khả năng tìm kiếm phân tán với giao diện web HTTP hỗ trợ dữ liệu JSON.

2.2.2.2 Tại sao nên sử dụng Elasticsearch?

Khi sử dụng truy vấn LIKE “%one%”, kết quả tìm kiếm sẽ hiển thị các từ có chứa khóa “one”, bao gồm cả những kết quả không mong muốn như “phone”, “zone”, “money” và “alone”.

Khi tìm kiếm bằng Elasticsearch, nếu chúng ta nhập từ "one", chỉ có kết quả "one" được trả về Việc sử dụng truy vấn với từ khóa LIKE sẽ không áp dụng cho các từ có dấu Ví dụ, khi tìm kiếm từ khóa "có", nếu chỉ sử dụng truy vấn LIKE mà không có dấu, kết quả sẽ không chính xác.

Elasticsearch vượt trội hơn về hiệu năng so với các phương pháp truy vấn truyền thống, đặc biệt là khi sử dụng truy vấn LIKE Việc sử dụng LIKE chỉ cho phép tìm kiếm toàn văn bản mà không tận dụng được index, dẫn đến thời gian tìm kiếm lâu hơn khi tập dữ liệu lớn Ngược lại, Elasticsearch tối ưu hóa quá trình tìm kiếm bằng cách "đánh index" cho các trường hợp được chọn, giúp cải thiện tốc độ và hiệu quả tìm kiếm.

Elasticsearch cho phép tìm kiếm trên nhiều trường dữ liệu khác nhau trong cùng một lần, giúp người dùng nhanh chóng tìm kiếm thông tin phù hợp Do đó, nhóm đã tích hợp công cụ tìm kiếm này để hỗ trợ việc tìm kiếm các hoạt động được đăng tải trên website, giúp đoàn viên dễ dàng tìm kiếm các hoạt động phù hợp một cách nhanh chóng.

2.2.3 Dịch vụ AWS Simple Cloud Storage (S3)

Amazon Simple Storage Service (AWS S3) là dịch vụ lưu trữ đối tượng hàng đầu, cung cấp khả năng mở rộng, độ sẵn sàng cao, bảo mật và hiệu suất vượt trội Dịch vụ này phù hợp cho mọi khách hàng, từ các doanh nghiệp nhỏ đến lớn, cho phép lưu trữ và bảo vệ dữ liệu với kích thước đa dạng cho nhiều trường hợp sử dụng, bao gồm hồ dữ liệu, ứng dụng đám mây và ứng dụng di động Với các lớp lưu trữ tiết kiệm chi phí và tính năng quản lý dễ dàng, người dùng có thể tối ưu hóa chi phí, tổ chức dữ liệu và thiết lập các biện pháp kiểm soát quyền truy cập phù hợp với yêu cầu kinh doanh và tuân thủ.

- Quản lý và giám sát lưu trữ

- Phân tích và thông tin chi tiết về lưu trữ: Amazon S3 Storage Lens, Amazon S3 Storage Class Analysis:

- Quản lý truy cập và bảo mật.

KHẢO SÁT SẢN PHẨM LIÊN QUAN

Trang quản lý Nghiệp vụ Công tác đoàn TNCS Hồ Chí Minh

- Trang thống kê dữ liệu

✓ Thống kê các tổ chức trực thuộc

✓ Thống kê số liệu đoàn viên các tổ chức trực thuộc

✓ Thống kê cán bộ đoàn tổ chức trực thuộc

 Chưa thống kê các thông tin về Đoàn phí đoàn viên

 Trang thống kê chưa đa dạng về biểu đồ (Chỉ sử dụng biểu đồ cột)

- Xem danh sách đoàn viên

✓ Hiển thị đầy đủ thông tin đoàn viên

✓ Lọc đoàn viên theo tên, chức vụ, giới tính và nguồn dữ liệu

✓ Hiển thị thông tin chi tiết khi nhấn vào tên đoàn viên

✓ Nhập/Xuất đoàn viên bằng Excel

 Không cung cấp mẫu khi nhập mới đoàn viên bằng Excel

 Cho chọn nhiều đoàn viên nhưng không thực hiện được thao tác gì

 Tìm kiếm thông tin theo tên không chính xác

 Không có chức năng sắp xếp

✓ Gợi ý thông tin sinh viên khi tìm kiếm

✓ Xem được thông tin chi tiết từng đoàn viên

 Nhiều đoàn viên có trong danh sách nhưng không thể tìm và xem thông tin được

 Nhiều không tin không cần thiết cho đoàn viên là sinh viên nhưng vẫn bắt buộc nhập

- Theo dõi thu đoàn phí

✓ Phân chi khoản phí đã thu và phí đã chi

✓ Có phần thêm, xóa, sử các khoản phí

 Thu chi được nhập bằng tay, không xác thực dữ liệu, không thể hiện các khoản phí cần đóng

 Không phân trang các khoản phí

- Đánh giá xếp loại đoàn viên

✓ Nhập đánh giá xếp loại đoàn viên từ các đơn vị gửi về

 Chưa cho đánh giá xếp loại đoàn viên trên website

 Không thể hiện phần duyệt xếp loại đoàn viên

- Số liệu Tổ chức – Đoàn viên

✓ Thống kê số lượng tổ chức, đoàn viên theo từ đơn vị

✓ Có chức năng tìm kiếm và xuất file Excel

 Không tải sẵn danh sách các đơn vị để lựa chọn

- Thống kê thông tin các cấp

✓ Thực hiện thống kê với nhiều loại số liệu

✓ Có chức năng lọc cho từng loại số liệu

 Chức năng lọc chỉ dừng lại ở Năm và Quý

✓ Cho phép thêm các văn bản chỉ đạo nhưng các thông tin cần nhập không đầy đủ như thông tin hiển trị trên bảng

✓ Có chức năng tìm kiếm văn bản

 Thêm file văn bản bị từ chối nhưng không hiển thị lý do từ chối

 Chỉ được thêm một file văn bản khi thêm

✓ Hiển thị đầy đủ thông tin cuộc họp bao gồm thời gian, địa điểm, nội dung và văn bản liên quan cuộc họp

✓ Mời các thành viên khác tham gia cuộc họp

 Chưa thông báo qua email các thành viên được mời họp

- Quản lý tổ chức, tài khoản

✓ Đầy đủ chức năng thêm, xóa, sửa các tổ chức và các chi đoàn của từng tổ chức

✓ Hỗ trợ việc nhập, xuất thông qua Excel

✓ Có dữ liệu mẫu khi nhập dữ liệu bằng Excel

✓ Quản lý tài khoản cho từng tổ chức

 Thông tin tài khoản tổ chức khá đơn giản, không có email để nhận các thông báo, phản hồi từ website

 Trang chưa có chức năng lọc gây khó khăn trong quá trình tìm kiếm thông tin quản lý

 Trang tải chậm, các thông tin cần nhiều thời gian để hiển thị

 Một số trường nhập dữ liệu bị giật, mất nhiều thời gian phản hồi

3.1.2 Đánh giá và ứng dụng

Website chuyên cung cấp giải pháp quản lý hồ sơ và thông tin nghiệp vụ, có khả năng ứng dụng hiệu quả trong việc quản lý sinh viên và các hoạt động đoàn vụ, giúp chắt lọc và tổ chức thông tin cần thiết một cách khoa học.

- Tính năng mời hợp có thể ứng dụng trong đề tài

- Tính năng thống kê chưa được trực quan cần rút kinh nghiệm

- Không có phần quản lý các hoạt động, chương trình

- Website dành cho các tổ chức đoàn nhằm phục vụ công tác quản lý, đoàn viên không thể tương tác.

Trang Govirlunteer ĐH Kinh tế TP.HCM

https://govirlunteer.ueh.edu.vn/

✓ Các thông tin được chia khu vực rõ ràng, tập trung, sắp xếp theo thứ tự hợp lý

✓ Lượng thông tin vừa đủ, có các thông tin được tổng hợp từ cơ sở dữ liệu

✓ Thiết kế đẹp mắt, có hiệu ứng sinh động, phản hồi tốt

 Một số hình ảnh không tải được gây mất ảnh

- Go Virlunteer – Tìm kiếm các hoạt động tình nguyện

✓ Giao diện thân thiện, dễ sử dụng

✓ Thông tin hoạt động được hiển thị đầy đủ, cho phép đăng ký tham gia hoạt động

✓ Có chức năng tìm kiếm bằng từ khóa

✓ Có phần lọc theo các loại hoạt động theo các thông tin đã định nghĩa trước

 Chức năng tìm kiếm chưa nâng cao Khi nhập đúng cụm từ có trong tên hoạt động mới có thể tìm kiếm ra

 Hình ảnh poster của hoạt động chưa được hiển thị theo tỉ lệ gây mất thông tin

✓ Hiển thị các đơn vị tổ chức hoạt động cùng với số hoạt động đã tạo

✓ Tìm kiếm và lọc đơn vị tổ chức

 Một số đơn vị tổ chức bị lỗi khi xem thông tin chi tiết

 Chưa thể hiện một số hoạt động nổi bậc mà tổ chức đã triển khai

✓ Cung cấp các thông tin tham gia hoạt động của tình nguyện viên

✓ Cho phép đánh giá khả năng hoạt động của từ cá nhân

✓ Tìm kiếm và lọc sinh viên theo các trường thông tin

✓ Có chức năng xóa lọc

 Hình ảnh tình nguyện viên được hiển thị mặc định

✓ Tuyên dương các tình nguyện viên tham gia nhiều hoạt động

✓ Có bảng xếp hạng tổ chức theo từng đơn vị

 Thông tin xếp hạng trùng lặp có thể cưa được tính toán

 Hình ảnh thông tin tình nguyện viên không tải được làm hiển thị ảnh lỗi

✓ Trang tải nhanh, không mất nhiều thời gian phản hồi khi chuyển trang

✓ Có các “Lối tắt” giúp tìm kiếm các hoạt động nhanh hơn

Trang GoVirlunteer được thiết kế với giao diện thân thiện, dễ sử dụng, phù hợp cho đoàn viên và sinh viên Nền tảng này cung cấp nhiều hoạt động để sinh viên có thể đăng ký tham gia, giúp họ áp dụng kiến thức vào thực tiễn.

- Có thể ứng dụng vào chức năng đăng ký tham gia các hoạt động cho sinh viên

- Hoạt động được gắn tag phân loại, hỗ trợ cho sinh viên trong xét hồ sơ sinh viên 5 tốt.

Trang Youth HCMUTE

https://youth.hcmute.edu.vn/

✓ Các thông tin được chia khu vực rõ ràng, tập trung, sắp xếp theo thứ tự hợp lý

✓ Hiển thị các thông tin về các hoạt động theo danh mục hoạt động sắp bắt đầu, đã bắt đầu

✓ Có chức năng tìm kiếm hoạt động theo từ khóa

 Không hiển thị các thông tin chung giới thiệu về website

 Chức năng tìm kiếm chưa nâng cao Khi nhập đúng cụm từ có trong tên hoạt động mới có thể tìm kiếm ra

✓ Thống kê theo cấp tổ chức hoạt động

✓ Thống kê theo trạng thái hoạt động

 Không thống kê theo từng đơn vị cụ thể

 Chức năng thống kê chỉ hiển thị các số liệu, chưa thể hiện qua biểu đồ để người xem có cái nhìn trực quan

- Quản lý học phần “Lãnh đạo và Kinh doanh trong kỹ thuật”

✓ Hiển thị thông tin các hoạt động đã diễn ra

✓ Xuất các hoạt động sang file Word

✓ Các hoạt động được hiển thị theo nhóm với các tag tương ứng

 Chỉ thể hiện tên hoạt động, không thể hiện các trường dữ liệu khác

 Không thể lọc hoạt động theo ngày và sắp xếp các hoạt động

 Hoạt động không thể hiện loại điểm và số điểm cộng cho sinh viên

✓ Thêm mới, đóng góp các ý tưởng mới về các lĩnh vực

✓ Ý tưởng được phê duyệt trực tiếp trên website

 Tổng số ý tưởng không được cập nhật thường xuyên

 Không cho phép cập nhật ý tưởng

✓ Không mất nhiều thời gian phản hồi khi chuyển trang

Website của Trường Đại học Sư phạm Kỹ thuật TP HCM cung cấp danh sách các hoạt động cùng với thông tin tổng quan như thời gian và địa điểm diễn ra.

Khóa luận có thể nâng cao tính năng bằng cách cung cấp thông tin chi tiết về các hoạt động, cho phép sinh viên đăng ký tham gia và giúp đơn vị tổ chức điểm danh người tham gia Sau khi kết thúc một số hoạt động, ban tổ chức có thể cấp chứng nhận điện tử cho sinh viên, chứng nhận này sẽ hỗ trợ sinh viên trong việc xét các danh hiệu như đoàn viên ưu tú, thanh niên tiên tiến làm theo lời Bác, và sinh viên 5 tốt.

Trang web này cung cấp cái nhìn tổng quan về số liệu thống kê liên quan đến sinh viên, các hoạt động và ý tưởng sáng tạo Giao diện trực quan giúp người dùng dễ dàng nắm bắt và áp dụng các số liệu nổi bật.

PHÂN TÍCH VÀ MÔ HÌNH HÓA YÊU CẦU

Phân tích yêu cầu chức năng

Tất cả người dùng phải đăng nhập vào website để sử dụng với quyền hạn tương ứng

Bảng 4.1 Mô tả yêu cầu chức năng đăng nhập

1 Đăng nhập với email và mật khẩu

Người quản lý website đăng nhập vào website với email và mật khẩu đã đăng ký trước đó

Người dùng là quản lý khi quên mật khẩu có thể cung cấp lại địa chỉ email để được cấp lại mật khẩu qua email này

3 Đăng nhập với google Người dùng đăng nhập vào website với tài khoản email sinh viên

4.1.2 Chức năng xem trang thống kê

Các tài khoản quản lý có quyền xem thống kê về các thông tin chung website quản lý

Bảng 4.2 Mô tả yêu cầu chức năng xem trang thống kê

Thống kê các số liệu liên quan đến đoàn viên bao gồm:

- Tổng số đoàn viên viên, thanh niên

- Số đoàn viên chưa nộp và đã nộp sổ đoàn

- Đếm số lượng sinh viên theo khóa

Thống kê các số liệu liên quan đến đoàn phí bao gồm:

- Số sinh viên hoàn thành đoàn phí và chưa hoàn thành đoàn phí

- Đếm số lượng đoàn phí theo khóa

- Tính tổng số tiền đoàn phí theo mỗi đơn vị

Thống kê các số liệu liên quan đến hoạt động bao gồm:

- Số lượng đoàn viên đăng ký và điểm danh tham gia các hoạt động

- Số lượng hoạt động theo từng đơn vị

- Số điểm CTXH và ĐRL đã cộng được

Thống kê các số liệu liên quan đến chi đoàn bao gồm:

- Đếm tổng số lượng chi đoàn

- Số lượng chi đoàn theo từng đơn vị

4.1.3 Chức năng tra cứu, in barcode, thu đoàn phí Đoàn trường và cộng tác viên đoàn trường có thể tra cứu thông tin các đoàn viên tại trường Tiến hành in barcode và thu đoàn phí cho đoàn viên

Bảng 4.3 Mô tả yêu cầu chức năng tra cứu, in barcode, thu đoàn phí

1 Tra cứu thông tin đoàn viên

Nhập mã số sinh viên để tra cứu thông tin đoàn viên, bao gồm thông tin chung, thông tin liên hệ và thông tin đoàn viên nếu sinh viên đó là đoàn viên Kết quả cũng sẽ hiển thị phần barcode và thông tin hóa đơn.

2 Cập nhật thông tin đoàn viên

Thay đổi thông tin đoàn viên và tiến hành cập nhật

3 In barcode In mã barcode chứ thông tin đoàn viên như: Họ tên, chi đoàn, đơn vị để dán vào sổ đoàn viên khi sinh viên nộp sổ

4 Xuất hóa đơn thu đoàn phí

Xác định các khoản phí đoàn viên cần đóng và tiến hành xuất hóa đơn Chức năng này bao gồm chức năng thu sổ đoàn cho đoàn viên

5 In hóa đơn và thanh toán Mở trang in hóa đơn và thực gọi API thanh toán hóa đơn

4.1.4 Chức năng quản lý hóa đơn Đoàn trường và cộng tác viên đoàn trường có thể quản lý các hóa đơn đoàn phí đã thu Xem thống kê số liệu thu đoàn phí một cách trực quan

Bảng 4.4 Mô tả yêu cầu chức năng quản lý hóa đơn

Để quản lý hiệu quả, cần tính toán các số liệu quan trọng như tổng tiền đã thu, số tiền thu theo từng loại phí và số lượng sổ đoàn đã nộp Các số liệu này được xác định dựa trên bộ lọc và chức năng tìm kiếm, giúp nâng cao độ chính xác và tiện lợi trong việc theo dõi.

2 Xem danh sách hóa đơn

Xem hóa đơn thu đoàn phí theo từ đoàn viên và được sắp xếp mặc định theo ngày thanh toàn

Khi xem danh sách hóa đơn người dùng có thể xuất danh sách hóa đơn sang file Excel với thông tin chi tiết để tiến hành đối chiếu

Khi xem hóa hơn người dùng có thể tìm kiếm hóa đơn theo mã số sinh viên, lọc hóa đơn theo các thông tin chính

4.1.5 Chức năng quản lý hoạt động Đoàn trường có thể quản lý tất cả các thông tin của hoạt động tại trường Đây là các hoạt động cho sinh viên đăng ký và tham gia

Bảng 4.5 Mô tả yêu cầu chức năng quản lý hoạt động

1 Xem danh sách hoạt động Xem danh sách tất cả hoạt động trong website

Người dùng có thể xuất danh sách hoạt động sang file Excel với thông tin chi tiết

Người dùng có thể tìm kiếm hoạt động theo tên, lọc hoạt động theo đơn vị là loại điểm

4 Thêm mới hoạt động Thêm mới một hoạt động vào website với các thông tin trên giao diện

5 Cập nhật hoạt động Thay đổi thông tin hoạt động sau đó tiến hành cập nhật

Các hoạt động khi mới tạo cần sự phê duyệt thì mới được hiển thị cho sinh viên

7 Ẩn, hiện hoạt động Ẩn, hiện hoạt động khi hiển thị cho đoàn viên và sinh viên

8 Xóa hoạt động Xóa hoạt động ra khỏi danh sách

4.1.6 Chức năng quản lý chi đoàn Đoàn trường và cộng tác viên đoàn trường có thể quản lý tất cả các chi đoàn của website

Bảng 4.6 Mô tả yêu cầu chức năng quản lý chi đoàn

1 Xem danh sách chi đoàn Xem danh sách tất cả chi đoàn trong website

Người dùng có thể xuất danh sách chi đoàn sang file Excel với thông tin chi tiết

Người dùng có thể tìm kiếm chi đoàn theo tên, lọc chi đoàn theo từng đơn vị cụ thể

4 Thêm mới chi đoàn Thêm mới một đơn vị vào website với các thông tin trên giao diện

5 Cập nhật chi đoàn Thay đổi thông tin chi đoàn sau đó tiến hành cập nhật

6 Xóa chi đoàn Xóa chi đoàn ra khỏi danh sách

7 Ẩn, hiện chi đoàn Ẩn, hiện chi đoàn khỏi danh sách chi đoàn khi hiển thị trong quá trình tìm kiếm và tự động điền thông tin chi đoàn

4.1.7 Chức năng quản lý tài khoản quản lý Đoàn trường trường có thể quản lý các tài khoản quản lý, với mỗi tài khoản sẽ được cung cấp một vai trò khác nhau

Bảng 4.7 Mô tả yêu cầu chức năng quản lý tài khoản quản lý

1 Xem trang thống kê Tính tổng số lượng tài khoản quản lý theo từ vai trò

2 Xem danh sách tài khoản quản lý

Xem danh sách tất cả tài khoản quản lý trong website Các tài khoản được hiển thị theo từ vai trò cụ thể

Người dùng có thể xuất danh sách tài khoản quản lý sang file Excel với thông tin chi tiết

Người dùng có thể tìm kiếm tài khoản quản lý theo địa chỉ email, lọc tài khoản theo đơn vị và trạng thái

5 Thêm mới tài khoản quản lý

Thêm mới một tài khoản quản lý vào website với các thông tin trên giao diện

6 Cập nhật tài khoản quản lý Thay đổi thông tin tài khoản quản lý sau đó tiến hành cập nhật

7 Xóa tài khoản quản lý Xóa tài khoản quản lý ra khỏi danh sách

Tạm khóa tài khoản người quản lý Khi tài khoản bị khóa người dùng không thể đăng nhập vào website

Nhập mật khẩu để cấp cho tài khoản hiện có Thông tin đăng nhập mới sẽ được gửi thông qua email

4.1.8 Chức năng quản lý thông tin đoàn viên Đoàn trường có thể quản lý tất cả các thông tin của đoàn viên tại trường Các thông tin này cũng là thông tin giúp đoàn viên đăng nhập vào website

Bảng 4.8 Mô tả yêu cầu chức năng quản lý thông tin đoàn viên

Số lượng sinh viên theo đơn vị được hiển thị dưới dạng biểu đồ cột Các số liệu về tài khoản đoàn viên và sinh viên

2 Xem danh sách đoàn viên Xem danh sách tất cả đoàn viên trong website

Người dùng có thể xuất danh sách đoàn viên sang file Excel với thông tin chi tiết

Người dùng có thể tìm kiếm đoàn viên theo mã số sinh viên, lọc đoàn viên theo đơn vị và chi đoàn

5 Thêm mới đoàn viên Thêm mới một đoàn viên vào website với các thông tin trên giao diện

6 Cập nhật đoàn viên Thay đổi thông tin đoàn viên sau đó tiến hành cập nhật

7 Xóa đoàn viên Xóa tài khoản quản lý ra khỏi danh sách

Tạm khóa tài khoản đoàn viên Khi tài khoản bị khóa người dùng không thể đăng nhập vào website

4.1.9 Chức năng hoạt động của đoàn viên Đoàn viên có thể tìm kiếm các hoạt động phù hợp với cá nhân để đăng ký và tham gia hoạt động

Bảng 4.9 Mô tả yêu cầu chức năng hoạt động của đoàn viên

1 Tìm kiếm hoạt động theo bộ lọc

Tra cứu các hoạt động để theo dõi những sự kiện đã diễn ra, đang diễn ra và tất cả các hoạt động khác Khi tìm thấy hoạt động của sinh viên, hãy nhấn vào đó để xem thông tin chi tiết.

2 Tìm kiếm toàn bộ hoạt động

Tìm kiếm hoạt động dựa trên từ khóa mà đoàn viên nhập Các từ khóa trùng với tên và mô tả của hoạt động sẽ được tô đậm

3 Xem các hoạt động đã tham gia

Xem lại lịch sử các hoạt động mà đoàn viên đã tham gia

4 Bình luận hoạt động Để lại bình luận nội dung về hoạt động

Thêm sự kiện vào Apple calendar, Google, Outlook, Outlook Web App Yahoo

4.1.10 Chức năng đăng ký hoạt động Đối với mỗi hoạt động đoàn viên có thể đăng ký và hủy đăng ký tham gia các hoạt động theo nhu cầu cá nhân

Bảng 4.10 Mô tả yêu cầu chức năng đăng ký hoạt động

1 Đăng ký tham gia Đoàn viên đăng ký tham gia hoạt động Việc đăng ký sẽ giúp đoàn viên được ưu tiên khi tham gia hoạt động Một số hoạt động nếu sinh viên không đăng ký trước sẽ không được tham gia

2 Hủy đăng ký Khi đoàn viên không đảm bảo thời gian hoặc thấy hoạt động không còn phù hợp có thể tiến hành hủy đăng ký tham gia hoạt động

4.1.11 Chức năng điểm danh hoạt động

Trước khi bắt đầu hoạt động đoàn trường trường sẽ điểm danh các đoàn viên tham gia hoạt động

Bảng 4.11 Mô tả yêu cầu chức năng điểm danh hoạt động

1 Xem danh sách điểm danh

Danh sách bao gồm các đoàn viên đã đăng ký và điểm danh tham gia các hoạt động

2 Điểm danh vào và ra

Trước khi hoạt động điểm danh và sau khi kết thực đoàn viên phải điểm danh để chứng minh tham gia hoạt động trong suốt thời gian diễn ra

4.1.12 Chức năng cung cấp thông tin

Website là nguồn thông tin quan trọng về đoàn viên và các hoạt động mà họ tham gia, đặc biệt cho trang web “Sinh viên 5 tốt” Dữ liệu này được truyền tải qua API, đảm bảo thông tin luôn được cập nhật và chính xác.

Bảng 4.12 Mô tả yêu cầu chức năng cung cấp thông tin

Cung cấp thông tin đoàn viên theo mã số sinh viên của đoàn viên tại trường

2 Thông tin hoạt động đã tham gia

Cung cấp các hoạt động mà đoàn viên đã tham gia và đã điểm danh đúng quy định.

Phân tích yêu cầu phi chức năng

4.2.1 Yêu cầu về bảo mật

- Website cần đảm bảo quá trình xác thực, phân quyền người dùng được diễn ra đúng đắn

- Đảm bảo đoàn viên đăng nhập với email hợp lệ

4.2.2 Yêu cầu về chất lượng

Website cần đảm bảo an toàn thông tin để nâng cao hiệu quả quản lý cho đoàn trường và đoàn viên, đồng thời hỗ trợ công tác đoàn một cách hiệu quả.

- Đảm bảo giao diện đơn giản, dễ nhìn, dễ thao tác và sử dụng.

Mô hình hóa yêu cầu

Hình 4.1 Use case tổng quát của hệ thống - 1

Hình 4.2 Use case tổng quát của hệ thống - 2

4.3.2.1 Mô tả use case đăng nhập

Bảng 4.13 Mô tả use case đăng nhập

Mô tả Cho phép người dùng đăng nhập vào website

Tác nhân kích hoạt Khách Điều kiện tiên quyết Truy cập vào trang chủ của website

Các bước thực hiện 1 Truy cập vào trang chủ và chọn “Đăng nhập”

2 Đăng nhập với vai trò Đoàn viên

2.1 Chọn đăng nhập với Google 2.2 Chọn tài khoản Sinh viên để đăng nhập

3 Đăng nhập với vai trò Quản trị viên 3.1 Nhập email và mật khẩu 3.2 Nhấn đăng nhập

Kết quả Điều hướng người dùng vào website với vai trò tương ứng

4.3.2.2 Mô tả use case quên mật khẩu

Bảng 4.14 Mô tả use case quên mật khẩu

Mô tả Cho phép người dùng lấy lại mật khẩu mới dựa trên email

Tác nhân kích hoạt Khách Điều kiện tiên quyết Truy cập vào trang chủ của website

Các bước thực hiện 1 Truy cập vào trang chủ và chọn “Đăng nhập”

3 Nhập địa chỉ email của người dùng

4 Chọn “Cấp lại mật khẩu”

Kết quả Người dùng sẽ được gửi lại thông tin đăng nhập thông qua email

4.3.2.3 Mô tả use case xem trang thống kê

Bảng 4.15 Mô tả use case xem trang thống kê

Mô tả Cho phép người dùng xem thống kê số liệu được lưu trữ

Để kích hoạt Đoàn trường và cộng tác viên, người dùng cần đăng nhập vào website và truy cập vào trang quản lý Các bước thực hiện bao gồm việc truy cập vào trang dashboard.

2 Xem thông tin thống kê trên trang Kết quả Trang thống kê hiển thị

4.3.2.4 Mô tả use case tra cứu thông tin đoàn viên

Bảng 4.16 Mô tả use case tra cứu thông tin đoàn viên

Người dùng có thể tra cứu thông tin chi tiết của đoàn viên bằng cách đăng nhập vào website và truy cập vào trang quản lý Để thực hiện, hãy truy cập vào phần “Tra cứu” trong trang Barcode.

2 Nhập mã số sinh viên của đoàn viên

3 Chọn tra cứu Kết quả Thông tin chi tiết của đoàn viên được hiển thị

4.3.2.5 Mô tả use case cập nhật thông tin đoàn viên

Bảng 4.17 Mô tả use case cập nhật thông tin đoàn viên

Người dùng có thể cập nhật thông tin chi tiết của đoàn viên thông qua hệ thống Để thực hiện điều này, đoàn trường hoặc cộng tác viên sẽ là tác nhân kích hoạt Tuy nhiên, người dùng cần phải đăng nhập vào website và truy cập vào trang tra cứu trước khi thực hiện Các bước cần thiết bao gồm việc nhập mã số sinh viên của đoàn viên để tiến hành cập nhật thông tin.

3 Cập nhật các thông tin của đoàn viên

4 Chọn cập nhật Kết quả Thông tin chi tiết của đoàn viên được cập nhật, hiển thị thông báo cập nhật thành công

4.3.2.6 Mô tả use case in mã barcode

Bảng 4.18 Mô tả use case in mã barcode

Người dùng có thể in mã barcode chứa thông tin cơ bản của đoàn viên thông qua hệ thống Để thực hiện, đoàn trường hoặc cộng tác viên sẽ kích hoạt tính năng này Điều kiện tiên quyết là người dùng cần đăng nhập vào website và truy cập vào trang tra cứu Các bước thực hiện bao gồm việc nhập mã số sinh viên của đoàn viên để nhận kết quả.

Kết quả Hiển thị trang in mã barcode

4.3.2.7 Mô tả use case xuất hóa đơn đoàn phí

Bảng 4.19 Mô tả use case xuất hóa đơn đoàn phí

Người dùng có thể thu và nộp sổ đoàn cùng với đoàn phí của các đoàn viên thông qua hệ thống Để thực hiện điều này, đoàn trường và cộng tác viên sẽ là những tác nhân kích hoạt Tuy nhiên, người dùng cần phải đăng nhập vào website và truy cập vào trang tra cứu để hoàn thành quy trình.

Các bước thực hiện 1 Nhập mã số sinh viên của đoàn viên

3 Lựa chọn các khoản phí cần đóng

4 Lựa chọn “Sổ đoàn” để nộp sổ đoàn

5 Chọn xuất hóa đơn Kết quả Hiển thị trang in hóa đơn thu đoàn phí

4.3.2.8 Mô tả use case xem thống kê và danh sách đoàn phí

Bảng 4.20 Mô tả use case xem trang thống kê đoàn phí

Người dùng có thể xem thống kê đoàn phí của đoàn viên thông qua trang thống kê trên website Để truy cập, người dùng cần đăng nhập và chọn mục thống kê tại phần barcode Tác nhân kích hoạt cho quá trình này là Đoàn trường và cộng tác viên.

2 Chọn thông tin theo bộ lọc và tìm kiếm để xem danh sách các hóa đơn tương ứng

Kết quả Danh sách hóa đơn và thống kê thông tin đoàn phí được hiển thị

4.3.2.9 Mô tả use case lọc và tìm kiếm

Bảng 4.21 Mô tả use case lọc và tìm kiếm

Người dùng có thể lọc và tìm kiếm thông tin theo các phần dữ liệu mà họ quan tâm trên website, với điều kiện tiên quyết là phải đăng nhập Tác nhân kích hoạt cho tính năng này bao gồm Đoàn trường, cộng tác viên và sinh viên.

Các bước thực hiện 1 Chọn vào trang xem danh sách

2 Lựa chọn các nội dung cần lọc

3 Nhập từ khóa tìm kiếm

4 Chọn lọc để lọc dữ liệu Kết quả Danh sách của các đối tượng sẽ được hiển thị theo nội dung mà người dùng lọc và tìm kiếm

4.3.2.10 Mô tả use case xuất dữ liệu sang file Excel

Bảng 4.22 Mô tả use case xuất dữ liệu sang file Excel

Người dùng có thể xuất thông tin chi tiết của các dòng trong danh sách sang file Excel, điều này được thực hiện thông qua tác nhân kích hoạt là Đoàn trường hoặc cộng tác viên Tuy nhiên, để thực hiện chức năng này, người dùng cần phải đăng nhập vào website.

Các bước thực hiện 1 Chọn vào trang xem danh sách

2 Lọc và tìm kiếm dữ liệu trong danh sách

3 Chọn xuất dữ liệu Kết quả Dữ liệu chi tiết sẽ được tải về dưới định dạng file Excel

4.3.2.11 Mô tả use case xem danh sách hoạt động

Bảng 4.23 Mô tả use case xem danh sách hoạt động

Người dùng có thể xem thông tin về tất cả các hoạt động diễn ra tại trường bằng cách đăng nhập vào website và truy cập trang quản lý Để bắt đầu, hãy chọn trang danh sách hoạt động.

2 Chọn thông tin theo bộ lọc và tìm kiếm để xem danh sách hoạt động tương ứng

Kết quả Danh sách hoạt động được hiển thị dưới dạng bảng

4.3.2.12 Mô tả use case thêm mới chi đoàn

Bảng 4.24 Mô tả use case xem danh sách chi đoàn

Mô tả Cho phép người dùng thêm mới hoạt động

Để kích hoạt Đoàn trường và cộng tác viên, người dùng cần đăng nhập vào website và truy cập vào trang danh sách hoạt động Bước đầu tiên là xem danh sách các hoạt động có sẵn.

3 Chọn ảnh bìa hoạt động

4 Nhập các thông tin về hoạt động

5 Nhấn tạo hoạt động Kết quả Hoạt động được thêm và trở về tranh danh sách hoạt động

4.3.2.13 Mô tả use case xem chi tiết hoạt động

Bảng 4.25 Mô tả use case xem chi tiết hoạt động

Mô tả Cho phép người dùng xem thông tin chi tiết của hoạt động

Để kích hoạt Đoàn trường và cộng tác viên, người dùng cần đăng nhập vào website và truy cập trang danh sách hoạt động Bước đầu tiên là xem danh sách các hoạt động có sẵn.

2 Chọn hoạt động bất kỳ để xem chi tiết Kết quả Thông tin chi tiết của hoạt động được hiển thị bao gồm các thông tin chung và thông tin ban chấp hành chi đoàn

4.3.2.14 Mô tả use case cập nhật hoạt động

Bảng 4.26 Mô tả use case cập nhật hoạt động

Người dùng có thể cập nhật thông tin chi tiết về các hoạt động sau khi đăng nhập vào website và truy cập vào trang danh sách hoạt động Đoàn trường và cộng tác viên là những tác nhân kích hoạt cho quá trình này Để thực hiện, người dùng cần xem thông tin chi tiết của hoạt động trước khi tiến hành cập nhật.

2 Chỉnh sửa thông tin hoạt động

3 Chọn cập nhật Kết quả Thông tin chi tiết của hoạt động được cập nhật

4.3.2.15 Mô tả use case duyệt hoạt động

Bảng 4.27 Mô tả use case ẩn, hiện chi đoàn

Người dùng có thể duyệt và xem danh sách các hoạt động hợp lệ trên trang web, với điều kiện phải đăng nhập trước Tác nhân kích hoạt cho quá trình này là Đoàn trường và cộng tác viên Để bắt đầu, người dùng chỉ cần truy cập vào trang danh sách hoạt động.

2 Chọn biểu tích xanh tại cột duyệt Kết quả Khi hoạt động đang ở trạng chưa duyệt thì trạng thái sẽ được chuyển sang duyệt và ngược lại

4.3.2.16 Mô tả use case ẩn, hiện hoạt động

Bảng 4.28 Mô tả use case ẩn, hiện hoạt động

Người dùng có thể ẩn và hiển thị hoạt động khi truy vấn dữ liệu trên website Để thực hiện điều này, người dùng cần đăng nhập và truy cập vào trang danh sách hoạt động Sau đó, họ có thể xem danh sách hoạt động để quản lý thông tin một cách hiệu quả.

THIẾT KẾ PHẦN MỀM

Thiết kế cơ sở dữ liệu

5.1.1 Lược đồ cơ sở dữ liệu

Hình 5.1 Lược đồ cơ sở dữ liệu

5.1.2 Mô tả các bảng trong cơ sở dữ liệu

Bảng 5.1 Mô tả các bảng trong cơ sở dữ liệu

STT Tên bảng Mô tả

1 attendances Lưu trữ thông tin điểm danh đoàn viên

2 bills Lưu trữ thông tin hóa đơn thu đoàn phí và sổ đoàn của đoàn viên

3 classes Lưu trữ thông tin chi đoàn truong trường

4 comments Lưu trữ các bình luận của các hoạt động do đoàn viên và quản lý

5 events Lưu trữ thông tin các hoạt động trong trường

6 faculties Lưu trữ thông tin các đơn vị trong trường

7 groupbooks Lưu trữ thông tin sổ đoàn của đoàn viên

8 managers Lưu trữ thông tin tài khoản người quản lý website

9 pricelists Lưu trữ thông tin các biểu phí được thêm trong hóa đơn

10 schoolyears Lưu trữ thông tin năm học

11 students Lưu trữ thông tin toàn bộ đoàn viên, sinh viên của trường

Bảng 5.2 Chi tiết bảng attendances

Thuộc tính Kiểu Ý Nghĩa Ghi chú

Bài viết này đề cập đến các trường thông tin liên quan đến điểm danh sinh viên, bao gồm mã điểm danh, mã sinh viên và các thông tin như đăng ký tham gia, thời gian đăng ký, thời gian điểm danh vào và ra, cũng như ghi chú Ngoài ra, còn có thông tin về người tạo và người cập nhật, cùng với ngày tạo và ngày cập nhật của dữ liệu.

Bảng 5.3 Chi tiết bảng bills

Bài viết này mô tả cấu trúc dữ liệu liên quan đến quản lý thông tin sinh viên và các khoản phí Mỗi đối tượng bao gồm mã hóa đơn, mã sinh viên, mã đơn vị, mã số sinh viên, năm học, danh sách các khoản phí cần đóng, tổng tiền, ngày thanh toán, trạng thái thanh toán, người tạo, người cập nhật, ngày tạo và ngày cập nhật Thông tin này giúp theo dõi và quản lý hiệu quả việc thanh toán của sinh viên.

Bảng 5.4 Chi tiết bảng classes

Bài viết này mô tả cấu trúc dữ liệu của một chi đoàn, bao gồm các thông tin quan trọng như mã chi đoàn, tên lớp, ngành học, mô tả, mã đơn vị, danh sách ban chấp hành chi đoàn, trạng thái hiển thị, người tạo, người cập nhật, ngày tạo và ngày cập nhật Những thông tin này giúp quản lý và theo dõi hoạt động của chi đoàn một cách hiệu quả.

Bảng 5.5 Chi tiết bảng comments

Bài viết này trình bày cấu trúc dữ liệu của một hệ thống bình luận, bao gồm các trường thông tin như mã bình luận, mã hoạt động, nội dung bình luận, mã sinh viên, mã quản lý, ngày tạo và ngày cập nhật Các trường này giúp quản lý và theo dõi các bình luận của sinh viên một cách hiệu quả.

Bảng 5.6 Chi tiết bảng events

Bài viết này cung cấp thông tin chi tiết về các hoạt động học tập, bao gồm mã hoạt động, tên hoạt động, mô tả, thời gian đăng ký và tổ chức, địa điểm, số lượng sinh viên tham gia, quy mô tổ chức, quyền lợi tham gia, điểm cộng, ảnh bìa, mã năm học, học kỳ, tiêu chí sinh viên 5 tốt, danh sách tag, liên thông truyền thông, cũng như số lượng sinh viên đăng ký và tham gia Ngoài ra, bài viết cũng ghi chú về trạng thái duyệt, hiển thị, thông tin người tạo và cập nhật, cùng với thời gian tạo và cập nhật.

Bảng 5.7 Chi tiết bảng faculties

Đơn vị là một thực thể quan trọng trong hệ thống, bao gồm các thông tin như mã đơn vị, khóa chính, thứ tự sắp xếp, tên đơn vị, mô tả, số điện thoại, địa chỉ email, hình ảnh, loại đơn vị, trạng thái hiển thị, người tạo, người cập nhật, ngày tạo và ngày cập nhật Các thông tin này giúp quản lý và phân loại đơn vị một cách hiệu quả, đồng thời hỗ trợ người dùng dễ dàng tìm kiếm và liên lạc.

Bảng 5.8 Chi tiết bảng groupbooks

Bài viết này mô tả cấu trúc dữ liệu liên quan đến sổ đoàn, bao gồm các trường thông tin quan trọng như mã sổ đoàn, mã sinh viên, vị trí để sổ, mô tả, phê sổ đoàn, trạng thái sổ đoàn, ngày nộp sổ, ngày rút sổ, người tạo, người cập nhật, ngày tạo và ngày cập nhật Các trường này giúp quản lý thông tin sổ đoàn một cách hiệu quả và minh bạch.

Bảng 5.9 Chi tiết bảng managers

Bài viết này trình bày các thuộc tính quan trọng của một đối tượng quản lý, bao gồm mã quản lý, tên hiển thị, địa chỉ, số điện thoại, mã đơn vị, chức vụ, địa chỉ email, hình ảnh, mật khẩu, vai trò, trạng thái, kích hoạt tài khoản, người tạo, người cập nhật, ngày tạo và ngày cập nhật Các thông tin này giúp quản lý hiệu quả và đảm bảo tính chính xác trong việc lưu trữ dữ liệu.

Bảng 5.10 Chi tiết bảng pricelist

Bài viết này mô tả cấu trúc dữ liệu của một biểu phí, bao gồm các trường thông tin quan trọng như mã biểu phí, thứ tự sắp xếp, tên chi phí, đơn vị tính và đơn giá Ngoài ra, nó còn ghi nhận thông tin hiển thị, ngày bắt đầu và kết thúc mặc định, số lượng, thành tiền, ghi chú, người tạo và người cập nhật, cùng với thời gian tạo và cập nhật Những thông tin này giúp quản lý và theo dõi các chi phí một cách hiệu quả.

Bảng 5.11 Chi tiết bảng schoolyears

Bài viết này trình bày thông tin về năm học, bao gồm mã biểu, mã năm học, tên năm học, chủ đề năm học và mô tả Nó cũng cung cấp thông tin về thời gian bắt đầu và kết thúc của năm học, xác định xem đó có phải là năm học hiện tại hay không, cùng với trạng thái hiển thị Thêm vào đó, bài viết nêu rõ thông tin liên quan đến học kỳ, bao gồm mã học kỳ, tên học kỳ, ngày bắt đầu và kết thúc của học kỳ Cuối cùng, thông tin về người cập nhật, ngày tạo và ngày cập nhật cũng được đề cập.

Bảng 5.12 Chi tiết bảng students

Bài viết này cung cấp thông tin chi tiết về một đối tượng quản lý sinh viên, bao gồm các trường như mã số sinh viên, họ và tên, ngày sinh, giới tính, dân tộc, tôn giáo, địa chỉ, số điện thoại và khóa học Nó cũng đề cập đến tình trạng đoàn viên, thông tin về ngày vào đoàn, nơi vào đoàn, số thẻ đoàn và trạng thái sổ đoàn Thêm vào đó, các thông tin khác như mã đơn vị, ngành học, chức vụ, email, hình ảnh, mật khẩu, vai trò, trạng thái tài khoản, người tạo, người cập nhật, cùng với ngày tạo và ngày cập nhật cũng được ghi nhận Mục tiêu của bài viết là cung cấp cái nhìn tổng quan về dữ liệu sinh viên nhằm hỗ trợ quản lý hiệu quả trong môi trường học tập.

Thiết kế API

5.2.1 Nguyên tắt thiết kế API

API được thiết kế theo tiêu chuẩn RESTful, một phương pháp hiệu quả cho việc quản lý tài nguyên trong các ứng dụng web RESTful API tập trung vào các tài nguyên hệ thống như tệp văn bản, hình ảnh, âm thanh, video, và dữ liệu động, với các trạng thái tài nguyên được định dạng và truyền tải qua giao thức HTTP.

API backend được viết với NodeJS với MongoDB sử dụng framework Express bao gồm các phương thức POST, GET, PUT và DELETE

5.2.2 Thiết kế chi tiết API

5.2.2.1 Thiết kế API phần authentication

Bảng 5.13 Chi tiết API phần authentication

STT Endpoint Method Chức năng

1 /auth/dang-nhap POST Đăng đăng nhập với email và mật khẩu

2 /auth/dang-nhap-google POST Đăng nhập với google

3 /auth/cap-lai-mat-khau PUT Cấp lại mật khẩu mới qua email

4 /auth/ca-nhan GET Xem thông tin tài khoản đang đăng nhập

5 /auth/doi-mat-khau PUT Đổi mật khẩu

6 /auth/cap-mat-khau PUT Cấp mật khẩu mới cho tài khoản

5.2.2.2 Thiết kế API phần hóa đơn

Bảng 5.14 Chi tiết API phần hóa đơn

Truy vấn tất cả khóa đơn Thêm mới một hóa đơn

2 /bills/xls GET Xuất danh sách hóa đơn sang file Excel

3 /bills/thong-ke-theo- ngay GET Thống kê đoàn phí theo ngày thanh toán

4 /bills/thanh-toan/:id PUT Thanh toán hóa đơn bằng mã hóa đơn

5 /bills/huy-thanh-toan/:id PUT Hủy thanh toán hóa đơn bằng mã hóa đơn

Truy vấn, cập nhật và xóa hóa đơn bằng mã hóa đơn

5.2.2.3 Thiết kế API phần chi đoàn

Bảng 5.15 Chi tiết API phần chi đoàn

Truy vấn tất cả chi đoàn Thêm mới một chi đoàn

2 /classes/xls GET Xuất danh sách chi đoàn sang file Excel

Truy vấn, cập nhật và xóa chi đoàn bằng mã chi đoàn

5.2.2.4 Thiết kế API phần bình luận

Bảng 5.16 Chi tiết API phần bình luận

Truy vấn tất cả bình luận Thêm mới một bình luận

Truy vấn, cập nhật và xóa bình luận bằng mã bình luận

5.2.2.5 Thiết kế API phần hoạt động

Bảng 5.17 Chi tiết API phần hoạt động

Truy vấn tất cả hoạt động Thêm mới một hoạt động

2 /events/tim-kiem GET Tìm kiếm tất cả hoạt động theo từ khóa

3 /events/tham-gia GET Truy vấn các sự kiện mà đoàn viên đã tham gia

SV/:maTieuChi GET Truy vấn các sự kiện trùng với tiêu chí Sinh viên 5 tốt mà đoàn viên đã tham gia

Truy vấn, cập nhật và xóa hoạt động bằng mã hoạt động

6 /events/:id/attendances GET Truy vất tất cả danh sách điểm danh của hoạt động

7 /events/:id/attendances/: maSoSV/:huy-dang-ky PUT Hủy đăng ký tham gia hoạt động với mã hoạt động và mã số sinh viên

8 /events/:id/attendances/: maSoSV/:type PUT Đăng ký, điểm danh vào và điểm danh ra cho hoạt động mã hoạt động và mã số sinh viên

5.2.2.6 Thiết kế API phần đơn vị

Bảng 5.18 Chi tiết API phần đơn vị

Truy vấn tất cả đơn vị Thêm mới một đơn vị

Truy vấn, cập nhật và xóa đơn vị bằng mã đơn vị

5.2.2.7 Thiết kế API phần sổ đoàn

Bảng 5.19 Chi tiết API phần sổ đoàn

Truy vấn tất cả sổ đoàn Thêm mới một sổ đoàn

Truy vấn, cập nhật và xóa sổ đoàn bằng mã sổ đoàn

5.2.2.8 Thiết kế API phần tài khoản quản lý

Bảng 5.20 Chi tiết API phần tài khoản quản lý

Truy vấn tất cả tài khoản quản lý Thêm mới một tài khoản quản lý

2 /classes/xls GET Xuất danh sách tài khoản quản lý sang file

Truy vấn, cập nhật và xóa tài khoản quản lý bằng mã tài khoản quản lý

5.2.2.9 Thiết kế API phần biểu phí

Bảng 5.21 Chi tiết API phần biểu phí

Truy vấn tất cả biểu phí Thêm mới một biểu phí

Truy vấn, cập nhật và xóa biểu phí bằng mã biểu phí

5.2.2.10 Thiết kế API phần năm học

Bảng 5.22 Chi tiết API phần năm học

Truy vấn tất cả năm học Thêm mới một năm học

2 /school-years/nam-hoc- hien-tai GET Truy vấn thông tin năm học hiện tại

Truy vấn, cập nhật và xóa năm học bằng mã năm học

5.2.2.11 Thiết kế API phần thống kê

Bảng 5.23 Chi tiết API phần thống kê

1 /statistic/trang-chu GET Thống kế các số liệu cho trang chủ

Thống kê tổng số đoàn viên viên, thanh niên; Số đoàn viên chưa nộp và đã nộp sổ đoàn; Đếm số lượng sinh viên theo khóa

Số lượng sinh viên đã hoàn thành và chưa hoàn thành đoàn phí cần được thống kê rõ ràng Đồng thời, việc đếm số lượng đoàn phí theo từng khóa học cũng rất quan trọng Cuối cùng, cần tính tổng số tiền đoàn phí theo từng đơn vị để có cái nhìn tổng quát về tình hình tài chính.

4 /statistic/hoat-dong GET Thống kê số lượng hoạt động; Số điểm

CTXH và ĐRL đã cộng được

5 /statistic/chi-doan GET Thống kê Số lượng chi đoàn theo từng đơn vị; Đếm tổng số lượng chi đoàn

6 /statistic/sinh-vien-theo- don-vi GET Thống kê các số liệu đoàn viên theo đơn vị

-role GET Thống kê tài khoản quản lý theo vai trò đảm nhận

5.2.2.12 Thiết kế API phần đoàn viên

Bảng 5.24 Chi tiết API phần đoàn viên

Truy vấn tất cả năm học Thêm mới một năm học

2 /classes/xls GET Xuất danh sách đoàn viên sang file Excel

3 /students/thong-tin- barcode/:maSoSV GET Truy vấn thông tin phần tra cứu và in mã barcode bằng mã số sinh viên

4 /students/thong- tin/:maSoSV GET Truy vấn thông tin đoàn viên bằng mã số sinh viên

Truy vấn, cập nhật và xóa đoàn viên bằng mã đoàn viên

Thiết kế giao diện

5.3.1 Nguyên tắc thiết kế giao diện

Giao diện website được tối ưu hóa để đơn giản hóa các tác vụ cho người dùng, đảm bảo đáp ứng đầy đủ các yêu cầu của họ Bố cục cần được sắp xếp một cách hợp lý, giúp người sử dụng dễ dàng thực hiện các thao tác cần thiết.

Giao diện được thiết kế trên phần mềm Figma đây cũng là một trong những công cụ chính trong việc thiết kế phần mềm ngày nay

5.3.2 Thiết kế chi tiết giao diện

Hình 5.2 Giao diện trang chủ - phần header và banner

Hình 5.3 Giao diện trang chủ - phần giới thiệu và chức năng

Hình 5.4 Giao diện trang chủ - phần chức năng của website

Hình 5.5 Giao diện trang chủ - phần footer Bảng 5.25 Thành phần giao diện trang chủ

STT Tên đối tượng Chức năng

1 Nút trang chủ Điều hướng về trang chủ

2 Thanh điều hướng Điều hướng đến các phần của landing page

3 Nút đăng nhập Mở trang đăng nhập

4 Banner Hiển thị thông tin của website

5 Phần giới thiệu Giới thiệu thông tin về website

6 Phần chức năng Giới thiệu các chức năng chính của website

7 Phần chức năng đoàn viên Liệt kê các chức năng chính dành cho đoàn viên

8 Phần thống kê số liệu Hiển thị số liệu thống kê cơ bản của trang

9 Phần chức năng đoàn trường Liệt kê các chức năng chính dành cho đoàn viên

10 Nút đăng nhập sinh viên Mở trang đăng nhập dành cho quản trị viên

11 Nút đăng nhập quản trị viên Mở trang đăng nhập dành cho quản trị viên

12 Phần footer Hiển thị thông tin chi tiết về đoàn trường bao gồm thông tin liên hệ

5.3.2.2 Giao diện trang đăng nhập

Hình 5.6 Giao diện trang chọn vai trò đăng nhập

Hình 5.7 Giao diện trang đăng nhập sinh viên

Hình 5.8 Giao diện trang đăng nhập quản trị viên Bảng 5.26 Thành phần giao diện trang đăng nhập

1 Nút đăng nhập sinh viên Mở trang đăng nhập dành cho sinh viên

2 Nút đăng nhập quản trị viên Mở trang đăng nhập dành cho quản trị viên

3 Nút đăng nhập với google Mở trang tài khoản google để sinh viên lựa chọn tài khoản đăng nhập

4 Nút Bạn là quản trị viên Mở trang đăng nhập dành cho quản trị viên

5 Textbox email Cho quản trị viên nhập địa chỉ email

6 Textbox mật khẩu Cho quản trị viên nhập địa chỉ mật khẩu

7 Nút quên mật khẩu Mở trang quên mật khẩu

8 Nút đăng nhập Đăng nhập và website với thông tin đã nhập

9 Nút bạn là sinh viên Mở trang đăng nhập dành cho sinh viên

5.3.2.3 Giao diện trang thống kê

Hình 5.9 Giao diện trang thống kê - 1

Hình 5.10 Giao diện trang thống kê - 2 Bảng 5.27 Thành phần giao diện trang thống kê

1 Thống kê hóa đơn Đếm số lượng từng loại hóa đơn

2 Phần thống kê hóa đơn theo khoa Đếm số lượng hóa đã xuất theo từng khoa cụ thể

3 Phần thống kê tài khoản theo vai trò Đếm số lượng tài khoản theo từ vai trò

4 Phần thống kê sinh viên theo khoa Đếm số lượng sinh viên theo khoa

5.3.2.4 Giao diện trang tra cứu thông tin đoàn viên

Hình 5.11 Giao diện trang tra cứu thông tin đoàn viên - 1

Hình 5.12 Giao diện trang tra cứu thông tin đoàn viên - 2 Bảng 5.28 Thành phần giao diện trang tra cứu thông tin đoàn viên

1 Textbox mã số sinh viên Nhập mã số sinh viên của đoàn viên cần tra cứu

2 Nút tìm kiếm Khi nhấn nút website sẽ tìm kiếm thông tin đoàn viên theo mã số sinh viên được nhập

3 Phần barcode Hiển thị thông tin mã barcode của đoàn viên

4 Nút in barcode Mở trang in barcode để in và dán vào sổ đoàn

5 Phần thông tin chung Hiển thị thông tin chung của đoàn viên, có thể cập nhật trên các trường thông tin này

6 Phần chi tiết hóa đơn

Hiển thị thông tin chi tiết hóa đơn mà đoàn viên đã đóng Nếu đoàn viên chưa có hóa đơn sẽ hiển thị hóa đơn mặc định

Chuyển sang trang hóa đơn và thanh toán hóa đơn với các dữ liệu được chọn trong phần thông tin đoàn phí

8 Phần thông tin đoàn phí Chọn các khoản phí mà đoàn viên cần đóng

9 Phần thông tin đoàn viên Hiển thị các thông tin về đoàn của đoàn viên

Cập nhật thông tin đoàn viên theo dữ liệu được điều chỉnh tại phần thông tin chung, thông tin liên hệ và thông tin đoàn viên

5.3.2.5 Giao diện trang xuất hóa đơn

Hình 5.13 Giao diện trang trang xuất hóa đơn Bảng 5.29 Thành phần giao diện trang xuất hóa đơn

1 Nút về trang barcode Trở lại trang tra cứu thông tin đoàn viên và barcode

2 Nút in hóa đơn Mở trang in hóa đơn

3 Phần thông tin hóa đơn Hiển thị hóa đơn thu đoàn phí đã được điền đầy đủ thông tin

5.3.2.6 Giao diện trang danh sách hóa đơn

Hình 5.14 Giao diện trang danh sách hóa đơn - 1

Hình 5.15 Giao diện trang danh sách hóa đơn - 2 Bảng 5.30 Thành phần giao diện trang danh sách hóa đơn

1 Textbox mã số sinh viên Nhập mã số sinh viên đoàn viên để tra cứu

2 Dropdown đơn vị Lựa chọn đơn vị để xem hóa đơn

3 Ngày thanh toán Lựa chọn ngày bắt đầu và ngày kết thúc của ngày thanh toàn để xem hóa đơn

4 Nút lọc Kích hoạt lọc dữ liệu hóa đơn theo các thông tin được chọn

5 Phần thống kê Hiển thị số liệu thống kê liên quan đến hóa đơn thu đoàn phí

6 Nút xuất dữ liệu Xuất dữ liệu hóa đơn sang file Excel

7 Phần danh sách hóa đơn Hiển thị danh sách hóa đơn theo phần lọc và phân trang danh sách

8 Phần phân trang Lựa chọn trang muốn xem hóa đơn

5.3.2.7 Giao diện trang danh sách hoạt động

Hình 5.16 Giao diện trang danh sách hoạt động Bảng 5.31 Thành phần giao diện trang danh sách hoạt động

1 Textbox tìm kiếm Nhập từ khóa cần tra cứu

2 Nút lọc Kích hoạt lọc dữ liệu hoạt động theo các thông tin được chọn

3 Selection hiển thị Lựa chọn xem sự kiện đã diễn ra, chưa diễn ra và kết hợp

4 Phần danh sách hoạt động

Hiển thị danh sách hoạt động theo phần lọc và phân trang danh sách Nhấn vào dòng bất kỳ để xe chi tiết hoạt động

5 Nút xuất dữ liệu Xuất dữ liệu hoạt động sang file Excel

6 Nút thêm mới Mở trang thêm mới hoạt động

7 Nút duyệt hoạt động Phê duyệt hoạt động chưa diễn ra

8 Nút ẩn, hiện hoạt động Hiển thị và ẩn hoạt động

9 Nút xóa tài khoản Xóa hoạt động ra khỏi danh sách

5.3.2.8 Giao diện trang thêm mới hoạt động

Hình 5.17 Giao diện trang thêm mới hoạt động - 1

Hình 5.18 Giao diện trang thêm mới hoạt động - 2

Bảng 5.32 Thành phần giao diện trang thêm mới hoạt động

1 Nút tắt trang Tắt trang thêm mới hoạt động trở lại trang danh sách

2 Phần ảnh bìa hoạt động Đăng tải ảnh bình hoạt động từ máy tính

3 Phần thông tin chung Nhập các thông tin chung của hoạt động

4 Phần quyền lợi tham gia Nhập các quyền lợi tham gia cho hoạt động

5 Phần tiêu chí sinh viên 5 tốt Lựa chọn các tiêu chí của sinh viên 5 tốt mà hoạt động đám ứng

6 Phần thời gian địa điểm Nhập thông tin về thời gian, địa điểm tổ chức hoạt động

7 Nút tạo hoạt động Kích hoạt thêm mới hoạt động dựa trên các thông tin đã nhập phía trên

5.3.2.9 Giao diện trang chi tiết và cập nhật hoạt động

Hình 5.19 Giao diện trang chi tiết và cập nhật hoạt động - 1

Hình 5.20 Giao diện trang chi tiết và cập nhật hoạt động - 2 Bảng 5.33 Thành phần giao diện trang chi tiết và cập nhật tài khoản

1 Nút tắt trang Tắt trang thêm mới hoạt động trở lại trang danh sách

2 Phần ảnh bìa hoạt động Đăng tải ảnh bình hoạt động từ máy tính

3 Phần thông tin chung Nhập các thông tin chung của hoạt động

4 Phần quyền lợi tham gia Nhập các quyền lợi tham gia cho hoạt động

5 Phần tiêu chí sinh viên 5 tốt Lựa chọn các tiêu chí của sinh viên 5 tốt mà hoạt động đám ứng

6 Phần thời gian địa điểm Nhập thông tin về thời gian, địa điểm tổ chức hoạt động

7 Nút cập nhật Kích hoạt cập nhật hoạt động dựa trên các thông tin đã nhập phía trên

5.3.2.10 Giao diện trang danh sách chi đoàn

Hình 5.21 Giao diện trang danh sách chi đoàn Bảng 5.34 Thành phần giao diện trang danh sách chi đoàn

1 Dropdown đơn vị Lựa chọn đơn vị để xem hóa đơn

2 Textbox lớp Nhập tên chi đoàn để tra cứu

3 Nút lọc Kích hoạt lọc dữ liệu chi đoàn theo các thông tin được chọn

4 Nút xuất dữ liệu Xuất dữ liệu hóa đơn sang file Excel

5 Nút thêm mới Mở trang thêm mới chi đoàn

6 Phần danh sách chi đoàn

Hiển thị danh sách chi đoàn theo phần lọc và phân trang danh sách Nhấn vào dòng bất kỳ để xe chi tiết chi đoàn

7 Nút khóa chi đoàn Hiển thị và ẩn chi đoàn

8 Nút xóa chi đoàn Xóa chi đoàn ra khỏi danh sách

9 Phần phân trang Lựa chọn trang muốn xem hóa đơn

5.3.2.11 Giao diện trang thêm mới chi đoàn

Hình 5.22 Giao diện trang thêm mới chi đoàn - 1

Hình 5.23 Giao diện trang thêm mới chi đoàn - 2

Bảng 5.35 Thành phần giao diện trang chi tiết và cập nhật chi đoàn

1 Nút tắt trang Quay lại trang danh sách chi đoàn

2 Phần thông tin chi đoàn Hiển thị thông tin của chi đoàn, nhập các nội dung để thêm chi đoàn

3 Nút tiếp theo Chuyển đến trang thêm thông tin ban chấp hành chi đoàn

4 Phần thông tin ban chấp hành Hiển thị thông tin ban chấp hành chi đoàn

5 Nút xóa ban chấp hành Xóa ban chấp hành chi đoàn

6 Nút trở lại Quay lại trang nhập thông tin chi đoàn

7 Nút tạo Tạo chi đoàn với các nội dung đã nhập

8 Textbox mã số sinh viên Nhập mã số sinh viên của đoàn viên

9 Nút tìm kiếm Tìm kiếm các đoàn viên với mã số sinh viên nhập vào

10 Phần danh sách đoàn viên Hiển thị danh sách đoàn viên tìm kiếm được

11 Nút bí thư Chỉ định đoàn viên làm bí thư chi đoàn

12 Nút khó phí thư Chỉ định đoàn viên làm phó bí thư chi đoàn

5.3.2.12 Giao diện trang chi tiết và cập nhật chi đoàn

Hình 5.24 Giao diện trang chi tiết và cập nhật chi đoàn Bảng 5.36 Thành phần giao diện trang chi tiết và cập nhật chi đoàn

13 Nút trở về trang danh sách Quay lại trang danh sách chi đoàn

14 Phần thông tin chung Hiển thị thông tin chi tiết của chi đoàn, người dùng có thể chỉnh sửa các trường dữ liệu này

15 Nút lưu lại (3) Cập nhật thông tin chi đoàn đã chỉnh sửa phía trên

16 Phần thông tin ban chấp hành Hiển thị thông tin ban chấp hành chi đoàn

17 Nút xóa ban chấp hành Xóa ban chấp hành chi đoàn

18 Nút lưu lại (6) Cập nhật thông tin ban chấp hành chi đoàn với các nội dung đã chỉnh sửa

19 Textbox mã số sinh viên Nhập mã số sinh viên của đoàn viên

20 Nút tìm kiếm Tìm kiếm các đoàn viên với mã số sinh viên nhập vào

21 Phần danh sách đoàn viên Hiển thị danh sách đoàn viên tìm kiếm được

22 Nút bí thư Chỉ định đoàn viên làm bí thư chi đoàn

23 Nút phó phí thư Chỉ định đoàn viên làm phó bí thư chi đoàn

5.3.2.13 Giao diện trang thống kê tài khoản

Hình 5.25 Giao diện trang thống kê tài khoản Bảng 5.37 Thành phần giao diện trang thống kê tài khoản

5 Phần thống kê tài khoản theo vai trò Đếm số lượng tài khoản theo từ vai trò

6 Phần thống kê sinh viên theo khoa Đếm số lượng sinh viên theo khoa

5.3.2.14 Giao diện trang danh sách tài khoản quản lý

Hình 5.26 Giao diện trang danh sách tài khoản quản lý Bảng 5.38 Thành phần giao diện trang danh sách tài khoản quản lý

1 Textbox email Nhập email để tra cứu

2 Nút lọc Kích hoạt lọc dữ liệu chi đoàn theo các thông tin được chọn

3 Dropdown khoa Lựa chọn khoa để xem tài khoản

4 Dropdown trạng thái Lựa chọn trạng thái để xem danh sách tài khoản

5 Phần lựa chọn loại tài khoản Chuyển sang danh sách loại tài khoản theo từ vai trò

6 Phần danh sách tài khoản

Hiển thị danh sách tài khoản theo phần lọc và phân trang danh sách Nhấn vào dòng bất kỳ để xe chi tiết tài khoản

7 Nút xuất dữ liệu Xuất dữ liệu tài khoản sang file Excel

8 Nút thêm mới Mở trang thêm mới tài khoản

9 Nút khóa tài khoản Hiển thị và ẩn tài khoản

10 Nút xóa tài khoản Xóa tài khoản ra khỏi danh sách

11 Phần phân trang Lựa chọn trang muốn xem tài khoản

5.3.2.15 Giao diện trang thêm mới tài khoản

Hình 5.27 Giao diện trang thêm mới tài khoản Bảng 5.39 Thành phần giao diện trang thêm mới tài khoản

1 Nút tắt trang Tắt trang thêm mới tài khoản trở lại trang danh sách

2 Phần thông tin cá nhân Nhập các thông tin cá nhân của tài khoản

3 Phần thông tin tài khoản Nhập các thông tin liên quan đến tài khoản

4 Nút tạo tài khoản Kích hoạt thêm mới tài khoản dựa trên các thông tin đã nhập phía trên

5.3.2.16 Giao diện trang chi tiết và cập nhật tài khoản

Hình 5.28 Giao diện trang chi tiết và cập nhật tài khoản Bảng 5.40 Thành phần giao diện trang chi tiết và cập nhật tài khoản

1 Nút về trang danh sách Quay lại trang danh sách tài khoản

2 Phần thông tin cá nhân Chỉnh sửa thông tin cá nhân của tài khoản

3 Phần thông tin tài khoản Chỉnh sửa thông tin liên quan đến tài khoản

4 Nút cấp lại mật khẩu Mở trang cấp mật khẩu

5 Nút lưu thay đổi Lưu thông tin tài khoản vừa cập nhật

5.3.2.17 Giao diện trang cấp lại mật khẩu

Hình 5.29 Giao diện trang trang cấp lại mật khẩu Bảng 5.41 Thành phần giao diện trang trang cấp lại mật khẩu

1 Nút tắt trang Tắt trang trở lại trang danh sách chi tiết tài khoản

2 Textbox mật khẩu Nhập các thông tin cá nhân của tài khoản

3 Nút lưu lại Lưu lại mật khẩu mới của tài khoản

5.3.2.18 Giao diện trang danh sách sinh viên

Hình 5.30 Giao diện trang danh sách sinh viên

Bảng 5.42 Thành phần giao diện trang danh sách sinh viên

1 Textbox mã số sinh viên Nhập mã số sinh viên để tra cứu

2 Nút lọc Kích hoạt lọc dữ liệu sinh viên theo các thông tin được chọn

3 Dropdown khoa Lựa chọn khoa để xem sinh viên

4 Dropdown lớp Lựa chọn lớp để xem danh sách sinh viên

5 Phần danh sách sinh viên

Hiển thị danh sách sinh viên theo phần lọc và phân trang danh sách Nhấn vào dòng bất kỳ để xe chi tiết sinh viên

6 Nút xuất dữ liệu Xuất dữ liệu sinh viên sang file Excel

7 Nút thêm mới Mở trang thêm mới sinh viên

8 Nút khóa tài khoản Hiển thị và khóa tài khoản sinh viên

9 Nút xóa tài khoản Xóa sinh viên ra khỏi danh sách

10 Phần phân trang Lựa chọn trang muốn xem sinh viên

5.3.2.19 Giao diện trang thêm mới sinh viên

Hình 5.31 Giao diện trang thêm mới sinh viên Bảng 5.43 Thành phần giao diện trang thêm mới sinh viên

8 Nút tắt trang Tắt trang thêm mới sinh viên trở lại trang danh sách

9 Phần thông tin cá nhân Nhập các thông tin cá nhân của sinh viên

10 Phần thông đoàn viên Nhập các thông tin đoàn viên của sinh viên

11 Nút tạo tài khoản Kích hoạt thêm mới sinh viên dựa trên các thông tin đã nhập phía trên

5.3.2.20 Giao diện trang chi tiết và cập nhật sinh viên

Hình 5.32 Giao diện trang chi tiết và cập nhật tài khoản - 1

Hình 5.33 Giao diện trang chi tiết và cập nhật tài khoản - 2 Bảng 5.44 Thành phần giao diện trang chi tiết và cập nhật tài khoản

8 Nút về trang danh sách Quay lại trang danh sách sinh viên

9 Phần thông tin chung Chỉnh sửa thông tin chung của sinh viên

10 Phần thông tin liên hệ Chỉnh sửa thông tin liên hệ của sinh viên

11 Phần thông tin đoàn viên Chỉnh sửa thông tin đoàn viên của sinh viên

12 Nút lưu thay đổi Lưu thông tin sinh viên vừa cập nhật

5.3.2.21 Giao diện trang danh sách hoạt động đoàn viên

Hình 5.34 Giao diện trang danh sách hoạt động đoàn viên - 1

Hình 5.35 Giao diện trang danh sách hoạt động đoàn viên - 2 Bảng 5.45 Thành phần giao diện trang danh sách hoạt động đoàn viên

1 Textbox từ khóa tìm kiếm Nhập từ khóa tìm kiếm hoạt động

2 Nút tìm kiếm Tìm kiếm thông tin theo từ khóa

3 Radio Button loại hoạt động Cho phép lựa chọn các hoạt động đã diễn ra, đang diễn ra hoặc tất cả

4 Phần thông tin hoạt động Hiển thị thông tin hoạt động

5 Phần thông tin hoạt động được tìm kiếm

Hiển thị thông tin hoạt động, các hoạt động có từ trùng với từ khóa cần tìm sẽ được tô đậm màu đỏ

5.3.2.22 Giao diện trang chi tiết hoạt động

Hình 5.36 Giao diện trang chi tiết hoạt động - 1

Hình 5.37 Giao diện trang chi tiết hoạt động - 2 Bảng 5.46 Thành phần giao diện trang chi tiết hoạt động

1 Nút tắt trang Tắt trang chi tiết hoạt động và trở về trang tìm kiếm

2 Phần thông tin hoạt động Hiển thị thông tin chi tiết của hoạt động

3 Nút đăng ký tham gia Đăng ký tham gia hoạt động, nếu đã đăng ký nút sẽ chuyển thành hủy đăng ký

4 Nút thêm vào lịch Mở trang thêm hoạt động vào lịch với các nội dung của hoạt động được điền sẵn

5 Phần sinh viên đăng ký Thể hiện số lượng sinh viên đăng ký trên tổng số lượng sinh viên tham gia

6 Phần thông tin sinh viên 5 tốt

Hiển thị các tiêu chí sinh viên 5 tốt mà hoạt động được chấp nhận

7 Nút xem bình luận Mở phần bình luận của hoạt động

8 Nút ẩn bình luận Ẩn phần bình luận của hoạt động

9 Textbox bình luận Nhập nội dung bình luận

10 Nút gửi bình luận Thêm bình luận vào hoạt động

11 Phần nội dung bình luận Hiển thị các bình luận trước đó

Thiết kế xử ký

5.4.1 Sequence diagram xem danh sách sinh viên

Hình 5.38 Sequence diagram xem danh sách sinh viên sd GetAllStudents

Database find() return valid result() return valid result()

ClickListButton() return valid result() Send Request()

@Query() return valid result() getAllStudents()

5.4.2 Sequence diagram xem chi tiết sinh viên

Hình 5.39 Sequence diagram xem chi tiết sinh viên sd GetAllStudents

[null] return null() return null()

@Query() ClickGetButton() return null() return valid student () Send Request()

ShowStudent() getOneStudent (id) return valid student () return valid student () findById (id) return()

5.4.3 Sequence diagram thêm mới sinh viên

Hình 5.40 Sequence diagram thêm mới sinh viên sd CreateNew Student

Browser StudentController StudentModel Mongoose alt check status student

ShowMessageFaild(error) create (student) return student() return error() ShowMessageSuccess() createOneStudent (student) return error() update (student) return student() return error()

SendRequest (student) validate() return student()

5.4.4 Sequence diagram cập nhật sinh viên

Hình 5.41 Sequence diagram cập nhật sinh viên sd CreateNew Student

Browser StudentController StudentModel Mongoose alt check status student

(student) return error() return error() validate() create(student) return student() return error() return student() return student() create (student) createOneStudent(student)

Mô tả ứng dụng

Hình 5.42 Mô tả các thành phần của ứng dụng

CÀI ĐẶT VÀ KIỂM THỬ PHẦN MỀM

Cài đặt môi trường phát triển

6.1.1 Điều kiện tiên quyết Để cài đặt và khởi chạy website trên local, máy tính người dùng cần cài đặt đầy đủ môi trường và ứng dụng tối thiểu như sau:

- Cài đặt Visual Studio Code

- Cài đặt NodeJS phiên bản từ 12 trở lên

- Cài đặt npm hoặc yarn

- Tải và mở source code của ứng dụng

- Mở source code ứng dụng

- Truy cập vào thư mục back-end bằng lệnh cd back-end

Để cài đặt các gói cần thiết cho ứng dụng, hãy chạy lệnh npm install hoặc yarn install nếu bạn đang sử dụng máy tính có cài đặt yarn Quá trình cài đặt này sẽ tốn một chút thời gian.

Hiện tại, server đang vận hành các dịch vụ MongoDB, Sendgrid và AWS S3 theo cấu hình của nhóm thực hiện đề tài Để thực hiện thay đổi, bạn cần truy cập vào file env để điều chỉnh giá trị các biến môi trường.

- Khởi chạy server bằng lệnh npm start dev hoặc yarn start dev Như vậy, server đã được khởi chạy tại localhost với port 5000

6.1.2.2 Các thư viện sử dụng

Bảng 6.1 Các thư viện sử dụng trong back-end

STT Tên Phiên bản License Mục đích

1 @elastic/ elasticsearch 8.2.1 ISC Thực hiện các chức năng cho tìm kiếm toàn dữ liệu

2 @sendgrid/mail 7.6.0 ISC Gửi email trong ứng dụng

3 aws-sdk 2.1043.0 ISC Thao tác với file trên S3 AWS:

4 bcryptjs 2.4.3 ISC Mã hóa mật khẩu trước khi lưu xuống database

5 cors 2.8.5 ISC Cho phép truy cập API từ bên ngoài

6 dotenv 10.0.0 ISC Load biến môi trường từ file env vào process.env

7 express (framework) 4.17.1 ISC Xây dựng khung trang web, sử dụng Router

Thao tác với file trong ứng dụng: Load file, unlink file, createReadStream

9 jsonwebtoken 8.5.1 ISC Xác thực quyền truy cập người dùng

Kết nối và thao tác với mongoDB database Tạp schema và model Sử dụng các phương thức từ model để thêm, xóa, sửa và get dữ liệu từ database

Phần trung gian để upload file lên hệ thống Sử dụng để kiểm tra kích thước file, loại file và điều chỉnh tên file trước khi lưu

12 util 0.12.4 ISC Sử dụng util.promisify cho fs.unlink để xóa file

Tạo id cho mỗi file tải lên để đảm bảo sinh viên có thể upload các minh chứng cùng tên

14 nodemon 2.0.14 ISC Sử dụng khi code giúp restart lại server sau khi lưu file

- Truy cập vào thư mục back-end bằng lệnh cd front-end

Để cài đặt các gói cần thiết cho ứng dụng, bạn cần chạy lệnh npm install hoặc yarn install nếu máy tính của bạn đã cài đặt yarn Quá trình cài đặt này sẽ mất một chút thời gian.

- Truy cập vào file front-end/src/store/constant.js để thay đổi địa chỉ back-end

- Khởi chạy website bằng lệnh npm start hoặc yarn start Mặc định website sẽ chạy tại localhost port 3000

6.1.3.2 Các thư viện sử dụng

Bảng 6.2 Các thư viện sử dụng trong front-end

STT Tên Phiên bản License Mục đích

1 @fontsource/roboto 4.5.1 MIT Import font cho website

MIT Sử dụng các UI components để thiết kế giao diện

MIT Hiển thị bảng dữ liệu dưới dạng hàng và cột

MIT Style cho các components

5 @mui/icons-material ^5.0.5 MIT Sử dụng bộ icon của material ui

6 @mui/material 5.0.6 MIT Sử dụng các UI components để thiết kế giao diện

7 apexcharts 3.26.1 MIT Tạo các biểu đồ

8 react-apexcharts 1.3.7 MIT Tạo các biểu đồ

9 axios 0.24.0 MIT Gọi API từ backend

10 clsx 1.1.1 MIT Tạo các className

11 formik 2.2.6 MIT Giúp làm việc với form một cách dễ dàng

12 framer-motion 4.1.13 MIT Tạo hoạt ảnh

1.8.0 MIT Tạo menu, cửa sổ popover bằng material-ui

14 moment 2.29.1 MIT Thao tác với dữ liệu date time

15 prop-types 15.7.2 MIT Kiểm tra kiểu của prop được truyền qua components

16 react 17.0.2 MIT Thư viện xây dựng giao diện người dùng

17 react-apexcharts 1.3.7 MIT Tạo các biểu đồ

18 react-css-modules 4.7.11 MIT Module hóa stylesheet dùng riêng c ho từng components

19 react-device-detect 1.17.0 MIT Phát hiện thiết bị và hiển thị chế độ xem theo

20 react-dom 17.0.2 MIT Thành phần cầu nối giữa React và

DOM, giúp render web UI từ react component

21 react-google-login 5.2.2 MIT Hỗ trợ đăng nhập với Google

1.5.8 MIT Cho phép sử dụng react-scrollbar tr ong React

23 react-redux 7.2.3 MIT Quản lý trạng thái ứng dụng

MIT Hỗ trợ định tuyến

25 react-router-dom 6.0.2 MIT Hỗ trợ định tuyến

26 redux 4.0.5 MIT Quản lý trạng thái ứng dụng

27 yup 0.32.9 MIT Validate giá trị các biến

Kiểm thử phần mềm

6.2.1.1 Kiểm thử các tính năng cho khách

Bảng 6.3 Kiểm thử các tính năng cho khách

TT Chức năng Các bước thực hiện Dữ liệu kiểm tra Kết quả

1 Truy cập vào trang đăng nhập

2 Chọn “Tôi Là Sinh Viên”

3 Chọn “Đăng nhập với Google”

4 Chọn tài khoản Google để đăng nhập

Tài khoản gmail sinh viên

- Đăng nhập thành công và điều hướng sang trang sinh viên

- Đáp ứng được mong đợi

2 Đăng nhập quản trị viên

2 Chọn “Tôi Là Quản Trị Viên”

3 Nhập email và mật khẩu

Email và mật khẩu của quản trị viên

- Đăng nhập thành công và điều hướng sang trang của quản trị viên với vai trò tương ứng

2 Chọn “Tôi Là Quản Trị Viên”

- Thông báo thành công và chuyển về trang chủ

- Gửi thông tin đăng nhập mới qua email vừa nhập

6.2.1.2 Kiểm thử các tính năng cho đoàn trường

Bảng 6.4 Kiểm thử các tính năng cho đoàn trường

- Hiển thị các thông tin trong website

Tra cứu thông tin đoàn viên

1 Truy cập vào trang Barcode phần “Tra cứu”

2 Nhập MSSV cần tra cứu và nhấn tìm kiếm

MSSV của đoàn viên cần tra cứu

- Hiển thị thông tin đoàn viên, mã barcode và hóa đơn thu đoàn phí

Cập nhật thông tin đoàn viên

1 Truy cập vào trang Barcode phần “Tra cứu”

2 Nhập MSSV cần cập nhấn tìm kiếm

3 Chỉnh sửa thông tin sinh viên

- MSSV của đoàn viên cần cập nhật

- Thông tin cập nhật đoàn viên

- Thông tin đoàn viên được cập nhật

- Hiển thị thông báo cập nhật thành công

- Thông tin đoàn viên được cập nhật

- Chưa hiển thị thông báo cập nhật thành công

MSSV của đoàn viên cần in barcode

- Hiển thị trang in mã barcode

Xuất hóa đơn đoàn phí

2 Chọn các khoản phí cần đóng

3 Chọn “Nộp sổ đoàn” để nộp sổ đoàn

MSSV của đoàn viên cần xuất hóa đơn

- Hiển thị tra chi tiết hóa đơn với các thông tin đã chọn

- Cho phép in hóa đơn

1 Chọn phần “Thống kê” tại mục “Barcode”

- Hiển thị thống kê và danh sách đoàn phí

Xem danh sách chi đoàn

1 Chọn phần “Danh sách chi đoàn”

- Hiển thị danh danh sách chi đoàn, bộ lọc và tìm kiếm

Lọc và tìm kiếm chi đoàn

1 Xem danh sách chi đoàn

2 Lựa chọn các nội dung cần lọc

Nội dung bộ lọc và từ khóa tìm kiếm

- Hiển thị trang danh sách chi đoàn với các thông tin đã lọc và tìm kiếm

Xuất dữ liệu sang file Excel

2 Lựa chọn nội dung cần xem theo bộ lọc và tìm kiếm

Nội dung bộ lọc và từ khóa tìm kiếm

- Xuất dữ liệu ra file Excel và lưu trên máy người dùng

3 Nhập thông tin chi đoàn

4 Nhập thông tin BCH chi đoàn

Thông tin chi đoàn và thông tin BCH chi đoàn

- Thêm chi đoàn vào CSDL

- Thông báo thêm thành công

Xem chi tiết chi đoàn

2 Chọn chi đoàn bất kỳ để xem chi tiết

- Hiển thị thông tin chi tiết của chi đoàn

1 Xem chi tiết chi đoàn

2 Chỉnh sửa thông tin chi đoàn và BCH chi đoàn

Thông tin chi đoàn muốn cập nhật

- Thông tin chi đoàn được cập nhật

- Thông báo cập nhật thành công

2 Chọn biểu tượng “Thù ng rác” tại chi đoàn muốn ẩn hiện

- Chi đoàn bị xóa trong CSDL

- Thông báo xóa thành công

2 Chọn biểu tượng “Ổ khóa” tại chi đoàn muốn xóa

- Khi chi đoàn đang ở trạng thái ẩn thì trạng thái sẽ được chuyển sang hiển thị và ngược lại

1 Xem danh sách tài khoản

2 Chọn biểu tượng “Ổ khóa” tại tài khoản muốn khóa

- Khi tài khoản đang ở trạng thái khóa thì trạng thái sẽ được chuyển sang đang dùng và ngược lại

Cấp lại mật khẩu tài khoản quản lý

1 Xem danh sách tài khoản quản lý

2 Xem chi tiết tài khoản

3 Chọn “Cấp lại mật khẩu”

- Gửi email thông tin tài khoản mới cho người dùng

- Thông báo đặt lại mật khẩu thành công

6.2.1.3 Kiểm thử các tính năng cho đoàn viên

Bảng 6.5 Kiểm thử các tính năng cho đoàn viên

2 Chọn chế độ hiển thị hoạt động

- Hiển thị danh sách hoạt động theo chế độ

Từ khóa tìm kiếm hoạt động

- Hiển thị danh sách hoạt động

2 Nhập từ khóa cần tìm kiếm

3 Nhấn biểu tượng “Kính lúp”

- Các hoạt động có tên và mô tả trùng với từ khóa tìm kiếm sẽ có màu đỏ bà tô đậm

3 Đăng ký và hủy đăng ký hoạt động

1 Vào trang tìm kiếm hoạt động

2 Chọn hoạt động muốn đăng ký, hủy đăng ký

3 Chọn “Đăng ký tham gia” nếu chưa đăng ký

4 Chọn “Hủy đăng ký” nếu đã đăng ký tham gia

- Thông báo đăng ký/hủy đăng ký thành công

- Thay đổi nội dung nút từ đăng ký sang hủy đăng ký và ngược lại

1 Chọn hoạt động cần điểm danh

2 Chọn vào điểm danh hoạt động

3 Điểm danh các đoàn viên tham gia hoạt động

- Thêm đoàn viên vào danh sách điểm danh

Xem các hoạt động đã tham gia

1 Vào trang “Hoạt động của tôi”

2 Lựa chọn chế độ xem

- Hiển thị danh sách hoạt động mà đoàn viên đã tham gia

Bảng 6.6 Kiểm thử hiệu năng

STT Chức năng Các bước thực hiện Kết quả

- Dữ liệu thống kê được hiển thị nhanh chóng

- Số liệu thống kê chính xác

Xem trang danh sách đoàn phí

- Danh sách được hiển thị nhanh chóng

- Đúng thông tin yêu cầu

Xem trang danh thống kê đoàn phí

- Danh sách được hiển thị nhanh chóng

- Đúng thông tin yêu cầu

- Dữ liệu thống kê đoàn phí bị tính toàn chậm

1 Chọn hoạt động cần điểm danh

2 Chọn vào điểm danh hoạt động

3 Điểm danh các đoàn viên tham gia hoạt động

- Điểm danh hoạt động cần thực hiện nhanh chóng

- Tránh mất thông tin khi điểm danh bằng nhiều máy

- Khi điểm danh bằng 2 máy dẫn đến việc thông tin bị mất

Xem các hoạt động đã tham gia

1 Vào trang “Hoạt động của tôi”

2 Lựa chọn chế độ xem

- Danh sách hoạt động được hiển thị nhanh chóng

6.2.3.1 Sửa lỗi cập nhật thông tin đoàn viên

➢ Biểu hiện o Không hiển thị thông báo khi cập nhật thông tin đoàn viên

➢ Lý do o Chưa gọi modal thông báo cập nhật thành công

➢ Giải quyết o Gọi modal thông báo cập nhật thành công

➢ Kết quả o Hiển thị thông báo khi cập nhật thông tin đoàn viên thành công

6.2.3.2 Sửa lỗi xem thống kê đoàn phí

➢ Biểu hiện o Dữ liệu thống kê đoàn phí hiển thị chậm

➢ Lý do o Số liệu cần tính toàn nhiều o Mã nguồn tính toàn chưa tối ưu

➢ Giải quyết o Tối ưu mã nguồn tính toán thống kê hóa đơn

➢ Kết quả o Thống kê hóa đơn được tính toán nhanh hơn ban đầu

6.2.3.3 Sửa lỗi xem trang điểm danh hoạt động

➢ Biểu hiện o Mất thông tin điểm danh khi điểm danh trên 2 máy khác nhau

Khi điểm danh, server sẽ thu thập toàn bộ danh sách và tiến hành cập nhật Nếu có hai máy cùng thực hiện điểm danh, thông tin của máy thứ nhất sẽ bị mất nếu máy thứ hai lưu dữ liệu trước khi máy thứ nhất hoàn tất.

➢ Giải quyết o Sử dụng các cập nhật, thêm điểm danh mới trong mảng tại phía lưu dữ liệu

➢ Kết quả o Không xảy ra tình trạng mất dữ liệu khi điểm danh đồng thời nữa

Tiêu đề	Xây Dựng Website Quản Lý Đoàn Viên Và Công Tác Đoàn Trường ĐH Sư Phạm Kỹ Thuật Tp. HCM
Tác giả	Lê Nhật Tường, Đinh Bách Thông
Người hướng dẫn	ThS. Trần Công Tú
Trường học	Trường Đại Học Sư Phạm Kỹ Thuật Tp. HCM
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Khóa Luận Tốt Nghiệp
Năm xuất bản	2022
Thành phố	Tp. Hồ Chí Minh

Định dạng
Số trang	108
Dung lượng	10,64 MB