Template Engine Thymeleaf

Layout dengan Thymeleaf

πŸ’‘
Thymeleaf adalah sebuah template engine yang digunakan di lingkungan Java Virtual Machine (JVM). Ia mampu mendukung berbagai format seperti HTML, XML, teks, CSS, JavaScript, dan raw. Salah satu kemampuan yang membuat Thymeleaf diakui sebagai Natural Template adalah kelebihannya dalam mengizinkan pembuatan 2 value yang sama. Dalam hal ini, Thymeleaf dapat mempermudah kolaborasi antara desainer dan programer. Apabila value dari sumber data belum tersedia, desainer dapat menggunakan value HTML sebagai pengganti.
Kotlin
Copy
<input type="text" name="userName" value="James Carrot" th:value="${user.name}" />
​

Menggunakan Thymeleaf

Tambahkan xmlns dibawah ini pada tag html
Kotlin
Copy
<html xmlns:th="http://www.thymeleaf.org">
​

Expression di Thymeleaf

Menampilkan pesan menggunakanΒ #{}Contoh Menampilkan nama user yang sedang online
Kotlin
Copy
<p th:utext="#{home.welcome(${session.user.name})}">
​
Menampilkan variabel menggunakanΒ ${}contoh menggunakan th:each:
Kotlin
Copy
<tr th:each="pesertas : ${peserta}"> <td th:text="${pesertas.nama}"></td> <td th:text="${pesertas.email}"></td> <td th:text="${pesertas.noHp}"></td> <td> <a th:href="${'/peserta/edit/'+pesertas.id}"><span class="glyphicon glyphicon-edit"></span></a> <a th:href="${'/peserta/hapus/'+pesertas.id}"><span class="glyphicon glyphicon-remove"></span></a> </td> </tr>
​
Menampilkan link url menggunakanΒ @{}.Contoh url dapat berasal dari mapping controller :
Kotlin
Copy
<a th:href="@{/peserta}">Daftar Peserta</a>
​
Contoh url dapat berasal dari default folder :
Kotlin
Copy
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
​

Template Inheritance

Template Inheritance dapat menggunakan
Kotlin
Copy
<div layout:fragment="content">
​