Nog een ronde feedback
This commit is contained in:
Bram van der Veen
parent
de2905b6cf
commit
a8dc63d298
|
|
@ -1,6 +1,6 @@
|
|||
## Conclusie en samenvatting
|
||||
---
|
||||
Nou dat was een kleine reisje wat we gemaakt hebben. We begonnen bij een broodjeszaak en we eindigen met het maken van onze eigen data gedreven applicatie. Heel veel termen, concepten en andere dingen zijn langsgekomen. We hebben ook verschillende nieuwe dingen geleerd: hoe het internet werkt, wat data gedreven applicaties zijn en hoe Werkmanrooster werkt.
|
||||
Nou dat was een kleine reisje wat we gemaakt hebben. We begonnen bij een broodjeszaak en we eindigen met het maken van onze eigen data-gedreven applicatie. Heel veel termen, concepten en andere dingen zijn langsgekomen. We hebben ook verschillende nieuwe dingen geleerd: hoe het internet werkt, wat data-gedreven applicaties zijn en hoe Werkmanrooster werkt.
|
||||
|
||||
<sup>Elk hoofdstuk heeft een aparte conclusie en het herhalen van al die conclusie is een samenvatting, vandaar dat deze onderdelen zijn samengevoegd.</sup>
|
||||
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ De eerste stap die je ziet, is dat er een variabele wordt verklaard genaamd `lis
|
|||
|
||||
Bij de declaratie van `name` bijvoorbeeld : `var name = student.split(' - ')[1]`, wat betekent dat? Het eerste gedeelte is nog wel te verklaren met wat je weet. Het variabele `name` is gelijk aan `student.split(' - ')[1]`, maar wat `.split(' - ')[1]` nou weer betekent, is je waarschijnlijk onbekend. De functie `split()` kun je zien als een soort schaar. Hij knipt namelijk op een gegeven punt (dat word doorgegeven tussen de haakjes) en geeft een dataobject terug waar een zin in stukjes zit. Dit is heel erg handig als je kijkt naar de lijst aan de linker kant. Je ziet dat elke keer als we een `student` nemen uit `listOfStudents` dat we dan iets krijgen zoals `A6A - Bram van der Veen`. We krijgen dus de naam er uit door dit te knippen met `.split()`. Dit doen we dan met door `' - '` door te geven. Want als we zo knippen, houden we een dataobject over met `A6A` en `Bram van der Veen`. Het enige wat we dan nog moeten doen is dan de goede selecteren. Dus doen we er een `[1]` achter. Waarom `1` en niet `0`? De manier waarop computers werken, is dat ze beginnen met tellen bij `0`, en dus is `0` het eerste wat we kunnen krijgen uit een object en `1` het tweede.
|
||||
|
||||
Daar onder zien we een variabele genaamd `databaseEntry`, wat heel erg veel lijkt op het [dataobject](http://Werkmanrooster.nl/api/search?name=Bram van der Veen) uit het [archiefkast hoofdstuk](/opzoek). Dat komt omdat het gaat over hetzelfde object! De code die hier boven staat is dus verantwoordelijk voor het functioneren van rooster.io. Waar rooster.io een data gedreven applicatie is, is dit de data.
|
||||
Daar onder zien we een variabele genaamd `databaseEntry`, wat heel erg veel lijkt op het [dataobject](http://werkmanrooster.nl/api/search?name=Bram van der Veen) uit het [archiefkast hoofdstuk](/opzoek). Dat komt omdat het gaat over hetzelfde object! De code die hier boven staat is dus verantwoordelijk voor het functioneren van rooster.io. Waar rooster.io een data-gedreven applicatie is, is dit de data.
|
||||
|
||||
---
|
||||
[Volgende >>](/handenuitdemouwen)
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# Handen uit de mouwen
|
||||
---
|
||||
|
||||
We gaan samen een data gedreven applicatie maken! Je dacht misschien dat het alleen bleef bij wat vertellen en misschien een conclusie, maar ik ga een stapje verder. Jij en ik, gaan gewoon even onze handen bij elkaar steken en gewoon iets op de wereld zetten samen. Maak je maar niet te veel zorgen, ik heb het meeste werk al gedaan. We hoeven alleen de laatste handen nog te leggen, maar hier valt veel van te leren.
|
||||
We gaan samen een data-gedreven applicatie maken! Je dacht misschien dat het alleen bleef bij wat vertellen en misschien een conclusie, maar ik ga een stapje verder. Jij en ik, gaan gewoon even onze handen bij elkaar steken en gewoon iets op de wereld zetten samen. Maak je maar niet te veel zorgen, ik heb het meeste werk al gedaan. We hoeven alleen de laatste handen nog te leggen, maar hier valt veel van te leren.
|
||||
|
||||
We hebben het volgende nodig:
|
||||
* Een computer
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
# Hoe werkt Werkmanrooster?
|
||||
## of data gedreven applicaties
|
||||
## of data-gedreven applicaties
|
||||
Door B. van der Veen, Atheneum 6 2016, begeleidt door B. Gelling, N&G Profiel Wiskunde
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,29 +1,29 @@
|
|||
# In het kort - De broodjeszaak
|
||||
---
|
||||
Ik hoop dat ik je geen honger heb gegeven met deze titel, ik moet toegeven dat ik zelf ook honger kreeg toen ik dit voorbeeld bedacht.
|
||||
Laten we beginnen. Hoe Werkmanrooster werkt is vergelijkbaar met een broodjeszaak, een soort Subway. Als jij binnen komt bij een broodjeszaak, dan loop je naar de balie en bestel je een broodje. Dit broodje wordt dan vervolgens voor je gemaakt: er worden ingrediënten voorbereid en uiteindelijk op je broodje gedaan. Het broodje ingepakt in wat papier met wat servetten, daarna kan je genieten van je broodje.
|
||||
Laten we beginnen. Hoe Werkmanrooster werkt is vergelijkbaar met een broodjeszaak, een soort Subway. Als jij binnen komt bij een broodjeszaak, dan loop je naar de balie en bestel je een broodje. Dit broodje wordt dan vervolgens voor je gemaakt: er worden ingrediënten voorbereid en uiteindelijk op je broodje gedaan. Het broodje wordt ingepakt in wat papier en wat servetten, daarna kan je genieten van je broodje.
|
||||
|
||||
Dit lijkt allemaal vrij triviaal. Tuurlijk zou je zeggen, dat is inderdaad hoe een broodjeszaak werkt, dat hoef je me niet uit te leggen. Meeste mensen zullen ook vragen wat dit nou te maken heeft met Werkmanrooster. Een goede vraag om te stellen. Het is namelijk zo dat Werkmanrooster en heel veel andere websites, apps en programma's op een soortgelijke manier werken. Laten we kort kijken wat je doet bij Werkmanrooster om je rooster te krijgen.
|
||||
Dit lijkt allemaal vrij triviaal. Natuurlijk zou je zeggen, dat is inderdaad hoe een broodjeszaak werkt, dat hoef je me niet uit te leggen. De meeste mensen zullen ook vragen wat dit nou te maken heeft met Werkmanrooster. Een goede vraag om te stellen. Het is namelijk zo dat Werkmanrooster en heel veel andere websites, apps en programma's op een soortgelijke manier werken. Laten we kort kijken wat je doet bij Werkmanrooster om je rooster te krijgen.
|
||||
|
||||
Je gaat naar [Werkmanrooster.nl](http://Werkmanrooster.nl) en typt je naam in bij de zoekbalk die je ziet. Werkmanrooster zoekt het rooster voor je op, en verwerkt de informatie tot een leesbaar rooster. Je ziet dat de webpagina voor je geladen wordt en je rooster verschijnt zo voor je neus met wat stijlvol webdesign.
|
||||
Je gaat naar [Werkmanrooster.nl](http://werkmanrooster.nl) en typt je naam in bij de zoekbalk die je ziet. Werkmanrooster zoekt het rooster voor je op, en verwerkt de informatie tot een leesbaar rooster. Je ziet dat de webpagina voor je geladen wordt en je rooster verschijnt zo voor je neus met wat stijlvol webdesign.
|
||||
|
||||
Laten we nu de broodjeszaak met Werkmanrooster vergelijken.
|
||||
|
||||
| Stap | Broodjeszaak | Werkmanrooster |
|
||||
| :--: | ------------ | -------------- |
|
||||
|1| Je vraagt naar je broodje | Je vraagt naar je naam
|
||||
|2| Ingredienten worden verwerkt (klaargemaakt) | [Je rooster informatie wordt verwerkt](http://Werkmanrooster.nl/api/search?name=Bram%20van%20der%20Veen)|
|
||||
|3| De ingredienten worden op je broodje gedaan| Je rooster informatie wordt gesorteerd in een leesbaar rooster|
|
||||
|4| Je broodje word ingepakt in wat papier en wat servetten| [Je rooster verschijnt voor je neus met wat stijlvol webdesign](http://Werkmanrooster.nl/rooster/Bram%20van%20der%20Veen)|
|
||||
|2| Ingredienten worden verwerkt (klaargemaakt) | [Je rooster informatie wordt verwerkt](http://werkmanrooster.nl/api/search?name=Bram%20van%20der%20Veen)|
|
||||
|3| De ingrediënten worden op je broodje gedaan| Je rooster informatie wordt gesorteerd in een leesbaar rooster|
|
||||
|4| Je broodje word ingepakt in wat papier en wat servetten| [Je rooster verschijnt voor je neus met wat stijlvol webdesign](http://werkmanrooster.nl/rooster/Bram%20van%20der%20Veen)|
|
||||
|
||||
Je ziet dat er in beide gevallen sprake is van opvragen.
|
||||
Er is beide gevallen sprake van het verwerken van grondstoffen, of het nou ingredienten zijn of informatie van een rooster.
|
||||
Er is in beide gevallen sprake van het verwerken van grondstoffen, of het nou ingrediënten zijn of informatie van een rooster.
|
||||
De verwerkte grondstoffen worden van vervolgens samengevoegd totdat het een geheel vormt.
|
||||
Het uiteindelijk geheel word ingepakt om het gebruiksvriendelijker te maken.
|
||||
|
||||
---
|
||||
|
||||
## Hoe werktmanrooster
|
||||
## Hoe werktmanrooster?
|
||||
|
||||
Tijd om ons los te maken van de broodjes en de lekkere dingen. Tijd voor wat details, we gaan nu elke stap weer langs van rooster.io. Klik op de kopjes om alvast naar het bijhorende hoofdstuk te gaan.
|
||||
|
||||
|
|
@ -31,13 +31,13 @@ Tijd om ons los te maken van de broodjes en de lekkere dingen. Tijd voor wat det
|
|||
Voordat je naar de website gaat zijn er een paar dingen die gebeuren tussen jouw computer en het internet. Je typt `Werkmanrooster.nl` in, in je adresbalk. Vervolgens word je gestuurd naar de website. Wat de meeste mensen niet weten is dat er aardig wat processen zijn verlopen in de tijd dat jij op enter hebt gedrukt en wanneer de webpagina voor jou laadt.
|
||||
|
||||
## [Rooster.io gaat een match zoeken van je zoekopdracht.](/opzoek)
|
||||
Nadat je naam is opgevraagd bij rooster.io gaat de webapplicatie bezig met het vergelijken van jou zoekopdracht met een database vol met informatie van leerlingen, docenten, klassen en lokalen. Als het een overeenkomst vind met jouw zoekopdracht en een stuk informatie in de database, dan wordt die informatie vervolgens gebruikt voor het maken van een rooster.
|
||||
Nadat je naam is opgevraagd bij rooster.io gaat de webapplicatie bezig met het vergelijken van jou zoekopdracht met een database vol met informatie van leerlingen, docenten, klassen en lokalen. Als het een overeenkomst vindt met jouw zoekopdracht en een stuk informatie in de database, dan wordt die informatie vervolgens gebruikt voor het maken van een rooster.
|
||||
|
||||
## [Het verkrijgen en verwerken van het rooster](/verkrijgen).
|
||||
In deze stap gaat rooster.io bezig met het gebruiken van de gevonden informatie om een rooster op te halen. Hij doet dit door het downloaden van een rooster aan de hand van de informatie die hij heeft verkregen in de database. Vervolgens wordt deze informatie verwerkt zodat het laten zien kan worden op een webpagina.
|
||||
In deze stap gaat rooster.io bezig met het gebruiken van de gevonden informatie om een rooster op te halen. Hij doet dit door het downloaden van een rooster aan de hand van de informatie die hij heeft verkregen uit de database. Vervolgens wordt deze informatie verwerkt zodat het laten zien kan worden op een webpagina.
|
||||
|
||||
## [Het renderen van het rooster](/renderen).
|
||||
Maar hoe zorgen we ervoor dat [dit](http://Werkmanrooster.nl/api/schedule?name=Bram%20van%20der%20veen) er uit gaat zien als [dat](http://Werkmanrooster.nl/rooster/Bram van der Veen)?
|
||||
Het laatste deel van de rooster.io weg is het geven van de informatie in de vorm van een webpagina. Het verwerkte rooster uit de vorige stap word gestopt in een voorontworpen templaat en word vervolgens gestuurd naar de gebruiker.
|
||||
## [Het renderen van het rooster](/templates).
|
||||
Maar hoe zorgen we ervoor dat [dit](http://werkmanrooster.nl/api/schedule?name=Bram%20van%20der%20veen) er uit gaat zien als [dat](http://werkmanrooster.nl/rooster/Bram van der Veen)?
|
||||
De laatste stap van rooster.io is het geven van de informatie in de vorm van een webpagina. Het verwerkte rooster uit de vorige stap word gestopt in een voor-ontworpen templaat en word vervolgens gestuurd naar de gebruiker.
|
||||
|
||||
[Volgende](/intypen)
|
||||
[Volgende >>](/intypen)
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ Dit is dan ook de reden dat ik mijn profielwerkstuk hierover schrijf. Ik vind he
|
|||
|
||||
Sinds het mijn beurt was om Werkmanrooster te beheren, zijn er al veel versies van langsgekomen.
|
||||
Dit profielwerkstuk gaat over mijn tweede versie van Werkmanrooster, genaamd [rooster.io](http://github.com/96aa48/rooster.io). Dit is de versie van Werkmanrooster die iedereen heeft gebruikt voor de laatste twee jaar.
|
||||
In dit profielwerkstuk gaan we samen opzoek naar de antwoorden op vragen zoals: hoe werkt het internet en hoe werken data gedreven applicaties? Maar ook vooral waar het hele profielwerkstuk over gaat: hoe werkt Werkmanrooster?
|
||||
In dit profielwerkstuk gaan we samen op zoek naar de antwoorden op vragen zoals: hoe werkt het internet en hoe werken data-gedreven applicaties? Maar ook vooral waar het hele profielwerkstuk over gaat: hoe werkt Werkmanrooster?
|
||||
|
||||
---
|
||||
[Volgende >>](/moeilijkheidsgraad)
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
# Je gaat naar de website - Telefoonboek
|
||||
---
|
||||
Iedereen gebruikt het internet dagelijks, en vaak zonder te weten wat er eigenlijk allemaal gebeurd achter de schermen. Een van de dingen die vrijwel het vaakste word uitgevoerd is het gaan naar een website. Wat veel mensen niet weten is dat het internet net zo werkt als dat wij onze telefoons gebruiken.
|
||||
Iedereen gebruikt het internet dagelijks en vaak zonder te weten wat er eigenlijk allemaal gebeurd achter de schermen. Een van de dingen die vrijwel het vaakste word uitgevoerd is het gaan naar een website. Wat veel mensen niet weten is dat het internet net zo werkt als dat wij onze telefoons gebruiken.
|
||||
|
||||
Wanneer jij je beste vriend of vriendin wil bellen toets je niet hun naam in je telefoon in, maar hun telefoonnummer. Het internet bestaat uit vergelijkbare nummers genaamd `ip`-addressen. `ip`-addressen zijn het fundament van hoe computers met elkaar communiceren. Elke computer, smartphone en laptop die verbonden is met een netwerk heeft een `ip` adres. Websites hebben ook een `ip` adres. Een `ip` adres kan van `0.0.0.0` tot `255.255.255.255` varieren. Maar hoe weet jouw computer nou welk ip adres hij moet hebben? Dat gaat via het `DNS` systeem. `DNS` staat voor 'Domain Name System', wat dat systeem doet is het vertalen van een 'domain name', zoals `Werkmanrooster.nl`, naar een `ip` adres (`85.214.232.210`).
|
||||
Wanneer jij je beste vriend of vriendin wil bellen toets je niet hun naam in, maar zijn of haar telefoonnummer. Het internet bestaat uit vergelijkbare nummers genaamd `IP`-addressen. `IP`-addressen zijn het fundament van hoe computers met elkaar communiceren. Elke computer, smartphone en laptop die verbonden is met een netwerk heeft een `IP` adres. Websites hebben ook een `IP` adres. Een `IP` adres kan van `0.0.0.0` tot `255.255.255.255` varieren. Maar hoe weet jouw computer nou welk `IP` adres hij moet hebben? Dat gaat via het `DNS` systeem. `DNS` staat voor 'Domain Name System'.
|
||||
Wat dat systeem doet is het vertalen van een 'domain name', zoals `Werkmanrooster.nl`, naar een `IP` adres (`51.254.227.21`).
|
||||
|
||||
Op deze manier weet jouw computer waar hij moet zijn voor Werkmanrooster. Dit is handiger dan het `ip` adres uit je hoofd leren!
|
||||
Op deze manier weet jouw computer waar hij moet zijn voor Werkmanrooster. Dit is handiger dan het `IP` adres uit je hoofd leren!
|
||||
|
||||
---
|
||||
[Volgende >>](/opzoek)
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
# Moeilijkheidsgraad
|
||||
---
|
||||
## ELI5
|
||||
Als je naar de titel van deze pagina kijkt dan denk je zeker, wat is dit nou weer voor een rare term. Vast voor iets gerelateerd aan programmeren of zo iets moeilijks. Gelukkig voor jou, de lezer, is dat het omgekeerde. ELI5 is een term die is onstaan voor het makkelijker te begrijpen van moeilijke begrippen. Het staat letterlijk voor "Explain Like I'm 5". ELI5 word vaak gebruikt in online gemeenschappen om te vragen naar de meeste makkelijk begrijpbare uitleg van een begrip, namelijk een uitleg die je zou geven aan een vijf jarige. Dit is om ervoor te zorgen dat mijn uitleg voor iedereen begrijpbaar zou moeten zijn. Bij elke pagina zal het van makkelijk naar steeds moelijker gaan verlopen om het zo goed mogelijk uit te leggen.
|
||||
Als je naar de titel van deze pagina kijkt dan denk je zeker, wat is dit nou weer voor een rare term. Vast voor iets gerelateerd aan programmeren of zo iets moeilijks. Gelukkig voor jou, de lezer, is dat het omgekeerde. ELI5 is een term die is onstaan voor het makkelijker te begrijpen van moeilijke begrippen. Het staat letterlijk voor "Explain Like I'm 5". ELI5 word vaak gebruikt in online gemeenschappen om te vragen naar de meeste eenvoudige uitleg van een begrip; namelijk een uitleg die je zou geven aan een vijf jarige. Dit is om ervoor te zorgen dat mijn uitleg voor iedereen begrijpbaar zou moeten zijn. Bij elke pagina zal het van makkelijk naar steeds moelijker gaan verlopen om het zo goed mogelijk uit te leggen.
|
||||
|
||||
Mocht je de uitdaging aan willen om meer inzicht te krijgen in Werkmanrooster, dan daag ik je uit om de [code](http://github.com/96aa48/rooster.io) te lezen. Gelukkig heb ik rekening gehouden met potentiele lezers van de code. De code is goed gedocumenteerd met verschillende "comments" aangeduid met `//` en `/*`. Het is namelijk ook belangrijk dat je code leesbaar blijft voor mensen, naast de code optimaliseren voor computers voor maximale effeci"entie.
|
||||
Mocht je de uitdaging aan willen gaan om meer inzicht te krijgen in Werkmanrooster, dan daag ik je uit om de [code](http://github.com/96aa48/rooster.io) te lezen. Gelukkig heb ik rekening gehouden met potentiële lezers van de code. De code is goed gedocumenteerd met verschillende "comments" aangeduid met `//` en `/*`. Het is namelijk ook belangrijk dat je code leesbaar blijft voor mensen, naast de code optimaliseren voor computers voor maximale effeciëntie.
|
||||
|
||||
---
|
||||
## Rooster.io en code
|
||||
|
||||
Werkmanrooster is meer dan alleen wat webpagina's met roosters. Werkmanrooster is een kleine data-gedreven-webapplicatie. Dit wil zeggen dat Werkmanrooster zijn functioneren volledig afhangt van de data die ze heeft. Werkmanrooster is geschreven in verschillende programeertalen in de vorm van `code`. `Code` is een manier om een computer te laten weten wat hij moet doen. Dit klinkt allemaal heel moeilijk, maar het is niets meer dan een manier voor programeurs te communiceren met computers. Wees vooral niet bang om wat nieuws te leren, want ik moet helaas soms de 'naakte' code laten zien om deze uitleggen.
|
||||
Werkmanrooster is meer dan alleen wat webpagina's met roosters. Het is een kleine data-gedreven webapplicatie. Dit wil zeggen dat het functioneren deze webapplicatie volledig afhangt van de data die ze heeft. De webapplicatie is geschreven in verschillende programeertalen in de vorm van `code`. `Code` is een manier om een computer te laten weten wat hij moet doen. Dit klinkt allemaal heel moeilijk, maar het is niets meer dan een manier voor programmeurs om te communiceren met computers. Wees vooral niet bang om wat nieuws te leren, want ik moet helaas soms de 'naakte' code laten zien om deze uitleggen.
|
||||
|
||||
De `code` die we nu kort gaan bekijken is geschreven in de taal "`Javascript`" soms verkort naar "`js`". `Javascript` is een van de makkelijkste talen om op te pakken en er is snel dingen mee te maken die werken. `Javascript` wordt vaak gebruikt voor het toevoegen van interactiviteit aan webpagina's of soms wel voor een heel project. `Javascript` (maar ook andere programeertalen) zijn geschreven zodat er op verschillende manieren aan de computer duidelijk gemaakt kan worden wat de programeur de computer wil laten doen. Dit wordt vaak gedaan met het gebruik van zogenaamde "`keywords`". Dit zijn dingen zoals "`var`" voor het defineren van een variabele, "`function`" voor het defineren van een functie (vergelijkbaar met een wiskundige functie) nog veel meer. Ook word er met code sommige afwegingen gemaakt. Denk dan vooral aan het nakijken van dingen. Hoe dit word beschreven in `code` is te herkennen van wiskunde bijvoorbeeld de `<`, `>` en `=` tekens.
|
||||
De `code` die we nu kort gaan bekijken is geschreven in de taal `Javascript` soms verkort naar `JS`. `Javascript` is een van de makkelijkste talen om op te pakken en er zijn snel dingen mee te maken die werken. `Javascript` wordt vaak gebruikt voor het toevoegen van interactiviteit aan webpagina's of soms wel voor een heel project. `Javascript` (maar ook andere programeertalen) zijn geschreven zodat er op verschillende manieren aan de computer duidelijk gemaakt kan worden wat de programmeur de computer wil laten doen. Dit wordt vaak gedaan met het gebruik van zogenaamde `keywords`. Dit zijn dingen zoals `var` voor het definiëren van een variabele, `function` voor het definiëren van een functie (vergelijkbaar met een wiskundige functie) en nog veel meer. Ook word er met code sommige afwegingen gemaakt. Denk dan vooral aan het nakijken van dingen. Hoe dit word beschreven in `code` is te herkennen van wiskunde bijvoorbeeld de `<`, `>` en `=` tekens.
|
||||
|
||||
Laten we kijken naar een klein stukje code met verschillende `keywords` en een afweging, aangegeven met het `keyword` `if`. De dingen tekst die volgt na de `//` word genegeerd door de computer, dit is om opmerkingen achter te laten aan potentiele lezers.
|
||||
Laten we kijken naar een klein stukje code met verschillende `keywords` en een afweging, aangegeven met het `keyword` `if`. De tekst die volgt na de `//` word genegeerd door de computer, dit is om opmerkingen achter te laten aan potentiële lezers.
|
||||
|
||||
```javascript
|
||||
//Defineer het variabele fount_students en geef het een waarde van 10.
|
||||
//Defineer het variabele aantalStudenten en geef het een waarde van 10.
|
||||
var aantalStudenten = 10;
|
||||
|
||||
//We weten dat aantalStudenten 10 is. 10 is groter dan 1, dus deze afweging klopt.
|
||||
|
|
|
|||
|
|
@ -19,12 +19,12 @@ Werkmanrooster beschikt over een grote archiefkast van leerlingen, docenten, kla
|
|||
Rooster: roosters5.gepro-osi.nl/roosters/rooster.php?school=934&type=Leerlingrooster&afdeling=l_atheneum 6&leerling=16374
|
||||
```
|
||||
|
||||
Wat de secretaresse doet is elk bestand bij langs gaan en dit vergelijken met jouw zoekopdracht. Als jij vraagt naar "Bram" dan zal ze alle Brammen pakken. Vraag jij bijvoorbeeld naar "Atheneum 6" dan zal zij alle bestanden pakken die uit Atheneum 6 komen. Mocht ze alleen maar een bestand vinden bij de zoekopdracht, dan stuurt ze het gevonden bestand naar haar collega die het rooster zal opzoeken en uitprinten.
|
||||
Wat de secretaresse doet is elk bestand langs gaan en dit vergelijken met jouw zoekopdracht. Als jij vraagt naar "Bram" dan zal ze alle Brammen pakken. Vraag jij bijvoorbeeld naar "Atheneum 6" dan zal zij alle bestanden pakken die uit Atheneum 6 komen. Mocht ze alleen maar één bestand vinden bij de zoekopdracht, dan stuurt ze het gevonden bestand naar haar collega die het rooster zal op zoeken en uitprinten.
|
||||
|
||||
---
|
||||
|
||||
## Zoeken naar een naald in een naaldberg
|
||||
Bij het intypen van `Bram van der Veen` zal rooster.io [de informatie](http://Werkmanrooster.nl/api/search?name=Bram van der Veen) vinden die daar bij hoort. Je ziet een duidelijke overeenkomst tussen het onder weergeven database bestand en het bestand van de archiefkast. Het verschil zijn wat vreemde tekens in en rond de informatie. Wat betekent dit allemaal?
|
||||
Bij het intypen van `Bram van der Veen` zal rooster.io [de informatie](http://werkmanrooster.nl/api/search?name=Bram van der Veen) vinden die daar bij hoort. Je ziet een duidelijk overeenkomst tussen het databestand hieronder weergegeven en die van de archiefkast. Het verschil zijn wat vreemde tekens in en rond de informatie. Wat betekent dit allemaal?
|
||||
|
||||
```javascript
|
||||
//In dit voorbeeld heeft naam_voor_de_data, de waarde "data".
|
||||
|
|
@ -35,9 +35,9 @@ Bij het intypen van `Bram van der Veen` zal rooster.io [de informatie](http://We
|
|||
}
|
||||
```
|
||||
|
||||
Wat we hier zien is ook een soort van `code`. Het is misschien niet direct een manier van vertellen wat een computer moet doen, maar een manier waarop code informatie kan vasthouden en organiseren. De structuur (of syntax) is vergelijkbaar met die van `Javascript`, dat klopt ook zeker. Dit is namelijk een dataobject genoteerd in zogenaamd "**J**ava**s**cript **O**bject **N**otation", `JSON` in het kort. Eigenlijk staat er precies hetzelfde als in het bestand uit de archiefkast, maar er zijn wat tekens aan toegevoegd zodat de computer het kan lezen.
|
||||
Wat we hier zien is ook een soort van `code`. Het is misschien niet direct een manier van vertellen wat een computer moet doen, maar een manier waarop code informatie kan vasthouden en organiseren. De structuur (of syntax) is vergelijkbaar met die van `Javascript`, dat klopt ook. Dit is namelijk een dataobject genoteerd in zogenaamd "**J**ava**s**cript **O**bject **N**otation", `JSON` in het kort. Eigenlijk staat er precies hetzelfde als in het bestand uit de archiefkast, maar er zijn wat tekens aan toegevoegd zodat de computer het kan lezen.
|
||||
|
||||
rooster.io werkt hier net zoals de secretaresse. Hij gaat alle bestanden bij langs om te kijken of jouw zoekopdracht overeenkomt met een van de vele bestanden in de database. Zo'n bestand ziet er zo uit:
|
||||
Rooster.io werkt hier net zoals de secretaresse. Hij gaat alle bestanden langs om te kijken of jouw zoekopdracht overeenkomt met een van de vele bestanden in de database. Zo'n bestand ziet er zo uit:
|
||||
```javascript
|
||||
//Een dataset voor de zoekopdracht "Bram van der Veen"
|
||||
{
|
||||
|
|
@ -54,7 +54,7 @@ rooster.io werkt hier net zoals de secretaresse. Hij gaat alle bestanden bij lan
|
|||
"url": "roosters5.gepro-osi.nl/?school=934&type=Leerlingrooster&afdeling=l_atheneum 6&leerling=16374"
|
||||
}
|
||||
```
|
||||
Het bestand is eigenlijk een groep variabeles die het systeem bij langs gaat. In dit geval komt `Bram van der Veen` overeen met de waarde van het variabele `name`. Maar hetzelfde geld als ik bijvoorbeeld alleen `Bram` of `van der Veen` intyp, het systeem zal alleen [meerdere ](http://Werkmanrooster.nl/api/search?name=Bram)[mensen](http://Werkmanrooster.nl/api/search?name=van der Veen) vinden met dezelfde waardes.
|
||||
Het bestand is eigenlijk een groep variabelen die het systeem langs gaat. In dit geval komt `Bram van der Veen` overeen met de waarde van het variabele `name`. Maar hetzelfde geld als ik bijvoorbeeld alleen `Bram` of `van der Veen` intyp, het systeem zal alleen [meerdere ](http://werkmanrooster.nl/api/search?name=Bram)[mensen](http://werkmanrooster.nl/api/search?name=van der Veen) vinden met dezelfde waardes.
|
||||
Als rooster.io meerdere mensen vindt voor dezelfde zoekopdracht dan maakt hij een lijst zodat de gebruiker kan kiezen uit welk van de mensen hij of zij het rooster wil zien. Als er maar één persoon gevonden wordt dan gaat rooster.io verder met de volgende stap, het rooster verkrijgen en verwerken.
|
||||
|
||||
[Volgende >>](/verkrijgen)
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ Hoe een template werkt, is te vergelijken met wiskundige formules. Je hebt gewoo
|
|||
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 template, waardoor je een project modulair kan aanpakken. Laten we eens bekijken hoe zo'n template 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 programmeur, 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
|
||||
|
|
@ -48,7 +48,7 @@ Ik voer dan voor het variabele `naam` dan de naam van de rooster opvrager. Op di
|
|||
|
||||
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.
|
||||
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 ëlementen". 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 template voor het renderen van een rooster uit een database bestand.
|
||||
```jade
|
||||
|
|
@ -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 bod!
|
||||
Dan is er nog `each`. `each` is een keyword waarmee de programmeur 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)
|
||||
|
|
|
|||
|
|
@ -11,13 +11,13 @@ Om terug te komen op het archiefkast voorbeeld, gaan we verder met de volgende b
|
|||
Soort: Leerling
|
||||
Rooster: roosters5.gepro-osi.nl/roosters/rooster.php?school=934&type=Leerlingrooster&afdeling=l_atheneum 6&leerling=16374
|
||||
```
|
||||
Hij bekijkt het bestand en richt zich gelijk op de laatste waarde van het bestand `Rooster`. Hier staat namelijk een link achter met de locatie van jouw rooster. Hij gaat naar die link en print de webpagina uit. Vervolgens pakt hij het papier met jouw rooster en knipt elk uur uit en zet het rooster opnieuw in elkaar. Hij doet dit met allemaal andere handige dingen, en hij maakt de opmaak ook wat duidelijker. Dit is allemaal om de gebruiksvriendelijkheid te verbeteren.
|
||||
Hij bekijkt het bestand en richt zich gelijk op de laatste waarde van het bestand `Rooster`. Hier staat namelijk een link achter met de locatie van jouw rooster. Hij gaat naar die link en print de webpagina uit. Vervolgens pakt hij het papier met jouw rooster en knipt elk uur uit en zet het rooster opnieuw in elkaar. Hij doet dit met allemaal andere handige dingen en hij maakt de opmaak ook wat duidelijker. Dit is allemaal om de gebruiksvriendelijkheid te verbeteren.
|
||||
|
||||
---
|
||||
|
||||
## Data verkrijgen en algoritmes
|
||||
Rooster.io gaat ook verder, door het bestand uit de database te verwerken. Hij doet hetzelfde als de collega in het verhaal hierboven. Hij knipt en plakt het rooster in een nieuw jasje. Maar dan op een geprogrameerde en effici"ente manier.
|
||||
Rooster.io gaat ook verder, door het bestand uit de database te verwerken. Hij doet hetzelfde als de collega in het verhaal hierboven. Hij knipt en plakt het rooster in een nieuw jasje. Maar dan op een geprogrameerde en efficiënte manier.
|
||||
|
||||
Hij gaat naar de link die is gegeven in het bestand en download het daar gevonden rooster als tekstbestand. Vervolgens gaat hij door dit tekstbestand heen om het rooster uit te vissen. Hij leest dit bestand volgens een bepaald algoritme. Dit algoritme is voorgeprogrameerd om bepaalde informatie er uit te halen. De informatie die verkregen word uit de webpagina is bijvoorbeeld de rooster informatie. Dit zijn dingen zoals welke uren je welke lessen hebt met welke docenten en in welk lokaal. Het algoritme verkrijgt ook informatie zoals het naam van het rooster. Hij vertaalt dan deze door mensen te lezen informatie, in een soortgelijk [database bestand](http://Werkmanrooster.nl/api/schedule?name=16374) zodat een computer het kan lezen. Het verschil in database bestanden tussen een rooster en die van een leerling, is het verschil van inhoud. Een database bestand van een leerling houdt informatie vast over de leerling, terwijl een database bestand van een rooster informatie vasthoud over een specifiek rooster. Nu moet er van dit database bestand een webpagina gemaakt worden.
|
||||
Hij gaat naar de link die is gegeven in het bestand en download het daar gevonden rooster als tekstbestand. Vervolgens gaat hij door dit tekstbestand heen om het rooster uit te vissen. Hij leest dit bestand volgens een bepaald algoritme. Dit is een soort algoritme wat voorgeprogrameerd is om bepaalde informatie uit tekstbestanden te halen. De informatie die verkregen word uit de webpagina is bijvoorbeeld de rooster informatie. Dit zijn dingen zoals welke uren je welke lessen hebt met welke docenten en in welk lokaal. Het algoritme verkrijgt ook informatie zoals de naam van het rooster. Hij vertaalt dan deze door mensen te lezen informatie, in een soortgelijk [database bestand](http://werkmanrooster.nl/api/schedule?name=16374) zodat een computer het kan lezen. Het verschil in database bestanden tussen een rooster en die van een leerling, is het verschil van inhoud. Een database bestand van een leerling houdt informatie vast over de leerling, terwijl een database bestand van een rooster informatie vasthoud over een specifiek rooster. Nu moet er van dit database bestand een webpagina gemaakt worden.
|
||||
|
||||
[Volgende >>](/templates)
|
||||
|
|
|
|||
Loading…
Reference in a new issue