UNMSM

CLASE 1
Creando un proyecto Web

Para desarrollar un proyecto Web, se debe crear una carpeta con el nombre del
proyecto en este ejercicio crearemos una carpeta con nuestro apellido (durand)
dentro de la carpeta webapps del Jakarta.

En esta carpeta, crear la estructura de carpetas como se indica respetando los

nombres para no tener problemas mas adelante, tener mucho cuidado de las
mayúsculas como las minúsculas ya que esto siempre origina un problema muy común
al momento de referenciar las ubicaciones.

Estructura del Proyecto WEB

Los archivos .jsp pueden ir en la carpeta con el nombre de su aplicación o en la

carpeta jsp o en las sub-carpetas creadas dentro de la carpeta jsp.

En la carpeta WEB-INF\classes irán los archivos .class También puede crear carpetas
internas dentro WEB-INF\classes y poner allí los .class, pero tendrá que utilizar la
instrucción package para especificar el nombre de la carpeta interna.

La carpeta images contendrá las imágenes a utilizar en el diseño y el desarrollo de la

aplicación.

Archivo de Configuración (web.xml)

Este archivo debe ir en la carpeta WEB-INF del proyecto. Su contenido permite la

configuración de arranque del proyecto, así como ciertas características para los
demás archivos del proyecto.

Creación del archivo web.xml

Crear el archivo web.xml con el siguiente contenido inicial:

Durand Flores, Carlos Enrique 1 Java Developer – Modulo II

UNMSM

Archivo: web.xml

<?xml version="1.0" encoding="ISO-8859-1"?>

<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"

"http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

La configuración va dentro de los tags <web-app>… </web-app>

El tag <welcome-file-list> tendrá la lista de los posibles archivos de arranque del

proyecto web.

En este caso al digitar en el browser la dirección de nuestro proyecto

http://localhost:8080/durand el servidor de aplicaciones Jakarta buscará presentar el
primer archivo de la lista es decir el archivo index.html, si no lo hubiese buscara el
segundo es decir el archivo index.htm, y finalmente si no encontrase ninguno de los
archivo anteriores e la lista buscara el index.jsp.

Se puede colocar solo un archivo de arranque del proyecto mediante el tag

<welcome-file> asi el archivo que se quisiera servira de presentación al proyecto. Se
Debe tenermucho cuidado al digitar estas etiquetas, pues las letras mayúsculas o
minúsculas son sensibles en el llamado del archivo por el servidor de aplicaciones
Jakarta. Tomcat

Java Server Pages (JSP)

Los JSPs nos permiten separar la parte dinámica de nuestras páginas web del HTML
estático. Simplemente escribimos el HTML regular de la forma como lo hacemos
regularmente, pero en cuando necesitemos ejecutar código Java entonces encerramos
el código en unas etiquetas especiales, la mayoría de las cuales empiezan con "<%" y
terminan con "%>" este tipo de programación es parecida a la del PHP en tipo script.

Normalmente daremos a nuestro fichero una extensión .jsp, y normalmente lo

instalaremos en el mismo sitio que una página web normal. Aunque lo que escribamos
frecuentemente se parezca a un fichero HTML normal, detrás de la escena, la página
JSP se convierte en un en un programa compilado (servlet), donde el HTML estático
simplemente se imprime en el stream de salida estándar asociado. Esto normalmente
sólo se hace la primera vez que se solicita la página, para esto los programadores
pueden solicitar la página cuando instalan la aplicación para así estar seguros de que
el primer usuario real de la aplicación no tendrá el retardo normal y momentáneo
cuando la página JSP sea traducida y compilada por el servidor de aplicaciones.

Durand Flores, Carlos Enrique 2 Java Developer – Modulo II

UNMSM

Tags para los JSPs

A continuación se muestra los tags usados por los JSPs en la programación de páginas:

Elemento JSP Sintaxis Interpretación

Expresión JSP <%= expression %> La Expresión es evaluada y
situada en la salida.
Scriptlet JSP <% code %> El código se inserta en el método
service.
Declaración JSP <%! code %> El código se inserta en el cuerpo
de la clase del servlet, fuera del
método service.
Directiva page JSP <%@page att="val" %> Dirige al motor servlet sobre la
configuración general.
Los atributos legales son (con los
valores por defecto en negrita):
• import="package.class"
• contentType="MIMEType"
• isThreadSafe="true|false"
• session="true|false"
• buffer="sizekb|none"
• autoflush="true|false"
• extends="package.class"
• info="message"
• errorPage="url"
• isErrorPage="true|false"
• language="java"
Directiva include <%@ include file="url" Un fichero del sistema local se
JSP %> incluirá cuando la página se
traduzca a un Servlet.
Comentario JSP <%-- comment -- %> Comentario ignorado cuando se
traduce la página JSP en un
servlet.

Una directiva JSP afecta a la estructura general de la clase. Normalmente tienen la

siguiente forma:

<%@ directive attribute="value" %>

Sin embargo, también podemos combinar múltiples selecciones de atributos para una
sola directiva, de esta forma:

<%@ directive attribute1="value1" attribute2="value2" ...

attributeN="valueN" %>

Existen Tres tipos principales de directivas:

page, que nos permite hacer cosas como importar clases, personalizar la superclase
del servlet, etc.

Durand Flores, Carlos Enrique 3 Java Developer – Modulo II

UNMSM

include, que nos permite insertar un fichero dentro de la clase servlet en el momento
que el fichero JSP es traducido a un servlet.

La directiva taglib, que no era soportada en JSP 1.0, pero se pretende que permita que
los autores de JSP definan sus propias etiquetas. (Versión Actual de JSP 2.1)

La directiva page

La directiva page nos permite definir uno o más de los siguientes atributos sensibles a
las mayúsculas:

• import="package.class" o import="package.class1,...,package.classN".

Esto nos permite especificar los paquetes que deberían ser importados. Por ejemplo:

<%@ page import="java.util.*" %>

El atributo import es el único que puede aparecer múltiples veces.

• contentType="MIME-Type" o contentType="MIME-Type;
charset=Character-Set"

Esto especifica el tipo MIME de la salida. El valor por defecto es text/html. Por
ejemplo, la directiva:

<%@ page contentType="text/plain" %> tiene el mismo valor que el scriptlet

<% response.setContentType("text/plain"); %>

• isThreadSafe="true|false".

Un valor de true (por defecto) indica un procesamiento del servlet normal, donde
múltiples peticiones pueden procesarse simultáneamente con un sólo ejemplar del
servlet, bajo la suposición que del autor sincroniza las variables de ejemplar. Un valor
de false indica que el servlet debería implementar SingleThreadModel, con
peticiones enviadas serialmente o con peticiones simultáneas siendo entregadas por
ejemplares separados del servelt.

• session="true|false".

Un valor de true (por defecto) indica que la variable predefinida session (del tipo
HttpSession) debería unirse a la sesión existente si existe una, si no existe se debería
crear una nueva sesión para unirla. Un valor de false indica que no se usarán sesiones,
y los intentos de acceder a la variable session resultarán en errores en el momento en
que la página JSP sea traducida a un servlet.

• buffer="sizekb|none".

Esto especifica el tamaño del buffer para el JspWriter out. El valor por defecto es
específico del servidor, debería ser de al menos 8kb.

• autoflush="true|false".

Un valor de true (por defecto) indica que el buffer debería desacargase cuando esté
lleno. Un valor de false, raramente utilizado, indica que se debe lanzar una excepción

Durand Flores, Carlos Enrique 4 Java Developer – Modulo II

UNMSM

cuando el buffe se sobrecargue. Un valor de false es ilegal cuando usamos

buffer="none".

• extends="package.class".

Esto indica la superclase del servlet que se va a generar. Debemos usarla con extrema
precaución, ya que el servidor podría utilizar una superclase personalizada.

• info="message".

Define un string que puede usarse para ser recuperado mediante el método
getServletInfo.

• errorPage="url".

Especifica una página JSP que se debería procesar si se lanzará cualquier Throwable
pero no fuera capturado en la página actual.

• isErrorPage="true|false".

Indica si la página actual actúa o no como página de error de otra página JSP. El valor
por defecto es false.

• language="java".

En algunos momentos, esto está pensado para especificar el lenguaje a utilizar. Por
ahora, no debemos preocuparnos por él ya que java es tanto el valor por defecto como
la única opción legal.

Creación de un archivo JSP

En la carpeta con su apellido (durand) poner el archivo index.jsp cuando se termine

de programarlo y para poder ejecutar en el browser colocar este URL
http://localhost:8080/durand.

Durand Flores, Carlos Enrique 5 Java Developer – Modulo II

UNMSM

Archivo: index.jsp

<HTML>
<HEAD>
<TITLE>CINFO - Java Developer</TITLE>
</HEAD>
<BODY bgcolor=lightyellow>
<CENTER>
<% for(int i=1; i<=6; ++i)
out.println("<h" + i + ">Java Developer..!</h" + i + ">");
%>
</center>
</BODY>
<HTML>

Invocación al MS Word

El siguiente es un JSP que invoca al MS Word y lo incrusta en el browser, poniendo

texto en un documento, En la carpeta de su proyecto web o en la carpeta jsp poner el
archivo msword.jsp.

Durand Flores, Carlos Enrique 6 Java Developer – Modulo II

UNMSM

Nota: Para ejecutar esta JSP correctamente se debe tener instalado el Microsoft Word.

Para poder ejecutar en el browser colocar este URL

http://localhost:8080/durand/jsp/msword.jsp

Archivo: msword.jsp

<%@ page contentType="application/msword" %>

Una prueba de JSP que llama a Microsoft Word

Importar bibliotecas de Java

El siguiente es otro ejemplo que nos permite importar bibliotecas de Java para usar de
ellas métodos en nuestra JSP.

Para poder ejecutar en el browser colocar este URL

http://localhost:8080/durand/jsp/librerias.jsp

Durand Flores, Carlos Enrique 7 Java Developer – Modulo II

UNMSM

Archivo: librerias.jsp

<%@ page import="java.util.*" %>

<HTML>
<HEAD>
<TITLE>Funciones Matemáticas</TITLE>
</HEAD>
<BODY bgcolor=lightyellow>
<H2 ALIGN="CENTER">Funciones Matemáticas</H2>
<p>3 al cuadrado es <% out.println(Math.pow(3,2)); %>
<p>Raíz cuadrada de 110 es <% out.println(Math.sqrt(110)); %>
</BODY>
</HTML>

La directiva include

Esta directiva nos permite incluir ficheros en el momento en que la página JSP es
traducida a un servlet. La directiva se parece a esto:

<%@ include file="url relativa" %>

La URL especificada normalmente se interpreta como relativa a la página JSP a la que

se refiere, pero, al igual que las URLs relativas en general, podemos decirle al sistema
que interpreta la URL relativa al directorio home del servidor Web empezando la URL
con una barra invertida. Los contenidos del fichero incluido son analizados como texto
normal JSP, y así pueden incluir HTML estático, elementos de script, directivas y
acciones.

Durand Flores, Carlos Enrique 8 Java Developer – Modulo II

UNMSM

Prueba de Include

A continuación veremos en un ejemplo el uso de include. Los archivos a utilizar serán

include01.jsp e include02.jsp

Ambos deben estar en la misma carpeta virtual (jsp) y se debe invocar al archivo
include01.jsp Este insertará al otro dentro de si.

Para ejecutar en el browser colocar el URL

http://localhost:8080/durand/jsp/include01.jsp

Archivo: include01.jsp

<HTML>
<HEAD>
<TITLE>Prueba de include</TITLE>
</HEAD>
<BODY bgcolor=lightyellow>
Archivo: include01.jsp
<CENTER>
Hora y tiempo actual <br> <%@ include file="include02.jsp" %>
</BODY>
<HTML>

A continuación desarrollaremos el archivo include02.jsp que será invocado e

insertado en el archivo include01.jsp
Archivo: include02.jsp

<%@ page import="java.util.*" %>

<%@ page import="java.text.*" %>
<%
SimpleDateFormat sdf= new SimpleDateFormat ("hh:mm:ss a 'de'
dd/MM/yyyy");
Date d= new Date();
String s= sdf.format(d);
out.println(s);
%>

Durand Flores, Carlos Enrique 9 Java Developer – Modulo II

UNMSM

Métodos para enviar datos al Servidor Web

Una de las partes más comunes de una aplicación de comercio electrónico es un

formulario HTML en el que un usuario introduce alguna información. La información
podría ser un nombre de cliente y su dirección, una palabra o frase introducida para un
motor de búsqueda, o un conjunto de preferencias lanzadas como datos del mercado.

La información que el usuario introduce en el formulario se almacena en el objeto

request, que se envía desde el cliente al motor JSP.

La siguiente figura representa como fluyen los datos entre el cliente y el servidor (al
menos cuando usamos la implementación JSP de Sun Microsystems, otros motores JSP
podrían trabajar de forma diferente).

El motor JSP envía el objeto solicitado a cualquier componente del lado del servidor
(JavaBeansTM , servlet, o bean enterprise) que especifica el JSP. El componente maneja
la solicitud, posiblemente recuperando datos desde una base de datos u otros datos
almacenados, y pasa un objeto respuesta de vuelta al motor JSP, donde los datos se
formatean de acuerdo al diseño de la página HTML. El motor JSP y el servidor Web
entonces envían la página JSP revisada de vuelta al cliente, donde el usuario puede ver
el resultado, en el navegador Web. Los protocolos de comunicación usados entre el
cliente y el servidor pueden ser HTTP, o cualquier otro protocolo.

Los objetos request y response están siempre implícitamente disponibles para

nosotros como autores de ficheros fuentes JSP.

Método Get

Durand Flores, Carlos Enrique 10 Java Developer – Modulo II

UNMSM

El método Get añade los datos del formulario (llamada una query string (string de
solicitud)) a una URL, en la forma de parejas clave/valor desde el formulario HTML,
por ejemplo, name=john.

En el String de solicitud las parejas de clave/valor se separan por caracteres &, los
espacios se convierten en caracteres +, y los caracteres especiales se convierten a sus
correspondientes hexadecimales. Como el String de solicitud está en la URL, la página
puede ser añadida a los bookmarks o enviada por e-mail con el string de solicitud.
Tener en cuenta que este string normalmente está limitado a un número relativamente
pequeño de caracteres.

Ejemplo Metodo Get

El siguiente ejemplo envía 2 valores al Servidor los cuales son sumados por él.

Archivo: metodoget01.jsp

<HTML>
<HEAD><TITLE>Metodo Get</TITLE>
</HEAD>
<BODY bgcolor=lightyellow>
<CENTER>
<%
if(request.getQueryString() == null) {
%>
<form method=Get action=metodoget01.jsp>
Valor 1 <input name=v1><br>
Valor 2 <input name=v2><br><br>
<input type=submit value='¿Cuánto suman?'>
</form>
<%
} else
{ double x=
Double.valueOf(request.getParameter("v1")).doubleValue();
double y=
Double.valueOf(request.getParameter("v2")).doubleValue();
out.println("<h2>Suman: " + (x + y) + "</h2>");
out.println("<br><br>");
out.println("<a
href='javascript:window.history.back()'>Retornar</a>");
}
%>
</BODY>
</HTML>
Nota:

Se puede obviar escribir method=Get en el tag <form> porque el método Get

es el usado por defecto.

Durand Flores, Carlos Enrique 11 Java Developer – Modulo II

UNMSM

Resultado en el browser:

• Cuando se ejecuta el if porque el JSP lleva null la primera vez las cajas de
texto están en blanco ponga valores en ellas:

• Cuando se da clic en el botón (Observe el Address del browser).

Ejemplo sin boton submit.

La aplicación anterior puede también ser escrita sin el botón submit y manipular
posibles errores de ingreso. Ver el siguiente código:

Archivo: metodoget02.jsp

<HTML>
<HEAD><TITLE>Get</TITLE>
</HEAD>
<BODY bgcolor=lightyellow>

Durand Flores, Carlos Enrique 12 Java Developer – Modulo II

UNMSM

<CENTER>
<% if(request.getQueryString() == null) {
%> <form action= metodoget02.jsp>
Valor 1 <input name=v1><br>
Valor 2 <input name=v2><br><br>
<a href="javascript:document.forms[0].submit()">¿Cuánto
suman?
</a>
</form>
<%
} else {
try{
double x=
Double.valueOf(request.getParameter("v1")).doubleValue();
double y=
Double.valueOf(request.getParameter("v2")).doubleValue();
out.println("<h2>Suman: " + (x + y) + "</h2><br>");
}catch(NumberFormatException ex)
{ out.println("Error en ingreso de valores<br><br>");
}
out.println("<a
href='javascript:window.history.back()'>Retornar</a>");
}
%>
</BODY>
</HTML>

Método Post

Durand Flores, Carlos Enrique 13 Java Developer – Modulo II

UNMSM

El método Post, pasa los datos de una longitud ilimitada como un cuerpo de solicitud
de cabecera HTTP hacia el servidor. El usuario que trabaja en el navegador cliente no
puede ver los datos que están siendo enviados, por eso la solicitud POST es ideal para
enviar datos confidenciales (como el número de una tarjeta de crédito) o grandes
cantidades de datos al servidor.

El siguiente ejemplo envía mediante un HTML el nombre, email y el color de

preferencia para el texto a un JSP.

Ejemplo Metodo POST

El ejemplo consta de un HTML y un JSP. A continuación el código y figura del HTML:

Archivo: metodopost01.html

<html>
<head>
<title>HTML que envia datos a JSP</title>
</head>
<body bgcolor=lightyellow>
<form method=post action="metodopost01.jsp">
<table border=0>
<tr>
<td>Nombre </td>
<td><input type=text name="nombre"><td>
</tr>
<tr>
<td>Email </td>
<td><input type=text name="email" value="@"><td>
</tr>
<tr>
<td>Color favorito </td>
<td>
<Select name="fgColor">
<Option VALUE="red">red
<Option VALUE="green">green
<Option VALUE="blue">blue
<Option VALUE="magenta">magenta
<Option VALUE="orange">orange
<Option VALUE="blak">blak
<Option VALUE="cyan">cyan
</Select>
</td>
</tr>
</table>
<br>
<input type=submit value="Enviar datos!">
</form>
</body>
</html>

Durand Flores, Carlos Enrique 14 Java Developer – Modulo II

UNMSM

Archivo: metodopost01.jsp

<HTML>
<HEAD>
<TITLE>Recibe Datos de HTML</TITLE>
</HEAD>
<BODY bgcolor=lightyellow
TEXT="<%= request.getParameter("fgColor") %>">
<H2 ALIGN="CENTER">Prueba de datos</H2>
<%
out.println("<p>Hola " + request.getParameter("nombre") + "
bienvenido a está página");
out.println("<p>Su email es " + request.getParameter("email"));
%>
</BODY>
</HTML>

Durand Flores, Carlos Enrique 15 Java Developer – Modulo II