Thymeleaf CRUD - Real Time Project

© luv2code LLC
Application Requirements
From the Boss

Create a Web UI for the Employee Directory

Users should be able to

• Get a list of employees Thymeleaf + Spring Boo
t
• Add a new employee
• Update an employee
• Delete an employee

www.luv2code.com © luv2code LLC

Real-Time Project Thymeleaf + Spring Boo
t

www.luv2code.com © luv2code LLC

Big Picture

1 2 3 4
Employe Employe Employe

Controller Service Repository

Web
Browser
Thymeleaf Templates

www.luv2code.com © luv2code LLC

Application Architecture Reuse code from

previous project

Employee Employe Employe

Controller Service Repository

New code that we will create

www.luv2code.com © luv2code LLC

Project Set Up
• We will extend our existing Employee project and add DB integration

• Add EmployeeService, EmployeeRepository and Employee entit

• Available in one of our previous project

• We created all of this code already from scratch … so we'll just copy/paste it

• Allows us to focus on creating EmployeeController and Thymeleaf

templates

www.luv2code.com © luv2code LLC

Development Process - Big Picture Step-
By-S
tep

1. Get list of employee

2. Add a new employe

3. Update an existing employe

4. Delete an existing employee

www.luv2code.com © luv2code LLC

 Thymeleaf - Add Employee

Date

© luv2code LLC
Add Employee - DEMO

www.luv2code.com © luv2code LLC

Add Employee Step-
By-S
tep
1. New Add Employee button for list-employees.html

www.luv2code.com © luv2code LLC

Add Employee Step-
By-S
tep
1. New Add Employee button for list-employees.html

2. Create HTML form for new employee

www.luv2code.com © luv2code LLC

Add Employee Step-
By-S
tep
1. New Add Employee button for list-employees.html

2. Create HTML form for new employee

3. Process form data to save employee

www.luv2code.com © luv2code LLC

Step 1: New "Add Employee" button
• Add Employee button will href link to

• request mapping /employees/showFormForAdd

<a th:href="@{/employees/showFormForAdd}">
Add Employee Add Employee
</a>
@ symbo

Reference context path of your application

(app root)

www.luv2code.com © luv2code LLC

Step 1: New "Add Employee" button
• Add Employee button will href link to

• request mapping /employees/showFormForAdd

<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

www.luv2code.com © luv2code LLC

Step 1: New "Add Employee" button
• Add Employee button will href link to

• request mapping /employees/showFormForAdd

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

Add controller request mapping for

/employees/showFormForAdd

www.luv2code.com © luv2code LLC

Showing Form
In your Spring Controller

• Before you show the form, you must add a model attribute

• This is an object that will hold form data for the data binding

www.luv2code.com © luv2code LLC

Controller code to show form
@Controller
@RequestMapping("/employees")
public class EmployeeController {

@GetMapping("/showFormForAdd") Our Thymleaf template will

public String showFormForAdd(Model theModel) { access this data for
binding form data
// create model attribute to bind form data
Employee theEmployee = new Employee();

theModel.addAttribute("employee", theEmployee);

return "employees/employee-form";
}
…
} src/main/resources/templates/employees/employee-form.html

www.luv2code.com © luv2code LLC

Thymeleaf and Spring MVC Data Binding
• Thymeleaf has special expressions for binding Spring MVC form data

• Automatically setting / retrieving data from a Java object

www.luv2code.com © luv2code LLC

Thymeleaf Expressions
• Thymeleaf expressions can help you build the HTML form :-)

Expression Description

th:action Location to send form data

th:object Reference to model attribute

th:field Bind input field to a property on model attribute

more …. See - www.luv2code.com/thymeleaf-create-form

www.luv2code.com © luv2code LLC

Step 2: Create HTML form for new employee
Empty place holder Real work
Thymeleaf will handle real work Send form data to
/employees/save

<form action="#" th:action="@{/employees/save}"

th:object="${employee}" method="POST">

</form>
Our model attribute

www.luv2code.com © luv2code LLC

Step 2: Create HTML form for new employee

www.luv2code.com © luv2code LLC

 Step 2: Create HTML form for new employee
*{…}
Selects property on referenced
th:object
<form action="#" th:action="@{/employees/save}"
th:object="${employee}" method="POST">

<input type="text" th:field="*{firstName}" placeholder="First name">

<input type="text" th:field="*{lastName}" placeholder="Last name">

<input type="text" th:field="*{email}" placeholder="Email">

<button type="submit">Save</button>

</form>

www.luv2code.com © luv2code LLC

 Step 2: Create HTML form for new employee
1
<form action="#" th:action="@{/employees/save}" When form is loaded,
th:object="${employee}" method="POST"> will call:

<input type="text" th:field="*{firstName}" placeholder="First name"> employee.getFirstName()

employee.getLastName
<input type="text" th:field="*{lastName}" placeholder="Last name">

<input type="text" th:field="*{email}" placeholder="Email">

2
<button type="submit">Save</button>
When form is submitted,
</form> will call:

employee.setFirstName(…)

employee.setLastName(…)

www.luv2code.com © luv2code LLC

 Step 2: Create HTML form for new employee
<form action="#" th:action="@{/employees/save}"
th:object="${employee}" method="POST">

<input type="text" th:field="*{firstName}" placeholder="First name"

name">
class="form-control mb-4 w-25">

<input type="text" th:field="*{lastName}" placeholder="Last name">

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>

www.luv2code.com © luv2code LLC

 Step 2: Create HTML form for new employee
<form action="#" th:action="@{/employees/save}"
th:object="${employee}" method="POST">

<input type="text" th:field="*{firstName}" placeholder="First name" Button

class="form-control mb-4 w-25"> Button Info
Column Span 2
<input type="text" th:field="*{lastName}" placeholder="Last name"
class="form-control mb-4 w-25">

<input type="text" th:field="*{email}" placeholder="Email"

class="form-control mb-4 w-25">

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

</form>

Apply Bootstrap styles

www.luv2code.com © luv2code LLC

 Step 2: Create HTML form for new employee
TODO

<form action="#" th:action="@{/employees/save}" Add controller request mapping for

th:object="${employee}" method="POST"> /employees/save

<input type="text" th:field="*{firstName}" placeholder="First name"

class="form-control mb-4 w-25">

<input type="text" th:field="*{lastName}" placeholder="Last name"

class="form-control mb-4 w-25">

<input type="text" th:field="*{email}" placeholder="Email"

class="form-control mb-4 w-25">

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

</form>

www.luv2code.com © luv2code LLC

Step 3: Process form data to save employee
@Controller
Since only one constructor
@Autowired is optional
@RequestMapping("/employees")
public class EmployeeController {

private EmployeeService employeeService;

public EmployeeController(EmployeeService theEmployeeService) {

employeeService = theEmployeeService;
}

@PostMapping("/save") Constructor injection

public String saveEmployee(@ModelAttribute("employee") Employee theEmployee) {

// save the employee

employeeService.save(theEmployee);

// use a redirect to prevent duplicate submissions

return "redirect:/employees/list";
}
…
}

www.luv2code.com © luv2code LLC

Step 3: Process form data to save employee
@Controller
@RequestMapping("/employees")
public class EmployeeController {

private EmployeeService employeeService;

public EmployeeController(EmployeeService theEmployeeService) {

employeeService = theEmployeeService;
}

@PostMapping("/save")
public String saveEmployee(@ModelAttribute("employee") Employee theEmployee) {

// save the employee

employeeService.save(theEmployee);

// use a redirect to prevent duplicate submissions

return "redirect:/employees/list";
}
…
}

www.luv2code.com © luv2code LLC

Step 3: Process form data to save employee
@Controller
@RequestMapping("/employees")
public class EmployeeController {

private EmployeeService employeeService;

public EmployeeController(EmployeeService theEmployeeService) {

employeeService = theEmployeeService;
}

@PostMapping("/save")
public String saveEmployee(@ModelAttribute("employee") Employee theEmployee) {

// save the employee

employeeService.save(theEmployee);

// use a redirect to prevent duplicate submissions "Post/Redirect/Get" pattern

return "redirect:/employees/list";
}

}
…
For more info see
Redirect to request mapping www.luv2code.com/post-redirect-get
/employees/list

www.luv2code.com © luv2code LLC

 Thymeleaf - Update Employee

Date

© luv2code LLC
Update Employee - Demo

www.luv2code.com © luv2code LLC

Update Employee Step-
By-S
tep
1. "Update" button

2. Pre-populate the form

3. Process form data

www.luv2code.com © luv2code LLC

Step 1: "Update" Button
Each row has an Update link

- current employee id embedded in link

When clicked

- will load the employee from database

- prepopulate the form

www.luv2code.com © luv2code LLC

Step 1: "Update" button
• Update button includes employee id

<tr th:each="tempEmployee : ${employees}">

…
<td>

<a th:href="@{/employees/showFormForUpdate(employeeId=${tempEmployee.id})}"
class="btn btn-info btn-sm">
Update
</a>
Appends to URL
</td>
?employeeId=xxx
</tr>

www.luv2code.com © luv2code LLC

Step 2: Pre-populate Form
@Controller
@RequestMapping("/employees")
public class EmployeeController {
…

@GetMapping("/showFormForUpdate")
public String showFormForUpdate(@RequestParam("employeeId") int theId,
Model theModel) {

// get the employee from the service

Employee theEmployee = employeeService.findById(theId);

// set employee as a model attribute to pre-populate the form

theModel.addAttribute("employee", theEmployee);

// send over to our form

return "employees/employee-form";
}

www.luv2code.com © luv2code LLC

Step 2: Pre-populate Form 1
When form is loaded,
will call:

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}" />

<input type="text" th:field="*{firstName}"

class="form-control mb-4 w-25" placeholder="First name"> This is how form is
pre-populated
<input type="text" th:field="*{lastName}" Thanks to calls to getters
class="form-control mb-4 w-25" placeholder="Last name">

<input type="text" th:field="*{email}"

class="form-control mb-4 w-25" placeholder="Email">

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

</form>

www.luv2code.com © luv2code LLC

Step 2: Pre-populate Form

<form action="#" th:action="@{/employees/save}"

th:object="${employee}" method="POST">

<!-- Add hidden form field to handle update -->

Hidden form field
<input type="hidden" th:field="*{id}" /> required for updates
<input type="text" th:field="*{firstName}"
class="form-control mb-4 w-25" placeholder="First name">

<input type="text" th:field="*{lastName}"

class="form-control mb-4 w-25" placeholder="Last name">

<input type="text" th:field="*{email}"

class="form-control mb-4 w-25" placeholder="Email">

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

</form>

www.luv2code.com © luv2code LLC

Step 2: Pre-populate Form

<form action="#" th:action="@{/employees/save}"

th:object="${employee}" method="POST">

<!-- Add hidden form field to handle update -->

<input type="hidden" th:field="*{id}" />

<input type="text" th:field="*{firstName}"

class="form-control mb-4 w-25" placeholder="First name">

<input type="text" th:field="*{lastName}"

class="form-control mb-4 w-25" placeholder="Last name">

<input type="text" th:field="*{email}"

class="form-control mb-4 w-25" placeholder="Email">

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

</form>

www.luv2code.com © luv2code LLC

Step 2: Pre-populate Form

<form action="#" th:action="@{/employees/save}"

th:object="${employee}" method="POST">

<!-- Add hidden form field to handle update -->

<input type="hidden" th:field="*{id}" />

<input type="text" th:field="*{firstName}"

class="form-control mb-4 w-25" placeholder="First name">

<input type="text" th:field="*{lastName}"

class="form-control mb-4 w-25" placeholder="Last name">

<input type="text" th:field="*{email}" This binds to the model attribute

class="form-control mb-4 w-25" placeholder="Email">

Tells your app

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

</form> which employee to update

www.luv2code.com © luv2code LLC

Step 3: Process form data to save employee
• No need for new code … we can reuse our existing cod

• Works the same for add or update :-)

@Controller
@RequestMapping("/employees")
public class EmployeeController {
…

@PostMapping("/save")
public String saveEmployee(@ModelAttribute("employee") Employee theEmployee) {

// save the employee

employeeService.save(theEmployee);

// use a redirect to prevent duplicate submissions

return "redirect:/employees/list";
}
…
}

www.luv2code.com © luv2code LLC

 Thymeleaf - Delete Employee

Date

© luv2code LLC
Delete Employee - DEMO

www.luv2code.com © luv2code LLC

Delete Employee Step-
By-S
tep
1. Add “Delete” button/link on page

2. Add controller code for “Delete”

www.luv2code.com © luv2code LLC

Step 1: "Delete" button
Each row has a Delete button/link

- current employee id embedded in link

When clicked

- prompt user
- will delete the employee from database

www.luv2code.com © luv2code LLC

Step 1: "Delete" button
• Delete button includes employee id

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"
onclick="if (!(confirm('Are you sure you want to delete this employee?'))) return false">
Delete
</a>

</td>

</tr>
JavaScript to prompt user before deleting

www.luv2code.com © luv2code LLC

Step 2: Add controller code for delete
@Controller
@RequestMapping("/employees")
public class EmployeeController {
…

@GetMapping("/delete")
public String delete(@RequestParam("employeeId") int theId) {

// delete the employee

employeeService.deleteById(theId);

// redirect to /employees/list
return "redirect:/employees/list";
}
…
}

www.luv2code.com © luv2code LLC