Het probleem

Bij het creeëren van je datamodel heb je wellicht rekening gehouden met het optimaal gebruiken van de datatypes die MySQL aanreikt. Een voorbeeld is het verschil tussen de tinyint en de smallint, een tinyint kan maximum waarde 255 bevatten en een smallint maximum 65 535 (wanneer ze worden ingesteld als unsigned). In een optimale database is er goed afgewogen welke datatypes er gebruikt worden voor welk veld. De unieke sleutel van je gebruikerstabel zal waarschijnlijk geen tinyint zijn, tenzij je maar 255 leden verwacht. Maar hoeveel leden verwachten je dan wel? Omdat dit moeilijk in te schatten is, hebben Massimo en ikzelf een tool geschreven die ons toont hoe ver de tabelvelden ‘bevolkt’ zijn. Met de Data Type Usage Profiler (DTUP) kan een volledige database beheerd worden en kunnen de volgende datatypes gecontroleerd worden op hun bevolkingsgraad:

• alle integers (tinyint, smallint, mediumint, int en bigint)
• alle teksten (tinytext, text, mediumtext en longtext)
• varchar (met eigen ingestelde lengte)

In de DTUP zijn er 4 niveaus of zones waarin een datatype zich kan bevinden. Elke zone heeft een kleuraanduiding die terugkomen in de tabelweergave van de databasetabel en in de grafische weergave. De mogelijke zones zijn:

1. > 90% – Rood
2. > 75% – Licht rood
3. > 50% – Oranje
4. < 50% – Groen

Als een datatype zich in de groene of oranje zone bevindt, is er nog geen reden tot het doorvoeren van database aanpassingen. Als echter de het bezettingspercentage > 75% is, dan kan misschien geopteerd worden om een datatype hoger te nemen of de lengte aan te passen. De test op de datatypes uit de reeks van integer gaat kijken naar de hoogste waarde in de tabel. De varchar en text reeks gaat rekening houden met de lengte die het aantal karakters in beslag neemt.

DTUP is gemaakt met het vertrouwde CodeIgniter en Smarty. De pagina die getoond wordt door de controller te bezoeken, bestaat uit 3 delen.

1. Overzicht: geeft het aantal gevallen weer die voorkomen in elke zone op een pie chart;
2. Tabellenlijst: alle tabellen die voorkomen in de gebruikte database;
3. Databasetabellen: bevat een tabel die weergeeft hoeveel waarden er in gebruik zijn en hoeveel er maximum gebruikt mogen worden met als laatste kolom in de tabel de procentuele verhouding tussen aantal gebruikte en maximum te gebruiken. Een bar chart vervolledigt de tabel door op een grafische manier de verhouding nogmaals weer te geven. Zowel de tabel als de grafiek maken gebruik van de kleuren die bij de zones horen.

Waar jullie allemaal op wachten, screenshots

Deze pie chart toont de beknopt overzicht van alle velden uit de database. Het grootste deel in de voorbeeld database is gezond (groen) en enkele velden bevinden zich in de kritische zone. De velden die vooral in die rode zone liggen zijn velden waarvan we op voorhand de maximale lengte kennen, bijvoorbeeld omdat we een MD5 hash gebruiken.

Bovenstaande schermafbeelding geeft duidelijk weer waar dit artikel en DTUP eigenlijk om draait. Alle velden van een bepaalde tabel worden getoond met informatie zoals aantal gebruikt, maximum te gebruiken en de procentuele verhouding. Ook het datatype is weergegeven zodat er van hieruit beslist kan worden welk datatype misschien de opvolger kan worden van het huidige, te kleine, datatype.

Bovenstaand voorbeeld kan een deel zijn van een gebruikerstabel. Zoals al gezegd, wisten we op voorhand dat het wachtwoord 32 tekens lang ging zijn, dus dat rode veld is geen verrassing. Het veld waarin de gebruikersnaam wordt bijgehouden is ook volledig gebruikt. Er heeft zich namelijk een gebruiker geregistreerd met een gebruikersnaam die net 32 karakters is. Nu is de vraag, houden we de beperking op die 32 tekens, of breiden we het veld uit? Dat hangt natuurlijk af van het doel. In ons voorbeeld stellen we dat er van hogerhand beslist is dat een gebruikersnaam nooit langer mag zijn dan 32 tekens.

Dit voorbeeldje ging over een varchar veld. Het is een heel ander verhaal wanneer het gaat om een unieke sleutel die automatisch verhoogd wordt met AUTO_INCREMENT.

In onze instellingen tabel is er gekozen om met een tinyint te werken als unieke sleutel die maximum 255 records toelaat. Zoals te zien is in bovenstaande figuur is ondertussen waarde 240 bereikt. Als er nog meer instellingen bijkomen, is het misschien niet onbelangrijk om op dit moment het datatype tinyint op te krikken naar een smallint die tot waarde 65 535 aankan. Voor deze tabel is het natuurlijk geen probleem als de unieke sleutels op zijn. Voor een gebruikerstabel, waarvan de ID zichzelf verhoogt, kan dit veel kritischer zijn omdat, eenmaal de grens bereikt is, er geen leden meer kunnen registreren en dat wil je natuurlijk niet.

Voila

Ik hoop dat ik jullie een nieuwe kijk heb kunnen geven op de manier waarop Massimo en ikzelf Spacetarion onderhouden.

Dit zelfgeschreven profiler tooltje met behulp van CodeIgniter, Smarty en een MySQL database laat ons toe nauwgezet de bevolking van onze datatypes te monitoren. Deze pagina is toegankelijk vanuit het beheerpaneel van Spacetarion dat opgebouwd is met ExtJS. Binnenkort zullen onze trouwe volgers ook een blik kunnen werpen op de adminkant van Spacetarion. Zo weten jullie des te meer waar wij mee bezig zijn. Met dat paneel en deze DTUP kunnen wij ons uitgebreid systeem opvolgen om het zo stabiel mogelijk te presenteren aan de spelers, hopelijk aan jou dus.

Verbeteringen? Altijd mogelijk…

Mogelijke verbeteringen zijn er altijd, zo zou ik nog kunnen voorzien dat het datatype vanuit de DTUP gewijzigd kan worden. Een tweede verbetering die ik nog zou kunnen doorvoeren, is alle autonummeringvelden als speciaal veld behandelen waarbij een verhouding van > 75% echt kritiek is. In het geval van kritieke autonumeringvelden kan ik via een cronjob mezelf via mail op de hoogte houden en direct ingrijpen. Een stap verder is dat het systeem zichzelf kan verbeteren door automatisch zijn datatype te verhogen en me via mail op de hoogte stellen dat deze actie ondernomen werd.

De DTUP staat nog maar in z’n kinderschoenen en kan dus nog verder uitgebreid worden. Misschien heb jij wel een suggestie die DTUP kan omvormen tot een mooi product dat voor iedereen te downloaden zal zijn in de toekomst? Laat het ons zeker weten!

Waarom zit het niet standaard in CodeIgniter?

Daar zijn 2 goede redenen voor. De eerste is de meest voor de hand liggende. CodeIgniter heeft namelijk zijn eigen manier om om te gaan met templates. In CodeIgniter termen noemen deze ‘view files’. Telkens wanneer je het volgende doet, roep je dus eigenlijk een template aan.

$this->load->view('home', $data);

Een andere mogelijke reden waarom Smarty niet standaard bij CodeIgniter wordt geleverd is omdat er meerdere mogelijkheden zijn. Smarty is wel de bekendste, maar zeker niet de enige template engine. Een template engine biedt natuurlijk vele voordelen waaronder caching, afscherming van de PHP code voor designers, handige tags, etc.

Waar zetten we Smarty?

De eerste stap is natuurlijk het uploaden van de Smarty bestanden naar je webhost. De beste locatie om deze te plaatsen vind ik persoonlijk de libraries map onder system/application/. Dit enerzijds omdat Smarty een library is die je zal gebruiken en anderszijds omdat ik al mijn eigen uitbreidingen in die map plaats. Zo blijven alle zelfgemaakte bestanden mooi bij elkaar en kan ik beter het overzicht behouden. Mijn system/application/libraries map zie je links op de afbeelding.

Zoals je ziet heb ik de originele naam van de Smarty map behouden. Hierdoor kan ik makkelijk zien welke versie ik heb wanneer er updates uitkomen. Deze naam mag je uiteraard zelf kiezen, maar ik zou de bestanden wel in een map houden, ook weer om het overzicht te behouden.

Noot: wanneer je werkt met meerdere applicaties op één CodeIgniter installatie, kan het handig zijn om deze map in system/libraries te plaatsen. Op die manier hoef je maar één keer Smarty te uploaden in plaats van één keer voor elke applicatie.

De Smarty klasse

Het is uiteraard niet voldoende om gewoon de map te uploaden naar je server. Het Smarty object moet bereikbaar zijn vanuit de CodeIgniter klassen (meestal vanuit een controller). Een klasse toevoegen aan het CodeIgniter framework is helemaal niet moeilijk, eerst moet je de klasse uiteraard schrijven en deze daarna gewoon automatisch inladen met behulp van autoload.php.

Zoals je uit de onderstaande code kan afleiden, heb ik deze klasse de naam ‘S’ gegeven. Ik heb gekozen om ‘S’ als naam te nemen in plaats van ‘MY_Smarty’ om de simpele reden dat ‘S’ korter is dan ‘MY_Smarty’ (en omdat ‘Smarty’ al gereseveerd is door … jawel … Smarty zelf). Wanneer ik nu een template aanroep hoef ik dus niet altijd

$this->my_smarty->display('home');

te gebruiken, maar simpelweg

$this->s->display('home');

wat in de grotere applicaties toch al snel heel wat typwerk minder is. De hardcore Smarty fans zien ook meteen dat ik de extensie .tpl kan weglaten bij het aanroepen van een template. Deze ‘functionaliteit’ is ook voorzien in de S klasse.

Zoals je op de afbeelding van mijn bestandsstructuur al kon zien, heb ik gewoon een bestandje S.php aangemaakt in de system/application/libraries/ map. De inhoud van dit bestand is als volgt:

<?php
require_once "Smarty-2.6.22/Smarty.class.php";
 
class S extends Smarty {
    function S() {
        $this->Smarty();
 
        // Het config object van CodeIgniter ophalen
        $config =& get_config();
 
        // Aan de hand van de config de mappen die Smarty zal gebruiken instellen
        $this->template_dir = (!empty($config['smarty_template_dir']) ? $config['smarty_template_dir'] : BASEPATH . 'application/views/');
        $this->compile_dir = (!empty($config['smarty_compile_dir']) ? $config['compile_dir'] : BASEPATH . 'cache/');
 
        // base_url is een handige functie, die willen we altijd bij ons hebben
        // In een Smarty template kunnen we dan gewoon {$base_url} gebruiken
        if (function_exists('base_url')) {
            $this->assign('base_url', base_url());
        }
 
        $this->clear_all_cache();
    }
 
    function display($resource_name) {
        // .tpl toevoegen indien dit niet in het gevraagde bestand staat
        if (strpos($resource_name, '.tpl') === false) {
            $resource_name .= '.tpl';
        }
 
        // Hier kan je allerlei code toevoegen die moet gebeuren vlak voor het tonen van de pagina
 
        // De pagina tonen
        return parent::display($resource_name);
    }
}

Let op: de compile map die je aangeeft moet schrijfbaar zijn door de webserver. Ik gebruik altijd 777, maar misschien is minder ook al goed. Kan iemand dat duidelijk maken?

De S klasse moet natuurlijk in het CodeIgniter framework worden ingeladen voordat je deze kan gebruiken in een controller. Hiervoor open je gewoon system/application/config/autoload.php en voeg je bij het ‘libraries’ onderdeel de ‘S’ klasse toe als volgt:

$autoload['libraries'] = array('s');

Wat met $smarty.session?

CodeIgniter maakt, zoals je misschien weet, geen gebruik van de globale $_SESSION variabele van PHP. Om gegevens bij te houden, maakt CI gebruik van cookies en/of een database (kan je instellen in het config bestand). Dit brengt echter wel een minpunt met zich mee in dit geval. Smarty kan namelijk de $_SESSION variabele aanspreken met behulp van $smarty.session. Maar aangezien CI hier geen gebruik van maakt, is dit niet mogelijk

Maar voor elk probleem is natuurlijk een oplossing. Ik heb in de display functie van de S klasse een stukje code geschreven dat alle gegevens uit $this->session (de plaats waar CI alle sessiegegevens opslaat) haalt en ze doorgeeft aan Smarty. Dit is makkelijk te doen met een foreach, maar dat laat ik als uitstekende oefening voor thuis.

Een klein voorbeeldje

system/application/controllers/Voorbeeld.php

<?php
class Voorbeeld extends Controller {
    function index()
    {
        $tekst = 'hello world...';
        $this->s->assign('tekst', $tekst);
        $this->s->display('voorbeeld');
    }
}

system/application/views/voorbeeld.tpl

Dit is de doorgegeven tekst:<br />
<br />
{$tekst}

Smarties

Wel, niet echt smarties natuurlijk, maar een template engine. Met behulp van Smarty kan je templates schrijven. Deze templates bepalen hoe een website eruit ziet, waar alle elementen zich bevinden en op welke manier de gegevens worden getoond. Het spreekt voor zich dat hieraan heel wat werk is. Mijn week was dan ook goed gevuld met dit te doen. Maandag heb ik het registreren en het inloggen afgewerkt, dinsdag de pagina’s die de gebruiker toelaten zijn wachtwoord opnieuw op te vragen en de rest van de week heb ik gewerkt aan de templates die mensen reviews laten toevoegen en lezen.

Nachtwerk

Gelukkig niet voor mij, maar maandag werd er aan nachtwerk gedaan bij Inventis. De nieuwe pukkelpop website moest op dinsdagmorgen gelanceerd worden, en er moesten nog heel wat bands toegevoegd worden. Toen ik dinsdag op kantoor aankwam, ging de nachtploeg juist naar huis met een slaperig gezicht. De nieuwe pukkelpop is dankzij hun echter wel online geraakt en is te vinden op pukkelpop.be.

Eindwerk… nog maar eens

Voor de zoveelste keer nog maar eens iets zeggen over mijn eindwerk. De voorbije weken heb ik hieraan niet veel kunnen werken door de problemen met mijn computer, pukkelpop, etc. Dit weekend staat er heel wat schrijven op de planning dus.

Hiep hiep, slice-aah

Donderdag zat de feestelijke sfeer er helemaal in, de slicer van Inventis, David, werd 18. Hij carpoolt elke dag naar het werk met Stijn, die zich “toevallig” had overslapen. Zo hadden we iets meer tijd om alles te versieren en in orde te brengen. Toen David binnenkwam was het dan ook meteen feest (niet dat dat op andere dagen niet zo is ). Een videoverslag:

Donderdag stond er ook nog een leuke verrassing voor de deur: een dagje vrijaf. Hoewel er nog heel wat werk is aan mijn eindwerk ga ik toch genieten van dat extra dagje weekend. Hopelijk doen jullie dat ook…

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.