Log | Week 2

Logboek | Week 2

Azam Awan | Klas: Project-Tech-2

Project Tech

Voor week 2 hebben we een tutorial moeten volgen die ons de basics van de command line (terminal) doorloopt.

Als huiswerk moesten wij met een jobstory komen voor een functie binnen onze individuele opdracht/project binnen blok tech. In combinatie met de jobstory moesten wij een aantal wireframes met daarin een stapsgerichte visuele voorbeeld van hoe de applicatie/functie eruit ziet.

Vervolgens moesten wij onze wireflows in statische HTML pagina’s bouwen. Ik heb ervoor gekozen om dit met de templating engine EJS te doen aangezien we dit in de les back end hebben meegekregen.

Back-End

We hebben voor week 2 in de les meegekregen wat templating engines zijn en waarvoor ze handig kunnen zijn. Ik heb naar diverse templating engines gekeken die op GitHub staan. Ik ben tot de keuze gekomen om gebruik te maken van EJS als templating engine. Om mijn keuze te onderbouwen heb ik gekeken naar wat vaak voorkomt en wat handig zal zijn binnen blok tech. EJS zorgt ervoor dat alles snel in wordt geladen en dat het integreren met Express heel handliggend is. Daarnaast kan je makkelijk gebruik maken van tags die ik maar op enkele sections van een .ejs file kan oproepen.

Dit bepaal ik ook zelf. Zo heb ik in mijn index pagina geen footer maar op alle andere pagina’s wel.

Wat betreft de mappen structuur van mijn applicatie heb ik wel veel aanpassingen gemaakt. Dit was verplicht aangezien ik ervoor heb gekozen om met de templating engine EJS verder te werken. Zo heb ik inplaats van een public map met daarin mijn statische HTML pagina’s een map genaamd ‘views’ aangemaakt met daarin diverse mappen.

De primaire mappen zijn in dit geval ‘pages’ en ‘partials’. In de pages map staan al mijn statische .html files die ik geconverteerd heb naar .ejs files. Enige verschil is dat ik de head, header en footer heb ‘gespliced’ en daarvan individuele .ejs bestanden heb aangemaakt, deze bestanden zitten in de ‘partials’ map en worden doormiddel van de EJS tags (<% .. %>) ingeladen in de geconverteerde .ejs pagina’s.

Front-End

In de les hebben we met de docent doorgenomen hoe je elementen bij tag name kan oproepen en wat je allemaal daarmee kan doen via javascript.