Nome do laboratório: Laboratório de Programação

Ferramenta1 -NetBeans 8.0 WEB

Elaborado por: Osmar de Oliveira Braz Junior

Descrição
Este tutorial tem como objetivo mostrar a construção de aplicações web utilizando Java
Servlets e Java Server Pages utilizando a IDE NetBeans 8. A instalação e configuração da
ferramenta deve ser feita seguindo o tutorial de instalação do NetBeans 8.

Este tutorial é formado por três etapas:

Tutorial 1 : Configuração Apache Tomcat no NetBeans 8.0
Tutorial 2 : Criando um projeto web usando Java Servlets no NetBeans
Tutorial 3 : Criando um projeto web usando Java Server Pages no NetBeans

Tutorial 1 – Configuração Apache Tomcat no NetBeans 8.0 (passo a passo)

Uma vez que o NetBeans versão 8.0 esta instalado o passo seguinte realizar a sua configuração
para execução do serviços WEB através do Apache Tomcat. O Apache Tomcat não precisa ser
instalado a parte, pois já vem junto com o a instalação do NetBeans 8.0.

1
Autoria: Osmar de Oliveira Braz Junior | Design Instrucional: Flavia Lumi Matuzawa

1
Passo 1: Verifique se o servidor Apache Tomcat esta disponível. Para isto acesse o menu
Janela-> Serviços ou Ctrl+5. Examine no grupo Servidores no NetBeans se o Apache Tomcat
esta disponível.

Figura 1 - Serviço Apache Tomcat disponível para uso

Fonte: Elaborado pelo Autor (2014)

Caso contrário se não aparecer o Apache Tomcat em servidores é necessário realizar sua
configuração.

Figura 2 - Serviço Apache Tomcat não disponível

Fonte: Elaborado pelo Autor (2014)

2
Passo 2: Adicionando o Apache Tomcat aos servidores do NetBeans 8.0. Clique com o botão
direito mouse em cima de servidores e selecione Adicionar Servidor.
Figura 3 - Adicionar Servidor WEB

Fonte: Elaborado pelo Autor (2014)

Passo 3: Escolhendo o servidor WEB Apache Tomcat que é a implementação de referência e

clique no botão Próximo.
Figura 4 - Escolha do Servidor WEB

Fonte: Elaborado pelo Autor (2014)

3
Durante a instalação a tela a seguir é exibida. Aguarde o próximo passo.

Figura 5 - Instalação Servidor WEB

Fonte: Elaborado pelo Autor (2014)

Passo 4: Agora é necessário configurar detalhes da instalação do servidor WEB. Neste passo é
exibido o local de instalação do Tomcat. Defina uma senha para o administrador web do
tomcat digite para o nome do usuário “admin” e a senha “admin” o servidor WEB Apache
Tomcat que é a implementação de referência e clique no botão Finalizar.
Figura 6 - Configuração do Servidor WEB

Fonte: Elaborado pelo Autor (2014)

4
Passo 5: Com o servidor instalado e configurado basta iniciar o serviço. Para isto abra a aba
serviço, selecione o item Servidores, e clique com o botão direito em cima do Apache Tomcat e
escolha Iniciar.
Figura 7 - Iniciando o servidor WEB

Fonte: Elaborado pelo Autor (2014)

Durante o inicio do serviço pode ser necessário liberar o firewall. A tela de alerta do windows
é exibida e clique no botão desbloquear.

Figura 8 - Desbloqueando o servidor WEB

Fonte: Elaborado pelo Autor (2014)

5
Como resultado correto da inicialização do servico web na janela de Saída deverá aparecer
somente mensagens do tipo “Informações” e a última mensagem deverá ser “Informações:
Server Startup 635 ms”. O tempo pode variar de computador para computador.

Figura 9 - Servidor WEB Iniciado

Fonte: Elaborado pelo Autor (2014)

6
Tutorial 2 : Criando um projeto web usando Java Servlets no NetBeans (passo a
passo)
Vamos agora desenvolver uma projeto WEB no NetBeans utilizando Java Servlets. O
projeto é uma aplicação web que deverá receber dois valores inteiros em uma página html e
submeter a um servlet que irá realizar a sua soma e mostrar o resultado.
Passo 1: Acesse o menu Arquivo do NetBeans opção Novo Projeto, selecione a Categoria Java
WEB e depois Aplicação WEB, por fim clique no botão próximo.
Figura 10 - Novo Projeto Categoria

Fonte: Elaborado pelo Autor (2014)

Passo 2: Digite o nome do projeto projetoweb1 escolha o diretório de onde deseja guardar os
arquivos do projeto e clique no botão próximo.

Figura 11 - Nome e Localização

Fonte: Elaborado pelo Autor (2014)

7
Passo 3: Escolha o servidor web “Apache Tomcat ou TomEE” e verifique o nome do caminho
do contexto. O nome do caminho do contexto já vem preenchido com o mesmo nome do
projeto. Este nome será utilizado para acessar o projeto via web. Por fim clique no botão
próximo.

Figura 12 - Servidor e Definições

Fonte: Elaborado pelo Autor (2014)

Passo 4: Aqui você escolhe os frameworks necessários a sua aplicação. Por enquanto não
vamos utilizar nenhum, portanto clique no botão Finalizar.

Figura 13 - Frameworks

Fonte: Elaborado pelo Autor (2014)

8
Passo 5: Com o projeto configurado a figura a seguir exibe a área de desenvolvimento do
projeto. A esquerda é exibida a estrutura do projeto e a direita o editor do código fonte.

Figura 14 - Tela do Projeto

Estrutura do projeto

Editor de Código Fonte

Fonte: Elaborado pelo Autor (2014)

Passo 6: Altere o arquivo index.jsp para o código abaixo para incluir as caixas de texto val1 e
val2 para a entrada dos números inteiros e especifique o servlet de destino chamado
Calculadora para realizar a soma.

Figura 15 - Código fonte para entrada de dados

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Calculadora - Somar</title>
</head>
<body>
<h1>Calculadora - Somar</h1>
<form name="FrmCalculadora" method="post" action="Servlet/Calculadora">
Valor1: <input type=text name="val1"> <p>
Valor2: <input type=text name="val2"> <p>
<input type="reset" value="Limpar">
<input type="submit" name="Somar" value="Somar"> <p>
</form>
</body>
</html>

Input text para a Caminho para o

entrada dos valores a Servlet que vamos
serem somados. criar!

Fonte: Elaborado pelo Autor (2014)

9
Passo 7: Com a interface html pronta vamos fazer o servlet. Clique no menu Arquivo do
NetBeans opção Novo Arquivo, selecione a categoria Web e depois Servlet, por fim clique no
botão Próximo.

Figura 16 - Novo Arquivo Tipo Servlet

Fonte: Elaborado pelo Autor (2014)

Passo 8: Digite o nome da classe “Calculadora” para o servlet e clique no botão Próximo.
Vamos deixar a classe do pacote default.

Figura 17 - Nome do Servlet Calculadora

Fonte: Elaborado pelo Autor (2014)

10
Passo 9: Confira os dados da implantação do servlet Calculadora nesta tela. Você tem o nome
da Classe como Calculadora, o nome do Servlet também como Calculadora e o padrão URL de
acesso /Servlet/Calculadora. O padrão de URL é como o servlet será chamado dentro da
aplicação. Este padrão de URL é o mesmo especificado no action do formulário hml de entrada
dos dados. Estas informações vão ser inseridas pelo NetBeans dentro do descritor web
(web.xml). Lembre-se de marcar a opção “Adicionar informações ao descritor de
implantação(web.xml)”.

Figura 18 - Configurar Servlet Calculadora

Fonte: Elaborado pelo Autor (2014)

Passo 10: Após o passo anterior o servlet básico é gerado automaticamente pelo NetBeans. E
nele você ira colocar o seu código fonte.

Figura 19 - Código fonte base do Servlet Calculadora

Fonte: Elaborado pelo Autor (2014)

11
Passo 11: O NetBeans também modifica o descritor web, para incluir a referencia ao novo
servlet. Localize o arquivo web.xml na aba projetos dentro da pasta WEB-INF para visualizá-lo.

Figura 20 - Descritor de implantação da calculadora

Nome da Classe
do Servlet
Nome do Servlet

Padrão URL de
chamada ao Servlet

Fonte: Elaborado pelo Autor (2014)

Passo 12: Vamos alterar o servlet Calculadora, incluindo as 4 linhas no local especificado. Estas
linhas vão recuperar os dois valores do formulário, converter eles para inteiros e realizar a sua
soma e mostrar o resultado.

Figura 21 - Alterando o Servlet Calculadora

Fonte: Elaborado pelo Autor (2014)

12
Passo 13: Com o projeto pronto e o servlet construído, basta executar o projeto clicando no
menu do Executar do NetBeans opção Executar Projeto, ou pressionar a tecla F6 ou clicar no
ícone ( ).

Figura 22 - Executando o projeto Calculadora Servlet

Fonte: Elaborado pelo Autor (2014)

A execução faz com que o projeto seja compilado e o navegador aberto com a página default
para sua execução. Preencha os dados de valor1 e valor2 e clique no botão Soma.

Figura 23 - Resultado da Execução do Servlet Calculadora

Fonte: Elaborado pelo Autor (2014)

13
Tutorial 3 : Criando um projeto web usando Java Server Page no NetBeans (passo a
passo)

Agora que já usamos Java Servlet vamos desenvolver uma projeto WEB no NetBeans
utilizando Java Server Page. O projeto é uma aplicação web que deverá receber dois valores
inteiros em uma página html e submeter a um Java Server Pages que irá realizar a sua
multiplicação e mostrar o resultado.
Passo 1: Acesse o menu Arquivo do NetBeans opção Novo Projeto, selecione a Categoria Java
WEB e depois Aplicação WEB, por fim clique no botão próximo.
Figura 24 - Novo Projeto Categoria

Fonte: Elaborado pelo Autor (2014)

Passo 2: Digite o nome do projeto projetoweb2 escolha o diretório de onde deseja guardar os
arquivos do projeto e clique no botão próximo.

Figura 25 - Nome e Localização

14
Fonte: Elaborado pelo Autor (2014)

Passo 3: Escolha o servidor web “Apache Tomcat ou TomEE” e verifique o nome do caminho
do contexto. O nome do caminho do contexto já vem preenchido com o mesmo nome do
projeto. Este nome será utilizado para acessar o projeto via web. Por fim clique no botão
próximo.

Figura 26 - Servidor e Definições

Fonte: Elaborado pelo Autor (2014)

Passo 4: Aqui você escolhe os frameworks necessários a sua aplicação. Por enquanto não
vamos utilizar nenhum, portanto clique no botão Finalizar.

Figura 27 - Frameworks

Fonte: Elaborado pelo Autor (2014)

15
Passo 5: Com o projeto configurado a figura a seguir exibe a área de desenvolvimento. A
esquerda é exibida a estrutura do projeto e a direita o editor do código fonte.

Figura 28 - Tela do Projeto

Estrutura do projeto

Editor de Código Fonte

Fonte: Elaborado pelo Autor (2014)

Passo 6: Altere o arquivo index.jsp para o código abaixo para incluir as caixas de texto val1 e
val2 para a entrada dos números inteiros e especifique o Java Server Pages de destino
chamado Calculadora.jsp para realizar a multiplicação.

Figura 29 - Código fonte para entrada de dados

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Calculadora – Multiplicar</title> Caminho para o
</head>
<body> JSP que vamos
<h1>Calculadora - Multiplicar</h1> criar!
<form name="FrmCalculadora" method="post" action="Calculadora.jsp">
Valor1: <input type=text name="val1"> <p>
Valor2: <input type=text name="val2"> <p>
<input type="reset" value="Limpar">
<input type="submit" name="Multiplicar" value="Multiplicar"> <p>
</form>
</body>
</html>

Input text para a entrada

dos valores a serem
multiplicados

Fonte: Elaborado pelo Autor (2014)

16
Passo 7: Com a interface html pronta vamos fazer o JSP. Clique no menu Arquivo do NetBeans
opção Novo Arquivo, selecione a categoria Web e depois JSP, por fim clique no botão Próximo.

Figura 30 - Novo Arquivo JSP

Fonte: Elaborado pelo Autor (2014)

Passo 8: Digite o nome da arquivo “Calculadora” para o JSP e clique no botão Finalizar.

Figura 31 - Nome do JSP Calculadora

Fonte: Elaborado pelo Autor (2014)

17
Passo 9: Após o passo anterior o JSP básico é gerado automaticamente pelo NetBeans para a
Calculadora.

Figura 32 - Código fonte base do JSP Calculadora

Fonte: Elaborado pelo Autor (2014)

Passo 10: Vamos alterar o JSP Calculadora, incluindo as 4 linhas no local especificado. Estas
linhas vão recuperar os dois valores inteiros do formulário e realizar a sua multiplicação e
mostrar o resultado.

Figura 33 - Alterando o JSP

Fonte: Elaborado pelo Autor (2014)

18
Passo 11: Com o projeto pronto basta executar o projeto clicando no menu Executar opção
Executar Projeto, ou pressionar a tecla F6 ou clicar no ícone ( ).

Figura 34 - Executando o projeto Calculadora JSP

Fonte: Elaborado pelo Autor (2014)

A execução faz com que o projeto seja compilado e o navegador aberto para sua execução.

Figura 35 - Resultado da Execução do JSP Calculadora

Fonte: Elaborado pelo Autor (2014)

19
Passo 12: Com a aplicação testada e funcionando você só precisa empacotar o projeto para
realizar a sua distribuição para um outros computadores. Clique no menu Executar do
NetBeans opção Limpar e Construir Projeto ou as teclas Shift + F11. Utilizando um navegador
de arquivos acesse a pasta chamada dist do seu projeto, nela estará o arquivo
projetoweb2.war.

Figura 36 - Arquivo war

Fonte: Elaborado pelo Autor (2014)

20