Liste des membres - Afficher si un membre est connecté

Hello:)



A la suite de la demande de libre service de Kiki85, voici un petit tutoriel permettant de personnaliser la liste des membres pour afficher si un membre est connecté ou non.

Exemples

A partir d'un même modèle de base, voici différentes manière de styliser. Ce sont des exemples pour montrer qu'on peut faire "un peu ce qu'on veut" :)

Le modèle de base fait par Kiki85 pour son forum "Once Upon A Dream" :

Exemple avec une petite ombre en dessous des membres connectés

Exemple avec un fond différent :

Exemple avec une image rajoutée :

Ce qu'on va faire

Affichage de base de la liste des membres sur phpbb2 :


Quand un membre est en ligne, on va simplement rajouter un petit texte :

Ce que je cherche à faire

Captain Obvious : afficher si un membre est connecté ou non sur la liste des membres.

Ce n'est pas possible via le template memberlist_body, il n'y a pas de variable pour ça, on doit donc trouver une autre méthode.

1 - Récupérer la liste des membres connectés
2 - Pour chacun des membres de cette liste, on modifie notre liste des membres pour montrer que le membre est connecté.

OK donc... Comment je récupère la liste des membres connectés ?

On va récupérer la page "Voir les membres en lignes", par exemple sur Never Utopia l'url est celle ci → https://www.never-utopia.com/viewonline

Comment je fais pour récupérer cette liste des membres connectés dans la page /viewonline ?

Chaque membre connecté sur la page /viewonline a un lien vers son son profil. Même chose sur la page des membres, il y a sur chaque ligne de membre connecté un lien vers son profil. Là si vous êtes intelligent vous dites... BINGO ces liens sont les mêmes. (oui, je tutoie, je vouvoie, je ne fais pas attention )

On va donc récupérer tous les liens de profil sur la page /viewonline, qu'on va mettre dans une boite magique.

Et ensuite, sur notre liste des membres, pour chaque personne de la boite magique, on va rajouter une classe spéciale indiquant que la personne est connectée !

Modifications du template memberlist_body

PA > Affichage > Templates > memberlist_body

Pour pouvoir sélectionner plus facilement les éléments en javascript, on va rajouter des classes à certains éléments.



Le lien du pseudo est ici :

Code:

<a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>

On va ajouter une classe "js-member-link"

Code:

<a class="gen js-member-link" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>

Ensuite, on va rajouter une classe sur le block qui entoure l'affichage d'une ligne entière :
Dans la page liste des membres, pour afficher chaque membre, forumactif répète le code qui se trouve entre :

Code:

<!-- BEGIN memberrow -->

Et ceci :

Code:

<!-- END memberrow -->

Dans le template de base, il y a une balise tr (affichage en tableau).

Code:

<!-- BEGIN memberrow -->
<tr>

On va donc rajouter la classe sur cette balise tr

Code:

<!-- BEGIN memberrow -->
<tr class="js-member-block">

Enfin dernier étape, nous on veut afficher un petit texte "En ligne" sous le pseudo. On pourrait le faire seulement en CSS, mais allons y pour écrire directement dans le HTML !
Juste après le pseudo (que l'on vient de modifier), on va ajouter notre petit texte !

Notre ligne :

Code:

<span class="gen"><a class="gen js-member-link" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></span>

Et on va rajouter notre texte en dessous :

Code:

<span class="gen"><a class="gen js-member-link" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></span>
<div class="text-member-online">(En ligne)</div>


Styliser en CSS

Je vous invite à lire ces 2 tutoriels de Manumanu pour en savoir plus sur les sélecteurs CSS que nous allons utiliser : Principe du CSS : Les sélecteurs (Partie 1 : CSS2) et Principes du CSS - Les sélecteurs (Partie 2 : CSS3).



Pour notre petit texte en ligne on va faire un petit style très simple (plus simple tu meurs) :

Code:

.text-member-online {
    font-size: 10px;
    color: #2ecc71;
}

Le problème c'est qu'actuellement notre texte "En ligne" s'affiche pour tous les membre . On va donc par défaut cacher le texte avec un display: none;

Code:

.text-member-online {
    font-size: 10px;
    color: #2ecc71;
    display: none; /* texte caché de base */
}

Et ensuite, quand un membre est connecté, nous rajouterons en javascript une classe nommée "is-online" sur le block qui entoure notre affichage du membre.
Dans le CSS on peut donc prévoir le coup :

Code:

/* Style que le membre est connecté */
.is-online .text-member-online {
    display: block;
}

C'est à dire "Voici le style de .text-member-online quand il est à l'intérieur de .is-online".

Modifications du template viewonline_body

PA > Affichage > Templates > viewonline_body

Maintenant, on va rajouter une classe en CSS sur le lien vers les profils des membres en ligne. Comme ça, on pourra les récupérer facilement en javascript ensuite !

On repère la ligne qui permet d'afficher le pseudo et le lien vers le profil :

Code:

<td class="{reg_user_row.ROW_CLASS}" width="35%"><span class="gen"><a class="gen" href="{reg_user_row.U_USER_PROFILE}">{reg_user_row.USERNAME}</a></span></td>

On ajoute une classe (js-reg-user) sur le lien !

Code:

<td class="{reg_user_row.ROW_CLASS}" width="35%"><span class="gen"><a class="gen js-reg-user" href="{reg_user_row.U_USER_PROFILE}">{reg_user_row.USERNAME}</a></span></td>

Javascript

Plutôt que de construire le code petit à petit, on va le regarder ensemble pour comprendre ce qu'il fait !

Le code total :

Code:

/*
 * LS NEVER UTOPIA
 * Afficher les membres connectés sur la liste des membres
 * /

/* on regarde si on est sur la page des membres */
if(document.location.pathname == "/memberlist") {
    /* on va sur la page des connectés */
    $.get("/viewonline", function(data){
        var idLink;
        /* on attend que notre propre page soit prête */
        $(function(){
            /* on récupère chaque membre connecté */
            $(".js-reg-user", data).each(function(){
                idLink = $(this).attr("href"); /* on récupère le lien du membre */

                /* on ajoute la classe sur le block autour du membre */
                $(".js-member-link[href='" + idLink + "']").closest(".js-member-block").addClass("is-online");
            });
        });
    });
}

En plus des commentaires, voici quelques éléments mis en avant :

On commence par vérifier sur quelle page on est, pour n'exécuter le code que si on est au bon endroit

Code:

if(document.location.pathname == "/memberlist") { }

document.location.pathname permet d'avoir la partie "chemin" d'une URL.
Ainsi par exemple :

URL	document.location.pathname
https://www.never-utopia.com/search?search_id=newposts	/search
https://www.never-utopia.com/f100-construction-gestion	/f100-construction-gestion
https://www.never-utopia.com/chatbox/index.forum	/chatbox/index.forum
https://www.never-utopia.com/privmsg?folder=inbox	/privmsg

---

Code:

/* on va sur la page des connectés */
$.get("/viewonline", function(data){
  // reste du code
});

Ensuite, on va sur la page /viewonline et on va stocker tout son html dans une variable "data"

---

Code:

$(".js-reg-user", data)

Ceci nous permet de chercher tous les éléments avec la classe "js-reg-user" (celle qu'on avait ajouté ) dans "data". Donc, dans le html de la page /viewonline
On va donc sélectionner tous les utilisateurs connectés :)

Each signifie "pour chaque", ce qui nous amène à ce passage là :

Code:

$(".js-reg-user", data).each(function(){
   // CODE ICI
})

Il signifie "pour tous les liens qui ont la classe js-reg-user dans data (donc dans notre page /viewonline), fait CECI".

Les liens "js-reg-user" sont les personnes connectées donc, puisque qu'ils sont sur la page /viewonline. Pour chaque personne connectée, je vais donc récupérer l'adresse du lien.



Je vais donc écrire ceci :

Code:

$(".js-member-link[href='" + idLink + "']").closest(".js-member-block").addClass("is-online");

Une fois que j'ai sélectionné mon lien, je vais remonter dans le HTML pour trouver la classe ".js-member-block" (notre bloc) et je lui ajoute la classe "is-online"

Aller plus loin

Note : ici on affiche seulement si le membre est connecté, mais on pourrait imaginer de mettre une zone pour afficher dans quelle section du forum il se trouve, en reprenant toujours les données de la même page.

Salut!

C'est merveilleux *o*

Si je peux me permettre (j'ai un peu la flemme de tester), est-ce que cela fonctionnerait sur toutes les versions?
Ou principalement sur PhpBB2 et il faudrait que les gens sachent personnaliser un peu le code pour réussir à le mettre sur une autre version (ce qui est relativement facile vu tes explications, mais je sais que ce sera quand même du chinois pour certains) ?

Après ta réponse cette question, je serais parfaitement d'accord pour déplacer le sujet dans les tutoriels ~

Coucou Onyx !

Merci d'avoir pris le temps de lire. C'est adaptable dans toutes les versions en cherchant un petit peu.

Les variables importantes sont dispo sur tous les templates :)

Dans le template de la liste des membres (memberlist_body)
1/ Trouver le lien qui a comme href cette variable (le lien vers le profil) :

Code:

{memberrow.U_VIEWPROFILE}

2/ Trouver la boucle qui répète chaque membre, et rajouter une classe CSS

Code:

<!-- BEGIN memberrow -->
<!-- END memberrow -->

Dans le template des personnes en ligne (viewonline_body)
3/ Trouver le lien qui a comme href cette variable (le lien vers le profil) :

Code:

{reg_user_row.U_USER_PROFILE}

Du coup merci pour ta question ! Je repasse le tuto en "En cours" histoire de l'améliorer un tout petit peu
En gros, je vais expliquer ce qu'il faut chercher et ensuite mettre sous spoiler notre exemple sous phpbb2

Bonsoir,

J'ai eu envie de tester mais le résultat paraît ainsi et je ne vois pas la différence à moins que comme je suis l'u1 je ne sais pas voir pour moi mais seulement pour les autres membres ? 



Belle soirée,

Ombeline ^^

Coucou :)

On voit du html qui traine (tu l'as entouré en rouge) c'est assez bizarre

Je te conseille d'ouvrir un topic dans "Problème" avec le code avec ton template ainsi que le lien de la liste des membres sur ton forum ^^ (ou bien tu peux le mettre à la suite de ton topic déjà ouvert au pire :p)

Re coucou Nihil

Oui en effet ce n'est pas normal mais je vais encore y retravailler de mon côté voir si je parviens à déceler une éventuelle erreur que j'aurais faite et si je ne trouve pas je suivrai ton conseil en venant exposer mon problème en te remerciant encore une fois ;-)

Coucou Nihil ! Le tuto est marqué en cours, mais est-ce qu'il est fini ? Tiens moi au courant et je classe !

Coucou !

J'ai beaucoup réfléchi et finalement je préfère envoyer ce tutoriel aux archives.
Je le reprendrai peut-être un jour, et dans les cas on peut toujours le trouver grâce à une recherche si quelqu'un "veut vraiment".