Construindo um Flog

Esse artigo faz parte da revista WebMobile edição 15. Clique aqui para ler todos os artigos desta edição

Clique aqui para ler a revista em PDF

Mão na Massa

Construindo um Flog

Saiba como mostrar suas fotos na Web usando técnicas de POO, multicamadas e XML

Hoje em dia, com a facilidade que a internet trouxe, a maioria das pessoas tem um site onde colocam suas fotos para que outras possam olhar e deixar seu comentário, são os famosos FotoLog e Flogões que existem no mundo Web. Vamos aprender neste artigo, uma das formas de criar um Flog utilizando ASP.NET com a linguagem C#.

Primeiramente, devemos pensar em como salvar as imagens que estarão disponíveis no site. Temos duas formas para salvarmos as imagens, diretamente no banco de dados ou em uma pasta no servidor, onde no banco salvaríamos apenas o nome da imagem.

Não existe uma regra para dizer a melhor forma, isso sempre dependerá do tipo de aplicação que você criará. Bom, neste artigo vamos salvar as imagens em uma pasta no servidor e no banco salvaremos apenas as informações de cada imagem.

Como C# é 100% Orientado a Objeto, veremos como utilizar POO na prática, utilizando o padrão de projetos MVC - Model-View-Controller. Para salvar os comentários de cada foto, gostaria de fazer um pouco diferente da grande maioria de exemplos encontrados, e utilizar XML, que é uma linguagem de marcação muito utilizada para armazenar dados e informações.

Se você nunca ouviu falar sobre XML não se preocupe, neste artigo você entenderá melhor e aprenderá como utilizá-lo para guardar informações.

Criando a aplicação

  Abra o Visual Studio 2005 e crie um novo Web Site com a opção ASP.NET Ajax-Enabled Web Site, dando o nome de “MiniFlogao”. Primeiramente, vamos criar um banco de dados, clicando com o botão direito no projeto e escolhendo a opção Add New Item. Escolha o item SQL Database e dê o nome de “DB_Flogao.mdf”, ele perguntará se deseja colocar o banco na pasta App_Data, clique em Sim.

Vamos criar uma tabela para armazenar as informações das fotos enviadas para o servidor. Clique com o botão direito em Tables no Server Explorer e escolha Add New Table e crie a tabela com o nome de “TB_Fotos” (Figura 1).

Figura 1. Tabela TB_Fotos

Veja que no banco existe um campo chamado nome_foto que servirá para salvarmos apenas o nome da foto. Depois de ter criado a tabela vamos criar as Stored Procedures. A primeira SP é para inserir informações de uma foto. No item Stored Procedure clique com o botão direito, escolha Add New Stored Procedure e digite o código da Listagem 1.

Listagem 1. Stored Procedure  miniFlogao_spAddFoto

CREATE PROCEDURE miniFlogao_spAddFoto

  @nome nvarchar(50),

  @desc nvarchar(500),

  @data datetime

AS

  INSERT INTO TB_Fotos (nome_foto, desc_foto, dt_foto)

  VALUES (@nome, @desc, @data)

Adicione a segunda SP que servirá para recuperar todos os dados da tabela TB_Fotos, ordenando os mesmos em ordem decrescente pelo ID, como temos no código a seguir:

CREATE PROCEDURE miniFlogao_spGetAllFotos

AS

  SELECT id_foto, nome_foto, desc_foto, dt_foto

  FROM TB_Fotos

  ORDER BY id_foto DESC

Criadas as SPs vamos configurar a string de conexão do banco no arquivo Web.Config, para fazer isso, adicione o código da Listagem 2 dentro da tag <configuration>.

Listagem 2. Configurando a string de conexão no Web.config

<connectionStrings>

<add name="conectionString"

  connectionString="Data Source=.\SQLEXPRESS;

  AttachDbFilename=|DataDirectory|\DB_Flogao.mdf;

  Integrated Security=True;User Instance=True">

</add>

</connectionStrings>

Agora vamos adicionar um User Control com o nome de “banner.ascx”. Como o nosso flog terá duas telas, vamos criar um banner principal para que todas as páginas tenham o mesmo design e para facilitar o desenvolvimento. O código do banner.ascx é bem simples:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="banner.ascx.cs" Inherits="banner" %>

<div class="banner">

   Mini - Flogão

</div>

Veja que no código, temos apenas uma div e dentro dela um texto, mas repare que na div existe a propriedade chamada class = banner, isso porque criaremos um arquivo CSS que terá alguns estilos pré-definidos para o flog.

O código do CSS segue na Listagem 3 (crie um novo arquivo no item Style Sheet), não comentarei o mesmo, para não fugir muito do assunto, mas caso tenha o interesse de conhecer mais sobre estilos, dê uma olhada nas aulas e artigos do Portal DevMedia.

Listagem 3. Arquivo webFlog.css

body

{

background-color:Black;

color: White;

}

.divLog

{

z-index:100; left:10px; width:140px;

position:absolute; top:14px; height:100px;

}

.banner

{

border: 1px; border-style:solid;

border-color:Orange; left:230px;

position:absolute; width:540px; height:100px;

text-align:center; font-size:80px; color:Orange;

font-family:Monotype Corsiva;

}

.divFotos

{

font-family:Times " [...] continue lendo...