Desenvolvimento com templates: obtendo o máximo de ... · Desenvolvimento com templates: obtendo o...
Transcript of Desenvolvimento com templates: obtendo o máximo de ... · Desenvolvimento com templates: obtendo o...
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
IntroduçãoO Smarty e suas vantagensAlguns recursos muito úteisEstruturando um site com SmartyEscrevendo pluginsSmarty e AJAXSmarty e XoopsEditores que suportam Smarty
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)
O Smarty e suas vantagens
Manual do Smarty em CHM
O Smarty e suas vantagens
Agenda
IntroduçãoO Smarty e suas vantagensAlguns recursos muito úteisEstruturando um site com SmartyEscrevendo pluginsSmarty e AJAXSmarty e XoopsEditores que suportam Smarty
Estendendo a configuração
Alguns recursos muito úteis
Instanciando o Smarty
Alguns recursos muito úteis
O arquivo de configuração
Alguns recursos muito úteis
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}
Alguns recursos muito úteis
Variáveis● ...que, ao executar a página, irá mostrar:
Olá, Adriano!<br>Seja bem-vindo!
Alguns recursos muito úteis
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...
Alguns recursos muito úteis
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.
Alguns recursos muito úteis
A variável $smarty - exemplos
Nome do servidor: {$smarty.server.SERVER_NAME}
Mostra:Nome do servidor: localhost
Alguns recursos muito úteis
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'}!
Alguns recursos muito úteis
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");
Alguns recursos muito úteis
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>
Alguns recursos muito úteis
Modificadores de variáveis● Resultado:
Alguns recursos muito úteis
Modificadores de variáveis● Removendo links HTML de um conteúdo:
Template:
{$conteudo|regex_replace:'/<a[^>]*>|<\/a>/':''}
Alguns recursos muito úteis
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}
Alguns recursos muito úteis
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>
Alguns recursos muito úteis
Funções - Exemplos● Resultado:
Alguns recursos muito úteis
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”);
Alguns recursos muito úteis
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'"}
Alguns recursos muito úteis
Funções - Exemplos● html_table - Resultado:
Alguns recursos muito úteis
Funções - Exemplos● Outra aplicação prática do html_table...
(Foto ilustrativa, só pra exemplificar)
Alguns recursos muito úteis
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”);
Alguns recursos muito úteis
Funções - Exemplos● html_options – fazendo uma listbox de estados
Template:
Estado: <select name="estado"> {html_options options=$estados}</select>
Alguns recursos muito úteis
Funções - Exemplos● html_options – fazendo uma listbox de estados
Resultado:
Alguns recursos muito úteis
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>
Alguns recursos muito úteis
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>
Alguns recursos muito úteis
Funções - Exemplos● include – permite incluir outro template.
Ex.
{include file=”cabecalho.tpl”}
Olá, mundo!
{include file=”rodape.tpl”}
Alguns recursos muito úteis
Modelo RSS
Agenda
IntroduçãoO Smarty e suas vantagensAlguns recursos muito úteisEstruturando um site com SmartyEscrevendo pluginsSmarty e AJAXSmarty e XoopsEditores que suportam Smarty
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
Estruturando um site com Smarty
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>
Estruturando um site com Smarty
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”}
Estruturando um site com Smarty
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”);
Estruturando um site com Smarty
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
Estruturando um site com Smarty
Agenda
IntroduçãoO Smarty e suas vantagensAlguns recursos muito úteisEstruturando um site com SmartyEscrevendo pluginsSmarty e AJAXSmarty e XoopsEditores que suportam Smarty
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
IntroduçãoO Smarty e suas vantagensAlguns recursos muito úteisEstruturando um site com SmartyEscrevendo pluginsSmarty e AJAXSmarty e XoopsEditores que suportam Smarty
Smarty e AJAX
Exemplo prático
Agenda
IntroduçãoO Smarty e suas vantagensAlguns recursos muito úteisEstruturando um site com SmartyEscrevendo pluginsSmarty e AJAXSmarty e XoopsEditores que suportam Smarty
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
Agenda
IntroduçãoO Smarty e suas vantagensAlguns recursos muito úteisEstruturando um site com SmartyEscrevendo pluginsSmarty e AJAXSmarty e XoopsEditores que suportam Smarty
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)
Editores que suportam Smarty
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/
Editores que suportam Smarty
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
Contato● Meu e-mail: [email protected]● Meu website: http://adriano.ison.com.br/