사용자 데이터 표시 | JSP | 표현 언어 (EL)

소개

이 프로젝트에서는 JSP (JavaServer Pages) 페이지에서 EL (Expression Language) 표현식을 사용하여 데이터베이스에서 검색한 사용자 데이터를 표시하는 방법을 배우게 됩니다. 사용자 ID 를 입력하고 해당 사용자 정보를 쿼리하는 JSP 페이지와 쿼리된 데이터를 표시하는 JSP 페이지, 이렇게 두 개의 JSP 페이지를 구현할 것입니다.

👀 미리보기

index.jsp
data.jsp

🎯 과제

이 프로젝트에서는 다음을 배우게 됩니다:

사용자 ID 를 입력하고 data.jsp로 리디렉션하는 폼을 포함하는 index.jsp 페이지를 구현하는 방법.
EL 표현식을 사용하여 데이터베이스에서 검색한 사용자 데이터를 표시하는 data.jsp 페이지를 구현하는 방법.

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

EL 표현식을 사용하여 JSP 페이지에서 데이터에 접근하고 표시할 수 있습니다.
서블릿과 상호 작용하여 데이터베이스에서 데이터를 검색하고 JSP 페이지로 전달할 수 있습니다.
사용자 친화적인 방식으로 데이터를 표시하기 위해 HTML 테이블을 생성하고 스타일을 지정할 수 있습니다.

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> 태그는 User 객체가 requestScope에 있는지 여부에 따라 테이블 또는 "Information not found" 메시지를 조건부로 표시하는 데 사용됩니다.

다음 명령을 사용하여 Tomcat 서버를 시작합니다:

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

웹 브라우저를 열고 http://localhost:8080으로 이동합니다. 입력 상자와 버튼이 표시됩니다. 입력 상자에 숫자 id 를 입력합니다 (예: 7). 그런 다음 버튼을 클릭하여 data.jsp 페이지로 이동하여 7 사용자 정보의 id 를 표시합니다.

결과는 다음과 같습니다: