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à MernSt
Trang 1Mụ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
Trang 24.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
Trang 3DANH 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
Trang 4DANH 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
Trang 5Phầ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
Trang 6• 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
Trang 7Phầ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
Trang 8duy 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
Trang 9❖ 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
Trang 10▪ 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
Trang 11CHƯƠ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
Trang 12• 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
Trang 14❖ Ư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 Tác nhân Chức năng
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
Trang 152.2.2 Lược đồ usecase
Hình 3 Lược đồ Usecase 2.2.3 Mô tả usecase
2.2.3.1 Usecase đăng nhập
Bảng 2 Usecase đăng nhập
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
Trang 165 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
2.2.3.2 Usecase đăng ký
Bảng 3 Usecase đăng ký
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ý
Trang 172.2.3.3 Usecase đăng xuất
Bảng 4 Usecase đăng xuất
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
2.2.3.4 Usecase thêm câu hỏi
Bảng 5 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
2.2.3.5 Usecase sửa câu hỏi
Bảng 6 Usecase sửa 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
Trang 18Luồ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
2.2.3.6 Usecase xóa câu hỏi
Bảng 7 Usecase xó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
Trang 19CHƯƠ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ý
Trang 20Hình 6 Sơ đồ sequence diagram đăng xuất
Hình 7 Sơ đồ sequence diagram thêm câu hỏi
Trang 21Hình 8 Sơ đồ sequence diagram sửa câu hỏi
Hình 9 Sơ đồ sequence diagram xóa câu hỏi
Trang 223.2 THIẾT KẾ DỮ LIỆU
3.2.1 Mô hình ERD
Hình 10 Mô hình ERD
Trang 233.2.2 Mô hình cơ sở dữ liệu
• examContentSchema
Trang 24Bảng 8 ExamContentSchema STT Tên thuộc tính Kiểu dữ liệu Mô tả Ghi chú
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
• examSchema
Trang 25Bảng 9 ExamSchema STT Tên thuộc tính Kiểu dữ liệu Mô tả Ghi chú
1 examEasyNumber String Số câu hỏi bài kiểm tra
3 examTimeMake String Thời gian làm bài
5 examCategoryNumber String Loại câu hỏi
• lessionContentSchema
Bảng 10 LessionContentSchema STT Tên thuộc tính Kiểu dữ
liệu
Mô tả Ghi chú
1 lessionContentSubjects String Bài học của lớp
2 lessionContentTitle String Tiêu đề bài học
3 lessionContentImg String Ảnh bài học
4 lessionContentDetail String Nội dung chi tiết bài học
Trang 26• memberSchema
Bảng 11 MemberSchema STT Tên thuộc tính Kiểu dữ liệu Mô tả Ghi chú
1 memberCategory String Loại member
2 memberLogin String Tên đăng nhập
7 memberAddress String Địa chỉ
8 avatarContentImg String Ảnh đại diện
Trang 27• newsSchema
Bảng 12 NewsSchema STT Tên thuộc tính Kiểu dữ liệu Mô tả Ghi chú
1 categoryNews String Loại tin tức
Trang 28• questionSchema
Bảng 13 QuestionsSchema STT Tên thuộc tính Kiểu dữ liệu Mô tả Ghi chú
1 questionCategoryId String Loại câu hỏi theo lớp
2 questionName String Tên câu hỏi