Learn & Record

JSP (디렉티브 태그, include, JSTL, 연습문제, header, footer, 내장객체, request, response, http_request, page, redirect, taglib, form, method) 본문

Dev/JSP

JSP (디렉티브 태그, include, JSTL, 연습문제, header, footer, 내장객체, request, response, http_request, page, redirect, taglib, form, method)

Walker_ 2024. 4. 16. 12:31

1. include 디렉티브 태그

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
  <h4>헤더 페이지 영역입니다.</h4>
</body>
</html>
<body>
  <%--
   include 디렉티브 태그로 외부 파일의 내용 포함하기
   1) 외부 파일 include01_header.jsp의 내용을 포함하도록 include 디렉티브 태그를 작성.
   --%>
  <%@include file="include01_header.jsp"%>
  <h4>------------현재 페이지 영역------------------</h4>
</body>

<body>
  <%@include file="_header.jsp"%>
  <h4>방문해주셔서 감사합니다.</h4>
  <%@include file="_footer.jsp"%>
</body>

 

 - include 디렉티브 태그 사용 이유

 - 공통된 부분을 별도의 JSP 파일로 만들어 웹 파일로 만들 수 있다.

 - 코드를 재사용하고 중복된 코드를 줄임으로써 유지 보수 측면에서 매우 유용하다

 

2. taglib 디렉티브 태그

 

 - 1) JSTL 설치 

 - maver repository 검색 > 접속 https://mvnrepository.com/

 - jstl 검색 > 사용자 많은 걸로 들어감 > 1.2 클릭

 - gradle 탭 > 복사

 - build.gradle > dependencies 에 붙여 넣기 > 오른쪽 위 빌드 설치 아이콘(gradle 아이콘) & Sync now 클릭

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
  <%--taglib 디렉티브 태그에 태그 라이브러리로 JSTL을 설정하는 예--%>
  <%--
  JSTL 태그
  유용한 JSP 태그의 모음인 JSTL은 자주 사용되는 핵심 기능을 제공.
  반복문, 조건문과 같은 논리적 구조 작업, XML 문서 조작, 국제화 태그 조직, SQL 조작 수행을 위한 태그를 지원.

  JTSL을 사용하려면 WebContent/WEB-INF/lib 디렉터리의 위치에 jstl.jar 라이브러리 파일이 있어야 함.
  Apache Standard Taglib 페이지에서 다운로드 가능.
  --%>
  <c:forEach var="k" begin="1" end="10" step="1">
    <c:out value="${k}" />
  </c:forEach>
</body>
</html>

 

4. 연습문제

<%--
  Created by IntelliJ IDEA.
  User: 평일 오전 계정
  Date: 2024-04-16
  Time: 오전 9:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page import="java.util.Date"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
  <%@ include file="_header.jsp"%>
  현재 시간 : <%=new Date()%>
</body>
</html>

 

 

 

5. 내장 객체

 - JSP 페이지에서 사용할 수 있도록 JSP 컨테이너에 미리 정의된 객체

 

 - 1) request

 - request 내장 객체는 JSP 페이지에서 가장 많이 사용되는 기본 내장 객체로,

 - 웹 브라우저에서 서버의 JSP 페이지로 전달하는 정보를 저장

<%--
  Created by IntelliJ IDEA.
  User: 평일 오전 계정
  Date: 2024-04-16
  Time: 오전 10:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <form action="request01_process.jsp" method="post">
        <p> 아 이 디 : <input type="text" name="id">
        <p> 비밀번호 : <input type="text" name="passwd">
        <p> <input type="submit" value="전송"/>
    </form>
</body>
</html>
<%--
  Created by IntelliJ IDEA.
  User: 평일 오전 계정
  Date: 2024-04-16
  Time: 오전 10:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
  <%-- request 내장 객체로 폼 페이지에서 아이디와 비밀번호를 전송받아 출력하기
  1) 폼 페이지에서 입력한 한글을 처리하도록 request 내장 객체의 setCharacterEncoding() 메서드에 문자 인코딩 유형을 utf-8로 작성
  2) 입력된 아이디와 비밀번호를 폼 문으로 부터 전송받도록 request 내장 객체의 getParameter() 메서드를 작성
  --%>
  <%
    request.setCharacterEncoding("utf-8");
    String userid = request.getParameter("id");
    String password = request.getParameter("passwd");
  %>
  <p> 아이디 : <%=userid%>
  <p> 비밀번호 : <%=password%>
</body>
</html>

 

 

 

 - 2) 요청 파라미터 관련 메소드

 - 사용자가 폼 페이지에 데이터를 입력한 후 서버에 전송할 때 전달되는 폼 페이지의 입력된 정보 형태

 

 - 3) 요청 HTTP 헤더 관련 메소드

<%@ page import="java.util.Enumeration" %>
<%--
  Created by IntelliJ IDEA.
  User: 평일 오전 계정
  Date: 2024-04-16
  Time: 오전 10:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <%--
     request 내장 객체로 모든 HTTP 헤더 정보 값 출력하기
     1) 모든 헤더 이름을 가져오도록 request 내장 객체의 getHeaderNames() 메서드를 호출하고,
     이를 모두 저장하도록 Enumeration 객체 타입의 변수 en을 작성.
     2) Enumeration 객체 타입 변수 en의 hasMoreElements() 메서드를 통해 저장된 헤더 이름이 있을 때까지 반복하도록 while 문 작성
     3) 현재 헤더 이름을 가져오도록 Enumeration 객체 타입 변수 en의 nextElement() 메서드를 작성
     4) 설정된 헤더 이름의 값을 가져오도록 request 내장 객체의 getHeader() 메소드를 작성

     예 : 
     uesr-agent : 사용자의 브라우저 정보
     referer : 현재 페이지로 이동해오기 바로 전 페이지의 주소
     --%>
  <%
    Enumeration en = request.getHeaderNames();
    while (en.hasMoreElements()) {
      String headerName = (String) en.nextElement();
      String headerValue = request.getHeader(headerName);
  %>
  <%=headerName%> : <%=headerValue%><br>
  <%
    }
  %>
</body>
</html>

 

 - 4) 웹 브라우저 정보 출력 내장 객체

<body>
  <%--
   reqeust 내장 객체로 모든 웹 브라우저 및 서버 정보 값 출력하기
   --%>

  <%-- 웹 브라우저의 요청 정보 길이 반환 --%>
  <p>요청 정보 길이 : <%=request.getContentLength() %>

    <%-- 웹 브라우저의 요청 정보 인코딩 반환 --%>
  <p>요청 정보 인코딩 : <%=request.getCharacterEncoding() %>

    <%-- 웹 브라우저의 요청 정보 콘텐츠 유형 반환 --%>
  <p>요청 정보 콘텐트 유형 : <%=request.getContentType() %>

    <%-- 웹 브라우저의 요청 정보 프로토콜 반환 --%>
  <p>요청 정보 프로토콜 : <%=request.getProtocol() %>

    <%-- 웹 브라우저의 요청 정보 방식 (GET, POST)을 반환 --%>
  <p>요청 정보 전송방식 : <%=request.getMethod() %>

    <%-- 웹 브라우저에 요청한 URI 경로를 반환 --%>
  <p>요청 URI : <%=request.getRequestURI() %>

    <%-- 현재 JSP 페이지의 웹 애플리케이션 콘텍스트 경로를 반환 --%>
  <p>컨텍스트 경로 : <%=request.getContextPath() %>

    <%-- 서버 이름을 반환 --%>
  <p>서버 이름  : <%=request.getServerName() %>

    <%-- 실행 중인 서버 포트 반환 --%>
  <p>서버 포트  : <%=request.getServerPort() %>

    <%-- 웹 브라우저의 전체 요청 파라미터 문자열(쿼리문) 반환 --%>
  <p>쿼리문  : <%=request.getQueryString() %>
</body>

 

 - 5) response 내장 객체

 - 사용자의 요청을 처리한 결과를 서버에서 웹 브라우저로 전달하는 정보를 저장.

<%--
  Created by IntelliJ IDEA.
  User: 평일 오전 계정
  Date: 2024-04-16
  Time: 오전 11:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
  <form action="request01_process.jsp" method="post">
    <p> 아 이 디 : <input type="text" name="id">
    <p> 비밀번호 : <input type="text" name="passwd">
    <p> <input type="submit" value="전송"/>
  </form>
</body>
</html>

 

<%--
  Created by IntelliJ IDEA.
  User: 평일 오전 계정
  Date: 2024-04-16
  Time: 오전 10:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
  <%--
  내장 객체로 페이지 이동하기.
  아이디왕 비밀번호가 일치하면 성공 페이지로, 그렇지 않으면 로그인 페이지로 이동

  1) 폼 문으로 전송받은 아이디와 비밀번호가 일치하면 response01_success.jsp 페이지로 이동,
  일치하지 않으면 response01_failed.jsp 페이지로 이동하도록
  response 내장 객체의 sendRedirect() 메서드를 작성
  --%>
  <%
    request.setCharacterEncoding("utf-8");
    String userid = request.getParameter("id");
    String password = request.getParameter("passwd");

    if (userid.equals("관리자")&&password.equals("1234")) {
      out.println("로그인을 성공했습니다!!");
      response.sendRedirect("response01_success.jsp");
    } else {
      out.println("로그인을 실패했습니다.");
      response.sendRedirect("response01_failed.jsp");
    }
  %>
</body>
</html>
<%--
  Created by IntelliJ IDEA.
  User: 평일 오전 계정
  Date: 2024-04-16
  Time: 오전 11:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
로그인을 성공했습니다!!
</body>
</html>
<%--
  Created by IntelliJ IDEA.
  User: 평일 오전 계정
  Date: 2024-04-16
  Time: 오전 11:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<p>로그인을 실패했습니다.</p>
  <p><a href="./04_response.jsp">로그인창으로</a></p>
</body>
</html>

 

6. 연습문제 

<%--
  Created by IntelliJ IDEA.
  User: 평일 오전 계정
  Date: 2024-04-16
  Time: 오전 11:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
  <form action="request_process.jsp" method="get">
    <p> 아 이 디 : <input type="text" name="id">
    <p> 비밀번호 : <input type="text" name="passwd">
    <p> <input type="submit" value="전송"/>
  </form>
</body>
</html>
<body>
  <%
    request.setCharacterEncoding("utf-8");
    String userid = request.getQueryString();
    String password = request.getQueryString();
  %>
</body>

 

 

7. sendRedirect

<%@ page import="java.util.Calendar" %><%--
  Created by IntelliJ IDEA.
  User: 평일 오전 계정
  Date: 2024-04-16
  Time: 오후 12:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <%
      response.setHeader("Refresh", "5");
      Calendar calendar = Calendar.getInstance();
      String am_pm;
      int hour = calendar.get(Calendar.HOUR_OF_DAY);
      int minute = calendar.get(Calendar.MINUTE);
      int second = calendar.get(Calendar.SECOND);

      if (hour<12)
        am_pm = " AM";
      else {
        am_pm = " PM";
        hour = hour - 12;
      }
      String currentTime = hour + ":" + minute + ":" + second + am_pm;
    %>
  <p>현재 시간은 <b><%=currentTime %></b></p>
  <a href="response_data.jsp">구글 페이지로 이동하기</a>
</body>
</html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<%
  response.sendRedirect("https://www.google.com");
%>>

 

 - sendRedirect 태그를 이용하면, 해당 URL로 접속한 사용자의 정보를 얻을 수 있음

 

 


공부 과정을 정리한 것이라 내용이 부족할 수 있습니다.

부족한 내용은 추가 자료들로 보충해주시면 좋을 것 같습니다.

읽어주셔서 감사합니다 :)