Comment créer un espace membre?

Attention, depuis PHP 5.5.0, certaines extensions SQL sans doute utilisées dans ce tutoriel peuvent être obsolètes et seront supprimées dans le futur, vous devez donc adapter les codes! Exemples ici.
Dans ce tutoriel, nous allons voir comment créer un espace membre administrable.

Cet espace membre devra avoir les fonctionnalités de base suivantes:
  • Formulaire pour créer un compte.
  • Formulaire pour se connecter à ce compte.
  • Formulaire pour récupérer les identifiants si perdu.
  • Modifications par l'utilisateur de son pseudo, mot de passe et email.
  • Upload d'une image comme avatar.
  • Suppression du compte par l'utilisateur lui-même.
  • Espace admin. pouvant modifier, supprimer, bannir un compte.
A vous, ensuite, d'adapter le code selon vos besoins... Histoire de voir dans quoi vous vous engagez, tester la démonstration. (pseudo et pass » admin)
Note : Gardez les mêmes nom de fichiers et codes jusqu'à la fin du tutoriel. Ceci me permettra de vous aidez plus vite si vous rencontrez un soucis.
Notes bis : cet espace membre a été testé sous WampServer, Free.fr et 1&1.

Quel langage allons nous utiliser ?

XHTML, PHP, CSS et un poil de JAVASCRIPT.

Etape 1 :

Créer sur votre bureau ou sous WampServer ou bien sur votre serveur un dossier nommé "authentification". Tout les fichiers et/ou dossiers devront être placés dans ce dossier!

Etape 2 : Feuille de style.

Dans un premier temps, je vous donnes le code CSS pour la mise en page des formulaires permettant l'inscription, la connexion et la récupération des identifiants.
Créer un fichier nommé "auth-style-index.css" et insérez-y le code suivant :
body{
background:#F1F1F1;
}
#centre {
background:white;
position : absolute;
left : 50%;
top : 50%;
border : 1px solid #aaa;
width : 400px;
height : 300px;
margin-top : -150px;
margin-left: -200px;
border-radius : 5px;
-webkit-border-radius : 5px;
-moz-border-radius : 5px;
padding:5px;
text-align:center;
box-shadow: 8px 8px 12px #aaa;
-moz-box-shadow: 8px 8px 12px #aaa;
-webkit-box-shadow: 8px 8px 12px #aaa;
color:#aaa;
}
#centre a{
color:black;
text-decoration:none;
}
#erreur{
background:#F11A57;
color : #FFF;
border : 1px solid #F11A57;
padding : 5px;
margin:5px;
border-radius : 5px;
-webkit-border-radius : 5px;
-moz-border-radius : 5px;
text-align:left;
}
#ok{
background:#D6EFA1;
color:#4F7307;
border : 1px solid #C1D779;
padding : 5px;
margin:5px;
border-radius : 5px;
-webkit-border-radius : 5px;
-moz-border-radius : 5px;
text-align:left;
}
h1{
text-align:center;
color:#CCC;
}
label,input{
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
input[type=submit],input[type=reset]{
width: 70px;
margin-right:5px;
}
label{
text-align: right;
width: 100px;
padding-right: 20px;
}
br {
clear: left;
}
#lien{
position:absolute;
left: 55px;
bottom: 0px;
}
Nous allons à présent créer un second fichier CSS qui sera le style "général" (une fois logué) de l'espace membre. Créer un fichier nommé "auth-style.css" et insérez-y le code suivant : 
body{
background:#F1F1F1;
}
#cadre{
background:white;
margin:0 auto;
border : 1px solid #aaa;
width : 1000px;
height : auto;
border-radius : 5px;
-webkit-border-radius : 5px;
-moz-border-radius : 5px;
padding:5px;
box-shadow: 8px 8px 12px #aaa;
-moz-box-shadow: 8px 8px 12px #aaa;
-webkit-box-shadow: 8px 8px 12px #aaa;
color:#000;
overflow:auto;
}
#cadre a{
color:#FF0096;
text-decoration:none;
}
h1, h2{
text-align:center;
color:#CCC;
text-shadow:1px 1px 1px #666;
}
label,input,textarea{
display: block;
width: 350px;
float: left;
margin-bottom: 10px;
}
label{
text-align: right;
width: 300px;
padding-right: 20px;
}
br {
clear: left;
}
input[type=submit],input[type=reset]{
width: auto;
margin-right:5px;
}
.erreur{
background:#F11A57;
color : #FFF;
border : 1px solid #F11A57;
padding : 5px;
margin:5px;
border-radius : 5px;
-webkit-border-radius : 5px;
-moz-border-radius : 5px;
}
.ok{
background:#D6EFA1;
color:#4F7307;
border : 1px solid #C1D779;
padding : 5px;
margin:5px;
border-radius : 5px;
-webkit-border-radius : 5px;
-moz-border-radius : 5px;
}
.info{
background:#FFF4D6;
color:#4A3505;
border : 1px solid #EAC572;
padding : 5px;
margin:5px;
border-radius : 5px;
-webkit-border-radius : 5px;
-moz-border-radius : 5px;
}
li{
display:inline;
border:1px solid #BCE8F1;
background:white;
padding:5px;
margin:5px;
border-radius : 5px;
-webkit-border-radius : 5px;
-moz-border-radius : 5px;
box-shadow: 2px 2px 2px #aaa;
-moz-box-shadow: 2px 2px 2px #aaa;
-webkit-box-shadow: 2px 2px 2px #aaa;
}
li:hover{
background:#D9EDF7;
}
/*Formulaire d'upload*/
#photo{
width: 150px;
margin-left:-100px;
}
.avatar{
background:white;
margin:5px;
padding:5px;
border : 1px solid #aaa;
border-radius : 5px;
-webkit-border-radius : 5px;
-moz-border-radius : 5px;
box-shadow: 8px 8px 8px #aaa;
-moz-box-shadow: 8px 8px 8px #aaa;
-webkit-box-shadow: 8px 8px 8px #aaa;
}
Voir/déposer un commentaire (2) | Signaler un problème