PHP-lessen - les 1 - Werken met formulieren
In het dagelijks leven krijgen we informatie via televisie, radio, internet en persoonlijke gesprekken. Websites ontvangen ook informatie van gebruikers, maar doen dit op een specifieke manier — via formulieren. Formulieren kun je vergelijken met enquêtes of aanvraagformulieren die je invult bij een officiële instantie. Hoewel de set aan formulierelementen beperkt is, kunnen formulieren alle nodige informatie van gebruikers verzamelen die een website nodig heeft om te functioneren.
Om deze les beter te begrijpen, is het handig als je eerst wat HTML-lessen over het maken van formulieren doorneemt.
Voordat we beginnen met onze eerste les, maken we eerst het skelet van onze applicatie: een klasse die het functioneren van onze site zal beheren.
Maak een map class aan en plaats daarin een bestand simpleCMS.php met onze beheersklasse. Maak daarnaast het bestand index.php aan, dat het programma zal starten, een lege map messages voor onze berichten, en een stylesheet style.css. De structuur zal er als volgt uitzien:
class/simpleCMS.php
messages/
index.php
style.css
Inhoud van simpleCMS.php:
<?php
class simpleCMS { // beheersklasse
public function display_public() { // methode voor het weergeven van berichten
}
public function display_admin() { // methode voor het invoeren van berichten
}
public function write($p) { // methode voor het opslaan van berichten
}
}
?>
We laten de methoden voorlopig leeg; later voegen we er code aan toe.
Bestand style.css:
*{
margin: 0;
padding: 0;
}
body{
font: 12px "Lucida Grande", Sans-Serif;
background: #ccc;
}
#page-wrap{
width: 500px;
margin: 50px auto;
padding: 20px;
background: white;
}
h1, h2, h3{
font: 28px Georgia, Serif;
border-bottom: 1px dotted #ccc;
margin: 0 0 10px 0;
}
.clear{
clear: both;
}
input[type="text"], textarea{
padding: 3px;
border: 1px solid #666;
width: 350px;
margin: 0 0 15px 0;
}
input[type="text"]{
font: 28px Georgia, Serif;
}
textarea {
height: 100px;
font: 12px "Lucida Grande", Sans-Serif;
}
label{
background: #666;
color: white;
padding: 2px 6px;
}
.post{
margin: 0 0 20px 0;
}
Bestand index.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>We leren PHP</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="page-wrap">
<?php
include_once('class/simpleCMS.php'); // laad de klasse
$obj = new simpleCMS(); // maak een object van de klasse
?>
</div>
</body>
</html>
Wanneer de website wordt geladen, wordt index.php geopend. Deze bevat de klasse en maakt een object ervan aan. Dit object heeft methoden die we op het juiste moment zullen aanroepen. Wanneer dat juiste moment is, bepalen we met behulp van een if-voorwaarde.
Laten we even een stapje terug doen en kijken naar de globale variabelen $_GET en $_POST.
De globale variabele $_GET
HTML-formulieren hebben een attribuut method (method='get' of method='post'). Afhankelijk van deze instelling worden de verzonden formuliergegevens opgeslagen in $_GET of $_POST. Een voorbeeld:
<form action="welcome.php" method="get"> Naam: <input type="text" name="fname" /> Leeftijd: <input type="text" name="age" /> <input type="submit" /> </form>
Na het klikken op de knop Submit wordt de volgende URL geopend:
http://sitenaam/welcome.php?fname=Peter&age=37
Zo wordt de variabele $_GET gevuld. We kunnen de waarden ervan uitlezen met:
<?php print $_GET['fname']; print $_GET['age']; ?>
De variabele $_GET is dus een array met waarden uit de URL. Daardoor kunnen we gegevens doorgeven tussen pagina’s zonder een formulier te gebruiken, bijvoorbeeld:
http://sitenaam/example.php?number=45
En in example.php schrijven we:
<?php print $_GET['number']; ?>
Dan wordt het getal uit de URL weergegeven.
De globale variabele $_POST
De variabele $_POST werkt op dezelfde manier, maar de gegevens worden niet in de URL weergegeven. Laten we een vergelijkbaar voorbeeld bekijken:
<form action="welcome.php" method="post"> Naam: <input type="text" name="fname" /> Leeftijd: <input type="text" name="age" /> <input type="submit" /> </form>
Na het verzenden gaan we naar:
http://sitenaam/welcome.php
En in welcome.php kunnen we de gegevens weergeven:
<?php print $_POST['fname']; print $_POST['age']; ?>
Het verschil is dat de $_POST-gegevens niet in de URL zichtbaar zijn en alleen via PHP beschikbaar zijn.
Het formulier voor berichten toevoegen
We maken nu een formulier om berichten toe te voegen. We zullen de methode POST gebruiken om berichten te verzenden, maar de site beheren via GET.
public function display_admin() { // methode om bericht toe te voegen
$content = '';
$content .= '<form action="' . $_SERVER['PHP_SELF'] . '" method="post">';
$content .= '<label for="title">Naam:</label><br />';
$content .= '<input name="title" id="title" type="text" maxlength="150" />';
$content .= '<div class="clear"></div>';
$content .= '<label for="bodytext">Bericht:</label><br />';
$content .= '<textarea name="bodytext" id="bodytext"></textarea>';
$content .= '<div class="clear"></div>';
$content .= '<input type="submit" value="Bericht toevoegen" />';
$content .= '</form>';
$content .= '<p><a href="/index.php">Terug naar startpagina</a></p>';
return $content;
}
Vervang de methode display_admin() door deze code. Deze methode toont het formulier wanneer we een bericht willen toevoegen. Standaard moeten echter de berichten zelf worden weergegeven. Laten we afspreken dat het formulier alleen verschijnt wanneer de URL-parameter admin=1 aanwezig is, bijvoorbeeld:
http://test/index.php?admin=1
Pas index.php aan:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>We leren PHP</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="page-wrap">
<?php
include_once('class/simpleCMS.php');
$obj = new simpleCMS();
if( $_GET['admin'] == 1 ){
print $obj->display_admin();
}else{
print $obj->display_public();
}
?>
</div>
</body>
</html>
En pas de methode display_public() aan:
public function display_public() {
$content = '';
$content .= '<p><a href="/index.php?admin=1">Bericht toevoegen</a></p>';
return $content;
}
We voegen een link toe om naar de formulierpagina te gaan.
Als je vreemde tekens ziet bij het laden van de pagina, maak dan een .htaccess-bestand aan en voeg deze regel toe:
AddDefaultCharset utf-8
Dit zorgt ervoor dat je server met UTF-8 werkt.
Onze formulierpagina is nu klaar. Om te testen kun je de methode wijzigen naar get:
$content .= '<form action="' . $_SERVER['PHP_SELF'] . '" method="get">';
Nu worden de formuliergegevens via de URL doorgegeven aan index.php. De verwerking van die gegevens doen we in de volgende les, waarin we leren hoe je data in bestanden opslaat.