On the Web again

Réaliser un nuage de tags en Php MySql

J’ai dû réaliser récemment un module de recherche avancée pour ma boite, et j’ai voulu intégrer une recherche par tag.

Avant de me lancer je recherche bien entendu sur le web la meilleur manière de faire (souvent en dev, rien ne sert de réinventer ce qui a été maintes fois fait !), mais j’avoue que ce que je trouvais ne me satisfaisait pas.

Donc, en glanant et en regroupant toutes les infos récoltées, j’ai réaliser mon script. Alors voici pour vous un tutoriel pour réaliser votre propre nuage de tags…

Pour réaliser mon nuage, je me base donc sur un script php et une base de données MySql.

Je passerais sur l’enregistrement préalable des données dans la table, vous trouverez suffisamment de tutoriels bien fait à ce sujet.

La seule chose importante à retenir étant le format dans lequel vous allez demander à l’utilisateur d’indiquer ces différents tags dans le champ adéquat : En les séparant tout simplement par une virgule (les tags peuvent être des mots seuls ou bien une expression complète).

Exemple : “nuage,tags,comment faire,tutoriel,php” …etc…

On va ensuite traiter la chaine renvoyer pour :

Supprimer tous les accents

Supprimer certains mots inutiles (de, le , la, avec, pour…)

Supprimer les espaces en début et fin de chaine.

Donc considérons notre chaine de tags récupérer dans le champ de formulaire, $chaine_tags :
(Navré, mais sous Wordpress, la coloration syntaxique ne semble pas fonctionner)

<?php

// Fonct° Retire les accents dans une chaine function NoAccent ( $chaine ) {

$accents = "ÀÁÂÃÄÅàáâãäåÒÓÔÕÖØòóôõöøÈÉÊËèéêëÇçÌÍÎÏìíîïÙÚÛÜùúûüÿÑñ";
$noaccents = "AAAAAAaaaaaaOOOOOOooooooEEEEeeeeCcIIIIiiiiUUUUuuuuyNn";
$chaine = strtr($chaine, $accents, $noaccents);

return $chaine;

}

$chaine_tags = NoAccent($chaine_tags);

// Dans la chaine, on va retirer certains mots inutiles (de, pour, le, la...etc)
$remplace = array(' de ', ' le ', ' la ', ' pour ', ' un ', ' une ', 'd'', 'l'', 'avec');
$par = ' '; // Par un simple espace
$chaine_tags = str_replace($remplace, $par, $chaine_tags);

// Supprime les espace en debut et fin de chaine
$chaine_tags = trim($chaine_tags, ' ');

?>

Puis on enregistre cette chaine dans la BDD…

Maintenant passons au traitement de la chaine avant affichage

Nous avons donc dans la base pour chaque enregistrements, une chaine de tags propre.

On va chercher avec un SELECT en SQL toutes ces chaines.

$chaine_tags doit ensuite ressembler à ça : ” tags,affiche,mots-cles,donnees,expressions ” …

Ce que nous devons faire maintenant c’est tout simplement séparer chaque chaine de caractères séparés par des virgules.

<?php

// On decoupe la chaine avec explode, grace au pipe |
$mots = explode('|', $chaine_tags);

// On traite la chaine pr supprimer les doublons
$mots = array_unique($mots);

// On mélange le tableau avec shuffle
shuffle($mots);

?>

Explication du code ci-dessus :

explode va servir à obtenir un tableau associatif en concaténant la chaine $chaine_tags avec un pipe |.

array_unique va servir à supprimer les doublons de la chaine, c’est-à-dire à ne pas afficher deux fois le même mots ou la même expression.

shuffle est optionnel mais vous permet d’obtenir un nuage de tags aléatoires à chaque chargement de la page.

A partir de là, on obtient donc un tableau associatif ($mots), contenant nos tags, sans doublons et au hasard.

Affichage du nuage de tags

Pour cela on va utiliser un boucle For, qui va afficher :

Soit l’ensemble du contenu du tableau.

Soit un nombre limité de tags en spécifiant une variable $max qui sera le nombre max de tags à afficher.

Nous allons également spécifier une taile de police mini et maxi, $font_mini et $font_maxi

<?php

// Soit $max est = à l'ensemble du contenu du tableau
$max = count($mots); // count renvoi le nombre total d'éléments

// Soit on spécifie un nombre max d'éléments à afficher
$max = 25; // par exemple

// pensez bien à choisir l'une ou l'autre variable ci-dessus

// Taille de police en pixel
$font_mini = 10;
$font_maxi = 22;

// Puis on affiche le nuage avec la boucle for

for ( $i=0; $i< $max ; $i++ ) : // Début de boucle

// Avec rand, à chaque tour de boucle on choisi
// une taille de police comprise entre $font_mini et $font_maxi
$fontsize = rand($font_mini,$font_maxi).'px';

// plutôt qu'un echo, je préfere créé une variable $nuage_tags, que j'affiche par la suite
// A chaque tour, la variable est complétée avec le .=

$nuage_tags .='<a style="font-size:'.$fontsize.';" href="?tag='.urlencode($mots[$i]).'" title="Rechercher le tag '.$mots[$i].'">'.$mots[$i].'</a> ';;

endfor; // Fin de boucle

// Affichage final

echo $nuage_tags;

?>

Voilà, c’est fini !

Biensûr vous pouvez allez plus loin en insérant des classes CSS afin de donner un style au tag lui-même et à son div le contenant.

Et si vous êtes sage je continuerais ce tutoriel en vous montrant comment afficher en plus gras les tags les plus courant, et en petit les tags les moins utilisés…

Merci de m’avoir lu. N’hésitez pas à laisser vos commentaires et suggestions (ou éventuelles erreurs commises!)

Posté dans Développement, WebDesign |
Voir des articles similaires | Abonnez-vous au flux RSS de ce blog.

Tags associés : cloud, faire, mysql, nuage, php, tag, tagcloud, tags, tutorial, tutoriel