DEV Community: ThiriYadanar

Create and View Employee Using JPA, Springboot and Thymeleaf

ThiriYadanar — Fri, 31 Jul 2020 08:27:59 +0000

Project Structure

Here is the project structure.

Maven Dependencies 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.2.RELEASE</version>
      <relativePath />
      <!-- lookup parent from repository -->
   </parent>
   <groupId>com.springboot.tutorial</groupId>
   <artifactId>springboot-helloworld-tutorial</artifactId>
   <version>0.0.1-SNAPSHOT</version>
   <name>CreateEmployee</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-data-jpa</artifactId>
      </dependency>
      <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>mysql</groupId>
         <artifactId>mysql-connector-java</artifactId>
         <scope>runtime</scope>
      </dependency>
      <dependency>
         <groupId>org.projectlombok</groupId>
         <artifactId>lombok</artifactId>
         <scope>provided</scope>
      </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>

Domain Layer

The domain layer is a collection of entity objects and related business logic that is designed to represent the business model.

Let's create a JPA Employee entity:

package com.springboot.tutorial.entity;


import java.time.LocalDate;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

import org.springframework.format.annotation.DateTimeFormat;
import lombok.Data;

@Entity
@Table(name="employee")
@Data
public class Employee {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id")
    private int id;

    @Column(name = "name")
    private String name;

    @Column(name = "age")
    private int age;

    @Column(name = "gender")
    private String gender;

    @Column(name = "joiningDate")
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    private LocalDate joiningDate;

    @Column(name = "retiringDate")
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    private LocalDate retiringDate;

    @Column(name="dept")
    private String dept;

}

Controller Layer

This layer is responsible for processing the user’s input and returning the correct response back to the user.

Let’s create an EmployeeController class to send requests and bind data to the user’s view.

package com.springboot.tutorial.controller;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import com.springboot.tutorial.entity.Employee;
import com.springboot.tutorial.service.EmployeeService;

@Controller
public class EmployeeController {

    @Autowired
    private EmployeeService service;

    @RequestMapping("/")
    public String viewHomePage(Model model) {
        List<Employee> employeeList = service.listAll();
        model.addAttribute("listAll", employeeList);
        return "index";
    }

    @RequestMapping("/new")
    public String showNewEmployeePage(Model model) {
        Employee employee = new Employee();
        model.addAttribute("employee", employee);
        return "new_employee";
    }

    @RequestMapping(value = "/save", method = RequestMethod.POST)
    public String saveEmployee(@ModelAttribute("employee") Employee employee, Model model, BindingResult result) {
        service.save(employee);
        List<Employee> employeeList = service.listAll();
        model.addAttribute("listAll", employeeList);
        model.addAttribute("employeeAttr", employee);
        return "index";
    }
}

Service Layer

This layer is the middleware between Controller and Repository.

The service gathers data from controller, performs validation and business logic, and calling repositories for data manipulation.

Let’s create EmployeeService interface to send the user’s requests from Controller to Repository.

package com.springboot.tutorial.service;

import java.util.List;
import com.springboot.tutorial.entity.Employee;
public interface EmployeeService {

    List < Employee > listAll();

    void save(Employee employee);

}

And create EmployeeServiceImpl class that implements EmployeeService interface and connect to Repository by using @Autowired keyword.

package com.springboot.tutorial.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.springboot.tutorial.entity.Employee;
import com.springboot.tutorial.repository.EmployeeRepository;

@Service
public class EmployeeServiceImpl implements EmployeeService {

    @Autowired
    private EmployeeRepository repo;

    @Override
    public List < Employee > listAll() {
        return repo.findAll();
    }

    @Override
    public void save(Employee emp) {
        repo.save(emp);
    }
}

Repository Layer

Spring Data JPA allows implementing JPA-based repositories

We don't need to write any DAO code but Spring Data JPA will generate an implementation automatically at runtime.

Let's create an EmployeeRepository class with the following code:

package com.springboot.tutorial.repository;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

import com.springboot.tutorial.entity.Employee;
@Repository
public interface EmployeeRepository extends JpaRepository<Employee, Long> {

}

View Layer

We need to create the HTML pages for displaying the Employee’s registration form and showing the registered Employee’s list under the src/main/resources/templates folder.

We will use Thymeleaf as the underlying template engine for parsing the template files.

Let’s create an index.html as a welcome page and to show the registered Employee’s list.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:th="http://www.thymeleaf.org">
   <head>
      <meta charset="utf-8" />
      <title>Employee Management</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
      <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
      <script type="text/javascript">
         $(document).ready(function() {
            $('#data-table').DataTable();
         });
      </script>
   </head>
   <body>
      <div class="content">
         <div class="animated fadeIn">
            <div class="row">
               <div class="col-md-12">
                  <div class="card">
                     <div class="card-header">
                        <strong class="card-title">
                           <h1 style="text-align: center; color: #b30000; font-weight: bold;">EMPLOYEE MANAGEMENT</h1>
                        </strong>
                        <div style="text-align: center; font-weight: bold">
                           <a href="new">Create New Employee</a> <br /> 
                        </div>
                     </div>
                     <div class="card-body">
                        <table id="data-table" class="table table-striped table-bordered">
                           <thead>
                              <tr>
                                 <th>Employee ID</th>
                                 <th>Name</th>
                                 <th>Age</th>
                                 <th>Department</th>
                                 <th>Gender</th>
                                 <th>Joining Date</th>
                                 <th>Retiring Date</th>
                              </tr>
                           </thead>
                           <tbody>
                              <tr th:each="employee:${listAll}">
                                 <td th:text="${employee.id}">Product ID</td>
                                 <td th:text="${employee.name}">Name</td>
                                 <td th:text="${employee.age}">Age</td>
                                 <td th:text="${employee.dept}">Department</td>
                                 <td th:text="${employee.gender}">Gender</td>
                                 <td th:text="${employee.joiningDate}">Joining Date</td>
                                 <td th:text="${employee.retiringDate}">Retiring Date</td>
                              </tr>
                           </tbody>
                        </table>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

And create a new_employee.html page as a registration form page.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:th="http://www.thymeleaf.org">
   <head>
      <meta charset="utf-8" />
      <title>Create New Employee</title>
      <link rel="stylesheet"
         href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="/resources/demos/style.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>
         $(function() {
            $("#join_datepicker").datepicker({
                dateFormat : "yy-mm-dd"
            });
            $("#retire_datepicker").datepicker({
                dateFormat : "yy-mm-dd"
            });
         });
      </script>
   </head>
   <body>
      <div align="center">
         <h1>Create New Emloyee</h1>
         <br />
         <form action="#" th:action="@{/save}" th:object="${employee}"
            method="post">
            <table border="0" cellpadding="10">
               <tr>
                  <td>Employee Name:</td>
                  <td><input type="text" th:field="*{name}" /></td>
               </tr>
               <tr>
                  <td>Age:</td>
                  <td><input type="text" th:field="*{age}" /></td>
               </tr>
               <tr>
                  <td>Department:</td>
                  <td>
                     <select th:field="*{dept}">
                        <option th:value="IT" th:text="IT"></option>
                        <option th:value="HR" th:text="HR"></option>
                        <option th:value="Sales" th:text="Sales"></option>
                     </select>
                  </td>
               </tr>
               <tr>
                  <td>Gender:</td>
                  <td><input type="radio" th:field="*{gender}" th:value="Male"
                     th:text="Male" /> <input type="radio" th:field="*{gender}"
                     th:value="Female" th:text="Female" /></td>
               </tr>
               <tr>
                  <td>Joining Date:</td>
                  <td><input type="date" id="join_datepicker"
                     th:field="*{joiningDate}"></td>
               </tr>
               <tr>
                  <td>Retiring Date:</td>
                  <td><input type="date" id="retire_datepicker"
                     th:field="*{retiringDate}"></td>
               </tr>
               <tr>
                  <td colspan="2"><button type="submit">Save</button></td>
               </tr>
            </table>
         </form>
      </div>
   </body>
</html>

Running the Application

Let's access web application using http://localhost:8080. Initially, you don't have any employee in the list.

Let's add a new employee first.

You can download the source code at
github

What is JPA?

ThiriYadanar — Sun, 19 Jul 2020 17:17:24 +0000

Table of Content

What is JPA?
What is ORM?
Why use JPA?
JPA Relationship Types
Use of EntityManager and Spring Data JPA

What is JPA?

The Java Persistence API (JPA) is the Java standard for mapping Java objects to a relational database.

JPA is one possible approach to ORM. Via JPA, the developer can map, store, update, and retrieve data from relational databases to Java objects and vice versa.

JPA can be used in Java-EE and Java-SE applications. JPA is a specification and several implementations are available.

Objet Relational Mapping (ORM)

The Object Relational Mapping is the base of JPA, which is all about representing and accessing data in the form of plain Java Objects – called Entities.

Hibernate, EclipseLink, and Apache OpenJPA are some of the JPA implementations, out of which, Hibernate is more popular and widely used.

Why use JPA?

To reduce the burden of writing codes for relational object management of an enterprise application, a programmer follows the JPA Provider framework (an implementation of JPA), which allows easy interaction with the database instance.

JPA Relationship Types

In a relational database, the relationships between the two tables are defined by foreign keys. Typically, one table has a column that contains the primary key of another table’s row.

In JPA, we deal with entity objects that are Java representations of database tables. So we need a different way of establishing a relationship between two entities.

JPA entity relationships define how these entities refer to each other.

One-to-one relationships

The @OneToOne annotation is used to define a one-to-one relationship between two entities.

For example, you may have a User entity that contains a user's name, email, and password, but you may want to maintain additional information about a user (such as age, gender, and favorite color) in a separate UserProfile entity.

The @OneToOne annotation facilitates breaking down your data and entities this way.

The User class below has a single UserProfile instance. The UserProfile maps to a single User instance.

@Entity
public class User {

    @Id
    private Integer id;

    private String email;

    private String name;

    private String password;

    @OneToOne(mappedBy = "user")
    private UserProfile profile;
    ...
}

@Entity
public class UserProfile {

    @Id
    private Integer id;

    private int age;

    private String gender;

    private String favoriteColor;

    @OneToOne
    private User user;
    ...
}

The JPA provider uses UserProfile's user field to map UserProfile to User.
The mapping is specified in the mappedBy attribute in the @OneToOne annotation.

One-to-many and many-to-one relationships

The @OneToMany and @ManyToOne annotations facilitate both sides of the same relationship.

Consider an example where a Book can have only one Author, but an Author may have many books.

The Book entity would define a @ManyToOne relationship with Author and the Author entity would define a @OneToMany
relationship with Book.

@Entity
public class Book {

    @Id
    private Integer id;

    private String name;

    @ManyToOne
    @JoinColumn(...)
        ...

}

@Entity
public class Author {

    @Id
    @GeneratedValue
    private Integer id;

    private String name;

    @OneToMany(mappedBy = "author")
    private List<Book> books = new ArrayList<>();
    ...
}

In this case, the Author class maintains a list of all of the books written by that author, and the Book class maintains a reference to its single author.

Additionally, the @JoinColumn specifies the name of the column in the Book table to store the ID of the Author.

Many-to-many relationships

Finally, the @ManyToMany annotation facilitates a many-to-many relationship between entities. Here's a case where a Book entity has multiple Authors:

@Entity
public class Book {

    @Id
    private Integer id;

    private String name;

    @ManyToMany
    @JoinTable(name = "BOOK_AUTHORS",
        joinColumns = @JoinColumn(name = "BOOK_ID"),
        inverseJoinColumns = @JoinColumn(name = "AUTHOR_ID"))
    private List<Author> authors = new ArrayList<>();
    ...
}

@Entity
public class Author {

    @Id
    @GeneratedValue
    private Integer id;

    private String name;

    @ManyToMany(mappedBy = "author")
    private List<Book> books = new ArrayList<>();
    ...
}

In this example, we create a new table, BOOK_AUTHORS, with two columns: BOOK_ID and AUTHOR_ID.

Using the joinColumns and inverseJoinColumns attributes tell your JPA framework how to map these classes in a many-to-many relationship.

The @ManyToMany annotation in the Author class references the field in the Book class that manages the relationship; namely the Author's property.

Use of Entity Manager and Spring Data JPA

Entity Manager is a component in JPA specifications which is a front face of the framework. Entity Manager is responsible for storing and retrieving entities.

Let’s look at a sample code below.

@Component
public class BookDao {

    @Autowired
    EntityManager entityManager;

    public void addUser(Book book) {
        entityManager.persist(book);
    }

    public void updateUser(Book book) {
        Book dbBook = entityManager.find(Book.class, book.getId());
        dbBook.setAutherName(book.getAutherName());
        entityManager.persist(dbBook);
    }

    public Book getBookById(Long id) {
        return entityManager.find(Book.class, id);
    }

    public void deleteBook(Long id) {
        Book book = entityManager.find(Book.class, id);
        entityManager.remove(book);
    }
}

Let’s rewrite the same CRUD example for Book table. There is no need to write the methods addUser(), updateUser(), etc.. because the methods already exist in JpaRepository interface.

@Repository
public interface BookRepository extends JpaRepository<Book, Long> {
    Book save(Book book);
    Optional<Book> findById(Long id);
    void deleteById(Long id);
}

You don’t have to provide any implementation because Spring provides implementation at runtime.

The methods declared in repository interfaces are called query methods.

Based on the name, parameters, and return types of the methods, Spring knows what you want to do, and prepares actual SQL statements under the hood.

I will show you a full project example in the next article.

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

ThiriYadanar — Mon, 06 Jul 2020 15:45:05 +0000

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

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.

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:

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:

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.

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:

Click Go to Employee Registration Form link.

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

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