ĐỒ án xây DỰNG WEBSITE LUYỆN THI đại học

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM


BÁO CÁO ĐỒ ÁN 1
Đề tài

XÂY DỰNG WEBSITE LUYỆN THI ĐẠI HỌC

Giáo viên hướng dẫn: Th.S Huỳnh Hồ Thị Mộng Trinh
Nhóm thực hiện: Lê Xuân Tùng – 18521616
Nguyễn Thanh Tuấn – 18521604

Thành phố Hồ Chí Minh, Tháng 7 năm 2021


MỤC LỤC
LỜI NĨI ĐẦU ............................................................................................................................ 1
I. GIỚI THIỆU BÀI TỐN CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH THỰC HIỆN CÁC CƠNG
VIỆC CHÍNH ............................................................................................................................ 2
1.

Bài tốn cần giải quyết .............................................................................................................. 2

2.

Quy trình thực hiện ................................................................................................................... 2

II. XÁC ĐỊNH VÀ MƠ HÌNH HOÁ YÊU CẦU.......................................................................... 3
1.

Phân loại các yêu cầu phần mềm ................................................................................................ 3

2.

Sơ đồ lớp mức phân tích ............................................................................................................ 6

3.

Sơ đồ usecase ............................................................................................................................ 6

III.

THIẾT KẾ HỆ THỐNG ................................................................................................... 7

1.

Kiến trúc hệ thống..................................................................................................................... 7

2.

Mô tả thành phần trong hệ thống ............................................................................................... 8

THIẾT KẾ DỮ LIỆU ....................................................................................................... 8

IV.
1.

Danh sách các lược đồ dữ liệu .................................................................................................... 8

2.

Mô tả từng lược đồ .................................................................................................................... 9

THIẾT KẾ GIAO DIỆN .................................................................................................... 13

V.
1.

Danh sách màn hình ................................................................................................................ 13

2.

Mơ tả chi tiết mỗi màn hình ..................................................................................................... 16

VI.

CÀI ĐẶT VÀ THỬ NGHIỆM ......................................................................................... 39

VII.

HƯỚNG PHÁT TRIỂN ................................................................................................. 39

VIII.

TÀI LIỆU THAM KHẢO............................................................................................ 40


LỜI NÓI ĐẦU
Tài liệu này được tạo ra bởi yêu cầu của lớp SE121.L21, Trường Đại học Công nghệ

Thông tin, Đại học Quốc gia Thành phố Hồ Chí Minh, học kỳ II năm học 2020-2021.
Báo cáo này bao gồm các thông tin đến từ việc khảo sát và tham khảo các nền tảng về
luyện thi đại học, các tài liệu thiết kế và đặc tả của một phần mềm sử dụng cho việc hỗ
trợ hoạt động luyện thi đại học của các bạn học sinh nói trên bao gồm các sơ đồ Use-case,
cơ sở dữ liệu, giao diện, …
Cách đọc tài liệu: Nội dung của tài liệu được đưa vào các mục, được đánh số bắt đầu từ
1, chi tiết xem thêm tại mục lục.
Chúng em cảm ơn cô Huỳnh Hồ Thị Mộng Trinh đã hỗ trợ và hướng dẫn để nhóm có thể
hồn thành tốt đồ án.

1


I.

GIỚI THIỆU BÀI TỐN CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH
THỰC HIỆN CÁC CƠNG VIỆC CHÍNH

1. Bài tốn cần giải quyết
- Xây dựng một website cho các học sinh hoặc một số người có nhu cầu luyện thi
đại học
- Xác định đối tượng thụ hưởng:
+ Người dùng: Toàn bộ học sinh, người dùng có nhu cầu luyện thi
- Mục đích: Tạo ra một môi trường luyện thi thử một cách trực quan, hiệu quả
nhất. Website cũng cập nhật cho các thí sinh một số đề thi, tài liệu hay, mới nhất
và kinh nghiệm ơn luyện thi. Bên cạnh đó, website cũng cung cấp chatbot hỏi
đáp về các thông tin tuyển sinh như điểm các năm, chỉ tiêu, các ngành, trường,
…
- Hình thức phát triển: Website
- Cơng nghệ sử dụng:

+ Frontend: ReactJS
+ Backend: NodeJS, Express, MongoDB

2. Quy trình thực hiện
- Hiện tại, đa số hoạt động ôn luyện thi đại học của các bạn học sinh đều là hình
thức tự luyện thủ công, thường các bạn sẽ download đề thi và tự làm ra giấy và
tự dò đáp án. Bên cạnh đó, việc tìm kiếm tài liệu, thơng tin tuyển sinh cũng rất
khó khăn.
- Có một số ứng dụng, website luyện thi đã được phát triển, tuy nhiên mức độ trực
quan và tiện lợi vẫn chưa cao, chỉ đơn thuần là upload tài liệu, đề thi và làm một
số đề thi, bài tập, bởi vậy cũng chưa thu hút đông các bạn học sinh tham gia.
- Để khắc phục được những vấn đề trên, chúng em đã thống nhất chọn đề tài
Website luyện thi đại học. Với mong muốn cải thiện hơn những website, ứng

2


dụng hiện đang có, thu hút đơng các bạn học sinh sử dụng và mang lại cho người
dùng hiệu quả tốt nhất.
- Website được xây dựng bao gồm các nội dung cơ bản:
+ Xem đề thi
+ Xem tài liệu
+ Xem bài chia sẻ kinh nghiệm ôn luyện thi
+ Đăng ký và tham gia thi thử các môn trắc nghiệm
+ Luyện tập giải bài tập trắc nghiệm các mơn (có giải chi tiết)
+ Hiện thị phần trăm mức độ làm được câu hỏi dạng tương tự.
+ Hỏi đáp với chatbot về thông tin tuyển sinh
+ Quản lý thông tin cá nhân và xem thành tích
- Các bước xây dựng website:
[1] Xác định u cầu, mơ hình hố

[2] Thiết kế hệ thống
[3] Thiết kế dữ liệu
[4] Thiết kế giao diện
[5] Lập trình
[6] Thử nghiệm và sửa lỗi
[7] Phát hành website, bảo trì

II.

XÁC ĐỊNH VÀ MƠ HÌNH HỐ U CẦU

1. Phân loại các yêu cầu phần mềm
1.1.

Danh sách các yêu cầu nghiệp vụ
STT

Nghiệp vụ

Biểu mẫu

1

Lập phiếu đăng ký tài khoản

BM1

2

Lập phiếu đăng ký thi thử

BM2

3

Lập phiếu thêm đề thi

BM3

Quy định

3


1.2.

4

Lập phiếu tạo đề thi thử

BM4

5

Lập phiếu tạo bài tập trắc nghiệm

BM5

6

Lập phiếu thêm tài liệu

BM6

7

Lập phiếu thêm bài chia sẻ

BM7

8

Báo cáo thống kê

BM8

Biểu mẫu

1.2.1. Biểu mẫu 1
Phiếu đăng ký tài khoản
Họ tên: …

Trường: …

Email: …

Tên tài khoản: …

Mật khẩu: …

Ảnh đại diện: …

1.2.2. Biểu mẫu 2
Phiếu đăng ký thi thử
Mơn thi: …

Ngày: …

Mã đề: …

Họ tên thí sinh: …

Thời gian làm bài: … Mô tả: …

1.2.3. Biểu mẫu 3
Phiếu thêm đề thi
Tên đề thi
Sở GD: …

Môn thi: …

Ngày thêm: …

Nội dung: …

Nguồn đề thi: …

1.2.4. Biểu mẫu 4
Phiếu tạo đề thi thử
Môn thi: …

Mã đề: …

Thời gian làm Ngày tạo: …

Nguồn đề thi: …
Mô tả: …

bài: …
4


Danh sách câu hỏi
Câu

Nội dung

Đáp án

…

…

…

1.2.5. Biểu mẫu 5
Phiếu tạo bài tập trắc nghiệm
Môn học: …

Chương: …

Nguồn bài tập: …

Ngày tạo: …
Danh sách bài tập
Bài

Nội dung

Đáp án (chi tiết)

…

…

…

1.2.6. Biểu mẫu 6
Phiếu thêm tài liệu
Tên tài liệu
Môn học: …

Nguồn tài liệu: …

Ngày thêm: …

Nội dung: …

1.2.7. Biểu mẫu 7
Phiếu thêm bài chia sẻ

Tên bài chia sẻ
Nguồn đăng: …

Ngày thêm: …

Hình minh hoạ:…

Nội dung: …

1.2.8. Biểu mẫu 8
Thống kê lượt thi thử

5


Môn thi: …

Mã đề: …

Số lượng tham gia:
…

Bảng xếp hạng
STT

Tài khoản

Số câu đúng

…

…

…

Thống kê danh sách người dùng
Bảng xếp hạng
STT

Tài khoản

Số đề thi thử đã Số bài tập đã làm
làm

…

1.3.

…

…

…

Quy định
Khơng có

2. Sơ đồ lớp mức phân tích

3. Sơ đồ usecase

6


III.

THIẾT KẾ HỆ THỐNG

1. Kiến trúc hệ thống
Mơ hình Client-Server (Thin-Clent):
- 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.

7


2. Mô tả thành phần trong hệ thống
STT Thành phần
Giao diện người dùng

1

Diễn giải
Cung cấp giao diện cho người dùng thực
hiện các thao tác nhập/xuất dữ liệu. Đồng
thời trong quá trình sử dụng, thơng báo cho
người dùng khi có lỗi xảy ra.

2

Express

Tiếp nhận các yêu cầu từ giao diện người
dùng, kiểm tra tính đúng đắn của các ràng
buộc và thực hiện yêu cầu nếu thỏa điều
kiện.

Cơ sở dữ liệu

3

Lưu trữ tất cả dữ liệu liên quan được sử dụng
trong phần mềm.

IV.

THIẾT KẾ DỮ LIỆU

1. Danh sách các lược đồ dữ liệu
STT

Tên Schema

Diễn giải

8

1

Department_educations

Sở giáo dục/ Đơn vị tổ chức

2

Chapters

Chương

3

Done_exercises

Bài tập đã làm

4

Done_tests

Đề thi đã làm

5

Exercises

Bài tập

6

Reference_docs

Tài liệu tham khảo

7

Reference_tests

Đề thi tham khảo

8

Roles

Chức vụ

9

Shared_posts

Bài chia sẻ

10

Subjects

Môn học

11

Tests

Đề thi

12

Universities

Trường đại học

13

Users

Người dùng

2. Mô tả từng lược đồ
Lược đồ department_educations
STT

Trường dữ liệu

Kiểu dữ liệu

Ghi chú

1

_id

ObjectId

Mã đơn vị

2

Name

String

Tên đơn vị

Lược đồ chapters
STT

Trường dữ liệu

Kiểu dữ liệu

Ghi chú

1

_id

ObjectId

Mã chương

2

Name

String

Tên chương

3

SubjectId

String

Mã môn học

Lược đồ done_exercises
9


STT

Trường dữ liệu

Kiểu dữ liệu

Ghi chú

1

_id

ObjectId

Mã danh sách

2

userId

String

Mã người dùng

3

Exercises

Array

Danh sách bài tập

Lược đồ done_tests
STT

Trường dữ liệu

Kiểu dữ liệu

Ghi chú

1

_id

ObjectId

Mã danh sách

2

userId

String

Mã người dùng

3

Tests

Array

Danh sách đề thi

Lược đồ exercises
STT

Trường dữ liệu

Kiểu dữ liệu

Ghi chú

1

_id

ObjectId

Mã bài tập

2

Photos

Array

Danh sách các hình có trong
đề bài tập

3

Answers

Array

Danh sách các đáp án để lựa

chọn

4

chapterId

String

Mã chương

5

subjectId

String

Mã mơn

6

Content

String

Nội dung, đề bài

7

Key

String

Đáp án

8

Detail_key

String

Tên hình ảnh hiện thị đáp án
chi tiết

Lược đồ reference_docs
STT

Trường dữ liệu

Kiểu dữ liệu

Ghi chú
10


1

_id

ObjectId

Mã tài liệu

2

Name

String

Tên tài liệu

3

Subject

String

Tên môn học

4

From

String

Nguồn tài liệu

5

Photo

String

Tên ảnh minh hoạ

6

File

String

Tên file pdf

7

Views

Number

Lượt xem

Lược đồ reference_tests
STT

Trường dữ liệu

Kiểu dữ liệu

Ghi chú

1

_id

ObjectId

Mã đề thi

2

Name

String

Tên đề thi

3

Department_education String

Tên sở giáo dục

4

Subject

String

Tên môn

5

From

String

Nguồn đề thi

6

Photo

String

Tên ảnh minh hoạ

7

File

String

Tên file pdf

8

Views

Number

Lượt xem

Lược đồ roles
STT

Trường dữ liệu

Kiểu dữ liệu

Ghi chú

1

_id

ObjectId

Mã chức vụ

2

Name

String

Tên chức vụ

3

Users

Array

Danh sách người dùng mang
chức vụ này

Lược đồ shared_posts
11


STT

Trường dữ liệu

Kiểu dữ liệu

Ghi chú

1

_id

ObjectId

Mã bài chia sẻ

2

Name

String

Tên bài chia sẻ

3

Author

String

Tác giả

4

From

String

Nguồn bài viết

5

Photo

String

Tên ảnh minh hoạ

6

Content

String

Nội dung

7

Views

Number

Lượt xem

Lược đồ subjects
STT

Trường dữ liệu

Kiểu dữ liệu

Ghi chú

1

_id

ObjectId

Mã môn

2

Name

String

Tên môn

3

Photo

String

Tên logo hiện thị

Lược đồ tests
STT

Trường dữ liệu

Kiểu dữ liệu

Ghi chú

1

_id

ObjectId

Mã đề thi

2

Questions

Array

Danh sách câu hỏi

3

subjectId

String

Mã môn

4

Code

String

Mã đề

5

From

String

Nguồn tham khảo

6

Time_doing

Number

Thời gian làm bài

Lược đồ universities
STT

Trường dữ liệu

Kiểu dữ liệu

Ghi chú

1

_id

ObjectId

Mã trường
12

2

Name

String

Tên trường

3

Admission

String

Thông tin tuyển sinh mới
nhất

4

Majors

Array

Danh sách các ngành đào tạo

5

Base_mark

Array

Danh sách điểm chuẩn các
năm (từ năm 2018)

Lược đồ users
STT

Trường dữ liệu

Kiểu dữ liệu

Ghi chú

1

_id

ObjectId

Mã người dùng

2

Name

String

Tên người dùng

3

Email

String

Địa chỉ email

4

Username

String

Tên tài khoản

5

School

String

Trường THPT

6

Avatar

String

Tên đường dẫn ảnh đại diện

7

Password

String

Mật khẩu người dùng đã mã
hoá

V.

THIẾT KẾ GIAO DIỆN

1. Danh sách màn hình

13


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

3

dung trang web.
4

Danh sách môn học

Hiển thị danh sách các

1

môn học có trong bộ
câu hổi luyện tập.
5

Danh sách chương

Hiển thị danh sách các

1

chương tương ứng với
từng môn học.
6

Bài tập

Hiển thị bài tập và các

2

phương án mà người
dùng phải chọn.

14


7

Đăng ký thi thử

Hiển thị form đăng ký

3

thi thử để người dùng
điền vào.
8

Bài thi

Hiển thị nội dung bài

2

thi thử mà người dùng
phải làm
9

Tra cứu

Tra cứu thông tin tuyển 1
sinh và điểm chuẩn
từng ngành của các
trường đại học

10

Xem trang cá nhân

Hiển thị thông tin cơ

2

bản của tài khoản
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ơ

1

bản của tài khoản
13

Tham khảo

Hiển thị danh sách

1

những mục tham khảo

có trên hệ thống
14

Danh sách Đề thi thử

Hiển thị danh sách

2

những đề thi thử được
chia sẻ
15

Danh sách Tài liệu tham khảo Hiển thị danh sách

2

những tài liệu tham
khảo được chia sẻ
16

Danh sách Bài chia sẻ

Hiển thị danh sách

2

những Bài chia sẻ kinh
nghiệm được chia sẻ

15


17

Đề thi thử

Hiển thị chi tiết đề thi

1

thử
18

Tài liệu tham khảo

Hiển thị chi tiết tài liệu

1

tham khảo
19

Bài chia sẻ

Hiển thị chi tiết Bài

1

chia sẻ

2. Mô tả chi tiết mỗi màn hình
2.1. Màn hình Đăng nhập
2.1.1. Hình chụp của màn hình

2.1.2. Mô tả cách sử dụng và xử lý
STT
1

Tên thành phần

Loại

Cách sử dụng
Dùng để di chuyển giữa các

Thanh Headerbar

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
16


3

Mật khẩu

Textbox

Nhập vào mật khẩu

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 Facebook 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ý

2.2. Màn hình Đăng ký
2.2.1. Hình chụp của màn hình

17


2.2.2. Mô tả cách sử dụng và xử lý
STT
1

Tên thành phần
Đăng nhập bằng Google

Loại
Button

Cách sử dụng
Click để tiến hành đăng
nhập bằng tài khoản Google

2

Đăng nhập bằng Facebook 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

18


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
đại diện của tài khoản

10

Đăng ký

Button

Click để tiến hành đăng ký
tài khoản

2.3. Màn hình Trang chủ
2.3.1. Hình chụp của màn hình

19

20


2.3.2. Mô tả cách sử dụng và xử lý
STT
1

Tên thành phần

Loại

Cách sử dụng

Danh sách Đề thi mới

List

Hiển thị những đề thi mới
nhất vừa được tải lên

nhất
2

Danh sách tài liệu phổ

List

Hiển thị những tài liệu tham
khảo mới nhất vừa được tải

biến

lên
3

Danh sách Bài chia sẻ

List

có lượt xem cao

thịnh hành
4

Xem tất cả

Hiển thị những bài chia sẻ

Button

Click để đi đến màn hình
danh sách muốn xem đầy
đủ

2.4. Màn hình Danh sách mơn học
2.4.1. Hình chụp của màn hình

21

2.4.2. Mô tả cách sử dụng và xử lý
STT
1

Tên thành phần
Danh sách các môn học

Loại
List

Cách sử dụng
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.

2.5. Màn hình Danh sách chương
2.5.1. Hình chụp của màn hình

2.5.2. Mơ tả cách sử dụng và xử lý
STT
1

Tên thành phần
Danh sách các chương

Loại
List

Cách sử dụng
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

2.6. Màn hình Bài tập
22


2.6.1. Hình chụp của màn hình

2.6.2. Mơ tả cách sử dụng và xử lý
STT
1

Tên thành phần
Danh sách bài tập

Loại
Button

Cách sử dụng
Click để mở ra danh sách
bài tập có thể làm trong
chương này

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

Hồn thành

Button

Click để xác nhận hoàn
thành bài tập hiện tại để
23