Utilizando templates no CodeIgniter

Motivaç�o

Em qualquer framework e linguagem de desenvolvimento web, � muito comum a utilizaç�o de templates para padronizar a interface das aplicaç�es. Para o usu�rio, um modelo de interface padr�o auxilia no aprendizado, facilita a memorizaç�o da localizaç�o de itens do sistema e aç�es comuns, garantindo uma experi�ncia de uso s�lida e confort�vel. Para o desenvolvedor, o uso de templates simplifica a construç�o das p�ginas, mantendo uma parte delas fixa e variando apenas as seç�es relativas a cada funç�o.

No CodeIgniter, framework que se baseia no padr�o MVC, podemos criar e utilizar templates com facilidade por meio da biblioteca chamada The Most Simple Template Library for CodeIgniter. Distribu�da de forma gratuita, ela permite a adiç�o de p�ginas de layout padr�o com apenas alguns passos simples, que ser�o vistos a seguir.

Saiba mais sobre o Framework CodeIgniter

Passo 1: Instalar a biblioteca

A �instalaç�o�, na verdade, consiste apenas de efetuar o download da biblioteca (um arquivo ZIP), descompact�-la e copiar o arquivo Template.php para a pasta libraries do projeto.

Em seguida, � preciso configurar a aplicaç�o para que a nova biblioteca seja carregada automaticamente. Para isso, deve-se acessar o arquivo autoload.php, dentro da pasta config, e adicionar o elemento 'template' � chave 'libraries' do array $autoload, da seguinte forma:

$autoload['libraries'] = array('template');

Passo 2: Criar a p�gina de template

O pr�ximo passo � criar o arquivo que conter� a estrutura padr�o das p�ginas, ou seja, o template em si. Esse arquivo deve estar contido na pasta views e, no local onde o conte�do deve ser carregado, deve conter a seguinte linha de c�digo:

<?php echo $contents; ?>

Assim, todas as views ser�o �encaixadas� no local em que essa instruç�o estiver posicionada no template. Na Listagem 1 vemos um exemplo de p�gina que servir� como template.


01 <!DOCTYPE html>
02 <html lang="en">
03 <head>
04     <meta charset="UTF-8">
05     <title>Minha aplicaç�o</title>
06 </head>
07 <body>
08     <div >
09         Cabeçalho
10     </div>
11     <div>
12         <?php echo $contents; ?>
13     </div>
14     <div >
15         Rodap�
16     </div>
17 </body>
18 </html>

Listagem 1. P�gina de template da aplicaç�o

Quando acessarmos os m�todos dos controllers e estes retornarem uma determinada view, o usu�rio receber� como resultado toda a estrutura dessa p�gina que vemos na listagem, por�m com o conte�do central modificado (linha 12).

Saiba mais sobre o Views

Passo 3: Utilizar o template nos controllers

Por padr�o usamos a seguinte instruç�o para carregar as views no CodeIgniter:

$this->load->view(�pagina_inicial�);

Agora, com essa biblioteca de template, passaremos a fazer esse carregamento da seguinte forma:

$this->template->load('template_padrao', 'pagina_inicial');

Onde:

template_padrao: � o nome do arquivo que cont�m a estrutura do template

pagina_inicial: � o nome da view a ser carregada

Considerando que o conte�do do arquivo views/pagina_inicial.php � o seguinte, teremos como resultado, ao acessar a p�gina, a interface ilustrada na Figura 1.


<h1>P�gina inicial</h1>
<h2>Subt�tulo da p�gina</h2>
<p>Conte�do da p�gina</p>

Figura 1. P�gina carregada no template

Se acessarmos outra p�gina da mesma forma, apenas a parte central ser� alterada.

Passo 4: Passagem de objetos adicionais para a p�gina

Para enviar dados adicionais para as p�ginas, basta organiz�-los na forma de um array associativo, cujas chaves ser�o acessadas como vari�veis nas views. A Listagem 2 mostra um exemplo de como ficaria o m�todo do controller.


01 public function sobre()
02 {
03 	$dados = array(
04 		'titulo'   => 'Sobre a empresa',
05 		'mensagem' => 'Aqui voc� encontra a hist�ria da empresa'
06 	);
07 	$this->template->load('template_padrao', 'sobre', $dados);
08 }

Listagem 2. Passando dados adicionais para a view

Linhas 3 a 6: montamos o array associativo com os dados que queremos passar para a view;

Linha 7: passamos o array como terceiro argumento para o m�todo load.

Na view, basta acessar as vari�veis $titulo e $mensagem, da seguinte forma:


<h1> <?php echo $titulo; ?> </h1>
<p> <?php echo $mensagem; ?> </p>

Agora, se acessarmos essa p�gina, teremos o resultado que mostra a Figura 2, com os valores das vari�veis escritos dinamicamente na tela.

Figura 2. P�gina com valores passados dinamicamente

Com essas configuraç�es iniciais prontas, basta concluir o layout, adicionando as folhas de estilo, scripts, imagens, etc., e utilizar essa chamada sempre que precisar carregar uma view dentro dele. Se for necess�rio usar mais de um template, basta alterar o primeiro argumento (nome do arquivo base) nas chamadas.

Utilizando templates no CodeIgniter

Aprenda como criar e utilizar templates com o framework CodeIgniter e simplifique a construção e o reuso de páginas em suas aplicações.

Passo 1: Instalar a biblioteca

Passo 2: Criar a p�gina de template

Passo 3: Utilizar o template nos controllers

Passo 4: Passagem de objetos adicionais para a p�gina

Artigos relacionados