XEM BÀI VIẾT THEO TỪ KHÓA
angular aspnetcore bkap books csharp eclipse flutter frontend giai-thuat java jsp labguides laravel mongodb nosql opencv oracle php postgresql project python restful review servlet slides spring boot sql webapi webservice website xml xsd xslt
CÔNG NGHỆ THÔNG TIN >> SINH VIÊN BKAP

Giới thiệu và cài đặt Thymeleaf trong Eclipse

Đăng lúc: 09:58 PM - 16/03/2025 bởi Charles Chung - 293

Trong bài này chúng ta sẽ tìm hiểu về engine thymeleaf, một trong những template engine để code phần view trong SpringBoot.

1. Giới thiệu

Thymeleaf là một thư viện template engine dành cho Java, thường được sử dụng trong các ứng dụng web để tạo ra giao diện người dùng động. Nó cho phép tách biệt phần logic xử lý và giao diện người dùng trong các ứng dụng web, giúp việc phát triển trở nên dễ dàng hơn. Thymeleaf thường được sử dụng với Spring Framework, đặc biệt là trong các ứng dụng Spring Boot.

Dưới đây là một số điểm nổi bật của Thymeleaf:

  • Tích hợp dễ dàng với Spring: Thymeleaf dễ dàng tích hợp với Spring MVC và Spring Boot. Nó có thể sử dụng các đối tượng Java trong controller để render HTML động.
  • Công cụ template mạnh mẽ: Thymeleaf cung cấp các cú pháp cho phép bạn tạo ra các template linh hoạt và dễ bảo trì. Bạn có thể sử dụng các biến, vòng lặp, điều kiện, và thậm chí xử lý lỗi ngay trong file HTML.
  • Tính tương thích cao với HTML: Một trong những ưu điểm nổi bật của Thymeleaf là khả năng hiển thị mẫu HTML hoàn chỉnh ngay cả khi không có dữ liệu động. Điều này làm cho quá trình phát triển và thử nghiệm giao diện người dùng dễ dàng hơn vì bạn có thể xem giao diện ngay cả khi không có backend hoạt động.
  • Syntax dễ hiểu: Cú pháp của Thymeleaf rất giống với HTML thông thường, giúp các nhà phát triển web dễ dàng làm quen và sử dụng mà không phải học cú pháp quá phức tạp.
  • Hỗ trợ i18n: Thymeleaf cung cấp khả năng hỗ trợ các ngôn ngữ khác nhau (internationalization - i18n) cho các ứng dụng cần dịch thuật.
  • Xử lý form và dữ liệu động: Bạn có thể dễ dàng xử lý các form và hiển thị dữ liệu động từ các đối tượng Java trong mẫu HTML.

2. Cài đặt Thymeleaf plugin trong Eclipse

  • Vào menu Help-> Eclipse Marketplace

  • Tìm kiếm plugin thymeleaf -> install

3. Khai báo Thymeleaf trong view

Trong tệp view chúng ta cần khai báo namespace của thymeleaf như hình dưới

4. Cú pháp Thymleaf

Cú pháp của Thymeleaf sẽ là một attribute (Thuộc tính) của thẻ HTML và bắt đầu bằng chữ th:  hoặc tên khác tùy thuộc người dung đặt (tra chi tiết tại đây Tutorial: Using Thymeleaf)
Ví dụ: hiển thị giá trị biến name trong model ra view

<h1 th:text=“${name}”></h1>
hoặc
<h1>[[${name}]]</p>
Trong đó biến name được gửi từ controller ra view

1
2
3
4
5
 
@GetMapping("/")
public String index(Model model) {
model.addAttribute("name","Charles Chung");
return "index";
}

Trong template thymeleaf, để lấy các thông tin trong Model. bạn sẽ sử dụng Thymeleaf Standard Expression

${...}: Giá trị của một biến.
*{...}: Giá trị của một biến được chỉ định (sẽ giải thích sau)
Ngoài ra, để lấy thông tin đặc biệt hơn:
#{...}: Lấy message
@{...}: Lấy đường dẫn URL dựa theo context của server

Ví dụ 1: Giá trị của một biến
Controller: model.addAttribute("today", "Monday");
View: <p>Today is: <span th:text="${today}"></span>.</p>
*{...}: Giá trị của một biến được chỉ định
Ví dụ 2: Giá trị của một biến được xác định qua đối tượng
   <div th:object="${st}">
    <p>Name: <span th:text="*{firstName}"></span>.</p> 
    <p>Surname: <span th:text="*{lastName}"></span>.</p>
  </div>

Ví dụ 3: Lấy message trong file properties.
Properites file: home.welcome=Xin chào mọi người!
View: <p th:utext="#{home.welcome}"></p>
Ví dụ 4:Lấy đường dẫn URL dựa theo context của server
   <!-- tương đương với 'http://localhost:8080/order/details?orderId=3' -->
<a href="details.html" 
   th:href="@{http://localhost:8080/order/details(orderId=${o.id})}">view</a>
<!-- tương đương  '/order/details?orderId=3' -->
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>
<!-- tương dương '/order/3/details' -->
<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>

Ngoài ra Thymeleaf hỗ trợ rất nhiều thuộc tính trong html5, các bạn tra tại đây: Tutorial: Using Thymeleaf

5. Ví dụ Demo

Trong ví dụ này chúng ta sẽ tạo một danh sách student và hiển thị dữ liệu lên view sử dụng các biểu thức và câu lệnh trong Thymeleaf

Bước 1: Tạo project session3example1 với các dependency (các bước tạo xem bài 1)

Bước 2: Tạo các package, class, view với cấu trúc như hình dưới

Bước 3: Copy 5 ảnh thành viên vào thư mục images

Bước 4: Code lớp Student.java (biểu diễn thông tin sinh viên)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
package com.bkap.entities;

public class Student {
	private String id;
	private String name;
	private String phone;
	private boolean gender;
	private String picture;
	public Student() {
		// TODO Auto-generated constructor stub
	}
	public Student(String id, String name, String phone, boolean gender, String picture) {
		super();
		this.id = id;
		this.name = name;
		this.phone = phone;
		this.gender = gender;
		this.picture = picture;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPhone() {
		return phone;
	}
	public void setPhone(String phone) {
		this.phone = phone;
	}
	public boolean isGender() {
		return gender;
	}
	public void setGender(boolean gender) {
		this.gender = gender;
	}
	public String getPicture() {
		return picture;
	}
	public void setPicture(String picture) {
		this.picture = picture;
	}
	
}

Bước 5: Code lớp HomController (Xử lý request)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
package com.bkap.controllers;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;

import com.bkap.entities.Student;

@Controller
public class HomeController {
	//khởi tạo danh sách chứa data
	List<Student> students = new ArrayList<>();

	HomeController() {
		students.add(new Student("B001", "Nguyễn Thị Hồng Nhung", "0356555555", false, "/images/nhung.jpg"));
		students.add(new Student("B002", "Trần Bách Thảo", "098765432", false, "/images/thao.jpg"));
		students.add(new Student("B003", "Nguyễn Tuyển Cảnh", "093456798", true, "/images/canh.jpg"));
		students.add(new Student("B004", "Nguyễn Văn Dương", "098723465", true, "/images/duong.jpg"));
		students.add(new Student("B005", "Nguyễn Văn Trung", "093456876", true, "/images/trung.jpg"));
	}

	@GetMapping("/")
	public String index(Model model) {
		model.addAttribute("name", "Tìm hiểu về thymeleaf");
		model.addAttribute("students", students);
		return "index";
	}

	@GetMapping("/student/detail/{id}")
	public String detail(@PathVariable String id, Model model) {
		Student student = null;
		for (var s : students) {
			if (s.getId().equals(id)) {
				student = s;
				break;
			}
		}
		model.addAttribute("student", student);
		return "studentdetail";
	}
}

Bước 6: Code tệp index.html (hiển thị danh sách sinh viên)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Tìm hiểu về thymeleaf</title>
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" />
</head>
<body>
	<div class="container">
		<h1 class="text-center">
			<span th:text="${name}"></span>
		</h1>
		<p class="text-center">
			<i>Trainer: <span
				th:text="${@environment.getProperty('home.author')}" /></span></i>
		</p>
		<h2>DANH SÁCH SINH VIÊN</h2>
		<table class="table table-bordered">
			<tr>
				<th>Mã số</th>
				<th>Họ và tên</th>
				<th>Điện thoại</th>
				<th>Giới tính</th>
				<th>Ảnh</th>
				<th></th>
			</tr>
			<tr th:each="st : ${students}" th:object="${st}">
				<td th:text="*{id}"></td>
				<td th:text="*{name}"></td>
				<td th:text="*{phone}"></td>
				<td th:text="*{gender?'Nam':'Nữ'}"></td>
				<td><img th:src="*{picture}" width="60"/></td>
				<td>
				<a class="btn btn-info" href="#" th:href="@{/student/detail/{id}(id=*{id})}">Chi tiết</a>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>

Bước 7: Code tệp StudentDetail.html (hiển thị chi tiết 1 sinh viên)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thông tin sinh viên</title>
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" />
</head>
<body>
	<div class="container">
		<h1>Thông tin sinh viên</h1>
		<div th:object="${student}">
			<p>
				Mã số: <span th:text="*{id}"></span>
			</p>
			<p>
				Họ tên: <span th:text="*{name}"></span>
			</p>
			<p>
				Giới tính: <span th:text="*{gender?'Nam':'Nữ'}"></span>
			</p>
			<p>
				Điện thoại: <span th:text="*{phone}"></span>
			</p>
			<p>
				Ảnh: <img th:src="*{picture}" width="150" />
			</p>
		</div>
	</div>
</body>
</html>

Bước 8: Chạy và xem kết quả

Source code tải tại đây

6. Video Demo (sẽ quay trong buổi dạy lớp C2308G)

 

thay lời cảm ơn!

QUẢNG CÁO - TIẾP THỊ