PHP  »  Articoli  »  Soluzioni in PHP 

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 VARCHAR destinato 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.

Altri articoli

Altre guide

Altre newsletter