Hoofdstuk 16: Javascript en PHP

16.7. Formulierverwerking met PHP

Met een formulier kun je bezoekers van je pagina bepaalde dingen in laten vullen en als ze dan op Verzenden klikken moet het worden verstuurd en verwerkt.
Dat versturen en verwerken kun je regelen met behulp van PHP
Hoe en wat lees je hieronder.

16.7.1. De form-tag

Als je een formulier op je pagina wilt hebben dan moet je met de met de form-tag beginnen.
Die kan er bijvoorbeeld als volgt uitzien:
<form ACTION="verwerkformulier.php" METHOD="POST" >

Met deze tag wordt bepaald wat er met de gegevens van het formulier gebeurt als er op Verzenden wordt geklikt:
Er wordt dan een nieuwe pagina gestart, namelijk "verwerkformulier.php"
En de ingevoerde gegevens worden doorgeseind naar die pagina.
Hoe, dat zie je straks wel.

16.7.2. De code van het formulier

Eerst gaan we verder met het formulier.
Als voorbeeld zetten we even alle mogelijkheden er op: een paar tekstvelden, radiobuttons, een checkbutton, een selectievak, en commentaarveld en een resetknop.
Ook een voorbeeld van een getal, dat m.b.v. een formulier wordt doorgegeven aan het verwerkende document zonder dat er een venstertje voor op het scherm staat: het type is dan hidden
(In hoofdstuk 9 van de cursus html kun je meer lezen over het opstellen van formulieren).

Hier komt de html-code daarvoor:
(de rode tekst is de html-code, de blauwe tekst is commentaar)

Voornaam: <input type="text" name="voornaam" size="20" > <br>

Achternaam: <input type="text" name="achternaam" size="20" ><br>
Wachtwoord: <input type="password" name="wachtwoord" size="20" ><br>


<input type="checkbox" name="vinklijst[]" value="Ja"> Ik ben een leerling van het Lauwers College <br>

<input type="checkbox" name="vinklijst[]" value="computer"> Mijn hobby is computeren <br>


<input type="radio" name= "geslacht" value= "man." checked> man <br>
<input type="radio" name= "geslacht" value= "vrouw."> vrouw <br>


Wat is je leeftijd <br>
<select name="leeftijd" size="5" >
<option value="10-">10-</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="20+">20+</option>
</select> <br>


Opmerkingen:<br>
<textarea name="commentaar" rows=5 cols=30 > Dit staat er al </textarea> <br>


<?php
$g = rand(1,6);
?>
<input type="hidden" name= "randomgetal" value ="<?php print("$g"); ?>">


<input type="submit" value="Verstuur dit formulier" > <br>


</form>

16.7.3. Het formulier zelf

Hier komt het formulier dan echt:

Als je op de knop hierboven klikt dan wordt de pagina met de naam "verwerkformulier.php" geladen, en dan worden de ingevoerde gegevens verwerkt, probeer het maar ! (er gebeurt verder nog niets met de gegevens, ze worden alleen getoond. Wil je zien hoe de gegevens kunnen worden bewaard ga dan naar Hoofdstuk 16.8.1)

16.7.4. POST en GET

Hierboven is de methode POST gebruikt bij het versturen van het formulier.
Je kunt ook de methode GET gebruiken.
De code voor het aanmaken van het formulier wordt dan zo:
<form ACTION="verwerkformulier.php" METHOD="GET" >

Je zult weinig verschil merken.
Maar er is wel verschil.
De dingen die zijn ingevuld worden nu doorgegeven door ze vast te plakken aan de URL.
Als er als voornaam Piet is ingevuld, en als achternaam Hoekstra, en er wordt op Verzenden geklikt, dan wordt de pagina "verwerkformulier.php" geladen, en tijdens het laden zie je de naam ervan in de statusbalk, met de ingetypte dingen er achter geplakt.
Je ziet dan: verwerkformulier.php?voornaam=Piet+achternaam=Hoekstra

Als je met wachtwoorden werkt is dat natuurlijk niet zo handig, want dan is het zichtbaar.
Daarom kun je beter de methode POST gebruiken.
De namen van de variabelen waarin de ingevoerde woorden worden vastgelegd zijn bij de methode GET ook anders: $_GET[voornaam] en $_GET[achternaam] en $_GET[wachtwoord] enz.

16.7.5. De code van het php-document dat het formulier verwerkt

Als je in het formulier op de knop met de tekst Verstuur dit formulier klikt dan wordt de pagina met de naam "verwerkformulier.php" geladen, en dan worden de ingevoerde gegevens verwerkt. (er gebeurt verder nog niets met de gegevens, ze worden alleen getoond. Wil je zien hoe de gegevens kunnen worden bewaard ga dan naar Gastenboek maken)

Het eerste invulvenster had als naam voornaam gekregen, en als in dat invulvenster Piet is ingevuld dan heeft na verzending de variabele $_POST['voornaam'] de waarde Piet gekregen.
(misschien moet je de variabele ook wel noteren als $_POST[voornaam], het hangt van de PHP-versie af of voornaam tussen aanhalingstekens moet of niet)
M.b.v. welke variabelen de gegevens in de andere invulvensters dan worden vastgelegd zal wel duidelijk zijn: gewoon $_POST voor de naam van het formuliervenster zetten en rechte haken om de naam van het formuliervenster.

De code van het php-document, dat de gegevens verwerkt, ziet er daarom als volgt uit:

<HTML>
<HEAD>
<TITLE>PHP</TITLE>
</head>
<body BGCOLOR="#DCEAFC">
<H1>Verwerking van het formulier met PHP</H1><hr>
Je hebt de volgende dingen ingevuld:<br><br>
<?php
print ("Voornaam: $_POST['voornaam']<br>\n");
// (misschien moet je de variabele ook wel noteren als $_POST[voornaam]
// het hangt van de PHP-versie af of voornaam tussen
// aanhalingstekens moet of niet; dat geldt ook voor de volgende regels)
print ("Achternaam: $_POST['achternaam']<br>\n");
print ("Wachtwoord: $_POST['wachtwoord']<br>\n");
print ("Leerling van het Lauwers College ?: $_POST['lcleerling']<br>\n");
print ("Hobby: $_POST['hobby']<br>\n");
print ("Geslacht: $_POST['geslacht']<br>\n");
print ("Leeftijd: $_POST['leeftijd']<br>\n");
print ("Opmerkingen: $_POST['commentaar']<br>\n");
print ("Doorgegeven getal: $_POST['randomgetal']<br>\n");
?>
</body>
</HTML>

16.7.6. Ontsnappingstekens en dergelijke verwijderen.

Je moet er wel rekening mee houden dat er automatisch ontsnappingstekens aan de gegevens worden toegevoegd tijdens de overdracht bij het verwerken van een formulier.
Als je bijvoorbeeld als achternaam O'Brien invoert, en als commentaar Dit kost $5,- dan zal na de overdracht de achternaam O\'Brien zijn, en het commentaar Dit kost \$5,-
PHP doet dit omdat na verwerking de gegevens vaak in een database worden gezet, en daarbij is het nodig die ontsnappingstekens toe te voegen.
Wil je dat die ontsnappingstekens weer worden weggehaald dan moet je de opdracht $nieuwevariabele=stripslashes($variabele) gebruiken.

Verder worden er bij het invullen van de gegevens soms spaties aan het begin of het eind toegevoegd.
Die kun je beter weghalen, en dat gebeurt met de opdracht $nieuwevariabele=trim($variabele)

Ook kunnen er bij het invullen van de gegevens tags worden toegevoegd, die gevolgen hebben bij het afdrukken van die gegevens.
Als iemand als naam bijv. invult <H1>Klaas Pietersen dan zal die naam bij het afdrukken extra groot worden, en alle tekst erna ook omdat er geen </H1>-tag aan toegevoegd is.
Je kunt dan dus vreemde dingen krijgen, en daarom is het beter eventuele tags uit de ingevoerde tekst te verwijderen.
Dat gebeurt met de opdracht $nieuwevariabele=strip_tags($variabele)

Als je wilt dat ontsnappingstekens, en beginspaties en eindspaties, en tags worden weggehaald dan kan dat m.b.v. de opdracht:
$nieuwevariabele=strip_tags(stripslashes(trim($variabele)))

Je kunt er ook op een andere manier voor zorgen dat eventuele tags in de ingevoerde tekst geen effect hebben.
Dat kan met de opdracht $nieuwevariabele = htmlspecialchars($variabele).
De functie htmlspecialchars zorgt ervoor dat speciale HTML-tekens zoals < en > in een string worden vervangen door < en > . De tags worden dan dus niet verwijderd, maar ze hebben geen effect meer.

Verder vervangt PHP bepaalde tekens tijdens de overdracht van de gegevens van een formulier door andere tekens.
Tijdens de overdracht worden spaties bijvoorbeeld vervangen door het plusteken (+) of door %20 (de asc-code van de spatie is 32-decimaal, en dat is 20 hexadecimaal). Dit gebeurt omdat de gegevens bij de get-methode worden overgedragen door het aan de URL vast te plakken, en in een URL mogen geen spaties voorkomen en ook geen aanhalingstekens enz.
Als het m.b.v. de get-methode wordt overgedragen dan zie je de over te dragen gegevens in de adresbalk achter de URL, en daar zie je die gewijzigde tekens dan ook.
Verder merk je er niets van want tijdens de ontvangst van de gegevens door het ontvangende script worden ze weer door de oorspronkelijke tekens vervangen.

Soms is het nodig een URL zelf op die manier te coderen. Dat kan m.b.v. de opdracht $nieuwevariabele=urlencode($variabele)
De opdracht $nieuwevariabele=urldecode($variabele) zet de variabele weer terug in de gewone vorm.

16.7.7. Formulier en verwerking in hetzelfde php-document

In paragraaf 1 en 2 heb je gezien hoe je een formulier m.b.v. een HTML-document kunt maken.
En hoe je dat m.b.v. een PHP-document kunt laten verwerken.
Je kunt de verwerking ook door hetzelfde document laten gebeuren als waarin het formulier zit. Hierboven was de code voor het formulier:
<form ACTION="verwerkformulier.php" METHOD="POST" >

Dan gebeurt de verwerking dus door het PHP-document met de naam verwerkformulier.php

Als je de code voor het formulier verandert in:
<form ACTION=" <?php echo $_SERVER[SCRIPT_NAME] ?> " METHOD="POST" >

dan zal de verwerking door hetzelfde php-document gebeuren als waarin het formulier staat.

Als dat document bijv. FORMULIER.PHP heet dan had de code ook kunnen zijn:
<form ACTION="FORMULIER.PHP" METHOD="POST" >
maar de regel ervoor werkt altijd, hoe de naam van het document ook is.

Verder moet de code ook worden aangepast.
We maken nu een formulier waarin alleen om de voornaam en de achternaam wordt gevraagd.
Het php-document kan er dan als volgt uitzien:

<HTML>
<HEAD>
<TITLE>PHP4</TITLE>
</head>
<body BGCOLOR="#DCEAFC">
<?php
if (isset($_POST[voornaam]) && isset($_POST[achternaam]) )
// Als er iets bij de voornaam en achternaam is ingevuld dan gebeurt er het volgende
{
// Verwijder ongewenste tekens uit de invoer
$voornaam=strip_tags(stripslashes(trim($_POST[voornaam])));
$achternaam=strip_tags(stripslashes(trim($_POST[achternaam])));
// En druk af wat er is ingevoerd
echo("Je hebt de volgende dingen ingevuld:<br><br>");
print ("Voornaam: $voornaam<br>\n");
print ("Achternaam: $achternaam<br>\n");
}
else
// Als er niets bij de voornaam of achternaam is ingevuld dan wordt het formulier getoond
{
?>

<form ACTION=" <?php echo $_SERVER[SCRIPT_NAME] ?> " METHOD="POST" >
Voornaam: <input type="text" name="voornaam" size="20" > <br>
Achternaam: <input type="text" name="achternaam" size="20" ><br>
<input type="submit" name="verzend" value="Verstuur dit formulier" > <br>
</form>

<?php
}
?>
</body>
</HTML>

Toelichting:
Door de regel na <?php: if (isset($_POST[voornaam]) && isset($_POST[achternaam]) ) worden de opdrachten, die in het blok daarna staan, alleen uitgevoerd als de voornaam en de achternaam al zijn ingevuld.

Als de voornaam en/of de achternaam nog niet zijn ingevuld, dan worden de opdrachten na else uitgevoerd.
Dan wordt het formulier dus getoond, waarin de voornaam en de achternaam kunnen worden ingevoerd.
Als die zijn ingevoerd en er op verzend is geklikt dan wordt hetzelfde php-document aangeroepen, maar dan treedt het eerste gedeelte in werking omdat de voornaam en de achternaam dan een waarde hebben gekregen (tenminste als daar iets is ingevuld. Als er niets is ingevuld treedt het tweede gedeelte weer in werking en dan wordt het formulier weer getoond).