구리

TIL_210420_JSP 기초 본문

JSP,Serlvet

TIL_210420_JSP 기초

guriguriguri 2021. 4. 20. 22:49

 

목차

- HTML 태그 <h1>~<h6>

- jsp 선언부 종류 

- jsp, html 주석처리

- jsp import 구문

- 에러 페이지 명시 

- html footer 요소 

- input type 속성값 radio, checkbox 

- jsp 내장 객체 response, request 

 

 

 

 

 

표제(Heading)

문서에서 표제를 지정하기 위한 HTML 태그

 

문법

<h1></h1>~<h6></h6>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 내부에 여러 줄 자바 코드</title>
</head>
<body>
	<h1>HTML 내부에 여러 줄 자바 코드</h1>
	<h2>HTML 내부에 여러 줄 자바 코드2</h2>
	<%
		int num1=20;
		int num2=30;
		int add = num1+num2;
		out.print(num1 + "+" + num2 + "=" + add);
	%>
</body>
</html>

 

 

JSP 선언부

 

문법

<%! %> : 변수 선언, 메서드 선언 (body 태그 사이에 있으면 가독성 떨어지기에 일반적으로 도큐먼트 바깥쪽에 선언)
<% %>  : 자바 코드 작성
<%= %> : 간단한 실행(변수값 출력 등)
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%!
		String str = "선언된 변수";
		int a = 5, b = -5;
		
		public int abs(int n) {
			if(n<0){
				n = -n;
			}
			return n;
		}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>간단한 연산 결과나 선언된 변수의 값을 바로 출력 </title>
</head>

<body>
	<h3>간단한 연산 결과나 선언된 변수의 값을 바로 출력 </h3>
	<%= str %><br />
	<%= a %>의 결과값 : <%=abs(a)%><br />
	<%= b %>의 결과값 : <%=abs(b)%><br />
	
	<hr />
	<%
	out.print(str + "<br />");
	out.print(a+"의절대값 : " + abs(a) + "<br />");
	out.print(b+"의절대값 : " + abs(b) + "<br />");
	%>
</body>
</html>

 

 

HTML, JSP 주석 처리

<!-- HTML 전용 comment -->
<%-- JSP 전용 comment --%>

JSP import 구문 

<%@ page import="java.util.Calendar, java.text.SimpleDateFormat" %>
<%@ page import="java.util.Calendar" %>
<%@ page import="java.text.SimpleDateFormat" %>

Calendar 클래스, SimpleDateFormat 클래스 사용 예시 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.Calendar, java.text.SimpleDateFormat" %>
<%
		Calendar date = Calendar.getInstance();
		SimpleDateFormat today = new SimpleDateFormat("yyyy년 MM월 dd일");	 // 월 : mm (X), MM (O)
		SimpleDateFormat now = new SimpleDateFormat("hh시 mm분 ss초");
		%>
<!DOCTYPE>
<html>
<head>
	<meta charset="UTF-8">
	<title>외부 라이브러리 사용 : 날짜  시간</title>
</head>
<body>
	<h5>외부 라이브러리 사용 : 날짜  시간</h5>
	원래 형식 : date.getTime()은 <%=date.getTime() %> 입니다.<br/>
	오늘은 <b><%= today.format(date.getTime()) %></b>이고, <br />
	지금 시간은 <b><%= now.format(date.getTime()) %></b> 입니다.
	

</body>
</html>

 

Calendar 클래스 관련 메서드

(캘린더 클래스는 출력 형식(날짜, 시간)을 만들어줘야한다)

getTime() : 날짜, 시간을 반환하는 메서드

 

SimpleDateFormat 클래스로 날짜 형식 만들 때 연월일 중 월 표기는 대문자로 작성 !

 

에러 페이지 명시

어떤 코드로 인해어떤 코드로 인해 오류 발생시 사용자에게 보여줄 오류 페이지 명시 가능 -> import 구문 처리

<%@ page errorPage="error.jsp" %>

단, 에러 페이지 담당하는 파일에도 명시해야 한다

<%@ page isErrorPage="true" %>

 

에러 페이지 관련 예시

07_divide.jsp

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>JSP 문서내에 문제(오류)가 발생할 경우 예외처리(에러 페이지 출력)</title>
</head>

<body>
	<h6>JSP 문서내에 문제(오류)가 발생할 경우 예외처리(에러 페이지 출력)</h6>
	정수를 0으로 나누면 오류 발생 / 프로그램에서는 숫자를 0으로 나눌 수 없음<br />
	<%=2/0 %>
</body>
</html>
error.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page isErrorPage="true" %>
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>예외처리 페이지 : 에러 페이지</title>
</head>
<body>
	<h3>예외처리 페이지 : 에러 페이지</h3>
	다음과 같은 에러가 발생했습니다.<br />
	<%= exception.getMessage() %><br />
	숫자를 0으로 나눌 수 없습니다 ㅠ,ㅠ

</body>
</html>

07_divide.jsp 페이지를 실행하면 오류가 발생하면서 오류 페이지를 담당하는 error.jsp 페이지가 바로 실행된다 

 

footer 요소

문서나 특정 섹션(section)의 푸터(footer)를 정의할 때 사용

보통 저자 정보, 저작권 정보, 연락처 등 footer 요소가 포함되어 있는 문서나 섹션에 대한 정보를 포함

 

footer 관련 예시 

footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<hr />
<div id="copyright">
All contents Copyright 2021 bjy Inc. all rights reserved<br />
Contact mail : qorwjddus96@naver.com Tel: +82 31 123 4315 Fax +82 31 123 4321
</div>

 

08_main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>프론트(메인) 페이지 : main.jsp</title>
</head>

<body>
	<h3>프론트 페이지</h3>
	<a href="08_sub.jsp">서브 페이지로 이동</a>
	<%@ include file="footer.jsp" %>
</body>
</html>
08_sub.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>서브 페이지 화면 : 08_sub.jsp</title>
</head>
<body>
	<h3>서브 페이지</h3>
	<a href="08_main.jsp">프론트 페이지로 이동</a>
	<%@ include file="footer.jsp" %>
</body>
</html>

여기서 사용된 태그들

<hr /> : 한줄 쫙 그어주는 태그

<div id="copyright">
<div> : 영역 설정해주는 태그 

<a> : 최초 접속 전 & 클릭하고 있을 때 & 클릭하고 난 후 색깔이 다 달라

<%@ iclude%> : jsp 다른 지시자 사용 (포함하고 있다는 뜻) 

 

 

JSP 내장 객체 중 하나인 reuqest 관련 메서드 예시 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>JSP 내장객체 : request</title>
</head>
<body>
	<h3>JSP 내장객체 : request의 접속관련 메서드</h3>
	
	context 경로 : <%=request.getContextPath() %><br />
	요청방식 : <%=request.getMethod() %><br />
	요청한 URL : <%=request.getRequestURL() %><br />
	요청한 URI : <%=request.getRequestURI() %><br />
	서버의 이름 : <%=request.getServerName() %><br />
	프로토콜 : <%= request.getProtocol() %><br />
</body>
</html>

 

input type 속성값 radio, checkbox 

radio, checkbox 둘 다 파라미터명인 name은 동일해야 하며 radio는 1개만 선택할 수 있고 checkbox는 다중선택이 가능하다

 

radio 문법

<input type="radio" name="gender" value="female" checked="checked" />여자
<input type="radio" name="gender" value="male" />남자

checkbox 문법

<input type="checkbox" name="season" value="1"  checked="checked" />봄
<input type="checkbox" name="season" value="2" />여름
<input type="checkbox" name="season" value="3" />가을
<input type="checkbox" name="season" value="4" />겨울

관련 예시 (이름, 성별, 좋아하는 계절을 입력받아 출력하는 프로그램 ) 

02_researchForm.jsp 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>설문조사 : 02_researchForm.jsp</title>
</head>
<body>
	<h3>설문조사 입력 화면</h3>
	<form action="02_research.jsp" method="get">
		<table>
			<tr>
				<td>이름 : </td>
				<td><input type="text" name="name" size="20" required="required" /></td>
			</tr>
			<tr>
				<td>성별 : </td>
				<td>
				<input type="radio" name="gender" value="female" checked="checked" />여자
				<input type="radio" name="gender" value="male" />남자
				</td>
			</tr>
			<tr>
				<td>좋아하는 계절 : </td>
				<td><input type="checkbox" name="season" value="1"  checked="checked" />봄
					<input type="checkbox" name="season" value="2" />여름
					<input type="checkbox" name="season" value="3" />가을
					<input type="checkbox" name="season" value="4" />겨울
				</td>
			</tr>
			<tr align="center">
				<td colspan="2">
					<input type="submit" value="전송" />
					<input type="reset" value="다시입력" />
				</td>
			</tr>
		</table>
	</form>
</body>
</html>
02_research.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.Arrays" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<%
		String name = request.getParameter("name");
		String gender = request.getParameter("gender");
		
		out.print("이름 : <b>" + name + "</b><br />");
		
		if(gender.equals("male")){
			out.print("성별 : <u>남자</u><br />");
		}else{
			out.print("성별 : <i>여자</i><br />");
		}
		
		String[] seasonArr = request.getParameterValues("season");
		// season의 value 값을 숫자로 했지만 정수가 아닌 문자열이다 !!!
		out.print("좋아하는 계절 : ");

		for(String s : seasonArr){
			int n = Integer.parseInt(s);
			switch(n){
				case 1 : 
					out.print("봄");
					break;
				case 2 : 
					out.print("여름");
					break;
				case 3 : 
					out.print("가을");
					break;
				case 4 : 
					out.print("겨울");
					break;
			}
		}
		out.print("입니다.");
	%>
</body>
</html>

02_researchForm.jsp 실행 결과
02_research.jsp 실행 결과 

참고로 checkbox는 다중선택이 가능하기에 url을 보면 season=2&season=3로 넘겨진 것을 볼 수 있다

따라서 파라미터값을 받을 땐 배열로 받아야 하기에  request.getParameterValues("파라미터명"); 메서드를 사용해야 한다

 

참고  - HTML 새로운 태그 

<u></u> : 밑줄 
<i></i> : 기울여진 글씨 
<b></b> :  두꺼운 글씨 

 

JSP 내장 객체 response

 

sendRedirect("원하는 페이지")

response 기본 객체에서 많이 사용되는 기능 중 하나로, JSP 페이지에서 특정한 작업을 수행 후 지정한 페이지로 이동하고 싶은 경우 사용한다

참고로 해당 메서드 선언하게 되면 메서드 위쪽 jsp 내용들은 출력되지만 바로 다른 사이트로 이동하기에 사용자에게는 보이지 않는다

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>JSP 내장 객체 : response의 화면 이동 메서드</title>
</head>

<body>
    <!-- sendRedirect() 메서드 사용시 메서드 위쪽의 jsp 내용들은 출력되지만 바로 
          다른 사이트로 이동되기에 우리한테는 보이지 않아  -->
	<h4>JSP 내장 객체 : response의 화면 이동 메서드</h4>
	<%
		response.sendRedirect("http://www.naver.com");
	%>
	<h6> 문서의 끝부분 </h6>
</body>
</html>

해당 코드를 실행하면 네이버 창이 바로 뜬다

 

 

 

 

'JSP,Serlvet' 카테고리의 다른 글

TIL_210426_JSTL ,Servlet 기초  (0) 2021.04.26
TIL_210422_JSP 표준 액션 태그  (0) 2021.04.25
TIL_210421_JSP 기초2 (label, forward, application, JSP파일 데이터 옮기는 방법, 한글 변수 안 깨지게 전달하는 방법)  (0) 2021.04.21
HTML, JSP) 다른 페이지로 이동하는 법  (0) 2021.04.20
210416_HTML,JSP 관련 예제  (0) 2021.04.18
'JSP,Serlvet' Related Articles more