1. Trang chủ
  2. » Luận Văn - Báo Cáo

Xây dựng website học 2 toán tiếng anh cho học sinh cấp 01 bằng công nghệ mern stack

59 4 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 59
Dung lượng 1,87 MB

Các công cụ chuyển đổi và chỉnh sửa cho tài liệu này

Cấu trúc

  • Phần 1: MỞ ĐẦU (7)
    • 1. Tính cấp thiết của đề tài (7)
    • 2. Mục đích của đề tài (7)
    • 3. Cách tiếp cận và phương pháp nghiên cứu (7)
    • 4. Kết quả dự kiến đạt được (8)
  • Phần 2: NỘI DUNG (9)
  • CHƯƠNG 1: CƠ SỞ LÝ THUYẾT (9)
    • 1.1. MERNSTACK (9)
      • 1.1.1. MernStack là gì? (9)
  • CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU (13)
    • 2.1. KHẢO SÁT HIỆN TRẠNG (13)
      • 2.1.1. Tienganh123 ( https://www.tienganh123.com/ ) (13)
      • 2.1.2. Luyenthi123 ( https://www.luyenthi123.com/ ) (15)
      • 2.1.3. Kết luận (16)
    • 2.2. XÁC ĐỊNH YÊU CẦU (16)
      • 2.2.1. Nhận diện tác nhân và các chức năng trong sơ đồ usecase (16)
      • 2.2.2. Lược đồ usecase (17)
      • 2.2.3. Mô tả usecase (17)
  • CHƯƠNG 3: THIẾT KẾ PHẦN MỀM (21)
    • 3.1. THIẾT KẾ HỆ THỐNG (21)
    • 3.2. THIẾT KẾ DỮ LIỆU (24)
      • 3.2.1. Mô hình ERD (24)
      • 3.2.2. Mô hình cơ sở dữ liệu (25)
  • CHƯƠNG 4: THIẾT KẾ GIAO DIỆN (35)
    • 4.1. THIẾT KẾ GIAO DIỆN ADMIN (35)
      • 4.1.1. Giao diện màn hình đăng nhập (35)
      • 4.1.2. Giao diện màn hình trang chủ Admin (36)
      • 4.1.3. Giao diện quản lý (37)
      • 4.1.4. Giao diện thêm (38)
      • 4.1.5. Giao diện sửa (40)
      • 4.1.6. Giao diện xóa (41)
    • 4.2. THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG (42)
      • 4.2.1. Giao diện màn hình chính (42)
      • 4.2.2. Giao diện nội dung bài học (45)
      • 4.2.3. Giao diện kiểm tra (46)
  • CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ (49)
    • 5.1. CÀI ĐẶT (49)
      • 5.1.1. Hướng dẫn tạo project (49)
      • 5.1.2. Tạo project react js (50)
    • 5.2. KIỂM THỬ (51)
    • 1. Những kết quả đạt được (54)
    • 2. Hạn chế (54)
    • 3. Hướng phát triển (54)
  • TÀI LIỆU THAM KHẢO (56)

Nội dung

Xây dựng website học 2 toán tiếng anh cho học sinh cấp 01 bằng công nghệ mern stack Xây dựng website học 2 toán tiếng anh cho học sinh cấp 01 bằng công nghệ mern stack Xây dựng website học 2 toán tiếng anh cho học sinh cấp 01 bằng công nghệ mern stack Xây dựng website học 2 toán tiếng anh cho học sinh cấp 01 bằng công nghệ mern stack Xây dựng website học 2 toán tiếng anh cho học sinh cấp 01 bằng công nghệ mern stack Xây dựng website học 2 toán tiếng anh cho học sinh cấp 01 bằng công nghệ mern stack

CƠ SỞ LÝ THUYẾT

MERNSTACK

Mern Stack là bộ combo open source các công nghệ liên quan đến JavaScript: MongoDB, ExpressJS, React/React Native, NodeJS

Mern: là viết tắt của 04 công cụ: M – MongoDB, E – ExpressJS, R – ReactJS, N – NodeJS

Stack công nghệ là một hệ thống hoàn chỉnh không chỉ gồm mã nguồn mà còn dựa trên nền tảng hệ điều hành và các phần mềm đi kèm như web server và cơ sở dữ liệu Các thành phần này được tích hợp với nhau để hình thành một technical stack, đảm bảo môi trường phát triển và vận hành đồng bộ, tối ưu hóa hiệu suất và quản trị dữ liệu cho ứng dụng.

▪ MongoDB là một cơ sở dữ liệu mã nguồn mở và là cơ sở dữ liệu NoSQL hàng đầu, được hàng triệu người sử dụng MongoDB được viết bằng C++

MongoDB là một cơ sở dữ liệu đa nền tảng, hoạt động dựa trên các khái niệm Collection và Document, mang lại hiệu suất cao, tính khả dụng cao và khả năng mở rộng dễ dàng cho các ứng dụng hiện đại.

Trong MongoDB, database là một kho chứa dữ liệu ở mức vật lý được lưu trữ tại một vị trí trên máy chủ, mỗi database có nhiều collection và có thể được tạo ra trên một máy chủ MongoDB Collections là nhóm các tài liệu (documents), tương ứng với một bảng (table) trong hệ quản trị cơ sở dữ liệu quan hệ, và mỗi collection thuộc về một database duy nhất Cấu trúc này cho phép MongoDB lưu trữ, truy vấn và mở rộng dữ liệu một cách linh hoạt, đồng thời giúp quản lý dữ liệu ở các cấp độ khác nhau một cách hiệu quả.

Một điểm đặc biệt của các cơ sở dữ liệu NoSQL như MongoDB là không có ràng buộc mối quan hệ giữa các bảng như trong các hệ quản trị CSDL quan hệ, vì vậy việc truy vấn dữ liệu diễn ra rất nhanh Mỗi collection có thể chứa nhiều thể loại dữ liệu khác nhau, không giống như bảng (table) trong MySQL với các trường (field) cố định Document có cấu trúc tương tự dữ liệu JSON, nghĩa là nó gồm các cặp khóa-giá trị (key => value) và mang tính linh hoạt rất lớn Bạn có thể hiểu Document như một bản ghi dữ liệu trong MySQL, tuy nhiên sự khác biệt ở chỗ các cặp khóa-giá trị trong mỗi Document có thể khác nhau và không bắt buộc giống nhau ở mọi tài liệu.

Express.js là một trong những framework phổ biến nhất trong Node.js, được đánh giá cao nhờ sự đơn giản nhưng vẫn mạnh mẽ, giúp dễ tiếp cận và phát triển các ứng dụng web dựa trên nền tảng này Framework nhẹ nhàng này tối ưu cho việc xây dựng nhanh các API và website với những tính năng cơ bản như routing, middleware và xử lý yêu cầu, phù hợp cho cả dự án nhỏ lẫn quy mô lớn.

▪ Xây dựng trên nền tảng của Nodejs Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile

A router is an object (distinct from routing); it is a standalone instance of both middleware and routes, and as such it carries the capabilities of both, effectively functioning as a mini-application.

▪ Các Application dùng ExpressJS làm core đều có phần Router được tích hợp sẵn trong đó

▪ Router hoạt động như một middleware nên chúng ta có thể dùng nó như một arguments Hoặc dùng nó như một arguments cho route khác

Hiện nay các website phát triển theo mô hình single-page (SPA) đang lên ngôi, nơi mọi xử lý diễn ra trên một trang duy nhất và giúp tăng trải nghiệm người dùng với thao tác nhanh chóng, mượt mà và các hiệu ứng animation sống động; so với web truyền thống nhiều trang tải lại dữ liệu phụ thuộc vào khả năng xử lý của server nên dễ gây load chậm và phát sinh lỗi, SPA tối ưu hóa thời gian phản hồi và tương tác người dùng; vì vậy mô hình SPA ngày càng phổ biến và được hỗ trợ bởi nhiều ngôn ngữ, công cụ khác nhau, trong đó ReactJS được xem là thư viện mạnh nhất hiện nay để phát triển các ứng dụng single-page.

▪ React.JS là một thư viện Javascript dùng để xây dựng giao diện người dùng do FaceBook tạo ra

React cho phép các nhà phát triển web tạo ra giao diện người dùng nhanh chóng và hiệu quả Trong phần Views của Reactjs, giao diện được thể hiện chủ yếu thông qua hệ thống component, nơi các component con được ghép nối với các component khác hoặc với các thẻ HTML để xây dựng cấu trúc và hành vi của trang Việc tổ chức theo component giúp tái sử dụng mã nguồn, tối ưu hoá quá trình render và đẩy nhanh quá trình phát triển giao diện cho các ứng dụng web hiện đại.

Node.js là nền tảng mã nguồn mở được thiết kế để phát triển các ứng dụng internet có khả năng mở rộng cao, đặc biệt là máy chủ web Được viết bằng JavaScript, Node.js sử dụng mô hình điều khiển sự kiện và I/O bất đồng bộ nhằm tối ưu chi phí vận hành và tối đa hóa khả năng mở rộng Node.js tích hợp V8 JavaScript Engine của Google, libuv và một số thư viện nền tảng khác, từ đó tăng hiệu suất xử lý và khả năng xử lý nhiều kết nối đồng thời cho các ứng dụng web và mạng.

NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau, từ Windows đến Linux và OSX, mang lại lợi thế lớn cho phát triển đa nền tảng Nó cung cấp kho thư viện phong phú ở dạng JavaScript Modules giúp đơn giản hóa việc lập trình và rút ngắn thời gian phát triển ở mức tối ưu NodeJS được xây dựng và chạy trên V8 Engine, một engine JavaScript hiệu suất cao dựa trên C++ Vì vậy, trái tim của NodeJS chính là C++.

Ý tưởng cốt lõi của NodeJS là tận dụng kiến trúc non-blocking I/O để xử lý dữ liệu và các tác vụ thời gian thực một cách nhanh chóng, giúp NodeJS mở rộng và xử lý số lượng lớn kết nối đồng thời với mức throughput cao Trong khi các ứng dụng web truyền thống phải tạo một luồng xử lý cho mỗi yêu cầu và chiếm RAM của hệ thống, dẫn tới sử dụng tài nguyên không hiệu quả, NodeJS giải quyết vấn đề này bằng mô hình single-threaded kết hợp với non-blocking I/O để thực thi các request, từ đó cho phép hỗ trợ hàng chục ngàn kết nối đồng thời.

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

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

2.1.1 Tienganh123 ( https://www.tienganh123.com/ )

• Đăng nhập qua facebook, gmail, yahoo

• Học tập theo nội dung từng lớp

• Học tập qua trò chơi

Hình 1 Giao diện website tienganh123

• Đảm bảo đầy đủ chức năng cơ bản của một website học tập

• Nhiều chức năng sáng tạo hỗ trợ việc học tập không nhàm chán

• Giao diện dàn trãi không làm nổi bật được chức năng chính của website

2.1.2 Luyenthi123 ( https://www.luyenthi123.com/ )

Hình 2 Giao diện website Luyenthi123

• Đảm bảo đầy đủ chức năng cơ bản của một website học tập

• Giao diện đơn giản, dễ nhìn

• Diễn đàn trao đổi những vấn đề không liên quan học tập, câu từ không phù hợp

Qua khảo sát các trang web giáo dục, nhóm nhận thấy các chức năng thiết yếu mà một website học tập cần có, ví dụ giao diện trực quan, hệ thống quản lý nội dung hiệu quả và công cụ tương tác hỗ trợ người học tiếp cận thông tin dễ dàng Bên cạnh đó, phân tích các ưu điểm và hạn chế của những trang được khảo sát giúp rút ra những lưu ý quan trọng để có thể áp dụng vào website của bạn một cách hoàn thiện hơn, từ tối ưu trải nghiệm người dùng đến tăng cường bảo mật và khả năng mở rộng Việc vận dụng những bài học này sẽ giúp website học tập của bạn đáp ứng nhu cầu học tập đa dạng và nâng cao hiệu quả truyền đạt kiến thức cho người dùng.

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

2.2.1 Nhận diện tác nhân và các chức năng trong sơ đồ usecase

Bảng 1Nhận diện tác nhân và các chức năng trong sơ đồ usecase

Người dùng Đăng ký tài khoản Đăng nhập / Đăng xuất ( với tài khoản đã đăng ký) Học tập

Kiểm tra Xem tin tức giáo dục Người quản lý Thêm, xóa, sửa user

Trang quản trị cho phép quản lý nội dung giáo dục một cách toàn diện với các chức năng thêm, xóa, sửa câu hỏi và thêm, xóa, sửa đề thi để cập nhật ngân hàng đề thi; thêm, xóa, sửa tin tức để thông tin được cập nhật liên tục; thêm, xóa, sửa nội dung bài học để chất lượng tài liệu được đảm bảo; và thêm, xóa, sửa kết quả thi để theo dõi kết quả học tập Hệ thống cũng hỗ trợ đăng nhập, đăng xuất giúp bảo mật và cá nhân hóa trải nghiệm người dùng.

Mô tả Đăng nhập vào website

Tác nhân kích hoạt gồm Users và Admin Điều kiện kích hoạt là tài khoản đã đăng ký với hệ thống và đang ở trạng thái chưa đăng nhập Luồng sự kiện chính bắt đầu khi người dùng hoặc quản trị viên truy cập website.

2 Chọn chức năng đăng nhập

5 Hệ thống kiểm tra thông tin

- Nếu thông tin đúng: Chuyển đến bước

- Nếu username hoặc mật khẩu sai: Hiển thị thông báo “Tai khoan hoac mat khau khong chinh xac” Quay lại bước 3

6 Hiển thị màn hình chính của website với thông tin của tài khoản đăng nhập

Biến thể Username hoặc mật khẩu để trống: Vô hiệu hóa nút Đăng nhập

Mô tả Đăng ký tài khoản mới

Tác nhân kích hoạt Users Điều kiện kích hoạt Tài khoản chưa đăng ký với hệ thống

Luồng sự kiện chính 1 Truy cập website

2 Chọn chức năng đăng ký

5 Hệ thống kiểm tra thông tin

- Nếu thông tin đúng: Chuyển đến bước 6

- Nếu username đã tồn tại: Hiển thị thông báo “Tai khoan đã được đăng ký” Quay lại bước 3

6 Hiển thị màn hình chính của website với thông tin của tài khoản đăng ký

Mô tả Đăng xuất khỏi phiên làm việc

Tác nhân kích hoạt Users, Admin Điều kiện kích hoạt Đang trong trạng thái đã đăng nhập

Luồng sự kiện chính 1 Nhâp chọn đăng xuất

2 Thoát khỏi phiên làm việc

Bảng 5 Usecase thêm câu hỏi

Tên usecase Thêm câu hỏi

Mô tả Thêm câu hỏi vào quản lý câu hỏi

Tác nhân kích hoạt Admin Điều kiện kích hoạt Đang đăng nhập bằng tài khoản Admin

Luồng sự kiện chính 1 Trên màn hình chính nhấp vào Quản lý câu hỏi

2 Nhấp chọn nút Thêm câu hỏi

3 Nhập thông tin câu hỏi

Bảng 6 Usecase sửa câu hỏi

Tên usecase Sửa câu hỏi

Mô tả Sửa thông tin câu hỏi

Tác nhân kích hoạt Admin Điều kiện kích hoạt Đang đăng nhập bằng tài khoản Admin

Luồng sự kiện chính 1 Trên màn hình chính nhấp vào Quản lý câu hỏi

2 Nhấp chọn biểu tượng Sửa

3 Nhập thông tin câu hỏi cần sửa

Bảng 7 Usecase xóa câu hỏi

Tên usecase Sửa câu hỏi

Mô tả Thêm câu hỏi vào quản lý câu hỏi

Tác nhân kích hoạt Admin Điều kiện kích hoạt Đang đăng nhập bằng tài khoản Admin

Luồng sự kiện chính 1 Trên màn hình chính nhấp vào Quản lý câu hỏi

2 Nhấp chọn biểu tượng xóa câu hỏi

3 Hệ thống hiển thị thông báo “ Delete Item” Nhấn nút OK

THIẾT KẾ PHẦN MỀM

THIẾT KẾ HỆ THỐNG

Hình 4 Sơ đồ sequence diagram đăng nhập

Hình 5 Sơ đồ sequence diagram đăng ký

Hình 6 Sơ đồ sequence diagram đăng xuất

Hình 7 Sơ đồ sequence diagram thêm câu hỏi

Hình 8 Sơ đồ sequence diagram sửa câu hỏi

Hình 9 Sơ đồ sequence diagram xóa câu hỏi

THIẾT KẾ DỮ LIỆU

3.2.2 Mô hình cơ sở dữ liệu

STT Tên thuộc tính Kiểu dữ liệu Mô tả Ghi chú

1 questionCategoryID String Loại câu hỏi theo lớp học

2 questionName String Tên câu hỏi

3 questionResultA String Đáp án A câu hỏi

4 questionResultB String Đáp án B câu hỏi

5 questionResultC String Đáp án C câu hỏi

6 questionResultD String Đáp án D câu hỏi

7 questionResultRight String Đáp án đúng câu hỏi

8 ExamID String Lớp làm bài kiểm tra

STT Tên thuộc tính Kiểu dữ liệu Mô tả Ghi chú

1 examEasyNumber String Số câu hỏi bài kiểm tra

2 examName String Tên bài kiểm tra

3 examTimeMake String Thời gian làm bài

4 classID String Lớp làm bài

5 examCategoryNumber String Loại câu hỏi

6 created Date Ngày tạo bài kiểm tra

STT Tên thuộc tính Kiểu dữ liệu

1 lessionContentSubjects String Bài học của lớp

2 lessionContentTitle String Tiêu đề bài học

3 lessionContentImg String Ảnh bài học

4 lessionContentDetail String Nội dung chi tiết bài học

5 created Date Ngày tạo bài học

Bảng 11 MemberSchema STT Tên thuộc tính Kiểu dữ liệu Mô tả Ghi chú

2 memberLogin String Tên đăng nhập

4 memberName String Tên đầy đủ

8 avatarContentImg String Ảnh đại diện

9 created Date Ngày tạo bài học

Bảng 12 NewsSchema STT Tên thuộc tính Kiểu dữ liệu Mô tả Ghi chú

1 categoryNews String Loại tin tức

2 Content String Nội dung tin tức

3 Title String Tiêu đề tin tức

4 Images String Ảnh tin tức

5 created Date Ngày tạo tin tức

Bảng 13 QuestionsSchema STT Tên thuộc tính Kiểu dữ liệu Mô tả Ghi chú

1 questionCategoryId String Loại câu hỏi theo lớp

2 questionName String Tên câu hỏi

7 questionResultRight String Đáp án đúng

8 create Date Ngày tạo câu hỏi

Bảng 14 ResultSchema STT Tên thuộc tính Kiểu dữ liệu Mô tả Ghi chú

1 Socaudung String Số câu đúng của bài kiểm tra của thành viên

2 Socausai String Số câu sai của bài kiểm tra của thành viên

3 Examimationid String Tên bài kiểm tra

4 Memberid String Tên user làm bài kiểm

5 created Date Ngày làm bài kiểm

STT Tên thuộc tính Kiểu dữ liệu Mô tả Ghi chú

1 categoryvocabulary String Loại câu hỏi game

2 vocabularygame String Từ vựng game

3 spellingvocabulary String Phiên âm từ

8 questionResultRight String Đáp án đúng

9 created Date Ngày tạo câu hỏi trò chơi

STT Tên thuộc tính Kiểu dữ liệu Mô tả Ghi chú

1 classForumQuestion String Câu hỏi thuộc lớp

2 titleFormQuestion String Tên câu hỏi

3 memberForumQuestion Object Tên user làm bài kiểm

4 memberFormRepLy Array Thông tin và câu trả lời của user

THIẾT KẾ GIAO DIỆN

THIẾT KẾ GIAO DIỆN ADMIN

4.1.1 Giao diện màn hình đăng nhập

Hình 11 Giao diện đăng nhập Admin 4.1.1.2 Danh sách xử lý

Bảng 17 Danh sách xử lý đăng nhập

STT Tên xử lý Điều kiện gọi thực hiện

“Password” Điền đúng mật khẩu

Phải điền đầy đủ thông tin và hợp lệ

4.1.2 Giao diện màn hình trang chủ Admin

Hình 12 Giao diện trang chủ Admin 4.1.2.2 Danh sách xử lý

Bảng 18 Danh sách xử lý giao diện trang chủ Admin

STT Tên xử lý Điều kiện gọi thực hiện

1 Đến danh mục quản lý học sinh

Nhấp chọn quản lý học sinh

Chỉ duy nhất Admin mới có quyền xem giao diện này

2 Đến danh mục quản lý lớp học

Nhấp chọn quản lý lớp học

Chỉ duy nhất Admin mới có quyền xem giao diện này

3 Đến danh mục quản lý câu hỏi

Nhấp chọn quản lý câu hỏi

Chỉ duy nhất Admin mới có quyền xem giao diện này

4 Đến danh mục quản lý đề thi

Nhấp chọn quản lý đề thi

Chỉ duy nhất Admin mới có quyền xem giao diện này

5 Đến danh mục quản lý tin tức

Nhấp chọn quản lý tin tức

Chỉ duy nhất Admin mới có quyền xem giao diện này

6 Đến danh mục quản lý nội dung bài học

Nhấp chọn quản lý nội dung bài học

Chỉ duy nhất Admin mới có quyền xem giao diện này

7 Đến danh mục quản lý video bài học

Nhấp chọn quản lý video bài học

Chỉ duy nhất Admin mới có quyền xem giao diện này

8 Đến danh mục quản lý kết quả thi

Nhấp chọn kết quả thi

Chỉ duy nhất Admin mới có quyền xem giao diện này

9 Đăng xuất Nhấp chọn đăng xuất

Chỉ duy nhất Admin mới có quyền xem giao diện này

Hình 13 Giao diện quản lý câu hỏi

Bảng 19 Danh sách xử lý chức năng quản lý câu hỏi

STT Tên xử lý Điều kiện gọi thực hiện

1 Đến chức năng thêm câu hỏi

Nhấn vào button thêm câu hỏi

Chỉ duy nhất Admin mới có quyền xem giao diện này

2 Đến chức năng sửa câu hỏi

Nhấn vào button sửa câu hỏi

Chỉ duy nhất Admin mới có quyền xem giao diện này

3 Đến chức năng xóa câu hỏi

Nhấn vào button xóa câu hỏi

Chỉ duy nhất Admin mới có quyền xem giao diện này

Hình 14 Giao diện thêm câu hỏi

Bảng 20 Danh sách xử lý Thêm câu hỏi

STT Tên xử lý Điều kiện gọi thực hiện

1 Loại câu hỏi Nhập dữ liệu vào editText “Anh văn 1”

Chỉ duy nhất Admin mới có quyền xem giao diện này

2 Tên câu hỏi Nhập dữ liệu vào editText “Tên câu hỏi”

Chỉ duy nhất Admin mới có quyền xem giao diện này

3 Đáp án A Nhập dữ liệu vào editText “Đáp án A”

Chỉ duy nhất Admin mới có quyền xem giao diện này

4 Đáp án B Nhập dữ liệu vào editText “Đáp án B”

Chỉ duy nhất Admin mới có quyền xem giao diện này

5 Đáp án C Nhập dữ liệu vào editText “Đáp án C”

Chỉ duy nhất Admin mới có quyền xem giao diện này

6 Đáp án D Nhập dữ liệu vào editText “Đáp án D”

Chỉ duy nhất Admin mới có quyền xem giao diện này

7 Đáp án đúng Nhập dữ liệu vào editText “A”

Chỉ duy nhất Admin mới có quyền xem giao diện này

8 Lưu thêm Nhấn vào button

Thêm Điền đầy đủ thông tin

Bảng 21 Danh sách xử lý Sửa câu hỏi

STT Tên xử lý Điều kiện gọi thực hiện

1 Loại câu hỏi Nhập dữ liệu vào editText

Chỉ duy nhất Admin mới có quyền xem giao diện này

2 Tên câu hỏi Nhập dữ liệu vào editText

Chỉ duy nhất Admin mới có quyền xem giao diện này

3 Đáp án A Nhập dữ liệu vào editText

Chỉ duy nhất Admin mới có quyền xem giao diện này

4 Đáp án B Nhập dữ liệu vào editText

Chỉ duy nhất Admin mới có quyền xem giao diện này

Hình 15 Giao diện sửa câu hỏi

5 Đáp án C Nhập dữ liệu vào editText

Chỉ duy nhất Admin mới có quyền xem giao diện này

6 Đáp án D Nhập dữ liệu vào editText

Chỉ duy nhất Admin mới có quyền xem giao diện này

7 Đáp án đúng Nhập dữ liệu vào editText

Chỉ duy nhất Admin mới có quyền xem giao diện này

8 Lưu sửa Nhấn vào button

Sửa Điền đầy đủ thông tin

Bảng 22 Danh sách xử lý Xóa câu hỏi

STT Tên xử lý Điều kiện gọi thực hiện

1 Không xóa Nhấn vào button

Chỉ duy nhất Admin mới có quyền xem giao diện này

Hình 16 Giao diện xóa câu hỏi

2 Thực hiện xóa Nhấn vào button

Chỉ duy nhất Admin mới có quyền xem giao diện này

THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG

4.2.1 Giao diện màn hình chính

Hình 17 Giao diện chính của người dùng

Hình 18 Giao diện chính của người dùng (tt)

Bảng 23 Danh sách xử lý giao diện chính của người dùng

STT Tên xử lý Điều kiện gọi thực hiện

1 Tìm kiếm Nhập thông tin vào editText “ Bạn muốn tìm gì

Nhấn vào button môn toán

3 Hiển thị bài học môn Tiếng anh

Nhấn vào button tiếng anh

Hình 19 Giao diện chính của người dùng (tt)

6 Xem banner Nhấn vào bên trái hoặc phải của banner

7 Xem các bài giảng mới

Nhấn vào bài giảng muốn xem

8 Xem tài liệu học tập

Nhấn vào Tài liệu học tập

Chọn theo lớp học muốn xem

9 Kiểm tra Nhấn vào kiểm tra

10 Học online Nhấn vào Học

11 Học và chơi Nhấn vào Học và chơi

12 Diễn đàn Nhấn vào diễn đàn

13 Xem Giới thiệu Nhấn vào giới thiệu

14 Đăng xuất Nhấn vào đăng xuất Đã đăng nhập

16 Môn học theo lớp Nhấn vào button muốn xem

17 Top các học sinh có thành tích tốt

18 Các bài học nổi bật

Nhấn vào bài học muốn xem

19 Tin tức giáo dục Nhấn vào link muốn xem

Nhấn vào link muốn xem

4.2.2 Giao diện nội dung bài học

Hình 20 Giao diện nội dung bài học

Hình 21 Giao diện nội dung bài học (tt)

Bảng 24 Danh sách xử lý nội dung bài học

STT Tên xử lý Điều kiện gọi thực hiện

1 Link nội dung bài học

Nhấn vào link muốn xem

2 Nội dung bài học Chỉ xem

Hình 22 Giao diện kiểm tra

Hình 23 Giao diện kiểm tra (tt)

Bảng 25 Danh sách xử lý chức năng kiểm tra

STT Tên xử lý Điều kiện gọi thực hiện

1 Link kiểm tra Nhấn vào bài kiểm tra

2 Kiểm tra Nhấn vào đáp án đúng

Hoàn thành trong thời gian quy định

CÀI ĐẶT VÀ KIỂM THỬ

CÀI ĐẶT

Tải các ứng dụng cần thiết để lập trình mern stack : visual studio code, nodejs, mongodb, robomongo

Các editor sử dụng : visual studio code + robomongo

Bước 1: Các bạn mở visual studio code -> mở terminal -> gõ npm install express

Bước 2: Gõ vào terminal express nameproject

Bước 3: Các bạn lần lượt gõ vào cd nameproject rồi npm install

Bước 4: Để chạy project các bạn gõ npm start

Bước 5: Các bạn mở trình duyệt bất kỳ và gõ localhost:3000 nếu hiển thì như hình dưới có nghĩa là các bạn tạo thành công

Bước 6: Nếu các bạn cần thư viện gì thì gõ npm install teeeeenpacket

Bước 1: Các bạn mở visual studio code và tạo 1 thư mục sau đó mở terminal lên và gõ npx create-react-app my-app

Bước 2: Các bạn mở mở terminal và gõ cd my-app sau đó gõ npm start

Nếu trình duyệt hiển thị như hình thì các bạn đã thành công

KIỂM THỬ

Bảng 26 Kiểm thử Test case

Login_01 Kiểm tra đăng nhập nhập rỗng

2 Chọn chức năng đăng nhập

Nút Đăng nhập vô hiệu hóa, không thể thực hiện đăng nhập

Login_02 Kiểm tra đăng nhập sai thông tin

2 Chọn chức năng đăng nhập

Trả về thông báo “ Tai khoan hoac mat khau khong chinh xac” Nút Đăng nhập vô hiệu hóa, không thể thực hiện đăng nhập

Login_03 Kiểm tra đăng nhập thành công

2 Chọn chức năng đăng nhập

3 Nhập đúng username và mật khẩu

Nhấp Đăng nhập Đăng nhập thành công, hiển thị mà hình trang chủ

Register_01 Kiểm tra đăng ký thành công

2 Chọn chức năng đăng ký

3 Nhập username và mật khẩu Nhấp Đăng ký Đăng ký thành công, hiển thị mà hình trang chủ

AddQUES_01 Kiểm tra thêm câu hỏi

1 Đăng website người quản lý

2 Nhấp chọn Thêm câu hỏi

3 Nhập thông tin Nhấn chọn Thêm

Hiển thị màn hình câu hỏi vừa thêm

Kiểm tra xóa câu hỏi

1 Đăng website người quản lý

2 Nhấp biểu tượng xóa của câu hỏi muốn xóa Nhấp chọn OK

Hiển thị màn hình câu hỏi không còn câu hỏi vừa xóa nữa

Kiểm tra sửa câu hỏi

1 Đăng website người quản lý

2 Nhấp biểu tượng sửa của câu hỏi muốn sửa

3 Nhập thông tin cần sửa Nhấn sửa

Hiển thị thông tin vừa sửa

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

• Hiểu rõ kiến thức về khái niệm, công dụng của MernStack

• Xây dựng thành công Website học tập với việc áp dụng những kiến thức đã tìm hiểu

• Website bao gồm 02 loại, cho người dùng (học sinh) và cho người quản lý với các chức năng:

• Giao diện cho người dùng:

▪ Đăng ký, đăng nhập vào trang web bằng Gmail, Facebook

▪ Cho phép học sinh học tập, làm kiểm tra theo nội dung từng lớp học

• Ứng dụng cho người quản lý:

▪ Đăng nhập vào trang web bằng tài khoản đã đăng ký

▪ Cho phép thêm, xóa, sửa thông tin

• Hiểu được cấu trúc, cách thức hoạt động, cách thức phát triển một trang web khi tích hợp các công nghệ mới.

Hạn chế

Bên cạnh những chức năng đã xây dựng được, Website cũng còn nhiều hạn chế mà nhóm sẽ phát triển và xây dựng trong tương lai để trở nên hoàn thiện hơn, những hạn chế cụ thể là:

• Giao diện chưa hấp dẫn

• Các chức năng chưa tối ưu và thiếu logic.

Hướng phát triển

Do hạn chế thời gian nên có một số chức năng chưa thể đưa vào ứng dụng, về sau ứng dụng có thể phát triển thêm theo hướng:

• Tối ưu hóa các chức năng

• Hoàn thiện các chức năng chưa được đưa vào ứng dụng

Ngày đăng: 19/02/2022, 00:16

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

🧩 Sản phẩm bạn có thể quan tâm

w