Créer des sites Web dynamiques en PHP (PHP Hypertext Preprocessor)

Auteur: Mohamed CHINY Durée necessaire pour le cours de Créer des sites Web dynamiques en PHP (PHP Hypertext Preprocessor) Niveau recommandé pour le cours de Créer des sites Web dynamiques en PHP (PHP Hypertext Preprocessor) Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 9: Exercice - Vérification des champs de formulaire en PHP

Toutes les pages

Enoncé

On souhaite créer un formulaire d'inscription des visiteurs qui contient les champs suivants:
  • Civilité: liste de sélection qui contient les options Mlle, Mme et M.
  • Nom: zone de texte
  • Prénom: zone de texte
  • Email: zone de texte
  • Mot de passe: zone de mot de passe
  • Confirmation du mot de passe: zone de mot de passe
  • Bouton d'envoi pour valider l'inscription

L'objectif de l'exercice n'est pas d'enregistrer les données entrées par le client car nous n'avons pas encore vu les fichiers et les bases de données, mais seulement contrôler la saisie à bases des fonctions que nous avons déjà vu en cours jusqu'ici.

Si par exemple le client laisse le nom vide on affichera le message "Nom laissé vide" en rouge en haut du formulaire, ou si les deux mots de passes renseignés ne sont pas identique le message "Mots de passes non identiques" sera affiché.

Notez que l'objectif est que les champs soient saisies, peut importe la nature de leur contenu (chiffre, symboles...). On souhaite également afficher les messages d'erreur ("Nom laissé vide"...) un par un s'il y'en a plusieurs. Par exemple, si le client laisse les champs nom et prénom tous les deux vides, quand il aura cliqué sur le bouton d'envoi on affichera "Nom laissé vide". S'il saisit le nom tout en laissant le prénom vide, alors le message qui s'affichera la prochaine fois sera "Prénom laissé vide"...

Si tous les champs sont valides, alors on affichera les informations saisis par le client.

Dans le cas où un champ présente un problème (laissé vide par exemple), alors il faut conserver les valeurs déjà saisis au sein de formulaires.

Si vous dotez votre page d'un bon design à l'aide de CSS, cela sera apprécié.

Correction

Pour aller doucement, je vous propose d'abord le code coté client auquel je n'ai pas encore intégré le PHP. En effet, c'est comme ça qu'il faut procéder: commencer d'abord par la création du contenu statique (formulaires et autres objets HTML), mettre en forme le contenu avec CSS, déclarer du Javascript si vous en avez besoin, puis à la fin, intégrer du PHP. Mais les choses ne se déroulent pas toujours comme prévu dès le premier coup, alors il est possible de sauter d'un code à un autre afin de régler le problème. Mais dans le cas général, il faut procéder étape par étape.

Voici les code HTML et CSS qui permettent de présenter la page Web (vous nommez votre page comme bon vous semble à condition qu'elle soit suffixée par .php).
<!DOCTYPE html>
<html>
   <head>
      <meta charset="ISO-8859-1" />
      <style>
         fieldset{
            border:solid 1px #EE6600;
            border-radius:10px;
            padding:20px;
         }
         legend{
            font:bold 16pt arial;
            color:#EE6600;
         }
         input,select{
            border:solid 1px #AAAAAA;
            padding:10px;
            font:10pt verdana;
            color:#EE6600;
            outline:none;
            border-radius:6px;
         }
         input[type="submit"]{
            border:none;
            background-color:#EE6600;
            color:#FFFFFF;
            width:200px;
            cursor:pointer;
         }
         .label{
            margin-bottom:4px;
            font:10pt arial;
            color:#AAAAAA;
         }
         .champ{
            margin-bottom:20px;
         }
         .erreur{
            font:10pt arial;
            color:#DD0000;
            background-color:#EEEEEE;
            padding:10px;
            border-radius:10px;
            margin-bottom:10px;
         }
         .rappel{
            font:10pt arial;
            color:#888888;
            background-color:#EEEEEE;
            padding:10px;
            border-radius:10px;
            margin-bottom:10px;
         }
      </style>
   </head>
   <body>
      <form name="fo" method="post" action="">
         <fieldset>
            <legend>Nouvel utilisateur</legend>
            <div class="label">Civilité</div>
            <div class="champ">
               <select name="civilite">
                  <option>Mme</option>
                  <option>Mlle</option>
                  <option>M.</option>
               </select>
            </div>
            <div class="label">Nom</div>
            <div class="champ">
               <input type="text" name="nom" />
            </div>
            <div class="label">Prénom</div>
            <div class="champ">
               <input type="text" name="prenom" />
            </div>
            <div class="label">Email</div>
            <div class="champ">
               <input type="text" name="email" />
            </div>
            <div class="label">Mot de passe</div>
            <div class="champ">
               <input type="password" name="pass" />
            </div>
            <div class="label">Confirmer le mot de passe</div>
            <div class="champ">
               <input type="password" name="repass" />
            </div>
            <div class="champ">
               <input type="submit" name="valider" value="Valider l'inscription" />
            </div>
         </fieldset>
      </form>
   </body>
</html>
Comme je l'ai mentionné dans les pages précédentes, les scripts PHP importants (ceux qui vont assurer la plus grade tâche, dans ce cas, le contrôle de saisie) je les placerai au tout début du document (avant le Doctype).

Nous allons d'abord commencer par récupérer les $_POST comme ceci:
<?php
   @$civilite=$_POST["civilite"];
   @$nom=$_POST["nom"];
   @$prenom=$_POST["prenom"];
   @$email=$_POST["email"];
   @$pass=$_POST["pass"];
   @$repass=$_POST["repass"];
   @$valider=$_POST["valider"];
?>
Les arobas servent à ignorer les messages de notification du genre "Indefined index civilite".

J'ai précisé dans l'énoncé qu'il faut garder les champs déjà saisis. Par défaut, si la page est rechargée suite au clic sur le bouton d'envoi, tous les champs seront vidés. On y placera donc l'attribut value auquel on donnera comme valeur celle de la variable associée, comme ceci:
<input type="text" name="nom" value="<?php echo $nom?>" />
Dans le cas de la liste de sélection on fera plutôt:
<select name="civilite">
   <option <?php if($civilite=="Mme") echo "selected";?>>Mme</option>
   <option <?php if($civilite=="Mlle") echo "selected";?>>Mlle</option>
   <option <?php if($civilite=="M.") echo "selected";?>>M.</option>
</select>
Maintenant, il faut prévoir une zone où afficher les messages prévus sur la page suite à l'envoi du formulaire. J'ai prévu deux styles CSS associés au classes erreur et rappel. Ces deux styles servent à colorer le message selon sa nature. S'il s'agit d'une erreur il sera rouge et s'il s'agit du rappel des informations du client il sera coloré en gris.
Dans ce cas je n'ai pas utilisé la balise <font> pour colorer les messages car elle est devenue obsolète en HTML5.
Avant le formulaire (la zone destinée à accueillir les messages) on va placer le code suivant:
<?php echo $message ?>
C'est la variable $message qui accueillera les notifications générées par le serveur suite au contrôle du formulaire. Il ne faut pas oublier de l'initialiser au début du document en lui affectant la chaîne vide ($message="";).

Voyons maintenant à quoi ressemble le traitement demandé:
<?php
   @$civilite=$_POST["civilite"];
   @$nom=$_POST["nom"];
   @$prenom=$_POST["prenom"];
   @$email=$_POST["email"];
   @$pass=$_POST["pass"];
   @$repass=$_POST["repass"];
   @$valider=$_POST["valider"];
   
   if(isset($valider)){
      if(empty($nom))
         $message='<div class="erreur">Nom laissé vide.</div>';
      elseif(empty($prenom))
         $message='<div class="erreur">Prénom laissé vide.</div>';
      elseif(empty($email))
         $message='<div class="erreur">Email laissé vide.</div>';
      elseif(empty($pass))
         $message='<div class="erreur">Mot de passe laissé vide.</div>';
      elseif($pass!=$repass)
         $message='<div class="erreur">Les mots de passe ne sont pas identiques.</div>';
      else{
         $message='<div class="rappel"><b>Rappel:</b><br />';
         $message.=$civilite.' '.ucfirst(strtolower($prenom)).' '.strtoupper($nom).'<br />';
         $message.='Email: '.$email;
         $message.='</div>';
      }
   }
?>
Le code précédent et placé en entier avant le Doctype.

Dans le bloc else j'ai procédé à la création de la variable $message (qui contient le rappel) petit à petit en concaténant son ancien contenu avec le nouveau.

Maintenant que vous avez compris comment procéder, voilà le code complet:
<?php
   @$civilite=$_POST["civilite"];
   @$nom=$_POST["nom"];
   @$prenom=$_POST["prenom"];
   @$email=$_POST["email"];
   @$pass=$_POST["pass"];
   @$repass=$_POST["repass"];
   @$valider=$_POST["valider"];
   
   if(isset($valider)){
      if(empty($nom))
         $message='<div class="erreur">Nom laissé vide.</div>';
      elseif(empty($prenom))
         $message='<div class="erreur">Prénom laissé vide.</div>';
      elseif(empty($email))
         $message='<div class="erreur">Email laissé vide.</div>';
      elseif(empty($pass))
         $message='<div class="erreur">Mot de passe laissé vide.</div>';
      elseif($pass!=$repass)
         $message='<div class="erreur">Les mots de passe ne sont pas identiques.</div>';
      else{
         $message='<div class="rappel"><b>Rappel:</b><br />';
         $message.=$civilite.' '.ucfirst(strtolower($prenom)).' '.strtoupper($nom).'<br />';
         $message.='Email: '.$email;
         $message.='</div>';
      }
   }
?>
<!DOCTYPE html>
<html>
   <head>
      <meta charset="ISO-8859-1" />
      <style>
         body{
            padding:10px;
         }
         fieldset{
            border:solid 1px #EE6600;
            border-radius:10px;
            padding:20px;
         }
         legend{
            font:bold 16pt arial;
            color:#EE6600;
         }
         input,select{
            border:solid 1px #AAAAAA;
            padding:10px;
            font:10pt verdana;
            color:#EE6600;
            outline:none;
            border-radius:6px;
         }
         input[type="submit"]{
            border:none;
            background-color:#EE6600;
            color:#FFFFFF;
            width:200px;
            cursor:pointer;
         }
         .label{
            margin-bottom:4px;
            font:10pt arial;
            color:#AAAAAA;
         }
         .champ{
            margin-bottom:20px;
         }
         .erreur{
            font:10pt arial;
            color:#DD0000;
            background-color:#EEEEEE;
            padding:10px;
            border-radius:10px;
            margin-bottom:10px;
         }
         .rappel{
            font:10pt arial;
            color:#888888;
            background-color:#EEEEEE;
            padding:10px;
            border-radius:10px;
            margin-bottom:10px;
         }
      </style>
   </head>
   <body>
      <?php echo $message ?>
      <form name="fo" method="post" action="">
         <fieldset>
            <legend>Nouvel utilisateur</legend>
            <div class="label">Civilité</div>
            <div class="champ">
               <select name="civilite">
                  <option <?php if($civilite=="Mme") echo "selected";?>>Mme</option>
                  <option <?php if($civilite=="Mlle") echo "selected";?>>Mlle</option>
                  <option <?php if($civilite=="M.") echo "selected";?>>M.</option>
               </select>
            </div>
            <div class="label">Nom</div>
            <div class="champ">
               <input type="text" name="nom" value="<?php echo $nom?>" />
            </div>
            <div class="label">Prénom</div>
            <div class="champ">
               <input type="text" name="prenom" value="<?php echo $prenom?>" />
            </div>
            <div class="label">Email</div>
            <div class="champ">
               <input type="text" name="email" value="<?php echo $email?>" />
            </div>
            <div class="label">Mot de passe</div>
            <div class="champ">
               <input type="password" name="pass" value="<?php echo $pass?>" />
            </div>
            <div class="label">Confirmer le mot de passe</div>
            <div class="champ">
               <input type="password" name="repass" value="<?php echo $repass?>" />
            </div>
            <div class="champ">
               <input type="submit" name="valider" value="Valider l'inscription" />
            </div>
         </fieldset>
      </form>
   </body>
</html>