ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 백엔드 (4) - JSP(Java Server Page)
      백엔드 프로그래밍 2021. 12. 30. 23:36

      JSP (Java Server Page)

      JSP와 Servlet (서블릿)

      JSP (Java Server Pages)

      • HTML 내에 Java 언어를 삽입함 문서
      • jsp

      Servlet (Server + Applet)

      • Java 언어로 이루어진 웹 프로그래밍 문서
      • 자바 코드에 의존적
      • .java

      JSP (Java Server Page)

      • Java 기반
      • HTML 문서 내에 자바 코드를 삽입해서
      • 웹 서버에서 동적으로 웹 페이지를 생성해서 클라이언트(웹 브라우저)에게 반환해 주는 언어
      • 서버 사이드 스크립트 언어
      • JSP를 통해 HTML과 동적으로 생성된 컨텐츠(DB 연동된 실시간 데이터)를 혼합해서 사용 가능
      • Servlet을 보완한 스크립트 방식 표준 언어
      • Servlet 기능 + 추가 기능
      • JSP(.jsp)는 실행되면서 Servlet(.java)으로 변환되어 컴파일 되서 클래스 파일(.class) 파일로 만들어져 실행
      • View를 담당하는 페이지로 사용
      • 점차 JSP 페이지에서 자바 코드가 사라지고 있는 추세
        • El과 JSTL로 표현

      JSP와 Servlet(서블릿) 차이점

      • JSP : HTML 내부에 Java 소스 코드가 들어 있는 형식 (사용하기 편리하고 쉬움)
      • Servlet : Java 코드 내에 HTML 코드가 들어 있어서 읽고 쓰기 불편

      JSP 페이지 구조

      JSP = 정적 페이지 + 동적 페이지

      정적 페이지 구현 : HTML 태그

      동적 페이지 구현

      • <%@ %>
      • <% %>
      • <%! %>
      • <%= %>
      • 등의 스크립트 사용

      JSP 페이지 인코딩 설정

      Window / Preferences
General / Workspace 
오른쪽 하단에서 Other : UTF-8
[Apply]
Web / JSP Files
Encoding : ISO 10626/Unicode(UTF-8)
      프로젝트 생성 (Dynamic Web Project)
JSP01
JSP 파일 생성

      JSP 파일 생성/실행하고 웹 브라우저에서 확인

      JSP 파일은 .java 파일로 변환 생성되고, 
컴파일되서 .class 파일 생성되어 실행
java와 class 파일 위치
C:\webWorkspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\work\Catalina\localhost\JSP01\org\apache\jsp
JSP 파일 내용을 변경하고 실행했는데 결과가 반영되지 않는 경우 java와 class 파일 삭제하고 다시 실행

      JSP 템플릿 만들기

      JSP 태그

      • <% 로 시작하고 %> 로 종료
      • @, !, =, – 문자를 추가하여 태그의 의미 부여

      JSP 페이지의 기본 구성 요소

      JSP 페이지 내용

      • HTML 문서 내용 + JSP 태그 + 자바 코드

      JSP 페이지 구성

      • 지시어 : page, include, taglib
      • 스크립트 요소
        • 선언문 (Declaration)
        • 표현식 (Expression)
        • 스크립트릿 (Scriptlet)
      • 액션 태그

      지시어

      • JSP 페이지의 전체적인 속성을 지정할 때 사용
      • JSP 컨테이너에게 전달하는 JSP 페이지 관련 메시지
      • <%@ 지시어 속성1=값, 속성2=값, … %>
      • page, include, taglib 등 사용

      page 지시어 : <%@ page %>

      • JSP 페이지에 대한 속성 설정
      • language="java"
      • contentType="text/html; charset=UTF-8"
      • pageEncoding="UTF-8"

      include 지시어 : <%@ include %>

      • <%@ include file=”포함될 파일의 url” %>
      • 포함시킬 파일명을 file 속성의 값으로 기술
      • 공통적으로 포함될 내용을 가진 파일을 해당 JSP 페이지 내에 삽입하는 기능 제공
      • 중첩 지정 가능
        • 한 JSP 페이지에서 다른 JSP 페이지를 포함하거나
        • 포함된 JSP 페이지가 또 다른 JSP 페이지에 중첩 포함 가능
      • 두 개의 파일이 하나의 파일로 합쳐진 후 하나의 파일로서 변환되고 컴파일

      tagline 지시어 : <%@ taglia %>

      • <%@ taglib prefix = “c” url =”…….” %>
      • 커스텀 태그를 JSP 페이지 내에 사용할 때 이용
      • 뒤에서 상세하게 다룸

      JSP 페이지의 스크립트 요소

      • 선언문 (Declaration)
      • 표현식 (Expression)
      • 스크립트릿 (Scriptlet)

      선언문 (Declaration)

      • JSP 페이지의 멤버 필드(변수)나 메소드를 정의할 때 사용
      • 선언문에서 선언된 변수는 페이지 전체에서 사용 (전역변수의 의미)
      • 형식 : <%! 선언 %>
      • 예 : <%! int a = 10; %>
      • <%!
int x = 100;
String str = “문자열”;
// String name= “홍길동”;
      %>

      표현식 (Expression)

      • 변수 값, 계산 결과, 메소드 호출 결과를 직접 출력하기 위해 사용
      • 형식 : <%= 수식 %>
        • <%= 변수 %>
      • 예 :
        • <%= 3*5 %>
        • <%= name %>

      스크립트릿 (Scriptlet)

      • 자유롭게 자바 코드를 기술할 수 있는 영역
      • <% 자바코드 %>
      • 스크립트릿에서 선언된 변수는 지역변수의 개념
        • 선언된 이후부터 사용 가능
        • <% String address = “경기”; %>

      변수 선언 예제 : variable.jsp

      <body>
<%
// 선언
// 변수 선언 및 초기화만 가능 
int x = 10;// 변수 선언 및 초기화 // 선언과 동시에 값을 지정하는건 가능 
long y;// 변수 선언만

// y = 100;// 이 경우 오류 (선언부에서는 값을 지정할 수 없음. 선언과 동시에 초기화만 가능)

float floatValue = 3.14f;
double doubleValue = 3.14;

char ch = 'a';
String myJob = "프로그래머";

boolean b = true;
%>
<%
String name = "홍길동";
y = 100; // 스크립트 영역에서 값 지정하면 됨 
%>

<h3>변수 값 출력</h3>
x : <%= x %><br>
y : <%= y %><br>
floatValue : <%= floatValue %><br>
doubleValue : <%= doubleValue %><br>
ch : <%= ch %><br>
   myJob : <%= myJob %><br>
   b : <%= b %><br>
   name : <%= name %>
</body>

      메소드 선언 : 반드시 선언부에서 정의 (<%옆에 !가 선언부 정의 !!)

      • 스크립트릿 영역에서 정의(선언) 안 함
      <%!
String id = "abcd";

// 메소드는 반드시 선언부에서 정의
public String getId() {
return id;
}
%>

      표현식 예제 : expression.jsp

      <body>
<%!
int add(int a, int b){
return a*b;
}
int x=10, y=20;
%>
x= <%= x %><br>
y= <%= y %><br>
add(x,y)= <%= add(x,y) %><br>
</body>

      include 지시어

      • <%@ include file=”포함될 파일의 url” %>
      • 포함시킬 파일명을 file 속성의 값으로 기술
      • (공통적으로) 포함될 내용을 가진 파일을 해당 JSP 페이지 내에 삽입하는 기능

      include 지시어 예제

      • top.jsp
      • bottom.jsp
      • jspInclude.jsp (top.jsp와 bottom.jsp include 시킴)
      <%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
  <%@ page import="java.util.*" %> <!-- 자바처럼 import 필수! -->
<%
Date date = new Date();
%>
<font color='blue' size='3pt'>
top.jsp 입니다 <p/>
<%= date.toLocaleString() %>
</font>
      <%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<font color='pink' size='3pt'>
bottom.jsp 입니다 <p/>
작성자 <b><%= name %></b> 입니다
<!-- name : 선언되지 않은 변수이기 때문에 오류 발생 -->
<!-- 다른 페이지에 포함되어서 선언되어 있는 name 변수 사용 시 -->
</font> 
      <%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%!
String name = "홍길동";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP include 지시어 예제</title>
</head>
<body>
<!-- top -->
이 부분에 top.jsp의 내용이 포함될 것입니다 <p>
<%@ include file="top.jsp" %>
<hr>
<!-- 본문 -->
<h3>본문</h3>
이 부분은 include.jsp의 내용입니다 <p>

<hr>
<!-- bottom -->
이 부분에 bottom.jsp의 내용이 포함될 것입니다 <p>
<%@ include file="bottom.jsp" %>

</body>
</html>

      필요한 부분만 넣어서 하나의 html처럼 표시 가능!!!!!!!!

      페이지소스 볼때는 ?!

      주석

      • HTML 주석 : <!-- -->
      • JSP 주석 : <%-- --%>
      • 자바 주석 : //, /* */
        •  

      JSP 내장 객체

      • 클라이언트에서 웹 서버에 JSP 페이지를 요청하면 자동으로 생성
      • 객체 생성하지 않고 바로 사용 가능

      내장 객체 종류

      • 입출력 : request / response / out
      • 서블릿 : page /config
      • 컨텍스트 : session / application / pageContext
      • 예외 처리 : exception

      request 객체

      • 클라이언트(웹 브라우저)의 요청 정보를 전달하기 위한 객체
      • 주로 클라이언트에서 전송된 쿼리 문자열, 쿠키 정보, 다른 페이지에서 전송된 값에 대한 정보 등을 추출할 수 있는 메소드 제공

      request 메소드

      • 클라이언트 요청 관련 메소드
      • 파라미터 관련 메소드
      • HTTP 헤더 관련 메소드

      request 객체 예제 : request.jsp

      <body>
<%
out.println("서버 : " + request.getServerName() + "<br>");
out.println("포트 번호 : " + request.getServerPort() + "<br>");
out.println("요청 방식 : " + request.getMethod() + "<br>");
out.println("프로토콜 : " + request.getProtocol() + "<br>");
out.println("URL : " + request.getRequestURL() + "<br>");
out.println("URI : " + request.getRequestURI() + "<br>");
out.println("ContextPath : " + request.getContextPath() + "<br>");
out.println("ServletPath : " + request.getServletPath());
%>
</body>

      request 객체 파라미터 관련 메소드

      가장 많이 사용되는 중요한 메소드
<input type="text" name="address">
HTML 태그의 name 속성 값을 받음

      request 객체 파라미터 관련 메소드 예제 (중요!!!)

      requestForm.jsp (join.html 복사해서 사용)
requestFormOk.jsp

      중요!!!

      requestForm.jsp (join.html 복사해서 사용)
requestFormOk.jsp
실행 순서
requestForm.jsp 실행하고
데이터 입력 후 
[완료] 버튼 클릭
결과 출력
주의!!!
requestFormOk.jsp 부터 실행하지 않음
데이터가 전송되지 않으면 String 변수는 오류 없이 null 값이 출력되지만
배열에서 index 참조할 때 NullPointer 오류 발생
오류 유형
404 : 페이지 없음 (jsp 페이지가 없거나 매핑 페이지 없는 경우 발생)
<form> 태그의 action 속성에 있는 jsp 파일명부터 확인
500 : 문법적 오류 (자세히 보면 오류 나는 행 번호가 있음 - 행 번호 찾아서 오류 해결)

      response 객체

      • JSP 페이지에서 처리한 결과를 웹 브라우저에게 응답할 때 사용
      • 헤더 설정, 코드 상태, 쿠키 등의 정보 포함
      • 응답 컨텐츠 설정, 응답 헤더 설정, 상태 코드 설정 등과 관련된 메소드 제공

      response 객체 예제

      response.jsp : 데이터 입력 폼
“대한민국의 수도는?” 
입력 데이터 : 서울
responseOk.jsp 
데이터 전달 받아서 작업 수행 후 결과를 sendRedirect() 
맞으면 : pass.jsp로 sendRedirect() 
틀리면 : fail.jsp로 sendRedirect() 
pass.jsp
fail.jsp
실행 시작 : response.jsp
      <form method="post" action="responseOK.jsp">
대한민국의 수도는 ?
<input type = "text" name="answer" size="10">
<input type = "submit" value="전송">
</form>
      <title>JSP responseOK</title>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");
String answer = request.getParameter("answer");

// "서울"이면 reponse.sendRedirect("pass.jsp")
if(answer.equals("서울")){
response.sendRedirect("pass.jsp");
} else{
response.sendRedirect("fail.jsp");
}

%>

       

      out 객체

      • 웹 서버에서 웹 브라우저에게 출력 스트림으로 응답하기 위해 사용
      • out.println(“출력 문자열”);
      • 표현식(<%= 출력 문자열 %>)과 동일

      전송되는 데이터의 타입

      • 모두 문자열
        • String answer = request.getParameter("answer");
      • 숫자 연산을 할 경우 숫자형으로 형변환 필요
      • Integer.parseInt(문자열 변수)
      • Integer.parseInt(answer )
      • Int a = Integer.parseInt(request.getParameter("answer"))

      형변환 예제

      • typeConversion.jsp
        • 가로 길이, 세로 길이 숫자 입력
      • typeConversionOK.jsp
        • 문자열로 전달 받은 데이터를 숫자형으로 형변환하고 넓이 계산하여 출력
        • 사각형의 넓이 출력

      JSP의 제어문 (Java와 동일)

      • if 문
      • for 문
      • while 문

      for문 연습문제

      • forForm.jsp
        • 구구단 단 입력
      • forResult.jsp
        • 입력 받은 단 출력
        • 테이블 행으로 출력
          • 7 단
          • 7 * 1 = 7
          • 7 * 2 = 14

      액션 태그

      • JSP 페이지 내에서 어떤 동작을 지시하는 태그
      • 기능
        • 어떤 동작 또는 액션이 일어나는 시점에 페이지와 페이지 사이에서의 제어 이동
        • 다른 페이지의 실행 결과를 현재 페이지에 포함
      • 종류
        • include
        • forward
        • useBean
        • setProperty
        • getProperty

      include 액션 태그 : jsp:include

      • 다른 페이지의 실행 결과를 현재 페이지에 포함시킬 때 사용

      forward 액션 태그 : jsp:forward

      • 현재 페이지에서 다른 특정 페이지로 전환
      • 웹 페이지 간의 제어를 이동시킬 때 사용

      param 액션 태그 : jsp:param

      • 이동하는 페이지에 파라미터 값을 전달할 때 사용

      useBean 액션 태그 : jsp:useBean

      • 자바빈을 JSP 페이지에서 사용할 때 사용

      setProperty 액션 태그 : jsp:setProperty

      • 프로퍼티(변수) 값을 세팅할 때 사용

      getProperty 액션 태그 : jsp:getProperty

      • 프로퍼티의 값을 얻어낼 때 사용 (getter)

      include 액션 태그 : jsp:include

      • 다른 페이지의 실행 결과를 현재 페이지에 포함시킬 때 사용
      • 페이지를 모듈화 할 때 사용
      • <jsp:include page="포함될 페이지" flush="true" />
        • page 속성 : 결과가 포함될 페이지명
        • fulsh 속성
          • 포함될 페이지로 제어가 이동될 때 현재 포함하는 페이지가 지금까지 출력 버퍼에 저장한 결과를 처리하는 방법을 결정
          • true : 현재 페이지가 지금까지 버퍼에 저장한 내용을 웹 브라우저에 출력하고 버퍼를 비움

      include 액션 태그 예제

      includeAction1.jsp
includeAction2.jsp
includeAction1.jsp에 includeAction2.jsp를 포함시킴
includeAction1.jsp 실행
      <h3> includeAction1.jsp 입니다</h3>
<hr>
<jsp:include page = "includeAction2.jsp" flush=" true"/>

      forward 액션 태그 : jsp:forward

      • 현재 페이지에서 다른 특정 페이지로 전환
      • 웹 페이지 간의 제어를 이동시킬 때 사용
      • <jsp:forward page=”포워딩할 JSP 페이지”>
      • forward 액션 태그 예제
        • login.jsp
          • 처음 실행 시 제목 : 로그인
        • loginResult.jsp
          • ID를 입력하지 않은 경우 다시 login.jsp로 forward
            • 로그인 자리에 "아이디를 입력하지 않았습니다. 아이디를 입력해 주세요" 출력
      <body>
<%-- <%
String user_id = request.getParameter("user_id");
   // null 인 경우에 오류 없이 null 로 출력
   // null로 뭔가를 하려고 하면 NullPointerException 오류 발생
%>
<%= user_id.length() %> --%>
<%
String user_id = request.getParameter("user_id");
   if(user_id == null){
%>
<h2>로그인</h2>
<%
   }else {
%>
<h2>아이디를 입력하지 않았습니다. 아이디를 입력해 주세요.</h2>
<%
   }
%>
 <form name="frmLogin" method="post" action="loginResult.jsp" >
   아이디 :<input type="text" name="user_id"><br>
     비밀번호:<input type="password" name="user_pw" ><br>
   <input type="submit" value="로그인"> <input type="reset" value="다시입력">
 </form>
      <body>
<%
request.setCharacterEncoding("utf-8");
// ID 받아와서 ID 입력하지 않았으면 login.jsp 로 forward
String user_id = request.getParameter("user_id");
if(user_id.length() == 0){
%>
<jsp:forward page="login.jsp" />
<%
}
%>

<h2>환영합니다 <%= user_id %>님!</h2>
</body>

      param 액션 태그 : jsp:param

      • forward 및 include 액션 태그에서 데이터를 전달하기 위해 사용
      • name과 value로 구성
      • <jsp:param name=”id” value=”abcd” />
      • param 액션 태그로 전달된 값 받을 때
        • request.getParameter(“id”)
      • 예제
        • paramLogin.jsp
        • paramLoginResult.jsp
      <%
request.setCharacterEncoding("utf-8");
String msg = request.getParameter("msg");
if(msg == null){
%>
<h3>로그인</h3>
<%
} else {
%>
<h3><%= msg %></h3>
<%
}
%>
<form name="frmLogin" method="post" action="paramResult.jsp" >
   아이디 :<input type="text" name="user_id"><br>
     비밀번호:<input type="password" name="user_pw" ><br>
   <input type="submit" value="로그인"> <input type="reset" value="다시입력">
      <%
request.setCharacterEncoding("utf-8");
String msg = "아이디를 입력하지 않았습니다. 아이디를 입력해 주세요.";

String user_id = request.getParameter("user_id");
// user_id 값이 비었으면 paramLogin.jsp로 포워딩. msg 전송
if(user_id.length() == 0){
%>
<jsp:forward page="paramLogin.jsp">
<jsp:param name="msg" value="<%= msg %>" />
</jsp:forward>
<%
}
%>

<h3>환영합니다. <%=user_id %>님!!!</h3>

      자바 빈 (JavaBeans)

      • DTO / VO와 같은 개념
      • 데이터를 다루기 위해 자바로 작성되는 소프트웨어 컴포넌트로 재사용 가능
      • 입력 폼의 데이터와 데이터베이스의 데이터 처리 부분에서 활용
      • 클래스로 만들어지고
        • 멤버 필드(변수)로 속성(property)이 있고
        • 멤버 메소드로 Getter/Setter 메소드 포함
        • setXXX() : 프로퍼티에 값 저장
        • getXXX() : 프로퍼티 값 반환
      • 액션 태그를 이용해서 빈 사용
      • 속성 접근 제어자는 private
      • Getter / Setter 메소드와 클래스는 public

      자바 빈 관련 액션 태그

      • useBean 액션 태그 : jsp:useBean
        • 자바 빈을 JSP 페이지에서 이용할 때 사용
      • setProperty 액션 태그 : jsp:setProperty
        • 프로퍼티의 값을 설정할 때 사용
        • 데이터 저장
      • getProperty 액션 태그 : jsp:getProperty
        • 프로퍼티의 값을 얻어낼 때 사용

      useBean 액션 태그

      • 자바 빈을 JSP 페이지에서 이용할 때 사용
      • <jsp:useBean id=”빈 이름” class=”클래스” scope=”유효범위” />
      • <jsp:useBean id=”student” class=”sec01.StudentBean” scope=”page” />

      setProperty 액션 태그 : jsp:setProperty

      • 프로퍼티의 값을 설정할 때 사용
      • 데이터 저장
      • <jsp:setProperty name=”빈 이름” property=”속성이름” value=”속성값” />
      • <jsp:setProperty name=”student” property=”stdNo” value=”2021001” />

      getProperty 액션 태그 : jsp:getProperty

      • 프로퍼티의 값을 얻어낼 때 사용
      • <jsp:getProperty name=”빈 이름” property=”속성이름”>
      • <jsp:getProperty name=”student” property=”stdNo”>

      자바 빈 액션 태그 예제

      빈 클래스 : StudentBean.java (DTO/VO와 동일)
Getters / Setters
studentBean.jsp
useBean 액션 태그
setProperty 액션 태그
getProperty 액션 태그

       

      '백엔드 프로그래밍' 카테고리의 다른 글

      백엔드 (5) - JSP, EL, JSTL, Core 태그  (1) 2022.01.01
      백엔드 (3) - 서블릿 포워드, 쿠키와 세션  (0) 2021.12.29
      백엔드 (2) - 서블릿 로직 처리, 커넥션 풀  (0) 2021.12.29
      백엔드(1) - Servlet  (1) 2021.12.28

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바