Docentenhandleiding
Praktische informatie voor docenten die deze cursus klassikaal willen inzetten: wat de site is, welke randvoorwaarden er zijn, en hoe je de lessen indeelt.
Wat is dit?
Een interactieve cursus fullstack-ontwikkeling met FastAPI: je leerlingen voegen een Python-back-end toe aan een website. Doelgroep: leerlingen die al wat Python, HTML en JavaScript kennen en willen leren hoe front-end en back-end samenwerken.
Per onderwerp staat er een minimale, werkende handler die je daarna uitbreidt met validatie, templates en een database. De nadruk ligt op het samenspel tussen verzoek (browser) en antwoord (server).
Deze cursus bouwt voort op Python en op HTML, CSS en JavaScript. Plan die eerst in als je leerlingen daar nog niet mee bekend zijn. Op het cursusoverzicht staat welke cursus waarop voortbouwt.
In de lessen zelf staat de voorkennis per les in een dichtgeklapt blok, zodat een leerling die vastloopt op een def of een <form> terug kan naar de uitleg zonder dat de les daarmee begint.
Technische randvoorwaarden
| Wat | Antwoord |
|---|---|
| Operating system | Windows, macOS of Linux |
| Oefenen | Veel voorbeelden draaien in de browser |
| Eigen project | Python 3 en een editor (VS Code) lokaal aanbevolen; wie wil kan er git naast gebruiken |
| Account | Niet nodig |
| Internet | Vereist — de site is online |
Didactische aanpak (PRIMM)
Elke les volgt hetzelfde vaste patroon — de PRIMM-methode — afgesloten met een troubleshooting-sectie:
- Predict — je leerling voorspelt wat een endpoint of stuk code doet.
- Run — je leerling draait het en controleert die voorspelling.
- Investigate — kleine experimenten met het verzoek of het antwoord.
- Modify — een opdracht die voortbouwt op de bestaande handler.
- Make — een vrijere opdracht waarin je leerling zelf een endpoint bouwt.
- Er gaat iets mis — veelvoorkomende fouten, met oorzaak en oplossing.
Tips en antwoorden staan in <details>-blokken. Laat je leerlingen eerst zelf proberen voordat ze openklikken.
Klassikaal gebruik & differentiatie
- Plenair starten: bespreek de Predict-vraag klassikaal, daarna werken je leerlingen zelfstandig door.
- Snelle leerlingen breiden een endpoint uit met extra validatie of een tweede route.
- Langzamere leerlingen mogen de Make-opdracht overslaan zonder dat de volgende les daarop bouwt.
- Beoordelen: Jouw eigen project is de eindopdracht, met zes eisen en vijf stappen. De nakijker op Project checken laat zien welke onderwerpen erin terugkomen — bedoeld als checklist, niet als cijfer.
Leerlijn
De lessen staan in de FastAPI-sidebar en bouwen op elkaar voort. Begin bij Installatie; de Cheatsheet en Er gaat iets mis zijn naslag.
Zes keer onderweg staat een diagram van de hele keten, browser links en server rechts, met per stap een link naar de les. Het begint kaal bij het eerste verzoek, direct na het eerste endpoint, en groeit mee. Bij één pagina, aan het eind van Pagina's tonen, komen de losse verzoeken voor CSS en afbeeldingen erbij. Bij één klik, aan het eind van het gastenboek, de database en de template; bij één formulier direct daarna de omleiding. Zonder herladen, aan het eind van het htmx-blok, wordt die omleiding een stuk HTML als antwoord; bij een sessie, aan het eind van Onthouden, komt de cookie erbij. Hoe een verzoek werkt bundelt ze bij het afronden met een tabel "waar hoort jouw code", handig bij het eigen project.
| Onderwerp | Leerdoel |
|---|---|
| Je eerste endpoint | Een API-route maken en aanroepen |
| Kijken wat de browser doet | Het tabblad Netwerk: verzoek, antwoord, statuscode en cache |
| GET vs POST | Verschil tussen data ophalen en versturen |
| HTML tonen & templates | Pagina's serveren en dynamisch vullen |
| Formulieren | Gebruikersinvoer verwerken |
| Database | Gegevens opslaan en ophalen met SQLite |
| Een lijst tonen | Opgeslagen records op een pagina zetten met een for-lus |
| Terug naar de lijst | Doorsturen na een POST (post/redirect/get) |
| Eén bericht tonen | Path-parameters en zelf een 404 sturen |
| Zonder herladen met htmx | Een knop die iets aan de server vraagt terwijl de pagina blijft staan |
| Wat kan htmx allemaal | Overzicht van recepten: formulier, verversen, vanzelf verversen, verwijderen, zoeken |
| JavaScript erbij | Code die in de browser draait in plaats van op de server |
| Console en Elementen | Uitvoer en fouten van JavaScript zien, en de pagina zoals de browser hem nu heeft |
| Server of browser? | Kiezen waar iets hoort, en waarom controles op de server moeten |
| Onthouden met een cookie | De browser iets laten onthouden tussen twee verzoeken |
| Sessies | Alleen een sessie-id bij de bezoeker, de gegevens op de server |
| Cookie of sessie? | Kiezen tussen de twee, en waarom je niet alles kunt geloven |
| Laat het aan anderen zien | De server openzetten voor het netwerk |
| Jouw eigen project | Eindopdracht: een complete applicatie in vijf stappen |
"Een lijst tonen" tot en met "Eén bericht tonen" maken samen het gastenboek af dat je leerlingen in de database-lessen bouwen. Tot en met "POST naar database" kunnen ze wel opslaan maar niet tonen; daarna hebben ze een werkende webapplicatie met een overzicht, een detailpagina en nette foutafhandeling.
De ontwikkelaarstools van de browser krijgen twee eigen lessen, zonder schermafbeeldingen: de lessen bouwen het paneel na met de Nederlandse en Engelse naam van elk tabblad naast elkaar. "Kijken wat de browser doet" komt direct na het eerste endpoint en leert het tabblad Netwerk: één verzoek, de statuscode, en de cache als reden waarom een wijziging niet doorkomt. Dat laatste is de vraag die je in de les het vaakst krijgt. "Console en Elementen" komt na "JavaScript erbij", als de terminal niets meer laat zien, en bereidt "Server of browser?" voor: wie in Elementen maxlength weghaalt, ziet daar wat de bezoeker kan.
Na het gastenboek komt het blok "Zonder herladen": de server doet het werk, maar de pagina blijft staan, omdat htmx het verzoek stuurt en het antwoord op zijn plek zet. De eerste les is bewust zo klein mogelijk: één knop met twee attributen die de tijd van de server ophaalt, en een endpoint van drie regels. Daarna volgt één les met een overzicht van recepten (formulier, verversen, vanzelf verversen, verwijderen, zoeken), waaruit je leerlingen kiezen wat hun gastenboek nodig heeft. Ze schrijven er geen JavaScript voor; ze hergebruiken alles wat ze al hebben. Elk endpoint geeft een stukje HTML terug in plaats van een omleiding, en dat is ook de fout die je het meest zult zien: een hele pagina in het doel. De tweede valkuil is dat htmx een mislukt verzoek stil negeert; de lessen sturen daarom steeds naar het tabblad Netwerk. Het bestand htmx.min.js staat op deze site om te downloaden, zodat het ook werkt op een netwerk dat externe scripts blokkeert.
Vanaf "JavaScript erbij" komt de browserkant in beeld. Je leerlingen kennen JavaScript al uit de web-cursus; nieuw is de vraag wáár code hoort. Die vraag krijgt een eigen les ("Server of browser?") nadat ze de drie smaken hebben gevoeld: een formulier versturen gaat via de server en de pagina verspringt, met htmx blijft de pagina staan, en een tekenteller draait in de browser zonder dat de server er iets van ziet. De tabel in die les heeft voor elk een kolom.
Daarop volgt "Onthouden", drie lessen die het sterkst zijn als je ze achter elkaar plant. In de eerste veranderen je leerlingen hun eigen cookie in een andere naam en zien ze de server dat klakkeloos overnemen. In de tweede lossen ze dat op door alleen een sessie-id bij de bezoeker te laten en de gegevens op de server te zetten. Het is voor veel leerlingen het eerste moment waarop beveiliging concreet wordt: de verwijderknop verbergen is niet hetzelfde als verwijderen onmogelijk maken.
"Cookie of sessie?" sluit dat blok af zoals "Server of browser?" het vorige afsluit — niet met nieuwe techniek, maar met de vraag wanneer je wat kiest. De kern is dat een sessie ook gewoon een cookie is; het verschil zit in wát erin staat. Leerlingen die alles voor de zekerheid een sessie willen maken, vinden daar het tegenargument: een voorkeur die niemand kan schaden hoort in een gewone cookie.
Daarna sluit de cursus af met de server openzetten voor het netwerk en de eindopdracht.
Wat hier bewust níét in zit, is fetch: JavaScript dat zelf data ophaalt bij een endpoint. Dat vraagt async/await, JSON verwerken en objecten — stof die de web-cursus nog niet behandelt. Het blok "Zonder herladen" vult dat gat met htmx: de server stuurt HTML, niet JSON. Leerlingen die toch fetch willen kun je die kant op sturen; de cursus bouwt er niet op.
Feedback & bijdragen
Suggesties, fouten of nieuwe ideeën? Open een issue of pull request op GitHub. Alle bijdragen — van een typo tot een nieuwe les — zijn welkom.