Separación contenido / diseño - Uso de plantillas

Clasificado en:

Separación de contenido-diseño y manejo de plantillas (Templates).

Si bien PHP nació como un lenguaje embebido en HTML, y resulta muy rápido desarrollar programas pequeños de ese modo, cuando un proyecto crece, surge la necesidad de separar el código de la presentación, por variadas razones:

  • Consistencia y flexibilidad: La matriz básica de contenido de todo el sitio puede estar contenida en un sólo archivo, garantizando que la presentación de todo el sitio sea consistente.Además, los cambios en esta plantilla básica automáticamente se reflejan en la totalidad del sitio.
  • Separación de trabajo de los diseñadores y los desarrolladores: El código html puede ser trabajado con herramientas WYSWYG, en tanto que el código permanece seguro de cualquier alteración accidental.
  • Reutilización de la presentación: Una misma plantilla puede ser utilizada para presentar múltiples tipos de contenido. Por ejemplo, se puede crear un formato estándar de presentación de resultados tabulares, que puede ser utilizado para diversos objetivos.
  • Reutilización del contenido - código: El mismo contenido generado por un código puede ser presentado de muchas maneras distintas, solamente cambiando la plantilla. Incluso, con las herramientas adecuadas, se pueden obtener otros tipo de salida, tales como XML, Excel o PDF.
  • Reutilización de elementos: Se puede trabajar de manera modular, creando elementos que pueden ser reutilizados en diversos lugares con la simple adición de un texto específico

Es conveniente recordar que la separación de presentación y contenido también debe asegurarse, dentro de lo posible, en el código, separando las funciones encargadas de presentar información al usuario, recoger datos de formulario y las que procesan la información (relación con base de datos, cálculo numérico, etc.)

1.- Modelo de separación diseño - contenido

Aquí se propone un modelo básico de separación:

el mono no es muy bonito, pero soy psicólogo, no diseñador

El usuario recibe de nuestro modelo una salida HTML, a través de su navegador. Esta aparece en un formato específico por acción de uno o más archivos CSS. Las zonas dinámicas del texto son generados por código PHP encargado de la presentación (uso de plantillas), el cual recibe la información necesaria tanto de las posibles entradas de los usuarios (por ej., replicación de los campos de un formulario en caso de error), como del código encargado de la lógica del proyecto. El código encargado de la lógica del negocio recibe las entradas de los usuarios, selecciona que presentación y que variables van a ser mostradas, a partir de los contenidos que se encuentran en el backend, que incluye elementos como la base de datos, archivos, etc., que soportan la información.

2.- Plantillas

2.1.- Introducción

Todos los sistemas de plantillas en PHP tienen un funcionamiento similar:

  • Se crea el objeto
  • Se carga el template HTML, ya sea este en un archivo o como una variable.
  • Se selecciona el bloque de HTML en el cual se trabajará
  • Se ingresan las variables dentro de la plantilla.
  • Se procesa el contenido.
  • Se obtiene el resultado, ya sea como una variable o presentándolo directamente en pantalla.

Entre los sistemas de plantillas más conocidos se encuentran:

  • Fast Templates: es una conversión de la librería de igual nombre de Perl. Presenta la desventaja de que resulta más lenta que otros sistemas, debido al uso de expresiones regulares POSIX en vez de Perl, y su limitada funcionalidad.
  • Smarty: Uno de los más famosos, si no el más, sistemas de plantillas para php. Su gran ventaja es que "compila" la plantilla en código php directo, el cual es cacheado y ejecutado directamente. Sus desventajas radican en la estrecha unión existente entre el código que se ocupa para presentar y la presentación (si se ocupan las variables de forma incorrecta, se puede caer la página completa) y la complejidad que presenta, haciendolo casi un lenguaje nuevo.

2.2.- PEAR::Template_IT

2.2.1.- Introducción


Para efectos de presentar un sistema de plantillas, he decido utilizar la clase PEAR_Template_IT por las siguientes razones.

  • Independencia total de código y presentación: cualquiera sea el tipo de variables, el único problema que pueda ocurrir es que no se presente un contenido.
  • Facilidad de uso: no más de 10 funciones bastan para manejar casi todo el sistema
  • Manejo de Bloques: Template_IT permite el manejo de bloques engarzados, los cuales, opcionalmente, pueden ser eliminados automáticamente si no se utilizan. Si se ocupa la clase derivada ITX, incluso se pueden reemplazar bloques en tiempo real.
  • Uso modular: la salida de una plantilla puede ser mostrada en forma directa, o puede utilizada como parte de una plantilla mayor.

2.2.2.- Uso de Template_IT.

HTML

En el HTML, se definen bloques y variables.

Archivo: personas.tpl.html

  1.  <html>
  2.  <head>
  3.  <link href="{CSS}" rel="stylesheet" type="text/css">
  4.  </head>
  5.  <body>
  6.  <h1>Listado de nombres</h1>
  7.  <p><b>Formato Css</b></p>
  8.  <FORM METHOD=GET ACTION="">
  9.   <INPUT TYPE="radio" NAME="css" value="personas1.css">personas1.css
  10.   <br>
  11.   <INPUT TYPE="radio" NAME="css" value="personas2.css">personas2.css
  12.   <p>
  13.   <INPUT TYPE="submit">
  14.   </p>
  15.  </FORM>
  16.  <table>
  17.  <!-- BEGIN personas -->
  18.  <tr>
  19.  <td>Nombre: <b>{NOMBRE}</b></td>
  20.  <td>Apellido: <b>{APELLIDO}</b></td>
  21.  <!-- BEGIN bloque_telefonos -->
  22.  <td>Telefonos:
  23.  <br />
  24.  <ul>
  25.  <!-- BEGIN telefonos -->
  26.  <li><b>{TELEFONO}</b></li>
  27.  <!-- END telefonos -->
  28.  </ul>
  29.  </td>
  30.  <!-- END bloque_telefonos -->
  31.  </tr>
  32.  <!-- END personas -->
  33.  </table>
  34.  </html>

CSS

Archivo personas1.css

  1.  body {
  2.  font-family:Arial;
  3.  }
  4.  table {
  5.  border:2px ridge black;
  6.  background:#eee;
  7.  border-collapse:collapse;
  8.  }
  9.  td {
  10.  border:1px solid #aaa;
  11.  padding:5px;
  12.  font-size:12pt;
  13.  }
  14.  h1 {
  15.  background:#0000cc;
  16.  font-weight:bold;
  17.  color:white;
  18.  padding:10px;
  19.  }

Archivo personas2.css

  1.  body {
  2.  font-family:Geneva;
  3.  color:white;
  4.  background:blue;
  5.  }
  6.  table {
  7.  border:2px ridge black;
  8.  background:#FFFF00;
  9.  border-collapse:collapse;
  10.  }
  11.  td {
  12.  color:black;
  13.  border:1px solid #aaa;
  14.  padding:5px;
  15.  font-size:12pt;
  16.  }
  17.  h1 {
  18.  background:#FFFF00;
  19.  font-weight:bold;
  20.  color:red;
  21.  padding:10px;
  22.  border:3px dashed #FFFF99;
  23.  }

PHP

Archivo: personas.php

  1.  <?php
  2.   require_once "HTML/Template/IT.php";
  3.   $aDatos = array (
  4.   "0" => array("nombre" => "Stig", "apellido" => "Bakken", "telefonos" => array("222222", "333333")),
  5.   "1" => array("nombre" => "Martin", "apellido" => "Jansen", "telefonos" => array("222222", "333333")),
  6.   "2" => array("nombre" => "Alexander", "apellido" => "Merz", "telefonos" => array())
  7.   );
  8.   $sCss=(isset($_REQUEST["css"])?$_REQUEST["css"]:"personas1.css"); // defino que css voy a usar
  9.   $tpl = new HTML_Template_IT("./"); // directorio donde se encuentran las plantillas
  10.   $tpl->loadTemplatefile("personas.tpl.html", true, true); // cargo la plantilla, borrando las variables y bloques sin usar
  11.   foreach($aDatos as $aPersona) {
  12.   // Asigno primero el bloque más interno
  13.   $tpl->setCurrentBlock("telefonos");
  14.   foreach($aPersona["telefonos"] as $sTelefono) {
  15.   $tpl->setVariable("TELEFONO", $sTelefono) ;
  16.   $tpl->parseCurrentBlock();
  17.   }
  18.   // después, el más externo
  19.   $tpl->setCurrentBlock("personas");
  20.   $tpl->setVariable("NOMBRE", $aPersona["nombre"]);
  21.   $tpl->setVariable("APELLIDO", $aPersona["apellido"]);
  22.   $tpl->parseCurrentBlock();
  23.   }
  24.   $tpl->setVariable("CSS",$sCss); // defino la variable css
  25.   // presento
  26.   $tpl->show();
  27.  ?>

2.2.3.- Funciones.

Constructor: HTML_Template_IT([string $raiz= ""])


$tpl=new HTML_Template_IT("./templates");

Crea el objeto. $raiz es el directorio donde se encuentran las plantillas

boolean IntegratedTemplate::loadTemplatefile (string $archivo, boolean [$removerVariables = TRUE], boolean [$removerBloques= TRUE])

$tpl->loadTemplateFile("plantilla.html",true,false);

Carga la plantilla. $removerVariables permite borrar aquellas variables que no han sido utilizadas, en tanto que $removerBloques borra todo el código de un bloque si ninguna variable fue asignada

boolean IntegratedTemplate::setCurrentBlock ([string $bloque= "__global"])

$tpl->setCurrentBlock("personas");

Define el bloque en el cual las variables van a ser asignadas.

void IntegratedTemplate::setVariable (mixed $nombreVariable [, mixed $contenidoVariable= ""])

$tpl->setVariable("NOMBRE",$nombre);

Asigna un valor a una variable de la plantilla. Se puede utilizar un array en el primer argumento, siendo las claves los nombres de las variables y los valores los contenidos a asignar, o dos string, tal como se presenta en la definición de la función.

boolean IntegratedTemplate::touchBlock (string $block)

$tpl->touchBlock("mensaje");

Preserva un bloque vacío. Es especialmente util para mostrar mensajes predefinidos en el HTML, que no requieren una asignación de variables.

void IntegratedTemplate::parse ([string $bloque= "__global" ])

$tpl->parse();

Procesa el bloque definido por $bloque. Si no se define , se procesa toda la plantilla

void IntegratedTemplate::show ([string $bloque])

$tpl->show();

Muestra en pantalla el bloque definido por $bloque. Si este no se define, se muestra toda la plantilla.

string IntegratedTemplate::get ([string $block = "__global"])

$tpl->get();

Retorna en un string el bloque definido por $bloque. Si este no se define, se devuelve toda la plantilla.

void IntegratedTemplate::show ([string $bloque])

$tpl->show();

Muestra en pantalla el bloque definido por $bloque. Si este no se define, se muestra toda la plantilla.

AdjuntoTamaño
plantillas.zip28.92 KB
modelo.gif6.25 KB
‹ Actualización en como conectar PHP a Oracle: un aporte de usuario.arribaDe Plantillas y demases: el enfoque KISS ›
  • 9367 lecturas
Imagen de Jordi
Enhorabuena! es muy interesante el manual...

Enhorabuena! es muy interesante el manual...
Jordi

Enviado por Jordi (no verificado) el Lun, 26/01/2004 - 05:53.
Imagen de Php y otras yerbas, por Clbustos (trackback)
Curso de PHP VI. De Plantillas y demases, parte 1: el enfoque KI

Un viejo tema en todo foro de discusión que se precie de PHP es el uso de plantillas. En la Tercera parte del curso me di la lata de explicar el porque del uso de plantillas, las ventajas de separ

Enviado por Php y otras yerbas, por Clbustos (trackback) (no verificado) el Sáb, 02/04/2005 - 05:21.
icono de usuario
Gracias

me has ayudado mucho, me ha servidomontones esto de las plantillas y me gusto mucho..... besos

Enviado por Diana Mabel (no verificado) el Mar, 26/07/2005 - 13:59.
icono de usuario
Gracias.

La verdad, se agradece esta breve referencia, ya que en la web hay contenido, pero extenso y en ingles. Con este conpendio puedo trabajar mas rapido.

Enviado por Jack (no verificado) el Sáb, 17/06/2006 - 15:30.
icono de usuario
Miles Gracias¡¡¡¡

Realmenrte estoy agradecido y feliz de haber encontrado lo que tanto habia buscado, informacion clara concisa y en español de PHP, los felicito por el gran aporte que hacen a la gente que se inicia como yo a este apasionante mundo de la programacion en PHP.

saludos

Enviado por Alexnara (no verificado) el Sáb, 15/07/2006 - 01:47.

Enviar un comentario nuevo

El contenido de este campo se mantiene como privado y no se muestra públicamente.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Saltos automáticos de líneas y de párrafos.

Más información sobre opciones de formato

Principal » Curso de PHP