Um ano depois da parte 1, aqui seguirá a continuação dos artigos sobre AJAX e PHP (desculpem a demora :). Quando a parte 1 foi escrita, AJAX já era largamente utilizado por toda a WEB. Mas agora, com todo esse tempo que se passou, o uso está MONSTRUOSO. O que mais vemos, são sites, sites e mais sites que utilizam AJAX, seja só num formulário, seja em toda a estrutura. Por isso, está na hora de desenvolvermos um exemplo mais prático.

Produziremos então um formulário de cadastro de classificado de carros, que verifica em tempo real se o e-mail fornecido já está cadastrado e uma caixa de seleção de fabricantes, que uma vez que um fabricante foi selecionado, ele carrega os modelos de carro (uma das características mais utilizadas com AJAX!, o chamado "combo master"). E claro, o anunciante também dirá o preço, e nosso AJAX vai verificar se o preço está válido. No exemplo discutido, só pode haver um classificado cadastrado por e-mail.

Obs: Você já deve ter conhecimento da estrutura da classe CPAINT e como integrá-la com o PHP. Caso não conheça (ou não se lembre), veja a parte 1 dessa série de artigos.

1. O Banco de Dados
Com AJAX verá que é quase sempre necessário ter todo tipo de dado no banco de dados, para facilitar a interação e o usuário ter o menor trabalho possível. Segundo nossa definição acima, nenhum usuário digitará a marca e o modelo do carro a ser cadastrado, mas sim, ele apenas selecionará os dados com 2 cliques do mouse!

As tabelas necessárias são:

• Fabricantes (c_fabricantes), que terá as fabricantes de automóveis;
• Modelos (c_modelos), que terá modelos de automóveis. Cada modelo será vinculado a um ID de alguma fabricante cadastrada. Obviamente, uma fabricante pode ser vinculada a N automóveis.
• Classificados (c_classificados), onde os classificados são armazenados, contendo e-mail do anunciante, preço e modelo anunciados (Não é inserido o fabricante, porque o próprio modelo já é vinculado a um. De qualquer forma, operações relacionais de banco de dados ficam fora do escopo desse artigo).

Que venham os dados!
-- c_fabricantes ------ CREATE TABLE c_fabricantes ( id int(11) NOT NULL auto_increment, fabricante varchar(50) default NULL, PRIMARY KEY (id) ) AUTO_INCREMENT=5 ; INSERT INTO c_fabricantes (id, fabricante) VALUES (1, 'Volkswagen'), (2, 'Chevrolet'), (3, 'Fiat'), (4, 'Ford'); -- c_modelos ------ CREATE TABLE c_modelos ( id int(11) NOT NULL auto_increment, fabricante_id int(11) default NULL, modelo varchar(50) default NULL, PRIMARY KEY (id) ) AUTO_INCREMENT=12 ; INSERT INTO c_modelos (id, fabricante_id, modelo) VALUES (1, 1, 'Gol'), (2, 1, 'Golf'), (3, 1, 'Polo'), (4, 1, 'Parati'), (5, 2, 'Corsa Hatch'), (6, 2, 'Corsa Sedan'), (7, 2, 'Astra'), (8, 2, 'Vectra'), (9, 3, 'Palio'), (10, 3, 'Stilo'); -- c_classificados ------ CREATE TABLE c_classificados ( id int(11) NOT NULL auto_increment, modelo_id int(11) default NULL, email varchar(50) default NULL, preco decimal(10,2) default NULL, PRIMARY KEY (id) ) AUTO_INCREMENT=2 ; INSERT INTO c_classificados (id, modelo_id, email, preco) VALUES (1, 7, 'meu@email.com', 45000.00);
A estrutura e os dados SQL.

2. Formulário
Vamos agora criar o formulário. Como o formulário terá campos select gerados com dados automáticos, será necessário um jeito prático de construí-los. É possível utilizar um for interno para cada select, mas obviamente, isso é muito "cavernoso". Logo, o que precisamos é de uma função auxiliar que crie campos select (ela não será dissecada, porque como disse, é apenas auxiliar, mas o próprio código é comentado e explica o funcionamento). Essa função será incluída num arquivo selectbox.php com o código:

<?php /** * Cria um SelectBox * * O parâmetro $itens deve ser um array com os itens do selectbox, * onde um índice indica o valor do campo e seu respectivo valor * indica o texto que irá aparecer. * Exemplo: * $Campos = array('email' => 'E-mail', 'endereco' => 'Endereço'); * Vira: * <option value="email">E-mail</option>... etc * * @param array $itens Itens do select box * @param string $nome Nome e ID * @param string $selecionado Valor do item selecionado * @param string $extras Extra, por exemplo um código JS * @param string $class Classe CSS */ function SelectBox($itens, $nome, $selecionado = false, $extras = false, $class = false) { $select_box = "<select id="" . $nome . "" name="" . $nome . "" class="" . $class . """; if($extras) { $select_box .= " " . $extras; } $select_box .= "> "; foreach($itens as $valor => $texto) { $select_box .= "<option value="" . $valor . """; if((is_array($selecionado) && in_array($valor, $selecionado)) || $selecionado == $valor) { $select_box .= " selected"; } $select_box .= ">" . $texto . "</option> "; } $select_box .= "</select> "; return $select_box; } ?>
selectbox.php

Tendo a função auxiliar é necessário primeiro criar as rotinas de conexão com banco de dados e inclusão de bibliotecas. No nosso caso, apenas conectamos com banco de dados, incluimos a cpaint2.inc.php (conforme explicado na parte 1) e a selectbox.php. Chamemos esse arquivo de utils.php:
<?
// Conecta com o MySQL
mysql_connect('localhost', 'root', '');
mysql_select_db('exemplos');

// Auxiliar
require 'lib/selectbox.php';
// C-Paint
require 'lib/cpaint2.inc.php';
?>

E agora o código fonte do script com o formulário, formulario.php:
<?
require 'utils.php';

// Obtém Fabricantes, para inserir no selectbox relacionado.
$SQL = 'SELECT id, fabricante
        FROM c_fabricantes
        ORDER BY fabricante ASC';
$resId = mysql_query($SQL);

// Array que será passado para a função selectbox.
// O primeiro item, de chave 0 (primeiro índice do array), 
// indica para o usuário selecionar. Caso ele envie sem selecionar,
// irá valor 0 e saberemos que não foi feita a seleção.
$Fabricantes = array('Selecione');

// Passa os pares: ID do Fabricante => Nome do Fabricante
while($dados = mysql_fetch_array($resId))    
    $Fabricantes[$dados['id']] = $dados['fabricante'];

// Cria o selectbox com as fabricantes, passando os pares
// obtidos acima.
// O quarto parâmetro é uma chamada a uma função
// Javascript definida em validacao.js. A cada mudança
// nesse selectbox, ele chamará essa função.
$selectFabricantes = 
SelectBox($Fabricantes, 'fabricante', '',
'onChange="carregaModelos(this);"');
?>

<!-- INCLUI A CLASSE CPAINT - AJAX -->
<script type="text/javascript" src="lib/cpaint2.inc.compressed.js">
</script>

<!-- Rotinas de validação do formulário -->
<script type="text/javascript" src="lib/validacao.js"></script>

<!-- Formulário -->
<form action="cadastro.php"
method="post" onSubmit="return verificaForm(this);">
<p>E-mail:<br />
<input type="text" name="email" id="email" onblur="verificaEmail();"/> 
<span id="email_erro" style="color: red;"></span>
    </p>

<p>Fabricante:<br />
<?php echo $selectFabricantes; ?> 
<span id="fabricante_erro" style="color: red;"></span>
    </p>

    <p>Modelo:<br />
<span id="modelos_local">Selecione um Fabricante</span> 
    </p>

    <p>Preço:<br />
<input type="text" name="preco"
id="preco" size="5" onblur="verificaPreco();"/> 
<span id="preco_erro" style="color: red;"></span>
    </p>

    <p><input type="submit" value="Enviar" /></p>
</form>

Dissecando formulario.php:

1. No começo dele, o PHP já está todo comentado e explicado: ele gera o selectbox com os fabricantes.
    
   
2. No HTML, ele inclui o javascript da cpaint e também validacao.js, que veremos a seguir.
    
   
3. Cada campo HTML possui um <span> com um id único, chamado: id_do_campo_erro. Esses elementos são necessários para mostrar mensagens de erro individuais. Cada campo que tiver validação deve ter um span relacionado, quando a validação ocorre com ele. Note que o Modelo não possui um campo de erro, mas sim, um campo modelos_local. Nele será inserido dinamicamente o combo com os modelos de um fabricante escolhido.
    
   
4. O formulário possui onSubmit="return verificaForm(this);". Ou seja, quando o usuário clica no botão Enviar, o formulário efetua uma última validação. Também veremos isso a seguir.
    
   
5. A validação do campo de E-mail e Preço são feitas assim que o usuário sai do campo (onBlur).