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

Transcrição

1 Nome do laboratório: Laboratório de Programação Ferramenta 1 -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 Autoria: Osmar de Oliveira Braz Junior Design Instrucional: Flavia Lumi Matuzawa 1

2 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 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 2

3 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 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 3

4 Durante a instalação a tela a seguir é exibida. Aguarde o próximo passo. Figura 5 - Instalação Servidor WEB 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 4

5 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 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 5

6 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 6

7 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 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 7

8 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 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 8

9 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 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 entrada dos valores a serem somados. Caminho para o Servlet que vamos criar! 9

10 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 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 10

11 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 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 11

12 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 do Servlet Nome da Classe do Servlet Padrão URL de chamada ao Servlet 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 12

13 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 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 13

14 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 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

15 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 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 15

16 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 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> </head> <body> <h1>calculadora - Multiplicar</h1> <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 Caminho para o JSP que vamos criar! 16

17 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 Passo 8: Digite o nome da arquivo Calculadora para o JSP e clique no botão Finalizar. Figura 31 - Nome do JSP Calculadora 17

18 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 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 18

19 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 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 19

20 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 20