2 EISnt Centro de Formação Profissional, Engenharia Informática e Sistemas, Novas Tecnologias, Lda Avª D. João I, nº 380/384 Soutelo 4435-208 Rio Tinto Portal Internet : www.eisnt.com E-Mail : formação@eisnt.com Telefone : 22 480 47 92 Fax : 22 480 51 36 Módulo 3936 ASP.NET
3 Índice 1 Como instalar o Visual Web Developer Express Edition (Ferramenta gratuita) 2 Ambiente de trabalho 3 Primeira aplicação Olá Mundo 4 Segunda aplicação Soma de 2 números 5 Várias aplicações para treino 6 Uso de MasterPages (Exemplo prático)
4 1 - Como instalar o Visual Web Developer Express Edition (Ferramenta gratuita) Para instalar o Visual Web Developer da Microsoft, última versão (2010) terá de ir ao seguinte link : www.microsoft.com/express/windows, onde aparecerá o seguinte écran inicial: Nessa altura terá de procurar a ferramenta Visual Web Developer que faz parte do pacote Microsoft Visual Studio e que tem uma versão gratuita que é a versão Express Edition.
5 Ao escolher o Visual Web Developer 2010 Express aparecerá este écran onde podemos começar a instalar no nosso computador. Para instalar a ferramenta Microsoft Visual Web Developer teremos então de fazer o download do seguinte ficheiro para o nosso computador. A instalação no nosso computador poderá demorar entre 20 a 40 minutos dependendo da última actualização do Windows que temos.
6 2 Ambiente de trabalho Depois de devidamente instalado aparecerá o seguinte écran de trabalho. Nesta altura poderá começar a trabalhar no ambiente de trabalho tendo as seguintes opções: Criar um Novo Web Site ou Abrir um Web Site que já tinha iniciado anteriormente.
7 Ao criar um novo projecto iremos criar um ASP.NET Web Site, dandolhe um nome por exemplo site1. Tomar atenção neste momento, pois a linguagem usada será o Visual Basic, o que deverá estar seleccionado na opção do seu lado esquerdo. Nesta altura aparecerá um template inicial onde poderemos começar a iniciar o nosso primeiro exercício.
8 Depois disto estamos aptos a desenvolver as nossas aplicações, mas antes vamos verificar para que servem cada parte do ambiente de desenvolvimento. O local onde iremos desenvolver os nossos web sites será na área do ficheiro default.aspx, que é descriminado pela primeira vez como defaul.aspx : Do lado esquerdo do nosso default.aspx aparece-nos uma área importante. ToolBox Onde são apresentados todos os objectos que podemos utilizar para o desenvolvimento de aplicações para a web.
9 Do lado direito do nosso formulário aparece-nos outras duas áreas importantes. Solution Explorer -> Todos as pastas e ficheiros que fazem parte do nosso projecto. Properties -> As propriedades do elemento que está neste momento seleccionado.
10 Depois das descrições acima do ambiente de desenvolvimento, para começarmos a experimentar as aplicações que iremos desenvolver teremos que usar o botão Start Debugging (F5). 3 Primeira aplicação : Olá Mundo Vamos então por começar por fazer a primeira aplicação. No default.aspx que nos é apresentado vamos arrastar da Toolbox o objecto Label para o mesmo. E com esse objecto seleccionado (Label) vamos modificar a propriedade Text e outras para experimentar.
11 Para executar a nossa aplicação teremos de carregar no botão Start Debugging ou F5 e poderá verificar desta maneira a sua aplicação a correr. Para desligarmos o Start Debugging deveremos carregar no botão Stop Debugging como poderá ver pela figura.
12 4 Segunda aplicação : Soma de 2 números Pretende-se com esta aplicação somar 2 números com os valores introduzidos por teclado. Os objectos necessários serão : - 4 Labels (Número 1, Número 2, Resultado e e resultado propriamente dito. - 2 TextBox (Número 1 e número 2 para introduzir os dados) - 1 Botão para executar a operação da soma.
13 No caso do código, temos que definir 3 variáveis, número 1, número 2 e soma. Os tipos de variáveis possíveis em Visual Web Developer com a Linguagem Visual Basic 2010 são : Para o nosso exercício podemos definir (dimensionar) as variáveis como inteiros (Integer) com a seguinte instrução: int num1, num2, soma;
14 Para fazermos o input de dados teremos uma instrução deste género: Aqui os dados de input são introduzidos pelos objectos TextBox. De seguida o processamento para somar os 2 números é o seguinte: A saída do resultado será o cálculo da soma dos 2 números e terá a seguinte instrução: Aqui será colocada no objecto Label4 o resultado da variável soma que nesta altura para ser apresentada terá de ser convertida para string. Então a programação completa do botão será : E terá a apresentação para o utilizador desta maneira:
15 5 Várias aplicações para treino No seguimento do exercício anterior, faça uma aplicação que permita calcular a área de um triângulo rectângulo dada a sua base e a sua altura. Como neste caso teremos no cálculo de efectuar uma divisão convêm pelo menos no resultado seja permitido casas decimais, pois poderá o resultado ser apresentado com casas decimais. A área de um triângulo rectângulo é : área = base * altura /2 sendo o * o o operador de multiplicação.
16 6 Uso de MasterPages (Exemplo prático) Vamos criar uma página com o uso de masterpages. Começamos então por criar uma página na nossa pasta de projectos: Seguidamente iremos criar a nossa MasterPage, para isso deveremos escolher a opção : com a designação Add New Item e escolher a opção Master Page como poderá observar abaixo:
17 Nesta altura poderá alterar o nome da masterpage que o sistema coloca. Eu costumo por norma o mesmo nome que é : MasterPage.master. Ao criar a masterpage na opção Add : Irá obter o seguinte ecrán na área do design : Nesta altura convêm referir que nos é disponibilizada uma área muito importante que é referenciada pelo objecto ContentPlaceHolder e que se encontra na área do design logo no topo:
18 Nesta altura para a criação do nosso site podemos criar 3 tabelas (a primeira será para o cabeçalho do site, a segunda será para as opções de menu do site e dos conteúdos e por último a terceira será para o rodapé do nosso site). Para criar uma tabela teremos de ir à opção do menu principal do nosso ambiente de desenvolvimento e escolher a opção Table : No caso da primeira tabela teremos de a criar com uma coluna e uma linha, desta maneira:
19 E ficará da seguinte maneira na tag do html <td> que quer dizer Table Data : No caso da segunda tabela teremos uma linha e duas colunas, desta maneira: Por fim a última tabela será igual à primeira e será composta por uma linha e uma coluna. Depois de devidamente criada a tabela deveremos arrastar o objecto ContentPlaceHolder para a área que deverá ser comum a todas as páginas do nosso site, que neste caso é a segunda coluna da segunda tabela: Nesta altura temos a estrutura física do nosso site. Deveremos então gravar na opção de tudo Save All.
20 A fase seguinte será a fase da recolha de materiais que irão fazer parte do nosso site, como por exemplo imagens, textos, vídeos, etc. No caso presente iremos ter algumas imagens. Será então uma boa opção de organização criar uma pasta chamada imagens dentro da nossa pasta de projectos. E enviar para dentro desta mesma pasta todas as imagens relativas ao nosso projecto, que no nosso caso são imagens para uma ourivesaria :
21 Depois disto retomamos o nosso ambiente de desenvolvimento e vamos configurar então a nossa masterpage. Vamos começar pelo cabeçalho, que vai estar na primeira <td> table data por nós criada: Teremos de arrastar das opções da Toolbox para essa área um objecto <image> da seguinte maneira: E relacionar com a propriedade ImageUrl desse mesmo objecto a imagem que pretendemos:
22 Ficando desta maneira, a imagem no cabeçalho do nosso site : O trabalho seguinte será definir as opções que o nosso site poderá ter. Podemos usar o objecto <Button> para definir as opções. As opções poderão ser Inicio, Produtos, Localidade e Contactos. Estes objectos deverão ser colocados na primeira coluna da segunda tabela. Na tabela criada para o rodapé podemos colocar uma imagem ou uma frase relativa ao CopyRight, como exemplificado.
23 Depois de criar a MasterPage e devidamente gravada podemos passar a usá-la em cada página que criarmos para o nosso site. Antes de mais devemos apagar a página inicial default : E criar uma nova página default.aspx, tendo atenção ao uso da masterpage que criamos anteriormente, tendo em atenção a escolha da masterpage criada anteriormente :
24 Nesta altura fica só disponível a área do objecto <ContentPlaceHolder> que será nessa área que podemos colocar informação para cada página, por exemplo :
25 Depois de como este, criarmos todos os defaults necessários para o nosso site deveremos relacionar cada botão que faz parte da nossa MasterPage com cada uma da página criada, como exemplo :