Software Development 2025
Hierin worden onderwijsblokken ontwikkeld voor de MBO opleiding Software Development.
- Programma
- Introductie
- Blok 1 van Scratch naar Python
- Blok 2 - Retro gaming with Python
- Blok 3 - Web Front End
- Blok 4 - Back End / PHP
- Blok 5 - Database en JS (DOM)
- Blok 6 - Databases / PDO
- Blok 7 - Intro Frameworks en Deployement
- Blok 8 - OOP
- Prompt Engineering 4
- Voorbeeld advanced Prompting
- Cyber Security 1
- OOP
- OOP Challenge
- OOP Inheritance
- Kennis Check Blok 8
- PHP - Debuggen
- Unit Testen (py)
- Cyber Security 2
- DigitalSkills-01
Programma
jaar 1
Periode 1 |
Periode 2 | Periode 3 | Periode 4 | ||||
Blok 1 | Blok 2 | Blok 3 | Blok 4 | Blok 5 | Blok 6 | Blok 7 | Blok 8 |
Scratch -> Python |
Retro Gaming Python |
Front End CSS |
Back End PHP |
JavaScript | Databases |
Deployement en FrameWorks |
Security en |
Scratch 1 | Vallende Stenen | HTML Phoenix | Prompt Engineering 1 | Prompt Engineering 2 | DB Design | Prompt Engineering 3 | Prompt Engineering 4 |
Scratch 2 |
Snake | CSS Phoenix | Intro Web XAMPP | JS 2 (DOM) | SQL | Deployement | Cyber Security 1 |
naar Python |
Intro AI | Intro JS Phoenix | PHP 2 | JS 3 (Dom) | PDO | CMS | OOP |
Pak de Kaas |
Snake Challenge | Portfolio Challenge | PHP Challenge | JS Challenge | Crud Challenge | Yii Intro | OOP Challenge |
Kennis-Check Blok 1 | Kennis-Check Blok 2 | Kennis-Check Blok 3 | Kennis-Check Blok 4 | Kennis-Check Blok 5 | Kennis-Check Blok 6 | Kennis-Check Blok 7 | Kennis-Check Blok 8 |
Blok 1 - van blok naar tekst
(totaal ongeveer 9-10 uur)
▶️ Scratch 1 -(block-based programmeren)
🎯 Wat ga je leren?
In Scratch 1 bouw je stap voor stap je eerste game – een doolhofspel:
-
Je ontdekt de interface: waar je blokken, sprites en kleuren checkt .
-
Je leert een sprite te laten bewegen met pijltjestoetsen of de groene vlag .
-
Daarna voeg je loops toe: code die automatisch herhaalt (handig voor lopen, dansen, geluidjes) .
-
Met if-dan logica voeg je slimme interactie toe: bijvoorbeeld, als je een muur raakt, gebeurt er iets .
-
Tot slot leer je variabelen voor je score, zodat je merkt dat je echt iets zelf aanstuurt – superpower!
Waarom dit vet is
- Je maakt écht iets: geen saaie theorie, maar een game die je zelf bouwt.
-
Visueel programmeren maakt het laagdrempelig – je ziet meteen wat er gebeurt.
-
Logisch denkwerk wordt je nieuwe skill: je splits een probleem in stukjes, bedenkt hoe je dat moet oplossen, en bouwt het.
-
Creatief bezig: je kiest sprites, kleuren, bewegingen en geluidjes – alles om jouw game uniek te maken.
Het is in totaal zo’n ±145 minuten aan opdrachten, met video’s, uitleg en toffe challenges
Onderdeel | Geschatte tijd (in minuten) |
---|---|
Uitleg en oriëntatie op interface | 20 |
Opdracht 1: Sprite laten bewegen | 15 |
Opdracht 2: Dansende sprite | 20 |
Opdracht 3: Geluid toevoegen | 15 |
Opdracht 4: Herhalen gebruiken | 20 |
Opdracht 5: Start met groene vlag | 10 |
Opdracht 6: Eigen sprite gebruiken | 20 |
Opdracht 7: Sprite reageert op toetsen | 25 |
Totaal geschat | 145 minuten |
▶️ Scratch 2 (block-based programmeren)
🎮 Bouw je eigen platformspel – net als Mario!
In deze module leer je stap voor stap hoe je je eigen platformspel maakt in Scratch – een beetje zoals Super Mario, maar dan met jouw eigen ideeën en stijl! 🧱👾
Je begint eenvoudig: een sprite die kan lopen en springen. Maar al snel voeg je muren, platforms en obstakels toe. Daarna wordt het steeds leuker (en spannender): je leert hoe je tegen monsters vecht, hoe je kunt springen tegen muren, en hoe je levels uitdagender maakt.
Wat je gaat doen
-
Sprite laten bewegen en springen
-
Platforms bouwen waar je op kunt staan
-
Obstakels toevoegen die je moet vermijden
-
Monsters laten verschijnen (en verslaan!)
-
Effecten maken zoals schade of score
-
Bij elke stap krijg je duidelijke uitleg met een video
-
Je maakt screenshots van je werk om in te leveren en punten te verdienen
Waarom dit tof is
-
Je leert hoe games echt werken
-
Je oefent met logisch denken en programmeren
-
Je gebruikt je creativiteit om het spel helemaal van jou te maken
-
Je ziet direct resultaat van wat je bouwt – dat motiveert enorm!
Deze module kost in totaal ongeveer 160 minuten
Onderdeel | Geschatte tijd (in minuten) |
---|---|
Uitleg random / willekeurige beweging | 15 |
Opdracht: sprite beweegt random | 20 |
Botsing detecteren tussen sprites | 20 |
Opdracht: reactie op botsing | 20 |
Variabele uitleg + maken van score | 20 |
Score zichtbaar maken op scherm | 10 |
Eindopdracht: game maken met score en botsing | 40 |
Testen / verbeteren van eigen game | 15 |
Totaal geschat | 160 minuten |
▶️ Van Scratch naar Python
In deze module stap je over van Scratch naar échte code in Python. Geen blokjes meer, maar zelf typen! Je leert de basis zoals inspringen, if-statements, en loops, en ontdekt hoe je een stip laat bewegen, stuiteren of zelfs een spiraal laat tekenen.
Alles gebeurt stap voor stap, met herkenbare voorbeelden uit Scratch. Je werkt in een makkelijke programmeeromgeving (Thonny), zodat je je kunt focussen op het leren.
Aan het eind kijk je terug: wat heb je geleerd, wat ging goed en wat kun je nog verbeteren?
Kortom: een supertoffe en toegankelijke eerste stap naar écht programmeren! 🧠💻
Deze module kost ongeveer 140 minuten
Onderdeel | Geschatte tijd (in minuten) |
---|---|
Uitleg overgang Scratch → Python | 15 |
Eerste turtle-voorbeeld tekenen | 15 |
Uitleg over regels code en syntax | 20 |
Opdracht: vierkant tekenen | 15 |
Uitleg en gebruik van for -loop |
20 |
Opdracht: herhaling met for -loop |
20 |
Opdracht: maak een patroon met meerdere loops | 25 |
Reflectie of bespreking | 10 |
Totaal geschat | 140 minuten |
▶️ Pak de Kaas (eenvoudig spel in Python)
In deze module leer je stap voor stap hoe je in Python een eigen game maakt. Je begint met het tonen van afbeeldingen (sprites) en leert daarna hoe je een speler laat bewegen en botsingen detecteert. Daarna voeg je extra’s toe zoals willekeurige bewegingen, een score en zelfs een tijdslimiet.
Je oefent met belangrijke programmeerconcepten zoals if-statements, loops en variabelen. Ook leer je hoe je grote problemen opsplitst in kleine stukjes code – precies zoals echte programmeurs dat doen.
Je leert dus niet alleen games maken, maar ook slim nadenken in stappen. Zo word je steeds handiger in het schrijven én begrijpen van code. 🚀💡
Deze module kost ongeveer 120 minuten
Onderdeel | Geschatte tijd (in minuten) |
---|---|
Uitleg overgang Scratch → Python | 15 |
Eerste turtle-voorbeeld tekenen | 15 |
Uitleg over regels code en syntax | 20 |
Opdracht: vierkant tekenen | 15 |
Uitleg en gebruik van for -loop |
20 |
Opdracht: herhaling met for -loop |
20 |
Opdracht: maak een patroon met meerdere loops | 25 |
Reflectie of bespreking | 10 |
Totaal geschat | 140 minuten |
Blok 2 - spelletjes in Python
(totaal ongeveer 8 - 9 uur)
▶️ Vallende Stenen (spel Python)
🧠 Tover je kennis om in een eigen game
In deze module ga je verder met wat je al hebt geleerd in Scratch en “Van Scratch naar Python”. Je gebruikt variabelen, if-statements en for-loops om een spel te maken waarin objecten vallen en botsingen plaatsvinden.
Je oefent met het lezen en aanpassen van code, zodat je snapt hoe iets werkt én hoe je het kunt verbeteren. Denk aan: voorkomen dat je speler uit beeld vliegt, of meerdere objecten tegelijk laten bewegen.
Aan het eind laat je jouw creativiteit los: voeg zelf nieuwe functies toe zoals geluiden, power-ups of een andere look. Zo maak je het spel écht van jou! 🎨🎮
Deze module kost ongeveer 120 minuten
Onderdeel | Tijd (in minuten) |
---|---|
Spelconcept begrijpen | 10 |
Speler-sprite tekenen + toetsen besturen | 20 |
Steen laten vallen vanaf random plek | 25 |
Herhalen van de val (loop gebruiken) | 15 |
Botsing detecteren | 20 |
Spel laten stoppen of levens aanpassen | 15 |
Testen en bijschaven | 15 |
(Optioneel) Extra’s zoals score of geluid | 20 |
Totaal zonder extra’s | 120 minuten |
Totaal met extra’s | 140 minuten |
▶️ Snake (spel Python)
🐍 Bouw je eigen Snake-game in Python
In deze module ga je aan de slag met het maken van een echte Snake-game met Pygame Zero. Je herhaalt bekende concepten, maar de opdrachten zijn wat pittiger en de code wordt langer.
Je leert nieuwe dingen, zoals hoe de slang groeit als hij iets eet – een tricky stukje logica! Aan het eind krijg je een opdracht waarbij je goed moet nadenken over een game-probleem, een mooie voorbereiding op later werk met AI en prompt engineering.
Kortom: een leuke maar uitdagende module waarin je laat zien wat je al kunt, én nieuwe skills leert! 🧠💻
Deze module kost ongeveer 160 minuten
Onderdeel | Tijd (in minuten) |
---|---|
Spelidee en opdracht begrijpen | 10 |
Basisbesturing + beweging slang | 25 |
Eten plaatsen en detectie bij aanraking | 20 |
Snake laten groeien na eten | 25 |
Zelfbotsing implementeren | 25 |
Score bijhouden | 15 |
Game-over logica (botsing muur/zelf) | 15 |
Testen, debuggen en verbeteren | 20 |
(Optioneel) Extra functies | 20 |
Totaal zonder extra’s | 155 minuten |
Totaal met extra’s | 175 minuten |
▶️ Intro AI (wat is AI en wat zijn voor- en nadelen?)
🤖 Wat is AI – en hoe gebruik je het slim?
In deze korte module ontdek je het verschil tussen klassiek programmeren (met vaste regels) en AI, die juist leert van data. Je leert welke soorten AI er zijn – zoals classificatie en voorspellen – en je denkt na over de voordelen én risico’svan AI.
Ook maak je kennis met prompt engineering: hoe stel je goede vragen aan AI om het nuttig en eerlijk te gebruiken. Deze les is een opwarmertje voor wat nog komt én een voorbereiding om AI slim in te zetten bij je Snake Challenge. 🧠⚙️
Deze module kost ongeveer 70 minuten
Onderdeel | Tijd (in minuten) |
---|---|
Klassikale uitleg en voorbeelden | 20–30 |
Video of demonstratie (indien aanwezig) | 10 |
Vragen beantwoorden en bespreken | 20–30 |
Reflectie of groepsdiscussie | 15 |
(Optioneel) korte opdracht of Kahoot | 10–15 |
Totaal | 60–90 minuten |
▶️ Snake Challenge (Python/AI challenge)
Studenten woerden in deze challange uitgedaagd om een eigen versie van hun Snake game te maken.
Deze module duurt ongeveer 120 minuten
Activiteit | Tijd (in minuten) |
---|---|
Ideeën bedenken (eventueel klassikaal) | 15 |
Eén uitbreiding kiezen en implementeren | 30–45 |
Tweede uitbreiding maken | 30–45 |
Testen, verbeteren en eventueel presenteren | 20–30 |
Totaal geschat | 100–135 minuten |
Blok 3 (web front-end)
(totaal ongeveer 8-9 uur)
▶️ HTML / Phoenix
In deze module leer je stap voor stap hoe HTML werkt. Elke les behandelt een duidelijk onderwerp, zoals de structuur van een webpagina, tekst opmaken, afbeeldingen en links toevoegen, lijsten en tabellen maken, en formulieren bouwen.
Je werkt in Phoenix Code, een makkelijke editor in je browser waar je direct kunt zien wat je maakt.
Door de opdrachten leer je niet alleen losse onderdelen, maar werk je toe naar een eigen mini-project: een persoonlijke homepage die je helemaal zelf bouwt met wat je hebt geleerd.
Deze module kost ongeveer 100 minuten
Onderdeel | Tijd (in minuten) |
---|---|
Introductie HTML + structuur uitleg | 15 |
Voorbeelden tags + experimenteren | 25 |
Werken met Phoenix (inloggen, omgeving leren) | 10 |
Opdracht: eigen pagina maken | 30–40 |
Testen en bespreken | 10–15 |
Totaal geschat | 90–105 minuten |
▶️ CSS / Phoenix
In deze module ontdek je wat CSS is en waarom het onmisbaar is om je webpagina er mooi en overzichtelijk uit te laten zien.
Je leert hoe je kleuren, lettertypes, marges, uitlijning en achtergronden aanpast, en hoe je met het box-model werkt (margin, padding, border). Ook selectors zoals element, class en ID komen aan bod, zodat je precies weet hoe je onderdelen van je site kunt stylen. Met Flexbox leer je moderne lay-outs maken die netjes meeschalen en mooi uitgelijnd zijn.
🌟 Het einddoel is dat je zelf goed uitziende, strak opgebouwde webpagina’s kunt maken met jouw eigen stijl.
Deze module kost ongeveer 100 minuten
Onderdeel | Tijd (in minuten) |
---|---|
Uitleg wat CSS is en hoe het werkt | 15 |
CSS-syntaxis + voorbeelden toepassen | 25 |
Werken met selectors | 10 |
Opdracht: bestaande HTML-pagina stylen | 30–40 |
Experimenteren en verbeteren | 10–15 |
Totaal geschat | 90–105 minuten |
▶️ Intro JS / Phoenix
🧠 In deze module duik je in de wereld van JavaScript – de taal die websites tot leven brengt.
Je leert hoe je met variabelen, functies en if/else-logica slimme en interactieve onderdelen maakt. Je gaat meteen praktisch aan de slag in de browserconsole en met HTML-bestanden, zodat je direct ziet wat jouw code doet.Laat je pagina reageren op wat de gebruiker doet, verwerk invoer uit formulieren en bouw je eigen berekeningen.
Met heldere uitleg, leuke opdrachten en reflectievragen leer je stap voor stap hoe jij een simpele website verandert in een echte interactieve webapp.
Deze module kost ongeveer 80 minuten
Onderdeel | Tijd (in minuten) |
---|---|
Uitleg wat JavaScript is en hoe het werkt | 10–15 |
Console openen en verkennen | 10 |
Voorbeelden doornemen en uitvoeren | 20 |
Opdracht: zelf experimenteren met console.log |
25–30 |
Klassikale bespreking of korte quiz | 10 |
Totaal geschat | 75–85 minuten |
▶️ Snake Challenge
De portfolio Challenge combineert persoonlijk profileren met web design en daagt de student uit een eigen portfolio te maken.
Deze module kost ongeeer 150 minute.
Onderdeel | Tijd (in minuten) |
---|---|
Opdracht lezen en onderwerp kiezen | 15 |
Schets of opzet maken | 15–20 |
HTML schrijven (structuur opzetten) | 30–45 |
CSS toevoegen en verbeteren | 30–45 |
(Optioneel) JavaScript toevoegen | 30 |
Testen en bijschaven | 20–30 |
Reflectie/samenvatting/afronding | 10–15 |
Totaal geschat (zonder JS) | 120–150 minuten |
Totaal geschat (met JS) | 150–180 minuten |
Blok 4 (web back-end)
(ongeveer 7-8 uur)
▶️ PHP - XAMPP
🧩 In deze module leer je wat het verschil is tussen frontend (wat je ziet) en backend (wat er op de server gebeurt) – een belangrijke eerste stap richting echte webontwikkeling.
💻 Je installeert tools als XAMPP en Visual Studio Code om zelf lokaal met PHP aan de slag te gaan en je code te testen. Je maakt je eerste PHP-pagina’s, werkt met variabelen en teksten, en bouwt interactieve onderdelen zoals formulieren en een kortingscalculator.
Alle oefeningen zijn praktisch en helder opgebouwd, zodat je direct merkt wat je doet én waarom. Zo leer je echt webapplicaties bouwen, van de basis tot iets dat werkt!
Deze module kost ongeveer 90 minuten
Onderdeel | Tijd (in minuten) |
---|---|
Uitleg over wat PHP is | 10–15 |
Eerste regels code schrijven en testen | 15 |
Uitleg over echo en variabelen |
15 |
Opdrachten uitvoeren (3 à 4 opdrachten) | 30–40 |
Testen, fouten zoeken en verbeteren | 10–15 |
Totaal geschat | 80–100 minuten |
▶️ Prompt Enineering
De module, "Prompt Engineering 1", dient als een handleiding voor het effectief communiceren met AI-modellen zoals ChatGPT.
🧠 In deze module leer je hoe je beter kunt communiceren met AI, zoals ChatGPT. Je ontdekt dat hoe duidelijker en specifieker je vraag is, hoe beter het antwoord dat je krijgt.
Je werkt met zes belangrijke elementen van een goede prompt: context, details, duidelijkheid, doel, vorm en toon.
✍️ Door praktische voorbeelden en opdrachten leer je hoe je deze elementen toepast om slimme, gerichte vragen te stellen. Zo haal je meer uit AI en krijg je antwoorden die echt passen bij wat jij nodig hebt – handig voor school, projecten en later werk!
De module kost ongeveer 90 minuten
Onderdeel | Tijd (in minuten) |
---|---|
Introductie prompt engineering | 10–15 |
Voorbeelden en klassikale analyse | 15 |
Tips bespreken | 10 |
Opdrachten: prompts verbeteren + AI testen | 30–40 |
Reflectie of klassikale bespreking | 10–15 |
Totaal geschat | 80–95 minuten |
▶️ PHP 2
In deze module leer je hoe je met PHP de achterkant van een website bouwt – alles wat de gebruiker niet ziet, maar wel gebeurt op de server.
Je leert veilig gegevens versturen via GET en POST, en hoe je je code slim organiseert met include en require. Met arrays en loops verwerk je makkelijk data, en met functies maak je je code herbruikbaar en overzichtelijk. Ook werk je met datum en tijd, en ontdek je hoe je sessies gebruikt om bijvoorbeeld een simpele login te maken met gebruikersgegevens.
Elke les bevat uitleg, opdrachten en reflectievragen waarmee je stap voor stap werkt aan je skills als webdeveloper.
De module kost ongeveer 90 minuten
Onderdeel | Tijd (in minuten) |
---|---|
Uitleg over formulieren in HTML | 15 |
Uitleg over $_GET en hoe data via URL binnenkomt |
15 |
Eerste voorbeeld doornemen en uitvoeren | 20 |
Opdracht uitvoeren: formulier maken + verwerken | 25–30 |
Testen, fouten oplossen, extra uitdaging | 10–15 |
Totaal geschat | 85–95 minuten |
▶️ PHP Challenge
🚀 In deze PHP Challenge laat je zien wat je hebt geleerd door zelf een mini-website te bouwen met echte backend-functies.
Je kiest zelf wat je maakt – bijvoorbeeld een persoonlijke site, quiz of simpele webshop – zolang het project maar voldoet aan de technische eisen.Denk aan meerdere PHP-pagina’s, het gebruik van formulieren, sessies, functies, arrays en loops.
Aan het eind laat je jouw project zien en reflecteer je op wat je hebt geleerd. Zo toon je niet alleen je resultaat, maar ook je groei als developer.
De module kost ongeveer 110 minuten
Onderdeel | Tijd (in minuten) |
---|---|
Uitleg opdracht en doelen begrijpen | 10–15 |
Zelf quizvragen bedenken en formulier opzetten | 20–30 |
PHP-code schrijven om antwoorden te controleren | 25–30 |
Score berekenen en tonen | 15 |
Testen, debuggen en verbeteren | 15–20 |
(Optioneel) Extra’s zoals feedback of styling | 15–20 |
Totaal geschat | 100–130 minu |
Blok 5 (web back-end 2)
▶️ Prompt Engineering 2
🧠 Deze module bouwt voort op wat je al weet over prompt engineering en neemt je mee naar geavanceerde techniekendie je helpen AI écht slim in te zetten. Je werkt aan zes praktische strategieën die niet alleen je prompts verbeteren, maar ook je probleemoplossend denken scherpen
Met per techniek handige uitleg, voorbeeldprompts en opdrachten leer je niet alleen AI te sturen, maar ook zelf kritisch na te denken – handig voor complexe taken zoals prompt engineering.
Het resultaat? Jij weet hoe je met slimme prompts AI antwoorden krijgt die aansluiten op jouw situatie en leerbehoefte. Deze module is de perfecte springplank voor je Snake Challenge en verdere AI-projecten!
▶️ JavaScript 2 (DOM)
In deze module leer je hoe je met JavaScript de DOM (Document Object Model) kunt aanpassen om je webpagina interactiever te maken.
e leert HTML-elementen selecteren (zoals met getElementById of querySelectorAll) en de inhoud en stijl ervan aanpassen via JavaScript. Je oefent met events, zoals klikken en muisbewegingen, en leert reageren op gebruikersinput met addEventListener Je maakt nieuwe elementen aan (createElement) en voegt ze toe of verwijdert ze in de DOM met appendChild, remove() of event.target. Met classList.toggle voeg je eenvoudig styling classes toe of haal je ze weg om interactie visueel te maken.
Door stap-voor-stap opdrachten bouw je van basisselectie tot volledige interactiviteit – van tekst aanpassen, elementen markeren en dynamisch toevoegen tot verwijderen en style toggles. Zo leer je hoe je JavaScript écht kan inzetten om je pagina levendiger te maken.
▶️ Javascript 3 (DOM)
In deze module duik je dieper in het DOM, een model dat jouw webpagina omzet in objecten waar JavaScript mee kan werken – de brug tussen HTML en interactieve code. Je gaat creatief aan de slag met het aanmaken, toevoegen en verwijderen van elementen (createElement, appendChild, remove()), en je leert hoe je attributen instelt of classes toggle’t voor dynamische effectjes Met opdrachten bouw je van basisselectie tot volledige interactiviteit: je markeert dingen, voegt nieuwe componenten toe of verwijdert ze, en maakt pagina’s echt levend
Het resultaat? Je krijgt niet alleen inzicht in hoe de DOM werkt, maar je krijgt ook de tools om je webpagina’s interactief te maken op een manier die echt gaat leven. Veel plezier met knutselen!
▶️ JavaScript Challenge
In deze JavaScript Challenge bouw je een volledig interactieve webapp om je front-end skills te showen.
Je laat de DOM tot leven komen met events, functies en dynamische updates op basis van user-input. Kies je eigen concept—todo-app, quiz of mini-game—zolang je CRUD-acties en strakke UX gebruikt.
Presenteer je app, reflecteer op je code en bewijs dat jij JavaScript onder de knie hebt!
Blok 6 (Database / PDO)
▶️ Database
Deze module gaat over databaseontwerp. Het leidt de student stapsgewijs door de fundamentele concepten van databases, beginnend met wat een database is en waarom deze nodig is voor het organiseren van gegevens. De module introduceert cruciale terminologieën zoals entiteiten en attributen, legt het belang uit van een Primary Key (PK) voor unieke identificatie, en behandelt 1:N-relaties en Foreign Keys (FKs) om tabellen te verbinden. Tot slot wordt dieper ingegaan op datatypen, de modellering van realistische scenario's, en de complexere N:N-relaties, waarbij het creëren van tussentabellen wordt uitgelegd voor optimale datastructuren.
▶️ SQL
In deze module ga je aan de slag met SQL en databases, zodat je leert hoe je data effectief opslaat, opvraagt en beheert.
Je start met de basis: wat SQL is en waarom het essentieel is voor het bouwen van dynamische webapplicaties. Je leert hoe je tabellen maakt en vult, hoe je specifieke gegevens ophaalt met SELECT, en hoe je data aanpast met INSERT, UPDATE en DELETE. Relaties tussen tabellen komen aan bod: je maakt query’s met JOINs om gegevens uit meerdere tabellen te combineren. Ook verdiep je je in belangrijke SQL-technieken zoals GROUP BY, WHERE, ORDER BY, en eenvoudige aggregatiefuncties zoals COUNT() en SUM().
Door praktische oefeningen leer je hoe je SQL gebruikt om echte businessvragen te beantwoorden: van rapportages maken tot data-analyse in je database.
Het doel is dat je na deze module zelfstandig databasequery’s schrijft om informatiesystemen te bouwen die écht werken – een onmisbare skill voor elke developer!
▶️ PDO
In deze module leer je werken met PDO, de moderne en veilige manier om met databases te praten in PHP. Je maakt verbinding met een database, voert queries uit en gebruikt prepared statements om SQL-injecties te voorkomen. Je oefent met data ophalen (fetch), invoegen, updaten en verwijderen – allemaal op een nette en herbruikbare manier. Ook kijk je hoe je PDO slim inzet in je eigen project, bijvoorbeeld met een klasse of in combinatie met forms.
Na deze module schrijf je zelfverzekerd veilige en nette databasecode – klaar voor het echte werk!
▶️ CRUD Challenges
In deze CRUD Challenge laat je zien wat je met PHP en PDO geleerd hebt door een werkende mini-website te bouwen – net als een echte developer.
🎯 Je kiest zelf een project, bijvoorbeeld een persoonlijke site, quiz of webshop, en bouwt dat in meerdere PHP-pagina’s. Daarbij pas je toe wat geleerd is: formulieren, arrays, loops, functies en sessies (voor inlog of winkelwagen).
Blok 7 (PHP Frameworks)
▶️ Prompt Engineering 3
Prompt Engineering 3 is een gedetailleerde handleiding voor geavanceerde prompt-technieken binnen softwareontwikkeling, specifiek gericht op het optimaliseren van interacties met AI-modellen. Het document bouwt voort op eerdere modules over basale promptkenmerken zoals context, details, duidelijkheid, doelgerichtheid, vorm en toon, en introduceert zes geavanceerde methoden. Deze omvatten het gebruiken van rollen (role prompting), het vragen om alternatieven of variaties, iteratief verbeteren van antwoorden, het toepassen van prompt templates, het stimuleren van zelfvragen (self-questioning) door de AI, en het benutten van kritiek als leermoment (prompt debugging). Het doel is gebruikers te leren hoe ze effectievere en relevantere output van AI kunnen verkrijgen door middel van strategische en kritische promptformulering.
▶️ Deployement
Deze module leidt studenten stap voor stap door het proces van het online zetten van een website of webapplicatie. Belangrijke onderwerpen zijn het verkrijgen van toegang tot PLESK, een beheerpaneel voor webhosting, het beveiligen van een domein met een SSL-certificaat voor een veilige verbinding, en het aanmaken van een FTP-account om bestanden naar de server te uploaden. Verder wordt uitgelegd hoe een database wordt aangemaakt en hoe een zelfgebouwde webapplicatie live wordt geïnstalleerd, inclusief de noodzaak om databaseverbindingen aan te passen voor de live-omgeving.
▶️ CMS
Wordpress is het meest gebruikte Content Management Systeem. Meer dan 43% van alle websites op internet draait op WordPress (stand juni 2025). In deze module leer je Wordpress installeren en daarnaast leer je alle basisconcepten van Wordpress.
▶️ Yii Intro
Deze module introduceert de basisprincipes van webapplicatieontwikkeling met behulp van het Yii2 PHP-framework. De tekst gidst de student door de installatie van Yii en essentiële tools zoals Composer en XAMPP, en demonstreert vervolgens hoe een CRUD-applicatie (Create, Read, Update, Delete) snel kan worden gegenereerd voor databasebeheer. Belangrijke concepten zoals het MVC-architectuurpatroon (Model-View-Controller) en routing worden uitgelegd, waarbij de structuur van een webapplicatie en de manier waarop URL's worden afgehandeld duidelijk worden gemaakt.
Tot slot wordt dieper ingegaan op het aanpassen van de specifieke Yii-gebruikersinterface via de Gridview-widget, waardoor de student leert hoe kolommen, labels en inhoud dynamisch kunnen worden beheerd.
Blok 8
▶️ Prompt Engineering 4
Inhoud nog nader te bepalen.
▶️ Cyber Security 1,
"Deze lessen zijn ontworpen om studenten niet alleen theoretische kennis bij te brengen, maar ook praktische vaardigheden en een kritische houding ten aanzien van digitale veiligheid."
In deze module stap je in de wereld van cybersecurity – een wereld waarin hackers, virussen en datadieven dagelijks op de loer liggen. Maar geen zorgen: jij leert hoe je je daartegen kunt verdedigen.
We beginnen met een duidelijke uitleg van de grootste gevaren op internet, zoals phishing en malware. Je ontdekt hoe eenvoudig het soms is om iemand te misleiden – en hoe jij dat dus kunt herkennen én voorkomen.
Daarna duiken we in de techniek achter veilige websites: wat doet dat slotje in je browser precies? Wat is HTTPS, en waarom zijn SSL-certificaten belangrijk? Je leert hoe versleuteling werkt, met zowel symmetrische als asymmetrische encryptie.
We laten je zien waarom wachtwoorden alleen hashen niet genoeg is – en waarom een beetje “salt” het verschil maakt tussen veilig en kwetsbaar. Ook onderwerpen als Rainbow Tables en Brute Force-aanvallen komen voorbij, mét strategieën om ze tegen te houden.
▶️ OOP
In deze module leer je het verschil tussen procedureel programmeren (zeg maar 'gewoon' programmeren) en OOP.
Deze module is een voorbereiding op het leren omgaan met Frameworks zoals Yii2, Laravel, Flask, etc. etc.
Met OOP kun je code beter organiseren, deze herbruiken en je programma makkelijker uitbreidbaar maken. Je leert complexe systemen op te splitsen in beheersbare blokken met behulp van concepten als klassen, objecten, properties en methods.
Constructors zorgen ervoor dat je automatisch waarden kunt toekennen bij het aanmaken van objecten, wat efficiëntie bevordert. Bovendien biedt encapsulation de mogelijkheid om data te beschermen, waardoor fouten worden voorkomen en je gecontroleerde toegang tot eigenschappen krijgt via getters en setters.
▶️ OOP Challenge
De OOP Challenge is een fantastische kans om jouw vaardigheden in objectgeoriënteerd programmeren (OOP) naar een hoger niveau te tillen en direct toe te passen in de praktijk. Je combineert je Cyber Security vaardigheden met de OOP vaardigheden.
Je hebt de keuze uit twee boeiende projecten; Je kunt een login systeem maken of je kunt een Complete Mobiele ToDo manager maken.
--
Introductie
1 Introductie Schooljaar & Leeromgeving
🎯 Leerdoelen
- Je weet wie je studiecoach is en wat zijn of haar taken zijn.
- Je kent de belangrijkste regels in de klas en begrijpt waarom deze er zijn.
- Je weet wat de afspraken zijn rondom te laat komen en kunt hierop reflecteren.
💡 Uitleg
In deze les leer je hoe het schooljaar is opgebouwd, wie jou gaat begeleiden, en wat we van elkaar verwachten.
We starten met de studiecoach, de regels in de klas en afspraken over te laat komen.
Jouw studiecoach is jouw eerste aanspreekpunt en hij/zij zal jou in de gaten houden en met jouw in gesprek gaan als dingen (dreigen) mis te lopen.
Je ziet je studiecoach in principe minimaal twee maal per week in de de studiecoachingsuren.
🛠️ Opdracht
- Vraag aan je docent of medestudent: Wie is jouw studiecoach?
- Noem twee taken van de studiecoach.
🧠 Reflectie
- Waarom is het handig om een vaste studiecoach te hebben?
- Wat zou jij aan jouw studiecoach kunnen vragen?
📤 Inleveren
- Schrijf de naam van jouw studiecoach op in een .txt- of .pdf-bestand.
- Noem twee taken van de studiecoach in datzelfde bestand.
2 Opbouw van het eerste jaar
🎯 Leerdoelen
- Je weet hoe het eerste studiejaar is opgebouwd.
- Je weet hoe de blokken, kennischecks en herkansingen werken.
- Je weet wat er gebeurt als je achterloopt of als je wilt versnellen.
💡 Uitleg
Het eerste jaar bestaat uit 4 onderwijsperiodes van ongeveer 8 tot 10 weken. In elke periode werk je aan 2 blokken van het vakgebied software development. Na een jaar heb je dus 8 blokken afgerond.
Elk blok wordt afgesloten met een kennis-check. Ongeveer twee weken later is er een herkansing mogelijk. Het hoogste cijfer telt als je eindcijfer voor het blok.
Minimaal 55% is nodig om een blok voldoende af te ronden. Wil je versnellen, dan heb je minimaal 65% nodig op je kennis-check.
Na elk blok kijkt je studiecoach hoe je ervoor staat. Er zijn drie situaties mogelijk:
- 📈 Je ligt op schema: Je volgt gewoon het programma.
- 📉 Je loopt achter: Je krijgt verplichte extra lessen om weer bij te komen.
- 🚀 Je ligt op schema en wilt versnellen: Geef dit aan bij je studiecoach. Er wordt dan besproken of je daarvoor in aanmerking komt. Voorwaarden zijn o.a. dat je geen achterstand hebt en meer dan voldoende scoort.
Elke periode is dus een moment van evaluatie en eventueel bijsturen. Zo zorgen we ervoor dat jij het maximale uit je studie haalt.
🛠️ Opdracht
- Hoeveel blokken zijn er in totaal in het eerste jaar?
- Wanneer krijg je een tweede kans voor een kennis-check?
- Wat moet je minimaal scoren om een blok voldoende af te ronden?
- Wat gebeurt er als je achterloopt met je blokken?
- Wat moet je doen als je sneller door je opleiding wilt?
🧠 Reflectie
- Wat vind jij van het systeem met blokken en kennis-checks?
- Wat is voor jou een haalbaar doel: op schema blijven of versnellen? Waarom?
📤 Inleveren
- Beantwoord de vijf opdrachtvragen en de twee reflectievragen in een tekstbestand (.txt of .pdf) en lever dit in via de leeromgeving.
3 Regels in de klas
🎯 Leerdoelen
- Je kent de belangrijkste gedragsregels in de klas.
- Je begrijpt waarom deze regels belangrijk zijn voor een goede leeromgeving.
- Je kunt de link leggen tussen klasregels en professioneel gedrag op de werkvloer.
💡 Uitleg
In de klas gelden duidelijke afspraken die bijdragen aan een fijne en productieve sfeer. Deze regels lijken misschien streng, maar ze bereiden je voor op de beroepspraktijk waar ook structuur, respect en samenwerking belangrijk zijn.
- 📵 Geen mobieltjes
- 🚫 Niet eten in de les
- 🧥 Jassen uit bij binnenkomst
- 🎧 Oortjes uit (alleen bij zelfstandig werken toegestaan)
- 🤝 Actief meedoen en elkaar helpen
🛠️ Opdracht
- Kies twee regels uit het rijtje hierboven.
- Leg in je eigen woorden uit waarom jij deze regels belangrijk vindt.
- Geef bij elk van de twee regels een voorbeeld van hoe deze regel ook in een werksituatie zou gelden.
🧠 Reflectie
- Welke regel vind jij het meest logisch, en waarom?
- Wat doe jij als iemand zich niet aan de regels houdt?
📤 Inleveren
- Verwerk jouw antwoorden en reflectie in een tekstbestand (.txt of .pdf).
4 Te laat komen
🎯 Leerdoelen
- Je kent de regels rondom te laat komen.
- Je begrijpt waarom deze regels bestaan en hoe ze bijdragen aan een goed leerklimaat.
- Je kunt reflecteren op je eigen punctualiteit en hoe je daarmee omgaat.
💡 Uitleg
Te laat komen heeft gevolgen voor jezelf, je klasgenoten en de docent. Daarom zijn er duidelijke afspraken gemaakt:
- 🚪 Je streeft ernaar om 100% op tijd aanwezig te zijn.
- 📍 Bij te laat komen meld je je eerst bij de receptie.
- 🚫 De deur gaat dicht bij aanvang van de les en pas na 30 minuten weer open.
- 📌 Wacht bij de lockers of in de hal – niet voor het lokaal.
- 📧 Bij 5 keer te laat worden je ouders geïnformeerd (als je jonger bent dan 18).
- 📉 Bij 10 keer te laat volgt een gesprek met de opleidingsmanager.
🧠 Reflectie
- Welke regels zou jij de meeste moeite mee hebben en waarom?
- Wat vind jij de beste regel en waarom?
- Bekijk de afspraken welke afspraak vind je onlogisch en waarom?
- Wat zou jij doen als je vaak te laat komt, maar er een goede reden voor is?
📤 Inleveren
- Beantwoord de reflectievragen in een tekstbestand (.txt of .pdf).
5 Verzuim en vervolgacties
🎯 Leerdoelen
- Je begrijpt wat ongeoorloofd verzuim is.
- Je weet wat de standaard en mogelijke acties zijn bij verzuim.
- Je begrijpt waarom aanwezigheid belangrijk is voor jouw studie en toekomst.
💡 Uitleg
Als je zonder geldige reden afwezig bent, spreken we van ongeoorloofd verzuim. De opleiding houdt dit bij en onderneemt acties om je te helpen op tijd weer aan te haken.
Standaard acties
- Na 9 uren ongeoorloofd verzuim (in 4 weken):
Gesprek met je studiecoach + aantekening in je dossier.
Indien je <18 bent: ouders krijgen een brief. - Na 16 uren ongeoorloofd verzuim (in 4 weken):
Melding bij leerplicht of RMC.
Opnieuw een gesprek met je studiecoach + aantekening in je dossier.
Indien je <18 bent: ouders krijgen een brief.
Mogelijke vervolgacties
- Je wordt in contact gebracht met de GGD schoolarts.
- Er kan een huisbezoek volgen door een ARBO-dienst.
- Je kunt worden doorverwezen naar het LEC (ondersteuningscentrum).
🛠️ Opdracht
- Wat zijn de standaard stappen als je vaak ongeoorloofd afwezig bent?
- Noem één reden waarom het belangrijk is dat dit bijgehouden wordt.
🧠 Reflectie
- Wat zou jij doen als je weet dat je een tijdje niet naar school kunt komen?
- Wat vind jij van de regel om bij 16 uur verzuim te melden bij leerplicht?
📤 Inleveren
- Beantwoord de opdracht en de twee reflectievragen in een .txt- of .pdf-bestand.
6 Ziektemelding en verlofregels
🎯 Leerdoelen
- Je weet hoe je verlof moet aanvragen voor verschillende situaties.
- Je begrijpt het verschil tussen medische afspraken, officiële instanties en overmacht.
- Je kunt uitleggen waarom het belangrijk is om je op tijd af te melden.
💡 Uitleg
Als je een afspraak hebt waardoor je (deels) niet aanwezig kunt zijn op school, dan moet je dit melden. Dit verlof moet vóór 8:30 uur telefonisch worden doorgegeven via de voicemail van het MBO Amstelland College.
MBO College Amstelland: 020-5791299, optie 1.
Afhankelijk van de soort afspraak gelden er verschillende regels:
- Medisch (zoals ziek, tandarts, huisarts):
→ Meld via voicemail. Vanaf 18 jaar doe je dit zelf, anders via je ouders. - Overmacht (zoals ziek kind, waterschade thuis):
→ Meld via voicemail. Vanaf 18 jaar zelf, anders via je ouders. - Afspraak met officiële instanties (zoals ambassade, rechtszaak, paspoort ophalen):
→ Overleg met je SLB’er. Die overlegt met de zorgcoördinator. - Ziekenhuisopname:
→ Zo snel mogelijk melden bij de zorgcoördinator en je SLB’er. - Ziek tijdens schooldag:
→ Eerst een verlofformulier halen bij de receptie, laten tekenen door de zorgcoördinator, en weer inleveren bij de receptie. - Verlof bij verhuizing, uitvaart, huwelijk of rijexamen:
→ Uiterlijk 4 schoolweken van tevoren aanvragen via een Eduarteformulier bij je SLB’er. Deze overlegt met de zorgcoördinator.
🛠️ Opdracht
- Stel: je moet naar de tandarts en je bent 17 jaar. Wat doe je?
- Stel: je moet een paspoort ophalen bij de gemeente. Wat is dan de juiste procedure?
- Je ouders gaan trouwen in het buitenland. Hoe regel je dit verlof?
- Wat doe je als je op school plots ziek wordt?
🧠 Reflectie
- Waarom is het belangrijk om je op tijd af te melden bij afwezigheid?
- Welke risico's loop je als je zonder melding afwezig bent?
📤 Inleveren
- Beantwoord de vier opdrachtvragen en de twee reflectievragen in een .txt- of .pdf-bestand.
7 Communicatie via Teams
🎯 Leerdoelen
- Je weet via welk kanaal er binnen de school wordt gecommuniceerd.
- Je kent de regels en verwachtingen rondom bereikbaarheid van docenten en SLB’ers.
- Je kunt op een professionele manier communiceren via Teams.
💡 Uitleg
Binnen onze school gebruiken we Microsoft Teams voor alle communicatie tussen studenten en docenten.
- 📅 Docenten zijn alleen bereikbaar op schooldagen via Teams.
- ⏳ Een studiecoach probeert binnen één schooldag te reageren. Maar soms lukt dat niet meteen. Je mag gerust na een dag vriendelijk vragen of je bericht al is gezien.
Voorbeeld: "Beste .... heeft u al tijd gehad om naar mijn vraag over ...... te kijken?" - 📬 Stuur je een bericht naar een andere docent (die niet jouw les geeft of SLB’er is), dan geldt: houd rekening met een reactietijd van een week. Pas na een week kun je een vriendelijke reminder sturen.
- 🚫 Gebruik geen “??” of andere dwingende berichten. Dit wordt als onprofessioneel beschouwd.
Een nette en duidelijke communicatie helpt jou én je docent verder. Het lijkt misschien formeel, maar het is goede voorbereiding op de beroepspraktijk.
🛠️ Opdracht
- Stel: je hebt op dinsdagmiddag een vraag gesteld aan je SLB’er. Het is woensdagmiddag en je hebt nog geen reactie. Wat doe je?
- Stel: je wilt een vraag stellen aan een docent van een ander vak. Hoe lang moet je wachten voordat je een herinnering mag sturen?
- Je hebt een docent een bericht gestuurd en je bent ongeduldig. Je wilt “??” sturen. Wat kun je beter doen?
🧠 Reflectie
- Wat vind jij van de regel om een week te wachten op een reactie van een andere docent?
- Wat is voor jou een goede balans tussen geduld en doorvragen?
📤 Inleveren
- Beantwoord de drie opdrachtvragen en de twee reflectievragen in een .txt- of .pdf-bestand.
8 Verantwoordelijkheid & Studiehouding
🎯 Leerdoelen
- Je begrijpt wat er van jou wordt verwacht als student op het MBO.
- Je kunt uitleggen waarom verantwoordelijkheid nemen belangrijk is voor je succes.
- Je kunt voorbeelden geven van goed studiegedrag.
💡 Uitleg
Op het MBO verwachten we dat je zelfstandig leert werken, maar dat betekent niet dat je er alleen voor staat. Verantwoordelijkheid nemen betekent dat je zelf op tijd aan de bel trekt als iets niet lukt of als je hulp nodig hebt. Ook betekent het dat je je werk plant, aanwezig bent, je best doet en afspraken nakomt.
Een goede studiehouding helpt je niet alleen nu, maar ook straks op je stage en werk. Daar wordt van je verwacht dat je zelf initiatief neemt, op tijd komt, goed samenwerkt, en openstaat voor feedback.
🛠️ Opdracht
- Geef drie voorbeelden van verantwoordelijk gedrag op school.
- Geef een voorbeeld van een situatie waarin je hulp zou kunnen vragen aan je studiecoach of docent.
- Bedenk een situatie waarin je motivatie een dipje heeft. Wat zou jij dan doen?
🧠 Reflectie
- Wat vind jij lastig aan verantwoordelijkheid nemen voor je eigen studie?
- Wat is voor jou een goede manier om gemotiveerd te blijven als het even tegenzit?
📤 Inleveren
- Beantwoord de drie opdrachtvragen en de twee reflectievragen in een tekstbestand (.txt of .pdf) en lever deze in via de leeromgeving.
9 Voorbereiding op de kennischeck
Bekijk onderstaande vragen en antwoorden om je goed voor te bereiden op de kennistoets over het introductieprogramma en de leeromgeving.
👤 Wat is de rol van jouw studiecoach?
Je studiecoach is je eerste aanspreekpunt op school. Hij of zij begeleidt je studievoortgang, bespreekt problemen en helpt je als dingen niet goed gaan. Je ziet je studiecoach minimaal twee keer per week.
📚 Hoe is het eerste leerjaar opgebouwd?
Het jaar bestaat uit 4 perioden van 8-10 weken. In elke periode werk je aan 2 blokken. In totaal zijn er dus 8 blokken in het eerste jaar.
📈 Wanneer heb je een herkansing voor een kennis-check?
Na elke blok is er een kennis-check. Ongeveer 2 weken later is er een herkansing. Het hoogste cijfer van de twee telt.
✅ Wat is het minimumcijfer om een blok voldoende af te ronden?
Je moet minimaal 55% halen op je kennis-check of herkansing om een blok af te ronden.
🚀 Wat moet je doen als je sneller wilt studeren?
Je geeft dit aan bij je studiecoach. Die bespreekt of je voldoet aan de voorwaarden: minimaal 65% scoren, geen achterstand en deelname aan een extra les.
📵 Waarom zijn er klasregels zoals geen telefoons of jassen aan?
Deze regels zorgen voor rust, respect en concentratie in de les. Ze bereiden je voor op professioneel gedrag in de werkomgeving.
⏰ Wat zijn de afspraken rond te laat komen?
Je meldt je eerst bij de receptie. De deur gaat dicht bij aanvang van de les en pas na 30 minuten weer open. Bij herhaald te laat komen worden ouders of de manager ingeschakeld.
📉 Wat gebeurt er bij ongeoorloofd verzuim?
Bij 9 uur verzuim volgt een gesprek met je studiecoach. Bij 16 uur wordt leerplicht of RMC geïnformeerd. Er zijn ook vervolgacties mogelijk zoals contact met GGD of ARBO.
📞 Hoe meld je je ziek of vraag je verlof aan?
Je belt voor 8:30 uur naar het nummer van MBO College Amstelland. De procedure verschilt per situatie (bijv. medisch, overmacht, officiële instanties). Soms is overleg met de SLB’er of zorgcoördinator nodig.
💬 Wat zijn de regels voor communicatie via Teams?
Gebruik Teams alleen op schooldagen. Wacht 1 schooldag op je SLB’er en 1 week bij andere docenten voor je een reminder stuurt. Gebruik geen dwingende berichten zoals "??".
🧠 Wat betekent het om verantwoordelijkheid te nemen voor je studie?
Je plant je werk, komt op tijd, vraagt hulp als iets niet lukt, en houdt je aan afspraken. Zo bereid je je voor op zelfstandigheid in het werkveld.
🛠️ Opdracht
Maak nu de kennis-check. Dit is een oefening zodat je weet wat je straks kan verwachten.
Kennis-check-naam: C25.B1.01 en C25.B1.02
📤 Inleveren
Aan het einde van de kennis-check ontvang je een certificaat. Maak een schermafdruk en lever deze in.
Blok 1 van Scratch naar Python
Scratch 1
Deze pagina biedt een stap-voor-stap handleiding om te leren programmeren in Scratch door het bouwen van een doolhofspel. Je volgt de lessen door middel van uitlegvideo's, maakt opdrachten direct in Scratch en leert daarbij belangrijke programmeerconcepten zoals beweging, loops, if-then-else statements, variabelen en het resetten van de speltoestand. De cursus begeleidt je van de introductie en het opzetten van het startproject tot het afronden van je eigen unieke versie van het spel en het reflecteren op wat je hebt geleerd.
Introductie en start
Welkom! We gaan je stap voor stap helpen om Scratch te begrijpen, zodat je zelf leert programmeren. Maar wat gaan we eigenlijk doen?
Wat kun je verwachten?
- Je bekijkt korte uitlegvideo's van Felienne, een docent aan de TU Delft.
- Je maakt opdrachten direct in Scratch.
- Je leert stap voor stap hoe je een eigen doolhofspel bouwt.
Als je nog meer wilt weten van deze module dan kan je hier meer informatie vinden.
Spelregels
- Je bouwt het spel stap voor stap op. Daarna maak je je eigen variant.
- Het inleveren van andermans werk is fraude en kan ertoe leiden dat je een extra module moet doen.
- Maar het is ook écht leuk om je eigen spel te maken! Kom je er even niet uit, dan mag je natuurlijk wel een medestudent om hulp vragen.
- Voor deze opdrachten gebruiken we (nog) geen AI — dat komt later.
- Bij elke opdracht lever je iets in: soms is dat je code (of een screenshot daarvan), soms een antwoord op één of meer vragen. Ook die antwoorden schrijf je in je eigen woorden. Door zelf na te denken over de vragen, begrijp je de stof beter — en zo word je uiteindelijk een goede softwaredeveloper.
Voorbereiding: Open dit project in Scratch:
https://scratch.mit.edu/projects/96709199/#editor
(of download het bestand hier: Doolhof Start.sb3)
Taal aanpassen
Standaard staat de taal op English, deze module is in het Nederlands dus als je de taal wil aanpassen dan kan dat onder settings - laguage.
Je zou dit startscherm moeten zien:
Bekijk de uitlegvideo
In deze video legt Felienne uit wat je gaat bouwen en hoe je aan de slag kunt. Let goed op de uitleg over hoe Scratch werkt.
Alternatieve link: Klik hier als de video hierboven niet werkt
🛠️ Opdracht
Beschrijf in één zin in je eigen woorden wat je denkt dat je gaat maken.
📤 Inleveren
Typ je zin in het tekstvak hieronder. Gebruik je eigen woorden en denk aan wat je in het spel gaat bouwen.
Stap 1 – Beweging
We beginnen met de besturing van je hoofdpersonage, Giga. In deze stap leer je hoe je Giga kunt laten bewegen met de pijltjestoetsen.
Wat leer je?
- Bewegen over de X-as (links en rechts).
- Bewegen over de Y-as (omhoog en omlaag).
Bekijk de uitlegvideo
Alternatieve link: Bekijk de video via HiDrive
🛠️ Opdracht
Hoeveel richtingen kan jouw poppetje bewegen aan het einde van deze stap?
📤 Inleveren
Vul in het tekstvak in hoeveel richtingen jouw sprite beweegt.
Stap 2 – De lus (loop)
In deze stap leren we hoe je een herhaling maakt met een lus. Hiermee kun je code telkens opnieuw uitvoeren zolang een bepaalde voorwaarde klopt.
Wat leer je? Je gebruikt een herhaalblok om acties te blijven herhalen.
Bekijk de uitlegvideo
Alternatieve link: Bekijk de video via HiDrive
🛠️ Opdracht
Leg in je eigen woorden uit wat een lus (loop) doet in een programma.
📤 Inleveren
Typ je uitleg over de lus in het tekstvak.
Stap 3 – Als-dan-anders
We voegen nu logica toe: wat moet er gebeuren als iets gebeurt? Je leert nu het als-dan-anders-blok gebruiken.
Bekijk de uitlegvideo
Alternatieve link: Bekijk de video via HiDrive
🛠️ Opdracht
Wat doet een als-dan-anders (if-then-else)-blok in je code? Leg het uit in je eigen woorden.
📤 Inleveren
Typ je uitleg in het tekstvak.
Stap 4 – Terug naar startpositie
Als Giga een muur raakt, willen we dat hij teruggaat naar het begin. In deze stap leer je hoe je zijn positie reset.
Bekijk de uitlegvideo
Alternatieve link: Bekijk de video via HiDrive
🛠️ Opdracht
Welke coördinaten (X en Y) gebruikt jouw spel om Giga terug te zetten naar de start?
📤 Inleveren
Typ de X- en Y-positie in het tekstvak.
Stap 5 – De sleutel
Je spel is bijna klaar! In deze stap voeg je een sleutel toe. Als Giga deze aanraakt, is het spel gewonnen.
Bekijk de uitlegvideo
Alternatieve link: Bekijk de video via HiDrive
🛠️ Opdracht
Maak een screenshot van je hele browser waarin je de gemaakte code laat zien.
📤 Inleveren
Upload de screenshot met jouw Scratch-code.
Stap 6 – Monster toevoegen
We maken het spannend! Voeg een monster toe dat je moet ontwijken. Laat het monster bewegen.
Bekijk de uitlegvideo
Alternatieve link: Bekijk de video via HiDrive
🛠️ Opdracht
Laat het monster bewegen. Lever een screenshot in van de code die het monster laat bewegen.
📤 Inleveren
Upload de screenshot van de code van het monster.
Stap 7 – Game over
Als het monster Giga raakt, is het spel afgelopen. Je leert nu hoe je het spel opnieuw kunt laten starten.
Bekijk de uitlegvideo
Alternatieve link: Bekijk de video via HiDrive
🛠️ Opdracht
Laat zien dat Giga teruggezet wordt naar het begin wanneer hij de muur of het monster raakt.
📤 Inleveren
Lever een screenshot in van de code die dit laat zien.
Stap 8 – Alles terugzetten
Als het spel opnieuw begint, moeten zowel het monster als Giga teruggezet worden naar hun beginpositie. Pas ook de snelheid aan als het spel te moeilijk is.
Bekijk de uitlegvideo
Alternatieve link: Bekijk de video via HiDrive
🛠️ Opdracht
Pas de snelheid van het monster aan en laat zien hoe je alles terugzet.
📤 Inleveren
Lever een screenshot in van de code waarin het monster wordt teruggezet en je de snelheid hebt aangepast.
Stap 9 – Punten bijhouden
We voegen nu een score toe met behulp van een variabele.
Bekijk de uitlegvideo
Alternatieve link: Bekijk de video via HiDrive
🛠️ Opdracht
Laat zien hoe je de score bijhoudt.
📤 Inleveren
Lever een screenshot in van je code waarin je de score bijhoudt met een variabele.
Stap 10 – Afronden
We maken het spel af en zorgen dat het er goed uitziet. Je kunt je spel opslaan op je laptop of online delen.
Bekijk de uitlegvideo
Alternatieve link: Bekijk de video via HiDrive
🛠️ Opdracht
Maak het spel af, voeg iets unieks toe en sla het op.
📤 Inleveren
Lever jouw eigen unieke versie van het spel in.
Stap 11 – Wat heb je geleerd?
Je hebt veel geleerd over programmeren. Nu kijk je terug op wat je allemaal hebt gedaan.
🛠️ Opdracht
- Vraag 1: Waarvoor heb je in dit spel een lus gebruikt?
- Vraag 2: Waarvoor heb je een als-dan-anders-blok gebruikt?
- Vraag 3: Waarvoor heb je een variabele gebruikt?
📤 Inleveren
Schrijf je drie antwoorden op en lever ze in.
Scratch 2
Deze pagina biedt een reeks lessen voor het maken van een platformspel in Scratch 2, vergelijkbaar met Super Mario. De instructies leiden gebruikers stap voor stap door het proces, beginnend bij basisbeweging en voortschrijdend naar complexere elementen zoals springen op muren, het vermijden van obstakels, en het toevoegen en verslaan van monsters. Elke sectie bevat een video-tutorial, opdrachten, en vereist screenshots voor inlevering en punten.
Introductie en start
Wil je precies weten wat je in de module gaat doen, dan kan je hier meer informatie vinden.
Spelregels
Weet je nog wat de spelregels waren, deze helden nog steeds?
Aan de slag....
We slaan een paar stappen over en gaan direct aan de slag met het maken van een soort 'Mario-spel'.
We beginnen met deze 'code': Giga Platformer Start.sb3
We gaan code gebruiken die we in Scratch 1 hebben gemaakt. Hiervoor gebruiken we de 'rugzak'. Dit wordt in de video uitgelegd.
Alternatieve link: https://my.hidrive.com/lnk/ApKeEML7P
🛠️ Opdracht
Bekijk de video en laat Giga vloeiend bewegen met een herhaal-als-blok; in het als-blok herhaal je de beweging zolang de toets is ingedrukt.
📤 Inleveren
Een screenshot van je 'code'.
Springen
We gaan Giga laten springen. In de video wordt uitgelegd hoe.
Alternatieve link: https://my.hidrive.com/lnk/dHHmCfJHa
Aan het eind van de video krijg je de uitdaging om de springbeweging vloeiender te maken.
🛠️ Opdracht
Maak de springbeweging en probeer deze vloeiender te maken.
📤 Inleveren
Een screenshot van je 'code'.
Muur
We gaan een muur in het veld plaatsen en het spel zo maken dat we op de muur kunnen springen.
Bekijk de video voor instructies.
Aan het eind blijven we in de lucht hangen. Dat is niet de bedoeling. Kun jij dat oplossen?
Alternatieve link: https://my.hidrive.com/lnk/KwzJbR6t3
🛠️ Opdracht
Zorg ervoor dat Giga niet meer in de lucht blijft zweven als je springt.
📤 Inleveren
Een screenshot van je 'code'.
Niet meer door de muur
We lopen dwars door de muur heen en dat is niet de bedoeling. We gaan dat in deze stap oplossen.
Staan we op de muur, dan kunnen we opeens niet meer bewegen. Dat kun jij vast oplossen door naar de Y-positie te kijken.
Bekijk de video voor instructies.
Alternatieve link: https://my.hidrive.com/lnk/cLNtywaNd
🛠️ Opdracht
Kun jij ervoor zorgen dat Giga, als hij op de muur staat, nog steeds kan bewegen?
📤 Inleveren
Een screenshot van je 'code'.
Van links en rechts
Staan we op de muur, dan kun je nu wel bewegen omdat we met behulp van de Y-positie controleren of we op de muur staan.
Maar als we vanaf de rechterkant teruglopen, kunnen we nog door de muur heen. Kun jij dat oplossen?
Alternatieve link: https://my.hidrive.com/lnk/JYozfTzCk
🛠️ Opdracht
Kun jij ervoor zorgen dat Giga niet meer door de muur heen kan lopen als hij terugloopt?
📤 Inleveren
Een screenshot van je 'code'.
Lopen door het level
We moeten het platform laten bewegen om door het level heen te lopen. We gaan de muur laten bewegen zodat het lijkt alsof we door het level heen lopen. Dat is best een beetje ingewikkeld, want de muur moet pas bewegen als we ongeveer in het midden staan.
In de video wordt dit uitgelegd en voorgedaan.
Alternatieve link: https://my.hidrive.com/lnk/MvsuRrGFy
🛠️ Opdracht
Kun jij de muur, als die uit beeld is, opnieuw laten verschijnen?
📤 Inleveren
Een screenshot van je 'code'.
Tijd voor monsters
We gaan een 'monster' (ook wel 'vijand' genoemd) maken. Deze beweegt net als de muur, zodat het lijkt alsof je door het level loopt.
We gaan het 'monster' laten bewegen.
Alternatieve link: https://my.hidrive.com/lnk/egNP9MPj2
🛠️ Opdracht
Kun jij het monster heen en weer laten bewegen?
📤 Inleveren
Een screenshot van je 'code'.
Monster bewegen
Het monster beweegt, maar blijft nog aan de muur plakken.
Alternatieve link: https://my.hidrive.com/lnk/Z0y7vVvHj
🛠️ Opdracht
Laat het monster wachten tot de muur op positie 100 staat en laat het monster dan pas verschijnen.
📤 Inleveren
Een screenshot van je 'code'.
Game Over!
Als het monster je raakt, ben je 'af'. Als je af bent, stopt het spel.
Alternatieve link: https://my.hidrive.com/lnk/IrCnwcFwx
🛠️ Opdracht
Zet 'Game Over' in beeld als je af bent, zodat je weet dat je 'af' bent.
📤 Inleveren
Een screenshot van je 'code'.
Aanvallen
We gaan het spel zo aanpassen dat we het monster kunnen 'verslaan'.
Alternatieve link: https://my.hidrive.com/lnk/dvVi8f5dQ
🛠️ Opdracht
Als Giga tegen het monster aanloopt, is het 'Game Over', maar als je op het monster springt, moet het monster worden geplet. Schrijf hiervoor de code (tip: dit lijkt op de code van de muur waarop we kunnen springen).
📤 Inleveren
Een screenshot van je 'code'.
Monster verdwijnt
Als je het monster 'plet', wil je dat het geen 'Game Over' is. Het monster moet worden geplet en daarna verdwijnen.
We maken een aanpassing zodat het monster weer terugkomt nadat het is geplet.
Alternatieve link: https://my.hidrive.com/lnk/Eolifu5Sn
🛠️ Opdracht
Oeps, we hebben nog een bug. Het monster verschijnt weer terug, maar is nog steeds geplet. Kun jij dit oplossen?
📤 Inleveren
Een screenshot van je 'code'.
Stop als je geplet bent
We moeten ervoor zorgen dat zodra het monster is geplet, het niet meer beweegt.
Alternatieve link: https://my.hidrive.com/lnk/DSscj5iKz
🛠️ Opdracht
Kun jij het monster stilzetten zodra het is geplet?
📤 Inleveren
Een screenshot van je 'code'.
Klaar
We zijn klaar!
Alternatieve link: https://my.hidrive.com/lnk/XZVISW0jy
🛠️ Opdracht
Je hebt 12 screenshots ingeleverd. Als deze goed zijn, heb je 12 x 5 = 60 punten.
Voor een vinkje moet je 84 punten of meer hebben.
Laat het hele spel aan een docent zien. Je kunt tot 35 punten krijgen.
De docent kan vragen stellen over hoe jouw spel werkt.
Het spel moet aan de volgende voorwaarden voldoen:
Verplicht (+25 punten)
- Je kunt door het spel heen bewegen: naar links en naar rechts.
- Je kunt niet door de muur heen lopen, maar je kunt er wel op springen.
- Je hebt een monster; als je die raakt, is het 'Game Over'. Er verschijnt een 'Game Over'-melding en het spel stopt.
- Je kunt het monster pletten: je ziet het geplette monster, waarna het verdwijnt en even later weer terugkomt.
📤 Inleveren
In het tekstveld tik je in dat je klaar bent. De docent zal samen met een aantla sutdenten het werk doornemen en goedkeuren.
--
###
Youtube Links
- https://www.youtube.com/watch?v=zRWO9vWytPA
- https://www.youtube.com/w atch?v=iw7YvogC5Uo
- https://www.youtube.com/watch?v=vOAI_YY6Ntk
- https://www.youtube.com/watch?v=L8q4OR8n_yw
- https://www.youtube.com/watch?v=mluq9_b4xSI
- https://www.youtube.com/watch?v=Cg9T9HoI7tY
- https://youtu.be/jlPn-XL4T_c
- https://www.youtube.com/watch?v=CQby8IzbkZg
- https://www.youtube.com/watch?v=dM9a4XprB7o
- https://www.youtube.com/watch?v=CHWy9lLV4bA
- https://www.youtube.com/watch?v=dV4ivXfP2q0
- https://www.youtube.com/watch?v=a9ubC4LTcrs&t=3s
- https://www.youtube.com/watch?v=0xFosaKxcgY
--
Van Scratch naar Python
Status: alles uitgevoerd en getest
Deze webpagina, getiteld "Van Scratch naar Python", dient als een tutorial om beginners te helpen overstappen van de visuele programmeertaal Scratch naar de tekstgebaseerde taal Python. De lessen behandelen belangrijke programmeerconcepten zoals indentatie (hoe codeblokken worden herkend in Python), het gebruik van commentaar om code te verduidelijken, en de implementatie van if-statements voor beslissingslogica en loops (zoals for
- en while
-loops) voor herhalende acties. Door middel van praktische opdrachten met een bewegende stip (sprite) leren gebruikers deze concepten toe te passen en steeds complexere bewegingspatronen, zoals stuiteren, vierkante bewegingen en spiralen, te creëren in de Thonny Python-omgeving, waarbij ook het gebruik van de pygame
library en een specifieke scratch_lib.py
wordt uitgelegd.
0 Wat gaan we leren?
We gaan code maken.
We gaan daarvoor Python gebruiken.
Wat gaan we leren:
- waarom en hoe we inspringen in Python.
- wat commentaar in code is
- hoe we in Python een if-statement maken
- hoe we in python een loop (lus) maken
In deze lessen worden de volgende Scratch blokken in geschreven code omgezet.
IF - THEN |
IF - THEN - ELSE |
FOR LOOP (repeat) |
![]() |
🛠️ Opdracht
Leg in eigen woorden uit:
- wat is het verschil tussen een
if-then
en eenif-then-else
? - Waarvoor gebruik je een for-loop (of een repeat; dat is hetzelfde)?
Inleveren
Een antwoord op de twee vragen, in eigen woorden (geen AI)!
Maak een txt bestand en schrijf daarin je antwoorden.
1 Installatie Python (Thonny)
We hebben geprogrammeerd in Scratch en we gaan nu programmeren in een echte programmeertaal: Python.
We gaan echte code maken, maar daarvoor moeten we eerst wat zaken installeren.
We gaan gebruikmaken van Thonny
Pak het bestand uit en zet het op een plek die voor jou logisch is, bijvoorbeeld op je bureaublad.
Installatie pygame Library
Programmeertalen hebben libraries (ook wel 'packages' genoemd). Deze libraries bevatten code die jij kunt gebruiken.
Wij gaan de pygame library installeren omdat we die straks nodig hebben.
Als je Thonny opstart, ga dan naar Tools - Manage packages...
Zoek dan naar pygame
Klik op pygame en daarna op de knop Install
📥Download code
Download de code startcode-python-scratch.zip
Pak de code uit, start Thonny en open het bestand student.py
Druk op het groene 'run'-symbool en kijk wat er gebeurt.
Het programma wordt regel voor regel van boven naar beneden uitgevoerd.
ℹ️Uitleg code
Hieronder zie je de uitleg. Het kan zijn dat je niet alles in één keer begrijpt, maar probeer in ieder geval de rode uitleg te begrijpen.
Regel 1
Hier worden libraries ingeladen. Dit zijn stukjes code die al klaar zijn en die in het bestand scratch_lib.py
staan.
Regel 3
Hier wordt de sprite gemaakt en op een positie gezet. Let op dat positie (0, 0) linksboven is (en niet in het midden zoals bij Scratch).
Regel 5
Hier maken we een functie waarmee de sprite wordt bewogen. Dit is nodig om de library te kunnen gebruiken.
Regel 6
Hiermee bewegen we de sprite 10 pixels naar rechts en 0 pixels naar beneden.
Regel 7
We pauzeren een aantal frames.
Regel 9
Hiermee starten we het spel.
🛠️ Opdracht
Probeer de getallen op regel 6 eens aan te passen en kijk wat er gebeurt.
Verander de getallen zodanig dat de groene stip van linksboven diagonaal richting rechtsonder beweegt.
Inleveren
Maak een screenshot van de code die jij hebt aangepast zodat de groene stip diagonaal van linksboven naar rechtsonder beweegt.
2 De stuiterbal
In deze opdracht leer je hoe je een sprite (een groene stip) van links naar rechts kunt laten bewegen en hoe je met een if
-statement de richting verandert zodra de sprite de rechterkant van het scherm bereikt.
Begincode
Je gebruikt de volgende code als uitgangspunt:
from scratch_lib import create_sprite, move, run_animation, get_x
# Maak de sprite en zet hem links op het scherm
sprite = create_sprite("green_dot.png", 0, 300)
# Variabele om te onthouden of we naar rechts bewegen
moving_right = True
def animate():
global moving_right # We gaan deze variabele aanpassen
# Haal de huidige x-positie op
x = get_x(sprite)
# TODO: Als x groter of gelijk is aan 550, verander moving_right naar False
# if ???:
# moving_right = False
# Beweeg de sprite op basis van de richting
if moving_right:
move(sprite, 5 , 0 )
else:
move(sprite, 0 , 0 )
# Start de animatie
run_animation([sprite], animate, steps=1000)
Als je deze code uitvoert, zie je dat de groene stip van links naar rechts beweegt, maar hij stopt niet of verandert niet van richting. Hij verdwijnt uit beeld.
ℹ️ Wat is inspringen in Python?
Inspringen = blok = identation
In Python is de inspringing (ook wel indentatie genoemd) heel belangrijk. Python gebruikt inspringen om aan te geven welke code bij elkaar hoort.
Als je bijvoorbeeld eenif
-statement gebruikt, dan moet de code die daarbij hoort **een stukje naar rechts inspringen** (meestal 4 spaties).
if x >= 100:
move(sprite, 5, 0) # deze regel hoort bij het if-blok
# dit staat buiten het if-blok
print("Ik ben klaar!")
🔁 Vergelijking met Scratch
In Scratch zie je blokken zoals "als ... dan" of "herhaal ...". De blokken die in zo'n constructie staan, vallen daar letterlijk in. Ze zijn visueel naar binnen geschoven.
In Python doe je dat met spaties:
- De buitenste structuur (zoals
if
offor
) sluit je af met een dubbele punt:
. - De regels die bij dat blok horen, zet je eronder en laat je 4 spaties naar rechts inspringen.
Als je dit vergeet, krijg je in Python een foutmelding zoals:
IndentationError: expected an indented block
✅ Juiste voorbeeld
if moving_right:
move(sprite, 5 , 0 )
❌ Fout voorbeeld
if moving_right:
move(sprite, 5 , 0 )
Controleer dus goed dat de regels die bij een if
of for
horen, netjes zijn ingesprongen.
Wat gaan we doen?
We willen dat de bal van richting verandert als hij de rechterkant bereikt (bijvoorbeeld bij x = 550
).
Daarvoor heb je een paar dingen nodig:
De variabele moving_right
die onthoudt of de sprite naar rechts beweegt (True
) of niet (False
).
Een if
-statement (regel 15, 16 en 17) die controleert of de x
-waarde van de sprite groter is dan 550.
Als dat zo is, moet de sprite naar links bewegen in plaats van naar rechts (regel 19, 20, 21, 22 en 23).
De code is nog niet helemaal af.
# Commentaar
In de code zie je af en toe een hekje #
aan het begin van de regel staan.
Dit betekent dat dit commentaar is. De regel wordt niet uitgevoerd. Het dient om jou als programmeur te helpen begrijpen wat de code doet.
🛠️ Opdracht
Haal het hekje weg op regel 16 en 17, maar zorg ervoor dat de uitlijning goed blijft: voor de if
vier spaties en op de regel moving_right = False
acht spaties.
Op de plaats van de ???
plaats je nu de juiste conditie. Je vergelijkt of de x-positie van de sprite groter of gelijk is aan 550.
In Python ziet dat er als volgt uit:
if var_a >= 550:
var_a
is een variabele. Plaats deze conditie in de code en vervang var_a
door de juiste variabele die de x-positie bevat.
→ Test je code. Geen foutmeldingen? OK!
Wat gebeurt er nu als de x-positie 550 is? Precies — de bal staat stil!
Kijk nog eens goed naar het if
-statement op regel 20 t/m 23 en probeer de code aan te passen zodat de bal niet meer stil staat als hij positie 550 heeft bereikt, maar dat hij terug beweegt.
Gebruik daarna een tweede if
-statement om te bepalen hoe de sprite moet bewegen:
- Als
moving_right
True
is → beweeg naar rechts. - Anders, dus als
moving_right
False
is → beweeg naar links.
Denk eraan: een positief getal beweegt de sprite vooruit, een negatief getal beweegt hem achteruit.
Inleveren
Maak een screenshot van de aangepaste code.
3 De stuiterbal – heen en weer
In deze opdracht breiden we de vorige oefening uit. De groene stip moet nu niet alleen van links naar rechts bewegen, maar ook weer terug naar links als hij de rechterrand heeft bereikt, en daarna weer naar rechts als hij de linkerrand bereikt.
Begincode
Je gebruikt de volgende code als uitgangspunt. Deze lijkt op de vorige, maar nu gaan we twee richtingen controleren.
from scratch_lib import create_sprite, move, run_animation, get_x
# Maak de sprite en zet hem links op het scherm
sprite = create_sprite("green_dot.png", 0, 300)
# Variabele om te onthouden of we naar rechts bewegen
moving_right = True
def animate():
global moving_right
x = get_x(sprite)
# Keer om als de sprite de rechterkant raakt
if x >= 550:
moving_right = False
# TODO: Voeg hier een extra if-statement toe:
# Als de sprite aan de linkerkant is (x <= 0), dan moet moving_right weer True worden
if moving_right:
move(sprite, 5, 0)
else:
move(sprite, -5, 0)
run_animation([sprite], animate, steps=1000)
Als we een if maken dan kennen we de volgende vergelijking
== | is gelijk aan? |
< | is kleiner dan? |
> | is groter dan? |
<= | is kleiner of gelijk aan? |
>= | is groter of gelijk aan? |
!= | is ongelijk aan? |
if-then-else - Vergelijking met Scratch
If-loop
if-then-else loop
Wat moet je doen?
Je gaat nu een extra if
-statement toevoegen die controleert of de bal de linkerkant van het scherm heeft bereikt (dus bij x <= 0
).
Als dat zo is, verander dan de waarde van moving_right
weer naar True
. Daardoor beweegt de sprite weer naar rechts.
🛠️ Opdracht
- Voeg onder de eerste
if
-statement een tweedeif
-statement toe. - Controleer of
x <= 0
. - Als dat zo is, zet
moving_right = True
. - Test je code. Werkt het? Dan beweegt de bal nu heen en weer!
💡 Tip
Als je wilt, kun je bij beide if
-statements ook een print()
toevoegen, zodat je in het log kunt zien wanneer de richting verandert.
if x >= 550:
moving_right = False
print("Rechterkant bereikt – keer om")
if x <= 0:
moving_right = True
print("Linkerkant bereikt – keer om")
Inleveren
Maak een screenshot van jouw code waarin je beide if
-statements hebt toegevoegd en de sprite heen en weer beweegt.
4 De vierkante beweging
In deze opdracht leer je hoe je een sprite (de groene stip) kunt laten bewegen in de vorm van een vierkant. De sprite moet dus eerst naar rechts, dan naar beneden, dan naar links, en tot slot weer omhoog. Daarna herhaalt hij dit patroon.
Begincode
Je gebruikt de volgende code als uitgangspunt. Deze keer gaan we bijhouden in welke richting de sprite moet bewegen, en telkens van richting veranderen als hij een hoekpunt bereikt.
from scratch_lib import create_sprite, move, run_animation, get_x, get_y
# Startpositie linksboven
sprite = create_sprite("green_dot.png", 10, 10)
# We gebruiken een getal om de richting bij te houden:
# 0 = rechts, 1 = naar beneden, 2 = naar links, 3 = omhoog
richting = 0
def animate():
global richting
x = get_x(sprite)
y = get_y(sprite)
Op basis van de richting, kies hoe de sprite moet bewegen
if richting == 0: # boven naar rechts bewegen
move(sprite, 5, 0)
if x >= 550:
richting = 1 # volgende richting: aan de rechter kant naar beneden bewegen
elif richting == 1: # rechts naar beneden bewegen
move(sprite, 0, 5)
if y >= 550:
richting = 2 # volgende richting: beneden langs naar links bewegen
# ToDo maak de code hier af
# we hebben moeten nog 2 blokjes maken:
# beneden langs naar rechts bewegen
# linker kant omhoog bewegen.
# (je kunt het blokje op regel 22-25 kopiëren en aanpassen)
run_animation([sprite], animate, steps=2000)
Wat moet je doen?
In de code staat al aangegeven welke stappen moeten worden uitgevoerd. Maar niet alles is compleet.
- Controleer of je begrijpt wat de waarde van
richting
betekent. - De sprite moet telkens van richting veranderen als hij een hoekpunt van het vierkant heeft bereikt.
- De richtingsveranderingen gebeuren met behulp van een
if
ofelif
-structuur. - Pas eventueel de getallen 550 aan als jouw sprite kleiner of groter is.
🛠️ Opdracht
- Vul de
TODO
op regel 27 aan door goed te begrijpen wat elkeif
doet. - Test je code. Beweegt de sprite in een vierkant? Perfect!
Inleveren
Maak een screenshot van jouw werkende code waarin je laat zien dat de sprite een vierkant loopt.
5 Vierkant met sprongen op elke hoek
In deze opdracht ga je de sprite in een kleiner vierkant laten bewegen. Maar dat is nog niet alles: op elk hoekpunt van het vierkant springt de sprite vijf keer op en neer. Hiervoor ga je gebruikmaken van een for
-loop.
Begincode
We hebben de code voor je voorbereid zodat de sprite een kleiner vierkant loopt. Dit vierkant is 100 stappen breed en hoog. Voer deze code uit en kijk wat er gebeurt:
from scratch_lib import create_sprite, move, run_animation, get_x, get_y, force_redraw
import time
# Startpositie linksboven
sprite = create_sprite("green_dot.png", 80, 80)
# We gebruiken een getal om de richting bij te houden:
# 0 = rechts, 1 = naar beneden, 2 = naar links, 3 = omhoog
richting = 0
def animate():
global richting
x = get_x(sprite)
y = get_y(sprite)
if richting == 0: # naar rechts
move(sprite, 5, 0)
if x >= 470:
# SPRINGEN: plak hier onderstaande code
richting = 1 # volgende richting: naar beneden
elif richting == 1: # naar beneden
move(sprite, 0, 5)
if y >= 470:
# SPRINGEN: plak hier onderstaande code
richting = 2 # volgende richting: naar links
elif richting == 2: # naar links
move(sprite, -5, 0)
if x <= 80:
# SPRINGEN: plak hier onderstaande code
richting = 3 # volgende richting: naar boven
elif richting == 3: # naar boven
move(sprite, 0, -5)
if y <= 80:
# SPRINGEN: plak hier onderstaande code
richting = 0 # opnieuw naar rechts
run_animation([sprite], animate, steps=2000)
Sprongen op elk hoekpunt
Nu willen we dat de sprite op elk hoekpunt van het vierkant vijf keer op en neer springt.
Op en neer betekent dat de sprite eerst iets omhoog en dan weer omlaag beweegt. Dat doen we in een for
-loop.
🔁 Wat is een for
-loop?
Een for
-loop gebruik je in Python als je iets meerdere keren wilt herhalen. Dat kan bijvoorbeeld zijn: de sprite 5 keer naar rechts bewegen, of 10 keer springen.
🔤 De basisvorm van een for
-loop
for i in range(5):
move(sprite, 5, 0)
Wat gebeurt hier?
for i in range(5)
: dit betekent dat de code in het blok 5 keer wordt uitgevoerd.- De variabele
i
krijgt automatisch de waarden 0, 1, 2, 3 en 4 (vijf keer in totaal). - Elke keer dat de loop draait, voert Python de ingesprongen regels onder de
for
-regel uit.
🔄 Loop - Vergelijking met Scratch
In Scratch gebruik je bijvoorbeeld:
Herhaal 10 keer → [doe iets]
Dat is precies hetzelfde idee! De blokken die je in Scratch ín een herhaal-blok sleept, zijn in Python de regels die je moet inspringen (met spaties).
✅ Juiste voorbeeld
for i in range(3):
print("Hallo")
Uitvoer:
Hallo
Hallo
Hallo
ℹ️ Handig om te weten
Wil je iets 10 keer doen?
for i in range(10):
Wil je iets maar 1 keer doen? Dan heb je eigenlijk geen loop nodig 😉
🛠️ Oefening (optioneel)
Wat doet onderstaande code? Probeer het te voorspellen.
for i in range(2):
move(sprite, 0, -20)
force_redraw()
time.sleep(0.1)
move(sprite, 0, 20)
force_redraw()
time.sleep(0.1)
👉 Antwoord: de sprite springt 2 keer op en neer.
Wat moet je doen?
- Kopieer bovenstaande
for
-loop. - Plak die op vier plekken in de
animate()
-functie:- Vlak voordat
richting = 1
wordt uitgevoerd (na de rechterkant). - Vlak voordat
richting = 2
wordt uitgevoerd (na beneden). - Vlak voordat
richting = 3
wordt uitgevoerd (na links). - Vlak voordat
richting = 0
wordt uitgevoerd (na boven).
- Vlak voordat
🛠️ Opdracht
- Kopieer en plak de
for
-loop op de juiste plekken in je code (op elk hoekpunt). - Test je code. De sprite moet netjes in een vierkant bewegen en op elke hoek vijf keer op en neer springen.
Inleveren
Maak een screenshot van jouw code waarin de sprite op elk hoekpunt springt.
6 Spring vaker op twee hoeken
In deze korte opdracht breid je je bestaande script uit. De sprite moet nu alleen rechtsboven en linksonder springen, telkens vijf keer. Maar dit keer springt de sprite niet omhoog en omlaag, maar naar links en naar rechts (horizontaal).
ℹ️ Weet je nog wat inspringen is?
Inspringen = blok = identation
In Python is de inspringing (ook wel indentatie genoemd) heel belangrijk. Python gebruikt inspringen om aan te geven welke code bij elkaar hoort.
Ook bij eenfor
-statement , moet de code die daarbij hoort **een stukje naar rechts inspringen** (meestal 4 spaties).
for i in range(5):
move(sprite, 0, -20)
force_redraw()
Dus de regels 2 én 3 horen bij het for-blok en worden 5x uitgevoerd.
🔁 Vergelijking met Scratch
In Scratch zie je blokken zoals "als ... dan" of "herhaal ...". De blokken die in zo'n constructie staan, vallen daar letterlijk in. Ze zijn visueel naar binnen geschoven.
In Python doe je dat met spaties:
- De buitenste structuur (zoals
if
offor
) sluit je af met een dubbele punt:
. - De regels die bij dat blok horen, zet je eronder en laat je 4 spaties naar rechts inspringen.
Als je dit vergeet, krijg je in Python een foutmelding zoals:
IndentationError: expected an indented block
✅ Juiste voorbeeld
for i in range(5):
move(sprite, 0, -20)
force_redraw()
❌ Fout voorbeeld
for i in range(5):
move(sprite, 0, -20) # geen inspringing!
force_redraw()
Controleer dus goed dat de regels die bij een if
of for
horen, netjes zijn ingesprongen.
Wat moet je doen?
- Zoek in je code de momenten waarop de sprite de rechterbovenhoek en de linkeronderhoek bereikt.
- Op die plekken laat je de sprite 5X (in plaats van 2X) springen.
Zorg dat je deze code alleen toevoegt bij de overgang van:
-
richting == 0
→ alsy <= 80
(rechtsboven)richting == 2
→ alsy >= 470
(linksonder)
Inleveren
Maak een screenshot van de code in Thonny waarop te zien is dat de sprite alleen rechtsboven en linksonder horizontaal springt, vijf keer per keer.
7 Spiraal – stap 1
"vaste richtingen in een patroon"
In deze opdracht ga je de sprite steeds twee richtingen bewegen met een vaste afstand. Je doet dit een paar keer achter elkaar.
Uiteindelijk zal dit het begin worden van een spiraal. Maar eerst leer je het patroon maken: rechts → omlaag → links → omhoog.
📥 Begincode
from scratch_lib import create_sprite, move, pause_for_frames
sprite = create_sprite("green_dot.png", 300, 300)
# Afstand per richting
afstand = 100
# Herhaal het patroon 3 keer
for i in range(3):
# Beweeg naar rechts
for j in range(afstand // 5):
move(sprite, 5, 0)
pause_for_frames(1)
# Beweeg naar beneden
for j in range(afstand // 5):
move(sprite, 0, 5)
pause_for_frames(1)
# Beweeg naar links
for j in range(afstand // 5):
move(sprite, -5, 0)
pause_for_frames(1)
# Beweeg naar boven
for j in range(afstand // 5):
move(sprite, 0, -5)
pause_for_frames(1)
ℹ️ Uitleg
Je ziet hierboven een herhaling (een for
-loop) die het patroon van 4 richtingen 3 keer uitvoert.
Elke richting bestaat uit een eigen for
-loop waarin de sprite telkens kleine stapjes zet.
De afstand is verdeeld in blokjes van 5 pixels, zodat je het goed kunt zien bewegen.
🛠️ Opdracht
- Experimenteer met
afstand = 100
. Wat gebeurt er als je die verandert in 200? - Voeg commentaar toe bij elke richting, zodat je het patroon beter begrijpt.
- Test wat er gebeurt als je
range(3)
verandert inrange(1)
ofrange(5)
.
📤 Inleveren
Maak een screenshot van je code én van het pad dat de sprite aflegt in het venster.
8 Spiraal – stap 2
"kleiner wordende afstanden"
In de vorige opdracht heb je een patroon gemaakt: de sprite bewoog rechts, omlaag, links, omhoog – en dat een paar keer. Het pad bleef telkens even groot.
Nu gaan we iets nieuws doen: na elke twee richtingen wordt de afstand kleiner. Hierdoor lijkt het alsof de sprite langzaam een spiraal naar binnen loopt.
📥 Begincode
from scratch_lib import create_sprite, move, pause_for_frames
sprite = create_sprite("green_dot.png", 300, 300)
afstand = 200 # beginafstand
for i in range(5): # we doen 5 spiraal-lagen
# naar rechts
for j in range(afstand // 5):
move(sprite, 5, 0)
pause_for_frames(1)
# naar beneden
for j in range(afstand // 5):
move(sprite, 0, 5)
pause_for_frames(1)
afstand = afstand - 40 # we maken de afstand kleiner
# naar links
for j in range(afstand // 5):
move(sprite, -5, 0)
pause_for_frames(1)
# naar boven
for j in range(afstand // 5):
move(sprite, 0, -5)
pause_for_frames(1)
afstand = afstand - 40 # opnieuw iets kleiner maken
ℹ️ Uitleg
- We beginnen met
afstand = 200
. - Na twee richtingen verkleinen we de afstand met 40.
- Daarna bewegen we weer twee richtingen (links en boven).
- We verkleinen opnieuw met 40.
Zo wordt het pad kleiner en kleiner – alsof je een vierkante spiraal naar het midden tekent.
🛠️ Opdracht
- Pas de waarde
afstand = 200
aan. Wat gebeurt er bij 300? - Wat als je niet met 40 verkleint, maar met 20?
- Voeg een
print(afstand)
toe onder elkeafstand = afstand - 40
. Wat zie je in de console?
📤 Inleveren
Maak een screenshot van je aangepaste code én van de spiraal die de sprite tekent.
9 Spiraal – stap 3
"automatisch stoppen"
Je hebt nu al een mooie spiraal gemaakt waarbij de sprite steeds kleinere vierkantjes loopt. Maar misschien heb je gemerkt: op een gegeven moment is de afstand zo klein dat de sprite nauwelijks nog beweegt of zelfs gekke dingen gaat doen.
Daarom gaan we in deze stap zorgen dat het script zelf stopt als de afstand te klein wordt.
📥 Begincode
from scratch_lib import create_sprite, move, pause_for_frames
sprite = create_sprite("green_dot.png", 300, 300)
afstand = 200
# Herhaal zolang de afstand groter is dan 20
while afstand > 20:
# naar rechts
for j in range(afstand // 5):
move(sprite, 5, 0)
pause_for_frames(1)
# naar beneden
for j in range(afstand // 5):
move(sprite, 0, 5)
pause_for_frames(1)
afstand = afstand - 20
# naar links
for j in range(afstand // 5):
move(sprite, -5, 0)
pause_for_frames(1)
# naar boven
for j in range(afstand // 5):
move(sprite, 0, -5)
pause_for_frames(1)
afstand = afstand - 20
ℹ️ Uitleg
- In plaats van
for i in range(5)
gebruiken we nu eenwhile
-loop. - Die zorgt ervoor dat het patroon doorgaat zolang de afstand groter is dan 20.
- Als de afstand kleiner wordt dan of gelijk is aan 20, stopt de loop vanzelf.
🛠️ Opdracht
- Test de code. Kun je zien waar de sprite stopt?
- Wat gebeurt er als je de
afstand > 20
verandert inafstand > 40
? - Voeg een
print(afstand)
toe aan het einde van elke herhaling om te zien wanneer het stopt. - Kun je de sprite laten starten in het midden van het scherm in plaats van linksboven?
📤 Inleveren
Maak een screenshot van jouw spiraal die vanzelf stopt wanneer het midden bereikt is.
10 Reflectie: wat heb je geleerd?
Je hebt nu gewerkt aan meerdere opdrachten waarbij je de sprite steeds meer hebt aangestuurd met code. Je hebt geleerd hoe je met een for
-loop en if
-statements herhaling en logica kunt combineren, en je hebt een echte spiraalbeweging gemaakt in Python.
In deze laatste opdracht ga je terugkijken op je leerproces. Wat ging goed? Wat vond je moeilijk? En wat wil je nog beter leren?
ℹ️ Wat is een reflectie?
Reflecteren betekent dat je nadenkt over wat je gedaan hebt. Je kijkt niet alleen naar het resultaat, maar vooral naar hoe je het hebt aangepakt en wat je daarvan leert.
📝 Opdracht
Beantwoord de volgende vragen in een kort reflectieverslag (ongeveer 5 zinnen per vraag is voldoende):
- Wat ging goed?
Geef een voorbeeld van iets dat je zelfstandig hebt opgelost of goed begreep. - Wat vond je lastig?
Was er iets dat je niet meteen snapte? Welke opdracht kostte meer tijd dan je dacht? - Noem drie dingen die je hebt geleerd o ver Python.
Wat zijn specifieke dingen die je hebt geleerd over Python? - Wat heb je geleerd over if-statements?
Beschrijf kort wat je nu beter begrijpt over herhaling of logica in code. - Wat heb je geleerd over loops?
Beschrijf kort wat je nu beter begrijpt over herhaling of logica in code. - Wat zou je de volgende keer anders doen?
Denk aan hoe je je werk hebt aangepakt, of hoe je omging met fouten. - Waar wil je nog meer mee oefenen?
Zijn er onderwerpen waarvan je denkt: dit wil ik nóg beter snappen of meer mee oefenen? - Welke uitleg was duidelijk?
Welke opdracht(en) vond je goed uitgelegd? - Welkke uitleg was onduidelijk?
Welke opdrachten waren niet duidelijk genoeg uitgelegd en hoe zou jij het ander/beter doen?
📤 Inleveren
Lever je reflectie in als een PDF-bestand.
###
# Docenten
opdracht 4
from scratch_lib import create_sprite, move, run_animation, get_x, get_y
# Startpositie linksboven
sprite = create_sprite("green_dot.png", 10, 10)
# We gebruiken een getal om de richting bij te houden:
# 0 = rechts, 1 = naar beneden, 2 = naar links, 3 = omhoog
richting = 0
def animate():
global richting
x = get_x(sprite)
y = get_y(sprite)
# TODO: Op basis van de richting, kies hoe de sprite moet bewegen
if richting == 0: # naar rechts
move(sprite, 5, 0)
if x >= 550:
richting = 1 # volgende richting: naar beneden
elif richting == 1: # naar beneden
move(sprite, 0, 5)
if y >= 550:
richting = 2 # volgende richting: naar links
elif richting == 2: # naar links
move(sprite, -5, 0)
if x <= 0:
richting = 3 # volgende richting: naar boven
elif richting == 3: # naar boven
move(sprite, 0, -5)
if y <= 0:
richting = 0 # opnieuw naar rechts
run_animation([sprite], animate, steps=2000)
Pak de Kaas
Status: alles uitgevoerd en getest
Dit is een lessenserie over een programmeerproject met Python en Pygame Zero genaamd "Pak de Kaas". Het leidt leerlingen door zes stappen om een eenvoudig spel te maken waarin een muis kaas verzamelt. De lessen behandelen basisconcepten zoals het weergeven en verplaatsen van afbeeldingen (sprites), het detecteren van botsingen tussen objecten, het gebruik van willekeurige getallen om de kaas te verplaatsen, het bijhouden van een score en het toevoegen van een tijdslimiet voor een "Game Over" scenario. Het document bevat ook een docentenhandleiding met leerdoelen, potentiële valkuilen en suggesties voor differentiatie en beoordeling.
0 Wat gaan we leren
We gaan nog een projectje maken met Thonny (uit de vorige les) en bij dit project gaan we gebruik maken van de standaard Python library:
pgzero
Weet je nog hoe je een pacakge installeert in Thonny?
Yep, Tools - Manage Packages en dan pgzero zoeken en installeren.
Als je het niet meer weer weet kijk dan even naar de vorige les.
1 Pak de Kaas – Les 1
Je hebt pgzero in Thonny geinstalleerd? Nee kijk dan bij de vorige stap.
In deze les gaan we met Python en Pygame Zero leren hoe je plaatjes (sprites) op het scherm kunt zetten.
Je leert hoe je het scherm wist, en hoe je sprites op een bepaalde positie tekent.
Wat gaan we doen?
We gaan een muis en een stuk kaas op het scherm laten verschijnen.
Hiervoor gebruiken we screen.blit()
in de draw()
-functie van Pygame Zero.
📦 Benodigdheden
- Thonny met Pygame Zero geïnstalleerd
- Een map
images/
met daarin twee bestanden:mouse.png
encheese.png
🔰 Startercode
# importeer library
import pgzrun
# Spelgrootte
WIDTH = 800
HEIGHT = 600
def draw():
screen.clear()
screen.blit("mouse", (150, 150))
screen.blit("cheese", (50, 50))
#start programma
pgzrun.go()
ℹ️ Uitleg
- De code wordt van boven naar beneden, regel voor regel uitgevoerd.
import pgzrun
hiermee vertellen we dat de library pgrun gaan gebruiken. Sommige computer-comando's 'sdie straks gaan gebruiken staat beschreven in deze library.WIDTH
enHEIGHT
bepalen hoe groot het venster isdraw()
is een speciale functie die automatisch wordt aangeroepen om het scherm te tekenenscreen.clear()
is een library functie die het scherm bij elke frame wistscreen.blit("mouse", (150, 150))
tekent het plaatjemouse.png
op positie (150, 150). Dit zijn ook beide library functies.
🛠️ Opdracht
Pas de coördinaten van de muis en de kaas aan en kijk wat er gebeurt.
- Zet de muis linksboven in beeld
- Zet de kaas rechtonder in beeld
Wat gebeurt er als deze posities gebruikt? screen.blit("mouse", (50, 50))
screen.blit("cheese", (30, 30))
Denk na over de volgorde waarin de commando's worden uitgevoerd.
📤 Inleveren
Maak een screenshot de code met de coordinaten waarbij de muis linksboven in beeld in beeld staat en de kaas rechtsonder.
2 Beweeg de muis
In deze les gaan we de muis laten bewegen met de pijltjestoetsen.
We doen dat door de positie van de muis aan te passen telkens als een toets wordt ingedrukt.
Wat gaan we doen?
We maken twee variabelen mouse_x
en mouse_y
om de positie van de muis bij te houden.
In de functie update()
passen we deze coördinaten aan als je een pijl indrukt.
🔰 Startercode
# importeer library
import pgzrun
# Spelgrootte
WIDTH = 800
HEIGHT = 600
# Startpositie van de muis
mouse_x = 150
mouse_y = 150
def draw():
screen.clear()
screen.blit("mouse", (mouse_x, mouse_y))
screen.blit("cheese", (50, 50))
def update():
global mouse_x, mouse_y
if keyboard.left:
mouse_x -= 5
if keyboard.right:
mouse_x += 5
if keyboard.up:
mouse_y -= 5
if keyboard.down:
mouse_y += 5
#start programma
pgzrun.go()
ℹ️ Uitleg
mouse_x
enmouse_y
zijn variabelen die bijhouden waar de muis staatupdate()
wordt meerdere keren per seconde uitgevoerd- Met
keyboard.left
controleer je of de linkerpijl wordt ingedrukt - Bij elke toetsdruk wordt de positie een klein stukje aangepast
🛠️ Opdracht
- Voer de code uit en beweeg de muis met de pijltjestoetsen
- Pas de waarde
5
aan naar een groter of kleiner getal. Wat merk je? - Probeer ervoor te zorgen dat de muis niet buiten het scherm kan verdwijnen (zie extrat uitleg).
- Als de muis en de kaas op dezelfde positie staan dan verdwijnt de muis onder de kaas. Zorg ervoor dat de muis boven de kaas komt. Zoals hier is weegegven:
💡 Extra uitleg
Laat de muis niet verder bewegen als hij het scherm uit dreigt te gaan. Voeg hiervoor `if`-statements toe zoals:
if keyboard.left and mouse_x > 10:
mouse_x -= 5
Dus hier staat: las de linker pijtjes toets is ingedrukt én de x coördinaat is > 10 zet de postie van de muis dan op de huidige positie - 5. Dus trek 5 van de huisdige posite af.
Doe dit in vier stappen en test elke stap.
- Doe dit eerst voor keyboard.left en test of het werkt.
- Doe dit ook voor de keyboard.right en test of het werkt.
- Doe dit daarna ook voor de keyboard.up en test of het werkt.
- Doe dit tenslotte voor de keyboard.down en test of het werkt.
📤 Inleveren
Maak een screenshot van je aangepaste code waarbij de muis boven de kaas beweegt én
waarbij de muis niet uit het scherm kan bewegen.
3 Botsing met de kaas
In deze les gaan we kijken of de muis de kaas aanraakt.
Daarvoor gebruiken we een if
-statement en controleren we of de muis en de kaas elkaar overlappen.
Wat gaan we doen?
We maken een rechthoek rondom de muis en rondom de kaas, en gebruiken colliderect()
om te kijken of ze elkaar raken.
Als de muis de kaas raakt, tonen we een bericht in de console met print()
.
🔰 Startercode
# importeer library
import pgzrun
# Spelgrootte
WIDTH = 800
HEIGHT = 600
# Startpositie van de muis en kaas
mouse_x = 150
mouse_y = 150
cheese_x = 50
cheese_y = 50
def draw():
screen.clear()
screen.blit("mouse", (mouse_x, mouse_y))
screen.blit("cheese", (cheese_x, cheese_y))
def update():
global mouse_x, mouse_y
if keyboard.left:
mouse_x -= 5
if keyboard.right:
mouse_x += 5
if keyboard.up:
mouse_y -= 5
if keyboard.down:
mouse_y += 5
# Botsing controleren
mouse_rect = Rect((mouse_x, mouse_y), (50, 50))
cheese_rect = Rect((cheese_x, cheese_y), (100, 100))
if mouse_rect.colliderect(cheese_rect):
print("Gevonden!")
else:
print('-')
#start programma
pgzrun.go()
ℹ️ Uitleg
- Een
Rect
is een rechthoek: (x, y, breedte, hoogte) colliderect()
geeftTrue
als twee rechthoeken elkaar raken- In dit voorbeeld zijn muis 50x50 pixels en de kaas beide 100x100 pixels groot.
- Als er een botsing is, toont Python het woord
Gevonden!
🛠️ Opdracht
- Probeer de muis met de pijltjestoetsen naar de kaas te bewegen
- Als je
Gevonden!
ziet in de console, werkt de botsing - De kaas is niet helemaal 100x100 (in alle richtingen). Pas de grootte van de
Rect
aan zodat je alleen een melding "Gevonden!" krijgt als de muis duidelijk de kaas raakt en duidelijk 'op de kaas zit'. - Zorg er ook voor dat de muis op de kaas komt en niet eronder!
💡 Extra uitdaging
Toon een boodschap op het scherm als de muis de kaas heeft gevonden:
gevonden = False
def update():
...
if mouse_rect.colliderect(cheese_rect):
gevonden = True
def draw():
...
if gevonden:
screen.draw.text("Gevonden!", (350, 10), fontsize=60, color="red")
📤 Inleveren
Maak een screenshot van je console waarin je ziet dat "Gevonden!" verschijnt als de muis de kaas aanraakt.
4 Kaas verspringt
In deze les gaan we ervoor zorgen dat de kaas naar een nieuwe plek springt als de muis hem aanraakt.
We doen dat met de functie random.randint()
om een willekeurige positie te kiezen.
Wat gaan we doen?
We importeren de random
-bibliotheek en maken een functie die een nieuwe plek kiest voor de kaas.
Als er een botsing is, roepen we die functie aan en verplaatsen we de kaas.
🔰 Startercode
import random
WIDTH = 800
HEIGHT = 600
mouse_x = 150
mouse_y = 150
cheese_x = 50
cheese_y = 50
def nieuwe_kaas_plek():
x = random.randint(0, WIDTH - 64)
y = random.randint(0, HEIGHT - 64)
return x, y
def draw():
screen.clear()
screen.blit("mouse", (mouse_x, mouse_y))
screen.blit("cheese", (cheese_x, cheese_y))
def update():
global mouse_x, mouse_y, cheese_x, cheese_y
if keyboard.left:
mouse_x -= 5
if keyboard.right:
mouse_x += 5
if keyboard.up:
mouse_y -= 5
if keyboard.down:
mouse_y += 5
mouse_rect = Rect((mouse_x, mouse_y), (64, 64))
cheese_rect = Rect((cheese_x, cheese_y), (64, 64))
if mouse_rect.colliderect(cheese_rect):
cheese_x, cheese_y = nieuwe_kaas_plek()
ℹ️ Uitleg
import random
zorgt ervoor dat we willekeurige getallen kunnen gebruikenrandom.randint(a, b)
geeft een willekeurig getal tussena
enb
WIDTH - 64
zorgt ervoor dat het plaatje niet buiten beeld komt- Als de muis de kaas raakt, wordt
cheese_x
encheese_y
aangepast
🛠️ Opdracht
- Laat de muis de kaas aanraken en kijk of deze naar een nieuwe plek verspringt
- Probeer het een paar keer en kijk of het altijd binnen het scherm blijft
- Pas de afmetingen van de sprite aan als jouw plaatjes groter of kleiner zijn dan 64x64
💡 Extra uitdaging
Kies een leuk geluidseffect op : https://www.wavsource.com/sfx/sfx.htm
📁 Zet dan ook een bestand, bijvoorbeeld bloop_x.wav
in de (nieuwe) map sounds/
Voeg een geluid toe dat afspeelt als de muis de kaas raakt:
if mouse_rect.colliderect(cheese_rect):
sounds.blook_x.play()
cheese_x, cheese_y = nieuwe_kaas_plek()
📤 Inleveren
Maak een screenshot van je werkende code waar de kaas verspringt.
Leg kort uit wat random.randint()
doet en waarom je WIDTH - 64
gebruikt.
5 Score bijhouden
In deze les gaan we een score bijhouden: elke keer als de muis de kaas raakt, telt de score één punt op.
Deze score tonen we ook op het scherm.
Wat gaan we doen?
We maken een variabele score
die begint op 0 en steeds verhoogd wordt bij een botsing.
In de draw()
-functie tekenen we de score linksboven in het scherm.
🔰 Startercode
# importeer library
import pgzrun
import random
WIDTH = 800
HEIGHT = 600
mouse_x = 150
mouse_y = 150
cheese_x = 50
cheese_y = 50
score = 0
def nieuwe_kaas_plek():
x = random.randint(0, WIDTH - 64)
y = random.randint(0, HEIGHT - 64)
return x, y
def draw():
screen.clear()
screen.blit("mouse", (mouse_x, mouse_y))
screen.blit("cheese", (cheese_x, cheese_y))
screen.draw.text(f"Score: {score}", (10, 10), fontsize=40, color="white")
def update():
global mouse_x, mouse_y, cheese_x, cheese_y, score
if keyboard.left:
mouse_x -= 5
if keyboard.right:
mouse_x += 5
if keyboard.up:
mouse_y -= 5
if keyboard.down:
mouse_y += 5
mouse_rect = Rect((mouse_x, mouse_y), (64, 64))
cheese_rect = Rect((cheese_x, cheese_y), (64, 64))
if mouse_rect.colliderect(cheese_rect):
cheese_x, cheese_y = nieuwe_kaas_plek()
score += 1
#start programma
pgzrun.go()
ℹ️ Uitleg
score = 0
zet de score aan het begin op nul- Elke keer als de muis de kaas aanraakt, wordt de score verhoogd met
score += 1
screen.draw.text()
toont tekst op het scherm
🛠️ Opdracht
- Speel het spel een paar keer en kijk of de score steeds verder oploopt
- Pas de tekstkleur of positie aan van de score
- Maak de tekst groter of kleiner door
fontsize
aan te passen
💡 Extra uitdaging
Laat de kleur van de tekst veranderen bij een bepaalde score:
kleur = "black"
if score >= 5:
kleur = "red"
screen.draw.text(f"Score: {score}", (10, 10), fontsize=40, color=kleur)
📤 Inleveren
Maak een screenshot van het spel waarbij de score zichtbaar is (minimaal 3 punten).
Leg in een zinnetje uit wat score += 1
betekent.
6 Tijdslimiet
In deze les gaan we een tijdslimiet toevoegen. De speler heeft bijvoorbeeld 30 seconden om zoveel mogelijk kaas te pakken.
Aan het einde tonen we “Game Over” en stoppen we het spel.
Wat gaan we doen?
We maken een teller tijd_over
die elke seconde met 1 omlaag gaat. Als de tijd op is, stopt het spel.
We tonen de tijd linksboven in beeld naast de score.
🔰 Startercode
# importeer library
import pgzrun
import random
WIDTH = 800
HEIGHT = 600
mouse_x = 150
mouse_y = 150
cheese_x = 50
cheese_y = 50
score = 0
tijd_over = 30
game_over = False
def nieuwe_kaas_plek():
x = random.randint(0, WIDTH - 64)
y = random.randint(0, HEIGHT - 64)
return x, y
def draw():
screen.clear()
screen.blit("mouse", (mouse_x, mouse_y))
screen.blit("cheese", (cheese_x, cheese_y))
screen.draw.text(f"Score: {score}", (10, 10), fontsize=40, color="white")
screen.draw.text(f"Tijd: {tijd_over}", (10, 50), fontsize=40, color="blue")
if game_over:
screen.draw.text("Game Over", center=(WIDTH//2, HEIGHT//2), fontsize=60, color="red")
def update():
global mouse_x, mouse_y, cheese_x, cheese_y, score
if game_over:
return
if keyboard.left:
mouse_x -= 5
if keyboard.right:
mouse_x += 5
if keyboard.up:
mouse_y -= 5
if keyboard.down:
mouse_y += 5
mouse_rect = Rect((mouse_x, mouse_y), (64, 64))
cheese_rect = Rect((cheese_x, cheese_y), (64, 64))
if mouse_rect.colliderect(cheese_rect):
cheese_x, cheese_y = nieuwe_kaas_plek()
score += 1
def verlaag_tijd():
global tijd_over, game_over
if tijd_over > 0:
tijd_over -= 1
if tijd_over == 0:
game_over = True
clock.schedule_interval(verlaag_tijd, 1.0)
#start programma
pgzrun.go()
ℹ️ Uitleg
tijd_over
begint op 30 (seconden)clock.schedule_interval(verlaag_tijd, 1.0)
zorgt ervoor dat elke seconde de functieverlaag_tijd()
wordt aangeroepen- Als
tijd_over
op 0 staat, verandertgame_over
inTrue
en stopt het spel - In de
draw()
-functie tonen we de resterende tijd en, als het spel voorbij is, de tekst “Game Over”
🛠️ Opdracht deel 1
- Laat het spel lopen en probeer zoveel mogelijk punten te halen binnen de tijd
- Pas de tijd aan naar 10 of 60 seconden – wat vind je leuker?
- Laat bij “Game Over” ook de eindscore groter in beeld zien.
🛠️Opdracht deel 2 (opnieuw uitvoeren)
- Zorg ervoor dat de muis niet uit het beeld kan worden bewogen (zoals we bij opgave 2 hebben gedaan).
- Zorg ervoor dat de muis op de kaas en niet onder de kaas verdwijnt.
💡 Extra uitdaging
Voeg een herstart-mogelijkheid toe met de R
-toets:
def on_key_down(key):
global score, tijd_over, game_over, mouse_x, mouse_y, cheese_x, cheese_y
if key == keys.R:
score = 0
tijd_over = 30
game_over = False
mouse_x, mouse_y = 150, 150
cheese_x, cheese_y = nieuwe_kaas_plek()
📤 Inleveren
- Maak een screenshot van het spel als de tijd op is en je “Game Over” ziet en zet een mooie score neer!
- Bewaar je code als een bestand (in Thonny, file - save as...) en lever het .py bestand met de code in.
7 Eindopdracht
🎮 Eindopdracht
Kies één (of meerdere) van de volgende uitbreidingen en voeg die toe aan je spel:
- 🧀 Zet meerdere stukjes kaas tegelijk op het scherm (gebruik een
for
-loop) - 💣 Voeg een “giftige” kaas toe: als je die pakt, verlies je punten
- 🔊 Voeg geluiden toe voor eten, botsing of game over
- 🎨 Verander het uiterlijk van de muis of de achtergrond
- 🕒 Laat het spel moeilijker worden naarmate de tijd verstrijkt (bijv. snellere muis of bewegende kaas)
💡 Bedenk zelf ook een uitbreiding? Schrijf het plan op, laat het goedkeuren door je docent en priobeer het te maken!
Bij deze opgave mag je AI gebruiken!
📤 Inleveren
Lever één van de volgende dingen in:
- Een werkend Python-bestand (.py) waarin jouw uitbreiding is verwerkt
- Een screenshot van je spel én;
- Uitleg in tekst (.txt) wat je hebt gedaan.
8 Reflectie
In deze les kijk je terug op wat je hebt gemaakt, én krijg je de kans om je spel op een leuke manier uit te breiden of aan te passen.
🧠 Reflectie
Als je terugkijkt naar deze opgave.
Vraag je zelf de volgende dingen af:
- Wat vond je het leukste om te doen?
- Wat vond je moeilijk of lastig om te begrijpen?
- Welke onderdelen van Python begrijp je nu beter?
- Waar ben je trots op.
📤 Inleveren
- Lever je reflectie in met de antwoorden op de (reflectie) vragen in een PDF bestand.
Let op: gebruik je eigen woorden en wees specifiek!
###
# Docenten
🎓 Docentenhandleiding
📘 Overzicht
- Doelgroep: Leerlingen van 12-15 jaar (instapniveau Python)
- Duur: 6 lessen van ±45-60 minuten
- Software: Thonny + Pygame Zero
- Spelconcept: Een muis beweegt met de pijltjestoetsen en pakt steeds opnieuw verschijnende kaasjes
🎯 Leerdoelen
- Begrijpen hoe coördinaten werken in een 2D-scherm
- Gebruik van
draw()
enupdate()
in een animatie - Werken met variabelen voor positie en beweging
- Detecteren van botsingen met
Rect
encolliderect()
- Gebruik van
random
en herhaalde logica - Score bijhouden en tonen
- Reflecteren op eigen code en uitbreidingen bedenken
📚 Lesoverzicht
Les | Onderwerp | Nieuwe concepten |
---|---|---|
1 | Muis en kaas tekenen | draw() , screen.blit() , coördinaten |
2 | Muis beweegt met toetsen | keyboard.left , update() , grenzen |
3 | Botsing detecteren | Rect() , colliderect() |
4 | Kaas verspringt op random plek | random.randint() , logica |
5 | Score bijhouden | score += 1 , screen.draw.text() |
6 | Reflectie & uitbreiden | Reflecteren, creatief uitbreiden |
⚠️ Valkuilen
colliderect()
werkt niet → verkeerde grootte/positie van Rect- Sprites bewegen niet vloeiend →
update()
mistforce_redraw()
(indien nodig) - Kaas verschijnt buiten het scherm → randomwaarden buiten bereik
- Score telt verkeerd →
score += 1
buiten juisteif
-blok
🧠 Differentiatie
Voor snelle leerlingen
- Voeg meerdere stukjes kaas toe tegelijk
- Laat een “slechte” kaas verschijnen die de score verlaagt
- Gebruik afbeeldingen en laat muis draaien in richting
Voor langzamere leerlingen
- Werk eerst zonder
Rect
, laat botsing handmatig triggeren - Gebruik alleen horizontale beweging
- Geef startscripts per les met al werkende onderdelen
📊 Beoordeling (optioneel)
Criterium | Omschrijving | Score (1-5) |
---|---|---|
Spel werkt | Muis beweegt, kaas wordt gepakt, score telt | 🟩 |
Codekwaliteit | Variabelen zijn logisch, overzichtelijk | 🟩 |
Creativiteit | Leerling heeft iets extra’s toegevoegd (geluid, extra levels, design) | 🟩 |
Reflectie | Leerling beantwoordt de reflectievragen met inzicht | 🟩 |
💡 Lesaanpak & tips
- Laat leerlingen direct runnen en testen na elke wijziging
- Gebruik klassikale codebesprekingen met testvoorbeelden
- Moedig leerlingen aan om “stukjes code” zelf te veranderen
- Laat ze uitleggen wat ze doen: peer programming werkt goed bij deze opdracht
🧰 Benodigdheden
- Thonny + Pygame Zero geïnstalleerd
- Afbeeldingen: muis.png, cheese.png (optioneel)
- Toetsenbord met pijltjestoetsen
- Basiskennis Python (variabelen,
if
,def
)
Kennis-check Blok 1
Kennis-check Blok 1
Om je voor te bereiden op de multiple choice kennis-check kun je voor je zelf proberen de ondersrtaand evragen te beantwoorden.
Als je op de vraag klikt dan verschijnt het antwoord. Op die manier kun je zelf jou antwoord controleren.
Begrip je d euitleg neit, vraag dan aan de docent om extra uitleg.
Scratch 1
Wat is een lus in programmeren en waarom is het handig?
Een lus (of "loop") is een blokje in Scratch dat zorgt dat een stukje code steeds opnieuw wordt uitgevoerd. Bijvoorbeeld: als je wilt dat een sprite (Giga) blijft bewegen zolang het spel bezig is, kun je een "herhaal" of "herhaal zolang" blok gebruiken. Dit is handig, omdat je dan niet elke stap apart hoeft te programmeren – het gebeurt automatisch steeds opnieuw.
Wat is een als-dan-anders blok (if-then-else)?
Een als-dan-anders-blok in Scratch controleert of iets waar is. Als dat zo is, doet het programma het eerste stukje code. Anders doet het iets anders. Bijvoorbeeld: als de muis is ingedrukt, dan laat een sprite (Giga) iets zeggen, anders doet hij niets of zegt hij iets anders. Zo kan je programma reageren op wat er gebeurt.
Wat is een variabele en hoe kun je die gebruiken om de score bij te houden?
Een variabele is een blokje waarmee je informatie kunt opslaan, zoals een getal dat kan veranderen. In een spel kun je een variabele maken die "score" heet. Aan het begin zet je die op 0. Elke keer dat Giga bijvoorbeeld een sleutel aanraakt, verhoog je de score met 1. Zo weet het spel hoeveel punten je hebt.
Wat is het verschil tussen gewoon “als…dan” en “als…dan…anders”?
“Als…dan” voert alleen code uit als de voorwaarde waar is. Als het niet waar is, gebeurt er helemaal niks. "Als…dan…anders” voert óf de ene actie uit als de voorwaarde waar is, óf een andere actie als de voorwaarde niet waar is. Dus:
- Met “als…dan” doe je iets óf niks.
- Met “als…dan…anders” doe je altijd iets: óf de ene actie óf de andere.
Scratch 2
Wat betekent het als een sprite op x: 0 en y: 0 staat?
Dat betekent dat de sprite precies in het midden van het speelveld staat.
In Scratch is (0, 0) het middelpunt van het scherm.
- De x-coördinaat (horizontaal) is dan in het midden van links naar rechts.
- De y-coördinaat (verticaal) is in het midden van boven naar beneden.
In welke richting beweegt een sprite als je de x-coördinaat groter maakt?
Dan beweegt de sprite naar rechts.
- Hoe groter de x-waarde, hoe verder naar rechts de sprite op het scherm staat.
- Als je de x-coördinaat juist kleiner maakt, beweegt de sprite naar links.
Wat gebeurt er als je bij x een heel grote waarde gebruikt, zoals 5000?
De sprite verdwijnt buiten beeld.
- Het Scratch-scherm heeft grenzen: ongeveer van x = -240 (helemaal links) tot x = 240 (helemaal rechts).
- Als je een waarde gebruikt zoals x = 5000, dan staat de sprite ver buiten het zichtbare scherm, dus je ziet hem niet meer.
Hoe kun je zorgen dat een sprite niet buiten het scherm beweegt?
Gebruik een “als…dan”-blok om te controleren of x of y binnen een bepaalde grens.
als x-positie < 240 dan
wijzig x met 10
Van Scratch naar Python
Waarom is inspringen (indentatie) belangrijk in Python, terwijl Scratch dat niet nodig heeft?
Omdat Python aan de hand van inspringen (spaties) bepaalt welke code bij elkaar hoort.
Als je dat niet goed doet, begrijpt Python niet wat je bedoelt, en krijg je een foutmelding.
📌 Voorbeeld:
if x > 10:
print("x is groot") # ❌ fout: geen inspringing
if x > 10:
print("x is groot") # ✅ goed: ingesprongen
Leg uit wat een #
in Python doet
Een #
wordt gebruikt om commentaar toe te voegen in je code. Alles wat na het #
staat, wordt genegeerd door de computer. Het is alleen bedoeld voor de programmeur zelf, om uit te leggen wat de code doet.
📌 Voorbeeld:
# Dit is een commentaarregel
x = 5 # We geven x de waarde 5
Hoe ziet een if-then-else er uit in Python?
In Python gebruik je if
, else
(en soms elif
). De code die bij elke voorwaarde hoort moet ingesprongen staan.
📌 Voorbeeld:
if x > 10:
print("x is groter dan 10")
else:
print("x is 10 of kleiner")
Wat doet een for-loop in Python?
Een for
-loop herhaalt een blokje code een vast aantal keren.
📌 Voorbeeld:
for i in range(5):
print("Hallo")
Noem verschillen tussen Python en Scratch
Scratch | Python |
---|---|
Werkt met blokken die je sleept | Werkt met tekst die je zelf typt |
Geen spaties of haakjes nodig | Spaties en dubbele punten zijn belangrijk |
Visueel en kleurrijk | Tekstgebaseerd, je moet meer onthouden |
Makkelijk te starten zonder fouten | Foutgevoelig bij typefouten of inspringen |
Wat leert de student bij 'Pak de Kaas'?
In dit Python/Pygame Zero-project leren studenten onder andere:
- Sprites op het scherm tonen met
screen.blit()
- De muis laten bewegen via variabelen en
update()
- Botsingen detecteren tussen muis en kaas
- Willekeurige verplaatsing van de kaas met
random
- Score bijhouden bij het verzamelen van kaas
- Tijdslimiet instellen zodat het spel eindigt ("Game Over")
Hoe detecteer je dat de muis de kaas raakt?
Gebruik een if
-statement met collide
of vergelijk coördinaten van de muis en kaas, bijvoorbeeld:
if mouse_x == cheese_x and mouse_y == cheese_y:
score += 1
Waarom gebruik je willekeurige getallen bij het verplaatsen van de kaas na botsing?
Zodat de kaas steeds op een nieuwe plek verschijnt. Bijvoorbeeld met:
import random
cheese_x = random.randint(0, WIDTH)
cheese_y = random.randint(0, HEIGHT)
Wat doet random.randint()
precies?
De functie random.randint(a, b)
geeft een willekeurig geheel getal terug tussen a en b, inclusief beide grenzen.
📌 Voorbeeld:
import random
getal = random.randint(1, 10)
print(getal)
Dit print een willekeurig getal tussen 1 e
Pak de Kaas
Hoe detecteer je dat de muis de kaas raakt?
Gebruik een if
-statement met collide
of vergelijk coördinaten van de muis en kaas, bijvoorbeeld:
if mouse_x == cheese_x and mouse_y == cheese_y:
score += 1
Waarom gebruik je willekeurige getallen bij het verplaatsen van de kaas na botsing?
Zodat de kaas steeds op een nieuwe plek verschijnt. Bijvoorbeeld met:
import random
cheese_x = random.randint(0, WIDTH)
cheese_y = random.randint(0, HEIGHT)
Wat doet random.randint()
precies?
De functie random.randint(a, b)
geeft een willekeurig geheel getal terug tussen a en b, inclusief beide grenzen.
📌 Voorbeeld:
import random
getal = random.randint(1, 10)
print(getal)
Dit print een willekeurig getal tussen 1 en 10, zoals 3 of 9. Handig voor bijvoorbeeld het willekeurig verplaatsen van een sprite in een spel.
Wat gebeurt er als je de muis buiten het scherm laat bewegen?
Als je de variabelen mouse_x
of mouse_y
zo aanpast dat de sprite buiten het scherm komt, dan verdwijnt de muis uit beeld.
- Het spel zelf blijft werken, maar de speler ziet de muis niet meer.
- De sprite staat dan op een coördinaat die buiten het zichtbare venster valt (bijvoorbeeld x = -50 of y = 1000).
Hoe zorg je ervoor dat de muis niet buiten het spel beweegt? Gebruik je een loop of een if-then?
Om te voorkomen dat de muis buiten het scherm beweegt, gebruik je een if
-statement, geen loop
. Daarmee controleer je of de muis nog binnen de grenzen is voordat je de positie verandert.
📌 Voorbeeld:
if mouse_x < WIDTH - 50:
mouse_x += 5
if mouse_x > 0:
mouse_x -= 5
🛠️ Opdracht
Maak nu de kennis-check.
📤 Inleveren
Aan het einde van de kennis-check ontvang je een certificaat. Maak een schermafdruk en lever deze in.
--
Blok 2 - Retro gaming with Python
Vallende stenen
0 Wat gaan we leren
We gaan nog een projectje maken met Thonny (uit de vorige les) en bij dit project gaan we gebruik maken van de standaard Python library:
pgzero
Weet je nog hoe je een pacakge installeert in Thonny?
Yep, Tools - Manage Packages en dan pgzero zoeken en installeren.
1 Teken speler en steen
In deze les gaan we de speler en één vallende steen tekenen.
We beginnen met een eenvoudige versie: een blokje onderaan dat je straks kunt besturen, en een steen die we straks laten vallen.
Wat gaan we doen?
We tekenen een rechthoek voor de speler en een rechthoek voor de steen.
We gebruiken vaste posities om de eerste versie werkend te krijgen.
🔰 Code
import pgzrun
WIDTH = 800
HEIGHT = 600
# Speler onderaan het scherm
player_x = 400
player_y = 550
player_width = 80
player_height = 20
# Vallende steen bovenaan
rock_x = 300
rock_y = 0
rock_size = 40
def draw():
screen.clear()
screen.draw.filled_rect(Rect((player_x, player_y), (player_width, player_height)), "blue")
screen.draw.filled_rect(Rect((rock_x, rock_y), (rock_size, rock_size)), "gray")
pgzrun.go()
ℹ️ Uitleg
player_x
enplayer_y
: positie van de speler (een blauw blokje onderaan)rock_x
enrock_y
: positie van de steenscreen.draw.filled_rect(...)
: tekent een blokje op het scherm
🛠️ Opdracht
- Verplaats de steen naar een andere plek op het scherm door
rock_x
enrock_y
aan te passen - Maak de speler breder of smaller
- Verander de kleuren van speler en steen
💡 Extra uitdaging
- Teken meerdere stenen op het scherm (gebruik meerdere
draw.filled_rect()
)
📤 Inleveren
- Maak een screenshot waarop je de speler en minstens één steen ziet (waarbij je de plaats van de steen dus hebt aangepast).
2 Speler bewegen
In deze les gaan we de speler besturen met de pijltjestoetsen.
De speler beweegt alleen naar links en rechts, en mag niet buiten het scherm gaan.
Wat gaan we doen?
We bewerken de update()
-functie om de x
-positie van de speler aan te passen als je op pijltjes drukt.
We voegen een maximale en minimale positie toe zodat de speler niet van het scherm glijdt.
🔰 Code
import pgzrun
WIDTH = 800
HEIGHT = 600
player_x = 400
player_y = 550
player_width = 80
player_height = 20
player_speed = 5
rock_x = 300
rock_y = 0
rock_size = 40
def draw():
screen.clear()
screen.draw.filled_rect(Rect((player_x, player_y), (player_width, player_height)), "blue")
screen.draw.filled_rect(Rect((rock_x, rock_y), (rock_size, rock_size)), "gray")
def update():
global player_x
if keyboard.left:
player_x -= player_speed
if keyboard.right:
player_x += player_speed
# Speler binnen scherm houden
if player_x < 0:
player_x = 30
if player_x > WIDTH - player_width:
player_x = WIDTH - player_width
pgzrun.go()
ℹ️ Uitleg
player_speed
: hoe snel de speler beweegtkeyboard.left
enkeyboard.right
: detecteren of een toets is ingedruktif player_x > WIDTH - player_width
: voorkomt dat de speler buiten beeld schuift
🛠️ Opdracht
- Beweeg de speler heen en weer met je pijltjestoetsen
- Verander
player_speed
– wordt de speler sneller of trager? - Aan de linker kant van het scherm stuitert de speler terwijl aan de rechterkant de speler netjes op de rand stopt. Zie jij hoe dat komt? Probeer dit aan te passen, probeer gewoon maar wat, je kan niets kapot maken!
Tip: bij welke if
wordt gekeken of de speler tegen de linkerkant van het scherm aan zit?
💡 Extra uitdaging
- Laat de speler sneller bewegen als je de toets langer inhoudt
- Laat de speler automatisch naar links of rechts bewegen als je een extra toets indrukt (bijvoorbeeld
A
ofD
)
📤 Inleveren
- Leg in eigen woorden uit hoe de
player_speed
de snelheid van het spel veranderd. - Leg uit waarom de speler aan de linkerkant van het scherm 'stuitert' en wat heb je aangepast om dit te voorkomen?
3 Steen laten vallen
In deze les gaan we de steen automatisch laten vallen.
Zodra de steen de onderkant van het scherm bereikt, verschijnt hij opnieuw bovenaan op een willekeurige plek.
Wat gaan we doen?
We voegen een rock_speed
toe en laten de y
-positie van de steen langzaam toenemen in update()
.
We controleren of de steen het scherm uit valt, en zetten hem dan opnieuw bovenaan met een willekeurige x-positie.
🔰 Code
import pgzrun
import random
WIDTH = 800
HEIGHT = 600
player_x = 400
player_y = 550
player_width = 80
player_height = 20
player_speed = 5
rock_x = random.randint(0, WIDTH - 40)
rock_y = 0
rock_size = 40
rock_speed = 3
def draw():
screen.clear()
screen.draw.filled_rect(Rect((player_x, player_y), (player_width, player_height)), "blue")
screen.draw.filled_rect(Rect((rock_x, rock_y), (rock_size, rock_size)), "gray")
def update():
global player_x, rock_y, rock_x, rock_size
if keyboard.left:
player_x -= player_speed
if keyboard.right:
player_x += player_speed
if player_x < 0:
player_x = 0
if player_x > WIDTH - player_width:
player_x = WIDTH - player_width
# Steen laten vallen
rock_y += rock_speed
# Als de steen onderaan is, zet hem weer bovenaan met random x
if rock_y > HEIGHT:
rock_y = 0
rock_x = random.randint(0, WIDTH - rock_size)
pgzrun.go()
ℹ️ Uitleg
rock_speed
: bepaalt hoe snel de steen valtrock_y += rock_speed
: laat de steen naar beneden bewegenrandom.randint(...)
: zorgt voor een willekeurige x-positie als de steen opnieuw verschijnt
🛠️ Opdracht
- Verander de
rock_speed
– wat gebeurt er? - Maak de steen groter of kleiner door
rock_size
aan te passen. - Zorg er nu voor dat elke keer als de steen opnieuw valt de rock_size wordt aangepast en een random grootte krijgt.
- Met random.randint(1, 10) wordt er een getal tussen 1 en 10 gegenereerd. Bedenk zelf mooie waarden en pas de code aan zodat de grootte van de steen telkens anders wordt.
💡 Extra uitdaging
- Laat meerdere stenen tegelijk vallen
- Laat elke steen een willekeurige snelheid hebben
📤 Inleveren
- Leg uit hoe je ervoor hebt gezorgdt dat de steen telkens een ander grootte kijgt.
4 Botsing & Game Over
In deze les gaan we controleren of de speler de steen raakt.
Als er een botsing is, stopt het spel en verschijnt er de tekst “Game Over”.
Wat gaan we doen?
We maken een Rect
van de speler en van de steen, en gebruiken colliderect()
om te zien of ze elkaar raken.
We gebruiken een variabele game_over
om te stoppen met het spel als er een botsing is.
🔰 Code
import pgzrun
import random
from pygame import Rect
WIDTH = 800
HEIGHT = 600
player_x = 400
player_y = 550
player_width = 80
player_height = 20
player_speed = 5
rock_x = random.randint(0, WIDTH - 40)
rock_y = 0
rock_size = 40
rock_speed = 3
game_over = False
def draw():
screen.clear()
if game_over:
screen.draw.text("GAME OVER", center=(WIDTH // 2, HEIGHT // 2), fontsize=60, color="red")
return
screen.draw.filled_rect(Rect((player_x, player_y), (player_width, player_height)), "blue")
screen.draw.filled_rect(Rect((rock_x, rock_y), (rock_size, rock_size)), "gray")
def update():
global player_x, rock_y, rock_x, game_over
if game_over:
return
if keyboard.left:
player_x -= player_speed
if keyboard.right:
player_x += player_speed
if player_x < 0:
player_x = 0
if player_x > WIDTH - player_width:
player_x = WIDTH - player_width
rock_y += rock_speed
if rock_y > HEIGHT:
rock_y = 0
rock_x = random.randint(0, WIDTH - rock_size)
# Botsing detecteren
speler_rect = Rect(player_x, player_y, player_width, player_height)
steen_rect = Rect(rock_x, rock_y, rock_size, rock_size)
if speler_rect.colliderect(steen_rect):
game_over = True
pgzrun.go()
ℹ️ Uitleg
Rect(x, y, w, h)
maakt een rechthoek op de juiste plekcolliderect()
kijkt of twee rechthoeken elkaar rakengame_over
bepaalt of het spel nog doorgaat
🛠️ Opdracht
- Laat de speler de steen raken en kijk of het spel stopt
- Verplaats de speler naar de andere kant van het scherm – bots je dan nog?
- Verander de “GAME OVER” tekst (bijvoorbeeld kleur of grootte)
💡 Extra uitdaging
- Laat het spel herstarten als je op de
R
-toets drukt - Speel een geluid af bij de botsing (bijv.
sounds.hit.play()
)
📤 Inleveren
- Leg eersts stap-voor-stap in he eigen woorden uit hoe er een botsing van de steen met de speler wordt gedetecteerd.
- Leg daarna stap-voor-stap, in eigen woorden uit wat er allemaal gebeurt als de steen tegen de speler aan komt. Verwijs daarbij naar de code.
5 Meerdere stenen & moeilijker maken
In deze les gaan we meerdere stenen tegelijk laten vallen.
Bovendien maakt het spel zichzelf moeilijker naarmate je langer speelt: de stenen vallen sneller.
Wat gaan we doen?
We maken een lijst van stenen, elk met hun eigen positie en snelheid.
We laten deze stenen vallen en bij een botsing stoppen we het spel.
We laten het spel steeds moeilijker worden door de snelheid te verhogen na een paar seconden.
🔰 Code
import pgzrun
import random
from pygame import Rect
WIDTH = 800
HEIGHT = 600
player_x = 400
player_y = 550
player_width = 80
player_height = 20
player_speed = 5
rocks = []
game_over = False
rock_timer = 0
rock_interval = 60 # frames
difficulty = 1.0
# Start met een paar stenen
for _ in range(3):
x = random.randint(0, WIDTH - 40)
speed = random.uniform(2, 4)
rocks.append({"x": x, "y": 0, "size": 40, "speed": speed})
def draw():
screen.clear()
if game_over:
screen.draw.text("GAME OVER", center=(WIDTH // 2, HEIGHT // 2), fontsize=60, color="red")
return
screen.draw.filled_rect(Rect((player_x, player_y), (player_width, player_height)), "blue")
for rock in rocks:
screen.draw.filled_rect(Rect((rock["x"], rock["y"]), (rock["size"], rock["size"])), "gray")
def update():
global player_x, game_over, rock_timer, difficulty
if game_over:
return
if keyboard.left:
player_x -= player_speed
if keyboard.right:
player_x += player_speed
player_x = max(0, min(WIDTH - player_width, player_x))
speler_rect = Rect(player_x, player_y, player_width, player_height)
for rock in rocks:
rock["y"] += rock["speed"] * difficulty
if rock["y"] > HEIGHT:
rock["y"] = 0
rock["x"] = random.randint(0, WIDTH - rock["size"])
rock["speed"] = random.uniform(2, 5)
rock_rect = Rect(rock["x"], rock["y"], rock["size"], rock["size"])
if speler_rect.colliderect(rock_rect):
game_over = True
# Verhoog de moeilijkheid langzaam
rock_timer += 1
if rock_timer % 300 == 0:
difficulty += 0.2
pgzrun.go()
ℹ️ Uitleg
- Elke steen is een dict met
x
,y
,size
enspeed
- We gebruiken een
for
-loop om alle stenen te laten vallen - Met
difficulty
verhogen we langzaam de snelheid van de stenen
🛠️ Opdracht
- Test het spel en kijk of het spel moeilijker wordt na ongeveer 15 seconden
- Nu gaan we de grootte van de stenen weer aanpassen naar een random waarde zoals we dat bij de vorige opdracht ook hebben gedaan.
- Dat gaat iets anders omdat we nu meerdere 'rocks' hebben. In de
for rock in rocks:
loop worden één voor één alle blokken behandeld. De grootte van de rock staat inrock["size"]
- Dat gaat iets anders omdat we nu meerdere 'rocks' hebben. In de
Tip: weet je nog dat je met random.randint(1,4)
een getal tussen 1 en 4 kan genereren?
💡 Extra uitdaging
- Laat het aantal stenen toenemen naarmate het spel langer duurt
- Laat een andere kleur steen verschijnen bij hogere moeilijkheid.
- Laat elke steen een ander formaat hebben
- Toon je “score” op het scherm: hoe lang heb je overleefd?
📤 Inleveren
- Lever je code (.py bestand) in.
**************************************************
6 Score, Reflectie & Uitbreiding
In deze les voeg je een score toe die laat zien hoelang je het hebt volgehouden.
Daarnaast kijk je terug op je eigen werk én kies je een uitbreiding om het spel leuker of moeilijker te maken.
Wat gaan we doen?
- We voegen een
score
toe die telt hoeveel frames je overleeft - We tonen deze score linksboven op het scherm
- Bij Game Over laten we je eindscore zien
🔰 Toevoegingen aan bestaande code
score = 0 # bij de andere variabelen
def draw():
screen.clear()
if game_over:
screen.draw.text("GAME OVER", center=(WIDTH // 2, HEIGHT // 2), fontsize=60, color="red")
screen.draw.text(f"Score: {score}", center=(WIDTH // 2, HEIGHT // 2 + 50), fontsize=40, color="black")
return
...
screen.draw.text(f"Score: {score}", (10, 10), fontsize=40, color="black")
def update():
global score
if game_over:
return
...
score += 1
ℹ️ Uitleg
score
wordt bij elke frame 1 hoger → hoe langer je speelt, hoe hoger je scorescreen.draw.text()
toont je score tijdens én na het spel
🧠 Reflectie
Beantwoord de volgende vragen onderaan je code als commentaar of in een apart document:
- Wat vond je het leukst om te maken in dit spel?
- Wat vond je moeilijk, en hoe heb je dat opgelost?
- Wat heb je geleerd over Python en programmeren?
- Waar ben je trots op?
🎮 Uitbreiding (kies er één)
- 💥 Laat een explosie zien of geluid horen bij Game Over
- 🧱 Voeg bewegende obstakels toe
- 🏆 Houd een highscore bij (hoogste score van de sessie)
- 🚀 Geef de speler power-ups: tijdelijk onsterfelijk, versnellen, etc.
- 🎨 Verander het uiterlijk van de speler of achtergrond na elke 30 seconden
💡 Eigen idee?
Bedenk zelf een uitbreiding en probeer deze te maken. Schrijf kort op wat jouw idee is en hoe je het hebt aangepakt.
📤 Inleveren
- Lever je eindversie van het spel in (inclusief score en uitbreiding)
- Voeg een korte beschrijving toe van wat je hebt toegevoegd of aangepast
- Lever ook je reflectie in (de 4 vragen)
- Optioneel: voeg een screenshot of kort filmpje toe van je spel
🧠 Reflectieopdracht
Deze reflectieopdracht helpt je om stil te staan bij wat je hebt geleerd tijdens het programmeren van je spel.
Beantwoord de onderstaande vragen eerlijk en in je eigen woorden. Je mag je antwoorden inleveren via een apart document of onderaan je Python-bestand als commentaar zetten.
📋 Vragen
- 🔹 Wat vond je het leukste om te maken of uit te proberen?
- 🔹 Wat vond je lastig? Hoe heb je dat opgelost?
- 🔹 Wat heb je geleerd over Python (of programmeren in het algemeen)?
- 🔹 Waar ben je trots op in jouw eindresultaat?
- 🔹 Wat zou je de volgende keer anders willen doen of verbeteren?
📤 Inleveren
Lever je reflectie in bij je docent via de afgesproken manier (document, upload of als commentaar in je code).
###
# Docenten
🎓 Docentenhandleiding
📘 Overzicht
- Doelgroep: Leerlingen met basiskennis Python (13-16 jaar)
- Duur: 6 lessen van ±45-60 minuten
- Software: Thonny + Pygame Zero
- Spelconcept: De speler ontwijkt vallende objecten (stenen) en het spel wordt steeds moeilijker
🎯 Leerdoelen
- Werken met coördinaten en schermlogica
- Gebruik van
draw()
enupdate()
- Toetsenbordbesturing met
keyboard.left
enkeyboard.right
- Beweging simuleren met variabelen
- Objecten detecteren met
Rect
encolliderect()
- Werken met lijsten voor meerdere objecten
- Reflecteren op het leerproces en zelf uitbreidingen bedenken
📚 Lesoverzicht
Les | Onderwerp | Nieuwe concepten |
---|---|---|
1 | Speler en steen tekenen | draw() , rechthoek tekenen, coördinaten |
2 | Speler beweegt | update() , keyboard input, begrenzen |
3 | Steen valt en komt terug | Beweging, random , logica |
4 | Botsing + Game Over | Rect , colliderect() , boolean vlag |
5 | Meerdere stenen + moeilijkheid | Lijsten, for -loops, moeilijkheidsschaal |
6 | Score, Reflectie & Uitbreiding | Scorevariabele, draw.text() , vrije opdracht |
⚠️ Valkuilen
- Speler glijdt van het scherm →
if player_x > WIDTH - breedte
vergeten - Botsing werkt niet → verkeerde waarden in
Rect()
- Alle stenen bewegen tegelijk, maar maar één wordt gecheckt op botsing
- Score telt door na game over → geen check op
if not game_over:
🧠 Differentiatie
Voor snelle leerlingen
- Voeg power-ups toe (onzichtbaarheid, levens, vertraging)
- Laat speler en stenen met sprites tekenen in plaats van rechthoeken
- Laat leerlingen zelf een nieuw spelelement verzinnen
Voor langzamere leerlingen
- Laat maar één steen vallen (geen lijst)
- Geef per les kant-en-klare startercode mee
- Werk samen in tweetallen
📊 Beoordeling (optioneel)
Criterium | Omschrijving | Score (1-5) |
---|---|---|
Werkt het spel | Geen fouten, spel werkt zoals bedoeld | 🟩 |
Code is leesbaar | Logische structuur, goede naamgeving | 🟩 |
Uitbreiding toegevoegd | Creatieve of technische aanvulling | 🟩 |
Reflectie | Antwoorden zijn volledig en met inzicht | 🟩 |
💡 Tips voor in de les
- Laat leerlingen na elke wijziging op F5 drukken → directe feedback is motiverend
- Gebruik klassikale demo’s bij fouten: “Waarom crasht deze versie?”
- Laat leerlingen zelfstandig kleine uitbreidingen testen vanaf les 5
- Bespreek reflectievragen klassikaal in les 6
🧰 Benodigdheden
- Thonny geïnstalleerd (met Pygame Zero via
pip install pgzero
indien nodig) - Werkende computer (Windows, Linux of macOS)
- Toetsenbord met pijltjestoetsen
Snake
Status: alles uitgevoerd en getest
0 Snake Lessenserie
Welkom bij de Snake lessenserie! In deze serie leer je stap voor stap hoe je het klassieke spelletje Snake maakt met Python
en Pygame Zero
. Je begint met het tekenen van een blokje en eindigt met een compleet werkend spel – inclusief groeiende slang, score en Game Over!
📚 Overzicht van de lessen
- Les 1 – Teken de slangkop
- Les 2 – Beweeg de slang
- Les 3 – Botsing met schermrand
- Les 4 – Richting automatisch volgen
- Les 5 – Teken een appel en detecteer botsing
- Les 6 – Laat de slang groeien
- Les 7 – Begrijp insert() en pop()
- Les 8 – Vertraagde beweging
- Les 9 – Score en Game Over
- Les 10 – Challenge en uitbreiding
🎯 Leerdoelen
- Je leert werken met de
draw()
enupdate()
functies van Pygame Zero - Je oefent met variabelen, lists en toetsenbordinvoer
- Je leert wat een game loop is en hoe je controle krijgt over beweging
- Je leert je eigen code uitbreiden, testen en verbeteren
🛠️ Benodigdheden
- Thonny geïnstalleerd met de package
pgzero
- Een beetje basiskennis van Python (variabelen, if, functies)
💬 Hoe werk je?
Elke les bevat uitleg, voorbeeldcode, opdrachten én een extra uitdaging. Voer je code steeds uit in Thonny en probeer alle opdrachten echt zelf op te lossen. Je mag hulp vragen of AI gebruiken, maar probeer te begrijpen wat er gebeurt.
🎓 Klaar?
Lever je eindspel in, samen met je antwoorden op de reflectievraag. Veel succes en vooral: veel plezier met programmeren!
🛠️ Opdracht
We gaan nog een projectje maken met Thonny (uit de vorige les) en bij dit project gaan we gebruik maken van de standaard Python library:
pgzero
Weet je nog hoe je een package installeert in Thonny?
Yep, Tools - Manage Packages en dan pgzero zoeken en installeren.
📤 Inleveren
Niets, maar zorg ervoor dat je Thonny werkt en dat je een neiuw project maak.
Tip: Kopieer je vorige project en noem het anders.
1 Teken de slangkop
In deze les gaan we beginnen met het maken van een eigen versie van Snake in Python met Pygame Zero.
We gaan eerst de kop van de slang tekenen op het scherm. Je ziet dan een vierkantje dat straks kan gaan bewegen.
Wat gaan we doen?
We maken een slangkop als vierkant met een bepaalde positie en grootte, en tekenen die in de draw()
-functie.
📦 Benodigdheden
- Een werkende Python-omgeving met Pygame Zero (zoals Thonny)
- Geen plaatjes nodig – we tekenen de slang met blokken
🔰 Startercode
# importeer library
import pgzrun
# Spelgrootte
WIDTH = 600
HEIGHT = 400
# Startpositie van de slangkop
snake_x = 100
snake_y = 100
tile_size = 20
def draw():
screen.clear()
screen.draw.filled_rect(Rect((snake_x, snake_y), (tile_size, tile_size)), "green")
#start programma
pgzrun.go()
ℹ️ Uitleg
WIDTH
enHEIGHT
: grootte van het spelvenstersnake_x
ensnake_y
: positie van de slangkoptile_size
: grootte van het blokjescreen.draw.filled_rect(...)
: tekent een gevuld vierkantje op het scherm
🛠️ Opdracht
- Pas de waarde van
snake_x
ensnake_y
aan – wat gebeurt er? - Maak het vierkant groter of kleiner door
tile_size
te wijzigen - Verander de kleur van het vierkant in bijvoorbeeld
"blue"
of"orange"
💡 Extra uitdaging
Teken een tweede blokje naast de slangkop alsof er al een stukje staart is. Gebruik nog een screen.draw.filled_rect()
.
📤 Inleveren
- Maak een screenshot van je 'slangkop' op het scherm waarbij je de 'slangkop'op een andere positie hebt gezet.
2 Beweeg de slang
In deze les gaan we de slangkop laten bewegen met de pijltjestoets die je indrukt.
We gebruiken daarvoor de update()
-functie van Pygame Zero en de toetsenbordinput.
Wat gaan we doen?
We maken een richting-variabele en passen de positie van de slang aan op basis van de pijltjes die je indrukt.
🔰 Code
Dit is een deel van de code, je moet jouw bestaande code aanpassen aan de hand van deze nieuwe code.
Je hoeft dus niet alles opnieuw te typen. Plaats de update()
functie en pas eventueel snake_x
, snake_y
, tile_size
en step
aan in jouw bestaande code.
# Startpositie van de slangkop
snake_x = 200
snake_y = 200
tile_size = 10
step = 1
def draw():
screen.clear()
screen.draw.filled_rect(Rect((snake_x, snake_y), (tile_size, tile_size)), "green")
def update():
global snake_x, snake_y
if keyboard.left:
snake_x -= step
if keyboard.right:
snake_x += step
if keyboard.up:
snake_y -= step
if keyboard.down:
snake_y += step
ℹ️ Uitleg
update()
wordt automatisch meerdere keren per seconde uitgevoerdkeyboard.left
controleert of de linkerpijl is ingedrukt- Telkens als je een toets indrukt, verandert de positie van de slang
step
bepaalt hoe ver de slang per stap beweegt
🛠️ Opdracht
- Beweeg de slang door het scherm met de pijltjes
- Pas
step
aan naar een andere waarde – wat merk je? - Laat de slang sneller of langzamer bewegen door minder of meer pixels per keer te verplaatsen
💡 Extra uitdaging
Laat de slang automatisch blijven bewegen in de laatst gekozen richting:
- Gebruik een variabele
richting
die je bijwerkt meton_key_down()
- Laat de slang dan elke update in die richting verder bewegen
📤 Inleveren
- Leg uit wat de variable step doet.
- Welke waarde heb je gekozen, waarom?
(je kunt dit inleveren in het tekst veld of in een .txt. bestandje)
3 Automatische beweging
In deze les gaan we de slang automatisch laten blijven bewegen in de richting van de laatste pijltjestoets die je hebt ingedrukt.
🔍 Wat gaan we doen?
- We maken een nieuwe variabele
richting
. - Als je op een pijltjestoets drukt, verandert de waarde van
richting
. - In de
update()
functie verplaatst de slang zich elke keer opnieuw in de gekozen richting – ook als je de toets niet ingedrukt houdt!
🔰 Code
Gebruik deze versie als nieuwe code (je mag dit toevoegen aan of combineren met je bestaande code):
import pgzrun
WIDTH = 600
HEIGHT = 400
snake_x = 200
snake_y = 200
tile_size = 20
step = 10
richting = "right"
def draw():
screen.clear()
screen.draw.filled_rect(Rect((snake_x, snake_y), (tile_size, tile_size)), "green")
def update():
global snake_x, snake_y
if richting == "left":
snake_x -= step
elif richting == "right":
snake_x += step
elif richting == "up":
snake_y -= step
elif richting == "down":
snake_y += step
def on_key_down(key):
global richting
if key == keys.LEFT:
richting = "left"
elif key == keys.RIGHT:
richting = "right"
elif key == keys.UP:
richting = "up"
elif key == keys.DOWN:
richting = "down"
pgzrun.go()
ℹ️ Uitleg
richting
: deze variabele onthoudt de laatst gekozen richtingon_key_down()
: dit is een functie die wordt uitgevoerd als je op een toets druktupdate()
: deze functie verplaatst de slang elke keer in de gekozen richting, ook als je geen toets indrukt
🛠️ Opdracht
- Test of je slang automatisch blijft bewegen nadat je een pijl indrukt
- Wat gebeurt er als je twee keer snel op een andere richting drukt?
- Probeer met
tile_size
enstep
te spelen voor een ander effect
💡 Extra uitdaging
Voeg grenzen toe aan je spel: laat de slang stoppen of ergens anders naartoe gaan als hij de rand van het scherm raakt.
📤 Inleveren
- Leg in je eigen woorden uit wat de functie
on_key_down()
doet
(Lever dit in via het tekstvak of via een upload.)
4 Randbotsing en automatische richting
In deze les zorgen we ervoor dat de slang niet zomaar het scherm verlaat. Zodra hij een rand raakt, verandert hij automatisch van richting. Zo beweegt hij steeds binnen het scherm!
🔍 Wat gaan we doen?
- We controleren of de slang de rand van het scherm raakt.
- Als dat zo is, passen we automatisch de richting aan.
🔰 Code (let op: onvolledig!)
Hieronder zie je de code. Eén belangrijke regel ontbreekt – die moet jij toevoegen!
import pgzrun
WIDTH = 600
HEIGHT = 400
snake_x = 200
snake_y = 200
tile_size = 20
step = 5
richting = "right"
def draw():
screen.clear()
screen.draw.filled_rect(Rect((snake_x, snake_y), (tile_size, tile_size)), "green")
def update():
global snake_x, snake_y, richting
if richting == "left":
snake_x -= step
elif richting == "right":
snake_x += step
elif richting == "...":
snake_y -= step
elif richting == "...":
snake_y += step
# 🧠 Hier controleren we of de slang de rand raakt
if snake_x < 0:
richting = "right"
elif snake_x + tile_size > WIDTH:
richting = "left"
elif snake_y < 0:
richting = "..."
elif snake_y + tile_size > HEIGHT:
richting = "..."
def on_key_down(key):
global richting
if key == keys.LEFT:
richting = "left"
elif key == keys.RIGHT:
richting = "right"
elif key == keys.UP:
richting = "up"
elif key == keys.DOWN:
richting = "down"
pgzrun.go()
Als je de linker- of rechterkant raakt, dan 'stuitert' je terug. Dat gebeurt niet als je de boven- of onderkant aanraakt. Pas de code aan zodat je ook terugstuiters als je de onder-of bovenkant aanraakt.
ℹ️ Uitleg
snake_x + tile_size > WIDTH
: betekent dat de slang voorbij de rechterrand gaat- Als de slang een rand raakt, verander je de variabele
richting
- De ontbrekende waarde is wat de slang moet doen als hij links het scherm uit dreigt te gaan
🛠️ Opdracht
- Voeg de ontbrekende regel toe zodat de slang niet door de linkerkant verdwijnt
- Test of de slang de andere richtingen goed oppikt
- Verander eventueel de standaardrichting of startpositie om verschillende randen te testen
💡 Extra uitdaging
Laat de slang bij elke randbotsing van kleur veranderen! (Tip: maak een variabele kleur
en gebruik bijvoorbeeld random.choice()
)
📤 Inleveren
- Leg uit wat je hebt aangepast en waarom dat werkt.
(Lever dit in via het tekstvak of via een upload.)
5 Geen omkeren toegestaan
In deze les zorgen we ervoor dat de slang niet meteen omkeert. In een echte Snake-game kun je namelijk niet ineens van rechts naar links bewegen – dan zou de slang zichzelf opeten!
🔍 Wat gaan we doen?
- We voorkomen dat de slang direct de tegenovergestelde richting kiest.
- We vergelijken de huidige richting met de nieuwe richting voordat we die veranderen.
🔰 Code (let op: onvolledig!)
De volgende code voorkomt omkeren, maar jij moet één voorwaarde nog zelf aanvullen.
import pgzrun
WIDTH = 600
HEIGHT = 400
snake_x = 200
snake_y = 200
tile_size = 20
step = 1
richting = "right"
def draw():
screen.clear()
screen.draw.filled_rect(Rect((snake_x, snake_y), (tile_size, tile_size)), "green")
def update():
global snake_x, snake_y
if richting == "left":
snake_x -= step
elif richting == "right":
snake_x += step
elif richting == "up":
snake_y -= step
elif richting == "down":
snake_y += step
def on_key_down(key):
global richting
if key == keys.LEFT and richting != "right":
richting = "left"
elif key == keys.RIGHT and richting != "left":
richting = "right"
elif key == keys.UP and richting != "down":
richting = "up"
elif key == keys.DOWN and richting != "...":
richting = "down"
pgzrun.go()
Stuiteren tegen randen werkt niet meer
Het botsen tegen de randen wat in stap 4 is gedaan, zit niet in deze code. Dat is express gedaan. We proberen op deze manier een ding gelijktijdig uit te leggen en het voorkomt dat je op dit moment "door de bomen het bos niet meer ziet".
ℹ️ Uitleg
- We gebruiken een
if
-voorwaarde om te voorkomen dat je teruggaat in de tegenovergestelde richting. - De ontbrekende regel is die voor
keys.DOWN
: welke richting is dan niet toegestaan?
🛠️ Opdracht
- Vul de ontbrekende voorwaarde aan zodat de slang niet van "up" naar "down" mag keren
- Test alle richtingen: kun je nog steeds normaal draaien? Keren lukt niet meer, toch?
💡 Extra uitdaging
Laat de slang een geluidje maken als je op een toets drukt, maar de richting wordt niet veranderd (bijv. als je wél op links drukt, maar dat mag niet).
Met deze code kan je ene geluidje afspelen.
sounds.beep.play()
Om een sound af te kunnen spelen moet jouw project folder een mapje maken sounds en daarin moet een beep.wav komen.
mijn_project/
├── main.py
└── sounds/
└── beep.wav
Geluidjes toevoegen
Je kunt zelf geluidjes toevoegen, stel je hebt een geluidje bel.wav dan plaats je dat in de sounds directory en dan gebruik je het commando
souds.bel.play()
📤 Inleveren
- Leg uit wat je hebt veranderd en hoe het werkt.
(Lever dit in via het tekstvak of via een upload.)
6 Appel tekenen en raken
In deze les voegen we een appel toe aan het spel. De appel verschijnt op een willekeurige plek op het scherm. Als de slang de appel raakt, verschijnt er een bericht in de console.
🔍 Wat gaan we doen?
- We gebruiken de
random
-module om een appel op een willekeurige positie te tekenen. - We tekenen de 'appel' met een geel cirkeltje of vierkantje.
- We detecteren of de slang de appel raakt.
📦 Benodigdheden
- Je slangkop beweegt al automatisch over het scherm
- Je hebt al gewerkt met
tile_size
ensnake_x
/snake_y
🔰 Code (let op: onvolledig!)
Onderstaande code tekent een slangkop en een appel. De botsing werkt al, maar na een botsing blijft de appel op dezelfde plek staan. Vul zelf aan wat er moet gebeuren!
import pgzrun
import random
WIDTH = 600
HEIGHT = 400
tile_size = 20
snake_x = 100
snake_y = 100
richting = "right"
step = 3
# Appelpositie (willekeurig op het grid)
apple_x = random.randint(0, (WIDTH - tile_size) // tile_size) * tile_size
apple_y = random.randint(0, (HEIGHT - tile_size) // tile_size) * tile_size
def draw():
screen.clear()
screen.draw.filled_rect(Rect((snake_x, snake_y), (tile_size, tile_size)), "green")
screen.draw.filled_circle((apple_x + tile_size // 2, apple_y + tile_size // 2), tile_size // 2, "yellow")
def on_key_down(key):
global richting
if key == keys.LEFT and richting != "right":
richting = "left"
elif key == keys.RIGHT and richting != "left":
richting = "right"
elif key == keys.UP and richting != "down":
richting = "up"
elif key == keys.DOWN and richting != "up":
richting = "down"
def update():
global snake_x, snake_y, apple_x, apple_y
if richting == "left":
snake_x -= step
elif richting == "right":
snake_x += step
elif richting == "up":
snake_y -= step
elif richting == "down":
snake_y += step
# Botst de slang met de appel?
snake_rect = Rect((snake_x, snake_y), (tile_size, tile_size))
apple_rect = Rect((apple_x, apple_y), (tile_size, tile_size))
if snake_rect.colliderect(apple_rect):
print("🍏 Appel geraakt!")
# 👇 VUL HIER AAN: genereer een nieuwe positie voor de appel
# apple_x = ...
# apple_y = ...
pgzrun.go()
ℹ️ Uitleg
random.randint()
: geeft een willekeurig geheel getal terug- De appelpositie wordt op het grid berekend, zodat deze altijd netjes uitlijnt
filled_circle()
: tekent een geel rondje (je kunt ookfilled_rect()
gebruiken)
🛠️ Opdracht
- Test of de appel op het scherm verschijnt
- Beweeg de slang naar de appel – zie je de console-uitvoer?
- Vul de ontbrekende regels in zodat de appel na een botsing op een nieuwe plek verschijnt
💡 Extra uitdaging
Laat de appel niet precies op dezelfde plek als de slang verschijnen wanneer hij opnieuw wordt gegenereerd!
📤 Inleveren
- Lever de code in .py bestand.
7 De slang groeit
In deze les maak je van je slang een échte slang: eentje die uit meerdere blokjes bestaat en langer wordt als hij een appel eet.
🔍 Wat gaan we doen?
- We veranderen de slang van één blokje naar een lijst van blokjes
- De slang groeit bij het eten van een appel
- We houden de lengte gelijk als er geen appel wordt gegeten
📘 Strategie
De code wordt nu iets ingewikkelder. Het is niet erg als je niet alles direct begrijpt. Probeer wel te volgen wat er gebeurt. We bespreken de strategie:
- De slang bestaat uit meerdere delen. De code in de
draw()
-functie tekent elk stukje. - Bij elke update wordt er een nieuw blokje toegevoegd aan de kop van de slang.
- Als de slang een appel raakt: dan blijft de slang langer.
- Als er geen appel is geraakt: dan wordt het laatste stukje van de slang verwijderd.
Dus in het kort:
- Teken de slang
- Voeg een stukje toe aan de kop
- Geen appel? Verwijder de staart
🔰 Code
import pgzrun
import random
WIDTH = 600
HEIGHT = 400
tile_size = 20
snake = [(100, 100)]
richting = "right"
step = 3
apple_x = random.randint(0, (WIDTH - tile_size) // tile_size) * tile_size
apple_y = random.randint(0, (HEIGHT - tile_size) // tile_size) * tile_size
def draw():
screen.clear()
for segment in snake:
screen.draw.filled_rect(Rect(segment, (tile_size, tile_size)), "green")
screen.draw.filled_circle((apple_x + tile_size // 2, apple_y + tile_size // 2), tile_size // 2, "yellow")
def on_key_down(key):
global richting
if key == keys.LEFT and richting != "right":
richting = "left"
elif key == keys.RIGHT and richting != "left":
richting = "right"
elif key == keys.UP and richting != "down":
richting = "up"
elif key == keys.DOWN and richting != "up":
richting = "down"
def update():
global apple_x, apple_y
head_x, head_y = snake[0]
if richting == "left":
head_x -= step
elif richting == "right":
head_x += step
elif richting == "up":
head_y -= step
elif richting == "down":
head_y += step
new_head = (head_x, head_y)
snake.insert(0, new_head)
head_rect = Rect(new_head, (tile_size, tile_size))
apple_rect = Rect((apple_x, apple_y), (tile_size, tile_size))
if head_rect.colliderect(apple_rect):
print("🍏 Appel geraakt!")
apple_x = random.randint(0, (WIDTH - tile_size) // tile_size) * tile_size
apple_y = random.randint(0, (HEIGHT - tile_size) // tile_size) * tile_size
else:
snake.pop() # staart verwijderen
if new_head in snake[1:]: # Deze code detecteerd of de slang zichzelf raakt.
print("🚫 Game over! De slang raakte zichzelf.")
exit()
pgzrun.go()
ℹ️ Uitleg
snake = [(x, y), ...]
: lijst van alle slangsegmenteninsert(0, new_head)
: voegt een nieuw blokje toe aan de voorkantpop()
: verwijdert het laatste stukje (staart)if new_head in snake[1:]
: controle of slang zichzelf raakt
Voorbeeld bij beweging:
Stap 1: slang = [(4,2), (3,2), (2,2)]
Stap 2: kop wordt (5,2) → slang = [(5,2), (4,2), (3,2)]
Stap 3: geen appel → staart eraf → slang = [(5,2), (4,2)]
📚 Waarom werkt dit zo?
Door altijd eerst een kop toe te voegen, beweegt de slang vooruit. Als er geen appel is geraakt, halen we de staart weg zodat de lengte gelijk blijft. Wordt er wél een appel geraakt, dan blijft de slang langer: we doen dan geen pop()
. Dit is hoe de slang groeit!
🛠️ Opdracht
- Controleer of de slang groeit als hij een appel eet
- Controleer of hij even lang blijft als er geen appel wordt geraakt
📄 Inleveren
- Beantwoord de vraag: Wat gebeurt er als je
snake.pop()
vergeet?
(Lever dit in via het tekstvak of als bestand.)
8 De slang sneller maken met vertraging
In deze les leer je hoe je de slang sneller kunt laten groeien door de step
te vergroten, zonder dat het spel te snel en onspeelbaar wordt.
🔍 Wat is het probleem?
Je denkt misschien: "Ik wil dat de slang sneller beweegt, dus ik maak step
groter." Maar als je step = 20
doet, wordt het spel ineens veel te snel.
Dat komt omdat update()
standaard 60 keer per seconde wordt uitgevoerd. Dus je slang maakt dan 60 sprongen van 20 pixels per seconde: dat is 1200 pixels!
❌ Fout idee
step = 20 # grotere stap
# maar het spel gaat nu te snel!
✅ Goede oplossing: beweging vertragen
We laten de slang niet elke update bewegen, maar bijvoorbeeld 1x per 10 frames. Zo kun je step
groter maken, zonder dat het spel onbestuurbaar wordt.
🔰 Code
import pgzrun
import random
WIDTH = 600
HEIGHT = 400
tile_size = 20
step = 20
vertraging = 10 # aantal frames wachten
frames = 0
snake = [(100, 100)]
richting = "right"
apple_x = random.randint(0, (WIDTH - tile_size) // tile_size) * tile_size
apple_y = random.randint(0, (HEIGHT - tile_size) // tile_size) * tile_size
def draw():
screen.clear()
for segment in snake:
screen.draw.filled_rect(Rect(segment, (tile_size, tile_size)), "green")
screen.draw.filled_circle((apple_x + tile_size // 2, apple_y + tile_size // 2), tile_size // 2, "yellow")
def on_key_down(key):
global richting
if key == keys.LEFT and richting != "right":
richting = "left"
elif key == keys.RIGHT and richting != "left":
richting = "right"
elif key == keys.UP and richting != "down":
richting = "up"
elif key == keys.DOWN and richting != "up":
richting = "down"
def update():
global frames
frames += 1
if frames < vertraging:
return
frames = 0
beweeg_slang()
def beweeg_slang():
global apple_x, apple_y
head_x, head_y = snake[0]
if richting == "left":
head_x -= step
elif richting == "right":
head_x += step
elif richting == "up":
head_y -= step
elif richting == "down":
head_y += step
new_head = (head_x, head_y)
snake.insert(0, new_head)
head_rect = Rect(new_head, (tile_size, tile_size))
apple_rect = Rect((apple_x, apple_y), (tile_size, tile_size))
if head_rect.colliderect(apple_rect):
print("\U0001F34F Appel geraakt!")
apple_x = random.randint(0, (WIDTH - tile_size) // tile_size) * tile_size
apple_y = random.randint(0, (HEIGHT - tile_size) // tile_size) * tile_size
else:
snake.pop()
if new_head in snake[1:]:
print("\u274C Game over! De slang raakte zichzelf.")
exit()
pgzrun.go()
🧠 Waarom werkt dit?
frames += 1
: telt hoe vaakupdate()
al is uitgevoerd- Pas als
frames >= vertraging
, beweegt de slang echt step
bepaalt nu de grootte van de stap, niet de snelheid van het spel
🚀 Opdracht
- Stel
step = 20
in en test of de slang nu sneller groeit - Experimenteer met
vertraging = 5
ofvertraging = 15
- Wat is een fijne balans tussen stapgrootte en snelheid?
- Test het spel; wat gebeurt er precies als de slang tegen zijn eigen staart botst?
🔎 Extra uitdaging
Laat de slang naarmate hij langer wordt automatisch steeds iets sneller bewegen (tip: verlaag vertraging
bij elke appel).
📄 Inleveren
- Leg uitwat er gebeurt als de slang tegen zijn staart aankomt.
- Probeer te vertellen wat je zou willen veranderen; wat moet er gebeuren als de slang tegen zijn slang aan botst?
(Lever dit in via het tekstvak of als bestand.)
9 Score bijhouden en Game Over tonen
In deze les voegen we een score toe aan het spel. Elke keer als je een appel eet, krijg je 1 punt. En als de slang zichzelf raakt, laten we "Game Over" op het scherm zien en stopt het spel.
🔍 Wat gaan we doen?
- Een variabele
score
bijhouden - De score op het scherm tonen met
screen.draw.text()
- Bij een botsing met jezelf:
game_over = True
- Het spel stoppen en "Game Over" tonen
🔰 Startercode
import pgzrun
import random
WIDTH = 600
HEIGHT = 400
tile_size = 20
step = 20
vertraging = 10
frames = 0
snake = [(100, 100)]
richting = "right"
score = 0
apple_x = random.randint(0, (WIDTH - tile_size) // tile_size) * tile_size
apple_y = random.randint(0, (HEIGHT - tile_size) // tile_size) * tile_size
game_over = False
def draw():
screen.clear()
if game_over:
screen.draw.text("GAME OVER", center=(WIDTH // 2, HEIGHT // 2), fontsize=60, color="red")
screen.draw.text(f"Score: {score}", center=(WIDTH // 2, HEIGHT // 2 + 50), fontsize=40, color="white")
else:
for segment in snake:
screen.draw.filled_rect(Rect(segment, (tile_size, tile_size)), "green")
screen.draw.filled_circle((apple_x + tile_size // 2, apple_y + tile_size // 2), tile_size // 2, "yellow")
screen.draw.text(f"Score: {score}", topleft=(10, 10), fontsize=30, color="white")
def on_key_down(key):
global richting
if key == keys.LEFT and richting != "right":
richting = "left"
elif key == keys.RIGHT and richting != "left":
richting = "right"
elif key == keys.UP and richting != "down":
richting = "up"
elif key == keys.DOWN and richting != "up":
richting = "down"
def update():
global frames
if game_over:
return
frames += 1
if frames < vertraging:
return
frames = 0
beweeg_slang()
def beweeg_slang():
global apple_x, apple_y, score, game_over
head_x, head_y = snake[0]
if richting == "left":
head_x -= step
elif richting == "right":
head_x += step
elif richting == "up":
head_y -= step
elif richting == "down":
head_y += step
new_head = (head_x, head_y)
if new_head in snake[1:]:
print("❌ Game over! De slang raakte zichzelf.")
game_over = True
return
snake.insert(0, new_head)
head_rect = Rect(new_head, (tile_size, tile_size))
apple_rect = Rect((apple_x, apple_y), (tile_size, tile_size))
if head_rect.colliderect(apple_rect):
print("\U0001F34F Appel geraakt!")
score += 1
apple_x = random.randint(0, (WIDTH - tile_size) // tile_size) * tile_size
apple_y = random.randint(0, (HEIGHT - tile_size) // tile_size) * tile_size
else:
snake.pop()
pgzrun.go()
🧠 Waarom werkt dit?
- We tekenen de score linksboven tijdens het spel
- We zetten
game_over = True
bij een zelfbotsing - Als
game_over
waar is, stoppen we de beweging en tonen een ander scherm
🚀 Opdracht
- Laat de slang een paar appels eten en kijk of de score klopt
- Laat de slang zichzelf raken en controleer of "Game Over" verschijnt
🔎 Extra uitdaging
- Laat de score ook in de console printen bij elke appel
- Laat het spel automatisch herstarten na een paar seconden (of met een toets)
📄 Inleveren
- Beantwoord: Hoe weet de code dat het "Game Over" is?
Leg stap-voor-stap uit wat er gebeurt. Kijk goed naar de code!
(Lever dit in via het tekstvak of als bestand.)
10 Snake – Eindopdracht
🌯️ Houd de slang binnen het scherm
Op dit moment kan de slang zomaar van het scherm verdwijnen als je te ver naar links, rechts, boven of onder beweegt. Bedenk zelf hoe je dat kunt oplossen!
Tip: je kunt controleren of de kop van de slang buiten het scherm terechtkomt. Bijvoorbeeld:
if head_x < 0 or head_x >= WIDTH or head_y < 0 or head_y >= HEIGHT:
game_over = True
Op deze manier ben je 'af' als je het scherm raakt. Je zou ook van richting kunnen veranderen, maar dit is wat lastiger om uit te voeren.
🛠️ Opdracht
Zorg ervoor dat de slang niet buiten het beeld kan verdwijnen. Je kunt het natuurlijk zo maken dat als je de rand raakt, het spel klaar is ("Game over").
Een ander optie is om van richting te veranderen. Dat is lastiger, weet je waarom? Hoe zou je het op een goede manier kunnen uitvoeren?
📄 Inleveren
- Leg uit waarom het lastig is om de slang van richting te laten veranderen als die de rand van het scherm raakt. Je hoeft het niet te coderen, maar leg uit hoe je de slang precies van richting zou kunnen laten veranderen als die de rand raakt. En werkt dit ook in de hoeken?
🔎 Extra uitdaging
Als je goed hebt beschreven wat er precies moet gebeuren en je hebt ook rekening gehouden met de hoeken dan kun je misschien AI vragen jouw te helpen om dit echt te bouwen? Als het lukt, wordt het spel leuker om te spelen!
--
Introductie AI
Introductie
In deze les leren we wat AI is en we gaan kijken naar het verschil van programmeren met en zonder AI.
We kijken naar de kracht van AI maar ook naar de tekortkomingen.
We gaan de volgende dingen leren:
- Wart is AI?
- Wat zijn de AI toepassingen?
- AI versus klasieke ('gewone') code. Wa tis het verschil?
- Voordelen van AI
- Nadelen van AI
- Hoe kan je AI slim gebruiken
- Prompt Engineering (intro)
1, wat is AI?
Bekijk deze video:
https://www.youtube.com/watch?v=QJE_ycgR8E8
Opdracht 1
Vat in één tot drie zinnen samen wat de kernboodschap van dit filmpje is.
Inleveren
- Maak de samenvatting in een text document en vul deze in. Lever een TXT document in.
2, AI toepassingen
AI is veel meer dan alleen ChatGPT. In deze video wordt uitgelegd waarvoor AI kan worden gebruikt.
Bekijk deze video:
https://www.youtube.com/watch?v=stw2upLHCuI
Theorie
AI-toepassingen per taaktype
Hieronder staan concrete voorbeelden van hoe kunstmatige intelligentie (AI) wordt toegepast in verschillende soorten taken
-
Wat is het?: Het toewijzen van gegevens aan een bepaalde categorie.
-
Voorbeeld: Een e-mailsysteem dat automatisch bepaalt of een e-mail spam is of geen spam, op basis van de inhoud, afzender en gebruikte woorden.
-
Wat is het?: Het ontdekken van patronen of combinaties van items die vaak samen voorkomen.
-
Voorbeeld: Een webshop gebruikt AI om te ontdekken dat klanten die een laptop kopen ook vaak een laptophoes kopen. Op basis daarvan worden aanbevelingen gedaan: "Andere klanten kochten ook...".
-
Wat is het?: Het vinden van de beste oplossing uit veel mogelijkheden, vaak onder bepaalde voorwaarden.
-
Voorbeeld: Een AI-systeem voor routeplanning bepaalt de snelste bezorgroutes voor een pakketdienst, rekening houdend met afstand, verkeer en bezorgtijd.
-
Wat is het?: Het voorspellen van toekomstige waarden of gebeurtenissen op basis van eerdere gegevens.
-
Voorbeeld: Een bakker gebruikt AI om op basis van eerdere verkoopdata te voorspellen hoeveel brood er de komende week nodig is.
-
Wat is het?: Het genereren van nieuwe inhoud of ideeën met behulp van AI.
-
Voorbeeld: Een AI-systeem zoals ChatGPT of DALL·E kan een gedicht schrijven of een afbeelding maken op basis van een beschrijving, bijvoorbeeld: "Een robot die schildert in een zonnebloemenveld".
Opdracht
Bepaal van elk van de voorbeelden bij welk type AI-toep[assing (creatie, assiociatie, optimalisatie, voorpellen, creatie) dit hoort.
-
Netflix geeft je aanbevelingen voor films op basis van wat je eerder hebt gekeken.
-
Een game bepaalt of je gedrag verdacht is en je mogelijk aan het valsspelen bent.
-
Een routeplanner voor je fietsrit kiest de route met de minste verkeerslichten.
-
TikTok voorspelt welke video je het langst gaat kijken en laat die eerder zien.
-
Een AI-programma maakt een unieke profielfoto in cartoonstijl van jou.
Inleveren
- Neem de punten over in een text document en vul deze in. Lever een TXT document in.
3, AI en 'gewone' computer code.
Wat is het verschil tussen 'gewone' code en AI-code?
Gewone code (klassieke algoritmes) is gebaseerd op vaste instructies: als je A invoert, gebeurt altijd B. Dit maakt het voorspelbaar en betrouwbaar. Denk aan een rekenmachine of een robotarm in een fabriek die elke minuut exact dezelfde beweging maakt. De computer voert precies uit wat je hebt geprogrammeerd.
AI-code werkt anders. Die is getraind op heel veel voorbeelden (zoals tekst, beelden of data) en leert daarvan zelf patronen te herkennen. Dat lijkt een beetje op hoe onze hersenen leren. AI is vaak minder voorspelbaar, omdat het zelf beslissingen neemt op basis van wat het geleerd heeft. Hierdoor kan het ook fouten maken, zeker als het iets nog niet eerder gezien heeft. ChatGPT is bijvoorbeeld een AI die voorspelt welk woord het beste past, op basis van miljarden voorbeelden.
Opdracht
Opdracht: AI-code of klassieke code? Lees de eigenschappen hieronder. Bepaal of het hoort bij klassieke code of bij AI-code. Zet er een kruisje bij:
Eigenschap | Klassieke code | AI-code | Geen van beiden |
---|---|---|---|
Voert altijd precies dezelfde handeling uit | |||
Kan leren van voorbeelden | |||
Maakt soms fouten bij onbekende situaties | |||
Is goed in rekenen en logica | |||
Kan patronen herkennen | |||
Is 100% voorspelbaar | |||
Kan nieuwe dingen maken (zoals een tekening) | |||
Kan adviseren of je in Bitcoin moet stappen of moet verkopen | |||
Zal altijd goed advies geven voor de aankoop/verkoop van Bitcoin | |||
Kan jouw foto veranderen en jou in een hele vreemde situatie zetten |
Inleveren
- Neem de tabel over in een Word document en vul deze in. Lever een PDF document in.
4, voordelen van AI
Voordelen van AI
AI heeft een aantal sterke kanten die het nuttig maken in allerlei toepassingen:
-
AI kan grote hoeveelheden data analyseren en daarin snel patronen ontdekken die mensen zouden missen.
-
AI werkt 24/7, zonder pauzes of vermoeidheid.
-
AI kan gepersonaliseerde aanbevelingen geven, bijvoorbeeld op YouTube of Spotify.
-
AI helpt bij medische diagnoses, doordat het patronen in röntgenfoto’s of scans herkent.
-
AI automatiseert saaie of gevaarlijke taken, zoals kwaliteitscontrole in fabrieken of het inspecteren van pijpleidingen met drones.
Opdracht
Hieronder zie je een aantal situaties. Geef per situatie aan of AI hier een voordeel zou kunnen bieden, en leg uit waarom.
-
Een docent moet elke week 200 toetsresultaten controleren op fouten.
-
Een leerling zoekt elke dag naar nieuwe muziek die past bij zijn smaak.
-
Een ziekenhuis wil sneller afwijkingen op longfoto’s opsporen.
-
Een bedrijf wil weten welke producten waarschijnlijk snel uitverkocht raken.
-
Een bakker wil weten hoeveel broden hij volgende week moet bakken.
Inleveren
- Neem de punten over in een text document en vul deze in. Lever een TXT document in.
5, nadelen van AI
Nadelen van AI
Hoewel AI veel voordelen heeft, zijn er ook belangrijke nadelen en aandachtspunten:
-
AI kan fouten maken als het situaties tegenkomt die het niet kent of niet goed begrijpt.
-
AI is afhankelijk van data — als de data onvolledig of bevooroordeeld is, kan het systeem verkeerde beslissingen nemen.
-
AI is vaak een ‘black box’ — het is soms moeilijk te begrijpen waarom een AI iets doet of beslist.
-
AI kan banen vervangen, vooral bij repetitieve taken, wat zorgt voor zorgen over werkgelegenheid.
-
AI heeft geen ethiek of gevoel — het kan geen morele afwegingen maken zoals mensen dat doen.
-
AI kan misbruikt worden — bijvoorbeeld voor deepfakes, spam of het beïnvloeden van meningen via sociale media.
Opdracht: Waar is AI een risico of nadeel?
Bekijk de onderstaande situaties. Geef per situatie aan of je denkt dat AI hier een risico of nadeel kan zijn, en leg kort uit waarom.
-
Een AI-systeem beoordeelt sollicitaties automatisch en kiest wie wordt uitgenodigd.
-
Een AI-chatbot geeft medisch advies zonder dat een arts meekijkt.
-
Een zelfrijdende auto moet een noodbeslissing nemen in het verkeer.
-
Een bedrijf gebruikt AI om te controleren hoeveel pauze werknemers nemen.
-
Een leerling gebruikt AI om al zijn schoolopdrachten te laten schrijven.
Inleveren
- Neem de punten over in een text document en vul deze in. Lever een TXT document in.
6, slim gebruik van AI
Hoe benut je de voordelen en vermijd je de nadelen?
AI is een krachtig hulpmiddel, maar het is belangrijk dat je er bewust en slim mee omgaat. Dat betekent: weten wanneer je AI goed kunt inzetten, en ook herkennen wanneer het beter is om zelf na te denken of iets te controleren.
✔ Zo benut je de voordelen van AI:
-
Gebruik AI als assistent, niet als vervanger van je eigen denkwerk.
-
Laat AI je helpen bij brainstormen, schrijven of samenvatten — maar controleer altijd de output.
-
Gebruik AI om saaie of repetitieve taken te versnellen, zoals opmaak of vertalingen.
-
Combineer AI-output met je eigen kennis en creativiteit, zodat het persoonlijk blijft.
✘ Zo vermijd je de nadelen van AI:
-
Geloof niet alles wat AI zegt — controleer feiten en cijfers.
-
Gebruik AI niet voor belangrijke beslissingen zonder menselijk toezicht.
-
Denk na over privacy en veiligheid — deel geen persoonlijke gegevens.
-
Gebruik AI niet om te spieken of werk van anderen als je eigen werk in te leveren
- Weet wanneer je AI niet moet gebruiken: Soms is menselijk oordeel belangrijker, bijvoorbeeld bij gevoelige onderwerpen of ethische keuzes.
Opdracht: Slim of niet slim gebruik van AI?
Lees de onderstaande situaties. Geef per situatie aan of dit slim gebruik van AI is of juist onverstandig, en leg uit waarom.
-
Een leerling vraagt ChatGPT om 5 ideeën voor een spreekbeurt en kiest daarna zelf het beste idee.
-
Iemand plakt een volledige schoolopdracht in ChatGPT en levert het antwoord in zonder iets aan te passen.
-
Een student laat AI een samenvatting maken van een moeilijke tekst en controleert die daarna met de originele tekst erbij.
-
Iemand vraagt aan een AI wat de beste medicijnen zijn voor zijn klachten, zonder met een arts te praten.
-
Een leerling gebruikt AI om zijn code te verbeteren, maar probeert eerst zelf te begrijpen wat het doet.
Inleveren
- Neem de punten over in een text document en vul deze in. Lever een TXT document in.
7, Prompt engineering
Prompt engineering is het slim en bewust formuleren van opdrachten of vragen (prompts) voor een AI-systeem zoals ChatGPT, zodat je een zo goed mogelijk en bruikbaar antwoord krijgt.
Als jij aan een mede student vraagt of hij je met de vorige opdracht kan helpen, dan weet hij waarschijnlijk waar je het voer hebt. Een AI zoals ChatGPT weet dat niet. Omdat CHatGPT de context niet weet.
De contect is alles om een vraag heen.
Voorbeeld
"Maak een quiz."
Deze opdracht is vaag. De AI weet niet:
-
Over welk onderwerp?
-
Voor welke doelgroep?
-
Hoeveel vragen?
-
Meerkeuze of open vragen?
Voorbeeld met goede prompt engineering:
"Maak een quiz van 5 meerkeuzevragen voor leerlingen van 14 jaar over het onderwerp 'kunstmatige intelligentie'. Geef bij elke vraag vier antwoordopties en geef aan welk antwoord het juiste is."
Deze prompt:
-
geeft context (leeftijd, onderwerp)
-
is duidelijk (5 vragen, meerkeuze)
-
is doelgericht (quiz maken)
-
bevat extra details (aantal opties en juiste antwoord)
We gaan hier in de mdule prompt engineering verder mee werken, maar we gaan nu vast een oefening doen.
Opdracht, maak een prompt
Maak één prompt waarin je je AI vraagt een PHP programma dat zoveel mogelijk lijkt op:
Je hoeft geen database te maken, je hoeft alleen front-end code te maken.
Maak dit met één prompt en wees zo compleet mogelijk.
Inleveren
- De door jouw gemaakte prompt
- Het resultaat in code
Snake Challenge
Snake Challenge!
Maak je eigen snake versie!
In deze laatste les ga je zelf aan de slag. Je krijgt een paar uitdagingen waar je zelf oplossingen voor moet bedenken. De code werkt al goed, maar nog niet perfect: je slang kan bijvoorbeeld zomaar uit beeld verdwijnen. En misschien wil je het spel ook leuker of spannender maken?
✨ Bedenk en bouw je eigen toevoeging
Voeg nu zelf iets toe aan het spel. Kies uit een van de onderstaande ideeën, of verzin er zelf een!
🚀 Idee 1: Maak het spel sneller
Verlaag de vertraging een beetje elke keer als je een appel eet. Dan wordt het spel steeds spannender!
vertraging = max(1, vertraging - 1)
🎈 Idee 2: Verander de kleur van de slang bij elke appel
Gebruik bijvoorbeeld random.choice(["green", "blue", "purple"])
om de kleur van de slang steeds te wisselen.
⛅️ Idee 3: Maak obstakels op het scherm
Voeg een vaste lijst toe met blokken waar de slang niet overheen mag. Als hij ze raakt: game over!
💡 Extra idee?
Heb je zelf een ander idee? Ga ervoor! Laat je creativiteit zien. Denk aan een "pauze-knop", meerdere appels tegelijk, of een level-systeem.
📄 Inleveren
- Maak een korte beschrijving van wat je hebt aangepast (txt bestand)
- Lever je aangepaste en werkende spel in.
Kennis Check Blok 2
Kennis Check Blok 2
Vallende Stenen
Waarom is het handig om de speler en de vallende steen elk met een eigen variabele voor x en y te beheren?
Zo kun je de positie van elk object onafhankelijk aanpassen en er later berekeningen mee doen, zoals bewegen of botsing detecteren. Als je maar één variabele zou gebruiken, zou je die flexibiliteit verliezen.
Wat is het verschil tussen tekenen op het scherm en het updaten van een positie?
Tekenen op het scherm gebeurt in de `draw()`-functie en bepaalt wat de speler ziet. Updaten van posities gebeurt in de `update()`-functie en bepaalt waar objecten zich bevinden. Zonder update gebeurt er niets; zonder draw zie je niets.
Waarom gebruik je een functie zoals `colliderect()` en schrijf je geen eigen code om te controleren of objecten elkaar raken?
`colliderect()` is getest en betrouwbaar. Zelf botsingsdetectie schrijven is foutgevoelig en complex. Door bestaande functies te gebruiken maak je je code korter, leesbaarder en minder foutgevoelig.
Waarom wordt er gewerkt met `random.randint()` om de x-positie van de steen te kiezen?
Daardoor weet de speler niet waar de volgende steen zal vallen, wat het spel spannender maakt. Zonder toeval zou het spel voorspelbaar en saai worden.
Wat gebeurt er als je geen limiet stelt aan de onderkant van het scherm voor vallende objecten?
Dan vallen stenen eindeloos door en verdwijnen ze uit beeld, wat kan zorgen voor geheugenproblemen of verwarring bij de speler. Je moet ze resetten of verwijderen als ze te ver vallen.
Waarom wordt in het spel vaak gebruik gemaakt van globale variabelen?
Omdat `draw()` en `update()` automatisch worden aangeroepen door Pygame Zero en geen parameters gebruiken, moeten variabelen buiten deze functies beschikbaar zijn. Globale variabelen maken dit mogelijk.
Wat is het verschil tussen een spel dat ‘reageert’ op invoer en een animatie die altijd hetzelfde doet?
Een spel reageert op wat de speler doet, zoals het indrukken van pijltjestoetsen. Bij een animatie loopt alles vanzelf, zonder dat de gebruiker invloed heeft. Interactiviteit is wat van een animatie een spel maakt.
Snake
Waarom bestaat een slang uit een lijst met segmenten in plaats van één positie?
Doordat de slang uit meerdere segmenten bestaat kun je de groei en beweging ervan beter simuleren: bij eten wordt een segment toegevoegd en anders wordt het achterste segment verwijderd. Zo ontstaat een realistische slangbeweging.
Wat is het nut van een timer variabele in `update(dt)`?
De timer bepaalt hoe snel de slang beweegt (bijv. elke 0.15 seconden). Door `dt` op te tellen weet je precies wanneer de slang een stapje moet maken, los van de framerate.
Waarom gebruiken we een `direction_queue` in plaats van alleen de huidige richting?
Een queue maakt het mogelijk om meerdere toetsaanslagen op te slaan vóór de volgende beweging. Zo kan de slang snel achter elkaar van richting veranderen, zonder meteen om te draaien en zichzelf te 'eten'.
Waarom gebruiken we `colliderect()` of gelijkwaardigheidsonderzoek in plaats van handmatige afstandsvergelijking?
`colliderect()` is eenvoudiger en betrouwbaarder: het controleert rechthoekige botsingen automatisch. Handmatig rekenen op coördinaten kan fouten veroorzaken.
Waarom laten we de slang 'wrappen' naar de andere kant van het scherm bij randbotsing?
Door wrappen speelt het spel vloeiender en blijft de slang ononderbroken bewegen. Zonder wrap zou botsen op de rand een abrupt einde betekenen.
Hoe draagt het willekeurig plaatsen van voedsel bij aan de speelervaring?
Het willekeurig zetten van voedsel voorkomt patronen en houdt het spel uitdagend. De speler moet telkens de slang naar een onverwachte plek sturen.
Wat gebeurt er als de slang op zichzelf botst, en waarom willen we dat checken vóór het toevoegen van een nieuw segment?
Botst de slang op zichzelf, dan eindigt het spel. Door te checken vóór je de kop toevoegt, voorkom je dat de slang in al zijn segmenten terechtkomt — dat voorkomt onverwacht gedrag.
Waarom hebben we een `reset()`-functie die opnieuw alles initialiseert?
Een `reset()`-functie zorgt voor een strak begin na Game Over, met dezelfde beginvoorwaarden (slangpositie, timer, richting). Zo kun je herstarten zonder fouten.
Hoe maak je het spel moeilijker zonder de basiscode te veranderen?
Je kunt de moeilijkheid verhogen door de bewegingstimer in te korten, extra obstakels toe te voegen, of minder ruimte voor voedsel te geven. Zo blijft het uitdagend.
Introductie AI
Wat maakt AI anders dan gewone code?
AI-code is gebaseerd op het leren uit voorbeelden en herkent patronen, terwijl gewone code exact reageert op geprogrammeerde instructies. AI kan dus variabelen voorspellen, terwijl gewone code voorspelbaar blijft :contentReference[oaicite:1]{index=1}.
Waarom onderscheidt men AI-toepassingen in categorieën als classificatie, associatie, enz.?
Zo kun je concrete voorbeelden koppelen aan de manier waarop AI werkt. Elke categorie heeft eigen eigenschappen: classificatie herkent labels, optimalisatie zoekt naar de beste oplossing, creatie gaat over nieuwe inhoud maken, etc. :contentReference[oaicite:2]{index=2}.
Hoe helpt het indelen van AI in typen zoals voorspelling en optimalisatie om je begrip te verdiepen?
Je leert zo dat AI niet één technologie is, maar verschillende werkwijzen heeft afhankelijk van het doel—zoals voorspellen van verkoop of optimaliseren van routes. Dit maakt het makkelijker te kiezen welke techniek geschikt is voor een probleem. :contentReference[oaicite:3]{index=3}.
Wat betekent het dat AI 'minder voorspelbaar' is dan klassieke code?
Normale code geeft altijd hetzelfde resultaat bij dezelfde input. AI geeft verschillende output, omdat het leert van data en tot een inschatting komt. Hierdoor kan het fouten maken in onbekende situaties :contentReference[oaicite:4]{index=4}.
Waarom is het belangrijk om de voor- en nadelen van AI te begrijpen?
AI heeft veel kracht, zoals patronen herkennen en personaliseren, maar kan ook fouten maken, bevooroordeeld zijn of ondoorzichtig zijn ("black box"). Door deze aspecten te begrijpen kun je AI verantwoordelijk en effectief inzetten. :contentReference[oaicite:5]{index=5}.
Hoe zorgt goede prompt engineering ervoor dat je AI beter helpt begrijpen wat je wilt?
Door context, doel, doelgroep en format duidelijk te geven, krijgt de AI de juiste informatie om relevante en bruikbare output te leveren. Vage prompts leiden vaak tot onsamenhangende antwoorden.
Waarom moet je AI‑output altijd controleren, vooral in belangrijke situaties?
AI-systemen kunnen fouten maken, ongepaste of bevooroordeelde antwoorden geven—vooral zonder toezicht. Daarom is menselijke verificatie essentieel, bijvoorbeeld bij medische of juridische adviezen. :contentReference[oaicite:6]{index=6}.
Wat betekent het dat AI een ‘black box’ is, en waarom is dat problematisch?
Je weet vaak niet precies hoe een AI tot een bepaalde beslissing komt. Dit maakt het lastig om die beslissing uit te leggen of te controleren, wat risico's kan veroorzaken in gevoelige toepassingen. :contentReference[oaicite:7]{index=7}.
🛠️ Opdracht
Maak nu de kennis-check.
📤 Inleveren
Aan het einde van de kennis-check ontvang je een certificaat. Maak een schermafdruk en lever deze in.
Blok 3 - Web Front End
HTML - Phoenix
1 Introductie Phoenix Code
In deze les leer je werken met Phoenix Code: een makkelijke code-editor in de browser. Je maakt je eerste HTML-bestand aan en bekijkt het resultaat in je browser.
🎯 Leerdoelen
- Je weet wat Phoenix Code is en waarvoor je het gebruikt
- Je kunt een HTML-bestand maken en bewerken
- Je kunt je werk bekijken in de browser
💡 Wat is Phoenix Code?
- Phoenix Code is een gratis code-editor die in je browser werkt
- Je kunt er HTML, CSS en JavaScript mee maken
- Het werkt zonder installatie en je kunt alles opslaan als ZIP
🔰 Wat gaan we doen?
- We openen Phoenix Code
- We maken een HTML-bestand aan
- We bekijken het resultaat in de browser
🛠️ Stappenplan
1. Open Phoenix Code
- Ga naar https://phoenixcode.dev
- Klik opFile - StartProject en kies HTML5 project.
Je hebt nu een standaard HTML bestand (index.htm).
2. Maak een nieuw HTML-bestand
- Klik links op de map
- Klik op
+
en kies File - Geef het bestand de naam
myfirst.html
3. Zet deze voorbeeldcode erin
<!DOCTYPE html>
<html>
<head>
<title>Hallo wereld</title>
</head>
<body>
<h1>Hallo allemaal!</h1>
<p>Dit is mijn eerste HTML-pagina in Phoenix Code.</p>
</body>
</html>
4. Bekijk het resultaat
- Klik bovenaan op Run of Live Server
- De pagina verschijnt rechts of opent in een nieuw tabblad
- Klik aan de rechterkant op de verschillende onderdelen; je ziet nu welke HTML bij dezeonderdelen horen.
- Je kunt ook op het bestand dubbelklikken
Opdracht
Waarvoor dient HTML? Zet deze vraag en het antwoord op jouw HTML pagina.
🧠 Vragen
- Wat denk je dat <h1> en </h1> doet?
- En <p>....</p>, wat doent die denk je?
📤 Inleveren
- Screenshot van je browser waarin de vraag "Waarom dient HTML?" en jouw antwoord zichtbaar zijn.
Voorbeeld screenshot
2 Wat is HTML?
In deze les leer je wat HTML is, waarom het belangrijk is voor websites, en maak je je eerste eenvoudige webpagina met koppen en tekst.
🎯 Leerdoelen
- Je weet waar HTML voor wordt gebruikt
- Je kent de structuur van een HTML-pagina
- Je kunt zelf een eenvoudige HTML-pagina maken
💡 Wat is HTML?
- HTML betekent HyperText Markup Language
- Het is de basis van elke webpagina
- HTML vertelt de browser wat er op een pagina moet staan: tekst, afbeeldingen, knoppen, enzovoort
🎬Video - korte uitleg HTML
https://www.youtube.com/watch?v=it1rTvBcfRg
🔰 Wat gaan we doen?
- We maken een nieuw HTML-bestand in Phoenix Code
- We schrijven een pagina over onszelf met koppen en tekst
🛠️ Stappenplan
1. Maak een nieuw project in Phoenix Code
- Ga naar https://phoenixcode.dev
- Voeg een bestand toe met de naam
opdracht2.html
2. Typ deze HTML-code
<!DOCTYPE html>
<html>
<head>
<title>Over mij</title>
</head>
<body>
<h1>Hallo! Ik ben [jouw naam]</h1>
<p>Ik ben [leeftijd] jaar oud en ik zit op school bij [schoolnaam].</p>
<p>Mijn favoriete hobby is [hobby].</p>
</body>
</html>
3. Pas de tekst aan
- Vervang
[jouw naam]
,[leeftijd]
,[schoolnaam]
en[hobby]
door je eigen gegevens
4. Bekijk je werk
- Klik op Run of Live Server om je webpagina te bekijken
Uitleg
Tekst staat tussen tags. Deze tags geeft aan hoe een tekst moet worden weergegeven.
Vrijwel alle HTML tags bestaan uit een open-tag (bijvoorbeeld <p> en een sluit tag bijvoorbeeld </p>
<p>...</p> betekent dat de tekst een pragraaf is.
<h1>...</h1> betekent dat de tekst een header is.
Je hebt nog meer headers: <h2>, <h3>, .....
Opdracht
- Vervang de header die tussen <h1>...</h1> staat door een kleinere header.
- Zoek op hoe je tekst vet kan afdrukken en laat jouw naam ver afdrukken.
📤 Inleveren
- Maak een screenshot van je webpagina met aangepasgte header en jouw naam ver gedrukt.
3 Tekst en opmaak
In deze les leer je hoe je tekst opmaakt met HTML. Je leert koppen, paragrafen, vetgedrukte tekst, cursieve tekst en regels afbreken.
🎯 Leerdoelen
- Je kunt kopjes en paragrafen maken met HTML
- Je weet hoe je tekst vet of schuin maakt
- Je kunt regels afbreken met een <br>-tag
💡 Wat kun je met HTML-opmaak?
- HTML laat je tekst er beter uitzien en duidelijker maken voor de lezer
- Je gebruikt kopjes om structuur aan te brengen, en
<p>
om losse alinea's te maken - Je kunt woorden vet of schuin maken om ze op te laten vallen
🔰 Wat gaan we doen?
- We maken een pagina met meerdere kopjes en paragrafen
- We oefenen met
<strong>
,<em>
en<br>
📝 Eenvoudige HTML-tags voor tekstopmaak
Tag | Betekenis | Voorbeeld | Uitleg |
---|---|---|---|
<h1> t/m <h6> |
Koppen | <h1>Grote titel</h1> |
<h1> is de grootste kop, <h6> de kleinste |
<p> |
Paragraaf / alinea | <p>Dit is een stukje tekst.</p> |
Zorgt voor witruimte vóór en na |
<strong> |
Vetgedrukt (belangrijk) | <strong>Let op!</strong> |
Wordt ook door screenreaders benadrukt |
<em> |
Cursief (nadruk) | <em>Heel belangrijk</em> |
Geeft nadruk, ook voor screenreaders |
<br> |
Regellijn afbreken | Eerste regel<br>Tweede regel |
Breekt een regel zonder nieuwe paragraaf (deze tag bestaat alleen uit een openingstab) |
🛠️ Stappenplan
1. Maak een nieuw project of nieuw bestand in Phoenix Code
- Noem het bestand
tekst.html
2. Typ of plak deze HTML-code
<!DOCTYPE html>
<html>
<head>
<title>Mijn interesses</title>
</head>
<body>
<h1>Over mij</h1>
<p>Hallo! Ik ben <strong>[jouw naam]</strong>. Ik ben <em>enthousiast</em> over programmeren.</p>
<h2>Mijn hobby's</h2>
<p>Ik hou van muziek maken<br>voetballen<br>en gamen.</p>
<h2>Toekomst</h2>
<p>Later wil ik werken als programmeur bij een groot bedrijf.</p>
</body>
</html>
3. Pas de inhoud aan
- Vervang de tekst door jouw eigen naam en interesses
- Gebruik minstens één
<strong>
, één<em>
en één<br>
4. Bekijk je werk
- Klik op Run of Live Server om het resultaat te zien
🧠 Reflectie
- Wat doet
<br>
precies? - Wanneer zou je
<strong>
gebruiken en wanneer<em>
? - Hoe maak je een tekst extra duidelijk voor de lezer?
📤 Inleveren
- Maak een screenshot van jouw pagina waarin opmaak en breekregels zichtbaar zijn
4 Afbeeldingen en links
In deze les leer je hoe je een afbeelding op een webpagina toont en hoe je een klikbare link toevoegt naar een andere website.
🎯 Leerdoelen
- Je kunt een afbeelding invoegen met HTML
- Je kunt een link maken naar een andere website
- Je begrijpt wat attributen zoals
src
,alt
enhref
doen
💡 Wat zijn afbeeldingen en links in HTML?
- Afbeelding: je gebruikt de tag
<img>
om een foto of plaatje te tonen - Link: je gebruikt de tag
<a>
om een klikbare link te maken - Je gebruikt attributen zoals:
src
= locatie van de afbeeldingalt
= tekst als de afbeelding niet geladen wordthref
= doel van de link
🎬Voorbeeld
Hoe maak je een link?
https://www.youtube.com/watch?v=gOioxltfh48
Hoe voeg je een plaatje toe op je web pagina?
https://www.youtube.com/watch?v=Hh_se2Zqsdk
🔰 Wat gaan we doen?
- We voegen een afbeelding toe aan onze pagina
- We maken een link naar een favoriete website
🛠️ Stappenplan
1. Maak een nieuw HTML-bestand in Phoenix Code
- Noem het bestand
afbeelding.html
2. Typ of plak deze HTML-code
<!DOCTYPE html>
<html>
<head>
<title>Afbeelding en link</title>
</head>
<body>
<h1>Mijn favoriete dier</h1>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Cat03.jpg" alt="Foto van een kat" width="300">
<p>Meer informatie over katten vind je op
<a href="https://nl.wikipedia.org/wiki/Kat_(dier)" target="_blank">Wikipedia</a>.
</p>
</body>
</html>
3. Pas de inhoud aan
- Vervang de afbeelding met een plaatje dat jij leuk vindt (gebruik Google of Wikipedia en kopieer de afbeeldingslink)
- Verander de link naar jouw favoriete website
- Verander de tekst zodat het bij jouw afbeelding past
4. Bekijk je werk
- Klik op Run of Live Server om je pagina te testen
🧠 Reflectie
- Wat gebeurt er als je een verkeerde link of afbeelding gebruikt?
- Waarom is het belangrijk om de
alt
-tekst te gebruiken?
📤 Inleveren
- Maak een screenshot van je webpagina met een afbeelding én een werkende link
5 Lijsten in HTML
In deze les leer je hoe je lijsten maakt met HTML. Je leert zowel opsommingen als genummerde lijsten maken.
🎯 Leerdoelen
- Je weet wat het verschil is tussen een genummerde en een opsomming
- Je kunt een lijst maken met HTML
- Je kunt zelf kiezen welk type lijst het best past
💡 Wat zijn lijsten in HTML?
- Je gebruikt een lijst om dingen op een rijtje te zetten
- Opsomming (bullets): gebruik je met
<ul>
= unordered list - Genummerde lijst: gebruik je met
<ol>
= ordered list - Elk item in een lijst staat in een
<li>
= list item
🔰 Wat gaan we doen?
- We maken een lijst van hobby’s
- We maken een genummerde top 3 van favoriete dingen
🎬Voorbeeld
https://www.youtube.com/watch?v=2O8pkybH6po
🛠️ Stappenplan
1. Maak een nieuw HTML-bestand in Phoenix Code
- Noem het bestand
lijsten.html
2. Typ of plak deze HTML-code
<!DOCTYPE html>
<html>
<head>
<title>Mijn lijsten</title>
</head>
<body>
<h1>Mijn hobby's</h1>
<ul>
<li>Gamen</li>
<li>Voetballen</li>
<li>Tekenen</li>
</ul>
<h2>Top 3 favoriete snacks</h2>
<ol>
<li>Pizza</li>
<li>Frikandel</li>
<li>Chips</li>
</ol>
</body>
</html>
Opdracht
Verander de pagina en maak:
- een numbered list van dingen die jij luek vind om te doen. Op nummer 1 staat dan wat je het leukst vnd, op 2 wat je daarna het leukts vind, etc. etc. Noem tenminst 5 dingen.
- een unnumbered lists van dingen die je tot nu hebt geleerd van software development.
Klik op Run of Live Server om je pagina te testen
📤 Inleveren
- Maak een screenshot van jouw webpagina met beide lijsten zichtbaar
6 Tabellen in HTML
In deze les leer je hoe je een eenvoudige tabel maakt met HTML. Je gebruikt dit om informatie netjes in kolommen en rijen te tonen.
🎯 Leerdoelen
- Je weet wat een HTML-tabel is en waarvoor je die gebruikt
- Je kunt een eenvoudige tabel maken met rijen en kolommen
- Je gebruikt de tags
<table>
,<tr>
,<td>
en<th>
💡 Wat is een tabel in HTML?
- Een tabel is een manier om informatie te tonen in rijen (horizontaal) en kolommen (verticaal)
<table>
= de hele tabel<tr>
= een rij (table row)<td>
= een cel met gegevens (table data)<th>
= een kopcel (table header)
In een HTML tabel moet elke regel evenveel kolommen bevatten. Om dat voor elkaar te krijgen zou je lege kolommen kunne toevogen als een regel te weinig kolommen heeft.
In een tabell moet elke regel precies evenveel kolommen bevatten!
🎬Voorbeeld
https://www.youtube.com/watch?v=2O8pkybH6po
🔰 Wat gaan we doen?
- We maken een tabel met onze schoolrooster of favoriete eten
- We geven de bovenste rij een titel (kopjes)
🛠️ Stappenplan
1. Maak een nieuw HTML-bestand in Phoenix Code
- Noem het bestand
tabel.html
2. Typ of plak deze HTML-code
<!DOCTYPE html>
<html>
<head>
<title>Mijn schoolrooster</title>
</head>
<body>
<h1>Mijn schoolrooster</h1>
<table border="1">
<tr>
<th>Dag</th>
<th>Vakken</th>
</tr>
<tr>
<td>Maandag</td>
<td>Nederlands, Wiskunde</td>
</tr>
<tr>
<td>Dinsdag</td>
<td>Engels, Gym</td>
</tr>
</table>
</body>
</html>
3. Pas de inhoud aan
- Vervang de dagen en vakken door jouw eigen rooster
4. Bekijk je werk
- Klik op Run of Live Server om je tabel te bekijken
📤 Inleveren
- Maak een screenshot van jouw tabel met minstens 6 rijen (kopregel plus maamndag t/m vrijdag)
7 Formulieren in HTML
In deze les leer je hoe je een formulier maakt in HTML. Je leert invoervelden gebruiken en een knop toevoegen om informatie te versturen.
🎯 Leerdoelen
- Je weet wat een formulier is en waarvoor je het gebruikt
- Je kunt invoervelden maken voor tekst, getallen en knoppen
- Je kunt een formulier laten verzenden naar een ander HTML- of PHP-bestand
💡 Wat is een formulier?
- Een formulier gebruik je om gegevens in te voeren op een website
- Denk aan: contactformulieren, inlogvelden, zoekvelden, bestellingen
- Je gebruikt tags zoals:
<form>
– de container<input>
– invoerveld<label>
– beschrijving van een veld<button>
of<input type="submit">
– knop
Wil je een voorbeeld zien, dan kan je hier kijken.
🔰 Wat gaan we doen?
- We maken een formulier met naam, leeftijd en hobby
- We laten het formulier "doen alsof" het iets verstuurt
🎬Voorbeeld
https://www.youtube.com/watch?v=2O8pkybH6po
🛠️ Stappenplan
1. Maak een nieuw HTML-bestand in Phoenix Code
<!DOCTYPE html>
<html>
<head>
<title>Contactformulier</title>
</head>
<body>
<h1>Vertel iets over jezelf</h1>
<form action="#" method="post">
<label for="naam">Naam:</label><br>
<input type="text" id="naam" name="naam"><br><br>
<label for="leeftijd">Leeftijd:</label><br>
<input type="number" id="leeftijd" name="leeftijd"><br><br>
<label for="hobby">Hobby:</label><br>
<input type="text" id="hobby" name="hobby"><br><br>
<input type="submit" value="Verstuur">
</form>
</body>
</html>
- Noem het bestand
formulier.html
2. Typ of plak deze HTML-code
Opdracht
Gebruik het formulier als voorbeeld en maak zelf een formulier.
Vraag de gebruiker om de volgende gegvens:
- voornaam
- achternaam
- adres
- postcode
- woonplaats
- teelfoonnummer
Bekijk je werk
- Klik op Run of Live Server en vul het formulier in
- Klik op "Verstuur" – er gebeurt nog niets, dat komt later met PHP!
🧠 Reflectie
- Wat zou je met dit formulier willen doen als het "echt" was?
📤 Inleveren
- Maak een screenshot van jouw formulier met ingevulde gegevens
8 Mini-project: Jouw persoonlijke homepage
In deze les ga je zelf een echte webpagina bouwen over jezelf. Je gebruikt alles wat je hebt geleerd over HTML: tekst, afbeeldingen, lijsten, tabellen en een formulier.
🎯 Leerdoelen
- Je kunt zelfstandig een complete HTML-pagina maken
- Je gebruikt verschillende HTML-elementen op de juiste manier
- Je denkt na over opbouw, inhoud en structuur van een webpagina
💡 Wat gaan we doen?
- Je maakt een persoonlijke homepage met meerdere onderdelen
- Je laat zien wat je geleerd hebt in lessen 1 t/m 6
🛠️ Opdracht
Maak een bestand mijnhomepage.html
aan en zorg dat het deze onderdelen bevat:
✅ Verplichte onderdelen:
- Een titel en
<h1>
-kop met je naam - Minstens twee
<p>
paragrafen over jezelf - Een
<img>
met een afbeelding die bij jou past (bijv. hobby, dier of sport) - Een
<ul>
of<ol>
met je favoriete dingen (bijv. films, games, hobby's) - Een
<table>
met 2 of meer rijen, bijv. je rooster of een eetplanner - Een
<a>
-link naar een website die jij vaak bezoekt - Een klein
<form>
met 2-3 invoervelden (bijv. naam + boodschap + knop)
Basis HTML code
<!DOCTYPE html>
<html>
<head>
<title>Contactformulier</title>
</head>
<body>
</body>
</html>
🌟 Extra uitdaging (optioneel):
- Gebruik
<strong>
,<em>
en<br>
om je pagina mooier te maken - Geef je pagina een leuke kleur of lettertype met een inline CSS-regel
📤 Inleveren
- Maak een screenshot van jouw volledige homepage
CSS - Phoenix
1 Wat is CSS?
In deze les leer je wat CSS is, waarom het belangrijk is, en hoe je het gebruikt om de opmaak van een webpagina aan te passen. Je gaat zelf aan de slag met eenvoudige kleuren en lettertypes.
🎯 Leerdoelen
- Je weet wat CSS doet en waarom we het gebruiken
- Je kunt een eenvoudige opmaakregel toevoegen via de HTML-tag (inline)
- Je kunt kleuren en lettertypes toepassen met CSS
💡 Wat is CSS?
- CSS staat voor Cascading Style Sheets
- Met CSS bepaal je hoe HTML eruitziet: kleuren, lettertypes, ruimte, achtergrond, enzovoort
- Zonder CSS is een website saai: zwart-wit, standaardletters, geen stijl
🔧 Hoe voeg je CSS toe?
- Je kunt CSS op drie manieren gebruiken:
- Inline – direct in het HTML-element (in deze les)
- In een <style>-blok – in de
<head>
(volgende les) - In een extern .css-bestand – voor grote projecten (komt later)
Voorbeeld: CSS inline gebruiken
<p style="color: red;">Deze tekst is rood</p>
<h1 style="font-family: Arial;">Welkom</h1>
De style="..."
zit in het HTML-element en verandert de stijl van dat element.
🎬CSS Introduction
In deze korte video wordt uitgelegd wat CSS is. Kijk de video en als je nog niet alles begrijpt dan is dan prima, want we gaan alles ook nog een keer in deze lessen uitleggen.
https://www.youtube.com/watch?v=AGDDdsiZ0Ko&list=PLP9IO4UYNF0UCaUSF3XNZ1U9f01E5h5PM
🛠️ Opdracht – Pas kleur en stijl toe
Let op: gebruik Phoenix Code om deze opdracht te maken.
- Maak een nieuw HTML-bestand aan, noem het
css-les1.html
- Plak onderstaande code in het bestand:
<!DOCTYPE html>
<html>
<head>
<title>Mijn eerste CSS</title>
</head>
<body>
<h1>Welkom op mijn pagina</h1>
<p>Ik ben een beginnende webdeveloper.</p>
<p>Ik leer nu hoe ik CSS kan gebruiken.</p>
</body>
</html>
- Pas de HTML aan met inline CSS, zodat:
- De
<h1>
een blauwe kleur krijgt en een ander lettertype (bijv. Arial) - De eerste
<p>
rood wordt en gecentreerd staat - De tweede
<p>
een andere kleur krijgt die jij mooi vindt
- De
- Bekijk je werk in Phoenix Code via Run
📤 Inleveren
- Maak een screenshot van jouw pagina met de aangepaste kleuren en lettertypes
2 CSS in het <style>-blok
In deze les leer je hoe je CSS los van HTML schrijft in het <style>-blok boven in het document. Je gebruikt selectoren zoals body
, h1
en p
om elementen op te maken.
🎯 Leerdoelen
- Je begrijpt waarom het slim is om CSS apart te schrijven
- Je kunt stijlen toevoegen in het <style>-blok
- Je kunt opmaak toepassen op meerdere elementen tegelijk met selectors
💡 Wat is het <style>-blok?
- Het
<style>
-blok zet je bovenin de pagina, tussen de<head>
-tags - Je schrijft daar CSS die geldt voor de hele pagina
- Je gebruikt een selector om aan te geven welk element je wilt opmaken. Hieronder vind je de selectors body h1 en p
Voorbeeld:
<style>
body {
background-color: lightyellow;
}
h1 {
color: navy;
font-family: Verdana;
}
p {
color: darkgreen;
text-align: center;
}
</style>
In dit voorbeeld zijn body, h1 en p de element-selectors en die verwijzen naar de HTML-elementen.
🛠️ Opdracht – Stijl je pagina met het <style>-blok
- Maak een nieuw HTML-bestand in Phoenix Code, noem het
css-les2.html
- Plak deze basiscode in het bestand:
<!DOCTYPE html>
<html>
<head>
<title>Stijl oefenen</title>
<style>
/* Voeg hier je CSS toe */
</style>
</head>
<body>
<h1>Over mij</h1>
<p>Ik ben een student die leert over HTML en CSS.</p>
<p>Ik vind het leuk om websites te maken.</p>
</body>
</html>
- Voeg in het
<style>
-blok CSS toe zodat:- De
body
een lichtgrijze achtergrondkleur krijgt - Alle
<h1>
-koppen blauw worden en een ander lettertype krijgen (bijv. Georgia) - De
<p>
-tekst donkergroen wordt en gecentreerd staat
- De
🧠 Reflectie
- Wat is het voordeel van een
<style>
-blok boven inline stijl? - Welke stijlen gelden voor de hele pagina, ook als je later extra tekst toevoegt?
- Wat zou je veranderen om je pagina nog mooier te maken?
Opdracht
- Voer alle stappen uit zoals hierboven beschreven.
📤 Inleveren
- Maak een screenshot van jouw pagina waarin je aangepaste stijlen duidelijk zichtbaar zijn
3 Tekstopmaak en achtergronden
In deze les leer je hoe je tekst kunt opmaken met kleur, lettertype, uitlijning en hoe je een achtergrondkleur toevoegt aan je pagina.
🎯 Leerdoelen
- Je kunt tekst centreren of links/rechts uitlijnen
- Je kunt de kleur en het lettertype van tekst aanpassen
- Je kunt de achtergrondkleur van de hele pagina of een specifiek element aanpassen
- Je weet wat een selector is en wat het verschil is tussen een class-selector en een element-selector.
Selectors; element-selector en class selector
Zoals we eersder zagen beginnen we een CSS blok met een selector.
Tot nu toe hebben we element-selectors gebruikt. Deze verwezen naar de HTML-elementen.
We kennen ook class-selectors deze verwijzen naar classes. Classes zien er in HTML als volgt uit:
<div class="blok"> ... </div>
In dit geval is blok de naam van de selector.
In CSS verwijzen we naar een class op de volgende manier.
.blok {
/* stijlregels */
}
Een class selector in CSS begint met een . (punt)
💡 Belangrijke CSS-eigenschappen in deze les
color
– de kleur van de tekstfont-family
– het lettertypetext-align
– de uitlijning van tekst (bijv.center
)background-color
– de achtergrondkleur van een element
Voorbeeld:
.my-header {
color: darkred;
font-family: 'Comic Sans MS';
text-align: center;
background-color: lightyellow;
}
🛠️ Opdracht – Maak een kleurrijke poster
- Maak een nieuw HTML-bestand in Phoenix Code, noem het
poster.html
- Plak deze HTML-code in het bestand:
<!DOCTYPE html>
<html>
<head>
<title>Mijn poster</title>
<style>
/* Voeg hier jouw stijlen toe */
</style>
</head>
<body>
<h1>Mijn favoriete onderwerp</h1>
<p class="eerste">Dit is een stukje tekst over iets wat ik leuk vind.</p>
<p>Bijvoorbeeld een sport, hobby, film of spel.</p>
<p>Of een vak op College Amstelland dat je heel leuk vind :)</p>
</body>
</html>
- Geef je
body
een leukebackground-color
- Geef je
h1
een opvallende kleur, een ander lettertype entext-align: center
Gebruik hiervoor de class met class-selector.header
- Geef de
p
-teksten elk een andere kleur en uitlijning en gebruik hiervoor classes met class-selectors. Geef elke <p> hiervoor een aparte class. - Experimenteer met verschillende kleuren en lettertypes zoals:
Arial
,Georgia
,Courier New
,Comic Sans MS
📤 Inleveren
- Maak een screenshot van jouw kleurrijke poster waarin de CSS code ook duidelijk te lezen is.
4 Box-model: randen, padding en margins
In deze les leer je hoe je ruimte kunt maken rondom en binnenin een element met CSS. Je leert ook hoe je randen toevoegt en de afstand tussen blokken regelt.
🎯 Leerdoelen
- Je begrijpt het verschil tussen margin, padding en border
- Je kunt ruimte tussen tekstblokken instellen met CSS
- Je kunt randen toevoegen aan blokken om ze beter zichtbaar te maken
💡 Wat is het box-model?
Elk HTML-element is als een ‘doos’ opgebouwd uit vier lagen:
- Content: de tekst of afbeelding binnenin
- Padding: ruimte tussen de content en de rand
- Border: de rand om het element heen
- Margin: de ruimte tussen dit element en andere elementen
Voorbeeld:
.blok {
margin: 15px;
border: 2px solid black;
padding: 20px;
background-color: lightblue;
}
🛠️ Opdracht – Drie gekleurde tekstblokken
- Maak een nieuw HTML-bestand in Phoenix Code, noem het
boxmodel.html
- Plak onderstaande code in je bestand:
<!DOCTYPE html>
<html>
<head>
<title>Box model test</title>
<style>
.blok {
border: 2px solid black;
padding: 20px;
margin: 20px;
background-color: lightyellow;
}
</style>
</head>
<body>
<div class="blok">
<h2>Blok 1</h2>
<p>Dit is het eerste tekstblok met padding en marge.</p>
</div>
<div class="blok">
<h2>Blok 2</h2>
<p>Ook dit blok heeft een rand en achtergrondkleur.</p>
</div>
<div class="blok">
<h2>Blok 3</h2>
<p>Pas de kleuren en afstanden aan zoals jij het mooi vindt.</p>
</div>
</body>
</html>
- Pas de CSS aan zodat:
- Ieder blok een andere
background-color
heeft - De
margin
tussen de blokken groter of kleiner is (proberen met10px
,30px
, enz.) - De
padding
meer of minder ruimte geeft binnen het blok
- Ieder blok een andere
- Test verschillende
border
-instellingen, zoalsdashed
,double
of4px solid red
🧠 Reflectie
- Wat is het verschil tussen
margin
enpadding
? - Waarom is het handig om borders tijdelijk toe te voegen tijdens het bouwen?
- Wat gebeurt er als je
padding
op 0 zet?
📤 Inleveren
- Geef antwoord op de drie reflectievragen in eigen woorden en lever dat in, in een txt- of PDF bestand.
- Voeg een schermafdruk van jouw boxen toe aan de PDF.
5 Classes gebruiken in CSS
In deze les leer je hoe je een class
gebruikt om meerdere elementen dezelfde opmaak te geven. Zo kun je stijlen hergebruiken zonder telkens dezelfde regels te schrijven.
🎯 Leerdoelen
- Je weet wat een
class
is en hoe je die toepast in HTML - Je kunt CSS-stijlen koppelen aan een class
- Je kunt verschillende klassen maken en gebruiken op één pagina
💡 Wat is een class?
- Een
class
is een naam die je aan een element geeft zodat je het in CSS kunt opmaken - Je zet in HTML:
<div class="menu">
- In CSS gebruik je een punt (.) om een class aan te roepen:
.menu { ... }
- Je kunt dezelfde class meerdere keren gebruiken.
- Een HTML element kan ook meerdere classes bevatten:
<div class="menu speciaal">
De stylen met de class-selector menu én speciaal zijn beiden van teopassing op dit element.
Voorbeeld:
<div class="menu">Pizza Margherita</div>
<div class="menu speciaal">Spaghetti Bolognese</div>
.menu {
background-color: lightyellow;
padding: 10px;
border: 1px solid gray;
margin-bottom: 10px;
}
.speciaal {
color: red;
}
🛠️ Opdracht – Bouw een gestyleerde menukaart
- Maak een nieuw HTML-bestand in Phoenix Code, noem het
menukaart.html
- Plak onderstaande code als startpunt:
<!DOCTYPE html>
<html>
<head>
<title>Menukaart</title>
<style>
.menu {
background-color: lightyellow;
border: 2px solid #999;
padding: 15px;
margin-bottom: 15px;
font-family: Georgia;
}
</style>
</head>
<body>
<h1>Restaurant De Codepan</h1>
<div class="menu">Pizza Margherita</div>
<div class="menu">Truffelpasta met parmezaan</div>
<div class="menu">Ravioli met spinazie en ricotta</div>
<div class="menu">Chef’s surprise</div>
</body>
</html>
- Pas zelf de kleuren, marges of lettertypes aan zoals jij het mooier vindt
- Voeg minstens twee eigen gerechten toe aan de lijst
- Geef twee menu-items de class
speciaal
en zorg ervoor dat deze speciale gerechten duidelijk opvallen door hun stijl aan te passen.
🧠 Reflectie
- Waarom is het handig om stijlen te herhalen met een class?
- Wat gebeurt er als je meerdere klassen aan één element geeft?
- Kun je bedenken wanneer je liever een class gebruikt dan een tag-selector (zoals
p
)?
📤 Inleveren
- Maak een screenshot van jouw gestyleerde menukaart in de browser.
6 Layout en positionering
In deze les leer je hoe je met behulp van blokken en eenvoudige CSS een duidelijke indeling (layout) maakt. Denk aan een header bovenaan, een middenstuk (main) en een footer onderaan.
🎯 Leerdoelen
- Je weet hoe je de layout van een pagina opbouwt met blokken (divs)
- Je kunt tekst en blokken centreren met
text-align
enmargin
- Je kunt blokken op een vaste breedte zetten
💡 Wat is een layout?
- Een layout is de structuur van je pagina – hoe dingen verdeeld zijn over het scherm
- Voor layout gebruiken we vaak het HTML-element
<div>
- Een
div
is een onopvallend blok dat je zelf kunt opmaken met CSS
Belangrijke CSS-eigenschappen:
text-align: center;
– centreren van tekstmargin: auto;
– centreren van blokkenwidth:
– bepaalt hoe breed een blok is (bijv.80%
of600px
)
Voorbeeld:
.blok {
width: 80%;
margin: 20px auto;
padding: 20px;
background-color: #f0f0f0;
text-align: center;
}
🛠️ Opdracht – Bouw een eenvoudige homepage-layout
- Maak een nieuw HTML-bestand in Phoenix Code, noem het
layout.html
- Plak onderstaande basiscode in het bestand:
<!DOCTYPE html>
<html>
<head>
<title>Mijn layout</title>
<style>
.blok {
width: 80%;
margin: 20px auto;
padding: 20px;
background-color: #eeeeee;
text-align: center;
}
.header {
background-color: lightblue;
}
.main {
background-color: white;
}
.footer {
background-color: lightgray;
}
</style>
</head>
<body>
<div class="blok header">
<h1>Welkom op mijn site</h1>
</div>
<div class="blok main">
<p>Hier komt de inhoud van je website.</p>
</div>
<div class="blok footer">
<p>Gemaakt door [jouw naam] - 2025</p>
</div>
</body>
</html>
- Pas de kleuren aan zodat het bij jouw stijl past
- Voeg een afbeelding toe in de main-blok en plaats jouw naam onderaan in de footer.
- Geef de blokken afgeronde hoeken (
border-radius
) van bijvoorbeeld15px
🧠 Reflectie
- Wat gebeurt er als je de
width
verandert naar60%
of400px
? - Hoe werkt
margin: auto
precies? - Wat zou je toevoegen als je een echte website maakt?
📤 Inleveren
- Maak een screenshot van jouw homepage met drie blokken die door jouw zijn vormgegeven.
7 CSS-selectors: element, class en id
In deze les leer je wat een id
-selector is en wanneer je die gebruikt. Je herhaalt ook wat een element
-selector en een class
-selector doet. Daarna pas je deze drie selectors toe in één pagina.
🎯 Leerdoelen
- Je herkent het verschil tussen element-, class- en id-selectors
- Je weet wanneer je een id gebruikt in plaats van een class
- Je kunt deze drie selectors toepassen in één pagina
💡 Wat zijn selectors in CSS?
Een selector in CSS bepaalt op welk HTML-element de stijlregel toegepast wordt.
Selector | Voorbeeld | Toepassing |
---|---|---|
Element | p { color: blue; } |
Geldt voor alle paragrafen |
Class | .belangrijk { color: red; } |
Geldt voor meerdere elementen met class="belangrijk" |
ID | #titel { font-size: 30px; } |
Geldt voor één uniek element met id="titel" |
Belangrijk verschil:
class
gebruik je voor meerdere elementenid
gebruik je maar één keer op een pagina – het is uniek
🛠️ Opdracht – Gebruik drie soorten selectors
- Maak een nieuw HTML-bestand in Phoenix Code, noem het
selectors.html
- Plak deze code als basis:
<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors</title>
<style>
/* Element-selector */
p {
color: green;
}
/* Class-selector */
.special {
font-weight: bold;
background-color: lightyellow;
}
/* ID-selector */
#titel {
font-size: 30px;
color: navy;
}
</style>
</head>
<body>
<h1 id="titel">Welkom op mijn pagina</h1>
<p>Dit is een normale paragraaf.</p>
<p class="special">Dit is een speciale paragraaf.</p>
<p>Nog een gewone paragraaf.</p>
</body>
</html>
- Pas de stijlen aan zoals jij het mooi vindt:
- Geef de
#titel
een andere kleur en een ander lettertype - Geef de class
.special
een rand of andere achtergrond
- Geef de
- Voeg zelf nog een extra class toe voor een andere stijl (bijv.
.opvallend
)
🧠 Reflectie
- Wanneer gebruik je een
class
en wanneer eenid
? - Wanneer gebuik je een element-selector, bijvoorbeeld
body
ofh1
? - Wat gebeurt er als je per ongeluk twee keer hetzelfde
id
gebruikt?
📤 Inleveren
- De refectievragen en jouw eigen antwoorden (eigen woorden) in een txt- of PDF bestand.
8 Flexbox: moderne layouttechniek
In deze les leer je werken met flexbox
. Dit is een moderne techniek waarmee je blokken makkelijk naast of onder elkaar zet, zonder ingewikkelde marges of floats.
🎯 Leerdoelen
- Je weet wat
display: flex
doet - Je kunt blokken naast elkaar zetten
- Je weet wat resonsive design is.
- Je kunt blokken centreren en de ruimte verdelen met
justify-content
enalign-items
💡 Wat is flexbox?
Met flexbox kun je elementen binnen een container netjes ordenen, zowel horizontaal als verticaal.
display: flex
zet de container om in een flex-containerjustify-content
bepaalt de horizontale uitlijning (zoalscenter
,space-between
)align-items
bepaalt de verticale uitlijning (zoalscenter
,flex-start
)
Met felxboxes maak je een responsive design: dit betekent dat je web pagina op verschillende aparaten goed wordt getoond en dat de boxes worden aangepast als de breedte van het scherm wordt aangepast.
Voorbeeld CSS:
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.blok {
width: 150px;
height: 150px;
background-color: lightblue;
text-align: center;
padding: 20px;
border-radius: 10px;
}
Een complete uitleg over alle mogelijkheden vind je hier: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
🛠️ Opdracht – Maak een blokkenrij met Flexbox
- Maak een nieuw bestand in Phoenix Code:
flex.html
- Gebruik deze HTML als basis:
<!DOCTYPE html>
<html>
<head>
<title>Flexbox oefening</title>
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f0f0f0;
padding: 20px;
}
.blok {
width: 150px;
height: 150px;
background-color: lightcoral;
color: white;
font-weight: bold;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<h1>Mijn Flexbox layout</h1>
<div class="container">
<div class="blok">Blok 1</div>
<div class="blok">Blok 2</div>
<div class="blok">Blok 3</div>
</div>
</body>
</html>
- Experimenteer met andere waarden voor
justify-content
zoalscenter
,space-around
offlex-end
- Voeg eventueel nog een vierde blok toe
- Pas de kleuren en tekst aan zodat het jouw stijl heeft
Opdracht
Maak het volgende ontwerp zo goed mogelijk na en gebruik daarbij Flexboxen zoals je dat net hebt geleerd.:
De drie blokken staan op het midden van de webpagina en je design is responisve.
📤 Inleveren
- Maak een screenshot van je resultaat.
- Indien je AI hebt gebruikt, stuur dan de AI-Chat log mee en zorg ervoor dat je alleen zaken gebruikt die we hebben behandeld en die je kan uitleggen.
Je kan worden gevraagd om jouw ontwerp te komen toe lichten / uitleggen.
--
Intro JS
1 Wat is JavaScript?
In deze les leer je wat JavaScript is, waarom we het gebruiken en hoe je jouw eerste stukje code uitvoert in de browser.
🎯 Leerdoelen
- Je weet wat JavaScript is en waarvoor het wordt gebruikt
- Je kunt een script uitvoeren in de browserconsole
- Je kunt een script toevoegen aan een HTML-pagina met <script>
💡 Wat is JavaScript?
- HTML zorgt voor de inhoud (tekst, koppen, knoppen...)
- CSS zorgt voor de opmaak (kleuren, marges, lettertypes...)
- JavaScript zorgt voor de interactie (reageren op klikken, invullen, bewegen...)
Bijvoorbeeld, een knop
-
HTML: een kale knop zonder opmaak
-
CSS: dezelfde knop, maar nu blauw met afgeronde hoeken
-
JavaScript: als je op de knop klikt, verschijnt er een melding ("popup")
Wat kun je met JavaScript doen?
- Een knop laten reageren als je erop klikt
- Een rekenmachine bouwen
- Invoer van een formulier controleren
- Spelletjes maken in de browser
🎬Video
In deze video wordt goed uitgelegd waarom je asl Web Developer, JavaScript moet leren.
Niet alles wat hier in de voorbeelden wordt getoond wordt niet allemaal in deze lessen behandeld. In blok 5 waarneer we het over DOM gaan hebben zal dit allemaal uitvoerig worden behandeld. We houden het voor nu even bij de basics.
https://www.youtube.com/watch?v=zofMnllkVfI
🔧 Oefenen in de browserconsole
- Open je browser (bijv. Chrome of Firefox)
- Rechtermuisklik op een lege plek op een website > Kies Inspecteren > Ga naar het tabblad Console
- Typ daar:
en druk op Enterconsole.log("Hallo wereld!");
- Je ziet in de console de tekst
Hallo wereld!
📄 JavaScript in een HTML-bestand gebruiken
- Open Phoenix Code
- Maak een nieuw HTML-bestand aan, noem het
script.html
- Typ of plak deze code in het bestand:
<!DOCTYPE html>
<html>
<head>
<title>Eerste script</title>
</head>
<body>
<h1>Welkom op mijn site</h1>
<p>Open de console om het bericht te zien.</p>
<script>
console.log("Dit bericht komt uit de HTML!");
</script>
</body>
</html>
- Sla op en open het bestand in de browser
- Open opnieuw de console en zie het bericht verschijnen
Zie je meer berichten of fouten?
Verwijder alle bestanden uit je project zodat je alleen script.html overhoud.
🛠️ Opdracht – Jouw eerste script
- Maak een HTML-bestand in Phoenix Code met een eigen titel en één paragraaf
- Voeg onderaan het bestand een script toe met minstens `console.log()`-regels
- Laat in de console bijvoorbeeld jouw naam en je favoriete dier zien
Voorbeeld:
console.log("Ik heet Yasmin");
console.log("Mijn lievelingsdier is een rode panda");
🧠 Reflectie
- Wat is het verschil tussen wat je in de browser ziet en wat je in de console ziet?
- Waarom gebruiken programmeurs de console?
📤 Inleveren
- Maak een screenshot van jouw HTML-bestand én de console-output.
2 Variabelen en de console
In deze les leer je hoe je informatie kunt opslaan in een variabele, hoe je dat zichtbaar maakt in de console, en waarom de console zo belangrijk is bij het programmeren.
🎯 Leerdoelen
- Je begrijpt wat een variabele is
- Je kunt een variabele maken met
let
ofconst
- Je gebruikt
console.log()
om informatie weer te geven - Je weet wat debuggen is en waarom de console daarbij helpt
💡 Wat is een variabele?
Een variabele is een soort doosje waarin je iets bewaart, zoals tekst of een getal.
let naam = "Jasper";
const leeftijd = 17;
let
= variabele die later nog mag veranderenconst
= variabele die niet meer mag veranderen
Je gebruikt console.log()
om de inhoud van een variabele te bekijken:
console.log(naam);
🔎 Wat is debuggen?
Debuggen betekent: je code controleren op fouten (bugs) en begrijpen wat er gebeurt.
- De console is een soort gereedschapskist voor programmeurs.
- Je kunt er controleren of variabelen kloppen, of een functie wordt uitgevoerd, of ergens een fout zit.
- Een programmeur kijkt vaak in de console tijdens het schrijven van code.
Als je in de console iets ziet wat je niet verwacht – dan kun je makkelijker de fout vinden. Daarom gebruiken we console.log()
vaak tijdens het debuggen.
🛠️ Opdracht – Variabelen gebruiken en debuggen
- Maak een nieuw HTML-bestand in Phoenix Code:
variabelen.html
- Typ de volgende basiscode in je bestand:
<!DOCTYPE html>
<html>
<head>
<title>Variabelen oefenen</title>
</head>
<body>
<h1>Bekijk de console!</h1>
<script>
let voornaam = "Ali";
const leeftijd = 18;
console.log("Naam: " + voornaam);
console.log("Leeftijd: " + leeftijd);
</script>
</body>
</html>
- Open je bestand in de browser en bekijk de console (rechtermuisklik → Inspecteren → Console)
- Verander de naam en leeftijd naar jouw eigen gegevens
- Voeg een derde variabele toe:
favorietDier
en toon die ook metconsole.log()
Voorbeeld:
let favorietDier = "koala";
console.log("Mijn favoriete dier is: " + favorietDier);
🧠 Reflectie
- Wat gebeurt er als je de
const
probeert te veranderen? - Waarom is het handig om even iets te loggen in de console?
- Heb je fouten gezien? Wat hielp je om ze op te lossen?
📤 Inleveren
- Beantwoord de vragen uit de reflectie en lever die in (.txt. of .pdf bestand).
3 Functies
In deze les leer je wat een functie is, waarom functies handig zijn en hoe je zelf een functie maakt in JavaScript. Je oefent met functies die tekst tonen of berekeningen uitvoeren.
🎯 Leerdoelen
- Je weet wat een functie is en wat het doel ervan is
- Je kunt een functie schrijven met
function
- Je kunt een functie aanroepen (laten uitvoeren)
- Je begrijpt wat een parameter is en hoe je die meegeeft
💡 Wat is een functie?
Een functie is een blokje code dat je een naam geeft, zodat je het later makkelijk opnieuw kunt gebruiken.
Stel, je wilt iets drie keer doen, zoals een bericht tonen. Dan is het dus handig om dat in een functie te stoppen.
function zegHallo() {
console.log("Hallo!");
}
Om de functie uit te voeren (aan te roepen), typ je:
zegHallo();
📦 Functies met parameters
Je kunt een functie ook informatie meegeven. Bijvoorbeeld een naam:
function begroet(naam) {
console.log("Hoi " + naam + "!");
}
begroet("Fatima"); // toont: Hoi Fatima!
begroet("Jesse"); // toont: Hoi Jesse!
🛠️ Opdracht – Bouw je eigen functies
- Maak een nieuw HTML-bestand in Phoenix Code:
functies.html
- Typ deze code als basis:
<!DOCTYPE html>
<html>
<head>
<title>Functies oefenen</title>
</head>
<body>
<h1>Bekijk de console</h1>
<script>
function begroet(naam) {
console.log("Hallo " + naam + "!");
}
begroet("Maya");
begroet("Koen");
</script>
</body>
</html>
- Maak nog een functie die een getal verdubbelt:
function verdubbel(getal) { console.log(getal * 2); }
- Roep die functie minstens twee keer aan met verschillende getallen
- Voeg daarna zelf een nieuwe functie toe met een eigen idee, bijvoorbeeld:
- Een functie die een leeftijd in hondenjaren berekent (× 7)
- Een functie die een bericht toont in jouw stijl.
🧠 Reflectie
- Waarom is het handig om herhaalbare code in een functie te zetten?
- Wat gebeurt er als je een functie oproept zonder de juiste parameter?
📤 Inleveren
- Maak een screenshot van je code én de console-output
4 Voorwaardes met if
en else
In deze les leer je hoe je met JavaScript keuzes kunt maken. Je gebruikt if
en else
om bepaalde code alleen uit te voeren als aan een voorwaarde is voldaan.
🎯 Leerdoelen
- Je begrijpt wat een voorwaarde is
- Je kunt werken met
if
,else if
enelse
- Je kunt eenvoudige beslissingen laten uitvoeren op basis van een getal
💡 Wat is een voorwaarde?
Met een voorwaarde bepaal je of een stukje code wél of niet uitgevoerd moet worden. Je gebruikt een if
-statement:
let leeftijd = 17;
if (leeftijd >= 18) {
console.log("Je bent volwassen");
} else {
console.log("Je bent nog geen 18");
}
Je kunt meerdere keuzes maken met else if
:
let punt = 6;
if (punt >= 8) {
console.log("Super goed!");
} else if (punt >= 5.5) {
console.log("Voldoende");
} else {
console.log("Onvoldoende");
}
🛠️ Opdracht – Leeftijdscontrole met voorwaarden
- Maak een nieuw HTML-bestand in Phoenix Code:
ifelse.html
- Gebruik deze code als basis:
<!DOCTYPE html>
<html>
<head>
<title>If-statement oefenen</title>
</head>
<body>
<h1>Bekijk de console</h1>
<script>
let leeftijd = 15;
if (leeftijd >= 18) {
console.log("Je mag stemmen.");
} else {
console.log("Je bent nog te jong om te stemmen.");
}
</script>
</body>
</html>
- Pas de variabele
leeftijd
aan naar jouw eigen leeftijd en test het resultaat - Voeg een
else if
-blok toe dat controleert of iemand precies 17 is - Maak daarna zelf een voorbeeld met een
punt
(bijvoorbeeld een toetscijfer) en geef een boodschap: onvoldoende / voldoende / goed
📤 Inleveren
- Maak een screenshot van je code én de console-output bij jouw leeftijd en punt
- Lever dit screenshot in via Teams of Canvas
🧠 Reflectie
- Wat gebeurt er als je geen
else
gebruikt? - Wanneer gebruik je
else if
in plaats van meerdereif
-regels?
5 Gebeurtenissen (events)
In deze les leer je hoe je iets kunt laten gebeuren als een gebruiker op een knop klikt. Je leert werken met onclick
waarmee je een functie kan aanroepen bij een gebeurtenis.
🎯 Leerdoelen
- Je weet wat een event is in JavaScript
- Je kunt een knop laten reageren op een klik met
onclick
- Je kunt een functie aanroepen wanneer een event plaatsvindt
💡 Wat is een event?
Een event is een gebeurtenis, zoals:
- een klik op een knop (
click
) - iets typen in een tekstvak (
input
) - de muis bewegen over een element (
mouseover
)
Met JavaScript kun je ervoor zorgen dat er iets gebeurt als zo'n event plaatsvindt. Het meest gebruikte event is onclick
.
Voorbeeld: klik op een knop
<button onclick="groet()">Klik hier</button>
<script>
function groet() {
console.log("Hoi! Je hebt op de knop geklikt.");
}
</script>
Wordt je 'gek' van console.log? Je kunt ook alert gebruiken:
alert("Je hebt geklikt!");
🛠️ Opdracht – Laat een knop iets doen
- Maak een nieuw HTML-bestand in Phoenix Code:
knop.html
- Typ deze code als basis:
<!DOCTYPE html>
<html>
<head>
<title>Gebeurtenis oefenen</title>
</head>
<body>
<h1>Druk op de knop!</h1>
<button onclick="toonBericht()">Klik hier</button>
<script>
function toonBericht() {
console.log("Je hebt geklikt!");
}
</script>
</body>
</html>
- Verander de tekst in de functie naar je eigen boodschap
- Maak daarna nog een tweede knop met een andere functie, bijvoorbeeld:
toonLeeftijd()
- Laat die tweede functie een leeftijd of getal tonen in de console (of via alert())
Voorbeeld:
function toonLeeftijd() {
console.log("Ik ben 16 jaar");
}
🧠 Reflectie
- Wat is er nodig om een knop iets te laten doen?
- Wat gebeurt er als je een functie aanroept zonder dat die bestaat?
📤 Inleveren
- Maak een screenshot van je HTML én console na het klikken op de knoppen
6 Formulierinvoer gebruiken met JavaScript
🎯 Leerdoelen
- Je weet hoe je met JavaScript input uit een formulier ophaalt met
getElementById()
. - Je kunt een
if
-statement gebruiken op basis van invoer. - Je toont het resultaat op het scherm, niet in de console.
Start Code
<!DOCTYPE html>
<html>
<head>
<title>Leeftijd check</title>
<style>
body { font-family: sans-serif; }
#output { font-weight: bold; margin-top: 15px; }
</style>
</head>
<body>
<h1>Voer je leeftijd in</h1>
<input type="number" id="leeftijdInput" placeholder="Typ je leeftijd">
<button>Check mijn leeftijd</button>
<p id="output"></p>
<script>
function checkLeeftijd() {
let leeftijd = Number(document.getElementById("leeftijdInput").value);
let boodschap = "";
if (leeftijd >= 18) {
boodschap = "Je bent volwassen.";
} else {
boodschap = "Je bent een kind.";
}
document.getElementById("output").innerText = boodschap;
}
</script>
</body>
</html>
💡 Uitleg
(lees goed door!)
Op regel 14 wordt een leeftijd gevraagd.
Op regel 15 staat een knop. Deze doet nog niets maar die moet via het onlclick
event gekoppeld worden aan de JS functie checkLeeftijd()
.
Op regel 17 staat een legel paragraaf. Deze paragraaf wordt (later) gevuld door de JS functie.
Op regel 21 wordt de waarde van het input veld met het id leeftijdInput gevraagd. De waarde wordt in de JS variabele leeftijd bewaard.
Op regel 30 wordtdocument.getElementById("id").value
gebuikt om de waarde uit een inputveld op te halen. Het HTML element dat waarvan de tekst wordt opgehaald heeft als id output
.
🛠️ Opdracht – Leeftijd analyseren en tonen
- Zorg ervoor dat de knop wordt gekoppeld aan de JavaScript functie checkLeeftijd().
- Bereid de if-then-else structuur uit: als je ouder dat 65 bent dan ben je senior, ben je jonger dan 2 dan ben je een baby, jonger dan 6 een peuter, jonger dan 12 een jong kind, en jonger dan 18 een kind.
- Test op een leeftijd <0 en laat dan een boodscahp zien dat de onvoer niet geldig is.
🧠 Reflectie
- Wat gebeurt er als je niets invult of een negatieve waarde gebruikt?
- Waarom is
Number(...)
nodig?
📤 Inleveren
- Lever de geteste en werkende code als html bestand met daarin de JS code in.
8 Bereken een prijs met korting
In deze les gebruik je JavaScript om een prijs te berekenen na korting. Je gebruikt een formulier met invoervelden voor het bedrag en de korting in procenten. Daarna laat je in de console zien wat de nieuwe prijs is.
🎯 Leerdoelen
- Je kunt meerdere waarden ophalen uit een formulier
- Je gebruikt JavaScript om een berekening te maken met die waarden
- Je toont het resultaat in de console
💡 Formule: prijs met korting
Als je een korting in procenten hebt, dan gebruik je de volgende formule:
kortingsbedrag = bedrag * (korting / 100);
nieuwePrijs = bedrag - kortingsbedrag;
Code
<!DOCTYPE html>
<html>
<head>
<title>Korting berekenen</title>
</head>
<body>
<h1>Bereken de korting</h1>
<p>Vul een bedrag en een kortingspercentage in:</p>
<input type="number" id="bedragInput" placeholder="Bedrag in euro's">
<input type="number" id="kortingInput" placeholder="Korting in %">
<button onclick="berekenKorting()">Bereken</button>
<script>
function berekenKorting() {
let bedrag = Number(document.getElementById("bedragInput").value);
let korting = Number(document.getElementById("kortingInput").value);
let kortingBedrag = bedrag * (korting / 100);
let nieuwePrijs = bedrag - kortingBedrag;
console.log("Origineel bedrag: €" + bedrag.toFixed(2));
console.log("Korting: " + korting + "%");
console.log("Nieuwe prijs: €" + nieuwePrijs.toFixed(2));
}
</script>
</body>
</html>
🛠️ Opdracht
- Test het formulier met verschillende bedragen en percentages
- Controleer of het resultaat klopt in de console
- In plaats van console.log maak je net als bij de vorige opdracht een lege paragraaf aan en plaats daaarin het resultaat.
De drie regels (regel 24-26 van de code) wordt dus op de pagina getoond, net als bij de vorige pagina. - Maak CSS stijl aanpassingen naar eigen inzicht zodat de pagina er netjes uitziet.
🧠 Reflectie
- Wat gebeurt er als je niks invult? Wat kun je daaraan doen?
- Wat gebeurt er als je een korting invult die hoger is dan 100%?
📤 Inleveren
- De complete geteste en werkende HTML/JS/CSS in één HTML bestand.
--
Portfolio Challenge
1 Persoonlijke website – HTML & vormgeving
🎯 Leerdoelen
- Je kunt een persoonlijke website opbouwen met HTML en CSS.
- Je maakt meerdere pagina’s die met elkaar verbonden zijn via een werkend menu.
- Je past opmaak toe met een externe stylesheet.
🛠️ Bouw jouw website
Bouw een website die over jezelf gaat, de teksten van je website ga je tijdens de persoonlijk profileren lessen opstellen.
De opdracht:
- De website moet bestaan uit een homepage en 3 vervolgpagina's.
voorbeeld home pages:
Elke pagina bevat:
- Een header met jouw logo, naam en een menu naar alle pagina’s.
- Een footer met een copyrightregel.
- Opmaak via een externe
style.css
bestand met classes. - Elke pagina moet een header blok hebben met jouw logo , jouw naam en een menu waar alle menu-items in staan.
Let op, het menu moet werken! - Elke pagina moet een footer hebben waar een copyright in staat.
voorbeeld footer: - Alle pagina's moeten worden vormgegeven met css classes , maak gebruik van een externe stylesheet .
- De website heeft de volgende pagina's / menu-items:
- Home (homepage) (index.html)
Je homepagina is je etalage, een homepagina moet bezoekers nieuwsgierig maken naar de rest van de website.
Zorg dat je homepage er aantrekkelijk uitziet en dat de bezoeker in een oogopslag kan zien welke informatie er op de website te vinden is.
Gebruik op de home page afbeeldingen en links naar de vervolgpagina's - Mijn profiel (1e vervolgpagina) (profiel.html)
Hierin plaats je een foto met een klein verhaaltje over jezelf.
De exacte inhoud staat in de volgende opdracht,
- Over mij (2e vervolgpagina) (overmij.html)
Plaats hier de 6 lesopdrachten van persoonlijk profileren (tijdlijn, normen &waarden, DISC, kernkwadranten, SWOT analyse, 360 graden feedback)
- Mijn visie (3e vervolgpagina) (mijnvisie.html)
Voorlopig nog leeg, deze wordt pas vele later gevuld.
- Home (homepage) (index.html)
🛠️ Opdracht
- Bouw een pagina voor de homepage (index .html ).
- Bouw een pagina voor je profiel (profiel.html).
- Bouw een pagina voor je overmij (overmij.html).
- Bouw een pagina voor je visie ( visie .html).
Zorg dat alle pagina's hetzelfde menu hebben. Menu's moeten ook werken!
Maak van je website iets persoonlijks, geef het een mooie vorm, gebruik een achtergrond plaatje, doe iets met de font keuze.
Leef je uit en gebruik de technieken die je hebt geleerd!
🧠 Reflectie
- Wat maakt een homepage aantrekkelijk voor een bezoeker?
- Wat is het voordeel van een apart CSS-bestand gebruiken voor styling?
- Wat vond je lastig bij het koppelen van menu's tussen meerdere pagina’s?
📤 Inleveren
- De 4 HTML-bestanden:
index.html
,profiel.html
,overmij.html
,visie.html
. - Een externe
style.css
bestand. - Screenshot van alle 4 pagina's in de browser (inclusief menu en footer zichtbaar).
- De reflectie; beantwoord de drie vragen i jouw eigen woorden en lever dit in (txt-bestand of pdf-bestand)
Je hebt in totaal dus 9 bestanden ingeleverd.
2 Persoonlijke website – content
Plaats jouw opdrachten van Persoonlijk Profileren op jouw website. De vorm mag jezelf bepalen.
De vervolgpagina's vul je met onderstaande
Vervolgpagina Mijn profiel (profiel.html)
- Plaats hier een foto van jezelf
Schrijf hier je naam, leeftijd, de stad waar je woont
Vervolgpagina Over mij (overmij.html)
- Plaats hier de 6 lesopdrachten van persoonlijk profileren
- tijdlijn
- normen &waarden
- DISC
- Kernkwadranten
- SWOT analyse
- 360 graden feedback
Vervolgpagina Mijn visie (visie.html)
- Deze laat je (nog) leeg
📤 Inleveren
- Screenshot van alle 4 pagina's in de browser. Zorg dat ale content goed leesbaar is. Evnetueel maak je extra screenshots zodat alles leesbaar is.
--
Blok 3 Kennis Check
HTML
1. Wat is HTML?
HTML betekent HyperText Markup Language. Het is de taal waarmee je een webpagina maakt. HTML vertelt de browser wat er op een website moet staan, zoals:
-
tekst (bijvoorbeeld een titel of paragraaf),
-
afbeeldingen (foto’s of plaatjes),
-
knoppen en formulieren,
-
en links naar andere pagina’s.
Je gebruikt HTML om de inhoud en structuur van je website te bepalen. Denk aan het skelet van een huis: HTML zorgt ervoor dat alles op de juiste plek staat.
Later kun je met CSS de kleuren en opmaak toevoegen, en met JavaScript de pagina interactief maken.
2. Wat gebeurt er als je in "Phoenix Code" op "Run" of "Live Server" klikt?
Dan wordt je HTML-bestand zichtbaar als een echte webpagina in de browser. Je ziet meteen het resultaat van jouw code.
3. Waarom gebruiken we <!DOCTYPE html> aan het begin van elke HTML-pagina?
Deze regel vertelt de browser dat het om een moderne HTML5-pagina gaat. Zo weet de browser hoe hij de pagina moet weergeven.
4. Waarom staat er tekst tussen <h1>...</h1> of <p>...</p>?
HTML werkt met tags. Die tags geven betekenis aan de tekst: <h1> betekent een kop (grote titel), <p> betekent een paragraaf (stukje tekst). Het zorgt voor structuur op je pagina.
5. Wat is het verschil tussen <strong> en <em> in HTML?
<strong> maakt tekst vet en betekent: dit is belangrijk. <em> maakt tekst schuin en betekent: leg hier nadruk op. Beide zorgen dat de tekst opvalt, maar op een andere manier.
6. Waarom gebruik je <br> in plaats van <p>?
Met <br> breek je alleen de regel af, bijvoorbeeld in een adres of opsomming. <p> is voor een heel nieuw stukje tekst, paragraaf (met ruimte ervoor en erna).
<br> staat voor " break", en <p> staat voor "paragraaf".
7. Wat doet de alt
-tekst bij een afbeelding?
Als de afbeelding niet wordt geladen, verschijnt de alt-tekst. Die beschrijft wat er op de afbeelding staat. Dat helpt ook mensen met een visuele beperking.
8. Wat is het verschil tussen een <ul> en een <ol> lijst?
<ul> is een opsomming zonder volgorde (met bolletjes).
<ol> is een genummerde lijst, waarbij de volgorde belangrijk is (zoals een top 5).
9. Waarom moet elke rij in een tabel evenveel kolommen hebben?
Anders weet de browser niet hoe hij de tabel netjes moet weergeven. Dan worden kolommen scheef of verdwijnen cellen. Elke rij moet dus evenveel <td> of <th> hebben.
10. Wat zou een formulier kunnen doen op een echte website?
Een formulier kan gegevens van een gebruiker opslaan of verzenden. Denk aan: aanmelden, iets bestellen, contact opnemen of een vraag stellen. In de les doet het formulier nog niets, maar met PHP of JavaScript kun je het echt laten werken.
CSS
1. Waarom gebruiken we CSS op een webpagina?
CSS zorgt ervoor dat een website er mooi uitziet. Je kunt kleuren, lettertypes en indeling aanpassen. Zonder CSS ziet een site er saai uit: alleen zwart-wit tekst zonder stijl.
2. Wat is het verschil tussen inline CSS en een style-blok?
Inline CSS staat direct in het HTML-element. Een style-blok zet je bovenin de pagina in de <head>. Daarmee kun je stijlen herhalen en overzichtelijker werken.
3. Waarom is het handig om een style-blok te gebruiken in plaats van inline CSS?
Met een style-blok kun je meerdere elementen tegelijk opmaken. Je hoeft dan niet elke keer dezelfde stijlregels te herhalen. Dat maakt je code netter en makkelijker aan te passen.
4. Wat is een class in CSS en waarom gebruik je dat?
Een class is een naam die je aan meerdere HTML-elementen kunt geven. Zo kun je dezelfde opmaak toepassen op verschillende plekken. Handig als je bijvoorbeeld meerdere blokken dezelfde kleur wilt geven.
5. Wat is het verschil tussen een element-selector, een class-selector en een id-selector?
Een element-selector (zoals p) geldt voor alle paragrafen. Een class-selector (zoals .belangrijk) geldt voor elementen met die class. Een id-selector (zoals #titel) is uniek en gebruik je maar één keer.
6. Wat is het box-model en waarom is het belangrijk?
Het box-model laat zien hoe ruimte om een element werkt: de tekst zit in het midden (content), dan padding, een border en buitenste ruimte heet margin. Hiermee bepaal je hoe groot een blok is en hoeveel ruimte ertussen zit.
7. Wat is het verschil tussen margin en padding?
Padding is de ruimte binnenin een element, tussen de tekst en de rand. Margin is de ruimte buiten een element, tussen het blok en andere blokken.
8. Waarom gebruik je flexbox voor layout?
Flexbox maakt het makkelijk om blokken netjes naast of onder elkaar te zetten. Je kunt ze makkelijk centreren of ruimte tussen de blokken maken, zonder moeilijke trucjes.
9. Wat betekent responsive design en hoe helpt flexbox daarbij?
Responsive design betekent dat je website er goed uitziet op elk scherm, groot of klein. Flexbox zorgt ervoor dat blokken automatisch aanpassen aan de schermgrootte.
10. Wat gebeurt er als je een element meerdere classes geeft?
Dan worden de stijlen van alle classes toegepast op dat element. Zo kun je stijlen combineren, bijvoorbeeld .menu en .speciaal. Dit geeft je veel controle over de opmaak.
JavaScript
1. Wat doet JavaScript op een webpagina?
JavaScript zorgt ervoor dat de webpagina dingen kan doen, zoals reageren op klikken of iets laten zien als je op een knop drukt. Zonder JavaScript is een pagina stil. Met JavaScript kun je hem interactief maken.
2. Wat is het verschil tussen HTML, CSS en JavaScript?
HTML is de inhoud, CSS is de opmaak (zoals kleuren en lettertypes) en JavaScript zorgt voor actie (zoals iets doen als je klikt of typt).
3. Waarom gebruiken programmeurs vaak de console?
De console laat zien wat er in de code gebeurt. Je kunt er fouten opsporen en controleren of je code werkt zoals je denkt. Het is een soort gereedschapskist.
4. Wat is een variabele en waarom gebruik je die?
Een variabele is een soort doosje waarin je iets bewaart, zoals een naam of een getal. Zo kun je er later nog iets mee doen of het laten zien.
5. Wat is het verschil tussen let
en const
?
Met let
kun je het later nog veranderen, met const
niet. Dus const
gebruik je als iets altijd hetzelfde moet blijven.
6. Waarom zijn functies handig in je code?
Een functie is een stukje code dat je een naam geeft. Je kunt het steeds opnieuw gebruiken. Zo hoef je niet elke keer alles opnieuw te typen.
7. Wat is een parameter in een functie?
Een parameter is informatie die je aan een functie meegeeft. Zo kun je de functie flexibeler maken, bijvoorbeeld iemand begroeten met zijn eigen naam.
8. Wat is een voorwaarde (if-statement) en waar gebruik je die voor?
Een voorwaarde kijkt of iets waar is. Bijvoorbeeld: "Ben je 18 of ouder?" Als ja, dan doe je iets. Als nee, dan iets anders. Zo kun je keuzes maken in je code.
9. Wat is een event in JavaScript?
Een event is iets dat gebeurt, zoals een klik of iets typen. Met JavaScript kun je zeggen: als dit gebeurt, voer dan deze code uit.
Voorbeelden van events zijn: 'click', 'mouseover', 'keydown', ....
10. Hoe haal je invoer uit een formulier met JavaScript?
Je gebruikt document.getElementById("id").value
om op te halen wat iemand in een vakje heeft getypt. Zo kun je iets met die invoer doen, zoals berekenen of controleren.
🛠️ Opdracht
Maak de kennis-check.
📤 Inleveren
Aan het einde van de kennis-check ontvang je een certificaat. Maak een schermafdruk en lever deze in.
Blok 4 - Back End / PHP
Prompt Engineering 1
Introductie
Prompt Engineering is alsof je een buitenstaander die niets van je weet iets wilt vragen. Omdat te doen moet je dus duidelijk en geod communiceren.
We gaan leren hoe we goede prompt kunnen schrijven.
Voor een goede prompt moet je rekening houden met de volgende zaken:
-
- Context - een goede propmt heeft voldoende contexrt.
- Details/Specifiek - een goed prompt heeft voldoende details en is zo specifiek mogelijk.
- Duidelijkheid - een goede prompt is duidelijk.
- Doelgericht - een goede prompt is doelgericht.
- Vorm - in een geode prompt kan je de output in een bepalade vorm vragen.
- Toon -door in de prompt de toon op te nemne, bepaal je de vorm van het antwoord.
Al deze punten worden stuk-voor-stuk behandeled. De eerste drie zijn rood omdat élke prompt altijd moet voldoen aan deze kenmerken.
Maar laten we eerst even kiijk wat nu eigelijk promting precies is.
Wat is prompting?
Prompting betekent dat je iets vraagt aan een AI, zoals ChatGPT, op een manier waardoor je een goed antwoord krijgt. Je geeft een opdracht of stelt een vraag, en dat noemen we een prompt.
Je kunt het vergelijken met hoe je een klasgenoot iets vraagt:
- Als je gewoon zegt: “Doe dit,” snapt die ander misschien niet precies wat je bedoelt.
- Maar als je zegt: “Kun je me helpen met deze code, want ik snap het niet?", is dat al een stukje beter.
- Maar het kan nog beter: "Kun je me helpen met deze code want ik krijg een foutmelding 'unknown variable on line 23', ik snap niet wat de foutmelding betekent? '".
- En zelfs dit kan nog beter want je vergeet een belangrijk detail, zie jij welke detail?
Kort gezegd: prompting is het slim stellen van een vraag of opdracht aan AI, zodat je krijgt wat je nodig hebt.
In de laatste zin staat niets over in welke omgeving en met welke programmeertaal je werkt. Ook zou je kunnen overwegen om de code of een stuk daarvan mee te sturen.
✍️ Opdracht 1
Verbeter de prompt die hierboven bij punt 4 staat.
1. Context
We hebben geleerd dat een goede prompt detail en context heeft.
Context is een soort van omgeving.
Als je vraagt om code aan passen dan moet je dus aangeven wat de 'omgeving' is, in dit geval PHP en als het je bepaalde frameworks gebruikt of andere zaken die van belang zijn dan noem je die ook.
-
Context betekent: de omgeving waarin iets zich afspeelt.
-
Bij programmeren is dat bijvoorbeeld: de taal (zoals PHP), het framework (zoals Laravel), of iets anders dat belangrijk is om te weten.
-
Een AI snapt je vraag beter als jij eerst vertelt wat de omgeving/context is.
✍️ Opdracht 2
Situatie
Je hebt de volgende PHP-code gekregen.
Deze code toont de huidige datum:
<?php
echo date("Y-m-d");
?>
Maar jij wil dat de datum verschijnt in het Nederlands, zoals: 9 mei 2025
De AI moet je helpen om de code aan te passen.
📝 Jouw taak:
-
Schrijf een prompt aan ChatGPT waarin je vraagt om deze code aan te passen zodat de datum in het Nederlands verschijnt.
-
Let erop dat je duidelijk aangeeft wat de context is:
-
Je werkt met PHP
-
De code moet draaien op een gewone server (geen framework zoals Laravel)
-
Je wil de datum in het Nederlands
-
Inleveren
- Screenshot van de prompt en het antwoord dat je hebt gekregen.
- Screenshot van het resultaat in je browser.
2. Detail/Specifiek
Doel
Je leert hoe belangrijk detail en specificiteit zijn in een goede prompt. Hoe specifieker je bent, hoe beter de AI je kan helpen met het schrijven of verbeteren van PHP-code.
📚 Theorie
-
Een vage prompt zoals “Maak een contactformulier” geeft een vaag resultaat.
-
Welke velden moeten erin?
-
Wat moet er met de ingevulde gegevens gebeuren?
-
Moet het formulier controle uitvoeren?
-
Moet er een succesbericht komen?
Een specifieke prompt vertelt precies wat je wil.
-
Een goede prompt bevat concrete dingen en bevat geen (of zo min mogelijk) 'vage' termen.
Test je prompt
Als je over een prompt vragen kan stellen dan is die niet 100% concreet.
Voorbeeld prompt:
Maak de bannder iets breder en verander het letter type zodat het groter is.
Wat is 'iets breder' en wat is 'groter'?
Beter zou zijn:
✍️ Opdracht 3
Situatie
Je wil een contactformulier in PHP laten maken door ChatGPT.
Jouw taak
-
Schrijf een prompt aan ChatGPT waarin je duidelijk vraagt om een contactformulier in PHP.
Je moet in je prompt minimaal deze 4 dingen specifiek vermelden:
-
Welke velden het formulier moet hebben (bv. naam, e-mail, bericht)
-
Wat er met de data moet gebeuren (bijv. opslaan, versturen, tonen)
-
Of er foutcontrole moet zijn (bijv. verplicht invullen, geldig e-mailadres)
-
Of er een succesmelding moet komen na het verzenden
-
Inleveren
- Screenshot van de prompt en het antwoord dat je hebt gekregen.
- Screenshot van het resultaat in je browser.
3. Duidelijkheid
Duidelijk betekent dat je prompt voldoende detail bevat. Hierdoor is het duidelijk wat je precies bedoeld.
Een duidelijke prompt zegt precies:
-
Wat je wil
-
Waarvoor je het wil
- Wat de beperkingen zijn
-
En eventueel hoe je het eruit wil laten zien
Een voorbeeld van de punten zijn:
- Je wilt een website
- Je wilt een website waarin de gebruiker zijn naam en adres moet opgeven.
- Alle velden moeten op één web pagina passen en bestaat uit HTML en CSS.
De velden zijn allemaal verplicht. Zodra de submot button wordt ingedrukt wordt gecontroleerd of alle velden zijn ongevuld. Als dat niet het geval is dan volgt er een aanwijzing/waarschuwing. - Het moet er eenvoudig en professioneel uitzien, Gebruik 'Tailwind' als CSS framework.
📝 Opdracht 4
Situatie
Je wil een AI vragen om een klein PHP-script te maken waarmee je een getal controleert: is het even of oneven?
Hieronder zie je een voorbeeld van een vage prompt. Lees hem goed.
“Schrijf iets in PHP dat met getallen werkt.”
Je gaat nu zelf een duidelijke prompt schrijven waarin je vraagt om een PHP-script dat:
-
Één getal controleert
-
Zegt of het getal even of oneven is
-
De gebruiker het getal zelf laat invoeren via een HTML-formulier
Inleveren
- Screenshot van de prompt en het antwoord dat je hebt gekregen.
- Screenshot van het resultaat in je browser.
4. Doelgericht
📚 Theorie
-
AI is niet helderziend. Als je alleen zegt “Leg dit uit”, weet de AI niet hoe uitgebreid, voor wie of in welke vorm.
-
Wat wil je precies weten of krijgen?
-
Wil je code, uitleg, een stappenplan, een voorbeeld, een tabel, enz.?
-
Voor wie is het bedoeld? (Bijv. jezelf, een beginner, een klasgenoot?)
Een doelgerichte prompt maakt duidelijk:
-
📝 Opdracht
Situatie
Je wil begrijpen hoe een while-loop werkt in PHP, en je wil dat de AI het aan je uitlegt.
Deel 1: Vergelijk twee prompts
Prompt A (niet doelgericht):
“Wat is een while-loop?”
Prompt B (wel doelgericht):
“Leg uit wat een while-loop in PHP doet. Geef een voorbeeld met code en uitleg in simpele taal, zodat ik het kan gebruiken in een quiz voor klasgenoten.”
🔍 Wat is het verschil tussen A en B?
Deel 2: Schrijf je eigen doelgerichte prompt
Bedenk nu een onderwerp in PHP dat jij lastig vindt (bijvoorbeeld: arrays, forms, functies, POST vs GET…).
Schrijf een doelgerichte prompt waarbij je duidelijk maakt wat je wil, in welke vorm, en voor wie het bedoeld i
Inleveren
- Deel 1, leg in je eigen woorden uit wat het verschil is tussen prompt A en prompt B.
- Deel 2, schrijf je eigen doelgerichte prompt (zie beschrijving deel 2).
5. Vorm
📚 Theorie (kort samengevat)
-
Soms weet de AI wél wat je bedoelt, maar krijg je het antwoord in een onhandige vorm:
-
Alleen tekst terwijl jij voorbeeldcode wilde.
-
Een lang verhaal terwijl jij liever een stappenplan had.
-
Code zonder uitleg erbij.
-
-
Daarom is het slim om in je prompt te zeggen hoe je het antwoord wil zien:
-
Als lijst, tabel, voorbeeldcode, uitleg in korte zinnen, enz.
-
Opdracht
Deel 1: Slechte prompt (voorbeeld)
“Leg uit hoe je een formulier maakt met PHP.”
Wat is hier onduidelijk over de vorm van het antwoord?
Deel 2: Schrijf zelf een betere prompt
Jij gaat nu een betere prompt schrijven waarin je duidelijk zegt in welke vorm je het antwoord wil krijgen. Kies een vorm, zoals:
-
Stap-voor-stap uitleg
-
PHP-code met uitleg onder elke regel
-
Een tabel met onderdelen van een formulier
-
Een combinatie van uitleg en voorbeeld
📌 Vergeet niet te vermelden dat je werkt met PHP, en dat het voor een beginner is.
Inleveren
....
6. Toon
📚 Theorie
-
De toon is hoe iets klinkt of overkomt: serieus, grappig, formeel, simpel, kinderlijk, informeel, enz.
-
Als je geen toon aangeeft, kiest de AI zelf. Soms is dat te zakelijk, te moeilijk of juist te speels.
-
In een goede prompt zeg je dus hoe de AI zich moet gedragen.
📝 Opdracht
Situatie:
Je wil dat ChatGPT uitlegt wat een functie in PHP is.
Je gaat dezelfde uitleg in verschillende tonen laten geven.
Stap 1: Schrijf drie verschillende prompts
Gebruik hetzelfde onderwerp (“Wat is een functie in PHP?”) en verander alleen de toon.
-
🎩 Formeel en technisch (voor iemand met programmeerervaring):
-
😄 Grappig en speels (alsof je het uitlegt aan een kind van 12):
-
💬 Duidelijk en vriendelijk (voor een klasgenoot die net begint met PHP):
Inleveren
-
Welke toon vond jij het meest duidelijk voor een beginner?
-
Welke toon past het best bij jouw klasgroep?
-
Welke toon past het best bij jouw klasgroep?
-
Wat gebeurt er als je géén toon vraagt in je prompt?
Samengevat
Een goede prompt.
- Context – Geef achtergrondinformatie, zoals voor wie het is, wat het doel is, of waar het over moet gaan (welke programmeertaal?).
- Detail – Hoe specifieker je bent, hoe beter het antwoord past bij wat je zoekt.
- Duidelijkheid – Gebruik duidelijke en begrijpelijke taal. Vermijd vage of dubbelzinnige zinnen.
- Doelgerichtheid – Geef aan wat je precies wil (bijvoorbeeld: een uitleg, een lijst, een verhaaltje, een vergelijking, enz.).
- Vorm – Soms helpt het als je zegt hoe het antwoord eruit moet zien (bijvoorbeeld: “maak er een tabel van”, “gebruik korte zinnen”, “schrijf het op het niveau van een brugklasser”).
- Toon/Stem – Wil je dat het grappig is? Serieus? Zakelijk? Kinderlijk? Dat kun je ook zeggen in je prompt.
Voorbeeld prompt
“Leg uit wat een if-statement is in PHP. Geef een simpel voorbeeld met uitleg in makkelijke taal. Ik ben 14 en net begonnen met PHP, dus graag zonder moeilijke woorden. Laat ook zien wat er gebeurt als de voorwaarde niet waar is.”
Opdracht 3
Maak een prompt waarin je aan AI vraagt om een programma in HTML-pagina te maken die er zo goed mogelijk lijkt op deze website template.
Probeer dit in één tekst prompt te doen (gebruik dus géén plaatje) en denk aan alle 6 eigenschappen voor een geode prompt.
Inleveren
- Prompt die je hebt gemaakt (schermafdruk).
- Resultant (schermafdruk van de webpage).
PHP Intro
1 Front-End en Back-End
🎯 Leerdoelen
-
Je weet wat frontend en backend zijn.
-
Je kunt het verschil uitleggen in je eigen woorden.
-
Je kunt bij een website aanwijzen wat frontend is en wat backend is.
Wat is frontend?
-
De voorkant van een website: alles wat de gebruiker ziet.
-
Wordt gemaakt met HTML, CSS, JavaScript.
-
Denk aan knoppen, kleuren, tekst, afbeeldingen.
👉 Vergelijking: de menukaart en bediening van een restaurant.
Wat is backend?
-
De achterkant van een website: alles wat op de server gebeurt.
-
Zorgt voor berekeningen, het opslaan van gegevens, inloggen, bestellingen verwerken.
-
Wordt vaak gemaakt met talen zoals PHP, Python, Node.js.
👉 Vergelijking: de keuken van een restaurant.
Client en server
De computer is geen restaurant, maar je kunt het er wel mee vergelijken: de webbrowser waar de bestellingen worden opgenomen en de webserver (ergens in de cloud) is de keuken.
Bestandsoorten
We kennen al HTML en CSS, later gaan we ons verdiepen in Javascript en PHP.
Bestandssoorten | Functie | Waar |
HTML | Basis opmaak van een webpagina | Front-end / browser |
CSS | Detail opmaak van een webpagina | Front-end / browser |
JavaScript | Interactie programmeren in de browser | Front-end / browser |
PHP | Interactie programmeren op de server | Back-end / server |
Opdracht 1
Geef van elk van de onderstaande situatie wat het is:
front-end, back-end of beiden?
Licht elk antwoord in eigen woorden toe.
|
Situatie |
Front-end, back-end, beiden |
Toelichitng |
---|---|---|---|
1 |
Je klikt op een knop om een filmpje te starten. |
|
|
2 |
Je stuurt een contactformulier in en krijgt “Bedankt voor je bericht!”. |
|
|
3 |
Een webwinkel controleert of er nog voorraad is. |
|
|
4 |
Je ziet de kleuren en lettertypes van een website veranderen. |
|
|
5 |
Een systeem herkent of je het juiste wachtwoord hebt ingevuld. |
|
|
6 |
Je krijgt je resultaten na een online quiz. |
|
|
Opdracht 2
Beantwoord de volgende vragen in eigen woorden
-
Wat wist je nog niet?
-
Waarom denk je dat er zowel frontend als backend nodig is?
-
Wat lijkt jou leuker om te maken?
Inleveren
Open het Word document Opdracht Front-end backend.docx en beantwoord de vragen uit opdracht 1 en opdracht 2. Bewaar het bestand als PDF en lever dat in.
- PDF document
2 Installeren XAMPP
Wij hebben (nog) geen webserver in de cloud. In plaats daarvan gaan we een soort 'nep-server' gebruiken en hiervoor gaan we XAMPP installeren.
Download de software
Google of download de juiste versie van apachefriends
Voer de installatie uit
Je hebt alleen Apache en MySQL nodig, de andere opties kan je beter niet installern.
Als er wordt gevraagd om php.exe aan het path toe te voegen dan kies je ja/yes. Alle andere opties kun je laten staan zoals ze default staan.
Opstarten XAMPP
Als het goed is, is er tijdens de installatie een short-cut gemaakt die heet XAMPP Control.
Deze shortcut voert C:\xampp\xampp-control.exe
uit.
Druk op de eerste twee knopjes start naast Apache en MySQL. Hiermee start je de webserver en de database op. Als alles goed is dan zie je het volgende.
XAMPP Instellingen
We gaan een paar dingen anders instellen.
Allereerst gaan we de database als Windows-service laten draaien dat verhoogt de stabiliteit.
1 Stop XAMPP
Stop XAMPP en als dat niet lukt, restart je machine of gebruik de Windows task manager om XAMPP te stoppen.
2 Properties xampp-controll.exe
Ga via de file explorer naar c:\xampp\ en zoek naar xampp-controll.exe, selecteer met rechtermuis propertjes (of eigenschappen).
3 Compatibily 'Run this program as an administror'
Selecteer onder het tabje Compatibily 'Run this program as an administror'
4 OK en klaar.
5 Start XAMPP
Sluit XAMPP en start XAMPP opnieuw op.
6 Groen vinkje
Druk op het rode kruisje links naast MySQL. Het kruisje wordt een groen vinkje.
7 index.php weg
Tenslotte, ga naar c:\xampp\htdocs\ en gooi het bestand index.html weg.
Waarom dat is dat zien we later als we met XAMPP gaan werken.
Opdracht
Voer ale 7 stappen uit.
Inleveren
- Screenshot van XAMPP Control panel met (minimaal) één groen vinkje en Apache en MySQL gestart.
Er zijn geen rood gekleurde foutmeldingen te zien.
3 Installatie Visual Studio Code
In deze les leer je hoe je Visual Studio Code installeert, waarom we een code editor gebruiken, en hoe je PHP-bestanden opent vanuit de htdocs
-map.
🔰 Wat gaan we doen?
- We installeren Visual Studio Code (VSC)
- We leggen uit waarom we een goede editor nodig hebben
- We openen een PHP-bestand in de
htdocs
-map
💡 Waarom Visual Studio Code?
- VSC is een gratis en krachtige code editor
- Hij maakt je code overzichtelijk met kleuren, inspringing en suggesties
- Hij helpt je fouten sneller te vinden en biedt slimme aanvulling
- Het is de standaard editor voor veel professionele programmeurs
Zonder goede editor werk je in Kladblok of iets simpels – dat is lastig lezen, foutgevoelig en traag werken.
📚 Installatie
1. Ga naar de officiële website: https://code.visualstudio.com/
2. Klik op Download for Windows
3. Start het installatieprogramma en kies de standaardinstellingen (volgende, volgende...)
4. Vink aan: "Add to PATH" en "Open with Code" in contextmenu als dat wordt gevraagd
📚 Eerste keer openen
Open Visual Studio Code. Je ziet een startscherm. Je hoeft je nergens aan te melden.
🛠️ Openen van een PHP-bestand
- Ga in VSC naar File > Open Folder
- Navigeer naar de map
htdocs
op jouw computer (bijv.C:\xampp\htdocs
) - Klik op Select Folder
- In de linkerbalkmaak je nu een nieuw bestand en die noem je
test.php
- Klik op een bestand om het te openen en te bewerken
Tip: Klik met rechts op het bestand en kies "Reveal in File Explorer" als je het ook in Verkenner wil zien.
💡 Extra VSC Tips
- Installeer de PHP Intelephense-extensie voor slimme PHP-hulp
- Gebruik Ctrl + S om op te slaan
- Als je veel bestanden hebt, gebruik dan Ctrl + P om snel te zoeken
Opdracht
Zet dit in het bestand test.php
<?php
echo "TEST";
Sla op en ga nu mert de browser naar https://localhost/test.php
Wat zie je?
🧠 Reflectie
Niet inleveren mar probeer dit voor je zefl te beantwoorden als voorbereiding op de Kennis-Check.
- Waarom gebruiken we Visual Studio Code en niet Kladblok?
- Wat heb je geleerd over het openen van PHP-bestanden?
📤 Inleveren
Maak een screenshot van:
- Visual Studio Code met een geopend bestand uit
htdocs
4 Jouw eerste PHP-pagina
In deze les ga je jouw allereerste PHP-pagina maken. Je leert hoe je PHP-code schrijft en uitvoert, en hoe je PHP en HTML samen kunt gebruiken.
🔰 Wat gaan we doen?
- Je maakt een PHP-bestand aan in de map
htdocs
- Je schrijft je eerste
echo
-opdracht in PHP - Je bekijkt het resultaat via
http://localhost
ℹ️ Uitleg
- PHP is een programmeertaal voor de backend
- PHP draait op de server en geeft HTML terug aan de browser
- Een PHP-bestand eindigt op
.php
- Met
echo
toon je iets op het scherm
Voorbeeld 1: eenvoudige tekst
<?php
echo "Hallo wereld!";
?>
Toont de tekst "Hallo wereld!" in je browser.
Voorbeeld 2: HTML + PHP
<!DOCTYPE html>
<html>
<body>
<h1>Welkom</h1>
<p><?php echo "Dit is gegenereerd door PHP!"; ?></p>
</body>
</html>
Hierin zie je dat je PHP kunt combineren met gewone HTML.
🛠️ Opdracht 3A
Maak een bestand intro.php
in de map htdocs
en zet daarin:
<html>
<body>
<h2>Over mij</h2>
<p>
<?php
echo "Hallo! Ik ben [jouw naam] en dit is mijn eerste PHP-pagina.";
?>
</p>
</body>
</html>
- Vervang
[jouw naam]
door je eigen naam - Open in de browser via:
http://localhost/intro.php
🛠️ Opdracht 3B – Extra
Laat meer zinnen zien met meerdere echo
-regels en gebruik <br>
om af te breken:
<?php
echo "Ik hou van programmeren.<br>";
echo "Mijn favoriete kleur is blauw.<br>";
echo "PHP is best leuk!";
?>
📌 Tip: combineer dit in een klein "dagboekje over jezelf".
🧠 Afsluiting
- Wat gebeurt er als je een PHP-bestand opent door erop te dubbelklikken in Verkenner?
- Stel je maakt een folder in htdocs en zet in deze fodler een .php bestand, hoe kan je dat dan via localhost in de browser openen?
📤 Inleveren
- Screenshot van de pagina in je browser met jouw naam zichtbaar
5 Variabelen en Strings in PHP
In deze les leer je hoe je gegevens kunt opslaan in variabelen, hoe je met tekst (strings) werkt, en hoe je deze informatie kunt tonen op je website met PHP.
🔰 Wat gaan we doen?
- We leren wat een variabele is
- We maken een paar variabelen aan in PHP
- We tonen informatie op het scherm met
echo
- We combineren tekst met variabelen (string concatenatie)
💡 Wat is een variabele?
- Een variabele is een soort doosje waarin je informatie kunt stoppen
- Je geeft het doosje een naam, zoals
$naam
of$leeftijd
- Je kunt de waarde later gebruiken of aanpassen
Voorbeeld
<?php
$naam = "Fatima";
$leeftijd = 16;
echo "Hallo, mijn naam is " . $naam . " en ik ben " . $leeftijd . " jaar oud.";
?>
Resultaat: Hallo, mijn naam is Fatima en ik ben 16 jaar oud.
String concatetation
Je ziet dat de . (punt) een verbinding maakt tussen de teksten en de variabelen. Het plakt alle aan elkaar. Dit heet string concatenation.
String concatenation in PHP doe je met een . (punt)
🛠️ Opdracht – Toon jouw info
Maak een bestand opdracht5.php
in je htdocs
-map.
Vul dit in met jouw eigen gegevens:
<?php
$naam = "Jouw naam hier";
$leeftijd = 15;
$school = "ROC Amstelland";
echo "<h1>Over mij</h1>";
echo "<p>Ik ben " . $naam . " en ik ben " . $leeftijd . " jaar oud.</p>";
echo "<p>Ik zit op " . $school . ".</p>";
?>
- Vervang de waarden door je eigen gegevens
- Open het bestand via
http://localhost/opdracht5.php
🛠️ Opdracht – Extra uitdaging
- Voeg een variabele toe voor je favoriete hobby
- Toon dit op een derde regel met:
Mijn hobby is muziek maken.
ℹ️ Uitleg
- In PHP begint een variabele altijd met een
$
-teken - Tekst noemen we een string (tussen aanhalingstekens)
- Als je tekst en variabelen combineert, gebruik je
.
(punt) om aan elkaar te plakken
🧠 Reflectie
- Wat is het verschil tussen een tekst en een getal in PHP?
- Waarom is het handig om gegevens op te slaan in variabelen?
- Kun je bedenken hoe je variabelen later zou gebruiken in een formulier of website?
📤 Inleveren
- Lever je het bestand
opdracht.php5
i n.
Je tekst moet minimaal 3 variabelen gebruiken
6 Strings en Getallen in PHP
In deze les leer je het verschil tussen tekst (strings) en getallen (integers) in PHP. Je leert ook wat er gebeurt als je probeert te rekenen met tekst of tekst toevoegt aan een getal.
🔰 Wat gaan we doen?
- We leggen het verschil uit tussen strings en getallen
- We oefenen met optellen en tekst plakken
- We maken een mini-rekenmachine
💡 Wat is het verschil?
- String = tekst, tussen aanhalingstekens:
"Hallo"
- Getal= nummer, zonder aanhalingstekens:
5
- Als je twee strings met
.
(punt) combineert, dan “plak” je tekst aan elkaar - Als je twee getallen met
+
optelt, dan krijg je de som
Voorbeeld
<?php
$tekst1 = "Hallo";
$tekst2 = "wereld";
$getal1 = 10;
$getal2 = 5;
echo $tekst1 . " " . $tekst2; // Hallo wereld
echo "<br>";
echo $getal1 + $getal2; // 15
?>
🛠️ Opdracht – Reken met getallen
Maak een nieuw bestand aan in je htdocs
-map: rekenen.php
Schrijf een script dat dit doet:
- Maakt twee variabelen met getallen
- Toont het resultaat van optellen, aftrekken, vermenigvuldigen en delen.
Voorbeeldcode
<?php
$prijs = 7.50;
$aantal = 3;
$totaal = $prijs * $aantal;
echo "<p>Prijs per stuk: €" . $prijs . "</p>";
echo "<p>Aantal: " . $aantal . "</p>";
echo "<p>Totaalprijs: €" . $totaal . "</p>";
?>
💡 Let op met aanhalingstekens!
Als je een getal tussen aanhalingstekens zet, wordt het een string en kun je er niet goed mee rekenen:
$getal1 = "10"; // string
$getal2 = 5; // integer
echo $getal1 + $getal2; // dit werkt, maar PHP zet de string stilletjes om naar een getal
Tip: Probeer getallen zonder aanhalingstekens te houden als je ermee rekent!
🎬Voorbeeld
https://www.youtube.com/watch?v=przRGJtl0HY
🧠 Reflectie
- Wat gebeurt er als je probeert te rekenen met een string zoals
"hallo"
? - Waarom is het handig dat PHP automatisch strings soms omzet naar getallen?
- Wat zou er gebeuren als je
$prijs
een tekst maakt in plaats van een getal?
📤 Inleveren
- Lever een screenshot in van jouw
rekenen.php
in de browser
Je code moet verschillende berekningen laten zien.
7 Leeftijd check met formulier
In deze les leer je hoe je een formulier maakt dat gegevens doorstuurt naar een PHP-script, en hoe je met if-statements reageert op die gegevens.
🎯 Leerdoelen
- Je maakt een formulier dat gegevens verzendt naar een PHP-bestand
- Je kunt een
if
gebruiken om iets te controleren - Je reageert in de browser op wat de gebruiker heeft ingevuld
🛠️ Formulier maken
Maak een bestand formulier.html
aan in je htdocs
-map. Zet hierin de volgende code:
<!DOCTYPE html>
<html>
<body>
<h2>Hoe oud ben jij?</h2>
<form action="leeftijd.php" method="get">
<label for="leeftijd">Voer je leeftijd in:</label><br>
<input type="number" name="leeftijd" id="leeftijd"><br><br>
<input type="submit" value="Verstuur">
</form>
</body>
</html>
Uitleg
Dit is een eenvoudig HTML-formulier dat de leeftijd vraag en die deze waarde dan opstuurd naar het bestand leeftijd.php
.
🛠️ leeftijd.php
Maak nu een bestand leeftijd.php
en voeg dit toe:
<?php
$leeftijd = $_POST["leeftijd"];
echo "<h2>Jouw leeftijd is: " . $leeftijd . "</h2>";
if ($leeftijd >= 18) {
echo "Je bent volwassen.";
} else {
echo "Je bent nog geen 18.";
}
?>
Uitleg
Op regel 2 wordt de $leeftijd uit de formulier variable gehaald.
Regel 6 t/m 10 laten zien hoe je een conditiemet een if-then-else in PHP maakt.
🛠️ Opdracht – Zelf uitbreiden
- Voeg een extra if-statement toe die controleert of iemand jonger is dan 12:
if ($leeftijd < 12) { echo "<br>Je bent nog een kind."; }
- Voeg ook een if-statement toe die een compliment geeft bij een mooie leeftijd (bijvoorbeeld 16 of 21)
- Bedenk zelf een leuke uitbreieding of verander het programma. De code moet wel:
- minimaal 3 if-statements bevatten en minimaal 1 if-then-else.
- Test je code
📘 Tip
- Gebruik
$_GET["veldnaam"]
om iets op te halen uit een formulier - Gebruik
if
,else
ofelseif
om verschillende reacties te geven
🧠 Reflectie
- Kun je bedenken hoe je dit formulier zou kunnen gebruiken voor een login of een quiz?
📤 Inleveren
- Lever een screenshot in van
leeftijd.php
met een ingevuld formulier en meerdere testleeftijden
Je code moet minstens 3if
-statements bevatten waarvan minimaal 1if-then-else
.
8 Kortingscalculator met formulier
In deze les maak je een eigen kortingscalculator. Je vult een bedrag en een kortingspercentage in, en de PHP-code berekent de prijs na korting.
🎯 Leerdoelen
- Je gebruikt een formulier met meerdere invoervelden
- Je rekent in PHP met getallen die uit een formulier komen
- Je maakt zelf een praktische webpagina
🛠️ Stap 1 – Pas je formulier aan
Pas het formulier uit formulier.html
aan zodat het er zo uitziet:
<!DOCTYPE html>
<html>
<body>
<h2>Kortingscalculator</h2>
<form action="korting.php" method="get">
<label for="bedrag">Voer het bedrag in:</label><br>
<input type="number" name="bedrag" step="0.01" required><br><br>
<label for="korting">Korting (%):</label><br>
<input type="number" name="korting" step="1" required><br><br>
<input type="submit" value="Bereken korting">
</form>
</body>
</html>
🛠️ Stap 2 – Maak korting.php
Maak een nieuw bestand aan in je htdocs
-map met de naam korting.php
en plak daarin de volgende code:
<?php
$bedrag = $_POST["bedrag"];
$korting = $_POST["korting"];
$kortingBedrag = $bedrag * ($korting / 100);
$nieuwBedrag = $bedrag - $kortingBedrag;
echo "<h2>Resultaat</h2>";
echo "<p>Oorspronkelijk bedrag: €" . $bedrag . "</p>";
echo "<p>Korting: " . $korting . "%</p>";
echo "<p>Korting in euro: €" . round($kortingBedrag, 2) . "</p>";
echo "<p>Bedrag na korting: €" . round($nieuwBedrag, 2) . "</p>";
?>
📘 Uitleg berekening
- Voorbeeld: je voert in €100 en 20% korting
- PHP rekent uit:
100 * (20 / 100) = 20
- Nieuwe prijs =
100 - 20 = 80
🛠️ Opdracht 1
- Laat een extra bericht zien met
if
:- Bij een korting van 50% of meer:
"Wat een superdeal!"
- Bij minder dan 10%:
"Dat is maar een klein beetje korting."
- Bij een korting van 50% of meer:
🛠️ Opdracht 2
Maak een .txt. of PDF en geef antwoord op de volgende vragen.
Vraag 1
In het formulier staat: <input type="number" name="bedrag" step="0.01" required><br><br>
Wat doet step="0.01"
; wat gebeurt er als je step ="1"
gebruikt?
Vraag 2
In het formulier staat: <input type="number" name="bedrag" step="0.01" required><br><br>
Wat doet required
; wat gebeurt er als je dit weglaat?
Vraag 3
In het formulier staat: <input type="number" name="bedrag" step="0.01" required><br><br>
Verander name="bedrag" naar name="prijs". Test of de berekening nog werkt.
Leg uit wat je moet aanpassen in de code korting.php om de berekning weer te laten werken na deze aanpassingen.
🧠 Reflectie
- Wat gebeurt er als je 0% korting invoert?
- En als je 100% korting invoert?
- Zou je dit op een echte webshop kunnen gebruiken?
📤 Inleveren
- Het php bestand korting.php
- PDF of txt-bestand met de antwoorden op de drie vragen in eigen woorden.
PHP-2
1 Formulieren GET en POST
🎯 Leerdoelen
- Je weet wat
GET
enPOST
zijn. - Je kunt gegevens doorsturen van een formulier naar een PHP-bestand.
- Je begrijpt het verschil tussen
GET
enPOST
qua werking en veiligheid.
Weet je nog wat formulieren zijn in PHP?
Een formulier is een groep invoervelden in HTML. Deze velden wordne ingevuld en de waardes worden verstuurd naar een (meestal) andere pagina.
💡 Uitleg
Deze regel in een HTML form is belangrijk
<form action="mijn-actie.php" method="get">
De action
geeft aan waar het formulier de gegvens heen stuurt en de method
geeft aan hoe deze gegevesn worden verstuurd.
Bij een formulier kies je of je GET
of POST
gebruikt om gegevens naar de server te sturen:
Methode | Kenmerk | Voorbeeld |
---|---|---|
GET |
Gegevens worden zichtbaar in de URL (minder veilig) | mijn-actie.php?naam=Ali |
POST |
Gegevens worden onzichtbaar verstuurd (veiliger) | De gegevens zitten in het HTTP-verzoek, niet in de URL |
🎬Voorbeeld
In dit voorbeeld wordt het formulier naar 'zichzelf' vertuurd.
https://www.youtube.com/watch?v=6AzAYU8AOhQ
🛠️ Opdracht 1 – formulier.html (GET)
- Maak een bestand
formulier.html
en zet daar deze code in:
<!DOCTYPE html>
<html>
<body>
<h2>Wat is je naam?</h2>
<form action="begroeting.php" method="get">
<label for="naam">Naam:</label><br>
<input type="text" id="naam" name="naam" required><br><br>
<input type="submit" value="Verstuur">
</form>
</body>
</html>
Let op de method="get"
en het attribuut required
.
🛠️ Opdracht 2 – begroeting.php (GET)
- Maak het bestand
begroeting.php
met de volgende PHP-code:
<?php
if (isset($_GET["naam"])) {
$naam = $_GET["naam"];
echo "<h1>Hallo $naam!</h1>";
} else {
echo "<p>Geen naam ingevuld.</p>";
}
?>
Uitleg: We controleren met isset()
of de waarde bestaat.
Vul het formulier in en kijk wat er gebeurt. Wat zie je op URL als je de begroeting ziet? Pas de tekst na het = teken op de url aan en reload je pagina, wat gebeurt er?
🛠️ Opdracht 3 – POST-versie maken
- Pas in
formulier.html
het formulier aan naar:
<form action="begroeting2.php" method="post">
- Maak een nieuw bestand
begroeting2.php
met deze code:
<?php
if (isset($_POST["naam"])) {
$naam = $_POST["naam"];
echo "<h1>Welkom, $naam (via POST)</h1>";
} else {
echo "<p>Geen naam ontvangen.</p>";
}
?>
🧠 Reflectie
- Wat is het verschil tussen
POST
enGET
? - Wat gebeurt er precies in het PHP-bestand als je op “Verstuur” klikt?
- Wanneer zou je liever
POST
gebruiken danGET
? Geef een voorbeeld.
📤 Inleveren
- Lever de post-versie in van het formulier (.html).
- Beantwoord de drie reflectievragen en lever dit in als .txt of .pdf-bestand.
2 Include en Require
🎯 Leerdoelen
- Je weet wat
include
enrequire
doen in PHP. - Je kunt een header of footer inladen met
include
. - Je herkent het verschil tussen
include
enrequire
.
💡 Uitleg
Vaak gebruik je op meerdere pagina’s dezelfde stukjes HTML, zoals een menu of een footer. Je kunt dat opslaan in een apart bestand en invoegen met include
of require
.
include "bestand.php"
: probeert het bestand in te laden. Als dat niet lukt, gaat de pagina wel gewoon verder.require "bestand.php"
: probeert het bestand in te laden. Als dat niet lukt, stopt de pagina met een fout.
Voorbeeld:
Stel, je maakt een bestand header.php
met daarin een simpel menu:
<!-- header.php -->
<header>
<h1>Mijn Website</h1>
<nav>
<a href="index.php">Home</a> |
<a href="info.php">Info</a>
</nav>
</header>
En dan gebruik je include
in een andere pagina:
<?php include "header.php"; ?>
<h2>Welkom op de homepagina</h2>
<p>Dit is de inhoud van index.php</p>
🎬Voorbeeld
https://www.youtube.com/watch?v=aU0Tqxgtid8
🛠️ Opdracht – Header en footer maken
- Maak een bestand
header.php
met een kop en menu zoals hierboven. - Maak een bestand
footer.php
met daarin bijvoorbeeld:<footer>© 2025 Mijn Website</footer>
- Maak een bestand
index.php
met bovenin eeninclude("header.php")
en onderin eeninclude("footer.php")
.
🧠 Reflectie
- Waarom is het handig om met
include
te werken? - Wanneer zou je liever
require
gebruiken? - Wat zou er gebeuren als je honderd pagina’s hebt zonder
include
te gebruiken? In welk geval zou dat onhandig zijn?
📤 Inleveren
- Beantwoord de drie vragen n eigen woorden uit de reflectie en lever die in (.txt of .pdf bestand).
3 Arrays en Loops
🎯 Leerdoelen
- Je weet wat een array is in PHP.
- Je kunt een array maken met meerdere waarden.
- Je kunt een
foreach
-loop gebruiken om alle items te tonen.
💡 Uitleg
Een array is een soort lijstje waarin je meerdere dingen kunt bewaren, zoals hobby’s of namen.
Een (gewone) variabele is plaats in get computergehuegen waarin je één waarde kan opslaan.
Een array is een variabele die meer dan één waarde kan bevatten.
Je gebruikt een foreach
-loop om elk item uit de array één voor één te gebruiken.
Voorbeeld:
<?php
$hobbies = ["voetbal", "lezen", "gamen"];
foreach ($hobbies as $hobby) {
echo "<p>Mijn hobby is: $hobby</p>";
}
?>
Resultaat:
Mijn hobby is: voetbal
Mijn hobby is: lezen
Mijn hobby is: gamen
🎬Voorbeeld
Vanaf 0:30 -tot asan 06:30
https://www.youtube.com/watch?v=D7mqV-p1kEc
🛠️ Opdracht – Eigen array
Maak een bestand lijst.php
en vul dit met een array van 5 dingen die jij leuk vindt (hobby’s, favoriete eten, games…).
- Gebruik een
foreach
-loop om ze allemaal op het scherm te tonen. - Geef elk item weer in een eigen paragraaf (<p>).
💡 Uitleg
Er is ook een ander soort loop; een for-loop.
Gebruik een for
-loop in plaats van foreach
:
<?php
$games = ["Minecraft", "FIFA", "Fortnite", "Roblox"];
for ($i = 0; $i < count($games); $i++) {
echo "<p>" . $i . " Favoriete game: " . $games[$i] . "</p>";
}
?>
De waarde van $games[0] is dus "Minecraft", $games[1] = "FIFA", etc, etc.
Het eerste element in een array heeft een index 0!
🛠️ Opdracht - deel 2
Plaats in de PHP-code (lijst.php) een eigen voorbeeld waarbij je een for-loop
gebruikt.
🧠 Reflectie
- Wat is het voordeel van een array ten opzichte van losse variabelen?
- Wat is het verschil tussen
for
enforeach
? - Wanneer zou je liever een
for
-loop gebruiken?
📤 Inleveren
- Lever een screenshot in van jouw
lijst.php
met minimaal 5 items in een array, getoond in de browser. - Laat zien dat je zowel
foreach
alsfor
gebruikt hebt.
4 Loops met indexed arrays
🎯 Leerdoelen
- Je weet wat een indexed array is in PHP.
- Je kunt een array maken en vullen met meerdere waarden.
- Je kunt met een
foreach
-loop door een array lopen. - Je kunt gegevens uit een array weergeven met
echo
.
💡 Uitleg
Een indexed array is een lijst waarbij elk element een nummer (index) heeft, beginnend bij 0. Bijvoorbeeld:
<?php
$producten = ["Chips", "Cola", "Tandpasta", "Zeep"];
?>
Met een foreach
-loop kun je door deze array heen lopen en elk item laten zien:
<?php
foreach ($producten as $product) {
echo "<p>$product</p>";
}
?>
🛠️ Opdracht – Winkelmandje weergeven
Situatie: Je bouwt een simpele webwinkel. Je hebt een lijst met producten die iemand in zijn winkelmandje heeft geplaatst. Jij zorgt dat de producten netjes op het scherm getoond worden met behulp van een array en een loop.
- Maak een nieuw bestand aan met de naam
winkelmandje.php
. - Maak een indexed array met minimaal 5 producten uit een supermarkt (bijv. "Brood", "Melk", ...).
- Gebruik een
foreach
-loop om de lijst als HTML-lijst (<ul>
) weer te geven. - Tel hoeveel producten er in het winkelmandje zitten met
count()
en toon dat onderaan.
Voorbeelduitvoer:
- Brood
- Melk
- Appels
Totaal: 3 producten
🧠 Reflectie
- Waarom is het handig om een lijst in een array op te slaan?
- Wat gebeurt er als je een nieuw product toevoegt aan de array? Moet je je loop aanpassen?
- Hoe zou je deze code hergebruiken als iemand anders een andere boodschappenlijst heeft?
📤 Inleveren
- Lever je bestand
winkelmandje.php
in. - Lever je reflectie in als .txt of .pdf.
5 (Associative) Arrays en Loops
🎯 Leerdoelen
- Je begrijpt het verschil tussen indexed en associatieve arrays.
- Je kunt beide soorten arrays aanmaken in PHP.
- Je kunt met een
foreach
-loop informatie uit arrays tonen.
💡 Uitleg
Indexed array
Een indexed array gebruikt nummers als 'key'. Dit is handig voor eenvoudige lijsten:
<?php
$namen = ["Fatima", "Noah", "Aziz"];
echo $namen[0];
echo "<br>";
echo $namen[1];
echo "<br>";
echo $namen[2];
echo "<br>";
?>
Associatieve array
Een associatieve array gebruikt zelfgekozen 'keys'. Dit is handig voor gegevens met betekenis:
<?php
$student = [
"voornaam" => "Fatima",
"achternaam" => "Bakker",
"email" => "fatima.bakker@example.com"
];
echo $student['voornaam'];
echo "<br>";
echo $student['achternaam'];
echo "<br>";
echo $student['email'];
echo "<br>";
?>
🎬Voorbeeld
Vanaf 0:30 -tot asan 06:30 had je al bekeken eerder, nu ga je kijken vanaf 08:55 - 12:00
https://www.youtube.com/watch?v=D7mqV-p1kEc
🛠️Opdracht – Studentenlijst maken
Test beide voorbeelden.
- onder aan de code druk je nog een keer alle waarden af, maar dan door geburik te maken va een loop.
- Voeg dan op regel 2 in de eerste code je eigen naam toe en test je code nog een keer. Wat gebeurt er?
- Voeg dan tussen achternaam en email voor de student de woonplaats toe. Geef deze een waarde. Test je code nog een keer. Wat gebeurt er?
🧠 Reflectie
- Wat is het verschil tussen indexed en associatieve arrays?
- Wat gebeurt er als je een 'key' verkeerd typt?
- In de opdracht heb je kunnen zien waarom je beter een loop kan gebruiken om een array af te drukken. Leg in eigen woorden uit waarom.
📤 Inleveren
- Lever je reflectie in als .txt of .pdf.
6 Functies in PHP
🎯 Leerdoelen
- Je weet wat een functie is in PHP.
- Je kunt zelf een functie schrijven en aanroepen.
- Je kunt gegevens meegeven aan een functie (parameters).
💡 Uitleg
Een functie is een blokje code dat je een naam geeft en later opnieuw kunt gebruiken. Zo hoef je niet telkens dezelfde code opnieuw te schrijven.
Je kunt informatie aan een functie meegeven (dat noem je een parameter) en je kunt iets teruggeven (dat noem je een return).
Voorbeeld:
<?php
function begroet($naam) {
echo "Hallo, $naam!<br>";
}
begroet("Fatima");
begroet("Ali");
?>
🎬Voorbeeld
https://www.youtube.com/watch?v=SBFO5bIDYHQ&t=185s
🛠️ Opdracht 1 – Maak je eigen begroetfunctie
- Maak een nieuw bestand
functie.php
- Maak daarin een functie
begroet
die één parameter accepteert:$naam
- Laat de functie een boodschap tonen zoals “Hoi, [naam], welkom terug!”
- Roep de functie minstens 3 keer aan met verschillende namen.
🛠️ Opdracht 2 – Maak een rekentool met functie
- Maak een functie
kortingBerekenen
die twee getallen als parameter gebruikt:$bedrag
en$percentage
- Laat de functie het bedrag na korting
returnen
- Laat het resultaat op het scherm zien met
echo
Voorbeeldcode:
<?php
function kortingBerekenen($bedrag, $korting) {
$nieuwBedrag = $bedrag - ($bedrag * ($korting / 100));
return $nieuwBedrag;
}
echo "<p>Je betaalt nu: €" . kortingBerekenen(100, 25) . "</p>";
?>
🧠 Reflectie
- Waarom is het handig om functies te gebruiken?
- Wat gebeurt er als je geen parameter meegeeft aan een functie die er wel één verwacht?
- Waar zou je functies nog meer voor kunnen gebruiken?
📤 Inleveren
functie.php
met ten minste 1 begroetfunctie én 1 rekentool.
Je moet ten minste 2 functies gebruiken met parameters, waarvan 1 ook eenreturn
gebruikt.
7 Datum en Tijd in PHP
🎯 Leerdoelen
- Je weet hoe je de huidige datum en tijd kunt tonen met PHP.
- Je kunt berekenen hoeveel dagen of jaren geleden iets was.
- Je kunt de leeftijd berekenen op basis van een geboortedatum.
💡 Uitleg
PHP heeft functies om met datum en tijd te werken. De belangrijkste is date()
, waarmee je de huidige tijd kunt weergeven in verschillende formaten.
date("Y")
→ jaar (bijv. 2025)date("d-m-Y")
→ dag-maand-jaar (bijv. 04-06-2025)date("H:i")
→ tijd in uren:minuten (bijv. 14:36)
Voorbeeld:
<?php
echo "Vandaag is het: " . date("d-m-Y") . "<br>";
echo "Het is nu: " . date("H:i") . " uur.";
?>
🛠️ Opdracht 1 – Toon de datum en tijd
- Maak een bestand
datum.php
- Laat daarin zien:
- Welke dag het vandaag is
- De datum in formaat
dd-mm-yyyy
- De tijd in uren en minuten
🛠️ Opdracht 2 – Leeftijd berekenen
Bereken iemands leeftijd op basis van geboortedatum:
<?php
$geboortedatum = "2007-03-15";
$geboortedag = new DateTime($geboortedatum);
$vandaag = new DateTime();
$verschil = $vandaag->diff($geboortedag);
echo "Je bent " . $verschil->y . " jaar oud.";
?>
Uitleg: PHP kan automatisch het aantal jaren berekenen tussen twee datums met diff()
.
🧠 Reflectie
- Wat is het verschil tussen
date()
ennew DateTime()
? - Waarom moet je bij het berekenen van leeftijd een
diff()
gebruiken? - Wat zou er gebeuren als je geboortedatum in een verkeerd formaat schrijft?
📤 Inleveren
datum.php
met de juiste datum, tijd en berekende leeftijd.
Je gebruikt minstens één functie met datum en één met tijd, endiff()
voor de leeftijd.
8 Sessies en Inloggen met PHP
🎯 Leerdoelen
- Je weet wat een sessie is in PHP.
- Je kunt een eenvoudige inlogpagina maken.
- Je kunt een gebruiker herkennen op een andere pagina.
💡 Uitleg
Een sessie in PHP is een manier om informatie te onthouden zolang de gebruiker je website bezoekt. Bijvoorbeeld of iemand is ingelogd of wat zijn/haar gebruikersnaam is.
Je start een sessie met:
<?php
session_start();
?>
🎬Voorbeeld
https://www.youtube.com/watch?v=JXKQmIpjRTk
🛠️ Opdracht 1 – inloggen.html
Maak een bestand inloggen.html
met een formulier waarin je gebruikersnaam invoert:
<!DOCTYPE html>
<html>
<body>
<h2>Inloggen</h2>
<form action="login.php" method="post">
<label for="naam">Naam:</label><br>
<input type="text" name="naam" id="naam" required><br><br>
<input type="submit" value="Inloggen">
</form>
</body>
</html>
🛠️ Opdracht 2 – login.php
Maak een bestand login.php
dat de naam opslaat in een sessie en doorstuurt:
<?php
session_start();
$_SESSION["gebruiker"] = $_POST["naam"];
header("Location: welkom.php");
exit;
?>
🛠️ Opdracht 3 – welkom.php
Maak een bestand welkom.php
dat de gebruiker begroet:
<?php
session_start();
if (isset($_SESSION["gebruiker"])) {
echo "<h1>Welkom, " . $_SESSION["gebruiker"] . "!</h1>";
echo '<p><a href="uitloggen.php">Uitloggen</a></p>';
} else {
echo "<p>Je bent niet ingelogd.</p>";
}
?>
🛠️ Opdracht 4 – uitloggen.php
<?php
session_start();
session_destroy();
header("Location: inloggen.html");
exit;
?>
🧠 Reflectie
- Waarom moet je altijd
session_start()
gebruiken bovenaan? - Wat gebeurt er als je probeert
welkom.php
te openen zonder in te loggen? - Wat zou je kunnen uitbreiden, bijvoorbeeld met wachtwoordcontrole?
📤 Inleveren
- Screenshots van
inloggen.html
,welkom.php
met jouw naam, enuitloggen.php
na het uitloggen. - Je moet gebruik maken van sessies en de naam van de gebruiker correct kunnen tonen op meerdere pagina’s.
9 Inloggen met wachtwoordcontrole
🎯 Leerdoelen
- Je maakt een formulier met gebruikersnaam én wachtwoord.
- Je controleert de invoer in PHP.
- Je begrijpt waarom
$_GET
niet veilig is voor wachtwoorden. - Je leert werken met een associatieve array.
💡 Uitleg
Een loginformulier stuurt gebruikersnaam en wachtwoord naar PHP. In deze les gebruiken we eerst $_GET
om te laten zien waarom dat niet veilig is – je ziet het wachtwoord in de URL.
🛠️ Opdracht 1 – login.html
Maak een bestand login.html
:
<!DOCTYPE html>
<html>
<body>
<h2>Loginformulier</h2>
<form action="controle.php" method="get">
<label>Gebruikersnaam:</label><br>
<input type="text" name="gebruiker" required><br><br>
<label>Wachtwoord:</label><br>
<input type="password" name="wachtwoord" required><br><br>
<input type="submit" value="Log in">
</form>
</body>
</html>
🛠️ Opdracht 2 – controle.php
Maak een bestand controle.php
waarin je controleert of de gebruiker mag inloggen:
<?php
$gebruiker = $_GET["gebruiker"];
$wachtwoord = $_GET["wachtwoord"];
if ($gebruiker == "admin" && $wachtwoord == "geheim123") {
echo "<h2>Welkom, $gebruiker!</h2>";
} else {
echo "<p>Foutieve inloggegevens. Probeer opnieuw.</p>";
}
?>
Let op:
Als je dit formulier verstuurt, zie je het wachtwoord in de URL. Dat is niet veilig!
🛠️ Opdracht 3 – Verbeter met POST
- Pas het formulier aan zodat het
method="post"
gebruikt - Pas
controle.php
aan zodat het$_POST
gebruikt - Test: zie je het wachtwoord nog in de URL?
💡 Uitleg – Associatieve array
Tot nu toe heb je gewerkt met lijsten zoals:
$hobby’s = ["voetbal", "gamen", "lezen"];
Dit is een indexed array: de computer onthoudt zelf de volgorde (index 0, 1, 2).
Een associatieve array heeft zelfgekozen namen als index (zogenaamde "keys"):
$gebruikers = [
"admin" => "geheim123",
"student" => "welkom01"
];
Je kunt dan bijvoorbeeld zeggen:
echo $gebruikers["admin"]; // toont: geheim123
Heel handig voor wachtwoorden of gebruikerslijsten!
🛠️ Extra opdracht – Meerdere gebruikers
Breid controle.php
uit met een associatieve array van toegestane gebruikers en wachtwoorden:
<?php
$gebruikers = [
"admin" => "geheim123",
"student" => "welkom01",
"docent" => "phprules"
];
$gebruiker = $_POST["gebruiker"];
$wachtwoord = $_POST["wachtwoord"];
if (isset($gebruikers[$gebruiker]) && $gebruikers[$gebruiker] == $wachtwoord) {
echo "<h2>Welkom, $gebruiker!</h2>";
} else {
echo "<p>Inloggen mislukt.</p>";
}
?>
Voeg zelf nog twee gebruikers toe: één voor jouw zelf (dus je eigen voornaam) en één voor een klasgenoot.
🧠 Reflectie
- Wat is het verschil tussen een indexed array en een associatieve array?
- Waarom is het veiliger om
$_POST
te gebruiken voor wachtwoorden? - Wat zou je doen om inloggen met een wachtwoord nog veiliger te maken?
📤 Inleveren
- controle.php
- Een .txt. of .pdf bestand met de antwoorden op de drie reflectievragen.
PHP Challenge
PHP Challenge - Mini-website bouwen
(geschatte tijdsduur 1 uur voor de planning en reflectie en 2-6 uur voor het uitvoeren. Totaal 3 - 7 uur)
🎯 Doelen
- Je laat zien wat je geleerd hebt over PHP-backend programmeren.
- Je maakt een mini-website met meerdere pagina’s, functies, formulieren en sessies.
- Je werkt zelfstandig aan een afgerond eindproject.
📜 Opdracht
Je gaat iets maken in HTML/CSS en PHP.
Omdat we nu met back-end (PHP) gaan oefenen, gebruik je geen Javascript.
Kies één van onderstaande opties of bedenk in overleg je eigen variant:
🌟 Optie 1 – Persoonlijke website
- Inlogpagina met naam via sessie
- Een pagina “Over mij” met gegevens in variabelen
- Hobby’s in een array en met een
foreach
getoond - Alleen als je goed bent ingelogd, kan je ene bericht versturen.
- Een formulier waarin iemand je een bericht kan sturen
Je mag het versturen zelf laten zitten: laat het bericht dat iemand wilt sturen gewoon zien op een pagina dan is het goed. - Bij het bericht staat een datum (Nederlands formaat), zie voorbeeld.
🎮 Optie 2 – Quiz met score
- Als je begint dan vraag je de gebruiker om een naam, deze naam sla je op in een sessie variabele.
- Meerdere vragen opgeslagen in een array
- Gebruik een
foreach
om vargen te stellen: de HTML code voor het laten zien van eenvraag komt dus maar 1x voor. - Als alle vragen zijn beantwoord dan wordt er een score of uitslag berekend. Hiervoor gebruik je een
function
.
🛒 Optie 3 – Simpele webshop
- Formulier waarin je jouw naam invoert, een product kiest, en een actiecode kan invoeren.
De producten die ja laat zien staan in een PHP array en worden met een (PHP) loop afgedrukt. - De naam plaats je in een sessie variabele.
- Als de actiecode juist is dan krijgt de gebruiker een korting van 10%.
- Gebruik een
function
om de actiecode te controleren en de korting te berekenen - Maak een professioneel bevestingsscherm waarin de bestelling te zien is, de korting wordt berekend en het totaal bedrag wordt getoond. Laat ook de datum van vandaag zien (Nederlands formaat). Tevens laat je de naam zien die is ongevoerd (en is opgelsagen in een sessie variabele).
✅ Technische eisen
Jouw project moet aan de volgende eisen voldoen:
- Minstens 3 aparte pagina’s (.php)
- Gebruik van
include()
ofrequire()
voor menu of footer - Minstens 1 formulier die met
POST
ofGET
gegevens verwerkt - Gebruik van een array en loop (
for
offoreach
) - Gebruik van minstens 1 zelfgemaakte functie
- Gebruik van sessies (
$_SESSION
)
Gebruik AI om je te helpen, maar begrijp wat er gebeurt!
📑Plannig
Je maakt eerst een soort planing met daarin het volgende.
Per pagina die je moet maken beschrijf je:
- Hoe moet de pagina eruit zien (geen tekening, maar beschrijven)?
- Wat wordt er precies getoond op de pagina (geen tekening maar beschriving).
- Wat zijn de technische eisen voor deze pagina.
- Welke zaken moet je uitzoeken omdat je niet (meer) precies weet heo het werkt.
- Hoe lang schat je bezig te zijn met deze pagina?
🧠 Reflectie
ls je klaar bent dan kijk je nog een keer naar de planning. Bij elke pagina beschrijf je nu (je voegt dus regels toe):
- Was je wat vergeten, zo ja wat dan?
- Viel het mee of tegen. leg uit!
- Hoe lang ben je uiteindleijk bezig geweest met deze pagina.
📤 Inleveren
- De planning in PDF
- Laat een docent zien dat alles op jouw computer werkt en dat je aan alle eisen voldoet.
--
Kennis Check Blok 4
Prompt Engineering 1
1. Wat is prompt engineering?
Prompt engineering is het slim formuleren van je vraag of opdracht aan een AI, zodat je het best mogelijke antwoord krijgt. Je stuurt de AI dus als het ware met jouw woorden.
2. Waarom is het belangrijk om duidelijk te zijn in je prompt?
Als je vaag bent, weet de AI niet goed wat je bedoelt en krijg je soms een verkeerd of vaag antwoord. Hoe duidelijker je bent, hoe beter het antwoord.
3. Wat is het verschil tussen een open en een gesloten vraag aan een AI?
Een open vraag laat ruimte voor uitleg of een mening (“Wat vind jij van...?”). Een gesloten vraag stuurt de AI naar een specifiek antwoord (“Geef 3 voorbeelden van...”).
4. Wat betekent "few-shot prompting"?
Je geeft de AI een paar voorbeelden voordat je jouw echte vraag stelt. Zo leert de AI wat voor soort antwoord jij verwacht.
5. Wat doet "chain-of-thought prompting"?
Bij chain-of-thought laat je de AI stap voor stap nadenken. Dit helpt bij moeilijke vragen of rekenvragen, net zoals jij zelf in stappen zou werken.
6. Waarom is het handig om rollen te geven in een prompt (zoals “Jij bent een docent”)?
De AI weet dan beter vanuit welk perspectief hij moet antwoorden. Het verandert de toon en inhoud van het antwoord zodat het past bij de rol.
7. Wat is prompt injection?
Dat is als iemand expres een opdracht in de prompt stopt om de AI iets fout of ongewenst te laten doen. Een soort trucje om de AI te misleiden.
8. Wat is een reden om AI je prompt te laten verbeteren?
De AI kan jouw vraag herschrijven zodat je een duidelijker en beter antwoord krijgt. Vooral handig als je zelf niet goed weet hoe je iets moet vragen.
9. Waarom helpt het om de AI een format of structuur te geven in je prompt?
Dan weet de AI precies hoe jij het antwoord wilt hebben, zoals in een tabel, stappenplan of tekst. Dat maakt het resultaat veel bruikbaarder.
10. Waarom is oefenen met prompt engineering belangrijk als programmeur of ontwerper?
Omdat je dan beter leert samenwerken met AI. Je krijgt sneller goede antwoorden en kunt het gebruiken bij ontwerpen, schrijven of coderen.
PHP Intro
1. Wat is het verschil tussen front-end en back-end?
Front-end is wat je op het scherm ziet (zoals knoppen en kleuren), back-end is wat er op de server gebeurt (zoals berekeningen of gegevens opslaan).
2. Waarom is het handig om een duidelijk verschil te maken tussen front-end en back-end?
Omdat ze allebei iets anders doen.
Front-end wordt door de browser uitgevoerd en heeft vooral te maken met hoe een website er uitziet.
Back-end wordt door de server (of XAMPP) uitgevoerd en heeft vooral te maken met gegevens en het verwerken van gegevens.
Later zullen we zien dat een database en alles wat daar mee te maken heeft op de backend draait.
3. Wat gebeurt er als je een formulier invult en op verzenden klikt?
De front-end stuurt je gegevens naar de back-end. Daar verwerkt de server die gegevens, bijvoorbeeld om ze op te slaan of een antwoord terug te geven.
4. Waarom kun je zeggen dat een webwinkel zowel front-end als back-end gebruikt?
De front-end laat producten en knoppen zien. De back-end checkt of iets op voorraad is en verwerkt je bestelling.
5. Wat doet een server eigenlijk?
Een server voert taken uit die je vanaf een browser vraagt, zoals gegevens opslaan, iets berekenen of een pagina terugsturen.
6. Waarom gebruiken we PHP aan de back-end?
Omdat PHP op de server draait en dingen kan doen zoals inloggen controleren, iets berekenen of data uit een database halen.
7. Hoe kun je weten of iets front-end is?
Als je het kunt zien of aanklikken in de browser (zoals tekst, kleuren of knoppen), dan is het front-end.
8. Wat is de functie van HTML in een website?
HTML bepaalt de structuur van een pagina: wat er op staat, zoals koppen, tekst en plaatjes.
9. Wat is de rol van CSS in de front-end?
CSS zorgt dat de HTML van een website er mooi uitziet. Het bepaalt kleuren, lettertypes en waar iets op de pagina staat.
10. Waarom heb je een programma zoals XAMPP nodig voor PHP?
Omdat PHP op een server draait en je die server op je eigen computer moet nabootsen. XAMPP doet dat voor je.
PHP 1
1. Wat is het verschil tussen GET en POST in een formulier?
GET laat de ingevulde gegevens in de URL zien, POST doet dat niet. POST is dus beter voor privacy, bijvoorbeeld bij wachtwoorden. GET is weer handiger als je ontwikkelen bent omdat je (op de URL) precies kan zien welke variabelen en waarden er worden verstuurd.
2. Waarom gebruik je een formulier met method="post" als je een wachtwoord verstuurt?
Omdat het wachtwoord dan niet zichtbaar is in de URL. Dat is veiliger.
3. Wat doet het stukje PHP-code $_POST["adres"]?
Het haalt de waarde op van het invoerveld met de naam "adres" uit het formulier dat je hebt verzonden met POST.<input name="adres">
4. Wat is het verschil tussen include en require in PHP?
Ze voegen allebei een PHP-bestand toe.
Bij include gaat je script verder als het bestand er niet is. Bij require stopt je script met een foutmelding.
5. Wat is een array in PHP?
Een array is een lijstje van dingen. Bijvoorbeeld een lijst van namen of cijfers.
6. Wat is het verschil tussen een gewone array en een associatieve array?
Een gewone array gebruikt nummers als sleutels (0, 1, 2…). Een associatieve array gebruikt woorden als sleutels, zoals "naam" of "leeftijd".
7. Wat doet een foreach-loop in PHP?
Een foreach-loop herhaalt een stukje code voor elk onderdeel van een array. Zo kun je makkelijk alle items uit een lijst laten zien.
8. Waarom is het handig om een functie te maken in PHP?
Een functie is een herbruikbaar stukje code. Je kunt het vaker gebruiken zonder alles opnieuw te typen.
9. Wat is het voordeel van een functie met een parameter?
Dan kun je er iets aan meegeven, zoals een naam, zodat de functie elke keer iets anders kan doen.
function mijnFunctie(naam) { .....
10. Wat doet session_start() in PHP?
Het start of opent een sessie. Daardoor kun je informatie (zoals een inlogstatus) bewaren terwijl je naar andere pagina's gaat.
🛠️ Opdracht
Maak de kennis-check.
📤 Inleveren
Aan het einde van de kennis-check ontvang je een certificaat. Maak een schermafdruk en lever deze in.
Blok 5 - Database en JS (DOM)
Prompt Engineering 2
1, Introductie
We hebben in prompt engineering 1 geleerd waaraan een goede prompt moest voldoen.
Dit zijn de basis kenmerken van een goede prompt. De eerste drie kenmerken moet je prompt altijd aan voldoen!
-
- Context - een goede prompt heeft voldoende contexrt.
- Details/Specifiek - een goed prompt heeft voldoende details en is zo specifiek mogelijk.
- Duidelijkheid - een goedeprompt is duidelijk.
- Doelgericht - een goede prompt is doelgericht.
- Vorm - in een goede prompt kan je de output in een bepalade vorm vragen.
- Toon -door in de prompt de toon op te nemen, bepaal je de vorm van het antwoord.
In deze module gaan we 6 advanched prompt-technieken leren. Deze technieken heb je niet altijd nodig maar het is handig om deze technieken te kennen.
Bovendien zijn de meeste techniekken ook toepasbaar in als 'problem solving' technieken.
-
Isolate the problem
Focus alleen op het onderdeel dat opgelost moet worden.
Laat overbodige context of code weg, zodat de AI zich op het juiste richt. -
Provide lists in bullet points
Structuur helpt de AI om overzichtelijke en duidelijke antwoorden te geven. -
Provide the order if you ask for multiple tasks
Geef een logische volgorde bij samengestelde opdrachten. -
Geef voorbeelden (few-shot prompting)
Laat zien wat je bedoelt met een input/output-voorbeeld. -
Stel voorwaarden of beperkingen
Geef grenzen aan zoals "gebruik max. 100 woorden" of "geen disclaimers". -
Werk in stappen (chain-of-thought prompting)
Vraag de AI om stap voor stap te redeneren of eerst een plan te maken.
1. Isolate the problem
💡 Uitleg
Richt je prompt op het exacte probleem. In plaats van een hele codepagina te geven, geef alleen het stuk code of de situatie waar het om draait. Hoe minder ruis, hoe beter de AI kan helpen.
Je ziet dus dat je voor een goede prompt de code goed moet kunnen lezen.
✍️Opdracht
Je hebt een PHP-pagina met een formulier dat soms geen gegevens doorstuurt.
👉 Maak een prompt voor ChatGPT waarin je alleen het relevante deel van de code opneemt en waarin je de AI vraagt om te helpen bij het vinden van de fout.
Houd nog steeds rekening met de context, details en duidelijkheid.
In dit voorbeeld zou je makkelijk de hele code kunnen verturen, maar in de echte wereld heb je veel meer code en daarom is dit een goede oefening in het isoleren van code die relevant is.
Tip: je kan ook andersom redeneren en alle code waarvan je zeker weet die goed is of niets met het formulier te maken heeft weghaald.
<?php
$bericht = "";
$success = false;
if ($_SERVER["REQUEST_METHOD"] === "POST") {
if (!empty($_POST["naam"])) {
$naam = $_POST["naam"];
$bericht = "Hallo, " . htmlspecialchars($naam) . "!";
$success = true;
} else {
$bericht = "Je moet je naam invullen.";
}
}
?>
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Contactpagina</title>
<style>
body { font-family: Arial; background-color: #f0f0f0; margin: 2rem; }
.container { background: white; padding: 2rem; border-radius: 8px; max-width: 600px; margin: auto; }
.error { color: red; }
.success { color: green; }
footer { margin-top: 4rem; font-size: 0.8em; text-align: center; color: #666; }
</style>
<script>
function checkForm() {
const naam = document.getElementById("naam").value;
if (naam.trim() === "") {
alert("Naam is verplicht!");
return false;
}
return true;
}
</script>
</head>
<body>
<div class="container">
<h1>Neem contact met ons op</h1>
<form method="get" action="" onsubmit="return checkForm();">
<label for="naam">Naam:</label><br>
<input type="text" id="naam" name="naam" placeholder="Vul je naam in"><br><br>
<label for="email">E-mail:</label><br>
<input type="email" id="email" name="email" placeholder="voorbeeld@domein.nl"><br><br>
<label for="vraag">Je vraag:</label><br>
<textarea id="vraag" name="vraag"></textarea><br><br>
<button type="submit">Verzenden</button>
</form>
<?php if ($bericht): ?>
<p class="<?= $success ? 'success' : 'error' ?>"><?= $bericht ?></p>
<?php endif; ?>
</div>
<footer>
© 2025 Webdev Company | <a href="#">Privacybeleid</a>
</footer>
</body>
</html>
📤 Inleveren
De prompt die het probleem uiteindelijk vond en waain alleen de relevante code staat.
De prompt voldoet tevens minimaal aan de basis kenmerken van een prompt: context, details en duidelijkheid.
2, Provide lists in bullet points
💡 Uitleg
Als je meerdere dingen van een AI vraagt, is het belangrijk om structuur aan te brengen in je prompt. Door bullet points of genummerde lijsten te gebruiken:
-
Maak je je prompt overzichtelijk.
-
Zorg je ervoor dat de AI geen onderdelen vergeet.
-
Help je jezelf om duidelijk te verwoorden wat je wilt.
Bullet points zijn dus niet alleen netjes — ze zijn slim.
✍️Opdracht
Hieronder zie je een afbeelding van een eenvoudige webpagina met meerdere onderdelen.
Het plaatje kan je hirr downloaden: Berglandschap.png.
-
Bestudeer de afbeelding goed. Wat zie je allemaal op de pagina?
-
Bedenk wat je aan de AI zou vragen om precies deze pagina te laten maken.
-
Noteer minstens 4 onderdelen van de pagina als bullet points in je prompt.
📤 Inleveren
- Prompt
- Resultaat in code
- Schermafdruk van resultaat
3. Provide the order if you ask for multiple tasks
💡 Uitleg
Als je aan de AI vraagt om meerdere dingen tegelijk te doen, dan is het belangrijk dat je duidelijk maakt in welke volgorde dat moet gebeuren.
AI volgt jouw instructies letterlijk — dus als de volgorde onduidelijk is, krijg je soms een rommelig of onvolledig resultaat.
Door een logische nummering of expliciete volgorde te geven, help je de AI om stapsgewijs te werken.
Voorbeeld (vaag):
Maak een invoerpagina met HTML en verwerk de gegevens met PHP.
Voorbeeld (duidelijker):
- Maak eerst een HTML-pagina met een formulier waarin wordt gevraagd naar de tijd en de klantnaam
- Voeg daarna de PHP-code toe die de ingevulde gegevens toont.
✍️Opdracht
Je wilt de AI vragen om je te helpen met het maken van een eenvoudige contactpagina.
Die moet bestaan uit:
- Een HTML-formulier waarin je je naam en e-mailadres kunt invullen
- Een PHP-script dat de gegevens verwerkt en netjes op het scherm toont
- Schrijf een prompt waarin je deze twee onderdelen vraagt in de juiste volgorde.
- Gebruik een genummerde lijst of maak duidelijk met woorden wat “eerst” en “daarna” moet gebeuren.
- Houd rekening met de context, details en duidelijkheid.
📤 Inleveren
- Je volledige prompt
- De gegenereerde HTML + PHP code
- Een screenshot van het resultaat in de browser
4. Geef voorbeelden (few-shot prompting)
💡 Uitleg
Als je wilt dat de AI op een specifieke manier code genereert of uitlegt, dan helpt het enorm als je eerst een paar voorbeelden geeft. Dit heet few-shot prompting.
Je laat zien wat jij bedoelt — de AI herkent het patroon en volgt het. Dit is heel handig bij het ontwerpen van knoppen, formulieren of herhalende structuren.
Voorbeeld prompt
<button style="background-color: red;">Verwijderen</button><button
style="
background-color: #dc3545;
color: white;
border: none;
padding: 10px 16px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
"
onmouseover="this.style.backgroundColor='#c82333'"
onmouseout="this.style.backgroundColor='#dc3545'"
onclick="handleDelete()"
>
Verwijderen
</button>
Deze knop ziet er professioneel uit: rood met witte tekst, afgeronde hoeken en een vloeiend hover-effect dat de kleur donkerder maakt wanneer je erover beweegt.
Klikt de gebruiker op de knop, dan wordt de JS code handleDelete() aangeroepen.
Maak op dezelfde manier een blauwe knop 'toevoegen'.
✍️Opdracht
Je wilt een aantal drop down menu's maken. Hier is een voorbeeld.
<style>
.form-control {
width: 250px;
padding: 8px 12px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 6px;
background-color: #f9f9f9;
appearance: none; /* verwijder standaardstijl in sommige browsers */
}
.form-control:focus {
border-color: #007BFF;
outline: none;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}
</style>
<select id="taalSelect" name="taal" class="form-control">
<option value="en">Engels</option>
<option value="nl" selected>Nederlands</option>
<option value="fr">Frans</option>
</select>
Maak een multi-shot prompt waarbij je dit menu als voorbeeld gebruikt en waarbij je het volgende menu maakt:
Tip: denk goed na over wat je de AI precies als voorbeeld geeft, alleen de HTML of HTML met CSS? Denk hierbij ook aan Isolate the problem.
📤 Inleveren
- Je volledige prompt inclusief voorbeeld(en)
- De gegenereerde knop + uitleg van de AI
- Een screenshot van de knop in de browser
5. Stel voorwaarden of beperkingen
💡 Uitleg
Soms wil je meer controle over hoe de AI iets oplevert. Je kunt dan in je prompt voorwaarden of beperkingen opnemen.
Bijvoorbeeld:
- Beperk het aantal woorden of regels code
- Vermijd bepaalde technieken (zoals frameworks)
- Vraag om iets op een specifieke manier te doen (bijv. alleen in-line CSS)
Door deze randvoorwaarden op te nemen, stuur je de AI veel gerichter aan.
✍️Opdracht
Je wilt een eenvoudige HTML-formulierpagina laten genereren, maar je stelt een aantal duidelijke voorwaarden.
- Bedenk minstens 3 voorwaarden waaraan de code moet voldoen. Bijvoorbeeld:
- Geen externe CSS-bestanden of frameworks zoals Bootstrap
- Maximaal 30 regels HTML
- Formulier moet naam en e-mailadres bevatten, met eenvoudige styling
- Schrijf een prompt waarin je deze voorwaarden duidelijk formuleert.
- Leg de context uit: “Ik wil een eenvoudig formulier…”
- Som je voorwaarden op in een bulletlijst of genummerde lijst
- Sluit duidelijk af met je verzoek: “Geef alleen de HTML-code”
- Zorg dat je prompt voldoet aan de context, details en duidelijkheid.
📤 Inleveren
- Je prompt (inclusief de voorwaarden)
- De gegenereerde HTML-code
- Een screenshot van het formulier
6. Chain-of-thought prompting 1
💡 Uitleg
Bij opdrachten met meerdere onderdelen is het slim om de AI eerst te laten nadenken en plannen. Dat noem je chain-of-thought prompting.
Je vraagt de AI dus om niet meteen te bouwen, maar eerst te analyseren:
- Wat moet er gebeuren, welke stappen moet ik volgen?
- In welke volgorde?
- Wat zijn de componenten en technieken die ik moet gebruiken?
Daarna kan de AI gestructureerd de code aanleveren. Zo voorkom je onvolledige of chaotische antwoorden.
🎬Voorbeeld
Prompt
Ik wil een formulier dat een naam opslaat.
Leg eerst uit welke stappen ik daarvoor nodig heb.
Geef dan de HTML-code.
Geef daarna de PHP-code.
Leg elke stap kort uit.
Verwachte AI-reactie
- Je hebt een HTML-formulier nodig om de naam in te voeren.
- Je hebt een PHP-script nodig dat de naam opvangt en verwerkt.
- Je moet het formulier met method="post" versturen.
- Daarna geef ik de HTML en PHP code apart, met uitleg.
Als je een stap niet snapt, of het niet eens bent, vraag dan verheldering. Vraag uitleg, bijvoorbeeld:
Prompt
Wat gebeuert er in stap 3 en waarom moet ik ene post gebruiken, zijn er alternatieven?
Op deze manier leer je een probleem in stappen opdelen en daarna de stappen één voor één op te lossen. Nu lijkt dat wellicht overbodig, maar bij grotere projecten is deze methode noodzakelijk.
✍️Opdracht
Je wil een AI vragen om een simpele “Contact opnemen”-pagina te maken met de volgende onderdelen:
- Een HTML-formulier met velden voor naam, e-mail en bericht
- Een mooie layout met CSS (geen framework)
- Een PHP-bestand dat het formulier verwerkt en de data netjes toont
- De gegevens mogen niet verstuurd worden zonder geldige invoer
Maar: je wil niet meteen de code, je wil dat de AI eerst in stappen uitlegt hoe je dit moet aanpakken.
- Schrijf een prompt waarin je aan de AI vraagt om:
- Eerst te analyseren wat deze opdracht inhoudt
- Daarna een overzicht in stappen te geven van wat er allemaal moet gebeuren (HTML-structuur, input validatie, PHP-verwerking, opmaak)
- Pas daarna per stap de juiste code te geven, met uitleg
- Gebruik termen als:
- “Geef eerst een analyse van de opdracht”
- “Schrijf daarna de stappen uit in logische volgorde”
- “Geef dan pas de bijbehorende code, met uitleg per stap”
- Voeg in je prompt beperkingen of voorkeuren toe, zoals:
- “Gebruik geen externe CSS-frameworks”
- “Gebruik eenvoudige PHP, geen database”
- “Geef geen code voordat alle stappen duidelijk zijn”
- Zorg dat je prompt voldoet aan de kenmerken: context, details, duidelijkheid, volgorde
📤 Inleveren
- Je volledige prompt(en)
- Het AI-antwoord (mag opgeknipt zijn in stappen)
- De uiteindelijke werkende HTML- en PHP-code
- Screenshot van de werkende pagina
7. Chain-of-thought prompting 2
In de vorige opdracht heb je een formulier laten maken.
Wat voor method heb je gebruikt in het formulier?
Vraag AI om uit te leggen welke methoden er zijn en wat de voor en nadelen zijn van bedien methoden?
📤 Inleveren
- Je volledige prompt.
- In een txt bestand: Jouw eingen aanbeveling: wat zou je het beste hebben kunnen gebruiken bij de vorige opdracht. Leg uit waarom!
JS 2 - (DOM1)
1 Introductievideo
🎯 Leerdoelen
- Je weet wat de DOM is.
- Je weet dat je met JavaScript het DOM kan lezen en kan aanpassen.
💡 Uitleg
Bekijk de volgende video
https://www.roc.ovh/link/902#bkmrk-6-formulieren-in-html
Code
Gebruik dit als start-code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Page</title>
<style>body{font-family:Arial,sans-serif;background-color:#f0f4f8;padding:60px;text-align:center}.container{background-color:#fff;padding:40px;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,0.1);max-width:600px;margin:auto}h1{color:#2c3e50}p{color:#555;font-size:1.1em}</style>
</head>
<body>
<div class="container">
<h1 id="header">Embrace the Simplicity</h1>
<p>Sometimes, all you need is a quiet page, a clear message, and a bit of whitespace. Let your thoughts breathe and focus on what truly matters.</p>
</div>
</body>
</html>
<script>
</script>
🛠️ Opdracht
Bekijk de video daarin worden dingen voorgendaan, die jij ook moet toepassen.
- Neem de start-code over in het bestand
dom1.html
en - Op regel 18 plaats code waarmee je de
backgroundColor
van de body grijs (grey) maakt. - Plaats vervolgens JavaScript code om tekst van de header met id "header" aan te passen naar:
"Hallo slimme student". - In de video wordt dit beiden voorgedaan!
Je ziet aan het eind dus:
📤 Inleveren
- De aangepaste code (
dom1.html
bestand).
2 Elementen ophalen en aanpassen
🎯 Leerdoelen
- Je weet wat de DOM is.
- Je kunt HTML-elementen selecteren met JavaScript.
- Je kunt de inhoud en stijl van elementen aanpassen via JavaScript.
💡 Uitleg
De DOM (Document Object Model) is de structuur van je HTML-document zoals de browser die begrijpt. Met JavaScript kun je deze structuur lezen en aanpassen.
Voorbeeld – een paragraaf veranderen:
<p id="mijnParagraaf">Oude tekst</p>
<script>
const p = document.getElementById("mijnParagraaf");
p.textContent = "Nieuwe tekst!";
p.style.color = "blue";
</script>
🛠️ Opdracht – Tekst aanpassen
- Maak een nieuw bestand aan met de naam
dom1.html
. - Begin met de start-code (hieronder)
- Als je op de knop klikt, moet de tekst in de paragraaf veranderen naar iets anders (bijv. “Hallo wereld!”).
Start code
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Voorbeeld</title>
</head>
<body>
<p id="mijnParagraaf">Dit is de originele tekst.</p>
<button onclick="verander()">Verander</button>
<script>
function verander() {
// plaats hier de code die de inhoud van de pragraaf veranderd.
}
</script>
</body>
</html>
🧠 Reflectie
- Wat is de DOM in eigen woorden?
- Wat doet
getElementById
precies? - Waarom zou je de stijl van een element met JavaScript aanpassen en niet met CSS?
📤 Inleveren
- Lever je bestand
dom2.html
in. - Beantwoord de reflectievragen in een .txt of .pdf bestand en lever deze mee in.
3 Meerdere elementen aanpakken
🎯 Leerdoelen
- Je kunt meerdere elementen selecteren met
querySelectorAll
. - Je kunt met
forEach
een actie uitvoeren op elk element. - Je kunt een class toevoegen of verwijderen met
classList
.
💡 Uitleg
Als je meerdere elementen tegelijk wilt aanpakken (zoals alle <p>-elementen of alle knoppen), gebruik je querySelectorAll
. Dit geeft je een lijst (een zogenaamde “NodeList”) van alle elementen die matchen.
Met forEach
kun je vervolgens over deze lijst heen lopen en elk element iets laten doen:
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
<button onclick="verander()">Verander</button>
<script>
function verander() {
const alleP = document.querySelectorAll("p");
alleP.forEach(function(p) {
p.style.color = "green";
});
}
</script>
Je kunt ook classes toevoegen of weghalen met classList
:
p.classList.add("actief");
p.classList.remove("verborgen");
p.classList.toggle("geselecteerd");
🛠️ Opdracht – items markeren
- Maak een bestand
dom3.html
. - Maak een lijst van minimaal 5 <p>-elementen met een class
item
. - Maak een knop met de tekst “Markeer alles”.
- Wanneer je op de knop klikt, moeten alle <p class="item"> elementen de class
geselecteerd
krijgen. - Als je weer op de knop drukt, dan moet de <p> weer terug veranderen (tip: gebuik toggle!).
- Gebruik de voorbeeld code en pas die zelf aan.
Voorbeeld (gebruik zelf andere items)
|
![]() |
🧠 Reflectie
- Wat doet
querySelectorAll(".item")
precies? - Wat is het verschil tussen
getElementById
enquerySelectorAll
? - Waarom gebruik je
forEach
bij een NodeList? - Wat doet
p.classList.toggle("geselecteerd");
?
📤 Inleveren
- Lever het bestand
dom3.html
in. - Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in.
4 Interactie met knoppen en events
🎯 Leerdoelen
- Je begrijpt wat een event is in JavaScript.
- Je kunt reageren op een klik of muisactie met
addEventListener
. - Je kunt een actie koppelen aan meerdere elementen.
💡 Uitleg
Een event is iets wat gebeurt in de browser: een klik, het bewegen van de muis, een toets indrukken…
Met addEventListener
kun je zeggen: “Als dit gebeurt, doe dan dat.”
<button id="klikMij">Klik mij (addEventListener)</button>
<script>
const knop = document.getElementById("klikMij");
knop.addEventListener("click", function() {
alert("Je klikte op de knop!");
});
</script>
Dit doet hetzelde als:
<button onclick="toonMelding()">Klik mij (via functie)</button>
<script>
function toonMelding() {
alert("Je klikte op de knop!");
}
</script>
Waarom zou je eventlisteners gebruiken?
Denk eerst zelf na en klik dan open!
➕ Voordelen:
Scheidt structuur (HTML) van gedrag (JS) → netter.
Je kunt meerdere functies aan één event koppelen.
Flexibeler: makkelijk dynamisch events toevoegen of verwijderen.
Werkt ook bij elementen die pas later op de pagina verschijnen (bijv. via JavaScript geladen).
➖ Nadelen:
Iets meer code nodig.
Niet altijd direct zichtbaar in de HTML wat er gebeurt (iets minder beginner-vriendelijk).
Andere events
Ook andere events zijn mogelijk, zoals mouseover
, mouseout
, keydown
enzovoort.
Je kunt ook meerdere elementen selecteren en daar een event aan koppelen:
document.querySelectorAll(".kleurvak").forEach(function(el) {
el.addEventListener("mouseover", function() {
el.style.backgroundColor = "yellow";
});
});
Wat doet dit? Denk eerst na en controleer dan door hier te klikken.
Elk vak met de class "kleurvak" krijgt een gele achtergrond kleur als je er met de muis overheen gaat.
🛠️ Opdracht – Events in actie
- Maak een nieuw HTML-bestand
dom4.html
. - Voeg 5 divjes toe met de class
kleurvak
, elk met een vaste afmeting en een andere begin-kleur. - Als je met de muis over een vakje gaat, verandert de achtergrondkleur in geel.
- Als je erop klikt, moet de tekst in het vakje veranderen naar “Geklikt!”.
Gebruik zowel mouseover
als click
events.
Gebruik dit als basis voor de CSS:
<style>
.kleurvak {
width: 100px;
height: 100px;
display: inline-block;
margin: 10px;
text-align: center;
line-height: 100px;
background-color: lightblue;
font-weight: bold;
cursor: pointer;
}
</style>
Resultaat
🧠 Reflectie
- Wat is een event in je eigen woorden?
- Wat doet
addEventListener
precies? - Wat is het verschil tussen
mouseover
enclick
?
📤 Inleveren
- Lever je bestand
dom4.html
in. - Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in.
5 Elementen toevoegen met JavaScript
🎯 Leerdoelen
- Je kunt een nieuw HTML-element aanmaken met
createElement
. - Je kunt dat element toevoegen aan de DOM met
appendChild
. - Je kunt invoer van de gebruiker gebruiken om dynamisch iets te maken.
💡 Uitleg
Je kunt nieuwe HTML-elementen maken en ze toevoegen aan je pagina met JavaScript. Dit is handig als je bijvoorbeeld automatisch lijstjes wilt uitbreiden of reacties wilt tonen.
const nieuwElement = document.createElement("p");
nieuwElement.textContent = "Hallo, ik ben nieuw!";
document.body.appendChild(nieuwElement);
Je kunt ook iets maken op basis van wat de gebruiker invoert:
<input type="text" id="tekstvak">
<button id="voegToe">Voeg toe</button>
<div id="resultaat"></div>
<script>
document.getElementById("voegToe").addEventListener("click", function() {
const invoer = document.getElementById("tekstvak").value;
const nieuwP = document.createElement("p");
nieuwP.textContent = invoer;
document.getElementById("resultaat").appendChild(nieuwP);
});
</script>
- Op regel 7 wordt de waarde van het HTML elemenet met het id
tekstvlak
gelezen en in de variabelinvoer
gezet. - Op regel 8 wordt er een nieuwe paragraaf gemaakt.
- Op regel 9 wordt het nieuwe element gevuld met tekst.
- Op regel 10 wordt het nieuwe element toegevoegd aan de de
div
met id resultaat
🛠️ Opdracht – Invoer toevoegen
- Maak een bestand
dom5.html
. - Voeg een invoerveld toe waarin de gebruiker een hobby, film of favoriet eten kan typen.
- Voeg een knop toe met de tekst “Toevoegen”.
- Telkens wanneer je klikt, moet er een nieuw <p>-element met de ingevoerde tekst verschijnen onder een lijstdiv.
- Bonus
Als je het leuk vindt, maak je het invoerveld na het klikken automatisch weer leeg.
Gebruik daaarvoorinput.value = ""
om het veld te legen.
🧠 Reflectie
- Wat doet
createElement
precies? - Wat is het verschil tussen
textContent
eninnerHTML
? - Waarom moet je
appendChild
gebruiken?
📤 Inleveren
- Lever je bestand
dom5.html
in. - Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in.
6 Elementen aanpassen via event.target
🎯 Leerdoelen
- Je begrijpt wat
event.target
doet. - Je kunt een klik koppelen aan een specifiek element dat je wilt aanpassen of verwijderen.
- Je kunt met JavaScript elementen verwijderen uit de DOM.
💡 Uitleg
Als een event plaatsvindt (zoals een click
), kun je met event.target
achterhalen welk element er precies geklikt is.
Voorbeeld
"klikbare lijst waarin een item verdwijnt"
<ul id="lijst">
<li>Appel</li>
<li>Banaan</li>
<li>Peer</li>
</ul>
<script>
document.querySelectorAll("#lijst li").forEach(function(item) {
item.addEventListener("click", function(event) {
event.target.remove();
});
});
</script>
Er wordt een HTML lijst gemaakt en er wordt op elke element van de lijst een click event geplaatst. Dit event verwijderd zichzelf.
🛠️ Opdracht – Klik en verwijder
- Maak een bestand
dom6.html
. - Voeg een lijst toe (bijv. <ul>) met minstens 5 items (bijv. films, dieren of snacks).
- Schrijf JavaScript die ervoor zorgt dat je een item uit de lijst verwijdert zodra je erop klikt.
- Bonus: Toon boven de lijst hoeveel items er nog over zijn.
Gebruik event.target.remove()
binnen je event handler.
🧠 Reflectie
- Wat is
event.target
en waar gebruik je het voor? - Bedenk en beschrijf een nuttige toepassing waarbij je meet
event.target
iets wil aanpassen of verwijderen.
📤 Inleveren
- Lever je bestand
dom6.html
in. - Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in.
7 Herhaling – Interactieve favorietenlijst
We gaan een aantal onderdelen die we in de opdrachten hebben behandeld nu combineren en we gaan onze eigen interacteive lisjt maken.
Wat gaan we maken?
🎯 Leerdoelen
- Je kunt elementen aanmaken, toevoegen en verwijderen met JavaScript.
- Je kunt reageren op events zoals klikken en rechtermuisklikken.
- Je kunt meerdere elementen selecteren en aanpassen.
💡 Uitleg
In deze opdracht herhaal je alles wat je geleerd hebt in de vorige opdrachten. Je maakt een interactieve lijst waarin je dingen kunt toevoegen, markeren en verwijderen.
🛠️ Opdracht – Favorietenlijst
- Maak een bestand
dom7.html
. - Voeg een invoerveld toe waarin de gebruiker een favoriete hobby, snack of film kan typen.
- Voeg een knop toe met de tekst
Voeg toe
. - Onder de knop komt een lijst (<ul>) waarin elke keer een nieuw item verschijnt als de gebruiker op de knop klikt.
- Wanneer je op een item klikt, verandert de tekstkleur of opmaak (gebruik
classList.toggle()
). - Wanneer je met de rechtermuisknop op een item klikt, moet dat item verdwijnen (gebruik
event.preventDefault()
). - Boven de lijst staat een teller met hoeveel items er in de lijst staan. Deze teller werkt automatisch.
🧠 Reflectie
- Wat heb je allemaal moeten combineren uit de vorige lessen?
- Waarom is
event.preventDefault()
nodig bij het gebruik van de rechtermuisknop? - Wat is het voordeel van
classList.toggle()
ten opzichte vanadd()
enremove()
? - Waarom moet je elementen ophalen met
getElementById
ofquerySelector
nadat de HTML geladen is?
📤 Inleveren
- Lever je bestand
dom7.html
in. - Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in.
JS 3 - (DOM2)
1 Formulieren en invoer met JavaScript
🎯 Leerdoelen
- Je weet hoe je gegevens uit een formulier leest met JavaScript.
- Je kunt reageren op een
submit
-event. - Je weet wat
preventDefault()
doet en waarom je het gebruikt.
💡 Uitleg
Formulieren worden normaal automatisch verstuurd, waarbij de pagina automatisch ververst. Dat is standaard zo in HTML, maar soms wil je dat niet. Dan kan je in JavaScript het formulier ook “afhandelen” zonder dat de pagina opnieuw ververst.
Dat doe je door te luisteren naar het submit
-event en vervolgens preventDefault()
te gebruiken om het standaardgedrag tegen te houden.
Wat is het submit-event?
Het submit
-event wordt getriggerd als je een formulier probeert te versturen, bijvoorbeeld door op een knop te klikken of op Enter te drukken in een veld. Je kunt dan JavaScript laten reageren op dat moment.
Wat doet preventDefault()?
Deze functie voorkomt dat het formulier echt verzonden wordt en de pagina herlaadt. Daardoor kun je de gegevens gebruiken in JavaScript zonder dat alles verdwijnt.
Voorbeeldformulier:
<form id="mijnForm">
<input type="text" id="naam" placeholder="Typ je naam">
<button type="submit">Verstuur</button>
</form>
<div id="resultaat"></div>
<script>
document.getElementById("mijnForm").addEventListener("submit", function(e) {
e.preventDefault(); // voorkomt verversen
const naam = document.getElementById("naam").value;
document.getElementById("resultaat").textContent = "Hallo " + naam + "!";
});
</script>
🛠️ Opdracht – Formulier verwerken
- Maak een bestand
dom8.html
. - Voeg een formulier toe met een tekstveld voor een bericht en een verstuurknop.
- Laat het formulier bij klikken niet verversen door
preventDefault()
te gebruiken. - Laat het ingevoerde bericht onder het formulier verschijnen in een <p>-element.
- Bonus: Voeg meerdere berichten toe onder elkaar (zoals een eenvoudige chatgeschiedenis).
- Extra bonus: Voeg een tweede input toe voor een gebruikersnaam en laat “Naam zegt: Bericht” zien.
🧠 Reflectie
- Wat doet
preventDefault()
en waarom gebruik je het? - Wat is het verschil tussen een
click
-event en eensubmit
-event? - Hoe lees je de waarde van een inputveld?
📤 Inleveren
- Lever je bestand
dom8.html
in. - Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in.
2 Gegevens bewaren met localStorage
🎯 Leerdoelen
- Je weet wat
localStorage
is en wanneer je het gebruikt. - Je kunt gegevens opslaan in de browser.
- Je kunt opgeslagen gegevens bij het laden van de pagina weer tonen.
💡 Uitleg
localStorage
is een opslagruimte in de browser. Alles wat je daarin zet, blijft bewaard – ook als je de pagina sluit of opnieuw opent.
Je gebruikt het bijvoorbeeld zo:
// Iets opslaan
localStorage.setItem("naam", "Ali");
// Iets ophalen
const naam = localStorage.getItem("naam");
// Iets verwijderen
localStorage.removeItem("naam");
Let op: je kunt alleen strings opslaan. Wil je een lijst opslaan, dan moet je van een lijst een string maken dat kan met JSON.stringify()
en JSON.parse()
:
const lijst = ["bananen", "appels"];
localStorage.setItem("boodschappen", JSON.stringify(lijst));
const terug = JSON.parse(localStorage.getItem("boodschappen"));
console.log(terug); // ["bananen", "appels"]
JSON.stringify()
gebruik je om een array om te zetten in een (JSON) string: array -> JSONJSON.parse()
gebruik je om een (JSON) string weer om te zetten in een array: JSON -> array
Waarom moet je JSON gebruiken bij lijsten?
(denk hier eerst zelf over na voordat je hert antwoord open klikt)
Waarom moet je JSON gebruiken bij lijsten?
In localStorage kun je alleen tekst (strings) opslaan. Als je probeert een lijst of object direct op te slaan, krijg je [object Object] of een fout.
Met JSON.stringify() verander je een array in een string die opgeslagen kan worden.
Als je de lijst later weer wilt gebruiken, gebruik je JSON.parse() om hem terug te veranderen naar een echte array.
🛠️ Opdracht – Opslaan wat je invult
- Maak een bestand
dom9.html
. - Maak een invoerveld waar de gebruiker een hobby, taak of naam kan invullen.
- Als de gebruiker iets toevoegt, verschijnt het in een lijst op de pagina.
- De lijst moet bewaard blijven via
localStorage
zodat deze zichtbaar blijft bij herladen. - Bonus: Voeg een knop toe om alles te wissen (via
localStorage.clear()
).
Tips:
- Lees bij het laden van de pagina eerst de gegevens uit
localStorage
. - Update
localStorage
telkens als je iets toevoegt of verwijdert.
🧠 Reflectie
- Wat is het voordeel van
localStorage
? - Waarom moet je JSON gebruiken bij het opslaan van lijsten?
- Wat gebeurt er als je
JSON.stringify()
vergeet bij het opslaan van een array? - Wat zou je nog meer kunnen opslaan in een webapp?
📤 Inleveren
- Lever je bestand
dom9.html
in via Teams of Canvas. - Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in.
- Toon in een screenshot dat je lijst bewaard blijft bij herladen.
3 Gegevens ophalen met fetch()
🎯 Leerdoelen
- Je weet wat
fetch()
doet in JavaScript. - Je kunt externe gegevens ophalen en tonen op een webpagina.
- Je begrijpt hoe je met JSON-data werkt en deze verwerkt met de DOM.
💡 Uitleg
Met fetch()
kun je gegevens ophalen van een externe bron zoals een API. Vaak krijg je dan JSON-data terug: een soort tekstversie van een JavaScript-object of array.
Een API is een soort digitale service waarmee programma's informatie kunnen opvragen of sturen. Denk aan een digitale menukaart: je vraagt iets op, en krijgt data terug.
Type in je browser maar eens deze url in: https://jsonplaceholder.typicode.com/users
Dit kan ook met code, een voorbeeld:
fetch("https://jsonplaceholder.typicode.com/users")
.then(response => response.json())
.then(data => {
console.log(data); // Hier kun je nu iets mee doen
});
Je kunt daarna bijvoorbeeld een lijst maken van namen:
fetch("https://jsonplaceholder.typicode.com/users")
.then(res => res.json())
.then(users => {
users.forEach(user => {
const p = document.createElement("p");
p.textContent = user.name;
document.body.appendChild(p);
});
});
🛠️ Opdracht – Externe gebruikerslijst
- Maak een bestand
dom10.html
. - Haal gegevens op van
https://jsonplaceholder.typicode.com/users
. - Laat van elke gebruiker de naam en e-mailadres zien in de browser.
- Maak van elke gebruiker een eigen <li>.
- Maak de code zo kort en eenvoudig mogelijk, de output kan er dus zo uitzien:
én de HTML code is niet meer dan:
Natuurlijk moet je de list met id=users-lis met JS code vullen door gegevens uit de api te halen.<h1>Externe Gebruikerslijst</h1> <ul id="users-list"></ul>
Extra uitdaging:
- Voeg bij elk item een knop “verwijder” toe waarmee dat item uit de DOM verdwijnt.
🧠 Reflectie
- Wat doet
fetch()
precies? - Wat is een API, en wat kun je ermee?
- Wat zou een risico zijn als je data van andere websites gebruikt?
- Wat gebeurt er als de API niet beschikbaar is of een fout geeft?
📤 Inleveren
- Lever je bestand
dom10.html
in via Teams of Canvas. - Beantwoord de reflectievragen in een .txt of .pdf bestand.
- Lever een screenshot aan waarop de opgehaalde gebruikers zichtbaar zijn in je browser.
4 Lijsten filteren op basis van invoer
🎯 Leerdoelen
- Je weet hoe je gebruikersinvoer gebruikt om iets te filteren.
- Je kunt elementen verbergen of tonen met JavaScript.
- Je past een
input
-event toe om live te reageren.
💡 Uitleg
Je kunt met JavaScript elementen tonen of verbergen op basis van wat de gebruiker intypt.
Voorbeeld – een zoekveld dat een lijst filtert:
<input type="text" id="zoekveld" placeholder="Zoek een dier...">
<ul id="dierenlijst">
<li>Hond</li>
<li>Kat</li>
<li>Papegaai</li>
<li>Vogelbekdier</li>
</ul>
<script>
const zoekveld = document.getElementById("zoekveld");
const items = document.querySelectorAll("#dierenlijst li");
zoekveld.addEventListener("input", function() {
const tekst = zoekveld.value.toLowerCase();
items.forEach(function(item) {
const inhoud = item.textContent.toLowerCase();
if (inhoud.includes(tekst)) {
item.style.display = "list-item";
} else {
item.style.display = "none";
}
});
});
</script>
🛠️ Opdracht – Live filter maken
- Maak een bestand
dom11.html
. - Voeg een lijst toe met minstens 10 items (bijv. landen, games, fruitsoorten).
- Voeg een zoekveld toe boven de lijst.
- Laat de lijst automatisch filteren terwijl je typt.
- Bonus: maak de zoekopdracht hoofdletterongevoelig en toon “Geen resultaten gevonden” als niets matcht.
🧠 Reflectie
- Wat gebeurt er bij het
input
-event? - Hoe kun je ervoor zorgen dat je filter hoofdletterongevoelig is?
- Wat zou je nog kunnen verbeteren aan deze zoekfunctie?
📤 Inleveren
- Lever je bestand
dom11.html
in via Teams of Canvas. - Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in.
5 Formulier validatie en foutmeldingen tonen
🎯 Leerdoelen
- Je weet hoe je controleert of invoervelden correct zijn ingevuld.
- Je kunt foutmeldingen tonen met JavaScript.
- Je gebruikt
if
-statements om beslissingen te maken.
💡 Uitleg
In een echt formulier wil je natuurlijk dat gebruikers wél iets invullen – en liefst ook correct. Met JavaScript kun je dit controleren voordat het formulier wordt verwerkt. Dit heet validatie.
Voorbeeld: naam en e-mailadres verplicht
<form id="mijnForm">
<input type="text" id="naam" placeholder="Naam"><br>
<input type="email" id="email" placeholder="E-mail"><br>
<button type="submit">Verstuur</button>
</form>
<div id="foutmelding" style="color:red;"></div>
<script>
document.getElementById("mijnForm").addEventListener("submit", function(e) {
e.preventDefault();
const naam = document.getElementById("naam").value.trim();
const email = document.getElementById("email").value.trim();
const foutvak = document.getElementById("foutmelding");
if (naam === "" || email === "") {
foutvak.textContent = "Vul zowel je naam als e-mailadres in.";
} else {
foutvak.textContent = "";
alert("Formulier verstuurd!");
}
});
</script>
Wat zie je hier gebeuren?
- Het formulier wordt onderschept met
preventDefault()
. - De waarden worden gecontroleerd op leegte.
- Als iets ontbreekt, verschijnt een foutmelding in het rood.
🛠️ Opdracht – Formulier met foutcontrole
- Maak een bestand
dom13.html
. - Voeg een formulier toe met invoervelden: naam, e-mailadres en een kort bericht.
- Voeg een knop toe met “Verstuur”.
- Controleer met JavaScript of alle velden zijn ingevuld.
- Laat een foutmelding zien als iets ontbreekt (kleur = rood).
- Laat bij succes een melding zien: “Bedankt voor je bericht!”
- Extra: Controleer of het e-mailadres een @ bevat.
- Bonus: Toon fouten onder elk invoerveld apart.
🧠 Reflectie
- Waarom is inputvalidatie belangrijk?
- Waarom zou je inputvalidatie op de front-end (door de browser) willen maken terwijl je het ook op de back-end (met PHP) kan implementeren?
- Wat gebeurt er als je
preventDefault()
vergeet? - Hoe weet je of een e-mailadres geldig is?
- Wat zou je nog meer kunnen controleren behalve leegte?
📤 Inleveren
- Lever je bestand
dom13.html
in via Teams of Canvas. - Beantwoord de reflectievragen in een .txt of .pdf bestand en lever deze ook in.
- Stuur een screenshot mee waarop een foutmelding zichtbaar is.
6 Eindopdracht - Boodschappenlijst
🎯 Leerdoelen
- Je kunt met JavaScript items toevoegen aan een lijst op de pagina.
- Je kunt elk item ook verwijderen met een verwijderknop.
- Je zorgt ervoor dat de lijst bewaard blijft via
localStorage
.
💡 Uitleg
Stel je voor: je staat in de keuken en je denkt: “O ja, ik moet nog melk kopen.” Je opent snel je browser en typt het in een eenvoudige boodschappenlijst. Later op je laptop kun je hetzelfde lijstje nog bekijken. Dat werkt dankzij localStorage
.
In deze opdracht bouw je een boodschappenlijst die je zelf kunt beheren: toevoegen en verwijderen, en alles blijft bewaard in localStorage
.
🛠️ Opdracht – Boodschappenlijst met bewaren en verwijderen
- Maak een bestand
dom12.html
. - Voeg een invoerveld en een knop toe om een boodschap toe te voegen.
- Laat elke boodschap in een lijst onder het formulier verschijnen.
- Voeg bij elk item een 🗑️-knop toe waarmee het verwijderd kan worden.
- Zorg ervoor dat de lijst bij het laden van de pagina terugkomt uit
localStorage
. - Als je iets verwijdert, moet het ook uit
localStorage
verdwijnen. - Vraag om bevestiging bij verwijderen ("Weet je zeker...?").
- Laat het aantal boodschappen zien bovenaan de lijst.
🎁 Real-life toepassing
Deze opdracht lijkt simpel, maar vormt de basis voor veel echte apps: todo-lijsten, favorieten, bestellijsten, of bijvoorbeeld een leeslijst. Grote websites gebruiken exact dit soort technieken om gegevens tijdelijk of permanent op te slaan in je browser!
📌 maak een repsonsive design dat ook op een telefoonscherm) goed werkt. Je kun hier dan heel eenvoudig een mobiele app van maken.
🖥️wil je de data delen tussen je mobiel en je laptop dan moet je die in een database oplsaan en via een API ophalen en updated. Nadat je het volgende blok (databases) heb gedaan kan je deze aanpasasing in deze mobile app maken. |
![]() |
🧠 Reflectie
- Wat gebeurt er als je
localStorage
vergeet bij het verwijderen? - Hoe weet JavaScript welk item je wilt verwijderen?
- Wat zou je nog meer kunnen doen met zo'n lijst?
📤 Inleveren
- Lever je bestand
dom12.html
in.. - Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in.
- Stuur een screenshot mee waarop te zien is dat je lijst werkt en bij het herladen nog bestaat.
🧪 Begripsvragen – JavaScript en DOM
Maakd deze vragen voor jezelf om te controleren of je alles goed hebt begrepen.
1. Wat doet preventDefault()
bij een formulier?
Het voorkomt dat het formulier automatisch wordt verstuurd en de pagina herlaadt. Hierdoor kun je met JavaScript eerst controleren of de invoer klopt of iets anders doen met de data.
2. Wat is het verschil tussen een submit
-event en een click
-event?
submit
wordt geactiveerd wanneer een formulier wordt verstuurd (ook bij Enter). click
is alleen voor het klikken op een specifieke knop. submit
werkt dus voor het hele formulier.
3. Waarom gebruik je JSON.stringify()
bij localStorage?
Omdat localStorage
alleen tekst (strings) kan opslaan. Als je een array of object opslaat zonder stringify, krijg je iets als [object Object]
of een fout.
4. Wat doet JSON.parse()
?
Het zet een opgeslagen JSON-string weer terug om in een JavaScript-array of object. Je gebruikt het bij het laden van data uit localStorage
.
5. Wat doet de fetch()
functie in JavaScript?
Met fetch()
haal je gegevens op van een externe server (API). De data komt meestal als JSON terug, die je dan met .json()
omzet naar bruikbare data.
6. Wat gebeurt er als een API niet beschikbaar is bij fetch()
?
Dan krijg je een fout of lege gegevens terug. Je kunt dit opvangen met .catch()
of try/catch
om de fout netjes af te handelen, bijvoorbeeld met een foutmelding in je UI.
7. Hoe filter je een lijst op basis van invoer?
Je leest de invoer van een input
-veld en vergelijkt dit met de tekst van elk item in de lijst. Als de tekst matcht, toon je het item, anders verberg je het met style.display = "none"
.
8. Hoe verwijder je een item uit een lijst én uit localStorage
?
Je verwijdert het item uit de array in je JavaScript-code (bijv. met splice()
) en daarna schrijf je de nieuwe lijst terug naar localStorage
met setItem()
.
9. Waarom is inputvalidatie belangrijk bij een formulier?
Om te voorkomen dat gebruikers lege of onjuiste gegevens versturen. Dat zorgt voor betere data, minder fouten en een betere gebruikerservaring.
10. Hoe kun je controleren of een e-mailadres geldig is?
Een simpele manier is te controleren of het een @
bevat. Voor geavanceerdere controles kun je reguliere expressies gebruiken, maar dat is voor later.
🧠 Reflectie
- Welke vraag mis jij in deze lijst (en is wel onderdeel van deze module).
📤 Inleveren
- Beantwoord de reflectievraag in een .txt bestand
Java Script Challenge
DOM Challenge – Bouw jouw eigen mini-app
🎯 Leerdoelen
- Je past alle basisvaardigheden toe rondom DOM-manipulatie.
- Je maakt een interactieve webapp met HTML, CSS en JavaScript.
- Je leert werken met gebruikersinvoer, events en eventueel localStorage.
- Je leert een eenvoudige planning te maken voor je project.
- Je leert AI bewust inzetten en daarover verantwoording afleggen.
💡 Uitleg
In deze les ontwerp je zelf een interactieve DOM-app. Je past de technieken toe uit de vorige lessen. Kies één van de volgende apps, of verzin een eigen variant.
Mogelijke projecten:
- Todo-lijst: gebruiker voert een taak in, kan deze toevoegen, afvinken (class toggle), en verwijderen (event.target.remove()).
- Quiz: gebruiker kiest een antwoord en krijgt direct feedback.
- Poll/stemming: klik op een optie, zie het aantal stemmen stijgen.
- Chatbox: gebruikersberichtjes invoeren die onder elkaar verschijnen.
- Boekenkast: boeken toevoegen, afvinken als gelezen, verwijderen, zoeken én opslaan in localStorage.
✅ Eisen
Let op: Bij elk project gebruik je minimaal deze onderdelen:
- Een of meer invoervelden + knoppen
- Een lijst of reeks elementen die via JavaScript groeit
- Een invoerveld met een search functie waarbij als je die gebnuikt alleen de gezochte items worden getoond.
- Na een search moet je ook weer terug gaan en alle elementen kunnen laten zien.
- Event-handling (bijv. click, submit)
- Bij een delete van een item, vraag je om eerst om bevesting: "Weet je zeker dat je item 'voorbeel' wilt verijdern?"
- Je maakt tenminste gebruik van
querySelector
,addEventListener
, eninnerHTML,
classList.toggle()
enremove()
Bij het project Boekenkast moet je daarnaast ook werken met localStorage
.
💡 Optioneel
- Als je alles in één pagina maakt, dan kan je er eventueel vrij eenvoudig een app voor je telefoon van maken.
🛠️ Opdracht – Kies en bouw jouw mini-app
- Maak een bestand met een duidelijke naam, bijv.
dom-project.html
. - Kies welk DOM-project je maakt (zie hierboven).
- Maak een planning van je project in een tabel (zie voorbeeld hieronder).
- Werk stap voor stap: begin met HTML, voeg daarna JavaScript toe.
- Gebruik technieken uit eerdere lessen (DOM)
- Stijl je pagina met CSS zodat deze overzichtelijk en prettig in gebruik is.
📋 Voorbeeld planning
| Onderdeel | Tijd | Status |
|---------------------------|------|--------|
| HTML structuur | 20m | |
| JS: items toevoegen | 30m | |
| JS: verwijderen/afvinken | 20m | |
| Styling | 15m | |
| Reflectie schrijven | 15m | |
| ......
| ....
🧠 Reflectie
- Wat vond je het makkelijkst en het moeilijkst?
- Welke technieken heb je toegepast? Noem er minstens drie.
- Waar heb je AI voor gebruikt?
- Wat zou je in de toekomst nog willen verbeteren of leren?
📤 Inleveren
- Lever je
dom-project.html
in, samen met je CSS-bestand (indien apart). - Lever je planning in als .txt of .pdf.
- Lever je reflectie in als .txt of .pdf.
- Lever je AI-logboek in: geef aan welke prompts je gebruikte, wat je codeerde met hulp van AI, en wat je zelf schreef of aanpaste.
- Eventueel: voeg screenshots toe van je werkende webapp als je trots bent op het resultaat!
- Je laat het resultaat aan de docent zien en je kan de code uitleggen.
Kennis Check Blok 5
Check je kennis
Heb je deze vragen doorgenomen?
🛠️ Opdracht
Maak de kennis-check.
📤 Inleveren
Aan het einde van de kennis-check ontvang je een certificaat. Maak een schermafdruk en lever deze in.
Blok 6 - Databases / PDO
Database 1
1 Wat is een database?
🎯 Leerdoelen
- Je weet wat een database is en waarvoor die gebruikt wordt.
- Je kunt gegevens uit de echte wereld omzetten naar tabellen en kolommen.
- Je begrijpt het verschil tussen ruwe gegevens en een gestructureerd model.
💡 Uitleg
In het dagelijks leven slaan organisaties gegevens op: over klanten, producten, studenten, boeken, etc. Een database is een digitale plek waar zulke gegevens netjes georganiseerd worden bewaard. Je verdeelt de informatie over verschillende tabellen, waarbij elke tabel over één onderwerp gaat, zoals:
- Studenten: naam, klas, geboortedatum
- Docenten: naam, vak, afdeling
- Opleidingen: naam, niveau, duur
Een database lijkt een beetje op een Excel-bestand, maar is veel krachtiger en beter gestructureerd. Je wilt geen dubbele gegevens en alles moet logisch met elkaar verbonden zijn.
Voorbeeld: Dit is géén goede database:
Naam | Klas | Opleiding
------------ | ------------ | -----------------
Fatima | SD1A | Software Developer
Ali | SD1A | Software Developer
Robin | SD2B | Software Developer
Jente | SD1A | Software Developer
Steven | SD1A | Recht & HR
→ Hier zie je dat de opleiding meerdere keren herhaald wordt. Dat is zonde en foutgevoelig.
🔧 Wat zou beter zijn?
Je zou in plaats daarvan een aparte tabel 'Studenten' maken en een aparte tabel 'Opleidingen'. Studenten krijgen dan een verwijzing naar hun opleiding (dat komt in de volgende lessen aan bod).
🛠️ Opdracht 1 – Gegevens analyseren
- Bekijk onderstaande lijst met gegevens:
Naam: Esra
Klas: SD1A
Opleiding: Software Developer
Docent: De Jong
Vak: Webontwikkeling
Lesdag: Woensdag
- Welke verschillende onderwerpen zie je hierin? Probeer per onderwerp de eigenschappen op te schrijven.
- Student: naam, klas
- ... (jij vult aan)
- Zet je antwoorden in een tabelvorm: welke tabellen zou je nodig hebben? Welke kolommen zouden erin staan?
🧠 Reflectie
- Waarom is het vastleggen van gegevens op meerdere plaatsen foutgevoelig? Beschrijf een situatie waarin dat fout kan gaan.
- Waarom is het niet handig om alle informatie in één grote tabel te zetten?
- Wat denk je dat het voordeel is van losse tabellen met verbindingen?
📤 Inleveren
- Lever je tabellenindeling in (.txt, .pdf of screenshot).
- Voeg je antwoorden toe op de reflectievragen.
2 Entiteiten en Attributen
🎯 Leerdoelen
- Je weet wat een entiteit is en wat een attribuut is.
- Je kunt entiteiten en hun attributen herkennen in een realistisch scenario.
- Je kunt een eerste versie van een ERD tekenen met entiteiten en attributen.
💡 Uitleg
📦 Entiteit
In de vorige opdracht heb je 'onderwerpen' en 'eigenschappen' bepaald, weet je het nog? Een onderwerp was 'student' en een eigenschap was 'naam' en 'klas'.
Bij het ontwerpen van een database heet een onderwerp een 'entiteit', en een eigenschap is een 'attribuut'
Een entiteit is een "ding", "persoon" of "gebeurtenis" in de echte wereld waarover je gegevens wilt opslaan.
Bijvoorbeeld:
Student
-> persoonCursus
-> gebeurtenisDocent
-> persoonOpleiding
-> gebeurtenisLaptop
-> ding
🔖 Attribuut
Een attribuut is een eigenschap van een entiteit. Bijvoorbeeld:
- De entiteit
Student
heeft de attributen:studentnummer
voornaam
,achternaam
,telefoonnummer
. - De entiteit
Cursus
heeft de attributen:naam
,duur
,startdatum
.
🧩 ERD
Een entiteit met de attributen zet je in een bepaald formaat in een database ontwerp. Dat heet een ERD.
Op de eerste regel staat de naam van de entiteit en in de middelste kolom zet je alle attributen.
Voorbeeld:
👉 In een ERD (Entity Relationship Diagram) teken je entiteiten als rechthoeken en attributen als ovale of gelabelde velden ernaast.
In een ERD heb je drie kolommen
de eerste voor de keys, de tweede voor de attribuutnamen en de derde voor de datatypes.
🛠️ Opdracht 1 – Entiteiten en attributen
- Je werkt voor een evenementenbureau. Zij willen bijhouden:
- Welke klanten boekingen doen
- Welke evenementen er zijn
- Welke locaties beschikbaar zijn
- Maak een lijstje van minstens 3 entiteiten uit deze situatie. Bijvoorbeeld:
Klant
- ...
- ...
- Geef per entiteit minstens 3 bijpassende attributen. Bijv.:
- Klant → voornaam, e-mailadres, ...
- Locatie → naam, .....
- Teken jouw eerste ERD in Lucidchart.
Lucichart
Registreer je voor Lucichart en maak een gratis account.
Kies toevoegen library
Zoek naar ERD en selecteer "Entity Relationship"
Gebruik vervolgens dit figuur om een entiteit te maken.
🧠 Reflectie
- Hoe weet je of iets een entiteit was of gewoon een attribuut?
- Heb je misschien dingen dubbel in verschillende entiteiten? Kun je iets beter loskoppelen?
📤 Inleveren
- Maak je ERD in Lucichart en maak een screenshot.
3 Primary Keys
🎯 Leerdoelen
- Je weet wat een primary key is.
- Je begrijpt waarom een primary key verplicht is in elke tabel.
- Je kunt per entiteit een geschikte primary key kiezen.
💡 Uitleg
🔑 Wat is een Primary Key (PK)?
Een primary key is een uniek gegeven waarmee je één rij uit een tabel kunt identificeren. Elke tabel in een database moet een primary key hebben.
Regel: Elke entiteit heeft precies één PK. Heb je meerdere opties? Kies er één. Heb je geen goede kandidaat? Gebruik dan een kunstmatige sleutel, zoals een id
.
Voorbeelden:
Student
→student_nr
Auto
->kenteken
Evenement
→evenement_id
Klant
→ email_adres
Een primary key moet:
- Uniek zijn
- Nooit leeg zijn
- Vast blijven (mag niet wijzigen)
Als je later tabellen met elkaar verbindt, gebruik je de PK om een verbinding te maken van de ene entiteit naar de andere entiteit.
🧩 Voorbeeld van een ERD met PK
🛠️ Opdracht 1 – Kies je primary keys
- Gebruik het ERD van de vorige opdracht met de entiteiten:
evenement
,klant
enlocatie
. - Voeg aan elke entiteit een geschikte primary key toe. Kies daarbij een bestaand aatribuut of voeg zelf een sleutel toe.
- Zet in de eerste kolom van je ERD de letters PK om aan te geven dat deze regel de PK bevat.
- Controleer: is jouw PK echt uniek en onveranderlijk?
🧠 Reflectie
- Welke van je gekozen PK’s is natuurlijk (bestaand gegeven), en welke kunstmatig (gegenereerd ID)?
- Wat zou er misgaan als je geen PK kiest?
📤 Inleveren
- Lever een screenshot van je ERD in met in de eerste kolom de PK's (primary keys).
4 1:N-relaties en Foreign Keys
🎯 Leerdoelen
- Je weet wat een 1:N-relatie is in een database.
- Je begrijpt wat een foreign key (FK) is en waarvoor die dient.
- Je kunt zelf een 1:N-relatie modelleren met een foreign key.
💡 Uitleg
🔗 Wat is een 1:N-relatie?
Bij een één-op-veel-relatie (1:N) hoort bij één rij in de ene tabel, meerdere rijen in de andere tabel.
Bijvoorbeeld:
1 Klant
→veel Boeking(en)
1 Docent
→veel Cursussen
De “meer”-kant krijgt de foreign key (FK). De FK is een kopie van de primary key (PK) van de andere tabel.
📏 De regel: Meer = harkje = FK
- Teken het harkje aan de kant waar “veel” is
- In die tabel voeg je de foreign key toe
- Voorbeeld:
boekingen
krijgtklant_id
als FK
🧩 Voorbeeld
Een klant kan veel boekingen hebben (andersom kan niet!). Dus het harkje komt aan de kant van de boeking.
Bij elk harkje hoort een FK die verwijst naar de PK van de entiteit waarmee die is gekoppeld. In dit geval dus klantnummer.
👉 Het klantnummer
in boeking is een foreign key die verwijst naar klant.
🛠️ Opdracht 1 – Relaties en foreign keys
- Gebruik het ERD van de vorige opdracht met de entiteiten:
evenement
,klant
enlocatie
. - Bepaal de veel kant van klant en evenement (evenement zou een concert kunnen zijn).
- Bepaal de veel kant van evenement en locatie
- Teken de entiteiten en de relaties. Zet de harkjes aan de juiste kant.
- Voeg foreign keys toe (FK's) en plaats in de eerste kolom een FK bij elke Foreign key.
📤 Inleveren
- Lever je een screenshot van de ERD's inclusief foreign keys en erelaties in.
5 Datatypes en Validatie
🎯 Leerdoelen
- Je kent de meest gebruikte datatypes in een database.
- Je kunt passende datatypes kiezen voor attributen in je ERD.
- Je weet waarom validatie belangrijk is bij het kiezen van datatypes.
💡 Uitleg
📦 Wat is een datatype?
Een datatype bepaalt welk soort informatie je in een kolom/tabel opslaat. Het zorgt ervoor dat je database weet hoe de data eruitziet en wat ermee mag gebeuren.
Niet alle data-typen zijn even snel als je ze in een database gebruikt. Als je één van de volgende veelgebruikte datatypes gebruikt dan zit je meestal goed. Wil je andere gebruiken zoek dan goed uit wat de nadelen zijn.
📚 Veelgebruikte datatypes:
Datatype | Gebruik | Voorbeeld |
---|---|---|
INT |
Voor hele getallen (bijv. ID’s, aantallen) | 5 , 142 |
VARCHAR(50) |
Voor tekst tot X karakters | 'Jan' , 'email@example.com' |
DATE |
Voor datums zonder tijd | '2025-06-06' |
DATETIME |
Voor datum én tijd | '2025-06-06 14:30:00' |
DECIMAL(6,2) |
Voor getallen met komma (bijv. prijs) | 12.99 , 9999.00 |
🧩 Voorbeeld
🎯 Tips voor goede keuzes:
- Let op lengte bij
VARCHAR
: hoe langer, hoe trager, maar te kort is ook niet goed. - Een telefoonnummer is een
VARCHAR()
en geenINT
, waarom? - Stel je wil een bedrag van maximaal 9999,99 opslaan dan gebruik je float(6,2).
🛠️ Opdracht 1 – Pas je datatypes aan
- Gebruik het ERD van de vorige opdracht met de entiteiten:
evenement
,klant
enlocatie
. - Voeg de volgende attributen toe:
- evenement -> toegangsprijs, aanvangt datum en tijd
- evenement -> toegangsprijs, aanvangt datum en tijd
- Kies voor elk attribuut een passend datatype uit de tabel hierboven.
- Schrijf de datatypes in de derde kolom van de ERD's..
- Gebruik minimaal 3 verschillende soorten datatypes; je mag er zelf attributen bij bedenken.
📤 Inleveren
- Lever je bijgewerkte ERD in met daarin duidelijk per attribuut het datatype genoteerd en de FK.
6 Case – Modelleer een realistisch scenario
🎯 Leerdoelen
- Je kunt zelfstandig entiteiten en relaties herkennen in een realistisch scenario.
- Je past de 5 stappen toe om een ERD te maken.
- Je maakt een logisch en technisch correct ERD met PK’s, FK’s en datatypes.
Herhaling, de 5 basisregels
- Een entiteit is een persoon, ding of gebeurtenis. Een getal of bedrag (bijvoorbeeld gewicht) is nooit een entiteit, maar altijd een attribuut (=eigenschap) van een entiteit.
- Elke entiteit heeft precies één PK (primary key). De primary key maakt de entiteit uniek (bijvoorbeeld kenteken van een auto).
- Entiteiten hebben de volgende relaties 1:1, 1:N, N:1 of N:M.
- 1:1 relaties bestaan bijna niet, als ze voorkomen dan kun je de relaties samenvoegen.
- 1:N en N:1 is eigenlijk hetzelfde en komen het meest voor.
- Een 1:N relatie verbind je met een lijntje met een 'harkje'. Het lijntje staat aan de 1-kant en het 'harkje' staat aan de meer-kant.
- Bij elk 'harkje' hoort precies één FK. De FK verwijst naar de PK van de table waarmee deze is verbonden.
💡 Uitleg
Tot nu toe heb je geleerd wat entiteiten, attributen, PK’s, FK’s, datatypes en 1:N-relaties zijn. Nu pas je alles toe op een echte situatie.
📘 Scenario: Fietsenmaker Snelle Jelle
Fietsenmaker Snelle Jelle wil na een reparatiebeurt zijn klanten per SMS of Whatspapp op de hoogte stellen dat de reparatie klaar is. In dit bericht wil hij ook vertellen hoe hoog de reparatiekosten zijn.
Omdat de veel klanten meer dan één fiets hebben, wil hij van de fietsen ook wat kenmerken vastleggen. Hij wil het merk, model, type en kleur kunnen vastleggen.
Van elke reparatiebeurt wil hij verder vastleggen wanneer het onderhoud plaatsvond, hoe lang de reparatie duurde, wat er is uitgevoerd en de prijs.
📋 Je hebt de volgende entiteiten
- reparatie: ....
- klant: ....
- fiets: ....
🛠️ Opdracht – Maak het ERD
- Bepaal per entiteit eerst alle attributen, lees daarvoor goed het scenario door!
- Teken de drie entiteiten in Lucichart
- Zet alle attributen in de entiteiten
- Bepaal de Primary Key (PK).
- Bepaal de data-types.
- Bedenk wat de relaties zijn en teken die met het hartje aan de goede kant.
- Bepaal de Foreign Key (FK)
📤 Inleveren
- Lever een screenshot in van je ERD gemaakt in Lucichart. Zorg dat alles goed leesbaar is.
7 Meerdere relaties en N:N
🎯 Leerdoelen
- Je begrijpt wat een N:N-relatie is en wanneer die voorkomt.
- Je kunt een N:N-relatie correct omzetten naar aparte tabellen met FK’s.
- Je kunt meerdere relaties per entiteit modelleren in een ERD.
💡 Uitleg
🔁 Wat is een N:N-relatie?
Een veel-op-veel (N:N) relatie komt voor wanneer meerdere records uit entiteit A gekoppeld kunnen zijn aan meerdere records uit entiteit B.
Voorbeeld: Studenten kunnen zich inschrijven voor meerdere vakken. Elk vak kan meerdere studenten hebben.
📐 Hoe modelleer je dit?
Je maakt een extra tabel tussen de twee entiteiten. Deze bevat alleen de foreign keys van beide kanten.
De tussentabel (ook koppeltabel genoemd) bevat meestal ook extra informatie, zoals de inschrijfdatum of het cijfer. Deze extra informatie gaat over de combinatie student-vak. Een student heeft geen cijfer, een vak heeft geen cijfer, maar de combinatie student-vak heeft wel een cijfer.
📌 Meerdere relaties op één entiteit?
Soms is een entiteit aan meerdere andere entiteiten verbonden.
Voorbeeld: Een medewerker werkt in een afdeling, maar ook aan meerdere projecten.
- 1 medewerker ↔ 1 afdeling → 1:N
- 1 medewerker ↔ meerdere projecten ↔ N:N
Gebruik verschillende relaties als het logisch is dat een entiteit meerdere rollen vervult.
🛠️ Opdracht – N:N-model
- Maak een ERD voor dit scenario:
Een muziekschool organiseert lessen. Leerlingen kunnen zich inschrijven op meerdere lessen. Elke les wordt gevolgd door meerdere leerlingen. - Bedenk zelf voor elke entiteit minimaal 4 attributen.
- Modelleer de juiste entiteiten, attributen, PK’s, FK’s en datatypes.
- Voeg een tussentabel toe om de N:N-relatie correct te verwerken.
🧠 Reflectie
- Waarom is een tussentabel nodig bij N:N?
- Welke extra informatie kun je in de tussentabel kwijt?
- Waar moet je op letten bij het toevoegen van meerdere relaties in je ERD?
📤 Inleveren
- Lever een screenshot in van je ERD gemaakt in Lucichart. Zorg dat alles goed leesbaar is.
- Beantwoord de reflectievragen (pdf of txt bestand)
8 Bibliotheek
📘 Scenario: Bibliotheek
In een bibliotheek wil men bijhouden welke klanten welk boek van welke periode tot periode hebben geleend.
Elke klant kan meerdere boeken gelijktijdig lenen. Verder wil men de klant een whatsapp kunnen sturen twee dagen voor het verstrijken van de inleverdatum.
- Maak een databaseontwerp (ERD).
📤 Inleveren
- Lever een screenshot in van je ERD gemaakt in Lucichart. Zorg dat alles goed leesbaar is.
--
SQL
1 Introductie phpMyAdmin en SELECT
🎯 Leerdoelen
- Je weet hoe je XAMPP en phpMyAdmin gebruikt.
- Je kunt een database importeren.
- Je weet wat SQL is.
- Je kunt gegevens ophalen met
SELECT
enFROM
.
💡 Uitleg
In deze eerste opdracht werk je met een database met informatie over films. Je gebruikt de SELECT
-instructie om gegevens op te halen uit de tabel movies
.
Je voert verschillende queries uit om de inhoud van de tabel te verkennen.
Wat is SQL precies?
SQL staat voor Structured Query Language. Het is een programmeertaal die speciaal is ontworpen om te "praten" met databases. Een database is eigenlijk gewoon een heel goed georganiseerde verzameling van gegevens. Denk bijvoorbeeld aan de databases van:
- Instagram: met alle gebruikers, foto's, likes en reacties.
- Fortnite: met alle spelers, hun skins, V-Bucks en statistieken.
- Een webshop: met alle producten, prijzen en voorraad.
Met SQL kun je deze databases vragen stellen (queries) of opdrachten geven.
🎬Video - SQL introductie
https://www.youtube.com/watch?v=zpnHsWOy0RY
Wat heb je nodig?
- XAMPP (Apache en MySQL moeten aan staan)
- De database
mdb_movies.sqlsql
XAMPP en phpMyAdmin
We gaan gebruik maken van phpMyAdmin.
phpMyAdmin is eenonderdeel van XAMPP en wordt veel gebruikt om met datbases te werken. Je kan databases aanmaken, verwijderen, aanpassen en inzien.
Je kunt phpMyAdmin pas opstarten als je XAMPP goed draait; Apache en mySQL staan aan.
Start localhost/phpmyadmin
Stappen om de database te importeren:
- Start Apache en MySQL via het XAMPP Control Panel.
- Ga naar
http://localhost/phpmyadmin
in je browser. - Maak een nieuwe database aan met de naam
imdb_movies
. - Selecteer de database en gebruik het tabblad Import om het bestand
imdb_movies.sql
te importeren.
Kom je er niet uit: hier staat met plaatjes uitgelegd hoe je een database importeert.
🛠️ Opdracht
- Je hebt de database imdb_movies.sql geimporteerd
- Voer de volgende drie SQL-query’s uit op de tabel
movies
:SELECT * FROM movies;
SELECT title FROM movies;
SELECT title, rating FROM movies;
Heb je meer uitleg nodig over hoe je query maakt, hier staat een voorbeeld met plaatjes)
- Bekijk het resultaat van elke query. Wat valt je op?
🧠 Reflectie
- Welke kolommen lijken jou het nuttigst als je een lijst met filmaanbevelingen zou maken?
- Wat is het verschil tussen
SELECT *
enSELECT kolomnaam
?
📤 Inleveren
- Maak een screenshot waarbij je laat zien dat je een query hebt uitgevoerd op de database imdb_movies.
- Beantwoord de refelctievragen en lever die in (txt of pdf).
2 WHERE en logica
🎯 Leerdoelen
- Je kunt gegevens filteren met
WHERE
. - Je begrijpt het gebruik van logische operatoren zoals
=
,>
,<
,AND
, enOR
. - Je kunt AI gebruiken om een query te genereren en deze zelf controleren en verbeteren.
💡 Uitleg
Met SELECT
haal je gegevens op. Met WHERE
kun je die gegevens filteren. Bijvoorbeeld: alleen landen met een hoge geluksindex, of alleen landen uit Europa.
We gebruiken de database mod-mysql-basic-worldhappiness.sql. Deze bevat o.a. tabellen jaar2015
en jaar2016
met kolommen als country
, region
, rank
en score
.
Voorbeelden:
SELECT * FROM jaar2016 WHERE score > 7000;
SELECT country, region FROM jaar2015 WHERE region = "Western Europe";
SELECT country, score FROM jaar2016 WHERE region = "Western Europe" AND score > 7300;
🛠️ Opdracht
- Importeer de database mod-mysql-basic-worldhappiness.sql in phpMyAdmin en selecteer de database
worldhappiness
. - Voer de volgende query's uit en controleer het resultaat:
- Selecteer alle landen uit de tabel
jaar2015
. - Selecteer alleen
country
enscore
uitjaar2016
. - Selecteer alle regio's uit 2015.
- Selecteer alle scores hoger dan 7200 in 2016.
- Selecteer landen uit de regio "Western Europe" in 2015.
- Selecteer alle landen uit de tabel
- Gebruik ChatGPT om een extra query te genereren waarbij je gebruik maakt van
OR
.
🧠 Reflectie
- Welke query vond je het lastigst en waarom?
- Welke filters heb je gebruikt? Noem minstens twee logische operatoren.
- Wat heeft AI (ChatGPT) goed gedaan, en wat moest je zelf aanpassen?
📤 Inleveren
- Lever de zelf gemaakte query (opdrachtstap 3) in en leg uit in eigen woorden hoe die werkt.
3 Aggregatiefuncties
🎯 Leerdoelen
- Je kunt gebruik maken van SQL-functies zoals
COUNT()
,AVG()
,SUM()
,MIN()
enMAX()
. - Je kunt kolommen hernoemen met
AS
(alias). - Je begrijpt het verschil tussen
SELECT
van rijen en het samenvatten van gegevens.
💡 Uitleg
Aggregatiefuncties worden gebruikt om samenvattingen te maken van gegevens in een kolom. Ze voeren een berekening uit op meerdere rijen tegelijk in plaats van één rij.
Belangrijkste functies:
Functie | Doel | Voorbeeld |
---|---|---|
COUNT() |
Telt hoeveel rijen er zijn | SELECT COUNT(*) FROM players; |
AVG() |
Geeft het gemiddelde van een kolom met getallen | SELECT AVG(wage) FROM players; |
SUM() |
Telt alle waarden in een kolom bij elkaar op | SELECT SUM(value) FROM players; |
MIN() |
Laat de kleinste waarde zien | SELECT MIN(age) FROM players; |
MAX() |
Laat de grootste waarde zien | SELECT MAX(value) FROM players; |
Alias gebruiken met AS
Je kunt je resultaatkolom een duidelijke naam geven met het sleutelwoord AS
.
SELECT AVG(wage) AS gemiddeld_loon FROM players;
Bonus: afronden met ROUND()
SELECT ROUND(AVG(wage)) AS gemiddeld_loon_afgerond FROM players;
🛠️ Opdracht
Gebruik de database mod-mysql-basic-fifa2018.sql
- Voer de volgende queries uit in phpMyAdmin:
- Toon het gemiddelde loon van alle spelers bij Ajax.
- Toon de totale waarde van spelers onder de 20 jaar.
- Toon het hoogste loon van een speler bij FC Utrecht.
- Toon het aantal spelers uit Nederland.
- Toon het gemiddelde loon van alle Braziliaanse spelers, afgerond op hele euro's.
- Gebruik bij elke query een duidelijke alias via
AS
.
🧠 Reflectie
- Wat is het voordeel van een samenvattende query (zoals
AVG()
) in plaats van het handmatig bekijken van individuele rijen? - Welke query vond je het lastigst en waarom?
📤 Inleveren
- Lever een .txt-bestand in met alle 5 query’s.
Vergeer de aliasen niet!
4 DELETE en veiligheid
🎯 Leerdoelen
- Je begrijpt het doel van een
DELETE
-statement. - Je kunt een
DELETE
-statement schrijven met eenWHERE
-clausule. - Je weet waarom een
WHERE
-clausule cruciaal is bij verwijderen van gegevens.
💡 Uitleg
Met SQL kun je niet alleen gegevens opvragen, maar ook verwijderen. Dat doe je met het DELETE
-statement. Hierbij is het essentieel dat je altijd een WHERE
-clausule gebruikt. Als je dat niet doet, verwijder je álle rijen in de tabel!
Voorbeeld:
DELETE FROM players WHERE name = "K. Huntelaar";
Deze query verwijdert alleen de speler met die naam.
Fout voorbeeld (NIET DOEN!):
DELETE FROM players;
Deze query verwijdert alle spelers uit de tabel. Dit is onherstelbaar.
🛠️ Opdracht
Gebruik de database mod-mysql-basic-fifa2018.sql (zoals in de vorige opdracht).
- Voer de volgende opdrachten uit met een
DELETE
-statement:- Verwijder de speler "David Silva".
- Verwijder alle spelers van de club "Willem II".
- Verwijder alle Braziliaanse spelers die ouder zijn dan 34.
- Verwijder alle spelers waarvan het loon (=wage) hoger is dan 200000.
- Gebruik daarna de volgende query om te controleren hoeveel spelers er nog zijn:
SELECT COUNT(*) FROM players;
Het antwoord dat hier uit moet komen als je alles goed hebt gedaan is 533
TIP: maak eerst een select en als je de juiste resultaten terug krijgt vervang dan de select * in delete
Mocht het niet goed gaan dan kun je de database altijd opnieuw importeren en opnieuw beginnen.
🧠 Reflectie
- Wat had er fout kunnen gaan als je de
WHERE
-clausule was vergeten? - Waarom is het handig om altijd eerst een
SELECT
met dezelfdeWHERE
-clausule te doen voordat jeDELETE
uitvoert?
📤 Inleveren
- Voeg een screenshot toe van de output van je
SELECT COUNT(*)
-query. - antwoord op de reflectievragen (txt of pdf)
5 Introductie tot JOINs
🎯 Leerdoelen
- Je begrijpt het nut van tabellen koppelen met een
JOIN
. - Je weet wat een
PRIMARY KEY
enFOREIGN KEY
zijn. - Je kunt een eenvoudige
INNER JOIN
uitvoeren.
💡 Uitleg
In een echte database worden gegevens vaak verdeeld over meerdere tabellen. Je gebruikt een JOIN om die tabellen aan elkaar te koppelen. Zo kun je bijvoorbeeld zien in welke klas een student zit en wie zijn studieloopbaanbegeleider is.
Wat is een JOIN
?
Een JOIN combineert rijen uit twee tabellen op basis van een kolom die ze gemeenschappelijk hebben. Dit is vaak een id-veld zoals klas_id
.
Voorbeeld:
Stel: we hebben twee tabellen:
studenten
+----+----------+-----------+----------+
| id | voornaam | achternaam| klas_id |
+----+----------+-----------+----------+
| 1 | Fatima | Bakker | 101 |
| 2 | Noah | de Vries | 101 |
| 3 | Aziz | Bouali | 102 |
klassen
+------+----------+------------------+
| id | klas_naam| studie_coach |
+------+----------+------------------+
| 101 | SD1A | meneer Willems |
| 102 | SD1B | mevrouw Jansen |
Vraag: "wie is de studiecoach van Fatima?" Antwoord: "Meneer Willems". Klopt dat? |
Met een JOIN kun je voor elke student zien in welke klas hij/zij zit én wie zijn of haar studiecoach is:
SELECT studenten.voornaam, studenten.achternaam, klassen.klas_naam, klassen.studie_coach
FROM studenten
INNER JOIN klassen ON studenten.klas_id = klassen.id;
De tabel studenten wordt verbonden met klassen waarbij de primary key (id) van klassen wordt verbonden met de foreign key (klas_id) van studenten
🛠️ Opdracht
Maak een nieuwe database aan
- Open phpMyAdmin en maak een database aan met de naam
join_oefening
.
Maak deze twee tabellen aan
Maak een database en voer importeer deze database
CREATE TABLE studenten (
id INT AUTO_INCREMENT PRIMARY KEY,
voornaam VARCHAR(50),
achternaam VARCHAR(50),
klas_id INT
);
CREATE TABLE klassen (
id INT AUTO_INCREMENT PRIMARY KEY,
klas_naam VARCHAR(50),
aantal_leerlingen INT,
studie_coach VARCHAR(100)
);
INSERT INTO klassen (klas_naam, aantal_leerlingen, studie_coach) VALUES
('SD1A', 24, 'meneer Willems'),
('SD1B', 22, 'mevrouw Jansen'),
('SD1C', 25, 'meneer El Idrissi');
INSERT INTO studenten (voornaam, achternaam, klas_id) VALUES
('Fatima', 'Bakker', 1),
('Noah', 'de Vries', 1),
('Aziz', 'Bouali', 2),
('Eva', 'Peeters', 2),
('Liam', 'Meijer', 1),
('Sophie', 'van der Laan', 2),
('Daan', 'Mulder', 3),
('Aisha', 'Khan', 3),
('Javi','Alvarez',4);
Schrijf een JOIN-query
- Voer deze query uit:
SELECT studenten.voornaam, studenten.achternaam, klassen.klas_naam, klassen.studie_coach FROM studenten INNER JOIN klassen ON studenten.klas_id = klassen.id;
- Pas de query aan zodat je alleen studenten uit klas
SD1A
toont.
AI - ChatGPT
Als we alle studenten laten zien, dan zien we 8 studenten. In de database staan 9 studenten en als we goed kijken dan wordt (de laatste) student "Javi Alvarez" niet getoond. Hoe komt dat?
- Vraag aan ChatGPT hoe dit zit (tip: het heeft met de soort join te maken)
- Vraag aan ChatGPT om een JOIN-query te schrijven die alle studenten toont, dus ook Javi Alvarez
- Test of de AI-query werkt. Verbeter hem indien nodig.
🧠 Reflectie
- Leg uit waarom Javi Alvarez eerst niet werd getoond
- Wat heb je gedaag om Javi Alvarez wel te tonen, leg uit.
- Beschrijf het verschil tussen de twee soorten joins die je hebt gebruikt.
📤 Inleveren
- Lever je reflectie in als .txt of .pdf, beschrijf hierin goed wat je hebt gedaan en beantwoord de refelctievragen in eigen woorden.
- Lever de Chat geschiedenis in: wat heb je precies gevraagd en wat was het antwoord (txt of pdf bestand).
6 AI en eigen query’s
🎯 Leerdoelen
- Je kunt zelfstandig SQL-vragen formuleren en uitvoeren.
- Je kunt AI gebruiken om een query te genereren, verbeteren en controleren.
- Je begrijpt hoe je informatie uit meerdere tabellen combineert.
💡 Uitleg
De database die we in deze opdracht gaat gebruiken heeft twee tabellen:
student
– bevat gegevens van studenten (zoals naam en inschrijfdatum)progress
– bevat studieresultaten gekoppeld aan studenten
Verzin zelf een logische naam voro deze database en maak een lege database aan.
Importeer daarna de data met dit bestand: student-progress.sql
De tabellen zijn gekoppeld via student_id
. Je kunt ze combineren met een JOIN
.
Voorbeeld JOIN:
SELECT student.first_name, student.last_name, progress.subject_name, progress.grade_percentage
FROM student
JOIN progress ON student.student_id = progress.student_id;
🛠️ Opdracht A
Gebruik AI / ChatGPT
- Toon alle studenten met hun volledige naam en inschrijfdatum.
- Toon alle vakken (
subject_name
) en behaalde percentages (grade_percentage
) van student met voornaam "Fatima". - Toon per van start_jaar 2024 het hoogste cijfer dat is behaald voor C++. Gebruik
MAX()
- Toon alle studenten die in blok "276c8c" zitten én een cijfer boven de 90% hebben behaald.
(er zouden 7 studenten moeten worden getoond)
🤖 AI-opdracht B
Laat ChatGPT een query voor je schrijven die de volgende vraag beantwoordt (of verzin zelf een goede vraag):
- Welk vak heeft gemiddeld over alle jaren de hoogste score?
Test de gegenereerde query in phpMyAdmin. Als de query niet werkt, probeer dan samen met ChatGPT te achterhalen wat er fout gaat. Corrigeer en leg uit wat je hebt aangepast.
🤖 AI-opdracht C
Kan je samen met AI de volgende output maken. In deze tabel staan per jaar de gemiddelden per vak en in de laatste kolom staat het gemiddelde over alle jaren.
🧠 Reflectie
- Welke query vond je het moeilijkst om te maken en waarom?
- Beschrijf welk SQL commando je door de AI opdrachten hebt bijgeleerd en beschrijf in eigne woorden wat dit commando doet.?
📤 Inleveren
- Lever een .txt-bestand in met alle 7 query’s uit deze opdracht (Opdracht A, B en CI).
- Voeg een screenshot toe van het resultaat van de moeilijkste query.
- Lever je reflectie in als .txt of .pdf.
🔁 SQL Terugblik en Samenvatting
🎯 Leerdoelen
- Je kunt de belangrijkste SQL-onderdelen die je hebt geleerd opsommen en uitleggen.
- Je kunt per onderdeel een voorbeeldquery schrijven.
- Je herkent waar je zelf nog onzekerheden of fouten maakt.
🛠️ Opdracht
Maak een overzicht waarin je de belangrijkste SQL-onderdelen samenvat die je dit blok hebt geleerd.
- Voor elk SQL-onderdeel of keyword geef je:
- De naam (bijv.
SELECT
) - Een korte beschrijving in je eigen woorden
- Een kort voorbeeld (één regel SQL is genoeg)
- De naam (bijv.
- Werk dit netjes uit in een tabel of lijst. Gebruik minstens 10 begrippen, zoals:
SELECT
,FROM
,WHERE
,JOIN
,AVG()
,GROUP BY
,ORDER BY
,DELETE
,AS
,COUNT()
- Gebruik de termen table, row en column (table, rij en colum).
- Je mag AI gebruiken om voorbeelden te controleren, maar de uitleg moet in jouw eigen woorden zijn.
📋 Voorbeeld (fragment)
SQL-onderdeel | Omschrijving (in eigen woorden) | Voorbeeldquery |
---|---|---|
SELECT |
Gebruik je om aan te geven welke kolommen je wilt zien. | SELECT naam FROM studenten; |
WHERE |
Gebruik je om rijen te filteren op een voorwaarde. | SELECT * FROM progress WHERE grade_percentage > 80; |
📤 Inleveren
- Werk de opdracht uit, maak een PDF en lever die in.
Extra uitleg SQL
Database maken
Start MariaDB (MySQL) in XAMPP en ga naar http://localhost/phpmyadmin
Je kunt ook op de admin in XAMPP drukken:
In phpmyadmin, maak je een nieuwe database en noem die student.
Download een importbestand (in dit voorbeeld student.sql) en importeer deze.
Select
Om gegevens uit de database te halen is een aparte taal bedacht. Dit heet SQL. Een SQL-programmaatje wordt een query genoemd en telt meestal maar een paar regel.
De meeste query's halen gegeven uit de database en de meest eenvoudige query haalt alle gegevens uit één entiteit. Stel, je wilt alle informatie van alle studenten zien, dan is dit de query:
SELECT * FROM student
SELECT betekent; haal de gegevens op.
* betekent alle kolommen
FROM betekent dat er een tabelnaam (entiteitsnaam) volgt en student is dan de naam van de tabel.
Voer de query uit in phpmyadmin onder het tabje SQL.
Zorg er voor dat je de juiste database hebt geselecteerd (hebt aangeklikt).
Je hebt nu een * in de query gebruikt. Dat betekent dat je alle velden laat zien. Stel dat je alleen de voornaam en het email adres wilt afdrukken dan kan je dat als volgt.
SELECT voornaam, email FROM student
Aliasen (AS)
Stel dat je nu de kolomnamen wilt veranderen dan kan je aliassen gebruiken. Stel de kolomnaam voornaam veranderen in Naam, en email in eMail dan kan dat als volgt.
SELECT voornaam as 'Naam', email as 'eMail' FROM student
WHERE
Stel je wilt alle gegevens van de student met de voornaam Grazia zien. Dat doe je door een WHERE te gebruiken.
De standaard query wordt als volgt opgebouwd
SELECT kolomnaam1, kolomnaam2, .... of * voor alles
FROM tabelnaam
WHERE de conditie
De query die alle gegeven van de student Grazia opzoekt wordt dan
SELECT * FROM `student`
WHERE voornaam='Grazia'
Let op dat Grazia een string is en daarom tussen '(singel quotes) moet worden gezet.
Wildcards (LIKE)
Een conditie kan ook een zogenaamde wildcard bevatten. Een wildcard is bijvoorbeeld alle namen die met een a beginnen. Daarvoor gebruik je in plaats van de = een like en je gebruikt bijvoorbeeld 'a%' om aan te geven dat de naam met een a moet beginnen. Of bijvoorbeeld '%t' om aan te geven dat de naam met een t moet eindigen.
OK, stel willen alle gegevens van alles studenten zien van wie de voornaam met een a begint.
SELECT * FROM student
WHERE voornaam LIKE 'a%'
Hoeveel studenten hebben een voornaam die met een a begint?
Nog een voorbeeld, stel willen alle gegevens van alles studenten met een email adres dat met .com eindigt. Hoe doe je dat?
SELECT * FROM student
WHERE email like '%.com'
AND en OR
Stel we willen alle gegevens van alle studenten waarvan de voornaam met een a of een b of een c begint. Dan kunnen we met OR (net als in PHP) deze condities combineren.
SELECT * FROM student
where voornaam like 'a%' OR voornaam like 'b%' OR voornaam like 'c%'
Stel dat je in deze bovenstaande query per ongeluk een AND had gebruikt, wat zou er dan gebeuren? Als je wilt kan je het uitproberen!
Stel we willen alle gegevens van alles studenten van wie de voornaam met een a begint én van wie het e-mailadres op .com eindigt.
Daarvoor hebben we een AND nodig om de twee condities te combineren.
SELECT * FROM student
where voornaam like 'a%' AND email like '%.com'
Nu een lastige. Stel we willen de studenten van wie de voornaam met een a, b of c begint en van wie het e-mailadres op .com eindigt. We moeten nu de AND en OR gaan combineren.
Als je dat doet dan is er een regel en dat is dat je de OR tussen haakjes moet zetten omdat die bij elkaar hoort.
Dus de gecombineerde query wordt dan;
SELECT * FROM student
where ( voornaam like 'a%' OR voornaam like 'b%' OR voornaam like 'c%' )
AND email like '%.com'
PDO
1 Verbinden met een database
🎯 Leerdoelen
- Je weet wat PDO is en waarom het gebruikt wordt.
- Je kunt verbinding maken met een database via PDO.
- Je begrijpt waarom het handig is om een apart bestand voor de connectie te maken.
💡 Uitleg
PDO (PHP Data Objects) is een moderne manier om met databases te werken in PHP. Het ondersteunt meerdere soorten databases zoals MySQL, SQLite en PostgreSQL, maar in deze lessen gebruiken we alleen MySQL.
Je maakt verbinding met een database via een zogeheten DSN (Data Source Name) en slaat de connectie op in een variabele. Om herhaling te voorkomen, zet je dit in een apart bestand zoals connection.php
. Dit maakt het ook makkelijk om de instellingen aan te passen wanneer je de website van je localhost naar een liveserver verplaatst.
connection.php
Het bestand connection.php
bevat de code om verbinding te maken met de database. In plaats van in elk PHP-bestand opnieuw een connectie te moeten schrijven, zet je die één keer netjes in dit aparte bestand. Zo houd je je code overzichtelijk en voorkom je fouten.
Door connection.php
te gebruiken, hoef je later bij het online zetten van je site alleen in dat ene bestand de instellingen aan te passen (zoals wachtwoord of host), in plaats van in alle bestanden waar je met de database werkt.
<?php
$dsn = 'mysql:host=localhost;dbname=database_name;charset=utf8mb4';
$user = 'root';
$pass = '';
try {
$pdo = new PDO($dsn, $user, $pass);
} catch (PDOException $e) {
echo "Verbinding mislukt: " . $e->getMessage();
}
In het connection.php bestand wordt de database naam, en het user id en password ingesteld. Op een XAMPP ontwikkel server is standaard de user root
en heeft geen password. Op een productieserver is dat natuurlijk ander!
🚰 Opdracht
- Maak een database
voorbeeld
aan met één tabeldieren
met de kolommenid
(INT, AUTO_INCREMENT, PRIMARY KEY),naam
(VARCHAR), ensoort
(VARCHAR). - Maak een bestand
connection.php
dat de connectie maakt zoals hierboven. - Maak een tweede bestand
testverbinding.php
waarin jerequire 'connection.php';
gebruikt om verbinding te maken. - Laat met
echo
zien of de verbinding is gelukt (bijv. "Verbinding gelukt!").
🧠 Reflectie
- Welke manieren zijn er in PHP om met een database te werken, en waarom gebruiken wij PDO?
- Wat zijn voordelen van een apart
connection.php
bestand? - connection.php heeft op een development omgeving een andere inhoud dan op een productieserver. Wat is het verschil en waarom?
📄 Inleveren
- Beantwoord in eigen woorden de reflectievragen (txt of pdf).
2 Gegevens uitlezen met - SELECT
🎯 Leerdoelen
- Je weet hoe je gegevens uit een MySQL-database ophaalt met PDO.
- Je kunt een SELECT-query uitvoeren via PDO.
- Je kunt resultaten weergeven in HTML via PHP.
💡 Uitleg
In deze opdracht gebruik je een bestaande database met studentgegevens. Je voert met behulp van PDO een SELECT
-query uit en toont de resultaten in een HTML-tabel.
Database
Je gebruikt een SQL-bestand student.sql om snel een database en tabel aan te maken met voorbeeldgegevens:
- Open phpMyAdmin (via XAMPP of MAMP).
- Klik op "Importeren".
- Selecteer het bestand
student.sql
dat je van je docent krijgt of downloadt. - Klik op "Start" om het script uit te voeren. Je krijgt nu een database met de tabel
studenten
.
read.php
Maak read.php
en zet daar deze code in:
<?php
require 'connection.php';
$sql = "SELECT id, voornaam, achternaam, woonplaats FROM studenten";
$stmt = $pdo->query($sql);
$studenten = $stmt->fetchAll();
?>
<table border="1">
<tr>
<th>ID</th>
<th>Naam</th>
<th>Woonplaats</th>
</tr>
<?php foreach ($studenten as $student): ?>
<tr>
<td><?= $student['id'] ?></td>
<td><?= $student['voornaam'] . ' ' . $student['achternaam'] ?></td>
<td><?= $student['woonplaats'] ?></td>
</tr>
<?php endforeach; ?>
</table>
🛠️ Opdracht – studentenlijst weergeven
- Importeer
student.sql
in phpMyAdmin om de database en tabel aan te maken. - Maak een bestand
read.php
. - Maak een
connection.php
bestand zoals dat in de vorige les is uitgelegd. - Gebruik de gegeven code en test of de lijst met studenten goed wordt weergegeven.
- Extra (otionele) opdracht: Voeg de kolom
email
toe aan je SELECT-query en aan de HTML-tabel. Zorg ervoor dat het e-mailadres klikbaar is via eenmailto:
link.
🧠 Reflectie
(zoals altijd: leg uit in eigen woorden!)
- Waar en hoe wordt het
connection.php
bestand ingelezen inread.php
? - Wat doet
$pdo->query()
precies? - Wat is het verschil tussen
fetch()
enfetchAll()
? - Hoe toon je data uit een array netjes in een HTML-tabel?
- Wat doet een
mailto:
-link precies?
📤 Inleveren
- Lever het bestand
read.php
in via Teams of Canvas. - Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in.
3 Studentgegevens toevoegen - INSERT
🎯 Leerdoelen
- Je weet hoe je data toevoegt aan een database met PDO.
- Je kunt een formulier maken en de ingevoerde gegevens veilig verwerken.
- Je begrijpt het gebruik van
prepare()
enexecute()
in PDO.
💡 Uitleg
Als je gegevens naar de database wilt sturen (bijvoorbeeld via een formulier), gebruik je een INSERT-query. Bij PDO doe je dit veilig met prepare()
en execute()
. Zo voorkom je problemen zoals SQL-injectie. SQL-injectie kan worden gebruikt om te 'hacken' en wordt later in een ander module uitgelegd.
Je gebruikt prepare()
om de query voor te bereiden met placeholders (:naam
), en daarna geef je met execute()
de daadwerkelijke waarden door.
Voorbeeld – voorbereiding op INSERT
Maak een bestand create.php
met deze HTML en PHP-code:
<?php
require 'connection.php';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$sql = "INSERT INTO studenten (voornaam, achternaam, woonplaats, email)
VALUES (:voornaam, :achternaam, :woonplaats, :email)";
$stmt = $pdo->prepare($sql);
// Vul hier de juiste execute() aan
}
?>
<form method="post">
<label>Voornaam: <input type="text" name="voornaam"></label><br>
<label>Achternaam: <input type="text" name="achternaam"></label><br>
<label>Woonplaats: <input type="text" name="woonplaats"></label><br>
<label>E-mail: <input type="email" name="email"></label><br>
<button type="submit">Toevoegen</button>
</form>
🛠️ Opdracht – student toevoegen via formulier
- Maak het bestand
create.php
aan en zet de code hierboven erin. - Test of het formulier zichtbaar is in je browser.
- Vul de ontbrekende code aan: zorg dat de
execute()
functie de juiste data gebruikt uit het formulier. - Voeg een
echo
toe na het invoegen (bijv. “Student toegevoegd!”) zodat je weet dat het gelukt is. - Controleer in phpMyAdmin of de student correct is toegevoegd aan de database.
🧠 Reflectie
(zoals altijd: leg uit in eigen woorden!)
- Waarom gebruik je
prepare()
in plaats van direct een query uitvoeren? - Hoe weet PHP welke waarden in de query moeten komen?
- Wat is de functie van regel 4 (de regel die met if begint)?
📤 Inleveren
- Lever het bestand
create.php
in via Teams of Canvas. - Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in.
4 Studentgegevens bewerken - UPDATE
🎯 Leerdoelen
- Je weet hoe je bestaande data wijzigt in een database met PDO.
- Je kunt een formulier maken dat bestaande gegevens toont en laat aanpassen.
- Je begrijpt hoe je een
UPDATE
-query uitvoert metprepare()
enexecute()
.
💡 Uitleg
Met een UPDATE
-query kun je bestaande gegevens in de database aanpassen. Je gebruikt ook hier prepare()
en execute()
zodat de invoer veilig verwerkt wordt.
Vaak haal je eerst de huidige gegevens op, zodat de gebruiker weet wat hij gaat bewerken. Daarna verwerk je de aangepaste gegevens.
Voorbeeld – basisopzet update.php
Maak een bestand update.php
en vul deze code in:
<?php
require 'connection.php';
$id = $_GET['id'] ?? null;
if (!$id) {
echo "Geen ID opgegeven.";
exit;
}
$stmt = $pdo->prepare("SELECT * FROM studenten WHERE id = ?");
$stmt->execute([$id]);
$student = $stmt->fetch();
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$sql = "UPDATE studenten SET voornaam = :voornaam, achternaam = :achternaam, woonplaats = :woonplaats, email = :email WHERE id = :id";
$stmt = $pdo->prepare($sql);
// Vul hier de juiste execute() functie aan
}
?>
<form method="post">
<label>Voornaam: <input type="text" name="voornaam" value="<?= $student['voornaam'] ?>"></label><br>
<label>Achternaam: <input type="text" name="achternaam" value="<?= $student['achternaam'] ?>"></label><br>
<label>Woonplaats: <input type="text" name="woonplaats" value="<?= $student['woonplaats'] ?>"></label><br>
<label>E-mail: <input type="email" name="email" value="<?= $student['email'] ?>"></label><br>
<button type="submit">Opslaan</button>
</form>
🛠️ Opdracht – studentgegevens aanpassen
- Maak een bestand
update.php
. - Gebruik de code hierboven. Let op: gebruik een bestaand ID uit je database in de URL (bijv.
update.php?id=3
). - Test of de juiste gegevens zichtbaar zijn in het formulier.
- Vul zelf de
execute()
regel aan zodat de gegevens uit het formulier worden opgeslagen in de database. - Voeg na het opslaan een
echo
toe met "Wijziging opgeslagen". - Controleer of de database wordt aangepast.
🧠 Reflectie
- Hoe weet PHP welk studentrecord moet worden aangepast, leg uit heo dat werkt?
- Waarom gebruik je een
WHERE
clausule in eenUPDATE
query? - Hoe weet je vanuit de code zeker dat de juiste gegevens zijn opgeslagen?
📤 Inleveren
- Lever het bestand
update.php
in via Teams of Canvas. - Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in.
5 Student verwijderen
🎯 Leerdoelen
- Je weet hoe je een record uit een database verwijdert met PDO.
- Je begrijpt waarom je altijd moet controleren welk record je verwijdert.
- Je kunt veilig en gecontroleerd een
DELETE
-query uitvoeren.
💡 Uitleg
Met een DELETE
-query verwijder je een record uit de database. Omdat deze actie niet teruggedraaid kan worden, wil je dit altijd eerst bevestigen. Ook gebruik je een WHERE
clausule om precies aan te geven welk record je bedoelt.
In deze opdracht toon je eerst de naam van de student die je gaat verwijderen, zodat je als gebruiker weet wat je doet. Daarna kun je pas bevestigen en verwijderen.
Voorbeeld – delete.php
<?php
require 'connection.php';
$id = $_GET['id'] ?? null;
if (!$id) {
echo "Geen ID opgegeven.";
exit;
}
// TO DO: Haal hier de student op via SELECT zodat je zijn/haar naam kunt tonen
// $student = ...
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$stmt = $pdo->prepare("DELETE FROM studenten WHERE id = :id");
$stmt->execute(['id' => $id]);
echo "Student verwijderd.";
exit;
}
?>
<p>Weet je zeker dat je student <strong><?= '... hier de naam' ?></strong> wilt verwijderen?</p>
<form method="post">
<button type="submit">Ja, verwijder</button>
</form>
<p><a href="read.php">Annuleer</a></p>
🛠️ Opdracht – student verwijderen met naam
- Maak een bestand
delete.php
. - Gebruik de bovenstaande code.
- Vul zelf de
SELECT
-query aan zodat je de gegevens van de student ophaalt op basis van het ID. - Laat de voornaam en achternaam van de student zien in de bevestigingsvraag.
- Test de pagina via de URL:
delete.php?id=3
(of een ander bestaand ID).
🧠 Reflectie
- Waarom is het belangrijk om eerst de naam van de student te tonen voordat je verwijdert?
- Hoe weet PHP welke gegevens bij het opgegeven ID horen?
- Wat gebeurt er als je probeert een niet-bestaand ID te verwijderen?
- Waarom gebruiken we
POST
voor het verwijderen?
📤 Inleveren
- Lever het bestand
delete.php
in via Teams of Canvas. - Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in.
6 Studenten zoeken
🎯 Leerdoelen
- Je weet hoe je een
WHERE
clausule gebruikt in een SELECT-query met PDO. - Je begrijpt hoe
LIKE
gebruikt wordt voor zoeken op (deel van) tekst. - Je kunt input van een formulier gebruiken om gegevens te filteren.
💡 Uitleg
Met een WHERE
-clausule kun je filteren welke rijen je uit de database haalt. Als je wilt zoeken op een deel van een naam, gebruik je LIKE
met het procentteken %
.
Bijvoorbeeld: SELECT * FROM studenten WHERE voornaam LIKE :zoek
, en dan geef je %zoekwoord%
mee aan de placeholder :zoek
.
Voorbeeldopzet – zoek.php
Maak een bestand zoek.php
met deze opzet:
<form method="get">
<input type="text" name="zoek" placeholder="Zoek op voornaam">
<button type="submit">Zoeken</button>
</form>
<?php
require 'connection.php';
$zoekwoord = $_GET['zoek'] ?? '';
if ($zoekwoord) {
// TO DO: vul de juiste SELECT-query en fetchAll() hier aan
}
?>
🛠️ Opdracht – zoekfunctie bouwen
- Maak het bestand
zoek.php
. - Gebruik de bovenstaande code als startpunt.
- Vul zelf de SELECT-query aan met een
WHERE voornaam LIKE :zoek
clausule. - Voer de query uit met
prepare()
enexecute()
– gebruik%
wildcards om ook op deelwoorden te zoeken. - Toon de resultaten in een tabel met voornaam, achternaam, woonplaats en e-mail.
🧠 Reflectie
- Wat is het verschil tussen een gewone vergelijking (
=
) enLIKE
? - Hoe werkt
%
in een LIKE-query precies? - Wat gebeurt er als je een lege zoekterm invoert?
- Waarom gebruik je
prepare()
ook bij zo’n zoekopdracht?
📤 Inleveren
- Lever het bestand
zoek.php
in via Teams of Canvas. - Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in.
7 Mini-project: CRUD applicatie
🎯 Leerdoelen
- Je kunt een complete CRUD-toepassing bouwen met PDO.
- Je past SELECT, INSERT, UPDATE, DELETE en LIKE correct toe.
- Je gebruikt
connection.php
om je project onderhoudbaar te houden.
Wat is CRUD?
CRUD staat voor Create, Read, Update, Delete – dit zijn de vier basisbewerkingen die je met gegevens in een database kunt uitvoeren:
-
Create: nieuwe gegevens toevoegen (bijv. een nieuwe student inschrijven)
-
Read: gegevens opvragen en tonen (bijv. een lijst van alle studenten)
-
Update: bestaande gegevens aanpassen (bijv. een fout corrigeren in een naam)
-
Delete: gegevens verwijderen (bijv. een student uitschrijven)
Een CRUD-applicatie is een programma dat deze vier functies ondersteunt. In webontwikkeling gebruik je vaak formulieren en SQL in combinatie met PHP of andere programmeertalen om deze acties uit te voeren.
💡 Uitleg
Je hebt nu alle onderdelen geleerd om een volledige webapplicatie te maken die met een database werkt. In dit project bouw je een kleine CRUD-app voor studenten waarin je:
- een lijst van studenten toont (read)
- nieuwe studenten kunt toevoegen (create)
- bestaande studenten kunt bewerken (update)
- studenten kunt verwijderen (met bevestiging) (delete)
- kunt zoeken op voornaam
🛠️ Opdracht – CRUD-app bouwen
- Maak een eigen map of project met minimaal de volgende bestanden:
read.php
– toont de lijst van studentencreate.php
– formulier om nieuwe studenten toe te voegenupdate.php
– formulier om bestaande studenten te bewerkendelete.php
– bevestiging en verwijdering van een studentzoek.php
– zoekfunctie op voornaamconnection.php
– je databaseverbinding
- Zorg dat je hiervan één web applicatie van en zorg dat je via een menu bar kan navigeren.
- Voeg bovenaan
read.php
een navigatie toe zodat je snel naar de andere pagina’s kunt. - Controleer of je code werkt voor verschillende studenten en test het met minstens 3 zelf ingevoerde records.
- Je mag de opmaak aanpassen met CSS als je wilt, maar dat is optioneel.
🧠 Reflectie
- Welke onderdelen van PDO vind je makkelijk, en welke lastig?
- Waar moet je vooral op letten bij UPDATE en DELETE?
- Wat zou je verbeteren als je meer tijd had voor dit project?
- Wat betekent het als we zeggen dat PDO "veilig" is? Wanneer is dat waar?
📤 Inleveren
- Lever je hele projectmap in (alle .php-bestanden).
- Lever de reflectie in (txt of pdf). En gebruik je eigen woorden!
8 Toetsvragen: PDO en CRUD
🎯 Leerdoelen
- Je herkent de belangrijkste onderdelen van PDO-gebruik in PHP.
- Je begrijpt hoe CRUD-operaties technisch en logisch werken.
- Je kunt fouten of onvolledigheden in PDO-code herkennen en verklaren.
🛠️ Toetsvragen
Wat doet PDO, waarvoor hebben we het nodig?
PDO staat voor PHP Data Objects. Het is een library met functies waarmee je PHP kan 'verbinden' met een database. Je kan dan in PHP SQL queries gebruiken om de data in de database op te vragen of aan te passen.
Hoe maak je een verbinding met de database via PDO?
Je maakt een DSN-string aan (bijv. mysql:host=localhost;dbname=voorbeeld;charset=utf8mb4
), geeft gebruikersnaam en wachtwoord door, en instancieert een nieuwe PDO
-object.
Het meest eenvoudige voorbeeld is:
$pdo = new PDO( 'mysql:host=localhost;dbname=database_name;charset=utf8mb4','user', 'password');
Waarom is het handig om connection.php te gebruiken?
Door de connectiecode in één bestand te zetten, onderhoud je die centrale plek makkelijker.
Als je wachtwoord wijzigt of je plaatst je code vanaf je laptop op een productie server dan hoef je op maar één paats je wachtwoord aan te passen.
Waarom zou je trouwens je wachtwoord willen aanpassen als je je code op een prodctie server zet?
Op jouw laptop hgebruik je voor je database meestal geen password, lekker makkelijk. Een productieserver kan de hele wereld 'zien' en als je geen password gebruikt dan is je database binnen de kortste keren gehacked.
Tip: verander niet alleen je wachtwoord, maar pas ook je user name aan dan maak je het hackers nog iets lastiger.
Hoe gebruik je fetchAll() en wanneer gebruik je fetch()?
fetchAll()
haalt alle rijen in één keer op als array van arrays (of objects). fetch()
haalt per aanroep één rij op, handig als je maar één record verwacht of in een loop wilt verwerken.
Waarom gebruik je bij INSERT en UPDATE altijd POST in plaats van GET?
Omdat POST
bedoeld is voor acties die data wijzigen en niet in de URL verschijnt, zodat gevoelige data niet zichtbaar wordt en de actie niet per ongeluk herhaald wordt bij refresh van de pagina.
Waarvoor gebruik je WHERE bij een UPDATE of DELETE?
De WHERE
-clausule specifieert precies welke rij(en) aangepast of verwijderd moeten worden. Zonder WHERE
wordt de operatie op álle rijen uitgevoerd.
Wat betekent CRUD en hoe komen deze onderdelen terug in de module?
CRUD staat voor Create, Read, Update, Delete. In de module leer je:
- Create: via
INSERT
enprepare()/execute()
(create.php). - Read: via
SELECT
enfetchAll()
(read.php). - Update: via
UPDATE
met prepared statements (update.php). - Delete: via
DELETE
met bevestiging enWHERE
(delete.php).
Wat doet require 'connection.php' ?
Dit voegt het bestand connection.php
in en maakt de databaseconnectie beschikbaar.
Hierdoor hoef je niet in elk stukje code waarin je PDO gebruikt opnieuw de connectie te schrijven.
📤 Inleveren
Gebruik deze vragen om jezelf te testen of als voorbereiding op de kennis-check.
Maak één zelf bedachte vraag over PDO gaat en die hier boven niet staat.
- Stel de vraag, geef het antwoord en een korte uitleg. Gebruik het formaat dat hier ook wordt gebruikt, Lever in in PDF of TXT.
--
CRUD - Challenge
Deze module evt. nog aanpassen
8 CRUD Challenge – Te laat meldingen
🎯 Leerdoelen
- Je kunt een volledige CRUD-toepassing bouwen met PDO en PHP.
- Je past invoercontrole en gebruikersinteractie toe in formulieren.
- Je begrijpt de rol van
prepare()
,execute()
, en veilige query’s.
💡 Uitleg
In deze challenge bouw je een complete toepassing waarin te laat meldingen van studenten worden bijgehouden. Je gebruikt alles wat je geleerd hebt over forms, PDO, databaseverwerking en CRUD-operaties.
Het eindresultaat is een overzichtspagina met alle meldingen, waarin je nieuwe meldingen kunt toevoegen, bestaande meldingen kunt wijzigen en meldingen kunt verwijderen (met bevestiging).
Voorbeeld
Bekijk het voorbeeld op: stampwerk.nl. Probeer de knop 'Weer eentje te laat' en kijk wat er gebeurt.
De bedoeling is dat je een CRUD gaat maken. Wat is een CRUD? Dat leggen we zo uit. Eerste het voorbeeld, dat kan je vinden op:
Wat is een CRUD?
CRUD staat voor Create, Read, Update en Delete.
Deze vier functies zijn de basisfuncties die je op een tabel uit de database kan uitvoeren. Stel je hebt een tabel student, je kunt een student toevoegen (Create), je kunt een overzicht krijgen van studenten (Read), je kunt de gegevens van een student aanpassen (Update) en als laatste kun je een student ook weer verwijderen.
De challenge is dat jij een CRUD gaat maken voor te laat meldingen. Maak daarvoor eerst een tabel in de database waarin je te laat meldingen kan registreren.
Als je naar het voorbeeld kijkt dan zie je dat je van een te laat melding de volgende gegevens wilt vastleggen:
- naam van de student
- klas
- aantal minuten te laat
- de reden van het te laat komen.
🛠️ Stappenplan
Stap 1 – Database maken
- Maak een database en een tabel
meldingen
met de volgende velden:id
(INT, AUTO_INCREMENT, PRIMARY KEY)student
(VARCHAR)klas
(VARCHAR)minuten
(INT)reden
(TEXT)
- Voeg met PHPMyAdmin alvast een paar testregels toe.
Stap 2 – Read: overzicht maken
- Maak
read.php
waarin je alle meldingen toont in een HTML-tabel. - Gebruik
require 'connection.php'
om je databaseverbinding te maken. - Gebruik
query()
enfetchAll()
om de gegevens op te halen. - Voeg bovenaan de pagina een navigatie toe met knoppen voor “toevoegen” en “zoeken”.
Stap 3 – Create: melding toevoegen
- Maak een bestand
create.php
met een formulier voor een nieuwe melding. - Voeg de invoervelden toe voor student, klas, minuten en reden.
- Voer de gegevens in de database in met
prepare()
enexecute()
. - Laat zelf de
execute()
-regel open en vul deze correct aan. - Controleer of de invoer geldig is: geen negatieve getallen, geen lege velden.
- Laat een foutmelding zien als de invoer niet klopt, en een succesmelding als het is gelukt.
Stap 4 – Delete: melding verwijderen
- Voeg op
read.php
bij elke rij een knop “verwijder” toe die leidt naardelete.php?id=...
- Toon in
delete.php
eerst een bevestiging, inclusief de naam van de student. - Voer pas na bevestiging de
DELETE
-query uit. - Laat de student zelf de naam ophalen met een SELECT-query.
Stap 5 – Update
- Voeg op
read.php
ook een knop “wijzig” toe bij elke melding, die leidt naarupdate.php?id=...
. - Haal in
update.php
de bestaande gegevens op met eenSELECT
-query. - Toon een formulier met de bestaande gegevens ingevuld.
- Laat de student zelf de
value
-attributen van de formulier-velden vullen. - Laat bij opslaan de gewijzigde gegevens bijwerken met een
UPDATE
-query.
🧠 Reflectie
- Wat heb je geleerd over het werken met databases in PHP?
- Wat ging er goed, en waar had je hulp bij nodig?
- Wat zou je in een volgend project anders aanpakken?
- Hoe zorg je ervoor dat je database veilig blijft bij gebruikersinvoer?
📤 Inleveren
- Eén screenshot van je overzichtspagina (
read.php
). - Eén screenshot van je invoerpagina (
create.php
). - Eén screenshot van je wijzigpagina (
update.php
). - Alle PHP-bestanden, SQL-export van de database, en eventuele CSS.
- Een reflectieverslag in .txt of .pdf met de bovenstaande vragen beantwoord.
- Maak een afspraak met een docent die je uitlegt hoe je code werkt.
📊 Puntentelling
Je moet minimaal 81 van de 100 punten halen om deze opdracht succesvol af te ronden.
Punten | Onderdeel |
---|---|
10 | Database en tabel: juiste velden, datatypes en primary key zijn aangemaakt. |
10 | Read: overzichtspagina toont meldingen correct in een tabel. |
10 | Layout: nette opmaak met CSS (Bootstrap, Tailwind, ...), duidelijke structuur. |
20 | Create: formulier voegt een nieuwe melding toe, inclusief invoercontrole. |
10 | Invoercontrole: negatieve of ongeldige invoer wordt opgevangen met een melding. |
10 | Delete: verwijderen werkt inclusief bevestiging én juiste studentnaam. |
20 | Update: bestaand record kan worden aangepast via een formulier met ingevulde velden. |
10 | Codekwaliteit & veiligheid: gebruik van prepare() , execute() , nette bestandsstructuur. |
Kennis Check blok 6
Database
1. Wat is een database en waarom gebruiken we die?
Een database is een digitale 'schatkist' waarin je gegevens over bijvoorbeeld studenten, producten of klanten netjes opslaat.
Je gebruikt een database omdat het overzichtelijk is, snel werkt en voorkomt dat je dingen dubbel bijhoudt.
2. Hoe zet je ‘echte wereld’ gegevens om naar tabellen en kolommen?
Je kijkt naar de onderwerpen (zoals 'Student', 'Opleiding') en noemt die entiteiten. Van elk onderwerp maak je kolommen (attributen), zoals naam, klas of geboortedatum. Zo maak je structuur in je data.
3. Wat is het verschil tussen ruwe gegevens en een gestructureerd model?
Ruwe gegevens zijn zoals je ze tegenkomt: alle info door elkaar. Een gestructureerd model brengt orde: je verdeelt info over tabellen met duidelijke kolommen. Daardoor raak je minder snel in de war.
4. Waarom is het foutgevoelig om gegevens meerdere keren op te slaan?
Stel dat je opleiding ‘Software Developer’ vijf keer typt en één keer tikfout maakt. Dan heb je verschillende versies van dezelfde opleiding – dat maakt fouten en verwarring. Daarom bewaar je info op één plek.
5. Wat is een entiteit en wat is een attribuut?
Een entiteit is een 'dingen'-soort, zoals Student of Cursus. Attributen zijn eigenschappen daarvan, zoals naam, klas of duur. Zo kun je entiteiten en eigenschappen herkennen en verwerken.
6. Waarom hebben we altijd een primary key nodig?
Een primary key is een uniek kenmerk in een tabel, bijvoorbeeld student_id. Zo weet je zeker dat elke rij uniek is en kun je records makkelijk terugvinden en koppelen.
7. Wat is een 1:N-relatie en hoe maak je die in een ERD?
Bij een 1:N-relatie hoort één entiteit bij meerdere bij een andere. Bijvoorbeeld één klant -> meerdere boekingen. Je tekent een haakje aan de kant met “veel” en zet een foreign key in de ‘veel’-tabel.
8. Wat is een foreign key en waarom gebruiken we die?
Een foreign key is een verwijzing in de ene tabel naar de primary key van een andere tabel. Daarmee maak je een verband tussen twee tabellen, zoals boeken gekoppeld aan klanten.
9. Wat zijn datatypes en waarom moet je die zorgvuldig kiezen?
Datatypes bepalen wat voor soort gegevens je opslaat, zoals INT, VARCHAR of DATE. Als je het verkeerde datatype kiest, kan je database fout gaan of traag worden. En voor telefoon gebruik je VARCHAR omdat het niet rekent.
10. Wat is een N:N-relatie en hoe los je dat op in je model?
Een N:N-relatie is een relatie waarin meerdere records van entiteit A gekoppeld zijn aan meerdere van B, bijvoorbeeld leerlingen met meerdere lessen. Dat los je op met een tussentabel waarin de foreign keys van beide entiteiten samen komen.
SQL
1. Waarom gebruik je verschillende SQL-commando’s zoals SELECT, INSERT, UPDATE en DELETE?
Omdat je met elke opdracht iets anders doet met de gegevens. Met SELECT
haal je gegevens op, met INSERT
voeg je iets toe, met UPDATE
verander je iets, en met DELETE
verwijder je iets.
Als je maar één commando zou hebben, zou je alles zelf moeten bouwen. Nu is het veel makkelijker en duidelijker.
2. Wat gebeurt er als je een WHERE-clausule vergeet bij een UPDATE- of DELETE-opdracht?
Dan pas je alles aan of verwijder je alles in de hele tabel! Dat is meestal niet wat je wilt. De WHERE
zorgt ervoor dat je alleen die rijen verandert die aan een bepaalde voorwaarde voldoen, bijvoorbeeld: alleen de student met ID 5.
3. Waarom gebruik je JOIN?
Stel: je hebt een tabel met studenten en een andere met klasnamen. Als je wilt zien in welke klas een student zit, moet je de tabellen combineren. Dat doe je met een JOIN
. Dan kun je gegevens uit beide tabellen tegelijk laten zien, alsof het één lijst is.
4. Stel: je hebt een tabel 'studenten' en je wilt alleen de studenten uit Amsterdam zien, welke SQL-structuur gebruik je?
Dan gebruik je WHERE woonplaats = 'Amsterdam'
achter je SELECT.
Zo zeg je: "Geef alleen de rijen waarvan de woonplaats gelijk is aan Amsterdam."
5. Wat is het nut van een wildcard zoals '%' in een LIKE-zoekopdracht?
De %
betekent: 'maakt niet uit wat hier staat'. Als je zoekt op naam LIKE 'J%'
, krijg je alle namen die beginnen met een J, zoals "Jesse", "Julia" of "Joris". Het is handig als je niet precies weet wat iemand heeft ingevuld.
6. Waarom is het belangrijk om kolommen te kiezen in SELECT, in plaats van SELECT *?
Met SELECT *
haal je alles op, ook dingen die je niet nodig hebt. Dat kan je website trager maken en is onduidelijk. Als je alleen de kolommen kiest die je nodig hebt, is je code netter en sneller.
7. Wat verandert er aan je data-structuur door een PRIMARY KEY toe te voegen?
Een PRIMARY KEY
zorgt ervoor dat elke rij uniek is, bijvoorbeeld op ID.
De rij die je een PRIMARY KEY
geeft, moet dus ook uniek zijn; van elke waarde mag er maar één voorkomen.
8. Hoe zou jij een fout in een query ontdekken en oplossen?
Lees goed wat de foutmelding zegt. Vaak is het een typefout, een komma die mist of een fout in de naam van een kolom. Probeer de query stap voor stap te testen. Gebruik bijvoorbeeld phpMyAdmin om te kijken of je query daar werkt.
Als je er niet uit komt dan kan je de query ook stapje voor stapje eenvoudiger maken, door telkens iets weg te laten.
9. Wat is het verschil tussen een SQL-query schrijven in phpMyAdmin en dezelfde query uitvoeren via PHP/PDO?
In phpMyAdmin voer je de query handmatig in – één keer. Met PHP/PDO doe je dat in je code, automatisch, telkens als iemand je website gebruikt. Zo kun je gegevens tonen of opslaan zonder handmatig iets te doen.
PDO
Waarom kiezen we voor PDO boven oudere methodes zoals mysql_* of mysqli?
PDO is veiliger en flexibeler. Het helpt je om makkelijker over te stappen naar een andere database (bijvoorbeeld van MySQL naar SQLite).
PDO is het meest recent en modern. PDO wordt verder ontwikkeld en mysqli `minder.
PDO is iets eenvoudiger in gebruikt.
Wat is een DSN in PDO?
DSN betekent "Data Source Name". Dat is een stukje tekst waarin staat met welke database je verbinding maakt.
Waarom is het handig om de verbinding (bijvoorbeeld connection.php) in een apart bestand te zetten?
Zo hoef je niet overal dezelfde code te typen. Als er iets verandert (zoals het wachtwoord), dan hoef je dat maar op één plek aan te passen. Je maakt je code netter, overzichtelijker en makkelijker te onderhouden.
Wat is het verschil tussen de database-instellingen op je eigen laptop en op een echte server?
Op je laptop gebruik je vaak "localhost" en een gebruiker (root) zonder wachtwoord.
Op een echte server is dat niet veilig, dus daar gebruik je andere gegevens. Het is belangrijk dat je die gegevens netjes gescheiden houdt, anders werkt je site straks niet online of wordt hij gehackt.
Wat is het verschil tussen query() en prepare() + execute()?
Met query()
stuur je direct een SQL-opdracht.
Met prepare()
+ execute()
gebruik je een veilige manier waarbij je eerst zegt "wat je ongeveer wilt doen" en daarna de gegevens pas invult. Dat is veiliger, vooral bij gegevens van een formulier.
Hoe helpt prepare() om SQL-injecties te voorkomen?
Een SQL-injectie is als iemand iets raars intypt in een formulier om je database kapot te maken. prepare()
zorgt ervoor dat die invoer niet als SQL-code wordt gezien, maar gewoon als tekst. Daardoor kunnen hackers niks kapot maken.
Hoe haal je meerdere rijen uit een database met PDO?
Je doet eerst $stmt = $conn->query("SELECT ...")
, dan gebruik je fetch()
om één rij te krijgen of fetchAll()
voor alles tegelijk.
fetch()
is handig als je maar één resultaat verwacht, zoals bij een login. fetchAll()
gebruik je als je bijvoorbeeld een lijst van producten wilt laten zien.
🛠️ Opdracht
Maak de kennis-check.
📤 Inleveren
Aan het einde van de kennis-check ontvang je een certificaat. Maak een schermafdruk en lever deze in.
--
Blok 7 - Intro Frameworks en Deployement
Prompt Engineering 3
1, Introductie
We hebben in prompt engineering 1 en 2 geleerd waaraan een goede prompt moest voldoen.
Dit zijn de basis kenmerken van een goede prompt. De eerste drie kenmerken moet je prompt altijd aan voldoen!
-
- Context - een goede prompt heeft voldoende contexrt.
- Details/Specifiek - een goed prompt heeft voldoende details en is zo specifiek mogelijk.
- Duidelijkheid - een goede prompt is concreet en bevat geen vage termen zoals (mooi, groot, .....), zei hier.
- Doelgericht - een goede prompt is doelgericht.
- Vorm - in een goede prompt kan je de output in een bepalade vorm vragen.
- Toon -door in de prompt de toon op te nemen, bepaal je de vorm van het antwoord.
In deze module gaan we nog meer advanched prompt-technieken leren. Deze technieken heb je niet altijd nodig maar het is handig om deze technieken te kennen.
Bovendien zijn de meeste techniekken ook toepasbaar in als 'problem solving' technieken.
-
Gebruik een rol (role prompting)
Laat de AI een specifieke rol of expertise aannemen (bijv. leraar, programmeur, leerling). -
Vraag om alternatieven of variaties
Stimuleer de AI om meerdere ideeën of invalshoeken te geven. -
Iteratief verbeteren
Vraag de AI om haar eigen antwoord te verbeteren of herschrijven. -
Gebruik prompt templates
Werk met vaste structuren zoals: context, doel, outputvorm, toon. -
Vraag om zelfvragen (self-questioning)
Laat de AI zelf bedenken welke vragen nodig zijn om het probleem goed op te lossen. -
Gebruik kritiek als leermoment (prompt debugging)
Laat de AI uitleggen waarom een prompt niet goed werkte en hoe je die kunt verbeteren.
1. Role Prompting
💡 Uitleg
Je kunt de AI vragen om te reageren alsof ze een bepaalde rol heeft. Bijvoorbeeld:
- een ervaren programmeur
- een beginnende student
- een HTML-docent
- een code-reviewer
Door een rol te geven, pas je automatisch de toon, moeilijkheidsgraad en stijl van het antwoord aan. Dit helpt je om antwoorden te krijgen die beter passen bij jouw doelgroep of bij jouw situatie.
🎬Voorbeeld
Prompt
Leg uit wat een <form>
-element is in HTML, alsof je een docent bent die het uitlegt aan een groep mbo-studenten zonder programmeerervaring.
Verwachte AI-reactie
Een <form>
is een stuk HTML-code waarmee gebruikers informatie kunnen invullen, zoals hun naam of e-mailadres. Denk aan een online formulier dat je invult om iets te bestellen. De informatie die je invult wordt verstuurd naar de website zodat er iets mee gedaan kan worden.
Laat de AI vragen stellen als een docent
Je kunt ook aan de AI vragen om deelvragen te stellen, zoals een goede docent dat zou doen.
Prompt
Speel de rol van een HTML-docent. Stel mij eerst drie vragen waarmee je kan inschatten hoeveel ik al weet over formulieren in HTML. Geef daarna pas een uitleg op mijn niveau.
Wat dit doet
- De AI stelt vragen zoals: “Wat denk je dat een
<form>
doet?”, “Heb je eerder inputvelden gebruikt?” - De AI past daarna de uitleg aan op basis van jouw antwoorden (of een inschatting daarvan)
✍️Opdracht
Je wilt dat de AI uitleg geeft over een klein stukje code, maar dan in een specifieke rol. Bijvoorbeeld: als docent, als programmeermaatje, of als code-reviewer.
- Je bent een student die uitleg wil over hoe een formulier werkt in HTML
Je wilt dat de AI zich gedraagt als een docent die eerst deelvragen stelt voordat hij iets uitlegt - Schrijf een prompt waarin je duidelijk de rol beschrijft die de AI moet aannemen.
📤 Inleveren
- Je volledige prompt
- Het AI-antwoord
2. Vraag om alternatieven of variaties
💡 Uitleg
De AI geeft standaard vaak slechts één oplossing. Maar in de praktijk zijn er meestal meerdere manieren om iets te doen — zeker in programmeertalen als HTML, CSS, PHP of JavaScript.
Je kunt dus expliciet vragen om meerdere oplossingen of variaties, zoals:
- “Geef 3 manieren om een knop te centreren met CSS.”
- “Laat 2 varianten zien van hetzelfde formulier: één minimalistisch en één met veel opmaak.”
- “Bedenk 3 manieren om input te valideren in JavaScript.”
Voordelen
- Je leert alternatieve technieken kennen
- Je kunt zelf kiezen welke stijl of methode bij jouw project past
- Je voorkomt dat je AI-antwoorden blind overneemt zonder kritisch te zijn
🎬Voorbeeld
Prompt
Geef 3 manieren om een knop in het midden van het scherm te tonen met behulp van CSS.
Verwachte AI-reactie (beknopt)
text-align: center
op de container +display: inline-block
op de knopmargin: 0 auto
bij een block-level knop met vaste breedte- Flexbox op de container met
justify-content: center
enalign-items: center
✍️Opdracht
Je wil verschillende manieren zien om een veelvoorkomende webtaak uit te voeren.
- Kies één van deze taken:
- Validatie toevoegen aan een inputveld, of
- Een PHP-script schrijven dat data toont
- Schrijf een prompt waarin je de AI vraagt om minstens 3 alternatieven of varianten van die oplossing.
- Gebruik in je prompt woorden als:
- “Geef meerdere mogelijkheden…”
- “Laat minstens 3 manieren zien…”
- “Toon varianten van deze code…”
- "Beschrijf van elke variant de voor- en nadelen...."
- Zorg voor een goede opbouw in je prompt met:
- Context: wat ben je aan het doen en welke technieken gebruik je?
- Details: wat zijn de randvoorwaarden?
- Duidelijkheid: hoeveel oplossingen wil je?
📤 Inleveren
- Je volledige prompt
- De gegenereerde alternatieven van de AI
- Een korte reflectie (reflectie.txt): welke oplossing vind jij het beste, en waarom?
3. Iteratief verbeteren
💡 Uitleg
De AI geeft vaak een eerste versie van een antwoord, maar dat hoeft niet perfect te zijn. Je kunt de AI daarom vragen om het eigen antwoord te beoordelen en te verbeteren.
Dit heet iteratief verbeteren.
Bijvoorbeeld
- “Herschrijf dit zodat het eenvoudiger is voor een beginner.”
- “Geef dezelfde code, maar nu met uitleg erbij.”
- “Kun je deze oplossing optimaliseren voor leesbaarheid?”
Je leert zo hoe je feedback kunt geven aan de AI, en je oefent tegelijkertijd zelfkritisch denken over codekwaliteit.
🎬Voorbeeld
Prompt
Geef me een formulier in HTML waarmee iemand zich kan inschrijven voor een nieuwsbrief. Voeg daarna uitleg toe over hoe elk onderdeel werkt.
Vervolgprompt
Herschrijf je antwoord zodat het ook begrijpelijk is voor iemand die nog nooit HTML heeft gezien.
✍️Opdracht
Je wilt dat de AI het eigen werk verbetert — of dat jij feedback geeft, en dat de AI dat verwerkt.
- Vraag de AI eerst om een korte opdracht uit te voeren. Bijvoorbeeld:
- Een stukje JavaScript schrijven dat controleert of een naam de juiste hoofdletters en punten heeft. (Dus goede namen zijn: M. Bisschop en J. K. van der Velden, onjuiste namen zijn M Bisschop (punt mist) en k. van der Velden (k is gene hoofdletter).
- Lees het antwoord goed door. Stel daarna een vervolgprompt waarin je de AI vraagt om:
- het duidelijker te maken,
- het aan te passen voor beginners,
- het te herschrijven met uitleg/commentaar,
- of het korter, leesbaarder of efficiënter te maken.
- Schrijf beide prompts uit:
- de eerste vraag, gebruik hierbij de few-shot prompt techniek (voorbeelden).
- de verbeteropdracht
- Zorg dat je feedback duidelijk is: wat wil je precies anders of beter?
- Zorg ervoor dat je de code begrijpt.
📤 Inleveren
- Je eerste prompt
- Het eerste AI-antwoord
- Je tweede prompt (de verbeteropdracht)
- Het verbeterde AI-antwoord
Deze opdracht laat je zien aan een docent. Je laat zien wat je eerste- en twede eprompt is en je kunt zelf uitleggen hoe de code werkt.
---- vanaf hier nog corrigeren/aanvullen ----
4 Gebruik prompt templates
Uitleg
Als je regelmatig AI gebruikt voor soortgelijke taken, is het handig om te werken met een vaste structuur: een prompt template.
Een template helpt je om:
- niets te vergeten in je vraag;
- sneller en consistenter te werken;
- betere output te krijgen van de AI.
Een goede prompt bestaat vaak uit onderdelen zoals:
- Context – wat is de situatie?
- Specifiek - wat wil precies je bereiken?
- Duidelijk -zorg dat je prompt geen 'vage' aanwijzingen heeft
- Outputvorm – in welke vorm wil je het antwoord?
- Toon – formeel, informeel, eenvoudig, technisch?
Voorbeeld van een prompt template
Context: Ik werk aan een HTML-formulier
Doel: Ik wil dat de AI me helpt met het maken van een formulier voor e-mailinvoer
Outputvorm: Alleen HTML-code, zonder uitleg
Toon: Neutraal en duidelijk
Voorbeeldprompt:
Gebruik onderstaande context en geef alleen de code:
Ik wil een formulier voor e-mailadres, zonder uitleg.
Context: HTML-formulier
Output: HTML-code
Opdracht
Je gaat zelf een prompt schrijven met behulp van een prompt-template.
- Gebruik het volgende sjabloon en vul de velden in:
Context: Doel: Outputvorm: Toon:
- Schrijf daarna een volledige prompt op basis van jouw ingevulde template.
- Stuur je prompt naar de AI en bekijk het resultaat:
- Krijg je precies wat je bedoelde?
- Is de toon en vorm correct?
- Zou je iets willen toevoegen aan je template?
- (Optioneel) Pas je template aan en probeer het nog eens.
Inleveren
- Je ingevulde template
- De volledige prompt
- De output van de AI
- Een korte reflectie: werkte het goed? Wat zou je verbeteren aan het sjabloon?
5. Vraag om zelfvragen (self-questioning)
Uitleg
Soms weet je nog niet goed wat je precies moet vragen, of wil je dat de AI eerst nadenkt over het probleem vóórdat het met een oplossing komt.
Dan kun je de AI vragen om eerst zelf vragen te stellen over de situatie of opdracht.
Deze techniek helpt om:
- een probleem beter te begrijpen
- complexe opdrachten op te breken
- geen belangrijke dingen over het hoofd te zien
Deze techniek lijkt op chain-of-thought prompting, maar het verschil is:
👉 De AI stelt eerst vragen aan zichzelf of aan jou om het probleem helder te krijgen.
Voorbeeld
Prompt:
Ik wil een inschrijfformulier bouwen voor mijn website.
Stel jezelf eerst 3 vragen zodat je weet wat je precies moet bouwen.
Beantwoord die vragen.
Bouw daarna pas het formulier in HTML.
Verwachte AI-antwoord:
- Welke gegevens moet de gebruiker invullen?
- Moet de invoer gevalideerd worden?
- Wat moet er gebeuren na het verzenden?
Daarna volgt uitleg én pas daarna de code.
Opdracht
Je wilt dat de AI een simpele programmeeropdracht uitvoert, maar eerst zelf nadenkt over wat er nodig is, door zichzelf (of jou) vragen te stellen.
- Kies een opdracht, bijvoorbeeld:
- Maak een contactformulier
- Valideer een inputveld met JavaScript
- Toon resultaten in PHP
- Schrijf een prompt waarin je de AI vraagt om:
- eerst 3 vragen te stellen over de opdracht,
- die vragen zelf te beantwoorden,
- daarna pas te starten met uitleg en/of code
- Je kunt de prompt afsluiten met: “Geef de code pas nadat je de vragen hebt beantwoord.”
Inleveren
- Je volledige prompt
- De 3 vragen + antwoorden van de AI
- De gegenereerde uitleg en code
- Korte toelichting: hielp dit om het probleem beter te begrijpen?
6. Gebruik kritiek als leermoment (prompt debugging)
Uitleg
Niet elke prompt die je aan de AI geeft, levert direct het gewenste resultaat op. Soms krijg je:
- een onvolledig antwoord,
- verkeerde code,
- te algemene uitleg,
- of net niet wat je bedoelde.
In plaats van gefrustreerd te raken, kun je deze momenten gebruiken om van je fout te leren:
👉 Laat de AI zelf uitleggen waarom de prompt niet goed werkte, en hoe je die beter kunt formuleren.
Zo leer je hoe kleine verschillen in formulering grote impact kunnen hebben.
Voorbeeld
Slechte prompt:
Maak een mooie website
Verbeterde prompt:
Maak een eenvoudige, moderne HTML-pagina met een grote titel, een navigatiebalk bovenaan, en drie contentblokken onder elkaar. Gebruik alleen HTML en CSS, zonder externe libraries.
Prompt debugging:
Waarom gaf de AI een vage reactie op “maak een mooie website”?
Wat zou ik anders moeten vragen?
Opdracht
Je oefent met het herkennen en verbeteren van een slechte prompt.
- Schrijf eerst bewust een vage of slechte prompt, zoals:
- “Maak een website”
- “Schrijf een formulier”
- “Geef uitleg over PHP”
- Vraag vervolgens aan de AI:
- Waarom deze prompt niet optimaal is
- Wat er beter zou kunnen aan deze prompt
- Hoe je de prompt kunt herschrijven
- Schrijf daarna een verbeterde versie van je prompt, en test het resultaat.
- Reflecteer:
- Wat is het verschil in output?
- Wat leer je hiervan over duidelijkheid en specificiteit in prompts?
Inleveren
- De oorspronkelijke (slechte) prompt
- De analyse van de AI
- De verbeterde prompt
- De nieuwe output
- Korte reflectie: wat is het belangrijkste inzicht?
Deployement
1 Toegang tot PLESK
Ga na bij een Software Development docent en meld dat je met deze module start.
De docent zal alles voor je klaarzetten!
Om te beginnen heb je toegang nodig tot PLESK. Hiervoor ga je met je browser naar het volgende adres:
Vervolgens krijg je een inlogscherm. Klik hier op 'Wachtwoord vergeten?' om een link te krijgen voor het aanmaken van een wachtwoord. Je inlognaam is je studentnummer.
Om een wachtwoord te resetten (of op te vragen) gebruik je je email adres studentnummer@talnet.nl, bijvoorbeeld : 123456@talnet.nl Vergeet niet je SPAM-box te checken.
Vergeet niet je SPAM-box te checken.
Als je bent ingelogd in PLESK, kom je gelijk in de beheeromgeving van jouw website. De url van jouw website is:
<jouw studentnummer>.jouw.website
Als je deze url voor de eerste keer intyped zie je een standaard (tijdelijke) pagina. Deze ga je in de volgende onderdelen vervangen door de door jou gemaakte website- / applicatie. Veel browsers zullen deze pagina niet direct laten zien. Dit komt omdat de site nog niet beveiligd is met een SSL certificaat (slotje bij je browser url).
📤 Inleveren
- Screenshot van je browser met de PLESK-omgeving en zichtbare domeinnaam/URL.
2 Beveilig het domein met een SSL‑certificaat
Start met het bekijken van je domein in de browser: <studentNummer>.jouw.website
. Let op het slot-icoon in de adresbalk.
Stap 1
Voer jouw domeinnaam in, in je browser. Er kunnen afhankelijk van je browser, computer, virusscanner verschillende dingen gebeuren. Kijk wat je ziet. En kijk ook of er naast de domeinnaam / url in je adresbalk een slotje te zien is. Hoe ziet dat er uit?
Wat was ook alweer een domeinnaam?
Een domeinnaam is het adres van een website dat je intoetst in de browser, zoals: www.google.com
Stap 2
Log in op je PLESK-omgeving en ga naar het onderdeel 'SSL/TLS-certificaten' onder 'Beveiliging'. Hier zie je verschillende mogelijkheden die je hebt om certificaten te installeren. Dit is per beheersysteem verschillend en ligt er aan hoe een beheersysteem is ingericht. Wij maken gebruik van het soort certificaat van 'Let's Encrypt'. Dit is een gratis open source certificaat dat vaak is geïnstalleerd op een beheersysteem (PLESK)
Wat is een certificaat?
Een certificaat op internet is een soort digitaal paspoort voor een website. Het bewijst dat de websiteeen veilige verbinding maakt.
🔒 Bijvoorbeeld:
Als je https://
ziet en een slotje in de adresbalk, dan gebruikt de website een certificaat.
Een certificaat zorgt ervoor dat de verbinding tussen jou en de website veilig is (versleuteld), maar het garandeert niet dat de website zelf te vertrouwen is.
💡 Een nepwebsite (zoals ing-bank-login.xyz
) kan ook gewoon een geldig certificaat hebben en een slotje tonen. Daarom moet je altijd goed naar het adres kijken en alleen websites vertrouwen die je kent of via een betrouwbare link bezoekt.
Stap 3: Klik onder aan de certificatenpagina op ' Installeren ' bij het onderdeel 'Let's Encrypt'
Hierna krijg je opties voor wat je op je domein wilt beveiligen. Het belangrijkste voor nu is de domeinnaam. Maar bijvoorbeeld mail kun je hier ook laten versleutelen met een certificaat.
Stap 4
Klik aan wat je nodig hebt. Je kunt alles aanvinken behalve de 'Wildcard'optie. Hiervoor zijn meerdere handelingen nodig.
Wat is een wildcard?
Een wildcard-optie betekent dat je met één instelling o meerdere variaties in één keer dekt.
Een * staat bij een wildcard voor "alles" of "maakt niet uit wat hier staat".
Stap 5
Bekijk de site nogmaals in je browser (eventueel refreshen) en kijk of je verschil ziet en of het domein is beveiligd.
Stap 6
Maak een screenshot van je browser met hier in de adresbalk waar jou domeinnaam + het beveiligingsslotje goed zichtbaar is. Stuur ook jouw url in.
🧠 Reflectie – SSL-certificaat installeren
- Wat is het doel van een SSL-certificaat?
- Wat verandert er zichtbaar in je browser als een site beveiligd is?
- Wat kan er misgaan als een website géén SSL-certificaat heeft (zoek dit eventueel op)?
- Welk type certificaat heb je gekozen en waarom was de 'Wildcard' optie niet geschikt?
📤 Inleveren
- Lever je reflectie in als .txt of .pdf-bestand.
- Screenshot van de browser met het beveiligde domein (slotje zichtbaar).
- URL van je domein.
3 Maak een FTP‑account aan
Maak via PLESK een FTP-account met zelfgekozen gebruikersnaam en wachtwoord.
Stel de hoofdmap in op de root-directory van je (live) website.
🧠 Reflectie – FTP-account aanmaken
- Wat is het doel van een FTP-account bij het beheren van je website?
- Welke gegevens moet je onthouden of noteren bij het aanmaken van een FTP-account?
📤 Inleveren
- Lever je reflectie in als .txt of .pdf-bestand.
4 FTP-verbinding maken en bestanden plaatsen
⬇️ FTP-client downloaden en installeren
Je mag natuurlijk alle programma's die je fijn vindt gebruiken. In de uitleg gaan we kijken naar de client van FileZilla (zelfde organisatie als FireFox). Dit is een gratis programma dat je hier kunt downloaden:
https://filezilla-project.org/download.php?type=client
! let er op dat je de clientversie gebruikt.
Installeer dit programma op je computer.
🔌FTP-verbinding maken
Nu je de FTP-client hebt geïnstalleerd gaan we een verbinding maken met jouw domein op de server. Om dit te doen heb je 3 gegevens nodig:
- Host (server)
Hier kun je je domeinnaam invoeren: <studentnummer>.jouw.website - Gebruiker
(zoals je deze hebt aangemaakt bij het maken van een ftp-account op de server) - Wachtwoord
(zoals je deze hebt aangemaakt bij het maken van een ftp-account op de server)
Volg onderstaande stappen om een verbinding te maken:
- open FileZilla
- open 'sitebeheer' via:
bestanden -> sitebeheer - klik op 'nieuwe site'
- geef de site een naam in het linker overzichtsscherm
- Voer je host, je gebruikersnaam en wachtwoord in
- klik je op 'verbinden'
Als het goed is, ben je nu ingelogd en zie je de inhoud van je servermap waar je een site kunt plaatsen.
Verwijder de bestanden die je ziet op de server.
Maak een eigen index.html bestand aan op je computer. Maak hier een leuke pagina van met html-code. Plaats deze vervolgens op de server via FTP. Als je FileZilla gebruikt zie je in het linker gedeelte van je scherm, bestanden op jouw computer en rechts die op de server.
Bekijk je nieuwe pagina in je browser door naar je site te gaan!
Mooi, he!?
🧠 Reflectie – FTP-account aanmaken
- Wat kan er gebeuren als je een verkeerde hoofdmap instelt bij je FTP-account?
- Wat zou je een volgende keer anders aanpakken bij het instellen van FTP-toegang?
📤 Inleveren
- URL van jouw domein met de nieuwe indexpagina.
- Lever je reflectie in als .txt of .pdf-bestand.
5 Database aanmaken
Maak in PLESK een nieuwe database én gebruiker aan:
Geef de database de naam: <jouw_studentnummer>-database1
Je ziet de database in het overzicht; open phpMyAdmin daarvoor.
📤 Inleveren
- Screenshot van phpMyAdmin in je browser inclusief adresbalk en database‑naam.
6 Webapplicatie installeren
In de CRUD Challenge heb je een applicatie gemaakt, waarmee geregistreerd kon worden wie te laat in de klas kwam en de reden daarvan. Weet je nog!? Dit ga je nu live zetten op jouw server.
Nu is het tijd om jouw applicatie 'live' te zetten op de server, zodat iedereen via Internet er gebruik van kan maken. ! Hou er rekening mee dat het kan zijn dat je code moet aanpassen om een goede verbinding te maken met de database. Tip: Net als in xampp, kun je als hostname / servername ' localhost ' gebruiken. Inleveren : De url van jouw (werkende) applicatie
✨ Let op: je moet mogelijk de database-connectie in je code aanpassen (bijv. hostname = ‘localhost’).
📤 Inleveren
- URL van je live, werkende applicatie.
7 Test je Kennis
Wat is Plesk?
Plesk is een soort bedieningspaneel voor je website. Je kunt het vergelijken met het dashboard van een auto, maar dan voor je webserver.
👉 Wat kun je ermee doen?
-
Je eigen domeinnaam instellen (zoals www.jouwsite.nl)
-
Bestanden uploaden van je website
-
Een database aanmaken
-
Een SSL-certificaat installeren (voor de 🔒 in je adresbalk)
-
E-mailadressen beheren (zoals info@jouwsite.nl)
🛠️ Plesk maakt het dus makkelijk om je website online te zetten en te beheren, zonder dat je moeilijke servercommando’s hoeft te leren.
Wat doet een SSL‑certificaat en waarom is dat belangrijk?
Een SSL‑certificaat zorgt ervoor dat gegevens tussen bezoeker en website versleuteld zijn.
Je herkent het aan de 🔒 in de adresbalk. Het beschermt tegen afluisteren en verhoogt vertrouwen, maar zegt niets over de betrouwbaarheid van de site zelf.
Wat betekent ‘wildcard’-optie bij certificaten en waarom kies je die niet meteen?
Een wildcard‑certificaat dekt alle subdomeinen (bijv. *.jouw.website). Voor eenvoudige sites heb je die vaak niet nodig, en het vereist extra configuratie, dus kies je meestal alleen jouw domein.
Waarom moet je een FTP‑account aanmaken en waar is dit goed voor?
Met een FTP‑account kun je verbinding maken met de server en bestanden (zoals je website) uploaden of bijwerken. Het is dé manier om jouw code ‘live’ te zetten.
Waarom is het nodig de database-connectie opnieuw in te stellen bij deployment van je CRUD-applicatie?
In je lokale development omgeving gebruik je meestal gebruiker 'root' zonder wachtwoord (lekker makkelijk!).
Op de productieserver moet je de het wachtwoord en liefst ook de gebruikersnaam aanpassen om te voorkomen dat je database makkelijker wordt gehakkeld en dat de informatie in verkeerde handen komt.
CMS
Status: helemaal doorlopen/testn, plaatjes zijn mogelijk niet goed overgenomen?
1 Wat is een CMS?
🎯 Leerdoelen
- Je weet wat een CMS is.
- Je kunt uitleggen wat je met een CMS zoals WordPress kunt doen.
- Je begrijpt waarom veel websites met een CMS gebouwd worden.
💡 Uitleg
CMS staat voor Content Management System. Een CMS is een programma waarmee je op een eenvoudige manier een website kunt maken en beheren.
Je kunt met een CMS internetpagina’s aanmaken, plaatjes toevoegen, navigatiemenu’s maken en zelfs extra functies installeren – allemaal zonder te programmeren.
Een CMS bestaat meestal uit een basispakket (de 'kern') en uitbreidingen. Je kunt bijvoorbeeld thema’s toevoegen om het uiterlijk aan te passen, of plugins om functionaliteit toe te voegen zoals een webshop, contactformulier of nieuwsbrief.
Populaire voorbeelden van CMS-systemen zijn WordPress, Drupal en Joomla.
In deze module leer je werken met het meest gebruikte CMS ter wereld: WordPress.
WordPress is open-source software. Dat betekent dat je het gratis mag gebruiken en aanpassen. Je kunt WordPress zien als een grote doos met Lego-blokken:
- De basisblokken vormen je website: pagina’s, menu’s, afbeeldingen, enzovoort.
- Met uitbreidingen (plugins en thema’s) geef je de site een nieuw uiterlijk, of voeg je functies toe zoals een online winkel.
WordPress maakt het dus mogelijk om heel snel een professionele website te bouwen – zonder dat je technische kennis nodig hebt.
2 WordPress installeren op je eigen laptop
🎯 Leerdoelen
- Je kunt zelfstandig WordPress installeren op je eigen laptop.
- Je kunt een database aanmaken met phpMyAdmin.
- Je begrijpt welke gegevens je nodig hebt tijdens de installatie.
💡 Uitleg
In dit onderdeel ga je een lokale WordPress-website maken op jouw laptop met behulp van XAMPP
. Dit betekent dat je website alleen werkt op jouw eigen laptop. Voor het maken van een WordPress-site zijn een paar stappen nodig. In eerdere modules heb je al met XAMPP gewerkt, dus we gaan ervan uit dat deze al geïnstalleerd is op je computer.
Stap 1 – Database aanmaken
Open phpMyAdmin via localhost/phpmyadmin. Maak een nieuwe database aan. Bedenk zelf een geschikte naam (bijv. wp-jan
).
Stap 2 – WordPress downloaden
Download de laatste versie van WordPress van de officiële site:
https://wordpress.org/download/
Let op: Download het NIET van wordpress.com!
Sla het ZIP-bestand op in je htdocs
-map van XAMPP (meestal: C:\xampp\htdocs
).
🛠️ Opdracht 1 – WordPress map instellen
- Pak het ZIP-bestand uit dat je hebt gedownload.
- Er ontstaat een map met de naam
wordpress
. - Hernoem deze map naar
wp-<jouwnaam>
(vervang <jouwnaam> door jouw eigen naam, zonder spaties!).
Voorbeeld: wp-ayoub
of wp-nina
We gaan nu verder met het installatieproces. Surf in je browser naar: http://localhost/wp-jouwnaam
Tijdens de installatie moet je deze gegevens invullen:
- Naam van de database: de naam die je net hebt aangemaakt
- Gebruikersnaam database:
root
- Wachtwoord database: laat dit veld leeg
- Host database:
localhost
- Tabelvoorvoegsel: laat dit staan zoals het is (
wp_
) - Titel van de site: bijv. “De website van Ayoub”
- Gebruikersnaam en wachtwoord om in te loggen op je WordPress-site
- Je e-mailadres: nodig om je wachtwoord later te herstellen
🧠 Reflectie
- Wat was het makkelijkste onderdeel van deze installatie?
- Wat vond je lastig of verwarrend?
- Wat is volgens jou het voordeel van lokaal werken ten opzichte van een online installatie?
📤 Inleveren
- Maak een lijstje met de gegevens die jij hebt gebruikt tijdens de installatie (zie hierboven).
Sla dit op alsinstallatiegegevens-jouwnaam.pdf
(bijv.installatiegegevens-ayoub.pdf
) en lever die in. - Reflectie met daarin de antwoorden op de drie vragen (txt of PDF).
3 WordPress installatie uitvoeren
🎯 Leerdoelen
- Je kunt het installatieproces van WordPress starten via je browser.
- Je weet hoe je Apache en MySQL moet starten in XAMPP.
- Je kunt inloggen op je eigen WordPress-site via de juiste URL.
💡 Uitleg
Je bent nu klaar om WordPress te installeren. Dit doe je in je browser, maar eerst moet je controleren of de juiste onderdelen van XAMPP actief zijn:
- Zorg dat Apache en MySQL zijn gestart in de XAMPP-console. Ze moeten groen zijn.
Open nu je browser en ga naar:
http://localhost/wp-<jouwnaam>
Voorbeeld: http://localhost/wp-ayoub
Je ziet nu het installatieproces van WordPress in je browser. Lees alles zorgvuldig en vul de gevraagde gegevens correct in. Gebruik hierbij de informatie die je eerder hebt genoteerd (zie opdracht 1).
Na de installatie:
- Je krijgt een bevestiging te zien dat WordPress is geïnstalleerd.
- Je kunt direct inloggen met de gebruikersnaam en het wachtwoord die je tijdens de installatie hebt opgegeven.
- Als je deze link niet meer ziet, kun je inloggen via:
http://localhost/wp-<jouwnaam>/wp-admin
🛠️ Opdracht – Installatie controleren
- Log in op WordPress via
http://localhost/wp-jouwnaam/wp-admin
. - Maak een screenshot van je browser, waarop de WordPress-beheerderspagina zichtbaar is, met jouw naam in de adresbalk.
- Open ook phpMyAdmin en klik op de database die je net hebt aangemaakt.
- Maak een screenshot van de tabellenstructuur van jouw WordPress-database.
📤 Inleveren
inloggen-gelukt-jouwnaam.jpg
: Screenshot van jouw WordPress-dashboard met jouw naam zichtbaar in de adresbalk.phpmyadmin-jouwnaam.jpg
: Screenshot van jouw WordPress-database in phpMyAdmin met tabellen zichtbaar.
4 Frontend en Backend in WordPress
🎯 Leerdoelen
- Je begrijpt het verschil tussen de frontend en backend van een WordPress-site.
- Je weet hoe je kunt inloggen op de backend (beheeromgeving).
- Je kunt schakelen tussen frontend en backend via de admin-balk.
💡 Uitleg
In WordPress werk je in twee verschillende omgevingen:
1. De backend
De backend is het beheergedeelte van je site. Hier kun je onder andere:
- Nieuwe pagina’s aanmaken
- Functies toevoegen via plugins
- Gebruikers beheren
- Thema’s (templates) installeren voor het uiterlijk van je site
Je hebt een account nodig om toegang te krijgen tot de backend. Dat account heb je aangemaakt tijdens de installatie.
De standaard URL om in te loggen op de backend is:
http://sitenaam.nl/wp-admin
Als je lokaal werkt is dit bijvoorbeeld:http://localhost/wp-jouwnaam/wp-admin
2. De frontend
De frontend is de website zoals bezoekers deze zien. Iedereen kan deze omgeving bekijken – je hebt geen wachtwoord nodig, tenzij je dat instelt.
Switchen tussen frontend en backend
Als je bent ingelogd, zie je bovenaan een zwarte balk. Deze admin-balk is zichtbaar op alle pagina’s, zowel in de backend als de frontend.
Met deze balk kun je makkelijk wisselen tussen beide omgevingen.
🔁 Manier 1 – Naar de homepage of het dashboard
- Klik linksboven in de zwarte balk op het icoon naast het WordPress-logo.
- Om naar de homepage te gaan: klik op het huis-icoontje.
- Om naar het dashboard te gaan: klik op het dashboard-icoontje.
🧪 Probeer dit zelf een paar keer:
Wissel tussen de backend en frontend van jouw site met behulp van de zwarte balk.
🧭 Manier 2 – Direct naar het onderdeel dat je wilt bewerken
Als je bijvoorbeeld een pagina bekijkt en je wilt de inhoud wijzigen, kun je via de zwarte balk direct naar de bewerkingspagina in de backend gaan.
Deze functie maakt het snel en makkelijk om onderdelen van je site aan te passen terwijl je ze bekijkt.
Hoe dit precies werkt, kom je later in deze module nog uitgebreid tegen!
🧠 Controlevragen
- Wat is het verschil tussen frontend en backend?
- Waarvoor gebruik je de zwarte admin-balk?
- Waarom is het handig om direct vanuit de frontend naar het bewerkvenster te gaan?
📤 Inleveren
- Antwoord op de controlevragen (pdf of txt).
Welke onderdelen van Wordpress gaan we in deze module gebruiken?
5 Pagina’s maken en aanpassen in WordPress
🎯 Leerdoelen
- Je weet hoe pagina’s werken in WordPress.
- Je kunt pagina’s bekijken en bewerken vanuit de frontend én de backend.
- Je begrijpt het verschil tussen pagina’s in WordPress en losse HTML-bestanden.
💡 Uitleg
Als software developer heb je waarschijnlijk al vaak webpagina’s gemaakt met HTML en CSS. In WordPress kan dat ook, maar het hoeft niet!
In plaats van losse HTML-pagina’s en CSS-bestanden gebruikt WordPress een andere manier. Je maakt en bewerkt pagina’s gewoon via de backend, met een visuele editor. Je hoeft dus geen code te schrijven – al mag dat natuurlijk wel als je wilt!
Belangrijk om te onthouden:
- Je hoeft niet technisch te zijn om een mooie website te maken in WordPress.
- Maar als je wél technische kennis hebt, kun je die gebruiken voor extra aanpassingen.
Frontend ↔ Backend gebruiken
Via de zwarte admin-balk kun je gemakkelijk wisselen tussen de frontend en backend van je site. Zoals je eerder hebt geleerd, kun je dan heen en weer gaan tussen de homepage (frontend) en het dashboard (backend).
Maar soms wil je direct naar een specifieke pagina in de backend, bijvoorbeeld als je een stuk tekst wilt aanpassen op een bepaalde pagina.
Direct bewerken via de frontend
Als je bent ingelogd en je bekijkt een pagina via de frontend, dan zie je bovenaan een zwarte balk. Deze bevat een knop waarmee je direct naar het bewerkvenster van die pagina in de backend kunt gaan.
Dit is handig, want zo hoef je de pagina niet eerst handmatig op te zoeken in het dashboard.
Voorbeeldpagina bij installatie
Bij de installatie van WordPress wordt er automatisch een voorbeeldpagina aangemaakt. Die kun je bekijken via de volgende URL:
http://localhost/wp-<jouw-naam>/voorbeeld-pagina
Bijvoorbeeld: http://localhost/wp-ayoub/voorbeeld-pagina
🛠️ Opdracht – Voorbeeldpagina bekijken en bewerken
- Ga naar
http://localhost/wp-jouwnaam/voorbeeld-pagina
. - Bekijk de pagina zoals een bezoeker deze zou zien.
- Klik op de zwarte balk bovenin op Bewerken om de backend-versie van de pagina te openen.
- Pas de titel van de pagina aan naar bijvoorbeeld: “Welkom op mijn WordPress-site”.
- Pas ook de tekst op de pagina aan (bijvoorbeeld je eigen naam toevoegen).
- Klik op Bijwerken om je aanpassingen op te slaan.
- Bekijk de pagina opnieuw aan de frontend: zijn de wijzigingen zichtbaar?
🧠 Controlevragen
- Wat is het voordeel van werken met WordPress-pagina’s ten opzichte van losse HTML-bestanden?
- Wat vond je makkelijker: bewerken via de frontend of backend? Waarom?
- Welke rol speelt de zwarte admin-balk bij het onderhouden van pagina’s?
📤 Inleveren
- Maak een screenshot van jouw aangepaste voorbeeldpagina in de frontend (met jouw aanpassing zichtbaar).
- Sla het bestand op als
voorbeeldpagina-jouwnaam.jpg
.
6 Opdracht – Standaard pagina aanpassen
🛠️ Opdracht 3 – Voorbeeldpagina aanpassen
- Ga naar de voorbeeldpagina van jouw site:
http://localhost/wp-<jouw-naam>/voorbeeld-pagina
- Klik bovenaan in de zwarte balk op Pagina bewerken.
- Je komt nu in het bewerkingsscherm van de pagina. Klik op de tekst en blokken en vervang de standaardtekst door een introductieverhaal over jezelf als student software developer.
- Pas ook de titel van de pagina aan naar iets origineels, bijvoorbeeld:
“Welkom op mijn portfolio” of “Dit ben ik – Toekomstig developer” - Gebruik de editor en probeer zelf te ontdekken hoe je tekstblokken wijzigt.
💪 Zelf proberen!
Probeer eerst zelf uit te zoeken hoe je de tekst aanpast. Kom je er echt niet uit, kijk dan op internet of vraag hulp.
Vergeet niet op de knop Bijwerken te klikken zodat je wijzigingen worden opgeslagen!
Als je klaar bent, kun je de editor afsluiten door linksboven op het zwart/witte WordPress-logo te klikken.
Ga daarna weer naar:http://localhost/wp-<jouw-naam>/voorbeeld-pagina
Als het goed is zie je daar nu jouw eigen tekst en titel terug!
📤 Inleveren
- Maak een screenshot van de aangepaste pagina in je browser, met de URL zichtbaar waarin jouw naam voorkomt.
- Sla de afbeelding op als:
voorbeeld-pagina-<jouw-naam>.jpg
- Lever dit bestand in via het LMS of per mail.
7 Pagina verder aanpassen
🛠️ Opdracht 4 – Afbeeldingen toevoegen aan je pagina
We gaan de voorbeeldpagina nog mooier maken door afbeeldingen toe te voegen.
- Open je pagina opnieuw via:
http://localhost/wp-<jouw-naam>/voorbeeld-pagina
- Klik bovenaan op Pagina bewerken.
- Voeg minstens drie afbeeldingen toe aan de pagina. Je mag zelf kiezen welke, zolang ze bij jouw introductieverhaal passen.
- Upload afbeeldingen vanaf je computer via de WordPress editor.
📌 Een afbeelding toevoegen in de tekst
Zet je cursor op de plek waar je een afbeelding wilt plaatsen. Klik dan op het pijltje omlaag bij een bestaand blok en kies Inline afbeelding. Selecteer daarna een afbeelding van je computer en voeg deze toe.
🧱 Een nieuw blok maken met een afbeelding
Je kunt ook een nieuw blok toevoegen. Klik op het blauwe plusje onder aan de pagina of tussen bestaande blokken.
Kies dan voor Afbeelding en upload een bestand vanaf je computer.
📤 Inleveren
- Maak een screenshot van je voorbeeldpagina nadat je de drie afbeeldingen hebt toegevoegd.
- Zorg dat de URL zichtbaar is in de screenshot, met daarin jouw naam.
- Sla de afbeelding op als:
voorbeeld-pagina-<jouw-naam>.jpg
- Lever het bestand in via het LMS of mail het naar je docent.
8 Nieuwe pagina’s aanmaken
🛠️ Opdracht 5 – Contact en Homepage aanmaken
Je gaat nu zelf twee nieuwe pagina’s maken:
- Een pagina met de titel Homepage
- Een pagina met de titel Contact
Stap voor stap:
- Zorg dat je bent ingelogd op je site.
- Klik in de zwarte balk bovenin op Nieuw → Pagina.
- Geef de pagina de juiste titel: “Homepage” of “Contact”.
- Voeg minimaal twee tekstblokken toe.
- Voeg daarnaast ook twee andere soorten blokken toe. Dit mogen bijvoorbeeld zijn: een afbeelding, knop, lijst, video, citaat, enzovoort.
- Klik op Publiceren of Bijwerken om de pagina op te slaan.
Herhaal deze stappen voor de tweede pagina.
📤 Inleveren
- Maak een screenshot van elke nieuwe pagina met de URL zichtbaar in de adresbalk.
- Bestandsnamen:
contact-<jouw-naam>.jpg
homepage-<jouw-naam>.jpg
- Lever deze twee afbeeldingen in via het LMS of per mail.
- Stuur ook de URL’s van beide pagina’s mee. Bijvoorbeeld:
http://localhost/wp-jouwnaam/contact
http://localhost/wp-jouwnaam/homepage
9 Site-instellingen en Homepage instellen
🎯 Leerdoelen
- Je weet waar je de algemene instellingen van je WordPress-site kunt vinden.
- Je kunt de homepage van je website instellen via het menu “Lezen”.
- Je begrijpt het verschil tussen de standaard blogweergave en een statische pagina als homepage.
💡 Uitleg
Via de instellingen in de backend kun je veel algemene eigenschappen van je site beheren.
1. Algemeen
Via Instellingen → Algemeen kun je onder andere:
- De titel en ondertitel van je site aanpassen
- De taal van je WordPress-installatie wijzigen
- Het datumformaat en tijdformaat instellen
2. Lezen
Via Instellingen → Lezen kun je:
- Bepalen wat de homepage van je site is
- Instellen of zoekmachines (zoals Google) jouw site mogen indexeren
Homepage instellen
Je hebt nu drie pagina’s aangemaakt: een voorbeeldpagina, een homepage en een contactpagina. Standaard laat WordPress de blogberichten zien op de hoofdpagina van je site. Dat gaan we nu aanpassen.
Als iemand naar jouw hoofdpagina surft (bijvoorbeeld http://localhost/wp-<jouw-naam>/
) wil je natuurlijk dat hij jouw zelfgemaakte Homepage-pagina ziet!
🛠️ Opdracht 6 – Homepage instellen
- Ga naar de backend van je WordPress-site.
- Navigeer naar Instellingen → Lezen.
- Kies bij “Je homepage toont” voor:
Een statische pagina
. - Selecteer bij Homepage jouw zelfgemaakte pagina met de titel “Homepage”.
- Sla je wijzigingen op met de knop Wijzigingen opslaan.
📤 Inleveren
- Surf naar
http://localhost/wp-<jouw-naam>/
en controleer of jouw homepage daar zichtbaar is. - Maak een screenshot van deze pagina, mét zichtbare URL in de adresbalk.
- Sla het bestand op als:
homepage-instelling-<jouw-naam>.jpg
- Lever de afbeelding in.
🛠️ Vervolgopdracht – Zet jouw gemaakte homepage actief
Zorg dat de door jou gemaakte pagina met de titel Homepage (opdracht 5) daadwerkelijk wordt ingesteld als de homepage van jouw site.
Hiervoor gebruik je opnieuw:
- Instellingen → Lezen in de backend
- Selecteer bij “Je homepage toont” de pagina “Homepage”
📤 Inleveren
- Ga naar:
http://localhost/wp-<jouw-naam>/
- Controleer of daar nu jouw eigen gemaakte homepage zichtbaar is.
- Maak een screenshot van deze pagina, met de URL zichtbaar in de adresbalk.
- Sla de afbeelding op als:
homepage-<jouw-naam>.jpg
- Lever het bestand in via het LMS of per e-mail aan je docent.
2 WordPress uitbreiden met een thema
🎯 Leerdoelen
- Je begrijpt wat een WordPress-thema is.
- Je weet hoe je een ander thema kiest en installeert in WordPress.
- Je kunt het uiterlijk van je site aanpassen met een thema.
💡 Uitleg
In de vorige opdracht heb je een WordPress-site gemaakt en drie pagina’s aangemaakt. Misschien vond je de site er nog een beetje saai uitzien. Geen zorgen: daar hebben we thema’s voor!
Het thema bepaalt hoe jouw website eruitziet: het ontwerp, de kleuren, de lettertypes en de lay-out.
Je kunt WordPress zien als een bouwpakket met Lego-blokken. De software zelf is het grote basisblok. Een thema is één van die bouwblokken die je kunt toevoegen om je site mooier en persoonlijker te maken.
Er zijn drie manieren om een thema toe te voegen:
- Je maakt zelf een thema en uploadt het.
- Je koopt een professioneel thema en installeert dat.
- Je kiest een gratis thema uit de thema-bibliotheek binnen WordPress.
Standaard is er al een thema actief als je WordPress installeert. Meestal heet dat bijvoorbeeld Twenty Twenty-Three
of Twenty Twenty-Four
. Ook zijn er vaak al een paar andere thema’s geïnstalleerd, die je meteen kunt activeren.
Zo activeer je een ander thema:
- Log in op de WordPress-backend.
- Ga in het linkermenu naar
Weergave
→Thema's
. - Je ziet een overzicht van de beschikbare thema’s.
- Beweeg je muis over een thema en klik op Activeren.
Je website verandert dan direct van uiterlijk. De indeling verandert, de kleuren kunnen anders zijn, en het lettertype wordt aangepast. Ook worden andere CSS-bestanden gebruikt.
Thema aanpassen met de customizer
Bij het actieve thema zie je vaak een knop Customizer
of Thema aanpassen
. Hiermee kun je het thema verder instellen. Denk aan:
- Je eigen logo of site-icoon toevoegen
- Kleuren en lettertypes aanpassen
- Achtergrondafbeelding kiezen
- Eigen CSS toevoegen (voor gevorderden)
Als je op Nieuwe toevoegen klikt, kom je in een soort themawinkel terecht. Daar kun je zoeken naar gratis thema’s. Dit lijkt een beetje op de App Store of de Play Store op je telefoon. De meeste thema’s zijn gratis en direct te installeren.
🛠️ Opdracht – Thema installeren en aanpassen
- Log in op jouw WordPress-site.
- Ga naar
Weergave
→Thema's
. - Kies een ander standaardthema (bijv. Twenty Twenty-Four) en activeer dit.
- Klik op
Thema aanpassen
en probeer minimaal 3 instellingen te veranderen (kleur, titel, lettertype, etc). - Voeg een nieuw thema toe via de knop
Nieuwe toevoegen
. - Kies een gratis thema dat je mooi vindt en installeer en activeer dit.
🧠 Controlevragen
- Wat is het verschil tussen een thema en een plugin?
- Wat is het voordeel van een customizer in WordPress?
- Hoe kun je jouw site persoonlijker maken met een thema?
📤 Inleveren
- Maak een screenshot van jouw aangepaste homepage met het nieuwe thema.
- Lever ook de controlevragen (.txt of .pdf) in met jouw antwoorden op de drie vragen.
🛠️ Opdracht 2 – Twee thema’s installeren en testen
- Open de backend van je WordPress-website (
http://localhost/wp-<jouw-naam>/wp-admin
). - Ga naar Weergave → Thema's.
- Klik op Nieuwe toevoegen en kies twee gratis thema’s die jij mooi vindt.
- Installeer én activeer deze twee thema’s, één voor één.
- Bekijk steeds je homepage in je browser terwijl het thema actief is.
📤 Inleveren
- Maak twee screenshots van je homepage, telkens met een ander thema actief.
- Op het screenshot moet ook de URL zichtbaar zijn, bijvoorbeeld:
http://localhost/wp-jan/
. - Sla de bestanden op met deze naamstructuur:
homepage-<jouw-naam>-<thema-naam>.jpg
homepage-<jouw-naam>-<thema-naam>.jpg
- Na het maken van de screenshots, activeer je weer het standaardthema Twenty Twenty-One.
🛠️ Opdracht 2 – Twee thema’s installeren en testen
- Open de backend van je WordPress-website (
http://localhost/wp-<jouw-naam>/wp-admin
). - Ga naar Weergave → Thema's.
- Klik op Nieuwe toevoegen en kies twee gratis thema’s die jij mooi vindt.
- Installeer én activeer deze twee thema’s, één voor één.
- Bekijk steeds je homepage in je browser terwijl het thema actief is.
📤 Inleveren
- Maak twee screenshots van je homepage, telkens met een ander thema actief.
- Op het screenshot moet ook de URL zichtbaar zijn, bijvoorbeeld:
http://localhost/wp-jan/
. - Sla de bestanden op met deze naamstructuur:
homepage-<jouw-naam>-<thema-naam>.jpg
homepage-<jouw-naam>-<thema-naam>.jpg
- Na het maken van de screenshots, activeer je weer het standaardthema Twenty Twenty-One.
4 Hoofdnavigatiemenu en extra menu
🎯 Leerdoelen
💡 Uitleg
In WordPress kun je meerdere menu’s aanmaken, bijvoorbeeld één als hoofdmenu en één als apart menu voor andere links (zoals naar je favoriete games of muziek).
🛠️ Opdracht – Maak een hoofdmenu en extra menu
- Ga naar
Weergave
→Menu's
. - Maak een nieuw menu aan en noem dit ‘Mijn hoofdmenu’.
- Voeg de volgende links toe aan dit menu:
- Home
- Contact
- Voorbeeldpagina (of hoe je die zelf genoemd hebt)
- MBO College Amstelland – met een link naar:
https://www.rocva.nl/MBO-onderwijs/MBO-Colleges/MBO-College-Amstelland
- Zorg ervoor dat één of meerdere links inspringen zodat er een uitklapmenu ontstaat. (Bijvoorbeeld: maak ‘Contact’ een submenu van ‘Home’)
- Vink aan dat dit het Hoofdmenu (Primary Menu) is en klik op Menu opslaan.
- Maak daarna een tweede menu aan met een zelfgekozen naam (bijvoorbeeld ‘Favorieten’).
- Voeg hierin minstens 5 externe links toe, bijvoorbeeld naar je favoriete:
- Muziekartiest of band
- Gamesites
- Sportclubs
- Wijs dit tweede menu NIET toe als hoofdmenu.
- Voeg het tweede menu toe op een plek waar jouw thema dat toelaat (bijv. in een widget, footer of zijbalk).
🧠 Controlevragen
- Wat is het voordeel van een submenu?
- Wanneer is het handig om een tweede menu te gebruiken?
- Wat heb je geleerd over het gebruik van externe links?
📤 Inleveren
- Maak een screenshot van de homepage waarop beide menu’s zichtbaar zijn.
- Geef het bestand deze naam:
menus-<jouw-naam>.jpg
- Lever de afbeelding in via de gebruikelijke manier.
5 WordPress uitbreiden met plugins
🎯 Leerdoelen
- Je weet wat een plugin is in WordPress.
- Je kunt zelf een plugin installeren via de zoekfunctie.
- Je begrijpt dat plugins extra functies toevoegen aan je website.
💡 Uitleg
In het vorige onderdeel heb je jouw website in WordPress een nieuw uiterlijk gegeven door een thema te installeren. Nu gaan we kijken naar hoe je je website extra functionaliteit kunt geven met plugins.
Plugins kun je zien als extra Lego-blokken die je aan WordPress toevoegt. Waar een thema vooral gaat over het uiterlijk van je site, voegen plugins functies toe.
Voorbeelden van functies die je met een plugin kunt toevoegen:
- Een webshop (bijv. WooCommerce)
- Een contactformulier
- Een agenda of boekingssysteem
- Zoekmachineoptimalisatie (SEO)
- Beveiliging of back-ups
Net als bij thema’s zijn er drie manieren om plugins toe te voegen aan je WordPress-site:
- Je maakt zelf een plugin en uploadt die
- Je koopt een plugin bij een ontwikkelaar en installeert deze handmatig
- Je zoekt en installeert een plugin via de ingebouwde pluginzoekfunctie
In deze les gebruiken we de derde methode: een plugin zoeken en installeren via de plugin-bibliotheek van WordPress. Dit werkt eigenlijk net als in de App Store of Google Play Store.
Heb je een plugin gevonden die je wilt gebruiken? Dan klik je op ‘Nu installeren’ en daarna op ‘Activeren’. Vaak kun je daarna de instellingen van de plugin aanpassen in het WordPress-menu.
🛠️ Opdracht – Plugin toevoegen
- Log in op je WordPress-dashboard.
- Ga naar
Plugins
→Nieuwe plugin
. - Zoek in de bibliotheek naar een plugin met handige functies, bijvoorbeeld:
- Een formulierplugin zoals WPForms
- Een beveiligingsplugin zoals Wordfence
- Een galerijplugin voor afbeeldingen zoals NextGEN Gallery
- Klik op Installeren en daarna op Activeren.
- Ga naar de instellingen van de plugin en bekijk wat je kunt aanpassen.
🧠 Controlevragen
- Wat is het verschil tussen een thema en een plugin?
- Welke plugin heb jij gekozen en waarom?
- Wat heb je aangepast of ingesteld binnen deze plugin?
📤 Inleveren
- Maak een screenshot van jouw WordPress-dashboard waarop te zien is dat de plugin actief is.
- Lever ook een document in (.txt of .pdf) met jouw antwoorden op de drie reflectievragen.
6 Plugin installeren in WordPress
🎯 Leerdoelen
- Je weet hoe je een plugin installeert en activeert in WordPress.
- Je kunt verschillende soorten plugins herkennen en benoemen.
- Je begrijpt dat je meerdere plugins tegelijk actief kunt hebben.
💡 Uitleg
In WordPress kun je via het menu Plugins
plugins toevoegen, verwijderen of activeren. Plugins zijn uitbreidingen die extra functies aan je site toevoegen, zoals formulieren, een webshop, beveiliging of een fotoalbum.
Zo kom je bij de plugin-instellingen:
- Log in op je WordPress-dashboard.
- Klik in het linker menu op
Plugins
.
Je komt dan op een pagina waar je een overzicht ziet van alle geïnstalleerde plugins. Sommige plugins zijn actief (ingeschakeld), anderen niet. In tegenstelling tot thema’s kun je meerdere plugins tegelijk actief hebben. Meestal gebruik je er zelfs behoorlijk wat.
Standaard zijn er al een of twee plugins geïnstalleerd (zoals Akismet of Hello Dolly), maar die kun je voorlopig negeren.
🔍 Een nieuwe plugin zoeken
Klik op ‘Nieuwe plugin’ om naar de plugin-bibliotheek te gaan. Dit is het zoekscherm waar je duizenden plugins kunt doorzoeken en installeren.
Je kunt zoeken op naam, functie of populair/gewaardeerd. Net als in de App Store kun je zien hoeveel sterren een plugin heeft en hoe vaak deze is geïnstalleerd.
📦 Voorbeelden van soorten plugins:
- 📈 Plugins voor SEO (zoekmachineoptimalisatie)
- 🔐 Plugins voor beveiliging tegen hackers en spam
- 🛒 Plugins om een webwinkel te maken (zoals WooCommerce)
- 📷 Plugins voor fotoalbums en mediagalleries
- 📬 Plugins voor contactformulieren
- 💨 Plugins om je site sneller te maken (bijv. caching, afbeeldingen optimaliseren)
- 📊 Plugins om bezoekersstatistieken bij te houden
- 🔁 Plugins voor automatische back-ups van je website
- 🤝 Plugins voor sociale media (Snapchat, Instagram, Facebook, enz.)
De meeste plugins die je vindt in deze bibliotheek zijn gratis te gebruiken. Voor sommige geavanceerde functies moet je betalen voor een ‘Pro’-versie.
🛠️ Opdracht – Installeer en activeer een plugin
- Log in op je WordPress-dashboard.
- Ga naar
Plugins
→Nieuwe plugin
. - Zoek naar een plugin die jou handig lijkt, bijvoorbeeld:
- WPForms – om formulieren toe te voegen
- Wordfence – voor extra beveiliging
- Yoast SEO – om beter gevonden te worden in Google
- Klik op Installeren en daarna op Activeren.
- Ga na het activeren naar de instellingen van de plugin en bekijk wat je kunt aanpassen.
🧠 Controlevragen
- Welke plugin heb je gekozen en waarom?
- Wat voor functies voegt deze plugin toe aan jouw site?
- Heb je iets aangepast in de instellingen van de plugin?
📤 Inleveren
- Maak een screenshot van jouw pluginpagina waarop je plugin zichtbaar en geactiveerd is.
- Noem het bestand:
plugin-.jpg
- Lever ook een kort document (.txt of .pdf) in met je antwoorden op de drie controlevragen.
7 Het installeren van een plugin – Classic Editor
🎯 Leerdoelen
- Je weet hoe je de editor van WordPress kunt aanpassen met een plugin.
- Je kunt de Classic Editor installeren en activeren.
- Je kunt verschillen benoemen tussen de standaardeditor (Gutenberg) en de Classic Editor.
💡 Uitleg
Als je pagina’s maakt in WordPress, gebruik je standaard de Gutenberg-editor. Deze editor werkt met blokken: elk stukje tekst, afbeelding of knop is een apart blok dat je kunt verslepen of aanpassen.
Sommige gebruikers vinden deze editor handig, anderen vinden het juist onoverzichtelijk. Gelukkig kun je dit aanpassen! Je kunt namelijk via een plugin overstappen op de oude Classic Editor.
Classic Editor is een plugin die de oude WordPress-editor terugbrengt. Deze werkt meer zoals Microsoft Word: je hebt een eenvoudige werkbalk bovenaan en typt alles in één veld.
🛠️ Opdracht – Classic Editor installeren en vergelijken
- Ga naar de voorkant van je site (de homepage).
- Klik bovenin op ‘Pagina bewerken’.
- Kijk goed naar hoe de editor eruitziet. Voeg eventueel wat tekst toe.
- Ga in de backend naar
Plugins
→Nieuwe plugin
. - Zoek op ‘Classic Editor’, installeer en activeer de plugin.
- Ga opnieuw naar je homepage en klik weer op ‘Pagina bewerken’.
- Je ziet nu een andere editor. Pas iets aan en klik op Bijwerken.
👉 Je kunt op elk moment terugschakelen door de plugin uit te zetten via de pluginpagina.
🧠 Controlevragen – Vergelijk de editors
- Beschrijf minimaal drie verschillen tussen de standaardeditor en de Classic Editor.
- Welke editor heeft jouw voorkeur? Waarom?
📤 Inleveren
- Lever een korte tekst (.txt of .pdf) in waarin je de drie verschillen beschrijft en aangeeft welke editor jij fijner vindt.
- Maak een screenshot van de Classic Editor in je browser.
Bestandsnaam:editor-<jouw-naam>.jpg
⭐ Bonusopdracht (2 extra punten)
- Zoek in het plugin-overzicht naar een andere editor (bijvoorbeeld Elementor of WPBakery Page Builder).
- Installeer en activeer deze nieuwe editor. Zet de ‘Classic Editor’ plugin eerst uit.
- Probeer deze nieuwe editor uit door een pagina aan te passen.
🎯 Bonus Reflectie
- Wat zijn de voor- en nadelen van deze nieuwe editor?
- Welke editor is nu je favoriet en waarom?
8 Formulieren maken met WPForms
🎯 Leerdoelen
- Je weet hoe je WPForms installeert en activeert.
- Je kunt een formulier maken met verschillende soorten invoervelden.
- Je kunt een formulier invoegen op een pagina en opnemen in het menu.
💡 Uitleg
Een formulier op je website is handig om bezoekers contact met je op te laten nemen. Je kunt hiermee gegevens verzamelen, vragen laten stellen, of zelfs aanmeldingen verwerken.
Met de plugin WPForms kun je eenvoudig formulieren bouwen via een visuele interface. Je hoeft niet te programmeren: je sleept de velden naar de juiste plek.
Zo installeer je WPForms:
- Ga in de backend naar
Plugins
→Nieuwe plugin
. - Zoek naar WPForms.
- Klik op Installeren en daarna op Activeren.
Na het activeren verschijnt er een nieuwe optie WPForms
in het linker menu. Ook krijg je een introductiescherm met een uitlegvideo. Bekijk deze video voor je verder gaat.
🛠️ Opdracht – Maak een contactformulier
- Ga naar
WPForms
→Nieuwe toevoegen
. - Kies Leeg formulier of begin met een Contactformulier-template.
- Voeg de volgende velden toe aan je formulier:
- Voornaam (verplicht)
- Achternaam (verplicht)
- Straatnaam
- Huisnummer
- Emailadres (verplicht)
- Telefoonnummer (verplicht)
- Hoe mogen we contact met u opnemen?
Meerkeuze: Per telefoon / Per email - Wanneer mogen we contact opnemen?
Dropdown: 's ochtends / 's middags / 's avonds - Vraag die u wilt stellen
Tekstvak (verplicht)
- Sla het formulier op. Kopieer de shortcode die je ziet (bijv.
[wpforms id="123"]
). - Maak een nieuwe pagina aan met de titel Contact.
- Plak de shortcode in deze pagina en sla op.
- Test de pagina en controleer of je formulier correct wordt weergegeven.
- Ga naar
Weergave
→Menu’s
en voeg je nieuwe Contactpagina toe aan het hoofdmenu.
🧠 Controlevragen
- Welke soorten invoervelden heb je gebruikt?
- Wat vond je van het werken met WPForms?
- Wanneer zou je dit soort formulieren in het echt kunnen gebruiken?
📤 Inleveren
- Maak een screenshot van jouw Contactpagina met het formulier zichtbaar en de URL van de pagina in beeld.
- Noem het bestand:
contactformulier-<jouw-naam>.jpg
- Lever ook een document in (.txt of .pdf) waarin je de drie controlevragen hierboven beantwoordt.
9 Project: WordPress-site voor Vakantiepark ‘De Eekhoorn’
🎯 Leerdoelen
- Je kunt zelfstandig een WordPress-site installeren op een eigen serveromgeving.
- Je kunt een site ontwerpen met een passend thema en aangepaste huisstijl.
- Je kunt verschillende soorten plugins gebruiken voor formulieren, galerijen, SEO en veiligheid.
- Je kunt een complete website opleveren op basis van wensen van een opdrachtgever.
💡 Projectbeschrijving
Je bent net opgeleid tot WordPress-ontwikkelaar en krijgt meteen je eerste opdracht: het bouwen van een website voor het Drentse vakantiepark De Eekhoorn. De site wordt geïnstalleerd op jouw eigen PLESK-serveromgeving (gebruik hiervoor een aparte map: vakantiewoning
en maak een nieuwe database aan).
📄 Te bouwen pagina’s:
- Homepage – algemene info over het vakantiepark
- Reserveringsaanvraagpagina – met een formulier voor boekingsverzoeken
- Informatiepagina – tekst en afbeeldingen over het park
- Type woningen – drie woningtypes met beschrijving en fotogalerij of -slider
🛠️ Projecteisen
🎨 Design
- Gebruik een gratis thema uit de WordPress-theme store dat responsive is.
- Pas dit thema aan via de Customizer.
- Gebruik de kleuren van de Drentse vlag: rood, wit, zwart.
- Zorg dat het logo op alle schermgroottes zichtbaar blijft.
📝 Reserveringsformulier (op aparte pagina)
- Naam (verplicht)
- Adresvelden
- Emailadres (verplicht)
- Telefoonnummer (verplicht)
- Gewenste woning (selectbox)
- Aankomstdag (tekstveld, verplicht)
- Aantal weken (min 1 – max 4)
- Aanvullende opmerkingen
Kies een gratis formulierenplugin uit de WordPress-plugin store (bijv. WPForms). Zorg dat het formulier werkt en verzonden wordt naar jouw studenten-email.
🖼️ Foto’s en woningtypes
- Gebruik een gallery- of sliderplugin om de drie woningtypes aantrekkelijk te presenteren.
- Zorg voor een goede opmaak en duidelijke beschrijvingen.
🔒 Veiligheid
- Installeer een gratis beveiligingsplugin (bijv. Wordfence of All In One WP Security).
🔍 SEO
- Installeer Yoast SEO (gratis versie) voor zoekmachineoptimalisatie.
📱 Navigatie en menu’s
- Zorg voor een duidelijk navigatiemenu dat goed werkt op mobiel en desktop.
- Alle pagina’s moeten via het menu bereikbaar zijn.
📦 Gebruik klantmateriaal
- Gebruik de teksten en afbeeldingen die door de klant zijn aangeleverd.
- Download hier het materiaal
📤 Inleveren
- Controleer of alle pagina’s, plugins en vormgevingseisen zijn uitgevoerd.
- Lever de url van jouw site in.
- Vraag een eindgesprek aan waarin je jouw site presenteert.
- In het gesprek vertel je:
- Welke plugins je hebt geïnstalleerd
- Hoe je de site hebt gestyled
- Hoe je met het klantmateriaal hebt gewerkt
✅ Tip: Lees de opdracht nog één keer goed door voordat je de site inlevert.
Yii Introduction
1 Intro - Wat is Yii?
In deze les gaan we leren wat een framework is en waarom we Yii gaan leren.
We leren verder wat MVC en CRUD is en wat heeft dat te maken heeft met een framework.
Voor het examen moet je een webapplicatie bouwen.
Je moet zelf weten hoe je dat doet. De meeste studenten kiezen voor PHP. Waarom? Het is relatief eenvoudig en de meeste web applicaties zijn ontwikkeld met PHP (bron).
Veel websites lijken op elkaar en doen vaak dezelfde dingen. Ze maken een verbinding naar de database, laten gegevens zien, je kunt aanloggen, je kunt soms gegevens veranderen en ga zo maar door.
Om niet telkens al deze 'standaard' zaken van 'scratch' af aan te moeten bouwen zijn er zogenaamde frameworks ontwikkeld. Elk framework is eigenlijk een verzamelingen bouwblokken die je telkens op nieuw kunt gebruiken voor jouw website. Alle frameworks zijn net een beetje anders, maar er zijn ook veel overeenkomsten.
Wat zijn belangrijke zaken als je voor een framework kiest:
- Wordt het framework actief onderhouden; bestaat het al wat langer? Je wilt niet in iets gaan investeren dat volgend jaar misschien niet meer bestaat.
- Hoe moeilijk is het om een framework te leren; wat is de complexiteit?
- Hoe snel kun je iets ontwikkelen met het framework?
- Hoe flexibel is een framework; kun je er echt alles mee maken?
Bij punt 3 en 4 is het vaak het een of het ander. Of je kunt heel snel iets bouwen en je bent niet zo flexibel, of je kunt er eigenlijk alles mee ontwikkelen maar het kost veel tijd om dat te doen.
Bijvoorbeeld: PHP is super flexibel je kunt er echt alles mee ontwikkelen, het Laravel framework is ook redelijk flexibel, het Yii framework is iets minder flexibel en als je naar bijvoorbeeld WordPress kijkt (wat je ook als een soort framework zou kunnen zien), dan is dat het minst flexibel. Aan de andere kant kun je met WordPress heel snel een site maken, je bent alleen een beetje beperkt in de functionaliteiten.
❓Waarom Yii?
Laravel is het meest gebruikte PHP-framework. Yii staat in de meeste lijstjes ongeveer op plaats 7. Dat komt, omdat je weliswaar "snel even wat kan bouwen", maar je kunt het vrij lastig alles precies zo maken als jij het wilt. Het is is minder flexibel en om het precies zo te krijgen wilt dan moet je meer moeite doen. Als je straks een project maakt dan kun je waarschijnlijk ongeveer 70%-80% van je code maken met Yii, daarvoor hoef je heel weinig te programmeren en heb je tijd om je te storten op de overige 20%-30%. De projecten en examens die jullie gaan doen lenen zich goed om met Yii te maken. Je bent namelijk redelijk vrij in het ontwerp en kunt dus de 'Yii-manier' aanhouden.
Maar wat dan als ik later verder wil met (bijvoorbeeld) Laravel? Dat kan en Yii en Laravel hebben dezelfde opzet. Ze werken beiden volgens het MVC principe. Je zult in Laravel dus veel dingen terugvinden die je in Yii hebt geleerd.
MVC
MVC, wat is dat? MVC staat voor Model, View en Controller. Deze drie-deling wordt gemaakt in je code, zodat je eenvoudiger code kunt terugvinden.
Model | Hierin staat waar de verbinding tussen jouw code en de database beschreven |
View | Dit is de front-end en is vooral HTML/CSS (bootstrap) met hier een daar een 'vleugje' PHP |
Control | Dit is waar je bepaald wat er gebeurt, als je op een knop drukt ergens dan wordt de code uit de bijbehorende control uitgevoerd. |
In een plaatje ziet dat er als volgt uit. De gebruiker doet wat en stuurt daarmee een verzoek (request) naar de juiste controller. De controller 'overlegt' met het model als er iets met data moet gebeuren en het resultaat wordt via de view aan de gebruiker getoond.
In de introductie van deze module (workshop) komen deze begrippen terug. Als het nu allemaal nog wat onduidelijk is, geen probleem we gaan er mee aan de slag en zullen snel een gevoel krijgen wat MVC precies is en hoe het werkt.
https://www.youtube.com/watch?v=FCkDEHWDATI
CRUD?
Nog even....waar staat CRUD ook alweer voor? CRUD staat voor:
Create | ➕ Nieuwe toevoegen |
Read | 📄 Bekijken / lezen |
Update | ✏️ Bewerken |
Delete | 🗑️ Verwijderen |
In een CRUD-applicatie kun je dus gegevens aanmaken (create), lezen (read), bewerken (update) en verwijderen (delete).
Voor jouw examen moet je minimaal een CRUD kunnen maken.
Yii heeft een CRUD-generator en je kan zonder te coderen een standaard CRUD-applicatie maken. Super handig dus voor het examen. In de volgende les gaan we hier gelijk mee aan de slag.
🧠 Quizvragen
- Wat is een framework en waarom zou je het gebruiken bij het maken van een webapplicatie?
Leg in je eigen woorden uit wat een framework is en wat het voordeel is ten opzichte van alles zelf programmeren. - Wat zijn volgens de tekst belangrijke vragen die je moet stellen voordat je kiest voor een bepaald framework?
Noem minstens twee overwegingen en leg kort uit waarom die belangrijk zijn. - Wat is volgens de tekst het verschil tussen Laravel en Yii?
Leg uit in welk opzicht Yii sneller is dan Laravel, maar ook waar je tegenaan zou kunnen lopen. - Wat betekenen de letters M, V en C in MVC
Beschrijf per onderdeel kort de rol die het speelt binnen een webapplicatie. - Hoe werken Model, View en Controller samen?
Beschrijf het proces dat plaatsvindt als een gebruiker op een knop drukt. - Wat betekent CRUD en wat moet je hierover kunnen voor het examen?
Noem alle vier onderdelen van CRUD en leg uit waarom dit belangrijk is voor je examenproject. - Waarom is Yii een goede keuze voor het examenproject?
Noem minstens twee redenen waarom Yii goed past bij de opdrachten die je moet maken.
📤 Inleveren
- Beantwoord de vragen en lever dit in als .txt of .pdf-bestand.
(llet op dit is een goede voorbereiding op de kennis-check)
2 Installation Yii
In de komende paar opdrachten gaan we alles klaarmaken en installeren voor het werken met Yii. Aan het eind van de opdracht 4 heb je volledig werkende Yii CRUD-applicatie.
Een CRUD-applicatie is een applicatie waarmee je records kunt aanmaken (Create), records kunt lezen (Read), records kunt aanpassen (Update) en records kunt verwijderen (Delete).
We gaan drie stappen doen om een werkende web app te maken:
- installeren van alle software
- maken van een eenvoudige database
- generen van code
In drie stappen hebben we straks een werkende web app in PHP gemaakt.
Voordat je met deze les begint weet je hoe je met phpMyAdmin (of een andere tool) een database kunt maken en hoe je een .sql file kan importeren. Ook heb je XAMPP ge nstalleerd.
💾Installatie
De installatie kent een aantal stappen. Hieronder zijn de 5 stappen beschreven die je moet uitvoeren om tot een succesvolle Yii installatie te komen.
👉stap 1 - XAMPP
Je hebt XAMPP ge nstalleerd. Voor Yii hebben dit nodig, omdat we een database gaan gebruiken.
Heb je nog geen XAMPP of werkt die niet meer dan kun je hier lezen hoe je XAMPP kan installeren.
👉stap 2 -Composer
Zorg er voor dat je composer hebt ge nstalleerd. Composer is de installer van de WEB tools.
Uitleg, wat is Composer?
Als we een framework als Yii of Laravel gaan gebruiken dan installeren we eigenlijk een hele grote doos met allemaal bouwblokken. Deze blokken moeten allemaal samen werken en zijn vaak afhankelijk van elkaar. De blokken worden door verschillende mensen ontwikkeld en op n of andere manier moet er voor worden gezorgd dat de juisten blokken zijn ge nstalleerd. Hiervoor dient Composer. Composer is als het ware de installer van PHP tools, deze worden vaak libraries of packages genoemd. Librabries zijn dan de blokken functionaliteit die je kunt gebruiken om een programma te maken.
Let op: check goed of de installatie errors/warnings geeft. Zijn er errors, lees deze dan goed en los de issues met behulp van ChatGPT op!
Tip: Zorg dat XAMPP al in ge nstalleerd voordat je composer installeert; composer heeft namelijk de locatie van php.exe nodig.
In deze korte video wordt getoond hoe je Composer kunt installeren:
👉stap 3 - Create new yii Project
We maken het Yii project world aan.
Je hoeft niet zelf een map/folder aan te maken. Dit doet composer voor jou. Zorg ervoor dat je in de terminal in de parent-folder (in de folder/map waar je nu staat) bent.
Vul de volgende code in de terminal:
composer create-project --prefer-dist yiisoft/yii2-app-basic world
Dit commando maakt een folder aan met de naam world. Dit is je nieuwe Yii project folder (er staan honderden bestanden in).
⚠️Error, warning ?
Let op, check of je errors en of warnings krijgt! Zie je die, probeer die dan met behulp van ChatGPT op te lossen!
Extra uitleg: bij sommige installaties van XAMPP staan bepaalde extensies niet aan. Zo staat bijvoorbeeld de ZIP extensie soms uit in de PHP config (XAMPP, php.ini). Vraag chatgpt om dit op te lossen.
Als je opnieuw wilt beginnen moet je eerst je oude foutieve installatie verwijderen (in dit geval de map "world"). Doe dit vanuit de file explorer. |
Let op dat het nieuwe Yii project wordt gemaakt in de folder waarin je de cmd box opent. Stel je wilt je jouw nieuwe project op je Desktop maken dan open je een cmd box en je tikt het commando cd Desktop
in. Voer dan het composer commando uit (zoals hierboven aangegeven) en het nieuwe Yii project zal op je Desktop worden gemaakt.
👉stap 4 - Start Development Server
yii heeft een ingebouwde php server als je die opstart dan draait jouw website op http://localhost:8080/
Let wel dat je XAMPP ook blijft draaien voor je database.
In VSC open je jouw Yii project en daarna open je een nieuwe terminal.
In de terminal type je dan het commando in:
php yii serve
De Yii webserver draait nu. Ga naar je browser en controleer of op je via localhost:8080 jouw nieuwe Yii project ziet.
Wil je cmd box gebruiken of lukt dit niet. Kijk dan naar de instructiefilm (Koppelingen naar een externe site.)
👉stap 5 - Configure web.php
We moeten nu nog het een en ander configureren in Yii. We willen dat Yii zoveel mogelijk voor ons regelt. Om te beginnen mag Yii de routing regelen (dit wordt uitgelegd in de volgende les ).
Open config/web.php - en zet het gedeelte dat urlmanager heet, uit commentaar (uncomment prettyURL). Het moet er als volgt uitzien (ongeveer op regel 50 van config/web.php).
'urlManager' => [
'enablePrettyUrl' => true,
'showScriptName' => false,
'rules' => [
],
],
Dit is een instelling die de routing (waarover later meer) eenvoudiger maakt.
👉stap 6 - Database
Let er op dat je database goed is gedefinieerd en dat je ook de relaties heb vastgelegd. Dat kun je doen met phpMyAdmin . De ingebouwde Yii CRUD-generator werkt alleen goed als de database en de relaties goed zijn vastgelegd.
Maak de database world en importeer deze file: https://www.roc.ovh/attachments/22
Lukt niet of weet je niet precies hoe je een database moet importeren? In deze les staat beschreven hoe je deze database kunt installeren. In deze les staat de SQL-file world.sql waarmee je de database World kan maken.
We gaan Yii vertellen welke database er moet worden gebruikt.
We openen de file config/db.php en zetten daar het volgende in:
return [
'class' => 'yii\db\Connection',
'dsn' => 'mysql:host=127.0.0.1;dbname=world',
'username' => 'root',
'password' => '',
'charset' => 'utf8',
];
Let op dat je geen localhost gebruikt om naar je database te verwijzen. Gebruik 127.0.0.1.
👉stap 7- Klaar?
Klaar? Dan moeten we nog even testen of alles werkt.
Je had al gezien dat je een leeg Yii project hebt, ga nu naar: http://localhost:8080/gii
Jouw scherm ziet er ongeveer zo uit:
Maak een screen shot van jouw hele scherm met browser en lever deze in.
📤 Inleveren
- Screenshot van Yii waarin je http://localhost:8080/gii laat zien. Dit is de Model en Crud generator die we in de voglende stap gaan gebruiken.
3 CRUD aanmaken
🎯 Leerdoelen
- Je kunt met de Gii CRUD Generator een complete CRUD maken voor een databasetabel.
- Je begrijpt dat je eerst een model moet genereren voordat je een CRUD kunt maken.
⭐CRUD
We gaan een CRUD maken en met Yii is dat heel makkelijk.
We moeten eerst een verbiding met de database maken. Weet je nog welke letter van MVC daar ook alweer voor stond?
Yep, de M van Model. Het model beschrijft hoe jouw Yii applicatie een verbinding met de database kan maken. We gaan dus een Model maken.
👉 Stap 1 - models maken
We gaan opnieuw naar de component builder, open http://localhost:8080/gii/model
Klik links op 'Model Generator' en type de naam van de databasetabel country in:
De naam van het model wordt automatisch aangemaakt Country . Let op dat de 'Model Class Name' met een hoofdletter begint; kijk goed naar het voorbeeld. De naam van een class (oop) wordt altijd met een hoofdletter geschreven.
Druk onderaan op de pagina op preview , Yii laat nu zien welke file hij gaan aanmaken voor je. Druk op generate om de file te maken.
De file model/country is nu aangemaakt, we gaan later meer in op de inhoud van deze file. Wat voor nu belangrijk is om te onthouden is dat de model/country.php file de verbinding is tussen de tabel country en Yii. Elke keer als Yii informatie uit de country tabel nodig heeft dan gebruikt Yii de model/country.php file
Omdat er vanuit de country tabel wordt verwezen naar de andere twee tabellen, City en Countrylanguage maak je nog twee modellen van deze twee tabellen.
✅Controleer de model folder en als het klopt (let op de hoofdletters!) ga dan niet door.
In je model directory (folder) heb je nu dus de volgende files staan
City.php
ContactForm.php
Country.php
Countrylanguage.php
LoginForm.php
User.php
👉 Stap 2 - CRUD maken
We gaan de complete CRUD maken.
Ga terug naar de component builder.
Klik links op 'CRUD Generator' en type het volgende in:
Let goed op de hoofdletters, deze zijn belangrijk.
Het View path wordt leeg gelaten, daar kan Yii zelf iets voor kiezen.
Druk op preview, je ziet 8 files die klaar staan om te worden aangemaakt.
Druk op generate om de files aan te maken.
Controller
In de directory controllers staat een file CountryController.php. Dit is de controller van de country CRUD. Al het denkwerk dat nodig is om de country CRUD aan te sturen zit in de CountryController.php file.
View
In de views/country directory staan de views. De index.php is de standaard view en deze file bevat de (voornamelijk HTML code) om de pagina weer te geven.
Weten we nog waar de controller en view ook alweer vandaan komen? Het Framework is gebouwd volgens de MVC-architectuur. In stap 1 hebben we het model gemaakt en in deze 2de stap hebben we de view en controller gemaakt.
De controller is waar alle verzoeken van de gebruiker naar toe gaan. De view is de presentatielaag met voornamelijk HTML, CSS, en JavaScript. En in het model wordt de verbinding met de database gemaakt.
Klaar ?
Ga naar http://localhost:8080/country
Je hebt een CRUD van Country gemaakt, compleet met search en sort-functionaliteiten. Je hebt ook een mooie pagina selector waarmee je daar de verschillende pagina's kan navigeren. Je kunt country's lezen/tonen, aanpassen, verwijderen en aanpassen. Probeer het maar! Wees niet bang om de database 'kapot' te maken, want je kunt in een paar tellen de database opnieuw importeren.
In de volgende lessen gaan we de automatisch gebouwde applicatie stap-voor-stap aanpassen.
Voor nu kan je trots zijn op je eerste (?) web CRUD applicatie.
Extra hulp met Filmpje
Niet gelukt? Kijk in dit filmpje nog een keer alle stappen door: Instructie Yii - les1
💡 Uitleg
Je hebt al een CRUD gemaakt voor de tabel country
. Nu ga je hetzelfde doen voor de tabellen city
en countrylanguage
.
Denk eraan: je moet eerst de modellen genereren voor deze twee tabellen met de Model Generator, voordat je de CRUD maakt.
🛠️ Opdracht
- Open de Model Generator op http://localhost:8080/gii/model
- Maak het model voor de tabel
city
. - Maak het model voor de tabel
countrylanguage
. - Open daarna de CRUD Generator op http://localhost:8080/gii/crud
- Genereer een CRUD voor
City
. - Genereer een CRUD voor
Countrylanguage
.
Let goed op de hoofdletters bij het invullen van de modelnamen!
Controleer op
of de CRUD werkt.
GIT
"Meester, gisteren werkje het nog en ik heb niets gedaan?"
Bij Yii loop je soms vast. Je maakt wijzigen in een door het framework gemaakte files. Soms werkt er opeens niets meer (echt dat gebeurt iedereen!).
Met GIT kun je ervoor zorgen dat je steeds een werkende versie opslaat. Werkt het dan niet meer, dan kun je terug naar de vorige werkende versie.
Wert GIT nog niet in jouw VCS? Hier staat hoe je GIT in VCS kunt 'aanzetten'.
🧠 Reflectie
- Waarom moet je eerst een model aanmaken voordat je een CRUD kunt genereren?
- In welke folder(s) worden er bestanden aangemaakt door de model-generator?
- In welke folder(s) worden er bestanden aangemaakt door de CRUD-generator?
📤 Inleveren
- Maak een screenshot van
http://localhost:8080/city
waarop de CRUD werkt. - Maak een screenshot van
http://localhost:8080/countrylanguage
waarop de CRUD werkt.
4 View aanpassen
🛠️ Opdracht - deel 1
Zorg eerst dat, nu alles nog werkt, je met GIT een commit uitvoert. Je kan dan altijd terug als je wat 'kappot' maakt.
Ga in de code-editor (VSC) naar de map views en probeer te vinden waar het overzicht Countries is gemaakt.
Haal code weg zodat de kolom Surface Area niet meer wordt getoond.
Probeer maar wat, als je de boel 'kappot' maakt aan ga je met behulp van GIT naar de vorige versie.
🛠️ Opdracht - deel 2
Kun je de in dezelfde view de groene knop 'Create Country' verplaatsen en onderaan de pagina plaatsen?
Dus het moet er zo uit te komen zien:
🎯 Resultaat
Jouw country overzicht ziet er dus zo uit:
📤 Inleveren
- Lever een compleet screenshot in van de country read page (Grid View; zoals plaatsje hierboven met het rode kruis).
- Lever een compleet screenshot in van de read page (Grid View) van city
- Lever een compleet screenshot in van de read page (Grid View) van countrylanguage
- Lever het (aangepaste) bestand views/country/index.php in - noem dit bestand jouw-naam-index.php
5 Routing in Yii
🎯 Leerdoelen
- Je weet wat routing is in het algemeen.
- Je begrijpt hoe routing werkt binnen Yii.
- Je kunt URL’s analyseren en begrijpen hoe ze naar controllers en acties verwijzen.
💡 Uitleg
Wat is routing?
Routing is de manier waarop een webserver en je programma bepalen welke pagina moet worden. Kijk maar eens goed naar de URL in je browser: deze bestaat uit verschillende onderdelen.
Onderdeel | Wat is het? | Uitleg |
---|---|---|
Scheme | Protocol | Bepaalt hoe de informatie wordt verzonden (zoals http, https, ftp...) |
Domeinnaam | Domein | Verwijst naar een server of groep servers. |
Path | Bestandspad | Verwijst naar het bestand dat de webserver moet uitvoeren. |
Parameters | Variabelen | Sturen informatie mee naar de server (zoals bij formulieren). |
Anchor | Paginaanker | Springt naar een specifiek onderdeel binnen een pagina. |
Voorbeeld-URL: https://www.roc.ovh/link/302#bkmrk-nog-een-keer-in-sche
Bij een simpele PHP-site zonder framework komt het pad overeen met de bestandslocatie op je computer.
https://localhost/ opgave1/uitslag/index.php
Dan wordt de file
c:\xampp\htdocs\opgave1\uitslag\index.ph
Wat is de document-root van de webserver?
De document root van de webserver is waar de webserver al zijn bestanden kan vinden en waar die heen gaat als je alleen de hostname gebruikt.
c:\xampp\htdocs wordt ook wel de docuemnt root van de webserver genoemd omdat:
https://localhost verwijst naar c:\xampp\htdocs (in een standaard geintalleerde XAMPP omgeving).
Routing bij frameworks zoals Yii
Frameworks zoals Yii gebruiken een ander soort routing. De URL wordt niet direct vertaald naar een bestand, maar naar een controller en een actie (methode).
Voorbeeld:
http://localhost:8080/country/index
De URL hierboven verwijst naar:
De controller |
country in ⟶ |
De actie |
index in ⟶ methode |
De standaardregels in Yii:
- Het eerste deel van het pad wordt omgezet naar een controller. Elk woord begint met een hoofdletter. Een streepje (
-
) betekent een nieuw woord. - Het tweede deel van het pad wordt een methode (functie in de controller), voorafgegaan door
action
, en met dezelfde schrijfwijze als hierboven.
Voorbeelden
Pad | Controller | Actie |
---|---|---|
/kaart/overzicht | KaartController | actionOverzicht() |
/klas-lokaal/overzicht | KlasLokaalController | actionOverzicht() |
/klas-lokaal/stoel-maat | KlasLokaalController | actionStoelMaat() |
/klas-lokaal/index | KlasLokaalController | actionIndex() |
/klas-lokaal | KlasLokaalController | actionIndex() |
Als het tweede deel ontbreekt, wordt automatisch actionIndex()
gebruikt.
🛠️ Opdracht – Hello World!
We gaan in onze World-applicatie oefenen met routing.
- Open
CountryController.php
in de mapcontrollers
. - Voeg daarin de volgende methode toe:
public function actionHello() {
echo "Hello World!";
exit;
}
- Sla het bestand op.
- Bedenk: welke URL moet je nu gebruiken om deze functie aan te roepen?
- Open je browser en test de URL. Als het goed is zie je:
✅ Controle
- Is de tekst
Hello World!
zichtbaar in je browser?
📤 Inleveren
- Maak een screenshot van je browser waarop Hello World! zichtbaar is en waarin tevens de URL zichtbaar is.
Routing met een parameter
We gaan een nieuwe controller maken en oefenen met routing waarbij een parameter wordt doorgegeven via de URL.
- Maak een nieuwe file aan in de map
controllers
met de naamExampleController.php
. - Plaats hierin de volgende code, maar vervang de naam Ayoub op beide plekken door jouw eigen naam:
<?php
namespace app\controllers;
use Yii;
use yii\web\Controller;
/**
* ExampleController – voorbeeldcode voor routing.
* Code door [Jouw Naam]
*/
class ExampleController extends Controller
{
public function actionSay($message = '')
{
echo "Hello $message";
exit;
}
}
- Sla het bestand op.
- Open je browser en ga naar de juiste URL om
actionSay()
uit te voeren. Je gebruikt hiervoor:
http://localhost:8080/example/say
Je ziet nu als het goed is: Hello
Kun je via de URL ook een parameter meegeven, zodat in plaats van "Hello" er bijvoorbeeld "Hello Max" staat?
Hint: voeg je naam toe aan de URL als volgt:
http://localhost:8080/example/say?message=Max
✅ Controle
- Wordt de pagina
Hello [jouw naam]
getoond in de browser? - Werkt de parameter in de URL zonder dat je iets hoeft te veranderen aan de code?
🧠 Reflectie
- Als je jouw naam in de URL zet wordt deze in de variabele
$message
gezet, er staat immersecho "Hell $message";
Ho ekomt het dat jouw naam in de variable met de naam$message
staat?
📤 Inleveren
- Het bestand:
controllers/CountryController.php
- Een screenshot van je volledige scherm met browser waarop de URL en Hello [jouw naam] te zien is.
- Een antwoord op de refelctievraag (in txt of pdf).
06 Menu
🎯 Leerdoelen
- Je begrijpt hoe het menu (navigatie) in Yii is opgebouwd.
- Je kunt menu-items koppelen aan routes (routing).
- Je kunt submenu's maken en parameters gebruiken in je menu-items.
💡 Uitleg
In deze les ga je routing zoals we dat in de vorige les hebben geleerd toepassen. Je maakt een menu en koppelt de menu-items aan routes in je applicatie.
📁 Views folder
In de map views
vind je drie mappen:
- country: bevat de views die je met de CRUD-generator hebt aangemaakt.
- layouts: bevat de standaard lay-out (zoals
main.php
) van elke pagina. - site: bevat standaardpagina’s zoals “About” en “Contact”.
Elke pagina in Yii gebruikt de layout main.php
In de main.php staat <?= $content ?>
dit is kort voor <?php echo $content ?>
. Het toont jouw pagina die in de variabele $content staat:
🧪 Experimenteer
Verwijder tijdelijk de regel uit
main.php
en bekijk wat er gebeurt. Wat zie je (of juist niet)?
🍱 Menu via Widget
In de layout-bestand main.php
staat een stuk code dat het menu opbouwt met een zogenaamde Widget. Een widget is een soort herbruikbaar codeblok, vergelijkbaar met WordPress plugins.
Vervang de standaard menucode in main.php
door deze aangepaste versie:
<?php
use yii\bootstrap5\Nav;
use yii\bootstrap5\NavBar;
NavBar::begin([
'brandLabel' => Yii::$app->name,
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-expand-md navbar-dark bg-dark fixed-top',
],
]);
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => [
[
'label' => 'Country',
'items' => [
['label' => 'Overzicht', 'url' => ['/country/index']],
['label' => 'Voeg toe', 'url' => ['/country/create']],
['label' => 'Europa', 'url' => ['/country/index', 'CountrySearch[Continent]' => 'Europe']]
],
],
[
'label' => 'City',
'items' => [
['label' => 'Overzicht', 'url' => ['/city/index']],
['label' => 'Voeg toe', 'url' => ['/city/create']],
],
],
],
]);
NavBar::end();
?>
Zoals je ziet gebruiken we associatieve arrays zoals:
['label' => 'Europa', 'url' => ['/country/index', 'CountrySearch[Continent]' => 'Europe']]
🛠️ Opdrachten
- Vervang de standaard menucode in
main.php
door het bovenstaande voorbeeld.
- Om een country toe te voegen moet in de controller
CountryController
de method/functionactionCreate()
worden uitgevoerd.
Bedenk hoe je de routing naar deze pagina opzet en pas het menu aan 'voeg toe ' zodat deze is gekoppeld aanactionCreate ()
van deCountryController
. - Voeg het menu-item Asia toe, dat alleen landen van Azië toont.
- Voeg vervolgens voor elk werelddeel een apart menu-item toe: Asia, Africa, North America, South America, Oceania en Antarctica.
- Voeg een nieuw hoofdmenu toe: City met twee items: Overzicht en Voeg toe.
📤 Inleveren
- Lever het aangepaste bestand
views/layouts/main.php
in.
07 Gridview
In deze les leer je aanpassingen in de Gridview maken.
Je leert hoe je kolommen wel of niet zichtbaar kan maken, hoe je de kolom headers kan aanpassen, hoe je de kolom breedte kan aanpassen, hoe je de inhoud van de kolom zelf kan aanpassen en als laatste leren hoe we een link kunnen maken van een kolom.
Country overzicht aanpassen
Onze CRUD-generator (Gii) heeft voor ons een country overzicht gemaakt. Als je de CountryController.php opent dan zie je dat function (method) actionIndex de view index aanroept. Open deze index file. Deze staat in views/country.
Gridview Widget
Je ziet dat er op regel 23 een zogenaamde widget wordt aangeroepen.
Een Widget is een plug-in waarmee je functionaliteit aan Yii toevoegt. De Gridview Widget is misschien wel de meest uitgebreide widget en het zorgt ervoor dat we een mooi overzicht van onze data krijgen.
🛠️ Opdracht
De opdracht bestaat uit 8 stappen. In deze stappen gaan we de country view aanpassen (views/country/index.php).
Test na elke stap of de aanpassingen werken!
👉 Stap 1 - Kolommen aanpassen
In de parameters van deze widget zie je dat de kolommen Code , Name , Continent , Region en SurfaceArea worden afgedrukt. Je ziet ook dat bepaalde kolommen niet worden afgedrukt, deze staan in commentaar.
- Verander de lay-out in het country overzicht en laat de volgende kolommen in deze volgorde zien:
Code , Name , Population , Surface Area en Capital .
Population laat inwoneraantal zien en SurfaceArea laat oppervlakte zien.
Test of het werkt!
👉 Stap 2 - Kopjes aanpassen
Stel we willen het kopje boven de kolom veranderen, dan kan dan als volgt:
Vervang bijvoorbeeld 'SurfaceArea' in de GridView door het volgende array.
[ 'label' => 'Oppervlakte',
'attribute' => 'SurfaceArea',
],
Je ziet dat we de surface area nu hebben vervangen door een assiociative array. Dus waar in de code het woord 'SurfaceArea' staat plaats je het assiociative array zoals hierboven is aangegeven.
Dit verteld de GridView snippet dat het label Oppervlakte moet zijn (dit wordt boven aan de pagina gezet) en dat de waarde in de kolom moet worden gevuld met 'SurfaceArea'.
- Pas nu de kolom Population aan; en zet in de kolom header 'Inwoners'.
Test of het werkt!
👉 Stap 3 - Kolom breedte aanpassen
We gaan de kolombreedte aanpassen. Vervang het blok van net door het volgende:
[ 'label' => 'Oppervlakte',
'attribute' => 'SurfaceArea',
'contentOptions' => ['style' => 'width:30px; white-space: normal;'],
],
- Pas de breedte van de kolom Inwoners ( Population ) ook aan; zet de breedte op 30 pixels.
Test of het werkt!
👉Stap 4 - Waarde van kolom aanpassen
Stel we willen km2 achter de oppervlakte plaatsen, dan kunnen we de waarde van de kolom als volgt aanpassen:
[
'label' => 'Oppervlakte',
'attribute' => 'SurfaceArea',
'format' => 'raw',
'value' => function($data) {
return sprintf("%8d k㎡", $data->SurfaceArea);
}
]
Regel 5 t/m 7 in deze code verandert de waarde van de kolom. Dit is een functie en de return waarde van de functie wordt in de kolom afgedrukt.
Test of het werkt!
Als je achter return bijvoorbeeld "Hallo" zet dan wordt er in de kolom Oppervlakte overal Hallo afgedrukt. Probeer maar!
👉Stap 5 - Link maken van een kolom
In de Capital kolom zien we geen plaatsnaam, maar een nummer. Dit is het ID van een plaats in de city tabel.
Dus de Capital kolom uit country is de foreign key die wijst naar de primary key ID in city.
In de city view kun je een plaatsnaam zoeken door bijvoorbeeld de volgende URL te gebruiken:
http://localhost:8080/city/index?CitySearch[ID]=179
179 is het ID van Brussels, de hoofdstad van Belgi .
We gaan nu de value van de kolom Capital vervangen door de link.
Laten we om te beginnen de kolom Capital een beetje gaan aanpassen:
- Vervang de kolomnaam van de kolom Capital door 'Hoofdstad'.
- Verander de breedte van deze kolom naar 30px.
- Vervang de value van de kolom in
(alle kolommen krijgen dus dezelfde waarde).'format' => 'raw',
'value' => function($data) { return "/city/index?CitySearch[ID]=179"; }
Je ziet nu (in de browser):
Test of dit werkt!
Dat is nog geen link. Dat komt omdat we met <a href="">...</a> een link moeten maken. Dat kan maar dat is lastig omdat we met " in " quotes zitten. Dus dubbele quotes in dubbele quotes. We kunnen een 'gewone' <a href> maken, maar het is een gepriegel.
Met de Yii module Html kunnen we dit eenvoudiger doen.
We vervangen de regel die de waarde returned in:
Je ziet nu in de browser een nummer (FK naar city ) en als je daar op klikt, ga je naar de city Bruxelles [Brussel]
Test of dit werkt!
We zijn er bijna, we moeten nu alleen de 179 nog variabel maken, anders linkt elke regel naar Brussel.
👉 Stap 6 - Testen en laatste aanpassing
- Maak je code werkend met bovenstaande code.
- Als je nu op het nummer klikt ga je naar de hoofdstad van het betreffende land.
Test of dit werkt! - Verander nu de tekst van de link zodat je in de kolom Hoofdstad, in 'naar hoofdstad'.
- Als je er op klikt dan ga je dus naar de index view van de hoofdstad.
- Verander ook de breedte van de kolom naar 200px zodat de kolom netjes past.
De kolom ziet er dus als volgt uit:
👉 Stap 7, kolommen aanpassen
- Zet de kolommen in de volgende volgorde:
Code - Name - Hoofdstad - Inwoners- Oppervlakte - Verander de kolomnamen als volgt:
Code - Naam - Hoofdstad - Inwoners - Oppervlakte - Zorg dat de naam van het land vet gedrukt wordt (bold).
- Haal vervolgens de volgnummers (1,2,3,4....) in de eerste kolom weg
- Verplaats de edit kolom (de laatste) naar voren.
Het hele overzicht ziet er uit zoals te zien is op het volgende plaatje:
👉 Stap 8 - bevolkingsdichtheid
De bevolkingsdichtheid zegt iets over de hoeveelheid inwoners in een land. Natuurlijk heeft Amerika meer inwoners dan Nederland, maar het land is ook vele groter. Om te vergelijken hoe dichtbevolkt een land is, kun je uitrekenen hoeveel mensen er gemiddeld per km2 (dit een gebied van 1000x1000 meter) wonen.
bevolkingsdichtheid = aantal inwoners / oppervlakte.
Stel een land heeft een oppervlakte van 100 km2 en je er wonen 200 mensen. Dan heb je in dit land dus gemiddeld 2 inwoners per km2, want:
2 = 200 / 100 |
- Maak nu een nieuwe kolom in het country overzicht en bereken daarin de bevolkingsdichtheid.
- Gebruik de php functie round() om de bevolkingsdichtheid met 0 decimalen af te drukken.
👉 Aan het einde heb je jouw gridview aangepast en ziet het er zo uit:
Het Eindresultaat
📤 Inleveren
- Maak een schermafdruk van jouw Country's aangepaste Gridview en lever deze in.
- Stuur ook jouw (aangepaste) country view in.
--
Blok 8 - OOP
Under construction
Prompt Engineering 4
Deze module is express leeggelaten omdat de ontwikkelen zo snel gaan wordt deze modile later opgeleverd en aangepast aand estand van de techniek op dat moment. Hieronder staan al wel vast losse ideeën.
- ToDo advanced oefeningen
- Dynamic Prompting
- Let AI create prompts
- Let AI ask you questions
Q&A Strategy prompt
..... and ask me some yes/no questions in order to help provide a better recommendation.
what are the different ways to, ...... and give all pro's and con's each suggestion.
Do .... one step at a time and ask me to continue .....
Play the role of a teacher, make complex topics simple.
Voorbeeld advanced Prompting
De Tree of Thought (ToT)-methode
(eenvoudige versie)
Ik wil eenvoudig MVC PHP framework maken. Als voorbeeld maak je een controller, een view en een model. De database die je kan gebruiken is bijgevoegd.
Stap 1: Genereer ten minste drie logische denkstappen die mogelijke richtingen verkennen.
stap 2: Evalueer die denkstappen.
Er worden drie manieren van een aanpak van dit probleem bedacht en elke manier wordt beoordeeld op sterke- en zwakke punten.
<deel van het antwoord weggehaald>
Richting | Sterke punten | Zwakke punten | Beoordeling |
---|---|---|---|
A: Kernstructuur | Zorgt voor een goed georganiseerde basis en scheidt verantwoordelijkheden netjes. | Mogelijk over-engineered voor een eerste voorbeeld; vertraagt de “werkende demo”. | Hoog – goed als je het framework later wilt uitbreiden. |
B: Voorbeeldgericht | Levert snel zichtbare resultaten; handig voor leren of demonstratie. | Kan leiden tot spaghetti-architectuur als je niet oplet; framework groeit ad hoc. | Midden – goed voor snelle start, minder voor schaalbaarheid. |
C: Databasegericht | Helpt bij correcte datamodellering; logisch als data centraal staat. | Makkelijk om te verzanden in datadetails voordat de flow duidelijk is. | Laag-Midden – bruikbaar als datamodellering complex is, anders omslachtig. |
Cyber Security 1
0 inhoud
💻🔒 Bescherm je digitale wereld – word een cybersecurity-held!
Inhoud
- Wat is Cyber Security?
Cyber Security richt zich op het beschermen van computersystemen tegen misbruik en leert over diverse cyberaanvallen zoals phishing en malware. - HTTPS en netwerkveiligheid
HTTPS beveiligt de communicatie tussen browser en website door gegevens met een SSL-certificaat te versleutelen, wat meelezen en manipulatie voorkomt. - Encryptie
Encryptie maakt gegevens onleesbaar voor derden, gebruikmakend van ofwel dezelfde sleutel (symmetrisch) of twee verschillende sleutels (asymmetrisch) voor versleuteling en ontsleuteling. - Hashing
Hashing is een eenrichtingsversleuteling die gebruikt wordt om wachtwoorden veilig op te slaan, zodat deze niet terug te rekenen zijn naar het origineel. - Brute Force-aanvallen en Loginbeveiliging
Brute force-aanvallen, waarbij veel wachtwoorden worden geprobeerd, kunnen worden voorkomen door inlogpogingen te limiteren, vertragingen in te bouwen of 2FA toe te passen. - Rainbow tables
Rainbow tables zijn lijsten van wachtwoorden en hun hashes, gebruikt door aanvallers om snel originele wachtwoorden te achterhalen uit gehashte data. - Salting en encryptie
Salting voegt een unieke willekeurige tekst ("salt") toe aan een wachtwoord vóór het hashen, wat de veiligheid verhoogt door rainbow tables minder effectief te maken - Test je kennis
Heb je alles goed begrepen? Test je kennis en bereid je voor op de kennis-check!
1 Wat is Cyber Security?
🎯 Leerdoelen
- Je weet wat Cyber Security is en waarom het belangrijk is.
- Je kent verschillende soorten cyberaanvallen.
- Je kunt voorbeelden noemen van echte incidenten en uitleggen wat er fout ging.
💡 Uitleg
Cyber Security betekent simpel gezegd: het beschermen van computersystemen tegen aanvallen of misbruik. Denk hierbij aan het veilig houden van je website, je wachtwoorden, je e-mails en alle andere digitale gegevens.
Als je een website of app bouwt, ben je automatisch verantwoordelijk voor de veiligheid van de gegevens van je gebruikers. Hackers proberen vaak in te breken via bekende zwakke plekken, zoals slechte wachtwoorden of fouten in je code.
Voorbeelden van cyberaanvallen:
- Phishing: iemand probeert jou te misleiden om je wachtwoord af te geven (bv. via een nep-mail van je bank)
- Adware: software dat ongevraagd advertenties toont.
- Virus: speciaal soort malware dat zichzelf kan vermenigvuldigen (net als het Corona virus).
- DDoS-aanval: een server wordt overspoeld met aanvragen en raakt onbereikbaar
- SQL-injection: via een formulier wordt je database gehackt
- Man-in-the-middle: iemand onderschept je gegevens tussen jou en een website
👉 Je gaat in deze module zien hoe aanvallen werken én hoe je jezelf (en jouw code) daartegen kunt beschermen.
Cyberaanvallen maken vaak gebruik van kwaadaardige software. De verzamelnaam hiervoor is malware.
🛠️Opdracht 1, malware
Hierboven staat een lijst van 6 soorten cyberaanvallen. Welke van deze maakt niet per sé gebruik van kwaadaardige software?
Zoek informatie op internet en leg uit!
Voeg je bronvermelding toe.
🛠️Opdracht 2, risico
Hierboven zijn 6 voorbeelden van cyberaanvallen beschreven. Zoek zelf op wat de volgende soorten cyberaanvallen betekenen:
- Ransomware
- Trojan
- Spyware
- Adware
- Keylogger
Jij bent IT Security Officer en jij moet aangeven welke van deze bedreigingen het gevaarlijkst zijn.
Zet deze 6 soorten op volgorde van gevaarlijkheid (volgens jou) en leg bij elk type uit waarom je het op die plek zet.
Voeg je bronvermelding toe.
🛠️ Opdracht 3, Incident analyseren
- Zoek online een bekend cybersecurity-incident (bijv. een datalek, ransomware-aanval of hack bij een groot bedrijf).
- Beschrijf in je eigen woorden:
- Wat er is gebeurd
- Wat de gevolgen waren
- Wat er beter gedaan had kunnen worden
- Voeg je bronvermelding toe.
🧠 Opdracht 4, Reflectie
- Waarom denk jij dat veel mensen niet nadenken over digitale veiligheid?
- Wat is iets waar jij op gaat letten sinds je deze les hebt gevolgd?
📤 Inleveren
- Beschrijf alle het antwoord op alle 4 de opdrachten. Neem de vraag over en weer de vraag daarna uit.
Werk netjes en lever een PDF in.
☝️Om jezelf goed te beschermen tegen 'hacks' kun je heel dingen doen. Eén van de basis zaken is het versleutelen van gegevens.
👉 In de rest van deze module gaan we vooral hier op in zoomen.
2 HTTPS en netwerkveiligheid
🎯 Leerdoelen
- Je begrijpt het verschil tussen HTTP en HTTPS.
- Je weet waarom SSL-certificaten belangrijk zijn voor beveiligde communicatie.
- Je kunt een eigen website beveiligen met HTTPS.
💡 Uitleg
HTTP en HTTPS....?
HTTP en HTTPS zijn de 'talen' waarmee je browser met een website praat.
HTTP staat voor HyperText Transfer Protocol. Het zorgt ervoor dat je webpagina's kunt opvragen van een server.
HTTPS is hetzelfde, maar dan met een extra beveiligingslaag: de S staat voor Secure. Bij HTTPS worden de gegevens versleuteld verstuurd, zodat niemand onderweg kan meelezen.
📌 Daarom zie je http://
of https://
voor een URL – het geeft aan hoe je browser de website moet benaderen.
Wat is het verschil tussen HTTP en HTTPS?
HTTP betekent dat gegevens onversleuteld worden verzonden. Iedereen die tussen jou en de server in zit (zoals hackers op een openbaar netwerk), kan meekijken.
HTTPS (de S staat voor Secure) gebruikt een SSL-certificaat om alle communicatie tussen jouw browser en de server te versleutelen.
Wat is versleutelen eigenlijk?
Versleutelen is het omzetten van gegevens zodat ze niet meer zomaar leesbaar zijn.
Vaak heb je een digitale sleutel nodig om deze gegevens weer om te zetten in leesbare informatie.
In de volgende hoofdstukken over encryptie wordt dit uitgelegd.
Waarom is HTTPS belangrijk?
- Het voorkomt dat anderen je gegevens kunnen "onderscheppen".
- Het zorgt voor vertrouwen bij je bezoekers (slotje in adresbalk).
- Google straft HTTP-sites af in zoekresultaten (door niet op een goede positie te zetten)
Onderscheppen van gegevens, hoe dan?
Computers op het internet zijn verbonden via netwerken. Deze netwerken kan je vrij eenvoudig aftappen. Je kan dus meelezen met de berichtjes die verstuurd worden over het netwerk. Soms kan je zelfs de berichtjes opvangen, veranderen en doorsturen.
Dit kan op verschillende manieren maar als je toegang hebt tot bepaalde netwerk aparatuur is dat vrij eenvoudig. Dus jouw internet provider zou bijvoorbeeld alles wat jij op het op internet doet kunnen volgen. Als het netwerkverkeer is versleuteld is dat een stuk lastiger. |
Wat is een SSL-certificaat?
Een SSL-certificaat is een soort digitaal paspoort voor je website. Het zorgt ervoor dat bezoekers zeker weten dat ze verbinding hebben met jóuw site, en dat de data versleuteld is.
🔒 Waarvoor biedt HTTPS wél bescherming?
HTTPS zorgt ervoor dat de verbinding tussen jouw computer en een website veilig is. Dat betekent:
-
Niemand kan meekijken met wat jij invult of leest (zoals je wachtwoord of bankgegevens).
-
Niemand kan de informatie veranderen terwijl die onderweg is.
-
Je weet zeker dat je met de echte website praat (en niet met een nepserver), als het certificaat klopt.
Denkbij https aan een afgesloten envelop in plaats van een open briefkaart: anderen kunnen het bericht niet lezen of aanpassen.
❌ Waarvoor biedt HTTPS géén bescherming?
HTTPS voorkomt niet alles. Het beschermt je niet tegen:
-
Nepwebsites met een slotje – criminelen kunnen ook een HTTPS-site maken die er echt uitziet.
-
Phishing – als je op een valse link klikt en je wachtwoord daar invult, ben je nog steeds de klos.
-
Virussen of malware – als je iets downloadt, controleert HTTPS niet of het veilig is.
-
Slechte wachtwoorden – HTTPS helpt niet als jij zelf een zwak of gestolen wachtwoord gebruikt.
🧠 Reflectie
- Waarom is HTTPS extra belangrijk op loginpagina’s? Leg uit wat het risico is.
- Wat zou er kunnen gebeuren als je een onbeveiligde (HTTP) verbinding gebruikt in een openbaar WiFI netwerk? Leg uit wat het risico is.
- Je gaat naar www.nu.nl (voor het nieuws) en stel dat je geen slotje ziet en er dus geen SSL verbinding is gemaakt. Wat kan er mis gaan? Wat is het risico?
- Je meldt je aan voor een sport evenement op een onbeveiligde (HTTP) site. Leg uit wat het risico is.
- Je hebt een website op je laptop draaien en een medestudent bezoekt deze website vir een onbeveiligde (HTTP) verbinding. Leg uit wat het risico is.
- Zet alle risico's (nummer 1 t/m 5) op volgorde van gevaarlijkheid. Motiveer je antwoord.
De refelctie is een verslag in je eigen woorden, AI input wordt niet geaccepteerd!
Deze vragen komen terug in de kennis-check!
📤 Inleveren
- Lever je reflectie in als een .pdf
3 Encryptie
🎯 Leerdoelen
- Je weet wat encryptie betekent en waarvoor ze gebruikt worden.
- Je kunt een eenvoudige versleuteling (Caesar cipher) herkennen en kraken.
- Je weet het verschil tussen symmetrische en asymmetrische encryptie.
🎬Video
💡 Uitleg
Wat is encryptie?
Encryptie (versleuteling) betekent dat je gegevens onleesbaar maakt voor anderen. Alleen iemand met de juiste ‘sleutel’ kan de gegevens weer ontcijferen.
- Symmetrisch: dezelfde sleutel voor versleutelen en ontsleutelen (bijv. Caesar cipher).
- Asymmetrisch: verschillende sleutels voor versleutelen en ontsleutelen (zoals bij HTTPS).
🔎 Verdieping over symeterische en asymetrische encryptie
Leg uit, hoe werkt dat asymentrisch precies?
Stel iedereen heeft een eigen brievenbus met twee sloten met twee sleutels: een public key waarmee je een brief in de brievenbus kan stoppen en een private key waarmee de eigenaar de brievenbus kan openen en de inhoud kan bekijken.
![]() |
“Wil je mij iets sturen?
Gebruik dan deze publieke sleutel (= mijn slotje).”
Alleen jij kunt de brievenbus openen, want jij hebt de privé-sleutel die bij dat slotje hoort. |
Waarom zou asymentrische encryptie beter zijn dan symetrische encryptie?
🔐 Symmetrische encryptie
-
Sleutel is geheim en wordt gedeeld
-
Je gebruikt dezelfde sleutel om iets te versleutelen én te ontsleutelen.
-
Probleem: je moet die geheime sleutel veilig delen, en dat is lastig.
🔐 Asymmetrische encryptie
-
Gebruikt twee sleutels:
-
Een publieke sleutel (om te versleutelen)
-
Een privé sleutel (om te ontsleutelen)
-
-
Je kunt de publieke sleutel vrij geven aan iedereen, want alleen jij kunt de boodschap met je privé sleutel openen.
🤔 Waarom is asymmetrische encryptie beter?
-
De privé sleutel hoef je nooit met iemand te delen en de kans dat deze prive sleutel in verkeerde handen komt is dan dus kleiner.
Waarom zou je symetrische encryptie nog geberuiken als assymentrische encryptie beter is?
🔧 Kort gezegd:
-
Asymmetrisch = veilig, wat meer complex en trager.
-
Symmetrisch = iets minder veilig, maar wel snelen en eenvoudig
Om dat symetrische encrytie sneller en eenvoudiger is wordt die voroal gebruikt daar waar de sleutel snel veranderd dan is het niet zo erg als de sleutel in verkeerde hamden komt omdat er dan weer een neiuwe sleutel wordt gebruikt.
🛠️ Opdracht - Caesar Encryptie
In deze opdracht wordt jouw gevraagd een wachtwoord te 'hacken'. Het wachtwoord dat je moet ontcijferen is encrypted met het Caesar algoritme. Om te kunnen hacken moet je eerst begrijpen hoe het Caesar encryptie algoritme werkt.
Code Caesar encryptie
<?php
$sleutel = 2; // Caesar-sleutel: aantal posities verschuiven
function caesar_encrypt($tekst, $verschuiving) {
$resultaat = '';
for ($i = 0; $i < strlen($tekst); $i++) {
$char = $tekst[$i];
if (ctype_alpha($char)) {
$offset = ctype_upper($char) ? ord('A') : ord('a');
$resultaat .= chr(((ord($char) - $offset + $verschuiving) % 26) + $offset);
} else {
$resultaat .= $char; // Laat leestekens, spaties en cijfers ongemoeid
}
}
return $resultaat;
}
function caesar_decrypt($tekst, $verschuiving) {
return caesar_encrypt($tekst, 26 - $verschuiving); // Omgekeerde verschuiving
}
// Voorbeeld
$origineel = "Hallo Wereld!";
$gecodeerd = caesar_encrypt($origineel, $sleutel);
$ontsleuteld = caesar_decrypt($gecodeerd, $sleutel);
echo "Origineel: $origineel\n";
echo "Versleuteld: $gecodeerd\n";
echo "Ontsleuteld: $ontsleuteld\n";
Bekijk deze encryptie methode en probeer te begrijpen wat er gebeurt. Je kunt natuurlijk de code ook proberen/testen.
Als je het algoritme begrijpt, kan je verder.
👨💻 Hack-opdracht
Het volgende wachtwoord is encrypted met de Caesar methode.
Chs_hr_fdgdhl! |
Kan jij dit wachtwoord kraken?
🧠 Reflectie
- Is het Caesar algoritme een vorm van symmetrische- of asymetrische encryptie? Leg uit waarom.
- Hoe zou jij aan een niet programmeur uitleggen wat Caesar encryptie is?
- Hoe heb je het wachtwoord gehacked? Welke stappen heb je doorlopen?
- Als je een andere en misschien een iets lastigere wachtwoord moest kraken dat met het Caesar algoritme is ge-encrypt, hoe zou je dat dan aanpakken?
📤 Inleveren
- Antwoorden op de reflectiie PDF
4 Hashing
🎯 Leerdoelen
- Je weet hashing betekenen en waarvoor ze gebruikt worden.
- Je kunt wachtwoorden op een veilige manier hashen in PHP.
- Je weet hoe je hashed wachtwoorden zou kunnen hacken.
❓ Wist je dat ....
Blockchain en crypto gebouwd is op de principes van hashing?
Wil je weten hoe, kijk dan naar deze video; het is niet erg als je het gedeelte over block-chain niet helemaal begrijpt.
💡 Uitleg, wat is hashing?
Hashing is een soort encryptie die maar één kant op werkt; Je kunt wel encrypten maar niet de-crypten!
Hashing is dus eenrichtingsversleuteling: je zet een waarde om in een versleutelde vorm die je niet meer kunt terugrekenen naar het origineel. Dit wordt vaak gebruikt voor het veilig opslaan van wachtwoorden.
In PHP kun je een wachtwoord hashen met:
$hash = hash("sha256", "geheim123");
Het resultaat is bijvoorbeeld: $2y$10$f0849a42909dc18035cb470d239e485acbc1cdd1e48bc41f7a2801e3b08bdbdb
Je kunt dit niet terug rekenen naar geheim123
🔑 Wat gebeurt er bij het inloggen?
Bij het inloggen controleer je of het ingevoerde wachtwoord overeenkomt met de opgeslagen hash:
if hash("sha256", $ingevoerdWachtwoord) == $hash {
echo "Ingelogd!";
}
⚠️ Je moet het zo zien dat het ingevoerde wachtwoord opnieuw wordt omgezet met de hash-functie. Is het resultaat hetzelfde als de opgeslagen $hash dan is het ingevoerde wachtwoord goed.
🛠️ Opdracht 2 Hashing
Neem om te beginnen de start code, form.htm
en check.php
over.
Controleer of het werkt en probeer in te loggen met admin/wachtwoord. Probeer de code te begrijpen.
form.html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Loginformulier</title>
</head>
<body>
<h2>Login</h2>
<form method="get" action="check.php">
<label for="gebruikersnaam">Gebruikersnaam:</label><br>
<input type="text" name="gebruikersnaam" id="gebruikersnaam" required><br><br>
<label for="wachtwoord">Wachtwoord:</label><br>
<input type="password" name="wachtwoord" id="wachtwoord" required><br><br>
<button type="submit">Inloggen</button>
</form>
<p><?= $melding ?></p>
</body>
</html>
check.php
<?php
$gebruikers = [
'max' => '',
'lisa' => '',
'admin' => 'e0NRta6G8WpOMOMK9qOC6O3z6F7cJcmA0r8GRPt4NeWcAUO4ED8Di' // Vaste hash van "wachtwoord"
];
$melding = '';
$gebruikersnaam = $_GET['gebruikersnaam'];
$wachtwoord = $_GET['wachtwoord'];
if (isset($gebruikers[$gebruikersnaam])) {
if (password_verify($wachtwoord, $gebruikers[$gebruikersnaam])) {
$melding = "✅ Ingelogd als <strong>$gebruikersnaam</strong>!";
} else {
$melding = "❌ Fout wachtwoord.";
}
} else {
$melding = "❌ Gebruiker bestaat niet.";
}
?>
Als je de code begrijpt dan is de volgende opdracht niet moeilijk.
👉 Zorg ervoor dat de gebruikers max en lisa kunnen inloggen met de volgende wachtwoorden. |
Gebruikersnaam | Wachtwoord |
max | top-secret123! |
llisa | sinclair1974 |
Probeer te ontdekken hoe je dit moet doen en hoe je de juiste wachtwoorden toe kan voegen.
👨💻 Hack-opdracht
Ste je hebt de volgende code onderschept;
$gebruikers = [
'max' => '$2y$10$AF4UcvDki/VEQKCUzHQxIudD9cYLRaF9v4GIkhTyTzWzxCN/Yo0q6',
'lisa' => '$2y$10$nWGSzTcP7TShCVwz78eNGO3LjoxR/FPR3WjZqxbodWHQUe/XEzZC.',
'admin' => '$2y$10$e0NRta6G8WpOMOMK9qOC6O3z6F7cJcmA0r8GRPt4NeWcAUO4ED8Di'
];
Aan jouw de taak om de wachtwoorden te 'kraken'.
Tip 1
Tip Het is niet mogelijk om de hash terug te rekenen vanuit de hash naar een wachtwoord.
Tip 2
Tip 2Je kunt natuurlijk wel een wachtwoorden in een hash omzetten en kijken of de hash hetzelfde is.
Tip 3
Lisa en Max hebben wachtwoorden die veel gebruikt worden en niet erg veilig zijn.
😀 Had je geen tips nodig, dan ben je een meester hacker!
🧠 Reflectie
- Waarom is het geen goed idee om wachtwoorden encrypted (versleuteld) op te slaan en waarom kun je beter hashing gebruiken?
Leg uit wat er mis zou kunnen gaan als je encryptie gebruikt voor het opslaan van wachtwoorden. - Stel je hebt een bestand gekregen met allemaal userid's en wachtwoorden. De wachtwoorden zijn hashed. Leg uit hoe je mogelijk toch achter de wachtwoorden kan komen.
📤 Inleveren
- aangepaste
check.php
- de antwoorden op de vragen uit de reflectie in pdf
5 Brute Force-aanvallen en Loginbeveiliging
🎯 Leerdoelen
- Je weet wat een brute force-aanval is.
- Je kunt een eenvoudige loginpagina maken in PHP.
- Je begrijpt hoe je zo'n loginpagina kunt beveiligen tegen brute force-aanvallen.
💡 Uitleg
Wat is een brute force-aanval?
Bij een brute force-aanval probeert een aanvaller heel veel verschillende wachtwoorden achter elkaar uit om zo toegang te krijgen tot een account. Als er geen beperking zit op het aantal pogingen, kan dit op den duur succes hebben.
Hoe bescherm je hiertegen?
Je kunt brute force-aanvallen voorkomen door bijvoorbeeld:
- Een limiet te stellen op het aantal pogingen
- Een vertraging inbouwen bij het inloggen en deze laten groeien als je vaker een fout wachtwoord hebt ingevuld.
- Tijdelijk een gebruiker of IP-adres te blokkeren (=black listing)
- Van te voren alleen bepaalde ip adressen toelaten (=white listing)
- Captcha toe te voegen
- Twee-factor authenticatie toe te passen
- Zet alle mislukte inlogpogingen in een logbestand.
Deze laatste bescherming met logfile voorkomt niet zozeer dat er brute force aanvallen plaatsvinden, maar je kunt wel zien als er wat vreemds gebeurt. Je kan dan op dat moment (extra) maatregelen nemen.
Wachtwoord lengte
Een wachtwoord bestaat over het algemeen uit hoofdletter, gewonen letters, cijfers en een aantal spciale karakters. In totaal zijn dat ongeveel 70 tekens. Dat beteketn dat je 70 verschillende wachtwoorden kan maken, bij een wachtwoord lengte van 2 is dit 4 900 verschillende wachtwoorden. Dti aantal loopt snel op:
wachtwoord lengte | aantal mogelijkheden |
1 | 70 |
2 | 4 900 |
3 | 343 000 |
4 | 24 010 000 |
5 | 1 680 700 000 |
6 | 117 649 000 000 |
Dit lijkt heel veel maar met één snelle computer met een snelle GPU kan je 10 miljard wachtwoorden per seconden testen. Een wachtwoord van 6 posities heb je dan dus binnen ongeveer 10 seconden gekraakt.
Hoe lang moet mijn wachtwoord dan zijn, is 10 posities voldoende?
Jouw wachtwoord veiligheid hangt af van:
- de gebruikte encypty of hashing (bijvoorbeeld SHA256)
- welke hardware kan je gebruiken om te hacken (via cloudcomputing kan je 1000-den snelle GPU's inztten).
Voorbeeld:
- Je gebruikt de wat verouderde SHA256 hashing.
- Je gebruikt 10 hele snelle GPU's (NVidia RTX4080)
Rekentijd ongeveer 16 dagen
😲Bedrijven als OpenAI, Microsoft, Amazon of Google hebben zoveel rekenkracht dat ze jouw wachtwoord van 10 tekens binnen 20 seconden met brute force zouden kunnen kraken.
Ga je naar een wacthwoord van 12 tekens, dan loopt dit zelfs voor deze bedrijven al snel op naar een 2 tot 3 jaar.
🛠️ Opdracht
Maak een eenvoudige loginpagina
Maak een bestand login.php
met het volgende formulier:
<form method="get" action="inlogcontrole.php">
Gebruikersnaam: <input name="username"><br>
Wachtwoord: <input type="password" name="password"><br>
<input type="submit" value="Login">
</form>
Maak daarna een eenvoudige inlogcontrole.php
in PHP:
<?php
session_start();
$gebruikersnaam = "admin";
$wachtwoord = "geheim";
if (!isset($_SESSION['pogingen'])) {
$_SESSION['pogingen'] = 0;
}
if ($_SESSION['pogingen'] >= 3) {
die("Te veel pogingen. Probeer het later opnieuw.");
}
if ($_GET) {
if ($_GET['username'] === $gebruikersnaam && $_GET['password'] === $wachtwoord) {
echo "Welkom!";
$_SESSION['pogingen'] = 0;
} else {
echo "Foutieve inlog.";
$_SESSION['pogingen']++;
}
}
?>
In het form wordt $_GET gebruikt, is dat handig?
Vanuit het oogpunt van cyber security is het beter om $_POST te gebruiken. Weet je nog waarom?
Aanpassingen
- Verander het formulier en de vervolgpagina zodat je geen post meer gebruikt en zodat het user id en wachtwoord niet meer in de URL staan.
- Voeg een vertraging toe met
sleep(1)
bij een mislukte poging. - Voeg logging toe aan een tekstbestand zodat je pogingen kunt terugzien.
Extra uitdaging
- Als je bijhoud hoevaak een gebruiker probeert in te loggen (met een sessie variabele), dan kan je de tijd tussen twee pogingen laten groeien: de eerste keer moet je 1 seconden wachten, dan 2 dan 4 dan 8 dan 16, etc. etc.
Kan jij dat implementeren?
🧠 Reflectie
- Waarom is het belangrijk om een limiet te stellen op het aantal inlogpogingen?
- Wat gebeurt er als je de sessiegegevens wist of in een andere browser werkt?
- Welke nadelen heeft deze eenvoudige beveiliging?
📤 Inleveren
- De aangepaste code
inlogcontrole.php
- Reflectie met antwoorden op bovenstaande vragen in pdf.
6 Rainbow tables
🎯 Leerdoelen
- Je begrijpt wat een rainbow table is en waarom het gevaarlijk is bij wachtwoordbeveiliging.
- Je kunt handmatig een wachtwoord opzoeken in een rainbow table.
- Je snapt waarom salting rainbow tables onbruikbaar maakt.
Menses gebruiken vaak 'standaard' wachtwoorden.
Wat denk jij dat het meest gebruikte wachtwoord is?
Er zijn sites waarom de meest gebruikte wachtwoorden staan.
👉 Ga naar de site van Nordpass en controleer of jouw antwoord klopt.
💡 Uitleg: Wat is een rainbow table?
Een rainbow table is een lijst van veelgebruikte wachtwoorden met hun bijbehorende hashes. Aanvallers gebruiken dit om snel te achterhalen welk wachtwoord hoort bij een bepaalde hash.
Stel: iemand vindt een lijst met gebruikersnamen en gehashte wachtwoorden. Als jouw wachtwoord in zo'n rainbow table staat, kan die hash direct worden terugvertaald naar het originele wachtwoord – zonder te hoeven raden.
Waarom werken rainbow tables?
- Hash-algoritmes zoals SHA256 geven altijd dezelfde output voor dezelfde input.
- Veel mensen gebruiken zwakke, veelvoorkomende wachtwoorden.
Starters code
Deze code vraag om een wachtwoord te resetten. Het wachtwoord wordt in JSON bestand opgeslagen. Controleer of de code werkt en controleer of het wachtwoord wordt opgeslagen in gebruikers.json .
<?php
// Als het formulier is verzonden
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$userid = $_POST['userid'] ?? '';
$wachtwoord = $_POST['wachtwoord'] ?? '';
// Hash het wachtwoord met SHA-256
$hashed = hash('sha256', $wachtwoord);
// Bestandsnaam
$bestand = 'gebruikers.json';
// Bestaat het JSON-bestand al?
if (file_exists($bestand)) {
$data = json_decode(file_get_contents($bestand), true);
} else {
$data = [];
}
// Sla of update de gebruiker op
$data[$userid] = $hashed;
// Schrijf naar bestand (mooi opgemaakt voor leesbaarheid)
file_put_contents($bestand, json_encode($data, JSON_PRETTY_PRINT));
echo "<p>Wachtwoord succesvol opgeslagen voor gebruiker <strong>$userid</strong>.</p>";
echo "<p>SHA256 hash: <code>$hashed</code></p>";
exit;
}
?>
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Wachtwoord resetten</title>
</head>
<body>
<h2>Reset je wachtwoord</h2>
<form method="post">
<label for="userid">Gebruikers-ID:</label><br>
<input type="text" id="userid" name="userid" required><br><br>
<label for="wachtwoord">Nieuw wachtwoord:</label><br>
<input type="password" id="wachtwoord" name="wachtwoord" required><br><br>
<button type="submit">Opslaan in JSON</button>
</form>
</body>
</html>
👨💻 Hack-opdracht
200 meest voorkomende wachtwoorden (internationaal)
123456
123456789
12345
qwerty
password
12345678
111111
123123
1234567890
1234567
qwerty123
000000
1q2w3e
aa12345678
abc123
password1
1234
qwertyuiop
123321
password123
1qaz2wsx
iloveyou
admin
qazwsx
123qwe
123abc
654321
666666
superman
112233
1q2w3e4r
asdfghjkl
zxcvbnm
121212
1qazxsw2
letmein
trustno1
hello
888888
football
monkey
!@#$%^&*
charlie
batman
696969
hottie
flower
loveme
donald
login
pokemon
starwars
jordan
dragon
michael
shadow
master
killer
maggie
biteme
qwerty1
freedom
whatever
cheese
pepper
princess
jennifer
michelle
tigger
hunter
sunshine
ashley
michael1
lovely
qwe123
777777
ginger
cookie
welcome
taylor
summer
soccer
test
asdf
internet
google
qweasd
merlin
mustang
baseball
hannah
snoopy
thomas
mypass
computer
daniel
jessica
pepper123
pass
6969
1111
999999
88888888
444444
222222
555555
333333
7777777
0000
1212
1004
2000
abcd1234
1989
1987
1979
1978
q1w2e3r4
zxcvbn
a1b2c3
azerty
passw0rd
123123123
147258
1g2w3e4r
1a2b3c4d
2580
qazxsw
987654321
password!
hunter2
11111111
131313
159753
a123456
abc123456
myspace1
9999
147147
aaaaaa
zaq12wsx
q1w2e3
8888
iloveyou1
killer123
qwe123456
123456a
abcdef
asdasd
poop
zxcvbn123
dragon123
trustno1!
abcd
12344321
password01
987654
test123
cool
123123a
internet123
letmein123
master123
welcome1
football1
qwert
batman123
super123
77777777
5555
ninja
tinkle
red123
star123
hello123
pass123
admin123
1password
love123
66666666
mypass123
superman123
samsung
qwerty12
asdfgh
admin1
loveyou
pokemon123
iloveu
justin
asdf1234
hottie123
shadow123
hannah123
sunshine1
admin@123
- Vraag een mede-student een wachtwoord uit de lijst van 200 meest voorkomende wachtwoorden te kiezen (lijst staat hier boven).
- Vraag de student dit wachtwoord in te vullen op jouw Lappie met de "starters code" die je net hebt getest.
- Laat de mede-student zien dat je het JSON bestand kan lezen en dat je dus zijn hashed wachtwoord kan leven.
- Hoe kom je er nu achter welke wachtwoord jouw mede-student heeft gebruikt?
- Precies: je maakt code die alle 200 wachtwoorden hashed en je vergelijkt de gevonden hashes met de hash van je mede student.
🛠️ Opdracht: Vind het wachtwoord
Maak een "mini-rainbow table" van de 200 meest voorkomende wachtwoorden en bepaal welk wachtwoord jouw mede-student had ingevoerd.
Have I been Powned
Op https://haveibeenpwned.com/Passwords staat een hele groot bestand met gehashte wachtwoorden. Deze lijst is ook bekend bij hackers en als die een hashed wachtwoord hebben kunnen ze deze opzoeken in deze database en jouw wachtwoord achterhalen.
De lijst bevat alle hashed wachtwoorden die ooit een keer zijn 'gevonden', bijvoorbeeld in een database die is gehacked.
🧠 Reflectie
- Wat maakt rainbow tables zo gevaarlijk?
- Wat zou er gebeuren als we bij elk wachtwoord een andere salt toevoegen?
- Hoe helpt salting om rainbow tables tegen te gaan?
📤 Inleveren
- Een kort verslag met de gevonden wachtwoorden.
- Een antwoord op de reflectievragen in PDF.
7 Salting en encryptie
🎯 Leerdoelen
- Je begrijpt wat een salt is en waarom het wordt gebruikt bij hashing van wachtwoorden.
- Je kunt zelf code schrijven om te demonstreren hoe salting werkt.
- Je kunt uitleggen hoe je een wachtwoord controleert dat is gehasht met een salt.
⁉️Waarom Salt
Salting is een beveiligingstechniek die je kan toepassen bij het opslaan van wachtwoorden, omdat het je systeem veel beter beschermt tegen aanvallen zoals rainbow table-aanvallen.
💡 Uitleg: Wat is een salt?
Een salt is een extra stukje tekst dat je aan een wachtwoord toevoegt voordat je het versleutelt (hasht). Daardoor ziet het wachtwoord er elke keer anders uit, zelfs als iemand hetzelfde wachtwoord gebruikt.
Stel: zonder salt geeft het wachtwoord geheim123
altijd dezelfde hash. Met een salt (bijv. !x8Zp#
) wordt het !x8Zp#geheim123
en krijg je een andere hash.
📌 In dit voorbeeld gebruiken we één vaste salt voor alle wachtwoorden, om het idee simpel te houden.
Waarom is salting belangrijk?
- Het maakt het moeilijker om gehashte wachtwoorden terug te vinden met voorgeprogrammeerde lijsten (rainbow tables).
- Het maakt brute force-aanvallen minder effectief.
🧂 Waarom heet het “salt”?
Stel je voor
Je hebt een bord rijst (= het wachtwoord).
Als iedereen precies dezelfde rijst krijgt, smaakt het bij iedereen hetzelfde.
Maar als jij er wat zout aan toevoegt, wordt het uniek.
Hetzelfde gebeurt met wachtwoorden:
-
Zonder “salt” = iedereen met hetzelfde wachtwoord krijgt dezelfde hash.
-
Met “salt” = elk wachtwoord krijgt een eigen smaak (een unieke hash), zelfs als het wachtwoord hetzelfde is.
🔒 In de techniek
Het “zout” is een willekeurig extra stukje tekst dat je toevoegt aan het wachtwoord voordat je het versleutelt of “hasht”.
$salt = "x!9f3L";
$wachtwoord = "123456";
$hash = hash('sha256', $salt . $wachtwoord);
🛠️ Opdracht: Hashen met één vaste salt
Schrijf een klein PHP-script dat laat zien hoe salting werkt.
$wachtwoord = "geheim123";
$salt = "ROCAmstelland"; // vaste salt voor alle wachtwoorden
$hash = hash("sha256", $salt . $wachtwoord);
echo "Wachtwoord: $wachtwoord\n";
echo "Hash: $hash\n";
Controle bij inloggen
Als iemand probeert in te loggen, moet je het ingevoerde wachtwoord opnieuw hashen met dezelfde salt en vergelijken met de opgeslagen hash.
$ingevoerd = "geheim123";
$bekende_hash = .......; // aanvullen
$salt = "ROCAmstelland";
// vul deze regel code aan zodat de hash wordt gecontroleerd.
$controle_hash = ......
if ($controle_hash === $bekende_hash) {
echo "✅ Ingelogd";
} else {
echo "❌ Fout wachtwoord";
}
- Bereken met de eerste code de hash van het wachtwoord geheim123
- Plaats de hash dan in de 2de code ($bekende_hash) en vul regel 6 aan zodat de hash wordt gecontroleerd.
🧠 Reflectie
- Waarom is het veiliger om een salt toe te voegen?
- Wat zou nog veiliger zijn dan één vaste salt voor iedereen?
- Stel je wil hacken met behulp van Rainbow tables en je weet welke salt er is gebruikt, wat moet je dan doen?
- In de (laatste) opgave maken we gebruik van een vaste salt waarde. Denk je dat je de beveilig kan verbeteren door een ander salt waarde te kiezen? Zo ja welke en waaorm, leg uit in eigen woorden.
📤 Inleveren
- Je PHP-script waarin je laat zien hoe je een wachtwoord hasht met een salt en controleert bij inloggen.
- Een PDF met de antwoorden op de reflectievragen.
📊Test je kennis
Hoofdstuk 1: Wat is Cyber Security?
1. Wat is de primaire focus van Cyber Security?
- a) Het beschermen van websites tegen computer-bugs
- b) Het beschermen van computersystemen tegen aanvallen en misbruik.
- c) Het ontwikkelen van nieuwe softwareprogramma's.
- d) Het beheren van netwerkinfrastructuur.
✅ Antwoord
b) Het beschermen van computersystemen tegen aanvallen en misbruik.
2. Welke van de volgende cyberaanvallen omvat het misleiden van iemand om wachtwoorden af te geven, vaak via nep-e-mails?
- a) Malware
- b) DDoS-aanval
- c) Phishing
- d) SQL-injection
✅ Antwoord
c) Phishing
Welke term wordt gebruikt voor software die ontworpen is om ongevraagd advertenties te tonen en je naar bepaalde webwinkels stuurt?
- a) Adware
- b) Spam
- c) Malware
- d) Commerceware
✅ Antwoord
c) Adware
Welke vorm van malware kan zichzelf verspreiden naar andere bestanden of programma's zodra het op een computer is geïnstalleerd?
- a) Worm
- b) Spyware
- c) Virus
- d) Adware
✅ Antwoord
c) Virus
Hoofdstuk 2: HTTPS en netwerkveiligheid
3. Wat is het belangrijkste verschil tussen HTTP en HTTPS?
- a) HTTPS is alleen voor professionele websites, HTTP voor persoonlijke.
- b) HTTPS staat voor HyperText Transfer Protocol Secure en versleutelt de communicatie tussen browser en server.
- c) HTTP is sneller dan HTTPS.
- d) HTTP gebruikt een SSL-certificaat, HTTPS niet.
✅ Antwoord
b) HTTPS staat voor HyperText Transfer Protocol Secure en versleutelt de communicatie tussen browser en server.
4. Waarvoor biedt HTTPS geen bescherming?
- a) Het onderscheppen van ingevulde wachtwoorden door derden.
- b) Het veranderen van informatie terwijl deze onderweg is.
- c) Het downloaden van virussen of malware.
- d) Verbinding maken met de echte website in plaats van een nepserver.
✅ Antwoord
c) Het downloaden van virussen of malware.
Hoofdstuk 3: Encryptie
5. Wat is de definitie van encryptie?
- a) Het proces van het verbergen van bestanden op een computer.
- b) Het omzetten van gegevens zodat ze onleesbaar zijn voor onbevoegden, tenzij men de juiste ‘sleutel’ heeft.
- c) Het back-uppen van gegevens naar een externe schijf.
- d) Het controleren van de integriteit van gegevens.
✅ Antwoord
b) Het omzetten van gegevens zodat ze onleesbaar zijn voor onbevoegden, tenzij men de juiste ‘sleutel’ heeft.
6. Welk type encryptie gebruikt dezelfde sleutel voor zowel versleuteling als ontsleuteling?
- a) Asymmetrische encryptie
- b) Hash-encryptie
- c) Symmetrische encryptie
- d) Kwantumencryptie
✅ Antwoord
c) Symmetrische encryptie
Hoofdstuk 4: Hashing
7. Waarom wordt hashing vaak gebruikt voor het opslaan van wachtwoorden?
- a) Omdat de wachtwoorden dan eenvoudig terug te rekenen zijn voor de gebruiker.
- b) Omdat het een eenrichtingsversleuteling is die niet terug te rekenen is naar het origineel.
- c) Omdat het wachtwoorden comprimeert om opslagruimte te besparen.
- d) Omdat het helpt bij het snel ophalen van verloren wachtwoorden.
✅ Antwoord
b) Omdat het een eenrichtingsversleuteling is die niet terug te rekenen is naar het origineel.
8. Hoe controleert een systeem een ingevoerd wachtwoord als het opgeslagen wachtwoord gehasht is?
- a) Het systeem probeert de opgeslagen hash terug te rekenen naar het originele wachtwoord.
- b) Het systeem stuurt een resetlink naar het e-mailadres van de gebruiker.
- c) Het systeem zet het ingevoerde wachtwoord om met de hash-functie en vergelijkt het resultaat met de opgeslagen hash.
- d) Het systeem vraagt de gebruiker om een tweede authenticatiefactor.
✅ Antwoord
c) Het systeem zet het ingevoerde wachtwoord om met de hash-functie en vergelijkt het resultaat met de opgeslagen hash.
Hoofdstuk 5: Brute Force-aanvallen en Loginbeveiliging
9. Wat is een brute force-aanval?
- a) Een aanval waarbij een server wordt overspoeld met aanvragen.
- b) Een aanval waarbij kwaadaardige software op een systeem wordt geïnstalleerd.
- c) Een aanval waarbij systematisch heel veel verschillende wachtwoorden worden geprobeerd om toegang te krijgen.
- d) Een aanval waarbij via een formulier een database wordt gehackt.
✅ Antwoord
c) Een aanval waarbij systematisch heel veel verschillende wachtwoorden worden geprobeerd om toegang te krijgen.
10. Welke van de volgende is geen methode om brute force-aanvallen te voorkomen?
- a) Een limiet stellen op het aantal pogingen.
- b) Tijdelijk een gebruiker of IP-adres blokkeren.
- c) Twee-factor authenticatie toepassen.
- d) Het gebruik van $_GET voor het versturen van inloggegevens.
✅ Antwoord
d) Het gebruik van $_GET voor het versturen van inloggegevens.
Hoofdstuk 6: Rainbow tables
11. Wat is een rainbow table?
- a) Een lijst van alle mogelijke wachtwoorden.
- b) Een database van gehackte IP-adressen.
- c) Een lijst van veelgebruikte wachtwoorden met hun bijbehorende hashes.
- d) Een hulpmiddel om SSL-certificaten te genereren.
✅ Antwoord
c) Een lijst van veelgebruikte wachtwoorden met hun bijbehorende hashes.
12. Waarom zijn rainbow tables gevaarlijk voor wachtwoordbeveiliging?
- a) Ze zorgen ervoor dat servers overbelast raken.
- b) Ze maken het mogelijk om gehashte wachtwoorden snel terug te vertalen naar het origineel als het wachtwoord in de tabel staat.
- c) Ze installeren malware op het systeem van de gebruiker.
- d) Ze versleutelen de communicatie tussen de gebruiker en de website.
✅ Antwoord
b) Ze maken het mogelijk om gehashte wachtwoorden snel terug te vertalen naar het origineel als het wachtwoord in de tabel staat.
Hoofdstuk 7: Salting en encryptie
13. Wat is het hoofddoel van 'salting' bij het hashen van wachtwoorden?
- a) Om het hash-algoritme complexer te maken.
- b) Om ervoor te zorgen dat hetzelfde wachtwoord elke keer een unieke hash krijgt, wat rainbow tables minder effectief maakt.
- c) Om de snelheid van het hashen te verhogen.
- d) Om te controleren of een wachtwoord sterk genoeg is.
✅ Antwoord
b) Om ervoor te zorgen dat hetzelfde wachtwoord elke keer een unieke hash krijgt, wat rainbow tables minder effectief maakt.
14. Hoe wordt een gehasht wachtwoord met een 'salt' gecontroleerd bij het inloggen?
- a) Het systeem probeert de opgeslagen hash te ontsleutelen met de salt.
- b) Het ingevoerde wachtwoord wordt gehasht zonder de salt en vergeleken met de opgeslagen hash.
- c) Het ingevoerde wachtwoord wordt opnieuw gehasht samen met dezelfde opgeslagen salt, en het resultaat wordt vergeleken met de opgeslagen hash.
- d) De gebruiker wordt gevraagd om de salt handmatig in te voeren.
OOP
1 Wat is OOP en waarom gebruiken we het?
🎯 Leerdoelen
- Je begrijpt het verschil tussen procedureel programmeren en OOP.
- Je weet wat een class, object en method zijn.
- Je kunt herkennen wanneer OOP handig is in grotere projecten.
💡 Uitleg
Wat is OOP?
OOP staat voor Objectgeoriënteerd programmeren (object geörienteerd programmeren). In plaats van losse functies en variabelen, werk je met objecten die gedrag (via classes) en gegevens (properties) combineren.
Waarom OOP gebruiken?
- Je kunt code beter organiseren en hergebruiken.
- Je maakt je programma makkelijker uitbreidbaar.
- Je kunt complexe systemen opdelen in logische blokken (objecten).
Voorbeeld: procedureel vs OOP
Procedureel:
<?php
$naam = "Tessa";
$leeftijd = 19;
function begroet($naam) {
echo "Hallo, ik ben " . $naam;
}
begroet($naam);
?>
Objectgeoriënteerd:
<?php
class Persoon {
public $naam;
public $leeftijd;
public function begroet() {
echo "Hallo, ik ben " . $this->naam;
}
}
$tessa = new Persoon();
$tessa->naam = "Tessa";
$tessa->leeftijd = 19;
$tessa->begroet();
?>
👉 Je ziet hier dat de funvtie en de variabelen in één blok (class) staan.
We gebruiken bij OOP soms vreemde termen:
Procedureel | OOP |
variabele | property (van een class) |
functie | method |
🛠️ Opdracht – Van procedureel naar objectgeoriënteerd
Je gaat een simpel PHP-script omzetten naar OOP.
- Maak een bestand
mijn-procedureel.php
en schrijf de volgende code:<?php $autoMerk = "Toyota"; $bouwjaar = 2018; function toonAuto($merk, $jaar) { echo "Dit is een $merk uit $jaar"; } toonAuto($autoMerk, $bouwjaar); ?>
- Maak nu een tweede bestand:
mijn-oop.php
en herschrijf dit script in OOP-stijl:<?php class Auto { ... ... ... ... } $auto = new Auto(); $auto->merk = "Toyota"; $auto->bouwjaar = 2018; $auto->toon(); ?>
🧠 Reflectie
- Wat vond je makkelijker: de procedurele of de OOP-versie?
- Waarom denk je dat OOP belangrijk is bij grotere projecten?
📤 Inleveren
- Lever beide bestanden in:
mijn-procedureel.php
enmijn-oop.php
- Maak een kort reflectiebestand:
reflectie-les1-<jouw-naam>.txt
- Let op: je code moet uitvoerbaar zijn in de browser (via XAMPP of localhost).
2 Classes en objects
🎯 Leerdoelen
- Je weet wat een class en een object zijn.
- Je kunt een eenvoudige class maken in PHP.
- Je kunt een object aanmaken op basis van die class en ermee werken.
💡 Uitleg
Wat is een class?
Een class is een soort blauwdruk of bouwtekening. Je beschrijft hiermee hoe een bepaald type object eruitziet en wat het kan doen.
Wat is een object?
Een object is een concreet exemplaar van een class. Je maakt een object aan met new
. Een class kun je meerdere keren gebruiken om verschillende objecten te maken.
Class, Object, Properties en Methods worden nog een keer duidelijk gemaakt in:
https://slides.com/jamescandan/oop-php-for-beginners-1-2/fullscreen#/5
Dus een class is een sjabloon van een object en met het commando new <class_naam>
maken we een nieuw object van de sjabloon. In een class heten de variabelen properties en de fucnties heten methods.
Voorbeeld:
<?php
class Hond {
public $naam;
public $leeftijd;
public function blaf() {
echo "Woef! Ik ben " . $this->naam;
}
}
$mijnHond = new Hond();
$mijnHond->naam = "Rex";
$mijnHond->leeftijd = 3;
$mijnHond->blaf();
$jouwHond = new Hond();
$jouwHond->naam = "Sip";
$jouwHond->leeftijd = 5;
$jouwHond->blaf();
?>
👉Je hebt één class, maar je hebt twee objecten (honden) van deze class: $mijnHond
en $jouwHond
🛠️ Opdracht – Maak je eigen class
- Maak een nieuw bestand:
mijn-klas.php
- Maak hierin een class
Student
met de eigenschappenvoornaam
,achternaam
enopleiding
. - Maak een methode
stelVoor()
die zegt: "Hallo, ik ben [voornaam] [achternaam] en ik doe de opleiding [opleiding]." - Maak drie objecten (
$student01
,$student02
, en$student03
) van de class en test het resultaat in je browser.
🧠 Reflectie
- Wat viel je op bij het maken van een object?
- Wat gebeurt er als je een properties (voornaam, achternaam en opleiding) niet vult voor je
stelVoor()
gebruikt?
📤 Inleveren
- Bestandsnaam:
mijn-klas.php
- Reflectievragen in een apart txt- of PDF-bestand.
3 Constructors en eigenschappen
🎯 Leerdoelen
- Je weet wat een constructor is in een class.
- Je kunt automatisch waarden toekennen bij het maken van een object.
- Je begrijpt het verschil tussen eigenschappen (properties) en methoden.
💡 Uitleg
Wat is een constructor?
Een constructor is een speciale methode die automatisch wordt uitgevoerd als je een object maakt. In PHP heet deze methode __construct()
.
Waarom handig?
Met een constructor hoef je niet handmatig eigenschappen toe te wijzen nadat je een object hebt aangemaakt.
Voorbeeld zonder constructor:
<?php
class Auto {
public $merk;
public $bouwjaar;
}
$auto = new Auto();
$auto->merk = "Toyota";
$auto->bouwjaar = 2018;
?>
Voorbeeld met constructor:
<?php
class Auto {
public $merk;
public $bouwjaar;
public function __construct($merk, $bouwjaar) {
$this->merk = $merk;
$this->bouwjaar = $bouwjaar;
}
}
$auto = new Auto("Toyota", 2018);
?>
🛠️ Opdracht – Constructor gebruiken
- Maak een nieuw bestand:
les3-student.php
- Maak opnieuw een class
Student
met eigenschappen:voornaam
,achternaam
enopleiding
. - Voeg een constructor toe waarin deze waarden worden ingesteld.
- Maak een methode
stelVoor()
die de gegevens netjes toont. - Maak minstens twee objecten aan en laat de
stelVoor()
-methode zien in de browser.
🧠 Reflectie
- Wat is het voordeel van een constructor ten opzichte van handmatige toekenning?
- Wat gebeurt er als je het aantal parameters niet goed doorgeeft?
- Wat betekent
$this->...
in de constructor?
📤 Inleveren
- Bestandsnaam:
les3-student.php
- Reflectievragen in een apart bestand:
reflectie-les3-<jouw-naam>.txt
4 Methoden met parameters en returnwaardes
🎯 Leerdoelen
- Je begrijpt hoe je een methode maakt die parameters accepteert.
- Je kunt een methode schrijven die een waarde teruggeeft met
return
. - Je ziet hoe objectmethoden kunnen samenwerken met parameters uit de code.
💡 Uitleg
Wat is een parameter?
Een parameter is een waarde die je doorgeeft aan een methode, zodat deze methode die waarde kan gebruiken in de berekening of actie.
Wat is een returnwaarde?
Met return
geef je een resultaat terug uit een methode, zodat je dat resultaat ergens anders kunt gebruiken.
Voorbeeld:
<?php
class Rekening {
public $saldo;
public function __construct() {
$this-saldo = 0;
}
public function stort($bedrag) {
// vul hier de code aan
}
public function toonSaldo() {
// vul hier de code aan
}
}
$mijnRekening = new Rekening();
$mijnRekening->stort(50);
echo "Je saldo is: ". $mijnRekening->toonSaldo();
?>
🛠️ Opdracht – Werk met parameters en return
- Maak een nieuw bestand:
les4-rekening.php
- Maak een class
Rekening
met een startsaldo van 0. - Voeg een methode
stort($bedrag)
toe die het bedrag bij het saldo optelt.
💡Tip: vegeet niet$this->
te gebruiken! - Voeg een methode
opname($bedrag)
toe die het bedrag van het saldo afhaalt. - Voeg een methode
toonSaldo()
toe die het saldo teruggeeft metreturn
. - Test de class met een paar stortingen en paar opnames. Toon aan dat:
- dat stortingen het saldo verhogen
- dat opnames het saldo verlagen
- dat een te hoge opname het saldo niet verandert
Probeer het zonder code, maar kom je er niet uit dan kun je deze code als template gebruiken .
Template
echo "<pre>";
$rekening = new Rekening();
// Test 1: stort 50
// .......
echo "Test 1: verwacht 50 → resultaat: "......
// Test 2: opname van 20
// ......
echo "Test 2: verwacht 30 → resultaat: " ........
// Test 3: opname van 100 (te veel)
.......
echo "Test 3: verwacht nog steeds 30 → resultaat: " ........
echo "</pre>";
🧠 Reflectie
- Wat gebeurt er als je een opname doet die groter is dan je saldo?
- Waarom heeft de constructor in de class Rekening in het voorbeeld geen parameter (om het saldo op 0 te zetten)?
- Wat zijn de voordelen van werken met
return
?
📤 Inleveren
- Bestandsnaam:
les4-rekening.php
- Reflectievragen in een apart bestand:
reflectie-les4-<jouw-naam>.txt
5 Checkpoint: Wat heb je geleerd?
🚦Samenvatting
-
Classes & Objects
-
Je kent het verschil tussen een class (blauwdruk) en een object (instantie).
-
Je weet hoe je met
new
een object maakt.
-
-
Properties & Methods
-
Je gebruikt
public
properties om data in een object op te slaan. -
Je roept methods aan met parameters (
method($param)
) en begrijpt wat een returnwaarde is.
-
-
Constructors
-
Je kunt een
__construct()
schrijven om bij creatie van een object meteen eigenschappen in te stellen. -
Je weet dat
$this->…
verwijst naar de huidige instantie.
-
-
Encapsulation Basics
-
Je begrijpt waarom je data soms
private
maakt en via getters/setters benadert.
-
Tip: Ga kort na of je in je eigen voorbeelden bovenstaande concepten herkent en toepast voordat je verdergaat naar encapsulation en private properties in Les 5.
🛠️ Opdracht
Maak van elk van de vier genoemde onderwerpen een mulitple choice vraag, met 3 foute en één goed antwoord. Als de vragen goed zijn dan zullen ze terug komen in de kennis-check.
Voorbeeld/template
Vraag: Wat is een object?
A: Dat is een variabele in een class.
B: Dat is een instantie van een class.
C: Dat is een functie in een class
D: Dat is een data-structuur in PHP.
Juiste antwoord is B
Vraag:
A:
B:
C:
D:
Juiste antwoord is:
Vraag:
A:
B:
C:
D:
Juiste antwoord is:
Vraag:
A:
B:
C:
D:
Juiste antwoord is:
Vraag:
A:
B:
C:
D:
Juiste antwoord is:
📤 Inleveren
De vier mulitple choice vragen in txt bestand.
6 Encapsulation en private properties
🎯 Leerdoelen
- Je weet wat encapsulation is.
- Je begrijpt het verschil tussen
public
enprivate
. - Je kunt
getters
ensetters
gebruiken om toegang tot eigenschappen te regelen.
💡 Uitleg
Encapsulation betekent dat je data (properties van een class) beschermt tegen direct aanpassen van buiten de class. In plaats daarvan gebruik je methods om de data op een gecontroleerde manier te bekijken of aan te passen.
Waarom gebruiken?
Zo voorkom je fouten doordat andere delen van je code zomaar eigenschappen aanpassen zonder controle.
Voorbeeld:
<?php
class Bankrekening {
private $saldo = 0;
public function stort($bedrag) {
if ($bedrag > 0) {
$this->saldo += $bedrag;
}
}
public function getSaldo() {
return $this->saldo;
}
}
$rekening = new Bankrekening();
$rekening->stort(100);
echo "Saldo: ".$rekening->getSaldo();
?>
🛠️ Opdracht – Bescherm je data
- Maak een nieuw bestand:
les5-bankrekening.php
- Maak een class
Bankrekening
met eenprivate
eigenschap$saldo
. - Maak een
stort()
-methode die alleen positief bedrag accepteert. - Maak een
getSaldo()
-methode die het saldo teruggeeft. - Test de class met verschillende stortingen en probeer ook een negatieve storting (die moet worden geweigerd).
- Maak nu een
opnemen($bedrag)
waarmee je geld kan opnemen. Zorg ervoor dat je alleen geld kan opnemen als je voldoende saldo hebt. Heb je dat niet, dan vind er geen opname plaats. - Test de method opname($bedrag) uit!
🧠 Reflectie
- Wat is het verschil tussen
public
enprivate
? - Waarom zou je eigenschappen
private
maken? - Wat gebeurt er als je probeert
$saldo
direct aan te passen:$rekening->saldo = 1000;
Wat zie je? En hoe verklaar je dat?
📤 Inleveren
- Bestandsnaam:
les5-bankrekening.php
- Reflectievragen in pdf.
7 Bibliotheeksysteem met Twee Classes
🎯 Leerdoelen
- Je maakt en gebruikt meerdere classes in één project.
- Je begrijpt hoe objecten van verschillende classes met elkaar communiceren.
- Je oefent met private properties, getters/setters en method-parameters.
- Je bouwt een klein functioneel systeem met relaties tussen objecten.
💡 Uitleg
In dit mini-project bouw je een eenvoudig bibliotheeksysteem met slechts twee classes:
- Book: een boek met een titel, auteur en beschikbaarheidsstatus.
- Library: beheert een collectie boeken en wie ze geleend heeft.
🛠️ Opdracht – Bouw je eigen bibliotheek
Book Class
Book.php bevat de class Book waarmee je het object book kan maken.
Een boek heeft een title, een author en een available (beschikbaarheid). De class bevat getters en setters om deze properties te lezen en aan te passen.
book.php
<?php
class Book {
private string $title;
private string $author;
private bool $available = true;
public function __construct(string $title, string $author) {
$this->title = $title;
$this->author = $author;
}
public function getTitle(): string {
return $this->title;
}
public function getAuthor(): string {
return $this->author;
}
public function isAvailable(): bool {
return $this->available;
}
public function setAvailable(bool $avail): void {
$this->available = $avail;
}
}
?>
Library Class
De class Library maakt gebruik van de class Book. Deze class kan boeken toevoegen aan de library, kan boeken uitlenen en boeken weer terugnemen. Als laatst is er een method waarmee je alle boeken uit de library kan tonen.
library.php
<?php
require_once 'book.php';
class Library {
private array $books = [];
private array $loans = [];
public function addBook(Book $book): void {
// Voeg het boek toe onder de sleutel van de titel
$this->books[$book->getTitle()] = $book;
}
public function lendBook(string $title, string $member): string {
// Bestaat het boek?
if (!isset($this->books[$title])) {
return "Boek “{$title}” bestaat niet.\n";
}
$book = $this->books[$title];
// Is het al uitgeleend?
if (!$book->isAvailable()) {
return "Boek “{$title}” is al uitgeleend.\n";
}
// Leen uit
$book->setAvailable(false);
$this->loans[$title] = $member;
return "{$member} leent “{$title}”.\n";
}
public function returnBook(string $title): string {
// Bestaat het boek?
if (!isset($this->books[$title])) {
return "Boek “{$title}” bestaat niet.\n";
}
// Was het uitgeleend?
if (!isset($this->loans[$title])) {
return "Boek “{$title}” was niet uitgeleend.\n";
}
// Verwerk retour
$member = $this->loans[$title];
unset($this->loans[$title]);
$this->books[$title]->setAvailable(true);
return "{$member} brengt “{$title}” terug.\n";
}
public function listBooks(): string {
$output = '';
foreach ($this->books as $book) {
if ($book->isAvailable()) {
$status = 'beschikbaar';
} else {
$status = 'uitgeleend aan ' . $this->loans[$book->getTitle()];
}
$output .= $book->getTitle() . ' – ' . $status . "\n";
}
return $output;
}
}
Main code
In de main code wordt de class library gebruikt om boeken in de library te zetten en uit te lenen of terug te nemen.
Met deze code wordt de library- en book class getest.
Kijk goed wat er gebeurt en probeer het te begrijpen.
main.php
<?php
require_once 'book.php';
require_once 'library.php';
echo '<pre>';
$lib = new Library();
$lib->addBook(new Book('1984', 'George Orwell'));
$lib->addBook(new Book('De Avonden', 'Gerard Reve'));
echo "Leen boek 1884 uit aan Alice<br>resultaat: ";
echo $lib->lendBook('1984', 'Alice');
echo "<br>";
echo "Leen boek 1884 uit aan Bob<br>resultaat: ";
echo $lib->lendBook('1984', 'Bob'); // Alice heeft het nog
echo "<br>";
echo "Laat alle Boeken zien<br>resultaat: ";
echo $lib->listBooks();
echo "<br>";
echo "Boek 1984 wordt tgeruggebracht<br>resultaat: ";
echo $lib->returnBook('1984');
echo "<br>";
echo "Leen boek 1884 uit aan Bob<br>resultaat: ";
echo $lib->lendBook('1984', 'Bob'); // nu kan Bob lenen
echo "<br>";
echo "Laat alle Boeken zien<br>resultaat: ";
echo $lib->listBooks();
echo "<br>";
echo '</pre>'
?>
Overzicht
Hier zie je een eenvoudige UML-class-diagram die laat zien hoe de class Library en de class Book met elkaar communiceren
-
Library
-
Bevat een collectie (
books
) vanBook
-objecten. -
Methoden zoals
addBook()
,lendBook()
,returnBook()
enlistBooks()
gebruiken deBook
-objecten.
-
-
Book
-
Heeft private eigenschappen:
title
,author
,available
(en eventueelloansCount
). -
Biedt publieke getters (
getTitle()
,isAvailable()
) en een setter (setAvailable()
) om zijn status te wijzigen.
-
De pijlen geven aan dat de Library
klas methoden aanroept op de Book
objecten, bijvoorbeeld bij het uitlenen (zetten available
op false
) en het terugbrengen (zetten available
op true
). Zo zie je visueel hoe de objecten samenwerken binnen het systeem.
🛠️ Opdracht
Van elk boek wi je bijhouden hoevaak ht is uitgeleend.
- Voeg een property toe aan de class Book en nome die
$aantalKeerUitgeleend
. - Verhoog de property als een boek wordt uitgeleend met 1.
- Voeg een method
getUileenData()
toe in de class Book en laat deze van elk boek, de titel, auteur en het aantal keer dat dit boek is uitgeleend zien. - Test dit via de code in mainn.php, 1984 is al twee maal uitgeleend, maak nog een derde boek en leen dat ook één maal uit.
Aan het iend hebben we dus drie boeken: één boek is nooit uitgleend, één boek is 1x uitgeleend en één boek is twee maal uitgleend.
🧠 Reflectie
- Wat doet de
foreach loop
in de methodlistBooks()
? - Waarom is
$author
private in Book en kan je de $author van een Book wijzigen? - In de key van
$books
uit de classLibrary
staat de titel van het boek, wat staat er in de value? - Beschijf wat er in de key en de value staat van de $loans uit de class Library.
📤 Inleveren
- De aangepast class Book (book.php).
- De aangepaste main.php
- Antwoord op de reflectievragen (pdf)
8 Complete mini‐project
(ga niet verder voordat je de vorige opdracht goed hebt afgerond)
🎯 Leerdoelen
- Je past classes, objects en constructors toe.
- Je gebruikt public en private properties met getters/setters.
- Je schrijft methods met parameters en returnwaardes.
- Je beheert data in een klein OOP‐systeem.
💡 Uitleg
Je bouwt een klein “winkelmandje”‐systeem in PHP. Je maakt twee classes:
Product
metprivate $naam
,private $prijs
en een constructor.
Voeg getters toe:getNaam()
engetPrijs()
.Winkelmandje
metprivate $items = []
.
Voeg methods toe omvoegToe(Product $p, int $aantal)
,verwijder(Product $p)
engetTotaal(): float
te implementeren.
🛠️ Opdracht – Winkelmandje bouwen
- Maak bestand
les6-product.php
en definieer classProduct
:<?php class Product { private $naam; private $prijs; public function __construct(string $naam, float $prijs) { // ... } public function getNaam(): string { // ... } public function getPrijs(): float { // ... } } ?>
- Maak bestand
les6-winkelmandje.php
en definieer classWinkelmandje
:<?php class Winkelmandje { private $items = []; // array van ['product' => Product, 'aantal' => int] public function voegToe(Product $p, int $aantal): void { // voeg product toe of verhoog aantal // Kijk of het product al in het mandje zit // loop door het winkelmandje heen foreach ($this->items as &$item) { if ($item['product']->getNaam() === $p->getNaam()) { // kijk of we het prodcut al hebben // Verhoog het bestaande aantal $item['aantal'] += $aantal; return; // klaar } } // Anders (hebben we geen return gehad dus: nieuw item toevoegen $this->items[] = [ 'product' => $p, 'aantal' => $aantal ]; } public function verwijder(Product $p): void { // verwijder product volledig uit items ...... } public function getTotaal(): float { // bereken en return totaalprijs ...... } } ?>
- Maak een testscript
les6-test.php
:<?php require 'les6-product.php'; require 'les6-winkelmandje.php'; $p1 = new Product("Boek OOP", 25.50); $p2 = new Product("USB-stick", 8.99); $mandje = new Winkelmandje(); $mandje->voegToe($p1, 2); $mandje->voegToe($p2, 1); $mandje->verwijder($p2); echo "Totaal: €" . $mandje->getTotaal(); ?>
🧠 Reflectie
- Hoe zorg je ervoor dat een
Product
niet negatief geprijsd kan zijn? - Wat gebeurt er als je
voegToe
aanroept met$aantal = 0
? - Waarom gebruik je hier
private
properties en geenpublic
? - Hoe kun je de code uitbreiden met een
updateAantal(Product $p, int $nieuwAantal)
? - In de function
voegToe(Product $p, int $aantal)
moeten we controleren of het prodcut al bestaat. Als dat zo is dan verhogen we het aantal, aders moeten we het product aanmaken. We zouden verwachten dat we met eenif-then-else
controleren of eht product al bestaat. Waarom staat er in de code geenif-then-else
?
📤 Inleveren
- Bestanden:
les6-product.php
,les6-winkelmandje.php
,les6-test.php
- Reflectie in apart bestand:
reflectie-les6-<jouw-naam>.txt
9 Test je Kennis
Wat betekent OOP en hoe verschilt het van procedureel programmeren?
OOP staat voor Objectgeoriënteerd programmeren. In plaats van functies en variabelen apart te gebruiken, bundel je bij OOP data en gedrag in objecten. Zo kun je code beter organiseren, hergebruiken en opsplitsen in logische blokken .
Wat is een klasse in OOP?
Een klasse is een blauwdruk of sjabloon waarin je beschrijft welke gegevens (properties) en functies (methods) een object moet hebben .
Wat is een object?
Een object is een concreet exemplaar van een klasse, gemaakt met new. Je kunt meerdere objecten maken van dezelfde klasse, elk met eigen waarden .
Hoe noem je in OOP een variabele en een functie binnen een klasse?
In OOP noem je variabelen properties, en functies methods
Wat is encapsulation?
Encapsulation betekent dat je de data (properties) van een object beschermt. Je maakt gegevens vaak private en gebruikt methods om ze gecontroleerd te lezen of aanpassen .
Wat is het verschil tussen public en private properties/methods?
-
public: toegankelijk en aanpasbaar van buiten de class.
-
private: alleen toegankelijk binnen de class zelf. Dit beschermt de interne gegevens.
Waarom is OOP handig bij grote projecten?
Omdat je code makkelijker kunt organiseren in logische blokken (objecten), hergebruiken, uitbreiden en onderhouden. Daardoor is je programma stabieler en schaalbaarder .
Waarvoor genbruik je '$this' -> in PHP?
$this->
verwijst naar een property of een object uit dit object. Met dit object wordt bedoeld het object waar $this->
in staat.
7 Inheritance (Overerving)
🌟 Leerdoelen
- Je weet wat inheritance (overerving) betekent in OOP.
- Je kunt een class maken die eigenschappen en methodes erft van een andere class.
- Je ziet waarom inheritance handig is: minder herhaling, meer overzicht.
💡 Uitleg
Wat is inheritance?
Inheritance betekent dat je een nieuwe class maakt die eigenschappen en methodes overneemt van een andere class. Dit heet overerving. De 'ouderclass' noem je ook wel de superclass, en de 'kindclass' de subclass.
Voorbeeld
<?php
class Dier {
public $naam;
public function adem() {
echo $this->naam . " ademt.\n";
}
}
class Hond extends Dier {
public function blaf() {
echo $this->naam . " zegt: Woef!\n";
}
}
$rex = new Hond();
$rex->naam = "Rex";
$rex->adem(); // komt uit Dier
$rex->blaf(); // komt uit Hond
?>
👉 De class Hond
erft de methode adem()
van Dier
, maar voegt ook zijn eigen gedrag toe: blaf()
.
🛠️ Opdracht – Maak je eigen dier met overerving
- Bestand: dier.php
Maak een classDier
met:- een property
$naam
- een methode
beweeg()
die"{$this->naam} beweegt."
toont
- een property
- Bestand: vogel.php
Maak een classVogel
dieextends Dier
:- een methode
vlieg()
die"{$this->naam} vliegt!"
toont
- een methode
- Bestand: test.php
- Maak een object
$mus
van de classVogel
- Stel zijn naam in op
"Mus"
- Roep zowel
beweeg()
alsvlieg()
aan
- Maak een object
🧠 Reflectie
- Wat gebeurt er als je
vlieg()
oproept op eenDier
-object? - Kun je uitleggen waarom
Vogel
de methodebeweeg()
kan gebruiken zonder die zelf te schrijven?
📄 Inleveren
dier.php
,vogel.php
,test.php
- Reflectie in
reflectie-les7-<jouw-naam>.txt
OOP Challenge
Challenge A: OOP Login Systeem
🔰 Inleiding, wat ga je doen?
De OOP Challenge is een fantastische kans om jouw vaardigheden in objectgeoriënteerd programmeren (OOP) naar een hoger niveau te tillen en direct toe te passen in de praktijk. Je combineert je Cyber Security vaardigheden met de OOP vaardigheden.
Je hebt de keuze uit twee boeiende projecten;
- je maakt een OOP Login Systeem, of
- je maakt een (mobiele) ToDo manager die je kan omzetten naar een mobiele applicatie, dit is lastiger maar ook veel leuker want je maakt een echte mobiele app!
🌟 Leerdoelen
- Je past klassen, objecten, constructors en methodes toe in een realistisch scenario.
- Je gebruikt encapsulation om gebruikersgegevens te beveiligen.
- Je slaat gebruikers op met PDO en hashed wachtwoorden.
- Je maakt een registratie- en loginroutine in OOP-stijl.
💡 Opdrachtbeschrijving
Situatie: Je werkt bij een klein webbureau en een klant wil een eenvoudig maar veilig login-systeem laten bouwen in PHP. Je gaat dit project zelfstandig uitvoeren als een mini-challenge. Dit is een uitstekende kans om je OOP-vaardigheden te laten zien in je GitHub portfolio. Dat kan je helpen om sneller een stage of baan te vinden in de webdevelopment-sector!
Wat je gaat bouwen:
- Een registratiepagina waar nieuwe gebruikers zich kunnen aanmelden
- Een loginpagina waar gebruikers zich kunnen aanmelden
- Beveiligde opslag van wachtwoorden via
password_hash()
- Gebruik van
PDO
voor communicatie met de database (bijv. SQLite of MySQL)
📄 Structuur en Klassen
- Class User
- Properties:
private $id
,$username
,$passwordHash
- Constructor stelt naam + wachtwoord in (en hashed het wachtwoord)
- Methode
verifyPassword($plainText)
vergelijkt met hash - Getters voor
getId()
engetUsername()
- Properties:
- Class UserDatabase
- Maakt verbinding via
PDO
(gebruik SQLite of MySQL) - Methodes:
addUser(User $user)
,findUserByUsername($name)
- Prepared statements verplicht!
- Maakt verbinding via
🚀 Technische vereisten
- Gebruik password_hash() en password_verify() voor wachtwoorden
- PDO met prepared statements (geen ruwe SQL!)
- Toon foutmeldingen bij fouten (bestaande user, fout wachtwoord, etc.)
🛠️ Bestanden
User.php
– beschrijft de user zelfUserDatabase.php
– regelt opslag en ophalenregister.php
– laat gebruiker registrerenlogin.php
– laat gebruiker inloggenlogin-success.php
– pagina die je ziet na succesvol inloggen
🧠 Reflectie
- Wat zijn de voordelen van wachtwoord hashing?
- Waarom gebruiken we een aparte klasse voor opslag en een voor gebruikers?
- Wat zou je uitbreiden als je dit systeem echt online wilde zetten?
📅 Bonus: Voor je portfolio
Zet dit project op GitHub met een korte uitleg in de README over hoe het werkt. Voeg schermafbeeldingen toe van het registratie- en loginproces. Dit is een mooi voorbeeldproject om te laten zien wat je kunt!
✨ Gebruik AI
AI gebruik op de juiste manier, zoals geleerd tijdens de lessen, is toegestaan en wordt zelfs aangemoedigd.
Het is wel verplicht om de AI log in te leveren en je moet je code kunnen uitleggen!
📄 Inleveren
- AI log - alle hulp van AI inleveren!
- SQL export.
- Alle bestanden nodig voor jouw website.
- Reflective in PDF
- (Optioneel) Link naar je GitHub repository
Challenge B: (mobiele) OOP ToDo Manager
🔰 Inleiding, wat ga je doen?
De OOP Challenge is een fantastische kans om jouw vaardigheden in objectgeoriënteerd programmeren (OOP) naar een hoger niveau te tillen en direct toe te passen in de praktijk. Je combineert je Cyber Security vaardigheden met de OOP vaardigheden.
Je hebt de keuze uit twee boeiende projecten;
- je maakt een OOP Login Systeem, of
- je maakt een (mobiele) ToDo manager die je kan omzetten naar een mobiele applicatie, dit is lastiger maar ook veel leuker want je maakt een echte mobiele app!
🌟 Leerdoelen
- Je past OOP toe in een realistisch webproject.
- Je maakt meerdere klassen die met elkaar samenwerken.
- Je gebruikt PDO en password hashing op een veilige manier.
- Je bouwt een werkend mini-systeem dat je op GitHub kunt zetten.
💡 Opdrachtbeschrijving
Situatie: Een start-up wil een prototype van een eenvoudige "ToDo Manager" waarin gebruikers taken kunnen aanmaken, afvinken en verwijderen. Jij bouwt dit systeem in PHP met OOP. Dit is een mooie kans om een compleet mini-project te maken voor je GitHub portfolio — ideaal om te laten zien bij een sollicitatie voor stage of werk!
📄 Functionaliteiten
- Registratiepagina: nieuwe gebruikers kunnen zich aanmelden
- Loginpagina: gebruikers kunnen inloggen met hun wachtwoord
- Taakpagina: ingelogde gebruikers kunnen taken toevoegen, afvinken en verwijderen
- Alle data wordt opgeslagen in een database met PDO (SQLite of MySQL).
📱 Mobiele App (optioneel)
- Je kan de ToDo manager omzetten naat een Progressive Web App. Je krijgt de beste gebruikers ervaring als je je ToDO manager zoveel mogelijk omzet naar een Single Page Web Application (SPA). Dat kan met een Framework, maar ook met JavaScript.
Wat is een SPA en een Progressive Web App?
Een one page applicatie (of Single Page Application, afgekort SPA) is een webapplicatie of website die uit één HTML-pagina bestaat en dynamisch inhoud laadt, zonder de hele pagina opnieuw te laden bij navigatie of interactie.
🔧 Hoe werkt het?
Bij een SPA:
-
Wordt bij het eerste bezoek één HTML-pagina geladen.
-
Daarna worden alleen delen van de pagina aangepast via JavaScript (meestal met behulp van frameworks zoals React, Vue of Angular).
-
Communicatie met de server gebeurt via AJAX of fetch()-aanroepen om data op te halen of op te slaan, vaak in JSON-formaat.
Je kunt een SPA omzetten in een PWA, Progressieve Web App.
💡 Wat is een PWA?
Een PWA is een website die aanvoelt als een app. Je opent hem in de browser, maar je kunt hem ook op je telefoon zetten als icoon, net zoals een echte app uit de App Store of Play Store.
📱 Hoe werkt het?
Een PWA:
-
Start gewoon via je browser (zoals Safari of Chrome)
-
Kan op je beginscherm gezet worden als een app-icoon
-
Werkt ook offline als je het goed instelt
-
Ziet eruit en werkt zoals een gewone app
Wil je een Mobiele app op deze manier maken, laat AI je dan de details verder uitleggen,
📄 Klassen
- Class User
- Properties:
$id
,$username
,$passwordHash
- Constructor en
verifyPassword($plainText)
- Properties:
- Class UserDatabase
- Maakt verbinding via
PDO
- Methodes:
addUser()
,findUserByUsername()
- Maakt verbinding via
- Class Task
- Properties:
$id
,$user_id
,$description
,$completed
- Methodes:
toggleCompleted()
,getDescription()
,isCompleted()
- Properties:
- Class TaskManager
- Methodes:
addTask()
,getTasksByUser()
,deleteTask()
,toggleTask()
- Alle database-interacties via
PDO
met prepared statements
- Methodes:
🧠 Reflectie
- Waarom werken we met meerdere klassen in plaats van één grote?
- Wat gebeurt er als een niet-ingelogde gebruiker naar de takenpagina navigeert?
- Hoe zorgt jouw systeem ervoor dat taken niet tussen gebruikers verwisseld kunnen worden?
📅 Bonus voor je portfolio
Zet dit project op GitHub. Voeg screenshots toe en schrijf een README-bestand waarin je uitlegt wat het systeem doet. Dit laat aan stagebedrijven of werkgevers zien dat jij zelfstandig een werkend OOP-project kunt bouwen!
✨ Gebruik AI
AI gebruik op de juiste manier, zoals geleerd tijdens de lessen, is toegestaan en wordt zelfs aangemoedigd.
Het is wel verplicht om de AI log in te leveren en je moet je code kunnen uitleggen!
📄 Inleveren
- AI log - alle hulp van AI inleveren!
- SQL export.
- Alle bestanden nodig voor jouw website.
- Reflective in PDF
- (Optioneel) Link naar je GitHub repository
--
OOP Inheritance
1 Inheritance (Overerving)
🌟 Leerdoelen
- Je weet wat inheritance (overerving) betekent in OOP.
- Je kunt een class maken die eigenschappen en methodes erft van een andere class.
- Je ziet waarom inheritance handig is: minder herhaling, meer overzicht.
💡 Uitleg
Wat is inheritance?
Inheritance betekent dat je een nieuwe class maakt die eigenschappen en methodes overneemt van een andere class. Dit heet overerving. De 'ouderclass' noem je ook wel de superclass, en de 'kindclass' de subclass.
Voorbeeld
<?php
class Dier {
public $naam;
public function adem() {
echo $this->naam . " ademt.\n";
}
}
class Hond extends Dier {
public function blaf() {
echo $this->naam . " zegt: Woef!\n";
}
}
$rex = new Hond();
$rex->naam = "Rex";
$rex->adem(); // komt uit Dier
$rex->blaf(); // komt uit Hond
?>
👉 De class Hond
erft de methode adem()
van Dier
, maar voegt ook zijn eigen gedrag toe: blaf()
.
🛠️ Opdracht – Maak je eigen dier met overerving
- Bestand: dier.php
Maak een classDier
met:- een property
$naam
- een methode
beweeg()
die"{$this->naam} beweegt."
toont
- een property
- Bestand: vogel.php
Maak een classVogel
dieextends Dier
:- een methode
vlieg()
die"{$this->naam} vliegt!"
toont
- een methode
- Bestand: test.php
- Maak een object
$mus
van de classVogel
- Stel zijn naam in op
"Mus"
- Roep zowel
beweeg()
alsvlieg()
aan
- Maak een object
🧠 Reflectie
- Wat gebeurt er als je
vlieg()
oproept op eenDier
-object? - Kun je uitleggen waarom
Vogel
de methodebeweeg()
kan gebruiken zonder die zelf te schrijven?
📄 Inleveren
dier.php
,vogel.php
,test.php
- Reflectie in
reflectie-les7-<jouw-naam>.txt
Kennis Check Blok 8
Cyber Security
Hoofdstuk 1: Wat is Cyber Security?
1. Wat is de primaire focus van Cyber Security?
- a) Het beschermen van websites tegen computer-bugs
- b) Het beschermen van computersystemen tegen aanvallen en misbruik.
- c) Het ontwikkelen van nieuwe softwareprogramma's.
- d) Het beheren van netwerkinfrastructuur.
✅ Antwoord
b) Het beschermen van computersystemen tegen aanvallen en misbruik.
2. Welke van de volgende cyberaanvallen omvat het misleiden van iemand om wachtwoorden af te geven, vaak via nep-e-mails?
- a) Malware
- b) DDoS-aanval
- c) Phishing
- d) SQL-injection
✅ Antwoord
c) Phishing
Welke term wordt gebruikt voor software die ontworpen is om ongevraagd advertenties te tonen en je naar bepaalde webwinkels stuurt?
- a) Adware
- b) Spam
- c) Malware
- d) Commerceware
✅ Antwoord
c) Adware
Welke vorm van malware kan zichzelf verspreiden naar andere bestanden of programma's zodra het op een computer is geïnstalleerd?
- a) Worm
- b) Spyware
- c) Virus
- d) Adware
✅ Antwoord
c) Virus
Hoofdstuk 2: HTTPS en netwerkveiligheid
3. Wat is het belangrijkste verschil tussen HTTP en HTTPS?
- a) HTTPS is alleen voor professionele websites, HTTP voor persoonlijke.
- b) HTTPS staat voor HyperText Transfer Protocol Secure en versleutelt de communicatie tussen browser en server.
- c) HTTP is sneller dan HTTPS.
- d) HTTP gebruikt een SSL-certificaat, HTTPS niet.
✅ Antwoord
b) HTTPS staat voor HyperText Transfer Protocol Secure en versleutelt de communicatie tussen browser en server.
4. Waarvoor biedt HTTPS geen bescherming?
- a) Het onderscheppen van ingevulde wachtwoorden door derden.
- b) Het veranderen van informatie terwijl deze onderweg is.
- c) Het downloaden van virussen of malware.
- d) Verbinding maken met de echte website in plaats van een nepserver.
✅ Antwoord
c) Het downloaden van virussen of malware.
Hoofdstuk 3: Encryptie
5. Wat is de definitie van encryptie?
- a) Het proces van het verbergen van bestanden op een computer.
- b) Het omzetten van gegevens zodat ze onleesbaar zijn voor onbevoegden, tenzij men de juiste ‘sleutel’ heeft.
- c) Het back-uppen van gegevens naar een externe schijf.
- d) Het controleren van de integriteit van gegevens.
✅ Antwoord
b) Het omzetten van gegevens zodat ze onleesbaar zijn voor onbevoegden, tenzij men de juiste ‘sleutel’ heeft.
6. Welk type encryptie gebruikt dezelfde sleutel voor zowel versleuteling als ontsleuteling?
- a) Asymmetrische encryptie
- b) Hash-encryptie
- c) Symmetrische encryptie
- d) Kwantumencryptie
✅ Antwoord
c) Symmetrische encryptie
Hoofdstuk 4: Hashing
7. Waarom wordt hashing vaak gebruikt voor het opslaan van wachtwoorden?
- a) Omdat de wachtwoorden dan eenvoudig terug te rekenen zijn voor de gebruiker.
- b) Omdat het een eenrichtingsversleuteling is die niet terug te rekenen is naar het origineel.
- c) Omdat het wachtwoorden comprimeert om opslagruimte te besparen.
- d) Omdat het helpt bij het snel ophalen van verloren wachtwoorden.
✅ Antwoord
b) Omdat het een eenrichtingsversleuteling is die niet terug te rekenen is naar het origineel.
8. Hoe controleert een systeem een ingevoerd wachtwoord als het opgeslagen wachtwoord gehasht is?
- a) Het systeem probeert de opgeslagen hash terug te rekenen naar het originele wachtwoord.
- b) Het systeem stuurt een resetlink naar het e-mailadres van de gebruiker.
- c) Het systeem zet het ingevoerde wachtwoord om met de hash-functie en vergelijkt het resultaat met de opgeslagen hash.
- d) Het systeem vraagt de gebruiker om een tweede authenticatiefactor.
✅ Antwoord
c) Het systeem zet het ingevoerde wachtwoord om met de hash-functie en vergelijkt het resultaat met de opgeslagen hash.
Hoofdstuk 5: Brute Force-aanvallen en Loginbeveiliging
9. Wat is een brute force-aanval?
- a) Een aanval waarbij een server wordt overspoeld met aanvragen.
- b) Een aanval waarbij kwaadaardige software op een systeem wordt geïnstalleerd.
- c) Een aanval waarbij systematisch heel veel verschillende wachtwoorden worden geprobeerd om toegang te krijgen.
- d) Een aanval waarbij via een formulier een database wordt gehackt.
✅ Antwoord
c) Een aanval waarbij systematisch heel veel verschillende wachtwoorden worden geprobeerd om toegang te krijgen.
10. Welke van de volgende is geen methode om brute force-aanvallen te voorkomen?
- a) Een limiet stellen op het aantal pogingen.
- b) Tijdelijk een gebruiker of IP-adres blokkeren.
- c) Twee-factor authenticatie toepassen.
- d) Het gebruik van $_GET voor het versturen van inloggegevens.
✅ Antwoord
d) Het gebruik van $_GET voor het versturen van inloggegevens.
Hoofdstuk 6: Rainbow tables
11. Wat is een rainbow table?
- a) Een lijst van alle mogelijke wachtwoorden.
- b) Een database van gehackte IP-adressen.
- c) Een lijst van veelgebruikte wachtwoorden met hun bijbehorende hashes.
- d) Een hulpmiddel om SSL-certificaten te genereren.
✅ Antwoord
c) Een lijst van veelgebruikte wachtwoorden met hun bijbehorende hashes.
12. Waarom zijn rainbow tables gevaarlijk voor wachtwoordbeveiliging?
- a) Ze zorgen ervoor dat servers overbelast raken.
- b) Ze maken het mogelijk om gehashte wachtwoorden snel terug te vertalen naar het origineel als het wachtwoord in de tabel staat.
- c) Ze installeren malware op het systeem van de gebruiker.
- d) Ze versleutelen de communicatie tussen de gebruiker en de website.
✅ Antwoord
b) Ze maken het mogelijk om gehashte wachtwoorden snel terug te vertalen naar het origineel als het wachtwoord in de tabel staat.
Hoofdstuk 7: Salting en encryptie
13. Wat is het hoofddoel van 'salting' bij het hashen van wachtwoorden?
- a) Om het hash-algoritme complexer te maken.
- b) Om ervoor te zorgen dat hetzelfde wachtwoord elke keer een unieke hash krijgt, wat rainbow tables minder effectief maakt.
- c) Om de snelheid van het hashen te verhogen.
- d) Om te controleren of een wachtwoord sterk genoeg is.
✅ Antwoord
b) Om ervoor te zorgen dat hetzelfde wachtwoord elke keer een unieke hash krijgt, wat rainbow tables minder effectief maakt.
14. Hoe wordt een gehasht wachtwoord met een 'salt' gecontroleerd bij het inloggen?
- a) Het systeem probeert de opgeslagen hash te ontsleutelen met de salt.
- b) Het ingevoerde wachtwoord wordt gehasht zonder de salt en vergeleken met de opgeslagen hash.
- c) Het ingevoerde wachtwoord wordt opnieuw gehasht samen met dezelfde opgeslagen salt, en het resultaat wordt vergeleken met de opgeslagen hash.
- d) De gebruiker wordt gevraagd om de salt handmatig in te voeren.
OOP
Wat betekent OOP en hoe verschilt het van procedureel programmeren?
OOP staat voor Objectgeoriënteerd programmeren. In plaats van functies en variabelen apart te gebruiken, bundel je bij OOP data en gedrag in objecten. Zo kun je code beter organiseren, hergebruiken en opsplitsen in logische blokken .
Wat is een klasse in OOP?
Een klasse is een blauwdruk of sjabloon waarin je beschrijft welke gegevens (properties) en functies (methods) een object moet hebben .
Wat is een object?
Een object is een concreet exemplaar van een klasse, gemaakt met new. Je kunt meerdere objecten maken van dezelfde klasse, elk met eigen waarden .
Hoe noem je in OOP een variabele en een functie binnen een klasse?
In OOP noem je variabelen properties, en functies methods
Wat is encapsulation?
Encapsulation betekent dat je de data (properties) van een object beschermt. Je maakt gegevens vaak private en gebruikt methods om ze gecontroleerd te lezen of aanpassen .
Wat is het verschil tussen public en private properties/methods?
-
public: toegankelijk en aanpasbaar van buiten de class.
-
private: alleen toegankelijk binnen de class zelf. Dit beschermt de interne gegevens.
Waarom is OOP handig bij grote projecten?
Omdat je code makkelijker kunt organiseren in logische blokken (objecten), hergebruiken, uitbreiden en onderhouden. Daardoor is je programma stabieler en schaalbaarder .
Waarvoor genbruik je '$this' -> in PHP?
$this->
verwijst naar een property of een object uit dit object. Met dit object wordt bedoeld het object waar $this->
in staat.
🛠️ Opdracht
Maak de kennis-check.
📤 Inleveren
Aan het einde van de kennis-check ontvang je een certificaat. Maak een schermafdruk en lever deze in.
PHP - Debuggen
1 Foutafhandeling en Basis Debugging in PHP
🎯 Leerdoelen
- Je weet wat de verschillende typen PHP-fouten zijn (
Errors
,Warnings
,Notices
). - Je kunt foutmeldingen in PHP interpreteren.
- Je kunt foutweergave instellen met
error_reporting()
enini_set()
. - Je kunt basisprincipes van foutafhandeling toepassen (zoals
isset()
,empty()
,file_exists()
). - Je gebruikt debuggingtechnieken zoals
echo
,print_r()
envar_dump()
.
💡 Uitleg
📌 Soorten fouten in PHP
- Parse error: fout in de code (bijvoorbeeld vergeten ; of haakje).
- Fatal error: code probeert iets wat niet kan, bijvoorbeeld een functie die niet bestaat.
- Warning: foutmelding, maar de code gaat door.
- Notice: melding van iets wat waarschijnlijk fout is (bijv. niet bestaande variabele).
⚙️ Foutmeldingen tonen of verbergen
<?php
// Toon alle fouten
ini_set("display_errors", 1);
error_reporting(E_ALL);
?>
⚠️ Op een live website wil je foutmeldingen verbergen voor gebruikers. Gebruik dan:
ini_set("display_errors", 0);
🔍 Veelgebruikte foutafhandelingstechnieken
isset($variabele)
– controleert of een variabele bestaat.empty($variabele)
– controleert of een variabele leeg is.file_exists("bestand.txt")
– controleert of een bestand bestaat.die("Foutmelding")
ofexit()
– stopt het script bij een ernstige fout.
🛠️ Debuggen zonder debugger
echo
– handig om waardes snel te tonen.print_r($array)
– toont de inhoud van een array of object.var_dump($variabele)
– toont type + waarde (ook handig bij fouten met getallen).
🛠️ Opdracht 1 – Debugging oefenen
- Maak een PHP-bestand genaamd
korting.php
met deze functie:<?php function berekenKorting($prijs, $korting) { return $prijs - $prijs * $korting / 100; } echo berekenKorting(100); // Fout! Tweede parameter ontbreekt ?>
- Voeg foutmeldingen toe via
error_reporting()
zodat je de waarschuwing ziet. - Gebruik
isset()
enempty()
om de fout af te vangen. - Test wat er gebeurt als je een variabele gebruikt die niet bestaat.
- Gebruik
var_dump()
enecho
om te zien wat je fout doet.
🧠 Reflectie
- Wat is het verschil tussen een warning en een fatal error?
- Waarom is het handig om fouten wel te tonen in de ontwikkelfase, maar niet op een live website?
- Welke debuggingtechniek vond je het meest bruikbaar?
📤 Inleveren
- Lever het bestand
korting.php
in. - Lever een korte uitleg in (.txt of .pdf) waarin je aangeeft:
- Welke fout(en) je hebt gevonden
- Welke techniek je gebruikte om het op te lossen
- Wat je ervan geleerd hebt
2 Bestanden en Loggen
🎯 Leerdoelen
- Je kunt bestanden aanmaken, lezen, schrijven en toevoegen met PHP.
- Je weet wanneer het handig is om gegevens in bestanden op te slaan in plaats van een database te gebruiken.
- Je begrijpt wat logbestanden zijn en waarom ze nuttig zijn.
- Je kunt een eenvoudig logsysteem implementeren dat fouten of gebeurtenissen opslaat.
💡 Uitleg
📁 Waarom bestanden gebruiken?
Bestanden kunnen handig zijn voor eenvoudige opslag zoals instellingen, bezoekerslogs of tijdelijke data. In kleine projecten is dit vaak eenvoudiger dan een database.
📄 Bestandsfuncties in PHP
file_put_contents("bestand.txt", "tekst")
– schrijft tekst naar bestand (overschrijft).file_get_contents("bestand.txt")
– leest hele bestand in één keer.fopen()
+fwrite()
– uitgebreidere controle (bijv. toevoegen).file_exists("bestand.txt")
– controleert of bestand bestaat.fclose()
– sluit een bestand (nodig bijfopen()
).
🗒️ Loggen: fouten en gebeurtenissen bijhouden
Een logbestand houdt bij wat er gebeurt in een script. Bijvoorbeeld foutmeldingen of bezoekersactiviteit.
Voorbeeld – logregel opslaan:
<?php
$melding = "[" . date("Y-m-d H:i:s") . "] Foutmelding\n";
file_put_contents("error.log", $melding, FILE_APPEND);
?>
FILE_APPEND
zorgt dat de nieuwe regel onderaan toegevoegd wordt in plaats van het bestand te overschrijven.
🛠️ Opdracht 1 – bezoekersteller.php
- Maak een nieuw bestand
bezoekersteller.php
. - Laat het script een teller bijhouden in
teller.txt
:- Bestaat het bestand nog niet? Begin bij 1.
- Zo niet? Lees het getal in, verhoog met 1, en schrijf het terug.
- Toon het aantal bezoeken op het scherm.
🛠️ Opdracht 2 – gastenboek.php (uitbreiding)
- Maak een script waarin een gebruiker een bericht kan achterlaten via een formulier.
- Sla elk bericht op in
gastenboek.txt
met datum/tijd. - Toon de laatste 5 berichten boven het formulier.
- Gebruik
htmlspecialchars()
om invoer veilig weer te geven.
🧠 Reflectie
- Wat zijn de voor- en nadelen van gegevens opslaan in een bestand ten opzichte van een database?
- Wat gebeurt er als je
file_put_contents()
gebruikt zonderFILE_APPEND
? - Waarom is loggen belangrijk, zelfs in kleine projecten?
📤 Inleveren
- Lever je bestanden
bezoekersteller.php
en/ofgastenboek.php
in. - Lever een reflectieverslag in (.txt of .pdf).
3 Geavanceerde Functies, Abstractie en Modulaire Code
🎯 Leerdoelen
- Je begrijpt waarom functies handig zijn (herbruikbaarheid, leesbaarheid, structuur).
- Je kunt functies gebruiken om complexe taken te verbergen (abstractie).
- Je snapt het verschil tussen globale en lokale variabelen (scope).
- Je kunt functies opslaan in aparte bestanden en deze inladen met
include()
ofrequire()
.
💡 Uitleg
🔁 Waarom functies gebruiken?
- Je hoeft een stuk code maar één keer te schrijven.
- Je kunt de code op meerdere plekken gebruiken.
- Je maakt je code overzichtelijker en makkelijker te begrijpen.
🎩 Abstractie: de details verbergen
Een functie kan iets ingewikkelds doen, zonder dat je telkens opnieuw de details hoeft te schrijven.
function berekenKorting($bedrag, $percentage) {
return $bedrag - ($bedrag * $percentage / 100);
}
echo berekenKorting(100, 10); // → 90
Je hoeft niet telkens opnieuw de hele berekening te typen. De functie “verbergt” die logica.
📦 Variable scope (bereik van een variabele)
- Variabelen binnen een functie zijn lokaal: ze bestaan alleen daarbinnen.
- Variabelen buiten functies zijn globaal.
- Je kunt met
global
een globale variabele binnen een functie gebruiken, maar dat is niet altijd wenselijk.
$x = 5;
function testScope() {
$x = 10;
echo $x; // Toont 10, NIET 5
}
testScope();
echo $x; // Toont nog steeds 5
🧩 Modulaire code met include()
Je kunt functies in een apart bestand zetten, bijvoorbeeld utils.php
, en die inladen in andere bestanden.
// Bestand: utils.php
function toonWelkomstbericht($naam) {
echo "<p>Welkom, $naam!</p>";
}
// Bestand: index.php
include("utils.php");
toonWelkomstbericht("Ali");
Je kunt ook meerdere functies in één bestand zetten, zoals:
validation.php
: functies voor formuliercontroleformat.php
: functies voor tekst- of getalopmaak
🛠️ Opdracht – utils.php gebruiken
- Maak een nieuw bestand
utils.php
en schrijf daarin minstens 3 functies:formatteerBedrag($bedrag)
→ toont bijv. "€ 12,50"valideerInvoer($waarde)
→ controleert of de waarde niet leeg istoonWelkomstbericht($naam)
→ toont HTML met de naam
- Maak een ander bestand
test_utils.php
waarin jeinclude("utils.php")
gebruikt en de functies test. - Gebruik
echo
,print_r()
envar_dump()
om het resultaat van de functies te tonen.
🧠 Reflectie
- Wat zijn de voordelen van functies in aparte bestanden bewaren?
- Welke functie vond je het handigst om te schrijven en waarom?
- Wat heb je geleerd over het verschil tussen globale en lokale variabelen?
📤 Inleveren
- Lever de bestanden
utils.php
entest_utils.php
in. - Lever een reflectiedocument in (.txt of .pdf) waarin je uitlegt wat je hebt gedaan en geleerd.
4 Form Validatie en Beveiliging
🎯 Leerdoelen
- Je kunt formulierinvoer controleren op geldigheid.
- Je kent de risico’s van onveilige invoer (zoals XSS).
- Je kunt invoer ontsnappen met
htmlspecialchars()
. - Je gebruikt functies als
isset()
,empty()
entrim()
om invoer te valideren.
💡 Uitleg
📨 Waarom valideren?
Gebruikers maken fouten. Hackers doen het expres. Daarom controleer je altijd of een formulier goed is ingevuld voordat je ermee werkt.
🔐 Veelvoorkomende gevaren
- XSS (Cross-Site Scripting): iemand vult HTML of JavaScript in een formulier in, dat op jouw pagina wordt getoond.
- Lege velden: de gebruiker vergeet iets in te vullen.
- Verkeerde types: een tekst waar een getal moet staan.
🧰 Handige functies voor validatie
isset($_POST["naam"])
– is het veld verzonden?empty($_POST["naam"])
– is het veld leeg?trim()
– verwijdert spaties voor en na de invoer.htmlspecialchars()
– maakt HTML onschadelijk.
<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
$naam = trim($_POST["naam"]);
if (empty($naam)) {
echo "Vul je naam in.";
} else {
echo "Welkom, " . htmlspecialchars($naam);
}
}
?>
📋 Simpel formulier
<form method="post">
<input type="text" name="naam" placeholder="Je naam">
<input type="submit" value="Verstuur">
</form>
🛠️ Opdracht 1 – formulier_validatie.php
- Maak een PHP-bestand met een formulier waarin je de gebruiker vraagt om:
- Naam
- Leeftijd
- Bericht
- Controleer of alle velden zijn ingevuld. Toon een foutmelding als iets ontbreekt.
- Gebruik
htmlspecialchars()
om het bericht veilig weer te geven. - Gebruik
is_numeric()
om te controleren of de leeftijd een getal is.
Extra (optioneel)
- Maak je foutmeldingen visueel opvallend met HTML (bijv.
<span style="color:red">
).
🧠 Reflectie
- Waarom is het belangrijk om input van gebruikers altijd te controleren?
- Wat zou er kunnen gebeuren als je
htmlspecialchars()
niet gebruikt? - Welke fouten kwamen er tijdens het testen naar boven?
📤 Inleveren
- Lever je bestand
formulier_validatie.php
in (.php). - Lever een reflectiedocument in (.txt of .pdf) met jouw antwoorden.
5 Superglobals en Associatieve Arrays
🎯 Leerdoelen
- Je begrijpt wat superglobals zijn in PHP (
$_GET
,$_POST
,$_SESSION
,$_FILES
). - Je weet wat een associatieve array is en hoe je ermee werkt.
- Je kunt formulierdata opslaan en verwerken met behulp van superglobals.
💡 Uitleg
🌍 Wat zijn superglobals?
Superglobals zijn ingebouwde variabelen in PHP die overal beschikbaar zijn. Je gebruikt ze bijvoorbeeld om gegevens uit een formulier op te halen.
$_POST
– bevat formulierdata die via POST is verzonden$_GET
– bevat data uit de URL (bijv.?pagina=contact
)$_SESSION
– bevat gegevens die je wilt onthouden tussen pagina's$_FILES
– bevat geüploade bestanden
🔑 Associatieve arrays
Een associatieve array is een array met 'sleutels' in plaats van indexnummers:
$persoon = [
"naam" => "Ali",
"leeftijd" => 19,
"email" => "ali@example.com"
];
echo $persoon["naam"]; // Toont: Ali
Formulieren leveren ook associatieve arrays op via $_POST
:
echo $_POST["naam"];
🛠️ Opdracht 1 – formulier_superglobals.php
- Maak een formulier met de volgende velden:
- Naam
- Bericht
- Verwerk de invoer met
$_POST
en sla de gegevens op in een associatieve array:$data = [ "naam" => $_POST["naam"], "email" => $_POST["email"], "bericht" => $_POST["bericht"] ];
- Toon de waarden netjes op het scherm met
htmlspecialchars()
. - Gebruik eventueel
print_r($data)
om de hele array te tonen voor debugging.
🧠 Reflectie
- Wat is het verschil tussen een normale array en een associatieve array?
- Waarom is
$_POST
eigenlijk een associatieve array? - Wanneer zou je liever
$_GET
gebruiken in plaats van$_POST
?
📤 Inleveren
- Lever je bestand
formulier_superglobals.php
in (.php). - Lever een reflectiedocument in (.txt of .pdf) met je antwoorden.
6 Sessies en Cookies
🎯 Leerdoelen
- Je begrijpt wat sessies en cookies zijn.
- Je kunt sessies gebruiken om gegevens tijdelijk op te slaan voor een gebruiker.
- Je kunt cookies aanmaken en uitlezen met PHP.
- Je kunt de juiste techniek kiezen om gebruikersgegevens te bewaren.
💡 Uitleg
🧠 Wat is een sessie?
Een sessie is een manier om informatie te onthouden zolang een gebruiker actief is op de website. Bijvoorbeeld: je logt in en blijft ingelogd op alle pagina’s.
Een sessie start je met:
<?php
session_start();
$_SESSION["naam"] = "Ali";
echo $_SESSION["naam"];
?>
Je kunt sessiegegevens gebruiken zolang de browser open is (of tot je ze verwijdert met session_destroy()
).
🍪 Wat is een cookie?
// Cookie instellen
setcookie("taal", "NL", time() + 3600); // 1 uur geldig
// Cookie uitlezen
echo $_COOKIE["taal"];
📌 Verschillen tussen sessies en cookies
Kenmerk | Sessie | Cookie |
---|---|---|
Opslaglocatie | Server | Browser van gebruiker |
Levensduur | Tijdelijk (tot de browser sluit of je het wist) | In te stellen (bijv. 1 uur, 30 dagen) |
Toepassing | Ingelogde gebruiker, winkelmandje | Voorkeuren, laatst bezochte pagina |
🛠️ Opdracht 1 – sessie_en_cookie.php
- Maak een pagina waar de gebruiker zijn naam kan invoeren via een formulier.
- Na verzenden:
- Sla de naam op in een sessie én in een cookie (1 uur).
- Toon op de pagina: “Welkom terug, [naam]!” als de gebruiker opnieuw langskomt.
- Laat ook zien wat er gebeurt als de gebruiker het formulier overslaat.
- Gebruik
session_start()
bovenaan het script.
Extra (optioneel)
- Voeg een link toe die de sessie wist (
session_destroy()
).
🧠 Reflectie
- Wanneer kies je voor een sessie? En wanneer voor een cookie?
- Wat gebeurt er als je
session_start()
vergeet? - Waar moet je op letten bij het gebruik van cookies met privacy?
📤 Inleveren
- Lever het bestand
sessie_en_cookie.php
in (.php). - Lever een reflectiedocument in (.txt of .pdf) met je antwoorden.
7 State en Bestandgebaseerde 'Database'
🎯 Leerdoelen
- Je begrijpt het concept van ‘state’ in webapplicaties.
- Je kunt gebruikersgegevens opslaan in een tekstbestand.
- Je kunt meerdere records opslaan als gestructureerde regels (bijv. JSON of CSV).
- Je kunt gegevens uit zo’n bestand inlezen en tonen aan de gebruiker.
💡 Uitleg
🧠 Wat is ‘state’?
Een webpagina ‘vergeet’ wat er net gebeurd is zodra je hem ververst. Daarom moet je zelf bijhouden wat de toestand (state) is van je applicatie.
Je kunt dat doen met sessies, cookies of door gegevens op te slaan in een bestand of database.
📁 Bestanden als ‘mini-database’
In plaats van een echte database zoals MySQL, kun je voor simpele toepassingen gegevens bewaren in een tekstbestand.
Bijvoorbeeld: als iemand een bericht achterlaat in een formulier, voeg je dat toe aan data.txt
.
📝 Structuur
- Elk bericht komt op een eigen regel
- Of je gebruikt een JSON-array, met meerdere objecten erin
- Of je gebruikt CSV (waardes gescheiden met komma's)
// Voeg toe aan tekstbestand
$bericht = htmlspecialchars($_POST["bericht"]);
file_put_contents("data.txt", $bericht . "\n", FILE_APPEND);
// Lees het bestand
$inhoud = file("data.txt");
foreach ($inhoud as $regel) {
echo "<p>" . trim($regel) . "</p>";
}
🛠️ Opdracht 1 – gastenboek_met_bestand.php
- Maak een formulier waarin iemand een naam en een bericht kan achterlaten.
- Als de gebruiker op "Verstuur" klikt:
- Sla het bericht op in een bestand
gastenboek.txt
. - Voeg ook datum/tijd toe met
date()
.
- Sla het bericht op in een bestand
- Toon de laatste 5 berichten onder het formulier.
- Zorg dat de HTML veilig blijft via
htmlspecialchars()
.
Extra (optioneel)
- Laat de berichten in omgekeerde volgorde zien (nieuwste bovenaan).
- Sla de data op in JSON-formaat i.p.v. tekstregels.
🧠 Reflectie
- Wat zijn de voordelen van een tekstbestand boven een database?
- Wanneer loop je tegen de beperkingen aan?
- Hoe zou je dit uitbreiden zodat iemand ook berichten kan verwijderen?
📤 Inleveren
- Lever je bestand
gastenboek_met_bestand.php
in (.php). - Lever het bestand
gastenboek.txt
mee met minimaal 3 testberichten. - Lever een reflectie in (.txt of .pdf).
8 Inleiding tot PHP Include-logica en Templatebestanden
🎯 Leerdoelen
- Je begrijpt het nut van het opdelen van HTML/PHP-bestanden in herbruikbare componenten.
- Je kunt
include
enrequire
gebruiken om logica en opmaak te splitsen. - Je kunt een eenvoudige template-structuur bouwen (header, content, footer).
💡 Uitleg
🧱 Waarom opdelen in componenten?
Als je meerdere pagina’s hebt met dezelfde header of footer, is het onhandig om die steeds te kopiëren. Daarom gebruik je include()
of require()
om ze in te laden.
<?php include 'header.php'; ?>
<h1>Welkom op de homepage</h1>
<?php include 'footer.php'; ?>
🔁 Verschil tussen include en require
include()
: Laadt het bestand in. Als het bestand niet bestaat, gaat de rest van de pagina gewoon door.require()
: Laadt ook het bestand in, maar als het niet bestaat, stopt de pagina met een foutmelding.
📄 Voorbeeldstructuur
header.php
– HTML <head>, navigatiefooter.php
– Copyright info, afsluitende HTMLindex.php
– Hoofdpagina die alles samenvoegt
🛠️ Opdracht 1 – templatestructuur
- Maak drie bestanden:
header.php
: bevat een <header> met de titel van je site en een eenvoudige navigatie (bijv. naar home en contact).footer.php
: bevat een <footer> met een copyrightregel.index.php
: bevat de pagina-inhoud en gebruiktinclude()
om de header en footer in te laden.
- Zorg dat alles er netjes uitziet (je mag CSS toevoegen).
- Test wat er gebeurt als je
include("footer.php")
verandert inrequire("footer.php")
en het bestand bestaat niet.
🧠 Reflectie
- Waarom is het handig om componenten zoals header/footer apart te houden?
- Wat is het risico als je alles in één bestand zou houden?
- Wanneer zou je
require()
verkiezen boveninclude()
?
📤 Inleveren
- Lever
index.php
,header.php
enfooter.php
in. - Lever een reflectiedocument in (.txt of .pdf) met je antwoorden.
9 Validatie en Veiligheid bij Formulieren
🎯 Leerdoelen
- Je begrijpt waarom inputvalidatie belangrijk is.
- Je kunt formulierinvoer controleren met PHP (server-side).
- Je kent de risico’s van onveilige invoer (bijv. XSS, SQL-injectie).
- Je kunt input veilig maken met functies zoals
htmlspecialchars()
enfilter_var()
.
💡 Uitleg
Waarom valideren?
Gebruikers kunnen fouten maken (of expres verkeerde dingen invullen). Als je invoer niet controleert, kan dat leiden tot bugs of zelfs beveiligingsproblemen.
Soorten validatie
- Client-side: Met HTML of JavaScript (bijv.
required
,type="email"
). - Server-side: Met PHP (altijd nodig, want je kunt client-side validatie omzeilen).
Veiligheid: wat kan er misgaan?
- XSS (Cross-Site Scripting): Als je niet ontsnapte HTML toont, kan iemand scripts injecteren.
- SQL-injectie: Als je invoer rechtstreeks in een query zet (komt later aan bod).
Voorbeeld inputcontrole
<?php
$naam = "";
$fout = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["naam"])) {
$fout = "Naam is verplicht!";
} else {
$naam = htmlspecialchars($_POST["naam"]);
}
}
?>
<form method="post">
Naam: <input type="text" name="naam">
<input type="submit" value="Verstuur">
</form>
<?php
if ($fout) {
echo "<p style='color:red;'>$fout</p>";
} else if ($naam) {
echo "<p>Welkom $naam</p>";
}
?>
🛠️ Opdracht 1 – formuliercontrole
- Maak een formulier met de volgende velden:
- Naam (verplicht)
- Email (verplicht, geldig e-mailadres)
- Bericht (optioneel, max. 200 tekens)
- Controleer de invoer met PHP:
- Laat foutmeldingen zien als iets ontbreekt of fout is.
- Gebruik
filter_var()
om het e-mailadres te controleren. - Gebruik
htmlspecialchars()
om veilige output te tonen.
- Toon een nette samenvatting van de ingevulde gegevens als alles goed is.
Extra (optioneel)
- Voeg visuele validatie toe met CSS-klassen (bijv. rode rand bij fout).
- Voeg een resetknop toe aan het formulier.
🧠 Reflectie
- Wat gebeurt er als je geen server-side validatie gebruikt?
- Wat is het verschil tussen validatie en het veilig maken van input?
- Hoe zou je dit formulier uitbreiden voor een login- of registratiepagina?
📤 Inleveren
- Lever je formulierpagina in als
formulier_validatie.php
. - Lever een reflectiedocument in (.txt of .pdf).
Unit Testen (py)
linked/18663/52557
1 Wat is testen? Waarom is het belangrijk?
🎯 Leerdoelen
- Je begrijpt wat testen is en waarom we het doen.
- Je herkent verschillende soorten testen.
- Je kunt een eenvoudige functie handmatig testen.
💡 Uitleg
Testen betekent controleren of je code het juiste doet. Als je iets verandert, wil je zeker weten dat het nog steeds werkt. Denk aan:
- Een rekenmachine die ineens verkeerde antwoorden geeft.
- Een webshop die verkeerde prijzen toont.
Daarom testen we onze code – om fouten te voorkomen en vertrouwen te krijgen in wat we gemaakt hebben.
📚 Testsoorten
Er zijn verschillende soorten testen. Hieronder zie je een overzicht:
Testsoort | Wat test je? | Voorbeeld |
---|---|---|
Unit test | Één functie of klein onderdeel | Klopt bereken_korting() ? |
Integratietest | Samenwerking tussen onderdelen | Voegt bereken_korting() + bereken_verzendkosten() alles goed op? |
Systeemtest | Het hele programma | Werkt de volledige webshop van begin tot eind? |
Acceptatietest | Voldoet het aan de wensen van de gebruiker? | Kan de klant een product kiezen en succesvol bestellen? |
In deze lessenserie focussen we op unit tests: kleine, duidelijke tests waarmee je functies controleert.
🛠️ Opdracht 1 – winkelmandje.py
Maak een nieuw Python-bestand aan met de naam winkelmandje.py
en doe het volgende:
- Schrijf een functie
bereken_totaalprijs(prijzen)
die een lijst van prijzen optelt. - Voorbeeld:
bereken_totaalprijs([2.50, 4.00, 3.25])
moet9.75
opleveren. - Print het resultaat van je functie met verschillende lijsten.
- Probeer ook een lege lijst – wat gebeurt er?
🧠 Reflectie
- Welk van de testsoorten vind jij het belangrijkste? Leg in eigen woorden uit waarom!
- Wat gebeurt er als je iets fout typt in je functie?
- Wat als je functie 3 keer voorkomt in een groter programma – hoe test je dat?
- Hoe zou je dit automatisch kunnen controleren?
📤 Inleveren
- Lever het bestand
winkelmandje.py
in (.py). - Beantwoord de drie reflectievragen in een apart .txt of .pdf bestand.
2 Je eerste unit test schrijven
🎯 Leerdoelen
- Je kunt een eenvoudige test schrijven met de module
unittest
. - Je weet wat
assertEqual()
doet. - Je voert je testbestand uit en controleert of het slaagt.
💡 Uitleg
In de vorige les heb je een functie gemaakt die de totaalprijs berekent van een lijst met bedragen. Nu ga je leren hoe je automatisch kunt testen of die functie goed werkt.
Hiervoor gebruik je de module unittest
. Je schrijft testfuncties waarin je verwacht wat de uitkomst moet zijn. Als die klopt, krijg je een groene melding. Als die fout is, zie je precies waar het misgaat.
Voorbeeldtest:
import unittest
def bereken_totaalprijs(prijzen):
totaal = 0
for prijs in prijzen:
totaal += prijs
return totaal
class TestTotaalprijs(unittest.TestCase):
def test_drie_bedragen(self):
self.assertEqual(bereken_totaalprijs([2.50, 4.00, 3.25]), 9.75)
def test_lege_lijst(self):
self.assertEqual(bereken_totaalprijs([]), 0)
def test_een_bedrag(self):
self.assertEqual(bereken_totaalprijs([5.00]), 5.00)
# def test_nog_een_bedrag(self):
# self.assertEqual(bereken_totaalprijs([5.00, 2.00]), 8.00)
if __name__ == '__main__':
unittest.main()
Je voert het testbestand uit met:
python totaalprijs_test.py
🛠️Opdracht 1
Maak regel 9 en 10 actief. Voer het bestand opneuw uit. Wat zie? Kna je verklaren wat er gebeurt?
🛠️ Opdracht 2 – totaalprijs_test.py
Je gaat nu je eigen functie bereken_totaalprijs()
uit les 1 testen.
- Maak een nieuw bestand aan:
totaalprijs_test.py
. - Kopieer je functie
bereken_totaalprijs(prijzen)
uitwinkelmandje.py
. - Schrijf een testklasse
TestTotaalprijs
waarin je de functie test metunittest
. - Schrijf minstens drie tests:
- Lijst met meerdere bedragen (bijv.
[2.50, 3.50]
) → controleer of totaal klopt. - Lege lijst → verwacht
0
. - Lijst met één bedrag → verwacht dat bedrag.
- Lijst met meerdere bedragen (bijv.
- Voer je bestand uit in de terminal met
python totaalprijs_test.py
.
🧠 Reflectie
- Wat gebeurt er als een test slaagt? En als hij faalt?
- Wat zijn de voordelen van automatisch testen vergeleken met handmatig printen?
- Hoe weet je zeker dat je test goed geschreven is?
📤 Inleveren
- Lever een .txt of .pdf-bestand in met het antwoord op de vraag uit Opdracht 1.
- Lever het bestand
totaalprijs_test.py
in (.py).
3 Testen met lijsten en tekst
🎯 Leerdoelen
- Je leert functies testen die werken met tekst en lijsten.
- Je gebruikt
assertTrue()
enassertFalse()
. - Je test of een bepaald product in een lijst voorkomt.
💡 Uitleg
Veel programma's werken met lijsten van gegevens, zoals producten of gebruikers. Het is belangrijk dat je functies goed testen of iets voorkomt in een lijst, of hoeveel elementen erin zitten.
Stel, je hebt een lijst met producten:
producten = ["kaas", "melk", "brood"]
Dan kun je bijvoorbeeld een functie maken die kijkt of een product voorkomt:
def zoek_product(lijst, naam):
product_gevonden = gezochte_product_naam in product_lijst
return product_gevonden
En die functie testen met:
self.assertTrue(zoek_product(["melk", "brood"], "melk"))
self.assertFalse(zoek_product(["kaas", "brood"], "cola"))
🛠️ Opdracht 1 – producten_test.py
- Maak een nieuw bestand
producten_test.py
. - Schrijf een functie
zoek_product(lijst, naam)
dieTrue
geeft als het product in de lijst staat. - Maak een testklasse
TestProductZoeken
. - Schrijf drie tests:
- Zoek naar een bestaand product →
assertTrue
- Zoek naar een niet-bestaand product →
assertFalse
- Zoek in een lege lijst →
assertFalse
- Zoek naar een bestaand product →
- Voer je testbestand uit met
python producten_test.py
.
Uitbreiding (optioneel)
Maak ook een functie tel_producten(lijst)
die het aantal producten telt, en schrijf daar een test voor met assertEqual
.
🧠 Reflectie
- Wat is het verschil tussen
assertTrue
enassertEqual
? - Waarom is het handig om een lege lijst te testen?
- Hoe weet je zeker dat je lijst-functies in alle gevallen goed werken?
📤 Inleveren
- Lever het bestand
producten_test.py
in (.py). - Lever een reflectiedocument in (.txt of .pdf) met jouw antwoorden op de vragen.
4 Fouten en assertRaises
🎯 Leerdoelen
- Je weet wat een foutmelding (exception) is in Python.
- Je leert testen of een functie op de juiste manier een fout geeft.
- Je gebruikt
assertRaises
in je testcode.
💡 Uitleg
In Python krijg je een foutmelding (ofwel: exception) als er iets misgaat, zoals delen door nul of een ongeldig type.
Stel je schrijft deze functie:
def deel(a, b):
return a / b
Als je deel(10, 0)
probeert, krijg je deze fout:
ZeroDivisionError: division by zero
In een goede functie wil je zulke fouten voorspelbaar en controleerbaar maken, bijvoorbeeld zo:
def deel(a, b):
if b == 0:
raise ValueError("Delen door nul is niet toegestaan")
return a / b
Je kunt dan testen of de fout netjes wordt afgehandeld, met:
with self.assertRaises(ValueError):
deel(10, 0)
🛠️ Opdracht 1 – deel_test.py
- Maak een nieuw bestand
deel_test.py
. - Schrijf een functie
deel(a, b)
die:- Een
ValueError
geeft alsb == 0
- Anders de uitkomst van
a / b
teruggeeft
- Een
- Maak een testklasse
TestDelen
met drie tests:- Deel 10 door 2 → verwacht
5.0
- Deel 9 door 3 → verwacht
3.0
- Deel door 0 → verwacht
ValueError
metassertRaises
- Deel 10 door 2 → verwacht
- Voer je tests uit met
python deel_test.py
.
🧠 Reflectie
- Waarom is het belangrijk om ook foutgevallen te testen?
- Wat is het verschil tussen een fout en een mislukte test?
- Hoe weet je of je functie veilig omgaat met verkeerde input?
📤 Inleveren
- Lever het bestand
deel_test.py
in (.py). - Lever een .txt of .pdf-bestand in met antwoorden op de reflectievragen.
5 Testen van klassen met setUp()
🎯 Leerdoelen
- Je weet wat een klasse is in Python.
- Je leert hoe je een klasse test met
unittest
. - Je gebruikt
setUp()
om herhaling in je testcode te voorkomen.
💡 Uitleg
In grotere programma’s werk je vaak met klassen. Die bestaan uit eigenschappen (zoals naam en prijs) en methodes (zoals korting berekenen).
Bijvoorbeeld een klasse Product
:
class Product:
def __init__(self, naam, prijs):
self.naam = naam
self.prijs = prijs
def prijs_incl_btw(self):
return self.prijs * 1.21
Als je zo'n klasse vaak moet testen, wil je niet steeds opnieuw een object aanmaken in elke test. Daarom gebruik je setUp()
:
class TestProduct(unittest.TestCase):
def setUp(self):
self.product = Product("muis", 10.00)
def test_naam(self):
self.assertEqual(self.product.naam, "muis")
def test_prijs(self):
self.assertEqual(self.product.prijs, 10.00)
def test_prijs_incl_btw(self):
self.assertAlmostEqual(self.product.prijs_incl_btw(), 12.10)
🛠️ Opdracht 1 – product_test.py
- Maak een nieuw bestand
product_test.py
. - Schrijf een klasse
Product
met:- Eigenschappen
naam
enprijs
- Methode
prijs_incl_btw()
die 21% btw toevoegt
- Eigenschappen
- Maak een testklasse
TestProduct
waarin je insetUp()
eenProduct
aanmaakt. - Voeg minimaal drie tests toe:
- Test of de naam klopt
- Test of de prijs klopt
- Test of de prijs inclusief btw ongeveer klopt (gebruik
assertAlmostEqual
)
🧠 Reflectie
- Wat is het voordeel van
setUp()
gebruiken? - Wanneer gebruik je
assertAlmostEqual
in plaats vanassertEqual
? - Hoe zou je meerdere producten kunnen testen zonder dubbel werk?
📤 Inleveren
- Lever het bestand
product_test.py
in (.py). - Lever een reflectiedocument in (.txt of .pdf) met jouw antwoorden op de vragen.
6 Edge cases en grenswaarden
🎯 Leerdoelen
- Je weet wat een edge case is.
- Je test functies met bijzondere of extreme invoer.
- Je denkt vooraf na over mogelijke problemen in je functie.
💡 Uitleg
Een edge case is een grensgeval of een extreme situatie waarin je functie getest wordt. Zulke gevallen zorgen vaak voor fouten als je er niet vooraf aan denkt.
Voorbeelden van edge cases:
- Een lege lijst
- De waarde
0
- Negatieve getallen
- Extreem grote of kleine getallen
Voorbeeld: verzendkosten berekenen
Stel, je schrijft een functie die verzendkosten berekent op basis van het aantal producten:
def bereken_verzendkosten(aantal):
if aantal <= 0:
raise ValueError("Aantal moet positief zijn")
elif aantal <= 3:
return 2.50
elif aantal <= 10:
return 5.00
else:
return 0.00
Je kunt dan tests schrijven voor grenswaarden zoals 3, 4, 10 en 11.
🛠️ Opdracht 1 – verzendkosten_test.py
- Maak een nieuw bestand
verzendkosten_test.py
. - Schrijf een functie
bereken_verzendkosten(aantal)
met de volgende regels:- 1 t/m 3 producten → €2,50
- 4 t/m 10 producten → €5,00
- Meer dan 10 producten → gratis
- 0 of minder →
ValueError
- Schrijf een testklasse met tests voor:
bereken_verzendkosten(1)
→ €2,50bereken_verzendkosten(3)
→ €2,50bereken_verzendkosten(4)
→ €5,00bereken_verzendkosten(10)
→ €5,00bereken_verzendkosten(11)
→ €0,00bereken_verzendkosten(0)
→ foutmelding (assertRaises
)
🧠 Reflectie
- Waarom is het belangrijk om grenswaarden te testen?
- Wat zou er gebeuren als je
aantal == 0
niet test? - Ken je een voorbeeld uit de praktijk waar een fout ontstond door een vergeten randgeval?
📤 Inleveren
- Lever het bestand
verzendkosten_test.py
in (.py). - Lever een reflectiedocument in (.txt of .pdf) met je antwoorden.
7 Eindopdracht – Testen in de praktijk
🎯 Leerdoelen
- Je past toe wat je geleerd hebt over unit testen.
- Je denkt zelfstandig na over wat belangrijk is om te testen.
- Je levert een werkend testbestand in met meerdere tests.
💡 Uitleg
In deze les werk je aan een kleine testset voor een programma naar keuze. Je kiest één van de twee scenario's hieronder. Je schrijft zelf de functies én de bijbehorende unittest
-tests.
Scenario 1 – Webshop-functies
Je maakt een verzameling functies zoals:
bereken_totaalprijs(prijzen)
bereken_korting(prijs, procent)
bereken_verzendkosten(aantal)
Je schrijft voor elk van deze functies minstens 2 tests, waaronder minstens 1 edge case per functie.
Scenario 2 – Quiz-controlefunctie
Je schrijft een functie controleer_antwoord(gegeven, verwacht)
die controleert of het antwoord juist is (hoofdletterongevoelig en spaties tellen niet mee).
Voorbeeld:
controleer_antwoord(" Python ", "python") → True
Schrijf meerdere tests voor deze functie:
- Juist antwoord met extra spaties
- Hoofdletters door elkaar
- Verkeerd antwoord → moet
False
geven
🛠️ Opdracht – Kies en test
- Kies scenario 1 (webshop) of scenario 2 (quiz).
- Maak een nieuw testbestand (bijvoorbeeld
webshop_test.py
ofquiz_test.py
). - Schrijf de functies zoals hierboven beschreven.
- Maak een testklasse en voeg minimaal 6 goed werkende tests toe (minstens 2 per functie).
- Zorg dat je ook minstens één foutmelding test met
assertRaises
.
🧠 Reflectie
- Welke test vond je het lastigst om te schrijven? Waarom?
- Wat is volgens jou een goede test? En wat niet?
- Hoe zou je deze testset uitbreiden als je meer tijd had?
📤 Inleveren
- Lever je testbestand in (.py).
- Lever een reflectieverslag in (.txt of .pdf).
- Als je extra functionaliteit of creatieve toevoegingen hebt gemaakt: geef dat kort aan in je verslag.
Cyber Security 2
Status: moet nog worden aangevuld.
1 is herhaling/uitbreiding van Cyber Security 1
2 en 2 zijn belangijrk voor SD
1 Cybersecurity, risico versus impact
Inleiding
In cybersecurity 1 hebben we gekeken naar een aantal soorten cyberaanvallen.
We gaan ons lijstje uitbreiden.
🛡️ Soorten Cyberaanvallen – Overzicht
- Phishing: iemand probeert jou te misleiden om je wachtwoord af te geven (bv. via een nep-mail van je bank)
- Adware: software dat ongevraagd advertenties toont.
- Virus: speciaal soort malware dat zichzelf kan vermenigvuldigen (net als het Corona virus).
- SQL-injection: via een formulier wordt je database gehackt
- Man-in-the-middle: iemand onderschept je gegevens tussen jou en een website
- Trojan Horse: Lijkt op legitieme software, maar voert op de achtergrond schadelijke acties uit.
- Randsomware: Blokkeert je bestanden of systeem en eist losgeld om weer toegang te krijgen.
- Spyware: Volgt je activiteiten op je apparaat zonder dat je het merkt, vaak om wachtwoorden of surfgedrag te stelen.
- Keylogger: Registreert alles wat je typt, zoals wachtwoorden en privéberichten.
-
Distributed Denial-of-Service (DDoS): Een aanval waarbij een website of server overspoeld wordt met verkeer en daardoor onbruikbaar wordt.
- Brute Force Attack: Het systematisch proberen van alle mogelijke wachtwoorden tot het juiste gevonden is.
- SQL Injection: Aanval via een invoerveld waarin schadelijke databasecode wordt ingevoerd.
- Cross-Site Request Forgery (CSRF): De gebruiker wordt misleid om zonder het te weten een actie uit te voeren, zoals een betaling.
🧠🎯 Test je kennis – Cyberaanvallen
Opdracht: Lees elk voorbeeld en probeer te raden om welke cyberaanval het gaat. Klik op de vraag om jezelf te controleren.
1. Je krijgt een e-mail van “de bank” met een link waarin je gevraagd wordt opnieuw in te loggen, maar het is een nepwebsite.
Phishing
2. Zodra je een gratis app installeert, verschijnen er overal pop-ups met reclame, zelfs als je de app niet gebruikt.
Adware
3. Een programma op je computer verspreidt zich automatisch naar andere bestanden en computers, net als een griepvirus.
Virus
4. Een website is opeens onbereikbaar omdat duizenden bots tegelijk verzoeken sturen naar de server.
DDoS-aanval
5. Je klikt op een “update”-melding, maar je installeert ongemerkt een programma dat op de achtergrond je bestanden versleutelt en geld vraagt om ze terug te krijgen.
Ransomware
6. Je vult een formulier in op een website, en een hacker gebruikt die invoer om toegang te krijgen tot de database.
SQL-injection
7. Iemand op hetzelfde wifi-netwerk leest mee met de gegevens die jij naar een website stuurt, zonder dat jij het merkt.
Man-in-the-middle
8. Je downloadt een handig ogend programma, maar zodra je het opent blijkt het kwaadaardige acties uit te voeren op je computer.
Trojan Horse
9. Je toetsenbordactiviteit wordt in het geheim vastgelegd zodat iemand je wachtwoord kan achterhalen.
Keylogger
10. Een hacker probeert tienduizenden verschillende wachtwoorden totdat hij de juiste vindt en toegang krijgt tot een account.
Brute Force Attack
11. Een kwaadaardige link zorgt ervoor dat jij zonder het te weten geld overmaakt via een formulier dat je niet hebt ingevuld.
Cross-Site Request Forgery (CSRF)
12. Je surft naar een website en zonder te klikken wordt automatisch schadelijke software op je computer gezet.
Drive-by Download
13. Je bezoekt een vertrouwde website, maar deze is ongemerkt gehackt en stuurt jou door naar een foute pagina.
Watering Hole Attack
14. Een hacker onderschept je login-sessie en gebruikt jouw sessie-ID om toegang te krijgen tot je account.
Session Hijacking
15. Je krijgt een sms van “de pakketdienst” met een link naar een track-and-trace pagina, maar die blijkt nep te zijn.
Smishing
16. Iemand installeert een app op jouw telefoon die in het geheim foto’s, locatie en berichten doorspeelt.
Spyware
17. Je gebruikt overal hetzelfde wachtwoord en een hacker probeert deze combinatie op andere websites.
Credential Stuffing
📚 Uitleg: Wat is het verschil tussen risico en impact?
🔍 Risico = Hoe groot is de kans dat het gebeurt?
💥 Impact = Wat zijn de gevolgen als het gebeurt?
🎮 Voorbeelden
-
Fiets wordt gestolen bij school
-
Risico: Hoog → je laat hem vaak ongeopend buiten staan.
-
Impact: Middel → je baalt, moet lopen, misschien nieuwe kopen.
-
-
Telefoon valt in water
-
Risico: Laag → je past goed op.
-
Impact: Hoog → je bent alles kwijt: foto’s, apps, schoolwerk.
-
-
Je vergeet een wachtwoord
-
Risico: Middel → gebeurt wel eens.
-
Impact: Laag → je kunt meestal resetten.
-
🛠️ Opdracht
Lees de 6 scenarios en bepaal vervolgens van elke scenario het risico en de impact en licht je keuze toe.
Scenario 1 Phishing
Stel je voor: je krijgt een e-mail van “de Rabobank” met als onderwerp “Dringende actie vereist – je account wordt geblokkeerd”. In het bericht staat dat je onmiddellijk moet inloggen om je rekening te verifiëren. Er staat een link bij die lijkt op de echte site, maar eigenlijk leidt naar een nepwebsite. Zodra je daar je gegevens invult, krijgt een oplichter direct toegang tot je bankaccount.
Scenario 2 Ransomware
Je opent een bijlage in een e-mail die lijkt te komen van je school, bijvoorbeeld “roosterwijziging.pdf”. Maar zodra je het opent, wordt je scherm zwart en verschijnt er een melding: “Je bestanden zijn versleuteld. Betaal €300 in bitcoins om ze terug te krijgen.” Alle documenten, foto’s en schoolopdrachten op je laptop zijn geblokkeerd. Dit is een ransomware-aanval: je bestanden zijn gegijzeld en je moet losgeld betalen om ze terug te krijgen.
Scenario 3 Adware
Je downloadt een gratis spelletje van een onbekende website. Na de installatie verschijnen er ineens overal pop-ups en reclames, zelfs als je de browser niet open hebt. Je wordt telkens doorgestuurd naar webwinkels of vage aanbiedingen. Je computer wordt trager, en sommige advertenties proberen je te laten klikken op gevaarlijke links. Dit is een typische adware-infectie: ongewenste software die reclame toont en soms zelfs je surfgedrag volgt.
Scenario 4 Brute Force
Je hebt een simpel wachtwoord zoals “welkom123” voor je schoolaccount. Een hacker probeert via een script duizenden combinaties van veelgebruikte wachtwoorden, één voor één, totdat jouw wachtwoord wordt geraden. Dit heet een brute force-aanval: de aanvaller probeert systematisch allerlei wachtwoorden uit tot hij toegang krijgt tot je account. Als je een zwak of kort wachtwoord gebruikt, ben je hier extra kwetsbaar voor.
Scenario 5 DDos aanval
Je wilt je favoriete webshop bezoeken, maar de site laadt niet of geeft een foutmelding. Op dat moment voeren hackers een DDoS-aanval uit: duizenden computers sturen tegelijk nepverzoeken naar de server van de webshop, waardoor die overbelast raakt en voor echte bezoekers onbereikbaar wordt. De website stort tijdelijk in, terwijl er eigenlijk niets “stuk” is — hij wordt gewoon overspoeld met verkeer.
Scenario 6 Man in the Middle
Je zit op een openbaar wifi-netwerk in de trein en logt in op een webshop. Wat je niet weet, is dat een hacker op hetzelfde netwerk zit en al het internetverkeer onderschept. Hij leest ongemerkt mee met de gegevens die jij verstuurt, zoals je inlognaam en wachtwoord. Dit is een man-in-the-middle-aanval: iemand zit letterlijk “tussen jou en de website in” en vangt alles op wat je verstuurt, zonder dat je het doorhebt.
Cyberaanval |
Risico |
Impact |
Uitleg |
---|---|---|---|
1. Phishing |
Laag |
Hoog |
Risico laag omdat we meestal de nep-email herkennen, maar als we er toch "intrappen" dan is de impact groot want dan kan je (veel) geld verliezen. |
2. Ransomware |
|
|
|
3. Adware |
|
|
|
4. Brute Force |
|
|
|
5. DDoS |
|
|
|
6. Man in the Middle |
|
|
|
📤 Inleveren
Bepaal van scenario 2 t/m 6 het risico en de impact en leg uit waarom
2 SQL Injection in PHP
🎯 Leerdoelen
- Je begrijpt wat een SQL Injection is en waarom het gevaarlijk is.
- Je kunt zelf een simpele SQL Injection uitvoeren op een onveilige PHP-pagina.
- Je kunt uitleggen hoe je dit soort aanvallen voorkomt.
💡 Uitleg
Bij een SQL Injection wordt misbruik gemaakt van een fout in je code, waarbij de invoer van een gebruiker direct in een SQL-query wordt gezet. Als je niet oppast, kan een hacker zo gegevens uit je database stelen of zelfs verwijderen.
Een klassiek voorbeeld is een inlogformulier waarin de gebruikersinvoer zonder controle in de query komt te staan:
<?php
$conn = new mysqli("localhost", "root", "", "testdb");
$username = $_POST['username'];
$password = $_POST['password'];
$sql = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
echo "Welkom!";
} else {
echo "Ongeldige login.";
}
?>
Als een aanvaller het volgende invoert:
Gebruikersnaam: ' OR '1'='1
Wachtwoord: watdanook
dan wordt de SQL-query dit:
SELECT * FROM users WHERE username = '' OR '1'='1' AND password = 'watdanook'
Omdat '1'='1' altijd waar is, kan de aanvaller inloggen zonder wachtwoord te kennen.
🛠️ Opdracht – Voer een SQL Injection uit
- Maak een database
testdb
met een tabelusers
:CREATE TABLE users ( id INT AUTO_INCREMENT PRIMARY KEY, username VARCHAR(255), password VARCHAR(255) );
- Voeg een gebruiker toe:
INSERT INTO users (username, password) VALUES ('admin', 'admin123');
- Maak een PHP-bestand
login.php
met bovenstaande onveilige code. - Maak een formulier met twee velden:
username
enpassword
. - Voer een SQL-injection uit zoals hierboven uitgelegd. Wat gebeurt er?
🛠️ Vervolgopdracht – Beveilig je formulier
- Pas de code aan zodat je gebruik maakt van prepared statements:
<?php
$conn = new mysqli("localhost", "root", "", "testdb");
$username = $_POST['username'];
$password = $_POST['password'];
$stmt = $conn->prepare("SELECT * FROM users WHERE username = ? AND password = ?");
$stmt->bind_param("ss", $username, $password);
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows > 0) {
echo "Welkom!";
} else {
echo "Ongeldige login.";
}
?>
- Test of de SQL Injection nu nog werkt. Leg uit waarom het niet meer lukt.
🧠 Reflectie
- Waarom is SQL-injection zo gevaarlijk voor een website?
- Wat had de originele programmeur moeten doen om dit te voorkomen?
- Welke techniek moet je gebruiken in PDO om SQL injection te voorkomen.
- Wat gebeurt er als je bij de aangepaste (veilige) code toch SQL-injection probeert?
- Wat zou een reden kunnen zijn dat een software developer geen gebruik maakt van technieken om SQL injection te voorkomen?
📤 Inleveren
- Lever je aangepaste code in waarbij SQL injection niet meer mogelijk is.
- Maak de reflectie en lever die in (PDF).
3 Cross-Site Scripting (XSS)
🎯 Leerdoelen
- Je weet wat Cross-Site Scripting (XSS) is en hoe het werkt.
- Je kunt zelf een XSS-aanval uitvoeren in een onveilige webpagina.
- Je kunt uitleggen hoe je je website kunt beschermen tegen XSS.
💡 Uitleg
Wat is XSS?
Cross-Site Scripting (XSS) is een aanval waarbij een aanvaller kwaadaardige scripts (zoals JavaScript) invoert in een formulier of URL. Deze scripts worden dan uitgevoerd in de browser van een andere bezoeker.
Stel: je maakt een gastenboek waar mensen een berichtje kunnen achterlaten. Als je hun invoer niet goed filtert, kan iemand dit invoeren:
<script>alert('Ik ben gehackt!')</script>
Iedereen die daarna het gastenboek bezoekt, krijgt dan deze melding te zien – het script wordt uitgevoerd alsof het van jouw site komt.
🛠️ Opdracht – Voer een XSS-aanval uit
- Maak een PHP-bestand
gastenboek.php
met het volgende formulier en afhandelingscode:
<form method="post">
Naam: <input name="naam"><br>
Bericht: <textarea name="bericht"></textarea><br>
<input type="submit" value="Verstuur">
</form>
<?php
if ($_POST) {
echo "<h3>Bericht ontvangen:</h3>";
echo "<p>Van: " . $_POST['naam'] . "</p>";
echo "<p>" . $_POST['bericht'] . "</p>";
}
?>
- Voer nu als bericht het volgende in:
<script>alert('XSS test')</script>
- Wat gebeurt er?
🛠️ Vervolgopdracht – Beveilig je formulier
- Pas de PHP-code aan zodat gebruikersinvoer wordt ge-escaped:
echo "<p>Van: " . htmlspecialchars($_POST['naam']) . "</p>";
echo "<p>" . htmlspecialchars($_POST['bericht']) . "</p>";
- Voer nogmaals het script in. Wat gebeurt er nu?
🧠 Reflectie
- Wat maakt XSS zo gevaarlijk voor je bezoekers?
- Wat is het verschil tussen
htmlspecialchars()
enstrip_tags()
in PHP? - Hoe zou jij in een groter project XSS voorkomen?
📤 Inleveren
- Screenshot van de popup bij onveilige invoer
- Screenshot van veilige invoer na beveiliging
- Toelichting op je reflectie
- Bestandsnamen:
xss-aanval-.jpg
xss-veilige-versie-.jpg
xss-reflectie-.pdf
4 Cross-Site Request Forgery (CSRF)
🎯 Leerdoelen
- Je begrijpt wat Cross-Site Request Forgery (CSRF) is en waarom het gevaarlijk is.
- Je kunt uitleggen hoe een CSRF-aanval werkt met een voorbeeld.
- Je leert hoe je je webapplicaties kunt beschermen tegen CSRF.
💡 Uitleg
Wat is CSRF?
Cross-Site Request Forgery (CSRF) is een aanval waarbij een gebruiker wordt misleid om een actie uit te voeren op een website waarop hij is ingelogd, zonder dat hij het weet.
Bijvoorbeeld: je bent ingelogd op je bankwebsite in tabblad 1. In tabblad 2 bezoek je een foute website die automatisch een formulier verstuurt waarmee geld wordt overgemaakt vanaf jouw bankaccount.
Voorbeeld
<img src="https://bank.nl/maakover?naar=crimineel&bedrag=1000" style="display:none">
Als jij op dat moment bent ingelogd bij de bank, wordt dit verzoek uitgevoerd zonder dat je het merkt!
🛠️ Opdracht – Begrijp een CSRF-aanval
- Maak een simpel PHP-bestand
bank.php
dat zogenaamd een betaling uitvoert:<?php if ($_GET['naar'] && $_GET['bedrag']) { echo "Overgemaakt naar: " . $_GET['naar'] . " voor €" . $_GET['bedrag']; } else { echo "Geen betaling uitgevoerd."; } ?>
- Maak nu een tweede HTML-bestand
aanval.html
dat de aanval uitvoert:<img src="http://localhost/bank.php?naar=hacker&bedrag=1000" style="display:none">
- Open
bank.php
in een tabblad en daarnaaanval.html
in een ander tabblad. Wat zie je?
🛠️ Vervolgopdracht – Bescherm je formulier
- Gebruik een CSRF-token in je formulier:
session_start();
if (!isset($_SESSION['csrf_token'])) {
$_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
$token = $_SESSION['csrf_token'];
?>
<form method="post" action="verwerk.php">
<input type="hidden" name="csrf_token" value="<?php echo $token; ?>">
<input name="naar">
<input name="bedrag">
<input type="submit">
</form>
- Controleer in
verwerk.php
of het token klopt:session_start(); if ($_POST['csrf_token'] !== $_SESSION['csrf_token']) { die("CSRF aanval gedetecteerd!"); } echo "Betaling uitgevoerd.";
🧠 Reflectie
- Waarom is CSRF gevaarlijker dan je op het eerste gezicht denkt?
- Wat is het verschil tussen een CSRF-aanval en een XSS-aanval?
- Waarom werkt een CSRF-aanval alleen als je al bent ingelogd?
- Hoe kun je in een groot project zorgen dat alle formulieren automatisch CSRF-bescherming krijgen?
📤 Inleveren
- Screenshot van de onveilige aanval (aanval.html).
- Screenshot van de beschermde versie met token.
- Toelichting bij je reflectie in PDF.
- Bestandsnamen:
csrf-aanval.jpg
csrf-beschermd.jpg
csrf-reflectie.pdf
DigitalSkills-01
01 - Introductie Digital Skills & Portfolio-opbouw
Bouw je professionele toekomst met digitale skills!
Welkom! Als toekomstige softwareontwikkelaar is je digitale portfolio straks je visitekaartje. In deze module 'Digitale Skills' leer je de essentiële vaardigheden: effectief online werken, samenwerken en jezelf professioneel online presenteren. We bouwen gericht aan jouw portfolio, zodat jij straks vol zelfvertrouwen kunt solliciteren.
Wat kun je verwachten in de module 'Digitale Skills'?
In deze module duiken we in de digitale vaardigheden die essentieel zijn voor jouw succes als toekomstige softwareontwikkelaar. Je kunt de volgende onderwerpen en activiteiten verwachten:
🎯 Wat ga je vandaag doen?
In deze eerste les:
-
Maak je kennis met het vak Digital Skills.
-
Start je met het bouwen van je eigen persoonlijke digitale portfolio.
-
Maak je een professioneel LinkedIn-profiel aan.
-
Koppel je LinkedIn aan Stichting Praktijkleren, zodat je toegang krijgt tot LinkedIn Learning.
Deze twee digitale profielen (portfolio & LinkedIn) vormen de basis van jouw ontwikkeling dit jaar!
🧠 Waarom is dit belangrijk?
Als software developer is het belangrijk dat je:
-
Digitale vaardigheden kunt aantonen.
-
Weet hoe je jezelf professioneel online presenteert.
-
Kunt laten zien wat je hebt gemaakt, geleerd en wie je bent als developer.
✅ Opdrachtstappen
✏️ 1. Start je portfolio
➡️ Maak een eerste pagina “Over mij” met daarin:
-
Je naam, klas, opleiding
-
Een korte bio (wie ben je? wat zijn je interesses? wat wil je leren?)
-
Een foto of afbeelding die jou representeert
-
1 persoonlijk leerdoel voor dit schooljaar
💼 2. Maak een LinkedIn-profiel
Ga naar https://www.linkedin.com en maak een account aan met je schoolmail. Vul minimaal in:
-
Je voor- en achternaam
-
Opleiding: "Software Developer – ROC v Amsterdam Amstelland College"
-
Profielfoto (neutrale of professionele foto)
-
Samenvatting: wie ben je, wat kun je, wat wil je leren?
🔗 3. Koppel LinkedIn aan Stichting Praktijkleren
Volg deze stappen om gratis toegang te krijgen tot LinkedIn Learning:
-
Volg de instructies om je profiel te koppelen
-
Test of je toegang hebt tot LinkedIn Learning
✅ Heb je hulp nodig? Vraag je docent of check de stap-voor-stap uitleg via de link hierboven.
✍️ Wat lever je in via Canvas?
Lever vóór les 2 in (via deze opdracht):
-
📎 Een link naar jouw portfolio of een screenshot van je Over mij-pagina
-
📎 Een screenshot van je LinkedIn-profiel (met zichtbare naam, opleiding, profielfoto)
-
✏️ Een kort reflectieantwoord (mag in Word of als tekst inleveren):
-
Wat vond je makkelijk of moeilijk aan deze opdracht?
Wat wil je als volgende stap toevoegen aan je portfolio of profiel?
-
02 Digitale planning & time management
Je leert hoe je je schoolweek overzichtelijk kunt plannen met behulp van een digitale tool en leert nadenken over je prioriteiten en tijdsindeling.
Inleveren : een reflectiedocument + screenshot in als bijlage ( pdf bestand )
🎯 Leerdoel
Na deze opdracht kun je een persoonlijke digitale weekplanning maken in een tool naar keuze en nadenken over je tijdsindeling en prioriteiten.
✅ Stap 1: Kies een plannings-tool
Je kiest zelf een digitale tool om je weekplanning te maken. Mogelijke opties:
-
Google Calendar → https://calendar.google.com/
-
Outlook Agenda → via je schoolmail
-
Trello → https://trello.com/
-
Todoist → https://todoist.com/
Kies een tool die je handig vindt of al kent.
🗓️ Stap 2: Plan je komende week
Maak een planning van je komende week (maandag t/m zondag) en voeg minimaal deze onderdelen toe:
-
Schoollessen (je rooster)
-
Huiswerk/studietijd
-
Projecttijd of stage (indien van toepassing)
-
Vrije tijd / sport / ontspanning
-
Minimaal één ‘bufferblok’ (tijd voor onverwachte taken)
🎯 Tip: Houd rekening met je energie: wanneer werk jij het beste?
🔺 Stap 3: Geef prioriteit aan je taken
Voeg prioriteiten toe aan je taken met labels of kleurcodes:
-
✅ Must = Moet gebeuren (hoge prioriteit)
-
🔄 Should = Belangrijk, maar niet dringend
-
✳️ Could = Extra’s, handig als je tijd hebt
Bijvoorbeeld:
-
Ma 15:00 – ✅ Wiskunde opdracht afmaken
-
Di 20:00 – ✳️ Tutorial Python kijken
✍️ Stap 4: Reflectie – Inleveren in Canvas
Lever je opdracht in via Canvas (als bijlage), met daarin:
-
📸 Een screenshot van je digitale planning
-
🧠 Reflectievragen (typ je antwoorden in een Word- of PDF-bestand):
-
Wat valt je op aan jouw planning?
-
Welke taken vond je lastig in te plannen?
-
Wat ga je de volgende keer anders doen?
-
Welke tool heb je gebruikt, en zou je die blijven gebruiken? Waarom (niet)?
-
03 Typvaardigheid & sneltoetsen
Waarom een portfolio?
Jouw portfolio laat zien wie jij bent als developer. Het is hét bewijs van wat je kunt en wat je hebt gemaakt. Of je nu een stage zoekt, een baan of aan een project werkt—een goed portfolio helpt je om op te vallen.
💡 Laat zien waar je trots op bent.
🚀 Vergroot je kansen op stage en werk.
👨💻 Bouw aan je professionele toekomst!
Kortom: je portfolio is jouw visitekaartje als software developer. Maak er iets van waar je achter staat!
✍️ Opdracht 3
Maak je eigen linkedln profiel aan en koppel je stichting praktijkleren account zodat je de learning cursusen kan gebruiken
Inleveren:
04 Besturingssystemen & bestandsbeheer
Stel je voor dat je een brief schrijft. Je kunt die in Word schrijven, en opslaan als een ".docx"-bestand, of als een ".pdf"-bestand om hem te printen. Die ".docx" en ".pdf" zijn bestandsformaten: ze vertellen de computer hoe de informatie in het bestand is georganiseerd.
Elk type bestand heeft zijn eigen indeling, zodat de computer weet hoe het geopend en weergegeven moet worden
https://www.linkedin.com/learning/writing-a-tech-resume/file-format
✍️ Opdracht 2
Je gaat onderzoek doen naar verschillende soorten bestandsformaten. Je maakt een overzicht in een spreadsheet waarin je uitlegt wat elk formaat is, waarvoor het gebruikt wordt, en wat de voor- en nadelen zijn.
Bestandsformaten:
-
txt
,docx
,pdf
,py
,html
,css
,jpg
,png
,gif
,mp4
,zip
,csv
Zoek zelf nog naar 8 andere bestandsformaten.
Beantwoord per bestandsformaat de volgende vragen (één rij per formaat):
-
Type data – Wat voor soort data bevat dit formaat? (Bijv. tekst, audio, video, afbeelding)
-
Programma’s – Welke programma’s gebruik je om dit bestand te openen of te maken?
-
Kenmerken – Wat zijn belangrijke eigenschappen van het formaat? (Bijv. compressie, kwaliteit, bestandsgrootte)
-
Gebruik – Wanneer zou jij dit bestandsformaat gebruiken?
Eisen:
-
Je geeft duidelijke uitleg bij elk formaat.
-
Je gebruikt je eigen woorden (geen copy-paste).
-
Je beantwoordt alle vragen per formaat.
-
Je werkt netjes en overzichtelijk.
Inleveren - 1 .csv bestand
-
Eén
.csv
bestand. -
Bestandsnaam:
voornaam_achternaam_bestandsformaten.csv
https://www.youtube.com/watch?v=aZ_wB9V6yos