Artikels filteren met zoekopdrachten

In de vorige les heb je geleerd hoe je artikels uit een MySQL-databank kan weergeven in een webpagina. De PHP-code op de server zet de rijen uit de tabel om in stukjes HTML-code. In deze les leg ik uit hoe je gegevens kan filteren uit de tabel. D.w.z. je wil net alles tonen, maar slechts bepaalde artikels die voldoen aan jouw zoekopdracht.


We starten met de code van de vorige les.

<!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">
             <title>Paginatitel</title>
        </head>
        <body>
             <div class="container">
                 <div class="row">
                     <div class="twelve columns">
                        <?php
                         include "config.php";
                          // Maak verbinding
                         $conn = new mysqli($servername, $username, $password, $dbname);
                         // Controleer verbinding
                         if ($conn->connect_error) {
                             die("Verbinding met databank is mislukt: " . $conn->connect_error);
                         }
                         $sql = "select * from articles";
                         $result = $conn->query($sql);
                         if ($result->num_rows > 0) {
                             // output data of each row
                             while($row = $result->fetch_assoc()) {
                             ?>
                             <article>
                                 <h3><?echo $_row["title"];?></h3>
                                 <p><?echo $_row["content"];?></p>
                             </article>
                             <?PHP
                             }
                         } else {
                             echo "Geen artikels gevonden in de databank";
                         }
                         $conn->close();
                     ?>
                 </div>
             </div>
         </div>
     </body> 
</html> 
Het is heel normaal dat de PHP-code alle artikels omzet in HTML. We vragen immers om alle artikels uit de tabel "articles" op te halen:
select * from articles
* betekent letterlijk "alles".

Koffie voor gevorderden: SQL om databankrecords te filteren

We willen nu echter gaan filteren op de resultaten. Stel dat ik enkel de artikels wil waarbij het woord "sint" in de titel voorkomt:

select * from articles where title like '%sint%'
We schrijven dus niet "title like sint", maar title like '%sint%'. De beide weglatingstekens maken duidelijk dat het hier gaat om een "woord", iets wat we in de programmeerwereld bestempelen als een "string" (nee, niet in die andere betekenis) of "tekenreeks". Stel dat het veld title getallen zou bevatten (INT, integer of geheel getal) dan zou je die weglatingstekens niet schrijven. 

Het woord sint staat niet enkel tussen twee weglatingstekens, maar ook tussen twee %-tekens. Die duiden aan dat er voor en achter het woord sint al andere tekens mogen staan. 

Indien je artikels zou willen zoeken waarvan de titels beginnen met "sint", dan zou je het volgende doen:

select * from articles where title like 'sint%'
Als je titels zou willen zoeken die perfect overeenkomen met het woord sint, dan zou je het volgende schrijven:
select * from articles where title = 'sint'
De query of zoekopdracht rechtstreeks in de SQL schrijven, is enkel zinvol als je in je pagina enkel bepaalde records wil weergeven. Je zou bijvoorbeeld in de databank een kolom kunnen aanmaken met de veldnaam "rubriek". Als je dan zou zoeken op een bepaalde rubriek, dan zou je enkel die artikels krijgen waarvan de veldnaam "rubriek" gelijk is aan een bepaalde naam.
select * from articles where rubriek = 'sport'
Het is ook mogelijk om te filteren op meerdere kolommen. 
select * from articles where title like '%sint%' or content like '%sint%'
Tot slot (maar daarmee is lang nog niet alles gezegd over SQL) kan je in meerdere velden zoeken op meerdere variabelen:
select * from adressen where postcode=3300 and naam like '%janssens%'
Nog meer nodig? Zoek dan op W3Schools.com:

De zoekopdracht verzenden via je browser

Uiteraard is een SQL-query pas echt zinvol als de eindgebruiker specifieke zoekopdrachten naar de server kan versturen. 

Website-informatie opvragen met GET

Als een websitebezoeker (een "client") via zijn browser (de clientbrowser of useragent) een pagina opvraagt, dan vraagt hij/zij de server in feite om een HTML-pagina op te sturen die bepaalde informatie bevat. De server stuurt vervolgens de webpagina terug (niet via de postbode).

We spreken in dit geval van een GET-request. De gebruiker of client wil INFORMATIE "KRIJGEN" (to get). Het adres dat je in de adresbalk van je browser invoert is dan de GET-REQUEST.


Je kan echter via de adresbalk nog extra informatie of zoekopdrachten mee verzenden. Dit doe je op de volgende manier:

ADRES VAN DE WEBPAGINA ?   ZOEKNAAM = ZOEKOPDRACHT

Bijvoorbeeld: www.schoolvoorbeeld.be/websites/studenten/student/zoek.php?q=sint

Om ervoor te zorgen dat onze PHP-pagina die verzonden waarde ook kan ontvangen, moeten we de PHP-code van zoek.php enigszins aanpassen:

$q = $_GET["q"];
$sql = "select * from articles where title like '%$q%'"; 
Wat merk je in bovenstaande regels code? 

1. We versturen een zoekterm met de benaming "q" naar de server. 

2. We sturen eveneens een waarde mee voor die zoekterm: q=sint

3. In de PHP-pagina op de server kunnen we die verzonden waarde opvragen met $_GET["q"]

4. Die "ontvangen waarde" stoppen we in een PHP-variabele (een soort tijdelijk doosje) met de naam $q.

5. Samengevat zien stap 3 en 4 er zo uit: $q = $_GET["q"];

6. Vervolgens passen we onze SQL-opdracht aan, zoals je hier boven kan zien. 

Een "Google"versie voor dummies

Uiteraard kan je aan de bezoekers van je website moeilijk zeggen: 

"Als je achter het adres in de adresbalk een ? tikt met daarachter "q=" en daar achter je zoekterm, dan kan je zoeken op deze site."

De gebruiker kan de zoekterm invoeren in een "zoekveld". Hij/zij klikt op een knop met het opschrift "zoek" en krijgt meteen het resultaat terug in HTML-code.

Een formulier met zoekveld bouwen

Voeg onder <body> de volgende code toe:

<form>
       <input type="text" name="q"/>
       <button>ZOEK</button> 
</form>
Dat is (dat besef ik) een heel rudimentair formulier, maar het doet perfect wat het moet doen.

Eén punt is heel erg belangrijk. Het invoerveld moet een attribuut "name" krijgen. De waarde van dat attribuut moet dezelfde zijn als de te ontvangen waarde op de server. Klinkt dit als Chinees? 

Wel, op de server ontvang je een variabele met de naam "q" ($_GET["q"]). We moeten zorgen dat het formulierveld hier dus ook name="q" krijgt.

Als je een zoekterm invoert en op "zoek" klikt, krijg je meteen ook het gewenste resultaat. Je zal de verzonden query ook zien verschijnen in de adresbalk:


Volgende les bouwen een formulier om gegevens toe te voegen aan de databank... Dan wordt het pas echt cool.

home