CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh Phúc ******* PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Họ và tên Sinh viên: Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng w
KẾ HOẠCH THỰC HIỆN
STT THỜI GIAN CÔNG VIỆC HOÀN THÀNH
1 3/3/2024 - 10/3/2024 Lên kế hoạch thực hiện 8/3/2024
3 17/3/2024 - 23/3/2024 Thiết kế và xây dựng database 20/3/2024
5 2/4/2024 - 29/4/2024 Thiết kế và xây dựng APIs 3/5/2024
6 2/5/2024 - 15/5/2024 Tích hợp APIs backend với frontend 17/5/2024
7 16/5/2024 - 15/6/2024 Kiểm thử và sửa lỗi 17/6/2024
Bảng 1: Bảng kế hoạch thực hiện
3/3/2024 23/3/2024 12/4/2024 2/5/2024 22/5/2024 11/6/2024 1/7/2024 21/7/2024 Lên kế hoạch thực hiện
Thiết kế và xây dựng database
Thiết kế giao diện Thiết kế và xây dựng APIs
Tích hợp APIs backend với frontend
Kiểm thử và sửa lỗi
NỘI DUNG
MERN stack là sự kết hợp của các công nghệ phổ biến hiện nay, bao gồm MongoDB, ExpressJS, ReactJS và NodeJS, tất cả đều liên quan đến JavaScript Lập trình viên thường sử dụng MERN stack để phát triển ứng dụng React Universal.
1.1.2 NodeJS là gì? a Giới thiệu NodeJS
NodeJS là một môi trường runtime mã nguồn mở đa nền tảng, cho phép chạy các ứng dụng web bên ngoài trình duyệt Được phát triển bởi Ryan Dahl vào năm 2009, NodeJS là giải pháp lý tưởng cho các ứng dụng yêu cầu xử lý nhiều dữ liệu nhờ vào mô hình hướng sự kiện không đồng bộ.
CƠ SỞ LÝ THUYẾT
Các khái niệm cơ bản
MERN stack là sự kết hợp của các công nghệ JavaScript phổ biến nhất hiện nay, bao gồm MongoDB, ExpressJS, ReactJS và NodeJS Lập trình viên thường sử dụng MERN stack để phát triển ứng dụng React Universal hiệu quả.
1.1.2 NodeJS là gì? a Giới thiệu NodeJS
NodeJS là môi trường runtime JavaScript mã nguồn mở, đa nền tảng, cho phép chạy ứng dụng web bên ngoài trình duyệt Được phát triển bởi Ryan Dahl vào năm 2009, NodeJS là giải pháp lý tưởng cho các ứng dụng yêu cầu xử lý dữ liệu lớn nhờ vào mô hình hướng sự kiện không đồng bộ.
NodeJS, được phát triển bởi lập trình viên Ryan Dahl vào năm 2009, lần đầu tiên được thiết kế cho hệ điều hành Linux Công nghệ này không chỉ được duy trì và phát triển bởi Ryan Dahl mà còn nhận được sự tài trợ từ Joyent.
Tháng 1 năm 2010, trình quản lý gói npm cho NodeJS được ra mắt
Tháng 6 năm 2011, phiên bản Windows gốc của NodeJS được triển khai bởi Microsoft và Joyent
Tháng 12 năm 2014, do xung đột nội bộ nên NodeJS bị chia rẽ, IO.js được hình thành
Tháng 6 năm 2015, cộng đồng IO.js và cộng đồng NodeJS đã thống nhất bỏ phiếu để hợp tác với nhau dưới dạng NodeJS Foundation c Ưu và nhược điểm Ưu điểm:
- Node.js sử dụng JavaScript cả trên server-side và client-side, giúp đơn giản hóa quá trình phát triển và chia sẻ mã nguồn
- Hiệu suất cao: Node.js sử dụng kiến trúc non-blocking I/O, giúp tối ưu hóa hiệu suất cho các ứng dụng xử lý nhiều kết nối đồng thời
Node.js là lựa chọn lý tưởng cho các ứng dụng yêu cầu xử lý thời gian thực, bao gồm trò chơi trực tuyến, ứng dụng trò chơi và chat trực tuyến.
Node.js là công cụ lý tưởng để nhanh chóng xây dựng sản phẩm MVP (Minimum Viable Product), giúp doanh nghiệp rút ngắn thời gian đưa sản phẩm ra thị trường.
Quản lý dự án là yếu tố then chốt trong việc xử lý ứng dụng lớn và phức tạp; nếu không có cấu trúc dự án hợp lý, việc quản lý mã nguồn sẽ gặp nhiều khó khăn.
Node.js không phải là lựa chọn tối ưu cho các ứng dụng yêu cầu xử lý CPU cao, chẳng hạn như các thuật toán phức tạp và các tác vụ tính toán nặng.
10 d Ứng dụng trong đề tài
- Hệ thống APIs: Tương tác với database và trả về dữ liệu cho người dùng
- face-api.js: Cung cấp các chức năng nhận diện khuôn mặt và lưu trữ thông tin khuôn mặt một cách dễ dàng và hiệu quả
NodeJS là lựa chọn lý tưởng để truy vấn cơ sở dữ liệu NoSQL như MongoDB, nhờ vào sự hỗ trợ mạnh mẽ từ nhiều thư viện.
1.1.3 ExpressJS là gì? a Giới thiệu ExpressJS
Express.js là một framework mạnh mẽ được phát triển trên nền tảng Node.js, giúp xây dựng ứng dụng web và di động hiệu quả Nó hỗ trợ các phương thức HTTP và middleware, cho phép tạo ra các API dễ sử dụng và linh hoạt Lịch sử phát triển của Express.js đã chứng minh sự đóng góp quan trọng của nó trong việc phát triển các ứng dụng hiện đại.
Năm 2009, TJ Holowaychuk đã phát triển Express, một framework nhỏ gọn để xây dựng ứng dụng web trong Node.js Ban đầu, Express được xem như một phần mở rộng của Connect, một framework middleware cho Node.js.
Vào năm 2010, phiên bản đầu tiên của Express (Express 1.0) đã được phát hành, cho phép các nhà phát triển dễ dàng xây dựng và quản lý các tuyến đường (routes) cũng như middleware trong ứng dụng web.
Vào năm 2014, Express 4.0 đã được phát hành, mang đến nhiều cải tiến lớn so với phiên bản trước Phiên bản này tách riêng phần middleware của Connect và tích hợp trực tiếp vào Express, nâng cao tính linh hoạt và hiệu suất của framework.
Kể từ năm 2014, Express đã phát triển mạnh mẽ và trở thành một trong những framework phát triển web phổ biến nhất trong cộng đồng Node.js Với một cộng đồng lớn và năng động, Express cung cấp nhiều module và middleware hữu ích cho việc xây dựng ứng dụng web.
11 c Ưu và nhược điểm Ưu điểm
ExpressJS nổi bật với cú pháp đơn giản và dễ hiểu, cho phép lập trình viên nhanh chóng nắm bắt và triển khai các tính năng một cách hiệu quả.
- Linh hoạt: ExpressJS không áp đặt một cấu trúc cụ thể, cho phép lập trình viên tự do tùy chỉnh và xây dựng ứng dụng theo ý muốn
MERN Stack hoạt động như thế nào?
MERN cho phép chúng ta dễ dàng xây dựng kiến trúc 3 tầng (frontend, backend, database) hoàn toàn sử dụng JavaScript và JSON
Hình 3: Kiến trúc MERN Stack
React.js là thư viện JavaScript phổ biến cho frontend trong MERN Stack, cho phép xây dựng giao diện người dùng tương tác Với việc sử dụng các thành phần (components), React giúp phân chia giao diện thành các phần nhỏ, dễ quản lý và tái sử dụng Thư viện này cũng hỗ trợ quản lý trạng thái ứng dụng và tương tác với API phía máy chủ thông qua các yêu cầu HTTP.
ExpressJS là một framework web ứng dụng phía máy chủ cho Node.js, cung cấp các công cụ và tính năng như định tuyến, middleware và quản lý yêu cầu HTTP Nó hỗ trợ xây dựng các tuyến đường và xử lý logic của ứng dụng Bằng cách thực hiện các HTTP XML Request (XHR), GET hoặc POST từ front-end React.js, ExpressJS giúp xây dựng API, xử lý yêu cầu và gửi dữ liệu đến giao diện người dùng, đồng thời truy cập và cập nhật dữ liệu trong cơ sở dữ liệu MongoDB.
MongoDB là một cơ sở dữ liệu NoSQL lý tưởng cho việc lưu trữ dữ liệu dưới dạng tài liệu JSON, được gửi đến máy chủ ExpressJS Nó được sử dụng để lưu trữ và truy xuất dữ liệu trong ứng dụng MERN stack, với khả năng lưu trữ dữ liệu cả trên máy local và trên cloud thông qua MongoDB Atlas.
Cấu trúc của một MERN Stack
MERN utilizes Webpack for module bundling, offering four distinct configuration files: webpack.config.dev.js for development, webpack.config.prod.js for production, webpack.config.server.js for server bundling in production, and webpack.config.babel.js for integrating babel-plugin-webpack-loaders to render assets through Webpack.
+ Package.json: Tệp tin chứa các thông tin về các module và dependencies của server + Node_modules: Thư mục chứa các module và dependencies của server
+ Server.js: Tệp tin chứa mã nguồn của server, bao gồm cấu hình và các tuyến đường (routes) của ứng dụng
Thư mục Routes chứa các tệp tin quản lý các tuyến đường của ứng dụng, trong khi thư mục Controllers bao gồm các tệp tin xử lý logic cho những tuyến đường này Đồng thời, thư mục Models tập trung vào việc mô hình hóa dữ liệu và tương tác với cơ sở dữ liệu.
+ Package.json: Tệp tin chứa các thông tin về các module và dependencies của client + Node_modules: Thư mục chứa các module và dependencies của client
Thư mục Public chứa các tệp tin tĩnh như HTML, CSS và hình ảnh của ứng dụng Thư mục Components bao gồm các thành phần giao diện người dùng, trong khi thư mục Pages lưu trữ các trang của ứng dụng.
+ Services: Thư mục chứa các tệp tin xử lý tương tác với API của server
+ App.js: Tệp tin gốc của ứng dụng React, chứa cấu trúc chính của giao diện
+ Index.js: Tệp tin khởi động ứng dụng React
Tại sao chọn MERN Stack
MERN Stack được thiết kế nhằm nâng cao trải nghiệm phát triển ứng dụng mượt mà hơn Đây là một tập hợp các framework, cơ sở dữ liệu và môi trường chạy được xây dựng trên nền tảng JavaScript Công nghệ này cung cấp giải pháp end-to-end cho các nhà phát triển và đang ngày càng trở nên phổ biến.
Lợi ích của việc chọn MERN Stack:
MERN Stack sử dụng JavaScript làm ngôn ngữ chính cho cả backend và frontend, giúp giảm sự phân tách giữa các nhóm phát triển và tăng tính nhất quán trong mã nguồn của toàn bộ ứng dụng.
MERN Stack là một bộ công nghệ mã nguồn mở bao gồm MongoDB, Express, React và Node.js, nổi bật với sự phát triển nhanh chóng và linh hoạt Với cộng đồng lớn hỗ trợ, các công cụ này cung cấp nhiều module và thư viện phong phú, giúp tối ưu hóa thời gian và công sức trong quá trình xây dựng ứng dụng web.
MERN Stack được thiết kế để tích hợp dễ dàng, với Express và Node.js tạo ra môi trường chạy phía máy chủ mạnh mẽ React cung cấp giao diện người dùng tương tác, trong khi MongoDB là cơ sở dữ liệu linh hoạt và dễ sử dụng với JavaScript.
Xây dựng ứng dụng đơn trang (Single-Page Applications - SPA) với MERN Stack mang lại hiệu quả cao nhờ vào React Các ứng dụng SPA cải thiện trải nghiệm người dùng bằng cách tải lại nội dung một cách mượt mà và giảm thiểu thời gian phản hồi.
Với MERN Stack, việc phát triển ứng dụng đa nền tảng trở nên dễ dàng, cho phép ứng dụng hoạt động trên nhiều thiết bị như máy tính để bàn, di động và web Điều này không chỉ nâng cao khả năng tiếp cận người dùng mà còn mở rộng phạm vi sử dụng của ứng dụng, mang lại lợi ích lớn cho doanh nghiệp.
MÔ TẢ PHẦN MỀM
Đặc tả đề tài
2.1.1 Mô tả chung về hệ thống website hỗ trợ thanh tra trong các kỳ thi
Hệ thống website giám sát kỳ thi học kỳ cho phép thanh tra tìm kiếm và xem thông tin sinh viên, phòng thi, cũng như điểm danh sinh viên trong phòng thi Ngoài ra, hệ thống còn hỗ trợ gửi báo cáo và biên bản, đồng thời quản lý thông tin về phòng thi, sinh viên và thanh tra một cách hiệu quả.
2.1.2 Các tính năng có trong website
- Ngôn ngữ lập trình: JavaScript
- Hệ thống cơ sở dữ liệu: MongoDB
Hệ thống website có những chức năng lớn sau:
Các chức năng dành cho admin Đăng nhập, đăng xuất Chức năng đăng nhập: dùng để đăng nhập vào hệ thống
Chức năng đăng xuất: dùng để thoát khỏi hệ thống Quản lý báo cáo Xem thông tin báo cáo
Quản lý phòng thi Xem thông tin phòng thi, lịch thi Đổ dữ liệu lịch thi
Xem và quản lý thông tin sinh viên, bao gồm thêm và sửa đổi thông tin cá nhân Hỗ trợ nhập danh sách sinh viên và hình ảnh liên quan Cung cấp tính năng nhận diện khuôn mặt bằng cách train hình ảnh của sinh viên.
Xem thông tin thanh tra Thêm và sửa thông tin thanh tra Import danh sách thanh tra
Xem thông tin tài khoản
Thêm và sửa thông tin tài khoản Đặt lại mật khẩu
Ban và unban tài khoản
Các chức năng dành cho phòng đào tạo Đăng nhập, đăng xuất
Chức năng đăng nhập: dùng để đăng nhập vào hệ thống Chức năng đăng xuất: dùng để thoát khỏi hệ thống Quản lý phòng thi
Xem thông tin phòng thi, lịch thi Upload file lịch thi
Các chức năng dành cho thanh tra Đăng nhập, đăng xuất Chức năng đăng nhập: dùng để đăng nhập vào hệ thống
Chức năng đăng xuất: dùng để thoát khỏi hệ thống
Quản lý sinh viên Xem thông tin sinh viên
Tìm kiếm phòng thi Xem thông tin phòng thi, lịch thi Điểm danh sinh viên
Xuất thông tin phòng thi ra file excel Nhận diện khuôn mặt Lấy thông tin khuôn mặt đã được training
Xem thông tin báo cáo Tạo báo cáo
Bảng 3: Chức năng của Website
Mô hình Usecase
2.2.1 Xác định tác nhân, function và Usecase
Qua khảo sát và tham khảo tài liệu, cùng với thảo luận nhóm, website hỗ trợ thanh tra trong các kỳ thi sẽ bao gồm các tác nhân và nhóm chức năng như sau:
STT Tác nhân Function Usecase
Admin Đăng nhập vào hệ thống Đăng nhập
Admin - Xem thông tin báo cáo
Quản lý báo cáo Thanh tra
- Xem thông tin báo cáo
Admin - Xem thông tin phòng thi
- Đổ dữ liệu lịch thi
Phòng đào tạo - Xem thông tin phòng thi
- Upload file lịch thi
- Cảnh báo sinh viên nghi vấn
- Xuất thông tin phòng thi ra file excel
- Xem thông tin sinh viên
- Thêm và sửa thông tin sinh viên
- Import danh sách sinh viên
- Import hình ảnh sinh viên Quản lý sinh viên
Thanh tra - Tìm kiếm sinh viên
- Xem thông tin sinh viên
Admin Train dữ liệu hình ảnh của sinh viên
Nhận diện khuôn mặt Thanh tra Lấy thông tin khuôn mặt đã được train
- Xem thông tin thanh tra
- Thêm và sửa thông tin thanh tra
- Import danh sách thanh tra
- Xem thông tin tài khoản
- Thêm và sửa thông tin tài khoản
- Ban và unban tài khoản
Bảng 4: Tác nhân, Function và Usecase
2.2.2 Lược đồ Usecase a) Usecase tổng quan
Hình 4: Usecase tổng quan b) Usecase đăng nhập
23 c) Usecase quản lý báo cáo
Hình 6: Usecase quản lý báo cáo d) Usecase quản lý phòng thi
Hình 7: Usecase quản lý phòng thi
24 e) Usecase quản lý sinh viên
Hình 8: Use case quản lý sinh viên f) Usecase nhận diện khuôn mặt
Hình 9: Usecase nhận diện khuôn mặt
25 g) Usecase Quản lý thanh tra
Hình 10: Usecase quản lý thanh tra h) Usecase Quản lý tài khoản
Hình 11: Usecase quản lý tài khoản
Description Cho phép người dùng đăng nhập vào tài khoản khi bắt đầu sử dụng Actor Thanh tra, Admin, Phòng đào tạo
Trigger Người dùng muốn đăng nhập vào website
Pre-Condition Người dùng đã có tài khoản
Post-Condition Chuyển đến trang chủ hoặc thông báo lỗi
1 Hệ thống hiển thị trang đăng nhập
2 Điền Tài khoản và Mật khẩu
3 Xác nhận đăng nhập bằng cách nhấn nút Login
4 Lưu session và giữ trạng thái đăng nhập
1 Đăng nhập không thành công:
- Hệ thống kiểm tra thông tin trên TextBox sai
- Hệ thống thông báo tới người dùng
Bảng 5: Usecase Diagram Đăng nhập
27 b) Quản lý báo cáo Admin
Usecase Name Quản lý báo cáo
Description Hiển thị các báo cáo được thanh tra submit lên hệ thống
Trigger Người quản trị xem các biên bản hoặc báo cáo sự cố được thanh tra gửi về Pre-Condition Tài khoản có quyền quản trị
Post-Condition Hiển thị các báo cáo ở dạng bảng và xem chi tiết của từng báo cáo
2 Chọn các điều kiện để lọc báo cáo
3 Thực hiện subflow Load Reports
4 Thực hiện subflow Show Reports
1 Hệ thống kiểm tra các điều kiện lọc đã được chọn
2 Hệ thống kiểm tra tài khoản có quyền hay không
3 Hệ thống hiển thị báo cáo của phòng thi theo điều kiện lọc
1 Người quản trị nhấn vào báo cáo muốn xem
2 Hệ thống kiểm tra quyền của người dùng
3 Hệ thống hiển thị thông tin chi tiết báo cáo gồm loại báo cáo, ghi chú, hình ảnh của báo cáo
1 Lấy thông tin báo cáo không thành công:
- Hệ thống thông báo tới người dùng
Bảng 6: Usecase Diagram Quản lý báo cáo Admin
28 c) Quản lý báo cáo Thanh tra
Usecase Name Quản lý báo cáo
Description Hiển thị thông tin của báo cáo
Trigger Người dùng muốn xem, tạo, chỉnh sửa báo cáo
Pre-Condition Tài khoản đăng nhập với quyền thanh tra
Post-Condition Hiển thị báo cáo, tạo và cập nhật báo cáo
1 Người truy cập vào phòng thi của ngày thi hôm đó
2 Thực hiện subflow Load Reports
3 Thực hiện subflow Show Report
4 Thực hiện subflow Add Report
5 Hệ thống lưu lại thông tin
1 Hệ thống kiểm tra tài khoản có quyền hay không
2 Hệ thống hiển thị số lượng báo cáo của phòng thi
3 Hệ thống hiển thị một số thông tin như loại báo cáo, note của báo cáo khi người dùng ấn vào nút “Báo cáo”
4 Nhấn icon xóa ở cuối dòng để xóa báo cáo
1 Người dùng nhấn vào báo cáo muốn xem
2 Hệ thống kiểm tra quyền của người dùng
3 Hệ thống hiển thị thông tin báo cáo gồm loại báo cáo, ghi chú, hình ảnh của báo cáo
4 Người dùng nhập thông tin muốn thay đổi
5 Xác nhận chỉnh sửa bằng nút “Chỉnh sửa”
1 Người dùng chọn icon + để tạo báo cáo
2 Hệ thống hiển thị thông tin của báo cáo trên các textbox
3 Người dùng nhập thông tin muốn thay đổi
4 Người dùng xác nhận thay đổi bằng cách nhấn nút “Tạo báo cáo”
1 Lấy thông tin báo cáo không thành công:
- Hệ thống thông báo tới người dùng
2 Tạo hoặc chỉnh sửa báo cáo không thành công:
- Hệ thống kiểm tra thông tin trên TextBox không có thông tin
- Hệ thống thông báo tới người dùng
Bảng 7: Usecase Diagram Quản lý báo cáo Thanh tra d) Quản lý phòng thi Admin
Usecase Name Quản lý phòng thi
Description Xem lịch thi và đổ dữ liệu lịch thi
Trigger Quản trị muốn xem lịch thi hoặc đổ dữ liệu lịch thi mới
Pre-Condition Tài khoản có quyền quản trị
Post-Condition Hiển thị lịch thi, lịch thi được đổ vào thành công
1 Chọn menu lịch thi
2 Thực hiện subflow Search Exams
3 Thực hiện subflow Import Exams
1 Hệ thống kiểm tra quyền của người dùng
2 Hệ thống lấy thông tin của các năm
3 Người dùng chọn năm, kỳ, ngày, khu vực, thời gian và phòng thi từ các ô select để lấy đúng phòng thi mong đợi
4 Hệ thống hiển thị thông tin phòng thi
1 Hệ thống kiểm tra quyền của người dùng
2 Hệ thống lấy danh sách các file đã được PĐT upload
3 Quản trị viên chọn file để đổ dữ liệu lịch thi
4 Hệ thống ghi dữ liệu và thông báo
1 Lấy lịch thi không thành công:
- Trang web báo lỗi khi lấy lịch thi
2 Lấy danh sách file không thành công:
- Trang web báo lỗi khi lấy danh sách file
3 Đổ dữ liệu không thành công:
- Trang web báo lỗi khi đọc/ghi dữ liệu không thành công.
Bảng 8: Usecase Diagram Quản lý phòng thi Admin e) Quản lý phòng thi Phòng đào tạo
Usecase Name Quản lý lịch thi
Description Xem lịch thi hoặc upload file lịch thi lên hệ thống
Trigger Phòng đào tạo muốn xem lịch thi hoặc tải file lên hệ thống
Pre-Condition Tài khoản có quyền phòng đào tạo
Post-Condition Hiển thị lịch thi, đăng tải file thành công
1 Chọn menu lịch thi
2 Thực hiện subflow Search Exams
3 Thực hiện subflow Upload Exams Files
1 Hệ thống kiểm tra quyền của người dùng
2 Hệ thống lấy thông tin của các năm
3 Người dùng chọn năm, kỳ, ngày, khu vực, thời gian và phòng thi từ các ô select để lấy đúng phòng thi mong đợi
4 Hệ thống hiển thị thông tin phòng thi S2: Upload Exams Files
1 Hệ thống kiểm tra quyền của người dùng
2 Hệ thống lấy danh sách các file đã được PĐT upload
3 Phòng đào tạo chọn file để tải lên
4 Hệ thống ghi lưu file và thông báo
1 Lấy lịch thi không thành công:
- Trang web báo lỗi khi lấy lịch thi
2 Lấy danh sách file không thành công:
- Trang web báo lỗi khi lấy danh sách file
3 Tải file lên không thành công:
- Trang web báo lỗi khi có lỗi trong quá trình đăng tải.
Bảng 9: Usecase Diagram Quản lý phòng thi Phòng đào tạo f) Quản lý phòng thi Thanh tra
Usecase Name Quản lý phòng thi
Description Xem thông tin phòng thi và điểm danh sinh viên
Trigger User muốn xem thông tin phòng thi và điểm danh sinh viên Pre-Condition Tài khoản đăng nhập với quyền thanh tra
Post-Condition Hiển thị các bài viết và các chức năng liên quan
1 Chọn chức năng Tra cứu phòng thi
2 Thực hiện subflow Search Exams
3 Chọn chức năng Lịch thi hôm nay
4 Thực hiện subflow Suspicious Students
6 Thực hiện subflow Export Excel
7 Hệ thống lưu lại thông tin
1 Hệ thống kiểm tra quyền của người dùng
2 Hệ thống lấy thông tin của các năm
3 Người dùng chọn năm, kỳ, ngày, khu vực, thời gian và phòng thi từ các ô select để lấy đúng phòng thi mong đợi
4 Hệ thống hiển thị thông tin phòng thi S2: Suspicious Students
1 Hệ thống kiểm tra quyền của người dùng
2 Hệ thống lấy thông tin của các sinh viên thi 2 ca
4 Hệ thống hiển thị thông tin phòng thi S3: Attendance
1 Người dùng chọn phòng thi
2 Hệ thống kiểm tra quyền của người dùng
3 Hệ thống hiển thị thông tin của phòng thi
4 Người dùng chọn điểm danh để điểm danh sinh viên trong phòng thi
5 Hệ thống lấy thông tin camera và hiển thị khung điểm danh
6 Sinh viên đưa khuôn mặt vào camera để hệ thống lấy thông tin và điểm danh
7 Người dùng chọn mục hình ảnh và chọn hình ảnh điểm danh
8 Hệ thống lấy thông tin từ hình ảnh và điểm danh cho sinh viên trong ảnh
9 Hệ thống lưu lại thông tin
1 Người dùng chọn ngày thi
2 Hệ thống lấy thông tin của các phòng thi
3 Người dùng nhấn nút “Xuất file excel”
4 Hệ thống download file excel chứa thông tin của các phòng thi về máy của người dùng
5 Chọn một phòng thi và nhấn nút “Xuất file excel” để download file excel chứa thông tin của phòng thi đó
Alternative flow 1 Lấy thông tin camera không thành công:
- Trang web hiển thị thông báo lỗi khi lấy thông tin camera
Bảng 10: Usecase Diagram Quản lý phòng thi Thanh tra g) Quản lý sinh viên Admin
Usecase Name Quản lý sinh viên
Description Xem, tìm kiếm, thêm, sửa thông tin sinh viên
Trigger Quản trị muốn xem/sửa/thêm thông tin sinh viên hoặc tải hình ảnh lên hệ thống Pre-Condition Tài khoản có quyền quản trị
Post-Condition Hiển thị sinh viên hoặc import thành công
1 Người dùng chọn menu sinh viên
2 Thực hiện subflow Load Students
3 Thực hiện subflow Search Students
4 Thực hiện subflow View Student
5 Thực hiện subflow Modify Students
6 Thực hiện subflow Import Students
7 Thực hiện subflow Import Images
1 Hệ thống kiểm tra quyền của người dùng
2 Hiển thị danh sách sinh viên S2: Search Students
1 Người dùng nhập mã số hoặc tên của sinh viên cần tìm kiếm
2 Nhấn nút search hoặc enter để tìm kiếm sinh viên
3 Hệ thống kiểm tra quyền của người dùng
4 Hệ thống hiển thị các sinh viên được tìm kiếm S3: View Student
1 Người dùng nhấn vào 1 sinh viên
2 Hệ thống hiển thị thông tin chi tiết của 1 sinh viên S4: Modify Students
1 Người dùng nhấn thêm hoặc chỉnh sửa 1 sinh viên
2 Người dùng nhập thông tin
3 Hệ thống kiểm tra quyền của người dùng
4 Hệ thống thêm hoặc cập nhật dữ liệu và thông báo S5: Import Students
1 Người dùng nhấn vào nút Import sinh viên
2 Người dùng chọn file csv chứa thông tin sinh viên và tải lên
3 Hệ thống kiểm tra quyền của người dùng
4 Hệ thống đọc file và ghi dữ liệu hợp lệ vào csdl
5 Thông báo về cho người dùng S6: Import Images
1 Người dùng nhấn vào nút Import hình ảnh của sinh viên
2 Người dùng chọn file nén chứa các hình ảnh của sinh viên và tải lên
3 Hệ thống kiểm tra quyền của người dùng
4 Hệ thống lưu các file và phân loại theo mã số sinh viên
5 Thông báo về cho người dùng
1 Tìm kiếm không thành công
- Hệ thống kiểm tra thông tin trên TextBox có nội dung nào hay không
2 Tải file lên không thành công:
- Hệ thống thông báo lỗi khi có vấn đề trong lúc tải file
3 Thêm, cập nhật sinh viên không thành công:
- Hệ thống thông báo lỗi khi có vấn đề trong lúc ghi dữ liệu
Bảng 11: Usecase Diagram Quản lý sinh viên Admin h) Quản lý sinh viên Thanh tra
Usecase Name Quản lý sinh viên
Description Tìm kiếm và hiển thị thông tin sinh viên
Trigger Người dùng muốn xem thông tin sinh viên
Pre-Condition Tài khoản đăng nhập với quyền thanh tra
Post-Condition Hiển thị thông tin sinh viên hoặc thông báo lỗi
1 Người dùng chọn Tra cứu sinh viên
2 Thực hiện subflow Load Students
3 Thực hiện subflow Search Students
4 Nhấn vào sinh viên muốn xem
5 Hệ thống hiển thị thông tin của sinh viên được chọn
6 Hệ thống lưu lại thông tin
1 Hệ thống kiểm tra quyền của người dùng
2 Hiển thị thông tin của 20 sinh viên
1 Người dùng nhập mã số sinh viên hoặc tên của sinh viên muốn tìm kiếm
2 Nhấn nút search hoặc enter để tìm kiếm sinh viên
3 Hệ thống kiểm tra quyền của người dùng
4 Hệ thống hiển thị 20 sinh viên có thông tin trùng với sinh viên được tìm kiếm
1 Tìm kiếm không thành công
- Hệ thống kiểm tra thông tin trên TextBox có nội dung nào hay không
Bảng 12: Usecase Diagram Quản lý sinh viên Thanh tra i) Nhận diện khuôn mặt Admin
Usecase Name Nhận diện khuôn mặt
Description Train hình ảnh được thêm vào
Trigger Người dùng training dữ liệu hình ảnh để điểm danh
Pre-Condition Tài khoản đăng nhập với quyền quản trị
Post-Condition Hiển thị đã gửi train thành công hoặc thất bại
2 Thực hiện subflow Train Data
3 Hệ thống lưu lại thông tin
1 Người dùng chọn nút “Train hình ảnh”
2 Hệ thống kiểm tra quyền của người dùng
3 Hệ thống kiểm tra những hình ảnh được thêm vào gần đây
4 Hệ thống dùng các hình ảnh này để train và đánh label, lưu thành file json để sử dụng
1 Train dữ liệu không thành công
- Hệ thống hiển thị thông báo không thành công
Bảng 13: Usecase Diagram Nhận diện khuôn mặt Admin k) Nhận diện khuôn mặt Thanh tra
Usecase Name Nhận diện khuôn mặt
Description Lấy dữ liệu khuôn mặt được đã được train
Trigger Người dùng lấy thông tin khuôn mặt để điểm danh
Pre-Condition Tài khoản đăng nhập với quyền thanh tra
Post-Condition Hiển thị thông báo nếu thất bại
2 Thực hiện subflow Load Data
3 Hệ thống lưu lại thông tin
1 Hệ thống kiểm tra quyền của người dùng
2 Hệ thống lấy thông tin khuôn mặt để điểm danh
Alternative flow 1 Tìm kiếm người dùng không thành công
- Hệ thống hiển thị thông báo không thành công
Bảng 14: Usecase Diagram Usecase Diagram Nhận diện khuôn mặt Thanh tra
Usecase Name Quản lý thanh tra
Description Xem, tìm kiếm, thêm, sửa thông tin thanh tra
Trigger Quản trị muốn xem/sửa/thêm thông tin thanh tra
Pre-Condition Tài khoản có quyền quản trị
Post-Condition Hiển thị thanh tra hoặc import dữ liệu thành công
1 Người dùng chọn menu thanh tra
2 Thực hiện subflow Load Inspectors
3 Thực hiện subflow Search Inspectors
4 Thực hiện subflow View Inspector
5 Thực hiện subflow Modify Inspectors
6 Thực hiện subflow Import Inspectors
1 Hệ thống kiểm tra quyền của người dùng
2 Hiển thị danh sách thanh tra S2: Search Inspectors
1 Người dùng nhập mã thanh tra hoặc tên của thanh tra muốn tìm kiếm
2 Nhấn nút search hoặc enter để tìm kiếm thanh tra
3 Hệ thống kiểm tra quyền của người dùng
4 Hệ thống hiển thị các thanh tra có thông tin trùng với thanh tra được tìm kiếm
1 Người dùng nhấn vào 1 thanh tra
2 Hệ thống hiển thị thông tin chi tiết của 1 thanh tra S4: Modify Inspectors
1 Người dùng nhấn thêm hoặc chỉnh sửa 1 thanh tra
2 Người dùng nhập thông tin
3 Hệ thống kiểm tra quyền của người dùng
4 Hệ thống thêm hoặc cập nhật dữ liệu và thông báo S5: Import Inspectors
1 Người dùng nhấn vào nút Import thanh tra
2 Người dùng chọn file csv chứa các thông tin thanh tra và tải lên
3 Hệ thống kiểm tra quyền của người dùng
4 Hệ thống đọc file và ghi dữ liệu hợp lệ vào csdl
5 Thông báo về cho người dùng
1 Tìm kiếm không thành công
- Hệ thống kiểm tra thông tin trên TextBox có nội dung nào hay không
2 Tải file lên không thành công:
- Hệ thống thông báo lỗi khi có vấn đề trong lúc tải file
3 Thêm, cập nhật thanh tra không thành công:
- Hệ thống thông báo lỗi khi có vấn đề trong lúc ghi dữ liệu
Bảng 15: Usecase Diagram Quản lý thanh tra
Usecase Name Quản lý tài khoản
Description Xem, tìm kiếm, thêm, sửa thông tin, đặt lại mật khẩu của tài khoản
Trigger Quản trị muốn xem/sửa/thêm thông tin tài khoản
Pre-Condition Tài khoản có quyền quản trị
Post-Condition Hiển thị thanh tra hoặc cập nhật dữ liệu thành công
1 Người dùng chọn menu tài khoản
2 Thực hiện subflow Load Accounts
3 Thực hiện subflow Search Accounts
4 Thực hiện subflow View Accounts
5 Thực hiện subflow Modify Accounts
6 Thực hiện subflow Reset Password Accounts
1 Hệ thống kiểm tra quyền của người dùng
2 Hiển thị danh sách tài khoản trong hệ thống
1 Người dùng nhập tên đăng nhập của tài khoản muốn tìm kiếm
2 Nhấn nút search hoặc enter để tìm kiếm tài khoản
3 Hệ thống kiểm tra quyền của người dùng
4 Hệ thống hiển thị các tài khoản có thông tin trùng với từ khóa được tìm kiếm
1 Người dùng nhấn vào 1 tài khoản
2 Hệ thống hiển thị thông tin chi tiết của 1 tài khoản S4: Modify Accounts
1 Người dùng nhấn thêm hoặc chỉnh sửa 1 tài khoản
2 Người dùng nhập thông tin
3 Hệ thống kiểm tra quyền của người dùng
4 Hệ thống thêm hoặc cập nhật dữ liệu và thông báo S5: Reset password Accounts
1 Người dùng nhấn vào nút Đặt lại mật khẩu
3 Hệ thống kiểm tra quyền của người dùng
4 Hệ thống truy xuất email của tài khoản và cập nhật lại mật khẩu ngẫu nhiên sau đó gửi nó cho email của tài khoản
5 Thông báo về cho người dùng
1 Tìm kiếm không thành công
- Hệ thống kiểm tra thông tin trên TextBox có nội dung nào hay không
2 Thêm, cập nhật, đặt lại mật khẩu của tài khoản không thành công:
- Hệ thống thông báo lỗi khi có vấn đề trong lúc ghi dữ liệu
Bảng 16: Usecase Diagram Quản lý tài khoản
Thiết kế cơ sở dữ liệu
TT Thuộc tính Diễn giải Kiểu dữ liệu Ràng buộc Ghi chú
2 username Tên đăng nhập của tài khoản String REQUIRED
3 password Mật khẩu của tài khoản String REQUIRED
4 full_name Tên người dùng String REQUIRED
5 email Email của người dùng Object REQUIRED
6 avatar Avatar của người dùng String DEFAULT
7 search_keywords Từ khóa hỗ trợ cho tìm kiếm String DEFAULT
8 inpector ID của thanh tra ObjectId DEFAULT
9 online Người dùng hoạt động hay không Boolean DEFAULT
Thời gian gần nhất mà người dùng truy cập
11 banned Bị ban hay chưa Boolean REQUIRED
12 role Quyền của tài khoản String REQUIRED
13 created_at Thời gian tạo tài khoản Timestamp DEFAULT
14 updated_at Thời gian cập nhật Timestamp DEFAULT
TT Thuộc tính Diễn giải Kiểu dữ liệu Ràng buộc Ghi chú
2 room Phòng thi ObjectID REQUIRED
3 inspectors Thanh tra gác thi ObjectID DEFAULT
4 students Sinh viên đi thi ObjectID DEFAULT
5 term Học kỳ Number REQUIRED
6 year Năm học Object REQUIRED
7 subject Môn học ObjectID REQUIRED
8 start_time Thời gian bắt đầu thi Timestamp REQUIRED
9 exam_type Dạng thi String DEFAULT
10 created_at Thời gian tạo hội thoại Timestamp DEFAULT
11 updated_at Thời gian cập nhật Timestamp DEFAULT
TT Thuộc tính Diễn giải Kiểu dữ liệu Ràng buộc Ghi chú
2 student_id MSSV String REQUIRED
3 citizen_identifi cation_number Mã CCCD/CMND String REQUIRED
4 portrait_img Ảnh chân dung String REQUIRED
5 first_name Tên String REQUIRED
6 middle_name Tên đệm String REQUIRED
7 last_name Họ String REQUIRED
8 search_keywor ds Từ khóa tìm kiếm String DEFAULT
9 date_of_birth Ngày sinh Timestamp REQUIRED
10 place_of_birth Nơi sinh String DEFAULT
11 gender Giới tính Boolean DEFAULT
12 email Mail sinh viên String DEFAULT
13 student_type Loại sinh viên String REQUIRED
14 learning_status Tình trạng học tập String DEFAULT
15 nationality Quốc tịch String REQUIRE
16 permanent_add ress Địa chỉ thường trú Object REQUIRED
17 school_year Năm học Object REQUIRED
18 education_prog ram Chương trình học String REQUIRED
19 class Lớp học phần String REQUIRED
20 current_address Nơi ở hiện tại String DEFAULT
23 created_at Thời gian tạo Timestamp DEFAULT
24 updated_at Thời gian cập nhật Timestamp DEFAULT
TT Thuộc tính Diễn giải Kiểu dữ liệu Ràng buộc Ghi chú
2 inspector_id Mã thanh tra String REQUIRED
3 citizen_ident ification_nu mber
Mã CCCD/CMND String REQUIRED
4 portrait_img Ảnh chân dung String REQUIRED
5 first_name Tên String REQUIRED
6 middle_nam e Tên đệm String REQUIRED
7 last_name Họ String REQUIRED
8 search_keyw ords Từ khóa hỗ trợ tìm kiếm String DEFAULT
9 date_of_birt h Ngày sinh Timestamp REQUIRED
10 place_of_bir th Nơi sinh String DEFAULT
11 gender Giới tính Boolean DEFAULT
12 email Mail thanh tra String DEFAULT
13 nationality Quốc tịch String REQUIRED
14 permanent_a ddress Địa chỉ thường trú Object REQUIRED
15 current_addr ess Nơi ở hiện tại String DEFAULT
16 working_stat us Tình trạng công tác String REQUIRED
17 created_at Thời gian tạo Timestamp DEFAULT
18 updated_at Thời gian cập nhật Timestamp DEFAULT
TT Thuộc tính Diễn giải Kiểu dữ liệu Ràng buộc Ghi chú
Mảng các MSSV có ảnh trong hệ thống để train
3 created_at Thời gian tạo Timestamp DEFAULT
4 updated_at Thời gian cập nhật Timestamp DEFAULT
TT Thuộc tính Diễn giải Kiểu dữ liệu Ràng buộc Ghi chú
2 file_name Tên của file String REQUIRED
3 mimetype Mimetype của file String REQUIRED
4 type Loại file String REQUIRED
5 file_path Đường dẫn truy cập đến file trong hệ thống String REQUIRED
6 has_used Đánh dấu file đã được đọc hay chưa Boolean REQUIRED
7 term Học kì được upload file Number REQUIRED
8 year Năm được upload file Object REQUIRED
9 created_at Thời gian tạo bài viết Timestamp DEFAULT
10 updated_at Thời gian cập nhật Timestamp DEFAULT
TT Thuộc tính Diễn giải Kiểu dữ liệu Ràng buộc Ghi chú
2 building_name Tên tòa nhà String REQUIRED
3 location Vị trí của tòa nhà Object DEFAULT
4 status Tình trạng sử dụng Boolean REQUIRED
5 num_of_floors Tổng số tầng Number REQUIRED
6 num_of_rooms Tổng số phòng Number REQUIRE
7 created_at Thời gian tạo Timestamp DEFAULT
8 updated_at Thời gian cập nhật Timestamp DEFAULT
TT Thuộc tính Diễn giải Kiểu dữ liệu Ràng buộc Ghi chú
2 room_name Tên phòng String REQUIRED
3 building Tòa nhà chứa phòng ObjectID REQUIRED
4 floor Tầng của phòng Number REQUIRED
5 status Tình trạng phòng Boolean REQUIRED
6 max_seats Số chỗ ngồi tối đa Number DEFAULT
7 room_type Loại phòng String DEFAULT
8 created_at Thời gian tạo Timestamp DEFAULT
9 updated_at Thời gian cập nhật Timestamp DEFAULT
TT Thuộc tính Diễn giải Kiểu dữ liệu Ràng buộc Ghi chú
2 subject_id Mã môn học String REQUIRED
3 subject_name Tên của môn học String REQUIRED
4 credit Số tín chỉ Number REQUIRED
5 created_at Thời gian tạo Timestamp DEFAULT
6 updated_at Thời gian cập nhật Timestamp DEFAULT
TT Thuộc tính Diễn giải Kiểu dữ liệu Ràng buộc Ghi chú
2 note Diễn giải của biên bản báo cáo String REQUIRED
3 images Mảng các đường dẫn ảnh minh chứng đi kèm Array DEFAULT
4 time Ca thi được lập biên bản ObjectID REQUIRED
5 report_type Loại biên bản String REQUIRED
6 created_at Thời gian tạo Timestamp DEFAULT
7 updated_at Thời gian cập nhật Timestamp DEFAULT
Phân tích thiết kế các thành phần chức năng
2.4.1 Biểu đồ sequence diagram đăng nhập
Hình 14: Sequence Diagram Đăng nhập
2.4.2 Biểu đồ sequence diagram quản lý báo cáo
Hình 15: Sequence Diagram Quản lý báo cáo của admin
Hình 16: Sequence Diagram Quản lý báo cáo của thanh tra
2.4.3 Biểu đồ sequence diagram quản lý phòng thi
Hình 17: Sequence Diagram Quản lý phòng thi của thanh tra
Hình 18: Sequence Diagram Quản lý phòng thi của phòng đào tạo
Hình 19: Sequence Diagram Quản lý phòng thi của admin
2.4.4 Biểu đồ sequence diagram quản lý sinh viên
Hình 20: Sequence Diagram Quản lý sinh viên của thanh tra
Hình 21: Sequence Diagram Quản lý sinh viên của admin
2.4.5 Biểu đồ sequence diagram nhận diện khuôn mặt
Hình 22: Sequence Diagram Nhận diện khuôn mặt của admin
Hình 23: Sequence Diagram Nhận diện khuôn mặt của thanh tra
2.4.6 Biểu đồ sequence diagram Quản lý thanh tra
Hình 24: Sequence Diagram Quản lý thanh tra
2.4.7 Biểu đồ sequence diagram quản lý tài khoản
Hình 25: Sequence Diagram Quản lý tài khoản
Activity Diagram
2.5.2 Activity Diagram Quản lý báo cáo
Hình 27: Activity Diagram Xem báo cáo Admin
Hình 28: Activity Diagram Xem báo cáo Thanh tra
Hình 29: Activity Diagram Tạo báo cáo
Hình 30: Activity Diagram Chỉnh sửa báo cáo
2.5.3 Activity Diagram Quản lý phòng thi
Hình 31: Activity Diagram xem lịch thi Admin
Hình 32: Activity Diagram Đổ dữ liệu lịch thi
Hình 33: Activity Diagram Xem lịch thi Phòng đào tạo
Hình 34: Activity Diagram Tải lên file lịch thi
Hình 35: Activity Diagram Cảnh báo sinh viên nghi vấn
Hình 36: Activity Diagram tìm kiếm phòng thi
Hình 37: Activity Diagram Điểm danh
Hình 38: Activity Diagram Xuất file excel
2.5.4 Activity Diagram Quản lý sinh viên
Hình 39: Activity Diagram Trang Quản lý sinh viên Admin
Hình 40: Activity Diagram Trang Import thông tin/hình ảnh sinh viên
Hình 41: Activity Diagram Quản lý sinh viên Thanh tra
2.5.5 Activity Diagram Nhận diện khuôn mặt
Hình 42: Activity Diagram Nhận diện khuôn mặt Admin
Hình 43: Activity Diagram Nhận diện khuôn mặt Thanh tra
2.5.6 Activity Diagram Quản lý thanh tra
Hình 44: Activity Diagram Quản lý thanh tra
Hình 45: Activity Diagram Import danh sách thanh tra
2.5.7 Activity Diagram Quản lý tài khoản
Hình 46: Activity Diagram Quản lý tài khoản
Phân tích, thiết kế và chức năng của giao diện
Truy cập đường dẫn http://localhost:3000/login để vào trang đăng nhập dành cho admin với username và password là (admin001/admin001) để truy cập vào hệ thống:
Hình 47: Giao diện Đăng nhập
Trang báo cáo: Hiển thị các báo cáo được filter theo năm và kỳ và chọn báo cáo để có thể xem thông tin của báo cáo được chọn
Hình 48: Giao diện Trang báo cáo
Admin có thể lựa chọn tòa nhà tổ chức thi dựa trên năm, kỳ thi và ngày cụ thể Bên cạnh đó, có thể thực hiện việc nhập dữ liệu từ file lịch thi mà phòng đào tạo đã upload lên cơ sở dữ liệu để cập nhật thông tin trên website.
Hình 49: Giao diện Trang lịch thi
Trang chi tiết phòng thi: Admin chọn phòng thi từ ca thi và tầng để xem thông tin sinh viên và điểm danh của phòng
Hình 50: Giao diện Trang phòng thi
Trang tài khoản cho phép Admin tìm kiếm bằng tên đăng nhập hoặc tên thật, lựa chọn tài khoản để thực hiện việc ban hoặc unban, và nhấn nút “Tạo” để thêm tài khoản mới.
Hình 51: Giao diện Trang tài khoản
Trang sinh viên cho phép admin tìm kiếm theo tên hoặc mã số sinh viên, dễ dàng chọn sinh viên để xem hoặc chỉnh sửa thông tin Admin có thể ấn nút “Thêm” để tạo sinh viên mới, đồng thời sử dụng các chức năng như import danh sách sinh viên và hình ảnh sinh viên Đặc biệt, tính năng “Train ảnh” giúp tạo dữ liệu khuôn mặt phục vụ cho việc thanh tra điểm danh.
Hình 52: Giao diện Trang sinh viên
Trang thanh tra cho phép admin tìm kiếm thông tin bằng tên hoặc mã thanh tra, dễ dàng xem và chỉnh sửa thông tin của thanh tra đã chọn Để thêm thanh tra mới, chỉ cần nhấn nút “Thêm” Ngoài ra, hệ thống còn hỗ trợ chức năng import danh sách thanh tra, giúp quản lý dữ liệu hiệu quả hơn.
Hình 53: Giao diện Trang thanh tra
Giao diện đăng nhập: Thanh tra nhập tên đăng nhập và mật khẩu được cung cấp để đăng nhập vào website
Hình 54: Giao diện Đăng nhập
Giao diện trang cứu sinh viên: bao gồm sidebar, nhập thông tin sinh viên muốn tìm kiếm ấn Enter hoặc nút search để tìm kiếm
Hình 55: Giao diện Trang tra cứu sinh viên
Giao diện thông tin sinh viên: Khi nhấn vào sinh viên sẽ hiển thị thông tin sinh viên
Hình 56: Giao diện Chi tiết sinh viên
Trang lịch thi: Thanh tra có thể tra cứu tòa nhà được sử dụng để thi filer theo năm, kỳ và ngày
Hình 57: Giao diện Trang tra cứu phòng thi
Trang chi tiết phòng thi: Admin chọn phòng thi từ ca thi và tầng để xem thông tin sinh viên và điểm danh của phòng
Hình 58: Giao diện Trang chi tiết phòng thi
Giao diện trang chủ hiển thị danh sách các tòa nhà tổ chức thi trong ngày, cùng với danh sách sinh viên nghi vấn Ngoài ra, có nút xuất danh sách để người dùng có thể tải về toàn bộ lịch thi trong ngày.
Hình 59: Giao diện Trang chủ
Khi bạn nhấp vào lựa chọn phòng, thông tin chi tiết về phòng thi sẽ được hiển thị, bao gồm các chức năng như báo cáo, điểm danh sinh viên và khả năng xuất file điểm danh sinh viên.
Hình 60: Giao diện Phòng thi
Còn đây là chức năng điểm danh sinh viên bằng camera bên cạnh đó là chức năng điểm danh bằng hình ảnh
Hình 61: Giao diện Điểm danh
Giao diện báo cáo: Người dùng chọn báo cáo để các báo cáo trong phòng, tạo hoặc xóa báo cáo
Hình 62: Giao diện Báo cáo
Hình 63: Giao diện Chi tiết báo cáo
KIỂM THỬ PHẦN MỀM
Một số test case
Danh sách 88 testcase được thực hiện tại đường dẫn sau: https://docs.google.com/spreadsheets/d/1fOsGUICFbjuhU-
ICBQNU66psS_DzXO5A/edit?usp=sharing&ouid2622952634724094154&rtpof=tru e&sd=true
3.1.2 Testcase Xem báo cáo của admin
Hình 65: Testcase Xem báo cáo Admin
3.1.4 Testcase Giao diện lịch thi của admin
Hình 66: Testcase Giao diện lịch thi Admin
3.1.5 Testcase Chỉnh sửa tài khoản
Hình 67: Testcase Chỉnh sửa tài khoản
3.1.6 Testcase Import hình ảnh sinh viên
Hình 68: Testcase Import hình ảnh sinh viên
Hình 69: Testcase Xem thanh tra
Hình 70: Testcase Tạo biên bản
Test report
Tính năng Số testcase Số testcase pass Số testcase không pass Đăng nhập 5 5 0
Quản lý báo cáo của admin 6 5 1
Quản lý phòng thi của admin 12 10 2
Quản lý tài khoản của admin 14 11 3
Quản lý sinh viên của admin 15 14 1
Quản lý thanh tra của admin 11 8 3
Chức năng ở trang chủ của thanh tra 15 12 3
Chức năng ở trang tra cứu lịch thi của thanh tra 7 7 0
Chức năng ở trang tra cứu sinh viên của thanh tra 3 2 1
Tỷ lệ đã testcase đã test 100%
CÀI ĐẶT DEMO
Các yêu cầu về môi trường cài đặt và phiên bản phần mềm
- Ngôn ngữ lập trình: JavaScript
- Hệ thống cơ sở dữ liệu: MongoDB
- Quản lý mã nguồn: Github
- Hệ quản trị cơ sở dữ liệu: MongoDB Atlas
- Thiết kế Usecase và biểu đồ: Draw.io
Cài đặt Server
To set up the server, install the following packages: bcryptjs (2.4.3), body-parser (1.20.2), compression (1.7.4), connect-mongo (1.4.6), canvas (2.11.2), cors (2.8.5), express (4.18.2), cookie-parser (1.4.6), csvtojson (2.0.10), express-session (1.18.0), express-validator (7.0.1), face-api.js (0.22.2), helmet (7.1.0), jsonwebtoken (9.0.2), mongoose (7.6.3), mongoose-unique-validator (4.0.0), multer (1.4.5-lts.1), nodemailer (6.9.7), node-stream-zip (1.15.0), node-unrar-js (2.0.2), and xlsx (0.18.5).
Tổ chức các thư mục và file:
Hình 72: Tổ chức thư mục, file Server
- config: để cấu hình đường dẫn truy cập, kết nối database
- controllers: để chứa code các function xử lý cho các routes
- models: dùng để cung cấp dữ liệu, thực hiện kết nối, trích lọc, chèn, chỉnh sửa dữ liệu trong database, tương tác với file system, network
- middleware: chứa các middleware (Middleware là các hàm khác nhau được gọi bởi [Route Express] trước khi các yêu cầu hoàn tất.)
- public: chứa hình ảnh được website sử dụng
- routes: dùng để chuyển hướng các URL đến các hàm xử lý tương ứng
- utils: chứa các file tiện ích hỗ trợ quá trình cấu hình, gửi yêu cầu http, xác thực
- env: chứa các tham số cấu hình
- labeledFacesData.json: chứa thông tin nhận diện khuôn mặt của người dùng
- server.js: tạo kết nối đến express, mongoDB và socket.io.
Cài đặt Client
To set up the client environment, install the following essential packages: @babel/plugin-proposal-private-property-in-object (7.14.5), @emotion/react (11.11.1), @emotion/styled (11.11.0), @mui/icons-material (5.14.11), @testing-library/jest-dom (5.11.9), @testing-library/react (11.2.3), @testing-library/user-event (12.6.2), @mui/material (5.14.13), @mui/lab (5.0.0-alpha.169), @mui/x-date-pickers (7.0.0), axios (1.5.1), chart.js (4.4.0), classnames (2.3.2), date-fns (2.30.0), emoji-picker-react (4.5.7), face-api.js (0.22.2), resolve-url-loader (5.0.0), install (0.13.0), moment (2.29.4), npm (10.5.0), react (18.2.0), react-toastify (9.1.3), react-dom (18.2.0), react-moment (1.1.3), react-otp-input (3.1.0), react-router-dom (6.16.0), react-scripts (5.0.1), react-slick (0.30.2), sass (1.68.0), sass-loader (13.3.2), simplebar-react (3.2.4), socket.io-client (4.7.2), web-vitals (2.1.4), slick-carousel (1.8.1), xlsx (0.18.5), and xlsx-populate (1.21.0).
Tổ chức các thư mục và file:
Hình 73: Tổ chức thư mục, file Client
- assets: chứa hình ảnh logo của website
- components: chứa các thành phần giao diện có thể tái sử dụng
- context: chứa các actions và reducers để quản lí các state
- hooks: chứa các file có các hàm quản lý state
- pages: những trang giao diện chính của ứng dụng như trang chủ, trang admin,
- routes: chứa các đường dẫn của trang web tới các trang
- services: chứa các file gọi api của trang web
- utils: chứa các file tiện ích hỗ trợ quá trình cấu hình, gửi yêu cầu http, xác thực
- App.js: file chính chứa các route và dùng để render page
KẾT LUẬN
Kết quả đạt được
Đề tài đã hoàn thành mục tiêu đề ra, giúp người học tiếp thu kiến thức và kỹ năng mới, cũng như công nghệ tiên tiến Những kiến thức này được áp dụng để xây dựng một website hỗ trợ công tác thanh tra trong các kỳ thi.
- Nâng cao khả năng làm việc nhóm
- Học thêm các công nghệ mới: Reactjs, Nodejs
- Học cách quản lý source control và bug
- Nhận diện khuôn mặt với thư viện face-api.js
- Thao tác với file ảnh, excel,
- Sử dụng jwt, bcrypt để bảo mật
Danh sách các chức năng đã làm được
- Chức năng dành cho admin:
+ Xem thông tin báo cáo
+ Quản lý sinh viên (tìm kiếm, xem thông tin sinh viên và import danh sách) + Quản lý phòng thi (xem lịch thi và đổ dữ liệu)
- Chức năng dành cho thanh tra:
+ Đăng nhập và đăng xuất
+ Quản lý sinh viên (tìm kiếm và xem thông tin sinh viên)
+ Quản lý báo cáo (tạo, chỉnh sửa và xem thông tin báo cáo)
+ Quản lý phòng thi (tìm kiếm phòng thi, điểm danh và xuất file)
+ Cảnh báo sinh viên nghi vấn
- Chức năng dành cho phòng đào tạo:
+ Đăng nhập và đăng xuất
+ Quản lý phòng thi (xem lịch thi và upload file)
Hướng phát triển
STT Thời gian Công việc Ghi chú
1 3/3/2024 - 10/3/2024 Lên kế hoạch thực hiện
3 17/3/2024 - 23/3/2024 Thiết kế và xây dựng database
5 2/4/2024 - 29/4/2024 Thiết kế và xây dựng APIs
6 2/5/2024 - 15/5/2024 Tích hợp APIs backend với frontend
7 16/5/2024 - 15/6/2024 Kiểm thử và sửa lỗi
Người viết đề cương Ý kiến của giáo viên hướng dẫn
(ký và ghi rõ họ tên)
1.Tính cấp thiết của đề tài 5
2.Mục đích của đề tài 5
3.Nhiệm vụ của đề tài 5
4.Cách tiếp cận và phạm vi nghiên cứu 5
5.Ý nghĩa khoa học và thực tiễn 6
PHẦN 2: KẾ HOẠCH THỰC HIỆN 7
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 8
1.1.Các khái niệm cơ bản 8
1.2.MERN Stack hoạt động như thế nào? 16
1.3.Cấu trúc của một MERN Stack 17
1.4.Tại sao chọn MERN Stack 18
CHƯƠNG 2: MÔ TẢ PHẦN MỀM 19
2.3.Thiết kế cơ sở dữ liệu 42
2.4.Phân tích thiết kế các thành phần chức năng 52
2.6.Phân tích, thiết kế và chức năng của giao diện 73
CHƯƠNG 3: KIỂM THỬ PHẦN MỀM 82
4.1 Các yêu cầu về môi trường cài đặt và phiên bản phần mềm 87
2.Danh sách các chức năng đã làm được 90
3.Ưu điểm và khuyết điểm 91
DANH MỤC TÀI LIỆU THAM KHẢO 92
Hình 3: Kiến trúc MERN Stack 16
Hình 6: Usecase quản lý báo cáo 23
Hình 7: Usecase quản lý phòng thi 23
Hình 8: Use case quản lý sinh viên 24
Hình 9: Usecase nhận diện khuôn mặt 24
Hình 10: Usecase quản lý thanh tra 25
Hình 11: Usecase quản lý tài khoản 25
Hình 14: Sequence Diagram Đăng nhập 52
Hình 15: Sequence Diagram Quản lý báo cáo của admin 52
Hình 16: Sequence Diagram Quản lý báo cáo của thanh tra 53
Hình 17: Sequence Diagram Quản lý phòng thi của thanh tra 54
Hình 18: Sequence Diagram Quản lý phòng thi của phòng đào tạo 55
Hình 19: Sequence Diagram Quản lý phòng thi của admin 56
Hình 20: Sequence Diagram Quản lý sinh viên của thanh tra 57
Hình 21: Sequence Diagram Quản lý sinh viên của admin 58
Hình 22: Sequence Diagram Nhận diện khuôn mặt của admin 59
Hình 23: Sequence Diagram Nhận diện khuôn mặt của thanh tra 59
Hình 24: Sequence Diagram Quản lý thanh tra 60
Hình 25: Sequence Diagram Quản lý tài khoản 61
Hình 27: Activity Diagram Xem báo cáo Admin 62
Hình 28: Activity Diagram Xem báo cáo Thanh tra 63
Hình 29: Activity Diagram Tạo báo cáo 63
Hình 30: Activity Diagram Chỉnh sửa báo cáo 64
Hình 31: Activity Diagram xem lịch thi Admin 64
Hình 32: Activity Diagram Đổ dữ liệu lịch thi 65
Hình 33: Activity Diagram Xem lịch thi Phòng đào tạo 65
Hình 34: Activity Diagram Tải lên file lịch thi 66
Hình 35: Activity Diagram Cảnh báo sinh viên nghi vấn 66
Hình 36: Activity Diagram tìm kiếm phòng thi 67
Hình 37: Activity Diagram Điểm danh 67
Hình 38: Activity Diagram Xuất file excel 68
Hình 39: Activity Diagram Trang Quản lý sinh viên Admin 68
Hình 40: Activity Diagram Trang Import thông tin/hình ảnh sinh viên 69
Hình 41: Activity Diagram Quản lý sinh viên Thanh tra 69
Hình 42: Activity Diagram Nhận diện khuôn mặt Admin 70
Hình 43: Activity Diagram Nhận diện khuôn mặt Thanh tra 70
Hình 44: Activity Diagram Quản lý thanh tra 71
Hình 45: Activity Diagram Import danh sách thanh tra 71
Hình 46: Activity Diagram Quản lý tài khoản 72
Hình 47: Giao diện Đăng nhập 73
Hình 48: Giao diện Trang báo cáo 73
Hình 49: Giao diện Trang lịch thi 74
Hình 50: Giao diện Trang phòng thi 74
Hình 51: Giao diện Trang tài khoản 75
Hình 52: Giao diện Trang sinh viên 75
Hình 53: Giao diện Trang thanh tra 76
Hình 54: Giao diện Đăng nhập 76
Hình 55: Giao diện Trang tra cứu sinh viên 77
Hình 56: Giao diện Chi tiết sinh viên 77
Hình 57: Giao diện Trang tra cứu phòng thi 78
Hình 58: Giao diện Trang chi tiết phòng thi 78
Hình 59: Giao diện Trang chủ 79
Hình 60: Giao diện Phòng thi 79
Hình 61: Giao diện Điểm danh 80
Hình 62: Giao diện Báo cáo 80
Hình 63: Giao diện Chi tiết báo cáo 81
Hình 65: Testcase Xem báo cáo Admin 82
Hình 66: Testcase Giao diện lịch thi Admin 83
Hình 67: Testcase Chỉnh sửa tài khoản 83
Hình 68: Testcase Import hình ảnh sinh viên 84
Hình 69: Testcase Xem thanh tra 84
Hình 70: Testcase Tạo biên bản 85
Hình 72: Tổ chức thư mục, file Server 87
Hình 73: Tổ chức thư mục, file Client 89
Bảng 1: Bảng kế hoạch thực hiện 7
Bảng 2: Một số câu lệnh cơ bản trên MongoDB 14
Bảng 3: Chức năng của Website 20
Bảng 4: Tác nhân, Function và Usecase 22
Bảng 5: Usecase Diagram Đăng nhập 26
Bảng 6: Usecase Diagram Quản lý báo cáo Admin 27
Bảng 7: Usecase Diagram Quản lý báo cáo Thanh tra 29
Bảng 8: Usecase Diagram Quản lý phòng thi Admin 30
Bảng 9: Usecase Diagram Quản lý phòng thi Phòng đào tạo 31
Bảng 10: Usecase Diagram Quản lý phòng thi Thanh tra 33
Bảng 11: Usecase Diagram Quản lý sinh viên Admin 35
Bảng 12: Usecase Diagram Quản lý sinh viên Thanh tra 36
Bảng 13: Usecase Diagram Nhận diện khuôn mặt Admin 37
Bảng 14: Usecase Diagram Usecase Diagram Nhận diện khuôn mặt Thanh tra 37
Bảng 15: Usecase Diagram Quản lý thanh tra 39
Bảng 16: Usecase Diagram Quản lý tài khoản 41
1 Tính cấp thiết của đề tài
Lĩnh vực giáo dục luôn thu hút sự chú ý, đặc biệt là trong các kỳ thi đánh giá năng lực Việc quản lý và theo dõi thí sinh trong các kỳ thi lớn là một thách thức phức tạp, đòi hỏi nhiều công sức và nhân lực từ giám thị và thanh tra Do tầm quan trọng của các kỳ thi, nhiều thí sinh đã sử dụng các hình thức gian lận như mang tài liệu vào phòng thi hoặc nhờ người thi hộ Tình trạng gian lận này vẫn tồn tại và ngày càng tinh vi hơn, gây ảnh hưởng đến kết quả thi thực tế của nhiều thí sinh.
Trong bối cảnh xã hội phát triển, việc quản lý thí sinh và đảm bảo công bằng trong các kỳ thi trở nên ngày càng quan trọng Vì lý do này, nhóm em đã chọn đề tài “Xây dựng website hỗ trợ thanh tra trong các kỳ thi” cho khóa luận của mình.
2 Mục đích của đề tài
Mục tiêu của đề tài là áp dụng kiến thức nền tảng để khám phá công nghệ mới như MERN stack, nhằm phát triển một trang web hỗ trợ thanh tra trong các kỳ thi Trang web sẽ tích hợp các tính năng như điểm danh, quản lý lịch thi, và báo cáo sự cố hoặc biên bản phòng thi.
3 Nhiệm vụ của đề tài
Các nhiệm vụ chính cần thực hiện trong đề tài:
- Trình bày cơ sở lý thuyết về các công nghệ sử dụng
- Tìm hiểu, phân tích và thiết kế hệ thống của một website hỗ trợ cho thanh tra trong các kỳ thi
- Phân tích các tính năng mới và áp dụng vào đề tài
4 Cách tiếp cận và phạm vi nghiên cứu Đối tượng nghiên cứu đề tài là nhu cầu trong công tác kiểm tra của thanh tra, Phòng đào tạo và các hình thức gian lận của thí sinh trong các kỳ thi
Chúng tôi nghiên cứu và áp dụng các công nghệ hiện đại như nhận diện khuôn mặt và điểm danh tự động để quản lý phòng thi, đảm bảo tính an toàn, chính xác và dễ sử dụng.
5 Ý nghĩa khoa học và thực tiễn
Đề tài này giúp hiểu rõ công nghệ MERN stack và ứng dụng công nghệ hiện đại như nhận diện khuôn mặt, điểm danh tự động trong quản lý và thanh tra thi cử Nó mở ra hướng phát triển mới cho lĩnh vực này, đồng thời góp phần vào việc số hóa và hiện đại hóa công tác tổ chức, quản lý các kỳ thi.
Đề tài này sẽ trình bày chi tiết về quy trình và công nghệ tạo ra giá trị thực tiễn, nhằm nâng cao hiệu quả, tính minh bạch và công bằng trong các kỳ thi Bên cạnh đó, việc ứng dụng công nghệ hiện đại sẽ hỗ trợ đội ngũ thanh tra, giám sát thi thực hiện nhiệm vụ một cách dễ dàng và chính xác hơn.
PHẦN 2: KẾ HOẠCH THỰC HIỆN
STT THỜI GIAN CÔNG VIỆC HOÀN THÀNH
1 3/3/2024 - 10/3/2024 Lên kế hoạch thực hiện 8/3/2024
3 17/3/2024 - 23/3/2024 Thiết kế và xây dựng database 20/3/2024
5 2/4/2024 - 29/4/2024 Thiết kế và xây dựng APIs 3/5/2024
6 2/5/2024 - 15/5/2024 Tích hợp APIs backend với frontend 17/5/2024
7 16/5/2024 - 15/6/2024 Kiểm thử và sửa lỗi 17/6/2024
Bảng 1: Bảng kế hoạch thực hiện
3/3/2024 23/3/2024 12/4/2024 2/5/2024 22/5/2024 11/6/2024 1/7/2024 21/7/2024 Lên kế hoạch thực hiện
Thiết kế và xây dựng database
Thiết kế giao diện Thiết kế và xây dựng APIs
Tích hợp APIs backend với frontend
Kiểm thử và sửa lỗi
PHẦN 3: NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Các khái niệm cơ bản
MERN stack là sự kết hợp của các công nghệ phổ biến hiện nay, bao gồm MongoDB, ExpressJS, ReactJS và NodeJS, tất cả đều liên quan đến JavaScript Lập trình viên thường sử dụng MERN stack để phát triển các ứng dụng React Universal.
1.1.2 NodeJS là gì? a Giới thiệu NodeJS
NodeJS là một môi trường runtime mã nguồn mở, đa nền tảng, cho phép chạy các ứng dụng web bên ngoài trình duyệt của client Được phát triển bởi Ryan Dahl vào năm 2009, NodeJS được coi là giải pháp lý tưởng cho các ứng dụng xử lý nhiều dữ liệu nhờ vào mô hình hướng sự kiện không đồng bộ.
NodeJS, được viết bởi lập trình viên Ryan Dahl vào năm 2009, là một nền tảng phát triển ứng dụng cho hệ điều hành Linux Nó được phát triển và bảo trì bởi Ryan Dahl, với sự tài trợ từ Joyent.
Tháng 1 năm 2010, trình quản lý gói npm cho NodeJS được ra mắt
Tháng 6 năm 2011, phiên bản Windows gốc của NodeJS được triển khai bởi Microsoft và Joyent
Tháng 12 năm 2014, do xung đột nội bộ nên NodeJS bị chia rẽ, IO.js được hình thành
Tháng 6 năm 2015, cộng đồng IO.js và cộng đồng NodeJS đã thống nhất bỏ phiếu để hợp tác với nhau dưới dạng NodeJS Foundation c Ưu và nhược điểm Ưu điểm:
- Node.js sử dụng JavaScript cả trên server-side và client-side, giúp đơn giản hóa quá trình phát triển và chia sẻ mã nguồn
- Hiệu suất cao: Node.js sử dụng kiến trúc non-blocking I/O, giúp tối ưu hóa hiệu suất cho các ứng dụng xử lý nhiều kết nối đồng thời
Node.js là nền tảng lý tưởng cho các ứng dụng yêu cầu xử lý thời gian thực, bao gồm trò chơi trực tuyến, ứng dụng game và các nền tảng chat trực tuyến.
Node.js cho phép xây dựng sản phẩm MVP (Minimum Viable Product) một cách nhanh chóng, giúp doanh nghiệp rút ngắn thời gian đưa sản phẩm ra thị trường.
Khả năng quản lý dự án là yếu tố quan trọng khi làm việc với các ứng dụng lớn và phức tạp, vì quản lý mã nguồn có thể trở nên khó khăn nếu không có một cấu trúc dự án hợp lý.
Node.js không phải là lựa chọn tối ưu cho các ứng dụng yêu cầu xử lý CPU cao, chẳng hạn như các thuật toán phức tạp và tính toán nặng.
10 d Ứng dụng trong đề tài
- Hệ thống APIs: Tương tác với database và trả về dữ liệu cho người dùng
- face-api.js: Cung cấp các chức năng nhận diện khuôn mặt và lưu trữ thông tin khuôn mặt một cách dễ dàng và hiệu quả