Vamos dar uma parada e fazer uma pausa que sirva de revisão para o que estamos aprendendo no Manual de CodeIgniter. Em artigos passados fizemos uma aplicação básica para assimilar conceitos novos como os controladores, visões ou modelos, que esperamos tenham sido bem entendidos.

Já foram apresentadas três etapas da mencionada revisão, que começou no artigo Tutorial para fazer uma aplicação de teste em CodeIgniter e embora pudéssemos dizer que criamos uma aplicação suficiente para revisar esses novos conceitos, logicamente, ainda temos muitas outras coisas para aprender. Neste sentido, e motivados por um dos comentários de usuários enviados nos artigos, vamos mostrar a maneira de criar um sistema simples para implementar o que chamaríamos um layout para o site.

A ideia é criar uma visão que sirva para definir uma estrutura de página que seja comum para todo o site e claro, que se possa personalizar para mostrar dados diferentes em cada página. A estrutura do site atuará como layout e marcará o desenho da página.

É de supor que nosso propósito não será novo para as pessoas que possam ler este manual, uma vez que o trabalho com layouts é algo que quase todos os desenvolvedores realizamos em algum momento. Neste artigo o que faremos será colocarr em funcionamento uma possibilidade de esquema de trabalho quando quisermos criar layouts, que vimos no artigo anterior, em uma aplicação web desenvolvida com CodeIgniter.

Adaptar nossa aplicação de artigos para ter um layout

Agora, se acompanhamos as explicações dos repassos anteriores de CodeIgniter, poderemos ver as mudanças a serem realizadas para adaptar o site à estrutura de visões proposta. Para realizar essas mudanças decidimos criar novos controladores e visões, para não estragar o trabalho realizado nos artigos anteriores. Vejamos então, arquivo por arquivo, quais são as mudanças que temos que realizar no código.

Novo controlador Artigos_layout

Começamos reformulando o antigo controlador que havíamos chamado "Artigos". Agora o chamamos "Artigos_layout" e é tudo igual, com a particularidade de que vamos ter que realizar invocações a mais de uma visão.

Por um lado teremos a função index() (quando se acessa o controlador sem especificar que artigo mostrar, que apresentava uma listagem de artigos) e por outro lado a função mostra() (que recebe o identificador do artigo a ser mostrado).

Na função index() agora teremos invocação a duas visões. Por um lado está a visão "listagem_artigos", que serve para gerar o corpo da página. Esta visão não se imprime diretamente na tela ao ser processada quando se carrega, senão que é devolvida e salva como dado para ser enviada à visão principal. Por outro lado teremos a visão "layout_artigo", que contém o layout geral do site, à que enviamos diversos dados incluído o corpo da página gerado com a visão anterior.

Na função mostra() teremos também duas visões . Por um lado uma visão chamada "corpo_artigo", que tampouco se imprime, mas que simplesmente salvamos sua saída em uma variável. Por outro lado temos a visão "layout_artigo", que contém o layout do site, igual que na função index().

class Artigos_layout extends Controller {
   function index(){
      
      //carrego o helper de url, com funções para trabalho com URL do site
      $this->load->helper('url');
      
      //carrego o modelo de artigos
      $this->load->model('Artigo_model');
      
      //peço os ultimos artigos ao modelo
      $ultimosArtigos = $this->Artigo_model->dame_ultimos_artigos();
      
      //crio o array com dados de configuração para a visão
      $dados_visão = array('rs_artigos' => $ultimosArtigos);
      
      //carrego a visão passando os dados de configuração
      $dados_layout["corpo"] = $this->load->view('listagem_artigos', $dados_visao, true);
      $dados_layout["titulo"] = "Portada da aplicação de artigos";
      
      $this->load->view('layout_artigo', $dados_layout);
   }
   
   function mostra($id){
      //carrego o helper de url, com funções para trabalho com URL do site
      $this->load->helper('url');
      
      //carrego o modelo de artigos
      $this->load->model('Artigo_model');
      
      //peço ao modelo o artigo que se deseja ver
      $arrayArtigo = $this->Artigo_model->dame_artigo($id);
      
      //comprovo se recebi um artigo
      if (!$arrayArtigo){
         //não recebi nenhum artigo
         //vou lançar um erro 404 de página não encontrada
         show_404();
      }else{
         //encontrei o artigo
         //mostro a visão da página de mostrar um artigo passando os dados do array do artigo
         $dados_layout["corpo"] = $this->load->view('corpo_artigo', $arrayArtigo, true);
         $dados_layout["titulo"] = $arrayArtigo["titulo"];
         
         $this->load->view('layout_artigo', $dados_layout);
      }
   }
}
?>

Agora poderíamos ver o código das distintas que utilizamos neste controlador.

Visão para criar o layout: layout_artigo

Esta é a visão principal do site, que contém o layout do web site. Como vemos, temos todas as etiquetas para a página básica (HTML, HEAD, TITLE, BODY, etc.) e algumas camadas para criar elementos comuns a todas as páginas, como o cabeçalho ou o rodapé.

<html>
<head>
<title><?=$titulo?></title>
</head>
<body>
   <div style="background-color: #ffffcc; padding: 10px 20px; font-size:200%;">
      Cabeçalho aplicação de artigos
   </div>
   <div style="padding: 15px;">
      <?=$corpo?>
   </div>
   <div style="background-color: #ccc; padding: 10px 20px; font-size:80%;">
      Pé de página | link | link de rodapé 2
   </div>
</body>
</html>

Vista listagem_artigos

Este layout serve para mostrar a listagem dos artigos que temos na base de dados. Utilizamos o layout simplesmente para gerar o corpo da portada da aplicação de artigos. Só contém código que se colocará no layout geral, na parte destinada ao corpo de página. Por isso podemos ver que eliminamos todas as etiquetas HTML que servem para gerar o layout geral de site, posto que estarão no layout principal, que vimos antes.

<h1>Listagem de artigos</h1>
<p>Estes são os últimos artigos publicados.</p>
<?php
while ($fila = mysql_fetch_array($rs_artigos)){
   echo '<p>';
   echo '<a href="' . site_url('/artigos_layout/mostra/' . $fila['id']) . '">' . $fila['titulo'] . '</a>';
   echo '</p>';
}
?>

Visão corpo_artigo

Invocamos esta visão a partir da função mostra() e é para mostrar o corpo de um artigo qualquer do site. Este corpo de artigo depois será enviado pelo controlador para a visão principal, para que o artigo seja mostrado dentro do layout de página do site.

<h1><?=$titulo?></h1>
<blockquote><b><?=$titulo?></b></blockquote>
<?=nl2br($corpo)?>
<p><a href="<?=site_url("/artigos_layout/")?>">Voltar</a></p>

Conclusão sobre a revisão 4 da aplicação de artigos em CodeIgniter

Com as modificações que vimos já temos criada nossa aplicação de artigos, porém com um layout específico, que se repetirá em todas as páginas do site. No total tivemos que criar um novo controlador, adaptando o anterior e três visões novas, baseadas também nas que tínhamos antes.

Poderíamos colocar em funcionamento este novo exemplo acessando o controlador criado nesta ocasião. Como o controlador é novo, temos que acessar com uma URL que indique seu nome. Algo como isto:

http://localhost/index.php/articulos_plantilla