Software Development 2025

Hierin worden onderwijsblokken ontwikkeld voor de MBO opleiding Software Development.

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 FrameWorks OOP
Yii

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 OOP
naar Python
Intro AI Intro JS Phoenix PHP 1 JS 3 (Dom) PDO CMS Yii 2
Pak de Kaas
Challenge Portfolio Challenge PHP Challenge JS Challenge Crud Challenge Yii Intro Yii 3
Kennis-Check Blok 1 Kennis-Check Blok 2 Kennis-Check Kennis-Check Kennis-Check Kennis-Check Kennis-Check Kennis-Check

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:

Waarom dit vet is
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
Waarom dit tof is
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

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

Deployement

CMS

Blok 8

Prompt Engineering 4

OOP

Yii Intro

xx

Blok 1 van Scratch naar Python


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?

Als je nog meer wilt weten van deze module dan kan je hier meer informatie vinden.

Spelregels

Voorbereiding: Open dit project in Scratch:

https://scratch.mit.edu/projects/96709199/#editor
(of download het bestand hier: Doolhof Start.sb3)

Je zou dit startscherm moeten zien:

image.png

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?

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.

Een variabele is een waarde die je kunt opslaan en aanpassen tijdens het spel.

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

📤 Inleveren

Schrijf je drie antwoorden op en lever ze in.

Blok 1 van Scratch naar Python

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)

📤 Inleveren

In het tekstveld tik je in dat je klaar bent. De docent zal samen met een aantla sutdenten het werk doornemen en goedkeuren.

--

###

  1. https://www.youtube.com/watch?v=zRWO9vWytPA
  2. https://www.youtube.com/w atch?v=iw7YvogC5Uo
  3. https://www.youtube.com/watch?v=vOAI_YY6Ntk
  4. https://www.youtube.com/watch?v=L8q4OR8n_yw
  5. https://www.youtube.com/watch?v=mluq9_b4xSI
  6. https://www.youtube.com/watch?v=Cg9T9HoI7tY
  7. https://youtu.be/jlPn-XL4T_c
  8. https://www.youtube.com/watch?v=CQby8IzbkZg
  9. https://www.youtube.com/watch?v=dM9a4XprB7o
  10. https://www.youtube.com/watch?v=CHWy9lLV4bA
  11. https://www.youtube.com/watch?v=dV4ivXfP2q0
  12. https://www.youtube.com/watch?v=a9ubC4LTcrs&t=3s
  13. https://www.youtube.com/watch?v=0xFosaKxcgY

--

Blok 1 van Scratch naar Python

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:

In deze lessen worden de volgende Scratch blokken in geschreven code omgezet.
IF - THEN
IF - THEN - ELSE
FOR LOOP (repeat)

image.png

image.png

image.png

🛠️ Opdracht

Leg in eigen woorden uit:

  1. wat is het verschil tussen een if-then en een if-then-else ?
  2. 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

📥Download

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...

image.png

Zoek dan naar pygame

image.png

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

image.png

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:

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:

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

image.png

if-then-else loop

image.png

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

💡 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.

🛠️ Opdracht

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?

🔄 Loop - Vergelijking met Scratch

In Scratch gebruik je bijvoorbeeld:

image.png

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?

🛠️ Opdracht

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:

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?

Zorg dat je deze code alleen toevoegt bij de overgang van:

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

📤 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

Zo wordt het pad kleiner en kleiner – alsof je een vierkante spiraal naar het midden tekent.

🛠️ Opdracht

📤 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

🛠️ Opdracht

📤 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):

  1. Wat ging goed?
    Geef een voorbeeld van iets dat je zelfstandig hebt opgelost of goed begreep.
  2. Wat vond je lastig?
    Was er iets dat je niet meteen snapte? Welke opdracht kostte meer tijd dan je dacht?
  3. Noem drie dingen die je hebt geleerd o ver Python.
    Wat zijn specifieke dingen die je hebt geleerd over Python?
  4. Wat heb je geleerd over if-statements?
    Beschrijf kort wat je nu beter begrijpt over herhaling of logica in code.
  5. Wat heb je geleerd over loops?
    Beschrijf kort wat je nu beter begrijpt over herhaling of logica in code.
  6. Wat zou je de volgende keer anders doen?
    Denk aan hoe je je werk hebt aangepakt, of hoe je omging met fouten.
  7. Waar wil je nog meer mee oefenen?
    Zijn er onderwerpen waarvan je denkt: dit wil ik nóg beter snappen of meer mee oefenen?
  8. Welke uitleg was duidelijk?
    Welke opdracht(en) vond je goed uitgelegd?
  9. 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)

Blok 1 van Scratch naar Python

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.

image.png

Hiervoor gebruiken we screen.blit() in de draw()-functie van Pygame Zero.

📦 Benodigdheden

🔰 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

🛠️ Opdracht

Pas de coördinaten van de muis en de kaas aan en kijk wat er gebeurt.

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

🛠️ Opdracht

💡 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.

  1. Doe dit eerst voor keyboard.left en test of het werkt.
  2. Doe dit ook voor de keyboard.right en test of het werkt.
  3. Doe dit daarna ook voor de keyboard.up en test of het werkt.
  4. 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

🛠️ Opdracht

💡 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

🛠️ Opdracht

💡 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

🛠️ Opdracht

💡 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

🛠️ Opdracht deel 1

🛠️Opdracht deel 2 (opnieuw uitvoeren)

💡 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

  1. Maak een screenshot van het spel als de tijd op is en je “Game Over” ziet en zet een mooie score neer!
  2. 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:

💡 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:

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:

📤 Inleveren

  1. 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

🎯 Leerdoelen

📚 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

🧠 Differentiatie

Voor snelle leerlingen

Voor langzamere leerlingen

📊 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

🧰 Benodigdheden

Blok 1 van Scratch naar Python

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:

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.

In welke richting beweegt een sprite als je de x-coördinaat groter maakt?

Dan beweegt de sprite naar rechts.

Wat gebeurt er als je bij x een heel grote waarde gebruikt, zoals 5000?

De sprite verdwijnt buiten beeld.

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:

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.

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

--

Blok 2 - Retro gaming with Python

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

🛠️ Opdracht

💡 Extra uitdaging

📤 Inleveren

  1. 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

🛠️ Opdracht

Tip: bij welke if wordt gekeken of de speler tegen de linkerkant van het scherm aan zit?

💡 Extra uitdaging

📤 Inleveren

  1. Leg in eigen woorden uit hoe de player_speed de snelheid van het spel veranderd.
  2. 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

🛠️ Opdracht

💡 Extra uitdaging

📤 Inleveren

  1. 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

🛠️ Opdracht

💡 Extra uitdaging

📤 Inleveren

  1. Leg eersts stap-voor-stap in he eigen woorden uit hoe er een botsing van de steen met de speler wordt gedetecteerd.
  2. 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

🛠️ Opdracht

Tip: weet je nog dat je met random.randint(1,4) een getal tussen 1 en 4 kan genereren?

💡 Extra uitdaging

📤 Inleveren

  1. 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?

🔰 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

🧠 Reflectie

Beantwoord de volgende vragen onderaan je code als commentaar of in een apart document:

🎮 Uitbreiding (kies er één)

💡 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

🧠 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

📤 Inleveren

Lever je reflectie in bij je docent via de afgesproken manier (document, upload of als commentaar in je code).

###

# Docenten

🎓 Docentenhandleiding 

📘 Overzicht

🎯 Leerdoelen

📚 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

🧠 Differentiatie

Voor snelle leerlingen

Voor langzamere leerlingen

📊 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

🧰 Benodigdheden

Blok 2 - Retro gaming with Python

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

  1. Les 1 – Teken de slangkop
  2. Les 2 – Beweeg de slang
  3. Les 3 – Botsing met schermrand
  4. Les 4 – Richting automatisch volgen
  5. Les 5 – Teken een appel en detecteer botsing
  6. Les 6 – Laat de slang groeien
  7. Les 7 – Begrijp insert() en pop()
  8. Les 8 – Vertraagde beweging
  9. Les 9 – Score en Game Over
  10. Les 10 – Challenge en uitbreiding

🎯 Leerdoelen

🛠️ Benodigdheden

💬 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

🔰 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

🛠️ Opdracht

💡 Extra uitdaging

Teken een tweede blokje naast de slangkop alsof er al een stukje staart is. Gebruik nog een screen.draw.filled_rect().

📤 Inleveren

  1. 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

🛠️ Opdracht

💡 Extra uitdaging

Laat de slang automatisch blijven bewegen in de laatst gekozen richting:

📤 Inleveren

  1. Leg uit wat de variable step doet.
  2. 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?

🔰 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

🛠️ Opdracht

💡 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

  1. 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?

🔰 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

🛠️ Opdracht

💡 Extra uitdaging

Laat de slang bij elke randbotsing van kleur veranderen! (Tip: maak een variabele kleur en gebruik bijvoorbeeld random.choice())

📤 Inleveren

  1. 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?

🔰 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

🛠️ Opdracht

💡 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

  1. 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?

📦 Benodigdheden

🔰 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

🛠️ Opdracht

💡 Extra uitdaging

Laat de appel niet precies op dezelfde plek als de slang verschijnen wanneer hij opnieuw wordt gegenereerd!

📤 Inleveren

  1. 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?

📘 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:

  1. De slang bestaat uit meerdere delen. De code in de draw()-functie tekent elk stukje.
  2. Bij elke update wordt er een nieuw blokje toegevoegd aan de kop van de slang.
  3. Als de slang een appel raakt: dan blijft de slang langer.
  4. Als er geen appel is geraakt: dan wordt het laatste stukje van de slang verwijderd.

Dus in het kort:

  1. Teken de slang
  2. Voeg een stukje toe aan de kop
  3. 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

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

📄 Inleveren

  1. 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?

🚀 Opdracht

🔎 Extra uitdaging

Laat de slang naarmate hij langer wordt automatisch steeds iets sneller bewegen (tip: verlaag vertraging bij elke appel).

📄 Inleveren

  1. Leg uitwat er gebeurt als de slang tegen zijn staart aankomt. 
  2. 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?

🔰 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?

🚀 Opdracht

🔎 Extra uitdaging

📄 Inleveren

  1. 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

  1. 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!

--

Blok 2 - Retro gaming with Python

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:

  1. Wart is AI?
  2. Wat zijn de AI toepassingen?
  3. AI versus klasieke ('gewone') code. Wa tis het verschil?
  4. Voordelen van AI
  5. Nadelen van AI
  6. Hoe kan je AI slim gebruiken
  7. 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

  1. 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

✦ 1. Classificatie
✦ 2. Associatie
✦ 3. Optimalisatie
✦ 4. Voorspelling
✦ 5. Creatie

Opdracht

Bepaal van elk van de voorbeelden bij welk type AI-toep[assing (creatie, assiociatie, optimalisatie, voorpellen, creatie) dit hoort.

  1. Netflix geeft je aanbevelingen voor films op basis van wat je eerder hebt gekeken.

  2. Een game bepaalt of je gedrag verdacht is en je mogelijk aan het valsspelen bent.

  3. Een routeplanner voor je fietsrit kiest de route met de minste verkeerslichten.

  4. TikTok voorspelt welke video je het langst gaat kijken en laat die eerder zien.

  5. Een AI-programma maakt een unieke profielfoto in cartoonstijl van jou.

Inleveren

  1. 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

  1. 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:

Opdracht

Hieronder zie je een aantal situaties. Geef per situatie aan of AI hier een voordeel zou kunnen bieden, en leg uit waarom.

  1. Een docent moet elke week 200 toetsresultaten controleren op fouten.

  2. Een leerling zoekt elke dag naar nieuwe muziek die past bij zijn smaak.

  3. Een ziekenhuis wil sneller afwijkingen op longfoto’s opsporen.

  4. Een bedrijf wil weten welke producten waarschijnlijk snel uitverkocht raken.

  5. Een bakker wil weten hoeveel broden hij volgende week moet bakken.

Inleveren

  1. 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:

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.

  1. Een AI-systeem beoordeelt sollicitaties automatisch en kiest wie wordt uitgenodigd.

  2. Een AI-chatbot geeft medisch advies zonder dat een arts meekijkt.

  3. Een zelfrijdende auto moet een noodbeslissing nemen in het verkeer.

  4. Een bedrijf gebruikt AI om te controleren hoeveel pauze werknemers nemen.

  5. Een leerling gebruikt AI om al zijn schoolopdrachten te laten schrijven.

Inleveren

  1. 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:

✘ Zo vermijd je de nadelen van AI:

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.

  1. Een leerling vraagt ChatGPT om 5 ideeën voor een spreekbeurt en kiest daarna zelf het beste idee.

  2. Iemand plakt een volledige schoolopdracht in ChatGPT en levert het antwoord in zonder iets aan te passen.

  3. Een student laat AI een samenvatting maken van een moeilijke tekst en controleert die daarna met de originele tekst erbij.

  4. Iemand vraagt aan een AI wat de beste medicijnen zijn voor zijn klachten, zonder met een arts te praten.

  5. Een leerling gebruikt AI om zijn code te verbeteren, maar probeert eerst zelf te begrijpen wat het doet.

Inleveren

  1. 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:

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:

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:

image.png

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

  1. De door jouw gemaakte prompt
  2. Het resultaat in code

Blok 2 - Retro gaming with Python

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

  1. Maak een korte beschrijving van wat je hebt aangepast (txt bestand)
  2. Lever je aangepaste  en werkende spel in.
Blok 2 - Retro gaming with Python

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}.

Blok 3 - Web Front End

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

💡 Wat is Phoenix Code?

🔰 Wat gaan we doen?

🛠️ Stappenplan

1. Open Phoenix Code

Je hebt nu een standaard HTML bestand (index.htm).

2. Maak een nieuw HTML-bestand

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

Opdracht

Waarvoor dient HTML? Zet deze vraag en het antwoord op jouw HTML pagina.

🧠 Vragen

📤 Inleveren

  1. Screenshot van je browser waarin de vraag "Waarom dient HTML?" en jouw antwoord zichtbaar zijn.

Voorbeeld screenshot

image.png

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

💡 Wat is HTML?

🔰 Wat gaan we doen?

🛠️ Stappenplan

1. Maak een nieuw project in Phoenix Code

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

4. Bekijk je werk

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

  1. Vervang de header die tussen <h1>...</h1> staat door een kleinere header.
  2. Zoek op hoe je tekst vet kan afdrukken en laat jouw naam ver afdrukken.

📤 Inleveren

  1. 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

💡 Wat kun je met HTML-opmaak?

🔰 Wat gaan we doen?

📝 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

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

4. Bekijk je werk

🧠 Reflectie

📤 Inleveren

  1. Maak een screenshot van jouw pagina waarin opmaak en breekregels zichtbaar zijn

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

💡 Wat zijn afbeeldingen en links in HTML?

🔰 Wat gaan we doen?

🛠️ Stappenplan

1. Maak een nieuw HTML-bestand in Phoenix Code

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

4. Bekijk je werk

🧠 Reflectie

📤 Inleveren

  1. 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

💡 Wat zijn lijsten in HTML?

🔰 Wat gaan we doen?

🛠️ Stappenplan

1. Maak een nieuw HTML-bestand in Phoenix Code

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:

  1. 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.
  2. 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

  1. 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

💡 Wat is een tabel in HTML?

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!

🔰 Wat gaan we doen?

🛠️ Stappenplan

1. Maak een nieuw HTML-bestand in Phoenix Code

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

4. Bekijk je werk

📤 Inleveren

  1. 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

💡 Wat is een formulier?

🔰 Wat gaan we doen?

🛠️ 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>

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:

Bekijk je werk

🧠 Reflectie

📤 Inleveren

  1. 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

💡 Wat gaan we doen?

🛠️ Opdracht

Maak een bestand mijnhomepage.html aan en zorg dat het deze onderdelen bevat:

✅ Verplichte onderdelen:

Basis HTML code

<!DOCTYPE html>
<html>
<head>
  <title>Contactformulier</title>
</head>
<body>


</body>
</html>

🌟 Extra uitdaging (optioneel):

📤 Inleveren

  1. Maak een screenshot van jouw volledige homepage

Blok 3 - Web Front End

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

💡 Wat is CSS?

🔧 Hoe voeg je CSS toe?

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.

🛠️ Opdracht – Pas kleur en stijl toe

Let op: gebruik Phoenix Code om deze opdracht te maken.

  1. Maak een nieuw HTML-bestand aan, noem het css-les1.html
  2. 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>
  1. 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
  2. Bekijk je werk in Phoenix Code via Run

📤 Inleveren

  1. 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

💡 Wat is het <style>-blok?

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

  1. Maak een nieuw HTML-bestand in Phoenix Code, noem het css-les2.html
  2. 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>
  1. 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

🧠 Reflectie

Opdracht

  1. Voer alle stappen uit zoals hierboven beschreven.

📤 Inleveren

  1. 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

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

Voorbeeld:

.my-header {
  color: darkred;
  font-family: 'Comic Sans MS';
  text-align: center;
  background-color: lightyellow;
}

🛠️ Opdracht – Maak een kleurrijke poster

  1. Maak een nieuw HTML-bestand in Phoenix Code, noem het poster.html
  2. 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>
  1. Geef je body een leuke background-color
  2. Geef je h1 een opvallende kleur, een ander lettertype en text-align: center
    Gebruik hiervoor de class met  class-selector .header
  3. Geef de p-teksten elk een andere kleur en uitlijning en gebruik hiervoor classes met class-selectors. Geef elke <p> hiervoor een aparte class.
  4. Experimenteer met verschillende kleuren en lettertypes zoals: Arial, Georgia, Courier New, Comic Sans MS

📤 Inleveren

  1. 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

💡 Wat is het box-model?

Elk HTML-element is als een ‘doos’ opgebouwd uit vier lagen:

image.png

Voorbeeld:

.blok {
  margin: 15px;
  border: 2px solid black;
  padding: 20px;
  background-color: lightblue;
}

🛠️ Opdracht – Drie gekleurde tekstblokken

  1. Maak een nieuw HTML-bestand in Phoenix Code, noem het boxmodel.html
  2. 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>
  1. Pas de CSS aan zodat:
    • Ieder blok een andere background-color heeft
    • De margin tussen de blokken groter of kleiner is (proberen met 10px, 30px, enz.)
    • De padding meer of minder ruimte geeft binnen het blok
  2. Test verschillende border-instellingen, zoals dashed, double of 4px solid red

🧠 Reflectie

📤 Inleveren

  1. Geef antwoord op de drie reflectievragen in eigen woorden en lever dat in, in een txt- of PDF bestand.
  2. 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

💡 Wat is een class?

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

  1. Maak een nieuw HTML-bestand in Phoenix Code, noem het menukaart.html
  2. 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>
  1. Pas zelf de kleuren, marges of lettertypes aan zoals jij het mooier vindt
  2. Voeg minstens twee eigen gerechten toe aan de lijst
  3. Geef twee menu-items de class speciaal en zorg ervoor dat deze speciale gerechten duidelijk opvallen door hun stijl aan te passen.

🧠 Reflectie

📤 Inleveren

  1. 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

💡 Wat is een layout?

Belangrijke CSS-eigenschappen:

Voorbeeld:

.blok {
  width: 80%;
  margin: 20px auto;
  padding: 20px;
  background-color: #f0f0f0;
  text-align: center;
}

🛠️ Opdracht – Bouw een eenvoudige homepage-layout

  1. Maak een nieuw HTML-bestand in Phoenix Code, noem het layout.html
  2. 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>
  1. Pas de kleuren aan zodat het bij jouw stijl past
  2. Voeg een afbeelding toe in de main-blok en plaats jouw naam onderaan in de footer.
  3. Geef de blokken afgeronde hoeken (border-radius) van bijvoorbeeld 15px

🧠 Reflectie

📤 Inleveren

  1. 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

💡 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:

🛠️ Opdracht – Gebruik drie soorten selectors

  1. Maak een nieuw HTML-bestand in Phoenix Code, noem het selectors.html
  2. 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>
  1. 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
  2. Voeg zelf nog een extra class toe voor een andere stijl (bijv. .opvallend)

🧠 Reflectie

📤 Inleveren

  1. 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

💡 Wat is flexbox?

Met flexbox kun je elementen binnen een container netjes ordenen, zowel horizontaal als verticaal.

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

  1. Maak een nieuw bestand in Phoenix Code: flex.html
  2. 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>
  1. Experimenteer met andere waarden voor justify-content zoals center, space-around of flex-end
  2. Voeg eventueel nog een vierde blok toe
  3. 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.:

image.png

De drie blokken staan op het midden van de webpagina en je design is responisve.

📤 Inleveren

  1. Maak een screenshot van je resultaat.
  2. 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.

--

Blok 3 - Web Front End

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

💡 Wat is JavaScript?

Bijvoorbeeld, een knop

Wat kun je met JavaScript doen?

🔧 Oefenen in de browserconsole

  1. Open je browser (bijv. Chrome of Firefox)
  2. Rechtermuisklik op een lege plek op een website > Kies Inspecteren > Ga naar het tabblad Console
  3. Typ daar:
    console.log("Hallo wereld!");
    en druk op Enter
  4. Je ziet in de console de tekst Hallo wereld!

📄 JavaScript in een HTML-bestand gebruiken

  1. Open Phoenix Code
  2. Maak een nieuw HTML-bestand aan, noem het script.html
  3. 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>
  1. Sla op en open het bestand in de browser
  2. 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

  1. Maak een HTML-bestand in Phoenix Code met een eigen titel en één paragraaf
  2. Voeg onderaan het bestand een script toe met minstens `console.log()`-regels
  3. 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

📤 Inleveren

  1. 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

💡 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;

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.

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

  1. Maak een nieuw HTML-bestand in Phoenix Code: variabelen.html
  2. 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>
  1. Open je bestand in de browser en bekijk de console (rechtermuisklik → Inspecteren → Console)
  2. Verander de naam en leeftijd naar jouw eigen gegevens
  3. Voeg een derde variabele toe: favorietDier en toon die ook met console.log()

Voorbeeld:

let favorietDier = "koala";
console.log("Mijn favoriete dier is: " + favorietDier);

🧠 Reflectie

📤 Inleveren

  1. 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

💡 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

  1. Maak een nieuw HTML-bestand in Phoenix Code: functies.html
  2. 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>
  1. Maak nog een functie die een getal verdubbelt:
    function verdubbel(getal) {
      console.log(getal * 2);
    }
  2. Roep die functie minstens twee keer aan met verschillende getallen
  3. 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

📤 Inleveren

  1. 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

💡 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

  1. Maak een nieuw HTML-bestand in Phoenix Code: ifelse.html
  2. 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>
  1. Pas de variabele leeftijd aan naar jouw eigen leeftijd en test het resultaat
  2. Voeg een else if-blok toe dat controleert of iemand precies 17 is
  3. Maak daarna zelf een voorbeeld met een punt (bijvoorbeeld een toetscijfer) en geef een boodschap: onvoldoende / voldoende / goed

📤 Inleveren

  1. Maak een screenshot van je code én de console-output bij jouw leeftijd en punt
  2. Lever dit screenshot in via Teams of Canvas

🧠 Reflectie

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

💡 Wat is een event?

Een event is een gebeurtenis, zoals:

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

  1. Maak een nieuw HTML-bestand in Phoenix Code: knop.html
  2. 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>
  1. Verander de tekst in de functie naar je eigen boodschap
  2. Maak daarna nog een tweede knop met een andere functie, bijvoorbeeld: toonLeeftijd()
  3. 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

📤 Inleveren

  1. Maak een screenshot van je HTML én console na het klikken op de knoppen

6 Formulierinvoer gebruiken met JavaScript

🎯 Leerdoelen

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

  1. Zorg ervoor dat de knop wordt gekoppeld aan de JavaScript functie checkLeeftijd(). 
  2. 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.
  3. Test op een leeftijd <0 en laat dan een boodscahp zien dat de onvoer niet geldig is.

🧠 Reflectie

📤 Inleveren

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

💡 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

  1. Test het formulier met verschillende bedragen en percentages
  2. Controleer of het resultaat klopt in de console
  3. 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.
  4. Maak CSS stijl aanpassingen naar eigen inzicht zodat de pagina er netjes uitziet.

🧠 Reflectie

📤 Inleveren

  1. De complete geteste en werkende HTML/JS/CSS in één HTML bestand.

--

Blok 3 - Web Front End

Portfolio Challenge

1 Persoonlijke website – HTML & vormgeving

🎯 Leerdoelen

🛠️ 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:

Elke pagina bevat:

🛠️ Opdracht

  1. Bouw een pagina voor de homepage (index .html ).
  2. Bouw een pagina voor je profiel (profiel.html).
  3. Bouw een pagina voor je overmij (overmij.html).
  4. 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

📤 Inleveren

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)

 Vervolgpagina Over mij (overmij.html)

Vervolgpagina Mijn visie (visie.html)

📤 Inleveren

--

Blok 4 - PHP


Blok 4 - 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.

image.png

We gaan leren hoe we goede prompt kunnen schrijven.

Voor een goede prompt moet je rekening houden met de volgende zaken:

    1. Context - een goede propmt heeft voldoende contexrt.
    2. Details/Specifiek - een goed prompt heeft voldoende details en is zo specifiek mogelijk.
    3. Duidelijkheid - een goede prompt is duidelijk.
    4. Doelgericht - een goede prompt is doelgericht.
    5. Vorm - in een geode prompt kan je de output in een bepalade vorm vragen.
    6. 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:

  1. Als je gewoon zegt: “Doe dit,” snapt die ander misschien niet precies wat je bedoelt.
  2. Maar als je zegt: “Kun je me helpen met deze code, want ik snap het niet?", is dat al een stukje beter.
  3. 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? '".
  4. 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. 

✍️ 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:

  1. Schrijf een prompt aan ChatGPT waarin je vraagt om deze code aan te passen zodat de datum in het Nederlands verschijnt.

  2. 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

  1. Screenshot van de prompt en het antwoord dat je hebt gekregen.
  2. 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 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:

Maak de banner 5% breder en maak het font 2px groter.

✍️ Opdracht 3

Situatie

Je wil een contactformulier in PHP laten maken door ChatGPT.

Jouw taak

  1. 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

  1. Screenshot van de prompt en het antwoord dat je hebt gekregen.
  2. 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:

  1. Wat je wil

  2. Waarvoor je het wil

  3. Wat de beperkingen zijn
  4. En eventueel hoe je het eruit wil laten zien

Een voorbeeld van de punten zijn:

  1. Je wilt een website
  2. Je wilt een website waarin de gebruiker zijn naam en adres moet opgeven.
  3. 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.
  4. 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:

Inleveren

  1. Screenshot van de prompt en het antwoord dat je hebt gekregen.
  2. Screenshot van het resultaat in je browser.

4. Doelgericht

📚 Theorie

📝 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

  1. Deel 1, leg in je eigen woorden uit wat het verschil is tussen prompt A en prompt B.
  2. Deel 2, schrijf je eigen doelgerichte prompt (zie beschrijving deel 2). 

5. Vorm

📚 Theorie (kort samengevat)

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:

📌 Vergeet niet te vermelden dat je werkt met PHP, en dat het voor een beginner is.

Inleveren

....

6. Toon

📚 Theorie

📝 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.

  1. 🎩 Formeel en technisch (voor iemand met programmeerervaring):

  2. 😄 Grappig en speels (alsof je het uitlegt aan een kind van 12):

  3. 💬 Duidelijk en vriendelijk (voor een klasgenoot die net begint met PHP):

Inleveren

  1. Welke toon vond jij het meest duidelijk voor een beginner?

  2. Welke toon past het best bij jouw klasgroep?

  3. Welke toon past het best bij jouw klasgroep?

  4. Wat gebeurt er als je géén toon vraagt in je prompt?

Samengevat

Een goede prompt.

  1. Context – Geef achtergrondinformatie, zoals voor wie het is, wat het doel is, of waar het over moet gaan (welke programmeertaal?).
  2. Detail – Hoe specifieker je bent, hoe beter het antwoord past bij wat je zoekt.
  3. Duidelijkheid – Gebruik duidelijke en begrijpelijke taal. Vermijd vage of dubbelzinnige zinnen.
  4. Doelgerichtheid – Geef aan wat je precies wil (bijvoorbeeld: een uitleg, een lijst, een verhaaltje, een vergelijking, enz.).
  5. 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”).
  6. 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.

image.png

Probeer dit in één tekst prompt te doen (gebruik dus géén plaatje) en denk aan alle 6 eigenschappen voor een geode prompt.

Inleveren

  1. Prompt die je hebt gemaakt (schermafdruk).
  2. Resultant (schermafdruk van de webpage).
Blok 4 - PHP

PHP Intro

1 Front-End en Back-End

🎯 Leerdoelen

Wat is frontend?

👉 Vergelijking: de menukaart en bediening van een restaurant.

Wat is backend?

👉 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.

image-1655279215130.png

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

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.

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.

.image-1671310391146.png

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.

image-1687096321945.png

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

  1. 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?

💡 Waarom Visual Studio Code?

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

  1. Ga in VSC naar File > Open Folder
  2. Navigeer naar de map htdocs op jouw computer (bijv. C:\xampp\htdocs)
  3. Klik op Select Folder
  4. In de linkerbalkmaak je nu een nieuw bestand en die noem je test.php
  5. 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

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.

📤 Inleveren

Maak een screenshot van:

  1. 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?

ℹ️ Uitleg

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>

🛠️ 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

📤 Inleveren

  1. 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?

💡 Wat is een variabele?

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.

🛠️ 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>";
?>

🛠️ Opdracht – Extra uitdaging

ℹ️ Uitleg

🧠 Reflectie

📤 Inleveren

  1. Lever je het bestand opdracht.php5i 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?

💡 Wat is het verschil?

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:

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!

🧠 Reflectie

📤 Inleveren

  1. 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

🛠️ 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

📘 Tip

🧠 Reflectie

📤 Inleveren

  1. Lever een screenshot in van leeftijd.php met een ingevuld formulier en meerdere testleeftijden
    Je code moet minstens 3 if-statements bevatten waarvan minimaal 1 if-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

🛠️ 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

🛠️ Opdracht 1

🛠️ 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

📤 Inleveren

  1. Het php bestand korting.php
  2. PDF of txt-bestand met de antwoorden op de drie vragen in eigen woorden.
Blok 4 - PHP

PHP-1

1 Formulieren GET en POST

🎯 Leerdoelen

💡 Uitleg

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) pagina.php?naam=Ali
POST Gegevens worden onzichtbaar verstuurd (veiliger) De gegevens zitten in het HTTP-verzoek, niet in de URL

🛠️ Opdracht 1 – formulier.html (GET)

  1. 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)

  1. Maak het bestand begroeting.php met de volgende PHP-code:
<?php
if (isset($_GET["naam"])) {
    $naam = htmlspecialchars($_GET["naam"]);
    echo "<h1>Hallo $naam!</h1>";
} else {
    echo "<p>Geen naam ingevuld.</p>";
}
?>

Uitleg: We controleren met isset() of de waarde bestaat. htmlspecialchars() voorkomt XSS-aanvallen.

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

  1. Pas in formulier.html het formulier aan naar:
<form action="begroeting2.php" method="post">
  1. Maak een nieuw bestand begroeting2.php met deze code:
<?php
if (isset($_POST["naam"])) {
    $naam = htmlspecialchars($_POST["naam"]);
    echo "<h1>Welkom, $naam (via POST)</h1>";
} else {
    echo "<p>Geen naam ontvangen.</p>";
}
?>

🧠 Reflectie

📤 Inleveren

2 Include en Require

🎯 Leerdoelen

💡 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.

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>
  1. Maak een bestand header.php met een kop en menu zoals hierboven.
  2. Maak een bestand footer.php met daarin bijvoorbeeld:
    <footer>© 2025 Mijn Website</footer>
  3. Maak een bestand index.php met bovenin een include("header.php") en onderin een include("footer.php").

🧠 Reflectie

📤 Inleveren

3 Arrays en Loops

🎯 Leerdoelen

💡 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.

image.png

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

🛠️ 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…).

💡 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

📤 Inleveren

4 Loops met indexed arrays

🎯 Leerdoelen

💡 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.

  1. Maak een nieuw bestand aan met de naam winkelmandje.php.
  2. Maak een indexed array met minimaal 5 producten uit een supermarkt (bijv. "Brood", "Melk", ...).
  3. Gebruik een foreach-loop om de lijst als HTML-lijst (<ul>) weer te geven.
  4. Tel hoeveel producten er in het winkelmandje zitten met count() en toon dat onderaan.

Voorbeelduitvoer:

Totaal: 3 producten

🧠 Reflectie

📤 Inleveren

5 (Associative) Arrays en Loops

🎯 Leerdoelen

💡 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>";
?>

🛠️ Opdracht – Studentenlijst maken

Test beide voorbeelden.

  1. onder aan de code druk je nog een keer alle waarden af, maar dan door geburik te maken va een loop.
  2. Voeg dan op regel 2 in de eerste code je eigen naam toe en test je code nog een keer. Wat gebeurt er?
  3. 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

📤 Inleveren

6 Functies in PHP

🎯 Leerdoelen

💡 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");
?>

🛠️ Opdracht 1 – Maak je eigen begroetfunctie

  1. Maak een nieuw bestand functie.php
  2. Maak daarin een functie begroet die één parameter accepteert: $naam
  3. Laat de functie een boodschap tonen zoals “Hoi, [naam], welkom terug!”
  4. Roep de functie minstens 3 keer aan met verschillende namen.

🛠️ Opdracht 2 – Maak een rekentool met functie

  1. Maak een functie kortingBerekenen die twee getallen als parameter gebruikt: $bedrag en $percentage
  2. Laat de functie het bedrag na korting returnen
  3. 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

📤 Inleveren

7 Datum en Tijd in PHP

🎯 Leerdoelen

💡 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.

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

  1. Maak een bestand datum.php
  2. 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

📤 Inleveren

8 Sessies en Inloggen met PHP

🎯 Leerdoelen

💡 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();
?>

🛠️ 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

📤 Inleveren

9 Inloggen met wachtwoordcontrole

🎯 Leerdoelen

💡 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

💡 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

📤 Inleveren

Blok 4 - PHP

PHP Challenge

PHP Challenge - Mini-website bouwen

🎯 Doelen

📜 Opdracht

Kies één van onderstaande opties of bedenk in overleg je eigen variant:

🌟 Optie 1 – Persoonlijke website

🎮 Optie 2 – Quiz met score

🛒 Optie 3 – Simpele webshop of rekentool

💡 Eisen

Jouw project moet aan de volgende eisen voldoen:

Gebruik AI om je te helpen, maar begrijp wat er gebeurt!

🧠 Reflectie

📤 Inleveren

Blok 5 - Database en JS (DOM)


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!

    1. Context - een goede prompt heeft voldoende contexrt.
    2. Details/Specifiek - een goed prompt heeft voldoende details en is zo specifiek mogelijk.
    3. Duidelijkheid - een goedeprompt is duidelijk.
    4. Doelgericht - een goede prompt is doelgericht.
    5. Vorm - in een goede prompt kan je de output in een bepalade vorm vragen.
    6. 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.

  1. 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.

  2. Provide lists in bullet points
    Structuur helpt de AI om overzichtelijke en duidelijke antwoorden te geven.

  3. Provide the order if you ask for multiple tasks
    Geef een logische volgorde bij samengestelde opdrachten.

  4. Geef voorbeelden (few-shot prompting)
    Laat zien wat je bedoelt met een input/output-voorbeeld.

  5. Stel voorwaarden of beperkingen
    Geef grenzen aan zoals "gebruik max. 100 woorden" of "geen disclaimers".

  6. 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>
    &copy; 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:

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.

image.png

  1. Bestudeer de afbeelding goed. Wat zie je allemaal op de pagina?

  2. Bedenk wat je aan de AI zou vragen om precies deze pagina te laten maken.

  3. Noteer minstens 4 onderdelen van de pagina als bullet points in je prompt.

Inleveren

  1. Prompt
  2. Resultaat in code
  3. 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):

  1. Maak eerst een HTML-pagina met een formulier waarin wordt gevraagd naar de tijd en de klantnaam
  2. 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:

  1. Schrijf een prompt waarin je deze twee onderdelen vraagt in de juiste volgorde.
  2. Gebruik een genummerde lijst of maak duidelijk met woorden wat “eerst” en “daarna” moet gebeuren.
  3. Houd rekening met de context, details en duidelijkheid.

Inleveren

  1. Je volledige prompt
  2. De gegenereerde HTML + PHP code
  3. 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:

image.png

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

  1. Je volledige prompt inclusief voorbeeld(en)
  2. De gegenereerde knop + uitleg van de AI
  3. 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:

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.

  1. 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
  2. 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”
  3. Zorg dat je prompt voldoet aan de context, details en duidelijkheid.

Inleveren

  1. Je prompt (inclusief de voorwaarden)
  2. De gegenereerde HTML-code
  3. 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:

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
  1. Je hebt een HTML-formulier nodig om de naam in te voeren.
  2. Je hebt een PHP-script nodig dat de naam opvangt en verwerkt.
  3. Je moet het formulier met method="post" versturen.
  4. 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:

Maar: je wil niet meteen de code, je wil dat de AI eerst in stappen uitlegt hoe je dit moet aanpakken.

  1. 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
  2. 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”
  3. 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”
  4. Zorg dat je prompt voldoet aan de kenmerken: context, details, duidelijkheid, volgorde

Inleveren

  1. Je volledige prompt(en)
  2. Het AI-antwoord (mag opgeknipt zijn in stappen)
  3. De uiteindelijke werkende HTML- en PHP-code
  4. 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

  1. Je volledige prompt.
  2. In een txt bestand: Jouw eingen aanbeveling: wat zou je het beste hebben kunnen gebruiken bij de vorige opdracht. Leg uit waarom!

Blok 5 - Database en JS (DOM)

JS - (DOM1)

1 Elementen ophalen en aanpassen

🎯 Leerdoelen

💡 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

  1. Maak een nieuw bestand aan met de naam dom1.html.
  2. Maak hierin een kopje, een paragraaf met een id, en een knop.
  3. Als je op de knop klikt, moet de tekst in de paragraaf veranderen naar iets anders (bijv. “Hallo wereld!”).

Gebruik bijvoorbeeld:

document.getElementById("knop").addEventListener("click", function() {
  document.getElementById("mijnParagraaf").textContent = "Hallo wereld!";
});

🧠 Reflectie

📤 Inleveren

2 Meerdere elementen aanpakken

🎯 Leerdoelen

💡 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>

<script>
  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

  1. Maak een bestand dom2.html.
  2. Maak een lijst van minimaal 5 <p>-elementen met een class item.
  3. Maak een knop met de tekst “Markeer alles”.
  4. Wanneer je op de knop klikt, moeten alle <p class="item"> elementen de class actief krijgen.

Gebruik bijvoorbeeld:

document.getElementById("knop").addEventListener("click", function() {
  document.querySelectorAll(".item").forEach(function(el) {
    el.classList.add("actief");
  });
});

Stijl de class actief in je <style> met bijvoorbeeld een achtergrondkleur of rand.

🧠 Reflectie

📤 Inleveren

3 Interactie met knoppen en events

🎯 Leerdoelen

💡 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.”

const knop = document.getElementById("klikMij");
knop.addEventListener("click", function() {
  alert("Je klikte op de knop!");
});

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";
  });
});

🛠️ Opdracht – Events in actie

  1. Maak een nieuw HTML-bestand dom3.html.
  2. Voeg 5 divjes toe met de class kleurvak, elk met een vaste afmeting en een andere begin-kleur.
  3. Als je met de muis over een vakje gaat, verandert de achtergrondkleur in geel.
  4. Als je erop klikt, moet de tekst in het vakje veranderen naar “Geklikt!”.

Gebruik zowel mouseover als click events.

Voorbeeld CSS:

.kleurvak {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  background-color: lightblue;
}

🧠 Reflectie

📤 Inleveren

4 Elementen toevoegen met JavaScript

🎯 Leerdoelen

💡 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>

🛠️ Opdracht – Invoer toevoegen

  1. Maak een bestand dom4.html.
  2. Voeg een invoerveld toe waarin de gebruiker een hobby, film of favoriet eten kan typen.
  3. Voeg een knop toe met de tekst “Toevoegen”.
  4. Telkens wanneer je klikt, moet er een nieuw <p>-element met de ingevoerde tekst verschijnen onder een lijstdiv.

Bonus: Als je het leuk vindt, laat de invoervelden na het klikken automatisch leeglopen.

🧠 Reflectie

📤 Inleveren

5 Elementen verwijderen of aanpassen via event.target

🎯 Leerdoelen

💡 Uitleg

Als een event plaatsvindt (zoals een klik), kun je met event.target achterhalen welk element 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>

Of met this als shorthand:

item.addEventListener("click", function() {
  this.remove();
});

🛠️ Opdracht – Klik en verwijder

  1. Maak een bestand dom5.html.
  2. Voeg een lijst toe (bijv. <ul>) met minstens 5 items (bijv. films, dieren of snacks).
  3. Schrijf JavaScript die ervoor zorgt dat je een item uit de lijst verwijdert zodra je erop klikt.
  4. Bonus: Toon boven de lijst hoeveel items er nog over zijn.

Gebruik event.target.remove() of this.remove() binnen je event handler.

🧠 Reflectie

📤 Inleveren

6 Klassennamen wisselen met classList.toggle

🎯 Leerdoelen

💡 Uitleg

Met classList kun je een class toevoegen, verwijderen of omwisselen (“toggelen”). Dit is handig om styling of gedrag van elementen aan te passen wanneer de gebruiker iets doet.

Bijvoorbeeld: klik op een element om het te markeren:

<ul id="taken">
  <li>Boodschappen doen</li>
  <li>Afwassen</li>
  <li>Hond uitlaten</li>
</ul>

<style>
  .afgevinkt {
    text-decoration: line-through;
    color: grey;
  }
</style>

<script>
  document.querySelectorAll("#taken li").forEach(function(taak) {
    taak.addEventListener("click", function() {
      this.classList.toggle("afgevinkt");
    });
  });
</script>

🛠️ Opdracht – Actieve selectie

  1. Maak een bestand dom6.html.
  2. Maak een lijst (bijv. favoriete games, liedjes, sporters).
  3. Als je op een item klikt, moet de class geselecteerd worden toegevoegd of verwijderd.
  4. Stijl de class geselecteerd in CSS met bijvoorbeeld een andere kleur en achtergrond.

Voorbeeld CSS:

.geselecteerd {
  background-color: lightgreen;
  font-weight: bold;
}

Gebruik element.classList.toggle("geselecteerd") bij het klikken.

🧠 Reflectie

📤 Inleveren

Blok 5 - Database en JS (DOM)

JS - (DOM2)

1 Formulieren en invoer met JavaScript

🎯 Leerdoelen

💡 Uitleg

Formulieren worden normaal automatisch verstuurd en de pagina ververst dan. Maar in JavaScript kun je het formulier ook “afhandelen” zonder te verversen.

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

  1. Maak een bestand dom7.html.
  2. Voeg een formulier toe met een tekstveld voor een bericht en een verstuurknop.
  3. Laat het formulier bij klikken niet verversen.
  4. Laat het ingevoerde bericht onder het formulier verschijnen in een <p>-element.
  5. Bonus: Voeg meerdere berichten toe (zoals een eenvoudige chat).

🧠 Reflectie

📤 Inleveren

2 Gegevens bewaren met localStorage

🎯 Leerdoelen

💡 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? Gebruik dan 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"]

🛠️ Opdracht – Opslaan wat je invult

  1. Maak een bestand dom9.html.
  2. Maak een invoerveld waar de gebruiker een hobby, taak of naam kan invullen.
  3. Als de gebruiker iets toevoegt, verschijnt het in een lijst op de pagina.
  4. De lijst moet bewaard blijven via localStorage zodat deze zichtbaar blijft bij herladen.
  5. Bonus: Voeg een knop toe om alles te wissen (via localStorage.clear()).

Tips:

🧠 Reflectie

📤 Inleveren

3 Gegevens ophalen met fetch()

🎯 Leerdoelen

💡 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 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

  1. Maak een bestand dom10.html.
  2. Haal gegevens op van https://jsonplaceholder.typicode.com/users.
  3. Laat van elke gebruiker de naam en e-mailadres zien in de browser.
  4. Maak van elke gebruiker een eigen <div> of <li>.
  5. Bonus: laat de gegevens pas zien als je op een knop “Laad gebruikers” hebt geklikt.

Extra uitdaging:

🧠 Reflectie

📤 Inleveren

4 Lijsten filteren op basis van invoer

🎯 Leerdoelen

💡 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();
      item.style.display = inhoud.includes(tekst) ? "list-item" : "none";
    });
  });
</script>

🛠️ Opdracht – Live filter maken

  1. Maak een bestand dom11.html.
  2. Voeg een lijst toe met minstens 10 items (bijv. landen, games, fruitsoorten).
  3. Voeg een zoekveld toe boven de lijst.
  4. Laat de lijst automatisch filteren terwijl je typt.
  5. Bonus: maak de zoekopdracht hoofdletterongevoelig en toon “Geen resultaten gevonden” als niets matcht.

🧠 Reflectie

📤 Inleveren

Blok 5 - Database en JS (DOM)

Java Script Challenge

🎯 DOM Challenge – Bouw jouw eigen mini-app

🎯 Leerdoelen

💡 Uitleg

In deze les ontwerp je zelf een kleine 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:

Let op: Bij elk project gebruik je minimaal deze onderdelen:

Bij het project Boekenkast moet je daarnaast ook werken met localStorage en een live zoekveld.

🛠️ Opdracht – Kies en bouw jouw mini-app

  1. Maak een bestand met een duidelijke naam, bijv. dom-project.html.
  2. Kies welk klein DOM-project je maakt (zie hierboven).
  3. Maak een planning van je project in een tabel (zie voorbeeld hieronder).
  4. Werk stap voor stap: begin met HTML, voeg daarna JavaScript toe.
  5. Gebruik technieken uit eerdere lessen zoals querySelector, addEventListener, en innerHTML.
  6. Stijl je pagina met CSS zodat deze overzichtelijk is.

📋 Voorbeeld planning


| Onderdeel                  | Tijd | Status |
|---------------------------|------|--------|
| HTML structuur            | 20m  |        |
| JS: items toevoegen       | 30m  |        |
| JS: verwijderen/afvinken  | 20m  |        |
| Styling                   | 15m  |        |
| Reflectie schrijven       | 15m  |        |

🧠 Reflectie

📤 Inleveren

Blok 6 - Databases / PDO


Blok 6 - Databases / PDO

Database 1

1 Wat is een database?

🎯 Leerdoelen

💡 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:

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

  1. Bekijk onderstaande lijst met gegevens:
Naam: Esra  
Klas: SD1A  
Opleiding: Software Developer  
Docent: De Jong  
Vak: Webontwikkeling  
Lesdag: Woensdag  
  1. Welke verschillende onderwerpen zie je hierin? Probeer per onderwerp de eigenschappen op te schrijven.
    • Student: naam, klas
    • ... (jij vult aan)
  2. Zet je antwoorden in een tabelvorm: welke tabellen zou je nodig hebben? Welke kolommen zouden erin staan?

🧠 Reflectie

📤 Inleveren

2 Entiteiten en Attributen

🎯 Leerdoelen

💡 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:

🔖 Attribuut

Een attribuut is een eigenschap van een entiteit. Bijvoorbeeld:

🧩 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:

image.png

👉 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

  1. Je werkt voor een evenementenbureau. Zij willen bijhouden:
    • Welke klanten boekingen doen
    • Welke evenementen er zijn
    • Welke locaties beschikbaar zijn
  2. Maak een lijstje van minstens 3 entiteiten uit deze situatie. Bijvoorbeeld:
    • Klant
    • ...
    • ...
  3. Geef per entiteit minstens 3 bijpassende attributen. Bijv.:
    • Klant → voornaam, e-mailadres, ...
    • Locatie → naam, .....
  4. Teken jouw eerste ERD in Lucidchart.

Lucichart

Registreer je voor Lucichart en maak een gratis account.

Kies toevoegen library

image.png

Zoek naar ERD en selecteer "Entity Relationship"

image.png

Gebruik vervolgens dit figuur om een entiteit te maken.

image.png

🧠 Reflectie

📤 Inleveren

3 Primary Keys

🎯 Leerdoelen

💡 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:

Een primary key moet:

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

image.png

🛠️ Opdracht 1 – Kies je primary keys

  1. Gebruik het ERD van de vorige opdracht met de entiteiten: evenement, klant en locatie.
  2. Voeg aan elke entiteit een geschikte primary key toe. Kies daarbij een bestaand aatribuut of voeg zelf een sleutel toe.
  3. Zet in de eerste kolom van je ERD de letters PK om aan te geven dat deze regel de PK bevat.
  4. Controleer: is jouw PK echt uniek en onveranderlijk?

🧠 Reflectie

📤 Inleveren

4 1:N-relaties en Foreign Keys

🎯 Leerdoelen

💡 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:

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

🧩 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.

image.png

👉 Het klantnummer in boeking is een foreign key die verwijst naar klant.

🛠️ Opdracht 1 – Relaties en foreign keys

  1. Gebruik het ERD van de vorige opdracht met de entiteiten: evenement, klant en locatie.
  2. Bepaal de veel kant van klant en evenement (evenement zou een concert kunnen zijn).
  3. Bepaal de veel kant van evenement en locatie
  4. Teken de entiteiten en de relaties. Zet de harkjes aan de juiste kant.
  5. Voeg foreign keys toe (FK's) en plaats in de eerste kolom een FK bij elke Foreign key.

📤 Inleveren

5 Datatypes en Validatie

🎯 Leerdoelen

💡 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

image.png

🎯 Tips voor goede keuzes:

🛠️ Opdracht 1 – Pas je datatypes aan

  1. Gebruik het ERD van de vorige opdracht met de entiteiten: evenement, klant en locatie.
  2. Voeg de volgende attributen toe:
    • evenement -> toegangsprijs, aanvangt datum en tijd
  3. Kies voor elk attribuut een passend datatype uit de tabel hierboven.
  4. Schrijf de datatypes in de derde kolom van de ERD's..
  5. Gebruik minimaal 3 verschillende soorten datatypes; je mag er zelf attributen bij bedenken.

📤 Inleveren

6 Case – Modelleer een realistisch scenario

🎯 Leerdoelen

Herhaling, de 5 basisregels

  1. 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.
  2. Elke entiteit heeft precies één PK (primary key). De primary key maakt de entiteit uniek (bijvoorbeeld kenteken van een auto).
  3. 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.
  4. 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.
  5. 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

🛠️ Opdracht – Maak het ERD

  1. Bepaal per entiteit eerst alle attributen, lees daarvoor goed het scenario door!
  2. Teken de drie entiteiten in Lucichart
  3. Zet alle attributen in de entiteiten
  4. Bepaal de Primary Key (PK).
  5. Bepaal de data-types.
  6. Bedenk wat de relaties zijn en teken die met het hartje aan de goede kant.
  7. Bepaal de Foreign Key (FK)

📤 Inleveren

7 Meerdere relaties en N:N

🎯 Leerdoelen

💡 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.

image.png

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.

Gebruik verschillende relaties als het logisch is dat een entiteit meerdere rollen vervult.

🛠️ Opdracht – N:N-model

  1. Maak een ERD voor dit scenario:
    Een muziekschool organiseert lessen. Leerlingen kunnen zich inschrijven op meerdere lessen. Elke les wordt gevolgd door meerdere leerlingen.
  2. Bedenk zelf voor elke entiteit minimaal 4 attributen.
  3. Modelleer de juiste entiteiten, attributen, PK’s, FK’s en datatypes.
  4. Voeg een tussentabel toe om de N:N-relatie correct te verwerken.

🧠 Reflectie

📤 Inleveren

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.

📤 Inleveren

--

Blok 6 - Databases / PDO

SQL

1 Introductie phpMyAdmin en SELECT

🎯 Leerdoelen

💡 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:

Met SQL kun je deze databases vragen stellen (queries) of opdrachten geven.

Wat heb je nodig?

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.

image.png

Start localhost/phpmyadmin

phpmyadmin-ui-1-1.jpg

Stappen om de database te importeren:

  1. Start Apache en MySQL via het XAMPP Control Panel.
  2. Ga naar http://localhost/phpmyadmin in je browser.
  3. Maak een nieuwe database aan met de naam imdb_movies.
  4. 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

  1. Je hebt de database imdb_movies.sql geimporteerd
  2. 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)
  3. Bekijk het resultaat van elke query. Wat valt je op?

🧠 Reflectie

📤 Inleveren

  1. Maak een screenshot waarbij je laat zien dat je een query hebt uitgevoerd op de database imdb_movies.
  2. Beantwoord de refelctievragen en lever die in (txt of pdf).

2 WHERE en logica

🎯 Leerdoelen

💡 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

  1. Importeer de database mod-mysql-basic-worldhappiness.sql in phpMyAdmin en selecteer de database worldhappiness.
  2. Voer de volgende query's uit en controleer het resultaat:
    • Selecteer alle landen uit de tabel jaar2015.
    • Selecteer alleen country en score uit jaar2016.
    • Selecteer alle regio's uit 2015.
    • Selecteer alle scores hoger dan 7200 in 2016.
    • Selecteer landen uit de regio "Western Europe" in 2015.
  3. Gebruik ChatGPT om een extra query te genereren waarbij je gebruik maakt van OR.

🧠 Reflectie

📤 Inleveren

3 Aggregatiefuncties

🎯 Leerdoelen

💡 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

  1. 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.
  2. Gebruik bij elke query een duidelijke alias via AS.

🧠 Reflectie

📤 Inleveren

Vergeer de aliasen niet!

4 DELETE en veiligheid

🎯 Leerdoelen

💡 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).

  1. 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.
  2. 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

    image.png

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

📤 Inleveren

5 Introductie tot JOINs

🎯 Leerdoelen

💡 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

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
  1. 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;
  2. 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?

🧠 Reflectie

📤 Inleveren

6 AI en eigen query’s

🎯 Leerdoelen

💡 Uitleg

De database die we in deze opdracht gaat gebruiken heeft twee tabellen:

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

  1. Toon alle studenten met hun volledige naam en inschrijfdatum.
  2.  Toon alle vakken (subject_name) en behaalde percentages (grade_percentage) van student met voornaam "Fatima".
  3. Toon per van start_jaar 2024 het hoogste cijfer dat is behaald voor C++. Gebruik MAX()
  4. 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):

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.

image.png

🧠 Reflectie

📤 Inleveren

🔁 SQL Terugblik en Samenvatting

🎯 Leerdoelen

🛠️ Opdracht

Maak een overzicht waarin je de belangrijkste SQL-onderdelen samenvat die je dit blok hebt geleerd.

  1. 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)
  2. 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()
  3. Gebruik de termen table, row en column (table, rij en colum).
  4. 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

Blok 6 - Databases / PDO

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:

image-1676379334123.png

In phpmyadmin, maak je een nieuwe database en noem die student.

image-1676378685637.png

Download een importbestand (in dit voorbeeld student.sql) en importeer deze.

image-1676378813133.png

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.

image-1676379711258.png

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'

Blok 6 - Databases / PDO

PDO

1 Verbinden met een database

🎯 Leerdoelen

💡 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.

image.png

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

  1. Maak een database voorbeeld aan met één tabel dieren met de kolommen id (INT, AUTO_INCREMENT, PRIMARY KEY), naam (VARCHAR), en soort (VARCHAR).
  2. Maak een bestand connection.php dat de connectie maakt zoals hierboven.
  3. Maak een tweede bestand testverbinding.php waarin je require 'connection.php'; gebruikt om verbinding te maken.
  4. Laat met echo zien of de verbinding is gelukt (bijv. "Verbinding gelukt!").

🧠 Reflectie

📄 Inleveren

2 Gegevens uitlezen met - SELECT

🎯 Leerdoelen

💡 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:

  1. Open phpMyAdmin (via XAMPP of MAMP).
  2. Klik op "Importeren".
  3. Selecteer het bestand student.sql dat je van je docent krijgt of downloadt.
  4. 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

  1. Importeer student.sql in phpMyAdmin om de database en tabel aan te maken.
  2. Maak een bestand read.php.
  3. Maak een connection.php bestand zoals dat in de vorige les is uitgelegd.
  4. Gebruik de gegeven code en test of de lijst met studenten goed wordt weergegeven.
  5. 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 een mailto: link.

🧠 Reflectie

(zoals altijd: leg uit in eigen woorden!)

📤 Inleveren

3 Studentgegevens toevoegen - INSERT

🎯 Leerdoelen

💡 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

  1. Maak het bestand create.php aan en zet de code hierboven erin.
  2. Test of het formulier zichtbaar is in je browser.
  3. Vul de ontbrekende code aan: zorg dat de execute() functie de juiste data gebruikt uit het formulier.
  4. Voeg een echo toe na het invoegen (bijv. “Student toegevoegd!”) zodat je weet dat het gelukt is.
  5. Controleer in phpMyAdmin of de student correct is toegevoegd aan de database.

🧠 Reflectie

(zoals altijd: leg uit in eigen woorden!)

📤 Inleveren

4 Studentgegevens bewerken - UPDATE

🎯 Leerdoelen

💡 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

  1. Maak een bestand update.php.
  2. Gebruik de code hierboven. Let op: gebruik een bestaand ID uit je database in de URL (bijv. update.php?id=3).
  3. Test of de juiste gegevens zichtbaar zijn in het formulier.
  4. Vul zelf de execute() regel aan zodat de gegevens uit het formulier worden opgeslagen in de database.
  5. Voeg na het opslaan een echo toe met "Wijziging opgeslagen".
  6. Controleer of de database wordt aangepast.

🧠 Reflectie

📤 Inleveren

5 Student verwijderen

🎯 Leerdoelen

💡 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

  1. Maak een bestand delete.php.
  2. Gebruik de bovenstaande code.
  3. Vul zelf de SELECT-query aan zodat je de gegevens van de student ophaalt op basis van het ID.
  4. Laat de voornaam en achternaam van de student zien in de bevestigingsvraag.
  5. Test de pagina via de URL: delete.php?id=3 (of een ander bestaand ID).

🧠 Reflectie

📤 Inleveren

6 Studenten zoeken

🎯 Leerdoelen

💡 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

  1. Maak het bestand zoek.php.
  2. Gebruik de bovenstaande code als startpunt.
  3. Vul zelf de SELECT-query aan met een WHERE voornaam LIKE :zoek clausule.
  4. Voer de query uit met prepare() en execute() – gebruik % wildcards om ook op deelwoorden te zoeken.
  5. Toon de resultaten in een tabel met voornaam, achternaam, woonplaats en e-mail.

🧠 Reflectie

📤 Inleveren

7 Mini-project: CRUD applicatie

🎯 Leerdoelen

Wat is CRUD?

CRUD staat voor Create, Read, Update, Delete – dit zijn de vier basisbewerkingen die je met gegevens in een database kunt uitvoeren:

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:

🛠️ Opdracht – CRUD-app bouwen

  1. Maak een eigen map of project met minimaal de volgende bestanden:
    • read.php – toont de lijst van studenten
    • create.php – formulier om nieuwe studenten toe te voegen
    • update.php – formulier om bestaande studenten te bewerken
    • delete.php – bevestiging en verwijdering van een student
    • zoek.php – zoekfunctie op voornaam
    • connection.php – je databaseverbinding
  2. Zorg dat je hiervan één web applicatie van en zorg dat je via een menu bar kan navigeren.
  3. Voeg bovenaan read.php een navigatie toe zodat je snel naar de andere pagina’s kunt.
  4. Controleer of je code werkt voor verschillende studenten en test het met minstens 3 zelf ingevoerde records.
  5. Je mag de opmaak aanpassen met CSS als je wilt, maar dat is optioneel.

🧠 Reflectie

📤 Inleveren

8 Toetsvragen: PDO en CRUD

🎯 Leerdoelen

🛠️ Toetsvragen

  1. Wat betekent PDO?
    Antwoord: PHP Data Objects.
    Uitleg: PDO is een uitbreiding van PHP die toegang biedt tot meerdere soorten databases op een uniforme manier.
  2. Waarom gebruik je prepare() in plaats van direct query()?
    Antwoord: Omdat prepare() veiliger is en SQL-injectie voorkomt.
    Uitleg: Met prepared statements worden gebruikersgegevens apart gehouden van de SQL-structuur.
  3. Wat is het doel van een connection.php bestand?
    Antwoord: Om de connectie met de database op één centrale plek te beheren.
    Uitleg: Dit maakt onderhoud makkelijker, vooral bij verhuizing van je project.
  4. Wat doet deze regel code?
    $stmt = $pdo->prepare("DELETE FROM studenten WHERE id = :id");
    Antwoord: Bereidt een DELETE-query voor om één student op basis van ID te verwijderen.
    Uitleg: De :id is een placeholder die je later vult met execute().
  5. Welke fetch-methode gebruik je als je meerdere rijen tegelijk wilt ophalen?
    Antwoord: fetchAll().
    Uitleg: fetchAll() geeft een array van arrays of objecten terug met alle resultaten.
  6. Wat is het verschil tussen $_GET en $_POST?
    Antwoord: $_GET haalt gegevens op uit de URL, $_POST uit een formulier.
    Uitleg: POST gebruik je voor acties die gegevens veranderen, zoals INSERT of UPDATE.
  7. Wat doet deze LIKE-query?
    SELECT * FROM studenten WHERE voornaam LIKE '%em%'
    Antwoord: Zoekt naar studenten waarvan de voornaam ‘em’ bevat, zoals “Emma” of “Emir”.
    Uitleg: Het percentage-teken (%) betekent "maakt niet uit wat ervoor of erna staat".
  8. Waarom is het gevaarlijk om directe invoer van gebruikers in je SQL-query te zetten?
    Antwoord: Dat maakt je kwetsbaar voor SQL-injectie.
    Uitleg: Kwaadwillenden kunnen via invoervelden je database beïnvloeden of uitlezen.
  9. Wat betekent CRUD precies?
    Antwoord: Create, Read, Update, Delete.
    Uitleg: Dit zijn de vier basishandelingen bij dataverwerking in een applicatie.
  10. Wat doet deze regel?
    require 'connection.php';
    Antwoord: Voegt het bestand connection.php in en maakt de databaseconnectie beschikbaar.
    Uitleg: Hierdoor hoef je niet in elk bestand 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.

Blok 6 - Databases / PDO

CRUD - Challenge

8 CRUD Challenge – Te laat meldingen

🎯 Leerdoelen

💡 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:

https://stampwerk.nl

image.png

Wat is een CRUD?

CRUD staat voor Create, Read, Update en Delete.

image.png

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:

🛠️ Stappenplan

Stap 1 – Database maken

Stap 2 – Read: overzicht maken

Stap 3 – Create: melding toevoegen

Stap 4 – Delete: melding verwijderen

Stap 5 – Update

🧠 Reflectie

📤 Inleveren

📊 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.

Blok 7 - Intro Frameworks en Deployement

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!

    1. Context - een goede prompt heeft voldoende contexrt.
    2. Details/Specifiek - een goed prompt heeft voldoende details en is zo specifiek mogelijk.
    3. Duidelijkheid - een goede prompt is concreet en bevat geen vage termen zoals (mooi, groot, .....), zei hier.
    4. Doelgericht - een goede prompt is doelgericht.
    5. Vorm - in een goede prompt kan je de output in een bepalade vorm vragen.
    6. 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.

  1. Gebruik een rol (role prompting)
    Laat de AI een specifieke rol of expertise aannemen (bijv. leraar, programmeur, leerling).

  2. Vraag om alternatieven of variaties
    Stimuleer de AI om meerdere ideeën of invalshoeken te geven.

  3. Iteratief verbeteren
    Vraag de AI om haar eigen antwoord te verbeteren of herschrijven.

  4. Gebruik prompt templates
    Werk met vaste structuren zoals: context, doel, outputvorm, toon.

  5. Vraag om zelfvragen (self-questioning)
    Laat de AI zelf bedenken welke vragen nodig zijn om het probleem goed op te lossen.

  6. 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:

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

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.

  1. 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
  2. Schrijf een prompt waarin je duidelijk de rol beschrijft die de AI moet aannemen.

Inleveren

  1. Je volledige prompt
  2. 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:

Voordelen

Voorbeeld

Prompt

Geef 3 manieren om een knop in het midden van het scherm te tonen met behulp van CSS.

Verwachte AI-reactie (beknopt)
  1. text-align: center op de container + display: inline-block op de knop
  2. margin: 0 auto bij een block-level knop met vaste breedte
  3. Flexbox op de container met justify-content: center en align-items: center

Opdracht

Je wil verschillende manieren zien om een veelvoorkomende webtaak uit te voeren.

  1. Kies één van deze taken:
    • Validatie toevoegen aan een inputveld, of
    • Een PHP-script schrijven dat data toont
  2. Schrijf een prompt waarin je de AI vraagt om minstens 3 alternatieven of varianten van die oplossing.
  3. 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...."
  4. 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

  1. Je volledige prompt
  2. De gegenereerde alternatieven van de AI
  3. 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

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.

  1. 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).
  2. 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.
  3. Schrijf beide prompts uit:
    • de eerste vraag, gebruik hierbij de few-shot prompt techniek (voorbeelden).
    • de verbeteropdracht
  4. Zorg dat je feedback duidelijk is: wat wil je precies anders of beter?
  5. Zorg ervoor dat je de code begrijpt.

Inleveren

  1. Je eerste prompt
  2. Het eerste AI-antwoord
  3. Je tweede prompt (de verbeteropdracht)
  4. 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:

Een goede prompt bestaat vaak uit onderdelen zoals:

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.

  1. Gebruik het volgende sjabloon en vul de velden in:
    Context:
    Doel:
    Outputvorm:
    Toon:
    
  2. Schrijf daarna een volledige prompt op basis van jouw ingevulde template.
  3. 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?
  4. (Optioneel) Pas je template aan en probeer het nog eens.

Inleveren

  1. Je ingevulde template
  2. De volledige prompt
  3. De output van de AI
  4. 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:

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:

  1. Welke gegevens moet de gebruiker invullen?
  2. Moet de invoer gevalideerd worden?
  3. 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.

  1. Kies een opdracht, bijvoorbeeld:
    • Maak een contactformulier
    • Valideer een inputveld met JavaScript
    • Toon resultaten in PHP
  2. 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
  3. Je kunt de prompt afsluiten met: “Geef de code pas nadat je de vragen hebt beantwoord.”

Inleveren

  1. Je volledige prompt
  2. De 3 vragen + antwoorden van de AI
  3. De gegenereerde uitleg en code
  4. 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:

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.

  1. Schrijf eerst bewust een vage of slechte prompt, zoals:
    • “Maak een website”
    • “Schrijf een formulier”
    • “Geef uitleg over PHP”
  2. 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
  3. Schrijf daarna een verbeterde versie van je prompt, en test het resultaat.
  4. Reflecteer:
    • Wat is het verschil in output?
    • Wat leer je hiervan over duidelijkheid en specificiteit in prompts?

Inleveren

  1. De oorspronkelijke (slechte) prompt
  2. De analyse van de AI
  3. De verbeterde prompt
  4. De nieuwe output
  5. Korte reflectie: wat is het belangrijkste inzicht?

Blok 8 - OOP

Blok 8 - OOP

Prompt Engineering 4

ToDo advanced oefeningen

Dynamic Prompting

Let AI create prompts

Let AI ask you questions

Blok 8 - OOP

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.
Blok 8 - OOP

PHP 3 - Debuggen

1 Foutafhandeling en Basis Debugging in PHP

🎯 Leerdoelen

💡 Uitleg

📌 Soorten fouten in PHP

⚙️ 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

🛠️ Debuggen zonder debugger

🛠️ Opdracht 1 – Debugging oefenen

  1. 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
    ?>
  2. Voeg foutmeldingen toe via error_reporting() zodat je de waarschuwing ziet.
  3. Gebruik isset() en empty() om de fout af te vangen.
  4. Test wat er gebeurt als je een variabele gebruikt die niet bestaat.
  5. Gebruik var_dump() en echo om te zien wat je fout doet.

🧠 Reflectie

📤 Inleveren

2 Bestanden en Loggen

🎯 Leerdoelen

💡 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

🗒️ 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

  1. Maak een nieuw bestand bezoekersteller.php.
  2. 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.
  3. Toon het aantal bezoeken op het scherm.

🛠️ Opdracht 2 – gastenboek.php (uitbreiding)

  1. Maak een script waarin een gebruiker een bericht kan achterlaten via een formulier.
  2. Sla elk bericht op in gastenboek.txt met datum/tijd.
  3. Toon de laatste 5 berichten boven het formulier.
  4. Gebruik htmlspecialchars() om invoer veilig weer te geven.

🧠 Reflectie

📤 Inleveren

3 Geavanceerde Functies, Abstractie en Modulaire Code

🎯 Leerdoelen

💡 Uitleg

🔁 Waarom functies gebruiken?

🎩 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)

$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:

🛠️ Opdracht – utils.php gebruiken

  1. 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 is
    • toonWelkomstbericht($naam) → toont HTML met de naam
  2. Maak een ander bestand test_utils.php waarin je include("utils.php") gebruikt en de functies test.
  3. Gebruik echo, print_r() en var_dump() om het resultaat van de functies te tonen.

🧠 Reflectie

📤 Inleveren

4 Form Validatie en Beveiliging

🎯 Leerdoelen

💡 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

🧰 Handige functies voor validatie

<?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

  1. Maak een PHP-bestand met een formulier waarin je de gebruiker vraagt om:
    • Naam
    • Leeftijd
    • Bericht
  2. Controleer of alle velden zijn ingevuld. Toon een foutmelding als iets ontbreekt.
  3. Gebruik htmlspecialchars() om het bericht veilig weer te geven.
  4. Gebruik is_numeric() om te controleren of de leeftijd een getal is.

Extra (optioneel)

🧠 Reflectie

📤 Inleveren

5 Superglobals en Associatieve Arrays

🎯 Leerdoelen

💡 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.

🔑 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

  1. Maak een formulier met de volgende velden:
    • Naam
    • E-mail
    • Bericht
  2. Verwerk de invoer met $_POST en sla de gegevens op in een associatieve array:
    $data = [
      "naam" => $_POST["naam"],
      "email" => $_POST["email"],
      "bericht" => $_POST["bericht"]
    ];
  3. Toon de waarden netjes op het scherm met htmlspecialchars().
  4. Gebruik eventueel print_r($data) om de hele array te tonen voor debugging.

🧠 Reflectie

📤 Inleveren

6 Sessies en Cookies

🎯 Leerdoelen

💡 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?

📌 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
  1. Maak een pagina waar de gebruiker zijn naam kan invoeren via een formulier.
  2. 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.
  3. Laat ook zien wat er gebeurt als de gebruiker het formulier overslaat.
  4. Gebruik session_start() bovenaan het script.

Extra (optioneel)

🧠 Reflectie

📤 Inleveren

7 State en Bestandgebaseerde 'Database'

🎯 Leerdoelen

💡 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

// 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

  1. Maak een formulier waarin iemand een naam en een bericht kan achterlaten.
  2. Als de gebruiker op "Verstuur" klikt:
    • Sla het bericht op in een bestand gastenboek.txt.
    • Voeg ook datum/tijd toe met date().
  3. Toon de laatste 5 berichten onder het formulier.
  4. Zorg dat de HTML veilig blijft via htmlspecialchars().

Extra (optioneel)

🧠 Reflectie

📤 Inleveren

8 Inleiding tot PHP Include-logica en Templatebestanden

🎯 Leerdoelen

💡 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

📄 Voorbeeldstructuur

🛠️ Opdracht 1 – templatestructuur

  1. 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 gebruikt include() om de header en footer in te laden.
  2. Zorg dat alles er netjes uitziet (je mag CSS toevoegen).
  3. Test wat er gebeurt als je include("footer.php") verandert in require("footer.php") en het bestand bestaat niet.

🧠 Reflectie

📤 Inleveren

9 Validatie en Veiligheid bij Formulieren

🎯 Leerdoelen

💡 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

Veiligheid: wat kan er misgaan?

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

  1. Maak een formulier met de volgende velden:
    • Naam (verplicht)
    • Email (verplicht, geldig e-mailadres)
    • Bericht (optioneel, max. 200 tekens)
  2. 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.
  3. Toon een nette samenvatting van de ingevulde gegevens als alles goed is.

Extra (optioneel)

🧠 Reflectie

📤 Inleveren

Unit Testen

linked/18663/52557 

1 Wat is testen? Waarom is het belangrijk?

🎯 Leerdoelen

💡 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:

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:

  1. Schrijf een functie bereken_totaalprijs(prijzen) die een lijst van prijzen optelt.
  2. Voorbeeld: bereken_totaalprijs([2.50, 4.00, 3.25]) moet 9.75 opleveren.
  3. Print het resultaat van je functie met verschillende lijsten.
  4. Probeer ook een lege lijst – wat gebeurt er?

🧠 Reflectie

📤 Inleveren

2 Je eerste unit test schrijven

🎯 Leerdoelen

💡 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.

  1. Maak een nieuw bestand aan: totaalprijs_test.py.
  2. Kopieer je functie bereken_totaalprijs(prijzen) uit winkelmandje.py.
  3. Schrijf een testklasse TestTotaalprijs waarin je de functie test met unittest.
  4. 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.
  5. Voer je bestand uit in de terminal met python totaalprijs_test.py.

🧠 Reflectie

📤 Inleveren

3 Testen met lijsten en tekst

🎯 Leerdoelen

💡 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

  1. Maak een nieuw bestand producten_test.py.
  2. Schrijf een functie zoek_product(lijst, naam) die True geeft als het product in de lijst staat.
  3. Maak een testklasse TestProductZoeken.
  4. Schrijf drie tests:
    • Zoek naar een bestaand product → assertTrue
    • Zoek naar een niet-bestaand product → assertFalse
    • Zoek in een lege lijst → assertFalse
  5. 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

📤 Inleveren

4 Fouten en assertRaises

🎯 Leerdoelen

💡 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

  1. Maak een nieuw bestand deel_test.py.
  2. Schrijf een functie deel(a, b) die:
    • Een ValueError geeft als b == 0
    • Anders de uitkomst van a / b teruggeeft
  3. 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 met assertRaises
  4. Voer je tests uit met python deel_test.py.

🧠 Reflectie

📤 Inleveren

5 Testen van klassen met setUp()

🎯 Leerdoelen

💡 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

  1. Maak een nieuw bestand product_test.py.
  2. Schrijf een klasse Product met:
    • Eigenschappen naam en prijs
    • Methode prijs_incl_btw() die 21% btw toevoegt
  3. Maak een testklasse TestProduct waarin je in setUp() een Product aanmaakt.
  4. 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

📤 Inleveren

6 Edge cases en grenswaarden

🎯 Leerdoelen

💡 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:

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

  1. Maak een nieuw bestand verzendkosten_test.py.
  2. 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
  3. Schrijf een testklasse met tests voor:
    • bereken_verzendkosten(1) → €2,50
    • bereken_verzendkosten(3) → €2,50
    • bereken_verzendkosten(4) → €5,00
    • bereken_verzendkosten(10) → €5,00
    • bereken_verzendkosten(11) → €0,00
    • bereken_verzendkosten(0) → foutmelding (assertRaises)

🧠 Reflectie

📤 Inleveren

7 Eindopdracht – Testen in de praktijk

🎯 Leerdoelen

💡 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:

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:

🛠️ Opdracht – Kies en test

  1. Kies scenario 1 (webshop) of scenario 2 (quiz).
  2. Maak een nieuw testbestand (bijvoorbeeld webshop_test.py of quiz_test.py).
  3. Schrijf de functies zoals hierboven beschreven.
  4. Maak een testklasse en voeg minimaal 6 goed werkende tests toe (minstens 2 per functie).
  5. Zorg dat je ook minstens één foutmelding test met assertRaises.

🧠 Reflectie

📤 Inleveren

xxx Van Scratch naar Python xxx

Status: ai-alternatief, niet getest maar te complex

0 Wat gaan we leren?

In deze eerste les krijg je een overzicht van wat je in de komende weken gaat leren.

We gaan aan de slag met Python: een echte programmeertaal die je stap voor stap gaat begrijpen door te werken met bewegingen, logica en herhalingen.

🎯 Wat leer je in deze module?

🧠 Wat is het verschil met Scratch?

In Scratch gebruik je blokjes die je kunt slepen. In Python schrijf je zelf regels code.

Maar de logica is hetzelfde. Kijk maar:

In Scratch In Python
herhaal 10 keer for i in range(10):
als voorwaarde dan if voorwaarde:
zet x op 100 x = 100

📘 Belangrijke basisprincipes

Lees dit vast door, begrijp je het nog niet helemaal dan is er niets aan de hand want we gaan er in deze les in detail op in.

🔹 Inspringen (indentation)

Python gebruikt inspringen (meestal 4 spaties) om aan te geven welke regels bij elkaar horen.

if x > 10:
    print("x is groter dan 10")  # deze regel hoort bij de if
print("klaar")  # deze regel hoort NIET bij de if

🔹 Commentaar

Met een hekje # kun je uitleg toevoegen aan je code:

# Dit is commentaar – de computer doet hier niets mee
x = 5  # We geven x de waarde 5

🔹 If-statements

Met een if-statement laat je de computer beslissingen nemen:

if score >= 10:
    print("Je hebt gewonnen!")

🔹 Loops (herhalingen)

Met een for-loop kun je iets meerdere keren herhalen:

for i in range(5):
    print("Dit gebeurt 5 keer")

🛠️ Opdracht

xxx

📤 Inleveren

xxx

1 Installatie van Python (Thonny) en pygame

Voordat we kunnen beginnen met programmeren, moeten we een paar dingen installeren.

We gaan werken met Thonny, een eenvoudige Python-omgeving die speciaal geschikt is voor beginners.

Daarnaast gebruiken we pygame (of pygame zero) om visuele dingen zoals sprites en bewegingen toe te voegen aan onze code.

🎯 Leerdoelen

📥 Stap 1: Thonny installeren

Ga naar de officiële website van Thonny: https://thonny.org

Klik op de juiste downloadknop voor jouw besturingssysteem (Windows/macOS/Linux).

Na installatie kun je Thonny openen. Het ziet er ongeveer zo uit:

Thonny screenshot

🧩 Stap 2: pygame (zero) installeren

In Thonny ga je naar het menu Tools → Manage packages...

Typ daar pgzero in (dit is de naam van de pygame zero bibliotheek).

Klik op Install om het te installeren.

Installeren van pgzero

📂 Stap 3: Startcode downloaden en uitvoeren

Download de startcode via de volgende link:

📥 startcode-python-scratch.zip

Pak het zip-bestand uit op een logische plek, bijvoorbeeld je bureaublad.

Open het bestand student.py in Thonny.

Druk op de groene Run-knop ▶️ om het programma uit te voeren.

🧠 Uitleg van de structuur

🛠️ Opdracht

📤 Inleveren

Maak een screenshot van het programma in actie (groene stip of sprite op het scherm zichtbaar).

Maak ook een screenshot van je Thonny-scherm met geopende code.

2 De stuiterbal

In deze les maken we een simpele animatie: een groene bal beweegt naar rechts en stuitert terug zodra hij de rand raakt.

Hiermee leer je hoe Python werkt met inspringing (indentation) en vergelijk je dat met hoe Scratch blokken groepeert.

🎯 Leerdoelen

🟢 Voorbeeldcode

from pgzrun import go
from pygame import Rect

WIDTH = 600
HEIGHT = 400

x = 100
y = 200
richting = "rechts"

def draw():
    screen.clear()
    screen.draw.filled_circle((x, y), 30, "green")

def update():
    global x, richting
    if richting == "rechts":
        x += 5
    if x >= WIDTH:
        richting = "links"
    if richting == "links":
        x -= 5

go()

ℹ️ Uitleg van de code

🔁 Vergelijking met Scratch

Scratch Python
als x > 500 dan
⤷ verander richting
if x > 500:
    richting = "links"
herhaal steeds def update():

🛠️ Opdracht

💡 Extra uitdaging

📤 Inleveren

Maak een screenshot van je bal terwijl hij stuitert.

Schrijf in je eigen woorden wat if x >= WIDTH: doet, en wat er zou gebeuren als je de inspringing vergeet.

3 De stuiterbal – heen en weer

In deze les laten we de bal netjes heen en weer bewegen tussen de linker- en rechterrand van het scherm.

Je leert hoe je if-statements en vergelijkingsoperatoren combineert om dit voor elkaar te krijgen.

🎯 Leerdoelen

🟢 Codevoorbeeld

from pgzrun import go

WIDTH = 600
HEIGHT = 400

x = 100
y = 200
richting = "rechts"

def draw():
    screen.clear()
    screen.draw.filled_circle((x, y), 30, "green")

def update():
    global x, richting
    if richting == "rechts":
        x += 5
        if x >= WIDTH - 30:
            richting = "links"
    if richting == "links":
        x -= 5
        if x <= 30:
            richting = "rechts"

go()

ℹ️ Uitleg van de code

🛠️ Opdracht

💡 Extra uitdaging

📤 Inleveren

Maak een screenshot van het spel waarin de bal duidelijk een andere richting op beweegt.

Schrijf in één zin uit waarom er twee if-blokken zijn en wat hun functie is.

4 De vierkante beweging

In deze les gaan we de sprite laten bewegen in een vierkant patroon: eerst naar rechts, dan naar beneden, dan naar links en dan weer omhoog.

Je leert hoe je meerdere richtingen beheert met `if`-statements en hoe je beweging op basis van coördinaten controleert.

🎯 Leerdoelen

🟢 Codevoorbeeld

from pgzrun import go

WIDTH = 600
HEIGHT = 400

x = 100
y = 100
richting = "rechts"

def draw():
    screen.clear()
    screen.draw.filled_circle((x, y), 30, "orange")

def update():
    global x, y, richting

    if richting == "rechts":
        x += 5
        if x >= 500:
            richting = "beneden"
    elif richting == "beneden":
        y += 5
        if y >= 300:
            richting = "links"
    elif richting == "links":
        x -= 5
        if x <= 100:
            richting = "boven"
    elif richting == "boven":
        y -= 5
        if y <= 100:
            richting = "rechts"

go()

ℹ️ Uitleg van de code

🛠️ Opdracht

💡 Extra uitdaging

📤 Inleveren

Maak een screenshot van het spel waarin je sprite zich in een vierkant beweegt.

Schrijf in één zin hoe de richting wordt aangepast en waarom de sprite stopt of draait bij een bepaalde waarde.

5 Vierkant met sprongen op elke hoek

In deze les voegen we sprongen toe aan het vierkante bewegingspatroon.

Telkens als de sprite een hoek bereikt, laat hij een korte sprong omhoog en omlaag zien.

We gebruiken een for-loop om deze herhaalde sprongbeweging te programmeren.

🎯 Leerdoelen

🟢 Codevoorbeeld

from pgzrun import go
import time

WIDTH = 600
HEIGHT = 400

x = 100
y = 100
richting = "rechts"

def draw():
    screen.clear()
    screen.draw.filled_circle((x, y), 30, "orange")

def spring():
    global y
    for i in range(5):
        y -= 10
        time.sleep(0.05)
        y += 10
        time.sleep(0.05)

def update():
    global x, y, richting

    if richting == "rechts":
        x += 5
        if x >= 500:
            richting = "beneden"
            spring()
    elif richting == "beneden":
        y += 5
        if y >= 300:
            richting = "links"
            spring()
    elif richting == "links":
        x -= 5
        if x <= 100:
            richting = "boven"
            spring()
    elif richting == "boven":
        y -= 5
        if y <= 100:
            richting = "rechts"
            spring()

go()

ℹ️ Uitleg van de code

🔁 Vergelijking met Scratch

Scratch Python
herhaal 5 keer
⤷ verander y met -10
⤷ wacht 0.05 sec
⤷ verander y met 10
for i in range(5):     y -= 10     sleep(0.05)     y += 10

🛠️ Opdracht

💡 Extra uitdaging

📤 Inleveren

Maak een screenshot van je sprite bij een hoek van het vierkant.

Schrijf in één zin uit wat de for-loop doet in de functie spring().

6 Spring vaker op twee hoeken

In deze les laat je de sprite alleen op bepaalde hoeken van het vierkant springen. Zo leer je hoe je voorwaardelijke logica (if-statements) combineert met herhaling (loops).

🎯 Leerdoelen

🟢 Codevoorbeeld

from pgzrun import go
import time

WIDTH = 600
HEIGHT = 400

x = 100
y = 100
richting = "rechts"

def draw():
    screen.clear()
    screen.draw.filled_circle((x, y), 30, "purple")

def spring():
    for i in range(3):
        global y
        y -= 15
        time.sleep(0.05)
        y += 15
        time.sleep(0.05)

def update():
    global x, y, richting

    if richting == "rechts":
        x += 5
        if x >= 500:
            richting = "beneden"
            spring()
    elif richting == "beneden":
        y += 5
        if y >= 300:
            richting = "links"
            # geen sprong hier
    elif richting == "links":
        x -= 5
        if x <= 100:
            richting = "boven"
            spring()
    elif richting == "boven":
        y -= 5
        if y <= 100:
            richting = "rechts"
            # geen sprong hier

go()

ℹ️ Uitleg van de code

🛠️ Opdracht

💡 Extra uitdaging

📤 Inleveren

Maak een screenshot van de sprite terwijl hij springt bij één van de actieve hoeken.

Beschrijf in 1 of 2 zinnen hoe je bepaalt waar de sprong wel of niet plaatsvindt.

7 Spiraal – stap 1

In deze les gaan we de sprite in een spiraal laten bewegen. Bij elke stap draait hij een hoek op, en de afstand die hij aflegt blijft (voor nu) steeds hetzelfde.

Het effect: een vierkante spiraalvormige beweging.

🎯 Leerdoelen

🟢 Codevoorbeeld

from pgzrun import go
import time

WIDTH = 600
HEIGHT = 400

x = 300
y = 200
richting = "rechts"
afstand = 50

def draw():
    screen.clear()
    screen.draw.filled_circle((x, y), 20, "blue")

def update():
    global x, y, richting, afstand

    if richting == "rechts":
        x += afstand
        richting = "beneden"
    elif richting == "beneden":
        y += afstand
        richting = "links"
    elif richting == "links":
        x -= afstand
        richting = "boven"
    elif richting == "boven":
        y -= afstand
        richting = "rechts"

    time.sleep(0.4)  # animatie vertragen

go()

ℹ️ Uitleg van de code

🛠️ Opdracht

💡 Extra uitdaging

📤 Inleveren

Maak een screenshot van de sprite tijdens de spiraalbeweging.

Schrijf in één zin uit wat er gebeurt als je richting niet telkens verandert.

8 Spiraal – stap 2

In deze les ga je de sprite niet alleen in een spiraal laten bewegen, maar bij elke stap ook de afstand iets kleiner maken.

Het resultaat is een spiraal die langzaam naar het midden krult.

🎯 Leerdoelen

🟢 Codevoorbeeld

from pgzrun import go
import time

WIDTH = 600
HEIGHT = 400

x = 300
y = 200
richting = "rechts"
afstand = 80

def draw():
    screen.clear()
    screen.draw.filled_circle((x, y), 20, "teal")

def update():
    global x, y, richting, afstand

    if richting == "rechts":
        x += afstand
        richting = "beneden"
    elif richting == "beneden":
        y += afstand
        richting = "links"
    elif richting == "links":
        x -= afstand
        richting = "boven"
    elif richting == "boven":
        y -= afstand
        richting = "rechts"

    afstand -= 5  # afstand verkleinen bij elke stap
    if afstand <= 0:
        afstand = 0  # stop op 0, anders negatief

    time.sleep(0.4)

go()

ℹ️ Uitleg van de code

🛠️ Opdracht

💡 Extra uitdaging

📤 Inleveren

Maak een screenshot van jouw spiraal tijdens of net voor het einde van de beweging.

Schrijf kort op hoe de afstand -= 5 regel het gedrag van de sprite beïnvloedt.

8 Spiraal – stap 2

In deze les ga je de sprite niet alleen in een spiraal laten bewegen, maar bij elke stap ook de afstand iets kleiner maken.

Het resultaat is een spiraal die langzaam naar het midden krult.

🎯 Leerdoelen

🟢 Codevoorbeeld

from pgzrun import go
import time

WIDTH = 600
HEIGHT = 400

x = 300
y = 200
richting = "rechts"
afstand = 80

def draw():
    screen.clear()
    screen.draw.filled_circle((x, y), 20, "teal")

def update():
    global x, y, richting, afstand

    if richting == "rechts":
        x += afstand
        richting = "beneden"
    elif richting == "beneden":
        y += afstand
        richting = "links"
    elif richting == "links":
        x -= afstand
        richting = "boven"
    elif richting == "boven":
        y -= afstand
        richting = "rechts"

    afstand -= 5  # afstand verkleinen bij elke stap
    if afstand <= 0:
        afstand = 0  # stop op 0, anders negatief

    time.sleep(0.4)

go()

ℹ️ Uitleg van de code

🛠️ Opdracht

💡 Extra uitdaging

📤 Inleveren

Maak een screenshot van jouw spiraal tijdens of net voor het einde van de beweging.

Schrijf kort op hoe de afstand -= 5 regel het gedrag van de sprite beïnvloedt.

9 Spiraal – stap 3

Tot nu toe liet je de sprite bewegen in een steeds kleinere spiraal. In deze les leer je hoe je het programma automatisch laat stoppen met een break-statement.

Zo kun je zelf bepalen wanneer een herhaling moet stoppen op basis van een voorwaarde.

🎯 Leerdoelen

🟢 Codevoorbeeld

import pgzrun
import time

WIDTH = 600
HEIGHT = 400

x = 300
y = 200
richting = "rechts"
afstand = 80

bewegingen = []

def draw():
    screen.clear()
    screen.draw.filled_circle((x, y), 20, "green")

def update():
    global x, y, richting, afstand

    if afstand <= 5:
        print("Spiraal gestopt.")
        exit()

    if richting == "rechts":
        x += afstand
        richting = "beneden"
    elif richting == "beneden":
        y += afstand
        richting = "links"
    elif richting == "links":
        x -= afstand
        richting = "boven"
    elif richting == "boven":
        y -= afstand
        richting = "rechts"

    afstand -= 5
    time.sleep(0.4)

pgzrun.go()

ℹ️ Uitleg van de code

🔁 Variant met while-loop en break

while True:
    if afstand <= 5:
        break
    # beweging uitvoeren
    ...

🛠️ Opdracht

💡 Extra uitdaging

📤 Inleveren

Maak een screenshot van de laatste positie van de sprite vóór het stoppen.

Schrijf in één zin uit waarom en wanneer de break of exit() wordt uitgevoerd.

10 Reflectie: wat heb je geleerd?

Je hebt in de afgelopen lessen veel geleerd over programmeren met Python. In deze afsluitende les kijk je terug op wat je hebt gedaan, wat je hebt geleerd en waar je nog verder in wilt groeien.

Door hierover na te denken, wordt je bewuster van je eigen leerproces en kun je gerichter verder leren.

🎯 Leerdoelen

🛠️ Reflectieopdracht

Beantwoord de volgende vragen in een apart document of onderaan je Python-bestand als commentaar.

📎 Extra vragen (optioneel)

📤 Inleveren

📄 Voorbeeld van reflectie als commentaar

# Reflectie:
# Ik vond het leuk dat je de sprite kon laten bewegen met steeds kleinere stappen.
# Het lastigst vond ik de richting goed laten wisselen, maar met hulp lukte het.
# Ik heb geleerd hoe je loops en if-statements kunt combineren.
# Ik ben trots dat mijn spiraal echt stopt aan het eind.
# Volgende keer wil ik proberen met meerdere sprites te werken.

---

1 Thonny installeren

🛠️ Je moet eerst Thonny installeren. Dat is een eenvoudige Python-omgeving voor beginners.
Ga naar https://thonny.org en volg de installatie-instructies voor jouw besturingssysteem (Windows, Mac of Linux).

📦 Als Thonny geïnstalleerd is, kun je het openen en een nieuw Python-bestand aanmaken. Plak onderstaande code in je bestand:

import pygame
import time

# Begin pygame en maak scherm
pygame.init()
screen = pygame.display.set_mode((500, 500))

# Laad een afbeelding (zorg dat 'bal.png' in dezelfde map staat)
ball = pygame.image.load("bal.png")
x = 100
y = 100

# Oneindige lus (druk op sluiten om te stoppen)
running = True
while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    # Wis het scherm
    screen.fill((255, 255, 255))

    # Teken de bal
    screen.blit(ball, (x, y))

    # Verplaats de bal
    x += 1
    y += 1

    # Wacht even en werk het scherm bij
    pygame.display.flip()
    time.sleep(0.01)

pygame.quit()

🖼️ Je hebt een afbeelding nodig met de naam bal.png in dezelfde map als je script. Maak bijvoorbeeld een klein rondje in Paint of een andere tekenapp, sla het op als bal.png en zet het in dezelfde map.

✅ Klaar? Druk op Run (de groene afspeelknop) in Thonny. Als het goed is, zie je een venster waarin een bal diagonaal beweegt.

Leerdoelen van Scratch naar Python

Les 0: Wat gaan we leren?

Leerdoelen:

Les 1: Installatie Python (Thonny) en pygame

Leerdoelen:

Les 2: De stuiterbal

Leerdoelen:

Les 3: De stuiterbal – heen en weer

Leerdoelen:

Les 4: De vierkante beweging

Leerdoelen:

Les 5: Vierkant met sprongen op elke hoek

Leerdoelen:

Les 6: Spring vaker op twee hoeken

Leerdoelen:

Les 7: Spiraal – stap 1

Leerdoelen:

Les 8: Spiraal – stap 2

Leerdoelen:

Les 9: Spiraal – stap 3

Leerdoelen:

Les 10: Reflectie: wat heb je geleerd?

Leerdoelen:

 

Deze lessenserie biedt een geleidelijke overgang van visueel programmeren in Scratch naar tekstueel programmeren in Python, met de nadruk op fundamentele programmeerconcepten zoals loops, conditionele logica en het belang van code-structuur.

AI and Jobs

 

Is There a Future for Software Engineers? The Impact of AI [2025]

The skills that software developers need to be proficient on AI projects include math, algebra, calculus, statistics, big data, data mining, data science, machine learning, MLOps, cognitive computing, text analytics, natural language processing, R, Hadoop, Spark, and many others.

NY Times

...and that A.I. companies are racing to build “virtual workers” that can replace junior employees at a fraction of the cost.

One tech executive recently told me his company had stopped hiring anything below an L5 software engineer — a midlevel title typically given to programmers with three to seven years of experience — because lower-level tasks could now be done by A.I. coding tools.

Another told me that his start-up now employed a single data scientist to do the kinds of tasks that required a team of 75 people at his previous company.

The company claims that its most powerful model, Claude Opus 4, can now code for “several hours” without stopping — a tantalizing possibility if you’re a company accustomed to paying six-figure engineer salaries for that kind of productivity.

Digital Skills 1

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:

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:


Opdrachtstappen

✏️ 1. Start je portfolio

➡️ Maak een eerste pagina “Over mij” met daarin:


💼 2. Maak een LinkedIn-profiel

Ga naar https://www.linkedin.com en maak een account aan met je schoolmail. Vul minimaal in:


🔗 3. Koppel LinkedIn aan Stichting Praktijkleren

Volg deze stappen om gratis toegang te krijgen 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):


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:

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:

🎯 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:

Bijvoorbeeld:


✍️  Stap 4: Reflectie – Inleveren in Canvas

Lever je opdracht in via Canvas (als bijlage), met daarin:

  1. 📸 Een screenshot van je digitale planning

  2. 🧠 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:

Beantwoord per bestandsformaat de volgende vragen (één rij per formaat):

  1. Type data – Wat voor soort data bevat dit formaat? (Bijv. tekst, audio, video, afbeelding)

  2. Programma’s – Welke programma’s gebruik je om dit bestand te openen of te maken?

  3. Kenmerken – Wat zijn belangrijke eigenschappen van het formaat? (Bijv. compressie, kwaliteit, bestandsgrootte)

  4. Gebruik – Wanneer zou jij dit bestandsformaat gebruiken?

Eisen:

Inleveren - 1 .csv bestand

https://www.youtube.com/watch?v=aZ_wB9V6yos

✍️ Opdracht 4

05 Digitale identiteit en netiquette

✍️ Opdracht 5

06 Cyberveiligheid & privacy

✍️ Opdracht 6


07

✍️ Opdracht 7


08 Herhaling + Voorbereiding op toets

✍️ Opdracht 8

Toetsweek

Eind Opdracht


New Page

9 Prompt Library – Effectief AI-prompten

🎯 Leerdoelen

💡 Uitleg

Een Prompt Library is een verzameling beproefde prompts waarmee je AI‑tools effectief aanstuurt. De AI Report Prompt Library bevat bruikbare voorbeelden en best practices om betere antwoorden van ChatGPT, Claude, Gemini + anderen te krijgen :contentReference[oaicite:1]{index=1}.

Effectief prompten betekent: helder, specifiek en met de juiste context. Ethan Mollick vergelijkt dit met typen: het is een vaardigheid die je in ongeveer 10 uur onder de knie kunt krijgen :contentReference[oaicite:2]{index=2}.

Belangrijkste promptprincipes:

🛠️ Opdracht – prompt aanpassen

  1. Ga naar de AI Report Prompt Library (link).
  2. Kies een prompt uit de categorie “Administratie” of “Lesson Planning”.
  3. Bestudeer de prompt in de library – noteer: wat doet de prompt, welke rol geeft hij mee en welk format vraagt hij?
  4. Pas de prompt aan zodat hij relevant is voor jouw onderwijscontext (bijv. toetsvragen genereren, een lesplan opstellen).
  5. Voer de aangepaste prompt uit in ChatGPT (of vergelijkbare tool) en beantwoord de vragen hieronder:

🧠 Reflectie

📤 Inleveren