Não sei se você lembra, mas há um tempo atrás, tinhamos uma dificuldade enorme ao elaborar um web site; Digo isso, pois trabalhei cuidando de um grande Portal onde eu tinha de alterar e incluir diversas páginas HTML diáriamente!
O negócio hoje mudou, temos diversas linguagens dinâmicas que facilitam nossas vidas e distribuem recursos que fazem programadores iniciantes ou experientes desenvolverem suas atividades com uma facilidade infinitamente maior.
O assunto que abordaremos hoje, refere-se a um evento muito prático que hoje se torna necessário em qualquer Projeto de Médio ou Grande Porte: O “PHP com uso do Ajax”.
Falando Da Solução
Tratando-se de PHP x Ajax, podemos elaborar qualquer coisa!
Para quem tem a necessidade de trazer em tela diversas informações relacionadas a Categorias e subcategorias, Empresas e suas Filiais, Estado / Província e Cidades, essa solução é essencial.
Se você procura algo simples e prático de manusear e customizar, este ficheiro é para você!
Até para facilitar sua vida, vamos usar nesta solução 4 pequenos arquivos, que são:
- conexao.php (responsável pela conexão à base de dados)
- index.php (página inicial do Projeto – que deverá chamar os demais ficheiros)
- cidades.ajax.php (responsável por carregar as cidades)
- jsapi.js (cria o evento ajax, que carrega a subcategoria)
O Arquivo conexão.php
O arquivo de conexão é muito simples de ser alterado e possui as funções adequadas para que sua conexão ao MySQL seja efetuada com sucesso (conforme script a seguir).
<?
$database = "SERVIDOR"; // Nome ou IP do Servidor
$dbname = "DATABASE"; // Base de Dados
$usuario = "USUARIO"; // Usuário do MySQL
$dbsenha = "SENHA"; // Senha do Usuário MySQL
$conexao= mysql_connect ($database, $usuario, $dbsenha);
if($conexao){
if (mysql_select_db($dbname, $conexao)){ print ""; }
else { print "Não foi possível selecionar o Banco de Dados"; }
}
else{ print "Erro ao conectar o MySQL"; }
?>
O Arquivo index.php
Esta página é direta (assim como o script em si) e poderá ser alterada de acordo com suas necessidades.
Até para facilitar seu entendimento, estaremos postando por partes e você poderá conferir na prática seu uso ao finalizar a matéria, pois postamos todo o ficheiro em anexo.
Trazendo os Estados:
No trecho abaixo, usamos um select prático onde trouxemos as siglas de cada Estado através do While.
<label for="cod_estados">Estado:</label>
<select name="cod_estados" id="cod_estados">
<option value=""></option>
<?php
$sql = "SELECT cod_estados, sigla
FROM estados
ORDER BY sigla";
$res = mysql_query( $sql );
while ( $row = mysql_fetch_assoc( $res ) ) {
echo '<option value="'.$row['cod_estados'].'">'.$row['sigla'].'</option>';
}
?>
</select>
Trazendo a Cidades:
No trecho abaixo trazemos as cidades (de acordo com a variável selecionada acima).
Como a base de dados que utilizei é extensa, até para não haver problema de insatisfação por parte de quem busca a informação, utilizamos um evento que retorna um pedido para que o Internauta aguarde enquanto a busca é efetuada na base de dados (conforme código e imagem a seguir).
<label for="cod_cidades">Cidade:</label>
<span class="carregando">Aguarde, carregando...</span>
<select name="cod_cidades" id="cod_cidades">
<option value="">-- Escolha um estado --</option>
</select>
<script src="jsapi.js"></script>
<script type="text/javascript"> google.load('jquery', '1.3'); </script>
<script type="text/javascript">
$(function(){
$('#cod_estados').change(function(){
if( $(this).val() ) {
$('#cod_cidades').hide();
$('.carregando').show();
$.getJSON('cidades.ajax.php?search=',{cod_estados: $(this).val(), ajax: 'true'}, function(j){
var options = '<option value=""></option>';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].cod_cidades + '">' + j[i].nome + '</option>';
}
$('#cod_cidades').html(options).show();
$('.carregando').hide();
});
} else {
$('#cod_cidades').html('<option value="">– Escolha um estado –</option>');
}
});
});
</script>
Prático, não?
O Arquivo cidades.ajax.php
Vamos agora verificar o script que trás as subcategorias?
A diferença entre o “index.php” (que também usa o comando while) é que no “cidades.ajax.php” usamos a classe “JSON”. Isto é: Uma classe específica para buscas personalizadas [4].
<?php
header( 'Cache-Control: no-cache' );
header( 'Content-type: application/xml; charset="utf-8"', true );
include('conexao.php');
$cod_estados = mysql_real_escape_string( $_REQUEST['cod_estados'] );
$cidades = array();
$sql = "SELECT cod_cidades, nome
FROM cidades
WHERE estados_cod_estados=$cod_estados
ORDER BY nome";
$res = mysql_query( $sql );
while ( $row = mysql_fetch_assoc( $res ) ) {
$cidades[] = array(
'cod_cidades' => $row['cod_cidades'],
'nome' => $row['nome'],
);
}
echo( json_encode( $cidades ) );
Faça um teste em sua estrutura e crie subcategorias em suas soluções!
Certamente valorizarão e muito seu trabalho.
Dicas De Suporte
Caso você instale o Sistema e apresente algum erro, verifique se você está seguindo o padrão abaixo descrito:
- Versão do Servidor:
Para evitar problemas ref. a bugs ou erros, utilize o padrão LAMP.
- Suporte:
Nesta solução utilizamos a classe JSON. Geralmente ela já vem instalada nos Servidores mais modernos!
Se o seu Servidor ainda não tiver dando suporte a esta classe, solicite ao Administrador para configurar o JSON ou baixe a classe diretamente no site [4] e faça a adaptação a seu sistema.
- Padronização:
Por opção, estamos usando caracteres em “UTF-8″ tanto no script quanto na base de dados. Caso seja de seu interesse, poderá mudar tranquilamente para “ISO-8859-1″ ou outro padrão de caracter de seu interesse.
Bem… espero que tenhas bom proveito com o conteúdo publicado neste Sistema.
Trata-se de uma solução que poderá ser usada não apenas para Estados e Cidades, mas também diversas categorias e subcategorias.
Download do código usado neste tutorial: Categoria E Subcategoria Com PHP E Ajax [5]
