Professional Documents
Culture Documents
14 Spring Boot Thymeleaf
14 Spring Boot Thymeleaf
Uploaded by
TaseenOriginal Title
Copyright
Available Formats
Share this document
Did you find this document useful?
Is this content inappropriate?
Report this DocumentCopyright:
Available Formats
14 Spring Boot Thymeleaf
14 Spring Boot Thymeleaf
Uploaded by
TaseenCopyright:
Available Formats
Thymeleaf with Spring Boot
What is Thymeleaf?
www.luv2code.com
What is Thymeleaf?
• Thymeleaf is a Java templating engine
www.luv2code.com
What is Thymeleaf?
• Thymeleaf is a Java templating engine www.thymeleaf.org
www.luv2code.com
What is Thymeleaf?
• Thymeleaf is a Java templating engine www.thymeleaf.org
• Commonly used to generate the HTML views for web apps
www.luv2code.com
What is Thymeleaf?
• Thymeleaf is a Java templating engine www.thymeleaf.org
• Commonly used to generate the HTML views for web apps
• However, it is a general purpose templating engine
www.luv2code.com
What is Thymeleaf?
• Thymeleaf is a Java templating engine
www.thymeleaf.org
• Commonly used to generate the HTML views for web apps
• However, it is a general purpose templating engine
• Can use Thymeleaf outside of web apps (more on this later)
www.luv2code.com
What is Thymeleaf?
• Thymeleaf is a Java templating engine
www.thymeleaf.org
• Commonly used to generate the HTML views for web Separate
apps project
Unrelated to spring.io
• However, it is a general purpose templating engine
• Can use Thymeleaf outside of web apps (more on this later)
www.luv2code.com
What is a Thymeleaf template?
www.luv2code.com
What is a Thymeleaf template?
• Can be an HTML page with some Thymeleaf expressions
www.luv2code.com
What is a Thymeleaf template?
• Can be an HTML page with some Thymeleaf expressions
• Include dynamic content from Thymeleaf expressions
www.luv2code.com
What is a Thymeleaf template?
• Can be an HTML page with some Thymeleaf expressions
• Include dynamic content from Thymeleaf expressions
HTML code
Thymeleaf expressions
www.luv2code.com
What is a Thymeleaf template?
• Can be an HTML page with some Thymeleaf expressions
• Include dynamic content from Thymeleaf expressions
HTML code
Can access
Thymeleaf expressions Java code, objects
Spring beans
www.luv2code.com
Where is the Thymeleaf template processed?
www.luv2code.com
Where is the Thymeleaf template processed?
• In a web app, Thymeleaf is processed on the server
www.luv2code.com
Where is the Thymeleaf template processed?
• In a web app, Thymeleaf is processed on the server
• Results included in HTML returned to browser
www.luv2code.com
Where is the Thymeleaf template processed?
• In a web app, Thymeleaf is processed on the server
• Results included in HTML returned to browser
www.luv2code.com
Hmmm …
This sounds similar to JSP …
www.luv2code.com
Thymeleaf vs JSP
www.luv2code.com
Thymeleaf vs JSP
• Yes, Thymeleaf is similar to JSP
www.luv2code.com
Thymeleaf vs JSP
• Yes, Thymeleaf is similar to JSP
• Can be used for web view templates
www.luv2code.com
Thymeleaf vs JSP
• Yes, Thymeleaf is similar to JSP
• Can be used for web view templates
www.luv2code.com
Thymeleaf vs JSP
• Yes, Thymeleaf is similar to JSP
• Can be used for web view templates
• One key difference
www.luv2code.com
Thymeleaf vs JSP
• Yes, Thymeleaf is similar to JSP
• Can be used for web view templates
• One key difference
• JSP can only be used in a web environment
www.luv2code.com
Thymeleaf vs JSP
• Yes, Thymeleaf is similar to JSP
• Can be used for web view templates
• One key difference
• JSP can only be used in a web environment
• Thymeleaf can be used in web OR non-web environments
www.luv2code.com
Thymeleaf Use Cases (non-web)
www.luv2code.com
Thymeleaf Use Cases (non-web)
• Email Template
www.luv2code.com
Thymeleaf Use Cases (non-web)
Hi <<firstName>>,
Thanks for joining <<course>>!
• Email Template
• When student signs up for a course then send welcome email
www.luv2code.com
Thymeleaf Use Cases (non-web)
Hi <<firstName>>,
Thanks for joining <<course>>!
• Email Template
• When student signs up for a course then send welcome email
• CSV Template
www.luv2code.com
Thymeleaf Use Cases (non-web)
Hi <<firstName>>,
Thanks for joining <<course>>!
• Email Template
• When student signs up for a course then send welcome email
• CSV Template
Product,Quantity,Price,Total
…
• Generate a monthly report as CSV then upload to Google drive …
CSV
www.luv2code.com
Thymeleaf Use Cases (non-web)
Hi <<firstName>>,
Thanks for joining <<course>>!
• Email Template
• When student signs up for a course then send welcome email
• CSV Template
Product,Quantity,Price,Total
…
• Generate a monthly report as CSV then upload to Google drive …
CSV
• PDF Template
www.luv2code.com
Thymeleaf Use Cases (non-web)
Hi <<firstName>>,
Thanks for joining <<course>>!
• Email Template
• When student signs up for a course then send welcome email
• CSV Template
Product,Quantity,Price,Total
…
• Generate a monthly report as CSV then upload to Google drive
…
CSV
• PDF Template
• Generate a travel confirmation PDF then send via email Flight: <<flightNum>>
Depart: <<departAirport>>
Arrive: <<arrivalAirport>>
www.luv2code.com
FAQ: Should I use JSP or Thymeleaf?
www.luv2code.com
FAQ: Should I use JSP or Thymeleaf?
• Depends on your project requirements
www.luv2code.com
FAQ: Should I use JSP or Thymeleaf?
• Depends on your project requirements
• If you only need web views you can go either way
www.luv2code.com
FAQ: Should I use JSP or Thymeleaf?
• Depends on your project requirements
• If you only need web views you can go either way
• If you need a general purpose template engine (non-web) use Thymeleaf
www.luv2code.com
FAQ: Should I use JSP or Thymeleaf?
• Depends on your project requirements
• If you only need web views you can go either way
• If you need a general purpose template engine (non-web) use Thymeleaf
• If you want to impress your interviewer, mention Thymeleaf … LOL!
www.luv2code.com
Thymeleaf Demo
www.luv2code.com
Thymeleaf Demo
www.luv2code.com
Thymeleaf Demo
Output
www.luv2code.com
Development Process Step-
By-S
tep
www.luv2code.com
Development Process Step-
By-S
tep
1. Add Thymeleaf to Maven POM file
www.luv2code.com
Development Process Step-
By-S
tep
1. Add Thymeleaf to Maven POM file
2. Develop Spring MVC Controller
www.luv2code.com
Development Process Step-
By-S
tep
1. Add Thymeleaf to Maven POM file
2. Develop Spring MVC Controller
3. Create Thymeleaf template
www.luv2code.com
Step 1: Add Thymeleaf to Maven pom file
www.luv2code.com
Step 1: Add Thymeleaf to Maven pom file
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
www.luv2code.com
Step 1: Add Thymeleaf to Maven pom file
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
www.luv2code.com
Step 1: Add Thymeleaf to Maven pom file
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Based on this,
Spring Boot will auto configure to
use Thymeleaf templates
www.luv2code.com
Step 2: Develop Spring MVC Controller
www.luv2code.com
Step 2: Develop Spring MVC Controller
File: DemoController.java
@Controller
public class DemoController {
@GetMapping("/")
public String sayHello(Model theModel) {
theModel.addAttribute("theDate", new java.util.Date());
return "helloworld";
}
}
www.luv2code.com
Step 2: Develop Spring MVC Controller
File: DemoController.java
@Controller
public class DemoController {
@GetMapping("/")
public String sayHello(Model theModel) {
theModel.addAttribute("theDate", new java.util.Date());
return "helloworld";
}
}
src/main/resources/templates/helloworld.html
www.luv2code.com
Where to place Thymeleaf template?
www.luv2code.com
Where to place Thymeleaf template?
• In Spring Boot, your Thymeleaf template files go in
www.luv2code.com
Where to place Thymeleaf template?
• In Spring Boot, your Thymeleaf template files go in
• src/main/resources/templates
www.luv2code.com
Where to place Thymeleaf template?
• In Spring Boot, your Thymeleaf template files go in
• src/main/resources/templates
• For web apps, Thymeleaf templates have a .html extension
www.luv2code.com
Step 3: Create Thymeleaf template
www.luv2code.com
Step 3: Create Thymeleaf template
File: src/main/resources/templates/helloworld.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head> … </head>
<body>
<p th:text="'Time on the server is ' + ${theDate}" />
</body>
</html>
www.luv2code.com
Step 3: Create Thymeleaf template
File: src/main/resources/templates/helloworld.html
To use Thymeleaf
<!DOCTYPE HTML> expressions
<html xmlns:th="http://www.thymeleaf.org">
<head> … </head>
<body>
<p th:text="'Time on the server is ' + ${theDate}" />
</body>
</html>
www.luv2code.com
Step 3: Create Thymeleaf template
File: src/main/resources/templates/helloworld.html
To use Thymeleaf
<!DOCTYPE HTML> expressions
<html xmlns:th="http://www.thymeleaf.org">
<head> … </head>
<body>
<p th:text="'Time on the server is ' + ${theDate}" />
</body>
</html>
Thymeleaf
expression
www.luv2code.com
Step 3: Create Thymeleaf template
File: src/main/resources/templates/helloworld.html
To use Thymeleaf
<!DOCTYPE HTML> expressions
<html xmlns:th="http://www.thymeleaf.org">
<head> … </head>
<body>
<p th:text="'Time on the server is ' + ${theDate}" />
</body>
</html>
Thymeleaf
expression
www.luv2code.com
Step 3: Create Thymeleaf template
File: src/main/resources/templates/helloworld.html
To use Thymeleaf
<!DOCTYPE HTML> expressions
<html xmlns:th="http://www.thymeleaf.org">
<head> … </head>
<body>
<p th:text="'Time on the server is ' + ${theDate}" />
</body>
</html>
Thymeleaf
expression
www.luv2code.com
Step 3: Create Thymeleaf template
File: DemoController.java
@Controller
public class DemoController {
@GetMapping("/")
public String sayHello(Model theModel) {
File: src/main/resources/templates/helloworld.html theModel.addAttribute("theDate", new java.util.Date());
<!DOCTYPE HTML> return "helloworld";
<html xmlns:th="http://www.thymeleaf.org"> }
<head> … </head> }
<body>
<p th:text="'Time on the server is ' + ${theDate}" />
</body>
</html>
Thymeleaf
expression
www.luv2code.com
Step 3: Create Thymeleaf template
File: DemoController.java
@Controller
public class DemoController {
@GetMapping("/")
public String sayHello(Model theModel) {
File: src/main/resources/templates/helloworld.html theModel.addAttribute("theDate", new java.util.Date());
<!DOCTYPE HTML> return "helloworld";
<html xmlns:th="http://www.thymeleaf.org"> } 1
<head> … </head> }
<body>
<p th:text="'Time on the server is ' + ${theDate}" />
</body>
</html>
Thymeleaf
expression
www.luv2code.com
Step 3: Create Thymeleaf template
File: DemoController.java
@Controller
public class DemoController {
Thymeleaf accesses "theDate" @GetMapping("/")
public String sayHello(Model theModel) {
from the
File: src/main/resources/templates/helloworld.html theModel.addAttribute("theDate", new java.util.Date());
Spring MVC Model
<!DOCTYPE HTML> return "helloworld";
<html xmlns:th="http://www.thymeleaf.org"> } 1
<head> … </head> }
<body>
<p th:text="'Time on the server is ' + ${theDate}" />
</body>
</html>
Thymeleaf
expression
www.luv2code.com
Step 3: Create Thymeleaf template
File: DemoController.java
@Controller
public class DemoController {
Thymeleaf accesses "theDate" @GetMapping("/")
public String sayHello(Model theModel) {
from the
File: src/main/resources/templates/helloworld.html theModel.addAttribute("theDate", new java.util.Date());
Spring MVC Model
<!DOCTYPE HTML> return "helloworld";
<html xmlns:th="http://www.thymeleaf.org"> } 1
<head> … </head> }
<body>
<p th:text="'Time on the server is ' + ${theDate}" />
</body>
</html>
2
Thymeleaf
expression
www.luv2code.com
Additional Features
www.luv2code.com
Additional Features
• Looping and conditionals
www.luv2code.com
Additional Features
• Looping and conditionals
• CSS and JavaScript integration
www.luv2code.com
Additional Features
• Looping and conditionals
• CSS and JavaScript integration
• Template layouts and fragments
www.luv2code.com
Additional Features
• Looping and conditionals
• CSS and JavaScript integration
• Template layouts and fragments
www.thymeleaf.org
www.luv2code.com
CSS and Thymeleaf
Let's Apply CSS Styles to our Page
www.luv2code.com
Let's Apply CSS Styles to our Page
Before
Time on the server is Sat Jan 05 11:42:13 EST 2019
www.luv2code.com
Let's Apply CSS Styles to our Page
Before After
Time on the server is Sat Jan 05 11:42:13 EST 2019 Time on the server is Sat Jan 05 11:42:13 EST 2019
www.luv2code.com
Let's Apply CSS Styles to our Page
Before After
Time on the server is Sat Jan 05 11:42:13 EST 2019 Time on the server is Sat Jan 05 11:42:13 EST 2019
font-style: italic;
color: green;
www.luv2code.com
Using CSS with Thymleaf Templates
www.luv2code.com
Using CSS with Thymleaf Templates
• You have the option of using
www.luv2code.com
Using CSS with Thymleaf Templates
• You have the option of using
• Local CSS files as part of your project
www.luv2code.com
Using CSS with Thymleaf Templates
• You have the option of using
• Local CSS files as part of your project
• Referencing remote CSS files
www.luv2code.com
Using CSS with Thymleaf Templates
• You have the option of using
• Local CSS files as part of your project
• Referencing remote CSS files
• We'll cover both options in this video
www.luv2code.com
Development Process Step-
By-S
tep
www.luv2code.com
Development Process Step-
By-S
tep
1. Create CSS file
www.luv2code.com
Development Process Step-
By-S
tep
1. Create CSS file
2. Reference CSS in Thymeleaf template
www.luv2code.com
Development Process Step-
By-S
tep
1. Create CSS file
2. Reference CSS in Thymeleaf template
3. Apply CSS style
www.luv2code.com
Step 1: Create CSS file
www.luv2code.com
Step 1: Create CSS file
• Spring Boot will look for static resources in the directory
www.luv2code.com
Step 1: Create CSS file
• Spring Boot will look for static resources in the directory
• src/main/resources/static
www.luv2code.com
Step 1: Create CSS file
• Spring Boot will look for static resources in the directory
• src/main/resources/static
src/main/resources
static
css
demo.css
www.luv2code.com
Step 1: Create CSS file
• Spring Boot will look for static resources in the directory
• src/main/resources/static
src/main/resources
static
File: demo.css
css
.funny {
demo.css font-style: italic;
color: green;
}
www.luv2code.com
Step 1: Create CSS file
• Spring Boot will look for static resources in the directory
• src/main/resources/static
src/main/resources
static
File: demo.css
css
.funny {
demo.css font-style: italic;
color: green;
}
Can be any sub-directory name
www.luv2code.com
Step 1: Create CSS file
• Spring Boot will look for static resources in the directory
You can create your own
custom sub-directories
• src/main/resources/static static/css
static/images
static/js
src/main/resources etc …
static
File: demo.css
css
.funny {
demo.css font-style: italic;
color: green;
}
Can be any sub-directory name
www.luv2code.com
Step 2: Reference CSS in Thymeleaf template
www.luv2code.com
Step 2: Reference CSS in Thymeleaf template
File: helloworld.html
<head>
<title>Thymeleaf Demo</title>
<!-- reference CSS file -->
<link rel="stylesheet" th:href="@{/css/demo.css}" />
</head>
www.luv2code.com
Step 2: Reference CSS in Thymeleaf template
File: helloworld.html
<head>
<title>Thymeleaf Demo</title>
<!-- reference CSS file -->
<link rel="stylesheet" th:href="@{/css/demo.css}" />
</head>
src/main/resources
static
css
demo.css
www.luv2code.com
Step 2: Reference CSS in Thymeleaf template
File: helloworld.html @ symbol
<head> Reference context path of your application
<title>Thymeleaf Demo</title> (app root)
<!-- reference CSS file -->
<link rel="stylesheet" th:href="@{/css/demo.css}" />
</head>
src/main/resources
static
css
demo.css
www.luv2code.com
Step 3: Apply CSS
www.luv2code.com
Step 3: Apply CSS
File: helloworld.html
<head>
<title>Thymeleaf Demo</title>
<!-- reference CSS file -->
<link rel="stylesheet" th:href="@{/css/demo.css}" />
</head>
<body>
<p th:text="'Time on the server is ' + ${theDate}" class="funny" />
</body>
www.luv2code.com
Step 3: Apply CSS
File: demo.css
File: helloworld.html
.funny {
<head> font-style: italic;
<title>Thymeleaf Demo</title> color: green;
}
<!-- reference CSS file -->
<link rel="stylesheet" th:href="@{/css/demo.css}" />
</head>
<body>
<p th:text="'Time on the server is ' + ${theDate}" class="funny" />
</body>
www.luv2code.com
Step 3: Apply CSS
File: demo.css
File: helloworld.html
.funny {
<head> font-style: italic;
<title>Thymeleaf Demo</title> color: green;
}
<!-- reference CSS file -->
<link rel="stylesheet" th:href="@{/css/demo.css}" />
</head>
<body>
<p th:text="'Time on the server is ' + ${theDate}" class="funny" />
</body>
www.luv2code.com
Step 3: Apply CSS
File: demo.css
File: helloworld.html
.funny {
<head> font-style: italic;
<title>Thymeleaf Demo</title> color: green;
}
<!-- reference CSS file -->
<link rel="stylesheet" th:href="@{/css/demo.css}" />
</head>
<body>
<p th:text="'Time on the server is ' + ${theDate}" class="funny" />
</body>
Time on the server is Sat Jan 05 11:42:13 EST 2019
www.luv2code.com
Step 3: Apply CSS
File: demo.css
File: helloworld.html
.funny {
<head> font-style: italic;
<title>Thymeleaf Demo</title> color: green;
}
<!-- reference CSS file -->
<link rel="stylesheet" th:href="@{/css/demo.css}" />
</head>
<body>
<p th:text="'Time on the server is ' + ${theDate}" class="funny" />
</body>
Time on the server is Sat Jan 05 11:42:13 EST 2019
www.luv2code.com
Other search directories
www.luv2code.com
Other search directories
Spring Boot will search following directories for static resources:
/src/main/resources
www.luv2code.com
Other search directories
Spring Boot will search following directories for static resources:
/src/main/resources
1. /META-INF/resources
www.luv2code.com
Other search directories
Spring Boot will search following directories for static resources:
/src/main/resources
1. /META-INF/resources
2. /resources
www.luv2code.com
Other search directories
Spring Boot will search following directories for static resources:
/src/main/resources
1. /META-INF/resources
2. /resources
3. /static
www.luv2code.com
Other search directories
Spring Boot will search following directories for static resources:
/src/main/resources
1. /META-INF/resources
2. /resources
3. /static
4. /public
www.luv2code.com
Other search directories
Spring Boot will search following directories for static resources:
/src/main/resources
1. /META-INF/resources
2. /resources Search order: top-down
3. /static
4. /public
www.luv2code.com
3rd Party CSS Libraries - Bootstrap
www.luv2code.com
3rd Party CSS Libraries - Bootstrap
• Local Installation
www.luv2code.com
3rd Party CSS Libraries - Bootstrap
• Local Installation
• Download Bootstrap file(s) and add to /static/css directory
www.luv2code.com
3rd Party CSS Libraries - Bootstrap
• Local Installation
• Download Bootstrap file(s) and add to /static/css directory
www.luv2code.com
3rd Party CSS Libraries - Bootstrap
• Local Installation
• Download Bootstrap file(s) and add to /static/css directory
<head>
… …
<!-- reference CSS file -->
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
</head>
www.luv2code.com
3rd Party CSS Libraries - Bootstrap
www.luv2code.com
3rd Party CSS Libraries - Bootstrap
• Remote Files
www.luv2code.com
3rd Party CSS Libraries - Bootstrap
• Remote Files
<head>
… …
<!-- reference CSS file -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
… …
</head>
www.luv2code.com
Create HTML Tables with Thymeleaf
HTML Tables Start with plain table
Will add CSS in later videos
www.luv2code.com
HTML Tables Start with plain table
Will add CSS in later videos
www.luv2code.com
Big Picture
1
Employee
Controller
Web 2 Model
Browser
Thymeleaf Template
www.luv2code.com
Development Process Step-
By-S
tep
www.luv2code.com
Development Process Step-
By-S
tep
1. Create Employee.java
www.luv2code.com
Development Process Step-
By-S
tep
1. Create Employee.java
2. Create EmployeeController.java
www.luv2code.com
Development Process Step-
By-S
tep
1. Create Employee.java
2. Create EmployeeController.java
3. Create Thymeleaf template
www.luv2code.com
Step 1: Create Employee.java
www.luv2code.com
Step 1: Create Employee.java
• Regular Java class: fields, constructors, getters / setters
www.luv2code.com
Step 2: Create EmployeeController.java
www.luv2code.com
Step 2: Create EmployeeController.java
@Controller
@RequestMapping("/employees")
public class EmployeeController {
www.luv2code.com
Step 2: Create EmployeeController.java
@Controller
@RequestMapping("/employees")
public class EmployeeController {
@GetMapping("/list")
public String listEmployees(Model theModel) {
www.luv2code.com
Step 2: Create EmployeeController.java
@Controller
@RequestMapping("/employees")
public class EmployeeController {
Will add database
integration later
@GetMapping("/list")
public String listEmployees(Model theModel) {
// create employees
Employee emp1 = new Employee(1, "Leslie", "Andrews", "leslie@luv2code.com");
Employee emp2 = new Employee(2, "Emma", "Baumgarten", "emma@luv2code.com");
Employee emp3 = new Employee(3, "Avani", "Gupta", "avani@luv2code.com");
www.luv2code.com
Step 2: Create EmployeeController.java
@Controller
@RequestMapping("/employees")
public class EmployeeController {
@GetMapping("/list")
public String listEmployees(Model theModel) {
// create employees
Employee emp1 = new Employee(1, "Leslie", "Andrews", "leslie@luv2code.com");
Employee emp2 = new Employee(2, "Emma", "Baumgarten", "emma@luv2code.com");
Employee emp3 = new Employee(3, "Avani", "Gupta", "avani@luv2code.com");
// create the list
List<Employee> theEmployees = new ArrayList<>();
www.luv2code.com
Step 2: Create EmployeeController.java
@Controller
@RequestMapping("/employees")
public class EmployeeController {
@GetMapping("/list")
public String listEmployees(Model theModel) {
// create employees
Employee emp1 = new Employee(1, "Leslie", "Andrews", "leslie@luv2code.com");
Employee emp2 = new Employee(2, "Emma", "Baumgarten", "emma@luv2code.com");
Employee emp3 = new Employee(3, "Avani", "Gupta", "avani@luv2code.com");
// create the list
List<Employee> theEmployees = new ArrayList<>();
// add to the list
theEmployees.add(emp1);
theEmployees.add(emp2);
theEmployees.add(emp3);
www.luv2code.com
Step 2: Create EmployeeController.java
@Controller
@RequestMapping("/employees")
public class EmployeeController {
@GetMapping("/list")
public String listEmployees(Model theModel) {
// create employees
Employee emp1 = new Employee(1, "Leslie", "Andrews", "leslie@luv2code.com");
Employee emp2 = new Employee(2, "Emma", "Baumgarten", "emma@luv2code.com");
Employee emp3 = new Employee(3, "Avani", "Gupta", "avani@luv2code.com");
// create the list
List<Employee> theEmployees = new ArrayList<>();
// add to the list
theEmployees.add(emp1);
theEmployees.add(emp2);
theEmployees.add(emp3);
// add to the spring model
theModel.addAttribute("employees", theEmployees);
www.luv2code.com
Step 2: Create EmployeeController.java
@Controller
@RequestMapping("/employees")
public class EmployeeController {
@GetMapping("/list")
public String listEmployees(Model theModel) {
// create employees
Employee emp1 = new Employee(1, "Leslie", "Andrews", "leslie@luv2code.com");
Employee emp2 = new Employee(2, "Emma", "Baumgarten", "emma@luv2code.com");
Employee emp3 = new Employee(3, "Avani", "Gupta", "avani@luv2code.com");
// create the list
List<Employee> theEmployees = new ArrayList<>();
// add to the list
Our Thymleaf template will
theEmployees.add(emp1);
theEmployees.add(emp2);
access this data
theEmployees.add(emp3);
// add to the spring model
theModel.addAttribute("employees", theEmployees);
www.luv2code.com
Step 2: Create EmployeeController.java
@Controller
@RequestMapping("/employees")
public class EmployeeController {
@GetMapping("/list")
public String listEmployees(Model theModel) {
// create employees
Employee emp1 = new Employee(1, "Leslie", "Andrews", "leslie@luv2code.com");
Employee emp2 = new Employee(2, "Emma", "Baumgarten", "emma@luv2code.com");
Employee emp3 = new Employee(3, "Avani", "Gupta", "avani@luv2code.com");
// create the list
List<Employee> theEmployees = new ArrayList<>();
// add to the list
Our Thymleaf template will
theEmployees.add(emp1);
theEmployees.add(emp2);
access this data
theEmployees.add(emp3);
// add to the spring model
theModel.addAttribute("employees", theEmployees);
return "list-employees";
}
}
www.luv2code.com
Step 2: Create EmployeeController.java
@Controller
@RequestMapping("/employees")
public class EmployeeController {
@GetMapping("/list")
public String listEmployees(Model theModel) {
// create employees
Employee emp1 = new Employee(1, "Leslie", "Andrews", "leslie@luv2code.com");
Employee emp2 = new Employee(2, "Emma", "Baumgarten", "emma@luv2code.com");
Employee emp3 = new Employee(3, "Avani", "Gupta", "avani@luv2code.com");
// create the list
List<Employee> theEmployees = new ArrayList<>();
// add to the list
Our Thymleaf template will
theEmployees.add(emp1);
theEmployees.add(emp2);
access this data
theEmployees.add(emp3);
// add to the spring model
theModel.addAttribute("employees", theEmployees);
return "list-employees";
} src/main/resources/templates/list-employees.html
}
www.luv2code.com
Step 3: Create Thymeleaf template
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
To use Thymeleaf
<!DOCTYPE HTML> expressions
<html lang="en" xmlns:th="http://www.thymeleaf.org">
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
To use Thymeleaf
<!DOCTYPE HTML> expressions
<html lang="en" xmlns:th="http://www.thymeleaf.org">
…
<body>
<h3>Employee Directory</h3>
<hr>
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
To use Thymeleaf
<!DOCTYPE HTML> expressions
<html lang="en" xmlns:th="http://www.thymeleaf.org">
…
<body>
<h3>Employee Directory</h3>
<hr>
<table border="1">
<!-- Build HTML table based on employees -->
</table>
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
To use Thymeleaf
<!DOCTYPE HTML> expressions
<html lang="en" xmlns:th="http://www.thymeleaf.org">
…
<body>
<h3>Employee Directory</h3>
<hr>
<table border="1">
<!-- Build HTML table based on employees -->
</table>
To Do
Add code to loop over employees
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
To use Thymeleaf
<!DOCTYPE HTML> expressions
<html lang="en" xmlns:th="http://www.thymeleaf.org">
…
<body>
<h3>Employee Directory</h3>
<hr>
<table border="1">
<!-- Build HTML table based on employees -->
</table>
</body> To Do
Add code to loop over employees
</html>
www.luv2code.com
Step 3: Create Thymeleaf template
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
<table border="1">
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr th:each="tempEmployee : ${employees}">
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
Loop over
</tr> list of employees
</thead>
<tbody>
<tr th:each="tempEmployee : ${employees}">
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
Loop over
</tr> list of employees
Loop parameter
</thead>
<tbody>
<tr th:each="tempEmployee : ${employees}">
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
Loop over
</tr> list of employees
Loop parameter
</thead>
<tbody>
<tr th:each="tempEmployee : ${employees}">
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
Loop over
</tr> list of employees
Loop parameter
</thead>
<tbody>
<tr th:each="tempEmployee : ${employees}">
<td th:text="${tempEmployee.firstName}" />
<td th:text="${tempEmployee.lastName}" />
<td th:text="${tempEmployee.email}" />
</tr>
</tbody>
</table>
www.luv2code.com
Thymeleaf and Bootstrap
Let’s Make our Page Beautiful
www.luv2code.com
Let’s Make our Page Beautiful
Before
www.luv2code.com
Let’s Make our Page Beautiful
Before After
www.luv2code.com
Let’s Make our Page Beautiful
Before After
Bootstrap
www.luv2code.com
Development Process Step-
By-S
tep
www.luv2code.com
Development Process Step-
By-S
tep
1. Get links for remote Bootstrap files
www.luv2code.com
Development Process Step-
By-S
tep
1. Get links for remote Bootstrap files
2. Add links in Thymeleaf template
www.luv2code.com
Development Process Step-
By-S
tep
1. Get links for remote Bootstrap files
2. Add links in Thymeleaf template
3. Apply Bootstrap CSS styles
www.luv2code.com
Step 1: Get links for remote Bootstrap files
www.luv2code.com
Step 1: Get links for remote Bootstrap files
• Visit Bootstrap website: www.getbootstrap.com
www.luv2code.com
Step 1: Get links for remote Bootstrap files
• Visit Bootstrap website: www.getbootstrap.com
• Website has instructions on how to Get Started
www.luv2code.com
Step 1: Get links for remote Bootstrap files
• Visit Bootstrap website: www.getbootstrap.com
• Website has instructions on how to Get Started
www.luv2code.com
Step 2: Add links in Thymeleaf template
www.luv2code.com
Step 2: Add links in Thymeleaf template
<head>
…
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/x.y.z/css/bootstrap.min.css" …>
…
</head>
www.luv2code.com
Step 2: Add links in Thymeleaf template
<head>
…
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/x.y.z/css/bootstrap.min.css" …>
…
</head>
Version number
www.luv2code.com
Step 3: Apply CSS
www.luv2code.com
Step 3: Apply CSS
<body>
<div class="container">
<h3>Employee Directory</h3>
<hr>
<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
… …
</table>
</div>
</body>
www.luv2code.com
Step 3: Apply CSS
Bootstrap CSS style
<body>
<div class="container">
<h3>Employee Directory</h3>
<hr>
<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
… …
</table>
</div>
</body>
www.luv2code.com
Step 3: Apply CSS
Bootstrap CSS style
<body>
<div class="container">
<h3>Employee Directory</h3> Bootstrap CSS styles
<hr>
<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
… …
</table>
</div>
</body>
www.luv2code.com
Step 3: Apply CSS
Bootstrap CSS style
<body>
<div class="container">
<h3>Employee Directory</h3> Bootstrap CSS styles
<hr>
<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
… …
</table>
</div>
</body>
www.luv2code.com
Create HTML Tables with Thymeleaf
HTML Tables
www.luv2code.com
HTML Tables
www.luv2code.com
HTML Tables Start with plain table
Will add CSS in later videos
www.luv2code.com
Big Picture
Employee
Controller
Web
Browser
Thymeleaf Template
www.luv2code.com
Big Picture
1
Employee
Controller
Web
Browser
Thymeleaf Template
www.luv2code.com
Big Picture
1
Employee
Controller
Web 2 Model
Browser
Thymeleaf Template
www.luv2code.com
Big Picture
1
Employee
Controller
Web 2 Model
Browser
Thymeleaf Template
www.luv2code.com
Development Process Step-
By-S
tep
www.luv2code.com
Development Process Step-
By-S
tep
1. Create Employee class
www.luv2code.com
Development Process Step-
By-S
tep
1. Create Employee class
2. Create Employee Controller
www.luv2code.com
Development Process Step-
By-S
tep
1. Create Employee class
2. Create Employee Controller
3. Create Thymeleaf template
www.luv2code.com
Step 1: Create Employee class
www.luv2code.com
Step 1: Create Employee class
• Regular Java class: fields, constructors, getters / setters
www.luv2code.com
Step 2: Create Employee Controller
www.luv2code.com
Step 2: Create Employee Controller
@Controller
@RequestMapping("/employees")
public class EmployeeController {
www.luv2code.com
Step 2: Create Employee Controller
@Controller
@RequestMapping("/employees")
public class EmployeeController {
@GetMapping("/list")
public String listEmployees(Model theModel) {
www.luv2code.com
Step 2: Create Employee Controller
@Controller
@RequestMapping("/employees")
public class EmployeeController {
Will add database
integration later
@GetMapping("/list")
public String listEmployees(Model theModel) {
// create employees
Employee emp1 = new Employee(1, "Leslie", "Andrews", "leslie@luv2code.com");
Employee emp2 = new Employee(2, "Emma", "Baumgarten", "emma@luv2code.com");
Employee emp3 = new Employee(3, "Avani", "Gupta", "avani@luv2code.com");
www.luv2code.com
Step 2: Create Employee Controller
@Controller
@RequestMapping("/employees")
public class EmployeeController {
@GetMapping("/list")
public String listEmployees(Model theModel) {
// create employees
Employee emp1 = new Employee(1, "Leslie", "Andrews", "leslie@luv2code.com");
Employee emp2 = new Employee(2, "Emma", "Baumgarten", "emma@luv2code.com");
Employee emp3 = new Employee(3, "Avani", "Gupta", "avani@luv2code.com");
// create the list
List<Employee> theEmployees = new ArrayList<>();
www.luv2code.com
Step 2: Create Employee Controller
@Controller
@RequestMapping("/employees")
public class EmployeeController {
@GetMapping("/list")
public String listEmployees(Model theModel) {
// create employees
Employee emp1 = new Employee(1, "Leslie", "Andrews", "leslie@luv2code.com");
Employee emp2 = new Employee(2, "Emma", "Baumgarten", "emma@luv2code.com");
Employee emp3 = new Employee(3, "Avani", "Gupta", "avani@luv2code.com");
// create the list
List<Employee> theEmployees = new ArrayList<>();
// add to the list
theEmployees.add(emp1);
theEmployees.add(emp2);
theEmployees.add(emp3);
www.luv2code.com
Step 2: Create Employee Controller
@Controller
@RequestMapping("/employees")
public class EmployeeController {
@GetMapping("/list")
public String listEmployees(Model theModel) {
// create employees
Employee emp1 = new Employee(1, "Leslie", "Andrews", "leslie@luv2code.com");
Employee emp2 = new Employee(2, "Emma", "Baumgarten", "emma@luv2code.com");
Employee emp3 = new Employee(3, "Avani", "Gupta", "avani@luv2code.com");
// create the list
List<Employee> theEmployees = new ArrayList<>();
// add to the list
theEmployees.add(emp1);
theEmployees.add(emp2);
theEmployees.add(emp3);
// add to the Spring MVC model
theModel.addAttribute("employees", theEmployees);
www.luv2code.com
Step 2: Create Employee Controller
@Controller
@RequestMapping("/employees")
public class EmployeeController {
@GetMapping("/list")
public String listEmployees(Model theModel) {
// create employees
Employee emp1 = new Employee(1, "Leslie", "Andrews", "leslie@luv2code.com");
Employee emp2 = new Employee(2, "Emma", "Baumgarten", "emma@luv2code.com");
Employee emp3 = new Employee(3, "Avani", "Gupta", "avani@luv2code.com");
// create the list
List<Employee> theEmployees = new ArrayList<>();
// add to the list
Our Thymleaf template will
theEmployees.add(emp1);
theEmployees.add(emp2);
access this data
theEmployees.add(emp3);
// add to the Spring MVC model
theModel.addAttribute("employees", theEmployees);
www.luv2code.com
Step 2: Create Employee Controller
@Controller
@RequestMapping("/employees")
public class EmployeeController {
@GetMapping("/list")
public String listEmployees(Model theModel) {
// create employees
Employee emp1 = new Employee(1, "Leslie", "Andrews", "leslie@luv2code.com");
Employee emp2 = new Employee(2, "Emma", "Baumgarten", "emma@luv2code.com");
Employee emp3 = new Employee(3, "Avani", "Gupta", "avani@luv2code.com");
// create the list
List<Employee> theEmployees = new ArrayList<>();
// add to the list
Our Thymleaf template will
theEmployees.add(emp1);
theEmployees.add(emp2);
access this data
theEmployees.add(emp3);
// add to the Spring MVC model
theModel.addAttribute("employees", theEmployees);
return "list-employees";
}
}
www.luv2code.com
Step 2: Create Employee Controller
@Controller
@RequestMapping("/employees")
public class EmployeeController {
@GetMapping("/list")
public String listEmployees(Model theModel) {
// create employees
Employee emp1 = new Employee(1, "Leslie", "Andrews", "leslie@luv2code.com");
Employee emp2 = new Employee(2, "Emma", "Baumgarten", "emma@luv2code.com");
Employee emp3 = new Employee(3, "Avani", "Gupta", "avani@luv2code.com");
// create the list
List<Employee> theEmployees = new ArrayList<>();
// add to the list
Our Thymleaf template will
theEmployees.add(emp1);
theEmployees.add(emp2);
access this data
theEmployees.add(emp3);
// add to the Spring MVC model
theModel.addAttribute("employees", theEmployees);
return "list-employees";
} src/main/resources/templates/list-employees.html
}
www.luv2code.com
Step 3: Create Thymeleaf template
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
To use Thymeleaf
<!DOCTYPE HTML> expressions
<html lang="en" xmlns:th="http://www.thymeleaf.org">
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
To use Thymeleaf
<!DOCTYPE HTML> expressions
<html lang="en" xmlns:th="http://www.thymeleaf.org">
…
<body>
<h3>Employee Directory</h3>
<hr>
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
To use Thymeleaf
<!DOCTYPE HTML> expressions
<html lang="en" xmlns:th="http://www.thymeleaf.org">
…
<body>
<h3>Employee Directory</h3>
<hr>
<table border="1">
<!-- Build HTML table based on employees -->
</table>
</body>
</html>
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
To use Thymeleaf
<!DOCTYPE HTML> expressions
<html lang="en" xmlns:th="http://www.thymeleaf.org">
…
<body>
<h3>Employee Directory</h3>
<hr>
<table border="1">
<!-- Build HTML table based on employees -->
</table>
</body> To Do
Add code to loop over employees
</html>
www.luv2code.com
Step 3: Create Thymeleaf template
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
<table border="1">
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr th:each="tempEmployee : ${employees}">
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
Loop over
</tr> list of employees
</thead>
<tbody>
<tr th:each="tempEmployee : ${employees}">
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
Loop over
</tr> list of employees
Loop parameter
</thead>
<tbody>
<tr th:each="tempEmployee : ${employees}">
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
Loop over
</tr> list of employees
Loop parameter
</thead>
<tbody>
<tr th:each="tempEmployee : ${employees}">
www.luv2code.com
Step 3: Create Thymeleaf template
File: list-employees.html
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
Loop over
</tr> list of employees
Loop parameter
</thead>
<tbody>
<tr th:each="tempEmployee : ${employees}">
<td th:text="${tempEmployee.firstName}" />
<td th:text="${tempEmployee.lastName}" />
<td th:text="${tempEmployee.email}" />
</tr>
</tbody>
</table>
www.luv2code.com
Thymeleaf and Bootstrap
Let’s Make our Page Beautiful
www.luv2code.com
Let’s Make our Page Beautiful
Before
www.luv2code.com
Let’s Make our Page Beautiful
Before After
www.luv2code.com
Let’s Make our Page Beautiful
Before After
Bootstrap
www.luv2code.com
Development Process Step-
By-S
tep
www.luv2code.com
Development Process Step-
By-S
tep
1. Get links for remote Bootstrap files
www.luv2code.com
Development Process Step-
By-S
tep
1. Get links for remote Bootstrap files
2. Add links in Thymeleaf template
www.luv2code.com
Development Process Step-
By-S
tep
1. Get links for remote Bootstrap files
2. Add links in Thymeleaf template
3. Apply Bootstrap CSS styles
www.luv2code.com
Step 1: Get links for remote Bootstrap files
www.luv2code.com
Step 1: Get links for remote Bootstrap files
• Visit Bootstrap website: www.getbootstrap.com
www.luv2code.com
Step 1: Get links for remote Bootstrap files
• Visit Bootstrap website: www.getbootstrap.com
• Website has instructions on how to Get Started
www.luv2code.com
Step 1: Get links for remote Bootstrap files
• Visit Bootstrap website: www.getbootstrap.com
• Website has instructions on how to Get Started
www.luv2code.com
Step 2: Add links in Thymeleaf template
www.luv2code.com
Step 2: Add links in Thymeleaf template
<head>
…
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/x.y.z/css/bootstrap.min.css" …>
…
</head>
www.luv2code.com
Step 2: Add links in Thymeleaf template
<head>
…
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/x.y.z/css/bootstrap.min.css" …>
…
</head>
Version number
www.luv2code.com
Step 3: Apply CSS
www.luv2code.com
Step 3: Apply CSS
<body>
<div class="container">
<h3>Employee Directory</h3>
<hr>
<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
… …
</table>
</div>
</body>
www.luv2code.com
Step 3: Apply CSS
Bootstrap CSS style
<body>
<div class="container">
<h3>Employee Directory</h3>
<hr>
<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
… …
</table>
</div>
</body>
www.luv2code.com
Step 3: Apply CSS
Bootstrap CSS style
<body>
<div class="container">
<h3>Employee Directory</h3> Bootstrap CSS styles
<hr>
<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
… …
</table>
</div>
</body>
www.luv2code.com
Step 3: Apply CSS
Bootstrap CSS style
<body>
<div class="container">
<h3>Employee Directory</h3> Bootstrap CSS styles
<hr>
<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
… …
</table>
</div>
</body>
www.luv2code.com
Thymeleaf CRUD - Real Time Project
m
Application Requirements
www.luv2code.com
Application Requirements
From the Boss
Create a Web UI for the Employee Directory
www.luv2code.com
Application Requirements
From the Boss
Create a Web UI for the Employee Directory
Users should be able to
• Get a list of employees
www.luv2code.com
Application Requirements
From the Boss
Create a Web UI for the Employee Directory
Users should be able to
• Get a list of employees
• Add a new employee
www.luv2code.com
Application Requirements
From the Boss
Create a Web UI for the Employee Directory
Users should be able to
• Get a list of employees
• Add a new employee
• Update an employee
www.luv2code.com
Application Requirements
From the Boss
Create a Web UI for the Employee Directory
Users should be able to
• Get a list of employees
• Add a new employee
• Update an employee
• Delete an employee
www.luv2code.com
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
Real-Time Project Thymeleaf + Spring Boo
t
www.luv2code.com
Real-Time Project Thymeleaf + Spring Boo
t
www.luv2code.com
Big Picture
www.luv2code.com
Big Picture
Employee Employee Employee
Controller Service Repository
Web
Browser
Thymeleaf Templates
www.luv2code.com
Big Picture
1
Employee Employee Employee
Controller Service Repository
Web
Browser
Thymeleaf Templates
www.luv2code.com
Big Picture
1 2
Employee Employee Employee
Controller Service Repository
Web
Browser
Thymeleaf Templates
www.luv2code.com
Big Picture
1 2 3
Employee Employee Employee
Controller Service Repository
Web
Browser
Thymeleaf Templates
www.luv2code.com
Big Picture
1 2 3 4
Employee Employee Employee
Controller Service Repository
Web
Browser
Thymeleaf Templates
www.luv2code.com
Big Picture
1 2 3 4
Employee Employee Employee
Controller Service Repository
Web
Browser
Thymeleaf Templates
www.luv2code.com
Big Picture
1 2 3 4
Employee Employee Employee
Controller Service Repository
Web 5
Browser
Thymeleaf Templates
www.luv2code.com
Big Picture
1 2 3 4
Employee Employee Employee
Controller Service Repository
Web 5
Browser
Thymeleaf Templates
www.luv2code.com
Application Architecture
Employee Employee Employee
Controller Service Repository
www.luv2code.com
Application Architecture Reuse code from
previous project
Employee Employee Employee
Controller Service Repository
www.luv2code.com
Application Architecture Reuse code from
previous project
Employee Employee Employee
Controller Service Repository
New code that we will create
www.luv2code.com
Project Set Up
www.luv2code.com
Project Set Up
• We will extend our existing Employee project and add DB integration
www.luv2code.com
Project Set Up
• We will extend our existing Employee project and add DB integration
• Add EmployeeService, EmployeeRepository and Employee entity
www.luv2code.com
Project Set Up
• We will extend our existing Employee project and add DB integration
• Add EmployeeService, EmployeeRepository and Employee entity
• Available in one of our previous projects
www.luv2code.com
Project Set Up
• We will extend our existing Employee project and add DB integration
• Add EmployeeService, EmployeeRepository and Employee entity
• Available in one of our previous projects
• We created all of this code already from scratch … so we'll just copy/paste it
www.luv2code.com
Project Set Up
• We will extend our existing Employee project and add DB integration
• Add EmployeeService, EmployeeRepository and Employee entity
• Available in one of our previous projects
• 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
Development Process - Big Picture Step-
By-S
tep
www.luv2code.com
Development Process - Big Picture Step-
By-S
tep
www.luv2code.com
Development Process - Big Picture Step-
By-S
tep
1. Get list of employees
www.luv2code.com
Development Process - Big Picture Step-
By-S
tep
1. Get list of employees
2. Add a new employee
www.luv2code.com
Development Process - Big Picture Step-
By-S
tep
1. Get list of employees
2. Add a new employee
3. Update an existing employee
www.luv2code.com
Development Process - Big Picture Step-
By-S
tep
1. Get list of employees
2. Add a new employee
3. Update an existing employee
4. Delete an existing employee
www.luv2code.com
Thymeleaf - Add Employee
Date
Add Employee - DEMO
www.luv2code.com
Add Employee Step-
By-S
tep
www.luv2code.com
Add Employee Step-
By-S
tep
1. New Add Employee button for list-employees.html
www.luv2code.com
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
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
Step 1: New "Add Employee" button
www.luv2code.com
Step 1: New "Add Employee" button
• Add Employee button will href link to
• request mapping /employees/showFormForAdd
www.luv2code.com
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>
www.luv2code.com
Step 1: New "Add Employee" button
@
• Add Employee button will href link tosymbol
Reference context path of your application
(app root)
• request mapping /employees/showFormForAdd
<a th:href="@{/employees/showFormForAdd}">
Add Employee Add Employee
</a>
www.luv2code.com
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>
Apply Bootstrap styles
www.luv2code.com
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>
Apply Bootstrap styles
www.luv2code.com
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
Margin Bottom, 3 pixels
www.luv2code.com
Step 1: New "Add Employee" button
• Add Employee button will href link to
• requestDocs on Bootstrap
mapping styles: www.getbootstrap.com
/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
Margin Bottom, 3 pixels
www.luv2code.com
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>
www.luv2code.com
Step 1: New "Add Employee" button
• Add Employee button will href link to TODO:
Add controller request mapping for
/employees/showFormForAdd
• 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>
www.luv2code.com
Showing Form
www.luv2code.com
Showing Form
In your Spring Controller
www.luv2code.com
Showing Form
In your Spring Controller
• Before you show the form, you must add a model attribute
www.luv2code.com
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
Controller code to show form
www.luv2code.com
Controller code to show form
@Controller
@RequestMapping("/employees")
public class EmployeeController {
www.luv2code.com
Controller code to show form
@Controller
@RequestMapping("/employees")
public class EmployeeController {
@GetMapping("/showFormForAdd")
public String showFormForAdd(Model theModel) {
www.luv2code.com
Controller code to show form
@Controller
@RequestMapping("/employees")
public class EmployeeController {
@GetMapping("/showFormForAdd")
public String showFormForAdd(Model theModel) {
// create model attribute to bind form data
Employee theEmployee = new Employee();
www.luv2code.com
Controller code to show form
@Controller
@RequestMapping("/employees")
public class EmployeeController {
@GetMapping("/showFormForAdd")
public String showFormForAdd(Model theModel) {
// create model attribute to bind form data
Employee theEmployee = new Employee();
theModel.addAttribute("employee", theEmployee);
www.luv2code.com
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);
www.luv2code.com
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";
}
…
}
www.luv2code.com
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
Thymeleaf and Spring MVC Data Binding
www.luv2code.com
Thymeleaf and Spring MVC Data Binding
• Thymeleaf has special expressions for binding Spring MVC form data
www.luv2code.com
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
Thymeleaf Expressions
www.luv2code.com
Thymeleaf Expressions
• Thymeleaf expressions can help you build the HTML form :-)
www.luv2code.com
Thymeleaf Expressions
• Thymeleaf expressions can help you build the HTML form :-)
Expression Description
th:action Location to send form data
www.luv2code.com
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
www.luv2code.com
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
www.luv2code.com
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
Step 2: Create HTML form for new employee
www.luv2code.com
Step 2: Create HTML form for new employee
<form action="#" th:action="@{/employees/save}"
th:object="${employee}" method="POST">
</form>
www.luv2code.com
Step 2: Create HTML form for new employee
Empty place holder
Thymeleaf will handle real work
<form action="#" th:action="@{/employees/save}"
th:object="${employee}" method="POST">
</form>
www.luv2code.com
Step 2: Create HTML form for new employee
Real work
Empty place holder
Send form data to
Thymeleaf will handle real work
/employees/save
<form action="#" th:action="@{/employees/save}"
th:object="${employee}" method="POST">
</form>
www.luv2code.com
Step 2: Create HTML form for new employee
Real work
Empty place holder
Send form data to
Thymeleaf will handle real work
/employees/save
<form action="#" th:action="@{/employees/save}"
th:object="${employee}" method="POST">
</form>
Our model attribute
www.luv2code.com
Step 2: Create HTML form for new employee
www.luv2code.com
Step 2: Create HTML form for new employee
www.luv2code.com
Step 2: Create HTML form for new employee
www.luv2code.com
Step 2: Create HTML form for new employee
<form action="#" th:action="@{/employees/save}"
th:object="${employee}" method="POST">
www.luv2code.com
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">
www.luv2code.com
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">
www.luv2code.com
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">
*{…}
Selects property on referenced
th:object
www.luv2code.com
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">
*{…}
Selects property on referenced
th:object
www.luv2code.com
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">
<input type="text" th:field="*{lastName}" placeholder="Last name">
<input type="text" th:field="*{email}" placeholder="Email">
www.luv2code.com
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">
<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
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">
<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
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">
<button type="submit">Save</button>
</form>
www.luv2code.com
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
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">
<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
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">
<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
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">
<input type="text" th:field="*{lastName}" placeholder="Last name">
<input type="text" th:field="*{email}" placeholder="Email">
Apply Bootstrap styles
<button type="submit">Save</button>
</form>
www.luv2code.com
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 col-4">
<input type="text" th:field="*{lastName}" placeholder="Last name">
<input type="text" th:field="*{email}" placeholder="Email">
Apply Bootstrap styles
<button type="submit">Save</button>
</form>
</form>
www.luv2code.com
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 col-4">
<input type="text" th:field="*{lastName}" placeholder="Last name">
<input type="text" th:field="*{email}" placeholder="Email">
Apply Bootstrap styles
<button type="submit">Save</button>
</form>
</form>
www.luv2code.com
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 col-4">
<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
Column Span 4
<button type="submit">Save</button>
</form>
</form>
www.luv2code.com
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"
class="form-control mb-4 col-4">
</form>
www.luv2code.com
Step 2: Create HTML form for new employee
<form action="#" th:action="@{/employees/save}"
th:object="${employee}" method="POST">
Button
<input type="text" th:field="*{firstName}" placeholder="First name"
class="form-control mb-4 col-4"> Button Info
<input type="text" th:field="*{lastName}" Column
placeholder="Last name" Span 2
class="form-control mb-4 col-4">
<input type="text" th:field="*{email}" placeholder="Email"
class="form-control mb-4 col-4">
<button type="submit" class="btn btn-info col-2">Save</button>
</form>
Apply Bootstrap styles
www.luv2code.com
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"
class="form-control mb-4 col-4">
<input type="text" th:field="*{lastName}" placeholder="Last name"
class="form-control mb-4 col-4">
<input type="text" th:field="*{email}" placeholder="Email"
class="form-control mb-4 col-4">
<button type="submit" class="btn btn-info col-2">Save</button>
</form>
www.luv2code.com
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"
class="form-control mb-4 col-4">
TODO:
<input type="text" th:field="*{lastName}" placeholder="Last name"
class="form-control mb-4 col-4">
Add controller request mapping for
<input type="text" /employees/save
th:field="*{email}" placeholder="Email"
class="form-control mb-4 col-4">
<button type="submit" class="btn btn-info col-2">Save</button>
</form>
www.luv2code.com
Step 3: Process form data to save employee
www.luv2code.com
Step 3: Process form data to save employee
@Controller
@RequestMapping("/employees")
public class EmployeeController {
www.luv2code.com
Step 3: Process form data to save employee
@Controller
@RequestMapping("/employees")
public class EmployeeController {
private EmployeeService employeeService;
public EmployeeController(EmployeeService theEmployeeService) {
employeeService = theEmployeeService;
}
Constructor injection
www.luv2code.com
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;
}
Constructor injection
www.luv2code.com
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) {
www.luv2code.com
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) {
www.luv2code.com
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);
www.luv2code.com
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";
}
…
}
Redirect to request mapping
/employees/list
www.luv2code.com
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
Thymeleaf - Update Employee
Date
Update Employee - Demo
www.luv2code.com
Update Employee Step-
By-S
tep
www.luv2code.com
Update Employee Step-
By-S
tep
www.luv2code.com
Update Employee Step-
By-S
tep
1. "Update" button
www.luv2code.com
Update Employee Step-
By-S
tep
1. "Update" button
2. Pre-populate the form
www.luv2code.com
Update Employee Step-
By-S
tep
1. "Update" button
2. Pre-populate the form
3. Process form data
www.luv2code.com
Update Employee Step-
By-S
tep
1. "Update" button
2. Pre-populate the form
3. Process form data
www.luv2code.com
Step 1: "Update" Button
www.luv2code.com
Step 1: "Update" Button
www.luv2code.com
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
Step 1: "Update" button
www.luv2code.com
Step 1: "Update" button
• Update button includes employee id
www.luv2code.com
Step 1: "Update" button
• Update button includes employee id
<tr th:each="tempEmployee : ${employees}">
…
www.luv2code.com
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>
</td>
</tr>
www.luv2code.com
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
Step 2: Pre-populate Form
www.luv2code.com
Step 2: Pre-populate Form
@Controller
@RequestMapping("/employees")
public class EmployeeController {
…
www.luv2code.com
Step 2: Pre-populate Form
@Controller
@RequestMapping("/employees")
public class EmployeeController {
…
@GetMapping("/showFormForUpdate")
public String showFormForUpdate(@RequestParam("employeeId") int theId,
Model theModel) {
www.luv2code.com
Step 2: Pre-populate Form
@Controller
@RequestMapping("/employees")
public class EmployeeController {
…
@GetMapping("/showFormForUpdate")
public String showFormForUpdate(@RequestParam("employeeId") int theId,
Model theModel) {
www.luv2code.com
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);
www.luv2code.com
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);
www.luv2code.com
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
Step 2: Pre-populate Form
www.luv2code.com
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 col-4" placeholder="First name">
<input type="text" th:field="*{lastName}"
class="form-control mb-4 col-4" placeholder="Last name">
<input type="text" th:field="*{email}"
class="form-control mb-4 col-4" placeholder="Email">
<button type="submit" class="btn btn-info col-2">Save</button>
</form>
www.luv2code.com
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 col-4" placeholder="First name">
<input type="text" th:field="*{lastName}"
class="form-control mb-4 col-4" placeholder="Last name">
<input type="text" th:field="*{email}"
class="form-control mb-4 col-4" placeholder="Email">
<button type="submit" class="btn btn-info col-2">Save</button>
</form>
www.luv2code.com
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}"
This is how form is
class="form-control mb-4 col-4" placeholder="First name">
pre-populated
<input type="text" th:field="*{lastName}" Thanks to calls to getters
class="form-control mb-4 col-4" placeholder="Last name">
<input type="text" th:field="*{email}"
class="form-control mb-4 col-4" placeholder="Email">
<button type="submit" class="btn btn-info col-2">Save</button>
</form>
www.luv2code.com
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 col-4" placeholder="First name">
<input type="text" th:field="*{lastName}"
class="form-control mb-4 col-4" placeholder="Last name">
<input type="text" th:field="*{email}"
class="form-control mb-4 col-4" placeholder="Email">
<button type="submit" class="btn btn-info col-2">Save</button>
</form>
www.luv2code.com
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 col-4" placeholder="First name">
<input type="text" th:field="*{lastName}"
class="form-control mb-4 col-4" placeholder="Last name">
<input type="text" th:field="*{email}"
class="form-control mb-4 col-4" placeholder="Email">
<button type="submit" class="btn btn-info col-2">Save</button>
</form>
www.luv2code.com
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 col-4" placeholder="First name">
<input type="text" th:field="*{lastName}"
class="form-control mb-4 col-4" placeholder="Last name">
<input type="text" th:field="*{email}" This binds to the model attribute
class="form-control mb-4 col-4" placeholder="Email">
Tells your app
<button type="submit" class="btn btn-info col-2">Save</button>
</form> which employee to update
www.luv2code.com
Step 3: Process form data to save employee
www.luv2code.com
Step 3: Process form data to save employee
• No need for new code … we can reuse our existing code
www.luv2code.com
Step 3: Process form data to save employee
• No need for new code … we can reuse our existing code
• 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
Thymeleaf - Delete Employee
Date
Delete Employee - DEMO
www.luv2code.com
Delete Employee - DEMO
www.luv2code.com
Delete Employee Step-
By-S
tep
www.luv2code.com
Delete Employee Step-
By-S
tep
1. Add “Delete” button/link on page
www.luv2code.com
Delete Employee Step-
By-S
tep
1. Add “Delete” button/link on page
2. Add controller code for “Delete”
www.luv2code.com
Delete Employee Step-
By-S
tep
1. Add “Delete” button/link on page
2. Add controller code for “Delete”
www.luv2code.com
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
Step 1: "Delete" button
www.luv2code.com
Step 1: "Delete" button
• Delete button includes employee id
www.luv2code.com
Step 1: "Delete" button
• Delete button includes employee id
<tr th:each="tempEmployee : ${employees}">
…
www.luv2code.com
Step 1: "Delete" button
• Delete button includes employee id
<tr th:each="tempEmployee : ${employees}">
…
<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>
www.luv2code.com
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>
www.luv2code.com
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
Step 2: Add controller code for delete
www.luv2code.com
Step 2: Add controller code for delete
@Controller
@RequestMapping("/employees")
public class EmployeeController {
…
www.luv2code.com
Step 2: Add controller code for delete
@Controller
@RequestMapping("/employees")
public class EmployeeController {
…
@GetMapping("/delete")
public String delete(@RequestParam("employeeId") int theId) {
www.luv2code.com
Step 2: Add controller code for delete
@Controller
@RequestMapping("/employees")
public class EmployeeController {
…
@GetMapping("/delete")
public String delete(@RequestParam("employeeId") int theId) {
www.luv2code.com
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);
www.luv2code.com
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
You might also like
- 5 Sem - Java Programming Notes PDFDocument71 pages5 Sem - Java Programming Notes PDFAbhinav Daksha83% (6)
- Thymeleaf Spring BootDocument79 pagesThymeleaf Spring Bootaurelianod100% (1)
- Lab # 6 Method and Constructor Overloading: IntroducingDocument6 pagesLab # 6 Method and Constructor Overloading: IntroducingHasnain MalikNo ratings yet
- Introduction To ThymeleafDocument10 pagesIntroduction To ThymeleafAdarsh SrivastavaNo ratings yet
- 06 Spring Boot 3 Spring MVCDocument66 pages06 Spring Boot 3 Spring MVCmybeautifulbhavanaNo ratings yet
- E-Commerce Lab: Muhammad Ali KhanDocument20 pagesE-Commerce Lab: Muhammad Ali KhanFatima Arif AlamNo ratings yet
- Unit 3Document129 pagesUnit 3Nitika AchammagariNo ratings yet
- Frequently Asked Questions - Servlets ConceptsDocument2 pagesFrequently Asked Questions - Servlets ConceptsarunsmileNo ratings yet
- Week 1 - Introduction To Web DesignDocument53 pagesWeek 1 - Introduction To Web DesignAidan Thompson100% (1)
- 02-Module 4 Lesson 2Document13 pages02-Module 4 Lesson 2RukhshindaNo ratings yet
- Fallsem2022-23 Cse3002 Eth Vl2022230103886 Reference Material I 27-07-2022 JavascriptDocument35 pagesFallsem2022-23 Cse3002 Eth Vl2022230103886 Reference Material I 27-07-2022 JavascriptArchit KhajuriaNo ratings yet
- A Coaching Institute Website: by Satya PrakashDocument11 pagesA Coaching Institute Website: by Satya PrakashSatya PrakashNo ratings yet
- JavascriptDocument16 pagesJavascriptsomeoneNo ratings yet
- ملخص لكل ما تم دراسته في JS-part1Document347 pagesملخص لكل ما تم دراسته في JS-part1aminos tn100% (1)
- Albert Updated (386) - Pages-1-46Document46 pagesAlbert Updated (386) - Pages-1-46yunus emre beyNo ratings yet
- Introhtml PPT 01 01Document12 pagesIntrohtml PPT 01 01RiajiminNo ratings yet
- Master Program in Full Stack PythonDocument31 pagesMaster Program in Full Stack Pythonprashant karaleNo ratings yet
- AJAX Patterns Web20Document15 pagesAJAX Patterns Web20Jith MohanNo ratings yet
- You Have Learned Javascript,: Now What?Document2 pagesYou Have Learned Javascript,: Now What?BaneeIshaqueKNo ratings yet
- MVADocument24 pagesMVANeisserManuelYupanquiCaballeroNo ratings yet
- ScrapingDocument25 pagesScrapingGaurav Arora100% (1)
- Servlet Chapter 3 Advanced Java Sem 6Document41 pagesServlet Chapter 3 Advanced Java Sem 6aishwarya sajiNo ratings yet
- 1 Chapter OneDocument21 pages1 Chapter Onefikire belachewNo ratings yet
- Signals & Systems Introduction To MATLAB: Bo-Yuan Peng E.E. Dept., National Taiwan UniversityDocument40 pagesSignals & Systems Introduction To MATLAB: Bo-Yuan Peng E.E. Dept., National Taiwan UniversityLello FloNo ratings yet
- IT - University Lecture 1Document11 pagesIT - University Lecture 1harp4491No ratings yet
- Responsive Web Design Template AssignmentDocument16 pagesResponsive Web Design Template AssignmentRiya PuniaNo ratings yet
- HTML TutorialDocument9 pagesHTML TutorialpegahbashiriradNo ratings yet
- Web Development Course With PHPDocument15 pagesWeb Development Course With PHPChetan KelkarNo ratings yet
- Unit - 4 JavaDocument13 pagesUnit - 4 JavaamritNo ratings yet
- WPF BindingDocument39 pagesWPF BindingCraigNo ratings yet
- Compute Science Dept: JavascriptDocument37 pagesCompute Science Dept: JavascriptGoodluck NgodaNo ratings yet
- Practice ExamsDocument309 pagesPractice ExamsdevashishbansalNo ratings yet
- E-Commerce: ADL 75 Session IIDocument42 pagesE-Commerce: ADL 75 Session IIamity_acelNo ratings yet
- Intro To JavascriptDocument33 pagesIntro To JavascriptJason MagsinoNo ratings yet
- 5 Servlet Assignment No 51Document5 pages5 Servlet Assignment No 51Priyanka SanvatsarkarNo ratings yet
- Unit 1Document113 pagesUnit 1Om LaulkarNo ratings yet
- Introduction To Web ProgrammingDocument31 pagesIntroduction To Web Programmingjohn doiNo ratings yet
- How To Use Selenium, SuccessfullyDocument90 pagesHow To Use Selenium, SuccessfullyCT SunilNo ratings yet
- Chef FundamentalsDocument61 pagesChef FundamentalsleenaapNo ratings yet
- IntroductionDocument27 pagesIntroductionhappy kumariNo ratings yet
- 3.1 GettingTheMostOutOfMavenCourse PDFDocument9 pages3.1 GettingTheMostOutOfMavenCourse PDFGeordan SanchezNo ratings yet
- Unit 1Document277 pagesUnit 1akty785No ratings yet
- PREZENTARE PPT - FGDocument15 pagesPREZENTARE PPT - FGCarpine AndreiNo ratings yet
- Introduction To Penetration TestingDocument23 pagesIntroduction To Penetration TestingProbal SilNo ratings yet
- Web DevelopmentDocument24 pagesWeb DevelopmentHimanshu SinghNo ratings yet
- Sqainterview BlogspotDocument2 pagesSqainterview BlogspotNimal RajapakseNo ratings yet
- Chapter Six Java Web TechnologyDocument44 pagesChapter Six Java Web TechnologyabdiNo ratings yet
- Contact Us Softorix Technologies PVT LTD 72-A, 1st Floor 100 Feet Road, Vadapalani, Chennai-600026, Tel-044 43069973, Mob-9500041042Document31 pagesContact Us Softorix Technologies PVT LTD 72-A, 1st Floor 100 Feet Road, Vadapalani, Chennai-600026, Tel-044 43069973, Mob-9500041042amanish05No ratings yet
- 18 - HBase Schema DesignDocument22 pages18 - HBase Schema Designnarena0205No ratings yet
- Java Servlets: Replacement of CGIDocument34 pagesJava Servlets: Replacement of CGImaurya_asu3426No ratings yet
- Web Scripting 3rd EditionDocument224 pagesWeb Scripting 3rd EditionMoises SorianoNo ratings yet
- Signals & Systems Introduction To MATLABDocument40 pagesSignals & Systems Introduction To MATLABghalzai100% (1)
- How To Use Selenium Successfully PDFDocument90 pagesHow To Use Selenium Successfully PDFSelvarajaguru RamaswamyNo ratings yet
- Selenium PDFDocument90 pagesSelenium PDFSelvarajaguru RamaswamyNo ratings yet
- Introduction To HTML and CSS: Arts and Humanities in The Digital Age 2018 Chase DTP Dr. Paul Gooding @pmgoodingDocument18 pagesIntroduction To HTML and CSS: Arts and Humanities in The Digital Age 2018 Chase DTP Dr. Paul Gooding @pmgoodingTime PassNo ratings yet
- Thymeleaf para IniciDocument87 pagesThymeleaf para IniciManuel ErnestoNo ratings yet
- Getting Started in English 255 & Tips For SuccessDocument5 pagesGetting Started in English 255 & Tips For SuccessKenton LyndsNo ratings yet
- Introduction To JavascriptDocument24 pagesIntroduction To JavascriptShan AnwerNo ratings yet
- Learn Rails 5.2: Accelerated Web Development with Ruby on RailsFrom EverandLearn Rails 5.2: Accelerated Web Development with Ruby on RailsNo ratings yet
- HTML5 & CSS3 For The Real World: Powerful HTML5 and CSS3 Techniques You Can Use Today!From EverandHTML5 & CSS3 For The Real World: Powerful HTML5 and CSS3 Techniques You Can Use Today!No ratings yet
- SQL 3Document2 pagesSQL 3TaseenNo ratings yet
- SQL 2Document2 pagesSQL 2TaseenNo ratings yet
- 12 Spring Boot Rest Crud With Spring Data JpaDocument94 pages12 Spring Boot Rest Crud With Spring Data JpaTaseenNo ratings yet
- Foreign Key: Overall BPM Ahat Do We Offer?Document3 pagesForeign Key: Overall BPM Ahat Do We Offer?TaseenNo ratings yet
- Primary KeyDocument2 pagesPrimary KeyTaseenNo ratings yet
- SQL 3Document2 pagesSQL 3TaseenNo ratings yet
- MiddlewareDocument11 pagesMiddlewareTaseenNo ratings yet
- Foreign Key: ExampleDocument2 pagesForeign Key: ExampleTaseenNo ratings yet
- C3M3L01Worksheet-EstimatingTaskTimes - 1Document7 pagesC3M3L01Worksheet-EstimatingTaskTimes - 1TaseenNo ratings yet
- Orientation SlidesDocument4 pagesOrientation SlidesTaseenNo ratings yet
- ISO 27005 Presentation SlideDocument25 pagesISO 27005 Presentation SlideTaseenNo ratings yet
- Online Exam Instructions For StudentsDocument2 pagesOnline Exam Instructions For StudentsTaseenNo ratings yet
- General+Task+1+All Course Essays+ (Protected)Document6 pagesGeneral+Task+1+All Course Essays+ (Protected)TaseenNo ratings yet
- 100 Must Know IdiomsDocument19 pages100 Must Know IdiomsTaseenNo ratings yet
- Topic SUCCESS Lesson NotesDocument34 pagesTopic SUCCESS Lesson NotesTaseenNo ratings yet
- Writing Task 1: (Time: 20min, Word Limit Minimum 150)Document13 pagesWriting Task 1: (Time: 20min, Word Limit Minimum 150)TaseenNo ratings yet
- Notice: NED University of Engineering & Technology, Karachi - 75270Document1 pageNotice: NED University of Engineering & Technology, Karachi - 75270TaseenNo ratings yet
- Second Provisional ListDocument2 pagesSecond Provisional ListTaseenNo ratings yet
- FirstlistDocument2 pagesFirstlistTaseenNo ratings yet
- UntitledDocument104 pagesUntitledFichDich InDemArschNo ratings yet
- QuickRide LogcatDocument19 pagesQuickRide LogcatNaresh BorkarNo ratings yet
- Log Cat 1703164830058Document12 pagesLog Cat 1703164830058charlesandreniez02No ratings yet
- Siddhivinayak's ResumeDocument1 pageSiddhivinayak's ResumeRohit SharmaNo ratings yet
- Condition Variable: Mother and Son With The LaundryDocument7 pagesCondition Variable: Mother and Son With The LaundrySK_shivamNo ratings yet
- Oops Lab-2Document6 pagesOops Lab-2Natenael NigusNo ratings yet
- Prince Mohammad Bin Fahd University: Name Student Id Score / 15Document8 pagesPrince Mohammad Bin Fahd University: Name Student Id Score / 15Eman ImmayelNo ratings yet
- MCOs On 1stDocument16 pagesMCOs On 1stmy pcNo ratings yet
- Oracle - Pass4sure.1z0 809.v2019!02!10.by - Sarah.67qDocument59 pagesOracle - Pass4sure.1z0 809.v2019!02!10.by - Sarah.67qgeba dapNo ratings yet
- Mypy Readthedocs Io en StableDocument232 pagesMypy Readthedocs Io en StableCesar Marinho EirasNo ratings yet
- Exception HandlingDocument23 pagesException HandlingPradeep DeshpandeNo ratings yet
- 1z0-809.exam.52q: Number: 1z0-809 Passing Score: 800 Time Limit: 120 MinDocument45 pages1z0-809.exam.52q: Number: 1z0-809 Passing Score: 800 Time Limit: 120 MinFrostune 90No ratings yet
- Mod Menu Log - Com - Kitkagames.fallbuddiesDocument13 pagesMod Menu Log - Com - Kitkagames.fallbuddiesWisdom Wynn CorbettNo ratings yet
- Java String Array ExampleDocument2 pagesJava String Array ExamplesangameshajNo ratings yet
- 45.2 - Romans - Overview (Tamil)Document9 pages45.2 - Romans - Overview (Tamil)Black BeardNo ratings yet
- Lab 2 - DebuggingDocument4 pagesLab 2 - DebuggingDPNo ratings yet
- Q. 1) Write A Program To Java To Display Java Welcome MassageDocument15 pagesQ. 1) Write A Program To Java To Display Java Welcome MassageAbhishek ShahaNo ratings yet
- 38 Hardikparmar Exp13Document13 pages38 Hardikparmar Exp13Ssavera - A VictoryNo ratings yet
- Portal Info StubDocument15 pagesPortal Info Stubnungkoiramono51No ratings yet
- Java Programming (Cse1007) Digital Assignment 1: Name: Aashish Sharma Reg. No: 19BCE0971 Slot: G2Document24 pagesJava Programming (Cse1007) Digital Assignment 1: Name: Aashish Sharma Reg. No: 19BCE0971 Slot: G2ashNo ratings yet
- Define Java Appelet. Write Its Advantage and DisadvantageDocument4 pagesDefine Java Appelet. Write Its Advantage and DisadvantagePiyush KoiralaNo ratings yet
- Section 1 (Quiz)Document4 pagesSection 1 (Quiz)ashishishuNo ratings yet
- JAVA MCQ (Answers) - 5Document8 pagesJAVA MCQ (Answers) - 5Sri SriNo ratings yet
- Functional Kotlin (Mario Arias, Rivu Chakraborty) (Z-Library)Document337 pagesFunctional Kotlin (Mario Arias, Rivu Chakraborty) (Z-Library)GUILLERMO ECHAGUENo ratings yet
- Java Native InterfaceDocument21 pagesJava Native InterfaceAmit SinghNo ratings yet
- 06jan23-Springboot-Student CRUDDocument7 pages06jan23-Springboot-Student CRUDFeel ItNo ratings yet
- Multiple Inheritance (Object Oriented Programming)Document5 pagesMultiple Inheritance (Object Oriented Programming)krushiNo ratings yet
- Hibernate Interview Questions PDFDocument32 pagesHibernate Interview Questions PDFSunil Soni100% (5)
