Learn Spring Framework: Template and Layout with Thymeleaf


04/09/2017 21:59:00 352 Web

Ini merupakan lanjutan dari seri belajar spring framework, sebelumnya telah mencoba mengenai instalasi dan uji coba. Jika pada tutorial sebelumnya berbasis bagaimana menghasilkan Restfull API, maka kali ini saya mencoba untuk menampilkan halaman HTML biasa dan juga mempelajari mengenai templating pada Spring Framework. Ada beberapa hal yang saya perlu ketahui :

  1. Menampilkan HTML
  2. Passing data ke view
  3. extends view
  4. Form
  5. dan fitur-fitur

    Pada sesi pembelajaran saya ini saya masih mencoba sebatas pada poin 1 dan 2 karena hal ini paling penting.

resources/template directory

Untuk bekerja dengan template atau file-file asset maka perlu dibuat directory resources\template pada directory main sehingga menjadi src/main/resources/template

SecondController.java

Kita buat satu lagi controller dengan nama SecondController dan diletakan pada src/main/java/hello/SecondController.java dengan code sebagai berikut:

package hello;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.ui.Model;

@Controller
public class SecondController extends WebMvcConfigurerAdapter{
    @GetMapping("/")
    public String index(Model model) {
        model.addAttribute("name", "rofilde");
        return "index";
    }
}

Pada code diatas perhatikan terdapat annotation @Controller dimana salah satu fungsinya ialah memberitahukan bahwa akan menyediakan konten berupa halaman web. Sedangkan method index() megembalikan nilai index yang merupakan halaman HTML. Halaman file index.html tersebut dapat kita buat pada direktori template yang telah kita buat sebelumnya, dengan kode sederhana sebagai berikut:

src/main/resources/template/index.html

<p th:text="'Hello ' + ${name}" />

Untuk melakukan uji coba jalankan perintah ./mvnw spring-boot:run dan buka buka web browser pada alaman http://localhost:8080.

Templating

Pada spring framework terdapat beberapa template engine yang dapat digunakan, salah satunya ialah Thymeleaf yang banyak digunakan oleh developer spring. Template engine ini tidak khusus ditujukan untuk spring, melainkan ditujukan untuk java secara umum.

Pada tutorial sebelumnya saya men-deploy spring menggunakan maven sehingga dependencies thymeleaf dapat ditambahkan pada file pom.xml sebagai berikut:

        <dependency>
          <groupId>nz.net.ultraq.thymeleaf</groupId>
          <artifactId>thymeleaf-layout-dialect</artifactId>
          <version>2.0.5</version>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf</artifactId>
            <version>3.0.1.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf-spring4</artifactId>
            <version>3.0.1.RELEASE</version>
        </dependency>

Pada directory template tambahkan file misalkan dengan nama base.html dengan code sebagai berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Layout page</title>
</head>
<body>
    <header>
        <h1>My website</h1>
    </header>
    <section layout:fragment="content">
        <p>Page content goes here</p>
    </section>
    <footer>
        <p>My footer</p>
        <p layout:fragment="custom-footer">Custom footer here</p>
    </footer>  
</body>
</html>

Pada code base.html diatas terdapat bagian yang ditandai dengan atribut layout:fragment="content" dan layout:fragment="custom-footer" yang menandakan bagian kode HTML ini dapat di-extends diganti dengan konten lainnya.

    <section layout:fragment="content">
        <p>Page content goes here</p>
    </section>
    ...
    <footer>
        <p>My footer</p>
        <p layout:fragment="custom-footer">Custom footer here</p>
    </footer>  

Untuk menggunakan template base.html kita dapat menggunakan perintah layout:decorate="~{base}" misalkan kita akan terapkan pada index.html yang telah dibuat sebelumnya:

<html layout:decorate="~{base}">

  <section layout:fragment="content">
    <p th:text="'Hello ' + ${name}" />
  </section>

</html>

Demikian sesi pembelajaran ini mudahan dapat membantu. Terimakasih!