Você está na página 1de 24

Tutorial Desenvolvimento de Aplicações WEB no Eclipse

Índice

Professor Hildeberto Melo

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.

.metadata, nela conterá as informações e configurações do Eclipse. Fígura 1 Tela de escolha do workspace

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.

informações sobre servidores, propriedades, console, etc. Fígura 2 Tela principal do Eclipse Criando um novo projeto

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á

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

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:

do Project Explore. Conforme mostra a Figura 5 abaixo: Fígura 5 Mostrando o projeto recém criado

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

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

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 programador irá 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

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á

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.

alterar, colocando códigos em HTML ou até mesmo em Java. Fígura 10 apresentação do código fonte

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.

basta ir no menu run – run, mostrado abaixo na Figura 11. Fígura 11 Executando a

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

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

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

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,

“í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”.

que está no arquivo

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

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

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”

de execução no Eclipse e apresentando o que foi informado pelo usuário, na caixa de texto

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

no workspace do eclipse 2. Ir no menu file – import Fígura 18 Importanto projeto no

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

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

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

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.

e dar acesso as principais funcionalidades do servidor. Fígura 22 Iniciando o Tomcat na barra de

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

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.

acessar o menu file – export, conforme mostra a Figura 24. Fígura 24 Exportando projeto no

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

Fígura 25 Exportando projeto war file

Neste passo, escolher o projeto e o local onde será criado o arquivo do tipo .war.

o projeto e o local onde será criado o arquivo do tipo .war. Fígura 26 Exportando

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

que escolher a opção Administration – Tomcat Manager Fígura 27 Publicando o projeto - Administrador Tomcat

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.

o arquivo do tipo .war e depois clicar no botão Deploy. Fígura 28 Publicando o projeto

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.

basta clicar no nome do projeto para dar início ao seu uso. Fígura 29 Projeto publicado

Fígura 29 Projeto publicado no Tomcat

seguinte endereço

http://localhost:8080/ProjetoTeste_/, lembrando que o servidor de Web Tomcat tem que estar ativo para que ele funcione.

Para

acessar

seu

projeto

basta

colocar

o

que estar ativo para que ele funcione. Para acessar seu projeto basta colocar o Fígura 30

Fígura 30 Projeto executando no Tomcat