Una migliore navigabilità in siti o blog è fornita sicuramente da un sistema di tag o parole chiave che ci permette di catalogare gli articoli "simili" per contenuti.
I tag non sono altro che parole chiave che servono a spiegare in modo essenziale il contenuto del singolo articolo.
Oltre a permetterci una migliore catalogazione delle notizie, questo sistema ci permette di creare la famosa tag cloud, una rappresentazione di parole chiave che differiscono per dimensione in base alla ricorrenza con cui vengono utilizzate all'interno del sito/blog.
Vediamo come gestire il nostro sistema di tag partendo dall' organizzazione all'interno del database.
L'idea di base è quella che ogni articolo debba avere più parole chiave, quindi il tipo di relazione sarà molti a molti: il sistema che ritengo più semplice è quindi quello di avere nel proprio database queste tre tabelle:
- Articolo (id,ecc..)
- Tag(id,nome)
- Ponte_tag_articolo(id_articolo,id_tag)
Come potete notare la terza tabella, Ponte_tag_articolo, ha il compito di collegare il tag all'articolo in base ai loro campi id.
Facciamo un esempio:
Vogliamo inserire nel blog un articolo riguardante il diario di Anna Frank che potrebbe avere come parole chiave Anna Frank,diario,seconda guerra mondiale e Germania.
All'inserimento dovremo controllare le parole chiave da inserire con quelle già presenti nella tabella tag del database e inserire quelle quelle assenti. Un inserimento senza controllo è impensabile dal momento che nascerebbero ripetizioni.
Successivamente bisogna creare i "ponti" tra l'id dell'articolo e quello delle parole chiave:per ogni articolo creeremo tanti ponti quante sono le parole chiave ad esso collegate. In questo caso 4.
Capiterà dunque che più articoli saranno collegati alle stesse parole chiave, quindi che alcune parole chiave saranno usate più spesso di altre: alla base di questa considerazione vi è l'idea della tag cloud.
Innanzitutto occorre definire un margine alle dimensioni che le tag possono assumere, partendo per esempio da un minimo di 10 ad un massimo di 25 pixel.
Il passo successivo è quello di assegnare al singolo tag la nuova dimensione basata sul numero di occorrenze del tag in questione, vedremo tra poco lo script in php. A questo punto tutto quello che dovremo fare sarà dare uno stile alla tag cloud attraverso qualche riga di CSS.
Ecco la funzione in php che si occupa dell'estrazione dei dati dal database (mySQL), il calcolo della nuova dimensione e la creazione della tag cloude:
function cloud($db,$limit,$min,$max) // CREO LA TAG-CLOUD
{
$query = 'SELECT nome,
COUNT(tag_articoli.id_tag) as count
FROM tag
LEFT JOIN tag_articoli ON (id = tag_articoli.id_tag)
GROUP BY nome
ORDER BY count DESC
LIMIT 0,'.$limit.'';
$result = mysql_query($query,$db);
$array = array();
$max_value = 0;
$min_value = 0;
$cont = 0;
/* inserisco i valori in un array bidimensionale
e estraggo i valori minimo e massimo di
occorrenze */
while($row = mysql_fetch_array($result))
{
$cont++;
$array[$row['nome']] = $row['count'];
if ($max_value == 0)
{
$max_value = $row['count'];
}
if ($cont == $limit)
{
$min_value = $row['count'];
}
}
foreach($array as $tag=>$occorr)
{
// calcolo la dimensione per ogni tag
$x = ($occorr - $min_value)*(($max - $min)/($max_value - $min_value)) +$min;
// scrivo il risultato già formattato
printf('<a href="#'.$occorr.'" style="font-size:'.$x.'px">'.$tag.'</a> ');
}
}
Copia tutto
Il codice dovrebbe essere chiaro, tuttavia vorrei spiegare meglio la query che si occuperà dell'estrazione dei tag: per avere la lista dei tag in ordine di occorrenze eseguo un conteggio del numero delle ripetizione di una stessa tag all'interno dei vari pontimemorizzando tali conteggi nella variabile count. Infine ordino la lista dei tag secondo questa variabile prendendo solo i primi 15 risultati.Il LEFT JOIN lo uso per ricavare il nome della tag conoscendone l'id.
E questa è la pagina (.php) in cui inseriremo la tag cloud:
<html>
<head>
<style>
#tag_cloude
{
width:280px;
height:200px;
border:3px solid #9C6;
padding:5px;
margin:0;
display:block;
text-align:center;
}
a
{
width:auto;
display:inline;
line-height:30px;
padding:0px;
margin-left:10px;
}
</style>
</head>
<body>
<div id="tag_cloude">
<?php
// mi connetto al database
$db = connetti_db($host, $username, $password, $db_name);
// istanzio la classe
$tag = new tag;
// chiamo la funzione cloud
$tag->cloud($db,15,15,30);
?>
</div>
</body>
</html>
Copia tutto