Olá caro leitor!
Em continuidade aos artigos anteriores sobre desenvolvimento de website com ASP.NET e SQL Server. Se você não acompanhou esse série desde o início acesse:
- 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
Hoje iremos realizar o desenvolvimento das funcionalidades internas do nosso painel de controle. Nele iremos abordar os seguintes tópicos:
- Controle de sessão
- Criação das telas de gerenciamento de usuário
Para iniciarmos, faça o download do fonte do projeto disponibilizado no Github.
Abra o projeto e iremos definir a MasterPage do nosso painel de controle. Para facilitar um pouco nosso projeto, vamos utilizar a mesma MasterPage e o mesmo CSS que criamos para o site. Faremos isso também para agilizar e focarmos no que é mais importante. Sendo assim, copie o arquivo MasterPage e a pasta do CSS para a pasta painel.
Feito isso, vamos alterar a nossa MasterPage removendo a referencia ao MenuControl utilizando no site e alterar o menu.
Remova a referência ao MenuControl do código HTML. Ele é utilizado somente no site.
<%-- Aqui ficou a referencia ao MenuControl.ascx --%> <%@ Register src="MenuControl.ascx" tagname="MenuControl" tagprefix="uc1" %>
E remova o menu. No caso do painel de controle nosso menu será fixo.
<%-- Aqui ficou o nosso MenuControl.ascx --%> <uc1:MenuControl ID="MenuControl1" runat="server" />
Feito isso, vamos definir nosso novo menu que ficará da seguinte forma.
<ul>
<li>Gerenciar páginas</li>
<li>Gerenciar usuários</li>
<li>Sair</li>
</ul>
Nossa MasterPage ficará assim.
<%@ 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">Painel de Controle :: Projeto WebSite .NET</h1>
</div>
<div id="menu">
<ul>
<li>Gerenciar páginas</li>
<li>Gerenciar usuários</li>
<li>Sair</li>
</ul>
</div>
<div id="conteudo">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="rodape">
&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>
Agora criaremos a página Default.aspx, é para ela que o usuário será direcionado após realizar a autenticação.
Agora definiremos a MasterPage para a página default.
Iniciaremos a criação das demais páginas.
Teremos 3 opções no menu do nosso painel de controle onde em cada um deles poderemos criar, modificar e excluir páginas e usuários.
Vamos iniciar a criação da página de gerencia de usuários. Conforme foi mostrado algumas vezes anteriormente, crie a página gerenciar_usuario.aspx e defina a MasterPage para ela.
Essa página conterá um GridView para listar os usuários. Para preencher esse GridView utilizaremos um ObjectDataSource. Então, adicione um GridView e um ObjectDataSource.
Clique em cima do ObjectDataSource, e clique na seta para selecionar a opção Configure Data Source.
Na janela de configuração selecione o nosso objeto WebSite.Business.Usuarios pois é nele que contem nossas regras de negocio.
Selecionaremos a opção para ListaUsuarios.
Antes de concluir, clique na aba DELETE e selecione a o método ExcluiUsuario e em seguida clique no botão Finish para concluirmos.
Agora que temos definido a opção de excluir e listar os usuários, vamos configurar nosso GridView. Para isso associaremos no GridView o ObjectDataSource. Clique no GridView e na seta que aparece no canto superior direito clique e seleciona o ObjectDataSource na opção Choose Data Source. Aproveite e selecione as opções Enable Paging e Enable Deleting. Essas opções irão habilitar a paginação e o link para excluir registro.
Vamos definir no GridView qual é o DataKeyNames. No nosso caso informaremos DataKeysName igual Id. Assim sendo, estamos informando ao GridView que a chave de cada registro será o Id e essa será utilizada quando formos excluir algum registro. Para definir o DataKeyNames, clique no GridView e vá em properties.
É possível definir mais de um, mais nesse caso não será necessário.
Agora defina um estilo para o GridView.
Agora já temos nosso resultado.
Se você clicar no link Excluir, vai ver que o registro será realmente excluído.
Agora vamos criar nossa página para cadastrar novos usuários.
Adiciona acima da GridView um Button e defina o Text para “Novo usuário” e renomeie para btnNovoUsuario. Ele irá nos redirecionar para outra pagina que nos permitirá adicionar novos usuários. Para isso, de duplo clique sobre o botão e defina o código abaixo.
protected void btnNovoUsuario_Click(object sender, EventArgs e)
{
Response.Redirect("editar_usuario.aspx");
}
Agora vamos cria a página que nos permitira criar um novo usuário ou editar os existentes. Então clique com o botão direito sobre a pasta painel e clique Add New Item. Não esqueça de definir a MasterPage do painel de controle.
Antes de continuarmos, precisamos definir o CSS para os formulários. Então criaremos um novo arquivo CSS. Clique com o botão direito sobre a pasta css e clique em Add New Item. Defina o nome como form.css
Abra o arquivo default.css da pasta css do painel e referencie o arquivo form.css conforme abaixo.
@import url('form.css');
Vamos incluir o código css abaixo dentro do arquivo form.css.
div.form
{
margin: 0 auto;
padding: 20px;
width: 600px;
}
div.form .label
{
display: block;
}
div.form input[type=text], div.form input[type=password]
{
width: 100%;
}
div.form .command
{
text-align: right;
}
Agora abra a página editar_usuario.aspx para adicionarmos os campos necessários para a edição do usuário. Inclua 1 HiddenField, 5 TextBox, 1 CheckBox e 2 Button conforme o código abaixo.
<div class="form">
<h3>Novo usuários</h3>
<br />
<asp:HiddenField ID="hdfId" runat="server" />
<label class="label">Nome</label>
<asp:TextBox ID="txtNome" runat="server"></asp:TextBox><br />
<label class="label">E-mail</label>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox><br />
<label class="label">Login</label>
<asp:TextBox ID="txtLogin" runat="server”></asp:TextBox><br />
<label class="label">Senha</label>
<asp:TextBox ID="txtSenha" runat="server" TextMode="Password"></asp:TextBox><br />
<label class="label">Confirma senha</label>
<asp:TextBox ID="txtConfirmaSenha" runat="server" TextMode="Password"></asp:TextBox><br />
<asp:CheckBox ID="chkAtivo" runat="server" Text="Ativo" /><br />
<div class="command">
<asp:Button ID="btnSalvar" runat="server" Text="Salvar" />
<asp:Button ID="btnCancelar" runat="server" Text="Cancelar" />
</div>
</div>
<br />
Vamos definir nosso código? No CodeBehind da página, adiciona referencia a nossa classe de negocio e de entidades.
using UsuariosBO = WebSite.Business.Usuarios; using Usuarios = WebSite.Entities.Usuarios;
Para que entenda o código acima, fiz referencia as namespaces da biblioteca de entidade e de negócios, porem no caso da classe Usuarios ela existe nas duas bibliotecas, o que fiz foi criar um alias para elas.
Agora daremos um duplo clique no botão Salvar para implementarmos o código que salvará os dados do usuário. O código do botão ficara assim.
protected void btnSalvar_Click(object sender, EventArgs e)
{
int Id;
int.TryParse(hdfId.Value, out Id);
string Nome = txtNome.Text;
string Email = txtEmail.Text;
string Login = txtLogin.Text;
string Senha = txtSenha.Text;
bool Ativo = chkAtivo.Checked;
Usuarios usuario = new Usuarios();
usuario.Id = Id;
usuario.Nome = Nome;
usuario.Email = Email;
usuario.Login = Login;
usuario.Senha = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(Senha, "MD5");
usuario.Ativo = Ativo;
UsuariosBO usuariosBO = new UsuariosBO();
bool Salvou = usuariosBO.SalvaUsuario(usuario);
if (Salvou)
{
Response.Redirect("gerenciar_usuario.aspx");
}
}
No código estamos recebendo todos os dados e os atribuindo na classe Usuarios para posteriormente salva-lo. Após ser salvo, seremos redirecionado para a página de lista de usuários.
Existe na página o botão cancelar, vamos atribuir código a ele para que quando o usuário não queira fazer alteração, possa cancelar e volta a página anterior. De duplo clique sobre o botão Cancelar.
protected void btnCancelar_Click(object sender, EventArgs e)
{
Response.Redirect("gerenciar_usuario.aspx");
}
O código HTML da nossa página ficou assim.
<%@ Page Title="" Language="C#" MasterPageFile="~/painel/MasterPage.master" AutoEventWireup="true" CodeFile="editar_usuario.aspx.cs" Inherits="painel_editar_usuario" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div class="form">
<h3>Novo usuários</h3>
<br />
<asp:HiddenField ID="hdfId" runat="server" />
<label class="label">Nome</label>
<asp:TextBox ID="txtNome" runat="server"></asp:TextBox><br />
<label class="label">E-mail</label>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox><br />
<label class="label">Login</label>
<asp:TextBox ID="txtLogin" runat="server" ></asp:TextBox><br />
<label class="label">Senha</label>
<asp:TextBox ID="txtSenha" runat="server" TextMode="Password"></asp:TextBox><br />
<label class="label">Confirma senha</label>
<asp:TextBox ID="txtConfirmaSenha" runat="server" TextMode="Password"></asp:TextBox><br />
<asp:CheckBox ID="chkAtivo" runat="server" Text="Ativo" /><br />
<div class="command">
<asp:Button ID="btnSalvar" runat="server" Text="Salvar" onclick="btnSalvar_Click" />
<asp:Button ID="btnCancelar" runat="server" Text="Cancelar" onclick="btnCancelar_Click" />
</div>
</div>
<br />
</asp:Content>
E o código CodeBehind ficou assim.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using UsuariosBO = WebSite.Business.Usuarios;
using Usuarios = WebSite.Entities.Usuarios;
public partial class painel_editar_usuario : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSalvar_Click(object sender, EventArgs e)
{
int Id;
int.TryParse(hdfId.Value, out Id);
string Nome = txtNome.Text;
string Email = txtEmail.Text;
string Login = txtLogin.Text;
string Senha = txtSenha.Text;
bool Ativo = chkAtivo.Checked;
Usuarios usuario = new Usuarios();
usuario.Id = Id;
usuario.Nome = Nome;
usuario.Email = Email;
usuario.Login = Login;
usuario.Senha = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(Senha, "MD5");
usuario.Ativo = Ativo;
UsuariosBO usuariosBO = new UsuariosBO();
bool Salvou = usuariosBO.SalvaUsuario(usuario);
if (Salvou)
{
Response.Redirect("gerenciar_usuario.aspx");
}
}
protected void btnCancelar_Click(object sender, EventArgs e)
{
Response.Redirect("gerenciar_usuario.aspx");
}
}
Assim temos nosso cadastro de usuário pronto. Mais e para editar os existes? Vamos até a pagina que lista os usuários para adicionar um link ao GridView que nos direcionará a página para editar o usuário. Clique sobre o GridView e clique na seta no canto superior direito em seguinda clique no link Edit Column.
Selecione um HyperLinkField e adicione. Mova até o inicio da lista. Selecione o HyperLinkField adicionado e defina o Text, DataNavigationUrlFields e DataNavigationUrlFormat e em seguida clique no botão OK. Teste a página.
Veja o que acontece quando clicamos no link adicionado no GridView. Você será redirecionado para a página editar_usuario.aspx passando como QueryString o Id do usuário. Na página editar_usuario.aspx iremos utilizar o Id recebido por QueryString para buscar os dados do usuário, atribuir os dados nos campos do formulário. Iremos fazer isso no Page_Load da página. Vamos ao código.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (Request.QueryString["id"] != null)
{
int Id;
int.TryParse(Request.QueryString["id"], out Id);
UsuariosBO usuariosBO = new UsuariosBO();
Usuarios usuario = usuariosBO.ListaUsuarios(new Usuarios(Id)).FirstOrDefault();
hdfId.Value = usuario.Id.ToString();
txtNome.Text = usuario.Nome;
txtEmail.Text = usuario.Email;
txtLogin.Text = usuario.Login;
txtSenha.Text = usuario.Senha;
txtConfirmaSenha.Text = usuario.Senha;
chkAtivo.Checked = usuario.Ativo;
txtLogin.Enabled = false;
txtSenha.Enabled = false;
txtConfirmaSenha.Enabled = false;
}
}
}
Esse será executado somente quando a página for carregada pela primeira vez, ou seja, somente quando não for um PostBack. Receberemos o Id por QueryString, atribuiremos a uma variável e a utilizaremos para retornar os dados do usuário populando os campos.
Pode testar que sua página está funcionando.
Até aqui temos nossa gerencia de usuários o que nos possibilita listar os cadastrados, cadastrar novo, excluir e editar os existentes.
Agora vamos atribuir segurança ao painel, pois mesmo o usuário não autenticando ele está tendo acesso às páginas.
Primeiro abra a página login.aspx e atribua a linha do código abaixo após o usuário ter sido autenticado e antes de ser redirecionado para o painel.
Session.Add("PainelAutenticado", true);
Session.Add("Usuario", usuario);
Assim estamos criando um Session para que possamos verificar se o usuário está logado toda vez que uma nova página for aberta e os dados do usuário caso necessitemos recupera-lo sem precisar consultar o banco. Essas informações estarão ativas até que o usuário feche o browser.
Para fazer a verificação, abra o CodeBehind da MasterPage do painel e atribua a linha abaixo no Page_Load.
protected void Page_Load(object sender, EventArgs e)
{
if (Session["PainelAutenticado"] == null || !Convert.ToBoolean(Session["PainelAutenticado"]))
{
Response.Redirect("login.aspx");
}
}
No código estamos verificando se o usuário autenticou, caso contrario ele é redirecionado para a página de login forçando assim que o usuário esteja autenticado para ter acesso as páginas.
Como pode perceber, na lista de usuários irá aparece todos os usuários e teremos a opção de exclui-los, mais não seria nada interessante excluirmos acidentalmente qualquer usuário. Então vamos atribuir uma notificação e confirmação antes de exclui-lo. Abra a página gerenciar_usuario.aspx e vamos editar o link Excluir. Clique sobre o GridView e clique na seta no canto superior direito em seguinda clique no link Edit Column.
Agora vamos converter o Field referente ao link Excluir, para um TemplateField. Quando convertido para TemplateField, teremos a possibilidade de customizar nosso link e é o que faremos. Clique sobre o GridView e clique na seta no canto superior direito em seguinda clique no link Edit Template.
Agora é só editar o link.
Clique sobre o link e vamos mudar as propriedades Text e OnClientClick. O Text definiremos como Excluir e o OnClientClick definiremos uma linha em JavaScript para exibir um alerta ao usuário quando o link for clicado. Essa propriedade OnClientClick é executado do lado Client, ou seja, é executada no browser do usuário e deverá ser JavaScript. Segue o JavaScript.
if(confirm('Deseja excluir esse usuário?')){ return true; }else{ return false; }
Salve seu projeto e agora podemos testar.
Cuidado! Não exclua o usuário que você está logado. Não seria nada agradável acontecer isso. Então vamos incluir um bloqueio para isso? Como? No evento RowDataBound do GridView. Isso, vamos adicionar um evento para ele. Selecione o GridView na tab Properties selecione os eventos.
De duplo clique no evento RowDataBound e vamos incluir o código de bloqueio. Lembra-se que na parte de autenticar criamos uma Session para armazenar os dados usuário e que poderíamos utilizar a qualquer momento e sem a necessidade de consultar o banco de dados? Vamos utiliza-lo agora. Segue o código.
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
// Se for uma linha de registro
if (e.Row.RowType == DataControlRowType.DataRow)
{
// Pega o Id do usuário na linha atual
int IdRegistro;
// Converte o registro atual para Integer
int.TryParse(DataBinder.Eval(e.Row.DataItem, "Id", "{0}"), out IdRegistro);
// Verifica se a sessão nap expirou
if (Session["Usuario"] != null)
{
// Converte a sessão para a nossa classe Usuario
WebSite.Entities.Usuarios usuario = (WebSite.Entities.Usuarios)Session["Usuario"];
// Pega o Id do usuário logado e com o registro atual
if (usuario.Id == IdRegistro)
{
// Pesquisa o link excluir e converte para LinkButton
LinkButton lnkExcluir = (LinkButton)e.Row.FindControl("LinkButton1");
// Oculta o link
lnkExcluir.Visible = false;
}
}
}
}
Essa implementação nos garantirá que não seja excluído acidentalmente nosso usuário.
Nesse artigo foi possível aprendermos a criação das funcionalidades básicas para gerenciar os usuários e controlas a sessão do nosso painel de controle para dar mais segurança.
Fique atento ao próximo artigo que iremos concluir a série com o gerenciamento das páginas do nosso site.
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!