DEV Community: Zar Li Hnin

Popular web client libraries in WebJars

Zar Li Hnin — Tue, 28 Jul 2020 16:39:03 +0000

I recommended the following web client libraries to manage the client-side dependencies in JVM-based web applications explicitly and easily.

jQuery

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.5.1</version>
</dependency>

Bootstrap

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>4.5.0</version>
</dependency>

popper.js

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>popper.js</artifactId>
    <version>2.0.2</version>
</dependency>

jQuery UI

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery-ui</artifactId>
    <version>1.12.1</version>
</dependency>

Font Awesome

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>font-awesome</artifactId>
    <version>5.13.1</version>
</dependency>

Angular JS

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>angularjs</artifactId>
    <version>2.0.0-alpha.22</version>
</dependency>

CoffeeScript

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>coffee-script</artifactId>
    <version>1.11.0</version>
</dependency>

Ember.js

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>emberjs</artifactId>
    <version>1.12.0</version>
</dependency>

angular

<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular</artifactId>
    <version>1.8.0</version>
</dependency>

js-beautify

<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>js-beautify</artifactId>
    <version>1.11.0</version>
</dependency>

bootstrap-colorpicker

<dependency>
    <groupId>org.webjars.bowergithub.itsjavi</groupId>
    <artifactId>bootstrap-colorpicker</artifactId>
    <version>3.2.0</version>
</dependency>

Semantic UI

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>Semantic-UI</artifactId>
    <version>2.1.4</version>
</dependency>

Using WebJars in Spring Boot

Zar Li Hnin — Mon, 27 Jul 2020 12:30:03 +0000

What is WebJars?

WebJars are client-side web libraries which contain libraries such as jQuery, jQuery UI, Bootstrap, etc. by packaging jar (Java Archive) files.
You can add the necessary dependencies for WebJars by using Maven or Gradle.

IDE

In this tutorial, we will use Eclipse.

Source Code

You can refer to the source code below.
https://github.com/ZarLiHninn/Form-Submitting-Lombok-WebJars

Let’s start WebJars

We will show you how to use WebJars in our previous project which is Form Submitting with Spring Boot Validation.

Step 1. Add the following dependencies



<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>4.0.0-2</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap-datepicker</artifactId>
    <version>1.7.1</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>1.11.1</version>
</dependency>

You can also use other populated web client libraries in your project.

Step 2. Check Maven Dependencies

Step 3. Use Webjars for bootstrap in HTML view

You can use the @{/webjars/bootstrap/… path for static contents, served from Webjars. For example, use the following paths for bootstrap theme and JavaScript’s.



<!--Bootstrap CSS-->
<link th:rel="stylesheet" th:href="@{/webjars/bootstrap/4.0.0-2/css/bootstrap.min.css}" />
<!--Bootstrap JS-->
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>

Let’s complete the code!
form.html



<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
   <head>
      <meta charset="UTF-8" />
      <title>Form_Registration</title>
      <link th:rel="stylesheet"
         th:href="@{/webjars/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css}" />
      <link th:rel="stylesheet"
         th:href="@{/webjars/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.standalone.css}" />
      <link th:rel="stylesheet"
         th:href="@{/webjars/bootstrap/4.0.0-2/css/bootstrap.min.css}" />
      <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
      <script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
      <script>
         $(function() {
            $("#datepicker").datepicker({
                dateFormat : "yy-mm-dd"
            });
         });
      </script>
      <style>
         .error {
         color: red;
         }
      </style>
   </head>
   <body>
      <div class="container">
         <h1>Form Registration</h1>
         <form th:action="@{/form/result}" th:object="${student}" method="post">
            <div class="form-group">
               <label>Student Name</label> 
               <input class="form-control" type="text" th:field="*{name}" />
               <span class="error" th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name Error</span>
            </div>
            <div class="form-group">
               <label>Age</label> 
               <input class="form-control" type="text" th:field="*{age}" />
               <span class="error" th:if="${#fields.hasErrors('age')}" th:errors="*{age}">Age Error</span>
            </div>
            <div class="form-group">
               <label>Email</label> 
               <input class="form-control" type="text" th:field="*{email}" />
               <span class="error" th:if="${#fields.hasErrors('email')}" th:errors="*{email}">Email Error</span>
            </div>
            <div class="form-group">
               <label>BirthDate</label> 
               <input class="form-control" type="text" id="datepicker" th:field="*{birthDate}">
               <span class="error" th:if="${#fields.hasErrors('birthDate')}" th:errors="*{birthDate}">BirthDate Error</span>
            </div>
            <div>
               <p>Subjects</p>
               <span th:each="sub: ${subject_value}"> 
               <input type="checkbox" th:field="*{subjects}" th:value="${sub}" /> 
               <label th:text="${sub}">Subjects</label>
               </span>
               <p class="error" th:if="${#fields.hasErrors('subjects')}" th:errors="*{subjects}">Subject Error</p>
            </div>
            <div>
               <p>Gender</p>
               <span th:each="gen: ${gender_value}"> 
               <input type="radio" th:field="*{gender}" th:value="${gen}" /> 
               <label th:text="${gen}">Gender</label>
               </span>
               <p class="error" th:if="${#fields.hasErrors('gender')}" th:errors="*{gender}">Gender Error</p>
            </div>
            <input type="submit" value="Send" />
         </form>
      </div>
   </body>
</html>

result.html



<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

   <head>

      <meta charset="UTF-8" />

      <title>Result</title>

      <link th:rel="stylesheet"

         th:href="@{/webjars/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css}" />

      <link th:rel="stylesheet"

         th:href="@{/webjars/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.standalone.css}" />

      <link th:rel="stylesheet"

         th:href="@{/webjars/bootstrap/4.0.0-2/css/bootstrap.min.css}" />

      <script th:src="@{/webjars/jquery/jquery.min.js}"></script>

      <script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>

   </head>

   <body>

      <div th:if="${result != null}" class="container">

         <h1>Result</h1>

         <table class="table table-bordered">

            <tr>

               <th>Title</th>

               <th>Value</th>

            </tr>

            <tr>

               <td>Student Name</td>

               <td><span th:text="${result.name}"></span></td>

            </tr>

            <tr>

               <td>Age</td>

               <td><span th:text="${result.age}"></span></td>

            </tr>

            <tr>

               <td>Email</td>

               <td><span th:text="${result.email}"></span></td>

            </tr>

            <tr>

               <td>Date of Birth</td>

               <td><span th:text="${result.birthDate}"></span></td>

            </tr>

            <tr>

               <td>Subjects</td>

               <td>

                  <ul>

                     <li th:each="sub : ${result.subjects}" th:text="${sub}"></li>

                  </ul>

               </td>

            </tr>

            <tr>

               <td>Gender</td>

               <td><span th:text="${result.gender}"></span></td>

            </tr>

         </table>

      </div>

      <div class="container">

         <a th:href="@{/back}">Back</a>

      </div>

   </body>

</html>

Step 4. Let’s run our application

Let’s go to localhost:8080/form and we will see the following form.
Let’s submit some error data and then we can see error messages.
Let’s submit the right data.
Now we can see the result in localhost:8080/form/result.

Using Lombok in Spring Boot

Zar Li Hnin — Mon, 27 Jul 2020 12:17:56 +0000

What is Lombok?

Lombok is a Java library that can automatically plug into your editor and build tools when defining Java classes.
If you write Lombok annotations (e.g. @Getter or @setter), you don’t need to write another Getter or Setter methods again.
With one annotation, your class has a fully featured builder.

IDE

In this tutorial, we will use Eclipse.

Source Code

You can refer to the source code below.
https://github.com/ZarLiHninn/Form-Submitting-Lombok-WebJars

Let’s start Lombok

We will show you how to use Lombok in our previous project which is Form Submitting with Spring Boot Validation.

Step 1. Download and Install

Please download lombok.jar from https://projectlombok.org/download
Open downloaded lombok.jar.
Specify your Eclipse IDE location by clicking Specify location and then you can see your Eclipse location.
Click Install/Update.
And now, your installation is completed and restart Eclipse.

Step 2. Add Lombok dependency in pom.xml



<dependency>  
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <scope>provided</scope>
</dependency>

Step 3. Add Lombok annotation in Student.class

This is the code before using lombok.
↓



package com.reytech.demo.model;

import java.time.LocalDate;
import java.util.List;
import javax.validation.constraints.Email;
import javax.validation.constraints.Max;
import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Past;
import javax.validation.constraints.Positive;
import javax.validation.constraints.Size;
import org.springframework.format.annotation.DateTimeFormat;

public class Student {

    @NotEmpty(message = "{validation.name.NotEmpty}")
    @Size(min = 2, max = 50, message = "{validation.name.Size}")
    private String name;

    @NotNull(message = "{validation.age.NotNull}")
    @Positive(message = "{validation.age.Positive}")
    @Max(value = 18, message = "{validation.age.Maximum}")
    private Integer age;

    @NotEmpty(message = "{validation.email.NotEmpty}")
    @Email(message = "{validation.email.Type}")
    private String email;

    @NotEmpty(message = "{validation.subjects.NotEmpty}")
    private List <String> subjects;

    @NotNull(message = "{validation.birthDate.NotNull}")
    @Past(message = "{validation.birthDate.Past}")
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    private LocalDate birthDate;

    @NotEmpty(message = "{validation.gender.NotEmpty}")
    private String gender;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public LocalDate getBirthDate() {
        return birthDate;
    }

    public void setBirthDate(LocalDate birthDate) {
        this.birthDate = birthDate;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public List <String> getSubjects() {
        return subjects;
    }

    public void setSubjects(List <String> subjects) {
        this.subjects = subjects;
    }

}

This is the code by adding Lombok annotation.

↓



package com.reytech.demo.model;

import java.time.LocalDate;
import java.util.List;
import javax.validation.constraints.Email;
import javax.validation.constraints.Max;
import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Past;
import javax.validation.constraints.Positive;
import javax.validation.constraints.Size;
import org.springframework.format.annotation.DateTimeFormat;

import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
public class Student {

    @NotEmpty(message = "{validation.name.NotEmpty}")
    @Size(min = 2, max = 50, message = "{validation.name.Size}")
    private String name;

    @NotNull(message = "{validation.age.NotNull}")
    @Positive(message = "{validation.age.Positive}")
    @Max(value = 18, message = "{validation.age.Maximum}")
    private Integer age;

    @NotEmpty(message = "{validation.email.NotEmpty}")
    @Email(message = "{validation.email.Type}")
    private String email;

    @NotEmpty(message = "{validation.subjects.NotEmpty}")
    private List <String> subjects;

    @NotNull(message = "{validation.birthDate.NotNull}")
    @Past(message = "{validation.birthDate.Past}")
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    private LocalDate birthDate;

    @NotEmpty(message = "{validation.gender.NotEmpty}")
    private String gender;
}

@Getter and @setter will generate getters and setters according to each field.
And, we will explain the most usable Lombok annotations which are:

Lombok annotation	Explanation
@data	It is all in one annotation which is equivalent to the combination of @Getter @setter @RequiredArgsConstructor @ToString @EqualsAndHashCode.
@Value	It is all in one annotation which is equivalent to the combination of @Getter @FieldDefaults(makeFinal=true, level=AccessLevel.PRIVATE) @AllArgsConstructor @ToString @EqualsAndHashCode.
@NoArgsConstructor	It is to generate default constructor with no arguments
@RequiredArgsConstructor	It is to generate a constructor with required arguments
@ AllArgsConstructor	It is to generate a constructor with all fields respectively
@ToString	It is to generate the toString method automatically
@RequiredArgsConstructor	It is to generate a constructor with required arguments
@EqualsAndHashCode	It is to generate HashCode and equals implementations from the fields of your object.
@builder	It is to generate the code automatically using Builder pattern for our class or constructor or method.

Form Submitting with Spring Boot Validation

Zar Li Hnin — Mon, 20 Jul 2020 18:29:05 +0000

Introduction

This tutorial is how to create and submit a form and how to validate our registration form.

Necessary Environments

IDE - Eclipse
JDK 1.8 or later
Gradle 4+ or Maven 3.2+
Spring Tool Suite (STS) or you can use Spring Initilizr

Source Code

You can refer to the source code below.
https://github.com/ZarLiHninn/Form-Submitting-with-Spring-Boot-Validation

Let’s start by following these steps

Step 1. Creating a project

File → New → Spring Starter Project
Fill the necessary information and add dependencies.
Project Explorer is like this.

Step 2. Let’s start code

Student.java

package com.reytech.demo.model;

import java.time.LocalDate;
import java.util.List;
import javax.validation.constraints.Email;
import javax.validation.constraints.Max;
import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Past;
import javax.validation.constraints.Positive;
import javax.validation.constraints.Size;
import org.springframework.format.annotation.DateTimeFormat;

public class Student {

    @NotEmpty(message = "{validation.name.NotEmpty}")
    @Size(min = 2, max = 50, message = "{validation.name.Size}")
    private String name;

    @NotNull(message = "{validation.age.NotNull}")
    @Positive(message = "{validation.age.Positive}")
    @Max(value = 18, message = "{validation.age.Maximum}")
    private Integer age;

    @NotEmpty(message = "{validation.email.NotEmpty}")
    @Email(message = "{validation.email.Type}")
    private String email;

    @NotEmpty(message = "{validation.subjects.NotEmpty}")
    private List <String> subjects;

    @NotNull(message = "{validation.birthDate.NotNull}")
    @Past(message = "{validation.birthDate.Past}")
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    private LocalDate birthDate;

    @NotEmpty(message = "{validation.gender.NotEmpty}")
    private String gender;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public LocalDate getBirthDate() {
        return birthDate;
    }

    public void setBirthDate(LocalDate birthDate) {
        this.birthDate = birthDate;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public List <String> getSubjects() {
        return subjects;
    }

    public void setSubjects(List <String> subjects) {
        this.subjects = subjects;
    }

}

We will store student information in Student.class model.
And, @Size, @NotEmpty, @Email, etc. are to validate input when the user fills an error input.
We will use custom message by creating message.properties. (e.g.message=”{validation.name.NotEmpty}”, you can see the custom message in messages.properties file.)

messages.properties

We will set custom messages.

validation.name.NotEmpty=Please fill in Name
validation.name.Size=Name size must be between 2 and 30
validation.name.Pattern=Name must be only characters
validation.age.NotNull=Please fill in Age
validation.age.Maximum=Age must be under 18
validation.age.Positive=Age must not be negative value and 0
validation.age.Pattern=Age must be only numbers
validation.email.NotEmpty=Please fill in Email
validation.email.Type=Please fill in valid Email
validation.birthDate.NotNull=Please fill in Birth Date
validation.birthDate.Past=Please fill in valid Birth Date
validation.subjects.NotEmpty=Please select Subjects
validation.gender.NotEmpty=Please select Gender

AppConfiguration.java

To handle message.properties, MessageSource and LocalValidatorFactoryBean are needed.

package com.reytech.demo;

import org.springframework.context.MessageSource;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.support.ReloadableResourceBundleMessageSource;
import org.springframework.validation.beanvalidation.LocalValidatorFactoryBean;

@Configuration
public class AppConfiguration {

    @Bean
    public MessageSource messageSource() {
        ReloadableResourceBundleMessageSource messageSource = new ReloadableResourceBundleMessageSource();
        messageSource.setBasename("classpath:messages");
        messageSource.setDefaultEncoding("UTF-8");
        return messageSource;
    }

    @Bean
    public LocalValidatorFactoryBean validator() {
        LocalValidatorFactoryBean bean = new LocalValidatorFactoryBean();
        bean.setValidationMessageSource(messageSource());
        return bean;
    }
}

Gender.java

package com.reytech.demo.constant;

public enum Gender {
   MALE,FEMALE,OTHER
}

Subject.java

package com.reytech.demo.constant;

public enum Subject {
    MYANMAR("Myanmar"),
    ENGLISH("English"),
    MATH("Math"),
    CHEMISTRY("Chemistry"),
    PHYSICS("Physics"),
    BIO("Bio"),
    ECO("Eco");

    private final String value;

    private Subject(String value) {
        this.value = value;
    }

    public String getValue() {
        return value;
    }
}

HomeController.java

package com.reytech.demo.controller;

import javax.validation.Valid;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import com.reytech.demo.constant.Gender;
import com.reytech.demo.constant.Subject;
import com.reytech.demo.model.Student;

@Controller
public class HomeController {

    @GetMapping("/form")
    public String showForm(Model model) {
        Student student = new Student();
        model.addAttribute("student", student);
        model.addAttribute("gender_value", Gender.values());
        model.addAttribute("subject_value", Subject.values());
        return "form";
    }

    @PostMapping("/form/result")
    public String submitForm(@Valid Student student, BindingResult bindingResult, Model model) {
        if (bindingResult.hasErrors()) {
            model.addAttribute("student", student);
            model.addAttribute("gender_value", Gender.values());
            model.addAttribute("subject_value", Subject.values());
            return "form";
        } else {
            model.addAttribute("result", student);
            return "result";
        }
    }

    @GetMapping("/back")
    public String backHome() {
        return "redirect:/form";
    }

}

The controller is used to handle GET/POST requests at /HTTP endpoint.

The showForm() method is to reach localhost:/8080/form as a GET request and return the view which is form.html by using thymeleaf. It uses a Model object to expose a new Student object to the view template. The values of Gender and Subjects are carried by using the model.addAttribute and displayed the result in result.html.
The saveForm() method is to reach localhost:8080/form/result as a POST request when submitting data by the user. The submitted data is saved in “result” and carried by model.addAttribute. And this method returns the view which is result.html but it returns back to form.html when submitted data are errors.

form.html

We will create a form to fill data in form.html.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
   <head>
      <meta charset="UTF-8" />
      <title>Form_Registration</title>
      <link rel="stylesheet"
         href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="stylesheet"
         href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script
         src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
      <script>
         $(function() {
             $("#datepicker").datepicker({dateFormat:"yy-mm-dd"});
         });
      </script>
      <style>
         .error{
         color:red;
         }
      </style>
   </head>
   <body>
      <div class="container">
         <h1>Form Registration</h1>
         <form th:action="@{/form/result}" th:object="${student}" method="post">
            <div class="form-group">
               <label>Student Name</label> 
               <input class="form-control" type="text" th:field="*{name}" />
               <span class="error" th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name Error</span>
            </div>
            <div class="form-group">
               <label>Age</label> 
               <input class="form-control" type="text" th:field="*{age}" />
               <span class="error" th:if="${#fields.hasErrors('age')}" th:errors="*{age}">Age Error</span>
            </div>
            <div class="form-group">
               <label>Email</label> 
               <input class="form-control" type="text" th:field="*{email}" />
               <span class="error" th:if="${#fields.hasErrors('email')}" th:errors="*{email}">Email Error</span>
            </div>
            <div class="form-group">
               <label>BirthDate</label> 
               <input class="form-control" type="text" id="datepicker" th:field="*{birthDate}">
               <span class="error" th:if="${#fields.hasErrors('birthDate')}" th:errors="*{birthDate}">BirthDate Error</span>
            </div>
            <div>
               <p>Subjects</p>
               <span th:each="sub: ${subject_value}"> 
                   <input type="checkbox" th:field="*{subjects}" th:value="${sub}" /> 
                   <label th:text="${sub}">Subjects</label>
               </span>
               <p class="error" th:if="${#fields.hasErrors('subjects')}" th:errors="*{subjects}">Subject Error</p>
            </div>
            <div>
               <p>Gender</p>
               <span th:each="gen: ${gender_value}"> 
                   <input type="radio" th:field="*{gender}" th:value="${gen}" /> 
                   <label th:text="${gen}">Gender</label>
               </span>
               <p class="error" th:if="${#fields.hasErrors('gender')}" th:errors="*{gender}">Gender Error</p>
            </div>
            <input type="submit" value="Send" />
         </form>
      </div>
   </body>
</html>

result.html

We will create a page to show submitted data in result.html.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
   <head>
      <meta charset="UTF-8" />
      <title>Result</title>
      <link rel="stylesheet"
         href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="stylesheet"
         href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script
         src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div th:if="${result != null}" class="container">
         <h1>Result</h1>
         <table class="table table-bordered">
            <tr>
               <th>Title</th>
               <th>Value</th>
            </tr>
            <tr>
               <td>Student Name</td>
               <td><span th:text="${result.name}"></span></td>
            </tr>
            <tr>
               <td>Age</td>
               <td><span th:text="${result.age}"></span></td>
            </tr>
            <tr>
               <td>Email</td>
               <td><span th:text="${result.email}"></span></td>
            </tr>
            <tr>
               <td>Date of Birth</td>
               <td><span th:text="${result.birthDate}"></span></td>
            </tr>
            <tr>
               <td>Subjects</td>
               <td>
                  <ul>
                     <li th:each="sub : ${result.subjects}" th:text="${sub}"></li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>Gender</td>
               <td><span th:text="${result.gender}"></span></td>
            </tr>
         </table>
      </div>
      <div class="container">
         <a th:href="@{/back}">Back</a>
      </div>
   </body>
</html>

If you need more information about Thymeleaf templates, take a look at Thymeleaf Tutorial.

Step 3. Let’s run our application

Let’s go to localhost:8080/form and we will see the following form.
Let’s submit some error data and then we can see error messages.
Let’s submit the right data.
Now we can see the result in localhost:8080/form/result.

Spring Boot Hello World Example by using STS

Zar Li Hnin — Fri, 17 Jul 2020 05:34:10 +0000

What is Spring Tool Suite (STS)?

STS is an IDE and eclipse-based development environment that is used to develop Spring applications.
It is easy to run, implement, deploy, and debug the application.
It provides a ready-to-use environment to implement, run, deploy, and debug the application. It validates our application and provides quick fixes for the applications.

IDE

You can use either IntelliJ, Eclipse, or STS.

Source Code

You can refer to the source code below.
https://github.com/ZarLiHninn/Spring-Boot-Hello-World-Example

How to install Spring Tool Suite (STS)

It can be either installed by downloading STS from https://spring.io/tools or can be installed as a plugin to an existing installation of Eclipse JEE.

In this tutorial, let’s install STS as a plugin in Eclipse.

Help → Eclipse Marketplace
Type Spring Tool Suite in the search box, and click the Go button.

After installation, restart Eclipse.

How to create a project

File → New → Spring Starter Project

Fill necessary information

Configure Group for your component which is the root package name to use.
Configure Artifact for your component which is the name of the project. When configuring Artifact, you will be noticed the project name is automatically filled.
Fill description for your project.
Fill the root package of the project. If not specified, the value of the Group attribute is used.
Choose Java version you want to use.
Choose Jar or War.

If you want to execute Java application containing Java class files, and associated metadata, you can choose Jar.
If you want to develop Web application containing Servlet, JSP, HTML, JavaScript, and other necessary files, you can choose War.
Select Dependencies

Choose Spring Web, Spring Boot DevTools, and Thymeleaf by searching.
- The spring-web dependency contains common web-specific utilities for both Servlet and Portlet environments, while spring-web MVC enables the MVC support for Servlet environments.
- The Spring-boot-devtools automatically reload your project when you change some code in your classpath file.
- Thymeleaf is a Java-based library or template engine to create web-based applications.

And now, you can see the project in Project Explorer.

Let’s see the files from the project folder

DemoApplication.java

It is the main class of Spring Boot Project. ```java

package com.reytech.demo;

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

@SpringBootApplication
public class DemoApplication {

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

}

**pom.xml**
- As we filled and selected when creating a project, you can see the following properties, description, dependencies, etc.
```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.1.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.reytech</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo</name>
    <description>Demo project for Spring Boot</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-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </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>

DemoApplicationTests.java

It contains the basic context that can be used to start writing the tests as we start developing the application. ```java

package com.reytech.demo;

import org.junit.jupiter.api.Test;
import org.springframework.boot.test.context.SpringBootTest;

@SpringBootTest
class DemoApplicationTests {

@Test
void contextLoads() {
}

}


#Let’s add some coding files to show Hello World
Let’s add HomeController.java and hello.html and message.html to show Hello World and some message on your browser.

 - Under the demo package, please create a controller package and HomeController.

 - Under src/main/resources/templates directory, create hello.html and message.html.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/px8e0w5n0jfcqj16eg80.png)

**HomeController.java**
- hello() function calls hello.html when URL is localhost:8080/

- message() function calls message.html and you can set the custom message on the controller by using model.addAttribute ("message", "This is a custom message");
```java


package com.reytech.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {

    @GetMapping("/")
    public String hello(){
        return "hello";
    }

    @GetMapping("/message")
    public String message(Model model) {
        model.addAttribute("message", "This is a custom message");
        return "message";
    }
}

hello.html



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Spring Demo Project</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

message.html

The th:text=”${attributename}” tag attribute is used to display the value of model attributes. ```html

<!DOCTYPE html>
xmlns:th="http://www.thymeleaf.org">

Spring Demo Project

#Let’s run
Just run the server and navigate to http://localhost:8080/.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qyaxxabmi7omnewshhqw.png)

And navigate to http://localhost:8080/message.
You can see the following message on your browser.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dhg3xasmvzuhi8vcwe52.png)

Thank You!

Spring Boot Hello World Example by using Spring Initilizr

Zar Li Hnin — Wed, 08 Jul 2020 16:05:54 +0000

Introduction

In this article, you'll be able to start up your Spring Boot application and show Hello World and a message on your browser.

There are four ways to create Spring Boot project which are:

Spring Initializr
Spring Tool Suite (Spring Boot Starter Plugin)
Simple Maven Project
CLI (Command Line Interface)

If you want to create a project easily and quickly, the best ways are using 1. Spring Initializr or 2. Spring Tool Suite. In this tutorial, we will show you how to create Spring Boot project using Spring Initializr.

What is Spring Initializr?

The Spring Initializr is a web-based tool provided by the Pivotal Web Service. You can easily generate the structure with the help of Spring Initializr and you can add any dependencies and necessary configuration. After that, you can get a basic project structure and either a Maven or a Gradle build specification to build your code with.

IDE

You can use either IntelliJ, Eclipse, or STS.

Source Code

You can refer to the source code below.
https://github.com/ZarLiHninn/Spring-Boot-Hello-World-Example

Let’s start to show Hello World with Spring Initializr

Step 1

You can create a simple Spring Boot project by visiting the following site.
https://start.spring.io/

Choose your build tool: Maven or Gradle.
Choose Java Language to create Java web-based applications.
Choose Spring Boot version (2.3.1 version in this case)

Step 2

Configure Group for your component which is the root package name to use.
Configure Artifact for your component which is the name of the project. When configuring Artifact, you will be noticed the project name is automatically filled.
Fill description for your project.
Fill the root package of the project. If not specified, the value of the Group attribute is used.
Choose Jar or War.
- If you want to execute Java application containing Java class files, and associated metadata, you can choose Jar.
- If you want to develop Web application containing Servlet, JSP, HTML, JavaScript, and other necessary files, you can choose War.
Choose Java Version you want to use.

Step 3

Spring Initializr offers a fast way to pull in all the dependencies you need for an application and does a lot of the setup for you.

Choose Spring Web, Spring Boot DevTools, and Thymeleaf by clicking Add Dependencies.

The spring-web dependency contains common web-specific utilities for both Servlet and Portlet environments, while spring-web MVC enables the MVC support for Servlet environments.
The Spring-boot-devtools automatically reload your project when you change some code in your classpath file.
Thymeleaf is a Java-based library or template engine to create web-based applications.

Step 4

You can get the following project zip file by clicking the GENERATE button.

Step 5

Now, you can import your project zip file in your IDE (e.g. Eclipse, Intellij). In this tutorial, we will use Eclipse IDE and you need to follow these steps to import your project file.

Click File->Import.
Search and select Existing Maven Projects and after clicking Next, browse the project zip file. Now, we have imported project completely and you can see the project in project explorer.

DemoApplication.java

It is the main class of Spring Boot Project.

package com.reytech.demo;

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

@SpringBootApplication
public class DemoApplication {

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

}

pom.xml

As we defined in Spring Boot Initializr GUI, you can see the following properties, description, dependencies, etc.

<?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.1.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.reytech</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo</name>
    <description>Demo project for Spring Boot</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-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </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>

DemoApplicationTests.java

It contains the basic context that can be used to start writing the tests as we start developing the application.

package com.reytech.demo;

import org.junit.jupiter.api.Test;
import org.springframework.boot.test.context.SpringBootTest;

@SpringBootTest
class DemoApplicationTests {

    @Test
    void contextLoads() {
    }

}

Step 6

Let’s add HomeController.java, hello.html and message.html to show Hello World and some message on your browser.

Under the demo package, please create a controller package and HomeController.
Under src/main/resources/templates directory, create hello.html and message.html.

HomeController.java

hello() function calls hello.html when URL is localhost:8080/
message() function calls message.html and you can set the custom message on the controller by using model.addAttribute("message", "This is a custom message");

package com.reytech.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {

    @GetMapping("/")
    public String hello(){
        return "hello";
    }
    @GetMapping("/message")
    public String message(Model model) {
        model.addAttribute("message", "This is a custom message");
        return "message";
    }
}

hello.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Spring Demo Project</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

message.html

The th:text=”${attributename}” tag attribute is used to display the value of model attributes.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Spring Demo Project</title>
</head>
<body>
    <h1 th:text="${message}"></h1>
</body>
</html>

Step 7
Just run the server and navigate to http://localhost:8080/

And navigate to http://localhost:8080/message.
You can see the following message on your browser.

Thank You.

References:

https://subscription.packtpub.com/book/application_development/9781789132588/1/ch01lvl1sec10/spring-initializr

https://www.javacodegeeks.com/2018/02/create-spring-boot-project-spring-initializer.html

Spring Boot Introduction

Zar Li Hnin — Sat, 27 Jun 2020 10:54:27 +0000

What is the Spring Boot?

Spring is a powerful java-based open-source framework that is widely used for enterprise web applications. It is developed by Pivotal Team and is utilized to construct stand-alone and production prepared spring applications. Spring Boot may be a portion of the spring framework and contains all the highlights and ideas of the spring framework. In Spring Boot, everything is auto-configured, and there is no requirement for XML configuration and server (e.g. Tomcat) to create a spring boot web application.

What do we need to know?

Core Java
Basic knowledge of Spring Framework
MVC pattern

Advantages of Spring Boot

We can create a stand-alone application and production-grade spring-based application easily.
It reduces a lot of development time and we can quickly create web applications and microservices.
It is easy to understand.
It is no need to configure XML because it is configured and wired automatically.
Spring boot provides production-ready features such as metrics,health-checks, and externalized configuration.
It is easy to customize application properties and dependency.

Spring Boot Flow Architecture

The client makes the HTTP requests (POST or GET). Please refer to the HTTP request methods in the following link. HTTP Request Method
The request is forwarded to the controller, and it maps the request and processes it.
If needed, it also calls a service layer.
All the business logic will be performed in the service layer and it performs the logic on the data and is mapped to JPA with model classes.
If there is no error has occurred, the web page (JSP, HTML) is returned to the user.

Goals of Spring Boot

The main goal of Spring Boot is to reduce development, unit test, and integration test time and to ease the development of Production-ready web applications very easily compared to existing Spring Framework, which really takes more time.

To provide the Opinionated Development approach
To avoid defining more Annotation Configuration
To avoid confusing XML configuration and manual lots of import statements

What can we create if we can do Spring Boot?

　　　　You can develop a great web application like below. A famous service using Spring Boot is described in the following table.

URL	Description
SAP Customer Review and Stories	SAP's Hybris eCommerce platform uses Spring
Yatra	Indian travel website Yatra.com is made in spring MVC (backend services)
Every Dollar Budgeting App	Uses Spring Boot on the back end ReactJS on the front end.

References:

https://www.tutorialspoint.com/spring_boot/spring_boot_introduction.htm

https://www.geeksforgeeks.org/introduction-to-spring-boot/

https://www.javatpoint.com/spring-boot-tutorial

https://dzone.com/articles/introducing-spring-boot

https://www.geeksforgeeks.org/introduction-to-spring-boot/

HTTP Request Method

Zar Li Hnin — Sat, 27 Jun 2020 10:31:42 +0000

HTTP is effective communication for requests and responses between clients and servers. The message that is sent by a client to a server is what is known as an HTTP request. Client can send requests with various methods by the following table.

Method	Description
GET	GET is the most used requests in HTTP request methods. GET is used to request and retrieve information from the server. Requests using GET should only retrieve data.
HEAD	HEAD is similar to GET but it transfers the status line and header section without having message-body in the response.
POST	POST is used to send data to the server to create or update a resource by using HTML form.
OPTIONS	OPTIONS is used to indicate the communication options for the target resource.
PUT	PUT is similar to POST and the PUT method replaces all current representation of the target resource with the request.
DELETE	DELETE is used to delete current representations of the target resource indicated by a specific URI.
TRACE	TRACE is similar to POST and PUT but it performs a message loopback test along the path to the target resource.
PATCH	PATCH is similar to POST and PUT and the main purpose of PATCH is used to partially modify the resource.

Form submitting and show results with Spring Boot

Zar Li Hnin — Mon, 11 May 2020 08:25:17 +0000

Overview

This tutorial is how to create and submit form with Spring Boot Application.

Necessary Environments

Eclipse IDE or other IDE
JDK 1.8
Spring Tool Suite (STS)

Let's start by the following steps.

Create project with Spring Starter Project by using your IDE
- You can also build by using Spring Initializr and import project in your IDE.
Add Dependencies

Thymeleaf is a Java library that is able to apply a set of transformations to template files in order to display data and/or text produced by your applications.
Spring Boot DevTools pick up the changes and restart the application.

Project Structure

Let's start!

FormRegistrationApplication.java



package com.demo.example;

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

@SpringBootApplication
public class FormRegistrationApplication {

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

}

pom.xml

Dependencies are look like this.



<?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>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.21.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.demo</groupId>
    <artifactId>form_registration</artifactId>
    <version>1.0</version>
    <name>form_registration</name>
    <description>Spring MVC tutorial</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-devtools</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

Configuration.java

Constants data are expressed using list which are days,months,years.



package com.demo.example;

import java.lang.reflect.Array;
import java.util.Arrays;
import java.util.List;

import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.context.annotation.Bean;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@org.springframework.context.annotation.Configuration
public class Configuration extends WebMvcConfigurerAdapter {


    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("home");
    }
    @Bean
    @Qualifier("subjects")
    public List<String> subjects(){
        return Arrays.asList("Burmese","English","Maths","Chemistry","Physics","Biology");
    }
    @Bean
    @Qualifier("days")
    public List<String> days(){
        return Arrays.asList("1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31");
    }
    @Bean
    @Qualifier("months")
    public List<String> months(){
        return Arrays.asList("1","2","3","4","5","6","7","8","9","10","11","12");
    }
    @Bean
    @Qualifier("years")
    public List<String> years(){
        return Arrays.asList("1998","1999","2000","2001","2002","2003");
    }

}

Student.java

The Student object in the following code contains fields such as grade,subjects,name,email,city,township,day,month and year that correspond to the form fields in the student result view and are used to capture the information from the form:



package com.demo.example.model;

import java.util.List;

public class Student {

    private Grade grade;
    private List<String> subjects;
    private String name;
    private String email;
    private String city;
    private String township;
    private List<String> day;
    private List<String> month;
    private List<String> year;

    public List<String> getSubjects() {
        return subjects;
    }
    public void setSubjects(List<String> subjects) {
        this.subjects = subjects;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    public String getCity() {
        return city;
    }
    public void setCity(String city) {
        this.city = city;
    }
    public String getTownship() {
        return township;
    }
    public void setTownship(String township) {
        this.township = township;
    }
    public List<String> getDay() {
        return day;
    }
    public void setDay(List<String> day) {
        this.day = day;
    }
    public List<String> getMonth() {
        return month;
    }
    public void setMonth(List<String> month) {
        this.month = month;
    }
    public List<String> getYear() {
        return year;
    }
    public void setYear(List<String> year) {
        this.year = year;
    }
    public Grade getGrade() {
        return grade;
    }
    public void setGrade(Grade grade) {
        this.grade = grade;
    }
}

Grade.java



package com.demo.example.model;

public enum Grade {
   A,B,C,D,E
}

HomeController.java

Controller sends student information and show results.



package com.demo.example.controller;

import java.util.List;

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

import com.demo.example.model.Grade;
import com.demo.example.model.Student;

@Controller
@RequestMapping("/form")
public class HomeController {
      @Autowired
      @Qualifier("subjects")
      private List<String> subjects;

      @Autowired
      @Qualifier("days")
      private List<String> days;

      @Autowired
      @Qualifier("months")
      private List<String> months;

      @Autowired
      @Qualifier("years")
      private List<String> years;

      @GetMapping
      public String get(ModelMap model){
          Student student=new Student();
          model.addAttribute("student", student);
          return "form";

      }
      @PostMapping
      public String post(Student dto, ModelMap map){
          map.put("result", dto);
          return "form";
      }

      @ModelAttribute("subjects")
      public List<String> subjects(){
          return subjects;
      }
      @ModelAttribute("days")
      public List<String> days(){
          return days;
      }
      @ModelAttribute("months")
      public List<String> months(){
          return months;
      }
      @ModelAttribute("years")
      public List<String> years(){
          return years;
      }
      @ModelAttribute("grades")
      public Grade [] grades(){
          return Grade.values();
      }

}

home.html

This is main page.If you click Please Register,form.html is viewed.



<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Form_Registration</title>
</head>
<body>
   <a th:href="@{/form}">Please Register</a>
</body>
</html>

form.html

th:action="@{/form}" is to post the data which is registered by user.

th:object="${student}" means student object and th:field="*{}" means defined object.

th:text="${}" get you registered student's data.



<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Form_Registration</title>
</head>
<body>
    <h1>Form Registration</h1>

    <form th:action="@{/form}" th:object="${student}" method="post">

        <div>
            <label>Student Name</label> 
            <input type="text" th:field="*{name}" />
        </div>
        <div>
            <label>Email</label> 
            <input type="text" th:field="*{email}" />
        </div>
        <div>
            <label>Day:</label>
            <select th:field="*{day}">
                <option th:each="d : ${days}" th:value="${d}" th:text="${d}"></option>
            </select> 
            <label>Month:</label> 
            <select th:field="*{month}">
                <option th:each="m : ${months}" th:value="${m}" th:text="${m}"></option>
            </select> 
            <label>Year:</label> 
            <select th:field="*{year}">
                <option th:each="y : ${years}" th:value="${y}" th:text="${y}"></option>
            </select>
        </div>
        <div>
            <label>City</label> 
            <input type="text" th:field="*{city}" />
        </div>

        <div>
            <label>Township</label> 
            <input type="text" th:field="*{township}" />

        </div>
        <div>
            <span th:each="grd: ${grades}"> 
               <input type="radio" th:field="*{grade}" th:value="${grd}" /> 
               <label th:for="${#ids.prev('grade')}" th:text="${grd}">Gender</label>
            </span>
        </div>
        <br/> 
        <br/> 
        <input type="submit" value="Send" />
    </form>

    <div th:if="${result != null}">
        <h1>Result</h1>
        <div>
            <h3>Student Name</h3>
            <ul>
                <li th:text="${result.name}">Name</li>
            </ul>
        </div>
        <div>
            <h3>Email</h3>
            <ul>
                <li th:text="${result.email}">Email</li>
            </ul>
        </div>
        <div>
            <h3>Date of Birth</h3>
            <p th:text="${result.day}"></p>
            <p th:text="${result.month}"></p>
            <p th:text="${result.year}"></p>

        </div>
        <div>
            <h3>City</h3>
            <ul>
                <li th:text="${result.city}">City</li>
            </ul>
        </div>
        <div>
            <h3>Township</h3>
            <ul>
                <li th:text="${result.township}">Township</li>
            </ul>
        </div>
        <div>
            <h3>Grades</h3>
            <ul>
                <li th:text="${result.grade}">Grades</li>
            </ul>
        </div>


    </div>
</body>
</html>

4.Run Server
Just run the server and navigate to http://localhost:8080/

You can see this on your browser!

If you click Please Register ,you can see that.

If you submit,you can view your result.