← Previous
Next
→
← Previous
Next
→
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
Let's implement "saveEmployee()" method EmployeeServiceImpl class. Here is 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
Post a Comment
Leave Comment