Een to-do list maken met PHP, PDO en een MySQL database

In dit artikel kan je eenvoudig zelf een to-do list maken met PHP, PDO en een MySQL database. Je leert daarmee ook de basis van deze technieken kennen. Als je de basis van deze technieken beheerst, kan je heel veel andere gave projecten gaan maken. Het is ook de bedoeling dat je niet stil blijft zitten na dit artikel, maar verder aan de slag gaat. Lees lekker verder!

Dit gaan we maken

We gaan in dit artikel een to-do list maken met PHP, PDO en een MySQL database. De to-do list gaat er zo uitzien:

Zoals je ziet, kan je in het formulier een taak toevoegen. Je vult de naam van de persoon in die de taak gaat uitvoeren, een taakomschrijving en een deadline om te bepalen wanneer het af moet zijn.

Via de “Update” link kan je een taak updaten en via de “Verwijderen” link kan je een taak verwijderen. De applicatie staat online en je kan het alvast uitproberen, voordat je het zelf gaat maken.

Let niet op het design van het formulier en de tabel. Het gaat er meer om dat je de technieken achter deze to-do list gaat begrijpen en daarmee kennis opdoet om zelf gave projecten te gaan maken.

Voorkennis

Ten eerste heb je basiskennis nodig van HTML, CSS en PHP om de code van deze applicatie goed te gaan begrijpen. Ook is het goed om te weten wat MySQL is en wat queries zijn. Lees ook “SQL leren” door als je nog geen kennis van SQL hebt.

Er komt ook een beetje object georiënteerd programmeren kijken bij de code die we gaan maken. Basiskennis daarvan is handig om alles te begrijpen.

Ben je nog een leek op het gebied van programmeren? Dan is het aan te raden om eerst het e-book “Snelcursus Leren Programmeren” te lezen.

Wat is PHP, PDO en een MySQL database

We gaan een to-do list maken met PHP, PDO en een MySQL database, dus dan is het wel handig om alvast wat over deze technieken te weten.

Over PHP en een MySQL database maken we in dit hoofdstuk niet veel woorden vuil. In “PHP leren” lees je meer over PHP en in “Wat is MySQL?” lees je meer over een MySQL database.

Wel gaan we hier kijken wat PDO is. PDO staat voor PHP Data Objects. De PDO extensie maakt het mogelijk om met databases te communiceren in PHP.

PHP 5 en nieuwere versies ondersteunen PDO. Eerdere versies van PHP maakten gebruik van de MySQL extensie. Deze extensie is echter verouderd en wordt vanaf PHP 6 niet meer ondersteund.

Ook is er nog de MySQLi extensie, de i staat voor “improved”. Dit is de opvolger van de MySQL extensie. Maar waarom gebruiken we dan de PDO extensie?

Het grote voordeel van de PDO extensie is dat het werkt bij meerdere databasesystemen. De MySQLi extensie werkt alleen bij MySQL databases.

Dus stel dat je van database wil veranderen in je project, dan is dat met de PDO extensie zo gedaan en met de MySQLi extensie moet je veel code en queries gaan herschrijven.

Dit is het grote voordeel van PDO ten opzichte van MySQLi en daarom raden wij ook aan om van PDO gebruik te maken.

Waarom een to-do list maken met PHP, PDO en een MySQL database?

Ja, waarom gaan we eigenlijk een to-do list maken met PHP, PDO en een MySQL database? Waarom niet een andere applicatie?

Ten eerste is het principe van een to-do list heel simpel. Het is beter om met een simpele applicatie te beginnen. Hierdoor is het als beginner beter te begrijpen.

Je leert door het maken van een to-do list met PHP, PDO en een MySQL database beter deze technieken begrijpen, wat ze afzonderlijk van elkaar doen en hoe ze kunnen samenwerken.

Met de basiskennis die je opdoet na het maken van deze to-do list, kan je eventueel deze to-do list verbeteren en uitbreiden en je kan met andere gave projecten gaan beginnen.

Ten tweede leer je het bekende CRUD principe goed begrijpen met het maken van deze simpele to-do list. In “Het CRUD principe” lees je meer over dit bekende principe.

Ten derde kan je de applicatie eventueel zelf ook nog gaan gebruiken. Elk mens heeft wel dingen die gedaan moeten worden en een to-do list is daarbij erg handig.

Het CRUD principe

CRUD is de afkorting voor Create, Read, Update en Delete. Dit zijn veelgebruikte instructies, meestal voor databases. Vele softwareprogramma’s maken gebruik van dit principe.

Hieronder de betekenis van de verschillende instructies:

Create	Nieuwe data/gegevens toevoegen in database
Read	Data/gegevens uit database opvragen
Update	Data/gegevens updaten in database
Delete	Data/gegevens verwijderen uit database

In het geval van de to-do list die we gaan maken, ziet dat er als volgt uit:

• Create: Nieuwe taak voor to-do list toevoegen in database
• Read: Taken van de to-do list opvragen uit database
• Update: Een taak van de to-do list updaten in database
• Delete: Een taak van de to-do list verwijderen uit database

De theorie is niet lastig en in de praktijk is het ook simpel door dit artikel. Laten we lekker gaan beginnen!

Stap 1: XAMPP installeren

Eerst is het nodig om XAMPP te installeren. Op de website van “Apache Friends” kan je eenvoudig XAMPP downloaden en op je computer installeren. XAMPP kan draaien op een Windows, Linux en OS X computer.

Als je in het installatieproces bij de componenten aankomt, kan je gewoon alle componenten aangevinkt laten. Onthoud de locatie van de map waarin je XAMPP installeert, want daar moeten we straks weer zijn.

Het kan zijn dat je tegen problemen aanloopt bij de installatie. Dit kan bijvoorbeeld komen door een antivirusprogramma of het gebruikersaccountbeheer. Deactiveer beiden tijdelijk als je problemen hebt. Google naar oplossingen voor de eventuele errors die je krijgt is ook erg nuttig.

Je hebt een webserver nodig die PHP code kan begrijpen. Met Apache is het mogelijk om een lokale webserver op te zetten. Apache zit bij XAMPP inbegrepen.

Verder installeert XAMPP ook PHP en een MySQL databasesysteem op je computer. Hierdoor heb je alles om een to-do list te maken met PHP, PDO en een MySQL database.

XAMPP testen

Is het gelukt om XAMPP te installeren? Dan is het handig om het te testen. Open XAMPP Control Panel:

Start de Apache webserver en het MySQL databasemanagementsysteem:

Werkt het starten niet in één keer? Kijk dan welke error(s) je krijgt. Gebruik de error als zoekterm in Google en probeer naar de oplossing te zoeken.

Bij sommige computers heb je admin-rechten nodig. Sluit XAMPP en start het opnieuw op door een klik met je rechtermuisknop op het starticoontje van de XAMPP Control Panel en klik op “Run as administrator”. Start daarna Apache en MySQL op en test of het nu wel werkt.

Misschien gaat het wel allemaal in één keer soepel en werkt het gelijk. Heb je Apache en MySQL kunnen starten? Ga dan eens in de browser naar http://localhost/phpmyadmin. Met dit programma beheer je MySQL databases.

Voor de volgende stap hebben we phpMyAdmin nodig, dus zorg dat je in dit programma kan komen. Onthoud goed dat elke keer als je aan je to-do list wil werken, dan moet je met de XAMPP Control Panel Apache en MySQL starten, anders werkt de applicatie niet. Dit geldt voor elke applicatie die je wil maken in PHP en met een MySQL database lokaal op je computer.

Stap 2: MySQL database met tabel aanmaken

We gaan eerst een database aanmaken met maar één tabel. We houden deze to-do list heel simpel, het gaat er meer om dat je de technieken begrijpt.

Ben je al in de phpMyAdmin omgeving? Zo niet, open dan eerst de XAMPP Control Panel en start Apache en MySQL. Ga daarna in de de browser naar http://localhost/phpmyadmin.

Nieuwe MySQL database aanmaken binnen phpMyAdmin

Een nieuwe MySQL database aanmaken binnen de phpMyAdmin omgeving is heel eenvoudig. Klik eerst op “Nieuw”:

Geef de database daarna een naam, in ons geval “todo”, en maak de database aan:

Zo simpel is het, je hebt nu een database aangemaakt.

Nieuwe tabel aanmaken binnen de database

Na het aanmaken van de database kan je gelijk de tabel gaan aanmaken. Wij noemen de tabel “taak” en de tabel heeft 4 kolommen:

Klik op “Starten” om de tabel aan te maken. Nu gaan we de kolommen een naam geven en instellen. We geven de volgende namen, types en waardes aan de kolommen:

Met een “Type” geef je aan op welke manier de data wordt opgeslagen. Simpel gezegd sla je met INT een getal op, met VARCHAR kan je een reeks van letters, cijfers en andere tekens opslaan en DATE slaat een datum op. Klik op het vraagtekentje bij “Type” voor een specifiekere uitleg over de types.

Met “Lengte” geef je de maximale lengte van het aantal tekens aan dat opgeslagen kan worden. In dit geval is dat bij beide kolommen 255 tekens.

Tot slot vink je bij de kolom “id” nog “A_I” (AUTO_INCREMENT) aan:

Door een id “AUTO_INCREMENT” te maken, zorg je ervoor dat het id van elke nieuwe rij met 1 wordt opgehoogd. Hierdoor blijft het id van elke rij uniek.

Klik op “Opslaan”. Je hebt nu een database met een tabel aangemaakt. Het maken van een to-do list met PHP, PDO en een MySQL database is weer een stapje dichterbij. Op naar de volgende stap!

Stap 3: Project aanmaken met PHP bestanden en een CSS bestand

We moeten natuurlijk PHP gaan schrijven om de to-do list te maken. Daar komt ook HTML en een heel klein beetje CSS bij kijken. De HTML code voegen we later toe in de PHP bestanden.

Map aanmaken in htdocs

Maak eerst een map aan in de htdocs map. In de htdocs map horen alle projecten te staan, zodat ze op de lokale webserver draaien. De htdocs map vind je meestal met het volgende pad: C:\xampp\htdocs. Dit is het juiste pad bij een standaardinstallatie.

In de htdocs map hebben wij een map aangemaakt, genaamd “to-do-list-php-pdo-mysql-database”. Je mag natuurlijk ook zelf een naam verzinnen voor de aangemaakte map.

In deze map komen alle PHP bestanden en een CSS bestand te staan voor dit project. Deze bestanden gaan we zo aanmaken.

Visual Studio Code

Er zijn meerdere goede PHP code editors, maar voor dit project gebruiken wij Visual Studio Code. Visual Studio Code is helemaal gratis te downloaden en is beschikbaar voor een Windows, Linux en macOS computer.

Via PHP extensions kan je het voor jezelf wat makkelijker maken om met PHP te programmeren, zoals “PHP IntelliSense” en “PHP Debug”. Op de website van Visual Studio Code zie je hoe je extensions kan installeren er is nog veel meer informatie over extensions te lezen.

Als je goed meedoet met dit project, heb je niet perse extensions nodig waarmee je bijvoorbeeld kan debuggen. Maar als je verder gaat met dit project of andere projecten in PHP met Visual Studio Code, dan is het wel handig om te kijken naar extensions die je leven makkelijker maken als PHP developer.

De bestanden aanmaken

Heb je Visual Studio Code open staan? Zo niet, start dan Visual Studio Code op. Open eerst de map die je hebt aangemaakt binnen de htdocs map, in ons geval is dat de “to-do-list-php-pdo-mysql-database” map.

Klik in Visual Studio Code op File > Open Folder… (Ctrl + K Ctrl + O) om de map te openen. Binnen deze map gaan we de bestanden aanmaken.

Een bestand aanmaken is eenvoudig. Klik op File > New File (Ctrl + N) om een bestand aan te maken. Daarna klik je op File > Save (Ctrl + S) en sla het bestand op als “index.php”. Dit is het beginpunt van de applicatie.

Zet de volgende code als test in het “index.php” bestand en sla het bestand op (Ctrl + S):

<?php

echo "Test";

?>

Start Apache en MySQL in de XAMPP Control Panel als je dat nog niet had gedaan. Ga in de browser naar: http://localhost/to-do-list-php-pdo-mysql-database/ of vervang to-do-list-php-pdo-mysql-database met de naam die je zelf hebt verzonnen voor het project.

Zie je “Test” staan op het scherm? Dan werkt het goed! Zo niet, kijk dan wat voor foutmelding je krijgt en probeer te googelen naar de oplossing.

Eerst gaan we een nieuwe map aanmaken binnen ons project en daarin het CSS bestand plaatsen. Ga in Explorer met je muis over de naam van het project en klik op het tweede icoontje om een nieuwe map aan te maken:

De map noem je “css”. In deze map maak je een nieuw bestand aan en je slaat het op als “index.css”. Buiten de “css” map, waar ook het “index.php” bestand staat, maak je de volgende PHP bestanden aan:

• connect.php
• create.php
• read.php
• update.php
• delete.php

Dit komt er zo uit te zien in Visual Studio Code:

Het “README.md” bestand kan je wegdenken voor jezelf, wij gebruiken dat voor GitHub. Tijd om naar de volgende stap te gaan!

Stap 4: Connectie maken in PHP met MySQL database

Het is de bedoeling om de CRUD instructies door te voeren in de database die we hebben aangemaakt. Daarvoor moeten we eerst connectie maken met de database, zodat het mogelijk is om deze instructies uit te voeren.

In het “connect.php” bestand zet je de volgende code:

<?php

// Variabelen met gegevens voor database
$servername = "localhost";
$dbname = "todo";
$username = "root";
$password = "";

try {
  // PDO object aanmaken en parameters met gegevens over database erin verwerken
  $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
  // Stel error reporting in. De waarde maakt gebruik van exceptions als er SQL errors zijn
  // en het script stopt met draaien.
  $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  // Catch de PDOException om de error te zien als de connectie met de database misgaat
} catch(PDOException $e) {
    echo "Connection failed: " . $e->getMessage();
}

?>

In het commentaar in de code zie je de uitleg over de code. Standaard als je een nieuwe database aanmaakt in de phpMyAdmin omgeving is de username “root” en er is geen password, vandaar dat het password ook leeg is, want we hebben het niet aangemaakt.

Sla het bestand op en test of je geen errors krijgt. Ga naar http://localhost/to-do-list-php-pdo-mysql-database/connect.php om het te testen. Heb je Apache en MySQL al gestart in de XAMPP Control Panel? Dit is de laatste keer dat we erop hameren.

Logischerwijs moet je ook elke keer bij aanpassingen in de code het bestand opslaan. Daarna kan je de applicatie refreshen (F5) om de veranderingen te testen.

Krijg je een error? Kijk dan welke dat is en zoek eventueel op hoe je dat kan fixen. De errors zijn echter vaak vrij duidelijk en zijn makkelijk op te lossen.

Als je geen errors krijgt, dan is de connectie met de database geslaagd en kan je naar de volgende stap gaan. Je zou eventueel als extra bevestiging ook echo "Connectie is succesvol verlopen!"; onder regel 14 kunnen zetten bij het testen. Verwijder dit als je succesvol connectie hebt gemaakt met de database.

Op de website van PHP lees je meer over het maken van databaseconnecties met PDO in PHP.

Stap 5: Data toevoegen in MySQL database (Create)

Nu begint eigenlijk pas het echte werk bij het maken van deze to-do list met PHP, PDO en een MySQL database. We gaan namelijk de eerste instructie (Create) doorvoeren van het CRUD principe.

In dit geval voegen we een nieuwe rij toe in de “taak” tabel. Deze tabel hebben we aangemaakt in de “todo” database, weet je nog?

Formulier aanmaken in HTML

Zet de volgende code neer in het “index.php” bestand:

<!DOCTYPE html>
<html>
<head>
    <title>To-do list met PHP, PDO en een MySQL database</title>
</head>
<body>

    <!-- Formulier om een taak te versturen naar de database en in de taak tabel -->
    <form method="post" action="create.php">
        <input type="text" placeholder="Naam" name="naam"><br>
        <input type="text" placeholder="Taakomschrijving" name="taakomschrijving"><br>
        <input type="date" name="deadline"><br>
        <input type="submit" name="submit" value="Verzenden"><br>
    </form><br>

</body>
</html>

Tot nu toe hebben we alleen HTML nodig in het “index.php” bestand, zoals je ziet. We gaan het formulier niet opmaken, het gaat puur om de werking. Er is alleen gebruik gemaakt van <br> tags om de velden onder elkaar te zetten.

Veel beter is om de <br> tags weg te halen en het formulier te stijlen met CSS. Misschien een leuk klusje voor jou als je klaar bent? Het CSS bestand staat al klaar.

Het method attribuut van het formulier in regel 9 geeft aan hoe de data wordt verzonden en het action attribuut geeft aan naar welke pagina, in dit geval het create.php bestand. In het “create.php” bestand gaan we zo de data sturen naar de database.

De name attributen zijn belangrijk. In “create.php” kunnen we namelijk de data van de ingevulde velden herkennen door de name attributen en toewijzen aan een variabele. Ook kunnen we door het name attribuut van de button herkennen of erop is geklikt.

Data formulier ophalen, verwerken in query en sturen naar database

Zet de volgende code neer in het “create.php” bestand:

<?php

// Kopieer code van connect.php naar dit bestand
include 'connect.php';

// Als er op de button van het formulier is geklikt, dan code uitvoeren in het if statement
if (isset($_POST['submit'])) {

    // Waardes van formulier ophalen en aan variabele geven
    $naam = $_POST['naam'];
    $taakomschrijving = $_POST['taakomschrijving'];
    $deadline = $_POST['deadline'];

    // Query maken om data op de juiste manier toe te voegen aan tabel
    $query = "INSERT INTO taak (naam, taakomschrijving, deadline) VALUES ('$naam', '$taakomschrijving', '$deadline')";

    // Voer de query uit
    $conn->exec($query);

    // Weer teruggaan naar index.php
    // Ook te voorkomen dat een rij nog een keer wordt toegevoegd bij een refresh
    header("location: index.php");
}

?>

Allereerst is het belangrijk om de code van “connect.php” te kopiëren naar dit bestand. In regel 18 is er namelijk een connectie met de database nodig, die is gemaakt in het “connect.php” bestand, om de query uit te voeren.

Wat vooral opvalt zijn de $_POST super global variabelen. Hiermee haal je de data op uit de velden van het formulier. De name attributen staan in de $_POST super global variabelen en op die manier wordt de data herkend. Ook kan je daardoor herkennen of er op de button van het formulier is geklikt.

We verwijzen je voor de rest naar het commentaar in de code voor verdere uitleg. Dit is de laatste keer dat we het zeggen, voortaan weet je dat in de code zelf nuttig commentaar staat.

Testen of het werkt

De applicatie ziet er momenteel zo uit:

Ga naar je applicatie (http://localhost/to-do-list-php-pdo-mysql-database/), vul het formulier in en kijk in de database (http://localhost/phpmyadmin/) of de taak succesvol is toegevoegd.

Ben je in de phpMyAdmin omgeving? Klik dan op de tabel die je hebt aangemaakt (taak) in de “todo” database:

Je kan nu gelijk zien of er een rij is toegevoegd aan de tabel. Het id wordt automatisch aan de rij meegegeven. Als je nog een rij toevoegt, wordt het id van deze rij met 1 opgehoogd ten opzichte van het id van de laatst toegevoegde rij.

Krijg je een error? Probeer het eerst zelf op te lossen, want de error is meestal vrij duidelijk. Zoek anders op Google naar een oplossing door de error als zoekterm te gebruiken.

Stap 6: Data opvragen uit MySQL database (Read)

Het is allemaal leuk en aardig dat je nu taken kan toevoegen in de database, maar we willen dit natuurlijk ook in de applicatie zelf uitlezen. Daarom gaan we nu de Read instructie toepassen in de code.

Data ophalen met query en verwerken in HTML table

Eerst voegen we code toe in “index.php”. Het “index.php” bestand komt er nu zo uit te zien:

<?php

// Kopieer code van connect.php naar dit bestand
include 'connect.php';

?>

<!DOCTYPE html>
<html>
<head>
    <title>To-do list met PHP, PDO en een MySQL database</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>

    <!-- Formulier om een taak te versturen naar de database en in de taak tabel -->
    <form method="post" action="create.php">
        <input type="text" placeholder="Naam" name="naam"><br>
        <input type="text" placeholder="Taakomschrijving" name="taakomschrijving"><br>
        <input type="date" name="deadline"><br>
        <input type="submit" name="submit" value="Verzenden"><br>
    </form><br>

    <!-- Kopieer code van read.php naar dit bestand -->
    <?php include 'read.php'; ?>

</body>
</html>

Het enige verschil is eigenlijk dat we twee PHP bestanden hebben gekopieerd naar het “index.php” bestand, zoals je in regel 4 en 25 ziet. In het “read.php” bestand, dat gekopieerd is in regel 25, hebben we een database connectie nodig en daarom is het nodig om “connect.php” te kopiëren naar “index.php”.

Alle code om de data op te halen en te verwerken in een HTML table staat in het “read.php” bestand. Het wordt alleen gekopieerd naar “index.php” om het overzichtelijk te houden.

Verder zie je ook in regel 12 dat we alvast een verwijzing hebben gemaakt naar het CSS bestand, dat we zo gaan gebruiken om de tabel een beetje te stijlen.

De code in “read.php” ziet er zo uit:

<?php

// Query maken om alle rijen uit de tabel taak op te halen
$query = $conn->query("SELECT * FROM taak");

?>

<!-- Tabel aanmaken in HTML -->
<table>
    <tr>
        <th>Naam</th>
        <th>Taakomschrijving</th>
        <th>Deadline</th>
        <th>Update</th>
        <th>Verwijderen</th>
    </tr>

    <!-- While loop die door alle opgehaalde rijen van de tabel taak gaat -->
    <?php while ($row = $query->fetch()) { ?>

    <!-- Alle data van de opgehaalde rij in table row stoppen -->
    <tr>
        <td><?php echo $row['naam']; ?></td>
        <td><?php echo $row['taakomschrijving']; ?></td>
        <td><?php echo $row['deadline']; ?></td>
        <td><a href="update.php?id=<?php echo $row['id']; ?>">Update</a></td>
        <td><a href="delete.php?id=<?php echo $row['id']; ?>">Verwijderen</a></td>
    </tr>

    <?php } ?>
</table>

Let goed op de PHP syntax binnen de HTML code. Je ziet dat PHP code tussen een openings- (<?php) en een sluitingstag (?>) staat. Hier moet je rekening mee houden, anders kan de PHP code niet begrepen worden door de interpreter.

De fetch() function in regel 19 is handig. Deze function haalt bij elke iteratie van de while loop een rij op van alle rijen met taken die de query uit de taak tabel heeft opgehaald.

In de while loop wordt de data van elke rij opgehaald en in de table row van de tabel gestopt. Ga nu eens naar de applicatie en test of je de tabel met alle rijen ziet.

Het zal je opgevallen zijn dat we een “update” en “verwijder” link hebben gemaakt. In deze links verwijzen we naar de bestanden waar we zo dadelijk een rij kunnen updaten en verwijderen.

Zoals je in regel 26 en 27 ziet, halen we het id van de desbetreffende rij op en dat zetten we in de link die naar het desbetreffende bestand verwijst.

Op die manier kunnen we aan de hand van het id bepalen om welke rij het gaat en hier een update op gaan uitvoeren of het verwijderen. Het zal zo duidelijker worden in de volgende stappen.

Tabel iets netter maken met CSS 

De tabel met rijen (taken) ziet er nu een beetje kaal uit, toch? Met CSS gaan we het een klein beetje stijlen. Zet deze code neer in het “index.css” bestand:

td, th {
  border: 1px solid #999;
  padding: 0.5rem;
}

Sla het “index.css” bestand op en ga eens naar je applicatie. De applicatie ziet er nu zo uit:

De tabel ziet er nu al een stuk netter en overzichtelijker uit. Verder gaan we niks meer stijlen met CSS in deze applicatie.

Het gaat meer om de werking van de applicatie, maar het is misschien leuk voor jou om bijvoorbeeld ook het formulier te stijlen met CSS?

Stap 7: Data wijzigen in MySQL database (Update)

We zijn al een eind op weg met het ontwikkelen van de to-do list met PHP, PDO en een MySQL database. De Update instructie is een hele belangrijke. We willen natuurlijk een een taak kunnen updaten.

Huidige data ophalen van rij in formulier met id

In “read.php” hebben we al een link aangemaakt die verwijst naar het “update.php” bestand en het id meegeeft van de rij die je wil updaten. Dat staat in regel 26 in “read.php”.

Het id van de rij is belangrijk om te weten, want dan kunnen we in “update.php” de data van de rij ophalen die we willen updaten en in het updateformulier zetten.

De code in het “update.php” bestand ziet er als volgt uit:

<?php

// Kopieer code van connect.php naar dit bestand
include 'connect.php';

// Als er in de url een id is meegegeven van de rij, dan de id aan variabele geven
if (isset($_GET['id'])) {
    $id = $_GET['id'];
}

// SELECT query uitvoeren en alle data van rij ophalen
$select = $conn->query("SELECT * FROM taak WHERE id=$id");
$row = $select->fetch();

?>

<!-- Opgehaalde data van rij in value attribuut zetten -->
<form method="post">
    <input type="text" name="naam" value="<?php echo $row['naam']; ?>"><br>
    <input type="text" name="taakomschrijving" value="<?php echo $row['taakomschrijving']; ?>"><br>
    <input type="date" name="deadline" value="<?php echo $row['deadline']; ?>"><br>
    <input type="submit" name="submit" value="Updaten"><br>
</form>

Met de $_GET super global variabele is het mogelijk om de waarde van het id op te halen uit de url. Het id geven we mee in een url door de link in “read.php” die verwijst naar “update.php” en het id van de rij meegeeft.

We halen het id van de rij op die we willen updaten en geven het aan een variabele, zoals je ziet in regel 8. Het id hebben we nodig in de SELECT query in regel 12 om uiteindelijk de juiste rij op te halen die we willen updaten.

De fetch() function haalt de rij weer op in regel 13 en in het updateformulier in regel 18 ontleden we de rij en zetten de data in de value attributen, zodat de data zichtbaar is in de invoervelden.

Sla de code op en test het eens uit door op de “update” link te klikken van een rij. Onze (test)rij komt er zo uit te zien in het updateformulier:

Aangepaste data van rij ophalen, verwerken in query en sturen naar database

Als je nu op de “updaten” button klikt, dan gebeurt er helemaal niks. De data van de rij die we willen updaten staat nu wel netjes in het updateformulier, maar we willen natuurlijk ook dat het verwerkt wordt in de database.

Om dat te bewerkstelligen, ziet de volledige code in “update.php” er zo uit:

<?php

// Kopieer code van connect.php naar dit bestand
include 'connect.php';

// Als er in de url een id is meegegeven van de rij, dan de id aan variabele geven
if (isset($_GET['id'])) {
    $id = $_GET['id'];
}

// SELECT query uitvoeren en alle data van rij ophalen
$select = $conn->query("SELECT * FROM taak WHERE id=$id");
$row = $select->fetch();

// Als er op de button van het updateformulier is geklikt, dan de geüpdatete data van een rij verwerken in database
if (isset($_POST['submit'])) {
    
    // Waardes van formulier ophalen en aan variabele geven
    $naam = $_POST['naam'];
    $taakomschrijving = $_POST['taakomschrijving'];
    $deadline = $_POST['deadline'];

    // UPDATE query maken om geüpdatete data van een rij te kunnen verwerken in database
    $query = "UPDATE taak SET naam = '".$naam."',
                            taakomschrijving = '".$taakomschrijving."',
                            deadline = '".$deadline."'
                            WHERE id=$id";

    // Statement voorbereiden
    $stmt = $conn->prepare($query);

    // Query uitvoeren
    $stmt->execute();

    // Weer teruggaan naar index.php
    header("location: index.php");
}

?>

<!-- Opgehaalde data van rij in value attribuut zetten -->
<form method="post">
    <input type="text" name="naam" value="<?php echo $row['naam']; ?>"><br>
    <input type="text" name="taakomschrijving" value="<?php echo $row['taakomschrijving']; ?>"><br>
    <input type="date" name="deadline" value="<?php echo $row['deadline']; ?>"><br>
    <input type="submit" name="submit" value="Updaten"><br>
</form>

Van regel 16 tot 37 staat de code die zorgt dat de rij daadwerkelijk geüpdatet wordt in de database. In regel 24 in de UPDATE query zie je dat we ook weer het id van de rij gebruiken om de juiste rij in de database te updaten.

Probeer eens een rij te updaten als test en kijk of alles klopt. Klopt alles? Dan ben je klaar voor de laatste stap!

Stap 8: Data verwijderen uit MySQL database (Delete)

We zijn alweer bij de laatste stap aangekomen bij het maken van deze to-do list met PHP, PDO en een MySQL database. Deze stap is heel eenvoudig als je de code uit de vorige stappen snapt.

Het is handig om een rij te kunnen verwijderen uit de to-do list en daarom gaan we de Delete instructie doorvoeren in de code.

De code in het “delete.php” bestand ziet er zo uit:

<?php

// Kopieer code van connect.php naar dit bestand
include 'connect.php';

// Als er in de url een id is meegegeven van de rij, dan de id aan variabele geven
if (isset($_GET['id'])) {
    $id = $_GET['id'];
}

// DELETE query maken om rij uit database te kunnen verwijderen
$query = "DELETE FROM taak WHERE id=$id";

// Statement voorbereiden
$stmt = $conn->prepare($query);

// Query uitvoeren
$stmt->execute();

// Weer teruggaan naar index.php
header("location: index.php");

?>

Net zoals bij het updaten van een rij hebben we ook hier weer het id nodig van de rij die we willen verwijderen. In “read.php” in regel 27 hebben we een link aangemaakt “Verwijderen” voor elke rij en in die link geven we ook het id mee van de rij die we willen verwijderen.

Zoals je hierboven ziet in het “delete.php” bestand, halen we met de $_GET super global variabele weer het id op in regel 8 van de rij die we willen verwijderen en geven het aan een variabele.

Deze variabele gebruiken we in de DELETE query in regel 12 om de juiste rij in de database te kunnen verwijderen. Probeer eens een rij te verwijderen door op de “Verwijderen” link van een rij te klikken.

Dat komt er dan zo uit te zien:

Werkt alles helemaal goed? Dat is top! Heb je last van errors en weet je niet hoe je het op kan lossen? Laat dan onder het artikel een reactie achter en dan kunnen we je helpen.

Volledige code van dit project

Op GitHub vind je alle code terug van dit project. Ook is er code bijgevoegd om SQL-injectie tegen te gaan. In het volgende hoofdstuk lees je daar iets meer over.

Als het via het stappenplan niet helemaal is gelukt en je komt er echt niet uit, kan je alle code van GitHub halen en gebruiken.

Echter is het beter om eerst stap voor stap deze to-do list te maken met PHP, PDO en een MySQL database. Zo leer je de code echt beter begrijpen en je snapt hoe bepaalde technieken met elkaar samenwerken.

Weet je nog nog niet goed wat GitHub is? Lees dan het artikel “Wat is GitHub?”. Ook staat er hier op ProgrammeerPlaats een GitHub tutorial voor beginners.

Zelf dit project verbeteren en uitbreiden en/of met andere projecten aan de slag

Dit project is vrij eenvoudig en je kan het natuurlijk verder verbeteren en uitbreiden. Het gaat er meer om met het maken van deze to-do list met PHP, PDO en een MySQL database dat je de technieken erachter begrijpt.

Als je er serieus mee aan de slag wil gaan, dan moet je wel rekening houden met SQL-injectie. De bovenstaande code is namelijk gevoelig voor SQL-injectie. In dit artikel over SQL-injectie leer je om de applicatie ertegen te beschermen.

Andere voorbeelden van verbeteringen en uitbreidingen die je zou kunnen toepassen op dit project:

• Meer exceptions opvangen
• Zorgen dat je alleen een deadline kan vaststellen op de huidige en een toekomstige dag
• De formulieren en de tabel mooi stijlen met CSS
• Controleren of velden van het formulier ingevuld zijn
• Database beveiligen met wachtwoord
• Loginsysteem maken zodat alleen bepaalde gebruikers taken aan to-do list kunnen toevoegen

Ideeën voor projecten met PHP, PDO en een MySQL database

Je hebt nu basiskennis opgedaan over hoe je een eenvoudig project maakt met PHP, PDO en een MySQL database. Smaakt dit naar meer?

Een gaaf project met deze technieken zou mooi staan op je portfolio website. In het artikel “Portfolio website maken” leer binnen een mum van tijd een portfolio website maken, als je er nog geen hebt.

Enkele ideeën voor projecten met PHP, PDO en een MySQL database zijn:

• Een (eenvoudige) CMS (Contentmanagementsysteem) maken, bijvoorbeeld een simpele versie van WordPress
• Forum ontwikkelen, dit kan je natuurlijk zo makkelijk of moeilijk maken als je zelf wil
• Een quiz maken
• Simpele versie van Facebook ontwikkelen
• Kledingadvies applicatie maken
• Een review website maken

Zo zijn er nog ontelbare mogelijkheden! Hopelijk heb je zelf ook inspiratie opgedaan en kom je ook op gave ideeën waarmee je aan de slag kan.

Meer over PHP en MySQL databases leren + PDO

Wil je dieper duiken in PHP en MySQL databases om zo gave projecten te gaan maken? Boeken en cursussen zijn een goede manier om dat te doen. PDO komt daar ook vaak bij kijken.

Op Bol.com vind je de beste PHP en MySQL boeken. Vind je cursussen prettiger? Dan staan er op Pluralsight hele goede cursussen over PHP en MySQL.

In “Pluralsight review en ervaringen” lees je meer over dit gave platform. Je kan het platform zelfs 10 dagen helemaal gratis uitproberen.

Ook op Coursera staan er cursussen van goede kwaliteit over PHP en MySQL. In “Coursera review” lees je meer over dit online leerplatform.

Maak voor jezelf als programmeur/developer een portfolio website, doe meer kennis op over PHP en MySQL met boeken en/of cursussen, maak gave projecten en zet ze op je portfolio website. Succes!

Heb je nog vragen en/of opmerkingen? Laat dan hieronder een reactie achter of neem contact op.