Pré-visualizando uma tabela do banco de dados com 3 linhas de código no CodeIgniter 2.0

Existe uma necessidade comum durante o processo de desenvolvimento, que é pré-visualizar dados que venham de um objeto ou array.

Podemos ter a necessidade de inspecionar um retorno de uma função, uma lista, um retorno de uma consulta ou até mesmo uma tabela do banco de dados, etc. Essa tarefa comum pode ser efetuada dando um print_r() na variável desejada e um exit() caso seja necessário parar a aplicação.

Outras vezes é interessante poder formatar esse retorno em dados tabulares de modo prático para a visualização.

E já que o CodeIgniter nos provê um classe para auxiliar na geração de tabelas HTML, decidi criar um pequeno helper capaz de mostrar esses dados de modo mais organizado.

Acrescentando uma função de pré-visualização simples, adicionando a tag <pre></pre> do HTML e passando como parâmetro 0 ou 1 para controlar se a aplicação deve parar depois de exibir as informações. Zero, ou omitindo o parâmetro não para, 1 para parar.

Criei também duas funções simples para gerar tabelas a partir de uma Array ou de um objeto com os respectivos nomes arr_tabela() e obj_tabela().

O código-fonte do helper ficou o seguinte.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
function pre($var,$parar = null){
  echo "<hr><pre>";
  print_r($var);
  echo "</pre><hr>";   
  if($parar!=null)
    echo exit();
}

function obj_tabela($object,$parar = null){ 
  $CI = & get_instance();
  $CI->load->library('table');

  $arr = array();
  for ($i = 0; $i < count($object); $i++)
      $arr[] = get_object_vars($object[$i]);

  $CI->table->clear();
  echo $CI->table->generate($arr);

  if($parar!=null)
    echo exit();
}

function arr_tabela($arr,$parar = null){ 
  $CI = & get_instance();
  $CI->load->library('table');
  $CI->table->clear();
  echo $CI->table->generate($arr);
  if($parar!=null)
    echo exit();
}

Um exemplo de uso é para recuperar os dados de uma tabela no do banco de dados, no controlador basta chamar da seguinte forma:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Home extends CI_Controller {

    function __construct()
    {
        parent::__construct();
    }

    function index()
    {
    $this->load->helper('pre');
      $data['categorias']  = $this->db->get('categorias')->result();
        //$this->load->view('home',$data);
        pre($data['categorias']);
        //obj_tabela($data['categorias']);
    }
}

Note a facilidade em exibir os dados vindos da tabela categorias. Na figura abaixo, temos a tabela do banco de dados.

Na sequência, veja o resultado gerado pela função obj_tabela();

E o mesmo objeto do banco de dados sendo exibido pelo uso da função pre();

O mais simplificado possível, temos a exibição de uma tabela ou view do nosso banco de dados com 3 linhas de código no controller.

Espero que os benefícios oferecidos pelo CodeIgniter 2.0 ajudem vocês nesse processo. Em caso de dúvida ou até mesmo troca de ideia, não deixe de postar seus comentários abaixo.

Até a próxima!

Otimização de Javascript e CSS com CodeIgniter e Minfy, minimizando e unindo arquivos css e js.

Não é necessário discorrer sobre a importância do Javascript e do CSS bastando apenas citar alguns poucos exemplos como a validação de formulários, criação de elementos de interface como acordions e menus e citar alguns dos muitos plug-ins para desenvolvimento que agregam funcionalidades como geração de gráficos e data-grids para que fique clara a importância de manter uma boa estrutura destes arquivos em sua aplicação ou página da web.

Quando mais funcionalidades desejadas, mais arquivos .js e .css teremos, tomemos por exemplo uma página que contenha o arquivo compactado da JQuery, um plugin de calendário da JQuery UI e mais um arquivo .js para funções gerais do website, somados os arquivos .css necessários para o website e para a geração do calendário. Este exemplo nos daria pelo menos 5 arquivos distintos para compactar e carregar.

Há tempos vem sendo usada a técnica de compactar os arquivos javascript e css removendo comentários, linhas em branco, espaços desnecessários e quebras de linha com a finalidade de diminuir o tempo de carregamento on-line.

É interessante também diminuir o número de requisições http feitas ao servidor pelo browser, sendo que, se possível unir todos os arquivos .js em um único arquivo diminuiremos a quantidade de requisições, fazendo o mesmo com o .css estaremos contribuindo para um carregamento mais ágil.

Toda vez que iniciamos um projeto teremos que escolher quais são as bibliotecas e plug-ins que iremos utilizar bem como referenciar em nosso header html estes arquivos.

Cansado desta tarefa repetitiva fui buscar uma solução que fosse a mais simples e menos trabalhosa possível, gostaria de uma solução que “encontrasse” os arquivos .css e .js em uma pasta e fizesse o restante do trabalho para mim.  Acabei encontrando o Minify e melhor que isso, já existe um Driver * (Library) para o CodeIgniter 2.0.x.

Neste artigo estou descrevendo a forma como eu uso, mas é claro que existem muitas outras maneiras de integrar seus arquivos com esta solução.

Passo 1 – Baixando a biblioteca

O primeiro passo é baixar o CI-Minify, você encontrará o link (e também mais informações sobre como usar) aqui.

Então descompacte o arquivo e copie a pasta “Minify” que está dentro da pasta “libraries” do arquivo .zip para a sua pasta application/libraries conforme mostrado na figura 1.0

A partir deste momento já é possível utilizar a biblioteca Minify, contudo é importante observar que, por se tratar de um Driver, não será possível carregar pelo autoload, você precisará carregar este driver a partir de um controlador.

Passo 2 – Organizando os arquivos

Vamos analisar a estrutura das pastas e arquivos que serão utilizadas neste exemplo. Na figura 2.0 está a estrutura de pastas que contém os arquivos .css e .js  que estou utilizando em meu projeto.

Note que tenho um pasta chamada assets na raiz da aplicação com as seguintes subpastas .

js – Esta pasta contem os arquivos Javascript originais sem compactação, estes arquivos podem ser editados facilmente, caso existam arquivos compactados aqui dentro, também não tem problema.

css – É a pasta onde estão os arquivos .css originais, eles estão identados e organizados para facilitar a edição.

ie_css – Esta é uma pasta auxiliar onde deixo os arquivos css específicos para corrigir problemas com o IE. Não quero estes arquivos carregando o tempo todo, portanto, não os adiciono ao arquivo final compactado.

min – Que irá guardar os dois arquivos gerados pelo Minify, um css e um js. Nesta pasta eu armazeno também a JQuery já compactada, tive que utilizar esta abordagem porque preciso que ela seja carregada antes dos outros scripts e tive como quero compactar a pasta js toda de uma vez não é possível definir a ordem dos arquivos a compactar.

imgs – A pasta de imagens da minha aplicação (não relevante para nosso exemplo).

O que vai ocorrer é que a Minify irá buscar todos os arquivos na pasta css e na pasta js e compactar criando apenas duas saídas na pasta min.

Passo 3 – Gerando os arquivos compactados

Para efetuar esta ação estamos colocando o seguido código no construtor da minha classe “home” que é a classe que defini  em default_controller no arquivo de configuração routes.php. De modo que cada vez que a aplicação for carregada serão gerados dois novos arquivos com o CSS e JS. Se você preferir (ou achar mais semântico) poderá criar um método para isto.

<?php if(!defined('BASEPATH')) exit('No direct script access allowed');
class Home extends CI_Controller {
       function __construct(){
             parent::__construct();
             $this->load->driver('minify');
             $csss = $this->minify->combine_directory('assets/css/');
             $this->minify->save_file($csss,'assets/min/minified.css');
             $jss =$this->minify->combine_directory('assets/js/');
             $this->minify->save_file($jss,'assets/min/minified.js'); 
     }
}

Chamei meus arquivos respectivamente de minfied.css e minified.js

Passo 4 – Utilizando os arquivos compactados

Para utilizar os arquivos você simplesmente irá incluí-los em suas views conforme faria com qualquer outro arquivo .css e .js. Para simplificar esta tarefa eu construí uma view parcial e salvei em uma pasta chamada libraries dentro da pasta views com o nome de arquivo html-header.html. Veja a seguir o método no controlador que chama a minha tela de login.

function index(){
    $this->load->view('libraries/html-header');
    $this->load->view('login');
    $this->load->view('libraries/html-footer');
}

Desta forma posso compartilhar o mesmo cabeçalho html em todo o website me preocupando apenas em construir o corpo das paginas propriamente dito.

A seguir está o código da view parcial html-header que carrega os arquivos compactados.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pt-BR">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <link rel="stylesheet" href="<?php echo base_url();?>assets/min/minified.css" type="text/css" media="screen"/>
        <!--[if IE]>
            <link rel="stylesheet" href="<?php echo base_url();?>assets/ie_css/ie.css" type="text/css" media="screen"/>
        <![endif]-->
        <!--[if IE 7]>
        <link rel="stylesheet" href="<?php echo base_url();?>assets/ie_css/ie7.css" type="text/css" media="screen"/>
        <![endif]-->
        <!--[if IE 6]>
        <link rel="stylesheet" href="<?php echo base_url();?>assets/ie_css/ie6.css" type="text/css" media="screen"/>
        <![endif]-->
        <script type="text/javascript" language="JavaScript">
            var base_url = "<?php echo base_url();?>";
        </script>
        <script type="text/javascript" src="<?php echo base_url();?>assets/min/jquery.js"></script>
        <script type="text/javascript" src="<?php echo base_url();?>assets/min/minified.js"></script>    
        <title>SISTEMA DE GESTÃO DE PEDIDOS</title>
    </head>
    <body>

Note que a JQuery está sendo carregada separadamente e todos os outros arquivos .js vem do resultado da compactação pelo Driver Minify que gerou o arquivo minified.js. Desta forma, quando quisermos uma nova funcionalidade javascript ou houver a necessidade de incluir um novo arquivo .css basta incluir na pasta e na próxima vez que o sistema for carregado ele será automaticamente incluído no arquivo compactado.

Os arquivos relativos as correções do IE continuam sendo carregados do modo tradicional e poderão ser minimizados separadamente se desejado.

Em meu header html incluo uma variável global JavaScript camada base_url onde guardo a o caminho base da aplicação ou website para utilizar em requisições Ajax etc.

Espero que tenha sido útil. Abraço e até a próxima!