Preenchimento automático do endereço a partir do CEP com PHP

Olá pessoal. Nesse post vou mostrar para vocês como criar uma funcionalidade para um formulário de cadastro onde o usuário informa o CEP do seu endereço e os campos rua, bairro, cidade e estado são preenchidos automaticamente.

Essa técnica é bastante utilizada hoje em dia em diversos sites da web e traz ótimos resultados uma vez que você garante a integridade e padronização das informações que estão sendo salvas, além de facilitar bastante a vida do usuário.Para auxiliar esse processo, o site http://cep.republicavirtual.com.br disponibiliza uma base de dados(Clique aqui para baixar) com todos os CEPs do Brasil para você fazer odownload e acoplar ao seu projeto e também um webservice caso deseje fazer uma requisição. O webservice está configurado para responder em XML, QueryString eJavaScript.

No nosso exemplo, utilizaremos a segunda opção. Criaremos nosso formulário e faremos uma requisição AJAX com o webservice da República Virtual para solicitar os dados no formato XML. Para facilitar a utilização de AJAX, usarei o JQuery. (Leia um artigo onde explico como trabalhar com AJAX + JQuery).

Antes de começarmos a implementação, organize os seus arquivos da seguinte maneira:

  • index.php : página principal (onde vai o formulário)
  • jquery.js: plugin javascript para auxiliar
  • cep.js : arquivo javascript onde será configurado a requisição AJAX
  • consultar_cep.php :Arquivo que fará a requisição com o WebService

Primeiramente, vamos implementar o arquivo index.php com o formulário de cadastro:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
    <head>
        <title>Consulta de CEP - por rafaelWendel.com</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type='text/javascript' src='http://files.rafaelwendel.com/jquery.js'></script>
        <script type='text/javascript' src='cep.js'></script>
 
    </head>
    <body>
        <h1>Preenchimento automático com consulta de CEP - por <a href="http://www.rafaelwendel.com" title="Visite o blog www.rafaelwendel.com">rafaelWendel.com</a></h1>
        <form id="form1" class="form1" method="post">
            <label>CEP (Somente números):</label><br />
            <input type="text" name="cep" id="cep" maxlength="8" />
 
            <br /><br />
 
            <label>Rua:</label><br />
            <input type="text" name="rua" id="rua" size="45" />
 
            <br /><br />
 
            <label>Número:</label><br />
            <input type="text" name="numero" id="numero" size="5" />
 
            <br /><br />
 
            <label>Bairro:</label><br />
            <input type="text" name="bairro" id="bairro" size="25" />
 
            <br /><br />
 
            <label>Cidade:</label><br />
            <input type="text" name="cidade" id="cidade" size="25" />
 
            <br /><br />
 
            <label>Estado:</label><br />
            <input type="text" name="estado" id="estado" size="2" />
 
            <br /><br />
 
            <input type="submit" value="Salvar Dados" />
 
        </form>
    </body>
</html>

Note que é importante darmos nome e ids para todos os campos de texto do formulário pois isso facilita a manipulação de seus valores por meio do js/jquery.

Agora vamos configurar a requisição AJAX dentro do arquivo cep.js :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready( function() {
   /* Executa a requisição quando o campo CEP perder o foco */
   $('#cep').blur(function(){
           /* Configura a requisição AJAX */
           $.ajax({
                url : 'consultar_cep.php', /* URL que será chamada */ 
                type : 'POST', /* Tipo da requisição */ 
                data: 'cep=' + $('#cep').val(), /* dado que será enviado via POST */
                dataType: 'json', /* Tipo de transmissão */
                success: function(data){
                    if(data.sucesso == 1){
                        $('#rua').val(data.rua);
                        $('#bairro').val(data.bairro);
                        $('#cidade').val(data.cidade);
                        $('#estado').val(data.estado);
 
                        $('#numero').focus();
                    }
                }
           });   
   return false;    
   })
});

A função está configurada para ser executada quando o foco sair do campo CEP. A requisição é feita via método POST com o arquivo consultar_cep.php e o tipo de transmissão que vamos utilizar é o JSON. Em caso de sucesso, os dados do endereço serão inseridos em seus campos correspondentes no formulário e o foco irá para o campoNúmero.

Bom, agora falta apenas o arquivo consultar_cep.php :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
 
$cep = $_POST['cep'];
 
$reg = simplexml_load_file("http://cep.republicavirtual.com.br/web_cep.php?formato=xml&cep=" . $cep);
 
$dados['sucesso'] = (string) $reg->resultado;
$dados['rua']     = (string) $reg->tipo_logradouro . ' ' . $reg->logradouro;
$dados['bairro']  = (string) $reg->bairro;
$dados['cidade']  = (string) $reg->cidade;
$dados['estado']  = (string) $reg->uf;
 
echo json_encode($dados);
 
?>

Para buscar as informações utilizo a função simplexml_load_file (Leia um artigo que escrevi sobre a leitura de arquivos XML).

Note que para executarmos uma requisição no WebService, devemos especificar naURL o formato que desejamos (no nosso caso, XML) e o cep a ser consultado (Linha 5).

Feito isso basta jogar as informações dentro de um array (Importante a conversão parastring porque a função simplexml_load_file retorna Objetos XML) e depois codificar para o formato JSON.

Pronto! Agora é só testar.