Labo 7

myMovieDb

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).

Header en footer

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.

Landing page

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:

Movies

Maak een movies pagina die we kunnen oproepen via http://localhost:3000/movies

Maak een globale variabele aan movies zoals hieronder:

let movies : Movie[] = [
    {name: "The Matrix", myScore: 90, image: "https://cdn.shopify.com/s/files/1/0057/3728/3618/products/9fcc8387e9d47ab5af4318d7183f6d2b_19f7e1e1-3941-4c27-bad1-1f6dd70f35e0_480x.progressive.jpg?v=1573587594", description: ""},
    {name: "Pulp Fiction", myScore: 100, image: "https://cdn.shopify.com/s/files/1/0057/3728/3618/products/pulpfiction.2436_500x749.jpg?v=1620048742", description: ""},
    {name: "Monster Hunter", myScore: 5, image: "https://cdn.shopify.com/s/files/1/0057/3728/3618/products/monsterhunter.styleb.ar_500x749.jpg?v=1608660576", description: ""},
    {name: "Blade Runner", myScore: 100, image:"https://cdn.shopify.com/s/files/1/0057/3728/3618/products/d9f6067d2406a7cfbf42a5fc4ae4cd9d_8174831c-db77-4608-9ae2-44aca8f2a6f5_500x749.jpg?v=1573585461", description:""}
];

  • 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:

Movie

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)

AddMovie

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)

Integratie MySQL

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.

PreviousHanoiNextLabo 8

Last updated

Was this helpful?