ユーザーデータ表示 | JSP | 式言語

はじめに

このプロジェクトでは、JSP（JavaServer Pages）ページでEL（Expression Language）式を使用してデータベースから取得したユーザーデータを表示する方法を学びます。2つのJSPページを実装します。1つはユーザーIDを入力して対応するユーザー情報を照会するためのもので、もう1つは照会したデータを表示するためのものです。

👀 プレビュー

index.jsp
data.jsp

🎯 タスク

このプロジェクトでは、以下を学びます。

ユーザーIDを入力して data.jsp にリダイレクトするフォームを含む index.jsp ページを実装する方法。
EL式を使用してデータベースから取得したユーザーデータを表示する data.jsp ページを実装する方法。

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

JSPページでEL式を使用してデータにアクセスして表示する。
サーブレットとやり取りしてデータベースからデータを取得し、JSPページに渡す。
ユーザーにとって使いやすい形式でデータを提示するためのHTMLテーブルを作成してスタイリッシングする。

Skills Graph

index.jsp ページを実装する

このステップでは、ユーザーIDを入力して data.jsp にリダイレクトするフォームを含む index.jsp ページを実装する方法を学びます。

QueryDisplayElProject/src/main/webapp にある index.jsp ファイルを開きます。
次のコードをファイルに追加します。

<%@ 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>

このコードは、ユーザーID用の入力フィールドと「search」とラベル付けされた送信ボタンを持つ簡単なHTMLフォームを作成します。ユーザーが送信ボタンをクリックすると、入力フィールドに入力されたユーザーIDが id パラメータとして /UserServlet にGET要求を送信します。

✨ 解答を確認して練習

data.jsp ページを実装する

このステップでは、EL式を使用してデータベースから取得したユーザーデータを表示する data.jsp ページを実装する方法を学びます。

QueryDisplayElProject/src/main/webapp にある data.jsp ファイルを開きます。
次のコードをファイルに追加します。

<%@ 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>

このコードは、ユーザーデータを表示するHTMLテーブルを作成します。Servlet から取得して requestScope に格納された User オブジェクトのプロパティにアクセスするためにEL式を使用します。User オブジェクトが見つからない場合、情報が見つからないことを示すメッセージを表示します。

<c:if> タグは、requestScope に User オブジェクトが存在するかどうかに基づいて条件付きでテーブルまたは「情報が見つかりません」メッセージを表示するために使用されます。

次のコマンドを使用してTomcatサーバーを起動します。

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

ウェブブラウザを開き、http://localhost:8080 に移動します。入力ボックスとボタンが表示されますので、入力ボックスに番号idを入力し、たとえば 7 を入力してからボタンをクリックすると、data.jsp ページにジャンプして 7 のユーザー情報が表示されます。

結果は以下の通りです。