Giới thiệu
Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu chi tiết cách thức lấy dữ liệu từ backend và hiển thị trên giao diện người dùng sử dụng Thymeleaf trong môi trường EzyPlatform. Đây là phần tiếp theo của dự án xây dựng trang web CourseZone, vì vậy nếu bạn chưa đọc bài viết trước đây, hãy tham khảo để nắm vững nền tảng.
Yêu Cầu
Để theo dõi bài viết này, bạn cần:
- Cài đặt và cấu hình EzyPlatform theo hướng dẫn lần trước.
- Có kiến thức cơ bản về Java, Spring Boot và Thymeleaf.
1. Tìm Hiểu Về Plugin Trong EzyPlatform
1.1 Hệ thống Plugin
EzyPlatform có một hệ thống plugin linh hoạt cho phép người dùng tùy chỉnh và mở rộng chức năng của nền tảng. Các plugin này là những module độc lập có thể dễ dàng thêm vào hoặc gỡ bỏ mà không ảnh hưởng đến core của hệ thống.
1.2 Lợi Ích Của Việc Sử Dụng Plugin
- Tính mô-đun hóa cao
- Dễ dàng mở rộng chức năng
- Tùy chỉnh theo nhu cầu cụ thể
- Cải thiện khả năng bảo trì và nâng cấp
1.3 Cấu Trúc Một Plugin
Một plugin thường bao gồm các thành phần như:
- Lớp chính triển khai EzyPlugin interface
- Tập tin cấu hình (config.yml)
- Các lớp thực thi logic
- Resource nếu cần
1.4 Giao Diện Admin Quản Lý Dữ Liệu
Chúng ta sẽ sử dụng giao diện admin có sẵn của EzyPlatform để thêm thông tin cần thiết cho dự án CourseZone. Để khởi động admin và trang mặc định của CourseZone, hãy mở Intellij và thực hiện theo các bước hướng dẫn.
2. Lấy Dữ Liệu Từ Controller Để Đổ Dữ Liệu Lên Frontend
2.1 Tạo Controller và Tập Tin HTML
Chúng ta sẽ viết mã trong thư mục coursezone-theme. Đảm bảo tạo cấu trúc thư mục phù hợp và thêm các lớp HTML cần thiết trong phần template của resource.
2.2 Viết Mã Để Lấy Dữ Liệu Từ Backend
Trong thư mục controller, tạo lớp CourseController.java. Khai báo các lớp service sử dụng trong plugin để lấy dữ liệu. Tạo constructor cho class CourseController. Chúng ta sẽ tập trung vào việc lấy danh sách khóa học và chi tiết của một khóa học.
2.2.1 Tạo Thông Tin Khóa Học Trong Database
Mở trang admin tại URL: http://localhost:9090/, sau đó tiến hành thêm thông tin về giảng viên và khóa học. Hãy chắc chắn rằng dữ liệu đã được lưu thành công trong database.
2.2.2 Lấy Danh Sách Khóa Học
Tạo phương thức classesGet để lấy danh sách các khóa học. Dữ liệu sẽ được trả về trang giao diện course.html bằng cách sử dụng Thymeleaf. Hãy nhớ kiểm tra xem danh sách khóa học đã được hiển thị chính xác hay chưa.
2.2.3 Lấy Thông Tin Chi Tiết Khóa Học
Tạo thêm phương thức getDetailCourse để lấy thông tin chi tiết cho từng khóa học. Sử dụng biến course để hiển thị dữ liệu trên template course-detail.html.
2.2.4 Triangle Link Cho Chi Tiết Khóa Học
Thêm đường dẫn trong HTML cho nút xem chi tiết, để người dùng có thể chuyển tới trang khóa học chi tiết khi nhấn vào. Hướng dẫn cách hiển thị các thông tin cần thiết cũng như thiết lập chuẩn cho các thuộc tính của khóa học.
Kết Luận
Chúng ta đã hoàn thành việc lấy dữ liệu từ backend lên frontend qua Thymeleaf và các phương thức đã có sẵn trong EzyPlatform. Hy vọng qua bài viết này, bạn sẽ nắm được kiến thức cần thiết để triển khai và mở rộng dự án của mình.
source: viblo
