Nesta semana veremos como o Banco de Dados pode ser inserido em um projeto WEB de ASP com CSharp. primeiramente devemos possuir o SQL Server no computador, se você possui uma versão professional do Microsoft Visual Studio provavelmente terá a instalação lite do SQL no computador assim como os frameworks necessários para trabalhos futuros. Deste modo usaremos a versão 2010 do MVS.
Veremos um passo a passo para criarmos uma aplicação com Banco de Dados, vamos!
Vamos criar um projeto no MVS 2010 Professional... veja;
escolha a opção "New Web Site..." como na imagem acima... depois escolha uma página vazia como nas aulas anteriores, deste modo não teremos "Master.page" etc...veja;
... não esqueça de que é nesta parte que você pode dar nome ao projeto, escolher o framework etc...agora vamos observar o que aparece...
...
seu trabalho aparece com isso no canto direito, o que significa que temos um projeto formado mas não temos página alguma ainda, então vamos inserir um formulário web, veja...
Clique com o botão direito do mouse sobre seu projeto, o que na imagem vemos como "C:\...\WebSite4\", deste modo aparece a opção de adicionar um novo item ao projeto.
Veja as opções de inserir objetos...
Agora escolha inserir novo item e nas novas opções, escolha WebForm, lembrando que estamos trabalhando com CSharp.
Veja o que teremos então:
No Solution Explorer agora aparece o default.aspx, e, se abrirmos(clicando no sinal de + na esquerda do nome) teremos isso:
Note que agora temos as partes defalut.aspx e default.aspx.cs.
Sendo que...
Agora temos os lugares para inserir os códigos apropriadamente. vamos inserir o Banco de dados da mesma forma, veja.
Depois de clicar com o botão direito e pedir para inserir um novo objeto no projeto, escolha a opção SQL Server Database.
Uma mensagem irá avisá-lo de que melhor é ter o Banco dentro de uma pasta "App_Data" veja:
O aviso informa que uma pasta será criada para inserirmos o Banco de Dados lá e de lá controlarmos as alterações necessárias OK!, então clique em SIM e observe que no Solution Explorer aparece a pasta com o APP_Data que o aviso mostrou... observe na imagem abaixo...
Ok, agora vamos observar os próximos passos necessários para o projeto. Vamos inserir dados no Banco de Dados criado.Observe no canto esquerdo o novo campo "Server Explorer", aqui podemos manipular o Banco de Dados. Clique com o botão direito sobre a opção tabela e selecione criar uma nova tabela veja:
Deste modo poderemos inserir a tabela no banco de dados... note...
Agora podemos inserir os nomes dos campos e seus respectivos tipos. Veja a tabela preenchida.
Note que os campos foram criados e seus tipos inseridos, agora precisamos definir a chave primária e o incremento automático para o primeiro campo (cont) para prosseguir veja as opções.
Chave Primária:
Depois de selecionar o campo "cont" escolha a opção de chave primária como na imagem acima. Agora vamos inserir a opção de incremento automático no mesmo campo. Veja:
No campo "Identity Specification" clique no + na esquerda para mais opções a coloque "yes" no campo "Is Identity". Veja;
Agora podemos salvar a tabela e prosseguir. Salve normalmente no ícone "disquete" na parte de Menu do Sistema MVS.
Depois de clicar em salvar a tabela o programa pede para que você coloque um nome na tabela que criou.
Coloque o nome e não esqueça de ser um nome que lhe ajude a manipular os dados. Agora vamos utilizar o que criamos no Site. Veja o necessário para isso.
Neste ponto temos o Banco e a página, agora vamos indexar os itens do banco com objetos na página para inserir ou mostrar a tabela. Veja como...
Podemos fechar a guia da tabela e do Server Explorer, e, abrir o default.aspx para ver o que temos.
Vamos inserir uma tabela para facilitar o trabalho ainda mais veja;
Com o default.aspx em modo gráfico, selecione a opção na guia tabela, depois inserir tabela. Crie uma tabela com 5 linhas e 2 colunas.
Deste modo;
Note que inserimos as informações na tabela em modo gráfico, sendo o nome, o rm, o componente e o dia, depois inserimos o Botão (escolhendo-o na ToolBox) e colocamos na última linha da tabela. Apenas mudamos a propriedade text do botão 1 para ":: Registro ::" e mais nada.
Agora vamos inserir um Textbox para cada campo da tabela que queremos que seja registrado, no caso, nome, rm, dia e componente. veja;
Ficou assim a tabela com os objetos e informações... agora vamos criar o indexador com o banco de dados e a página com o objeto sqldatasource. veja;
No ToolBox na Guia DATA escolha a opção mostrada acima e insira na página com a tabela. Veja;
Agora temos como indexar os campos com a página, seleciona o objeto sqldatasource e abra a opção "Configure DataSource" Assim;
Selecione configurar para o próximo passo.
escolha o banco de dados e depois NEXT...
A conexão padrão é essa para o projeto, NEXT...
Selecione a opção Specify... para inserir ou mostrar as opções da tabela do banco em bloco e, NEXT...
Agora Selecione "Query Builder..." para configurar as buscar na tabela. Veja;
Escolha a tabela para ver os campos Add depois close. Agora selecione todos os campos da tabela e dê um OK...
A tela anterior reaparece, escolha a guia INSERT, e a opção "Query Builder" novamente, selecione a tabela e os campos que quer inserir, neste caso serão apenas os campos que o usuário escreverá como, nome, componente, dia e RM, o incremento automático fica de fora. Veja;
Note que desta vez estamos na GUIA INSERT, e, deixamos a opção de cont de fora.
Feito as escolhas dê um OK. Note que mais uma vez a tela de query voltou só que agora com o insert, vamos inserir os campos que queremos alterar quando digitarmos os dados da seguinte forma. Observe que a insert query está assim;
Observe a linha de busca do INSERT INTO... devemos preencher os campos com o "@" antes dos campos. Veja, temos isso:
INSERT INTO cadastroDP(Nome, RM, Componente, Dia) VALUES (,,,)
e devemos escrever isso:
INSERT INTO cadastroDP(Nome, RM, Componente, Dia) VALUES (@Nome,@RM,@Componente,@Dia)
- Correto!!!
agora vamos para NEXT...
Agora vamos testar a conexão com as tabelas... clique em test query.
Com o sucesso termine o query em Finish, como saber se deu certo? Certo está se os campos da tabela aparecem na parte cinza escura do quadro. Próximo...
Agora novamente em default.aspx em modo gráfico, selecione o sqldatasource1 e na guia de propriedades escolha a opção InsertQuery.
No quadrinho...
Em parameters, escolha o campo e em parameters Source escolha "CONTROL" para indexar o textbox da página com o campo da tabela...Veja o quadro completo.
Não esqueça de selecionar cada campo, mudar para control e depois selecionar o textbox correspondente na página para a entrada ser feita. Terminado de indexar dê um ok.
Criamos a entrada - o procedimento, agora vamos criar a ação no botão para realizar o processo na página.
veja o próximo passo.
Com o modo gráfico, dê um duplo clique no botão para irmos a página default.aspx.cs, lugar onde colocamos os códigos dos objetos do projeto. Lá insira o código como mostrado abaixo...
Limpamos o Label1 quando carregarmos a página e inserimos no código do botão o label1 com o texto para informar se o processo funcionou, além de inserir o código de incluir nos campos os dados dos textboxs com o comando "SqlDataSource1,Insert( );". Pronto esta parte acabou. Mas vamos inserir um novo botão para vermos os dados da tabela. Para isso vá ao modo gráfico novamente, insira um botão e um objeto da guia DATA chamado Gridview (para exibir a tabela do Banco de Dados.
Veja o modo gráfico como ficou com os objetos;
Agora com o segundo botão alterado para VER e o objeto gridview no modo gráfico. No objeto gridview, devemos indexar ao datasource que temos, onde a tabela está. Para isso selecione o objeto e abra sua guia de opções no campo "Choose Data Source" escolha o que criamos. e a tabela mudará sozinha para a que está no banco de dados. Dê um duplo clique no botão 2 - VER, para exibir o gridview. Veja;
agora epanas quando clicarmos no botão VER o grid aparece... Veja o resultado no navegador.
Vemos que a tabela com os campos estão disponíveis para preenchimento...
... e depois de preenchidos registramos... lembrando de que quando o registro funcionar o OK aparece...
... e depois de alguns registros podemos ver a tabela. Veja;
O princípio é esse!...
Pronto! Pronto!!!
Nenhum comentário:
Postar um comentário