Le Deal du moment : -22%
REALME 8 5G 64 Go à prix cassé
Voir le deal
179 €

Aller en bas
Pêpêche
Pêpêche
Mascotte
Messages : 4528

Afficher les stats' du mois en cours Empty Afficher les stats' du mois en cours

Mer 12 Juin 2019 - 14:22

Toutes versions

Afficher les stats' du mois en cours

Bonjour bonjour,

Dans ce tutoriel nous allons apprendre à faire ceci :
Afficher les stats' du mois en cours Bloc-s10
c'est-à-dire à afficher le nombre d'inscrits, de sujets et de messages depuis le début du mois (pas ceux au total sur le forum, mais seulement les statistiques depuis le 1er du mois).

Exclamation Pré-requis :
• Cette information ne sera visible que par les membres (les visiteurs ne peuvent pas accéder aux statistiques) ;
• Tu dois avoir accès au panneau administration ;
• Des connaissances de bases en HTML & CSS sont un plus ;
• Tu ne dois pas être effrayé par le javascript.

Idea Ce tutoriel fonctionne sur toutes les versions de forum.

Mise en place

Pour commencer nous allons avoir besoin des statistique du forum, c'est-à-dire cette page http://urlDeTonForum/statistics (exemple sur La Tambouille : clic)).

Pour cela nous allons "activer" cette fonctionnalité en allant dans Panneau d'Administration > Général > Statistiques > Statistiques du forum > Qui est autorisé à voir les statistiques en ligne ? : utilisateurs enregistrés.

Voila, maintenant les membres ont accès aux stats' complètes du forum.

Une petite ligne de CSS

Pour faire en sorte que nos blocs ne s'affichent pas quand il ne devrait pas, on va ajouter dans la CSS :
Code:
.d-none{display: none;}

Et, par défaut, nous mettrons cette classe sur nos blocs.

Idea Pour ajouter de la CSS, il te suffit d'aller dans : Panneau d'Administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS. N'oublie pas de sauvegarder.

Du javascript pour récupérer ce qui nous intéresse

Voici le code javascript qui fait le job. Celui-ci est différent en fonction de la version de ton forum.

Chacun d'eux est commenté pour que tu puisses suivre et comprendre ce que l'on fait.

PhpBB2

Code:
;$(function(){
  // On laisse le temps à la page de bien se charger
  setTimeout( function(){
    // On test si le bloc qui est censé récupérer les dernières infos existe
    // et si le membre est connecté (on se base sur le lien d'édition de profil)
    if( $('[data-blk-infos="last-stats"]').length && $('#i_icon_mini_profile').length ){

      // On récupére les tableaux de la page statistiques
      $('[data-blk-infos="last-stats"]').load('/statistics .three-col .forumline', function(){

        // On crée un compteur qui va nous servir pour repérer le bon tableau
        var cpt = 0,
        nbSjt = nbMsg = nbInscrits = "" ;

        // On parcourt chaque tableau de statistiques
        $('[data-blk-infos="last-stats"] .forumline').each( function(){
          // En js, on commence à compter à partir de 0
          // Survol des statistiques = 0
          // Statistiques globales du forum = 1
          // Sujets les plus actifs = 2
          // Sujets les plus vus = 3
          // CEUX QUI COMMENCENT LE PLUS DE SUJETS = 4
          // LES POSTEURS LES PLUS ACTIFS DE LA SEMAINE = 5
          // LES POSTEURS LES PLUS ACTIFS DU MOIS = 6
          // MEILLEURS POSTEURS = 7
          // NOMBRE DE SUJETS DES 12 DERNIERS MOIS = 8
          // NOMBRE DE MESSAGES DES 12 DERNIERS MOIS = 9
          // NOMBRE D'INSCRIPTIONS DES 12 DERNIERS MOIS = 10

          // Si on est sur le nombre de sujets
          // on récupère le texte qui se trouve dans le .gen qui est dans le td de la dernière ligne du tableau
          // - 1 car on veut la dernière ligne (= celle du mois en cours)
          if(cpt == 8){
            nbSjt = $( $( $(this).find('tr')[ $(this).find('tr').length - 1] ).find('td .gen')[1] ).text();
          }

          // Si on est sur le nombre de messages
          // on récupère le texte qui se trouve dans le .gen qui est dans le td de la dernière ligne du tableau
          // - 1 car on veut la dernière ligne (= celle du mois en cours)
          if(cpt == 9){
            nbMsg = $( $( $(this).find('tr')[ $(this).find('tr').length - 1] ).find('td .gen')[1] ).text();
          }

          // si on est sur le nombre d'inscrits
           // on récupère le texte qui se trouve dans le .gen qui est dans le td de la dernière ligne du tableau
          // - 1 car on veut la dernière ligne (= celle du mois en cours)
          if(cpt == 10){
            nbInscrits = $( $( $(this).find('tr')[ $(this).find('tr').length - 1] ).find('td .gen')[1] ).text();
          }

          // On augmente de 1 le compteur pour tester le tableau suivant
          cpt ++;
        });

        // Si il y a plus d'un nouveau sujet, on met au pluriel
        if(nbSjt * 1 > 1){
          nbSjt = ''+ nbSjt +' sujets';
        }else{
          // Sinon, on met au singulier
          nbSjt = ''+ nbSjt +' sujet';
        }

         // Si il y a plus d'un nouveau message, on met au pluriel
        if(nbMsg * 1 > 1){
          nbMsg = ''+ nbMsg +' messages';
        }else{
          // Sinon, on met au singulier
          nbMsg = ''+ nbMsg +' message';
        }

        // Si il y a plus d'un nouvel inscrit, on met au pluriel
        if(nbInscrits * 1 > 1){
          nbInscrits = ''+ nbInscrits +' membres';
        }else{
          // Sinon, on met au singulier
          nbInscrits = ''+ nbInscrits +' membre';
        }

        // On va remplir les infos sur notre page
        setTimeout( function(){
          $('[data-info="stats"] .nb-inscrits').append(nbInscrits);
          $('[data-info="stats"] .nb-msg').append(nbMsg);
           $('[data-info="stats"] .nb-sjt').append(nbSjt);

           // Une fois que tout est bon, on affiche le bloc
           $('[data-info="stats"]').removeClass('d-none');
        }, 100);

      });
    }
  }, 500);
});

PunBB

Code:
;$(function(){
  // On laisse le temps à la page de bien se charger
  setTimeout( function(){
    // On test si le bloc qui est censé récupérer les dernières infos existe
    // et si le membre est connecté (on se base sur le lien d'édition de profil)
    if( $('[data-blk-infos="last-stats"]').length && $('#i_icon_mini_profile').length ){

      // On récupére les tableaux de la page statistiques
      $('[data-blk-infos="last-stats"]').load('/statistics .table', function(){
        // On crée un compteur qui va nous servir pour repérer le bon tableau
        var cpt = 0,
        nbSjt = nbMsg = nbInscrits = "" ;

        // On parcourt chaque tableau de statistiques
        $('[data-blk-infos="last-stats"] .table').each( function(){
          // En js, on commence à compter à partir de 0
          // Survol des statistiques = 0
          // Statistiques globales du forum = 1
          // Sujets les plus actifs = 2
          // Sujets les plus vus = 3
          // CEUX QUI COMMENCENT LE PLUS DE SUJETS = 4
          // LES POSTEURS LES PLUS ACTIFS DE LA SEMAINE = 5
          // LES POSTEURS LES PLUS ACTIFS DU MOIS = 6
          // MEILLEURS POSTEURS = 7
          // NOMBRE DE SUJETS DES 12 DERNIERS MOIS = 8
          // NOMBRE DE MESSAGES DES 12 DERNIERS MOIS = 9
          // NOMBRE D'INSCRIPTIONS DES 12 DERNIERS MOIS = 10

          // Si on est sur le nombre de sujets
          // on récupère le texte qui se trouve dans le premier td qui a la class tc2 de la dernière ligne du tableau
          // - 1 car on veut la dernière ligne (= celle du mois en cours)
          if(cpt == 8){
            nbSjt = $( $( $(this).find('tr')[ $(this).find('tr').length - 1] ).find('td.tc2')[0]).text();
          }

          // Si on est sur le nombre de messages
          // on récupère le texte qui se trouve dans le premier td qui a la class tc2 de la dernière ligne du tableau
          // - 1 car on veut la dernière ligne (= celle du mois en cours)
          if(cpt == 9){
            nbMsg = $( $( $(this).find('tr')[ $(this).find('tr').length - 1] ).find('td.tc2')[0]).text();
          }

          // si on est sur le nombre d'inscrits
          // on récupère le texte qui se trouve dans le premier td qui a la class tc2 de la dernière ligne du tableau
          // - 1 car on veut la dernière ligne (= celle du mois en cours)
          if(cpt == 10){
            nbInscrits = $( $( $(this).find('tr')[ $(this).find('tr').length - 1] ).find('td.tc2')[0]).text();
          }

          // On augmente de 1 le compteur pour tester le tableau suivant
          cpt ++;
        });

        // Si il y a plus d'un nouveau sujet, on met au pluriel
        if(nbSjt * 1 > 1){
          nbSjt = ''+ nbSjt +' sujets';
        }else{
          // Sinon, on met au singulier
          nbSjt = ''+ nbSjt +' sujet';
        }

         // Si il y a plus d'un nouveau message, on met au pluriel
        if(nbMsg * 1 > 1){
          nbMsg = ''+ nbMsg +' messages';
        }else{
          // Sinon, on met au singulier
          nbMsg = ''+ nbMsg +' message';
        }

        // Si il y a plus d'un nouvel inscrit, on met au pluriel
        if(nbInscrits * 1 > 1){
          nbInscrits = ''+ nbInscrits +' membres';
        }else{
          // Sinon, on met au singulier
          nbInscrits = ''+ nbInscrits +' membre';
        }

        // On va remplir les infos sur notre page
        setTimeout( function(){
          $('[data-info="stats"] .nb-inscrits').append(nbInscrits);
          $('[data-info="stats"] .nb-msg').append(nbMsg);
           $('[data-info="stats"] .nb-sjt').append(nbSjt);

           // Une fois que tout est bon, on affiche le bloc
           $('[data-info="stats"]').removeClass('d-none');
        }, 100);

      });
    }
  }, 500);
});

Invision

Code:
;$(function(){
  // On laisse le temps à la page de bien se charger
  setTimeout( function(){
    // On test si le bloc qui est censé récupérer les dernières infos existe
    // et si le membre est connecté (on se base sur le lien d'édition de profil)
    if( $('[data-blk-infos="last-stats"]').length && $('#i_icon_mini_profile').length ){

      // On récupére les tableaux de la page statistiques
      $('[data-blk-infos="last-stats"]').load('/statistics .ipbtable', function(){
        // On crée un compteur qui va nous servir pour repérer le bon tableau
        var cpt = 0,
        nbSjt = nbMsg = nbInscrits = "" ;

        // On parcourt chaque tableau de statistiques
        $('[data-blk-infos="last-stats"] .ipbtable').each( function(){
          // En js, on commence à compter à partir de 0
          // Survol des statistiques = 0
          // Statistiques globales du forum = 1
          // Sujets les plus actifs = 2
          // Sujets les plus vus = 3
          // CEUX QUI COMMENCENT LE PLUS DE SUJETS = 4
          // LES POSTEURS LES PLUS ACTIFS DE LA SEMAINE = 5
          // LES POSTEURS LES PLUS ACTIFS DU MOIS = 6
          // MEILLEURS POSTEURS = 7
          // NOMBRE DE SUJETS DES 12 DERNIERS MOIS = 8
          // NOMBRE DE MESSAGES DES 12 DERNIERS MOIS = 9
          // NOMBRE D'INSCRIPTIONS DES 12 DERNIERS MOIS = 10

          // Si on est sur le nombre de sujets
          // on récupère le texte qui se trouve dans le 2e td de la dernière ligne du tableau
          // - 1 car on veut la dernière ligne (= celle du mois en cours)
          if(cpt == 8){
            nbSjt = $( $( $(this).find('tr')[ $(this).find('tr').length - 1] ).find('td.row2')[1]).text();
          }

          // Si on est sur le nombre de messages
          // on récupère le texte qui se trouve dans le 2e td de la dernière ligne du tableau
          // - 1 car on veut la dernière ligne (= celle du mois en cours)
          if(cpt == 9){
            nbMsg = $( $( $(this).find('tr')[ $(this).find('tr').length - 1] ).find('td.row2')[1]).text();
          }

          // si on est sur le nombre d'inscrits
          // on récupère le texte qui se trouve dans le 2e td de la dernière ligne du tableau
          // - 1 car on veut la dernière ligne (= celle du mois en cours)
          if(cpt == 10){
            nbInscrits = $( $( $(this).find('tr')[ $(this).find('tr').length - 1] ).find('td.row2')[1]).text();
          }

          // On augmente de 1 le compteur pour tester le tableau suivant
          cpt ++;
        });

        // Si il y a plus d'un nouveau sujet, on met au pluriel
        if(nbSjt * 1 > 1){
          nbSjt = ''+ nbSjt +' sujets';
        }else{
          // Sinon, on met au singulier
          nbSjt = ''+ nbSjt +' sujet';
        }

         // Si il y a plus d'un nouveau message, on met au pluriel
        if(nbMsg * 1 > 1){
          nbMsg = ''+ nbMsg +' messages';
        }else{
          // Sinon, on met au singulier
          nbMsg = ''+ nbMsg +' message';
        }

        // Si il y a plus d'un nouvel inscrit, on met au pluriel
        if(nbInscrits * 1 > 1){
          nbInscrits = ''+ nbInscrits +' membres';
        }else{
          // Sinon, on met au singulier
          nbInscrits = ''+ nbInscrits +' membre';
        }

        // On va remplir les infos sur notre page
        setTimeout( function(){
          $('[data-info="stats"] .nb-inscrits').append(nbInscrits);
          $('[data-info="stats"] .nb-msg').append(nbMsg);
           $('[data-info="stats"] .nb-sjt').append(nbSjt);

           // Une fois que tout est bon, on affiche le bloc
           $('[data-info="stats"]').removeClass('d-none');
        }, 100);

      });
    }
  }, 500);
});

PhpBB3, ModernBB

Code:
;$(function(){
  // On laisse le temps à la page de bien se charger
  setTimeout( function(){
    // On test si le bloc qui est censé récupérer les dernières infos existe
    // et si le membre est connecté (on se base sur le lien d'édition de profil)
    if( $('[data-blk-infos="last-stats"]').length && $('#i_icon_mini_profile').length ){

      // On récupére les tableaux de la page statistiques
      $('[data-blk-infos="last-stats"]').load('/statistics .forumline.bars', function(){
        // On crée un compteur qui va nous servir pour repérer le bon tableau
        var cpt = 0,
        nbSjt = nbMsg = nbInscrits = "" ;

        // On parcourt chaque tableau de statistiques
        $('[data-blk-infos="last-stats"] .forumline.bars').each( function(){
          // En js, on commence à compter à partir de 0
          // CEUX QUI COMMENCENT LE PLUS DE SUJETS = 0
          // LES POSTEURS LES PLUS ACTIFS DE LA SEMAINE = 1
          // LES POSTEURS LES PLUS ACTIFS DU MOIS = 2
          // MEILLEURS POSTEURS = 3
          // NOMBRE DE SUJETS DES 12 DERNIERS MOIS = 4
          // NOMBRE DE MESSAGES DES 12 DERNIERS MOIS = 5
          // NOMBRE D'INSCRIPTIONS DES 12 DERNIERS MOIS = 6

          // Si on est sur le nombre de sujets
          // on récupère le texte qui se trouve dans le .gen qui est dans le td de la dernière ligne du tableau
          // - 1 car on veut la dernière ligne (= celle du mois en cours)
          if(cpt == 4){
            nbSjt = $( $( $(this).find('tr')[ $(this).find('tr').length - 1] ).find('td .gen')[1] ).text();
          }

          // Si on est sur le nombre de messages
          // on récupère le texte qui se trouve dans le .gen qui est dans le td de la dernière ligne du tableau
          // - 1 car on veut la dernière ligne (= celle du mois en cours)
          if(cpt == 5){
            nbMsg = $( $( $(this).find('tr')[ $(this).find('tr').length - 1] ).find('td .gen')[1] ).text();
          }

          // si on est sur le nombre d'inscrits
           // on récupère le texte qui se trouve dans le .gen qui est dans le td de la dernière ligne du tableau
          // - 1 car on veut la dernière ligne (= celle du mois en cours)
          if(cpt == 6){
            nbInscrits = $( $( $(this).find('tr')[ $(this).find('tr').length - 1] ).find('td .gen')[1] ).text();
          }

          // On augmente de 1 le compteur pour tester le tableau suivant
          cpt ++;
        });

        // Si il y a plus d'un nouveau sujet, on met au pluriel
        if(nbSjt * 1 > 1){
          nbSjt = ''+ nbSjt +' sujets';
        }else{
          // Sinon, on met au singulier
          nbSjt = ''+ nbSjt +' sujet';
        }

         // Si il y a plus d'un nouveau message, on met au pluriel
        if(nbMsg * 1 > 1){
          nbMsg = ''+ nbMsg +' messages';
        }else{
          // Sinon, on met au singulier
          nbMsg = ''+ nbMsg +' message';
        }

        // Si il y a plus d'un nouvel inscrit, on met au pluriel
        if(nbInscrits * 1 > 1){
          nbInscrits = ''+ nbInscrits +' membres';
        }else{
          // Sinon, on met au singulier
          nbInscrits = ''+ nbInscrits +' membre';
        }

        // On va remplir les infos sur notre page
        setTimeout( function(){
          $('[data-info="stats"] .nb-inscrits').append(nbInscrits);
          $('[data-info="stats"] .nb-msg').append(nbMsg);
           $('[data-info="stats"] .nb-sjt').append(nbSjt);

           // Une fois que tout est bon, on affiche le bloc
           $('[data-info="stats"]').removeClass('d-none');
        }, 100);

      });
    }
  }, 500);
});

AwesomeBB

Code:
;$(function(){
  // On laisse le temps à la page de bien se charger
  setTimeout( function(){
    // On test si le bloc qui est censé récupérer les dernières infos existe
    // et si le membre est connecté (on se base sur le lien d'édition de profil)
    if( $('[data-blk-infos="last-stats"]').length && $('#header-user').length ){

      // On récupére les tableaux de la page statistiques
      $('[data-blk-infos="last-stats"]').load('/statistics .forumline.bars', function(){
        // On crée un compteur qui va nous servir pour repérer le bon tableau
        var cpt = 0,
        nbSjt = nbMsg = nbInscrits = "" ;

        // On parcourt chaque tableau de statistiques
        $('[data-blk-infos="last-stats"] .forumline.bars').each( function(){
          // En js, on commence à compter à partir de 0
          // CEUX QUI COMMENCENT LE PLUS DE SUJETS = 0
          // LES POSTEURS LES PLUS ACTIFS DE LA SEMAINE = 1
          // LES POSTEURS LES PLUS ACTIFS DU MOIS = 2
          // MEILLEURS POSTEURS = 3
          // NOMBRE DE SUJETS DES 12 DERNIERS MOIS = 4
          // NOMBRE DE MESSAGES DES 12 DERNIERS MOIS = 5
          // NOMBRE D'INSCRIPTIONS DES 12 DERNIERS MOIS = 6

          // Si on est sur le nombre de sujets
          // on récupère le texte qui se trouve dans le .gen qui est dans le td de la dernière ligne du tableau
          // - 1 car on veut la dernière ligne (= celle du mois en cours)
          if(cpt == 4){
            nbSjt = $( $( $(this).find('tr')[ $(this).find('tr').length - 1] ).find('td .gen')[1] ).text();
          }

          // Si on est sur le nombre de messages
          // on récupère le texte qui se trouve dans le .gen qui est dans le td de la dernière ligne du tableau
          // - 1 car on veut la dernière ligne (= celle du mois en cours)
          if(cpt == 5){
            nbMsg = $( $( $(this).find('tr')[ $(this).find('tr').length - 1] ).find('td .gen')[1] ).text();
          }

          // si on est sur le nombre d'inscrits
           // on récupère le texte qui se trouve dans le .gen qui est dans le td de la dernière ligne du tableau
          // - 1 car on veut la dernière ligne (= celle du mois en cours)
          if(cpt == 6){
            nbInscrits = $( $( $(this).find('tr')[ $(this).find('tr').length - 1] ).find('td .gen')[1] ).text();
          }

          // On augmente de 1 le compteur pour tester le tableau suivant
          cpt ++;
        });

        // Si il y a plus d'un nouveau sujet, on met au pluriel
        if(nbSjt * 1 > 1){
          nbSjt = ''+ nbSjt +' sujets';
        }else{
          // Sinon, on met au singulier
          nbSjt = ''+ nbSjt +' sujet';
        }

         // Si il y a plus d'un nouveau message, on met au pluriel
        if(nbMsg * 1 > 1){
          nbMsg = ''+ nbMsg +' messages';
        }else{
          // Sinon, on met au singulier
          nbMsg = ''+ nbMsg +' message';
        }

        // Si il y a plus d'un nouvel inscrit, on met au pluriel
        if(nbInscrits * 1 > 1){
          nbInscrits = ''+ nbInscrits +' membres';
        }else{
          // Sinon, on met au singulier
          nbInscrits = ''+ nbInscrits +' membre';
        }

        // On va remplir les infos sur notre page
        setTimeout( function(){
          $('[data-info="stats"] .nb-inscrits').append(nbInscrits);
          $('[data-info="stats"] .nb-msg').append(nbMsg);
           $('[data-info="stats"] .nb-sjt').append(nbSjt);

           // Une fois que tout est bon, on affiche le bloc
           $('[data-info="stats"]').removeClass('d-none');
        }, 100);

      });
    }
  }, 500);
});

Idea Pour ajouter un javascript, on va dans : Panneau d'Administration > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript. Et on va afficher ce js sur toutes les pages du forum.

Comment l'utiliser ?

Pour l'utiliser sur ton forum, il y a 2 choses indispensables à mettre :
1] le bloc qui reçoit les tableaux de la page statistics
Code:
<div class="d-none" data-blk-infos="last-stats"></div>
2] Une élement html avec un attribut particulier . Par exemple :
Code:
<div data-info="stats" class="d-none"></div>
3] Des élements html avec les bonnes classes pour afficher les infos. De mon coté :
Code:
- Pour les membres : <strong class="nb-inscrits"></strong>,
- Pour les sujets : <strong class="nb-sjt"></strong>
- Pour les messages : <strong class="nb-msg"></strong>

Au final, voici le code complet :
Code:
<div class="d-none" data-blk-infos="last-stats"></div><!--

--><div data-info="stats" class="d-none"><!--
-->  Depuis le début du mois, nous avons accueilli <strong class="nb-inscrits"></strong>, ouvert <strong class="nb-sjt"></strong> et posté <strong class="nb-msg"></strong>.<!--
--></div>




Et voila ! Le tour est joué ^^ Grâce au javascript, tu peux utiliser ça dans les messages, dans les templates ou dans tes pages HTML (attention, celles-ci doivent utiliser le haut et le bas du forum pour que cela fonctionne).

Idea Tu peux voir un exemple d'utilisation sur mon forum de test en utilisant les accès suivant :
• Login : Tambouille
• Mot de passe : mdpTambouille2019
J'ai utilisé ce tuto sur l'index du forum, mais aussi dans ce message .




Si tu as un souci avec ce tutoriel, N'hésite pas à nous demander un coup de pouce.


Revenir en haut
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses



Post-It des Râleuses