Nessa artigo irei mostrar como listar dados de um banco de dados MySql usando Ajax com a Framework Javascript Prototype.

Prototype é uma Framework Javascript que facilita o desenvolvimento de sistemas web dinâmicos.

Nesse artigo iremos realizar 5 etapas:

1- Criação do banco dados;
2- Fazer o download da Framework Javascript Prototype;
3- Criação da classe de conexão com o banco;
4- Criação dos arquivos que irá realizar a busca dos registros no banco.
5- Criação do arquivo que irá listar os registros;

ETAPA 1:
Nessa primeira etapa iremos realizar a criação do banco de dados. Utilizaremos como exemplo um banco, nomeado CLIENTE e uma tabela nomeada TBCLIENTE. A tabela irá conter os seguintes campos:
    - id
    - nome
    - email

Acesse o gerenciador de banco de dados PHPMYADMIN. No campo CRIAR NOVO BANCO DE DADOS digite Cliente e clique o botão CRIAR
:
Ainda no PHPMYADMIN clique a opção SQL. Digite os códigos abaixo e clique o botão EXECUTAR. Isso fará com que a tabela seja criada.

SQL
CREATE TABLE IF NOT EXISTS `tbCliente` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nome` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1
www.revistaphp.com.br

Execute também as linhas abaixo para inserir alguns dados no banco.

SQL
INSERT INTO tbCliente (nome, email) VALUES
  ('Cliente de Teste 1', 'cliente1@cliente.com.br'),
  ('Cliente de Teste 2', 'cliente2@cliente.com.br'),
  ('Cliente de Teste 3', 'cliente3@cliente.com.br'),
  ('Cliente de Teste 4', 'cliente4@cliente.com.br'),
  ('Cliente de Teste 5', 'cliente5@cliente.com.br'),
  ('Cliente de Teste 6', 'cliente6@cliente.com.br'),
  ('Cliente de Teste 7', 'cliente7@cliente.com.br'),
  ('Cliente de Teste 8', 'cliente8@cliente.com.br');
www.revistaphp.com.br

ETAPA 2:
Nessa etapa iremos realizar o download da Framework Javascript Prototype.
Inicialmente crie uma pasta no seu web server(APACHE ou ISS), diretório onde será colocado os arquivos do sistema. Por exemplo:
C:\Arquivos de programas\Apache Group\Apache2\htdocs\Cliente

Acesse o endereço http://www.prototypejs.org/download e baixe o arquivo prototype.js. Salve esse arquivo na pasta Cliente criada anteriormente.

ETAPA 3:
Iremos nessa etapa criar a classe de conexão com o banco de dados.
No diretório criado no web server, crie um diretório chamado db. Como mostra a imagem abaixo.


Crie nesse diretório um arquivo nomeado com db.php. Copie nesse arquivo as linhas abaixo. Observe o comentário em cada linha.

PHP
<?php
/*
  Classe para conexão em MySQL
*/
class db{
 
    // Host
    var $host = "localhost";
    // Usuário de conexão
    var $user = "root";
    // Senha para conexão
    var $pass = "";
    // Banco de dados
    var $db   = "Cliente";  
 
    // Função para abrir o banco de dados
    function open()
    {
        // conecta o mysql
        $conn = mysql_connect($this->host,$this->user,$this->pass) or die ("<br><br><center>Problemas ao conectar no servidor: " . mysql_error() . "</center>");
        // seleciona o banco de dados
        mysql_select_db($this->db) or die ("<br><br><center>Problemas ao selecionar a base de dados do sistemas: " . mysql_error() . "</center>");
        return $conn;
    }
    //Função de fechamendo do banco
    function close($conn)
    {
        mysql_close($conn);
    }
}
?>
www.revistaphp.com.br

ETAPA 4:
Nessa etapa iremos criar os arquivos que irá buscar os registros no banco. É necessário a criação de dois arquivos:
    - Cliente.php
    - Cliente.js

Iniciaremos pela criação do arquivo Cliente.php. Acesse o diretório criado no web server, no caso C:\Arquivos de programas\Apache Group\Apache2\htdocs\Cliente e crie o arquivo Cliente.php. Copie nesse arquivo as linhas abaixo. Observe o comentário em cada linha.

PHP
<?php
 
// Importando a classe de conexão
require_once("db/db.php");
 
// Instanciando a classe de conexão
$db = new db();
// Abrindo o banco de dados
$con = $db->open();
// Select, trazendo os dados da tabela de Cliente. O código $_POST['nome'] contém o valor da busca
$sql = "SELECT * FROM tbCliente WHERE nome LIKE '%" . $_POST['nome'] . "%'";
// Executa o sql         
$query = mysql_query($sql);
 
// Verificando se há registros
if(mysql_num_rows($query)){
 
		// Montando o XML com os registros do banco
header("Content-type: application/xml charset=iso-8859-1");
		$xml="<?xml version=\"1.0\" encoding=\"ISO-8859-1\" ?>";
 
		$xml.="<dados>";
 
		// Definindo as colunas da tabela de listagem dos registros
		$xml.=	"<cabecalho>";
		$xml.=		"<coluna>Código 	</coluna>";
		$xml.=		"<coluna>Nome 	</coluna>";
		$xml.=		"<coluna>email 	</coluna>";
		$xml.=	"</cabecalho>";
 
// Montando o corpo da tabela
       		 while ($dados = mysql_fetch_array($query)){
			$xml.="<registro>";
			$xml.=	"<item>".$dados['id']."</item>";
			$xml.=	"<item>".$dados['nome']."</item>";
			$xml.=	"<item>".$dados['email']."</item>";
			$xml.="</registro>";
		}	
 
 
		//fim da tabela
		$xml.="</dados>";
}else{
	header("Content-type: application/xml");
	$xml="<?xml version=\"1.0\" encoding=\"ISO-8859-1\" ?>";
}
 
// Retornando o XML com os registros do banco
echo $xml;
 
// Fechando o banco
$db->close($con);
exit();
 
?>
www.revistaphp.com.br

Iremos criar o arquivo Cliente.js. Acesse o diretório criado no web server, no caso C:\Arquivos de programas\Apache Group\Apache2\htdocs\Cliente e crie o arquivo Cliente.js. Copie nesse arquivo as linhas abaixo. Observe o comentário em cada linha.

Cliente.js

JS
// Função de crição da tabela de listagem de clientes
function createGrid(nome)
{
 if(nome == null)
	nome = "";
 
	var url = 'Cliente.php';
	var parametros = 'nome='+nome;
	var myAjax = new Ajax.Request( url, { method: 'post', parameters: parametros, onLoading: carregando, onComplete: escreve}); 	  
}
// Função de pesquisa
function pesquisar() {
	// Passando como parâmetro o valor do campo pesq_nome do formulário de pesquisa
createGrid( $("pesq_nome").value );
}
// Função de exibição de imagem de processamento
function carregando()
{
	$("msg").style.display="block";
	$("msg").innerHTML="<img src='ajax-loader.gif'>";
}
// Escreve a tabela de listagem de clientes
function escreve(request)
{
	$("msg").style.display="none";
 
	var xmldoc=request.responseXML;
	var cabecalho = xmldoc.getElementsByTagName('cabecalho')[0];
 
	if(cabecalho!=null) {
 
		var coluna = cabecalho.getElementsByTagName('coluna');
		var tabela="<table width='100%' border='0'><tr bgcolor='#666666'>"
 
		//cabecalho da tabela
		for(i=0;i<coluna.length;i++){
			tabela+="<td><b><font color='#FFFFFF'>"+coluna[i].firstChild.data+"</font></b></td>";
		}
		tabela+="</tr>"
		//corpo da tabela
		var registros = xmldoc.getElementsByTagName('registro');
 
		for(i=0;i<registros.length;i++){
			var itens = registros[i].getElementsByTagName('item'); 
			tabela+="<tr id=linha"+i+" bgcolor='#DDDDDD'>";
			for(j=0;j<itens.length;j++){
				if(itens[j].firstChild==null){
					 tabela+="<td></td>";
				}else{
				   tabela+="<td>" + itens[j].firstChild.data + "</td>";
				}
			}
			tabela+="</tr>";
		}
		tabela+="</table>";
		$("listagem").innerHTML=tabela;
		tabela=null;
		}else{
			$("listagem").innerHTML="<div align='center'>Não há registros...</div>";
		}
}
www.revistaphp.com.br

ETAPA 5:
Nessa etapa iremos criar o arquivo que irá listar os dados do banco em uma tabela. Acesse o diretório criado no web server, no caso C:\Arquivos de programas\Apache Group\Apache2\htdocs\Cliente e crie o arquivo Lista.php. Copie nesse arquivo as linhas abaixo. Observe o comentário em cada linha.

PHP
<html>
<head>
<title>Listagem de Clientes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Importando a biblioteca javascript de clientes -->
<script language="javascript" src="Cliente.js"></script>
<!-- Importando a biblioteca javascript Prototype -->
<script language="javascript" src="prototype.js"></script>
</head>
 
<!-- Na inicialização da página é executada a função createGrid. Essa função cria a tabela de listagem com os dados do banco -->
<body onLoad="javascript:createGrid();">
<!-- Imagem de animação do processamento -->
<div id='msg' style='display:none; position:absolute; left: 274px; top: 13px; width: 109px; height: 27px;'></div>
<table width="100%"  border="0">
  <tr>
    <td>
	<!-- Formulário de pesquisa -->
<form action="" method="post">
		Nome: <input type="text" id="pesq_nome" onKeyUp=”javascript: pesquisar (this.value);”>
		<input type="button" name="Button" value="Buscar" onClick="javascript:pesquisar();">
	</form>
    </td>
  </tr>
  <tr>
    <td>
	<!-- Camada onde será mostrada a tabela de listagem -->
<div id="listagem"></div>
    </td>
  </tr>
</table>
</body>
</html>
www.revistaphp.com.br

Para finalizar, acesse o endereço http://www.fortalveiculos.com.br/ajax-loader.gif e baixe a imagem ajax-loader.gif. Salve a imagem no mesmo diretório dos arquivos do sistema.

Pronto, finalizamos. Acesse o endereço local, http://localhost/cliente/Lista.php, pelo browser e veja o resultado.

Visualize a demonstração no endereço:
http://www.fortalveiculos.com.br/Cliente/Lista.php

Abraços, e até o próximo artigo.