Creación de proyecto Web en NetBeans paso a paso

Creacin de proyecto Web en NetBeans
1. Abrir NetBeans y crear un proyecto de tipo WebApplication con el nombre WebTest1,

similar a las siguientes pantallas:
Ingresar nombre y todas las opciones por defecto y presionar Finish.
2. Crear una pgina JSP con nombre JSP1, la cual debe solicitar como entrada un nombre y
la eleccin 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 seccin HTML y HTML Forms. Los elementos de la
paleta se arrastran a la pgina JSP creada.
Arrastrar desde HTML Forms el elemento Form y colocar bajo el tag <body>. Al realizar esto
aparecer la configuracin del formulario, llenar con los datos de la siguiente figura y presionar
OK.
Debera agregar el siguiente cdigo HTML:
IMPORTANTE: El tag <form ... > corresponde al formulario HTML estndar 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 seccin HTML de la paleta, colocar
justo antes de tag </form>. Llenar los datos de la tabla segn la siguiente figura y
presionar OK.
Llenar las celdas de la tabla segn 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 <td></td>. Llenar segn la
siguiente figura y presionar OK.
Debera quedar similar al siguiente cdigo:
Arrastrar desde la paleta en HTML Form el elemento CheckBox para elegir la lista
de productos. Colocarlo bajo el texto Productos entre los tag <td></td>. Llenar segn
la siguiente figura y presionar OK
Agregar un salto de lnea <br> y luego repetir esto 2 veces ms con los otros productos
(Master, RedBank).
Debera quedar similar a la siguiente imagen:
Incorporar el nombre de cada opcin al comienzo del tag <input .. >. Esto debera quedar
similar a:
Arrastrar desde la paleta en HTML Form el elemento Button para definir el botn
enviar. Colocarlo bajo el tag </table>. Llenar segn la siguiente figura y presionar
OK
Ahora compilar el proyecto y ejecutar la pgina JSP1 para ver como esta quedando
esta primera pgina.
Esto debera levantar el navegador por defecto y desplegar la siguiente pgina Web:
3. Crear el servlet que recibir el request de la pgina JSP1

Crear el servlet con el wizard de NetBeans
Colocar como nombre Servlet1, dejar el resto por defecto y presionar Finish.
Insertar el siguiente cdigo en el servlet antes de la lnea 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<productos.length;i++) {
System.out.println("Producto "+i+":"+productos[i]);
}
//Redirecciona a pgina JSP2 con mensaje de xito
response.sendRedirect("JSP2.jsp");
Esto debera quedar similar a la siguiente imagen:
4. Crear pgina JSP2 con mensaje de xito.

Crear la pgina con wizard de Netbeans y colocar nombre JSP2 y presionar
Finish
En contenido de JSP2 cambiar en lnea que contiene <h1>JSP Page</h1> el texto

JSP Page por Operacin Exitosa.
5. Ahora compilar nuevamente y realizar un deploy del proyecto.
Ejecutar nuevamente la pgina JSP1, ingresar datos para el nombre, elegir productos y
luego presionar enviar.
Revisar en ventana Output de NetBeans los datos rescatados por el Servlet1 en vieta
Bundled Tomcat ...
6. Fin del Tutorial.
Un Primer JSP
Gua rpida
Descargar en PDF
Este documento te guiar por los primeros pasos para desarrollar aplicaciones web usando
NetBeans IDE. Te mostrar como crear una aplicacin web simple, su despliegue en el servidor
y su presentacin en un navegador. La aplicacin utiliza una pgina 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 fcil de usar.
Para completar esta gua, necesitaras el siguiente software y recursos.
Software
Versin
NetBeans IDE
Instalacin Web o Java EE versin 6.0

en adelante
Java Development Kit (JDK)
Versin 5 en adelante
Servidor de Aplicaciones
GlassFish
Contenedor de Servlets
Tomcat
V2
Versin 6.x
Nota
Las instalaciones Web y Java EE te permitirn 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.
Preparando el proyecto
Hay que comenzar un nuevo proyecto Tomcat en Eclipse, o Java Web/Web Application en
NetBeans. Lo nombramos MiPrimerJSP.
En el siguiente paso vamos a crear una clase Java comn y corriente muy sencilla para probar.
Primero creamos un package llamado Objetos, hacemos clic con el botn derecho del ratn
sobre Web-inf en Eclipse o en panel de la izquierda, Proyectos -> MiprimerJSP -> Source
Packages en NetBeans y elegir New -> Package ( Java Package en Netbeans ). Ahora hacemos
clic con el boton derecho del ratn en dicho package, elegir New -> Class ( Java Class en
NetBeans ) y la nombramos Persona.
Escribimos la clase:
package Objetos;
public class Persona {
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 index.jsp. En Eclipse hay que crearlo a mano, en la carpeta Webinf, pueden hacerlo a desde la carpeta del S.O. o bien New -> File sobre dicha carpeta y
nombrarlo index.jsp.
Escribiendo la pgina JSP

Lo primero que hay que indicarle a la pgina ( index.jsp ) son una serie de parmetros 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 pgina. Se puede separar por
coma o usando varias veces import. En este caso Objetos.Persona ( tambin pueden ser clases
del entorno claro, como java.sql ).
erroPage: muestra simplemente la pgina de error en caso de que ocurra uno y no sea tomado
por las excepsiones del cdigo.
Hay otros parmetros ms pero por ahora no viene al caso.
Hay varias formas de manipular la informacin de las clases en el cdigo HTML, y yendo ms
lejos podemos utilizar frameworks. Ahora vamos a ver dos formas bsicas, cdigo java enbebido
y los javaBeans. Se utilizan tags especiales para separlo del HTML comn.
Para cdigo java enbebido se utiliza:
<%= expresin %>: para mostrar datos, es decir expresiones evaluadas para la salida (por
ejemplo: persona.getNombre() en una tabla HTML).
<% cdigo %>: algoritmos y clculos comunes, tomar una variable, manipular clases (cdigo java
comn y corriente). No se puede mostrar algo en el navegador, para eso de utiliza el tag anterior.
<%! cdigo %>: se insertan en el cuerpo de la clase del servlet, fuera de cualquier mtodo
existente.
Por ahora con los los primeros tags nos alcanza.
Con esto ya se puede practicar algo, vamos a ver un ejemplo, tan fcil que casi no hacen falta
comentarios:
<%@page contentType="text/html" pageEncoding="UTF-8"
import="Objetos.Persona" errorPage=""%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Mi primer JSP</title>
</head>
<body>
<%
Persona persona= new Persona();
persona.setNombre("Boxer");
persona.setCiudad("Lomas Altas");
persona.setId(1);
%>
<h1>Datos de la Persona</h1>
<p>Datos de la persona: </p>
<p>Nombre: <%= persona.getNombre() %></p>
<p>Ciudad <%= persona.getCiudad() %></p>
<p>Num. de Identificacin: <%= persona.getId() %></p>
</body>
</html>
Abajo del cuerpo se utiliz el tag <% %> para setearle los datos al objeto, y en el prrafo se
muestran esos datos con la etiqueta <%= %>.
Para
tomar
un
parmetro
que
viene
por
POST
GET,
pueden
tomarlo
conrequest.getParameter().
Por ejemplo para llevar un parmetro "nombre" a una variable, dentro del tag que corresponda
ponemos: String variable = request.getParameter("nombre"). Recuerden que llega
comostring, si es un nmero deben convertirlo a nmero con cdigo Java.
Veamos el mismo caso utilizando javaBeans. Bsicamente un Bean hace referencia a una clase
fcilmente reutilizable y "sencilla" por as decirlo. La clase Persona que creamos sera 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"%>
<html>
<head>
<title>Mi primer JSP</title>
</head>
<body>
<jsp:useBean id="persona" scope="page" class="Objetos.Persona" />

<jsp:setProperty name="persona" property="nombre" value="Boxer" />
<jsp:setProperty name="persona" property="ciudad" value="Lomas Altas" />
<jsp:setProperty name="persona" property="id" value="1" />
<h1>Datos de la persona:</h1>
<p>Nombre: <jsp:getProperty name="persona" property="nombre" /></p>
<p>Ciudad: <jsp:getProperty name="persona" property="ciudad" /></p>
<p>Numero de identificacion: <jsp:getProperty name="persona"
property="id" /></p>
</body>
</html>
Veamos una pequea explicacin
<jsp:useBean id="algo" scope="page" class="package.class" />: nos sirve para

declarar un Bean. Hay que indicarle cul 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.
<jsp:setProperty name="algo" property="nombre" value="Boxer" />: sirve para

setearle un valor al Bean creado, usando el id que le hemos dado al crearlo.
<jsp:getProperty name="algo" property="nombre" />: para mostrar los valores del

Bean.
Probando nuestro JSP

Para probar la pgina, tiene que estar iniciado Tomcat en los respectivos IDE. En NetBeans
hacemos clic con el botn derecho del ratn sobre el proyecto (el panel de la izquierda) y
elegir"Run"; nos llevar automticamente 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 direccin donde hayan
puesto la pgina.
Recomendaciones
Con lo que hemos visto ya podras hacer algunos ejemplos mas completos, y ms si sabes usar
Bases de Datos. Un ejercicio que puedes probar por ejemplo es el siguiente: crear otra pgina,
pongamosle "datos.jsp" y con "index.jsp" pasarle los parmetros por GET desde un link comn
(oPOST desde un formulario), tomarlos y hacer clculos o mostrarlos.
La idea de este artculo es solamente comenzar a jugar con Java y pginas webs en la parte
bsica. Para hacer un sitio profesionalmente se utilizan otros mecanismos y hay miles de
alternativas.
Ultimo tip: si quieres usar imgenes, Flash, CSS o JavaScript en la pgina no hay ningn
problema. Guarda el material en alguna carpeta e indica la ruta en el HTML como siempre, ya
sea dinmicamente o estticamente. Si yo tengo una carpeta "paginas" con "index.jsp" y dentro
de la misma tengo otra carpeta llamda "css" con un archivo de estilos, la ruta del css
seracss/estilos.css

Creación de proyecto Web en NetBeans paso a paso

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Creación de proyecto Web en NetBeans paso a paso

Diunggah oleh

Hak Cipta:

Format Tersedia

Creacin de proyecto Web en NetBeans

1. Abrir NetBeans y crear un proyecto de tipo WebApplication con el nombre WebTest1,

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

Revisar la Paleta (Palette) de herramientas disponibles al lado izquierdo de Netbeans.

Debera agregar el siguiente cdigo HTML:

Llenar las celdas de la tabla segn la siguiente figura:

Debera quedar similar al siguiente cdigo:

Debera quedar similar a la siguiente imagen:

3. Crear el servlet que recibir el request de la pgina JSP1

Insertar el siguiente cdigo en el servlet antes de la lnea que contiene

//Rescata e imprime en consola el nombre ingresado en el formulario

Esto debera quedar similar a la siguiente imagen:

4. Crear pgina JSP2 con mensaje de xito.

En contenido de JSP2 cambiar en lnea que contiene <h1>JSP Page</h1> el texto

6. Fin del Tutorial.

Instalacin Web o Java EE versin 6.0

Java Development Kit (JDK)

public class Persona {

private String Nombre;

public String getCiudad(){

public void setCiudad(String Ciudad){

public String getNombre(){

public void setNombre(String Nombre){

public int getId(){

public void setId(int id){

Escribiendo la pgina JSP

contentType: especifica el tipo de salida, en este caso text/html.

<jsp:useBean id="persona" scope="page" class="Objetos.Persona" />

<jsp:setProperty name="persona" property="id" value="1" />

Veamos una pequea explicacin

<jsp:useBean id="algo" scope="page" class="package.class" />: nos sirve para

<jsp:setProperty name="algo" property="nombre" value="Boxer" />: sirve para

<jsp:getProperty name="algo" property="nombre" />: para mostrar los valores del

Probando nuestro JSP

Anda mungkin juga menyukai