The Oracle + PHP Cookbook


Criando um processo Ajax usando PHP e Oracle

by Larry Ullman

Use a força da linguagem JavaScript para adicionar interações perfeitas com bancos de dados às suas páginas da Web.


Já faz algum tempo que o modelo Ajax (Asynchronous JavaScript e XML) é o sonho de consumo no mundo de desenvolvimento para a Web. Ocupando lugar de destaque com alguns recursos do Google (Suggest, Maps, Gmail etc.), a metodologia Ajax executa solicitações de servidor sem que o usuário precise enviar um formulário ou clicar em um link. Em outras palavras, o navegador da Web pode fazer a solicitação ao servidor e processar a resposta, sem que o usuário faça coisa alguma ou saiba o que está acontecendo. A rapidez que o Ajax proporciona além de uma enorme conveniência, também pode ser, pura e simplesmente, o máximo!

Neste artigo, falo sobre todos os códigos necessários para usar o modelo Ajax a fim de passar de uma simples página da Web para uma função JavaScript, um objeto XMLHttpRequest, um script PHP e, por fim, para um banco de dados Oracle. Ao falar sobre os códigos, discorrerei sobre cada parte específica em relação ao cenário geral: o que cada bloco faz e qual sua importância. Lendo este HowTo (guia prático), você obterá não só algumas amostras de código, como também, espero eu, um entendimento mais amplo de todo o conceito Ajax.

Background

Como exemplo, vou usar um formulário de inscrição (ou uma parte reduzida dele). A teoria é que devo confirmar endereços de email exclusivos na tabela de usuários, para que as pessoas não possam inscrever-se várias vezes usando o mesmo endereço. Normalmente, isso faz parte do processo de validação realizado depois que o usuário envia o formulário para processo do script PHP. Mas por que o usuário precisa esperar até essa etapa para obter tal validação? Em vez disso, assim que o usuário digitar o endereço de email e passar para o próximo campo do formulário, o endereço será validado imediatamente. Mas, para tanto, ainda preciso consultar o banco de dados, e é nesse ponto que o Ajax entra em cena.

A estrutura de tabela simplificada deste exemplo poderia ser criada com a seguinte instrução SQL (sem a presença das outras tabelas, desaparece a necessidade de identificar chaves e coisas do gênero).

CREATE TABLE users (
        email VARCHAR2(60)
)

Obviamente, você pode expandir esse trecho de código de várias maneiras. Por enquanto, o importante é saber que a amostra de código presume que você estabeleceu uma tabela desse tipo e poderá conectá-la a partir de um script PHP. Como alguns registros devem ser feitos nessa tabela para que o exemplo funcione totalmente, preencha a tabela de modo semelhante a este:

INSERT INTO users (email) VALUES ('this@that.com')
INSERT INTO users (email) VALUES ('me@school.edu')
INSERT INTO users (email) VALUES ('fake@address.net')

Depois de criar e preencher a tabela, você poderá iniciar a definição dos códigos. Como mencionei anteriormente, há dois scripts envolvidos. Para desenvolver e testar tudo, você terá de:

  1. Criar o script PHP que consulta o banco de dados Oracle.
  2. Testar manualmente o script PHP para ver como ele funciona.
  3. Escrever um código JavaScript que interaja com o script PHP.
  4. Criar um formulário em HTML vinculado ao JavaScript.
  5. Testar todo o processo.

 

Etapa 1: Programar a consulta ao banco de dados

Todo o script PHP é chamado ajax.php. (Veja os exemplos no arquivo compactado.) A finalidade desse script é executar uma consulta no BD Oracle e exibir uma mensagem com base nos respectivos resultados da consulta. Estamos falando de Oracle, SQL e PHP bastante elementares, mas esmiuçá-los para esclarecer o que está acontecendo. O script espera receber um endereço de email no URL, disponível na variável $_GET['email']. Em seguida, o script estabelece conexão com o banco de dados Oracle. A consulta propriamente dita conta quantos registros na tabela de usuários têm esse endereço de email:

SELECT COUNT(*) AS NUM_ROWS FROM users WHERE email='{$_GET['email']}' 

O resultado deve ser 0 ou 1 (ou absolutamente nada). A consulta é executada no BD Oracle e os resultados são vinculados à variável PHP $rows. Agora a variável $rows representa quantos registros no banco de dados têm esse endereço de email. Com relação ao modelo Ajax, a parte importante do script esta apresentada a seguir.

if ($rows > 0) {
        echo 'Email address has already been registered!';
} else {
        echo 'Email address is available!';
}


Uma dessas duas mensagens será exibida, com base no valor de $rows. Isso é tudo para essa página! Não será necessária nenhuma linha de código HTML, pois esse script não será usado como uma página da Web padrão.

Se quiser aprimorar o script, você poderá confirmar se o endereço de email corresponde a um padrão de expressão regular para endereços de email. Nesse caso, execute a consulta normalmente ou insira uma instrução informando que o endereço de email é inválido. Por fim, é interessante evitar ataques de injeção SQL. (ou seja, evitar o uso da variável $_GET em sua consulta sem algumas garantias quanto à respectiva validade.)


Etapa 2: Testar o PHP Script

Como todo este processo Ajax envolve várias tecnologias — HTML, JavaScript, PHP, SQL e Oracle — é melhor testar cada parte individualmente. Do contrário, você poderá se perder tentando localizar um eventual problema. Testar este PHP script é bastante fácil:

  1. Certifique-se de que você criou e preencheu a tabela no BD Oracle.
  2. Edite o script ajax.php para que ele use parâmetros de conexão válidos para sua instalação Oracle.
  3. Salve o script como ajax.php.
  4. Coloque-o no diretório apropriado para o seu servidor da Web.
  5. Navegue até http://yoururl/ajax.php?email=X em seu browser.
No lugar de X, use um dos endereços de email já inseridos no banco de dados (por exemplo, http://yoururl/ajax.php?email=this@that.com). Deverá ser emitida a mensagem "Email address has already been registered!" (endereço de email já registrado!). Então, use um endereço de email que ainda não foi armazenado. Você deverá receber a mensagem "Email address is available!" (endereço de email disponível!). Quando esse script estiver funcionando, você poderá passar para o aspecto Ajax propriamente dito deste exemplo.

 

Etapa 3: Programar o JavaScript

Esta seção do processo provavelmente é a mais difícil, a menos que você já tenha larga experiência em JavaScript. Seja como for, o código JavaScript é o coração do processo Ajax, pois é quem executa e processa a solicitação da página PHP. Vejamos este código em detalhes. O código JavaScript definirá três funções. A primeira cria uma variável do objeto de solicitação:

function createRequestObject() {
        var ro;
        if (navigator.appName == "Microsoft Internet Explorer") {
                ro = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
                ro = new XMLHttpRequest();
        }
        return ro;
}


Você deverá conseguir usar esse código para qualquer aplicativo Ajax sem modificá-lo. Se o navegador da Web utilizado for o Microsoft Internet Explorer, a variável ‘ro’ será iniciada como um ActiveXObject do tipo Microsoft.XMLHTTP. Em outros browsers, essa variável é claramente um tipo de objeto XMLHttpRequest. Isso é tudo. A variável ‘ro’ agora é um objeto com todas as funções necessárias para executar uma solicitação assíncrona. Depois de criar a variável do objeto de solicitação, a função a retornará.

Tal função é imediatamente ativada pelo código JavaScript quando a página é carregada pela primeira vez:
var http = createRequestObject();


Agora o protocolo http representa o objeto e é disponibilizado de modo global nas demais funções.

Em seguida, vem a função que ativa o PHP script:
function sendRequest(email) {
        http.open('get', 'ajax.php?email=' + encodeURIComponent(email));
        http.onreadystatechange = handleResponse;
        http.send(null);
}


Ela assume um argumento, ou seja, o endereço de email a ser verificado. Em seguida, a função abre uma conexão com o PHP script. Como o primeiro argumento no método ‘open()’ indica, a solicitação será to tipo ‘get’, e não ‘post’. O endereço de email é anexado ao URL, resultando em uma solicitação de página semelhante a ajax.php?email=this@that.com. Como você já sabe, essa é a maneira apropriada de ativar o PHP script. A função encodeURIComponent() apenas codifica o valor enviado para torná-lo URL-safe, ou seja, poderá ser trafegado diretamente no URL sem problemas. A terceira linha na função diz ao objeto qual função JavaScript deverá ser ativada após a execução da solicitação. A linha final é a que realmente faz a solicitação.

Recapitulando, a primeira função, createRequestObject(), cria a variável de objeto necessária. A segunda função, sendRequest(), faz a solicitação do PHP script propriamente dita. Agora, precisamos de uma função que processe a solicitação:
function handleResponse() {
        if (http.readyState == 4) { 
          document.getElementById('email_label').innerHTML = http.responseText;
        }
}


A função anterior ordenou que o objeto de solicitação ativasse essa função após a realização da solicitação. Essa função primeiro verifica se a solicitação foi efetuada com sucesso. Em caso afirmativo, http.readyState será igual a 4. Esse atributo poderia também dar um resultado de 0 a 3 (você pode fazer uma pesquisa na internet para saber os reais significados, se preferir), mas o resultado 4 significa que a solicitação funcionou. Os resultados da solicitação serão armazenados no atributo http.responseText e consistirão em uma das duas mensagens repetidas pelo PHP script. Ou seja, se a solicitação funcionar, o atributo http.responseText será "Email address has already been registered!" (endereço de email já registrado!) ou "Email address is available!" (endereço de email disponível!).
A esta altura, o JavaScript sabe qual foi o resultado do PHP script. Você só precisa fazer com que o JavaScript notifique o usuário desse resultado. Uma opção fácil é usar uma caixa ‘alert()’:

alert(http.responseText);


Colocando isso na condicional, você verá o resultado quando testar todo o aplicativo. (Na verdade, alert() é uma excelente ferramenta de depuração para confirmar o que está acontecendo com seu código JavaScript.) Entretanto, como usuário final, considero esses alertas irritantes e prefiro exibir a mensagem ao lado da entrada de email no formulário. Para tanto, faço referência ao DOM (Document Object Model). Especificamente, atribuo http.responseText a um elemento em minha página chamada email_label. Veremos como se faz na Etapa 4.

Maravilha! Espero que esteja tudo certo até aqui. Repetindo, esta é a parte mais importante e complexa desta sequência. O JavaScript usa três funções para fazer três coisas: definir um objeto de solicitação específico para o navegador; efetuar a solicitação para o PHP script; e realizar alguma ação com os resultados da solicitação. Se você ficar confuso com alguma dessas tarefas, ou quando chegar a hora de tornar o aplicativo Ajax mais complexo, é aconselhável pesquisar um pouco sobre JavaScript e DOM.

 

Etapa 4: Fazer o formulário HTML funcionar em JavaScript

Como disse anteriormente, a premissa por trás deste exemplo é um formulário de inscrição que precise de pelo menos um endereço de email. O formulário mínimo seria:
<form action="somepage.php" method="post">
Email Address:<input name="email" type="text" size="30" maxlength="60"/><br/>
First Name:<input name="first_name" type="text" size="20" maxlength="20"/><br/>
(Rest of the form...)
</form>


Só isso! Bem, mais ou menos. Você certamente vai precisar de outras coisas (um botão "Enviar", e assim por diante). Mas para efeitos deste exemplo, vamos nos limitar a um formulário bem simples. Para evitar confusão, observe que os atributos de ação e método não têm nada a ver com o script ajax.php (que não processa o envio desse formulário).

Você vai precisar de outras duas coisas. Primeiro, este formulário deverá ativar o código JavaScript que realiza a solicitação. Para tanto, você precisará de alguns truques: inserir um link que possa ser acessado com um clique, esperar o usuário clicar no botão Enviar etc. Decidi que assim que o usuário inserir o endereço de email e passar para o próximo elemento do formulário, o JavaScript será ativado. Isso requer o método onchange(), que adicionarei à entrada de email:
Email Address: <input name="email" type="text" size="30" maxlength="60"
onchange="sendRequest(this.form.email.value)" /> 
                            

Tão logo o usuário altere o valor nessa entrada, incluindo qualquer caractere inserido pela primeira vez, e tabulações ou cliques para outra entrada, a função sendRequest() de JavaScript será ativada, alimentada com um argumento, o valor da entrada do formulário de email. Se você observar novamente o código JavaScript, verá como o valor digitado aqui é enviado para essa função que, por sua vez, é enviada para o script PHP.

A segunda coisa necessária para o formulário HTML é um lugar onde o JavaScript possa "escrever" a mensagem recebida de modo visível para o usuário. Conforme determinado pela função handleResponse(), essa mensagem será atribuída à propriedade innerHTML de um elemento chamado email_label. Para tanto, adicionei um ‘span’ com esse ID após a entrada de endereço de email:
<span id="email_label"></span>

Fiz isso para vincular o formulário HTML ao JavaScript. (Consulte a Listagem 1 nos exemplos no arquivo compactado para ver o código final.) Chegou a hora de ver como isso funciona!

 

Etapa 5: Testar o processo Ajax

Depois de concluir a programação em HTML e JavaScript, salve o trabalho como ajax.html (ou outro nome de sua preferência) e coloque o arquivo no mesmo diretório em que está o PHP script. Para carregar o formulário, execute-o no navegador da Web através de um URL em vez de abri-lo a partir do sistema de arquivos (ou seja, navegue até http://yoururl/ajax.html). Digite um endereço de email não utilizado no campo adequado, pressione a tecla Tab no teclado ou clique no próximo campo de entrada de dados. Repita o procedimento com um endereço de email armazenado. As duas capturas de tela a seguir mostram os resultados que deverão ser exibidos. É mágica pura!

 

figure 1

figure 2

 

Conclusão

Neste artigo, você viu como pode ser fácil implementar um processo Ajax usando PHP e Oracle. Desse modo, a validação do lado do servidor é realizada no cliente (embora ainda seja recomendável manter também a validação do lado do servidor, para o caso de desativação do JavaScript). Na minha opinião, este exemplo específico demonstra uma característica agradável para o usuário final, que não precisará mais:

  • Enviar o formulário
  • Verificar se o endereço de email já foi registrado
  • Voltar para o formulário
  • Repetir o procedimento

Além disso, acredito que este exemplo e o conceito em geral são muito interessantes. E quando se fala em Web, esses são fatores importantes.

Naturalmente, há muito mais coisas que você poderá fazer com Ajax, PHP e Oracle. O exemplo deste artigo mostra apenas a inserção de um tipo de dados no PHP script e recupera uma única string. É possível trafegar um volume muito maior de informações. Se você tiver um volume expressivo de dados a retornar para a página chamadora, precisará que o PHP retorne-os no formato XML e deverá usar o JavaScript para analisá-los e exibi-los. Se fizer uma pesquisa online, encontrará vários exemplos diferentes.



Larry Ullman é diretor da Digital Media Technology e desenvolvedor-chefe para Web na DMC Insights Inc.
, empresa especializada em tecnologia da informação. Larry vive na região de Washington, D.C. e também é autor de vários livros sobre PHP, SQL, desenvolvimento para Web e outras tecnologias de informática.