WebMatrix - Gerenciando e Destacando Produtos - 10


Na  nona parte deste artigo continuamos  a implementação da área de administração do site gerenciando usuários, pedidos e categorias. Vamos continuar implementando a administração dos produtos do site.

Obs: Enquanto eu escrevia esta série de artigos foi liberada a versão 2 do WebMatrix e a área de administração vai ser criada usando esta versão.

Para baixar a nova versão clique no link: http://www.microsoft.com/web/webmatrix/

Administrando Produtos

Como o catálogo de produto é gerado dinamicamente a partir do banco de dados TecnoSite precisamos permitir a administração dos produtos do site.

Vamos implementar a administração dos produtos usando duas páginas:

Na página que exibe o resumo dos produtos do catálogo também teremos um link que permite ao administrador incluir um novo produto ao catálogo.

A página com o resumo dos produtos apresenta uma lista de produtos obtidos do banco de dados. Vamos usar o helper WebGrid para exibir os produtos e permitir a ordenação e a paginação.

Vamos iniciar criando uma pasta Produtos no interior da pasta Admin.

Clique com  botão direito sobre a pasta Admin e selecione Nova Pasta (New Folder) e informe o nome Produtos.

A seguir Clique com  botão direito sobre a pasta Produtos e selecione Novo Arquivo (New File), selecione o template CSHTML e informe o nome Default.cshtml e clique no botão OK.

Agora abra o arquivo Default.cshtml e substitua o código existente pelo código abaixo:

@{
  Layout = "~/Shared/Layouts/_AdminLayout.cshtml";
  Page.Title = "Produtos";
  var db = Database.Open("TecnoSite");
  var sqlCommand = "SELECT Produtos.produtoid, Produtos.titulo, Categorias.categoriaTitulo " +
                              "FROM Produtos " +
                              "INNER JOIN Categorias ON Produtos.categoria = Categorias.categoriaid " +
                              "ORDER BY titulo";
  var resultado = db.Query(sqlCommand);
  var produtosGrid = new WebGrid(source: resultado,rowsPerPage: 20);
}
<h1>Relação de Produtos</h1>
  <a href="produtoDetalhes">Novo Produto</a>
   <div class="grid">
       @produtosGrid.GetHtml(tableStyle: "grid",headerStyle: "gridHeader",alternatingRowStyle: "gridAlt",
                             footerStyle: "gridFooter", columns: produtosGrid.Columns(
                             produtosGrid.Column("produtoid","Cod. Produto"),
                             produtosGrid.Column("titulo","Produto"),
                             produtosGrid.Column("categoriaTitulo","Categoria"),
                               produtosGrid.Column(null,null,format: @<text> 
                               <a href="ProdutoDetalhes/@item.produtoid">Detalhes</a></text>)
                               )
                             )
</div>

 

Acessando a área de administração e clicando no link Produtos iremos obter a seguinte página:

Você deve ter notado que o link Novo Produto aponta para a página ProdutosDetalhes, a mesma página do link Detalhes dos produtos. Fizemos dessa forma para podermos usar a mesma página para ambas as tarefas.

Vamos iniciar com a página de detalhes dos produtos no link Detalhes.

Exibindo os detalhes dos Produtos

A página dos detalhes dos produtos será usada para criar novos produtos e editar os produtos existentes.

Se o código do produto (produtoid) for passado na URL, os detalhes do produto serão retornados do banco de dados e o formulário será preenchido com esses dados.

Se o código do produto estiver presente na URL, um formulário vazio será exibido para permitir a criação de um novo produto.

Se vamos criar um novo produto, armazenamos a palavra 'novo'  no campo oculto do código do produto (produtoid). Isto permite nos identificar se há um novo produto no na requisição POST e assim executar a instrução SQL INSERT para incluir o produto ao invés da instrução UPDATE que atualiza um produto existente.

Vamos criar um novo arquivo chamado ProdutoDetalhes na pasta Admin/Produtos.

Clique com  botão direito sobre a pasta Produtos e selecione Novo Arquivo (New File), selecione o template CSHTML e informe o nome ProdutoDetalhes.cshtml e clique no botão OK.

Agora abra o arquivo ProdutoDetalhes.cshtml e substitua o código existente pelo código abaixo:

@{
  Layout = "~/Shared/Layouts/_AdminLayout.cshtml";
  Page.Title = "Edita Produto";
  var produtoid = "novo";
  var titulo = "";
  var preco = "";
  var descricao = "";
  var referencias = "";
  var categoria = "";
  var db = Database.Open("TecnoSite");
  // Retorna os detalhe do produto associado com o produtoid passado na URL
  if (!UrlData[0].IsEmpty())
  {
     produtoid = UrlData[0];
     var sqlCommand = "SELECT * FROM Produtos WHERE produtoid = @0";
     var _produto = db.QuerySingle(sqlCommand, produtoid);
     titulo = _produto.titulo;
     preco = _produto.preco.ToString();
     descricao = _produto.descricao;
     referencias = _produto.referencias;
     categoria = _produto.categoria.ToString();
  }
  if(IsPost)
  {
    produtoid = Request["produtoid"];
    titulo = Request["titulo"];
    preco = Request["preco"];
    descricao = Request["descricao"];
    referencias = Request["referencias"];
    categoria = Request["categoria"];
    // Validação
    if (titulo.IsEmpty())
    {
        ModelState.AddError("titulo", "O título do produto não pode estar em branco");
    }
    if (preco.IsEmpty())
    {
        ModelState.AddError("preco", "O preço é obrigatório");
    }
    if (descricao.IsEmpty())
    {
        ModelState.AddError("descricao", "A descrição não pode estar em branco");
    }
    if(ModelState.IsValid)
    {
        var sql = "";
        if (produtoid == "novo")
        {
            // Inserir um novo produto
            sql = "INSERT INTO Produtos (titulo, preco, descricao, " + "referencias, categoria) VALUES (@0, @1, @2, @3, @4)";
        }
        else
        {
            // atualizar um novo produto existente
            sql = "UPDATE Produtos SET titulo = @0, preco = @1, " + "descricao = @2, referencias = @3, categoria = @4 " + "WHERE produtoid = @5";
        }
        db.Execute(sql, titulo, preco, descricao,referencias, categoria, produtoid);
        Response.Redirect("~/Admin/Produtos/");
    }
  }
}
<h1>Detalhes do Produto</h1>
<div id="produtoForm">
<form action="" method="post">
<p>
    @Html.Hidden("produtoid", produtoid)
    @Html.Label("Título:", titulo)<br />
    @Html.TextBox("titulo", titulo)
    @Html.ValidationMessage("titulo")
</p>
<p>
    @Html.Label("Preço:", preco)<br />
    @Html.TextBox("preco", preco, new { @class="short" })
    @Html.ValidationMessage("preco")
</p>
<p>
    @Html.Label("Descrição:", descricao)<br />
    @Html.TextArea("descricao", descricao, 10, 75, null)
    @Html.ValidationMessage("descricao")
</p>
<p>
    @Html.Label("Referências:", referencias)<br />
    @Html.TextBox("referencias", referencias)
</p>
<p>
    @Html.Label("Categoria:", categoria)<br />
    @Produtos.CategoriasDropDownList("categoria",categoria)
</p>
<p><input type="submit" value="Atualiza" /></p>
</form>
</div>

O código acima utiliza um helper chamado CategoriasDropDownList()  que preenche uma caixa de combinação com as categorias existentes e que precisamos criar antes de executar a página.

Abra o arquivo Produtos.cshtml na pasta App_Code e inclua o código abaixo que cria o helper conforme abaixo:

@helper CategoriasDropDownList(string nome, string valorSelecionado)
{
var listaOpcoes = new List<SelectListItem>();
var db = Database.Open("TecnoSite");
var sqlCommand = "SELECT categoriaid, categoriaTitulo FROM Categorias ORDER BY categoriaTitulo";
var resultado = db.Query(sqlCommand);

foreach(var item in resultado)
{
   listaOpcoes.Add(new SelectListItem { Value = item.categoriaid.ToString() , Text = item.categoriaTitulo });
}
@Html.DropDownList(nome, null , listaOpcoes, valorSelecionado, null)
}

Agora acessando a área de administração e clicando em Produtos e a seguir no link Detalhes teremos a página exibindo os detalhes do produto conforme abaixo:

Adicionando Imagens dos produtos

Nosso catálogo de produto esta completo mas seria melhor apresentar o produto aos clientes exibindo também a imagem do produto que eles pretendem comprar.

Vamos ajustar a página de detalhes dos produtos para permitir aos administradores do site enviar(upload) imagens dos produtos. Vamos então exibir miniaturas das imagens dos produtos no catálogo e a imagem em tamanho real na página detalhes dos produtos.

Vamos alterar a página Admin/Produtos/ProdutosDetalhes.cshtml e incluir a opção para o administrador enviar imagens.

Agora abra o arquivo ProdutosDetalhes.cshtml e substitua o código existente pelo código abaixo:

Obs: Estou mostrando apenas a parte do código que foi alterada. O código destacado em azul foi incluído no arquivo original.

.....
.....
<h1>Detalhes do Produto</h1>
<div id="productForm">
<form action="" method="post" enctype="multipart/form-data">
<p>
    @Html.Hidden("produtoid", produtoid)
    @Html.Label("Título:", titulo)<br />
    @Html.TextBox("titulo", titulo)
    @Html.ValidationMessage("titulo")
</p>
<p>
    @Html.Label("Preço:", preco)<br />
    @Html.TextBox("preco", preco, new { @class="short" })
    @Html.ValidationMessage("preco")
</p>
<p>
    @Html.Label("Descrição:", descricao)<br />
    @Html.TextArea("descricao", descricao, 10, 75, null)
    @Html.ValidationMessage("descricao")
</p>
<p>
    @Html.Label("Referências:", referencias)<br />
    @Html.TextBox("referencias", referencias)
</p>
<p>
    @Html.Label("Categoria:", categoria)<br />
    @* @Produtos.CategoriasDropDownList("categoria",categoria) *@
</p>
<p>
    @Html.Label("Imagem do Produto:", "produtoImagem")<br />
    <input type="file" name="produtoImagem" />
</p>
<p><input type="submit" value="Atualiza" /></p>
</form>
</div>

Incluímos o atributo enctype="multipart/form-data" na tag <form> para permitir a obtenção das informações no arquivo enviado no controle file.

Incluímos também um controle file (<input type="file" name="produtoImagem"/>) dessa forma apresentaremos ao administrador a opção para selecionar um arquivo do seu computador local para enviar.

Vamos armazenar os arquivos enviados em uma pasta na raiz do site chamada ProdutosImagens, a qual iremos criar assim:

Clique com  botão direito sobre a raiz do site e selecione Nova Pasta (New Folder) e a seguir informe o nome ProdutosImagens. Pronto nossa pasta para armazenar as imagens esta criada. (Copie uma imagem para exibir quando a imagem do produto não for encontrada nesta pasta pois será usada mais adiante)

 Depois vamos incluir o código no tratamento da requisição POST para pegar as informações do arquivo da máquina local e enviar o arquivo para esta pasta.

Vamos então alterar o arquivo Admin/Produtos/ProdutosDetalhes.cshtml e incluir o código destacado em azul conforme mostrado a seguir:

Obs: Estou mostrando apenas a parte do código que foi alterada. O código destacado em azul foi incluído no arquivo original.

....
....
 if(ModelState.IsValid)
    {
        var sql = "";
        if (produtoid == "novo")
        {
            // Inserir um novo produto
            sql = "INSERT INTO Produtos (titulo, preco, descricao, " + "referencias, categoria) VALUES (@0, @1, @2, @3, @4)";
            db.Execute(sql, titulo, preco, descricao, referencias, categoria, produtoid);
            produtoid = db.GetLastInsertId().ToString();
        }
        else
        {
            // atualizar um novo produto existente
            sql = "UPDATE Produtos SET titulo = @0, preco = @1, " + "descricao = @2, referencias = @3, categoria = @4 " + "WHERE produtoid = @5";
            db.Execute(sql, titulo, preco, descricao, referencias, categoria, produtoid);
        }
        var produtoImagem = WebImage.GetImageFromRequest();
        if(produtoImagem != null)
        {
            // salva imagem do produto
            var salvaCaminho = @"~\ProdutosImagens\" + produtoid;
            produtoImagem.Save(filePath: salvaCaminho + ".png",imageFormat: "png",forceCorrectExtension: true );
            // Redimensiona e salva a miniatura
            produtoImagem.Resize(height: 120, width: 120, preserveAspectRatio: true);
            produtoImagem.Save(filePath: salvaCaminho + "_thumb.png", imageFormat: "png", forceCorrectExtension: true );
        }
        Response.Redirect("~/Admin/Produtos/");
    }
....
....

Neste código estamos usando o helper WebImage para processar e enviar e fazer o upload do arquivo de imagem.

Primeiro, se este é um produto novo, é preciso obter o ID do produto inserido usando o método Database.GetLastInsertId(). Isto é necessário porque nós estaremos usando o ID do produto para criar o nome do arquivo que vamos usar para armazenar as imagens na pasta ProdutosImagens.

Em seguida, usamos o método WebImage.GetImageFromRequest() para recuperar a imagem, cujo caminho é passado através do controle file, a partir do sistema de arquivos do usuário local.

Então, construímos o caminho e o nome de arquivo para armazenar o arquivo em nosso servidor web. No nosso caso, estamos armazenando todas as imagens na pasta ProdutosImagens, usando a identificação do produto como o nome do arquivo, o que irá garantir que cada nome do arquivo é único.

A chamada do método Save() armazena o arquivo no caminho especificado, com o parâmetro ImageFormat dizendo ao helper WebImage para salvar o arquivo de imagem no formato Portable Network Graphics (PNG), independentemente do formato da imagem original.

Queremos exibir imagens em miniatura no catálogo de produtos. Ao invés de pedir que o usuário forneça uma imagem em miniatura adicional, usamos o método WebImage.Resize() para produzir uma miniatura da imagem do produto enviada. Quando o método Resize() é chamado, especificamos a largura e altura máxima e definimos o parâmetro preserveAspectRatio como verdadeiro, para garantir que a proporção de aspecto da imagem original
seja mantida.

Por fim, salvamos a miniatura, acrescentando o prefixo "_thumb" ao código do produto para produzir o nome do arquivo.

Exibindo as imagens do produto

Quando formos exibir a imagem na página, podemos usar um tag HTML <img> apontando para a imagem na pasta ProdutosImagens. Ocorre que se uma imagem não for encontrada (por não ter sido enviada) o navegador irá exibir uma mensagem de imagem não encontrada.

Para evitar esse problema vamos ajustar o código para exibir uma imagem padrão sempre que a imagem não for localizada. Vamos implementar este código em um método helper de forma que poderemos usá-lo sempre que desejamos exibir uma imagem.

Abra o arquivo Produtos.cshtml na pasta App_Code e inclua o código seguir que criar o método helper chamado ExibeProdutoImagem() no final do arquivo:

@helper ExibeProdutoImagem(string produtoId)
{
var caminhoImagem = @"~/ProdutosImagens/" + produtoId + ".png";
if (!File.Exists(Server.MapPath(caminhoImagem)))
{
   caminhoImagem = "~/ProdutosImagens/noImage.png";
}
<img src="@Href(caminhoImagem)" alt="Imagem do Produto"/>
}

Observe que eu estou usando a imagem noImage.png para ser exibida se a imagem do produto não for encontrada.

Finalmente para poder exibir a imagem inclua o código a seguir no final arquivo ProdutosDetalhes.cshtlm na pasta Admin/Produtos:

<div id="produtoFormImagem">
      @Produtos.ExibeProdutoImagem(produtoid)
</div>

Agora ao entrar na página de detalhes dos produtos iremos obter o seguinte resultado:

Vamos agora ajustar a página ProdutosDetalhes.cshtml da raiz do site para exibir a imagem do produto para o cliente.

Abra o arquivo ProdutosDetatlhes.cshtml na raiz do site e inclua o código que esta destacado em azul abaixo:

@{
Layout = "~/Shared/Layouts/_Layout.cshtml";
var produtoID = !UrlData[0].IsEmpty() ? UrlData[0] : "0";
var db = Database.Open("TecnoSite");
var sqlSelect = "SELECT * FROM Produtos WHERE produtoid = @0";
var produto = db.QuerySingle(sqlSelect, produtoID);
}
@if (produto == null)
{
<p>
  Não foi possível localizar detalhes do produto
  tente selecionar uma das categorias na lista.
</p>
}
else
{
Page.Title = produto.titulo;
<text>
<h1>@produto.titulo</h1>
    <div id="produtoDetalhes">
        <p class="preco">
           R$@produto.preco
        </p>
        <p>@Produtos.ExibeProdutoImagem(produtodID)</p>
        <p>@produto.descricao</p>
    </div>
    <div id="formulariopedido">
    <form action="/Carrinho" method="post">
    <fieldset>
.....
.....

Obs: Estou exibindo apenas parte do código do arquivo ProdutosDetalhes.cshtml

Agora quando o cliente selecionar um produto no site a sua imagem será exibida conforme abaixo.(Como ainda não incluímos nenhuma imagem dos produtos teremos a a exibição da imagem padrão.)

Para completar vamos exibir as miniaturas das imagens e para isso precisamos criar mais um método Helper chamado ExibeProdutoMiniatura() no arquivo Produtos.cshtml da pasta App_Code.

Abra o arquivo Produtos.cshtml e inclua no final do arquivo o código abaixo que criar o método ExibeProdutoMiniatura() :

@helper ExibeProdutoMiniatura(string produtoId)
{
var caminhoImagem = @"~/ProdutosImagens/" + produtoId + "_thumb.png";
if (!File.Exists(Server.MapPath(imagePath)))
{
   caminhoImagem = "~/ProdutosImagens/noThumb.png";
}
<img src="@Href(caminhoImagem)" alt="Imagem do Produto"/>
}

 

Este método trabalha da mesma forma que o método ExibeProdutoImagem() que criamos anteriormente no mesmo arquivo Produtos.cshtml exceto pelo fato que ele exibe uma miniatura da imagem do produto.

Para poder exibir miniatura da imagem vamos alterar o arquivo Produtos.cshtml da raiz do site incluindo a chamada para o  método ExibeProdutoMiniatura() conforme mostrado a seguir destacado em azul:

@{
Layout = "~/Shared/Layouts/_Layout.cshtml";
var categoriaTitulo = UrlData[0];
if (categoriaTitulo.IsEmpty())
{
   Response.Redirect("/Default");
}
Page.Title = categoriaTitulo;
var db = Database.Open("TecnoSite");
var sqlSelect = "SELECT produtoid, titulo, preco FROM Produtos " +
                      "LEFT OUTER JOIN Categorias ON Produtos.categoria = Categorias.categoriaid " +
                      "WHERE Categorias.categoriaTitulo = @0";
var produtos = db.Query(sqlSelect, categoriaTitulo);
}
<div id="contentTitle">
<h1>@categoriaTitulo</h1>
</div>
@if (produtos.Count() == 0)
{
<p>
   Nenhum produto foi encontrado nesta categoria.
   Tente navegar em uma das categorias do menu.
</p>
}
else
{
<ul id="listaprodutos">
@foreach (var item in produtos) {
<li>
  <h3>
     <a href="/ProdutoDetalhes/@item.produtoid">@item.titulo</a>
  </h3>
   <p>
      @Produtos.ExibeProdutoMiniatura(item.produtoid.ToString())
  </p>
  <p class="preco">
      R$@item.preco
  </p>
  <p>
    <a href="/ProdutoDetalhes/@item.produtoid" class="detalhesButton">
    mais detalhes
    </a>
  </p>
</li>
}
</ul>}

 

Agora quando o cliente selecionar uma categoria do catálogo as imagens em miniaturas relativas a cada produto da categoria será exibida:(Como ainda não incluímos as imagens do produto a imagem padrão será exibida)

Destacando um produto no site (Promoções)

Você deve ter notado que no menu da área de administração incluímos um link para Produto em Destaque. O que vamos fazer é criar uma página onde o administrador do site possa escolher um produto para  destacar no site.

Para isso temos que criar uma nova tabela para armazenar o ID do produto em destaque escolhido.

Clique na guia Banco de dados (DataBase) e expanda os objetos do banco de dados Tecnosite.sdf do projeto

A seguir clique com o botão direito do mouse sobre o item Tabelas e a seguir em Nova Tabela (New Table);

A seguir informe o nome da tabela: Destaques e defina o campo produtoEmDestaque como do tipo int sem permitir nulos e não sendo uma chave primária conforme mostra a figura abaixo:

Agora vamos incluir uma nova página na pasta /Admin/Produtos chamada Destaque.cshtml.

Clique com o botão direito do mouse sobre a pasta Produtos dentro da pasta Admin e a seguir clique em Novo Arquivo  e selecione CSHTML e informe Destaque.cshtml e clique no botão Add;

A seguir inclua o código abaixo no arquivo Destque.cshtml:

@{
Layout = "~/Shared/Layouts/_AdminLayout.cshtml";
Page.Title = "Produto em Destaque";
var produtoEmDestaque = "";
var db = Database.Open("TecnoSite");
if(IsPost)
{
  produtoDestaque = Request["produtoEmDestaque"];
  var sqlUpdate = "UPDATE Destaques SET produtoEmDestaque = @0";
  db.Execute(sqlUpdate, produtoEmDestaque);
  Response.Redirect("~/Admin");
}
var sqlCommand = "SELECT produtoEmDestaque FROM Destaques";
produtoEmDestaque = db.QuerySingle(sqlCommand).produtoEmDestaque.ToString();
}
<h1>Produto em Destaque</h1>
<form action="Destaque" method="post">
 <p>
   Featured product:
   @Produtos.ProdutosDropDownList("produtoEmDestaque", produtoEmDestaque)
   <input type="submit" value="Salvar" />
 </p>
</form>

Neste código estamos exibindo uma lista de todos os produtos cadastrados usando o  helper Produtos.ProdutosDropDownList() que iremos criar a seguir onde ele armazena o valor da coluna do produto em destaque que definimos na tabela Destaques.

Abra o arquivo Produtos.cshtml que esta na pasta App_Code e inclua o código abaixo que define o helper ProdutosDropDownList():

@* Produtos*@
@helper ProdutosDropDownList(string nome, string valorSelecionado)
{
    var opcoesLista = new List<SelectListItem>();
    var db = Database.Open("TecnoSite");
   
    var sqlCommand = "SELECT produtoid, titulo FROM Produtos ORDER BY titulo";
    var resultado = db.Query(sqlCommand);
   
    foreach(var item in resultado)
    {
      opcoesLista.Add(new SelectListItem { Value = item.produtoid.ToString() , Text = item.titulo });
    }
    @Html.DropDownList(nome, null , opcoesLista, valorSelecionado, null)
}

O código acima armazena o valor da dropdownlist para a coluna ProdutoEmDestaque da tabela Destaques no postback.

Agora vamos fazer algumas alterações na página  para exibir o produto em destaque.

Abra o arquivo Default.cshtml na raiz do site e substitua o seu conteúdo atual pelo seguinte código:

@{
Layout = "~/Shared/Layouts/_Layout.cshtml";
Page.Title = "Home Page";
var db = Database.Open("TecnoSite");
var sqlSelect = "SELECT * FROM Produtos INNER JOIN Destaques ON Produtos.produtoid = Destaques.produtoEmDestaque";
var _produto = db.QuerySingle(sqlSelect);
}
@if (_produto != null)
{
<h1 class="homePageHeading">Produto em Destaque</h1>
<div id="produtoEmDestaqueImagem">
<p>@Produtos.ExibeProdutoImagem(_produto.produtoid.ToString())</p>
</div>
<div id="produtoEmDestaqueDetalhes">
<a href="/ProdutotDetalhes/@_produto.produtoid">
<h2>@_produto.titulo</h2>
</a>
<p>
@_produto.descricao
</p>
<p class="preco">
R$@_produto.preco
</p>
<p>
<a href="/ProdutoDetalhes/@_produto.produtoid" class="detailsButton">
Mais Detalhes
</a>
</p>
</div>
}

Este código permite exibir um produto em destaque na página inicial do site. Estamos usando uma consulta SQL INNER JOIN para obter os detalhes de um produto em destaque que foi definido na tabela Destaque na tabela Produtos. Iremos apresentar o produto, a imagem e um link para a página de detalhes do produto a partir da qual o cliente pode fazer o seu pedido.

Como toque final vamos incluir o código abaixo no arquivo de estilo do site Style.css na pasta CSS:

/* Home Page
---------------------------------*/

#produtoEmDestaqueImagem {
float: left;
width: 380px;
}
#produtoEmDestaqueDetalhes
{
float:left;
width: 250px;
}
#produtoEmDestaqueDetalhes h3
{
margin-bottom: 20px;
}
#produtoEmDestaqueDetalhes .preco {
font-size: 1em;
font-style: italic;
color: #999;
margin: 10px 0px 10px 0px;
}

Após definir um produto para ser destacado na tabela Destaques ao executar o projeto iremos obter na home page do site o seguinte resultado:

Podemos usar esse recurso para evidenciar produtos em promoção.

Produtos mais populares

Vamos aproveitar a exibição do produto em destaque e vamos também exibir os 3 produtos mais populares na página principal do site.

Podemos obter essa informação a partir da tabela PedidosItens localizando os 3 produtos pelo campo produtoid que ocorrem com mais frequência na tabela.

Teremos que alterar o código do arquivo Default.cshtml na raiz do site incluindo o código abaixo no final do arquivo:

@{
   sqlSelect = "SELECT TOP 3 COUNT(produtoid) AS produtoPopular, produtoid " +
               "FROM PedidoItens GROUP BY produtoid ORDER BY produtoPopular DESC";
   var maistPopular = db.Query(sqlSelect);
}
@if (maistPopular.Count() > 0)
{
   <div id="produtosPopulares">
   <h1 class="homePageHeading">Produtos mais populares</h1>
   <ul id="listaProdutosPopulares">
   @foreach (var item in maistPopular) {
      <li>
         <a href="/ProdutoDetalhes/@item.produtoid" class="detailsButton">
           @Produtos.ExibeProdutoMiniatura(item.produtoid.ToString())
         </a>
     </li>
     }
   </ul>
</div>
}

Este código usa a função SQL COUNT  para contar o número de ocorrências de cada produtoid na tabela PedidoItens e na mesma consulta a função TOP para retornar apenas os 3 primeiros registros encontrados.

Depois percorremos o resultado usando um laço foreach e exibir a saída na página de cada imagem em miniatura dos produtos encontrados.

Para formatar a saída vamos incluir o código abaixo no arquivo de estilo do site Style.css na pasta CSS:

/*Produtos populares*/
#produtosPopulares {
clear:both;
padding-top:25px;
}
#listaProdutosPopulares {
list-style: none;
margin: 0px;
padding: 0px;
}
#listaProdutosPopulares li {
float: left;
margin: 12px 32px 12px 32px;
text-align: center;
}
#listaProdutosPopulares li a img {
border: none;
}

Agora executando projeto novamente iremos obter o seguinte resultado: 

E assim encerramos a nossa área de administração onde implementamos diversas funcionalidades que permitem gerenciar a nossa loja virtual.

Encerramos com isso nosso pequeno curso mostrando como criar uma loja virtual usando o WebMatrix.

Espero que o curso o ajude a aprender a usar os diversos recursos do WebMatrix na criação de páginas web dinâmicas.

O código completo do site esta no Super DVD .NET.

Referências:


José Carlos Macoratti