portalmemoriadb

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
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
Atividade ASP.NET
Portal da Memoria
Criação de um banco de dados para o portal
1.
2.
3.
Para criar um novo banco de dados selecione com o botão direito
na pasta Database a opção “New database”.
Informe em “Database Name” nome “PortalMemoria” para o novo
banco de dados a ser criado. Aceite as demais opções padrões e
confirme.
O novo banco de dados é apresentado
conforme pode ser visto na figura ao lado
Atividade ASP.NET
Portal da Memoria
Criação de uma tabela no banco de dados
1.
2.
3.
4.
Expanda a pasta Portal memória para ter acesso a estrutura do
banco de dados.
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.
Selecione com o botão direito a pasta Tables e escolha a opção
“New Table”.
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)
Atividade ASP.NET
Portal da Memoria
Criação de uma tabela no banco de dados
5.
6.
Salve a tabela com nome
Contato.
A tela do SQL Server
Mananger deverá estar
conforme apresentado
ao lado.
Atividade ASP.NET
Portal da Memoria
Adicione a página de contato ao portal
1.
2.
3.
4.
5.
Abra o projeto do Portal da Memoria
Adicione uma página de nome WebFormContato.aspx vinculada à
página mestre SiteMaster.master
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.
Altere o nome dos componentes para TextBoxNome, TextBoxEmail,
RadioButtonListIntencao, TextBoxAssunto e TextBoxMensagem.
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.
Atividade ASP.NET
Portal da Memoria
Página de
contato
Atividade ASP.NET
Portal da Memoria
Configuração de conexão com o banco de dados
1.
2.
3.
4.
5.
6.
7.
Adicione ao formulário um componente SQLDataSource.
Selecione a opção “Configure Data Source” no menu do
componente. Essa opção irá executar um wizard de configuração
de conexão.
Selecione o botão “new connection” no wizard. A tela de
configuração de conexão aparecerá.
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.
Na opção Server Name digite “(local)”.
Selecione “Use SQL Server Authentication”.
Digite em “User name” o conteúdo “aluno” e em Password o
conteúdo “senha”.
Atividade ASP.NET
Portal da Memoria
Configuração de conexão com
o banco de dados
1.
2.
3.
4.
Marque a opção “Save My Password”.
Informe o nome do banco de dados
“PortalMemoria”.
Clique no botão “Test Connection” para
validar a conexão.
Visualize a String de Conexão gerada
Data Source=(local);Initial
Catalog=PortalMemoria;Persist
Security Info=True;User
ID=aluno;Password=senha
5.
Salve a conexão com o nome
“PortalMemoriaConnectionString”
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)";
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.
2.
Observe que não há nenhuma mensagem para informar que o
comando foi realizado com sucesso ou se houve erro.
Após clicar no botão, execute o SQL Server Manager e verifique
se os dados foram inseridos no banco de dados
Atividade ASP.NET
Portal da Memoria
Adicionando uma página de mensagem ao portal
1.
2.
3.
Adicione uma página de nome WebFormMensagem.aspx vinculada à
página mestre SiteMaster.master
Adicione um componente de rótulo na página para apresentar a
mensagem. Altere o nome do componente para LabelMensagem.
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;
}
}
Atividade ASP.NET
Portal da Memoria
Adicionando uma mensagem na página de Contato
1.
2.
Abra a página de contato.
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);
}
Atividade ASP.NET
Portal da Memoria
Criação de uma tabela para cadastrar a agenda
1.
2.
Execute o SQL Server Manager e abra o banco de dados
PortalMemoria.
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]
Atividade ASP.NET
Portal da Memoria
Introduzindo dados em uma tabela
1.
2.
Utilizando o SQL Server Manager selecione a tabela Agenda criada
e acesse a opção “Edit Rows” para lançar dados na tabela
Acrescente as informações de duas ou mais entradas da agenda
conforme apresentado abaixo.
Atividade ASP.NET
Portal da Memoria
Adicionando uma página de agenda ao portal
1.
2.
3.
4.
5.
Adicione uma página de nome WebFormAgenda.aspx vinculada à
página mestre SiteMaster.master
Adicione à página um rótulo e um GridView. Altere a propriedade
Text do rótulo para “Atividades em Nível Local”.
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.
Selecione a String de Conexão PortalMemoriaConnectionString.
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.
Atividade ASP.NET
Portal da Memoria
Adicionando uma cláusula WHERE a um DataSource
Atividade ASP.NET
Portal da Memoria
Adicionando um grid para a agenda Nacional
1.
2.
3.
4.
5.
Adicione à página um segundo rótulo e outro GridView. Altere a
propriedade Text do rótulo para “Atividades em Nível Nacional”.
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.
Selecione a String de Conexão PortalMemoriaConnectionString.
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.
Ajuste o leiaute dos componentes GridView para uma melhor
visualização das Agendas
Atividade ASP.NET
Portal da Memoria
Página de Agenda
Atividade ASP.NET
Portal da Memoria
Adicionando uma página para cadastrar cronologia
1.
2.
3.
4.
5.
Adicione uma página de nome WebFormCadCronologia.aspx
vinculada à página mestre SiteMaster.master.
Acesse a página mestre e adicione no componente “Menu1” o itm de
menu “Cadastrar Cronologia”. Associe este item a página
WebFormCadCronologia.asp.
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.
Altere o nome dos componentes para TextBoxAno, TextBoxTitulo,
TextBoxDescricao, TextBoxLegenda e FileUploadImagem.
Adicione um componente de botão e atribua o texto “Enviar”.
Atividade ASP.NET
Portal da Memoria
Adicionando uma página para cadastrar cronologia
6.
7.
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.
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]
Atividade ASP.NET
Portal da Memoria
Adicionando uma página para cadastrar cronologia
8.
9.
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.
Crie um manipulador para o evento de clique do botão e insira o
código a seguir.
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)";
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);
Atividade ASP.NET
Portal da Memoria
Exercício
1.
2.
3.
4.
5.
6.
Criar página para cadastrar informações de agenda
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
Criar página para cadastro de usuário (utilizando a
estrutura de usuário do asp.net)
Criar página para login de usuário
Liberar acesso às páginas de cadastrar informações de
agenda e de cadastrar cronologia apenas para usuários
cadasrados
Permitir acesso anônimo para demais páginas