Plantillas (Templates) en PHP

Smarty (http://smarty.php.net/download.php ) es un motor de plantillas para PHP, cuyo objetivo es separar el contenido de la presentación en una página web, se encuentra bajo la licencia GPL por lo que puede ser usado libremente.

Es común que en grandes proyectos el rol de diseñador gráfico y el de programador sean cubiertos por personas distintas, sin embargo la programación en PHP tiene la tendencia a combinar estas dos labores en una persona y dentro del mismo código lo que trae consigo grandes dificultades a la hora de cambiar alguna parte del diseño de la página, pues se tiene que escarbar entre los scripts para modificar la presentación del contenido, Smarty tiene como objetivo solucionar este problema.

Smarty es un motor de templates para PHP desarrollado por Andrei Zmetvski, autor entre otras cosas de la extension GTK para PHP4, Smarty ofrece varias "features" bastante poderosas:

• Los templates son compilados a PHP para evitar parsearlos n veces.
• Smarty puede detectar cuando un template ha cambiado y lo recompila automáticamente
• Smarty viene con un muy buen conjunto de instrucciones que pueden usarse desde un template para generar ciclos, listas, formatear texto, etc.
• Smarty es muy simple de instalar y no requiere ninguna extension en particular para funcionar, solo PHP 4.0.5 o superior.
• Smarty incluye un sistema de cache para cachear las paginas dinamicas o porciones de paginas dinamicas en caso de que se quiera.

Ejemplo de Smarty

Página index.php

include('Smarty.class.php');
// Crea Objeto
$smarty = new Smarty;
// Asigna algo de contenido, este vendria comunmente de
// una base de datos u otra fuente,pero usaremos valores
// estáticos para este ejemplo.
$smarty->assign('nombre', 'José Manuel Pardo Pérez');
$smarty->assign('direccion', 'Alpes #992');
// Lo muestra
$smarty->display('index.tpl');

Página index.tpl

   <html>
   <head>
   <title>Información del Usuario</title>
   </head>
   <body>
   <p>Información del Usuario:</p>
   <p>Nombre: {$nombre}<br />
           Dirección: {$direccion}</p>
   </body>
   </html>

Salida HTML generada

 <html>
 <head>
 <title>Información del Usuario</title>
 </head>
 <body>
 <p>Información del Usuario</p>
 <p>Nombre: José Manuel Pardo Pérez<br />
    Dirección: Alpes #992</p>
 </body>
 </html>

Pero lo más interesante es crear páginas que vienen de Bases de Datos MySQL. A continuación vamos a hacer un ejemplo más complejo imitando el funcionamiento de un diario.

Mostraremos los cinco artículos más recientes con el mínimo de interacción con la Base de Datos ya que es un sitio muy ocupado. Para eso usaremos la funcionalidad de catcheo de Smarty.

Tenemos que crear una tabla con esta estructura:

CREATE TABLE `news` (
 `id` INT NOT NULL AUTO_INCREMENT ,
 `title` VARCHAR( 255 ) NOT NULL ,
 `author` VARCHAR( 255 ) NOT NULL ,
 `date` INT NOT NULL ,
 `article` LONGTEXT NOT NULL ,
 PRIMARY KEY ( `id` ) ,
 FULLTEXT (
 `article` 
 )
 ) TYPE = MYISAM COMMENT = 'This table stores our News Articles';

Del primer ejemplo ya sabemos que una página PHP se compone de dos partes:

i) The Template – Esto es cómo la página debería mostrar los datos
ii) The PHP – Coge los datos y los envía a la plantilla.

A continuación lo que haremos es escribir la página PHP que coge los datos de la Base de Datos y envía la información al Smarty Templating Engine para mostrar los resultados.

El código PHP es muy simple y está totalmente comentado, así que puedes copiarlo o leerlo para entender su funcionalidad

 // Archivos de Smarty que se necesitan
require 'libs/Smarty.class.php';
 
 // This is a file which abstracts the DB connecting functionality (Check out PEAR)
 require 'DB.php';
 
 $smarty = new Smarty;
 
 $smarty->compile_check = true;
 $smarty->debugging = false;
 $smarty->use_sub_dirs = false;
 $smarty->caching = true; 
 
 // This SQL statement will get the 5 most recently added new items from the database
 $sql = 'SELECT * ';
 $sql .= 'FROM `news` ';
 $sql .= 'ORDER BY `id` DESC LIMIT 0, 5'; 
 
 $result = mysql_query($sql) or die("Query failed : " . mysql_error());
 
 // For each result that we got from the Database
 while ($line = mysql_fetch_assoc($result))
 {
  $value[] = $line;
 }
 
 // Assign this array to smarty...
 $smarty->assign('news', $value);
 
 // Display the news page through the news template
 $smarty->display('news.tpl');
 
 // Thanks to David C James for a code improvement :)
 ?>

Fíjate que activamos la opción de cache del Smarty para lograr eso, guarda una copia del resultado enviado por la plantilla en un archivo de texto, A continuación se muestra ese fichero de texto en vez de crear dinámicamente cada vez la página. Esto puede hacer que el proceso de renderizado de la página sea mucho más rápido especialmente si hay mucha información que procesar.

Esto es todo el código que necesitamos para este ejemplo.

Esto es esencialmente la página HTML con la adicción de algunas secciones de Smarty.

<!-- This is the DOC type declaration and links in the CSS stylesheet etc -->
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>
     <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
     <meta name="author" content="Steve Rendell" />
     <meta name="generator" content="EditPlus" />
     <link rel="stylesheet" type="text/css" href="style.css" title="Default CSS Sheet" />
 
     <title>News Page</title>
   </head>
 
   <body id="top">
 
     <!-- OK display the page header to keep it nice-->
     <div id="header">
       <span>Steve's News Page</span>
     </div>
 
     <!-- This is where the news article will be going -->
     <div id="bodyText">
 
         <!-- Have a title -->
         <h1 id="welcome">Read All About It</h1>
 
         <!-- OK this is a section which will loop round for every item in $news (passed in through from PHP) -->
 {section name=news loop=$news}
    <!-- For every item, display the Title -->
   <h2 id="{$news[news].id}">{$news[news].title}</h2>
   <!-- Write out the Author information and the date -->
   <h3>{$news[news].author}, {$news[news].date}</h3>
   <!-- Now show the news article -->
   {$news[news].article}
 {/section}
     </div>
 
     <!-- Show copyright information etc -->
     <div id="footer">All Contents Copy Written :)</div>
 
   <!-- Close the html tags -->
   </body>
 </html>

Smarty facilitata una forma conveniente de viajar através de los arrays de datos

Ahora que tenemos la plantilla, y algunos PHP para rellenarlo, deberíamos ser capaces de cargar los archivos PHP y que nos devuelva algunos artículos.

Uso la siguiente hoja de estilo para conseguir el resultado.

h1, h2, h3, #header, #footer {
   font-family: verdana, tahoma, helvetica, arial, sans-serif;
 }
 
 h1 {
   font-size: 200%;
   font-weight: bold;
   text-align: center;
 }
 
 h2 {
   font-size: 125%;
   font-variant: small-caps;
   color: black;
 }
 
 h3 {
   font-size: 85%;
   font-style: italic;
   color: #9B9B96;
 }
 
 #header, #footer {
   text-align: center;
   display: block;
   border: 1px solid #999;
   padding: 1mm;
   background: #ffc;
   color: #000;
   color: gray;
   font-variant: small-caps;
 }
 
 #header {
   font-size: 250%;
   font-weight: bold;
   margin-bottom: 5mm;
 }
 
 #footer {
   font-size: 85%;
   margin-top: 5mm;
 }

Aquí está la página en acción con el ejemplo de Steve:

Esta claro que este ejemplo es muy simple y no existe una razón para realizar un esfuerzo como el que aquí se muestra. Pero para páginas más complejas o sitios muy elaborados sí que compensa.

Descarga el archivo de los fuentes y los CSS desde los fuentes de este artículo. Recuerda que la clave es 'devscripts'