(Đồ án hcmute) 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 SKL 0 1 Tp Hồ Chí Minh, tháng 07/2020 an 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 an 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 an ĐH SƯ PHẠM KỸ THUẬT TP.HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc KHOA CNTT ******* ******* 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) an Đ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 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 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) an LỜI CẢM ƠN Q 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 an ĐẠI HỌC SƯ PHẠM KỸ THUẬT CỘNG HÒA XÃ HỘI CHỦ NGHĨA TPHCM VIỆT NAM KHOA CÔNG NGHỆ THÔNG Độc lập – Tự – Hạnh phúc TIN ********* ********* ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP Họ tên sinh viên 1: Trần Thị Liên MSSV: 16110376 Họ tên sinh viên 2: Nguyễn Hồ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ậ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 an • 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 an • 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 CÔNG VIỆC PHỤ TRÁCH GHI CHÚ 03/2020 Khảo sát trạng Liên + Nam phân tích yêu cầu 03/2020 15/04/2020 – Vẽ đặc tả usecase 20/04/2020 Nam 15/04/2020 – Vẽ sequence diagram 20/04/2020 Nam 20/04/2020 – Thiết kế sở liệu 25/04/2020 Nam 25/04/2020 – 05/2020 Tìm hiểu MernStack Thiết kế giao diện 05/2020 – Xử lý đăng nhập Admin 06/2020 Liên + Nam Liên + Nam Nam User 05/2020 – 06/2020 Xử lý đăng ký User Nam an 05/2020 – Xử lý nhớ đăng nhập 06/2020 Admin Nam User 10 05/2020 – Xử lý đăng xuất User Nam 06/2020 Admin 05/2020 – 11 12 13 14 15 16 17 Xử lý trang chủ User Liên 06/2020 05/2020 – Xử lý quản lý học sinh Nam 06/2020 05/2020 – Xử lý quản lý câu hỏi Nam 06/2020 05/2020 – Xử lý quản lý đề thi Nam 06/2020 05/2020 – Xử lý quản lý tin tức Liên 06/2020 05/2020 – Xử lý quản lý nội dung 06/2020 học 05/2020 – Xử lý quản lý kết thi Nam Nam 06/2020 06/2020 18 Xử lý gọi APIs cho chức xem tin tức, xem Liên nội dung học, xem học tiêu biểu, học bật 19 27/06/2020 Chỉnh sửa giao diện lần – Liên cuối 01/07/2020 20 01/07/2020 Kiểm thử Liên – 10/07/2020 an 4.2.3.2 Danh sách xử lý Bảng 25 Danh sách xử lý chức kiểm tra STT Tên xử lý Điều kiện gọi Ghi thực Link kiểm tra Nhấn vào kiểm tra Kiểm tra Nhấn vào đáp án Hoàn thành thời gian quy định 56 an 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 an 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 an 5.2 KIỂM THỬ Bảng 26 Kiểm thử Test case Test case Expected Test steps ID Login_01 description Status Result Kiểm tra đăng Mở website Nút Đăng nhập nhập nhập vô hiệu hóa, rỗng Chọn chức đăng nhập Pass khơng thể thực đăng nhập Để trống trường Nhấp Đăng nhập 59 an Login_02 Kiểm tra đăng Mở website Trả thông nhập sai thông báo “ Tai khoan tin Chọn chức đăng nhập Nhập thông tin sai Nhấp Đăng nhập Pass hoac mat khau khong chinh xac” Nút Đăng nhập vô hiệu hóa, khơng thể thực đăng nhập Login_03 Kiểm tra đăng nhập thành công Mở website Chọn chức đăng nhập Đăng nhập Pass thành công, hiển thị mà hình trang chủ Nhập username mật Nhấp Đăng nhập Register_01 Kiểm tra đăng ký thành công Mở website Chọn chức đăng ký Nhập username Đăng ký thành Pass công, hiển thị mà hình trang chủ mật Nhấp Đăng ký 60 an AddQUES_01 Kiểm tra thêm câu hỏi Đăng website Hiển thị người quản lý hình câu hỏi Nhấp chọn Pass vừa thêm Thêm câu hỏi Nhập thông tin Nhấn chọn Thêm DeleteQUES_ Kiểm tra xóa 01 câu hỏi Đăng website Hiển thị người quản lý hình câu hỏi Nhấp biểu tượng xóa câu hỏi Pass khơng cịn câu hỏi vừa xóa muốn xóa Nhấp chọn OK UpdateQUES Kiểm tra sửa _01 câu hỏi Đăng website người quản lý Hiển thị thông Pass tin vừa sửa Nhấp biểu tượng sửa câu hỏi muốn sửa Nhập thông tin cần sửa Nhấn sửa 61 an 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 cịn 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 an • 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 an 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.coders-x.com/courses/5b8a1d261a383514ba715fc8 [5] TiengAnh123 Link: https://www.tienganh123.com/ [6] LuyenThi123 Link: https://www.luyenthi123.com/ 64 an 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 an 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 an 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 an 68 an 69 an an ... để 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. .. Liên cuối 01/ 07 /20 20 20 01/ 07 /20 20 Kiểm thử Liên – 10/07 /20 20 an 21 11/07 /20 20 Viết báo cáo Liên – 15/07 /20 20 22 16/07 /20 20 Quay video demo Nam – 19/07 /20 20 TP.HCM, ngày 19 tháng 07 năm 20 20 Ý kiến... 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 20 16 - 20 20 an ĐH SƯ