ASP .NET - Criando um carrinho de compras I (VB)

ASP .NET - Criando um carrinho de compras I (VB)

Neste artigo pretendo 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.

Sim , um carrinho de compras feito em ASP.NET para você adaptar ao seu negócio e incluir no seu site. 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; Nosso 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 iremos 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 esta iniciando o seu aprendizado e esta 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 , possui muitos recursos, é fácil de aprender e usar e, o melhor de tudo, é gratuita.

Como banco de dados vamos usar o MsAccess que é um banco de dados simples de se trabalhar e distribuir e que 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 este assunto (veja as referências) 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

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;
Ao realizar uma compra o cliente inclui o pedido em um carrinho de compras;
Um email será enviado ao cliente quando da conclusão da sua compra;

Criando o modelo de dados

Vou iniciar criando o nosso modelo dados mas gostaria de deixar claro que em uma projeto orientado a objetos geralmente iniciamos definindo as classes do domínio. No Visual Studio 2010 temos plenas condições de realizar tal tarefa e usando o Entity Framework 4.0 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 contem 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;

A seguir selecione a pata App_Code;

Repita o procedimento acima e selecione a 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 localiza o local dos arquivos que deseja incluir e clique
sobre eles para incluí-los na pasta.

A pasta App_Code é uma pasta especial onde você pode armazenar seu código-fonte e 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, desta forma a pasta App_Code funciona como a pasta Bin, exceto 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.

A pasta App_Data é usada como um dispositivo de armazenamento de dados para sua aplicação web. Ela pode armazenar arquivos .Mdf .Mdb, e XML e gerencia todos os dados do seu aplicativo de forma centralizada. Esta 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 onde 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 App_Data ele é também automaticamente incluído no DataBase Explorer.

Na pasta Imagens iremos colocar as imagens de alguns dos nossos produtos cujo nomes estão definidos no campo imagem da tabela Produtos.

Definindo as classes do nosso domínio

Nosso domínio deverá conter 3 classes a saber:

Produto - representa o nosso produto;
Item - representa um item do pedido de um usuário;
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 App_Code 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:

1- 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.

2- 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, quantidade e preço do item;

3- 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, o método IncluirItem() que acrescenta um item na lista de itens , o método RemoverEm() que remove um item da lista e o método 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 leiaute da página Pedido.aspx

Vamos definir o leiaute da página Pedido.aspx que será a página inicial do web site que permitirá o cliente selecionar produto(s) e incluir no carrinho.

Na figura abaixo temos o leiaute 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 é feita 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>;

3- Marque a opção - Specify a custom SQL statement or stored procedure - e clique em Next>;

4- Na aba SELECT define a instrução SQL conforme mostrada a seguir e 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:

1 - RequireFieldValidator : Display = Dinamyc ; ErrorMessage=A quantidade deve ser informada ; ControlToValidate = txtQuantidade;

2- 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 leiaute e o código da página Carrinho.aspx.

Aguarde a continuação em : ASP .NET - Criando um carrinho de compras II (VB)

"Em verdade , em verdade vos digo que vem a hora, e agora é, em que os mortos ouvirão a voz do Filho de Deus, e os que a ouvirem viverão."(João-5:25)

Referências:

José Carlos Macoratti