Criando um carrinho de compras usando Visual Basic – Parte 01

Um carrinho de compras feito em ASP.NET para você adaptar ao seu negócio e incluir no seu site. Sim, você leu certo! Neste artigo vamos abordar os principais conceitos básicos sobre a
tecnologia ASP .NET aplicados na criação de um carrinho de compras
usando a linguagem Visual Basic. Além de aprender conceitos importantes relacionados à tecnologia ASP.NET, você ainda vai economizar uma grana.

Nosso carrinho será muito simples e usará os recursos básicos da tecnologia ASP .NET. O objetivo será apresentar uma página de produtos permitindo ao usuário comprar o produto colocando-o no carrinho de compras. Só isso.

Do que vamos precisar?

• Um banco de dados para armazenar as informações dos produtos;
• Uma ferramenta para criar o projeto e as páginas web;
• Um pouco de paciência…

Como este artigo é voltado para quem está iniciando o seu aprendizado e está ansioso em criar algo funcional, vamos usar somente ferramentas sem nenhum custo e que sejam de fácil entendimento.

Por isso escolhi o Visual Web Developer 2010 Express, que é uma ferramenta da Microsoft que permite a criação de Web Sites usando a tecnologia ASP .NET. Ele possui muitos recursos, é fácil de aprender e usar e, o melhor de tudo, é gratuito.

Como banco de dados, vamos usar o MsAccess, que é um banco de dados simples de se trabalhar e de distribuir. Ele nos permite usá-lo em uma aplicação web de forma rápida e que não exigirá muito conhecimento técnico especializado.

Eu já escrevi diversos artigos sobre esse assunto, mas vou fazer uma revisão dos conceitos usando a última versão da ferramenta da Microsoft: Visual Web Developer.

Dessa forma, os recursos necessários para a criação do nosso carrinho de compras serão:

• Visual Web Developer 2010 Express: ferramenta para criar o projeto e as páginas do nosso web site;
• MSAccess: banco de dados usado para armazenar as informações dos produtos, dos clientes e dos pedidos realizados;

O objetivo

1. Você pretende oferecer a venda de produtos de informática em um web site de forma que os clientes possam acessar o catálogo de produtos, consultar os preços e realizar compras;
2. Ao realizar uma compra, o cliente inclui o pedido em um carrinho de compras;
3. Um e-mail será enviado ao cliente quando da conclusão da sua compra.

Criando o modelo de dados

Vou iniciar criando o nosso modelo, mas gostaria de deixar claro que em um projeto orientado a objetos geralmente iniciamos definindo as classes do domínio. No Visual Studio 2010 temos plenas condições de realizar tal tarefa, além de utilizar o Entity Framework 4.0 para gerar o banco de dados a partir do modelo definido.

Neste artigo, eu vou seguir um caminho mais simples usando apenas os recursos básicos da plataforma .NET e realizando o acesso aos dados via componente AccessDataSource. Nossa aplicação irá acessar o banco de dados Vendas.mdb e a tabela Produtos, que contém as informações sobre os produtos com a seguinte estrutura:

Campos da tabela Produtos:

• produtoid: chave primária
• nome: Text(50)
• descricao: Text(150)
• resumo: Text(80)
• categoriaid: Long
• imagem: Text(100)
• preco: Currency
• estoque: Long

O banco de dados Vendas.mdb e a tabela Produtos podem ser criados no Microsoft Access ou no Aplicativo VisData do Visual Basic.

Abra o Visual Web Developer 2010 Express Edition e crie um novo Web Site: Menu: File -> New Web Site, usando o template ASP .NET Empty Web Site com o nome CarrinhoCompras e clique em OK.

A seguir, clique com o botão direito do mouse sobre o nome do projeto e selecione a opção Add ASP .NET Folder. Depois selecione a pasta App_Code.

Repita o procedimento acima e selecione agora a criação da pasta App_Data. A seguir, clique com o botão direito do mouse sobre o nome do projeto e selecione a opção New Folder e informe o nome Imagens. Ao final, o nosso projeto deverá possuir a seguinte estrutura:

Vamos incluir algumas imagens na pasta Imagens. Para isso, clique com o botão direito do mouse sobre a pasta e clique em Add Existing Item. A seguir, localize o local dos arquivos que deseja incluir e clique sobre eles para incluí-los na pasta.

A pasta App_Code é uma pasta especial na qual você pode armazenar seu código-fonte. Ele será compilado automaticamente em tempo de execução. O assembly resultante está acessível a todos os outros códigos no aplicativo da web. Dessa forma, a pasta App_Code funciona como a pasta Bin – com a exceção que você pode armazenar código-fonte nela em vez de código compilado.

Na pasta App_Code iremos colocar as classes do nosso domínio. Ela ainda é usada como um dispositivo de armazenamento de dados para sua aplicação web.

A pasta pode armazenar arquivos .Mdf .Mdb e XML, além de gerenciar todos os dados do seu aplicativo de forma centralizada. Essa pasta é acessível de qualquer lugar da sua aplicação. A vantagem em usar a pasta App_Data é que qualquer arquivo que você coloca lá não estará disponível para download.

A pasta App_Data é também uma pasta especial na qual iremos colocar o nosso banco de dados. Para isso, faça o seguinte:

1. Na janela Solution Explorer, clique com o botão direito do mouse sobre a pasta App_Data e selecione Add Existing Item;
2. Selecione o banco de dados Vendas.mdb a partir do local onde ele foi inicialmente criado.

Pronto, o banco de dados já foi incluído na pasta App_Data. Quando o arquivo é incluído na pasta, ele é também automaticamente incluído no DataBase Explorer. Na pasta Imagens iremos colocar as imagens de alguns dos nossos produtos, cujos nomes estão definidos no campo imagem da tabela Produtos.

Definindo as classes do nosso domínio

Nosso domínio deverá conter três classes, a saber:

1. Produto: representa o nosso produto;
2. Item: representa um item do pedido de um usuário;
3. ItemLista: representa uma coleção de itens.

Para incluir as classes na pasta App_Code, clique com o botão direito do mouse sobre a pasta e a seguir selecione Add New Item. Em seguida, selecione o template Class, informe o nome Produto.vb e clique no botão Add.

Repita o procedimento acima e defina os arquivos: Item.vb e ItemLista.vb. Ao final, a pasta App_Code deverá exibir os arquivos conforme abaixo:

Vamos agora definir o código de cada uma dessas classes:

Classe Produto.vb

Imports Microsoft.VisualBasic

Public Class Produto

    Public Property ProdutoID As String
    Public Property Nome As String
    Public Property Descricao As String
    Public Property Resumo As String
    Public Property Preco As Decimal
    Public Property Imagem As String

End Class

Vemos aqui a declaração da classe Produto já usando a nova notação conhecida como propriedades auto-implementadas, que simplifica a sintaxe da declaração das propriedades.

Classe Item.vb

Imports Microsoft.VisualBasic

Public Class Item

    Public Property Prodto As Produto
    Public Property Quantde As Integer

    Public Sub New(ByVal produto As Produto, ByVal quantidade As Integer)
        Me.Prodto = produto
        Me.Quantde = quantidade
    End Sub

    Public Sub IncluiQuantidade(ByVal quantidade As Integer)
        Me.Quantde += quantidade
    End Sub

    Public Function Exibir() As String
        Return Prodto.Nome & " (" + Quantde.ToString() & " em " & FormatCurrency(Prodto.Preco) & " cada)"
    End Function
End Class

Na classe Item temos definidos dois métodos: IncluiQuantidade(), que incrementada a quantidade de um item do pedido, e Exibir(), que exibe o nome, a quantidade e o preço do item.

Classe ItemLista.vb

Imports Microsoft.VisualBasic

Public Class ItemLista

    Private itensLista As List(Of Item)

    Public Sub New()
        itensLista = New List(Of Item)
    End Sub

    Public ReadOnly Property Contar As Integer
        Get
            Return itensLista.Count
        End Get
    End Property

    Default Public Property Item(ByVal index As Integer) As Item
        Get
            Return itensLista(index)
        End Get
        Set(ByVal value As Item)
            itensLista(index) = value
        End Set
    End Property

    Default Public ReadOnly Property Item(ByVal id As String) As Item
        Get
            For Each c As Item In itensLista
                If c.Prodto.ProdutoID = id Then
                    Return c
                End If
            Next
            Return Nothing
        End Get
    End Property

    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 Function

    Public Sub IncluirItem(ByVal produto As Produto, ByVal quantidade As Integer)
        Dim c As New Item(produto, quantidade)
        itensLista.Add(c)
    End Sub

    Public Sub RemoverEm(ByVal index As Integer)
        itensLista.RemoveAt(index)
    End Sub

    Public Sub Limpar()
        itensLista.Clear()
    End Sub

End Class

A classe ItemLista possui os métodos:

• GetCarrinho(), que obtém um carrinho da sessão
• IncluirItem(), que acrescenta um item na lista de itens
• RemoverEm(), que remove um item da lista
• Limpar(), que limpa lista de itens

Temos também as propriedades Contar, que nos informa quantos itens temos na lista, a propriedade Item, que retorna um item da lista pelo seu índice e outra propriedade item que retorna um produto pelo seu id.

Criando as páginas do web site

Vamos agora criar as duas páginas do nosso web site. No menu Web Site selecione Add New Item e a seguir o template Web Form e informe o nome Pedido.aspx e clique no botão Add. Repita o procedimento e crie também a página Carrinho.aspx.

Definindo o layout da página Pedido.aspx

Vamos definir o layout da página Pedido.aspx, que será a página inicial do web site, além de permitir ao cliente selecionar produto(s) e incluir no carrinho. Na figura abaixo, temos o layout da página:

Controles usados na página Pedidos.aspx:

• Image (ID= Image1)
• label
• TextBox
• DropDownList (ID= ddlProdutos)
• AccessDataSource (ID=AccessDataSource1)
• RequiredFieldValidator (ID= RequiredFieldValidator1)
• RangeValidator (ID= RangeValidator1)

Abaixo vemos o respectivo código fonte gerado:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Pedido.aspx.vb" Inherits="Pedido" %>
<!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: 250px;
        }
        .style3
        {
            width: 20px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Image ID="Image1" runat="server" ImageUrl="~/Imagens/maco10.gif" Height="48px" Width="305px" /><br /><br />
        <asp:Label ID="Label1" runat="server"  Text="Selecione um Produto:"></asp:Label>&nbsp;
        <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>
        <br />
        <table class="style1">
            <tr>
                <td class="style2">
                    <asp:Label ID="lblNome" runat="server" 
                        Font-Bold="True" Font-Size="Larger">
                    </asp:Label>
                </td>
                <td class="style3" rowspan="4">
                </td>
                <td rowspan="4" valign="center">
                    <asp:Image ID="imgProduto" runat="server" Height="200px" />
                </td>
            </tr>
            <tr>
                <td class="style2">
                    <asp:Label ID="lblResumo" runat="server">
                    </asp:Label>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    <asp:Label ID="lblDescricao" runat="server">
                    </asp:Label>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    <asp:Label ID="lblPreco" runat="server" 
                        Font-Bold="True" Font-Size="Larger">
                    </asp:Label>
                    <asp:Label ID="Label2" runat="server" Text="cada" 
                        Font-Bold="True" Font-Size="Larger">
                    </asp:Label>
                </td>
            </tr>
        </table>
        <br />
        <asp:Label ID="Label3" runat="server" Text="Quantidade: "></asp:Label>&nbsp;
        <asp:TextBox ID="txtQuantidade" runat="server" Width="40px">
        </asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
            runat="server" ControlToValidate="txtQuantidade" Display="Dynamic" 
            ErrorMessage="A quantidade deve ser informada" ForeColor="Green"></asp:RequiredFieldValidator>
        <asp:RangeValidator ID="RangeValidator1" runat="server" 
            ControlToValidate="txtQuantidade" Display="Dynamic" 
            ErrorMessage="A quantidade deve estar entre 1 e 10."
            MaximumValue="10" MinimumValue="1" Type="Integer" ForeColor="Green">
        </asp:RangeValidator><br /><br />
        <asp:Button ID="btnIncluir" runat="server" Text="Incluir no carrinho" />&nbsp;
        <asp:Button ID="btnCarrinho" runat="server" CausesValidation="False"  PostBackUrl="~/Carrinho.aspx" Text="Ir para o Carrinho" />
    </div>
    </form>
</body>
</html>

O acesso ao banco de dados Vendas.mdb é feito pelo controle AccessDataSource. Para configurá-lo, fazemos assim:

1. Inclua o controle na página e clique no item Configure Data Source
2. A seguir, selecione o arquivo Vendas.mdb conforme mostra a figura e clique em Next>

03.  Marque a opção Specify a custom SQL statement or stored procedure e clique em Next>

04.  Na aba SELECT defina a instrução SQL conforme mostrado a seguir, clique em Next> e a seguir em Finish

A validação é feita usando os componentes RequireFieldValidator e RangeValidator os quais possuem a seguinte configuração:

• RequireFieldValidator: Display = Dinamyc; ErrorMessage = A quantidade deve ser informada; ControlToValidate = txtQuantidade;
• RangeValidator: Display = Dinamyc; ErrorMessage = A quantidade deve estar entre 1 e 10; ControlToValidate = txtQuantidade.

O controle DropDownList (ddlProdutos) esta vinculado ao nosso AccessDataSource e possui a seguinte configuração:

Dessa forma, já temos tudo pronto para realizar a conexão com o banco de dados Vendas.mdb, acessar a tabela Produtos e exibir os produtos na página.

Na segunda parte do artigo veremos o código da página Pedido.aspx e também o layout e o código da página Carrinho.aspx. Aguarde a continuação e enquanto isso deixe aqui seus testes, impressões e feedbacks para trocarmos ideias. Até a próxima parte.