Los posts anteriores eran bastante teóricos, brindando un poco de contexto para entender mejor cómo es que funciona la web en general antes de llegar a este punto. A partir de aquí pasamos a la práctica, empezaremos a programar…
Iniciaremos con un ejemplo sencillo utilizando un lenguaje de programación bastante conocido: Java. Haremos uso de Servlets y JSP´s (Java Server Pages).
Lo que haremos es emular el comportamiento de una página web que permita registrar a un usuario y una vez que ha sido registrado que pueda iniciar sesión. Incorporaremos botones que nos redirijan a otras páginas, validación de entradas correctas y mensajes de error dinámicos según el contexto. No nos preocuparemos por la parte visual, esto vendrá más adelante.
Necesitaremos una herramienta de desarrollo para código Java. En mi caso utilicé NetBeans, pues provee la posibilidad de crear un proyecto web con una plantilla ya especificada, que nos facilitará el trabajo. Te recomiendo instalar la versión que contiene todos los componentes.
¿Qué es un servlet?
Para poder entender mejor la función de un servlet te recomiendo leer primero este post que dediqué a la arquitectura de las aplicaciones web. Como vimos, es posible conectar un HTML con un lenguaje de programación normal. Esto nos permite desarrollar código en dicho lenguaje y solo mostrar resultados en la página web. No obstante, esta traducción no es tan directa.
Supongamos que en HTML tenemos una entrada de texto, del tipo input, además en el servidor tenemos un programa escrito en Java que toma dicha entrada, pero en formato de String. ¿Cómo pasamos de un tipo a otro? En un inicio por medio de CGI´s. Un CGI (Common Gateway Interface) es un componente externo a los lenguajes de programación que hacen la traducción de la parte visual a la parte lógica. Por ejemplo, la del input. Esto pues los lenguajes utilizadas para la vista y para la lógica no son el mismo, no existe una traducción directa. Un CGI es como un componente bilingüe.
Con el tiempo evoluciona el concepto de CGI y se incorporan los servlets. No en todos los lenguajes de programación se llaman igual. Pero un servlet sí es un contenido dentro del lenguaje de programación. El servlet es el que recibe la información directa de la capa visual y hace la traducción, para que al pasarla a la capa lógica pueda ser entendida.
Un servlet siempre se encuentra en el servidor web, que es quien atiende las peticiones. Y tiene 4 tareas esenciales:
- Init: inicializa el servlet. Se ejecuta una sola vez independientemente de las veces que llamemos al servlet.
- Service: ya en tiempo de ejecución atiende las solicitudes de los clientes. Recibe peticiones y envía respuestas.
- Destroy: elimina el servlet.
- DoGet y DoPost: forma en que se tiene acceso de los datos. Son muy similares. Uno atiende peticiones Get y otro peticiones Post.
Estructura de un Servlet
En esta primera imagen podemos observar de primera mano que un servlet es una clase común y corriente en Java, no es nada especial. Los métodos init() y destroy() son similares a los que haremos en cualquier otra aplicación.
En la siguiente imagen vemos el método processRequest que básicamente es el encargado de dar respuesta a nuestra peticiones. Aquí introducimos el código necesario para las acciones que queremos ejecutar.
Y por último, los métodos doGet() y doPost() que hacen llamadas específicas al método antes visto processRequest.
Java Server Pages (JSP)
Las JSP´s son páginas HTML que soportan código dinámico, pues se basan en la tecnología de los servlets. Esto para hacer que aparezcan campos dependiendo de algunas condiciones, no que siempre muestran lo mismo. El HTML básico no permite eso. Además, los JSP soportan CSS y JavaScript.
Las JSP permiten introducir código Java dentro del cuerpo del HTML, similar como se hace con JavaScript. Existen 3 formas de hacerlo:
<%= expresión % : para expresiones
<% código %> : para scriptlets
<%! código %> : para declaraciones
Sin embargo, nosotros usaremos una forma más ordenada, de modo que no tengamos todo el código en el HTML.
Código de ejemplo
Vamos entonces programando. Lo primero que debes hacer es abrir un nuevo proyecto tipo web desde NetBeans.
File -> New Project -> Java Web -> Web Application.
Empezaremos por el index.html (esta es la primera página que se abre siempre por defecto, te recomiendo no cambiar el nombre). En el index.html tendremos 2 botones: uno para registrarse y otro para iniciar sesión:
<html>
<head>
<title>Práctica Semana 1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Práctica Semana 1</h1>
<br/><br/>
<form name="elform" action="Registrarse.jsp" method="post">
<input type="submit" value="Registrarse" name="btnRegistrarse" />
</form>
<br/><br/>
<form name="elform" action="Login.jsp" method="post">
<input type="submit" value="Ingresar" name="btnIngresar" />
</form>
</body>
</html>
Obteniendo algo así:
Cuando se usa un servlet es necesario usar forms para que tomen los datos de los campos de entradas cuando se oprime un botón.
El servlet recoge todos los datos introducidos y los introduce en el objeto Request.
Es por esto que los campos y botones se meten dentro del espacio del form.
En este caso cada uno de los botones se mete en un form para que cuando demos click podamos llamar las acciones que queremos.
Vemos cómo cada botón llama una acción específica:
action=»Registrarse.jsp» y action=»Login.jsp».
Creamos entonces los JSP que estamos invocando en la misma carpeta de index. Recordando que son nuevas páginas. Pueden ponerles el nombre que deseen. Les muestro el ejemplo del Registrarse.jsp, el del Login es prácticamente lo mismo.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<%HttpSession laSesion = request.getSession();%>
<h1>REGISTRARSE</h1>
<form name="elform" action="srvRegistrarse" method="post">
Nombre: <input type="text" name="nombre" value="" />
<br/><br/>
Login: <input type="text" name="login" value="" />
<br/><br/>
Contraseña: <input type="text" name="pwd" value="" />
<br/><br/>
ConfContraseña: <input type="text" name="confPwd" value="" />
<br/><br/>
<input type="submit" value="Registarme" name="btnRegistrarme" />
<br/><br/>
<%=laSesion.getAttribute("mensaje")== null ? "" :laSesion.getAttribute("mensaje") %>
</form>
</body>
</html>
En la primera línea del cuerpo vemos el primer elemento interesante:
<%HttpSession laSesion = request.getSession();%>
Esta es una línea de código Java dentro del HTML, como vimos anteriormente. Con ella lo que hacemos es obtener la sesión del servlet. Anteriormente dijimos que un servlet se crea solo una vez, pero puede atender a varios usuarios. Lo que hace entonces es asignar una sesión a cada uno de los usuarios que ingresa. En esa sesión se recopilan los datos que vamos introduciendo como usuarios, de manera que podamos usarlos aún cuando naveguemos por diferentes páginas. Un ejemplo de esto es cuando nos logeamos a una página y nuestro nombre aparece siempre, sin importar la página en la que estemos. Obtenemos entonces la sesión para introducirle datos y poder usarlos posteriormente.
Nuevamente vemos como todas las entradas y el botón de registrarse están dentro de un form. En la línea siguiente creamos el atributo nombre dentro del objeto Request. Como dijimos, es en el Request donde se introducen los valores ingresados por el usuario.
Nombre: <input type="text" name="nombre" value="" />
El siguiente código permite introducir un campo vacío, llamado mensaje, que se modificará según el contexto en que se encuentre la aplicación. Por ejemplo, si el usuario deja campos vacíos, se le indicará su error de manera dinámica.
<%=laSesion.getAttribute("mensaje")== null ? "" :laSesion.getAttribute("mensaje") %>
Una vez que se oprime el botón Registrarse llamamos por medio del action de form al servlet srvRegistrarse. Procedemos a crear entonces un servlet, pero esta vez en la carpeta Source Packages. Allí es donde introducimos el código fuente escrito en Java. Solamente damos click derecho en Source Packages – New – Servlet – escogemos un nombre adecuado y listo.
Una vez dentro del servlet podemos insertar nuestro propio código Java para que haga lo que queramos. Como por ejemplo el siguiente:
@WebServlet(urlPatterns = {"/srvRegistrarse"})
public class srvRegistrarse extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String nombre = (String) request.getParameter("nombre");
String login = (String) request.getParameter("login");
String pwd = (String) request.getParameter("pwd");
String confPwd = (String) request.getParameter("confPwd");
System.out.println("Entra a srvRegistrarse");
HttpSession laSesion = request.getSession();
laSesion.setAttribute("mensaje", "");
ArrayList<Usuario> listaUsuarios;
if (laSesion.getAttribute("listaUsuarios") == null){
listaUsuarios = new ArrayList();
laSesion.setAttribute("listaUsuarios",listaUsuarios);
}else{
listaUsuarios = (ArrayList) laSesion.getAttribute("listaUsuarios");
}
if (nombre.isEmpty() | login.isEmpty() | pwd.isEmpty() | confPwd.isEmpty()){
laSesion.setAttribute("mensaje", "Ingrese todos los campos para continuar");
response.sendRedirect("Registrarse.jsp");
}
else{
if(!pwd.equals(confPwd)){
laSesion.setAttribute("mensaje", "Contrasenias no coinciden");
response.sendRedirect("Registrarse.jsp");
}
else{
//Hacer la validacion con lista de usuarios del tendedero
ArrayList<Usuario> users = (ArrayList<Usuario>) laSesion.getAttribute("listaUsuarios");
System.out.println(users.size());
if(users.size() == 0){
users.add(new Usuario(nombre, login, pwd));
response.sendRedirect("Login.jsp");
System.out.println(users.size());
}
else{
for(Usuario user : users){
System.out.println("Entra a for");
if(nombre == user.getLogin()){
laSesion.setAttribute("mensaje", "Nombre de Usuario ya registrado");
response.sendRedirect("Registrarse.jsp");
}
else{
users.add(new Usuario(nombre, login, pwd));
response.sendRedirect("Login.jsp");
}
}
}
}
}
// response.setContentType("text/html;charset=UTF-8");
// try (PrintWriter out = response.getWriter()) {
// /* TODO output your page here. You may use following sample code. */
// out.println("<!DOCTYPE html>");
// out.println("<html>");
// out.println("<head>");
// out.println("<title>Servlet srvRegistrarse</title>");
// out.println("</head>");
// out.println("<body>");
// out.println("<h1>Servlet srvRegistrarse at " + request.getContextPath() + "</h1>");
// out.println("</body>");
// out.println("</html>");
// }
}
La primera línea es importante, pues es el nombre con el cual reconoceremos al servlet. Tener mal este nombre puede dar muchos dolores de cabeza. Como mencioné antes, el processRequest atiende las solicitudes de los usuarios, de modo que será lo que introduzcamos acá lo que sucederá en respuesta a las peticiones específicas.
Lo primero que hacemos es obtener los atributos que creamos en el objeto Request y los usamos según los tipos de datos de Java, para facilitar su uso.
Seguido, obtenemos la sesión, que nos permitirá almacenar y obtener datos del usuario.
Dado que trabajamos con un grupo de usuarios que se registran e ingresan, debemos mantener un registro. Por lo pronto, lo haremos de la manera fácil, no usaremos bases de datos, sino una lista sencilla. Esta lista de usuarios se incorpora como un elemento de la sesión, pues debe ser transversal a toda la aplicación. Cuando un usuario desea registrarse, agregamos sus datos al objeto Usuario y luego lo introducimos en la lista de registrados. Cuando un usuario desea ingresar, lo buscamos en la lista de usuarios registrados y le damos acceso solo si efectivamente se encuentra registrado.
El código siguiente son simples validaciones, que permiten determinar si las entradas estaban vacías o si existe error en las datos luego de oprimir el botón que llama a la acción. Cuando una de las condiciones de error se cumple, se actualiza el atributo mensaje para indicarle al usuario qué es lo que está haciendo mal. En este ejemplo la página de refresca a sí misma y muestra el error de manera dinámica.
Una vez que fue creado el JSP Registrarse y el srvRegistrarse está en funcionamiento veremos algo así luego de haber oprimido el botón Registrarme sin completar todos los campos de entrada.
Cuando las entradas son correctas en su totalidad, el usuario es registrado y pasará a la página de Login. En caso de introducir los datos correctos, pasará a una página nueva, en caso contrario verá mensajes de error respectivos.
Al final de la práctica deberían tener algo similar a esto. Para poder correr el proyecto deben primero tener un servidor instalado (viene ya configurado cuando instalan la versión completa de NetBeans). Seleccionan el navegador de su preferencia en donde se encuentra el ícono de Google Chrome. Dan click derecho al proyecto – Clean and Build y una vez que finalice el proceso oprimir el botón de Run Project (triángulo verde).
Hasta aquí el post de hoy, espero que hayan disfrutado practicando.
¿Tienes dudas o necesitas ayuda? Dejámelo saber en la caja de comentarios.
Referencias:
Presentación del curso: IC8016 Introduccion al desarrollo de aplicaciones web. Servlets. Prof. Ericka Solano Fernandez. Instituto Tecnológico de Costa Rica.
Introducción a las Aplicaciones Web 