📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.
🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.
▶️ Subscribe to My YouTube Channel (176K+ subscribers): Java Guides on YouTube
▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube
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