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 (X)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.
- 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").
- Sla het bestand form.html op in c:\xampp\htdocs\phpcursus\ (of in c:\mijn\eigen\map\htdocs\phpcursus\ indien u de installatie map van XAMPP had aangepast).
- Bekijk het formulier op http://localhost/phpcursus/4/form.html.
- 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.
- Open phpcursus\form.html in kladblok
- Controleer of het attribuut
methodeingesteld staat oppost. - Surf naar http://localhost/phpcursus/4/form.html, vul het formulier in met willekeurige informatie en klik eens op verstuur.
- Kijk wat er gebeurt.
- Waarschijnlijk krijgt u de melding "Object niet gevonden!", maar let vooral op de adresbalk, hier staat: http://localhost/phpcursus/4/verwerk.php.
- Verander de
methodenu inget; regel 6 van form.html luidt dan dus:<form name="reactie_formulier" method="get" action="verwerk.php">
- Surf opnieuw naar http://localhost/phpcursus/4/form.html en druk op F5 om de nieuwe versie (met
getmethode) te krijgen. - Vul weer fictieve informatie en druk weer op verstuur.
- 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\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>Email: </td><td>" . $_POST['email'] . "</td></tr>\n"; echo "<tr><td>Reactie: </td><td>" . $_POST['reactie'] . "</td></tr>\n"; ?> </table> </body> </html>
Opdracht 5.4.
- Maak een nieuw bestand verwerk.php aan in de map phpcursus\.
- Open het bestand in kladblok en plak het bovenstaande script erin
- 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 email-adres niet de vorm van een email-adres heeft. We kunnen natuurlijk niet weten of een email-adres wel echt bij de bezoeker hoort.
Het zou echt dramatisch af kunnen lopen met onze website als een bezoeker HTML codes in ging voeren!
Opdracht 5.5
- Bedenk wat er zou gebeuren wat er gebeurd als een bezoeker de volgende regel als `email-adres' in zou voeren:
</td></tr></table><table border='1'><tr><tr>
- Probeer dit uit!
- Kijk naar de broncode van verwerk.html als de bovenstaande regel ingevuld is, begrijp wat daar staat!
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. De eenvoudigste check, die alleen kijkt of een variabele niet leeg is ziet er zo uit:
<?php
$naam = $_POST['naam'];
if($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.6
- Open verwerk.php opnieuw in kladblok
- Verander het script zo dat bovenstaand stukje code ingepast wordt
- Sla op maar sluit niet af
- Surf naar http://localhost/phpcursus/4/form.html
- Vul niets in bij naam en druk op verstuur, kijk of het zojuist gemaakte script correct werkt
- Zorg dat deze validatie ook toegepast wordt op het email-adres en de reactie
- Controleer de werking van het script
- Kijk eventueel hier als u er niet uitkomt of ter controle
< tekens in voorkomen door de controle aan te passen naar:
...
if($naam != "" && !strpos($naam, "<")){
...
}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.
Het email-adres zouden we vergelijkbaar kunnen doen:
...
if($email != "" && !strpos($naam, "<") && strpos($email, "@") &&
strpos($email, ".") && strlen($email) > 5){
...
}else{
...
}
...
Opdracht 5.7
- Open verwerk.php opnieuw in kladblok als het niet nog open staat.
- Pas het script zo aan dat bovenstaande controles ook uitgevoerd worden.
- Bedenk hoe de reactie gecontroleerd kan worden en doet dit!
4.3.2. Valideren met Reguliere Expressies
Bovenstaande manieren zijn niet waterdicht. Zo kan een bezoeker een willekeurige reeks tekens invoeren als email adres, als de reeks maar minstens 6 tekens lang is, een @ bevat, een . bevat en geen < bevat. Zo is de string@.ik wordt gezien als email adres bijvoorbeeld geldig. Dit moet natuurlijk niet en met reguliere expressies kan dit redelijk eenvoudig opgelost worden. 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).
Disclaimer: De gratis online cursussen zijn beschikbaar gesteld en ontwikkeld door het bedrijf Learnit. Deze cursus is gratis maar mag niet gebruikt worden voor commerciële doeleinden. Dit werk is auteursrechtelijk beschermd; het auteursrecht ervan berust bij Learnit.