Uploaded bybaazizwissal23
PDF, PPTX52 views

07-spring-boot-spring-mvc-crud spring mvc

The document outlines the development process for a web application using Thymeleaf and Spring Boot for managing an employee directory. It details the functionalities like adding, updating, and deleting employee records, and describes the necessary code and architecture including controller mappings and HTML forms. The document serves as a guide for integrating database operations with web UI through structured steps.

Download as PDF, PPTX
© luv2code LLC m Thymeleaf CRUD - Real Time Project
www.luv2code.com © luv2code LLC Application Requirements 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 From the Boss Thymeleaf + Spring Boot
www.luv2code.com © luv2code LLC Real-Time Project Thymeleaf + Spring Boot
www.luv2code.com © luv2code LLC Big Picture 1 2 3 4 Employe e Controller Employe e Repository Thymeleaf Templates Web Browser Employe e Service 6 5
www.luv2code.com © luv2code LLC Application Architecture Employee Controller Employe e Repository Employe e Service Reuse code from previous project 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 y • Available in one of our previous project s • 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 1. Get list of employee s 2. Add a new employe e 3. Update an existing employe e 4. Delete an existing employee Step-By-Step
© luv2code LLC Date Thymeleaf - Add Employee
www.luv2code.com © luv2code LLC Add Employee - DEMO
www.luv2code.com © luv2code LLC Add Employee 1. New Add Employee button for list-employees.html Step-By-Step
www.luv2code.com © luv2code LLC Add Employee 1. New Add Employee button for list-employees.html 2. Create HTML form for new employee Step-By-Step
www.luv2code.com © luv2code LLC Add Employee 1. New Add Employee button for list-employees.html 2. Create HTML form for new employee 3. Process form data to save employee Step-By-Step
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 </a> Add Employee @ symbo l 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 Apply Bootstrap styles Docs on Bootstrap styles: www.getbootstrap.com <a th:href="@{/employees/showFormForAdd}"> Add Employee </a> <a th:href="@{/employees/showFormForAdd}" class="btn btn-primary btn-sm mb-3"> Add Employee </a> Button Button Primary Button Small Margin Bottom, 3 pixels
www.luv2code.com © luv2code LLC <a th:href="@{/employees/showFormForAdd}" class="btn btn-primary btn-sm mb-3"> Add Employee </a> Step 1: New "Add Employee" button • Add Employee button will href link to • request mapping /employees/showFormForAdd 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") public String showFormForAdd(Model theModel) { // create model attribute to bind form data Employee theEmployee = new Employee(); theModel.addAttribute("employee", theEmployee); return "employees/employee-form"; } … } Our Thymleaf template will access this data for binding form data 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 <form action="#" th:action="@{/employees/save}" th:object="${employee}" method="POST"> </form> Real work Send form data to /employees/save Empty place holder Thymeleaf will handle real work Our model attribute 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 <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> *{…} Selects property on referenced th:object
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"> <input type="text" th:field="*{lastName}" placeholder="Last name"> <input type="text" th:field="*{email}" placeholder="Email"> <button type="submit">Save</button> </form> When form is loaded, will call: employee.getFirstName() … employee.getLastName 1 When form is submitted, will call: employee.setFirstName(…) … employee.setLastName(…) 2
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"> <input type="text" th:field="*{lastName}" placeholder="Last name"> <input type="text" th:field="*{email}" placeholder="Email"> <button type="submit">Save</button> </form> <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 w-25"> </form> Apply Bootstrap styles Form control Margin Bottom: 4 pixels Width: 25%
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" class="form-control mb-4 w-25"> </form> <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 Button Button Info Column Span 2
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" 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> TODO : Add controller request mapping for /employees/save
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"; } … } Constructor injection Since only one constructor @Autowired is optional
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 return "redirect:/employees/list"; } … } Redirect to request mapping /employees/list "Post/Redirect/Get" pattern For more info see www.luv2code.com/post-redirect-get
© luv2code LLC Date Thymeleaf - Update Employee
www.luv2code.com © luv2code LLC Update Employee - Demo
www.luv2code.com © luv2code LLC Update Employee 1. "Update" button 2. Pre-populate the form 3. Process form data Step-By-Step
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> </td> </tr> Appends to URL ?employeeId=xxx
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 <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> This is how form is pre-populated Thanks to calls to getters When form is loaded, will call: employee.getFirstName() … employee.getLastName 1
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> Hidden form field required for updates
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}" class="form-control mb-4 w-25" placeholder="Email"> <button type="submit" class="btn btn-info col-2">Save</button> </form> This binds to the model attribute Tells your app which employee to update
www.luv2code.com © luv2code LLC Step 3: Process form data to save employee @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"; } … } • No need for new code … we can reuse our existing cod e • Works the same for add or update :-)
© luv2code LLC Date Thymeleaf - Delete Employee
www.luv2code.com © luv2code LLC Delete Employee - DEMO
www.luv2code.com © luv2code LLC Delete Employee 1. Add “Delete” button/link on page 2. Add controller code for “Delete” Step-By-Step
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 <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> Appends to URL ?employeeId=xxx 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"; } … }

More Related Content

PPT
Form demoinplaywithmysql
byKnoldus Inc.
 
PPTX
3. Spring MVC Intro - PowerPoint Presentation (1).pptx
bytrevor8osborne
 
PDF
Code moi une RH! (PHP tour 2017)
byArnaud Langlade
 
PDF
PLAT-15 Forms Config, Customization, and Extension
byAlfresco Software
 
PDF
PLAT-14 Forms Config, Customization, and Extension
byAlfresco Software
 
PPTX
Jsf lab
byYu-Ting Chen
 
PDF
Spring hibernate jsf_primefaces_intergration
byCarlos Junior Caso Casimiro
 
PPTX
Java spring mysql without hibernate(2) (1)
byAmedJacobReza
 
Form demoinplaywithmysql
byKnoldus Inc.
 
3. Spring MVC Intro - PowerPoint Presentation (1).pptx
bytrevor8osborne
 
Code moi une RH! (PHP tour 2017)
byArnaud Langlade
 
PLAT-15 Forms Config, Customization, and Extension
byAlfresco Software
 
PLAT-14 Forms Config, Customization, and Extension
byAlfresco Software
 
Jsf lab
byYu-Ting Chen
 
Spring hibernate jsf_primefaces_intergration
byCarlos Junior Caso Casimiro
 
Java spring mysql without hibernate(2) (1)
byAmedJacobReza
 

Similar to 07-spring-boot-spring-mvc-crud spring mvc

PDF
Action View Form Helpers - 1, Season 2
byRORLAB
 
PDF
Toms introtospring mvc
byGuo Albert
 
PDF
The new form framework
byBernhard Schussek
 
PDF
Improving state of M2 front-end - Magento 2 Community Project
byBartek Igielski
 
KEY
Domain Specific Languages (EclipseCon 2012)
bySven Efftinge
 
PDF
MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone...
byjaxconf
 
PDF
Primefaces Confess 2012
bycagataycivici
 
KEY
MVC on the server and on the client
bySebastiano Armeli
 
PPTX
Bare-knuckle web development
byJohannes Brodwall
 
PPT
Spring MVC
byyuvalb
 
PDF
Working With The Symfony Admin Generator
byJohn Cleveley
 
PDF
Spring MVC 3.0 Framework (sesson_2)
byRavi Kant Soni (ravikantsoni03@gmail.com)
 
PDF
ASP.net Manual final.pdf
bySwapnilGujar13
 
PDF
Broadleaf Presents Thymeleaf
byBroadleaf Commerce
 
PDF
Understanding form helpers
byBruno Almeida
 
PPT
Spring In Practice
bylakkarajusaroop
 
DOCX
asp.net - for merge.docx
bySwapnilGujar13
 
PDF
AnkaraJUG Kasım 2012 - PrimeFaces
byAnkara JUG
 
PDF
Spring MVC Annotations
byJordan Silva
 
PDF
Lift talk
byWinston Chen
 
Action View Form Helpers - 1, Season 2
byRORLAB
 
Toms introtospring mvc
byGuo Albert
 
The new form framework
byBernhard Schussek
 
Improving state of M2 front-end - Magento 2 Community Project
byBartek Igielski
 
Domain Specific Languages (EclipseCon 2012)
bySven Efftinge
 
MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone...
byjaxconf
 
Primefaces Confess 2012
bycagataycivici
 
MVC on the server and on the client
bySebastiano Armeli
 
Bare-knuckle web development
byJohannes Brodwall
 
Spring MVC
byyuvalb
 
Working With The Symfony Admin Generator
byJohn Cleveley
 
Spring MVC 3.0 Framework (sesson_2)
byRavi Kant Soni (ravikantsoni03@gmail.com)
 
ASP.net Manual final.pdf
bySwapnilGujar13
 
Broadleaf Presents Thymeleaf
byBroadleaf Commerce
 
Understanding form helpers
byBruno Almeida
 
Spring In Practice
bylakkarajusaroop
 
asp.net - for merge.docx
bySwapnilGujar13
 
AnkaraJUG Kasım 2012 - PrimeFaces
byAnkara JUG
 
Spring MVC Annotations
byJordan Silva
 
Lift talk
byWinston Chen
 

Recently uploaded

PPTX
Admission Procedure.................pptx
byAneetaSharma15
 
PDF
47 ĐỀ CHÍNH THỨC THI CHỌN HỌC SINH GIỎI CÁC TỈNH MÔN TIẾNG ANH LỚP 8 THCS NĂM...
byNguyen Thanh Tu Collection
 
PPTX
28 October 2025 - Andreas Schleicher presents at the OECD Webinar Insights on...
byEduSkills OECD
 
PDF
Fandomania, an U25 Fandom and Pop-Culture Quiz under Jigisha 4.0
byPragya - UEM Kolkata Quiz Club
 
PDF
Navigating the Age of AI- Combating Social Isolation and Building Global Peac...
byALLLIFEREGARDSMFT
 
PDF
20th C Landscape architects - Noguchi & Burle marx.pdf
byAr.Asna
 
PPTX
ZULU METHODOLOGY 3B MICRO LESSON PRESENTATION.pptx
bySiphokazi Ncobela
 
PPTX
COMMUNICATION. pptx
byAneetaSharma15
 
PPTX
covalent bonding presentation slideshare
byDorcusKholofelo
 
PDF
Artificial Intelligence in Education: Transforming Teaching and Learning for ...
byNavid Nazhand
 
PPTX
jkjkjkjkjkjkjkjfjeofu9 u93r u80 dhuybufy eiufcuetc i heiehf
bypreetheshparmar
 
PDF
Auto Autorefractometer/ppt/notes/pdf.pdf
byAnmol Singh
 
PDF
Introduction to Agriculture: Meaning, Scope, and Importance: Introduction to ...
bySatyam Sharma
 
PDF
SlideShare Presentation presentation about awareness
byrebomash573
 
PDF
Unit 4 Clustering_K-means_K-medoid_KNN.pdf
byKanchanPatil34
 
PDF
Opthalmoscope ppt-pdf-notesdownload .pdf
byAnmol Singh
 
PPTX
Presentation1jdhdhhhjjjdbbdnjenmmen.pptx
bypgiopration
 
PPTX
Week 2-Introduction to Indian Ethics.pptx
byRajshreeBeneymadoo
 
PPTX
How to write python test cases in Odoo 18
byCeline George
 
PPTX
Isikhangisi .pptx....ukubaluleka kokwazi isikhangiso.
byKwanele28
 
Admission Procedure.................pptx
byAneetaSharma15
 
47 ĐỀ CHÍNH THỨC THI CHỌN HỌC SINH GIỎI CÁC TỈNH MÔN TIẾNG ANH LỚP 8 THCS NĂM...
byNguyen Thanh Tu Collection
 
28 October 2025 - Andreas Schleicher presents at the OECD Webinar Insights on...
byEduSkills OECD
 
Fandomania, an U25 Fandom and Pop-Culture Quiz under Jigisha 4.0
byPragya - UEM Kolkata Quiz Club
 
Navigating the Age of AI- Combating Social Isolation and Building Global Peac...
byALLLIFEREGARDSMFT
 
20th C Landscape architects - Noguchi & Burle marx.pdf
byAr.Asna
 
ZULU METHODOLOGY 3B MICRO LESSON PRESENTATION.pptx
bySiphokazi Ncobela
 
COMMUNICATION. pptx
byAneetaSharma15
 
covalent bonding presentation slideshare
byDorcusKholofelo
 
Artificial Intelligence in Education: Transforming Teaching and Learning for ...
byNavid Nazhand
 
jkjkjkjkjkjkjkjfjeofu9 u93r u80 dhuybufy eiufcuetc i heiehf
bypreetheshparmar
 
Auto Autorefractometer/ppt/notes/pdf.pdf
byAnmol Singh
 
Introduction to Agriculture: Meaning, Scope, and Importance: Introduction to ...
bySatyam Sharma
 
SlideShare Presentation presentation about awareness
byrebomash573
 
Unit 4 Clustering_K-means_K-medoid_KNN.pdf
byKanchanPatil34
 
Opthalmoscope ppt-pdf-notesdownload .pdf
byAnmol Singh
 
Presentation1jdhdhhhjjjdbbdnjenmmen.pptx
bypgiopration
 
Week 2-Introduction to Indian Ethics.pptx
byRajshreeBeneymadoo
 
How to write python test cases in Odoo 18
byCeline George
 
Isikhangisi .pptx....ukubaluleka kokwazi isikhangiso.
byKwanele28
 

07-spring-boot-spring-mvc-crud spring mvc

  • 1.
    © luv2code LLC m ThymeleafCRUD - Real Time Project
  • 2.
    www.luv2code.com © luv2codeLLC Application Requirements 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 From the Boss Thymeleaf + Spring Boot
  • 3.
    www.luv2code.com © luv2codeLLC Real-Time Project Thymeleaf + Spring Boot
  • 4.
    www.luv2code.com © luv2codeLLC Big Picture 1 2 3 4 Employe e Controller Employe e Repository Thymeleaf Templates Web Browser Employe e Service 6 5
  • 5.
    www.luv2code.com © luv2codeLLC Application Architecture Employee Controller Employe e Repository Employe e Service Reuse code from previous project New code that we will create
  • 6.
    www.luv2code.com © luv2codeLLC Project Set Up • We will extend our existing Employee project and add DB integration • Add EmployeeService, EmployeeRepository and Employee entit y • Available in one of our previous project s • 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
  • 7.
    www.luv2code.com © luv2codeLLC Development Process - Big Picture 1. Get list of employee s 2. Add a new employe e 3. Update an existing employe e 4. Delete an existing employee Step-By-Step
  • 8.
  • 9.
    www.luv2code.com © luv2codeLLC Add Employee - DEMO
  • 10.
    www.luv2code.com © luv2codeLLC Add Employee 1. New Add Employee button for list-employees.html Step-By-Step
  • 11.
    www.luv2code.com © luv2codeLLC Add Employee 1. New Add Employee button for list-employees.html 2. Create HTML form for new employee Step-By-Step
  • 12.
    www.luv2code.com © luv2codeLLC Add Employee 1. New Add Employee button for list-employees.html 2. Create HTML form for new employee 3. Process form data to save employee Step-By-Step
  • 13.
    www.luv2code.com © luv2codeLLC Step 1: New "Add Employee" button • Add Employee button will href link to • request mapping /employees/showFormForAdd <a th:href="@{/employees/showFormForAdd}"> Add Employee </a> Add Employee @ symbo l Reference context path of your application (app root)
  • 14.
    www.luv2code.com © luv2codeLLC Step 1: New "Add Employee" button • Add Employee button will href link to • request mapping /employees/showFormForAdd Apply Bootstrap styles Docs on Bootstrap styles: www.getbootstrap.com <a th:href="@{/employees/showFormForAdd}"> Add Employee </a> <a th:href="@{/employees/showFormForAdd}" class="btn btn-primary btn-sm mb-3"> Add Employee </a> Button Button Primary Button Small Margin Bottom, 3 pixels
  • 15.
    www.luv2code.com © luv2codeLLC <a th:href="@{/employees/showFormForAdd}" class="btn btn-primary btn-sm mb-3"> Add Employee </a> Step 1: New "Add Employee" button • Add Employee button will href link to • request mapping /employees/showFormForAdd TODO : Add controller request mapping for /employees/showFormForAdd
  • 16.
    www.luv2code.com © luv2codeLLC 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
  • 17.
    www.luv2code.com © luv2codeLLC 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); return "employees/employee-form"; } … } Our Thymleaf template will access this data for binding form data src/main/resources/templates/employees/employee-form.html
  • 18.
    www.luv2code.com © luv2codeLLC Thymeleaf and Spring MVC Data Binding • Thymeleaf has special expressions for binding Spring MVC form data • Automatically setting / retrieving data from a Java object
  • 19.
    www.luv2code.com © luv2codeLLC 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
  • 20.
    www.luv2code.com © luv2codeLLC Step 2: Create HTML form for new employee <form action="#" th:action="@{/employees/save}" th:object="${employee}" method="POST"> </form> Real work Send form data to /employees/save Empty place holder Thymeleaf will handle real work Our model attribute Our model attribute
  • 21.
    www.luv2code.com © luv2codeLLC Step 2: Create HTML form for new employee
  • 22.
    www.luv2code.com © luv2codeLLC 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> *{…} Selects property on referenced th:object
  • 23.
    www.luv2code.com © luv2codeLLC 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> When form is loaded, will call: employee.getFirstName() … employee.getLastName 1 When form is submitted, will call: employee.setFirstName(…) … employee.setLastName(…) 2
  • 24.
    www.luv2code.com © luv2codeLLC 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> <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 w-25"> </form> Apply Bootstrap styles Form control Margin Bottom: 4 pixels Width: 25%
  • 25.
    www.luv2code.com © luv2codeLLC 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 w-25"> </form> <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 Button Button Info Column Span 2
  • 26.
    www.luv2code.com © luv2codeLLC 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 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> TODO : Add controller request mapping for /employees/save
  • 27.
    www.luv2code.com © luv2codeLLC 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"; } … } Constructor injection Since only one constructor @Autowired is optional
  • 28.
    www.luv2code.com © luv2codeLLC 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"; } … }
  • 29.
    www.luv2code.com © luv2codeLLC 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 "Post/Redirect/Get" pattern For more info see www.luv2code.com/post-redirect-get
  • 30.
  • 31.
    www.luv2code.com © luv2codeLLC Update Employee - Demo
  • 32.
    www.luv2code.com © luv2codeLLC Update Employee 1. "Update" button 2. Pre-populate the form 3. Process form data Step-By-Step
  • 33.
    www.luv2code.com © luv2codeLLC 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
  • 34.
    www.luv2code.com © luv2codeLLC 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> Appends to URL ?employeeId=xxx
  • 35.
    www.luv2code.com © luv2codeLLC 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"; } }
  • 36.
    www.luv2code.com © luv2codeLLC 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> This is how form is pre-populated Thanks to calls to getters When form is loaded, will call: employee.getFirstName() … employee.getLastName 1
  • 37.
    www.luv2code.com © luv2codeLLC 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> Hidden form field required for updates
  • 38.
    www.luv2code.com © luv2codeLLC 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>
  • 39.
    www.luv2code.com © luv2codeLLC 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> This binds to the model attribute Tells your app which employee to update
  • 40.
    www.luv2code.com © luv2codeLLC Step 3: Process form data to save employee @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"; } … } • No need for new code … we can reuse our existing cod e • Works the same for add or update :-)
  • 41.
  • 42.
    www.luv2code.com © luv2codeLLC Delete Employee - DEMO
  • 43.
    www.luv2code.com © luv2codeLLC Delete Employee 1. Add “Delete” button/link on page 2. Add controller code for “Delete” Step-By-Step
  • 44.
    www.luv2code.com © luv2codeLLC 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
  • 45.
    www.luv2code.com © luv2codeLLC 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> Appends to URL ?employeeId=xxx JavaScript to prompt user before deleting
  • 46.
    www.luv2code.com © luv2codeLLC 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"; } … }