CƠ SỞ LÝ LUẬN
MÔ HÌNH MVC
2.1.1 Khái niệm mô hình MVC
MVC, viết tắt của Model - View - Controller, là một mô hình kiến trúc phần mềm nhằm quản lý và phát triển dự án phần mềm một cách hệ thống Mô hình này được áp dụng rộng rãi, đặc biệt trong các ngôn ngữ lập trình web Khi áp dụng MVC, phần mềm sẽ được chia thành ba phần chính: Model, View và Controller, mỗi phần đảm nhận một nhiệm vụ riêng biệt.
- Model: là thành phần chứa tất cả các phương thức xử lý, truy xuất database, đối tượng mô tả dữ liệu như các Class, hàm xử lý
View là phần chịu trách nhiệm hiển thị thông tin và tương tác với người dùng, hay còn được hiểu đơn giản là giao diện của ứng dụng.
Controller là thành phần chịu trách nhiệm xử lý và điều hướng các hành động của client, từ đó thực hiện các thao tác với cơ sở dữ liệu nếu cần Nói một cách khác, controller đóng vai trò là cầu nối giữa view và model trong ứng dụng.
Hình 2.1: Mô hình MVC 2.1.2 Ưu nhước điểm của mô hình MVC
Mô hình MVC thể hiện tính chuyên nghiệp trong lập trình và phân tích thiết kế nhờ vào việc chia thành các thành phần độc lập với chức năng khác nhau, giúp dễ dàng nâng cấp, quản lý và làm việc nhóm Tuy nhiên, việc phân chia này có thể làm giảm tốc độ xử lý so với các mô hình không áp dụng MVC Đối với các dự án nhỏ, việc áp dụng mô hình MVC có thể dẫn đến thời gian xây dựng lâu hơn so với không sử dụng mô hình này.
NGÔN NGỮ LẬP TRÌNH PHP
PHP, viết tắt của Hypertext Preprocessor, là một ngôn ngữ lập trình kịch bản mạnh mẽ, thường được sử dụng trong phát triển ứng dụng web và mã nguồn mở Với cú pháp tương tự như C và Java, PHP tối ưu cho việc nhúng vào HTML, mang lại tốc độ xử lý nhanh và dễ học cho người dùng Thời gian học tập ngắn là lý do chính khiến PHP trở thành ngôn ngữ lập trình web phổ biến toàn cầu Mục tiêu của PHP là tạo ra môi trường làm việc chuyên nghiệp, và sự đóng góp của Zend Inc trong việc phát triển ngôn ngữ cùng tài liệu thư viện đã hỗ trợ lớn cho sự phát triển của doanh nghiệp hiện nay.
HỆ QUẢN TRỊ CƠ SỞ DỮ LIỆU MySQL
MySQL là hệ quản trị cơ sở dữ liệu mã nguồn mở phổ biến nhất thế giới, được yêu thích bởi các nhà phát triển ứng dụng nhờ vào tốc độ cao, tính ổn định và dễ sử dụng Hệ thống này hỗ trợ nhiều hệ điều hành và cung cấp một loạt các hàm tiện ích mạnh mẽ Với khả năng bảo mật và hiệu suất vượt trội, MySQL là lựa chọn lý tưởng cho các ứng dụng truy cập cơ sở dữ liệu trên internet Đặc biệt, MySQL hoàn toàn miễn phí, cho phép người dùng tải về từ trang chủ.
The software is available in multiple versions tailored for various operating systems, including Win32 for Windows, as well as versions for Linux, MacOSX, Unix, FreeBSD, NetBSD, Novell NetWare, SGI Irix, Solaris, and SunOS.
MySQL là một hệ quản trị cơ sở dữ liệu quan hệ nổi bật, sử dụng ngôn ngữ truy vấn có cấu trúc (SQL) để quản lý và truy xuất dữ liệu hiệu quả.
MySQL là hệ quản trị cơ sở dữ liệu phổ biến, hỗ trợ các ngôn ngữ lập trình như PHP, Perl và nhiều ngôn ngữ khác, giúp lưu trữ thông tin cho các trang web được xây dựng bằng PHP hay Perl.
Tổng quan về hệ cơ sở dữ liệu MySQL:
- Khả năng mở rộng và tính linh hoạt
- Hổ trợ giao dịch mạnh mẻ
- Điểm mạnh Web Và Data Warehouse
- Bảo vệ dữ liệu mạnh mẽ
- Phát triển ứng dụng toàn diện
- Mã nguồn tự do và hổ trợ 24/7
- Chi phí sở hữu thấp
LARAVEL FRAMEWORK
Laravel là một framework PHP mã nguồn mở và miễn phí, được phát triển bởi Taylor Otwell, nhằm hỗ trợ phát triển ứng dụng web theo kiến trúc model-view-controller (MVC) Nó nổi bật với cú pháp dễ hiểu, hệ thống đóng gói modular và quản lý gói phụ thuộc, cùng nhiều phương thức truy cập cơ sở dữ liệu quan hệ và tiện ích hỗ trợ triển khai, bảo trì ứng dụng.
2.4.2 Mô hình MVC trong Laravel
Trong Laravel, mô hình này có sơ đồ như sau:
Hình 2.2: Mô hình MVC trong Laravel
Tất cả các yêu cầu từ người dùng đều phải đi qua Route, sau đó dữ liệu được chuyển đến Controller để xử lý Nếu cần dữ liệu, Controller sẽ lấy từ Model hoặc cập nhật dữ liệu xuống Model, cuối cùng kết quả sẽ được gửi đến View để hiển thị cho người sử dụng.
KHÁI NIỆM VỀ BOOTSTRAP
Bootstrap là một framework HTML, CSS và JavaScript giúp người dùng thiết kế website dễ dàng theo tiêu chuẩn nhất định Nó cho phép tạo ra các trang web thân thiện với nhiều thiết bị di động như smartphone, iPad, tablet và hơn thế nữa.
Tại sao lại như vậy?
Bootstrap cung cấp nhiều thành phần cơ bản như typography, forms, buttons, tables, navigation, modals, và image carousels Ngoài ra, Bootstrap còn tích hợp nhiều Component và Javascript, giúp việc thiết kế responsive trở nên dễ dàng, thuận tiện và nhanh chóng hơn.
Tại sao chúng ta nên sử dụng Bootstrap?
Bootstrap là một trong những framework phổ biến nhất thế giới để phát triển website Nó đã tạo ra một tiêu chuẩn riêng và được người dùng yêu thích, dẫn đến việc cụm từ này thường xuyên được nhắc đến.
"Thiết kế theo chuẩn Bootstrap"
Từ cái "chuẩn mực" này, chúng ta có thể thấy rõ được những điểm thuận lợi khi sử dụng Bootstrap
Bootstrap rất dễ sử dụng nhờ vào việc dựa trên HTML, CSS và JavaScript Chỉ cần có kiến thức cơ bản về ba công nghệ này, người dùng có thể dễ dàng làm chủ Bootstrap.
Bootstrap cung cấp CSS responsive sẵn có cho các thiết bị như iPhones, tablets và desktops, giúp người dùng tiết kiệm thời gian trong việc tạo website thân thiện với các thiết bị điện tử Ngoài ra, Bootstrap cũng tương thích với tất cả các trình duyệt phổ biến như Chrome, Firefox, Internet Explorer, Safari và Opera, nhưng chỉ hỗ trợ từ IE9 trở lên do IE8 không hỗ trợ HTML5 và CSS3.
THIẾT KẾ WEBSITE VÀ KẾT QUẢ
PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Người quản lý website có quyền toàn diện để tương tác với hệ thống, sử dụng tất cả các chức năng được phát triển, và kiểm soát mọi hoạt động của website.
Giáo viên là người quản lý lớp học, Chỉ có một số quyền nhất định trong việc quản lý website
Khách truy cập vào website là những người học ở đây, họ có thể lựa chọn đăng ký làm thành viên hoặc không Khi truy cập, người dùng chỉ được phép thực hiện một số hành động nhất định trên website.
Bảng 3.1 Danh sách các Actor 3.1.2 Danh sách các Use Case
STT Actor Tên Use Case Ý nghĩa
Học viên Đăng nhập Use Case này mô tả chức năng đăng nhập vào hệ thống của người dùng hoặc Admin
Use Case này mô tả chức năng đăng kí tài khoản làm thành viên của người dùng và Admin
3 Admin Quản lý tài khoản Use Case này mô tả chức năng quản lý tài khoản
Giáo viên Quản lý lớp học Use Case này mô tả chức năng quản lý lớp học
Giáo viên Quản lý môn học Use Case này mô tả chức năng quản lý môn học
6 Admin Quản lý danh mục bài học Use Case này mô tả chức quản lý mục bài học
Giáo viên Quản lý bài học UC này mô tả chức năng quản lý các bài học có trong hệ thống
Giáo viên Quản lý bài tập Use Case này mô tả chức năng quản lý các bài tập
Quản lý loại câu hỏi
Use Case này mô tả chức năng quản lý các loại câu hỏi
Quản lý góc học tập
Use Case này mô tả chức năng quản lý các tin tức có trong hệ thống
11 Admin Quản lý đố vui Use Case này mô tả chức năng quản lý các bài đố vui có trong hệ thống
12 Admin Quản lý hỏi đáp Use Case này mô tả chức năng quản lý danh sách hỏi đáp có trong hệ thống
13 Admin Quản lý liên hệ Use Case này mô tả chức năng quản lý danh sách các liên hệ, phản hồi
Use Case này mô tả chức năng tìm kiếm các thông tin bài học của môn học nào đó
15 Admin Phản hồi Use Case này mô tả chức năng phản hồi của người dùng về website
Giáo viên Hỏi đáp Use Case này mô tả chức năng hỏi đáp giữa những người dùng website
17 Học viên Học bài Use Case này mô tả chức năng học bài của người dùng
Bảng 3.2: Danh sách các Use Case
3.1.3 Use Case tổng quát các chức năng
Hình 3.1: Use Case tổng quát các chức năng 3.1.4 Biểu đồ tuần tự a) Chức năng đăng ký
Hình 3.2: Biểu đồ tuần tự chức năng đăng ký
Mô tả: cho phép người dùng đăng ký trở thành thành viên của hệ thống
B1: Chọn và mở giao diện đăng ký
B4: Hệ thống kiểm tra thông tin
B5: Hệ thống truy vấn thông tin
B6: Hệ thống kiểm tra và sao lưu thông tin trên hệ thống
B7: Trả về kết quả truy vấn
B8: Hiển thị kết quả b) Chức năng đăng nhập
Hình 3.3: Biểu đồ tuần tự chức năng đăng nhập
Tác nhân: Admin, giáo viên, học viên
Mô tả: Cho phép người dùng sử dụng tài khoản đã có để đăng nhập vào hệ thống
B1: Chọn và mở giao diện đăng nhập
B4: Hệ thống kiểm tra thông tin
B6: Hệ thống kiểm tra thấy thông tin tài khoản
B7: Trả về kết quả truy vấn
12 c) Chức năng thêm lớp học
Hình 3.4: Biểu đồ tuần tự chức năng thêm lớp học
Mô tả: Cho phép Admin thêm thông tin của 1 lớp học
B1:Mở giao diện thêm lớp học
B5: Thông tin nhập vào sai thì trả về kết quả
B8: Hiển thị kết quả thêm thành công d) Chức năng sửa lớp học
Hình 3.5: Biểu đồ tuần tự chức năng sửa lớp học
Mô tả: Cho phép Admin sửa thông tin lớp học
B5: Thông tin nhập vào sai, thiếu thì trả về kết quả
B8: Hiển thị kết quả sửa thành công e) Chức năng xóa lớp học
Hình 3.6: Biểu đồ tuần tự chức năng xóa lớp học
Mô tả: Cho phép admin xóa lớp học khỏi hệ thống
B1: Mở giao diện quản lý và chọn vào danh sách lớp học
B2: Chọn lớp học cần xóa
B3: Hệ thống yêu cầu xác nhận
B4: Quản trị viên xác nhận xóa
B6: Xóa lớp học trong cơ sở dữ liệu hệ thống
14 f) Chức năng thêm môn học
Hình 3.7: Biểu đồ tuần tự chức năng thêm môn học
Tác nhân: Admin, giáo viên
Mô tả: Cho phép Admin và giáo thêm môn học của một lớp học
B1:Mở giao diện thêm lớp học
B5: Thông tin nhập vào sai thì trả về kết quả
B8: Hiển thị kết quả thêm thành công g) Chức năng sửa môn học
Hình 3.8: Biểu đồ tuần tự chức năng sửa môn học
Tác nhân: quản trị viên, giáo viên
Mô tả: Cho phép quản trị viên sửa thông tin môn học
B5: Thông tin nhập vào sai, thiếu thì trả về kết quả
B8: Hiển thị kết quả sửa thành công h) Chức năng xóa môn học
Hình 3.9: Biểu đồ tuần tự chức năng xóa môn học
Tác nhân: Admin, giáo viên
Mô tả: Cho phép admin xóa môn học khỏi hệ thống
B1: Mở giao diện quản lý và chọn vào danh sách môn học
B2: Chọn môn học cần xóa
B3: Hệ thống yêu cầu xác nhận
B4: Quản trị viên xác nhận xóa
B6: Xóa môn học trong cơ sở dữ liệu hệ thống
16 i) Chức năng thêm bài học
Hình 3.10: Biểu đồ tuần tự chức năng thêm bài học
Tác nhân: Admin, giáo viên
Mô tả: Cho phép admin và giáo viên thêm bài học vào hệ thống
B1:Mở vào from thêm bài học
B5: Thông tin nhập vào sai, thiếu thì trả về kết quả
B8: Hiển thị kết quả thành công j) Chức năng sửa bài học
Hình 3.11: Biểu đồ tuần tự chức năng sửa bài học
Tác nhân: Admin, giáo viên
Mô tả: Cho phép admin và giáo viên sửa bài học trong hệ thống
B5: Thông tin nhập vào sai, thiếu thì trả về kết quả
B8: Hiển thị kết quả sửa thành công k) Chức năng xóa bài học
Hình 3.12: Biểu đồ tuần tự chức năng xóa bài học
Tác nhân: Admin, giáo viên
Mô tả: Cho phép admin và giáo xóa bài học khỏi hệ thống
B1: Mở giao diện quản lý và chọn vào danh sách bài học
B2: Chọn bài học cần xóa
B3: Hệ thống yêu cầu xác nhận
B4: Quản trị viên xác nhận xóa
B6: Xóa bài học trong cơ sở dữ liệu hệ thống
18 l) Chức năng thêm bài tập
Hình 3.13: Biểu đồ tuần tự chức năng thêm bài tập
Tác nhân: Admin, giáo viên
Mô tả: Cho phép admin và giáo viên thêm bài tập vào hệ thống
B1: Mở form thêm bài tập
B5: Thông tin nhập vào sai, thiếu thì trả về kết quả
B8: Hiển thị kết quả thành công m) Chức năng sửa bài tập
Hình 3.14: Biểu đồ tuần tự chức năng sửa bài tập
Tác nhân: Admin, giáo viên
Mô tả: Cho phép admin và giáo viên sửa bài tập trong hệ thống
B1: Mở form thêm bài tập
B5: Thông tin nhập vào sai, thiếu thì trả về kết quả
B8: Hiển thị kết quả vừa cập nhật n) Chức năng xóa bài tập
Hình 3.15: Biểu đồ tuần tự chức năng xóa bài tập
Tác nhân: Admin, giáo viên
Mô tả: Cho phép admin xóa lớp học khỏi hệ thống
B1: Mở giao diện quản lý và chọn vào danh sách bài tập
B3: Hệ thống yêu cầu xác nhận
B4: Quản trị viên xác nhận xóa
B6: Xóa bài tập trong cơ sở dữ liệu hệ thống
Hình 3.16: Biểu đồ tuần tự chức năng tìm kiếm
Tác nhân: Admin, Giáo viên, quản trị viên
Mô tả: Cho phép người dùng tìm kiếm các bài học thông qua các từ khóa
B1: Nhập tên từ khóa cầm tìm kiếm vào giao diện tìm kiếm
B3: Hệ thống sẽ lấy thông tin từ giao diện
B4: Hệ thống tìm kiếm thông tin vừa lấy được trên database
B5: Database trả về kết quả
B6:Hiển thị trang danh sách kết quả
B7: Hiển thị kết quả trả về
CƠ SỞ DỮ LIỆU HỆ THỐNG
Hình 3.18: Cơ sở dữ liệu hệ thống
KẾT QUẢ DEMO
3.3.1 Giao diện Frontend a Trang chủ
Hình 3.19: Giao diện trang chủ
- Trong Giao diện này hiển thị ngay khi người truy cập vào trang web
Giao diện này bao gồm các chức năng như đăng nhập, đăng ký, chọn lớp học, tham gia đố vui, hỏi đáp, gửi phản hồi và lưu bài học.
Hình 3.20: Giao diện trang chủ
- Đây là giao diện trang chủ khi khách truy cập vào
23 b Trang danh sách bài học
Hình 3.21: Giao diện trang danh sách bài học
- Sau khi truy cập vào trang web và chọn lớp học, môn học sẽ hiển thi giao diện giao diện dành cho học viên
- Tại đây là danh sách các bài học của môn Tiếng Việt, học viên có thể chọn từng bài để học
24 c Trang chi tiết bài học
Hình 3.22: Giao diện trang chi tiết bài học
Sau khi truy cập vào trang chủ của website, học viên sẽ chọn lớp học và môn học, từ đó bài học sẽ hiển thị trên trang chi tiết.
Trang web này cho phép học viên xem bài học và thực hiện bài tập vận dụng Nếu học viên không hoàn thành bài học trong ngày, họ có thể lưu lại để tiếp tục học vào ngày hôm sau Ngoài ra, trang cũng cung cấp thông tin chi tiết về bài tập.
Hình 3.23: Giao diện trang chi tiết bài tập
- Khi học viên đang ở trang chi tiết bài học, học viên bấm vào chức năng làm bài tập vận dụng sẽ hiển thị ra trang chi tiết bài tập
Trong phần bài tập vận dụng, học viên sẽ lựa chọn đáp án phù hợp cho các câu hỏi đã đưa ra Bài tập đi kèm với bộ đếm thời gian, giúp theo dõi tiến độ làm bài, và có thể đánh dấu cũng như in bài tập để tiện cho việc ôn tập.
Hình 3.24: Giao diện trang góc học tập
Trên trang chủ, người dùng có thể truy cập vào chức năng "Góc học tập" để hiển thị danh sách các bài học Trang chi tiết của góc học tập sẽ cung cấp thông tin cụ thể về từng bài học.
Hình 3.25: Giao diện trang chi tiết góc học tập
- Trang chi tiết các bài học ở trong trang góc học tập
26 g) Trang chi tiết đố vui
Hình 3.26: Giao diện trang chi tiết đố vui h) Trang liên hệ
Hình 3.27 Giao diện trang liên hệ
Hình 3.28: Giao diện trang đăng nhập
Trang đăng nhập cho phép người dùng truy cập bằng cách nhập email và mật khẩu đã được đăng ký trước đó, từ đó sử dụng các chức năng phù hợp với quyền hạn của mình.
- Sau khi đã nhập mail và password đầy đủ người dùng click vào nút “ĐĂNG NHẬP” để có thể ruy cập vào hệ thống
3.3.2 Giao diên Backend a Trang chủ quản trị
Hình 3.29: Giao diện trang chủ quản trị
Giao diện trang chủ của quản trị viên chỉ cho phép admin truy cập và quản lý các thống kê quan trọng, trong khi tài khoản giáo viên chỉ được cấp quyền quản lý một số chức năng nhất định trong trang quản trị Ngoài ra, trang danh sách bài học cũng được thiết kế để hỗ trợ quản lý nội dung hiệu quả.
Hình 3.30: Giao diện trang danh sách bài học
- Ở phân menu bên trái của giao diện backend ta chọn danh sách bài học c) Trang thêm bài học
Hình 3.31: Giao diện trang thêm bài học
- Ở phần menu bên trái giao diện backend, chọn vào thêm bài học
Trên trang thêm bài học, hãy đảm bảo điền đầy đủ thông tin của môn học vào từng ô dữ liệu Sau khi hoàn tất, nhấn "thêm" để lưu Hệ thống sẽ thông báo kết quả sau khi quá trình thêm hoàn tất.
Hình 3.32: Giao diện danh sách người dùng e) Trang thêm danh sách người dùng
Hình 3.33: giao diện thêm danh sách người dùng
- Ở trang thêm người dùng, Chỉ Admin mới có quyền được tác động đến trang này