4.4.1. Kiến trúc tổng thể
Mô hình Client-Server (Thin-Client):
- Lớp Client: Kết nối đến API và hiển thị giao diện người dùng. Cho phép người
dùng nhập vào và xuất từ cơ sở dữ liệu tương ứng với quyền truy cập của người dùng khi có yêu cầu.
- Lớp Server: Quản lý và chứa toàn bộ dữ liệu của phần mềm. Đồng thời xử lý
các yêu cầu nhập/xuất được gửi xuống từ lớp Client. Ứng dụng được dùng làm lớp Server là Express.
42
4.4.2. Kiến trúc thư mục ứng dụng web
Hình 4-9 Kiến trúc ứng dụng web
public: Lưu trữ các file như hình ảnh, icon cho trang web tổng thể,...
assets: Lưu trữ các file tài nguyên như logo, hình ảnh, …
components: Lưu trữ các component có thể tái sử dụng
43
utils: Lưu trữ Redux, các file config local, các file Helper và Validation
views: Lưu trữ các View cho Website
4.5. Thiết kế giao diện
4.5.1. Danh sách màn hình
44
45
Bảng 4-25 Danh sách màn hình
STT Tên màn hình Ý nghĩa/Ghi chú Độ phức tạp
1 Đăng nhập Đăng nhập tài khoản 1
2 Đăng ký Đăng ký tài khoản 1
3 Trang chủ Hiển thị tóm tắt nội
dung trang web.
3
4 Danh sách môn học Hiển thị danh sách các
môn học có trong bộ câu hỏi luyện tập.
1
5 Danh sách chương Hiển thị danh sách các
chương tương ứng với từng môn học.
1
6 Bài tập Hiển thị bài tập và các
phương án mà người dùng phải chọn.
2
7 Đăng ký thi thử Hiển thị form đăng ký
thi thử để người dùng điền vào.
3
8 Bài thi Hiển thị nội dung bài
thi thử mà người dùng phải làm
46
9 Tra cứu Tra cứu thông tin
tuyển sinh và điểm chuẩn từng ngành của các trường đại học
1
10 Xem trang cá nhân Hiển thị thông tin cơ
bản của tài khoản
2
11 Đổi mật khẩu Đổi mật khẩu tài
khoản
1
12 Đổi thông tin cá nhân Thay đổi thông tin cơ
bản của tài khoản
1
13 Tham khảo Hiển thị danh sách
những mục tham khảo có trên hệ thống
1
14 Danh sách Đề thi thử Hiển thị danh sách
những đề thi thử được chia sẻ
2
15 Danh sách Tài liệu tham
khảo
Hiển thị danh sách những tài liệu tham khảo được chia sẻ
2
16 Danh sách Bài chia sẻ Hiển thị danh sách
những Bài chia sẻ kinh nghiệm được chia sẻ
47
17 Đề thi thử Hiển thị chi tiết đề thi
thử
1
18 Tài liệu tham khảo Hiển thị chi tiết tài
liệu tham khảo
1
19 Bài chia sẻ Hiển thị chi tiết Bài
chia sẻ
1
20 Đăng nhập Admin Đăng nhập tài khoản
Admin
1
21 Trang chủ(Admin) Hiển thị danh sách
người dùng, thống kê tổng số tài khoản, tổng số đề thi thử,
tổng số tài liệu chia sẻ. 1
22 Quản lý đề thi thử Quản lý danh sách đề
thi thử
1
23 Tạo đề thi thử thủ công Tạo đề thi thử bằng
cách nhập đề thi bằng tay
2
24 Tạo đề thi thử tự động Tạo đề thi thử tự động
bằng cách nhập số câu hỏi mong muốn
48
25 Sửa đề thi thử Sửa đề thi thử đã có
trong hệ thống
2
26 Quản lý bài tập Quản lý danh sách các
bài tập
1
27 Tạo bài tập Tạo bài tập luyện tập 2
28 Sửa bài tập Sửa bài tập đã có
trong hệ thống
2
29 Quản lý đề thi tham khảo Quản lý danh sách đề
thi tham khảo
1
30 Tạo đề thi tham khảo Tạo đề thi tham khảo 2
31 Sửa đề thi tham khảo Sửa đề thi tham khảo
đã có trong hệ thống 2
32 Quản lý tài liệu tham khảo Quản lý danh sách tài
liệu tham khảo
1
33 Tạo tài liệu tham khảo Tạo tài liệu tham khảo 2
34 Sửa tài liệu tham khảo Sửa tài liệu tham khảo
đã có trong hệ thống 2
35 Quản lý bài chia sẻ Quản lý danh sách bài
chia sẻ
1
49
37 Sửa bài chia sẻ Sửa bài chia sẻ đã có
trong hệ thống
2
38 Quản lý thông tin tra cứu đại
học
Quản lý danh sách các trường đại học và thông tin tuyển sinh của các trường trong các năm
1
39 Thêm thông tin tuyển sinh
trường đại học
Thêm thông tin tuyển sinh, điểm chuẩn, ngành học của trường đại học
2
40 Sửa thông tin tuyển sinh
trường đại học
Sửa thông tin tuyển sinh, điểm chuẩn, ngành học của trường đại học đã có trong hệ thống
2
41 Xem thành tích Hiển thị thành tích cá
nhân ở mỗi môn học 2
42 Xem lại và bình luận đề thi Xem lại kết quả bài thi
và bình luận đề thi
3
43 Xem gợi ý lộ trình Xem lại gợi ý lộ trình
sau khi đã khảo sát
50
44 Khảo sát lộ trình Khảo sát để nhận gợi
ý lộ trình từ hệ thống 3
45 Thao tác của giáo viên Thực hiện các thao tác
mà giáo viên được cấp quyền
1
46 Quản lý tài khoản giáo viên Quản lý các tài khoản
yêu cầu quyền giáo viên
3
47 Chỉnh sửa giấy tờ giáo viên Chỉnh sửa và gửi yêu
cầu duyệt quyền giáo viên
1
4.5.2. Giao diện một số màn hình của ứng dụng4.5.2.1. Màn hình Đăng nhập 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 hoà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ị toà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