Desenvolvimento com templates: obtendo o máximo de ... · Desenvolvimento com templates: obtendo o máximo de aproveitamento dos recursos do Smarty Adriano Gonçalves [email protected]

Desenvolvimento com templates: obtendo o máximo de aproveitamento dos recursos do Smarty

Adriano Gonç[email protected]

Agenda

IntroduçãoO Smarty e suas vantagensAlguns recursos muito úteisEstruturando um site com SmartyEscrevendo pluginsSmarty e AJAXSmarty e XoopsEditores que suportam Smarty

Onde estamos...

<HTML>

Páginas estáticas HTML

<HTML>Ms Front

Page

CGI,<% ASP %>,<?PHP ?>...

Geradores off-line de páginas HTML estáticas

Disseminação dos websites dinâmicos

(webmails, e-commerce, portais,

etc.)

Sistemas web /“Web 2.0”

Introdução

Exemplo de página dinâmica em PHP

Introdução

Código da página

Introdução

E se fosse assim?...

Introdução

... e assim?

Introdução

Desenvolvimento com templates - vantagens● Separar interface da lógica da aplicação● Melhor divisão de trabalhos● Melhor legibilidade, manutenibilidade e

reutilização de códigos● Flexibilidade para criar layouts diferentes para

uma mesma aplicação● Flexibilidade para mudar o layout da aplicação

em menos tempo● Flexibilidade para utilizar as mesmas páginas

para mídias diferentes (browser desktop, Palm, celular...)

Introdução

Agenda


O que é o Smarty?● “É um sistema de

templates para PHP: ele fornece uma maneira fácil de controlar a separação da aplicação lógica e a sua apresentação (interface).”

● Atualmente está na versão 2.6.14

O Smarty e suas vantagens

Algumas vantagens do Smarty● Ótimo desempenho de execução (compila uma vez

e deixa o PHP executar)● Sintaxe dos delimitadores configurável● Uso de funções de desvio condicional, como if-

elseif-else, e foreach, podendo usar expressões simples ou complexas

● Modo de cache embutido● Flexibilidade de ser extendido com plugins● Excelente documentação (inclusive em Português)


Manual do Smarty em CHM


Agenda


Estendendo a configuração

Alguns recursos muito úteis

Instanciando o Smarty


O arquivo de configuração


tituloPagina = "Menu Principal"corfundoPagina = #000000corfundoTabela = #000000corlinhaTabela = #00ff00

[Consumidor]tituloPagina = "Informações do Consumidor"

[Login]tituloPagina = "Login"focus = "nomeusuario"Intro = """Este é um valor que ultrapassa uma

linha. Você deve colocá-lo

dentre três aspas."""(Extraído do Manual do Smarty)

Variáveis● Definindo variáveis no PHP...:

$template->assign(“nome”,”Adriano”);$template->assign(“sexo”,”M”);

● ...e mostrando no template:

Olá, {$nome}!<br>{if $sexo == “M”}Seja bem-vindo!{else}Seja bem-vinda!{/if}


Variáveis● ...que, ao executar a página, irá mostrar:

Olá, Adriano!<br>Seja bem-vindo!


A variável $smarty● Permite acessar variáveis de sistema ($_GET,

$_POST, $_SERVER, $_SESSION...)● Permite acessar constantes do PHP● Permite acessar algumas das entidades do

Smarty (foreach, section, etc.)● Outros recursos: now, ldelim, rdelim...


A variável $smarty - exemplos

Olá, {$nome_usuario}!Hoje é {$smarty.now|date_format:"%A, %d de %B

de %Y"}.

Mostra:Olá, Adriano!Hoje é Sexta, 1 de dezembro de 2006.


A variável $smarty - exemplos

Nome do servidor: {$smarty.server.SERVER_NAME}

Mostra:Nome do servidor: localhost


Modificadores de variáveis● Podem ser aplicados a variáveis, funções

personalizadas ou strings. Ex.:

<h1>{$titulo|upper}</h1>

<img src=”imagemdim.php?imagem={$url_imagem|escape:'url'}max_width=500”>

Nome: {$nome_pessoa|escape:'htmlall'}

Bem-vindo (a) {$nome_usuario|default:'visitante'}!


Modificadores de variáveis● Fazendo uma listagem de notícias com resumo:

PHP:...$query = mysql_query("SELECT * FROM noticias LIMIT 5");while($linha = mysql_fetch_array($query)){ $noticia_atual["titulo"] = $linha["not_titulo"]; $noticia_atual["texto"] = $linha["not_texto"]; $noticia_atual["link"] = "noticia.php?id=".$linha["not_id"]; $template->append("noticias",$noticia_atual);}$template->display("listagem_noticias.tpl");


Modificadores de variáveis● Template:

<ul id="lista_noticias"> {foreach from=$noticias item=not_atual} <li> <a href="{$not_atual.link}"> <strong>{$not_atual.titulo}</strong></a> - {$not_atual.texto|strip_tags|truncate:200} </li> {/foreach}</ul>


Modificadores de variáveis● Resultado:


Modificadores de variáveis● Removendo links HTML de um conteúdo:

Template:

{$conteudo|regex_replace:'/<a[^>]*>|<\/a>/':''}


Funções● O Smarty possui uma série de funções internas e

personalizadas, e é possível criar novas. Alguns exemplos:

● Foreach-foreachelse – loop que varre um array

{foreach from=$noticias item=not_atual} <div class=”noticia”> <strong>{$not_atual.titulo}</strong> </div>{foreachelse} Ainda não há nenhuma notícia cadastrada.{/foreach}


Funções - Exemplos● cycle – faz um ciclo, alternando entre valores

<ul id="lista_noticias"> {foreach from=$noticias item=not_atual} <li class="noticia_{cycle values='par,impar' name='noticias'}"> <a href="{$not_atual.link}"> <strong>{$not_atual.titulo}</strong></a> - {$not_atual.texto|strip_tags|truncate:200} </li> {/foreach}</ul>


Funções - Exemplos● Resultado:


Funções - Exemplos● html_table - cria uma tabela html com os dados

fornecidos

PHP:

$pessoas = array(“Nome”,”Endereço”);while($linha = mysql_fetch_array($query)){ $pessoas[] = $linha[“pessoa_nome”]; $pessoas[] = $linha[“pessoa_end”];}$template->assign(“pessoas”,$pessoas);$template->display(“listagem_pessoas.tpl”);


Funções - Exemplos● html_table

Template:

{html_table loop=$pessoas cols=2}

...ou, melhorando um pouco...:

{html_table loop=$pessoas cols=2 table_attr="cellspacing='0' border='1'"}


Funções - Exemplos● html_table - Resultado:


Funções - Exemplos● Outra aplicação prática do html_table...

(Foto ilustrativa, só pra exemplificar)


Funções - Exemplos● html_options – faz uma lista de <option> para

adicionar em listboxes● Fazendo uma listbox de estados:

PHP:

while($linha = mysql_fetch_array($query)){ $estados[$linha[“uf_sigla”]] = $linha[“uf_nome”];}$template->assign(“estados”,$estados);$template->display(“pagina_estados.tpl”);


Funções - Exemplos● html_options – fazendo uma listbox de estados

Template:

Estado: <select name="estado"> {html_options options=$estados}</select>


Funções - Exemplos● html_options – fazendo uma listbox de estados

Resultado:


Funções - Exemplos● literal - Serve para ignorar a interpretação do

conteúdo interno de um bloco

<script language=”Javascript”>{literal}function confirma_envio(form){ if(form.nome == “”){ return false; } else return true;}{/literal}</script>


Funções - Exemplos● strip – elimina espaços e quebras de linha extras

{strip}<div id=”menu”> <img src=”opc_1.jpg”> <img src=”opc_2.jpg”> <img src=”opc_3.jpg”></div>{/strip}

Mostrará: <div id=”menu”><img src=”opc_1.jpg”><img src=”opc_2.jpg”><img src=”opc_3.jpg”></div>


Funções - Exemplos● include – permite incluir outro template.

Ex.

{include file=”cabecalho.tpl”}

Olá, mundo!

{include file=”rodape.tpl”}


Modelo RSS

Agenda


Estrutura básica

Template de página principal

Template incluído

Powered by Nonono nono

● Duas opções básicas

Subtemplates●Notícia 1●Notícia 2●Notícia 3

Usando um template principal com a estrutura do site

Separando cabeçalho e rodapé em templates diferentes

Template cabeçalho

Powered by Nonono nono

Template rodapé

Template corpoda página atual

Subtemplates●Notícia 1●Notícia 2●Notícia 3

Estruturando um site com Smarty

Estrutura básica● Usando template principal

– Dá ao designer uma visão do todo da página para manipular

– Tira a preocupação de ficar acrescentando dois includes em todo template

● Separando cabeçalho e rodapé– Permite trabalhar melhor situações específicas para

sites variam mais o layout de seção para seção


Usando um template principal● Template principal (paginas_padrao.tpl):

...<body><div id=”cabecalho”> Cabeçalho da página</div><div id=”conteudo_pagina”> {include file=$templateInclude}</div><div id=”rodape”>Powered by Nononono</div></body></html>


Usando um template principal● Template da página inicial (inicial.tpl):

Olá, {$nome}, seja bem vindo(a) ao nosso web site!

{include file=”listagem_noticias.tpl”}


Usando um template principal● Código PHP (index.php):

...$template = new Smarty_MeuSistema();

$template->assign(“nome”,”Adriano”);

$template->assign(“pagina_atual”,”inicial”);$template->assign(“templateInclude”,”inicial.tpl”);$template->display(“paginas_padrao.tpl”);


Outras considerações● Procure “modularizar” os templates

que você faz, criando templates reaproveitáveis

● Procure separar as partes que se repetem muito

● Procure não quebrar demais o site em muitos templates desnecessariamente

● Procure manter um padrão de templates na sua empresa


Agenda


Tipos de plugins● Funções● Modificadores● Funções de bloco● Funções de compilador● Prefiltros● Posfiltros● Filtros de saída● Recursos (resources)● Insert

Escrevendo plugins

Exemplo de plugin modificador● Fazendo uma str_pad

<?phpfunction smarty_modifier_str_pad($valor,$tamanho, $string, $tipo){ return str_pad($valor,$tamanho,$string,constant($tipo));}?>

Escrevendo plugins

Exemplo de plugin modificador● Adicionando ao diretório de plugins

Escrevendo plugins

Exemplo de plugin modificador● Chamando...:

{foreach from=$produtos item=p_atual}<br>{$cod_produto|str_pad:5:”0”,”STR_PAD_LEFT”} - {$nome_produto} {/foreach}

Irá mostrar:00001 – Mouse sem fio00020 – Teclado sem fio

Escrevendo plugins

Agenda


Smarty e AJAX

Exemplo prático

Agenda


Smarty e Xoops (eXtensible Object Oriented Portal System)

● Xoops é um Sistema de Gerenciamento de Conteúdos para portais desenvolvido em PHP e MySQL

● Trabalha com templates desenvolvidos em Smarty

Portal da Comunidade XoopsTotalwww.xoopstotal.com.br

Smarty e Xoops

Algumas dicas...● Demonstração prática

– Fazendo um bloco que só aparece na página inicial– Fazendo um bloco que aparece somente em um

módulo– Debug: A melhor forma de descobrir as possibilidades

● Mais informações:– www.xoops.org – www.xoopstotal.com.br

Smarty e Xoops

http://www.xoops.org/

http://www.xoopstotal.com.br/

Agenda


Algumas opções de editores● Crimson editor (http://www.crimsoneditor.com/)

Editores que suportam Smarty

Algumas opções de editores● VisualPHP IDE Visual Studio.Net

(http://www.jcxsoftware.com/jcx/vsphp)


Algumas opções de editores● Macromedia Dreamweaver

– http://www.adobe.com/products/dreamweaver/– Como configurar syntax highlighting:

http://smarty.incutio.com/?page=ConfiguringDreamweaver

● Extensões para vários outros editores: http://smarty.php.net/contribs/syntax_highlighting/


http://www.adobe.com/products/dreamweaver/

http://smarty.php.net/contribs/syntax_highlighting/

Concluindo...● Desenvolvimento com templates é uma ferramenta

que promove melhor divisão de trabalho, manutenibilidade e reutilização de códigos

● Smarty é um sistema de templates em PHP que provê uma série de recursos para facilitar essa divisão de trabalho programador/designer

● Smarty é extensível: você pode criar mais recursos através da criação de plugins

● Xoops é um sistema de portais que que se utiliza da flexibilidade do Smarty para fazer os temas

Perguntas?

Referências● Smarty - a ferramenta para compilar templates

para PHP (Manual do Smarty)● http://smarty.php.net/● http://cirofeitosa.com.br/● http://www.xoopstotal.com.br/● Google

http://smarty.php.net/

http://cirofeitosa.com.br/

http://www.xoopstotal.com.br/

Contato● Meu e-mail: [email protected]● Meu website: http://adriano.ison.com.br/

mailto:[email protected]

http://adriano.ison.com.br/

Documents

Desenvolvimento com templates: obtendo o máximo de ... · Desenvolvimento com templates: obtendo o máximo de aproveitamento dos recursos do Smarty Adriano Gonçalves [email protected]