Workshop Form/Post/Get

Inleiding

In deze workshop ga je aan de slag met een formulier die variabelen kan versturen. In het formulier wordt vooraf bepaald welke variabelen het moet sturen met behulp van het attribuut name. Daarna worden deze variabelen in PHP opgevangen met de array $_GET of $_POST.

Het formulier kan met het attribuut action verzenden naar een andere pagina of naar zichzelf. In deze workshop kiezen we voor de laatst genoemde optie: verzenden naar de pagina zelf. We controleren of er iets verzonden is en of het om GET- of POST-variabelen gaat.

Theorie

Lees je eerst graag de theorie achter deze workshop? Hieronder zie je de gebruikte techniek.

$_GET

$_POST

Stappenplan

Volg de onderstaande stappen om een werkende demo te maken met een formulier en PHP.

Maak een map aan in de htdocs van XAMPP waarin je de workshop gaat uitwerken.
Navigeer naar de map toe.

Clone met behulp van de terminal de boilerplate. Voer onderstaande commando uit.

git clone <https://github.com/Stroomer/webdev-boilerplate-workshop-form-post-get.git> .

Maak een nieuw bestand aan genaamd index.html.
Maak in dit bestand HTML aan (door VSCode gegenereerd met !).
Verander de extensie van .html naar .php.
Maak in <head></head> een verwijzing naar het CSS-bestand.
```
<link rel="stylesheet" href="./assets/css/style.css">
```
Maak in de <body></body> een nieuw formulier aan.
```
<form action="" method="get">

</form>
```

Maak een <label> en een <input> aan voor de voornaam.

<label for="voornaam">Voornaam:</label>
<input type="text" name="voornaam" id="voornaam" placeholder="Vul hier je voornaam in" value="<?php echo $voornaam; ?>">

Maak een <label> en een <input> aan voor de achternaam.

<label for="achternaam">Achternaam:</label>
<input type="text" name="achternaam" id="achternaam" placeholder="Vul hier je achternaam in" value="<?php echo $achternaam; ?>">

Maak een <label> en een <select> met meerdere <option> elementen aan voor bestelling.

Let op: in het onderstaande code-fragment staan al variabelen die nog niet herkend worden. Die gaan voor nu nog een warning of error geven.

Informatie over de ternary-operator vind je hier.

```php
<label for="bestelling">Bestelling:</label>
<select name="bestelling">
    <option value="" <?php echo ($bestelling === '' ? 'selected' : ''); ?>>Selecteer bestelling</option>
    <option value="1" <?php echo ($bestelling === 1 ? 'selected' : ''); ?>>Avocado</option>
    <option value="2" <?php echo ($bestelling === 2 ? 'selected' : ''); ?>>Paprika</option>
    <option value="3" <?php echo ($bestelling === 3 ? 'selected' : ''); ?>>Rucola</option>
 </select>
```

Voeg een submit-button toe (binnen de form-tags).
```
<input type="submit" value="Submit">
```

Maak helemaal bovenin index.php een nieuw php-gedeelte aan voor het controleren op eventuele binnenkomende variabelen in de GET- en POST-array.

<?php
    $voornaam = $achternaam = $bestelling = "";
    
    if(!empty($_GET)) {
        $voornaam = $_GET['voornaam'];
        $achternaam = $_GET['achternaam'];
        $bestelling = intval($_GET['bestelling']);
    }
    
    if (!empty($_POST)) {
        $voornaam = $_POST['voornaam'];
        $achternaam = $_POST['achternaam'];
        $bestelling = intval($_POST['bestelling']);
    }
?>

Voeg nu nog een <div> toe waarin de output wordt getoond.

<div class="output">
            <?php
                if (!empty($_GET) || !empty($_POST)) {
                    echo "<h2>Bestelling Gegevens</h2>";
                    echo "<p>Voornaam: $voornaam</p>";
                    echo "<p>Achternaam: $achternaam</p>";
                    echo "<p>Bestelling: ";
                    switch ($bestelling) {
                        case 1:
                            echo "Avocado";
                            echo "<img src='./assets/images/avocado.png' alt='avocado'>";
                            break;
                        case 2:
                            echo "Paprika";
                            echo "<img src='./assets/images/paprika.png' alt='paprika'>";
                            break;
                        case 3:
                            echo "Rucola";
                            echo "<img src='./assets/images/rucola.png' alt='rucola'>";
                            break;
                        default:
                            echo "Geen bestelling geselecteerd";
                    }
                    echo "</p>";
                }
            ?>
        </div>

Eindresultaat

Je zou nu ongeveer dit eindresultaat moeten hebben. Dit zijn de basics van GET en POST variabelen vanuit een formulier verwerken met PHP.