[SPRING] ทำความรู้จักกับ Thymeleaf

จาก Blog ตอนที่แล้วที่ได้ทดสอบ สวัสดีชาวโลก บน Spring Framework กันไปแล้วครับ แต่เว็บของเรามันไม่ได้มีหน้าตาอะไรเลย มีแต่ข้อความอย่างเดียวครับ วันนี้ผมจะมาเพิ่มหน้าจอในส่วนของ View นะครับ

สิ่งที่ต้องเตรียม

📌 งานจาก Blog ตอนก่อนครับ
📌 ถ้าไม่มีสามารถเพิ่ม Dependency ลงในไฟล์ pom.xml ได้ครับ

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

📌 หรือจะใช้ Spring Initializr ก็ได้ครับ

รู้จักกับ Thymeleaf กันก่อนครับ

📌 เป็น Template Engine โดยหลักเราเขียน View ด้วย HTML แหละครับ แต่มี Tag บาง Tag ช่วยให้จัดการกับข้อมูลได้ง่ายขึ้นครับ
📌 ถ้าลองเปิดไฟล์ของ Thymeleaf โดยไม่ผ่าน Sping มันจะแสดงผลเหมือน HTML ทั่วๆไปครับ

มาทำกันเลย

📌 มาดูที่โครงสร้างกันก่อนครับ
📌 ตอนนี้เรามายุ่งกับไฟล์ application.properties ครับ เพื่อให้ Spring รู้จักว่า Thymeleaf เราอยู่ที่ไหนครับ

#Thymeleaf 
spring.mvc.view.prefix=/templates/  #อันนี้เป็นค่า Default อยู่แล้ว
spring.mvc.view.suffix=.html        #อันนี้เป็นค่า Default อยู่แล้ว

📌 จากนั้นสร้างโพลเดอร์

• controller - เอาไว้จัดการกับ Flow ที่ได้มาจากหน้าจอ และเรียก Service ที่เกี่ยวข้องครับ
• service - จัดการกับ Busines Logic
• ต่อ Database - จัดการกับพวกข้อมูล Data Source ทั้งหลายครับ (ตอนนี้ยังไม่ได้ใช้ครับ) มี 2 Pattern ที่เป็นไปได้ครับ DAO / Repository ครับ
• entity - พวก Data Class จะทำเป็น POJO Class ครับ

📌 ตอนนี้มาเพิ่ม Java Class กันครับ

• สร้าง Person.java ในโพลเดอร์ Entity ครับ

package com.cu.thesis.WeMuBPMN.entity;

public class Person
{
    private String Fistname;
    private String Lastname;

    public Person(String pFirstname, String pLastname)
    {
        this.Fistname = pFirstname;
        this.Lastname = pLastname;
    }

    public void setFirstname(String pFirstname)
    {
        this.Fistname = pFirstname;
    }

    public String getFirstname()
    {
        return this.Fistname;
    }

    public void setLastname(String pLastname)
    {
        this.Lastname = pLastname;
    }

    public String getLastname()
    {
        return this.Lastname;
    }

    public String getFullname()
    {
        return this.getFirstname() + " " + this.getLastname();
    }
}

• สร้าง PersonService.java ในโพลเดอร์ Service ครับ

package com.cu.thesis.WeMuBPMN.service;

import com.cu.thesis.WeMuBPMN.entity.Person;
import org.springframework.stereotype.Service;

@Service
public class PersonService
{
    public Person viewPerson()
    {
        return new Person("Chatri", "Ngambenchawong");
    }
}

• สร้าง PersonController.java ในโพลเดอร์ Controller ครับ

package com.cu.thesis.WeMuBPMN.controller;

import com.cu.thesis.WeMuBPMN.entity.Person;
import com.cu.thesis.WeMuBPMN.service.PersonService;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/person")
public class PersonController
{
    @Autowired
    private PersonService personService;
    
    @GetMapping("/")
    public String index(ModelMap model){
        Person person = personService.viewPerson();
        //person - parameter แรก ถูกเอาไปใช้ที่หน้า UI
        model.addAttribute("person",person);
        //บอกว่าไฟล์เราอยู่ที่ Folder person ไฟล์ index.html
        return "person/index";
    }
}

• ในส่วนของ UI ต้องสร้างให้ล้อกับที่ Method index ใน กำหนดไว้ด้วยครับ  คือ

นั้นหมายความว่าต้องสร้าง View ที่ basePath src/main/resource/templates/  ต่อด้วยค่าที่ค่าที่ Return Method index person/index.html ในClass PersonController.java  ครับ

• มาดู Structure ได้ครับ

src
-> main
   -> java (ภาษาที่ใช้)
      -> com (Package#01)
	  -> cu (Package#02)
             -> thesis (Package#03)
                    -> WeMuBPMN (Project)
		       -> entity
                          Person.java
                       -> service
                          PersonService.java
                       -> controller
                          PersonController.java
   -> resource
      -> static
         -> css
	    person.css
      -> templates
	 -> person
            index.html  << ไฟล์ view สำหรับ person controller ครับ
      application.properties 
-> test
pom.xml << จัดการกับ Dependency ทั้งหลาย

หลังจากเข้าใจ Path ที่ต้องสร้าง View แล้ว มาสร้าง View ดีกว่า

• ไฟล์ view  index.html  ใน templates/person/ ครับ

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Getting Started : Serving Web Content</title>
    <link rel="stylesheet" href="../css/person.css" />
</head>
<body>
    <div class="page-content">
        <h1 th:text="'Hello, ' + ${person.getFullname()} + '!'" />
    </div>
</body>
</html>

• ไฟล์ css person.css  ใน static/css/ ครับ

body {
    background: #43cea2;
    background: -webkit-linear-gradient(to right, #185a9d, #43cea2); 
    background: linear-gradient(to right, #185a9d, #43cea2);
    color: #fff;
    text-align: center;
}

.page-content {
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    top: 35%;
    bottom: 0;
}

h1 {
    font-size: 46px;
    margin-top: 10px;
    margin-bottom: 10px;
}

มา Run ด้วยคำสั่ง ./mvnw spring-boot:run  เพื่อดูผลลัพธ์ผ่าน url http://localhost:8080/person/ ครับ

สำหรับ Source Code สามารถ Download ได้จากที่นี่ครับ ปล. ชื่อ package อาจจะตั้งแปลกนะ ตอนแรกตั้งใจว่าจะทำไปเลย แต่ไปๆมาๆของฝึกก่อนดีกว่า ^__^

Blog ตอนต่อไป ผมทำ CRUD แล้วครับ โดยมีการเล่นกับส่วนของ Data Source / Database ครับ