Libro 162 - Curso de JSP y Servlet

Tags, Elementos y Estructura de un documento
HTML
HTML es "Hyper Text Markup Language" que significa "Lenguaje de marcado
de hipertexto". Ya hemos hablado de hipertexto en el tutorial World Wide Web,
www, w3 o La Web. Este lenguaje describe una página Web usando marcas o
tags.
A continuación vemos un ejemplo de código fuente de una página Web o

documento HTML.
<html>
<head>
<title>Hola Mundo</title>
</head>
<body>
<h1>Hola edu4java</h1>
<p>Bienvenidas a nuestra primera <br/> página Web.</p>
</body>
</html>
Tag HTML. ¿Que es un Tag HTML?

Cada palabra rodeada por los símbolos "<" y ">" en el código fuente anterior
es llamada Tag. Existen 3 tipos de Tags:
1. Tag de inicio o apertura. Ejemplo: <h1>

2. Tag de fin o cierre. Ejemplo: </h1>
3. Tag de inicio y cierre. Ejemplo: <br/>
Elemento HTML
Un tag de inicio y su correspondiente tag de fin componen un elemento HTML.
Ej: <title>Hola Mundo</title>

Lo que esta entre un tag de inicio y su correspondiente tag de fin es el
contenido del tag.
Un tag de inicio y cierre por si solo compone un elemento HTML. Ej: <br/>
Estructura básica de un documento HTML

El primer tag HTML de una página Web debería ser <html> y el
último </html>.En otras palabras toda la pagina Web debe estar contenida en
un elemento HTML.
Dentro del elemento HTML existen el elemento header que contendrá

información de configuración y el elemento body que contendrá todo lo que
es visible de nuestra página.
Cuando un Browser interpreta este código fuente anterior el resultado es:
En este ejemplo podemos ver como el elemento title define el titulo de la

página que podemos ver en la pestaña superior.
Dentro del elemento body existe un elemento h1 que define un encabezado

principal y un elemento p que define un párrafo. Dentro del elemento p hay un
elemento br que define un salto de carro.
Como podemos ver dentro de body no solo está la información a ser
representada en la página Web sino que existen marcadores o tags que indican
como representar la información.
Servidor Web o Servidor HTTP

Habíamos visto que el protocolo HTTP de la Web funciona bajo el
paradigma "Cliente – Servidor". El cliente es el Browser que solicita
páginas Web y el servidor HTTP o servidor Web las entrega. En este
tutorial vamos a centrarnos en las tecnologías asociadas al servidor
conocidas como "tecnologías del lado del servidor".
Nota: Un servidor Web no esta limitado a entregar solo paginas Web.

Puede entregar cualquier tipo de archivo como pdfs, planillas de cálculo
o incluso un formato inventado por nosotros.
Sitio Web Estático o Dinámico

En un comienzo los servidores guardaban las páginas Web como
archivos en unidades de almacenamiento. Un servidor Web se limitaba a
buscar el archivo solicitado y enviarlo al cliente. Este tipo de sitios Web
son llamados Estáticos.
Con el tiempo se comenzó a utilizar programas en el servidor que

generaban las páginas Web en el momento en que eran solicitadas. Hoy
día es muy común que las páginas de un sitio Web sean generadas con
programas escritos en PHP o java. Este tipo de sitios Web son llamados
Dinámicos.
De libros digitales a programas en la red

Con los sitios dinámicos muchos sitios pasaron de ser libros digitales a
programas en la red. Por ejemplo, si ustedes tienen una cuenta de
correo electrónico en gmail de Google la pueden manejar a través del
sitio Web http://www.gmail.com/. Pueden leer nuevos correos, borrar o
crear nuevos correos y enviarlos.
Programación Web
Estos Programas Web tuvieron tanto éxito que la mayor cantidad de
programación en estos últimos años ha sido mayoritariamente
"Programación Web". Bancos, gobierno, tiendas, agencias de viajes y
muchos más tienen sitios Web que en realidad son programas donde
nos piden un usuario y una contraseña y entonces podemos acceder a
nuestros datos y a múltiples servicios.
Parámetros y formularios
Los programas Web rompieron con la idea clásica de documentos
enlazados de hipertexto. Surge la necesidad de enviar datos desde las
páginas Web al servidor (por ejemplo el usuario y la contraseña).
Cuando esto sucedió tanto el HTTP como el HTML fueron modificados
para soportar el envío de parámetros y formularios desde el cliente al
servidor. Para esta comunicación se inventaron dos métodos llamados
Get y Post.
Método Get
Esta técnica consiste en agregar al final del URL un signo "?" y pares
de "nombre" y "valor" separados por un símbolo "&". Ejemplo:
El método Get tiene dos principales inconvenientes. El primero es que se
ven los datos en el URL. Esto es muy malo en el ejemplo de usuario y
clave ya que cualquiera que viera la casilla del URL en el navegador
vería nuestra clave. La segunda desventaja es que el largo del URL esta
limitado por lo que esto nos limita la cantidad de caracteres que
podemos enviar.
Método Post
Este método igual que el Get envía al servidor pares
de "nombre" y "valor" pero lo hace dentro del mensaje HTTP que
solicita una pagina al servidor. De esta forma los datos no son visibles
en el URL y no existe la limitación dada por el largo máximo de un URL.
El método Post está asociado con el de formulario HTML. Aunque se
pueden usar formularios usando el método Get.
Formulario HTML
A continuación se ve un simple formulario Web en el Browser. Cuando
oprimamos el botón enviar el contenido del las cajas de texto rellenas
con edu4java y eli4java serán enviadas al
servidor.
Este es el código HTML para generarlo:
<html>
<body>
<form action="http://www.edu4java.com/es/web/web3.html" method="get">
<table>
<tr>
<td>User</td>
<td><input name="user" />
</td>
</tr>
<tr>
<td>password</td>
<td><input name="password" /></td>
</tr>
</table>
<input type="submit" />
</form>
</body>
</html>
 Podemos ver que la etiqueta form tiene un atributo action que indica a
que servidor se enviará la petición de página.
 Las etiquetas input representan las cajas de texto y el
atributo name indica el nombre del parámetro usado para enviar la
información de su de caja de texto al servidor.
 El atributo method indica el método Get del que hablamos antes para
enviar la información.
Después de oprimir enviar podemos ver en el URL de la página resultado

como fueron enviados los datos del formulario al servidor.
Nota: ignorar el error "Oops! This link …" esto es porque
www.edu4java.com es una página estática y no esta preparada para
recibir parámetros.
Si cambiamos el método de Get a Post
<form action="http://www.edu4java.com/es/web/web3.html" method="post">
el servidor recibiría la información pero no se vería en el URL
PHP y Java del lado del servidor: Servlet y

Jsp
Los lenguajes PHP y Java se han convertido en los más usados del lado
del servidor. PHP es visto por muchos como la solución más económica
para proyectos simples, aunque con él se han desarrollado aplicaciones
como Facebook. Java es hoy día el lenguaje más usado en el planeta y
es el más usado a nivel universitario, empresarial y gubernamental.
Mucha gente cree que la elección de java para un gran proyecto es
obligatoria. La comunidad java posee innumerable proyectos y
Frameworks comerciales y de código abierto como Struts, Spring,
Maven, Google Web Toolkit GWT, etc.
Que es un Servlet?
Un Servlet es un objeto java que pertenece a una clase que extiende
javax.servlet.http.HttpServlet. Esto no es del todo exacto ya que existen
diferentes tipos de Servlets pero con diferencia HttpServlet es el más
usado.
Que es un contenedor de Servlets?

Un contenedor de Servlet es un programa capaz de recibir peticiones de
páginas web y redireccionar estas peticiones a un objeto Servlet.
Como funcionan un contenedor de

Servlets?
1. El Browser pide una página al servidor HTTP que es un contenedor de
Servlets
2. El contenedor de Servlets delega la petición a un Servlet en particular
elegido de entre los Servlets que contiene.
3. El Servlet, que es una objeto java, se encarga de generar el texto de la
página web que se entrega al contenedor.
4. El contenedor devuelve la página web al Browser que la solicitó.
Download Apache Tomcat

El servidor Tomcat ha sido desarrollado por "Apache Software
Foundation" http://apache.org/. Esta comunidad tiene tal importancia
que quizás sea la responsable del éxito de java. Tiene muchos proyectos
interesantes pero sin duda el que más significativo es y será Tomcat.
Podemos descargarnos el contenedor desde http://tomcat.apache.org/
Entre las versiones para Windows existen una en forma de zip y otra con
un instalador de servicio Windows. Como quiero mantener este tutorial
lo mas simple posible usaré la versión zip así dejamos la explicación de
que es un servicio Windows para otro tutorial ;) Descargamos el zip (32
o 64bit) y lo descomprimimos en C:\.
En la instalación, dentro del

subdirectorio bin\ encontraremos startup.bat con el cual podemos
arrancar el servidor.
Hay que tener en cuenta que Tomcat depende de java por lo cual
buscará la variable de sistema JAVA_HOME que le indique donde esta
la instalación de java. Ejemplo: JAVA_HOME=" C:\Program
Files\Java\jdk1.6.0_21"
Una vez arrancado el servidor podemos comprobar si funciona con

cualquier Browser direccionado en http://localhost:8080 y deberíamos
ver algo como
Ahora dentro del directorio webapps\ creamos un directorio first-
servlet\ que será el nombre de nuestra aplicación web y dentro
creamos un archivo llamado welcome.html con el siguiente contenido:
<html>
<head>
<title>Hola Mundo</title>
</head>
<body>
<h1>Hola edu4java</h1>
<p>Bienvenidas a nuestra primera <br/> página Web.</p>
</body>
</html>
Volvemos al Browser y apuntamos a http://localhost:8080/first-
servlet/welcome.html y deberíamos obtener:
Cabe destacar que el nombre del proyecto y de la página están en letra

minúscula. Por convención todo lo que aparezca en el URL debe estar en
minúscula.
Primer Servlet, estructura de un sitio web según

estándar J2EE
Para realizar el despliegue de una aplicación web en Tomcat basta
con crear un directorio con el nombre de la aplicación dentro de
webapps\. En el tutorial anterior creamos la aplicación first-servlet e
incluimos una pagina estática welcome.html.
Una aplicación web según las especificaciones de J2EE debe tener una
estructura de directorios y un archivo llamado web.xml tal como se ve
en el siguiente esquema:
J2EE es un comité formado por empresas del sector java empresarial
que definen especificaciones (estándares) para que los productos de las
diferentes empresas sean compatibles.
Las paginas web estáticas se colocan dentro del directorio de aplicación

(first-servlet\ en nuestro caso) pero nunca dentro del directorio WEB-
INF\ ya que este no puede ser accedido desde el Browser.
Dentro del directorio WEB-INF\classes\ se colocaran las clases java

compiladas que componen la aplicación (incluidos los servlets). En el
directorio WEB-INF\lib\ se pueden incluir librerías (archivos .jar) que
pueda necesitar la aplicación.
Vamos a crear un Servlet llamado com.edu4java.servlets.FirstServlet

con el siguiente código fuente:
package com.edu4java.servlets;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class FirstServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
PrintWriter out = resp.getWriter();

out.println("<html>");
out.println("<body>");
out.println("hoy es " + new Date());
out.println("</body>");
out.println("</html>");
}
}
La clase FirstServlet extiende javax.servlet.http.HttpServlet y
sobrescribe el método doGet(HttpServletRequest req,
HttpServletResponse resp) que es llamado cuando el Servidor Http
recibe una petición de tipo GET desde el Browser (para une explicación
de lo que es un método GET y POST ver el tutorial Servidor Web o
Servidor HTTP).
En método doGet recibe dos parámetros, el primero es un objeto de

tipo HttpServletRequest que contiene toda la información acerca de la
petición de la página web y el segundo es un objeto de
tipo HttpServletResponse que se utiliza para rellenar la respuesta que
será enviada al Browser.
En el código fuente se puede ver como obtenemos un

objeto java.io.PrintWriter del objeto HttpServletResponse y lo
usamos para enviar una página web con la fecha actual tomada del
sistema usando un objeto del tipo java.util.Date.
Para desplegar este Servlet en el servidor debemos copiar el archivo

compilado FirstServlet.class el directorio WEB-INF\Classes\ como se
muestra a continuación:
Por último solo nos resta configurar el archivo web.xml para que
Tomcat sepa cuando debe llamar al Servlet FirstServlet. Vamos a
configurarlo para que sea llamado cuando alguien pregunte
por http://localhost:8080/first-servlet/what-time-is-it
<web-app>
<servlet>
<servlet-name>timeservlet</servlet-name>
<servlet-class>com.edu4java.servlets.FirstServlet</servlet-class>
</servlet>
<servlet-mapping>
<url-pattern>/what-time-is-it</url-pattern>
</servlet-mapping>
</web-app>
<web-app> es el primer elemento en web.xml. Dentro, el
elemento <servlet> indica que se creará un Servlet de la
clasecom.edu4java.servlets.FirstServlet bajo el nombre
interno timeservlet. El elemento <servlet-mapping> asociará el
URL/what-time-is-it al Servlet con nombre interno timeservlet.
Por último nos resta reiniciar el servidor Tomcat: cerrar la ventana ms-
dos del servidor, volver a ejecutar startup.bat
y direccionar un Browser a http://localhost:8080/first-servlet/what-

time-is-it
Parámetros, método GET y POST en Servlets

Los parámetros son la forma de que el cliente o usuario pueda enviar
información al servidor Http. Por ejemplo en una típica pantalla de login
necesitamos enviar el usuario y la clave al servidor para que la valide.
Como hace el cliente o Browser para enviar estos parámetros usando el
método GET o POST esta explicado en el tutorialServidor Web o Servidor
HTTP. Lo que vamos a ver en este tutorial es como recuperar esta
información en el servidor usando el API Servlet.
Lo primero que vamos a hacer es crear en nuestro sitio una página

login.html con el siguiente contenido
<html>
<body>
<form action="login" method="get">
<table>
<tr>
<td>User</td>
<td><input name="user" /></td>
</tr>
<tr>
<td>password</td>
</tr>
</table>
</form>
</body>
</html>
Lo siguiente es crear un Servlet que reciba la petición en /login que es
la dirección indicada en el atributo action de la etiqueta <form> de
login.html
public class LoginServlet extends HttpServlet {

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse
resp)
String user = req.getParameter("user");
String pass = req.getParameter("password");
if ("edu4java".equals(user) && "eli4java".equals(pass)) {
response(resp, "login ok");
} else {
response(resp, "invalid login");
}
}
private void response(HttpServletResponse resp, String msg)

throws IOException {
out.println("<t1>" + msg + "</t1>");
}
}
Compilamos este Servlet e incluimos LoginServlet.class en el
directorio /WEB-INF/classes. Modificamos web.xml para
enlazar /login con este Servlet.
<web-app>
<servlet>
<servlet-
class>com.edu4java.servlets.FirstServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>login-servlet</servlet-name>
<servlet-
class>com.edu4java.servlets.LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<url-pattern>/what-time-is-it</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>login-servlet</servlet-name>
<url-pattern>/login</url-pattern>
</servlet-mapping>
</web-app>
Reiniciamos el servidor, abrimos la pagina login.html, colocamos una x
en usuario, una x en password y oprimimos el boton submit.
Como respuesta recibimos
indicándonos que el login ha fallado. Si repetimos la operación con

edu4java como user y eli4java como password obtenemos
El problema aquí es que la password secreta queda visible en el

URL …/login?user=edu4java&password=eli4java, quedará en el
historial del Browser y cualquiera que acceda al Browser después de
nosotros podrá obtenerla fácilmente. Esto puede ser solucionado
cambiando el método de envío del formulario a POST en login.html.
<html>
<body>
<form action="login" method="post">
<table>
<tr>
<td>User</td>
</tr>
<tr>
<td>password</td>
</tr>
</table>
</form>
</body>
</html>
Pero al usar de nuevo login.html recibiremos el siguiente error.
Lo que sucede aquí es que no hemos implementado el

método doPost (solo implementamos doGet) por lo que nuestro Servlet
no esta capacitado para recibir peticiones POST. El siguiente código
muestra la modificación necesaria para que funcione.

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse
resp)
String user = req.getParameter("user");
String pass = req.getParameter("password");
response(resp, "login ok");
} else {
response(resp, "invalid login");
}
}

}
}
El único cambio es que reemplacé doGet por doPost. Después de
recompilar y desplegar el Servlet, reiniciar el servidor y volver a
utilizar login.html obtenemos
Donde podemos ver que han desaparecido los parámetros del URL.
Uso de Eclipse IDE for Java EE Developers

Hasta ahora hemos usado la versión de Eclipse Classic para compilar
los servlets y copiábamos los archivos *.class manualmente al directorio
/WEB-INF/classes. Para que los cambios se actualicen reiniciábamos el
servidor Tomcat manualmente. En este tutorial veremos como podemos
simplificar este proceso usando la versión de Eclipse para java EE.
Además esta versión incluye editores de html y jsp que hacen más fácil
el trabajo con este tipo de archivos.
Descargar e instalar Eclipse IDE for Java EE

Developers
Lo primero que haremos es descargarnos Eclipse IDE for Java EE
Developers e instalarlo en nuestro ordenador o computadora.
Descargamos el archivo *.zip y lo descomprimimos en un directorio.
Dentro del directorio de instalación (en mi casoC:\eclipseJEE2)
ejecutamos eclipse.exe y indicamos el workspace (en mi
caso C:\eclipseJEE2\workspace\) que es el directorio donde
deseamos trabajar.
Registrar el servidor Tomcat en Eclipse

A continuación buscamos la vista servidores para registrar el servidor
Tomcat que estamos utilizando. En el menú contextual (botón derecho
del raton sobre la vista) elegimos new server que nos lleva a una
ventana donde debemos elegir que servidor deseamos agregar.
Entre los servidores podemos ver los contenedores de servlets antes
mencionados (WebSphere, JBoss, etc). Elegimos Tomcat versión 6 que
es el que usamos para este tutorial y aparecerá la siguiente ventana.
Oprimimos el botón Browse y seleccionamos el directorio donde se

encuentra nuestra instalación de Tomcat y por último hacemos click en
Finish.
Ahora podemos ver el servidor Tomcat en la vista de servidor y tambien

un nuevo proyecto llamado Servers donde también podemos ver a
nuestro servidor tomcat.
Crear un proyecto Web llamado first-jee

En la vista Project Explorer botón derecho del raton - new - project
En la ventana de nuevo
proyecto dentro de la carpeta Web seleccionamos Dynamic Web Project.
Como pueden ver en la ventana New Dynamic Web Projectapache

tommcat 6 ya ha sido seleccionado como nuestro target runtime. Si
tuviéramos otro servidor instalado como JBoss y fueramos a trabajar
con JBoss cambiaríamos el target a JBoss.
Para mantener este tutorial simple ignoraremos el resto de las
configuraciones, rellenamos Project name con first-jee como nombre
de nuestro proyecto y hacemos click en finish.
Estructura del proyecto
En la vista de proyectos podemos ver la estructura del proyecto que

acabamos de crear. Aquí hay dos carpetas que nos interesan:
1. Java Resources: aquí estarán todos los archivos *.java y eclipse se

encargará automáticamente de publicar los *.class en donde
corresponda.
2. WebContent: aquí estarán los archivos *.html, *.jsp, etc. dentro de esta
carpeta podemos ver la estructura estándar de J2EE para un proyecto
Web con la carpeta WEB-INF, el archivo web.xml, etc.
Copiar el ejemplo anterior y ejecutarlo

Vamos a repetir el tutorial anterior usando este eclipse. Para esto
copiaremos las archivos web.xml, login.html y LoginServlet.java desde
el tutorial anterior Parámetros, método GET y POST en Servlets a
nuestro proyecto. En el gráfico de la derecha podemos ver como queda
nuestro proyecto.
Por último hacemos click con el botón derecho del ratón sobre login.html
- Run as - Run on Server y aparecerá la ventana Run On Server.
Le damos a finish y obtenemos:
¿Qué pasó aquí? magia ;) después de que hicimos click en finish eclipse
hizo lo siguiente:
1. Publicó nuestra aplicación en tomcat. Paso conocido como Despliegue

(Deployment)
2. Inició el servidor Tomcat
3. Abrió un browser o cliente http interno apuntando a
http://localhost:8080/first-jee/login
Si rellenamos user y password con edu4java y eli4java respectivamente

y hacemos click en Submit Query obtenemos:
En el siguiente tutorial veremos más sobre como funciona eclipse JEE ..
Despliegue (Deployment) de la aplicación Web

En el tutorial anterior instalamos Eclipse IDE for Java EE Developers,
creamos un proyecto (ejemplo login del tutorial anterior) y lo
ejecutamos. En este tutorial veremos en detalle como funciona este
mecanismo y el despliegue de una aplicación en un servidor de
producción.
¿Que es Despliegue (Deployment) de una

aplicación?
Para poder probar la aplicación en los primeros tutoriales nosotros
copiábamos a mano todos los archivos de la aplicación web a la carpeta
webapps del servidor Tomcat. Esta acción de copiar los archivos a este
directorio es conocida como "Despliegue de la aplicación Web".
Normalmente cuando se trabaja sobre un proyecto web J2EE se hace
sobre una herramienta de desarrollo como eclipse y para probar la
aplicación la herramienta suele hacer un despliegue automático para
poder hacer pruebas de forma rápida.
Cuando tenemos la aplicación terminada el despliegue se hará sobre un

servidor de producción. Este servidor es el que usarán los usuarios de la
aplicación Web. Este despliegue normalmente se realiza utilizando
un archivo WAR.
Despliegue automático en Eclipse IDE for

Java EE Developers
En el tutorial anterior dijimos que al ejecutar se realizan los siguientes
pasos
1. Se publica nuestra aplicación en Tomcat. Paso conocido como

Despliegue (Deployment)
2. Se inicia el servidor Tomcat
3. Se abre un browser o cliente http interno apuntando a
http://localhost:8080/first-jee/login.html
Lo primero que uno creería es que en el paso 1 eclipse publica el

contenido de estas carpetas Java Resources y WebContent en el
directorio webapps de Tomcat. La realidad es un poco mas complicada.
Eclipse publica en un directorio temporal dentro del workspace. En mi
caso
C:\eclipseJEE2\workspace\.metadata\.plugins\org.eclipse.wst.server.cor
e\tmp0\wtpwebapps
¿Cómo es que Tomcat ejecuta la aplicación Web si no está en webapps.
La respuesta está en que eclipse inicia Tomcat con la siguiente
instrucción:
start -
Dcatalina.base="C:\eclipseJEE2\workspace\.metadata\.plugins\org.eclip
se.wst.server.core\tmp0" -Dcatalina.home="C:\apache-tomcat-6.0.33" -
Dwtp.deploy="C:\eclipseJEE2\workspace\.metadata\.plugins\org.eclipse
.wst.server.core\tmp0\wtpwebapps" -Djava.endorsed.dirs="C:\apache-
tomcat-6.0.33\endorsed"
Esto se puede ver haciendo click en el menú Run - Run Configurations
...
Despliegue utilizando archivo WAR
Un archivo WAR es un archivo comprimido con todos los archivos que
hasta ahora desplegamos manualmente en webapps. Este archivo
internamente tiene la misma estructura que usamos anteriormente:
directorio WEB-INF, lib, classes, etc. Para desplegar un WAR en Tomcat
basta con copiarlo al directorio webapps.
Una buena razón para utilizar archivos *.war es que normalmente los
equipos de desarrollo de aplicaciones y los de instalación están
conformados por distintas personas. Enviar un solo archivo para
desplegar es más sencillo y presta a menos confusiones que enviar
varios.
Eclipse JEE permite generar el archivo WAR de la aplicación
seleccionando el proyecto, click en botón derecho del ratón - Export -
WAR file
En Destination coloco el lugar donde quiero que deje el archivo WAR. En

mi caso lo dejo directamente en el directorio webapps de la instalación
de Tomcat.
Para probar la aplicación sólo tengo que iniciar Tomcat ejecutando
C:\apache-tomcat-6.0.33\bin\start.bat
y a continuación abrir un browser con
http://localhost:8080/first-jee/login.html
por defecto en el url se pone el nombre de WAR sin la extensión: first-
jee.
En el próximo tutorial veremos como hacer una JSP con las facilidades
que nos brinda Eclipse JEE
Introducción a Java Server Pages JSP

Este tutorial es el primero de varios donde veremos que son, como
funcionan y principales usos que podemos darles a las páginas JSP Java
Server Pages y demás tecnologías relacionadas.
¿Qué es una página JSP?

Una JSP es un documento basados en tags HTMLs y tags propios de JSP.
A continuación vemos un ejemplo de una página llamada login.jsp:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Login result</title>
</head>
<body>
<%
String user = request.getParameter("user");
String pass = request.getParameter("password");
out.println("login ok");
} else {
out.println("invalid login");
}
%>
</body>
</html>
Aquí podemos ver que todo es HTML salvo lo que se encuentra dentro
de los tags <% %> que es código java. Esta página JSP hace lo mismos
que el código del siguiente Servlet.

@Override
protected void doPost(HttpServletRequest request,
HttpServletResponse response)
response(response, "login ok");
} else {
response(response, "invalid login");
}
}

out.println("<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01
Transitional//EN\"" +
" \"http://www.w3.org/TR/html4/loose.dtd\">");
out.println("<head>");
out.println("<meta http-equiv=\"Content-Type\"
content=\"text/html; " +
"charset=ISO-8859-1\">");
out.println("<title>Login result</title>");
out.println("</head>");
}
}
Desde el punto de vista de un diseñador de páginas webs la jsp es
infinitamente más sencilla que el servlet. Teniendo en cuenta que
normalmente en las empresas los diseñadores web normalmente no
tiene grandes conocimientos de java y viceversa se hace evidente las
ventajas de JSP. Incluso para un programador java experimentado
cuando la cantidad de html en la página es mucha el trabajo se puede
volver una pesadilla. Imaginen páginas y páginas de out.println( ...
<%
} else {
}
%>
Si nos centramos en el código java de la JSP podremos notar no hay
declaración de las variables request y out. Estas variables son conocidas
como Objetos Implícitos (Implicit Objects) y están predefinidas con
nombres estándares para ser utilizadas por el programador en el código
java de las JSPs. A continuación se describe algunos de estos Objetos
Implícitos:
request es el objeto con la información recibida desde el browser
es el objeto que contendrá la información que enviaremos

response
como respuesta al browser
es un objeto Writer que podemos utilizar para enviar Html (o

out
cualquier clase de contenido) al browser
este objeto mantiene datos entre llamadas del mismo

session
usuario.
este objeto mantiene datos durante toda la vida de la
application
aplicación
Los objetos request y response son los que se reciben como

parámetros en los métodos doPost(HttpServletRequest request,
HttpServletResponse response) y doGet(HttpServletRequest request,
HttpServletResponse response). Los objetos request, response y
application permiten almacenar información y los veremos en
profundidad en un tutorial sobre Alcances o Scopes en una aplicación
web.
Probando login.jsp
Copiamos login.jsp a WebContent y modificamos login.html para que en
vez de llamar a /login llame directamente a login.jsp
<html>
<body>
<form action="login.jsp" method="post">
<table>
<tr>
<td>User</td>
</tr>
<tr>
<td>password</td>
</tr>
</table>
</form>
</body>
</html>
Boton derecho del raton en login.html - Run as - Run on server. Se abre
http://localhost:8080/first-jee/login.html. Rellenamos user, password y
oprimimos el botón Submit Query.
Otra conveniencia de las JSPs es que no es nesesario declararlas en
web.xml.
¿Cómo funciona una JSP en el servidor o

contenedor de Servlets?
Cuando desplegamos una JSP e iniciamos el servidor, el servidor crea el
código java para un servlet a partir del contenido de la JSP y lo compila.
En mi instalación podemos encontrar los archivos .java y .class de este
servlet en:
C:\eclipseJEE2\workspace\.metadata\.plugins\org.eclipse.wst.server.co
re\tmp0\work\Catalina\localhost\first-jee\org\apache\jsp
No es necesario entender todo el código java generado pero es
interesante darle un vistazo.
package org.apache.jsp;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.jsp.*;
public final class login_jsp extends

org.apache.jasper.runtime.HttpJspBase
implements org.apache.jasper.runtime.JspSourceDependent {
private static final JspFactory _jspxFactory =

JspFactory.getDefaultFactory();
private static java.util.List _jspx_dependants;
private javax.el.ExpressionFactory _el_expressionfactory;

private org.apache.AnnotationProcessor _jsp_annotationprocessor;
public Object getDependants() {

return _jspx_dependants;
}
public void _jspInit() {

_el_expressionfactory =
_jspxFactory.getJspApplicationContext(getServletConfig()
.getServletContext()).getExpressionFactory();
_jsp_annotationprocessor = (org.apache.AnnotationProcessor)
getServletConfig()
.getServletContext().getAttribute(org.apache.AnnotationProcessor.c
lass.getName());
}
public void _jspDestroy() {

}
public void _jspService(HttpServletRequest request, HttpServletResponse
response)
throws java.io.IOException, ServletException {
PageContext pageContext = null;

HttpSession session = null;
ServletContext application = null;
ServletConfig config = null;
JspWriter out = null;
Object page = this;
JspWriter _jspx_out = null;
PageContext _jspx_page_context = null;
try {
response.setContentType("text/html");
pageContext = _jspxFactory.getPageContext(this, request, response,
null, true, 8192, true);
_jspx_page_context = pageContext;
application = pageContext.getServletContext();
config = pageContext.getServletConfig();
session = pageContext.getSession();
out = pageContext.getOut();
_jspx_out = out;
out.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01

Transitional//EN\""+
" \"http://www.w3.org/TR/html4/loose.dtd\">\r\n");
out.write("<html>\r\n");
out.write("<head>\r\n");
out.write("<meta http-equiv=\"Content-Type\" content=\"text/html;
charset=ISO-8859-1\">\r\n");
out.write("<title>Login result</title>\r\n");
out.write("</head>\r\n");
out.write("<body>\r\n");
out.write("\t");

} else {
}
out.write("\r\n");
out.write("</body>\r\n");
out.write("</html>");
} catch (Throwable t) {
if (!(t instanceof SkipPageException)){
out = _jspx_out;
if (out != null && out.getBufferSize() != 0)
try { out.clearBuffer(); } catch (java.io.IOException e) {}
if (_jspx_page_context != null)
_jspx_page_context.handlePageException(t);
}
} finally {
_jspxFactory.releasePageContext(_jspx_page_context);
}
}
}
Algunas curiosidades:
 La clase HttpJspBase extiende HttpServlet.

 _jspService(HttpServletRequest request, HttpServletResponse response)
reemplaza a doPost y doGet.
 Podemos ver las declaraciones de los objetos implícitos request,
response, out, session, etc.
 El código html de nuestra JSP es enviado al browser usando out.write().
En el próximo tutorial veremos depurar nuestra aplicación web.

Debugging.
Depurar nuestra aplicación web. Debugging.

Este tutorial veremos como depurar o debugear tanto JSPs, Servlets o
código java general de nuestra aplicación Web.
Pasos para depurar o debugear

En este tutorial vamos a depurar el servlet LoginServlet.java y la JSP
login.jsp con los que trabajamos en el tutorial anterior.
Lo primero que haremos es colocar puntos de interrupción

(breakpoints)
Abrimos login.jsp y hacemos doble click sobre el margen izquierdo del
editor en la línea de código donde queremos interrumpir la ejecución de
la aplicación. Si volvemos a hacer doble click sobre el bearkpoint este
desaparece.
De forma similar abrimos LoginServlet.java y hacemos doble click sobre
el margen izquierdo del editor en la línea de código donde queremos
interrumpir la ejecución en el servlet.
Iniciamos el servidor Tomcat en modo Debug y ejecutamos la
aplicación.
Sobre login.html botón derecho del ratón - Debug As - Debug on Server.
Esto abre el browser en http://localhost:8080/first-jee/login.html.
A diferencia de las ejecuciones anteriores podemos ver en la vista
Servers que a la derecha de Tomcat v6.0 at localhost indica Depurando
(Debugging). A continuación si oprimimos el botón Submit Query
aparecerá
Esta ventana nos pide confirmación para el cambio a la perspectiva

debug en eclipse. Para evitar que esta ventana vuelva a aparecer
marcamos "Remember my decision" y oprimimos yes. A continuación
podemos ver la perspectiva Debug (en la esquina superior derecha
vemos una cucaracha seleccionada). No se asusten si ven las vistas
dispuestas de diferente forma, lo que pasa es que yo he personalizado
esta vista arrastrando y soltando las vistas a mi gusto.
En la imagen anterior podemos ver al editor de login.jsp con una línea

verde en el lugar donde pusimos el breakpoint. Esto significa que la
ejecución esta detenida en esa línea.
Abajo, en la vista variables se ven las variables que existen en este

momento de la ejecución y podemos explorar su contenido.
A la izquierda, en la vista Debug se puede ver lo que se conoce como

pila de ejecución. Cada línea indicada con es un thread del servidor
en ejecución y podemos ver que un thread esta detenido en la línea 10
de la página login.jsp. Abajo de "login.jsp line:10".
Vale destacar que las opciones de debug de una JSP son más limitadas
que sobre un archivo .java. Para ver esto vamos a depurar el servlet
LoginServlet.java.
Primero vamos a detener la ejecución actual haciendo click sobre el

cuadrado rojo en la vista Debug y volvemos a la perspectiva JEE
haciendo click en el botón con un grano de café en la esquina superior
derecha de eclipse. Luego vamos a crear una nueva página login-
servlet.html con el siguiente contenido
<html>
<body>
<form action="login" method="post">
<table>
<tr>
<td>User</td>
</tr>
<tr>
<td>password</td>
</tr>
</table>
</form>
</body>
</html>
Esta página es igual a login.jsp con la única diferencia que action apunta
a login en vez de login.jsp. Sobre login-servlet.html botón derecho del
ratón - Debug As - Debug on Server y se abre el browser en
http://localhost:8080/first-jee/login-servlet.html. A continuación
rellenamos User con edu4java y oprimimos el botón Submit:
Aquí vemos que la ejecución se ha detenido en el breakpoint que
pusimos en el servlet. Si ponemos el puntero del ratón sobre la variable
user podemos ver que su contenido es edu4java. Esta opción no existe
cuando depuramos una JSP.
En el próximo tutorial veremos Depuración sobre un el servidor remoto.

Remote Debuggin
Depuración sobre un el servidor remoto. Remote

Debugging
Este tutorial veremos como depurar de forma remota código java que
puede estar ejecutándose en un servidor que no es la máquina donde
estamos ejecutando Eclipse. Veremos con más en detalle como funciona
el proceso de depuración en eclipse y el servidor Tomcat. También
veremos algunos conceptos sobre entorno de desarrollo en las
empresas.
Workstation y Host. Estación de Trabajo y
Servidor
Workstation o Estación de Trabajo es la máquina donde trabaja el
programador y donde está instalado elipse. Un Host o Servidor es una
máquina donde se instalan las aplicaciones de servidor como las
aplicaciones webs, servidores de base de datos SQL, servicios Web, etc.
Típicamente un programador trabaja sobre su Workstation y cuando
tiene una versión estable, la publica (hace un despliegue) en el Host
para que la vean los clientes, usuarios de la aplicación o equipos de
testing.
Entorno de desarrollo, integración, pre-

producción y producción
El entorno de desarrollo es el conjunto de hardware y software que
utiliza el programador para programar. Puede estar compuesto sólo de
un Workstation o también incluir uno o más servidores Host. A veces en
vez de utilizar un servidor Web en nuestra Workstation se utiliza un
servidor para publicar la aplicación.
Cuando la aplicación esta finalizada se instala en uno o varios servidores

o Hosts que se conocen como entorno de producción. Esta instalación
será la que usan los usuarios finales de la aplicación Web.
En empresas grandes existen entornos intermedios conocidos como

integración, pre-producción o testing usados para probar la aplicación
antes de pasarla al entorno de producción.
¿Cuándo nos interesa la depuración

remota?
Cuando una aplicación está instalada sobre un servidor de integración o
producción es normal que se comunique con otras aplicaciones (Ej.:
servidores SQL, servicios Web, etc.). Muchas veces esta interacción solo
puede ser probada en el servidor. Muchas veces las Workstations usan
Windows y los servidores Linux.
Debido a lo antes mencionado muchas veces encontramos errores que

solo se ven cuando nuestra aplicación está instalada en el servidor
mientra que en nuestra Workstation funciona. Otras veces ni siquiera es
posible probar ciertas funcionalidades en la Workstation. En estos casos
poder depurar la aplicación en el servidor es de gran ayuda.
¿Cómo funciona la depuración remota?

La depuración remota es una capacidad que ofrece la maquina virtual de
java JVM. Esta facilidad no está limitada a Tomcat y se puede usar con
cualquier programa escrito en java.
El siguiente gráfico muestra una aplicación Web llamada app1

desplegada sobre un Tomcat instalado en un Host y que está siendo
depurada desde un eclipse instalado sobre una Workstation.
En Eclipse se encuentra el código fuente de la aplicación app1 con los

breakpoints donde se quiere que se detenga el depurador. La JVM se
comunica con Elipse usando el protocolo tcp/ip.
Para iniciar este esquema se arranca Tomcat para depuración remota

indicando un puerto tcp/ip (ej:8000) donde se quedará esperando que
se conecte Eclipse. Luego en Eclipse iniciamos una depuración remota
indicando la dirección ip del Host y el puerto indicado (Ej.:8000).
Depurando nuestro ejemplo first-jee

Lo primero que haremos es generar el archivo first-jee.war y copiarlo
al directorio webapps de Tomcat (Botón derecho del ratón sobre el
proyecto - Export - WAR file ...). Una vez copiado necesitamos iniciar
Tomcat en depuración remota.
Los contenedores de Servlets como Tomcat son aplicaciones java. Si
recuerdan de los tutoriales anteriores, arrancábamos el Tomcat con
start.bat. Cuando ejecutamos start.bat este ejecuta setclasspath.bat y
finalmente catalina.bat el cual termina ejecutando algo similar a:
java -classpath "C:\apache-tomcat-6.0.33\bin\bootstrap.jar"

org.apache.catalina.startup.Bootstrap
Esta instrucción le dice a la JVM que ejecute el método estático main de
la clase Bootstrap que se encuentra dentro del archivo bootstrap.jar. El
método main iniciará el servidor que se quedará esperando peticiones
http en el puerto 8080 (por defecto).
Podemos decirle a la JVM que queremos que se inicie en forma de debug

remoto incluyendo las opciones -Xdebug -
Xrunjdwp:transport=dt_socket,address=8000,server=y,suspend
=y
java -Xdebug -
Xrunjdwp:transport=dt_socket,address=8000,server=y,suspen
d=y -classpath "C:\apache-tomcat-6.0.33\bin\bootstrap.jar"
org.apache.catalina.startup.Bootstrap
Como hemos indicado suspend=y la JVM se queda esperando la

conexión del depurador en el puerto 8000. Para establecer esta
conexión en Eclipse vamos a menú Run - Debug Configuration - Remote
Java Application -new
En Project indicamos el proyecto que contiene el código fuente de la
aplicación que vamos a depurar. En Host debemos indicar la dirección ip
del Host donde esta el servidor (En este ejemplo estoy usando la misma
máquina por lo que uso localhost), en port ponemos el puerto elegido
cuando arrancamos la JVM (en nuestro caso 8000) y por ultimo click en
Debug.
Si vamos a la despectiva de debug veremos la pila de ejecución que
indica [localhost:8000]
Nos aseguramos que todavía tenemos el breakpoint en
LoginServlet.java, abrimos un browser en localhost:8080/first-jee/login-
servlet.html y oprimimos el botón. En la perspectiva de debug vemos la
ejecución interrumpida de igual forma que en el tutorial anterior.
Conclusiones
Es importante destacar:
1. Los contenedores de servlets (como Tomcat) son aplicaciones java que

se ejecutan sobre una JVM.
2. La capacidad de depuración es intrínseca de la JVM. Podemos depurar
remotamente cualquier aplicación java.
En el próximo tutorial veremos más sobre jsp java server pages.

Libro 162 - Curso de JSP y Servlet

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Libro 162 - Curso de JSP y Servlet

Cargado por

Copyright:

Formatos disponibles

Tags, Elementos y Estructura de un documento

A continuación vemos un ejemplo de código fuente de una página Web o

<p>Bienvenidas a nuestra primera <br/> página Web.</p>

Tag HTML. ¿Que es un Tag HTML?

1. Tag de inicio o apertura. Ejemplo: <h1>

Ej: <title>Hola Mundo</title>

Estructura básica de un documento HTML

Dentro del elemento HTML existen el elemento header que contendrá

Cuando un Browser interpreta este código fuente anterior el resultado es:

En este ejemplo podemos ver como el elemento title define el titulo de la

Dentro del elemento body existe un elemento h1 que define un encabezado

Servidor Web o Servidor HTTP

Nota: Un servidor Web no esta limitado a entregar solo paginas Web.

Sitio Web Estático o Dinámico

Con el tiempo se comenzó a utilizar programas en el servidor que

De libros digitales a programas en la red

Después de oprimir enviar podemos ver en el URL de la página resultado

Si cambiamos el método de Get a Post

<form action="http://www.edu4java.com/es/web/web3.html" method="post">

el servidor recibiría la información pero no se vería en el URL

PHP y Java del lado del servidor: Servlet y

Que es un contenedor de Servlets?

Como funcionan un contenedor de

Download Apache Tomcat

Podemos descargarnos el contenedor desde http://tomcat.apache.org/

En la instalación, dentro del

Una vez arrancado el servidor podemos comprobar si funciona con

Cabe destacar que el nombre del proyecto y de la página están en letra

Primer Servlet, estructura de un sitio web según

Las paginas web estáticas se colocan dentro del directorio de aplicación

Dentro del directorio WEB-INF\classes\ se colocaran las clases java

Vamos a crear un Servlet llamado com.edu4java.servlets.FirstServlet

public class FirstServlet extends HttpServlet{

PrintWriter out = resp.getWriter();

En método doGet recibe dos parámetros, el primero es un objeto de

En el código fuente se puede ver como obtenemos un

Para desplegar este Servlet en el servidor debemos copiar el archivo

y direccionar un Browser a http://localhost:8080/first-servlet/what-

Parámetros, método GET y POST en Servlets

Lo primero que vamos a hacer es crear en nuestro sitio una página

public class LoginServlet extends HttpServlet {

private void response(HttpServletResponse resp, String msg)

indicándonos que el login ha fallado. Si repetimos la operación con

El problema aquí es que la password secreta queda visible en el

Lo que sucede aquí es que no hemos implementado el

public class LoginServlet extends HttpServlet {

private void response(HttpServletResponse resp, String msg)

Uso de Eclipse IDE for Java EE Developers

Descargar e instalar Eclipse IDE for Java EE

Registrar el servidor Tomcat en Eclipse

Oprimimos el botón Browse y seleccionamos el directorio donde se

Ahora podemos ver el servidor Tomcat en la vista de servidor y tambien

Crear un proyecto Web llamado first-jee

Como pueden ver en la ventana New Dynamic Web Projectapache

Estructura del proyecto

En la vista de proyectos podemos ver la estructura del proyecto que

1. Java Resources: aquí estarán todos los archivos *.java y eclipse se

Copiar el ejemplo anterior y ejecutarlo

1. Publicó nuestra aplicación en tomcat. Paso conocido como Despliegue

Si rellenamos user y password con edu4java y eli4java respectivamente

Despliegue (Deployment) de la aplicación Web

¿Que es Despliegue (Deployment) de una

Cuando tenemos la aplicación terminada el despliegue se hará sobre un