Tutorial Créer un espace membre [Partie 1/3]

Discussion dans 'Programmation' créé par JUBAKAB, 18 Juin 2016.

  1. JUBAKAB

    JUBAKAB Ancien Staff

    137
    100
    783
    Hors Ligne
    Bonjour tous le monde :wesh:
    J'ai décidé de rééditer ce topic afin d'être le plus précis possible.

    Donc comme dis dans le topic précédent ( supprimé) cette série se composera en 3 parties :

    PARTIE 1 : Arborescence + Inscription
    PARTIE 2 : Se connecter
    PARTIE 3 : Edition du profil.

    Ce topic se présentera en plusieurs parties :

    I. Préparation des fichiers + Base de donnée
    II. HTML
    III. Le PHP

    I. Préparation des fichiers + Base de donnée :

    Donc tout d'abord nous allons créer les fichiers, suivez cette arborescence :
    ----------------------------------------------------------------------------------------------------
    - Racine
    -- lib
    --- config.php
    --- settings.php
    -- register.php​
    ----------------------------------------------------------------------------------------------------
    Sa devrai donner un truc comme ça :
    upload_2016-6-18_15-54-28.png
    Ensuite passons à la création de la bdd, pour ma part j'ai utilisé le phpMyAdmin du localhost (WAMP).
    Donc connectez-vous, pour ma part j'utilise les identifiants suivant :
    Nom d'utilisateur : root
    mot de passe : (laisser vide)

    Une fois connecté vous arriverai dans cette interface :
    upload_2016-6-18_16-4-55.png

    Cliquez sur "Nouvelle base de données",

    upload_2016-6-18_16-6-30.png
    Pour ma part j'ai utilisé le nom suivant : "espace_membre",

    upload_2016-6-18_16-7-29.png

    Dans 'Nom' mettez 'membres' et nombre de colonnes laissez la valeur 4 puis exécutez.

    Une fois exécuter remplissez les champs comme ci-dessous :

    upload_2016-6-18_16-10-26.png

    Note : Si vous ne remplissez pas tous les champs comme ci-dessus, il y a de forte chance que lors de la suite de ce tuto ça ne fonctionne pas.

    Attention : Il est obligatoire de mettre l'id en A_I !

    II. HTML
    Maintenant passons à l'étape la plus simple pour moi le HTML ! (Je n'utiliserai aucun CSS)

    Donc commençons à développé en HTML dans le fichier "register.php" (faites un copié/collé, j'ai ajouter un code php pour après :) ) :
    HTML:
    <!DOCTYPE html>
    <html>
    
    <head>
    
      <meta charset="UTF-8">
    
      <title>iHax - Tuto | Login</title>
    
    
    </head>
    
    <body>
    
      <html lang="fr-FR">
      <head>
    
        <meta charset="utf-8">
    
        <title>Se connecter</title>
    
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,700">
    
        <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
      </head>
    
      <body>
    
        <div class="container">
    
          <div id="login">
    
            <form method="POST" action="">
    
              <fieldset class="clearfix">
             <?php
             if(isset($erreur)) {
                echo '<font color="red">'.$erreur."</font>";
             }
             ?>
                <p><input type="text" placeholder="Nom d'utilisateur" name="pseudo" id="pseudo" required></p>
                <p><input type="text" placeholder="Adresse e-mail" name="mail" id="mail" required></p>
                <p><input type="text" placeholder="Confirmer e-mail" name="mail2" id="mail2" required></p>
                <p><input type="password" placeholder="Mot de passe" name="mdp" id="mdp" required></p>
                <p><input type="password" placeholder="Confirmer mot de passe" name="mdp2" id="mdp2" required></p>
                <p><input type="submit" value="S'inscrire" name="forminscription"></p>
    
              </fieldset>
    
            </form>
    
            <p>Vous êtes membre ? <br><a href="login.php">Se connecter maintenant.</a><span class="fontawesome-arrow-right"></span></p>
    
          </div>
    
        </div>
    
      </body>
    </html>
    

    Une fois cela fais passons à la dernière étape, le PHP.

    III. Le PHP
    Donc après la structure en HTML passons au PHP, si vous avez bien suivie ce qu'on a fait lors de la création de la bdd vous aurai juste à copié et collé ces codes !(sauf le fichier settings.php) :)

    -- Dans le dossier 'lib' ouvrez le fichier 'settings.php' et mettez ce code(modifier les informations commenté) :
    PHP:
    <?php

    $username
    =""// Nom d'utilisateur de votre bdd pour ma part en localhost c'est 'root'
    $password=""// mot de passe de votre bdd pour ma part je laisse vide
    $host=""// Hôte de votre bdd pour ma part c'est 'localhost'
    $database="espace_membre"// Base de donnée que nous avons créer dans le tutoriel, si vous avez suivi à la lettre ne touchez pas

    ?>
    Dans le fichier config.php copié/collé ce code sans rien modifié :
    PHP:
    <?php

    require_once 'settings.php';

    $options = array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8');

    try

    {
        
    $bdd = new PDO("mysql:host={$host};dbname={$database};charset=utf8"$username$password$options);
    }

    catch(
    PDOExeption $ex)

    {
        die(
    "Erreur lors de la connexion à la base de donnée: ".$ex->getMessage());
    }

    $bdd->setAttribute(PDO::ATTR_ERRMODEPDO:: ERRMODE_EXCEPTION);

    $bdd->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODEPDO::FETCH_ASSOC);

    session_start();

    ?>
    Maintenant retour dans le fichier register.php et inséré le code suivant si vous avez bien suivie à la lettre ce tutoriel :

    PHP:
    <?php
    require_once 'lib/config.php';
    if(isset(
    $_POST['forminscription'])) {
       
    $pseudo htmlspecialchars($_POST['pseudo']);
       
    $mail htmlspecialchars($_POST['mail']);
       
    $mail2 htmlspecialchars($_POST['mail2']);
       
    $mdp sha1($_POST['mdp']);
       
    $mdp2 sha1($_POST['mdp2']);
       if(!empty(
    $_POST['pseudo']) AND !empty($_POST['mail']) AND !empty($_POST['mail2']) AND !empty($_POST['mdp']) AND !empty($_POST['mdp2'])) {
          
    $pseudolength strlen($pseudo);
          if(
    $pseudolength <= 255) {
             if(
    $mail == $mail2) {
                if(
    filter_var($mailFILTER_VALIDATE_EMAIL)) {
                   
    $reqmail $bdd->prepare("SELECT * FROM membres WHERE email = ?");
                   
    $reqmail->execute(array($mail));
                   
    $mailexist $reqmail->rowCount();
                   if(
    $mailexist == 0) {
                      if(
    $mdp == $mdp2) {
                         
    $insertmbr $bdd->prepare("INSERT INTO membres(username, email, password) VALUES(?, ?, ?)");
                         
    $insertmbr->execute(array($pseudo$mail$mdp));
                         
    $erreur "Votre compte a bien été créé ! <a href=\"login.php\">Me connecter</a>";
                      } else {
                         
    $erreur "Vos mots de passes ne correspondent pas !";
                      }
                   } else {
                      
    $erreur "Adresse mail déjà utilisée !";
                   }
                } else {
                   
    $erreur "Votre adresse mail n'est pas valide !";
                }
             } else {
                
    $erreur "Vos adresses mail ne correspondent pas !";
             }
          } else {
             
    $erreur "Votre pseudo ne doit pas dépasser 255 caractères !";
          }
       } else {
          
    $erreur "Tous les champs doivent être complétés !";
       }
    }
    ?>
    ET voilà, donc c'est maintenant la fin de cette partie, donc vous avez créer votre formulaire d'inscription qui est normalement fonctionnel à 100%.
    J'ai utiliser le hashage du mot de passe (sha1).

    Donc je vous dis à bientôt pour la suite de cette série !
    PARTIE 2 : https://ihax.fr/threads/creer-un-espace-membre-partie-2-3.3632/
     
    Dernière édition: 18 Juin 2016
    SceKxploit et Sidradi aiment ça.
  2. Rubyy

    Rubyy Membre

    29
    0
    31
    Hors Ligne
    Merci PrimFX :D !!
     
  3. Netri

    Netri Membre

    35
    1
    33
    Hors Ligne
    Merci beaucoup pour le tuto. ;)
     

Partager cette page