A sua Loja Virtual - Exibindo o Catálogo dos Produtos


A página que exibe o catálogo de produtos é produzida pelo arquivo catalogo.asp , e , é exibida toda vez que o usuário realiza uma pesquisa.

 

Para criar uma loja virtual usando ASP .NET acompanhe o curso no link : 

ASP .NET - Criando um site completo com carrinho de compras (Curso)

 

Conforme os parâmetros informados na pesquisa os produtos relacionados são exibidos. Esta é uma página dinâmica produzida via código ASP onde estamos acessado um banco de dados para extrair a informação desejada. A página exibida por catalogo.asp é a seguinte:

Página gerada pelo arquivo catalogo.asp  , exibindo  o catálogo de produtos 

Vejamos os elementos presentes na página exibida:

  1. As palavras usadas na pesquisa - Palavra Chave e Categoria -  do formulário principal . Usamos o objeto Request para recuperar essas informações dos campos do formulário da página principal:

Pesquisa= <%=Request("categoria")%> - <%=request("id")%>&nbsp;</font>

  1. Os dados com a descrição básica do produto : Produto , Descrição e Preço. O nome do produto possui um link que invoca o arquivo detalhe.asp.

<A HREF="http://macorati/loja/detalhe.asp?id=<%=rstemp("ProdutoID")%>">

  1. Imagem GIF - cprar.gif - referentes aos botões - Comprar. Ao clicar no botão Comprar invocamos o arquivo compre.asp.

<a href="http://macorati/loja/compre.asp?operacao=incluir&amp;quantidade=1&amp;_ ProdutoID=<%=rstemp("ProdutoID")%>"><img border="0" src="IMAGENS/cprar.gif"></a>

  1. Indicação da página atual e do total de páginas e um link para navegar pelas páginas

<a href="<%=request.servervariables("SCRIPT_NAME")%>?PaginaAtual=<%=nPaginaAtual%>_

&Submit=Proxima">Proxima</a>
<%

Você percebeu que usamos uma paginação do Recordset de forma a facilitar a visualização do catálogo de produtos ao usuário. De forma que se o catálogo for muito extenso o usuário pode navegar pelas páginas , quer avançando ou retrocedendo apenas clicando nos links relacionados.

Vejamos o código usado no arquivo catalogo.asp :

<%@ Language=VBScript %>
<%
Option Explicit
Response.Expires=0
%>
<%
Const nTamanhoPagina = 2
Dim nPaginaAtual
Dim PaginaAtual
Dim nTotalPaginas
Dim conntemp
Dim SQL
Dim rstemp
Dim x

if Request.Querystring = "" then
   nPaginaAtual = 1
else
   nPaginaAtual = Cint(Request.Querystring("PaginaAtual")) 
   Select Case Request.Querystring("Submit")
     Case "Anterior"
        nPaginaAtual = nPaginaAtual - 1
     Case "Proxima"
        nPaginaAtual = nPaginaAtual + 1
   End Select
end if 

set conntemp=server.createobject("adodb.connection")
conntemp.Open application("conecta_bd")
set rstemp = Server.CreateObject("ADODB.Recordset")
rstemp.Cursorlocation = adUseClient
rstemp.CursorType = adOpenStatic
rstemp.CacheSize = nTamanhoPagina

if Request("categoria")= "Autor" then
   SQL= "Select * From Produtos Where Autor LIKE '%" & Request("id") & "%' Order by nome"
elseif Request("categoria")= "Título" then
   SQL= "Select * From Produtos Where nome LIKE '%" & Request("id") & "%' Order by nome"
elseif Request("categoria")="Assunto" then
   SQL= "Select * From Produtos Where Categoria LIKE '%" & Request("id") & "%' Order by nome"
else
   SQL= "Select * From Produtos order by nome"
End if

'abre o recordset e configura o tamanho da página
rstemp.Open SQL, conntemp,,,adCmdText
rstemp.PageSize = nTamanhoPagina

' verifica se há dados no recordset
If rstemp.eof then
   conntemp.close
   set conntemp=nothing
   Response.Write "Não há nenhum registro para este criterio ! "
   'Fecha_Conexao
   
'Response.Redirect "/loja/index.asp"
else 'end if
    rstemp.absolutePage = nPaginaAtual
    nTotalPaginas = rstemp.Pagecount

%>
<!-- #Include file="ADOVBS.INC" -->
<html><head>
<TITLE>catalogo.asp</TITLE>
</head>
<body bgcolor="#FFFFFF" link="#000080" vlink="#808000" alink="#000080">
<table border="0" width="662">
<tr>
<TD bgcolor="#FFFFFF" width="654" colspan="3">
<p align="center"><b><font color="#008080" size="5" face="Verdana">JcmSoft
- A sua Loja Virtual</font></b>
</TD>
</tr>
<tr>
<TD align=middle bgColor=#008080 width="654" colspan="3">
<p align="center"><B><FONT color=#FFFFFF 
face=arial size=-2>Copyright JcmSoft. Todos os direitos reservados</FONT></B></p>
</TD>
</tr>
<tr>
<td width="654" colspan="3"><b><font face="Verdana" color="#008080" size="3">Catálogo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

</font></b><font face="Verdana" color="#008080" size="1">Pesquisa
= <%=Request("categoria")%> - <%=request("id")%>&nbsp;</font>
<hr color="#008080">
</td>
</tr>
<tr>
<% 
'DO UNTIL rstemp.eof 
for x=1 to rstemp.pagesize
%>
<td width="95">
<font face="Verdana" size="1" color="#008080"><b>Produto</b></font>
</td>
<td width="559" colspan="2"><A HREF="http://macorati/loja/detalhe.asp?id=<%=rstemp("ProdutoID")%>">

<font face="Verdana" color="#008080" size="1"><b><%=rstemp("Nome")%> </b></font> </a>
</td>
</tr>
<tr>
<td width="95">
<font face="Verdana" size="1" color="#008080"><b>Descrição</b></font>
</td>
<td width="559" colspan="2"><font face="Verdana" color="#008080" size="1"><b><%=rstemp("descricao")%>
</b></font>
</td>
</tr>
<tr>
<td width="95">
<font face="Verdana" size="1" color="#008080"><b>Preço (R$)</b></font>
</td>
<td width="376"><font face="Verdana" color="#008080" size="1"><b><%=formatnumber(rstemp("valor"),2)%>
</b></font>
</td>
<td width="183">
<p align="center"><a href="http://macorati/loja/compre.asp?operacao=incluir&amp;quantidade=1&amp;ProdutoID=<%=rstemp("ProdutoID")%>">

<img border="0" src="IMAGENS/cprar.gif"></a>
</td>
</tr>
<tr>
<td width="654" colspan="3">
<hr>
</td>
</tr>
<%
rstemp.movenext
if rstemp.eof then exit for
'LOOP
Next
%> 
</table>
Página <%=nPaginaAtual%> de <%=nTotalPaginas%> - 
<%
If nPaginaAtual > 1 then %>
<a href="<%=request.servervariables("SCRIPT_NAME")%>?PaginaAtual=<%=nPaginaAtual%>&Submit=Anterior">Anterior |</a>
<%end if%>
<%If nPaginaAtual <> nTotalPaginas then %>
<a href="<%=request.servervariables("SCRIPT_NAME")%>?PaginaAtual=<%=nPaginaAtual%>&Submit=Proxima">Proxima</a>
<%
End If
%>
</p>
<table border=0 font face="Verdana" size="2" bgcolor="#FFFFFF">
</table>

<table border="0" width="661" bgcolor="#008080">
<tr>
<td bgcolor="#008080" width="117">
<p align="center"><a href="index.htm"><strong><font face="Verdana" color="#FFFFFF" size="2">Voltar</font></strong></a></p>
</td>
<td bgcolor="#008080" width="530">
<p align="center"><strong><font face="Verdana" color="#FFFFFF" size="2">Clique no link do produto para obter detalhes</font></strong></p>
</td> 
</tr>
</table>
<%
' Fechamos o recordset e liberamos a memória usada
rstemp.close
set rstemp=nothing
conntemp.close
set conntemp=nothing
%>
<%
end if
%>
</body>
</html>

arquivo catalogo.asp

Analisando o código arquivo catalogo.asp

Vamos analisar passo a passo o código usado no arquivo catalago.asp :

O arquivo inicia com a diretiva @LANGUAGE que define a linguagem de script para toda a página. A linguagem padrão para as páginas ASP é o VBScript. 

A instrução Option Explicit força o mecanismo de script do VBScript a esperar pela declaração de todas as variáveis usadas. Para declarar variáveis usamos as instruções Dim (Dimension) , Private, Public ou Redim.

A instrução Response.Expires = 0 define o valor 0(zero) para a propriedade Expires do objeto Response, informando ao Browser que o conteúdo da página expira imediatamente. (Os valores são em minutos).

A seguir temos as declarações das variáveis usadas na página: 

Const nTamanhoPagina = 2
Dim nPaginaAtual
Dim PaginaAtual
Dim nTotalPaginas
Dim conntemp
Dim SQL
Dim rstemp
Dim x

As variáveis nTamanhoPagina, nPaginaAtual, PaginaAtual e nTotalPaginas são usadas para fazermos a paginação do Recordset.

As variáveis conntemp, SQL , rstemp são usadas na conexão e criação do Recordset e x é uma variável usada no loop for/next.

Vejamos agora o seguinte trecho de código:

if Request.Querystring = "" then
   nPaginaAtual = 1
else
   nPaginaAtual = Cint(Request.Querystring("PaginaAtual")) 
   Select Case Request.Querystring("Submit")
     Case "Anterior"
        nPaginaAtual = nPaginaAtual - 1
     Case "Proxima"
        nPaginaAtual = nPaginaAtual + 1
   End Select
end if 

Request.Querystring =  "" verifica se nenhuma informação foi enviada pelo método GET e em caso positivo define a variável nPaginaAtual como igual a 1 - nPaginaAtual = 1

Se for recebida alguma informação definimos a variável nPaginaAtual como sendo igual ao valor inteiro da variável de sessão PaginaAtual - Cint(Request.Querystring("PaginaAtual")) 

A seguir é verificada o contéudo de Submit , e , se o mesmo referir-se a string "Anterior" a variável nPaginaAtual é decrementada , se referir-se a string "Proxima" a variável é incrementada. 

Realizando a conexão

O código que vem a seguir é muito importante , afinal é através dele que realizamos a conexão com nosso banco de dados e definimos que tipo de Recordset vamos utilizar:

1  Set conntemp=Server.CreateObject("ADODB.connection")
2  conntemp.Open Application("conecta_bd")
3  set rstemp = Server.CreateObject("ADODB.Recordset")
4  rstemp.Cursorlocation = adUseClient
5  rstemp.CursorType = adOpenStatic
6  rstemp.CacheSize = nTamanhoPagina 

Vamos armazenar nossas informações em banco de dados e para gerenciar essas informações usaremos a tecnologia Activex Data Object (ADO) - pois ela fornece a interface entre o banco de dados e as páginas ASP. Podemos usar qualquer banco de dados que suporte OLE DB (Object Linking and Embedding Database) ou ODBC(Open Database Conectivity). 

O ADO , através da tecnologia OLE DB, trabalha com provedores OLE DB, e o OLE DB é uma implementação COM para acesso de dados universal. Vislumbra-se a substituição gradual de ODBC pela tecnologia OLE DB, e a ADO atua como um envoltório ActiveX para OLE DB.

O modelo de Objeto ADO compreende três objetos principais, são eles os objetos: Connection , Recordeset e o objeto Command .

Os métodos do objeto Connection

Método Descrição
Open Abre uma conexão com uma fonte de dados
Close Fecha a conexão e todos os objetos dependentes dela.
Execute Executa uma consulta , instrução SQL , stored procedures ou um comando específico do provedor
BeginTrans Inicia uma nova Transação
CommiTrans Salva qualquer alteração e encerra a transação atual.
RollBackTrans Cancela qualquer alteração feita durante a transação atual e encerra a transação.

Um objeto Connection representa uma conexão física com uma fonte de dados e para criar um objeto Connection devemos fornecer o nome de um provedor OLE DB ou o nome de uma fonte de dados ODBC, portanto , quando abrimos um objeto Connection estamos tentando a conexão com a fonte de dados. Em ASP devemos instanciar o objeto connection e usar o método OPEN para abrir a conexão.

1  Set conntemp=Server.CreateObject("ADODB.connection")
Nesta linha de comando criamos um objeto Connection usando o método CreateObject do objeto Server,  e o atribuímos a variável objeto conntemp.

2  conntemp.Open Application("conecta_bd")
Usamos o método Open para abrir a conexão com o banco de dados. A variável Application - conecta_bd , definida no arquivo Global.asa , representa a string para conexão onde são informados o caminho e o driver usado para conexão. No nosso caso estamos usando um driver ODBC:

 Application("conecta_bd")="DBQ=c:\inetpub\wwwroot\loja\esoft.mdb;DRIVER={Microsoft Access Driver (*.mdb)}"

Ao invés de utilizar um driver ODBC poderíamos usar um provedor OLE DB. Para acesso a base de dados Access esta é um opção que torna o acesso mais rápido.Abaixo temos a 

conntemp.open "PROVIDER=Microsoft.Jet.OLEDB.3.51;DATA SOURCE=c:\inetpub\wwwroot\loja\esof.mdb;& _
"USER ID=admin;PASSWORD=;"

3  set rstemp = Server.CreateObject("ADODB.Recordset")

4  rstemp.Cursorlocation = adUseClient
5  rstemp.CursorType = adOpenStatic
Esta linha de comando cria um objeto Recordset e configura o tipo de Recordset que desejamo usar. Um Recordset representa um conjunto de registros de uma tabela ou o conjunto de registros resultante de uma consulta SQL. Para criar um Recordset

O objeto Recordset contém a coleção Fields que contém o objeto Field que representa uma coluna de dados de um Recordset.

Usando a ADO podemos abrir um Recordset das seguintes formas:

  1. Usando o método Execute do objeto Connection.
  2. Usando o método Open do objeto Recordset.
  3. Usando o método Execute do objeto Command.

Os Recordsets abertos via método Execute são sempre forward-only e somente leitura. Se você precisar criar recordsets atualizáveis deve usar o método OPEN do objeto Recordset da ADO. A sintaxe é a seguinte:

recordset.Open Source, ActiveConnection, CursorType, LockType, Options

Source - É Opcional e indica o um comando para o nome da variável objeto, uma instrução SQL , o nome de uma tabela ou uma stored procedure

ActiveConnection - É Opcional e indica um nome da variável objeto Connection , ou uma string contendo parâmetros para a ConnectionString.

CursorType - É Opcional. Determina o tipo de cursor que o provedor irá usar quando abrir o Recordset. Pode ser dos seguintes tipos:

0 - adOpenForwardOnly (Padrão) Abre um cursor do tipo forward-only. Permite apenas o movimento para diante do registro atual. Ë o cursor mais rápido.
1- AdOpenKeyset Abre um cursor do tipo keyset. (Não permite visualizar registros excluidos por outro usuário nem registros incluidos por outros usuários)
2- AdOpenDynamic Abre um cursor do tipo dynamic.(Exclusão,Inclusão e alterações feitas são visíveis). É o mais vagaroso dos cursores.
3- AdOpenStatic Abre um cursor do tipo static.(Cópia estática de um conjunto de registros). Não são atualizáveis e adições , alterações e exclusões feitas por outros usuários não são visíveis.

LockType Determina que tipo de bloqueio será utilizado. Temos os seguintes tipos:

Tipos de bloqueios(LockType) do Recordset ADO
1 - AdLockReadOnly - Somente Leitura – Não permite alterações.
2 - AdLockPessimistic - Bloqueio Pessimista – bloqueia os registros na fonte de dados após a edição
3 - AdLockOptimistic - Bloqueio Otimista – bloqueia os registros quando se chama o método update
4 - AdLockBatchOptimistic - requerido para o modo batch update

Geralmente se estamos atualizando um Recordset usamos AdLockOptimistic pois todos os provedores suportam este tipo de bloqueio. Neste tipo de bloqueio o registro será bloqueado somente enquanto houver a atualização via método Update.

Usando AdLockPessimistic (Nem todos os provedores suportam este tipo de bloqueio) o registro será bloqueado equanto a edição do mesmo estiver sendo efetuada.

Ao usar AdLockBatchOptimistic podemos atualizar múltiplos registros e fazer a atualização em lote.

Options- Indica o tipo de origem do argumento fornecido. Temos as seguintes possibilidades:

Valor Constante Descrição
1 adCmdText Texto (instrução SQL)
2 adCmdTable Tabela, visão, ou consulta seleção salva
4 adCmdStoredProc Stored procedure ou consulta ação salva
8 adCmdUnknown Desconhecido (o padrão)

 

Quando usamos instruções SQL montadas em strings usamos o tipo 1.

O padrão assumido é o valor 8 , indicando que a ADO tentará descobrir a origem do argumento.

Os parâmetros CursorType, LockType e Options do método Open determinam o tipo de Recordset que é retornado.

O objeto Recordset da ADO possui a propriedade CursorLocation que pode ter dois valores: adUseServer e adUseClient. Ao usar adUseServer o recordset utiliza o cursor fornecido pelo provedor de dados ; Usar adUseClient permite ao recordset usar um cursor do lado do cliente. Dependendo do tipo utilizado teremos acesso a certas funcionalidades: Para usar Find, Sort , fazer atualizações em lote, etc. devemos usar adUseClient. O padrão assumido é adUseServer. Vejamos como abrir um recordset definindo a localização do cursor:

6  rstemp.CacheSize = nTamanhoPagina 

Define o número de registros que o provedor mantém no buffer como o número de registros de uma página. 

 

Montando a instrução SQL

 

if Request("categoria")= "Autor" then
   SQL= "Select * From Produtos Where Autor LIKE '%" & Request("id") & "%' Order by nome"
elseif Request("categoria")= "Título" then
   SQL= "Select * From Produtos Where nome LIKE '%" & Request("id") & "%' Order by nome"
elseif Request("categoria")="Assunto" then
   SQL= "Select * From Produtos Where Categoria LIKE '%" & Request("id") & "%' Order by nome"
else
   SQL= "Select * From Produtos order by nome"
End if

Estas linhas de código definem o tipo de consulta SQL usada para retornar os dados dos produtos exibidos na página. Aqui verificamos a variável de sessão categoria que dependendo do seu valor gera uma instrução SQL diferente qeu será armazenada na variável SQL. Na instrução SQL usada podemos distinguir as seguintes partes:

 

"Select * From Produtos Where Autor LIKE '%" & Request("id") & "%' Order by nome"

  1. SELECT - define os registros que serão selecionados

  2. FROM - define a origem dos dados

  3. WHERE/LIKE - define um critério para seleção dos dados

  4. ORDER BY - realiza uma ordenação dos dados selecionados por um critério definido

SELECT - Selecionamos todos ( o asterisco (*) representa todos os registros) os registros- FROM -  da tabela Produtos WHERE - onde o AUTOR/TITULO/ASSUNTO/TODOS - são iguais - LIKE - ao valor informado no campo ID - Request("id") - ordenados pelo nome - ORDER BY nome.

 

OBS: O símbolo de porcentagem (%) usado na ADO substitui  o (*) usados em consultas SQL.

 

rstemp.Open SQL, conntemp,,,adCmdText
rstemp.PageSize = nTamanhoPagina

Abrimos o Recordset usando a instrução SQL gerada atribuindo o objeto Recordset a variável objeto rstemp e definimos o tamanho da página.

 

If rstemp.eof then
   'Fecha_Conexao
   conntemp.close
   set conntemp=nothing
   Response.Write "Não há nenhum registro para este criterio ! "
    'Response.Redirect "/loja/index.asp"
else 
    rstemp.absolutePage = nPaginaAtual
    nTotalPaginas = rstemp.Pagecount
   ....

   ....

endif

Verificamos se no Recordset gerado existem registros. Se não houver registros fechamos a conexão e emitimos um aviso ao usuário. Se houver registros definimos o número da página na qual o registro atual esta localizado(rstemp.absolutePage = nPaginaAtual) e atribuímos à variável NtotalPáginas quantas páginas de dados nosso Recordset possui. (nTotalPaginas = rstemp.Pagecount)

 

Exibindo os dados

 

for x=1 to rstemp.pagesize
%>
<td width="95">
<font face="Verdana" size="1" color="#008080"><b>Produto</b></font>
</td>
<td width="559" colspan="2"><A HREF="http://macorati/loja/detalhe.asp?id=
<%=rstemp("ProdutoID")%>">

<font face="Verdana" color="#008080" size="1"><b><%=rstemp("Nome")%> </b></font> </a>
</td>
</tr>
<tr>
<td width="95">
<font face="Verdana" size="1" color="#008080"><b>Descrição</b></font>
</td>
<td width="559" colspan="2"><font face="Verdana" color="#008080" size="1"><b>
<%=rstemp("descricao")%>
</b></font>
</td>
</tr>
<tr>
<td width="95">
<font face="Verdana" size="1" color="#008080"><b>Preço (R$)</b></font>
</td>
<td width="376"><font face="Verdana" color="#008080" size="1"><b>
<%=formatnumber(rstemp("valor"),2)%>
</b></font>
</td>
<td width="183">
<p align="center"><a
href="http://macorati/loja/compre.asp?operacao=incluir&amp;quantidade=1&amp;_

ProdutoID=<%=rstemp("ProdutoID")%>"><img border="0" src="IMAGENS/cprar.gif"></a>
</td>
</tr>
<tr>
<td width="654" colspan="3">
<hr>
</td>
</tr>
<%
rstemp.movenext
if rstemp.eof then exit for
Next

Através de um loop FOR/NEXT percorremos nosso Recordset e exibimos os dados dos produtos:

  1. Nome - <%=rstemp("Nome")%>

  2. Descrição<%=rstemp("descricao")%>

  3. Valor - <%=formatnumber(rstemp("valor"),2)%>

Perceba a sintaxe <%=variável%> usada para exibir os dados do Recordset. Note também que no nome do produto temos um link associado ao código do produto(ProdutoID) , de forma que se o usuário clicar no  link será invocada a página detalhe.asp:

<A HREF="http://macorati/loja/detalhe.asp?id=<%=rstemp("ProdutoID")%>">

<font face="Verdana" color="#008080" size="1"><b><%=rstemp("Nome")%>

 

O botão Comprar esta associado a um link que chama a página compre.asp . Esta URL esta passando os parâmetros:  operacao definido como incluir(operacao=incluir) e quantidade  definido como 1(quantidade=1) e ProdutoID defnida como o código do produto em questão -ProdutoID=<%=rstemp("ProdutoID")%>:

 

<a href="http://macorati/loja/compre.asp?operacao=incluir&amp;quantidade=1&amp;_

ProdutoID=<%=rstemp("ProdutoID")%>"><img border="0" src="IMAGENS/cprar.gif"></a>
</td>

 

Percorrendo o Recordset

 

rstemp.movenext
  if rstemp.eof then exit for
Next

 

Com estas instruções percorremos o Recordset através do método Movenext e saimos do laço FOR/NEXT      quando atingimos o fim do mesmo -  if rstemp.eof then exit for .

Exibindo a página atual e o total de páginas

 

<%
If nPaginaAtual > 1 then %>
<a href="<%=request.servervariables("SCRIPT_NAME")%>?PaginaAtual=<%=nPaginaAtual%>&Submit=Anterior">Anterior |</a>
<%end if%>
<%If nPaginaAtual <> nTotalPaginas then %>
<a href="<%=request.servervariables("SCRIPT_NAME")%>?PaginaAtual=<%=nPaginaAtual%>&Submit=Proxima">Proxima</a>
<%
End If
%>

 

Neste código exibimos o número da página atual (nPaginaAtual) e o total de páginas (nTotalPaginas). Habilitando os links  Próxima | Anterior  somente se a variável nPaginaAtual tiver seu valor maior que 1; caso contrário somente o link Proxima será exibido. 
 

O linha de código <%=request.servervariables("SCRIPT_NAME")%>  retorna o caminho virtual do script que esta sendo executado passando como referência o número da página atual: ?PaginaAtual=<%=nPaginaAtual%>

 

 Parte Anterior Próxima parte

 

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Quer aprender a criar aplicações Web Dinâmicas usando a ASP .NET MVC 5 ?

 

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

 

Referências:


José Carlos Macoratti