Servlet – Formulario – Part 2

Posted on by Rudeus Greyrat

Una página web es la combinación de muchos elementos de entrada, como etiquetas, cuadros de texto, casillas de verificación, opciones, imágenes, etc. Se puede preparar encerrando todos los elementos de entrada dentro de un «FORMULARIO HTML» en el lado del servidor con Java servlet . Por lo general, un formulario HTML recopila datos del usuario a través de estos elementos de entrada y nos permite ver cómo se enviarán al lado del servidor mediante el uso de métodos HTTP GET/POST.

Caudal:

  1. La solicitud se enviará desde un formulario HTML
  2. Se enviará como método GET/POST en el lado del servlet de Java
  3. La respuesta se proporcionará desde el servlet como un formulario HTML

Las siguientes etiquetas deben conocerse para manejar el flujo

Nombre de etiqueta

Uso
<Formulario> Para crear un formulario en una página HTML y encierra todos los elementos de entrada.
<entrada> Para crear un cuadro de texto o contraseña o enviar, etc.,
<seleccionar> Para crear menú desplegable 
<área de texto> Para crear un área de texto

Junto con la etiqueta del formulario, debemos especificar el método como «GET» o «POST». Por lo general, los datos confidenciales deben pasarse como «POST» porque, en la URL, los parámetros no se envían como parámetros de consulta. Por lo tanto, para enviar información confidencial como «Contraseña», el método «Publicar» es un buen enfoque. Es más 

  • En el método “Post”, podemos pasar muchos parámetros.
  • Los métodos de publicación no están marcados
  • No hay posibilidad de permanecer en el historial del navegador y tampoco se puede almacenar en caché y, por lo tanto, es más seguro

El método «POST» se utiliza para crear o actualizar los recursos.

POST /<formname.html> HTTP/1.1  <!-- It can be a jsp or any frontend application -->

HOST : <Your ipaddress or host name>
param1=value1&param2=value2

El método «Obtener» es el más adecuado si estamos pasando solo parámetros limitados y, además, como los parámetros se ven afuera, no es adecuado para enviar parámetros confidenciales.

GET /<forname.html>?param1=value1&param2=value2 <!-- It can be a jsp or any frontend application -->
  • El método «Obtener» se puede almacenar en caché, marcar y permanecer en el historial
  • No es adecuado para el envío de información sensible y además tiene restricciones de longitud
  • Generalmente se utiliza para recuperar un determinado conjunto de datos.

Además, junto con la etiqueta de formulario, debemos configurar la etiqueta de acción. Contendrá la “URL del servlet”

1. name 
method=”GET/POST”: Used to send the form data as an HTTP POST/GET request to the server. 
Generally, form submission containing sensitive data should be done in HTTP POST method.

2. action=”URL of the servlet”: Used to specify relative URL of the servlet 
and it  is responsible for collecting form data and process accordingly.

Fragmento de muestra de los datos del formulario;

HTML

<form name="<name of the form>" method="get/post" action="<formServlet>">
    EmailId: <input type="text" name="emailID"/> <br/>
    Password: <input type="password" name="yourPassword"/> <br/>
    <input type="submit" value="NEXT" />
</form>

Podemos embellecer un formulario mediante CSS (Cascading StyleSheet) y también validar el formulario mediante Javascript. Las validaciones del lado del cliente se manejan en javascript. Hagamos esto para un formulario de inicio de sesión de muestra. Como necesitamos manejar la validación, podemos tener las entradas a través de un archivo JSP

registro.jsp

HTML

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Registration Application</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}
  
input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
  
button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}
  
button:hover {
  opacity: 0.8;
}
  
.cancelbutton {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}
  
.container {
  padding: 16px;
}
  
span.psw {
  float: right;
  padding-top: 16px;
}
.seldiv {
  background: #04AA6D;
  height: 50px;
  width:200px;
  border-radius: 15px;
  padding:20px;
  font-size:22px;
  color:#fff;  
}
  
.optiondiv {
  background: #04AA6D;
  height: 120px;
  width:400px;
  border-radius: 15px;
  padding:20px;
  font-size:15px;
  color:#fff;  
}
  
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbutton {
     width: 100%;
  }
}
</style>
<script type="text/javascript">
function ValidateEmail(emailId)
{
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if(emailId.value.match(mailformat))
    {
        return true;
    }
    else
    {
        alert("You have entered an invalid email address!");
        document.getElementById('yourEmailID').focus();
        return false;
    }
}
</script>
</head>
    
<body>
    <form action="registerServlet" method="post" onclick="ValidateEmail(document.getElementById('yourEmailID'))">
  <div class="container">
    <label for="username"><b>Email</b></label>
    <input type="text" placeholder="Please enter your email" name="yourEmailID" id = "yourEmailID" required>
    <label for="user"><b>User Name</b></label>
    <input type="text" placeholder="Please enter your username" name="userName" id = "userName" required>
  
    <label for="password"><b>Password</b></label>
    <input type="password" placeholder="Please enter Password" name="yourPassword" id="yourPassword" required>
  <div class="seldiv">
    <label>Gender: </label>
    <select name = "gender" id="gender">
        <option value="male">MALE</option>
        <option value="female">FEMALE</option>
    </select> 
  </div> 
<br>
  <div class="optiondiv">
        
<p>Please select your favorite language:</p>
  
      <input type="radio" id="java" name="favoriteLanguage" value="JAVA">
      <label for="java">JAVA</label><br>
      <input type="radio" id="python" name="favoriteLanguage" value="PYTHON">
      <label for="python">PYTHON</label><br>
      <input type="radio" id="ruby" name="favoriteLanguage" value="RUBY">
      <label for="ruby">RUBY</label> 
   </div>
    <button type="submit">Register</button>
    <label>
      <input type="checkbox" checked="checked" name="rememberme"> Remember me
    </label>
  </div>
 </form>
</body>
</html>

En el código anterior

<!-- This will produce a dropdown containing MALE and FEMALE values
<label>Gender: </label>
<select name = "gender" id="gender">
    <option value="male">MALE</option>
  <option value="female">FEMALE</option>
</select>
<!-- This will produce different options containing JAVA/PYTHON/RUBY as favorite languages -->
 <p>Please select your favorite language:</p>
  <input type="radio" id="java" name="favoriteLanguage" value="JAVA">
  <label for="java">JAVA</label><br>
  <input type="radio" id="python" name="favoriteLanguage" value="PYTHON">
  <label for="python">PYTHON</label><br>
  <input type="radio" id="ruby" name="favoriteLanguage" value="RUBY">
  <label for="ruby">RUBY</label>

Producción:

Output

La validación de correo electrónico de front-end se realiza a través del método «ValidateEmail» en el archivo register.jsp. Podemos dividir CSS en relleno separado y javascript en archivos separados e incluirlos también.

<script type="text/javascript">
function ValidateEmail(emailId)
{
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if(emailId.value.match(mailformat))
    {
        return true;
    }
    else
    {
        alert("You have entered an invalid email address!");
        document.getElementById('yourEmailID').focus();
        return false;
    }
}
</script>

Recibiremos mensajes de error si la identificación del correo electrónico no tiene el formato adecuado. Una vez que finalizan las validaciones de front-end, el formulario se envía al servlet correspondiente que se menciona en la etiqueta de acción. 

RegistrarServlet.java

Java

import java.io.IOException;
  
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
  
@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
         
    public RegisterServlet() {
        super();
        // TODO Auto-generated constructor stub
    }
  
    protected void doPost(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
        
        // We can able to get the form data by means of the below ways. 
        // Form arguments should be matched and then only they are recognised
        String userName = request.getParameter("userName");
        String yourEmailID = request.getParameter("yourEmailID");
        String yourPassword = request.getParameter("yourPassword");
        String gender = request.getParameter("gender");
        String favoriteLanguage = request.getParameter("favoriteLanguage");
        System.out.println("gender.." + gender);
        System.out.println("favoriteLanguage.." + favoriteLanguage);
          
        // Here the business validations goes. As a sample, 
        // we can check against a hardcoded value or pass the
        // values into a database which can be available in local/remote  db
        // For easier way, let us check against a hardcoded value
        if (userName != null && yourEmailID != null &&  yourPassword != null ) {
            // We can redirect the page to a welcome page
            // Need to pass the values in session in order 
            // to carry forward that one to next pages
            HttpSession httpSession = request.getSession();
            httpSession.setAttribute("emailId", yourEmailID);
            httpSession.setAttribute("gender", gender);
            httpSession.setAttribute("favoriteLanguage", favoriteLanguage);
            request.getRequestDispatcher("welcome.jsp").forward(request, response);
        }
    }
}

Bienvenido.jsp

HTML

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<html>
<head>
</head>
<body>
<%
    String gender = (String)session.getAttribute("gender");
    String genderTitle = null;
  
    if (gender != null && gender.equalsIgnoreCase("female")) {
        genderTitle = "Ms/Mrs.";
    } else {
        genderTitle = "Mr.";
    }
    %>
Welcome <%= genderTitle %> <%=session.getAttribute("emailId") %>
<br>
Your Resume has been added under <%= session.getAttribute("favoriteLanguage")  %> POOL
</body>
</html>

Producción:

Output

La explicación del concepto de formulario a través de video:

Este video también explica la diferencia entre los eventos «Onsubmit» y «OnClick».

Conclusión

Un formulario se considera como el lugar de entrada para recopilar la información deseada de los usuarios. Puede estar presente en cualquier archivo front-end como HTML/JSP, etc., y en eso, si se coloca en JSP (páginas del servidor Java), podemos manejar las validaciones de JavaScript fácilmente. Las validaciones de Javascript deben manejarse en el lado del cliente. Por lo tanto, el tipo de página JSP es bueno. De acuerdo con las requests de etiquetas de formulario, se ejecutará el método «POST» o «GET» y nuevamente la respuesta se escribirá en las páginas JSP. Para llevar los datos del formulario de una página a otra se utiliza la «sesión».

Publicación traducida automáticamente

Artículo escrito por priyarajtt y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *