Artigo Webmobile 1- Tutorial ASP.NET
Artigo publicado pela revista WebMobile edição 1
Tutorial ASP.NET
Por Eduardo Bottcher
A tecnologia ASP.NET, lançada pela Microsoft em 2002, pode ser considerada um marco histórico na área de desenvolvimento de aplicativos voltados para a web, pelo fato de ter sido uma linguagem idealizada, projetada e preparada para um mundo onde a Internet é parte fundamental do cotidiano das pessoas e das empresas. Além de trazer novos recursos que fazem de uma página web uma interface quase tão rica quanto um formulário convencional, a linguagem ASP.NET e seus conceitos são bastante simples de aprender. Por estes motivos é que em tão pouco tempo essa tecnologia ganhou um significativo espaço no mercado, e cada dia vem crescendo o número de empresas que passam a utilizá-la.
Neste tutorial, vamos aprender como desenvolver um aplicativo em ASP.NET usando seu novo modelo de programação e veremos como utilizar seus novos recursos.
Configurando o ambiente
Uma página ASP.NET é muito mais que uma simples página ou site estático, pois permite uma dinamicidade das informações contidas nessas páginas. Uma página desenvolvida em ASP.NET é um aplicativo .NET para ambientes web, ou seja, um programa que trabalha na arquitetura cliente-servidor utilizando a internet ou intranet como meio de comunicação dos dados e com interface baseada em HTML para trafegar os dados via protocolo HTTP. Para tornar possível este cenário, é necessário que esteja instalado um programa servidor de aplicações web na máquina que funcionará como servidor. Existem diversos servidores de aplicações disponíveis. Neste tutorial utilizaremos o IIS (Internet Information Services). Sua instalação é simples e quaisquer configurações adicionais para rodar o ASP.NET serão gerenciadas pelo software de desenvolvimento que iremos usar.
Também será necessário instalar o .NET Framework, que pode ser encontrado em (http://www.microsoft.com/downloads/details.aspx?FamilyID=262D25E3-F589-4842-8157-034D1E7CF3A3&displaylang=en). Este componente é o responsável pela execução e processamento das páginas ASP.NET. Como esse processamento é realizado no servidor, não é necessário instalar o .NET Framework nas máquinas clientes que vão acessar essas páginas. Para ambientes de desenvolvimento, a mesma máquina que será o servidor também funcionará como cliente, utilizando os endereços http://localhost ou http://127.0.0.1 para fazer referência à máquina local.
Neste tutorial usaremos o Visual Studio.NET 2003 para desenvolver nossas aplicações. Embora você possa escrever suas páginas em outros programas como o Web Matrix (software gratuito disponível em http://www.asp.net/webmatrix) ou até mesmo no bloco de notas utilizando o .NET Framework SDK (http://www.microsoft.com/downloads/details.aspx?familyid=9B3A2CA6-3647-4070-9F41-A333C6B9181D&displaylang=en), o Visual Studio .NET é o mais recomendado, pois apresenta vários recursos que facilitam o dia a dia do desenvolvedor, proporcionando ganho de performance e diminuindo o tempo de desenvolvimento (veremos mais a frente alguns desses recursos).
Minha primeira página ASP.NET
Para escrever nossa primeira página ASP.NET, abra o Visual Studio.NET e clique no Menu File à New à Project (ou a tecla de atalho Crtl+Shift+N). A Figura 1 mostra a tela com as opções de Projeto.
Figura 1. Escolha a linguagem e o tipo de projeto.
Nesta tela devemos escolher primeiramente qual linguagem iremos desenvolver nossa página. Neste Tutorial usaremos o VB.NET, mas nada impede que você escolha o C# ou outra linguagem compatível com o .NET Framework. Após escolher a linguagem na lista a esquerda da tela, selecione ao lado a opção ASP. NET Web Application, conforme apresentado na Figura 1. Logo abaixo, no campo location, onde estiver escrito webapplication1, renomeie para TutorialASPNET, que será o nome do nosso projeto. Logo depois clique em OK. A Figura 2 mostra a tela principal do Visual Studio.NET para o desenvolvimento de páginas ASP.NET.
Figura 2. Tela Principal do Visual Studio.NET
Antes de prosseguir vamos conhecer as principais janelas do Visual Studio.NET:
·Solution Explorer (Figura 2A): É onde visualizamos os arquivos que fazem parte do projeto, onde podemos organizar os arquivo em pastas e ver quais as referencias externas que são feitas pelo projeto.
·Menu Bar (Figura 2B): localizada no topo da tela, contém ícones de atalho como copiar, recortar, colar, salvar, abrir, executar entre outros.
·ToolBox (Figura 2C): É a barra de ferramentas onde estão os objetos e elementos que eu posso adicionar na minha página. Ex: TextBox, Label, etc.
·Área de Trabalho (Figura 2D): Ë a região onde o código da página é visualizado e editado. É possível alterar a visualização para design ou ver o código HTML clicando os respectivos botões localizados na parte inferior dessa janela.
·Properties window (Figura 2E): É a janela na qual alteramos as propriedades como fonte, texto, vinculo de dados e o posicionamento dos objetos que estão na página.
Web Forms
Cada página ASP.NET também é chamada de Web Form (formulário web), pois seu conceito é muito parecido com um formulário de aplicações desktop convencional, quer dizer, uma tela composta por diversos tipos de controles como caixas de texto, labels e botões, entre outros que servem de interação entre o usuário e o sistema. No Visual Studio.NET, para adicionar um controle basta arrastá-lo da Toolbox para dentro do formulário web.
Para o nosso primeiro exemplo, iremos fazer uma tela de login de um sistema, contendo campos para informar o login do usuário, a senha e um botão para efetuar o acesso. O primeiro passo é criar um novo Web Form. Para isso clique em File à Add New Item. Na janela que irá aparecer, selecione o item Web Form, nomeie-o para MinhaPagina.aspx e clique em OK (ver Nota 1).
Nota 1
Quando criamos um novo projeto, já é criada por padrão uma página Web chamada WebForm1.aspx, que pode ser acessado pelo solution explorer. Está página está sendo criada apenas para demonstrar todo o processo.
A Tabela 1 contém a listagem dos objetos utilizados nesta tela e as propriedades que devem ser alteradas nesses objetos. A Figura 3 apresenta o resultado da construção da nossa tela exemplo de login (ver Nota 2).
Figura 3. a tela de acesso a um sistema do nosso exemplo
Tabela 1. Objetos da tela de Login
|
Tipo de Controle |
ID |
Text |
Visible |
ForeColor |
|
Label |
lblLogin |
Login |
True |
|
|
Label |
lblSenha |
Senha |
True |
|
|
Label |
lblMensagem |
|
False |
Red |
|
TextBox |
Txtlogin |
|
True |
|
|
TextBox |
Txtsenha |
|
True |
|
|
Button |
Btnlogar |
Entrar |
True |
|
Nota 2
Para que apareçam “*” na caixa de senha conforme o usuário vai digitando o valor de sua senha correta, coloque o valor “Password” na propriedade textmode do objeto Txtsenha.
Vamos analisar agora o HTML resultante desta tela. A Listagem 1 apresenta o código HTML da página gerada. Você pode visualizar este código clicando no botão HTML no canto inferior esquerdo da área de trabalho do Visual Studio.NET (Figura 2D).
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="MinhaPagina.aspx.vb" Inherits="TutorialASPNET.MinhaPagina"%>
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="MinhaPagina.aspx.vb" Inherits="TutorialASPNET.MinhaPagina"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>Tela de Login</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:Label id="Lbllogin" runat="server" ForeColor="Black">Login
</asp:Label>
<asp:Label id="lblsenha" runat="server">Senha </asp:Label>
<asp:TextBox id="Txtlogin" runat="server"> </asp:TextBox>
<asp:TextBox id="Txtsenha" runat="server"></asp:TextBox>
<asp:Button id="Btnlogar" runat="server" Text="Entrar" Width="120px">
</asp:Button>
<asp:Label id="lblmensagem" runat="server" Visible="False"></asp:Label>
</form>
</body>
</HTML>
Basicamente, o código HTML de uma página ASP.NET é composto por tags HTML padrão e algumas tags que iniciam com “<asp: ”. Estas tags são chamadas de Web Controls, que são controles pertencentes ao .NET Framework e que tem seu comportamento gerenciado no servidor. Essas tags foram sendo adicionadas ao código conforme arrastávamos os objetos para a página. Por exemplo, a tag descrita abaixo representa o web control TextBox.
<asp:TextBox id="TextBox2" runat="server"> </asp:TextBox>
Quando a página é exibida em um browser, cada web control é representado por uma tag HTML padrão, ou seja, não veremos no navegador uma tag “<asp:textbox>” e sim sua correspondente, neste caso “<input type=text>”. Além de ter as propriedades comuns às suas tags HTML correspondentes, os web controls possuem outras propriedades que os tornam mais práticos e eficientes. Veja o exemplo abaixo.
<asp:Label id="lblmensagem" runat="server" Visible="False"></asp:Label>
Um <asp:label> é um web control que exibe um texto na página. Quando acessado pelo cliente é representado pela tag <span>. Perceba que há uma propriedade Visible=”False” nesta tag que faz com que, quando a página seja carregada, esse texto não apareça. Este tipo de recurso, ou propriedade, não existe na tag <span>, e para ter esse efeito é necessário ao programador adicionar um estilo ou usar um JavaScript. No entanto, a página ASP.NET faz isso automaticamente. Ao carregar a página, o .NET Framework identifica essas propriedades e compatibiliza o código para criar um código HTML resultante que realiza o efeito desejado sem que haja esforço adicional por parte do desenvolvedor.
Ainda no código desenvolvido para a tela de login, temos a seguinte tag que representa o web control do botão que irá validar o login e a senha do usuário.
<asp:Button id="Button1" runat="server" Text="Entrar" Width="120px"></asp:Button>
Fazendo o Postback da página
Quando criamos um formulário, é necessário indicar através da propriedade action da tag <form> o destino para o qual os dados serão remetidos. Existem dois destinos para onde esses dados podem ser encaminhados: para um e-mail usando o comando mailto:emaildesejado e, para uma outra página que contenha scripts que possam receber e processar os dados. Para evitar que se tenham dois arquivos, um com o formulário e outro que processe os dados, segmentando desnecessariamente o código (é claro que em alguns casos isso se faz necessário), colocamos o form e o código na mesma página, fazendo com que ao submeter o formulário a página envie os dados para ela mesma, e dê continuidade ao processamento da aplicação. Esta operação de enviar os dados de uma página para si mesma é chamada de Postback da página e é um recurso muito utilizado nos web forms. Enquanto em outras linguagens, quando fazemos Postback, precisamos de um código adicional para recuperar e repovoar os campos do formulário (os dados preenchidos são enviados, mas os valores nos campos do formulário não são mantidos), um web form já faz isso automaticamente, visto que seus web controls são gerenciados no servidor, mantendo os dados da página sem que haja nenhum código adicional. Para configurarmos o Postback é necessário que a página tenha a seguinte tag
<form id="Form1" method="post" runat="server"></form>
Além disso, todos os controles que necessitem ter seus valores recuperados devem estar entre essas tags e devem ter sua a propriedade runat="server". Ë importante ressaltar que só é permitido apenas uma tag <form> com a propriedade runat="server" por página.
Nota 3
Além de web controls, uma página ASP.NET também pode ter os chamados HTML Controls, controles HTML padrão, e os Web user controls, controles personalizados.
CodeBehind
Cada Página ASP.NET é composta por um arquivo .aspx que contem o HTML da página e lida com a parte visual, e um arquivo .aspx.vb que contém toda a parte de programação. Esta separação de funcionalidade por arquivos é chamada de CodeBehind, ou código por trás de uma página. As páginas aspx de um site são passadas ao browser enquanto que os arquivos .vb são compilados em uma dll e controlam a execução da página.
Para vincular qual arquivo .vb controla qual arquivo aspx, precisamos adicionar ao aspx uma diretiva. A linha abaixo mostra esse comando:
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="MinhaPagina.aspx.vb" Inherits="TutorialASPNET.MinhaPagina"%>
Esta linha é obrigatória em todos os arquivos aspx, pois nos fornece informações importantes sobre a página. Na diretiva Codebehind="MinhaPagina.aspx.vb” estamos informando qual arquivo controlará esta página (no Visual Studio.NET esses dados já são preenchidos automaticamente).
Outra vantagem do uso do CodeBehind é que profissionais de áreas diferentes podem trabalhar independentemente na mesma página sem que um interfira no trabalho do outro. Em outras palavras, o designer pode ficar codificando o HTML da página no arquivo aspx enquanto o programador se encarrega da programação no arquivo .vb.
Como toda a plataforma .NET, uma aplicação ASP.NET é baseada nos conceitos de orientação a objetos. Cada web form é considerado uma classe, que é descrita no arquivo aspx.vb. Para indicar a classe que representa e descreve uma página aspx usamos a diretiva inherits. Assim um arquivo aspx passa a ser uma representação visual de uma classe bem definida, possibilitando ao sistema as operações clássicas de OO como herança, encapsulamento, sobrecarga, etc. A Listagem 2 mostra o código em vb criado pelo Visual Studio.NET para nossa tela de login (ver Nota 4).
Listagem 2. Codebehind gerado pelo VS.NET para a nossa página aspx
Public Class MinhaPagina
Inherits System.Web.UI.Page
#Region " Web Form Designer Generated Code "
'This call is required by the Web Form Designer.
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
End Sub
Protected WithEvents Lbllogin As System.Web.UI.WebControls.Label
Protected WithEvents Lblsenha As System.Web.UI.WebControls.Label
Protected WithEvents Txtlogin As System.Web.UI.WebControls.TextBox
Protected WithEvents Txtsenha As System.Web.UI.WebControls.TextBox
Protected WithEvents Btnlogar As System.Web.UI.WebControls.Button
Protected WithEvents lblmensagem As System.Web.UI.WebControls.Label
'NOTE: The following placeholder declaration is required by the Web Form Designer.
'Do not delete or move it.
Private designerPlaceholderDeclaration As System.Object
Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: This method call is required by the Web Form Designer
'Do not modify it using the code editor.
InitializeComponent()
End Sub
#End Region
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'Put user code to initialize the page here
End Sub
End Class
No código da Listagem 2 temos a descrição da Classe MinhaPagina que herda da classe System.Web.UI.Page, a classe do .NET Framework que representa uma página web, além da declaração de seus métodos e atributos. Os atributos são os web controls daquela página. Temos ainda os métodos page_init e page_load, que são executados toda vez que a página é carregada ou faz Postback.
Nota 4
Quando o Visual Studio.NET cria o código da classe de uma página, ele automaticamente comenta algumas regiões do código com rápidas descrições sobre sua funcionalidade parte para situar melhor o programador.
Programando a página
Uma vez que já vimos os principais conceitos que envolvem uma página ASP.NET, vamos continuar a implementação do nosso exemplo da tela de login. Vamos agora programar o evento do clique do botão para verificar se o login e a senha são válidos ou não. Para isso, na tela de design da página dê um duplo clique no botão e digite o código descrito na Listagem 3.
Listagem 3. Validando o login
Private Sub btnlogar_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnlogar.Click
Try
If txtlogin.Text = "tutorial" And txtsenha.Text = "123456" Then
'verifica se os valores digitados estão corretos
Session("login") = txtlogin.Text'Cria uma sessão chamada login
Response.Redirect("PaginaDB.aspx")'Redireciona para outra página
Else
lblmensagem.Visible = True
lblmensagem.Text = "Login inválido"
End If
Catch ex As Exception
lblmensagem.Visible = True
lblmensagem.Text = ex.Message.ToString
End Try
End Sub
Todo o processo de acesso ao banco e exibição dos dados pelo controle ocorre no evento page_load da página (Linhas 17 a 31), ou seja, durante o carregamento da página. A primeira coisa realizada foi a criação de um objeto do tipo oledbconnection (Linha 19) para se conectar ao banco, passando no seu construtor a string de conexão como parâmetro. Finalmente, na linha seguinte (Linha 20) usamos o comando conn.open() para estabelecer a conexão. Em seguida (Linhas 21, 22 e 23) criamos três novos objetos: um oledbcommand, um oledbdataadapter e um dataset. O command é o objeto que servirá de ponte entre o oledbadapter e o banco de dados. É nele também que definimos a string de consulta através da propriedade CommandText, como vemos na Linha 24. Em seguida indicamos qual conexão o command irá usar (Linha 25) e vinculamos o command ao adapter (Linha 26).
O dataset é o principal objeto do ADO.NET. Ele é uma coleção de objetos do tipo datatable e datarelations, permitindo a representação em memória de um banco com suas tabelas e relacionamentos. Fazendo uma analogia com o ASP 3, um dataset é uma coleção de recordsets. Para valorar este dataset, adicionamos a ele um novo datatable com os dados da query usando o método fill do objeto oledbdataadapter, informando também um nome ao qual referenciaremos este datatable (Linha 27). Uma vez carregado o dataset, precisamos fazer o bind dele no controle datagrid. Bind é a operação de ligar um controle a uma fonte de dados, ao invés de criar uma estrutura de looping que percorra o banco e adicione os itens no controle um a um. Felizmente, quase todos os web controls do ASP.NET suportam este recurso. Inicialmente definimos a fonte de dados atribuindo o nosso dataset à propriedade datasource (Linha 28). Logo após informamos qual a tabela do conjunto de tabelas do dataset será exibida pelo grid, ou seja, o nome que definimos quando executamos o comando Fill, neste caso “Produtos” (Linha 29). Finalizamos executando o comando databind, para efetivamente realizar a operação de preencher o grid com os dados do dataset (Linha 30).
Compile o projeto acessando o menu Build – Build Soloution, execute-o através do menu Debug – Start (ou F5) e já temos nossa página acessando uma base de dados. Vale ressaltar que a idéia aqui não foi trazer todos os detalhes e recursos do ADO.NET, mas mostrar o necessário para fazer um acesso por página ASP.NET.
Conclusão
O ASP.NET é um novo universo a ser estudado e admirado, tanto por sua praticidade e como pela vastidão de novos recursos e implementações disponibilizadas. Este tutorial teve por objetivo ser uma referência para que você possa dar seus primeiros passos (ou seus primeiros vôos) na tecnologia.
Existem diversas formas de se fazer a mesma coisa no .NET, a idéia aqui foi mostrar apenas uma opção, para que possamos evoluir gradativamente. Há muito mais por ser desbravado e explorado. Até a próxima.
Artigos relacionados
-
Artigo
-
Artigo
-
Artigo
-
Artigo
-
Artigo