I gang med GDLib: Grafisk Counter

Her er så min første af forhåbentligt mange artikler på Udvikleren.dk. Ideen med denne artikel er, at introducere lidt af den basale funktionalitet i GDLib, som efterhånden er blevet en fast komponent i PHP. Til dette formål vil vi lave en simpel grafisk hit counter, lidt i stil den fra Chart.dk.

Du kan finde mere om installering af GDLib her: http://www.boutell.com/gd/
(Fra PHP version 4.3.x er GDLib bundlet med installationsfilerne)

Før vi kan komme igang med selve counteren skal vi lige have styr på vores back-end, MySQL tabellen som skal håndtere registreringen af hits. Følgende gennemgang antager, at man på forhånd har styr på MySQL, hvis ikke kan man finde en mere uddybende forklaring på den nødvendige syntaks i denne artikel http://www.udvikleren.dk/show_article.php?id=54.

Strukturen:

CREATE TABLE <tabel> (id INT NOT NULL AUTO_INCREMENT, hits INT DEFAULT '0', PRIMARY KEY(id))

Opdater hits:

UPDATE <tabel> SET hits = hits+1 WHERE id = $id

Aflæs antallet af hits:

SELECT hits FROM <tabel> WHERE id = $id

I resten af artiklen antages det, at man allerede har opdateret databasen og gemt antallet af hits i variablen $hits.

Hele ideen med at benytte GDLib er, at slippe for at bruge en masse tid på at klippe og klistre i Photoshop for derefter at samle stumperne i HTML. Ved at benytte GDLib kan vi nøjedes med en jpg-fil, som indeholder counterens grafiske udseende, resten klarer vi med GDLib.

Den billedefil som jeg anvender i dette eksempel kan hentes her http://www.irole.dk/udvikleren/counter/gfx/counter_bg.jpg (88x33 px)

Så kom vi endelig til den spændende del af artiklen, selve anvendelsen af GDLib. Det første vi skal gøre er, at oprette et billede fra en fil eller en url. Det gør vi således,

//Indlæs en lokal JPEG-fil
$counter_img = imageCreateFromJPEG("counter_bg.jpg");
//Indlæs en JPEG-fil fra en url
$counter_img = imageCreateFromJPEG("http://www.irole.dk/udvikleren/counter/gfx/counter_bg.jpg"); 

Ulempen ved at indlæse JPEG-filen fra en url er, at webserveren skal downloade denne før vi kan komme videre og det tager tid.

Nu kan vi benytte GDLib til at skrive vores hits direkte på det billede vi lige hentet, men først bliver vi nødt til at forstå lidt om GDLib's håndtering af fonte og farver. I GDLib er en farve defineret ud fra dens index i billedets farveindex. Skal man anvende en farve skal man derfor enten lokalisere eller allokere farven i indexet.

//Allokering af farven sort
$black = imageColorAllocate($counter_img,0,0,0);  //(0,0,0) er RGB koden for sort
//Lokalisering af farven sort
$black = imageColorExact($counter_img,0,0,0); //Returnerer -1 hvis farven ikke er allokeret

GDLib har 5 indbyggede bitmap fonte, nummereret 1-5. Ønsker man at anvende andre bitmap fonte skal disse først indlæses. Man kan ligeledes også anvende TrueTypeFonte, men det vil ikke ikke komme ind på her. Vi vil til dette formål anvende font nr. 2.

//Her vælges en indbygget font
$font = 2;

Når vi skal skrive i billedet skal vi angive koordinaterne for placeringen af teksten.

//Koordinaterne for det øverste venstre hjørne
$dest_x = 10;
$dest_y = 20;

Så kommer vi til selve påførelsen af teksten

//Påfør antallet af hits
imageString($counter_img, $font, $dest_x, $dest_y, "Hits: $hits", $black);

Nu da antallet af hits er tilføjet mangler vi bare at returnere billedet. Da vi er interesseret i at returnere et billede er det meget vigtigt, at vi sender det som en ren billede strøm. Du må altså under ingen omstændigheder integrere dette script i et større PHP-script eller HTML dokument, med tekstindhold. Det skal være et selvstændigt script.

//Først sender vi en header så browseren ved at den får et billede
header("Content-Type: image/jpeg");
//Derefter får vi GDLib til at sende billedet
imageJPEG($counter_img);

Det eneste vi nu mangler er, at indsætte vores counter i et HTML dokument. Eftersom vores script (counter.php) returnerer en picture-stream kan vi bare behandle scriptet som ethvert andet billede.

//Vis counteren med ID 1
<IMG src="counter.php?id=1" height="33" width="88">

Hvis du har aktiveret register_globals i PHP.ini kan du teste scriptet uden MySQL-delen ved, at benytte linket "counter.php?hits=3330".

Det var det for denne gang... Jeg vender tilbage med mere på et senere tidspunkt.