2Likes
LinkBack URL
About LinkBacks
Introducción a Smarty
Are you serious!?
Of course, dude!
¿Y qué diablos se supone que es 'Smarty'?
Smarty es lo que se conoce como un Template Engine. En pocas palabras, se puede describir como una librería que te permite separar el diseño del código en tu web, para hacerla así más flexible y organizada.
¿Y como se utiliza Smarty?
Eso veremos ahora.
Comenzando
En primer lugar, este tutorial pretende introducir a los nuevos usuarios a Smarty. Es extremadamente básico... EXTREMADAMENTE básico.
Aunque me gustaría mucho explicar todas las ventajas, características y posibilidades, no lo voy a hacer porque para ello está su completo manual oficial en español, que recomiendo leer. Mi objetivo será adentrar de forma rápida a los usuarios a través de la práctica. Osea, vamos a hacer un mini-sitio básico.
En busca de los requisitos
PHP, por supuesto, es básico.
También hará falta descargar la librería con la que trabajaremos. Podrán encontrar su última versión en http://www.smarty.net/download.php bajo el título de Latest Stable Release.
Un requisito también es el tener una idea básica de php. En los ejemplos de mysql no explicaré nada del tema de base de datos, ni explicaré sobre los bucles y los arrays.
Descargado y descomprimido
Ahora podemos proceder a subir los archivos a nuestro hosting, o ubicarlos en nuestro servidor local, o donde sea que pueda funcionar. En este tutorial, tendremos un directorio que contendrá los archivos: index.php, content.php. Y las carpetas libs/, configs/, cache/, templates/, templates_c/.
La carpeta libs es la extraída del archivo descargado de smarty.net, y contiene todos los archivos de la librería, necesarios para que Smarty funcione.
Archivito de configuración
Este archivo, que yo llamaré smarty.init.php, contendrá unas pocas líneas para crear una instancia de Smarty.
smarty.init.php
Fácil. Con esto, teóricamente, deberíamos tener nuestro smarty funcionando! Ahora vamos a usarlo.PHP Code:<?php
##
# Tutorial Smarty @ por eZakto
##
// Incluimos el siguiente archivo, que básicamente carga toda la librería.
require('libs/Smarty.class.php');
// Bien, ahora creamos un objeto Smarty, que llamaremos template.
$template = new Smarty;
// Y lo siguiente será configurar los directorios previamente creados.
// La ruta a estos directorios puede ser o bien relativa, o bien absoluta.
$template->template_dir = 'templates/';
$template->compile_dir = 'templates_c/';
$template->config_dir = 'configs/';
$template->cache_dir = 'cache/';
?>
Armando el sitio
Bien. Vamos a armar el sitio. Primero vamos a obtener todo el contenido. No esperen maravillas, esto será tremendamente simple.
index.php
Listo. Ahora debemos crear el archivo index.tpl, que será nuestro diseño, y debemos mostrar la variable asignada desde el código. Para mostrarla, indicamos su nombre como una variable php, pero entre llaves ('{' y '}').PHP Code:<?php
##
# Tutorial Smarty @ por eZakto
##
// Incluimos nuestro archivo base.
include('smarty.init.php');
// Ahora vamos a obtener la IP del visitante por medio de la superglobal $_SERVER, y la vamos a pasar al template.
$ip = $_SERVER['REMOTE_ADDR'];
/* Con el método 'assign' de Smarty, pasamos contenido del código al template.
Primer argumento: nombre de la variable en el template. Segundo argumento: contenido. */
$template->assign('user_ip', $ip);
/* Ok. Ahora debemos indicar qué template queremos mostrar. Para ello, usamos el método 'display'.
Su único argumento será el nombre del archivo de template, que se encuentra en el directorio template/. */
$template->display('index.tpl');
?>
templates/index.tpl
La página más compleja del mundo.HTML Code:<html> <head> <title>Mi web con Smarty</title> </head> <body> <p> ¡Hola, visitante! Su IP es {$user_ip}. </p> </body> </html>
Si visualizamos el archivo index.tpl como html, veremos el texto "¡Hola, visitante! Su IP es {$user_ip}". Pero si ejecutamos el archivo index.php, veremos el texto "¡Hola, visitante! Su IP es 123.233.12.103", por poner un ejemplo. Nuestra web con smarty ya está funcionando.
Haciendo algo más interesante
Bien. Ahora vamos a un ejemplo un poco más complejo. Suponiendo que queremos cargar contenido dinámico de una base de datos MySQL, digamos, noticias. ¿Qué hacemos? Nada muy diferente al ejemplo anterior. Sólo que debemos obtener dichos datos. En este ejemplo obtendremos un array y lo pasaremos.
contents.php
Y ahora nos vamos al template. Si tenemos un array, para acceder a sus elementos, no usamos '[' y ']' como en la sintaxis de php, sino que accedemos a ellos a través del punto. Por ejemplo: {$array.elemento}. Veamos.PHP Code:<?php
##
# Tutorial Smarty @ por eZakto
##
// Incluimos nuestro archivo base.
include('smarty.init.php');
// Conectamos y seleccionamos la base de datos.
$link = mysql_connect('localhost', 'usuario', 'contrasena');
mysql_select_db('mi_db', $link);
/* Supongamos que tenemos la tabla "noticias", y esta tiene 3 campos: id, titulo, texto.
Ejecutamos una sentencia sql para seleccionar la última noticia (basándonos en la id). */
$query = mysql_query("SELECT * FROM noticias ORDER BY id DESC LIMIT 0,1");
// Y de este resource, obtenemos un array asociativo.
$noticia = mysql_fetch_assoc($query);
// Ahora repetimos los pasos anteriores.
// Sólo que esta vez, pasaremos un array en vez de una variable.
$template->assign('noticia', $noticia);
$template->display('contents.tpl');
?>
templates/contents.tpl
Y ejecutamos el archivo contents.php para ver nuestra obra de arte funcionando :' ) .HTML Code:<html> <head> <title>Mi web con Smarty</title> </head> <body> <h1>Últimas noticias</h1> <h2>{$noticia.titulo}</h2> <p>{$noticia.texto}</p> </body> </html>
¡Yo quiero que muestre más noticias!
Todos lo queremos. Por eso vamos a hacerlo. En el código php anterior, vamos a hacer unos cambios. Vamos a crear un array que contenga en cada uno de sus elementos, un array asociativo de una noticia. Modificamos las siguientes líneas:
Pasará a ser:PHP Code:$query = mysql_query("SELECT * FROM noticias ORDER BY id DESC LIMIT 0,1");
Para seleccionar las últimas 5 noticias.PHP Code:$query = mysql_query("SELECT * FROM noticias ORDER BY id DESC LIMIT 0,5");
Luego, eliminamos esto:
Y en su lugar, creamos un array vacío y con un bucle while le vamos insertando los arrays obtenidos por noticia:PHP Code:// Y de este resource, obtenemos un array asociativo.
$noticia = mysql_fetch_assoc($query);
Y finalmente cambiamos esta línea:PHP Code:$noticias = array();
while($fila = mysql_fetch_assoc($query)) {
array_push($noticias, $fila);
}
Por:PHP Code:$template->assign('noticia', $noticia);
Bien. Ahora reharemos el template. Como estamos pasando el array multidimensional $noticias, debemos recorrerlo con un bucle para ir mostrando cada noticia. Para eso usamos el equivalente Smarty de la función foreach de php.PHP Code:$template->assign('noticias', $noticias);
templates/contents.tpl
WOW! Qué fácil! Lo que hicimos fue usar la función incorporada foreach. Recorremos el array $noticias ('from=$noticias') refiriéndonos a cada uno de sus elementos como "noticia" ('item=noticia').HTML Code:<html> <head> <title>Mi web con Smarty</title> </head> <body> {foreach item=noticia from=$noticias} <h1>Últimas noticias</h1> <h2>{$noticia.titulo}</h2> <p>{$noticia.texto}</p> <br /> {/foreach} </body> </html>
Eso es todo amigos!
Lo que se ha visto aquí es SUPER BÁSICO. Para comprender mejor la sintaxis de smarty, los métodos de la clase y demás, a leer: http://www.smarty.net/manual/es/ .
Algunos tips
Si se quiere mostrar cosas como "{$variable}" literalmente, o no se quieren tener errores en estilos incorporados (css), debemos usar la función incorporada {literal}. Todo lo que esté entre los tags {literal} y {/literal} no será parseado por smarty.
Se pueden definir variables "omnipresentes" en archivos de configuración, y ser llamadas en los templates de forma {#variable#}. En el manual se explica claramente.
Hay varias funciones integradas, como {if} (condicional), o {include} (para incorporar otros archivos de template en el actual). Es muy útil saber usarlas.
------------------------
Como siempre, no probé nada. Si hay algún error me avisan.
Saludos!
Reply With Quote
Re: [TUTORIAL] Introducción a Smarty
