Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Quoi de neuf
Nouveaux messages
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
Informatique
Développement
#3 Espace membre - Ranks & Grades
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="Iktus" data-source="post: 6864750" data-attributes="member: 334036"><p style="text-align: center"><img src="http://image.prntscr.com/image/f163faa2baf346d2be8678e4e10b9b32.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"></p> <p style="text-align: center">Bonjour, bonsoir,</p> <p style="text-align: center"></p> <p style="text-align: center">Partie 1 -> <a href="https://reality-gaming.fr/threads/1-espace-membre-le-design.572110/" target="_blank">Clique ici</a></p> <p style="text-align: center">Partie 2 -><a href="https://reality-gaming.fr/threads/2-espace-membre-connexion-inscription.572159/" target="_blank"> Clique ici</a></p> <p style="text-align: center"></p> <p style="text-align: center">Dans cette partie nous allons voir comment donner un <strong><span style="color: #0080ff">grade</span></strong> à un utilisateur et un <strong><span style="color: #ff0000">rank</span></strong> spécifique au <strong><span style="color: #0080ff">grade</span></strong>.</p> <p style="text-align: center">Nous allons devoir utiliser <strong><span style="color: #ff0000">PHP</span></strong>, <strong><span style="color: #0080ff">MySQL</span></strong> et aussi du <span style="color: #b3b300"><strong>CSS</strong></span>.</p> <p style="text-align: center"></p> <p style="text-align: center">Avant de commencer tout ça, nous allons ajouter notre <strong><span style="color: #0080ff">nom d'utilisateur</span></strong> et <strong><span style="color: #0080ff">notre avatar</span></strong> dans notre accueil ainsi qu'une <strong><span style="color: #ff8000">redirection</span></strong> vers la <strong><span style="color: #ff8000">page de connexion</span></strong> si l'utilisateur <strong><span style="color: #ff0080">n'est pas connecté </span></strong><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" /></p> <p style="text-align: center"></p> <p style="text-align: center">Pour commencer, nous allons ajouter un code en PHP pour la redirection</p> <p style="text-align: left">[PHP]if(isset($_SESSION['id']))</p> <p style="text-align: left"></p> <p style="text-align: left"> {</p> <p style="text-align: left"></p> <p style="text-align: left"> }else</p> <p style="text-align: left"> {</p> <p style="text-align: left"> header('Location: login');</p> <p style="text-align: left">exit();</p> <p style="text-align: left"> }[/PHP]</p> <p style="text-align: center"></p> <p style="text-align: center">Ce qui doit vous donner</p> <p style="text-align: left">[PHP]<?php</p> <p style="text-align: left"></p> <p style="text-align: left">session_start();</p> <p style="text-align: left"></p> <p style="text-align: left">if(isset($_SESSION['id']))</p> <p style="text-align: left"> {</p> <p style="text-align: left"></p> <p style="text-align: left"> }else</p> <p style="text-align: left"> {</p> <p style="text-align: left"> header('Location: login');</p> <p style="text-align: left">exit();</p> <p style="text-align: left"> }</p> <p style="text-align: left"></p> <p style="text-align: left">require_once('includes/configuration.php');</p> <p style="text-align: left">require_once('includes/fonctions/configuration.fonction.php');</p> <p style="text-align: left"></p> <p style="text-align: left">?>[/PHP]</p> <p style="text-align: center"></p> <p style="text-align: center">Maintenant nous allons ajouter le <strong><span style="color: #0080ff">nom de l'utilisateur connecté</span></strong> et <strong><span style="color: #0080ff">son avatar</span></strong>, donc c'est tout simple, il suffit de faire un <strong><span style="color: #0080ff">echo</span></strong> ou <strong><span style="color: #0080ff">print</span></strong> (identique) avec un $_SESSION et de sélectionner la table voulu. Il faut que la session soit ouverte.</p> <p style="text-align: left">[PHP]<?php echo $_SESSION['identifiant']; //Identique à print $_SESSION ?></p> <p style="text-align: left"><?php echo $_SESSION['avatar']; ?>[/PHP]</p> <p style="text-align: center"></p> <p style="text-align: center">[SPOILER="Exemple"]<img src="http://image.prntscr.com/image/4c99e382e4dd44bf888d0c388408e2d0.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"><img src="http://image.prntscr.com/image/2a902a06bdc64a99aa2df8e9b68633cc.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> [/SPOILER]</p> <p style="text-align: center"></p> <p style="text-align: center">Maintenant que nous avons fais ça, on va modifier la table <span style="color: #0080ff"><strong>membres</strong></span> pour y ajouter les colonnes <span style="color: #ff0000"><strong>rank</strong></span> et <strong><span style="color: #ff0000">grade</span></strong>.</p> <p style="text-align: center">Pour ma part, je vais utiliser <span style="color: #59b300"><strong>2 grades</strong></span>, <strong><span style="color: #0059b3">Membre</span></strong> et <strong><span style="color: #ff0000">Administrateur</span></strong></p> <p style="text-align: center">Donc nous aurons besoin de 2 ranks. Le <strong><span style="color: #660033">rank 1</span></strong> pour le grade <strong><span style="color: #0000b3">Membre </span></strong>et le <strong><span style="color: #660033">rank 2</span></strong> pour <strong><span style="color: #ff0000">Administrateur</span></strong>.</p> <p style="text-align: center"></p> <p style="text-align: center">On va modifier le <strong><span style="color: #006666">Design</span></strong> de la table <strong><span style="color: #0080ff">membres</span></strong></p> <p style="text-align: center">[SPOILER="Juste au cas où ..."]<img src="http://image.prntscr.com/image/7e2c98ef87ec4b9da85aa744c378da56.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> [/SPOILER]</p> <p style="text-align: center"></p> <p style="text-align: center">Ensuite nous allons ajouter <strong><span style="color: #ff8000">rank</span></strong> et <strong><span style="color: #ff8000">grade</span></strong> et leurs donner en type <strong><span style="color: #5900b3">enum</span></strong></p> <p style="text-align: center">[SPOILER="Voir ici"]<img src="http://image.prntscr.com/image/d391056a83d940c2ac3c4d60316d3c6f.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"><img src="http://image.prntscr.com/image/23afefffe4f240d0a153b3ce99458ba5.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> [/SPOILER]</p> <p style="text-align: center"></p> <p style="text-align: center">Une fois cela de fait, vous pourrez sélectionner le rank et le grade souhaité</p> <p style="text-align: center">[SPOILER="Select"]<img src="http://image.prntscr.com/image/11c0bf5f281a448792edbf8fd9a0c0cd.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> [/SPOILER]</p> <p style="text-align: center"></p> <p style="text-align: center">Une fois ça de fait, on va mettre notre <span style="color: #0080ff"><?php echo $_SESSION['identifiant']; ?></span> dans un <strong><span style="color: #ff0000">span</span></strong></p> <p style="text-align: center">Ce qui donne</p><p>[CODE]<span><?php echo $_SESSION['identifiant']; ?></span>[/CODE]</p><p style="text-align: center"></p> <p style="text-align: center"></p> <p style="text-align: center"></p> <p style="text-align: center">Maintenant que nous avons ajouté notre <span style="color: #ff0000"><strong>span</strong></span>, nous allons ajouter dans celui-ci</p><p>[CODE]class="groupe<?php echo $_SESSION['rank']; ?>"[/CODE]</p><p style="text-align: center">Ce qui donne</p><p>[CODE]<span class="groupe<?php echo $_SESSION['rank']; ?>"><?php echo $_SESSION['identifiant']; ?></span>[/CODE]</p><p style="text-align: center"></p> <p style="text-align: center"></p> <p style="text-align: center">Nous allons créer un dossier <strong><span style="color: #b30000">css</span></strong> à la <strong><span style="color: #0059b3">racine</span></strong> de notre FTP puis créer un fichier <strong><span style="color: #b30059">styles.css</span></strong></p> <p style="text-align: center"><strong><span style="color: #b30059"></span></strong></p> <p style="text-align: center">Donc, avant de commencer, nous allons déclarer notre fichier .css.</p> <p style="text-align: center">On se rend dans entre les balises <head> et </head> et on rajoute</p> <p style="text-align: center"></p> <p style="text-align: left">[HTML]<link rel="stylesheet" href="css/styles.css">[/HTML]</p> <p style="text-align: left"></p> <p style="text-align: center">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 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite375" alt=":trollface:" title="Trollface :trollface:" loading="lazy" data-shortname=":trollface:" />)</p> <p style="text-align: left">[CODE]/* Administrateur */</p> <p style="text-align: left"></p> <p style="text-align: left"></p> <p style="text-align: left">.groupe2 {</p> <p style="text-align: left"></p> <p style="text-align: left">}[/CODE]</p> <p style="text-align: center"></p> <p style="text-align: center">Dans celui-ci nous allons lui donner une couleur, en rouge important, donc on ajoute</p><p>[CODE]color: red !important[/CODE]</p><p style="text-align: center"></p> <p style="text-align: center">Ce qui donne</p> <p style="text-align: left">[CODE]/* Administrateur */</p> <p style="text-align: left"></p> <p style="text-align: left">.groupe2 {</p> <p style="text-align: left"> color: red !important</p> <p style="text-align: left">}[/CODE]</p> <p style="text-align: center"></p> <p style="text-align: center">Maintenant, notre nom d'utilisateur sera en <strong><span style="color: #ff0000">rouge</span></strong> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" /></p> <p style="text-align: center"></p> <p style="text-align: center"></p> <p style="text-align: center"></p> <p style="text-align: center">On se rend dans notre fichier <strong><span style="color: #0080ff">configuration.php</span></strong> situé dans le dossier <strong><span style="color: #ff0000">includes</span></strong> et nous rajoutons en dessous des sessions déjà inscrite</p> <p style="text-align: left">[PHP]$_SESSION['rank'] = $info['rank'];</p> <p style="text-align: left"></p> <p style="text-align: left"> $_SESSION['grade'] = $info['grade'];[/PHP]</p> <p style="text-align: center"></p> <p style="text-align: center">Ce qui donne</p> <p style="text-align: left">[PHP]<?php</p> <p style="text-align: left"></p> <p style="text-align: left">try</p> <p style="text-align: left">{</p> <p style="text-align: left"> $hostname = "127.0.0.1";</p> <p style="text-align: left"> $dbname = "rgtuto";</p> <p style="text-align: left"> $user = "root";</p> <p style="text-align: left"> $password = "";</p> <p style="text-align: left"></p> <p style="text-align: left"> $bdd = new PDO('mysql:host='.$hostname.';dbname='.$dbname.';charset=utf8', ''.$user.'', ''.$password.'', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));</p> <p style="text-align: left">}</p> <p style="text-align: left"></p> <p style="text-align: left">catch(Exception $e)</p> <p style="text-align: left">{</p> <p style="text-align: left"> die('<span style="color:red;"><b>Une erreur est survenue !</b></span> <br />'. $e->getMessage());</p> <p style="text-align: left">}</p> <p style="text-align: left"></p> <p style="text-align: left">if(isset($_SESSION['id']))</p> <p style="text-align: left">{</p> <p style="text-align: left"> $req = $bdd->prepare("SELECT * FROM membres WHERE id = ?");</p> <p style="text-align: left"> $req->execute(array($_SESSION['id']));</p> <p style="text-align: left"> $info = $req->rowCount();</p> <p style="text-align: left"> if($info == 1)</p> <p style="text-align: left"> {</p> <p style="text-align: left"> $info = $req->fetch();</p> <p style="text-align: left"> $_SESSION['id'] = $info['id'];</p> <p style="text-align: left"> $_SESSION['identifiant'] = $info['identifiant'];</p> <p style="text-align: left"> $_SESSION['motdepasse'] = $info['motdepasse'];</p> <p style="text-align: left"> $_SESSION['email'] = $info['email'];</p> <p style="text-align: left"> $_SESSION['avatar'] = $info['avatar'];</p> <p style="text-align: left"> $_SESSION['rank'] = $info['rank'];</p> <p style="text-align: left"> $_SESSION['grade'] = $info['grade'];</p> <p style="text-align: left"></p> <p style="text-align: left"> }</p> <p style="text-align: left">}</p> <p style="text-align: left"></p> <p style="text-align: left">?>[/PHP]</p> <p style="text-align: center"></p> <p style="text-align: center">Et nous faisons pareil dans notre fichier <span style="color: #0080ff"><strong>login.code.php</strong></span> situé dans le dossier <strong><span style="color: #ff0000">php</span></strong> qui est situé dans le dossier <strong><span style="color: #5900b3">includes</span></strong>.</p> <p style="text-align: center"></p> <p style="text-align: left">[PHP]$backup = $req->fetch();</p> <p style="text-align: left"></p> <p style="text-align: left"> $_SESSION['id'] = $backup['id'];</p> <p style="text-align: left"> $_SESSION['identifiant'] = $backup['identifiant'];</p> <p style="text-align: left"> $_SESSION['motdepasse'] = $backup['motdepasse'];</p> <p style="text-align: left"> $_SESSION['avatar'] = $backup['avatar'];</p> <p style="text-align: left">// À rajouter</p> <p style="text-align: left"> $_SESSION['rank'] = $backup['rank'];</p> <p style="text-align: left"> $_SESSION['grade'] = $backup['grade'];[/PHP]</p> <p style="text-align: center"></p> <p style="text-align: center">Maintenant que vous avez mis ça, votre nom d'utilisateur doit s'afficher en <span style="color: #ff0000"><strong>rouge</strong></span> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" /></p> <p style="text-align: center">Principalement, nous utilisons un <strong><span style="color: #ff0000">rank</span></strong> pour limité l'accès à l'administration pour un <strong><span style="color: #0080ff">rank</span></strong> spécifique.</p> <p style="text-align: center">Ici, le <strong><span style="color: #59b300">grade</span></strong> servira pour la page de l'équipe ainsi que la page de profil.</p> <p style="text-align: center">Le <strong><span style="color: #ff0000">rank</span></strong> servira au <strong><span style="color: #ff8000">CSS</span></strong> ainsi cas limité l'accès à diverse page futur mais sera aussi utilisé pour la page de l'équipe.</p> <p style="text-align: center"></p> <p style="text-align: center">On va rajouter à notre <strong><span style="color: #0080ff">grade</span></strong> un <strong><span style="color: #006633">Font Awesome</span></strong> faisant une <strong><span style="color: #b30059">rotation de 360°</span></strong></p> <p style="text-align: center"><strong><span style="color: #b30059"></span></strong></p> <p style="text-align: center">Donc le code si dessous sert à la rotation, donc faites juste un copier/coller <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite375" alt=":trollface:" title="Trollface :trollface:" loading="lazy" data-shortname=":trollface:" /></p> <p style="text-align: left">[CODE].groupe2:hover:before{</p> <p style="text-align: left"></p> <p style="text-align: left">display:inline-block;</p> <p style="text-align: left">-webkit-transform:rotate(360deg);</p> <p style="text-align: left">-moz-transform:rotate(360deg);</p> <p style="text-align: left">-o-transform:rotate(360deg);</p> <p style="text-align: left">-ms-transform:rotate(360deg);</p> <p style="text-align: left">transform:rotate(360deg);</p> <p style="text-align: left">-webkit-transform:rotate(360deg);</p> <p style="text-align: left">-moz-transform:rotate(360deg);</p> <p style="text-align: left">-ms-transform:rotate(360deg);</p> <p style="text-align: left">-o-transform:rotate(360deg);</p> <p style="text-align: left">transition:all 0.35s;</p> <p style="text-align: left">-webkit-transition:all 0.35s;</p> <p style="text-align: left">-moz-transition:all 0.35s;</p> <p style="text-align: left">-ms-transition:all 0.35s;</p> <p style="text-align: left">-o-transition:all 0.35s</p> <p style="text-align: left">}[/CODE]</p> <p style="text-align: center"></p> <p style="text-align: center">Maintenant, nous allons faire en sorte que ce soit notre <strong><span style="color: #336600">Font Awesome</span></strong> qui face une rotation, car pour le moment, la rotation est inutile.</p> <p style="text-align: center"></p> <p style="text-align: left">[CODE].groupe2:before {</p> <p style="text-align: left"></p> <p style="text-align: left">font-family: "FontAwesome";</p> <p style="text-align: left">content: "\f132";</p> <p style="text-align: left">color: red !important;</p> <p style="text-align: left">padding-right: 4px;</p> <p style="text-align: left">display: inline-block;</p> <p style="text-align: left">}[/CODE]</p> <p style="text-align: center"></p> <p style="text-align: center">Pour modifier la couleur de votre <strong><span style="color: #336600">Font Awesome</span></strong>, vous devrez modifier le <span style="color: #ff0000"><strong>color</strong></span>, pour l'icon c'est le <strong><span style="color: #ff0000">content</span></strong> (<a href="http://fontawesome.io/icons/" target="_blank">liste ici</a>, Unicode à utiliser) et le reste c'est à vous de voir selon vos goût. (Ne pas toucher au font-family par contre <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite375" alt=":trollface:" title="Trollface :trollface:" loading="lazy" data-shortname=":trollface:" />)</p> <p style="text-align: center"></p> <p style="text-align: center">Ce que sa donne pour moi</p> <p style="text-align: center"><img src="http://image.prntscr.com/image/89e9b39b044940409a135dcd92cb6f20.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"></p> <p style="text-align: center">Le fichier styles.css entier</p> <p style="text-align: left">[CODE]/* Administrateur */</p> <p style="text-align: left"></p> <p style="text-align: left">.groupe2 {</p> <p style="text-align: left"> color: red !important</p> <p style="text-align: left">}</p> <p style="text-align: left"></p> <p style="text-align: left">.groupe2:before {</p> <p style="text-align: left">font-family: "FontAwesome";</p> <p style="text-align: left">content: "\f132";</p> <p style="text-align: left">color: red !important;</p> <p style="text-align: left">padding-right: 4px;</p> <p style="text-align: left">display: inline-block;</p> <p style="text-align: left">}</p> <p style="text-align: left"></p> <p style="text-align: left">.groupe2:hover:before{</p> <p style="text-align: left">display:inline-block;</p> <p style="text-align: left">-webkit-transform:rotate(360deg);</p> <p style="text-align: left">-moz-transform:rotate(360deg);</p> <p style="text-align: left">-o-transform:rotate(360deg);</p> <p style="text-align: left">-ms-transform:rotate(360deg);</p> <p style="text-align: left">transform:rotate(360deg);</p> <p style="text-align: left">-webkit-transform:rotate(360deg);</p> <p style="text-align: left">-moz-transform:rotate(360deg);</p> <p style="text-align: left">-ms-transform:rotate(360deg);</p> <p style="text-align: left">-o-transform:rotate(360deg);</p> <p style="text-align: left">transition:all 0.35s;</p> <p style="text-align: left">-webkit-transition:all 0.35s;</p> <p style="text-align: left">-moz-transition:all 0.35s;</p> <p style="text-align: left">-ms-transition:all 0.35s;</p> <p style="text-align: left">-o-transition:all 0.35s</p> <p style="text-align: left">}[/CODE]</p> <p style="text-align: center"></p> <p style="text-align: center">Pour les membres, je propose de leur mettre une simple couleur, pour ma part je vais mettre un bleu clair.</p> <p style="text-align: center"></p> <p style="text-align: left">[CODE]/* Membre */</p> <p style="text-align: left"></p> <p style="text-align: left">.groupe1 {</p> <p style="text-align: left"> color: #2EA8FF !important;</p> <p style="text-align: left">}[/CODE]</p> <p style="text-align: center"></p> <p style="text-align: center">N'hésitez pas à me demander de détailler certaine chose <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" /></p> <p style="text-align: center">Bonne journée/soirée à vous <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" /></p> <p style="text-align: center"></p> <p style="text-align: center">Télécharger le projet: <a href="https://mega.nz/#!FBQg0bCZ!rVeqC306tW6uvYfhiWFnbCW_CxAZDONa84-66fjEcJs" target="_blank">Clique ici</a></p> <p style="text-align: center"></p> <p style="text-align: center"></p></blockquote><p></p>
[QUOTE="Iktus, post: 6864750, member: 334036"] [CENTER][IMG]http://image.prntscr.com/image/f163faa2baf346d2be8678e4e10b9b32.png[/IMG] Bonjour, bonsoir, Partie 1 -> [URL='https://reality-gaming.fr/threads/1-espace-membre-le-design.572110/']Clique ici[/URL] Partie 2 ->[URL='https://reality-gaming.fr/threads/2-espace-membre-connexion-inscription.572159/'] Clique ici[/URL] Dans cette partie nous allons voir comment donner un [B][COLOR=#0080ff]grade[/COLOR][/B] à un utilisateur et un [B][COLOR=#ff0000]rank[/COLOR][/B] spécifique au [B][COLOR=#0080ff]grade[/COLOR][/B]. Nous allons devoir utiliser [B][COLOR=#ff0000]PHP[/COLOR][/B], [B][COLOR=#0080ff]MySQL[/COLOR][/B] et aussi du [COLOR=#b3b300][B]CSS[/B][/COLOR]. Avant de commencer tout ça, nous allons ajouter notre [B][COLOR=#0080ff]nom d'utilisateur[/COLOR][/B] et [B][COLOR=#0080ff]notre avatar[/COLOR][/B] dans notre accueil ainsi qu'une [B][COLOR=#ff8000]redirection[/COLOR][/B] vers la [B][COLOR=#ff8000]page de connexion[/COLOR][/B] si l'utilisateur [B][COLOR=#ff0080]n'est pas connecté [/COLOR][/B]:) Pour commencer, nous allons ajouter un code en PHP pour la redirection[/CENTER] [LEFT][PHP]if(isset($_SESSION['id'])) { }else { header('Location: login'); exit(); }[/PHP][/LEFT] [CENTER] Ce qui doit vous donner[/CENTER] [LEFT][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'); ?>[/PHP][/LEFT] [CENTER] Maintenant nous allons ajouter le [B][COLOR=#0080ff]nom de l'utilisateur connecté[/COLOR][/B] et [B][COLOR=#0080ff]son avatar[/COLOR][/B], donc c'est tout simple, il suffit de faire un [B][COLOR=#0080ff]echo[/COLOR][/B] ou [B][COLOR=#0080ff]print[/COLOR][/B] (identique) avec un $_SESSION et de sélectionner la table voulu. Il faut que la session soit ouverte.[/CENTER] [LEFT][PHP]<?php echo $_SESSION['identifiant']; //Identique à print $_SESSION ?> <?php echo $_SESSION['avatar']; ?>[/PHP][/LEFT] [CENTER] [SPOILER="Exemple"][IMG]http://image.prntscr.com/image/4c99e382e4dd44bf888d0c388408e2d0.png[/IMG] [IMG]http://image.prntscr.com/image/2a902a06bdc64a99aa2df8e9b68633cc.png[/IMG] [/SPOILER] Maintenant que nous avons fais ça, on va modifier la table [COLOR=#0080ff][B]membres[/B][/COLOR] pour y ajouter les colonnes [COLOR=#ff0000][B]rank[/B][/COLOR] et [B][COLOR=#ff0000]grade[/COLOR][/B]. Pour ma part, je vais utiliser [COLOR=#59b300][B]2 grades[/B][/COLOR], [B][COLOR=#0059b3]Membre[/COLOR][/B] et [B][COLOR=#ff0000]Administrateur[/COLOR][/B] Donc nous aurons besoin de 2 ranks. Le [B][COLOR=#660033]rank 1[/COLOR][/B] pour le grade [B][COLOR=#0000b3]Membre [/COLOR][/B]et le [B][COLOR=#660033]rank 2[/COLOR][/B] pour [B][COLOR=#ff0000]Administrateur[/COLOR][/B]. On va modifier le [B][COLOR=#006666]Design[/COLOR][/B] de la table [B][COLOR=#0080ff]membres[/COLOR][/B] [SPOILER="Juste au cas où ..."][IMG]http://image.prntscr.com/image/7e2c98ef87ec4b9da85aa744c378da56.png[/IMG] [/SPOILER] Ensuite nous allons ajouter [B][COLOR=#ff8000]rank[/COLOR][/B] et [B][COLOR=#ff8000]grade[/COLOR][/B] et leurs donner en type [B][COLOR=#5900b3]enum[/COLOR][/B] [SPOILER="Voir ici"][IMG]http://image.prntscr.com/image/d391056a83d940c2ac3c4d60316d3c6f.png[/IMG] [IMG]http://image.prntscr.com/image/23afefffe4f240d0a153b3ce99458ba5.png[/IMG] [/SPOILER] Une fois cela de fait, vous pourrez sélectionner le rank et le grade souhaité [SPOILER="Select"][IMG]http://image.prntscr.com/image/11c0bf5f281a448792edbf8fd9a0c0cd.png[/IMG] [/SPOILER] Une fois ça de fait, on va mettre notre [COLOR=#0080ff]<?php echo $_SESSION['identifiant']; ?>[/COLOR] dans un [B][COLOR=#ff0000]span[/COLOR][/B] Ce qui donne[/CENTER] [CODE]<span><?php echo $_SESSION['identifiant']; ?></span>[/CODE] [CENTER] Maintenant que nous avons ajouté notre [COLOR=#ff0000][B]span[/B][/COLOR], nous allons ajouter dans celui-ci[/CENTER] [CODE]class="groupe<?php echo $_SESSION['rank']; ?>"[/CODE] [CENTER]Ce qui donne[/CENTER] [CODE]<span class="groupe<?php echo $_SESSION['rank']; ?>"><?php echo $_SESSION['identifiant']; ?></span>[/CODE] [CENTER] Nous allons créer un dossier [B][COLOR=#b30000]css[/COLOR][/B] à la [B][COLOR=#0059b3]racine[/COLOR][/B] de notre FTP puis créer un fichier [B][COLOR=#b30059]styles.css [/COLOR][/B] Donc, avant de commencer, nous allons déclarer notre fichier .css. On se rend dans entre les balises <head> et </head> et on rajoute [/CENTER] [LEFT][HTML]<link rel="stylesheet" href="css/styles.css">[/HTML] [/LEFT] [CENTER]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 :troll:)[/CENTER] [LEFT][CODE]/* Administrateur */ .groupe2 { }[/CODE][/LEFT] [CENTER] Dans celui-ci nous allons lui donner une couleur, en rouge important, donc on ajoute[/CENTER] [CODE]color: red !important[/CODE] [CENTER] Ce qui donne[/CENTER] [LEFT][CODE]/* Administrateur */ .groupe2 { color: red !important }[/CODE][/LEFT] [CENTER] Maintenant, notre nom d'utilisateur sera en [B][COLOR=#ff0000]rouge[/COLOR][/B] :) On se rend dans notre fichier [B][COLOR=#0080ff]configuration.php[/COLOR][/B] situé dans le dossier [B][COLOR=#ff0000]includes[/COLOR][/B] et nous rajoutons en dessous des sessions déjà inscrite[/CENTER] [LEFT][PHP]$_SESSION['rank'] = $info['rank']; $_SESSION['grade'] = $info['grade'];[/PHP][/LEFT] [CENTER] Ce qui donne[/CENTER] [LEFT][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']; } } ?>[/PHP][/LEFT] [CENTER] Et nous faisons pareil dans notre fichier [COLOR=#0080ff][B]login.code.php[/B][/COLOR] situé dans le dossier [B][COLOR=#ff0000]php[/COLOR][/B] qui est situé dans le dossier [B][COLOR=#5900b3]includes[/COLOR][/B]. [/CENTER] [LEFT][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'];[/PHP][/LEFT] [CENTER] Maintenant que vous avez mis ça, votre nom d'utilisateur doit s'afficher en [COLOR=#ff0000][B]rouge[/B][/COLOR] :) Principalement, nous utilisons un [B][COLOR=#ff0000]rank[/COLOR][/B] pour limité l'accès à l'administration pour un [B][COLOR=#0080ff]rank[/COLOR][/B] spécifique. Ici, le [B][COLOR=#59b300]grade[/COLOR][/B] servira pour la page de l'équipe ainsi que la page de profil. Le [B][COLOR=#ff0000]rank[/COLOR][/B] servira au [B][COLOR=#ff8000]CSS[/COLOR][/B] ainsi cas limité l'accès à diverse page futur mais sera aussi utilisé pour la page de l'équipe. On va rajouter à notre [B][COLOR=#0080ff]grade[/COLOR][/B] un [B][COLOR=#006633]Font Awesome[/COLOR][/B] faisant une [B][COLOR=#b30059]rotation de 360° [/COLOR][/B] Donc le code si dessous sert à la rotation, donc faites juste un copier/coller :troll:[/CENTER] [LEFT][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 }[/CODE][/LEFT] [CENTER] Maintenant, nous allons faire en sorte que ce soit notre [B][COLOR=#336600]Font Awesome[/COLOR][/B] qui face une rotation, car pour le moment, la rotation est inutile. [/CENTER] [LEFT][CODE].groupe2:before { font-family: "FontAwesome"; content: "\f132"; color: red !important; padding-right: 4px; display: inline-block; }[/CODE][/LEFT] [CENTER] Pour modifier la couleur de votre [B][COLOR=#336600]Font Awesome[/COLOR][/B], vous devrez modifier le [COLOR=#ff0000][B]color[/B][/COLOR], pour l'icon c'est le [B][COLOR=#ff0000]content[/COLOR][/B] ([URL='http://fontawesome.io/icons/']liste ici[/URL], Unicode à utiliser) et le reste c'est à vous de voir selon vos goût. (Ne pas toucher au font-family par contre :troll:) Ce que sa donne pour moi [IMG]http://image.prntscr.com/image/89e9b39b044940409a135dcd92cb6f20.png[/IMG] Le fichier styles.css entier[/CENTER] [LEFT][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 }[/CODE][/LEFT] [CENTER] Pour les membres, je propose de leur mettre une simple couleur, pour ma part je vais mettre un bleu clair. [/CENTER] [LEFT][CODE]/* Membre */ .groupe1 { color: #2EA8FF !important; }[/CODE][/LEFT] [CENTER] N'hésitez pas à me demander de détailler certaine chose :) Bonne journée/soirée à vous :) Télécharger le projet: [URL='https://mega.nz/#!FBQg0bCZ!rVeqC306tW6uvYfhiWFnbCW_CxAZDONa84-66fjEcJs']Clique ici[/URL] [/CENTER] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
Informatique
Développement
#3 Espace membre - Ranks & Grades
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut