JSP 기본 실습 예제
jsp 개발환경을 세팅했지만 html만 사용하다가 처음 jsp를
접하면 평소 할 수 있었던 간단한 코딩도 생각보다 힘든 법입니다.
jsp에서의 간단한 예제를 통해 jsp에 익숙해져 봅시다.
<%
out.print("<html>"); //이 코드로 html 사이에 필요한 html 내용을 집어넣을 수 있습니다.
...
// 자바에서 가능한 for문 if문 등 마음대로
...
out.print("</html>");
%>
또는 이런식으로도 가능합니다
<html>
<body>
<%
if(address.equals("home"){
%>
<a href="home">홈으로</a>
<%
} else{
%>
<a href="out">바깥으로</a>
<%
}
%>
별그리기입니다. for문을 이용해 그림과 같이 별 이미지가 출력되도록 jsp를 작성해봅니다.
html에서는 ' '이 의미가 없기때문에   및 <br>태그를 사용하면 됩니다.
구구단 table도 만들 수 있습니다.
PageDirective
trimDirectiveWhiteSpaces
<%@page import="java.util.Date"%>
<%@page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" trimDirectiveWhitespaces="false"
%>
<!-- trimDirectiveWhiespaces 소스보기에서.. element보기 말고 -->
<!-- contentType text/html말고 text/plain바꿔보기..
application/json 등도 나중에 사용 -->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%=new Date() %>
</body>
</html>
화면에서 f12를 눌러서 Sources보기를 클릭하면 다음과 같이나온다.
이 중 첫번째 노란색부근과 그 아래 공백이 있는 것을 확인할수 있는데 이는
<%@page import="java.util.Date"%>
<%@page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" trimDirectiveWhitespaces="false"
%> 부분이 공백으로 나온것이다.
(trimDirectiveWhitespaces 속성을 지정해주지않아도 기본적으로 'false'이다)
이제 이 trimDirectiveWhitespaces 값을 true로 바꿔주고 url에 요청해보자.
<page>디렉티브의 공백부분이 Sources보기에서 사라진걸 확인할 수 있다.
contentType
이번에는 page디렉티브의 contentType의 'text/html' 부분을 'text/plain'부분으로 변경해보자.
html태그요소들도 전부 하나의 text로 인식해서 처리하는 걸 볼 수 있다.
이렇게 html뿐만아니라 text, xml,json 등도 처리할 수 있다.
이 html, text, xml, json 등의 형태의 파일 형태를 MIME이라 합니다.
참고 : https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types
MIME 타입 - HTTP | MDN
MIME 타입이란 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘입니다: 웹에서 파일의 확장자는 별 의미가 없습니다. 그러므로, 각 문서와 함께 올바른 MIME 타입을 전송하도
developer.mozilla.org
Encoding과 pageEncoding, request.setCharacterEncoding 관계
encoding실습 전
https://brilliantdevelop.tistory.com/35 참고 (UTF-8 인코딩)
contentType의 charset, pageEncoding 및 request.setCharacterEncoding에 대해 알아보자.
참고로 get방식의 파라미터 인코딩은 톰캣이 기본으로 해주기 때문에
각각의 encoding방식이 어떻게 영향을 끼치는지에 알아보기위해서 form 메소드는 'post'로 설정한다.
06form.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>
</head>
<body>
<form action="06result.jsp" method="post"> <!-- get방식 파라미터 인코딩은 톰캣이 기본으로 해줍니다 -->
한글<input type="text" value="" name="한글"> <br>
eng<input type="text" value="" name="eng"> <br>
<input type="submit" > <!-- value가 없으면 기본적으로 제출 -->
</form>
</body>
</html>
06result.jsp
<%@page import="java.util.Enumeration"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
파라미터 한글: <%=request.getParameter("한글") %> <br><br>
parameter English : <%=request.getParameter("eng") %> <br><br>
</body>
</html>
06form.jsp 요청 후 한글과 eng를 파라미터로 넘겨보자.
응?? reqeust.getParameter("한글")이 null 나온 걸 알 수 있다.
이번엔 06result.jsp의 아무곳에나
<%request.setCharacterEncoding("utf-8"); %>을 작성하고 요청해보자.
<%@page import="java.util.Enumeration"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<%request.setCharacterEncoding("utf-8"); %>
<title></title>
</head>
<body>
파라미터 한글: <%=request.getParameter("한글") %> <br><br>
parameter English : <%=request.getParameter("eng") %> <br><br>
</body>
</html>
아까 null이 나왔던 한글이 제대로 나오는걸 확인할 수 있다.
이는 파라미터 이름 '한글'은 한글인데 06form.jsp에서 encoding돼서 전달된다.
06result.jsp에서는 이 '한글'파라미터를 request.getParameter("한글")로 찾을려한다.
하지만 실제 파라미터이름은 '인코딩된 한글' 이기때문에
request.getParameter("한글")은 해당 파라미터를 찾을 수 없어 null이 된다.
이 때
<%request.setCharacterEncoding("utf-8"); %>을 사용한다면 '인코딩된 한글'을 utf-8로 디코딩해서 '한글'로 인식해서
request.getParameter("한글")을 제대로 찾는다.
(이름은 encoding이지만 실제 하는 일은 decoding)
이번엔 06result.jsp의 charset을 utf-8에서 ISO-8859-1로 바꿔보자.
(한글을 지원해주지않는 인코딩 방식 중 하나)
한글부분이 전부 ???? 로 나온다.
이는 서버가 브라우저로 응답할 때 응답데이터를 ISO-8859-1로 인코딩해서 전달하다보니
한글을 제대로 인코딩하지못해 ???가 나오게 됩니다.
그러면 이번엔 06result.jsp의 pageEncoding을 ISO-8859-1로 바꿔보자.
바꾸고나서 저장을 하면 다음과 같이 에러창이 나오는데
이는 jsp소스코드에 ISO-8859-1로 인코딩 할 수 없는 문자가 있어 저장할 수 없다는 뜻이다.
결론 :
pageEncoding : jsp 소스파일 인코딩 방법
contentType의 charset: 서버가 브라우저로 응답데이터 보낼 때 인코딩 방식
request.setCharacterEncoding : 파라미터로 넘어온 값 디코딩
(encoding이지만 하는역할 decoding)
나중에는 jsp에서 직접 인코딩 설정을 하지 않고
Filter를 통해 인코딩 하는 방법을 사용한다.
여기서는 그냥 HTTP 통신과정에는 인코딩이 필요하다는 정도만 알아두자.
request
파라미터 없으면 null
04request.jsp
다음과 같이 jsp를 작성해보고
url에 http://localhost:8080/study/01basic/04request.jsp?name=changhee를 입력해봅시다.
?뒤에 쿼리문이 없으면 if(param.equals("changhee")부분에서
param이 null이라 nullPointerException이 발생합니다.
<%@ 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>
<%
String param= request.getParameter("name");
if(param.equals("changhee"))
{
%>
<h1>changhee</h1>
<%
}else {
%>
<h1>taeyeon</h1>
<%
}
%>
</body>
</html>
파라미터는 기본적으로 String
08input.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="08sum.jsp" method="post">
숫자 1 <input type="text" name="num1" value=""> <br>
숫자 2 <input type="text" name="num2" value=""> <br>
<button type="submit">계산</button>
</form>
</body>
</html>
08sum.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%request.setCharacterEncoding("utf-8"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
숫자1 : <%= request.getParameter("num1") %>
숫자2 : <%= request.getParameter("num2") %>
<%
try{
int pNum1 = Integer.parseInt(request.getParameter("num1"));
int pNum2 = Integer.parseInt(request.getParameter("num2"));
int sum=pNum1+pNum2;
out.print("<br> 합: " +sum );
}catch(Exception e){
out.print("숫자만 입력하세요");
e.printStackTrace();
}
%>
</body>
</html>기본적으로 jsp에서는 <input> 태그로 입력한 값은 String으로 받기 때문에
9를 입력해도 문자열 '9'로 인식되기 때문에 int형으로 바꿔줘야 사칙연산이 가능하다.
숫자만 제대로 입력했을 때 결과화면
숫자가 아닌 값을 입력했을 때 결과 화면
이름이 같은 파라미터가 여러개인 경우 String[]
03sameName.jsp+ 03sameNameResult.jsp
지금까지는 파라미터 이름이 다 다른 경우에 대해서만 했었지만
checkbox처럼 파라미터 이름이 같은 경우가 있다.
이 때는 request.getParameterValues("파라미터이름") 을 사용한다.
return type은 String[]
03sameName.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>
</head>
<body>
<!-- same name 이때 쯤 하는건 한번에 다 하면 까먹을까봐.
-->
<form action="03sameNameResult.jsp" >
이름<input type="text" value="" name="name"><br>
나이<input type="text" value="" name="age"> <br>
취미 <br>
볼링<input type="checkbox" name="hobby" value="볼링">
게임<input type="checkbox" name="hobby" value="게임">
복수<input type="checkbox" name="hobby" value="복수">
피아노<input type="checkbox" name="hobby" value="피아노">
주소<input type="text" value="" name="address"> <br>
<button type="submit">자기소개</button>
</form>
</body>
</html>
03sameNameResult.jsp
<%@page import="java.util.Iterator"%>
<%@page import="java.util.Map"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%request.setCharacterEncoding("utf-8"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
이름 : <%=request.getParameter("name") %> <br>
나이 :<%=request.getParameter("age") %> <br>
취미 :
<%
String[] hobbies=request.getParameterValues("hobby");
for(String hobby: hobbies){
out.print(hobby + ",");
}
%>
<br>
주소 :<%=request.getParameter("address") %>
<hr>
</body>
</html>
request에 모든 파라미터를 한번에 보는 방법
04sameName.jsp + 04sameNameResult.jsp
03예시에서는 parameter 'name','age'는 값이 한개라서 request.getParameter로 했지만
hobby처럼 사실 request.getParameterValues("name") 으로 받을 수 있다.
이 때 return 값은 String[]인데 길이가 1이고 값이 String[0]은 '한창희'이다.
이를 참고하고, 03예시랑 비슷하지만 request가 제공해주는 Enumeration과 Map을 이용해
특정 파라미터 이름뿐만아니라 모든 파라미터들을 반복문으로 처리해봅시다.
04sameName.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>
</head>
<body>
<form action="04sameNameResult.jsp" >
이름<input type="text" value="" name="name"><br>
나이<input type="text" value="" name="age"> <br>
취미 <br>
볼링<input type="checkbox" name="hobby" value="볼링">
게임<input type="checkbox" name="hobby" value="게임">
복수<input type="checkbox" name="hobby" value="복수">
피아노<input type="checkbox" name="hobby" value="피아노">
주소<input type="text" value="" name="address"> <br>
<button type="submit">자기소개</button>
</form>
</body>
</html>
04sameNameResult.jsp
<%@page import="java.util.Iterator"%>
<%@page import="java.util.Enumeration"%>
<%@page import="java.util.Map"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%request.setCharacterEncoding("utf-8"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
파라미터 1개여도 배열로 받을 수있어요 <br>
<%
String[] name= request.getParameterValues("name");
//name이라는 파라미터가 1개면 길이 1인 배열이 리턴된다.
%>
이름 : <%=name[0] %>
<hr>
<h1>Enumeration으로 모든 파라미터 처리</h1>
<%
Enumeration<String> paramEnum= request.getParameterNames();
while(paramEnum.hasMoreElements()){
String paramName= paramEnum.nextElement();
String[] paramValues= request.getParameterValues(paramName);
for(String paramVal : paramValues){
out.print(paramName + " : " + paramVal+"<br>");
}
}
%>
<h1>Map으로 모든 파라미터 처리 iterator</h1>
<%
Map<String,String[]> paramMap=request.getParameterMap();
Iterator<String> iterator= paramMap.keySet().iterator();
while(iterator.hasNext()){
String paramName= iterator.next();
String[] paramValues= request.getParameterValues(paramName);
for(String paramVal : paramValues){
out.print(paramName + " : " + paramVal+"<br>");
}
}
%>
<h1>Map으로 모든 파라미터 처리 entrySet</h1>
<%
for(Map.Entry<String,String[]> entry : paramMap.entrySet()){
for(String paramVal : entry.getValue()){
out.print(entry.getKey() + " : " + paramVal+"<br>");
}
}
%>
</body>
</html>
request 정보
07form.jsp+ 07result.jsp
form태그에서 넘어온 페이지의
클라이언트정보,파라미터정보, 헤더정보를 받아보자.
07form.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h3>아래 항목에 답변해 주세요</h3>
<form action="07result.jsp" method="post">
이 반에서 가장 착한 사람 : <input type="text" name="kind" value=""> <br>
이 반에서 나쁜 사람 : <input type="text" name="bad" value=""> <br>
<button type="submit">제출</button>
</form>
</body>
</html>
07result.jsp
<%@page import="java.util.Enumeration"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("utf-8");%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1> 클라이언트정보, 파라미터 정보, 헤더정보 </h1> <br><br><br>
<h3>클라이언트정보 </h3>
IP : <%=request.getRemoteAddr() %><br>
웹 경로 : <%=request.getContextPath() %><br>
URL : <%=request.getRequestURL() %><br>
URI : <%=request.getRequestURI() %> <br>
<hr>
<h3> 파라미터 </h3>
kind : <%=request.getParameter("kind") %> <br>
bad : <%=request.getParameter("bad") %> <br>
<hr>
<h3> 모든 파라미터 보기</h3>
파라미터가 너무 많으면 일일이 다 쓰기보단 반복문을 이용해서...<br>
<%
Enumeration<String> paramEnum=request.getParameterNames();
while(paramEnum.hasMoreElements()){
String paramName=paramEnum.nextElement();
String paramValue=request.getParameter(paramName);
out.print(paramName+" : "+ paramValue+ "<br>");
}
%>
<hr>
<h3>모든 헤더보기 </h3>
<%
Enumeration<String> headerEnum=request.getHeaderNames();
while(headerEnum.hasMoreElements()){
String headerName=headerEnum.nextElement();
String headerValue=request.getHeader(headerName);
out.print(headerName+" : "+ headerValue+ "<br>");
}
%>
</body>
</html>
07form.jsp
07result.jsp
request 기본 객체에 기본적으로 IP,ContextPath,URL, 파라미터 등에 대한
정보가 담겨와 위의 소스처럼 정보를 얻을 수 있다.
enum을 사용해서 기본적으로 모든파라미터 및 모든 헤더 정보를 얻을 수 있다.
response의 redirect
09redirect.jsp+09redirectPage.jsp
response기본객체의 redirect이다
- 브라우저가 09redirect.jsp를 요청한다
- 서버가 이 요청에 대해 응답을 하는데 이 응답에 '야 너 09redirectPage.jsp'로 다시 요청해.
- 브라우저는 09redirectPage.jsp로 재 요청을하고
- 서버는 09redirectPage.jsp의 화면을 응답에 보냅니다.
결과적으로 브라우저 url창에 09redirect.jsp입력해 요청했지만 보여지는 화면은
09redirectPage.jsp이고 브라우저 url 창에 09redirectPage.jsp가 입력된걸 확인해주세요.
09redirect.jsp
<%@page import="java.net.URLEncoder"%>
<%@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">
</head>
<body>
<%
String name = "한창희";
String encodedName = URLEncoder.encode(name, "UTF-8");
response.sendRedirect(request.getContextPath()+"/01basic/09redirectPage.jsp?name=" + encodedName);
%>
</body>
</html>
09redirectPage.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<%=request.getParameter("name") %>
</body>
</html>
결과화면
url 입력 후 엔터를 누르면
브라우저는 09redirectPage.jsp로 재요청하고 09redirectPage.jsp의 화면이 보인다.
