Categoria E Subcategoria Com PHP E Ajax

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.

 <?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 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