Université Bordeaux Segalen Licence 3 MIASHS, semestre 6 (2014/2015) Conception de Sites Web Dynamiques : TD 7 Inscription de membres - Variables de sessions - Formulaires pour insérer des images Version temporaire du 31 Mars 2015 1 Objectif Dans ce TD7, nous allons implémenter une gestion de membres pour un site Internet. Exercice 7.1 Création d une table de la base de données 1. Créer une table dans votre base de données qui s appelle membre avec les champs suivants : un champs INT qui s appelle id avec les attributs clé primaire ainsi que autoincrement (A I), un champs TEXT qui s appelle pseudo, et un champs TEXT qui s appelle motdepasse, un champs TEXT qui s appelle prenom, un champs TEXT qui s appelle nom, ainsi qu un champs TEXT qui s appelle email, un champs INT qui s appelle id categorie, ainsi qu un champs DATETIME qui s appelle dateinscrit. Table membre id pseudo motdepasse nom prenom email id categorie dateinscrit INT TEXT TEXT TEXT TEXT TEXT INT DATETIME 1 xabi Xabi Lagarde x.lagarde@live.fr 1 2010-03-21 18:32:31 2 skater Patxi Berthaud patxi33@free.fr 3 2011-08-06 23:22:17 2. Créer donc quelques enregistrement dans cette table. L interface phpmyadmin vous précise les requêtes INSERT après chaque insertion d enregistrement. Notez la requête INSERT dans le cadre ci-dessous, afin de l utiliser plus tard. Exercice 7.2 Création d une deuxième table de la base de données Dans cet exercice, on créera une table categorie qui permet de définir plusieurs categories de votre membre, de type étudiant, salarié, etc. Table categorie id nom INT TEXT 1 Etudiant 2 Salarié 3 Autre 1. Créer quelques enregistrement dans cette table, et notez la requête INSERT :
2 Variables de session Dans ce TD, vous allez apprendre à utiliser les variables de session. Le tableau associatif des variables de session ($ SESSION) permet d enregistrer des informations qui pourront être utilisé tout au long d une session d un utilisateur donné, et en particulier sur plusieurs pages web d un site web, sans passer à chaque fois par des paramètres dans l URL ou par des formulaires. Pour cela, en tout début de chaque page PHP (aucun caractère doit être devant la balise php), mettez le code suivant : <?php session_start();?> Bien sûr, vous pouvez placer cette instruction aussi au tout début du fichier entete.php, étant donné que ce fichier est inclus en tout début de chaque page PHP. Exercice 7.3 Connexion 1. Créer une page PHP connexion.php qui permet à un membre de se connecter au site (un formulaire avec un champ texte s appelant pseudo et un champ mot de passe s appelant motdepasse ainsi qu un bouton valider), et qui renovoie à la page verifier connexion.php. 2. Créer la page PHP verifier connexion.php qui vérifie si le membre donné existe dans la base de données. Vous pouvez utiliser de la requête suivante, qui utilise la clause WHERE : // exécuter une requete MySQL de type SELECT.. WHERE $requete = "SELECT * FROM membres WHERE pseudo =?"; $reponse = $pdo->prepare($requete); $reponse->execute(array($_post[ pseudo ])); // récupérer tous les enregistrements dans un tableau $enregistrements = $reponse->fetchall(); // connaitre le nombre d enregistrements $nombrereponses = count($enregistrements); // tester si un enregistrement existe (on suppose qu un m^eme pseudo n existe qu une fois!) if ($nombrereponses > 0) if ($enregistrements[0][ motdepasse ] ==..) else else 2
3. Si le membre n existe pas (donc si la variable $nombrereponses est 0), afficher un message, ainsi qu un lien hypertexte qui renvoie vers la page connexion.php. 4. Si le membre existe, vérifier si le mot de passe correspond bien à celui stocké dans la base de données. S il ne correspond pas, afficher un message, ainsi qu un lien hypertexte qui renvoie vers la page connexion.php. 5. Si le membre existe et le mot de passe correspond, afficher un message de bienvenu. De plus, affectez les deux variables de session $ SESSION[ pseudo ] ainsi que $ SESSION[ membre id ] avec le pseudo et son identifiant, respectivement. Remarque : Si le pseudo est stocké dans une variable intitule $pseudo, c est uniquement l affectation $ SESSION[ pseudo ] = $pseudo. Exercice 7.4 Informations uniquement pour les membes Créer une nouvelle page, p. ex. secret.php, qui affiche des informations accessibles uniquement pour les membres du site, et le message Accès interdit! pour les non-membres. Remarque : il suffit de tester si la variable de session $ SESSION[ membre id ] est supérieur à 0 Exercice 7.5 Déconnexion Créer une nouvelle page deconnexion.php qui permet au membre de se déconnecter. Remarque : il suffit d affecter les variables de sessions à 0! Exercice 7.6 Page info du membre Ecrire une nouvelle page membre infos.php que vous pouvez appeler membre infos.php?id=3 par exemple, et qui permet d afficher les informations relatif au membe id. Par contre, afficher uniquement les informations confidentielles, telle que l adresse email dans cet exemple, pour le membre connecté! Remarque : il suffit de tester si la variable de session $ SESSION[ membre id ] est égal à l identifiant id passé en paramètre. Exercice 7.7 Afficher tous les membres 1. Créer une page PHP afficher.php qui permet d afficher tous les membres de la table membres. Pour la mise en forme, utilisez des tables. Comme dans les 2 derniers TDs, un exemple de parcourir les enregistrements (sans la mise en forme) se trouve ci-dessous : <?php // exécuter une requete MySQL $requete = "SELECT * FROM membre;"; $reponse = $pdo->prepare($requete); $reponse->execute(); // récupérer tous les enregistrements dans un tableau $enregistrements = $reponse->fetchall(); // connaitre le nombre d enregistrements $nombrereponses = count($enregistrements); // parcourir le tableau des enregistrements for ($i=0; $i<count($enregistrements); $i++) echo $enregistrements[$i][ pseudo ]; echo $enregistrements[$i][ email ];?> 3
Exercice 7.8 Formulaire d inscription d un nouveau membre Travailler d abord en local avec EasyPHP! Pour chaque page PHP, réutilisez l en-tête et pied de page en les incluant au début et à la fin, comme on a vu dans le dernier TD6. Aujourd hui, on travaillera dans le dossier td7. Dans votre fichier en-tête entete.php, incluez le fichier connexion base.php en l incluant en tout début de fichier avec require_once("connexion_base.php"); Dans cet exercice, nous créons le formulaire d inscription d un nouveau membre membre.php. 1. Créer un formulaire qui renvoie vers la page enregistrer membre.php avec la méthode post: <form action="enregistrer_membre.php" method="post"> </form> 2. Dans le formulaire, permettez de renseigner les champs suivant : Un champ text étiqueté pseudo (donc avec la propriété name="pseudo" permettant de définir un pseudo pour le membre. Un champ password étiquettés motdepasse permettant de renseigner le mot de passe du membre. Un champs text étiqueté prenom permettant de définir le prénom du membre, et un champ text étiqueté nom permettant de définir le nom du membre, ainsi qu un champ text étiqueté email permettant de renseigner l email du membre. Pemettez également de renseigner la catégorie du membre, étiqueté categorie. Pour cela, vous allez créer un menu déroulant qui propose les choix possible. Créer ce menu déroulant à partir de votre table categorie. Le résultat devrait donc être : <select name="categorie"> <option value="1">etudiant</option> <option value="2">salarié</option> <option value="3">autre</option> </select> En dernier, rajouter un bouton submit étiquetté Valider permettant de soumettre votre formulaire. 4
Exercice 7.9 Page d enregistrement du formulaire du membre renseigné avec PHP. Dans cet exercice, vous allez créer le fichier enregistrer membre.php qui affichera un récapitulatif de tous les valeurs du formulaire renseignées, et qui insérera les données dans la table membre de la base de données. 1. Récuperez les paramètres du formulaire avec la méthode $ POST en PHP, et stockez-les dans les variables $pseudo, $motdepasse, $email, $prenom, et $nom. 2. Affichez un récapitulatif des données en utilisant ces variables. 3. Afin d insérez les données dans votre table membres, nous allons utiliser l instruction MySQL INSERT. Afin d exécuter cette requête d une manière efficace et sécurisé, nous allons utiliser les instruction préparées de PDO. Ceci consiste à remplacer l exécution directe de la requête ($pdo->query($requete)) par deux instructions : 1. la préparation ($pdo->prepare($requete)) de la forme de la requête en mettant des points d interrogations à la place des données, et 2. l exécution ($pdo->execute(array())) de la requête en spécifiant un tableau de données qui remplacera les points d interrogations. <?php // exécuter une requete MySQL de type INSERT $requete="insert INTO membre (pseudo,motdepasse,nom,prenom,email,id_categorie,dateinscrit) VALUES (?,?,?,?,?,?, NOW())"; $reponse=$pdo->prepare($requete); $reponse->execute(array($pseudo, $motdepasse, $nom, $prenom, $email, $id_categorie));?> 4. Vérifiez que la requête INSERT correspond bien à celle de l exercice 8.1. 5. Rajoutez un lien hypertexte permettant de renvoyer à la page connexion.php. 5
Exercice 7.10 Mise en forme du formulaire avec le Framework Bootstrap Dans cette exercice, nous allons utilisé la framework Bootstrap pour la mise en forme de votre formulaire formulaire.php. 1. Copiez votre fichier membre.php dans un fichier membre bootstrap.php. 2. Utilisez le form builder sur http://minikomi.github.io/bootstrap-form-builder/. Reproduisez votre formulaire de l exercice 8.3. 3. En cliquant sur Render, examinez le code source de votre formulaire. 4. Copiez ce formulaire dans votre fichier membre bootstrap.php, et éditez la propriété action ainsi que les étiquettes name des champs afin que cela concorde avec votre ancien fichier membre.php. 6