xây dựng website hệ thống quản lý học tập trực tuyến

Sự xuất hiện của các trung tâm đồng nghĩa với việc họ cần một hệ thống quản lý học tập cho học sinh để có thể tạo ra môi trường học tập thống nhất, quản lý số lượng cũng như chất lượng g

NỘI DUNG

Udemy là một nền tảng giáo dục trực tuyến nổi tiếng trên thế giới, số lượng lên đến hàng ngàn khóa học với nhiều chủ đề khác nhau từ nhiều nguồn và giáo viên khác nhau Ưu điểm:

• Đa dạng về nội dung

• Chất lượng khóa học không đồng đều bởi ai cũng có thể trở thành giáo viên trên Ucademy

• Một số khóa học không được cập nhật thường xuyên

ClassTime là một nền tảng giáo dục trực tuyến chuyên về kiểm tra và theo dõi hiệu suất học tập Ưu điểm:

• Tạo bài kiểm tra dễ dàng

• Phân loại và theo dõi kết quả tự động

• Giao diện dễ sử dụng

• Giới hạn về khả năng tích hợp với các nền tảng khác

• Gia hạn về chủ đề giáo dục

• ClassTime có thể yêu cầu về phí dịch vụ

KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

KHẢO SÁT HIỆN TRẠNG

Udemy là một nền tảng giáo dục trực tuyến nổi tiếng trên thế giới, số lượng lên đến hàng ngàn khóa học với nhiều chủ đề khác nhau từ nhiều nguồn và giáo viên khác nhau Ưu điểm:

• Đa dạng về nội dung

• Chất lượng khóa học không đồng đều bởi ai cũng có thể trở thành giáo viên trên Ucademy

• Một số khóa học không được cập nhật thường xuyên

ClassTime là một nền tảng giáo dục trực tuyến chuyên về kiểm tra và theo dõi hiệu suất học tập Ưu điểm:

• Tạo bài kiểm tra dễ dàng

• Phân loại và theo dõi kết quả tự động

• Giao diện dễ sử dụng

• Giới hạn về khả năng tích hợp với các nền tảng khác

• Gia hạn về chủ đề giáo dục

• ClassTime có thể yêu cầu về phí dịch vụ

XÁC ĐỊNH YÊU CẦU

Bảng 2 Yêu cầu chức năng

Học sinh (Student) - Xem các khóa học

- Xem thông tin cá nhân

- Download tài liệu tham khảo

- Đăng bài viết thảo luận

Người hướng dẫn (Instructor) - Xem các lớp học của cá nhân quản lý

- Quản lý bài kiểm tra

- Upload tài liệu tham khảo

Quản trị viên (Admin) - Quản lý khóa học

- Tích hợp thêm api ChatGPT 3.5 để tạo bộ câu hỏi theo chủ đề đưa ra

- Phát triển chức năng trả lời câu hỏi trong quá trình xem video bài giảng cho học sinh

CƠ SỞ LÝ THUYẾT

KIẾN TRÚC CHUNG CỦA HỆ THỐNG

Hình 1 Kiến trúc chung của hệ thống

REACTJS

React là một thư viện JavaScript được sử dụng để xây dựng giao diện người dùng Facebook và một cộng đồng phát triển mã nguồn mở quản lý nó Mặc dù React chỉ là một thư viện chứ không phải là một ngôn ngữ, nhưng nó rất phổ biến trong phát triển web Thư viện này xuất hiện lần đầu vào tháng 5 năm 2013 và hiện đang là một trong những thư viện frontend phổ biến nhất cho phát triển web

React cung cấp các phần mở rộng khác nhau để hỗ trợ toàn bộ kiến trúc ứng dụng, như Flux và React Native, không chỉ là giao diện người dùng

So với các công nghệ khác trên thị trường, React là một công nghệ mới Jordan Walke, một kỹ sư phần mềm tại Facebook, sáng lập thư viện vào năm 2011, đưa nó trở nên phổ biến Các công nghệ như XHP, một framework thành phần HTML đơn giản cho PHP, đã ảnh hưởng đến React Ứng dụng đầu tiên của React là newsfeed, ra mắt vào năm 2011 Sau đó, Instagram áp dụng và tích hợp nó vào nền tảng của họ

React cung cấp một số đặc điểm nổi bật làm cho nó trở thành thư viện phổ biến nhất cho phát triển ứng dụng frontend Dưới đây là danh sách những đặc điểm nổi bật đó:

- JSX (JavaScript Syntactic Extension): JSX là một mở rộng cú pháp của JavaScript Đây là một thuật ngữ được sử dụng trong React để mô tả cách giao diện người dùng nên hiển thị Bạn có thể viết cấu trúc HTML trong cùng một tệp với mã JavaScript bằng cách sử dụng JSX

- Virtual Document Object Model (DOM): Đây là phiên bản nhẹ của Real DOM trong React Việc thay đổi Real DOM một cách thủ công chậm hơn đáng kể so với việc thao tác Virtual DOM Khi trạng thái của một đối tượng thay đổi, Virtual DOM chỉ cập nhật đối tượng đó trong Real DOM thay vì cập nhật tất cả

Sử dụng cấu trúc JavaScript được biết đến là Virtual DOM Vì Virtual DOM của JavaScript nhanh hơn so với DOM truyền thống, điều này sẽ tăng tốc độ của các chương trình

React tích hợp nhiều kiến trúc khác nhau Việc sử dụng được với nhiều hệ thống và cả hai phía, cả client và server, là đáng khen ngợi

Các thành phần và nhận biết xu hướng giúp quản lý dễ dàng hơn cho các ứng dụng lớn bằng cách tăng tính rõ ràng; Các mô-đun và dữ liệu hợp lệ giúp quản lý dễ dàng hơn cho các ứng dụng lớn bằng cách tăng tính đọc dễ hiểu; React làm cho toàn bộ quá trình môi trường kịch bản trở nên đơn giản hơn; Nó làm cho việc bảo trì nâng cao dễ dàng hơn và tăng hiệu suất Đảm bảo tốc độ hiển thị nhanh hơn

Hơn nữa, ReactJS tạo điều kiện cho một giao diện người dùng tuyệt vời; ReactJS thân thiện với công cụ tìm kiếm; ReactJS được hỗ trợ bởi một cộng đồng lớn

Chỉ giải quyết góc và khoảng cách của ứng dụng; do đó, bạn phải chọn các kỹ thuật bổ sung nếu muốn có bộ sưu tập đầy đủ các công cụ phát triển

Sử dụng tập lệnh nội tuyến và JSX, điều mà một số lập trình viên có thể cảm thấy không thoải mái

SPRING

Spring Framework là một nền tảng Java cung cấp hỗ trợ cơ sở hạ tầng toàn diện cho việc phát triển ứng dụng Java Spring xử lý cơ sở hạ tầng để bạn có thể tập trung vào ứng dụng của mình

Spring cho phép bạn xây dựng ứng dụng từ "các đối tượng Java cũ đơn giản" (POJOs) và áp dụng các dịch vụ doanh nghiệp một cách không xâm phạ vào POJOs Khả năng này áp dụng cho mô hình lập trình Java SE và cho Java EE đầy đủ và bán phần

Spring cho phép các lập trình viên sử dụng POJOs, và việc sử dụng POJOs này sẽ đảm bảo bạn không cần phải làm việc với EJBs, ứng dụng, cấu hình, và luồng chúng sẽ trở nên đơn giản hơn Hơn nữa, Spring thường được tổ chức dựa trên tính modular, do đó số lượng các lớp và gói có thể trở nên khá lớn Tuy nhiên, người dùng chỉ cần quan tâm đến những gì họ cần và có thể bỏ qua phần còn lại

Spring thường được sử dụng để hỗ trợ nhiều loại công nghệ như ORM Framework, JEE, thư viện có khả năng tạo mã lập trình,

Module Web của Spring được thiết kế dựa trên mô hình MVC, nên có khả năng cung cấp một sự thay thế hoàn chỉnh cho các framework web tương tự như Struts

Framework Web của Spring, là một framework Web MVC với thiết kế tốt, sẽ giúp bạn thay thế Struts và các công nghệ ít phổ biến hơn

Spring có khả năng cung cấp một API thuận tiện để chuyển đổi các ngoại lệ cụ thể của công nghệ thành các ngoại lệ không kiểm soát và nhất quán

Container IoC nhẹ, do đó rất có lợi cho việc phát triển và triển khai ứng dụng mới trên máy tính có tài nguyên bộ nhớ và CPU hạn chế

Spring sẽ cung cấp một giao diện quản lý giao dịch nhất quán Từ đó, nó có thể mở rộng từ giao dịch cục bộ lên giao dịch toàn cầu.

MySQL

MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (Relational Database Management System, viết tắt là RDBMS) hoạt động theo mô hình client-server RDBMS

20 là một phần mềm hay dịch vụ dùng để tạo và quản lý các cơ sở dữ liệu (Database) theo hình thức quản lý các mối liên hệ giữa chúng

Cách vận hành chính trong môi trường MySQL:

- MySQL tạo ra bảng để lưu trữ dữ liệu, định nghĩa sự liên quan giữa các bảng đó

- Client sẽ gửi yêu cầu SQL bằng một lệnh đặc biệt trên MySQL

- Ứng dụng trên server sẽ phản hồi thông tin và trả về kết quả trên máy client

Hình 2 Vận hành giữa server và client

Cách ưu điểm của MySQL:

- Linh hoạt và dễ dùng

PHÂN TÍCH VÀ THIẾT KẾ PHẦN MỀM

MÔ HÌNH HÓA YÊU CẦU

3.1.2 Mô tả chi tiết usecase

Người dùng sử dụng chức năng này để đăng nhập vào hệ thống Đối tượng -

Người dùng đã có tài khoản

Người dùng đã đăng kí tài khoản trong hệ thống

Nếu đăng nhập thành công: Người dùng được xác thực và hệ thống hiển thị trang web tương ứng với từng quyền hạn của người dùng

Nếu đăng nhập không thành công: Người dùng không được xác thực và hiển thị thông báo

Use case bắt đầu khi người dùng truy cập vào trang login

1 Hệ thống hiển thị form đăng nhập

2 Người dùng nhập username và password

3 Hệ thống xác thực tài khoản thông qua jwt

4 Hệ thống thông báo đăng nhập thành công

5 Hệ thống mở các chức năng được phép truy cập của người dùng

Nếu người dùng nhập email và password không chính xác

1 Hệ thống hiển thị thông báo lỗi “Sai tài khoản hoặc mật khẩu”

2 Hệ thống yêu cầu người dùng đăng nhập lại

3 Bước 2 ở luồng cơ bản được thực hiện

Quy định nghiệp vụ - Professional regulations

Yêu cầu phi chức năng - Non- functional requirements

3.1.2.2 Chức năng chỉnh sửa thông tin tài khoản

Bảng 4 Usecase chỉnh sửa thông tin tài khoản

Tên - Name Chỉnh sửa thông tin cá nhân

Người dùng sử dụng chức năng chỉnh sửa thông tin cá nhân để thay đổi thông tin cá nhân Đối tượng -

Người dùng đã đăng nhập thành công

1 Người dùng nhấn vào avatar

2 Người dùng nhấn vào nút “Profile”

3 Người dùng chỉnh sửa thông tin muốn thay đổi

4 Người dùng nhấn nút “OK”

3.1.2.3 Chức năng làm bài quiz

Bảng 5 Usecase làm bài quiz

Tên - Name Làm bài quiz

Người dùng làm bài quiz của môn học Đối tượng -

Pre-conditions Đã đăng nhập thành công, tài khoản đã được kích hoạt

Các câu trả lời bài quiz của học sinh sẽ được lưu

1 Người dùng chọn vào bài quiz

2 Hệ thống hiển thị thông tin bài quiz

3 Người dùng chọn vào nút “Start”

4 Người dùng chọn câu trả lời cho các câu hỏi

5 Người dùng nhấn nút “Finish attempt” để kết thúc

Alternative flow Ở bước 5, nếu người dùng không nộp bài trong thời gian làm bài, hệ thống sẽ tự động nộp bài và kết thúc

Nếu quá hạn thời gian làm bài, bài quiz sẽ bị khóa, người dùng không thể tiếp tục làm bài quiz đó

3.1.2.4 Chức năng đăng bài thảo luận trong lớp học

Bảng 6 Usecase đăng bài thảo luận trong lớp học

Tên - Name Đăng bài thảo luận trong lớp học

Người dùng đặt câu hỏi và chia sẽ kiến thức trong lớp học và mọi người cùng thảo luận Đối tượng -

Học sinh, giáo viên của lớp học

Pre-conditions Đã đăng nhập thành công

1 Người dùng click nút “New post”

2 Người dùng nhập thông tin muốn thảo luận

3 Người dùng nhấn nút “Post” để đăng bài

3.1.2.5 Chức năng bình luận bài thảo luận trong lớp học

Bảng 7 Usecase bình luận bài thảo luận trong lớp học

Tên - Name Bình luận bài thảo luận trong lớp học

Người dùng trả lời, chia sẽ thông tin trong bài thảo luận Đối tượng -

Học sinh, giáo viên trong lớp học

1 Người dùng nhấn vào bất kỳ bài post

2 Người dùng nhấn nút “Reply”

3 Người dùng nhập nội dung

4 Người dùng nhấn nút “Send”

Alternative flow Ở bước 4, người dùng có thể hủy bình luận bằng cách nhấn nút

Yêu cầu phi chức năng - Non-

3.1.2.6 Chức năng thay đổi mật khẩu

Bảng 8 Usecase thay đổi mật khẩu

Tên - Name Thay đổi mật khẩu

Người dùng thay đổi mật khẩu Đối tượng -

3 Người dùng nhấn vào “Change password”

4 Nhập password cũ, password mới, xác nhận password

6 Hệ thống thông báo thay đổi mật khẩu thành công

Alternative flow Ở bước 5, thay vì chọn nút “Save”, người dùng có thể nhấn nút

“Cancel” để hủy thay đổi mật khẩu

3.1.2.7 Chức năng upload tài liệu

Bảng 9 Usecase upload tài liệu Tên - Name Upload tài liệu

Mô tả - Description Giáo viên upload tài liệu lên website để học sinh có thể tham khảo Đối tượng -

Người dùng đã login thành công

1 Giáo viên chọn một lớp học trong danh sách

2 Giáo viên nhấn “Upload” ở mỗi phần

3 Cửa sổ hiện ra, giáo viên chọn loại để upload lên

4 Giáo viên nhấn nút “Confirm”

5 Hệ thống cập nhật tài liệu cho học sinh

3.1.2.8 Chức năng download tài liệu

Bảng 10 Usecase download tài liệu

Tên - Name Download tài liệu

Người dùng có thể download tài liệu từ website Đối tượng -

1 Người dùng chọn một lớp học bất kỳ

2 Người dùng nhấn vào tài liệu bất kỳ

3 Hệ thống sẽ xử lý và download tài liệu

3.1.2.9 Chức năng tạo bài quiz

Bảng 11 Usecase tạo bài quiz

Tên - Name Tạo bài quiz

Giáo viên tạo bài quiz Đối tượng -

Người dùng đã login thành công và tài khoản đã được kích hoạt

1 Giáo viên chọn 1 lớp học bất kỳ

2 Giáo viên chọn nút “Upload” ở mỗi phần

3 Cửa sổ hiện ra, giáo viên chọn loại để tải lên (quiz – chọn loại có sẵn)

4 Giáo viên nhấn nút “Confirm”

5 Hệ thống cập nhật bài quiz trong lớp học

3.1.2.10 Chức năng chỉnh sửa bài quiz

Bảng 12 Usecase chỉnh sửa bài quiz

Tên - Name Chỉnh sửa bài quiz

Giáo viên chỉnh sửa bài quiz của lớp học Đối tượng -

1 Giáo viên chọn 1 lớp học trong danh sách

2 Giáo viên chọn bài quiz để chỉnh sửa ở mỗi phần

3 Hệ thống chuyển hướng đến trang bài quiz

4 Kiểm tra chọn lọc bài giảng

5 Cửa sổ xuất hiện và chỉnh sửa các thông tin khác

7 Hệ thống cập nhật bài quiz

3.1.2.11 Chức năng xóa bài quiz

Bảng 13 Usecase xóa bài quiz

Tên - Name Xóa bài quiz

Giáo viên xóa bài quiz Đối tượng -

1 Giáo viên chọn bài quiz để xóa

2 Hệ thống yêu cầu xác nhận

3.1.2.12 Chức năng quản lý người hướng dẫn

Bảng 14 Usecase quản lý người hướng dẫn

Tên - Name Quản lý người hướng dẫn

Những thông tin của người hướng dẫn được quản lý bời admin Đối tượng -

Người hướng dẫn đã đăng nhập thành công

1 Hệ thống hiển thị danh sách người hướng dẫn

2 Người quản trị lựa chọn các chức năng như thêm, xóa, chỉnh sửa thông tin của người hướng dẫn

3 Xác nhận thay đổi thông tin

4 Hệ thống kiểm tra thông tin

5 Hệ thống xác nhận thay đổi và reload lại trang quản lý người hướng dẫn

3.1.2.13 Chức năng quản lý học sinh

Bảng 15 Usecase quản lý học sinh

Tên - Name Quản lý học sinh

Những thông tin của học sinh được quản lý bời admin Đối tượng -

Học sinh đã đăng nhập thành công

1 Hệ thống hiển thị danh sách học sinh

2 Người quản trị lựa chọn các chức năng như thêm, xóa, chỉnh sửa thông tin của học sinh

5 Hệ thống xác nhận thay đổi và reload lại trang quản lý học sinh

3.1.2.14 Chức năng quản lý chuyên ngành

Bảng 16 Usecase quản lý chuyên ngành

Tên - Name Quản lý chuyên ngành

Những thông tin về chuyên ngành được quản lý bởi admin Đối tượng -

1 Hệ thống hiển thị danh sách các chuyên ngành

2 Người quản trị lựa chọn các chức năng như thêm, xóa, chỉnh sửa thông tin chuyên ngành

5 Hệ thống xác nhận thay đổi và reload lại trang quản lý chuyên ngành

3.1.2.15 Chức năng quản lý môn học

Bảng 17 Usecase quản lý môn học

Tên - Name Quản lý môn học

Những thông tin về môn học được quản lý bởi admin

Pre-conditions Đăng nhập thành công

1 Hệ thống hiển thị danh sách môn học

2 Người quản trị lựa chọn các chức năng như thêm, xóa, chỉnh sửa thông tin môn học

5 Hệ thống xác nhận thay đổi và reload lại trang quản lý môn học

3.1.2.16 Chức năng quản lý kỳ học

Bảng 18 Usecase quản lý kỳ học

Tên - Name Quản lý kỳ học

Những thông tin về kỳ học được quản lý bởi admin Đối tượng -

1 Hệ thống hiển thị danh sách kỳ học

2 Người quản trị lựa chọn các chức năng như thêm, xóa, chỉnh sửa thông tin của kỳ học

5 Hệ thống xác nhận thay đổi và reload lại trang quản lý kỳ học

3.1.2.17 Chức năng quản lý lớp học

Bảng 19 Usecase quản lý lớp học

Tên - Name Quản lý lớp học

Những thông tin về lớp học được quản lý bởi admin Đối tượng -

1 Hệ thống hiển thị danh sách lớp học

2 Người quản trị lựa chọn các chức năng như thêm, xóa, chỉnh sửa thông tin của lớp học

5 Hệ thống xác nhận thay đổi và reload lại trang quản lý lớp học

3.1.2.18 Chức năng thống kê điểm

Bảng 20 Usecase thống kê điểm

Tên - Name Thống kê điểm

Thống kê điểm số của học sinh Đối tượng -

Pre-conditions Đăng nhập thành công với tài khoản admin

Use case bắt đầu khi quản trị viên chọn mục thống kê:

1 Người quản trị chọn mục thống kê

2 Hệ thống thống kê điểm học phần của sinh viên

3.1.2.19 Chức năng xem điểm cá nhân

Bảng 21 Usecase xem điểm cá nhân

Tên - Name Xem điểm cá nhân

Học sinh xem thông tin điểm của mình Đối tượng -

Pre-conditions Đăng nhập thành công với tài khoản học sinh

2 Người dùng nhấn vào nút “Grades”

3 Người dùng chọn vào lớp học muốn xem điểm

4 Hiển thị danh sách các điểm số của lớp học đó

Học sinh và người hướng dẫn có thể nhắn tin với nhau Đối tượng -

Học sinh, người hướng dẫn

Pre-conditions Đăng nhập thành công với tài khoản học sinh hoặc người hướng dẫn

1 Người dùng nhấn vào icon tin nhắn trên header

2 Hiển thị danh sách những người đã nhắn tin trước đó (nếu có)

3 Nhấn vào tin nhắn của bất kỳ người hiển thị trong danh sách

4 Hiển thị popup nội dung tin nhắn cũ (nếu có)

5 Nhập nội dung muốn nhắn tin vào ô input

6 Nhấn enter hoặc nhấn nút gửi để gửi tin nhắn

Tại bước 3, nếu chưa nhắn tin với bất kỳ ai:

1 Người dùng nhập email của người muốn nhắn tin trên thanh tìm kiếm trong popup

2 Hiển thị người cần tìm kiếm

3 Nhấn vào người cần tìm kiếm

3.1.2.21 Chức năng xem thông tin cá nhân

Bảng 23 Usecase xem thông tin cá nhân

Tên - Name Xem thông tin cá nhân

Người dùng sử dụng có thể xem thông tin cá nhân của mình Đối tượng -

3 Hiển thị các thông tin của người dùng

3.1.2.22 Chức năng quản lý điểm số

Bảng 24 Usecase quản lý điểm số

Tên - Name Quản lý điểm số

Những điểm số của các học sinh theo từng bài kiểm tra trong lớp học Đối tượng -

2 Chọn vào một lớp học

3 Nhấn vào menu ở trên bên trái để hiển thị sidebar

4 Nhấn vào “Điểm số các thành viên”

5 Hiển thị danh sách các bài kiểm tra có trong lớp học

6 Nhấn vào một bài bất kỳ

7 Hiển thị danh sách điểm của các học sinh

3.1.2.23 Chức năng thêm học sinh vào lớp

Bảng 25 Usecase thêm học sinh vào lớp

Tên - Name Thêm học sinh vào lớp

Thêm học sinh mới vào lớp học Đối tượng -

2 Chọn vào một lớp học

4 Nhập email của học sinh muốn thêm vào lớp học

6 Hiển thị thông báo thành công

Nếu người hướng dẫn nhập email không chính xác:

1 Hệ thống hiển thị thông báo lỗi “Tài khoản chưa được đăng ký”

2 Hệ thống yêu cầu người dùng nhập lại Nếu người hướng dẫn nhập email đã có trong lớp học:

1 Hệ thống hiển thị thông báo “Thành viên này đã có trong lớp học”

Yêu cầu phi chức năng - Non-

LƯỢC ĐỒ TUẦN TỰ

Hình 5 Lược đồ chức năng đăng nhập

3.2.2 Chức năng chỉnh sửa thông tin tài khoản

Hình 6 Lược đồ chức năng chỉnh sửa thông tin tài khoản

3.2.3 Chức năng làm bài quiz

Hình 7 Lược đồ chức năng làm bài quiz

3.2.4 Chức năng đăng bài thảo luận trong lớp học

Hình 8 Lược đồ đăng bài thảo luận trong lớp học

3.2.5 Chức năng bình luận bài thảo luận trong lớp học

Hình 9 Lược đồ chức năng bình luận bài thảo luận trong lớp học

3.2.6 Chức năng upload tài liệu

Hình 10 Lược đồ chức năng upload tài liệu

3.2.7 Chức năng download tài liệu

Hình 11 Lược đồ chức năng download tài liệu

3.2.8 Chức năng tạo bài quiz

Hình 12 Lược đồ chức năng tạo bài quiz

3.2.9 Chức năng chỉnh sửa bài quiz

Hình 13 Lược đồ chức năng chỉnh sửa bài quiz

3.2.10 Chức năng xóa bài quiz

Hình 14 Lược đồ chức năng xóa bài quiz

3.2.11 Chức năng quản lý người hướng dẫn

Hình 15 Lược đồ chức năng quản lý người hướng dẫn

3.2.12 Chức năng quản lý học sinh

Hình 16 Lược đồ chức năng quản lý học sinh

3.2.13 Chức năng quản lý chuyên ngành

Hình 17 Lược đồ chức năng quản lý chuyên ngành

3.2.14 Chức năng quản lý môn học

Hình 18 Lược đồ chức năng quản lý môn học

3.2.15 Chức năng quản lý kỳ học

Hình 19 Lược đồ chức năng quản lý kỳ học

3.2.16 Chức năng quản lý lớp học

Hình 20 Lược đồ chức năng quản lý lớp học

LƯỢC ĐỒ LỚP

THIẾT KẾ CƠ SỞ DỮ LIỆU

3.4.1 Lược đồ thực thể kết hợp (ERD)

Hình 22 Lược đồ thực thể kết hợp

3.4.2 Chi tiết bảng dữ liệu

Bảng 26: Bảng mô tả dữ liệu "Chuyên ngành"

STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú

1 id int Id của bảng Khóa chính, tự động tăng

2 name varchar Tên chuyên ngành Not null

3 description text Mô tả chuyên ngành

4 is_deleted bit Trạng thái xóa

Bảng 27: Bảng mô tả dữ liệu “Môn học”

2 name varchar Tên môn học Not null

3 description text Mô tả về môn học

4 category_id int Mã id của chuyên ngành

Khóa ngoại liên kết đến id của chuyên ngành

Bảng 28: Bảng mô tả dữ liệu “Kỳ học”

2 name varchar Tên học kỳ Not null

3 start_date bigint Thời gian bắt đầu kỳ học

5 end_date bigint Thời gian kết thúc kỳ học

3.4.2.4 Bảng môn học trong học kỳ (course_per_cycle)

Bảng 29: Bảng mô tả dữ liệu “Môn học trong học kỳ”

2 course_id int Mã id của môn học

Khóa ngoại liên kết đến id của môn học

3 cycle_id int Mã id của học kỳ

Khóa ngoại liên kết đến id của học kỳ

4 course_start_date bigint Thời gian học bắt đầu

5 course_end_date bigint Thời gian học kết thúc

3.4.2.5 Bảng người hướng dẫn (instructor)

Bảng 30: Bảng mô tả dữ liệu “Người hướng dẫn”

2 email varchar Địa chỉ email của tài khoản Unique

3 username varchar Tên đăng nhập của tài khoản

4 password varchar Mật khẩu của tài khoản

5 is_actived int Trạng thái hoạt động

6 first_name varchar Tên người hướng dẫn

7 last_name varchar Họ lót người hướng dẫn

8 phone varchar Số điện thoại của tài khoản

9 create_date bigint Ngày tạo tài khoản

10 update_date bigint Ngày chỉnh sửa tài khoản

Bảng 31: Bảng mô tả dữ liệu “Học sinh”

2 email varchar Địa chỉ email của tài khoản Unique

3 Tên đăng nhập của tài khoản

4 password varchar Mật khẩu của tài khoản

5 is_actived role_id Trạng thái hoạt động

6 first_name varchar Tên người hướng dẫn

7 last_name varchar Họ lót người hướng dẫn

8 phone varchar Số điện thoại của tài khoản

9 created_date bigint Ngày tạo tài khoản

10 update_date bigint Ngày chỉnh sửa tài khoản

3.4.2.7 Bảng người hướng dẫn khóa học trong học kì (instructor_per_cycle)

Bảng 32: Bảng mô tả dữ liệu “Người hướng dẫn khóa học trong học kỳ”

1 instructor_id int Mã id của người hướng dẫn

Khóa chính, khóa ngoại liên kết đến id của người hướng dẫn

2 course_per_cycle_id int Mã id của môn học trong học kỳ

Khóa chính, khóa ngoại liên kết đến id của môn học trong học kỳ

Bảng 33: Bảng mô tả dữ liệu “Lớp học”

2 title varchar Tiêu đề của lớp học

3 class_date bigint Thời gian bắt đầu lớp học

Khóa ngoại liên kết đến id của người hướng dẫn

5 course_per_cycle_id int Mã id của môn học trong học kỳ

Khóa ngoại liên kết đến id của môn học trong học kỳ

6 quantity int Số lượng người trong lớp

3.4.2.9 Bảng đăng ký lớp học (enrollment)

Bảng 34: Bảng mô tả dữ liệu “Đăng ký lớp học”

2 class_id int Mã id của lớp học

Khóa ngoại liên kết đến id của lớp học

3 student_id int Mã id của học sinh

4 enrollment_date date Thời điểm đăng ký lớp học

5 cancelled bit Trạng thái hủy

3.4.2.10 Bảng người tham gia lớp học (attendance)

Bảng 35: Bảng mô tả dữ liệu “Người tham gia lớp học”

Khóa ngoại liên kết đến id của học sinh

4 attendance_date bigint Thời điểm tham gia lớp học

3.4.2.11 Bảng mục học tập của lớp (lesson)

Bảng 36: Bảng mô tả dữ liệu “Mục học tập của lớp”

2 title varchar Tiêu đề của mục học tập

3 content varchar Nội dung mô tả của mục học tập

Bảng 37: Bảng mô tả dữ liệu “Tài liệu”

2 title varchar Tiêu đề của tài liệu

3 content varchar Nội dung mô tả của tài liệu

4 type varchar Loại nội dung pdf, word

5 lesson_id int Mã id của mục học tập

Khóa ngoại liên kết đến id của mục học tập

7 created_date bigint Ngày tạo tài liệu

8 link varchar Đường dẫn đến tài liệu

9 extension varchar Phần mở rộng của tài liệu

Bảng 38: Bảng mô tả dữ liệu “Thảo luận”

2 title varchar Tiêu đề của thảo luận

3 content varchar Nội dung mô tả của thảo luận

4 type varchar Loại nội dung forum

Khóa ngoại liên kết đến id của mục học tâp

7 created_date bigint Ngày tạo thảo luận

3.4.2.14 Bảng bài viết thảo luận (post)

Bảng 39: Bảng mô tả dữ liệu “Bài viết thảo luận”

2 forum_id int Mã id của thảo luận

Khóa ngoại liên kết đến id của thảo luận

3 author_id int Mã id của người tạo bài viết

4 author_role varchar quyền hạn của người tạo bài viết

5 title varchar Tiêu đề của bài viết

6 content varchar Nội dung của bài viết

7 created_date bigint Ngày tạo bài viết

Bảng 40: Bảng mô tả dữ liệu “Bình luận”

2 comment varchar Nội dung bình luận

3 comment_id int Mã id của bình luận

Khóa ngoại liên kết đến id của bình luận

4 author_id int Mã id của người viết bình luận

Quyền hạn của người viết bình luận

6 post_id int Mã id của bài viết

Khóa ngoại liên kết đến id của bài viết

3.4.2.16 Bảng bài kiểm tra (test)

Bảng 41: Bảng mô tả dữ liệu “Bài kiểm tra”

2 title varchar Tiêu đề của bài kiểm tra

3 content varchar Nội dung mô tả của bài kiểm tra

4 type varchar Loại nội dung quiz

7 created_date bigint Thời gian tạo bài kiểm tra

8 test_date_start bigint Thời gian bắt đầu làm bài kiểm tra

Thời gian phải nhỏ hơn thời gian kết thúc

9 test_date_end bigint Thời gian kết thúc làm bài kiểm tra

Thời gian phải lớn hơn thời gian bắt đầu

Thời gian quy định làm bài kiểm tra

11 allowed_attempts int Số lần cho phép làm bài

12 sentences int Số câu hỏi

3.4.2.17 Bảng chi tiết bài kiểm tra (testDetail)

Bảng 42: Bảng mô tả dữ liệu “Chi tiết bài kiểm tra”

2 test_id int Mã id của bài kiểm tra

Khóa ngoại liên kết đến id của bài kiểm tra

3 question_id int Mã id của câu hỏi

Khóa ngoại liên kết đến id của câu hỏi

3.4.2.18 Bảng câu trả lời bài kiểm tra (test_choose)

Bảng 43: Bảng mô tả dữ liệu “Câu trả lời bài kiểm tra”

2 test_detail_id int Mã id của chi tiết bài kiểm tra

Khóa ngoại liên kết đến id của chi tiết bài kiểm tra

3 test_result_id int Mã id của kết quả bài kiểm tra

Khóa ngoại liên kết đến id của kết quả bài kiểm tra

4 chose varchar Đáp án đã lựa chọn

3.4.2.19 Bảng kết quả bài kiểm tra (test_result)

Bảng 44: Bảng mô tả dữ liệu “Kết quả bài kiểm tra”

2 score double Điểm làm bài kiểm tra

Khóa ngoại liên kết đến mã id của học sinh

4 test_id int Mã id của bài kiểm tra

Khóa ngoại liên kết đến mã

70 id của bài kiểm tra

Bảng 45: Bảng mô tả dữ liệu “Câu hỏi”

3 options text Đáp án lựa chọn

4 answer varchar Đáp án đúng

5 type_question_id int Loại câu hỏi

3.4.2.21 Bảng loại câu hỏi (question_type)

Bảng 46: Bảng mô tả dữ liệu “Loại câu hỏi”

2 name varchar Tên loại câu hỏi

3 alias varchar Viết tắt loại câu hỏi

Bảng 47: Bảng mô tả dữ liệu “Video”

2 title varchar Tiêu đề của viedeo

3 content varchar Nội dung mô tả của video

4 type varchar Loại nội dung video

7 created_date bigint Ngày tạo video

8 link varchar Đường dẫn đến video

9 prerequisite varchar Điều kiện tiên quyết để xem video

10 correct_question int Số câu hỏi đúng để pass video

3.4.2.23 Bảng câu hỏi của video (question_video)

Bảng 48: Bảng mô tả dữ liệu “Câu hỏi của video”

2 time_stop varchar Thời điểm làm câu hỏi

3 video_id int Mã id của video

Khóa ngoại liên kết đến id của video

4 question_id int Mã id của câu hỏi

Khóa ngoại liên kết đến id của câu hỏi

3.4.2.24 Bảng câu trả lời câu hỏi của video (video_test_choose)

Bảng 49: Bảng mô tả dữ liệu “Câu trả lời câu hỏi của video”

2 question_video_id int Mã id của câu hỏi video

Khóa ngoại liên kết đến id của câu hỏi video

3 video_test_result_id int Mã id của kết quả trả lời video

Khóa ngoại liên kết đến id của kết quả trả lời video

4 chose varchar Đáp án đã lựa chọn

3.4.2.25 Bảng kết quả trả lời video (video_test_result)

Bảng 50: Bảng mô tả dữ liệu “Kết quả trả lời video”

2 score double Điểm trả lời câu hỏi video

3 student int Mã id của học sinh

Khóa ngoại liên kết đến id của học sinh

4 video_id int Mã id của video

Khóa ngoại liên kết đến id của video

THIẾT KẾ GIAO DIỆN

3.5.1 Giao diện của học sinh

Hình 23 Giao diện trang đăng nhập

Hình 24 Giao diện trang home

3.5.1.3 Trang chi tiết lớp học

Hình 25 Giao diện trang chi tiết lớp học

Hình 26 Giao diện trang bài quiz

Hình 27 Giao diện trang video

Hình 28 Giao diện trang câu hỏi video

3.5.1.7 Trang thông tin cá nhân

Hình 29 Giao diện trang thông tin cá nhân

3.5.2 Giao diện của người hướng dẫn

Hình 30 Giao diện trang home (người hướng dẫn)

3.5.2.2 Trang chi tiết lớp học

Hình 31 Giao diện trang chi tiết lớp học

3.5.2.3 Trang chi tiết lớp học chế độ chỉnh sửa

Hình 32 Giao diện trang chi tiết lớp học chế độ chỉnh sửa

Hình 33 Giao diện trang tạo bài quiz

3.5.2.5 Danh sách các hoạt động tạo cho lớp học

Hình 34 Giao diện danh sách các hoạt động tạo cho lớp học

Hình 35 Giao diện trang tạo video

3.5.3 Giao diện của người quản trị

3.5.3.1 Trang quản lý học sinh

Hình 36 Giao diện trang quản lý học sinh

3.5.3.2 Trang quản lý người hướng dẫn

Hình 37 Giao diện trang quản lý người hướng dẫn

3.5.3.3 Trang quản lý lớp học

Hình 38 Giao diện trang quản lý lớp học

3.5.3.4 Trang quản lý chuyên ngành

Hình 39 Giao diện trang quản lý chuyên ngành

3.5.3.5 Trang quản lý môn học

Hình 40 Giao diện trang quản lý môn học

3.5.3.6 Trang quản lý kỳ học

Hình 41 Giao diện trang quản lý kỳ học

CÀI ĐẶT VÀ KIỂM THỬ

CÀI ĐẶT

Máy phải cài đặt các phần mềm sau:

4.1.2 Truy cập bằng trang web

Link deploy API backend: https://lms-project-final.herokuapp.com/

Link deploy Frontend quyền student, instructor: https://codex-cool-codex-cool- lmsfront.vercel.app/

Link deploy Frontend quyền Admin: https://codex-cool-codex-cool- backoffice.vercel.app/

Tên đăng nhập: admin Mật khẩu: 123456 Tài khoản instructor:

Tên đăng nhập: instructor1 Mật khẩu: 123456

Tên đăng nhập: student1 Mật khẩu: 123456

Link database: https://auth- db625.hstgr.io/index.php?db=u206789035_codex_db&fbclid=IwAR1QpgxzVipsq9VbFY TOR62dghiuQQlKD9s4C2WS5v8H2MJq-GzH8EtyiR8

Tên đăng nhập: u206789035_codex Mật khẩu: 3K/P9U#Za

4.1.3 Khởi động sản phẩm bằng source

Bước 1: Clone hoặc download project từ link gitlab:

• Backend: https://gitlab.com/co-dex/codex-cool/codex-cool-backend

• Phía frontend được chia thành 2 projects (codex-cool-lmsfront, codex-cool- backoffice) riêng biệt để dễ cho việc quản lý: o Source Admin: https://gitlab.com/co-dex/codex-cool/codex-cool- backoffice o Source Instructor, Student: https://gitlab.com/co-dex/codex-cool/codex- cool-lmsfront

• Sau khi clone source backend về máy, chuột phải vào thư mục code và chọn open with intellij idea

• Sau đó mở source code bằng intellij idea và chờ idea load các cài đặt project xong, bấm nút start để khởi động

• Sau khi clone source frontend về máy, mở source bằng visual studio code

• Mở terminal và gõ lệnh npm i để cài đặt tất cả các thư viện

• Sau khi cài đặt thư viện hoàn thành, gõ lệnh npm start để chạy source

KIỂM THỬ

Mục đích của việc kiểm tra nhằm đảm bảo ứng dụng đáp ứng được các chức năng hoạt động được trong quá trình người dùng sử dụng

Website học tập trực tuyến bao gồm phần Front-end sẽ xử lý giao diện và Back-end sẽ xử lý các dữ liệu được gửi từ Front-end hoặc lấy từ cơ sở dữ liệu để phản hồi cho Front- end hoặc lưu vào cơ sở dữ liệu

Description Test steps Expected Output Result

_001 Kiểm tra việc đăng nhập khi chưa có tài khoản

1 Nhập tên đăng nhập và mật khẩu chưa đăng kí trong hệ thống

Hiện ra thông báo “Sai tài khoản hoặc mật khẩu”

_002 Đăng nhập trang student và instructor

1 Nhập email và password của tài khoản user

2 Nhấn nút Đăng nhập Đăng nhập thành công hệ thống chuyển sang trang HomePage Đăng nhập thất bại sẽ show lỗi ra màn hình

1 Nhập email và password của tài khoản admin

2 Nhấn nút Sign In Đăng nhập thành công hệ thống chuyển sang trang quản lý của admin Đăng nhập thất bại reload trang yêu cầu nhập lại

4.2.3.2 Chức năng thêm môn học

Description Test steps Expected Output Result

_001 Kiểm tra việc tạo môn học

1 Không nhập tên môn học

“ [ Name Of Course ] is require.”

Tạo môn học 1 Nhập thông tin môn học

Tạo môn học thành công, load lại danh sách môn học

Tiêu đề	Xây dựng Website hệ thống quản lý học tập trực tuyến
Tác giả	Nguyễn Hữu Hiếu, Lê Văn Tuấn
Người hướng dẫn	TS. Lê Vĩnh Thịnh
Trường học	Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh
Chuyên ngành	Công nghệ Thông tin
Thể loại	Đồ án tốt nghiệp
Năm xuất bản	2023
Thành phố	Thành phố Hồ Chí Minh

Định dạng
Số trang	97
Dung lượng	8,4 MB