⚙️ Frontend en backend
Je hebt geleerd dat een website uit HTML, CSS en JS bestaat — en hoe die bestanden via het internet bij de bezoeker komen. Nu gaan we dieper in op waar code draait: in de browser of op de server?
Twee werelden
Als webdeveloper schrijf je code die op twee totaal verschillende plekken kan draaien: in de browser van de bezoeker (frontend), of op de server (backend). Dit onderscheid is fundamenteel — het bepaalt welke talen je gebruikt en wat je code kan doen.
Frontend
Draait in de browser van de bezoeker
- • HTML — structuur
- • CSS — uiterlijk
- • JavaScript — interactie
Zichtbaar voor iedereen via DevTools
Backend
Draait op de server, onzichtbaar voor bezoekers
- • PHP (Symfony)
- • Python, Node.js, Ruby, Go…
- • Leest/schrijft naar een database
Verborgen — de bezoeker ziet alleen het resultaat
💡 Wat betekent dit?
Frontend developer = bouwt wat de gebruiker ziet en aanraakt. Backend developer = bouwt de logica erachter. Fullstack developer = doet beide. Bij MBO Software Developer leer je alle drie.
Statisch vs dynamisch
Niet elke website heeft een backend nodig. Er zijn twee soorten websites:
📄 Statische website
Vaste bestanden op de server. Elke bezoeker ziet exact hetzelfde. Geen database, geen backend-code.
index.html ← altijd hetzelfde
style.css
script.js
Voorbeelden: portfolio, documentatie, landingspagina
⚙️ Dynamische website
De server genereert de HTML op het moment dat een bezoeker de pagina vraagt. De inhoud hangt af van: wie bent je, wat staat er in de database, welke taal spreak je?
GET /profiel/jan
→ Server zoekt Jan op in database
→ Bouwt HTML: "Welkom Jan, je hebt 3 berichten"
→ Stuurt HTML naar browser
Voorbeelden: webshop, social media, e-mail, bank
💡 Wat betekent dit?
In de HTML-track bouw je statische websites. Zodra je inloggen, winkelmandjes of gepersonaliseerde content wil, heb je een backend nodig — dat leer je in de PHP- en Symfony-track.
De database
De backend praat met een database — een georganiseerde opslag van gegevens. Denk aan een supergeordend spreadsheet dat razendnel doorzoekbaar is.
Tabel: gebruikers
| id | naam | aangemeld | |
|---|---|---|---|
| 1 | Jan Jansen | jan@example.com | 2024-01-15 |
| 2 | Lisa Pietersen | lisa@example.com | 2024-02-03 |
| 3 | Ahmed Yilmaz | ahmed@example.com | 2024-02-21 |
De taal om data in een database op te zoeken en te wijzigen heet SQL (Structured Query Language). Zo vraag je alle namen op:
SELECT naam, email
FROM gebruikers
WHERE aangemeld > '2024-02-01';
💡 Wat betekent dit?
In Symfony gebruik je Doctrine — een laag die SQL voor je schrijft, zodat je in PHP-objecten denkt in plaats van SQL-queries. Maar de SQL-track is alsnog waardevol: je begrijpt wat er achter de schermen gebeurt.
API — de ober-metafoor
Een API (Application Programming Interface) is een afgesproken manier waarop twee systemen met elkaar communiceren. Het makkelijkste om te begrijpen via een restaurant-metafoor:
Jij (klant)
= de Frontend (browser/app)
Je bestelt iets en wacht op je eten
De ober
= de API
Brengt de bestelling door en brengt het eten terug
De keuken
= de Backend + Database
Bereidt het eten — jij ziet niet hoe
In de praktijk: een app op je telefoon praat met een API. De API vraagt data op uit de database en stuurt het terug in een gestandaardiseerd formaat — meestal JSON:
// API-response: GET /api/gebruikers/1
{
"id": 1,
"naam": "Jan Jansen",
"email": "jan@example.com"
}
💡 Wat betekent dit?
In Symfony bouw je zelf API-endpoints. In JavaScript gebruik je fetch() om data op te halen van een API — dat leer je in de JavaScript-track. Het geheel heet een REST API.
✅ Wat heb je geleerd?
- ✓ Frontend = code in de browser (HTML, CSS, JS). Backend = code op de server (PHP, Python, etc.).
- ✓ Statische websites sturen altijd dezelfde bestanden. Dynamische websites genereren HTML op basis van data.
- ✓ Een database slaat gegevens op in tabellen. Je praat er mee via SQL.
- ✓ Een API is een afgesproken manier waarop frontend en backend data uitwisselen — meestal in JSON-formaat.
🧠 Kennischeck
Bijna klaar!
Één les te gaan: je gaat je eerste echte HTML-bestand aanmaken en openen in je browser.