User Data Display | JSP | Expression Language

Introduction

In this project, you will learn how to display user data retrieved from a database using EL (Expression Language) expressions in JSP (JavaServer Pages) pages. You will implement two JSP pages: one for entering a user ID and querying the corresponding user information, and another for displaying the queried data.

👀 Preview

index.jsp
data.jsp

🎯 Tasks

In this project, you will learn:

How to implement the index.jsp page, which contains a form to enter a user ID and redirect to data.jsp.
How to implement the data.jsp page, which displays the user data retrieved from the database using EL expressions.

🏆 Achievements

After completing this project, you will be able to:

Use EL expressions to access and display data in JSP pages.
Interact with a servlet to retrieve data from a database and pass it to a JSP page.
Create and style HTML tables to present data in a user-friendly manner.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL java(("`Java`")) -.-> java/FileandIOManagementGroup(["`File and I/O Management`"]) java(("`Java`")) -.-> java/BasicSyntaxGroup(["`Basic Syntax`"]) java/FileandIOManagementGroup -.-> java/io("`IO`") java/BasicSyntaxGroup -.-> java/output("`Output`") subgraph Lab Skills java/io -.-> lab-300360{{"`Displaying Query Results Using EL Expressions`"}} java/output -.-> lab-300360{{"`Displaying Query Results Using EL Expressions`"}} end

Implement the index.jsp Page

In this step, you will learn how to implement the index.jsp page, which contains a form to enter a user ID and redirect to data.jsp.

Open the index.jsp file located in QueryDisplayElProject/src/main/webapp.
Add the following code to the file:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>User Information Inquiry</title>
</head>
<body>
<form action="/UserServlet" method="get">
    <input type="text" name="id" /><input
        type="submit"
        value="search"
/>
</form>
</body>
</html>

This code creates a simple HTML form with an input field for the user ID and a submit button labeled "search". When the user clicks the submit button, it will send a GET request to the /UserServlet with the id parameter set to the user ID entered in the input field.

✨ Check Solution and Practice

Implement the data.jsp Page

In this step, you will learn how to implement the data.jsp page, which will display the user data retrieved from the database using EL expressions.

Open the data.jsp file located in QueryDisplayElProject/src/main/webapp.
Add the following code to the file:

<%@ 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>User Information</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>Name</th>
            <th>Gender</th>
            <th>Age</th>
            <th>Phone Number</th>
            <th>Email</th>
            <th>Address</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>${user.userId}</td>
            <td>${requestScope.user.userName}</td>
            <td>${requestScope.user.userGender == 1 ? 'man' : 'woman'}</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>Information not found.</p>
    </c:if>
  </body>
</html>

This code creates an HTML table to display the user data. It uses EL expressions to access the properties of the User object retrieved from the Servlet and stored in the requestScope. If the User object is not found, it displays a message indicating that the information was not found.

The <c:if> tags are used to conditionally display the table or the "Information not found" message based on whether the User object is present in the requestScope.

Start the Tomcat server using the following command:

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

Open a web browser and go to http://localhost:8080. You will see an input box and a button, in the input box, enter the number id, for example: 7, and then click the button to jump to the data.jsp page and display the id of the 7 user information.

The result is as follows: