Xây dựng website tạo bộ đề, ôn tập và kiểm tra trắc nghiệm online

Sinh viên thực hiện: Nguyễn Văn Long Mã Sinh Viên: 1811505310225 Lớp: 18T2 Đề tài:  Xây dựng phần mềm tạo, quản lý và tham gia bộ đề ôn tập, phòng thi onlinevới tính tình hình dịch bện

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

KHOA CÔNG NGHỆ SỐ Độc lập - Tự do - Hạnh phúc

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP

Giảng viên hướng dẫn: TS PHẠM TUẤN

Sinh viên thực hiện: NGUYỄN VĂN LONG Mã SV:1811505310225

1 Tên đề tài: Xây dựng website tạo bộ đề, ôn tập và kiểm tra trắc nghiệm online

2 Các số liệu, tài liệu ban đầu:

Trang chủ reactjs: https://reactjs.org

Trang chủ nodejs: https://nodejs.org/en/

Trang chủ express (framework): https://expressjs.com

Trang chủ mongodb: https://www.mongodb.com

Trang chủ firebase: https://firebase.google.com/

3 Nội dung chính của đồ án:

A Tìm hiểu công nghệ: Reactjs, nodejs (express), mongodb, firebase.

B Xây dựng phân tích thiết kế hệ thống.

C Xây dựng chức năng chính:

● Đăng nhập, đăng ký tài khoản:

○ Đăng nhập với google, account

○ Xác minh email

● Lấy lại mật khẩu

● Xây dựng profile cho user (gồm thông tin người dùng, các đề đã làm các bộ đề đã

tạo, các phòng thi đã tạo, các phòng thi đã tham gia)

● Tạo bộ đề trắc nghiệm (Bằng cách tạo lần lượt các câu hỏi)

○ Giới hạn thời gian làm bài

○ Có thể private hoặc public bộ đề

○ Tạo giải thích cho các câu trả lời và đáp án cho các câu hỏi

● Tự động nộp bài kết thúc trắc nghiệm khi hết thời gian làm bài

điểm số) có thể xuất ra file excel.

● Trả về kết quả và đáp án khi hoàn thành bộ đề ôn tập

● Thông báo khi hoàn thành kiểm tra phòng thi

● Chức năng import đề từ excel một cách tự động

○ Người dùng có thể import các câu hỏi đã sẵn từ trước lên hệ thống

○ Người dùng có thể chỉnh sửa các đề thi

● Chức năng tạo đề ngẫu nhiên có kèm theo đáp án

● Chức năng tổ chức thi online:

○ Tự động mở đề

○ Tự động chấm điểm

○ Tự động đóng thời gian

● Chức năng xuất điểm báo cáo cho từng phòng thi

● Mời người tham gia phòng thi

● Chức năng quản lý admin:

○ Quản lý người dùng (Thêm, sửa, xóa, phân quyền)

○ Quản lý lĩnh vực bộ đề (Thêm, sửa, xóa)

○ Quản lý bộ đề(Thêm, sửa, xóa)

○ Thống kê (số người dùng, số đề được tạo/tháng, số phòng thi được tạo /tháng, )

4 Các sản phẩm dự kiến:

Tạo ra web thi trắc nghiệm trực tuyến được sử dụng thực tế, phù hợp cho người dùng

có thể ôn tập, kiểm tra năng lực, giải trí dễ sử dụng phù hợp với nhiều lứa tuổi

TÓM TẮT NỘI DUNG

Tên đề tài: Xây dựng website tạo bộ đề ôn tập, kiểm tra trắc nghiệm online.

Sinh viên thực hiện: Nguyễn Văn Long

Mã Sinh Viên: 1811505310225 Lớp: 18T2

Đề tài:

 Xây dựng phần mềm tạo, quản lý và tham gia bộ đề ôn tập, phòng thi onlinevới tính tình hình dịch bệnh phức tạp như hiện này và các kỳ thi trung học phổthông hiện này đa số thi trắc nghiệm nên em muỗn xây dưng một ứng dùngwebsite có thể tạo, quản lý và tham gia các bộ đề ôn tập, phòng thi online

 Website gồm có các chức năng chính:

o Về người dùng: có thể tạo, tham gia kiểm tra các bộ đề, phòng thi (đốivới tham gia phòng thi thì cần phải có trong danh sách thi) và quản lý,xuất danh sách các người dùng đã tham gia các bộ đề và phòng thi đãtạo

o Về người quản trị: có thể quản lý tất các thành phần gồm: bộ đề, ngườidùng, lĩnh vực, phòng thi

Nội dung bài báo cáo gồm có:

 Chương I: Tổng quan về dự án.

 Chương II: Tổng quan về lý thuyết.

 Chương III: Phân tích thiết kế.

 Chương IV: Chạy demo chương trình.

 Chương V: Kết luận và hướng phát triển.

LỜI CẢM ƠN

Trước hết, em xin bày tỏ tình cảm và lòng biết ơn của em tới thầy giáo TS.PhạmTuấn Người đã từng bước hướng dẫn, giúp đỡ em trong quá trình thực hiện đồ án tốtnghiệp của mình

Em xin chân thành cảm ơn các thầy cô giáo khoa công nghệ thông tin của trườngĐại Học Sư Phạm Kỹ Thuật Đà Nẵng đã dìu dắt, dạy dỗ em cả về kiến thức chuyênmôn và tinh thần học tập để em có được những kiến thức thực hiện đồ án tốt nghiệp củamình

Em xin chân thành cảm ơn PGS.TS Phan Cao Thọ – Hiệu trưởng Trường Đại

Học Sư Phạm Kỹ Thuật Đà Nẵng, ban giám hiệu nhà trường, các phòng ban đã giúp đỡtạo điều kiện tốt nhất cho em trong suốt thời gian học tập tại trường

Ngày nay, công nghệ thông tin đã có những bước phát triển mạnh mẽ theo cảchiều rộng và sâu Máy tính điện tử không còn là một thứ phương tiện quý hiếm màđang ngày càng trở thành một công cụ làm việc và giải trí thông dụng của con người,không chỉ ở công sở mà còn ngay cả trong gia đình

Với thời buổi dịch bệnh như hiện nay thì để ôn tập và kiểm tra kiến thức như lúctrước được xem là rất khó khăn nên để góp phần khắc phục tình tình trạng trên, em đãtìm hiểu và xây dựng một website có thể ôn tập và kiểm tra kiến thức bằng hình thứctrắc nghiệm Với sự hướng dẫn tận tình của Thầy Phạm Tuấn em đã hoàn thành đồ ántốt nghiệp này Tuy đã cố gắng hết sức tìm hiểu, phân tích thiết kế, xây dựng hệ thốngnhưng sẽ không tránh khỏi những thiếu sót Em rất mong nhận được sự thông cảm vàgóp ý của quý thầy cô

Xin chân thành cảm ơn!

LỜI CAM ĐOAN

Chúng tôi xin cam đoan :

1 Những nội dung trong luận văn này do chúng em thực hiện dưới sựhướng dẫn của Thầy Phạm Tuấn

2 Mọi tham khảo trong luận văn đều được trích dẫn rõ ràng tên tác giả, tên công trình, thời gian, địa điểm công bố

3 Mọi sao chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá,chúng em xin chịu hoàn toàn trách nhiệm

Sinh viên thực hiện

Nguyễn Văn Long

MỤC LỤC

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP

TÓM TẮT NỘI DUNG

LỜI CẢM ƠN I LỜI CAM ĐOAN II MỤC LỤC III DANH MỤC HÌNH ẢNH VI MỤC LỤC BẢNG X DANH SÁCH CÁC KÝ HIỆU, CHỮ BIẾT TẮT XI

CHƯƠNG 1 TỔNG QUAN 1

1.1 Lý do chọn đề tài 1

1.2 Mục đích đề tài 1

1.3 Phạm vi đề tài 1

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT 2

2.1 Hệ quản trị cơ sở dữ liệu: MongoDB, Firebase 2

2.1.1 MongoDB 2

2.1.2 Firebase 3

2.2 Ngôn ngữ lập trình 4

2.2.1 Thư viện ReactJs (front-end) 4

2.2.2 NodeJS 5

2.2.3 Framework ExpressJS 7

2.2.4 Mô hình MVC 8

CHƯƠNG 3 PHÂN TÍCH THIẾT KẾ 9

3.1 Đặc tả yêu cầu phần mềm (Software Requirements) 9

3.1.1 Người dùng chưa đăng ký 9

3.1.2 Người dùng thành viên 9

3.1.3 Quản trị viên 9

3.2 Sơ đồ Use-case 10

3.3 Kịch bản cho Use-case 11

3.3.1 Người dùng chưa đăng ký 11

3.3.2 Người dùng thành viên 11

3.3.3 Quản trị viên 19

3.4 Sơ đồ hoạt động 25

3.4.1 Actor người dùng chưa đăng ký 25

3.4.2 Người dùng thành viên 26

3.4.3 Actor Quản trị viên 35

3.5 Danh sách các schema 43

3.6 Sơ đồ tuần tự 44

3.6.1 Người dùng chưa đăng ký 44

3.6.2 Người dùng thành viên 44

3.6.3 Người dùng quản trị viên 51

CHƯƠNG 4 DEMO CHƯƠNG TRÌNH 57

4.1 Người dùng chưa đăng ký 57

4.1.1 Đăng ký 57

4.2 Người dùng thành viên 59

4.2.1 Đăng nhập 59

4.2.2 Tạo bộ đề 61

4.2.3 Tạo phòng thi 64

4.2.4 Quản lý bộ đề đã tạo 66

4.2.5 Quản lý phòng thi 68

4.2.6 Tham gia ôn tập với bộ đề tự chọn 71

4.2.7 Xem kết quả các bộ đề ôn tập đã tham gia 73

4.2.8 Xem kết quả các phòng thi đã tham gia 73

4.2.9 Chỉnh sửa thông tin cá nhân 74

4.2.10 Đặt lại mật khẩu 75

4.3 Người dùng quản trị viên 77

4.3.1 Quản lý tất cả người dùng 77

4.3.2 Quản lý tất cả lĩnh vực 80

4.3.3 Quản lý tất cả các bộ đề 82

4.3.4 Quản lý tất cả các phòng thi 85

CHƯƠNG 5 KẾT LUẬN & HƯỚNG PHÁT TRIỂN 88

5.1 Kết luận 88

5.2 Những hạn chế 88

5.3 Hướng phát triển 88

DANH MỤC HÌNH ẢNH

Hình 2.1: Hệ quản trị cơ sở dữ liệu mongodb 2

Hình 2.2: Dịch vụ cơ sở dữ liệu firebase 3

Hình 2.3: Thư viện Reactjs 5

Hình 2.4: Platform NodeJS 6

Hình 2.5: Framework ExpressJS 7

Hình 2.6: Mô hình MVC trong NodeJS 8

Hình 3.1: Use-case Diagram 10

Hình 3.2: Sơ đồ đăng ký tài khoản 11

Hình 3.3: Sơ đồ đăng nhập hệ thống quyền người dùng 12

Hình 3.4: Sơ đồ tạo bộ đề ôn tập 12

Hình 3.5: Sơ đồ hoạt động tạo phòng thi online 13

Hình 3.6: Sơ đồ hoạt động quản lý thông tin các bộ đề đã tạo (chỉnh sửa) 13

Hình 3.7: Sơ đồ hoạt động quản lý thông tin các bộ đề đã tạo (Xóa) 14

Hình 3.8: Sơ đồ hoạt động quản lý thông tin các phòng thi đã tạo (Chỉnh sửa) 15

Hình 3.9: Sơ đồ hoạt động Quản lý thông tin các phòng thi đã tạo (cho phép / thu hồi quyền xem điểm của người dùng tham gia phòng thi) 16

Hình 3.10: Sơ đồ hoạt động Quản lý thông tin các phòng thi đã tạo (Xóa) 17

Hình 3.11: Sơ đồ hoạt động tham gia ôn tập với bộ đề tự chọn 17

Hình 3.12: Sơ đồ hoạt động tham gia kiểm tra phòng thi online (người dùng phải có trong danh sách kiểm tra) 18

Hình 3.13: Sơ đồ hoạt động quản lý thông tin cá nhân 18

Hình 3.14: Sơ đồ hoạt động xem kết quả các bộ để đã ôn tập 19

Hình 3.15: Sơ đồ hoạt động xem kết quả các phòng thi đã tham gia kiểm tra 19

Hình 3.16: Sơ đồ hoạt động đặt lại mật khẩu 20

Hình 3.17: Sơ đồ hoạt động quản lý tất cả người dùng (thêm) 21

Hình 3.18: Sơ đồ hoạt động quản lý tất cả người dùng (chỉnh sửa) 22

Hình 3.19: Sơ đồ hoạt động quản lý tất cả người dùng (xóa) 22

Hình 3.20: Sơ đồ hoạt động quản lý tất cả lĩnh vực (thêm lĩnh vực) 23

Hình 3.21: Sơ đồ hoạt động quản lý tất cả lĩnh vực (chỉnh sửa) 24

Hình 3.22: Sơ đồ hoạt động quản lý tất cả lĩnh vực (xóa) 24

Hình 3.23: Sơ đồ hoạt động quản lý tất cả lĩnh vực (thêm thẻ) 25

Hình 3.24: Sơ đồ hoạt động quản lý tất cả lĩnh vực (chỉnh sửa thẻ) 26

Hình 3.25: Sơ đồ hoạt động quản lý tất cả lĩnh vực (xóa thẻ) 26

Hình 3.26: Sơ đồ hoạt động quản lý tất cả bộ đề ôn tập (thêm bộ đề) 26

Hình 3.27: Sơ đồ hoạt động quản lý tất cả bộ đề ôn tập (chỉnh sửa) 27

Hình 3.28: Sơ đồ hoạt động quản lý tất cả bộ đề ôn tập (xóa) 27

Hình 3.29: Sơ đồ hoạt động quản lý tất cả phòng thi (thêm) 28

Hình 3.30: Sơ đồ hoạt động quản lý tất cả phòng thi (chỉnh sửa) 28

Hình 3.31: Sơ đồ hoạt động quản lý tất cả phòng thi (xóa) 29

Hình 3.32: Danh sách các Schema 30

Hình 3.33: Sơ đồ sequence cho use-case đăng ký 31

Hình 3.34: Sơ đồ sequence cho use-case đăng nhập 31

Hình 3.35: Sơ đồ sequence cho use-case tạo bộ đề 32

Hình 3.36: Sơ đồ sequence cho use-case tạo phòng thi 32

Hình 3.37: Sơ đồ sequence cho use-case quản lý bộ đề đã tạo (chỉnh sửa) 33

Hình 3.38: Sơ đồ sequence cho use-case quản lý bộ đề đã tạo (xóa) 33

Hình 3.39: Sơ đồ sequence cho use-case quản lý phòng thi đã tạo (chỉnh sửa) 34

Hình 3.40: Sơ đồ sequence cho use-case quản lý phòng thi đã tạo (xóa) 34

Hình 3.41: Sơ đồ sequence cho use-case quản lý phòng thi đã tạo (cho phép/ thu hồi quyền xem điểm) 35

Hình 3.42: Sơ đồ sequence cho use-case ôn tập với bộ đề tự chọn 35

Hình 3.43: Sơ đồ sequence cho use-case tham gia phòng thi 36

Hình 3.44: Sơ đồ sequence cho use-case quản lý thông tin cá nhân (chỉnh sửa) 36

Hình 3.45: Sơ đồ sequence cho use-case xem kết quả các bộ đề đã tham gia 37

Hình 3.46: Sơ đồ sequence cho use-case xem kết quả các phòng thi đã tham gia 37

Hình 3.47: Sơ đồ sequence cho use-case đặt lại mật khẩu 38

Hình 3.48: Sơ đồ sequence cho use-case quản lý người dùng(Thêm) 38

Hình 3.49: Sơ đồ sequence cho use-case quản lý người dùng (chỉnh sửa) 39

Hình 3.50: Sơ đồ sequence cho use-case quản lý người dùng (xóa) 39

Hình 3.51: Sơ đồ sequence cho use-case quản lý lĩnh vực (thêm) 40

Hình 3.52: Sơ đồ sequence cho use-case quản lý lĩnh vực (chỉnh sửa) 40

Hình 3.53: Sơ đồ sequence cho use-case quản lý lĩnh vực (xóa) 41

Hình 3.54: Sơ đồ sequence cho use-case quản lý bộ đề (thêm) 41

Hình 3.55: Sơ đồ sequence cho use-case quản lý bộ đề (chỉnh sửa) 42

Hình 3.56: Sơ đồ sequence cho use-case quản lý bộ đề (xóa) 42

Hình 3.57: Sơ đồ sequence cho use-case quản lý phòng thi (thêm) 43

Hình 3.58: Sơ đồ sequence cho use-case quản lý phòng thi (chỉnh sửa) 43

Hình 3.59: Sơ đồ sequence cho use-case quản lý phòng thi (xóa) 43

Hình 4.1: Màn hình đăng ký 44

Hình 4.2: Màn hình đăng ký thất bại 44

Hình 4.3: Màn hình đăng ký thành công 45

Hình 4.4: Màn hình xác nhận địa chỉ email 45

Hình 4.5: Màn hình hoàn thành chức năng đăng ký 46

Hình 4.6: Màn hình đăng nhập 46

Hình 4.7: Màn hình đăng nhậ 47

Hình 4.8: Màn hình đăng nhập bằng google 47

Hình 4.9: Màn hình đăng nhập thành công 48

Hình 4.10: Màn hình nhập thông tin bộ đề 49

Hình 4.11: Danh sách câu hỏi ở file xlsx 50

Hình 4.12: Màn hình sau khi tải file xlsx lên 50

Hình 4.13: Màn hình ghi chú các chức năng 51

Hình 4.14: Màn hình xem lại thông tin trước khi tạo bộ đề 51

Hình 4.15: Màn hình nhập thông tin phòng thi 52

Hình 4.16: Màn hình danh sách câu hỏi của phòng thi 52

Hình 4.17: Màn hình xem lại thông tin bộ đề và tạo phòng thi 53

Hình 4.18: Màn hình chi tiết phòng thi 53

Hình 4.19: Màn hình hiện popup xác nhận 54

Hình 4.20: Màn hình chỉnh sửa bộ đề 55

Hình 4.21: Màn hình danh sách tham gia bộ đề 55

Hình 4.22: Màn hình chi tiết phòng thi 56

Hình 4.23: Màn hình chỉnh sửa phòng thi 57

Hình 4.24: Màn hình xóa phòng thi 57

Hình 4.25: Màn hình danh sách tham gia phòng thi 58

Hình 4.26: Màn hình chi tiết bộ đề ôn tập 58

Hình 4.27: Màn hình làm ôn tập bộ đề 59

Hình 4.28: Màn hình kết quả kiểm tra 59

Hình 4.29: Màn hình chi tiết bài làm và đáp án 59

Hình 4.30: Màn hình tab các bộ đề đã tham gia ôn tập ở trang cá nhân 60

Hình 4.31: Màn hình tóm tắt kết quả và thông tin bộ đề ôn tập 60

Hình 4.32: Màn hình chi tiết và kết quả làm bài 60

Hình 4.33: Màn hình tab các phòng thi đã tham gia trong trang cá nhân 61

Hình 4.34: Màn hình tóm tắt kết quả và thông tin phòng thi 61

Hình 4.35: Màn hình chi tiết và kết quả bài làm 61

Hình 4.36: Màn hình chỉnh sửa thông tin người dùng 62

Hình 4.37: Màn hình nhập email đặt lại mật khẩu 63

Hình 4.38: Màn hình hộp thư đến ở email yêu cầu đặt lại mật khẩu 63

Hình 4.39: Màn hình thêm người dùng mới 64

Hình 4.40: Màn hình danh sách người dùng 65

Hình 4.41: Màn hình chi tiết người dùng 65

Hình 4.42: Màn hình chỉnh sửa thông tin người dùng 66

Hình 4.43: Màn hình hiện popup xác nhận xóa sau khi nhấn nút delete 66

Hình 4.44: Màn hình thêm lĩnh vực mới 67

Hình 4.45: Màn hình danh sách các lĩnh vực 68

Hình 4.46: Màn hình chỉnh sửa lĩnh vực 68

Hình 4.47: Màn hình hiện popup xác nhận xóa lĩnh vực 69

Hình 4.48: Danh sách bộ đề 69

Hình 4.49: Màn hình thêm bộ đề 70

Hình 4.50: Màn hình chi tiết bộ đề 70

Hình 4.51: Màn hình chỉnh sửa thông tin bộ đề 71

Hình 4.52: Màn hình hiện popup xác nhận xóa bộ đề 71

Hình 4.53: Màn hình thêm phòng thi 72

Hình 4.54: Màn hình danh sách phòng thi 73

Hình 4.55: Màn hình chi tiết phòng thi 73

Hình 4.56: Màn hình chỉnh sửa thông tin phòng thi 74

Hình 4.57: Màn hình popup xác nhận xóa phòng thi 74

CHƯƠNG 1 MỤC LỤC BẢNG

Bảng 0-1: Bảng giải thích ký hiệu xii

Bảng 0-2: Bảng giải thích chữ viết tắt xii

Bảng 3-1: Kịch bản use-case đăng ký 11

Bảng 3-2: Kịch bản use-case đăng nhập 11

Bảng 3-3:Kịch bản use-case tạo bộ đề 12

Bảng 3-4: Kịch bản use-case tạo phòng thi online 13

Bảng 3-5: Kịch bản use-case quản lý phòng thi đã tạo 14

Bảng 3-6: Kịch bản use-case quản lý bộ đề đã tạo 15

Bảng 3-7: Kịch bản use-case: tham gia ôn tập bộ đề 16

Bảng 3-8: Kịch bản use-case tham gia phòng thi online 16

Bảng 3-9: Kịch bản use-case: xem kết quả của các bộ đề đã ôn tập 17

Bảng 3-10: Use-case xem kết quả các phòng thi đã kiểm tra 18

Bảng 3-11: Kịch bản use-case: đặt lại mật khẩu người dùng 18

Bảng 3-12: Kịch bản use-case quản lý tất cả người dùng 19

Bảng 3-13: Kịch bản use-case: quản lý tất cả lĩnh vực 20

Bảng 3-14: Kịch bảng use-case: quản lý tất cả các bộ đề 22

Bảng 3-15: Kịch bản quản lý tất cả các phòng thi 23

DANH SÁCH CÁC KÝ HIỆU, CHỮ BIẾT TẮT

Bảng 0-1: Bảng giải thích ký hiệu

Bảng 0-2: Bảng giải thích chữ viết tắt

REST API Representational State Transfer Là một loạt hướng dẫn

và dạng cấu trúc dùng cho việc chuyển đổi dữ liệu

NoSQL Not Structured Query Language Hệ thống quản lý dữ liệu

phi quan hệ

phép truy xuất dữ liệu ngẫu nhiên đến bất kỳ vị trí nào trong bộ nhớ dựa theo địa chỉ bộ nhớ

pháp dạng gần như XML

về thành Javascript Giúp người lập trình có thể code ReactJS bằng

cú pháp của XML thay

vì sử dụng Javascript

CHƯƠNG 3. CƠ SỞ LÝ THUYẾT

3.1 Hệ quản trị cơ sở dữ liệu: MongoDB, Firebase

3.1.2 Firebase

 Định nghĩa: là một dịch vụ cơ sở dữ liệu thời gian thực được cung cấp bởiGoogle và hoạt động trên nền tảng đám mây Nó giúp các lập trình phát triểnnhanh các ứng dụng di động bằng cách đơn giản hóa các thao tác với cơ sở dữliệu

 Ưu điểm:

o Xây dựng các ứng dụng nhanh chóng, ít tốn thời gian

o Firebase cung cấp cho bạn chức năng như phân tích, cơ sở dữ liệu, báo

cáo hoạt động và báo cáo các sự cố lỗi để bạn có thể dễ dàng phát triển,định hướng ứng dụng của mình vào người sử dụng nhằm đem lại các trảinghiệm tốt nhất cho họ

o Uy tín chất lượng đảm bảo từ Google: Firebase được google hỗ trợ và

cung cấp trên nền tảng phần cứng với quy mô rộng khắp thế giới, đượccác tập đoàn lớn và các ứng dụng với triệu lượt sử dụng từ người dùng

o Quản lý cấu hình và trải nghiệm các ứng dụng của Firebase tập trung

trong một giao diện website đơn giản, các ứng dụng này hoạt động độclập nhưng liên kết dữ liệu phân tích chặt chẽ

 Nhược điểm:

o Cơ sở dữ liệu của được tổ chức theo kiểu trees, parent-children, khôngphải là kiểu Table nên những ai đang quen với SQL có thể sẽ gặp khókhăn từ mức đôi chút tới khá nhiều

o Chỉ hoạt động với Cơ sở dữ liệu NoSQL: Firebase sử dụng Json và hầu

như không có tính năng SQL mặc dù đã có những cải tiến đáng kể trên

Cloud Tuy nhiên, cơ sở dữ liệu của Firebase vẫn không thể sử dụng cơ

sở dữ liệu quan hệ

Hình 1.1: Dịch vụ cơ sở dữ liệu firebase

3.2 Ngôn ngữ lập trình

3.2.1 Thư viện ReactJs (front-end)

 Khái niệm: ReactJs là một thư viện Javascript dùng để xây dựng giao diện

người dùng Được tạo ra bởi Facebook, React càng ngày càng được sử dụngrộng rãi, đặc biệt là trong các trang web đòi hỏi yêu cầu cao về giao diện với cáckhả năng như nhanh, dễ học, code ngắn và tái sử dụng tốt

những thay đổi nào cập nhật lên DOM và chỉ thực hiện chúng điều này

giúp ReactJs tránh những thao tác không cần thiết để tiết kiệm tài

o ReactJs chỉ là thư viện phục vụ cho tầng view ReactJs không phải MVC

framework vì thế sẽ không có phần Model và Controller mà phải kết hợpvới các thư viện khác

o React khá nặng nếu so với các framework khác ReactJs có kích thước

tương tương với Angular (Khoảng 35kb so với 39kb của Angular) Trongkhi đó Angular là một framework hoàn chỉnh

Hình 1.1: Thư viện Reactjs

3.2.2 NodeJS

 Khái niệm:

o NodeJS là một nền tảng (Platform) phát triển độc lập được xây dựng ở

trên V8 Javascript Runtime của Chrome mà chúng ta có thể xây dựngđược các ứng dụng mạng một cách nhanh chóng và dễ dàng mở rộng

o NodeJS là môi trường máy chủ mã nguồn mở (open source server

environment) và được chạy trên nhiều nền tảng

o NodeJS sử dụng javascript để chạy trên môi trường server.

o NodeJS không được xem là một ngôn ngữ lập trình, nên những người

mới phải nắm chắc kiến thức lập trình căn bản như: các giao thức,

Javascript,… mới có thể sử dụng NodeJS Tuy nhiên, cộng đồng NodeJS

thường rất lớn, sẵn sàng support cho bạn mọi lúc mọi nơi

 Ưu điểm:

o JSON APIs Với cơ chế event-driven, non-blocking I/O(Input/Output) và

mô hình kết hợp với Javascript là sự lựa chọn tuyệt vời cho các dịch vụWebsite làm bằng JSON

o Có tốc độ xử lý nhanh nhờ cơ chế xử lý bất đồng bộ (non-blocking) Cóthể dễ dàng xử lý hàng ngàn kết nối trong khoảng thời gian ngắn nhất

o Nhận và xử lý nhiều kết nối chỉ với một single-thread Nhờ đó, hệ thống

xử lý sẽ sử dụng ít lượng RAM nhất và giúp quá trình xử NodeJS lý

nhanh hơn rất nhiều

3.2.3 Framework ExpressJS

 Khái niệm:

o ExpressJS là một Framework nhỏ, nhưng linh hoạt được xây dựng trên nền

tảng của NodeJS Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặcmobile

o ExpressJS có vô số các package hỗ trợ nên rất tiện lợi.

o ExpressJS cung cấp thêm về các tính năng (feature) để dev lập trình tốt hơn nhưng không làm giảm đi tốc độ của NodeJS.

 Đặc điểm:

o ExpressJS hỗ trợ chúng ta phát triển ứng dụng theo mô hình MVC.

o Cho phép định nghĩa các middleware

o Định nghĩa rõ ràng các request methods trong route

o Hỗ trợ mạnh về REST API

Hình 1.1: Framework ExpressJS

3.2.4 Mô hình MVC

 Model: Dùng để cung cấp dữ liệu, thực hiện kết nối, các thao tác với dữ liệunhư: thêm, sửa, xóa, lọc… truy vấn dữ liệu trong database, tương tác với dữ liệuhay hệ quản trị cơ sở dữ liệu

 View: là thành phần chịu trách nhiệm hiển thị dữ liệu đã được truy xuất từ modeltheo một format nào đó theo ý đồ của lập trình viên và ở đây tôi dùng Reactjs

 Controller: là thành phần làm nhiệm vụ xử lý nghiệp vụ, nó nhận request từclient và lập trình viên gọi các hàm trong model có dữ liệu và đưa dữ liệu đó chocác View để hiện dữ liệu Mỗi controller chứa các hàm hành động

Hình 1.1: Mô hình MVC trong NodeJS

CHƯƠNG 4. PHÂN TÍCH THIẾT KẾ

4.1 Đặc tả yêu cầu phần mềm (Software Requirements)

4.1.1 Người dùng chưa đăng ký

Người dùng chưa đăng ký có thể sửa dụng các chức năng sau:

 Xem thông tin các các bộ đề tại phần ôn tập

 Đăng ký tài khoản thành viên

4.1.2 Người dùng thành viên

Người dùng thành viên có thể sửa dụng các chức năng sau:

 Đăng nhập hệ thống

 Cài đặt lại mật khẩu (nếu quên mật khẩu)

 Xem thông báo

 Tạo bộ đề bằng cách thông thường (tạo từng câu) hoặc bằng file excel

 Tạo phòng bằng cách thông thường (tạo từng câu) hoặc bằng các bộ đề đãtạo

 Tham gia ôn tập, kiểm tra

 Quản lý phòng thi đã tạo

 Quản lý bộ đề đã tạo

 Quản lý thông tin cá nhân

 Xem thông tin các phòng thi

4.2 Sơ đồ Use-case

Hình 1.1: Use-case Diagram

4.3 Kịch bản cho Use-case

4.3.1 Người dùng chưa đăng ký

4.3.1.1 Use-case đăng ký tài khoản

Bảng 3-3: Kịch bản use-case đăng ký

Description Người dùng muốn đăng nhập và sử dụng các

quyền của người dùng thành viên

Input Có email chưa đăng ký trong hệ thống, nhập thông

tin theo mẫu yêu cầu

2 Nhấn vào nút đăng ký

3 Nhập thông tin theo yêu cầu của mẫu

4 Bấm vào nút đăng ký

5 Hệ thống gửi yêu cầu đến email

6 Truy cập email đăng ký để xác nhận để kíchhoạt tài khoản

7 Kết thúc use-case

Alternative flow (các bước

phát sinh trong Basic flow)

1 Nhấn vào sign in  chuyển sang trang đăng nhập

Description Người dùng đăng nhập vào hệ thống để sử dụng

chức năng

Output Trả về trang chủ với quyền người dùng thành viên

2 Nhập thông tin (tài khoản, mật khẩu) theo mẫu.

3 Nhấp vào nút đăng nhập

4 Chuyển sang trang chủ với quyền người dùng thành viên

5 Kết thúc use-case

Alternative flow (các bước

phát sinh trong Basic flow)

2.1 Người dùng chọn các 3.1 Người dùng chọn nút đăng nhập bằng google.3.2 Người dùng nhập tài khoản, mật khẩu củagoogle (hoặc chọn tài khoản nếu đã google nếu đãđăng nhập bằng google trước đó)

Description Người dùng thành viên muốn tạo bộ đề ôn tập

5 Kiểm tra lại thông tin và câu hỏi bộ đề

6 Hiển thị thông báo tạo bộ đề thành công  kếtthúc use-case

Alternative flow (các bước

phát sinh trong Basic flow) 4.1 Nhấn vào import excel để tài để lên với dạngfile excel

4.1.1 Chọn file đề dạng excel  nhấn open

4.2 Nhấn vào nút file hướng dẫn  tải file hướngdẫn định dạng bộ đề cần tạo bằng file excel và fileexcel mẫu

5.1 Nhấn sửa để quay lại bước 1 điều chỉnh thôngtin bộ đề

Exception flow 3.1.a Tiêu đề nhập đã được tạo

(các trường hợp ngoại lệ của

4.3.2.3 Use-case: Tạo phòng thi online

Bảng 3-6: Kịch bản use-case tạo phòng thi online

Use case name Tạo phòng thi online

Description Người dùng thành viên muốn tạo phòng thi online

5 Kiểm tra lại thông tin và câu hỏi phòng thi

6 Hiển thị thông báo tạo bộ đề thành công  kếtthúc use-case

Alternative flow (các bước

phát sinh trong Basic flow)

4.1 Nhấn vào import bộ đề đã tạo câu hỏi chophòng thi bằng bộ đề đã tạo

3.1.a Tên phòng thi nhập đã được tạo

3.2.a Nhập thông tin không đúng với yêu cầu củamẫu

4.1.a Nhập thông tin của các câu hỏi không đúngvới yêu cầu

4.3.2.4 Use-case: quản lý phòng thi đã tạo

Bảng 3-7: Kịch bản use-case quản lý phòng thi đã tạo

Use case name Quản lý thông tin các phòng thi đã tạo

Description Người dùng thành viên muốn quản lý các phòng thi

online đã tạo

người dùng

Basic flow 1 Chọn xem chi tiết phòng thi muốn thực hiện

chức năng quản lý

2 Thực hiện thao tác quản lý

3 Hiện thông báo hệ thống  use-case kết thúc

Alternative flow (các bước

phát sinh trong Basic flow) 2.1 Chỉnh sửa thông tin phòng thi.2.1.1 Nhấn vào edit.

2.1.2 Chỉnh sửa thông tin phòng thi theo nhu cầu

và đảm bảo đúng theo yêu cầu của mẫu

2.1.3 Nhấn bào bước 3  Nhấn chỉnh sửa phòngthi

2.1.4 Hiện thông báo chỉnh sửa thành công  case kết thúc

use-2.2 Xóa phòng thi

2.2.1 Nhấn vào nút delete

2.2.2 Nhấn vào nút OK trên popup

2.2.3 Hiện thông báo xóa thành công  use-casekết thúc

2.3 Mời người dùng khác tham gia phòng thi(Phòng thi phải còn hoạt động)

2.3.1 Tại chi tiết phòng thi  chọn mục danh sáchtham gia phòng thi

2.3.2 Nhập email của người dùng muốn thêm vàodanh sách kiểm tra

Exception flow

(các trường hợp ngoại lệ của

Basic flow)

2.1.2.a Chỉnh sửa không đúng yêu cầu của mẫu

4.3.2.5 Quản lý thông tin các bộ đề đã tạo

Bảng 3-8: Kịch bản use-case quản lý bộ đề đã tạo

Use case name Quản lý thông tin các bộ đề đã tạo

Description Người dùng thành viên muốn quản lý các bộ đề đã

tạo

người dùng

Basic flow 1 Chọn bộ đề cần thực hiện chức năng quản lý

2 Thực hiện thao tác quản lý

3 Hiện thông báo hệ thống  use-case kết thúc

Alternative flow (các bước

phát sinh trong Basic flow)

2.1 Chỉnh sửa thông tin bộ đề

2.2 Xóa bộ đề

2.2.1 Nhấn vào nút delete

2.2.2 Nhấn vào nút OK trên popup

2.2.3 Hiện thông báo xóa thành công  use-casekết thúc

2.3 Tải danh sách các người dùng tham giao ôn tập

Exception flow

(các trường hợp ngoại lệ của

Basic flow)

2.1.2.a Chỉnh sửa không đúng yêu cầu của mẫu

4.3.2.6 Use-case: tham gia ôn tập bộ đề

Bảng 3-9: Kịch bản use-case: tham gia ôn tập bộ đề

Use case name Tham gia ôn tập với bộ đề

Description Người dùng thành viên muốn ôn tập với bộ đề

mong muốn

ôn tập

2 Nhấn vào nút bắt đầu để tiến hành ôn tập Xuất hiện danh sách câu hỏi và thời gian làm bài

3 Chọn đáp án ứng với từng câu hỏi

4 Chọn nút nộp bài  xuất hiện thông tin kết quảkiểm tra  kết thúc use-case

Alternative flow (các bước

phát sinh trong Basic flow)

4.1 Nộp bài khi chưa hoàn thành hết các câu hỏi ôntập

4.1.1 Chọn nút nộp bài khi chưa hoàn thành hết cáccâu hỏi ôn tập  hiện popup xác nhận nộp bài.4.1.2 Nhấn OK để nộp bài hoặc cancel để hoàn tác.4.2 Hết thời gian làm bài

4.3.2.7 Use-case: tham gia phòng thi online

Bảng 3-10: Kịch bản use-case tham gia phòng thi online

Use case name Tham gia ôn tập với bộ đề

Description Người dùng thành viên muốn kiểm tra tại phòng thi

– người dùng có trong danh sách tham gia

Input Vào phần phòng thi online  chọn mục phòng thi

đang hoạt độngOutput Hiện thông tin thông báo hoàn thành bài thi

Basic flow 1 Chọn phòng thi cần tham gia ở mục phòng thi

đang hoạt động

2 Nhấn vào nút tham gia kiểm tra  Xuất hiệndanh sách câu hỏi và thời gian làm bài

3 Chọn đáp án ứng với từng câu hỏi

4 Chọn nút nộp bài  Hiện thông báo hoàn thànhbài thi  kết thúc use-case

Alternative flow (các bước

phát sinh trong Basic flow) 4.1 Nộp bài khi chưa hoàn thành hết các câu hỏi ôntập

4.1.1 Chọn nút nộp bài khi chưa hoàn thành hết cáccâu hỏi  hiện popup xác nhận nộp bài

4.1.2 Nhấn OK để nộp bài hoặc cancel để hoàn tác.4.2 Hết thời gian làm bài

4.3.2.8 Use-case: Xem kết quả các bộ đề đã ôn tập

Bảng 3-11: Kịch bản use-case: xem kết quả của các bộ đề đã ôn tập

Use case name Xem kết quả của các bộ đề đã ôn tập

Description Người dùng thành viên muốn xem kết quả của các

bộ để đã ôn tập

Output Hiển thị thông tin kết quả ôn tập của bộ đề

Basic flow 1 Nhấn vào xem chi tiết tại bộ đề (lần kiểm tra )

muốn xem lại kết quả

2 Hiện trang chứa thông tin kết quả ôn tập  case kết thúc

use-Alternative flow (các bước

phát sinh trong Basic flow)

Không có

Exception flow

(các trường hợp ngoại lệ của

Basic flow)

Không có

4.3.2.1 Use-case: Xem kết quả các phòng thi đã tham gia (phòng thi đã kết thúc

và người tạo phòng đã cho phép)

Bảng 3-12: Use-case xem kết quả các phòng thi đã kiểm traUse case name Xem kết quả của các phòng thi đã kiểm tra

Description Người dùng thành viên muốn xem kết quả của các

phòng thi đã kiểm tra

giaOutput Hiển thị thông tin kết quả phòng thi đã tham giaBasic flow 1 Nhấn vào xem chi tiết tại phòng thi muốn xem lại

kết quả

2 Hiện trang chứa thông tin kết quả ôn tập  case kết thúc

use-Alternative flow (các bước

phát sinh trong Basic flow)

4.3.2.2 Use-case: Đặt lại mật khẩu người dùng

Bảng 3-13: Kịch bản use-case: đặt lại mật khẩu người dùng

Use case name Đặt lại mật khẩu người dùng

Description Người dùng thành viên muốn đặt lại mật khẩu

(quên mật khẩu)

khẩu mặc định

Basic flow 1 Nhấn vào quên mật khẩu  hiện popup nhập

email

2 Nhập email muốn đặt lại mật khẩu.

3 Nhấn OK

Alternative flow (các bước

phát sinh trong Basic flow) 2.1 Nhấn cancel hoặc dấu X để tắt popup.

Bảng 3-14: Kịch bản use-case quản lý tất cả người dùng

Description Quản trị viên muốn quản lý thông tin người dùng

theo nhu cầu

quản trị viên

Basic flow 1 Vào phần quản lý người dùng ở trang quản trị

2 Thực hiện chức năng quản lý

3 Hiện thông báo từ hệ thống  use-case kết thúc.Alternative flow (các bước

phát sinh trong Basic flow) 2.1 Thêm người dùng.2.1.1 Nhập thông tin theo yêu cầu của mẫu.

2.1.2 Nhấp submit  Hiển thị thông báo thêmngười dùng thành công  use-case kết thúc

2.2 Chỉnh sửa thông tin người dùng

2.2.1 Vào mục danh sách người dùng

2.2.2 Nhấn vào xem chi tiết người dùng muốn chỉnhsửa

2.2.3 Nhấn vào nút edit  hiện trang các thông tincủa người dùng

2.2.4 Chỉnh sửa thông tin người dùng theo mẫu.2.2.5 Nhấn Submit  hiển thị thông báo  kết thúcuse-case

2.3 Xóa người dùng

2.3.1 Nhấn vào delete  hiển thị popup xác nhận.2.3.2 Nhấn OK  hiển thị thông báo  kết thúc

2.1.2.a Nhập email ã ăng ký trong hệ thốngđúng yêu cầu của đúng yêu cầu của

 hiển thị thông báo lỗi2.2.4.a Nhập thông tin không úng theo yêuđúng yêu cầu củacầu của mẫu  hiển thị thông báo lỗi

2.3.2.a Xóa tài khoản ang ăng nhập đúng yêu cầu của đúng yêu cầu của  hiểnthị thông báo lỗi

4.3.3.2 Use-case: quản lý tất cả lĩnh vực

Bảng 3-15: Kịch bản use-case: quản lý tất cả lĩnh vực

Use case name Quản lý tất cả lĩnh vực

Description Quản trị viên muốn quản lý thông lĩnh vực theo nhu

cầu

quản trị viên

Basic flow 1 Vào phần quản lý lĩnh vực ở trang quản trị

2 Thực hiện chức năng quản lý

3 Hiện thông báo từ hệ thống  use-case kết thúc.Alternative flow (các bước

phát sinh trong Basic flow)

2.1 Thêm lĩnh vực

2.1.1 Nhập thông tin theo yêu cầu của mẫu

2.1.2 Nhấp submit  Hiển thị thông báo thêmngười dùng thành công  use-case kết thúc

2.2 Chỉnh sửa thông tin lĩnh vực

2.2.1 Vào mục danh sách lĩnh vực

2.2.2 Nhấn vào update lĩnh vực muốn chỉnh sửa 

hệ thống chuyển đến mẫu chỉnh sửa lĩnh vực

2.2.3 Nhập thông tin chỉnh sửa theo mẫu (nút cộng

để thêm thẻ và trừ để xóa thẻ)

2.2.4 Nhấn vào nút submit  hiển thị thông báo 

Về trang danh sách lĩnh vực

2.3 Quản lý các thẻ trong lĩnh vực

2.3.1 Xem danh sách các thẻ trong lĩnh vực

2.3.1.1 Chọn dấu + ở đầu lĩnh vực để xuất hiện danhsách các thẻ trong lĩnh vực

2.3.2 Chỉnh sửa thông tin thẻ

2.3.2.1 Nhấn vào update để chỉnh sửa thông ti của thẻ.

2.3.2.2 Điền thông tin chỉnh sửa thẻ theo mẫu.2.3.2.3 Nhấn submit  hiện thông báo  Use-case kết thúc

2.3.3 Xóa thẻ2.3.3.1 Nhấn vào nút Delete  hiện popup xác nhậnxóa thẻ

2.3.3.2 Nhấn OK  hiển thị thông báo  use-case kết thúc

2.3.4 Thêm thẻ2.3.4.1 Nhấn vào ô thêm thẻ ở hàng của lĩnh vựcmuốn thêm thẻ

2.3.4.2 Nhập thông tin của thẻ muốn thêm theomẫu

2.3.4.3 Nhấn submit  hiển thị thông báo  case kết thúc