language: PT-BR; mso-bidi-font-size: 12.0pt">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.
|
Nota: Para um melhor entendimento deste artigo, recomendamos a leitura do artigo “POO na Prática” publicado nesta edição. |
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
|
Nota: Não se esqueça de marcar o campo id_foto como IsIdentity. |
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 New Roman;
text-align:left; z-index:100; left:11px;
width:138px; position:absolute; top:160px;
height:400px; text-align:center;
}
Para que o arquivo CSS tenha efeito sobre as telas, é necessário acrescentar a seguinte linha de código no arquivo ASPX, abaixo da tag <title>:
<link href="webFlog.css" rel="stylesheet"
type="text/css" />
Mas veja bem, não acrescentaremos essa linha no arquivo ASCX e sim nas páginas ASPX.
Agora vamos criar a tela para adicionar as fotos no servidor e armazenar suas informações no banco. Adicione uma nova página com o nome de “AddFoto.aspx” e arraste o User Control que criamos anteriormente. Se clicar no Source verá que foi acrescentado automaticamente a linha <%@ Register Src="banner.ascx" TagName="banner" TagPrefix="uc1" %> registrando o User Control para que possamos usá-lo nessa tela.
Temos também a linha para adicionar o banner: <uc1:banner ID="Banner1" runat="server" />. Veja que o código começa com o prefixo uc1 que foi definido na propriedade TagPrefix juntamente com o nome do banner definido na propriedade TagName.
Note também que não foi adicionado nenhum estilo para a página, pois ainda não adicionamos a referência para o arquivo CSS criado anteriormente. Mas para isso, basta acrescentar a linha anterior entre as tags <head> </head> e a tela ficará semelhante à Figura 2.
Figura 2. Página AddFoto.aspx com estilo do arquivo CSS
Agora vamos acrescentar outros controles para podermos salvar as fotos. Precisaremos de um FileUpload, um TextBox, um botão salvar e outro voltar como mostra a Figura 3, além dos controles de validação.
Figura 3. Design da página AddFoto.aspx
Orientação a Objeto
Vamos entrar agora na parte de POO. Primeiro, crie uma pasta chamada App_Code, clicando com o botão direito no projeto e escolhendo a opção Add ASP.NET folder>App_Code. Agora, crie duas pastas dentro da App_Code, uma chamada “BLL” para camada de negócio e outra “DAL” para a camada de persistência ou camada de acesso a dados.
|
Nota: Essa aplicação utiliza o conceito de multicamadas, onde há uma separação lógica entre as funcionalidades da aplicação, como interface, regras de negócio e acesso a dados. Isso nos traz vários benefícios, como separação clara das funcionalidades da aplicação, facilita a manutenção, permite que diferentes desenvolvedores trabalhem em diferentes camadas da solução, além de desfrutar claro de várias vantagens que só a POO possibilita. Pode parecer estranho à primeira vista fazer essa separação lógica para quem nunca programou dessa forma, mas os ganhos a médio e longo prazo são imensos, além de ser esta a forma correta de desenvolver. Não é uma boa prática, por exemplo, utilizar código SQL diretamente na interface do usuário. Na nossa aplicação, o que chamei de BLL (Business Logic Layer) será a camada que cuidará das regras de negócio, validações por exemplo. A DAL (Data Access Layer) é uma famosa camada destinada apenas a centralizar o acesso a dados. É nessa camada que programados os comandos ADO.NET que se comunicam diretamente como o banco de dados. Note que cada camada tem uma função bem definida e distinta, e não realiza a tarefa de outra. Por exemplo, a interface não se preocupa nem deve se preocupar com o acesso a dados, apenas tratar a tela de uma melhor forma para o usuário. |
Dentro da pasta DAL crie mais uma pasta chamada “VO” onde ficarão os objetos ou entidades, chamados Foto e Comentario. Então vamos lá, crie novas classes, uma com o nome de “Foto.cs” e outra chamada “Comentario.cs” dentro da pasta VO (Figura 4).
| ... |
