Exibindo o Catálogo de Produtos

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:

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")%> 

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")%>">

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&quantidade=1&_ ProdutoID=<%=rstemp("ProdutoID")%>"><img border="0" src="IMAGENS/cprar.gif"></a>

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

%>

<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">
JcmSoft
- A sua Loja Virtual
</TD>
</tr>
<tr>
<TD align=middle bgColor=#008080 width="654" colspan="3">
Copyright JcmSoft. Todos os direitos reservados
</TD>
</tr>
<tr>
<td width="654" colspan="3">Catálogo

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

<%=rstemp("Nome")%> </a>
</td>
</tr>
<tr>
<td width="95">
Descrição
</td>
<td width="559" colspan="2"><%=rstemp("descricao")%>

</td>
</tr>
<tr>
<td width="95">
Preço (R$)
</td>
<td width="376"><%=formatnumber(rstemp("valor"),2)%>

</td>
<td width="183">
<a href="http://macorati/loja/compre.asp?operacao=incluir&quantidade=1&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
%>

<table border=0 font face="Verdana" size="2" bgcolor="#FFFFFF">
</table>

<table border="0" width="661" bgcolor="#008080">
<tr>
<td bgcolor="#008080" width="117">
<a href="index.htm">Voltar</a>
</td>
<td bgcolor="#008080" width="530">
Clique no link do produto para obter detalhes
</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:

Usando o método Execute do objeto Connection.
Usando o método Open do objeto Recordset.
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"

SELECT - define os registros que serão selecionados
FROM - define a origem dos dados
WHERE/LIKE - define um critério para seleção dos dados
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">
Produto
</td>
<td width="559" colspan="2"><A HREF="http://macorati/loja/detalhe.asp?id=<%=rstemp("ProdutoID")%>">

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:

Nome - <%=rstemp("Nome")%>
Descrição - <%=rstemp("descricao")%>
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")%>">

<%=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&quantidade=1&_

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 ?

Veja mais sistemas completos para a plataforma .NET no Super DVD .NET , confira...
Curso Básico VB .NET - Vídeo Aulas

Quer aprender C# ??

Chegou o Super DVD C# com exclusivo material de suporte e vídeo aulas com curso básico sobre C#.
Curso C# Basico - Video Aulas

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

Curso Fundamentos da Programação Orientada a Objetos com VB .NET

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

Curso - Gerando Relatórios com o ReportViewer no VS 2013 - Vídeo Aulas

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

Curso ASP .NET MVC 5 - Vídeo Aulas

Gostou ? Compartilhe no Facebook Compartilhe no Twitter

Referências:

José Carlos Macoratti