Xây dựng website hỗ trợ học tập và đánh giá năng lực

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 HỖ TRỢ HỌC TẬP VÀ ĐÁNH GIÁ NĂNG LỰC GVHD: ThS NGUYỄN TRẦN THI VĂN SVTH: PHAN CAO CƯỜNG SKL009821 Tp Hồ Chí Minh - 2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT KHOA ĐÀO TẠO CHẤT LƯỢNG CAO - - KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT ĐỀ TÀI: XÂY DỰNG WESITE HỖ TRỢ HỌC TẬP VÀ ĐÁNH GIÁ NĂNG LỰC Giảng viên hướng dẫn: Th.S Nguyễn Trần Thi Văn Sinh viên thực hiện: Phan Cao Cường Hồ Chí Minh, tháng 12 năm 2022 18110087 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT KHOA ĐÀO TẠO CHẤT LƯỢNG CAO - - KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT ĐỀ TÀI: XÂY DỰNG WESITE HỖ TRỢ HỌC TẬP VÀ ĐÁNH GIÁ NĂNG LỰC Giảng viên hướng dẫn: Th.S Nguyễn Trần Thi Văn Sinh viên thực hiện: Phan Cao Cường Hồ Chí Minh, tháng 12 năm 2022 18110087 CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc ******* NHIỆM VỤ CỦA KHÓA LUẬN TỐT NGHIỆP Sinh viên: Phan Cao Cường MSSV: 18110087 Chuyên ngành: Công nghệ thông tin Giảng viên hướng dẫn: Thạc sĩ Nguyễn Trần Thi Văn Ngày nhận: 05/09/2022 Ngày nộp: 20/12/2022 Tên đề tài: Xây dựng Website hỗ trợ học tập đánh giá lực Nội dung thực hiện: • Lý thuyết: - Tìm hiểu cơng nghệ MERN - Tìm hiểu lập trình ReactJs, Nodejs - Tìm hiểu RESTful API • Thực hành: - Xây dựng website cho phép người dùng củng cố kiến thức theo chủ đề, chủ đề có nội dung riêng biệt - Hệ thống lại đề kiểm tra qua năm cho người dùng luyện tập - Xây dựng chế mua gói dịch vụ nâng cao tính so với người dùng - Xây dựng kiểm tra theo chủ đề - Xây dựng hệ thống cho người quản lý TRƯỞNG NGÀNH (Ký ghi rõ họ tên) GIẢNG VIÊN HƯỚNG DẪN (Ký ghi rõ họ tên) CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên: Phan Cao Cường MSSV: 18110087 Ngành: Công nghệ thông tin Tên đề tài: Xây dựng Website hỗ trợ học tập đánh giá lực Họ tên Giáo viên hướng dẫn: Th.S Nguyễn Trần Thi Văn NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: ………… (Bằng chữ: .) Tp Hồ Chí Minh, ngày tháng năm 2022 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên: Phan Cao Cường MSSV: 18110087 Ngành: Công nghệ thông tin Tên đề tài: Xây dựng Website hỗ trợ học tập đánh giá lực Họ tên Giáo viên phản biện: T.S Nguyễn Trần Thiên Bảo NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm:………… …(Bằng chữ: .) Tp Hồ Chí Minh, ngày tháng năm 20… Giáo viên hướng dẫn (Ký & ghi rõ họ tên) LỜI CẢM ƠN Để hồn thành khóa luận không nỗ lực bạn thân mà cịn giúp đỡ nhiệt tình thầy cơ, bạn bè dù trực tiếp hay gián tiếp, nhóm xin chân thành gửi lời cảm ơn đến Xin cảm ơn lãnh đạo, Ban giám hiệu toàn thể thầy cô giáo trường Đại Học Sư phạm Kỹ Thuật TP HCM khoa Đào tạo Chất Lượng Cao môn Công nghệ phần mềm tạo điều kiện cho em hồn thành tốt khóa luận Em xin trân trọng cảm ơn thầy Nguyễn Trần Thi Văn tận tình giúp đỡ, định hướng cách tư cách làm việc khoa học Đó góp ý q báu khơng q trình thực luận văn mà hành trang tiếp bước cho em trình học tập lập nghiệp sau Bài báo cáo thực thời gian ngắn kiến thức chúng em nhiều hạn chế, khơng tránh khỏi thiếu sót, em mong nhận ý kiến đóng góp quý báu Thầy Cơ để kiến thức chúng em hồn thiện Nhóm sinh viên thực Phan Cao Cường vi TÓM TẮT Trước trở thành sinh viên Trường Đại học Sư phạm Kỹ thuật TP.HCM, nhóm tác giả học sinh, phải trải qua Kì thi tuyển sinh đại học trở thành sinh viên Trường Nhưng năm gần với lựa chọn thí sinh thơng qua đánh giá lực trường Đại học mở thêm hội cho học sinh bước vào cánh cổng Đại học gần thêm bước Tuy việc tiếp cận với mơ hình lại gây khó khăn cho bạn vùng xâu, vùng xa tiếp thu cách tiếp nhận đánh giá Hiện Khoa học Công nghệ ngày phát triển, việc phải di chuyển khoảng cách xa đến Thành phố tiếp thu thêm kiến thức, cấu trúc đánh giá lực trở nên không cần thiết bới việc hồn tồn năm bắt nhà có Internet Nắm bắt xu hướng kèm với thị trường chưa có website đáp ứng yêu cầu nên nhóm định “Xây dựng Website hỗ trợ học tập đánh giá lực vii MỤC LỤC NHIỆM VỤ CỦA KHÓA LUẬN TỐT NGHIỆP PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN LỜI CẢM ƠN vi TÓM TẮT vii MỤC LỤC viii DANH MỤC HÌNH xi DANH MỤC BẢNG xiii Chương TỔNG QUAN 1.1 Lý chọn đề tài 1.2 Mục tiêu nghiên cứu 1.3 Phạm vi đề tài 1.4 Phương pháp nghiên cứu Chương CƠ SỞ LÝ THUYẾT 2.1 Tổng quan MERN Stack 2.1.1 MongoDB 2.1.2 ExpressJs 2.1.3 ReactJs 2.1.4 NodeJs Chương KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 10 3.1 Khảo sát trạng 10 3.1.1 Bài thi đánh giá lực ? 10 3.1.2 Cấu trúc đề thi 10 3.1.3 Mục tiêu kỳ thi đánh giá lực 10 3.2 Tính cấp thiết đề tài 11 Chương ĐẶC TẢ YÊU CẦU HỆ THỐNG 13 4.1 Mô tả hệ thống 13 4.2 Yêu cầu chức 13 viii 4.2.1 Yêu cầu người dùng 13 4.2.2 Yêu cầu hệ thống 14 4.2.3 Mô tả usecase 19 4.3 Yêu cầu phi chức 37 4.3.1 Khả sử dụng 37 4.3.2 Tính xác thực 37 4.3.3 Hiệu suất 37 4.3.4 Công cụ thực 38 Chương THIẾT KẾ HỆ THỐNG 39 5.1 Thiết kế kiến trúc 39 5.1.1 Back-end 39 5.1.2 Cơ sở liệu 41 5.1.3 Mơ hình ERD 42 5.1.4 Danh sách bảng 42 5.1.5 Chi tiết bảng 43 5.1.6 Kiến trúc Front-end 46 5.1.7 Lược đồ chức Đăng ký 48 5.1.8 Lược đồ chức đăng nhập bằng email 49 5.1.9 Lược đồ chức đăng nhập bằng google 50 5.1.10 Lược đồ chức đăng nhập bằng facebook 51 5.2 Thiết kế giao diện 51 5.2.1 Quản lý người dùng 51 5.2.2 Quản lý dịch vụ 52 5.2.3 Thêm dịch vụ 53 5.2.4 Quản lý kiểm tra 54 5.2.5 Chỉnh sửa kiểm tra 54 5.2.6 Thêm kiểm tra 55 5.2.7 Quản lý topic 57 5.2.8 Giao diện điều hướng đến chức 57 ix Hình 5.20 Giao diện chi tiết kiểm tra Mô tả: STT Thành phần Kiểm tra Mô tả Bắt đầu kiểm tra Bảng 5.10 Mô tả giao diện chi tiết kiểm tra 60 5.2.12 Giao diện kiểm tra Hình 5.21 Giao diện kiểm tra Mô tả: STT Thành phần Danh sách câu hỏi Mơ tả Các câu hỏi có kiểm tra Lựa chọn Bốn phương án lựa chọn Câu trước Quay lại câu trước Chọn tiếp tục Đánh dấu câu chọn chuyển đến câu Nộp Nộp Bảng 5.11 Mô tả giao diện kiểm tra 61 5.2.13 Giao diện kết kiểm tra Hình 5.22 Giao diện kết kiểm tra Mô tả: STT Thành phần Mô tả Danh sách câu hỏi Câu hỏi có kiểm tra Đáp án câu hỏi Đáp án câu hỏi Câu trước Quay lại câu trước Câu Đi đến câu Kiểm tra lại Kiểm tra lại Bảng 5.12 Mô tả giao diện kết kiểm tra 62 5.2.14 Giao diện thống kê kết kiểm tra Hình 5.23 Giao diện thống kê kết kì Mơ tả: Thành phần STT Tỉ lệ câu hỏi theo Mô tả Biểu đồ mô tả phần trăm chủ đề chủ đề Tỉ lệ câu hỏi trả lời Biểu đồ mô tả phần trăm trả lời Số câu trả lời theo Số câu trả lời tỉ lệ câu theo chủ đề Giải chủ đề vấn đề Số câu trả lời theo Số câu trả lời tỉ lệ câu theo chủ đề Toán học, tư chủ đề duy, phân tích số liệu 63 Số câu trả lời theo Số câu trả lời tỉ lệ câu theo chủ đề Ngôn ngữ chủ đề Bảng 5.13 Mô tả giao diện thống kê kết thi 5.2.15 Giao diện gói dịch vụ Hình 5.24 Giao diện gói dịch vụ Mơ tả: STT Thành phần Mơ tả Gói Gói thành viên đề có sẵn Gói nâng cao Người dùng phải mua để có tính nâng cao Bảng 5.14 Mơ tả giao diện gói dịch vụ 64 5.2.16 Giao diện luyện tập theo chủ đề Hình 5.25 Giao diện luyện tập theo chủ đề Mô tả: Thành phần STT Mô tả Luyện tập Luyện tập theo chủ đề Ngôn ngữ Luyện tập Luyện tập theo chủ đề Tốn học, tư logic, phân tích số liệu 65 Luyện tập Luyện tập theo chủ đề Giải vấn đề Luyện tập chuẩn Luyện tập theo tất chủ đề Bảng 5.15 Mô tả giao diện luyện tập theo chủ đề 66 Chương CÀI ĐẶT VÀ KIỂM THỬ 6.1 Công cụ môi trường phát triển Công cụ Tên Environment NodeJS IDE VSCode Database MongoDB Source control Gitlab Modelling tools Draw.io, Enterprise Architect Bảng 6.1 Cơng cụ mơi trường phát triển • Back-end • - Sử dụng editor VSCode - Server NodeJs Front-end - Sử dụng editor VSCode 6.2 Công nghệ sử dụng • BackEnd : - RestFul API : Xây dựng endpoint - NodeJs: Xây dựng server • Frontend : - ReactJs • Thirdly Party - NodeMailer: Gửi mail - Paypal Sandbox: Thanh toán - GoogleAPI : Đăng nhập bằng email - FaceBookApi: Đăng nhập bằng tài khoản facebook 6.3 Quản lý Source code - Version control : Gitlab 67 - Source: https://gitlab.com/phancaocuong0000/project_final.git 6.4 Kiểm thử 6.4.1 Kiểm thử chức đăng ký Hình 6.1 Kiểm thử chức đăng ký 6.4.2 Kiểm thử tạo topic 68 Hình 6.2 Kiểm thử chức tạo topic 6.4.3 Kiểm thử tạo kiểm tra 69 Hình 6.3 Kiểm thử chức tạo kiểm tra 70 Chương TỔNG KẾT 7.1 Nội dung thực Sau nghiên cứu, tìm hiểu, nhóm đã thực cơng việc sau: • Database: - Tiếp cận sở liệu - Sử dụng query mà Mongodb hỗ trợ • Back-end - Xậy dựng mơ hình phổ biến MVC thông qua boilerplate - Tạo endpoint hỗ trợ cho Frontend - Các đồng hóa tiến trình, giảm thiểu xung đột • Front-end - Tìm hiểu tính năng, chế vận hành ReactJs - Thiết kế giao diện kết hợp ReactJs thư viện khác - Sử dụng số thư viện phổ biếng giải vấn đề cụ thể nhanh chóng - Hồn thành tính mà người dùng sư dụng • Kinh nghiệm nhận - Tự dựng chương trình hồn chỉnh sử dụng - Áp dụng kiến thức học vào đề tài - Ứng dụng số công nghệ 7.2 Ưu nhược điểm 7.2.1 Ưu điểm - Chương trình có giao diện dễ nhìn, trực quan, sinh động giúp người dùng thoải mái sử dụng - Đáp ứng chức website luyện thi: Củng cố kiến thức, cấp để có tính - Có phân cấp quyền đăng nhập theo dạng người dùng - Chương trình có Verify theo gmail cung cấp - Các liệu nhân riêng tư mã hóa trước lưu vào database 71 7.2.2 Nhược điểm - Chương trình cịn đơn giản Chưa deploy lên hệ thống thực tế Vẫn chưa có nhiều chức mở rộng 7.3 Hướng phát triển - Tìm hiểu thêm tính nâng cao Phát triển hệ thống FlashForm khác Tối ưu hóa hệ thống tốt hơn, tăng tính bảo mật TÀI LIỆU THAM KHẢO [1] Kiến thức React https://topdev.vn/blog/reactjs-nhung-dieu-ban-can-phai-biet/ 72 [2].Tìm hiểu Mongodb https://viblo.asia/p/tim-hieu-ve-mongodb-4P856ajGlY3 [3] Kỳ thi đánh giá lực https://thinangluc.vnuhcm.edu.vn/dgnl/ [4] Google API https://console.cloud.google.com/ 73 S K L 0