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.

Skills Graph

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.

✨ Revisar Solución y Practicar

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