Enrere
Mòdul 7
Creació i gestió d'entorns web dinàmics (PHP)
  Pràctica
1
2
3
4
   
Exercicis
Exercicis
 
 

 

  Creació de gràfics
   
 

En aquest apartat veurem com podem generar fitxers gràfics amb el PHP i posarem en pràctica alguna de les seves possibilitats amb la creació d'un menú fet a partir de botons generats dinàmicament.

   
  La biblioteca GD
   

El PHP té algunes funcions referides a imatges que ens permeten, per exemple, saber la mida d'imatges JPG, GIF, PNG, SWF, TIFF i JPEG2000 GetImageSize(). Bona part de les possibilitats gràfiques del PHP, però, passen per tenir instal·lada i activada la biblioteca gràfica GD. Es tracta d'una extensió del llenguatge que ofereix moltes més opcions, i que permet crear gràfics dinàmicament, des de zero o bé afegint algun text a fitxers gràfics ja existents. Permet també modificar imatges (canviar la mida per fer un àlbum de miniatures, dibuxar-hi figures geomètriques, etc.).

Podeu fer-vos una idea de les possibilitats gràfiques del PHP amb GD anant a l'apartat de funcions per a imatges del manual PHP en línia.

   
  Instal·lació de GD
 

En la instal·lació del paquet EasyPhp que vam fer en iniciar el curs, ja vam fer la instal·lació d'aquesta extensió, que per defecte no estava activada.

De tota manera, si no sabem segur si en el nostre sistema està instal·lada aquesta biblioteca o no, podem veure el resultat de la funció phpinfo() que ens n'informarà.

Recordeu que, si vau fer la instal·lació proposada a l'inici del curs, anant a l'adreça http://localhost/home/phpinfo.php podreu veure els paràmetres de la vostra instal·lació.

Un dels apartats que torna aquesta funció és el que veieu a continuació:

 



Figura 7.2.1: Opcions de la biblioteca GD

   
El fet que aparegui aquest quadre vol dir que tenim l'extensió instal·lada i funcionant. Podeu veure també la versió de què es tracta, així com el suport a les fonts True Type i els formats gràfics suportats.
   
Atenció !

Pot sobtar que entre els formats suportats no hi hagi GIF (només suport de lectura). Es tracta d'un problema que hi va haver amb la reclamació sobre els drets del format de compressió d'aquests fitxers. Per això, tot i que a les versions més antigues hi apareixia, el suport a aquest format ha desparegut de les noves versions de la biblioteca i ha estat substituït pel format PNG.
Actualització: En les darreres versions de la biblioteca GD (a partir de la 2.0.28) s'ha recuperat la possibilitat de crear fitxers gràfics en format GIF, ja que els impediments comentats en el paràgraf anterior han deixat d'existir.

   
   
  Un menú amb botons
 
Pràctica

Veurem ara algunes de les possibilitats que ens ofereix aquesta biblioteca. Crearem un script que s'encarregui de generar un botó a partir d'una base d'imatge (jpg) a la qual afegirem un text. El resultat serà una imatge nova. A aquest botó li assignarem un enllaç a una adreça URL. La crida seqüenciada a aquest script podrà crear un menú amb un conjunt de botons. El resultat serà semblant al següent, depenent del fons d'imatge que fem servir:


Figura 7.2.2: Menús generats

Per iniciar aquest procés, haurem de passar tres paràmetres:

  • $fitxer: nom del fitxer base; ha de ser, per a la nostra pràctica, una imatge jpeg.
  • $text: és el text que figurarà sobre el botó.
  • $color: és un paràmetre opcional que afectarà el color del text del botó (cal passar-li un dels valors predeterminats: blau, vermell, verd, blanc, gris, groc; si no li passem res, serà negre).
   
  Crear el fons del botó
 

Podeu crear un fons de botó d'uns 100 o 110 píxels d'amplada i uns 25 d'alt. Per facilitar la feina, podeu baixar-vos quatre versions diferents que n'hem preparat, cliclant aquí. En cas que els prepareu vosaltres, insistim que, per a la nostra pràctica, hauran de ser en format jpg.

Recordeu que, en qualsevol cas, la imatge o imatges de fons del botó, cal que estiguin en el mateix directori en què s'executa l'script del menú.

   
   
  Script de creació del botó
 

Primerament, crearem l'script que generarà un botó cada vegada que l'invoquem.

Copieu aquest codi en el vostre editor i deseu-lo amb el nom de boto.php. Si l'executeu, es produirà un error, perquè cal que el cridem des d'un altre script i li passem els paràmetres que espera perquè funcioni.

   
Veure codi

<?
/*---------------------------------------------------------------
* Mòdul: 7 Pràctica: 2 Fitxer: boto.php
* Autor: D116 Data:
* Descripció: Creació de botons per a menú gràfic
* Pre condi.:
* Post cond.: Ha de ser cridat exteriorment
----------------------------------------------------------------*/

// Recollim les variables que ens envien mitjançant l'array $GET
// Recordeu que això no caldria si tenim el 'register_globals'
// de php.ini a 'on', però és la manera recomanada i a la que es tendeix
$fitxer = $_GET['fitxer'];
$text = $_GET['text'];
$color = $_GET['color'];


// Definim amb el "header" de quin tipus serà el fitxer enviat
// En aquest cas diem que serà un fitxer .jpeg
Header("Content-type: image/jpeg");

// Mirarem de centrar el text en el botó

// número de font interna que utilitzarem
$font = 3 ;

//La funció GetImageSize torna un array amb les dimensions de la imatge
$afons = GetImageSize($fitxer);

// Passem el valor de l'amplada (en píxels) a la variable amb aquest nom
$amplada = $afons[0];

// Recollim l'amplada del text que li hem passat
$ampletext = ImageFontWidth($font) * strlen($text);

// Obtenim el punt d'inici per tal que el text surti centrat
$posicio = ($amplada-$ampletext)/2;

// Creem la imatge a partir del nom del fitxer que li hem passat
// cada tipus de gràfic té una funció específica (png, gif...)
$im = imagecreatefromjpeg($fitxer);

// Establim el color del text
// Si hem passat el paràmetre color en el format esperat:
// blau, vermell, verd, blanc,negre
switch($color){
case "blau":
$color = imagecolorallocate($im,30,30,255);
break;
case "vermell":
$color = imagecolorallocate($im,255,0,0);
break;
case "verd":
$color = imagecolorallocate($im,0,255,0);
break;
case "blanc":
$color = imagecolorallocate($im,255,255,255);
break;
case "gris":
$color = imagecolorallocate($im,128,128,128);
break;
case "groc":
$color = imagecolorallocate($im,255,255,128);
break;
default:
$color = imagecolorallocate($im,0,0,0);
}

// Preparem el text preveient que pugui venir amb un apòstrof
// Amb aquesta funció traiem el codi d'escapament que l'acompanya
$text = stripslashes($text);

// Escrivim el text començant a $posicio
// i amb el $color definit
ImageString($im,$font,$posicio,5,$text,$color);

// Enviem la imatge
// $im = referència a la imatge que tenim definida
// el segon paràmetre podria ser el no d'un fitxer
// el tercer paràmetre és el valor de compressió (100= +qualitat; 0 = -)
Imagejpeg($im,"",100);

// Alliberem la memòria que ocupava la imatge
ImageDestroy($im);

?>

  Llistat 7.2.1. Script de creació dels botons
   
 

El codi anterior funciona de la següent manera:

  • Primerament, recollim els tres paràmetres que calen: fitxer, text i color. De fet, només els dos primers són estrictament necessaris; el color podem ometre'l i automàticament sortirà en negre
  • A continuació, declarem mitjançant Header("Content-type: image/jpeg") de quin tipus serà el fitxer que crearem. Queda clar que estem dient que es tractarà d'una imatge i, a més, que serà del tipus jpg.
  • Tot seguit, calculem a quin lloc del botó començarem a escriure el text intentant que quedi més o menys centrat.
  • Creem la imatge a partir del fitxer donat.
  • Definim els colors per al text.
  • Escrivim el text a la imatge.
  • Enviem la imatge sense comprimir-la.
  • Alliberem l'espai de memòria ocupat per la imatge.
   
Atenció !
Remarqueu que la funció imagejpeg() —o, tant se val, imagepng()— admet un segon paràmetre que, si l'hi posem, farà que es desi la imatge generada en el servidor, amb el nom passat. Després, podríem recuperar aquestes imatges i treballar-hi amb tota normalitat.
   
   
  Crear el menú
 

El codi següent fa un seguit de crides a la creació dels botons i té com a resultat la creació del menú amb diferents estaments d'un centre. Copieu-lo a l'editor i deseu-lo amb el nom de menu.php.

   
Veure codi

Executar codi

<?
/*---------------------------------------------------------------
* Mòdul: 7 Pràctica: 2 Fitxer: menu.php
* Autor: D116 Data:
* Descripció: Creació de menú gràfic amb botons
* Pre condi.: Crida el codi per a crear el botó ('boto.php')
* Post cond.:
----------------------------------------------------------------*/

// Posem el nom del fitxer .jpg a $imatge
// si volem canviar el fons, simplement fem el canvi aquí
$imatge = "fons4.jpg";
// establim color del text
$color = "groc";

// Array multidimensional que conté:
// aMenu[n][0] Text del botó
// aMenu[n][1] Adreça web del botó
$aMenu[] = array("Direcció","http://www.xtec.net");
$aMenu[] = array("Cap d'Estudis","http://www.gencat.net/ense");
$aMenu[] = array("Secretaria","");
$aMenu[] = array("Coordinació","");
$aMenu[] = array("Departaments","");

?>

<h2>Menú vertical</h2>
<?
// Recorrerem l'array mentre $i sigui més petit que el total d'elements
for ($i=0; $i < count($aMenu);$i++){
// recollim el text del botó a $opcio
$opcio = $aMenu[$i][0];
// recollim l'acreça web a $adresa
$adresa = $aMenu[$i][1];

// Escrivim la crida html a la imatge
// A 'src' hi posem, però, una adreça amb paràmetres que
// retornarà
// la imatge creada
echo "<a href=\"$adresa\"><img src=\"boto.php?fitxer=$imatge&text=$opcio&color=$color\" border=\"0\" alt=\"$opcio\"> </a><br> \n";
}


// Repetirem el mateix però horitzontalment (sense posar-hi <br> al final de cada opció)
?>

<br><br><br><br><h2>Menú horitzontal</h2>
<?
$imatge = "fons3.jpg";
$color = "blanc";

for ($i=0; $i< count($aMenu);$i++){
$opcio = $aMenu[$i][0];
$adresa = $aMenu[$i][1];
echo "<a href=\"$adresa\"><img src=\"boto.php?fitxer=$imatge&text=$opcio&color=$color\" border=\"0\" alt=\"$opcio\"></a>";
}
?>

  Llistat 7.2.2. Script de creació dels menús
   

El codi actua de la manera següent:

  • Primerament, definim un array multidimensional, aMenu, que conté dos elements:
    • el text del botó
    • l'adreça que li assignem
  • Tot seguit, mitjançant un for, recorrem l'array definit abans.
  • A cada iteració, fem una crida al script boto.php, al qual passarem els tres paràmetres necessaris (fitxer, text i color).
  • Al final de cada línia hi incloem un salt <br> que farà que el menú quedi vertical.
  • Un cop acabat el primer for, en definim un de nou sense els salts de línia, cosa que tindrà com a resultat un menú horitzontal.
   
   
Amunt
Pràctica
1
2
3
4
   
Exercicis
Exercicis