Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP

Transcription

1 Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP Au cours de ce TP, vous allez voir comment PHP permet aux utilisateurs, une interaction avec le système. 1. Premier pas avec les formulaires Les formulaires permettent aux utilisateurs de saisir des données ; ces données sont ensuite traitées par le serveur. Par exemple, lorsque vous vous connectez sur le site de la SNCF, vous saisissez les caractéristiques du trajet qui vous intéresse puis le serveur traite votre demande et vous affiche les trains correspondant. Le serveur peut traiter lui-même la demande de l utilisateur ou l enregistrer / la transmettre à un être humain. C est le cas lorsque vous écrivez des messages dans des forums électroniques. Ou bien encore lorsque vous rédiger votre avis sur un site. La déclaration d'un formulaire La définition des différents éléments du formulaire se fait en utilisant la balise <form>. Il ne faut pas oublier d écrire la balise </form> pour déclarer la fin du formulaire. L'action à réaliser pour traiter le formulaire doit être précisée en utilisant les deux attributs suivants : - L'attribut action : désigne le fichier PHP qui va traiter, sur le serveur, les informations saisies dans le formulaire; - L'attribut method : définit la méthode de transfert des données vers le serveur. Les deux valeurs possibles sont get et post. Dans la suite de ces TPs, nous ne verrons que la méthode post. La syntaxe habituelle est donc : <form method="post" action="traiteform.php"> <fieldset> <legend>ceci est le titre de mon formulaire</legend> <!-- la suite sera le corps du formulaire -->... </fieldset> </form> La balise <fieldset> permet, à l'intérieur d'un formulaire, de créer des blocs visuels permettant d'améliorer la présentation des formulaires. La balise <legend> sert ensuite à donner un titre au bloc de formulaire. Les éléments de formulaires Les éléments de formulaires sont répartis en 3 classes : 1

2 - input : Champs de saisie de texte et différents types de boutons - select : Liste (menus déroulants et ascenseurs) - textarea : Zone de saisie de texte libre L'attribut name est obligatoire, car c'est lui qui permet d'identifier les données côté serveur et ainsi de récupérer le contenu saisi par l'utilisateur. Il doit être unique, sauf dans le cas d'un ensemble composé de plusieurs éléments (boutons radio par exemple). Seuls les boutons submit et reset n'ont pas besoin de cet attribut. L'attribut value est commun à ces balises, mais son rôle est différent selon le type d'élément utilisé. Ces différents exemples sont illustrés sur le site du module de com231a. L élément INPUT Cet élément est utilisé pour définir des zones d'entrée de texte simple, des boutons, des cases à cocher ou des boutons radio. Le type d'élément dont il s'agit sera précisé en utilisant l'attribut type. Type Code Résultat sans <input name="ident" /> <input name="ident" value="par défaut" /> submit <input type="submit" value="envoyer" /> Par défaut envoi checkbox radio <input type="checkbox" name="pfm[]" value="linux" checked = "checked" /> Linux<br/> <input type="checkbox" name="pfm[]" value="dos" /> Dos<br/> <input type="checkbox" name="pfm[]" value="win" /> Windows <input type="radio" name="media" value="cd" checked= "checked"/> CD-ROM<br/> <input type="radio" name="media" value="dk" /> Disquette Linux Dos Windows CD- ROM Disquette password <input type="password" name="pass" /> *** reset <input type="reset" value="effacer" /> Efface 2

3 L'élément SELECT Cet élément sert à définir des listes (menus déroulants ou ascenseurs). Il est utilisé avec l'élément <option>. Code <select name="menu"> <option value="pomme">pomme</option> <option value="banane">banane</option> <option value="orange">orange</option> <option value="citron" selected= "selected"> Citron</option> <option value="peche"> Pêche</option> <option value="poire"> Poire</option> </select > <select name="menu" size= "4">... </select> Citron Pomme Banane Orange Citron Résultat L'élément TEXTAREA Il permet de créer une zone de texte de plusieurs lignes. Il faut spécifier sa taille avec les attributs rows et cols. Code <textarea name="comm" rows="10" cols="40"> Tapez vos commentaires ici </textarea> Résultat Tapez vos commentaires ici Traitement des formulaires Il s'agit de récupérer les données saisies par l'utilisateur et de les traiter. Il existe quatre techniques : - La passerelle CGI : C est la technique la plus classique, elle consiste à utiliser la passerelle CGI (Common Gateway Interface) pour exécuter un programme de traitement sur le serveur. Le programme en question recevra toutes les données saisies par l'utilisateur et construira une nouvelle page en réponse. - Les scripts : Ils permettent de réaliser de petites applications simples sans interaction avec le serveur. - Se faire expédier les données par mail : Cette méthode reste la plus simple à utiliser même si elle ne permet pas de traiter un grand nombre de données. Il suffit d'indiquer une adresse électronique comme action. C est ici un être humain qui traite les données. 3

4 <form method="post"> - Envoyer les données à un autre fichier PHP pour faire des traitements sur les données recueillies. Par exemple, le fichier PHP exécutera une requête SQL avec les champs saisis par l utilisateur. C est cette dernière technique que nous allons utiliser dans le cadre de ce module. Dans tous les cas, le formulaire doit comporter un élément submit car c est en cliquant sur ce bouton que l utilisateur valide et envoie ses données au serveur. Un formulaire doit donc au minimum comporter les balises suivantes : <form action="traite.php" method="post"> <input type="submit" value="ok" /> </form> Exercice 1 Reproduisez la page HTML ci-dessous. Nommez-la avis_site.html. Les données du formulaire seront traitées par le fichier PHP "traite_avis.php". Remarque : la première ligne du formulaire est donc : <form action="traite_avis.php" method="post">... </form> 4

5 Voici le fichier PHP traite_avis.php qui traite le formulaire ci-dessus. Intégrez ce code dans une page PHP et testez le avec votre fichier avis_site.html, en choisissant correctement les noms de vos variables. Vous pouvez consulter l'exemple de formulaire et de traitement de ce formulaire mis en ligne sur le site du module pour vous aider. <? php // tester si les champs ont été remplis if (isset($_post["nom"]) && isset($_post["prenom"]) && isset($_post["avis"])) { // récupérer les valeurs des champs $nom = $_POST["nom"]; $prenom = $_POST["prenom"]; $avis = $_POST["avis"]; // utiliser les valeurs echo "Bonjour ".$prenom." ".$nom. "!<br/>" ; echo "Merci d' avoir visité notre site! <br/>" ; if($avis == "oui") echo "Nous serons contents de vous accueillir une prochaine fois<br/>" ; else echo "Nous regrettons de ne plus jamais vous revoir!<br/>" ; Dans cet exemple, on constate que le fichier PHP n enregistre pas les données de l utilisateur dans une base de données mais lui affiche simplement un message en retour. Nous allons voir maintenant comment enregistrer les données saisies dans le formulaire afin de les stocker dans une base de données. 2. Lien entre PHP et les bases de données Il y a deux étapes pour utiliser une base de données à partir de PHP : 1. Se connecter à la base de données 2. Exécuter des requêtes (les requêtes peuvent être construites à partir de données saisies par un utilisateur via un formulaire). 5

6 Connexion à une base de données Comme pour vous connecter au réseau de l université, il vous faut un login et un mot de passe pour travailler avec une base de données. La base de données n accepte que des connexions identifiées. PHP doit donc fournir à la base de données des informations : le login et le mot de passe correspondant à la base avec laquelle il veut travailler. Structure PHP à utiliser pour se connecter à une base de données : <? php //paramètres de connexion à la base de données $Base="com231a"; $Serveur="iupmime"; $Utilisateur="com231a_user"; $MotDePasse="com72"; //connexion au serveur où se trouve la base de données $LienBase=mysql_connect($Serveur,$Utilisateur,$MotDePasse); //sélection de la base de données au niveau du serveur $retour=mysql_select_db($base,$lienbase); //affichage d un message d erreur si la connexion a été refusée if(!$retour) echo "Connexion à la base impossible" ; Une fois ce code généré, la connexion à la base de données est établie et il est possible d exécuter des requêtes d insertion, de sélection ou de suppression de données. Requêtes vers la base de données La structure de base pour faire des requêtes est la suivante : <?php //Connexion code donné précédemment //Ecriture de la requête SQL (stockée dans la variable $Requete) $Requete=" "; //Envoi de la requête (la variable $Base fait référence à la base // à laquelle PHP est connecté) $Reponse = mysql_db_query($base,$requete); 6

7 Insérer/supprimer des nouveaux éléments Pour la requête d insertion en elle-même voir la notion 3 sur SQL à la section "insérer des éléments". Exemple dans le cas où la requête est une requête d insertion : <? php //Connexion //Ecriture de la requête $Requete="INSERT INTO Equipes VALUES(64, 'Corvette racing', 'Corvette C5 R', 'LM-GTS');"; //Envoi de la requête $Reponse = mysql_db_query($base,$requete); //Affichage du bon déroulement de la requête if($reponse) // si la réponse est correcte alors on affiche le texte suivant echo "Exécution réussie" ; else //sinon on affiche ce texte : echo "Exécution non réussie" ; Sélection d éléments dans la base Pour la requête de sélection en elle-même voir la notion 3 sur SQL, à la section "sélectionner des données". Exemple dans le cas où la requête est une requête de sélection : <?php //Connexion //Ecriture de la requête (variable $Requete) $Requete="SELECT Numero, Nom FROM Equipes;"; //Envoi de la requête $Reponse = mysql_db_query($base,$requete); //Traitement ligne par ligne de la réponse while ($donnees = mysql_fetch_array($reponse) ) { //Affichage des lignes de données, champ par champ echo "Num de l équipe : $donnees[0], Nom de l équipe : $donnees[1]"; } Dans l exemple ci-dessus, le résultat de la requête est affiché à l écran. $donnees[0] correspond au premier champ demandé dans la requête : Numero. $donnees[1] correspond au second champ demandé dans la requête : Nom. 7

8 Exercice 2 1. Créez une page PHP qui permet de : a. Se connecter à une base de données b. D exécuter des requêtes dans la table de données «Equipes» (cf. Notion 3) i. Une requête de sélection de tous les éléments de la table. ii. Une requête de sélection des éléments de la table avec restriction sur les équipes du type «LM-P1». iii. Une requête d insertion d une nouvelle équipe. c. D afficher le résultat de chaque requête champ par champ et ligne par ligne. 2. Enregistrez cette page sous le nom essai_requete.php dans votre dossier «public_html» et visualisez-la dans votre navigateur. 3. Utilisation des formulaires pour exécuter des requêtes SQL L exécution de requêtes vers une base de données SQL via un formulaire s effectue en plusieurs étapes : (1) L utilisateur complète un formulaire; (2) L utilisateur clique sur le bouton «submit»; (3) Les données saisies par l utilisateur sont envoyées à un fichier PHP; (4) Le fichier PHP construit la requête SQL à partir des données saisies et exécute la requête; (5) La base de données renvoie le résultat de la requête au fichier PHP; (6) Le fichier PHP traite le résultat : a. Si c est une requête d insertion de données, le fichier PHP peut afficher à l utilisateur que l insertion s'est bien passée; b. Si c est une requête de sélection de données, le fichier PHP affiche à l utilisateur le résultat de la requête. 8

9 Par exemple : 1. Création d un formulaire HTML qui demande une date de course et un nom de course fichier : formulaire_course.html <html> <head> <title>formulaire</title> </head> <body> <form action="creation_insertion.php" method="post"> <table> <tr> <td><b>date de la course (aaaa/mm/jj) :</b></td> <td><input name="datecourse" size="50"></td> </tr> <tr> <td><b>nom de la course : </b></td> <td><input name="nomcourse" size="50"></td> </tr> </table> <input type=submit></input><br /> </form> </body> </html> 2. Traitement des données du formulaire La requête concerne la base de données TempsCoureurs fichier : creation_insertion.php <?php // Récupération des données saisies dans des variables if (isset($_post["datecourse"]) && isset($_post["nomcourse"])) { $datecourse = $_POST["datecourse"]; $nomcourse = $_POST["nomcourse"]; //Connexion à la base de données (voir plus haut) //Ecriture de la requête $Requete="INSERT into TempsCoureurs values( '$datecourse','$nomcourse')"; //Envoi de la requête $Reponse = mysql_db_query($base,$requete); //Affichage du bon déroulement de la requête à l utilisateur if($reponse) echo "Exécution réussie"; else echo "Exécution non réussie"; } else { // cas où les données n'ont pas été saisies echo "les champs n'ont pas été remplis"; } 9

10 Exercice 3 1. Créer un fichier HTML qui permet à une équipe de saisir les caractéristiques de son équipe. 2. Créer le fichier traite_equipe.php (sur l exemple des fichiers ci-dessus) qui permet d ajouter l équipe saisie par l utilisateur sans la table «Equipes». 10