báo cáo đồ án môn thiết kế website đề tài website quản lý công tác đoàn đội trường đại học cần thơ

Hoàn cảnhTrong thời kỳ phát triển như vũ bão của công nghệ số, những phương pháp quản lý tổ chức truyền thống dần bộc lộ nhiều điểm yếu như không tập trung, khó kiểm soát và khó tiếp cận

TRƯỜNG ĐẠI HỌC CẦN THƠ KHOA CÔNG NGHỆ THÔNG TIN

Báo cáo đồ án môn Thiết kế website

Đề tài: “Website quản lý công tác Đoàn đội trường đại học Cần

3.1 Chức năng chính trong quản lý (của admin) 3

7 Trang cấp mới tài khoản đoàn viên (Admin) 12

Đoàn viên tiếp cận thông tin một cách rời rạc và người làm công tác quản lý cũng rất khó tiếp xúc một cách trực tiếp với Đoàn viên do không có công cụ thích hợp, đa phần công tác Đoàn được phổ biến qua các công cụ liên lạc trung gian và không dành cho quản lý như Facebook, Messenger gây khó khăn trong khâu quản lý lượng Đoàn viên đã tiếp cận được với thông tin từ tổchức Đoàn và ngược lại.

Kèm theo đó là công tác quản lý Đoàn viên cũng rất khó khăn, tốn nhânlực, tra cứu thông tin chậm chạp, cập nhật thông tin không tức thời, phức tạp trong việc xác minh thông tin từ cả hai chiều và không đạt hiệu quả cao do còn đang sử dụng những công cụ thủ công phi tập trung, không có tính đồng bộ

Với những hoạt động mang tính tập thể, công tác quản lý cũng đang dựa vào bên thứ 3 và không có tính đồng bộ, khó kiểm soát và không độc lập

do còn phụ thuộc vào công cụ quản lý sinh viên của trường học gây ra nhiều bất cập

Ở một khía cạnh khác, Đoàn viên cũng cập nhật tin tức Đoàn thông quanhững cổng thông tin không cố định và khó theo dõi, dẫn đến hoạt động Đoàn trở nên xa rời với Đoàn viên, gián tiếp gây ra mất mát trong hoạt động Đoàn cũng như xói mòn sự gắn bó từ phía Đoàn viên

Website quản lý Đoàn ra đời trong một hoàn cảnh chứng minh tinh cấp thiết của việc cần một công cụ độc lập, tập trung, cập nhật tức thời, nhất quán,đồng bộ, ổn định và tiếp cận từ cả hai phía

1.2 Giới thiệu.

Website quản lý Đoàn ra đời với mục đích cải tiến những điểm yếu của cách thức quản lý truyền thống, vì vậy, nó có những đặc điểm cơ bản như: đồng bộ, tức thời, dễ quản lý, tiếp cận trực tiếp:

Đồng bộ và tức thời : dữ liệu được quản lý và cập nhật trực tiếp lên hệ thống database

Dễ quản lý: người quản lý truy cập và quản lý thông tin từ hệ thống database đã được cập nhật tức thời mà không thông qua bên thứ ba

Tiếp cận trực tiếp: Đoàn viên tiếp cận với các thông tin và sự kiện Đoàn một cách có hệ thống và trực tiếp , có thể kiểm soát dễ dàng

1.3 Đối tượng sử dụng

Người quản lý ( admin - Ban Thường vụ Đoàn): Quản lý đăng , cập nhật hay xóa các thông tin cần chia sẻ, các sự kiện , quản lý dữ liệu đoàn viên.Đoàn viên (user): tiếp cận trực tiếp các thông tin của Đoàn

2 Các công nghệ sử dụng.

Các công nghệ được sử dụng chính bao gồm:

● React JS (API w / Hooks)

● Node JS (Strapi CMS)

● Chakra-ui UI

● SQLite Database

● Mã thông báo web JSON

● Axios cho các yêu cầu API

3 Giới thiệu các chức năng chính.

3.1 Chức năng chính trong quản lý (của admin).

3.1.1 Quản lý Đoàn viên:

Chỉ admin có quyền tạo tài khoản cho Đoàn viên

Khi Đoàn viên đăng ký tham gia sự kiện, admin sẽ quản lý thông tin bằng một bảng event lưu thông tin user đăng ký tham gia

3.1.2 Quản lý sự kiện:

Chỉ admin có quyền đăng, cập nhật và xóa sự kiện cũng như đóng, mở, thay đổi thời gian đăng ký tham gia sự kiện

3.1.3 Quản lý tin tức:

Chỉ admin có quyền đăng, cập nhật và xóa tin tức

3.2 Chức năng của user.

● Xem thông tin cá nhân

● Chỉnh sửa thông tin cá nhân

● Xem tin tức

● Xem sự kiện

● Đăng ký tham gia sự kiện

3.3 Sơ đồ chức năng chính.

II Các chức năng chi tiết.

1 Trang chủ.

Trang chủ của trang quản lý đoàn viên - 1

Trang chủ của trang quản lý đoàn viên - 2

Trang chủ sẽ thể hiện được biểu tượng chính của đoàn trường, bao gồmLogo, tiêu đề, các thanh điều hướng sẽ được hiển thị xuyên suốt trong tất cả

các trang có trong website

2 Trang tin tức.

Trang tin tức thể hiện được đầy đủ các bài đăng thuộc dạng tin tức Trang được hiển thị tối đa 6 bài đăng được sắp xếp theo thứ tự thời gian bài viết Các bài đăng còn lại được sử dụng điều hướng phân trang cho người dùng lựa chọn các bài đăng

Trang bài đăng

Khi bấm vào một tab bài đăng, người dùng sẽ được điều hướng đến trang tin tức chính của bài đăng trên, trong trang này sẽ bao gồm hình ảnh, tiêu đề bài viết, nội dung, người viết bài cùng thời gian viết bài

Trang chi tiết bài đăng

3 Trang hoạt động.

Khác với trang bài đăng, phần hoạt động được chia ra làm 3 phần bao gồm các hoạt động đang diễn ra, các hoạt động đã kết thúc và tất cả các hoạt động Các đường dẫn đi tới các trang trên được hiển thị trong một dropbox hiển thị khi di chuột vào tab hoạt động trên thanh điều hướng

Tab điều hướng các hoạt động

Nội dung thể hiện trong các trang hoạt động sẽ bao gồm tổng hợp tất cảcác bài đăng sự kiện do đoàn trường tổ chức tương tự trang hiển thị tất cả bài đăng

Trang chi tiết hoạt động

Đối với các bài đăng dạng hoạt động - sự kiện, các đoàn viên có thể đăng ký tham gia vào hoạt động trên Trong trang nội dung chi tiết hoạt động

sẽ bao gồm thời gian diễn ra hoạt động, thống kê số lượng người tham gia, cùng nút cho phép đoàn viên đăng ký tham gia hoạt động

Nút đăng ký tham gia sự kiện

4 Trang đăng nhập

Trang đăng nhập được hiển thị sau khi người dùng chọn phần đăng nhập trên menu điều hướng Người dùng sẽ thực hiện nhập username (hoặc

email) và password đã được cấp

Màn hình đăng nhập

Menu điều hướng sau đăng nhập

Sau khi đăng nhập thành công, phần thanh điều hướng sẽ chuyển phần đăng nhập sang tên cùng avatar của người dùng Khi di chuột vào phần này

sẽ hiển thị dropbox các lựa chọn quản lý tài khoản Tùy thuộc vào loại tài khoản của ban quản trị hay tài khoản đoàn viên mà số lượng các lựa chọn này

sẽ khác nhau

Menu quản lý của admin

Menu quản lý của đoàn viên

5 Trang thông tin cá nhân

Trang thông tin cá nhân là trang hiển thị đoàn bộ các thông tin cá nhân của đoàn viên đã cung cấp Tại đây, đoàn viên có thể thực hiện xem, sửa đổi thông tin cá nhân của bản thân

Trang thông tin cá nhân

6 Trang quản lý đoàn viên (Admin)

Trang quản lý đoàn viên là trang dành riêng cho các tài khoản admin Tại đây ban cán sự đoàn có thể xem danh sách các đoàn viên đang có hiện tại, xóa bỏ thông tin đoàn viên hiện tại

Trang quản lý đoàn viên

7 Trang cấp mới tài khoản đoàn viên (Admin)

Trang cấp mới tài khoản đoàn viên dành riêng cho các tài khoản admin.Tại đây sau khi có được đầy đủ thông tin cá nhân của các đoàn viên, các ban cán sự sẽ thực hiện cấp tài khoản cho các đoàn viên Sau khi thực hiện việc cấp tài khoản, đoàn viên có thể dùng tài khoản được cấp để trực tiếp đăng nhập vào hệ thống

Trang cấp mới tài khoản đoàn viên

III UML Diagram.

1 Đăng nhập

Tên Use Case Đăng nhập

Mô tả Cho phép người dùng đăng nhập để sử dụng các chức

năng của hệ thống

Actor Người dùng User,Admin

Sự kiện kích

hoạt

Người dùng muốn đăng nhập vào trong hệ thống

Mức độ ưu Must have

bằng email và chọn lệnh Hoàn tất

phép đăng nhập và hiển thị màn hình trang chủ

Luồng sự

kiện phụ

A1 – Đăng nhập từ màn hình đăng ký: Khi người dùng

truy cập vào mục đăng ký rồi mới đăng nhập

chọn lệnh đăng nhập

A2 – Sai tài khoản hoặc mật khẩu: Khi người dùng

nhập sai tài khoản hoặc mật khẩu

kèm thông báo nhập sai thông tin

Diagram( Sequence flow):

2 Tạo hồ sơ và tài khoản

Tên Use Case Tạo hồ sơ, tạo tài khoản

Mô tả Cho phép admin tạo lập một hồ sơ về dữ liệu người

tạo một hồ sơ, thông tin liên quan có thể không thêm

phép đăng nhập và hiển thị màn hình trang chủ

Luồng sự

kiện phụ A1 – Không điền email : Khi admin không điền email

Hệ thống hiển thị lại màn hình tạo hồ sơ kèm thông báo nhập sai thông tin

Diagram( Sequence flow):

3 Thay đổi hồ sơ

Tên Use Case Thay đổi hồ sơ

Mô tả Cho phép người dùng thay đổi thông tin trong hồ

Tiền điều kiện Người dùng đã có hồ sơ

Hậu điều kiện Người dùng thay đổi hồ sơ thành công

Luồng sự kiện

chính 1.Hệ thống hiển thị giao diện form hồ sơ

2 Người dùng nhập thông tin cần thay đổi

3.Hệ thống kiểm tra thông tin nếu hợp lệ cho phép đăng nhập và hiển thị màn hình trang chủ

4 Tạo tin tức

Tên Use Case Tạo tin tức

Mô tả Cho phép admin tạo ra một trang tin tức

Hậu điều kiện Admin tạo thêm trang tin thanh công

Luồng sự kiện

chính 1 Hệ thống hiển thị giao diện form tin tức2 Admin điền tin tức

3 Hệ thống kiểm tra thông tin nếu hợp lệ cho phép đăng nhập và hiển thị màn hình trang chủ

5 Cập nhập tin tức

Tên Use Case Cập nhật tin tức

Mô tả Cho phép admin thay đổi một trang tin tức

chính 1 Hệ thống hiển thị giao diện form tin tức2 Admin thay đổi tin tức

phép đăng nhập và hiển thị màn hình trang chủ

6 Xóa tin tức

Tên Use Case Xóa tin tức

Mô tả Cho phép admin xóa một trang tin tức

Sự kiện kích

Mức độ ưu

tiên

Must have

Tiền điều

Hậu điều kiện Admin xóa trang tin thành công

Luồng sự kiện

chính 1 Hệ thống hiển thị giao diện form tin tức2 Admin xóa tin tức

phép đăng nhập và hiển thị màn hình trang chủ

7 Xem tin tức

Tên Use Case Xem tin tức

Mô tả Cho phép người dùng xem một trang

tin tức

Sự kiện kích hoạt Người dùng muốn xem một trang tin

tức

Mức độ ưu tiên Must have

Tiền điều kiện Đã có trang tin

Hậu điều kiện Người dùng xem trang tin thanh công

Luồng sự kiện phụ Không có

Diagram ( sequence flow)

8 Tạo tin tức

Tên Use Case Tạo sự kiện

Mô tả Cho phép admin tạo ra một trang sự kiện

Sự kiện kích

Mức độ ưu

Tiền điều kiện Admin đã đăng nhập

Hậu điều kiện Admin tạo thêm trang sự kiện thanh công

Tên Use Case Cập nhật sự kiện

Mô tả Cho phép admin thay đổi một trang sự kiện

Sự kiện kích Admin muốn muốn thay đổi một trang sự kiện

1.Hệ thống hiển thị giao diện form sự kiện

2.Admin thay đổi sự kiện

3.Hệ thống kiểm tra thông tin nếu hợp lệ cho phép đăng sự kiện và hiển thị màn hình sự kiện

10 Xóa nhập sự kiện

Tên Use Case Xóa sự kiện

Mô tả Cho phép admin xóa một trang sự kiện

Sự kiện kích hoạt Admin muốn xóa một trang sự kiện

Mức độ ưu tiên Must have

Tiền điều kiện Đã có trang sự kiện

Hậu điều kiện Admin xóa trang sự kiện thanh công

Luồng sự kiện

chính

2.Admin xóa sự kiện3.Use Case kết thúc

Luồng sự kiện phụ Không có

Diagram ( sequence flow)

11 Xem nhập sự kiện

Tên Use Case Xem sự kiện

Mô tả Cho phép người dùng xem một trang sự

kiện

Sự kiện kích hoạt Người dùng muốn xem một trang sự

kiện

Mức độ ưu tiên Must have

Tiền điều kiện Đã có trang sự kiện

Hậu điều kiện Người dùng xem trang sự kiện thanh

Diagram ( sequence flow)

12 Đăng ký sự kiện

Tên Use Case Đăng ký sự kiện

Mô tả Cho phép người dùng đăng ký một trang

sự kiện

Sự kiện kích hoạt Người dùng muốn đăng ký một sự kiện

Mức độ ưu tiên Must have

Tiền điều kiện Đã có sự kiện

Hậu điều kiện Người dùng đăng ký trang sự kiện thành

công

Luồng sự kiện

chính

1.Hệ thống hiển thị giao diện trang chủ2.Người dùng ấn vào xem sự kiện3.Người dùng ấn vào tham gia sự kiện3.Use Case kết thúc

Luồng sự kiện phụ Không có

Diagram( sequence flow)

IV Kết luận.

1 Những phần đã làm được

● Tìm hiểu, học hỏi những công nghệ mới

● Xây dựng thành công trang web quản lý đoàn với giao diện thân thiện với người dùng

● Chức năng của trang web hoạt động tốt, không có lỗi phát sinh

2 Hướng phát triển của đề tài

Xây dựng thêm nhiều tính năng để phục vụ tốt hơn cho công tác quản

lý đoàn Có thể kể đến các tính năng sau:

● Gửi thông báo tới các tài khoản đoàn viên

● Phân loại kiểm soát các đoàn viên theo lớp sinh hoạt

● Phân loại, tìm kiếm thông tin đoàn viên

● Quyền chỉnh sửa trực tiếp thông tin các đoàn viên của ban cán sự đoàn

3 Tài liệu tham khảo.

● React JS Document

● Strapi CMS Document

● Chakra UI Document