Consulta CEP dos Correios com JQuery e CodeIgniter

Teste o Projeto antes de ler o post:

Buscar endereço pelo CEP

Olá.

Hoje vamos aprender a como buscar o endereço de uma localização baseada no CEP informado pelo usuário, e tudo isso sendo feito via AJAX (jQuery).

Nós não vamos utilizar o Webservice dos Correios para isto porque pelo que me informei, os Correios não têm um Webservice oficial para busca de CEP, somente para cálculo de frete.

Porém, existe um site que fornece esse tipo de consulta gratuitamente. É o http://viacep.com.br.

Pra falar a verdade, esse tipo de consulta nem precisaria do CodeIgniter, já que podemos fazer tudo via JavaScript no frontend, e como o CodeIgniter atua no BackEnd não teria muito sentido este post.

Porém, para fins didáticos, vamos fazer usando o CodeIgniter onde eu vou mostrar como criar a sua própria Library de consulta CEP e também veremos um básico do cURL.

O projeto é bem pequeno, não tem muito segredo.

O primeiro passo é fazermos algumas renomeações apenas para tudo ficar um pouco mais bonito. Faça assim:

Renomeie o controller Welcome para Home, não esquecendo de mudar o nome da classe também dentro do arquivo.

Renomeie a view welcome_message para home.

Abra o arquivo config/routes.php e mude o default_controller para ‘home‘.

Pronto, ao fazer isto e ao carregar o CodeIgniter, é para tudo continuar funcionando.

Vamos começar pela nossa biblioteca que faz a consulta.

Vamos criar uma library, ou biblioteca, chamada Curl.php.

Crie um arquivo em application/libraries/Curl.php

Dentro do arquivo, coloque o seguinte código:

Note que não tem muito segredo.

Basicamente eu configuro o endereço padrão de consulta ao Webservice e passo ele para o cURL.

O endereço de consulta deve ficar neste formato:

http://viacep.com.br/ws/CEP/retorno

Ou seja, ficaria assim com os dados substituídos:

http://viacep.com.br/ws/83325000/json/

O último parâmetro indica o formato de retorno. Vamos usar o json, que é mais fácil de entender.

Uma informação importante aqui é que se você não tiver uma chave pública SSL no seu servidor, você vai receber um erro se usar o endereço “https://” do viacep. Então, para resolver isto, basta usar o “http://”.

O próximo passo agora é criarmos nosso controller.

Abra o controller application/controllers/Home.php, que você recém renomeou, e cole o seguinte código abaixo:

Aqui também não tem mistério.

São 2 métodos.

O método index() é o que carrega nossa view padrão, a página inicial, onde está o formulário.

E o método seguinte: consulta(), é o que será chamado via AJAX e que recebe o CEP a ser consultado, devolvendo os dados para a view em formato json.

E por último, vamos dar uma olhada na nossa view home.php

Apesar de aqui ter bastante código, é tudo muito simples.

Para deixar um visual um pouco mais agradável, usei o CDN do bootstrap, pra não precisar ficar baixando nada localmente.

Sem seguida, inseri também a linha que nos traz o jQuery, para fazermos a consulta via AJAX.

Feito isto, fiz um formulário simples com os campos principais de um cadastro qualquer que encontramos por aí na web.

A função que faz todo o trabalho é a que faz a consulta no cep.

Veja abaixo só o código JavaScript:

Note que eu aguardo o DOM da página ficar pronto e atribuo o evento Click no botão.

Se você quiser que a busca ao CEP seja feita quando o usuário deixar o campo CEP, basta mudar o “click” para “blur“.

Quando o usuário clicar no botão Consulta, eu verifico se ele digitou realmente o CEP, caso não, mando uma mensagem de erro e volto o foco para o campo CEP.

Aqui eu fiz uma validação muito simples para fins didáticos.

Você não deve fazer isto. Ao colocar isto em produção, faça a validação do formato do CEP tanto em JavaScript quanto no PHP, para não deixar o usuário enviar qualquer coisa para seu servidor.

Caso o usuário tenha preenchido o CEP, faço agora a consulta.

Utilizando a função $.post() do jQuery, eu passo como primeiro parâmetro o endereço do método que fará a consulta, neste caso é o método consulta() dentro do controller Home.

No segundo parâmetro, eu informo o campo que será enviado no POST, que neste caso é somente o CEP.

No terceiro parâmetro é onde fica a função de callback que nos trará o retorno dos dados enviados pelo método consulta() do controller.

E é aqui que a mágica acontece.

Dentro da função de callback, eu tenho um parâmetro chamado ‘dados’, que é onde ficarão armazenadas as informações devolvidas pelo método consulta.

E como está em formato ‘json‘, para eu acessar cada campo do retorno, basta eu digitar assim: dados.logradouro, dados.bairro, etc.

Sabendo disto, agora eu preencho cada campo do formulário com seu respectivo valor.

O último parâmetro importantíssimo da função $.post() é o formato de dados com que ela irá trabalhar, neste caso, “json“.

E pronto, se tudo estiver funcionando, ao digitar um CEP válido no campo e ao clicar no botão verde, os campos abaixo serão preenchidos automaticamente.

Abaixo segue o link para testar o projeto funcionando e também para você baixar o Código Fonte.

Testar Funcionando

> Projeto no GitHub – https://github.com/reszko/codeigniter-busca_cep.git

Abraços e até a próxima.

Fábio S. Reszko

Sou Programador PHP desde 2006 e eu acredito sinceramente que programar usando um Framework PHP é a solução para os problemas de códigos desorganizados, difíceis de entender e de dar manutenção no futuro. Se você também acredita nisto, então fique à vontade em explorar meu blog.

Você pode gostar...

  • Gilson Junior

    Muito bom, é sempre de grande ajuda, parabéns..

  • Junior ferreira

    gostei estou tentando implementar, mas estou com dúvida na linha 13 do script ( $.post(‘index.php/home/consulta’, ) pois sua explicação sobre essa linha não parece bater com esse trecho de código. Não consegui entender esses 3 parâmetros que você explicou..

  • Olá Junior.

    A explicação dos parâmetros é referente à função $.post(ENDEREÇO, PARÂMETROS, CALLBACK, TIPO_DE_RETORNO);

    Substituindo:
    ENDEREÇO: “index.php/home/consulta”
    PARÂMETROS: cep: cep
    CALLBACK: function(data){ }
    TIPO_DE_RETORNO: json

    Os parâmetros são os valores que são enviados via POST para o endereço, nesse caso somente o CEP.

    Espero que tenha entendido.
    Abraços
    Fabio

  • Junior ferreira

    Obrigado por responder, sim agora entendi. O único arquivo que não encontrei no projeto foi o index.php que esta no primeiro parâmetro do endereço ($.post(‘index.php/home/consulta’)..

  • O arquivo index.php é o arquivo de bootstrap (não confunda com o css bootstrap) do CodeIgniter.

    Toda requisição que você faz para o Framework deve ser enviada para o arquivo index.php, seguido do controller e depois do método.

    Assim: index.php/home/consulta, onde: “home” é o controller, “consulta” é o método.

    Abraços

  • Eduardo Molina

    boa tarde, estive tentando utilizar esta sua dica, para quem utiliza o .htaccess precisa editar alguma coisa para o json funcionar ?

  • Olá Eduardo

    Como você está consumindo os dados de um webservice externo, acredito que não haja nenhuma configuração adicional, até porque, o htaccess está relacionado a configuração de quem acessa o seu site, não sites externos.

    Abraços
    Fabio

  • Eduardo Molina

    então, tentei utilizar o mesmo codigo, a unica diferença é que meu controlador o nome é diferente o que não iria mudar nada. Porem em meu formulario simplesmente fica em Buscando… o que presumo ser que não passou a referencia para buscar.

  • Aperta F12 no Chrome, clica em Network e chama seu método que busca o cep. Vai aparecer URL chamada pelo método ajax, clica nela e veja os parâmetros passados e valores recebidos, é uma excelente maneira de debugar o código.

    Fabio

  • Eduardo Molina

    ok, obrigado, esta não sabia.

  • Richard Barcelos

    Olá, tudo bem?

    Meu botão fica escrito Aguarde…. e nada acontece.. o que pode ser?

  • Richard Barcelos

    Eu precisei mudar o caminho do retorno da consulta para:

    $.post(‘index.php/registro/consulta’,

    minha rota esta assim:
    $route[‘registro’] = ‘registro’;

    ele processa e não acontece nada

    porém se eu usar $route[‘default_controller’] = ‘home’;

    então ele funciona..

  • Olá Richard.

    Como é uma chamada AJAX, você pode monitorar isto apertando a tecla F12 no Chrome, depois clicando em Network. Em seguida clique no botão para pesquisar e ali vai aparecer o arquivo que foi chamado. Clique nele e veja o status, em response, por exemplo. Assim dá pra saber se está tendo algum erro de rota ou algum outro problema.

    Fabio