Tutorial Desenvolvimento de Aplicações WEB no Eclipse

Prévia do material em texto

Tutorial Desenvolvimento de Aplicações 
WEB no Eclipse 
Professor Hildeberto Melo 
 
Índice 
 
Configurações................................................................................................................... 2 
Iniciando o Eclipse ........................................................................................................... 2 
Tela principal do Eclipse .................................................................................................. 3 
Criando um novo projeto.................................................................................................. 3 
Adicionando arquivos ao projeto...................................................................................... 7 
Executando a aplicação .................................................................................................. 11 
Editando os arquivos do projeto ..................................................................................... 13 
Demonstrando como funciona a passagem de valores entre formulários ...................... 15 
Exercício......................................................................................................................... 17 
Abrindo o projeto no Eclipse.......................................................................................... 17 
Gerando o arquivo para publicação no Servidor de Web............................................... 19 
Criando arquivo para ser publicado no Tomcat.............................................................. 21 
Publicando o projeto no Tomcat..................................................................................... 23 
 
Índice de Figuras 
 
Fígura 1 Tela de escolha do workspace do Eclipse .......................................................... 2 
Fígura 2 Tela principal do Eclipse.................................................................................... 3 
Fígura 3 Criando um projeto Dynamic Web Project........................................................ 4 
Fígura 4 Tela com as informações do projeto .................................................................. 5 
Fígura 5 Mostrando o projeto recém criado ..................................................................... 6 
Fígura 6 Mostrando os arquivos e pastas do projeto ........................................................ 7 
Fígura 7 Adicionando arquivos ao projeto ....................................................................... 8 
Fígura 8 Informando o nome do arquivo jsp .................................................................... 9 
Fígura 9 Escolhendo o template do arquivo jsp ............................................................. 10 
Fígura 10 apresentação do código fonte do arquivo jsp ................................................. 10 
Fígura 11 Executando a aplicação .................................................................................. 11 
Fígura 12 Escolhendo o servidor para executar a aplicação........................................... 12 
Fígura 13 Aplicação sendo executa dentro do Eclipse ................................................... 13 
Fígura 14 Passando informações de um formulário para o outro................................... 14 
Fígura 15 Recebendo informações de outro formulário................................................. 15 
Fígura 16 Executando a aplicação com passagem de valores de um formulário para o 
outro................................................................................................................................ 16 
Fígura 17 Recebendo as informações passadas por outro formulário ............................ 17 
Fígura 18 Importanto projeto no Eclipse........................................................................ 17 
Fígura 19 Importando projeto no Eclipse - Escolhendo projetos no workspace ............ 18 
Fígura 20 Importando projeto no Eclipse – finalizando a importação ........................... 19 
Fígura 21 Iniciando o monitor Tomcat........................................................................... 20 
Fígura 22 Iniciando o Tomcat na barra de tarefas do sistema operacional .................... 20 
Fígura 23 Browser com o Tomcat ativo ......................................................................... 21 
Fígura 24 Exportando projeto no eclipse........................................................................ 21 
Fígura 25 Exportando projeto war file ........................................................................... 22 
Fígura 26 Exportando war file local de exportação........................................................ 22 
Fígura 27 Publicando o projeto - Administrador Tomcat............................................... 23 
Fígura 28 Publicando o projeto - escolhendo o arquivo a ser publicado........................ 23 
Fígura 29 Projeto publicado no Tomcat ......................................................................... 24 
Fígura 30 Projeto executando no Tomcat....................................................................... 24 
 
 
 
Configurações 
 
Vamos começar com a instalação do JDK(Java Development Kit), é necessário ter 
instalado o JDK no computador para podermos começarmos a trabalhar com 
desenvolvimento em Java. 
• Baixar o JDK 
• Instalar o JDK no computador 
 
Baixar o Eclipse com suporte a desenvolvimento de aplicações Web, eclipse com 
suporte JEE(Java Enterprise Edition). 
Após baixar o Eclipse, descompactá-lo no diretório c:\eclipse, o eclipse não possui 
instalador, ele roda direto no exe. 
 
Iniciando o Eclipse 
 
Após clicar no ícone do Eclipse, irá aparecer a figura 1, no qual é apresentada a opção 
de escolher o workspace do Eclipse, no local escolhido para o workspace será criada 
uma pasta .metadata, nela conterá as informações e configurações do Eclipse. 
 
 
Fígura 1 Tela de escolha do workspace do Eclipse 
 
Tela principal do Eclipse 
 
Ao ser iniciado o Eclipse apresenta sua interface de desenvolvimento, mostrado na 
Figura 2. Na parte superior é apresentada a barra de menus. No canto esquerdo temos a 
guia dos projetos e seus respectivos arquivos (Porject Explore). Na parte central serão 
mostrados os arquivo em utilização pelo programador. Na parte inferior, informações 
sobre servidores, propriedades, console, etc. 
 
 
Fígura 2 Tela principal do Eclipse 
 
Criando um novo projeto 
 
Para criarmos uma aplicação no qual irá rodar na Web, é simples, basta acessar o 
menu:New - Dynamic Web Project. 
 
 
 
Fígura 3 Criando um projeto Dynamic Web Project 
 
Aparecerá uma tela que o programador colocará as informações do projeto, o nome do 
projeto, o diretório onde o projeto será criado, e demais informações. Conforme é 
mostrado na Figura 4. 
 
 
Fígura 4 Tela com as informações do projeto 
 
Após a configuração da criação do projeto, a interface de desenvolvimento irá 
apresentar o projeto recém criado na paleta do Project Explore. Conforme mostra a 
Figura 5 abaixo: 
 
 
Fígura 5 Mostrando o projeto recém criado 
 
Ao clicar no projeto será listado arquivos que fazem parte do seu projeto, arquivos .java, 
.jsp, .html, etc. Cada arquivo pertencerá a um local devidamente especificado. 
 
Fígura 6 Mostrando os arquivos e pastas do projeto 
Adicionando arquivos ao projeto 
 
Vamos adicionar o primeiro arquivo ao projeto, o referido arquivo será do tipo jsp. Para 
tal é necessário clicar com o botão direito do mouse, opção new – jsp, conforme é 
mostrado na figura 7 abaixo. 
 
 
Fígura 7 Adicionando arquivos ao projeto 
 
Após selecionar o tipo de arquivo a ser criado no projeto, que neste caso foi um arquivo 
jsp, aparecerá uma tela onde o programadorirá informar o nome do arquivo. Os 
arquivos do tipo jsp são criados dentro da pasta WebContent. Este passo é demonstrado 
na Figura 8. 
 
Fígura 8 Informando o nome do arquivo jsp 
 
 
Após informar o nome no arquivo a ser criado, no caso o arquivo foi “índex.jsp”, o 
programador escolherá o template do arquivo. Vamos escolher o template “New JSP 
File (HTML)” Conforme mostra a Figura 9. 
 
 
Fígura 9 Escolhendo o template do arquivo jsp 
 
Conforme é mostrado na Figura 10, aparecerá o código fonte do arquivo “índex.jsp”, O 
Eclipse cria para o programador apenas uma estrutura básica de arquivo JSP para que o 
programador poderá alterar, colocando códigos em HTML ou até mesmo em Java. 
 
 
Fígura 10 apresentação do código fonte do arquivo jsp 
Executando a aplicação 
 
Para executarmos a aplicação é muito simples, basta ir no menu run – run, mostrado 
abaixo na Figura 11. 
 
 
Fígura 11 Executando a aplicação 
 
Na Figura 12 mostra as opções de servidores no qual sua aplicação poderá executada, 
neste caso vamos escolher a opção Basic – J2EE Preview e rodar no servidor do próprio 
Eclipse. 
 
Fígura 12 Escolhendo o servidor para executar a aplicação 
 
Na Figura 13 mostra sua aplicação rodando dentro do próprio Eclipse, neste caso o 
Eclipse abre uma nova guia junto a guia do arquivo “índex.jsp”. neste caso não apareceu 
informações na janela, pois ainda não editamos o arquivo “índex.jsp”. 
 
 
Fígura 13 Aplicação sendo executa dentro do Eclipse 
 
Editando os arquivos do projeto 
 
Editaremos o arquivo “índex.jsp” e colocaremos no mesmo um formulário, uma caixa 
de texto e um botão. Configuraremos o formulário com as seguintes características: 
action = “receberInformacao.jsp”, neste caso quando o formulário for enviado ele 
procurará o arquivo “receberInformação.jsp”. No method = “get” o formulário será 
enviado via GET. O botão colocado no formulário, ao ser clicado enviará o formulário. 
Tudo isto é mostrado na Figura 14. 
 
Fígura 14 Passando informações de um formulário para o outro 
 
Coloque mais um arquivo do tipo jsp no projeto, este arquivo deverá ter o nome de 
“receberInformacao.jsp”. O mesmo nome no qual o formulário, que está no arquivo 
“índex.jsp”. No arquivo “receberInformacao.jsp” vamos colocar um trecho de código 
em Java, que tem por finalidade de receber as informações passadas pelo formulário 
“índex.jsp”. 
 
No formulário do arquivo “índex.jsp” tem um caixa de texto que possui o nome de 
“edNome”. O código em java request.getParameter(“edNome”) pega as informações 
que o usuário digitou na caixa de texto. 
 
Fígura 15 Recebendo informações de outro formulário 
 
 
Demonstrando como funciona a passagem de valores 
entre formulários 
 
A Fígura 16 mostra a aplicação rodando com o arquivo “índex.jsp” na janela de 
execução no Eclipse. Neste caso o usuário informará um nome qualquer na caixa de 
texto e depois clicará no botão. 
 
 
Fígura 16 Executando a aplicação com passagem de valores de um formulário para o outro 
 
A Figura 17 mostra o arquivo “receberInformacao.jsp” na janela de execução no Eclipse 
e apresentando o que foi informado pelo usuário, na caixa de texto do arquivo 
“índex.jsp” 
 
 
Fígura 17 Recebendo as informações passadas por outro formulário 
 
Exercício 
 
Modificar os arquivos do projeto, no arquivo “índex.jsp” criar uma tela de cadastro de 
aluno, que possua as seguintes informações: nome, matrícula, data de nascimento, 
filiação, endereço completo. No arquivo “receberInformacao.jsp” apresentar as 
informações que foram digitas pelo usuário. 
 
Abrindo o projeto no Eclipse 
 
Para abrirmos um projeto no Eclipse temos que seguir os seguintes passos: 
1. Colocar a pasta do seu projeto no workspace do eclipse 
2. Ir no menu file – import 
 
Fígura 18 Importanto projeto no Eclipse 
 
3. Escolher a opção General – Existing Projects into Workspace 
 
Fígura 19 Importando projeto no Eclipse - Escolhendo projetos no workspace 
 
4. Escolher a pasta do projeto e clicar no botão Finish 
 
Fígura 20 Importando projeto no Eclipse – finalizando a importação 
Gerando o arquivo para publicação no Servidor de Web 
 
Primeiramente temos que instalar um servidor de web, escolheremos o servidor de web 
Tomcat. Este servidor é apropriado para rodar aplicações em Java. Para instalá-lo basta 
fazer o download do mesmo na web, ele é gratuito. Sua instalação é simples, basta 
seguir o wizard do mesmo. 
 
Depois de instalado vá no Menu iniciar e Escolha a opção do monitor do Tomcat, 
conforme mostra na Figura 21 abaixo. 
 
 
Fígura 21 Iniciando o monitor Tomcat 
 
Depois de iniciar o monitor Tomcat, irá aparecer o ícone do mesmo na barra de tarefas, 
conforme Figura 22, é só escolher a opção Start service, para podermos começar a 
trabalhar com o mesmo, isto irá habilitar e dar acesso as principais funcionalidades do 
servidor. 
 
 
Fígura 22 Iniciando o Tomcat na barra de tarefas do sistema operacional 
 
Agora vamos abrir o browser e colocar o seguinte endereço HTTP:\\localhost:8080, se 
estiver tudo certo deverá aparecer as informações da Figura 23 no browser. 
 
 
Fígura 23 Browser com o Tomcat ativo 
 
 
Criando arquivo para ser publicado no Tomcat 
 
Para podermos publicarmos nossa aplicação, que foi desenvolvida no Eclipse, no 
Tomcat, temos que seguir os seguintes passos: acessar o menu file – export, conforme 
mostra a Figura 24. 
 
Fígura 24 Exportando projeto no eclipse 
 
Conforme mostra a Figura 25, escolher a opção de exportar como Web – war file. 
 
Fígura 25 Exportando projeto war file 
 
Neste passo, escolher o projeto e o local onde será criado o arquivo do tipo .war. 
 
 
Fígura 26 Exportando war file local de exportação 
 
Publicando o projeto no Tomcat 
 
Para publicarmos o projeto no Tomcat, temo que escolher a opção Administration – 
Tomcat Manager 
 
 
Fígura 27 Publicando o projeto - Administrador Tomcat 
 
Irá aparecer a tela de gerenciamento dos projetos que estão publicados no Tomcat. Para 
publicar um projeto, temos que ir na opção WAR file to deploy, escolher o arquivo do 
tipo .war e depois clicar no botão Deploy. 
 
 
Fígura 28 Publicando o projeto - escolhendo o arquivo a ser publicado 
 
Após feito isso o projeto irá aparecer no Tomcat, basta clicar no nome do projeto para 
dar início ao seu uso. 
 
 
Fígura 29 Projeto publicado no Tomcat 
 
Para acessar seu projeto basta colocar o seguinte endereço 
http://localhost:8080/ProjetoTeste_/, lembrando que o servidor de Web Tomcat tem que 
estar ativo para que ele funcione. 
 
 
Fígura 30 Projeto executando no Tomcat