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.
