FinalFrag.be

Tijdens mijn stage ben ik deze week gestoten op iets dat ik nooit eerder heb gemaakt, een tagcloud. Dit klinkt heel simpel om te maken, maar uiteindelijk was het toch moeilijker om te maken dan verwacht. Door deze blogpost zal ik het maken van een tagcloud wat toelichten.

Wat is een tagcloud?

Een tagcloud is een verzameling van kernwoorden op een blog. Door het grote succes van tagclouds, worden ze ondertussen ook voor andere doeleinden gebruikt.In mijn stageproject gebruik ik een ‘product-cloud’, een tagcloud die de producten bevat waarover de meeste reviews werden geschreven.

Een tagcloud kan je makkelijk herkennen doordat er grote en kleine woorden instaan. De grote woorden zijn belangrijker en worden dus groter getoond zodat ze beter opvallen. Een voorbeeld van een tagcloud kan je op deze blog in het rechter menu zien. Kernwoorden waarover ik het dikwijls heb in mijn posts worden groter getoond, terwijl minder vaak voorkomende tags kleiner worden afgebeeld.

Een tagcloud maken

Het makkelijkste deel van een tagcloud is de CSS. In dit voorbeeld zullen we gebruik maken van vier verschillende groottes. De CSS bevat dus vier klassen, één voor elke grootte.

1
2
3
4

.size1 { font-size: 12px; }
.size2 { font-size: 24px; }
.size3 { font-size: 36px; }
.size4 { font-size: 48px; }

Om dit voorbeeld zo simpel mogelijk te houden, zal ik de tags niet ophalen uit een database, maar zelf een array declareren. In een realistische situatie moet dit uiteraard wel gebeuren. Om een tagcloud samen te stellen hebben we nood aan twee gegevens. In mijn stageproject waren dit de naam van een product en het aantal reviews dat erover zijn geschreven. De naamgeving hangt af van het doel van de cloud. Om dit voorbeeld zo duidelijk mogelijk te maken, zullen we gegevens ‘naam’ en ‘aantal’ noemen. De gebruikte array ziet er dus als volgt uit:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

$tags = array (
    array (
        'naam' => 'Massimo',
        'aantal' => 5
    ),
    array (
        'naam' => 'Mertens',
        'aantal' => 9
    ),
    array (
        'naam' => 'FinalFrag',
        'aantal' => 2
    ),
    array (
        'naam' => 'Website',
        'aantal' => 7
    ),
    array (
        'naam' => 'Blog',
        'aantal' => 1
    ),
    array (
        'naam' => 'Tagcloud',
        'aantal' => 8
    )
);

Uit deze array kunnen we al afleiden dat ‘Tagcloud’ en ‘Mertens’ het grootst gaan getoond worden met respectievelijk 8 en 9 als aantal. ‘Blog’ en ‘FinalFrag’ zullen klein worden getoond omdat ze maar 1 en 2 als aantal hebben.

De verwerking van deze array gaat in mensentaal als volgt. Eerst bepalen we het grootste en het kleinste aantal. Zo komen we te weten welke klein moeten getoond worden en welke groot. Uiteraard moeten ook de tussenliggende tags onderverdeeld worden in de vier CSS klassen die we eerder al hebben aangemaakt. In PHP ziet dit er als volgt uit:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

// Eerst initialiseren we de variabelen
// die het kleinste en grootste aantal bevatten
$min = null;
$max = null;
 
// Daarna overlopen we de array (by reference)
// om het kleinste en grootste aantal op te slaan
foreach ($tags as &$tag)
{
    // Indien er nog geen kleinste waarde is opgeslagen,
    // is de eerste de kleinste
    if ($min === null)
    {
        $min = $tag['aantal'];
    }
 
    // Hetzelfde voor de maximumwaarde
    if ($max === null)
    {
        $max = $tag['aantal'];
    }
 
    // Als het huidige aantal kleiner is dan de opgeslagen
    // minimumwaarde is dit de nieuwe minimumwaarde
    if ($tag['aantal'] < $min)
    {
        $min = $tag['aantal'];
    }
 
    // En weer hetzelfde voor de maximumwaarde
    if ($tag['aantal'] > $max)
    {
        $max = $tag['aantal'];
    }
}
 
// De volgende stap is om de tags te verdelen over de vier klassen
// Eerst moeten we de range bepalen waarin de tags zich bevinden
$range = $max - $min;
 
// Daarna bepalen we de grootte van elk van de vier delen
$partSize = $range / 4;
 
// Aan de hand van de grootte van elk deel,
// kunnen we de maximumwaarde van elk deel bepalen
$part1Max = $min + $partSize;
$part2Max = $min + 2 * $partSize;
$part3Max = $min + 3 * $partSize;
$part4Max = $max;

Wanneer we bovenstaande code uitvoeren op de array die we hoger hebben aangemaakt, krijgen we volgend resultaat:

1
2
3
4
5
6
7
8
9
10

$min = 1
$max = 9
 
$range = 8 (9 – 1)
$partSize = 2 (8 / 4)
 
$part1Max = 3 (1 + 2)
$part2Max = 5 (1 + 2 * 2)
$part3Max = 7 (1 + 3 * 2)
$part4Max = 9 ($max)

Het enige dat ons nu nog rest is om de array opnieuw te overlopen en de tags te verdelen over de aangemaakt klassen. Dit is makkelijk te realiseren als volgt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

foreach ($tags as &$tag)
{
    if ($tag['aantal'] <= $part1Max)
    {
        // Het aantal ligt tussen 1 en 3
        $tag['klasse'] = 1;
    }
    else if ($tag['aantal'] <= $part2Max)
    {
        // Het aantal ligt tussen 3 en 5
        $tag['klasse'] = 2;
    }
    else if ($tag['aantal'] <= $part3Max)
    {
        // Het aantal ligt tussen 5 en 7
        $tag['klasse'] = 3;
    }
    else
    {
        // Het aantal ligt tussen 7 en 9
        $tag['klasse'] = 4;
    }
}

Nu is de array die we in het begin aangemaakt hebben uitgebreid met een extra veld, namelijk ‘klasse’. In deze variabele staat de CSS klasse waartoe die bepaalde tag hoort. Met behulp van Smarty (onze favoriete template engine) kunnen we deze array makkelijk omzetten in HTML zodat deze op de website kan getoond worden. Allereerst moeten we de array doorgeven aan Smarty en de juiste template aanroepen:

1
2
3
4
5

// Eerst geven we de tags array door aan Smarty
$smarty->assign('tags', $tags);
 
// En daarna tonen we de tagcloud template
$smarty->display('tagcloud.tpl');

Deze template ziet er als volgt uit:

1
2
3
4
5

<div id="tagcloud">
    {foreach from=$tags item=tag}
        <span class="size{$tag.klasse}">{$tag.naam}</span>
    {/foreach}
</div>

Het resultaat

Als je alle code die hierboven staat zou samenvoegen en uitvoeren, krijg je een 'mooie' tagcloud. Uiteraard kan dit met behulp van de juiste CSS regels veel beter gemaakt worden, maar daar gaat deze post niet over. Bepaalde stukken PHP code kunnen op een betere manier geschreven worden, bijvoorbeeld het deel dat beslist in welk deel een bepaalde tag hoort. In een productieomgeving moet dit gedaan worden met een switch. Het is dan ook niet aangeraden de code gewoon over te nemen wanneer je zelf een tagcloud wil maken. Er zijn op het internet heel wat voorbeelden te vinden van tagclouds met een mooie stijling.

Delen

Facebook      Twitter     TinyUrl: http://tinyurl.com/chmb9w