Il termine tag è utilizzato in informatica per definire entità differenti, in questa trattazione si parlerà però dei tag intesi come parole chiave collegate agli argomenti trattati in un sito Web (ad esempio un blog). Generalmente i tag vengono messi a disposizione degli utenti tramite un'interfaccia, chiamata tag cloud (nuvola di tag), che permette di visualizzare le relative risorse (articoli, post, pagine Web) con un semplice click sul link corrispondente ad ogni tag.
Un stesso tag può essere collegato a più risorse, per esempio più post possono fare riferimento ad una stessa parola chiave, una buon tag cloud deve tenere conto di questo fattore e permettere di rappresentare graficamente l'importanza di un tag; per far questo i tag utilizzati più spesso vengono generalmente stampati a video con dimensioni superiori rispetto a quelle dei tag meno frequenti.
Esistono diversi modi per creare una tag cloud, nel corso della trattazione verrà proposta una soluzione estremamente semplice basata sull'utilizzo di PHP per l'applicazione di base, MySQL per l'archiviazione dei dati e CSS per la formattazione dell'output grafico.
Struttura della tabella per il database
Per quanto riguarda la parte relativa al database da cui l'applicazione estrarrà i dati per la tag cloud, questa richiederà la creazione di un'unica tabella contenente 3 campi, da aggiungere per esempio alla base di dati di un blog.
La tabella sarà così strutturata:
- un id univoco auto-incrementale da associare ad ogni record;
- un campo
VARCHARdestinato a contenere i nomi dei tag; - un contatore che registrerà numero di occorrenze dei diversi tag
Di seguito viene proposta l'istruzione SQL per la creazione della tabella:
CREATE TABLE tag_cloud ( id_tag INT( 5 ) NOT NULL AUTO_INCREMENT , nome_tag VARCHAR( 50 ) NOT NULL , contatore_tag INT( 5 ) NOT NULL , PRIMARY KEY ( id_tag ) );
Le dimensioni proposte per i diversi campi non sono vincolanti, lo sviluppatore potrà modificarle sulla base delle proprie esigenze tenendo conto del numero di risorse messe a disposizione dal sito Web in cui l'applicazione verrà integrata.
Il foglio di stile CSS
Il prossimo passaggio sarà quello di creare un piccolo foglio di stile contenente le regole CSS per la formattazione dell'output sotto forma di tag cloud; anche in questo caso la procedura sarà molto semplice, basterà infatti definire le dimensioni del box che conterrà il tag cloud e gli attributi dei link relativi ad ogni tag, come nell'esempio seguente:
#box{width:250px}
.tag { padding: 2px; text-decoration: none; }
.tag:link { color: #000099; }
.tag:visited { color: #CC3300; }
.tag:hover { color: #FFFFCC; background: #993300; }
.tag:active { color: #FFFFCC; background: #996633; }
I tag saranno inseriti all'interno di un box della larghezza di 250px e i link ad essi associati assumeranno colori differenti a seconda del loro stato; anche in questo caso l'utilizzatore non ha alcun vincolo se non quello imposto dalla propria creatività, dimensioni e colori potranno essere modificati arbitrariamente. Vediamo ora l'applicazione.
L'applicazione per il tag cloud
Si passi ora alla fase relativa allo sviluppo dell'applicazione, la prima operazione da compiere sarà quella relativa alla definizione di una piccola classe che si occuperà delle operazioni di connessione al DBMS, di selezione del database, di chiusura della connessione e dell'istanza della classe stessa, come nell'esempio seguente:
<?php
class MySQL
{
function MySQL()
{
# parametri per la connessione
$this->host_name = "localhost";
$this->user_name = "username";
$this->password = "password";
$this->data_name = "tag_cloud";
# connessione a MySQL
$this->link = @mysql_connect(
$this->host_name,
$this->user_name,
$this->password)
or die (mysql_error());
# selezione del database
@mysql_select_db($this->data_name) or die (mysql_error());
}
}
function Close(){
# chiusura della connessione
@mysql_close();
}
# istanza della classe
$data = new MySQL();
?>
Ora si passi alla definizione di una funzione in grado di restituire i valori massimi e minimi relativi ai tag e di utilizzarli per restituire in output i diversi tag sulla base dei valori ricavati attraverso una semplice interrogazione
<?php
function mostra_tag_cloud() {
# intervallo delle dimensioni per i font
$dimensione_minima = 10;
$dimensione_massima = 25;
# creazione di un array con i valori dei records
$query = @mysql_query("SELECT * FROM tag_cloud GROUP BY nome_tag ORDER BY contatore_tag DESC") or die (mysql_error());
while($r = @mysql_fetch_object($query)) {
$v[$r->nome_tag] = $r->contatore_tag;
}
Close();
# ordinamento dell'array
@ksort($v);
# differenza tra le occorrenze minime e massime
$valore_minimo = @min(@array_values($v));
$valore_massimo = @max(@array_values($v));
$differenza = $valore_massimo - $valore_minimo;
# controllo per evitare eventuali errori derivanti da divisioni per 0
if($differenza == 0) {$differenza = 1; }
$box = '';
$tags = @array();
# calcolo delle dimensioni dei font
foreach ($v as $val => $i) {
$dimensione = $dimensione_minima + ($i - $valore_minimo) * ($dimensione_massima - $dimensione_minima) / $differenza;
# stampa del link associato ai tags
$tags[] = '<a style="font-size: '.@floor($dimensione).'px'.'" class="tag" href="tag.php?tag='.$val.'" title="''.$val.'">'
.@htmlspecialchars(@stripslashes($val)). '</a>';
}
# valore di ritorno
$box = @join("n", $tags) ."n";
return $box;
}
?>
Infine, per produrre in output la tag cloud sarà sufficiente richiamare la funzione appena definita in una pagina PHP che includa il foglio di stile, il file della classe per il database e quello contenente la funzione stessa:
<div id="box"> <?php @require 'config.php'; @include 'function.php'; echo @mostra_tag_cloud(); ?> </div>
Se tutto è andato per il meglio si dovrebbe ottenere un output simile a quello rappresentato nella figura seguente:
I tag saranno naturalmente collegati ad una pagina per l'estrazione delle risorse ad essi correlati (tag.php nell'esempio), la creazione di questa pagina sarà però argomento per un prossimo tutorial.
