CHƯƠNG 4. THIẾT KẾ GIAO DIỆN
4.18. Danh sách bài kiểm tra
Hình 4.18. Giao diện trang Bài kiểm tra Bảng 4.17. Mô tả giao diện trang Bài kiểm tra
STT Tên Loại Ghi chú
119 3 Số câu hỏi bài kiểm tra Label
4 Thời gian làm bài kiểm
tra Label
5 Thời gian tạo bài kiểm
tra Label
5 Trở về trang trước Button Nhấn vào để hiển thị danh sách các khóa học ở trang trước.
6 Phân trang Button Bấm vào để hiển thị danh sách khóa học tương ứng với trang
7 Đến trang sau Button Bấm vào để hiện thị danh sách các khóa học ở trang kế tiếp
8 Kiểu phân trang Dropdown Bấm vào để chọn kiểu phân trang
4.19. Làm bài kiểm tra
Hình 4.19. Giao diện trang Làm bài kiểm tra
Bảng 4.18. Mô tả giao diện trang Làm bài kiểm tra
STT Tên Loại Ghi chú
1 Tên bài kiểm tra Label 2 Thời gian làm bài kiểm
tra Time Không cho làm nếu thời gian về
00:00:00 3 Thẻ câu hỏi
4 Câu hỏi Label Hiển thị câu hỏi
5 Câu trả lời Label Hiển thị câu trả lơi cho câu hỏi
6 Nộp bài Button Khi bấm vào sẽ tiến hành ộp bài
7 Trở về trang trước Button Nhấn vào để hiển thị danh sách các khóa học ở trang trước.
8 Phân trang Button Bấm vào để hiển thị danh sách khóa học tương ứng với trang
9 Đến trang sau Button Bấm vào để hiện thị danh sách các khóa học ở trang kế tiếp
10 Kiểu phân trang Dropdown Bấm vào để chọn kiểu phân trang
121
4.20. Xem lại bài làm
Hình 4.20. Giao diện trang Xem lại bài làm Bảng 4.19. Mô tả giao diện trang Xem lại bài làm
STT Tên Loại Ghi chú
1 Tên bài kiểm tra Label 2 Thẻ câu hỏi
3 Câu hỏi Label Hiển thị câu hỏi
4 Câu trả lời Label Hiển thị câu trả lơi cho câu hỏi
5 Trở về trang trước Button Nhấn vào để hiển thị danh sách các khóa học ở trang trước.
6 Phân trang Button Bấm vào để hiển thị danh sách khóa học tương ứng với trang
7 Đến trang sau Button Bấm vào để hiện thị danh sách các khóa học ở trang kế tiếp
8 Kiểu phân trang Dropdown Bấm vào để chọn kiểu phân trang
4.21. Thông tin khóa học
Hình 4.21. Giao diện trang Thông tin khóa học Bảng 4.20. Mô tả giao diện trang Thông tin khóa học
STT Tên Loại Ghi chú
1 Tên khóa học Label
2 Thông tin chi tiết khóa
học Label
3 Đánh giá khóa học Widget
4 Đăng ký khóa học Button Bấm vào để tiến hành đăng ký khóa học
123
4.22. Thanh toán KLB
Hình 4.22. Giao diện trang Thanh toán KLB
4.23. Thanh toán VNPAY
Hình 4.23. Giao diện trang Thanh toán VNPAY
4.24. Trang định danh
Hình 4.24. Giao diện trang Định danh Bảng 4.21. Mô tả giao diện trang Định danh
STT Tên Loại Ghi chú
1 Hình ảnh Button Bấm để tải lên CCCD/CMND
2 Xác thực OCR Button Bấm để tiền hành quét thông tin
3 Kết quả Label Hiển thị những thông tin quét được từ CCCD/CMND
4 Lưu cập nhật Button Lưu lại thông tin định danh 5 Gửi yêu cầu định danh Button Gửi yêu cầu duyệt đến Admin
125
4.25. Trang diễn đàn
Hình 4.25. Giao diện trang diễn đàn Bảng 4.22. Chi tiết giao diện trang diễn đàn
STT Tên Loại Ghi chú
1 Thể loại Label Hiển thị tên thể loại thảo luận 2 Diễn đàn Label Hiển thị tên diễn đàn trao đổi
3 Số lượng topic Label Hiển thị số lượng topic có trong diễn đàn
4 Số lượng message Label Hiển thị số lượng tin nhắn trong diễn đàn
4.26. Quản lý diễn đàn
Hình 4.26. Giao diện trang quản lý diễn đàn Bảng 4.23. Chi tiết giao diện trang quản lý diễn đàn
STT Tên Loại Ghi chú
1 Thêm category Button Thêm thể loại cho diễn đàn
2 Tìm kiếm Button Tìm kiếm diễn đàn
3 Tên category Input Text Tìm kiếm theo tên thể loại
4 Trạng thái Dropdown Tìm kiếm theo trạng thái category 5 Danh sách category Table
127
4.27. Trang trò chuyện
Hình 4.27. Giao diện trang Trò chuyện Bảng 4.24. Mô tả giao diện trang Định danh
STT Tên Loại Ghi chú
1 Trò chuyện gần đây Dropdown Hiển thị danh sách người đã từng trò chuyện
2 Giáo viên Dropdown Hiển thị danh sách giảng viên đã đăng ký khóa học
3 Tin nhắn tới Label Hiển thị tin nhắn tới 4 Tin nhắn đi Label Hiển thị tin nhắn gửi đi
5 Tin nhắn InputText Nhập tin nhắn
6 Tệp Button Chọn tệp gửi đi
7 Gửi Button Gửi tin nhắn
4.28. Quản lý số dư
Hình 4.28. Giao diện trang Quản lý số dư Bảng 4.25. Mô tả giao diện trang Quản lý số dư
STT Tên Loại Ghi chú
1 Tài khoản liên kết Card Hiển thị tài khoản ngân hàng liên kết với giảng viên
2 Số dư hiện có Label Hiển thị số dư của giảng viên
3 Lịch sử nhập rút Table Hiển thị danh sách rút tiền của giảng viên
129
4.29. Thống kê cho giảng viên
Hình 4.29. Giao diện trang Thống kê cho giảng viên Bảng 4.26. Mô tả giao diện trang Thống kê cho giảng viên
STT Tên Loại Ghi chú
1 Số lượng học viên Label 2 Số lượng khóa học Label 3 Số lượng giao dịch Label
3 Tổng doanh thu Label
4 Biểu đồ thống kê Chart Hiển thị biểu đồ thống kê theo filter ngày
5 Chọn ngày bắt đầu Date time Chọn ngày bắt đầu để thống kê 6 Chọn ngày kết thúc Date time Chọn ngày kết thúc thống kê
7 Thống kê theo học viên Button Bấm vào để hiển thị biểu đồ thống kê chỉ cho học viên
8 Thống kê theo khóa học Button Bấm vào để hiển thị biểu đồ thống kê chỉ cho khóa h
9 Thống kê tất cả Button Bấm vào để hiển thị biểu đồ thống kê cho cả học viên lẫn khóa học
4.30. Quản lý khóa học phía giảng viên
Hình 4.30. Giao diện trang Quản lý khóa học phía giảng viên Bảng 4.27. Mô tả giao diện trang Quản lý khóa học phía giảng viên
STT Tên Loại Ghi chú
1 Thêm khóa học Button Bấm vào để thêm mới một khóa học 2 Bảng danh sách khóa
học Table
131 5 Thông tin khóa học Row Bấm vào để chỉnh sửa chi tiết khóa học
6 Chỉnh sửa khóa học Button Bấm vào để tiến hành chỉnh sửa thông tin khóa học
7 Khóa khóa học Button Bấm vào để tiến hành khóa khóa học 8 Trở về trang trước Button Nhấn vào để hiển thị danh sách các
khóa học ở trang trước.
9 Phân trang Button Bấm vào để hiển thị danh sách khóa học tương ứng với trang
10 Đến trang sau Button Bấm vào để hiện thị danh sách các khóa học ở trang kế tiếp
11 Kiểu phân trang Dropdown Bấm vào để chọn kiểu phân trang
4.31. Thêm mới khóa học
Hình 4.31. Giao diện Thêm mới khóa học
Bảng 4.28. Mô tả giao diện Thêm mới khóa học
STT Tên Loại Ghi chú
1 Thêm ảnh đại diện Image Bấm vào để thêm ảnh cho khóa học 2 Nhập chủ đề cho khóa
học Input text Nhập chủ đề khóa học
3 Nhập tên khóa học Input text Nhập tên khóa học
4 Nhập giá Input text Nhập giá khóa học
5 Nhập mô tả Input text Nhập mô tả khóa học
6 Hủy Button Bấm vào để hủy chỉnh sửa thông tin
7 Lưu Button Bấm vào để tiến hành lưu khóa học
4.32. Quản lý chi tiết khóa học
133 Bảng 4.29. Mô tả giao diện trang Quản lý chi tiết khóa học
STT Tên Loại Ghi chú
1 Thông tin khóa học Label
2 Thêm bài học Button Bấm vào để tiến hành thêm bài học cho khóa học
3 Xem danh sách học
viên trong khóa học Button Bấm vào để xem danh sách học viên trong khóa học
4.33. Quản lý bài học
Hình 4.33. Giao diện Quản lý bài học Bảng 4.30. Mô tả giao diện Quản lý bài học
STT Tên Loại Ghi chú
1 Tiêu đề Label Hiển thị tiêu đề bài học
2 Mô tả Label Mô tả bài kiểm tra
3 Tài liệu Quản lý tài liệu
4 Thêm tài liệu Button Bấm vào để thêm mới tài liệu 5 Thêm bài kiểm tra Button Bấm vào để thêm mới bài kiểm tra
6 Lưu Button Bấm vào để hoàn tất thay đổi