CRUD met reorder

Wat moet je weten en kunnen?

Deze Challenge gaat over Front End en Back End en hoe je dat goed kan laten samenwerken.

Je moet HTML, CSS, PHP, PDO, Databases, SQL, JavaScript en DOM(-manipulatie) beheersen. Al deze modules heb je voldaan!

Eisen

1. Je maakt wel gebruik van HTML, PHP, PDO en JS.
2. Je mag wel gebruik maken van Bootstrap.
3. Je maakt geen gebruik van een PHP-framework zoals Yii  of Laravel.

Wat ga je maken?

Je krijgt een prototype die er als volgt, uitziet:

Dit is een tabel met een takenlijst voor een project.

De laatste taak (nummer 8) staat niet op de juiste plaats staat, die moet vlak achter taak 4 staan.

Met het proto-type takenlijst.html kun je de code proberen. Je kunt de rijen van de tabel verslepen, probeer maar!

In dit proto-type staat statische data (komt niet uit de database).

Taak 1

Verander het prototype zodat de data uit een MySQL database komen.

Taak 2

Verander het prototype zodat een aangepaste volgorde wordt opgeslagen in de database.

Beide taken worden hieronder verder toegelicht.

Voorbereidingen

1. Zorg ervoor dat het prototype werkt. Probeer de code zo goed mogelijk te begrijpen. Bestudeer de code en plaats (zelf) commentaar in de code.
2. Maak je ontwikkelomgeving klaar. Hernoem het prototype van .html naar .php. Maak ene projectfolder aan, plaats het php bestand daarin en open de project-folder met VCS.
3. Als je iets begrijpt vraag ChatGPT dan om uitleg.

Taak 1, database

1. Maak een database aan
2. Maak in deze database een tabel aan waarin de taken komen te staan.
3. Zet alle kolommen die je in de tabel ziet in de database.
4. Voeg een primary key toe aan de database en vergeet deze niet op "Auto Increment" te zetten.
   ChatGPT prompt: 
   Leg uit wat "auto increment" is bij de definitie van row in een database tabel in MySQL.
5. Plaats de test datatestdata zoals die in het prototype staat in de database.
6. Maak een database.php bestand aan waarin je het user-id en wachtwoord voor de database plaatst. Dit bestand gebruik je om te includen in het prototype.
7. Pas je prototype stap-voor-stap aan:
   1. Maak een connectie en test deze.
   2. Maak een SQL-statement, voer die uit en test wat daar uitkomt.
   3. Voeg één regel toe aan de tabel met de eerste regel uit de database.
   4. Maak nu een tweede tabel onder de eerst en plaats daar alle resultaten die uit de database komen in toe.
8. Test alles en pas ales alles in de tweede tabel goed werkt dan haal je de eerste tabel weg.