Trabalhar com layouts em CodeIgniter

Esquema de trabalho possível para implementar em CodeIgniter e de maneira simples um layout que seja comum a todas as páginas do site.

Por Miguel Angel Alvarez - Tradução de Celeste Veiga


Publicado em: 29/3/12
Valorize este artigo:
Uma das coisas que poderemos desejar fazer à hora de construir um web site é criar um desenho que se aplique a todo o website . Isto costuma ser feito criando um layout, que contém o desenho do que seria a estrutura de página para nosso site, com elementos como cabeçalho, corpo, pé de página e demais.

Em CodeIgniter existem classes para criar "templates" que poderíamos utilizar em nosso site. No entanto, as próprias visões do método MVC, nos oferecem a suficiente funcionalidade para fazer isso por nossa própria conta sem ter que aprender a usar os templates de CodeIgniter, que frequentemente acrescentam uma complexidade adicional ao desenvolvimento sem trazer vantagens significativas.

Neste artigo do Manual de CodeIgniter explicaremos uma possível forma de trabalho com este framework PHP para implementar um layout que seja comum a todas as páginas do site, por meio da aninhamento de visões.

Esquema de trabalho possível para trabalhar com layouts - Aninhamento de visões

Para implementar um sistema de layout en CodeIgniter, um esquema de trabalho possível é criar uma visão geral que contenha todo o layout principal do site, com o desenho que tenhamos criado com os elementos típicos de cabeçalho, corpo, lateral, pé, etc.

Como sabemos, as visões em CodeIgniter recebem dados para personalizá-las. Neste esquema de trabalho criaremos essa visão principal com o layout do site, que poderá receber diversos dados, como título da página, conteúdo de etiquetas META e tudo o que necessitemos para configurá- la e personalizá-la para produzir as distintas páginas. Ademais, esta visão geral poderá ter alguns dados que são gerados através de outras visões. Por exemplo, poderemos ter o corpo da página, tão complexo como o requeira cada uma das seções do site, que esteja formado a partir de outras visões.

Dito de outra maneira, estamos sugerindo um sistema de aninhamento de visões, no qual se inserem umas visões dentro de outras, tal como quisemos expressar na seguinte imagem:

s

Na imagem poderemos observar que temos "dado 1" e "dado 2", que são dados que possivelmente carreguemos com simples cadeias de caracteres. Em seguida temos uma visão de corpo, que poderá ser específica para cada uma das seções do site e outra visão para a lateral da web, que por sua vez poderia gerar-se através de outras visões, que poderiam ser também diferentes para diversas seções do site.

Desenvolvendo um esquema de visões aninhadas para implementar o layout geral

Se nos colocamos a pensar em como fazer esse esquema de visões aninhadas, com o que aprendemos até agora no Manual de CodeIgniter, talvez tenhamos algum problema para poder implementar este layout gera e aninhar visões. Porém, vamos aprender um detalhe importante para poder desenvolver este ponto.

Quando invocamos uma visão, como comportamento pré-determinado, o conteúdo da visão se volta para a saída geral da aplicação, ou seja, se escreverá na página web.

$this->load->view('minha_visao', $dados_visao);

Isto faz com que a visão "minha_visao" seja processada com os $dados_visao e se escreva na página web que está sendo gerada. Agora, para poder escrever a visão principal (com o layout do site), temos que lhe enviar os dados do corpo e a lateral. Porém, para produzir o corpo e a lateral devemos por sua vez processar as visões correspondentes.

Tendo em conta o comportamento por padrão do método load() para carregar uma visão e sabendo que a visão de corpo e a visão da lateral têm que ser executadas antes da vista geral, poderemos imaginar que o corpo e a lateral se escreverão na página antes que a visão geral. Por isso temos que mudar o comportamento por padrão da invocação de visões.

Ao carregar uma visão em CodeIgniter temos à nossa disposição um terceiro parâmetro no método load(), que é um booleano que serve para marcar o que desejamos fazer com a visão processada. Um valor "false" indica que a visão seja mandada diretamente para a saída (se escreva na página). Um valor "true" indica que desejamos que a visão seja devolvida em uma variável. De maneira pré- determinada, esse parâmetro tem valor "false".

$visao_processada = $this->load->view('minha_visao', $dados_visao, true);

Nesta outra linha de código conseguimos que o conteúdo da visão "minha_visao", uma vez processada com os dados $dados_visao, não seja escrita na tela, mas que seja devolvida em uma cadeia que armazenamos na variável $visao_processada.

Código para aninhar visões em CodeIgniter

Agora que sabemos para que nos serve aninhar visões e conhecemos em detalhe como invocá-las para que sejam mostradas ou não diretamente na página, vejamos qual seria o esquema de trabalho para gerar visões aninhadas.

O seguinte código parcial mostraria como invocar as diferentes visões a partir de um controlador para poder aninhá-las.

$dados_layout["dado1"] = "Um dado simples";
$dados_layout["dado2"] = "Outro dado simples tipo cadeia";
$dados_layout["dado3"] = $this->load->view('visao_corpo', $dados_para_visao_corpo, true);
$dados_layout["dado4"] = $this->load->view('visao_lateral', $dados_para_visao_lateral, true);
$this->load->view('layout_principal', $dados_layout);

Como se pode ver, nas primeiras 4 linhas criamos os dados para o layout principal (com o layout do site). Dois dados são simples e os carregamos diretamente com o conteúdo de dois strings. Outros dois dados são mais complexos e para gerá-los utilizamos outras visões, como a visão do corpo e da lateral, pero indicando true como terceiro parâmetro ao invocar estas visões, para que não se escrevam na tela, mas que se devolva seu valor.

Por último chamamos o layout_principal enviando todos os dados gerados e necessários para mostrar essa visão.

Esperamos que este esquema de trabalho possível se tenha podido entender e para praticá-lo, no próximo artigo vamos mostrar como implementar esse sistema de layout geral na aplicação de artigos que estamos realizando para repassar as cosas que estamos aprendendo em CodeIgniter.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato