Labo 7
Last updated
Last updated
We bouwen in deze oefening een nieuwe express applicatie. Zorg ervoor dat deze in een aparte folder staat met dezelfde naam als de oefening. Je maakt het volledig labo in het bestand index.ts
Maak een Express applicatie aan die luistert op poort 3000 (zie syllabus).
Maak een aparte header / footer template die een titel van jouw app, een logo en link naar een css file bevat
het logo bevindt zich op jouw server. Gebruik dus geen externe urls om het logo te tonen
gebruik css om jouw header en de andere paginas die we gaan maken te stylen. Hiervoor gebruik je een externe css file die je in jouw <head> linkt.
De invulling van deze header en footer mag je volledig zelf beslissen.
Maak een welkom pagina die we kunnen oproepen via http://localhost:3000.
zorg dat je zeker de header en footer template importeert
zorg dat de landingspagina wat info over jouw app bevat (wat tekst)
Het kan er als volgt uitzien:
Maak een movies pagina die we kunnen oproepen via http://localhost:3000/movies
Maak een globale variabele aan movies zoals hieronder:
zorg dat je zeker de header / footer template importeert
toon een lijst van de films van de movies variabel op deze pagina. Gebruik CSS om deze lijst wat stijl te geven.
zorg dat de landing page naar deze pagina wijst (pas dus de landing page aan)
zorg dat je via een link naar de landingpage kan
Dit kan er ongeveer als volgt uitzien:
Maak een movie pagina die we kunnen oproepen via http://localhost:3000/movies/X waar X een getal is.
zorg dat je zeker de header/footer template importeert
toon de film die zich op index X bevindt in de movies array
zorg dat je bij elke movie op de movies pagina naar de movie pagina van die specifieke film kan gaan via een link.
zorg dat je via een link terug naar de movies pagina kunt
Hoe rekening met het feit dat de gebruiker een index kan ingeven die hoger is dan het aantal elementen (voorzie een error page)
Maak een addmovie pagina aan die we kunnen oproepen via http://localhost:3000/addmovie .
toon een form met 2 velden: Title en My Score
dit form gebruikt de POST methode
zorg dat de submit knop de data verstuurt en toevoegt aan de movies array
Toon een bevestigingsbericht als de film is toegevoegd aan de array en laat terug de movies pagina zien.
app.get('/addmovie',.. en app.post('/addmovie',.. zijn 2 verschillende routes. Gebruik de get route om het formulier te tonen. Gebruik de post route om de data te ontvangen. Beiden kunnen dezelfde EJS file als response terugsturen (zo ziet de gebruiker opnieuw het formulier na het de submitten)
Zorg nu dat er geen in-memory array wordt bijgehouden. In plaats daarvan start je een MySQL-server op en maak je hierin een tabel Movies. Zorg ervoor dat de eerdere code om de films te tonen deze eerst ophaalt uit de database en zorg dat de code om een film toe te voegen deze ook toevoegt aan de database.
Aangezien je eerder werk moet schrappen, is het hier vanzelfsprekend dat je eerst een backup maakt. Zorg dat eerdere code in versiebeheer staat voor je wijzigingen aanbrengt.
