Chương 4 XÂY DỰNG HỆ THỐNG LUYỆN THI ĐẠI HỌC
4.5. Thiết kế giao diện
4.5.2. Giao diện một số màn hình của ứng dụng
4.5.2.1. Màn hình Đăng nhập
51
Hình 4-12 Màn hình đăng nhập b. Mô tả cách sử dụng và xử lý
Bảng 4-26 Mơ tả màn hình đăng nhập
STT Tên thành phần Loại Cách sử dụng
1 Thanh Headerbar Dùng để di chuyển giữa
các mục chính của trang Web
2 Tên tài khoản Textbox Nhập vào tên tài khoản
52
4 Đăng nhập Button Click để tiến hành đăng
nhập với tài khoản và mật khẩu đã nhập
5 Đăng nhập bằng Google Button Click để tiến hành đăng
nhập bằng tài khoản Google
6 Đăng nhập bằng
Button Click để tiến hành đăng
nhập bằng tài khoản Facebook
7 Đăng nhập, đăng ký Tab Click để chuyển giữa 2
màn hình Đăng nhập và màn hình Đăng ký
4.5.2.2. Màn hình Đăng ký
53
Hình 4-13 Màn hình đăng ký b. Mô tả cách sử dụng và xử lý
54
Bảng 4-27 Mơ tả màn hình đăng ký
STT Tên thành phần Loại Cách sử dụng
1 Đăng nhập bằng Google Button Click để tiến hành đăng
nhập bằng tài khoản Google
2 Đăng nhập bằng
Button Click để tiến hành đăng
nhập bằng tài khoản Facebook
3 Họ và tên Textbox Điền vào Họ và tên
4 Tên tài khoản Textbox Điền vào tên tài khoản
đăng nhập
5 Email Textbox Điền vào email
6 Trường Textbox Điền vào tên trường hiện
tại
7 Mật khẩu Textbox Điền vào mật khẩu đăng
nhập
8 Xác nhận mật khẩu Textbox Xác nhận lại mật khẩu
bằng cách điền lại mật khẩu 1 lần nữa.
9 Avatar Button Click để lựa ảnh làm ảnh
55
10 Đăng ký với tư cách giáo
viên
Checkbox Check để đăng ký tài
khoản giáo viên
11 Mặt trước CMND Input Đính kèm hình ảnh chụp mặt trước CMND 12 Mặt sau CMND Input Đính kèm hình ảnh chụp mặt sau CMND 13 Thẻ/giấy tờ minh chứng Giáo viên
Input Đính kèm thẻ, giấy tờ minh
chứng giáo viên
14 Đăng ký Button Click để tiến hành đăng ký
tài khoản
4.5.2.3. Màn hình Trang chủ
56
57
b. Mô tả cách sử dụng và xử lý
Bảng 4-28 Mơ tả màn hình trang chủ
STT Tên thành phần Loại Cách sử dụng
1 Danh sách Đề thi mới
nhất
List Hiển thị những đề thi mới
nhất vừa được tải lên
2 Danh sách tài liệu phổ
biến
List Hiển thị những tài liệu
tham khảo mới nhất vừa được tải lên
3 Danh sách Bài chia sẻ
thịnh hành
List Hiển thị những bài chia sẻ
có lượt xem cao
4 Xem tất cả Button Click để đi đến màn hình
danh sách muốn xem đầy đủ
4.5.2.4. Màn hình Danh sách mơn học
58
Hình 4-15 Màn hình mơn học
b. Mơ tả cách sử dụng và xử lý
Bảng 4-29 Mơ tả màn hình danh sách mơn học
STT Tên thành phần Loại Cách sử dụng
1 Danh sách các môn học List Hiển thị danh sách các
môn học để người dùng lựa chọn. Người dùng có thể click vào mơn học mà mình muốn làm bài.
59
a. Hình chụp của màn hình
Hình 4-16 Màn hình danh sách chương b. Mô tả cách sử dụng và xử lý
Bảng 4-30 Mơ tả màn hình danh sách chương
STT Tên thành phần Loại Cách sử dụng
1 Danh sách các chương List Hiển thị danh sách các
chương có trong mơn học đã được lựa chọn trước đó. Người dùng có thể click vào chương mà mình muốn
4.5.2.6. Màn hình Bài tập
60
Hình 4-17 Màn hình bài tập b. Mơ tả cách sử dụng và xử lý
Bảng 4-31 Mơ tả màn hình bài tập
STT Tên thành phần Loại Cách sử dụng
1 Danh sách bài tập Button Click để mở ra danh sách
bài tập có thể làm trong chương này
61
2 Nội dung Hiển thị bài tập phải làm
và có thể lựa chọn đáp án mà mình nghĩ là chính xác
3 Hoàn thành Button Click để xác nhận hoàn
thành bài tập hiện tại để chuyển sang bài tập tiếp theo
4 Đáp án chi tiết Text Hiển thị lời giải chi tiết
cho bài tập phía trên sau khi hồn thành bài tập trên
4.5.2.7. Màn hình Đăng ký thi thử
62
Hình 4-18 Màn hình đăng ký thi thử b. Mơ tả cách sử dụng và xử lý
Bảng 4-32 Mơ tả màn hình đăng ký thi thử
STT Tên thành phần Loại Cách sử dụng
1 Môn học Combobox Click để lựa chọn môn
học muốn đăng ký thi
2 Mã đề thi Combobox Click để chọn mã đề thi
muốn làm tương ứng với môn học đã chọn
63
3 Thẻ dự thi Text Hiển thị thông tin người
dùng cũng như thông tin về đề thi sắp làm
4 Bảng xếp hạng Text Hiển thị danh sách những
người dùng đã hoàn thành bài thi này với số điểm từ cao đến thấp
5 Bắt đầu làm bài Button Click để tiến hành làm bài
thi
6 Bài thi đã làm Text Hiển thị danh sách những
đề thi đã làm tương ứng với mơn học mình đã chọn bên cạnh
4.5.2.8. Màn hình Bài thi
64
Hình 4-19 Màn hình thi thử b. Mô tả cách sử dụng và xử lý
Bảng 4-33 Mơ tả màn hình thi thử
STT Tên thành phần Loại Cách sử dụng
1 Thẻ thi thử Text Hiển thị thông tin dự thi
2 Đề thi Text Hiển thị tồn bộ thơng tin
đề thi và các phương án để người dùng chọn
3 Hoàn thành Button Click để xác nhận hoàn
65
4 Danh sách Câu hỏi Text Hiển thị số câu hỏi hiện có
trong đề thi thử này và thời gian làm bài cịn lại
4.5.2.9. Màn hình Tra cứu
a. Hình chụp của màn hình
Hình 4-20 Màn hình tra cứu b. Mô tả cách sử dụng và xử lý
66
Bảng 4-34 Mơ tả màn hình tra cứu
STT Tên thành phần Loại Cách sử dụng
1 Button điểm chuẩn, tuyển
sinh, trường Đại học
Button Chuyển đổi giữa các mục
tra cứu muốn thực hiện: tra cứu điểm chuẩn hoặc tra cứu ngành học, tra cứu trường đại học.
2 Kết quả tra cứu Hiển thị kết quả mong
muốn.
4.5.2.10. Màn hình Xem trang cá nhân
a. Hình chụp của màn hình
Hình 4-21 Màn hình trang cá nhân b. Mơ tả cách sử dụng và xử lý
67
Bảng 4-35 Mô tả màn hình trang cá nhân
STT Tên thành phần Loại Cách sử dụng
1 Thông tin cá nhân Text Hiển thị những thông tin
cơ bản của tài khoản hiện tại đang đăng nhập
2 Danh sách Tab Tabs Hiển thị những tabs
chuyển đổi và có thể click để chuyển đổi giữa các màn hình làm việc liên quan đến tài khoản
4.5.2.11. Màn hình Đổi mật khẩu
a. Hình chụp của màn hình
Hình 4-22 Màn hình đổi mật khẩu b. Mô tả cách sử dụng và xử lý
68
Bảng 4-36 Mơ tả màn hình đổi mật khẩu
STT Tên thành phần Loại Cách sử dụng
1 Thay đổi mật khẩu Form Hiển thị những thông tin
mà người dùng cần nhập
2 Mật khẩu cũ Textbox Nhập vào mật khẩu hiện
tại của tài khoản
3 Mật khẩu mới Textbox Nhập vào mật khẩu mới
mà muốn đổi thành
4 Xác nhận mật khẩu Textbox Nhập lại mật khẩu mới
giống với mật khẩu phía trên 1 lần nữa để xác nhận
5 Lưu thay đổi Button Click để xác nhận thay đổi
4.5.2.12. Màn hình Đổi thơng tin cá nhân
69
Hình 4-23 Màn hình sửa thơng tin cá nhân b. Mơ tả cách sử dụng và xử lý
Bảng 4-37 Mô tả màn hình sửa thơng tin cá nhân
STT Tên thành phần Loại Cách sử dụng
1 Cập nhật thông tin cá
nhân
Form Hiển thị những thông tin
mà người dùng muốn thay đổi
2 Họ tên Textbox Nhập vào họ tên muốn đổi
thành (nếu muốn)
3 Trường Textbox Nhập vào tên trường muốn
đổi thành (nếu muốn)
4 Avatar Button Click để đổi ảnh đại diện
70
5 Cập nhật Button Click để xác nhận hoàn
thành cập nhật
4.5.2.13. Màn hình Tham khảo
a. Hình chụp của màn hình
Hình 4-24 Màn hình tham khảo b. Mơ tả cách sử dụng và xử lý
Bảng 4-38 Mơ tả màn hình tham khảo
STT Tên thành phần Loại Cách sử dụng
1 Danh sách các mục tham
khảo
Hiển thị danh sách những mục tham khảo. Người
71 dùng có thể click vào mục tham khảo mong muốn tìm hiểu
4.5.2.14. Màn hình Danh sách Đề thi Thử
a. Hình chụp của màn hình
72
b. Mơ tả cách sử dụng và xử lý
Bảng 4-39 Mơ tả màn hình danh sách đề thi thử
STT Tên thành phần Loại Cách sử dụng
1 Đề thi thử Hiển thị danh sách những
đề thi thử hiện có
2 Tìm kiếm Textbox Hỗ trợ tìm kiếm nhanh, có
thể nhập vào tên đề thi thử muốn tìm kiếm
3 Mơn học Combobox Click vào để lọc những đề
thi theo môn học muốn tìm
4 Tỉnh, thành Combobox Click vào để lọc những đề
thi theo tỉnh, thành muốn tìm
5 Năm Combobox Click vào để lọc những đề
thi theo năm muốn tìm
4.5.2.15. Màn hình Đề thi Thử
73
Hình 4-26 Màn hình đề thi thử b. Mô tả cách sử dụng và xử lý
Bảng 4-40 Mơ tả màn hình đề thi thử
74
1 Đề thi thử Hiển thị nội dung của đề
thi thử được chọn
2 Pre, Next Button Click để chuyển trang lần
lượt của các đề thi
3 Tải xuống Button Click để tải về đề thi thử
đang xem
4.5.2.16. Màn hình Danh sách Tài liệu tham khảo
a. Hình chụp của màn hình
75
b. Mơ tả cách sử dụng và xử lý
Bảng 4-41 Mơ tả màn hình danh sách tài liệu tham khảo
STT Tên thành phần Loại Cách sử dụng
1 Tài liệu tham khảo Hiển thị danh sách những
tài liệu tham khảo hiện có
2 Tìm kiếm Textbox Hỗ trợ tìm kiếm nhanh, có
thể nhập vào tên tài liệu tham khảo muốn tìm kiếm
3 Mơn học Combobox Click vào để lọc những tài
liệu tham khảo theo mơn học muốn tìm
4 Năm Combobox Click vào để lọc những tài
liệu tham khảo theo năm muốn tìm
4.5.2.17. Màn hình Tài liệu tham khảo
76
Hình 4-28 Màn hình tài liệu tham khảo b. Mô tả cách sử dụng và xử lý
77
Bảng 4-42 Mơ tả màn hình tài liệu tham khảo
STT Tên thành phần Loại Cách sử dụng
1 Tài liệu tham khảo Hiển thị nội dung của tài
liệu tham khảo được chọn
2 Pre, Next Button Click để chuyển trang lần
lượt của tài liệu
3 Tải xuống Button Click để tải về tài liệu
đang xem
4.5.2.18. Màn hình Danh sách Bài chia sẻ
a. Hình chụp của màn hình
Hình 4-29 Màn hình danh sách bài chia sẻ b. Mô tả cách sử dụng và xử lý
78
Bảng 4-43 Mơ tả màn hình danh sách bài chia sẻ
STT Tên thành phần Loại Cách sử dụng
1 Bài chia sẻ Hiển thị danh sách những
bài chia sẻ hiện có
2 Tìm kiếm Textbox Hỗ trợ tìm kiếm nhanh, có
thể nhập vào tên bài chia sẻ muốn tìm kiếm
3 Năm Combobox Click vào để lọc những
bài chia sẻ theo năm muốn tìm
4.5.2.19. Màn hình Bài chia sẻ
79
Hình 4-30 Màn hình bài chia sẻ b. Mô tả cách sử dụng và xử lý
Bảng 4-44 Mơ tả màn hình bài chia sẻ
STT Tên thành phần Loại Cách sử dụng
1 Nội dung bài share Text Hiển thị nội dung bài chia
sẻ.
4.5.2.20. Màn hình quản lý người dùng
80
Hình 4-31 Màn hình quản lý người dùng b. Mơ tả cách sử dụng và xử lý
Bảng 4-45 Mơ tả màn hình quản lý người dùng
STTTên thành phầnLoạiCách sử dụng
1 Tổng số tài liệu chia sẻ Text Hiển thị tổng số tài liệu
chia sẻ (đề thi thử, tài liệu tham khảo, bài chia sẻ)
2 Tổng số tài khoản Text Hiển thị số tài khoản trên
hệ thống
3 Tổng số đề thi thử Text Tổng số đề thi thử có sẵn
trên hệ thống
4 Danh sách tài khoản Table Danh sách tài khoản người
81