ASP - Database com JavaScript

ASP Básico - Acesso a banco de dados com DSN

Tenho recebido alguns emails de pessoas que estão tentando aprender ASP e que estão se embaraçando. Pensando nelas este artigo vai procurar mostrar de forma bem objetiva e simples como usar ASP acessando banco de dados com código JavaScript. Em meus artigos anteriores a linguagem de script usada era o VBScript. Você deve ficar atento a este detalhe pois isto implicará em mudanças no código.

Para acompanhar este artigo você deverá ter o Windows 98 e o Personal Web Server instalado. Abaixo estão os links de meus artigos que você deve ler antes de prosseguir:

Afinal , o que é ASP ?

O que eu preciso para trabalhar com ASP ?

Como configurar o Personal Web Server ?

Os objetos ASP.

Você pode também utilizar o Windows XP ou WIndows 2000 e utilizar o Internet Information Server - IIS - como servidor Web.

Ligue seu computador e após a carga do sistema operacional abra o seu navegador padrão - IE Explorer ou Mozila - e digite na guia endereço a seguinte url : http://localhost . Quando você teclar enter deverá ser carregada a página inicial do servidor Web que você estiver usando. Se isto ocorrer esta tudo correto e você pode continuar. Se a página mostrada uma página de erro com a mensagem - Página Não Encontrada - então você deverá verificar a instalação do servidor Web.

Acessando banco de dados Access - Criando um DSN

Vou acessar banco de dados Access , é mais simples e quase todo mundo possui o Access . Ele é um banco de dados caseiro que se presta para testes e protótipos e pequenas aplicações. Para acessar o banco de dados Access uma das formas mais simples é usar um DSN - Data Source Name.

A principio estou supondo que você tenha um banco de dados pronto para ser usado. Eu estarei usando o banco de dados testes.mdb que possui as tabelas : produtos , escolhas e eleitor . A estrutura de cada tabela esta exibida abaixo:

O que é um DSN ?

OBS: Os nomes usados para criar o DSN podem variar , mas o processo sempre será o mesmo. Aqui estamos criando um DSN para o a conexão com um banco de dados Access para outras fontes de dados haverá diferenças quanto ao driver de conexão.

Um Data Source Name ( DSN ) armazena informação sobre a conexão com sua base de dados requeridas pelo driver ODBC : localização , tipo de servidor , informação sobre segurança , etc.

O acesso a base de dados envolve grande parte das aplicações , afinal quando tratamos com aplicações comerciais estamos tratando com informações que precisam ser armazenadas e recuperadas constantemente.

O ambiente Cliente/Servidor usado para esta finalidade envolve o acesso a base de dados e quando essas aplicações estiverem migrando para a Internet elas vão continuar a acessar base de dados para guardar e recuperar informações. Afinal a Internet não é um grande ambiente com muitos clientes e muitos servidores ?

Precisamos criar um Data Source Name - DSN , o qual vai definir a configuração o tipo e qual a base de dados desejamos acessar.

Fazemos isto usando os drivers ODBC instalados e funcionando no servidor. Os drivers ODBC instalados vão depender da base que estaremos acessando: SQL Server, Oracle , Access, etc... Mostraremos a seguir a instalação e configuração do de um DSN usando um driver ODBC para uma base de dados Access em uma máquina local, localizada no diretório c:\TESTE.

Usaremos a base de dados testes.mdb . Vamos mostrar criar um Data Source Name passo a passo:

- Para criar o seu próprio DSN , selecione Iniciar| Configurações|Painel de Controle | ODBC Data Source

Em Meu Computador acione o Painel de Controle e encontre o ícone ODBC 32 bits clicando sobre ele

Na tela do ODBC data Source Administrator selecione a guia - System DSN - e clique na opção Add para incluirmos um novo Data Source ao nosso ambiente.

Na janela - Create New Data Source - marque o driver : Microsoft Access Driver (*.mdb) e clique em Concluir.

Configure as propriedades do DSN conforme a figura abaixo:

Nome da fonte de dados : teste_dsn - este nome será usado para identificar a conexão
Descrição - informe um texto descrevendo a conexão.

Em Banco de dados clique em - Selecionar - e procure pelo banco de dados Access com o qual vai fazer a conexão. No meu caso eu estou acessando o banco de dados testes.mdb em c:\teste , por isto a indicação : c:\teste\testes.dmb.

Clique então em OK e pronto seu DSN com o nome teste_dsn esta pronto para ser usado.

Acessando banco de dados Access - Consultando uma tabela

Agora que você ja tem o DSN vai precisar criar um programa que acesse a tabela produtos do banco de dados testes.mdb e exiba na tela uma tabela HTML com os dados.

A tecnologia que usamos para fazer a conexão com o banco de dados chama-se ADO - Active Data Object - que fornece um conjunto de propriedades e métodos que facilitam a nossa vida.

Para ler dados de um banco de dados podemos usar o objeto recordset ADO . Atenção agora : Para acessar um conjunto de registros (recordset) você primeiro cria um objeto Server . Abaixo temos a linha de código em JavaScritp e em VBScript :

JavaScript	var recordset = Server.CreateObject("ADODB.Recordset")
VBScript	Set recordset = Server.CreateObject("ADODB.Recordset")

Após ter criado o recordset pode pedir a ele que faça a consulta sobre o seu banco de dados. Na linha de código a seguir , estou usando JavaScript , para dizer ao objeto Recordset para abrir uma conexão com o banco de dados testes.mdb usando o DSN teste_dsn criado e a seguir executar o comando SQL : Select * from Produtos

recordset.Open("Select * from produtos;","DSN=teste_dsn")

Ao executar a consulta na tabela produtos o resultado será armazernado em uma coleção(um vetor) e, você acessa esses dados pelo nome da coluna (campos) da tabela. As colunas da tabela produtos são : id , nome , descricao , detalhes, preco sugerido, preco real

Para acessar a coluna nome faremos : recordset("nome")

Para chegar ao próximo você vai usar o método MoveNext assim : recordset.MoveNext()

Quando você chegar no fim dos dados a propriedade EOF ficará com o valor igual a True e você usa esta condição para saber se chegou ou não ao fim dos registros.

while(!recordSet.EOF) - significa : percorra o recordset enquanto não chegar ao final. (O caracter ! significa NOT )

A seguir o código completo do arquivo dsntst.asp comentado:

<%@ LANGUAGE="JAVASCRIPT" %>

<html>
<head>
<title>Consultando dados de um Banco de dados</title>
</head>
<body>
<%

var recordset=  Server.CreateObject("ADODB.RecordSet");

recordSet.Open("select * from produtos;","DSN=teste_dsn");

Response.Write("<table border=1>");

while(!recordSet.EOF)
{
     Response.Write("<tr>");

     Response.Write("<td>");
     Response.Write(recordSet("nome"));
     Response.Write("</td>");

     Response.Write("<td>");
     Response.Write(recordSet("descricao"));
     Response.Write("</td>");

     Response.Write("</tr>");

    recordSet.MoveNext();
}

Response.Write("</table>");

%>

</body>
</html>

O código ao lado cria uma tabela HTML e exibe os dados da tabela produtos em uma página ASP.

O código ASP deve estar entre as tags <% %>

1- var recordSet = Server.CreateObject("ADODB.RecordSet");

define uma variável do tipo Recordset

2-recordSet.Open("select * from produtos;","DSN=teste_dsn");

abre uma conexão com o banco de dados definido no DSN e acess a tabela

3- Response.Write("<table border=1>");

inica a criação da tabela

while(!recordSet.EOF)
{
     Response.Write("<tr>");

     Response.Write("<td>");
     Response.Write(recordSet("nome"));
     Response.Write("</td>");

     Response.Write("<td>");
     Response.Write(recordSet("descricao"));
     Response.Write("</td>");

     Response.Write("</tr>");

percorre o recordset até o fim (EOF) e exibe o nome e a descrição do produto

5-recordSet.MoveNext();

vai para o próximo registro

Código do arquivo dsntst.asp

Você deve salver este arquivo com um nome e extensão .asp (vou salvar o arquivo com o nome dsntst.asp) no diretório c:\inetpub\wwwroot\ , ou pode criar um diretório subordinado a wwwroot e salvar o arquivo neste diretório. Vou criar o diretório aspjs sob c:\inetpub\wwwroot\ ; assim obteremos : c:\inetpub\wwwroot\aspjs\.

Após você fazer isto , para testar o arquivo de script basta abrir o seu navegador preferido e digitar na url endereço : http://localhost/dsntst.asp se salvou o arquivo em c:\inetpub\wwwroot\ ou http://localhost/aspjs/dsntst.asp se salvou em c:\inetpub\wwwroot\aspjs.Veja o resultado abaixo:

Nada mal não é mesmo. Vou dar uma incrementada incluindo um título , exibindo a coluna preço e mudando a cor de fundo da tabela. Executando o arquivo com as alterações teremos :

O código do arquivo dsntst.asp alterado , as alterações estão destacadas em negrito, é o seguinte:

<%@ LANGUAGE="JAVASCRIPT" %>

<html>
<head>
<title>Consultando dados de um Banco de dados</title>
</head>
<body>
<%

var recordSet = Server.CreateObject("ADODB.RecordSet");

recordSet.Open("select * from produtos;","DSN=teste_dsn");
Response.write("Macoratti.net - Tabela de Preços para remessa via carta registrada");

Response.Write("<table bgcolor='aqua' border=1>");

while(!recordSet.EOF)
{
   Response.Write("<tr>");

   Response.Write("<td>");
   Response.Write(recordSet("nome"));
   Response.Write("</td>");

   Response.Write("<td>");
   Response.Write(recordSet("descricao"));
   Response.Write("</td>");

   Response.Write("<td>");
   Response.Write("R$ ");
   Response.Write(recordSet("preco sugerido"))
   Response.Write("</td>");

   Response.Write("</tr>");

  recordSet.MoveNext();
}

Response.Write("</table>");

%>

</body>
</html>

O único problema em usar a configuração DSN é que usamos um driver ODBC e esta não é a melhor opção. Como estamos usando ADO para fazer a conexão temos a disposição os provedores OLE DB que são mais eficientes. Vamos então alterar a conexão e ao invés de usar o DSN vamos usar uma conexão com o provedor OLE DB. O resultado obtido seria o mesmo o código , com as alterações em destaque , ficaria assim:

<%@ LANGUAGE="JAVASCRIPT" %>
<html>
<head>
<title>Consultando dados de um Banco de dados</title>
</head>
<body>
<%
var conn= Server.CreateObject("ADODB.Connection");
var recordSet = Server.CreateObject("ADODB.RecordSet");

conn.connectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=c:/teste/testes.mdb";
conn.Open();
recordSet.Open("select * from produtos;",conn);

Response.write("Macoratti.net - Tabela de Preços para remessa via carta registrada");

Response.Write("<table bgcolor='aqua' border=1>");

while(!recordSet.EOF)
{
  Response.Write("<tr>");

  Response.Write("<td>");
  Response.Write(recordSet("nome"));
  Response.Write("</td>");

  Response.Write("<td>");
  Response.Write(recordSet("descricao"));
  Response.Write("</td>");

  Response.Write("<td>"); Response.Write("R$ ");
  Response.Write(recordSet("preco sugerido"))
  Response.Write("</td>");
  Response.Write("</tr>");

  recordSet.MoveNext();
}

Response.Write("</table>");
conn.close();
conn = null;

%>

</body>
</html>

Além da alteração na forma de conexão no código acima estou fechando a conexão para liberar recursos que o servidor web ou o servidor de banco de dados esteja usando. Estou usando o método Close() e a seguir definindo a variável que armazenou a conexão como nula.(null).

Nota : em VBScript o código para fechar a conexão ficaria assim:
conn.Close
Set conn = Nothing

Poderiamos ter aberto a conexão usando também o seguinte código :

...
var conn= Server.CreateObject("ADODB.Connection");
var recordSet = Server.CreateObject("ADODB.RecordSet");
conn.Open("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=c:/teste/testes.mdb");
recordSet.Open("select * from produtos;",conn);
...

Quer ver o exemplo funcionando ? clique aqui -> dsntst.asp

Aguarde novos artigos para iniciantes ...

Referências:

Seção VB .NET do Site Macoratti.net
Seção C# do site Macoratti.net
Seção ASP .NET do site Macoratti.net
Super DVD .NET - A sua porta de entrada na plataforma .NET
Super DVD Vídeo Aulas - Vídeo Aula sobre VB .NET, ASP .NET e C#

José Carlos Macoratti