Templating engine - MrSmarto/Anime-Smarty GitHub Wiki

De manier hoe javascript templates worden gebruikt vond ik toen ik dat voor het eerst hoorde in de les moeilijk te begrijpen met de voorgaande kennis die we hebben geleerd tijdens CMD. We werkten namelijk alleen met statische html pagina's waarin we onze codes schreven.

Eigenlijk spreekt het wel voor zich, met javascript templating kan je templates maken die je gemakkelijk meerdere keren kan gebruiken zonder dat je telkens een volledig nieuwe pagina moet schrijven. Dit werkt heel goed met node.js omdat je vaak met een server en een database werkt waarin verschillende soorten informatie gerenderd moet worden in de javascript templates. Hierdoor wordt je website dynamisch en makkelijker beheerbaar. Er zijn verschillende soorten javascript templating talen die je kan gebruiken, wij kregen namelijk in de les de volgende talen voorgesteld:

• EJS
• Handlebars
• PUG
• Express handlebars

De leraren van blok TECH hebben ook allemaal een andere persoonlijke voorkeur. We hebben het kort gehad over de verschillen tussen de javascript templating talen. Persoonlijk sprong EJS er wel uit bij mij, omdat de taal heel toegankelijk aanvoelde toen ik zag hoe het wordt gebruikt. Toch heb ik ook even naar de andere javascript templating talen gekeken. Ik vindt dat Handlebars best oud en onefficient geschreven is vergeleken met EJS. PUG en Express handlebars hadden mij ook niet kunnen overtuigen.

1. In het bestand server.js worden de nodige NPM pakketjes geinstallerd, zoals:

express, ejs, MongoDB, dotenv en body-parser.

2. Vervolgens configureer ik de middleware:

• express.static()

Wordt gebruikt om de map public te definiëren als de locatie voor statische bestanden zoals CSS en afbeeldingen.

• body-parser

Wordt gebruikt om formuliergegevens te parseren.

• De view engine wordt ingesteld op EJS.

zodat je werkt folder EJS herkend

3. Er zijn verschillende routes gedefinieerd, waaronder:

• De get route voor de homepagina. Hier worden de films opgehaald uit de database en doorgegeven aan de index.ejs template.

• De get route voor de detailpagina. Hier wordt het ID van de film uit de URL parameters gehaald en gebruikt om de bijbehorende gegevens op te halen uit de database. De filmgegevens worden vervolgens doorgegeven aan de detailspagina.ejs template.

• De get route voor de accountpagina. Hier worden de opgeslagen films opgehaald uit de database en doorgegeven aan de account.ejs template.

• De post route voor het opslaan van een film. Hier wordt het filmID uit het POST-verzoek gehaald en gecontroleerd of het een geldig ID is. Als de film al is opgeslagen, wordt de gebruiker doorgestuurd naar de accountpagina. Als de film nog niet is opgeslagen, wordt deze opgeslagen in de database en wordt de gebruiker doorgestuurd naar de accountpagina.

• De post route voor het verwijderen van een opgeslagen film. Hier wordt het ID van de te verwijderen film uit het POST-verzoek gehaald en gebruikt om de film te verwijderen uit de database. De gebruiker wordt vervolgens doorgestuurd naar de accountpagina.

4. De index.ejs, detailspagina.ejs en account.ejs templates bevatten HTML en EJS-syntaxs die worden gebruikt om de dynamische inhoud van de pagina's te genereren. EJS maakt het mogelijk om variabelen en JavaScript-code te gebruiken binnen de HTML. In deze templates worden de films en opgeslagen films weergegeven op basis van de gegevens die zijn doorgegeven vanuit de routes. Bijvoorbeeld:

<% for(let i=0; i<films.length; i++) { %> ... <% } %>

om een lijst met films te genereren.

5. Om de templates te renderen, worden de bijbehorende EJS-bestanden gerenderd door middel van res.render(). In de routes wordt de juiste template geladen met de gegevens die moeten worden weergegeven. Bijvoorbeeld:

res.render('index.ejs', {

    title: 'ANIME SMARTO',
    css: './public/css/index.css',
    films: data,
    id: data
  });

om de index.ejs template te renderen met de juiste titel, CSS-bestand en een array met films. De gegevens worden vervolgens door EJS gebruikt om de HTML-pagina te genereren die wordt teruggestuurd naar de browser.

Ik moest natuurlijk om EJS te gebruiken, eerst npm gebruiken om het EJS pakket te installeren door "npm install ejs" in te typen in mijn CLI. Vanaf dit punt kon ik eigenlijk mijn server vertellen wat er gerenderd moet worden door res.render() te gebruiken.

In mijn voorbeeld gebruik ik EJS om gegevens op de detailpagina te renderen. Wanneer een gebruiker naar de detailpagina van een bepaalde film navigeert door op een film te klikken in de homepagina, dan wordt de film-ID opgehaald uit de URL. Deze film-ID wordt gebruikt om de juiste filmgegevens op te halen uit mijn MongoDB-database door de methode "findOne()" te gebruiken. Als er geen resultaat wordt gevonden voor het film-ID, dan krijg je een 404-foutmelding.

Als er wel resultaten worden gevonden, worden de filmgegevens doorgegeven aan de EJS template "detailspagina.ejs" door de "res.render()" methode te gebruiken. In de EJS template kunnen de filmgegevens worden gebruikt om de pagina dynamisch te maken door EJS-tags te gebruiken zoals <%= film.title %> om de titel van de film weer te geven.

Ik heb dus besloten om EJS te gebruiken voor mijn applicatie.