Đồ án tốt nghiệp ngành cntt đề tài xây dưng website học tiếng anh

TRƯỜNG ĐẠI HỌC THỦY LỢI KHOA CÔNG NGHỆ THÔNG TIN ĐỒ ÁN TỐT NGHIỆP NGÀNH CNTT ĐỀ TÀI: XÂY DƯNG WEBSITE HỌC TIẾNG ANH Sinh viên thực hiện: Nguyễn Kỳ Anh – Lớp 59TH3 Giảng viên hướng dẫn: TS Nguyễn Quang Trung HÀ NỘI, NGÀY … THÁNG … NĂM 2022 LỜI CAM ĐOAN Lời em xin cam đoan Đồ án tốt nghiệp thân em Các kết Đồ án tốt nghiệp trung thực, không chép từ nguồn hình thức Việc tham khảo nguồn tài liệu (nếu có) thực trích dẫn ghi nguồn tài liệu tham khảo quy định Tác giả ĐANT Chữ ký Nguyễn Kỳ Anh i LỜI CÁM ƠN Báo cáo tốt nghiệp chuyên ngành CNTT với đề tài “Xây dựng website học tiếng anh” kết trình cố gắng không ngừng thân giúp đỡ, động viên khích lệ thầy, bạn bè đồng nghiệp người thân Qua trang viết tác giả xin gửi lời cảm ơn tới người giúp đỡ em thời gian học tập - nghiên cứu khoa học vừa qua Em xin tỏ lịng kính trọng biết ơn sâu sắc thầy Nguyễn Quang Trung trực tiếp tận tình hướng dẫn cung cấp tài liệu thông tin khoa học cần thiết để em hồn thành ĐATN Xin chân thành cảm ơn Lãnh đạo trường Đại học Thủy Lợi khoa CNTT tạo điều kiện cho em hoàn thành tốt cơng việc nghiên cứu khoa học Cuối em xin chân thành cảm ơn bạn học giúp đỡ em trình học tập thực Báo cáo tốt nghiệp Em xin chân thành cảm ơn! ii MỤC LỤC DANH MỤC BẢNG BIỂU .viii DANH MỤC CÁC TỪ VIẾT TẮT VÀ GIẢI THÍCH CÁC THUẬT NGỮ ix CHƯƠNG GIỚI THIỆU 1.1 Tầm quan trọng tiếng anh .1 1.2 Lý chọn đề tài nghiên cứu 1.3 Điểm khác biệt so với Website khác .2 1.4 Mục tiêu đề tài .3 1.5 Cấu trúc đồ án tốt nghiệp CHƯƠNG CƠ SỞ LÝ THUYẾT .4 2.1 Học Tiếng Anh 2.2 Các phần Website học tiếng anh .5 2.2.1 Từ vựng 2.2.2 Ngữ pháp 2.2.3 Luyện đọc .8 2.2.4 Luyện nghe 2.2.5 Luyện nói 11 2.2.6 Các kiểm tra 13 CHƯƠNG CÔNG CỤ LẬP TRÌNH 15 3.1 DJANGO 15 3.1.1 Tại nên sử dụng Django Framework 15 3.1.2 Tìm hiểu MVT Pattern Django .16 3.1.3 Hướng dẫn cài đặt Django 17 3.1.4 Các thành phần ứng dụng Django 17 3.1.5 Django làm cho Lập trình web dễ dàng nào? 18 3.1.6 Các công ty hàng đầu sử dụng Django Framework 19 3.1.7 Chúng ta làm với Django Framework 20 3.1.8 Tại nên sử dụng Django? .21 3.1.9 Vậy, có khơng nên sử dụng Django không? 21 3.1.10 Ưu điểm Django Framework .21 3.1.11 Điều kiện tiên để học Django 23 iii 3.1.12 Framework giúp nghiệp lập trình viên bạn? .23 3.1.13 Kết luận 24 3.2 Django REST Framework 25 3.2.1 Tổng quan 25 3.2.2 Chuẩn bị .26 3.3 HTML gì? 27 3.3.1 HTML xử lý sao? 28 3.3.2 Cấu trúc đoạn HTML 28 3.3.3 Dùng chương trình để tạo tập tin HTML? .29 3.3.4 HTML đóng vai trị website? 30 3.4 CSS 31 3.4.1 CSS gì? 31 3.4.2 Ưu điểm CSS .32 3.4.3 CSS hoạt động nào? 33 3.4.4 Internal, External Inline CSS Styles 34 3.5 JavaScript 35 3.5.1 Javascript gì? 35 3.5.2 Javascript Framework gì? .36 3.5.3 Ưu điểm nhược điểm Javascript .36 3.5.4 Cách viết chương trình javascript 37 3.5.5 Các câu hỏi thường gặp học Javascript 40 3.6 Bootstrap 41 3.6.1 Bootstrap gì? 41 3.6.2 Lịch sử bootstrap 41 3.6.3 File bootstrap 42 3.6.4 Glyphicons 43 3.6.5 Tại nên dùng Bootstrap 44 3.6.6 Cấu trúc tính Bootstrap gì? 45 3.6.7 Cách cài đặt Bootstrap 45 3.6.8 Bootstrap có mới? .46 3.7 JQUERY 46 iv 3.7.1 JQUERY gì? 46 3.7.2 Cách sử dụng Jquery 47 3.7.3 Cài đặt cục .48 3.7.4 Sử dụng CDN .49 3.7.5 Cách để gọi hàm thư viện jQuery? 50 3.7.6 Cách sử dụng Custom Script jQuery? .51 3.7.7 Sử dụng nhiều thư viện Jquery 52 CHƯƠNG XÂY DỰNG WEBSITE HỌC TIẾNG ANH 53 4.1 Giới thiệu hệ thống .53 4.1.1 Mơ hình hệ thống .53 4.1.2 Mô tả hệ thống 53 4.1.3 Biểu đồ phân cấp chức .54 4.1.4 Sơ đồ Usecase tổng quát 54 4.1.5 Sơ đồ Usecase QTV 55 4.1.6 Sơ đồ Usecase User 55 4.1.7 Sơ đồ Usecase non-User .56 4.1.8 Sơ đồ lớp tổng quát 56 4.2 Giới thiệu Website .57 4.2.1 Giao diện 57 4.2.2 Chủ đề 58 4.2.3 Từ vựng 58 4.2.4 Ngữ pháp 59 4.2.5 Luyện? 60 4.2.6 Bài kiểm tra 62 4.3 Mã nguồn chương trình 62 KẾT LUẬN 63 TÀI LIỆU THAM KHẢO 65 v DANH MỤC BẢNG BIỂU Hình Mơ hình MVT Django 16 Hình Bảng xếp hạng ngơn ngữ phổ biến giới năm 2019 24 Hình Demo qua REST web service .25 Hình Sau run server 27 Hình Ví dụ HTML .28 Hình HTML soạn thảo nodepad .29 Hình Vai trị ngơn ngữ Website .30 Hình Một Website khơng có CSS 32 Hình Bootstrap.JS .42 Hình 10 Sau run server 54 Hình 11 Sơ đồ usecase tổng quát 54 Hình 12 Sơ đồ usecase quản trị viên 55 Hình 13 Sơ đồ usecase User 55 Hình 14 Sơ đồ usecase non-User 56 Hình 15 Sơ đồ lớp tổng quát .56 Hình 16 Giao diện Website EngForLife 57 Hình 17 Giao diện chủ đề Website EngForLife 58 Hình 18 Giao diện chủ đề Website EngForLife 58 Hình 19 Giao diện ngữ pháp Website EngForLife 59 Hình 20 Giao diện luyện nghe Website EngForLife 60 Hình 21 Giao diện luyện nghe Website EngForLife 61 Hình 22 Giao diện luyện nói Website EngForLife 61 vi DANH MỤC CÁC TỪ VIẾT TẮT VÀ GIẢI THÍCH CÁC THUẬT NGỮ (Xếp theo thứ tự A, B,C… ) CNTT Công nghệ thông tin ĐATN Đồ án tốt nghiệp vii CHƯƠNG GIỚI THIỆU 1.1 Tầm quan trọng tiếng anh Học tiếng Anh trở thành ngơn ngữ tồn cầu Giữa hàng chục hàng trăm ngôn ngữ khác nhau, giới lựa chọn tiếng Anh phương tiện để người hiểu Theo số liệu từ Wikipedia, 53 quốc gia sử dụng tiếng Anh ngơn ngữ thức kiện quốc tế Olympic, tổ chức tồn cầu, cơng ty đa quốc gia … coi tiếng Anh như ngôn ngữ chung truyền thông Nhà tuyển dụng muốn chọn ứng viên có kỹ tiếng Anh tốt, ứng cử viên sử dụng sử dụng tệ ngoại ngữ Khi bạn tốt nghiệp mong muốn làm việc công ty tốt, với mức lương tốt đẹp môi trường ổn định, nhà tuyển dụng hỏi bạn: yêu cầu chắn khơng thể bỏ qua: Biết tiếng Anh Thậm chí bạn làm việc cho công ty Nhật Bản, khác đa quốc gia, bạn biết tiếng Anh, sử dụng tốt thành thạo, bạn ưu tiên 1.2 Lý chọn đề tài nghiên cứu Ngày mạng internet xu thời đại Mọi việc thông qua internet Vì hoạt động học tập trở nên dễ dàng đó, học tiếng anh mạng nhu cầu thiết thực cho tất sinh viên Việt Nam Nắm bắt xu nên em lên ý tưởng để xây dựng Website học tiếng anh trực tuyến Nhưng internet phát triển mạnh, kéo theo Website học tập trực tuyến xây dựng lên Tiếng anh ngoại lệ Ở Việt Nam có nhiều Website học tiếng anh xây dựng cho người Việt Nam học tập https://mshoagiaotiep.com/ ,… https://tienganhmoingay.com/, Tuy nhiên để có lộ trình học tập cụ thể giảng chất lượng từ Website người dùng phải đăng ký tài khoản trả khoản phí định học Chưa kể nói người dùng muốn học kỹ mềm luyện nói hay luyện nghe vơ khó khăn Nắm bắt tình hình nhu cầu muốn học Tiếng Anh người lại không em xin tiến hành thực Website học Tiếng Anh trực tuyến 1.3 Điểm khác biệt so với Website khác Những điểm khác biệt so với Website học tiếng anh khác là:  Hồn tồn miễn phí Hồn tồn miễn phí có nghĩa người dùng khơng cần đăng nhập mà học Việc có tài khoản đăng nhập vào hệ thống để mở khóa thêm số chức khác chương trình  Sử dụng trí tuệ nhận tạo Điểm khác biệt lớn so với Website khác hệ thống em có sử dụng trí tuệ nhận tạo để nhận diện giọng nói người dùng chuyển giọng nói thành văn Văn so sánh với từ gốc để tính độ xác từ đưa nhận xét cho người dùng họ phát âm sai đâu, cần nhấn mạnh âm … Thường để luyện nói Website khác người dùng giao tiếp với người nước ngồi phải trả phí cao mà lại khơng thể chủ động thời gian Nhưng với Website em thứ người dùng chủ động  Hệ thống tích điểm Sau kiểm tra người dùng làm lưu số câu lại Với số lượng câu định người dùng có số tương ứng Top 10 người có số lượng cao có tên bên bảng xếp hạng thành tích 3.7.6 Cách sử dụng Custom Script jQuery? Tốt viết code tùy chỉnh tệp JavaScript tùy chỉnh, có tên custom.js, sau: /* Filename: custom.js */ $(document).ready(function() { $("div").click(function() { alert("Xin chào bạn!"); }); }); Bây đưa custom.js vào HTML file sau: The jQuery Example Nhấp vào để xem hộp hội thoại 58 Nó cho kết sau: Nhấp vào để xem hộp hội thoại 3.7.7 Sử dụng nhiều thư viện Jquery Bạn sử dụng nhiều thư viện mà không xảy xung đột chúng Ví dụ, bạn sử dụng thư viện jQuery thư viện MooTool JavaScript với [11] 59 CHƯƠNG XÂY DỰNG WEBSITE HỌC TIẾNG ANH 4.1 Giới thiệu hệ thống 4.1.1 Mơ hình hệ thống Sử dụng mơ hình hướng đối tượng, xác định đối tượng tham gia công việc hệ thống sau:  User: người đăng ký tài khoản, người có nhu cầu học tập muốn làm kiểm tra để kiểm tra trình độ tiếng anh  Non-User: giống với User người có nhu cầu học tập làm kiểm tra, muốn làm kiểm tra non-User cần phải đăng ký tài khoản để trở thành User  QTV: Là người có nhiệm vụ quản lý hệ thống Quản lý người truy cập vào hệ thống, người quản lý tồn Website 4.1.2 Mơ tả hệ thống Hệ thống gồm hoạt động quản trị viên, User non-User User non-User xem chủ đề, từ vựng ,ngữ pháp luyện nghe, luyên nói, luyện đọc Khác biệt User non-User User làm kiểm tra viết trả lời bình luận người đánh đưa nhận xét Website Hệ thống sử dụng trí tuệ nhân tạo để giúp cho người dùng dễ dàng học tập Hỗ trợ đăng nhập, tạo tải khoản, người đăng nhập dễ dàng chỉnh sửa thông tin số điểm tích lũy đươc 60 4.1.3 Biểu đồ phân cấp chức Hình 100 Sau run server 4.1.4 Sơ đồ Usecase tổng quát 61 Hình 111 Sơ đồ usecase tổng quát 4.1.5 Sơ đồ Usecase QTV Hình 122 Sơ đồ usecase quản trị viên 4.1.6 Sơ đồ Usecase User Hình 133 Sơ đồ usecase User 62 4.1.7 Sơ đồ Usecase non-User Hình 144 Sơ đồ usecase non-User  Quản trị viên: người quản lý website  User: thành viên học tiếng anh Website  Non-User: Người đăng kí tài khoản website 63 4.1.8 Sơ đồ lớp tổng quát Hình 155 Sơ đồ lớp tổng quát 4.2 Giới thiệu Website 4.2.1 Giao diện Thực tế cho thấy, muốn học tiếng anh trực tuyến giao diện dễ nhìn tối ưu Giao diện Website khơng cần thiết phải đẹp, phải có q nhiều màu sắc làm thứ họ quan tâm việc học tiếng anh Vậy nên Website thiết kế đơn giản tốt 64 Hình 166 Giao diện Website EngForLife Như nói Chương 1, Website học tiếng anh EngForLife gồm phần là:  Chủ đề  Từ vựng  Luyện nghe, nói ,đọc  Bài kiểm tra Người dùng chọn phần để luyện trình độ tiếng anh Bây vào giao diện phần 65 4.2.2 Chủ đề Hình 177 Giao diện chủ đề Website EngForLife Khi người dùng bấm vào mục chủ đề menu đến trang danh sách chủ đề cho người dùng lựa chọn chủ đề muốn học Khi bấm vào chủ để đến trang giới thiệu chủ đề tự vựng chủ yếu chủ đề 4.2.3 Từ vựng Hình 188 Giao diện chủ đề Website EngForLife 66 Giao diện lên người dùng bấm vào “từ vựng” menu Từ vựng bao gồm tất từ vựng tất chủ đề có Website EngForLife Ngồi cịn có cơng cụ tìm kiếm, giúp người dùng tìm kiếm từ mà họ muốn tra cứu Khi người dùng bấm vào từ vựng chi tiết từ vựng bao gồm  Loại từ  Phát âm  Cách dùng  … Ngoài giao diện cịn có thêm nút “Thêm từ mới” để người dùng thêm từ mà khơng có Website học tiếng anh Tất nhiên từ phải hệ thống kiểm duyệt tính xác đưa lên Website 4.2.4 Ngữ pháp Hình 199 Giao diện ngữ pháp Website EngForLife Trong Website học tiếng anh nào, khơng thể thiếu ngữ pháp 67 Trang Website lên người dùng bấm vào “ngữ pháp” menu Ở Website tổng hợp cho người học, có câu hỏi khác để giúp người học nhớ rõ hiểu sâu mà người học học 4.2.5 Luyện? Luyện bao gồm rèn cho người học kỹ là:  Luyện đọc  Luyện nghe  Luyện nói 4.2.5.1 Luyện đọc Hình 200 Giao diện luyện nghe Website EngForLife Ở người dùng chọn chủ đề mà hệ thống có để đọc Mỗi chủ đề người dùng chọn có câu hỏi để kiểm tra xem mức độ đọc hiểu người dùng đến đâu 68 4.2.5.2 Luyện nghe Hình 211 Giao diện luyện nghe Website EngForLife Người dùng bấm vào nút loa để nghe âm phát ra, âm lựa chọn ngẫu nhiên từ từ cụm từ tất chủ đề Người dùng bấm nút mũi tên để đổi từ khác Sau nghe xong người dùng gõ từ mà họ nghe vào ô textboxt Nút kiểm tra để so sánh độ xác từ gốc với từ mà người dùng nhập, Nút hiển thị từ để hiển thị từ gốc 4.2.5.3 Luyện nói 69 Hình 222 Giao diện luyện nói Website EngForLife Giao diện luyện nói để kiểm tra khả phát âm người dùng Để sử dụng chức người dùng phải có kết nối microphone với Website Khi bấm vào nút mic, hệ thống đưa từ cụm từ ngẫu nhiên tất chủ đề cho người dùng kèm phát âm từ cho người dùng nghe Việc người dùng lúc nghe kỹ từ phát sau nói lại Hệ thống AI tự nhận diện giọng nói người dùng chuyển từ thành văn đưa lên hình Người dùng kiểm tra tính xác từ mà người dùng phát âm so với từ gốc hệ thống Người dùng bấm nút next để đổi từ khác 4.2.6 Bài kiểm tra Khi bấm vào nút “bài kiểm tra” menu hệ thống đưa người dùng đến trang khiểm tra Ở người dùng đưa cho test ngẫu nhiên tổng hợp chủ đề để làm có giới hạn thời gian Sau làm xong hệ thống chấm điểm tính số câu thưởng cho người dùng số tương ứng với số câu Số dùng để đo thành tích người dùng bảng xếp hang Tính chưa hồn thiện thời gian có hạn 4.3 Mã nguồn chương trình Để tiết kiệm thời gian nên em xin gửi tồn chương trình vào link driver sau: https://drive.google.com/drive/u/0/folders/17DifWPeavWwBad9joJZbnZ54aRCWjshS 70 KẾT LUẬN 71 TÀI LIỆU THAM KHẢO [1] Ms Thủy, “Luyện đọc tiếng anh,” 2019 [Trực tuyến] Available: https://kissenglishcenter.com/luyen-doc-tieng-anh/ [2] Tổ chức giao dục quốc tế LANGMASTER, [Online] Available: https://langmaster.edu.vn/cac-phuong-phap-luyen-nghe-tieng-anh-hieu-qua-chonguoi-moi-bat-dau-a66i1460.html [3] "Academi English for international Education," [Online] Available: https://acet.edu.vn/luyen-noi-tieng-anh-nhu-nguoi-ban-ngu/ [4] "Chức kiểm tra, Tổ hợp giao dục Topica," [Online] Available: https://vietnambiz.vn/kiem-tra-checking-la-gi-vai-tro-cua-chuc-nang-kiem-tra20190923143425946.htm [5] "Học viện đào tạo CNTT NIIT," 2020 [Online] Available: https://niithanoi.edu.vn/django-la-gi.html [6] "Viblo Learning," [Online] Available: https://viblo.asia/p/gioi-thieu-django-restframework-Eb85oJb2l2G [Accessed 2020] [7] T Phạm, "Thach Pham Share The Best," [Online] Available: https://thachpham.com/web-development/html-css/html-la-gi-va-vi-sao-no-quantrong.html [8] H G [Online] Available: https://www.hostinger.vn/huong-dan/css-la-gi [9] C Write, "FreeTuts," [Online] Available: https://freetuts.net/javascript-la-giviet-ung-dung-javascript-dau-tien-263.html [10] M Bão [Online] Available: https://wiki.matbao.net/bootstrap-la-gi-cai-datbootstrap-web-chuan-responsive/ [11] "Quản trị mạng," [Online] Available: https://quantrimang.com/jquery-la-gi155854 72