Share
Un nuage de tags est un excellent moyen de montrer aux visiteurs de votre blog les principaux sujets d’intérêt disponibles. Des informations supplémentaires sont également contenues dans un nuage de tags. Outre les liens eux-mêmes, qui donnent aux internautes une idée des sujets abordés dans votre site, ils peuvent également indiquer la popularité des différents sujets. Une autre grande chose à propos des nuages de mots-clés est qu'ils peuvent être utilisés pour décrire la fréquence de n'importe quoi; vous pouvez créer des liens vers des articles, des articles de blog, des images, des vidéos ou tout ce que vous avez en abondance sur votre site.
Les nuages de mots sont faciles à faire mal; que ce soit du point de vue de la conception ou du point de vue du code. Grâce à jQuery, il est également facile de bien faire les choses. Nous utiliserons la nouvelle version 1.3 de jQuery dans cet exemple et travaillerons avec PHP et MySql pour fournir un flux JSON de nos balises. Obtenir les balises dans une base de données en premier lieu dépasse le cadre de ce didacticiel, mais il est assez simple de les récupérer et de les transmettre à une page en attente via AJAX..
Commençons par la page sur laquelle le nuage de tags sera affiché; Dans un nouveau fichier de votre éditeur de texte, créez la page suivante:
Nuage d'étiquettes jQuery Tag Cloud
Enregistrez ceci sous tagcloud.html. À ce stade, nous n'avons presque rien sur la page, il suffit d'un simple conteneur pour le nuage de tags et d'un titre de second niveau dans le conteneur. Tous les autres éléments dont nous avons besoin peuvent être créés au fur et à mesure de leurs besoins. Nous établissons un lien vers une feuille de style dans la tête pour un style que nous ajouterons plus tard, et à la fin du corps, nous lions à jQuery. Nous faisons la demande de réponse JSON dans un bloc de script personnalisé après la référence à jQuery.
Nous utilisons l'alias $ pour appeler la méthode getJSON jQuery, qui est une abstraction de niveau supérieur de la méthode ajax; normalement, les méthodes jQuery sont appelées sur des objets faisant référence à des éléments, mais comme nous ne référençons aucun élément, nous pouvons utiliser l'alias jQuery à la place. Cela signifie également que l'objet jQuery ne sera pas renvoyé par la méthode. Au lieu de cela, xmlHTTPRequest est renvoyé.
La méthode getJSON accepte deux arguments dans cet exemple (bien que d'autres puissent être utilisés si nécessaire); le premier est l'URL à laquelle nous faisons la demande. Comme nous allons recevoir un objet JSON, il est logique d’utiliser getJSON. Nous pourrions utiliser la méthode ajax, mais nous aurions alors besoin de configurer davantage de propriétés de la requête (telles que le type de données), de sorte que cela nous fait gagner un peu de temps et de codage. À la fin de l'URL, nous spécifions un rappel JSONP -? Callback =? - qui permettra au navigateur de manipuler directement l'objet JSON, même s'il provient d'un autre domaine, sans traitement supplémentaire côté serveur.
Le deuxième argument est la fonction de rappel que nous voulons exécuter une fois que l'objet est retourné à la page. Nous n'avons pas encore mis de code dans cette fonction, car nous n'avons pas d'objet JSON avec lequel travailler. Nous pourrons revenir à cette page un peu après l'écriture de PHP. J'ai dit il y a un instant qu'aucun traitement côté serveur n'est nécessaire lorsque vous travaillez avec des rappels JSONP, et pourtant, nous allons maintenant nous lancer pour écrire un peu de PHP. C'est uniquement parce que personne ne fournit les données que nous voulons. Nous devons donc les créer nous-mêmes. Si quelqu'un fournissait un flux JSON de balises populaires, nous pourrions toujours utiliser le même code jQuery pour le demander et le traiter..
Vous aurez besoin d'un accès à un serveur Web pour pouvoir exécuter le fichier que nous sommes sur le point de créer. Toutefois, il peut s'agir de votre propre serveur Web local que vous utilisez pour le développement ou du serveur de votre site ou de votre blog. est hébergé sur. Dans une nouvelle page de votre éditeur de texte, ajoutez le code suivant:
Enregistrez ceci sous tagcloud.php. Pour cet exemple, je suppose que MySql est installé et configuré et que vous avez configuré une base de données appelée tagcloud. Dans cette base de données, je suppose également qu'il existe un tableau appelé balises. Cette table aura des lignes des balises et la fréquence des occurrences de ces balises. Je tiens à souligner que ce n'est pas un code de niveau de production, car la sécurité n'a pas été prise en compte dans sa conception. nous avons besoin de quelque part pour obtenir notre réponse AJAX dans cet exemple et ce code nous donnera que quelque part.
Regardons brièvement ce que nous avons fait.
// informations de connexion $ host = "localhost"; $ user = "root"; $ password = "your_password_here"; $ database = "tagcloud";
Nous définissons d’abord les informations de connexion dont nous aurons besoin pour nous connecter à la base de données. Assurez-vous de remplacer your_password_here par le mot de passe que vous avez défini pour accéder à MySql. Nous nous connectons ensuite à la base de données et définissons la requête que nous utiliserons pour accéder aux données à partir de la table des balises.
// démarre l'objet json $ json = "(tags: ["; // boucle et renvoie les résultats pour ($ x = 0; $ x < mysql_num_rows($query); $x++) $row = mysql_fetch_assoc($query); //continue json object $json .= "tag:'" . $row["tag"] . "',freq:'" . $row["frequency"] . "'";
Ensuite, nous créons la chaîne qui démarrera l’objet JSON, avant de parcourir chaque ligne de la table et d’exécuter la requête. Nous continuons à construire la chaîne JSON dans la boucle for, en ajoutant les données des deux champs de la ligne actuelle en tant que propriétés et valeurs..
// ajoute une virgule si pas la dernière ligne, fermant les crochets if si if ($ x < mysql_num_rows($query) -1) $json .= ","; else $json .= "])";
Nous effectuons une vérification simple à chaque itération de la boucle en utilisant le conditionnel for pour voir si nous lisons la dernière ligne du tableau. si nous ne le faisons pas, nous utilisons une virgule pour séparer chaque objet, si nous le fermons. Le format de l'objet JSON sera un objet d'enregistrement individuel dans un seul tableau de conteneur, au sein d'un objet externe..
// retourne JSON avec GET pour le rappel JSONP $ response = $ _GET ["callback"]. $ json; echo $ réponse; // ferme la connexion mysql_close ($ server);
Nous renvoyons ensuite la réponse au client en utilisant une requête GET; cela est nécessaire pour pouvoir utiliser le rappel jsonp dans notre page principale. Nous devons spécifier le nom du paramètre d'URL qui suit l'URL du JavaScript, qui dans cet exemple est simplement un rappel. Nous ne pouvons pas lui indiquer le nom de la fonction à laquelle nous voulons le transmettre, car la fonction est anonyme. jQuery gérera cela pour nous et veillera à ce que les données soient transmises à la fonction appropriée.
Une fois que nous avons terminé, nous fermons la connexion. À ce stade, nous ne voyons toujours rien sur la page, mais si vous exécutez l'exécution à partir d'un répertoire de service de contenu de votre serveur Web et utilisez l'onglet NET de Firebug, vous pouvez voir les données renvoyées. la page:
Maintenant que nous avons des fichiers JSON avec lesquels travailler, revenons à la page HTML et faisons quelque chose avec elle. Notre première tâche consiste à le traiter pour extraire les données. dans tagcloud.html, supprimez le commentaire que nous avons laissé dans le rappel et ajoutez le code suivant:
Accentsconagua
// crée une liste pour les liens de balises $ ("
