Heb wat meer gedaan met de templaten

articles/templates/koekjesvorm.md

@@ -48,6 +48,37 @@ Ik voer dan voor het variabele `naam` dan de naam van de rooster opvrager. Op di
 
 Dit templaat zorgt voor de kleine rode of blauwe bar aan de bovenkant van elke Werkmanrooster pagina. Wat hier belangrijk is, is de evalutatie van het variabele `user`. Dit variabele bepaald namelijk hoe de pagina er uit gaat zien. Als het variabele `user` niet bestaat, en er dus niet is ingelogd dan word de gebruiker een login knopje laten zien. Als de gebruiker wel is ingelogd (het variabele `user` bestaat) dan wordt dat variabele gebruikt om een groet aan de gebruiker te laten zien.
 
+Alle in het rood gekleurde letters en woorden die je aan het begin van elke regel ziet staan zijn verschillende `HTML` elementen. Elke webpagina bestaat uit `HTML` en nog een taal genaamd `CSS`. `HTML` is ervoor om een duidelijke structuur aan de pagina te geven met verschillende "elementen". Deze elementen kunnen een vormgevende functie of een inhoudelijke functie hebben. In het voorbeeld hierboven maken we bijvoorbeeld gebruik van het element `a` die als een link fungeert zodat de gebruiker naar een andere website kan als hij op de link klikt. Het is niet al te belangrijk om te weten wat het meeste er van betekent.
+
+Het volgende wat we gaan bekijken is de templaat voor het renderen van een rooster uit een database bestand.
+```jade
+//- Andere templaten die nodig zijn voor de pagina
+include header
+include search
+
+.schedule
+  //- Ga elke dag in het rooster bij langs
+  each day in schedule
+    .day
+      //- Ga elk uur in de dag bij langs
+      each hour in day
+        //- Als er niet 'vrij' staat op de plek van een uur
+        if hour.teacher != 'vrij'
+          .hour(class=(hour.changed == 'true' ? 'changed' : ''))
+               span.teacher
+                  a(href=hour.teacher) #{hour.teacher}
+               span.chamber
+                  a(href=hour.chamber) #{hour.chamber}
+               span.course= #{hour.course}
+        //- Staat er wel 'vrij', dan laat het uur vrij zijn! (yay)
+        else
+          .hour.changed(class= current ? ' current' : '')
+            span.free Vrij
+```
+
+Je zou denken dat hier niet zoveel gebeurd. Laten we kijken naar een van de `keywords` die we een paar keer zien. Je ziet helemaal aan de bovenkant een paar keer `include` staan met daar achter een ander woord. `include` zorgt ervoor dat wij andere templaten kunnen importeren zoals `search` wat in ons geval de zoekbalk is die op elke pagina van Werkmanrooster staat.
+
+Dan is er nog `each`. `each` is een keyword waarmee de programeur zegt 'voor elke', dat wil zeggen, als een data object meerdere dingen bevat kan hij ze op die manier bij langs gaan. Het is hetzelfde wanneer je een ballenbak hebt en de kleuren wil sorteren. De ballenbak is dan het dataobject. Je zegt dan bijvoorbeeld  dat voor elke bal die ik hier uit pak, gaat de groene naar links en de rode naar rechts. En je pakt alle ballen uit de ballenbak totdat je allemaal gehad hebt. Hetzelfde gebeurd hier. Iedere keer als het `each` `keyword` word gebruikt gaat hij alle mogelijke dingen bij langs totdat hij klaar is. Hier kun je bijvoorbeeld zien bij de eerste `each` dat hij elke dag in het rooster bij langs gaat, en dat hij vervolgens elke dag ook nog alle uren bij langs gaat. Op deze manier komen alle dagen en uren aan bot!
+
 ---
 [Volgende  >>](/database)
-