Thiết kế website hỗ trợ học tiếng Anh thông qua công nghệ flashcard

MỤC LỤC

Mục đích của đề tài 1. Nhu cầu thực tế

Cơ hội phát triển

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.

CƠ SỞ LÍ THUYẾT

Framework Boostrap 5 .1 Khái niệm

    ● 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. ● 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.

    ● 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ộ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.

    ● 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.

    Hình 2. 1 Boostrap Framework
    Hình 2. 1 Boostrap Framework

    Công nghệ SQL Server .1 Khái niệm

      ● 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. ● 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. 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.

      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. ● 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.

      ● Độ 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. Tuy nhiên, tích hợp với các công nghệ và sản phẩm không phải của Microsoft có thể gặp một số khó khăn và yêu cầu công sức và tài nguyên phát triển thêm.

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

      Sơ đồ hoạt động

      Extension Không có. ● Use-case “Quản lí thông tin của người dùng”. 14 Bảng use-case “Quản lí thông tin người dùng”. Actor Quản trị viên. 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.

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

      Thiết kế kiến trúc

        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. 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ập Theme Các chủ đề chứa các bài học.

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

          KẾT QUẢ TRIỂN KHAI 4.1 Danh sách màn hình

          Màn hình chi tiế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ề. Đ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. 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.

          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. 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. 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.

          Nhập tên người dùng Nhập dữ liệu 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. 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 4 vocab-. 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.

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