Labo 6

helloExpress

In deze oefening gaan we de helloExpress applicatie uit labo 5 uitbreiden met EJS. Neem de broncode van labo 5 over zodat je de vrijheid hebt om de code aan te passen zonder dat je de oorspronkelijke code verliest. De routes die json terugsturen gebruiken uiteraard nog steeds json en geen ejs.

• Pas de / route aan zodat deze een ejs template gebruikt. Je hoeft hier niets door te geven aan de ejs template.

• Pas de /whoami route aan zodat deze een ejs template gebruikt. Geef het thisisme object door aan de ejs template.

• Pas de /pikachuhtml route aan zodat deze een ejs template gebruikt. Geef enkel de waarden door aan de ejs template die je toont in de html pagina. Je mag dus niet het hele pikachu object doorgeven aan de ejs template (tenzij je Pokemon object al alleen de waarden bevat die je nodig hebt).

• Pas de /randomcolor route aan zodat deze een ejs template gebruikt. Geef de kleur door aan de ejs template.

Maaltafels

Maak een nieuwe folder maaltafels waarin je jouw bronbestanden voor deze oefening kan plaatsen.

Installeer alle nodige libraries voor te werken met express en ejs.

Maak een nieuw bestand index.ts aan met de volgende inhoud:

import express from "express";
const app = express();

app.set("port",3000);
app.set("view engine", "ejs");

app.get("/", (req:any,res:any) => {
    res.render("maaltafels");
})

app.listen(app.get("port"), () => {
    console.log(`Web application started at http://localhost:${app.get("port")}`)
})

Maak nu een nieuwe ejs file aan die de maaltafels van 1 tot en met 10 toont in je browser als je surft naar http://localhost:3000

Je mag geen aanpassingen maken in de index.ts file. Het opbouwen van de tabel moet volledig gebeuren in het ejs bestand.

De output in de browser moet er als volgt uitzien:

Mathservice

Maak een nieuwe folder mathservice waarin je jouw bronbestanden voor deze oefening kan plaatsen.

Installeer alle nodige libraries voor te werken met express en ejs.

Maak een nieuwe express applicatie in een index.ts bestand. We gaan een web applicatie maken die de volgende wiskundige operatoren kan uitvoeren: add, min, mult en div

Zorg voor 1 GET-route die urls in de volgende vorm kan afhandelen:

http://localhost:3000/add?a=3&b=5
http://localhost:3000/min?a=3&b=5
http://localhost:3000/mult?a=3&b=5
http://localhost:3000/div?a=3&b=5

Je moet dus query parameters (voor a en b) EN route parameters (voor de operatoren) gebruiken

Je krijgt dan een output in de volgende vorm (json):

{
    "result": 8
}

Als 1 van de twee parameters (a en b) niet zijn opgegeven krijg je het volgende json object terug:

{
    "error": "Both query parameters (a,b) have to be specified."
}

Catstatic

Maak een nieuwe folder catstatic waarin je jouw bronbestanden voor deze oefening kan plaatsen.

Installeer alle nodige libraries voor te werken met express en ejs.

Maak een nieuwe express applicatie in een index.ts bestand. Zorg voor een GET route op /cats/images

Zorg ervoor dat de volgende images getoond worden als je naar http://localhost:8888/cats/images surft. We maken gebruik van ejs en niet van een statische html bestand.

87KB

cats.zip

archive

Zorg voor een extern css bestand waar je een eigen style geeft aan de pagina.

Contact

Maak een nieuwe folder contact waarin je jouw bronbestanden voor deze oefening kan plaatsen.

Installeer alle nodige libraries voor te werken met express en ejs.

Maak een nieuwe express applicatie in een index.ts bestand.

Voorzie een route /contact met een apart ejs bestand waar je het volgende contact formulier op laat zien:

Als de gebruiker alles invult (dit moet niet nagekeken worden) en op submit drukt moet er een POST request gedaan worden naar dezelfde route (maar met een post). Deze route gebruikt een ander ejs bestand. De volgende tekst moet getoond worden. Hier moet uiteraard de naam, email en bericht vervangen worden met het doorgestuurde bericht:

Uitbreiding:

Gebruik het include keyword in ejs om het contact formulier terug te importeren onderaan de bevestiging pagina:

PRO: Contact Uitbreiding

Zorg ervoor dat alle toevoegingen via het contact formulier worden opgeslagen in een json bestand emails.json.

Dit json bestand wordt bij het opstarten van de applicatie ingelezen en bij elke nieuwe toevoegen wordt deze terug opgeslagen.

Zorg voor een extra veld in de form die toestaat om een file mee te sturen bij het contact formulier.

Gebruik de npm package https://www.npmjs.com/package/express-fileupload om deze af te handelen. Zorg ervoor dat de bestanden worden opgeslagen in een files directory en dat het pad naar dit bestand mee in de emails.json file worden opgeslagen.