banner

1.3: Variabelen en formulieren

Je hebt geleerd hoe je in XHTML een formulier kunt maken met behulp van <form> en </form>. Deze labels geven respectievelijk het begin en einde van een formulier aan.
Een formulier bevat formulierelementen. Voorbeelden van formulierelementen zijn:

  • Tekstvak: <input type="text" name="....." />
  • Aanklikrondjes <input type="radio" name="....." value="....." />
  • Knop <input type="submit" value="Ga verder" />
Er zijn nog veel meer formulierelementen zoals een textarea (om meer dan 1 regel tekst te typen zoals bijvoorbeeld in een gastenboek), een keuzelijst en checkboxes.

Maar wat kun je nu met zo'n formulier? In dit hoofdstuk leer je hoe je de gegevens die je in het formulier invult kunt gebruiken in PHP.

We beginnen met een simpel voorbeeld: op een lege pagina is een tekstvakje te zien waar je je naam in kunt vullen. Naast het invulvakje staat een knop 'Ga verder'. Als je op deze knop drukt, ga je naar een andere pagina, waarop staat: Wees welkom en dan de naam die je hebt ingevuld. We moeten bij deze oefening gebruik gaan maken van variabelen.

Anders gezegd: de naam is variabel en zal steeds een andere waarde toegekend krijgen afhankelijk wie er het tekstvak invult. We kunnen dat als volgt weergeven:

Formulier invoer

We zullen deze afbeelding toelichten: op de eerste pagina (index.html) staat een invulformulier. Dit formulier bestaat uit twee formulierelementen: een tekstvak en een knop. Nu moet er het volgende gebeuren:

  • zodra we op de knop 'Ga verder' klikken, moet de tekst die in het invulvakje staat in een variabele met de naam voornaam worden gezet;
  • deze variabele voornaam moet, inclusief de toegekende waarde (Mark), via de POST-methode verstuurd worden naar weergeven.php
  • weergeven.php haalt de gegevens op uit de variabele voornaam
  • op deze nieuwe pagina moeten we schrijven: "Wees welkom," en de inhoud van variabele voornaam (in dit geval dus Mark ).

Hoe doen we dit?

Eerst maken we op de eerste pagina (index.html) een formulier aan:

	<form method="post" action="weergeven.php">
	</form>

Er staan nog geen formulierelementen in het formulier (geen tekstvakjes enz.). Wat opvalt, is de optie action. Deze optie vertelt wat er met de variabelen moet gebeuren nadat er op de 'Ga verder'-knop is geklikt. In dit geval wordt de naam Mark dus in de variabele voornaam naar weergeven.php gestuurd. Kijk voor jezelf of je het snapt.

Dan gaan we nu het formulier verder compleet maken met een tekstvak en een knop. Zie de code hieronder:

	<form method="post" action="weergeven.php">
	    Typ je voornaam:
	    <input type="text" name="voornaam" />
	    <input type="submit" value="Ga verder" />
	</form>

De opties type en value heb je al eens eerder gezien: type geeft aan wat voor soort element het is, en value geeft in dit geval het opschrift op de knop aan. Wat nu duidelijk moet zijn is dat het woord achter name de variabelenaam wordt waarin de getypte naam onthouden wordt.
Als je nu dus op de knop 'Ga verder' klikt, zal de waarde in het tekstvak opgeslagen worden in de variabele voornaam en zal de pagina weergeven.php geladen worden.
De volledige code van de pagina index.html vind je hieronder. Je kunt hem knippen en plakken maar even overtypen is beter om de code 'in de vingers' te krijgen:

<html>
<head>
   <title>Variabelen posten</title>
</head>
<body>
   <form method="post" action="weergeven.php">
      Type je voornaam:
      <input type="text" name="voornaam" />
      <input type="submit" value="Ga verder" />
   </form>
</body>
</html>

Nu de code van weergeven.php. Belangrijk is dat de naam die zich bevind in de variabele voornaam in de broncode gezet wordt na het verwerken van de PHP-code door de parser.
De schrijfwijze voor de variabele is nogal ingewikkeld.

  • Allereerst begint een variabele altijd met een $-teken
  • Daarna geven we aan met welke methode de waarde verstuurd is. In dit geval met de methode post. Hierbij geldt dat er een underscore (laag streepje) het dollarteken en de methode verbindt. Je krijgt dan: $_POST. Let er speciaal op dat het woord POST hier met HOOFDLETTERS geschreven is. Gebeurt dit niet dan doet de variabele niet wat je ervan verwacht had.
  • Tussen rechte haken en enkele aanhalingstekens geef je vervolgens de naam van de variabele weer:['voornaam']. Uiteindelijk ziet dat er dus als volgt uit: $_POST['voornaam']

Helaas mag je deze, met post verstuurde variabele, niet gewoon tussen enkele aanhalingstekens zetten die een echo omsluiten. De volgende code leidt namelijk tot een foutmelding/parce-error:
echo 'Wees welkom $_POST['voornaam']';

Hoe moet het dan wel?

PHP maakt een duidelijk onderscheid tussen letterlijke tekst cq. html-codes die het in de broncode moet zetten enerzijds en het weergeven van variabelen anderzijds. De regel is dat wanneer je een variabele in een echo weer wilt geven je éérst de ECHO stopt om er vervolgens met verbindingspuntjes een variabele aan vast te plakken.

In de PHP code van weergeven zou nu de volgende code opgenomen moeten worden:
echo 'Wees welkom '.$_POST['voornaam'].' op mijn website.';

De tekst kan echter ook beginnen met een variabele als je bijvoorbeeld wilt zeggen "Mark is een leuke jongen." Als je begint met een variabele dan hoef je geen enkele quotes te gebruiken:
echo $_POST['voornaam'].' is een leuke jongen.';

Als laatste kan een echo ook met een variabele eindigen als je bijvoorbeeld wilt zeggen "Dat heb je goed gedaan Mark" Als je eindigt met een variabele dan hoef je geen enkele quotes te gebruiken:
echo 'Dat heb je goed gedaan '.$_POST['voornaam'];

Hieronder staat ook de volledige code voor weergeven.php:

<html>
<head>
    <title>weergeven.php</title>
</head>
<body>

  <?php
    
echo 'Wees welkom '.$_POST['voornaam'].' op mijn website.';
  ?>
   
</body>
</html>

Je kunt ook méér dan een variabele doorgeven aan een pagina. Een uitgebreid voorbeeldje, waarbij de gebruiker ook zijn of haar leeftijd moet opgeven:

<html>
<head>
	<title>invoeren leeftijd</title>
</head>
<body>
	<form method="post" action="leeftijd.php">
		Typ je naam: <input type="text" name="naam" /><br />
		Typ je leeftijd: <input type="text" name="leeftijd" /><br />

		<input type="submit" value="Ga verder" />
	</form>
</body>
</html>

Als je nu op de "Ga verder"-knop drukt, worden er twee variabelen aan de pagina leeftijd.php doorgegeven: $_POST['naam'] en $_POST['leeftijd'].
Nu kun je in de pagina leeftijd.php deze twee variabelen gebruiken om de inhoud ervan weer te geven. Een voorbeeldje hieronder (je kunt het zo knippen, plakken en opslaan onder de naam leeftijd.php):

<html>
<head>
    <title>leeftijd weergeven</title>
</head>
<body>

  <?php
    echo 'Wees welkom '.$_POST['naam'].' <br>';
    echo
'Je bent '.$_POST['leeftijd'].' jaar oud';
  ?>

</body>
</html>

Tot slot:

  • Je ziet dat bovenstaande php-code gemakkelijk leesbaar is door de gekleurde codes. Gebruik daarom ook een speciale editor (als Notepad++ of Komodo Edit). Het vergroot de leesbaarheid en maakt je op fouten attent door 'onverwachte' kleurcodes.
  • Léés de foutmeldingen/parce-errors. Ze vertellen meestal wat is en waar de fout zich ongeveer bevindt.
OPDRACHT 2
Maak een 'oppervlakte-uitrekenaar':
  1. Maak een index.html-pagina en sla deze op in de map opdracht 2. De bedoeling is dat de bezoeker van je pagina in twee tekstvakjes getallen moet typen: één voor de lengte en één voor de breedte. Als je daarna op de knop "Reken uit" klikt, dan wordt de bezoeker geleid naar een pagina met de naam bereken.php. Op deze pagina worden de getallen vermenigvuldigd (om de oppervlakte van een rechthoek uit te rekenen). Op het scherm moet een zin verschijnen die er ongeveer als volgt uit ziet:
    Als je een rechthoek hebt met een breedte van (het ingevoerde getal bij de breedte) en een lengte van (het ingevoerde getal bij lengte) dan is de oppervlakte (het uitgerekende oppervlaktegetal).

  2. Maak op bereken.php extra code die de oppervlakte van een driehoek uitrekent met dezelfde getallen die zijn ingevoerd op index.html.

    Oppervlakte van een driehoek = 1/2 * basis * hoogte