¿Qué es Smarty?

17.05.2007

¿Qué es Smarty?

Por Javier Perez | 11,880 Lecturas
Archivado en: PHP

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).

Cuando 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 
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:

Documentación de Smarty

Califica esta nota:

(12 votos, promedio: 4.33 de 5)

Loading ...

Sobre el autor

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.

Comentarios

20 comentarios en total.

Stephanie Falla Aroche 17.05.2007 - 12:21 - #

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.
Miguel 17.05.2007 - 14:31 - #

Hola! Seria bueno que hiciera un articulo de como usar smarty en formularios e ingreso de datos a mysql. seria muy util
Javier Pérez 18.05.2007 - 04:08 - #

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.
Ken Torrealba 18.05.2007 - 21:44 - #

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
Pempas 19.05.2007 - 04:39 - #

¿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 - 12:21 - #

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 - 14:37 - #

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.
Miguel 20.05.2007 - 15:26 - #

Comenze a Usar CodeIgniter. es bastante bueno!. alguien conoce un articulos o algo que den ejemplo de Code igniter?
5h4rk 22.05.2007 - 23:40 - #

Hay una documentacion bastante completa y detallada en la pagina oficial de Code Igniter. Tambien hay unos videos tutoriales basicos.
Sergio A. Niglia 23.05.2007 - 10:39 - #

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 - 18:42 - #

que es smarty o plantillas shp
Pablo 24.05.2007 - 09:59 - #

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 - 10:41 - #

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.
Desayunos Vip 25.05.2007 - 20:13 - #

Smarty es excelente!!!
elQuique 26.05.2007 - 15:30 - #

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 !!!
David Aponte 21.11.2007 - 12:12 - #

Ya era hora que hagan algo de esto para php asp.net con vs studio hace esto desde el 2001
Rodrigo 28.11.2007 - 06:48 - #

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 - 09:16 - #

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
Pau Gay 15.04.2008 - 04:34 - #

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
Víctor San Martín 27.06.2008 - 11:21 - #

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,

¿Qué es Smarty?

index.php

list.tpl

detail.php

Alternativa a Smarty

TemplateEngine.class.php

index.php

./templates/ficha.tpl

Referencia:

Sobre el autor

Comentarios

Editorial

Otras Notas Relacionadas

Boletín