Thymeleaf workshop

I dag skal vi udforske, hvad vi kan bruge Thymeleaf til.

I går brugte vi blandt andet:

• th:text
• th:each
• th:if
• session.user
• attributes

I dag skal I bruge Thymeleaf på nye måder i jeres bibliotekssystem.

Brug Thymeleaf-materialet som opslagsværk.

Lav en søgefunktion, hvor den loggede bruger kan søge efter bøger.

Brug en formular:

<form action="/searchbooks" method="get">
    <input type="text" name="search">
    <button type="submit">Søg</button>
</form>

Controlleren skal modtage søgeteksten og finde de bøger, der matcher.

Vis resultatet med th:each.

Eksempel:

Harry Potter
Harry Potter og Hemmelighedernes Kammer
Harry Potter og Fønixordenen

Prøv selv at beslutte, hvad der skal ske, hvis der ikke findes nogen bøger.

Nu skal søgningen tage højde for brugeren.

Vi forestiller os, at en bruger kan være:

• voksen
• barn

Tilføj derfor fx en isChild property til User.

Når et barn søger efter bøger, må barnet kun få vist børnebøger.

En voksen må se alle bøger.

Brug Thymeleaf til at håndtere resultatet.

I skal altså have en liste af bøger og bruge betingelser inde i jeres iteration.

Fx noget i retning af:

<div th:each="book : ${books}">

    <div th:if="...">
        ...
    </div>

</div>

I skal selv finde ud af, hvilken betingelse der giver mening.

Udvid søgningen.

Hvis brugeren er et barn, og en bog ikke er en børnebog, skal den ikke vises.

Prøv at lave en side, hvor der i stedet står:

Denne bog kan ikke vises for din bruger.

I må gerne bruge th:if eller th:unless.

Forestil jer, at en bog kan lånes.

En almindelig bruger skal kunne se:

Lån bog

Hvis bogen allerede er udlånt, skal der i stedet stå:

Ikke tilgængelig

Brug th:if og th:unless til at vise den rigtige tekst eller knap.

Her kombinerer I iteration og betingelser:

for hver bog
    └── er bogen tilgængelig?
          ├── ja → vis "Lån bog"
          └── nej → vis "Ikke tilgængelig"

Brug th:if til at vise forskellige oplysninger afhængigt af den aktuelle bruger.

Hvis brugeren er admin:

Administrator

Hvis brugeren ikke er admin:

Bruger

Prøv også at vise forskellige links afhængigt af brugerens rolle.

Når man søger efter bøger, kan der være nul resultater.

Lav en pæn besked:

Vi fandt ingen bøger, der matcher din søgning.

Beskeden skal kun vises, når listen med søgeresultater er tom.

Undersøg, hvordan Thymeleaf kan teste, om en liste er tom.

Lav et link på hver bog:

Se detaljer

Linket skal føre til en bestemt bog.

Fx:

/books/17

hvor 17 er bogens id.

Brug th:href til at bygge URL’en.

Undersøg, hvordan man indsætter en variabel i en URL med Thymeleaf.

Lav siden:

/books/{id}

På siden skal I vise oplysninger om den valgte bog:

• Titel
• Forfatter
• ISBN
• Eventuelt andre oplysninger fra jeres model

Lav også et link tilbage til boglisten.

Nu skal bogdetaljesiden være forskellig afhængigt af brugeren.

Et barn skal fx ikke kunne se bøger, der ikke er børnebøger.

En voksen må se alle bøger.

Prøv at håndtere det med Thymeleaf.

Overvej også:

Hvad skal der ske, hvis en bruger forsøger at gå direkte til URL’en?

Fx:

/books/42

Tilføj eventuelt et billede til bøgerne.

Hvis jeres Book har en billedsti, kan I bruge:

<img th:src="@{${book.imagePath}}">

Hvis I ikke har billeder i jeres model, kan I bare eksperimentere med et fast billede først.

Lav en navigation, som ser forskellig ud afhængigt af brugeren.

En almindelig bruger kan fx se:

• Forside
• Mine lån
• Søg bøger
• Log ud

En admin kan desuden se:

• Alle brugere
• Alle bøger
• Find bruger
• Find forfatters bøger

Brug Thymeleaf til at styre, hvilke links der vises.

Se på jeres Thymeleaf-sider.

Er der HTML, som går igen på flere sider?

Fx:

• navigation
• header
• footer

Lav et Thymeleaf-fragment til noget af det.

Undersøg:

th:fragment

og

th:replace

Prøv derefter at bruge fragmentet på flere sider.

Hvis I bliver hurtigt færdige, så vælg én eller flere af disse.

Hvis brugeren søger:

Harry

skal alle bøger med “Harry” i titlen vises.

Hvis brugeren søger:

harry

skal det også virke.

Lav en søgning, hvor brugeren kan skrive et forfatternavn.

Vis alle bøger af den pågældende forfatter.

Brug th:each til resultatet.

Lav en situation, hvor Thymeleaf skal tage højde for mere end én ting.

Fx:

Hvis brugeren er et barn, må kun børnebøger vises.

og:

Hvis bogen er udlånt, må der ikke vises en “Lån bog”-knap.

Find noget i Thymeleaf-materialet, som vi endnu ikke har brugt.

Prøv det i jeres eget bibliotekssystem.

I skal bagefter kunne forklare:

1. Hvad gør det?
2. Hvordan bruger man det?
3. Hvor kunne det være nyttigt?

I skal ikke kunne huske alle Thymeleaf-attributter.

I skal kunne:

• læse Thymeleaf-kode
• finde den syntaks, I har brug for
• kombinere iterationer og betingelser
• sende data fra Java til Thymeleaf
• bruge Thymeleaf til at lave forskellige views afhængigt af data
• eksperimentere selv

Thymeleaf skal ikke længere føles som noget, læreren viser jer.

Det skal være noget, I selv kan undersøge og bruge.