Webbouwers VO - Basislesbrieven

Webbouwers VO | Basisreeks

Van website naar webapp

Vier lesbrieven van 50 minuten. Voor beginnende programmeurs in het VO. Leerlingen bouwen, voorspellen, testen en leggen uit wat hun code doet.

De leerroute

Wat heb je nodig?

Een computer met browser, een eigen Webbouwers VO-project en de groepslink van de docent. Voor de vrije PHP-proeven in les 3 en 4 moet de aparte PHP-werkplaats door de beheerder zijn aangesloten.

Zo gebruik je deze bundel

Elke les heeft twee leerlingpagina’s. Achterin staan docentnotities, antwoorden en een presentatiescript. Werk met bijnamen en fictieve inhoud: gepubliceerde leerlingprojecten zijn via een link openbaar.

Eerst begrijpen, dan uitbreiden

Voorspel wat er gebeurt. Verander één ding. Test het resultaat. Beschrijf daarna in je eigen woorden waarom het werkt. Een werkend programma is pas het begin: je uitleg telt mee.

Voorbereiden en begeleiden

Voor de docent

Vooraf klaarzetten

Lesorganisatie

Werk in tweetallen met twee rollen: de bouwer typt, de uitlegger voorspelt en controleert. Wissel halverwege. Laat ieder tweetal kort één bewuste wijziging demonstreren.

Een fout is onderzoeksmateriaal

Laat leerlingen eerst lezen: wat staat er precies, bij welke regel, en wat heb ik als laatste veranderd? Herstel één ding tegelijk. Laat ze hun fout en oplossing vastleggen.

Wat draait waar?

Als de vrije PHP-werkplaats nog niet gereed is

Les 1 en 2 en de vaste PHP-lessen werken wel. Les 3 en 4 over zelfgeschreven PHP wachten tot de aparte werkplaats aangesloten en getest is. Presenteer die uitvoering niet als actief voordat dit is gecontroleerd.

Leerling | 50 minuten | 1 van 2

Les 1 - Geef je verhaal een vorm

Doel

Je kunt uitleggen wat HTML en CSS doen en een kleine projectpagina veranderen.

Start - 5 minuten

Open een blanco VO-project. Bedenk een fictief onderwerp: een planeet, hobby, boek of museum. Gebruik een bijnaam als je iets over jezelf schrijft.

Onderzoek - 10 minuten

Bekijk de HTML hieronder. Voorspel welke tekst de grootste kop wordt en welke onderdelen een lijst vormen. Plaats de code in het HTML-vak.

<!-- HTML beschrijft de onderdelen. -->
<main>
  <h1>Mijn ontdekkingen</h1>
  <p>Vandaag onderzoek ik de ruimte.</p>
  <h2>Dit wil ik weten</h2>
  <ul>
    <li>Waarom lijkt Mars rood?</li>
    <li>Hoe ver staat de maan?</li>
  </ul>
</main>

Bouwen - 15 minuten

Leerling | 2 van 2

Les 1 - Test en verklaar

Vormgeven - 10 minuten

Plaats deze code in het CSS-vak. Verander daarna twee kleuren en één afstand. Klik steeds op Bekijk resultaat.

/* CSS bepaalt de vormgeving. */
body {
  font-family: system-ui, sans-serif;
  background: #eef3ff;
  color: #173451;
  padding: 2rem;
}
main {
  background: white;
  padding: 2rem;
  border-radius: 18px;
}
h1 { color: #245dd8; }

Laat zien - 5 minuten

Laat je partner een regel aanwijzen. Vertel welk zichtbaar onderdeel daarbij hoort. Laat ook zien wat er verandert als je die regel aanpast.

Afsluiten - 5 minuten

Klaar?

Geef de tussenkop een eigen kleur. Voeg een CSS-comment toe dat uitlegt waarom je die kleur hebt gekozen. Houd de tekst goed leesbaar.

Inleveren

Je projectpagina, één eigen comment en een uitleg van drie zinnen.

Leerling | 50 minuten | 1 van 2

Les 2 - Laat een knop reageren

Doel

Je kunt een klikgebeurtenis, een variabele en een voorwaarde herkennen en aanpassen.

Voorspellen - 10 minuten

Open het VO-voorbeeld met de ruimtequiz. Klik nog niet. Zoek in JavaScript waar de score wordt onthouden. Zoek daarna de voorwaarde die bepaalt of een antwoord goed is.

Probeer - 10 minuten

Vergelijk de code

let punten = 0;

knoppen.forEach(knop =>
  knop.addEventListener('click', () => {
    const goed = knop.dataset.goed === 'ja';
    if (goed) punten += 1;
    document.getElementById('score').textContent = punten;
    knoppen.forEach(k => k.disabled = true);
  })
);

Dit fragment hoort bij het volledige ruimtequiz-voorbeeld. De variabele knoppen wordt daar eerder gemaakt.

Bouwen - 15 minuten

Maak een andere vraag met drie antwoorden. Geef precies één antwoord data-goed="ja". Verander de feedbackteksten. Laat een goed antwoord twee punten opleveren.

Leerling | 2 van 2

Les 2 - Je programma uitleggen

Onderzoek - 5 minuten

Testplan - 5 minuten

Maak een tabel met vier proeven: fout antwoord, goed antwoord, tweede klik en opnieuw starten. Schrijf eerst de verwachte uitkomst op. Noteer daarna de echte uitkomst.

Uitleg - 5 minuten

Voeg twee JavaScript-comments toe. Leg met eigen woorden uit wat de klikfunctie doet en waarom de knoppen na het antwoord uitgaan.

Inleveren

Klaar?

Bedenk hoe je een tweede vraag zou toevoegen. Teken eerst de stappen op papier: wanneer verandert de vraag, wanneer worden knoppen weer actief en welke waarde moet de score behouden?

Reflectie

Een knop kan zichtbaar zijn zonder iets te doen. Welke verbinding maakt JavaScript tussen de HTML en jouw programma?

Leerling | 50 minuten | 1 van 2

Les 3 - Vraag het aan PHP

Doel

Je schrijft zelf PHP die invoer leest, controleert en een antwoord teruggeeft. Je kunt het verschil met JavaScript in de browser uitleggen.

Start - 5 minuten

Open Zelf PHP schrijven. Laad het voorbeeld Tekst en variabelen. In het invoervak heet een veld naam. Geef het een fictieve waarde.

Voorspellen - 10 minuten

Voorspel de tekst die PHP terugstuurt. Verander daarna alleen de invoer en voer de code uit. Verander vervolgens de begroeting in de code.

<?php
$naam = $_POST['naam'] ?? 'Wereld';

echo '<h1>Hallo, '
   . htmlspecialchars($naam, ENT_QUOTES, 'UTF-8')
   . '!</h1>';

Onderzoek

Verder - 10 minuten

Laad het voorbeeld Rekenen en een voorwaarde. Maak twee invoervelden: goed met waarde 3 en totaal met waarde 5. Voorspel het percentage vóór je de code uitvoert.

Leerling | 2 van 2

Les 3 - Controleer je invoer

<?php
$goed = (int) ($_POST['goed'] ?? 0);
$totaal = (int) ($_POST['totaal'] ?? 0);

if ($totaal < 1 || $goed < 0 || $goed > $totaal) {
    echo 'Controleer je invoer.';
} else {
    $percentage = round($goed / $totaal * 100);
    echo 'Je hebt ' . $percentage . '% goed.';
}

Bouwen en testen - 15 minuten

Afsluiten - 10 minuten

Kopieer een zelfgekozen quizscore handmatig naar de PHP-invoervelden. Leg uit: JavaScript reageerde in jouw browser; nu is invoer verstuurd en verwerkt in de aparte PHP-werkplaats. De quiz en de PHP-proef zijn in deze les nog losse onderdelen.

Inleveren

Je PHP-code, vijf testgevallen en een uitleg van waar PHP wordt uitgevoerd. Noem ook waarom je controleert voordat je deelt.

Leerling | 50 minuten | 1 van 2

Les 4 - Van lijst naar opgeslagen tekst

Doel

Je gebruikt een array en een foreach-lus en onderzoekt hoe gegevens als JSON kunnen worden geschreven en teruggelezen.

Voorspellen - 10 minuten

Laad het PHP-voorbeeld Een lijst met een lus. Voorspel hoeveel lijstpunten de uitvoer bevat. Voeg daarna twee planeten toe.

<?php
$planeten = ['Mercurius', 'Venus', 'Aarde', 'Mars'];

echo '<ul>';
foreach ($planeten as $planeet) {
    echo '<li>'
       . htmlspecialchars($planeet, ENT_QUOTES, 'UTF-8')
       . '</li>';
}
echo '</ul>';

Onderzoek - 10 minuten

Bouwen - 10 minuten

Maak een eigen lijst met vier fictieve onderwerpen. Voeg boven de lus een comment toe die uitlegt wat de lus doet. Bekijk de tekstuitvoer en de HTML-weergave.

Leerling | 2 van 2

Les 4 - Schrijven en teruglezen

Proef - 10 minuten

Laad Tijdelijk schrijven en teruglezen. Maak het invoerveld bericht met een korte fictieve notitie.

<?php
$bericht = $_POST['bericht'] ?? 'Mijn eerste notitie';
$bestand = 'notitie.json';

file_put_contents(
    $bestand,
    json_encode(['bericht' => $bericht])
);

$terug = json_decode(file_get_contents($bestand), true);
echo htmlspecialchars($terug['bericht'], ENT_QUOTES, 'UTF-8');

Belangrijk onderscheid

Het bestand bestaat alleen tijdens deze ene proef. Iedere volgende proef krijgt weer een lege oefenmap. Jouw code blijft wel in je Webbouwers-project bewaard. Dit voorbeeld is dus nog geen blijvend gastenboek of scorebord.

Afsluiten - 10 minuten

Inleveren

Een werkende lijst, een tijdelijke JSON-proef en je uitleg over de levensduur van beide soorten opslag.

Antwoorden | Differentiatie

Docentnotities en beoordeling

Kernantwoorden

Beoordelen op drie vragen

Ondersteuning

Laat beginners eerst alleen tekst, kleuren en invoer wijzigen. Geef daarna één ontbrekende regel. Laat sterkere leerlingen randgevallen toevoegen, functies maken en uitleggen waarom invoercontrole nodig is.

Praktische grenzen van deze basisreeks

De eigen PHP draait in een aparte tijdelijke runner. Er zijn geen schoolbestanden, externe netwerkaanroepen of blijvende leerlingbestanden beschikbaar. De voorvertoning van PHP-HTML voert geen scripts uit. De basisreeks bouwt geen volledig gekoppelde browser-app met een blijvende database.

Demonstratiescript | circa 7 minuten

Presenteren aan VO-scholen

Vooraf

Controleer de aparte runner en schakel alleen voor de presentatie de vrije demo in als dat gewenst is. Probeer de voorbeelden zelf. Houd een blanco demo klaar.

0:00 - 1:00 | Het uitgangspunt

Open de centrale introductie. Vertel: leerlingen gaan van maken naar begrijpen. Toon kort het onderscheid tussen PO-blokken en de VO-codewerkplaats.

1:00 - 3:00 | JavaScript zichtbaar maken

Open de VO-ruimtequiz. Voer die uit, beantwoord de vraag en toon de score. Verander één knoptekst of kleur. Wijs de klikfunctie en een comment aan.

3:00 - 5:00 | Zelf PHP schrijven

Open Zelf PHP schrijven. Laad de begroeting, verander de invoer en voer uit. Toon tekst en HTML-uitvoer. Laad daarna de score en demonstreer 3 van 5: 60%.

5:00 - 6:00 | Een fout als leermoment

Verwijder bewust een puntkomma en lees de foutmelding. Herstel de fout. Leg uit dat leerlingcode in een aparte werkplaats draait en geen toegang tot de schoolomgeving krijgt.

6:00 - 7:00 | Van demo naar onderwijs

Toon de blanco template en de vier lesbrieven. Vertel dat elke school eigen groepen, accounts en leerlingprojecten krijgt. Rond af met het centrale aanvraagformulier.

Zeg erbij

Dit is een pilotopzet. De aparte runner moet per installatie worden aangesloten en gecontroleerd. Blijvende gegevensopslag en volledig gekoppelde PHP-webapps zijn vervolgstappen.