Search⌘ K

Building Scalable Applications with Thymeleaf and Spring Boot

0%

1.Getting Started

Introduction to the Course Main Objectives

2.What are Spring Boot and Thymeleaf?

Spring Framework Spring Boot and Thymeleaf Structure of a Spring Application Quiz Yourself on Spring Boot and Thymeleaf

3.Thymeleaf Introduction

What is Thymeleaf?Writing our First Template Writing our First Controller Thymeleaf Expressions Thymeleaf Attributes Quiz Yourself on Thymeleaf

4.Thyme Wizards

Cascading Style Sheets Tailwind CSS Adding Tailwind CSS Configure Maven Tailwind Design System Configuration Application Shell Application Shell - Client-Side Interactivity Quiz Yourself on Thyme Wizards

5.Fragments

Introduction to Fragments Fragments with Parameters Fragments with HTML Snippets as Parameters Inline Separate SVG Files Homepage Refactoring Menu Item Components Quiz Yourself on Fragments

6.Layouts

Introduction to Layouts Layouts with Parameters Page Titles Homepage Refactoring Quiz Yourself on Layouts

7.Controllers

Introduction to Controllers Exposing Data to the View Path Parameters Posting Data Team and User Controllers Quiz Yourself on Controllers

8.Internationalization

Introduction to Internationalization Selecting Language Using Query Menu Items Translations Quiz Yourself on Internationalization

9.Database Connection

Introduction to Database Connection Getting Started with Spring Data JPA User Repository Adding Properties to User Quiz Yourself on Database Connection

10.Displaying Data

Introduction to Displaying Data Parameters vs. FormData objects Get Users on the HTML Page Refactor the Table Using Fragments Using Pagination Hide Columns on Mobile Quiz Yourself on Displaying Data

11.Forms

Introduction to Forms Error Messages Custom Error Messages Custom Validator Errors Summary Validation Groups and Order Quiz Yourself on Forms

12.Data Editing

Add User Button Edit User Data Refactoring to Fragments Handling Optimistic Locking Failure Custom Error Pages Quiz Yourself on Data Editing

13.Implement Deletion of an Entity

Introduction to Delete Method Using the DELETE HTTP Method Flash Attributes Quiz Yourself on Implementing Deletion

14.Security

Introduction to Spring Security Hardcoded Password User Roles Thymeleaf Integration Custom Login Page

15.Security - Users from Database

User Entity Updates Spring Security Connection Showing Current User Info Creating User Form Refactor the Edit User Implementation Quiz Yourself on Security

Project

Develop Microservices Using Spring Boot

16.Testing

Introduction to @WebMvcTest Getting Started with @WebMvcTest Authenticating in the @WebMvcTest Testing Using HtmlUnit

17.Testing Using Cypress

Introduction to Cypress First Cypress Test Bypassing Login Quiz Yourself on Testing

18.Various Tips and Tricks - I

Open Session in View StringTrimmerEditor Global Model Attributes File Upload

19.Various Tips and Tricks - II

Selecting a Linked Entity View Dynamically Adding Rows Static Server-Side Rendering - I Server-Side Rendering - II Making Updates Persistent Adding Rows Deleting Rows Custom Editors and Formatters Date Picker Date Picker - Internationalization Quiz Yourself on Tips and Tricks

Project

Spring Boot and Thymeleaf Tutorial: Build a Recipe Sharing App

20.Conclusion

Closing Remarks

21.Appendix

Setting Up Local Environment Spring Initializr Setting up PostgreSQL Locally Running Cypress Tests from JUnit JUnit Testfactory

Building Scalable Applications with Thymeleaf and Spring Boot

Deleting Rows

Learn how to remove rows dynamically.

We'll cover the following...

Updating the fragment
Removing empty objects

All that is left now is to make the “Remove” links work. We’ll add a bit of JavaScript to remove the row that the “Remove” button is part of.

Updating the fragment

Let’s update the edit-teamplayer-fragment:

HTML

<div class="ml-1 sm:col-span-2 flex items-center text-green-600 hover:textgreen-
    900">
    <div class="h-6 w-6">
        <svg th:replace="trash"></svg>
    </div>
    <a href="#"
        class="ml-1"
        th:text="#{team.player.remove}"
        x-data
        th:attr="data-formindex=__${index}__"
        @click="removeTeamPlayerForm($el.dataset.formindex)"> 
    </a>
</div>

We’ll add three attributes to the <a> element:

x-data to define a new AlpineJS scope.
th:attr to add the current index parameter of the fragment so we can read this from JavaScript and know what row we should delete.
@click to trigger the actual removal of the row when the link is clicked. ...