Você está na página 1de 27

DESENVOLVENDO

APLICAÇÕES ASPX
USANDO VISUAL
STUDIO

Pessoal, este pequeno tutorial, é só para despertar a vossa criatividade, eu


tenho a certeza que vocês podem fazer muito mais do que está aqui.

Qualquer coisa é só mandarem um email que eu respondo ta.

Fiquem Bem!

Elaborado por: Maria Luísa da Costa Ferreira


Objectivo da Aplicação: Cadastro Online de Voluntários para ONG Projecto Esperança,
possibilitando que os mesmos tenham acesso as actividades a serem realizadas pela
ONG por meio de uma básica autenticação.

1. Desenhar e Construir a Base de Dados:

Basicamente este será o desenho da nossa BD:

Para criarmos uma BD no VS basta clicarmos com o lado direito do rato da nossa
aplicação (já aberta no VS) e escolhermos a opção “Add New Item” e de seguida clicar
na opção “SQL Database”:

marylu_ferreira@hotmail.com Página 2
Alteramos aqui para digitar o nome da nossa BD, mas devemos sempre manter a
extensão “.mdf”

Verifique que na nossa aplicação aparecerá a nossa BD com a extensão .mdf

marylu_ferreira@hotmail.com Página 3
Para mais detalhes, no lado esquerdo do ambiente de desenvolvimento do VS, clique
na aba ”Server Explorer” e verifique que nossa BD foi criada, aqui aparecerão todas as
estruturas da BD como tables, stored procedures, database diagrams e outros.

Para criarmos as tabelas, no ícone ”Tables”, clicamos o lado direito do rato para
adicionar as tabelas.

marylu_ferreira@hotmail.com Página 4
Criação da tabela “tabpessoa”

Nota: É importante editar a propriedade da chave primária, “Is Identity ” e


mudar o que vem por defeito “No” para “Yes”, indicando que a sequencia
começá por “1” e crescerá também em uma unidade (Identity Increment), os
valores para “Identity Increment” e ”Identity Seed” não precisar de
necessariamente ser “1”.

marylu_ferreira@hotmail.com Página 5
Criacao da tabela “tabnacionalidade”

marylu_ferreira@hotmail.com Página 6
Criação da tabela “tabconhecimento”

marylu_ferreira@hotmail.com Página 7
Preenchimento das tabelas auxiliares

Feito isso, preenchemos as tabelas auxiliares (tabconhecimento e


tabnacionalidade) a mão, ou seja, directamente na BD, sem auxílio de
formulário.

TabConhecimento

TabNacionalidade

marylu_ferreira@hotmail.com Página 8
Criação do formulário de inserção dos dados:

É importante que os campos relativos a password, entrem com o texto escondido para
ocultar a mesma, de maneiras que só quem esteja a preencher o formulário saiba.
Para isso devemos editar a propriedade das textBoxs para entrada de password
“TextMode” e seleccionar “Password”:

marylu_ferreira@hotmail.com Página 9
Preencher a ComboBox com valores vindos da tabela
“tabnacionalidade”

Estando a minha DropDownList com o id= idNacionalidadetxt e um sql


dataSource com o id = nacionalidade

Com o lado direito do rato,dar um click no do meu SqldataSouce cujo


id=nacionalidade e selecione a opcao “Configure Data Source”

marylu_ferreira@hotmail.com Página 10
Clicar No Botao “New Connection” e preencha da Seguinte maneira:

Caminho da nossa BD

Clique em “Test Conenction” para verificar a conexão e deverá ser exibida a


janela de sucesso:

Clique no “+” e verá a referencia da Base de Dados

marylu_ferreira@hotmail.com Página 11
Clique em “Next” para salvar o nome da string de conexão

marylu_ferreira@hotmail.com Página 12
E de seguida clique em “next” para seleccionar a tabela associada ao nosso
dataSource.

Clique em “Order By” para definir por que campo a comboBox será ordenada.
Nesse Caso, será ordenada alfabeticamente pelo campo “descrição” que
correponde aos nomes dos paises.

marylu_ferreira@hotmail.com Página 13
De seguida faça next, e clique em “Test Query” para ver o resultado da busca e
de seguida “finish”.

marylu_ferreira@hotmail.com Página 14
Tendo Configurado o nosso Data Source, devemos associar o nosso data Souce
a nossa ComboBox, ou seja, a nossa Drop Down List.

Passe o mouse na DropDownList e Escolha a opcao “Choose Data Source”

E Preencha da Seguinte Maneira:

Campo que vai ser mostrado na pagina

Campo que vai ser passado por formulário,


no caso, queremos que seja gravado o Id
da nacionalidade e não o nome da
nacionalidade

Agora é só clicar em “OK” e rodar a página!

O que foi feito para a DropDown

marylu_ferreira@hotmail.com Página 15
Feito Isso, este será o nosso Formulário:
No Visual Studio:

Na Página Web:

marylu_ferreira@hotmail.com Página 16
1. Acção dos Botões do Formulário:

Botão Limpar:

Sempre que quisermos adicionar um evento a um componente, basta darmos duplo


clique nele.

Dando duplo clique no botão limpar adicionaremos o método “ limpar_Click” no


ficheiro Voluntario.cs, e desenvolvemos o corpo desse método passando todas os
componentes de entrada para uma string vazia, ou seja, “ ”.

protected void limpar_Click(object sender, EventArgs e)


{
limpa();

public void limpa()


{
nometxt.Text = "";
dtNascimentotxt.Clear();
telefonetxt.Text = "";
enderecotxt.Text = "";
usernametxt.Text = "";
password1txt.Text = "";
passwordtxt.Text = "";

Botão Cadastro:

Sempre que usamos um SqlDataSource, implicitamente, adicionamos entradas no


ficheiro WebConfig; E para preenchermos a comboBox de Nacionalidades, usamos a
String de Conexao cujo nome é “conexao”.

Abaixo esta o trecho de código do file webConfig que estabelece a conexão.

<connectionStrings>
<add name="conexao" connectionString="Data
Source=.\SQLEXPRESS;AttachDbFilename=&quot;C:\Users\User\Desktop\Tutor
ial ASPX\App_Data\membros.mdf&quot;;Integrated Security=True;Connect
Timeout=30;User Instance=True"
providerName="System.Data.SqlClient" />
</connectionStrings>

marylu_ferreira@hotmail.com Página 17
Antes de começarmos a fazer a manipulação da BD devemos primeiramente fazer os
imports de algumas Classes na pagina que fará interacção com a BD:

Para usar manipular a BD


using System.Data.SqlClient;

Para usar a conexao a partir da String de conexao criada no WebConfig.


using System.Web.Configuration;

Mas antes de passarmos a manipulação da BD propriamente, é necessário introduzir


um conceito, importante que são os “Stored Procedures”.

Basicamente, um Stored proceudure estabelece uma ponte entre a nossa BD e a


página Web, uma vez que não é boa prática de programação manter o código que faz
interacção com a BD dentro da página Web.

Visto que não é boa prática de programação, inserir código, ou seja, instrução SQL na
pagina, fazemos recursos a procedimentos .

Para criar um stored procedurenpo VS basta clicar com o lado direito do mouse em
Stored Procedure e selecionar a opcao “Add New Stored proceudure”

Escrevemos o código do Stored proceudure, no caso, estamos a tentar inserir na tabela


pessoa:

marylu_ferreira@hotmail.com Página 18
Nome do procedure

CREATE PROCEDURE dbo.Inserir_Membro


@Snome nvarchar(50),
@SdtNascimento datetime,
@SidNacionalidade int,
@Stelefone varchar(15),
@Sendereco nvarchar(50), Variaveis do msm tipo das q estao na tabela
@SidConhecimento int,
@Susername nvarchar(50),
@Spassword nvarchar(50),
@SdtInscricao datetime

AS

INSERT INTO tabpessoa(nome,dtNascimento,idNacionalidade, telefone,


endereco,idConhecimento,
username,password,dtInscricao)
VALUES(@Snome,@SdtNascimento,@SidNacionalidade,@Stelefone,@Sendereco,@
SidConhecimento,@Susername,
@Spassword,@SdtInscricao)

Repare que na criação do Stored procedure criamos variáveis do mesmo tipo que
estão na base de Dados, essas variáveis serão inicializadas com os valores vindos da
Pagina Web e serão gravadas na BD.

Feito isso tem o nosso procedure criado, agora, só temos de usa-lo!

Como?

Clicando duas vezes no botão cadastro, temos:

protected void cadastro_Click(object sender, EventArgs e)


{
salvar();
limpa();

public void salvar()


{

//conexao existente no web config

String connectionString =
WebConfigurationManager.ConnectionStrings["conexao"].ToString();

marylu_ferreira@hotmail.com Página 19
//Estabelecendo conexao
SqlConnection conn = new SqlConnection(connectionString);

//Abrindo a conexao
conn.Open();

//Criacao de um comando SQL


SqlCommand zcommand = new SqlCommand();

// associar o comando SQL a um Store procedure


zcommand.CommandType = CommandType.StoredProcedure;
zcommand.CommandText = "dbo.Inserir_Membro";

// paxar o conteudo dos componentes do formulario para o store


procedure

zcommand.Parameters.AddWithValue("@Snome", nometxt.Text);
zcommand.Parameters.AddWithValue("@SdtNascimento",
dtNascimentotxt.SelectedDate);
zcommand.Parameters.AddWithValue("@SidNacionalidade",
idNacionalidadetxt.Text);
zcommand.Parameters.AddWithValue("@Stelefone",
telefonetxt.Text);
zcommand.Parameters.AddWithValue("@Sendereco",
enderecotxt.Text);
zcommand.Parameters.AddWithValue("@SidConhecimento",
idConhecimentotxt.Text);
zcommand.Parameters.AddWithValue("@Susername",
usernametxt.Text);
zcommand.Parameters.AddWithValue("@Spassword",
passwordtxt.Text);

//Aki, eh importante ter atencao, pq apesar da data de


inscricao nao aparecer no formulario, ainda assim é gravada, como?
Tirando a data do sistema
zcommand.Parameters.AddWithValue("@SdtInscricao",
System.DateTime.Now.Date);

//ligar o comandoSQL a conecao


zcommand.Connection = conn;

//executar o comando associado ao stored procedure


zcommand.ExecuteNonQuery();

//fechar a conecao
conn.Close();

// mandamos abrir a pagina sucesso.aspx


Response.Redirect("Sucesso.aspx");

} // fim do método de insercao

O método “limpa” é o mesmo que definimos para o botão “Limpar”

marylu_ferreira@hotmail.com Página 20
Pagina “Login.aspx”

1º Criar o formulário de entrada dos dados, previamente validado.

O componente referenciado abaixo, é semelhante a tag <a> do html!

marylu_ferreira@hotmail.com Página 21
2º Dar acção ao botão “Entrar”

Dando duplo click no botão:

Inserir primeiramente os imports

// Para usar manipular a BD


using System.Data.SqlClient;

// para usar a conexao a partir da String de conexao criada no


WebConfig.
using System.Web.Configuration;

No codigo do botao chamar o metodo validar().


protected void Button2_Click(object sender, EventArgs e)
{
validar();

Definir o metodo validar


public void validar()
{

//conexao existente no web config


String connectionString =
WebConfigurationManager.ConnectionStrings["conexao"].ToString();

//Estabelecendo conexao
SqlConnection conn = new SqlConnection(connectionString);

//Abrindo a conexao
conn.Open();

/**
* Criacao de um comando SQL
* e aonde se poe o codigo SQL que vai executar as funcoes
desejadas.
*/
SqlCommand zcommand = new SqlCommand();
zcommand.CommandType = CommandType.Text;
zcommand.CommandText = "SELECT * FROM tabpessoa WHERE
LTRIM(UPPER(Username)) = LTRIM(UPPER(@SUsername)) AND
LTRIM(UPPER(Password)) = LTRIM(UPPER(@SPassword))";
zcommand.Parameters.AddWithValue("@SUsername",
usernametxt.Text);
zcommand.Parameters.AddWithValue("@SPassword",
passwordtxt.Text);
zcommand.Connection = conn;

/**
* faz a leitura da informacao da base de dados.
*/

marylu_ferreira@hotmail.com Página 22
SqlDataReader zread;
zread = zcommand.ExecuteReader();

/* se tiver a consulta feita,


* 1.passa o nome pa uma label
* 2.faz desaparecer o formulario de login
* 3.faz aparecer as informacoes para os membros*/
if (zread.Read())
{
//1.passa o nome pa uma label
nome.Text = (string)zread["Nome"];

//2.faz desaparecer o formulario de login que


primeiramente estava visivel
userLB.Visible = false;
passLB.Visible = false;
usernametxt.Visible = false;
passwordtxt.Visible = false;
link.Visible = false;
entrar.Visible = false;

//3.faz aparecer as informacoes para os membros que


primeiramente estava invisivel
ola.Visible = true;
pt.Visible = true;
dia.Visible = true;
dia1.Visible = true;
evento.Visible = true;
evento1.Visible = true;
local.Visible = true;
local1.Visible = true;

}
/* se a consulta nao existir pede ao utilizador para
digitar correctamente os dados*/
else nome.Text = "ERRO: Verifique se seus dados estão
correctos!";

marylu_ferreira@hotmail.com Página 23
Página Lista Membro

Para inicio de conversa, devemos ter uma GridView e um SQLDataSource, como


mostra a imagem.

Configuramos o SQLDataSource passando o rato nele e seleccionamos a opção


“Configure Data Source”.

Usamos a String de conexão já existente.

marylu_ferreira@hotmail.com Página 24
Escolhemos a tabela associada ao nosso DataSource e seleccionamos os campos que
desejamos que apareçam.

Ordene por nome do membro, clicando em “order by”.

Depois é só clicar em ok e de seguida em finish!

marylu_ferreira@hotmail.com Página 25
Agora temos que configurar o GridView , adicionando-o ao SQLDataSource que
configuramos a pouco.

Passando o mouse na nossa GridView seleccionamos a opção “Choose Data Source” e


selecionamos o SQLDataSource que já configuramos(membros).

Para editar o cabeçalho da gridview selecione a opção “Edit Columns”

marylu_ferreira@hotmail.com Página 26
Selecione qualquer campo do grupo “Selected Fields” para editar as suas proprieties.

Agora aparecerão as propriedades, editamos somente no grupo “Appearance” a


propriedade “Header Text”. Este será o cabeçalho da coluna “nome” diferente do
pouco estético “nome”.

marylu_ferreira@hotmail.com Página 27