Spring Boot Thymeleaf CRUD Database Real-Time Project - PART 3

In this PART 3, we will implement end-to-end to "Add Employee Feature" in our Employee Management System project.

Use the below links to navigate different parts of this tutorial:

  • Create and Setup Spring Boot Project in Eclipse STS
  • Database Setup
First, we will complete the back-end changes.

EmployeeService.java

Add "saveEmployee()" method to the EmployeeService interface. 
The complete code:
package net.javaguides.springboot.service;

import java.util.List;


import net.javaguides.springboot.model.Employee;

public interface EmployeeService {
    List < Employee > getAllEmployees();
    void saveEmployee(Employee employee);
}

EmployeeServiceImpl.java

The complete code:
package net.javaguides.springboot.service;

import java.util.List;

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

import net.javaguides.springboot.model.Employee;
import net.javaguides.springboot.repository.EmployeeRepository;

@Service
public class EmployeeServiceImpl implements EmployeeService {

    @Autowired
    private EmployeeRepository employeeRepository;

    @Override
    public List < Employee > getAllEmployees() {
        return employeeRepository.findAll();
    }

    @Override
    public void saveEmployee(Employee employee) {
        this.employeeRepository.save(employee);
    }
}

index.html changes

Add below button to index.html:
<a th:href = "@{/showNewEmployeeForm}" class="btn btn-primary btn-sm mb-3"> Add Employee </a>
The complete code:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="ISO-8859-1">
    <title>Employee Management System</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>

<body>

    <div class="container my-2">
        <h1>Employees List</h1>

        <a th:href="@{/showNewEmployeeForm}" class="btn btn-primary btn-sm mb-3"> Add Employee </a>

        <table border="1" class="table table-striped table-responsive-md">
            <thead>
                <tr>
                    <th>Employee First Name</th>
                    <th>Employee Last Name</th>
                    <th>Employee Email</th>
                    <th> Actions </th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="employee : ${listEmployees}">
                    <td th:text="${employee.firstName}"></td>
                    <td th:text="${employee.lastName}"></td>
                    <td th:text="${employee.email}"></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

EmployeeController changes

Add below method handler in EmployeeController class:
 @GetMapping("/showNewEmployeeForm")
 public String showNewEmployeeForm(Model model) {
     // create model attribute to bind form data
     Employee employee = new Employee();
     model.addAttribute("employee", employee);
     return "new_employee";
 }

Create new_employee.html

Create new new_employee.html file under "resources/templates" folder and add the following content to it:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="ISO-8859-1">
    <title>Employee Management System</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h1>Employee Management System</h1>
        <hr>
        <h2>Save Employee</h2>

        <form action="#" th:action="@{/saveEmployee}" th:object="${employee}" method="POST">
            <input type="text" th:field="*{firstName}" placeholder="Employee First Name" class="form-control mb-4 col-4">

            <input type="text" th:field="*{lastName}" placeholder="Employee Last Name" class="form-control mb-4 col-4">

            <input type="text" th:field="*{email}" placeholder="Employee Email" class="form-control mb-4 col-4">

            <button type="submit" class="btn btn-info col-2"> Save Employee</button>
        </form>

        <hr>

        <a th:href="@{/}"> Back to Employee List</a>
    </div>
</body>

</html>

EmployeeController changes

Add below method handler to EmployeeController class:
 @PostMapping("/saveEmployee")
 public String saveEmployee(@ModelAttribute("employee") Employee employee) {
     // save employee to database
     employeeService.saveEmployee(employee);
     return "redirect:/";
 }
The complete EmployeeController class code:
package net.javaguides.springboot.controller;

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

import net.javaguides.springboot.model.Employee;
import net.javaguides.springboot.service.EmployeeService;

@Controller
public class EmployeeController {

    @Autowired
    private EmployeeService employeeService;

    // display list of employees
    @GetMapping("/")
    public String viewHomePage(Model model) {
        model.addAttribute("listEmployees", employeeService.getAllEmployees());
        return "index";
    }

    @GetMapping("/showNewEmployeeForm")
    public String showNewEmployeeForm(Model model) {
        // create model attribute to bind form data
        Employee employee = new Employee();
        model.addAttribute("employee", employee);
        return "new_employee";
    }

    @PostMapping("/saveEmployee")
    public String saveEmployee(@ModelAttribute("employee") Employee employee) {
        // save employee to database
        employeeService.saveEmployee(employee);
        return "redirect:/";
    }
}

Run the Spring application and Demo


This PART 3 of this tutorial explained very well with demo in below video tutorial:


Comments