DEV Community

ThiriYadanar for Rey Tech Inc.

Posted on

Create Employee Registration Form and Submit the Form Using Spring Boot and Thymeleaf

Thymeleaf is a modern server-side Java template engine for both web and standalone environments. In this article, you'll learn how to create HTML forms with Thymeleaf and how to handle the form submission on the backend using Spring Boot. If you need more information on working with Thymeleaf in Spring Boot, take a look at this guide.

What you need

  • IDE - Eclipse or Spring Tool Suite (STS)

  • JDK 1.8 or later

  • Gradle 4+ or Maven 3.2+

Project Directory

Alt Text

Dependencies

To use Thymeleaf with Spring Boot, you only need to include spring-boot-starter-web and spring-boot-starter-thymeleaf . Spring Boot DevTools is a great tool that helps you to develop an application faster. It reflects changes in the code without the need to restart the whole application each time.
Alt Text

You can create a project by using Spring Initializr web tool and use the above-mentioned dependencies.

When you want to create the project from Spring Initializr, select these dependencies and generate project. Take a look for more detail of Spring Initializr at Spring Initializr Modules.

Java Model Class

Let’s create a simple Java model class named Employee.java that stores information about the employees:
Alt Text

Lombok is used to reduce code for model objects, e.g., it can generate getters and setters for those objects automatically by using Lombok annotations. Take a look at How to install Lombok.

Controller

Let’s create a Spring MVC controller class called EmployeeController.java that defines three HTTP end-points to handle different GET and POST requests:
Alt Text

The showHome() method is bound to handle GET requests at / HTTP endpoint and returns the name of the Thymeleaf view (index) to render an HTML form.

The showRegistrationForm() method is bound to handle GET requests at /registration_form HTTP endpoint and returns the name of the Thymeleaf view (registration_form) to render an HTML form. It uses a Model object to expose a new Employee object to the view template.

The saveEmployee() method is bound to handle POST requests at /save HTTP endpoint and registration_form.html form is submitted. Since the submitted employee is @ModelAttribute Employee, that model is bind to result.html and displayed the result. The submitted employee will not be saved into the database. This will be written in the next article.

HTML with Thymeleaf

Let’s create simple HTML page index.html for the welcome page under src/main/resources/templates/ folder.
Alt Text

And then let’s create an employee registration form registration_form.html with Thymeleaf templates under src/main/resources/templates/ folder.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Create New Employee</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

</head>
<body>
<div class="container my-3">
    <div class="row">
        <div class="col-md-8 mx-auto">
            <h2>Employee Registration</h2>
            <form th:action="@{/save}" th:object="${employee}" method="post">
                <div class="form-row">
                    <div class="col-md-6 form-group">
                        <label>ID</label>
                        <input type="number" class="form-control" th:field="*{id}">
                    </div>
                    <div class="col-md-6 form-group">
                        <label>Name</label>
                        <input type="text" class="form-control" th:field="*{name}">
                    </div>
                    <div class="col-md-6 form-group">
                        <label>Department</label>
                        <select class="form-control" th:field="*{dept}">
                            <option value="">Choose...</option>
                            <option value="IT">IT</option>
                            <option value="HR">HR</option>
                            <option value="Sale">Sale</option>
                        </select>
                    </div>
                    <div class="col-md-6 form-group">
                        <label>Age</label>
                        <input type="number" step="any" class="form-control" th:field="*{age}">
                    </div>

                    <div class="col-md-6 form-group">
                        <strong>Gender</strong>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" th:field="*{gender}" id="option1" value="Male">
                            <label class="form-check-label" for="option1">Male</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" th:field="*{gender}" id="option2" value="Female">
                            <label class="form-check-label" for="option2">Female</label>
                        </div>
                    </div>
                    <div class="col-md-6 form-group">
                    </div>
                     <div class="col-md-6 form-group">
                        <label>Joining Date</label>
                        <input type="text" class="form-control" placeholder="yyyy-MM-dd" id="join_datepicker" th:field="*{joiningDate}">
                    </div>
                     <div class="col-md-6 form-group">
                        <label>Retiring Date</label>
                        <input type="text" class="form-control" placeholder="yyyy-MM-dd" id="retire_datepicker" th:field="*{retiringDate}">
                    </div>
                </div>
                <button type="submit" class="btn btn-primary btn-block mt-3">Save</button>
            </form>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <script>
    $(function() {
        $("#join_datepicker").datepicker({dateFormat:"yy-mm-dd"});
        $("#retire_datepicker").datepicker({dateFormat:"yy-mm-dd"});
    });
</script>
</body>
</html> 

Let’s create a display_form.html to show the submitted employee information.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Result</title>
<link rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
    th:href="@{/css/display_form.css}" />
</head>
<body>
    <h2>Result</h2>
    <table>
        <tbody>
            <tr>
                <td><strong>ID:</strong></td>
                <td><span th:text="${employee.id}"></span></td>
            </tr>
            <tr>
                <td><strong>Name:</strong></td>
                <td><span th:text="${employee.name}"></span></td>
            </tr>
            <tr>
                <td><strong>Age:</strong></td>
                <td><span th:text="${employee.age}"></span></td>
            </tr>
            <tr>
                <td><strong>Gender:</strong></td>
                <td><span th:text="${employee.gender}"></span></td>
            </tr>
            <tr>
                <td><strong>Department:</strong></td>
                <td><span th:text="${employee.dept}"></span></td>
            </tr>
            <tr>
                <td><strong>Joining Date:</strong></td>
                <td><span th:text="${employee.joiningDate}"></span></td>
            </tr>
            <tr>
                <td><strong>Retiring Date:</strong></td>
                <td><span th:text="${employee.retiringDate}"></span></td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;<a th:href="@{registration_form}"
                    class="btn btn-success"> <i class="fa fa-arrow-circle-o-left"></i>&nbsp;Add
                        new employee
                </a></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

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

Running & Testing the Application

Once the application is started, open http://localhost:8080/ in a web browser to view the HTML form. Here is how it looks like:

Alt Text

Click Go to Employee Registration Form link.
Alt Text

When you fill all input fields and then click on the Save button, you will see the following output:

Alt Text

You can see the source code in this github link EmployeeRegistration.

Discussion (0)