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

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 DANH MỤC BẢNG BIỂU Bảng 1Nhận diện tác nhân chức sơ đồ usecase 24 Bảng Usecase đăng nhập 25 Bảng Usecase đăng ký 26 Bảng Usecase đăng xuất 27 Bảng Usecase thêm câu hỏi 27 Bảng Usecase sửa câu hỏi 27 Bảng Usecase xóa câu hỏi 28 Bảng ExamContentSchema 34 Bảng ExamSchema 35 Bảng 10 LessionContentSchema 35 Bảng 11 MemberSchema 36 Bảng 12 NewsSchema 37 Bảng 13 QuestionsSchema 38 Bảng 14 ResultSchema 39 Bảng 15 GameSchema 41 Bảng 16 ForumSchema 42 Bảng 17 Danh sách xử lý đăng nhập 43 Bảng 18 Danh sách xử lý giao diện trang chủ Admin 44 Bảng 19 Danh sách xử lý chức quản lý câu hỏi 46 Bảng 20 Danh sách xử lý Thêm câu hỏi 47 Bảng 21 Danh sách xử lý Sửa câu hỏi 48 Bảng 22 Danh sách xử lý Xóa câu hỏi 49 Bảng 23 Danh sách xử lý giao diện người dùng 51 Bảng 24 Danh sách xử lý nội dung học 54 Bảng 25 Danh sách xử lý chức kiểm tra 56 Bảng 26 Kiểm thử 59 13 DANH MỤC HÌNH ẢNH Hình Giao diện website tienganh123 21 Hình Giao diện website Luyenthi123 23 Hình Lược đồ Usecase 25 Hình Sơ đồ sequence diagram đăng nhập 29 Hình Sơ đồ sequence diagram đăng ký 29 Hình Sơ đồ sequence diagram đăng xuất 30 Hình Sơ đồ sequence diagram thêm câu hỏi 30 Hình Sơ đồ sequence diagram sửa câu hỏi 31 Hình Sơ đồ sequence diagram xóa câu hỏi 31 Hình 10 Mơ hình ERD 32 Hình 11 Giao diện đăng nhập Admin 43 Hình 12 Giao diện trang chủ Admin 44 Hình 13 Giao diện quản lý câu hỏi 45 Hình 14 Giao diện thêm câu hỏi 46 Hình 15 Giao diện sửa câu hỏi 48 Hình 16 Giao diện xóa câu hỏi 49 Hình 17 Giao diện người dùng 50 Hình 18 Giao diện người dùng (tt) 50 Hình 19 Giao diện người dùng (tt) 51 Hình 20 Giao diện nội dung học 53 Hình 21 Giao diện nội dung học (tt) 53 Hình 22 Giao diện kiểm tra 54 Hình 23 Giao diện kiểm tra (tt) 55 Hình 24 Đăng nhập trang Admin 65 Hình 25 Thực chức thêm - xóa - sửa 66 14 Phần 1: MỞ ĐẦU Tính cấp thiết đề tài Trong sống tất bật nay, việc đơn giản tối ưu hóa thời gian thông qua việc ứng dụng công nghệ thông tin vào xử lý công việc hàng ngày Theo thời gian, ngày có nhiều cơng nghệ thuộc lĩnh vực công nghệ thông tin đời, việc cập nhật, tiếp thu công nghệ để tối ưu công việc cấp thiết không muốn bị tuột hậu so với lượng kiến thức khổng lồ ngành Bên cạnh cơng nghệ phát triển nhu cầu học tập online học sinh, sinh viên ngày gia tăng Các Website học tập mọc lên nấm, thực tế rằng, Website học tập tạo nên đa số hướng đối tượng người lớn, học sinh cấp 02, cấp 03, sinh viên,… Nhưng thực tế 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 tốn & tiếng anh cho học sinh cấp 01 công nghệ Mern Stack”, nhằm để học hỏi công nghệ ưa chuộng MernStack để nâng cao kiến thức chuyên ngành ứng dụng chúng vào thực tiễn trường, đồng thời cung cấp cho em học sinh cấp 01 nơi để học tập, rèn luyện thêm kiến thức Mục đích đề tài Đề tài đời với mục đích giúp sinh viên tổng hợp lại kiến thức tiếp thu q trình học, đồng thời có nhìn tổng quan lập trình Là hội để sinh viên tìm hiểu cơng nghệ ứng dụng chúng vào thưc tiễn Xây dựng website giáo dục dành cho trẻ em, tạo sân chơi cho trẻ em phát triển, học hỏi Cách tiếp cận phương pháp nghiên cứu • Đối tượng nghiên cứu: - Tìm hiểu MernStack: định nghĩa MernStack thành phần 15 • Phạm vi nghiên cứu: Với luận văn này, nhóm em tập trung tìm hiểu thực nội dung sau: - Tìm hiểu nội dung, kiến thức MernStack - Sau tìm hiểu, nhóm tập trung vận dụng kiến thức tìm hiểu để 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 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ệ liên quan đến JavaScript: MongoDB, ExpressJS, React/React Native, NodeJS Mern: viết tắt 04 công cụ: M – MongoDB, E – ExpressJS, R – ReactJS, N – NodeJS Stack: chương trình hồn thiện khơng có code, mà cịn phải có tảng hệ điều hành phần mềm kèm (web server, sở liệu) Người ta gom thứ lại với tạo thành technical stack ❖ MongoDB: ▪ MongoDB sở liệu mã nguồn mở sở liệu NoSQL hàng đầu, hàng triệu người sử dụng MongoDB viết C++ ▪ Ngoài ra, MongoDB sở liệu đa tảng, hoạt động khái niệm Collection Document, cung cấp hiệu suất cao, tính khả dụng cao khả mở rộng dễ dàng ▪ Một số thuật ngữ thường gặp MongoDB: o Database: Ô chứa liệu mức vật lý (physical), database có nhiều collection thiết lập lưu trữ nơi máy chủ máy tính Một máy chủ MongoDB thường tạo nhiều sở liệu o Collection: nhóm tài liệu (document), tương đương với bảng (table) CSDL thông thường nên collection thuộc database 17 Tuy nhiên có sực khác biệt khơng có ràng buộc Relationship hệ quản trị CSDL khác nên việc truy xuất nhanh, collection chứa nhiều thể loại khác không giống table hệ quản trị mysql field cố định o Document: có cấu trúc tương tự kiểu liệu JSON, nghĩa có cặp (key => giá trị) nên có tính động lớn Document ta hiểu giống record liệu MYSQL, nhiên có khác biệt cặp (key => value) khơng giống document ❖ ExpressJS: ▪ Express.js framework phổ biến Node.js, framework đơn giản đủ mạnh để giúp tiếp cận phát triển website dựa framwork ▪ Xây dựng tảng Nodejs Nó cung cấp tính mạnh mẽ để phát triển web mobile ▪ Router Object (khác với Routing), instance riêng middleware routes Chính instance middleware route nên có chức hai Chúng ta gọi miniapplication ▪ Các Application dùng ExpressJS làm core có phần Router tích hợp sẵn ▪ Router hoạt động middleware nên dùng arguments Hoặc dùng arguments cho route khác 18 ❖ ReactJS: ▪ Hiện Web Dev lên mơ hình web singlepage Web single-page tất thao tác xử lý trang web diễn trang Việc giúp nâng cao trải nghiệm người dùng, thao tác xử lý người dùng animation, thực cách nhanh chóng mượt mà So với web single-page web cũ xử lý liệu lâu phải phụ thuộc nhiều vào khả xử lý server nên thường xuyên load trang hay trang nhiều logic khiến số chức không ý muốn dễ sinh Bug làm giảm trải nghiệm người dùng Từ web single-page đời ngơn ngữ phát triển single-page ngày phát triển Trong số ReactJS thư viện mạnh phát triển single-page ▪ React.JS thư viện Javascript dùng để xây dựng giao diện người dùng FaceBook tạo ▪ Cho phép nhà phát triển web tạo giao diện người dung nhanh chóng Phần Views Reactjs thường hiển thị việc chủ yếu dung component mà chứa component cụ thể thẻ HTML ❖ NodeJS: ▪ NodeJS hệ thống phần mềm thiết kế để viết ứng dụng internet có khả mở rộng, đặc biệt máy chủ web Chương trình viết JavaScript, sử dụng kỹ thuật điều khiển theo kiện, nhập/ xuất khơng đồng để tối thiểu tổng chi phí tối đa khả mở rộng NodeJS bao gồm có V8 JavaScript Engine Google, libUV vài thư viện khác NodeJS 19 ▪ NodeJS chạy nhiều tảng hệ điều hành khác từ Window Linux, OSX nên lợi NodeJS cung cấp thư viện phong phú dạng JavaScript Module khác giúp đơn giản hóa việc lập trình giảm thời gian mức thấp NodeJS xây dựng chạy V8 Engine V8 Engine dựa C++ Vì vậy, cuối trái tim NodeJS C++ ▪ Ý tưởng NodeJS sử dụng non – blocking, hướng vào liệu thông qua tác vụ thời gian thực cách nhanh chóng Bởi NodeJS có khả mở rộng nhanh chóng, khả xử lý số lượng lớn kết nối đồng thời thông lượng cao Nếu ứng dụng web truyền thống, request tajora luồng xử lý yêu cầu chiếm RAM hệ thống việc tài nguyên hệ thống sử dụng không hiệu Chính lẽ giải pháp mà NodeJS đưa sử dụng luồng đơn (Single – Threaded), kết hợp với non – blocking I/O để thực thi request, cho phép hỗ trợ hang chục ngàn kết nối đồng thời 20 4.2.2 Giao diện nội dung học 4.2.2.1 Thiết kế giao diện Hình 20 Giao diện nội dung học Hình 21 Giao diện nội dung học (tt) 53 4.2.2.2 Danh sách xử lý Bảng 24 Danh sách xử lý nội dung học STT Tên xử lý Điều kiện gọi Ghi thực Link nội dung Nhấn vào link học muốn xem Nội dung học 4.2.3 Chỉ xem Giao diện kiểm tra 4.2.3.1 Thiết kế giao diện Hình 22 Giao diện kiểm tra 54 Hình 23 Giao diện kiểm tra (tt) 55 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 ... để xây dựng website học tập tố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. .. 02, cấp 03, sinh viên,… Nhưng thực tế 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. .. cấp 01 công nghệ Mern Stack? ??, nhằm để học hỏi công nghệ ưa chuộng MernStack để nâng cao kiến thức chuyên ngành ứng dụng chúng vào thực tiễn trường, đồng thời cung cấp cho em học sinh cấp 01 nơi