07 Spring Boot 3 Spring MVC Crud
07 Spring Boot 3 Spring MVC Crud
07 Spring Boot 3 Spring MVC Crud
© luv2code LLC
Application Requirements
From the Boss
1 2 3 4
Employe Employe Employe
Web
Browser
Thymeleaf Templates
previous project
• We created all of this code already from scratch … so we'll just copy/paste it
Date
© luv2code LLC
Add Employee - DEMO
<a th:href="@{/employees/showFormForAdd}">
Add Employee Add Employee
</a>
@ symbo
(app root)
<a th:href="@{/employees/showFormForAdd}"
<a th:href="@{/employees/showFormForAdd}">
class="btn btn-primary btn-sm mb-3">
Add Employee
Add Employee
</a>
</a>
Button
Apply Bootstrap styles Button Primary
Button Small
Docs on Bootstrap styles: www.getbootstrap.com Margin Bottom, 3 pixels
<a th:href="@{/employees/showFormForAdd}"
class="btn btn-primary btn-sm mb-3">
Add Employee
</a>
TODO
/employees/showFormForAdd
• Before you show the form, you must add a model attribute
• This is an object that will hold form data for the data binding
theModel.addAttribute("employee", theEmployee);
return "employees/employee-form";
}
…
} src/main/resources/templates/employees/employee-form.html
Expression Description
</form>
Our model attribute
<button type="submit">Save</button>
</form>
employee.getLastName
<input type="text" th:field="*{lastName}" placeholder="Last name">
2
<button type="submit">Save</button>
When form is submitted,
</form> will call:
employee.setFirstName(…)
employee.setLastName(…)
Form control
<input type="text" th:field="*{email}" placeholder="Email">
Apply Bootstrap styles Margin Bottom: 4 pixels
Width: 25%
<button type="submit">Save</button>
</form>
</form>
</form>
</form>
@PostMapping("/save")
public String saveEmployee(@ModelAttribute("employee") Employee theEmployee) {
@PostMapping("/save")
public String saveEmployee(@ModelAttribute("employee") Employee theEmployee) {
}
…
For more info see
Redirect to request mapping www.luv2code.com/post-redirect-get
/employees/list
Date
© luv2code LLC
Update Employee - Demo
When clicked
<a th:href="@{/employees/showFormForUpdate(employeeId=${tempEmployee.id})}"
class="btn btn-info btn-sm">
Update
</a>
Appends to URL
</td>
?employeeId=xxx
</tr>
@GetMapping("/showFormForUpdate")
public String showFormForUpdate(@RequestParam("employeeId") int theId,
Model theModel) {
employee.getFirstName()
<form action="#" th:action="@{/employees/save}"
th:object="${employee}" method="POST">
employee.getLastName
<!-- Add hidden form field to handle update -->
<input type="hidden" th:field="*{id}" />
</form>
</form>
</form>
@Controller
@RequestMapping("/employees")
public class EmployeeController {
…
@PostMapping("/save")
public String saveEmployee(@ModelAttribute("employee") Employee theEmployee) {
Date
© luv2code LLC
Delete Employee - DEMO
When clicked
- prompt user
- will delete the employee from database
Appends to URL
<tr th:each="tempEmployee : ${employees}">
…
?employeeId=xxx
<td>
<a th:href="@{/employees/delete(employeeId=${tempEmployee.id})}"
class="btn btn-danger btn-sm"
(!(confirm('Are you sure you want to delete this employee?'))) return false">
Delete
</a>
</td>
</tr>
JavaScript to prompt user before deleting
@GetMapping("/delete")
public String delete(@RequestParam("employeeId") int theId) {
// redirect to /employees/list
return "redirect:/employees/list";
}
…
}