Tutoriel Crée un espace Membre

D

deleted535977

    Réponse de deleted535977 Informatique ⌨️ Programmation Programmation web : Crée un espace Membre
  • #1
Bonjour a tous

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.
)
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.




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

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.



Pour hacher un mot de passe, il existe plusieurs fonctions qui se basent sur des algorithmes différents. Je vous conseille d'utiliser sha1 sur vos sites web.



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 fonctionsha1. 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.

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.




Le champ du mot de passe est de type password afin 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 :

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

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

// 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));
Ce code est un simple canevas qui illustre les principales étapes de la création d'un membre. C'est à vous de le compléter. De plus, je vous invite à respecter l'architecture MVC : vous utiliserez le contrôleur pour vérifier la validité des informations et pour hacher le mot de passe, tandis que le modèle se chargera simplement d'exécuter la requête.

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.



Son mot de passe haché n'est pas lisible et cela nous assure qu'on ne peut pas le « voler ». Notez que, pour augmenter la sécurité, on peut « saler » le mot de passe. Cela consiste à lui ajouter un préfixe avant de le hacher afin de rajouter une certaine complexité : $pass_hache = sha1('gz' . $_POST['pass']);.
Nous verrons lors de l'étape de connexion comment vérifier si le membre entre bien le bon mot de passe.

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).



La page qui reçoit les données du formulaire de connexion doit hacher de nouveau le mot de passe et le comparer à celui stocké dans la base. 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.

Code:
<?php
// Hachage du mot de passe
$pass_hache = sha1($_POST['pass']);

// Vérification des identifiants
$req = $bdd->prepare('SELECT id FROM membres WHERE pseudo = :pseudo AND pass = :pass');
$req->execute(array(
    'pseudo' => $pseudo,
    'pass' => $pass_hache));

$resultat = $req->fetch();

if (!$resultat)
{
    echo 'Mauvais identifiant ou mot de passe !';
}
else
{
    session_start();
    $_SESSION['id'] = $resultat['id'];
    $_SESSION['pseudo'] = $pseudo;
    echo 'Vous êtes connecté !';
}
Après avoir de nouveau haché le mot de passe, on essaie de récupérer une entrée dans la table membresqui corresponde à ce pseudonyme et ce mot de passe haché. Si $resultat vaut faux, cela signifie qu'aucune entrée ne correspond et donc que l'identifiant ou le mot de passe est mauvais. Sinon, 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.

Code:
<?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.

Le système RPX est devenu très populaire car il vous permet de mettre en place rapidement ces moyens de connexion sur votre site (figure suivante). Il suffit seulement d'ajouter un champ à votre table membreset d'installer un petit script. Renseignez-vous sur le si vous souhaitez par la suite vous en servir pour améliorer votre espace membres.




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 appelant session_destroy()) et supprimer les cookies de connexion automatique s'ils existent.

<?php

Code:
<?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', '');
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 dossieravatars et à 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 table membres.

  • 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 champ id_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é !

Copier/Colers

 
Dernière édition par un modérateur:

AwH

Super Modérateur
Ancien staff RG
Inscription
28 Septembre 2011
Messages
5 088
Réactions
2 378
Points
7 378
    Réponse de AwH Informatique ⌨️ Programmation Programmation web : Crée un espace Membre
  • #2
Salut,

Tu peux indiquer la source de ton C/C, même si l'on se doute que c'est openclassrooms ?

Bonne journée,
AwH
 
D

deleted535977

    Réponse de deleted535977 Informatique ⌨️ Programmation Programmation web : Crée un espace Membre
  • #3

Hichxm

Membre
Inscription
15 Octobre 2013
Messages
1 115
Réactions
239
Points
5 721
    Réponse de Hichxm Informatique ⌨️ Programmation Programmation web : Crée un espace Membre
  • #4
Merci du tutoriel :ok:
 

Lagger

Responsable des lags
Contributeur
Inscription
28 Novembre 2011
Messages
1 763
Réactions
576
Points
10 308
    Réponse de Lagger Informatique ⌨️ Programmation Programmation web : Crée un espace Membre
  • #5
Merci du partage, évite de copier/coller (n)
C'est mieux que ça vienne de ton expérience personnelle :tchuss:
 

xHipnoTiik

Membre
Inscription
12 Décembre 2015
Messages
144
Réactions
25
Points
146
    Réponse de xHipnoTiik Informatique ⌨️ Programmation Programmation web : Crée un espace Membre
  • #6
Merci du partage, évite de copier/coller (n)
C'est mieux que ça vienne de ton expérience personnelle :tchuss:
Ah ouf heureusement que c'est du copier/coller :nerveux:
C'est vrai qu'il faut de l'expérience perso mais bon il faut bien aller un jour ou l'autre prendre un ptit texte d'un pote informaticien ou autre ^^
 

BotVIews

Membre
Inscription
12 Décembre 2014
Messages
99
Réactions
7
Points
640
    Réponse de BotVIews Informatique ⌨️ Programmation Programmation web : Crée un espace Membre
  • #7
Bonjour a tous

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.
)
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.




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

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.



Pour hacher un mot de passe, il existe plusieurs fonctions qui se basent sur des algorithmes différents. Je vous conseille d'utiliser sha1 sur vos sites web.



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 fonctionsha1. 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.

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.




Le champ du mot de passe est de type password afin 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 :

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

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

// 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));
Ce code est un simple canevas qui illustre les principales étapes de la création d'un membre. C'est à vous de le compléter. De plus, je vous invite à respecter l'architecture MVC : vous utiliserez le contrôleur pour vérifier la validité des informations et pour hacher le mot de passe, tandis que le modèle se chargera simplement d'exécuter la requête.

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.



Son mot de passe haché n'est pas lisible et cela nous assure qu'on ne peut pas le « voler ». Notez que, pour augmenter la sécurité, on peut « saler » le mot de passe. Cela consiste à lui ajouter un préfixe avant de le hacher afin de rajouter une certaine complexité : $pass_hache = sha1('gz' . $_POST['pass']);.
Nous verrons lors de l'étape de connexion comment vérifier si le membre entre bien le bon mot de passe.

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).



La page qui reçoit les données du formulaire de connexion doit hacher de nouveau le mot de passe et le comparer à celui stocké dans la base. 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.

Code:
<?php
// Hachage du mot de passe
$pass_hache = sha1($_POST['pass']);

// Vérification des identifiants
$req = $bdd->prepare('SELECT id FROM membres WHERE pseudo = :pseudo AND pass = :pass');
$req->execute(array(
    'pseudo' => $pseudo,
    'pass' => $pass_hache));

$resultat = $req->fetch();

if (!$resultat)
{
    echo 'Mauvais identifiant ou mot de passe !';
}
else
{
    session_start();
    $_SESSION['id'] = $resultat['id'];
    $_SESSION['pseudo'] = $pseudo;
    echo 'Vous êtes connecté !';
}
Après avoir de nouveau haché le mot de passe, on essaie de récupérer une entrée dans la table membresqui corresponde à ce pseudonyme et ce mot de passe haché. Si $resultat vaut faux, cela signifie qu'aucune entrée ne correspond et donc que l'identifiant ou le mot de passe est mauvais. Sinon, 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.

Code:
<?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.

Le système RPX est devenu très populaire car il vous permet de mettre en place rapidement ces moyens de connexion sur votre site (figure suivante). Il suffit seulement d'ajouter un champ à votre table membreset d'installer un petit script. Renseignez-vous sur le si vous souhaitez par la suite vous en servir pour améliorer votre espace membres.




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 appelant session_destroy()) et supprimer les cookies de connexion automatique s'ils existent.

<?php

Code:
<?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', '');
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 dossieravatars et à 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 table membres.

  • 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 champ id_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é !

Copier/Colers

Merci pour le tuto
 
D

deleted535977

    Réponse de deleted535977 Informatique ⌨️ Programmation Programmation web : Crée un espace Membre
  • #8
derien mes il y des fail je vais corrige tout sa
 

kyuuwCSGO

1970
Contributeur
Inscription
20 Juillet 2015
Messages
2 400
Réactions
1 641
Points
6 576
    Réponse de kyuuwCSGO Informatique ⌨️ Programmation Programmation web : Crée un espace Membre
  • #11
Thank's, mais la prochaine fois fais toi même car ce n'est pas jolie.
 

✌️ Le S

Vendeur de Crédit FIFA 17 PS4 Rédacteur SEE
Contributeur
Inscription
22 Octobre 2012
Messages
3 273
Réactions
1 164
Points
12 345
    Réponse de ✌️ Le S Informatique ⌨️ Programmation Programmation web : Crée un espace Membre
  • #16
Belle présentation du tuto malgrer le c/c
 

RebeI

Membre
Inscription
5 Juillet 2014
Messages
712
Réactions
176
Points
4 101
    Réponse de RebeI Informatique ⌨️ Programmation Programmation web : Crée un espace Membre
  • #17
Merci du tuto :ok:
 

Cat' MOUILLE

Cat' a votre service !
Inscription
20 Décembre 2015
Messages
357
Réactions
71
Points
433
    Réponse de Cat' MOUILLE Informatique ⌨️ Programmation Programmation web : Crée un espace Membre
  • #20
Merci ^^
 

Haut Bas