JSP - Redirect, Forward, Session

Dev/JSP & Servlet

JSP - Redirect, Forward, Session

창문닦이 2019. 2. 15. 23:26

GET / POST 방식 리뷰

프로그래머들이 원하는 변수를 지정해서 전송할 때 주소를 통해 변수값이 보이는 get방식 사용.
사용자에게 입력값을 받는데 보여주면 안되는 데이터면 post방식을 사용.
대부분의 검색엔진, 신문사를 조회하면 post 방식임을 볼 수 있다.
게시글을 조회할 땐 get방식, DB의 데이터가 갱신되는 경우는 post 방식을 사용한다.

1. JSP 활용한 달력 만들기 (get방식)

JSP를 활용하여 현재 페이지에 연도, 월 변경 가능하게 구현하고자 한다. 클라이언트에 의해 넘어온 데이터는 처음 시작시 입력값이 없으므로 null이다. 버튼 '<' -1 ,'>' +1 누르면 다른 페이지를 호출하는 게 아니라 자기자신의 페이지에서 보여줘야한다는 것을 이용하여 구현해보자.

get방식 사용

‘▶’ : calendar.jsp?year=nextYear&month=nextMonth

‘◀’ : calendar.jsp?year=preYear&month=preMonth

① JSP

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

<%@ page contentType="text/html; charset=UTF-8"%>

request.setCharacterEncoding("UTF-8");

Calendar cal = Calendar.getInstance();

//오늘 날짜 구하기

int nowYear = cal.get(Calendar.YEAR); //2019

int nowMonth = cal.get(Calendar.MONTH)+1; //2

int nowDay = cal.get(Calendar.DAY_OF_MONTH); //15

//클라이언트에 의해 넘어온 데이터(첫 시작시 null)

String strYear = request.getParameter("year"); //null -> 2019

String strMonth = request.getParameter("month"); //null -> 3

//버튼을 누르면 다른 페이지를 호출하는 게 아니라 자기자신의 페이지에서 보여줘야한다

//표시할 달력의 년, 월

int year = nowYear;

int month = nowMonth;

if(strYear!=null){

year = Integer.parseInt(strYear);

}

if(strMonth!=null){

month = Integer.parseInt(strMonth);

}

int preYear = year;

int preMonth = month-1;

if(preMonth<1){ //1월 이전의 경우 전년도 12월로 변경

preYear = year-1;

preMonth = 12;

}

int nextYear=year,nextMonth=month+1;

if(nextMonth>12){ //12월 이후의 경우 차년도 1월로 변경

nextYear = year+1;

nextMonth = 1;

}

//표시할 달력 셋팅

cal.set(year, month-1, 1);

int startDay = 1;

int endDay = cal.getActualMaximum(Calendar.DAY_OF_MONTH);

//year년 month월 1일의 week 구하기

int week = cal.get(Calendar.DAY_OF_WEEK);

② HTML

<body>

<tr>

<a href="calendar.jsp?year=<%=nowYear%>&month=<%=nowMonth %>">

</a>

<a href="calendar.jsp?year=<%=preYear%>&month=<%=preMonth%>">◀</a>

<a href="calendar.jsp?year=<%=nextYear%>&month=<%=nextMonth%>">▶</a>

</td>

</tr>

</table>

<tr>

</tr>

int newLine=0;

out.print("<tr height='20'>");

for(int i=1;i<week;i++){

out.print("<td bgcolor='#ffffff'></td>");

newLine++;

}

for(int i=startDay; i<=endDay; i++){

//글꼴색

String fontColor = (newLine==0) ? "red": (newLine==0)?"blue":"black";

//오늘날짜배경색

String bgColor = (nowYear==year)&&(nowMonth==month)&&(nowDay==i)? "#e6e4e6" : "#ffffff" ;

out.print("<td align='center' bgcolor='"+bgColor+"'>" +

"<font color='"+fontColor+ "'>"+i+"</font></td>");

//출력 태그<td align=center bgcolor='#e6e4e6'><font color='black'> i </font></td>

newLine++;

if(newLine==7&&i!=endDay){

out.print("</tr><tr height='20'>");

newLine=0;

}

while(newLine>0 && newLine<7){

out.print("<td bgcolor='#ffffff'> </td>");

newLine++;

}

out.print("</tr>");

</table>

</body>

2. include 예제 (test1.jsp, abc.jsp)

test1.jsp를 호출하게 되면 <%@ include file="abc.jsp" %> 해당 태그로 인하여 외부페이지를 그대로 포함하여 조회를 할 수 있다.

① test1.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

request.setCharacterEncoding("UTF-8");

<%@ include file="abc.jsp" %><br/>

<%=str %>

include를 통해 해당 파일의 웹페이지를 그대로 복사 붙여넣기하여 보여주는 개념.<br>

test1.jsp에 html 관련 태그가 없어도 상관없다.<br>

② abc.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

request.setCharacterEncoding("UTF-8");

String str = "include 테스트";

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<b>abc.jsp파일입니다</b>

<hr>

</body>

</html>

3. Redirect 개념

a.jsp : 게시판을 작성하는 웹페이지

b.jsp : 작성된 게시판을 조회할 수 있는 웹페이지. DB를 읽어서 조회할 수 있도록 띄워주는 페이지.

client : 글을 작성하는 사용자

클라이언트가 a.jsp에 접근하여 게시판 내용을 작성 후 submit 하게되면 DB에 업로드가 됨. 일반적으로 게시판에 글을 게시후에는 게시판 리스트 페이지로 넘어가게 된다. 이때, a.jsp가 아니라 b.jsp 에 접근을 하라고 response를 보내게 되는데 이것이 바로 redirect 개념이다. Response로 오는 웹페이지는 사용자에게 보여주는 것이지 웹페이지 파일 자체가 이동하는 것은 아니다. redirect의 경우 일반적으로 insert 일 때 많이 사용한다.

4. Forward 개념

a.jsp : 데이터를 입력받아서 보여주는 웹페이지

b.jsp : 결과를 변환시키는 웹페이지

client : 입력하는 사용자

a.jsp에 접근해서 사용자가 입력 후 submit을 한다면, a.jsp -> b.jsp 에 request한 뒤 response를 받아 클라이언트에게 직접 전달한다. a.jsp의 내용은 b.jsp 로 변환시켜서 보여주지만, 해당되는 주소는 a.jsp 그대로 이다. 사용자는 b.jsp 라는 웹페이지가 있는지 알수없으므로 보안성이 높다.

5. Redirect & Forward 예제

① test2.jsp : 사용자의 입력값을 받는 웹페이지

<%@ page contentType="text/html; charset=UTF-8"%>

request.setCharacterEncoding("UTF-8");

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>redirect와 forward</title>

</head>

<body>

이름 : <input type="text" name="name"/><br/>

<input type="submit" value="리다이렉트" onclick="this.form.action='test2_ok.jsp'"/>

<input type="submit" value="포워드" onclick="this.form.action='test2_for.jsp'"/>

</form>

</body>

</html>

② test2_ok.jsp : redirect된 페이지

Redirect 의 경우 특정 웹페이지에 접근하라고 요청함. name 이 null인 이유는 getParameter는 항상 일대일 관계이기 때문이다. 이미 test2.jsp 에서 test2_ok.jsp 를 거친 후 test2_s.jsp로 이동했기 때문이다. (이렇게 해서 request - response를 해야하는 경우라면 세션을 활용해야 한다.) msg가 전달이 되지 않는 것은 test2_ok.jsp 에서 response로 msg가 전달이 되었지만 redirect를 만나 다시 한번 처음부터 끝까지 자신(test2_s.jsp)을 실행하게 되면서 null이 전달된다.

<%@ page contentType="text/html; charset=UTF-8"%>

request.setCharacterEncoding("UTF-8");

String name = request.getParameter("name");

request.setAttribute("msg", "방가방가");

response.sendRedirect("test2_s.jsp");

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

</head>

<body>

이름: <%=name %>

</body>

</html>

③ test2_for.jsp : forward된 페이지

포워드 명령어 <jsp:forward page="이동할웹페이지파일"></jsp:forward>

해당 웹페이지를 호출한 화면이 보이지만 주소는 test2_for.jsp로 변동되지 않는다.

<%@ page contentType="text/html; charset=UTF-8"%>

request.setCharacterEncoding("UTF-8");

String name = request.getParameter("name");

request.setAttribute("msg", "방가방가");

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

</head>

<body>

이름: <%=name %>

<jsp:forward page="test2_s.jsp"></jsp:forward>

</body>

</html>

④ test2_s.jsp : 출력 페이지

<%@ page contentType="text/html; charset=UTF-8"%>

request.setCharacterEncoding("UTF-8");

String name = request.getParameter("name");

String msg = (String)request.getAttribute("msg");

//request는 java에서 관리함. 받을때 getAttribute메소드를 사용해야하며

//가장 큰 객체인 object 로 전달하므로 downcast 작업을 해줘야 한다

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<h2>리다이렉트 또는 포워딩한 페이지</h2>

name : <%=name %> | msg : <%=msg %>

</body>

</html>

Redirect & Forward 출력 페이지

사용자의 입력값을 받는 페이지 test2.jsp

redirect한 페이지, 2번 거쳐 왔기 때문에 일대일 관계가 아니므로 null 이 조회된다.

forward한 페이지, 데이터가 잘 전달되고 test2_s.jsp 또한 실행되었으나 주소가 변하지 않음

6. Session

SESSION :페이지를 읽을때마다 세션에 있는 값을 가져와서 보여줌. 내가 로그인을 한 후 내 정보가 나온 상태에서 블로그 , 뉴스, 카페, 드라이브 서비스와 같은 어느 페이지로 넘어가도 해당 정보(로그인된 정보)가 들어있음. 그렇기 때문에 많은 용량을 담지는 않는다. 세션은 객체가 어떤타입인지 알 수 없으므로 object로 받음.
a.jsp	b.jsp	c.jsp	d.jsp

Session 예제

① login.jsp

로그인 페이지. 로그인을 성공해야만 scehdule.jsp에 접근 가능하도록 할 것.

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

<%@ page contentType="text/html; charset=UTF-8"%>

request.setCharacterEncoding("UTF-8");

//세션에 올라와있는 데이터를 받음. 이 데이터는 30분간 보관

String userId = (String)session.getAttribute("userId");

Calendar cal = Calendar.getInstance();

//오늘 날짜 구하기

int nowYear = cal.get(Calendar.YEAR); //2019

int nowMonth = cal.get(Calendar.MONTH)+1; //2

int nowDay = cal.get(Calendar.DAY_OF_MONTH); //15

//클라이언트에 의해 넘어온 데이터(첫 시작시 null)

String yearSel = request.getParameter("yearSel");

String monthSel = request.getParameter("monthSel");

//표시할 달력의 년, 월

int year = nowYear;

int month = nowMonth;

if(yearSel!=null){

year = Integer.parseInt(yearSel);

}

if(monthSel!=null){

month = Integer.parseInt(monthSel);

}

//표시할 달력 셋팅

cal.set(year, month-1, 1);

int startDay = 1;

int endDay = cal.getActualMaximum(Calendar.DAY_OF_MONTH);

//year년 month월 1일의 week 구하기

int week = cal.get(Calendar.DAY_OF_WEEK);

//세션 기간 변경(5초)

//session.setMaxInactiveInterval(5);

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

function sendIt(){

var f = document.myForm;

if(!f.userId.value){

alert("아이디 입력!");

f.userId.focus();

return;

}

if(!f.userPwd.value){

alert("패스워드 입력!");

f.userPwd.focus();

return;

}

f.submit();

}

function selectdate(){

document.myForm.action = "login.jsp?year=<%=year%>&month=<%=month %>";

document.myForm.submit();

}

</script>

</head>

|게시판|

<%if(userId==null){%>

일정관리

<%}else{ %>

<%} %>

</td>

</tr>

<%if(userId==null){%>

아이디:<input type="text" name="userId" size="10"/><br/>

패스워드:<input type="password" name="userPwd" size="10"/><br/>

</form>

<% }else{ %>

아이디: <%=userId %> <br/>

<font color="blue"><b><%=userId %></b></font>님 방가방가...

<%} %>

</td>

<%if(userId==null){%>

<font color="blue"><b>로그인하면 새로운 세상이 보입니다.</b></font>

<% }else{ %>

for(int i=(year-5);i<=year+5;i++){

if(i!=year){

out.print("<option value='"+i+"'>"+i+"</option>");

}else{

out.print("<option value='"+i+"' selected='selected'>"+i+"</option>");

}

</select><b>년

for(int i=1;i<=12;i++){

if(i!=month){

out.print("<option value='"+i+"'>"+i+"</option>");

}else{

out.print("<option value='"+i+"' selected='selected'>"+i+"</option>");

}

</select>월</b>

</td>

</tr>

</table>

<tr>

</tr>

int newLine=0;

out.print("<tr height='20'>");

for(int i=1;i<week;i++){

out.print("<td bgcolor='#ffffff'></td>");

newLine++;

}

for(int i=startDay; i<=endDay; i++){

//글꼴색

String fontColor = (newLine==0) ? "red": (newLine==0)?"blue":"black";

//오늘날짜배경색

String bgColor = (nowYear==year)&&(nowMonth==month)&&(nowDay==i)?"#e6e4e6" : "#ffffff";

out.print("<td align='center' bgcolor='"+bgColor+"'>" +

"<font color='"+fontColor+ "'>"+i+"</font></td>");

newLine++;

if(newLine==7&&i!=endDay){

out.print("</tr><tr height='20'>");

newLine=0;

}

while(newLine>0 && newLine<7){

out.print("<td bgcolor='#ffffff'> </td>");

newLine++;

}

out.print("</tr>");

</table>

</form>

<%} %>

</td>

</tr>

</table>

</body>

</html>

② login_ok.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

request.setCharacterEncoding("UTF-8");

String userId = request.getParameter("userId");

String userPwd = request.getParameter("userPwd");

//원래는 DataBase와 연동하여 아이디와 비밀번호 검증 작업 필요.

if(userId.equals("suzi")&&userPwd.equals("123")){

session.setAttribute("userId", userId);//세션에 해당 데이터를 올려라

response.sendRedirect("login.jsp"); //서버가 클라이언트에게 시키는 것.

}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

</head>

<body>

아이디 또는 패스워드 오류

</body>

</html>

③ schedule.jsp : 일정관리 메뉴를 선택시 출력 페이지

<%@ page contentType="text/html; charset=UTF-8"%>

request.setCharacterEncoding("UTF-8");

String sID = session.getId(); //유일값, 동일한 번호 또 생기지 않음

int sTime = session.getMaxInactiveInterval(); //세션의 유효시간 30분. 이 시간이 지나면 자동 로그아웃

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

</head>

<body>

세션 아이디(sID) : <%=sID %><br/>

세션 유효기간(sTime) : <%=sTime %>초<br/>

</body>

</html>

④ logout.jsp

로그아웃되어 세션에 있는 데이터를 삭제하는 jsp. 별도로 보여줄 html 화면이 없으므로 jsp 내용만 기재되는 경우에 해당

<%@ page contentType="text/html; charset=UTF-8"%>

request.setCharacterEncoding("UTF-8");

session.removeAttribute("userId"); //아이디만 삭제. 들어있는 suzi라는 정보

session.invalidate(); //변수도 삭제

response.sendRedirect("login.jsp");//다시 로그인화면으로 돌아가도록 redirect.

Session을 활용한 로그인 전/후 출력 페이지

로그인 전 >

로그인 후 >

일정관리 페이지 >

저작자표시 비영리 변경금지

'Dev > JSP & Servlet' 카테고리의 다른 글

JSP - 캐릭터 인코딩, 디코딩 (0)	2019.02.19
JSP - 세션과 input태그를 통한 데이터 전송 비교 (0)	2019.02.19
JSP - scope과 attribute (0)	2019.02.18
JSP 예제, get/post방식 (2)	2019.02.14
JSP 실행구조, 페이지 요청 라이프 사이클 (0)	2019.02.14

현재글JSP - Redirect, Forward, Session

창문을 열심히 닦아요