#3 Espace membre - Ranks & Grades

Iktus · 9 Octobre 2016

Bonjour, bonsoir,

Partie 1 -> Clique ici
Partie 2 -> Clique ici

Dans cette partie nous allons voir comment donner un grade à un utilisateur et un rank spécifique au grade.
Nous allons devoir utiliser PHP, MySQL et aussi du CSS.

Avant de commencer tout ça, nous allons ajouter notre nom d'utilisateur et notre avatar dans notre accueil ainsi qu'une redirection vers la page de connexion si l'utilisateur n'est pas connecté

Pour commencer, nous allons ajouter un code en PHP pour la redirection

PHP:

if(isset($_SESSION['id']))

    {

    }else
    {
        header('Location: login');
exit();
    }

Ce qui doit vous donner

PHP:

<?php

session_start();

if(isset($_SESSION['id']))
    {

    }else
    {
        header('Location: login');
exit();
    }

require_once('includes/configuration.php');
require_once('includes/fonctions/configuration.fonction.php');

?>

Maintenant nous allons ajouter le nom de l'utilisateur connecté et son avatar, donc c'est tout simple, il suffit de faire un echo ou print (identique) avec un $_SESSION et de sélectionner la table voulu. Il faut que la session soit ouverte.

PHP:

<?php echo $_SESSION['identifiant']; //Identique à print $_SESSION ?>
<?php echo $_SESSION['avatar']; ?>

Maintenant que nous avons fais ça, on va modifier la table membres pour y ajouter les colonnes rank et grade.
Pour ma part, je vais utiliser 2 grades, Membre et Administrateur
Donc nous aurons besoin de 2 ranks. Le rank 1 pour le grade Membre et le rank 2 pour Administrateur.

On va modifier le Design de la table membres

Ensuite nous allons ajouter rank et grade et leurs donner en type enum

Une fois cela de fait, vous pourrez sélectionner le rank et le grade souhaité

Une fois ça de fait, on va mettre notre <?php echo $_SESSION['identifiant']; ?> dans un span
Ce qui donne

Code:

<span><?php echo $_SESSION['identifiant']; ?></span>

Question: Mais le span est inutile là non ?
Réponse: Comme il est actuellement oui, mais nous allons lui ajouter une class

Maintenant que nous avons ajouté notre span, nous allons ajouter dans celui-ci

Code:

class="groupe<?php echo $_SESSION['rank']; ?>"

Ce qui donne

Code:

<span class="groupe<?php echo $_SESSION['rank']; ?>"><?php echo $_SESSION['identifiant']; ?></span>

Question: Mmmh ok mais ... Sa change rien à l'apparence
Réponse: C'est normal! Il est temps d'attaquer le CSS

Nous allons créer un dossier css à la racine de notre FTP puis créer un fichier styles.css

Donc, avant de commencer, nous allons déclarer notre fichier .css.
On se rend dans entre les balises <head> et </head> et on rajoute

HTML:

<link rel="stylesheet" href="css/styles.css">

Maintenant, nous pouvons commencer par ajouter un commentaire pour savoir sur quel grade nous travaillons puis on ouvre une feuille .groupe2 (Je pense pas qu'on dit feuille mais vous comprendrez en dessous

)

Code:

/* Administrateur */


.groupe2 {
 
}

Dans celui-ci nous allons lui donner une couleur, en rouge important, donc on ajoute

Code:

color: red !important

Ce qui donne

Code:

/* Administrateur */

.groupe2 {
    color: red !important
}

Maintenant, notre nom d'utilisateur sera en rouge

Question: Mais ... Sa marche pas, pourtant j'ai bien suivi le tutoriel
Réponse: C'est normal Nous n'avons pas ouvert les sessions de rank et grade donc les données ne sont pas pris en compte

On se rend dans notre fichier configuration.php situé dans le dossier includes et nous rajoutons en dessous des sessions déjà inscrite

PHP:

$_SESSION['rank'] = $info['rank'];

            $_SESSION['grade'] = $info['grade'];

Ce qui donne

PHP:

<?php

try
{
    $hostname = "127.0.0.1";
    $dbname = "rgtuto";
    $user = "root";
    $password = "";

    $bdd = new PDO('mysql:host='.$hostname.';dbname='.$dbname.';charset=utf8', ''.$user.'', ''.$password.'', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
}

catch(Exception $e)
{
    die('<span style="color:red;"><b>Une erreur est survenue !</b></span> <br />'. $e->getMessage());
}

if(isset($_SESSION['id']))
{
    $req = $bdd->prepare("SELECT * FROM membres WHERE id = ?");
    $req->execute(array($_SESSION['id']));
    $info = $req->rowCount();
    if($info == 1)
        {
            $info = $req->fetch();
            $_SESSION['id'] = $info['id'];
            $_SESSION['identifiant'] = $info['identifiant'];
            $_SESSION['motdepasse'] = $info['motdepasse'];
            $_SESSION['email'] = $info['email'];
            $_SESSION['avatar'] = $info['avatar'];
            $_SESSION['rank'] = $info['rank'];
            $_SESSION['grade'] = $info['grade'];

        }
}

?>

Et nous faisons pareil dans notre fichier login.code.php situé dans le dossier php qui est situé dans le dossier includes.

PHP:

$backup = $req->fetch();

        $_SESSION['id'] = $backup['id'];
        $_SESSION['identifiant'] = $backup['identifiant'];
        $_SESSION['motdepasse'] = $backup['motdepasse'];
        $_SESSION['avatar'] = $backup['avatar'];
// À rajouter
        $_SESSION['rank'] = $backup['rank'];
        $_SESSION['grade'] = $backup['grade'];

Maintenant que vous avez mis ça, votre nom d'utilisateur doit s'afficher en rouge

Principalement, nous utilisons un rank pour limité l'accès à l'administration pour un rank spécifique.
Ici, le grade servira pour la page de l'équipe ainsi que la page de profil.
Le rank servira au CSS ainsi cas limité l'accès à diverse page futur mais sera aussi utilisé pour la page de l'équipe.

On va rajouter à notre grade un Font Awesome faisant une rotation de 360°

Donc le code si dessous sert à la rotation, donc faites juste un copier/coller

Code:

.groupe2:hover:before{

display:inline-block;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:all 0.35s;
-webkit-transition:all 0.35s;
-moz-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s
}

Maintenant, nous allons faire en sorte que ce soit notre Font Awesome qui face une rotation, car pour le moment, la rotation est inutile.

Code:

.groupe2:before {

font-family: "FontAwesome";
content: "\f132";
color: red !important;
padding-right: 4px;
display: inline-block;
}

Pour modifier la couleur de votre Font Awesome, vous devrez modifier le color, pour l'icon c'est le content (

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

, Unicode à utiliser) et le reste c'est à vous de voir selon vos goût. (Ne pas toucher au font-family par contre

)

Ce que sa donne pour moi

Le fichier styles.css entier

Code:

/* Administrateur */

.groupe2 {
    color: red !important
}

.groupe2:before {
font-family: "FontAwesome";
content: "\f132";
color: red !important;
padding-right: 4px;
display: inline-block;
}

.groupe2:hover:before{
display:inline-block;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:all 0.35s;
-webkit-transition:all 0.35s;
-moz-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s
}

Pour les membres, je propose de leur mettre une simple couleur, pour ma part je vais mettre un bleu clair.

Code:

/* Membre */

.groupe1 {
    color: #2EA8FF !important;
}

N'hésitez pas à me demander de détailler certaine chose

Bonne journée/soirée à vous

Télécharger le projet:

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

ta tante. · 11 Octobre 2016

Dommage que tu donne le résultat à la fin... Un petit screen de l'avancement à chaque tuto ?

Iktus · 11 Octobre 2016

Kiru. a dit:
Dommage que tu donne le résultat à la fin... Un petit screen de l'avancement à chaque tuto ?

Je trouve que c'est mieux de donner le résultat à la fin au cas où que des personnes se poserait la question si c'est ça ou non

Je vais mettre en place un site avec l'avance en live

Lagger · 20 Octobre 2016

Super tuto ! :love:

C'est vraiment intéressant de suivre tes tutos

Comme a dit @Unlocalized.

Unlocalized. a dit:
Dommage que tu donne le résultat à la fin...

PS: Tu as oublié la partie 1 en haut

Iktus · 20 Octobre 2016

Lagger a dit:
Super tuto !
C'est vraiment intéressant de suivre tes tutos
Comme a dit @Unlocalized.

PS: Tu as oublié la partie 1 en haut

Merci

Avec plaisir

J'éviterai de donner le résultat dans certain cas alors

Je le rajoute de suite merci

#3 Espace membre - Ranks & Grades

Iktus

ta tante.

The King.

Iktus

Lagger

Responsable des lags

Iktus