Zo werkt het: klikken en versturen
Je gastenboek is af: endpoints, templates en een database werken samen, en wie schrijft, heeft een account. Twee diagrammen laten zien wat er dan gebeurt: bij een klik op een link, en bij een formulier.
Een klik
Dit zijn dezelfde stappen als bij je eerste verzoek, met een database en een template ertussen: van de klik op een link tot de lijst op het scherm.
Browser: Je klikt op een link. Zoals de link Terug naar alle berichten: hij wijst naar /berichten, een endpoint, geen bestand. · Links tussen pagina’s
Browser: De browser stuurt een GET. Een verzoek over het netwerk: geef me wat er op /berichten staat. · Kijken wat de browser doet
Server: FastAPI zoekt het endpoint. Welke functie hoort bij dit pad? Die met @app.get("/berichten"). · Je eerste endpoint
Server: Jouw Python draait. De functie leest de berichten uit de database. · Gegevens opslaan met SqliteDict
Server: Jinja2 vult de template. De for-lus maakt van elk bericht een regel HTML. · Alles tonen: een for-lus in je template
Server: Het antwoord gaat terug. Kant-en-klare HTML. De database en je Python-code gaan niet mee.
Browser: De browser tekent de pagina. CSS wordt opgehaald, JavaScript begint. Hier stopt de server. · JavaScript erbij
Tussen stap 6 en 7 gebeurt het belangrijkste van de hele cursus: er gaat alleen HTML over de lijn. Je database blijft op de server, je Python-code ook. De browser krijgt het resultaat, niet de weg ernaartoe. Wie de broncode van je pagina bekijkt ziet de berichten, maar niet hoe je ze hebt opgehaald.
Het JavaScript uit stap 7 komt pas aan bod in de uitbreiding JavaScript erbij. Tot die tijd haalt de browser je CSS op, tekent hij de pagina en is hij klaar.
Een formulier
Een formulier volgt hetzelfde patroon, maar eindigt met een omleiding in plaats van een pagina.
Browser: Je vult het formulier in. De browser controleert of elk veld met required is ingevuld. Meer niet. · Een formulier versturen (POST)
Browser: De browser stuurt een POST. De ingevulde velden gaan mee in het verzoek, niet in de URL. · Een formulier versturen (POST)
Server: FastAPI pakt de velden uit. Elke naam uit je formulier wordt een Form-parameter van je functie. · Een formulier versturen (POST)
Server: Jouw Python slaat op. Controleer hier wat je van de browser hebt gekregen, en bewaar het. · Een formulier opslaan
Server: Het antwoord is een omleiding. Geen pagina, maar een opdracht: ga naar /berichten. Met status 303. · Doorsturen na opslaan (redirect)
Browser: De browser begint opnieuw. Nu met een GET naar /berichten — en het verhaal hierboven start.
De laatste stap start het diagram van de klik opnieuw. Dat is het post/redirect/get-patroon uit Doorsturen na opslaan (redirect): versturen en tonen zijn twee losse verzoeken, zodat F5 de pagina herlaadt in plaats van je bericht nog een keer op te sturen.
Stap 1 gebeurt in de browser, en die is van de bezoeker. Wat een bezoeker instuurt controleer je daarom in stap 4, in je endpoint, en nooit alleen in de HTML. Waarom dat zo is, zie je in de uitbreiding Server of browser?.
Kom je bij een nieuwe functie vast te zitten, zoek dan eerst de stap op waar hij thuishoort. Een tabel met de stappen staat aan het eind van de cursus, bij Hoe een verzoek werkt.