<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<a href="inquilinos.jsp">Mantenimiento a inquilinos</a>
</body>
</html>Primera llamada al Servlet
Tenemos el JSP que nos llevará al listado de "inquilinos", este llama al Servlet (clic aquí para ver el Servlet) de nombre "Inquilinos" y como parámetro "accion" es valor es "SEL", en el Servlet podemos observar que la acción SEL no se varía el "target", por lo que nos llevaría al "target" por defecto que es: "inquilinosSel.jsp". Es importante este pequeño archivo, ya que de lo contrario no le diríamos de ninguna forma al Servlet que acción debe realizar y no haría nada, pero se puede reemplazar con otros métodos más sencillos.
<%response.sendRedirect("Inquilinos?accion=SEL");%>
Lectura de datos y despliegue en una tabla HTML
En "inquilinosSel.jsp" tendremos una tabla en la que empleando la biblioteca JSTL con la función "foreach" le colocamos los valores de la consulta SELECT a la base de datos.<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Mantenimiento de inquilinos</title>
<script src="jq/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="js/inquilinos.js" type="text/javascript"></script>
</head>
<body>
<a href="index.html">Regresar</a><br/>
<c:if test="${message != null}">
<div>${message}</div>
</c:if>
<table border="1">
<thead>
<tr>
<th>
<a href="#" onclick="inquilinosIns();">
Agregar
</a>
</th>
<th>ID</th>
<th>DNI</th>
<th>NOMBRES</th>
<th>PATERNO</th>
<th>MATERNO</th>
<th>TELEFONO</th>
<th>FECHA DE INGRESO</th>
<th>CORREO</th>
<th>DEUDAS</th>
<th>
<a href="#" onclick="inquilinosUpd();">
Actualizar
</a>
</th>
<th>
<a href="#" onclick="inquilinosDel();">
Eliminar
</a>
</th>
</tr>
</thead>
<tbody>
<c:forEach var="f" items="${list}">
<tr>
<td colspan="2">${f.idinquilinos}</td>
<td>${f.dni}</td>
<td>${f.nombres}</td>
<td>${f.paterno}</td>
<td>${f.materno}</td>
<td>${f.telefono}</td>
<td>${f.fecha_ingreso}</td>
<td>${f.correo}</td>
<td>${f.deuda}</td>
<th>
<input type="radio" name="id_upd"
value="${f.idinquilinos}"/>
</th>
<th>
<input type="checkbox" name="id_del"
value="${f.idinquilinos}"/>
</th>
</tr>
</c:forEach>
</tbody>
</table>
</body>
</html>Nos mostrará un resultado como este:
| Agregar | ID | DNI | NOMBRES | PATERNO | MATERNO | TELEFONO | FECHA DE INGRESO | CORREO | DEUDAS | Actualizar | Eliminar |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | 31378082 | LUISA | PAUCAR | NARRO | 999888777 | 2018-01-28 | lpaucar@mail.com | 0.0 | |||
| 2 | 43331042 | AUGUSTO | SOTOMAYOR | NARVAJO | 900800700 | 2019-10-08 | asoto@mail.com | 0.0 | |||
Agregando datos desde un formulario HTML a la base de datos
Podemos agregar un registro mediante un formulario, este no es necesario que sea un JSP, puede ser un HTML, pero si queremos mostrar un mensaje de error que llegue directamente desde el Servlet, será necesario que sea un JSP. Este archivo se llama: "inquilinosIns.jsp"<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>Agregar inquilino</h1>
<form action="Inquilinos" method="post" style="margin: auto; display: table">
<input type="hidden" name="accion" value="INS"/>
<fieldset>
<legend>Agregar datos</legend>
<br/>
<input type="text" name="dni" style="width: 400px"
placeholder="Ingrese el DNI"/>
<br/>
<input type="text" name="nombres" style="width: 400px"
placeholder="Ingrese el nombre"/>
<br/>
<input type="text" name="paterno" style="width: 400px"
placeholder="Ingrese el apellido paterno"/>
<br/>
<input type="text" name="materno" style="width: 400px"
placeholder="Ingrese el apellido materno"/>
<br/>
<input type="text" name="telefono" style="width: 400px"
placeholder="Ingrese el telefono"/>
<br/>
<label>Ingrese la fecha de ingreso</label>
<input type="date" name="fecha_ingreso" style="width: 400px"/>
<br/>
<label>Ingrese la deuda</label>
<input type="number" name="deuda" style="width: 400px"/>
<br/>
<input type="email" name="correo" style="width: 400px"
placeholder="Ingrese el correo"/>
<br/>
<br/><p style="text-align: center;">
<button type="submit">Agregar</button>
</p>
</fieldset>
</form>
<a href="index.html">Regresar</a><br/>
<c:if test="${message != null}">
<div>${message}</div>
</c:if>
</body>
</html>Actualizando datos desde un formulario HTML a la base de datos
Podemos actualizar un registro mediante un formulario, este debe ser un JSP, ya que vamos a cargar los datos del registro a actualizar en el formulario de actualización, vemos como aparecen los atributos "value" en los elementos HTML "input", el nombre debe coincidir con el dado en el "validator". Este archivo se llama: "inquilinosUpd.jsp"<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>Actualizar inquilino</h1>
<form action="Inquilinos" method="post" style="margin: auto; display: table">
<input type="hidden" name="accion" value="UPD"/>
<input type="hidden" name="idinquilinos" value="${inquilino.idinquilinos}"/>
<fieldset>
<legend>Actualizar datos</legend>
<br/>
<input type="text" name="dni" style="width: 400px"
placeholder="Ingrese el DNI"
value="${inquilino.dni}"/>
<br/>
<input type="text" name="nombres" style="width: 400px"
placeholder="Ingrese el nombre"
value="${inquilino.nombres}"/>
<br/>
<input type="text" name="paterno" style="width: 400px"
placeholder="Ingrese el apellido paterno"
value="${inquilino.paterno}"/>
<br/>
<input type="text" name="materno" style="width: 400px"
placeholder="Ingrese el apellido materno"
value="${inquilino.materno}"/>
<br/>
<input type="text" name="telefono" style="width: 400px"
placeholder="Ingrese el telefono"
value="${inquilino.telefono}"/>
<br/>
<label>Ingrese la fecha de ingreso</label>
<input type="date" name="fecha_ingreso" style="width: 400px"
value="${inquilino.fecha_ingreso}"/>
<br/>
<label>Ingrese la deuda</label>
<input type="number" name="deuda" style="width: 400px"
value="${inquilino.deuda}"/>
<br/>
<input type="email" name="correo" style="width: 400px"
placeholder="Ingrese el correo"
value="${inquilino.correo}"/>
<br/>
<br/><p style="text-align: center;">
<button type="submit">Actualizar</button>
</p>
</fieldset>
</form>
<a href="index.html">Regresar</a><br/>
<c:if test="${message != null}">
<div>${message}</div>
</c:if>
</body>
</html>Funciones JavaScript de apoyo
La navegación entre páginas es relativamente compleja si no empleamos funciones de JavaScript que nos ayudan incluso a mostrar algunos mensjaes de alerta. Este archivo se llama: "inquilinos.js" y se debe colocar en una carpeta llamada "js". Todo este embrollo de colocarlos en carpetas es muy útil para mantener un orden y trabajar de forma estandarizada.function inquilinosIns() {
window.location = "inquilinosIns.jsp";
}
function inquilinosDel() {
var ids = [];
$("input[name='id_del']:checked").each(function () {
ids.push($(this).val());
});
if (ids.length === 0) {
alert("Advertencia\n\nSeleccione la(s) fila(s) a Retirar");
} else {
var exito = confirm('¿Seguro que deseas borrar los registros?');
if (exito) {
window.location = "Inquilinos?accion=DEL&ids=" + ids.toString();
} else {
alert("Operación cancelada");
}
}
}
function inquilinosUpd() {
var id = $("input[name='id_upd']:checked").val();
if (isNaN(id)) {
alert("Seleccione Fila para Actualizar Datos");
} else {
window.location = "Inquilinos?accion=GET&idinquilino=" + id;
}
}Estas funciones son llamadas en la pantalla "inquilinosSel.jsp" en los botones de eliminar, actualizar o agregar.
Estructura de carpetas y archivos
Tendremos la siguiente estructura, es necesario incluir al JQuery parapoder trabajar de forma más sencilla con el código JS, pero no es necesario si se modifican las funciones de JS que lo emplean. Aún así es importante recalcar que prácticamente todos los Frameworks de FrontEnd emplean a esta biblioteca de JavaScript.
