Zum Inhalt springen
Spring Boot: Persistence Spring Boot: Persistence

Projekt: Benutzeroberfläche (SSR)

Für die Punchclock-Applikation wird eine Benutzeroberfläche zur Verfügung gestellt. Dazu müssen im Ordner src/main/resources/templates folgende Dateien erstellt werden.

index.html:

Abschnitt betitelt „index.html:“
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">


  <head>
    <th:block th:insert="~{fragments/default.html :: head}"></th:block>
    <title>Punchclock: Alle Einträge</title>
  </head>


  <body>
    <th:block th:insert="~{fragments/default.html :: header}"></th:block>
    <main>
      <h1>Alle Einträge</h1>
      <th:block th:if="${#lists.isEmpty(entries)}">
        <span>Keine Einträge</span>
      </th:block>
      <th:block th:unless="${#lists.isEmpty(entries)}">
        <table>
          <thead>
            <tr>
              <th>Beschreibung</th>
              <th>Von</th>
              <th>Bis</th>
              <th>Bearbeiten</th>
              <th>Löschen</th>
            </tr>
          </thead>
          <tbody>
            <tr th:each="entry : ${entries}">
              <td th:text="${entry.description}"></td>
              <td th:text="${entry.checkIn}"></td>
              <td th:text="${entry.checkOut}"></td>
              <td><a th:href="@{/edit/{id}(id=${entry.id})}">Bearbeiten</a></td>
              <td><a th:href="@{/delete/{id}(id=${entry.id})}">Löschen</a></td>
            </tr>
          </tbody>
        </table>
      </th:block>
    </main>
    <th:block th:insert="~{fragments/default.html :: footer}"></th:block>
  </body>


</html>

add.html:

Abschnitt betitelt „add.html:“
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">


  <head>
    <th:block th:insert="~{fragments/default.html :: head}"></th:block>
    <title>Punchclock: Eintrag erstellen</title>
  </head>


  <body>
    <th:block th:insert="~{fragments/default.html :: header}"></th:block>
    <main>
      <h1>Eintrag erstellen</h1>
      <form action="#" th:action="@{/create}" th:object="${entry}" method="post">
        <label for="description">Beschreibung</label>
        <textarea th:field="*{description}" id="description" placeholder="Beschreibung" />
        <span th:if="${#fields.hasErrors('description')}" th:errors="*{description}"></span>
        <label for="checkIn">Von</label>
        <input type="datetime-local" th:field="*{checkIn}" id="checkIn" />
        <span th:if="${#fields.hasErrors('checkIn')}" th:errors="*{checkIn}"></span>
        <label for="checkOut">Bis</label>
        <input type="datetime-local" th:field="*{checkOut}" id="checkOut" />
        <span th:if="${#fields.hasErrors('checkOut')}" th:errors="*{checkOut}"></span>
        <div th:if="${#fields.hasErrors('checkOutAfterCheckIn')}" th:text="${#fields.errors('checkOutAfterCheckIn')[0]}"></div>
        <button type="submit">Erstellen</button>
      </form>
    </main>
    <th:block th:insert="~{fragments/default.html :: footer}"></th:block>
  </body>


</html>

edit.html:

Abschnitt betitelt „edit.html:“
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">


  <head>
    <th:block th:insert="~{fragments/default.html :: head}"></th:block>
    <title>Punchclock: Eintrag bearbeiten</title>
  </head>


  <body>
    <th:block th:insert="~{fragments/default.html :: header}"></th:block>
    <main>
      <h1>Eintrag bearbeiten</h1>
      <form action="#" th:action="@{/update/{id}(id=${entry.id})}" th:object="${entry}" method="post">
        <label for="description">Beschreibung</label>
        <textarea th:field="*{description}" id="description" placeholder="Beschreibung" />
        <span th:if="${#fields.hasErrors('description')}" th:errors="*{description}"></span>
        <label for="checkIn">Von</label>
        <input type="datetime-local" th:field="*{checkIn}" id="checkIn" />
        <span th:if="${#fields.hasErrors('checkIn')}" th:errors="*{checkIn}"></span>
        <label for="checkOut">Bis</label>
        <input type="datetime-local" th:field="*{checkOut}" id="checkOut" />
        <span th:if="${#fields.hasErrors('checkOut')}" th:errors="*{checkOut}"></span>
        <div th:if="${#fields.hasErrors('checkOutAfterCheckIn')}" th:text="${#fields.errors('checkOutAfterCheckIn')[0]}"></div>
        <button type="submit">Erstellen</button>
      </form>
    </main>
    <th:block th:insert="~{fragments/default.html :: footer}"></th:block>
  </body>


</html>

fragments/default.html:

Abschnitt betitelt „fragments/default.html:“
<!DOCTYPE html>
<html lang="de" xmlns:th="http://www.thymeleaf.org">


  <head th:fragment="head">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://localhost:35729/livereload.js"></script>
    <style>
      html {
        height: 100%;
        font-family: sans-serif;
      }


      body {
        min-height: 100%;
        display: flex;
        flex-direction: column;
        margin: 0;
      }


      body > * {
        padding: 0 20%;
      }


      main {
        flex-grow: 1;
      }


      header, footer {
        background-color: #DDD;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }


      nav ul {
        list-style: none;
        font-size: 1.4rem;
        padding: 0;
        margin: 0;
      }


      nav ul a {
        text-decoration: none;
      }


      header {
        height: 6rem;
        font-size: 2rem;
      }


      footer {
        height: 4rem;
        font-size: 0.8rem;
      }


      form {
        display: flex;
        flex-direction: column;
      }


      form input, form textarea {
        margin-bottom: 1rem;
      }


      form textarea {
        min-height: 10em;
        min-width: 100%;
      }


      form button {
        margin-top: 1rem;
      }
    </style>
  </head>


  <body>
    <header th:fragment="header">
      <a th:href="@{/}">AXA: Punchclock</a>
      <nav>
        <ul>
          <li><a th:href="@{/add}">Eintrag erstellen</a></li>
        </ul>
      </nav>
    </header>
    <footer th:fragment="footer">
      Übungsprojekt von einem Lernenden im ersten Lehrjahr.
    </footer>
  </body>


</html>
Abschnitt betitelt „Weiterführende Links“