CrisDev - Cristian Medeiros » template http://crisdev.eti.br Desenvolvedor Web Sun, 03 Apr 2011 15:38:27 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Jquery – Template http://crisdev.eti.br/jquery-template.html http://crisdev.eti.br/jquery-template.html#comments Sun, 03 Apr 2011 15:28:32 +0000 cristianmedeiros http://crisdev.eti.br/?p=150 Não é de hoje que existem ferramentas para template em JavaScript. O objetivo destas é facilitar a exibição de dados na interface, para evitar que você precise escrever o html dentro de um loop do JavaScript ou pior que isso, que você faça a resposta do lado do servidor e traga todo o html montado de lá.

Assim surgiram diversas ferramentas para ajudar nessa tarefa, hoje já existe diversas alternativas. Eu conhecia apenas o PURE, e hoje pesquisando sobre template em JavaScript para Jquery, achei isso no site do Jquery: http://api.jquery.com/jQuery.template/

Achei o plugin muito bacana, e muito simples de usar. Já faz um bom tempo que uso apenas JSON para transações ajax e este plugin faz exatamente o que eu preciso. Esta em beta ainda, mas já funciona muito bem. Vou tentar usar em algum site para valer, para verificar a estabilidade do danado.

Na página tem alguns exemplos de como usar, mas vou colocar aqui o teste que eu fiz:

 

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10

 
$.getJSON('customerDetails.php',{responseType:'
    function(response){
        $.template(
            "customerList", 
            "<option value="${id_customer}">${name_first} ${name_last}</option>
        " );
        $.tmpl( "customerList", response ).appendTo( "#id_customer" );
    }
);

A resposta desta chamada JSON é um objeto neste formato:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

 
[
  {
    "id_customer":"1",
    "name_first":"Fulano",
    "name_last":"Siclano",
    "email":"fulano@gmail.com",
    "ddd_fone":"11",
    "fone":"5555-6666",
    "zip":"04444-444",
    "address":"Rua Que vai e volta",
    "number":"123",
    "neighborhood":"Jardim dos Bairros",
    "city":"Sao Paulo",
    "estate":"Sao Paulo",
    "cpf":"000.000.000-99",
    "status":"1",
    "data_record":"AAAA-MM-DD",
    "password":"123",
    "born_date":"AAAA-MM-DD"
  }
]

Como vêem é uma resposta JSON, com muito mais informação do que eu estou utilizando no template, porém ele faz o assign por chaves, e o processo fica bem simples.

Espero que isso entre logo na distribuição oficial do Jquery :)

]]> http://crisdev.eti.br/jquery-template.html/feed 0 Smarty http://crisdev.eti.br/smarty.html http://crisdev.eti.br/smarty.html#comments Tue, 29 Apr 2008 21:47:59 +0000 cristianmedeiros http://crisdev.eti.br/?p=4 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:

Arquivos:

]]> http://crisdev.eti.br/smarty.html/feed 2