Astuce Forumactif Javascript - Informations membres

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 → https://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

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 :



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"

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 est celui ci → https://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 : - https://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:

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

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

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

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.

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

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

Contente que cela puisse aider

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
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:

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" ^^

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:

Merci Onyx

C'est ça , 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)

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

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).

Merci !

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 ^^'

vraiment bien expliqué merci