Bower, DataTables e CodeIgniter

Integrando Bower, DataTables e CodeIgniter

Integrar o DataTables com o CodeIgniter é um conteúdo que foi muito pedido por nossos leitores e então chegou a hora de atender a esses pedidos. Vamos um pouco além e vamos ver como utilizar o Bower, um gerenciador de dependências para que o processo de instalação dos pacotes do DataTables seja mais fácil.

Criando o projeto

Para iniciar, vamos criar um projeto com a última versão do CodeIgniter utilizando o Composer. Acesse o diretório onde você deseja armazenar os arquivos desse tutorial e digite o comando a seguir no terminal, para que o download do CodeIgniter seja feito e o projeto criado.


composer create-project bcit-ci/codeigniter bower-datatable-e-codeigniter --prefer-dist

Iniciando o Bower no projeto

Após executar esse comando o projeto estará criado, então navegue pelo terminal até o diretório “bower-datatable-e-codeigniter” que acabou de ser criado para que possamos então iniciar o Bower no diretório.

Execute o comando a seguir para iniciar o bower no diretório do exemplo:


bower init

Serão feitas algumas perguntas, coisa básica como o nome do projeto e licença por exemplo. Vá respondendo até que elas terminem. (É um processo bem rápido)

Feito isso a estrutura inicial está pronta e vamos instalar as dependências através do Bower, para em seguida iniciar a escrita do código do exemplo.

Instalando as dependências: DataTables, jQuery e Bootstrap

Como dependências vamos precisar instalar:

  • DataTables
  • jQuery
  • Bootstrap

DatatTable

Para instalar o DataTables, execute os comandos a seguir no terminal:


bower install --save datatables.net

bower install --save datatables.net-bs

O segundo comando é opcional, pois ele é utilizado para aplicar a estilização do bootstrap ao DataTables.

Ao executar o comando acima, automaticamente será instalada a biblioteca jQuery, pois ela é uma dependência do DataTables, ou seja, não será necessário instalar manualmente a biblioteca jQuery.

Bootstrap

Para finalizar a instalação das dependências, vamos instalar o Bootstrap. Para isso execute o comando a seguir:


bower install --save bootstrap

Pronto! Todas as dependências necessárias estão instaladas e agora já podemos começar a escrever o código do exemplo.

Escrevendo o código do exemplo

O primeiro passo é criar o arquivo .htaccess na raiz do projeto; sendo assim crie o arquivo conforme o código apresentado a seguir:

Pronto, agora já é possível utilizar URLs amigáveis para o exemplo.

Em seguida vamos criar uma rota que será utilizada para recuperar os dados no DataTable. Abra o arquivo config/routes.php e adicione a rota conforme o exemplo a seguir:

Agora que você já criou a rota, abra o arquivo controllers/Welcome.php para criar o método que irá responder à rota get_datatable_data. Esse método se chamará Datatable.

Para finalizar é hora de criar a view e exibir os dados no DataTable. Abra o arquivo views/welcome_message.php e edite conforme o código a seguir:

Na view temos as chamadas aos arquivos CSS e JS que foram adicionados ao projeto através do Bower e temos o código JS que renderiza o DataTable. Para complementar temos uma função associada ao evento click do link Atualizar Datatable que irá dar um reload no DataTable, recuperando novamente os dados no servidor.

O recurso do reload é muito utilizado quando se está trabalhando com edição de dados através de janelas modais e requisições ajax. Veja algumas possibilidades de uso do reload:

  • ao excluir um registro da tabela
  • ao salvar um registro novo
  • ao alterar um registro

Viu como é fácil? Em poucos minutos implementamos um DataTable e de quebra integramos o projeto com o gerenciador de pacotes Bower.

Até a próxima!!!