Consulta CEP dos Correios com JQuery e CodeIgniter
Teste o Projeto antes de ler o post:
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:
<?php
/**
* Implementa o CURL e configura o endereço do webservice
* de consulta o CEP.
*
* @author Fábio S. Reszko
*/
class Curl {
private $endereco_ws = "http://viacep.com.br/ws";
private $url_ws;
public function consulta($cep) {
$this->url_ws = $this->endereco_ws . '/' . $cep . '/json/';
// abre a conexão
$ch = curl_init();
// define url
curl_setopt($ch, CURLOPT_URL, $this->url_ws);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
// executa o post
$resultado = curl_exec($ch);
if (curl_error($ch)) {
echo 'Erro:' . curl_error($ch);
return false;
}
return $resultado;
// fecha a conexão
curl_close($ch);
}
}
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:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Home extends CI_Controller {
/**
* Carrega a view principal
*/
public function index() {
$this->load->view('home');
}
/**
* Recebe o CEP via post e retorna os dados
* consultados via JSON
*/
public function consulta(){
$cep = $this->input->post('cep');
$this->load->library('curl');
echo $this->curl->consulta($cep);
}
}
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
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Consulta CEP</title>
<script src="//code.jquery.com/jquery-2.2.2.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script>
$(function(){
$("#btn_consulta").click(function(){
var cep = $('#cep').val();
if (cep == '') {
alert('Informe o CEP antes de continuar');
$('#cep').focus();
return false;
}
$('#btn_consulta').html ('Aguarde...');
$.post('index.php/home/consulta',
{
cep : cep
},
function(dados){
$('#rua').val(dados.logradouro);
$('#bairro').val(dados.bairro);
$('#cidade').val(dados.localidade);
$('#estado').val(dados.uf);
$('#btn_consulta').html('Consultar');
}, 'json');
});
});
</script>
</head>
<body>
<div class="container">
<h2>Buscador de endereço pelo CEP</h2>
<div class="panel panel-default">
<div class="panel-heading">
Digite o CEP desejado
</div>
<div class="panel-body">
<div class="col-md-4">
<div class="form-group">
<label for="cep">CEP:</label>
<input type="text" name="cep" id="cep" class="form-control" autofocus required placeholder="Somente os números do CEP" />
</div>
<div class="form-group">
<button id="btn_consulta" class="btn btn-success">Consultar</button>
</div>
<div class="form-group">
<label for="rua">Rua:</label>
<input type="text" name="rua" id="rua" class="form-control" disabled required />
</div>
<div class="form-group">
<label for="bairro">Bairro:</label>
<input type="text" name="bairro" id="bairro" class="form-control" disabled required />
</div>
<div class="form-group">
<label for="cidade">Cidade:</label>
<input type="text" name="cidade" id="cidade" class="form-control" disabled required />
</div>
<div class="form-group">
<label for="estado">Estado:</label>
<input type="text" name="estado" id="estado" class="form-control" disabled required size="2"/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
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:
<script>
$(function(){
$("#btn_consulta").click(function(){
var cep = $('#cep').val();
if (cep == '') {
alert('Informe o CEP antes de continuar');
$('#cep').focus();
return false;
}
$('#btn_consulta').html ('Aguarde...');
$.post('index.php/home/consulta',
{
cep : cep
},
function(dados){
$('#rua').val(dados.logradouro);
$('#bairro').val(dados.bairro);
$('#cidade').val(dados.localidade);
$('#estado').val(dados.uf);
$('#btn_consulta').html('Consultar');
}, 'json');
});
});
</script>
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.
> Projeto no GitHub – https://github.com/reszko/codeigniter-busca_cep.git
Abraços e até a próxima.
