¿Qué es Smarty?

Smarty es un motor de plantillas Open Source para PHP que lleva muchos años en el mercado. Con él podremos realizar aplicaciones web de calidad separando el código (PHP) de la presentación (HTML/CSS).

smarty.jpgCuando empezamos a desarrollar con PHP solemos hacerlo usando málas prácticas, como mezclar PHP y HTML/CSS en el mismo fichero. Pero quizás lo hacíamos porque desconocíamos un motor de plantillas tan potente y completo como Smarty.

El lenguaje PHP es completamente abierto, en el sentido de que no requiere desarrollar en alguna arquitectura concreta, sino que un fichero puede contener un millón de líneas con código PHP y código HTML intercalados, lo cual tiene severas desventajas y problemas:

  • Un diseñador tendrá muy difícil manejar el código HTML/CSS de esa página.
  • La escalabilidad es prácticamente nula.
  • Mantener una aplicación así se complica progresivamente.
  • La depuración de ese tipo de aplicaciones se hace muy complicada.

Pero podemos escribir aplicaciones PHP usando motores de plantillas que separan la presentación (HTML/CSS) del código (PHP), solventando de este modo todos esos problemas, y ofreciéndonos además multitud de ventajas adicionales. Este es el caso de Smarty, un motor de plantillas ya veterano en el mercado.

Estas son las funcionalidades que podremos disfrutar con Smarty:

  • Plantillas limpias fáciles de usar por los diseñadores.
  • Escalabilidad.
  • Mantenimiento más sencillo (al igual que la escalabilidad, únicamente con la separación de código y presentación no se consigue un mantenimiento más sencillo, también se requerirá de una buena codificación).
  • Depuración óptima del código, al tener ficheros pequeños únicamente con código PHP.
  • Posibilidad de introducir comentarios dentro de las plantillas que no se enviarán al servidor. Ejemplo: {* comentario smarty *} en lugar de <!-- comentario HTML -->
  • Funciones integradas que facilitan el tratamiento de variables. Ejemplos: {foreach}{/foreach}, {if}{else}{/if}.
  • Funciones asistentes para generación de código HTML. Ejemplos: {html_image file=”banner.jpg”} generaría <img src="banner.jpg" alt="" width="700" height="55" />
  • Expandir Smarty con más funcionalidades mediante plugins.

Veamos un sencillo ejemplo de una aplicación hecha con Smarty:

index.php

<?php
include('libs/Smarty.class.php'); 
$frutas = array(
      array(
            'name'  => 'malus rosaceae',
            'url'  => 'http://es.wikipedia.org/wiki/Manzana',
            'image'  => 'http://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Fuji_apple.jpg/200px-Fuji_apple.jpg'
      ),
      array(
            'name'  => 'fragaria',
            'url'  => 'http://es.wikipedia.org/wiki/Fresa',
            'image'  => 'http://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Chandler_strawberries.jpg/225px-Chandler_strawberries.jpg'
      ),
      array(
            'name'  => 'citrus sinensis',
            'url'  => 'http://es.wikipedia.org/wiki/Naranja_%28fruta%29',
            'image'  => 'http://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Citrus_sinensis.jpg/300px-Citrus_sinensis.jpg'
      ),
);
$frutas_list = array('manzana','fresa','naranja'); 
$tpl = new Smarty();
$tpl->template_dir = './';
$tpl->compile_dir = './';
$tpl->config_dir = './';
$tpl->cache_dir = './'; 
$action = isset($_GET['action']) ? $_GET['action'] : 'list';
switch ($action) {
      case 'list':
            $tpl->assign('frutas',$frutas_list);
            $tpl->display('list.tpl');
            break;
      case 'detail':
            $id = isset($_GET['id']) ? intval($_GET['id']) : 0;
            $tpl->assign('fruta', $frutas[$id]);
            $tpl->display('detail.tpl');
            break;
} 

Con esta aplicación necesitaremos dos plantillas: list.tpl y detail.tpl

list.tpl

<html>
<head>
      <title>Listado de frutas</title>
</head>
<body>
<form>
      {* Con esta sentencia crearemos el HTML de un SELECT/OPTION *}
      {html_options options=$frutas name=id}
      <input type='hidden' name='action' value='detail' />
      <input type='submit' value='Ver' />
</form>
</body>
</html> 

detail.php

<html>
<head>
      <title>{$fruta.name}</title>
</head>
<body>
      <h1>{$fruta.name}</h1>
      <a href="{$fruta.url}"><img src="{$fruta.image}" /></a>
      <br />
      <a href=?action=list>Volver</a>
</body> 

Alternativa a Smarty

Otra opción totalmente válida es usar nuestro propio motor de plantillas, útil por ejemplo para proyectos pequeños que no requieran de todas las funcionalidades que ofrece Smarty.

TemplateEngine.class.php

?php
define('TEMPLATES_DIR', './templates/');
class TemplateEngine extends stdClass {
      public function fetch($__tpl) {
            foreach (get_object_vars($this) as $__name=>$__value) {
                  $$__name = $__value;
            }
            require(TEMPLATES_DIR . $__tpl);
      }
} 

index.php

<?php
include('TemplateEngine.class.php');
$tpl = new TemplateEngine();
$tpl->frutas = array('manzana','pera','fresa','platano','mandarina');
$tpl->fetch('ficha.tpl'); 

Lo que en Smarty sería algo como:

<?php
include('Smarty.class.php');
$smarty = new Smarty(); 
$smarty->assign('frutas', array('manzana','pera','fresa','platano','mandarina')); 
$smarty->display('ficha.tpl'); 

./templates/ficha.tpl

<html>
<head>
      <title>Sistema de plantillas sin Smarty</title>
</head>
<body>
      <ul>
      <?php foreach ($frutas as $fruta) : ?>
            <li><?=$fruta?></li>
      <?php endforeach; ?>
      </ul>
</body>
</html> 

Equivalente a la plantilla Smarty:

<html>
<head>
      <title>Sistema de plantillas sin Smarty</title>
</head>
<body>
      <ul>
      {foreach from=$frutas item=fruta}
            <li><{$fruta}</li>
      {/foreach}
      </ul>
</body>
</html>

Ya no hay excusa para hacer una aplicación web en PHP de calidad. Con un motor de plantillas como Smarty podremos crear una aplicación profesional invirtiendo muy poco tiempo.

Referencia:

Javier Perez
Experto en desarrollo web utilizando PHP y Javascript, además de XHTM/CSS, manupulación del DOM, AJAX, servicios web, desarrollador de extensiones para Firefox.

Muy interesante el tema de Smarty, en algún momento escuche sobre él, pero no tenía claras sus características y aspectos que lo hacen una útil herramienta. Ahora tengo más claro del lo que trata.

Hola! Seria bueno que hiciera un articulo de como usar smarty en formularios e ingreso de datos a mysql. seria muy util

Anonymous, indudablemente una buena forma de programar es muy importante en la escalabilidad. Pero la arquitectura más aconsejada y que de hecho se ha convertido en casi un estándar es el MVC, el cual, entre otras cosas, separa el código de la presentación, que es justo lo que provee Smarty o cualquier gestor de plantillas.

Piensa en la escalabilidad como en una propiedad de un proyecto que indica la facilidad de expansión de éste. Si tienes código PHP y HTML mezclado en 100 ficheros, y sólo lo manejan 2 programadores, posiblemente pienses que la escalabilidad es muy alta porque el código es bueno y os resulta muy fácil añadir más funcionalidades.

Pero si la empresa decide contratar a 10 diseñadores para que hagan 100 diseños distintos al día para el proyecto… muy difícil lo iban a tener por no decir imposible, y por lo tanto el valor de la escalabilidad sería prácticamente nulo.

Pero tienes razón en lo de que “es más trabajo”. A mayor escalabilidad, mayor trabajo al principio y menor después cuando se añada más funcionalidad (escalabilidad = facilidad de expansión de una aplicación); a menor escalabilidad, menor trabajo al principio y mayor trabajo después.

Me parece muy bien este tipo de plantillas, hace algún tiempo estaba tratando de modificar el CubeCart para adaptarlo a mis necesidades y encontré en su código que estaba separado el php del html, algo que me extraño, por que haste ese momento no habia visto nada parecido.
Luego de ver este artículo se me hace muy familiares la forma de usar el “Smarty” con las extensiones, código y plantillas del CubeCart, lo que me da la impresion que CubeCart utiliza estas plantillas (lo verificaré luego).

Lo de escalabilidad eso es muy práctico, y al comienzo hay que romperse el coco para crear códigos complejos que luego harán la vida más facil, en futuras ampliaciones y diseños completamente nuevos.

Ken Torrealba
El Callao – Venezuela

¿Alguien conoce si hay alguna alternativa al Smarty para ASP?, esta aplicación me parece genial pero no conozco nada similar en ASP y es el lenguaje que utilizamos nosotros :( si alguien me pudiese dar una pista al respecto le estaría muy agradecido.

Muchas gracias.

5h4rk
19/05/2007

Alguien ha escuchado de CodeIgniter? Que tambien es motor de platillas PHP. Me gustaria saber las diferencias entre CodeIgniter y Smarty. Gracias.

http://www.codeigniter.com/

V.Hormazabal
19/05/2007

5h4rk:
codeligniter y smarty son cosas diferentes. CodeIgniter es un framework es decir una aplicación que te permite hacer scripts en PHP en forma más rápida y simple, es decir programas completos, Smarty es sólo para plantillas.

Comenze a Usar CodeIgniter. es bastante bueno!. alguien conoce un articulos o algo que den ejemplo de Code igniter?

5h4rk
22/05/2007

Hay una documentacion bastante completa y detallada en la pagina oficial de Code Igniter. Tambien hay unos videos tutoriales basicos.

Si es verdad que es mas trabajo y que te tenes que tomar un tiempo para aprender a programar las plantillas con Smarty..
Pero como todo al principio cuesta hasta que le tomas la mano.. Lo que tenes que tener en cuenta si el proyecto que vas hacer va a tener futuro actualizaciones ya que es lo bueno de utilizar plantillas, es que para modificaciones futuras es mucho mas fácil

Saludos desde de E-OM.com.ar

julio enrique galvan carlos
23/05/2007

que es smarty o plantillas shp

Smarty es muy bueno, pero demasiado pesado para mi gusto. Empecé a utilizarlo y terminé por desecharlo creando un propio sistema de plantillas.

Con PHP si incurrir a un seudolenguaje se puede hacer exáctamente lo mismo y de manera mucho más fácil, rápida y eficiente. Ya de por sí PHP es un sistema de plantillas ;)

Miguel
24/05/2007

Hola a todos!
Estoy trabajndo con Smarty y pues la verdad es que mas de un dolor de cabeza me trajo, pero en gnral funciona muy bien, ademas de dar potentes funcionalidades. Pese a ello, tengo una duda: dentro de la pagina me aparece la descripcion de un producto con un fondo celeste. He buscando en todos lados, pero no encuentro la manera de hacerlo. Alguien sabe como?
La pagina en mencion se encuentra relacionada con “category.tpl.html”
Gracias de antemano por la ayuda.

Smarty es excelente!!!

Excelente articulo, en realidad smarty esta muy bueno, de hecho lo vengo usando hace unos años para algunos clientes y cuando voy teniendo tiempo en las nuevas versiones de nuestros sitios. Una cosa muy buena es que se lleva bien con ADOdb http://adodb.sourceforge.net/ la clase para PHP :).

Puedes crear un reporte igualando la variable smarty de la plantilla con el recordset del adodb, en una sola linea ;), esta muy bueno !!!

Ya era hora que hagan algo de esto para php asp.net con vs studio hace esto desde el 2001

Me toco hacer unas correcciones a un sitio que ya estaba hecho con smarty con una base de datos gigantesca, aunque al principio me mareo y me impresiono un poco por lo “bonito” que se ve el codigo con total separacion MVC , el sitio tenia varios problemas de lentitud en las consultas, me puse a buscar la razon de porque el buscador tardaba una eternidad al buscar, y por que la generacion de reportes en excel extraidos de mysql simplemente no funcionaba decentemente, al final dije smarty mis polainas, hice todo a mano de nuevo sin smarty en las paginas criticas, como mejor se hacerlo, y las aplicaciones me quedaron como 100 veces mas rapidas (no exagero), sin tener que cargar esas monstruosas librerias, ademas puedes tener bien separado el html del php en la misma pagina, tan solo evitando usar “echo” para generar html y en lugar de ello cerrar los tags php, por muy simplista que suene, asi el disenador puede meterle mano al diseno en un entorno totalmente WYSIWYG. sin tener que meterle mano al php, con herramienta tan comun como el Dreamweaver. Smarty mis polainas.

roro
13/03/2008

Hola vi este artículo, y la verdad esta muy bueno… habia escuchado hablar sobre plantillas pero no tenia idea de como usarlas.
Yo programo algo en web y siempre trate de separar los codigos: creaba funciones php para mostrar el html;el css lo tenia por aparte y ademas tenia un arhchivo con los JS.
Pero no podia separar todavia bien php de html, esto de usar plantillas esta muy bueno

Genial el artículo. El ejemplo funciona y es una gozada. La pena es encontrar estas cosas cuando tienes un desarrollo a medias :/ ! Pero bueno, creo que vale la pena adaptarlo a Smarty ;)

Que bueno es Smarty, pero cual es costo de utilizar este tipo de herramientas?.
Puedo dar un par de enlaces en los que detallan las falencias de un sistema de templates, que practicamente son aumentar el tiempo de ejecucion en casi un 80% y los recursos es la misma idea.
En general si estan en un proyecto grande, el cual requiere servir gran cantidad de paginas diariamente, utilizar Smarty u otros, es atroz.

http://mnm.uib.es/gallir/posts/2006/09/26/820/
http://www.sanrin.info/templates-ineficientes-15.html

Saludos,

Fiorella
22/09/2008

como usar smarty en formularios ??
podrian indicarme??

Yamilskate
20/04/2009

Hahaha exactamente amigo, cómo no encontre este articulo antes de comenzar mi gran sistema de generación de avalúos el cuál ya llevo el 90% :’( con esto me hubiese ahorrado mucho trabajo… =S

Franco Chamàs
10/07/2009

la verdad que resulta interesante la idea de separar el código, lo voy a investigar y les comento las dudas.

Danny
22/04/2010

PAra que usar Smarty …. creo que con buenas costumbres de programacion se puede separar codigo PHP del HTML sin necesidad de Smarty.

Se que no se logrará esto al 100%. PHP es por naturaleza un lenguaje embebido, pero encuentro absurdo cuando dicen que la solucion para separar CODIGO de PRESENTACION es SMARTY, cuando en realidad lo que se esta haciendo es reemplazar el codigo PHP por un nuevo codigo, el de SMARTY. MAs limpio? SI es cierto!! pero a costa de:
- Menor rendimiento de nuestros scripts
- Necesidad de aprender un “pseudolenguaje”

Repito…con muy buenas costumbres de programacion, no es necesario estos “inventos”.

En lugar de “jugar” con un motor de plantillas, pienso que es mejor dedicar ese tiempo a aprender un framework MVC.

Saludos

Dan

Si vieran lo facil que hace smarty el generar una web site amigable, les recomiendo usar, tengo muchos proyectos en smarty y corren a la perfección, lo importante es que facilita el trabajo considerablemente.

Saludos,

Carlos.

2646