Übungsaufgaben zu Thymeleaf im Backend: eine Seite für die Mitfahrgesuche

Kopiere den Text in ein KI-Sprachmodell Deiner Wahl und passe Kompetenzstufe, Anzahl, Bearbeitungszeit und Szenario bei Bedarf an. Wie die Aufgaben aufgebaut sind, beschreibt der Artikel Wie sind die Aufgaben aufgebaut?. Prüfe die Ergebnisse mit dem Lehrartikel: KI-Sprachmodelle machen Fehler.

Erstelle neue Übungsaufgaben zum Thema „Thymeleaf im Backend: eine Seite
für die Mitfahrgesuche“.

Bauplan: Halte Dich an Aufbau, Kompetenzstufen, Operatoren,
Anforderungsbereiche, Punkte und Zeitschätzung, die im Artikel
https://oer-informatik.de/aufgaben-aufbau beschrieben sind.

Fachliche Grundlage:
- https://oer-informatik.de/flurmonitor-thymeleaf-einbinden
- https://oer-informatik.de/szenario-mitfahrlabor
- Stilbeispiel: https://oer-informatik.de/flurmonitor-thymeleaf-einbinden-uebungsaufgaben

Die Aufgaben sollen Inhalte zu diesen Schlagwörtern abdecken:
- Thymeleaf
- Spring MVC
- Model-View-Controller
- Controller
- Template
- statische Ressourcen
- Spring Security
- Smoke-Test
- Fehlersuche
- Mitfahrgesuche

Kompetenzstufe: Basiskompetenz (alternativ: Kernkompetenz, Profilkompetenz, Expertise)
Anzahl: 1 Aufgabe mit Teilaufgaben
Bearbeitungszeit in Minuten ca.: <5 bis 30 min>
Szenario: eines der Szenarien aus dem Bauplan

Vorgehen:
1. Lies zuerst die verlinkten Artikel. Kannst Du keine Webseiten
   abrufen, sag mir das, statt zu raten.
2. Steht bei einer Angabe noch ein Platzhalter in <…>, frag mich
   zuerst danach. Richte Punkte und Zahl der Teilaufgaben nach der
   Bearbeitungszeit (ca. 0,9 min je Punkt).
3. Gib je Aufgabe Titel mit Kompetenzstufe, Ausgangssituation und
   Teilaufgaben mit Operator und Punktzahl aus, dazu die geschätzte
   Bearbeitungszeit.
4. Gib die Beispiellösungen mit Punkteverteilung erst aus, wenn ich
   danach frage.

C → F → B → I → D → G → E → A → H

Bewertung: 5 Punkte bei vollständig richtiger Reihenfolge, je falsch platzierter Karte 1 Punkt Abzug. D und I dürfen vertauscht sein, wenn der Wert vorher in einer Variablen steht; im üblichen Code fragt der Controller zuerst den Service und legt dann das Ergebnis ab.

• B: Controller, denn er nimmt die Anfrage an.
• D: Model, denn hier entstehen die Daten, die zur View wandern.
• E und A: View, denn erst wird das Template gesucht, dann wird es mit den Daten gerendert.

Je zwei richtig zugeordnete und begründete Karten 1 Punkt, für alle vier 3 Punkte. D als „Controller“ ist mit der Begründung „der Controller füllt das Model“ ebenfalls richtig.

Das HTML enthält nur einen Verweis (<link rel="stylesheet" href="/css/flurmonitor-bootstrap.css">); der Browser lädt jede verknüpfte Datei mit einer eigenen GET-Anfrage nach (1 Punkt). Die Datei liegt als statische Ressource unter src/main/resources/static/css/flurmonitor-bootstrap.css (1 Punkt).

Je Zeile 1 Punkt. Zu Zeile 4: public ist neben static einer der Ordner für statische Ressourcen. Im Projekt antwortet die URL ohne Anmeldung allerdings mit 401, weil die SecurityFilterChain nur /flurmonitor/**, /css/** und /bilder/** freigibt; wer das bemerkt, zeigt besonders gutes Verständnis.

• "flurmonitor-gesuche" → src/main/resources/templates/flurmonitor-gesuche.html (1 Punkt)
• "monitor/gesuche" → src/main/resources/templates/monitor/gesuche.html, also im Unterordner monitor (1 Punkt)
• "gesuche.html" → src/main/resources/templates/gesuche.html.html; die Endung wird immer angehängt, die Datei gibt es also meist nicht (1 Punkt)

• Variante 1 (@RestController): Der Rumpf besteht nur aus dem Text flurmonitor-gesuche, Content-Type text/plain (2 Punkte). Wegen @ResponseBody ist der String der Inhalt der Antwort; das Model wird nicht benutzt.
• Variante 2 (@Controller): Der Rumpf ist das gerenderte HTML des Templates, darin <p>Offene Gesuche: <strong>3</strong></p> ohne th:-Attribut, Content-Type text/html (2 Punkte).

Im Projekt ausprobiert: Variante 1 liefert text/plain;charset=UTF-8, Variante 2 text/html;charset=UTF-8.

package de.dbh.mitfahrlabor.web;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import de.dbh.mitfahrlabor.service.GesuchService;

/** Seite für die Mitfahrgesuche am Flurmonitor (Story MON-13a, erster Schritt). */
@Controller
public class MitfahrgesucheController {

    private final GesuchService gesuchService;

    public MitfahrgesucheController(GesuchService gesuchService) {
        this.gesuchService = gesuchService;
    }

    @GetMapping("/flurmonitor/gesuche")
    public String anzeigen(Model model) {
        model.addAttribute("standort", "Foyer Gebäude A");
        model.addAttribute("anzahlGesuche", gesuchService.anzahlOffen());
        return "flurmonitor-gesuche";
    }
}

Bewertung: @Controller (nicht @RestController) 1 Punkt, Service per Konstruktor 1 Punkt, @GetMapping mit richtigem Pfad 1 Punkt, Parameter Model 1 Punkt, beide Attribute mit den geforderten Namen 1 Punkt, View-Name ohne Endung 1 Punkt. Den Standort als Konstante wie im FlurmonitorController abzulegen, ist ebenso richtig.

Datei src/main/resources/templates/flurmonitor-gesuche.html:

<!DOCTYPE html>
<html lang="de" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mitfahrlabor – Mitfahrgesuche am Flurmonitor</title>
  <link rel="stylesheet" href="../static/css/flurmonitor-bootstrap.css" th:href="@{/css/flurmonitor-bootstrap.css}">
</head>
<body>
  <main class="container-fluid px-4 py-4">
    <h1 class="display-5 fw-bold text-primary">Mitfahrgesuche</h1>
    <p class="lead">Flurmonitor im <span th:text="${standort}">Eingang A</span></p>
    <p>Offene Gesuche: <strong th:text="${anzahlGesuche}">0</strong></p>
  </main>
</body>
</html>

Bewertung: richtiger Ort unter templates 1 Punkt, vollständiges Grundgerüst mit lang und charset 1 Punkt, Stylesheet mit th:href="@{…}" 1 Punkt, beide Werte mit th:text und den Attributnamen aus a) 1 Punkt, Beispielwerte im Element für die Ansicht ohne Server 1 Punkt. Bootstrap vom CDN wie in flurmonitor.html darf zusätzlich eingebunden sein. Das gerenderte HTML dieser Lösung meldet der Nu Html Checker ohne Fehler.

Die Regel requestMatchers(HttpMethod.GET, "/flurmonitor/**", …).permitAll() passt auf alle Pfade unter /flurmonitor, also auch auf /flurmonitor/gesuche (1 Punkt). Ändern müsstest Du sie etwa für eine öffentliche Seite außerhalb von /flurmonitor, z. B. /gesuche, oder für Stylesheets in einem Ordner wie static/gesuche/, der nicht unter /css/** oder /bilder/** fällt (1 Punkt).

package de.dbh.mitfahrlabor.web;

import static org.assertj.core.api.Assertions.assertThat;
import static org.mockito.Mockito.when;

import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.boot.webmvc.test.autoconfigure.AutoConfigureMockMvc;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.test.context.bean.override.mockito.MockitoBean;
import org.springframework.test.web.servlet.assertj.MockMvcTester;

import de.dbh.mitfahrlabor.service.GesuchService;

@SpringBootTest
@AutoConfigureMockMvc
class MitfahrgesucheSmokeTest {

    @Autowired
    private MockMvcTester mvc;

    @MockitoBean
    private GesuchService gesuchService;

    @Test
    void gesucheSeiteIstOhneAnmeldungErreichbar() {
        when(gesuchService.anzahlOffen()).thenReturn(3L);

        assertThat(mvc.get().uri("/flurmonitor/gesuche"))
                .hasStatusOk()
                .hasContentTypeCompatibleWith(MediaType.TEXT_HTML)
                .hasViewName("flurmonitor-gesuche")
                .bodyText()
                .contains("Mitfahrgesuche", "Foyer Gebäude A", "<strong>3</strong>")
                .doesNotContain("th:text");
    }
}

Bewertung: @SpringBootTest mit @AutoConfigureMockMvc und MockMvcTester 1 Punkt, @MockitoBean für den Service 1 Punkt, Verhalten des Mocks mit when(…).thenReturn(3L) 1 Punkt, Status und Content-Type 1 Punkt, View-Name 1 Punkt, Inhalte 1 Punkt. Im Projekt ausgeführt ist der Test grün.

    @Test
    void gesucheSeiteNimmtOhneAnmeldungKeinePostAnfrageAn() {
        assertThat(mvc.post().uri("/flurmonitor/gesuche")).hasStatus(HttpStatus.UNAUTHORIZED);
    }

Erwartet wird 401 (1 Punkt für den Test, 1 Punkt für den Status): Die Freigabe für /flurmonitor/** gilt nur für HttpMethod.GET; für POST greift anyRequest().authenticated(), und ohne Zugangsdaten antwortet Spring Security vor jedem Controller mit 401 (1 Punkt). Im Projekt ausgeführt ist der Test grün.

Die Anfrage scheitert beim Rendern: Thymeleaf findet zum View-Namen flurmonitor-gesuche keine Datei. Mit MockMvcTester gibt es dafür keinen Status 500; der Test bricht mit einer IllegalStateException ab: Request failed with unresolved exception jakarta.servlet.ServletException: Request processing failed: org.thymeleaf.exceptions.TemplateInputException: Error resolving template [flurmonitor-gesuche], template might not exist or might not be accessible by any of the configured Template Resolvers (1 Punkt). Den Hinweis auf die Ursache gibt die TemplateInputException mit dem gesuchten View-Namen (1 Punkt). Im laufenden Server erhielte der Browser stattdessen den Status 500.

Bewertung je Variante: Ursache 2 Punkte, Korrektur 1 Punkt. Alle fünf Varianten sind im Projekt nachgestellt; die beschriebenen Symptome treten genau so auf.

Aufgedeckt hätte der Smoke-Test aus 2.2 a) die Varianten 1 (Status 404 statt 200), 2 (Abbruch mit TemplateInputException), 4 (Content-Type text/plain, kein View-Name) und 5 (der Text „Foyer Gebäude A“ fehlt im HTML) (2 Punkte, je zwei richtige Varianten mit Begründung 1 Punkt).

Nicht aufgedeckt hätte er Variante 3: Er fragt nur die Seite selbst ab, und die kommt mit 200 an. Das Stylesheet lädt erst der Browser nach (1 Punkt). Eine zusätzliche Prüfung fragt jede eingebundene Ressource ohne Anmeldung ab, z. B. assertThat(mvc.get().uri("/gesuche/gesuche.css")).hasStatusOk();, wie es FlurmonitorSmokeTest für Stylesheet und Logo tut (1 Punkt). Ein Systemtest im echten Browser, wie er mit Selenium später in der Reihe folgt, würde den Fehler ebenfalls zeigen.