Laboratório de Tecnologia Internet - USP · Conexão com o Banco de Dados EAD5881 10. Em Server...
Transcript of Laboratório de Tecnologia Internet - USP · Conexão com o Banco de Dados EAD5881 10. Em Server...
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet
FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal
1
Laboratório de Tecnologia Internet Prof.Dr. Antonio Geraldo da Rocha Vidal
Construção Aplicativos para a Web
Utilizando o Microsoft Visual Studio 2008 (C#, ADO.NET e ASP.NET)
Introdução
Neste laboratório vamos criar Formulários Web (WebForms) que permitam manipular uma
tabelas de um banco de dados, elementos fundamentais para a construção de Aplicativos
Web para apoio aos negócios de uma organização. Para isso, você deve ter instalado no seu
equipamento os seguintes recursos:
Microsoft Visual Studio 2008 (atualmente na versão Beta 2, que pode ser obtida no
site da Microsoft - www.microsoft.com/vstudio).
o Projeto de Aplicação Web
o Linguagem de programação orientada para objetos C#
o Classes de acesso a dados do ADO.NET
o Classes de controles visuais do ASP.NET
Gerenciador de Banco de Dados Microsoft SQLEXPRESS (instalado
automaticamente com o Visual Studio 2008).
o Banco de dados exemplo EAD5881
Microsoft Internet Explorer 6.0 ou superior
O objetivo será construir um aplicativo Web contendo formulários (WebForms) que
permitam simultaneamente consultar e atualizar dados sobre pessoas contidos no banco de
dados exemplo. Estão propostos 4 exercícios:
1. No primeiro será elaborado um formulário Web que permite a consulta e a atualização
de registros da tabela PESSOA, do banco de dados EAD5881, com todos os passos
necessários para construí-lo. Basta segui-los com atenção e precisão.
2. No segundo, você deverá completá-lo, implementando as operações para validação dos
dados digitados pelos usuários, que compreendem busca de dados relacionados nas
tabelas MUNICIPIO, PAIS e TIPOPESSOA e a implementação de expressões de
validação para alguns dados. Todos os passos necessários para elaborar este exercício
também estão fornecidos nesta apostila.
3. No terceiro exercício, baseando-se nos dois anteriores, você deverá construir um
formulário Web equivalente ao dos dois primeiros exercícios, para consultar e atualizar
os dados da tabela UNIDADE do banco de dados EAD5881. Neste caso os passos para
elaborar este trabalho não serão fornecidos; você deve seguir os passos dos exercícios
anteriores realizando as adaptações necessárias, contando com apoio do professor.
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet
FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal
2
4. No quarto, você deverá completar o conjunto de formulários que comporão a sua
primeira aplicação Web, construindo respectivamente um formulário para consultar e
atualizar as tabelas MUNICÍPIO, UF, PAIS e TIPOPESSOA. Neste caso serão
fornecidos os passos para a construção do formulário da tabela PAIS, as demais ficarão
por sua conta.
Exercício 1
Neste exercício vamos criar um formulário Web (WebForm) para consultar e atualizar a
tabela PESSOA do banco de dados EAD5881. Caso você já tenha um projeto Web poderá
utilizá-lo, abrindo-o através da opção Open Project apresentada na página inicial do Visual
Studio.
Caso você ainda não possua um projeto Web, execute os passos a seguir para criar um.
1. Clique a opção Create Project apresentada na página inicial do Visual Studio.
2. Na janela apresentada escolha Visual C# em Project Types e ASP.NET Web
Application em Templates. Em seguida, conforme ilustrado na figura a seguir, dê um
nome para a sua nova Aplicação Web em Name; por exemplo, WebEAD5881, uma vez
que vamos utilizar o banco de dados EAD5881. Finalmente clique o botão OK.
Novo Projeto
3. Aguarde alguns segundos para que o Visual Studio crie o seu projeto e o seu primeiro
WebForm, denominado Default.aspx. A figura a seguir ilustra o resultado desse
processo. Verifique os componentes do projeto na janela Solution Explorer, as
propriedades do formulário na janela Properties, os componentes que podem ser
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet
FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal
3
utilizados ou inseridos no formulário na janela Toolbox e as conexões com servidores
de bancos de dados na janela Server Explorer. Esta visualização poderá variar
dependendo da configuração do Visual Studio. Utilize a opção View do menu para
ativar algumas destas janelas caso não esteja sendo apresentada. Para configurar a
visualização de cada uma destas janelas dê um clique direito na sua barra de título e
escolha a opção desejada; depois a arraste e a posicione de forma conveniente na janela
do Visual Studio. O arranjo final deve ficar como apresentado na figura a seguir.
Janela de Projeto do Visual Studio
4. Antes de iniciarmos, vamos dar um título para o formulário. Para isso, posicione o
apontador do mouse sobre o formulário e dê um clique direito e no menu volante
apresentado escolha a opção Properties para que seja apresentada a janela de
propriedades do formulário à direita.
5. Nesta janela defina o título do formulário em Document Title.
6. Nosso modelo de WebForm para atualização de tabela de banco de dados trabalhará
com divisões, ou marcadores <div> do HTML. Localize a divisão na qual iremos inserir
nosso primeiro componente no topo do formulário. Ela é destacada por uma linha
pontilhada, conforme ilustra a figura anterior.
7. Agora vamos nos conectar ao banco de dados EAD5881. Para isso localize na janela
Solution Explorer a pasta App_Data, ou seja, dados da aplicação. Para ela iremos copiar
o arquivo EAD5881.mdf. Ele corresponde ao arquivo físico do banco de dados
EAD5881, fornecido pelo professor.
8. Copie o arquivo EAD5881.mdf de seu local original para a pasta Visual Studio
2008\Projects\WebEAD5881\WebEAD5881\App_Data contida na pasta Meus
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet
FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal
4
Documentos do seu equipamento. Caso você não a encontre ou tenha alguma
dificuldade, solicite ajuda do professor.
9. Agora vamos nos conectar ao banco de dados EAD5881. Para isso, localize a pasta
Data Connections na janela Server Explorer e clique o botão Add Connection (+) logo
acima. Será apresentada a janela ilustrada a seguir.
Conexão com o Banco de Dados EAD5881
10. Em Server Name escolha o nome do seu servidor de banco de dados: Nome do
Equipamento\SQLEXPRESS. O servidor SQLEXPRESS acompanha o Visual Studio e
é uma versão simplificada para desenvolvedores do gerenciador de banco de dados SQL
Server 2005 da Microsoft.
11. Em seguida clique sobre o botão Attach a database file e através do botão Browse
localize o arquivo EAD5881.mdf copiado no passo anterior na pasta Meus Documentos
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet
FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal
5
do seu equipamento. Preencha a caixa de texto Logical name com EAD5881 e em
seguida clique o botão Test Connection.
12. Se tudo correu bem, você deve poder observar o banco de dados EAD5881.mdf na
janela Server Explorer. Clique o ícone + para expandir a árvore e visualizar seus
componentes. Caso tenha ocorrido algum problema solicite auxílio do professor, pois é
comum ocorrerem problemas de acesso devido à segurança implementada no banco de
dados.
13. Clique agora o + da pasta Tables para visualizar as tabelas de dados que compõem o
banco de dados EAD5881. Elas são: MUNICIPIO, PAIS, PESSOA, TIPO PESSOA UF
E UNIDADE.
14. Para visualizar os relacionamentos, chaves primárias e estrangeiras das tabelas do banco
de dados EAD5881, clique o botão + de Database Diagrams e dê um duplo-clique sobre
o diagrama EAD5881. Você deverá estar visualizando uma tela semelhante a ilustrada a
seguir.
Banco de Dados EAD5881
15. Explore o diagrama do banco de dados para conhecê-lo melhor. A tabela principal é a
tabela PESSOA (chave primária idPessoa) que está relacionada com as tabelas
TIPOPESSOA, MUNICIPIO, PAIS e UNIDADE, sobre as quais criaremos nossa
aplicação Web de exemplo ao executaremos nossos exercícios.
16. Para visualizar os dados da tabela PESSOA, feche a janela do diagrama do banco de
dados clicando o botão X no topo superior direito do diagrama. Em seguida, na janela
Server Explorer clique o botão direito do mouse sobre a tabela Pessoa e escolha a opção
Show Table Data no menu que será apresentado. Aguarde alguns instantes para que os
dados sejam apresentados conforme ilustra a figura a seguir.
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet
FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal
6
Dados da Tabela Pessoa
17. Para visualizar o conteúdo de qualquer outra tabela, feche a tabela atual clicando o X no
topo da janela, selecione a tabela desejada e repita o passo anterior.
18. Agora vamos arrastar e soltar a tabela Pessoa dentro da divisão (pontilhada <DIV>) do
nosso formulário, para que possamos visualizá-la através do navegador (browser)
quando a nossa aplicação for executada. Nesta operação o Visual Studio já estará
atuando selecionando automaticamente os componentes necessários para realizar esta
operação.
19. Após alguns segundos (dependerá da capacidade do seu equipamento), o Visual Studio
insere automaticamente dois componentes no seu formulário Web: o SqlDataSource1
(acesso à fonte de dados SQL) e o GridView1 (grade para visualização de dados no
navegador). Como os próprios nomes dos componentes indicam, o primeiro se conecta
ao banco de dados EAD5881 e, através de um comando SQL, traz os dados da tabela
PESSOA para o formulário. O segundo constrói uma grade para apresentação destes
dados no navegador.
20. Note a caixa de diálogo Common GridView Tasks que é apresentada. Inicialmente
selecione as opções Enable Paging (habilitar paginação) e Enable Sorting (habilitar
ordenação).
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet
FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal
7
Formulário Web com a visualização da tabela Pessoa
21. Para verificar o resultado, respire fundo e execute a sua aplicação Web pela primeira
vez clicando o botão com a seta verde (>) na barra de ferramentas logo abaixo do menu.
Se tudo estiver correndo bem, o Visual Studio compilará sua aplicação e em seguida
acionará seu servidor e seu navegador Web para que o primeiro formulário de sua
aplicação Web seja apresentado. A figura a seguir ilustra o resultado.
22. Os dados das pessoas foram apresentados, mas podemos melhor muito esta
apresentação. Para isso feche a janela do navegador e ao ser novamente apresentada a
tela de Design do Visual Studio selecione o componente GridView1, clicando sobre ele
com o mouse, e em seguida clique o botão com uma setinha para a direita no seu canto
superior direito (>) para que o menu de configuração do componente seja apresentado.
23. No menu Common GridView Tasks selecione a opção Auto Format… e escolha a
apresentação visual que mais lhe agradar; há várias opções, por exemplo Slate, e clique
o botão OK. Note que instantaneamente a apresentação do GridView assume o padrão
escolhido.
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet
FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal
8
Janela do Navegador com o GridView da tabela PESSOA
24. Agora vamos reduzir o número de colunas de dados sobre pessoas. Para isso selecione a
opção Edit Columns...e, na caixa de diálogo que será apresentada, ilustrada na figura a
seguir, selecione a coluna idPessoa na seção Selected Fields.
Seleção de Colunas do GridView
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet
FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal
9
25. Observe que ao selecionar cada coluna na seção BoundField properties são
apresentadas suas propriedades. Aproveite para digitar um título mais adequado para
cada coluna desejada na propriedade HeaderText. Por exemplo, para idPessoa digite
simplesmente ID.
26. Agora vamos excluir as colunas que não desejamos apresentar no GridView. Para isso
selecione a coluna e clique o botão X (em vermelho) para que ela seja excluída. Para as
colunas restantes troque o título do cabeçalho (HeaderText) para um mais adequado.
a. Colunas que deverão permanecer e respectivos títulos: idPessoa (ID), codPes
(Número USP), CPF (CPF), nomPessoa (Nome da Pessoa), DDD (DDD),
numTelefone (Telefone), eMail (E-mail) .
b. Colunas que deverão ser excluídas da apresentação: idTipoPessoa, idUnidade,
CNPJ, desDocto, codTipoDoc, desEndereco, nomBairro, idMunicipio, CEP,
UF, idPais, numFax, eMensagem, datCadastro, flaSituacao, codPessoa,
datAtualiza.
27. Após alterar a apresentação das colunas, clique o botão OK e novamente visualize seu
formulário no navegador clicando o botão Start ( > ) para verificar o resultado, ilustrado
na figura a seguir. A apresentação melhorou muito não foi? Está quase profissional;
teste também a paginação.
GridView Formatado no Navegador
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet
FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal
10
28. Bem, agora vamos incluir um segundo componente em nosso formulário de forma que
além de consultar os dados de todas as pessoas através do GridView, possamos
consultar e atualizar os dados de uma determinada pessoa selecionada.
29. Mas antes, vamos incluir uma segunda divisão (<DIV>) em nosso formulário para
hospedar o novo componente. Para isso localize na barra de ferramentas (Toolbox) a
seção HTML e dentro dela o componente Div. Clique e arraste o Div para o seu
formulário, posicionando-o logo abaixo do primeiro Div (após o SqlDataSource).
30. Note que o novo Div não ocupou toda a largura do formulário, mas apenas 100px, que é
a sua largura padrão. Para que ele ocupe todo o formulário, selecione-o na janela
Design e na janela Proprerties localize a propriedade Style e altere width e height de
100px para 100% (toda a largura e altura disponíveis). Tome cuidado para não alterar
nada além desses dados; porém se isso acontecer, simplesmente selecione e exclua o
Div com a tecla Del e inicie todo o processo novamente. A figura a seguir ilustra o
resultado da inclusão do novo Div, que aparece selecionado.
Formulário com o segundo Div
31. Agora vamos inserir neste segundo Div o componente DetailsView, para que sejam
apresentados os dados detalhados de cada pessoa selecionada. Para isso, localize a
seção Data na Toolbox, selecione o componente DetailsView e arraste-o para dentro do
novo Div. Por enquanto ignore o menu Common DetailsView Tasks, pois antes teremos
que inserir outro componente SqlDataSource para acessar os dados que serão
apresentados no DetailsView1.Pa
32. Para inserir o novo componente SqlDataSource que será utilizado pelo DetailsView,
selecione-o na Toolbox e arraste-o para o lado do DetailsView. Ele será batizado de
SqlDataSource2 pelo Visual Studio. Não se importe com o posicionamento do
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet
FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal
11
SqlDataSource, pois como você já deve ter percebido ele não é um componente de
apresentação, portanto, não será apresentado quando seu formulário for utilizado.
33. Para definir quais dados o SqlDataSource2 deverá trazer do banco de dados, clique
sobre ele e em seguida clique o botão com a setinha em seu canto superior direito para
que seja apresentado o menu correspondente. Neste menu selecione a opção Configure
Data Source para que seja apresentada a janela ilustrada a seguir.
Configuração do SqlDataSource
34. Para configurar o SqlDataSource2 de forma a que ele se conecte ao banco de dados e
trata os dados completos da pessoa que estiver selecionada no GridView1, execute as
operações a seguir:
a. Na primeira tela, selecione a conexão com o banco de dados que já foi criada
pelo SqlDataSource1, simplesmente clicando a setinha para baixo e
selecionando EAD5881ConnectionString1. Em seguida clique o botão Next.
b. Agora selecione a tabela PESSOA no menu apresentado e todos os seus dados,
marcando o asterisco ( * ) na seção Columns ou cada uma das colunas se você
preferir.
c. Para apresentar no DetailsView apenas a pessoa que estiver selecionada no
componente GridView1, clique o botão WHERE.
d. No menu Column selecione idPessoa, o dado chave que identifica de forma
única cada pessoa. No menu Operator selecione o igual ( = ) que já deve estar
sendo apresentado.
e. No menu Source selecione a opção Control e ao lado, no menu Control ID,
selecione o GridView1.
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet
FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal
12
f. Para finalizar clique o botão Add e observe a expressão SQL que foi inserida;
em seguida clique o botão OK.
g. Agora vamos configurar os comandos de banco de dados (SQL) para a
realização das operações de inclusão (INSERT), atualização (UPDATE) e
exclusão (DELETE) de registros da tabela PESSOA. Para isso clique sobre o
botão Advanced e na janela que será apresentada marque a opção Generate
INSERT, UPDATE, and DELETE statements e clique o botão OK.
h. Novamente clique o botão Next e, finalmente, o botão Finish.
35. Com o SqlDataSource2 configurado, podemos associá-lo como fonte de dados do
componente DetailsView2. Para isso selecione-o e clique sobre a setinha do topo direito
para que o seu menu de configuração seja apresentado.
36. No menu Common DetailsView Tasks selecione no menu Choose Data Source o
SqlDataSource2, que será sua fonte de dados. Note que imediatamente os dados são
apresentados no componente e novas opções serão apresentadas no menu.
37. Marque as caixas Enable Inserting, para inserir novas pessoas, Enable Editing, para
alterar dados de pessoas e Enable Deleting, para excluir pessoas.
38. Para gerar um visual melhor para o DetailsView, da mesma forma que fizemos com o
GridView, selecione a opção AutoFormat e escolha a apresentação que mais lhe
agradar. Por exemplo, Professional, e clique OK.
39. Novamente, da mesma forma como procedemos no GridView, selecione a opção Edit
Fields e selecione e altere de forma consistente o título de cada campo de forma que o
DetailsView identifique de forma adequada cada dado a ser apresentado e editado.
Assim que você finalizar essa operação clique OK.
40. Pronto! Finalmente vamos executar novamente nosso formulário Web para verificar os
resultados. Para isso clique o botão Start (>) e reze para que tudo dê certo!!!
41. Opa! O GridView apareceu, mas o DetailsView não! O que será que aconteceu. Bem,
para que o DetailsView apresente alguma pessoa precisamos selecioná-la e não há
nenhuma selecionada no GridView e nem meios de fazer isso. Precisamos, portanto,
incluir no GridView um botão para selecionar uma determinada pessoa. Para isso
execute as seguintes operações, depois de fechar o navegador.
a. Selecione o GridView1 e clique sua setinha de menu de configuração
(localizada no topo superior direito).
b. No menu Common GridView Tasks marque a opção Enable Selection e repare
que imediatamente um botão Select é adicionado em cada linha.
42. Novamente execute a sua aplicação clicando o botão Start (>) para verificar se ao
selecionar uma determinada pessoa no GridView, o DetailsView aparece apresentando
seus dados detalhados.
43. Deu certo? Parabéns!! Agora explore o DetailsView. Note que além de apresentar os
dados da pessoa selecionada no GridView ele também permite alterar (botão Editar),
excluir (botão Excluir) e incluir uma nova pessoa. Divirta-se com sua aplicação Web
“quase completa”, construída sem a necessidade de qualquer linha de programação, mas
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet
FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal
13
apenas com o trabalho dos componentes e do Visual Studio, que automatizam todo o
processo para você. Agora você já pode selecionar pessoas, alterar seus dados, excluí-
las ou mesmo incluí-las.
Aplicação “Quase Completa”
44. Caso não tenha dado certo, não se desespere; isso é mais comum do que você imagina.
Repita os passos e se ainda alguma coisa não funcionar como desejado chame o
professor (Help!!!).
45. O que falta? Como a tabela PESSOA possui mais de nove mil registros, certamente não
será produtivo encontrar uma determinada pessoa paginando o formulário, pessoa a
pessoa, até encontrarmos a desejada. Precisamos, portanto, criar um recurso de busca
que permita selecionar e localizar rapidamente uma determinada pessoa. Esse será o
nosso próximo desafio. Preparado(a)? Respire fundo novamente e “mãos à obra”.
46. Devemos poder pesquisar as pessoas pelos seus principais dados, ou seja, ID
(idPessoa), Número USP (codPes), CPF (CPF) e Nome da Pessoa (nomPessoa). Para
isso, vamos incluir acima do GridView um menu em cascata (DropDowList) para que o
usuário da aplicação possa selecionar a opção de busca desejada. Para isso, execute os
seguintes passos:
a. Edite o seu formulário e posicione o cursor no canto inferior esquerdo do
GridView (talvez seja necessário usar o mouse e o teclado para isso); em
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet
FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal
14
seguida tecle Enter. Essa operação fará que seja inserida uma linha (ou
parágrafo) antes do GridView, justamente onde colocaremos o nosso menu de
opções para busca de pessoas.
b. Na primeira posição da nova linha aberta acima do GridView digite: “Campo a
ser Pesquisado:”.
c. A seguir, na seção Standard da caixa de ferramentas (ToolBox), selecione o
controle DropDowList e arraste-o para o seu formulário soltando-o bem na
frente do texto digitado. Capriche na pontaria!
d. Agora selecione o DropDowList, clique a setinha para abrir o seu menu de
configuração, na janela Common DropDownList Tasks do componente, clique a
opção Edit Items.
e. Será apresentada a janela de especificação dos itens do menu, conforme
ilustrado na figura a seguir. Agora clique o botão Add para adicionar cada uma
das opções de campos de busca a serem apresentadas, ou seja:
i. Text: ID e Value: idPessoa;
ii. Text: Número USP e Value: codPes;
iii. Text: CPF e Value: CPF;
iv. Text: Nome e Value: nomPessoa.
f. Clique OK para finalizar quando a lista de opções estiver completa e . A
propriedade Text se refere ao texto que será apresentado em cada opção e a
propriedade Value ao correspondente valor que será selecionado quando uma
opção for escolhida pelo usuário.
Janela para Definição das Opções de Busca do DropDownList
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet
FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal
15
47. Agora precisamos inserir ao lado do menu uma caixa de texto para que o usuário possa
digitar o dado a ser pesquisado. Para isso, execute os seguintes passos:
a. Posicione o cursor logo depois do menu DropDowList1, digite alguns espaços e
o texto: “Dado a ser Pesquisado: “.
b. Em seguida, na seção Standard da Toolbox, selecione e arraste para o seu
formulário um componente Textbox (caixa de texto), soltando-o logo depois do
último texto digitado.
c. Selecione o TextBox e na janela Properties localize a propriedade Width
(comprimento) para alterá-la para aproximadamente 250px (pixels), de forma
que os dados a serem pesquisados possam ser confortavelmente digitados pelo
usuário.
48. Falta ainda incluir um botão de comando para o usuário clicar após ter definido suas
opções de busca e realizar a pesquisa, de forma a que apenas as pessoas que satisfaçam
o critério especificado sejam apresentadas no GridView. Para isso execute os seguintes
passos:
a. Na seção Standard da janela Toolbox, selecione e arraste para o seu formulário
um componente Button (botão de comando), soltando-o logo depois da caixa de
texto.
b. Selecione o botão e na janela de Propriedades altere a propriedade Text do botão
de “Button” para “Localizar”.
49. Se você tiver feito tudo “direitinho”, a janela Design do Visual Studio deverá estar
sendo apresentada como ilustrada na figura a seguir.
Janela do Visual Studio com os componentes para Pesquisa de Registros
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet
FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal
16
50. Agora acabou a brincadeira! Vamos ter que programar, pois será necessário inserir
instruções (código de programação) para que o usuário possa pesquisar e consultar as
pessoas que desejar. Basicamente o que precisaremos fazer é, de acordo com a opção de
pesquisa escolhida pelo usuário, alterar o comando SQL SELECT do componente
SqlDataSourde1, que é a fonte de dados do GridView1, incluindo uma cláusula
WHERE. Para isso execute os seguintes passos:
a. Inicialmente vamos abrir a janela que contém o código de programação na
linguagem C# associado ao seu formulário – o Code Behind - , clicando o botão
direito do mouse e escolhendo a opção View Code. A janela do Code Behind, é
utilizada para inclusão das “regras do negócio ou da aplicação”, conforme
ilustrada na próxima figura.
Atenção: a linguagem C# possui duas regras básicas:
i. Toda linha de instrução é finalizada com um ponto-e-vírgula;
ii. Letras maiúsculas e minúsculas são diferentes (case-sensitive);
Janela do Code Behind (código por trás) do Formulário Web
b. Em seguida, retorne para a janela Design do seu formulário clicando a aba
Default.aspx, logo abaixo dos botões do Visual Studio. Note que você poderá
mudar de janela sempre que necessário clicando estas abas. Por exemplo, para
retornar para a janela do Code Behind clique a aba Default.aspx.cs.
c. Na janela Design selecione o botão Localizar. Em seguida, na janela Properties
do botão, clique o botão com um raiozinho. São apresentados os eventos que
podem ser associados ao componente em questão. O primeiro deles é justamente
o desejado, o evento Click. Este evento dispara o método ou operação associada
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet
FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal
17
ao clique do botão, ou seja, quando um usuário clicar o botão, a operação
associada a esse evento será executada.
d. Posicione o cursor na caixa de texto do evento Click, digite Pesquisar e em
seguida dê um Enter para criar o método de pesquisa de registros chamado
“Pesquisar”.
e. Automaticamente o Visual Studio mostra a janela de código (Code Behind) com
o método Pesquisar já criado para que você defina a regra de busca desejada.
f. Para isso, digite o trecho de código abaixo, necessário para definir e realizar a
pesquisa desejada pelo usuário. Observe bem os comentários, pois as
explicações de cada linha do código estão neles.
Atenção: As quebras de linha foram geradas pelo Word; no código do seu
formulário as linhas não devem estar quebradas.
protected void Pesquisar(object sender, EventArgs e)
{
// Verifica se a caixa de texto com o dado a pesquisar está vazia
if (this.TextBox1.Text!=null) // Se o dado não estiver vazio
{
// Redefine o comando SQL de acordo com as opções do usuário
SqlDataSource1.SelectCommand = "SELECT idPessoa, codPes, CPF, nomPessoa, DDD,
numTelefone, eMail FROM PESSOA WHERE "+this.DropDownList1.SelectedValue +" LIKE
'%"+this.TextBox1.Text+"%' ";
}
else
{
// Define o comando SQL padrão para listar as Pessoas
SqlDataSource1.SelectCommand = "SELECT idPessoa, codPes, CPF, nomPessoa, DDD,
numTelefone, eMail FROM PESSOA ";
}
Pronto!
Agora feche, salve e execute o seu formulário e teste as pesquisas....Deu certo? Sim;
parabéns, você concluiu o exercício 1! Não, então revise e tente novamente....Ainda não?
Ainda há um pequeno “probleminha” entre a paginação e a pesquisa. Como corrigi-
lo?? Consulte o professor....
Teste bastante o seu primeiro formulário Web! Reveja o arquivo Default.aspx na janela
Designer. Veja o código HTML/ASP.NET na janela Source. Reveja e analise o código em
C# (o Code Behind) na janela de Default.aspx.cs. Prepare-se para os próximos!!!!.
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet
FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal
18
Resultado Final do Exercício 1 – Experimente localizar diversas pessoas pelo nome
Exercício 2
Este exercício é uma continuação do Exercício 1. Note que apesar de tudo estar
funcionando bem no exercício anterior, é impossível alguém entender, digitar e validar
determinados dados, pois eles representam os identificadores de outras tabelas relacionadas
à tabela PESSOA que precisam ser resolvidos:
Dado Tabela Lista Fonte de Dados DropDownList
idTipoPessoa TIPOPESSOA Lista de Tipos SqlDataSource3 ddlTipoPessoa
idUnidade UNIDADE Lista de Unidades SqlDataSourde4 ddlUnidade
idMunicipio MUNICIPIO Lista de Municípios SqlDataSource5 ddlMunicipio
idPais PAIS Lista de Países SqlDataSource6 ddlPais
A melhor solução será apresentar uma lista de opções válidas para cada um destes dados
quando o usuário estiver alterando e/ou adicionando pessoas. Como a tabela acima mostra,
para obter os dados para popular cada lista teremos que utilizar novos componentes
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet
FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal
19
SqlDataSource, um para cada lista. Assim como teremos que incluir novos componentes
DropDownList em nosso formulário para que as listas possam ser apresentadas para os
usuários quando da edição ou adição de pessoas.
Nesta apostila somente apresentaremos os passos e operações necessárias para criar a
primeira lista, ou seja, a lista de Tipos de Pessoas. Como o procedimento para a criação das
demais listas é idêntico, desde que sejam realizadas as mudanças necessárias, você deverá
criar as listas de opções para a seleção de Unidades, Municípios e Países. Então, mãos à
obra!
Estando com o Visual Studio aberto com o seu projeto, execute os passos a seguir:
1. Dê um duplo-clique sobre o formulário Default.aspx na janela Solution Explorer do
Visual Studio para que ele seja reaberto na janela de Design.
2. Como vamos exibir uma lista de Tipos de Pessoas, inicialmente vamos inserir um
novo componente SqlDataSource para obtermos esta lista de dados do banco de
dados executando as seguintes operações:
a. Na seção Data da caixa de ferramentas (Toolbox), selecione e arraste um
componente SqlDataSource soltando-o próximo dos já existentes no seu
formulário. Ele deverá receber o nome de SqlDataSource3, mas você pode
alterar para SqlDataSourceTipo, por exemplo.
b. No menu de configuração do SqlDataSource3, clique a opção Configure
Data Source.
c. Para se conectar ao banco de dados, escolha a mesma conexão que está
sendo utilizada pelos outros componentes SqlDataSource e clique Next.
d. Como vamos trazer os dados da tabela TIPOPESSOA, selecione-a marcando
apenas os dados idTipoPessoa e nomTipoPessoa para a construção do
comando SELECT, conforme ilustrado na figura a seguir.
Configuração do Componente SqlDataSource para a tabela TIPOPESSOA
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet
FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal
20
e. Clique Next e na próxima tela o botão Test Query, para visualizar os dados
trazidos pelo SqlDataSource3.
f. Para finalizar clique o botão Finish.
3. Com a fonte de dados para a lista de tipos de pessoas configurada, vamos agora
inserir os componentes que apresentarão esta lista para o usuário nas três situações
geradas pelo componente DetailsView: consulta a um item (ItemTemplate), edição
(EditItemTemplate) e inserção (InsertItemTemplate). Para isso, execute as seguintes
operações:
a. Selecione o componente DetailsView e clique a setinha para abrir o seu
menu de configuração.
b. Neste menu clique a opção Edit Fields e selecione o campo Tipo Pessoa (ou
idTipoPessoa) na seção Selected Fields.
c. Assim que os dados do campo Tipo Pessoa forem apresentados na seção
BoundField properties, clique a opção Convert this Field into a
TemplateField. Essa operação possibilitará que troquemos os componentes
originais para apresentar os dados deste campo pelo componente
DropDownList que apresentará a lista de Tipos de Pessoas trazida do banco
de dados pelo SqlDataSource que acabamos de definir. Clique OK para
finalizar.
d. Agora, ainda utilizando o menu de configuração do componente
DetailsView, escolha a opção EditTemplates e no próximo menu que será
apresentado escolha a opção Field[2] – Tipo Pessoa.
e. A apresentação do componente DetailsView será alterada de forma que você
poderá ter acesso aos padrões de apresentação deste campo em cada uma das
situações já citadas: ItemTemplate (consulta), EditItemTemplate (edição ou
alteração de dados) e InsertItemTemplate (inclusão de dados).
f. Em cada um destes templates há ou outro componente que está sendo
utilizado para apresentação e edição dos dados do tipo de pessoa.
Simplesmente selecione-os e digitando a tecla Del os exclua.
g. Para o lugar de cada um dos controles excluídos arraste a partir da caixa de
ferramentas um controle DropDownList.
h. Selecione cada um dos DropDownList para configurá-los através de seu
menu da seguinte forma (vale para os três casos):
i. Clique em Choose Data Source e selecione como fonte de dados o
SqlDataSource3, como campo para apresentação nomTipoPessoa e
como campo de valor o idTipoPessoa. Isto é, será apresentado para o
usuário a lista de nomes de tipos de pessoa, mas será gravado no
banco de dados o valor ou código idTipoPessoa que corresponde ao
nome selecionado. Clique OK para finalizar.
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet
FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal
21
Edição dos Templates do campo Tipo Pessoa
ii. Clique em Edit DataBindings e na opção Bound to selecione o campo
idTipoPessoa. Clique OK para finalizar.
iii. Na janela Properties, localize a propriedade Width (comprimento) e
altere o seu valor para 200px (pixels), de forma a que os nomes dos
tipos de pessoas possam ser adequadamente apresentados.
iv. Finalmente, apenas no caso do DropDownList contido no
ItemTemplate (apenas para consulta), ainda na janela de
propriedades altere o valor da propriedade Enabled (habilitado) para
falso, de forma que o usuário não possa alterá-lo durante uma
simples consulta.
i. Para finalizar, depois de realizadas todas estas operações, clique novamente
sobre a seta de ativação do menu do componente DetailsView (ou clique o
botão direito do mouse sobre o componente) e selecione a opção End
Template Editing.
4. Pronto! Agora vamos testar para verificar se a lista de tipos de pessoas é
corretamente apresentada em cada um dos novos componentes inseridos no
formulário. Simule seleções, consultas, edições e inserções de pessoas de forma a
verificar o funcionamento da lista de tipos de pessoas.
5. Se tudo funcionou como previsto, parabéns! Agora você já pode seguir exatamente
o mesmo procedimento para criar as demais listas para Unidade, Município e País.
6. Trabalhoso? Sim, mas lembre-se que não foi necessária nenhuma programação e o
resultado é quase “profissional”. Há muito pouco tempo atrás um resultado assim
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet
FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal
22
somente era possível conseguir após dezenas ou centenas de linhas de código. A
tendência é que, cada vez mais os componentes ou serviços de software, façam o
trabalho de “programação básica” deixando para os desenvolvedores o trabalho de
concepção, construção com componentes e apenas a programação de regras
específicas da aplicação ou do negócio, que por sua vez também poderão ser
encapsuladas em componentes. Sim, a tecnologia estará cada vez mais
“componentizada”.
Resultado Final do Exercício 2
Exercício 3
Analise bem os dois primeiros exercícios e, baseando-se neles, construa um novo
formulário Web que permita, simultaneamente, a consulta, validação de dados, inclusão,
atualização e exclusão de registros da tabela UNIDADE do banco de dados EAD5881.
Neste exercício, em vez de aceitar os nomes padrões que o Visual Studio fornece para cada
componente, identifique-os de forma mais adequada através da propriedade ID de cada
componente na janela de Propriedades.
Para saber como adicionar um novo formulário ao seu projeto consulte o início do exercício
4.
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet
FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal
23
Exercício 4
Finalmente, completando a nossa já “mega” aplicação, neste exercício vamos criar os
formulários para a consulta, edição, exclusão e adição de registros nas tabelas
TIPOPESSOA, MUNICIPIO, UF e PAIS. Nesta apostila apresentaremos apenas a solução
para o primeiro caso, ou seja, da tabela TIPOPESSOA. As demais podem ser resolvidas
seguindo exatamente o mesmo procedimento e será a sua tarefa.
1. Abra o seu projeto no Visual Studio. Se por acaso ele já estiver aberto, feche o
formulário que estiver sendo editado pois criaremos um novo.
2. No menu principal escolha as opções Project e Add New Item para que seja
apresentada a caixa de diálogo ilustrada a seguir.
3. Escolha na seção Templates a opção Web Form, pois estaremos criando um novo
formulário Web. Na parte inferior altere o nome do formulário a ser criado para
WebTipoPessoa.aspx. Para finalizar clique o botão Add, para adicionar o novo
formulário ao seu projeto.
Adição de Novo Formulário – WebTipoPessoa.aspx – no Projeto da Aplicação
4. O novo formulário criado será automaticamente editado na janela Design do Visual
Studio, de forma semelhante ao primeiro exercício.
5. Como este formulário será utilizado para consultar, atualizar, excluir e inserir tipos
de pessoas, na janela Server Explorer selecione a tabela TIPOPESSOA e arraste-a
para dentro da marcação Div do formulário.
6. Como você já devia esperar, o Visual Studio automaticamente insere um
componente SqlDataSource para obter os dados da tabela TIPOPESSOA do banco
de dados e um componente GridView para apresentá-los ao usuário.
EAD-5881 – Tecnologia de Informática - Laboratório de Tecnologia Internet
FEA/USP – Prof.Dr. Antonio Geraldo da Rocha Vidal
24
7. No menu de configuração do GridView, que deverá estar sendo apresentado, como
ilustra a figura a seguir, marque as opções Enable Paging (paginação), Enable
Sorting (ordenação), Enable Editing (edição ou alteração) e Enable Deleting
(exclusão de registros).
8. Na opção Auto Format, escolha um bonito padrão visual para apresentação dos
dados da tabela TIPOPESSOA e clique OK.
9. Altere também os cabeçalhos de cada coluna escolhendo a opção Edit Columns e
alterando a propriedade Header Text. Exclua a última coluna (codPessoa) pois ela
não será necessária.
GridView e SqlDataSource para a Tabela TIPOPESSOA
10. Pronto agora é só executar este formulário clicando o botão Start ( > seta verde)
logo abaixo do menu principal.
11. Faltou um botão para inserção de novos registros? Sim, mas essa façanha será tarefa
sua, mas claro, com apoio do professor.
Caso você tenha sobrevivido, parabéns!
Finalizamos aqui o nosso Laboratório de Aplicações Web com a nossa pequena
aplicação exemplo concluída. Mas certamente você ainda precisa completá-la,
concluindo os formulários Web de cada tabela e poderá criar um formulário inicial
ou principal que apresente um menu de opções para o usuário selecionar o
formulário ou função que deseja. Mas isso já está além do escopo destes exercícios
exemplo....