Skip to main content

Web Applicaties

Inleiding

Webapplicaties kom je overal tegen: bij het bestellen van eten, het inloggen op school, of het bekijken van je bankrekening. Toch zien de meeste mensen alleen wat er op het scherm gebeurt, terwijl er onder de motorkap veel meer speelt. Een webapplicatie bestaat namelijk uit verschillende onderdelen die samenwerken om gegevens op te slaan, te verwerken en te tonen aan de gebruiker.

In deze lessenserieles leer je stap voor stap hoe een webapplicatie is opgebouwd. Je ontdekt hoe je echte informatie (zoals een lijst met taken of notities) kunt omzetten naar een digitaal systeem met een database, PHP-code en een nette webpagina met HTML, CSS en JavaScript.

Het gaat in deze lessen niet alleen om het maken van code, maar vooral om het begrijpen van hoe alles samenwerkt. Je leert waarom een duidelijke opbouw belangrijk is, hoe data wordt opgeslagen, en hoe de logica in de code bepaalt wat er op het scherm verschijnt.

Na deze lessen kun je uitleggen wat een webapplicatie is, hoe de drie lagen (frontend, backend en database) samenwerken, en kun je zelf een eenvoudige maar goed gestructureerde webapplicatie bouwen.

1 Wat is een Webapplicatie?

🎯 Leerdoelen

  • Je weet wat een webapplicatie is en waaruit die bestaat.
  • Je begrijpt hoe de drie lagen (frontend, backend en database) samenwerken.
  • Je kunt uitleggen wat het verschil is tussen data, logica en vormgeving.

💡 Uitleg

Wat is een webapplicatie?

Een webapplicatie is een programma dat in de browser draait en gegevens kan opslaan en verwerken. Denk aan een webshop, een reserveringssysteem of een notitie-app. Zo’n applicatie bestaat meestal uit drie onderdelen (lagen) die samenwerken:

  1. Frontend (voorkant) – wat de gebruiker ziet en gebruikt, gemaakt met HTML, CSS en JavaScript.
  2. Backend (achterkant) – de code die bepaalt wat er gebeurt als je op knoppen klikt of formulieren verstuurt. Vaak in PHP of Python.
  3. Database – hier worden alle gegevens opgeslagen, bijvoorbeeld met MySQL.

Samen zorgen deze lagen ervoor dat een gebruiker iets kan invoeren, dat de code het verwerkt, en dat het resultaat weer op het scherm verschijnt.

Voorbeeld: een restaurant

Je kunt een webapplicatie vergelijken met een restaurant:

  • De frontend is de ober – die neemt bestellingen op bij de klant.
  • De backend is de keuken – daar wordt de bestelling klaargemaakt.
  • De database is de voorraadkast – daar liggen de ingrediënten opgeslagen.

2 Modelleren: denken in onderdelen

🎯 Leerdoelen

  • Je kunt uitleggen waarom je eerst nadenkt over onderdelen voordat je gaat programmeren.
  • Je kunt belangrijke gegevens (zoals gebruikers en taken) beschrijven in tabellen.
  • Je begrijpt hoe tabellen aan elkaar gekoppeld kunnen worden.

💡 Uitleg

Voordat je begint met programmeren, is het slim om eerst te bedenken welke informatie je nodig hebt en hoe die met elkaar samenhangt. Dat heet modelleren: je maakt een eenvoudig overzicht van de onderdelen van je applicatie.

Bijvoorbeeld: je wilt een To-Do app bouwen waarin een gebruiker taken kan aanmaken. Dan heb je de volgende onderdelen nodig:

  • Gebruiker – naam, e-mail en wachtwoord.
  • Taak – titel, beschrijving, status (voltooid of niet) en datum.
  • Categorie – optioneel, om taken te groeperen (bijv. School, Werk, Persoonlijk).

Eén gebruiker kan meerdere taken hebben. Dat leggen we vast in tabellen in de database.

Van idee naar tabel

Elke onderdeel wordt een tabel met kolommen voor de gegevens:

Onderdeel Kolommen
Gebruikers id, naam, email, wachtwoord
Taken id, gebruiker_id, titel, beschrijving, voltooid, datum

SQL: zo maak je tabellen

CREATE TABLE gebruikers (
  id INT AUTO_INCREMENT PRIMARY KEY,
  naam VARCHAR(100),
  email VARCHAR(100),
  wachtwoord VARCHAR(255)
);

CREATE TABLE taken (
  id INT AUTO_INCREMENT PRIMARY KEY,
  gebruiker_id INT,
  titel VARCHAR(200),
  beschrijving TEXT,
  voltooid BOOLEAN,
  datum DATE,
  FOREIGN KEY (gebruiker_id) REFERENCES gebruikers(id)
);

3 De Backend: de logica

🎯 Leerdoelen

  • Je weet wat de backend doet in een webapplicatie.
  • Je kunt uitleggen hoe PHP met een database praat.
  • Je begrijpt dat de backend de “regels” van de applicatie uitvoert.

💡 Uitleg

De backend is het deel van je webapplicatie dat alles regelt wat de gebruiker niet ziet. Als je op een knop klikt om iets op te slaan, zorgt de backend dat die informatie in de database terechtkomt.

<?php
$conn = new mysqli("localhost", "root", "", "todoapp");

$titel = $_POST['titel'];
$beschrijving = $_POST['beschrijving'];

$sql = "INSERT INTO taken (titel, beschrijving) VALUES ('$titel', '$beschrijving')";
$conn->query($sql);
?>

Hierboven zie je een simpel PHP-script dat een taak toevoegt aan de database. De backend vertaalt dus wat de gebruiker doet in de browser naar acties in de database.

4 De Frontend: wat de gebruiker ziet

🎯 Leerdoelen

  • Je weet wat HTML, CSS en JavaScript doen in een webpagina.
  • Je begrijpt het verschil tussen structuur (HTML), vorm (CSS) en gedrag (JS).

💡 Uitleg

De frontend is wat de gebruiker ziet en gebruikt in de browser. Die bestaat uit drie bouwstenen:

HTML (structuur)

<form action="add_task.php" method="post">
  <input type="text" name="titel" placeholder="Titel">
  <textarea name="beschrijving"></textarea>
  <button type="submit">Toevoegen</button>
</form>

CSS (stijl)

body { font-family: Arial; background: #f8f8f8; }
button { background: #007BFF; color: white; border-radius: 4px; }

JavaScript (gedrag)

document.querySelector('form').addEventListener('submit', () => {
  alert('Taak toegevoegd!');
});

Samen zorgen deze drie talen ervoor dat een webpagina werkt, er goed uitziet en reageert op wat de gebruiker doet.

5 Hoe werken de lagen samen?

🎯 Leerdoelen

  • Je begrijpt hoe frontend, backend en database samenwerken.
  • Je ziet waarom deze opdeling handig is bij het bouwen van software.

💡 Uitleg

Alle onderdelen van een webapplicatie werken samen in een vaste volgorde:

  1. De gebruiker vult iets in (bijv. een formulier) in de frontend.
  2. De backend ontvangt die informatie en slaat het op in de database.
  3. De database bewaart de gegevens en stuurt ze terug als de backend ze opvraagt.
  4. De backend stuurt de gegevens weer naar de frontend, die ze netjes toont op het scherm.

Omdat elk onderdeel zijn eigen taak heeft, kun je later makkelijk iets aanpassen: de opmaak zonder de logica te veranderen, of de database uitbreiden zonder de pagina’s te herschrijven.

🛠️ Opdracht – Bouw een mini webapplicatie

  1. Maak in je database een tabel notities met kolommen id, titel en tekst.
  2. Schrijf een PHP-bestand add_note.php waarin de gebruiker een nieuwe notitie kan opslaan.
  3. Maak een tweede pagina show_notes.php die alle notities uit de database laat zien.
  4. Gebruik CSS om de notities overzichtelijk weer te geven.
  5. Laat met JavaScript een melding zien als een notitie is toegevoegd.

🧠 Reflectie

  • Waarom is het handig om de code in lagen (frontend, backend, database) op te delen?
  • Welke laag vond jij het makkelijkst of leukst om te begrijpen?
  • Wat kan er misgaan als je database niet goed is ontworpen?

📤 Inleveren

  • Lever de drie bestanden in: add_note.php, show_notes.php en de database-export (notities.sql).
  • Maak een kort reflectieverslag (reflectie-webapp.txt) waarin je vertelt wat je geleerd hebt.
Back to top