WebMatrix - Loja Virtual - Definindo os objetivos e a infraestrutura - 1


Este artigo inicia o Curso WebMatrix que mostra como criar uma loja virtual ASP .NET usando os recursos do Web Matrix.

O ASP.NET Web Matrix é uma ferramenta leve, muito simples de usar, voltada ao desenvolvimento coletivo de aplicações Web a partir do ASP.NET. Seus recursos de desenvolvimento conjunto integram a comunidade .NET ativa que irá permitir que tanto desenvolvedores principiantes como profissionais avançados aprendam a desenvolver com o ASP.NET. O Projeto Web Matrix reúne toda a comunidade ASP.NET a partir de recursos como mensagens instantâneas e integração de salas de bate-papo, além de uma ajuda baseada nessa mesma comunidade. Em um pacote de aproximadamente 1 Mb tudo isso está agora à disposição dos desenvolvedores, além de um Web Form Designer em WYSIWYG (o que se vê é o que se obtém).

O que é o Projeto ASP.NET Web Matrix:

Uma ferramenta leve, simples de usar, voltada ao desenvolvimento de aplicações ASP.NET de forma coletiva.
Ferramenta inteiramente construída em C# para o .NET Framework

O Projeto ASP.NET Web Matrix foi projetado para:

Reunir os desenvolvedores em torno da comunidade ASP.NET
Permitir que os desenvolvedores ofereçam feedback sobre os novos recursos disponíveis
Testar novas ideias a partir destes recursos

O Projeto ASP.NET Web Matrix é complementar ao Visual Studio .NET

O Web Matrix foi criado inicialmente para o desenvolvedor amador - uma vez que o VS .NET é uma extraordinária ferramenta do desenvolvedor corporativo.
O Web Matrix é a melhor forma de desenvolver as habilidades de desenvolvimento em ASP.NET, migrando posteriormente para o VS .NET.

O Web Matriz usa o padrão ASP .NET Web Pages de desenvolvimento. O padrão ASP .NET Web Pages e a nova sintaxe Razor fornecer uma maneira rápida, acessível e leve para combinar código do servidor com HTML para criar conteúdo web dinâmico. Conecte-se com um bancos de dados, adicione um link de vídeo, vincule-se sites de redes sociais e muitos mais recursos que permitem criar sites bonitos usando os mais recentes padrões da web.

Vamos abordar os principais aspectos envolvidos na criação de uma loja virtual como:

Para alcançar nosso objetivo iremos utilizar os seguintes recursos do WebMatrix:

  1. Criação de um banco de dados para armazenar os dados do produto e do pedido usando o Microsoft SQL Server Compact Edition;
  2. Utilização das páginas de layout, Helpers e funções para maximizar a reutilização de código;
  3. Utilizar o sistema de membership do WebMatrix para autenticar usuários e partes seguras do site;
  4. Utilização dos helpers para fornecer a interação com redes sociais populares;

Dessa forma a criação da nossa loja virtual irá utilizar os principais recursos do WebMatrix que serão tratados de forma bem objetiva.

A ferramenta que iremos usar será o WebMatrix que você pode pegar grátis aqui: http://www.microsoft.com/web/webmatrix/

Nota: Eu usei a versão anterior da ferramenta mas creio que usar a nova versão não deverá trazer problemas.

Se você tiver alguma dúvida sobre algum dos assuntos tratados durante o curso verifique na seção ASP .NET do site Macoratti.net as referências aos artigos que eu já publiquei sobre o WebMatrix.

Iniciando o projeto da Loja Virtual

Abra o WebMatrix e crie um novo web site baseado no template Empty Site com o nome TecnoSite:

1- Abra o WebMatrix e clique no item - Site From Template;

2- Selecione a opção Empty Site, informe o nome TecnoSite e clique no botão OK;

Nosso site será criado e exibido no WebMatrix como mostra a figura abaixo;

Agora já podemos definir a infraestrutura básica usada pelo nosso site.

Nosso objetivo será criar uma loja virtual que ofereça alguns produtos de tecnologia e permita aos usuários acessar um catálogo de produtos e realizar pedidos. Para gerenciar os pedidos iremos criar um pequeno E-commerce com carrinho de compras, verificação de pedidos, registro e autenticação de usuário. Para melhorar a experiência do usuário iremos incluir alguns recursos e características das redes sociais em nosso site. Para gerenciar os produtos e pedidos iremos também criar uma área de administração do site.

Nossa loja virtual será bem simples; Iremos utilizar páginas de layout WebMatrix para criar um modelo único, que irá conter as seções cabeçalho e rodapé e as páginas que posteriormente forem criadas no site serão colocadas entre essas duas seções. Esta abordagem irá tornar mais fácil fazer alterações no design do site no futuro, porque todas as páginas públicas do site usarão um layout único.

Vamos então criar uma pasta chamada Shared na raiz do site:

1- Selecione a pasta a partir da qual deseja criar a subpasta (TecnoSite);
2 - Selecione a guia Files e a seguir clique menu New -> New Folder;
3 - Altere o nome da pasta para Shared;

Seguindo o mesmo procedimento crie uma pasta chamada Layouts dentro da pasta Shared;
Seguindo o mesmo procedimento crie uma pasta chamada Partials dentro da pasta Shared;

Agora no interior da pasta Layouts vamos criar um arquivo chamado _Layout.cshtml.

Para isso clique com o botão direito do mouse sobre a pasta Layouts e selecione New File;

Na janela a seguir selecione o template CSHTML e informe o nome _Layout.cshtml e clique em OK;

Ao final deveremos ter a seguinte estrutura no site:

O arquivo _Layout.cshtml deverá conter o layout padrão para as páginas dos usuários que estão dentro de sua aplicação.

Selecione e abra o arquivo _Layout.cshtml e inclua o código abaixo neste arquivo:

Neste código definimos uma seção cabeçalho(header) e uma seção rodape(footer) e incluímos uma chamada ao método RenderBody() onde o conteúdo da nossa página será inserido.

Definimos também um @RenderSection com o nome "head" que podemos usar para inserir o código de marcação na tag <head> da página.

No entanto como não desejamos usar esta seção para cada conteúdo da página a marcamos como opcional definindo o parâmetro required como false.

Obs: O método RenderSection pode ser usado para processar seções de conteúdo opcionais em um layout de página.

Na tag title, mostramos o valor armazenado na propriedade Title do objeto Page. Isto permite definir o título da página separadamente dentro de cada página de conteúdo.

O layout de página depende de um arquivo CSS (Cascading Style Sheet) para definir a sua aparência.

Vamos criar uma nova pasta na raiz do site chamada CSS e no seu interior incluir um arquivo CSS chamado Style.css.

Clique com o botão direito do mouse sobre a raiz do site e selecione New File;

A seguir escolha o template CSS e informe o nome Style.css e clique no botão OK;

A seguir defina o seguinte conteúdo neste arquivo:

A combinação desses dois arquivos definem o leiaute padrão da página para a nossa loja virtual. Vamos adicionar elementos em ambos os arquivos conforme formos avançando no desenvolvimento.

Vamos ver a página de layout em ação adicionando uma nova página padrão para o site.

Crie um arquivo chamado Default.cshtml na raiz do site e substitua o seu código padrão de marcação com um parágrafo de texto fixo (qualquer texto) de espaço reservado (note a ausência de <head>, <html>, e <body> aqui, estes são fornecidos pela página layout, na qual a nossa página de conteúdo é mesclada):

Observe no bloco de código no topo da página que especificamos o layout de página e definimos a propriedade Page.Title.

Nós não precisamos definir uma seção head aqui para coincidir com a chamada de @RenderSection em _Layout.cshtml visto que a declaramos como opcional.

Selecione o arquivo Default.cshtml e no menu Run selecione um navegador para executar a página.

Você verá o seguinte resultado:

Temos assim uma página de leiaute funcional que podemos usar para exibir os produtos da nossa loja.

Vamos agora incluir um banco de dados no nosso projeto...

Aguarde a segunda parte do Curso : WebMatrix - Criando uma Loja Virtual - 2

Salmos 1:1 Bem-aventurado o homem que não anda segundo o conselho dos ímpios, nem se detém no caminho dos pecadores, nem se assenta na roda dos escarnecedores;
Salmos 1:2
antes tem seu prazer na lei do Senhor, e na sua lei medita de dia e noite.

Referências:


José Carlos Macoratti