Introduction
Dans ce TP, nous allons concevoir un formulaire Web.
Ce TP a pour objectif d'apprendre à récupérer des données pour que, dans les TP suivants, nous puissions les enregistrer dans notre base de données.
À savoir avant de commencer
Pour faire un formulaire Web, il faut savoir :
- créer un formulaire HTML
- récupérer les données du formulaire dans son code PHP
- tester les données
- afficher les données
Nous allons rapidement aborder chacun de ces points et créer un formulaire dans ce TP.
Formulaire HTML
Un formulaire typique pour faire une saisie ressemble à ça :
<!DOCTYPE HTML>
<html>
<head>
<title>Titre de la page</title>
</head>
<body>
<form name="inscription" method="post" action="saisie.php">
Entrez votre pseudo : <input type="text" name="pseudo"/>
<br />
Entrez votre ville : <input type="text" name="ville"/>
<br />
<input type="submit" name="valider" value="OK"/>
</form>
</body>
</html>
Ce formulaire présente :
- une zone de saisie pour entrer son pseudo,
- va à la ligne,
- une zone de saisie pour entrer sa ville,
- va à la ligne,
- et enfin un bouton pour valider sur lequel sera écrit 'OK'...
Et ce formulaire précise la méthode pour traiter les données enregistrées, une fois que l’on clique sur le bouton OK :
- la destination des données, c’est-à-dire le chemin vers la page PHP, ici saisie.php
- la méthode pour poster les variables contenues dans ce formulaire, ici : POST (l’autre méthode est GET)
Récupérer les données dans PHP
Toutes les données sont transmises au fichier PHP dans une variable de type tableau (array) qui porte le nom $_POST.
si le formulaire avait été envoyé avec la méthode GET, les données seraient dans la variable $_GET.
Le formulaire construit donc un tableau. Voici ce que l’on peut lire dans le tableau $_POST :
- Il y aura $_POST['pseudo'], qui constitue le texte entré dans la zone pseudo par l'utilisateur avant d’avoir cliqué sur OK.
- Idem pour $_POST['ville'].
- Et enfin le champ $_POST['valider'] car un formulaire peut contenir plusieurs boutons submit. Ce champ existe s'il y a eu clic sur ce bouton de soumission sinon s'il n'existe pas, c’est qu’il n'y a pas eu clic sur ce bouton. (ici ce champ existera toujours car il n'y a pas d'autres boutons de soumission)
Pour traiter ces données, la première chose à faire est de savoir les vérifier et donc écrire des conditions en PHP.
Tester les données
Avec une condition if basique
if(user a cliqué sur valider){
récupère la variable pseudo;
récupère la variable ville;
écris 'Salut (son pseudo) de (sa ville). Bienvenue sur mon site !';
}
Voici, la structure d'une condition, on entoure la condition entre des parenthèses, on encadre toutes les instructions dans des accolades.
Et encore une fois bien sûr, chaque instruction se termine toujours par un point-virgule.
Avec une condition imbriquée
if(utilisateur a cliqué sur valider){
récupères la variable pseudo;
récupères la variable ville;
écris 'Salut (son pseudo) de (sa ville). Bienvenue sur mon site !';
if(sa ville)=='Paris'{
écris 'On est plusieurs de Paris sur le site. Contacte-nous !';
}
}
if($ville == 'Paris') : comporte deux signes = , c’est indispensable pour une comparaison.
La variable ne reçoit pas 'Paris' (signe = d'affectation), elle est comparée (==) à Paris.
Vous ferez forcément cette erreur au début, d'autant plus difficile à repérer qu'elle ne provoquera pas de message d'erreur. Avec cette erreur : la variable qui contient Paris n'est jamais vide, et ce sera donc toujours vrai pour le programme. Pour ce type d'erreur, un débuggeur pas à pas devient très utile.
Donc, pensez à cela en premier quand une condition ne fonctionne pas comme vous le souhaitez.
Nous étudierons les opérateurs de conditions dans le TP suivant.
Pensez à indenter votre code dès son élaboration.
Indenter, c’est décaler d'un cran le code pour raisonner par niveau d'imbrication...
Voici un autre exemple : j’ai un formulaire qui m'a renvoyé l'âge entré par l'utilisateur :
<?php
$age=$_POST['age'];
if($age<5){
$verdict='Ouh le bébé !';
}elseif($age<13){
$verdict='Vous êtes un enfant !';
}elseif($age<18){
$verdict='Vous êtes un(e) ado !';
}else{
$verdict='Ah ! enfin un(e) adulte !';
}
echo $verdict;
?>
Dans cet exemple, il y a plusieurs sinonsi (elseif), puis un sinon (else) pour conclure.
Ici, pas d'imbrication, puisque ce sont des conditions successives et non imbriquées l'une dans l'autre.
Exercice : que signifie le message « Ah ! enfin un(e) adulte ! » affiché par le programme ?
Cela signifie que l'utilisateur a indiqué un age de 18 ans ou plus avec n’importe quel entier supérieur ou égal à 18.
L'instruction "echo $verdict" n’est pas dans une condition, elle s'exécute à tous les coups. Dès l'instant où le programme tombe sur une condition qui se réalise, il cesse de tester la suite et passe à l'exécution de l' instruction "echo $verdict".
Exemple de traitement de notre formulaire
Revenons maintenant sur le traitement de notre formulaire, qui devra ressembler à ceci :
if(utilisateur a cliqué sur valider){
récupère la variable pseudo;
récupère la variable ville;
écris 'Salut (son pseudo) de (sa ville). Bienvenue sur mon site !';
}
Comment allons-nous dire cela en PHP ? De la façon suivante :
<?php
if(isset($_POST['valider'])){
$pseudo=$_POST['pseudo'];
$ville=$_POST['ville'];
echo 'Salut '. $pseudo.'de '. $ville.'<br />Bienvenue sur mon site !';
}
?>
Traduction :
- s'il existe une variable POST avec un champ 'valider' et que, donc, l'utilisateur a validé le formulaire, alors
- $pseudo reçoit la variable POST qui a pour nom 'pseudo'
- $ville reçoit la variable POST qui a pour nom 'ville'
- affiche... avec la fonction echo...
On peut très bien se passer de ranger $_POST['name'] dans une variable au nom simplifié $name, et la manipuler directement !
Mais si on doit la manipuler sans arrêt, c’est plus agréable (et plus stable) de la renommer.
Puisque c’est l'attribut name d'un élément dans un formulaire qui va déterminer le nom du champ dans le tableau POST, pensez-bien à ne pas y mettre d'accent, ni d'espace.
Le name ne sert pas à l'affichage, l'utilisateur ne le verra pas ! C'est pour le programmeur. C'est pour vous.
On remet tout cela bout à bout dans le code. Voici un exemple du fichier saisie.php :
<html>
<head><title>Ma page d'accueil</title></head>
<body>
<h1>Bienvenue sur le site de toto </h1>
<h2>Commencez-donc par vous inscrire :</h2>
<form name="inscription" method="post" action="saisie.php">
Entrez votre pseudo : <input type="text" name="pseudo"/> <br />
Entrez votre ville : <input type="text" name="ville"/><br />
<input type="submit" name="valider" value="OK"/>
</form>
<?php
if(isset($_POST['valider'])){
$pseudo=$_POST['pseudo'];
$ville=$_POST['ville'];
echo 'Salut '. $pseudo.'de '. $ville.'<br />Bienvenue sur mon site !';
}
?>
</body>
</html>
Le code PHP dans le fichier saisie.php peut être dans un fichier différent que celui qui contient notre formulaire. Ici, notre affichage et notre traitement sont dans le même fichier. On pourrait améliorer notre fichier en affichant le formulaire seulement si personne n'a cliqué sur le bouton valider.
<html>
<head><title>Ma page d'accueil</title></head>
<body>
<?php
if(isset($_POST['valider'])){
$pseudo=$_POST['pseudo'];
$ville=$_POST['ville'];
echo 'Salut '. $pseudo.'de '. $ville.'<br />Bienvenue sur mon site !';
}else{
?>
<h1>Bienvenue sur le site de toto </h1>
<h2>Commencez donc par vous inscrire :</h2>
<form name="inscription" method="post" action="saisie.php">
Entrez votre pseudo : <input type="text" name="pseudo"/> <br />
Entrez votre ville : <input type="text" name="ville"/><br />
<input type="submit" name="valider" value="OK"/>
</form>
<?php
}
?>
</body>
</html>
Exercices
Sans copier/coller le code de ce TP, concevez une page qui s’appelle formMonCV.php dans votre projet Eclipse, et proposez un formulaire sous la forme suivante :
Entrez votre :
Nom : ___________
Prénom : ___________
Adresse : ___________
Code postal : ___________
Ville : ___________
Téléphone: ___________
Dernière expérience professionnelle :
Date de début (aaaa-mm-jj) : ___________
Toujours en poste : [x] ou Date de fin (aaaa-mm-jj) : ___________
Poste : ___________
Employeur : ___________
Description : ___________ (utiliser un textarea)
Mot clé 1 : ___________
Mot clé 2 : ___________
Mot clé 3 : ___________
<html>
<head><title>Mon CV</title></head>
<body>
<form name="inscription" method="post" action="monCV.php">
Entrez votre : <br />
Nom : <input type="text" name="nom"/> <br />
Prénom : <input type="text" name="prenom"/> <br />
Adresse : <input type="text" name="adresse"/> <br />
Code postal : <input type="text" name="code_postal"/> <br />
Ville : <input type="text" name="ville"/> <br />
Téléphone: <input type="text" name="telephone"/> <br />
Dernière expérience professionnelle : <br />
Date de début (aaaa-mm-jj) : <input type="text" name="date_debut"/> <br />
Toujours en poste :
<input type ="checkbox" name="poste_actuel" >ou Date de fin (aaaa-mm-jj) :
<input type="text" name="date_fin"/> <br />
Poste : <input type="text" name="poste"/> <br />
Employeur : <input type="text" name="societe"/> <br />
Description : <br /><textarea name="description" cols="50" rows="5"></textarea> <br />
Mot clé 1 : <input type="text" name="mot_cle1"/> <br />
Mot clé 2 : <input type="text" name="mot_cle2"/> <br />
Mot clé 3 : <input type="text" name="mot_cle3"/> <br />
<input type="submit" name="valider" value="OK"/>
</form>
</body>
</html>
Ensuite vous traiterez ce formulaire par la page PHP monCV.php du TP8 pour afficher les données comme dans un CV.
Voici un exemple de résultat :
<html>
<head><title>Mon CV</title></head>
<body>
<?php
//Initialisation des variables
if(isset($_POST['valider'])){
$nom = $_POST['nom'];
$prenom = $_POST['prenom'];
$adresse = $_POST['adresse'];
$code_postal = $_POST['code_postal'];
$ville = $_POST['ville'];
$telephone = $_POST['telephone'];
$date_debut = $_POST['date_debut'];
$date_fin = $_POST['date_fin'];
$poste = $_POST['poste'];
$societe = $_POST['societe'];
$description = $_POST['description'];
$mot_cle1 = $_POST['mot_cle1'];
$mot_cle2 = $_POST['mot_cle2'];
$mot_cle3 = $_POST['mot_cle3'];
$poste_actuel = $_POST['poste_actuel'] == 'on';
}
//affichage
?>
<b><?php echo $nom.' '.$prenom; ?></b><br />
<b><?php echo $adresse; ?></b><br />
<b><?php echo $code_postal.' '.$ville; ?></b><br />
Tel : <b><?php echo $telephone; ?></b><br>
Expériences : <br />
<?php
if ($poste_actuel == true){
echo '<b>Depuis le '.$date_debut.'</b>';
}else{
echo '<b>Du '.$date_debut.' au '.$date_fin.'</b>';
}
?>
: <?php echo '<b>'.$poste.' ('.$societe.')</b>' ?><br />
<?php echo '<b>'.nl2br($description).'</b><br />' ?>
Mots clés : <b><?php echo $mot_cle1.', '.$mot_cle2.', '.$mot_cle3; ?></b><br />
</body>
</html>
On aurait pu empêcher l’affichage de la page via une redirection si le formulaire n'était pas complet.