Hébergement du site en PHP et Mysql par WDMédia-hébergement
Vous aussi adpotez les éléPHPants de Vincent Pontier !  
CONCOURS
 
 
PLUS DE PHP
 
 
PLUS DE JAVASCRIPT
 
COMMENT CA MARCHE
 
 
EXPLIQUE-MOI
 
 
NEWS LETTER
 

 
PARTENAIRES
 
Découvrez scriptsphp.org
Découvrez phpteam.net
Tout sur les expressions régulières
IE sucks :-)
 
DESIGN DU SITE
 
Livre d'or

Tuto écrit par HbiLLo et Manico, revu en août 2004 par Molokai et Raf

 

Dans cette série de tutoriaux sur la construction de scripts en php, nous allons voir le processus d'élaboration d'un script. Ces tutoriaux ne sont PAS destinés aux débutants totaux, il est supposé que vous comprenez dejà les exercices situés dans la partie "Debutez !" du site.

Créer un Guestbook (Livre d'or) en PHP / Mysql

Commençons par nous demander ce que doit permettre le script :
  1. Les visiteurs doivent pouvoir laisser un message.
  2. Les visiteurs doivent pouvoir lire les messages que leurs prédécesseurs ont laissés.
A partir de là, nous pouvons définir ce que nous avons à faire :
  1. Créer un formulaire où le visiteur pourra entrer son commentaire, ainsi que le script qui traitera ce formulaire et stockera les messages.
  2. Créer un script qui affichera tous les messages.
Maintenant rajoutons quelques détails :
  • Nous choisissons mysql comme moyen de stockage des messages, le script traitant les messages devra donc stocker ceux-ci dans une table.
  • Nous allons vérifier l'adresse email et que les champs ne sont pas vides avant d'enregistrer le message.

Créer la table Sql en utilisant PhpMyAdmin

Nous devrons d'abord créer la table Mysql qui contiendra les messages.

De quelles informations avons nous besoin ?

  • du pseudo du visiteur (name),
  • de son adresse e-mail (email),
  • de son message (comment),
  • de la date du message (date).
Nous avons donc nos quatres champs, auxquels nous allons rajouter un identifiant unique - cela servira quand on rajoutera une administration par exemple - que nous appellerons id.

Il nous faut ensuite définir les types de ces champs.
  • Pour le pseudo, nous supposerons qu'il ne fera pas plus de 50 caractères. Il sera composé de caractères, nous utiliserons donc un champ de type varchar(50).

  • Pour l'adresse email, il s'agira de caractères comme dans le cas du pseudo. Les emails étant un poil plus longs, nous choisirons de mettre un limite à 100 caractères. Ce champ aura donc comme type varchar(100)

  • Pour le message, il peut être long, un varchar étant limité à 255 caractères, cela risque de faire juste. nous allons donc utiliser un champ de type text, qui permet de contenir déjà une bonne page de texte, inutile d'en mettre plus.

  • Pour la date, nous allons stocker un timestamp unix, qui fait donc 10 chiffres de long * nous choisirons donc un type int(10). De plus le timestamp n'étant pas négatif, nous allons utiliser un champ sans signe, d'où l'utilisation du unsigned.

  • Pour l'identifiant, un nombre est suffisant. Nous choisirons un type mediumint(8) unsigned, ce qui permet de stoquer jusqu'à un peu plus de 16 millions de messages, ce qui devrait nous laisser tranquille jusqu'à la fin des temps...
De plus tous ces champs ne comporteront pas de valeur nulle (surtout pas l'identifiant), nous les mettrons donc en not null. L'identifiant sera la clé unique primaire de cette table. Afin de ne pas avoir à nous en soucier pour l'ajout de message, nous le mettrons en auto_increment.

Nous ferons la création de cette table sous PhpMyAdmin, voici le code à entrer après avoir créé la base de données

Création de la table dans phpMyAdmin


* le timestamp unix est en fait le nombre de secondes depuis le début de l'ère unix, c'est à dire depuis le 1er janvier 1970 à minuit pile. Il y a environ 6 mois, ce nombre est passé à 10 chiffre de long, ce qui signifiait qu'un milliard de secondes s'étaient écoulées depuis le 1er janvier 1970. 1 milliard de secondes représentant environ 30 ans, il faudra encore qu'il s'écoule environ 270 ans avant que ce nombre ne passe à 11 chiffres. Il est donc suffisant de le représenter par un nombre à 10 chiffres car il y a peu de chance que notre livre d'or ne tienne jusque là.
Script d'ajout du message

Le script d'ajout du message doit d'abord vérifier que les champs sont bien remplis, si c'est le cas il doit récupérer la date puis construire la requête pour insérer les valeurs récupérées dans la table et l'executer, sinon il doit afficher un message d'erreur et revenir en arrière. Ce qui donne une fois codé :

Requête d'insertion du message (guestbook1.php)

 1  <?php 
 
   // On récupère les données postées : Voir les tutos dans la section "Débutez"
 
 2  // On vérifie que les champs ne sont pas vides
 3  if (!empty($name) && !empty($lemail) && !empty($comment)) {     
 4      // Définit la variable de date
 6      $date time();
 6  
 7      // Créé la requête
 8      $query "INSERT INTO $table(date,name,email,comment) VALUES('$date','$name','$lemail','$comment')";
 9  
 10      // Exécute la requête d'insertion du message
 11      $result mysql_query($query) or die('Erreur SQL : '.mysql_error());
 12  } else {
 13      // On affiche un message d'erreur
 14      echo '<script language="javascript">alert(\'Merci de remplir tout les champs.\');location.href='.$HTTP_REFERER.';</script>';
 15      echo '<noscript>Merci de remplir tout les champs. <a href="'.$HTTP_REFERER.'">retour</a></noscript>';
 16  }
 17  ?>


Formulaire d'ajout du message

Le formulaire d'ajout du message est tout simple. Juste deux points spéciaux :

  • Le champ de type hidden. Celui ci nous permettra de savoir si le formulaire a été soumis, en effet nous regrouperons tout dans un seul fichier, il serait donc génant que le script d'ajout essayer d'ajouter un message si personne n'a rempli le formulaire.

  • Le onsubmit du formulaire. Nous nous servirons d'une fonction javascript pour valider l'adresse e-mail, plus simple car l'équivalent en php nécessite l'utilisation d'une expression régulière. Nous verrons plus en details comment cela fonctionne au moment de parler de cette fonction. Il faut savoir que vous devriez normalement également vérifier l'adresse email dans le script d'ajout, car le javascript est facilement désactivable.

Formulaire pour poster un message (guestbook2.php)

 1   <table width="80%"><tr><td>
 2      <form method="post" action="<?php echo $url?>" onSubmit="return testform(this.name,this.lemail,this.comment)">
 3      <input type="hidden" name="ajout" value="true">
 4      <table cellspacing="0" cellpadding="0" style="border: 1px solid white;" height="288">
 5          <tr>
 6              <td width="130"><font color="white">Nom</font></td>
 7              <td width="205"><input name="name" size="20"></td>
 8          </tr>
 9          <tr>
 10              <td width="130"><font color="white">Votre Email :</font></td>
 11              <td width="205"><font color="white"><input name="lemail" size="20"></font></td>
 12          </tr>
 13          <tr>
 14              <td colspan="2">
 15                  <textarea name="comment" rows="4" cols="55"></textarea>
 16                  <br><br>
 17                  <input type="Submit" value="Valider">
 18                  <br><br>
 19                  <a href="#">Haut</a><br>
 20              </td>
 21          </tr>
 22      </table>
 23      </form>
 24  </td></tr></table>

Affichage des messages

Il nous faut maintenant créer le code php qui va nous permettre de lister les messages à partir de la table , on utilisera une boucle while pour parcourir le résultat. Nous utiliserons aussi htmlentities pour afficher le message afin d'éviter que du javascript ou autre html ne joue les troubles fête.

Affichage des messages (guestbook3.php)

 1   <table width="100%" height="100%" ><tr><td>
 2      <b>
 3      <?php
 4      // Requête ordonnant les messages par dates
 5      $query "SELECT date,name,email,comment FROM $table ORDER BY date DESC";
 6      
 7      // Exécute la requête précédente
 8      $result mysql_query($query) or die('Erreur SQL : '.mysql_error()); 
 9      
 10      // Renvoie le nombre de lignes pour pouvoir afficher le nombre total de messages postés
 11      echo mysql_num_rows($result); 
 12      ?> 
 13      messages
 14      </b>
 15      <table width="95%"><tr><td>
 16          <hr size=1>
 17  
 18      <?php
 19      // Définit la boucle : tant qu'il y a des messages dans la BDD
 20      while ($val mysql_fetch_array($result)) { 
 21          echo '<font color="black" face="verdana, arial">Message de :</font>';
 22          // Affiche le pseudo du posteur de message (avec lien mailto:)
 23          echo '<a href="mailto:'.$val['email'].'">'.$val['name'].'</a>'
 24          echo '<font color="black" face="verdana, arial">Posté le : </font>';
 25          // Affiche la date où a eté posté le message
 26          echo '<font color="orange">'.date("d/m/Y",$val['date']).'</font>';
 27          // Affiche le message posté
 28          echo '<div>'.htmlentities($val['comment']).'</div>';
 29          echo '<hr size=1>';
 30      
 31      ?>
 32      </td></tr></table>
 33  </td></tr></table>

Code du fichier de configuration "config.inc.php"

Comme bien souvent, nous gardons la configuration de la base de données dans un fichier à part.

Fichier de configuration (config.inc.php)

 1   <?php
 2  
 3  // l'adresse de votre serveur php
 4  $host 'localhost'
 5  
 6  // votre login : root sur localhost
 7  $user 'root'
 8  
 9  // votre pass : vide sur localhost
 10  $pass ''
 11  
 12  // le nom de la base de données
 13  $bdd 'LD';
 14  
 15  // le nom de votre table Sql
 16  $table 'guestbook';
 17  
 18  // Renvoie vers la page de code php, ici c'est la page même !
 19  $url $PHP_SELF
 20  
 21  ?>
 22  

La fonction javascript

Afin de gagner un peu de temps, il est souvent utile de faire une première vérification des informations directement du coté client. Pour cela, nous utilisons du javascript. Comment cela fonctionne t'il ? Nous ajoutons un appel à la fonction javascript dans le onsubmit du formulaire. Lors de la soumission du formulaire, le navigateur va alors, avant même d'envoyer le formulaire à la page spécifiée dans le action, executer la fonction javascript. Si celle ci retourne la valeur true, alors le processus d'envoi du formulaire sera fait, mais si la fonction retourne la valeur false, alors tout est annulé et cela fait comme si l'on avais pas cliqué sur le bouton de soumission du formulaire. Voici la fonction que nous utiliserons dans notre cas :

Fonction Javascript

<script language="JavaScript">
<!--
function verif(lemail) {
    var arobase = lemail.indexOf("@"); var point = lemail.lastIndexOf(".")
    if((arobase < 3)||(point + 2 > lemail.length)||(point < arobase+3))
        return false
        return true
}

function testform(lenom,mail,comment) {
    if(lenom.value=="") {
        lenom.focus();
        return false
    }
    if(!verif(mail.value)) {
        mail.value="";
        mail.focus();
        return false
    }
    return true
}
//-->
</script>


Un peu de colle

Nous avons donc nos différents éléments du livre d'or, il ne nous reste plus qu'à mettre tout ça dans le même script pour finir le tout. Voici donc l'enchaînement logique des parties que nous avons vues (notez que quand il est écrit "ici le fichier guestbook.php", cela veut dire "prendre ce qu'il faut du fichier", ne pas mettre les <?php et ?> qui l'encadrent par exemple) :

La glue

 1   <html>
 2  <head>
 3  <title>Mon livre d'or</title>
 4  <!-- Ici on met la fonction javascript qui nous servira à
 5       Valider l'adresse e-mail -->
 6  </head>
 7  <body>
 8  <?php
 9  include('config.inc.php');
 10  // Ici on ouvre une connexion au serveur MySQL
 11  // Voir le tutorial sur ce sujet
 12  
 13  // Si le formulaire à été soumis, $ajout vaudra true
 14  if ($ajout) {
 15      // Ici se trouve le script d'ajout du message
 16      // En base de données, guestbook1.php
 17  }
 18  
 19  // Ici se trouve le script permettant d'afficher la liste de messages
 20  // guestbook3.php
 21  
 22  // Ici se trouve le formulaire d'ajout de message
 23  // guestbook2.php
 24  
 25  // Et ici on ferme la connexion à la base de données
 26  @mysql_close();
 27  ?>
 28  </body></html>
Plus loin

Ce script est loin d'être parfait, et ce n'est pas son but. Voici donc une petite liste de choses que vous pourriez ajouter pour le rendre meilleur :

  • Un meilleur contrôle de l'adresse email.
  • Un meilleur contrôle de l'affichage, avec des htmlentities sur tout les champs et un wordwrap pour limiter les mots trop longs qui pourraient défigurer votre charte graphique.
  • Un affichage page par page.
  • Utiliser un système de cache pour soulager la base de données en cas de forte affluence.
  • L'envoi par mail dans votre boite email des messages postés par les visiteurs.

Fin de ce cours

Voilà ce cours est fini. Nous vous déconseillons de copier coller le code bêtement, car ça n'est pas en copiant sans lire les explications que l'on progresse. Si votre but est uniquement d'avoir un livre d'or, vous avez aussi vite fait d'en télécharger un tout fait qui sera sans doute plus complet. A vous de voir si vous voulez progresser...

cours redigé par HbiLLo et Manico



Ajouter une réponse
Nom
Email
Titre

Mise en forme : gras = [b]...[/b], italic = [i]...[/i], souligné = [u]...[/u], citation = [quote]...[/quote], lien = [url]liens_externe[/url] ou [url nom=texte]liens_externe[/url], code source : [code]...[/code]

Mémoriser mon nom et mon email : Oui Non
www.phpdebutant.org © 2014 - L'équipe de phpDebutant - Hébergement : WDMédia-hébergement
DEBUTEZ !
 
  0.  Introduction
  1.  Afficher une phrase ou une image
  2.  Afficher la date et l'heure
  3.  PHP dans du code HTML
  4.  La concaténation
  5.  Récupérer les valeurs d'un formulaire
  6.  Les structures de contrôle
  7.  Ecrire et lire dans un fichier texte
  8.  Les fonctions utilisateurs
  9.  Les variables d'environnement
  10.  Quelques fonctions utiles
  11.  SQL/MySQL (Create, Alter & Drop)
  12.  SQL/MySQL (Insert et Select)
  13.  SQL/MySQL (Delete et Update)
  14.  SQL/MySQL (Where)
  15.  Fonctions PHP pour mySQL
  16.  Interroger une table MySQL
  17.  Alimenter une ou plusieurs tables mySQL
  18.  Les pseudos-frames
  19.  Les sessions php4
  20.  Affichage page par page
  21.  Images dynamiques
  22.  Ca marche pas ?
  23.  Variables globales à OFF
  24.  Les variables dynamiques