POSTS
Habilitando Layouts No CodeIgniter (Template Engine) – Parte 1
Atenção!! Este artigo foi escrito em cima da versão 1 do Codeigniter. Para detalhes de como usar com a versão 2 do framework clique aqui.
Vejo muitos desenvolvedores criticarem o CodeIgniter por ele não utilizar o conceito de Layout ou ter um Template Engine dentro dele.
Template engine ou o conceito Layouts , falando em um exemplo rápido e prático seria mais ou menos o seguinte:
Pense que você tem um topo e um rodapé que nunca mudam no seu portal.
Ou seja, muda apenas o meio das páginas. Veja a figura abaixo.
E aí? Você vai ter que colocar esse topo e esse rodapé em todas as páginas que você chamar?
Ou você é malandro e vai fazer um include dentro das telas?
O Include seria uma solução interessante mais uma Template Engine faria isso sozinho para você.
Pra quem não conhece nenhuma solução para isso, o Smarty é uma template Engine das mais conhecidas no mundo do PHP.
Você tem uma lista com outras sugestões de Templates Engine nesse link da web Resources
Outros frameworks como o CakePHP tem uma solução dentro dele que faz esse trabalho.
Nesses tempos que desenvolvo em CodeIgniter já vi bizarrices do tipo colocar o Smarty dentro do CodeIgniter ou trazer bibliotecas de outras frameworks para o Core do CodeIgniter.
Mas podemos estender o Core do Framework e fazer ele trabalhar junto com a gente sem precisar de muitas manobras e malabarismos. Na documentação do CodeIgniter achamos essa prática com o nome de Hooks ou se preferir o português ganchos.
Há alguns anos um cara que considero um dos Gurus do desenvolvimento, Mozart Petter, o qual tive a honra de trabalhar junto, pesquisou uma solução nesse sentido para que não precisássemos abandonar o CodeIgniter.
Você encontra vários links pesquisando no google por Layouts in CodeIgniter, onde destaco o seguinte Blog http://hasin.wordpress.com/2007/03/05/adding-yield-codeigniter/
Abaixo vou colocar uma solução em 7 passos para você implementar isso em seu projeto de CI.
É importante que você procure entender em cada passo como o CodeIgniter vai visualizar isso tudo.
*Não se deixe confundir. É fácil. Se ficar difícil há algo errado, volte e reveja os passos.
Como os códigos são muito extensos, vou dividir em dois posts.
Parte 1 – Esse (passo 1 ao 4) e Parte 2 (passo 5 ao 7) que você acessa aqui.
Para quem não estiver com muita paciência, estou disponibilizando também um exemplo pronto de tudo funcionando que você pode baixar aqui.
Apenas confira se o .htaccess serve para o seu servidor ou máquina.
DETALHE IMPORTANTE:
Esse projeto de exemplo foi atualizado no dia 20 de novembro de 2010. Sugestão do Diego Felix (@diegofelix).
Confira a explicação da alteração no final da segunda parte ou clicando aqui.
1 – Habilitando o Codeigniter para estender o Core
A primeira coisa a fazer é habilitar o codeIgniter para estender o Core, permitir os hooks.
Isso é feito no arquivo config.php dentro da pasta config.
Procure a variável $config[‘enable_hooks’] e troque seu valor para TRUE, ficando como abaixo.
title = “habilitando layouts no codeigniter template engine 1” |————————————————————————– | Enable/Disable System Hooks |————————————————————————– | | If you would like to use the “hooks” feature you must enable it by | setting this variable to TRUE (boolean). See the user guide for details. | */ $config[‘enable_hooks’] = TRUE;
Pronto! Próximo passo.
2 – Definindo um Hook
Dentro da pasta config temos um arquivo onde deve ser feitas as definições dos hooks que você quer utilizar.
É o arquivo hooks.php. Para cada hook é preciso definir um array com alguns parâmetros para que o CodeIgniter saiba o que fazer.
Importante: O índice do array vai funcionar apenas como nome do seu hook. Você não vai usá-lo em nenhum lugar a princípio.
Para o nosso Hook vamos definir.
- O nome da Classe que você precisa.
- O nome do método da classe que você deseja chamar.
- O nome do arquivo onde está desenvolvida a classe.
- O directório onde ela se encontra.
Fica da seguinte forma:
title = “habilitando layouts no codeigniter template engine 1” ‘function’ => ‘init’, ‘filename’ => ‘Layout.php’, ‘filepath’ => ‘hooks’);
Esses itens podem variar de acordo com o que você quiser ou precisar fazer.
O manual é uma grande referência para te ajudar com isto e traz alguns detalhes que não abordo aqui.
Certo! Você habilitou e definiu um Hook, ou gancho. Vamos para o próximo passo.
3 – Adicionando algumas constantes necessárias
No arquivo index da aplicação são definidas algumas constantes que ajudam no desenvolvimento da nossa aplicação, como por exemplo,
a extensão dos arquivos que serão usados, constante EXT, e o BASEPATH que traz o caminho da pasta do sistema.
Vamos adicionar aqui mais 3 constantes que vai nos facilitar lá na frente quando formos fazer nossa classe.
- LAYOUTPATH – Caminho onde ficará os layouts que construirmos.
- JSPATH – Caminho onde ficará os arquivos com javascript.
- CSSPATH – Caminho onde ficará os arquivos de estilo. CSS.
Ficando da seguinte forma:
title = “habilitando layouts no codeigniter template engine 1” |————————————————————— | DEFINE APPLICATION CONSTANTS |————————————————————— | | EXT - The file extension. Typically “.php” | SELF - The name of THIS file (typically “index.php”) | FCPATH - The full server path to THIS file | BASEPATH - The full server path to the “system” folder | APPPATH - The full server path to the “application” folder | */ define(‘EXT’, ‘.php’); define(‘SELF’, pathinfo(FILE, PATHINFO_BASENAME)); define(‘FCPATH’, str_replace(SELF, “, FILE)); define(‘BASEPATH’, $system_folder.‘/’); define(‘LAYOUTPATH’, $application_folder.‘/layouts/’); define(‘JSPATH’, $application_folder . ‘/js/’); define(‘CSSPATH’, $application_folder . ‘/css/’);
Reparem que usei a variável $application_folder, que é definida no mesmo arquivo, para completar o caminho das minhas constantes.
Você pode e deve mudar isso de acordo com seu projeto.
Essas constantes vão facilitar também para caso você precise mudar o caminho dos arquivos CSS por exemplo. Basta alterar aqui.
4 – Construindo seu Layout
Vamos agora construir o seu Layout.
Seria aquele topo e aquele rodapé que você não quer mexer. Ou um menu lateral.
Você pode construir o que quiser.
O local onde vamos criar nossos layouts foi definido na constante LAYOUTPATH.
Você pode ter quantos layouts quiser e nomeá-los como quiser.
Mas quando formos construir a classe você verá que definimos um Layout default para quando nenhum for chamado.
É esse que vamos criar agora. default.php
No exemplo abaixo eu criei um topo que tem um menu e um rodapé simples.
title = “habilitando layouts no codeigniter template engine 1” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”> <title>{title_for_layout}</title>
{css_for_layout} {js_for_layout}
</head> <body> <div id=“geral”>
<div id=“topo”> <ul id=“menu”> <li><a href=“#”>Link</a></li> <li><a href=“#”>Link</a></li> <li><a href=“#”>Link</a></li> <li><a href=“#”>Link</a></li> <li><a href=“#”>Link</a></li> <li><a href=“#”>Link</a></li> <li><a href=“#”>Link</a></li> </ul> </div>
<div id=“meio”>
{content_for_layout}
</div>
<br style=“clear: both;” />
<div id=“rodape”> <p class=“rodape”> Todos os direitos reservados - Bla Bla Bla </p> </div>
</div> </body> </html>
É necessário prestar atenção em 4 variáveis que deixamos soltas no meio desse HTML do Layout.
- Primeira – {title_for_layout}
- Segunda – {css_for_layout}
- Terceira – {js_for_layout}
- Quarta – {content_for_layout}
Explicando rapidamente:
Essas Strings vão ser substituídas de acordo com o que definirmos no Controller em um próximo passo.
No lugar de {title_for_layout} irá o título da página. É legal podermos definir um título pelo controlador para deixá-lo dinâmico e assim ajudar no SEO.
No lugar de {css_for_layout} e {js_for_layout} entrarão os arquivos de CSS e JavaScript que definirmos para nossa página.
Você não precisa chamar todos os CSS ou JavaScripts se não for usá-los. Essa é uma grande sacada dessa solução.
Lembro de pegar projetos em Smarty onde estavão definidos inúmeros JavaScripts e CSS em um top.php onde em várias páginas eles nem era usados.
Por último, no lugar de {content_for_layout} irá o conteúdo da nossa View.
É o meio, o que muda.
É o que vamos fazer no próximo passo que está no próximo post.