Laboratório de Tecnologia Internet. Construção Aplicativos para a Web

Transcrição

1 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 - 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.

2 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

3 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

4 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 EAD 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

5 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 EAD 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.

6 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).

7 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.

8 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

9 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), ( ). 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

10 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

11 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.

12 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

13 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

14 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

15 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

16 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

17 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, 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, 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 corrigilo?? 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!!!!.

18 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

19 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

20 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.

21 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

22 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.

23 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.

24 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...