Affichage de données utilisateur | JSP | Expression Language

Introduction

Dans ce projet, vous allez apprendre à afficher des données d'utilisateur récupérées à partir d'une base de données à l'aide d'expressions EL (Expression Language) dans des pages JSP (JavaServer Pages). Vous allez implémenter deux pages JSP : une pour saisir un identifiant d'utilisateur et interroger les informations correspondantes de l'utilisateur, et une autre pour afficher les données interrogées.

👀 Aperçu

index.jsp
data.jsp

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment implémenter la page index.jsp, qui contient un formulaire pour saisir un identifiant d'utilisateur et rediriger vers data.jsp.
Comment implémenter la page data.jsp, qui affiche les données d'utilisateur récupérées à partir de la base de données à l'aide d'expressions EL.

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Utiliser des expressions EL pour accéder et afficher des données dans des pages JSP.
Interagir avec un servlet pour récupérer des données à partir d'une base de données et les passer à une page JSP.
Créer et styliser des tableaux HTML pour présenter des données de manière conviviale.

Implémentez la page index.jsp

Dans cette étape, vous allez apprendre à implémenter la page index.jsp, qui contient un formulaire pour saisir un identifiant d'utilisateur et rediriger vers data.jsp.

Ouvrez le fichier index.jsp situé dans QueryDisplayElProject/src/main/webapp.
Ajoutez le code suivant au fichier :

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Recherche d'informations utilisateur</title>
</head>
<body>
<form action="/UserServlet" method="get">
    <input type="text" name="id" /><input
        type="submit"
        value="rechercher"
/>
</form>
</body>
</html>

Ce code crée un formulaire HTML simple avec un champ de saisie pour l'identifiant d'utilisateur et un bouton de soumission intitulé "rechercher". Lorsque l'utilisateur clique sur le bouton de soumission, il enverra une requête GET à /UserServlet avec le paramètre id défini sur l'identifiant d'utilisateur saisi dans le champ de saisie.

Implémentez la page data.jsp

Dans cette étape, vous allez apprendre à implémenter la page data.jsp, qui affichera les données d'utilisateur récupérées à partir de la base de données à l'aide d'expressions EL.

Ouvrez le fichier data.jsp situé dans QueryDisplayElProject/src/main/webapp.
Ajoutez le code suivant au fichier :

<%@ 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>Informations utilisateur</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>Nom</th>
            <th>Genre</th>
            <th>Âge</th>
            <th>Numéro de téléphone</th>
            <th>Email</th>
            <th>Adresse</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>${user.userId}</td>
            <td>${requestScope.user.userName}</td>
            <td>${requestScope.user.userGender == 1? 'homme' : 'femme'}</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>Informations non trouvées.</p>
    </c:if>
  </body>
</html>

Ce code crée un tableau HTML pour afficher les données d'utilisateur. Il utilise des expressions EL pour accéder aux propriétés de l'objet User récupéré à partir du Servlet et stocké dans le requestScope. Si l'objet User n'est pas trouvé, il affiche un message indiquant que les informations n'ont pas été trouvées.

Les balises <c:if> sont utilisées pour afficher le tableau ou le message "Informations non trouvées" de manière conditionnelle en fonction de la présence de l'objet User dans le requestScope.

Démarrez le serveur Tomcat en utilisant la commande suivante :

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

Ouvrez un navigateur web et accédez à http://localhost:8080. Vous verrez une zone de saisie et un bouton. Dans la zone de saisie, entrez le numéro d'identifiant, par exemple : 7, puis cliquez sur le bouton pour vous rendre sur la page data.jsp et afficher les informations de l'utilisateur avec l'identifiant 7.

Le résultat est le suivant :

Résultat d'affichage des données utilisateur

Résumé

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires sur LabEx pour améliorer vos compétences.

Affichage des résultats de requête à l'aide d'expressions EL