JSP(디렉티브,액션,스크립트 태그)와 서블릿

최동민·2022년 6월 1일
jsp
0

JSP

목록 보기
1/10
post-thumbnail

JSP(Java Server Page)

HTML을 중심으로 자바와 같이 연동하여 사용하는 웹 언어이다.
HTML 코드 안에 JAVA코드를 작성할 수 있는 언어이다.

서버(service + er)

사용자의 요청에 맞는 서비스를 제공해주는 것


		요청(request)
클라이언트 -------------> 서버

		응답(response)
서버------------------>클라이언트

웹(Web)

페이지 요청과 응답이 일어나는 장소
인터넷에 연결된 컴퓨터들을 통해 사람들이 정보를 공유할 수 있는 정보 공간.

웹 서버

사용자의 요청이 정적 데이터인지 동적 데이터인지 판단한다.
정적 데이터일 경우 이미 준비된 HTML문서를 그대로 응답해주며,
동적 데이터라면 웹 컨테이너에 요청을 보낸다.

웹 컨테이너(서블릿 컨테이너)

동적 데이터일 경우 JSP, 서블릿으로 연산 및 제어, DB에 접근해서 정제된 데이터(정적 데이터)가 완성되면 이를 응답해준다.

WAS(Web Application Server)

동적 데이터를 처리할 서블릿을 메모리에 할당하며, web.xml을 참조하여 해당 서블릿에 대한 Thread를 생성한다. 서블릿 요청과 서블릿 응답 객체 생성 후 서블릿에 전달하면 연산 종료 후 메모리에서 해제시킨다.

서블릿(Servlet)

Java 코드 안에 HTML 코드를 작성할 수 있는 Java프로그램이다.
Thread에 의해 서블릿에 있는 service() 메소드가 호출된다.
전송방식 요청에 맞게 doGet() 또는 doPost()메소드를 호출한다.

WAS는 Response 객체를 HttpResponse형태(정적 데이터)로 바꾸어서 웹 서버에 전달하고, 생성된 Thread를 종료시킨다. 그리고 HttpServletRequest와 HttpServletResponse 객체를 제거한다.

계산기 만들기 실습
1. calc.jsp , Oper.java(서블릿) , Calc.java(클래스) 생성
2. calc.jsp 에서 input태그로 수식 통째로를 입력받고 action은 Oper 서블릿으로 설정해준다.
3. Calc.java 클래스에 사칙연산 메소드를 정의하고 모두 두 정수를 전달받은 후 int로 리턴해준다.
4. 나눗셈 메소드에서는 분모가 0일 경우를 처리하지 않고 Oper.java서블릿에서 나눗셈 메소드 사용 시 예외를 처리한다.
5. Oper.java 서블릿에서 전달받은 수식을 분석한 후 사칙연산 연산자에 맞게 Calc.java의 메소드를 호출하여 결과를 응답한다.

  • request.getParameter("태그의 name속성 값")으로 전달받은 값을 가져올 수 있다.
  • 잘못 입력했을 때와 0으로 나눌 때 모두 예외처리를 사용하여 알맞는 메세지를 출력해준다.
  • 연산자를 split()으로 분리할 때에는 split("\" + 연산자)로 사용해야 분리된다.
  1. Oper.java 서블릿에서 calc.jsp로 돌아갈 때에는 calc.jsp가 아닌 calc로 이동할 수 있도록 web.xml에서 servlet을 설정한다.

calc.jsp 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>계산기 - JSP 페이지</title>
</head>
<body>
	<h1>JSP로 만든 페이지</h1>
	<form action="Oper" method="post">
		<p>수식을 입력하세요(두 정수의 사칙연산)</p>
		<input type="text" name="input">
		<button>확인</button>
	</form>
</body>
</html>

Calc.java 클래스 생성

package com.online.servlet;

public class Calc {
	int num1;
	int num2;
	
	public Calc() {;}
	
	public Calc(int num1, int num2) {
		super();
		this.num1 = num1;
		this.num2 = num2;
	}

	//덧셈
	public int add() {return num1 + num2;}
	//뺄셈 
	public int sub() {return num1 - num2;}
	//곱셈 
	public int mul() {return num1 * num2;}
	//나눗셈
	public int div() {return num1 / num2;}

Oper.java 생성

package com.online.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class Oper
 */
@WebServlet("/Oper")
public class Oper extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Oper() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html; charset=UTF-8");
		String input = request.getParameter("input");
		String[] arTemp = null;
		String opers = "+-*/";
		Calc c = null;
		
		int temp = 0, result = 0, count = 0;
		PrintWriter out = response.getWriter();
		
		input = input.replaceAll(" ", "");
		
		for (int i = 0; i < opers.length(); i++) {
			for (int j = 0; j < input.length(); j++) {
				if(opers.charAt(i) == input.charAt(j)) {
					temp = i;
					count++;
				}
			}
		}
		
		out.print("<p>");
		if(count == 1) {
			//0 : 첫번째 정수
			//1 : 두번째 정수
			arTemp = input.split("\\" + opers.charAt(temp));
			
			try {
				c = new Calc(Integer.parseInt(arTemp[0]), Integer.parseInt(arTemp[1]));
				
				switch(temp) {
				case 0://덧셈
					result = c.add();
					break;
				case 1://뺄셈
					result = c.sub();
					break;
				case 2://곱셈
					result = c.mul();
					break;
				case 3://나눗셈
					result = c.div();
					break;
				}
				out.print("결과 : " + result);
			} catch (NumberFormatException e) {
				out.print("정수만 입력하세요");
			} catch (ArithmeticException e) {
				out.print("0으로 나눌 수 없습니다");
			}
		}else if(count == 0) {
			//연산자를 찾을 수 없습니다.
			out.print("연산자를 찾을 수 없습니다.");
		}else {
			//두 정수의 연산만 가능합니다.
			out.print("두 정수의 연산만 가능합니다.");
		}
		out.print("</p>");
		out.print("<a href='calc'>JSP 페이지로 이동</a>");
		out.close();
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

web.xml 에서 calc로 이동이 가능하도록 서블릿 설정

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>day06</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
  	<servlet-name>calc</servlet-name>
  	<jsp-file>/calc.jsp</jsp-file>
  </servlet>
  <servlet-mapping>
  	<servlet-name>calc</servlet-name>
  	<url-pattern>/calc</url-pattern>
  </servlet-mapping>
</web-app>

디렉티브 태그

<%@ page%>
현재 페이지에 대한 정보를 설정하는 태그이다.
되도록 페이지 최상단에 선언한다.

  1. language(java)
    : 현재 JSP 페이지가 사용할 프로그래밍 언어
  1. contentType(text/html)
    : 현재 JSP 페이지가 생성할 문서의 콘텐츠 유형
  1. pageEncoding(ISO-8859-1)
    : 현재 JSP 페이지의 문자 인코딩 설정
  1. import
    : 현재 JSP 페이지에서 사용할 자바 패키지 및 클래스 설정
  1. session(true)
    : 현재 JSP 페이지에서 세션 사용 여부 설정
  1. info
    : 현재 JSP 페이지에 대한 설명을 설정
  1. errorPage
    : 현재 JSP 페이지에 오류가 발생했을 때 보여줄 오류 페이지 설정
  1. isErrorPage(false)
    : 현재 JSP 페이지가 오류 페이지인지 여부 설정

스크립트 태그

HTML 코드에 자바 코드를 넣어서 프로그램이 수행하는 기능을 구현할 수 있다.

  1. 선언문(declaration) <%! %>
    : 자바 변수나 메소드를 정의하는 데 사용
  1. 스크립틀릿(scriptlet) <% %>
    : 자바 변수 및 자바 로직 코드를 작성하는데 사용
  1. 표현문(expression) <%= =%>
    : 변수, 계산식, 리턴이 있는 메소드 호출 결과를 문자열 형태로 출력한다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Scripting Tag2</title>
</head>
<body>
	<%!
		int count = 3;
		String makeItBeLower(String data){
			return data.toLowerCase();
		}
	%>
	<%
		for(int i=0; i<count; i++){
			out.println("Java Server Pages" + (i + 1) + ".<br>");
		}
	%>
	<%=makeItBeLower("Hello World")%>
</body>
</html>

include 디렉티브 태그

<% include file=""%>
현재 JSP 페이지의 특정 영역에 외부 파일의 내용을 포함하는 태그이다.
보통 header와 footer는 대부분의 페이지에서 동일한 내용으로 작성되기 때문에 유지보수 및 편의를 위하여 외부 파일로 만든 후 include해서 사용한다. 이러한 것을 모듈화라고 한다. (모듈 : 부품)

액션 태그

서버나 클라이언트에게 어떤 행동을 하도록 명령하는 태그이다.
페이지와 페이지 사이를 제어하거나 다른 페이지의 실행 결과 내용을 현재 페이지에 포함시킬 때 사용한다. 또한 자바빈즈와 같은 다양한 기능을 제공하며, 액션 태그는 XML형식의 <jsp: />를 사용한다.
(자바빈즈 : 자바에서 개발해놓은 객체들 불러다 사용할 때 쓰는 태그)

  1. forward(<jsp:forward />)
    : 다른 페이지로의 이동, 페이지 흐름을 제어한다.
  1. include(<jsp:include page=""/>)
    : 외부 페이지의 내용을 포함하거나 페이지 모듈화.
  1. param(<jsp:param />
    : 현재 페이지에서 다른 페이지에 정보를 전달한다.

아래 form 태그는 안에서 사용자가 선택 혹은 입력한 값을 해당 jsp 또는 해당 경로에 있는 파일로 전송해주는 역할을 한다.

controller.jsp 는 현재 경로
select 박스를 사용해서 site(key값)라는 파라미터의 이름으로
(name은 키값을 담는다)
네이버, 다음, 구글과 같은 값이 한 쌍으로 날아간다.
그럼 네이버, 다음, 구글이 value값이 되는 것.
이 중에 하나만 선택가능하니 site를 찾아왔을 땐 3개 중 하나의 값만 가져올 수 있겠다.

input 타입을 button이 아닌 submit을 쓰는 이유는 뭘까?
버튼은 form태그를 전송시킬 수 없다. 자바스크립트 함수 onclick을 이용해 이벤트를 발생시켜야 한다. 그래서 submit을 사용.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>액션 태그 forward 테스트</title>
</head>
<body>
	<form action="controller.jsp">
		보고싶은 페이지 선택 : 
		<select name="site">
			<option value="naver">네이버</option>
			<option value="daum">다음</option>
			<option value="google">구글</option>
		</select>
		<input type="submit" value="전송">
	</form>
</body>
</html>

controller.jsp로 가보자.
request라는 내장객체. 사용자가 요청한 것에 대한 정보를 받고 있는 객체.
String site = request.getParameter("site");
거기에 getParameter라는 메소드를 써서 site(키 값)를 전달하면 통째로가 바로 해당 키에 저장된 밸류 값이된다. 따라서 구글 다음 네이버 중 하나의 값이 사이트에 담길 것이고, switch문을 통해 알맞는 경로로 들어가게 한 뒤 forward로 이동을 시키게 하는 것이다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
	<%
		String site = request.getParameter("site");
		String url = null;
	
		switch(site){
		case "naver":
			url = "forward_naver.jsp";
			break;
		case "daum":
			url = "forward_daum.jsp";
			break;
		case "google":
			url = "forward_google.jsp";
			break;
		}
	%>
	<jsp:forward page="<%=url%>"/>
</body>
</html>

이렇게 해서 forward 테스트 완료

param은 forward 태그 안에 사용하는데, request객체에 적당한 파라미터를 담아주고 보낸다.
login.jsp 생성. id와 pw키 아래에 각각의 value값을 가지고 있다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
</head>
<body>
	<jsp:forward page="loginP.jsp">
		<jsp:param value="hds1234" name="id"/>
		<jsp:param value="1234" name="pw"/>
	</jsp:forward>
</body>
</html>

loginP.jsp로 이동 request.getParameter를 통해 value값을 비교

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 결과</title>
</head>
<body>
	<%if(request.getParameter("id").equals("hds1234")){
		if(request.getParameter("pw").equals("1234")){%>
		<h3>로그인 성공!</h3>		
		<%}else{%>
			<h1>비밀번호 오류</h1>
		<%}%>
	<%}else{%>
		<h1>잘못된 아이디</h1>
	<%}%>
</body>
</html>
profile
최동민
코드를 두드리면 문이 열린다
다음 포스트

JSP(JDBC활용,자바빈즈)

0개의 댓글