Hello, I’m Vinch

And this is my website.

Un nuage de tags accessible

02/02/07

This post is more than 10 years old. It might not reflect my current skills and convictions.

Petite amélioration de mon nuage de tags en PHP/MySQL. Si vous voulez le rendre (un peu plus) accessible, modifiez l’attribut title de cette manière dans votre vue :

<?php foreach ($tags_extended as $tag) : ?>
<a href="/tags/<?php echo $tag['tag']; ?>" style="font-size:<?php echo $tag['size']; ?>px" title="tag : <?php echo $tag['tag']; ?>, fréquence : <?php echo $tag['number']; ?>"><?php echo $tag['tag']; ?></a>
<?php endforeach; ?>

Si vous utilisez Smarty :

{foreach from=$tags_extended item=tag}
<a href="/tags/{$tag.tag}" style="font-size:{$tag.size}px" title="tag : {$tag.tag}, fréquence : {$tag.number}">{$tag.tag}</a>
{/foreach}

Sources d’inspiration :

* Comment faire un tag cloud (nuage de tags, ou d’étiquettes) accessible ?
* Tags accessibles dans dotclear

CakePHP : Une nouvelle bonne raison de s’y mettre

02/02/07

This post is more than 10 years old. It might not reflect my current skills and convictions.

CakePHP est un framework MVC en PHP que j’utilise occasionnellement pour certains gros sites. Pour en avoir testé plusieurs, je pense qu’il figure parmi les meilleurs frameworks PHP qui existent.

CakePHP est fortement inspiré (voire complètement copié) du très en vogue Ruby on Rails (RoR) dont il reprend les principes qui en ont fait son succès.

Pour l’instant, le seul obstacle que je voyais à sa percée dans nos contrées était le manque de ressources en français à son propos. C’est désormais chose réparée. Tout d’abord, le premier blog francophone sur CakePHP est né il y a un peu plus d’un mois. Il s’agit de Cake Pour Tous qui nous présente d’ailleurs merveilleusement bien le framework.

Mais la nouvelle bonne raison de s’y mettre, c’est la naissance, il y a deux jours, de la première communauté francophone autour de CakePHP.

Espérons qu’elle soit active ! En tous cas, moi, je compte bien y participer…

Comment créer un nuage de tags en PHP/MySQL ?

01/28/07

This post is more than 10 years old. It might not reflect my current skills and convictions.

Les tags sont devenus un élément incontournable pour toute application Web 2.0 qui se respecte. Ils permettent une organisation qui va plus loin que la catégorisation classique (catégorie > sous-catégorie > etc.). Cette classification est appelée Folksonomie.

Un nuage de tags, quant à lui, est une façon de représenter un groupe de tags, en jouant visuellement sur la taille et la couleur de la police. Les exemples les plus marquants de nuages de tags sont ceux de Flickr, de Technorati ou encore de del.icio.us.

Dans ce billet, je vais tenter de vous montrer comment on peut réaliser son propre nuage de tags en PHP/MySQL.

Tout d’abord, vous avez besoin d’une table dans votre base de données, qui se présente à peu près de cette façon :

+---------+
| tags    |
+---------+
| id      |
| tag     |
| item_id |
+---------+

* id est l’identifiant unique du tag
* tag est le tag à proprement parler
* item_id est l’élément auquel vous attachez le tag, par exemple un billet de votre blog, un lien, une vidéo, etc. Il s’agit d’une clé étrangère vers l’identifiant unique de la table concernée.

Une fois remplie, votre table doit ressembler à quelque chose de ce genre :

+-----+------+---------+
| id  | tag  | item_id |
+-----+------+---------+
| 1   | fun  | 1       |
| 2   | html | 1       |
| 3   | css  | 1       |
| 4   | html | 2       |
| 5   | php  | 2       |
| 6   | css  | 3       |
| 7   | php  | 3       |
| 8   | php  | 4       |
+-----+------+---------+

Voyons maintenant le code PHP qui va nous permettre de recolter les données utiles à la création de notre nuage. Je vous épargne les lignes concernant la connexion à la base de données.

<?php

define("MIN_SIZE", 9);
define("MAX_SIZE", 36);

$result = mysql_query("SELECT tag, count(*) as number FROM tags GROUP BY tag ORDER BY tag") or die(mysql_error());

$min = MAX_INT;
$max = -MAX_INT;

while ($tag = mysql_fetch_assoc($result)) {
	if ($tag['number'] < $min) $min = $tag['number'];
	if ($tag['number'] > $max) $max = $tag['number'];
	$tags[] = $tag;
}

$min_size = MIN_SIZE;
$max_size = MAX_SIZE;

foreach ($tags as $tag) {
	$tag['size'] = intval($min_size + (($tag['number'] - $min) * (($max_size - $min_size) / ($max - $min))));
	$tags_extended[] = $tag;
}

?>

Les deux premières lignes servent à définir les tailles minimum et maximum. La taille minimum sera assignée aux élements ayant la plus petite fréquence (ici fun avec une fréquence 1) et la taille maximum aux éléments ayant la plus grande fréquence (ici php avec une fréquence 3). Ce sont des tailles en pixels, vous pouvez bien sûr changer ces valeurs ou adapter l’algorithme pour travailler en pourcentages.

Ensuite, on réalise une requête SQL qui extrait chaque tag distinct accompagné de sa fréquence.

La boucle while sert à récupérer la fréquence minimum et la fréquence maximum (dans notre exemple, respectivement 1 et 3). Avant la boucle, on associe à $min et $max des valeurs de départ (très grande pour le minimum et inversément) qui seront remplacées dès le premier passage dans la boucle.

Dans le foreach, on calcule la taille qui sera associée à chaque tag grâce à une formule magique. Cette formule ajoute à la taille minimum la fréquence moins la fréquence minimum fois un certain ratio. Ce ratio correspond à l’écart de tailles entre deux fréquences voisines. Dans notre exemple, la différence de taille entre deux fréquences voisines est de 12,5 (36-9/3-1).

Cela donne donc le résultat suivant : la taille des éléments de fréquence 1 est 9, la taille des éléments de fréquence 2 est 21 (9+12,5 arrondi à l’unité inférieure via intval), la taille des éléments de fréquence 3 est 36 (9+(2*12,5)). On est parfaitement retombé sur nos pattes.

Au niveau de l’affichage, il vous suffit de passer le tableau $tags_extended à votre vue et de boucler dessus pour afficher les tags, en utilisant un style en ligne pour les tailles :

<?php foreach ($tags_extended as $tag) : ?>
<a href="/tags/<?php echo $tag['tag']; ?>" style="font-size:<?php echo $tag['size']; ?>px" title="<?php echo $tag['tag']; ?>"><?php echo $tag['tag']; ?></a>
<?php endforeach; ?>

Si vous utilisez le moteur de templates Smarty (ce que je vous conseille), cela donne :

{foreach from=$tags_extended item=tag}
<a href="/tags/{$tag.tag}" style="font-size:{$tag.size}px" title="{$tag.tag}">{$tag.tag}</a>
{/foreach}

Voici le résultat auquel on arrive. Vous pouvez également voir le contenu des tableaux $tags et $tags_extended sur cette page.

Pour les techniciens, sachez que la complexité de cet algorithme est en O(2*n)n est le nombre de tags distincts dans la base de données.

Dans un prochain billet, j’essaierai de rendre ce nuage de tags accessible ! (je n’ai pas encore de solutions miracles mais j’y travaille)