Visualización de datos de usuario | JSP | Expression Language

Introducción

En este proyecto, aprenderá a mostrar datos de usuario recuperados de una base de datos utilizando expresiones EL (Expression Language) en páginas JSP (JavaServer Pages). Implementará dos páginas JSP: una para ingresar un ID de usuario y consultar la información correspondiente del usuario, y otra para mostrar los datos consultados.

👀 Vista previa

index.jsp
data.jsp

🎯 Tareas

En este proyecto, aprenderá:

Cómo implementar la página index.jsp, que contiene un formulario para ingresar un ID de usuario y redirigir a data.jsp.
Cómo implementar la página data.jsp, que muestra los datos de usuario recuperados de la base de datos utilizando expresiones EL.

🏆 Logros

Después de completar este proyecto, podrá:

Utilizar expresiones EL para acceder y mostrar datos en páginas JSP.
Interactuar con un servlet para recuperar datos de una base de datos y pasarlos a una página JSP.
Crear y dar estilo a tablas HTML para presentar datos de manera amigable para el usuario.

Implementar la página index.jsp

En este paso, aprenderá a implementar la página index.jsp, que contiene un formulario para ingresar un ID de usuario y redirigir a data.jsp.

Abra el archivo index.jsp ubicado en QueryDisplayElProject/src/main/webapp.
Agregue el siguiente código al archivo:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Consulta de información de usuario</title>
</head>
<body>
<form action="/UserServlet" method="get">
    <input type="text" name="id" /><input
        type="submit"
        value="buscar"
/>
</form>
</body>
</html>

Este código crea un formulario HTML simple con un campo de entrada para el ID de usuario y un botón de envío etiquetado "buscar". Cuando el usuario hace clic en el botón de envío, enviará una solicitud GET a /UserServlet con el parámetro id establecido en el ID de usuario ingresado en el campo de entrada.

Implementar la página data.jsp

En este paso, aprenderá a implementar la página data.jsp, que mostrará los datos de usuario recuperados de la base de datos utilizando expresiones EL.

Abra el archivo data.jsp ubicado en QueryDisplayElProject/src/main/webapp.
Agregue el siguiente código al archivo:

<%@ page import="org.labex.entity.User" %> <%@ page
contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core" %>
<html>
  <head>
    <title>Información de usuario</title>
    <style>
      th,
      td {
        border: 1px solid negro;
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <c:if test="${not empty requestScope.user}">
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Nombre</th>
            <th>Género</th>
            <th>Edad</th>
            <th>Número de teléfono</th>
            <th>Correo electrónico</th>
            <th>Dirección</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>${user.userId}</td>
            <td>${requestScope.user.userName}</td>
            <td>${requestScope.user.userGender == 1? 'hombre' :'mujer'}</td>
            <td>${requestScope.user.userAge}</td>
            <td>${requestScope.user.userPhone}</td>
            <td>${requestScope.user.userEmail}</td>
            <td>${requestScope.user.userAddr}</td>
          </tr>
        </tbody>
      </table>
    </c:if>
    <c:if test="${empty requestScope.user}">
      <p>No se encontró información.</p>
    </c:if>
  </body>
</html>

Este código crea una tabla HTML para mostrar los datos de usuario. Utiliza expresiones EL para acceder a las propiedades del objeto User recuperado del Servlet y almacenado en el requestScope. Si el objeto User no se encuentra, muestra un mensaje indicando que no se encontró la información.

Las etiquetas <c:if> se utilizan para mostrar condicionalmente la tabla o el mensaje "Información no encontrada" según si el objeto User está presente en el requestScope.

Inicie el servidor Tomcat utilizando el siguiente comando:

cd ~/project/QueryDisplayElProject/
mvn clean tomcat7:run

Abra un navegador web y vaya a http://localhost:8080. Verá una caja de entrada y un botón, en la caja de entrada, ingrese el número de identificación, por ejemplo: 7, y luego haga clic en el botón para saltar a la página data.jsp y mostrar la información del usuario con el id 7.

El resultado es el siguiente:

Resultado de la visualización de datos de usuario

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.

Mostrar resultados de consulta utilizando expresiones EL