Després d’un temps sense escriure res al blog per motius familiars (visiteu el blog de la Berta i sabreu perquè) he trobat una mica de temps per fer un tutorial sobre Php relacionat amb la maquetació de pàgines i les plantilles. Una de les coses més simples (i a la vegada útils) de php és que et permet crear plantilles de les parts fixes d’una pàgina que són invariables en tots els documents html d’un website: la capçalera, el menú, el peu de la pàgina, etc. Hi ha molts altres sistemes que permeten reutilitzar aquestes parts en cada pàgina sense haver d’escriure el codi una i altra vegada, simplificant moltíssim les modificacions ja que només s’ha de tocar un arxiu, però m’ha semblat que fer-ho a partir de funcions Php és un dels sistemes més ràpids i fàcils d’aprendre, sobretot per qui no es vulgui complicar massa en aprendre altres llenguatges (com ara Smarty).
El funcionament és molt simple. Es tracta de crear una funció per cada element de la pàgina que sigui igual en tot el website i així poder reutilitzar-lo en tots els documents. Recomano guardar l’arxiu que conté les funcions en una carpeta que tingui com a nom inc (que ve d’include), per tenir una mica ordenada la nostra pàgina.
Bé, comencem amb el codi. Crearem un arxiu anomenat estructura.php (el nom és només una idea) que serà el que contindrà les funcions que generaran l’estructura de la nostra pàgina i que utilitzarem com a plantilla dels arxius que formaran el nostre website, havent de canviar només la part corresponent al contingut principal de la pàgina.
/*Arxiu estructura.php que conté les funcions que generen l’estructura invariable de la nostra pàgina*/
/*
Funció obrirPagina() que obre el document html, el head, escriu els metatags, el títol i carrega els arxius externs que han d’estar disponibles a totes les pàgines, com per exemple l’arxiu d’estils css
PARÀMETRES:
$title -> El títol que apareix a la barra del navegador
$keywords -> Paraules clau de la pàgina
$descripcio -> Descripció de la pàgina útil pels buscadors
*/
//Declarem la funció obrirPagina()
function obrirPagina($title, $keywords, $description){ ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<meta name=”Robots” content=”all” />
<meta name=”Author” content=”Adrià Colomer Serra – Osona Disseny Web” />
<meta name=”description” content=”<?php echo $description; ?>” />
<meta name=”keywords” content=”<?php echo $keywords; ?>” />
<title><?php echo $title; ?></title>
<link rel=”stylesheet” type=”text/css” href=”http://www.elvostrewebsite.com/css/estils.css” />
<?php
}
/*
Funció obrirContingut() que tanca el head de la pàgina, imprimeix el menú i deixa obert el div principal on anirà el contingut variable de cada arxiu del nostre website. Opcionalment podria rebre com a paràmetre el títol de la pàgina que aniria dintre de <h1></h1>
*/
//Declarem la funció obrirContingut()
function obrirContingut(){ ?>
</head>
<body>
<div id=”wrapper”>
<div id=”header”>Aquí va la capçalera de la nostra pàgina</div>
<div id=”mainNav”>Aquí aniria el codi del nostre menú</div>
<div id=”mainContent”>
<?php
}
/*
Funció tancarPagina() que tanca el contingut principal, imprimeix el peu de pàgina i tanca el wrapper, el body i l’arxiu html
*/
//Declarem la funció tancarPagina()
function tancarPagina(){ ?>
</div>
<div id=”footer”>Aquí aniria el contingut del peu de pàgina</div>
</div>
</body>
</html>
</head>
<?php
}
?>
Bé, aquest seria l’aspecte general del nostre arxiu estructura.php. Com veieu conté 3 funcions (es poden incloure més funcions, tantes com contingut invariable tingui la pàgina) i es poden fer tan simples o complexes com es desitgi. Lògicament poden tenir consultes a bases de dades per imprimir menús i continguts dinàmics.
Com podeu comprobar, la primera funció ens deixa el <head> obert. Això ens permetrà incloure arxius externs només en pàgines concretes, sense que el navegador els hagi de carregar a totes les pàgines innecessàriament. També podeu veure com passem per paràmetre el títol, la descripció i les paraules clau d’una pàgina, ja que ens interessa que aquestes tres coses siguin diferents a cada arxiu del nostre website.
Ara només ens queda crear un arxiu anomenat index.php (podria ser qualsevol altre), incloure-hi l’arxiu estructura.php per poder fer servir les funcions i ja podrem crear la nostra pàgina d’una manera molt senzilla i ràpida. El codi de l’arxiu index.php seria el següent:
include(‘inc/estructura.php’);
obrirPagina(“Títol de la pàgina principal”, “paraules, clau, de, la, pàgina”, “Descripció de la pàgina”);
?>
<!– Aquí podem carregar arxius css, javascript o el que desitgem. També es pot deixar en blanc –>
<?php
obrirContingut();
?>
<!– Aquí hi aniria el contingut variable de cada pàgina. Al tractar-se de l’arxiu index.php podria anar-hi una presentació del website, o el que sigui –>
<?php
tancarPagina();
?>
Bé, ja heu pogut comprovar que és molt fàcil crear cadascun dels arxius del nostre website amb un sistema de plantilles a partir de Php. Simplement heu de crear les funcions que necessiteu, incloure l’arxiu que les conté a cada pàgina i fer-les servir. Si mai heu d’afegir un apartat al menú de la pàgina només haureu de retocar la part corresponent del codi del menú a dins la funció obrirContingut() i ja ho trindreu modificat per totes les pàgines del website, ja siguin 3 o 100, amb l’estalvi de temps que això suposa.
Pareu atenció sobretot amb la sintaxis per declarar les funcions (repasseu els manuals de Php) i la ruta on teniu guardat el vostre arxiu estructura.php. Una última recomanació: en tots els arxius externs, imatges, o el que sigui, que carregueu des de l’arxiu on declareu les funcions utilitzeu rutes absolutes, ja que si teniu pàgines que han d’utilitzar-lo i es troben en subcarpetes, els arxius no es carregarien bé i us podrieu tornar bojos buscant errors en el codi quan no n’hi han.
L’exemple d’aquest post és molt simple i només pretén il·lustrar la senzillesa amb la que podem crear les nostres plantilles Php. Espero que us hagi servit. En el pròxim post intentaré ensenyar com crear una estructura bàsica d’una pàgina i maquetar-la amb <div> i un arxiu css extern. Podeu deixar els vostres comentaris o dubtes. Gràcies.
