Introdução
Olá pessoal, meu nome é Mauricio Junior. Faço este artigo para ajudar a todos com uma tecnologia ASP 3.0 relativamente antiga, porém ainda muito usada no mercado e empresas, tanto como sistema interno como sistema externo. Não posso esquecer de informar os pré-requisitos para esse artigo, segue abaixo:
- IDE Interdev;
- IIS (Internet Information Services);
- Banco de dados SQL SERVER 2000;
- Visual Basic 6.0;
- Serviços de componentes.
Forma de desenvolvimento:
O InterDEV 6.0 é para desenvolver o HTML e o ASP 3.0 chamando o componente feito em Visual Basic 6.0 que conecta no banco de dados para fazer a validação do usuário ou qualquer outra consulta. Para o componente em VB funcionar corretamente, é necessário ter um serviço de componentes, ou seja, COM+ (com plus). Dessa forma, o sistema fica muito mais seguro, pelo fato de que se alguém mal intencionado conseguir pegar o código feito em ASP, terá uma grande decepção. O código que acessa o banco de dados que contém informações de nossos sistemas estará dentro da DLL gerada pelo VB e registrada no serviço de componentes. É importante ressaltar que a segurança de um sistema é tão importante quanto ao próprio sistema em si.
O sistema de login feito em ASP 3.0, usarei três camadas usando até um pouco do conceito “OO” dentro do componente. O ASP chama o VB que por si chama o banco de dados SQL SERVER. Depois dessa descrição toda para o seu entendimento, irei direto para a prática.
Direto para prática
O primeiro de tudo é criar o projeto dentro do IIS e depois a página .asp. Não mostrarei como criar no IIS, isso é assunto para outro artigo, porém segue uma ilustração em seguida mostrando como ficou.
Depois que criei o mesmo no IIS, criei uma página em ASP com apenas HTML. Esse HTML também possui validação em JAVASCRIPT para verificar se o campo é vazio e envia os dados via “post” para uma outra página, onde realmente irá verificar os dados passados pelo usuário.
Segue o código HTML da página Login.asp.
Login.asp
<html>
<head><title>..:: SISLOG ::..</title></head>
<!—ESTILOS --> (ainda não coloquei)
<script>
<!—CODIGO JAVASCRIPT -->(ainda não coloquei)
</script>
<body topmargin="0" leftmargin="0" onload="sFoco();">
<form name="frmLogin">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr align="left">
<td align="center"><!-- Inicio da Página -->
<table CELLSPACING="1" cellpadding="0" class="formulario" width="230px">
<tr>
<th colspan="4">Login</th>
</tr>
<tr>
<th width="18">01</th>
<td>
<b> Usuário:</b> <br>
<input name="txtUsuario" onkeypress="enter(event.keyCode);" value="<%=Request("txtUsuario")%>" size="25" style="HEIGHT: 17px">
</td>
<td rowspan="2" width="40px" valign="middle">
<br> <img style="background:none" SRC="../images/login.gif" WIDTH="35" HEIGHT="33">
</td>
</tr>
<tr>
<th width="18">02</th>
<td>
<b>Senha:</b> <br>
<input type="password" onkeypress="enter(event.keyCode);" name="txtSenha" size="25" style="HEIGHT: 17px">
</td>
</tr>
</table>
<table class="formulario" cellSpacing="1" cellPadding="0" width="230px">
<tr>
<th align="middle">
<input type="button" value="Entrar" name="btnEntrar" onclick="sValidarLogin();">
<input type="button" value="Alterar" name="btnAlterar" onclick="s_AlterarSenha();">
<input type="button" value="Sair" name="btnSair" onclick="sSair()">
</th>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
Obs.:
Todos os códigos que estão em negrito e itálico ou com comentário, serão colocados depois para não ficar muito confuso o código javascript e css com html. Segue a ilustração do código HTML colocado anteriormente.
Ilustração da tela HTML que ficou no sistema. Se a sua tela não ficou desse jeito não fique preocupado, isso é porque uso CSS (estilos) para que o mesmo fique dessa forma. Mais a frente colocará o CSS e o JAVASCIRPT.
Imagem 3
Explicação de código:
Note que, cada input type=button existe um outro atributo e valor chamado onclick. Dentro de uma linha HTML de qualquer atributo, como botão ou campos, existem atributos e valores, mas isso é para outro arquivo apenas sobre HTML.
Button
<input type="button" value="Entrar" name="btnEntrar" onclick="sValidarLogin();">
O atributo onclick=sValidarLogin(); é uma função em JAVASCRIPT que verificará automaticamente os campos do formulário de login, ou seja, o mesmo faz validações dos campos e envia os dados para outra página ou outro formulário onde será verificado junto ao banco de dados usando STORED PROCEDURE.
Input Usuário
<input name="txtUsuario" onkeypress="enter(event.keyCode);" value="<%=Request("txtUsuario")%>" size="25" style="HEIGHT: 17px">
O botão de usuário que existe no formulário existe um atributo diferente chamado onkeypress. O mesmo é ativado quando o cliente aciona alguma tecla dentro do campo.
Input Password
<input type="password" onkeypress="enter(event.keyCode);" name="txtSenha" size="25" style="HEIGHT: 17px">
Esse outro input password também possui o atributo onkeypress onde verifica qual o código que o usuário digitou. Nesses dois casos do input, esse atributo chama uma função JAVASCRIPT que verifica se é a tecla ENTER o mesmo clicará automaticamente no botão para enviar os dados ao servidor de componentes e automaticamente o banco de dados.
Fica aqui esse primeiro artigo sobre Sistema de Login em ASP 3.0. Em breve, outros artigos surgiram continuando esse assunto muito importante e ainda requisitado pelos colaboradores.
Mauricio Junior
e-mail: mauricio@aspneti.com
site: www.ascompras.com
comunidade: www.aspneti.com