• 70 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Ce cours existe en livre papier.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

TP : créer un espace membres

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Afin de créer un espace communautaire sur leur site web, la plupart des webmasters ont recours à un système de gestion des membres. Cela leur permet de fidéliser leurs visiteurs, qui peuvent alors participer plus facilement à la vie du site.

Cela vous intéresse ? Construire son espace membres ne s'improvise pas, il y a un certain nombre d'éléments à connaître. Nous allons découvrir tout ce qu'il faut savoir à ce sujet au cours de ce TP.

Ce TP sera légèrement différent de ceux que vous avez lus jusqu'ici : en effet, nous allons concevoir ensemble et pas à pas l'espace membres. Plutôt que de nous concentrer sur le code source proprement dit, je vous présenterai la méthode, ce qu'il faut savoir, mais je ne vous donnerai pas de code PHP « prêt à l'emploi ». Ça n'aurait pas de sens : à ce stade, vous avez le niveau pour écrire vous-mêmes le code à l'aide du canevas que je vais vous proposer. :o)

Conception de l'espace membres

Quelles sont les fonctionnalités d'un espace membres ?

C'est la première question que nous devons nous poser : qu'est-ce que nous souhaitons faire concrètement ? Cela nous permettra aussi de définir ce que nous souhaitons éviter d'avoir à concevoir, au moins dans un premier temps.

Vous êtes probablement habitués aux espaces membres sur d'autres sites. Qui n'a jamais créé un compte sur un site web ? Sur Twitter ou Facebook ? Vous avez forcément déjà vu un espace membres, même si le site web ne l'appelle pas exactement comme cela. Vous devriez donc savoir qu'un espace membres nécessite au minimum les éléments suivants :

  • une page d'inscription ;

  • une page de connexion ;

  • une page de déconnexion.

On peut ensuite ajouter d'autres pages, par exemple pour afficher et modifier son profil de membre. Cependant, il faut au minimum avoir créé les pages que je viens de mentionner. La figure suivante devrait vous permettre d'avoir une bonne vue d'ensemble des étapes de la vie d'un membre, de son inscription à sa connexion et sa participation au site.

Les étapes de la vie d'un membre
Les étapes de la vie d'un membre

Une fois cette base prête, il sera ensuite possible de créer tout l'espace participatif de votre site qui reposera sur les membres : les forums, les commentaires des actualités, etc. Elles sont représentées en pointillés sur la figure suivante. Nous utiliserons le numéro du membre (son « id ») pour lier ses messages à son compte, à l'aide des jointures SQL que vous connaissez bien maintenant.

Pour commencer, nous allons créer la table MySQL qui stockera les membres de notre site. C'est la première étape qui nous permettra ensuite d'aller plus loin et d'étudier la création des principales pages dont nous avons parlé : inscription, connexion et déconnexion.

La table des membres

Qu'est-ce qui caractérise un membre ? Essayons de voir ce que nous avons besoin de stocker au minimum pour créer la table :

  • un pseudonyme ;

  • un mot de passe ;

  • une adresse e-mail ;

  • une date d'inscription.

Bien entendu, on pourrait ajouter d'autres champs, comme sa signature, sa date de naissance ou son adresse de messagerie instantanée. Nous allons cependant faire simple pour commencer, sachant qu'il est toujours possible d'ajouter des champs à la table par la suite comme nous l'avons appris.

Je vous propose donc de créer une table nommée membres avec les champs suivants :

  • id (int, primary, auto_increment) ;

  • pseudo (varchar 255) ;

  • pass (varchar 255) ;

  • email (varchar 255) ;

  • date_inscription (date).

Ces champs sont résumés sur la figure suivante qui présente la table une fois créée sous phpMyAdmin.

Les champs de la table membres
Les champs de la table membres

La problématique du mot de passe

Un de ces champs mérite une attention particulière : celui qui stocke le mot de passe. En effet, lorsqu'ils s'inscriront, vos visiteurs enverront en toute confiance un mot de passe à votre site. Il est très probable qu'ils utilisent le même mot de passe sur de nombreux autres sites. Bien que ce soit une très mauvaise habitude en matière de sécurité (idéalement, il faudrait utiliser un mot de passe différent par site), ce cas de figure est hélas extrêmement fréquent.

Sachant cela, vous avez une certaine obligation morale et éthique en tant que webmasters : vous ne devriez pas stocker les mots de passe de vos visiteurs dans la base. Si celle-ci tombait entre de mauvaises mains (cela pourrait arriver dans un cas critique, comme le piratage de votre site, ce que je ne vous souhaite pas), une personne aurait accès à tous les mots de passe de vos membres et pourrait s'en servir pour voler leurs comptes sur d'autres sites !

Pourtant, je dois bien stocker le mot de passe de mes membres si je veux pouvoir par la suite m'assurer que ce sont les bonnes personnes ! C'est un problème impossible à résoudre !

C'est ce que vous croyez, et pourtant la solution existe : elle s'appelle le hachage. C'est une fonction qui transforme n'importe quel texte en un nombre hexadécimal qui représente le mot de passe mais qui est illisible, comme le montre la figure suivante.

La fonction de hachage rend le mot de passe illisible
La fonction de hachage rend le mot de passe illisible

Pour hacher un mot de passe, il existe plusieurs fonctions qui se basent sur des algorithmes différents. La bonne fonction à utiliser est  password_hash, qui va choisir pour vous le meilleur algorithme.

La particularité du hachage est qu'il fonctionne dans un seul sens : il est impossible de retrouver le mot de passe d'origine une fois qu'il a été haché. De plus, un hash (nom donné à la version hachée du mot de passe) est unique : il correspond à un et un seul mot de passe.

Vous stockerez la version hachée du mot de passe, qui sera donc passé à la moulinette par la fonctionpassword_hash. Lorsqu'un visiteur voudra se connecter, il vous enverra son mot de passe que vous hacherez à nouveau et que vous comparerez avec celui stocké dans la base de données. Si les deux mots de passe hachés sont identiques, alors cela signifie que le visiteur a rentré le même mot de passe que lors de son inscription.

Réalisation des pages principales de l'espace membres

Nous avons déterminé un peu plus tôt la liste des pages dont nous avons besoin au minimum pour gérer nos membres :

  • inscription ;

  • connexion ;

  • déconnexion.

Nous n'allons pas écrire le code de ces pages mais nous allons passer en revue ce qu'il faut savoir pour les réaliser correctement.

La page d'inscription

La page d'inscription est en général constituée de quatre champs :

  • pseudonyme souhaité ;

  • mot de passe ;

  • confirmation du mot de passe (pour éviter les erreurs de saisie) ;

  • adresse e-mail.

Il est recommandé de limiter autant que possible le nombre d'informations demandées. Le visiteur souhaite pouvoir s'inscrire très rapidement. S'il tombe sur une page avec de nombreux champs à remplir, il y a de fortes chances qu'il laisse tomber. Laissez-le remplir les autres champs (comme sa signature, sa messagerie instantanée et sa date de naissance) dans un second temps lorsqu'il sera inscrit.

La figure suivante présente un formulaire basique d'inscription.

Un formulaire d'inscription
Un formulaire d'inscription

Le champ du mot de passe est de typepasswordafin d'empêcher la lecture du mot de passe à l'écran par une autre personne. C'est pour cela qu'il est fortement recommandé de demander de saisir à nouveau le mot de passe au cas où le visiteur ait fait une faute de frappe qu'il n'aurait pas pu voir.

Avant d'enregistrer l'utilisateur dans la base de données, il faudra penser à faire un certain nombre de vérifications.

  • Le pseudonyme demandé par le visiteur est-il libre ? S'il est déjà présent en base de données, il faudra demander au visiteur d'en choisir un autre.

  • Les deux mots de passe saisis sont-ils identiques ? S'il y a une erreur, il faut inviter le visiteur à rentrer à nouveau le mot de passe.

  • L'adresse e-mail a-t-elle une forme valide ? Vous pouvez utiliser une expression régulière pour le vérifier.

Si toutes ces conditions sont remplies, on peut insérer l'utilisateur dans la base de données. Comme je vous le disais plus tôt, il est très fortement conseillé de hacher le mot de passe avant de le stocker, afin qu'il ne soit plus « lisible ».

Voici dans les grandes lignes à quoi pourrait ressembler le code qui insère un nouveau membre dans la base :

<?php 
// Vérification de la validité des informations

// Hachage du mot de passe
$pass_hache = password_hash($_POST['pass'], PASSWORD_DEFAULT);

// Insertion
$req = $bdd->prepare('INSERT INTO membres(pseudo, pass, email, date_inscription) VALUES(:pseudo, :pass, :email, CURDATE())');
$req->execute(array(
    'pseudo' => $pseudo,
    'pass' => $pass_hache,
    'email' => $email));

On vérifie d'abord la validité des informations comme je vous en ai parlé plus haut, ensuite on hache le mot de passe et enfin on peut insérer le membre dans la base. Sous phpMyAdmin, on voit donc apparaître le membre comme sur la figure suivante.

Un membre ajouté dans la base de données
Un membre ajouté dans la base de données

Son mot de passe haché n'est pas lisible et cela nous assure qu'on ne peut pas le « voler ».

D'accord, mais du coup comment on vérifie ensuite si la personne qui se connecte a le bon mot de passe ?!

Ah ah ! Ca a l'air impossible ? Pourtant il y a bien un moyen, qui est tout bête quand on y pense. Nous allons voir lors de l'étape de connexion comment vérifier si le membre a bien entré le bon mot de passe. En attendant, je vous laisse mijoter. 😝

La page de connexion

Maintenant que le membre est créé, il doit pouvoir se connecter sur votre site. Pour cela, nous utiliserons le système de sessions qui est mis à notre disposition par PHP et que nous avons appris à utiliser plus tôt dans ce cours.

Habituellement, on demande au moins le pseudonyme (ou login) et le mot de passe du membre. Pour lui faciliter la vie, on peut lui proposer une option de connexion automatique qui lui évitera d'avoir à se connecter de nouveau à chaque visite du site (figure suivante).

Un formulaire de connexion
Un formulaire de connexion

La page qui reçoit les données du formulaire de connexion doit vérifier le mot de passe en le comparant à celui stocké dans la base avec la fonction  password_verify  . Cette fonction va en fait hasher le mot de passe de l'utilisateur qui vient de se connecter et le comparer à celui qui était stocké en base de données.

S'il existe un membre qui a le même pseudonyme et le même mot de passe haché, alors on autorise la connexion et on peut créer les variables de session. Sinon, on renvoie une erreur indiquant que le pseudonyme ou le mot de passe est invalide.

<?php 

//  Récupération de l'utilisateur et de son pass hashé
$req = $bdd->prepare('SELECT id, pass FROM membres WHERE pseudo = :pseudo');
$req->execute(array(
    'pseudo' => $pseudo));
$resultat = $req->fetch();

// Comparaison du pass envoyé via le formulaire avec la base
$isPasswordCorrect = password_verify($_POST['pass'], $resultat['pass']);

if (!$resultat)
{
    echo 'Mauvais identifiant ou mot de passe !';
}
else
{
    if ($isPasswordCorrect) {
        session_start();
        $_SESSION['id'] = $resultat['id'];
        $_SESSION['pseudo'] = $pseudo;
        echo 'Vous êtes connecté !';
    }
    else {
        echo 'Mauvais identifiant ou mot de passe !';
    }
}

On récupère le mot de passe en base de données et on le compare avec celui transmis par le formulaire de connexion grâce à  password_verify , qui nous renvoie TRUE ou FALSE.

Si tout est bon, on peut créer les variables de session et y stocker par exemple l'id et le pseudonyme du membre.

Désormais, sur toutes les pages du site, on pourra indiquer au membre qu'il est connecté grâce à la présence des variables$_SESSION.

<?php 
if (isset($_SESSION['id']) AND isset($_SESSION['pseudo']))
{
    echo 'Bonjour ' . $_SESSION['pseudo'];
}

Si le membre souhaite être reconnecté automatiquement (ce qu'il est conseillé de faire uniquement sur un ordinateur personnel, et non sur un ordinateur partagé avec d'autres personnes !), je vous invite à créer deux cookies qui stockeront respectivement :

  • le pseudonyme ;

  • le mot de passe haché.

Ainsi, si un visiteur non connecté qui possède ces deux cookies se présente, vous n'aurez qu'à vérifier si un membre correspond à ces informations en base de données et vous pourrez le connecter automatiquement, sans qu'il ait eu à utiliser le formulaire de connexion. Là encore, on prend une certaine mesure de sécurité en stockant le mot de passe haché dans un cookie et non le vrai mot de passe.

Sachez par ailleurs que de nouvelles méthodes de connexion centralisées apparaissent depuis quelque temps. Elles ont pour nom OpenID, Facebook Connect, Windows Live ID, etc. En effectuant quelques manipulations supplémentaires, vous pouvez permettre à vos visiteurs de se connecter à votre site en saisissant leurs identifiants Facebook, Windows Live, Twitter ou encore Google, ce qui leur évite d'avoir à fournir un mot de passe spécialement pour votre site.

La page de déconnexion

Au bout d'un certain temps d'inactivité, la session du membre est automatiquement détruite et il se retrouve déconnecté. S'il charge à nouveau une page du site, il apparaîtra donc déconnecté, à moins qu'il ait activé la connexion automatique qui aura pour effet de le reconnecter immédiatement et de manière transparente grâce à ses cookies.

Si la déconnexion est automatique au bout d'un certain temps (le fameux timeout), il faut quand même proposer un lien de déconnexion. La page de déconnexion devra supprimer le contenu de$_SESSION, mettre fin au système de sessions (en appelantsession_destroy()) et supprimer les cookies de connexion automatique s'ils existent.

<?php 
session_start();

// Suppression des variables de session et de la session
$_SESSION = array();
session_destroy();

// Suppression des cookies de connexion automatique
setcookie('login', '');
setcookie('pass_hache', '');

Aller plus loin

Nous avons vu ensemble comment mettre en place les bases d'un système de gestion des membres. Bien entendu, nous avons fait le minimum et c'est maintenant à vous de jouer pour améliorer ce script comme bon vous semble. :-)

Voici quelques pistes pour compléter votre espace membres.

  • Proposez au membre d'envoyer un avatar. Vous avez appris à envoyer des fichiers via des formulaires et à redimensionner des images avec la bibliothèque GD, vous en êtes donc tout à fait capables ! Bien qu'il existe plusieurs méthodes, la plus simple consiste à créer un dossieravatarset à y placer les avatars nommés en fonction des id des membres :1.png,2.png,3.png, etc.

  • Mettez en place une page de profil de présentation des membres. Vous pouvez y afficher toutes sortes d'informations, comme son e-mail (mais il vaut mieux lui demander son accord auparavant), son adresse de messagerie instantanée, sa date de naissance, ses passions, son travail, le nom de la ville où il habite, etc. Toutes ces informations pourront être stockées dans de nouveaux champs de la tablemembres.

  • Proposez au membre s'il le souhaite de changer ses identifiants : son pseudonyme et son mot de passe. Il est courant qu'un membre désire changer de pseudonyme quelque temps après s'être inscrit, mais surtout il est vital qu'il puisse changer son mot de passe à tout moment au cas où celui-là serait compromis ! Même si le membre est déjà connecté, je vous conseille de lui demander à nouveau son mot de passe actuel avant de l'autoriser à en changer, par mesure de sécurité.

  • Donnez au membre la possibilité de choisir parmi plusieurs options de navigation. Tout le monde n'utilise pas votre site web de la même manière, peut-être que certains souhaiteraient avoir un menu en haut des pages plutôt qu'un autre, peut-être que d'autres préfèreraient naviguer avec un design sombre, etc.

Votre espace membres devrait commencer à être bien complet à partir de là !

Maintenant, pourquoi ne pas commencer à mettre en place vos propres forums sur votre site web ? Chaque message des forums sera associé à un id de membre : il suffira de créer un champid_membredans la table des messages. Vous pourrez alors utiliser les jointures pour récupérer automatiquement le pseudonyme du membre et sa signature à chaque message posté !

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%
Exemple de certificat de réussite
Exemple de certificat de réussite