Comment faire un espace membre

Espace membre

Le code de notre espace membre sera composé de 4 pages :

• La page membre_index.php : qui contiendra le formulaire de conection à l'espace membre
• La page inscription.php : qui contiendra le formulaire d'inscription à cet espace membre
• La page membre.php : la page d'accueil de l'espace membre
• La page deconnexion.php : qui sera une page qui permet de se déloger de cet espace membre, et de revenir au formulaire de connexion à l'espace membre

Le minimum d'informations permettant d'accéder à un espace membre est :

• un login
• un mot de passe

Dans votre phpmyadmin créez une base de données.
Puis dans cette base nous allons créer une table SQL contenant 3 champs pour notre espace membre :

• - un champ id AUTO_INCREMENT permettant d'identifier chaque membre (chaque membre ayant un id différent). Ce sera notre clé primaire.
• - un champ login de type text qui contiendra le login de chaque membre de l'espace membre
• - un champ passwd de type text contenant le mot de passe haché de chaque membre. Pour un maximum de sécurité, et pour encoder des mots de passe, on utilise une technique de hachage rendue possible par l'utilisation de la fonction PHP md5, parce que le hachage via md5 est irréversible

Et donc nous aurons la structure de table suivante :

Requête SQL table membre :à taper dans phpMyAdmin

Code de la requête SQL.

📋 Copier le code

CREATE TABLE membre (
id int(11) NOT NULL auto_increment,
login text NOT NULL,
passwd text NOT NULL,
PRIMARY KEY (id)
) TYPE=MyISAM;	

Création de la pge d'accueil : membre_index.php

Cette page contient le formulaire de connexion à l'espace membre.

Ce formulaire est composé de deux champs :

• Le champ login, où l'utilisateur saisira son login
• Le champ pass, où l'utilisateur saisira son mot de passe

Cette page contient également un lien permettant aux utilisateurs de s'inscrire à l'espace membre.

Une fois le formulaire soumis, nous testons si ses champs sont bien remplis, le cas échéant, nous affichons un message sur la page informant l'utilisateur qu'il a oublié de remplir un champ.

Dans le cas où le formulaire a été rempli correctement, nous allons interroger la base de données afin de vérifier que le couple login / mot de passe saisi par l'utilisateur existe bien dans notre base de données (ce qui veut dire que nous allons vérifier que le couple login / mot de passe correspond à un membre déjà inscrit dans notre base de données).

Sacher que nous allons stocker des mots de passes hachés (c'est-à-dire cryptés) dans notre base de données. Donc si nous recherchons le mot de passe en clair dans la base de données, on risque de ne pas trouver grand-chose.

Afin de faire correspondre mot de passe saisi en clair dans le formulaire et le mot de passe haché stocké dans la base de données, nous allons passer un coup de md5 sur le mot de passe saisi dans le formulaire avant de rechercher ce mot de passe dans la table membre.

Si le couple login / mot de passe est trouvé, on démarre une session, puis on redirige le membre vers la page d'accueil de l'espace membre (membre.php).

Sinon, on reste sur notre formulaire de connexion.

Voici le code de la page membre_index.php :

Tapez le code dans votre éditeur.

📋 Copier le code

<?php // on teste si le visiteur a soumis le formulaire de connexion
if (isset($_POST['connexion']) && $_POST['connexion'] == 'Connexion') {
if ((isset($_POST['login']) && !empty($_POST['login'])) && (isset($_POST['pass']) && !empty($_POST['pass']))) {
$base = mysql_connect ('serveur', 'login', 'password');
mysql_select_db ('nom_base', $base);
// on teste si une entrée de la base contient ce couple login / pass
$sql = 'SELECT count(*) FROM membre WHERE login="'.mysql_escape_string($_POST[ 'login']).'" AND passwd="'.md5(mysql_escape_string($_POST['pass'])).'"';
$req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
$data = mysql_fetch_array($req);
mysql_free_result($req);
mysql_close();
// si on obtient une réponse, alors l'utilisateur est un membre
if ($data[0] == 1) {
session_start();
$_SESSION['login'] = $_POST['login'];
header('Location: membre.php');
exit();
}
// si on ne trouve aucune réponse, le visiteur s'est trompé soit dans son login, soit dans son mot de passe
elseif ($data[0] == 0) {
$erreur = 'Compte non reconnu.';
}
// sinon, alors la, il y a un gros problème :)
else {
$erreur = 'Probème dans la base de données : plusieurs membres ont les mêmes identifiants de connexion.';
}
}
else {
$erreur = 'Au moins un des champs est vide.';
}
}
?>;
<html>
<head>
<title>Accueil</title>
</head>
<body>
Connexion à l'espace membre :<br>
<form action="membre_index.php" method="post">
Login : <input type="text" name="login" value="<?php if (isset($_POST['login'])) echo htmlentities(trim($_POST['login'])); ?>"><br>
Mot de passe : <input type="password" name="pass" value="<?php if (isset($_POST['pass'])
) echo htmlentities(trim($_POST['pass'])); ?>"><br>
<input type="submit" name="connexion" value="Connexion">
</form>
<a href="inscription.php">Vous inscrire</a>
<?php
if (isset($erreur)) echo '<br><br>',$erreur;
?>
</body>
</html>

La page de l'espace membre : membre.php

Le test de l'existence du compte de notre membre ayant déjà été fait dans la page membre_index.php, il nous reste peu de chose à faire pour notre espace membre.
En effet, dans membre.php, il ne nous reste qu'à tester que la personne qui accède a cette page est bien passée par le formulaire de connexion de l'espace membre.

Pour ce faire, nous testons si la variable de session $_SESSION['login'] est bien définie :

• - si elle ne l'est pas, nous redirigeons le visiteur vers le formulaire de connexion de l'espace membre
• - sinon, on affiche le contenu de notre espace membre (dans cet application, remarquez que nous n'affichons pas grand-chose à part un lien permettant de se déconnecter de l'espace membre mais vous pouvez y ajouter ce que vous voulez.

Voici le code de la page membre.php :

Tapez le code dans votre éditeur.

📋 Copier le code

	<?php
session_start();
if (!isset($_SESSION['login'])) {
header ('Location: membre_index.php');
exit();
}
?>
<html>
<head>
<title>Espace membre</title>
</head>
<body>
Bienvenue <?php echo htmlentities(trim($_SESSION['login'])); ?> !<br />
<a href="deconnexion.php">Déconnexion</a>
</body>
</html>

La page de déconnexion de l'espace membre : deconnexion.php

Ici, nous allons finir (fermer) la session en cours, et rediriger le visiteur vers le formulaire de connexion à l'espace membre.

Voici le code de la page deconnexion.php :

Tapez le code dans votre éditeur.

📋 Copier le code

<?php
session_start();
session_unset();
session_destroy();
header('Location: membre_index.php');
exit();
?>	

La page d'inscription à l'espace membre : inscription.php

Dans cette page, nous allons placer le formulaire d'inscription à notre espace membre, qui sera composé de 3 champs :

• - un champ login contenant le login que l'utilisateur voudra utiliser pour se connecter à l'espace membre
• - un champ pass contenant son mot de passe (que nous devrons hacher par la fonction md5 de PHP avant de le stocker dans la base de données)
• - un champ pass_confirm demandant à l'utilisateur de retaper son mot de passe (ceci, afin d'être bien sur que l'utilisateur tape bien le mot de passe qu'il souhaite taper )

Une fois le formulaire soumis, il nous reste à vérifier diverses choses avant d'enregistrer ce nouveau membre.

Nous testons si le formulaire est bien rempli.
Si il ne l'est pas, nous affichons un petit message en dessous du formulaire.
Si il l'est, nous passons au prochain test, testant si le mot de passe et sa confirmation saisis par le visiteur sont identiques.
Puis, nous nous connectons à notre base de données, et nous vérifions si le login saisi par l'utilisateur n'existe pas déjà dans notre table membre.
Si il ne l'est pas, nous validons l'inscription tout en prenant soin de stocker le mot de passe haché du nouveau membre dans notre table, puis nous redirigeons notre visiteur vers notre espace membre.

Voici le code de la page inscription.php :

Tapez le code dans votre éditeur.

📋 Copier le code

<?php
// on teste si le visiteur a soumis le formulaire
if (isset($_POST['inscription']) && $_POST['inscription'] == 'Inscription') {
// on teste l'existence de nos variables. On teste également si elles ne sont pas vides
if ((isset($_POST['login']) && !empty($_POST['login'])) && (isset($_POST['pass']) &&
!empty($_POST['pass'])) && (isset($_POST['pass_confirm']) && !empty($_POST['pass_confirm']))) {
// on teste les deux mots de passe
if ($_POST['pass'] != $_POST['pass_confirm']) {
$erreur = 'Les 2 mots de passe sont différents.';
}
else {
$base = mysql_connect ('serveur', 'login', 'password');
mysql_select_db ('nom_base', $base);
// on recherche si ce login est déjà utilisé par un autre membre
$sql = 'SELECT count(*) FROM membre WHERE login="'.mysql_escape_string($_POST['login']).'"';
$req = mysql_query($sql) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
$data = mysql_fetch_array($req);
if ($data[0] == 0) {
$sql = 'INSERT INTO membre VALUES("", "'.mysql_escape_string($_POST['login']
).'", "'.md5(mysql_escape_string($_POST['pass'])).'")';
mysql_query($sql) or die('Erreur SQL !'.$sql.'<br />'.mysql_error());
session_start();
$_SESSION['login'] = $_POST['login'];
header('Location: membre.php');
exit();
}
else {
$erreur = 'Un membre possède déjà ce login.';
}
}
}
else {
$erreur = 'Au moins un des champs est vide.';
}
}
?>
<html>
<head>
<title>Inscription</title>
</head>
<body>
Inscription à l'espace membre :<br />
<form action="inscription.php" method="post">
Login : <input type="text" name="login" value="<?php if (isset($_POST['login'])) echo htmlentities(trim($_POST['login'])); ?>"><br />
Mot de passe : <input type="password" name="pass" value="<?php if (isset($_POST['pass'])
) echo htmlentities(trim($_POST['pass'])); ?>"><br />
Confirmation du mot de passe : <input type="password" name="pass_confirm" value="<?php
if (isset($_POST['pass_confirm'])) echo htmlentities(trim($_POST['pass_confirm'])); ?>
"><br />
<input type="submit" name="inscription" value="Inscription">
</form>
<?php
if (isset($erreur)) echo '<br />',$erreur;
?>
</body>
</html>		

Et voila un bon début d'espace membre, un ébauche minime, mais fonctionnel
A vous de stocker plus d'informations dans la table membre, de placer les informations de votre choix dans votre espace membre, de faire une confirmation d'inscription via une adresse E-Mail, et de ...

Beaucoup de travail en perspective ou quoi ?