![]() |
|
||||||||||||||||
![]() |
||||||||||||||||
Pràctica |
![]() |
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ó: |
|||||||||||||||
|
|||||||||||||||
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. | |||||||||||||||
![]() |
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. |
||||||||||||||
Un menú amb botons | |||||||||||||||
![]() |
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:
Per iniciar aquest procés, haurem de passar tres paràmetres:
|
||||||||||||||
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. |
|||||||||||||||
<? // Recollim les variables que ens envien mitjançant l'array $GET
// Mirarem de centrar el text en el botó // número de font interna que utilitzarem //La funció GetImageSize torna un array amb les dimensions de
la imatge // Passem el valor de l'amplada (en píxels) a la variable amb
aquest nom // Recollim l'amplada del text que li hem passat // Obtenim el punt d'inici per tal que el text surti centrat // Creem la imatge a partir del nom del fitxer que li hem passat // Establim el color del text // Preparem el text preveient que pugui venir amb un apòstrof // Escrivim el text començant a $posicio // Enviem la imatge // Alliberem la memòria que ocupava la imatge ?> |
|||||||||||||||
Llistat 7.2.1. Script de creació dels botons | |||||||||||||||
El codi anterior funciona de la següent manera:
|
|||||||||||||||
![]() |
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. |
|||||||||||||||
<? // Posem el nom del fitxer .jpg a $imatge // Array multidimensional que conté: ?> <h2>Menú vertical</h2> // Escrivim la crida html a la imatge
<br><br><br><br><h2>Menú horitzontal</h2> for ($i=0; $i< count($aMenu);$i++){ |
|||||||||||||||
Llistat 7.2.2. Script de creació dels menús | |||||||||||||||
El codi actua de la manera següent:
|
|||||||||||||||
![]() |
|||||||||||||||
|
|||||||||||||||