Thymeleaf is a Java template engine for processing and creating HTML, XML. In this article, we will create a simple login form using Thymeleaf in Spring boot.
What is Thymeleaf?
Thymeleaf is a server-side Java template engine. It is an open-source Library of Java that is used to create and process HTML, XML, CSS, JS, and text information. It is best for serving HTML/XHTML in the view layer of MVC-based applications. It is also an open-source software licensed under Apache Licence 2.0.
One of the good features of Thymeleaf is that it works both in web and non-web environments. It generates dynamic content on the HTML page.
It makes the code of Java in HTML code look elegant and highly maintainable i.e why It is mostly used for generating views in web applications. Not only does it process HTML but also some other templates.
Thymeleaf provides the following templates:
- HTML
- XML
- TEXT
- JAVASCRIPT
- CSS
- RAW
Why do we need Thymeleaf?
Till now, while creating web applications we have used JSP pages at the view layer of an MVC application. But, It is considered less compatible as compared to the Thymeleaf template.
- It is quite extensible and has a natural templating capability.
- There is an expression language used in thymeleaf which is more powerful than JSP expression.
Let us implement the Thymeleaf template in a Spring Boot Application:
Create a Login Form using Thymleaf in Spring Boot Project.
Step 1: Open IDE STS- Spring Tool Suite
Step 2: Go to File > Spring Starter Project.
Step 3: Now, fill all the fields as shown below and click Next.
Step 4: Now, Add the dependencies of Thymeleaf and spring web and click Next > Finish.
Create an Entity Class
Here, we have created a Login class with two fields username and password.
Login.java
package com.abc.thymleafex.model;
public class Login {
private String username;
private String password;
public Login() {
super();
// TODO Auto-generated constructor stub
}
public Login(String username, String password) {
super();
this.username = username;
this.password = password;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
Create a Controller
The request for the web page will be handle by the handler methods in the controller class using @GetMapping and @PostMapping.
package com.abc.thymleafex.controller;
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;
import com.abc.thymleafex.model.Login;
@Controller
public class LoginController {
@GetMapping("/login")
public String showLogin() {
return "login";
}
//Check for Credentials
@PostMapping("/login")
public String login(@ModelAttribute(name="loginForm") Login login, Model m) {
String uname = login.getUsername();
String pass = login.getPassword();
if(uname.equals("Admin") && pass.equals("Admin@123")) {
m.addAttribute("uname", uname);
m.addAttribute("pass", pass);
return "welcome";
}
m.addAttribute("error", "Incorrect Username & Password");
return "login";
}
}
Create Template
Go to src/main/resources/template folder and create an index.html file. Now inside the index.html file make sure to add the following code:
<html xmlns:th="http://www.thymeleaf.org">
Now, to make the look and feel of index.html we will add the CSS.
Go to src/main/resources/static folder and add a CSS folder and in that add style.css file. Following is the code to add in style.css:
@charset "ISO-8859-1";
h2{
color: aqua;
font-weight: bold;
font-variant: inherit;
}
body{
background-color: #FFDE03;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
/* ::selection{
background: rgba(26,188,156,0.3);
} */
.container{
max-width: 440px;
padding: 0 20px;
margin: 170px auto;
}
.wrapper{
width: 100%;
background: #fff;
border-radius: 5px;
box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.1);
}
.wrapper .title{
height: 90px;
background: green;
border-radius: 5px 5px 0 0;
color: #fff;
font-size: 30px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper form{
padding: 30px 25px 25px 25px;
}
.wrapper form .row{
height: 45px;
margin-bottom: 15px;
position: relative;
}
.wrapper form .row input{
height: 100%;
width: 100%;
outline: none;
padding-left: 60px;
border-radius: 5px;
border: 1px solid lightgrey;
font-size: 16px;
transition: all 0.3s ease;
}
form .row input:focus{
border-color: black;
box-shadow: inset 0px 0px 2px 2px rgba(26,188,156,0.25);
}
form .row input::placeholder{
color: #999;
}
.wrapper form .row i{
position: absolute;
width: 47px;
height: 100%;
color: #fff;
font-size: 18px;
background: #16a085;
border: 1px solid #16a085;
border-radius: 5px 0 0 5px;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper form .pass{
margin: -8px 0 20px 0;
}
.wrapper form .pass a{
color: #16a085;
font-size: 17px;
text-decoration: none;
}
.wrapper form .pass a:hover{
text-decoration: underline;
}
.wrapper form .button input{
color: #fff;
font-size: 20px;
font-weight: 500;
padding-left: 0px;
background: green;
border: 1px solid #16a085;
cursor: pointer;
}
.wrapper form .signup-link{
text-align: center;
margin-top: 20px;
font-size: 17px;
}
.wrapper form .signup-link a{
color: green;
text-decoration: none;
}
form .signup-link a:hover{
text-decoration: underline;
}
p{
color: red;
}
Now, we will see how to add the link of style.css inside index.html. Type the following code inside your index.html.
<link th:href="@{/css/style.css}" rel="stylesheet">
Note: ‘@’ sign is used for the page context.
Now, let us see the index.html file
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Login Form</title>
<link th:href="@{/css/style.css}" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="title"><span>Login Form</span></div>
<form th:action="@{/login}" th:object="${loginForm}" method="post">
<p th:if="${error}" class="error">UserName & Password Incorrect</p>
<div class="row">
<input type="text" name="username">
</div>
<div class="row">
<input type="password" name="password">
</div>
<div class="row button">
<input type="submit" value="Login">
</div>
</form>
</div>
</div>
</body>
</html>
welcome.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Welcome</title>
<link th:href="@{/css/style.css}" rel="stylesheet">
</head>
<body>
<div class="container">
<h3>***Getting Value in Thymeleaf***</h3>
Username <p th:text="${uname}"></p>
Password <p th:text="${pass}"></p>
</div>
</body>
</html>
Now, Run the SpringBootThymeleafApplication class and Go to localhost:8888 and see the following output.
In this way, we use thymeleaf template in a spring boot application.
