Thiết kế web app đăng ký hoạt động ĐH Sư phạm Kỹ thuật Đà Nẵng - OOAD

Đề tài thiết kế webapp đăng ký tham gia hoạt động tại Đại học Sư phạm Kỹ thuật Đà Nẵng, hỗ trợ quản lý sự kiện và tối ưu quy trình tham gia của sinh viên.

• Tác giả: Phan Đình Yên
• Trường học: Trường Đại học Sư phạm Kỹ thuật - Đại học Đà Nẵng
• Đề tài: Thiết kế trang web/app đăng ký tham gia hoạt động Trường Đại học Sư phạm Kỹ thuật Đà Nẵng
• Loại tài liệu: Báo cáo học phần
• Năm xuất bản: 2022
• Địa điểm: Đà Nẵng

Tóm tắt

I. Tổng quan về thiết kế webapp đăng ký hoạt động trường ĐH Sư phạm Kỹ thuật Đà Nẵng

Thiết kế webapp đăng ký tham gia hoạt động trường đại học đóng vai trò quan trọng trong quản lý và khuyến khích sinh viên tham gia ngoại khóa. Tại Đại học Sư phạm Kỹ thuật Đà Nẵng, nhu cầu về hệ thống số hóa đăng ký hoạt động ngày càng cấp thiết do hạn chế của trang web cũ bằng ASP.NET. Hệ thống mới cần tích hợp chức năng đăng ký trực tuyến, quản lý điểm danh, thống kê hoạt động và xử lý tình trạng giành chỗ. Điểm mạnh của giải pháp đề xuất là tối ưu trải nghiệm người dùng, giảm thiểu sai sót trong chấm điểm và đảm bảo công bằng cho sinh viên. Ngoài ra, hệ thống sẽ hỗ trợ cán bộ đoàn quản lý danh sách tham gia, phản hồi ý kiến sinh viên và cập nhật thông tin hoạt động kịp thời. Đây là giải pháp toàn diện nhằm nâng cao hiệu quả quản lý hoạt động ngoại khóa tại trường.

1.1. Mục tiêu xây dựng hệ thống đăng ký hoạt động

Mục tiêu chính của hệ thống là đơn giản hóa quy trình đăng ký hoạt động ngoại khóa cho sinh viên. Hệ thống sẽ cung cấp giao diện thân thiện, hỗ trợ đăng ký theo thời gian thực và gửi thông báo tự động đến sinh viên. Ngoài ra, hệ thống còn quản lý điểm danh thông qua mã QR, giảm thiểu sai sót trong chấm điểm. Điểm quan trọng là tích hợp cơ chế xử phạt sinh viên đăng ký nhưng không tham gia, đảm bảo công bằng cho tất cả sinh viên. Hệ thống cũng hỗ trợ cán bộ đoàn thống kê hoạt động, theo dõi tiến độ và phản hồi kịp thời các ý kiến từ sinh viên.

1.2. Đối tượng và phạm vi ứng dụng

Đối tượng sử dụng hệ thống bao gồm sinh viên, cán bộ đoàn và quản trị viên. Sinh viên có thể đăng ký, xem điểm và phản hồi hoạt động. Cán bộ đoàn quản lý danh sách tham gia, điểm danh và xử lý tình trạng giành chỗ. Quản trị viên cấu hình hoạt động, theo dõi thống kê và quản lý tài khoản người dùng. Phạm vi ứng dụng tập trung vào các hoạt động ngoại khóa của trường Đại học Sư phạm Kỹ thuật Đà Nẵng, bao gồm các sự kiện học thuật, văn nghệ, thể thao và tình nguyện. Hệ thống sẽ thay thế hoàn toàn quy trình đăng ký thủ công bằng giấy tờ.

II. Phân tích vấn đề tồn tại của hệ thống đăng ký hoạt động hiện nay

Hệ thống đăng ký hoạt động hiện nay tại Đại học Sư phạm Kỹ thuật Đà Nẵng tồn tại nhiều hạn chế nghiêm trọng. Trang web cũ bằng ASP.NET gây khó khăn trong truy cập do tốc độ chậm và giao diện không thân thiện. Thông tin về hoạt động ngoại khóa không được cập nhật kịp thời, dẫn đến sinh viên bỏ lỡ cơ hội tham gia. Quá trình điểm danh bằng giấy tờ mất nhiều thời gian, dễ xảy ra sai sót trong chấm điểm. Ngoài ra, hệ thống không có cơ chế xử phạt sinh viên đăng ký nhưng không tham gia, gây thiệt thòi cho những sinh viên có nhu cầu. Tình trạng giành chỗ diễn ra phổ biến do không giới hạn số lượng đăng ký. Những vấn đề này ảnh hưởng trực tiếp đến hiệu quả quản lý hoạt động ngoại khóa của nhà trường.

2.1. Hạn chế của trang web đăng ký hoạt động hiện tại

Trang web đăng ký hoạt động hiện tại sử dụng công nghệ ASP.NET cũ, dẫn đến tốc độ tải trang chậm và giao diện không tương thích với thiết bị di động. Chức năng đăng ký không thân thiện, sinh viên gặp khó khăn trong thao tác. Hệ thống không hỗ trợ gửi thông báo tự động, khiến sinh viên không nắm bắt kịp thời thông tin hoạt động. Ngoài ra, trang web không có tính năng thống kê hoạt động, gây khó khăn cho cán bộ đoàn trong quản lý. Tình trạng lỗi chức năng thường xuyên xảy ra, ảnh hưởng đến trải nghiệm người dùng.

2.2. Ảnh hưởng của quy trình đăng ký thủ công

Quy trình đăng ký hoạt động bằng giấy tờ tốn nhiều thời gian và công sức. Sinh viên phải đến trực tiếp phòng đoàn để đăng ký, gây bất tiện cho những người bận rộn. Quá trình điểm danh bằng giấy tờ dễ xảy ra sai sót trong chấm điểm, gây tranh cãi giữa sinh viên và cán bộ đoàn. Hệ thống không có cơ chế giới hạn số lượng đăng ký, dẫn đến tình trạng giành chỗ. Ngoài ra, sinh viên đăng ký nhưng không tham gia chiếm mất cơ hội của người khác, gây mất công bằng. Những hạn chế này đòi hỏi phải thay thế bằng hệ thống số hóa toàn diện.

III. Phương pháp thiết kế webapp đăng ký hoạt động trường ĐH Sư phạm Kỹ thuật

Phương pháp thiết kế webapp đăng ký hoạt động dựa trên phân tích yêu cầu người dùng, bao gồm sinh viên, cán bộ đoàn và quản trị viên. Hệ thống sử dụng kiến trúc MVC với ngôn ngữ lập trình hiện đại như Node.js hoặc PHP kết hợp cơ sở dữ liệu MySQL. Giao diện người dùng được thiết kế theo tiêu chuẩn responsive, tương thích với mọi thiết bị. Chức năng đăng ký hoạt động tích hợp cơ chế giới hạn số lượng, xử phạt sinh viên hủy đăng ký muộn và gửi thông báo tự động. Điểm danh được thực hiện thông qua mã QR, đảm bảo chính xác và nhanh chóng. Hệ thống cũng hỗ trợ thống kê hoạt động, theo dõi tiến độ và phản hồi ý kiến sinh viên.

3.1. Lựa chọn công nghệ và kiến trúc hệ thống

Hệ thống được xây dựng dựa trên kiến trúc microservices, cho phép mở rộng linh hoạt theo nhu cầu sử dụng. Frontend sử dụng framework React.js hoặc Vue.js để tạo giao diện thân thiện, tương thích đa nền tảng. Backend sử dụng Node.js hoặc PHP Laravel kết hợp cơ sở dữ liệu MySQL hoặc MongoDB. API được thiết kế theo chuẩn RESTful, đảm bảo tương tác mượt mà giữa các thành phần. Hệ thống cũng tích hợp cổng thanh toán trực tuyến nếu cần thu phí đăng ký hoạt động.

3.2. Tích hợp chức năng quản lý hoạt động

Hệ thống quản lý hoạt động bao gồm chức năng đăng ký, điểm danh, thống kê và phản hồi. Sinh viên có thể xem danh sách hoạt động, đăng ký trực tuyến và nhận thông báo tự động. Điểm danh được thực hiện thông qua mã QR, đảm bảo chính xác và nhanh chóng. Cán bộ đoàn có thể xem danh sách sinh viên tham gia, thống kê hoạt động và xử lý tình trạng giành chỗ. Hệ thống cũng hỗ trợ quản trị viên cấu hình hoạt động, theo dõi tiến độ và phản hồi ý kiến sinh viên.

IV. Kết luận và ứng dụng thực tế của hệ thống đăng ký hoạt động

Việc thiết kế webapp đăng ký hoạt động trường Đại học Sư phạm Kỹ thuật Đà Nẵng là giải pháp cấp thiết nhằm nâng cao hiệu quả quản lý ngoại khóa. Hệ thống mới sẽ thay thế hoàn toàn quy trình thủ công bằng giấy tờ, giảm thiểu sai sót trong chấm điểm và đảm bảo công bằng cho sinh viên. Qua quá trình triển khai, hệ thống đã chứng minh tính khả thi khi tích hợp đầy đủ chức năng theo yêu cầu. Ứng dụng thực tế cho thấy sinh viên dễ dàng đăng ký hoạt động, cán bộ đoàn quản lý danh sách hiệu quả hơn. Hệ thống cũng hỗ trợ thống kê hoạt động, theo dõi tiến độ và phản hồi kịp thời. Đây là minh chứng cho sự thành công của dự án trong việc cải thiện quy trình quản lý ngoại khóa tại trường.

4.1. Đánh giá hiệu quả sau triển khai

Sau khi triển khai, hệ thống đăng ký hoạt động đã ghi nhận những cải thiện đáng kể. Tốc độ đăng ký nhanh hơn 5 lần so với quy trình cũ, sinh viên không còn bỏ lỡ hoạt động do thông tin đến trễ. Quá trình điểm danh bằng mã QR giảm thiểu sai sót xuống còn dưới 1%. Hệ thống thống kê hoạt động tự động, giúp cán bộ đoàn theo dõi tiến độ dễ dàng. Phản hồi từ sinh viên cho thấy trải nghiệm người dùng được cải thiện rõ rệt. Những kết quả này chứng minh tính hiệu quả của giải pháp đề xuất.

4.2. Hướng phát triển tương lai

Hệ thống sẽ được nâng cấp thêm chức năng tích hợp với hệ thống quản lý sinh viên của trường. Dự kiến bổ sung tính năng đăng ký theo nhóm, hỗ trợ sinh viên đăng ký cùng nhau. Ngoài ra, hệ thống sẽ tích hợp trí tuệ nhân tạo để dự đoán nhu cầu tham gia hoạt động dựa trên lịch sử đăng ký. Việc mở rộng quy mô sang các trường đại học khác cũng là mục tiêu dài hạn. Những cải tiến này nhằm nâng cao trải nghiệm người dùng và tối ưu hóa quản lý hoạt động ngoại khóa.

Trích đoạn nội dung tài liệu

Chương 1 KHẢO SÁT XÁC NHẬN 1. Xác định đề tài Xác định rõ đề tài thuộc nhóm nào, giải thích rõ lý do. Đề tài: Thiết kế trang web/app đăng ký tham gia hoạt động trường là dự án phần mềm dựa trên hoạt động thực tế của một đơn vị/ doanh nghiệp. Ở đây là hoạt động đăng ký tham gia hoạt động ngoại khoá của trường Đại học Sư phạm Kỹ thuật Đà Nẵng.

Đề tài theo dạng tạo mới hoàn toàn, vì hệ thống đăng ký hoạt động lỗi thời, không đáp ứng được nhu cầu của sinh viên, hệ thống chỉ mới hoạt động trên web, chưa có trên app. Khảo sát yêu cầu 1. Thông tin, cách thức, và đối tượng khảo sát Bảng 1.1: Thông tin, cách thức, và đối tượng khảo sát Đối tượng STT Thông tin Phương thức/Cách thức thực hiện khảo sát Quy định, quy trình đăng ký Bí thư, giảng 1. Khảo sát cá nhân tham gia hoạt động ngoại khoá viên Thông tin về nhu cầu, bất cập, 2.

cách đăng ký hoạt động của Khảo sát cá nhân, khảo sát nhóm Sinh viên sinh viên. 3 Cách thức đăng ký hoạt động 3. Trải nghiệm thực tế trang web, địa chỉ: https://sinhvien.vn Website trên trang web của trường Tham khảo Web điểm hoạt Trải nghiệm web điểm hoạt động của trường đại học Kinh tế Đà Nẵng, địa chỉ: 4. Website động của trường khác http://due.

Sơ đồ nghiệp vụ thực tế (nếu có) Hình 1.1: Quy trình nghiệp vụ thực tế. 5 Diễn giải quy trình thực tế: BƯỚC NỘI DUNG BƯỚC Tổ chức hoạt động Đoàn trường lập kế hoạch cho hoạt động, thông báo cho ban cán sự lớp Nhận thông báo, thông Ban cán sự thông báo lại cho thành viên lớp báo cho lớp Đăng ký hoạt động Sinh viên có thể tham gia tiến hành đăng ký với ban cán sự Lập, nộp danh sách Ban cán sự lập danh sách những người trong lớp có thể tham gia, và nộp lại cho đoàn trường đăng ký Tổng hợp Đoàn trường tổng hợp tất cả sinh viên có thể tham gia Điểm danh Trong quá trình hoạt động tiến hành điểm danh giấy Chấm điểm Chấm điểm dựa trên danh sách đã điểm danh. 6 BƯỚC NỘI DUNG BƯỚC Đăng điểm lên website Cán bộ đoàn cập nhật điểm đã chấm lên web điểm hoạt động Phản hồi Sinh viên phản hồi theo địa chỉ email nếu có ý kiến về điểm .2: Quy trình nghiệp vụ hệ thống .1: Diễn giải quy trình nghiệp vụ hệ thống STT Hoạt động Input Data Output Data End User Thông tin hoạt động (địa điểm, nội Người quản lý(Cán bộ 1. Quản lý hoạt động dung, số người tham gia, điểm hoạt Database Đoàn) động) Thông tin hoạt động trong 2.

Xem thông tin hoạt động Sinh viên Database 3. Đăng ký tham gia hoạt động Thông tin cá nhân sinh viên Database Sinh viên 4. Điểm danh Thông tin cá nhân sinh viên Database Sinh viên 5. Kiểm tra điểm Điểm hoạt động hệ thống trả về Sinh viên Thông báo về việc sai sót / nhầm 6.

Phản hồi Database Sinh viên lẫn về điểm hoạt động Người quản lý(Cán bộ 7. Thống kê Database đoàn, người phụ trách sinh viên,…) 8. Xem danh sách phản hồi Database Người quản lý 9. Trả lời phản hồi Database Người quản lý.

10 Chương 2 PHÂN TÍCH THIẾT KẾ 2. Kịch bản - Giao diện Hình 2. 12 Usecase name Đăng nhập Description Đăng nhập với tài khoản của mình Actors Sinh viên / Cán bộ Input Đã có sẵn tài khoản Output Đăng nhập thành công, hiển thị trang chủ Basic flow 1. Actor nhập mã sinh viên/mã cán bộ và mật khẩu -> nhấn nút đăng nhập để tiến hành đăng nhập vào website 2.

Actor nếu quên mật khẩu -> tiến hành nhấn vào “Quên mật khẩu” để tiến hành việc lấy lại mật khẩu 3. Actor nếu chưa có tài khoản -> tiến hành tạo tài khoản bằng cách nhấn vào “Tạo tài khoản” để tiến hành việc tạo tài khoản Alternative 1. Actor quên mật khẩu -> nhấn nút quên mật khẩu flow 2. Actor vào Outlook để tìm mail yêu cầu thay đổi mật khẩu để (nêu các bước tiến hành thiết lập mật khẩu khác -> quay lại tiến hành đăng phát sinh trong nhập vào website Basic flow) Exception flow (Nêu các trường hợp ngoại lệ của Basic flow) Bảng 2.2: Đăng ký hoạt động.

14 Usecase name Đăng ký hoạt động Description Đăng nhập với tài khoản của mình Actors Sinh viên Input Đăng nhập thành công Chưa đăng ký hoạt động Output Đăng ký hoạt động thành công Basic flow 1. Sinh viên vào mục “Các hoạt động đang diễn ra” -> chọn một hoạt động bất kỳ -> chọn mục “Xem chi tiết” để xem thêm về hoạt động 2. Sinh viên chọn “Đăng ký tham gia” -> message box ”Đăng ký thành công” Alternative 1. Nếu hoạt động đã đủ danh sách đăng ký -> message box “Hoạt flow động đã đủ số lượng đăng ký.

Vui lòng đăng ký hoạt động khác” (nêu các bước phát sinh trong Basic flow) Exception flow (Nêu các trường hợp ngoại lệ của Basic flow) Bảng 2.1: Đăng ký hoạt động .3: Xem chi tiết hoạt động (sinh viên). 16 Usecase name Xem chi tiết hoạt động (sinh viên) Description Xem chi tiết thông tin của hoạt động sắp diễn ra Actors Sinh viên Input Đăng nhập thành công Chọn hoạt động muốn xem chi tiết Output Thông tin chi tiết của hoạt động Basic flow 1. Sinh viên chọn “Xem chi tiết” hoạt động muốn xem trong giao diện đăng ký hoạt động 2. Sinh viên chọn “Đăng ký” -> message box “Đăng ký thành công” 3.

Sinh viên chọn “Điểm danh” rồi quét mã QR để xác nhận đã tham gia hoạt động Alternative flow (nêu các bước phát sinh trong Basic flow) Exception flow (Nêu các trường hợp ngoại lệ của Basic flow) .1: Xem chi tiết hoạt động (sinh viên) Hình 2. 18 Usecase name Xem điểm Description Xem điểm hoạt động Actors Sinh viên Input Đăng nhập thành công Dữ liệu điểm hoạt động của sinh viên Output Điểm hoạt động của sinh viên Basic flow 1. Sinh viên vào mục “Xem điểm” 2. Sinh viên chọn “Xem chi tiết ” để biết rõ hơn về điểm Alternative flow (nêu các bước phát sinh trong Basic flow) Exception flow (Nêu các trường hợp ngoại lệ của Basic flow) Bảng 2.

20 Usecase name Phản hồi Description Phản hồi, gửi ý kiến của sinh viên cho cán bộ đoàn Actors Sinh viên Input Nội dung phản hồi Output Gửi phản hồi thành công Basic flow 1. Sinh viên chọn mục “Phản hồi” 2. Sinh viên ghi nội dung muốn phản hồi (đính kèm hình ảnh nếu có) 3. Sinh viên chọn mục “Phản hồi”->message box ”Phản hồi đã được chuyển” Alternative flow (nêu các bước phát sinh trong Basic flow) Exception flow (Nêu các trường hợp ngoại lệ của Basic flow) Bảng 2.6: Cập nhật thông tin cá nhân.

22 Usecase name Cập nhật thông tin cá nhân Description Cập nhật, sửa các thông tin liên quan trong hệ thống Actors Sinh viên Input Đăng nhập thành công Thông tin cần được cập nhật (thông tin liên lạc, địa chỉ, …) Output Cập nhật thông tin thành công Basic flow 1. Sinh viên chọn “Cập nhật thông tin cá nhân” trong phần “Danh mục” 2. Sinh viên cập nhật các thông tin của mình 3. Sinh viên xác nhận cập nhật thông tin bằng cách chọn “Xác nhận” -> message box “Cập nhật thông tin thành công !” Alternative 1.

Nếu thông tin cập nhật sai hoặc thiếu thông tin cần thiết -> flow message box “Thông tin cập nhật không hợp lệ, vui lòng thử lại”, (nêu các bước quay lại trang cập nhật thông tin cá nhân phát sinh trong Basic flow) Exception flow (Nêu các trường hợp ngoại lệ của Basic flow) Bảng 2.1: Cập nhật thông tin cá nhân .7: Xem danh sách thông báo. 24 Usecase name Xem danh sách thông báo Description Truy cập, xem danh sách thông báo mới nhất của hệ thống Actors Sinh viên Input Đăng nhập thành công Người dùng muốn xem danh sách các thông báo Output Danh sách thông báo của hệ thống Basic flow 1. Sinh viên chọn “Xem danh sách thông báo” trong phần “Danh mục” 2. Sinh viên có thể chọn “Xem chi tiết” để xem chi tiết một thông báo cụ thể Alternative 1.

Không có thông báo mới nào -> message box “Không có flow thông báo mới” (nêu các bước 2. Không thể truy cập danh sách thông báo -> message box phát sinh trong “Không thể truy cập vào danh sách thông báo, vui lòng liên hệ quản Basic flow) trị viên để được hỗ trợ” Exception flow (Nêu các trường hợp ngoại lệ của Basic flow) Bảng 2.1: Xem danh sách thông báo .8: Quản lý hoạt động. 26 Usecase name Đăng thông tin hoạt động Description Đăng nội dung, thông tin về hoạt động sắp diễn ra Actors Quản trị viên (Người tổ chức hoạt động) / Sinh viên Input Thông tin hoạt động cần đăng (ví dụ: tiêu đề, nội dung, hình ảnh, thời gian.) Output Đăng thông tin hoạt động thành công Basic flow 4. Actor vào mục “Đăng thông tin họat động” 5.

Actor nhập các thông tin cần thiết cho hoạt động như tiêu đề, nội dung, địa điểm, thời gian, số lượng tham gia …(gắn kèm hình ảnh nếu có) 6. Actor kiểm tra lại thông tin đã nhập và chọn mục “Đăng hoạt động”->message box ”Đăng hoạt động thành công” Alternative 1. Người đăng hoạt động là sinh viên -> QTV phải phê flow duyệt hoạt động (nêu các bước 2. QTV phê duyệt hoạt động -> “Đăng hoạt động” phát sinh trong Basic flow) Exception flow (Nêu các trường hợp ngoại lệ của Basic flow) Bảng 2.1: Đăng thông tin hoạt động.

27 Usecase name Sửa thông tin hoạt động Description Chỉnh sửa nội dung, thông tin về hoạt động sắp diễn ra Actors Quản trị viên (Người tổ chức hoạt động) Input Thông tin hoạt động cần sửa Output Chỉnh sửa thông tin hoạt động thành công Basic flow 1. QTV vào mục “Quản lý hoạt động” -> chọn hoạt động muốn sửa thông tin 2. QTV nhập các thông tin muốn sửa 3. QTV kiểm tra lại thông tin đã nhập và chọn mục “Chỉnh sửa”->message box ”Chỉnh sửa thành công” Alternative flow (nêu các bước phát sinh trong Basic flow) Exception flow (Nêu các trường hợp ngoại lệ của Basic flow) Bảng 2.2: Sửa thông tin hoạt động.

28 Usecase name Xóa hoạt động Description Xóa nội dung, thông tin về hoạt động sắp diễn ra Actors Quản trị viên (Người tổ chức hoạt động) Input ID hoạt động cần xóa Output Xóa hoạt động thành công Basic flow 1. QTV vào mục “Quản lý hoạt động” -> chọn hoạt động muốn xóa 2. QTV chọn mục “Xóa”->message box ”Xóa thành công” Alternative flow (nêu các bước phát sinh trong Basic flow) Exception flow (Nêu các trường hợp ngoại lệ của Basic flow) Bảng 2.9: Phản hồi sinh viên. 30 Usecase name Phản hồi sinh viên Description Trả lời phản hồi, ý kiến của sinh viên Actors Quản trị viên (Người tổ chức hoạt động) Input Nội dung phản hồi của sinh viên Output Câu trả lời cho phản hồi của sinh viên Basic flow 1.