POR CARLOS CHERNIJ
Ajax vem dando o que falar no mundo dos si- tes dinâmicos. Essa téc- nica de desenvolvimen- to usa HTML, JavaScript, XML e algu- ma linguagem para a web, como PHP, ColdFusion, Java ou C# e tem no Google um ilustre usuário. Quando al- guém distribui corações para os ami- gos no orkut, por exemplo, a página atualiza os campos correspondentes sem recarregar todo o resto, agilizando a operação. Num formulário normal da web, os dados fornecidos pelo in- ternauta são enviados para o servidor,
que devolve uma nova página com o resultado. Para demonstrar como se programa em Ajax, vamos criar um serviço de cadastro com PHP e HTML.
1.
O SERVIDORPara executar nosso exemplo, é pre- ciso ter um servidor HTTP Apache 2.0 rodando PHP 4.4 no modo binário CGI e o banco de dados MySQL 4.1 ou mais recente. Esses recursos estão dispo- níveis na maioria dos planos de hos- pedagem de sites. Baixe o exemplo
em www.info.abril.com.br/down
load/4326.shtmle descompacte-o.
Você vai obter uma pas- ta chamada infoajax com vários arquivos. Coloque essa pasta no diretório- raiz do servidor Apache (diretório htdocs). Para criar nossa aplicação, usa- remos uma biblioteca de classes em PHP, a Xajax
(www.info.abril.com.br/
download/4327.shtml).
Ela está incluída no arqui- vo compactado, dentro da pasta includes, com o no- me xajax.inc.php.
O
Formulário: cadastro de clientes feito com Ajax
TUTORIAL/DESENVOLVIMENTO
C O L E Ç Ã O I N F O>85
TUTORIAL/DESENVOLVIMENTO
84<C O L E Ç Ã O I N F O
o $xajax->registerFunction(), que permite agregar funções es- critas em PHP que realizarão ope- rações com dados do formulário de forma assíncrona. Cada função dessas deve possuir um objeto da classe xajaxResponse(), que con- terá os dados a atualizar.
7.
TELA DE CADASTRONa tela de cadastro, o exemplo de uso do Ajax é composto dos menus com os dados de estado e cidade. A lista de cidades é atualizada de acordo com o estado escolhido. Pa- ra selecionar as cidades, há a fun- ção carregaCidades. No arquivo ca- dastro.php, observe o código des- sa função. Após ler o valor selecio- nado no menu Estado, a função rea- liza uma consulta na tabela para se- lecionar as cidades corresponden- tes. Cada registro encontrado é adi- cionado ao objeto $objResponse, por meio do método addAssign. No código, temos esta linha:
$objResponse->addAssig (“cidades”,“innerHTML”, $html)
O item “cidades” é a identificação da divisão da página onde ficará o menu com as cidades, e “in- nerHTML” especifica que o conteú- do da variável $html vai substituir o código html dentro da divisão. No final, é chamado o método getXML(), que retorna uma seção de código XML ao objeto xajax. Após imple- mentar a função, vamos incorporá- la ao xajax por meio do comando:
$xajax->registerFunction (“carregaCidades”)
8.
XAJAXApós a definição das funções, quan- do começa a seção de código HTML do arquivo cadastro.php, é preciso especificar que o xajax deve tomar para si os comandos de post do for- mulário. Isso é feito pelo comando
$xajax->processRequests() Em se-
guida, devemos criar um evento que chamará a função que registramos no objeto xajax. Isso é feito na linha:
<select id=“uf”name=“uf” onChange=“javascript:aguarde(); xajax_carregaCidades(this. value);”style=“width: 50px;”>
Cada vez que o campo Estado mu- dar, a função carregaCidades será chamada e retornará a lista de cida- des em código XML. O xajax utiliza- rá a lista num JavaScript, que, por sua vez, atualizará as cidades.
Um mecanismo similar é utilizado na página index.php, que contém o módulo de consulta. Abra-a num edi- tor de textos. A função listaUsuarios utiliza como parâmetro o texto da caixa de busca. Ao ser chamada, ela faz a consulta no banco e adiciona os resultados à variável $html para que sejam exibidos na página. Ao clicar em Buscar, a função listaUsuarios pas- sa um novo parâmetro para a con- sulta. Ele é enviado para o servidor pelo xajax, que recebe a resposta em XML e usa, então, um programa em JavaScript para reescrever o código HTML, que mostra os resultados.
2.
BASE DE DADOSPrepare a base de dados do aplicativo. O INFOLAB utilizou o phpMyAdmin
(www.info.abril.com.br/
download/3260.shtml)
nessa tarefa. Se esse soft- ware estiver instalado no servidor, digite o endere- ço correspondente para usá-lo, como neste exem- plo: http://www.nome. com.br/phpmyadmin. Na tela inicial, procure
o campo Criar Novo Banco de Da- dos e digite xajax. Clique em Criar.
3.
TABELASVamos gerar tabelas para a nossa aplicação. No phpMyAdmin, acione o menu do lado esquerdo da tela e selecione o banco de dados xajax. Ative, então, a aba MySQL. No cam- po Localização do Arquivo Texto, clique em Procurar. Navegue até o arquivo bd.sql, na pasta infoajax, e selecione-o. Em Conjunto de Carac- teres do Arquivo, escolha latin1. Cli- que em Executar para rodar o pro- grama em SQL. Isso cria as tabelas.
4.
CONFIGURAÇÕESVamos editar o arquivo bd.inc.php que fica na pasta includes. Abra-o num editor de textos e procure:
$conexao = mysql_connect (“localhost”,“usuário”,“senha”); mysql_select_db(‘meubanco’, $conexao);
Substitua as palavras “usuário” e
phpMyAdmin: criação do banco de dados xajax
“senha” pelo nome de usuário e a se- nha que deverão ser usados para acesso ao MySQL. Na linha de baixo, substitua “meubanco” por “xajax”.
5.
O APLICATIVOPara ver o aplicativo-exemplo fun- cionando, abra o browser e digite este endereço: http://www.nome. com.br/infoajax. No lugar de “www.nome.com.br”, coloque o en- dereço do seu site. Clique em Ca- dastrar e inclua dados de uma pes- soa no banco. Depois, volte à pági- na anterior e faça uma consulta.
6.
EXAMINADO O CÓDIGOAnalisaremos a seguir o arquivo cadastro.php, que contém as roti- nas para a inclusão de registros. Abra o arquivo num editor de tex- tos e, logo no começo, observe a linha $xajax = new xajax();. Es- se comando define o objeto xajax, que vai processar as ações de post do formulário. Um dos métodos é 083_084_AJAX 26/02/2006 00:21 Page 84
TUTORIAL/DESENVOLVIMENTO
C O L E Ç Ã O I N F O>85
TUTORIAL/DESENVOLVIMENTO
84<C O L E Ç Ã O I N F O
o $xajax->registerFunction(), que permite agregar funções es- critas em PHP que realizarão ope- rações com dados do formulário de forma assíncrona. Cada função dessas deve possuir um objeto da classe xajaxResponse(), que con- terá os dados a atualizar.
7.
TELA DE CADASTRONa tela de cadastro, o exemplo de uso do Ajax é composto dos menus com os dados de estado e cidade. A lista de cidades é atualizada de acordo com o estado escolhido. Pa- ra selecionar as cidades, há a fun- ção carregaCidades. No arquivo ca- dastro.php, observe o código des- sa função. Após ler o valor selecio- nado no menu Estado, a função rea- liza uma consulta na tabela para se- lecionar as cidades corresponden- tes. Cada registro encontrado é adi- cionado ao objeto $objResponse, por meio do método addAssign. No código, temos esta linha:
$objResponse->addAssig (“cidades”,“innerHTML”, $html)
O item “cidades” é a identificação da divisão da página onde ficará o menu com as cidades, e “in- nerHTML” especifica que o conteú- do da variável $html vai substituir o código html dentro da divisão. No final, é chamado o método getXML(), que retorna uma seção de código XML ao objeto xajax. Após imple- mentar a função, vamos incorporá- la ao xajax por meio do comando:
$xajax->registerFunction (“carregaCidades”)
8.
XAJAXApós a definição das funções, quan- do começa a seção de código HTML do arquivo cadastro.php, é preciso especificar que o xajax deve tomar para si os comandos de post do for- mulário. Isso é feito pelo comando
$xajax->processRequests() Em se-
guida, devemos criar um evento que chamará a função que registramos no objeto xajax. Isso é feito na linha:
<select id=“uf”name=“uf” onChange=“javascript:aguarde(); xajax_carregaCidades(this. value);”style=“width: 50px;”>
Cada vez que o campo Estado mu- dar, a função carregaCidades será chamada e retornará a lista de cida- des em código XML. O xajax utiliza- rá a lista num JavaScript, que, por sua vez, atualizará as cidades.
Um mecanismo similar é utilizado na página index.php, que contém o módulo de consulta. Abra-a num edi- tor de textos. A função listaUsuarios utiliza como parâmetro o texto da caixa de busca. Ao ser chamada, ela faz a consulta no banco e adiciona os resultados à variável $html para que sejam exibidos na página. Ao clicar em Buscar, a função listaUsuarios pas- sa um novo parâmetro para a con- sulta. Ele é enviado para o servidor pelo xajax, que recebe a resposta em XML e usa, então, um programa em JavaScript para reescrever o código HTML, que mostra os resultados.
2.
BASE DE DADOSPrepare a base de dados do aplicativo. O INFOLAB utilizou o phpMyAdmin
(www.info.abril.com.br/
download/3260.shtml)
nessa tarefa. Se esse soft- ware estiver instalado no servidor, digite o endere- ço correspondente para usá-lo, como neste exem- plo: http://www.nome. com.br/phpmyadmin. Na tela inicial, procure
o campo Criar Novo Banco de Da- dos e digite xajax. Clique em Criar.
3.
TABELASVamos gerar tabelas para a nossa aplicação. No phpMyAdmin, acione o menu do lado esquerdo da tela e selecione o banco de dados xajax. Ative, então, a aba MySQL. No cam- po Localização do Arquivo Texto, clique em Procurar. Navegue até o arquivo bd.sql, na pasta infoajax, e selecione-o. Em Conjunto de Carac- teres do Arquivo, escolha latin1. Cli- que em Executar para rodar o pro- grama em SQL. Isso cria as tabelas.
4.
CONFIGURAÇÕESVamos editar o arquivo bd.inc.php que fica na pasta includes. Abra-o num editor de textos e procure:
$conexao = mysql_connect (“localhost”,“usuário”,“senha”); mysql_select_db(‘meubanco’, $conexao);
Substitua as palavras “usuário” e
phpMyAdmin: criação do banco de dados xajax
“senha” pelo nome de usuário e a se- nha que deverão ser usados para acesso ao MySQL. Na linha de baixo, substitua “meubanco” por “xajax”.
5.
O APLICATIVOPara ver o aplicativo-exemplo fun- cionando, abra o browser e digite este endereço: http://www.nome. com.br/infoajax. No lugar de “www.nome.com.br”, coloque o en- dereço do seu site. Clique em Ca- dastrar e inclua dados de uma pes- soa no banco. Depois, volte à pági- na anterior e faça uma consulta.
6.
EXAMINADO O CÓDIGOAnalisaremos a seguir o arquivo cadastro.php, que contém as roti- nas para a inclusão de registros. Abra o arquivo num editor de tex- tos e, logo no começo, observe a linha $xajax = new xajax();. Es- se comando define o objeto xajax, que vai processar as ações de post do formulário. Um dos métodos é 083_084_AJAX 26/02/2006 00:21 Page 84
TUTORIAL/CONSULTAS
C O L E Ç Ã O I N F O>87