AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Astuce Forumactif Javascript - Informations membres

    Partagez
    avatar
    Nihil Scar Winspeare
    Messages : 4840

    le Sam 28 Nov 2015 - 23:44



    Hello :)

    Nous allons parler d'informations sur le membre qui regarde la page mises à disposition par Forumactif.

    Vous connaissez peut-être déjà USERNAME et ses copines (vous pouvez voir la liste officielle ici → http://www.never-utopia.com/popup_help.forum?l=miscvars ). On écrit {USERNAME} et ceci est remplacé par le pseudo du membre qui lit (ou bien par "Invité").

    Nous pourrons afficher des informations supplémentaires telles que :
    • si la personnes est connectée
    • son avatar
    • son pseudo
    • son nombre de MP
    • le nombre de message sur le forum
    • ses point de réputation
    • d'autres à voir un peu plus bas Wink


    Ces informations peuvent être affichées sur le forum directement, par exemple avec l'avatar dans la barre de navigation :


    Mais on peut aussi les utiliser pour élaborer d'autres codes, par exemple afficher certaines choses seulement si le membre est connecté / déconnecté, s'il a plus de X messages, etc ^^
    Exemples possibles :
    - Si on a un guide du nouveau, il sera mis en avant sur toutes les pages pour ceux qui ont peu de messages.
    - Mettre en avant un message seulement pour les invités (message, ou bien le contexte "court"/"résumé", ou d'autres choses comme ça qui "prennent de la place" pour les membres)
    - Faire une PA différente pour connecté / non connecté

    Les données



    Au moment où je commence ce tutoriel, voici les données que je peux récupérer :

    • session_logged_in : si le membre connecté ou non
    • username :  pseudo du membre
    • user_id : identifiant de membre
    • user_level : si je suis membre simple (0) / droit de modération quelque part (2) / admin (3)
    • user_lang :  langue
    • activate_toolbar : si la toolbar est activée (1) ou non (0)
    • fix_toolbar : la toolbar fixée ou non
    • notifications : notifications activées ou non
    • avatar :  html de l'image de l'avatar
    • user_posts :   nombre de messages du membre sur le forum
    • user_nb_privmsg : nombre de MP
    • point_reputation : nombre de points de réputation


    Si la toolbar est activée, on peut également récupérer d'autres d'infos, dont le rang de la personne.

    Comment trouver ces données ?



    Ces données sont dans un objet javascript (ne partez paaaas !), si vous voulez connaitre leur valeur vous pouvez les trouver comme ceci :

    - Avec la console du navigateur. Pour en savoir plus, lisez ce topic => Outils de débug par Valtena, surtout la section "la console".
    On fait clic droit, inspecter l'élément. On va aller à l'onglet "Console" et écrire dedans _userdata (puis touche entrée ou cliquer sur Executer)


    Cela vous donnera quelque chose comme ça :
    Code:
    _userdata["session_logged_in"] = 1; // connecté ou non
    _userdata["username"] = "Nihil Scar Winspeare"; // mon pseudo
    _userdata["user_id"] = 7734; // mon identifiant de membre (pour accéder au profil par exemple)
    _userdata["user_level"] = 0; // si je suis membre simple (0) / admin (1) / droit de modération quelque part (2)
    _userdata["user_lang"] = "fr"; // ma langue
    _userdata["activate_toolbar"] = 1; // si la toolbar est activée (1) ou non (0)
    _userdata["fix_toolbar"] = 0; // si j'ai fixée la toolbar ou non
    _userdata["notifications"] = 1; // si j'ai les notifications activées
    _userdata["avatar"] = '<img src="http://nihil.alwaysdata.net" alt="avatar" />'; // le html de l'image de mon avatar
    _userdata["user_posts"] = 1986; // le nombre de messages sur le forum
    _userdata["user_nb_privmsg"] = 506; // le nombre de MP
    _userdata["point_reputation"] = 236; // le nombre de points de réputation

    - Sinon, on peut voir tout ça directement dans le code source. On fait un  clic droit, "afficher le code source", et dedans on cherche "_userdata"


    Si ces données n'apparaissent pas, il se peut qu'une modification de votre template overall_header soit la cause. Vérifiez que la variable {HOSTING_JS} est bien présente.


    Détail & exemples d'utilisation



    J'ai essayé de détailler les variables que j'utilise le plus souvent, ou bien où il y a des petites subtilités à connaitre.

    Connecté ou non ?


    Code:
    _userdata["session_logged_in"] = 1;
    Si le membre est connecté la valeur sera 1, sinon cela sera 0.
    Exemples d'utilisation :
    - masquer un élément si le membre est déconnecté / afficher une zone seulement s'il est connecté, etc...
    - pour les générateurs de présentation / commandes sur une page HTML, re-diriger ailleurs si le membre est déconnecté

    Pseudo


    Code:
    _userdata["username"] = "Nihil Scar Winspeare";
    Connecté : Pseudo du membre.
    Déconnecté : Anonymous

    Code:
    _userdata["user_id"] = 7734;
    Connecté : Identifiant de l'utilisateur. L'id (identifiant) permet par exemple d'accéder au profil de l'utilisateur. Je suis 7734, donc le lien es celui ci → http://www.never-utopia.com/u7734
    Déconnecté : la valeur est -1

    Autorisations


    Code:
    _userdata["user_level"] = 0;
    0 = simple membre ou déconnecté
    1 = admin
    2 = droits de modération quelque part
    /!\ Pour ce point là, on lit tout et son contraire, je vous conseille donc de faire quelques tests pour être absolument sûrs. Surtout qu'il existe d'autres façons de vérifier si une personne est modo / admin ^^

    Avatar


    Code:
    _userdata["avatar"] = '<img src="http://nihil.alwaysdata.net" alt="avatar" />';
    Dans tous les cas cela sera une balise image html.
    Si connecté : avatar du membre
    Si connecté et pas d'avatar : avatar par défaut dans le Panneau d'Admin
    Si déconnecté : avatar par défaut dans le Panneau d'Admin
    Exemple utilisation : - http://www.never-utopia.com/t56172-rajouter-l-avatar-de-l-utilisateur

    Réputation


    Code:
    _userdata["point_reputation"] = 236;
    Les points de réputation (Le système de réputation (Evaluation des posts + le bouton Merci))

    Rang


    /!\ Il faut que la toolbar soit activée
    Code:
    _lang["rank_title"] = "V.I.P.";
    Si connecté : le rang de la personne (Les rangs)
    Si déconnecté : vide
    Exemple :
    - Beaucoup de forum de RP utilisent les rangs pour les groupes. On pourrait par exemple changer le thème (ou juste certains petits éléments), ou encore rajouter un lien rapide vers le quartier général d'un groupe, etc)


    Comment les utiliser ?


    Certaines variables peuvent s'utiliser telle quelle en mettant leurs valeurs, d'autres permettent de faire des tests afin de faire un code différent en fonction de leur valeur.

    Par exemple :
    Code:
    if (_userdata.session_logged_in == 1) {
        /* code si connecté */
    }

    Spoiler:
    Le code peut se simplifier comme ça car 1 = vrai :
    Code:
    if (_userdata.session_logged_in) {
        /* code si connecté */
    }

    Pouvoir les utiliser comme on utilise {USERNAME}



    On peut rajouter ce javascript sur toutes les pages :
    PA > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript.
    Code:
    $(function(){
        $.each(_userdata, function(key, value){
            $(".js-" + key).html(value);
        });
    });

    Si je veux afficher seulement les MP, dans mon HTML je peux faire comme ceci par exemple :
    Code:
    Mes MP : <span class="js-user_nb_privmsg"></span>

    Le code va insérer la valeur à l'intérieur de la balise span, pour insérer la bonne valeur :
    Code:
    Mes MP : <span class="js-user_nb_privmsg">155</span>

    Voici un exemple avec plus de html :
    Code:
    Utilisateur connecté ? <span class="js-session_logged_in"></span><br/>
    Pseudo : <span class="js-username"></span><br/>
    Id : <span class="js-user_id"></span><br/>
    Image de l'avatar : <span class="js-avatar"></span><br/>
    Nombre de messages : <span class="js-user_posts"></span><br/>
    Nombre de messages privés <span class="js-user_nb_privmsg"></span><br/>
    Nombre de points de réputation <span class="js-point_reputation"></span><br/>

    Et grâce au javascript, le contenu des span sera changé comme ceci :
    Code:
    Utilisateur connecté ? <span class="js-session_logged_in">1</span><br>
    Pseudo : <span class="js-username">Nihil Scar Winspeare</span><br>
    Image de l'avatar : <span class="js-avatar"><img src="http://img15.hostingpics.net/pics/602962nihiloffline.png" alt=""></span><br>
    Nombre de messages : <span class="js-user_posts">1991</span><br>
    Nombre de messages privés <span class="js-user_nb_privmsg">506</span><br>
    Nombre de points de réputation <span class="js-point_reputation">237</span><br>

    Un exemple avec toutes les variables :

    Précicison → si vous utilisiez précédemment ce tuto, vous pouvez l'enlever. En effet, le code fourni ici est plus complet. :)

    Merci ♥


    Dernière édition par Nihil Scar Winspeare le Dim 12 Mar 2017 - 15:40, édité 4 fois
    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Mar 19 Juil 2016 - 0:17

    C'était très utile, même incomplet ! Very Happy Merci tout plein c'est parfait de parfait ♥



    Alumine
    avatar
    Cheshire Cat
    FémininAge : 20Messages : 873

    le Sam 27 Aoû 2016 - 4:29

    C'est bien utile tout ça, c'est dommage qu'on puisse pas avoir accès à l'avatar du dernier inscrit cependant :hum:



    avatar
    Onyx
    FémininAge : 24Messages : 3050

    le Sam 27 Aoû 2016 - 8:03

    J'aime *o*

    Justement, j'avais été espionner la barre de navigation de NU pour savoir comment Okh avait réussi à récupérer le nombre de MP et j'avais réussi à reproduire l'effet sans trop le comprendre, mais là je sais enfin d'où ça vient *o* Et c'est nettement plus beau que ce que j'avais fait XD

    Sinon, j'ai essayé d'aller voir dans la console, mais cela ne m'affichait que des erreurs... Va savoir u_u

    Oh, et vu que c'est un tuto et que c'est cool d'apprendre, est-ce que tu va rajouter quelques explications sur comment fonctionne le javascript? *hope*

    Cheshire : Les informations accessibles avec ça sont celles de l'utilisateur qui parcoure le forum alors automatiquement l'avatar du dernier inscrit n'y est pas. Par contre, si tu voulais vraiment aller le chercher, tu pourrais te servir de la variable du dernier inscrit dans le Qeel pour récupérer l'id de l'utilisateur et ensuite aller sur la page du membre pour prendre son avatar.



    avatar
    Cheshire Cat
    FémininAge : 20Messages : 873

    le Mer 14 Sep 2016 - 0:40

    C'est encore moi o/
    En suivant ton petit tutoriel, j'ai remarqué qu'utiliser le gestionnaire de scripts dans les modules engendrait des bugs, comme le fait que le script ne s'affiche pas si on coche "Afficher sur toutes les pages" et qu'il s'affiche seulement si tu coches que les autres cases o/

    Du coup, comme j'ai utilisé ton tutoriel pour une barre de navigation, j'ai préféré mettre le script directement dans la template, juste avant le HTML o/

    Voilà, petite remarque pour éviter des bugs chez les membres Wink

    EDIT: En fait le bug est parti tout seul en voulant le re-créer.
    Voilà ;_;



    avatar
    Nihil Scar Winspeare
    Messages : 4840

    le Dim 18 Sep 2016 - 18:50

    Contente que cela puisse aider :hudada:

    Pour l'instant c'est juste totalement totalement totalement en pause. J'ai plein d'idées... non rédigées 8D
    Je me dis qu'en fait ça serait plus simple de faire un "tuto mère" (comme une vaisseau mère 8D), qui explique le concept général. Et ensuite des petits tutos / sous parties pour voir des exemples d'utilisation de chaque :hum:
    Exemples vite fait :
    - mettre en avant un message seulement pour les invités (message, ou bien le contexte "court"/"résumé", ou d'autres choses comme ça qui "prennent de la place" pour les membres)
    - ajouter un truc juste pour les membres qui ont moins d'X messages. Typiquement, si on a un guide du nouveau, il sera mis en avant sur toutes les pages par exemple, pour ceux qui ont peu de messages

    @Onyx a écrit:Oh, et vu que c'est un tuto et que c'est cool d'apprendre, est-ce que tu va rajouter quelques explications sur comment fonctionne le javascript? *hope*
    Est ce que tu as des idées de truc cool à voir pour ça ? o:
    avatar
    Nihil Scar Winspeare
    Messages : 4840

    le Dim 12 Mar 2017 - 16:07

    Hello !

    Je up juste pour dire que j'ai enfin bouclé ce tuto. Je pense que c'est une bonne introduction pour découvrir que ça existe et ensuite chercher comment faire certaines choses. ^^

    D'ailleurs, je viens de songer à une petite chose, plus tard ça pourra peut-être aller dans le cursus codage, si on fait une section "Javascript & Forumactif" ^^
    avatar
    Onyx
    FémininAge : 24Messages : 3050

    le Sam 25 Mar 2017 - 18:31

    Bouh!

    Tout est bon pour moi et je trouve cela merveilleux, donc je vais le déplacer dans les tutoriels ^^

    Sinon, pour l'explication, voilà si je ne suis pas totalement dans le faux :
    Spoiler:

    Le code complet du js :
    Code:
    $(function(){
        $.each(_userdata, function(key, value){
            $(".js-" + key).html(value);
        });
    });

    Ce bout de code sert à attendre que la page ait chargé les éléments de la page avant d'appliquer le reste du js :
    Code:
    $(function(){
      Machins à l'intérieurs;
    });

    Cette partie indique que pour chaque ligne d'information dans "user data", on va utiliser une fonction où la première partie s'appellera "key" (comme "user_nb_privmsg") et la deuxième partie s'appellera "value" (comme "nombre de MP"), ce qui nous permettra de les utiliser plus tard :
    Code:
        $.each(_userdata, function(key, value){
            TRUCS À l'INTÉRIEURS;
        });

    Enfin, on sélectionne tous les éléments qui ont une class qui commence par "js-" et est suivie d'une des premières parties de _userdata (bref, le "key" qu'on a nommé tout à l'heure, comme "user_nb_privmsg") et on lui donne un html "value", soit la deuxième partie de userdata qui correspond à la "key" dans la class (comme "nombre de MP") :
    Code:
            $(".js-" + key).html(value);

    En tout cas, c'est comme ça que je le comprends, je suis peut-être à côté de la plaque XD

    J'avoue que ce que j'ai de la misère à comprendre un peu, c'est comment les fonctions où on met quelque chose à l'intérieur des () à la place de simplement faire .machin(function(){contenu}); comme je suis habituée de voir.
    J'ai essayé de lire quelques trucs sur ça, mais ils utilisent toujours des termes qui ne me disent rien (j'ai probablement skippée une notion que j'étais supposée connaître avant, ce qui est très possible).



    avatar
    Nihil Scar Winspeare
    Messages : 4840

    le Ven 31 Mar 2017 - 23:42

    Merci Onyx :hug:

    C'est ça :yay: , tu as bien compris le principe !

    Pour ce que tu as du mal à comprendre, éventuellement si tu as 2 exemples qui te posent problème hésite pas à poster dans Problème avec mon code, ça sera peut-être plus facile à expliquer avec un exemple "concret" ^^

    @Onyx a écrit:Ce bout de code sert à attendre que la page ait chargé les éléments de la page avant d'appliquer le reste du js :
    Juste pour préciser sur cette partie là, micro précision, il attend que le HTML soit prêt, mais pas forcément que les éléments soient chargés. Enfin, en gros, il n'attendra pas qu'une image soit téléchargée, mais que la page soit prête à être manipulée. Bon c'était une toute petite nuance et pas importante par rapport à la partie importante, je le précisais juste en plus (d'ailleurs tu le sais peut-être déjà, je ne sais pas, j'étais pas totalement sûre... enfin voilà, c'est juste un petit "mini-truc" du jour) :hudada:
    avatar
    Egyfu
    FémininAge : 24Messages : 46

    le Ven 21 Avr 2017 - 21:10

    Bonjour, juste pour savoir s'il y a une balise pour afficher les points de réput des groupes par hasard s'il vous plaît ? :o
    avatar
    Onyx
    FémininAge : 24Messages : 3050

    le Ven 21 Avr 2017 - 23:30

    Salut!

    Si tu lis au complet, Nihil a indiqué ceci dans les _userdata disponibles :
    Code:
    _userdata["point_reputation"] = 236; // le nombre de points de réputation

    Donc oui on peut sortie les points de réputation de la personne qui visite le forum (ce qu'est l'utilité de _userdata).

    Par contre, pour sortir les points de réputation d'un "groupe", il faudrait aller voir les points de chaque utilisateur d'un même groupe et les additionner, ce que _userdata ne permet pas puisqu'il indique seulement les informations de la personne qui visite le forum (et uniquement elle).



    avatar
    SpicAsh
    FémininAge : 21Messages : 159

    le Mar 25 Avr 2017 - 20:07

    Merci !
    avatar
    Gandor666
    MasculinAge : 27Messages : 6

    le Mer 29 Nov 2017 - 21:10

    Je suis nouveau et j'ai un peu de mal avec tous ce qui est javascript etc... J'ai bien lu le topic et ma question est simple : comment mettre le nom de l'utilisateur de la couleur de son Groupe dans la barre de navigation en dessous de son avatar !
    Merci d'avance ^^'
    Contenu sponsorisé


      La date/heure actuelle est Dim 17 Déc 2017 - 5:21