Les 7

In deze les leert u hoe u een formulier opmaakt en hoe u de waarden uit deze formulieren kunt recupereren.

Beheren van formulieren

In den beginne had je het formulier. Later verschenen de webwinkels, de betaalsites en andere commerciële instellingen die van jouw slechts één ding verwachten, namelijk het nummer van je kredietkaart en je e-mail adres.
Om het even, formulieren zijn zowat de uitvinding geweest van het web. Hoe zou men zonder hen de hand kunnen leggen op de gegevens van een client om die dan door te sturen naar een provider bijvoorbeeld.
De eerste versies van HTML hadden reeds formulieren, lijsten en checkbuttons geïntegreerd.
Voor de lessen die nu volgen, vertrek ik van het principe dat je over een goede basiskennis HTML beschikt. Laten we dan maar beginnen met het serieuze werk :-)

Ons eerste formulier


<html>
<head>
<title>Formulier HTML</title>
</head>
<body>
<h1>Formulier met input text</h1>
<form>
Uw naam :
<input type="text" name="Naam"><br><br>
<input type="submit" value="Versturen van gegevens">
</form>
</body>
</html>

Code opslaan als formulier.html.

En aktie !

Als je deze pagina opgemaakt hebt en je bekijkt deze in je browser, dan kun je jouw naam invullen en klikken op de knop versturen van gegevens, waarna ..... juist, er niets gebeurt.
Nu is het de bedoeling dat er één of andere actie wordt ondernomen als je klikt op de knop. Deze actie kan bijvoorbeeld zijn : de gegevens uitprinten op de huidige pagina of de gegevens doorsturen naar een andere pagina waar deze dan op hun beurt verwerkt worden. Aan de eerste methode heb je niet veel, de tweede is echter heel belangrijk, en die zal dan doorgaans gebruikt worden.

Laten we nu wat actie toevoegen aan ons formulier. We veranderen regel 7 in :

<form action="verwerken.php" method="post">


En we slaan de nieuwe code op als formulier2.php.
De einge regel dat we nu veranderd hebben is de <form> regel. Als aktie hebben we gekozen voor verwerken.php en de methode om dat te doen is post. Dus als je klikt op de knop gegevens versturen, zal de naam dat je hebt ingetikt worden verstuurd naar de pagina verwerken.php. (nog niet uitproberen voor het ogenblik)
Een andere methode in plaats van post is get. In de uitvoering is geen enkel verschil, als je nu post of get gebruikt, het resultaat zal hetzelfde zijn. Het enige verschil tussen deze twee, is de manier waarop je de variabelen recupereert.

Methode : post of get ?

Wat betekent het woordje method ? Dit attribuut is verantwoordelijk voor de gebruikte methode voor het versturen van de gegevens.
Get : de gegevens die worden verstuurd, worden toegevoegd aan de url. Je kent waarschijnlijk wel die lange url's met al die vraagtekens erin ? Get is de methode die standaard wordt gebruikt.

Post : de gegevens worden eveneens verstuurd, maar worden niet toegevoegd aan de URL.
Ik kan enkel en alleen aanbevelen om de methode post te gebruiken en alleen get te gebruiken als het niet anders kan. Voorbeelden spreken altijd voor zichzelf wordt beweerd. Het voordeel van post tegenover get zal je dadelijk duidelijk worden aan de hand van de volgende voorbeelden.

Voorbeeld met get  :

<html>
<head>
<title>Paswoord 1</title>
</head>
<body>
<h1>Formulier met input text</h1>
<form action="verwerken.php" method="get">
Uw paswoord :
<input type="text" name="Naam"><br><br>
<input type="submit" value="Versturen van gegevens">
</form>
</body>
</html>

Code opslaan als paswoord1.html.

En aktie !

 Voorbeeld met post :

<html>
<head>
<title>Paswoord 2</title>
</head>
<body>
<h1>Formulier met input text</h1>
<form action="verwerken.php" method="post">
Uw paswoord :
<input type="text" name="Naam"><br><br>
<input type="submit" value="Versturen van gegevens">
</form>
</body>
</html>

Code opslaan als paswoord2.html.

En aktie !

De pagina verwerken.php bestaat nog niet, maak een lege pagina aan en noem deze verwerken.php. Bekijk nu eens de twee pagina's in je browser, vul je paswoord in en klik dan op de knop versturen, je ziet dan dadelijk de reden waarom het gebruik van get niet aangeraden is.
In het geval van get ziet de url als volgt uit na het klikken op de knop versturen :

http://laptop.essetee.be/lesphp/verwerken.php?Naam=pass1234

Ik had hier als paswoord "pass1234" ingevuld, en je ziet het dan ook in de URL van je browser als je op de knop versturen klikt. Bij post zie je enkel de naam van de pagina waarnaar de gegevens worden verstuurd.


POST gebruiken is dus aanbevolen.


In sommige gevallen gaat GET de enige mogelijkheid zijn om gegevens te versturen. In het bijzonder als we een waarde van een variabele willen meegeven aan een URL. We komen daar later nog op terug.

Gegevens verwerken

Zoals gezegd in het begin van dit boek, PHP is uitermate geschikt om die gegevens te verwerken. Hier komen onze associatieve arrays eraan. De gegevens van de velden worden voor PHP gewoon variabelen. In ons geval dan met het formulier2.html wordt aan het veld "Naam" gewoon de inhoud van hetgeen je intikt gekoppeld. Je kan dus gewoon de inhoud van die variabele opvragen met $_POST["Naam"].

<?php
echo "Goeiedag <strong>" . $_POST["Naam"] . "</strong>, leuk dat je er bent !\n<br>";
?>


Code opslaan in ons leeg document verwerken.php. Nadat de code is opgeslagen open je in je browser formulier2.php, vul je een naam in en klik op de knop versturen van gegevens.
Als alles goed gaat moet je browser nu goedendag zeggen met de naam die je hebt ingevuld . Het belangrijkste is dus niet dat hij een naam kan afprinten, maar wel dat hij je naam uit die variabele kan halen. Eenmaal die gegevens in je bezit, kun je die bijvoorbeeld toevoegen aan een database enz..

En aktie !


Vanaf nu ga je regelmatig zien dat ik de term afprinten gebruik. Dit wil niet zeggen dat we iets naar een printer sturen. Hier printen we gegevens af naar het scherm. Onder PHP wil dit dan zeggen, dat onze browser die gegevens toont.


We gaan het nu wat moeilijker maken. Iedereen kent zijn jeugdjaren en de dreigementen van zijn ouders in de aard van : Ruim onmiddellijk je kamer op, indien je het niet doet, dan geen TV vanavond :-)

Dit brengt ons naar de volgende les.
Les 1 Les 2 Les 3 Les 4 Les 5 Les 6 Les 7 Les 8 Les 9 Les 10 Les 11 Les 12 Les 13 Home