L3 - Sites Web dynamiques : Mini-Wall MINI-WALL

Transcription

1 L3 - SITES WEB DYNAMIQUES MINI-WALL 1 Introduction L'objectif de ce TD est de mettre en place un mini "livre d'or", permettant à vos visiteurs de vous laisser des messages sur votre site. Une page affiche les messages enregistrés et contient un formulaire permettant de laisser de nouveaux messages. Les notions nécessaires à la mise en oeuvre de ce TD sont : création de page Web XHTML création de formulaires développement de pages PHP création de bases de données (avec PHPMyAdmin) utilisation des mécanismes d'insertion en base de données (avec PDO) utilisation des mécanismes d'affichage de contenus de bases de données (avec PDO) 2 Remarques / Consignes Votre rendu pourra s'intégrer au squelette de site crée lors du TD précédent, ou pourra s'afficher dans une page autonome. Si la seconde solution est retenue, vous devrez lui appliquer toutes les balises XHTML standard et lui associer une feuille de style CSS propre. 3 Principe de fonctionnement d'un formulaire Web Un formulaire web propose des contrôleurs de saisie au visiteur lui permettant d'envoyer des informations à une page de votre choix. La page réceptionant alors les données peut alors disposer des informations envoyées sous forme de variable. Il lui appartient alors d'effectuer les actions souhaitées pour le programme. Faites l'exercice suivant pour mieux comprendre le principe de fonctionnement d'un formulaire Web. Créeons le formulaire simple suivant dans une nouvelle page XHTML 1.0 Strict «ex1.php» : <form action="ex1.php" method="get"> <div> Indiquez votre nom et cliquez sur "envoyer" <label for="mon_nom">votre nom : </label><input type="text" name="mon_nom" id="mon_nom" /><br/> <input type="submit" title="envoyer" /> </div> </form> page 1/8

2 Si vous affichez cette page dans votre navigateur en appelant votre serveur Web (par exemple : ), et que vous utilisez le formulaire, vous remarquerez que la page se réafficher «vierge». Notez toutefois que l'adresse a légérement changé pour : mon-nom=toto C'est dû à la façon dont nous avons renseigné les attributs du formulaire : <form action="ex1.php" method="get"> L'attribut action indique que nous souhaitons envoyer les informations à la même page. L'attibut method indique que nous souhaitons passer les informations par l'url de la page (method GET). L'attribut «name» de chaque «input» placé dans la balise «form» définit le nom que prendra la variable au moment de la transmission. Enfin, l'input de type «submit» permet d'efffectuer l'action qui enverra le formulaire à la page chargée de le traiter. 3.1 A propos de la méthode GET Pour comprendre comment utiliser l'information renseignée, ajoutez le code suivant à la page ex1.php : <?php if(isset($_get["mon_nom"])){ echo "votre nom : ".$_GET["mon_nom"];?> Si vous utilisez à nouveau le formulaire, il vous affiche le nom que vous aurez entré dans le formulaire au sein de la page. En effet, le code ajouté teste tout d'abord si le tableau $_GET contient une variable nommée «mon_nom» (la fonction isset vérifie qu'une variable a bien été initialisée). Si elle existe, le code affiche son contenu. La méthode GET a l'avantage de vous permettre de contrôler immédiatement que les informations ont correctement été transmises à la page. Elles permettent également d'interagir avec une page en transmettant des variables directement dans l'url, au moyen de liens par exemple. A propos de la méthode POST Il peut au contraire être important de ne pas permettre une interaction autrement qu'à travers un formulaire, ou falloir transmettre à la page une grande quantité d'information (fichiers, textes longs, etc.). Pour cela il est possible d'utiliser une autre méthode de transmission des données : la méthode POST. créez une page ex2.php contenant le code suivant : <?php if(isset($_post["mon_nom"])){ echo "votre nom : ".$_POST["mon_nom"];?> page 2/8

3 <form action="ex2.php" method="post"> <div> Indiquez votre nom et cliquez sur "envoyer" <label for="mon_nom">votre nom : </label><input type="text" name="mon_nom" id="mon_nom" /><br/> <input type="submit" title="envoyer" /> </div> </form> Remarquez que la balise forme a changé : la page d'action n'est plus la même, et surtout nous avons indiqué method= post. De la même manière, le code d'affichage utilise maintenant le tableau $_POST au lieu du tableau $_GET. Executez le code en appelant Vous remarquerez cette fois que si la page semble fonctionner de manière identique, l'adresse n'affiche plus les variables passées. De plus, si vous tentez de passer? mon_nom=toto à la page, son contenu n'est pas affiché par la page. 4 Structure du programme Pour faire fonctionner notre «mur de messages» et rendre la rédaction des différentes parties plus simples nous allons à nouveau modulariser notre programme. Une page principale «messages.php» sera accessible aux visiteurs de notre site. Cette page appelera au moyen d'includes le module «message_manager.php». Le formulaire permettant de répondre aux messages sera lui placé dans un module «form_messages.php». Il pourra être appelé (include) indifférement par le messages_manager ou par la page messages.php. Voici donc la structure des fichiers à développer «à minima» : page 3/8

4 La page connexion.php devrait déjà avoir été crée dans un TD précédent. Vous pouvez vous y référer pour le récupérer. Le fichier look.css effectue toutes les mises en forme nécessaires. Le fichier form_messages.php ne contient que des balises xhtml permettant de composer le formulaire. 5 Création de la table "Messages" Dans phpmyadmin, créez dans votre base de données la table suivante : Champ Type Taille Interclassement Not Null Extra Clé primaire Index Unique Texte Entier (identique à la Not id INT 255base) Null auto_increment oui non non non (identique à la Not pseudo VARCHAR 255base) Null non non non non page 4/8

5 message MEDIUMTEXT Oui non non non non Not date datetime Null non non non non 6 Création du formulaire d'insertion Créez le fichier «form_messages.php» dans le dossier «librairies» : <h2>laissez-moi un message :</h2> <form action="messages.php" method="post"> <div> <input type="hidden" name="form_action" value="create_message"/> <label for="form_auteur">pseudo :</label><input type="text" id="form_auteur" name="form_auteur" /><br/> <label for="form_message">votre Message :</label> <textarea id="form_message" name="form_message" rows="20" cols="80"> </textarea><br/> <input type="submit" name="envoyer" title="envoyer"/> </div> </form> Les balises <label> utilisées permettent d'affecter un libellé à chaque champ de saisie du formulaire. L'input de type «hidden» permet de cacher des variables à l'utilisateur. Il est possible que l'utilisateur envoie un formulaire «vide». Nous pourrons au moins tester cette variable pour s'assurer qu'il y a bien eu envoi d'informations au moyen du formulaire. 7 Création du script d'insertion Le module «messages_manager.php» contient deux parties : la premiere partie vérifie si des informations ont été envoyées au moyen du formulaire, et injecte ces informations dans la base de données. La seconde partie affiche tous les messages enregistrés dans la base. Voici le code à rédiger de la page «messages_manager.php» : <?php // 1 - Traitement des informations éventuellement envoyées par le formulaire //si le tableau $_POST contient une variable nommée "form_action", c'est que le formulaire a été utilisé pour ajouter des données à la base. if(isset($_post["form_action"])){ // création de la requête SQL d'injection de données $querystring = "INSERT INTO `Messages` (`pseudo`,`message`,`date`) "; $querystring.= "VALUES('".$_POST["form_auteur"]."','". $_POST["form_message"]."','".date("Y-m-d H:i:s")."');"; // Si l'insertion a bien été faite, $response!= false if($reponse = $connexion->query($querystring)){ echo "<div class='alert'>votre Message a été inséré avec Succès! </div>"; else{ echo "<div class='error'>erreur lors de l'enregistrement du message</div>"; page 5/8

6 // 2- Affichage des messages stockées dans la base de données echo "<h2>voici les messages enregistrés</h2>"; //Affichage des messages présents dans la base $querystring = "SELECT * FROM `Messages` WHERE 1 ORDER BY `date` DESC;"; if($results = $connexion->query($querystring)){ echo "<div class='messages_list'>"; while($donnees = $results->fetch()){ echo "<div class='message'>"; //convertit la date Mysql en variable de type date pour PHP $datetime = strtotime($donnees["date"]); //formate la date PHP en chaîne "lisible" => $date_string = date("d/m/y à G:i:s",$datetime); echo "<div class='auteur'>".$donnees["pseudo"]." (". $date_string.")</div>"; echo "<div class='message_detail'>".$donnees["message"]." (". $date_string.")</div>"; echo "</div>"; echo "</div>";?> 7.1 Fonction d'insertion de données Une fois que la présence d'une variable «form_action» a été testé dans le tableau $_POST (c'est lui qui contient les données d'un formulaire envoyé avec la méthode «post»), nous pouvons injecter les données dans MySQL. Les requêtes d'injection s'écrivent toujours de la façon suivante : INSERT INTO `NomdeTable` (`champ1`,`champ2,`...) VALUES('valeur1','valeur2',...); Appliqué à notre base de données, un exemple de requête serait le suivant : INSERT INTO `Messages` (`pseudo`,`message`,`date`) VALUES('toto','Ceci est un message ',' :03:03'); Pour que généraliser ce cas, c'est à dire que les données soient injectés à partir des informations saisies par l'utilisateur, il nous suffit de passer les valeurs du formulaires dans la partie «values». Nous générerons une chaîne de caractères qui contient la requête SQL de cette façon : $querystring = "INSERT INTO `Messages` (`pseudo`,`message`,`date`) "; $querystring.="values('".$_post["form_auteur"]."','". $_POST["form_message"]."','".date("Y-m-d H:i:s")."');"; (notez que la deuxième ligne contient un.= au lieu d'un simple = ce qui signifie que le texte sera concaténé à la variable au lieu de remplacer son contenu.) page 6/8

7 Dans MySQL les dates sont représentées au moyen de chaînes de caractères. Il faut donc demander à PHP de convertir la date courante en une chaîne valide : Il aurait également également été possible de demander à Mysql d'injecter la date avec une fonction qui lui appartient (NOW()) : $querystring = "INSERT INTO `Messages` (`pseudo`,`message`,`date`) "; $querystring.="values('".$_post["form_auteur"]."','". $_POST["form_message"]."',NOW());"; Nous pouvons enfin indiquer à l'utilisateur que son message a bien été inséré en testant le retour de l'exécution de la requête sur le serveur Affichage des messages stockés dans la base de données La seconde partie du programme ci-dessous reprend les principes explorés lors du TD 2 : Création d'une navigation dynamique. Il convient juste de s'attarder sur les lignes permettant d'afficher la date stockée dans la base de données : $datetime = strtotime($donnees["date"]); $date_string = date("d/m/y à G:i:s",$datetime); Si nous nous contentions d'afficher ce que MySQL a stocké nous aurions obtenu un format de date américaine trop précis comme par exemple : :56:16. De plus, comme toutes les informations que retourne MySQL, la date est dans un format «chaîne de caractères». 8 page d'affichage Il vous suffit maintenant d'appeler la page messages.php qui devrait vous afficher le formulaire permettant de renseigne 9 Mise en forme des résultats Il ne vous reste plus qu'à créer la page «Messages.php» qui va effectuer tous les appels nécessaires : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>mini-mur de messages</title> <link rel="stylesheet" href="look.css" /> </head> <body> <h1>messages</h1> <?php include_once("librairies/connexion.php"); include("librairies/messages_manager.php"); include("librairies/form_message.php");?> </body> page 7/8

8 </html> Testez cette page dans un navigateur à travers votre serveur Web (ex : 10 Finalisation Créez les classes CSS correspondant aux balises affichées pour donner un meilleur aspect à votre mini-mur de messages. 11 Remarque importante Ce programme a pour but de vous enseigner le passage d'information via des formulaires. Si vous déployiez un tel script sur un vrai serveur il vous faudrait appliquer des mesures de sécurité protégeant votre site des attaques malveillantes et des robos «spammeurs». En effet, certaines attaques consistent à entrer du code source directement dans les champs de saisies afin qu'ils soient exécutés par le serveur d'accueil au moment de l'affichage. Pour s'en prémunir, on utilise des fonctions php spécifiques qui empêchent ce genre de méthodes. Les méthodes privilégiées à ce jour consistent à «préparer» les requêtes. Penchez-vous sur ces méthodes si vous devez un jour proposer des formulaires de ce types à vos visiteurs. Contre les robots, la meilleure protection aujourd'hui consiste à utiliser des «captchas» dans vos formulaires. Ils permettent de s'assurer que seul un être humain peut compléter correctement le formulaire. page 8/8