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:
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. |