#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

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s