Criando um projeto web

Prévia do material em texto

DESENVOLVIMENTO DE 
SOFTWARE PARA INTERNET
Prof. Luciani Vieira
Iniciando o IDE
• Como a maioria dos instaladores, o VWDE 
adiciona links ao menu Windows.
• Para rodar o ambiente de desenvolvimento 
integrado (IDE), clique no link do Visual Web 
Developer 2010 Express Edition no menu 
principal.
• A tela de apresentação aparece e o IDE ganha 
vida. Isso pode demorar alguns instantes 
(principalmente na primeira vez), pois existem 
arquivos paralelos a serem criados e 
configurações a serem gravadas.
Toolbox
Menu
Criando um site Web ASP.NET
• 1. Selecione FileNew Web Site.
• A caixa de diálogo New Web Site será exibida.
• 2. Na seção Templates, no centro da janela, 
selecione o modelo ASP.NET Web Site;
• 3. Verifique se File System está selecionado na 
lista dropdown Web location, em baixo.
• 4. Certifique-se de que Visual Basic esteja 
selecionado na lista drop-down Language, à 
esquerda.
• 5. Clique em OK.
• O IDE trabalha e cria o site Web, uma página Web 
inicial e outros arquivos.
• Como mostrado anteriormente, o IDE tem três 
áreas importantes:
– A Toolbox e outras guias apertadas no lado esquerdo 
e fáceis de não serem notadas. A Toolbox pode ser 
visualizada quando você passa o mouse sobre sua 
guia. Experimente!
– A página default.aspx abre no editor de página Web 
(no centro).
– Grupos de pequenas janelas à direita, inclusive uma 
intitulada Solution Explorer.
O editor de página Web oferece três 
visualizações:
• Design View: Fornece uma visualização gráfica 
da página que se parece, de certa forma, com 
o que os usuários vêem no navegador.
• Source View: Mostra o código fonte da página, 
inclusive o mark-up HTML.
• Split View: Mostra a visualização gráfica da 
página em um lado e o código fonte no outro. 
Adicionando um controle ASP.NET
• Você pode temperar um pouco a página Web, 
branca e triste, adicionando um controle a ela. 
• Um controle é um objeto de uma página que 
renderiza o código ou o markup que um 
navegador compreende. 
• Controles como rótulos, listas drop-down, 
grades e caixas de textos são os objetos que 
deixam as páginas Web interessantes, 
dinâmicas e úteis.
Criando um Site
ASP.NET Útil
• Criando um projeto Web
• Criando e utilizando uma base de dados SQL 
Server Express
• Gerando uma página Web baseada em uma base 
de dados
Descrição
• A maioria das aplicações Web ASP.NET gira em 
torno de dados e esta não é exceção. 
• Neste exemplo irei apresentá-lo à base de 
dados SQL Server, da Microsoft, onde você 
armazenará as informações de DVDs. 
• Os dados não servem para muita coisa se não 
puder exibi-los e é aí que entram os controles 
de dados ASP.NET.
• O recurso impressionante desta aplicação 
Web é a maneira como a cria sem escrever 
qualquer código. 
• Existe código na aplicação, só que você deixa o 
Visual Web Developer (VWD) escrevê-lo de 
acordo com suas instruções.
Criando o Projeto Web DVD
• Siga estes passos para criar o projeto Web 
JulieDVD:
• 1. No Visual Web Developer, selecione 
FileNew Web Site.
• Na caixa de diálogo New Web Site, selecione 
o template Empty Web Site, como mostrado 
na Figura.
Criando o Projeto Web DVD
Criando o Projeto Web DVD
• 3. Configure o campo Location para File 
System e o campo Language para Visual 
Basic.
• 4. Na caixa Location, à direita, digite o nome 
de um novo diretório (por exemplo: 
c:\JulieDVD, como usado na Figura ) ou 
selecione um diretório existente para 
armazenar o projeto.
• 5. Clique em OK.
ATENÇÃO
• Não insira espaços ou pontuação nos nomes 
de pastas ou arquivos de aplicações Web.
• Embora o servidor Web e o navegador possam 
permiti-los, os arquivos com caracteres não 
alfabéticos podem ser difíceis de usar.
• 1. No Solution Explorer, clique com o botão 
direito na pasta do projeto em seguida, 
clique em Add New Folder.
• 2. Modifique o nome da pasta para App_Data
e pressione enter.
• O ícone irá mudar.
Utilizando uma Base de Dados SQL
Server Express
• Para adicionar uma base de dados SQL Server Express aos seu 
projeto Web, siga estes passos:
• 1. No Solution Explorer, clique com o botão direito na pasta 
App_Data (criada na seção anterior), em seguida, clique em Add
New Item.
• 2. Na janela Add New Item, selecione SQL Server Database.
• 3. Modifique o nome da base de dados para JulieDVD.mdf e clique 
em Add.
• O VWD o alerta de que você deve inserir uma base de dados na 
pasta especial App_Data. O ASP.NET oferece permissões de 
segurança adequadas para a pasta App_Data.
• 4. Clique Yes para inserir a base de dados na pasta App_Data.
O IDE vai trabalhar e gerar uma base de dados vazia.
Adicionando uma tabela à base
de dados
• Para adicionar e configurar uma tabela de 
base de dados, abra o Database/Server 
Explorer (ViewDatabase/Server Explorer), 
clique com o botão direito sobre o tópico 
Tables (Tabelas) e, no menu de contexto, 
selecione Add New Table. 
• Como mostrado na Figura, o Table Designer 
será exibido. É aí que irá configurar as colunas 
da tabela.
Tabela
• o Table Designer será exibido. É aí que irá 
configurar as colunas da tabela.
Adicionando uma coluna de identidade 
no Table Designer
• Para a página JulieDVD, você desejará 
armazenar as seguintes informações:
– Título do filme.
– Descrição do filme.
– Data em que ela adicionou o filme à sua coleção.
– Um identificador exclusivo (ou coluna de 
identidade)
Adicionando uma coluna de identidade 
no Table Designer
• Os primeiros três itens da lista são óbvios, pois 
são informações que quer adicionar e usar. 
• O último item, uma ID, serve principalmente 
para a base de dados. 
• Uma coluna de identidade ajuda a base de 
dados a rastrear os dados de maneira mais 
eficiente.
Adicionando uma coluna de identidade 
no Table Designer
• 1. No espaço em branco abaixo do título Column Name (Nome da 
Coluna), digite ID.
• 2. Na área abaixo de Data Type (Tipo de Dados), digite int.
– Ao configurar o Data Type para int, você está dizendo à base de dados 
para esperar números comuns, como 4 ou 99 nesta coluna.
• 3. Sob Allow Nulls, desselecione a opção.
– Null é um termo nerd para absolutamente nada, zero, e nulo. Ao 
desselecionar Allow Nulls, está dizendo à base de dados para reportar 
um erro quando um programa não inserir algo na coluna.
• 4. Na guia Column Properties (Propriedades da Coluna), expanda o título 
Identity Specification (Especificação da Identidade), como mostrado na 
Figura 3-3, e configure o valor (Is Identity) para Yes.
• 5. Selecione a coluna ID e, a partir do menu Table Designer, selecione Set 
Primary Key.
– Um pequeno ícone de uma chave aparece ao lado do nome da coluna.
Adicionando colunas comuns a uma 
tabela
Feche a janela Table Definition clicando no X no canto superior direito.
O IDE solicita que insira um nome para a tabela.
Digite Movies como nome da tabela, em seguida, clique em
OK.
Configure a tabela como na figura a seguir:
Adicionando dados a uma tabela no 
Query Designer
• Uma base de dados é muito mais interessante 
quando contém dados verdadeiros.
• Você ainda não tem uma página Web para inserir 
dados em uma base de dados, portanto, este é 
um bom momento para mostrar como trabalhar 
diretamente na tabela da base de dados com o 
Query Designer.
• Siga estes passos para adicionar linhas de dados à 
tabela Movies na base de dados dos DVDs de 
Julie:
Adicionando dados a uma tabela no 
Query Designer
• 1. Abra o Database/Server Explorer 
(ViewDatabase/Server Explorer) e navegue 
até o título da tabela Movies (Data 
ConnectionsJulieDVD.mdfTablesMovie
s).
• 2. Clique com o botão direito no título 
Movies e selecioneShow Table Data no menu 
de contexto.
Adicionando dados a uma tabela no 
Query Designer
• A tabela é exibida no Query Designer do VWD
• 3. Na coluna Título, coloque o cursor sobre NULL e digite Italian
Job.
• 4. Aperte a tecla Tab do computador, passando para a coluna 
Description e digite uma descrição.
– O ponto de exclamação vermelho alerta que o que foi digitado até 
agora não está salvo.
• 5. Aperte a tecla Tab, passando para a coluna DateAdded e digite 
uma data completa,
• 6. Aperte a tecla Tab, passando à próxima linha.
Gerando uma Página Web 
Orientada
a Dados
O título diz Gerando ao invés de 
Programando? 
Nesta seção, o VWD irá gerar toneladas de 
código enquanto você arrasta e solta.
Adicionando uma página Web de 
modelo single file
• Para adicionar uma página Web que usa o modelo single 
file, siga estes passos:
• 1. No Solution Explorer, clique com o botão direito no 
nome do projeto, em seguida, selecione Add New Item.
• 2. Na janela Add New Item, selecione o template Web 
Form.
• 3. Digite default.aspx como nome do arquivo.
• 4. Desselecione a caixa para Place Code in Separate File.
– Isto garante que o IDE coloque todo o código dentro do 
arquivo.aspx.
• 5. Clique em Add.
– Uma nova página em branco aparece no IDE.
Utilizando a base de dados para criar
uma página Web
• Ao invés de adicionar controles à página a 
partir da Toolbox, deixe que o IDE faça o 
serviço. 
• Você precisa de uma base de dados SQL 
Server (a versão Express está ótima) para fazer 
esta mágica.
• Para gerar uma interface de usuário baseada 
em uma tabela de base de dados, siga estes 
passos:
• 1. Certifique-se de que a página Web esteja 
aberta na visualização Design.
• 2. No Database/Server Explorer (View database / 
Server Explorer), localize a tabela Movies que 
você criou anteriormente (Data 
ConnectionJulieDVD.mdf TablesMovies).
• 3. Arraste a tabela Movies do Database Explorer e 
solte-a dentro do bloco div na página Web.
• o IDE adiciona dois controles à página: 
– GridView (o controle HTML em forma de tabela) e
– SqlDataSource (representado por um bloco cinza).
Pré-visualizando e revisando a página
gerada a partir da base de dados
• 1. Clique com o botão direito do mouse sobre 
a superfície de design da página e selecione 
View in Browser, no menu de contexto.
• 2. Se for solicitado que salve as alterações 
antes de visualizar o arquivo, clique em Sim.
Servidor
Gerenciando Dados e
Outros CRUD
• Utilizando os menus Tasks (Tarefas)
• Inserindo, classificando, editando e deletando dados
• Formatando uma data
• Utilizando os templates de controle FormView
• Melhorando o desempenho com o UpdatePanel
CRUD em sua página
• Create (Criar): Capacidade de inserir novos 
DVDs na base de dados
• Retrieve (Buscar): Encontrar a lista de DVDs e 
exibi-la corretamente
• Update (Atualizar): Modificar as informações 
sobre um DVD na coleção
• Delete (excluir): Remover um DVD da lista
Melhorias que serão feitas
• Deixar a fonte e o design da tabela mais 
atraentes
• Fixar o texto do título da coluna
• Fazer alguma coisa com relação ao horário 
ridículo e nerd no display da data
• Substituir Untitled Page por um título de 
verdade
• Livrar-se da piscadinha da tela
Trabalhando com Smart Tags e
Designers
• Quanto mais sofisticados forem os controles ASP.NET, 
como o controle GridView, é necessário incluir 
designers. 
• Os designers são funções parecidas com os wizard, que 
o ajudam a configurar o controle através de opções.
• Muitos dos designers são exibidos em menus Tasks
(Tarefas) especiais, que podem ser acessados 
utilizando-se uma Smart Tag. 
• Uma SmartTag é um painel que aparece próximo ao 
controle ASP.NET no momento do desenvolvimento.
Exibindo a Smart Tag e as tarefas
através de um menu
• Uma maneira de exibir uma Smart Tag é 
através do menu de contexto. 
• Em uma página ASP.NET, selecione qualquer 
controle ASP.NET e clique com o botão direito 
do mouse. 
• O item Show Smart Tag (Exibir Smart Tag) será 
habilitado se o controle suportar o menu de 
tarefas.
Utilizando o botão Smart Tag
• Uma maneira comum de abrir as tarefas é 
utilizar o botão Smart Tag. 
• Na Figura o cursor do mouse indica o pequeno 
botão em forma de seta no canto superior 
direito.
Melhorando o Controle GridView
• Adicionando um pouco de cor ao controle
• GridView