Đồ án: Phát triển Website học trực tuyến quản lý học viên

MỤC LỤC

KHẢO SÁT VÀ PHÂN TÍCH ĐẶC TẢ YÊU CẦU

Khảo sát hiện trạng

Ngoài ra còn thực hiện một cuộc khảo sát quy mô nhỏ và nhận được khoảng 121 phản hồi.

Danh sách yêu cầu có trong ứng dụng STT Loại yêu cầu Tên yêu cầu

18 Chức năng Quản lý học viên đăng ký 19 Chức năng Quản lý bài kiểm tra. 23 Giao diện Tiện dụng, tối ưu hóa chức năng 24 Giao diện Giao diện dễ nhìn, thân thiện.

PHÂN TÍCH HỆ THỐNG

Phân loại các yêu cầu phần mềm .1 Yêu cầu hệ thống

    - Ứng dụng đáp ứng được các nhu cầu cần thiết, cơ bản của khách hàng cũng như các chức năng khác liên quan như là quản lý các mục thông tin liên quan đến ứng dụng. 1 Đăng ký tài khoản Cho phép người dùng tạo tài khoản cá nhân để có thể sử dụng website. 6 Lấy lại mật khẩu Khi người dùng quên mật khẩu, cho phép người dùng khả năng tìm lại mật khẩu.

    11 Làm bài kiểm tra Cho phép người dùng làm bài kiểm tra 12 Nộp bài kiểm tra Sau khi người dùng làm bài kiểm tra xong,. 16 Sửa thông tin khóa học Cho phép giảng viên sửa, thay đổi các thông tin về khóa học của mình. 18 Quản lý học viên đăng ký Cho phép giảng viên quản lý tất cả các học viên đã đăng ký khóa học của mình.

    20 Xem tiến độ học viên Cho phép giảng viên xem tiến độ của các học viên đã đăng ký khóa học. 21 Xem các bản tin Cho phép người dùng xem các bản tin 22 Thêm bản tin Cho phép người dùng thêm bản tin.

    Bảng trách nhiệm cho từng loại yêu cầu ST

    14 Quản lý khóa học Cho phép giảng viên có thể quản lý các khóa học của mình.

    THIẾT KẾ HỆ THỐNG

    Sơ đồ Usecase tổng quát

      Sau đó tìm nạp dữ liệu từ máy chủ bằng getCourse([id]):. Kiểm tra id khóa học xem nó còn tồn tại không:. Không tìm thấy trang hiển thị để thông báo cho người dùng nội dung chính:. Nội dung [body] = “Không thể tìm thấy khóa học này. Nhấn vào đây để trở về trang chủ”. Nhấn vào chữ “đây”, sẽ lập tức chuyển hướng về trang chủ + Không thị đầy đủ thông tin khóa học:. Mô tả course[description]. //Đánh giá sẽ được hiển thị dưới dạng ngôi sao. Body //Quy tắc để hiển thị giá khóa học như đã khai báo ở BR9. Button Mua ngay. Tổng quan Tóm tắt Mục tiêu khóa học - Mục. - Mục này hiển thị. tổng quan thông tin về khóa học. danh sách các chương , bài học,. danh sách các mục tiêu sẽ đạt được sau khi tham gia khóa học. Comment Quy tắc bình luận:. Avatar Tên comment[owner][name]. Bình luận comment[content ). Triển khai hệ thống thông báo để thông báo cho người hướng dẫn về các sự kiện quan trọng trong khóa học của họ, chẳng hạn như ngày hết hạn nộp bài hoặc thắc mắc của sinh viên. Cung cấp các trường để người hướng dẫn nhập thông tin khóa học cần thiết, chẳng hạn như tiêu đề, mô tả, cấp độ, thời lượng và bất kỳ điều kiện tiên quyết nào.

      Triển khai chế độ xem trước cho phép người hướng dẫn xem khóa học giống như sinh viên, đảm bảo trình bày nội dung và trình tự như dự kiến. Nếu có thể, hãy đảm bảo tích hợp liền mạch với LMS (Hệ thống quản lý học tập) để hợp lý hóa các quy trình hành chính và quản lý dữ liệu. Cho phép người hướng dẫn chỉnh sửa các chi tiết cơ bản của khóa học như tiêu đề, mô tả, cấp độ, thời lượng và điều kiện tiên quyết.

      Cho phép người hướng dẫn thực hiện các điều chỉnh đối với cài đặt kiểm soát truy cập, thay đổi trạng thái công khai, riêng tư hoặc hạn chế của khóa học. Cho phép người hướng dẫn cập nhật tùy chọn thông báo của họ liên quan đến hoạt động khóa học, đảm bảo họ luôn được thông báo về các sự kiện liên quan. Thực hiện cơ chế xác nhận bằng cách hiển thị thông báo MSG17 để đảm bảo người hướng dẫn được nhắc xác nhận ý định của họ trước khi xóa khóa học.

      Nhưng cơ chế xóa này chỉ bị ẩn với chủ khóa học, còn những học viên đã mua khóa học trước đó vẫn có thể tiếp tục học nhưng sẽ được thông báo về việc này. Hiển thị bản tóm tắt về tác động tiềm tàng của việc xóa khóa học, bao gồm số lượng sinh viên đăng ký bị ảnh hưởng, các đánh giá liên quan và các công cụ cộng tác. Cung cấp cho người hướng dẫn danh sách sinh viên hiện đang theo học trong khóa học của họ một cỏch rừ ràng và cú tổ chức, hiển thị cỏc chi tiết liờn quan như tờn và ngày đăng ký.

      Triển khai các tùy chọn tìm kiếm và lọc để cho phép người hướng dẫn nhanh chóng xác định vị trí các học viên đã đăng ký cụ thể dựa trên các tiêu chí như tên, email. Cho phép người hướng dẫn cập nhật thủ công trạng thái đăng ký, cho phép họ đánh dấu sinh viên là đã đăng ký, đang chờ phê duyệt hoặc rút lui nếu cần. Tích hợp các công cụ liên lạc qua email trong hệ thống quản lý tuyển sinh, cho phép người hướng dẫn gửi thông báo, lời nhắc hoặc phản hồi đến học viên đã đăng ký.

      Description Cho phép người hướng dẫn tạo, thay đổi hoặc xóa bài tập mới trong khóa học, cung cấp thông tin chi tiết như tiêu đề, mô tả và ngày đến hạn. Cung cấp cho người hướng dẫn một bảng điều khiển tập trung để xem tổng quan về tiến bộ của từng học sinh trong khóa học. Cho phép người hướng dẫn truy cập hồ sơ cá nhân sinh viên có chứa các thông tin chi tiết như ngày đăng ký, lịch sử tham gia và hiệu suất tổng thể.

      Cho phép người hướng dẫn đi sâu vào tiến độ thực hiện bài tập cụ thể của từng học sinh, hiển thị trạng thái hoàn thành, điểm số và mọi phản hồi được cung cấp.

      Sơ đồ 2. Use case Giảng viên
      Sơ đồ 2. Use case Giảng viên

      THIẾT KẾ DỮ LIỆU

      Diễn giải

      STT Màn hình 1 Trang chủ

      • CÀI ĐẶT DEMO SẢN PHẨM

        ⮚ Để đảm bảo rằng ứng dụng sẽ được chạy ổn định và không có lỗi phát sinh trong quá trình chạy demo sản phẩm thì phiên bản node của máy tính bạn nên đảm bảo chạy ở phiên bản v18.17.0. Nó sẽ giúp máy của bạn có thể tùy chỉnh sử dụng nhiều phiên bản node khác nhau trên cùng một máy tính. ● Hoặc có thể truy cập trực tiếp vào nvm-windows trên gitHub để cập nhật các phiên bản mới hơn và tìm hiểu chi tiết hơn.

        ⮚ Cài đặt XAMPP là chương trình tạo máy chủ Web tích hợp sẵn MySql để chạy database. ⮚ Sau khi lệnh chạy xong thì các table đã được tạo trên db congchinh có thể kiểm tra bằng cách nhấn vào nút admin trong app XAMPP ở phần MySql để kiểm tra. ⮚ Sau đó thoát ra khỏi thư mục src về thư mục chính của backend chạy lệnh: npm i.

        ⮚ Sau khi cài đặt hoàn tất các package cần thiết, để chạy backend ta dùng lệnh: npm start. ⮚ Sau đó để chạy frontend ta dùng lệnh: npm run dev 8.4 Thêm dữ liệu ảo để thuận tiện cho việc demo sản phẩm. ⮚ Để đảm bảo ứng dụng chạy ổn định và chính xác thì ta nên khởi động lại XAMPP (Lưu ý tắt tất cả các port mà XAMPP đang chạy), nếu cần thiết thì ta nên khởi động lại máy.

        • Ứng dụng đã thực hiện được các chức năng cơ bản của một ứng dụng giao hàng. • Xây dựng được ứng dụng có UX/UI thân thiện với người dùng, dễ dàng và phù hợp với mọi lứa tuổi. • Việc sử dụng ứng dụng khá dễ dàng, có hướng dẫn chi tiết trong lúc dùng.

        Hình 7.1 Màn hình trang chủ
        Hình 7.1 Màn hình trang chủ