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

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 lu

ĐẠ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 TOÁ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 toá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 IV THIẾT KẾ DỮ LIỆU 8 1 Danh sách các lược đồ

dữ liệu 8 2 Mô tả từng lược đồ 9 V THIẾT KẾ GIAO DIỆN 13 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ểhoàn thành tốt đồ án.

1

I GIỚI THIỆU BÀI TOÁ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 toá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 tintuyể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ìnhthứ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ấtkhó khăn

- Có một số ứng dụng, website luyện thi đã được phát triển, tuy nhiên mức độ trựcquan và tiện lợi vẫn chưa cao, chỉ đơn thuần là upload tài liệu, đề thi và làmmộ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 thamgia

- Để 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 yêu cầu, mô hình hoá

[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 HOÁ YÊ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 Quy định

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

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

3

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

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

1.2 Biểu mẫu

1.2.1 Biểu mẫu 1

Phiếu đăng ký tài khoản

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ử

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

Ngày thêm: … Nội dung: …

1.2.4 Biểu mẫu 4

Phiếu tạo đề thi thử

Môn thi: … Mã đề: … Nguồn đề thi: …Thời gian làm

bài: …

Ngày tạo: … Mô tả: …

4

Danh sách câu hỏi

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

1.2.6 Biểu mẫu 6

Phiếu thêm tài liệu

Tên tài liệuMô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

Thống kê danh sách người dùng

Bảng xếp hạngSTT Tài khoản Số đề thi thử đã

làm

Số bài tập đã 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ườidù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ườidù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ácyê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ớpServer là Express.

7

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

STT Thành phần Diễn giải

1 Giao diện người dùng 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 Đồngthời trong quá trình sử dụng, thông báocho 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àngbuộc và thực hiện yêu cầu nếu thỏa điềukiện

3 Cơ sở dữ liệu 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

3 Done_exercises Bài tập đã làm

6 Reference_docs Tài liệu tham khảo

7 Reference_tests Đề thi tham khảo

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

Lược đồ department_educations

STT Trường dữ liệu Kiểu dữ liệu Ghi chú

Lược đồ chapters

STT Trường dữ liệu Kiểu dữ liệu Ghi chú

Lược đồ done_exercises

9

STT Trường dữ liệu Kiểu dữ liệu Ghi chú

Lược đồ done_tests

STT Trường dữ liệu Kiểu dữ liệu Ghi chú

Lược đồ exercises

STT Trường dữ liệu Kiểu dữ liệu Ghi chú

trong đề bài tập

3 Answers Array Danh sách các đáp án để

lựa chọ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

Lược đồ reference_tests

STT Trường dữ liệu Kiểu dữ liệu Ghi chú

3 Department_education String Tên sở giáo dục

Lược đồ roles

STT Trường dữ liệu Kiểu dữ liệu Ghi chú

mang chức vụ này

Lược đồ shared_posts

11

STT Trường dữ liệu Kiểu dữ liệu Ghi chú

Lược đồ subjects

STT Trường dữ liệu Kiểu dữ liệu Ghi chú

Lược đồ tests

STT Trường dữ liệu Kiểu dữ liệu Ghi chú

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ú

12

2 Name String Tên trường

3 Admission String Thông tin tuyển sinh mới

Lược đồ users

STT Trường dữ liệu Kiểu dữ liệu Ghi chú

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

5 Danh sách chương Hiển thị danh sách

các chương tươngứng với từng mônhọ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

14

7 Đăng ký thi thử Hiển thị form đăng

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

3

bài thi thử mà ngườidùng phải làm

2

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

2

chia sẻ

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ẻ

2

15

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

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

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

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

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ậtkhẩ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 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ốnxem đầ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 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

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

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

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 để

23

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

2.7 Màn hình Đăng ký thi thử

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

2.7.2 Mô tả cách sử dụng và xử lý

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

24

2 Mã đề thi Combobox Click để chọn mã đề

thi muốn làm tương ứng với môn học đã chọn

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

2.8 Màn hình Bài thi

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

25

2.8.2 Mô tả cách sử dụng và xử lý

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 thành bài thi

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ònlại

2.9 Màn hình Tra cứu

26

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

2.9.2 Mô tả cách sử dụng và xử lý

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

mong muốn

2.10 Màn hình Xem trang cá nhân

27

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

2.10.2 Mô tả cách sử dụng và xử lý

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ệntạ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

2.11 Màn hình Đổi mật khẩu

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

28

2.11.2 Mô tả cách sử dụng và xử lý

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íatrên 1 lần nữa để xác nhận

5 Lưu thay đổi Button Click để xác nhận thay đổi

2.12 Màn hình Đổi thông tin cá nhân

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

29

2.12.2 Mô tả cách sử dụng và xử lý

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 hiện tại (nếu muốn)

5 Cập nhật Button Click để xác nhận

hoàn thành cập nhật

2.13 Màn hình Tham khảo

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

30

2.13.2 Mô tả cách sử dụng và xử lý

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ữngmục tham khảo Người dùng có thể click vào mục tham khảo mong muốn tìm hiểu

2.14 Màn hình Danh sách Đề thi Thử

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

31

2.14.2 Mô tả cách sử dụng và xử lý

STT Tên thành phần Loại Cách sử dụng

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

32

4 Tỉnh, thành Combobox Click vào để lọc những

đề thi theo tỉnh, thànhmuốn tìm

đề thi theo năm muốn tìm

2.15 Màn hình Đề thi Thử