Ingreso/Login JSP

JSP es un acrónimo de Java Server Pages, que en castellano vendría a decir algo como Páginas de Servidor Java. Es, pues, una tecnología orientada a crear páginas web con programación en Java.

Con JSP podemos crear aplicaciones web que se ejecuten en variados servidores web, de múltiples plataformas, ya que Java es en esencia un lenguaje multiplataforma. Las páginas JSP están compuestas de código HTML/XML mezclado con etiquetas especiales para programar scripts de servidor en sintaxis Java. Por tanto, las JSP podremos escribirlas con nuestro editor HTML/XML habitual.

En nuestro primer ejemplo de introduccion a JSP realizaremos un login o ingreso sin utilizar ningun motor de base de datos, la validación se realizara mediante un HashMap de usuario/login y contraseñas serán agregados manualmente, la estructura que crearemos es simple tendremos una pagina de inicio llamada login.jsp la cual se preguntara por un usuario y contraseña se validara el contenido de los campos antes de pasar al servlet mediante javascript estos campos estarán formateados mediante estilos css, el servlet que validara el ingreso se llamara check.java.


Si el usuario es valido check.java redireccionara a una pagina llama welcome.jsp la cual mostrara los datos de session que fueron almacenados y esta jsp tendra un hipervinculo que ejecutara un servlet para finalizar la session el cual se llamara logout.java, se tendrán en cuenta los permisos de usuario, de manera que si no se ha iniciado alguna session este usuario invitado no tenga acceso a la pagina welcome.jsp.


Estructura de Archivos

Esta es la estructura de archivos que tendrá nuestro proyecto para realizar el ingreso o login de usuarios sin conexión a base de datos.

A continuación veremos el contenido del archivo web.xml.













web.xml

 
  
    check
    check
  
  
    logout
    logout
    

  
    check
    /check
  
  
    logout
    /logout
  
    

En este archivo se registra la existencia de 2 servlets y una navegación que se utilizara para pasar de login.jsp a welcome.jsp, ahora veremos el código contenido en el archivo login.jsp y check.java lo cuales son los encargados de la vista para el inicio de usuarios y controlar las validación de los mismos.


login.jsp

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
 String path = request.getContextPath();
 String basePath = request.getScheme() + "://"
   + request.getServerName() + ":" + request.getServerPort()
   + path + "/";
   
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <base href="<%=basePath%>">

  <title>My JSP 'index.jsp' starting page</title>
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
  <script type="text/javascript">
function validar(form){
    var form = document.getElementById('formLogin');
    var login = form.login;
    var pass = form.pass;
    
    if(login.value != '' && pass.value != ''){
     form.submit(); 
     return true;             
    }
    
    alert('Por favor ingrese usuario o contraseña');
    return false;
   }
</script>
  
  <style type="text/css">
   body{
    font-family: Verdana;       
    padding: 25% 50% 25% 50%;
    border: thin solid #ccc;        
   }
   .login{        
    
   }
   table{
    border: thin solid #ccc; 
   }
   table tr:first-child{
    background-color: blue; 
    color: white; 
    text-align: center;
   } 
  </style>
 </head>

 <body>
  <div class="login">
   <div id="flash">
    <%             
     if(session.getAttribute("login") != null && !session.getAttribute("login").equals("")){
      response.sendRedirect("welcome.jsp");
     }     
    %>
   </div>
   <form id="formLogin" action="check" method="POST">
    <table>
     <tr>
      <td colspan="2">Ingreso</td>
     </tr>
     <tr>
      <td>Login:</td>
      <td><input type="text" name="login" /></td>
     </tr>    
     <tr>
      <td>Password:</td>
      <td><input type="password" name="pass" /></td>
     </tr>
     <tr>
      <td><input type="button" value="Ingresar" onclick="validar();"/></td>
     </tr>        
    </table>
   </form>
  </div>  
 </body>
</html>

check.java

import java.io.IOException;
import java.util.HashMap;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

public class check extends HttpServlet {

 public void doPost(HttpServletRequest req, HttpServletResponse res)
   throws ServletException, IOException {

  String login = req.getParameter("login");
  String pass = req.getParameter("pass");

  HashMap users = new HashMap();
  users.put("user1", "1234");
  users.put("user2", "1234");
  users.put("admin", "admin");

  if (users.containsKey(login)) {
   String tmpPass = users.get(login);

   if (pass.equals(tmpPass)) {
    HttpSession session = req.getSession(true);
    session.setAttribute("login", login);
    res.sendRedirect("./welcome.jsp");
   } else {
    res.sendRedirect("./login.jsp");
   }

  } else {
   res.sendRedirect("./login.jsp");
  }

 }

}

Finalmente visualizaremos el código fuente de los archivos welcome.jsp y logout.java este ultimo es el que finalizara la session iniciada por el usuario en curso.


welcome.jsp

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>My JSP 'welcome.jsp' starting page</title>

  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">

  <style type="text/css">
  
body{
 position: absolute; 
 padding-left: 25%;
 padding-right: 25%; 
}
#page{   
 border: thin solid black;
 width: 850px;
}
#header {
 border: thin solid #ccc;
 height: 200px;
 width: 100%;
}

#main {
 border: thin solid #ccc;
 height: 400px;
 width: 100%;
}

#left {
 border: thin solid #ccc;
 height: 400px;
 width: 200px;
 float: left;
}

#center {
 border: thin solid #ccc;
 height: 400px;
 width: 640px;
 float: left;
}

#bottom {
 border: thin solid #ccc;
 height: 100px;
 width: 100%;
}
</style>

 </head>

 <body>
  <div id="page">
   <div id="header">
    Bienvenido
    <%=session.getAttribute("login")%>
    <%
     if (session.getAttribute("login") != null
       && !session.getAttribute("login").equals("")) {

     } else {
      response.sendRedirect("login.jsp");
     }
    %>
    <a href="logout">Logout</a>

   </div>
   <div id="main">
    <div id="left">
     Pagina Left
    </div>
    <div id="center">
     Pagina center
    </div>
   </div>
   <div id="bottom">
    Pie de pagina
   </div>
  </div>
 </body>
</html>

logout.java

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;


public class logout extends HttpServlet{
 
 @Override
 protected void doGet(HttpServletRequest req, HttpServletResponse resp)
   throws ServletException, IOException {
  // TODO Auto-generated method stub
  
  HttpSession session = req.getSession();
  session.invalidate();
  resp.sendRedirect("login.jsp");
 }
}

Espero que sea de utilidad este ejemplo de ingreso de usuarios para la compresión rápida de la funcionalidad de la programación en JSP.