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!
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:
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:
- No começo dele, o PHP já está todo comentado e explicado: ele gera o selectbox com os fabricantes.
- No HTML, ele inclui o javascript da cpaint e também validacao.js, que veremos a seguir.
- 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.
- 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.
- A validação do campo de E-mail e Preço são feitas assim que o usuário sai do campo (onBlur).
