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

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

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

1. Spring Boot Thymeleaf CRUD Database Real-Time Project - PART 1
  • Create and Setup Spring Boot Project in Eclipse STS
  • Database Setup

1. Back-end changes

First, we will complete the back-end changes.

EmployeeRepository.java

Create a EmployeeRepository interface under "net.javaguides.springboot.repository" package and add the following content to it:
package net.javaguides.springboot.repository;

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

import net.javaguides.springboot.model.Employee;

@Repository
public interface EmployeeRepository extends JpaRepository<Employee, Long>{

}
This will provide a CRUD database operations for the Employee entity.

EmployeeService.java

Create an EmployeeService interface under "net.javaguides.springboot.service" and add the following content to it:
package net.javaguides.springboot.service;

import java.util.List;

import net.javaguides.springboot.model.Employee;

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

EmployeeServiceImpl.java

Create a EmployeeServiceImpl class under "net.javaguides.springboot.service" and add following content to it:
package net.javaguides.springboot.service;

import java.util.List;

import java.util.Optional;

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();
    }
}

EmployeeController.java

Create a EmployeeServiceImpl class under "net.javaguides.springboot.controller" and add following content to it:
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 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";
    }
}

2. Front-end changes

index.html

Create index.html thymeleaf template 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 my-2">
 <h1>Employees List</h1>
 
  <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>
    </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>

3. Run Spring application and demo


This tutorial explained very well with demo in below video tutorial:


Comments