Thymeleaf Edit Form Example - Thymeleaf Examples
Hi Guys 😀
Welcome to Java Inspires.
In this post, will give you thymeleaf edit form example.
Here, we are using thymleaf, spring boot and maven.
Project Structure:
pom.xml
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.3.3.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com.javainspires</groupId> <artifactId>thymeleaf-edit-form</artifactId> <version>0.0.1-SNAPSHOT</version> <name>thymeleaf-edit-form</name> <description>Demo project for Spring Boot + Thymeleaf + Edit Form</description> <properties> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> <exclusions> <exclusion> <groupId>org.junit.vintage</groupId> <artifactId>junit-vintage-engine</artifactId> </exclusion> </exclusions> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>
application.properties
#Thymeleaf Configuration spring.thymeleaf.prefix= classpath:/pages/ spring.thymeleaf.suffix= .html
home.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="ISO-8859-1"> <title>Java Inspires</title> </head> <body> <div align="center"> <h1>Home Page</h1> <table border="1"> <tr> <td>First Name</td> <td>Last Name</td> <td>Email Id</td> <td>Action</td> </tr> <tr> <td th:text="${user.firstName}"></td> <td th:text="${user.lastName}"></td> <td th:text="${user.emailId}"></td> <td><a th:href="@{/edit}">edit</a></td> </tr> </table> </div> </body> </html>
edit-form.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="ISO-8859-1"> <title>Java Inspires</title> </head> <body> <div align="center"> <h1>Edit Form</h1> <form th:action="@{/edit}" th:object="${user}" method="POST"> <table> <tr> <td>First Name</td> <td><input type="text" th:field="*{firstName}" name="firstName" /> </tr> <tr> <td>Last Name</td> <td><input type="text" th:field="*{lastName}" name="lastName" /></td> </tr> <tr> <td>Email Id</td> <td><input type="email" th:field="*{emailId}" name="email" /></td> </tr> </table> <input type="submit" value="Update" /> </form> </div> </body> </html>
User.java
package com.javainspires; /** * * @author #JavaInspires * */ public class User { private String firstName; private String lastName; private String emailId; public User() { super(); // TODO Auto-generated constructor stub } public User(String firstName, String lastName, String emailId) { super(); this.firstName = firstName; this.lastName = lastName; this.emailId = emailId; } public String getFirstName() { return firstName; } public void setFirstName(String firstName) { this.firstName = firstName; } public String getLastName() { return lastName; } public void setLastName(String lastName) { this.lastName = lastName; } public String getEmailId() { return emailId; } public void setEmailId(String emailId) { this.emailId = emailId; } }
HomeController.java
package com.javainspires; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.PostMapping; /** * * @author #JavaInspires * */ @Controller public class HomeController { // method returns a user object private User getUser() { return new User("spring", "boot", "springboot@javainspires.com"); } // request mapping method to get home page @GetMapping(path = "/home") public String getHomePage(Model model) { model.addAttribute("user", getUser()); return "home"; } // request mapping method to get edit form @GetMapping(path = "/edit") public String getEditForm(Model model) { model.addAttribute("user", getUser()); return "edit-form"; } // request mapping method to submit edited details @PostMapping(path = "/edit") public String submitForm(@ModelAttribute User user, Model model) { model.addAttribute("user", user); return "home"; } }
ThymeleafEditFormApplication.java
package com.javainspires; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class ThymeleafEditFormApplication { public static void main(String[] args) { SpringApplication.run(ThymeleafEditFormApplication.class, args); } }
Application Startup Log:
. ____ _ __ _ _ /\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \ ( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \ \\/ ___)| |_)| | | | | || (_| | ) ) ) ) ' |____| .__|_| |_|_| |_\__, | / / / / =========|_|==============|___/=/_/_/_/ :: Spring Boot :: (v2.3.3.RELEASE) 2020-09-12 12:10:30.078 INFO 10152 --- [ main] c.j.ThymeleafEditFormApplication : Starting ThymeleafEditFormApplication on DESKTOP-9LT6E5T with PID 10152 (C:\Users\#JavaInspires\Desktop\thymeleaf-edit-form\thymeleaf-edit-form\target\classes started by #JavaInspires in C:\Users\#JavaInspires\Desktop\thymeleaf-edit-form\thymeleaf-edit-form) 2020-09-12 12:10:30.086 INFO 10152 --- [ main] c.j.ThymeleafEditFormApplication : No active profile set, falling back to default profiles: default 2020-09-12 12:10:31.481 INFO 10152 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port(s): 8080 (http) 2020-09-12 12:10:31.495 INFO 10152 --- [ main] o.apache.catalina.core.StandardService : Starting service [Tomcat] 2020-09-12 12:10:31.495 INFO 10152 --- [ main] org.apache.catalina.core.StandardEngine : Starting Servlet engine: [Apache Tomcat/9.0.37] 2020-09-12 12:10:31.639 INFO 10152 --- [ main] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring embedded WebApplicationContext 2020-09-12 12:10:31.640 INFO 10152 --- [ main] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 1442 ms 2020-09-12 12:10:31.921 INFO 10152 --- [ main] o.s.s.concurrent.ThreadPoolTaskExecutor : Initializing ExecutorService 'applicationTaskExecutor' 2020-09-12 12:10:32.236 INFO 10152 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port(s): 8080 (http) with context path '' 2020-09-12 12:10:32.267 INFO 10152 --- [ main] c.j.ThymeleafEditFormApplication : Started ThymeleafEditFormApplication in 2.886 seconds (JVM running for 5.613)
Screenshots:
Thats It Guys😀