bram/hoewerkt
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Nog wat toegevoegd aan het database hoofdstuk

Browse source
This commit is contained in:
Bram van der Veen 2016-01-03 10:02:48 +01:00
parent 0e3ef419c1
commit b9b4b40899
3 changed files with 25 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
articles/database/database.md
View file

@ -9,26 +9,35 @@ Werkmanrooster maakt gebruik van een zelfgeschreven script genaamd een "`crawler
Laten we wat beter kijken naar de manier waarop `spider.js` werkt.
We nemen het gedeelte waar het belangrijkste gebeurd.
![Rooster namen](http://i.imgur.com/89e4Y4M.png)
```javascript
// De variabele met de studenten bijv. "A6A - Bram van der Veen", "A6B - David Veenstra"
var listOfStudents = cheerio('select', download).children();
//Ga alle studenten in de lijst bij langs. (Werkt hetzelfde als each bij templates)
for (student in listOfStudents) {
//Haal de naam, de group en het leerlingnummer uit de student.
var name = cheerio(listOfStudents[student]).split(' - ')[1];
var group = cheerio(listOfStudents[student]).split(' - ')[0];
var id = cheerio(listOfStudents[student]).value();
var name = cheerio(listOfStudents[student]).text().split(' - ')[1];
var group = cheerio(listOfStudents[student]).text().split(' - ')[0];
var id = cheerio(listOfStudents[student]).val();
//Maak een dataobject wat later in de database gaat.
var databaseEntry = {
'id' : id,
'group' : group,
'username' : id + name.split(' ')[0].toLowerCase(),
'username' : id + name.split(' ')[0],
'name' : name,
'first_name' : name.split(' ')[0],
'last_name' : name.split(' ').splice(1).join(' '),
'studentcategory' : studentcategory,
'type' : page.type.replace(/rooster/g, '').toLowerCase()
'type' : page.type.replace(/rooster/g, '')
}
//Stop het dataobject in de database
collection.insert(databaseEntry);
}
```
Aan de rechterkant zien we de lijst met mogelijke leerlingen als je een rooster wil opvragen op de normale rooster site. Aan de rechter kant zien we het stuk code wat deze informatie verwerkt. De lijst aan de linkerkant is heel mooi georganiseerd. Als iets in een mooi patroon voorkomt kunnen we daar gemakkelijk code voor schrijven om er informatie uit te filtreren! Laten we langs de code gaan aan de rechterkant.
De eerste stap die je ziet, is dat er een variabele wordt verklaard genaamd `listOfStudents`. Dit variabele houdt een object vast waar alle leerlingen in zitten. Vervolgens word er met het `for` `keyword` duidelijk gemaakt dat we voor elke `student` in de `listOfStudents` bij langs willen. Dit gebeurd tussen de `{` en de `}` die volgt na het `for` `keyword`. Er worden dan weer een set met variabele verklaard.

10
articles/templates/koekjesvorm.md
View file

@ -9,13 +9,13 @@ Wat is een template eigenlijk? Een template is een versimpelde progammatuur in e
---
#### Formules en functies.
Hoe een templaat werkt, is te vergelijken met wiskundige formules. Je hebt gewoon een soort standaard manier van werken met een variabele. We nemen als voorbeeld de formule `y = x + 2`. Iedereen weet wat er gebeurd met `y` als je x veranderd. `y` is dan gewoon `x` plus twee erbij. Bij templates werkt het vrijwel hetzelfde, maar in plaats van een wiskundige formule, is het een hele lange formule die niet alleen cijfers kan verwerken maar ook woorden en zinnen. Ik kan bijvoorbeeld iemand groeten die zijn rooster bezoekt door het variabele van zijn naam te gebruiken in zo'n templaat.
Hoe een template werkt, is te vergelijken met wiskundige formules. Je hebt gewoon een soort standaard manier van werken met een variabele. We nemen als voorbeeld de formule `y = x + 2`. Iedereen weet wat er gebeurd met `y` als je x veranderd. `y` is dan gewoon `x` plus twee erbij. Bij templates werkt het vrijwel hetzelfde, maar in plaats van een wiskundige formule, is het een hele lange formule die niet alleen cijfers kan verwerken maar ook woorden en zinnen. Ik kan bijvoorbeeld iemand groeten die zijn rooster bezoekt door het variabele van zijn naam te gebruiken in zo'n template.
```jade
p Hallo #{naam}, hoe gaat het met jou?
```
Ik voer dan voor het variabele `naam` dan de naam van de rooster opvrager. Op die manier krijg ik dus bijvoorbeeld `Hallo Bert, hoe gaat het met jou?` als het variabele naam gelijk staat aan `Bert`. Deze templaten zijn echter geschreven in een taal die dit soort vergelijkingen makkelijk leesbaar maakt voor de programeur, ik heb voor `rooster.io` gekozen voor `Jade`. `Jade` kan veel handige dingen zoals het importeren van templaten in een ander templaat, waardoor je een project modulair kan aanpakken. Laten we eens bekijken hoe zo'n templaat er uit ziet.
Ik voer dan voor het variabele `naam` dan de naam van de rooster opvrager. Op die manier krijg ik dus bijvoorbeeld `Hallo Bert, hoe gaat het met jou?` als het variabele naam gelijk staat aan `Bert`. Deze templaten zijn echter geschreven in een taal die dit soort vergelijkingen makkelijk leesbaar maakt voor de programeur, ik heb voor `rooster.io` gekozen voor `Jade`. `Jade` kan veel handige dingen zoals het importeren van templaten in een ander template, waardoor je een project modulair kan aanpakken. Laten we eens bekijken hoe zo'n template er uit ziet.
```jade
.bar
@ -46,11 +46,11 @@ Ik voer dan voor het variabele `naam` dan de naam van de rooster opvrager. Op di
a(href="http://git.werkmanrooster.nl/werkmanrooster/rooster-io.git", target="_blank") Recente ontwikkelingen
```
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.
Dit template 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.
Het volgende wat we gaan bekijken is de template voor het renderen van een rooster uit een database bestand.
```jade
//- Andere templaten die nodig zijn voor de pagina
include header
@ -78,7 +78,7 @@ include search
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!
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 bod!
---
[Volgende >>](/database)

5
resources/less/style.less
View file

@ -97,3 +97,8 @@ div.content {
border-color: #C5C9B8;
}
}
img {
float: left;
margin-right: 10px;
}