Xây dựng website dạy học số sử dụng công nghệ mern stack

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG WEBSITE DẠY HỌC SỐ SỬ DỤNG CÔNG NGHỆ MERN STACK GVHD: TS LÊ VĂN VINH SVTH : LÊ THỊ MINH NGUYỆT SKL011250 Tp Hồ Chí Minh, tháng 07/2023 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN  Lê Thị Minh Nguyệt 19110413 ĐỀ TÀI: XÂY DỰNG WEBSITE DẠY HỌC SỐ SỬ DỤNG CƠNG NGHỆ MERN STACK KHỐ LUẬN TỐT NGHIỆP GIÁO VIÊN HƯỚNG DẪN TS LÊ VĂN VINH Thành phố Hồ Chí Minh – Tháng 07/2023 ĐH SƯ PHẠM KỸ THUẬT TP HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CÔNG NGHỆ THÔNG TIN Độc lập – Tự – Hạnh phúc ******** ******** PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Họ tên sinh viên thực hiện: Lê Thị Minh Nguyệt MSSV: 19110413 Ngành: Công nghệ thông tin Tên đề tài: Xây dựng website dạy học số sử dụng công nghệ MERN Stack Họ tên giảng viên hướng dẫn: TS Lê Văn Vinh NHẬN XÉT Về nội dung đề tài & khối lượng thực Ưu điểm Khuyết điểm Đề Nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, Ngày … Tháng … Năm 2023 Giảng viên hướng dẫn (Ký ghi rõ họ tên) ĐH SƯ PHẠM KỸ THUẬT TP HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CÔNG NGHỆ THÔNG TIN Độc lập – Tự – Hạnh phúc ******** ******** PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN Họ tên sinh viên thực hiện: Lê Thị Minh Nguyệt MSSV: 19110413 Ngành: Công nghệ thông tin Tên đề tài: Xây dựng website dạy học số sử dụng công nghệ MERN Stack Họ tên giảng viên phản biện: ThS Mai Anh Thơ NHẬN XÉT Về nội dung đề tài & khối lượng thực Ưu điểm Khuyết điểm Đề Nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, Ngày … Tháng … Năm 2023 Giảng viên phản biện (Ký ghi rõ họ tên) LỜI CẢM ƠN Đầu tiên, em xin gửi lời cảm ơn chân thành tri ân sâu sắc đến thầy Lê Văn Vinh tận tình dìu dắt bảo em suốt trình học tập thực đề tài Em xin cảm ơn thầy nhiệt tình giảng dạy hướng dẫn em việc lựa chọn đề tài, hướng tiếp cận chỉnh sửa thiếu sót trình thực Em xin gửi lời cám ơn tới thầy cô trường Đại học Sư phạm Kỹ thuật TP Hồ Chí Minh – đặc biệt giảng viên khoa Công Nghệ Thông Tin, nhiệt tình giảng dạy, chia sẻ nhiều kiến thức kinh nghiệm cho chúng em q trình học tập trường Để giúp em hồn thành đề tài cách thành cơng Tuy nhiên q trình thực đề tài khơng thể tránh khỏi sai sót mong thầy (cơ) bỏ qua Em mong nhận ý kiến đóng góp thầy (cơ) để em có thêm nhiều kinh nghiệm, nâng cao kiến thức cho thân để phục vụ tốt cho trình học tập làm việc sau Chúng em xin chân thành cảm ơn! Nhóm thực Lê Thị Minh Nguyệt ĐH SƯ PHẠM KỸ THUẬT TP HCM KHOA CÔNG NGHỆ THÔNG TIN ĐỀ CƯƠNG TIỂU LUẬN CHUYÊN NGÀNH Họ tên sinh viên: Lê Thị Minh Nguyệt MSSV : 19110413 Thời gian làm khố luận: Chun ngành: Cơng Nghệ Phần Mềm Tên đề tài: Xây dựng website dạy học số sử dụng công nghệ MERN Stack Giảng viên hướng dẫn: TS Lê Văn Vinh Nhiệm vụ tiểu luận: Lý thuyết Tìm hiểu cơng nghệ: MERN Stack, Restful API, Json Web Token Thực hành Sử dụng Restful API, NodeJS, Express JS để viết APIs cho module hệ thống Sử dụng MongoDB để lưu trữ liệu người dùng hệ thống Sử dụng Json Web Token để xác thực ủy quyền cho hệ thống APIs hoạt động tốt hiệu Sử dụng React JS làm Framework để thiết kế xử lý giao diện web cho người dùng thao tác Tp Hồ Chí Minh, Ngày … Tháng … Năm 2023 Giảng viên hướng dẫn (Ký ghi rõ họ tên) MỤC LỤC PHẦN MỞ ĐẦU 11 LÝ DO CHỌN ĐỀ TÀI 11 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 11 KHẢO SÁT HIỆN TRẠNG CỦA CÁC WEBSITE TƯƠNG TỰ 12 3.1 3.2 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 15 4.1 4.2 Yêu cầu phi chức 15 Yêu cầu phi chức 15 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU 15 5.1 5.2 Đánh giá tổng quan trang web 12 Các chức đặc biệt trang web 13 Đối tượng nghiên cứu 15 Phạm vi nghiên cứu 16 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 16 PHẦN NỘI DUNG 17 CHƯƠNG 1: CÁC CÔNG NGHỆ SỬ DỤNG 17 1.1 KIẾN TRÚC CHUNG CỦA HỆ THỐNG 17 1.2 TÌM HIỂU CƠNG NGHỆ MERN STACK 17 1.2.1 Công nghệ MERN stack gì? 17 1.2.2 Quy trình hoạt động MERN Stack 18 1.2.3 Lý lựa chọn công nghệ MERN Stack 19 1.3 REACTJS 19 1.3.1 Giới thiệu, khái niệm React 19 1.3.2 So sánh React Framework khác 20 1.3.3 Ưu nhược điểm React 22 1.4 NODEJS 22 1.4.1 Giới thiệu khái niệm 22 1.4.2 Ưu nhược điểm NodeJS 24 1.5 EXPRESS JS 25 1.5.1 Giới thiệu 25 1.5.2 Các tính bật 25 1.6 MONGODB 26 1.6.1 Giới thiệu 26 1.6.2 Cách hoạt động 26 1.6.3 Ưu nhược điểm 27 1.7 RESTFUL API 28 1.7.1 Giới thiệu, khái niệm 28 1.7.2 Cách hoạt động 29 1.7.3 Ưu điểm 29 CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ 30 2.1 LƯỢC ĐỒ USE CASE 30 2.1.1 Use case tổng quan 30 2.1.2 Use case chi tiết 30 2.1.3 Đặc tả use case 32 2.2 LƯỢC ĐỒ TUẦN TỰ - SEQUENCE DIAGRAM 49 2.2.1 Xem thông tin trang web 49 2.2.2 Đăng nhập 49 2.2.3 Đăng xuất 50 2.2.4 Đăng ký tài khoản 50 2.2.5 Thêm lớp học 51 2.2.6 Tham gia lớp học 52 2.2.7 Rời khỏi lớp học 52 2.2.8 Xoá lớp học 53 2.2.9 Quản lý bảng tin 53 2.2.10 Thêm đăng 54 2.2.11 Xoá đăng 54 2.2.12 Thêm bình luận 55 2.2.13 Xoá bình luận 55 2.2.14 Xoá thành viên 56 2.2.15 Quản lý tập 56 2.2.16 Thêm tập 57 2.2.17 Xoá tập 57 2.3 LƯỢC ĐỒ LỚP 58 2.4 THIẾT KẾ CƠ SỞ DỮ LIỆU 59 2.4.1 Lược đồ sở liệu 59 2.4.2 Mô tả bảng 59 2.4 THIẾT KẾ GIAO DIỆN 65 2.4.1 Landing Page 65 2.4.2 Modal đăng nhập 66 2.4.3 Modal đăng ký tài khoản 67 2.4.4 Giao diện trang home sau đăng nhập 68 2.4.5 Tạo lớp học 71 2.4.6 Modal tham gia lớp 72 2.4.7 Thêm lựa chọn click vào lớp học 73 2.4.8 Lớp học chi tiết 74 2.4.9 Đăng Bảng tin 75 2.4.10 Bình luận viết 76 2.4.11 Các lựa chọn đăng 76 2.4.12 Các lựa chọn bình luận 77 2.4.13 Bài kiểm tra 78 2.4.14 Tạo kiểm tra 79 2.4.15 Tạo tiêu đề kiểm tra 80 CHƯƠNG 3: CÀI ĐẶT VÀ KIỂM THỬ 82 3.1 KẾ HOẠCH KIỂM THỬ 82 3.1.1 Mục đích kiểm thử 82 3.1.2 Lịch trình kiểm thử 82 3.2 PHẠM VI KIỂM THỬ 82 3.3 THEO DÕI LỖI 83 3.3.1 Phân loại lỗi 83 3.3.2 Quy trình xử lý lỗi 84 3.4 Kiểm thử số chức hệ thống 84 PHẦN KẾT LUẬN 86 VỀ LÝ THUYẾT 86 CHỨC NĂNG CỦA WEBSITE 86 ƯU ĐIỂM 86 NHƯỢC ĐIỂM 87 HƯỚNG PHÁT TRIỂN 87 TÀI LIỆU THAM KHẢO 88 DANH MỤC HÌNH ẢNH Hình 1: Hình minh hoạ kiến trúc hệ thống 17 Hình 2: Tổng quan MERN Stack 18 Hình 3: Quy trình hoạt động MERN Stack 18 Hình 4: DOM ảo ExpressJS dung để tối ưu hoá việc re-render DOM thật 20 Hình 5: Quá trình chuyển đổi từ mã nguồn NodeJS sang JavaScript nhờ vào Chrome V8 engine 23 Hình 6: Quá trình chuyển đổi từ mã nguồn NodeJS sang JavaScript nhờ vào Chrome V8 engine 24 Hình 7: Triển khai Middleware ExpressJS 26 Hình 8: So sánh tốc độ thêm ghi MongoDB SQL 27 Hình 9: Kiến trúc REST 29 Hình 10: Use case tổng quan 30 Hình 11: Use case Quản lý xác thực người dung 30 Hình 12: Use case quản lý tài khoản 31 Hình 13: Use case Tương tác học sinh trang chủ 31 Hình 14: Use case Tương tác học sinh trang lớp học 31 Hình 15: Use case Tương tác giáo viên trang chủ 32 Hình 16: Use case Tương tác giáo viên trang lớp học 32 Hình 17: Sequence Diagram Xem thông tin trang web 49 Hình 18: Sequence Diagramn Đăng nhập 50 Hình 19: Sequence Diagram Đăng xuất 50 Hình 20: Sequence Diagram Đăng ký tài khoản 51 Hình 21: Sequence Diagram Thêm lớp học 51 Hình 22: Sequence Diagram Tham gia lớp học 52 Hình 23: Sequence Diagram Rời khỏi lớp học 52 Hình 24: Sequence Diagram Xoá lớp học 53 Hình 25: Sequence Diagram Quản lý bảng tin 53 Hình 26: Sequence Diagram Thêm đăng 54 Hình 27: Sequence Diagram Xoá đăng 54 Hình 28: Sequence Diagram Thêm bình luận 55 Hình 29: Sequence Diagram Xố bình luận 55 Hình 30: Sequence Diagram Xoá thành viên 56 Hình 31: Sequence Diagram Quản lý tập 56 Hình 32: Sequence Diagram Thêm tập 57 Hình 33: SequenceDiagram Xố tập 57 Hình 34: Class Diagram 58 Hình 35: Lược đồ sở liệu 59 Hình 36: Landing page 65 Hình 37: Landing Page 65 Hình 38: Đăng nhập 66 Hình 39: Đăng ký tài khoản 67 Hình 40: Giao diện trang Home 68 Hình 41: Giao click vào dấu + 69 Hình 42: Giao diện click vào tên ảnh đại diện 69 Hình 43: Giao diện click vào icon Hamberger header 70 Hình 44: Giao diện tạo lớp học 71 Hình 45: Giao diện modal tham gia lớp học 72 Hình 46: Giao diện click vào lớp mà người dùng chưa tham gia 73 Hình 47: Giao diện click vào lớp 73 Hình 48: Giao diện click vào lớp user tham gia 74 Hình 49: Giao diện lớp học chi tiết 75 Hình 50: Giao diện đăng 75 Hình 51: Giao diện bình luận viết 76 Hình 52: Giao diện lựa chọn đăng 77 Hình 53: Giao diện lựa chọn bình luận 78 Hình 54: Giao diện kiểm tra 78 Hình 55: Giao diện tạo kiểm tra 79 Hình 56: Giao diện tạo tiêu đề kiểm tra 80