Olá caro leitor!
Dando continuidade ao artigo anterior que criamos o banco de dados, as tabelas, camada de conexão, camada de entidades e a camada de regras de negocio do nosso projeto, iremos iniciar o desenvolvimento do nosso website.
Caso queira acessar as outras partes, veja os links abaixo:
- Desenvolvimento de Website com ASP.NET e SQL Server – Parte 1
- Desenvolvimento de Website com ASP.NET e SQL Server – Parte 2
- Desenvolvimento de Website com ASP.NET e SQL Server – Parte 3
- Desenvolvimento de Website com ASP.NET e SQL Server – Parte 4
- Desenvolvimento de Website com ASP.NET e SQL Server – Parte 5
Para iniciarmos, faça o download do fonte do projeto disponibilizado no Github.
Após aberto adicione um novo Web Site conforme imagem abaixo.
Salve o novo projeto no mesmo diretório dos demais projetos anterior e defina um nome. No caso chamarei de WebSite.
Feito isso, vamos adicionar uma MasterPage ao projeto que será o modelo visual padrão de novo projeto.
Defina um novo para a MasterPage. Deixei o nome como MasterPage.masterpage mesmo.
Por padrão quando criamos um novo Web Site é automaticamente incluso uma página Default.aspx, deveremos exclui-la.
Inclua ao projeto uma nova pasta com o nome de css para que nela possamos incluir nossa folha de estilo que será referenciada na MasterPage.
Após criado a pasta, criaremos um novo arquivo de folha de estilo conforme imagem abaixo clicando com o botão direito sobre a pasta css e selecionando a opção Add New Item.
Defina o nome do arquivo Style Sheet como default.css.
Depois de criado o arquivo, inclua a folha de estilo abaixo no arquivo default.css.
html, body, form
{
height: 100%;
}
body
{
font-family: Tahoma, Verdana, Arial, Sans-Serif, Times New Roman;
padding: 0;
margin: 0;
}
#geral
{
position: relative;
min-height: 100%;
}
* html #geral
{
height: 100%;
}
#cabecalho
{
background: #f09942;
height: 150px;
line-height: 150px;
}
#cabecalho h1
{
padding: 0;
margin: 0;
}
#cabecalho h1#logo
{
text-transform: uppercase;
}
#menu ul
{
overflow: auto;
background-color: #353535;
padding: 0;
margin: 0;
list-style: none;
}
#menu ul li
{
float: left;
}
#menu ul li a
{
display: block;
height: 50px;
line-height: 50px;
padding: 5px 20px;
color: #fff;
text-decoration: none;
}
#menu ul li a:hover
{
color: #353535;
background: #f09942;
text-decoration: underline;
}
#conteudo
{
clear: both;
}
#rodape
{
position: absolute;
background-color: #f09942;
width: 100%;
bottom: 0;
left: 0;
padding: 15px 0;
text-align: center;
font-size: small;
}
#rodape a
{
color: #000;
text-decoration: none;
}
#rodape a:hover
{
color: #000;
text-decoration: underline;
}
Agora abra o código HTML do nosso arquivo MasterPage e substitua pelo disponível abaixo.
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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 runat="server">
<title></title>
<style type="text/css">
@import url('css/default.css');
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="geral">
<div id="cabecalho">
<h1 id="logo">Projeto WebSite .NET</h1>
</div>
<div id="menu">
</div>
<div id="conteudo">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="rodape">
&amp;amp;copy; 2012. Projeto WebSite .NET by <a href="http://raphaelcardoso.com.br" target="_blank" rel="noopener">C# Brasil</a>
</div>
</div>
</form>
</body>
</html>
Vamos incluir uma nova página Default.aspx que utilizará a MasterPage. Clique com o botão direito sobre o projeto e clique em Add New Item. Defina o nome para default.aspx.
Selecione a MasterPage criada.
Teremos até o momento o nosso website igual à imagem abaixo.
Como pode perceber, até o momento não temos o menu. Nesse caso iremos criar um Web User Control especifico onde será exibido os links do menu de acordo com as páginas presentes em nosso banco de dados. Para isso clique com o botão direito em cima do projeto WebSite e clique em Add New Item.
Adicionaremos um novo Web User Control e definiremos o nome como MenuControl.ascx.
A partir desse momento começaremos a utilização de nossas bibliotecas criadas no artigo anterior.
Clicando com o botão direito em cima do projeto Website, clique em Add Reference.
Na aba Projects, você encontrará todas as bibliotecas presentes em nossa solutions, selecione todas.
Agora abra o código HTML do MenuControl.ascx para adicionarmos o código que ficara como abaixo.
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MenuControl.ascx.cs" Inherits="MenuControl" %> <ul> <li>Página inicial</li> <asp:Literal ID="ltlItensMenu" runat="server" /> <li>Contato</li> </ul>
Como pode ver no código anterior, foi criado uma lista HTML já com 2 (dois) links, Página inicial e Contato. Entre eles adicionamos um Server Control do tipo Literal. O Server Control do tipo Literal é um componente para escrever textos em tela, ou seja, se escreve um texto sem que seja gerado tag HTML. No nosso caso usaremos para criar os itens do menu.
Agora abra o CodeBehind para incluirmos o código C# (C-Sharp) que listará os links do menu. Esse código deverá ser incluso no Page_Load do nosso MenuControl.ascx.
// Instancia da classe de Negocio
WebSite.Business.Paginas paginasBO = new WebSite.Business.Paginas();
// Chamada ao metodo que lista todas as paginas que irá gerar um array das mesmas
WebSite.Entities.Paginas[] paginas = paginasBO.ListaPaginas();
// Realizando um laço de repetição no array para ler cada registro
foreach (WebSite.Entities.Paginas pagina in paginas)
{
// Formatando a string para que seja gerado uma saida conforme exemplo
// <li>Titulo Pagina</li>
string mnu = string.Format("<li><a href=\"pagina.aspx?id={0}\">{1}</a></li>", pagina.Id, pagina.Titulo);
// Atribuindo o texto gerado no Server Control Literal
ltlItensMenu.Text += mnu;
}
Agora que nosso menu está pronto, vamos inclui-lo na nossa MasterPage. Para isso abra a MasterPage no modo Design e arraste o MenuControl.ascx que está no Solution Explorer para dentro da MasterPage.
Seu HTML da MasterPage passará a ficar assim.
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<%-- Aqui ficou a referencia ao MenuControl.ascx --%>
<%@ Register src="MenuControl.ascx" tagname="MenuControl" tagprefix="uc1" %>
<!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 runat="server">
<title></title>
<style type="text/css">
@import url('css/default.css');
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="geral">
<div id="cabecalho">
<h1 id="logo">Projeto WebSite .NET</h1>
</div>
<div id="menu">
<%-- Aqui ficou o nosso MenuContro.ascx --%>
<uc1:MenuControl ID="MenuControl1" runat="server" />
</div>
<div id="conteudo">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="rodape">
&amp;amp;copy; 2012. Projeto WebSite .NET by <a href="http://raphaelcardoso.com.br" target="_blank" rel="noopener">C# Brasil</a>
</div>
</div>
</form>
</body>
</html>
Antes de executar nosso projeto, precisaremos incluir a ConnectionString para conexão com o banco de dados. Para isso abra o Web.config e inclua o código abaixo alterando somente os seus dados de conexao.
<connectionStrings> <add name="DBConnection" connectionString="Data Source=servidor1;User Id=usuario;Password=senha;Initial Catalog=projeto_website;" providerName="System.Data.SqlClient"/> </connectionStrings>
Salve e execute seu projeto e teremos o resultado até o momento.
Se clicarmos nos links gerados a partir de nossa lista de páginas, irá ocorrer um erro 404 pois o arquivo pagina.aspx ainda não existe. Mais agora é mais fácil criar página pois já temos nosso modelo criado, então criaremos o arquivo pagina.aspx e utilizaremos a MasterPage.
Clique com o botão direito sobre o projeto e clique em Add New Item.
Defina o nome para o arquivo como pagina.aspx e selecione a opção Select master page
Uma nova janela será aberta onde selecionaremos nossa master page.
Repare que o código HTML de nossa pagina.aspx quase não possui tags, isso porque já está tudo dentro da nossa MasterPage.
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="pagina.aspx.cs" Inherits="pagina" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> </asp:Content>
É entre as tag que iremos incluir o conteúdo do site. Porem será incluso a partir do banco de dados.
Vamos implementar primeiro o HTML que deverá ficar assim.
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="pagina.aspx.cs" Inherits="pagina" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <h2> <asp:Literal ID="ltlTitulo" runat="server" /> </h2> <asp:Literal ID="ltlConteudo" runat="server" /> </asp:Content>
Repare que novamente fizemos uso do Literal. Ele será uma excelente opção para esses casos pois não queremos que seja gerado tags HTML extras.
Agora vamos ao CodeBehind para fazermos a busca das informações da página. Dentro dele terá o evento Page_Load e é onde incluiremos nossa chamada ao método para buscar o conteúdo da pagina e usando como informação o Id da página. O Id dá página é passado por QueryString. Para saber mais sobre QueryString acesse o video aula do Wellington Camargo.
// Recebe o ID da página por QueryString e pelo fato de o parametro ser String, realizamos a conversão para Integer
int IdPagina;
int.TryParse(Request.QueryString["id"], out IdPagina);
// Caso não tenha sido passado o ID dá pagina, redireciona para a pagina padrão (default.aspx)
if (IdPagina == 0) Response.Redirect("default.aspx");
// Instancia da classe de Negocio
WebSite.Business.Paginas paginasBO = new WebSite.Business.Paginas();
// Chamada ao metodo que lista todas as paginas passando o ID da página e retornando o primeiro registro
WebSite.Entities.Paginas pagina = paginasBO.ListaPaginas(new WebSite.Entities.Paginas(IdPagina)).FirstOrDefault();
// Atribuido os dados nos Literais
this.Title = pagina.Titulo;
ltlTitulo.Text = pagina.Titulo;
ltlConteudo.Text = pagina.Texto;
Como pode ver, em pouco tempo fomos capazes de desenvolver o nosso website e bem flexível, ou seja, caso desejamos ter mais página, basta realizarmos uma inserção na tabela PAGINAS que teremos mais páginas inclusas no menu. Vamos fazer um teste? Execute o script abaixo no banco de dados.
INSERT INTO PAGINAS(TITULO_PAGINA, TEXTO_PAGINA, DATACRIACAO_PAGINA, ATIVO_PAGINA)
VALUES('Produtos', 'Conteudo da página de produtos', GETDATE(), 1)
INSERT INTO PAGINAS(TITULO_PAGINA, TEXTO_PAGINA, DATACRIACAO_PAGINA, ATIVO_PAGINA)
VALUES('Clientes', 'Conteudo da página de clientes', GETDATE(), 1)
Agora acesse sua página e repare que foram inclusos mais 2 páginas no menu.
Nosso projeto ficou muito simples e de fácil manutenção além de bem flexível o que nos permitira utilizar um mesmo projeto para diversos clientes bastando somente alterar o conteúdo do banco de dados.
Até o momento você aprendeu:
- Criar tabela e banco de dados;
- Desenvolver camada de dados, entidades e negocio;
- Criar páginas utilizando CSS, MasterPage e utilizando nossa camada de negocio.
Acha que acabou? Pode aguarde o próximo artigo que ainda tem muita coisa boa pela frente e iremos ainda criar nosso painel administrativo.
Fonte do projeto: Github
Não deixe de participar do fórum. Siga o C# Brasil no Twitter e Facebook.
Até o próximo artigo e bons estudos!