Hoofdstuk 10: Formulieren & $

HTML Formulieren

Om gebruikersinvoer te verwerken heb je HTML-formulieren nodig. Een formulier bestaat uit een <form> tag met twee belangrijke attributen:

action – de URL van het PHP-bestand dat de data verwerkt
method – de HTTP-methode: "GET" of "POST"

Binnen het formulier gebruik je invoervelden met een name-attribuut. Dit attribuut bepaalt de sleutel waarmee je de data in PHP kunt ophalen.

<?php
// voorbeeld: zoekformulier (HTML output)
echo '<form action="resultaten.php" method="GET">';
echo '<label>Zoekterm: </label>';
echo '<input type="text" name="zoekterm">';
echo '<input type="submit" value="Zoeken">';
echo '</form>';
?>

Met method="GET" worden de formuliergegevens als query string aan de URL toegevoegd: resultaten.php?zoekterm=php.

Let op: In de oefeningen hieronder hoef je GEEN <?php en ?> tags te typen. Het platform regelt dit automatisch. Je typt alleen de PHP-code zelf.

Oefening 1

Gebruik echo om een HTML-formulier te tonen met action="verwerk.php" en method="GET". Het formulier bevat een tekstveld met name="naam" en een submitknop met tekst "Verstuur".

Jouw code:

// Schrijf hier je code

Oefening 2

Maak met echo een formulier met action="zoek.php" en method="GET". Voeg een label "Zoekterm: " toe, een tekstveld met name="q" en een submitknop met tekst "Zoeken".

Jouw code:

// Schrijf hier je code

Oefening 3

Maak met echo een formulier met action="filter.php" en method="GET". Voeg een <select> dropdown toe met name="categorie" en drie opties: "Boeken", "Films", "Muziek". Voeg ook een submitknop toe.

Jouw code:

// Schrijf hier je code

Oefening 4

Maak met echo een formulier met action="rekenmachine.php" en method="GET". Voeg twee number-velden toe met name="getal1" en name="getal2", en een submitknop met tekst "Bereken".

Jouw code:

// Schrijf hier je code

Oefening 5

Maak met echo een compleet zoekformulier met action="resultaten.php" en method="GET". Voeg toe: een tekstveld met name="zoekterm", een dropdown met name="categorie" met opties "Alles", "Nieuws", "Sport", en een submitknop.

Jouw code:

// Schrijf hier je code

Oefening 6

Maak met echo een formulier met action="profiel.php" en method="GET". Voeg toe: een tekstveld met name="voornaam", een tekstveld met name="achternaam", een number-veld met name="leeftijd", en een submitknop met tekst "Bekijk profiel".

Jouw code:

// Schrijf hier je code

Oefening 7

Maak met echo een formulier met action="bestelling.php" en method="GET". Voeg toe: een tekstveld met name="product", een number-veld met name="aantal", een select-dropdown met name="maat" met opties "S", "M", "L", "XL", en een submitknop.

Jouw code:

// Schrijf hier je code

$_GET Verwerken

Als een formulier met method="GET" wordt verstuurd, komen de gegevens in de superglobal $_GET. Dit is een associatieve array met de veldnamen als sleutels.

Belangrijk: controleer altijd eerst met isset() of een waarde bestaat voordat je hem gebruikt. Anders krijg je een "Undefined index" fout.

<?php
// URL: resultaten.php?zoekterm=php
if (isset($_GET['zoekterm'])) {
    $zoekterm = $_GET['zoekterm'];
    echo "Je zocht op: " . $zoekterm;
} else {
    echo "Geen zoekterm opgegeven.";
}
?>

De query string in de URL ziet er zo uit: pagina.php?sleutel=waarde&sleutel2=waarde2. Elke sleutel correspondeert met het name-attribuut van een formulierveld. Met $_GET['sleutel'] haal je de waarde op.

Oefening 1

Stel dat de URL pagina.php?naam=Jan is. Controleer met isset() of $_GET['naam'] bestaat. Zo ja, toon "Hallo Jan" (met de waarde uit GET). Zo niet, toon "Geen naam opgegeven".

Jouw code:

// Schrijf hier je code

Oefening 2

Controleer of $_GET['leeftijd'] bestaat. Zo ja, toon "Je bent X jaar oud" met de waarde. Zo niet, toon "Leeftijd onbekend".

Jouw code:

// Schrijf hier je code

Oefening 3

Controleer of zowel $_GET['getal1'] als $_GET['getal2'] bestaan. Zo ja, tel ze op en toon het resultaat als "De som is: X". Zo niet, toon "Vul beide getallen in".

Jouw code:

// Schrijf hier je code

Oefening 4

Controleer of $_GET['naam'] en $_GET['leeftijd'] bestaan. Als beide bestaan, toon "Naam: X, Leeftijd: Y". Als alleen naam bestaat, toon "Hallo X". Als geen van beide bestaat, toon "Geen gegevens".

Jouw code:

// Schrijf hier je code

Oefening 5

Simuleer een zoekresultaatpagina. Controleer of $_GET['zoekterm'] bestaat en niet leeg is. Zo ja, toon "Resultaten voor: X". Is de waarde leeg, toon "Typ een zoekterm". Bestaat de parameter niet, toon "Gebruik het zoekformulier".

Jouw code:

// Schrijf hier je code

Oefening 6

Controleer of $_GET['kleur'] bestaat. Zo ja, gebruik een switch-statement om de volgende kleuren af te handelen: "rood" toont "Kleur: Rood", "blauw" toont "Kleur: Blauw", "groen" toont "Kleur: Groen". Bij een onbekende kleur, toon "Onbekende kleur". Bestaat de parameter niet, toon "Geen kleur gekozen".

Jouw code:

// Schrijf hier je code

Oefening 7

Schrijf een stuk code dat een begroeting toont op basis van $_GET['taal']. Als de taal "nl" is, toon "Hallo!". Als het "en" is, toon "Hello!". Als het "de" is, toon "Hallo!". Anders toon "Onbekende taal". Gebruik een if/elseif/else structuur.

Jouw code:

// Schrijf hier je code

Invoer Opschonen

Data uit formulieren is niet altijd netjes. Gebruikers typen extra spaties, willekeurige hoofdletters, etc. Het is een goede gewoonte om invoer op te schonen voordat je het gebruikt.

<?php
if (isset($_GET['naam'])) {
    $naam = trim($_GET['naam']);
    $naam = strtolower($naam);
    $naam = ucfirst($naam);
    echo "Welkom, " . $naam;
}
?>

Je kunt ook de functies uit Hoofdstuk 9 combineren met formulierverwerking voor robuustere code.

Oefening 1

Controleer of $_GET['naam'] bestaat. Zo ja, schoon de naam op met trim() en toon "Welkom, X". Zo niet, toon "Geen naam".

Jouw code:

// Schrijf hier je code

Oefening 2

Controleer of $_GET['email'] bestaat. Zo ja, schoon het op met trim() en strtolower() en toon het resultaat. Zo niet, toon "Geen email opgegeven".

Jouw code:

// Schrijf hier je code

Oefening 3

Schrijf een functie schoonInput($data) die trim() en strtolower() toepast op de meegegeven string en het resultaat teruggeeft. Gebruik deze functie om $_GET['zoekterm'] op te schonen en toon "Je zocht op: X". Controleer eerst met isset().

Jouw code:

// Schrijf hier je code

Oefening 4

Controleer of $_GET['categorie'] bestaat. Zo ja, pas trim() en strtolower() toe. Gebruik een switch op de opgeschoonde waarde: "boeken" toont "Categorie: Boeken", "films" toont "Categorie: Films", "muziek" toont "Categorie: Muziek". Default toont "Onbekende categorie".

Jouw code:

// Schrijf hier je code

Oefening 5

Bouw een complete "productzoeker". Controleer of zowel $_GET['zoekterm'] als $_GET['categorie'] bestaan. Schoon beide op met trim() en strtolower(). Toon: "Zoeken naar 'X' in categorie 'Y'". Als een van beide ontbreekt, toon "Vul alle velden in".

Jouw code:

// Schrijf hier je code

Oefening 6

Schrijf code die een paginanummer uit de URL leest via $_GET['pagina']. Als het bestaat en numeriek is (check met is_numeric()), toon "Pagina: X". Als het bestaat maar niet numeriek, toon "Ongeldig paginanummer". Als het niet bestaat, toon "Pagina: 1" (standaardwaarde).

Jouw code:

// Schrijf hier je code

Oefening 7

Bouw een complete profielpagina. Controleer of $_GET['voornaam'], $_GET['achternaam'] en $_GET['leeftijd'] bestaan. Schoon alle waarden op met trim(). Pas ucfirst(strtolower()) toe op de namen. Controleer of leeftijd numeriek is. Als alles geldig is, toon "Profiel: X Y, Z jaar". Anders toon "Ongeldige gegevens".

Jouw code:

// Schrijf hier je code

Hoofdstuk 10: Formulieren & $_GET

HTML Formulieren

Oefening 1

Oefening 2

Oefening 3

Oefening 4

Oefening 5

Oefening 6

Oefening 7

$_GET Verwerken

Oefening 1

Oefening 2

Oefening 3

Oefening 4

Oefening 5

Oefening 6

Oefening 7

Invoer Opschonen

Oefening 1

Oefening 2

Oefening 3

Oefening 4

Oefening 5

Oefening 6

Oefening 7

Samenvatting