백엔드 (Servlet & JSP)

Wonkyun Jung·2023년 3월 21일
jspservlet백엔드
2

백엔드

목록 보기
2/4
post-thumbnail

JSP(Java Server Page)


JSP 핵심내용

  • WEB + JDBC
  • JSP
  • Scripting Element
  • directive
  • JSP 기본객체

JSP?

자바 서버 페이지, JSP는 HTML내에 자바 코드를 삽입하여 웹 서버에서 동적으로 웹 페이지를 생성하여 웹 브라우저에 돌려주는 언어이다

-> Servlet은 자바에 HTML 태그를 삽입하는 방식이라면 JSP 는 HTML에 자바 코드를 넣는 방법이다.


JSP 동작 흐름


JSP Scriptlet

JSP 스크립팅 요소 - 선언

  1. 선언(Declaration)
    • 멤버변수 선언이나 메소드를 선언하는 영역

형식 <%! 멤버변수와 method작성 %>

<%!
String name;

public void init(){
	name = "홍길동";
}
%>

JSP 스크립팅 요소 - 스크립트릿

  1. 스크립트릿(Scriptlet)
    • Client 요청 시 매번 호출 영역으로, Servlet으로 변환 시 service() method에 해당되는 영역. request, response에 관련된코드 구현

형식 <% java code %>


JSP 스크립팅 요소 - 표현식

  1. 표현식(Expression)
    • 데이터를 브라우저에 출력할 때 사용

형식 <%= 문자열 %>


JSP 스크립팅 요소 - 주석

  1. 주석(Comment)
    • 코드 상에서 부가 설명을 작성

형식 <%-- 주석 할 code --%>



JSP Directive

JSP 지시자 (Directive)

  1. page Directive
  • 컨테이너에게 현재 JSP 페이지를 어떻게 처리할 것인가에 대한 정보를 제공한다

<%@ page attr1 = "val1" attr2 = "val2" ...%>

  1. include Directive
  • 특정 jsp file을 페이지에 포함

여러 jsp페이지에서 반복적으로 사용되는 부분을 jsp file로 만든 후 반복 영역에 include 시켜 반복되는 코드를 줄일 수 있다

<%@ include file = "/template/header.jsp" %>

  1. taglib Directive
  • JSTL 또는 사용자에 의해서 만든 커스텀 태그를 이용할 때 사용되며 JSP 페이지 내에 불필요한 자바 코드를 줄일 수 있다

<%@ taglib prefix = "c" url="http://java.sun.com/jsp/jstl/core"%>

JSP 지시자 (Directive) - page



import 예시

  • directive1.jsp
<%@page import="java.util.Random"%>
<%@page import="java.util.Calendar"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page info = "JSP directive import 연습중 ... " %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%= getServletInfo() %><br>
<%
	Calendar cal=Calendar.getInstance();
	int year=cal.get(Calendar.YEAR);
	int month=cal.get(Calendar.MONTH)+1;
	int day=cal.get(Calendar.DAY_OF_MONTH);
	Random rd=new Random();
	int per=rd.nextInt(101); 
%>
오늘 날짜: <%=year%>년  <%=month%>월  <%=day%>일<br>
오늘 운세: <%=per%>퍼센트
</body>
</html>

isErrorPage 예시

  • directive2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" errorPage="error.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
	//b가 0이고 나눌때 에러 발생 but 페이지 서버 오류  
    //얘를 처리할  error.jsp로 이동하자
    int a=5;
	int b=0; 
%>
<h3>
** a와 b의 사칙연산 **<br><br>
a + b = <%=a+b%><br>
a - b = <%=a-b%><br>
a * b = <%=a*b%><br>
a / b = <%=a/b%><br>
</h3>
</body>
</html>

  • error.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isErrorPage="true"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
다음과 같은 에러가 발생했습니다<br>
<%= exception.getMessage() %>
</body>
</html>
  • error. jsp로 연결 안 시킬 경우 500 에러가 발생하는데 error.jsp로 연결해서 예외처리 가능

include 예시

  • directive3.jsp 
<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	.div1{ position: absolute; top:30px;   left:200px; }
	.div2{ position: absolute; top:400px;  left:300px; }
</style>
</head>
<body>

<!-- include 지시자 중요하다 -->
<%@ include file="top.jsp" %>
<div class="div1"><h3>저의 홈페이지에 온것을 환영합니다  ^.^</h3></div>
<%@ include file="bottom.jsp" %>

  • top.jsp
<%@ page language="java" contentType="text/html; 
charset=UTF-8" pageEncoding="UTF-8"%>

<img src="ugc.jpg" width="150px" height="150px">
  • bottom.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" 
pageEncoding="UTF-8"%>

<div class="div2">
	<p>Copyright JSP.co.kr 2022</p>
</div>
</body>
</html>

JSP 기본객체

JSP 기본객체 - 1


JSP 기본객체 - 2


JSP 기본객체 - 3


JSP 기본객체의 영역(scope) - 공통 method

  • servlet과 jsp페이지 간의 특정 정보를 주고 받거나 공유하기 위한 메소드를 지원


WEB Page 이동


JSP 실습 코드

  • test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="/lab/example/testProc.jsp" method="post">
	1. 당신의 취미는?<br>
	<input type="checkbox" name="hobby" value="테니스">tennis &nbsp;
	<input type="checkbox" name="hobby" value="수영">swim&nbsp;
	<input type="checkbox" name="hobby" value="골프">golf &nbsp;
	<input type="checkbox" name="hobby" value="기타">etc <br><br>
	
	2.가고싶은 섬<br>
	<input type="radio" name="island" value="울릉도">울릉도&nbsp;
	<input type="radio" name="island" value="제주도">제주도&nbsp;
	<input type="radio" name="island" value="백령도">백령도&nbsp;
	<input type="radio" name="island" value="독도">독도<br><br>
	
	3.좋아하는 과일<br>
	<input type="radio" name="fruit" value="사과">사과&nbsp;
	<input type="radio" name="fruit" value="딸기">딸기&nbsp;
	<input type="radio" name="fruit" value="수박">수박&nbsp;
	<input type="radio" name="fruit" value="오렌지">오렌지<br><br>
	
	4.사용가능한 OA는?<br>
	<select name="oa" size="3" multiple>
		<option value="excel">excel</option>
		<option value="access">access</option>
		<option value="word">word</option>
		<option value="powerpoint">powerpoint</option>
	</select><br><br>
	
	
	<input type="submit" value="전송">&nbsp;&nbsp;&nbsp;
	<input type="reset" value="취소">
</form>	
</body>
</html>


  • testProc.jsp
<%@page import="java.util.Enumeration"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
	request.setCharacterEncoding("UTF-8");
	String[] ho=request.getParameterValues("hobby");
	if(ho != null){
%>
		<h3>** 당신의 취미 **</h3>		
<%		
		for(int i=0; i<ho.length; i++){
%>
			<li><%=ho[i]%></li>
<%			
		}
	}
%>

		<h3>** 당신이 좋아하는 것 **</h3>	
<%	
	Enumeration e=request.getParameterNames();
	while(e.hasMoreElements()){
		String title=(String)e.nextElement();
		String[] value=request.getParameterValues(title);
		
		if(title.equals("hobby")) {
			continue;
		}
		
		for(int i=0; i<value.length; i++){
%>
			<li><%=title%>: <%=value[i]%></li>
<%			
		}
	}
%>
</body>
</html>
profile
Wonkyun Jung
이전 포스트

백엔드 (Servlet)

다음 포스트

백엔드 (MVC Pattern)

0개의 댓글