Xây dựng website học tiếng anh online dùng laravel và node js

Kết quả dự kiến đạt được

CƠ SỞ LÝ THUYẾT

TÌM HIỂU NODE.JS

Node.js là nền tảng phát triển độc lập, được xây dựng trên Javascript Runtime của Chrome, cho phép tạo ra các ứng dụng mạng một cách nhanh chóng và dễ dàng mở rộng.

Node.js được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại California, Hoa Kỳ [2]

Node.js được phát triển chủ yếu bằng C++, mang lại tốc độ xử lý và hiệu năng vượt trội Nhờ đó, Node.js cho phép xây dựng các ứng dụng có khả năng xử lý nhanh và hoạt động trong thời gian thực.

Node.js là giải pháp lý tưởng cho các sản phẩm có lượng truy cập lớn, yêu cầu khả năng mở rộng nhanh chóng, cần đổi mới công nghệ, hoặc phục vụ cho việc phát triển các dự án Startup một cách nhanh nhất.

Để cấu hình và khởi động một server Node.js, trước tiên, bạn cần nạp module http vào project Tiếp theo, tạo một server và truyền vào một hàm ẩn danh làm tham số, hàm này sẽ được gọi khi có kết nối mới Hàm này nhận hai đối số: request, chứa các tham số yêu cầu từ người dùng, và response, chứa kết quả phản hồi cho người dùng.

Chúng ta sẽ sử dụng đối tượng response để gửi một header tới người dùng với mã HTTP response 200 ("ok") và thiết lập content type, đồng thời hiển thị thông báo "Hello World!" Cuối cùng, cần đóng response sau khi đã hoàn thành nội dung phản hồi.

Finally, we configure the server to listen for incoming requests on port 8080 and display a message in the console to indicate that the server has started operating.

1.1.2 Tại sao nên sử dụng Node.js?

Các ứng dụng Node.js được viết bằng javascript, ngôn ngữ này là một ngôn ngữ khá mạnh mẽ và thông dụng

Node.js chạy đa nền tảng phía Server, sử dụng kiến trúc hướng sự kiện Event- driven, cơ chế non-blocking I/O làm cho nó nhẹ và hiệu quả [2]

Có thể chạy ứng dụng Node.js ở bất kỳ đâu trên máy Mac – Window – Linux, hơn nữa cộng đồng Node.js rất lớn và hoàn toàn miễn phí

Các ứng dụng Node.js đáp ứng tốt thời gian thực và chạy đa nền tảng, đa thiết bị

1.1.3 Những khó khăn khi sử dụng

Giống như hầu hết các công nghệ mới, việc triển khai Node.js trên host không phải là điều dễ dàng

Một nhược điểm lớn của Node.js là nó vẫn đang trong giai đoạn phát triển ban đầu, dẫn đến khả năng một số đặc trưng có thể thay đổi trong tương lai.

1.1.4 Các công cụ chính [2] npm: Node.js là tất cả về module và đi kèm với đó là nhu cầu về một trình quản lý package chất lượng; cho mục đích này, npm đã được tạo ra Với npm là sự lựa chọn lớn nhất của các package do cộng đồng tạo ra trong bất kỳ môi trường lập trình nào, giúp việc xây dựng các ứng dụng Node.js trở nên nhanh chóng và dễ dàng gyp: Hệ thống xây dựng được xử lý bởi gyp, một trình tạo dự án dựa trên python được sao chép từ V8 Nó có thể tạo các tệp dự án để sử dụng với các hệ thống xây dựng trên nhiều nền tảng Node.js yêu cầu một hệ thống xây dựng vì phần lớn của nó - và các phụ thuộc của nó - được viết bằng các ngôn ngữ yêu cầu biên dịch gtest: Native code có thể được kiểm tra bằng gtest, được lấy từ Chromium Nó cho phép kiểm tra C/C ++ mà không cần một nút thực thi hiện có để Bootstrap từ đó

1.1.5.1 Socket.IO là gì? các bên ở những địa điểm khác nhau kết nối với nhau, truyền dữ liệu ngay lập tức thông qua server trung gian Socket.IO có thể được sử dụng trong nhiều ứng dụng như nhắn tin, trò chơi trực tuyến, cập nhật kết quả của một trận đấu đang xảy ra,

Socket.IO là một thư viện JavaScript mạnh mẽ cho phép phát triển các ứng dụng web thời gian thực Tuy nhiên, nó không thể thay thế hoàn toàn một ngôn ngữ lập trình khác mà cần phải kết hợp với các ngôn ngữ như PHP, ASP.NET, hoặc Node.js để tối ưu hiệu suất và khả năng tương tác.

1.1.5.2 Làm thế nào để sử dụng Socket.IO?

Cấu trúc một ứng dụng web thời gian thưc sử dụng socket bao gồm 2 phần: phía server, phía client

Để cài đặt Socket.IO, cần thiết lập một server, có thể sử dụng các ngôn ngữ như PHP, ASP.NET, hoặc Node.js Tuy nhiên, việc lựa chọn ngôn ngữ sẽ ảnh hưởng đến cấu trúc của server Khuyến khích sử dụng Node.js vì cho phép cài đặt Socket.IO trực tiếp trên cùng một server, trong khi với PHP, cần phải cài thêm các package khác hoặc thiết lập một server riêng để chạy Socket.IO.

Phía client sẽ phát triển giao diện người dùng, có thể sử dụng Javascript hoặc các thư viện như JQuery Nói chung, bất kỳ ngôn ngữ lập trình nào cũng có thể được áp dụng trong quá trình này.

- Những thứ cần chuẩn bị để sử dụng Socket.IO

Máy vi tính chạy hệ điều hành Mac hoặc Windows đã module Socket.IO

To set up Socket.IO on a Node.js server, first create a directory named "Demo" or any preferred name Open the terminal on Mac or cmd on Windows and navigate to the Demo folder In the command prompt, type "npm init;" to initiate the setup The system will prompt you to enter a project name; you can choose any name you like For other settings, simply press enter to skip When asked "Yes" or "No," type "Yes" to proceed with the installation.

After completing the installation step, the system generates a package.json file, which is essential for configuring the server Next, it's necessary to install the required packages on the server to enable web and real-time application functionality To install these packages, open the command prompt, navigate to the Demo directory, and enter the command "npm install express ejs socketio." Upon successful installation, the system will automatically create a node-modules directory.

1.1.5.3 Cơ chế hoạt động của Socket.IO

- Khai báo sử dụng Socket.IO:

Ứng dụng web thời gian thực hoạt động bằng cách sử dụng server để lắng nghe và truyền dữ liệu đến các máy khách Do đó, việc khai báo sử dụng Socket.IO là cần thiết cho cả phía server và client.

Code khai báo sử dụng socket.io ở server:

Code khai báo sử dụng socketio ở phía client:

- Cơ chế lắng nghe, truyền dữ liệu của Socket.IO Để lắng nghe data, ta sử dụng socket.on(), để phát dữ liệu thì sử dụng socket.emit()

TÌM HIỂU LARAVEL

Laravel là một framework PHP mã nguồn mở miễn phí, được phát triển bởi Taylor Otwell, với mục tiêu hỗ trợ việc phát triển ứng dụng web theo cấu trúc Model-View-Controller (MVC).

Laravel nổi bật với cú pháp dễ hiểu và rõ ràng, hệ thống đóng gói Modular cùng quản lý gói phụ thuộc hiệu quả Nó hỗ trợ đa dạng phương thức truy cập vào các cơ sở dữ liệu quan hệ và cung cấp nhiều tiện ích hữu ích cho việc triển khai và bảo trì ứng dụng.

Laravel được phát hành theo giấy phép MIT, với mã nguồn được lưu trữ tại Gitthub [1]

1.2.2 Tại sao nên sử dụng Laravel?

Laravel là một phần mềm miễn phí, Framework mã nguồn mở này cho phép xây dựng các ứng dụng web lớn và phức tạp một cách dễ dàng

Laravel là framework tốt nhất và được sử dụng nhiều nhất theo Google Trends

Framework này có khả năng xử lý các dự án lớn một cách hiệu quả, chính vì vậy nhiều công ty đã lựa chọn áp dụng nó.

Laravel dựa trên Kiến trúc MVC nên có nhiều chức năng tích hợp giúp tăng hiệu năng và cung cấp tài liệu tốt hơn

Laravel có một cộng đồng rộng lớn và mạnh mẽ hơn hẳn những Framework khác

Laravel cung cấp các tính năng bảo mật thiết yếu giúp bảo vệ ứng dụng của bạn Một trong những tính năng quan trọng là bảo vệ CSRF, ngăn chặn các cuộc tấn công giả mạo yêu cầu trang chéo.

Laravel sử dụng Blade Templating, cho phép bạn sử dụng xây dựng giao diện ứng dụng web một cách dễ dàng và khoa học hơn

Di chuyển cơ sở dữ liệu là một trong những tính năng quan trọng của Laravel, cho phép bạn duy trì cấu trúc cơ sở dữ liệu của ứng dụng mà không cần phải tái tạo lại.

Laravel không thể tải về và cài đặt trực tiếp; thay vào đó, nó được cài đặt thông qua môi trường PHP và các công cụ cần thiết, chủ yếu là Composer Do đó, bạn cần tìm hiểu về Composer, cách thực thi các dòng lệnh, cũng như các lệnh cần thiết trong Laravel và chức năng của chúng Nếu bạn chưa quen với lập trình cơ bản hoặc lập trình hướng đối tượng, việc này có thể gặp nhiều khó khăn.

Trong Laravel, cấu trúc thư mục quy định rằng các route cho ứng dụng web được định nghĩa trong tệp routes/web.php, trong khi các route cho API được viết trong routes/api.php.

Các phương thức trong Route: mặc định route sẽ hỗ trợ các phương thức như sau:

Khi cần truyền tham số qua đường dẫn, chúng ta có thể thực hiện điều này trong route Ví dụ, để lấy ID của người dùng từ URL, chúng ta có thể định nghĩa route một cách phù hợp.

Middleware cung cấp một giải pháp khá tiện ích cho việc filtering HTTP các requests trong ứng dụng của bạn

Defining Middleware: Để tạo mới một middleware, sử dụng câu lệnh artisan make:middleware

HTTP request tới ứng dụng của bạn, đơn giản chỉ cần liệt kê tên class middleware trong thuộc tính $middleware của class app/Http/Kernel.php [1]

Để gán middleware cho một route cụ thể trong Laravel, trước tiên bạn cần thêm middleware đó vào thuộc tính $routeMiddleware trong file app/Http/Kernel.php Mặc định, Laravel đã cung cấp một số class middleware sẵn có Bạn chỉ cần thêm middleware của mình vào danh sách và gán từ khóa mà bạn chọn.

Terminable Middleware: Đôi khi một middleware có thể cần thực hiện sau khi

Sau khi HTTP response được gửi đến trình duyệt, middleware "session" trong Laravel sẽ ghi dữ liệu session vào storage Nếu bạn định nghĩa phương thức terminate trong middleware, phương thức này sẽ tự động được gọi ngay sau khi response đã được gửi.

Laravel cung cấp các biện pháp bảo vệ hiệu quả cho ứng dụng của bạn trước tấn công giả mạo cross-site request forgery (CSRF) CSRF là một loại mã độc cho phép thực hiện các lệnh trái phép thay mặt cho người dùng đã được xác thực.

Laravel tự động sinh ra một mã CSRF (token) cho mỗi phiên người dùng đang hoạt động trong ứng dụng Mã này được sử dụng để xác thực rằng người dùng đã được chứng thực và là người thực hiện yêu cầu đối với ứng dụng.

Whenever you create an HTML form in your application, it is essential to include a hidden CSRF token field to ensure that the CSRF middleware can validate the request You can generate this field using the csrf_field function.

Thông thường ta hay có xu hướng viết tất tần tật xử lý logic trong routes , chẳng hạn như sau:

Việc định nghĩa tất cả logic xử lý request trong file routes.php có thể dẫn đến việc file router trở nên phình to và khó quản lý, không đúng với mục đích của Router Thay vào đó, nên sử dụng các lớp Controller để quản lý logic xử lý request, trong khi router chỉ đảm nhiệm việc điều hướng các request đến các controller Các Controller có thể nhóm các request HTTP có logic liên quan vào cùng một lớp và được lưu trữ trong thư mục app/Http/Controllers.

Một controller cơ bản sẽ được định nghĩa như sau, mỗi controller cần được lớp base controller được tạo sẵn bởi Laravel:

Controller Middleware: Như đã tìm hiểu ở phần trên thì Middleware có thể được gán cho định tuyến của controller trong file route như sau:

Để tiện lợi hơn, chúng ta có thể định nghĩa middleware ngay trong hàm constructor của controller Bằng cách sử dụng phương thức middleware trong controller, việc gán middleware trở nên dễ dàng hơn Thậm chí, chúng ta có thể hạn chế middleware cho một số phương thức cụ thể trong lớp controller.

Khi đó ta không cần gán middleware trong file router nữa mà request vẫn phải đi qua midlleware trước khi đến method

KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

KHẢO SÁT HIỆN TRẠNG

3.1 Nhận diện tác nhân và chức năng trong sơ đồ Use Case 3.2 Lược đồ Use Case (Use Case Diagram)

3.3 Đặc tả Use Case Một số tính năng chính 3.4 Lược đồ lớp

CHƯƠNG 4: THIẾT KẾ ỨNG DỤNG

4.1 Thiết kế cơ sở dữ liệu 4.2 Thiết kế giao diện 4.3 Thiết kế xử lí CHƯƠNG 5: CÀI ĐẶT

5.1 Cấu trúc thư mục 5.2 Hướng dẫn cài đặt CHƯƠNG 6: KIỂM THỬ

1 Những kết quả đạt được

2 Những đóng góp mới và đề xuất mới

4 Hướng phát triển trong tương lai

XÁC ĐỊNH YÊU CẦU

3.1 Nhận diện tác nhân và chức năng trong sơ đồ Use Case 3.2 Lược đồ Use Case (Use Case Diagram)

PHÂN TÍCH VÀ MÔ HÌNH HÓA YÊU CẦU

NHẬN DIỆN TÁC NHÂN VÀ CHỨC NĂNG TRONG SƠ ĐỒ USE

ĐẶC TẢ USE CASE MỘT SỐ TÍNH NĂNG CHÍNH

THIẾT KẾ ỨNG DỤNG

THIẾT KẾ CƠ SỞ DỮ LIỆU

THIẾT KẾ GIAO DIỆN

THIẾT KẾ XỬ LÍ

CÀI ĐẶT

CẤU TRÚC THƯ MỤC

HƯỚNG DẪN CÀI ĐẶT

KIỂM THỬ VÀ SO SÁNH

KIỂM THỬ

SO SÁNH

Hướng phát triển trong tương lai

(Công việc dự kiến) Sản phẩm Ghi chú

Kiến thức xây dựng giao diện cho ứng dụng

Kiến thức xử lí nội dung động trên Website

5, 6 08/04 – 21/04 Tìm hiểu MySQL và xây dựng cơ sở dữ liệu

Xây dựng cơ sở dữ liệu

Tìm hiểu về Laravel, Node.js, Web Speech API

Kiến thức xây dựng Website

Admin: Quản lí từ vựng, ngữ pháp, bài kiểm tra User: Làm bài kiểm tra

Trang quản trị và trang người dùng

User: Học từ vựng theo chủ đề, học ngữ pháp, phát âm, nghe, tạo chủ đề tảo luận và bình luận

Kiểm thử và sửa lỗi chương trình, Đưa Website lên HOST Ứng dụng hoàn thành ở mức cơ bản

Trao đổi với GVHD về chương trình và báo cáo

Viết báo cáo Ứng dụng hoàn thiện

Hoàn thiện báo cáo Ứng dụng được đóng gói, tài liệu báo cáo hoàn thiện

Tp Hồ Chí Minh, ngày tháng năm 2019

(Ký và ghi rõ họ tên) Ý kiến của GVHD: ………

(Ký và ghi rõ họ tên)

1 Tính cấp thiết của đề tài 1

2 Mục đích của đề tài 1

3 Cách tiếp cận và phương pháp nghiên cứu 1

4 Kết quả dự kiến đạt được 2

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 4

1.3 TÌM HIỂU WEB SPEECH API 33

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 36

CHƯƠNG 3: PHÂN TÍCH VÀ MÔ HÌNH HÓA YÊU CẦU 39

3.1 NHẬN DIỆN TÁC NHÂN VÀ CHỨC NĂNG TRONG SƠ ĐỒ USE

3.2 LƯỢC ĐỒ USE CASE (USE CASE DIAGRAM) 40

3.3 ĐẶC TẢ USE CASE MỘT SỐ TÍNH NĂNG CHÍNH 41

3.4 LƯỢC ĐỒ LỚP (CLASS DIAGRAM) 48

CHƯƠNG 4: THIẾT KẾ ỨNG DỤNG 49

4.1 THIẾT KẾ CƠ SỞ DỮ LIỆU 49

CHƯƠNG 6: KIỂM THỬ VÀ SO SÁNH 91

1 Những kết quả đạt được 99

2 Những đóng góp mới và đề xuất mới 99

4 Hướng phát triển trong tương lai 100

DANH MỤC TÀI LIỆU THAM KHẢO 101

Hình 3.1 Lược đồ Use Case Người dùng 40

Hình 3.2 Lược đồ Use Case Quản trị viên 40

Hình 3.3 Lược đồ Use Case Siêu quản trị viên 41

Hình 3.4 Lược đồ lớp (Class Diagram) 48

Hình 4.1 Lược đồ cơ sở dữ liệu (Database Schema) 54

Hình 4.2 Danh sách các màn hình và sơ đồ chuyển đổi trang người dùng 54

Hình 4.3 Giao diện giới thiệu 54

Hình 4.4 Giao diện đăng nhập 55

Hình 4.5 Giao diện đăng ký 56

Hình 4.6 Giao diện trang chủ người dùng 56

Hình 4.7 Giao diện danh sách từ vựng theo chủ đề 58

Hình 4.8 Giao diện danh sách từ vựng của một chủ đề 58

Hình 4.9 Giao diện luyện tập từ vựng 1 59

Hình 4.10 Giao diện luyện tập từ vựng 2 59

Hình 4.11 Giao diện danh sách ngữ pháp 60

Hình 4.12 Giao diện chi tiết ngữ pháp 61

Hình 4.13 Giao diện luyện nghe 61

Hình 4.14 Giao diện thêm văn bản 62

Hình 4.15 Giao diện chi tiết văn bản của tôi 63

Hình 4.16 Giao diện từ khó 64

Hình 4.17 Giao diện luyện đọc từ khó 65

Hình 4.18 Giao diện luyện phát âm 66

Hình 4.19 Giao diện kiểm tra luyện tập 66

Hình 4.20 Giao diện kết quả kiểm tra luyện tập 67

Hình 4.21 Giao diện cài đặt giọng nói 68

Hình 4.22 Giao diện chuẩn bị kiểm tra trắc nghiệm 68

Hình 4.23 Giao diện chi tiết kiểm tra trắc nghiệm 69

Hình 4.24 Giao diện thảo luận 70

Hình 4.25 Giao diện thảo luận của tôi 70

Hình 4.26 Giao diện chi tiết thảo luận 71

Hình 4.27 Danh sách các màn hình và sơ đồ chuyển đổi trang người quản trị 72

Hình 4.28 Giao diện đăng nhập người quản trị 72

Hình 4.29 Giao diện chủ người quản trị 73

Hình 4.30 Giao diện danh sách từ vựng 74

Hình 4.31 Giao diện chỉnh sửa từ vựng 75

Hình 4.32 Giao diện thêm mới từ vựng 76

Hình 4.33 Giao diện danh sách ngữ pháp 76

Hình 4.34 Giao diện danh sách chủ đề từ vựng 77

Hình 4.35 Giao diện danh sách câu hỏi 78

Hình 4.36 Giao diện chỉnh sửa câu hỏi 78

Hình 4.37 Giao diện danh sách thành viên 79

Hình 4.38 Lược đồ tuần tự luyện tập từ vựng một chủ đề 80

Hình 4.39 Lược đồ tuần tự tạo tài khoản 81

Hình 4.40 Lược đồ tuần tự thêm câu hỏi 82

Hình 4.41 Lược đồ tuần tự thêm ngữ pháp 83

Hình 4.42 Lược đồ tuần tự tùy chình kiểm tra trắc nghiệm 84

Hình 4.43 Lược đồ tuần tự tùy chỉnh nội dung ngữ pháp 85

Hình 5.1 Cây thư mục dự án 1 86

Hình 5.2 Cây thư mục dự án 2 87

Bảng 2.1 Yêu cầu hệ thống 37

Bảng 2.2 Yêu cầu chất lượng (phi chức năng) 37

Bảng 2.3 Mô tả một số chức năng chính của hệ thống 38

Bảng 3.1 Nhận diện tác nhân và chức năng trong sơ đồ Use Case 39

Bảng 3.2 Mô tả Use Case luyện tập từ vựng một chủ đề 41

Bảng 3.3 Mô tả Use Case luyện đọc văn bản 42

Bảng 3.4 Mô tả Use Case Luyện đọc nhiều từ khó 43

Bảng 3.5 Mô tả Use Case Kiểm tra trắc nghiệm 44

Bảng 3.6 Mô tả Use Case Thêm ngữ pháp 45

Bảng 3.7 Mô tả Use Case Thêm câu hỏi 46

Bảng 3.8 Mô tả Use Case Thêm tài khoản 47

Bảng 4.1 Thuộc tính bảng answers 49

Bảng 4.2 Thuộc tính bảng class_vocas 49

Bảng 4.3 Thuộc tính bảng comments 49

Bảng 4.4 Thuộc tính bảng discusses 49

Bảng 4.5 Thuộc tính bảng hard_words 50

Bảng 4.6 Thuộc tính bảng lessions 50

Bảng 4.7 Thuộc tính bảng parts 50

Bảng 4.8 Thuộc tính bảng password_resets 51

Bảng 4.9 Thuộc tính bảng questions 51

Bảng 4.10 Thuộc tính bảng texts 51

Bảng 4.11 Thuộc tính bảng topic_lesses 52

Bảng 4.12 Thuộc tính bảng topic_vocas 52

Bảng 4.13 Thuộc tính bảng users 52

Bảng 4.14 Thuộc tính bảng user_voca 52

Bảng 4.15 Thuộc tính bảng vocas 53

Bảng 4.16 Thuộc tính bảng voices 53

Bảng 4.17 Chi tiết giao diện giới thiệu 54

Bảng 4.18 Chi tiết giao diện đăng nhập 55

Bảng 4.19 Chi tiết giao diện đăng ký 56

Bảng 4.20 Chi tiết giao diện trang chủ người dùng 56

Bảng 4.21 Chi tiết giao diện từ vựng theo chủ đề 58

Bảng 4.22 Chi tiết giao diện danh sách từ vựng 58

Bảng 4.23 Chi tiết giao diện luyện tập từ vựng 1 59

Bảng 4.24 Chi tiết giao diện luyện tập từ vựng 2 60

Bảng 4.25 Chi tiết giao diện danh sách ngữ pháp 60

Bảng 4.26 Chi tiết giao diện chi tiết ngữ pháp 61

Bảng 4.27 Chi tiết giao diện luyện nghe 61

Bảng 4.28 Chi tiết giao diện thêm văn bản luyện phát âm 62

Bảng 4.29 Chi tiết giao diện văn bản luyện phát âm của tôi 63

Bảng 4.30 Chi tiết giao diện từ khó 64

Bảng 4.31 Chi tiết giao diện luyện đọc từ khó 65

Bảng 4.32 Chi tiết giao diện luyện tập phát âm 66

Bảng 4.33 Chi tiết giao diện kiểm tra luyên tập 67

Bảng 4.34 Chi tiết giao diện kết quả kiểm tra luyện tập 67

Bảng 4.35 Chi tiết giao diện cài đặt giọng nói 68

Bảng 4.36 Chi tiết giao diện chuẩn bị kiểm tra trắc nghiệm 69

Bảng 4.37 Chi tiết giao diện kiểm tra trắc nghiệm 69

Bảng 4.38 Chi tiết giao diện thảo luận 70

Bảng 4.39 Chi tiết giao diện thảo luận của tôi 70

Bảng 4.40 Chi tiết giao diện chi tiết thảo luận 71

Bảng 4.41 Chi tiết giao diện admin đăng nhập 72

Bảng 4.42 Chi tiết giao diện chủ admin 73

Bảng 4.43 Chi tiết giao diện danh sách từ vựng 75

Bảng 4.44 Chi tiết giao diện chỉnh sửa từ vựng 75

Bảng 4.45 Chi tiết giao diện thêm mới từ vựng 76

Bảng 4.46 Chi tiết giao diện danh sách ngữ pháp 76

Bảng 4.47 Chi tiết giao diện danh sách chủ đề từ vựng 77

Bảng 4.48 Chi tiết giao diện danh sách câu hỏi 78

Bảng 4.49 Chi tiết giao diện chỉnh sửa câu hỏi 79

Bảng 4.50 Chi tiết giao diện danh sách thành viên 79

Bảng 5.1 Mô tả các thư mục chính trong dự án 87

Bảng 6.1 Bảng kiểm thử trang web 91

CSS, or Cascading Style Sheets, is a language used to style web pages, while HTML, or Hyper Text Markup Language, serves as the standard markup language for creating web content Additionally, PHP, which stands for Hypertext Preprocessor, is a server-side scripting language designed for web development and can be embedded within HTML.

1 Tính cấp thiết của đề tài

Với sự phát triển nhanh chóng của xã hội, nhu cầu học tiếng Anh ngày càng tăng, đặc biệt tại Việt Nam - một quốc gia đang phát triển còn thiếu nhiều địa chỉ học tiếng Anh miễn phí Hiện nay, việc ứng dụng công nghệ web như Laravel và Node.js để xây dựng website học tiếng Anh online miễn phí là rất cần thiết, đáp ứng nhu cầu học tập cho người mới bắt đầu Do đó, nhóm chúng tôi đã quyết định chọn đề tài "Xây dựng Website học tiếng Anh online dùng Laravel và Node.js" cho khóa luận tốt nghiệp.

2 Mục đích của đề tài

Tìm hiểu và ứng dụng các công nghệ chính như Laravel và Node.js, kết hợp với các công nghệ bổ trợ như Redis, Ioredis, Text to Speech và Web Speech API, là một phần quan trọng trong đề tài khóa luận tốt nghiệp.

Xây dựng một website giúp người Việt dễ dàng học tập, rèn luyện và trao đổi kiến thức tiếng Anh, từ đó thúc đẩy việc phổ cập tiếng Anh trong cộng đồng Mục tiêu là nâng cao tri thức và mở rộng cơ hội học tập cho người dân Việt Nam.

3 Cách tiếp cận và phương pháp nghiên cứu Đối tượng nghiên cứu:

- Các thành phần cơ bản để phát triển một ứng dụng web: HTML, CSS, Javascript

- Các nền tảng chính hỗ trợ xây dựng và phát triển ứng dụng web: Laravel, Node.js

- Các công nghệ bổ trợ khác: Ioredis, Redis, Web Speech API, Text to Speech

Phạm vi nghiên cứu của chúng tôi tập trung vào việc thiết kế một website học tiếng Anh cơ bản dành cho người mới bắt đầu Website này sẽ tích hợp nhiều tính năng hữu ích như cho phép người dùng tạo tài khoản và đăng nhập, học từ vựng và ngữ pháp, luyện nghe và phát âm, thực hiện các bài kiểm tra trắc nghiệm, cũng như tạo chủ đề thảo luận và bình luận.

4 Kết quả dự kiến đạt được

Khám phá kiến thức cơ bản về Laravel, Node.js và các công nghệ hỗ trợ cần thiết để xây dựng website học tiếng Anh cơ bản, với những tính năng nổi bật như giao diện thân thiện, khả năng tương tác cao và hệ thống quản lý nội dung hiệu quả.

- Có khả năng đáp ứng (responsive) trên nhiều thiết bị: máy tính xách tay, máy tính bảng, điện thoại

Ứng dụng này cung cấp các chức năng cơ bản cho người dùng, bao gồm đăng nhập, học từ vựng, ngữ pháp, luyện nghe và phát âm, làm bài kiểm tra trắc nghiệm, cũng như tạo chủ đề thảo luận và bình luận.

- Có những chức năng giúp ban quản trị quản lý tài nguyên như từ vựng, ngữ pháp, câu hỏi kiểm tra, tài khoản người dùng

- Giao diện website đơn giản, thân thiện, giản lược các thao tác người dùng.

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

CHƯƠNG 3: PHÂN TÍCH VÀ MÔ HÌNH HÓA YÊU CẦU

Node.js là nền tảng phát triển độc lập, được xây dựng trên Javascript Runtime của Chrome, cho phép xây dựng ứng dụng mạng một cách nhanh chóng và dễ dàng mở rộng.

Node.js được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại California, Hoa Kỳ [2]

Node.js được xây dựng chủ yếu bằng C++, mang lại hiệu suất và tốc độ xử lý cao Nhờ đó, Node.js có khả năng phát triển các ứng dụng nhanh chóng và hỗ trợ thời gian thực.

Node.js là lựa chọn lý tưởng cho các sản phẩm có lưu lượng truy cập cao, yêu cầu khả năng mở rộng nhanh chóng, cần đổi mới công nghệ, hoặc cho các dự án khởi nghiệp cần phát triển trong thời gian ngắn nhất.

Để cấu hình và khởi động một server Node.js, đầu tiên bạn cần nạp module http vào project Tiếp theo, tạo một server và truyền vào một hàm ẩn danh làm tham số, hàm này sẽ được gọi khi có kết nối mới Hàm nhận hai đối số: request, chứa thông tin yêu cầu từ người dùng, và response, chứa kết quả phản hồi gửi lại cho người dùng.

Chúng ta sẽ sử dụng đối tượng response để gửi một header tới người dùng với mã HTTP response 200 ("ok") và content type, kèm theo thông báo "Hello World!" Sau khi hoàn tất việc đặt nội dung phản hồi, cần đóng response lại.

Finally, we configure the server to listen for incoming requests on port 8080 and display a message in the command line console to indicate that the server is now active.

1.1.2 Tại sao nên sử dụng Node.js?

Các ứng dụng Node.js được viết bằng javascript, ngôn ngữ này là một ngôn ngữ khá mạnh mẽ và thông dụng

Node.js chạy đa nền tảng phía Server, sử dụng kiến trúc hướng sự kiện Event- driven, cơ chế non-blocking I/O làm cho nó nhẹ và hiệu quả [2]

Có thể chạy ứng dụng Node.js ở bất kỳ đâu trên máy Mac – Window – Linux, hơn nữa cộng đồng Node.js rất lớn và hoàn toàn miễn phí

Các ứng dụng Node.js đáp ứng tốt thời gian thực và chạy đa nền tảng, đa thiết bị

Giống như hầu hết các công nghệ mới, việc triển khai Node.js trên host không phải là điều dễ dàng

Một nhược điểm đáng chú ý của Node.js là nó vẫn đang trong giai đoạn phát triển ban đầu, dẫn đến khả năng một số tính năng có thể thay đổi trong tương lai.

1.1.4 Các công cụ chính [2] npm: Node.js là tất cả về module và đi kèm với đó là nhu cầu về một trình quản lý package chất lượng; cho mục đích này, npm đã được tạo ra Với npm là sự lựa chọn lớn nhất của các package do cộng đồng tạo ra trong bất kỳ môi trường lập trình nào, giúp việc xây dựng các ứng dụng Node.js trở nên nhanh chóng và dễ dàng gyp: Hệ thống xây dựng được xử lý bởi gyp, một trình tạo dự án dựa trên python được sao chép từ V8 Nó có thể tạo các tệp dự án để sử dụng với các hệ thống xây dựng trên nhiều nền tảng Node.js yêu cầu một hệ thống xây dựng vì phần lớn của nó - và các phụ thuộc của nó - được viết bằng các ngôn ngữ yêu cầu biên dịch gtest: Native code có thể được kiểm tra bằng gtest, được lấy từ Chromium Nó cho phép kiểm tra C/C ++ mà không cần một nút thực thi hiện có để Bootstrap từ đó

Tiêu đề	Xây Dựng Website Học Tiếng Anh Online Dùng Laravel Và Node.js
Tác giả	Bùi Quốc Việt, Nguyễn Tấn Tài
Người hướng dẫn	ThS. Nguyễn Trần Thi Văn
Trường học	Đại Học Sư Phạm Kỹ Thuật Tp.Hcm
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Khóa Luận Tốt Nghiệp Kỹ Sư Công Nghệ Thông Tin
Năm xuất bản	2019
Thành phố	Tp. Hồ Chí Minh

Định dạng
Số trang	118
Dung lượng	5,3 MB