190712_Day65

왜 굳이 JSP로 페이지 이동을 하는 걸까?

  • html로 이동해도 되는거 아냐?
  • JSP페이지 이동 = Servlet페이지 이동
    • 포워드 이동
    • 리다이렉트 이동
  • MVC에서 JSP페이지 이동을 사용함
    • View
      • .jsp
    • Model
      • .java
    • Controller(Servlet)
      • 요청분석
      • 데이터얻기
      • 모델호출
      • 페이지 이동

  • 포워드 이동
  • 리다이렉트 이동

  • 영역(Scope)객체 - 영역내에 데이터를 저장하고 공유
    • page < request < session < application

  • 영역에 데이터 저장(수정)하기

    • 영역객체.setAttribute(String key, Object value);
  • 영역데이터 조회하기

    • 영역객체.getAttribute(String key);
  • 영역데이터 삭제하기

    • 영역객체. removeAttribute(String key);

참고

  • 동일한 영역에 동일 key를 두 번 이상 정의하면 마지막 정의된 key로 덮어쓰기

  • 다른 영역에 같은 key를 정의하면 각각의 key가 존재

request.setAttribute(“k1”, “동에번쩍”);

session.setAttribute(“k1”, “홍길동”);

request.setAttribute(“k1”, “서에번쩍”);

out.print(request.getAttribute(“k1”));

**‘서에번쩍’ 출력**

out.print(session.getAttribute(“k1”));

**‘홍길동’ 출력

page영역

  • a.jsp

    <% pageContext.setAttribute(“mykey”,”동에번쩍”); %>

    <%= pageContext.getAttribute(“mykey”,); %>

    ‘동에번쩍’ 출력

  • b.jsp

    <%= pageContext.getAttribute(“mykey”); %>

    null 출력

request영역

  • a.jsp

    <% request.setAttribute(“mykey”,”동에번쩍”); %>

  • forward이동

b.jsp

​ <%= request.getAttribute(“mykey”); %>

​ ‘동에번쩍’ 출력

  • redirect이동

b.jsp

​ <%= request.getAttribute(“mykey”); %>

​ null 출력

**session영역

a.jsp

​ session데이터 출력

​ ‘동에번쩍’ 출력

->foward

​ b.jsp

​ session데이터 출력

​ ‘동에번쩍’

->redirect

​ c.jsp

​ session데이터 출력

​ ‘동에번쩍’


<JSP영역객체>

  • pageContext (page) : 현재페이지

  • request : 요청페이지와 응답페이지 (forward이동했을때의 호출한페이지와 호출된페이지)

  • session : 동일 브라우저

  • application : 동일 서버 (정확히는 같은 서버의 동일 Context)
    (ServletContext)

  • 구분:

    • ServletContext application
    • Web Application(웹응용프로그램, 프로젝트), 전체서블릿
    • ServletConfig config
    • 한개의 서블릿을 의미

※ JSP기본객체(내장객체)

  • JSP내에서 자료형을 선언하지 않고 사용하는 객체.

  • <% %>, <%= %> 에서 사용

  • 종류)

    1. request(javax.servlet.http.HttpServletRequest)

      • HTML폼요소의 선택값 등 사용자 입력 정보를 읽어 올 때 사용.
    2. response(java.servlet.http.HttpServletResponse)

      • 사용자 요청에 대한 응답을 처리하기 위해 사용.
    3. pageContext(javax.servlet.jsp.PageContext) - 페이지개념, 영역객체

      • 현재 JSP실행에 대한 context정보를 참조하기 위해 사용.
      • 서블릿 클래스에서는 사용하지 못함.
      • pageContext.getOut();
        pageContext.getRequest();
        pageContext.getSession();
        pageContext.getServletContext();
    4. session(javax.servlet.http.HttpSession) ★★

      • 브라우저를 통해 URL요청을 했을때 서버에서는 각브라우저를 식별할수 있는 번호를 부여!!

      • 서버측 메모리에 기억하고 있다가 브라우저가 또다른 (URL)요청을 할 때 같은 Client인지 비교.

      • 클라이언트에 대한 세션정보를 처리하기 위해 사용.

      • 비연결형 프로토콜 HTTP

        • (한 페이지가 출력된 다음에 서버와 클라이언트 연결은 끊어짐.)에 대해 마치 계속 연결되어있는 것처럼 해주는 메커니즘.
      • 쿠키는 사용자PC에 세션은 서버에 사용자와 관련된 정보를 보관.

      • 세션의 사용용도)

        • 사용자 로그인
        • 쇼핑몰에서 장바구니 기능 구현
        • 사용자가 어떤 페이지를 다녀갔는지 웹 페이지 트래킹 기능을 구현
        • 주요메소드)
          • getId()
            • 각 접속에 대한 세션 고유의 ID를 문자열형태로 리턴
          • getCreatingTime()
            • 현재 세션으로 마지막 작업한 시간을 long형 밀리세컨드 값으로 리턴
          • getMaxInactiveInterval()
            • 세션의 유지시간을 초로 반환
          • setMaxInactiveInterval(t)
            • 세션의 유효시간을 t에 설정된 초 값으로 설정
          • invalidate() ★
            • 현재 세션을 종료
            • 로그아웃에서 사용
          • setAttribute(key, value)
            • value에는 String, int, list vo 등이 들어감
            • 문자열 key으로 Object value을 설정.
          • getAttribute(key)
            • 문자열 Key로 설정된 세션 값을 Object 형태로 반환
          • removeAttribute(key)
            • 문자열 key로 설정된 Object 삭제.

        session_test.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>
            <h3>세션테스트</h3>
            <hr>
            <%
                //세션(연결)의 기본 유지 시간 1800초 (30분)
                //session.setMaxInactiveInterval(5); //5초로  세션 유지시간 변경
        
                if(session.isNew()) //브라우저를 통해 서버에 최초 URL 요청을 했다면
                {
                    out.print("<script>alert('처음접속하셨네요')</script>");
                }
                //
            %>
            1. 세션 ID (서버가 브라우저에게 부여하는 식별번호) : <%= session.getId() %> <br>
            2. 세션 유지시간 : <%= session.getMaxInactiveInterval() %> 초
        </body>
        </html>
        • 페이지마다 세션 시간 넣어주기... 귀찮고 지저분하잖아 그럼?
        • WEB-INF/web.xml 수정
          <session-config>
              <session-timeout>5</session-timeout>
          </session-config>
        • 수정하고 서버 다시 켜야한다!

<세션 장바구니>

login.jsp ----> 로그인 화면 (사용자 이름만 입력)
selProduct.jsp ----> 상품을 선택하는 화면 (추가버튼 클릭)
add.jsp ----> 선택한 상품에 대해 세션(장바구니역할)에 추가 : 장바구니에 상품추가!! checkOut.jsp ----> 선택한 상품들에 대한 상품목록 보이기

<미션>

  1. selProduct.jsp ---> 로그인폼(login.jsp)에 입력된 이름을 출력

  2. add.jsp ---> alert(선택된 과일이름 출력), ArrayList에 과일추가

  3. checkOut.jsp ---> 선택된 상품들을 브라우저에 출력, ArrayList에 저장된 과일 출력

[HINT]

  • getParameter();

  • setAttribute();

  • getAttribute();

  • ArrayList

    <%@page import="java.util.ArrayList"%>
    <%@ page language="java" contentType="text/html; charset=UTF-8"
      pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>상품목록</title>
    </head>
    <%-- selProduct.jsp --%>
    <body>
     <h3>상품목록</h3>
     <hr>
      <%  request.setCharacterEncoding("UTF-8");
          String userName = request.getParameter("username");
    
          //userName을 세션에 저장하자!!
          //왜? 로그인폼에서 (입력)전달된 값을 같은 브라우저에서 유지하기 위해!!
          if(userName != null)//로그인폼을 통해 username을 전달 받았을때
            session.setAttribute("loginName", userName);
    
    
       //checkOut.jsp ==> location.href='selProduct.jsp?action=remove'
       String action = request.getParameter("action");//"remove"
       ArrayList<String> cartList =
            (ArrayList<String>)session.getAttribute("fruitsName");

       if(action != null  && cartList != null 
               && action.equals("remove")){
           //장바구니 비우기
           cartList.clear();
       }

   %>

<%-- [<%= request.getParameter("username") %>]님이 로그인한 상태입니다.

--%>
[<%= session.getAttribute("loginName") %>]님이 로그인한 상태입니다.









장바구니 보기


   ```jsp
   <%@page import="java.util.ArrayList"%>
   <%@ page language="java" contentType="text/html; charset=UTF-8"
       pageEncoding="UTF-8"%>
   <!DOCTYPE html>
   <html>
   <head>
   <meta charset="UTF-8">
   <title>상품추가</title>
   </head>
   <%-- add.jsp --%>
   <body>
     <%
         //request폼데이터 한글 처리: request.setCharacterEncoding("문자집합");
         request.setCharacterEncoding("UTF-8");

         //폼안의 데이터 얻기:   request.getParameter("name");
         String productName = request.getParameter("product");

         //ArrayList사용이유: 여러개의 과일명을 저장하기 위해
         ArrayList<String> cartList = 
                (ArrayList<String>)session.getAttribute("fruitsName");

         if(cartList == null){//처음 장바구니를 사용한다면
           cartList = new ArrayList<>();//새로운 장바구니 생성!!
         }
           cartList.add(productName);

         //session사용이유: 동일브라우저, 다른페이지에서 함께 공유하기 위해 
         session.setAttribute("fruitsName", cartList);

         out.print("<script>alert('"+productName
                    +"(이)가 추가되었습니다!!'); history.back()</script>");
     %>
   </body>
   </html>
   <%@page import="java.util.HashMap"%>
   <%@page import="java.util.ArrayList"%>
   <%@ page language="java" contentType="text/html; charset=UTF-8"
       pageEncoding="UTF-8"%>
   <!DOCTYPE html>
   <html>
   <head>
   <meta charset="UTF-8">
   <title>장바구니 결과화면</title>
   </head>
   <%--checkOut.jsp --%>
   <body>
     <h3>선택된 상품목록</h3>
     <hr>
     <% 
       //사과:100원, 수박:200원, 딸기:300원,  바나나:400원,  복숭아:500원 
     HashMap<String,Integer> map = new HashMap<>();
       map.put("사과",100);
       map.put("수박",200);
       map.put("딸기",300);
       map.put("바나나",400);
       map.put("복숭아",500);

        ArrayList<String> cartList 
            = (ArrayList<String>)session.getAttribute("fruitsName");
                //(ArrayList<String>) Object;

        int sum=0;             
        for(int i=0; i<cartList.size(); i++){//장바구니에 담기 과일의 수만큼
            String fruitName = cartList.get(i);
            out.print(fruitName +"<br>");

            sum += map.get(fruitName);
        }
       //사과:100원, 수박:200원, 딸기:300원,  바나나:400원,  복숭아:500원 
     %>
     <hr>총합계: <%= sum %>원
     <br><br>

     <!-- 미션) 아래의 버튼을 클릭했을때 selProduct.jsp페이지로 이동해서 장바구니 비우기 -->
     <!-- <a href="selProduct.jsp">장바구니 비우기(결제)</a> -->
     <input type="button" value="장바구니 비우기(결제)"
            onclick="location.href='selProduct.jsp?action=remove'">


     <%--
         방법1)
           int sum=0;
           if(만약 사과 cartList.get(i).equals("사과"))  sum += 100;
           else if(만약 수박)                          sum += 200;
           ......

         방법2)
           String []fruitsName = {"사과","수박","딸기",.....};
           int    []price      = {100,   200,  300, .....};
                                               인덱스            0      1     2           ===> 인덱스 매핑

           if(fruitsName[0]와 같다면)  sum += price[0];
              fruitsName.get(0)                                   
           else if(fruitsName[1]와 같다면)  sum += price[1];
           ......

         방법3)
           HashMap      ----> 신발장, 사물함 클래스
           HashMap<K,V> ----> K:Key(키,변수명)     V:Value(값데이터)

           HashMap<String,Integer> map = new HashMap<>();
                   데이터저장 ----> 풋풋하게~!!
                map.put("사과",100);
                map.put("수박",200);

                   데이터조회  ----> 열쇠로~!!
                int price = map.get("사과");  ----> 100
                int price = map.get("수박");  ----> 200

      --%>

   </body>
   </html>

<세션 장바구니 미션>

login.jsp

  • 로그인화면 (사용자 이름만 입력)

selProduct.jsp

  • 상품을 선택하는 화면 ( 추가 버튼 클릭 )

add.jsp

  • 선택한 상품에 대해 세션(장바구니 역할)에 추가 : 장바구니에 상품추가

checkOut.jsp

  • 선택한 상품들에 대한 상품목록 보이기

<세션로그인>

sessionT1.jsp ---> 로그인 화면
sessionT2.jsp ---> 로그인 체크 (로그인 처리)
sessionT3.jsp ---> 서비스 화면
sessionT4.jsp ---> 로그아웃 (로그아웃 처리)

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>사용자 인증</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
.normal {  font-family: "굴림", "돋움"; font-size: x-small; font-style: normal; font-weight: normal; text-decoration: none}
.normalbold {  font-family: "굴림", "돋움"; font-size: x-small; font-style: normal; font-weight: bold; text-decoration: none}
-->
</style>
</head>
<%-- sessionT1.jsp --%>
<body bgcolor="#FFFFFF"> 
<center>
<p class="normalbold">안녕하세요. jsp 홈페이지입니다.<br>
  사이트에 접속하기 위해서 사용자 인증 절차가 필요합니다.</p>
<p class="normalbold">ID와 PassWord를 입력하세요.</p>
<form name="inputForm" action="sessionT2.jsp" method="post">
  <table width="350" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000">
    <tr> 
      <td bgcolor="#FF9999" class="normalbold" width="25%"> 
        <div align="center"><font color="#000000">아이디</font></div>
      </td>
      <td class="normal" width="75%"> 
        <input type="text" name="id">
      </td>
    </tr>
    <tr> 
      <td bgcolor="#FF9999" class="normalbold" width="25%"> 
        <div align="center"><font color="#000000">패스워드</font></div>
      </td>
      <td class="normal" width="75%"> 
        <input type="password" name="pass">
      </td>
    </tr>
  </table>
  <br>
  <p>
    <input type="submit" name="Submit" value="확인">
    <input type="reset" name="Reset" value="취소">
  </p>
  </form> 
 </center>
</body>
</html>
<%@page import="java.util.HashMap"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>사용자 인증</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">

        .normal {  font-family: "굴림", "돋움"; font-size: x-small; font-style: normal; font-weight: normal; text-decoration: none}
        .normalbold {  font-family: "굴림", "돋움"; font-size: x-small; font-style: normal; font-weight: bold; text-decoration: none}

        </style>
    </head>
<%-- sessionT2.jsp --%>
<%
   /*
         로그인폼에 입력된 아이디와 비밀번호를 검사(인증)!!
        ---> DB비교
           ---> 일치(id존재, pass일치)경우: 밑의 HTML출력
           ---> 불일치경우: 로그인페이지로 이동
   */

   HashMap<String,String> map = new HashMap<>();//map == DataBase
   //key:아이디, value:패스워드
   //데이터저장!
       map.put("gildong", "1234");
       map.put("lime", "5678");
       map.put("juwon", "3333");

       System.out.print(request.getParameter("id"));

       String id = request.getParameter("id");
       String pass = request.getParameter("pass");

           String dpass = map.get(id);
       if(dpass == null) //아이디가 존재하지 않는다면
       //로그인 폼으로 이동
       {

           out.print("<script>alert('잘못된 접속입니다.')</script>");    
           response.sendRedirect("sessionT1.jsp");
       }else //아이디가 존재한다면
       {
           if(dpass.equals(pass)) //아이디 존재, 비번 일치
           {
               session.setAttribute("login", "success");
           }else // 아이디존재, 비번 불일치, 로그인 폼으로 이동
           {
               out.print("<script>alert('잘못된 접속입니다.')</script>");    
               response.sendRedirect("sessionT1.jsp");
           }
       }

       /* 내가 만들다 만 망작..
       if((request.getParameter("username") != map.get("gildong")))
             //|| (request.getParameter("pass") != map.get("1234")))
     {
         out.write("<script>history.back()</script>");
     }else{
         session.setAttribute("login","success");
     }
       //request.getParameter(arg0) !=
       //        send redirect
    */
%>
  <body>    
   <center>
   <p class="normalbold">사용자 인증 완료</p>
   <p class="normal"><a href="sessionT3.jsp">서비스페이지</a></p>
   </center>  
  </body>
</html>
<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head><title>Session인증 페이지</title>
   <style type="text/css">
        <!--
        .normal {  font-family: "굴림", "돋움"; font-size: x-small; font-style: normal; font-weight: normal; text-decoration: none}
        .normalbold {  font-family: "굴림", "돋움"; font-size: x-small; font-style: normal; font-weight: bold; text-decoration: none}
        -->
   </style>
 </head>
<%-- sessionT3.jsp --%>
 <%
       String login = (String)session.getAttribute("login");

       if(login ==null  || !login.equals("success")){//로그인 하지 않았다면!!
           response.sendRedirect("sessionT1.jsp");
       }

 %>
 <body>     
     <center>
     <p>    
        <img src="/TomTest/image/ebi.gif" width="400" height="300">
     </p>
     <p class="normalbold">이 페이지는 사용자 인증을 받아야 볼 수 있죠!</p>    
     <p class="normal">감사합니다....</p>
     <p class="normal"><a href="sessionT4.jsp">로그아웃</a></p>
     </center>
 </body>
</html>
<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head><title>Session로그아웃 페이지</title>
   <style type="text/css">
        <!--
        .normal {  font-family: "굴림", "돋움"; font-size: x-small; font-style: normal; font-weight: normal; text-decoration: none}
        .normalbold {  font-family: "굴림", "돋움"; font-size: x-small; font-style: normal; font-weight: bold; text-decoration: none}
        -->
   </style>
 </head>
 <%-- sessionT4.jsp --%>  
 <%
     //세션종료, 로그아웃 프로세스
     //session.removeAttribute("login"); // 세션유지, login키만 삭제
     session.invalidate(); //전체 세션 해제, 삭제
 %>
 <body>

 <p class=normalbold>세션이 종료되었습니다.</p>
 <p class=normal><a href="sessionT3.jsp">서비스 페이지로 이동 해 보죠.</a></p>
</body>
</html>

알아두기

<알자!!>
----------------------------------------------
   hello.jsp?uname=홍길동&age=13

   String uname = request.getParameter("uname");
          -----
                     홍길동

   String  age = request.getParameter("age");
          -----
           13

   String  job = request.getParameter("job");
          -----
           null  ==> job키 없음!!, job파라미터 없음!!
----------------------------------------------
  <form>
       <input type='text' name='username'><br>
       <input type='text' name='useraddr' value='남부터미널'><br>
       <button>전송</button>
  </form>

   String  userName = request.getParameter("username");
           --------
                        빈문자열""

   String  userAddr = request.getParameter("useraddr");
           --------
                       남부터미널

   String  happy = request.getParameter("happy");
           ----- 
           null

----------------------------------------------
   session.setAttribute("action","동에번쩍");
   session.setAttribute("clock","벌써12시");

   String action = (String)session.getAttribute("action");
          ------
                   동에번쩍

   String clock = (String)session.getAttribute("clock");
          -----
                   벌써12시

   String hobby = (String)session.getAttribute("hobby");
          -----
          null

----------------------------------------------

+ Recent posts