Creación de proyecto Web en NetBeans

1. Abrir NetBeans y crear un proyecto un  proyecto de tipo WebApplication con el nombre “WebTest1 “WebTest1”, ”, similar a las siguientes pantallas:

Ingresar nombre y todas las opciones por defecto y presionar Finish.

2. Crear una página JSP con nombre “JSP1”, la cual debe solicitar como entr ada un nombre y la elección de una lista de productos. Seguir los siguientes pasos: Crear la JSP1 y presionar Finish 



Revisar la Paleta (Palette) de herramientas disponibles al lado izquierdo de Netbeans. De esta paleta ocuparemos la sección HTML y HTML Forms. Los elementos de la  paleta se arrastran a la página JSP creada.

Arrastrar desde HTML Forms el elemento Form y colocar bajo el tag . Al realizar esto aparecerá la configuración del formulario, llenar c on los datos de la siguiente figura y presionar OK.

Debería agregar el siguiente código HTML:

IMPORTANTE:

El tag

corresponde al formulario HTML estándar mediante el cual es  posible realizar un HTML Request y enviar datos al servidor. 

Ahora agregar una tabla HTML al interior del formulario para posicionar los campos de entrada. Arrastrar el elemento Table desde sección HTML de la paleta, colocar  justo antes de tag

. Llenar los datos de la tabla según la siguiente figura y  presionar OK.









Llenar las celdas de la tabla según la siguiente figura:

Arrastrar desde la paleta en HTML Form el elemento Text Input para ingresar el nombre. Colocarlo bajo el texto Nombre entre los tag . Llenar según la siguiente figura y presionar OK.

Debería quedar similar al siguiente código:

Arrastrar desde la paleta en HTML Form el elemento CheckBox para elegir la lista de productos. Colocarlo bajo el texto Productos entre los tag . Llenar según la siguiente figura y presionar OK

Agregar un salto de línea
y luego repetir es to 2 veces más con los otros productos (Master, RedBank).

Debería quedar similar a la siguiente imagen:

Incorporar el nombre de cada opción al comienzo del tag . Est o debería quedar similar a:





Arrastrar desde la paleta en HTML Form el elemento Button para definir el botón enviar. Colocarlo bajo el tag . Llenar se gún la siguiente figura y presionar OK

Ahora compilar el proyecto y ejecutar la página JSP1 para ver como esta quedando esta primera página.

Esto debería levantar el navegador por defecto y desplegar la siguiente página Web:

3. Crear el servlet que recibirá el request de la página JSP1 Crear el servlet con el wizard de NetBeans 





Colocar como nombre Servlet1, dejar el resto por defecto y presionar Finish.

Insertar el siguiente código en el servlet antes de la línea que contiene “out.close()”:

 //Rescata e imprime en consola el nombre ingresado en el formulario System.out.println("Nombre Recibido Es:"+request.getParameter("nombre"));  //Rescata e imprime en consola los productos elegidos en el formulario String productos[] = request.getParameterValues("productos");  for (int i=0;i
Esto debería quedar similar a la siguiente imagen:

4. Crear página JSP2 con mensaje de éxito. Crear la página con wizard de Netbeans y colocar nombre JSP2 y presionar Finish 

En contenido de JSP2 cambiar en línea que contiene

JSP Page

el t exto “JSP Page” por “Operación Exitosa”. 5. Ahora compilar nuevamente y realizar un deploy del proyecto. 



Ejecutar nuevamente la página JSP1, ingresar datos para el nombre, ele gir productos y luego presionar enviar.



Revisar en ventana Output de NetBeans los datos resca tados por el Servlet1 en viñeta Bundled Tomcat ...

6. Fin del Tutorial.

Descargar en PDF

Este documento te guiará por los primeros pasos para desarrollar

  usando

NetBeans IDE. Te mostrará como crear una aplicación web simple, su despliegue en el servidor y su presentación en un navegador. La aplicación utiliza una página JavaServer Pages (JSP) y su correpondiente clase, uno de los objetivos pero no el principal, es introducirte en el uso de NetBeans como un IDE de desarrollo muy completo, entendible y fácil de usar. Para completar esta guía, necesitaras el siguiente software y recursos. Software

NetBeans IDE

Versión

Instalación Web o Java EE versión 6.0 en adelante

Java Development Kit (JDK)

Versión 5 en adelante

Servidor de Aplicaciones GlassFish

V2

ó

Contenedor de Servlets Tomcat



Versión 6.x

Las instalaciones Web y Java EE te permitirán que instales, de manera opcional, el servidor de aplicaciones GlassFish V2 y el contenedor de servlets Apache Tomcat 6.0.x. Debes instalar una de las aplicaciones anteriores para realizar el tutorial.

Hay que comenzar un nuevo proyecto Tomcat en Eclipse, o NetBeans. Lo nombramos

.

en

En el siguiente paso vamos a crear una clase Java común y corriente muy sencilla para probar. Primero creamos un

  llamado

, hacemos clic con el botón derecho del ratón

sobre Web-inf en Eclipse o en panel de la izquierda,  en NetBeans y elegir

 ( Java Package en Netbeans ). Ahora hacemos

clic con el boton derecho del ratón en dicho package, elegir NetBeans ) y la nombramos

Escribimos la clase:

package Objetos;

public class Persona {

.

  ( Java Class en

private String Nombre; private String Ciudad; private int id;

public String getCiudad(){

return Ciudad; }

public void setCiudad(String Ciudad){ this.Ciudad=Ciudad; }

public String getNombre(){

return Nombre; }

public void setNombre(String Nombre){

this.Nombre=Nombre; }

public int getId(){

return id; }

public void setId(int id){

this.id=id; } }

NetBeans te crea por defecto el

. En Eclipse hay que crearlo a mano, en la carpeta Web-

inf, pueden hacerlo a desde la carpeta del S.O. o bien nombrarlo

.

  sobre dicha carpeta y

Lo primero que hay que indicarle a la página ( index.jsp ) son una serie de parámetros o directivas, como por ejemplo qué clases importar: <%@ page contentType="text/html; charset=utf-8" import="Objetos.Persona" errorPage=""%>

contentType: especifica el tipo de salida, en este caso text/html. import: importa las clases o paquetes que vamos a utilizar en la página. Se puede separar por

coma o usando varias veces import. En este caso Objetos.Persona ( también pueden ser clases del entorno claro, como java.sql ). erroPage: muestra simplemente la página de error en caso de que ocurra uno y no sea tomado

por las excepsiones del código. Hay otros parámetros m�s pero por ahora no viene al caso. Hay varias formas de manipular la información de las clases en el código HTML, y yendo más lejos podemos utilizar frameworks. Ahora vamos a ver dos formas básicas, código java enbebido y los javaBeans. Se utilizan tags especiales para separlo del HTML común. Para código java enbebido se utiliza: <%=  expresión %>: para mostrar datos, es decir expresiones evaluadas para la salida (por

ejemplo: persona.getNombre() en una tabla HTML). <% código %>: algoritmos y cálculos comunes, tomar una variable, manipular clases (código java

común y corriente). No se puede mostrar algo en el navegador, para eso de utiliza el tag anterior. <%!  código %>: se insertan en el cuerpo de la clase del servlet, fuera de cualquier mótodo

existente. Por ahora con los los primeros tags nos alcanza. Con esto ya se puede practicar algo, vamos a ver un ejemplo, tan fácil que casi no hacen falta comentarios: <%@page contentType="text/html" pageEncoding="UTF-8" import="Objetos.Persona" errorPage=""%>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<% Persona persona= new Persona(); persona.setNombre("Boxer"); persona.setCiudad("Lomas Altas"); persona.setId(1); %>

Datos de la Persona

Datos de la persona:

Nombre: <%= persona.getNombre() %>

Ciudad <%= persona.getCiudad() %>

Num. de Identificación: <%= persona.getId() %>

Abajo del cuerpo se utilizó el tag <% %> para setearle los datos al objeto, y en el párrafo se muestran esos datos con la etiqueta <%= %>. Para

tomar

un

parámetro

que

viene

por

POST

o

GET,

pueden

tomarlo

conrequest.getParameter(). Por ejemplo para llevar un parámetro "nombre" a una variable, dentro del tag que corresponda ponemos: String variable = request.getParameter("nombre"). Recuerden que llega comostring, si es un número deben convertirlo a número con código Java. Veamos el mismo caso utilizando

. Básicamente un Bean hace referencia a una clase

fácilmente reutilizable y "sencilla" por asá decirlo. La clase

  que creamos sería una

especie de Bean. Para que funcione debe tener los setters y getters que ya los hemos puesto. <%@page contentType="text/html; charset=utf-8" import="Objetos.Persona"%>

Datos de la persona:

Nombre:

Ciudad:

Numero de identificacion:

Veamos una pequeña explicación : nos sirve para

declarar un Bean. Hay que indicarle cuál paquete y clase a utilizar. Observa que le damos el id "persona" en el ejemplo, por lo que a partir de ahora usamos ese id. El scope no viene al caso por ahora. : sirve para

setearle un valor al Bean creado, usando el id que le hemos dado al crearlo. : para mostrar los valores del

Bean.

Para probar la página, tiene que estar iniciado

  en los respectivos IDE. En NetBeans

hacemos clic con el botón derecho del ratón sobre el proyecto (el panel de la izquierda) y elegir

; nos llevará automáticamente al navegador por defecto. En Eclipse pueden entrar

desde el navegador siguiendo este formato (por lo general):http://localhost:8080/MiPrimerJSP/index.jsp  o la dirección donde hayan puesto la página.

Con lo que hemos visto ya podras hacer algunos ejemplos mas completos, y más si sabes usar Bases de Datos. Un ejercicio que puedes probar por ejemplo es el siguiente: crear otra página, pongamosle " " y con " " pasarle los parámetros por GET desde un link común (oPOST desde un formulario), tomarlos y hacer cálculos o mostrarlos. La idea de este artículo es solamente comenzar a jugar con Java y páginas webs en la parte básica. Para hacer un sitio profesionalmente se utilizan otros mecanismos y hay miles de alternativas. : si quieres usar imágenes, Flash, CSS o JavaScript en la página no hay ningún problema. Guarda el material en alguna carpeta e indica la ruta en el HTML como siempre, ya

sea dinámicamente o estáticamente. Si yo tengo una carpeta " de la misma tengo otra carpeta llamda " seríacss/estilos.css

" con "

" y dentro

" con un archivo de estilos, la ruta del css