Louxane
Membre
- Inscription
- 18 Février 2013
- Messages
- 248
- Réactions
- 51
- Points
- 9 016
Bonjour,
dans ce tutoriel, je vais vous montrer comment faire un espace membre en php.
L'espace membre que nous allons faire sera constitué de 6 pages:
Commençons par la base de données, nous allons faire une table utilisateurs:
Voici à quoi ressemble la table utilisateurs:
Inscription
Nous allons faire un formulaire pour permettre aux utilisateurs de s'inscrire, ils devront simplement entrer leur nom d'utilisateur, leur mot de passe et leur email. Ils peuvent aussi entrer l'adresse de leur image perso.
sign_up.php
Connection / Déconnection
Si l'utilisateur est connecté, on le deconnecte en supprimant les session, sinon, on affiche un formulaire, si la combinaison est bonne, la session pseudo est créée et il sera connecté.
connexion.php
Accueil
L'accueil est simplement une page avec les liens pour modifier ses informations, se deconnecter ou bien s'inscrire et se connecter.
index.php
Liste des membres
On affiche la liste des membres sous la forme d'un tableau.
users.php
Profil d'un utilisateur
On affiche les informations d'un utilisateur. Pour savoir de quel utilisateur il sagit, on vas récupérer son idenfiant via la variable $_GET['id']
profile.php
Il faut aussi créer un fichier pour pouvoir se connecter à la base de donnée.
config.php
dans ce tutoriel, je vais vous montrer comment faire un espace membre en php.
L'espace membre que nous allons faire sera constitué de 6 pages:
- Inscription
- Connection/Deconnection
- Accueil
- Modification du profil
- Liste des membres
- Profil d'un membre
Commençons par la base de données, nous allons faire une table utilisateurs:
Code:
[PHP]--
-- Structure de la table `users`
--
CREATE TABLE `users` (
`id` bigint(20) NOT NULL,
`username` varchar(255) NOT NULL,
`password` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`avatar` text NOT NULL,
`signup_date` int(10) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;[/PHP]
Voici à quoi ressemble la table utilisateurs:
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Inscription
Nous allons faire un formulaire pour permettre aux utilisateurs de s'inscrire, ils devront simplement entrer leur nom d'utilisateur, leur mot de passe et leur email. Ils peuvent aussi entrer l'adresse de leur image perso.
sign_up.php
PHP:
<?php
include('config.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="<?php echo $design; ?>/style.css" rel="stylesheet" title="Style" />
<title>Inscription</title>
</head>
<body>
<div class="header">
<a href="<?php echo $url_home; ?>"><img src="<?php echo $design; ?>/images/logo.png" alt="Espace Membre" /></a>
</div>
<?php
//On verifie que le formulaire a ete envoye
if(isset($_POST['username'], $_POST['password'], $_POST['passverif'], $_POST['email'], $_POST['avatar']) and $_POST['username']!='')
{
//On enleve lechappement si get_magic_quotes_gpc est active
if(get_magic_quotes_gpc())
{
$_POST['username'] = stripslashes($_POST['username']);
$_POST['password'] = stripslashes($_POST['password']);
$_POST['passverif'] = stripslashes($_POST['passverif']);
$_POST['email'] = stripslashes($_POST['email']);
$_POST['avatar'] = stripslashes($_POST['avatar']);
}
//On verifie si le mot de passe et celui de la verification sont identiques
if($_POST['password']==$_POST['passverif'])
{
//On verifie si le mot de passe a 6 caracteres ou plus
if(strlen($_POST['password'])>=6)
{
//On verifie si lemail est valide
if(preg_match('#^(([a-z0-9!\#$%&\\\'*+/=?^_`{|}~-]+\.?)*[a-z0-9!\#$%&\\\'*+/=?^_`{|}~-]+)@(([a-z0-9-_]+\.?)*[a-z0-9-_]+)\.[a-z]{2,}$#i',$_POST['email']))
{
//On echape les variables pour pouvoir les mettre dans une requette SQL
$username = mysql_real_escape_string($_POST['username']);
$password = mysql_real_escape_string($_POST['password']);
$email = mysql_real_escape_string($_POST['email']);
$avatar = mysql_real_escape_string($_POST['avatar']);
//On verifie sil ny a pas deja un utilisateur inscrit avec le pseudo choisis
$dn = mysql_num_rows(mysql_query('select id from users where username="'.$username.'"'));
if($dn==0)
{
//On recupere le nombre dutilisateurs pour donner un identifiant a lutilisateur actuel
$dn2 = mysql_num_rows(mysql_query('select id from users'));
$id = $dn2+1;
//On enregistre les informations dans la base de donnee
if(mysql_query('insert into users(id, username, password, email, avatar, signup_date) values ('.$id.', "'.$username.'", "'.$password.'", "'.$email.'", "'.$avatar.'", "'.time().'")'))
{
//Si ca a fonctionne, on naffiche pas le formulaire
$form = false;
?>
<div class="message">Vous avez bien été inscrit. Vous pouvez dorénavant vous connecter.<br />
<a href="connexion.php">Se connecter</a></div>
<?php
}
else
{
//Sinon on dit quil y a eu une erreur
$form = true;
$message = 'Une erreur est survenue lors de l\'inscription.';
}
}
else
{
//Sinon, on dit que le pseudo voulu est deja pris
$form = true;
$message = 'Un autre utilisateur utilise déjà le nom d\'utilisateur que vous désirez utiliser.';
}
}
else
{
//Sinon, on dit que lemail nest pas valide
$form = true;
$message = 'L\'email que vous avez entré n\'est pas valide.';
}
}
else
{
//Sinon, on dit que le mot de passe nest pas assez long
$form = true;
$message = 'Le mot de passe que vous avez entré contien moins de 6 caractères.';
}
}
else
{
//Sinon, on dit que les mots de passes ne sont pas identiques
$form = true;
$message = 'Les mots de passe que vous avez entré ne sont pas identiques.';
}
}
else
{
$form = true;
}
if($form)
{
//On affiche un message sil y a lieu
if(isset($message))
{
echo '<div class="message">'.$message.'</div>';
}
//On affiche le formulaire
?>
<div class="content">
<form action="sign_up.php" method="post">
Veuillez remplir ce formulaire pour vous inscrire:<br />
<div class="center">
<label for="username">Nom d'utilisateur</label><input type="text" name="username" value="<?php if(isset($_POST['username'])){echo htmlentities($_POST['username'], ENT_QUOTES, 'UTF-8');} ?>" /><br />
<label for="password">Mot de passe<span class="small">(6 caractères min.)</span></label><input type="password" name="password" /><br />
<label for="passverif">Mot de passe<span class="small">(vérification)</span></label><input type="password" name="passverif" /><br />
<label for="email">Email</label><input type="text" name="email" value="<?php if(isset($_POST['email'])){echo htmlentities($_POST['email'], ENT_QUOTES, 'UTF-8');} ?>" /><br />
<label for="avatar">Image perso<span class="small">(facultatif)</span></label><input type="text" name="avatar" value="<?php if(isset($_POST['avatar'])){echo htmlentities($_POST['avatar'], ENT_QUOTES, 'UTF-8');} ?>" /><br />
<input type="submit" value="Envoyer" />
</div>
</form>
</div>
<?php
}
?>
<div class="foot"><a href="<?php echo $url_home; ?>">Retour à l'accueil</a> - <a href="http://www.supportduweb.com/">Support du Web</a></div>
</body>
</html>
Connection / Déconnection
Si l'utilisateur est connecté, on le deconnecte en supprimant les session, sinon, on affiche un formulaire, si la combinaison est bonne, la session pseudo est créée et il sera connecté.
connexion.php
PHP:
<?php
include('config.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="<?php echo $design; ?>/style.css" rel="stylesheet" title="Style" />
<title>Connection</title>
</head>
<body>
<div class="header">
<a href="<?php echo $url_home; ?>"><img src="<?php echo $design; ?>/images/logo.png" alt="Espace Membre" /></a>
</div>
<?php
//Si lutilisateur est connecte, on le deconecte
if(isset($_SESSION['username']))
{
//On le deconecte en supprimant simplement les sessions username et userid
unset($_SESSION['username'], $_SESSION['userid']);
?>
<div class="message">Vous avez bien été déconnecté.<br />
<a href="<?php echo $url_home; ?>">Accueil</a></div>
<?php
}
else
{
$ousername = '';
//On verifie si le formulaire a ete envoye
if(isset($_POST['username'], $_POST['password']))
{
//On echappe les variables pour pouvoir les mettre dans des requetes SQL
if(get_magic_quotes_gpc())
{
$ousername = stripslashes($_POST['username']);
$username = mysql_real_escape_string(stripslashes($_POST['username']));
$password = stripslashes($_POST['password']);
}
else
{
$username = mysql_real_escape_string($_POST['username']);
$password = $_POST['password'];
}
//On recupere le mot de passe de lutilisateur
$req = mysql_query('select password,id from users where username="'.$username.'"');
$dn = mysql_fetch_array($req);
//On le compare a celui quil a entre et on verifie si le membre existe
if($dn['password']==$password and mysql_num_rows($req)>0)
{
//Si le mot de passe es bon, on ne vas pas afficher le formulaire
$form = false;
//On enregistre son pseudo dans la session username et son identifiant dans la session userid
$_SESSION['username'] = $_POST['username'];
$_SESSION['userid'] = $dn['id'];
?>
<div class="message">Vous avez bien été connecté. Vous pouvez accéder à votre espace membre.<br />
<a href="<?php echo $url_home; ?>">Accueil</a></div>
<?php
}
else
{
//Sinon, on indique que la combinaison nest pas bonne
$form = true;
$message = 'La combinaison que vous avez entré n\'est pas bonne.';
}
}
else
{
$form = true;
}
if($form)
{
//On affiche un message sil y a lieu
if(isset($message))
{
echo '<div class="message">'.$message.'</div>';
}
//On affiche le formulaire
?>
<div class="content">
<form action="connexion.php" method="post">
Veuillez entrer vos identifiants pour vous connecter:<br />
<div class="center">
<label for="username">Nom d'utilisateur</label><input type="text" name="username" id="username" value="<?php echo htmlentities($ousername, ENT_QUOTES, 'UTF-8'); ?>" /><br />
<label for="password">Mot de passe</label><input type="password" name="password" id="password" /><br />
<input type="submit" value="Connection" />
</div>
</form>
</div>
<?php
}
}
?>
<div class="foot"><a href="<?php echo $url_home; ?>">Retour à l'accueil</a> - <a href="http://www.supportduweb.com/">Support du Web</a></div>
</body>
</html>
Accueil
L'accueil est simplement une page avec les liens pour modifier ses informations, se deconnecter ou bien s'inscrire et se connecter.
index.php
PHP:
<?php
include('config.php')
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="<?php echo $design; ?>/style.css" rel="stylesheet" title="Style" />
<title>Espace membre</title>
</head>
<body>
<div class="header">
<a href="<?php echo $url_home; ?>"><img src="<?php echo $design; ?>/images/logo.png" alt="Espace Membre" /></a>
</div>
<div class="content">
<?php
//On affiche un message de bienvenue, si lutilisateur est connecte, on affiche son pseudo
?>
Bonjour<?php if(isset($_SESSION['username'])){echo ' '.htmlentities($_SESSION['username'], ENT_QUOTES, 'UTF-8');} ?>,<br />
Bienvenue sur notre site.<br />
Vous pouvez <a href="users.php">voir la liste des utilisateurs</a>.<br /><br />
<?php
//Si lutilisateur est connecte, on lui donne un lien pour modifier ses informations, pour voir ses messages et un pour se deconnecter
if(isset($_SESSION['username']))
{
?>
<a href="edit_infos.php">Modifier mes informations personnelles</a><br />
<a href="connexion.php">Se déconnecter</a>
<?php
}
else
{
//Sinon, on lui donne un lien pour sinscrire et un autre pour se connecter
?>
<a href="sign_up.php">Inscription</a><br />
<a href="connexion.php">Se connecter</a>
<?php
}
?>
</div>
<div class="foot"><a href="http://www.supportduweb.com/">Support du Web</a></div>
</body>
</html>
On affiche la liste des membres sous la forme d'un tableau.
users.php
PHP:
<?php
include('config.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="<?php echo $design; ?>/style.css" rel="stylesheet" title="Style" />
<title>Liste des utilisateurs</title>
</head>
<body>
<div class="header">
<a href="<?php echo $url_home; ?>"><img src="<?php echo $design; ?>/images/logo.png" alt="Espace Membre" /></a>
</div>
<div class="content">
Voici la liste des utilisateurs:
<table>
<tr>
<th>Id</th>
<th>Nom d'utilisateur</th>
<th>Email</th>
</tr>
<?php
//On recupere les identifiants, les pseudos et les emails des utilisateurs
$req = mysql_query('select id, username, email from users');
while($dnn = mysql_fetch_array($req))
{
?>
<tr>
<td class="left"><?php echo $dnn['id']; ?></td>
<td class="left"><a href="profile.php?id=<?php echo $dnn['id']; ?>"><?php echo htmlentities($dnn['username'], ENT_QUOTES, 'UTF-8'); ?></a></td>
<td class="left"><?php echo htmlentities($dnn['email'], ENT_QUOTES, 'UTF-8'); ?></td>
</tr>
<?php
}
?>
</table>
</div>
<div class="foot"><a href="<?php echo $url_home; ?>">Retour à l'accueil</a> - <a href="http://www.supportduweb.com/">Support du Web</a></div>
</body>
</html>
Profil d'un utilisateur
On affiche les informations d'un utilisateur. Pour savoir de quel utilisateur il sagit, on vas récupérer son idenfiant via la variable $_GET['id']
profile.php
PHP:
<?php
include('config.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="<?php echo $design; ?>/style.css" rel="stylesheet" title="Style" />
<title>Profil d'un utilisateur</title>
</head>
<body>
<div class="header">
<a href="<?php echo $url_home; ?>"><img src="<?php echo $design; ?>/images/logo.png" alt="Espace Membre" /></a>
</div>
<div class="content">
<?php
//On verifie que lidentifiant de lutilisateur est defini
if(isset($_GET['id']))
{
$id = intval($_GET['id']);
//On verifie que lutilisateur existe
$dn = mysql_query('select username, email, avatar, signup_date from users where id="'.$id.'"');
if(mysql_num_rows($dn)>0)
{
$dnn = mysql_fetch_array($dn);
//On affiche les donnees de lutilisateur
?>
Voici le profil de "<?php echo htmlentities($dnn['username']); ?>" :
<table style="width:500px;">
<tr>
<td><?php
if($dnn['avatar']!='')
{
echo '<img src="'.htmlentities($dnn['avatar'], ENT_QUOTES, 'UTF-8').'" alt="Image Perso" style="max-width:100px;max-height:100px;" />';
}
else
{
echo 'Cet utilisateur n\'a pas d\'image perso.';
}
?></td>
<td class="left"><h1><?php echo htmlentities($dnn['username'], ENT_QUOTES, 'UTF-8'); ?></h1>
Email: <?php echo htmlentities($dnn['email'], ENT_QUOTES, 'UTF-8'); ?><br />
Cet utilisateur s'est inscrit le <?php echo date('d/m/Y',$dnn['signup_date']); ?></td>
</tr>
</table>
<?php
}
else
{
echo 'Cet utilisateur n\'existe pas.';
}
}
else
{
echo 'L\'identifiant de l\'utilisateur n\'est pas défini.';
}
?>
</div>
<div class="foot"><a href="users.php">Retour à la liste des utilisateurs</a> - <a href="http://www.supportduweb.com/">Support du Web</a></div>
</body>
</html>
Il faut aussi créer un fichier pour pouvoir se connecter à la base de donnée.
config.php
PHP:
<?php
//On demarre les sessions
session_start();
/******************************************************
----------------Configuration Obligatoire--------------
Veuillez modifier les variables ci-dessous pour que l'
espace membre puisse fonctionner correctement.
******************************************************/
//On se connecte a la base de donnee
mysql_connect('hote', 'nomdutilisateur', 'motdepasse');
mysql_select_db('basededonne');
//Email du webmaster
$mail_webmaster = '[email protected]';
//Adresse du dossier de la top site
$url_root = 'http://www.example.com';
/******************************************************
----------------Configuration Optionelle---------------
******************************************************/
//Nom du fichier de laccueil
$url_home = 'index.php';
//Nom du design
$design = 'default';
?>