(Đồ án tốt nghiệp) xây dựng web học tiếng anh online

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 TRANG WEB HỌC TIẾNG ANH ONLINE GVHD: NGUYỄN TRẦN THI VĂN SVTH: NGUYỄN TRỌNG ĐẠT MSSV: 16110049 SVTH: NGUYỄN DUY LÂM MSSV: 16110134 SKL007084 Tp Hồ Chí Minh, tháng 07/2020 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG TRANG WEB HỌC TIẾNG ANH ONLINE SVTH : NGUYỄN TRỌNG ĐẠT MSSV : 16110049 SVTH : NGUYỄN DUY LÂM MSSV : 16110134 KHOÁ : 2016 - 2020 NGÀNH : CÔNG NGHỆ THÔNG TIN GVHD : ThS.NGUYỄN TRẦN THI VĂN Tp Hồ Chí Minh, tháng năm 2020 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG TRANG WEB HỌC TIẾNG ANH ONLINE SVTH : NGUYỄN TRỌNG ĐẠT MSSV : 16110049 SVTH : NGUYỄN DUY LÂM MSSV : 16110134 KHOÁ : 2016 - 2020 NGÀNH : CÔNG NGHỆ THÔNG TIN GVHD : ThS.NGUYỄN TRẦN THI VĂN Tp Hồ Chí Minh, tháng năm 2020 CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** Tp Hồ Chí Minh, ngày tháng năm 2020 NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP Họ tên Sinh viên: Nguyễn Trọng Đạt ………………… MSSV: 16110049 Họ tên Sinh viên: Nguyễn Duy Lâm ………………… MSSV: 16110134 Tên đề tài: Xây dựng trang web học tiếng Anh online Giáo viên hướng dẫn: ThS Nguyễn Trần Thi Văn SDT:0983 11 80 25 Nội dung thực hiện: Lý thuyết: - Tổng quan Angular Tổng quan NetCore Thực hành: - Chức Web:  Admin: Xây dựng quản lý đề thi, câu hỏi, sản phẩm, thành tích người dùng, hố đơn sản phẩm  Client: Thực luyện tập ngữ pháp, thi đấu, mua hàng, tích luỹ tích Thời gian thực hiện: 15 tuần (24/2/2020 -> 1/7/2020) Chữ ký SV: …………………………………………………………… Chữ ký SV: …………………………………………………………… i CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** Tp Hồ Chí Minh, ngày tháng năm 2020 PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên: Nguyễn Trọng Đạt MSSV: 16110049 Họ tên Sinh viên: Nguyễn Duy Lâm MSSV: 16110134 Tên đề tài: Xây dựng trang web học tiếng Anh online Họ tên Giáo viên hướng dẫn: ThS Nguyễn Trần Thi Văn NHẬN XÉT 1.Về nội dung đề tài & khối lượng thực hiện: 2.Ưu điểm: 3.Khuyết điểm: 4.Đề nghị cho bảo vệ hay không? 5.Đánh giá loại: 6.Điểm: TP.HCM, ngày tháng năm 2020 Giáo viên hướng dẫn ii CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** Tp Hồ Chí Minh, ngày tháng năm 2020 PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên: Nguyễn Trọng Đạt MSSV: 16110049 Họ tên Sinh viên: Nguyễn Duy Lâm MSSV: 16110134 Tên đề tài: Xây dựng trang web học tiếng Anh online Họ tên Giáo viên phản biện: NHẬN XÉT 1.Về nội dung đề tài & khối lượng thực hiện: 2.Ưu điểm: 3.Khuyết điểm: 4.Đề nghị cho bảo vệ hay không? 5.Đánh giá loại: 6.Điểm: TP.HCM, ngày tháng năm 2020 Giáo viên phản biện iii LỜI CẢM ƠN Chúng em xin chân thành cảm ơn khoa Đào tạo Chất lượng cao, Ngành Công nghệ thông tin, chuyên ngành Công nghệ phầm mềm, trường Đại học Sư Phạm Kỹ Thuật Tp.HCM tạo điều kiện thuận lợi cho nhóm em thực đề tài Chúng em xin gửi lời cảm ơn chân thành đến thầy Nguyễn Trần Thi Văn, người tận tình bảo, định hướng hướng dẫn nhóm em thực đề tài Bên cạnh đó, nhóm em xin gửi lời cảm ơn đến thầy cô, người giảng dạy, tạo điều kiện cho em tích lũy kiến thức quý báu năm học qua Dù cố gắng hoàn thành đề tài khóa luận yêu cầu, thời gian hạn hẹp khả hạn chế nên chắn có thiếu sót khơng tránh khỏi Nhóm em mong nhận sự thơng cảm tận tình bảo thầy TP Hồ Chí Minh, tháng năm 2020 Nhóm sinh viên thực Nguyễn Trọng Đạt Nguyễn Duy Lâm iv TÓM TẮT ĐỒ ÁN TỐT NGHIỆP TIẾNG VIỆT Lý xây dựng đề tài: Ngày nay, với sự phát triển mạnh mẽ kỷ nguyên công nghệ đem đến nhiều lợi ích đặc biệt cho việc học hỏi tiếp thu kiến thức Trong đó, hình thức học tiếng Anh nhà phương pháp nhiều người lựa chọn Phương pháp đặc biệt thích hợp dành cho người bận rộn, khơng có nhiều thời gian cho việc học tiếng Anh - Tiết kiệm nhiều thời gian cho người từ người có thời gian bận rộn khơng có thời gian học tập - Tận dụng thời gian để học tập ví dụ như: Trên xe bus … - Tiết kiệm chi phí: Học online tiết kiệm nhiều so với học trung tâm Mục tiêu đề tài: - Tìm hiểu ASP NETCORE Angular CLi - Vận dụng kiến thức tìm hiểu để vận dụng để xây dựng website học tiếng Anh Tiếp cận nghiên cứu: - Đối tượng nghiên cứu  Back-End: Net Core  Front-End: Angular CLI, Ant-Design(Ng-Zoro), Typescript - Phạm vi nghiên cứu: Với khoá luận tốt nghiệp này, nhóm em tập trung tìm hiểu thực nội dung sau:  Giới thiệu sơ lược trình bày nội dung bản, điểm mạnh, điểm yếu hay lợi ích mang lại cho nhà phát triển phần mềm NET Core  Tìm hiểu nội dung, kiến thức Angular CLI, AntDesign(Ng-Zoro), Typescript  - Kết đạt được: Hiểu rõ kiến thức NET Core - Hiểu rõ kiến thức Angular CLI, Ant-Design(Ng-Zoro), Typescript - Xây dựng thành công website học tiếng Anh với tính năng:  Admin: CRUD câu hỏi, đề thi, vật phẩm, người dùng Quản lý thành tích Duyệt hố đơn  Client: Thực thi Mua vật phẩm cửa hàng Tích luỹ thành tích v TÓM TẮT ĐỒ ÁN TỐT NGHIỆP TIẾNH ANH Reason for constructing topic: - Today, the strong development of the technological age has brought many special benefits for learning and acquiring new knowledge In particular, the form of learning English at home is also the method that many people choose This method is especially suitable for busy people who not have much time for learning English - This learning method saves a lot of time for everyone from those who have busy time and not have time to study - Take advantage of all the time to study eg: On the bus - Cost savings: Learning online will save more than studying at the center Thesis objectives: - Build an English learning environment for everyone - Apply the knowledge learned to apply to build a website to learn English - Approach and research: Research subjects  Back-End: Net Core  Front-End: Angular CLI, Ant-Design(Ng-Zoro), Typescript - Research scope: With this graduation thesis, my team will focus on understanding and implementing the following:  Outline and present the basic content, strengths, weaknesses, or benefits for software developers of NET Core -  Learn content and knowledge about Angular CLI, Ant-Design (Ng-Zoro), Typescript Achievements: Understand the knowledge about NET Core - Understand the knowledge about Angular CLI, Ant-Design(Ng-Zoro), Typescript - Building a successful English learning website with the following features:  Admin: CRUD questions, exam, items, and users Achievement Management Browse the bill  Client: Take exams Buy items in the store Accumulated achievements 4.CHƯƠNG 4: THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 4.15 MÀN HÌNH LUYỆN TẬP Hình 4.15: Màn hình luyện tập Bảng 4.29: Bảng thông tin đối tượng hình làm thi STT Tên đối tượng giao diện Thao tác bắt đầu Người dùng xếp hạng Tên luyện tập Bảng xếp hạng - Thiết kế xử lý Bảng 4.30: Bảng thiết kế xử lý hình làm thi STT Tên xử lý Bắt đầu Xếp hạng 81 4.CHƯƠNG 4: THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 4.16 MÀN HÌNH XEM LẠI BÀI THI Hình 4.16: Màn hình xem lại thi Bảng 4.31: Bảng thông tin đối tượng hình xem lại thi STT Tên đối tượng giao diện Thao tác thoát Đề thi Radio check đáp án Đồng hồ countdown Thao tác chọn câu hỏi Thao tác nộp - Thiết kế xử lý Bảng 4.32: Bảng thiết kế xử lý hình xem lại thi STT Tên xử lý Thoát Chọn đáp án Xem lại đáp án Nộp 82 4.CHƯƠNG 4: THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 4.17 MÀN HÌNH NGỮ PHÁP Hình 4.17: Màn hình ngữ pháp Bảng 4.33: Bảng thơng tin đối tượng hình ngữ pháp STT Tên đối tượng giao diện Hình tượng trưng ngữ pháp Tên ngữ pháp Bắt đầu - Thiết kế xử lý Bảng 4.34: Bảng thiết kế xử lý hình ngữ pháp STT Tên xử lý Ghi Bắt đầu 4.18 MÀN HÌNH NGỮ PHÁP LÝ THUYẾT Hình 4.18: Màn hình ngữ pháp lý thuyết 83 4.CHƯƠNG 4: THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ Bảng 4.35: Bảng thông tin đối tượng hình ngữ pháp lý thuyết STT Tên đối tượng giao diện Thao tác thoát Thao tác Step lý thuyết Step Luyện tập Step Kiểm tra Tên ngữ pháp Công thức Dạng câu Công thức - Thiết kế xử lý Bảng 4.36: Bảng thiết kế xử lý hình ngữ pháp lý thuyết STT Tên xử lý Thoát Tiếp theo Step lý thuyết Step luyện tập Step Kiểm tra 4.19 MÀN HÌNH NGỮ PHÁP LUYỆN TẬP Hình 4.19: Màn hình ngữ pháp luyện tập Bảng 4.37: Bảng thông tin đối tượng hình ngữ pháp luyện tập Ghi Tên đối tượng giao diện STT Thao tác quay lại 84 4.CHƯƠNG 4: THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ Thao tác Step lý thuyết Step Luyện tập Step Kiểm tra Ảnh tượng trưng Số câu Thao tác bắt đầu - Thiết kế xử lý Bảng 4.38: Bảng thiết kế xử lý hình ngữ pháp luyện tập STT Tên xử lý Quay lại Tiếp theo Step lý thuyết Step luyện tập Step Kiểm tra Bắt đầu 4.20 MÀN HÌNH NGỮ PHÁP KIỂM TRA Hình 4.20: Màn hình ngữ pháp kiểm tra Bảng 4.39: Bảng thơng tin đối tượng hình ngữ pháp kiểm tra Ghi Tên đối tượng giao diện STT Thao tác quay lại 85 4.CHƯƠNG 4: THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ Thao tác Step lý thuyết Step Luyện tập Step Kiểm tra Ảnh tượng trưng Số câu Thao tác bắt đầu - Thiết kế xử lý Bảng 4.40: Bảng thiết kế xử lý hình ngữ pháp kiểm tra STT Tên xử lý Quay lại Tiếp theo Step lý thuyết Step luyện tập Step Kiểm tra Bắt đầu 4.21 MÀN HÌNH CẬP NHẬT MẬT KHẨU Hình 4.21: Màn hình cập nhật mật Bảng 4.41: Bảng thơng tin đối tượng hình cập nhật mật STT Tên đối tượng giao diện Thao tác lưu thay đổi Nhập mật Nhập mật Navigate Hồ sơ Navigate Thành tích Navigate Ngữ pháp Navigate Mật 86 4.CHƯƠNG 4: THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ - Thiết kế xử lý Bảng 4.42: Bảng thiết kế xử lý hình cập nhật mật STT Tên xử lý Quay lại Tiếp theo Step lý thuyết Step luyện tập Step Kiểm tra Bắt đầu 87 CHƯƠNG 5: CÀI ĐẶT KIỂM THỬ CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 5.1 CÀI ĐẶT MƠI TRƯỜNG LẬP TRÌNH - Hệ điều hành: Window 10 - Visual studio 2015 ++ - Visual code - Sql Server Login with : • Admin : username: admin, password: admin • Client: username: datnguyen, password: datnguyen 5.2 KIỂM THỬ - Nhóm lên kế hoạch kiểm thử (lập Test Plan, Test Case chi tiết) website Vì số lượng có hai thành viên nên nhóm tổ chức kiểm thử chéo Thành viên đảm nhiệm lập trình chức kiểm thử thành viên lại ngược lại Dưới số test case tiêu biểu kiểm thử: 5.2.1 Test case hình Login Bảng 5.1: Bảng test case hình login Test case Test ID descri Thực đ đăng nhập m LOG_01 account chư đăng kí Kiểm tra đă với passwo LOG_02 88 CHƯƠNG 5: CÀI ĐẶT KIỂM THỬ Kiểm tra U nhập thành LOG _02 Kiểm tra pa validation LOG_03 5.2.2 Test case Thêm sản phẩm Bảng 5.2: Bảng test case Thêm câu hỏi Test case ID Không nhậ Add_01 sản phẩm Không imp Add_02 Nhập vào g phẩm c Add _03 CHƯƠNG 5: CÀI ĐẶT KIỂM THỬ 5.2.3 Test case Giỏ hàng Bảng 5.3: Bảng test case giỏ hàng Test case Test descri ID Khi khách khơng đăng Cart_01 Cart_02 Khơng có h hóa g 5.2.4 Test case Luyện tập Bảng 5.4: Bảng test case giỏ hàng Test case ID Exercies_01 Cart_02 90 CHƯƠNG 5: CÀI ĐẶT KIỂM THỬ 5.2.5 Test case thêm đề thi Bảng 5.5: Bảng test case giỏ hàng Test case ID AddExam_0 AddExam_02 91 KẾT LUẬN NHỮNG KẾT QUẢ ĐẠT ĐƯỢC - Hiểu rõ Angular CLI, ANT-DESGIN(NG-ZORRO), Typescript - Hiểu ASP NetCore áp dụng mô hình MVVM - Xây dựng thành cơng website học tiếng Anh với cơng nghệ tìm hiểu ƯU ĐIỂM - Áp dụng kiến thức tìm hiểu vào khoá luận - Xây dựng website học tiếng Anh - Có thể đăng nhập google facebook - Phía Admin hồn thiện chức ( Thêm, Sửa, Xóa, Tìm kiếm) sản phẩm, câu hỏi đề thi, người dùng Quản lý thành tích theo người dùng Và duyệt hố đơn - Phía người dùng học tập, luyện tập , mua hàng - Client luyện tập loại ngữ pháp khác - Có thể dùng điểm đổi thưởng vật phẩm ví dụ: Sách - Khi hoàn thành luyện tập nhận kinh nghiệm tích luỹ thành tích - Khi hồn thành thành tích thưởng vàng kinh nghiệm - Cập nhật profile người dùng - NHƯỢC ĐIỂM Giao diện phía người dùng chưa tốt - Chưa gửi thông báo cho người dùng qua mail - Đọc file exel câu hỏi đề thi - HƯỚNG PHÁT TRIỂN Khắc phục nhược điểm nêu - Nhóm cải thiện giao diện để đạt chuẩn UX/UI - Nhóm thiết kế giao diện để chuẩn responsive thiết bị mobile - Bên cạnh đó, cải tiến code để tốc độ xử lý request trả response nhanh 92 TÀI LIỆU THAM KHẢO Tiếng việt Tham khảo documents angular https://angular.io/docs [2] Tham khảo document NetCore https://docs.microsoft.com/vi-vn/dotnet/core/ [3] Sử dụng UI ng-zorro https://ng.ant.design/docs/introduce/en [4] Áp dụng mơ hình MVMM https://docs.microsoft.com/enus/aspnet/mvc/overview/getting-started/introduction/getting-started [5] Sử dụng hangfire https://docs.hangfire.io/en/latest/ [6] Áp dụng Repository Pattern C# https://codewithshadman.com/repository-pattern-csharp/ Tiếng anh [1] Referance documents angular at https://angular.io/docs [2] Referance document NetCore at https://docs.microsoft.com/vi-vn/dotnet/core/ [3] Using UI ng-zorro at https://ng.ant.design/docs/introduce/en [4] Apply the model MVMM https://docs.microsoft.com/enus/aspnet/mvc/overview/getting-started/introduction/getting-started [5] Using hangfire at https://docs.hangfire.io/en/latest/ [6] Apply Repository Pattern C# https://codewithshadman.com/repository-pattern-csharp/ [1] 93 ... THI VĂN Tp Hồ Chí Minh, tháng năm 2020 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG TRANG WEB HỌC TIẾNG ANH ONLINE SVTH : NGUYỄN TRỌNG...TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG TRANG WEB HỌC TIẾNG ANH ONLINE SVTH : NGUYỄN TRỌNG ĐẠT MSSV : 16110049... phí: Học trực tuyến khơng tiêu tốn bạn số chi phí khổng lồ, đặc biệt chi phí việc học tiếng Anh Theo thông tin tham khảo website học tiếng Anh online www.globaledu.com.vn, với số tiền USD/tháng