Lesbrief 3: Gegevens versturen naar de server

Inleiding

Let op: je mag pas aan deze lesbrief beginnen als de eerste twee lesbrieven zijn afgetekend!

In deze lesbrief kijken we naar het versturen van gegevens die een gebruiker in een formulier op een website invult, bijvoorbeeld met een contactformulier, of vanaf een inlogpagina.

Het leerdoel van deze lesbrief is het verwerken van de gegevens die de gebruiker heeft ingevuld door middel van PHP. We hebben al even gezien hoe dat kan in de eerste lesbrief toen we een formulier in flash hebben gemaakt en dat hebben verstuurd naar PHP.

We gaan in deze lesbrief een formulier n HTML maken en een script in PHP dat de gegevens verwerkt.

Stap 1

Opdracht 1: maak een nieuwe HTML pagina met behulp van Dreamweaver. Noem deze pagina index.html en bewaar hem in een nieuw mapje op je computer (het mapje lesbrief 3 zou een goede keuze zijn).

We gaan een contactformulier maken in deze HTML pagina. Dit kan in HTML door middel van de FORM tag en de diverse INPUT en TEXTAREA tags.

<form method="post" action="contactformulier.php">
    <input type="text" name="voornaam" size="40" />
    <input type="submit" value="versturen" />
</form>

In dit bovenstaande voorbeeldje staat een formulier dat door middel van POST wordt verstuurd naar contactformulier.php op het moment dat de gebruiker op de versturen knop klikt. Er is een tekst invoerveld met de naam voornaam.

Opdracht 2:Zoek uit wat method=”post” betekent in de form tag. Welke andere methodes zijn er om een formulier te versturen? Schrijf het antwoord op in commentaar in je index.html.

<!-- 
Naast de methode "POST" kan je ook nog 
de methode … gebruiken. 
-->

Opdracht 3:Maak in de index.html een contactformulier. Maak daarin gebruik van de normale text invoervelden en van radio buttons of selectie vakjes. Gebruik tevens een groot tekstvlak (textarea). Zorg ervoor dat er ook labels bij de invoervelden staan zodat de gebruiker weet wat hij in moet vullen (bijv: voornaam, leeftijd, woonplaats).

Stap 2

Nu hebben we de HTML klaar. Als we op de submit knop klikken, krijg je echter waarschijnlijk een 404 error omdat de pagina waar het formulier naar verstuurd zou moeten worden nog niet bestaat. Die moeten we dus nog gaan maken. In Dreamweaver kunnen we een nieuwe PHP file aanmaken. Noem dit bestand contactformulier.php en plaats hem in dezelfde map als de index.html file. Dreamweaver plaatst standaard al wat HTML code in het bestand. Dit kan je gewoon laten staan, en later aanpassen. Bovenaan in het PHP bestand gaan we onze code schrijven. We beginnen, zoals jullie inmiddels weten, ieder php blok met <?php en sluiten het af met ?>.

<?php
// dit is php code
?>

Deze PHP code wordt aangeroepen als we het formulier aanroepen. We kunnen hier dus de ingevulde waarden van de gebruiker verwerken. In deze stap willen we als eerste de ingevulde waardes laten zien aan de gebruiker. Later gaan we dat uitbreiden naar het versturen van mail.

In PHP komen de door de gebruiker ingevulde waardes in een speciale variabele terecht. Dit is een variabele die meerdere waardes kan bevatten, een zogenaamd array. Een array is een lijst met waardes. Arrays kun je gebruiken om bijvoorbeeld een lijst met je favoriete vakantiebestemmingen bij te houden. De variabele waar de waardes die de gebruikers heeft verstuurd in terecht komen heet $_REQUEST. Je kunt de waardes via een sleutel opvragen. Als je bijvoorbeeld in je html formulier een input veld de naam "voornaam" hebt gegeven, dan kun je de ingevulde waarde er via "voornaam" ook weer uithalen in php.

<?php
// sla de ingevulde waarde van het veld voornaam 
// op in een variabele
$voornaam = $_REQUEST['voornaam'];
echo $voornaam;
?>

Opdracht 4: sla alle door de gebruiker ingevulde waardes uit het formulier op in aparte variabelen in php.

Als je de php code bovenaan je bestand hebt geplaatst, dan kan je in de HTML code daaronder de zojuist gecreëerde
variabelen weer gaan gebruiken om aan de gebruiker te laten zien. Je kunt meerdere stukken php code in je HTML integreren, bijvoorbeeld op de volgende manier:

<?php
$voornaam = $_REQUEST['voornaam'];
$achternaam = $_REQUEST['achternaam'];
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
</head>
<body>
<h2>
Je hebt de volgende voornaam ingevuld:
<?php
echo $voornaam;
?>
</h2>
Je hebt de volgende achternaam ingevuld:
<?php
echo $achternaam;
?>
</h2>
</body>
</html>

Opdracht 5:Maak in de HTML een overzicht van de door de gebruiker ingevulde waardes.

Stap 3

Nu we de gegevens uit het formulier in PHP hebben verzameld, kunnen we de gegevens gebruiken om bijvoorbeeld een mailtje te versturen. Dit doen we met het mail commando van php. Dit commando kent minimaal 3 argumenten, de ontvanger van het bericht, het onderwerp en het bericht zelf. Hieronder een voorbeeld van het gebruik van dit commando:

<?php
$ontvanger = "een emailadres van de ontvanger";
$onderwerp = "Contactformulier vanaf website";
$bericht = "Er is een bericht verstuurd vanaf de website met de volgende informatie:\n";
$bericht .= "Voornaam: ".$voornaam;
mail($ontvanger, $onderwerp, $bericht);
?>

Opdracht 6: pas je php aan zodat de ingevulde waardes naar een emailadres worden verstuurd.