En el artículo Smarty: razones para utilizar plantillas en mis proyectos les hablé sobre las principales características y razones por las que es importante conocer Smarty. También hablamos acerca de sus capacidades de una manera muy general. En este nuevo artículo veremos por qué considerar Smarty para nuestros proyectos y cómo empezar a utilizarlo.

Requerimientos

Smarty requiere un servidor web corriendo PHP 4.0.6 o posterior. Para obtener los archivos debemos descargarlos desde la página del proyecto Smarty. Ahí se encontrará la última versión del mismo.

Método de instalación

Existen varios métodos para instalar Smarty en nuestro proyecto, cuando hemos descargado el paquete comprimido, encontraremos una serie de carpetas. Los scripts del sistema están en el directorio de distribución /LIBS/. Smarty puede ser instalado en una carpeta fuera del directorio raíz dentro de nuestro servidor (configurando la directiva include_path en el archivo php.ini) o estar en una carpeta dentro de la estructura de directorios del sitio. Lo importante es que cuando creemos el objeto referencia, el interprete pueda localizar el archivo base Smarty.class.php: 

<?php
      # Ejemplo de inclusión del archivo Smarty.class.php y creación del
      # objeto Smarty
      require('/path/relativo|absoluto/Smarty.class.php');
      $smarty = new Smarty;
?>

Smarty utiliza cuatro directorios para procesar las plantillas: templates/, templates_c/, cache/ y configs/. Los directorios templates_c/ y /cache necesitan permisos de lectura y escritura. Estos directorios son por defecto, pero cuando se crea la instancia del objeto, pueden definirse en tiempo de ejecución: 

<?php
      require('Smarty.class.php');
      $smarty = new Smarty;
      $smarty->template_dir = '/smarty/templates/';
      $smarty->compile_dir = '/smarty/compiles/';
      $smarty->config_dir   = '/smarty/configs/'
      $smarty->cache_dir    = '/smarty/cache/'; 
      $smarty->assign('name','Ned');
      $smarty->display('index.tpl');
?>

Sintáxis básica:

Todas las etiquetas del template deben estar marcadas por delimitadores. Por defecto, estos delimitadores son { y }. En Smarty, todo el contenido fuera de los delimitadores es mostrado como contenido estático o igual (sin cambios). Cuando Smarty encuentra etiquetas en el template, trata de interpretarlos e intenta mostrar la salida apropiada en su lugar.

Cuando incluimos código en JavaScript o CSS dentro de la plantilla provocaremos un error. Esto suelen pasar por que este código utiliza también las llaves. La solución a este problema consiste en separar este código en archivos y utilizar el método estándar de HTML para su inclusión o la utilización de bloques {literal} {/literal} para agruparlos. Este bloque indica al motor de Smarty que no interprete el contenido del mismo.

Los comentarios son delimitados por {* y *}. Las variables son referenciadas con el signo de ( $ ) y las constantes con signo de numeral:

  • { * foo * } <-- comentario de plantilla, no se muestra en HTML
  • {$foo} <-- desplegando el valor de la variable
  • {$foo[4]} <-- desplegando el quinto elemento del arreglo
  • {$foo.bar} <-- mostrando el valor de la llave "bar"
  • {$foo.$bar} <-- mostrando el valor de la llave correspondiente al valor de la variable "bar"
  • {$foo->bar} <-- desplegando el valor de la propiedad bar (objeto)
  • {$foo->bar()} <-- desplegando el valor que regresa la función "bar()"
  • {#foo#} <-- mostrando el valor de la constante "foo"

Generalmente los valores de constantes son definidos en archivos de configuración almacenados en la carpeta /configs/ del directorio donde está trabajando Smarty y tienen una configuración especial. Su utilización es importante por muchos motivos, incluyendo texto en otros lenguajes o configuraciones de colores, frases cortas, etc. Para cargar un archivo de configuración dentro de la plantilla puede utilizarse la función: {config_load file="foo.conf"}

Dentro del archivo de configuración, la definición de las constantes puede ser:

  • pageTitle = “This is mine”
  • bodyBgColor = “#eeeeee”
  • tableBorderSize = “3”
  • tableBgColor = “#bbbbbb”
  • rowBgColor = “#cccccc”

Funciones:

Cada etiqueta Smarty muestra una variable o utiliza algún tipo de función. Las funciones son procesadas y mostradas colocando atributos de la función entre delimitadores. Los atributos en las funciones son colocados al mismo formato que los atributos HTML: 

{include file="header.tpl"} 
{include file="header.tpl" attrib_name="attrib value"} 
{include file=$includeFile} 
{include file=#includeFile# title="Smarty is cool"} 
{html_select_date display_days=yes} 
<select name="company">
{html_options options=$choices selected=$selected}
</select>

La variable reservada {$smarty}

Esta variable es de un caso especial dentro de la plantilla. Desde esta variable podemos acceder a objetos dentro de la plantilla, sentencias, bloques de instrucciones, variables y constantes de PHP, también proporciona un método para acceder a las constantes de archivos cargados y otras propiedades. Para mayor información, es recomendable leer el documento de ayuda de Smarty.

Modificadores de variables

Dentro de la plantilla podemos hacer modificaciones a las variables enviadas desde PHP. Smarty proporciona estos para trabajar dentro de la plantilla. Para aplicar un modificador, es necesario especificar el valor seguido por | (pipe) y el nombre del modificador. Si un modificador necesita parámetros estos siguen al nombre del modificador y son separados por : (dos puntos). 

{* aplicar modificador a la variable *}
{$title|upper} 
{* modificador con atributos *}
{$title|truncate:40:"..."}

También es posible combinar modificadores. Simplemente basta con colocar el siguiente con la misma sintáxis; separados por |(pipe).

Conclusiones

Este tipo de herramientas facilitan mucho el trabajo a los desarrolladores, lo importante es obtener de ellos todo el potencial. Utilizando Smarty en nuestros proyectos nos será de mucho beneficio, al desarrollar con la herramienta podemos separar la lógica de programación de la presentación y además involucrar a los diseñadores dentro del proceso.

Las plantillas pueden incluir programación pero al estar vinculada casi por completo a la presentación es mucho más fácil de comprender para los diseñadores, porque no incluye elementos confusos. Además, el diseñador puede hacer los cambios que quiera sin depender del programador.

NOTA: los ejemplos incluidos en este artículo fueron extraídos del manual de referencia de Smarty.

Lecturas recomendadas: