Make HTML page dynamic with thymeleaf (spring + gradle)

Last time, I displayed HTML on the screen with Try to display hello world with spring + gradle. This time I want to move the screen dynamically, so I would like to display the entered characters on the screen. Since it is a memorandum for beginners, I would be grateful if you could point out any strange points!

It looks like this after completion ↓ 入力前.PNG When you press send 入力後.PNG

I will add it as it is to the code used in the previous article, but for those who are only looking at this article, I will post the entire code without abbreviation.

Add HTML

Add a place to display the characters entered in hello.html created last time and a field to enter.

hello.html


<!DOCTYPE html>
	<head>
		<meta charset="UTF-8">
		<title>hello</title>
	</head>
	<body>
		 <h1>Hello World!!</h1>
      //Add from here ↓
		 <h1 th:text="${text}"></h1> ---1
		 
		 <form th:method="POST" th:action="changeText"> ---2
		 <input type="text" name="inputText" /> ---3
		 <input type="submit"> ---4
		 </form>
     //Add up to here ↑
	</body>
</html>
    1. Displays the entered value. The value passed to text is displayed.
  1. Specifying the method when sending with method, th: action specifies the URL.
  2. Add text field. Specifies the name of the value passed in name.
  3. It is a send button.

What is thymeleaf?

th ~ has come out. This is how to write thymeleaf. Read as time leaf. It is a template engine such as HTML and is used as standard in Spring Boot. When displaying data processed by java on the screen, it is nice to be able to check it on the screen while developing because it is HTML.

You can use it by adding the following to build.gradle and updating it.

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

If you continue to read this article from the previous article, you should have filled it in without adding it because you selected thymeleaf as a dependency when creating the project.

How do you write in thymeleaf? When it becomes, this article is very easy to read => Thymeleaf cheat sheet

Add Controller

This is also added to the HelloController created last time.

HelloController.java


package helloSpring.Controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class HelloController {
    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String hello(Model model) {
    	model.addAttribute("text", "The characters entered here are displayed"); //Add --- -1
        return "hello";
    }
    
    @RequestMapping(value = "/changeText", method = RequestMethod.POST) //Add --- 2
    public String changeText(@RequestParam(name = "inputText") String text, Model model) {
    	model.addAttribute("text", text);
        return "hello";
    }
}

    1. Set the initial message to <h1 th: text =" $ {text} "> </ h1> added in hello.html.
  1. Add a function when the send button is pressed. -@RequestParam is an annotation for receiving post parameters. -Name should be the same as the name specified in HTML input, and define the variable name. -Set the value received in the request parameter to'$ {text}'.

that's all. Next, I would like to connect to the DB and display the data. Next => Creating

Recommended Posts

Make HTML page dynamic with thymeleaf (spring + gradle)
Authentication / authorization with Spring Security & Thymeleaf
Spring Boot gradle build with Docker
Implement CRUD with Spring Boot + Thymeleaf + MySQL
Implement paging function with Spring Boot + Thymeleaf
Download JDK with Gradle and make JRE
(IntelliJ + gradle) Hello World with Spring Boot
Run WEB application with Spring Boot + Thymeleaf
Create a website with Spring Boot + Gradle (jdk1.8.x)
Run Scala applications with Spring Boot through Gradle
Build Spring Boot project by environment with Gradle
Create CRUD apps with Spring Boot 2 + Thymeleaf + MyBatis
Create your own Utility with Thymeleaf with Spring Boot
I wanted to gradle spring boot with multi-project
Try to display hello world with spring + gradle
How to embed JavaScript variables in HTML with Thymeleaf
Build a WEB system with Spring + Doma + H2DB + Thymeleaf
How to make an almost static page with rails