Đồ á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Đồ á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Đồ á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Đồ á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Đồ á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Đồ á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Đồ á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Đồ á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Đồ á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Đồ á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Đồ á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Đồ á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Đồ á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Đồ á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Đồ á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Đồ á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Đồ á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Đồ á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Đồ á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Đồ á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Đồ á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
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 HỒ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 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 ĐẠ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 Hoà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 • 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 CÔNG VIỆC PHỤ TRÁCH GHI CHÚ 03/2020 Khảo sát trạng phân Liên + Nam 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 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 21 11/07/2020 Viết báo cáo Liên – 15/07/2020 22 16/07/2020 Quay video demo Nam – 19/07/2020 TP.HCM, ngày 19 tháng 07 năm 2020 Ý kiến giáo viên hướng dẫn Người viết đề cương Trần Thị Liên TS Nguyễn Thành Sơn 10 Mục lục Phần 1: MỞ ĐẦU 15 Tính cấp thiết đề tài 15 Mục đích đề tài 15 Cách tiếp cận phương pháp nghiên cứu 15 Kết dự kiến đạt 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 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 chức 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 THIẾT KẾ DỮ LIỆU 32 3.2 3.2.1 Mơ hình ERD 32 3.2.2 Mơ hình sở 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 hình đăng nhập 43 4.1.2 Giao diệ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 hình 50 4.2.2 Giao diện nội dung học 53 11 4.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 Những kết đạt 62 Hạn chế 62 Hướng phát triển 62 TÀI LIỆU THAM KHẢO 64 HƯỚNG DẪN SỬ DỤNG 65 12 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 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 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 thực đăng nhập Để trống trường Nhấp Đăng nhập 59 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 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 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 • 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.coders-x.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 ... Liên cuối 01/ 07 /20 20 20 01/ 07 /20 20 Kiểm thử Liên – 10/07 /20 20 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... nay, em cấp 01 có nhu cầu học tập thêm nhiều, em tiếp cận công nghệ từ sớm Chính 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 công nghệ Mern Stack? ??, nhằm để học. .. phần • Xây dựng thành cơng website học tập toán tiếng anh cho học sinh cấp 01 16 Phần 2: NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 MERNSTACK 1.1.1 MernStack gì? Mern Stack combo open source công nghệ