Spring boot with Thymeleaf example

By Sidd Bhattacharjee -
This blog shows how to use Thymeleaf as a template engine with Spring boot.


Technologies Used

  • Java 8
  • Spring framework 1.5.9
  • Spring boot 1.5.9
  • Thymeleaf 2.1.6
  • Tomcat embed 8.5.23
  • Logback 1.1.1.1
  • Junit 4.12
  • Bootstrap 4
  • Maven 3.5.0

Implementation

This project uses Maven to build the project.  It shows a very simple example of a login page with corresponding Spring boot controller.
The goal of this project is to have a login page rendered using Thymeleaf template.
The template it self uses the bootstrap css for styling.

High level steps as described bellow with sample code

Define the pom.xml file
Write Spring boot app class
Write Spring boot controller class
Write  Thymeleaf Template for the controller class
Write the CSS referred by Template file

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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <artifactId>Javaexp.blogspot.com-thymeleaf</artifactId>
  <version>1.0.0-SNAPSHOT</version>
  <packaging>war</packaging>
  <name>Javaexp.blogspot.com Thymeleaf</name>
  <description>Javaexp Thymeleaf Example</description>
  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.5.9.RELEASE</version>
    <relativePath />
  </parent>
  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <java.version>1.8</java.version>
  </properties>

  <dependencies>
  
    <!-- Springboot -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
      <version>1.5.9.RELEASE</version>
    </dependency>

    <!-- test -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-test</artifactId>
      <scope>test</scope>
    </dependency>

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

    <!-- hot swapping, disable cache for template, enable live reload -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-devtools</artifactId>
      <optional>true</optional>
      <scope>runtime</scope>
    </dependency>

  </dependencies>
  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
        <configuration>
          <addResources>true</addResources>
        </configuration>
        <executions>
          <execution>
            <goals>
              <goal>repackage</goal>
            </goals>
          </execution>
        </executions>
      </plugin>
      <plugin>
        <artifactId>maven-war-plugin</artifactId>
        <configuration>
          <webResources>
            <resource>
              <directory>dist/</directory>
            </resource>
          </webResources>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>

StartWebApplication.java

package com.blogspot.blogger;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class StartWebApplication {

  public static void main(String[] args) {
    SpringApplication.run(StartWebApplication.class, args);
  }

}


WebLoginController.java

package com.blogspot.blogger;

import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class WebLoginController {

  @GetMapping("/login")
  public String login(Model model) {
    return "login";
  }

}

For the Thymeleaf template file put it under src/main/resources/templates/login.html

login.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<link rel="stylesheet" type="text/css" th:href="@{~/css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" th:href="@{~/css/style.default.css}" />
<title>Javaexp.blogspot.com Thymeleaf Example</title>
</head>
<body>
  <div class="container">
    <div class="modal-dialog">
      <div class="loginmodal-container">
        <h1>Login to Your Account</h1>
        <form>
          <input type="text" name="user" placeholder="Username"></input> <input
            type="password" name="pass" placeholder="Password"></input> <input
            type="submit" name="login" class="login loginmodal-submit"
            value="Login"></input>
        </form>
        <div class="login-help">
          <a href="#">Register</a> - <a href="#">Forgot Password</a>
        </div>
      </div>
    </div>
  </div>
</body>
</html>


application.properties

#SPRING BOOT MVC
spring.mvc.view.prefix=/static/
spring.mvc.view.suffix=.html

Run the Spring boot Application

$ mvn spring-boot:run

INFO restartedMain o.a.c.h.Http11NioProtocol:179 - Starting 
ProtocolHandler ["http-nio-8080"]
INFO restartedMain o.a.t.u.n.NioSelectorPool:179 - Using a shared selector for servlet write/read
INFO restartedMain o.s.b.c.e.t.TomcatEmbeddedServletContainer:201 - Tomcat started on port(s): 8080 (http)
INFO restartedMain c.b.b.StartWebApplication:57 - Started StartWebApplication in 2.337 seconds (JVM running for 2.735)

Demo

Goto : http://localhost:8080/login



Download and Run

git clone https://github.com/siddharthagit/spring-boot-references.git
cd spingboot-web-thymeleaf
mvn spring-boot:run

Comments

Post a Comment

Popular posts from this blog

Difference between volatile and synchronized

By -
volatile is a field modifier, while synchronized modifies code blocks and methods. So we can specify three variations of a simple accessor using those two keywords: int i1; int geti1() {return i1;} volatile int i2; int geti2() {return i2;} int i3; synchronized int geti3() {return i3;} geti1() accesses the value currently stored in i1 in the current thread . Threads can have local copies of variables, and the data does not have to be the same as the data held in other threads. In particular, another thread may have updated i1 in it's thread, but the value in the current thread could be different from that updated value. In fact Java has the idea of a "main" memory, and this is the memory that holds the current "correct" value for variables. Threads can have their own copy of data for variables, and the thread copy can be different from the "main" memory. So in fact, it is possible for the "main"
Read more

Converting Java Map to String

By -
Java Collections framework, String manipulation etc is something that we often encounter in Development process. For processing collections (like checking null/empty, Intersection, Disjunction) We do have some of the very use full libraries. Some of the Collection related libraries are Apche Commons Collections and Google  Collections(Guava). Problem Use Case This article explains how to convert a Java Map to String(and vice versa) using different libraries and technique. One way is to use StringBuilder(Or String) and loop though the Map and build the String by applying some sort of separator ( for key:value and entry). Here we have to take care of the null value etc. Without Any Library If we want to convert the map to a String with key value separator and also individual entry seperator in the resulting String, we have to write code for that. For a simple Map, we have to iterate though the map, take care of the null values etc. Following is a sample to get String built
Read more

Masking Credit Card number in Java

By -
Sometimes we need to mask crucial information like Credit Card Numbers, CVV numbers etc before storing  or logging the information. This example mask Credit Card Number (Except last 4 Digit) from a Text which contains information along with Credit Card Number. The following example demonstrates how we can easily mask the credit card with Matcher and Pattern Classes. This Sample Code uses Matcher and Pattern. Pattern Used in this sample is not optimized for Credit Card Numbers, this pattern will get any numerical numbers in the String Content.  Based on the Credit Card Type a more efficient and Strict RegEx can be used to mask the Credit Card. /**Mask the Credit card number but last four digit value **/   Pattern PATTERN = Pattern.compile( "[0-9]+" ); String message = content; Matcher matcher = PATTERN.matcher(message); String maskingChar = "*"; StringBuilder finalMask = new StringBuilder(maskingChar);
Read more