Neste artigo pretendo mostrar como fazer uma consulta de registros completamente dinâmica, ou seja, sem a necessidade de recarregar a página para filtrar ou paginar os registros. Utilizaremos como exemplo uma simples consulta de clientes onde o usuário poderá filtrá-los e navegar entre as páginas.

No lado cliente iremos utilizar o AngularJS para facilitar a comunicação com o servidor, além de manter um código mais organizado e reutilizável. Atualmente já temos o Angular 2, porém ainda gosto da simplicidade do AngularJS e acredito que se encaixa melhor no propósito deste artigo.

No lado servidor iremos apenas utilizar uma biblioteca de Query Builder para montarmos nossa query de consulta com o banco de dados. Hoje em dia é muito comum a utilização de um Query Builder em frameworks e no nosso caso vai facilitar muito a paginação dos registros.

Confira o exemplo em funcionamento, clicando aqui.

O banco de dados

Vamos criar nossa tabela no banco de dados e inserir alguns registros para teste. No nosso exemplo, iremos utilizar MySQL.

O lado cliente

Javascript

Primeiramente, vamos criar nosso module.

No segundo parâmetro, definimos que que nosso module depende de um outro module chamado bw.paging. Esse module será útil para fazermos a paginação mais adiante.

Vamos então criar o nosso controller responsável por gerenciar a página de consulta.

  • Linha 2: Declaramos o nosso controller e injetamos o $http que é um serviço do AngularJS para fazer requisições AJAX.
  • Linha 5: O controller é nada mais que uma função em Javascript, portanto o this é referente a esta função. Porém, se declaramos uma função dentro do controller, o this dentro desta função é referente à ela. Portanto, apenas armazenamos o objeto do controller na variável self pois assim podemos acessar suas propriedades independente do escopo.
  • Linha 26: Através do serviço $http fazemos uma requisição AJAX com o servidor utilizando o método GET. Enviamos a página atual e os filtros para recuperarmos no servidor. Se você utiliza jQuery, isso é equivalente ao $.get.

HTML

Vamos incluir em nossa página as dependências.

Para nossa página ter um visual mais moderno, incluímos o Materialize. Além disso, incluímos a biblioteca do AngularJS, o componente de paginação e os arquivos que criamos anteriormente.

Um dos recursos que eu mais gosto no AngularJS é o Data Binding. Esse recurso nos permite a separação da lógica (controller) com a página (view), ou seja, nós definimos uma propriedade no controller, vinculamos na view e o framework se encarrega de atualizar a view quando a propriedade for alterada e vice-versa.

  • Linha 2: Através do ng-app definimos que esta div
    é a raiz do nosso module e dentro dela poderemos fazer a chamada dos controllers.
  • Linha 7: Através do ng-controller definimos que esta div
    é a raiz do nosso controller e dentro dela poderemos acessar suas propriedades e métodos. O ng-init é sempre chamado na criação do elemento, ou seja, quando a div for criada chamaremos o método consultar definido no controller, fazendo assim a consulta inicial.
  • Linha 10: Criamos um formulário onde colocaremos os filtros e através do ng-submit definimos que quando esse formulário for enviado, seja clicando no botão de submit ou através do enter, chamaremos método consultar definido no controller.
  • Linha 19, 22, 25: O ng-model nos permite vincular um campo de formulário com uma propriedade no controller, sendo assim sempre que o campo for atualizado, a propriedade será atualizada e vice-versa.
  • Linha 33: O ng-show nos permite definir se o elemento será mostrado de acordo com a condição. No caso, se a propriedade consultando for true será exibido a barra de progresso.
  • Linha 38: Aqui utilizamos o ng-show, porém negando a condição, ou seja, se a propriedade consultando for false será exibido tabela de clientes.
  • Linha 53 até 57: O ng-repeat nos permite repetir um elemento de acordo com uma collection. No caso, iremos repetir o elemento tr (que cria uma linha na tabela) para cada item da propriedade clientes. Para cada linha que for criada criaremos as colunas e através do ng-bind vinculamos a coluna com sua respectiva propriedade do objeto cliente.
  • Linha 60: O ng-if nos permite definir se um elemento será criado ou não através de uma condição. Neste caso, se não houver nenhum item em nossa collection de clientes, essa linha será exibida.
  • Linha 69 até 71: Utilizamos a directive de paginação que adicionamos ao nosso module no inicio. Nos atributos definimos as informações necessárias para a geração do elemento. Você pode ver a documentação completa da directive aqui.

O lado servidor

Precisamos agora desenvolver o código para consultar os registros no banco de dados. Porém, antes de qualquer coisa vamos instalar a biblioteca de Query Builder utilizando o Composer. Para isto vamos criar nosso composer.json.

Agora basta rodar composer install no terminal e podemos começar. Primeiramente, vamos criar um arquivo para configuração e conexão com o banco de dados.

Simples assim. A biblioteca já faz a conexão com base nas informações que passamos e disponibiliza o Query Builder que pode ser acessado através do alias QB, definido no terceiro parâmetro.

  • Linha 18 até 20: No controller do lado cliente passamos os filtros por parâmetro. Portanto, verificamos se o filtro existe e aplicamos um where em nossa query. A vantagem do Query Builder neste caso é que a query é um objeto, portanto apenas chamamos o método where, muito mais simples e organizado do que fazer o SQL manualmente.
  • Linha 36: É aqui que a paginação acontece. Através do limit definimos a quantidade de registros que queremos, no caso 3. E através do offset a partir de qual registro vamos começar. Por exemplo:
    • Página 1: (1 – 1 * 3 = 0) – Começando do primeiro registro;
    • Página 2: (2 – 1 * 3 = 3) – Começando depois do terceiro registro;
  • Linha 39: O Query Builder irá construir e executar o comando SQL. Por exemplo, se tivermos na primeira página sem nenhum filtro, ele irá executar o SQL abaixo.
  • Linha 42: Para saber a quantidade de páginas, precisamos saber a quantidade total de registros, portanto precisamos fazer duas consultas no banco de dados; uma para buscar os dados e a outra para contar os registros. Com o Query Builder isso fica muito simples, pois basta reutilizar o objeto da query para contar a quantidade de registros.

Conclusão

Neste artigo, vimos como fazer uma consulta com a possibilidade de filtrar e paginar os registros, sem a necessidade de recarregar toda a página.

No lado cliente, utilizamos AngularJS para manter o código mais simples e organizado. Você poderia fazer a mesma coisa utilizando jQuery ou Javascript puro, porém teria que escrever muito mais linhas de código e provavelmente não teria a separação das camadas de lógica e visualização.

No lado servidor, utilizamos uma biblioteca de Query Builder para evitar duplicação e manter um código mais limpo do que utilizar SQL puro. Você poderia muito bem utilizar as funções do próprio PHP para fazer a consulta, porém seria um pouco mais trabalhoso.

Enfim, espero que este artigo tenha sido útil de alguma forma para você. Até a próxima.

Código fonte disponível em: https://github.com/rafaelcouto/Post1577

Referências

 

Compartilhe
Share on Facebook0Share on Google+0Tweet about this on TwitterPin on Pinterest0Email this to someone