4. Formulieren

Op veel website worden tegenwoordig formulieren gebruikt om bezoekers van de website de gelegenheid te geven interactie met de website te hebben. Hieronder volgen een paar voorbeelden die u misschien bekend voorkomen.

• Het inlog formulier van Hotmail:



• Een reactie formulier op de website van de Telegraaf:



• En het zoek formulier van Google:

Ze hebbben allemaal gemeen dat er vakken zijn waar u iets in kunt typen, dat u met de muis ergens op kunt klikken om verder te gaan (inloggen/versturen/zoeken) en dat er op de pagina waar u terecht kwam iets gebeurde met wat u invulde. Wij gaan in dit hoofdstuk aan de slag met een formulier dat vergelijkbaar is met die van de Telegraaf-website.

4.1. De HTML achter een formulier

Ook al wordt HTML in deze cursus bekend verondersteld, het is goed voorstelbaar dat de HTML voor formulieren een beetje is weggezakt aangezien het zo goed als onbruikbaar is zonder de hulp van een taal als PHP. Het formulier waarmee we gaan werken ziet er als volgt uit:

Opdracht 5.1.

1. Download de code voor dit formulier door hier met rechtermuisknop te klikken en te kiezen voor "Doel opslaan als" (of in Firefox: "Koppelink opslaan als").
2. Sla het bestand form.html op in c:\xampp\htdocs\phpcursus\4\ (of in c:\mijn\eigen\map\htdocs\phpcursus\4\ indien u de installatie map van XAMPP had aangepast).
3. Bekijk het formulier op http://localhost/phpcursus/4/form.html.
4. Vraag de broncode van het formulier op (Beeld > Bron), en bestudeer deze. Hieronder bespreken we het één en ander.

Een eerste regel die misschien opvalt, maar in iedere geval belangrijk is, is deze:

<form name="reactie_formulier" method="post" action="verwerk.php">

Wat het methode attribuut doet bespreken we zo. Het action-attribuut geeft aan waar, nadat op de verstuur knop is gedrukt, de browser heen gestuurd moet worden; verwerk.php dus in dit geval. Wat we daar dan moeten doen bespreken we zometeen.

Verder staan er twee tags:

<input type="text" name="naam" />

Deze tags vormen de input-velden; de velden waar tekst ingetypt kan worden. Het is belangrijk dat ze allemaal een unieke naam krijgen.

Een laatste opmerkelijk tag is:

<input  type="submit" value="verstuur" />

Dit is een speciaal type van het vorige, deze zorgt ervoor dat het formulier verzonden wordt naar de pagina die gespecificeerd was in action.

4.2. Get en Post

Er zijn twee manieren om het formulier te versturen, deze manieren worden methoden genoemd. In het voorbeeld wordt gebruik gemaakt van de post methode.

Opdracht 5.2.

1. Open phpcursus\4\form.html in kladblok
2. Controleer of het attribuut methode ingesteld staat op post.
3. Surf naar http://localhost/phpcursus/4/form.html, vul het formulier in met willekeurige informatie en klik eens op verstuur.
4. Kijk wat er gebeurt.
5. Waarschijnlijk krijgt u de melding "Object niet gevonden!", maar let vooral op de adresbalk, hier staat: http://localhost/phpcursus/4/verwerk.php.
6. Verander de methode nu in get; regel 6 van form.html luidt dan dus:

   <form name="reactie_formulier" method="get" action="verwerk.php">
   

7. Surf opnieuw naar http://localhost/phpcursus/4/form.html en druk op F5 om de nieuwe versie (met get methode) te krijgen.
8. Vul weer fictieve informatie en druk weer op verstuur.
9. De adresbalk moet er nu ongeveer uitzien als:

De inhoud van het formulier is achter de bestandsnaam verwerk.php gezet. Het verschil tussen get en post is hiermee geïllustreerd. Get plakt alles vast aan de url, dit kan handig zijn omdat er duidelijk te zien is wat er gebeurd. Maar vaker is het onhandig omdat er een limiet is aan de lengte van waarden die zo meegestuurd kunnen worden. Verder kan het er ook slordig uitzien. Om deze reden werken wij hier met de post methode.

Opdracht 5.3.

Zet de methode in phpcursus\4\form.html terug naar post.

4.3. Een formulier verwerken

Intussen weten we dat het formulier, zodra het ingevuld is en er op verstuur geklikt is, naar verwerk.php gestuurd wordt. Wat we vervolgens vaak willen is de informatie uit het formulier valideren; kijken of het juist is ingevuld. En als dit het geval is, willen we het meestal opslaan. Dit opslaan doen we hier nog even niet, dat kunnen we pas zodra we met de database kunnen werken.

De informatie uit het formulier ophalen is eigenlijk heel eenvoudig, het gaat met de zogeheten superglobal $_POST (of natuurlijk $_GET als we gebruik zouden maken van de get methode). Het volgende script is een eerste versie van verwerk.php

<html>
<head>
	<title>Formulier verwerken</title>
</head>
<body>
U vulde in:
<table>
<?php
echo "<tr><td>Naam: </td><td>" . $_POST['naam']  . "</td></tr>\n";
echo "<tr><td>E-mail: </td><td>" . $_POST['email']  . "</td></tr>\n";
echo "<tr><td>Reactie: </td><td>" . $_POST['reactie']  . "</td></tr>\n";
?>
</table>
</body>
</html>

Opdracht 5.4.

1. Maak een nieuw bestand verwerk.php aan in de map phpcursus\4\.
2. Open het bestand in kladblok en plak het bovenstaande script erin
3. Surf weer naar http://localhost/phpcursus/4/form.html, vul het formulier in met willekeurige informatie en klik weer op verstuur.

4.3.1. Valideren

Nu kunnen we dus de gegevens die in het formulier zijn ingevoerd weer op het scherm krijgen, maar wat gebeurt er nu als een bezoeker niets of niet kloppende gegevens invoert? Met niet kloppend bedoelen we in dit geval bijvoorbeeld dat het e-mailadres niet de vorm van een e-mailadres heeft. We kunnen natuurlijk niet weten of een e-mailadres wel echt bij de bezoeker hoort.

Het is duidelijk dat we moeten checken wat er ingevoerd wordt voor we het weer naar de browser sturen of er iets anders mee doen. Dit checken noemen we valideren. Eerst controleren we of de variabele überhaupt binnengekomen is. Dit doen we door te kijken of deze aanwezig is in het $_POST array met behulp van de isset() functie. Daarbij controleren we ook of deze geen lege string bevat.

<?php
if (isset($_POST['naam']) && $_POST['naam'] != '' ) {
    $naam = $_POST['naam'];
	echo "<tr><td>Naam: </td><td>" . $naam  . "</td></tr>\n";
    }
else {
	echo "<tr><td>Naam: </td><td><em>Vul een naam in!</em></td></tr>\n";
    }
?>

Opdracht 5.5

1. Open verwerk.php opnieuw in kladblok
2. Verander het script zo dat bovenstaand stukje code ingepast wordt
3. Sla op maar sluit niet af
4. Surf naar http://localhost/phpcursus/4/form.html
5. Vul niets in bij naam en druk op verstuur, kijk of het zojuist gemaakte script correct werkt
6. Zorg dat deze validatie ook toegepast wordt op het e-mailadres en de reactie
7. Controleer de werking van het script
8. Kijk eventueel hier als u er niet uitkomt of ter controle

4.3.1.1 E-mailadres valideren met Filters

if ( isset($_POST['email'])  && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) )  {
    ...
  }
else {
    ...
 }

Opmerking: we vervangen de code die nu niet relevent is even door ...

Opmerking: a && b wordt waar als a en b beide waar zijn.

4.3.1.2 Valideren met Reguliere Expressies

Het aantal validatie filters is echter beperkt. Er is bijvoorbeeld geen validatie filter voor Nederlandse postcode. Deze kunt u controleren met behulp van een reguliere expressie. Reguliere expressies zijn specificaties van hoe een string er uit zou moeten zien, en gaan net even te ver voor deze online cursus. Op het web zijn veel goede bronnen te vinden die u verder kunnen helpen (bijv. www.regular-expressions.info/php.html).

4.3.2 Texten opschonen

We hebben nu al wel controle voor het e-mailadres, maar nog niet voor de naam en de reactie. Het zou echt dramatisch af kunnen lopen met onze website als een bezoeker HTML codes in ging voeren!

Opdracht 5.6

1. Bedenk wat er zou gebeuren wat er gebeurd als een bezoeker de volgende regel als 'e-mailadres' in zou voeren:

   </td></tr></table><table border='1'><tr><tr>
   

2. Probeer dit uit!
3. Kijk naar de broncode van verwerk.html als de bovenstaande regel ingevuld is, begrijp wat daar staat!

$naam = filter_var($_POST['naam'], FILTER_SANITIZE_STRING);

Opdracht 5.7

1. Open verwerk.php opnieuw in kladblok als het niet nog open staat.
2. Pas het script zo aan dat bovenstaande filtering ook uitgevoerd wordt.
3. Bedenk hoe de reactie gecontroleerd kan worden en doet dit!