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