[Resolvido] Criando um carrinho de compras usando Visual Basic - Parte

[RSS iMasters 5]

Na primeira parte deste artigo, foram definidos os requisitos do nosso web site e também foram criados o modelo de dados, além das classes do nosso domínio. Nós ainda criamos as páginas Pedidos.aspx e Carrinho.aspx. Vamos continuar definindo o código da página Pedido.aspx e também o layout e o código da página Carrinho.aspx.

 

Quando a página Pedido.aspx for carregada, o dropdownlist da página deverá ser preenchido de forma a exibir o nome dos produtos data tabela Produtos. Quando um produto for selecionado, deverão ser exibidas na página a sua imagem e as informações de forma que o cliente possa informar a quantidade desejada e incluir o item no carrinho de compras.

 

Abaixo vemos a página Pedidos.aspx exibindo um produto:

 

 

 

Definindo o código da página Pedidos.aspx

Vamos agora definir o código da página Pedidos.aspx de forma a permitir que o resultado obtido seja o da figura acima.

 

Selecione o arquivo Pedidos.aspx na janela Solution Explorer e abra o code-behind no arquivo Pedidos.aspx.vb. Como vamos acessar um banco de dados via ADO .NET, precisamos definir o seguinte namespace no início do arquivo: Imports System.Data.

 

Após a definição da classe, vamos declarar uma variável do tipo Produto chamada produtoSelecionado, que representará um produto selecionado pelo cliente: Private produtoSelecionado As Produto. Em seguida, vamos definir o código no evento Load da página:

 

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Not IsPostBack Then

ddlProdutos.DataBind()

End If

produtoSelecionado = Me.GetProdutoSelecionado

lblNome.Text = produtoSelecionado.Nome

lblResumo.Text = produtoSelecionado.Resumo

lblDescricao.Text = produtoSelecionado.Descricao

lblPreco.Text = FormatCurrency(produtoSelecionado.Preco)

imgProduto.ImageUrl = "Imagens/" & produtoSelecionado.Imagem

End SubNesse código, verificamos se não é um PostBack e vinculamos o DropDowList aos produtos selecionados na tabela Produtos.

 

Lembre-se de que estamos fazendo o acesso nessa tabela usando o componente AccessDataSource e vinculando o DropDownList ao componente. Veja abaixo o código da página que faz exatamente isso:

 

.....

<asp:DropDownList ID="ddlProdutos" runat="server" DataSourceID="AccessDataSource1" DataTextField="Nome"

DataValueField="produtoid" Width="150px" AutoPostBack="True">

</asp:DropDownList>

<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Vendas.mdb"

SelectCommand="SELECT [produtoid], [nome], [resumo],[descricao], [imagem], [preco]

FROM [Produtos] ORDER BY [nome]">

</asp:AccessDataSource>

.....A seguir, estou chamando o método GetProdutoSelecionado para obter as informações do produto e exibir essas informações nas Labels da página.

 

O método GetProdutoSelecionado possui o seguinte código:

 

Private Function GetProdutoSelecionado() As Produto

 

Dim produtoTabela As DataView = CType(AccessDataSource1.Select(DataSourceSelectArguments.Empty), DataView)

produtoTabela.RowFilter = "ProdutoID = '" & ddlProdutos.SelectedValue & "'"

Dim productRow As DataRowView = produtoTabela(0)

 

Dim produto1 As New Produto

produto1.ProdutoID = productRow("produtoid").ToString

produto1.Nome = productRow("Nome").ToString

produto1.Resumo = productRow("Descricao").ToString

produto1.Descricao = productRow("Resumo").ToString

produto1.Preco = CDec(productRow("Preco"))

produto1.Imagem = productRow("Imagem").ToString

Return produto1

End FunctionEsse método retorna um Produto selecionado a partir do controle DropDownList (ddlProdutos). Para isso, estamos usando um DataView, no qual usando o método RowFilter, estamos selecionado o produto pelo seu código obtido do DropDownList.

 

Um DataView permite criar diferentes visões dos dados armazenados em um DataTable, permitindo diversos critérios para ordenação e filtragem de dados.

 

Apesar disso, tenha em mente que um DataView não pode ser tratado com uma tabela e além disso não permite visões de tabelas combinadas. Não permite também que se incluam ou se excluam colunas que não existam na tabela original.

 

Observação: Em meu artigo Uma visão geral - Parte 03: DataView já tratei das principais propriedades do objeto DataView e a forma como podemos criar um DataView.

 

 

DataView.RowFilter

Podemos usar um DataView baseado em um Datatable para localizar registros das seguintes formas:

 

• Usar a propriedade RowFilter do DataView. Cria um DataView baseado em um DataTable e define RowFilter para uma expressão de filtro.

• Usar o método Find() do DataView para retornar o índice da linha que coincide com a chave ordenada ou com valores passados como argumentos objetos ou um array de objetos. Se a chave ordenada não existir, será retornado Null.

• Usar o método FindRows() do DataView para retornar um array de objetos DataRowView, cujas colunas coincidem com o valor da chave ordenada especificada. Se ela não existir um array, um DataRowView vazio será retornado.

Após isso, criamos um objeto Produto e atribuímos a ele as informações do produto selecionado. No evento Click do botão Incluir no Carrinho, vamos definir o seguinte código:

 

Protected Sub btnIncluir_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnIncluir.Click

If Page.IsValid Then

Dim carrinho As ItemLista = ItemLista.GetCarrinho

Dim itemCarrinho As Item = carrinho(produtoSelecionado.ProdutoID)

If itemCarrinho Is Nothing Then

carrinho.IncluirItem(produtoSelecionado, CInt(txtQuantidade.Text))

Else

itemCarrinho.IncluiQuantidade(CInt(txtQuantidade.Text))

End If

Response.Redirect("Carrinho.aspx")

End If

End SubEsse código define um variável do tipo ItemLista, que vai ser usada no método GetCarrinho para obter o carrinho da sessão. Veja o código do método GetCarrinho():

 

Public Shared Function GetCarrinho() As ItemLista

If CType(HttpContext.Current.Session("Carrinho"), ItemLista) Is Nothing Then

HttpContext.Current.Session.Add("Carrinho", New ItemLista)

End If

Return CType(HttpContext.Current.Session("Carrinho"), ItemLista)

End FunctionEm seguida, verificamos se o item do carrinho é nulo e usamos o método IncluirItem(), mostrado abaixo, para incluir o item selecionado no carrinho.

 

Public Sub IncluirItem(ByVal produto As Produto, ByVal quantidade As Integer)

Dim c As New Item(produto, quantidade)

itensLista.Add©

End SubAo final, redirecionamos o cliente para a página Carrinho.aspx.

 

 

Definindo o layout da página Carrinho.aspx

Vamos definir o layout da página Carrinho.aspx, que será a página que representa o nosso carrinho de compras e contém os itens selecionados pelo cliente. Na figura abaixo, temos o layout da página:

 

 

Controles usados na página Carrinhos.aspx:

 

• ListBox (ID= listaCarrinho)
• Button (ID= btnRemover)
• Button (ID= btnEsvaziar)
• Button (ID= btnContinuar) - PostBackUrl="~/Pedido.aspx"
• Button (ID= btnEncerrar)
• Label

Abaixo temos o código fonte gerado para a página:

 

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Carrinho.aspx.vb" Inherits="Carrinho" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title>Carrinho de Compras</title>

<style type="text/css">

.style1

{

width: 100%;

}

.style2

{

width: 285px;

height: 155px;

}

.style3

{

height: 155px;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:Image ID="Image1" runat="server" ImageUrl="~/Imagens/maco10.gif" /><br /><br />

Seu Carrinho de Compras:<br /><br />

<table class="style1" cellpadding="0" cellspacing="0">

<tr>

<td class="style2" valign="top">

<asp:ListBox ID="listaCarrinho" runat="server" Height="135px" Width="275px"></asp:ListBox>

</td>

<td class="style3" valign="top">

<asp:Button ID="btnRemover" runat="server" Text="Remover Item" Width="112px" /><br /><br />

<asp:Button ID="btnEsvaziar" runat="server" Text="Esvaziar Carrinho" Width="112px" />

</td>

</tr>

</table>

<br />

<asp:Button ID="btnContinuar" runat="server" PostBackUrl="~/Pedido.aspx" Text="Continuar Comprando" /> 

<asp:Button ID="btnEncerrar" runat="server" Text="Encerrar Compras" /><br />

<br />

<asp:Label ID="lblMensagem" runat="server" ForeColor="Green" EnableViewState="False"></asp:Label>

</div>

</form>

</body>

</html>Essa página deverá exibir os itens selecionados, permitir que o cliente continue comprando ou encerre as compras (não implementado). O cliente poderá também remover itens selecionados ou esvaziar o carrinho.

 

Abaixo as figuras que mostram a sequência de execução em que  na página Pedidos.aspx o cliente seleciona um produto e na página Carrinho.aspx o item selecionado é exibido:

 

Pedidos.aspx

 

 

Carrinhos.aspx

 

 

Vejamos a seguir o código da página Carrinho.aspx necessário para implementar o comportamento esperado.

 

 

Definindo o código da página Carrinho.aspx

Selecione o arquivo Carrinho.aspx e abra o code-behind no arquivo Carrinho.aspx.vb. Logo após a declaração do formulário, vamos definir uma variável carrinho do tipo ItemLista:

 

• Private carrinho As ItemLista

Em seguida, no evento Load da página, inclua o código a seguir:

 

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

carrinho = ItemLista.GetCarrinho

If Not IsPostBack Then

Me.ExibeCarrinho()

End If

End SubO código utiliza o método GetCarrinho da classe ItemLista. Esse método obtém um carrinho da sessão. A seguir, se não for um PostBack, chamamos o método ExibeCarrinho().

 

O código do método ExibeCarrinho() é dado a seguir:

 

Private Sub ExibeCarrinho()

listaCarrinho.Items.Clear()

Dim itemCarrinho As Item

For i = 0 To carrinho.Count - 1

itemCarrinho = carrinho(i)

listaCarrinho.Items.Add(itemCarrinho.Exibir)

Next

End SubNo código acima, primeiro limpamos o controle ListBox e a seguir declaramos a variável itemCarrinho do tipo Item que representa um item selecionado.

 

Depois usamos um laço for/next para percorrer o carrinho e incluir os itens no Listbox. O código do evento Click do botão Remover é mostrado a seguir:

 

Protected Sub btnRemover_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnRemover.Click

If carrinho.Count > 0 Then

If listaCarrinho.SelectedIndex > -1 Then

carrinho.RemoverEm(listaCarrinho.SelectedIndex)

Me.ExibeCarrinho()

Else

lblMensagem.Text = "Selecione um item que deseja remover."

End If

End If

End SubEsse código verifica se existem itens no controle ListBox, depois verifica se existe um item selecionado e remove o item da lista para então exibir novamente o carrinho.

 

O código do botão Esvaziar é exibido abaixo:

 

Protected Sub btnEsvaziar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnEsvaziar.Click

If carrinho.Count > 0 Then

carrinho.Limpar()

listaCarrinho.Items.Clear()

End If

End SubO código verifica se o controle ListBox está vazio e remove todos os itens do controle. Para concluir, o código do botão Encerrar apenas mostra a mensagem de que a rotina não está implementada.

 

Protected Sub btnEncerrar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnEncerrar.Click

lblMensagem.Text = "Esta funcionalidade ainda não foi construída."

End SubE assim eu pude mostrar como implementar um carrinho de compras bem simples usando ASP .NET Web Forms.

 

O objetivo foi mostrar os recursos básicos envolvidos nesse processado e fornecer subsídios para que você saiba por onde começar, se um dia precisar criar um carrinho de compras usando ASP .NET.

 

 Você pode pegar o projeto completo aqui: CarrinhoCompras.zip

 

Até a próxima!

 

 

 

http://imasters.com.br/artigo/21373/e-commerce/criando-um-carrinho-de-compras-usando-visual-basic-parte-02