Atividade ASP.NET Portal da Memoria Atividade Desenvolver uma aplicação ASP.NET com funcionalidade similar à existente no site centenário.ifrn.edu.br utilizando.

Apresentação em tema: "Atividade ASP.NET Portal da Memoria Atividade Desenvolver uma aplicação ASP.NET com funcionalidade similar à existente no site centenário.ifrn.edu.br utilizando."— Transcrição da apresentação:

1 Atividade ASP.NET Portal da Memoria Atividade Desenvolver uma aplicação ASP.NET com funcionalidade similar à existente no site centenário.ifrn.edu.br utilizando Banco de Dados Objetivo Integrar os conhecimentos em programação ASP.NET apresentados através do desenvolvimento de um site

2 Atividade ASP.NET Portal da Memoria Criação de um banco de dados para o portal Execute o SQL Server Manager e entre os parâmetro de login apresentados abaixo. Server name: (local) Authentication: SQL Server Authentication Login: sa Senha: senha A tela de entrada do SQL Server Mananger é apresentada e a janela de Object Explorer apresenta as entidades do servidor do banco de dados. A pasta Database apresenta os bancos de dados armazenados no servidor

3 Atividade ASP.NET Portal da Memoria Criação de um banco de dados para o portal 1. Para criar um novo banco de dados selecione com o botão direito na pasta Database a opção “New database”. 2. Informe em “Database Name” nome “PortalMemoria” para o novo banco de dados a ser criado. Aceite as demais opções padrões e confirme. 3. O novo banco de dados é apresentado conforme pode ser visto na figura ao lado

4 Atividade ASP.NET Portal da Memoria Criação de uma tabela no banco de dados 1. Expanda a pasta Portal memória para ter acesso a estrutura do banco de dados. 2. Será criada agora uma tabela para armazenar as informações de Contato lançadas na página de contato do site. Será necessário armazenar o nome do contato, o e-mail, a intenção o assunto e a mensagem. 3. Selecione com o botão direito a pasta Tables e escolha a opção “New Table”. 4. Informe a estrutura da tabela conforme apresentado a seguir: IDContato, int, Allow Null Desmarcado, Column properties: Is Identity = Yes Contato, varchar(100) Email, varchar(100) Intencao, varchar(100) Assunto, varchar(100) Mensagem, varchar(250)

5 Atividade ASP.NET Portal da Memoria Criação de uma tabela no banco de dados 5. Salve a tabela com nome Contato. 6. A tela do SQL Server Mananger deverá estar conforme apresentado ao lado.

6 Atividade ASP.NET Portal da Memoria Adicione a página de contato ao portal 1. Abra o projeto do Portal da Memoria 2. Adicione uma página de nome WebFormContato.aspx vinculada à página mestre SiteMaster.master 3. Adicione componentes na página para solicitar a digitação das informações de nome do contato, e-mail, intenção, assunto e mensagem. Adicione um botão para enviar as informações de contato. A figura do próximo slide apresenta a página de contato. 4. Altere o nome dos componentes para TextBoxNome, TextBoxEmail, RadioButtonListIntencao, TextBoxAssunto e TextBoxMensagem. 5. Para podermos criar o manipulador para o evento clique do botão e incluir o código que irá cadastrar no banco de dados na informações lançadas na página de contato, deveremos criar a conexão com o banco de dados conforme foi feito no capítulo 11.

7 Atividade ASP.NET Portal da Memoria Página de contato

8 Atividade ASP.NET Portal da Memoria Configuração de conexão com o banco de dados 1. Adicione ao formulário um componente SQLDataSource. 2. Selecione a opção “Configure Data Source” no menu do componente. Essa opção irá executar um wizard de configuração de conexão. 3. Selecione o botão “new connection” no wizard. A tela de configuração de conexão aparecerá. 4. Observe se o DataSource tem selecionado a opção “Microsoft SQL Server (SqlClient)”. Em caso contrário, clique no botão “Change” e selecione este tipo de Data Source. 5. Na opção Server Name digite “(local)”. 6. Selecione “Use SQL Server Authentication”. 7. Digite em “User name” o conteúdo “aluno” e em Password o conteúdo “senha”.

9 Atividade ASP.NET Portal da Memoria Configuração de conexão com o banco de dados 1. Marque a opção “Save My Password”. 2. Informe o nome do banco de dados “PortalMemoria”. 3. Clique no botão “Test Connection” para validar a conexão. 4. Visualize a String de Conexão gerada 5. Salve a conexão com o nome “PortalMemoriaConnectionString” Data Source=(local);Initial Catalog=PortalMemoria;Persist Security Info=True;User ID=aluno;Password=senha

10 Atividade ASP.NET Portal da Memoria Codificação para gravar contato no banco de dados // Acessa a configuração da conexão string s = ConfigurationManager.ConnectionStrings ["PortalMemoriaConnectionString"].ConnectionString; // Cria Conexão com banco de dados SqlConnection conn = new SqlConnection (s); // Abre conexão com o banco de dados conn.Open(); // Cria comando SQL SqlCommand com = conn.CreateCommand(); // define SQL do comando com.CommandText = "INSERT INTO Contato(Contato, email, intencao, assunto, mensagem) VALUES (@Contato, @email, @intencao, @assunto, @mensagem)";

11 Atividade ASP.NET Portal da Memoria Codificação para gravar contato no banco de dados // define valor dos parametros com.Parameters.AddWithValue("@Contato", TextBoxNome.Text); com.Parameters.AddWithValue("@email", TextBoxEmail.Text); com.Parameters.AddWithValue("@intencao", RadioButtonListIntencao.SelectedValue); com.Parameters.AddWithValue("@assunto", TextBoxAssunto.Text); com.Parameters.AddWithValue("@mensagem", TextBoxMensagem.Text); // Executa o comando de inserção com.ExecuteNonQuery(); Mensagem de execução 1. Observe que não há nenhuma mensagem para informar que o comando foi realizado com sucesso ou se houve erro. 2. Após clicar no botão, execute o SQL Server Manager e verifique se os dados foram inseridos no banco de dados

12 Atividade ASP.NET Portal da Memoria Adicionando uma página de mensagem ao portal 1. Adicione uma página de nome WebFormMensagem.aspx vinculada à página mestre SiteMaster.master 2. Adicione um componente de rótulo na página para apresentar a mensagem. Altere o nome do componente para LabelMensagem. 3. No evento Page_Load da página introduza o código abaixo protected void Page_Load(object sender, EventArgs e) { string msgTipo = Request.QueryString["msgTipo"]; string msg = Request.QueryString["msg"]; if ((msg != null) && (msgTipo != null)) { LabelMensagem.Text = msg; if (msgTipo == "ok") LabelMensagem.ForeColor = Color.Black; else if (msgTipo == "erro") LabelMensagem.ForeColor = Color.Red; }

13 Atividade ASP.NET Portal da Memoria Adicionando uma mensagem na página de Contato 1. Abra a página de contato. 2. Altere o código do manipulados do botão para incluir um bloco try..catch e o redirecionamento para a página de mensagem conforme mostrado a seguir protected void Button1_Click(object sender, EventArgs e) { string redirect; try { (aqui deve ser copiado o código existente dos slides 10 e 11) // mensagem de sucesso redirect = "~\\WebFormMensagem.aspx?msgTipo=ok&msg=Contato Enviado com Sucesso"; } catch (Exception ex) { // mensagem de erro redirect = "~\\WebFormMensagem.aspx?msgTipo=erro&msg=Erro Enviando Contato"; } Response.Redirect(redirect); }

14 Atividade ASP.NET Portal da Memoria Criação de uma tabela para cadastrar a agenda 1. Execute o SQL Server Manager e abra o banco de dados PortalMemoria. 2. Selecione com o botão direito a pasta Tables e escolha a opção “New Table” e informe a estrutura da tabela, ou, execute o script de criação da tabela apresentado abaixo CREATE TABLE [dbo].[Agenda]( [IDAgenda] [int] IDENTITY(1,1) NOT NULL, [AgendaTipo] [varchar](50) NULL, [DataInicio] [datetime] NULL, [DataFim] [datetime] NULL, [Horario] [varchar](50) NULL, [Atividade] [varchar](100) NULL, [Descricao] [varchar](250) NULL, [Local] [varchar](100) NULL ) ON [PRIMARY]

15 Atividade ASP.NET Portal da Memoria Introduzindo dados em uma tabela 1. Utilizando o SQL Server Manager selecione a tabela Agenda criada e acesse a opção “Edit Rows” para lançar dados na tabela 2. Acrescente as informações de duas ou mais entradas da agenda conforme apresentado abaixo.

16 Atividade ASP.NET Portal da Memoria Adicionando uma página de agenda ao portal 1. Adicione uma página de nome WebFormAgenda.aspx vinculada à página mestre SiteMaster.master 2. Adicione à página um rótulo e um GridView. Altere a propriedade Text do rótulo para “Atividades em Nível Local”. 3. Acesse no menu do GridView a opção “Choose Data Source” e escolha “New Data Source”. Escolha o tipo SQL Database e aceite o nome padrão SqlDataSource1. 4. Selecione a String de Conexão PortalMemoriaConnectionString. 5. Selecione a tabela Agenda e acrescente uma cláusula WHERE de forma que seja filtrados os registro onde o campo AgendaTipo contenha o valor “LOCAL”. Veja figura no próximo slide.

17 Atividade ASP.NET Portal da Memoria Adicionando uma cláusula WHERE a um DataSource

18 Atividade ASP.NET Portal da Memoria Adicionando um grid para a agenda Nacional 1. Adicione à página um segundo rótulo e outro GridView. Altere a propriedade Text do rótulo para “Atividades em Nível Nacional”. 2. Acesse no menu do GridView a opção “Choose Data Source” e escolha “New Data Source”. Escolha o tipo SQL Database e aceite o nome padrão SqlDataSource2. 3. Selecione a String de Conexão PortalMemoriaConnectionString. 4. Selecione a tabela Agenda e acrescente uma cláusula WHERE de forma que seja filtrados os registro onde o campo AgendaTipo contenha o valor “NACIONAL. 5. Ajuste o leiaute dos componentes GridView para uma melhor visualização das Agendas

19 Atividade ASP.NET Portal da Memoria Página de Agenda

20 Atividade ASP.NET Portal da Memoria Adicionando uma página para cadastrar cronologia 1. Adicione uma página de nome WebFormCadCronologia.aspx vinculada à página mestre SiteMaster.master. 2. Acesse a página mestre e adicione no componente “Menu1” o itm de menu “Cadastrar Cronologia”. Associe este item a página WebFormCadCronologia.asp. 3. Adicione componentes na página para solicitar a digitação das informações de cronologia: Ano, Título, Descrição, Legenda e Arquivo com foto. Utilize componentes TextBox para as informações tipo texto e o componente FileUpload para selecionar o arquivo com a foto. 4. Altere o nome dos componentes para TextBoxAno, TextBoxTitulo, TextBoxDescricao, TextBoxLegenda e FileUploadImagem. 5. Adicione um componente de botão e atribua o texto “Enviar”.

21 Atividade ASP.NET Portal da Memoria Adicionando uma página para cadastrar cronologia 6. Altere a propriedade TextMode do componente TextBoxDescricao para MultiLine e aumente o tamanho do componente para permitir uma melhor digitação de seu conteúdo. 7. Adicione no banco de dados uma tabela de nome Cronologia para cadastrar as informações de cronologia submetidas pelo formulário. Segue abaixo o comando para criar a tabela. CREATE TABLE [dbo].[Cronologia]( [IDCronologia] [int] IDENTITY(1,1) NOT NULL, [Ano] [int] NOT NULL, [Titulo] [varchar](100) NULL, [Descricao] [varchar](250) NULL, [Legenda] [varchar](100) NULL, [Arquivo] [varchar](100) NULL ) ON [PRIMARY]

22 Atividade ASP.NET Portal da Memoria Adicionando uma página para cadastrar cronologia 8. Adicione à aplicação uma pasta de nome “Cronologia” onde serão arquivados o arquivos com as imagens. No banco de dados constará apenas o nome dos arquivos. 9. Crie um manipulador para o evento de clique do botão e insira o código a seguir.

23 Atividade ASP.NET Portal da Memoria Código para cadastrar cronologia string redirect; string filename; try { // Acessa a configuração da conexão string s = ConfigurationManager.ConnectionStrings ["PortalMemoriaConnectionString"].ConnectionString; // Cria Conexão com banco de dados SqlConnection conn = new SqlConnection(s); // Abre conexão com o banco de dados conn.Open(); // Cria comando SQL SqlCommand com = conn.CreateCommand(); // define SQL do comando com.CommandText = "INSERT INTO Cronologia(Ano, Titulo, Descricao, Legenda, Arquivo) VALUES (@Ano, @Titulo, @Descricao, @Legenda, @Arquivo)";

24 Atividade ASP.NET Portal da Memoria Código para cadastrar cronologia // define valor dos parametros com.Parameters.AddWithValue("@Ano", Convert.ToInt32(TextBoxAno.Text)); com.Parameters.AddWithValue("@Titulo", TextBoxTitulo.Text); com.Parameters.AddWithValue("@Descricao", TextBoxDescricao.Text); com.Parameters.AddWithValue("@Legenda", TextBoxLegenda.Text); com.Parameters.AddWithValue("@Arquivo", FileUploadImagem.FileName); // Executa o comando de inserção com.ExecuteNonQuery(); // Salva arquivo na pasta Cronologia filename = Request.PhysicalApplicationPath + "Cronologia\\" + FileUploadImagem.FileName; FileUploadImagem.SaveAs(filename); // mensagem de sucesso redirect = "~\\WebFormMensagem.aspx?msgTipo=ok&msg=Cronologia Enviada com Sucesso"; } catch (Exception ex) { // mensagem de erro redirect = "~\\WebFormMensagem.aspx?msgTipo=erro&msg=Erro Enviando Cronologia"; } Response.Redirect(redirect);

25 Atividade ASP.NET Portal da Memoria Exercício 1. Criar página para cadastrar informações de agenda 2. Criar página para apresentar Cronologia a partir das informações gravadas no banco de dados e das imagens copiadas na pasta Cronologia da aplicação 3. Criar página para cadastro de usuário (utilizando a estrutura de usuário do asp.net) 4. Criar página para login de usuário 5. Liberar acesso às páginas de cadastrar informações de agenda e de cadastrar cronologia apenas para usuários cadasrados 6. Permitir acesso anônimo para demais páginas