CHƯƠNG 5. THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
5.16. Danh sách giảng viên
Hình 5.16 Màn hình danh sách giảng viên
Bảng 5.16 Mô tả màn hình danh sách giảng viên
STT Tên Loại Ghi chú
1 Hình giảng viên Image
2 Tên giảng viên Text
3 Chức vụ Text
4 Danh sách liên lạc qua
mạng xã hội Link Item Khi nhấn vào thì sẽ liên lạc đến đường link cụ thể.
100
5.17. Trang chủ của ứng dụng quản lí của giáo viên
Hình 5.17 Màn hình trang chủ của ứng dụng quản lí của giáo viên
Bảng 5.17 Mô tả màn hình trang chủ của ứng dụng quản lí của giáo viên
STT Tên Loại Ghi chú
1 Danh sách menu quản lí Menu item
2 Nút quản lí cụ thể Link Item Khi nhấn vào sẽ điều hướng tới trang tương ứng.
3 Thông tin giảng viên Widget Khi nhấn vào sẽ hiện danh sách chức năng của giảng viên.
4 Nút đóng Button Khi nhấn vào đóng danh sách chức năng.
5 Thông tin chi tiết của
giảng viên Widget
6 Nút chức năng của giảng Link Item Khi ấn vào thì đến trang quản lí thông tin
101 viên cụ thể
7 Nút đăng xuất Button Khi nhấn vào thì tiến hành đăng xuất và ra trang đăng nhập.
102 5.18. Quản lí bài giảng theo khóa học
103
Hình 5.18 Màn hình quản lí bài giảng theo khóa học
Bảng 5.18 Mô tả màn hình quản lí bài giảng theo khóa học
STT Tên Loại Ghi chú
1 Chọn khóa học Select Khi chọn khóa học thì hiển thị bài giảng theo khóa học.
2 Thông tin bài giảng Table Item
3 Nút thêm bài giảng Button Khi nhấn vào sẽ hiển thị trang thêm bài giảng
4 Nút chi tiết Button Khi nhấn vào thì hiển thị giao diện chi tiết bài giảng (đề, bài tập)
5 Nút xóa bài giảng Button
Khi nhấn vào thì kiểm tra nếu đăng nhập google rồi thì tiến hành xóa, chưa thì hiển thị form đăng nhập google.
104
6 Nút chỉnh bài giảng Button Khi nhấn vào sẽ mở trang chỉnh sửa bài giảng.
7 Video bài giảng Video
8 Nút thêm bài tập Button Khi nhấn vào sẽ mở trang thêm bài tập.
9 Nút chỉnh sửa bài tập Button Khi nhấn vào sẽ mở trang chỉnh sửa bài tập.
10 Nút xóa bài tập Button Khi nhấn vào sẽ xóa bài tập.
11 Đề bài tập Audio hoặc
Image
12 Câu hỏi Text
13 Đáp án Text
14 Nút đăng nhập Google Button Khi nhấn vào sẽ tiến hành đăng nhập google.
15 Nút đóng Button Khi nhấn vào sẽ đóng form.
105 5.19. Thêm bài giảng
Hình 5.19 Màn hình thêm bài giảng
Bảng 5.19 Mô tả màn hình thêm bài giảng
STT Tên Loại Ghi chú
1 Tên bài giảng Input text
2 Chọn khóa học Select
3 Video bài giảng Video
4 Nút hủy Button Khi nhấn vào sẽ quay lại trang quản lí bài giảng.
5 Nút đồng ý Button Khi nhấn vào sẽ thực hiện thêm bài giảng.
106 5.20. Thêm bài tập theo bài giảng
Hình 5.20 Màn hình thêm bài tập cho bài giảng
Bảng 5.20 Mô tả màn hình thêm bài tập cho bài giảng
STT Tên Loại Ghi chú
1 Tên bài tập Input text
2 Tải đề File Input
3 Câu hỏi Input text
4 Đáp án Input text
5 Nút chọn làm đáp án
đúng Checkbox Khi nhấn vào sẽ chọn làm đáp án đúng.
6 Nút xóa đáp án Button Khi nhấn vào sẽ xóa đáp án.
107
7 Nút thêm đáp án Button Khi nhấn vào sẽ thêm đáp án.
8 Nút thêm câu hỏi Button Khi nhấn vào sẽ thêm câu hỏi.
9 Nút thêm đề Button Khi nhấn vào sẽ thêm đề.
10 Nút hủy Button Khi nhấn vào sẽ quay lại trang quản lí bài giảng.
11 Nút đồng ý Button Khi nhấn vào sẽ thực hiện thêm bài tập.
5.21. Chỉnh sửa bài giảng
Hình 5.21 Màn hình chỉnh sửa bài giảng
108
Bảng 5.21 Mô tả màn hình chỉnh sửa bài giảng
STT Tên Loại Ghi chú
1 Tên bài giảng Input text
2 Chọn khóa học Select
3 Video bài giảng Video
4 Nút hủy Button Khi nhấn vào sẽ quay lại trang quản lí bài giảng.
5 Nút đồng ý Button Khi nhấn vào sẽ thực hiện chỉnh sửa bài giảng.
5.22. Chỉnh sửa bài tập theo bài giảng
Hình 5.22 Màn hình chỉnh sửa bài tập cho bài giảng
109
Bảng 5.22 Mô tả màn hình chỉnh sửa bài tập cho bài giảng
STT Tên Loại Ghi chú
1 Tên bài tập Input text
2 Tải đề File Input
3 Câu hỏi Input text
4 Đáp án Input text
5 Nút chọn làm đáp án
đúng Checkbox Khi nhấn vào sẽ chọn làm đáp án đúng.
6 Nút xóa đáp án Button Khi nhấn vào sẽ xóa đáp án.
7 Nút thêm đáp án Button Khi nhấn vào sẽ thêm đáp án.
8 Nút thêm câu hỏi Button Khi nhấn vào sẽ thêm câu hỏi.
9 Nút thêm đề Button Khi nhấn vào sẽ thêm đề.
10 Nút hủy Button Khi nhấn vào sẽ quay lại trang quản lí bài giảng.
11 Nút đồng ý Button Khi nhấn vào sẽ thực hiện chỉnh sửa bài tập.
110 5.23. Báo cáo thống kê
Hình 5.23 Màn hình báo cáo thống kê
Bảng 5.23 Mô tả màn hình báo cáo thống kê
STT Tên Loại Ghi chú
1 Tổng doanh thu Text
2 Tổng học viên Text
111 3 Tổng giảng viên Text
4 Tổng khóa học Text
5 Tổng doanh thu Text
6 Tỷ lệ doanh thu theo khóa học online Text
7 Tỷ lệ doanh thu theo khóa học với giảng viên Text
8 Tỷ lệ doanh thu theo sơ
đồ Chart
9 Tỷ lệ doanh thu từng
khóa học theo ngày Chart
10 Tổng doanh thu theo
ngày Chart
11 Tỷ lệ học viên khóa học
theo ngày Chart
12 Tỷ lệ học viên học khóa
học online Chart
13 Tỷ lệ học viên học khóa
học với giảng viên Chart
112 5.24. Quản lí khóa học
Hình 5.24 Màn hình quản lí khóa học
Bảng 5.24 Mô tả màn hình quản lí khóa học
STT Tên Loại Ghi chú
1 Nút thêm bài giảng Button Khi nhấn vào sẽ hiển thị trang thêm bài giảng
2 Thông tin khóa học Table Item
3 Nút chỉnh sửa Button Khi nhấn vào thì tới trang chỉnh sửa khóa học
4 Nút xóa khóa học Button Khi nhấn vào thì xóa bài giảng.
113 5.25. Thêm khóa học
Hình 5.25 Màn hình thêm khóa học
Bảng 5.25 Mô tả màn hình thêm khóa học
STT Tên Loại Ghi chú
1 Tên khóa học Input text
114
2 Ảnh khóa học Image Hiển thị ảnh cho khóa học
3 Giáo viên phụ trách Select
4 Mức độ khóa học Select
5 Loại khóa học Select
6 Giá khóa học Input
Number
7 Mô tả khóa học Input text
8 Nút thêm tài liệu khóa
học Button Khi nhấn thì tiến hành thêm tài liệu khóa học
9 Tài liệu khóa học chi tiết List Item
10 Tên tài liệu Text
11 Bút xóa tài liệu Button Khi nhấn thì khóa tài liệu
12 Nút hủy Button Khi nhấn vào sẽ quay lại trang quản lí khóa học.
13 Nút đồng ý Button Khi nhấn vào sẽ thực hiện thêm khóa học.
115 5.26. Chỉnh sửa khóa học
Hình 5.26 Màn hình chỉnh sửa khóa học
Bảng 5.26 Mô tả màn hình chỉnh sửa khóa học
STT Tên Loại Ghi chú
1 Tên khóa học Input text
116
2 Ảnh khóa học Image Hiển thị ảnh cho khóa học 3 Giáo viên phụ trách Select
4 Mức độ khóa học Select 5 Loại khóa học Select
6 Giá khóa học Input
Number 7 Mô tả khóa học Input text
8 Nút thêm tài liệu khóa
học Button Khi nhấn thì tiến hành thêm tài liệu khóa học
9 Tài liệu khóa học chi
tiết List Item
10 Tên tài liệu Text
11 Bút xóa tài liệu Button Khi nhấn thì khóa tài liệu
12 Nút hủy Button Khi nhấn vào sẽ quay lại trang quản lí khóa học.
13 Nút đồng ý Button Khi nhấn vào sẽ thực hiện thêm khóa học.
117 5.27. Quản lý giảng viên
Hình 5.27 Màn hình quản lí giảng viên
Bảng 5.27 Mô tả màn hình quản lí giảng viên
STT Tên Loại Ghi chú
1 Nút thêm giảng viên Button Khi nhấn vào sẽ hiển thị form điền email của giảng viên.
118 2 Thông tin giảng viên Table Item
3 Nút chỉnh sửa Button Khi nhấn vào thì tới trang chỉnh sửa giảng viên
4 Nút xóa giảng viên Button Khi nhấn vào thì xóa giảng viên.
5 Email của giảng viên Input Text
6 Nút đóng Button Khi nhấn vào thì đóng.
7 Nút hủy Button Khi nhấn vào thì đóng.
8 Nút xác nhận Button Khi nhấn vào thì gửi mail.
5.28. Danh sách blog
Hình 5.28 Màn hình trang danh sách blog
119
Bảng 5.28 Mô tả màn hình quản lý giảng viên
STT Tên Loại Ghi chú
1 Gợi ý người dùng tạo
blog Text Khi nhấn vào chuyển tới trang tạo blog
2 Đường dẫn đến chi tiết blog
List item
link Khi nhấn vào chuyển tới trang chi tiết blog
3
Hiển thị tác giả, ngày tháng, bình luận của blog
List text
4 Tên blog Text
5 Mô tả mục đích blog Text
5.29. Chi tiết Blog
120
Hình 5.29 Màn hình trang chi tiết blog
Bảng 5.29 Mô tả màn hình trang chi tiết blog
STT Tên Loại Ghi chú
1 Biểu mẫu ghi nhận
comment của user Input text Nhập comment
2 Button ghi nhận upload
ảnh Input file Upload ảnh
3 Hiển thị ảnh user chọn Image
4 Nút xóa ảnh đã chọn Button Khi nhấn vào xóa phần hiển thị ảnh
5 Nội dung comment của user
Text
6 Nút trả lời bình luận Button Khi nhấn vào hiển thị biểu mẫu
7 Biểu mẫu ghi nhận Input text Nhập comment
121 comment của user
5.30. Tạo Blog
Hình 5.30 Màn hình trang tạo blog
Bảng 5.30 Mô tả màn hình trang tạo blog
STT Tên Loại Ghi chú
1 Biểu mẫu ghi nhận tiêu
dề blog của user Input text Nhập tiêu đề blog
2 Biểu mẫu ghi nhận mô tả
blog của user Input text Nhập mô tả blog
3 Khung upload ảnh Button Upload ảnh
4 Biểu mẫu ghi nội dung blog của user
Button
Nhập nội dung blog
122
5 Nút tạo blog Button Khi nhấn vào thì tạo blog và quay lại trang danh sách blog
5.31. Tạo Flashcard
Hình 5.31 Màn hình danh sách flashcard
123
Bảng 5.31 Mô tả màn hình danh sách flashcard
STT Tên Loại Ghi chú
1 Biểu mẫu ghi tên
flashcard của user Input text Nhập tên flashcard
2 Biểu mẫu ghi nhận mô tả
flashcard của user Input text Nhập mô tả flashcard
3 Nút hủy bỏ Button Khi nhấn vào thì tắt modal
4 Nút thêm flashcard Button Khi nhấn thêm flashcard
5 Nút thêm flashcard Button Khi nhấn vào thì hiện modal biểu mẫu
6 Danh sách flashcard List item Khi nhấn vào thì chuyển đến trang chi tiết flashcard
7 Hiển thị dữ liệu phân trang
Text
124 5.32. Danh sách từ vựng theo flashcard
Hình 5.32 Màn hình chỉnh sửa từ vựng
Bảng 5.32 Mô tả màn hình chỉnh sửa từ vựng
STT Tên Loại Ghi chú
1 Tên flashcard của user Text
2 Nút chỉnh sửa flashcard Button Khi nhấn vào hiển thị modal chỉnh sửa
3 Nút xóa flashcard Button Khi nhấn hiển thị modal xóa
4 Nút thêm từ vựng Button Khi nhấn hiển thị modal thêm
5 Từ vựng của user Text
6 Nút chỉnh sửa từ vựng Button Khi nhấn vào hiển thị modal chỉnh sửa
7 Thông tin chi tiết từ vựng
List text
125
8 Ảnh từ vựng Image
9 Nút xóa từ vựng Button Khi nhấn hiển thị modal xóa
10 Hiển thị phân trang Text
11 Biểu mẫu ghi tên từ
vựng của user Input text Nhập tên từ vựng
12 Biểu mẫu ghi nghĩa từ
vựng của user Input text Nhập nghĩa từ vựng
13 Nút thêm trường từ vựng
Button
Khi nhấn hiển thị modal thêm trường
14 Biểu mẫu tải ảnh từ
vựng của user Input file Tải ảnh từ vựng
15 Biểu mẫu ghi định nghĩa
từ vựng của user Input text Nhập định nghĩa từ vựng
16 Biểu mẫu ghi phiên âm
từ vựng của user Input text Nhập phiên âm từ vựng
17 Biểu mẫu ghi ví dụ từ
vựng của user Input text Nhập ví dụ từ vựng
18 Nút hủy bỏ Button Khi nhấn hủy bỏ thêm
19 Nút đồng ý Button Khi nhấn thêm từ vựng
126 5.33. Luyện tập flashcard
Hình 5.33 Màn hình luyện tập flashcard
127
Bảng 5.33 Mô tả màn hình luyện tập flashcard
STT Tên Loại Ghi chú
1 Nút quay lại Button Khi nhấn vào quay lại trang danh sách từ vựng
2 Từ vựng của user Text
3 Nút quay lại từ vựng trước
Button
Khi nhấn hiển thị từ vựng trước
4 Nút quay lại từ vựng sau Button Khi nhấn hiển thị từ vựng sau
5 Số từ vựng đã học Text
6 Nút hiển thị chi tiết từ vựng
Button
Khi nhấn vào hiển thị chi tiết
7 Nút xóa từ vựng Button Khi nhấn hiển thị modal xóa
8 Thông tin chi tiết từ vựng
List text
9 Ảnh từ vựng Image
128 5.34. Danh sách lịch sử làm bài thi
Hình 5.34 Màn hình danh sách lịch sử làm bài luyện thi
Bảng 5.34 Mô tả màn hình danh sách lịch sử làm bài luyện thi
STT Tên Loại Ghi chú
1 Nút làm bài thi Button Khi nhấn vào chuyển tới trang danh sách đề luyện thi
2 Thông tin lịch sử làm bài thi
List item
3 Tên đề Text
4 Phần đề làm Text
5 Thông tin làm bài Text
6 Nút hiển thị chi tiết lịch sử làm bài
Button Khi nhấn vào chuyển tới trang chi tiết lịch sử làm bài
7 Hiển thị phân trang Text
129 5.35. Chi tiết làm bài thi
Hình 5.35 Màn hình chi tiết lịch sử làm bài luyện thi
Bảng 5.35
130
Mô tả màn hình chi tiết lịch sử làm bài luyện thi
STT Tên Loại Ghi chú
1 Nút xem đáp án Button Khi nhấn vào chuyển tới phần đáp án
2 Nút quay lại Button Khi nhấn vào chuyển tới trang đề thi
3 Thông tin làm bài Text
4 Hiển thị câu làm Text
5 Hiển thị đáp án Text
6 Nút hiển thị chi tiết câu hỏi
Button
Khi nhấn vào hiển thị modal chi tiết
7 Hiển thị câu hỏi Text
8 Hiển thị đáp án Text
9 Hiển thị đáp án đúng Text
10 Nút đóng hiển thị chi tiết Button Khi ấn vào thì đóng hiển thị chi tiết
131 5.36. Danh sách đề thi
Hình 5.36 Màn hình danh sách bài luyện thi
Bảng 5.36 Mô tả màn hình danh sách bài luyện thi
STT Tên Loại Ghi chú
1 Thông tin bài thi List item
2 Thông tin chi tiết bài thi Text
3 Nút làm bài thi Button Khi ấn chuyển đến trang làm bài thi
4 Hiển thị phân trang Text
132 5.37. Chọn chi tiết phần thi
Hình 5.37 Màn hình chi tiết chọn bài luyện thi
Bảng 5.37 Mô tả màn hình chi tiết chi tiết chọn bài luyện thi
STT Tên Loại Ghi chú
1 Nút xem thông tin Button Khi nhấn vào chuyển tới phần thông tin
2 Nút xem đáp án Button Khi nhấn vào chuyển tới trang đáp án
3 Thông tin đề Text
4 Gợi ý làm bài Text
5 Chọn phần làm bài Input
Checkbox Khi tích vào làm các phần đã tích
6 Chọn thời gian làm Select Khi nhấn vào chọn thời gian làm
7 Nút luyện thi Button Khi ấn vào chuyển tới trang luyện thi
133 5.38. Làm bài thi
Hình 5.38 Màn hình làm bài luyện thi
Bảng 5.38 Mô tả màn hình làm bài luyện thi
STT Tên Loại Ghi chú
1 Nút thoát làm bài Button Khi nhấn chuyển tới trang danh sách đề
2 Chuyển phần làm bài Button Khi nhấn vào chuyển tới phần làm bài đó
3 Thông tin đề Text
4 Câu hỏi Text
5 Chọn đáp án Input Radio Khi tích vào chọn đáp án
6 Nút tiếp theo Button Khi nhấn vào chuyển qua phần tiếp theo
7 Thời gian làm Text
8 Nút nộp bài Button Khi nhấn vào nộp bài thi
9 Câu hỏi List item Khi nhấn chuyển tới câu hỏi