Báo cáo cuối kỳ Xây dựng Website học tập môn Lập trình Web | Học viện Công Nghệ Bưu Chính Viễn Thông

lOMoAR cPSD| 58737056 lOMoAR cPSD| 58737056 Mục lục
CHƯƠNG 1: GIỚI THIỆU CHUNG ................................................................................................. 5
1.1 Bối cảnh và lý do chọn đề tài.................................................................................................... 5
1.2 Mục tiêu của đề tài .................................................................................................................... 5
1.3. Phạm vi nghiên cứu ................................................................................................................. 6
1.4. Phương pháp nghiên cứu ......................................................................................................... 7
1.5. Công nghệ được sử dụng ......................................................................................................... 7
1.6. Các công cụ hỗ trợ ................................................................................................................... 8
1.7. Tổng kết chương ...................................................................................................................... 8
CHƯƠNG 2: NỀN TẢNG KỸ THUẬT - CÔNG NGHỆ ................................................................. 8
2.1 Frontend .................................................................................................................................... 8
2.1.1 ReactJS ............................................................................................................................... 8
2.1.2 Tailwind CSS ...................................................................................................................... 9
2.2. Backend ................................................................................................................................... 9
2.2.1 Node.js ................................................................................................................................ 9
2.2.2 Express.js .......................................................................................................................... 10
2.3. Cơ sở dữ liệu .......................................................................................................................... 10
2.3.1 MongoDB ......................................................................................................................... 10
2.3.2 Mongoose ......................................................................................................................... 11
2.4. Tổng kết chương .................................................................................................................... 11
CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG ............................................................... 12
3.1. Phân tích yêu cầu hệ thống .................................................................................................... 12
3.1.1. Các tác nhân chính .......................................................................................................... 12
3.1.2. Yêu cầu chức năng .......................................................................................................... 12
3.1.3. Yêu cầu phi chức năng .................................................................................................... 13
3.2 Use Case tổng quan ................................................................................................................ 13
3.3 Đặc tả usecase ......................................................................................................................... 15 lOMoAR cPSD| 58737056
3.4 Biểu đồ tuần tự ........................................................................................................................ 22
3.4.1. Đăng nhập ........................................................................................................................ 22
3.4.2 Tìm kiếm và xem chi tiết khóa học .................................................................................. 23
3.4.3 Tham gia khóa học ........................................................................................................... 24
3.4.4 Thêm khóa học vào mục yêu thích ................................................................................... 25
3.4.5 Xem và hoàn thành bài giảng ........................................................................................... 26
3.4.6 Thêm comment và chỉnh sửa comment ............................................................................ 27
3.4.7 Xóa comment ................................................................................................................... 28
3.4.8 Thêm khóa học ................................................................................................................. 29
3.4.9 Chỉnh sửa khóa học .......................................................................................................... 30
3.4.10 Xóa khóa học .................................................................................................................. 31
3.4.11 Thêm và chỉnh sửa bài giảng .......................................................................................... 32
3.4.12 Xóa bài giảng.................................................................................................................. 33
3.4.13 Quản lý user.................................................................................................................... 34
3.5 Thiết kế cơ sở dữ liệu ............................................................................................................. 35
3.6 Tổng kết chương ..................................................................................................................... 37
CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ HỆ THỐNG ................................................................... 37
4.1 Kiến trúc hệ thống .................................................................................................................. 37
4.2 Công cụ và thư viện hỗ trợ ..................................................................................................... 38
4.2.1. Công cụ ............................................................................................................................ 38
4.2.2. Framework và thư viện .................................................................................................... 39
4.3. Thử nghiệm và đánh giá ........................................................................................................ 39
4.3.1. Giao diện cho người dùng ............................................................................................... 39
4.3.2. Giao diện cho admin ....................................................................................................... 44
CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN ................................................................. 47
5.1. Kết luận .................................................................................................................................. 47
5.2. Các hạn chế cần khắc phục .................................................................................................... 48 lOMoAR cPSD| 58737056
5.3. Hướng phát triển trong tương lai ........................................................................................... 49
DANH MỤC HÌNH ẢNH
Hình 1: Usecase tổng quan toàn hệ thống ......................................................................... 14
Hình 2: Biểu đồ tuần tự đăng nhâp.................................................................................... 22
Hình 3: Biểu đồ tuần tự tìm kiếm và xem chi tiết khóa học ............................................. 23
Hình 4: Biểu đồ tuần tự tham gia khóa học ....................................................................... 24
Hình 5: Biểu đồ tuần tự thêm khóa học vào mục yêu thích .............................................. 25
Hình 6: Biểu đồ tuần tự xem và hoàn thành bài giảng ...................................................... 26
Hình 7: Biểu đồ tuần tự thêm comment và chỉnh sửa comment ....................................... 27
Hình 8: Biểu đồ tuần tự xóa comment .............................................................................. 28
Hình 9: Biểu đồ tuần tự thêm khóa học ............................................................................ 29
Hình 10: Biểu đồ tuần tự chỉnh sửa khóa học ................................................................... 30
Hình 11: Biểu đồ tuần tự xóa khóa học ............................................................................. 31
Hình 12: Biểu đồ tuần tự thêm và chỉnh sửa bài giảng ..................................................... 32
Hình 13: Biểu đồ tuần tự xóa bài giảng............................................................................. 33
Hình 14: Biểu đồ tuần tự quản lý user............................................................................... 34
Hình 15: Sơ đồ kiến trúc hệ thống .................................................................................... 37
Hình 16: Giao diện đăng nhập ........................................................................................... 39
Hình 17: Giao diện trang chủ ............................................................................................ 39
Hình 18: Giao diện tìm kiếm khóa học ............................................................................. 40
Hình 19: Giao diện chi tiết khóa học ................................................................................. 40
Hình 20: Phần đăng nhập trong giao diên chi tiết khóa học ............................................. 41
Hình 21: Giao diện học bài giảng ...................................................................................... 41
Hình 22: Phần ChatBot hỗ trợ học tập .............................................................................. 42
Hình 23: Giao diện hồ sơ người dùng ............................................................................... 42
Hình 24: Giao diện giới thiệu ............................................................................................ 43 lOMoAR cPSD| 58737056
Hình 25: Giao diện liên hệ ................................................................................................ 43
Hình 26: Giao diện quản lý khóa học ................................................................................ 44
Hình 27: Giao diện chỉnh sửa cập nhật khóa học .............................................................. 44
Hình 28: Giao diện quản lý bài giảng ............................................................................... 45 Hình
29: Giao diện chỉnh sửa cập nhật bài giảng ............................................................. 45
Hình 30: Giao diện quản lý học sinh ................................................................................. 46
Hình 31: Giao diện xem thông tin tiến trình các khóa học đã đăng ký của học sinh ........ 46
CHƯƠNG 1: GIỚI THIỆU CHUNG
1.1 Bối cảnh và lý do chọn đề tài
Trong những năm gần đây, công nghệ giáo dục và mô hình học trực tuyến đã phát triển
mạnh mẽ àn cầu, đặc biệt là sau đại dịch COVID-19. Theo báo cáo của Bộ Giáo dục và
Đào tạo Việt Nam, số lượng người học tham gia các nền tảng học trực tuyến tăng trưởng
vượt bậc, tạo ra nhu cầu lớn về các hệ thống quản lý học tập (Learning Management
System - LMS) hiện đại, dễ sử dụng và hiệu quả.
Tuy nhiên, nhiều trung tâm đào tạo nhỏ và cá nhân giảng viên vẫn gặp khó khăn trong
việc triển khai một nền tảng LMS riêng vì hạn chế về chi phí và kỹ thuật. Xuất phát từ
thực tế đó, đề tài "Xây dựng website học tập trực tuyến (LMS)" được thực hiện với các mục tiêu: •
Cung cấp nền tảng học trực tuyến dễ sử dụng, thân thiện cho người học và giảng viên. •
Hỗ trợ quản lý khóa học, bài giảng, tiến trình học tập, bình luận, đánh giá và tương tác trong quá trình học.
1.2 Mục tiêu của đề tài
Đề tài "Xây dựng website học tập trực tuyến" được thực hiện nhằm các mục tiêu sau: •
Xây dựng hệ thống học trực tuyến hỗ trợ tạo khóa học, bài giảng và quản lý tiến trình học tập. lOMoAR cPSD| 58737056 •
Đảm bảo trải nghiệm người dùng thân thiện, tương thích với cả desktop và mobile. •
Hỗ trợ các chức năng: quản lý khóa học, người dùng, tiến trình học và yêu thích khóa học. •
Tạo giao diện quản trị dành cho quản trị viên để quản lý người dùng, khóa học, bài giảng. •
Ứng dụng các công nghệ hiện đại như ReactJS, Tailwind CSS, Node.js,
MongoDB để tạo ra hệ thống dễ mở rộng, dễ bảo trì. 1.3. Phạm vi nghiên cứu
Đề tài tập trung phát triển hệ thống quản lý học tập trực tuyến dành cho hai đối tượng
chính: Người học (Student) và Quản trị viên/Giảng viên (Admin/Instructor).
Các chức năng chính bao gồm: • Cho người học:
o Xem danh sách khóa học, tìm kiếm khóa học.
o Xem chi tiết khóa học, bài giảng. o Tham gia khóa học, theo dõi tiến trình
học. o Thêm khóa học vào danh sách yêu thích.
o Tham gia bình luận và trả lời bình luận trong khóa học.
o Đăng ký/Đăng nhập, quản lý tài khoản cá nhân. •
Cho quản trị viên/giảng viên:
o Quản lý người dùng, khóa học, bài giảng. o Thêm, chỉnh sửa, xóa khóa học, bài giảng.
Phạm vi không bao gồm: lOMoAR cPSD| 58737056 •
Hệ thống thanh toán và đăng ký khóa học có phí. •
Hệ thống livestream hoặc tương tác thời gian thực.
1.4. Phương pháp nghiên cứu
Các phương pháp được sử dụng trong quá trình thực hiện đề tài bao gồm: •
Phân tích yêu cầu: Thu thập và phân tích các nhu cầu thực tế của người học và giảng viên. •
Mô hình hóa hệ thống: Sử dụng sơ đồ Use Case, sơ đồ lớp, sơ đồ ERD và sơ đồ
tuần tự để thiết kế hệ thống. •
Phát triển hệ thống:
o Frontend: ReactJS, Tailwind CSS. o Backend: Node.js, MongoDB. •
Kiểm thử chức năng: Thực hiện kiểm thử API bằng Postman, kiểm thử giao
diện người dùng và logic hệ thống trên trình duyệt. •
Triển khai demo hệ thống: Chạy hệ thống trên môi trường localhost hoặc server
thử nghiệm để trình bày sản phẩm.
1.5. Công nghệ được sử dụng Thành phần Công nghệ Frontend ReactJS, Tailwind CSS Backend Node.js + Express Cơ sở dữ liệu MongoDB Lưu trữ hình ảnh Cloudinary Kiểm thử API Postman lOMoAR cPSD| 58737056
1.6. Các công cụ hỗ trợ
● Visual Studio Code: Soạn thảo mã nguồn frontend/backend
● MongoDB Atlas: Dịch vụ lưu trữ cơ sở dữ liệu trên cloud
● Postman: Kiểm thử API REST 1.7. Tổng kết chương
Chương này đã trình bày tổng quan về sự phát triển mạnh mẽ của công nghệ giáo dục và
xu hướng học trực tuyến, lý do lựa chọn đề tài xây dựng website quản lý học tập trực
tuyến (LMS), các mục tiêu cụ thể, phạm vi nghiên cứu, phương pháp thực hiện, cùng
với các công nghệ và công cụ được sử dụng trong quá trình phát triển hệ thống.
Chương tiếp theo sẽ trình bày cơ sở lý thuyết và các công nghệ liên quan đến hệ thống
quản lý học tập trực tuyến.
CHƯƠNG 2: NỀN TẢNG KỸ THUẬT - CÔNG NGHỆ 2.1 Frontend 2.1.1 ReactJS
ReactJS là một thư viện JavaScript mã nguồn mở do Facebook phát triển, được sử dụng
để xây dựng giao diện người dùng (User Interface) cho các ứng dụng web. React hoạt
động dựa trên kiến trúc Component-based, giúp chia nhỏ giao diện thành các thành
phần độc lập, có khả năng tái sử dụng cao.
Ưu điểm của ReactJS:
● JSX (JavaScript XML): Cho phép viết mã HTML trong JavaScript, giúp code
rõ ràng và dễ hiểu hơn.
● Virtual DOM: React sử dụng DOM ảo để cập nhật chỉ những phần giao diện
thay đổi, giúp tối ưu hiệu suất.
● One-way data binding: Luồng dữ liệu một chiều giúp dễ quản lý trạng thái và debug.
● Tái sử dụng component: Giúp tăng tốc độ phát triển, bảo trì và mở rộng giao diện. lOMoAR cPSD| 58737056
● Hooks: Cho phép quản lý state và vòng đời component hiệu quả hơn trong các function component.
Lý do sử dụng trong đề tài:
● Giao diện React dễ xây dựng, mở rộng và phù hợp với hệ thống nhiều chức năng.
● Hỗ trợ tốt khi kết hợp với Tailwind CSS, Redux Toolkit và hệ thống routing SPA (Single Page Application).
● Có cộng đồng lớn, tài liệu phong phú.
React phù hợp cho các ứng dụng web tương tác cao, cần tốc độ phản hồi nhanh và dễ mở rộng về sau. 2.1.2 Tailwind CSS
Tailwind CSS là một framework CSS dạng tiện ích (utility-first) cho phép xây dựng
giao diện nhanh chóng bằng cách sử dụng các class có sẵn thay vì viết CSS thuần.
Ưu điểm của Tailwind CSS:
● Phát triển nhanh chóng nhờ sử dụng các class tiện ích
● Giao diện nhất quán và dễ tùy chỉnh thông qua file tailwind.config.js.
● Responsive design: Hỗ trợ tốt việc hiển thị giao diện trên nhiều thiết bị (mobile, tablet, desktop).
● Không bị trùng lặp CSS: Không cần viết lại CSS cho từng component, giảm
thiểu xung đột về kiểu dáng. Lý do sử dụng:
● Giao diện website cần hiện đại, thân thiện, responsive.
● Tailwind giúp tiết kiệm thời gian xây dựng UI so với Bootstrap hoặc CSS thuần.
Tailwind CSS giúp nhà phát triển tập trung vào logic thay vì dành quá nhiều thời gian
viết và tổ chức CSS phức tạp. 2.2. Backend 2.2.1 Node.js
Node.js là môi trường chạy JavaScript phía máy chủ, được xây dựng trên nền tảng V8
Engine của Google Chrome. Node.js sử dụng mô hình bất đồng bộ (asynchronous) và
hướng sự kiện (event-driven), cho phép xây dựng các ứng dụng web hiệu suất cao với
khả năng xử lý nhiều kết nối cùng lúc. lOMoAR cPSD| 58737056
Đặc điểm nổi bật:
● Single-threaded + Event loop: Không tạo luồng mới cho mỗi request, tránh tốn tài nguyên.
● Cùng sử dụng JavaScript với frontend: Giúp đồng bộ logic và dễ học hơn cho lập trình viên web.
● Thư viện phong phú từ npm: Có hơn 1 triệu gói sẵn sàng dùng. Lý do sử dụng:
● Xây dựng RESTful API đơn giản, gọn gàng.
● Phù hợp với hệ thống real-time, hiệu suất cao. 2.2.2 Express.js
Express.js là một framework nhẹ cho Node.js, giúp xây dựng các ứng dụng web và API
một cách dễ dàng. Express cung cấp hệ thống routing, middleware linh hoạt và dễ cấu hình.
Các chức năng chính:
• Routing: Xây dựng các API theo chức năng như khóa học, bài giảng, tiến trình học
● Middleware: Dễ dàng thêm xác thực, kiểm tra token, xử lý lỗi,...
● Tích hợp thư viện khác dễ dàng: Ví dụ: bcrypt, jsonwebtoken, cors, bodyparser. Lý do sử dụng:
● Dễ viết, dễ đọc, dễ debug.
● Được cộng đồng sử dụng rộng rãi, có nhiều ví dụ, thư viện mở rộng. 2.3. Cơ sở dữ liệu 2.3.1 MongoDB
MongoDB là hệ quản trị cơ sở dữ liệu NoSQL phổ biến, lưu trữ dữ liệu dưới dạng các
tài liệu BSON (tương tự JSON). Khác với cơ sở dữ liệu quan hệ, MongoDB không yêu
cầu schema cố định, giúp linh hoạt hơn trong thiết kế và mở rộng dữ liệu. Ưu điểm: lOMoAR cPSD| 58737056
● Linh hoạt: Không cần định nghĩa bảng hay schema cố định như SQL.
● Mở rộng tốt: Dễ dàng mở rộng theo chiều ngang (horizontal scaling).
● Tốc độ truy vấn nhanh: Đặc biệt phù hợp với dữ liệu phi cấu trúc hoặc bán cấu trúc.
MongoDB phù hợp với các ứng dụng web cần lưu trữ dữ liệu đa dạng, dễ thay đổi và có
cấu trúc lồng nhau (nested). Lý do sử dụng:
● Kết hợp tốt với Node.js qua thư viện Mongoose.
● Dễ cài đặt, vận hành và mở rộng khi dữ liệu tăng. 2.3.2 Mongoose
Mongoose là thư viện ODM cho Node.js và MongoDB, giúp định nghĩa rõ ràng schema
và các mối quan hệ trong hệ thống LMS. Tính năng chính: •
Định nghĩa schema cho các bảng như User, Course, Lecture, Comment, CourseProgress. •
Hỗ trợ validation, middleware, xử lý mối quan hệ giữa các collection. •
Hỗ trợ các thao tác CRUD đơn giản và rõ ràng. Lý do sử dụng: •
Quản lý dữ liệu có cấu trúc dễ dàng. •
Dễ dàng thao tác, mở rộng và kiểm soát dữ liệu trong LMS. 2.4. Tổng kết chương
Trong chương này, các công nghệ chính của hệ thống website quản lý học tập trực tuyến
đã được trình bày chi tiết, bao gồm: •
ReactJS và Tailwind CSS: Xây dựng giao diện người dùng hiện đại, tối ưu trải nghiệm học tập. lOMoAR cPSD| 58737056 •
Node.js và Express.js: Xây dựng backend API với hiệu suất cao, dễ phát triển và bảo trì. •
MongoDB và Mongoose: Lưu trữ và quản lý dữ liệu linh hoạt, phù hợp với hệ
thống có cấu trúc phức tạp như LMS.
Việc nắm vững các công nghệ này là tiền đề quan trọng để phát triển và triển khai hệ
thống LMS hiệu quả và bền vững trong tương lai.
CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
3.1. Phân tích yêu cầu hệ thống 3.1.1. Các tác nhân chính
Hệ thống website quản lý học tập trực tuyến phục vụ 2 nhóm tác nhân chính: •
Học viên: Người dùng tham gia vào hệ thống để tìm kiếm khóa học, đăng ký
khóa học, tham gia học tập, theo dõi tiến trình, bình luận khóa học và quản lý thông tin cá nhân. •
Quản trị viên/Giảng viên (Admin/Instructor): Người có quyền quản lý toàn bộ
hệ thống, bao gồm quản lý khóa học, người dùng, nội dung bài giảng và thống kê số liệu học tập.
3.1.2. Yêu cầu chức năng
Đối với học viên: •
Đăng ký/Đăng nhập hệ thống. •
Xem danh sách khóa học theo danh mục và cấp độ. •
Tìm kiếm khóa học theo tên hoặc từ khóa. •
Xem chi tiết khóa học: thông tin tổng quan, danh sách bài giảng. •
Ghi danh và bắt đầu học khóa học. •
Theo dõi tiến trình học tập cá nhân. lOMoAR cPSD| 58737056 •
Đánh giá khóa học và bình luận. •
Quản lý thông tin cá nhân và danh sách khóa học yêu thích.
Đối với quản trị viên: •
Quản lý khóa học (thêm/sửa/xóa khóa học). •
Quản lý bài giảng trong từng khóa học. •
Quản lý người dùng (xem danh sách, chặn/bỏ chặn tài khoản). • Kiểm duyệt bình luận. •
Thống kê số lượng học viên, khóa học và tổng số lượt đăng ký khóa học.
3.1.3. Yêu cầu phi chức năng
● Tính khả dụng: Hệ thống dễ sử dụng, thân thiện với người dùng, hỗ trợ responsive.
● Tính bảo mật: Xác thực người dùng bằng JWT, mã hóa mật khẩu với bcrypt.
● Tính mở rộng: Có thể tích hợp thêm thanh toán online cho các khóa học trả phí,
chatbot hỗ trợ học tập.
● Tính hiệu quả: Thời gian phản hồi nhanh, truy vấn dữ liệu hợp lý.
● Tính bảo trì: Mã nguồn tách biệt frontend/backend, dễ chỉnh sửa và nâng cấp. 3.2 Use Case tổng quan
Các chức năng chính được mô hình hóa qua sơ đồ Use Case gồm: lOMoAR cPSD| 58737056
Hình 1: Usecase tổng quan toàn hệ thống
Đối với học viên: • Đăng ký tài khoản. • Đăng nhập hệ thống. •
Tìm kiếm và xem danh sách khóa học. •
Xem chi tiết khóa học và ghi danh. •
Tham gia học tập và theo dõi tiến trình. • Bình luận khóa học. •
Quản lý thông tin cá nhân và danh sách khóa học yêu thích.
Đối với quản trị viên: •
Quản lý khóa học (thêm/sửa/xóa khóa học). •
Quản lý bài giảng trong từng khóa học. •
Quản lý người dùng (xem danh sách, chặn/bỏ chặn). •
Thống kê số lượng học viên, khóa học và tổng số lượt đăng ký khóa học. lOMoAR cPSD| 58737056 3.3 Đặc tả usecase
Usecase: Đăng nhập hệ thống Tên usecase Đăng nhập hệ thống Actor Người dùng Tiền điều kiện
Người dùng muốn đăng nhập vào hệ thống Hậu điều kiện
Người dùng đăng nhập thành công vào hệ thống Kịch bản
1. Người dùng truy cập vào hệ thống.
2. Hệ thống hiển thị giao diện trang chủ bao gồm: danh sách
khóa học, các khóa học nổi bật, các khóa học mới, thanh
tìm kiếm, đường dẫn "Đăng nhập" và "Đăng ký".
3. Người dùng chọn "Đăng nhập".
4. Hệ thống hiển thị giao diện đăng nhập.
5. Người dùng nhập tài khoản và mật khẩu, sau đó nhấn nút "Đăng nhập".
6. Hệ thống chuyển về trang chủ và hiển thị tên tài khoản ở
góc phải, danh sách khóa học nổi bật, khóa học mới. Ngoại lệ
5. Người dùng nhập sai tài khoản hoặc mật khẩu.
5.1 Hệ thống thông báo “Tài khoản hoặc mật khẩu không chính xác”
5. Staff nhập tài khoản không tồn tại
5.1 Hệ thống thông báo “Tài khoản không tồn tại” lOMoAR cPSD| 58737056
Usecase: Tìm kiếm khóa học Tên usecase Tìm kiếm khóa học Actor Người dùng Tiền điều kiện Hậu điều kiện
Tìm kiếm khóa học thành công Kịch bản 1.
Người dùng truy cập vào hệ thống 2.
Hệ thống hiển thị giao diện gồm trang chủ của hệ thống
website, danh sách khóa học nổi bật, khóa học mới. 3.
Người dùng nhập từ khóa vào thanh tìm kiếm và nhấn nút tìm kiếm. 4.
Hệ thống hiển thị kết quả tìm kiếm tương ứng với từ khóa. Ngoại lệ
4. Hệ thống thông báo "Không tìm thấy kết quả."
Usecase: Xem chi tiết khóa học Tên usecase Xem chi tiết khóa học Actor Người dùng Tiền điều kiện
Người dùng muốn xem chi tiết khóa học lOMoAR cPSD| 58737056 Hậu điều kiện
Xem chi tiết khóa học thành công Kịch bản 1.
Người dùng click vào một khóa học trên hệ thống. 2.
Hệ thống hiển thị chi tiết khóa học bao gồm: Tên khóa
học, mô tả, giảng viên, danh sách bài giảng, tiến trình học, các
bình luận của khóa học, nút "Bắt đầu học" hoặc "Tiếp tục học". Ngoại lệ Không có ngoại lệ
Usecase: Bình luận khóa học Tên usecase Bình luận khóa học Actor Người dùng Tiền điều kiện
Người dùng đã đăng nhập vào hệ thống Hậu điều kiện
Bình luận được thêm thành công vào khóa học Kịch bản
1. Người dùng truy cập vào trang chi tiết của khóa học 2.
Người dùng nhập nội dung bình luận vào ô bình luận. 3.
Người dùng nhấn nút "Gửi bình luận". 4.
Hệ thống hiển thị bình luận mới vừa được thêm vào danh
sách bình luận của khóa học. lOMoAR cPSD| 58737056
4. Nếu bình luận trống hoặc quá giới hạn ký tự, hệ thống hiển Ngoại lệ
thị thông báo lỗi "Nội dung bình luận không hợp lệ".
Usecase: Quản lý khóa học yêu thích Tên usecase
Quản lý khóa học yêu thích Actor Người dùng Tiền điều kiện
Người dùng đã đăng nhập vào hệ thống
Khóa học được thêm hoặc xóa khỏi danh sách yêu thích của Hậu điều kiện người dùng Kịch bản 1.
Người dùng truy cập vào trang chi tiết của khóa học. 2.
Người dùng nhấn vào biểu tượng "Thêm vào yêu thích"
(nếu khóa học chưa được thêm). 3.
Hệ thống lưu khóa học vào danh sách yêu thích của
người dùng và cập nhật trạng thái nút thành "Đã yêu thích" hoặc "Bỏ yêu thích". 4.
Nếu người dùng nhấn lại vào biểu tượng "Bỏ yêu thích",
hệ thống sẽ xóa khóa học khỏi danh sách yêu thích của người
dùng và cập nhật lại nút thành "Thêm vào yêu thích". Ngoại lệ Không có ngoại lệ
Usecase: Ghi danh và học tập Tên usecase Ghi danh và học tập Actor Người dùng lOMoAR cPSD| 58737056 Tiền điều kiện
Người dùng đã đăng nhập vào hệ thống Hậu điều kiện
Người dùng ghi danh và bắt đầu học khóa học Kịch bản 1.
Người dùng truy cập vào trang chi tiết khóa học. 2.
Người dùng nhấn nút "Ghi danh". 3.
Hệ thống ghi nhận việc ghi danh và chuyển người dùng
đến giao diện bài giảng đầu tiên của khóa học. 4.
Người dùng bắt đầu học bài giảng. 5.
Sau khi hoàn thành bài giảng, người dùng nhấn nút
"Hoàn thành" để xác nhận hoàn thành bài giảng. 6.
Hệ thống cập nhật tiến trình học và tự động chuyển sang bài giảng tiếp theo. 7.
Người dùng có thể lựa chọn học bài giảng theo thứ tự
hoặc chọn bài giảng bất kỳ để học. 8.
Hệ thống liên tục cập nhật tiến trình học của người dùng. Ngoại lệ Không có ngoại lệ
Usecase: Admin thêm khóa học Tên usecase Admin thêm khóa học Actor Admin Tiền điều kiện
Admin đã đăng nhập vào hệ thống Hậu điều kiện
Thêm khóa học thành công lOMoAR cPSD| 58737056 Kịch bản 1.
Admin click vào nút "Thêm khóa học" trong trang quản lý. 2.
Hệ thống hiển thị giao diện thêm khóa học với các
trường: tiêu đề khóa học,phụ đề, ảnh nền, mô tả, danh mục, cấp độ. 3.
Admin nhập thông tin và nhấn nút "Lưu". 4.
Khóa học được thêm mới thành công.
4. Dữ liệu chưa nhập đầy đủ hoặc nhập vào không hợp lệ. Hệ Ngoại lệ
thống thông báo lỗi và yêu cầu kiểm tra lại.
Usecase: Quản lý khóa học Tên usecase Quản lý khóa học Actor Admin Tiền điều kiện
Admin đã đăng nhập vào hệ thống Hậu điều kiện
Quản lý được các khóa học Kịch bản 1.
Admin click vào mục "Quản lý khóa học" trên trang quản lý. 2.
Hệ thống hiển thị danh sách khóa học với các chức năng: tìm kiếm, sửa, xóa. 3.
Admin chọn một khóa học và bấm nút sửa. 4.
Giao diện chỉnh sửa hiển thị thông tin khóa học. 5.
Admin cập nhật thông tin và nhấn "Lưu". 6.
Thông tin khóa học được cập nhật thành công.