Exibição de Dados do Usuário | JSP | Expression Language

Introdução

Neste projeto, você aprenderá como exibir dados do usuário recuperados de um banco de dados usando expressões EL (Expression Language) em páginas JSP (JavaServer Pages). Você implementará duas páginas JSP: uma para inserir um ID de usuário e consultar as informações do usuário correspondente, e outra para exibir os dados consultados.

👀 Visualização

index.jsp
data.jsp

🎯 Tarefas

Neste projeto, você aprenderá:

Como implementar a página index.jsp, que contém um formulário para inserir um ID de usuário e redirecionar para data.jsp.
Como implementar a página data.jsp, que exibe os dados do usuário recuperados do banco de dados usando expressões EL.

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Usar expressões EL para acessar e exibir dados em páginas JSP.
Interagir com um servlet para recuperar dados de um banco de dados e passá-los para uma página JSP.
Criar e estilizar tabelas HTML para apresentar dados de maneira amigável ao usuário.

Implementar a Página index.jsp

Nesta etapa, você aprenderá como implementar a página index.jsp, que contém um formulário para inserir um ID de usuário e redirecionar para data.jsp.

Abra o arquivo index.jsp localizado em QueryDisplayElProject/src/main/webapp.
Adicione o seguinte código ao arquivo:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Consulta de Informações do Usuário</title>
</head>
<body>
<form action="/UserServlet" method="get">
    <input type="text" name="id" /><input
        type="submit"
        value="search"
/>
</form>
</body>
</html>

Este código cria um formulário HTML simples com um campo de entrada para o ID do usuário e um botão de envio rotulado como "search". Quando o usuário clica no botão de envio, ele enviará uma requisição GET para o /UserServlet com o parâmetro id definido como o ID do usuário inserido no campo de entrada.

Implementar a Página data.jsp

Nesta etapa, você aprenderá como implementar a página data.jsp, que exibirá os dados do usuário recuperados do banco de dados usando expressões EL.

Abra o arquivo data.jsp localizado em QueryDisplayElProject/src/main/webapp.
Adicione o seguinte código ao arquivo:

<%@ 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>Informações do Usuário</title>
    <style>
      th,
      td {
        border: 1px solid black;
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <c:if test="${not empty requestScope.user}">
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Nome</th>
            <th>Gênero</th>
            <th>Idade</th>
            <th>Número de Telefone</th>
            <th>Email</th>
            <th>Endereço</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>${user.userId}</td>
            <td>${requestScope.user.userName}</td>
            <td>${requestScope.user.userGender == 1 ? 'masculino' : 'feminino'}</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>Informação não encontrada.</p>
    </c:if>
  </body>
</html>

Este código cria uma tabela HTML para exibir os dados do usuário. Ele usa expressões EL para acessar as propriedades do objeto User recuperado do Servlet e armazenado no requestScope. Se o objeto User não for encontrado, ele exibe uma mensagem indicando que a informação não foi encontrada.

As tags <c:if> são usadas para exibir condicionalmente a tabela ou a mensagem "Informação não encontrada" com base na presença do objeto User no requestScope.

Inicie o servidor Tomcat usando o seguinte comando:

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

Abra um navegador web e vá para http://localhost:8080. Você verá uma caixa de entrada e um botão; na caixa de entrada, insira o ID do número, por exemplo: 7, e clique no botão para ir para a página data.jsp e exibir as informações do usuário com o ID 7.

O resultado é o seguinte:

User data display result

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.

Exibindo Resultados de Consulta Usando Expressões EL