[PHP] Sistema de plantillas con Smarty

Introducción

Un sistema de plantillas (template engine) es un framework que te permite separar la vista del modelo y el controlador (MVC) de manera casi obligatoria.

Por motivos de trabajo durante algunos meses me tocó pelearme con un sistema de plantillas llamado Smarty. Vamos a ver qué nos ofrece y como utilizarlo.

Parte PHP

El paso de variables desde PHP es realmente sencillo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//Llamamos a la clase de Smarty
require_once("Smarty/libs/Smarty.class.php");  
 
//Creamos nuestra plantilla
$miSmarty = new Smarty();         
 
//Configuramos los directorios
$miSmarty->template_dir = 'templates';
$miSmarty->config_dir = 'config';
$miSmarty->cache_dir = 'cache';
$miSmarty->compile_dir = 'templates_c'; 
 
//Asignamos variables
$miSmarty->assign("titulo", "Formulario de Consultas");
$miSmarty->assign("fecha_hoy",date("m.d.y"));           
 
//Nos guardamos el html y lo mostramos
$html_final = $miSmarty->fetch("miplantilla.tpl");
echo $html_final;                            
 
//O mostramos la plantilla
$miSmarty->display("miplantilla.tpl.html");

Parte Smarty

Teniendo el codigo anterior veamos que pinta tendría nuestra plantilla (miplantilla.tpl.html)

1
2
3
4
5
6
7
8
9
10
11
12

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
{*Comentario en Smarty*}
<title>{$titulo}</title>
</head>
<body>         
 
{*Notese que usamos siempre el mismo 
nombre que le pusimos en el script de PHP*}
Hoy estamos a {$fecha_hoy}
</body>
</html>

Precauciones sobre el uso

Cuando utilicemos Javascript tenemos que empezar antes del código con {literal} y después terminamos con {/literal}.

Esto, como podrás suponer, es para que no haya lío entre la sintaxis de javascript y el sistema de plantillas. Si en mitad del código de js queremos introducir código smarty simplemente hacemos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   {literal}
   <script>
   //código javascript
   var fecha = {/literal}{$fecha_hoy}{literal};
   //Más código 
   </script>
   {/literal}
 </head>
 
 <body>
  ...
 </body>
</html>

Enlaces