Artikels invoegen in een databanktabel

Het gebruik van een databank en PHP voor het automatiseren van webinhouden, wordt pas echt zinvol als je op een gebruiksvriendelijke manier inhouden kan toevoegen aan de databank. Uiteraard kan je dit via PHPMyAdmin, de databankbeheersoftware (geschreven in PHP) die op de meeste hostingpakketten standaard al aanwezig is. Maar in PHPMyAdmin laat je de eindgebruiker best geen inhouden toevoegen.

In deze les maken we een HTML-formulier waarin de eindgebruiker de benodigde informatie kan invoeren. Het formulier bevat een "verzend"knop. Wanneer de gebruiker daarop klikt, stuurt hij/zij de inhoud van het formulier naar een PHP-bestand op de server. Dat bestand zal de verzonden informatie uitlezen en invoegen in de juiste kolommen in de tabel (articles) in de databank.

Ingrediënten

1. Een HTML-formulier

2. Een PHP-bestand dat de verzonden informatie bewaart.

Een invoerformulier in HTML

Een vrij volledige handleiding voor het bouwen van formulieren vind je via deze link: https://www.w3schools.com/html/html_forms.asp

We zorgen ervoor dat het HTML-formulier de structuur van de databanktabel volgt. Zo ziet onze tabel eruit in PHPMyAdmin:

We starten vanuit het HTML-sjabloon dat je via een link in de menubalk vindt. Daaraan voegen we een FORMULIER toe.

    <div class="container">
         <div class="row">
             <div class="twelve columns">
                 <form method="post" action="save.php">
                     <div>
                         <input type="text" placeholder="Voer hier een titel in" name="title"/>
                     </div>
                     <div>
                         <label>Voer hier een datum in:</label>
                         <input type="date" name="articledate"/>
                     </div>
                     <div>
                         <label>Voer hier de tekst van het artikel in:</label>
                         <textarea name="content"></textarea>
                     </div>
                     <div>
                         <input type="text" id="cover" name="cover" placeholder="adres van de afbeelding"/>
                     </div>
                     <div>
                         <button id="bewaar">Bewaar</button>
                     </div>
                 </form>
             </div>
         </div>
     </div>

Namen geven aan invoervelden

Met een <input>-element maken we een invoerveld in onze webpagina. Elke "input" krijgt ook een "name"-attribuut. We nemen hiervoor telkens de "kolomnaam" van de tabel in de databank. In de tabel "articles" in onze databank vinden we bijvoorbeeld de kolommen "title", "articledate" en "cover"... We gebruiken exact dezelfde benamingen voor de invoervelden van ons formulier.

Types geven aan invoervelden

Je kan aan een <input>-element ook een type-attribuut geven. Standaard is het type "text" als je tenminste tekst als invoer verwacht. Het type "date" tovert een datumselectorvenster tevoorschijn als je in het datumveld klikt (in de browser).

Veel tekst = textarea

De kolom "content" in onze databanktabel verwacht veel tekst. Een klein invoerveld maakt invoer van tekst moeilijk. Daarom kiezen we in dit geval voor een <textarea>-element. Aan dit element geef je eveneens een "name"-attribuut.

WYSIWYG-editor

Heel wat CMS-systemen vervangen een standaard <textarea>-element door een WYSIWYG-editor, zodat de eindgebruiker net zoals in een tekstverwerker inhouden kan toevoegen.

Installeer CME-editor

De functionaliteit van zo'n editor bouw je hoofdzakelijk in de "frontend" met javascript. Via deze link vind je mijn Crowl Mini Editor (een wat minimale versie van de volledige editor die in mijn CMS zit, maar perfect bruikbaar voor jouw opdrachten.

Download CME-editor...

Demofilm

Het formulier verzenden

De <form>-tag verwacht nog 2 attributen:

action: Het PHP-bestand op de server waar de informatie naar verzonden moet worden.
method: POST. Je zou ook voor GET kunnen kiezen, maar als je informatie wil "bewaren", dan is POST aan te raden.

Zoals je in de bovenstaande code kan zien, verzenden we het formulier naar een PHP-bestand met de naam save.php. Dat bestand moet zich in dezelfde map bevinden als de pagina met het formulier.

1. Verzonden formuliervelden opvragen

De verzonden formuliervelden kan je in dit PHP-bestand opvragen. Dit doen we op de volgende manier:

$title = $_POST["title"];

Hiermee bedoel ik dat je de geposte titel (title) in een variabele (een "doosje" met veranderlijke inhoud) stopt. Hetzelfde doen we met de waardes van "articledate", "cover" en "content".

2. Opgelet met weglatingstekens en aanhalingstekens

In PHP-code moet je net zoals in tal van andere programmeertalen, "teksten" insluiten tussen aanhalingstekens. Enkel op die manier zal de code de verzonden informatie niet beschouwen als een reeks losse tekens of karakters, maar als een "samenhorende tekst met zinnen". Het probleem is dat PHP-code zelf ook al aanhalingstekens gebruikt. Dit gebeurt bijvoorbeeld bij een SQL-instructie (een databankopdracht zoals in de code hieronder ("INSERT INTO ...). De PHP-interpreter (het stuk software dat de code "leest" en omzet in HTML) zal zo'n instructie starten als hij een aanhalingsteken tegenkomt in de code, en beëindigen bij het volgende aanhalingstekens. Programmeurs lossen dit op door tussen 2 aanhalingstekens, weglatingstekens te gebruiken enz.

Alles zal zonder problemen verlopen tot de "eindgebruiker" in een formulier zelf weglatingstekens of aanhalingstekens invoegt. Vanaf het moment dat de PHP-code zo'n tekst in de databank probeert te bewaren, loopt het mis in PHP.

Gelukkig biedt PHP zelf daar een oplossing voor met de functie mysqli_real_escape_string. Hoe dit precies in zijn werk gaat, hoef je niet te weten. Feit is dat PHP op die manier het probleem met de aanhalingstekens en weglatingstekens oplost. Maar... het maakt de code wel wat langer.

<!DOCTYPE html> 
<html lang="nl">
         <head>
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <link rel="stylesheet" href="https://www.schoolvoorbeeld.be/css/cssbib.css">
              <link rel="stylesheet" href="style/style.css">
              <title>Paginatitel</title> 
         </head> 
         <body>
              <div class="container">
                <div class="row">
                    <div class="twelve columns">
                    <?php
                    include "config.php";

                    // Create connection
                    $conn = new mysqli($servername, $username, $password, $dbname);
                    // Check connection
                    if ($conn->connect_error) {
                        die("Connection failed: " . $conn->connect_error);
                    } 

                    $title = mysqli_real_escape_string($conn, $_POST["title"]);
                    $articledate = mysqli_real_escape_string($conn, $_POST["articledate"]);
                    $content = mysqli_real_escape_string($conn, $_POST["content"]);
                    $cover= mysqli_real_escape_string($conn, $_POST["cover"]);
                                         
                    $gelukt = mysqli_query($conn,"INSERT INTO articles (title, articledate, content, cover) VALUES ('$title','$articledate','$content','$cover')");

                    if($gelukt){
                        echo "<h3>Joepie, ik kan het</h3>";
                    }else{
                        echo "<h3>Dom dom, ik maak een fout</h3>";
                    }

                    $conn->close();
                    ?>
                    </div>
                </div>
              </div>
         </body> 
</html>

3. Is het gelukt of niet? Feedback van de databank

Als de verbinding met de databank foutloos verloopt en je voert een SQL-opdracht uit in die databank, dan heb je nog geen garantie of het echt gelukt is wat je wou bereiken. PHP stuurt de opdracht naar de databank, en daarmee is de kous af. Als er iets in de databank foutloopt, is dat niet meteen de fout van PHP (wel die van jou).

Je kan echter controleren of de opdracht effectief is gelukt. In het bovenstaande codevoorbeeld, hebben we daarom een variabele met de naam $gelukt aangemaakt. Als de databankopdracht foutloos verloopt, stuurt de databank een 1 terug (= true = waar). Als we vervolgens controleren of if($gelukt), dan weten we dat alles naar wens is verlopen.