Header
Partagez | 

[Javascript/jQuery/FA] Vérifier qu'un membre a posté dans un(e) catégorie/forum

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Eluknow

Doyen
Bons Points (BP) : 107
Voir le profil de l'utilisateur http://a-toi-de-coder.forumactif.org/

Message Sujet: [Javascript/jQuery/FA] Vérifier qu'un membre a posté dans un(e) catégorie/forum   Lun 15 Fév - 14:48

Bonjour Invité !

As-tu déjà voulu créer un concours où il t'a fallu vérifier qu'un membre a posté à tel ou tel endroit ?
Ou bien as-tu déjà envisagé d'afficher un petit message sur l'entête de ton forum demandant à ton membre de se présenter s'il ne l'avait toujours pas fait, et de manière automatique ?
N'as-tu jamais rêvé d'afficher un message personnalisé à un membre en fonction de l'endroit où il aurait posté des messages ?
N'as-tu jamais rêvé de devenir le maître du monde ?

Hé bien, chance à toi qui, en ce jour, à trouver le Saint Graal avec ce tutoriel Very Happy.
Néanmoins, je te mets en garde courageux guerrier : ce tutoriel est peut être un peu complexe pour de nouveaux guerriers !

Allez lettttt'ssss gooooo !

Réfléchissons

Avant de partir dans tous les sens et faire du code à en mourir (non ok peut être pas quand même), il est important de comprendre ce que nous allons faire.
En réalité, il est simple de savoir comment un membre a posté dans tel ou tel forum (ou catégorie, mais maintenant je dirai uniquement forum car c'est moins long) : on regarde manuellement dans le forum s'il y a un message du membre en question.
Et pour faire ça, il y a deux solutions : soit regarder dans tous les topics du forum, soit utiliser la fonction de recherche du forum :
Fonction de recherche dans le forum
Et si on veut vérifier que le membre a posté dans un forum, il suffit de mettre son pseudo et le forum en question.
Par exemple : Exemple avec la fonction de recherche
Maintenant, je vais valider la recherche pour voir le résultat que ça me donne :
Résultat de la fonction de recherche
On voit les topics où le membre Eluknow a participé.
Il est donc aisé de répondre à notre question "Le membre Eluknow a-t-il posté dans le forum Tutoriels ?". La réponse est évidemment oui.

Du coup, il suffirait qu'on réalise un script qui utiliserait cette fonction de recherche à notre place...
Et qui interpréterait les résultats de manière à savoir si le membre a posté ou non dans le forum choisi.
Pour cela, on va d'abord s'intéresser à comment on pourrait utiliser cette fonction de recherche, puis au traitement des informations reçues !

>$.gettons !

La méthode la plus simple qui existe est d'utiliser une fonction Javascript native, codée en AJAX. L'AJAX étant un "framework" javascript, autrement dit une libraire de fonctions en javascript toute prête.
La fonction utilisé serait $.ajax({}) avec un type GET. Seulement, cette fonction est fastidieuse à utiliser. Alors nous allons nous tourner vers un autre framework Javascript appelé Jquery, car il possède une syntaxe simplifiée de celle vue juste avant. En effet, il nous suffit de faire $.get('url'); plutôt que $.ajax({url: 'url', type:'GET', data: 'datas', datatype: 'html'.....});
Du coup, retenons que nous utiliserons $.get() en Jquery.
Vu qu'on utilise Jquery, il faut s'assurer qu'on a bien accès à la librairie de fonctions de ce framework. Hé normalement, oui, car sur FA, la librairie Jquery est chargée sur toutes nos pages Wink.
Ensuite, on commence notre code :
Code:
$(document).ready(function(){ /** Signifie : au chargement de la page... **/
/** Ici le reste du code **/
});

Ensuite on déclare notre $.get :
Code:
$(document).ready(function(){
$.get('url');
});
La question qui se pose maintenant est quelle URL utiliser. Et bien étant donné qu'on veut utiliser la fonction de recherche sur le forum on va utiliser l'URL de cela.
Mais comment ?
En gros, on va d'abord faire manuellement la recherche que l'on souhaite. Par exemple, si l'on souhaite vérifier qu'Eluknow a posté dans le forum "Règlement", on fait d'abord ça :
recherche exemple
Puis on regarde l'URL après avoir lancé la recherche :
URL
Et c'est cette URL là qui va nous intéresser. Dans notre exemple, elle est :
Citation :
http://a-toi-de-coder.forumactif.org/search?search_keywords=&sid=&q=&domains=a-toi-de-coder.forumactif.org&sitesearch=a-toi-de-coder.forumactif.org&client=&forid=1&ie=utf-8
&oe=utf-8&hl=fr&cof=GALT%3A%23993333%3BGL%3A1%3BDIV%3A%23d4c1c1%3BVLC%3A%23993333%
3BAH%3Acenter%3BBGC%3A%23f2f2f2%3BLBGC%3A%23d4c1c1%3BALC%3A%23993333%3BLC%
3A%23993333%3BT%3A%23333333%3BGFNT%3A%23993333%3BGIMP%3A%23993333%
3BFORID%3A11&search_terms=any&search_author=Eluknow&search_where=f1
&search_time=0&show_results=topics&sort_by=0&sort_dir=DESC&google=
Comme tu le vois y'a beaucoup, beaucoup, beaucoup de blabla pour rien :p.
Sans trop poser de question, on peut réduire à ça :
Code:
http://a-toi-de-coder.forumactif.org/search?domains=a-toi-de-coder.forumactif.org&sitesearch=a-toi-de-coder.forumactif.org&ie=utf-8&oe=utf-8&hl=fr&search_author=Eluknow&search_where=f1&sort_dir=DESC
Evidemment, cette adresse dépend de ton forum. De ce fait, on va essayer de décrypter cette URL.
D'abord, on a l'adresse du site (http://a-toi-de-coder.forumactif.org), ensuite, on a l'adresse de la page (/search). Et ensuite on a tout plein d'attributs de l'URL.
En premier lieu on a "domain", qui est l'adresse du forum. Pareil pour "sitesearch". Ensuite, ça ne nous intéresse pas. On voit après "search_author" = Eluknow. C'est le membre qu'on a renseigné avant : c'est le membre pour lequel on cherche à savoir s'il a posté dans le forum X ou Y. On a ensuite "search_where" : c'est la catégorie, le forum ou le sous forum dans lequel on cherche.
Voilà ce qui nous intéresse.
Du coup, on a notre URL et on peut compléter notre code :
Code:
$(document).ready(function(){
$.get('http://a-toi-de-coder.forumactif.org/search?domains=a-toi-de-coder.forumactif.org&sitesearch=a-toi-de-coder.forumactif.org&ie=utf-8&oe=utf-8&hl=fr&search_author=Eluknow&search_where=f1&sort_dir=DESC');
});
Qui signifie : on va chercher la page qui a pour URL celle indiquée
Bonus : flexibiliser (quel néologisme ! ) notre code

Ce code est pratique mais disons qu'il reste assez "droit". Pas trop flexible. Dans le cas du système de quêtes sur le forum où j'ai réalisé ce tutoriel, l'URL est un petit peu modifiée dans le but que la recherche soit effectuée non pas avec un utilisateur en particulier mais bien avec l'utilisateur connecté qui voit le système de quêtes. Ainsi, le système de quêtes est bien en adéquation avec l'utilisateur qui le voit. Pour réaliser cela, il faut avant tout activer la barre de navigation de forumactif, appelée Toolbar en allant dans le Panneau d'Administration -> Modules -> Toolbar et l'activer.
Ensuite, il faut savoir que cette Toolbar génère un objet Javascript appelé _userdata[] qui contient énormément d'informations utiles concernant l'utilisateur connecté. Par exemple, si j'affiche le code source de l'accueil du forum quand JE suis connecté, j'obtiens :
Code:
if(typeof(_userdata) == "undefined")
               var _userdata = new Object();
                _userdata["session_logged_in"] = 1;
                _userdata["username"] = "Eluknow";
                _userdata["user_id"] = 1;
                _userdata["user_level"] = 1;
                _userdata["user_lang"] = "fr";
                _userdata["activate_toolbar"] = 1;
                _userdata["fix_toolbar"] = 0;
                _userdata["notifications"] = 1;
                _userdata["avatar"] = "<img src=\"http://r29.imgfast.net/users/2916/61/52/62/avatars/1-52.jpg\" alt=\"\" />";
                _userdata["user_posts"] = 813;
                _userdata["user_nb_privmsg"] = 197;
                _userdata["point_reputation"] = 0;
Dans ce tableau on voit qu'il y a une valeur qui contient le pseudo du connecté (ici, le mien). Et c'est ça qu'on va utiliser.
On va remplacer dans l'URL le "search_author=Pseudo" par "search_author=_userdata["username"]".
Du coup, on aura :
Code:
$(document).ready(function(){
$.get('http://a-toi-de-coder.forumactif.org/search?domains=a-toi-de-coder.forumactif.org&sitesearch=a-toi-de-coder.forumactif.org&ie=utf-8&oe=utf-8&hl=fr&search_author='+ _userdata["username"] +'&search_where=f1&sort_dir=DESC');
});

Vérifions

Maintenant qu'on a récupéré les données de notre page de recherche, on va passer à la vérification. Qui dit vérification dit conditions.
Mais sur quoi appliquer la condition ?
La réponse parait évidente : sur le contenu de la page qu'on a affiché !
Oui, mais si elle est évidente, elle n'est pourtant pas simple à vérifier. En effet, on ne peut pas faire de condition du type :
Code:
if(pagequ'onaaffiché contient unsujet){}
Il faut d'abord mettre le résultat d'une page dans une variable, puis exécuter la condition.
Pour cela, on va rajouter dans notre $.get() un deuxième paramètre qui est une fonction anonyme avec un argument : le contenu de la page recherchée au préalable.
Code:
$(document).ready(function(){
$.get('http://a-toi-de-coder.forumactif.org/search?domains=a-toi-de-coder.forumactif.org&sitesearch=a-toi-de-coder.forumactif.org&ie=utf-8&oe=utf-8&hl=fr&search_author=Eluknow&search_where=f1&sort_dir=DESC', function(pageDatas)
   {
      
   });
});
J'ai appelé l'argument 'pageDatas' soit en français : les données de la page.
Bon, maintenant on les données de la page. Mais en soit, on n'est pas tellement avancé. En effet, on n'a pas besoin de toutes les données, mais d'une seule...
En effet, on requiert seulement la donnée qui nous permet de savoir si le membre a posté dans le forum. Pour cela, il nous suffit de regarder s'il y a des sujets qui s'affichent, comme dans le screen :

Et gros, ce qu'il nous faut, c'est vérifier qu'il existe au moins un lien vers un sujet de la catégorie/le forum choisi. Pour cela, on s'intéresser au code source de la page de recherche : il va nous donner une information essentielle : comment est formé le lien. Possède-t-il une classe ? Un id ? Un nom ? Un attribut quelconque ?
Lorsqu'on fait "inspecter l'élément" sur le premier lien de la recherche, on voit la chose suivante :
Code source
On voit que le lien se compose de l'attribut href="" et d'une class="topictitle".
Avec un peu de chance, on obtient la même classe sur tous les liens. Vérifions par exemple sur le lien numéro 2 :
Code source
C'est la même !
Bon, sauvés !
On va donc créer une variable qui contient tous les éléments qui ont pour classe topictitle à l'aide de jQuery :
Code:
$(document).ready(function(){
$.get('http://a-toi-de-coder.forumactif.org/search?domains=a-toi-de-coder.forumactif.org&sitesearch=a-toi-de-coder.forumactif.org&ie=utf-8&oe=utf-8&hl=fr&search_author=Eluknow&search_where=f1&sort_dir=DESC', function(pageDatas)
{
var topics = $('.topictitle', pageDatas); // On récupère les éléments .topictitle dans les éléments de la page de recherche (contenus dans la variable 'pageDatas')
});
});

Bon, j'ai une bonne nouvelle ! On a fait le plus dur !
Maintenant, on va simplement faire la condition qui va dire :
Si la variable topics n'est pas vide (= contient qqchose/n'est pas vide), alors c'est que le membre a déjà posté dans le forum/catégorie.
Code:
$(document).ready(function(){
$.get('http://a-toi-de-coder.forumactif.org/search?domains=a-toi-de-coder.forumactif.org&sitesearch=a-toi-de-coder.forumactif.org&ie=utf-8&oe=utf-8&hl=fr&search_author=Eluknow&search_where=f1&sort_dir=DESC', function(pageDatas)
   {
      var topics = $('.topictitle', pageDatas);
      if(topics.length){
         // C'est ok, le membre a posté dans ce sous forum !
      }
   });
});
Et voilà ! Maintenant, je te donne rendez-vous à la partie suivante Wink
Avec le code bonus de la partie 1:
 

Afficher un résultat en conséquence

C'est la partie la plus simple Wink.
Là, on va simplement afficher un résultat selon si l'utilisateur a posté ou non dans la catégorie/forum où l'on a fait la recherche.
Tu peux afficher ce que bon te semble !
Là, dans le cadre de ce tutoriel, on va afficher : "Pseudo, tu as posté des messages dans le forum "Nomduforum". Souhaites-tu y retourner ?" si l'utilisateur a posté quelque chose dedans.
Pour cela, rien de plus simple :
Code:
$(document).ready(function(){
$.get('http://a-toi-de-coder.forumactif.org/search?domains=a-toi-de-coder.forumactif.org&sitesearch=a-toi-de-coder.forumactif.org&ie=utf-8&oe=utf-8&hl=fr&search_author=Eluknow&search_where=f1&sort_dir=DESC', function(pageDatas)
   {
      var topics = $('.topictitle', pageDatas);
      if(topics.length){
         alert('Eluknow, tu as posté des messages dans le forum Tutoriels. Souhaites-tu y retourner ?');
      }
   });
  });
Le top du top serait qu'il y ait un lien sur "retourner". Pour cela, on va plutôt utiliser la fonction html() pour mettre cette phrase dans une balise :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <meta charset="utf-8" />
   <title>Tutoriel JS</title>
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
   <script>$(document).ready(function(){
   $.get('http://a-toi-de-coder.forumactif.org/search?domains=a-toi-de-coder.forumactif.org&sitesearch=a-toi-de-coder.forumactif.org&ie=utf-8&oe=utf-8&hl=fr&search_author=Eluknow&search_where=f1&sort_dir=DESC', function(pageDatas)
      {
         var topics = $('.topictitle', pageDatas);
         if(topics.length){
            $('#tutoJS').html('Eluknow, tu as posté des messages dans le forum Tutoriels. Souhaites-tu y <a href="lien" target="_blank">retourner</a> ?');
         }
      });
     });
   </script>
</head>
<body>
   <span id="tutoJS"></span>
</body>
</html>
Et voilà Wink.

Avec le code bonus de la partie 1:
 

Et voilà, ce tutoriel est terminé Wink.



Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].



Je soussigné, Eluknow, accepte qu'un directeur reposte le présent tutoriel "[Javascript/jQuery/FA] Vérifier qu'un membre a posté dans un(e) catégorie/forum" tel que je l'ai rédigé.
Revenir en haut Aller en bas



Cadeau de Noël


Mon dipl'homme:
 

Avatars et signas cadeaux':
 

[Javascript/jQuery/FA] Vérifier qu'un membre a posté dans un(e) catégorie/forum
Page 1 sur 1
 Sujets similaires
-
» [Javascript/Jquery] probleme apres chargement de la page et nouveaux elements
» DEVENEZ MEMBRE DU FEMMES CLUB RYTHME FM!
» Nouveau membre
» Nouveau membre
» [Résolu] Comment activer JavaScript (impôts)
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+