2008 April | CrisDev - Cristian Medeiros

Smarty

Posted by cristianmedeiros | Posted on 29-04-2008

A utilização das ferramentas de template estão um tanto quanto sendo crucificadas, um tanto por serem uma “linguagem” paralela ao PHP para se absorver, outro tanto por ser PHP gerando PHP ou HTML, independente da sua teoria, utilizar o HTML fora do código PHP é fundamental. Eu por escolha, gosto do Smarty e o utilizo já a um bom tempo. Gosto também de trabalhar com PHP puro substituindo as tags, mas acho mais trabalhoso, pois preciso escrever os loops e outros condicionais, coisas que o Smarty já faz por mim.

Vou falar um pouco dos casos que mais utilizo Smarty e dar alguns exemplos. Não vou comentar sobre a instalação, pois a mesma é bem simples e bem descrita no site do Smarty.

Algo que já ouvi muito “com Smarty não dá para escrever html padrão”, dá sim, html e smarty são coisas distintas e, apesar do Smarty manipular o html, ele não muda a estrutura já criada, ou seja, se o w3c não valida o html gerado pelo Smarty, é porque o html foi mal escrito.

Para se criar um template, basta pegar um arquivo html e renomeá-lo para .tpl e coloca-lo na pasta template, simples assim? sim, simples assim, a partir desse instante, você tem um template pronto para ser utiizado no seu código.

Exemplo1.tpl:

<html>
	<head>
		<title>Teste Smarty</title>
	</head>
	<body>
		<h1>TESTE</h1>

	</body>
</html>

Salve o código acima na pasta template.

Exemplo1.php:

<?PHP

	include("libs/smarty.class.php");

	$smarty = new Smarty();

	/*
	 * esta parte da configuração pode ficar em outra parte do sistem, em um include por exemplo
	 */
	$smarty->template_dir = 'templates';
	$smarty->compile_dir = 'templates_c';
	$smarty->cache_dir = 'cache';
	$smarty->config_dir = 'configs';

	$smarty->display('exemplo1.tpl');

?>

E para adicionar algum conteúdo a este template faremos:

Exemplo2.tpl:

<html>
	<head>
		<title>Teste Smarty</title>
	</head>
	<body>
		<h1>{$conteudo}</h1>

	</body>
</html>

Salve o código acima na pasta template.

Exemplo2.php:

<?PHP

	include("libs/smarty.class.php");

	$smarty = new Smarty();

	/*
	 * esta parte da configuração pode ficar em outra parte do sistem, em um include por exemplo
	 */
	$smarty->template_dir = 'templates';
	$smarty->compile_dir = 'templates_c';
	$smarty->cache_dir = 'cache';
	$smarty->config_dir = 'configs';

	$smarty->assign('conteudo',"VALOR QUE VAI APARECER NA CHAVE");

	$smarty->display('exemplo2.tpl');

?>

Eu costumo “modularizar” meus templates, geralmente em menu e conteudo, pode-se quebrar em mais pedaços, pode-se utilizar um único template para tudo, eu faço assim para facilitar minha vida. O designer sempre esquece algum item do menu ou o analista esquece alguma funcionalidade… e assim vai, separando as peças eu acho mais organizado.

Então com duas partes do layout eu faço assim:

Exemplo3.tpl:

<html>
	<head>
		<title>Teste Smarty</title>
	</head>
	<body>
		<ul>

			<li>Home</li>
			<li>Cadastro</li>
			<li>Consulta</li>
		</ul>

		<div>{$conteudo}</div>
	</body>
</html>

Exemplo3a.tpl:

<form>
	<input type="hidden" name="email_contato" value="{$email_contato}" />
	<input type="text" name="nome" id="nome" />

	<input type="text" name="email" id="email" />
	<input type="text" name="mensagem" id="mensagem" />

	<input type="submit" value="Enviar" />
</form>
{$email_contato}

Exemplo3.php:

<?PHP

	include("libs/smarty.class.php");

	$smarty = new Smarty();

	/*
	 * esta parte da configuração pode ficar em outra parte do sistem, em um include por exemplo
	 */
	$smarty->template_dir = 'templates';
	$smarty->compile_dir = 'templates_c';
	$smarty->cache_dir = 'cache';
	$smarty->config_dir = 'configs';

	$smarty->assign('conteudo',"VALOR QUE VAI APARECER NA CHAVE");

	$smarty->assign('email_contato','emailcontato@contato.com.br');

	$conteudo = $smarty->fetch('exemplo3a.tpl'); //arquivo que vai montar o "miolo"

	$smarty->assign('conteudo',$conteudo);//processo normal para atribuir um conteudo a uma variável

	$smarty->display('exemplo3.tpl');

?>

Dessa forma podemos separar os conteúdos de cada página em um template sem que isso afete nosso menu. Existem diversas formas de se separar o site com smarty, essa é uma delas

Podemos em nosso template utilizar condicionais para controlar os dados. O comportamento é o mesmo que em qualquer outra linguagem.

Exemplo4.tpl:

<form>
	<input type="hidden" name="email_contato" value="{$email_contato}" />
	<input type="text" name="nome" id="nome" />

	<input type="text" name="email" id="email" />
	<input type="text" name="mensagem" id="mensagem" />

	<input type="submit" value="Enviar" />
</form>
{if $email_contato != NULL}
	{$email_contato}
{/if}

Quando utilizamos template sempre vem aquela pergunta: “mas e se eu tiver uma tabela? com varias linhas? eu gero o html no php e substituo a chave?” bom esta seria uma opção, mas fugiria bastante da idéia de manter o html longe do seu php. Com Smarty podemos realizar um loop em um array de duas formas com foreach e com section:

foreach: usado em arrays associativos ex: $array['nome']
section: usado em arrays indexados ex: $array[1]

Exemplo5.php:

<?PHP

	include("libs/smarty.class.php");

	$smarty = new Smarty();

	/*
	 * esta parte da configuração pode ficar em outra parte do sistem, em um include por exemplo
	 */
	$smarty->template_dir = 'templates';
	$smarty->compile_dir = 'templates_c';
	$smarty->cache_dir = 'cache';
	$smarty->config_dir = 'configs';

	$dados = array();
	$dados['nome'] = "Zé da Silva";
	$dados['email'] = "ze@dasilva.com.br";

	$infos = array();
	$infos['alerta'] = "Preencha todos os campos.";
	$infos['notificacao'] = "Sua mensagem será respondida em breve.";
	$infos['agradecimento'] = "Obrigado pelo contao.";

	$smarty = new Smarty();

	$smarty->assign('dados',$dados);
	$smarty->assign('infos',$infos);

	$smarty->display('Exemplo5.tpl');

?>

Exemplo5.tpl:

{foreach from=$infos item=informacao}
	{$informacao}<br>
{/foreach}

<form>
	<input type="text" name="nome" id="nome" value="{$dados.nome}" /> <!-- no smarty o vetor do array é acessado por um . e não por []
	<input type="text" name="email" id="email" value="{$dados.email}" />

	<input type="text" name="mensagem" id="mensagem" />
	<input type="submit" value="Enviar" />

</form>

e com Section ficaria assim:

Exemplo6.php:

<?PHP
	include("libs/smarty.class.php");

	$smarty = new Smarty();

	/*
	 * esmartya parte da configuração pode ficar em outra parte do sismartyem, em um include por exemplo
	 */
	$smarty->template_dir = 'templates';
	$smarty->compile_dir = 'templates_c';
	$smarty->cache_dir = 'cache';
	$smarty->config_dir = 'configs';

	$dados = array();
	$dados['nome'] = "Zé da Silva";
	$dados['email'] = "ze@dasilva.com.br";

	$infos = array();
	$infos[0] = "Preencha todos os campos.";
	$infos[1] = "Sua mensagem será respondida em breve.";
	$infos[2] = "Obrigado pelo contao.";

	$smarty = new Smarty();

	$smarty->assign('dados',$dados);
	$smarty->assign('infos',$infos);

	$smarty->display('Exemplo6.tpl');
?>

Exemplo6.tpl:

{section name=informacoes loop=$infos}
	{$infos[informacoes]}<br>
{/section}

<form>
	<input type="text" name="nome" id="nome" value="{$dados.nome}" /> <!-- no smarty o vetor do array é acessado por um . e não por []
	<input type="text" name="email" id="email" value="{$dados.email}" />

	<input type="text" name="mensagem" id="mensagem" />
	<input type="submit" value="Enviar" />

</form>

Não costumo utilizar o section, acho ele muito limitado.

Bom, isso é mais um resumo do que um tutorial, você pode encontrar mais informações no manual do smarty que é bem completo e bem simples de entender. Queria falar sobre isso para poder abordar um outro tópico: Smarty com Xajax que é bem interessante.

Como sempre se tiverem dúvidas comentem, ou me mandem e=mail.

Referencia:

Smarty website

Arquivos:

Exemplos

Trabalhando com XAJAX

Posted by cristianmedeiros | Posted on 28-04-2008

Category : AJAX/XAJAX

Tags: PHP, XAJAX

XAJAX é um toolkit para trabalhar com ajax no PHP, ele é apoiado basicamente em prototype e pode ser extendido usando outros frameworks AJAX como scriptaculous ou mootools.
O diferencial do XAJAX é a facilidade em utiliza-lo, você basicamente escreve código PHP e ele gera o AJAX sozinho.
Veja o exemplo:

exemplo1.php:

<?PHP
include “_lib/xajax/xajax_core/xajax.inc.php”;

$xajax = new xajax();

function Soma($a, $b)
{
$response = new xajaxResponse();
$response->assign(’resultado’, ‘innerHTML’, $a + $b);
return $response;
}

$xajax->registerFunction(’Soma’);

$xajax->processRequest();

$xajax->printJavascript(’_lib/xajax/’);
?>
<form action=”#” method=”post”>
<input type=”text” name=”val1″ id=”val1″>

Como podem observar não escrevemos quase nada de javascript (apenas a chamada da função no onClick), o que isso facilita? Bom, para mim que acho o JavaScript uma linguagem mal acabada, facilita muito, pois me preocupo com a lógica em PHP, construindo funções que já estou acostumado a criar e o XAJAX cuida para retornar isso de uma forma simples para o browser.

Um exemplo mais complexo:

exemplo2.php:

<?php
include “_lib/xajax/xajax_core/xajax.inc.php”;

$xajax = new xajax();

function Consulta($nome)
{

$con = mysql_connect(”localhost”,”root”,”");
$db = mysql_select_db (”xajax_teste”,$con);

$query = “select * from cadastro where nome like ‘%$nome%’”;
$result = mysql_query($query) or die(mysql_error());

$response = new xajaxResponse();

while($row = mysql_fetch_assoc($result)){

$html .= utf8_encode($row['nome']).” “.$row['email'].”<br>”;

}
$response->assign(’resultado’, ‘innerHTML’, $html);
return $response;
}

$xajax->registerFunction(’Consulta’);

$xajax->processRequest();

<?php $xajax->printJavascript(’_lib/xajax/’); ?>

</form>
Notem que no retorno do nome ($row['nome']) tem um uft8_encode() isto porque o retorno do XAJAX é em xml (como todo AJAX deveria ser) e portanto precisa desse encode, uma vez que o xml possui algumas limitações quanto ao charset.

Mostrei aqui algumas implementações bem simples com códigos bem básicos, em uma arquitetura mais eleveda, pode-se remover o XAJAX do html facilmente, manipulando ele totalmente no PHP.

Para obter o XAJAX acesse XAJAX Project.

Qualquer dúvida comentem!

Referencia: