seus

scripting
templates
para deixar
ainda
mais
inteligentes
Igor Escobar em DesenvolvimentoLinguagens
quarta-feira, 13 de maio de 2009
0SHARES|
Facebook

A-A+
Uma compilao de dicas e tcnicas muito teis para
se programar em
Smarty Template Engine e construir dinmicos e
inteligentes templates
para programadores PHP e designers de templates.
Uma tima fonte para
quem est comeando a codificar Smarty Templates.
Tenho certeza que
economizar muito tempo de procura.

1. Re-utilizao de cdigo HTML

Utilize a tag {caption} para gravar dentro de uma
varivel qualquer sada de html que estiver entre
o {caption} e o {/caption}. muito til quando
queremos re-utilizar o mesmo cdigo em vrios pontos
do nosso template.
No exemplo abaixo estamos atribuindo toda a sada
HTML para a varivel$nav:

{capture name='nav'}
<ul>
{section name=item loop=$nav}
<li><a href="{$nav[item].url}"
title="{$nav[item].title}">{$nav[item].label}</
a></li>
{/section}

</ul>
{/capture}
Mostra o contedo da caption $nav:

{$smarty.capture.nav}
Voc pode tambm setar a sada da caption para uma
varivel de template:

{capture name='nav' assign='navmenu'}

Para exibir:

{$navmenu}
Quando o name no especificado, o nome da
caption automaticamente setado como default:

{$smarty.capture.default}

2. Passando variveis para subtemplates

Usando $GLOBALS via {php}, para ns,
programadores, resolve o problema, certo? Mas
recomendado pelos designers de template que vocs
utilizem o {capture}.
Os designers de templates no querem colocar as suas
mos em cdigo
PHP, ento, vamos falar em uma linguagem que eles
tambm entendam.
Arquivo header.tpl

{capture name='columns'}3{/capture}
Ento, arquivo index.tpl

{include file='header.tpl'}
{if $smarty.capture.columns == '3'}

...
{/if}
{include file='footer.tpl'}
Pode at mesmo acessar a varivel dentro do
footer.tpl

{if $smarty.capture.columns == '3'}

...
{/if}

3. Incluindo sub-templates utilizando

delimitadores padro
Aqui temos um problema comum quando queremos
inserir variveis de
template dentro de arquivos javascript ou CSS. o
Delimitador { e }
utilizado por ambas linguagens, ento, vamos ter
conflitos.
main.tpl

{php}
$smarty = new Smarty;
$smarty->left_delimiter = '<!--{';
$smarty->right_delimiter = '}-->';
$smarty->assign('size', '36px');
$smarty->assign('pre', 'Great');
$smarty->assign('post', 'Templates');
$smarty->display(message.tpl');
{/php}
message.tpl

<style type="text/css">
<!-h2 {font-size: <!--{$size}-->}
-->
</style>
<h2>Welcome to the World of <!--{$pre|
capitalize}--> Smarty <!--{$post|capitalize}-></h2>
<script language="javascript"
type="text/javascript" >
<!-function welcome(){
alert('Welcome to the World of <!--{$pre|
capitalize}--> Smarty <!--{$post|capitalize}->');
}
welcome();
-->
</script>
O cdigo acima mostra o texto Welcome to the World
of Great Smarty
Templates com uma fonte de tamanho 26px e alerts
com o mesmo texto.

4. Debugando Smarty Templates

O Smarty tem um console para debug que permite que
voc facilmente
examine variveis de template, templates includos, e
variveis de
configurao para o template atual.

Para ativar o console de debug, defina a

propriedade $debugging do smarty como true:

<?php
$smarty = new Smarty;
$smarty->debugging = true;
...
?>
Se a janela do debug console no abrir quando a
pgina for carregada, sete a
propriedade $debug_tpl para o seu caminho path. Por
padro, Smarty vai olhar para o debug.tpl
no SMARTY_DIR. Este arquivo includo nas
distribuies do Smarty e pode ser achado na pasta
libs/.
O jeito mais fcil e mais rpido para habilitar o
debugging console colocando a tag {debug}
nos seus templates. Funciona da mesma forma. No
entanto, Isso s
permite visualizar todas as variveis disponveis dentro
do escopo do
template atual.
Exemplo:

<h1>{$title}</h1>
{debug}
<p>{$description}</p>

5. Acessando Request Variables via

Smarty Templates
Request Variables do PHP podem ser acessadas via
templates Smarty,
utilizando a varivel reservada {$smarty}. Request
Variables, incluindo

$_GET, $_POST, $_COOKIE, $_SERVER, $_ENV, e

$_SESSION.
Exemplos:
Valor de sada da varivel $_GET[page] da URL

{$smarty.get.page}
Valor de sada da varivel $_POST[page] do
formulrio

{$smarty.post.page}
Sada de uma varivel de cookie, $_COOKIE[status]

{$smarty.cookie.status}
Sada de uma varivel de servidor,
$_SERVER[SERVER_NAME]

{$smarty.server.SERVER_NAME}
Sada de uma varivel do ambiente do seu sistema,
$_ENV[PATH]

{$smarty.env.PATH}
Sada de uma varivel de sesso, $_SESSION[id]

{$smarty.session.id}
Sada da varivel username de todos os arrays juntos
(get/post/cookies/server/env)

{$smarty.request.username}

6. Acessando variveis de templates via

script PHP
Voc consegue acessar variveis do smarty utilizando
o mtodoget_template_vars()
no seus scripts PHP. No entanto, as variveis de
template s esto
disponveis depois do tempo de execuo e
interpretao dos seus
templates. Depois deste trabalho, as variveis so
diretamente
incorporadas para serem acessadas via PHP utilizando
a tag {php} ou incluindo um arquivo php utilizando uma
tag de funo built-in{include_php}.
Considere o seguinte template:

{assign var='title' value='Smarty Templates'}

Acessando as variveis depois da execuo do
template:

// Executa o template e retorna o resultado

para uma varivel
$page = $smarty->fetch('index.tpl');
// Vai mostrar "Smarty Templates"
echo $smarty->get_template_vars('title');
// Assina um valor para a varivel title
$smarty->assign('title', 'The Great Smarty
Templates');

// Vai mostrar "The Great Smarty Templates"

echo $smarty->get_template_vars('title');
// Vai exibir todas as variveis assinadas
dentro do template
var_dump($smarty->get_template_vars());
Existem dois jeitos de acessar variveis de tamplate
durante a execuo do template utilizando a tag {php}:

{php}
// using $this->_tpl_vars
echo $this->_tpl_vars['title'];
// using $this->get_template_vars() method
// the variable $this, is a smarty object
echo $this->get_template_vars('title');
{/php}

7. Substituio de variaveis em strings

com aspas duplas
Funciona muito parecido com o jeito que voc faz em
PHP quando
existem variveis dentro de aspas duplas e exibir os
seus respectivos
valores dentro dentro destas aspas.
Substituio simples
Com o $filename tendo o valor footer, o atributo file
vai apresentar o valor templates/footer.tpl.

{include file="templates/$filename.tpl"}
O cdigo acima no funciona com aspas simples:

{include file='templates/$filename.tpl'}
Array Indexes
Assumindo que $module[1] contm user_menu:
O $module[1] acima vai ser substitudo por
user_menu e ser traduzido dentro de
user_menu.tpl.

{include file="$module[1].tpl"}
Com o valor de $index igual a 1, o cdigo abaixo vai
fazer algo parecido com o cdigo de acima. Neste caso
anexo a backticks.

{include file="`$module[$index]`.tpl"}
Associative Arrays
Assumindo que $item[name] seja igual a Computer:
A varivel $item.name abaixo vai ser substituido de
Computer para Computer unit.

{assign var='label' value="`$item.name`

unit"}
Com o valor de $prop igual a name, o que temos a
seguir equivalente ao cdigo anterior.

{assign var='label' value="`$item.$prop`

unit"}
Objects

Temos uma propriedade dentro de um objeto chamada

$book->title que contm Smarty Templates.
O $book->title acima vai assumir o valor de Smarty
Templates mas $msg tem o valor My Smarty
Templates book.

{assign var='msg' value="My `$book->title`

book"}
Com a $property igual a title, $msg vai apresentar o
mesmo valor.

{assign var='name' value="`$book>$property`"}

Nota: Sempre anexe nomes de variveis com (`)
quando elas conterem pontos (.), objetos por referncia
(->), ou
quando usarem index variables para arrays.

8. Manuseando variveis de template em

branco
Variveis em branco podem quebrar o layout da sua
tabela. Variveis
com valores em branco podem ser um problema em
muitos casos, por
exemplo, se alguma imagem do seu layout vier de uma
varivel de
template, imagine esta imagem recebendo o src em
branco toda vez que
algum acessa sua pgina? Muitas requisies
perdidas, sem motivo?

Use a tag {if} para gerar uma sada padro sempre que
uma varivel estiver em branco. Ou use o atalho, A
varivel modificadora default.
Considerando o cdigo a seguir, exibir dentro da
clula de uma tabela:

<table><tr><td>
{if $user eq ''}
&nbsp;
{else}
{$user}
{/if}
</td></tr></table>
O shortcut:

<table><tr><td>{$user|
default:'&nbsp;'}</td></tr></table>
Esse o cdigo que maniputa a
propriedade src do img:

<img src="{if $image_url eq

''}/images/default.png{else}{$image_url}{/if}"
/>
Ou simplesmente:

<img src="{$image_url|
default:'/images/default.png'}" />
O shortcut pode ser bem limpo olhando assim, somente
neste tutorial,
mas se voc tiver o hbito de usar SEMPRE nos seus
templates, ao longo
do tempo isso pode ser meio feio de ser ver.

Por exemplo, considerando o cdigo abaixo:

<a href="{$image_url|
default:'/images/default.png'}">
<img src="{$image_url|
default:'/images/default.png'}" />
</a>
<p>Path: {$image_url|
default:'/images/default.png'}</p>
E, finalmente, aqui est um mtodo bem mais limpo
utilizando a tag{assign} com default.

{assign var='image_url' value=$image_url|

default:'/images/default.png'}
<a href="{$image_url}">
<img src="{$image_url}" />
</a>
<p>Path: {$image_url}</p>

9. Passando variveis para subtemplates

muito comum para os web developers e web
designers colocarem contedos repetitivos em
templates separados e {include}
(incluir) eles como necessrios. Um exemplo tpico o
header.tpl que
inclui a tag html title etc. Suponhamos que
precisaremos dele para
exibir diferentes ttulos em diferentes paginas
dependendo da pgina
que includa. Voc consegue fazer isso, utilizando o
atributo title da tag {include}, e assim que
passamos variveis para sub-templates no Smarty.

Exemplo de tamplate que inclui o header.tpl com o

parmetro title.

{include file='header.tpl' title='Welcome!'}

{include file='footer.tpl'}
No header.tpl

<html>
<head>
<title>{$title|default:'Smarty World'}</title>
</head>
<body>
No footer.tpl

</body>
</html>

10. Formatando sadas numricas

Voc no precisa assinar vrias variveis com os
mesmos valores em
diferentes formatos, porque o smarty possui um
modificador de
variveis que possibilita voc formatar a sada de uma
varivel sem
modificar seu contedo. string_format usa a mesma
formatting syntax
do sprintf() function do PHP.
Exemplo:

{$number}
{$number|string_format:'%.2f'}
{$number|string_format:'%d'}
Com o $number igual a 23.5787446, o cdigo acima vai
mostrar:

23.5787446
23.58
24

11. Manipulao de Datas

A regra da tumba PHP coders sempre vo passar
datas para o Smarty
como timestamps. Isso permite que os designers de
template utilizar o
date_format modifier para o controle total sobre a
formatao da
data. Voc pode tambm facilmente compar-las se
quiser.
date format Padro:

{$createDate|date_format}
Sada:
Feb 28, 2009
date format Customizado:

{$createDate|date_format:'%Y/%m/%d'}
Mostra:
2009/02/28
Comparando datas:

{if $startDate < $endDate}

. . . faa alguma coisa . .
{/if}
Para converter a sada do {html_select_date} para o
formato timestamp do PHP, use a funo a seguir:

<?php
function makeTimeStamp($year='',
$month='', $day='')
{
if(empty($year)) {

$year = strftime('%Y');
}
if(empty($month)) {
$month = strftime('%m');
}
if(empty($day)) {
$day = strftime('%d');
}
return mktime(0, 0, 0, $month, $day,
$year);
}
?>

12. Obfuscando endereos de e-mail

Quando voc exibe endereos de e-mail em suas
pginas, tenha certeza
de que estes esto obfuscados para os spam bots no
fazerem a festa com
eles. No Smarty, voc pode usar a {mailto} tag para
obfuscar qualquer endereo de e-mail. Functiona de
forma que voc
incorpora o endereo de e-mail via javascript, logo, o
mesmo no
aparece via cdigo HTML se voc exibir o cdigo fonte.
Exemplo

<div id="contact">Entre em contato pelo email:

{mailto address=$emailAddress
encode='javascript' subject='Hi Smarty'}
</div>

13. Alternando estilos CSS

comum possuirmos em nosso sistema tabelas, onde
cada linha aparece
de cor diferente para facilitar a leitura e a localizao
da
informao. No Smarty, utilizando o {cycle} tag voc
consegue alternar por exemplo o fundo de suas clulas
a cada siclo de um lao de repetio.
Aqui vai um cdigo que alterna entre as classes css
odd or even.

<table>
{section name=item loop=$items}
<tr class="{cycle values='odd,even'}">
<td>{$items[item].title}</td>
<td>{$items[item].description}</td>
</tr>
{/section}
</table>

14. Buscando e Apresentando Contedo

On Demand
Tradicionalmente, adicionamos componentes PHP
dentro do prprio
contedo para que esta tarefa seja possvel, porm,
isso requer um
pouco de lgica e de mais afinidade com o PHP. Por
outro lado,
removendo componentes do seus templates requer um
pouco de lgica de
programao para que voc consiga otimizar suas
rotinas em busca de um
melhor desempenho

Possvelmente a manuteno para estes tipos de

templates pode ser um
verdadeiro pesadelo para projetos mais longos e mais
complexos,
especialmente quando o programador PHP e o
template designer so duas
pessoas diferentes.
A soluo escrever componentes (functions) que so
executadas on demand (quando requisitadas) pelo
template.
Existem dois caminhos para se escrever on demand
scripts:
o

Use a tag {insert}

Funciona como se estivessemos chamando uma
funo pr definida pelo
programador. Essas funes comeam sempre com
insert_ e insere o
retorno das funes dentro do template onde a
tag {insert} colocada. A tag til para exibir
contedos dinmicos porque o contedo nunca
cachgeado regularmente.
O cdigo PHP:

<?php
require 'Smarty.class.php';
$smarty = new Smarty;
$smarty->display('index.tpl');
function insert_getNews($params)
{

if ($params['type'] == 'latest') {
// recebe as notcias e processa
}
// retorna o resultado
return $html;
}
?>
O template, chamado index.tpl:

<div class="news">
<h3>Latest Smarty News</h3>
{insert name='getNews' type='latest'}
</div>
o

Escreva componentes como plugins

Plugin um modulo que existe dentro do Smarty que
contm scripts
PHP para buscar e exibir dados necessrios e assinlos dentro de
variveis de template. sempre carregado on demand,
sendo assim, voc
no precisa se preocupar a respeito de adicionar ou
remover linhas de
lgica dos seus scripts para otimiz-los.
Como exemplo, aqui vai um simples plugin para
notcias:
function.news.php observe o naming convention e
coloque o arquivo dentro do diretrio de plugins,
geralmente
smarty/libs/plugins de outra maneira set
o $plugins_dir.

<?php
// function para receber as notcias

function fetch_news($symbol)
{
// o news items pode ser recebido pelo
banco de dados
// mas para este exemplo, eu s criei um
array para simular o retorno.
$items = array(
array('title'=>'Smarty News',
'description'=>'Great Smarty Templates'),
array('title'=>'PHP News',
'description'=>'Smarty Templating Engine'),
);
return $items;
}
function smarty_function_news($params,
&$smarty)
{
// chamando nossa funo personalizada
$news = fetch_news($params['symbol']);
// assinando como uma variavel de
template
$smarty->assign($params['assign'],
$news);
}
Para usar o plugin Smarty News no seu index.tpl:

{news symbol='SMARTY' assign='items'}

<ul>
{section name=item loop=$items}
<li><h3>{$items[item].title}</h3><p>{$items[
item].description}</p></li>
{/section}
</ul>

15. Utilizando Cdigos CSS e Javascript

Dentro de Templates Smarty
Por padro, Smarty divide tudo que esta dentro de { e }
incluindo os utilizados pelas regras CSS e funes
Javascript.
Existem quatro caminhos para escapar da diviso
do Smarty:
1. Separe seus arquivos CSS e Javascript em
arquivos separados de forma que voc possa inclu-los
dentro do seu
template utilizando os mtodos padro do HTML.
Incluindo o estilo CSS:

<link rel="stylesheet" href="style.css"

type="text/css />
Incluindo arquivos Javascript:

<script type="text/javascript"
src="popup.js"></script>
2. Adicione a tag {literal} no incio e no fim {/literal} de
cdigos CSS ou Javascript que estejam incorporados
ao seu documento, assim, o Smarty vai deixar tudo o
que estiver entre o {literal} e {/literal} em paz.

CSS Incorporado:

<style type="text/css">
<!-{literal}
p {text-indent: 10pt}
body {margin:0; padding:0;}
{/literal}
-->
</style>
Javascript Incorporado:

<script language="javascript"
type="text/javascript" >
<!-{literal}
function hello_world(){
alert('Hello Smarty World');
}
{/literal}
-->
</script>
3. Mude o Smarty $left_delimiter e $right_delimiter
de forma que os delimitadores no se confundam com
os delmitadores de
outras linguagens. Alm disso, isso possibilita que voc
insira
variveis de template dentro de arquivos CSS e
Javascript dinmicamente.
O Cdigo PHP:

<?php
require 'Smarty.class.php';

$smarty = new Smarty;

$smarty->left_delimiter = '<!--{';
$smarty->right_delimiter = '}-->';
$smarty->assign('title', 'The Smarty
Template Engine');
$smarty->assign('element', 'h1');
$smarty->assign('size', '36px');
$smarty->assign('popup', 'alert');
$smarty->display('index.tpl');
?>
O Smarty Template index.tpl:

<head>
<style type="text/css">
<!-<!--{$element}--> {font-size: <!--{$size}-->}
-->
</head>
<body>
<<!--{$element}-->><!--{$title}--></<!-{$element}-->>
<script language="javascript"
type="text/javascript" >
<!-function show_popup()
{

<!--{$popup}-->('<!--{$title}-->');
}
//-->
</script>
</body>
O cdigo acima vai mostrar:

<head>
<style type="text/css">
<!-h1 {font-size: 36px}
-->
</head>
<body>
<h1>The Smarty Template Engine</h1>
<script language="javascript"
type="text/javascript" >
<!-function show_popup()
{
alert('The Smarty Template Engine');
}
//-->
</script>
</body>
4. Use {ldelim} e {rdelim} no lugar de { and } na
definio das regras dos seus arquivos css e na hora
de escrever funes javascript.
Exemplo, arquivos CSS:

<style type="text/css">
<!-p {ldelim}text-indent: 10pt;{rdelim}
body {ldelim}margin:0; padding:0;
{rdelim}
-->
</style>
Mostrar:

<style type="text/css">
<!-p {text-indent: 10pt;}
body {margin:0; padding:0;}
-->
</style>

16. Caching Smarty Templates

Caching aumenta a velocidade em metodos do tipo
display() e fetch()
salvando a sada destes metodos em arquivos
separados. Vale lembrar
que o cache somente utilizado se o contedo no
mudou. Set $caching =
2 e utilize o $cache_lifetime para controlar quanto
tempo o cache da informao dever ser matido para
depois ento ser atualizado.
Ativando o cache:

<?php
require 'Smarty.class.php';
$smarty = new Smarty;
// Quando $caching = 1,

// $cache_lifetime = 1 fora o cache

para nunca expirar
// $cache_lifetime = 0 vai sempre
regenerar o cache
// Quando $caching = 2,
// $cache_lifetime seta a vida do
cache, mas o mesmo pode ser setado para
templates individuais.
$smarty->caching = 2; // lifetime para
cada cache
// Regenera o contedo cacheado se
nenhum template ou arquivo de
configurao for parte do cache que estiver
sendo modificado.
$smarty->compile_check = true;
// $smarty->force_compile = true; vai
forar o cache ser sempre regenerado
// assume o cache_lifetime para o
template index.tpl para 5 minutos
$smarty->cache_lifetime = 300;
$smarty->display('index.tpl');
// assume o cache_lifetime para o
template home.tpl para uma hora
$smarty->cache_lifetime = 3600;

$smarty->display('home.tpl');
?>
Duas coisas que devem ser consideradas quando
implementamos caching:
1.
No recomendado colocar o diretrio de cache
abaixo da pasta raiz do servidor. Set $cache_dir para
um diretrio que
no seja acessvel via web.
2.
Tenha certeza de que o diretrio do cache tem
permisso de escrita no servidor.
Enfim, conclumos. 16 Tcnicas Smarty Scripting para
deixar seus
templates ainda mais inteligentes para o seus projetos
Web Smarty.
Para qualquer outra coisa, visite o site oficial do Smarty
Template Engine para o PHP.
Se voc tem alguma outra dica que no foi includa
aqui, sinta-se vontade para inclu-la nos comentrios.
Este artigo uma traduo/adaptao do artigo 16 Very
Useful Sm