TD7 - PHP/MySQL : Gestion de membres d’un site web, crypter les mots de passe

Objectif

Mettre en place un début d’une gestion de membres pour un site internet, et comprendre le cryptage des mots de passe. Pour cela :

  • Dans votre base de données, création d’une nouvelle table membre

  • Création d’une page web pour Afficher la liste de tous les membres

  • Création d’une page web avec un formulaire de création d’un nouveau membre.

  • Création d’une page permettant d’enregistrer un nouveau membre dans la table membre de votre base de données.

phpMyAdmin : Création d’une table MySQL et manipulation de données

Exercice 7.1 Environnement de travail

  1. Démarrer dans votre environnement de travail habituel (éditeur de texte, phpMyAdmin). Aujourd’hui, nous travaillons dans le dossier td7.

Exercice 7.2 Création d’une table membre de la base de données

En utilisant votre interface phpMyAdmin, créez une table dans votre base de données qui s’appelle membre avec les champs suivants : un champ INT qui s’appelle id avec les attributs clé primaire (menu deroulant INDEX) ainsi que “auto-increment (A_I)”, un champ TEXT qui s’appelle pseudo, et un champ TEXT qui s’appelle motdepasse, un champ TEXT qui s’appelle prenom, un champ TEXT qui s’appelle nom, ainsi qu’un champ TEXT qui s’appelle email, ainsi qu’un champ DATETIME qui s’appelle dateinscrit.

Table membre

Table membre

id pseudo motdepasse nom prenom email dateinscrit
INT TEXT TEXT TEXT TEXT TEXT DATETIME
Note

Remarque : Pour l’instant, nous n’ajoutons aucun enregistrement dans cette table, car nous allons crypter les mots de passe en utilisant une fonction PHP, ce que nous allons voir dans les prochaines exercices.

Question
  1. Quant à la structure de cette table, combien y-a-t’il de champs ?

Exercice 7.3 Formulaire d’inscription d’un nouveau membre

Dans cet exercice, nous créons le formulaire d’inscription d’un nouveau membre dans un fichier inscription.php.

  1. Avec votre éditeur de texte, créez une nouvelle page inscription.php dans votre dossier td7.

Cette page contiendra toutes les balises d’une page HTML5. Dans le corps de cette page (après <body>), créez un titre h2 avec le texte “Inscription d’un nouveau membre”, ainsi qu’un formulaire qui renvoie vers la page enregistrer-membre.php avec la méthode post :

<form action="enregistrer-membre.php" method="post">

<!-- ... -->

</form>
  1. Dans le formulaire, permettez de renseigner les champs suivant. Utilisez le Cheatsheet pour les formulaires au cas où vous avez un doute :
  • Un champ text s’appelant “pseudo” (donc avec la propriété name="pseudo permettant de définir un pseudo pour le membre.

  • Un champ password s’appelant “motdepasse” permettant de renseigner le mot de passe du membre.

  • un champ text s’appelant “prenom” permettant de définir le prénom du membre,

  • un champ text s’appelant “nom” permettant de définir le nom du membre,

  • un champ text s’appelant “email” permettant de renseigner l’email du membre,

  • un champ checkbox s’appelant “consentement” avec la valeur oui, décrit par le texte “En soumettant ce formulaire, j’accepte que les informations saisies dans ce formulaire soient utilisées, exploitées, traitées, pour permettre de m’authentifier dans le cadre de ce TD”.

  • En dernier, ajoutez un bouton de type submit s’appelant “Valider mon inscription” permettant de soumettre votre formulaire.

Testez votre formulaire. Bien évidemment, lorsque vous validez, vous allez encore avoir un message d’erreur car la page enregistrer-membre.php n’existe pas encore.

Exercice 7.4 Page d’évaluation 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 toutes les valeurs du formulaire renseignées.

  1. Récupérez les paramètres du formulaire avec la méthode POST en PHP, et stockez-les dans les variables $pseudo, $motdepasse, $email, $prenom, $nom.

  2. Affectez à la variable $motdepasse_crypte un cryptage du mot de passe en utilisant la fonction PHP password_hash comme suit :

$motdepasse_crypte = password_hash($motdepasse, PASSWORD_DEFAULT);
  1. Affichez un récapitulatif des données du formulaire, donc le contenu de ces diverses variables récupérées.

  2. Testez.

Exercice 7.5 Ajout du membre dans la table membre de la base de données.

  1. Pour cela, n’oubliez pas d’inclure la connexion à la base de données au tout début du fichier enregistrer-membre.php.
<?php require_once("connexion_base.php"); ?>
  1. N’oubliez pas non plus de copier votre fichier connexion_base.php dans votre dossier td7.

  2. Afin d’insérez les données dans votre table membre, nous allons utiliser l’instruction MySQL INSERT. Afin d’exécuter cette requête d’une manière efficace et sécurisée, nous utilisons, comme dans les derniers TDs, les instruction préparées de PDO. Ceci consiste à remplacer l’exécution directe de la requête ($pdo->query($requete)) par deux instructions :

  • 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

  • l’exécution ($pdo->execute(array(...))) de la requête en spécifiant un tableau de données qui remplacera tous les points d’interrogation par des valeurs stockés dans un tableau.

Donc, dans votre page enregistrer-membre.php, après avoir évalué le formulaire, ajoutez les instructions suivantes :

<?php
// exécuter une requete MySQL de type INSERT
$requete="INSERT INTO membre (pseudo,motdepasse,nom,prenom,email,dateinscrit) 
VALUES (   ?,      ?,       ?,     ?,  ?,      NOW())";
$reponse=$pdo->prepare($requete);
$reponse->execute(array($pseudo,
                        $motdepasse_crypte,$nom, 
                        $prenom, 
                        $email));
?>
Important

Notez que le nombre de points d’interrogation correspond exactement au nombre d’éléments du tableau `array($pseudo, $motdepasse_crypte, $nom, $prenom, $email

Note

Vous insérez le mot de passe crypté dans la table de votre base de données, car on n’a pas le droit de stocker des mots de passe en texte clair dans une base de données pour des raisons de sécurité.

  1. Testez. Regardez dans l’interface phpmyadmin si votre nouveau membre a été ajouté ! Est-ce que le mot de passe est crypté ?

  2. Ajoutez les balises HTML ainsi qu’un message que le membre a été créé avec succès.

  3. Vous avez certainement remarqué que vous pouvez inscire un membre même sans que la case à cocher pour le consentement a été coché ! Ajoutez donc une instruction if qui inscrire un nouveau membre uniquement si la case a été coché, sinon, présentez un message à l’utilisateur ainsi qu’un lien hypertexte qui renvoie au formulaire avec le texte “retour au formulaire”.

Note

Concerne uniquement les personnes travaillant sur sur leur ordinateur personnels avec un logiciel comme MAMP ou Wampserver :

Testez sur les serveurs du CREMI

Pour tous ceux qui travaillent sur leur ordinateur personnels avec un logiciel comme MAMP ou Wampserver, vous devriez transférer votre travail sur les serveurs du CREMI. Comme on l’a déjà vu lors des derniers TDs, pour cela, il y a 3 étapes à effectuer :

  • Transférez votre dossier `td7 avec le client FTP Filezilla.

  • Transférez votre base de données. Pour cela, utiliser votre interface phpMyAdmin en local et exportez la base de donnez. Si vous ne l’avez pas encore fait, activez votre base de données au CREMI, et via l’interface phpMyAdmin du CREMI, importez les tables de votre base de donnée.

  • Spécifiez vos données de connexion pour vous connecter à votre base de données au CREMI dans votre fichier connexion_base.php.

Le détail de toutes ces étapes se trouve dans la section Links de la page web du cours : dans la section Transfert de base de données avec phpMyAdmin entre CREMI et vos ordinateurs, vouus avez un PDF récapitulatif.

Exercice 7.6 Afficher tous les membres

  1. Créer une page PHP liste-membres.php, et mettez les balises pour une page HTML5 simpliste. Cette page doit ensuite afficher tous les membres de la table membres.

Pour se connecter à la base de données, incluez donc le fichier connexion_base.php, et procédez comme d’habitude pour afficher tous les éléments d’une table.

  1. Mettez en forme votre affichage des membres en utilisant une <table> html, avec des lignes comme membres, et avec des colonnes les champs.

Exercices optionnels

Exercice 7.7 Création d’une deuxième table dans 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.

  1. Vous créez d’abord la structure, et ensuite quelques enregistrement dans cette table, comme suit. N’oubliez pas de déclarer l’identifiant id en clé primaire et A_I (auto increment), comme d’habitude.
id nom
INT TEXT
1 Etudiant
2 Salarié
3 Mineur

Exercice 7.8 Liez la table catégorie à la table membre

Dans cet exercice, nous allons ajouter l’identifiant de la catégorie d’un membre en tant que clé étrangère.

Dans votre table membre, dans la structure de votre table, ajoutez un champ de type INT s’appelant id_categorie, et définissez le en tant que INDEX.

Dans les données déjà renseignées dans votre table, choisissez une catégorie pour chaque membre.

Exercice 7.9 Modification du formulaire pour permettre de spécifier la catégorie

Dans votre page inscription.php, permettez également de renseigner la catégorie du membre, étiqueté “categorie”. Pour cela, vous allez créer un menu déroulant qui propose les choix possibles. Dans un premier temps, vous pouvez prendre les lignes de code suivantes, et nous verrons dans un prochain exercice comment les créér à partir de la base de données !

<select name="id_categorie">
    <option value="1">Etudiant</option>
    <option value="2">Salarié</option>
    <option value="3">Mineur</option>
</select>

Exercice 7.10 Créez le menu déroulant à partir de la table categorie

L’objectif de cet exercice est de créer le menu déroulant de la page inscription.php à partir de la table categorie de votre base de données. Comme ça, si vous créez des nouvelles categories dans votre categorie (p.ex. retraité, etc.), le menu déroulant est mis à jour automatiquement.

  1. En tout début de votre fichier inscription.php, incluez la connexion à la base de données :
<?php require_once("connexion_base.php"); ?>
  1. Toujours dans votre fichier inscription.php, affichez tous les enregistrements de votre table categorie.

  2. Testez.

  3. Modifiez la mise en forme, pour que vous reproduisiez le menu déroulant pour sélectionner la categorie, comme dans l’exercice 8.13 ! (<select><option>...)

Exercice 7.11 Relation entre tables 1

Dans votre page enregistrer_membre.php, récupérez l’identifiant de la catégorie sélectionnée, et modifiez votre requête INSERT pour ajouter également l’identifiant de la catégorie (id_categorie).

Exercice 7.12 Relation entre tables 2

Dans votre interface phpmyadmin, vous avez la possibilité de lier ces deux tables via la clé étrangère. Ouvrez la vue “Concepteur”. Vous allez voir un aperçu des deux tables. Cliquez sur la minuscule flèche dans chaque table, et vous allez voir les champs des tables. Ensuite, vous pouvez lier les tables en utilisant le bon icone. Sélectionnez d’abord la clé référencée id de la table categorie, et ensuite la clé étrangère id_categorie.

Note

Cette étape de lier les tables dans le “Concepteur” n’est pas indispensable. Si vous avez des difficultés, ne vous y attardez pas.

\end{exercice}

Important

Comme d’habitude, les exercices sont à rendre sur moodle jusqu’à mercredi prochain, 23h59.