CRUD - Challenge

Voor deze challange gebruik je kennis die je in de PHP modules en in de BNB challenge hebt geleerd. Je gaat werken met forms en je gaat gegevens in een database opslaan en opvragen.

De bedoeling is dat je een CRUD gaat maken. Wat is een CRUD? Dat leggen we zo uit. Eerste het voorbeeld, dat kan je vinden op:

https://stampwerk.nl

Je ziet hier een overzicht van studenten die te laat zijn. Met de groene knop onderaan de pagina kan je een nieuwe te laat melding aanmaken, probeer maar!

Wat is een CRUD?

CRUD staat voor Create, Read, Update en Delete.

Deze vier functies zijn de basisfuncties die je op een tabel uit de database kan uitvoeren. Stel je hebt een tabel student, je kunt een student toevoegen (Create), je kunt een overzicht krijgen van studenten (Read), je kunt de gegevens van een student aanpassen (Update) en als laatste kun je een student ook weer verwijderen.

De challenge is dat jij een CRUD gaat maken voor te laat meldingen. Maak daarvoor eerst een tabel in de database waarin je te laat meldingen kan registreren.

Als je naar het voorbeeld kijkt dan zie je dat je van een te laat melding de volgende gegevens wilt vastleggen:

naam van de student
klas
aantal minuten te laat
de reden van het te laat komen.

Stap 1, de database

Maak een database en maak een tabel zoals je dat ook in de BNB challenge hebt gedaan. Zet de velden in de database en geef de velden het juiste datatype. Vergeet niet een primary key toe te voegen!

Stap 2, Read

Zet een paar regels in de database en begin met het maken van een overzichtspagina (zie voorbeeld).
Zet alle gegevens netjes in een tabel, netjes onder elkaar en vergeet niet de kopregels (headers) toe te voegen.
Je mag voor de lay-out bootstrap gebruiken.

Stap 3, Create

Maak dan de knop 'Weer eentje te laat' (zie voorbeeld)
Zorg dat er na het klikken op deze knop een nieuwe pagina met een formulier getoond wordt.
Voeg een knop 'Invoegen' toe waarmee je de gegevens aan de database toevoegt.
Met behulp van dit formulier moet je een een nieuwe te laat melding kunnen toevoegen aan de database en dus ook aan de overzichtspagina.
Als je foute gegevens invoerd, zoals -300000 bij het aantal minutne te laat dan verschijnt er een nette melding naar de gebruiker. Bij voorkeur controleer je alle invoervelden client side. Zoek zelf op hoe dat moet.

Stap 4, Delete

Voeg een kolom in de tabel op de overzichtspagina toe en plaats op elke regel een knop 'Verwijder' (zie voorbeeld).
Als deze knop wordt ingedrukt dan wordt de te laat melding verwijderd uit de overzichtspagina en dus ook uit de database.
Voordat je daadwerkelijk een te laat melding verwijderd, vraag je eerst een bevestiging aan de gebruiker.

Stap 5, Update

Dit is een extra uitdaging, met update kun je de gegevens in de database updaten.
Voeg een kolom in de tabel op de overzichtspagina toe en plaats op elke regel een knop 'update' (zie voorbeeld).
Als deze knop wordt ingedrukt dan wordt er een nieuwe pagina getoond met een formulier waarin de gegevens staan van de rij waar je op geklikt hebt. Het formulier dat je gebruikt om de update uit te voeren mag dus niet leeg zijn.
In dit formulier kunnen de gegevens worden aangepast.
Voeg een knop update toe waarmee je de gegevens in de database update.

Tip:

Het is lastig om in het formulier de oude waarden te laten zien. Je kan dit als volgt oplossen.

Als je het formulier opent geef je het id mee van de regel die je wilt updaten. Dat kan je het eenvoudigst via een $_GET doen. Controleer of je het ID in het formulier ook daadwerkelijk kan lezen.

Als je het ID hebt dan voer je een query uit en haal je alle gegevens op die bij dit id horen. Die gegevens gebruik je daarna om de values van het formulier te vullen. Op deze manier zie je in het formulier de oude waarden en hoef je niet alle waarden opnieuw in te voeren.

Inleveren

Eén screenshot van jouw Read (overzichtspagina) scherm.
Eén screenshot van jouw Create (pagina met formulier om een item toe te voegen) scherm.
Eén screenshot van jouw Update (pagina met formulier om een item aan te passen) scherm.
Alle PHP files, sql-export en (eventueel) CSS file die je hebt gebruikt.

Puntentelling

(je moet meer dan 80 punten of meer halen voor deze challenge).

10	Database met tabel maken en de juiste gegevens vastleggen in de tabel. Denk ook om de datatypes.
10	Read, een overzicht van alle te-laat meldingen uit de database maken.
10	Het (Read) overzicht netjes met CSS styles formateren (mag ook via Bootstrap).
20	Create, een nieuwe te laat melding kunnen maken.
10	Invoercontrole. Bij een nieuw te laat melding kan je verkeerde zaken invoeren, zoals bij minuten te laat een woord, of een negatief getal. Je kunt ook een naam invoeren van een student met een lengte langer dan in de database is toegstaan. Zorg ervoor dat er naar de gebruiker een nette melding komt als je iets verkeerds invoert.
20	Update, je kunt een te laat melding uit het overzicht aanpassen.
10	Delete je kunt een te lat melding uit het overzicht verwijderen.
10	Als je een te laat melding verwijderd wordt er eerst om een bevestiging gevraagd.

---------

8 CRUD Challenge – Te laat meldingen

🎯 Leerdoelen

Je kunt een volledige CRUD-toepassing bouwen met PDO en PHP.
Je past invoercontrole en gebruikersinteractie toe in formulieren.
Je begrijpt de rol van prepare(), execute(), en veilige query’s.

💡 Uitleg

In deze challenge bouw je een complete toepassing waarin te laat meldingen van studenten worden bijgehouden. Je gebruikt alles wat je geleerd hebt over forms, PDO, databaseverwerking en CRUD-operaties.

Het eindresultaat is een overzichtspagina met alle meldingen, waarin je nieuwe meldingen kunt toevoegen, bestaande meldingen kunt wijzigen en meldingen kunt verwijderen (met bevestiging).

Voorbeeld

Bekijk het voorbeeld op: stampwerk.nl. Probeer de knop 'Weer eentje te laat' en kijk wat er gebeurt.

De bedoeling is dat je een CRUD gaat maken. Wat is een CRUD? Dat leggen we zo uit. Eerste het voorbeeld, dat kan je vinden op:

https://stampwerk.nl

Wat is een CRUD?

CRUD staat voor Create, Read, Update en Delete.

De challenge is dat jij een CRUD gaat maken voor te laat meldingen. Maak daarvoor eerst een tabel in de database waarin je te laat meldingen kan registreren.

Als je naar het voorbeeld kijkt dan zie je dat je van een te laat melding de volgende gegevens wilt vastleggen:

naam van de student

klas

aantal minuten te laat

de reden van het te laat komen.

🛠️ Stappenplan

Stap 1 – Database maken

Maak een database en een tabel meldingen met de volgende velden:
- id (INT, AUTO_INCREMENT, PRIMARY KEY)
- student (VARCHAR)
- klas (VARCHAR)
- minuten (INT)
- reden (TEXT)
Voeg met PHPMyAdmin alvast een paar testregels toe.

Stap 2 – Read: overzicht maken

Maak read.php waarin je alle meldingen toont in een HTML-tabel.
Gebruik require 'connection.php' om je databaseverbinding te maken.
Gebruik query() en fetchAll() om de gegevens op te halen.
Voeg bovenaan de pagina een navigatie toe met knoppen voor “toevoegen” en “zoeken”.

Stap 3 – Create: melding toevoegen

Maak een bestand create.php met een formulier voor een nieuwe melding.
Voeg de invoervelden toe voor student, klas, minuten en reden.
Voer de gegevens in de database in met prepare() en execute().
Laat zelf de execute()-regel open en vul deze correct aan.
Controleer of de invoer geldig is: geen negatieve getallen, geen lege velden.
Laat een foutmelding zien als de invoer niet klopt, en een succesmelding als het is gelukt.

Stap 4 – Delete: melding verwijderen

Voeg op read.php bij elke rij een knop “verwijder” toe die leidt naar delete.php?id=...
Toon in delete.php eerst een bevestiging, inclusief de naam van de student.
Voer pas na bevestiging de DELETE-query uit.
Laat de student zelf de naam ophalen met een SELECT-query.

Stap 5 – Update

Voeg op read.php ook een knop “wijzig” toe bij elke melding, die leidt naar update.php?id=....
Haal in update.php de bestaande gegevens op met een SELECT-query.
Toon een formulier met de bestaande gegevens ingevuld.
Laat de student zelf de value-attributen van de formulier-velden vullen.
Laat bij opslaan de gewijzigde gegevens bijwerken met een UPDATE-query.

🧠 Reflectie

Wat heb je geleerd over het werken met databases in PHP?
Wat ging er goed, en waar had je hulp bij nodig?
Wat zou je in een volgend project anders aanpakken?
Hoe zorg je ervoor dat je database veilig blijft bij gebruikersinvoer?

📤 Inleveren

Eén screenshot van je overzichtspagina (read.php).
Eén screenshot van je invoerpagina (create.php).
Eén screenshot van je wijzigpagina (update.php).
Alle PHP-bestanden, SQL-export van de database, en eventuele CSS.
Een reflectieverslag in .txt of .pdf met de bovenstaande vragen beantwoord.

📊 Puntentelling

Je moet minimaal 81 van de 100 punten halen om deze opdracht succesvol af te ronden.

Punten	Onderdeel
10	Database en tabel: juiste velden, datatypes en primary key zijn aangemaakt.
10	Read: overzichtspagina toont meldingen correct in een tabel.
10	Layout: nette opmaak met CSS (Bootstrap, Tailwind, ...), duidelijke structuur.
20	Create: formulier voegt een nieuwe melding toe, inclusief invoercontrole.
10	Invoercontrole: negatieve of ongeldige invoer wordt opgevangen met een melding.
10	Delete: verwijderen werkt inclusief bevestiging én juiste studentnaam.
20	Update: bestaand record kan worden aangepast via een formulier met ingevulde velden.
10	Codekwaliteit & veiligheid: gebruik van `prepare()`, `execute()`, nette bestandsstructuur.