Xây dựng website học 2 toán tiếng anh cho học sinh cấp 01 bằng công nghệ mern stack

Các Website học tập lần lượt mọc lên như nấm, nhưng thực tế rằng, các Website học tập được tạo nên đa số đều hướng về các đối tượng là người lớn, học sinh cấp 02, cấp 03, sinh viên,… Như

THÀNH PHỐ HỒ CHÍ MINH

BỘ GIÁO DỤC VÀ ĐÀO TẠO

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

XÂY DỰNG WEBSITE HỌC 2TOÁN & TIẾNG ANH CHO HỌC SINH CẤP 01 BẰNG

CÔNG NGHỆ MERN STACK

ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN

GVHD: TS NGUYỄN THÀNH SƠN SVTH: TRẦN THỊ LIÊN

SVTH: NGUYỄN HOÀI NAM

SKL 0 0 7 1 0 1

1

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

BỘ MÔN HỆ THỐNG THÔNG TIN

TRẦN THỊ LIÊN – 16110376 NGUYỄN HOÀI NAM – 16110393

Đề Tài:

KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

XÂY DỰNG WEBSITE HỌC 2TOÁN & TIẾNG ANH CHO HỌC SINH CẤP 01 BẰNG CÔNG NGHỆ MERN STACK

GIÁO VIÊN HƯỚNG DẪN

TS NGUYỄN THÀNH SƠN

KHÓA 2016 - 2020

2

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

BỘ MÔN HỆ THỐNG THÔNG TIN

TRẦN THỊ LIÊN – 16110376 NGUYỄN HOÀI NAM – 16110393

Đề Tài:

XÂY DỰNG WEBSITE HỌC TOÁN & TIẾNG ANH CHO HỌC SINH CẤP 01 BẰNG CÔNG NGHỆ MERN STACK

KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIÁO VIÊN HƯỚNG DẪN

TS NGUYỄN THÀNH SƠN

KHÓA 2016 - 2020

ĐH SƯ PHẠM KỸ THUẬT TP.HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

KHOA CNTT Độc lập – Tự do – Hạnh Phúc

******* *******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Ngành: Công nghệ Thông tin

Tên đề tài: XÂY DỰNG WEBSITE HỌC TOÁN & TIẾNG ANH CHO HỌC SINH CẤP 01 BẰNG CÔNG NGHỆ MERN STACK Họ và tên Giáo viên hướng dẫn: ………

NHẬN XÉT 1 Về nội dung đề tài & khối lượng thực hiện: ………

………

………

2 Ưu điểm: ………

………

………

Khuyết điểm : ………

………

………

4 Đề nghị cho bảo vệ hay không ? ………

5 Đánh giá loại : ………

6 Điểm : ………

Tp Hồ Chí Minh, ngày tháng năm 2020

Giáo viên hướng dẫn

Họ và tên Sinh viên 1 : TRẦN THỊ LIÊN MSSV 1: 16110376

Họ và tên Sinh viên 2 : NGUYỄN HOÀI NAM MSSV 2: 16110393

ĐH SƯ PHẠM KỸ THUẬT TP.HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

KHOA CNTT Độc lập – Tự do – Hạnh Phúc

******* *******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ và tên Sinh viên 1 : TRẦN THỊ LIÊN MSSV 1: 16110376 Họ và tên Sinh viên 2 : NGUYỄN HOÀI NAM MSSV 2: 16110393 Ngành: Công nghệ Thông tin

Tên đề tài: XÂY DỰNG WEBSITE HỌC TOÁN & TIẾNG ANH CHO HỌC SINH CẤP 01 BẰNG CÔNG NGHỆ MERN STACK Họ và tên Giáo viên phản biện: ………

NHẬN XÉT 1 Về nội dung đề tài & khối lượng thực hiện: ………

………

………

2 Ưu điểm: ………

………

………

3 Khuyết điểm : ………

………

………

4 Đề nghị cho bảo vệ hay không ? ………

5 Đánh giá loại : ………

6 Điểm : ………

Tp Hồ Chí Minh, ngày tháng năm 2020

Giáo viên phản biện

LỜI CẢM ƠN

Quá trình thực hiện khóa luận tốt nghiệp là giai đoạn quan trọng nhất trong quãng đời mỗi sinh viên Khóa luận tốt nghiệp là tiền đề nhằm trang bị cho chúng em những kỹ năng nghiên cứu, những kiến thức quý báu trước khi bước vào những công việc thực tế

Trước hết, nhóm chúng em bao gồm Trần Thị Liên và Nguyễn Hoài Nam xin chân thành cảm ơn quý Thầy, Cô khoa Công nghệ Thông tin đã tận tình chỉ dạy và trang bị cho chúng em những kiến thức cần thiết trong suốt thời gian ngồi trên ghế giảng đường, làm nền tảng cho chúng em có thể hoàn thành được khóa luận này

Chúng em xin trân trọng cảm ơn thầy Nguyễn Thành Sơn đã tận tình giúp đỡ, định hướng cách tư duy và cách làm việc khoa học, hiệu quả Đó là những góp ý hết sức quý báu không chỉ trong quá trình thực hiện khóa luận này mà còn là hành trang tiếp bước cho chúng em trong quá trình học tập và lập nghiệp sau này

Và cuối cùng, xin gửi lời cảm ơn đến gia đình, bạn bè, tập thể lớp

161101, những người luôn sẵn sàng sẻ chia và giúp đỡ trong học tập và cuộc sống Mong rằng, chúng ta sẽ mãi mãi gắn bó với nhau

Xin chúc những điều tốt đẹp nhất sẽ luôn đồng hành cùng mọi người

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

*********

ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP

Họ và tên sinh viên 1: Trần Thị Liên MSSV: 16110376

Họ và tên sinh viên 2: Nguyễn Hoài Nam MSSV: 16110393

Ngành: Công nghệ thông tin

Tên đề tài: XÂY DỰNG WEBSITE HỌC TOÁN & TIẾNG ANH CHO HỌC SINH CẤP 01 BẰNG CÔNG NGHỆ MERN STACK

Giáo viên hướng dẫn: ………

Nhiệm vụ khóa luận:

- Tìm hiểu và vận dụng được công nghệ MernStack, bao gồm tìm hiểu và vận dụng:

1.3 Cách tiếp cận và phương pháp nghiên cứu

• Đối tượng nghiên cứu

• Khảo sát các ứng dụng liên quan

• Nhận xét ưu nhược điểm

2.4 Chương 4: Thiết kế giao diện

2.4.1 Giao diện Admin

2.4.2 Giao diện người dùng

2.5 Chương 5: Cài đặt và kiểm thử

2.5.1 Cài đặt

• Môi trường thử nghiệm và cài đặt

7

05/2020 – 06/2020

9 05/2020 –

06/2020

Xử lý nhớ đăng nhập Admin

Xử lý quản lý đề thi

Nam

15

05/2020 – 06/2020

Xử lý quản lý tin tức

Liên

16

05/2020 – 06/2020

Xử lý quản lý nội dung bài học Nam

17 05/2020 –

06/2020

Xử lý quản lý kết quả thi

Nam

18 06/2020 Xử lý gọi APIs cho chức

năng xem tin tức, xem nội dung bài học, xem bài học tiêu biểu, bài học nổi bật

Liên

19 27/06/2020

– 01/07/2020

Chỉnh sửa giao diện lần cuối

Liên

20 01/07/2020

– 10/07/2020

Kiểm thử

Liên

21 11/07/2020

– 15/07/2020

Viết báo cáo

Liên

22 16/07/2020

– 19/07/2020

Quay video demo

Mục lục

Phần 1: MỞ ĐẦU 15

1 Tính cấp thiết của đề tài 15

2 Mục đích của đề tài 15

3 Cách tiếp cận và phương pháp nghiên cứu 15

4 Kết quả dự kiến đạt được 16

Phần 2: NỘI DUNG 17

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 17

1.1 MERNSTACK 17

1.1.1 MernStack là gì? 17

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 21

2.1 KHẢO SÁT HIỆN TRẠNG 21

2.1.1 Tienganh123 ( https://www.tienganh123.com/ ) 21

2.1.2 Luyenthi123 ( https://www.luyenthi123.com/ ) 23

2.1.3 Kết luận 24

2.2 XÁC ĐỊNH YÊU CẦU 24

2.2.1 Nhận diện tác nhân và các chức năng trong sơ đồ usecase 24

2.2.2 Lược đồ usecase 25

2.2.3 Mô tả usecase 25

CHƯƠNG 3: THIẾT KẾ PHẦN MỀM 29

3.1 THIẾT KẾ HỆ THỐNG 29

3.2 THIẾT KẾ DỮ LIỆU 32

3.2.1 Mô hình ERD 32

3.2.2 Mô hình cơ sở dữ liệu 33

CHƯƠNG 4: THIẾT KẾ GIAO DIỆN 43

4.1 THIẾT KẾ GIAO DIỆN ADMIN 43

4.1.1 Giao diện màn hình đăng nhập 43

4.1.2 Giao diện màn hình trang chủ Admin 44

4.1.3 Giao diện quản lý 45

4.1.4 Giao diện thêm 46

4.1.5 Giao diện sửa 48

4.1.6 Giao diện xóa 49

4.2 THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG 50

4.2.1 Giao diện màn hình chính 50

4.2.2 Giao diện nội dung bài học 53

4.2.3 Giao diện kiểm tra 54

CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 57

5.1 CÀI ĐẶT 57

5.1.1 Hướng dẫn tạo project 57

5.1.2 Tạo project react js 58

5.2 KIỂM THỬ 59

PHẨN KẾT LUẬN 62

1 Những kết quả đạt được 62

2 Hạn chế 62

3 Hướng phát triển 62

TÀI LIỆU THAM KHẢO 64

HƯỚNG DẪN SỬ DỤNG 65

DANH MỤC BẢNG BIỂU

Bảng 1Nhận diện tác nhân và các chức năng trong sơ đồ usecase 24

Bảng 2 Usecase đăng nhập 25

Bảng 3 Usecase đăng ký 26

Bảng 4 Usecase đăng xuất 27

Bảng 5 Usecase thêm câu hỏi 27

Bảng 6 Usecase sửa câu hỏi 27

Bảng 7 Usecase xóa câu hỏi 28

Bảng 8 ExamContentSchema 34

Bảng 9 ExamSchema 35

Bảng 10 LessionContentSchema 35

Bảng 11 MemberSchema 36

Bảng 12 NewsSchema 37

Bảng 13 QuestionsSchema 38

Bảng 14 ResultSchema 39

Bảng 15 GameSchema 41

Bảng 16 ForumSchema 42

Bảng 17 Danh sách xử lý đăng nhập 43

Bảng 18 Danh sách xử lý giao diện trang chủ Admin 44

Bảng 19 Danh sách xử lý chức năng quản lý câu hỏi 46

Bảng 20 Danh sách xử lý Thêm câu hỏi 47

Bảng 21 Danh sách xử lý Sửa câu hỏi 48

Bảng 22 Danh sách xử lý Xóa câu hỏi 49

Bảng 23 Danh sách xử lý giao diện chính của người dùng 51

Bảng 24 Danh sách xử lý nội dung bài học 54

Bảng 25 Danh sách xử lý chức năng kiểm tra 56

Bảng 26 Kiểm thử 59

DANH MỤC HÌNH ẢNH

Hình 1 Giao diện website tienganh123 21

Hình 2 Giao diện website Luyenthi123 23

Hình 3 Lược đồ Usecase 25

Hình 4 Sơ đồ sequence diagram đăng nhập 29

Hình 5 Sơ đồ sequence diagram đăng ký 29

Hình 6 Sơ đồ sequence diagram đăng xuất 30

Hình 7 Sơ đồ sequence diagram thêm câu hỏi 30

Hình 8 Sơ đồ sequence diagram sửa câu hỏi 31

Hình 9 Sơ đồ sequence diagram xóa câu hỏi 31

Hình 10 Mô hình ERD 32

Hình 11 Giao diện đăng nhập Admin 43

Hình 12 Giao diện trang chủ Admin 44

Hình 13 Giao diện quản lý câu hỏi 45

Hình 14 Giao diện thêm câu hỏi 46

Hình 15 Giao diện sửa câu hỏi 48

Hình 16 Giao diện xóa câu hỏi 49

Hình 17 Giao diện chính của người dùng 50

Hình 18 Giao diện chính của người dùng (tt) 50

Hình 19 Giao diện chính của người dùng (tt) 51

Hình 20 Giao diện nội dung bài học 53

Hình 21 Giao diện nội dung bài học (tt) 53

Hình 22 Giao diện kiểm tra 54

Hình 23 Giao diện kiểm tra (tt) 55

Hình 24 Đăng nhập trang Admin 65

Hình 25 Thực hiện chức năng thêm - xóa - sửa 66

Phần 1: MỞ ĐẦU

1 Tính cấp thiết của đề tài

Trong cuộc sống tất bật hiện nay, mọi việc đều được đơn giản và tối

ưu hóa thời gian thông qua việc ứng dụng công nghệ thông tin vào xử lý các công việc hàng ngày Theo thời gian, ngày càng có nhiều công nghệ mới thuộc lĩnh vực công nghệ thông tin ra đời, và việc cập nhật, tiếp thu công nghệ mới

để tối ưu công việc là đều cấp thiết nếu không muốn bị tuột hậu so với lượng kiến thức khổng lồ của ngành

Bên cạnh công nghệ phát triển thì nhu cầu học tập online của học sinh, sinh viên cũng ngày càng gia tăng Các Website học tập lần lượt mọc lên như nấm, nhưng thực tế rằng, các Website học tập được tạo nên đa số đều hướng

về các đối tượng là người lớn, học sinh cấp 02, cấp 03, sinh viên,… Nhưng đối với thực tế hiện nay, các em cấp 01 cũng đang có nhu cầu học tập thêm rất nhiều, và các em cũng đã được tiếp cận công nghệ từ rất sớm

Chính vì thế mà nhóm đã chọn đề tài “Xây dựng Website học toán & tiếng anh cho học sinh cấp 01 bằng công nghệ Mern Stack”, nhằm để học hỏi công nghệ mới đang rất được ưa chuộng là MernStack để có thể nâng cao kiến thức chuyên ngành và ứng dụng chúng vào thực tiễn khi ra trường, đồng thời cung cấp cho các em học sinh cấp 01 một nơi để học tập, rèn luyện thêm kiến thức

3 Cách tiếp cận và phương pháp nghiên cứu

• Đối tượng nghiên cứu:

- Tìm hiểu MernStack: định nghĩa MernStack và các thành phần

• Phạm vi nghiên cứu: Với bài luận văn này, nhóm em sẽ tập trung tìm

hiểu và thực hiện các nội dung sau:

- Tìm hiểu các nội dung, kiến thức về MernStack

- Sau khi tìm hiểu, nhóm sẽ tập trung vận dụng những kiến thức đã tìm hiểu để xây dựng website học tập toán và tiếng anh cho học sinh

cấp 01

4 Kết quả dự kiến đạt được

• Hiểu rõ kiến thức về MernStack: định nghĩa và các thành phần

• Xây dựng thành công website học tập toán và tiếng anh cho học sinh

cấp 01

Phần 2: NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 MERNSTACK

❖ MongoDB:

▪ MongoDB là một cơ sở dữ liệu mã nguồn mở và là cơ sở

dữ liệu NoSQL hàng đầu, được hàng triệu người sử dụng MongoDB được viết bằng C++

▪ Ngoài ra, MongoDB là một cơ sở dữ liệu đa nền tảng, hoạt động trên các khái niệm Collection và Document, nó cung cấp hiệu suất cao, tính khả dụng cao và khả năng mở rộng

dễ dàng

▪ Một số thuật ngữ thường gặp trong MongoDB:

o Database: là một Ô chứa dữ liệu ở mức vật lý (physical), mỗi database sẽ có nhiều collection và được thiết lập lưu trữ ở một nơi trong máy chủ máy tính Một máy chủ MongoDB thường có thể tạo nhiều

cơ sở dữ liệu

o Collection: là nhóm các tài liệu (document), nó tương đương với một bảng (table) trong CSDL thông thường nên mỗi collection sẽ thuộc về một database

duy nhất Tuy nhiên nó có một sực khác biệt đó là nó không có ràng buộc Relationship như các hệ quản trị CSDL khác nên việc truy xuất rất nhanh, chính vì thế mỗi collection có thể chứa nhiều thể loại khác nhau không giống như table trong hệ quản trị mysql là các field cố định

o Document: có cấu trúc tương tự như kiểu dữ liệu JSON, nghĩa là sẽ có các cặp (key => giá trị) nên nó

có tính năng động rất lớn Document ta có thể hiểu nó giống như các record dữ liệu trong MYSQL, tuy nhiên nó có sự khác biệt là các cặp (key => value) có thể không giống nhau ở mỗi document

❖ ExpressJS:

▪ Express.js là một trong những framework phổ biến nhất trong Node.js, nó là một framework đơn giản nhưng đủ mạnh để giúp chúng ta tiếp cận cũng như phát triển website dựa trên framwork này

▪ 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ặc mobile

▪ Router là một Object (khác với Routing), nó là một instance riêng của middleware và routes Chính vì nó là một instance của middleware và route nên nó có các chức năng của cả hai Chúng ta có thể gọi nó là một mini- application

▪ Các Application dùng ExpressJS làm core đều có phần Router được tích hợp sẵn trong đó

▪ Router hoạt động như một middleware nên chúng ta có thể dùng nó như một arguments Hoặc dùng nó như một arguments cho route khác

❖ ReactJS:

▪ Hiện nay các Web Dev đang nổi lên mô hình web page Web single-page là tất cả các thao tác xử lý của trang web đều được diễn ra trên cùng một trang Việc này giúp nâng cao trải nghiệm người dùng, các thao tác xử lý của người dùng và animation, đều được thực hiện một cách nhanh chóng và mượt mà So với web single-page thì các web cũ xử lý dữ liệu khá lâu do phải phụ thuộc khá nhiều vào khả năng xử lý của server nên thường xuyên load trang mới hay nhưng trang nhiều logic sẽ khiến một số chức năng không được như ý muốn và dễ sinh ra Bug làm giảm trải nghiệm người dùng Từ đó web single-page ra đời và các ngôn ngữ phát triển single-page ngày càng phát triển Trong số đó ReactJS đang là một thư viện mạnh nhất về phát triển single-page hiện nay

single-▪ React.JS là một thư viện Javascript dùng để xây dựng giao diện người dùng do FaceBook tạo ra

▪ Cho phép những nhà phát triển web tạo ra giao diện người dung nhanh chóng Phần Views của Reactjs thường được hiển thị bằng việc chủ yếu dung các component mà chứa các component cụ thể hoặc các thẻ HTML

❖ NodeJS:

▪ NodeJS là một hệ thống phần mềm được thiết kế để viết các ứng dụng internet có khả năng mở rộng, đặc biệt là máy chủ web Chương trình được viết bằng JavaScript, sử dụng kỹ thuật điều khiển theo sự kiện, nhập/ xuất không đồng bộ để tối thiểu tổng chi phí và tối đa khả năng mở rộng NodeJS bao gồm có V8 JavaScript Engine của Google, libUV và vài thư viện khác NodeJS

▪ NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ Window cho tới Linux, OSX nên đó cũng là một lợi thế NodeJS cung cấp các thư viện phong phú ở dạng JavaScript Module khác nhau giúp đơn giản hóa việc lập trình và giảm thời gian ở mức thấp nhất NodeJS được xây dựng và chạy trên V8 Engine V8 Engine dựa trên C++ Vì vậy, cuối cùng trái tim của NodeJS chính là C++

▪ Ý tưởng chính của NodeJS là sử dụng non – blocking, hướng sự vào ra dữ liệu thông qua các tác vụ thời gian thực một cách nhanh chóng Bởi vì NodeJS có khả năng mở rộng nhanh chóng, khả năng xử lý một số lượng lớn các kết nối đồng thời bằng thông lượng cao Nếu như các ứng dụng web truyền thống, các request tajora một luồng xử lý yêu cầu mới và chiếm RAM của hệ thống thì việc tài nguyên của hệ thống sẽ được sử dụng không hiệu quả Chính vì lẽ đó giải pháp mà NodeJS đưa ra là sử dụng luồng đơn (Single – Threaded), kết hợp với non – blocking I/O để thực thi các request, cho phép hỗ trợ hang chục ngàn kết nối đồng thời

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 2.1 KHẢO SÁT HIỆN TRẠNG

2.1.1 Tienganh123 ( https://www.tienganh123.com/ )

❖ Các giao diện chính

❖ Những tính năng chính

• Đăng nhập, đăng ký

• Đăng nhập qua facebook, gmail, yahoo

• Học tập theo nội dung từng lớp

• Làm kiểm tra

• Thi đấu

❖ Ưu điểm

• Giao diện dễ thương

• Đảm bảo đầy đủ chức năng cơ bản của một website học tập

• Nhiều chức năng sáng tạo hỗ trợ việc học tập không nhàm chán

• Dễ sử dụng

❖ Khuyết điểm

• Giao diện dàn trãi không làm nổi bật được chức năng chính của website

❖ Ưu điểm

• Đảm bảo đầy đủ chức năng cơ bản của một website học tập

• Giao diện đơn giản, dễ nhìn

❖ Khuyết điểm

• Diễn đàn trao đổi những vấn đề không liên quan học tập, câu

từ không phù hợp 2.1.3 Kết luận

Thông qua những trang web đã khảo sát, có thể rút ra các chức năng cần thiết phải có của một website học tập Bên cạnh đó, những ưu điểm và hạn chế của các trang web đã khảo sát cũng giúp nhóm rút ra những lưu ý cần thiết để

có thể áp dụng vào website của mình một cách hoàn thiện hơn

2.2 XÁC ĐỊNH YÊU CẦU

2.2.1 Nhận diện tác nhân và các chức năng trong sơ đồ usecase

Bảng 1Nhận diện tác nhân và các chức năng trong sơ đồ usecase

Người dùng Đăng ký tài khoản

Đăng nhập / Đăng xuất ( với tài khoản đã đăng ký) Học tập

Kiểm tra Xem tin tức giáo dục Người quản lý Thêm, xóa, sửa user

Thêm, xóa, sửa câu hỏi Thêm, xóa, sửa đề thi Thêm, xóa, sửa tin tức Thêm, xóa, sửa nội dung bài học Thêm, xóa, sửa kết quả thi Đăng nhập, đăng xuất

Tên usecase Đăng nhập

Mô tả Đăng nhập vào website

Tác nhân kích hoạt Users, Admin

Điều kiện kích hoạt Tài khoản đã đăng ký với hệ thống, đang trong

trạng thái chưa đăng nhập Luồng sự kiện chính 1 Truy cập website

2 Chọn chức năng đăng nhập

3 Nhập username, mật khẩu

4 Nhấn nút Đăng nhập

5 Hệ thống kiểm tra thông tin

- Nếu thông tin đúng: Chuyển đến bước

6

- Nếu username hoặc mật khẩu sai: Hiển thị thông báo “Tai khoan hoac mat khau khong chinh xac” Quay lại bước 3

6 Hiển thị màn hình chính của website với thông tin của tài khoản đăng nhập

Biến thể Username hoặc mật khẩu để trống: Vô hiệu hóa

nút Đăng nhập Ngoại lệ Không có

2.2.3.2 Usecase đăng ký

Bảng 3 Usecase đăng ký

Tên usecase Đăng ký

Mô tả Đăng ký tài khoản mới

Tác nhân kích hoạt Users

Điều kiện kích hoạt Tài khoản chưa đăng ký với hệ thống

Luồng sự kiện chính 1 Truy cập website

2 Chọn chức năng đăng ký

3 Nhập username, mật khẩu

4 Nhấn nút Đăng ký

5 Hệ thống kiểm tra thông tin

- Nếu thông tin đúng: Chuyển đến bước 6

- Nếu username đã tồn tại: Hiển thị thông báo “Tai khoan đã được đăng ký” Quay lại bước 3

6 Hiển thị màn hình chính của website với thông tin của tài khoản đăng ký

Biến thể Không có

Ngoại lệ Không có

2.2.3.3 Usecase đăng xuất

Bảng 4 Usecase đăng xuất

Tên usecase Đăng xuất

Mô tả Đăng xuất khỏi phiên làm việc

Tác nhân kích hoạt Users, Admin

Điều kiện kích hoạt Đang trong trạng thái đã đăng nhập

Luồng sự kiện chính 1 Nhâp chọn đăng xuất

2 Thoát khỏi phiên làm việc

Biến thể Không có

Ngoại lệ Không có

2.2.3.4 Usecase thêm câu hỏi

Bảng 5 Usecase thêm câu hỏi

Tên usecase Thêm câu hỏi

Mô tả Thêm câu hỏi vào quản lý câu hỏi

Tác nhân kích hoạt Admin

Điều kiện kích hoạt Đang đăng nhập bằng tài khoản Admin

Luồng sự kiện chính 1 Trên màn hình chính nhấp vào Quản lý câu

hỏi

2 Nhấp chọn nút Thêm câu hỏi

3 Nhập thông tin câu hỏi

4 Nhấn nút Thêm Biến thể Không có

Ngoại lệ Không có

2.2.3.5 Usecase sửa câu hỏi

Bảng 6 Usecase sửa câu hỏi

Tên usecase Sửa câu hỏi

Mô tả Sửa thông tin câu hỏi

Tác nhân kích hoạt Admin

Điều kiện kích hoạt Đang đăng nhập bằng tài khoản Admin

Luồng sự kiện chính 1 Trên màn hình chính nhấp vào Quản lý câu

hỏi

2 Nhấp chọn biểu tượng Sửa

3 Nhập thông tin câu hỏi cần sửa

4 Nhấn nút Sửa Biến thể Không có

Ngoại lệ Không có

2.2.3.6 Usecase xóa câu hỏi

Bảng 7 Usecase xóa câu hỏi

Tên usecase Sửa câu hỏi

Mô tả Thêm câu hỏi vào quản lý câu hỏi

Tác nhân kích hoạt Admin

Điều kiện kích hoạt Đang đăng nhập bằng tài khoản Admin

Luồng sự kiện chính 1 Trên màn hình chính nhấp vào Quản lý câu

hỏi

2 Nhấp chọn biểu tượng xóa câu hỏi

3 Hệ thống hiển thị thông báo “ Delete Item” Nhấn nút OK

Biến thể Không có

Ngoại lệ Không có

CHƯƠNG 3: THIẾT KẾ PHẦN MỀM 3.1 THIẾT KẾ HỆ THỐNG

Hình 4 Sơ đồ sequence diagram đăng nhập

Hình 5 Sơ đồ sequence diagram đăng ký

Hình 6 Sơ đồ sequence diagram đăng xuất

Hình 7 Sơ đồ sequence diagram thêm câu hỏi

Hình 8 Sơ đồ sequence diagram sửa câu hỏi

Hình 9 Sơ đồ sequence diagram xóa câu hỏi

3.2 THIẾT KẾ DỮ LIỆU

3.2.1 Mô hình ERD

Hình 10 Mô hình ERD

3.2.2 Mô hình cơ sở dữ liệu

• examContentSchema

Bảng 8 ExamContentSchema

1 questionCategoryID String Loại câu hỏi theo lớp học

2 questionName String Tên câu hỏi

3 questionResultA String Đáp án A câu hỏi

4 questionResultB String Đáp án B câu hỏi

5 questionResultC String Đáp án C câu hỏi

6 questionResultD String Đáp án D câu hỏi

7 questionResultRight String Đáp án đúng câu hỏi

8 ExamID String Lớp làm bài kiểm tra

• examSchema