Thymeleaf

[jm1021]

Owners

P1 Raunak M, Haseeb B , Kevin D, Isabelle G, Ryan M P3 Soham, Aniket, Colin, Varalu, Paaras, Tanay

Overview

Thymeleaf. In the backend, build CRUD page(s) for Teacher and Admin roles. Using jQuery, build functionality to review and filter users (Read), build a function to edit roles for a user (Update), build functionality to remove a user (Delete), the delete must remove relationship data from the Roles table. Be sure to describe the anatomy of files and the process.

Anatomy

src/main/resources/templates/: This directory contains Thymeleaf template files. These are dynamic HTML templates that can be rendered on the server-side and populated with data from your Java code. Thymeleaf provides powerful templating features and allows you to create dynamic web pages with Java integration.

UX-BE, Spring/Thymeleaf

Project

Key to the project is combining code from previous projects. I got things to work but had very little lesson material.

Thymeleaf project with Login. This logs in and displays roles of user. Template Source

LOGIN code, spring security has built in login method.

      <div class="container bg-secondary py-4">
          <div class="p-5 mb-4 bg-light text-dark rounded-3">
              <form name="f" th:action="@{/login}" method="POST">
                  <table>
                      <tr th:if="${param.error}" class="alert alert-error">
                          Invalid username and password.
                      </tr>
                      <tr th:if="${param.logout}" class="alert alert-success">
                          You have been logged out.
                      </tr>
                      <!-- 'email' is mapped to 'username' for Spring Security -->
                      <tr><th><label for="username">Email</label></th></tr>
                      <tr><td><input type="email" id='username' name="username" size="20" required></td></tr>
                      <tr><th><label for="password">Password</label></th></tr>
                      <tr><td><input type="password" id="password" name="password" size="20" required></td></tr>
                      <tr><th><input type="submit" value="Submit"></th></tr>
                      <tr><td><a th:href="@{/database/personcreate}">Sign Up</a></td></tr>

                  </table>
              </form>
          </div>

ROLES code in navbar

    <th:block sec:authorize="isAuthenticated()">
        <div class="dropdown px-3">
            <span sec:authentication="name" class="dropdown-toggle link-dark" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            </span>
            <ul class="dropdown-menu dropdown-menu-dark">
                <li>
                    <div class="dropdown-item">
                        <p style="margin-bottom:2px"><strong>ROLES:</strong></p>
                        <p style="font-size:0.75em;margin:1px" sec:authorize="hasRole('ADMIN')">ADMIN</p>
                        <p style="font-size:0.75em;margin:1px" sec:authorize="hasRole('TEACHER')">TEACHER</p>
                        <p style="font-size:0.75em;margin:1px" sec:authorize="hasRole('STUDENT')">STUDENT</p>
                    </div>
                </li>
                <li><a class="dropdown-item active" th:href='@{/logout}'>Logout</a></li>
            </ul>
        </div>
    </th:block>

Devops User database using jQuery but without security and in flask.

[jm1021]

Here is another admin project, Notes using Thymeleaf. It would be great and versatile project if we could review users, roles, and notes in GitHub pages as user, and Thymeleaf as admin.

Doing a project like this is great for PBL, Data Structures, and work with POJOs and APIs help CB understanding.