view

#7 Curso CodeIgniter – View de dados com HTML

Deixando o código bonito

O primeiro arquivo que vamos editar vai ser o menu_categorias.php que foi o último alterado, deixando ele da seguinte maneira.

<div id="menu_de_categorias" class="gradient0 sombra radious">
   <h2>Categorias</h2>
   <ul>
      <?php foreach ($categorias as $cat):?>
         <li class="gradient1 radious">
            <?php echo anchor('anotacoes/categoria/'.$cat->slug_categoria, $cat->categoria); ?>
         </li>
      <?php endforeach; ?>
   </ul>
</div>

Você já vai perceber que mudou a aparência, e nesse código primeiro fazemos o foreach nele é criado um loop que cria as <li> até não existir mais categorias, a função anchor que é usada vamos ver mais pra frente, ela chama um Controller nativo para URL, pode perceber o efeito dela no nome dos links gerados e nas suas relativas URL’s.

4 Registros na Controller

Vamos fazer a chamada de 4 registros na Controller Index() no arquivo application > views > home.php dessa forma que faremos irá exibir 4 notas randomicamente, seu método index() ficará da seguinte maneira.

public function index(){
   $data['categorias'] = $this->db->get('categorias')->result();
   $this->db->order_by('id_anotacao','random');
   $data2['chamadas'] = $this->db->get('anotacoes', 4)->result();
   $this->load->view('html_header');
   $this->load->view('cabecalho');
   $this->load->view('menu_categorias', $data);
   $this->load->view('conteudo', $data2);
   $this->load->view('rodape');
   $this->load->view('html_footer');
}

Perceba o uso da função order_by para random que ficará antes do get da tabela com 4 resultados.  No arquivo conteudo.php coloque o código a seguir.

conteudo.php

<div id="conteudo" class="gradient0 sombra radious">
  <h2>Anotações Simples</h2>
     <div id="grid-home">
       <?php foreach($chamadas as $chamada):?>
         <div class="item-grid-home sombra radious">
           <h3><?php echo $chamada->nome; ?></h3>
            <?php echo anchor("anotacoes/ver/". $chamada->slug_anotacao,
                 img('assets/imgs/anotacoes/'.$chamada->foto)) ?>
          </div>
          <p>
            <?php
                 echo anchor("anotacoes/ver/". $chamada->slug_anotacao,
                 word_limiter($chamada->texto,20)) ?>
           </p>
             <?php endforeach; ?>
      </div>
</div>

Usaremos a função do Helper Text para limitar o texto em 30 palavras, que para ser utilizada devemos habilitar naquele arquivo autoload.php.

$autoload['helper'] = array('html','url', 'text');

Insira dados na sua tabela anotacoes a vontade, na minha tabela inseri duas linhas com Lorem para teste como na imagem.

Anotações Banco de Dados

Anotações Banco de Dados

#6 Curso CodeIgniter – Dados do banco para a view

Modificando o Controller Index

Vamos modificar a nossa função Index() na Controller (application/controllers/home.php) para ter as chamadas adicionais de View’s, sendo que a primeira linha dentro da função  faz uma consulta no banco retornando os valores referente a ela.

public function index(){
$data['categorias'] = $this->db->get('categorias')->result();
$this->load->view('html_header');
$this->load->view('cabecalho');
$this->load->view('menu_categorias', $data);
$this->load->view('conteudo');
$this->load->view('rodape');
$this->load->view('html_footer');
}

Criando várias Views

Como temos as chamadas, temos que criar os arquivos referentes dentro da pasta application/views, como por exemplo o primeiro já existe o html_header.php, então criaremos cabecalho.php, menu_categorias.php, conteudo.php, rodape.php e html_footer.php. Há ainda o arquivo home.php que sobrou, podemos excluir ele.

 

Conteúdo da segunda View

Abra o arquivo menu_categorias.php e adicione o seguinte código.

<h2>Menu de Categorias</h2>
<pre> <?php print_r($categorias); ?> </pre>

 

Dados na tabela categorias

Na tabela categorias vamos inserir duas linhas como na imagem.

Tabela de categorias no banco de dados

 

Resultado

Podemos assim abrir a URL do projeto para conferir como ficou. Na tela exibirá as duas categorias com suas respectivas informações, em forma de array. Note que ele retorna como se estivéssemos fazendo uma laço para consultar o banco linha por linha, não precisamos fazer esse “laço” pois o próprio framework se encarregou de fazer isso.