[Tutoriel] Espace membres, enfin complet et tout neuf

[minitux]

Bonjour a tous,
Voila plusieurs mois que je n’est pas donné de nouvelle sur le forum. A cela plusieurs raisons que j’ai déjà exposé sur une autre catégories, aujourd’hui je vous poste mon tutoriel en entier .

Je vous demanderez d’être indulgent dur temps que j’ai mis a l’écrire et je m’excuse auprès de toutes les personnes qui en attendaient le fin, mais aujourd’hui vous l’avez . Ben entendu je l’est repris depuis le début donc vous devez re-suivre tout le reste .

Sans plus attendre voici le tutoriel.

Nous allons commencer par établir les différentes variables dont nous aurons besoin. Afin de pouvoir pré-remplir notre formulaire si celui-ci a déjà étais envoyé mais qu’il y a eu des erreurs .

forumulaire.php

Code: Tout sélectionner

<?php
$pseudo = NULL;
$mail = NULL;
$mail2 = NULL;
?>

Et juste en dessous nous mettons notre formulaire, il est très simple mais suffisant, personnelement je n’aime pas du tout les formulaires d’inscription qui demande trop d’info.

Notez que nous avons également une checkbox pour ce qui est de la charte du site.

Code: Tout sélectionner

<form action="formulaire.php" method="post">
   <table>
   <tr>
      <td>Pseudo : </td><td><input type="text" name="pseudo" value="<?php echo $pseudo; ?>" />
   </tr>
   <tr>
      <td>Mot de passe : </td><td><input type="password" name="pass" value="" />
   </tr>
   <tr>
      <td>Confirmation : </td><td><input type="password" name="pass2" value="" />
   </tr>
   <tr>
      <td>Adresse e-mail : </td><td><input type="text" name="mail" value="<?php echo $mail; ?>" />
   </tr>
   <tr>
      <td>Confirmation : </td><td><input type="text" name="mail2" value="<?php echo $mail2; ?>" />
   </tr>
   <tr>
      <td>J'ai lue est compris la charte du site : </td><td><input type="checkbox" name="charte" />
   </tr>
   <tr>
      <td></td><td><input type="submit" value="Inscription" />
   </tr>
   </table>
</form>

Comme vous pouvez le voir on a laissé une cellule du formulaire vide pour le bouton submit, simplement pour l’aligner avec les zones de saisie(champs du formulaire) , qui sont plus haut, c’est quand même plus propre.

Maintenant que nous avons notre formulaire nous allons établir les différentes vérification que nous devons faire. Pour commencer nous allons vérifier si notre formulaire a étais envoyé. Nous allons placer notre code entre notre formulaire et la définition de nos variables .

Code: Tout sélectionner

<?php
$pseudo = NULL;
$mail = NULL;
$mail2 = NULL;
// Le code se trouve ici
?>
<form action="formulaire.php" method="post">
<table>
    <tr>
        <td>Pseudo : </td><td><input type="text" name="pseudo" value="<?php echo $pseudo; ?>" />
    </tr>
< !—Suite du formulaire - ->

Pour vérifier si notre formulaire a étais envoyé ils nous suffit de regarder si nos variables formulaire existe tout simplement donc on utilise la fonction isset.

Code: Tout sélectionner

if(isset($_POST['pseudo'],$_POST['pass'],$_POST['pass2'],$_POST['mail'],$_POST['mail2'])){
    
} 

Voila maintenant tout ce qui est dans le if seras exécuté si le formulaire a étais envoyé, donc si le membre essaye de s’inscrire. Nous allons maintenant initialiser nos variables d’erreurs .

Alors en faite pour notre espace membres nous allons crée plusieurs variables d’erreur, dont une qui se nomme erreur et qui est la plus importante. En faite cette variable sera égale a zéro mais elle s’incrémentera(+1) a chaque erreur commise pas le visiteur, ensuite il nous suffira de faire une bête condition.
Sans plus attendre voici les différentes variable d’erreur dont nous avons besoin, notez que j’ai commenté le code pour que vous puissiez comprendre a quoi elles servent.

Code: Tout sélectionner

<?php

$erreur = 0; // La fameuse variable d'erreur qui vaut zéro.
$erreurPseudo = NULL; // Variable qui contiendra une erreur si le pseudo n'est pas renseigné lors de l'envoi du formulaire
$erreurPseudo2 = NULL; //Variable qui contiendra une erreur si le pseudo est déjà présent dans la base de données, ça serais idiot d'avoir deux membres qui porte le même pseudo ;o .
$erreurPseudo3 = NULL; //Variable qui contiendra une erreur si le pseudo est trop petit, nous ne voulons pas de pseudo d'une lettre dans notre site.
$erreurMail = NULL; // Variable qui contiendra une erreur si le mail n'est pas renseigné.
$erreurMail2 = NULL; //Variable qui contiendra une erreur si le mail na pas un format valide.
$erreurMail3 = NULL; // Variable qui contiendra une erreur si le mail existe déjà dans la base de données, on ne veut pas de double comptes.
$erreurMail4 = NULL; // Variable qui contiendra une erreur si les deux adresses e-mail sont différente.
$erreurPass = NULL; //Variable qui contiendra une erreur si le mot de passe n'est pas renseigné.Notez que nous utiliserons la même variable pour les deux champs mot de passe et confirmation.
$erreurPass2 = NULL;// Variable qui contiendra une erreur si le mot de passe est différent de celui pour confirmation.
$erreurPass3 = NULL;// Variable qui contiendra une erreur si le mot de passe est trop petit .
$erreurPass4 = NULL;// Variable qui contiendra une erreur si le mot de passe est égale au pseudo .
$erreurCharte = NULL; // Bien sûr la variable qui contiendra l'erreur d'acceptation de la charte.
?>

Voila les commentaires parlent d’eux même, pas besoin de trop préciser ici. Je vient de penser que nous n’avions pas encore crée notre table nous allons donc le faire de-suite. Nous allons crée une table membres qui contient différent champs, voici la requette a utiliser pour crée la table.

Code: Tout sélectionner

CREATE TABLE IF NOT EXISTS `membres` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `pseudo` varchar(60) NOT NULL,
  `mot _de_passe` varchar(200) NOT NULL,
  `mail` varchar(255) NOT NULL,
  `timestamp` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Donc les différent champs sont l’id du membres, le pseudo du membres, sont mot de passe qui sera haché avec la méthode sha1() , l’adresse e-mail du membres, et le champ timestamp qui contient la date d’inscription du membre.

Attaquons maintenant notre batterie de test pour voir si le visiteur ne fait pas de bêtise, par bêtise j’entend erreur de saisie dans le formulaire, pseudo déjà utilisé etc etc …

Alors on va commencer par vérifier si le pseudo a étais remplie, c'est-à-dire que si il est égale a NULL nous allons incrémenter notre variable erreur et établir le texte de l’erreur, nous allons également nous connecter a la base de données et sécuriser nos variable, voici donc la connexion et la protection de nos variables (ce code est a placer dans notre condition, juste après la définition de nos variables d’erreur.

Code: Tout sélectionner

$connexion = new mysqli('localhost','root',''); // Connexion a la base de données.
$connexion->select_db('tutoriels'); // Selection de la base de données.

$pseudo = $connexion->real_escape_string($_POST['pseudo']); // On sécurise la variable pseudo
$mail = $connexion->real_escape_string($_POST['mail']); // On sécurise la variable mail    
$mail2 = $connexion->real_escape_string($_POST['mail2']); // On sécurise la seconde variable mail.   

Voici donc notre code sécurisé et notre connexion a la base de données établie. Vous pouvez maintenant voir l’utilité de nos variables au début de notre script

Code: Tout sélectionner

$pseudo = NULL;
$mail = NULL;
$mail2 = NULL; 

Ça nous permet de mettre en valeur dans le formulaire le pseudo le mail et la confirmation si le formulaire est envoyer mais qu’il na pas étais validé a cause des erreurs .
Maintenant nous allons vérifier tout les champs pour être sur qu’il ne sont pas vide. Voici la façon de faire, ont ne va pas vérifier qu’il contiennent quelque chose mais plutôt vérifier si il sont vide. Si oui on incrémente notre variable et ont remplie la variable erreurPseudo (enfin celle qui correspond a notre variable).

Code: Tout sélectionner

if($pseudo == NULL){
$erreurPseudo = 'Vous devez renseigner un pseudo pour vous inscrire. <br/>'; // Rajoute le texte pour notre variabe erreurPseudo
$erreur++; // On incrémente notre variable erreur.
}

Maintenant il nous suffit de faire pareil avec toutes nos variables ce qui nous donne.
if($pseudo == NULL){
$erreurPseudo = 'Vous devez renseigner un pseudo pour vous inscrire.<br/>'; // Ont remplie notre variable erreur correspondante.
$erreur++; // Ont incrémente notre variable erreur.
}
if($_POST['pass'] == NULL || $_POST['pass2'] == NULL){
$erreurPseudo = 'Vous devez renseigner votre mot de passe et le confirmer.<br/>'; // Ont remplie notre variable erreur correspondante.
$erreur++; // Ont incrémente notre variable erreur.
}
if($mail == NULL || $mail2 == NULL){
$erreurPseudo = 'Vous devez renseigner votre adresse e-mail et la confirmer.<br/>'; // Ont remplie notre variable erreur correspondante.
$erreur++; // Ont incrémente notre variable erreur.
} 

Comme vous pouvez le voir ont utilise la même variable d’erreur pour les deux champs mail et mail2 ainsi que pass et pass2.
Maintenant nous devons nous occuper de savoir si le pseudo est pas déjà utilisé. Pour cela ont va compter le nombre de pseudo dans la base de données qui est égale a celui envoyé et si on en trouve un ont utilise toujours la même méthode c'est-à-dire ont incrémente notre variable erreur et on étable le texte de $erreurPseudo2.

Code: Tout sélectionner

$resultat = $connexion->query('SELECT COUNT(*) AS nombrePseudo FROM membres WHERE pseudo="'.$pseudo.'"');// On compte le nombre de membres portant ce pseudo.
$nb = $connexion->fetch_object($resultat);// On transforme nos données en objets.
if($nb->nombrePseudo != 0){
$erreurPseudo2 = 'Ce pseudo est déjà utilisé par un de nos membres. <br/>'; // Ont remplie notre variable erreur correpondante.
$erreur++;// On incrémente notre variable pseudo.
$pseudo = NULL; // Expliquer dans le tuto ;0 .
} 

La dernière ligne doit vous posez quelque problème. Mais pourquoi diable je met la variable pseudo a NULL.
Comme vous le savez ont pré-remplie notre formulaire si il a étais envoyé, mais si notre pseudo est déjà utilisé ça ne sert a rien de pré-remplir car le visiteur devra en choisir un autre. Autant ne rien mettre ça évite que le visiteur doivent l'effacer.
Maintenant ont vérifie si le pseudo et pas trop petit grâce a la fonction strlen qui renvoie le nombre de caractères dans une string.

Code: Tout sélectionner

if(strlen($pseudo) < 4){
$erreurPseudo3 = 'Votre pseudo est trop petit, minimum 4 caractéres.<br/>';
$erreur++;
$pseudo = NULL;
} 

Comme tout a l’heure on met notre variable pseudo a NULL car dans tout les cas ont devra le changer.
Maintenant il nous reste a tester le mot de passe, l’adresse e-mail et la charte , pour le mot de passe je vous balance le code comme ça car de toute façon c’est idem que plus haut, sauf que la ont ne doit pas remettre a NULL notre variable car dans tout les cas ont ne pré-remplie par le champ mot de passe sur le formulaire.
Voici donc tout le code pour le mot de passe.

Code: Tout sélectionner

if($_POST['pass'] != $_POST['pass2']){
    $erreurPass2 = 'Votre mot de passe différe de celui de confirmation.<br/>';
    $erreur++;
}
if(strlen($_POST['pass']) < 4){
    $erreurPass3 = 'Votre mot de passe est trop petit, minimum 4 caractéres .<br/>';
    $erreur++;
}
if($_POST['pass'] == $pseudo){
    $erreurPass4 = 'Vous devez choisir un mot de passe différent de votre pseudo.<br/>';
    $erreur++;
} 

Maintenant nous savons que tout est traité pour ce qui est du mot de passe et du pseudo. Pour l’adresse e-mail nous n’avons en aucun cas besoin de faire beaucoup de chose différente, on vérifie encore une fois si celle-ci n’est pas déjà dans la bdd, si les deux adresses sont égale et la partie la plus dur est de vérifier ci elle a un format valide. Pour cela nous allons utiliser les expressions régulières , vue que ce n’est pas du tout comestible pour un débutant je vous met la ligne comme ça, si jamais ça vous intéresse vous n’avez cas le dire et je ferais un tutoriel la dessus .
Voici donc le code pour vérifier si tout ce passe bien coter e-mail.

Code: Tout sélectionner

if(!preg_match("#^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$#", $mail)){// Regex pour vérifier l'adresse e-mail, je vous avez prévenue c'est pas comestible, j'ai mis plus d'un an a pouvoir m'en servir sans la doc.
    $erreurMail2 = 'Votre adresse e-mail na pas un format valide .<br/>';
    $erreur++;
    $mail = NULL;
    $mail2 = NULL;
}
$resultat2 = $connexion->query('SELECT COUNT(*) AS nombreMail FROM membres WHERE mail="'.$mail.'"') or die(mysql_error());
    $nb2 = $resultat2->fetch_object();
if($nb2->nombreMail != 0){
    $erreurMail3 = 'Cette adresse e-mail est déjà utilisé par un de nos membes.<br/>';
    $erreur++;
    $mail = NULL;
    $mail2 = NULL;
}
if($mail != $mail2){
    $erreurMail4 = 'Les deux adresses e-mail différe.<br/>';
    $erreur++;
    $mail = NULL;
    $mail2 = NULL;
} 

Reste plus qu’une bête condition pour la charte, la voici

Code: Tout sélectionner

if(!isset($_POST['charte'])){
    $erreurCharte = 'Vous devez accepter la charte du site pour vous inscrire.<br/>';
    $erreur++;
} 

Voila nous avons donc maintenant tout traité, il nous reste a voir si notre variable erreur et égale a zéro, si oui on inscrit le membre sinon on affiche les erreurs, voici donc le code pour réaliser ceci.
Note : En début de script rajouté ob_start() et en fin ob_end_flush() ; cette fonction nous permet d’utilisé les header en plein milieux de notre page (attention tout en haut il faut que ça soit avant tout code html .

Code: Tout sélectionner

if($erreur == 0){
    $connexion->query("INSERT INTO membres VALUES('','".$pseudo."','".sha1($_POST['pass'])."','".$mail."','".time()."')") or die(mysql_error());
    header('Refresh: 5;url=index.php');// Redirection au bout de 5 secondes sur la page d'accueil
    echo'Votre inscription est réussi, vous allez être redirigé dans 5 secondes.';
}
else{
    echo $erreurPseudo;
    echo $erreurPseudo2;
    echo $erreurMail;
    echo $erreurMail2;
    echo $erreurMail3;
    echo $erreurMail4;
    echo $erreurPass;
    echo $erreurPass2;
    echo $erreurPass3;
    echo $erreurPass4;
    echo $erreurCharte ;
} 

Voila notre inscription est terminé et en plus elle fonctionne parfaitement .
Comme vous pouvez le voir ce n’est pas bien sorcier car en faite il suffit de faire quelque condition est d’insérer ou pas les données dans la bases de données . Pas très compliqué avoué .

Note : n’oubliez pas de vous déconnectez de la base de données. $connexion->close() ;

Attaquons nous maintenant a la connexion qui est très courte, mais c’est le plus compliqué dans un espace membres, car ont va travaillé avec plus de chose, au programme tableaux, session, et condition ^^ . Pas de cookie car je trouve que ça vous fait un bon exercice pour vous améliorez.

Déjà pour commencer on va établir les bases de notre page php que j’ai nommé connexion .

connexion.php

Code: Tout sélectionner

<?php
session_start(); // Active les sessions
ob_start();// Pour les headers
?>
<form action="connexion.php" method="post" >
<table>
    <tr>
        <td>Pseudo : </td><td><input type="text" name="pseudo"/></td>
    </tr>
    <tr>
        <td>Mot de passe: </td><td><input type="password" name="pass"/></td>
    </tr>
    <tr>
        <td>Pseudo : </td><td><input type="submit" value="Connexion"/></td>
    </tr>
</table>
</form>
<?php
ob_end_flush();// Ferme les headers
?>

Maintenant tout est prêt pour commencer, on a nos fonctions qui sont active, et notre formulaire.
Commençons par notre conditions de bases et a établir nos variables d’erreur, en faite on en auras une seul car le seul message que nous allons afficher est en faite « Les identifiants sont incorrecte ».
Contrairement a notre formulaire d’inscription nous n’afficherons rien si le formulaire contient des données vide.
Voici donc le code php.

Code: Tout sélectionner

if(isset($_POST['pseudo'],$_POST['pass']) && $_POST['pseudo'] != NULL && $_POST[‘pass’] != NULL){
    $erreur = 0;
    $erreurIdentifiant = NULL;
    
    $connexion = new mysqli('localhost','root','');
    $connexion->select_db('tutoriel');
    
    $pseudo = $connexion->real_escape_string($_POST['pseudo']);
} 

Comme vous pouvez le constater nous avons plus de condition dans notre if, simplement pour tester également si les champs ne sont pas vide. Nous allons maintenant allez chercher dans la bases de données le profil du membres qui porte le pseudo envoyer.
Si celui-ci n’existe pas ou que le mot de passe n’est pas bon ont incrémente notre variable erreur et on étable le texte de notre variable $erreurIdentifiant.
Voici donc ce que j’obtient après avoir fait cette vérification .

Code: Tout sélectionner

$resultat = $connexion->query('SELECT * FROM membres WHERE pseudo="'.$pseudo.'"');
$data = $resultat->fetch_object();
if($data->mot_de_passe != sha1($_POST['pass'])){
    $erreurIdentifiant = 'Les identifiants sont incorrecte, merci de les vérifier.<br/>';
    $erreur++;
} 

Maintenant on sait si notre membre a entré de bon identifiants ou le contraire, il nous suffit d’établir les sessions si la variable erreur est égale a zéro.
Nous allons ici utiliser une méthode un peut spécial, nous allons stocker nos données dans un tableaux a deux dimension.
Hein mais c’est quoi ça Oo je pige rien a ton truc moi.
En faite un tableaux a deux dimension c’est simplement un tableaux qui en contient un autre, vous voyez c’est pas dure donc pour établir mes sessions je fait comme ceci.

Code: Tout sélectionner

if($erreur == 0){
    $_SESSION['auth'] = array('pseudo'=>$data->pseudo, 'id'=>$data->id);
    echo 'Bienvenue '.$_SESSION['auth']['pseudo'].' vous êtes maintenant connecté.';
}
else{
    echo $erreurIdentifiant;
} 

Et voila tout marche inscription/connexion. Le tutoriel s’arrête donc la mais ne vous inquiétez pas ont a pas vraiment fini, dans un autre tutoriel je vous accompagnerez pour la créations des pages profil et de l’administration.
Au programme ajout de groupes (modo, newseur, bouley ^^), mais aussi bannissement des membres récupération du mot de passe avatar etc etc…

Voila donc maintenant vous savez tout sur la création d’un espace membres .

Vous pouvez si vous le souhaitais télécharger les sources

Télécharger les sources

[boulledogue]

Superbe! Avec la coloration syntaxique en plus, magnifique! Je n'ai pas le temps de le lire en ce moment, j'ai survolé et ca a l'air très intéressant. J'en aurai besoin d'ici bientôt en plus!
Merci beaucoup
Boulledogue

[jeromecold]

Pas mal je le reconnais (pour l'orthographe, aïe, mais c'est le tuto qui compte !).

[boulledogue]

Par contre, j'ai essayé le code chez moi, l'inscription fonctionne, mais pas la connexion ("les identifiants sont incorrects")...
++
Bldg

[minitux]

Par contre, j'ai essayé le code chez moi, l'inscription fonctionne, mais pas la connexion ("les identifiants sont incorrects")...
++
Bldg

Ah bizare, chez moi tout fonctionne, je vais rajouter quelque truc quand même comme la fonction rtrim pour le pseudo afin de supprimer les espace en début et fin de chaine pour le pseudo.

Pas mal je le reconnais (pour l'orthographe, aïe, mais c'est le tuto qui compte !).

Ué je vais me relire je risque d'en enlever quelque une mais pas toutes. Hier j'avais pas le courage de le faire .

[Cclleemm]

Superbe !! Je n'ai pas eu le temps de tester mais quel bon tuto ! Mes félicitations et merci pour la communauté de MonSiteGratuit
A bientôt et continue comme ça