[04] Java Server Pages – JSP (Parte 1)

Como ya les mencioné antes, mis post van dirigidos a los que quieran inciarse en Java EE. Esta entrada tiene como finalidad lo siguiente:

  • Entender el uso de request.getParameter() y request.getParameterValues().
  • Conocer los métodos de un Servlet.
  • Entender las ventajas de separar las responsabilidades en tu código.

Para ello, implementaremos una aplicación sencilla, la cual actuará de la siguiente manera:

  • La página inicial será un formulario
  • Validaremos (de manera muy simple) si los datos del formulario son correctos.
  • Si los datos son correctos, mostraremos los resultados correspondientes en otra página.
  • En caso contrario, mostraremos la página de error.
  • El flujo de la página será manejado a través de un Servlet (quien actuará como el controlador, teniendo en cuenta el Patrón MVC).

Nota: Disculpen la calidad de las imágenes.


4.1. El Primer intento.

Creamos nuestro proyecto en Netbeans, que tiene por nombre “EjemploJSP”:
En el segundo post, ya hablé de cómo crear un proyecto para usarlo con Glassfish. (o incluso con Tomcat)

Ahora Creamos el formulario inicial, en el index.jsp:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!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=UTF-8">
        <title>Encuesta</title>
    </head>
    <body>
        <h1>Encuesta</h1>
        <form action="resultados.jsp">
            Nombre : <input type="text" name="nombre"/><br/>
            ¿Qué sistema operativo usa habitualmente?
            <table>
                <tr>
                    <td>Windows :</td>
                    <td><input type="checkbox" name="opciones" value="Windows"/></td>
                </tr>
                <tr>
                    <td>Linux :</td>
                    <td><input type="checkbox" name="opciones" value="Linux"/></td>
                </tr>
                <tr>
                    <td>Mac :</td>
                    <td><input type="checkbox" name="opciones" value="Mac"/></td>
                </tr>
            </table>
            <input type="submit" value="Enviar"/>
        </form>
    </body>

Del código anterior, ten en cuenta esta línea:

 <input type="text" name="nombre"/>

Simplemente dice que el identificador que tiene nuestro campo de texto es “nombre”
Así mismo, los checkbox’s tienen por nombre “opciones” (todos ellos), esto se hace para que todas las respuestas que sean marcadas en el formulario se envíen en un solo arreglo de Strings llamado también “opciones”. (Todo esto sonó un poco confuso…)
Nuestro formulario debería verse algo asi:

Bien, los resultados se verán en otra página, por eso crearemos la página “resultados.jsp” (Click derecho en el proyecto > Nuevo > JSP):

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!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=UTF-8">
        <title>Resultados</title>
    </head>
    <body>
        <h1>Resultados</h1>
        <p>Muchas gracias <b><%=request.getParameter("nombre")%></b>, por responder nuestra encuesta.</p>
        <p>La opción que usted marcó fue: <br/>
            <b><%=request.getParameter("opciones")%></b>
        </p>
    </body>
</html>

Del código anterior, la línea:

<%=request.getParameter("nombre")%>

Recuerdas la línea en el index.jsp: <input type="text" name="nombre"/>, bueno, el objeto request, es usado para acceder a algunos datos que se envían a través de un formulario HTML, y podemos obtener el valor de algún campo pasando como parámetro el identificador de ese campo. En este caso, hemos obtenido el valor de un campo que tiene como identificador “nombre”.
Lo mismo sucede con <%=request.getParameter("opciones")%>, obtenemos el valor del campo llamado “opciones” (sólo el que sea marcado), el cual es el checkbox que está en el formulario inicial.

Probemos lo que llevamos, a ver qué tal nos va:

Supongo, que ahora sí habrás entendido el uso de request.getParameter(). Sigamos probando un poco más. A ver, pero y si dejo, mi nombre vacío que pasa? Si marco más de una opción que pasa?

Te preguntarás entonces

  • Quien envió esta encuesta? Donde está su nombre?
  • Si marqué tres opciones porqué sale Windows solamente?
  • Cómo controlamos todo eso?

4.2. Nuestro Servlet que actúa como un Controlador.

Has escuchado qué es el patrón MVC? Dicho patrón propone separar nuestra aplicación en 3 capas diferentes, el Modelo, la Vista y el Controlador.
El Modelo, prácticamente son los datos a los que la aplicación puede acceder y almacenar, en este caso vienen siendo nuestras Clases Java. La Vista es la interfaz de usuario en este caso las JSP de nuestra aplicación, mientras que el Controlador incluye todo el mecanismo mediante el cual accedemos a los datos y manejamos el flujo de la aplicación, en este caso me refiero al direccionamiento de las paginas JSP.

Por ello, usaremos una clase Java (entiéndase desde ahora también como un Java Bean), en la cual almacenaremos los datos enviados desde el formulario, y usaremos un Servlet como nuestro controlador.

Creamos la clase Datos en el paquete beans (Clic derecho en el proyecto > nuevo > Clase Java):

package beans;

public class Datos {

    private String nombre;
    private String opciones[];

    public Datos() {
    }

    public String getNombre() {
        return nombre;
    }

    public void setNombre(String nombre) {
        this.nombre = nombre;
    }

    public String[] getOpciones() {
        return opciones;
    }

    public void setOpciones(String[] opciones) {
        this.opciones = opciones;
    }
 
} // fin de la clase Datos

Nota que la propiedad opciones es un arreglo. Bien, ahora creamos nuestro Servlet (Clic derecho en el proyecto > nuevo > Servlet):

Da clic en Siguiente, deja los valores que están por defecto y clic en Finalizar, y listo:

En el código del servlet tén en cuenta esta línea:

@WebServlet(name="ServletControlador", urlPatterns={"/ServletControlador"})

La anterior anotación es usada para configurar el servlet (aunque también puede hacerse con un xml).
En nuestro index.jsp, Modificamos la línea que dice:

<form action="resultados.jsp">

Por esta nueva:

<form action="ServletControlador">

Así, la información se la enviaremos al Servlet, quien se encargará de validarla.


4.3. Validaciones.

Primero, creamos nuestra página de error.jsp, la cual se mostrará cuando los datos enviados por el usuario sean incorrectos.

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!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=UTF-8">
        <title>Error</title>
    </head>
    <body>
        <p>Usted no llenó correctamente el formulario.</p>
        <form action="index.jsp">
            <input type="submit" value="volver a la encuesta"/>
        </form>
    </body>
</html>

No hay nada importante de explicar en el código anterior. Excepto que con ella podemos volver a la pagina inicial de acuerdo a la línea <form action="index.jsp">
La pagina de error, debería parecerse a esto:

Un servlet tiene los método doGet() y doPost, pero si te fijas bien, los dos llaman al método proccessRequest(). Allí codificaremos el servlet (Borra todo el contenido de ese metodo), para validar los datos.

Primero instanciamos el bean:

// Instanciamos el bean
Datos datos = new Datos();
datos.setNombre(request.getParameter("nombre"));
datos.setOpciones(request.getParameterValues("opciones"));

Como ves, los datos enviados por el usuario se guardan en la clase Java. Un momento… notaste la línea request.getParameterValues("opciones")? Funciona igual que el método getParameter, solo que en vez de acceder a un parámetro individual, accede a todos los parámetros que tienen el mismo identificador, en este caso, todos los checkbox’s tienen el mismo identificador, el cual es “opciones”. Ahora, el código para validar:

//Validamos los datos
if( datos.getNombre().equals(""))
   request.getRequestDispatcher("error.jsp").forward(request, response);
else if( datos.getOpciones().length > 1 )
   request.getRequestDispatcher("error.jsp").forward(request, response);

La linea

request.getRequestDispatcher("error.jsp").forward(request, response);

Simplemente nos redirige a la página error.jsp, cuando el nombre esté vacío.
Y La línea

 if( datos.getOpciones().length > 1 )

Es simplemente para controlar que el usuario no haya marcado más de una opción en el formulario. Sigamos codificando:

// Si todo está bien vamos a la página resultados.
request.getRequestDispatcher("resultados.jsp").forward(request, response);

El metodo processRequest de nuestro Servlet, deberia verse asi:

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        // Instanciamos el bean
        Datos datos = new Datos();
        datos.setNombre(request.getParameter("nombre"));
        datos.setOpciones(request.getParameterValues("opciones"));

        //Validamos los datos
        if( datos.getNombre().equals(""))
            request.getRequestDispatcher("error.jsp").forward(request, response);
        else if( datos.getOpciones().length > 1 )
            request.getRequestDispatcher("error.jsp").forward(request, response);

        // Si todo está bien vamos a la página resultados.
        request.getRequestDispatcher("resultados.jsp").forward(request, response);

}


4.4. Pruebas.

Probemos nuevamente el caso de error (con el nombre vacio y las diferentes opciones marcadas):

Obtenemos esto:

OK… veamos este otro caso (también debe fallar):

Parece que funciona :D, Veamos ahora este caso (el caso correcto):

Ufff… Se me fue la mano con este tutorial. Porque lo expliqué paso a paso y hasta las lineas más importantes del código.
Suerte a todos.

Comentarios

Opciones de visualización de comentarios

Seleccione la forma que prefiera para mostrar los comentarios y haga clic en «Guardar las opciones» para activar los cambios.

gracias gracias por el tuto

paso a pasito entiendo mas, ya con este ejemplo pues puedo ir aplicando mas cosas, gracias

Imagen de Algus Dark

Gracias, y felicidades.

Por el trabajo no he podido yo seguir con mis tutoriales ni estar activo en la comunidad de Java. Me parece grandioso tus tutoriales, y que expliques las líneas importantes. Sigue así, muchas gracias y felicidades por el trabajo.

ok !

@t-bluether :
ok. Ojalá te sirva de algo esto. Sácale provecho.. :D


@Algus Dark :
Gracias ! :D Se hace lo que se puede.
Imagen de LWSH

Genial

M uy bueno co,mpa solo te falto poner el caso en el que el usuario llena su nombre pero no pone ninguna opcion

ok !

@LWSH :
Vale, ok, buena sugerencia... Aunque creo que ese caso debería mostrar también la pagina de error...


:editado mi comentario:
No manda a la página de error, debido a que estamos diciendo que si
if( datos.getOpciones().length > 1 )

En vez, de eso, la nueva condición debería ser:

if( datos.getOpciones().length > 1 && datos.getOpciones().length != 0 )

Sería para controlar que las opciones tampoco estén vacías.
@LWSH, gracias por encontrar un error en esta entrada :D

Imagen de teebia

Q buena explicacion !

Buenisima tu expliacion t felicito, segui haciendo estos tutoriales q estan barbaros Salu2 !

gracias !

@teebia:
Muchisimas gracias. :D

Imagen de sr.bug

Muy buen tutorial

+1

Saludos.

Imagen de sr.bug

Duda

Este es un muy buen ejemplo, pero ahora que pasa si lo que quieres pedir al usuario que ingrese 2 digitos y mostrar el resultado de la suma de ambos, saludos.