đồ án 2 xây dựng website hỗ trợ học tiếng anh thông qua flashcard

GIỚI THIỆU ĐỀ TÀI

Lí do chọn đề tài

● Với sự phát triển hội nhập và toàn cầu hóa như hiện nay, không thể phủ nhận tiếng Anh là một ngôn ngữ phổ biến có sức ảnh hưởng trên rất nhiều khía cạnh công việc lẫn cuộc sống Do đó việc học tiếng Anh cũng phát triển rất mạnh theo tầm quan trọng của nó hiện tại, từ trẻ em đến người lớn đều có nhu cầu học tập ngôn ngữ này. Tiếng Anh giúp người học đạt được những lợi ích nhất định, nhưng để học được một ngôn ngữ mới người học cũng phải trải qua rất nhiều vấn đề khó khăn và thử thách. Một trong những vấn đề cơ bản nhất là việc học từ vựng, vì từ vựng là nền tảng cơ bản để phát triển các kỹ năng như nghe nói đọc viết Nhưng học làm sao cho hiệu quả, để nhớ lâu, để kiên trì theo đuổi mỗi ngày chính là câu hỏi trăn trở mỗi ngày cho mỗi người đang theo đuổi việc học tiếng Anh.

● Nhìn nhận được vấn đề đó, Website hỗ trợ học tiếng Anh qua flashcard được tạo ra để mang đến một phương pháp học hiệu quả và tiện lợi hơn Website tập trung giúp người đọc lưu trữ và sắp xếp từ vựng theo từng chủ đề, trong từng chủ đề sẽ có nhiều mức độ khác nhau, đồng thời cho phép người dùng tự tạo ra các chủ đề của riêng mình Thay vì sử dụng phương pháp học bằng flashcard giấy như bình thường người dùng có thể sử dụng nền tảng website để dễ dàng hơn trong việc lưu trữ, truy cập,đồng thời có nhiều tiện ích thú vị khác hỗ trợ cho việc học tập Website chủ yếu hỗ trợ người dùng ghi nhớ từ vựng thông qua flashcard và các trò chơi nhỏ khác, nhằm tạo ra nhiều phương thức ghi nhớ từ vựng đa dạng hơn thay vì cách học thuần túy nhàm chán.

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

Hiện này việc học tập ngôn ngữ là nhu cầu tất yếu và bắt buộc cho hầu hết mọi người từ trẻ em cho đến người lớn Chính vì vậy việc tìm kiếm một hình thức học tập hiệu quả đáp ứng được nhu cầu của người dùng là rất cần thiết Đó cũng là mục tiêu chính của đồ án Xây dựng website hỗ trợ học tiếng Anh qua Flashcard.

Việc học tập theo các phương pháp truyền thống ngày càng trở nên ít hứng thú hơn so với sự phát triển hiện đại đầy những điều mới mẻ Do vậy việc học cũng cần ngày càng phát triển kết hợp cùng với những ứng dụng công nghệ Nên cùng với nhu cầu của người dùng ngày càng nhiều, và sự phát triển không ngừng của của công nghệ, website chắc chắn sẽ ngày càng cần nhiều tính năng hơn nữa để phát triển.

Đối tượng và phạm vi nghiên cứu

1.3.1 Đối tượng hướng đến: Đối tượng hướng đến của website là những người có nhu cầu học từ vựng tiếng Anh như học sinh, sinh viên, du học sinh người đi làm,…Cũng như các cá nhân muốn tự học tiếng Anh cũng có thể sử dụng flashcard để tăng tính tương tác và linh hoạt Bên cạnh đó là quản trị viên, người quản lí cập kho từ vựng của hệ thống và dữ liệu của người dùng

Phạm vi nghiên cứu của dự án bao gồm các khía cạnh sau:

● Quản lí kho từ vựng của hệ thống: Điều này bao gồm quản lí thông tin về các phân loại từ vựng, các chủ đề, các bài học mà hệ thống cung cấp sẵn cho người dùng.

● Quản lí kho từ vựng của người dùng: có nghĩa là quản lí các bài học bao gồm các từ vựng mà người dùng tự nhập vào cũng như các thao tác thêm xóa, sửa.

● Quản lí lịch sử học tập của người dùng: thông qua các trò chơi đã có, hệ thống lưu lại các từ vựng được người dùng đánh dấu, các lịch sử kiểm tra bài học của người dùng, và cà cấp độ đầu vào người dùng được gợi ý.

● Quản lí thông tin của người dùng: Phạm vi này tập trung vào việc lưu trữ các thông tin như username, password, email.

Tổng quan về đồ án

● Tên Tiếng Việt: Xây dựng website hỗ trợ học tiếng Anh qua flashcard.

1.4.2 Link Github quản lí mã nguồn:

● https://github.com/ThaiPhungNg/EnglishVocabularyFlashcard

Yêu cầu hệ thống – mục đích của đồ án

Website học từ vựng tiếng Anh qua flashcard được xây dựng với mục tiêu cung cấp cho người dùng hệ thống từ vựng có sẵn cùng hình ảnh được minh họa, được sắp xếp phân loại rõ ràng Cũng như tạo thêm cho người dùng nền tảng không gian để tự tạo ra và lưu trữ những từ vựng riêng của mình Bên cạnh đó cũng cung cấp những phương pháp ghi nhớ thú vị hơn Từ đó giúp làm mới phương pháp học tiếng Anh qua flashcard giấy truyền thống, tiết kiệm thời gian và tăng hiệu quả cho người sử dụng Website ơhari đáp ứng được các yêu cầu cơ bản như sau:

● Xây dựng website trực quan, dễ sử dụng.

● Website có đầy đủ các chức năng cơ bản cần thiết.

● Website có giao diện hiện đại, thu hút.

● Dễ dàng quản lí hệ thống từ vựng (từ vựng, hình ảnh, định nghĩa).

● Hỗ trợ các phương thức học tập linh hoạt.

CƠ SỞ LÍ THUYẾT

Framework Boostrap 5

● Bootstrap là một framework mã nguồn mở hoàn toàn miễn phí được phát triển dựa trên các ngôn ngữ: HTML, CSS và Javascript Với Bootstrap, bạn hoàn toàn có thể phát triển một website với mức độ responsive cao trên nhiều thiết bị khác nhau.

● Qua 1 thập kỷ phát triển, phiên bản mới nhất của Bootstrap tại 6/12/2021 là Bootstrap 5.1.3 Từ logo, bộ tài liệu hướng dẫn cho đến những nâng cấp khác khiến Bootstrap 5 trở thành một trong những dấu mốc đặc biệt trong lịch sử phát triển của Bootstrap.

● Hủy bỏ jQuery: Bootstrap 5 đã loại bỏ sự phụ thuộc vào thư viện jQuery, thay vào đó sử dụng Vanilla JavaScript Điều này giúp giảm kích thước file và tăng tốc độ tải trang.

● Bootstrap Icons: Bootstrap 5 tích hợp sẵn một bộ biểu tượng (icon) mới, giúp bạn dễ dàng thêm các biểu tượng vào trang web mà không cần phải tải về các tài nguyên khác.

● Customizable CSS Variables: Bootstrap 5 sử dụng CSS biến, cho phép người phát triển tùy chỉnh dễ dàng các biến mà không cần phải chỉnh sửa mã nguồn Sass cốt lõi

● Dropped IE 10 and 11 Support: Bootstrap 5 không còn hỗ trợ Internet Explorer 10 và 11, tập trung hỗ trợ cho các trình duyệt hiện đại hơn.

● New Components: Một số thành phần mới được giới thiệu trong Bootstrap 5, bao gồm Card Components, List Components, và nhiều tính năng khác

● Responsive Font Sizes: Bootstrap 5 hỗ trợ việc sử dụng các class để điều chỉnh kích thước font chữ dựa trên kích thước màn hình, giúp tối ưu hóa trải nghiệm đọc trên các thiết bị khác nhau.

2.1.2 Ưu điểm, hạn chế của công nghệ Ưu điểm:

● Tốc độ website được cải thiện: loại bỏ Jquery ra khỏi code, Javacsript thuần làm chủ đạo, chất code được cải thiện nhiều đáng kể so với tiền nhiệm Boostrap 4.

● API được cập nhật toàn diện: Hệ thống grid đã nâng cấp và cải thiện có thể trông thấy, tăng thêm một tầng xxl mới cho grid, toàn bộ tùy chọn Layout đã bị thay thế bằng hệ thống grid mới, bổ sung thêm những class mới cho khoảng cách theo hướng dọc.

● Cải thiện tùy biến CSS: WPF được những biến cục bộ để có thể thiết kế một cách dễ dàng hơn, dễ dàng tiếp cận cho người sử dụng.

● Cộng đồng lớn: do được hình thành đã lâu và không ngừng phát triển, cập nhật, Boostrap đã tạo được những cộng đồng hữu ích và lớn mạnh trên các blog các kênh thông tin để hỗ trợ người dùng.

● Tương thích hiện đại: Bootstrap 5 hỗ trợ các trình duyệt hiện đại và loại bỏ hỗ trợ cho Internet Explorer 10 và 11.

● Đồng nhất quá mức: Mặc dù Bootstrap giúp tạo ra giao diện nhanh chóng và dễ dàng, nhưng một số trang web có thể trở nên khá giống nhau nếu không tùy chỉnh đủ Điều này có thể dẫn đến sự thiếu sáng tạo trong thiết kế.

● Kích thước file lớn: Dù có sự cố gắng tối ưu hóa, nhưng Bootstrap vẫn tạo ra một số file CSS và JavaScript lớn Điều này có thể ảnh hưởng đến tốc độ tải trang, đặc biệt là trên các kết nối internet chậm.

● Không Phù Hợp Cho Dự Án Nhỏ: Đối với các dự án nhỏ hoặc trang web cá nhân, việc sử dụng Bootstrap có thể làm tăng kích thước trang và không phải lúc nào cũng là lựa chọn tốt nhất.

● Khả năng bảo mật có thể bị ẩn đi: Việc sử dụng một framework nổi tiếng nhưBootstrap có thể làm cho trang web của bạn trở nên mục tiêu dễ bị tấn công hơn, vì các hacker thường tập trung vào các framework được sử dụng rộng rãi.

Công nghệ SQL Server

● Công nghệ SQL Server là một hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) được phát triển bởi Microsoft Nó cung cấp một nền tảng mạnh mẽ để lưu trữ, quản lí và truy vấn dữ liệu trong các ứng dụng.

● Quản lí cơ sở dữ liệu quan hệ: SQL Server hỗ trợ mô hình dữ liệu quan hệ, cho phép tạo, quản lí và tương tác với các bảng, quan hệ và ràng buộc giữa các đối tượng dữ liệu Điều này giúp đơn giản hóa việc thiết kế và quản lí cơ sở dữ liệu.

● Tích hợp với nền tảng Microsoft: SQL Server tích hợp tốt với các công nghệ và sản phẩm của Microsoft, bao gồm NET Framework, Azure, Visual Studio và các công cụ phát triển khác Điều này cung cấp sự linh hoạt và tiện ích cho việc phát triển ứng dụng trên nền tảng Microsoft.

● Bảo mật và quản lí quyền truy cập: SQL Server cung cấp các tính năng bảo mật mạnh mẽ như quản lí người dùng, phân quyền, mã hóa dữ liệu và kiểm tra độ tin cậy của cơ sở dữ liệu Điều này giúp bảo vệ dữ liệu quan trọng và đảm bảo tính toàn vẹn của hệ thống.

● Hiệu suất và tối ưu hóa: SQL Server cung cấp các công cụ và tính năng để tối ưu hóa hiệu suất truy vấn và xử lí dữ liệu Các chỉ mục, thống kê, tối ưu hóa truy vấn và quản lí tài nguyên giúp cải thiện tốc độ và hiệu suất của cơ sở dữ liệu.

● Dễ sử dụng và quản lí: SQL Server cung cấp giao diện quản lí đồ họa (SQL Server Management Studio) cho phép quản lí và giám sát cơ sở dữ liệu dễ dàng Nó cũng cung cấp các công cụ lập trình và ngôn ngữ truy vấn SQL dễ hiểu và linh hoạt.

● Hỗ trợ mở rộng và khả năng mở: SQL Server hỗ trợ các tính năng mở rộng như lập trình nhúng (stored procedures, functions), triggers và khả năng tùy chỉnh để tương thích với các nhu cầu cụ thể của ứng dụng.

2.2.2 Ưu điểm, hạn chế của công nghệ Ưu điểm:

● Tin cậy và bảo mật: SQL Server cung cấp các công cụ và tính năng mạnh mẽ để bảo vệ và bảo mật dữ liệu Nó hỗ trợ các cơ chế xác thực, phân quyền, mã hóa dữ liệu và kiểm tra tính toàn vẹn Điều này đảm bảo rằng dữ liệu quan trọng được bảo vệ khỏi truy cập trái phép và mất mát.

● Hiệu suất cao và tối ưu hóa: SQL Server được tối ưu hóa để cung cấp hiệu suất tốt cho việc xử lí dữ liệu và truy vấn Nó cung cấp các công cụ tối ưu hóa truy vấn, chỉ mục, thống kê và quản lí tài nguyên để đảm bảo tốc độ truy vấn nhanh chóng và khả năng mở rộng.

● Quản lí dữ liệu linh hoạt: SQL Server hỗ trợ mô hình dữ liệu quan hệ, cho phép tạo và quản lí các bảng, quan hệ và ràng buộc dữ liệu Nó cung cấp các tính năng mạnh mẽ như khóa ngoại, xử lí sự kiện (triggers), và các chức năng lưu trữ (stored procedures) để quản lí dữ liệu một cách linh hoạt và hiệu quả.

● Tích hợp và khả năng mở rộng: SQL Server tích hợp tốt với các công nghệ và sản phẩm của Microsoft, như NET Framework, Visual Studio và Azure Nó cũng hỗ trợ các tiêu chuẩn ngành như ANSI SQL và XML, giúp dễ dàng tích hợp và truy xuất dữ liệu từ các nguồn khác nhau SQL Server cũng có khả năng mở rộng để đáp ứng các nhu cầu của các ứng dụng lớn và tải trọng cao.

● Công cụ quản lí và giám sát: SQL Server cung cấp giao diện quản lí đồ họa(SQL Server Management Studio) cho phép quản lí và giám sát cơ sở dữ liệu dễ dàng Nó cung cấp các công cụ và báo cáo cho việc giám sát hiệu suất, thiết lập sao lưu, quản lí phiên bản và theo dõi sự kiện hệ thống.

● Hỗ trợ và cộng đồng: SQL Server có một cộng đồng lớn và năng động, với nhiều tài liệu, diễn đàn và tài nguyên hữu ích Nó cũng được hỗ trợ bởi Microsoft với các bản cập nhật, bản vá lỗi và tài liệu chính thức, giúp đảm bảo sự ổn định và bảo trì của hệ thống.

● Giá cả và cấp phí: SQL Server là một sản phẩm phần mềm có giá trị cao, đặc biệt đối với các phiên bản và tính năng cao cấp Ngoài ra, Microsoft cũng áp dụng mô hình cấp phí cho việc sử dụng SQL Server, bao gồm cả giấy phép và hỗ trợ kỹ thuật Điều này có thể tạo áp lực tài chính cho các tổ chức và dự án nhỏ.

● Độ phổ biến và đa nền tảng: SQL Server chủ yếu hỗ trợ trên hệ điều hành Windows, vì vậy nó không phải là một giải pháp lí tưởng cho các ứng dụng đa nền tảng hoặc cần chạy trên hệ điều hành khác như Linux hoặc macOS Điều này giới hạn khả năng triển khai của SQL Server trong một số trường hợp.

PHÂN TÍCH THIẾT KẾ HỆ THỐNG

Use-case của đồ án

Hình 3 1 Sơ đồ use-case người dùng

Hình 3 2 Sơ đồ use-case quản trị viên

Bảng 3 1 Bảng danh sách actors

Use-case Mô tả ngắn/ Ghi chú

1 Người dùng Tác nhân sử dụng hệ thống để học tập từ vựng từ hệ thống và tự tạo ra những từ vựng riêng của mình để học tập.

2 Quản trị viên Một actor có thể quản lí kho từ vựng của hệ thống và những thông tin của người dùng.

Bảng 3 2 Bảng danh sách chức năng

Use-case Mô tả ngắn/Ghi chú

1 Đăng nhập Truy cập vào hệ thống với tài khoản đã được đăng ký trước đó.

2 Đăng ký Tác nhân truy cập vào hệ thống, điền những thông tin cần thiết để đăng ký tài khoản.

3 CRUD từ vựng của người dùng

Người dùng đã đăng ký tài khoản trước đó có thể tự tạo các bài học và lưu trữ từ vựng của cá nhân một các tự do với các thao tác thêm, xóa, sửa.

4 Kiểm tra đầu vào Người dùng với lần đăng nhập đầu tiên vào hệ thống sẽ được làm bài kiểm tra đầu vào để gợi ý cấp độ học cho người dùng.

5 Ôn tập vựng qua flashcard

Hiển thị các thẻ từ vựng bao gồm hai mặt cho người dùng học tập, có thể đánh dấu lại từ vựng khó nếu cần.

6 Ôn tập từ vựng qua trắc nghiệm

Hiển thị các câu hỏi trắc nghiệm để kiểm tra sự ghi nhớ của người dùng sau khi đã học từ vựng, sau đó đưa ra kết quả để đánh giá người dùng có hoàn thành bài học hay chưa.

7 Ôn tập từ qua hoàn thành từ

Hiển thị câu hỏi là một từ vựng bị đảo lộn các kí tự, người dùng điền đáp án bằng cách sắp xếp lại thành từ vựng đúng.

8 Ôn tập qua trò chơi tìm từ

Hiển thị các thẻ có mặt trước trống nội dung, mặt sau của các thẻ có thể là hình ảnh hoặc từ vựng Người dùng cần tìm cặp thẻ tương ứng nhau.

9 Thống kê quá trình học

Người dùng sẽ được xem các biểu đồ thể hiện quá trình học tập của mình.

10 Xem và chỉnh sửa thông tin người dùng

Người dùng được cập nhật lại các thông tin như email, mật khẩu.

11 Quản lí kho từ vựng của hệ thống

Quản trị viên quản lí kho từ vựng của hệ thống bao gồm các chủ đề, các bài học, các từ vựng.

12 Quản lí thông tin của người dùng Quản trị viên quản lí thông tin dữ liệu của người dùng.

3.1.4 Đặc tả các chức năng

Bảng 3 3 Bảng use-case “Đăng nhập”

Actor Quản trị viên, Người dùng.

Preconditions Tác nhân truy cập vào website và đã có tài khoản để đăng nhập trước đó.

Basic flow 1) Truy cập vào website.

2) Nhập tên người dùng/mật khẩu.

2) Đăng ký một tài khoản.

3) Nhập thông tin cá nhân.

1) Khi người dùng truy cập thành công vào hệ thống, mỗi UI phù hợp với từng tác nhân phải xuất hiện trên màn hình.2) Khi người dùng không truy cập được, phải xuất hiện cảnh báo cho người dùng biết lí do không vào được hệ thống (tài khoản/mật khẩu không đúng, tài khoản không tồn tại…) Extension Không có

Bảng 3 4 Bảng use-case “Đăng ký”

Basic flow 1) Người dùng truy cập vào website

2) Nhập các thông tin cơ bản 3) Tạo một tài khoản

Alternative flow 1) Truy cập vào website

2) Nhập tên người dùng/mật khẩu 3) Truy cập hệ thống

Post conditions Người dùng nhập đúng định dạng thông tin theo yêu cầu. Extension Không có

● Use-case “CRUD từ vựng của người dùng”

Bảng 3 5 Bảng use-case “CRUD từ vựng của người dùng”

Preconditions Người dùng cần đăng nhập vào hệ thống trước đó.

Basic flow 1) Hiển thị danh sách bài học

2) Người dùng có thể thực hiện các thao tác CRUD.

3) Hiển thị danh sách các từ vựng của một bài học mà người dùng đã chọn.

4) Người dùng có thể thực hiện các thao tác CRUD từ vựng.

5) Hệ thống lưu trữ lại các thay đổi từ người dùng.

1) Hiển thị danh sách bài học.

2) Người dùng chọn xem chi tiết bài học.

3) Hiển thị danh sách từ vựng.

4) Người dùng chọn ôn tập với các từ vựng đang chọn.

5) Hiển thị các hình thức ôn tập.

6) Chuyển đến trang hình thức ôn tập mà người dùng đã chọn. Post conditions

Khi người dùng thực hiện use-case này, cần thông báo người dùng đã thực hiện các thao tác CRUD thành công và lưu trữ lại thay đổi.

● Use-case “Kiểm tra đầu vào”

Bảng 3 6 Bảng use-case “Kiểm tra đầu vào”

Preconditions Người dùng đã đăng nhập vào hệ thống và chọn kiểm tra. Basic flow 1) Người dùng đăng nhập vào hệ thống.

2) Click vào các chủ đề bị khóa và được hệ thống đề xuất thực hiện bài kiểm tra.

3) Người dùng thực hiện bài kiểm tra 4) Hệ thống thông báo kết quả cho người dùng Alternative flow Không có

Post conditions Hệ thống phải gợi ý đúng cấp độ tương ứng với số câu trả lời đúng của người dùng.

Extension Người dùng được gợi ý cấp độ học và mở khóa các cấp độ trước đó,

● Use-case “Học từ vựng qua flashcard”

Bảng 3 7 Bảng use-case “Ôn tập từ vựng qua flashcard”

Preconditions Người dùng đã đăng nhập vào hệ thống, cần phải chọn bài học từ hệ thống hoặc của người dùng để học.

Basic flow 1) Người dùng chọn bài học từ hệ thống hoặc của cá nhân người dùng.

2) Người dùng chọn hình thức học qua flashcard trong bốn hình thức được gợi ý.

3) Hiển thị màn hình học qua flashcard.

1) Người dùng chọn bài học từ hệ thống hoặc của cá nhân người dùng.

2) Người dùng chọn hình thức học khác ngoài flashcard trong bốn hình thức được gợi ý.

3) Hiển thị màn hình học của hình thức đó.

Extension Người dùng có thể đánh dấu lại từ vựng khó và lưu lại trong bài học của người dùng.

● Use-case “Ôn tập từ vựng qua trắc nghiệm”

Bảng 3 8 Bảng use-case “Ôn tập từ vựng qua trắc nghiệm”

Preconditions Người dùng đã đăng nhập vào hệ thống và chọn bài học của người dùng hoặc hệ thống.

Basic flow 1) Người dùng chọn hình thức học tập trắc nghiệm trong bốn hình thức.

2) Hệ thống hiển thị các câu hỏi3) Người dùng nhận được kết quảAlternative 1) Người dùng chọn bài học từ hệ thống hoặc của cá nhân flow người dùng.

2) Người dùng chọn hình thức học khác ngoài trắc nghiệm trong bốn hình thức được gợi ý.

Extension Người dùng được mở khóa bài học tiếp theo nếu thực hiện đạt trên 70% câu trả lời.

● Use-case “Ôn tập từ vựng qua hoàn thành từ”

Bảng 3 9 Bảng use-case “Ôn tập từ vựng qua hoàn thành từ”

Preconditions Người dùng cần đăng nhập vào hệ thống trước đó và chọn bài học của người dùng hoặc hệ thống.

Basic flow 1) Người dùng chọn hình thức học tập hoàn thành từ trong bốn hình thức.

2) Hệ thống hiển thị một thị từ vựng với các kí tự bị đổi thứ tự.

3) Người dùng điền kết quả lần lượt cho đến hết bài học. Alternative flow

● Use-case “Ôn tập từ vựng qua tìm từ”

Bảng 3 10 Bảng use-case “Ôn tập từ vựng qua tìm từ”

Preconditions Người dùng cần đăng nhập vào hệ thống trước đó và chọn bài học của người dùng hoặc hệ thống.

Basic flow 1) Người dùng chọn hình thức học tìm từ trong bốn hình thức.

2) Hệ thống hiển thị các thẻ mặt trước không có nội dung, và mặt sau là từ vựng hoặc hình ảnh.

3) Người dùng lần lượt tìm các cặp thẻ tương ứng nhau.

● Use-case “Thống kê quá trình học”

Bảng 3 11 Bảng use-case “Thống kê quá trình học”

Preconditions Người dùng đã đăng nhập vào hệ thống

Basic flow 1) Người dùng truy cập vào trang người dùng.

2) Người dùng chọn trang biểu đồ để xem thông tin về quá trình học của người dùng.

1) Chọn Tài khoản người dùng.

2) Chọn các thao tác khác trong trang người dùng.

● Use-case “Chỉnh sửa thông tin người dùng”

Bảng 3 12 Bảng use-case “Chỉnh sửa thông tin người dùng”

Preconditions Người dùng đã đăng nhập vào hệ thống

Basic flow 1) Người dùng truy cập vào trang người dùng.

2) Người dùng chọn trang thông tin cá nhân để xem thông tin về quá trình học.

3) Người dùng thực hiện các chỉnh sửa trên các trường thông tin được cho phép.

4) Hệ thống lưu lại thông tin được cập nhật.

Alternative flow 1) Chọn Tài khoản người dùng.

2) Chọn các thao tác khác trong trang người dùng.

● Use-case “Quản lí kho từ vựng của hệ thống”

Bảng 3 13 Bảng use-case “Quản lí kho từ vựng của hệ thống”

Preconditions Quản trị viên cần đăng nhập vào hệ thống.

Basic flow 1) Chọn phần quản lí từ vựng.

2) Hiển thị danh sách các chủ đề.

3) Hiển thị danh sách các từ vựng.

6) Hệ thống lưu trữ lại các thay đổi.

1) Hiển thị giao diện Admin.

2) Người dùng chọn xem chi tiết thông tin dữ liệu của người dùng.

Khi người dùng thực hiện use-case này, cần thông báo người dùng đã thực hiện các thao tác CRUD thành công và lưu trữ lại thay đổi.

● Use-case “Quản lí thông tin của người dùng”

Bảng 3 14 Bảng use-case “Quản lí thông tin người dùng”

Preconditions Quản trị viên cần đăng nhập vào hệ thống.

Basic flow 1) Chọn phần quản lí dữ liệu người dùng.

2) Hiển thị danh sách người dùng hiện tại và một số thông tin khác.

1) Hiển thị giao diện Admin.

2) Người dùng chọn phần quản lí từ vựng của hệ thống.

Sơ đồ hoạt động

● Sơ đồ Đăng nhập/Đăng ký

Hình 3 3 Sơ đồ đăng nhập/ đăng ký

● CRUD từ vựng của người dùng

Hình 3 4 Sơ đồ CRUD từ vựng của người dùng

Hình 3 5 Sơ đồ kiểm tra đầu vào

● Ôn tập từ vựng qua flashcard

Hình 3 6 Sơ đồ ôn tập từ vựng qua flashcard

● Ôn tập từ vựng qua trắc nghiệm

Hình 3 7 Sơ đồ ôn tập từ vựng qua trắc nghiệm

● Ôn tập từ vựng qua hoàn thành từ

Hình 3 8 Sơ đồ ôn tập từ vựng qua hoàn thành từ

● Ôn tập từ vựng qua trò chơi tìm từ

Hình 3 9 Sơ đồ ôn tập từ qua trò chơi tìm từ

● Thống kê quá trình học

Hình 3 10 Sơ đồ thống kê quá trình học

● Xem và chỉnh sửa thông tin người dùng

Hình 3 11 Sơ đồ chỉnh sửa thông tin người dùng

● Quản lí kho từ vựng của hệ thống

Hình 3 12 Sơ đồ quản lí kho từ vựng của hệ thống

● Quản lí thông tin của người dùng

Hình 3 13 Sơ đồ quản lí thông tin của người dùng

Thiết kế kiến trúc

3.3.1 Tổng quan về kiến trúc ứng dụng

Hình 3 14 Sơ đồ kiến trúc MVC

Bảng 3 1 Bảng miêu tả thành phần hệ thống

Modal (M) Là bộ phận có chức năng lưu trữ toàn bộ dữ liệu của ứng dụng Bộ phận này là một cầu nối giữa 2 thành phần bên dưới là View và Controller Model thể hiện dưới hình thức là một cơ sở dữ liệu hoặc có khi chỉ đơn giản là một file XML bình thường Model thể hiện rõ các thao tác với cơ sở dữ liệu như cho phép xem, truy xuất, xử lí dữ liệu,…

View (V) Đây là phần giao diện (theme) dành cho người sử dụng Nơi mà người dùng có thể lấy được thông tin dữ liệu của MVC thông qua các thao tác truy vấn như tìm kiếm hoặc sử dụng thông qua các website.

Thông thường, các ứng dụng web sử dụng MVC View như một phần của hệ thống, nơi các thành phần HTML được tạo ra Bên cạnh đó, View cũng có chức năng ghi nhận hoạt động của người dùng để tương tác với Controller Tuy nhiên, View không có mối quan hệ trực tiếp với Controller, cũng không được lấy dữ liệu từ Controller mà chỉ hiển thị yêu cầu chuyển cho Controller mà thôi.

Bộ phận có nhiệm vụ xử lí các yêu cầu người dùng đưa đến thông qua view Từ đó, C đưa ra dữ liệu phù hợp với người dùng Bên cạnh đó, Controller còn có chức năng kết nối với model.

3.3.2 Kiến trúc ứng dụng chi tiết

Hình 3 15 Sơ đồ kiến trúc hệ thống

Bảng 3 2 Bảng miêu tả chi tiết kiến trúc

VocabularyUser Từ vựng của người dùng

Vocabulary Từ vựng của hệ thống

LessonUser Bài học của người dùng

Lesson Bài học của hệ thống

Learning System Các trò chơi mà người dùng có thể sử dụng để ôn tậpTheme Các chủ đề chứa các bài học

Thiết kế dữ liệu

Hình 3 16 Sơ đồ hệ thống

3.4.2 Mô tả chi tiết các kiểu dữ liệu trong sơ đồ logic

STT Tên thuộc tính Loại dữ liệu Mô tả

1 username nvarchar(128) có giá trị

2 password vnarchar(max) có giá trị

3 fullname nvarchar(max) có giá trị

4 dob datetime có giá trị

5 phone nvarchar(max) có giá trị

6 email nvarchar(max) có giá trị

7 address nvarchar(max) có giá trị

8 gender nvarchar(max) có giá trị

9 avatar nvarchar(max) có giá trị

Tên thuộc tính loại dữ liệu mô tả

2 name nvarchar(max) có giá trị

3 description nvarchar(max) có giá trị

4 totalword int có giá trị

6 image nvarchar(max) có giá trị

Tên thuộc tính Loại dữ liệu Mô tả

1 studyhistoryid int có giá trị

2 type nvarchar(max) có giá trị

3 username nvarchar(128) có giá trị

5 numberlearnedword int có giá trị

1 wordid int có giá trị

2 pronunciation nvarchar(max) có giá trị

3 definition nvarchar(max) có giá trị

4 partofspeech nvarchar(max) có giá trị

5 imgaeorsynonym nvarchar(max) có giá trị

1 studyhisid varchar(4) có giá trị

2 type nvarchar(max) có giá trị

3 username nvarchar9(128) có giá trị

4 lessoninfoid int có giá trị

5 numberlearnedword int có giá trị

1 lessoninfoid int có giá trị

1 wordid int có giá trị

2 pronunciation nvarchar(max) có giá trị

3 definition nvarchar(max) có giá trị

4 partofspeech nvarchar(max) có giá trị

5 imageorsynonym nvarchar(max) có giá trị

1 categories int có giá trị

4 totaltheme int có giá trị

5 typeofcategory varchar(4) có giá trị

6 image varchar(4) có giá trị

1 themeid int có giá trị

2 categoryid int có giá trị

5 totalleson int có giá trị

6 image nvarchar(max) có giá trị

KẾT QUẢ TRIỂN KHAI

Danh sách màn hình

Bảng 4 1 Bảng Danh sách màn hình

TÊN THUỘC TÍNH MÔ TẢ

1 LandingPage Màn hình chính giới thiệu về trang web

2 ThemeShowing Màn hình dùng để thể hiện các chủ đề từ vựng

3 SignUp Màn hình đăng ký

4 SignIn Màn hình đăng nhập

5 LessonList Danh sách các bài học của một chủ đề

6 StudyMethod Lựa chọn phương thức học tập

7 VocabularyList Danh sách từ vựng của một bài học

8 FlashcardLearning Hình thức ôn tập từ vựng qua flashcard

9 WordScramble Hình thức ôn tập từ qua điền từ

10 MatchingGame Hình thức ôn tập qua tìm từ tương thích

11 QuizLearning Hình thức ôn tập qua câu hỏi trắc nghiệm

12 UserInformation Màn hình hiển thị thông tin cá nhân người dùng

13 UserLesson Màn hình bài học của người dùng

14 User Vocabulary Màn hình cho người dùng nhập danh sách từ vựng

15 EntryTest Màn hình kiểm tra đầu vào

16 Graph Màn hình biểu đồ thể hiện thông tin quá trình học tập của người dùng.

17 SignInAdmin Màn hình đăng nhập dành cho admin

18 UserManagement Màn hình quản lí thông tin người dùng.

19 ThemeSystemManagement Màn hình quản lí chủ đề hệ thống

20 AddThemeModal Điền thông tin chủ đề mới cho hệ thống

Màn hình quản lí từ vựng của hệ thống

22 AddVocabularyModal Điền thông tin từ vựng mới cho hệ thống

Màn hình chi tiết

Hình 4 1 Màn hình trang chủ

Bảng 4 2 Chi tiết màn hình trang chủ

TÊN KIỂU TÍNH NĂNG GỌI

Chuyển đến trang đăng nhập Nhấn vào nút

Chuyển đến trang đăng ký Nhấn vào nút

3 text-container Div Thể hiện thông tin giới thiệu về trang web

Butto n Điều hướng đến khu vực chủ đề Nhấn vào nút

5 slider Div Hiệu ứng hình ảnh slide cho website

Hình 4 2 Màn hình các chủ đề

Bảng 4 3 Chi tiết màn hình các chủ đề

Chuyển đến trang tạo từ vựng riêng của người dùng

Hiển thị tất cả các chủ đề Nhấn vào nút

Hiển thị tất cả các chủ đề thuộc loại từ vựng Specialised Vocabulary

Hiển thị tất cả các chủ đề thuộc loại từ vựng CEFR

5 special-btn Butto n Hiển thị tất cả các chủ đề thuộc loại từ vựng thuộc Idioms Nhấn vào nút

Hình 4 3 Màn hình đăng ký

Bảng 4 4 Chi tiết màn hình đăng ký

Nhập email đăng ký Nhập dữ liệu

Nhập tên người dùng Nhập dữ liệu

Nhập mật khẩu Nhập dữ liệu

Xác nhận lại mật khẩu đã nhập

5 signUp-btn Button Xác nhận đăng ký Nhấn vào nút

6 signIn-btn Button Chuyển đến trang đăng nhập

Hình 4 4 Màn hình đăng nhập

Bảng 4 5 Chi tiết màn hình đăng nhập

Nhập mật khẩu Nhập dữ liệu

3 signIn-btn Button Chuyển đến trang đăng nhập Nhấn vào nút

4 forgorPass-btn Button Chuyển đến form quên mật khẩu

3 signUp-btn Button Chuyển đến trang đăng ký Nhấn vào nút

Hình 4 5 Màn hình danh sách bài học

Bảng 4 6 Chi tiết màn hình danh sách bài học

Chuyển đến trang người dùng Nhấn vào nút

Chuyển đến trang danh sách bài học của người dùng

Chuyển đến trang đăng nhập Nhấn vào nút

Chuyển đến trang chính Nhấn vào nút

5 Lesson-card Card Thể hiện nội dung bài học

Chuyển đến danh sách từ vựng của bài học hiện tại

7 learn-btn Butto n Chuyển đến danh sách các hình thức học tập Nhấn vào nút

Hình 4 6 Màn hình lựa chọn các hình thức ôn tập từ vựng

Bảng 4 7 Chi tiết màn hình lựa chọn các hình thức ôn tập từ vựng

Chuyển đến trang học từ vựng qua flashcard

Chuyển đến trang học từ vựng qua điền từ

Chuyển đến trang học từ vựng qua tìm từ

Chuyển đến trang học từ vựng qua trắc nghiệm

Hình 4 7 Màn hình danh sách từ vựng

Bảng 4 8 Chi tiết màn hình danh sách từ vựng

Chuyển đến trang chính Nhấn vào nút

Chuyển đến danh sách các hình thức học tập

Card Thể hiện nội dung từ vựng

4 read-btn Butto n Đọc từ vựng đang có trong thẻ từ vựng

Hình 4 8 Màn hình thông tin nhân viên

Bảng 4 9 Chi tiết màn hình thông tin nhân viên

Button Chuyển đến trang người dùng

2 flip-btn Button Lật mặt sau của flashcard Nhấn vào nút

Button Đánh dấu từ vựng đã biết Nhấn vào nút

Radio Button Đánh dấu từ vựng chưa biết

Text Hiển thị số lượng từ vựng khó mà người dùng đã đánh dấu

Chọn vào nút “Don’t know”, text sẽ thay đổi theo

Hình 4 9 Màn hình học từ vựng qua điền từ

Bảng 4 10 Chi tiết màn hình học từ vựng qua điền từ

Text Hiển thị từ đã được đảo lộn thứ tứ các chữ cái

2 hint-txt Text Hiển thị gợi ý cho từ đang hiển thị ở trên

3 answer-input Input Nhập câu trả lời Nhập dữ liệu

Chọn một từ vựng khác Nhấn vào nút

Kiểm tra câu trả lời đúng hay sao

Hình 4 10 Màn hình ôn tập từ qua tìm từ

Bảng 4 11 Chi tiết màn hình ôn tập từ qua tìm từ

Bắt đầu load các thẻ từ và tính thời gian

Tắt trò chơi hiện tại Nhấn vào nút

Thu hẹp khung trò chơi Nhấn vào nút

Mở rộng khu trò chơi Nhấn vào nút

5 move-txt Text Hiển thị số lượng các bước đi của người dùng

Người dùng chọn một cập thẻ bước đi tăng lên một

6 time-txt Text Hiển thị thời gian Khi bắt trò chơi thời gian sẽ bắt đầu đếm

Hình 4 11 Màn hình ôn tập từ vựng qua trắc nghiệm

Bảng 4 12 Chi tiết màn hình ôn tập từ vựng qua trắc nghiệm

T TÊN KIỂU TÍNH NĂNG GỌI

1 time-txt Text Hiển thị thời gian Khi bắt trò chơi thời gian sẽ bắt đầu đếm

Text Hiển thị định nghĩa của từ như câu hỏi

Hiển thị các đáp án

Hình 4 12 Màn hình thông tin cá nhân của người dùng

Bảng 4 13 Chi tiết màn hình thông tin cá nhân của người dùng

1 avt-img Image Ảnh đại diện của người dùng

2 upload-btn Button Thay đổi ảnh đại diện Nhấn vào nút

Nhập email đăng ký Nhập dữ liệu

Nhập mật khẩu hiện tại Nhập dữ liệu

Nhập mật khẩu mới Nhập dữ liệu

Xác nhận lại mật khẩu mới Nhập dữ liệu

8 save-btn Button Lưu những thay đổi Nhấn vào nút

9 profile-btn Button Load lại trang thông tin cá nhân hiện tại Nhấn vào nút

10 userLesson- btn Button Chuyển đến trang bài học của người dùng Nhấn vào nút

11 graph-btn Button Chuyển đến trang biểu đồ Nhấn vào nút

12 signOut-btn Button Chuyển đến trang đăng nhập Nhấn vào nút

Hình 4 13 Màn hình danh sách bài học của người dùng

Bảng 4 14 Chi tiết danh sách bài học của người dùng

1 upload-btn Button Thay đổi ảnh đại diện Nhấn vào nút

3 close-btn Button Đóng trang hiện tại Nhấn vào nút

4 add-btn Button Xác nhận thêm bài học Nhấn vào nút

5 addTrigger-btn Button Hiển thị form thông tin của bài học mới

Hình 4 14 Màn hình danh sách từ vựng của người dùng

Bảng 4 15 Chi tiết màn hình danh sách từ vựng của người dùng

1 add-btn Button Thêm form điền cho mỗi từ vựng Nhấn vào nút

2 save-btn Button Lưu tất cả thay đổi Nhấn vào nút

3 learn-btn Button Hiển thị các hình thức ôn tập Nhấn vào nút

Nhập từ vựng Nhập dữ liệu

Nhập phát âm của từ vựng Nhập dữ liệu

Nhập loại từ Nhập dữ liệu

Nhập định nghĩa của từ Nhập dữ liệu

8 upload-btn Button Thêm ảnh cho từ Nhấn vào nút

9 delete-btn Button Xóa từ vựng hiện tại Nhấn vào nút

10 back-btn Button Chuyển về trang bài học của người dùng

Hình 4 15 Màn hình bài kiểm tra đầu vào cho người dùng

Bảng 4 16 Chi tiết màn hình bài kiểm tra đầu vào cho người dùng

1 time-txt Text Hiển thị thời gian

Text Hiển thị câu hỏi

Người dùng chỉ được chọn một trong bốn đáp án

Hình 4 16 Màn hình biểu đồ học tập của người dùng

Bảng 4 17 Chi tiết màn hình biểu đồ học tập của người dùng

Chart Thể hiện số lượng bài học người dùng đã học trong hệ thống hoặc trong bài học của người dùng

Table Thể hiện số lượng câu trả lời đúng mà người dùng đã làm qua các bà kiê

Hình 4 17 Màn hình đăng nhập dành cho quản trị viên

Bảng 4 18 Chi tiết màn hình đăng nhập dành cho quản trị viên

2 pass-input Textbo x Nhập dữ liệu Nhập dữ liệu

3 signIn-btn Button Xác nhận đăng nhập Nhấn vào nút

Hình 4 18 Màn hình quản lí thông tin người dùng Bảng 4 19 Chi tiết màn hình quản lí thông tin người dùng

ST TÊN KIỂU TÍNH NĂNG GỌI

1 userInfo-table Table Hiển thị thông tin người dùng

Load lại dữ liệu của trang thông tin người dùng

Chuyển đến trang quản lí từ vựng Nhấn vào nút

Chuyển đến đầu trang Nhấn vào nút

5 search-btn Butto n Tìm người dùng Nhập dữ liệu

Hình 4 19 Màn hình quản lí chủ đề của hệ thống

Bảng 4 20 Chi tiết màn hình quản lí chủ đề của hệ thống

Hiển thị danh sách các loại từ vựng

Hiển thị danh sách chủ đề cho loại từ vựng cefr

Hiển thị danh sách chủ đề cho loại từ vựng specialised

4 idiom-btn Butto n Hiển thị danh sách chủ đề cho loại từ vựng idiom Nhấn vào nút

Hiển thị modal thêm chủ đề Nhấn vào nút

6 editTheme-btn Butto n Hiển thị modal sửa chủ đề Nhấn vào nút

7 viewVocab-btn Butto n Hiển thị danh sách từ vựng của chủ đề đã chọn Nhấn vào nút

Xóa chủ đề đã chọn Nhấn vào nút

Hình 4 20 Màn hình thêm chủ đề cho hệ thống

Bảng 4 21 Chi tiết màn hình thêm chủ đề cho hệ thống

1 close-btn Button Đóng modal Nhấn vào nút

2 upload-btn Button Thêm ảnh cho chủ đề Nhấn vào nút

Thêm tên cho chủ đề Nhập dữ liệu

4 desTheme-input Textbo x Thêm miêu tả cho chủ đề Nhập dữ liệu

6 add-btn Button Xác nhận lưu những thay đổi

Hình 4 21 Màn hình quản lí từ vựng của hệ thống

Bảng 4 22 Chi tiết màn hình quản lí từ vựng của hệ thống

ST TÊN KIỂU TÍNH NĂNG GỌI

Hiển thị danh sách các chủ đề

Hiển thị modal thêm từ vựng

3 editVocab-btn Butto n Hiển thị modal sửa từ vựng Nhấn vào nút

Xóa chủ từ vựng Nhấn vào nút

Hình 4 22 Màn hình thêm từ vựng cho hệ thống

Bảng 4 23 Chi tiết màn hình thêm từ vựng cho hệ thống

STT TÊN KIỂU TÍNH NĂNG GỌI

2 upload-btn Button Thêm ảnh cho chủ đề

3 vocab-input Textbox Thêm từ vựng Nhập dữ liệu

4 pro-input Textbox Thêm phát âm cho từ vựng Nhập dữ liệu

5 pos-btn Textbox Thêm loại từ Nhập dữ liệu

6 def-btn Textbox Thêm định nghĩa cho từ

8 add-btn Button Xác nhận lưu thêm từ vựng Nhấn vào nút

Định dạng
Số trang	71
Dung lượng	4,41 MB