(Đồ án tốt nghiệp) 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

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ỌC 2TOÁN & TIẾNG ANH CHO HỌC SINH CẤP 01 BẰNG CÔNG NGHỆ MERN STACK GVHD: TS NGUYỄN THÀNH SƠN SVTH: TRẦN THỊ LIÊN SVTH: NGUYỄN HOÀI NAM SKL007101 Tp Hồ Chí Minh, tháng 07/2020 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 2TOÁ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 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ự – 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 : TRẦN THỊ LIÊN MSSV 1: 16110376 Họ tên Sinh viên : 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ọ tên Giáo viên hướng dẫ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 : …………………………………………………………………………………… Tp Hồ Chí Minh, ngày tháng năm 2020 Giáo 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 CNTT Độ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 : TRẦN THỊ LIÊN Họ tên Sinh viên : NGUYỄN HOÀI NAM MSSV 1: 16110376 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ọ tên Giáo viên phản biệ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 : …………………………………………………………………………………… Tp Hồ Chí Minh, ngày tháng năm 2020 Giáo viên phản biện (Ký & ghi rõ họ tên) LỜI CẢM ƠN Quá trình thực khóa luận tốt nghiệp giai đoạn quan trọng quãng đời sinh viên Khóa luận tốt nghiệp tiền đề nhằm trang bị cho chúng em kỹ nghiên cứu, kiến thức quý báu trước bước vào công việc thực tế Trước hết, nhóm chúng em bao gồm Trần Thị Liên 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 dạy trang bị cho chúng em kiến thức cần thiết suốt thời gian ngồi ghế giảng đường, làm tảng cho chúng em hồn thành khóa luận 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ư cách làm việc khoa học, hiệu Đó góp ý q báu khơng q trình thực khóa luận mà cịn hành trang tiếp bước cho chúng em trình học tập lập nghiệp sau 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, người sẵn sàng sẻ chia giúp đỡ học tập sống Mong rằng, mãi gắn bó với Xin chúc điều tốt đẹp đồng hành người TPHCM TIN ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP Họ tên sinh viên 1: Trần Thị Liên Họ tên sinh viên 2: Nguyễn Hồi Nam 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ận dụng cơng nghệ MernStack, bao gồm tìm hiểu vận dụng: + MongoDB + ExpressJS + ReactJS + NodeJS - Xây dựng chức website học tập: xem nội dung học, làm kiểm tra, trao đổi, đăng nhập, đăng xuất, … Đề cương chi tiết: Phần mở đầu 1.1 Tính cấp thiết đề tài 1.2 Mục đích đề tài 1.3 Cách tiếp cận phương pháp nghiên cứu • Đối tượng nghiên cứu • Phạm vi nghiên cứu 1.4 Kết dự kiến đạt Phần nội dung 2.1 Chương 1: Cơ sở lí thuyết 2.1.1 Tìm hiểu MernStack • Tìm hiểu MongoDB • Tìm hiểu ExpressJS • Tìm hiểu ReactJS • Tìm hiểu NodeJS 2.2 Chương 2: Khảo sát trạng xác định yêu cầu 2.2.1 Khảo sát trạng • Khảo sát ứng dụng liên quan • Nhận xét ưu nhược điểm • Nêu kết luận 2.2.2 Xác định yêu cầu • Nhận diện tác nhân chức • Xác định lược đồ Usecase • Mơ tả usecase 2.3 Chương 3: Thiết kế phần mềm 2.3.1 Thiết kế hệ thống 2.3.2 Thiết kế liệu 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 kiểm thử 2.5.1 Cài đặt • Môi trường thử nghiệm cài đặt 2.5.2 Kiểm thử Phần kết luận 3.1 Những kết đạt 3.2 Ưu điểm 3.3 Hạn chế 3.4 Hướng phát triển Tài liệu tham khảo KẾ HOẠCH THỰC HIỆN STT THỜI GIAN 03/2020 03/2020 15/04/2020 – 20/04/2020 15/04/2020 – 20/04/2020 20/04/2020 – 25/04/2020 25/04/2020 – 05/2020 05/2020 – 06/2020 05/2020 – 06/2020 10 11 12 13 14 15 16 17 18 19 05/2020 – 06/2020 05/2020 – 06/2020 05/2020 – 06/2020 05/2020 – 06/2020 05/2020 – 06/2020 05/2020 – 06/2020 05/2020 – 06/2020 05/2020 – 06/2020 05/2020 – 06/2020 06/2020 27/06/2020 – 01/07/2020 20 01/07/2020 – CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 5.1 CÀI ĐẶT 5.1.1 Hướng dẫn tạo project Tải ứng dụng cần thiết để lập trình mern stack : visual studio code, nodejs, mongodb, robomongo Các editor sử dụng : visual studio code + robomongo 5.1.1.1 Server(nodejs+expressjs+mongodb) Bước 1: Các bạn mở visual studio code -> mở terminal -> gõ npm install express Bước 2: Gõ vào terminal express nameproject Bước 3: Các bạn gõ vào cd nameproject npm install 57 Bước 4: Để chạy project bạn gõ npm start Bước 5: Các bạn mở trình duyệt gõ localhost:3000 hiển hình có nghĩa bạn tạo thành công Bước 6: Nếu bạn cần thư viện gõ npm install teeeeenpacket VD: 5.1.2 Tạo project react js Bước 1: Các bạn mở visual studio code tạo thư mục sau mở terminal lên gõ npx create-react-app my-app Bước 2: Các bạn mở mở terminal gõ cd my-app sau gõ npm start Nếu trình duyệt hiển thị hình bạn thành cơng 58 5.2 KIỂM THỬ Bảng 26 Kiểm thử Test case ID Login_01 59 Login_02 Login_03 Register_01 60 AddQUES_01 Kiểm tra thêm câu hỏi DeleteQUES_ 01 UpdateQUES _01 61 PHẨN KẾT LUẬN Những kết đạt • Hiểu rõ kiến thức khái niệm, cơng dụng MernStack • Xây dựng thành công Website học tập với việc áp dụng kiến thức tìm hiểu Website bao gồm 02 loại, cho người dùng (học sinh) cho người quản lý • với chức năng: • • • Giao diện cho người dùng: ▪ Đăng ký, đăng nhập vào trang web Gmail, Facebook ▪ Hiển thị ▪ Cho phép học sinh học tập, làm kiểm tra theo nội dung lớp học Ứng dụng cho người quản lý: ▪ Đăng nhập vào trang web tài khoản đăng ký ▪ Hiển thị ▪ Cho phép thêm, xóa, sửa thơng tin Hiểu cấu trúc, cách thức hoạt động, cách thức phát triển trang web tích hợp công nghệ Hạn chế Bên cạnh chức xây dựng được, Website nhiều hạn chế mà nhóm phát triển xây dựng tương lai để trở nên hoàn thiện hơn, hạn chế cụ thể là: • Giao diện chưa hấp dẫn • Các chức chưa tối ưu thiếu logic Hướng phát triển Do hạn chế thời gian nên có số chức chưa thể đưa vào ứng dụng, sau ứng dụng phát triển thêm theo hướng: 62 • Cải thiện giao diện • Tối ưu hóa chức • Hồn thiện chức chưa đưa vào ứng dụng 63 TÀI LIỆU THAM KHẢO [1] Stackoverflow Link: https://stackoverflow.com/questions/2353818/how-do-i-get-started-with-nodejs [2] React Link: https://reactjs.org/blog/2020/02/26/react-v16.13.0.html [3] Youtube Link: https://www.youtube.com/watch?v=rIMlKHusAhQ [4] CodersX Link: https://school.codersx.com/courses/5b8a1d261a383514ba715fc8 [5] TiengAnh123 Link: https://www.tienganh123.com/ [6] LuyenThi123 Link: https://www.luyenthi123.com/ 64 HƯỚNG DẪN SỬ DỤNG ADMIN Bước 1: Đăng nhập trang Admin với user name: liencutehotme, password: 123456 Hình 24 Đăng nhập trang Admin 65 Bước 2: Thực chức thêm – xóa – sửa Hình 25 Thực chức thêm - xóa - sửa 66 NGƯỜI DÙNG - - Sử dụng chức xem nội dung học, xem tin tức mà không cần đăng nhập Đăng nhập username: nguyeenxhoaifnam@gmail.com, password: 123456 để sử dụng chức kiểm tra, trao đổi qua diễn đàn 67 68 69 ... 05 /20 20 – 06 /20 20 05 /20 20 – 06 /20 20 05 /20 20 – 06 /20 20 05 /20 20 – 06 /20 20 05 /20 20 – 06 /20 20 05 /20 20 – 06 /20 20 05 /20 20 – 06 /20 20 05 /20 20 – 06 /20 20 06 /20 20 27 /06 /20 20 – 01/ 07 /20 20 20 01/ 07 /20 20 –... 03 /20 20 03 /20 20 15/04 /20 20 – 20 /04 /20 20 15/04 /20 20 – 20 /04 /20 20 20 /04 /20 20 – 25 /04 /20 20 25 /04 /20 20 – 05 /20 20 05 /20 20 – 06 /20 20 05 /20 20 – 06 /20 20 10 11 12 13 14 15 16 17 18 19 05 /20 20 – 06 /20 20... để xây dựng website học tập toán tiếng anh cho học sinh cấp 01 Kết dự kiến đạt • Hiểu rõ kiến thức MernStack: định nghĩa thành phần • Xây dựng thành cơng website học tập tốn tiếng anh cho học sinh