Justinas nyhedsbrev - Fullstack

Nu skal vi i gang med at kode frontend og backend til Justinas nyhedsbrev. Vi skal bruge Javalin, Thymeleaf og en database.

Plan

  1. Først udarbejder vi et use-case diagram
  2. Dernæst beskrives hver use-case som en user story
  3. På baggrund af det laver vi en simpel domænemodel og på baggrund af den et ER-diagram (ERD) over databasen.
  4. Så går vi i gang med at kode. Først oprettes et Java / Maven projekt i IntelliJ (instruktioner
  5. Dernæst oprettes en database i Postgres og der lægges lidt fake data ind i tabellerne.
  6. Når alt dette er på plads begynder vi at implementere de enkelte user stories en ad gangen.

Det bruger vi så resten af ugen på. Her er en cirka plan over hvad vi skal nå at gennemgå:

Tirsdag

  • Use-case diagram
  • User stories
  • Domænemodel
  • ER-diagram
  • Projekt setup
  • Database setup
  • Indsæt fake data i databasen
  • Implementer den første user story

Der hører en del teknikker til at udvikle Javalin webapplikationer. Vi skal blandt andet gennem følgende:

  • Opsætning af Javalin projekt
  • Opsætning af Thymeleaf
  • Opsætning af Postgres database og ConnectionPool
  • Opsætning af datamappere
  • Opsætning af routes
  • Opsætning af controllers
  • Opsætning af thymeleaf templates. Herunder layout, fragments, billeder, links, forms, knapper og diverse udtryk.
    • Variable Expressions: ${}
    • Link (URL) Expressions: @{}
    • For-each loop: th:each
    • Conditional statements: th:if, th:unless, th:switch, th:case
  • Behandling af http requests (GET, POST, PUT, DELETE)
  • Behandling af form data
  • Brug af sessions

Onsdag - codelab

I dag skal vi arbejde videre på nyhedsbrevsiden. Vi skal implementere de user stories vi har lavet. Vi tænker ikke så meget over designet i dag. Det gemmer vi lidt. Vi vil gerne have noget funktionalitet op at køre.

Her er vores use-case diagram:

UC diagram

For at kunne implementere disse use-cases skal vi have skaffet os adgang til en database.

Vi skal bruge en tabel til at gemme metainformation til nyhedsbrevene og en tabel til at gemme modtagere af nyhedsbrevene. Vi skal vel også have en tabel til at gemme brugerne (Justina) + det løse. Lad os se på det sammen:

  • #### Opgave 1: Lav en domænemodel over de konceptuelle klasser og deres attributter

  • #### Opgave 2: Lav et ER-diagram over databasen

  • #### Opgave 3: Opret databasen i Postgres

Der er hjælp at hente her: DB setup

  • #### Opgave 4: Indsæt fake data i tabellerne

Det gør det lettere at komme hurtigt i gang med at vise data i applikationen. Dvs, at man ikke behøver at oprette brugere, nyhedsbreve og modtagere manuelt, men blot hælder nogle rækker data ind i tabellerne.

  • #### Opgave 5: Implementer: Sign up for newsletter

Så er der vist rigeligt at tage fat på. Vi tager en ting ad gangen og hjælper hinanden.

Torsdag

Vi begynder med at gøre status på hvor langt vi er nået og kører videre derfra.

  • #### Opgave 6: Add newsletter (add metadata + upload PDF + thumbnail)

  • #### Opgave 7: Implementer: View archived newsletters

Fredag

  • #### Opgave 8: Implementer: View latest newsletter

  • #### Opgave 9: Implementer: Search functionality

  • #### Opgave 10: Add styling

  • #### Forbered præsentation af hvor langt du nået til mandag

Indholdselementer (assets)

Her er nyhedsbrevene fra CPH Business. De er i PDF format og kan downloades:

  1. 01 Sep Okt 2024
  2. 02 Okt Nov 2024
  3. 03 Nov Dec 2024
  4. 04 Dec Jan 2025
  5. 05 Jan Feb 2025
  6. 06 Feb Mar 2025

Thumbnail filer:

  1. 01 sep-okt
  2. 02 okt-nov
  3. 03 nov-dec
  4. 04 dec-jan
  5. 05 jan-feb
  6. 06 feb-mar

Logopakke og Designguide

Jonathans Figma mockup

Top

2. semester forår 2025