Blok 7 - Intro Frameworks en Deployement

Prompt Engineering 3
1, Introductie 

 datasource 

 We hebben in prompt engineering 1 en 2 geleerd waaraan een goede prompt moest voldoen. 

 Dit zijn de basis kenmerken van een goede prompt. De eerste drie kenmerken moet je prompt altijd aan voldoen! 

 

 

 

 Context - een goede prompt heeft voldoende contexrt. 

 Details / Specifiek - een goed prompt heeft voldoende details en is zo specifiek mogelijk. 

 Duidelijkheid - een goede prompt is concreet en bevat geen vage termen zoals (mooi, groot, .....), zei hier . 

 Doelgericht - een goede prompt is doelgericht. 

 Vorm - in een goede prompt kan je de output in een bepalade vorm vragen. 

 Toon -door in de prompt de toon op te nemen, bepaal je de vorm van het antwoord. 

 

 

 

 In deze module gaan we nog meer advanched prompt-technieken leren. Deze technieken heb je niet altijd nodig maar het is handig om deze technieken te kennen. 

 Bovendien zijn de meeste techniekken ook toepasbaar als ' problem solving ' technieken. 

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

 Gebruik kritiek als leermoment (prompt debugging) Laat de AI uitleggen waarom een prompt niet goed werkte en hoe je die kunt verbeteren. 

 

 

 ✍️ Opdracht 

 In de tekst hierboven wordt gesproken over problem solving . Dit begrip wordt niet verder uitgewerkt. 

 

 

 Gebruik AI om te achterhalen wat de 5 concrete stappen van problem solving zijn. 

 

 

 Beschrijf deze 5 stappen kort in je eigen woorden. 

 

 

 Geef aan welke stap jou het lastigst lijkt en leg uit waarom. 

 

 

 📤 Inleveren 

 Lever een TXT of PDF-bestand in met: 

 

 

 De 5 stappen (met korte uitleg). 

 

 

 Een korte toelichting (minimaal 3 zinnen) over welke stap jouw het moeilijkst lijkt en waarom. 

 

 

 1. Role Prompting 

 💡 Uitleg 

 Je kunt de AI vragen om te reageren alsof ze een bepaalde rol heeft . Bijvoorbeeld: 

 

 een ervaren programmeur 

 een beginnende student 

 een HTML-docent 

 een code-reviewer 

 

 Door een rol te geven, pas je automatisch de toon, moeilijkheidsgraad en stijl van het antwoord aan. Dit helpt je om antwoorden te krijgen die beter passen bij jouw doelgroep of bij jouw situatie. 

 🎬Voorbeeld 

 Prompt 

 Leg uit wat een  <form> -element is in HTML, alsof je een docent bent die het uitlegt aan een groep mbo-studenten zonder programmeerervaring. 

 Verwachte AI-reactie 

 Een <form> is een stuk HTML-code waarmee gebruikers informatie kunnen invullen, zoals hun naam of e-mailadres. Denk aan een online formulier dat je invult om iets te bestellen. De informatie die je invult wordt verstuurd naar de website zodat er iets mee gedaan kan worden. 

 Laat de AI vragen stellen als een docent 

 Je kunt ook aan de AI vragen om deelvragen te stellen, zoals een goede docent dat zou doen. 

 Prompt 

 Speel de rol van een HTML-docent. Stel mij eerst drie vragen waarmee je kan inschatten hoeveel ik al weet over formulieren in HTML. Geef daarna pas een uitleg op mijn niveau. 

 Wat dit doet 

 

 De AI stelt vragen zoals: “Wat denk je dat een <form> doet?”, “Heb je eerder inputvelden gebruikt?” 

 De AI past daarna de uitleg aan op basis van jouw antwoorden (of een inschatting daarvan) 

 

 ✍️ Opdracht 

 Je wilt dat de AI uitleg geeft over een klein stukje code, maar dan in een specifieke rol . Bijvoorbeeld: als docent, als programmeermaatje, of als code-reviewer. 

 

 Je bent een student die uitleg wil over hoe een formulier werkt in HTML Je wilt dat de AI zich gedraagt als een docent die eerst deelvragen stelt voordat hij iets uitlegt 

 Schrijf een prompt waarin je duidelijk de rol beschrijft die de AI moet aannemen. 

 

 📤 Inleveren 

 

 Je volledige prompt 

 Het AI-antwoord 

 

 2. Vraag om alternatieven of variaties 

 💡 Uitleg 

 De AI geeft standaard vaak slechts één oplossing . Maar in de praktijk zijn er meestal meerdere manieren om iets te doen — zeker in programmeertalen als HTML, CSS, PHP of JavaScript. 

 Je kunt dus expliciet vragen om meerdere oplossingen of variaties , zoals: 

 

 “Geef 3 manieren om een knop te centreren met CSS.” 

 “Laat 2 varianten zien van hetzelfde formulier: één minimalistisch en één met veel opmaak.” 

 “Bedenk 3 manieren om input te valideren in JavaScript.” 

 

 Voordelen 

 

 Je leert alternatieve technieken kennen 

 Je kunt zelf kiezen welke stijl of methode bij jouw project past 

 Je voorkomt dat je AI-antwoorden blind overneemt zonder kritisch te zijn 

 

 🎬Voorbeeld 

 Prompt 

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

 Verwachte AI-reactie (beknopt) 

 

 text-align: center op de container + display: inline-block op de knop 

 margin: 0 auto bij een block-level knop met vaste breedte 

 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. 

 

 Kies één van deze taken:

 

 Validatie toevoegen aan een inputveld, of 

 Een PHP-script schrijven dat data toont 

 

 

 Schrijf een prompt waarin je de AI vraagt om minstens 3 alternatieven of varianten van die oplossing. 

 Gebruik in je prompt woorden als:

 

 “Geef meerdere mogelijkheden…” 

 “Laat minstens 3 manieren zien…” 

 “Toon varianten van deze code…” 

 "Beschrijf van elke variant de voor- en nadelen...." 

 

 

 Zorg voor een goede opbouw in je prompt met:

 

 Context: wat ben je aan het doen en welke technieken gebruik je? 

 Details: wat zijn de randvoorwaarden? 

 Duidelijkheid: hoeveel oplossingen wil je? 

 

 

 

 📤 Inleveren 

 

 Je volledige prompt 

 De gegenereerde alternatieven van de AI 

 Een korte reflectie (reflectie.txt): welke oplossing vind jij het beste, en waarom? 

 

 3. Iteratief verbeteren 

 💡 Uitleg 

 De AI geeft vaak een eerste versie van een antwoord, maar dat hoeft niet perfect te zijn. Je kunt de AI daarom vragen om het eigen antwoord te beoordelen en te verbeteren . 

 Dit heet iteratief verbeteren . 

 Bijvoorbeeld 

 

 “Herschrijf dit zodat het eenvoudiger is voor een beginner.” 

 “Geef dezelfde code, maar nu met uitleg erbij.” 

 “Kun je deze oplossing optimaliseren voor leesbaarheid?” 

 

 Je leert zo hoe je feedback kunt geven aan de AI, en je oefent tegelijkertijd zelfkritisch denken over codekwaliteit . 

 🎬Voorbeeld 

 Prompt 

 Geef me een formulier in HTML waarmee iemand zich kan inschrijven voor een nieuwsbrief. Voeg daarna uitleg toe over hoe elk onderdeel werkt. 

 Vervolgprompt 

 Herschrijf je antwoord zodat het ook begrijpelijk is voor iemand die nog nooit HTML heeft gezien. 

 ✍️ Opdracht 

 Je wilt dat de AI het eigen werk verbetert — of dat jij feedback geeft, en dat de AI dat verwerkt. 

 

 Vraag de AI eerst om een korte opdracht uit te voeren. Bijvoorbeeld: 

 

 Een stukje JavaScript schrijven dat controleert of een naam de juiste hoofdletters en punten heeft.

 

 Dus goede namen zijn:

 

 M. Bisschop 

 J. K. van der Velden, 

 

 

 onjuiste namen zijn:

 

  M Bisschop (punt mist) 

 k. van der Velden (k is geen hoofdletter). 

 

 

 

 

 

 

 Lees het antwoord goed door. Stel daarna een vervolgprompt waarin je de AI vraagt om:

 

 het duidelijker te maken, 

 het aan te passen voor beginners, 

 het te herschrijven met uitleg/commentaar, 

 of het korter, leesbaarder of efficiënter te maken. 

 

 

 Schrijf beide prompts uit: 

 

 de eerste vraag, gebruik hierbij de few-shot prompt techniek (voorbeelden). 

 de verbeteropdracht 

 

 

 Zorg dat je feedback duidelijk is: wat wil je precies anders of beter? 

 Zorg ervoor dat je de code begrijpt. 

 

 📤 Inleveren 

 

 Je eerste prompt 

 Het eerste AI-antwoord 

 Je tweede prompt (de verbeteropdracht) 

 Het verbeterde AI-antwoord 

 

 Deze opdracht laat je zien aan een docent. Je laat zien wat je eerste- en twede eprompt is en je kunt zelf uitleggen hoe de code w 

 4 Gebruik prompt templates 

 Uitleg 

 Als je regelmatig AI gebruikt voor soortgelijke taken, is het handig om te werken met een vaste structuur : een prompt template . 

 Een template helpt je om: 

 

 niets te vergeten in je vraag; 

 sneller en consistenter te werken; 

 betere output te krijgen van de AI. 

 

 Een goede prompt bestaat vaak uit onderdelen zoals: 

 

 Context – wat is de situatie? 

 Specifiek - wat wil precies je bereiken? 

 Duidelijk - zorg dat je prompt geen 'vage' aanwijzingen heeft 

 Outputvorm – in welke vorm wil je het antwoord? 

 Toon – formeel, informeel, eenvoudig, technisch? 

 

 Voorbeeld van een prompt template 

 Context: Ik werk aan een HTML-formulier

Doel: Ik wil dat de AI me helpt met het maken van een formulier voor e-mailinvoer

Outputvorm: Alleen HTML-code, zonder uitleg

Toon: Neutraal en duidelijk

 

 Voorbeeldprompt: Gebruik onderstaande context en geef alleen de code: Ik wil een formulier voor e-mailadres, zonder uitleg. Context: HTML-formulier Output: HTML-code 

 Opdracht 

 Je gaat zelf een prompt schrijven met behulp van een prompt-template. 

 

 Gebruik het volgende sjabloon en vul de velden in:

 Context:

Doel:

Outputvorm:

Toon:

 

 

 Schrijf daarna een volledige prompt op basis van jouw ingevulde template. 

 Stuur je prompt naar de AI en bekijk het resultaat:

 

 Krijg je precies wat je bedoelde? 

 Is de toon en vorm correct? 

 Zou je iets willen toevoegen aan je template? 

 

 

 (Optioneel) Pas je template aan en probeer het nog eens. 

 

 Inleveren 

 

 Je ingevulde template 

 De volledige prompt 

 De output van de AI 

 Een korte reflectie: werkte het goed? Wat zou je verbeteren aan het sjabloon? 

 

 

 5. Vraag om zelfvragen (self-questioning) 

 Uitleg 

 Soms weet je nog niet goed wat je precies moet vragen , of wil je dat de AI eerst nadenkt over het probleem vóórdat het met een oplossing komt. 

 Dan kun je de AI vragen om eerst zelf vragen te stellen over de situatie of opdracht. 

 Deze techniek helpt om: 

 

 een probleem beter te begrijpen 

 complexe opdrachten op te breken 

 geen belangrijke dingen over het hoofd te zien 

 

 Deze techniek lijkt op chain-of-thought prompting , maar het verschil is: 

 👉 De AI stelt eerst vragen aan zichzelf of aan jou om het probleem helder te krijgen. 

 Voorbeeld 

 Prompt: Ik wil een inschrijfformulier bouwen voor mijn website. Stel jezelf eerst 3 vragen zodat je weet wat je precies moet bouwen. Beantwoord die vragen. Bouw daarna pas het formulier in HTML. 

 Verwachte AI-antwoord: 

 

 Welke gegevens moet de gebruiker invullen? 

 Moet de invoer gevalideerd worden? 

 Wat moet er gebeuren na het verzenden? 

 

 Daarna volgt uitleg én pas daarna de code. 

 Opdracht 

 Je wilt dat de AI een simpele programmeeropdracht uitvoert, maar eerst zelf nadenkt over wat er nodig is , door zichzelf (of jou) vragen te stellen. 

 

 Kies een opdracht, bijvoorbeeld:

 

 Maak een contactformulier 

 Valideer een inputveld met JavaScript 

 Toon resultaten in PHP 

 

 

 Schrijf een prompt waarin je de AI vraagt om:

 

 eerst 3 vragen te stellen over de opdracht, 

 die vragen zelf te beantwoorden, 

 daarna pas te starten met uitleg en/of code 

 

 

 Je kunt de prompt afsluiten met: “Geef de code pas nadat je de vragen hebt beantwoord.” 

 

 Inleveren 

 

 Je volledige prompt 

 De 3 vragen + antwoorden van de AI 

 De gegenereerde uitleg en code 

 Korte toelichting: hielp dit om het probleem beter te begrijpen? 

 

 6. Gebruik kritiek als leermoment (prompt debugging) 

 Uitleg 

 Niet elke prompt die je aan de AI geeft, levert direct het gewenste resultaat op. Soms krijg je: 

 

 een onvolledig antwoord, 

 verkeerde code, 

 te algemene uitleg, 

 of net niet wat je bedoelde. 

 

 In plaats van gefrustreerd te raken, kun je deze momenten gebruiken om van je fout te leren : 

 👉 Laat de AI zelf uitleggen waarom de prompt niet goed werkte, en hoe je die beter kunt formuleren. 

 Zo leer je hoe kleine verschillen in formulering grote impact kunnen hebben. 

 Voorbeeld 

 Slechte prompt: Maak een mooie website 

 Verbeterde prompt: Maak een eenvoudige, moderne HTML-pagina met een grote titel, een navigatiebalk bovenaan, en drie contentblokken onder elkaar. Gebruik alleen HTML en CSS, zonder externe libraries. 

 Prompt debugging: Waarom gaf de AI een vage reactie op “maak een mooie website”? Wat zou ik anders moeten vragen? 

 Opdracht 

 Je oefent met het herkennen en verbeteren van een slechte prompt. 

 

 Schrijf eerst bewust een vage of slechte prompt , zoals:

 

 “Maak een website” 

 “Schrijf een formulier” 

 “Geef uitleg over PHP” 

 

 

 Vraag vervolgens aan de AI: 

 

 Waarom deze prompt niet optimaal is 

 Wat er beter zou kunnen aan deze prompt 

 Hoe je de prompt kunt herschrijven 

 

 

 Schrijf daarna een verbeterde versie van je prompt, en test het resultaat. 

 Reflecteer: 

 

 Wat is het verschil in output? 

 Wat leer je hiervan over duidelijkheid en specificiteit in prompts? 

 

 

 

 Inleveren 

 

 De oorspronkelijke (slechte) prompt 

 De analyse van de AI 

 De verbeterde prompt 

 De nieuwe output 

 Korte reflectie: wat is het belangrijkste inzicht? 

 

 7. Praktijkopdracht – Kennischeck Generator 

 💡 Uitleg 

 In deze opdracht ga je AI gebruiken om zelf een quiz (kennischeck) te genereren op basis van een onderwerp dat je via een URL aanlevert. 

 Het doel is dat je niet alleen één keer een quiz maakt, maar dat je een herbruikbare prompt ontwikkelt die je telkens opnieuw kunt gebruiken om jezelf te trainen op verschillende onderwerpen. 

 Je combineert hiermee meerdere technieken uit deze module: 

 

 prompt templates (vaste structuur) 

 duidelijk formuleren (context, details, output) 

 alternatieven (goede en foute antwoorden) 

 iteratief verbeteren (prompt verbeteren op basis van resultaat) 

 

 🎯 Leerdoelen 

 

 Je kunt een herbruikbare prompt ontwerpen. 

 Je kunt AI inzetten om jezelf actief te testen op kennis. 

 Je leert hoe je AI-output kritisch beoordeelt en verbetert. 

 

 ✍️ Opdracht 

 Je gaat een generieke prompt maken die automatisch een quiz genereert op basis van een webpagina. 

 

 

 Stap 1 – Kies een onderwerp via URL 

 

 Kies een pagina met lesstof, bijvoorbeeld van ROC OVH of een andere bron. 

 Voorbeeld: een HTML-, CSS-, PHP- of SQL-pagina. 

 

 

 

 Stap 2 – Ontwerp je prompt (template) 

 Gebruik onderstaande structuur als basis: 

 Context: Ik wil mezelf trainen op een onderwerp via een webpagina.

Bron: [PLAK HIER DE URL]

Doel: Maak een kennischeck zodat ik kan testen of ik de inhoud begrijp.

Details: - Maak X meerkeuzevragen - Elke vraag heeft Y antwoordopties - Slechts Z antwoord is correct - De vragen moeten gebaseerd zijn op de inhoud van de pagina.

Outputvorm: - ......

Toon: Duidelijk en geschikt voor mbo-studenten 

 

 

 Stap 3 – Maak een volledige prompt 

 

 Vul de template volledig in. 

 Zorg dat je prompt voldoet aan:

 

 Context (wat ben je aan het doen?) 

 Details (hoeveel vragen, welk format?) 

 Duidelijkheid (geen vage termen) 

 

 

 

 

 

 Stap 4 – Test en verbeter (iteratief) 

 

 Genereer de quiz met je prompt. 

 Controleer:

 

 Kloppen de vragen inhoudelijk? 

 Zijn de foute antwoorden realistisch? 

 Is het niveau passend? 

 

 

 Pas je prompt aan als het resultaat niet goed genoeg is. 

 

 

 

 Stap 5 – Maak je prompt herbruikbaar 

 

 Zorg dat je prompt zo is geschreven dat je alleen de URL hoeft te veranderen. 

 Test je prompt met minimaal 2 verschillende URLs . 

 

 

 

 🎬 Voorbeeld 

 Voorbeeldprompt 

 Context: Ik wil mezelf testen op HTML-kennis. Bron: https://www.roc.ovh/books/software-development-2025/page/html Doel: Genereer een kennischeck. Details: Maak 5 meerkeuzevragen met 4 opties, waarvan 1 correct. Toon: Duidelijk en geschikt voor mbo-studenten. 

 Werk dit verder uit zodat je een toets krijgt die de vragen steeds lastiger maakt maar waarbij de vragen wel uit de leerstof komen. Uiteindelijk, na x vragen krijg je een saemvatting van wat je al goed weet en wat je nog moet testen. 

 Zorge ervaar dat je de toets makelijk kan maken en maak het een zo dat het uitvoeren van de toets motiverend en leuk is voor jou. 

 ✍️ Reflectie 

 

 Wat ging goed bij het maken van je prompt? 

 Wat moest je aanpassen om betere vragen te krijgen? 

 Wat is het verschil tussen je eerste en laatste prompt? 

 

 📤 Inleveren 

 

 Je definitieve (herbruikbare) prompt 

 Een korte reflectie (minimaal 3 zinnen)

Deployment
1 Toegang tot PLESK 

 Ga na bij een Software Development docent en meld dat je met deze module start. De docent zal alles voor je klaarzetten! 

 Om te beginnen heb je toegang nodig tot PLESK. Hiervoor ga je met je browser naar het volgende adres: 

 https://jouw.website/ 

 Vervolgens krijg je een inlogscherm. Klik hier op 'Wachtwoord vergeten?' om een link te krijgen voor het aanmaken van een wachtwoord. Je inlognaam is je studentnummer. 

 Om een wachtwoord te resetten (of op te vragen) gebruik je je email adres studentnummer@talnet.nl, bijvoorbeeld :  123456@talnet.nl 

  Vergeet niet je SPAM-box te checken. 

 Als je bent ingelogd in PLESK, kom je gelijk in de beheeromgeving van jouw website. De url van jouw website is: <jouw studentnummer>.jouw.website 

 Als je deze url voor de eerste keer intyped zie je een standaard (tijdelijke) pagina. Deze ga je in de volgende onderdelen vervangen door de door jou gemaakte website- / applicatie. Veel browsers zullen deze pagina niet direct laten zien. Dit komt omdat de site nog niet beveiligd is met een SSL certificaat (slotje bij je browser url). 

 📤 Inleveren 

 

 Screenshot van je browser met de PLESK-omgeving en zichtbare domeinnaam/URL. 

 

 2 Beveilig het domein met een SSL‑certificaat 

 Start met het bekijken van je domein in de browser: <studentNummer>.jouw.website . Let op het slot-icoon in de adresbalk. 

 Stap 1 

 Voer jouw domeinnaam in, in je browser. Er kunnen afhankelijk van je browser, computer, virusscanner verschillende dingen gebeuren. Kijk wat je ziet. En kijk ook of er naast de domeinnaam / url in je adresbalk een slotje te zien is. Hoe ziet dat er uit? 

 

 Wat was ook alweer een domeinnaam? 

 Een domeinnaam is het adres van een website dat je intoetst in de browser, zoals: www.google.com 

 

 Stap 2 

 Log in op je PLESK-omgeving en ga naar het onderdeel 'SSL/TLS-certificaten' onder 'Beveiliging'. Hier zie je verschillende mogelijkheden die je hebt om certificaten te installeren. Dit is per beheersysteem verschillend en ligt er aan hoe een beheersysteem is ingericht. Wij maken gebruik van het soort certificaat van 'Let's Encrypt'. Dit is een gratis open source certificaat dat vaak is geïnstalleerd op een beheersysteem (PLESK) 

 

 Wat is een certificaat? 

 Een certificaat op internet is een soort digitaal paspoort voor een website. Het bewijst dat de websiteeen veilige verbinding maakt. 

 🔒 Bijvoorbeeld: Als je https:// ziet en een slotje in de adresbalk, dan gebruikt de website een certificaat. 

 

 Een certificaat zorgt ervoor dat de verbinding tussen jou en de website veilig is (versleuteld), maar het garandeert niet dat de website zelf te vertrouwen is. 

 

 💡 Een nepwebsite (zoals ing-bank-login.xyz ) kan ook gewoon een geldig certificaat hebben en een slotje tonen. Daarom moet je altijd goed naar het adres kijken en alleen websites vertrouwen die je kent of via een betrouwbare link bezoekt. 

 

 

 Stap 3: Klik onder aan de certificatenpagina op ' Installeren ' bij het onderdeel 'Let's Encrypt' 

 

 Hierna krijg je opties voor wat je op je domein wilt beveiligen. Het belangrijkste voor nu is de domeinnaam. Maar bijvoorbeeld mail kun je hier ook laten versleutelen met een certificaat. 

 Stap 4 

   Klik aan wat je nodig hebt. Je kunt alles aanvinken behalve de 'Wildcard'optie. Hiervoor zijn meerdere handelingen nodig. 

 

 Wat is een wildcard? 

 Een wildcard-optie betekent dat je met één instelling o meerdere variaties in één keer dekt. 

 Een * staat bij een wildcard voor "alles" of "maakt niet uit wat hier staat". 

 

 Stap 5 

 Bekijk de site nogmaals in je browser (eventueel refreshen) en kijk of je verschil ziet en of het domein is beveiligd. 

 Stap 6 

 Maak een screenshot van je browser met hier in de adresbalk waar jou domeinnaam + het beveiligingsslotje goed zichtbaar is. Stuur ook jouw url in. 

 Werkt het niet? 

 Het kan zijn dat er in het geheugen van jouw browser nog staat dat de website niet veilig is. Met het volgende commando kan je dat geheugen leeg maken. 

 Ga naar CMD (command box) en type daar in: 

 ipconfig /flushdns 

 

 🧠 Reflectie – SSL-certificaat installeren 

 

 Wat is het doel van een SSL-certificaat? 

 Wat verandert er zichtbaar in je browser als een site beveiligd is? 

 Wat kan er misgaan als een website géén SSL-certificaat heeft (zoek dit eventueel op)? 

 Welk type certificaat heb je gekozen en waarom was de 'Wildcard' optie niet geschikt? 

 

 📤 Inleveren 

 

 Lever je reflectie in als .txt of .pdf-bestand. 

 Screenshot van de browser met het beveiligde domein (slotje zichtbaar). 

 URL van je domein. 

 

 3 Maak een FTP‑account aan 

 Maak via PLESK een FTP-account met zelfgekozen gebruikersnaam en wachtwoord. Stel de hoofdmap in op de root-directory van je (live) website. 

 🧠 Reflectie – FTP-account aanmaken 

 

 Wat is het doel van een FTP-account bij het beheren van je website? 

 Welke gegevens moet je onthouden of noteren bij het aanmaken van een FTP-account? 

 

 📤 Inleveren 

 

 Lever je reflectie in als .txt of .pdf-bestand. 

 

 4 FTP-verbinding maken en bestanden plaatsen 

 ⬇️ FTP-client downloaden en installeren 

 Je mag natuurlijk alle programma's die je fijn vindt gebruiken. In de uitleg gaan we kijken naar de client van FileZilla (zelfde organisatie als FireFox). Dit is een gratis programma dat je hier kunt downloaden: 

 https://filezilla-project.org/download.php?type=client 

 ! let er op dat je de clientversie gebruikt. 

 Installeer dit programma op je computer. 

 

 🔌FTP-verbinding maken 

 Nu je de FTP-client hebt geïnstalleerd gaan we een verbinding maken met jouw domein op de server. Om dit te doen heb je 3 gegevens nodig: 

 

 Host (server) Hier kun je je domeinnaam invoeren: <studentnummer>.jouw.website 

 Gebruiker (zoals je deze hebt aangemaakt bij het maken van een ftp-account op de server) 

 Wachtwoord (zoals je deze hebt aangemaakt bij het maken van een ftp-account op de server) 

 

 Volg onderstaande stappen om een verbinding te maken: 

 

 open FileZilla 

 open 'sitebeheer' via: bestanden -> sitebeheer 

 klik op 'nieuwe site' 

 geef de site een naam in het linker overzichtsscherm 

 Voer je host, je gebruikersnaam en wachtwoord in 

 klik je op 'verbinden' 

 

 

 Als het goed is, ben je nu ingelogd en zie je de inhoud van je servermap waar je een site kunt plaatsen.  

 

 Verwijder de bestanden die je ziet op de server. 

 Maak een eigen index.html bestand aan op je computer. Maak hier een leuke pagina van met html-code. Plaats deze vervolgens op de server via FTP. Als je FileZilla gebruikt zie je in het linker gedeelte van je scherm, bestanden op jouw computer en rechts die op de server. 

 Bekijk je nieuwe pagina in je browser door naar je site te gaan! 

 Mooi, he!?  

 🧠 Reflectie – FTP-account aanmaken 

 

 Wat kan er gebeuren als je een verkeerde hoofdmap instelt bij je FTP-account? 

 Wat zou je een volgende keer anders aanpakken bij het instellen van FTP-toegang? 

 

 📤 Inleveren 

 

 URL van jouw domein met de nieuwe indexpagina. 

 Lever je reflectie in als .txt of .pdf-bestand. 

 

 5 Database aanmaken 

 Maak in PLESK een nieuwe database én gebruiker aan: Geef de database de naam: <jouw_studentnummer>-database1 

 Je ziet de database in het overzicht; open phpMyAdmin daarvoor. 

 📤 Inleveren 

 

 Screenshot van phpMyAdmin in je browser inclusief adresbalk en database‑naam. 

 

 6 Webapplicatie installeren 

  In de CRUD Challenge heb je een applicatie gemaakt, waarmee geregistreerd kon worden wie te laat in de klas kwam en de reden daarvan. Weet je nog!? Dit ga je nu live zetten op jouw server. 

 

 Nu is het tijd om jouw applicatie 'live' te zetten op de server, zodat iedereen via Internet er gebruik van kan maken. ! Hou er rekening mee dat het kan zijn dat je code moet aanpassen om een goede verbinding te maken met de database. Tip: Net als in xampp, kun je als hostname / servername ' localhost ' gebruiken. Inleveren : De url van jouw (werkende) applicatie  

 ✨ Let op: je moet mogelijk de database-connectie in je code aanpassen (bijv. hostname = ‘localhost’). 

 📤 Inleveren 

 

 URL van je live, werkende applicatie. 

 

 7 Test je Kennis 

 

 Wat is Plesk? 

 Plesk is een soort bedieningspaneel voor je website. Je kunt het vergelijken met het dashboard van een auto, maar dan voor je webserver. 

 👉 Wat kun je ermee doen? 

 

 

 Je eigen domeinnaam instellen (zoals www.jouwsite.nl) 

 

 

 Bestanden uploaden van je website 

 

 

 Een database aanmaken 

 

 

 Een SSL-certificaat installeren (voor de 🔒 in je adresbalk) 

 

 

 E-mailadressen beheren (zoals info@jouwsite.nl) 

 

 

 🛠️ Plesk maakt het dus makkelijk om je website online te zetten en te beheren, zonder dat je moeilijke servercommando’s hoeft te leren. 

 

 

 Wat doet een SSL‑certificaat en waarom is dat belangrijk? 

 Een SSL‑certificaat zorgt ervoor dat gegevens tussen bezoeker en website versleuteld zijn. 

 Je herkent het aan de 🔒 in de adresbalk. Het beschermt tegen afluisteren en verhoogt vertrouwen, maar zegt niets over de betrouwbaarheid van de site zelf. 

 

 

 Wat betekent ‘wildcard’-optie bij certificaten en waarom kies je die niet meteen? 

 Een wildcard‑certificaat dekt alle subdomeinen (bijv. *.jouw.website). Voor eenvoudige sites heb je die vaak niet nodig, en het vereist extra configuratie, dus kies je meestal alleen jouw domein. 

 

 

 Waarom moet je een FTP‑account aanmaken en waar is dit goed voor? 

 Met een FTP‑account kun je verbinding maken met de server en bestanden (zoals je website) uploaden of bijwerken. Het is dé manier om jouw code ‘live’ te zetten. 

 

 

 Waarom is het nodig de database-connectie opnieuw in te stellen bij deployment van je CRUD-applicatie? 

 In je lokale development omgeving gebruik je meestal gebruiker 'root' zonder wachtwoord (lekker makkelijk!). 

 Op de productieserver moet je de het wachtwoord en liefst ook de gebruikersnaam aanpassen om te voorkomen dat je database makkelijker wordt gehakkeld en dat de informatie in verkeerde handen komt. 

 

 🧠 Reflectie-opdracht – Van lokaal naar live 

 Tijdens deze module heb je een webapplicatie van je eigen computer naar een echte server gebracht. Dat betekent dat je hebt gewerkt met Plesk, FTP, SSL en een database op een server. 

 ✍️ Opdracht 

 Maak een reflectie en beantwoord de volgende vragen. 

 

 Wat vond je het lastigste onderdeel van deze opdracht? Leg uit waarom dit lastig was en hoe je het uiteindelijk hebt opgelost. 

 Waar heb je AI ingezet en waarbij heeft dat jou goed geholpen? 

 Wat is volgens jou het belangrijkste verschil tussen een website draaien op je eigen computer (bijv. XAMPP) en op een echte server? 

 Vind je dat elke software developer moet begrijpen hoe deployment werkt (servers, databases, SSL)? Leg uit waarom wel of niet. 

 Stel dat je deze webapplicatie opnieuw zou moeten deployen.

 

 Welke stappen zou je hetzelfde doen? 

 Welke stappen zou je anders aanpakken of beter voorbereiden? 

 

 

 

 📤 Inleveren 

 Persoonlijke reflectie in PDF 

 --

CMS (v2)
01 Wat is een CMS? 

 🎯 Leerdoelen van de hele module 

    • Wat is een CMS?     • Het installeren van Wordpress     • De belangrijkste onderdelen van Wordpress     • Het toevoegen van pagina’s, media en een navigatiemenu     • Het installeren en instellen van een thema     • Wat zijn plugin’s     • Het installeren en instellen van een plugin 

 🎯 Leerdoelen voor opdracht 1 

 

 Je weet wat een CMS is. 

 Je kunt uitleggen wat je met een CMS zoals WordPress kunt doen. 

 Je begrijpt waarom veel websites met een CMS gebouwd worden. 

 

 💡 Uitleg 

 CMS staat voor Content Management System . Een CMS is een programma waarmee je op een eenvoudige manier een website kunt maken en beheren. 

 Je kunt met een CMS pagina’s aanmaken, plaatjes toevoegen, navigatiemenu’s maken en zelfs extra functies installeren – allemaal zonder te programmeren. 

 Een CMS bestaat meestal uit een basispakket (de 'kern') en uitbreidingen. Je kunt bijvoorbeeld thema’s toevoegen om het uiterlijk aan te passen, of plugins om functionaliteit toe te voegen zoals een webshop, contactformulier of nieuwsbrief. 

 Populaire voorbeelden van CMS-systemen zijn WordPress , Drupal en Joomla . 

 In deze module leer je werken met het meest gebruikte CMS ter wereld: WordPress . 

 WordPress is open-source software . Dat betekent dat je het gratis mag gebruiken en aanpassen. Je kunt WordPress zien als een grote doos met Lego-blokken: 

 

 De basisblokken vormen je website: pagina’s, menu’s, afbeeldingen, enzovoort. 

 Met uitbreidingen (plugins en thema’s) geef je de site een nieuw uiterlijk of voeg je functies toe zoals een online winkel. 

 

 WordPress maakt het dus mogelijk om heel snel een professionele website te bouwen – zonder dat je technische kennis nodig hebt. 

 🧠 Reflectie 

 Met CMS heb je relatief snel en eenvoudig een website maken. 

 

 Wat denk je dat de invloed van AI is op het gebruik van CMS? 

 Denk je dan CMS meer/minder zal worden gebruikt, licht je antwoord in eigen woorden toe. 

 

 📤 Inleveren 

 

 Zoek een website op die gemaakt is met Wordpress en lever de URL van de website in. 

 Beantwoord de reflectievragen. 

 

 02 WordPress installatie uitvoeren 

 🎯 Leerdoelen 

 

 Je kunt het installatieproces van WordPress starten via je browser. 

 Je weet hoe je Apache en MySQL moet starten in XAMPP. 

 Je kunt inloggen op je eigen WordPress-site via de juiste URL. 

 

 💡 Uitleg 

 In dit onderdeel ga je een lokale WordPress-website maken met behulp van XAMPP . Dit betekent dat je website alleen werkt op jouw eigen laptop. Voor het maken van een WordPress-site zijn een paar stappen nodig. In eerdere modules heb je al met XAMPP gewerkt, dus we gaan ervan uit dat deze al geïnstalleerd is op je computer. 

 Stap 1 – Database aanmaken 

 Open phpMyAdmin via localhost/phpmyadmin . Maak een nieuwe database aan. Bedenk zelf een geschikte naam (bijv. wp-jan ). 

 Stap 2 – WordPress downloaden 

 Download de laatste versie van WordPress van de officiële site: 

 https://wordpress.org/download/ 

 Let op: Download het NIET van wordpress.com! 

 Sla het ZIP-bestand op in je htdocs -map van XAMPP (meestal: C:\xampp\htdocs ). 

 Je bent nu klaar om WordPress te installeren. Dit doe je in je browser, maar eerst moet je controleren of de juiste onderdelen van XAMPP actief zijn: 

 

 Zorg dat Apache en MySQL zijn gestart in de XAMPP-console. Ze moeten groen zijn. 

 

 

 Voorbereiding 

 Tijdens het installatieproces dat je gaat doorlopen, wordt er gevraagd om de volgende informatie.  

 

 

 

 

 Naam van de database Dit is de naam van de database die je net hebt aangemaakt 

 Gebruikersnaam van de database Dit is de default gebruiker van de xampp database:         ◦ [user] root 

 Wachtwoord van de database         ◦ [password] (leeg) 

 Host van de database         ◦ localhost 

 Tabel voorvoegsel (wanneer je meer dan één WordPress installatie wilt gebruiken in een enkele database) Deze is nu niet van toepassing en mag je onveranderd laten tijdens de installatie 

 Titel van de site1 Bijvoorbeeld: ‘De website van <jouwnaam>’ 

 Inloggegevens om later in het programma te kunnen inloggen         ◦ Gebruikersnaam         ◦ Wachtwoord 

 Jouw mailadres  (om eventueel later het wachtwoord te kunnen herstellen) 

 

 

 

 

 Schrijf deze informatie op omdat je later mogelijk nog nodig hebt! 

 De installatie 

 Open nu je browser en ga naar: 

 http://localhost/wp-<jouwnaam> 

 Voorbeeld: http://localhost/wp-ayoub 

 Je ziet nu het installatieproces van WordPress in je browser. Lees alles zorgvuldig en vul de gevraagde gegevens correct in. Gebruik hierbij de informatie die je eerder hebt genoteerd (zie opdracht 1). 

 Na de installatie: 

 

 Je krijgt een bevestiging te zien dat WordPress is geïnstalleerd. 

 Je kunt direct inloggen met de gebruikersnaam en het wachtwoord die je tijdens de installatie hebt opgegeven. 

 Als je deze link niet meer ziet, kun je inloggen via: 

 

 http://localhost/wp-<jouwnaam>/wp-admin 

 🛠️ Opdracht – Installatie controleren 

 

 Log in op WordPress via http://localhost/wp-jouwnaam/wp-admin . 

 Maak een screenshot van je browser, waarop de WordPress-beheerderspagina zichtbaar is, met jouw naam in de adresbalk. 

 Open ook phpMyAdmin en klik op de database die je net hebt aangemaakt. 

 Maak een screenshot van de tabellenstructuur van jouw WordPress-database. 

 Maak een lijst van deze informatie en lever deze in als PDF-bestand met de volgende naam: installatiegegevens-<jouwnaam>.pdf 

 

 📤 Inleveren 

 

 inloggen-gelukt-jouwnaam.jpg : Screenshot van jouw WordPress-dashboard met jouw naam zichtbaar in de adresbalk. 

 phpmyadmin-jouwnaam.jpg : Screenshot van jouw WordPress-database in phpMyAdmin met tabellen zichtbaar. 

 Installatiegegevens in installatiegegevens-<jouwnaam>.pdf 

 

 03 Frontend en Backend in WordPress 

 🎯 Leerdoelen 

 

 Je begrijpt het verschil tussen de frontend en backend van een WordPress-site. 

 Je weet hoe je kunt inloggen op de backend (beheeromgeving). 

 Je kunt schakelen tussen frontend en backend via de admin-balk. 

 

 💡 Uitleg 

 In WordPress werk je in twee verschillende omgevingen: 

 1. De backend 

 De backend is het beheergedeelte van je site. Hier kun je onder andere: 

 

 Nieuwe pagina’s aanmaken 

 Functies toevoegen via plugins 

 Gebruikers beheren 

 Thema’s (templates) installeren voor het uiterlijk van je site 

 

 Je hebt een account nodig om toegang te krijgen tot de backend. Dat account heb je aangemaakt tijdens de installatie. 

 De standaard URL om in te loggen op de backend is: 

 http://sitenaam.nl/wp-admin 

 Als je lokaal werkt is dit bijvoorbeeld: http://localhost/wp-jouwnaam/wp-admin 

 2. De frontend 

 De frontend is de website zoals bezoekers deze zien. Iedereen kan deze omgeving bekijken – je hebt geen wachtwoord nodig, tenzij je dat instelt. 

 Switchen tussen frontend en backend 

 Als je bent ingelogd, zie je bovenaan een zwarte balk. Deze admin-balk is zichtbaar op alle pagina’s, zowel in de backend als de frontend. 

 Met deze balk kun je makkelijk wisselen tussen beide omgevingen. 

 🔁 Manier 1 – Naar de homepage of het dashboard 

 

 Klik linksboven in de zwarte balk op het icoon naast het WordPress-logo. 

 Om naar de homepage te gaan: klik op het huis-icoontje . 

 Om naar het dashboard te gaan: klik op het dashboard-icoontje . 

 

 

 🧪 Probeer dit zelf een paar keer: Wissel tussen de backend en frontend van jouw site met behulp van de zwarte balk. 

 🧭 Manier 2 – Direct naar het onderdeel dat je wilt bewerken 

 Als je bijvoorbeeld een pagina bekijkt en je wilt de inhoud wijzigen, kun je via de zwarte balk direct naar de bewerkingspagina in de backend gaan. 

 Deze functie maakt het snel en makkelijk om onderdelen van je site aan te passen terwijl je ze bekijkt. 

 Hoe dit precies werkt, kom je later in deze module nog uitgebreid tegen! 

 Welke onderdelen van Wordpress gaan we in deze module gebruiken? 

 

 🧠 Reflectie 

 

 Wat is het verschil tussen frontend en backend? 

 Waarvoor gebruik je de zwarte admin-balk? 

 Waarom is het handig om direct vanuit de frontend naar het bewerkvenster te gaan? 

 

 📤 Inleveren 

 

 Antwoord op de reflectievragen (pdf of txt). 

 

 04 Pagina’s maken en aanpassen in WordPress 

 🎯 Leerdoelen 

 

 Je weet hoe pagina’s werken in WordPress. 

 Je kunt pagina’s bekijken en bewerken vanuit de frontend én de backend. 

 Je begrijpt het verschil tussen pagina’s in WordPress en losse HTML-bestanden. 

 

 Welke onderdelen van Wordpress gaan we in deze module gebruiken? 

 

 💡 Maken en onderhouden van pagina's 

 

 Als software developer heb je waarschijnlijk al vaak webpagina’s gemaakt met HTML en CSS. In WordPress kan dat ook, maar het hoeft niet! 

 In plaats van losse HTML-pagina’s en CSS-bestanden gebruikt WordPress een andere manier. Je maakt en bewerkt pagina’s gewoon via de backend, met een visuele editor. Je hoeft dus geen code te schrijven – al mag dat natuurlijk wel als je wilt! 

 Belangrijk om te onthouden: 

 

 Je hoeft niet technisch te zijn om een mooie website te maken in WordPress. 

 Maar als je wél technische kennis hebt, kun je die gebruiken voor extra aanpassingen. 

 

 Frontend ↔ Backend gebruiken 

 Via de zwarte admin-balk kun je gemakkelijk wisselen tussen de frontend en backend van je site. Zoals je eerder hebt geleerd, kun je dan heen en weer gaan tussen de homepage (frontend) en het dashboard (backend). 

 Maar soms wil je direct naar een specifieke pagina in de backend, bijvoorbeeld als je een stuk tekst wilt aanpassen op een bepaalde pagina. 

 Direct bewerken via de frontend 

 Als je bent ingelogd en je bekijkt een pagina via de frontend, dan zie je bovenaan een zwarte balk. Deze bevat een knop waarmee je direct naar het bewerkvenster van die pagina in de backend kunt gaan. 

 Dit is handig, want zo hoef je de pagina niet eerst handmatig op te zoeken in het dashboard. 

 Voorbeeldpagina bij installatie 

 Bij de installatie van WordPress wordt er automatisch een voorbeeldpagina aangemaakt. Die kun je bekijken via de volgende URL: 

 http://localhost/wp-<jouw-naam>/voorbeeld-pagina 

 Bijvoorbeeld : http://localhost/wp-ayoub/voorbeeld-pagina 

 🛠️ Opdracht – Voorbeeldpagina bekijken en bewerken 

 

 Ga naar http://localhost/wp-jouwnaam/voorbeeld-pagina . 

 Bekijk de pagina zoals een bezoeker deze zou zien. 

 Klik op de zwarte balk bovenin op Bewerken om de backend-versie van de pagina te openen. 

 

 

 Pas de titel van de pagina aan naar bijvoorbeeld: “Welkom op mijn WordPress-site”. 

 Pas ook de tekst op de pagina aan (bijvoorbeeld je eigen naam toevoegen). 

 Zoek via internet/AI op hoe je deze aanpassingen kunt maken. 

 

 Als je helemaal klaar bent, kun je de editor weer afsluiten door te klikken op het zwart/witte Wordpress logo linksboven in beeld. 

 

 Ga weer naar de pagina url: 

 http://localhost/wp-<jouw-naam>/voorbeeld-pagina 

 En als het goed is, zie je je eigen tekst staan. 

 🧠 Reflectie 

 

 Wat is het voordeel van werken met WordPress-pagina’s ten opzichte van losse HTML-bestanden? 

 Wat vond je makkelijker: bewerken via de frontend of backend? Waarom? 

 Welke rol speelt de zwarte admin-balk bij het onderhouden van pagina’s? 

 

 📤 Inleveren 

 

 Maak een screenshot van jouw aangepaste voorbeeldpagina in de frontend (met jouw aanpassing zichtbaar). 

 

 05 Opdracht – Standaard pagina aanpassen 

 We gaan de pagina nog wat mooier maken en aanpassen.  

 Plaats in de pagina minimaal drie afbeeldingen. Deze mag je zelf uitkiezen en vanaf je computer via de editor van WP uploaden en tussen de tekst zetten. 

 Zet hiervoor je cursor op de plek waar je het plaatje wilt plaatsen en klik op het pijltje naar beneden en kies voor ‘Inline afbeelding’. Hierna kun je een plaatje vanaf je computer versturen naar Wordpress. 

 

 Je kunt ook een nieuw blok aanmaken door op een stuk tekst te gaan staan en op het blauwe plusje te klikken onder aan de pagina.  

 

 Plaats via deze manier ook een plaatje. 

 In het filmpje laat deze student (C25) zien hoe hij het heeft gedaan. 

 🛠️ Opdracht 1 

 Maak een screenshot met de url (met daarin je naam) en sla deze op als: voorbeeld-pagina-<jouw-naam>.jpg 

 🛠️ Opdracht 2 

 Maak nog twee willekeurige pagina’s.  

 Eén met de titel ‘ contact ’ en één met de titel ‘ Homepage ’.  

 Om een nieuwe pagina te maken ga je naar de zwarte balk boven in je browserscherm en klik je op: Nieuw (hier niet op klikken!) → Pagina 

 

 Vul de pagina met twee blokken (willekeurige) tekst en per pagina twee andere soorten blokken. Welke dit zijn mag je zelf weten. 

 Sla beide pagina’s op. 

 Maak een screenshot met de url (met daarin je naam) en sla deze op als: 

 

 contact-<jouw-naam>.jpg 

 homepage-<jouw-naam>.jpg 

 

 📤 Inleveren 

 

 Van opdracht 1, voorbeeld-pagina met de plaatjes, zorg dat URK ook zichtbaar is. 

 Van opdracht 2, contact pagina, zorg dat URK ook zichtbaar is. 

 Van opdracht 2, homepage pagina, zorg dat URK ook zichtbaar is. 

 

 06 Site-instellingen en Homepage instellen 

 🎯 Leerdoelen 

 

 Je weet waar je de algemene instellingen van je WordPress-site kunt vinden. 

 Je kunt de homepage van je website instellen via het menu “Lezen”. 

 Je begrijpt het verschil tussen de standaard blogweergave en een statische pagina als homepage. 

 

 💡 Uitleg 

 Via de instellingen in de backend kun je veel algemene eigenschappen van je site beheren. 

 1. Algemeen 

 Via Instellingen → Algemeen kun je onder andere: 

 

 De titel en ondertitel van je site aanpassen 

 De taal van je WordPress-installatie wijzigen 

 Het datumformaat en tijdformaat instellen 

 

 2. Lezen 

 Via Instellingen → Lezen kun je: 

 

 Bepalen wat de homepage van je site is 

 Instellen of zoekmachines (zoals Google) jouw site mogen indexeren 

 

 Homepage instellen 

 Je hebt nu drie pagina’s aangemaakt: een voorbeeldpagina, een homepage en een contactpagina. Standaard laat WordPress de blogberichten zien op de hoofdpagina van je site. Dat gaan we nu aanpassen. 

 Als iemand naar jouw hoofdpagina surft (bijvoorbeeld http://localhost/wp-<jouw-naam>/ ) wil je natuurlijk dat hij jouw zelfgemaakte Homepage -pagina ziet! 

 🛠️ Opdracht 6 – Homepage instellen 

 

 Ga naar de backend van je WordPress-site. 

 Navigeer naar Instellingen → Lezen . 

 Kies bij “Je homepage toont” voor: Een statische pagina . 

 Selecteer bij Homepage jouw zelfgemaakte pagina met de titel “Homepage”. 

 Sla je wijzigingen op met de knop Wijzigingen opslaan . 

 

 

 📤 Inleveren 

 

 Surf naar http://localhost/wp-<jouw-naam>/ en controleer of jouw homepage daar zichtbaar is. 

 Maak een screenshot van deze pagina, mét zichtbare URL in de adresbalk. 

 Sla het bestand op als: homepage-instelling-<jouw-naam>.jpg 

 Lever de afbeelding in. 

 

 📤 Inleveren 

 

 Screenshot van jouw home pagina waarbij de URL in de browser zichtbaar is. (Als je alles goed hebt uitgevoerd dan zou de URL http://localhost/wp-<jouw-naam>/ moeten zijn). 

 

 07 WordPress uitbreiden met een thema 

 🎯 Leerdoelen 

 

 Je begrijpt wat een WordPress-thema is. 

 Je weet hoe je een ander thema kiest en installeert in WordPress. 

 Je kunt het uiterlijk van je site aanpassen met een thema. 

 

 💡 Uitleg 

 In de vorige opdracht heb je een WordPress-site gemaakt en drie pagina’s aangemaakt. Misschien vond je de site er nog een beetje saai uitzien. Geen zorgen: daar hebben we thema’s voor! 

 Het thema bepaalt hoe jouw website eruitziet: het ontwerp, de kleuren, de lettertypes en de lay-out. 

 Je kunt WordPress zien als een bouwpakket met Lego-blokken . De software zelf is het grote basisblok. Een thema is één van die bouwblokken die je kunt toevoegen om je site mooier en persoonlijker te maken. 

 

 Er zijn drie manieren om een thema toe te voegen: 

 

 Je maakt zelf een thema en uploadt het. 

 Je koopt een professioneel thema en installeert dat. 

 Je kiest een gratis thema uit de thema-bibliotheek binnen WordPress. 

 

 Standaard is er al een thema actief als je WordPress installeert. Meestal heet dat bijvoorbeeld Twenty Twenty-Three of Twenty Twenty-Four . Ook zijn er vaak al een paar andere thema’s geïnstalleerd, die je meteen kunt activeren. 

 Zo activeer je een ander thema: 

 

 

 Log in op de WordPress-backend . 

 Ga in het linkermenu naar Weergave → Thema's . 

 Je ziet een overzicht van de beschikbare thema’s. 

 Beweeg je muis over een thema en klik op Activeren . 

 

 Je website verandert dan direct van uiterlijk. De indeling verandert, de kleuren kunnen anders zijn, en het lettertype wordt aangepast. Ook worden andere CSS-bestanden gebruikt. 

 Thema aanpassen met de customizer 

 Bij het actieve thema zie je vaak een knop Customizer of Thema aanpassen . Hiermee kun je het thema verder instellen. Denk aan: 

 

 Je eigen logo of site-icoon toevoegen 

 Kleuren en lettertypes aanpassen 

 Achtergrondafbeelding kiezen 

 Eigen CSS toevoegen (voor gevorderden) 

 

 Als je op Nieuwe toevoegen klikt, kom je in een soort themawinkel terecht. Daar kun je zoeken naar gratis thema’s. Dit lijkt een beetje op de App Store op je telefoon. De meeste thema’s zijn gratis en direct te installeren. 

 

 =====> We zijn bij opdracht 7 oude module, dus hieronder komt opdracht 7deze opdracht is iets aangepast. 

 🛠️ Opdracht – Thema installeren en aanpassen 

 

 Log in op jouw WordPress-site. 

 Ga naar Weergave → Thema's . 

 Kies een ander standaardthema (bijv. Twenty Twenty-Four) en activeer dit. 

 Klik op Thema aanpassen en probeer minimaal 3 instellingen te veranderen (kleur, titel, lettertype, etc). 

 Voeg een nieuw thema toe via de knop Nieuwe toevoegen . 

 Kies een gratis thema dat je mooi vindt en installeer en activeer dit. 

 

 🧠 Reflectie 

 

 Wat is het verschil tussen een thema en een plugin? 

 Wat is het voordeel van een customizer in WordPress? 

 Hoe kun je jouw site persoonlijker maken met een thema? 

 

 📤 Inleveren 

 

 Maak een screenshot van jouw aangepaste homepage met het nieuwe thema. 

 Lever ook een reflectie (.txt of .pdf) in met jouw antwoorden op de drie vragen. 

 

 08 Hoofdnavigatiemenu en extra menu 

 🎯 Leerdoelen 

 

 Je kunt zelf een navigatiemenu samenstellen in WordPress. 

 Je weet hoe je een hoofdmenu en een tweede menu maakt. 

 Je kunt links groeperen en submenu’s maken in WordPress. 

 

 💡Uitleg Navigatiemenu 

 

 In de laatste opdracht heb je een thema toegevoegd. 

 Installeer nu thema ‘Twenty Twenty-One’ en activeer deze. 

 De homepage die je eerder hebt gemaakt, is als het goed is nog te zien. Wel heeft deze nu een andere opmaakdoor het activeren van een ander thema. Wat opvalt is dat het navigatiemenu dat eerder rechtsboven in beeld stond is verdwenen.  

 In de meeste thema’s moet je zelf een navigatiemenu samenstellen. Het voordeel hiervan is dat je niet alle pagina’s in dit navigatiemenu hoeft op te nemen. Ook heb je bijvoorbeeld meer mogelijkheden in het navigatiemenu, zoals het maken van een uitklapmenu. 

 Een navigatiemenu is niets anders dan een groep links. Dit kan bijvoorbeeld een link zijn naar een andere pagina op je site, maar kan ook een link zijn naar een functie (bijvoorbeeld een formulier) of een link naar een andere site. 

 In Wordpress kun je zoveel (navigatie)menu’s aanmaken als je wilt. De belangrijkste is natuurlijk het menu dat je op elke pagina ziet als hoofdnavigatie. Hoe je dit menu aanmaakt zie je in onderstaand filmpje. 

 💡 Uitleg 

 Een hoofdnavigatiemenu is het menu dat bovenaan je website staat en bezoekers helpt om te navigeren tussen de belangrijkste onderdelen van je site. 

 In WordPress kun je meerdere menu’s aanmaken, bijvoorbeeld één als hoofdmenu en één als apart menu voor andere links (zoals naar je favoriete games of muziek). 

 Je kunt ook submenu’s (uitklapmenu’s) maken door één of meer links onder een andere link te laten inspringen. 

 🛠️ Opdracht – Maak een hoofdmenu en extra menu 

 

 Ga naar Weergave → Menu's . 

 Maak een nieuw menu aan en noem dit ‘Mijn hoofdmenu’ . 

 Voeg de volgende links toe aan dit menu:

 

 Home 

 Contact

 

 Voorbeeldpagina (of hoe je die zelf genoemd hebt) 

 MBO College Amstelland – met een link naar: https://www.mboamstelland.nl 

 

 

 

 

 Zorg ervoor dat één of meerdere links inspringen zodat er een uitklapmenu ontstaat. (Bijvoorbeeld: maak ‘Contact’ een submenu van ‘Home’) 

 Vink aan dat dit het Hoofdmenu (Primary Menu) is en klik op Menu opslaan . 

 Maak daarna een tweede menu aan met een zelfgekozen naam (bijvoorbeeld ‘Favorieten’). 

 Voeg hierin minstens 5 externe links toe, bijvoorbeeld naar je favoriete:

 

 Muziekartiest of band 

 Gamesites 

 Sportclubs 

 

 

 Wijs dit tweede menu NIET toe als hoofdmenu. 

 Voeg het tweede menu toe op een plek waar jouw thema dat toelaat (bijv. in een widget, footer of zijbalk). 

 

 🧠 Reflectie 

 

 Wat is het voordeel van een submenu? 

 Wanneer is het handig om een tweede menu te gebruiken? 

 Wat heb je geleerd over het gebruik van externe links? 

 

 📤 Inleveren 

 

 Maak een screenshot van de homepage waarop beide menu’s zichtbaar zijn. 

 Lever de reflectie in. 

 

 09 Plugin installeren in WordPress 

 🎯 Leerdoelen 

 

 Je weet hoe je een plugin installeert en activeert in WordPress. 

 Je kunt verschillende soorten plugins herkennen en benoemen. 

 Je begrijpt dat je meerdere plugins tegelijk actief kunt hebben. 

 

 💡 Uitleg 

 In WordPress kun je via het menu Plugins plugins toevoegen, verwijderen of activeren. Plugins zijn uitbreidingen die extra functies aan je site toevoegen, zoals formulieren, een webshop, beveiliging of een fotoalbum. 

 Zo kom je bij de plugin-instellingen: 

 

 Log in op je WordPress-dashboard. 

 Klik in het linker menu op Plugins . 

 

 Je komt dan op een pagina waar je een overzicht ziet van alle geïnstalleerde plugins . Sommige plugins zijn actief (ingeschakeld), anderen niet. In tegenstelling tot thema’s kun je meerdere plugins tegelijk actief hebben. Meestal gebruik je er zelfs behoorlijk wat. 

 Standaard zijn er al een of twee plugins geïnstalleerd (zoals Akismet of Hello Dolly), maar die kun je voorlopig negeren. 

 🔍 Een nieuwe plugin zoeken 

 Klik op ‘Nieuwe plugin’ om naar de plugin-bibliotheek te gaan. Dit is het zoekscherm waar je duizenden plugins kunt doorzoeken en installeren. 

 Je kunt zoeken op naam, functie of populair/gewaardeerd. Net als in de App Store kun je zien hoeveel sterren een plugin heeft en hoe vaak deze is geïnstalleerd. 

 📦 Voorbeelden van soorten plugins: 

 

 📈 Plugins voor SEO (zoekmachineoptimalisatie) 

 🔐 Plugins voor beveiliging tegen hackers en spam 

 🛒 Plugins om een webwinkel te maken (zoals WooCommerce) 

 📷 Plugins voor fotoalbums en mediagalleries 

 📬 Plugins voor contactformulieren 

 💨 Plugins om je site sneller te maken (bijv. caching, afbeeldingen optimaliseren) 

 📊 Plugins om bezoekersstatistieken bij te houden 

 🔁 Plugins voor automatische back-ups van je website 

 🤝 Plugins voor sociale media (Snapchat, Instagram, Facebook, enz.) 

 

 De meeste plugins die je vindt in deze bibliotheek zijn gratis te gebruiken. Voor sommige geavanceerde functies moet je betalen voor een ‘Pro’-versie. 

 🛠️ Opdracht – Installeer en activeer een plugin 

 

 Log in op je WordPress-dashboard. 

 Ga naar Plugins → Nieuwe plugin . 

 Zoek naar een plugin die jou handig lijkt, bijvoorbeeld:

 

 WPForms – om formulieren toe te voegen 

 Wordfence – voor extra beveiliging 

 Yoast SEO – om beter gevonden te worden in Google 

 

 

 Klik op Installeren en daarna op Activeren . 

 Ga na het activeren naar de instellingen van de plugin en bekijk wat je kunt aanpassen. 

 

 🧠 Reflectie 

 

 Welke plugin heb je gekozen en waarom? 

 Wat voor functies voegt deze plugin toe aan jouw site? 

 Heb je iets aangepast in de instellingen van de plugin? 

 

 📤 Inleveren 

 

 Maak een screenshot van jouw pluginpagina waarop je plugin zichtbaar en geactiveerd is. 

 Lever ook een kort reflectiedocument (.txt of .pdf) in met je antwoorden op de drie vragen. 

 

 10 WordPress-site voor Vakantiepark De Eekhoorn 

 🎯 Leerdoelen 

 

 Je kunt zelfstandig een WordPress-site installeren op een eigen serveromgeving. 

 Je kunt een site ontwerpen met een passend thema en aangepaste huisstijl. 

 Je kunt verschillende soorten plugins gebruiken voor formulieren, galerijen, SEO en veiligheid. 

 Je kunt een complete website opleveren op basis van wensen van een opdrachtgever. 

 

 💡 Projectbeschrijving 

 Je bent net opgeleid tot WordPress-ontwikkelaar en krijgt meteen je eerste opdracht: het bouwen van een website voor het Drentse vakantiepark De Eekhoorn . De site wordt geïnstalleerd op jouw eigen PLESK-serveromgeving (gebruik hiervoor een aparte map: vakantiewoning en maak een nieuwe database aan). 

 📄 Te bouwen pagina’s: 

 

 Homepage – algemene info over het vakantiepark 

 Reserveringsaanvraagpagina – met een formulier voor boekingsverzoeken 

 Informatiepagina – tekst en afbeeldingen over het park 

 Type woningen – drie woningtypes met beschrijving en fotogalerij of -slider 

 

 🛠️ Projecteisen 

 🎨 Design 

 

 Gebruik een gratis thema uit de WordPress-theme store dat responsive is. 

 Pas dit thema aan via de Customizer . 

 Gebruik de kleuren van de Drentse vlag: rood, wit, zwart . 

 Zorg dat het logo op alle schermgroottes zichtbaar blijft . 

 

 📝 Reserveringsformulier (op aparte pagina) 

 

 Naam (verplicht) 

 Adresvelden 

 Emailadres (verplicht) 

 Telefoonnummer (verplicht) 

 Gewenste woning (selectbox) 

 Aankomstdag (tekstveld, verplicht) 

 Aantal weken (min 1 – max 4) 

 Aanvullende opmerkingen 

 

 Kies een gratis formulierenplugin uit de WordPress-plugin store (bijv. WPForms). Zorg dat het formulier werkt en verzonden wordt naar jouw studenten-email. 

 🖼️ Foto’s en woningtypes 

 

 Gebruik een gallery- of sliderplugin om de drie woningtypes aantrekkelijk te presenteren. 

 Zorg voor een goede opmaak en duidelijke beschrijvingen. 

 

 🔒 Veiligheid 

 

 Installeer een gratis beveiligingsplugin (bijv. Wordfence of All In One WP Security). 

 

 🔍 SEO 

 

 Installeer Yoast SEO (gratis versie) voor zoekmachineoptimalisatie. 

 

 📱 Navigatie en menu’s 

 

 

 Zorg voor een duidelijk navigatiemenu dat goed werkt op mobiel en desktop. 

 Alle pagina’s moeten via het menu bereikbaar zijn. 

 

 📦 Gebruik klantmateriaal 

 

 Gebruik de teksten en afbeeldingen die door de klant zijn aangeleverd. 

 Download hier het materiaal 

 

 📤 Inleveren 

 Controleer of alle pagina’s, plugins en vormgevingseisen zijn uitgevoerd. 

 

 Lever de url van jouw site in. 

 Vraag een eindgesprek aan waarin je jouw site presenteert. 

 

 ✅ Tip: Lees de opdracht nog één keer goed door voordat je de site inlevert. 

 

 

 Wordpress installeren in een Plesk omgeving 

 Wordpress installeren op een Plesk omgeving.docx 

 Weet je niet (meer) hoe je een WordPress zite live kan zetten. Hieronder volgend de stappen. 

 Stap 1 – 🖥️ Op de Plesk server 

 

 Maak subdomein 

 Maak FTP-account 

 

 Stap 2 –  🌍 Test 

 

 Plaats tijdelijk index.html 

 Zet de tekst 'Pannekoek' in index.html 

 Controleer of website werkt: zie je 'Pannekoek'als je naar het nieuwe subdomein gaat? 

 Werk alles dan: verwijder testbestand 

 

 Stap 3 –  🗄️ Database 

 

 Maak database 

 Maak gebruiker 

 Kies wachtwoord 

 

 ⚠️ Gele post-it: " Schrijf gebruikersnaam en wachtwoord op! " 

 Stap 4 – 📦WordPress downloaden 

 

 Download nieuwste WordPress 

 Pak ZIP-bestand uit 

 

 Stap 5 – 📁 FileZilla 

 

 Maak FTP account voor je nieuw subdomein 

 Verbind met FTP 

 Upload alle WordPress-bestanden (uitgepakt) naar het subdomein 

 

 Stap 6 –🌐 Installatie 

 

 Open subdomein op je browser, nu zie je de Workdpress installer 

 Vul databasegegevens in 

 Maak admin-account, bewaar wachtwoord! 

 

 Stap 7 – 🎉Klaar 

 

 Login in WordPress 

 Test website 

 Maak nu de WordPress site op de Plesk omgeving volg de opdracht . 

 

 🔐 Bewaar ALLE gegevens 

 

 Subdomein naam

 

 FTP gebruikersnaam: ________________ 

 FTP wachtwoord: _____________________ 

 

 

 Database naam 

 

 Database gebruiker: ___________________ 

 Database wachtwoord: ________________ 

 

 

 WordPress

 

 admin wachtwoord: ____________________

Yii Introduction
1 Intro - Wat is Yii? 

 datasource 

 In deze les gaan we leren wat een framework is en waarom we Yii gaan leren. We leren verder wat MVC en CRUD is en wat heeft dat te maken heeft met een framework. 

 Voor het examen moet je een webapplicatie bouwen. 

 Je moet zelf weten hoe je dat doet. De meeste studenten kiezen voor PHP. Waarom? Het is relatief eenvoudig en de meeste web applicaties zijn ontwikkeld met PHP ( bron ). 

 Veel websites lijken op elkaar en doen vaak dezelfde dingen. Ze maken een verbinding naar de database, laten gegevens zien, je kunt aanloggen, je kunt soms gegevens veranderen en ga zo maar door. 

 Om niet telkens al deze 'standaard' zaken van 'scratch' af aan te moeten bouwen zijn er zogenaamde frameworks ontwikkeld. Elk framework is eigenlijk een verzamelingen bouwblokken die je telkens op nieuw kunt gebruiken voor jouw website. Alle frameworks zijn net een beetje anders, maar er zijn ook veel overeenkomsten. 

 Wat zijn belangrijke zaken als je voor een framework kiest: 

 

 Wordt het framework actief onderhouden; bestaat het al wat langer? Je wilt niet in iets gaan investeren dat volgend jaar misschien niet meer bestaat. 

 Hoe moeilijk is het om een framework te leren; wat is de complexiteit? 

 Hoe snel kun je iets ontwikkelen met het framework? 

 Hoe flexibel is een framework; kun je er echt alles mee maken? 

 

 Bij punt 3 en 4 is het vaak het een of het ander. Of je kunt heel snel iets bouwen en je bent niet zo flexibel, of je kunt er eigenlijk alles mee ontwikkelen maar het kost veel tijd om dat te doen. 

 Bijvoorbeeld: PHP is super flexibel je kunt er echt alles mee ontwikkelen, het Laravel framework is ook redelijk flexibel, het Yii framework is iets minder flexibel en als je naar bijvoorbeeld WordPress kijkt (wat je ook als een soort framework zou kunnen zien), dan is dat het minst flexibel. Aan de andere kant kun je met WordPress heel snel een site maken, je bent alleen een beetje beperkt in de functionaliteiten. 

 ❓Waarom Yii? 

 Laravel is het meest gebruikte PHP-framework. Yii staat in de meeste lijstjes ongeveer op plaats 7. Dat komt, omdat je weliswaar "snel even wat kan bouwen", maar je kunt het vrij lastig alles precies zo maken als jij het wilt. Het is is minder flexibel en om het precies zo te krijgen wilt dan moet je meer moeite doen. Als je straks een project maakt dan kun je waarschijnlijk ongeveer 70%-80% van je code maken met Yii, daarvoor hoef je heel weinig te programmeren en heb je tijd om je te storten op de overige 20%-30%. De projecten en examens die jullie gaan doen lenen zich goed om met Yii te maken. Je bent namelijk redelijk vrij in het ontwerp en kunt dus de 'Yii-manier' aanhouden. 

 Maar wat dan als ik later verder wil met (bijvoorbeeld) Laravel? Dat kan en Yii en Laravel hebben dezelfde opzet. Ze werken beiden volgens het MVC principe . Je zult in Laravel dus veel dingen terugvinden die je in Yii hebt geleerd. 

 MVC 

 MVC, wat is dat? MVC staat voor Model , View en Controller . Deze drie-deling wordt gemaakt in je code, zodat je eenvoudiger code kunt terugvinden. 

 

 

 

 Model 

 Hierin staat waar de verbinding tussen jouw code en de database beschreven 

 

 

 View 

 Dit is de front-end en is vooral HTML/CSS (bootstrap) met hier een daar een 'vleugje' PHP 

 

 

 Control 

 Dit is waar je bepaald wat er gebeurt, als je op een knop drukt ergens dan wordt de code uit de bijbehorende control uitgevoerd. 

 

 

 

 In een plaatje ziet dat er als volgt uit. De gebruiker doet wat en stuurt daarmee een verzoek (request) naar de juiste controller. De controller 'overlegt' met het model als er iets met data moet gebeuren en het resultaat wordt via de view aan de gebruiker getoond. 

 

   

 

 In de introductie van deze module (workshop) komen deze begrippen terug. Als het nu allemaal nog wat onduidelijk is, geen probleem we gaan er mee aan de slag en zullen snel een gevoel krijgen wat MVC precies is en hoe het werkt. 

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

 

 CRUD? 

 Nog even....waar staat CRUD ook alweer voor? CRUD staat voor : 

 

 

 

 C reate 

 ➕   Nieuwe toevoegen 

 

 

 R ead 

 📄   Bekijken / lezen 

 

 

 U pdate 

 ✏️  Bewerken 

 

 

 D elete 

 🗑️   Verwijderen 

 

 

 

 In een  CRUD-applicatie kun je dus gegevens aanmaken (create), lezen (read), bewerken (update) en verwijderen (delete).  

 Voor jouw examen moet je minimaal een CRUD kunnen maken. 

 Yii heeft een CRUD-generator en je kan zonder te coderen een standaard CRUD-applicatie maken. Super handig dus voor het examen. In de volgende les gaan we hier gelijk mee aan de slag. 

 🧠 Quizvragen 

 

 Wat is een framework en waarom zou je het gebruiken bij het maken van een webapplicatie? Leg in je eigen woorden uit wat een framework is en wat het voordeel is ten opzichte van alles zelf programmeren. 

 Wat zijn volgens de tekst belangrijke vragen die je moet stellen voordat je kiest voor een bepaald framework? Noem minstens twee overwegingen en leg kort uit waarom die belangrijk zijn. 

 Wat is volgens de tekst het verschil tussen Laravel en Yii? Leg uit in welk opzicht Yii sneller is dan Laravel, maar ook waar je tegenaan zou kunnen lopen. 

 Wat betekenen de letters M, V en C in MVC Beschrijf per onderdeel kort de rol die het speelt binnen een webapplicatie. 

 Hoe werken Model, View en Controller samen? Beschrijf het proces dat plaatsvindt als een gebruiker op een knop drukt. 

 Wat betekent CRUD en wat moet je hierover kunnen voor het examen? Noem alle vier onderdelen van CRUD en leg uit waarom dit belangrijk is voor je examenproject. 

 Waarom is Yii een goede keuze voor het examenproject? Noem minstens twee redenen waarom Yii goed past bij de opdrachten die je moet maken. 

 

 📤 Inleveren 

 

 Beantwoord de vragen en lever dit in als .txt of .pdf-bestand. (llet op dit is een goede voorbereiding op de kennis-check) 

 

 2 Installation Yii 

 In de komende paar opdrachten gaan we alles klaarmaken en installeren voor het werken met Yii. Aan het eind van de opdracht 4 heb je volledig werkende Yii CRUD-applicatie. 

 Een CRUD-applicatie is een applicatie waarmee je records kunt aanmaken (Create), records kunt lezen (Read), records kunt aanpassen (Update) en records kunt verwijderen (Delete). 

 We gaan drie stappen doen om een werkende web app te maken: 

 

 installeren van alle software 

 maken van een eenvoudige database 

 generen van code 

 

 In drie stappen hebben we straks een werkende web app in PHP gemaakt. 

 Voordat je met deze les begint weet je hoe je met phpMyAdmin (of een andere tool) een database kunt maken en hoe je een .sql file kan importeren. Ook heb je XAMPP ge nstalleerd. 

 💾Installatie 

 De installatie kent een aantal stappen. Hieronder zijn de 5 stappen beschreven die je moet uitvoeren om tot een succesvolle Yii installatie te komen. 

 👉stap 1 - XAMPP 

 Je hebt XAMPP ge nstalleerd. Voor Yii hebben dit nodig, omdat we een database gaan gebruiken. 

 Heb je nog geen XAMPP of werkt die niet meer dan kun je hier lezen hoe je XAMPP kan installeren. 

 👉stap 2 -Composer 

 Zorg er voor dat je composer hebt ge nstalleerd. Composer is de installer van de WEB tools. 

 Uitleg, wat is Composer? Als we een framework als Yii of Laravel gaan gebruiken dan installeren we eigenlijk een hele grote doos met allemaal bouwblokken. Deze blokken moeten allemaal samen werken en zijn vaak afhankelijk van elkaar. De blokken worden door verschillende mensen ontwikkeld en op n of andere manier moet er voor worden gezorgd dat de juisten blokken zijn ge nstalleerd. Hiervoor dient Composer. Composer is als het ware de installer van PHP tools, deze worden vaak libraries of packages genoemd. Librabries zijn dan de blokken functionaliteit die je kunt gebruiken om een programma te maken. 

 https://getcomposer.org/ 

 Let op: check goed of de installatie errors/warnings geeft. Zijn er errors, lees deze dan goed en los de issues met behulp van ChatGPT op! 

 Tip: Zorg dat XAMPP al in ge nstalleerd voordat je composer installeert; composer heeft namelijk de locatie van php.exe nodig. 

 In deze korte video wordt getoond hoe je Composer kunt installeren: 

 

 

 👉stap 3 - Create new yii Project 

 We maken het Yii project world aan. 

 Je hoeft niet zelf een map/folder aan te maken. Dit doet composer voor jou. Zorg ervoor dat je in de terminal in de parent-folder (in de folder/map waar je nu staat) bent. 

 Vul de volgende code in de terminal: 

 composer create-project --prefer-dist yiisoft/yii2-app-basic world Dit commando maakt een folder aan met de naam world. Dit is je nieuwe Yii project folder (er staan honderden bestanden in). 

 ⚠ ️Error , warning ? 

 

 

 

 

 

 Let op, check of je errors en of warnings krijgt! 

 Zie je die, probeer die dan met behulp van ChatGPT op te lossen! 

   

 Extra uitleg: bij sommige installaties van XAMPP staan bepaalde extensies niet aan. Zo staat bijvoorbeeld de ZIP extensie soms uit in de PHP config (XAMPP, php.ini). Vraag chatgpt om dit op te lossen. 

 Als dit zo is dan kan de Yii installatie fout gaan. Check daarom de output en pas de configuratie met behulp van ChatGPT aan. 

   

 Als je opnieuw wilt beginnen moet je eerst je oude foutieve installatie  verwijderen (in dit geval de map " world "). Doe dit vanuit de file explorer. 

 

 

 

 

 Let op dat het nieuwe Yii project wordt gemaakt in de folder waarin je de cmd box opent. Stel je wilt je jouw nieuwe project op je Desktop maken dan open je een cmd box en je tikt het commando  cd Desktop in. Voer dan het composer commando uit (zoals hierboven aangegeven) en het nieuwe Yii project zal op je Desktop worden gemaakt. 

 👉stap 4 - Start Development Server 

 yii heeft een ingebouwde php server als je die opstart dan draait jouw website op http://localhost:8080/ 

 Let wel dat je XAMPP ook blijft draaien voor je database. 

 In VSC open je jouw Yii project en daarna open je een nieuwe terminal. 

 

 In de terminal type je dan het commando in: 

 php yii serve 

 De Yii webserver draait nu. Ga naar je browser en controleer of op je via localhost:8080 jouw nieuwe Yii project ziet. 

 Wil je cmd box gebruiken of lukt dit niet. Kijk dan naar de instructiefilm (Koppelingen naar een externe site.) 

 

 

 👉stap 5 - Configure web.php 

 We moeten nu nog het een en ander configureren in Yii. We willen dat Yii zoveel mogelijk voor ons regelt. Om te beginnen mag Yii de routing regelen (dit wordt uitgelegd in de volgende les ). 

 Open config/web.php - en zet het gedeelte dat urlmanager heet, uit commentaar (uncomment prettyURL). Het moet er als volgt uitzien (ongeveer op regel 50 van config/web.php). 

 'urlManager' => [

 'enablePrettyUrl' => true,

 'showScriptName' => false,

 'rules' => [

 ],

 ], 

 Dit is een instelling die de routing (waarover later meer) eenvoudiger maakt. 

 👉stap 6 - Database 

 Let er op dat je database goed is gedefinieerd en dat je ook de relaties heb vastgelegd. Dat kun je doen met phpMyAdmin . De ingebouwde Yii CRUD-generator werkt alleen goed als de database en de relaties goed zijn vastgelegd. 

 Maak de database world en importeer deze file: https://www.roc.ovh/attachments/22 

 Lukt niet of weet je niet precies hoe je een database moet importeren? In deze les staat beschreven hoe je deze database kunt installeren. In deze les staat de SQL-file world.sql waarmee je de database World kan maken. 

 We gaan Yii vertellen welke database er moet worden gebruikt. 

 We openen de file config/db.php en zetten daar het volgende in: 

 return [

 'class' => 'yii\db\Connection',

 'dsn' => 'mysql:host=127.0.0.1;dbname=world',

 'username' => 'root',

 'password' => '',

 'charset' => 'utf8',

]; 

 Let op dat je geen localhost gebruikt om naar je database te verwijzen. Gebruik 127.0.0.1. 

 👉stap 7- Klaar? 

 Klaar? Dan moeten we nog even testen of alles werkt. 

 Je had al gezien dat je een leeg Yii project hebt, ga nu naar:  http://localhost:8080/gii 

 Jouw scherm ziet er ongeveer zo uit: 

 

 Maak een screen shot van jouw hele  scherm met browser en lever deze in. 

 📤 Inleveren 

 

 Screenshot van Yii waarin je  http://localhost:8080/gii  laat zien. Dit is de Model en Crud generator die we in de voglende stap gaan gebruiken. 

 

 3 CRUD aanmaken 

 🎯 Leerdoelen 

 

 Je kunt met de Gii CRUD Generator een complete CRUD maken voor een databasetabel. 

 Je begrijpt dat je eerst een model moet genereren voordat je een CRUD kunt maken. 

 

 ⭐CRUD 

 We gaan een CRUD maken en met Yii is dat heel makkelijk. 

 We moeten eerst een verbiding met de database maken. Weet je nog welke letter van MVC daar ook alweer voor stond? Yep, de M van Model. Het model beschrijft hoe jouw Yii applicatie een verbinding met de database kan maken. We gaan dus een Model maken. 

 👉 Stap 1 - models maken 

 We gaan opnieuw naar de component builder, open http://localhost:8080/gii/model 

 Klik links op 'Model Generator' en type de naam van de databasetabel country  in: 

 

 De naam van het model wordt automatisch aangemaakt  Country . Let op dat de 'Model Class Name' met een hoofdletter begint; kijk goed naar het voorbeeld. De naam van een class (oop) wordt altijd met een hoofdletter geschreven. 

 Druk onderaan op de pagina op preview , Yii laat nu zien welke file hij gaan aanmaken voor je. Druk op generate om de file te maken. 

 De file model/country is nu aangemaakt, we gaan later meer in op de inhoud van deze file. Wat voor nu belangrijk is om te onthouden is dat de model/country.php file de verbinding is tussen de tabel country en Yii. Elke keer als Yii informatie uit de country tabel nodig heeft dan gebruikt Yii de model/country.php file 

 Omdat er vanuit de country tabel wordt verwezen naar de andere twee tabellen, City en Countrylanguage  maak je nog twee modellen van deze twee tabellen. 

 ✅Controleer de model folder en als het klopt (let op de hoofdletters!) ga dan niet door. 

 In je model directory (folder) heb je nu dus de volgende files staan 

 City.php

ContactForm.php

Country.php

Countrylanguage.php

LoginForm.php

User.php 

 👉 Stap 2 - CRUD maken 

 We gaan de complete CRUD maken. 

 Ga terug naar de component builde r. 

 Klik links op 'CRUD Generator' en type het volgende in: 

 

 Let goed op de hoofdletters , deze zijn belangrijk. 

 Het View path wordt leeg gelaten, daar kan Yii zelf iets voor kiezen. 

 Druk op preview, je ziet 8 files die klaar staan om te worden aangemaakt. 

 

 Druk op generate om de files aan te maken. 

 Controller 

 In de directory controllers staat een file CountryController.php. Dit is de controller van de country CRUD. Al het denkwerk dat nodig is om de country CRUD aan te sturen zit in de CountryController.php file. 

 View 

 In de views/country directory staan de views. De index.php is de standaard view en deze file bevat de (voornamelijk HTML code) om de pagina weer te geven. 

 Weten we nog waar de controller en view ook alweer vandaan komen? Het Framework is gebouwd volgens de MVC-architectuur. In stap 1 hebben we het model gemaakt en in deze 2de stap hebben we de view en controller gemaakt. 

 

 De controller is waar alle verzoeken van de gebruiker naar toe gaan. De view is de presentatielaag met voornamelijk HTML, CSS, en JavaScript. En in het model wordt de verbinding met de database gemaakt. 

 Klaar ? 

 Ga naar http://localhost:8080/country 

 

 Je hebt een CRUD van Country gemaakt, compleet met search en sort-functionaliteiten. Je hebt ook een mooie pagina selector waarmee je daar de verschillende pagina's kan navigeren. Je kunt country's lezen/tonen, aanpassen, verwijderen en aanpassen. Probeer het maar! Wees niet bang om de database 'kapot' te maken, want je kunt in een paar tellen de database opnieuw importeren. 

 In de volgende lessen gaan we de automatisch gebouwde applicatie stap-voor-stap aanpassen. 

 Voor nu kan je trots zijn op je eerste (?) web CRUD applicatie. 

 Extra hulp met Filmpje 

 Niet gelukt? Kijk in dit filmpje nog een keer alle stappen door: Instructie Yii - les1 

 

 

 💡 Uitleg 

 Je hebt al een CRUD gemaakt voor de tabel country . Nu ga je hetzelfde doen voor de tabellen city en countrylanguage . 

 Denk eraan: je moet eerst de modellen genereren voor deze twee tabellen met de Model Generator, voordat je de CRUD maakt. 

 🛠️ Opdracht 

 

 Open de Model Generator op http://localhost:8080/gii/model 

 Maak het model voor de tabel city . 

 Maak het model voor de tabel countrylanguage . 

 Open daarna de CRUD Generator op http://localhost:8080/gii/crud 

 Genereer een CRUD voor City . 

 Genereer een CRUD voor Countrylanguage . 

 

 Let goed op de hoofdletters bij het invullen van de modelnamen! 

 Controleer op 

 

 http://localhost:8080/city 

 http://localhost:8080/countrylanguage 

 

 of de CRUD werkt.  

 GIT 

 "Meester, gisteren werkje het nog en ik heb niets gedaan?" 

 Bij Yii loop je soms vast. Je maakt wijzigen in een door het framework gemaakte files. Soms werkt er opeens niets meer (echt dat gebeurt iedereen!). 

 Met GIT kun je ervoor zorgen dat je steeds een werkende versie opslaat. Werkt het dan niet meer, dan kun je terug naar de vorige werkende versie. 

 Wert GIT nog niet in jouw VCS? Hier  staat hoe je GIT in VCS kunt 'aanzetten'. 

 🧠 Reflectie 

 

 Waarom moet je eerst een model aanmaken voordat je een CRUD kunt genereren? 

 In welke folder(s) worden er bestanden aangemaakt door de model-generator? 

 In welke folder(s) worden er bestanden aangemaakt door de CRUD-generator? 

 

 📤 Inleveren 

 

 Maak een screenshot van http://localhost:8080/city waarop de CRUD werkt. 

 Maak een screenshot van http://localhost:8080/countrylanguage waarop de CRUD werkt. 

 

 4 View aanpassen 

 🛠️ Opdracht - deel 1 

 Zorg eerst dat, nu alles nog werkt, je met GIT een commit uitvoert. Je kan dan altijd terug als je wat 'kappot' maakt. 

 Ga in de code-editor (VSC) naar de map  views en probeer te vinden waar het overzicht Countries is gemaakt. 

 Haal code weg zodat de kolom  Surface Area niet meer wordt getoond. 

 Probeer maar wat, als je de boel 'kappot' maakt aan ga je met behulp van GIT naar de vorige versie. 

 

 🛠️ Opdracht - deel 2 

 Kun je de in dezelfde view de groene knop 'Create Country' verplaatsen en onderaan de pagina plaatsen? Dus het moet er zo uit te komen zien: 

 

 🎯 Resultaat 

 Jouw country overzicht ziet er dus zo uit: 

 

 📤 Inleveren 

 

 Lever een compleet screenshot in van de country read page (Grid View; zoals plaatsje hierboven met het rode kruis). 

 Lever een compleet screenshot in van de read page (Grid View) van city 

 Lever een compleet screenshot in van de read page (Grid View) van countrylanguage 

 Lever het (aangepaste) bestand views/country/index.php in - noem dit bestand jouw-naam-index.php 

 

 5 Routing in Yii 

 🎯 Leerdoelen 

 

 Je weet wat routing is in het algemeen. 

 Je begrijpt hoe routing werkt binnen Yii. 

 Je kunt URL’s analyseren en begrijpen hoe ze naar controllers en acties verwijzen. 

 

 💡 Uitleg 

 Wat is routing? 

 Routing is de manier waarop een webserver en je programma bepalen welke pagina moet worden. Kijk maar eens goed naar de URL in je browser: deze bestaat uit verschillende onderdelen. 

 

 

 

 

 Onderdeel 

 Wat is het? 

 Uitleg 

 

 

 

 

 Scheme 

 Protocol 

 Bepaalt hoe de informatie wordt verzonden (zoals http, https, ftp...) 

 

 

 Domeinnaam 

 Domein 

 Verwijst naar een server of groep servers. 

 

 

 Path 

 Bestandspad 

 Verwijst naar het bestand dat de webserver moet uitvoeren. 

 

 

 Parameters 

 Variabelen 

 Sturen informatie mee naar de server (zoals bij formulieren). 

 

 

 Anchor 

 Paginaanker 

 Springt naar een specifiek onderdeel binnen een pagina. 

 

 

 

 Voorbeeld-URL: https://www.roc.ovh/link/302#bkmrk-nog-een-keer-in-sche 

 Bij een simpele PHP-site zonder framework komt het pad overeen met de bestandslocatie op je computer.  

 https://localhost/ opgave1/uitslag/index.php 

 Dan wordt de file 

 c:\xampp\ htdocs\opgave1\uitslag\index.ph 

 

 Wat is de document-root van de webserver? 

 De document root van de webserver is waar de webserver al zijn bestanden kan vinden en waar die heen gaat als je alleen de hostname gebruikt. 

 c:\xampp\htdocs wordt ook wel de docuemnt root van de webserver genoemd omdat: 

 https://localhost verwijst naar c:\xampp\htdocs (in een standaard geintalleerde XAMPP omgeving). 

 

 Routing bij frameworks zoals Yii 

 Frameworks zoals Yii gebruiken een ander soort routing. De URL wordt niet direct vertaald naar een bestand, maar naar een controller en een actie (methode). 

 Voorbeeld: 

 http://localhost:8080/country/index 

 De URL hierboven verwijst naar: 

 

 

 

 De controller 

 

 country in ⟶ CountryController in controllers/ 

 

 

 

 De actie 

 

 index in ⟶ methode actionIndex() binnen die controller 

 

 

 

 

 De standaardregels in Yii: 

 

 Het eerste deel van het pad wordt omgezet naar een controller . Elk woord begint met een hoofdletter. Een streepje ( - ) betekent een nieuw woord. 

 Het tweede deel van het pad wordt een methode (functie in de controller) , voorafgegaan door action , en met dezelfde schrijfwijze als hierboven. 

 

 Voorbeelden 

 

 

 

 Pad 

 Controller 

 Actie 

 

 

 

 

 / kaart / overzicht 

 KaartController 

 actionOverzicht () 

 

 

 / klas-lokaal / overzicht 

 KlasLokaalController 

 actionOverzicht () 

 

 

 / klas-lokaal / s toel-maat 

 KlasLokaalController 

 actionStoelMaat () 

 

 

 / klas-lokaal / index 

 KlasLokaalController 

 actionIndex () 

 

 

 / klas-lokaal 

 KlasLokaalController 

 actionIndex () 

 

 

 

 Als het tweede deel ontbreekt, wordt automatisch actionIndex() gebruikt. 

 🛠️ Opdracht – Hello World! 

 We gaan in onze World-applicatie oefenen met routing. 

 

 Open CountryController.php in de map controllers . 

 Voeg daarin de volgende methode toe: 

 

 public function actionHello() {

 echo "Hello World!";

 exit;

} 

 

 Sla het bestand op. 

 Bedenk: welke URL moet je nu gebruiken om deze functie aan te roepen? 

 Open je browser en test de URL. Als het goed is zie je: 

 

 

 

 ✅ Controle 

 

 Is de tekst Hello World! zichtbaar in je browser? 

 

 📤 Inleveren 

 

 Maak een screenshot van je browser waarop Hello World! zichtbaar is en waarin tevens de URL zichtbaar is. 

 

 Routing met een parameter 

 We gaan een nieuwe controller maken en oefenen met routing waarbij een parameter wordt doorgegeven via de URL. 

 

 Maak een nieuwe file aan in de map controllers met de naam ExampleController.php . 

 Plaats hierin de volgende code, maar vervang de naam Ayoub op beide plekken door jouw eigen naam : 

 

 <?php

namespace app\controllers;

use Yii;

use yii\web\Controller;

/**

 * ExampleController – voorbeeldcode voor routing.

 * Code door [Jouw Naam]

 */

class ExampleController extends Controller

{

 public function actionSay($message = '')

 {

 echo "Hello $message";

 exit;

 }

}

 

 

 Sla het bestand op. 

 Open je browser en ga naar de juiste URL om actionSay() uit te voeren. Je gebruikt hiervoor: 

 

 http://localhost:8080/example/say 

 Je ziet nu als het goed is: Hello 

 Kun je via de URL ook een parameter meegeven, zodat in plaats van "Hello" er bijvoorbeeld "Hello Max" staat? 

 Hint: voeg je naam toe aan de URL als volgt: 

 http://localhost:8080/example/say?message=Max 

 ✅ Controle 

 

 Wordt de pagina Hello [jouw naam] getoond in de browser? 

 Werkt de parameter in de URL zonder dat je iets hoeft te veranderen aan de code? 

 

 🧠 Reflectie 

 

 Als je jouw naam in de URL zet wordt deze in de variabele $message gezet, er staat immers echo "Hell $message"; Ho ekomt het dat jouw naam in de variable met de naam $message staat? 

 

 📤 Inleveren 

 

 Het bestand: controllers/ExampleController.php 

 Een screenshot van je volledige scherm met browser waarop de URL en  Hello [jouw naam] te zien is. 

 Een antwoord op de refelctievraag (in txt of pdf). 

 

 06 Menu 

 🎯 Leerdoelen 

 

 Je begrijpt hoe het menu (navigatie) in Yii is opgebouwd. 

 Je kunt menu-items koppelen aan routes (routing). 

 Je kunt submenu's maken en parameters gebruiken in je menu-items. 

 

 💡 Uitleg 

 In deze les ga je routing zoals we dat in de vorige les hebben geleerd toepassen. Je maakt een menu en koppelt de menu-items aan routes in je applicatie. 

 📁 Views folder 

 In de map views vind je drie mappen: 

 

 country: bevat de views die je met de CRUD-generator hebt aangemaakt. 

 layouts: bevat de standaard lay-out (zoals main.php ) van elke pagina. 

 site: bevat standaardpagina’s zoals “About” en “Contact”. 

 

 Elke pagina in Yii gebruikt de layout main.php en/of _header.php 

 🧪 Experimenteer 

 Check waar het menu staat (main.php of _header.php)? Probeer iets te veranderen en kijke of je snapt hoe het menu in elkaar zit. 

 🍱 Menu via Widget 

 In de layout-bestand main.php staat een stuk code dat het menu opbouwt met een zogenaamde Widget . Een widget is een soort herbruikbaar codeblok, vergelijkbaar met WordPress plugins. 

 Vervang de standaard menucode in main.php of in _header door deze aangepaste versie. 

 Maar let op, deze code is oude code en werkt niet meer op nieuwe versies van Yii, check je _header.php . Je herkent daar het menu in en je kunt delen uit de volgende code overnemen om het menu in _header aan te passen. 

 <?php

use yii\bootstrap5\Nav;

use yii\bootstrap5\NavBar;

NavBar::begin([

 'brandLabel' => Yii::$app->name,

 'brandUrl' => Yii::$app->homeUrl,

 'options' => [

 'class' => 'navbar-expand-md navbar-dark bg-dark fixed-top',

 ],

]);

echo Nav::widget([

 'options' => ['class' => 'navbar-nav navbar-right'],

 // *** 

 // Dit gedeelte moet je overnemen als je het menu moet integreren in _header.php

 // *** 

 'items' => [

 [

 'label' => 'Country',

 'items' => [

 ['label' => 'Overzicht', 'url' => ['/country/index']],

 ['label' => 'Voeg toe', 'url' => ['/country/create']],

 ['label' => 'Europa', 'url' => ['/country/index', 'CountrySearch[Continent]' => 'Europe']]

 ],

 ],

 [

 'label' => 'City',

 'items' => [

 ['label' => 'Overzicht', 'url' => ['/city/index']],

 ['label' => 'Voeg toe', 'url' => ['/city/create']],

 ],

 ],

 

 ],

]);

NavBar::end();

?> 

 Zoals je ziet gebruiken we associatieve arrays zoals: 

 ['label' => 'Europa', 'url' => ['/country/index', 'CountrySearch[Continent]' => 'Europe']] 

 🛠️ Opdrachten 

 

 Vervang de standaard menucode in main.php of _header.php door het bovenstaande voorbeeld. 

 

 

 Om een country toe te voegen moet in de controller CountryController de method/function actionCreate () worden uitgevoerd. Bedenk hoe je de routing naar deze pagina opzet en pas het menu aan ' voeg toe ' zodat deze is gekoppeld aan actionCreate () van de CountryController . 

 Voeg het menu-item Asia toe, dat alleen landen van Azië toont. 

 Voeg vervolgens voor elk werelddeel een apart menu-item toe: Asia, Africa, North America, South America, Oceania en Antarctica. 

 Voeg een nieuw hoofdmenu toe: City met twee items: Overzicht en Voeg toe. 

 

 📤 Inleveren 

 

 Lever het aangepaste bestand  views/layouts/main.php of views/layout/_header.php in. 

 

 07 Gridview 

 In deze les leer je aanpassingen in de Gridview maken. 

 Je leert hoe je kolommen wel of niet zichtbaar kan maken, hoe je de kolom headers kan aanpassen, hoe je de kolom breedte kan aanpassen, hoe je de inhoud van de kolom zelf kan aanpassen en als laatste leren hoe we een link  kunnen maken van een kolom. 

 Country overzicht aanpassen 

 Onze CRUD-generator (Gii) heeft voor ons een country overzicht gemaakt. Als je de CountryController.php opent dan zie je dat function (method) actionIndex de view index aanroept. Open deze index file. Deze staat in views/country. 

 Gridview Widget 

 Je ziet dat er op regel 23 een zogenaamde widget wordt aangeroepen. 

 Een Widget is een plug-in waarmee je functionaliteit aan Yii toevoegt. De Gridview Widget is misschien wel de meest uitgebreide widget en het zorgt ervoor dat we een mooi overzicht van onze data krijgen. 

 🛠️ Opdracht 

 De opdracht bestaat uit 8 stappen. In deze stappen gaan we de country view aanpassen (views/country/index.php). Test na elke stap of de aanpassingen werken!  

 👉 Stap 1 - Kolommen aanpassen 

 In de parameters van deze widget zie je dat de kolommen Code , Name , Continent , Region en SurfaceArea worden afgedrukt. Je ziet ook dat bepaalde kolommen niet worden afgedrukt, deze staan in commentaar. 

 

 Verander de lay-out in het country overzicht en laat de volgende kolommen in deze volgorde zien: Code , Name , Population , Surface Area en Capital . Population laat inwoneraantal zien en SurfaceArea laat oppervlakte zien. 

 

 Test of het werkt!  

 👉 Stap 2 - Kopjes aanpassen 

 Stel we willen het kopje boven de kolom veranderen, dan kan dan als volgt: Vervang bijvoorbeeld 'SurfaceArea' in de GridView door het volgende array. 

 [ 'label' => 'Oppervlakte',

 'attribute' => 'SurfaceArea',

], 

 Je ziet dat we de surface area nu hebben vervangen door een assiociative array. Dus waar in de code het woord 'SurfaceArea' staat plaats je het assiociative array zoals hierboven is aangegeven. 

 Dit verteld de GridView snippet dat het label Oppervlakte moet zijn (dit wordt boven aan de pagina gezet) en dat de waarde in de kolom moet worden gevuld met 'SurfaceArea'. 

 

 Pas nu de kolom Population aan; en zet in de kolom header 'Inwoners'. 

 

 Test of het werkt!  

 👉 Stap 3 - Kolom breedte aanpassen 

 We gaan de kolombreedte aanpassen. Vervang het blok van net door het volgende: 

 [ 'label' => 'Oppervlakte',

 'attribute' => 'SurfaceArea',

 'contentOptions' => ['style' => 'width:30px; white-space: normal;'],

],

 

 

 Pas de breedte van de kolom Inwoners ( Population ) ook aan; zet de breedte op 30 pixels. 

 

 Test of het werkt!  

 👉Stap 4 - Waarde van kolom aanpassen 

 Stel we willen km2 achter de oppervlakte plaatsen, dan kunnen we de waarde van de kolom als volgt aanpassen: 

 [

 'label' => 'Oppervlakte',

 'attribute' => 'SurfaceArea',

 'format' => 'raw',

 'value' => function($data) {

 return sprintf("%8d k&#13217", $data->SurfaceArea);

 }

] 

 Regel 5 t/m 7 in deze code verandert de waarde van de kolom. Dit is een functie en de return waarde van de functie wordt in de kolom afgedrukt. 

 Test of het werkt! 

 Als je achter return bijvoorbeeld "Hallo" zet dan wordt er in de kolom Oppervlakte overal Hallo afgedrukt. Probeer maar! 

 👉Stap 5 - Link maken van een kolom 

 In de Capital kolom zien we geen plaatsnaam, maar een nummer. Dit is het ID van een plaats in de city tabel. 

 Dus de Capital kolom uit country is de foreign key die wijst naar de primary key ID in city. 

 In de city view kun je een plaatsnaam zoeken door bijvoorbeeld de volgende URL te gebruiken: 

 http://localhost:8080/city/index?CitySearch[ID]=179 

 179 is het ID van Brussels, de hoofdstad van Belgi . 

 We gaan nu de value van de kolom Capital vervangen door de link. 

 Laten we om te beginnen de kolom Capital een beetje gaan aanpassen: 

 

 Vervang de kolomnaam van de kolom Capital door 'Hoofdstad'.  

 Verander de breedte van deze kolom naar 30px.  

 Vervang de value van de kolom in 

 'format' => 'raw', 'value' => function($data) { return "/city/index?CitySearch[ID]=179"; } (alle kolommen krijgen dus dezelfde waarde). 

 

 Je ziet nu (in de browser): 

 

 Test of dit werkt! 

 Dat is nog geen link. Dat komt omdat we met <a href="">...</a> een link moeten maken. Dat kan maar dat is lastig omdat we met " in " quotes zitten. Dus dubbele quotes in dubbele quotes. We kunnen een 'gewone' <a href> maken, maar het is een gepriegel. 

 Met de Yii module Html kunnen we dit eenvoudiger doen. 

 We vervangen de regel die de waarde returned in: 

 

 Je ziet nu in de browser een nummer (FK naar city ) en als je daar op klikt, ga je naar de city Bruxelles [Brussel] 

 Test of dit werkt! 

 We zijn er bijna, we moeten nu alleen de 179 nog variabel maken, anders linkt elke regel naar Brussel. 

   

 👉 Stap 6 - Testen en laatste aanpassing 

 

 Maak je code werkend met bovenstaande code.  

 Als je nu op het nummer klikt ga je naar de hoofdstad van het betreffende land. Test of dit werkt!  

 Verander nu de tekst van de link zodat je in de kolom Hoofdstad, in 'naar hoofdstad'.  

 Als je er op klikt dan ga je dus naar de index view van de hoofdstad.  

 Verander ook de breedte van de kolom naar 200px zodat de kolom netjes past.  

 

 De kolom ziet er dus als volgt uit: 

 

 👉 Stap 7, kolommen aanpassen  

 

 Zet de kolommen in de volgende volgorde: Code - Name - Hoofdstad - Inwoners- Oppervlakte  

 Verander de kolomnamen als volgt: Code - Naam - Hoofdstad - Inwoners - Oppervlakte  

 Zorg dat de naam van het land vet gedrukt wordt (bold).  

 Haal vervolgens de volgnummers (1,2,3,4....) in de eerste kolom weg  

 Verplaats de edit kolom (de laatste) naar voren. 

 

 Het hele overzicht ziet er uit zoals te zien is op het volgende plaatje: 

 

 👉 Stap 8 - bevolkingsdichtheid 

 De bevolkingsdichtheid zegt iets over de hoeveelheid inwoners in een land. Natuurlijk heeft Amerika meer inwoners dan Nederland, maar het land is ook vele groter. Om te vergelijken hoe dichtbevolkt een land is, kun je uitrekenen hoeveel mensen er gemiddeld per km2 (dit een gebied van 1000x1000 meter) wonen. 

 bevolkingsdichtheid = aantal inwoners / oppervlakte. 

 Stel een land heeft een oppervlakte van 100 km2 en je er wonen 200 mensen. Dan heb je in dit land dus gemiddeld 2 inwoners per km2, want: 

 

 

 

 2 = 200 / 100 

 

 

 

 

 Maak nu een nieuwe kolom in het country overzicht en bereken daarin de bevolkingsdichtheid.  

 Gebruik de php functie round() om de bevolkingsdichtheid met 0 decimalen af te drukken. 

 

 👉 Aan het einde heb je jouw gridview aangepast en ziet het er zo uit:  

 

  Het Eindresultaat 

 📤 Inleveren 

 

 Maak een schermafdruk van jouw Country's aangepaste Gridview en lever deze in. 

 Stuur ook jouw (aangepaste) country view in. 

 

 --

Kennis Check Blok 7
Kennis Check blok 7.1 

 Oefenen 

 Kan jij de volgende vragen beantwoorden? 

 

 Hoe werken foutmeldingen in PHP op een (productie)server zoals Plesk? 

 Op productie staan een optie display_errors meestal uit en worden fouten gelogd i.p.v. getoond . PHP schrijft ze naar de errorlog van je server; zo blijft gevoelige informatie verborgen voor bezoekers. 

 

 

 Is er een verschil tussen foutmeldingen in XAMPP en op de productieserver? Waarom? 

 Ja. In XAMPP (ontwikkelomgeving) staan foutmeldingen vaak zichtbaar aan zodat je ze in de browser ziet waardoor je sneller kunt debuggen. Op productie zijn de foutmeldingen verborgen en wordt er gelogd om geen technische details te lekken en de veiligheid en stabiliteit te waarborgen. 

 

 

 Hoe lees je een PHP-foutmelding uit in de Plesk-omgeving? 

 Kijk zelf even in je eigen Plesk omgeving waar dat staat! 

 

 

 Wat is een SSL-certificaat? 

 Een SSL/TLS-certificaat is een digitaal certificaat dat de verbinding tussen browser en server versleutelt (HTTPS) en de identiteit van de website bevestigt. Het voorkomt afluisteren en manipulatie van verkeer en toont het “slotje” in de adresbalk. Let op: het slotje en het certificaat zegt niet de site betrouwbaar is! Ik kan als Hacker namelijk ook een certificaat maken! 

 

 

 Waarvoor gebruik je FTP? 

 Met FTP upload je bestanden naar je server, pas je ze aan of haal je ze op. 

 Je kan FTP dus gebruiken om je eigen website van bijvoorbeeld je laptop op een server te zetten. 

 

 

 Wat is een hostname? Geef een voorbeeld. 

 Een hostname is de (DNS)naam van een server of dienst op het netwerk. Voorbeelden: ftp.jouwdomein.nl , mail.jouwdomein.nl of mysql.jouwdomein.nl . 

 

 

 Wat is de standaard gebruikersnaam en het wachtwoord voor database-toegang op je laptop (via XAMPP)? 

 Standaard is de MySQL/MariaDB-gebruiker root met een leeg wachtwoord ( '' ) en host localhost . Dit is alleen bedoeld voor lokaal gebruik. 

 

 

 Waarom is dit anders op een productieserver? 

 Op productie gelden veiligheidsregels: elke app heeft een eigen databasegebruiker met een sterk wachtwoord en minimale rechten (least privilege). Wachtwoorden zijn nooit leeg en worden niet gedeeld tussen apps. 

 Als je bijvoorbeeld de database gebruikersnaam 'root' zou gebruiken op een server dan maak je het een hacker wel erg makkelijk! 

 

 

 Hoe zorg je dat PHP op de productieserver je database-gegevens kent? 

 Je hebt ergens in één bestand de gebruikersnaam en wachtwoord opgeslagen, bijvoorbeeld in connection.php . Pas dit bestand aan op de productieserver. 

 Waarom is het belangrijk dat de usernaam en het wachtwoord in (maar) één bestand staan? 

 

 

 Wat is een CMS, in simpele woorden? 

 Een CMS is een programma om makkelijk een website te maken en te beheren. Je maakt pagina’s, voegt plaatjes toe en maakt menu’s – meestal zonder te programmeren. Voorbeelden: WordPress, Drupal, Joomla. 

 

 

 Welke gegevens vul je in bij de lokale WordPress-installatie? 

 Database­naam (die jij maakte), gebruikersnaam root , wachtwoord leeg laten, host localhost , tabelvoorvoegsel wp_ . Verder kies je een site-titel en maak je je eigen inlog­gegevens aan. 

 

 

 Hoe log je in op de backend (beheer) van je lokale WP site? 

 Ga naar http://localhost/wp-jouwnaam/wp-admin . Daar log je in met de gebruikersnaam en het wachtwoord die je tijdens de installatie hebt gekozen. 

 

 

 Wat is het verschil tussen frontend en backend in Wordpress? 

 De frontend is wat bezoekers zien (de website zelf). De backend is het beheergedeelte waar jij pagina’s, menu’s en instellingen aanpast. Ingelogd kun je bovenin met de zwarte admin-balk snel wisselen. 

 

 

 Wat is Yii (in simpele woorden)? 

 Yii is een PHP-framework: een doos met bouwblokken om snel een webapp te maken. Handig, want je krijgt veel standaard dingen (zoals inloggen en CRUD) bijna gratis. Het past goed bij je examenopdracht. 

 

 

 Wat betekent MVC? 

 M = Model: praat met de database. V = View: wat je ziet (HTML/CSS). C = Controller: beslist wat er gebeurt als je klikt of naar een pagina gaat. 

 

 

 Wat is Composer? 

 Composer is een installer voor PHP. Je kunt er dus PHP-dingen mee installeren. Omdat Yii in PHP is gemaakt, gebruik je dus Composer om Yii te installeren. 

 

 

 Hoe start je de ontwikkelserver van Yii? 

 Open het project in VS Code, start een terminal en typ: php yii serve . Je site draait dan op http://localhost:8080 . Laat XAMPP aan voor de database. 

 

 

 Waar zet je de database-gegevens (en welke host gebruik je lokaal)? 

 In config/db.php . 

 Gebruik lokaal meestal: db-naam  world , user root , wachtwoord leeg, en host 127.0.0.1 (dus niet localhost ). 

 

 

 Wat is Gii en wat kun je ermee? 

 Gii is de generator van Yii. Daar maak je eerst een model van je tabel en daarna klik je een complete CRUD bij elkaar. Je vindt Gii op http://localhost:8080/gii . 

 

 

 Wat is routing in Yii? Geef één voorbeeld. 

 Routing vertaalt een URL naar een controller en actie. Voorbeeld: /country/index gaat naar CountryController → actionIndex() . 

 

 🛠️ Opdracht 

 Maak de kennis-check.  

 📤 Inleveren 

 Aan het einde van de kennis-check ontvang je een certificaat. Maak een schermafdruk en lever deze in. 

 Kennis Check blok 7.2 

 🛠️ Opdracht 

 Maak de kennis-check.  

 📤 Inleveren 

 Aan het einde van de kennis-check ontvang je een certificaat. Maak een schermafdruk en lever deze in.

CMS - Oud, niet meer gebruiken
Deze NIET meer gebruiken, is vervangen door CMS-2 

 1 Wat is een CMS? 

 🎯 Leerdoelen van de hele module 

    • Wat is een CMS?     • Het installeren van Wordpress     • De belangrijkste onderdelen van Wordpress     • Het toevoegen van pagina’s, media en een navigatiemenu     • Het installeren en instellen van een thema     • Wat zijn plugin’s     • Het installeren en instellen van een plugin 

 🎯 Leerdoelen voor opdracht 1 

 

 Je weet wat een CMS is. 

 Je kunt uitleggen wat je met een CMS zoals WordPress kunt doen. 

 Je begrijpt waarom veel websites met een CMS gebouwd worden. 

 

 💡 Uitleg 

 CMS staat voor Content Management System . Een CMS is een programma waarmee je op een eenvoudige manier een website kunt maken en beheren. 

 Je kunt met een CMS pagina’s aanmaken, plaatjes toevoegen, navigatiemenu’s maken en zelfs extra functies installeren – allemaal zonder te programmeren. 

 Een CMS bestaat meestal uit een basispakket (de 'kern') en uitbreidingen. Je kunt bijvoorbeeld thema’s toevoegen om het uiterlijk aan te passen, of plugins om functionaliteit toe te voegen zoals een webshop, contactformulier of nieuwsbrief. 

 Populaire voorbeelden van CMS-systemen zijn WordPress , Drupal en Joomla . 

 In deze module leer je werken met het meest gebruikte CMS ter wereld: WordPress . 

 WordPress is open-source software . Dat betekent dat je het gratis mag gebruiken en aanpassen. Je kunt WordPress zien als een grote doos met Lego-blokken: 

 

 De basisblokken vormen je website: pagina’s, menu’s, afbeeldingen, enzovoort. 

 Met uitbreidingen (plugins en thema’s) geef je de site een nieuw uiterlijk of voeg je functies toe zoals een online winkel. 

 

 WordPress maakt het dus mogelijk om heel snel een professionele website te bouwen – zonder dat je technische kennis nodig hebt. 

 Voorbereiding 

 

 In dit onderdeel ga je op je eigen laptop een Wordpress-site maken. Om dit te doen, moeten er eerst een paar dingen gebeuren. In eerdere modules heb je al meerdere keren gebruik gemaakt van xampp, dus er wordt hierbij vanuit gegaan, dat je een versie van xampp hebt geïnstalleerd op je computer. 

 

 Een nieuwe database aanmaken Voor het maken van een Wordpresssite heb je een nieuwe database nodig. Maak deze aan met behulp van phpMyAdmin. Je mag hiervoor zelf een naam bedenken.  

 Het downloaden van het programma Wordpress Download de laatste versie van Wordpress vanaf Wordpress.org. Let op: Niet vanaf Wordpress.com!! https://wordpress.org/download/ 

 

 Links to an external site. Sla het bestand op in je ‘htdocs’ bestand van xampp. Meestal is dit: c:\xampp\htdocs 

 

 🛠️ Opdracht 

 

 

 

 

 Pak het zipbestand dat je hebt gedownload. Er wordt hiermee een nieuwe map aangemaakt in htdocs met de naam ‘wordpress’. 

 Verander de bestandsnaam van de map ‘wordpress’ naar ‘wp-<jouwnaam>’ vervang <jouwnaam> door je naam (duûhh!). Gebruik geen spaties! 

 

 

 

 

 Na de eerste opdracht gaan we verder met het installatieproces. 

 Tijdens het installatieproces dat je gaat doorlopen, wordt er gevraagd om de volgende informatie.  

 

 

 

 

 Naam van de database Dit is de naam van de database die je net hebt aangemaakt 

 Gebruikersnaam van de database Dit is de default gebruiker van de xampp database:         ◦ [user] root 

 Wachtwoord van de database         ◦ [password] (leeg) 

 Host van de database         ◦ localhost 

 Tabel voorvoegsel (wanneer je meer dan één WordPress installatie wilt gebruiken in een enkele database) Deze is nu niet van toepassing en mag je onveranderd laten tijdens de installatie 

 Titel van de site1 Bijvoorbeeld: ‘De website van <jouwnaam>’ 

 Inloggegevens om later in het programma te kunnen inloggen         ◦ Gebruikersnaam         ◦ Wachtwoord 

 Jouw mailadres  (om eventueel later het wachtwoord te kunnen herstellen) 

 

 

 

 

 📤 Inleveren 

 

 Maak een lijst van deze informatie en lever deze in als PDF-bestand met de volgende naam: installatiegegevens-<jouwnaam>.pdf 

 

 2 WordPress installatie uitvoeren 

 🎯 Leerdoelen 

 

 Je kunt het installatieproces van WordPress starten via je browser. 

 Je weet hoe je Apache en MySQL moet starten in XAMPP. 

 Je kunt inloggen op je eigen WordPress-site via de juiste URL. 

 

 💡 Uitleg 

 In dit onderdeel ga je een lokale WordPress-website maken met behulp van XAMPP . Dit betekent dat je website alleen werkt op jouw eigen laptop. Voor het maken van een WordPress-site zijn een paar stappen nodig. In eerdere modules heb je al met XAMPP gewerkt, dus we gaan ervan uit dat deze al geïnstalleerd is op je computer. 

 Stap 1 – Database aanmaken 

 Open phpMyAdmin via localhost/phpmyadmin . Maak een nieuwe database aan. Bedenk zelf een geschikte naam (bijv. wp-jan ). 

 Stap 2 – WordPress downloaden 

 Download de laatste versie van WordPress van de officiële site: 

 https://wordpress.org/download/ 

 Let op: Download het NIET van wordpress.com! 

 Sla het ZIP-bestand op in je htdocs -map van XAMPP (meestal: C:\xampp\htdocs ). 

 Je bent nu klaar om WordPress te installeren. Dit doe je in je browser, maar eerst moet je controleren of de juiste onderdelen van XAMPP actief zijn: 

 

 Zorg dat Apache en MySQL zijn gestart in de XAMPP-console. Ze moeten groen zijn. 

 

 

 Open nu je browser en ga naar: 

 http://localhost/wp-<jouwnaam> 

 Voorbeeld: http://localhost/wp-ayoub 

 Je ziet nu het installatieproces van WordPress in je browser. Lees alles zorgvuldig en vul de gevraagde gegevens correct in. Gebruik hierbij de informatie die je eerder hebt genoteerd (zie opdracht 1). 

 Na de installatie: 

 

 Je krijgt een bevestiging te zien dat WordPress is geïnstalleerd. 

 Je kunt direct inloggen met de gebruikersnaam en het wachtwoord die je tijdens de installatie hebt opgegeven. 

 Als je deze link niet meer ziet, kun je inloggen via: 

 

 http://localhost/wp-<jouwnaam>/wp-admin 

 Tijdens de installatie moet je deze gegevens invullen: 

 

 Naam van de database : de naam die je net hebt aangemaakt 

 Gebruikersnaam database : root 

 Wachtwoord database : laat dit veld leeg 

 Host database : localhost 

 Tabelvoorvoegsel : laat dit staan zoals het is ( wp_ ) 

 Titel van de site : bijv. “De website van Ayoub” 

 Gebruikersnaam en wachtwoord om in te loggen op je WordPress-site 

 Je e-mailadres : nodig om je wachtwoord later te herstellen 

 

 🛠️ Opdracht – Installatie controleren 

 

 Log in op WordPress via http://localhost/wp-jouwnaam/wp-admin . 

 Maak een screenshot van je browser, waarop de WordPress-beheerderspagina zichtbaar is, met jouw naam in de adresbalk. 

 Open ook phpMyAdmin en klik op de database die je net hebt aangemaakt. 

 Maak een screenshot van de tabellenstructuur van jouw WordPress-database. 

 

 📤 Inleveren 

 

 inloggen-gelukt-jouwnaam.jpg : Screenshot van jouw WordPress-dashboard met jouw naam zichtbaar in de adresbalk. 

 phpmyadmin-jouwnaam.jpg : Screenshot van jouw WordPress-database in phpMyAdmin met tabellen zichtbaar. 

 

 3 Frontend en Backend in WordPress 

 🎯 Leerdoelen 

 

 Je begrijpt het verschil tussen de frontend en backend van een WordPress-site. 

 Je weet hoe je kunt inloggen op de backend (beheeromgeving). 

 Je kunt schakelen tussen frontend en backend via de admin-balk. 

 

 💡 Uitleg 

 In WordPress werk je in twee verschillende omgevingen: 

 1. De backend 

 De backend is het beheergedeelte van je site. Hier kun je onder andere: 

 

 Nieuwe pagina’s aanmaken 

 Functies toevoegen via plugins 

 Gebruikers beheren 

 Thema’s (templates) installeren voor het uiterlijk van je site 

 

 Je hebt een account nodig om toegang te krijgen tot de backend. Dat account heb je aangemaakt tijdens de installatie. 

 De standaard URL om in te loggen op de backend is: 

 http://sitenaam.nl/wp-admin 

 Als je lokaal werkt is dit bijvoorbeeld: http://localhost/wp-jouwnaam/wp-admin 

 2. De frontend 

 De frontend is de website zoals bezoekers deze zien. Iedereen kan deze omgeving bekijken – je hebt geen wachtwoord nodig, tenzij je dat instelt. 

 Switchen tussen frontend en backend 

 Als je bent ingelogd, zie je bovenaan een zwarte balk. Deze admin-balk is zichtbaar op alle pagina’s, zowel in de backend als de frontend. 

 Met deze balk kun je makkelijk wisselen tussen beide omgevingen. 

 🔁 Manier 1 – Naar de homepage of het dashboard 

 

 Klik linksboven in de zwarte balk op het icoon naast het WordPress-logo. 

 Om naar de homepage te gaan: klik op het huis-icoontje . 

 Om naar het dashboard te gaan: klik op het dashboard-icoontje . 

 

 

 🧪 Probeer dit zelf een paar keer: Wissel tussen de backend en frontend van jouw site met behulp van de zwarte balk. 

 🧭 Manier 2 – Direct naar het onderdeel dat je wilt bewerken 

 Als je bijvoorbeeld een pagina bekijkt en je wilt de inhoud wijzigen, kun je via de zwarte balk direct naar de bewerkingspagina in de backend gaan. 

 Deze functie maakt het snel en makkelijk om onderdelen van je site aan te passen terwijl je ze bekijkt. 

 Hoe dit precies werkt, kom je later in deze module nog uitgebreid tegen! 

 🧠 Reflectie 

 

 Wat is het verschil tussen frontend en backend? 

 Waarvoor gebruik je de zwarte admin-balk? 

 Waarom is het handig om direct vanuit de frontend naar het bewerkvenster te gaan? 

 

 📤 Inleveren 

 

 Antwoord op de reflectievragen (pdf of txt). 

 

 4 Pagina’s maken en aanpassen in WordPress 

 🎯 Leerdoelen 

 

 Je weet hoe pagina’s werken in WordPress. 

 Je kunt pagina’s bekijken en bewerken vanuit de frontend én de backend. 

 Je begrijpt het verschil tussen pagina’s in WordPress en losse HTML-bestanden. 

 

 Welke onderdelen van Wordpress gaan we in deze module gebruiken? 

 

 💡 Maken en onderhouden van pagina's 

 

 Als software developer heb je waarschijnlijk al vaak webpagina’s gemaakt met HTML en CSS. In WordPress kan dat ook, maar het hoeft niet! 

 In plaats van losse HTML-pagina’s en CSS-bestanden gebruikt WordPress een andere manier. Je maakt en bewerkt pagina’s gewoon via de backend, met een visuele editor. Je hoeft dus geen code te schrijven – al mag dat natuurlijk wel als je wilt! 

 Belangrijk om te onthouden: 

 

 Je hoeft niet technisch te zijn om een mooie website te maken in WordPress. 

 Maar als je wél technische kennis hebt, kun je die gebruiken voor extra aanpassingen. 

 

 Frontend ↔ Backend gebruiken 

 Via de zwarte admin-balk kun je gemakkelijk wisselen tussen de frontend en backend van je site. Zoals je eerder hebt geleerd, kun je dan heen en weer gaan tussen de homepage (frontend) en het dashboard (backend). 

 Maar soms wil je direct naar een specifieke pagina in de backend, bijvoorbeeld als je een stuk tekst wilt aanpassen op een bepaalde pagina. 

 Direct bewerken via de frontend 

 Als je bent ingelogd en je bekijkt een pagina via de frontend, dan zie je bovenaan een zwarte balk. Deze bevat een knop waarmee je direct naar het bewerkvenster van die pagina in de backend kunt gaan. 

 Dit is handig, want zo hoef je de pagina niet eerst handmatig op te zoeken in het dashboard. 

 Voorbeeldpagina bij installatie 

 Bij de installatie van WordPress wordt er automatisch een voorbeeldpagina aangemaakt. Die kun je bekijken via de volgende URL: 

 http://localhost/wp-<jouw-naam>/voorbeeld-pagina 

 Bijvoorbeeld: http://localhost/wp-ayoub/voorbeeld-pagina 

 🛠️ Opdracht – Voorbeeldpagina bekijken en bewerken 

 Zoek  

 

 Ga naar http://localhost/wp-jouwnaam/voorbeeld-pagina . 

 Bekijk de pagina zoals een bezoeker deze zou zien. 

 Klik op de zwarte balk bovenin op Bewerken om de backend-versie van de pagina te openen. 

 

 

 Pas de titel van de pagina aan naar bijvoorbeeld: “Welkom op mijn WordPress-site”. 

 Pas ook de tekst op de pagina aan (bijvoorbeeld je eigen naam toevoegen). 

 Zoek via internet/AI op hoe je deze aanpassingen kunt maken. 

 

 Als je helemaal klaar bent, kun je de editor weer afsluiten door te klikken op het zwart/witte Wordpress logo linksboven in beeld. 

 

 Ga weer naar de pagina url: 

 http://localhost/wp-<jouw-naam>/voorbeeld-pagina 

 En als het goed is, zie je je eigen tekst staan. 

 🧠 Reflectie 

 

 Wat is het voordeel van werken met WordPress-pagina’s ten opzichte van losse HTML-bestanden? 

 Wat vond je makkelijker: bewerken via de frontend of backend? Waarom? 

 Welke rol speelt de zwarte admin-balk bij het onderhouden van pagina’s? 

 

 📤 Inleveren 

 

 Maak een screenshot van jouw aangepaste voorbeeldpagina in de frontend (met jouw aanpassing zichtbaar). 

 

 5 Opdracht – Standaard pagina aanpassen 

 We gaan de pagina nog wat mooier maken en aanpassen.  

 Plaats in de pagina minimaal drie afbeeldingen. Deze mag je zelf uitkiezen en vanaf je computer via de editor van WP uploaden en tussen de tekst zetten. 

 Zet hiervoor je cursor op de plek waar je het plaatje wilt plaatsen en klik op het pijltje naar beneden en kies voor ‘Inline afbeelding’. Hierna kun je een plaatje vanaf je computer versturen naar Wordpress. 

 

 Je kunt ook een nieuw blok aanmaken door op een stuk tekst te gaan staan en op het blauwe plusje te klikken onder aan de pagina.  

 

 Plaats via deze manier ook een plaatje. 

 🛠️ Opdracht 1 

 

 Maak een screenshot met de url (met daarin je naam) en sla deze op als: voorbeeld-pagina-<jouw-naam>.jpg Lever de afbeelding in.  

 

 🛠️ Opdracht 2 

 Maak nog twee willekeurige pagina’s.  

 Eén met de titel ‘contact’ en één met de titel ‘Homepage’.  

 Om een nieuwe pagina te maken ga je naar de zwarte balk boven in je browserscherm en klik je op: Nieuw (hier niet op klikken!) → Pagina 

 

 Vul de pagina met twee blokken (willekeurige) tekst en per pagina twee andere soorten blokken. Welke dit zijn mag je zelf weten. 

 Sla beide pagina’s op. 

 Maak een screenshot met de url (met daarin je naam) en sla deze op als: 

 

 contact-<jouw-naam>.jpg 

 homepage-<jouw-naam>.jpg 

 

 Lever de afbeelding in. Stuur ook de url van de nieuwe pagina’s mee. 

 🛠️ Opdracht 3 – Voorbeeldpagina aanpassen 

 

 Ga naar de voorbeeldpagina van jouw site: http://localhost/wp-<jouw-naam>/voorbeeld-pagina 

 Klik bovenaan in de zwarte balk op Pagina bewerken . 

 Je komt nu in het bewerkingsscherm van de pagina. Klik op de tekst en blokken en vervang de standaardtekst door een introductieverhaal over jezelf als student software developer . 

 Pas ook de titel van de pagina aan naar iets origineels, bijvoorbeeld: “Welkom op mijn portfolio” of “Dit ben ik – Toekomstig developer” 

 Gebruik de editor en probeer zelf te ontdekken hoe je tekstblokken wijzigt. 

 

 

 💪 Zelf proberen! 

 Probeer eerst zelf uit te zoeken hoe je de tekst aanpast. Kom je er echt niet uit, kijk dan op internet of vraag hulp. 

 Vergeet niet op de knop Bijwerken te klikken zodat je wijzigingen worden opgeslagen! 

 Als je klaar bent, kun je de editor afsluiten door linksboven op het zwart/witte WordPress-logo te klikken. 

 

 Ga daarna weer naar: http://localhost/wp-<jouw-naam>/voorbeeld-pagina 

 Als het goed is zie je daar nu jouw eigen tekst en titel terug! 

 📤 Inleveren 

 

 Screenshot van de aangepaste pagina in je browser, met de URL zichtbaar waarin jouw naam voorkomt. 

 

 6 Pagina verder aanpassen 

 🛠️ Opdracht 4 – Afbeeldingen toevoegen aan je pagina 

 We gaan de voorbeeldpagina nog mooier maken door afbeeldingen toe te voegen. 

 

 Open je pagina opnieuw via: http://localhost/wp-<jouw-naam>/voorbeeld-pagina 

 Klik bovenaan op Pagina bewerken . 

 Voeg minstens drie afbeeldingen toe aan de pagina. Je mag zelf kiezen welke, zolang ze bij jouw introductieverhaal passen. 

 Upload afbeeldingen vanaf je computer via de WordPress editor. 

 

 

 📌 Een afbeelding toevoegen in de tekst 

 Zet je cursor op de plek waar je een afbeelding wilt plaatsen. Klik dan op het pijltje omlaag bij een bestaand blok en kies Inline afbeelding . Selecteer daarna een afbeelding van je computer en voeg deze toe. 

 

 🧱 Een nieuw blok maken met een afbeelding 

 Je kunt ook een nieuw blok toevoegen. Klik op het blauwe plusje onder aan de pagina of tussen bestaande blokken. 

 

 Kies dan voor Afbeelding en upload een bestand vanaf je computer. 

 📤 Inleveren 

 

 Maak een screenshot van je voorbeeldpagina nadat je de drie afbeeldingen hebt toegevoegd. 

 Zorg dat de URL zichtbaar is in de screenshot, met daarin jouw naam. 

 

 7 Nieuwe pagina’s aanmaken 

 🛠️ Opdracht 5 – Contact en Homepage aanmaken 

 Je gaat nu zelf twee nieuwe pagina’s maken: 

 

 Een pagina met de titel Homepage 

 Een pagina met de titel Contact 

 

 Stap voor stap: 

 

 Zorg dat je bent ingelogd op je site. 

 Klik in de zwarte balk bovenin op Nieuw → Pagina . 

 Geef de pagina de juiste titel: “Homepage” of “Contact”. 

 Voeg minimaal twee tekstblokken toe. 

 Voeg daarnaast ook twee andere soorten blokken toe. Dit mogen bijvoorbeeld zijn: een afbeelding, knop, lijst, video, citaat, enzovoort. 

 Klik op Publiceren of Bijwerken om de pagina op te slaan. 

 

 Herhaal deze stappen voor de tweede pagina. 

 📤 Inleveren 

 

 Maak een screenshot van elke nieuwe pagina ( Homepage en Contact ) met de URL zichtbaar in de adresbalk. 

 Stuur ook de URL’s van beide pagina’s mee. Bijvoorbeeld: http://localhost/wp-jouwnaam/contact http://localhost/wp-jouwnaam/homepage 

 

 8 Site-instellingen en Homepage instellen 

 🎯 Leerdoelen 

 

 Je weet waar je de algemene instellingen van je WordPress-site kunt vinden. 

 Je kunt de homepage van je website instellen via het menu “Lezen”. 

 Je begrijpt het verschil tussen de standaard blogweergave en een statische pagina als homepage. 

 

 💡 Uitleg 

 Via de instellingen in de backend kun je veel algemene eigenschappen van je site beheren. 

 1. Algemeen 

 Via Instellingen → Algemeen kun je onder andere: 

 

 De titel en ondertitel van je site aanpassen 

 De taal van je WordPress-installatie wijzigen 

 Het datumformaat en tijdformaat instellen 

 

 2. Lezen 

 Via Instellingen → Lezen kun je: 

 

 Bepalen wat de homepage van je site is 

 Instellen of zoekmachines (zoals Google) jouw site mogen indexeren 

 

 Homepage instellen 

 Je hebt nu drie pagina’s aangemaakt: een voorbeeldpagina, een homepage en een contactpagina. Standaard laat WordPress de blogberichten zien op de hoofdpagina van je site. Dat gaan we nu aanpassen. 

 Als iemand naar jouw hoofdpagina surft (bijvoorbeeld http://localhost/wp-<jouw-naam>/ ) wil je natuurlijk dat hij jouw zelfgemaakte Homepage -pagina ziet! 

 🛠️ Opdracht 6 – Homepage instellen 

 

 Ga naar de backend van je WordPress-site. 

 Navigeer naar Instellingen → Lezen . 

 Kies bij “Je homepage toont” voor: Een statische pagina . 

 Selecteer bij Homepage jouw zelfgemaakte pagina met de titel “Homepage”. 

 Sla je wijzigingen op met de knop Wijzigingen opslaan . 

 

 

 🛠️ Vervolgopdracht – Zet jouw gemaakte homepage actief 

 Zorg dat de door jou gemaakte pagina met de titel Homepage (opdracht 5) daadwerkelijk wordt ingesteld als de homepage van jouw site. 

 Hiervoor gebruik je opnieuw: 

 

 Instellingen → Lezen in de backend 

 Selecteer bij “Je homepage toont” de pagina “Homepage” 

 

 📤 Inleveren 

 

 

 

 Screenshot van jouw nieuwe pagina en zorg dat de URL ook zichtbaar is. 

 

 

 

 9 WordPress uitbreiden met een thema 

 🎯 Leerdoelen 

 

 Je begrijpt wat een WordPress-thema is. 

 Je weet hoe je een ander thema kiest en installeert in WordPress. 

 Je kunt het uiterlijk van je site aanpassen met een thema. 

 

 💡 Uitleg 

 In de vorige opdracht heb je een WordPress-site gemaakt en drie pagina’s aangemaakt. Misschien vond je de site er nog een beetje saai uitzien. Geen zorgen: daar hebben we thema’s voor! 

 Het thema bepaalt hoe jouw website eruitziet: het ontwerp, de kleuren, de lettertypes en de lay-out. 

 Je kunt WordPress zien als een bouwpakket met Lego-blokken . De software zelf is het grote basisblok. Een thema is één van die bouwblokken die je kunt toevoegen om je site mooier en persoonlijker te maken. 

 Er zijn drie manieren om een thema toe te voegen: 

 

 Je maakt zelf een thema en uploadt het. 

 Je koopt een professioneel thema en installeert dat. 

 Je kiest een gratis thema uit de thema-bibliotheek binnen WordPress. 

 

 Standaard is er al een thema actief als je WordPress installeert. Meestal heet dat bijvoorbeeld Twenty Twenty-Three of Twenty Twenty-Four . Ook zijn er vaak al een paar andere thema’s geïnstalleerd, die je meteen kunt activeren. 

 Zo activeer je een ander thema: 

 

 Log in op de WordPress-backend . 

 Ga in het linkermenu naar Weergave → Thema's . 

 Je ziet een overzicht van de beschikbare thema’s. 

 Beweeg je muis over een thema en klik op Activeren . 

 

 Je website verandert dan direct van uiterlijk. De indeling verandert, de kleuren kunnen anders zijn, en het lettertype wordt aangepast. Ook worden andere CSS-bestanden gebruikt. 

 Thema aanpassen met de customizer 

 Bij het actieve thema zie je vaak een knop Customizer of Thema aanpassen . Hiermee kun je het thema verder instellen. Denk aan: 

 

 Je eigen logo of site-icoon toevoegen 

 Kleuren en lettertypes aanpassen 

 Achtergrondafbeelding kiezen 

 Eigen CSS toevoegen (voor gevorderden) 

 

 Als je op Nieuwe toevoegen klikt, kom je in een soort themawinkel terecht. Daar kun je zoeken naar gratis thema’s. Dit lijkt een beetje op de App Store op je telefoon. De meeste thema’s zijn gratis en direct te installeren. 

 🛠️ Opdracht – Thema installeren en aanpassen 

 

 Log in op jouw WordPress-site. 

 Ga naar Weergave → Thema's . 

 Kies een ander standaardthema (bijv. Twenty Twenty-Four) en activeer dit. 

 Klik op Thema aanpassen en probeer minimaal 3 instellingen te veranderen (kleur, titel, lettertype, etc). 

 Voeg een nieuw thema toe via de knop Nieuwe toevoegen . 

 Kies een gratis thema dat je mooi vindt en installeer en activeer dit. 

 

 🧠 Reflectie 

 

 Wat is het verschil tussen een thema en een plugin? 

 Wat is het voordeel van een customizer in WordPress? 

 Hoe kun je jouw site persoonlijker maken met een thema? 

 

 🛠️ Opdracht 2 – Twee thema’s installeren en testen 

 

 Open de backend van je WordPress-website ( http://localhost/wp-<jouw-naam>/wp-admin ). 

 Ga naar Weergave → Thema's . 

 Klik op Nieuwe toevoegen en kies twee gratis thema’s die jij mooi vindt. 

 Installeer én activeer deze twee thema’s, één voor één. 

 Bekijk steeds je homepage in je browser terwijl het thema actief is. 

 

 🛠️ Opdracht 2 – Twee thema’s installeren en testen 

 

 Open de backend van je WordPress-website ( http://localhost/wp-<jouw-naam>/wp-admin ). 

 Ga naar Weergave → Thema's . 

 Klik op Nieuwe toevoegen en kies twee gratis thema’s die jij mooi vindt. 

 Installeer én activeer deze twee thema’s, één voor één. 

 Bekijk steeds je homepage in je browser terwijl het thema actief is. 

 

 📤 Inleveren 

 

 Maak twee screenshots van je homepage, telkens met een ander thema actief. 

 Op het screenshot moet ook de URL zichtbaar zijn , bijvoorbeeld: http://localhost/wp-jan/ . 

 Sla de bestanden op met deze naamstructuur: homepage-<jouw-naam>-<thema-naam>.jpg homepage-<jouw-naam>-<thema-naam>.jpg 

 Na het maken van de screenshots, activeer je weer het standaardthema Twenty Twenty-One . 

 

 10 Hoofdnavigatiemenu en extra menu 

 🎯 Leerdoelen 

 

 Je kunt zelf een navigatiemenu samenstellen in WordPress. 

 Je weet hoe je een hoofdmenu en een tweede menu maakt. 

 Je kunt links groeperen en submenu’s maken in WordPress. 

 

 💡 Uitleg 

 Een hoofdnavigatiemenu is het menu dat bovenaan je website staat en bezoekers helpt om te navigeren tussen de belangrijkste onderdelen van je site. 

 In WordPress kun je meerdere menu’s aanmaken, bijvoorbeeld één als hoofdmenu en één als apart menu voor andere links (zoals naar je favoriete games of muziek). 

 Je kunt ook submenu’s (uitklapmenu’s) maken door één of meer links onder een andere link te laten inspringen. 

 🛠️ Opdracht – Maak een hoofdmenu en extra menu 

 

 Ga naar Weergave → Menu's . 

 Maak een nieuw menu aan en noem dit ‘Mijn hoofdmenu’ . 

 Voeg de volgende links toe aan dit menu:

 

 Home 

 Contact 

 Voorbeeldpagina (of hoe je die zelf genoemd hebt) 

 MBO College Amstelland – met een link naar: https://www.mboamstelland.nl 

 

 

 Zorg ervoor dat één of meerdere links inspringen zodat er een uitklapmenu ontstaat. (Bijvoorbeeld: maak ‘Contact’ een submenu van ‘Home’) 

 Vink aan dat dit het Hoofdmenu (Primary Menu) is en klik op Menu opslaan . 

 Maak daarna een tweede menu aan met een zelfgekozen naam (bijvoorbeeld ‘Favorieten’). 

 Voeg hierin minstens 5 externe links toe, bijvoorbeeld naar je favoriete:

 

 Muziekartiest of band 

 Gamesites 

 Sportclubs 

 

 

 Wijs dit tweede menu NIET toe als hoofdmenu. 

 Voeg het tweede menu toe op een plek waar jouw thema dat toelaat (bijv. in een widget, footer of zijbalk). 

 

 🧠 Reflectie 

 

 Wat is het voordeel van een submenu? 

 Wanneer is het handig om een tweede menu te gebruiken? 

 Wat heb je geleerd over het gebruik van externe links? 

 

 📤 Inleveren 

 

 Maak een screenshot van de homepage waarop beide menu’s zichtbaar zijn. 

 Geef het bestand deze naam: menus-<jouw-naam>.jpg 

 Lever de afbeelding in via de gebruikelijke manier. 

 

 11 WordPress uitbreiden met plugins 

 🎯 Leerdoelen 

 

 Je weet wat een plugin is in WordPress. 

 Je kunt zelf een plugin installeren via de zoekfunctie. 

 Je begrijpt dat plugins extra functies toevoegen aan je website. 

 

 💡 Uitleg 

 In het vorige onderdeel heb je jouw website in WordPress een nieuw uiterlijk gegeven door een thema te installeren. Nu gaan we kijken naar hoe je je website extra functionaliteit kunt geven met plugins . 

 Plugins kun je zien als extra Lego-blokken die je aan WordPress toevoegt. Waar een thema vooral gaat over het uiterlijk van je site, voegen plugins functies toe. 

 Voorbeelden van functies die je met een plugin kunt toevoegen: 

 

 Een webshop (bijv. WooCommerce) 

 Een contactformulier 

 Een agenda of boekingssysteem 

 Zoekmachineoptimalisatie (SEO) 

 Beveiliging of back-ups 

 

 Net als bij thema’s zijn er drie manieren om plugins toe te voegen aan je WordPress-site: 

 

 Je maakt zelf een plugin en uploadt die 

 Je koopt een plugin bij een ontwikkelaar en installeert deze handmatig 

 Je zoekt en installeert een plugin via de ingebouwde pluginzoekfunctie 

 

 In deze les gebruiken we de derde methode: een plugin zoeken en installeren via de plugin-bibliotheek van WordPress. Dit werkt eigenlijk net als in de App Store of Google Play Store . 

 Heb je een plugin gevonden die je wilt gebruiken? Dan klik je op ‘Nu installeren’ en daarna op ‘Activeren’ . Vaak kun je daarna de instellingen van de plugin aanpassen in het WordPress-menu. 

 🛠️ Opdracht – Plugin toevoegen 

 

 Log in op je WordPress-dashboard. 

 Ga naar Plugins → Nieuwe plugin . 

 Zoek in de bibliotheek naar een plugin met handige functies, bijvoorbeeld:

 

 Een formulierplugin zoals WPForms 

 Een beveiligingsplugin zoals Wordfence 

 Een galerijplugin voor afbeeldingen zoals NextGEN Gallery 

 

 

 Klik op Installeren en daarna op Activeren . 

 Ga naar de instellingen van de plugin en bekijk wat je kunt aanpassen. 

 

 🧠 Reflectie 

 

 Wat is het verschil tussen een thema en een plugin? 

 Welke plugin heb jij gekozen en waarom? 

 Wat heb je aangepast of ingesteld binnen deze plugin? 

 

 📤 Inleveren 

 

 Maak een screenshot van jouw WordPress-dashboard waarop te zien is dat de plugin actief is. 

 Lever ook een korte reflectie in (.txt of .pdf) met jouw antwoorden op de drie reflectievragen. 

 

 12 Plugin installeren in WordPress 

 🎯 Leerdoelen 

 

 Je weet hoe je een plugin installeert en activeert in WordPress. 

 Je kunt verschillende soorten plugins herkennen en benoemen. 

 Je begrijpt dat je meerdere plugins tegelijk actief kunt hebben. 

 

 💡 Uitleg 

 In WordPress kun je via het menu Plugins plugins toevoegen, verwijderen of activeren. Plugins zijn uitbreidingen die extra functies aan je site toevoegen, zoals formulieren, een webshop, beveiliging of een fotoalbum. 

 Zo kom je bij de plugin-instellingen: 

 

 Log in op je WordPress-dashboard. 

 Klik in het linker menu op Plugins . 

 

 Je komt dan op een pagina waar je een overzicht ziet van alle geïnstalleerde plugins . Sommige plugins zijn actief (ingeschakeld), anderen niet. In tegenstelling tot thema’s kun je meerdere plugins tegelijk actief hebben. Meestal gebruik je er zelfs behoorlijk wat. 

 Standaard zijn er al een of twee plugins geïnstalleerd (zoals Akismet of Hello Dolly), maar die kun je voorlopig negeren. 

 🔍 Een nieuwe plugin zoeken 

 Klik op ‘Nieuwe plugin’ om naar de plugin-bibliotheek te gaan. Dit is het zoekscherm waar je duizenden plugins kunt doorzoeken en installeren. 

 Je kunt zoeken op naam, functie of populair/gewaardeerd. Net als in de App Store kun je zien hoeveel sterren een plugin heeft en hoe vaak deze is geïnstalleerd. 

 📦 Voorbeelden van soorten plugins: 

 

 📈 Plugins voor SEO (zoekmachineoptimalisatie) 

 🔐 Plugins voor beveiliging tegen hackers en spam 

 🛒 Plugins om een webwinkel te maken (zoals WooCommerce) 

 📷 Plugins voor fotoalbums en mediagalleries 

 📬 Plugins voor contactformulieren 

 💨 Plugins om je site sneller te maken (bijv. caching, afbeeldingen optimaliseren) 

 📊 Plugins om bezoekersstatistieken bij te houden 

 🔁 Plugins voor automatische back-ups van je website 

 🤝 Plugins voor sociale media (Snapchat, Instagram, Facebook, enz.) 

 

 De meeste plugins die je vindt in deze bibliotheek zijn gratis te gebruiken. Voor sommige geavanceerde functies moet je betalen voor een ‘Pro’-versie. 

 🛠️ Opdracht – Installeer en activeer een plugin 

 

 Log in op je WordPress-dashboard. 

 Ga naar Plugins → Nieuwe plugin . 

 Zoek naar een plugin die jou handig lijkt, bijvoorbeeld:

 

 WPForms – om formulieren toe te voegen 

 Wordfence – voor extra beveiliging 

 Yoast SEO – om beter gevonden te worden in Google 

 

 

 Klik op Installeren en daarna op Activeren . 

 Ga na het activeren naar de instellingen van de plugin en bekijk wat je kunt aanpassen. 

 

 🧠 Reflectie 

 

 Welke plugin heb je gekozen en waarom? 

 Wat voor functies voegt deze plugin toe aan jouw site? 

 Heb je iets aangepast in de instellingen van de plugin? 

 

 📤 Inleveren 

 

 Maak een screenshot van jouw pluginpagina waarop je plugin zichtbaar en geactiveerd is. 

 Noem het bestand: plugin-.jpg 

 Lever ook een kort reflectiedocument (.txt of .pdf) in met je antwoorden op de drie vragen. 

 

 13 Het installeren van een plugin – Classic Editor 

 🎯 Leerdoelen 

 

 Je weet hoe je de editor van WordPress kunt aanpassen met een plugin. 

 Je kunt de Classic Editor installeren en activeren. 

 Je kunt verschillen benoemen tussen de standaardeditor (Gutenberg) en de Classic Editor. 

 

 💡 Uitleg 

 Als je pagina’s maakt in WordPress, gebruik je standaard de Gutenberg-editor . Deze editor werkt met blokken: elk stukje tekst, afbeelding of knop is een apart blok dat je kunt verslepen of aanpassen. 

 Sommige gebruikers vinden deze editor handig, anderen vinden het juist onoverzichtelijk. Gelukkig kun je dit aanpassen! Je kunt namelijk via een plugin overstappen op de oude Classic Editor . 

 Classic Editor is een plugin die de oude WordPress-editor terugbrengt. Deze werkt meer zoals Microsoft Word: je hebt een eenvoudige werkbalk bovenaan en typt alles in één veld. 

 🛠️ Opdracht – Classic Editor installeren en vergelijken 

 

 Ga naar de voorkant van je site (de homepage). 

 Klik bovenin op ‘Pagina bewerken’ . 

 Kijk goed naar hoe de editor eruitziet. Voeg eventueel wat tekst toe. 

 Ga in de backend naar Plugins → Nieuwe plugin . 

 Zoek op ‘Classic Editor’ , installeer en activeer de plugin. 

 Ga opnieuw naar je homepage en klik weer op ‘Pagina bewerken’ . 

 Je ziet nu een andere editor. Pas iets aan en klik op Bijwerken . 

 

 👉 Je kunt op elk moment terugschakelen door de plugin uit te zetten via de pluginpagina. 

 🧠 Reflectie – Vergelijk de editors 

 

 Beschrijf minimaal drie verschillen tussen de standaardeditor en de Classic Editor. 

 Welke editor heeft jouw voorkeur? Waarom? 

 

 📤 Inleveren 

 

 Lever een korte tekst (.txt of .pdf) in waarin je de drie verschillen beschrijft en aangeeft welke editor jij fijner vindt. 

 Maak een screenshot van de Classic Editor in je browser. Bestandsnaam: editor-<jouw-naam>.jpg 

 

 ⭐ Bonusopdracht (2 extra punten) 

 

 Zoek in het plugin-overzicht naar een andere editor (bijvoorbeeld Elementor of WPBakery Page Builder ). 

 Installeer en activeer deze nieuwe editor. Zet de ‘Classic Editor’ plugin eerst uit. 

 Probeer deze nieuwe editor uit door een pagina aan te passen. 

 

 🎯 Bonus Reflectie 

 

 Wat zijn de voor- en nadelen van deze nieuwe editor? 

 Welke editor is nu je favoriet en waarom? 

 

 14 Formulieren maken met WPForms 

 🎯 Leerdoelen 

 

 Je weet hoe je WPForms installeert en activeert. 

 Je kunt een formulier maken met verschillende soorten invoervelden. 

 Je kunt een formulier invoegen op een pagina en opnemen in het menu. 

 

 💡 Uitleg 

 Een formulier op je website is handig om bezoekers contact met je op te laten nemen. Je kunt hiermee gegevens verzamelen, vragen laten stellen, of zelfs aanmeldingen verwerken. 

 Met de plugin WPForms kun je eenvoudig formulieren bouwen via een visuele interface. Je hoeft niet te programmeren: je sleept de velden naar de juiste plek. 

 Zo installeer je WPForms: 

 

 Ga in de backend naar Plugins → Nieuwe plugin . 

 Zoek naar WPForms . 

 Klik op Installeren en daarna op Activeren . 

 

 Na het activeren verschijnt er een nieuwe optie WPForms in het linker menu. Ook krijg je een introductiescherm met een uitlegvideo. Bekijk deze video voor je verder gaat. 

 🛠️ Opdracht – Maak een contactformulier 

 

 Ga naar WPForms → Nieuwe toevoegen . 

 Kies Leeg formulier of begin met een Contactformulier-template . 

 Voeg de volgende velden toe aan je formulier:

 

 Voornaam (verplicht) 

 Achternaam (verplicht) 

 Straatnaam 

 Huisnummer 

 Emailadres (verplicht) 

 Telefoonnummer (verplicht) 

 Hoe mogen we contact met u opnemen? Meerkeuze: Per telefoon / Per email 

 Wanneer mogen we contact opnemen? Dropdown: 's ochtends / 's middags / 's avonds 

 Vraag die u wilt stellen Tekstvak (verplicht) 

 

 

 Sla het formulier op. Kopieer de shortcode die je ziet (bijv. [wpforms id="123"] ). 

 Maak een nieuwe pagina aan met de titel Contact . 

 Plak de shortcode in deze pagina en sla op. 

 Test de pagina en controleer of je formulier correct wordt weergegeven. 

 Ga naar Weergave → Menu’s en voeg je nieuwe Contactpagina toe aan het hoofdmenu. 

 

 🧠 Reflectie 

 

 Welke soorten invoervelden heb je gebruikt? 

 Wat vond je van het werken met WPForms? 

 Wanneer zou je dit soort formulieren in het echt kunnen gebruiken? 

 

 📤 Inleveren 

 

 Maak een screenshot van jouw Contactpagina met het formulier zichtbaar en de URL van de pagina in beeld. 

 Noem het bestand: contactformulier-<jouw-naam>.jpg 

 Lever ook een korte reflectie in (.txt of .pdf) waarin je de drie vragen hierboven beantwoordt. 

 

 15 Project: WordPress-site voor Vakantiepark ‘De Eekhoorn’ 

 🎯 Leerdoelen 

 

 Je kunt zelfstandig een WordPress-site installeren op een eigen serveromgeving. 

 Je kunt een site ontwerpen met een passend thema en aangepaste huisstijl. 

 Je kunt verschillende soorten plugins gebruiken voor formulieren, galerijen, SEO en veiligheid. 

 Je kunt een complete website opleveren op basis van wensen van een opdrachtgever. 

 

 💡 Projectbeschrijving 

 Je bent net opgeleid tot WordPress-ontwikkelaar en krijgt meteen je eerste opdracht: het bouwen van een website voor het Drentse vakantiepark De Eekhoorn . De site wordt geïnstalleerd op jouw eigen PLESK-serveromgeving (gebruik hiervoor een aparte map: vakantiewoning en maak een nieuwe database aan). 

 📄 Te bouwen pagina’s: 

 

 Homepage – algemene info over het vakantiepark 

 Reserveringsaanvraagpagina – met een formulier voor boekingsverzoeken 

 Informatiepagina – tekst en afbeeldingen over het park 

 Type woningen – drie woningtypes met beschrijving en fotogalerij of -slider 

 

 🛠️ Projecteisen 

 🎨 Design 

 

 Gebruik een gratis thema uit de WordPress-theme store dat responsive is. 

 Pas dit thema aan via de Customizer . 

 Gebruik de kleuren van de Drentse vlag: rood, wit, zwart . 

 Zorg dat het logo op alle schermgroottes zichtbaar blijft . 

 

 📝 Reserveringsformulier (op aparte pagina) 

 

 Naam (verplicht) 

 Adresvelden 

 Emailadres (verplicht) 

 Telefoonnummer (verplicht) 

 Gewenste woning (selectbox) 

 Aankomstdag (tekstveld, verplicht) 

 Aantal weken (min 1 – max 4) 

 Aanvullende opmerkingen 

 

 Kies een gratis formulierenplugin uit de WordPress-plugin store (bijv. WPForms). Zorg dat het formulier werkt en verzonden wordt naar jouw studenten-email. 

 🖼️ Foto’s en woningtypes 

 

 Gebruik een gallery- of sliderplugin om de drie woningtypes aantrekkelijk te presenteren. 

 Zorg voor een goede opmaak en duidelijke beschrijvingen. 

 

 🔒 Veiligheid 

 

 Installeer een gratis beveiligingsplugin (bijv. Wordfence of All In One WP Security). 

 

 🔍 SEO 

 

 Installeer Yoast SEO (gratis versie) voor zoekmachineoptimalisatie. 

 

 📱 Navigatie en menu’s 

 

 Zorg voor een duidelijk navigatiemenu dat goed werkt op mobiel en desktop. 

 Alle pagina’s moeten via het menu bereikbaar zijn. 

 

 📦 Gebruik klantmateriaal 

 

 Gebruik de teksten en afbeeldingen die door de klant zijn aangeleverd. 

 Download hier het materiaal 

 

 📤 Inleveren 

 

 Controleer of alle pagina’s, plugins en vormgevingseisen zijn uitgevoerd. 

 Lever de url van jouw site in. 

 Vraag een eindgesprek aan waarin je jouw site presenteert. 

 In het gesprek vertel je:

 

 Welke plugins je hebt geïnstalleerd 

 Hoe je de site hebt gestyled 

 Hoe je met het klantmateriaal hebt gewerkt 

 

 

 

 ✅ Tip: Lees de opdracht nog één keer goed door voordat je de site inlevert.

Wordpress 2026
Doorlopen en aanvullen met illustraties 01 CMS en WordPress 

 🎯 Leerdoelen voor opdracht 1 

 

 Je kunt in je eigen woorden uitleggen wat een CMS doet. 

 Je kunt de belangrijkste onderdelen van een WordPress-site benoemen. 

 Je kunt uitleggen welk WordPress-platform je gebruikt om zelf een website te installeren. 

 

 💡 Uitleg: wat is een CMS? 

 CMS  staat voor  Content Management System . Het is software waarmee je de inhoud van een website maakt en beheert. Je kunt bijvoorbeeld pagina’s schrijven, afbeeldingen uploaden, een menu maken en een formulier toevoegen zonder voor elk onderdeel zelf een HTML-bestand te schrijven. 

 Een CMS bewaart de inhoud meestal in een database en toont die inhoud met behulp van een ontwerp. Daardoor kunnen meerdere mensen aan dezelfde website werken: bijvoorbeeld een redacteur die teksten schrijft en een beheerder die instellingen wijzigt. 

 Voorbeelden van CMS-systemen zijn  WordPress , Drupal en Joomla. In deze module werken we met WordPress. 

 De belangrijkste onderdelen van WordPress 

 

 Pagina’s : vaste inhoud, zoals Home, Over ons en Contact. 

 Berichten : tijdgebonden inhoud, zoals nieuws- of blogartikelen. 

 Thema : bepaalt de vormgeving en lay-out van de website. 

 Plugins : voegen extra functies toe, bijvoorbeeld een formulier, galerie of beveiliging. 

 Media : afbeeldingen, video’s en documenten die je op de site gebruikt. 

 Gebruikers : personen met toegang tot de beheeromgeving, ieder met eigen rechten. 

 

 WordPress.org en WordPress.com 

 Deze twee namen lijken op elkaar, maar betekenen niet hetzelfde: 

 

 WordPress.org  biedt de gratis, open-source WordPress-software. Je downloadt deze software en installeert haar zelf op een lokale computer of webserver. In deze cursus gebruiken we  WordPress.org . 

 WordPress.com  is een commerciële online dienst waarop hosting en WordPress samen worden aangeboden. Je hebt daar minder technische controle, afhankelijk van het gekozen abonnement. 

 

 Open source  betekent dat de broncode van WordPress beschikbaar is. Je mag de software gebruiken, bestuderen en aanpassen. Dat betekent niet dat je zomaar elk thema of elke plugin zonder controle moet installeren: controleer altijd of een uitbreiding betrouwbaar en onderhouden is. 

 Frontend en backend 

 Bezoekers zien de  frontend : de publieke website. In de  backend , ook wel het dashboard of beheergedeelte, maak en beheer je de inhoud en instellingen. Je hebt een account nodig om in de backend te werken. 

 🛠️ Opdracht – CMS en WordPress herkennen 

 

 Zoek twee bestaande websites die volgens jou met een CMS zijn gemaakt. 

 Noteer van beide websites de URL en noem twee onderdelen die waarschijnlijk via een CMS beheerd worden, bijvoorbeeld het menu, nieuwsberichten, afbeeldingen of een contactformulier. 

 Maak vervolgens een overzicht met de zes WordPress-onderdelen uit de uitleg: pagina’s, berichten, thema’s, plugins, media en gebruikers. 

 Schrijf bij elk onderdeel in één zin waarvoor je het gebruikt. 

 Beantwoord ten slotte: waarom gebruiken organisaties liever een CMS dan losse HTML-bestanden voor een website die regelmatig verandert? 

 

 🧠 Reflectie 

 

 Wat is volgens jou het belangrijkste voordeel van een CMS? 

 Wat is het verschil tussen een thema en een plugin? 

 Waarom werken we in deze cursus met WordPress.org en niet met WordPress.com? 

 

 📤 Inleveren 

 

 Lever één PDF of tekstdocument in met jouw twee websitevoorbeelden, het overzicht van WordPress-onderdelen, je antwoord op de opdrachtvraag en de drie reflectievragen. 

 Noem het bestand:  01-cms-en-wordpress-<jouwnaam>.pdf  of  01-cms-en-wordpress-<jouwnaam>.txt . 

 

 02 Lokale installatie van WordPress 

 🎯 Leerdoelen 

 

 Je begrijpt waarom je een WordPress-site eerst lokaal kunt bouwen. 

 Je kunt Apache en MySQL starten in XAMPP. 

 Je kunt een database aanmaken in phpMyAdmin. 

 Je kunt WordPress lokaal installeren en inloggen in het dashboard. 

 Je kunt een LLM AI verantwoord inzetten om installatieproblemen te onderzoeken. 

 

 💡 Uitleg: lokaal werken 

 Een  lokale ontwikkelomgeving  draait op je eigen computer. De website is dan nog niet openbaar op internet. Dat is handig: je kunt veilig oefenen, fouten maken en onderdelen testen voordat je een site live zet. 

 In deze cursus gebruiken we  XAMPP . XAMPP bevat onder andere: 

 

 Apache : de webserver die jouw WordPress-bestanden in de browser laat zien. 

 MySQL : het databasesysteem waarin WordPress inhoud, instellingen en gebruikers opslaat. 

 phpMyAdmin : een webprogramma waarmee je databases kunt bekijken en beheren. 

 

 WordPress bestaat dus uit twee delen die allebei nodig zijn:  bestanden  (zoals thema’s, plugins en afbeeldingen) en een  database  (zoals pagina’s, instellingen en gebruikers). 

 Voorbereiding 

 

 Open de XAMPP Control Panel. 

 Start  Apache  en  MySQL . Beide regels moeten als actief zichtbaar zijn. 

 Open in je browser  http://localhost/phpmyadmin . 

 Maak een nieuwe database, bijvoorbeeld  wp-jouwnaam . Gebruik geen spaties in de databasenaam. 

 Download de meest recente WordPress-versie van  wordpress.org/download . Gebruik voor deze cursus dus niet WordPress.com. 

 Pak het ZIP-bestand uit en plaats de uitgepakte WordPress-map in de map  htdocs  van XAMPP. Geef de map een herkenbare naam, bijvoorbeeld  wp-jouwnaam . 

 

 WordPress installeren 

 

 Ga in je browser naar  http://localhost/wp-jouwnaam . 

 Kies de gewenste taal en start de installatie. 

 Vul de databasegegevens in. Bij een standaard XAMPP-installatie zijn dit meestal: 

 

 Databasenaam:  wp-jouwnaam 

 Gebruikersnaam:  root 

 Wachtwoord: leeg 

 Databasehost:  localhost 

 Tabelvoorvoegsel: laat de standaardwaarde staan, tenzij je docent iets anders aangeeft. 

 

 

 Vul een sitetitel in en maak een beheerdersaccount aan. Gebruik een uniek, sterk wachtwoord. 

 Bewaar je wachtwoord in een wachtwoordmanager of op de manier die je docent voorschrijft. Deel het niet in screenshots, prompts of documenten. 

 Rond de installatie af en log in via  http://localhost/wp-jouwnaam/wp-admin . 

 

 🤖 AI gebruiken bij installatieproblemen 

 Een LLM AI, zoals ChatGPT, kan helpen om een foutmelding te begrijpen of een volgende stap te vinden. De AI voert de installatie niet voor jou uit en kan zich vergissen. Controleer daarom altijd het antwoord in jouw eigen omgeving. 

 Een goede vraag aan AI bevat: 

 

 wat je probeert te doen; 

 welk programma je gebruikt, bijvoorbeeld XAMPP op Windows of macOS; 

 de volledige foutmelding; 

 wat je zelf al hebt gecontroleerd. 

 

 Voorbeeldprompt: 

 

 Ik installeer WordPress lokaal met XAMPP op Windows. Apache en MySQL draaien. Bij  http://localhost/wp-samira  zie ik de foutmelding “[plak foutmelding]”. Ik heb al gecontroleerd dat de map in  htdocs  staat. Geef maximaal drie mogelijke oorzaken en veilige controles die ik zelf kan uitvoeren. Vraag om extra informatie als dat nodig is. 

 

 Let op:  plak nooit wachtwoorden, databasewachtwoorden, API-sleutels of persoonsgegevens in een AI-chat. Vraag AI om uitleg en controles; kopieer niet blind commando’s of wijzigingen die je niet begrijpt. Noteer bij je werk kort welke AI-vraag je hebt gesteld en hoe je het antwoord hebt gecontroleerd. 

 🛠️ Opdracht – Installeer WordPress lokaal 

 

 Start Apache en MySQL in XAMPP. 

 Maak de database  wp-jouwnaam  aan. 

 Download en installeer WordPress in de map  wp-jouwnaam . 

 Log in op jouw WordPress-dashboard. 

 Maak een screenshot van het dashboard. Zorg dat de lokale URL zichtbaar is, maar dat er geen wachtwoord of andere gevoelige gegevens in beeld staan. 

 Open phpMyAdmin, selecteer jouw database en maak een screenshot waarop de WordPress-tabellen zichtbaar zijn. 

 Gebruik AI alleen als je vastloopt. Noteer dan de gebruikte prompt, een korte samenvatting van het antwoord en hoe je hebt gecontroleerd dat de oplossing werkte. 

 

 🧠 Reflectie 

 

 Waarom is lokaal werken handig voordat je een website publiceert? 

 Welke informatie bewaart WordPress in de database en welke informatie staat in bestanden? 

 Als je AI hebt gebruikt: wat was je vraag en hoe heb je gecontroleerd of het antwoord juist was? Als je AI niet hebt gebruikt: bij welk installatieprobleem zou AI je kunnen helpen? 

 

 📤 Inleveren 

 

 02-dashboard-jouwnaam.jpg : screenshot van jouw WordPress-dashboard met de lokale URL zichtbaar. 

 02-database-jouwnaam.jpg : screenshot van jouw WordPress-database met tabellen zichtbaar in phpMyAdmin. 

 02-reflectie-jouwnaam.pdf  of  02-reflectie-jouwnaam.txt : antwoorden op de reflectievragen en, indien van toepassing, jouw AI-log. 

 

 3 Dashboard en blokeditor 

 🎯 Leerdoelen 

 

 Je kunt inloggen in het WordPress-dashboard. 

 Je kent de belangrijkste onderdelen van het WordPress-beheermenu. 

 Je kunt een pagina maken, bewerken, opslaan en bekijken. 

 Je kunt werken met veelgebruikte blokken in de WordPress-blokeditor. 

 Je kunt AI gebruiken om ideeën te verbeteren zonder teksten klakkeloos over te nemen. 

 

 💡 Uitleg: het dashboard 

 Na het inloggen kom je in het  dashboard  terecht. Dit is de backend van WordPress: de plek waar je jouw website beheert. In het linkermenu zie je onder andere deze onderdelen: 

 

 Berichten : nieuws- of blogartikelen die meestal op datum worden getoond. 

 Pagina’s : vaste pagina’s, zoals Home, Contact en Over ons. 

 Media : afbeeldingen, documenten en andere bestanden. 

 Weergave : instellingen voor thema, ontwerp, navigatie en soms de Site Editor. 

 Plugins : extra functionaliteit voor jouw site. 

 Gebruikers : accounts en rechten. 

 Instellingen : algemene instellingen van de website. 

 

 Welke menuonderdelen je precies ziet, hangt af van je thema, plugins en gebruikersrol. In deze stap werk je vooral met  Pagina’s . 

 💡 Uitleg: de blokeditor 

 WordPress gebruikt standaard de  blokeditor , ook wel Gutenberg genoemd. Een pagina bestaat uit losse blokken. Elk blok heeft een eigen doel en instellingen. Daardoor kun je inhoud combineren zonder zelf HTML te schrijven. 

 Veelgebruikte blokken 

 

 Paragraaf : gewone lopende tekst. 

 Kop : een tussenkop. Gebruik koppen in een logische volgorde. 

 Afbeelding : een afbeelding uit de mediabibliotheek of van je computer. 

 Knoppen : een duidelijke link naar een volgende actie of pagina. 

 Kolommen : zet inhoud naast elkaar; controleer altijd of dit ook op mobiel leesbaar blijft. 

 Lijst : voor korte, scanbare opsommingen. 

 Groep : groepeert blokken zodat je ze gezamenlijk kunt opmaken. 

 

 Een pagina maken 

 

 Ga in het dashboard naar  Pagina’s → Nieuwe pagina toevoegen . 

 Geef de pagina een duidelijke titel. 

 Klik op het plus-icoon ( + ) om een blok toe te voegen. 

 Maak de inhoud met verschillende blokken. 

 Gebruik rechtsboven  Voorbeeld  om te controleren hoe de pagina eruitziet. 

 Klik op  Opslaan als concept  als de pagina nog niet af is, of op  Publiceren  als de pagina zichtbaar mag worden. 

 

 Tip:  bekijk je pagina ook op een smal browservenster of op je telefoon. Tekst moet leesbaar blijven en knoppen moeten goed aanklikbaar zijn. 

 🤖 AI gebruiken bij content 

 AI kan helpen om ideeën te verzamelen, teksten korter en duidelijker te maken of feedback te geven op structuur. De inhoud moet wel van jou blijven: controleer feiten, herschrijf in je eigen woorden en zorg dat de tekst past bij jouw doelgroep. 

 Voorbeeldprompt: 

 

 Ik maak een welkomstpagina voor een kleine fictieve gameclub voor jongeren van 16–18 jaar. Bedenk een structuur met een titel, twee korte tussenkoppen, een alinea en een knoptekst. Schrijf in eenvoudig Nederlands. Geef alleen een voorstel; ik pas het zelf aan. 

 

 Gebruik geen persoonsgegevens van jezelf, klasgenoten of echte klanten in je prompt. Noteer onderaan je opdracht of je AI hebt gebruikt, waarvoor je het gebruikte en welke onderdelen je zelf hebt aangepast. 

 🛠️ Opdracht – Maak een welkomstpagina 

 

 Maak een nieuwe pagina met de titel  Welkom . 

 Voeg een hoofdtitel en minimaal twee tussenkoppen toe. 

 Voeg twee korte alinea’s toe waarin je uitlegt waar jouw fictieve website over gaat. 

 Gebruik minimaal vier verschillende bloktypen: een kop, een paragraaf, een lijst en een knop. Je mag daarnaast andere blokken gebruiken. 

 Laat de knop verwijzen naar een bestaande pagina of gebruik tijdelijk  #  als je doelpagina nog niet bestaat. 

 Bekijk de pagina in voorbeeldweergave en controleer spelling, leesbaarheid en de mobiele weergave. 

 Publiceer de pagina. 

 Maak een screenshot van de gepubliceerde pagina met de URL zichtbaar in de adresbalk. 

 

 🧠 Reflectie 

 

 Wat is het voordeel van werken met blokken in plaats van één groot tekstveld? 

 Welk blok vond je het nuttigst voor jouw pagina en waarom? 

 Hoe heb je gecontroleerd of jouw pagina prettig leesbaar is voor een bezoeker? 

 Als je AI hebt gebruikt: welke suggestie heb je aangepast of afgewezen, en waarom? 

 

 📤 Inleveren 

 

 03-welkom-jouwnaam.jpg : screenshot van de gepubliceerde Welkom-pagina met zichtbare URL. 

 03-reflectie-jouwnaam.pdf  of  03-reflectie-jouwnaam.txt : antwoorden op de reflectievragen, inclusief een korte AI-verantwoording als je AI hebt gebruikt. 

 

 04 Media en toegankelijkheid 

 🎯 Leerdoelen 

 

 Je kunt afbeeldingen uploaden en plaatsen in WordPress. 

 Je kunt een afbeelding voorzien van een goede alt-tekst. 

 Je begrijpt waarom bestandsformaat en bestandsgrootte belangrijk zijn. 

 Je kunt een pagina toegankelijker maken met koppen, links en voldoende contrast. 

 Je gaat zorgvuldig om met auteursrecht, privacy en AI-gegenereerd beeld. 

 

 💡 Uitleg: media in WordPress 

 Onder  Media  in het WordPress-dashboard beheer je afbeeldingen, documenten en andere bestanden. Je kunt bestanden daar eerst uploaden en later opnieuw gebruiken, of ze direct toevoegen vanuit een afbeeldingsblok. 

 Een goede website gebruikt afbeeldingen die passen bij de inhoud, scherp genoeg zijn en niet onnodig groot zijn. Grote bestanden maken een website langzaam, vooral op een mobiele verbinding. 

 Bestandsformaten 

 

 JPG/JPEG : geschikt voor foto’s met veel kleuren. 

 PNG : geschikt voor afbeeldingen die transparantie nodig hebben, bijvoorbeeld een logo. Vaak groter dan JPG. 

 WebP : modern formaat met vaak een kleinere bestandsgrootte en goede kwaliteit. 

 SVG : vectorformaat, vooral geschikt voor eenvoudige iconen en logo’s. Upload dit alleen wanneer je organisatie dit toestaat; SVG-bestanden kunnen onveilige code bevatten. 

 

 Verklein een afbeelding voordat je hem uploadt als dat mogelijk is. Upload bijvoorbeeld geen foto van 6000 pixels breed als hij op de pagina maar 1200 pixels breed wordt getoond. 

 💡 Alt-tekst: beschrijf wat belangrijk is 

 Een  alt-tekst  is een korte beschrijving van een afbeelding. Schermlezers lezen deze tekst voor aan bezoekers die de afbeelding niet kunnen zien. Ook helpt de tekst wanneer een afbeelding niet laadt. 

 Beschrijf vooral de informatie die de afbeelding toevoegt aan de pagina. Een decoratieve afbeelding die geen informatie bevat, heeft meestal geen alt-tekst nodig. 

 

 Niet goed:   foto.jpg  of  Afbeelding van een vakantiehuis . 

 Wel goed:   Houten vakantiehuis met terras en drie stoelen aan de rand van het bos . 

 Decoratief:  laat de alt-tekst leeg als de afbeelding alleen sfeer toevoegt en de omliggende tekst al genoeg informatie geeft. 

 

 💡 Toegankelijke inhoud 

 Toegankelijkheid betekent dat zo veel mogelijk mensen jouw website kunnen gebruiken, ook mensen die bijvoorbeeld een schermlezer gebruiken, slecht zien of alleen met een toetsenbord navigeren. 

 Koppen, links en contrast 

 

 Gebruik één duidelijke hoofdtitel ( H1 ) per pagina en gebruik daarna koppen in een logische volgorde. Kies geen kop alleen omdat de tekst groter moet worden. 

 Gebruik beschrijvende linkteksten. Schrijf liever  Bekijk onze openingstijden  dan  Klik hier . 

 Zorg dat tekst voldoende contrasteert met de achtergrond. Lichtgrijze tekst op een witte achtergrond is vaak moeilijk leesbaar. 

 Geef informatie niet alleen met kleur door. Gebruik bijvoorbeeld ook een tekstlabel of icoon bij een foutmelding. 

 Controleer of knoppen duidelijk maken wat er gebeurt, bijvoorbeeld  Stuur reserveringsaanvraag . 

 

 ⚖️ Auteursrecht, privacy en AI-beelden 

 Gebruik alleen afbeeldingen waarvoor je toestemming hebt. Dat kunnen eigen foto’s zijn, materiaal van een opdrachtgever of beelden met een licentie die het gebruik op jouw website toestaat. Noteer altijd de bron of licentie als dat nodig is. 

 AI kan helpen om een afbeelding te maken of een alt-tekstvoorstel te formuleren, maar controleer het resultaat zelf. Plaats geen herkenbare personen zonder toestemming in je prompt of op je website. Presenteer een AI-afbeelding niet als een echte foto van een plaats, product of persoon wanneer dat misleidend zou zijn. 

 Voorbeeldprompt voor feedback: 

 

 Ik gebruik op een website een foto waarop [korte, niet-persoonlijke beschrijving]. De afbeelding staat naast een tekst over [onderwerp]. Geef drie korte voorstellen voor een alt-tekst. Vertel ook of de afbeelding waarschijnlijk decoratief of informatief is. Ik controleer de voorstellen zelf. 

 

 🛠️ Opdracht – Maak jouw Welkom-pagina toegankelijker 

 

 Open de Welkom-pagina uit stap 3 in de blokeditor. 

 Voeg minimaal drie afbeeldingen toe die passen bij de inhoud. Gebruik eigen, rechtenvrij of door de opdrachtgever aangeleverd materiaal. 

 Vul bij elke informatieve afbeelding een passende alt-tekst in. 

 Controleer de koppenstructuur: één hoofdtitel en minimaal twee logische tussenkoppen. 

 Voeg één duidelijke knop of link toe met een beschrijvende tekst. 

 Controleer of de tekst goed leesbaar is tegen de achtergrond en bekijk de pagina op een smal scherm. 

 Publiceer of werk de pagina bij. 

 Maak een screenshot van de gepubliceerde pagina met zichtbare URL. 

 

 🧠 Reflectie 

 

 Waarom is een alt-tekst niet hetzelfde als een bestandsnaam? 

 Welke afbeelding op jouw pagina is informatief en welke is eventueel decoratief? Leg uit. 

 Welke verandering heb je gedaan om jouw pagina toegankelijker te maken? 

 Welke bron of licentie heb je gebruikt voor jouw afbeeldingen? Als je AI hebt gebruikt: waarvoor en hoe heb je het resultaat gecontroleerd? 

 

 📤 Inleveren 

 

 04-media-jouwnaam.jpg : screenshot van de bijgewerkte Welkom-pagina met zichtbare URL en minimaal drie afbeeldingen. 

 04-reflectie-jouwnaam.pdf  of  04-reflectie-jouwnaam.txt : antwoorden op de reflectievragen, inclusief de beeldbronnen en eventuele AI-verantwoording. 

 

 05 Pagina’s, berichten en structuur 

 🎯 Leerdoelen 

 

 Je kunt het verschil uitleggen tussen een pagina en een bericht. 

 Je kunt berichten indelen met categorieën en tags. 

 Je kunt een logische URL-structuur kiezen. 

 Je kunt een statische homepage en een aparte blogpagina instellen. 

 Je kunt AI gebruiken om een sitestructuur te toetsen, niet om deze blind over te nemen. 

 

 💡 Pagina’s versus berichten 

 In WordPress zijn  pagina’s  en  berichten  allebei inhoud, maar ze hebben een ander doel. 

 

 Pagina’s  gebruik je voor vaste informatie die niet vaak verandert, zoals Home, Over ons, Contact, Diensten en Privacy. 

 Berichten  gebruik je voor actuele of terugkerende inhoud, zoals nieuws, blogartikelen, updates en evenementen. Berichten hebben een datum en worden meestal van nieuw naar oud getoond. 

 

 Een eenvoudige vuistregel: zou je de inhoud later in een overzicht met nieuwsartikelen willen tonen? Kies dan een bericht. Is het een vaste plek in je website? Kies dan een pagina. 

 💡 Categorieën en tags 

 Je kunt berichten organiseren met  categorieën  en  tags . Daarmee kunnen bezoekers en zoekmachines beter begrijpen waar een bericht over gaat. 

 

 Categorieën  zijn brede hoofdonderwerpen. Voor een vakantiepark kunnen dat bijvoorbeeld  Nieuws ,  Activiteiten  en  Aanbiedingen  zijn. 

 Tags  zijn specifiekere trefwoorden die berichten met elkaar verbinden, bijvoorbeeld  wandelroute ,  zomervakantie  of  hond toegestaan . 

 

 Gebruik categorieën en tags alleen wanneer ze de bezoeker helpen. Maak niet voor elk bericht een nieuwe categorie of een lange lijst met bijna gelijke tags. 

 💡 Permalinks: duidelijke webadressen 

 Een  permalink  is de vaste URL van een pagina of bericht. Kies URL’s die kort, leesbaar en beschrijvend zijn. Een URL als  /openingstijden/  is duidelijker dan  /?p=123 . 

 Je stelt de algemene structuur in via  Instellingen → Permalinks . Kies in deze cursus de optie  Berichtnaam , tenzij je docent een andere afspraak maakt. Pas een bestaande URL niet zomaar aan nadat een website live staat: externe links kunnen dan breken. 

 💡 Homepage en blogpagina instellen 

 Een nieuwe WordPress-installatie toont vaak de meest recente berichten op de homepage. Voor veel organisaties is een vaste welkomstpagina handiger. Je kunt dan een aparte pagina instellen als homepage en een tweede, lege pagina aanwijzen als berichtenpagina. 

 

 Maak een pagina met de titel  Home . 

 Maak een tweede pagina met de titel  Nieuws . Je hoeft daar geen inhoud in te zetten; WordPress toont hier automatisch je berichten. 

 Ga naar  Instellingen → Lezen . 

 Kies bij  Je homepage toont  voor  Een statische pagina . 

 Kies  Home  als homepage en  Nieuws  als berichtenpagina. 

 Klik op  Wijzigingen opslaan . 

 

 🤖 AI gebruiken om je sitestructuur te toetsen 

 AI kan ideeën geven voor een sitemap, categorieën of duidelijke paginatitels. Bepaal zelf wat logisch is voor jouw doelgroep en opdracht. Controleer ook of elk voorstel echt nodig is; een kleine website met te veel pagina’s of categorieën wordt juist onduidelijk. 

 Voorbeeldprompt: 

 

 Ik maak een kleine WordPress-site voor een fictief vakantiepark. De doelgroep bestaat uit gezinnen die een vakantiehuis zoeken. Ik heb de pagina’s Home, Over het park, Woningtypes, Nieuws en Contact. Beoordeel of deze structuur logisch is en noem maximaal twee ontbrekende pagina’s, met een korte reden. Gebruik geen fictieve feiten of prijzen. 

 

 🛠️ Opdracht – Geef jouw website een logische structuur 

 

 Maak de pagina  Home . Je mag de Welkom-pagina uit stap 3 hernoemen of als basis gebruiken. 

 Maak een lege pagina met de titel  Nieuws . 

 Maak minimaal twee berichten. Geef elk bericht een titel, korte inhoud en een passende uitgelichte afbeelding. 

 Maak minimaal twee categorieën aan en deel beide berichten in. 

 Voeg aan elk bericht één tot drie relevante tags toe. 

 Stel via  Instellingen → Permalinks  de structuur  Berichtnaam  in. 

 Stel via  Instellingen → Lezen  de pagina Home in als statische homepage en Nieuws als berichtenpagina. 

 Controleer in de frontend of de homepage en het nieuwsoverzicht goed werken. 

 

 🧠 Reflectie 

 

 Waarom is een Contact-pagina meestal een pagina en geen bericht? 

 Wat is het verschil tussen een categorie en een tag? 

 Waarom zijn duidelijke en stabiele URL’s belangrijk? 

 Als je AI hebt gebruikt: welk advies heb je wel of niet toegepast, en waarom? 

 

 📤 Inleveren 

 

 05-home-jouwnaam.jpg : screenshot van de homepage met zichtbare URL. 

 05-nieuws-jouwnaam.jpg : screenshot van de berichtenpagina met minimaal twee berichten en zichtbare URL. 

 05-reflectie-jouwnaam.pdf  of  05-reflectie-jouwnaam.txt : antwoorden op de reflectievragen, inclusief eventuele AI-verantwoording. 

 

 06 Thema en vormgeving 

 🎯 Leerdoelen 

 

 Je kunt uitleggen wat een WordPress-thema bepaalt. 

 Je kunt een thema beoordelen, installeren, activeren en testen. 

 Je kunt de Site Editor gebruiken met een block theme. 

 Je weet wanneer een klassiek thema de Customizer gebruikt. 

 Je kunt een eenvoudige, consistente huisstijl toepassen. 

 

 💡 Uitleg: wat is een thema? 

 Een  thema  bepaalt het uiterlijk en de basislay-out van je WordPress-site: kleuren, lettertypen, afstanden, header, footer en de manier waarop pagina’s en berichten worden weergegeven. De inhoud van je pagina’s en berichten blijft normaal gesproken bestaan als je van thema wisselt, maar de weergave kan sterk veranderen. 

 Kies een thema niet alleen omdat het er mooi uitziet in een voorbeeld. Controleer of het actief wordt onderhouden, geschikt is voor jouw doel, goed werkt op mobiel en voldoende mogelijkheden biedt zonder onnodige extra plugins. 

 💡 Block themes en klassieke thema’s 

 WordPress kent grofweg twee soorten thema’s. Welke menu’s jij ziet, hangt af van het actieve thema. 

 

 Block theme : gebruikt blokken voor de hele site, dus ook voor header, footer en navigatie. Je bewerkt dit via  Weergave → Editor , de  Site Editor . 

 Klassiek thema : gebruikt meestal  Weergave → Customizer , een aparte menu-pagina voor navigatie en soms widgets. 

 

 In deze cursus gebruiken we bij voorkeur een  block theme , omdat dit de huidige WordPress-werkwijze is. De Site Editor is alleen beschikbaar wanneer een block theme actief is. Bij een klassiek thema kan de Customizer beschikbaar zijn, maar niet elk thema heeft dezelfde instellingen. [ WordPress-documentatie: Site Editor ] 

 💡 Werken met de Site Editor 

 Ga naar  Weergave → Editor . In de Site Editor kun je onder andere deze onderdelen bewerken: 

 

 Navigatie : de links waarmee bezoekers door je site gaan. 

 Stijlen : kleuren, typografie en lay-out voor de hele site. 

 Pagina’s : pagina-inhoud bekijken en bewerken. 

 Templates : de lay-out voor bijvoorbeeld berichten, archieven en de 404-pagina. 

 Patronen : herbruikbare blokcombinaties en template-onderdelen, zoals header en footer. 

 

 Let op:  een wijziging in de header of footer geldt vaak voor de hele website. Controleer daarom na iedere grote wijziging meerdere pagina’s. 

 🎨 Een eenvoudige huisstijl 

 Een huisstijl zorgt voor herkenbaarheid. Kies een klein en bewust palet: bijvoorbeeld één hoofdkleur, één accentkleur en neutrale kleuren voor achtergrond en tekst. Gebruik maximaal twee lettertypen en zorg dat gewone tekst goed leesbaar blijft. 

 

 Gebruik kleuren consequent voor dezelfde functie, bijvoorbeeld één kleur voor knoppen. 

 Gebruik geen tekst die te klein is of te weinig contrast heeft. 

 Gebruik een logo alleen als het leesbaar blijft op mobiel. 

 Pas het ontwerp aan de doelgroep en inhoud aan, niet alleen aan je persoonlijke smaak. 

 

 🤖 AI gebruiken voor huisstijlideeën 

 AI kan voorstellen doen voor een kleurpalet, tone of voice of een korte ontwerpcheck. Gebruik zulke voorstellen als startpunt. Controleer zelf contrast, leesbaarheid, auteursrecht en of de stijl bij de opdracht past. Laat AI geen bestaand merk of logo kopiëren. 

 Voorbeeldprompt: 

 

 Ik ontwerp een rustige WordPress-site voor een fictief vakantiepark voor gezinnen. Stel een toegankelijk kleurpalet voor met een hoofdkleur, accentkleur, achtergrondkleur en tekstkleur. Geef de hex-codes en leg kort uit waarvoor elke kleur bedoeld is. Vermijd kleurcombinaties met laag contrast; ik controleer het contrast zelf. 

 

 🛠️ Opdracht – Geef jouw site een eigen vormgeving 

 

 Ga naar  Weergave → Thema’s  en bekijk de beschikbare thema’s. 

 Installeer en activeer een gratis block theme uit de officiële WordPress-themabibliotheek. 

 Open  Weergave → Editor . Zie je geen Editor? Controleer of je thema een block theme is. Gebruik anders de Customizer en noteer welk soort thema je gebruikt. 

 Pas in  Stijlen  minimaal drie onderdelen aan: bijvoorbeeld kleuren, typografie en lay-out. 

 Voeg een sitetitel en eventueel een eigen logo toe. Gebruik geen logo of beeld van een bestaand merk zonder toestemming. 

 Pas de header of footer aan met minimaal één bruikbare wijziging, bijvoorbeeld een duidelijke sitetitel, contactlink of copyrighttekst. 

 Controleer de homepage, een bericht en de Welkom-pagina op desktop en mobiel. 

 Maak een screenshot van de homepage met zichtbare URL. 

 

 🧠 Reflectie 

 

 Wat is het verschil tussen de inhoud van een pagina en de vormgeving die een thema bepaalt? 

 Werk jij met een block theme of een klassiek thema? Waaraan zie je dat? 

 Welke drie vormgevingskeuzes heb je gemaakt en waarom passen die bij jouw website? 

 Hoe heb je gecontroleerd dat de vormgeving ook voor mobiele bezoekers leesbaar is? 

 

 📤 Inleveren 

 

 06-vormgeving-jouwnaam.jpg : screenshot van jouw aangepaste homepage met zichtbare URL. 

 06-reflectie-jouwnaam.pdf  of  06-reflectie-jouwnaam.txt : antwoorden op de reflectievragen, inclusief eventuele AI-verantwoording. 

 

 07 Navigatie en gebruikerservaring 

 🎯 Leerdoelen 

 

 Je kunt een duidelijk hoofdmenu maken en aanpassen. 

 Je kunt interne en externe links correct gebruiken. 

 Je kunt een menu logisch indelen voor bezoekers. 

 Je kunt de navigatie op desktop en mobiel testen. 

 Je kunt feedback van een gebruiker verzamelen en toepassen. 

 

 💡 Uitleg: goede navigatie 

 Navigatie helpt bezoekers snel vinden wat zij zoeken. Een goed menu is kort, begrijpelijk en op elke pagina op dezelfde plek te vinden. Gebruik woorden die bezoekers herkennen, zoals  Home ,  Woningtypes ,  Nieuws  en  Contact . 

 Voor een kleine website zijn ongeveer vier tot zes hoofdlinks vaak genoeg. Plaats minder belangrijke links, zoals Privacy of Cookies, meestal in de footer. 

 Interne en externe links 

 

 Interne link : verwijst naar een andere pagina binnen jouw eigen website. 

 Externe link : verwijst naar een andere website. 

 

 Gebruik een beschrijvende linktekst. Schrijf bijvoorbeeld  Bekijk onze woningtypes  in plaats van  Klik hier . Bij een externe link is het meestal prettig als de bezoeker kan zien dat hij of zij naar een andere website gaat. 

 💡 Menu maken met een block theme 

 Bij een block theme beheer je de navigatie meestal via  Weergave → Editor → Navigatie  of door het navigatieblok in de header te bewerken. 

 

 Ga naar  Weergave → Editor . 

 Kies  Navigatie , of open de header bij  Patronen . 

 Maak een nieuw menu of wijzig het bestaande menu. 

 Voeg links naar jouw belangrijkste pagina’s toe. 

 Sleep links om de volgorde te wijzigen. Maak alleen een submenu wanneer dat echt helpt. 

 Sla de wijzigingen op en controleer de website in de frontend. 

 

 Gebruik je een klassiek thema? Dan vind je dit meestal via  Weergave → Menu’s  of in de  Customizer . De namen en plekken kunnen per thema verschillen. 

 📱 Testen op mobiel 

 Op een telefoon verandert een hoofdmenu meestal in een knop met een icoon. Controleer daarom niet alleen of het menu zichtbaar is, maar ook of je het met een duim kunt bedienen. 

 

 Werkt het menu op een klein scherm? 

 Zijn alle belangrijkste pagina’s bereikbaar? 

 Zijn de menu-items kort genoeg en niet afgekapt? 

 Zijn links en knoppen goed aanklikbaar? 

 Komt een bezoeker binnen twee klikken bij Contact of de belangrijkste actie? 

 

 🤖 AI gebruiken als kritische meedenker 

 AI kan je helpen om een menustructuur te beoordelen vanuit het perspectief van een bezoeker. Vraag om feedback, maar neem geen voorstel automatisch over. Test het voorstel altijd zelf of met een klasgenoot. 

 Voorbeeldprompt: 

 

 Ik maak een website voor een fictief vakantiepark. Mijn hoofdmenu is: Home, Over ons, Woningtypes, Nieuws, Contact, Privacy. Beoordeel dit menu voor gezinnen die een vakantiehuis willen boeken. Noem maximaal drie verbeterpunten en leg kort uit. Verzin geen extra bedrijfsinformatie. 

 

 🛠️ Opdracht – Maak en test jouw navigatie 

 

 Maak een hoofdmenu met minimaal vier en maximaal zes belangrijke pagina’s van jouw website. 

 Zorg dat  Home ,  Nieuws  en  Contact  vanuit het hoofdmenu bereikbaar zijn. 

 Voeg in de footer een link toe naar een pagina of tijdelijk concept met de titel  Privacy . 

 Voeg één externe link toe die relevant is voor jouw fictieve organisatie. Geef de link een duidelijke tekst. 

 Maak alleen een submenu als je minimaal twee onderliggende pagina’s hebt die bij één hoofdonderwerp horen. 

 Test het menu op desktop én in een smal browservenster of op je telefoon. 

 Laat één klasgenoot of andere tester een taak uitvoeren, bijvoorbeeld: “Zoek de contactpagina” of “Vind de nieuwsberichten”. Noteer wat goed ging en wat je hebt aangepast. 

 Maak een screenshot waarop het hoofdmenu zichtbaar is. 

 

 🧠 Reflectie 

 

 Waarom staan niet alle links in het hoofdmenu? 

 Wat is het verschil tussen een interne en externe link? 

 Welk resultaat kwam uit jouw gebruikerstest en welke verbetering heb je gedaan? 

 Als je AI hebt gebruikt: welke suggestie heb je wel of niet toegepast, en waarom? 

 

 📤 Inleveren 

 

 07-navigatie-jouwnaam.jpg : screenshot van jouw website met zichtbaar hoofdmenu en zichtbare URL. 

 07-gebruikerstest-jouwnaam.pdf  of  07-gebruikerstest-jouwnaam.txt : de uitgevoerde taak, het resultaat, jouw aanpassing en de reflectievragen. 

 

 08 Plugins en functionaliteit 

 🎯 Leerdoelen 

 

 Je kunt uitleggen wat een WordPress-plugin is. 

 Je kunt een plugin kritisch beoordelen vóór je hem installeert. 

 Je kunt een plugin installeren, activeren, instellen en testen. 

 Je begrijpt waarom te veel of verouderde plugins risico’s geven. 

 Je kunt de keuze voor een plugin onderbouwen. 

 

 💡 Uitleg: wat is een plugin? 

 Een  plugin  is een uitbreiding die extra functies toevoegt aan WordPress. Voorbeelden zijn een contactformulier, spambeveiliging, een fotogalerij, caching, SEO-hulp of een webwinkel. 

 Een thema bepaalt vooral  hoe  een website eruitziet. Een plugin bepaalt vooral  wat  een website extra kan doen. Je kunt meerdere plugins tegelijk actief hebben, maar iedere plugin moet worden onderhouden en kan invloed hebben op snelheid, privacy en veiligheid. 

 🔎 Een plugin verantwoord kiezen 

 Installeer niet zomaar de eerste plugin uit een zoekresultaat. Controleer vooraf: 

 

 Functie:  lost deze plugin een concreet probleem op dat jouw site echt heeft? 

 Onderhoud:  is de plugin recent bijgewerkt? 

 Compatibiliteit:  is de plugin getest met jouw WordPress-versie? 

 Reputatie:  hoeveel actieve installaties en beoordelingen heeft de plugin? Lees ook enkele recente beoordelingen. 

 Privacy:  verzamelt of verstuurt de plugin gegevens? Is dat nodig en duidelijk? 

 Alternatief:  kan WordPress of je thema dit al zonder extra plugin? 

 

 Gebruik bij voorkeur plugins uit de officiële WordPress-pluginbibliotheek of van een betrouwbare leverancier. Download geen ‘premium’-plugins van onbekende of illegale websites. 

 💡 Plugin installeren en testen 

 

 Ga in het dashboard naar  Plugins → Nieuwe plugin toevoegen . 

 Zoek naar de gekozen plugin en controleer de informatie uit de checklist. 

 Klik op  Nu installeren  en daarna op  Activeren . 

 Open de instellingen van de plugin en configureer alleen wat je begrijpt en nodig hebt. 

 Test de functie in de frontend. Een geïnstalleerde plugin is pas nuttig wanneer de functie ook daadwerkelijk werkt. 

 Gebruik je de plugin niet meer? Deactiveer én verwijder hem. Een inactieve, ongebruikte plugin moet je niet bewaren. 

 

 📝 Voorbeeld: contactformulier 

 Een contactformulier is een bruikbare uitbreiding voor veel websites. Denk vooraf na over welke gegevens echt nodig zijn. Voor een eenvoudige contactvraag zijn naam, e-mailadres en bericht vaak voldoende. Vraag niet om privégegevens die je niet nodig hebt. 

 Test een formulier altijd met een eigen testbericht. Controleer zowel of de bezoeker een duidelijke bevestiging krijgt als of de e-mail werkelijk aankomt. Gebruik voor een schoolopdracht geen echte persoonsgegevens van anderen. 

 🤖 AI gebruiken bij pluginonderzoek 

 AI kan helpen om een functiewens om te zetten in selectiecriteria of om instellingen uit te leggen. Laat AI geen plugin “goedkeuren” zonder dat jij zelf de officiële pluginpagina, recente updates en privacy-informatie controleert. 

 Voorbeeldprompt: 

 

 Ik heb voor een kleine fictieve WordPress-site een contactformulier nodig. Geef een checklist met maximaal zes punten waarmee ik plugins zelf kan vergelijken op functionaliteit, onderhoud, privacy en veiligheid. Noem geen specifieke plugins; ik controleer de officiële WordPress-pluginpagina’s zelf. 

 

 🛠️ Opdracht – Voeg nuttige functionaliteit toe 

 

 Kies één concrete behoefte voor jouw website: een contactformulier, galerie, spambeveiliging of een andere functie die nog niet in WordPress of je thema aanwezig is. 

 Vergelijk minimaal twee plugins uit de officiële WordPress-pluginbibliotheek met de checklist uit deze les. 

 Kies één plugin en noteer waarom deze het beste past. 

 Installeer en activeer de plugin. 

 Stel de plugin in en voeg de functionaliteit toe aan een passende pagina. 

 Test de functie in de frontend. Bij een formulier verstuur je een testbericht met verzonnen testgegevens. 

 Maak een screenshot van de werkende functie én een screenshot van de actieve plugin in het dashboard. 

 

 🧠 Reflectie 

 

 Welke functie heb je toegevoegd en waarom heeft jouw website die nodig? 

 Welke twee plugins heb je vergeleken en op welke criteria heb je gelet? 

 Hoe heb je getest dat de plugin werkt? 

 Wat is het risico van verouderde of ongebruikte plugins? 

 Als je AI hebt gebruikt: welke informatie heb je zelf gecontroleerd? 

 

 📤 Inleveren 

 

 08-plugin-dashboard-jouwnaam.jpg : screenshot waarop de gekozen plugin actief zichtbaar is. 

 08-plugin-werkt-jouwnaam.jpg : screenshot van de werkende functionaliteit in de frontend. 

 08-plugin-keuze-jouwnaam.pdf  of  08-plugin-keuze-jouwnaam.txt : vergelijking, keuze, testresultaat en antwoorden op de reflectievragen. 

 

 09 Beheer, veiligheid, privacy, SEO en performance 

 🎯 Leerdoelen 

 

 Je kunt uitleggen waarom updates en back-ups nodig zijn. 

 Je kunt basismaatregelen nemen voor een veilige WordPress-site. 

 Je begrijpt waarom een formulier alleen noodzakelijke persoonsgegevens mag vragen. 

 Je kunt basis-SEO toepassen zonder zoekwoorden te misbruiken. 

 Je kunt enkele oorzaken van een trage website herkennen. 

 

 🔐 Beheer: updates en back-ups 

 Een WordPress-site is nooit helemaal ‘klaar’. WordPress zelf, thema’s en plugins krijgen updates voor nieuwe functies, fouten en beveiliging. Controleer regelmatig  Dashboard → Updates . 

 Maak vóór een grotere update altijd een  back-up . Een bruikbare back-up bevat zowel de WordPress-bestanden als de database. Controleer ook waar de back-up staat en hoe je die kunt terugzetten. Een back-up die je niet kunt terugvinden of herstellen, helpt niet bij een probleem. 

 Werk bij voorkeur eerst lokaal of op een testomgeving en pas daarna de live website aan. WordPress adviseert updates en een back-up vóór je een update uitvoert. [ WordPress: Updating WordPress ] 

 Basisveiligheid 

 

 Gebruik een uniek, sterk wachtwoord en deel dit niet met anderen. 

 Geef gebruikers alleen de rechten die zij nodig hebben. 

 Verwijder ongebruikte plugins en thema’s. 

 Installeer alleen uitbreidingen uit betrouwbare bronnen. 

 Werk WordPress, plugins en thema’s bij en test na de update belangrijke functies. 

 Gebruik op een live site altijd HTTPS. 

 

 ⚖️ Privacy en formulieren 

 Een naam, e-mailadres, telefoonnummer en IP-adres kunnen persoonsgegevens zijn. Verzamel daarom alleen gegevens die je echt nodig hebt voor het doel van een formulier. Leg bezoekers in begrijpelijke taal uit welke gegevens je verwerkt, waarom je dat doet, hoe lang je ze bewaart en met wie je ze deelt. 

 Voor deze cursus gebruik je in formuliertests uitsluitend verzonnen testgegevens of je eigen schooltestadres. Zet geen echte persoonsgegevens van klasgenoten of klanten in een oefenomgeving. Een echte website heeft daarnaast een passende privacyverklaring nodig. De AVG is van toepassing zodra een organisatie persoonsgegevens verwerkt; raadpleeg bij twijfel de organisatie en de actuele informatie van de  Autoriteit Persoonsgegevens . 

 🔎 SEO: vindbaar én nuttig 

 SEO  staat voor zoekmachineoptimalisatie. Het doel is niet om zoekmachines te misleiden, maar om nuttige, duidelijke inhoud te maken die aansluit bij wat bezoekers zoeken. 

 

 Geef elke pagina een duidelijke, unieke titel. 

 Schrijf inhoud voor bezoekers, met logische koppen en korte alinea’s. 

 Gebruik beschrijvende interne links, bijvoorbeeld  Bekijk onze vakantiehuizen . 

 Gebruik relevante afbeeldingen met zinvolle alt-teksten. 

 Maak geen pagina’s vol herhaalde zoekwoorden. Dat is onprettig voor bezoekers en werkt tegen je. 

 

 Google gebruikt onder meer de inhoud rondom een afbeelding en de alt-tekst om te begrijpen waar de afbeelding over gaat. Schrijf daarom beschrijvend en in context. [ Google Search Central: afbeeldings-SEO ] 

 ⚡ Performance: een snelle website 

 Een snelle website is prettiger voor bezoekers en gebruikt minder data. Grote, ongecomprimeerde afbeeldingen en een grote hoeveelheid plugins kunnen een site onnodig traag maken. 

 

 Upload afbeeldingen op een passende afmeting en in een efficiënt formaat, zoals WebP of JPG. 

 Gebruik alleen noodzakelijke plugins. 

 Controleer na iedere nieuwe plugin of de website nog goed werkt en laadt. 

 Gebruik eventueel caching op een live site, maar test altijd of wijzigingen zichtbaar blijven. 

 

 🤖 AI verantwoord gebruiken bij beheer 

 AI kan een onderhoudschecklist uitleggen of helpen een foutmelding te analyseren. Deel nooit wachtwoorden, databasegegevens, klantgegevens, back-ups of volledige configuratiebestanden in een AI-chat. Controleer technische adviezen altijd met officiële documentatie of je docent, vooral wanneer een advies bestanden, database of beveiligingsinstellingen verandert. 

 Voorbeeldprompt: 

 

 Ik beheer een kleine WordPress-site. Maak een maandelijkse onderhoudschecklist met maximaal acht veilige controles voor updates, back-ups, links en formulierwerking. Noem geen betaalde plugins en vraag mij om eerst een back-up te maken voordat ik grote wijzigingen uitvoer. 

 

 🛠️ Opdracht – Maak jouw site klaar voor beheer 

 

 Ga naar  Dashboard → Updates  en controleer of WordPress, jouw thema en actieve plugins bijgewerkt zijn. Voer in deze oefenomgeving alleen updates uit als je docent dat toestaat. 

 Maak een onderhoudschecklist met minimaal zes punten, waaronder updates, back-up, formulier, links en afbeeldingen. 

 Controleer jouw contactformulier uit stap 8. Verwijder velden die niet noodzakelijk zijn voor een eenvoudige contactvraag. 

 Maak een pagina met de titel  Privacy . Zet hierin een kort oefenconcept: welke gegevens een formulier vraagt, waarom en hoe een bezoeker contact kan opnemen. Gebruik dit concept niet als juridisch document voor een echte organisatie. 

 Verbeter minimaal twee SEO-punten op jouw site, bijvoorbeeld paginatitels, koppen, linkteksten of alt-teksten. 

 Controleer jouw mediabibliotheek en vervang of verwijder minimaal één te grote, ongebruikte of onduidelijke afbeelding. 

 Test in de frontend: homepage, nieuws, menu, formulier en Privacy-pagina. 

 

 🧠 Reflectie 

 

 Waarom moet een back-up uit bestanden én een database bestaan? 

 Welke persoonsgegevens vraagt jouw formulier en waarom zijn die nodig? 

 Welke twee SEO-verbeteringen heb je aangebracht? 

 Welke actie kan jouw website sneller maken? 

 Als je AI hebt gebruikt: welke gegevens heb je bewust niet gedeeld en hoe heb je een advies gecontroleerd? 

 

 📤 Inleveren 

 

 09-privacy-jouwnaam.jpg : screenshot van de Privacy-pagina met zichtbare URL. 

 09-checklist-jouwnaam.pdf  of  09-checklist-jouwnaam.txt : jouw onderhoudschecklist en antwoorden op de reflectievragen. 

 

 10 Eindproject en livegang 

 🎯 Leerdoelen 

 

 Je kunt een WordPress-website bouwen op basis van een opdrachtgeverbrief. 

 Je kunt inhoud, vormgeving, navigatie en functionaliteit als één geheel opleveren. 

 Je kunt een lokale WordPress-site veilig voorbereiden op een live server. 

 Je kunt de website testen op inhoud, mobiel gebruik, toegankelijkheid en formulieren. 

 Je kunt jouw keuzes toelichten in een korte presentatie. 

 

 📋 Opdrachtgeverbrief 

 Je bouwt een website voor het fictieve vakantiepark  De Eekhoorn . Het park verhuurt vakantiehuizen aan gezinnen die rust, natuur en activiteiten zoeken. De opdrachtgever wil een rustige, betrouwbare en gebruiksvriendelijke website waarop bezoekers informatie kunnen vinden en een reserveringsaanvraag kunnen doen. 

 Werk met eigen, rechtenvrij of door de docent aangeleverd materiaal. Gebruik geen echte klantgegevens, echte reserveringen of persoonsgegevens van anderen in je testsite. 

 🛠️ Eisen voor de website 

 📄 Inhoud 

 

 Home : duidelijke introductie, aantrekkelijke afbeelding, korte uitleg en een duidelijke vervolgstap. 

 Over het park : informatie over ligging, faciliteiten en activiteiten. 

 Woningtypes : minimaal drie typen vakantiehuizen met beschrijving, kenmerken en afbeeldingen. 

 Nieuws : minimaal twee berichten met categorieën en tags. 

 Contact / reserveringsaanvraag : een getest formulier met alleen noodzakelijke velden. 

 Privacy : een eenvoudig oefenconcept dat uitlegt welke formuliergegevens worden gevraagd en waarom. Dit is geen juridisch document voor een echte organisatie. 

 

 🎨 Ontwerp en toegankelijkheid 

 

 Gebruik een passend, betrouwbaar onderhouden WordPress-thema. 

 Pas een consistente huisstijl toe: kleuren, lettertypen en knoppen passen bij elkaar. 

 Gebruik informatieve afbeeldingen met alt-teksten. 

 Gebruik een logische koppenstructuur en beschrijvende linkteksten. 

 Zorg dat de site leesbaar en bruikbaar is op mobiel en desktop. 

 

 ⚙️ Functionaliteit en beheer 

 

 Maak een hoofdmenu met maximaal zes hoofdlinks en een footer met een Privacy-link. 

 Gebruik minimaal één nuttige plugin die je kritisch hebt gekozen en getest. 

 Gebruik duidelijke, leesbare permalinks. 

 Controleer of WordPress, actieve plugins en het actieve thema bijgewerkt zijn, voor zover de docent dit toestaat. 

 Maak een back-up van bestanden én database vóór de livegang. 

 

 🧭 Werkwijze 

 

 Plan:  maak een eenvoudige sitemap met de verplichte pagina’s. Bepaal daarna jouw huisstijl en verzamel toegestane beelden. 

 Bouw lokaal:  werk eerst in jouw lokale WordPress-installatie. Maak en test alle pagina’s, berichten, menu’s en plugins. 

 Laat testen:  vraag minimaal één tester om twee taken uit te voeren, bijvoorbeeld “vind een woningtype” en “stuur een reserveringsaanvraag”. Verwerk minimaal één verbetering. 

 Maak back-up:  maak een kopie van zowel de WordPress-bestanden als de database. Noteer waar de back-up staat. 

 Zet live:  verplaats pas na toestemming van de docent de bestanden en database naar de aangewezen server of Plesk-omgeving. 

 Test live:  controleer de volledige website opnieuw via de live URL. 

 

 🌐 Livegang: van lokaal naar live 

 Je bouwt de website dus  niet opnieuw  op de server. Je verhuist de bestaande lokale website: de WordPress-bestanden én de database. 

 

 Maak op de server een domein of subdomein, een database en een databasegebruiker aan. 

 Upload de WordPress-bestanden naar de juiste webmap. 

 Importeer de lokale database in de nieuwe serverdatabase. 

 Pas de databasegegevens in  wp-config.php  aan naar die van de server. 

 Vervang de lokale URL, bijvoorbeeld  http://localhost/wp-jouwnaam , veilig door de live URL. Gebruik hiervoor een migratietool of WP-CLI; voer geen gewone zoek-en-vervangactie uit in phpMyAdmin, omdat WordPress-instellingen beschadigd kunnen raken. 

 Log in op de live site en sla via  Instellingen → Permalinks  de permalinkinstellingen eenmaal opnieuw op. 

 Schakel HTTPS in als de server dit aanbiedt en test de live website. 

 

 De officiële WordPress-handleiding waarschuwt dat een gewone database-zoek/vervangactie problemen kan veroorzaken met geserialiseerde gegevens. Gebruik daarom een veilige migratiemethode en maak eerst een back-up. [ WordPress: site migreren ] 

 🤖 AI in het eindproject 

 AI mag je gebruiken voor brainstormen, taalcontrole, feedback op structuur, een testplan of hulp bij een foutmelding. Jij blijft verantwoordelijk voor de inhoud, bronnen, toegankelijkheid, privacy en technische werking. Vermeld in je verantwoording kort waarvoor je AI hebt gebruikt en welke uitkomst je zelf hebt aangepast of gecontroleerd. 

 Deel nooit wachtwoorden, databasegegevens, FTP-inloggegevens, back-upbestanden of persoonsgegevens met een AI-tool. 

 ✅ Eindcontrole vóór je inlevert 

 

 Werken alle pagina’s, menu’s, interne links en externe links? 

 Werkt het formulier met testgegevens en is de bevestiging duidelijk? 

 Zijn de belangrijkste pagina’s goed leesbaar op mobiel? 

 Hebben informatieve afbeeldingen alt-teksten en een toegestane bron? 

 Is de Privacy-pagina bereikbaar via de footer? 

 Zijn er geen wachtwoorden, echte persoonsgegevens of testinhoud zichtbaar? 

 Heb je een back-up van bestanden én database? 

 Werkt de website via HTTPS op de live URL, indien livegang onderdeel is van jouw opdracht? 

 

 📤 Inleveren 

 

 De URL van jouw live website. Als livegang niet mogelijk is, lever je de lokale URL plus een korte toelichting in volgens de afspraak met je docent. 

 10-eindproject-jouwnaam.pdf : sitemap, gebruikte beeldbronnen, plugin-keuze, resultaat van de gebruikerstest, onderhoudschecklist en AI-verantwoording. 

 Een korte presentatie waarin je de website laat zien en jouw belangrijkste keuzes toelicht. 

 

 📊 Beoordeling 

 

 Inhoud en structuur:  pagina’s, berichten en navigatie zijn compleet en logisch. 

 Vormgeving en toegankelijkheid:  de site is consistent, leesbaar en bruikbaar op mobiel. 

 Functionaliteit:  de gekozen plugin en het formulier werken aantoonbaar. 

 Beheer en professionaliteit:  privacy, updates, back-up en testcontrole zijn aantoonbaar meegenomen. 

 Onderbouwing: je kunt jouw keuzes, testresultaten en AI-gebruik helder uitleggen. 

 

 --