190711_Day64

< JSP > JavaServerPage

  • 자바 웹 어플리케이션
  • 웹프라우저에 출력되는 화면을 표현
  • HTML(CSS, JavaScript) + Java
    • 클라이언트 스크립트 + 서버스크립트
      • 브라우저 실행 + JVM실행
    • 물과 기름같은!
    • 섞일수 없다.

< JSP 기본태그>

  1. declaration

    • <%! %>
    • 서블릿(자바클래스) 변환시 멤버의 구성요소(필드, 메소드(비권장))
  2. scriptlet

    • <% %>
    • 서블릿(자바클래스) 변환시 service()메소드 내에 들어갈 자바 코드
      • 메소드 호출, 조건문, 반복문
  3. expression

    • <%= %>
    • 서블릿(자바클래스) 변환시 sevice메소드 내에 들어갈 자바 코드
      • out.print() 를 통한 데이터 직접출력 및 리턴이 있는 메소드 호출
  4. comment

    • <%-- --%>
  • .html => HTML주석만 가능

  • .jsp => HTML주석, JSP주석 가능

  • <% int su = 200; %>

  • < !-- <% su+=200; %> -->

  • <% su *=2; %>

  • <%= su; %>

    • 출력되는 값은?400
문제1) 자바스크립트에 있는 str값을 자바 영역에서 출력가능(사용가능)?
     <script>
         var str="나는 자바스크립트~!!";
     </script>

     <%= str %>
     또는
     <%  out.print(str); %>
     ===> 에러: 출력 절대 절대 안됨!!
------------------------------------------------------
문제2) 자바영역에 있는 str값을 자바스크립트 영역에서 출력가능(사용가능)?
    <%  String str="오늘은 목요일!!";    %>

    <script>
          document.write(str);  ==> 가능? X
          alert(str);    ==> 가능?  X
    </script>
    -------------------------------------------
    <%  int su=300;    
        String str="friday";
    %>

    <script>
          document.write(su);  ==> 가능? X
          document.write(<%=su%>);  ==  document.write(300);   ==> 가능? O

          document.write(str);  ==> 가능? X
          document.write(<%=str%>);  ==> 가능? X
                                     ==>document.write(friday); 
          document.write('<%=str%>');  ==> 가능? O
                                       ==>document.write('friday');  
    </script> 

< JSP 지시어(지시자) > : Directives

  • JSP파일의 속성을 기술
  • JSP컨테이너에 해당페이지를 어떻게 처리해야 하는지 전달하기 위한 내용을 담는다.
  • 종류에는 page, include, taglib가 있음
    • < %@page % > (O)
    • < %@ page % > (O)
    • < % @page % > (X)
  1. page지시어

    형식)

        <%@ page 속성명1="속성값" 속성명2="속성값" 속성명3="속성값" %>
    
        <%@ page 속성명1="속성값" %>
        <%@ page 속성명2="속성값" %>
        <%@ page 속성명3="속성값" %>

    속성종류)

         contentType (text/html;charset=UTF-8) : JSP가 생성할 문서의 타입지정.
         pageEncoding : JSP페이지 자체의 캐릭터 인코딩을 지정. 
         import : JSP페이지에서 사용할 자바 클래스를 지정.
    
         session (true) : JSP페이지가 세션을 사용할 지의 여부 지정, 새로고침할때마다 접속정보 갱신
         buffer (8kb) : JSP페이지의 출력버퍼크기를 지정.
         autoFlush (true) : 출력버퍼가 다 찼을 경우 자동으로 버퍼에 있는 데이터를 출력.
         errorPage    : JSP페이지 실행중 에러발생시 이동할 페이지 설정.
         isErrorPage (false)  : 에러발생시 에러관련된 객체지원. 
    <%@ 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>
        <font color = "red"> 안녕 JSP </font>
    </body>
    </html>
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"
        errorPage="error.jsp"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>에러테스트</title>
    </head>
    <%--error_test.jsp --%>
    <body>
       <h3>에러테스트</h3>
       <hr>
          블루스크린 없는 하루~!!
       <%
           out.print("<br>3*5="+(3*5));
           out.print("<br>3/0="+(3/0));
       %>      
    </body>
    </html>
    <%@ 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 type="text/css">
           table{ margin: auto}
       </style>
    </head>
    <%-- error.jsp --%>
    <body>
       <table>
             <tr bgcolor="pink">
                 <th>
                     에러페이지 발생<br>
                     <%  %>
                 </th>
             </tr>
          <tr bgcolor="orange">
             <td>
                시스템이 원활하지 않습니다.<br>
                잠시후에 다시 접속해 주세요.
             </td>
          </tr>
          <tr>
            <td><img src="../image/ebi.gif"></td>
          </tr>
       </table>
    </body>
    </html>

    web.xml 설정하기

  2. include지시어

    형식)

    <%@include file = "경로명"%>
  3. taglib지시어(외부에서 정의된 태그를 사용할 때)

    형식)

    <%@taglib uri="경로" prefix="접두사">
    <%@taglib tagdir="경로" prefix="접두사">

JSP기본객체(내장객체)

  • JSP페이지내에서 자료형을 선언하지 않고 사용하는 객체
    • <% 자바코드 %>
    • <%= 자바코드 %>

종류)

  1. requset (javax.servlet.http.HttpServletRequest)
    • HTML폼요소의 선택값 등 사용자 입력정보를 읽어 올 때 사용.

주요메소드)

  • getParameter(String name)

    • 문자열 name과 같은 이름을 가진 파라미터의 값 얻어오기
  • setAttribute(String key, Object value); =>데이터 저장

  • getAttribute(String key); => 데이터 조회

    • ★★영역(scope)객체들이 공통적으로 사용
      • page[Context], request, session, application
      • 영역내에 데이터 (숫자, 문자열, Beans, ArrayList)를 저장, 조회하는 역할
  • getParameterNames();

  • getCookies()

    • 모든 쿠기값을 javax.servlet.http.Cookie의 배열형태로 얻어오기
  • getMethod()

    • 요청방식을 문자열로 얻어오기 ("GET","POST")
  • getSession()

    • 현재 세션객체 얻어오기
  • getRemoteAddr()

    • 클라이언트의 IP주소 얻어오기
  • getProtocol()

    • 현재 서버의 프로토콜을 문자열 형태로 얻어오기
  • setCharacterEncoding("문자집합명")

    • HTML 폼에서 한글 입력시 정상적으로 처리해주기 위해 설정.
    • POST로 전달된 한글을 처리하기 위해 사용.
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>입력페이지</title>
</head>
<body>
    <h3>input.jsp(데이터입력)</h3>
    <hr>
    <form action="print.jsp" method = "post">
        나이 : <input type = "text" name ="age"><br>
        이름 : <input type = "text" name ="name"><br>
        <button>전송</button> <%-- <button type = submit > --%>
    </form>

</body>
</html>

<Request한글 처리>

  • 요청페이지로 부터 얻는 (한글)데이터에 대한 문자집합 설정

    • request를 통해 (폼을 통해)전달된 한글에 대한 처리(한글깨짐 방지)
    • request.setCharacterEncoding("문자집합");
  • 주의)

    1. 그 어떤 request.getParameter("name"); 보다 먼저 설정!!
    2. 전달 받는 방식을 POST!!
    3. request(HTML)에 정의된 문자집합과 일치하는 설정(setCharacterEncoding)을 해야함!!
  input.jsp                            print.jsp
  <%@page pageEncoding="UTF-8">        request.setCharacterEncoding("UTF-8");      
  <%@page pageEncoding="euc-kr">       request.setCharacterEncoding("euc-kr");
  1. response(java.servlet.http.HttpservletResponse)

    • 사용자 요청에 대한 응답을 처리하기 위해 사용.

    주요메소드)

    • setContentType(type)
      • 문자열형태의 type에 지정된 MIME Type으로 contentType을 설정.
    • setHeader(name,value)
      • 문자열 name의 이름으로 문자열 value의 값을 헤더로 설정.
    • setDateHeader(name,date)
      • 문자열 name의 이름으로 date에 설정된 밀리세컨드 시간 값을 헤더에 설정.
    • sendError(status, msg)
      • 오류코드를 세팅하고 메시지를 보낸다.
    • sendRedirect(url) ★
      • 클라이언트 요청을 다른 페이지로 보낸다.(페이지 이동)
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>입력페이지</title>
    </head>
    <%--input2.jsp --%>
    <body>
      <h3>입력페이지</h3>
      <hr>
      <%--
          <미션>  html/0621/getDataTest.html의  폼태그 복사
          input2.jsp 폼에 입력한 데이터를  print2.jsp에서 출력하기!!  
       --%>
    <form name="frm" method="post"
           action="print2.jsp">
             아이디 : <input type="text" name="id"><br>
             비밀번호: <input type="password" name="pwd"><br>
             좋아하는 과일: 
             <!--  
                     <input type="checkbox" name='apple' value="사과">사과
                     <input type="checkbox" name="straw">딸기
                     <input type="checkbox" name="banana">바나나
              -->
                     <input type="checkbox" name='fruit' value="풋사과">사과
                     <input type="checkbox" name="fruit" value="딸기">딸기
                     <input type="checkbox" name="fruit" value="바나나">바나나
                     <br>
             당신의 강의실: <input type="radio" name="room" checked
                            value="1강의실"> 1강의실
                     <input type="radio" name="room" 
                            value="2강의실"> 2강의실
                     <input type="radio" name="room"
                            value="3강의실"> 3강의실      
                     <input type="radio" name="room"
                            value="4강의실"> 4강의실
                     <br>  
    
              나보여? <input type="hidden" value="지킬박사와 하이드" name="hide">     
                <br>                   
             파일업로드: <input type="file" name="myfile">
          <!-- 로컬PC(사용자PC)에 있는 파일을 서버(PC)에 올릴때(전송할때) 사용 -->
                <br> 
             운동: <select name="sports">
                 <option value="baseball">야구</option>  
                 <option>축구</option>  
                 <option selected>농구</option>  
                 <option>배구</option>  
              </select>
              <br> 
             비고: <textarea rows="5" cols="10" name="note"></textarea>
         <br>
         <button type="submit" onclick="printData()">등록</button> 
       </form>  
    </body>
    </html>
    <%@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>출력페이지</title>
    </head>
    <%-- 
    
    print2.jsp ? id=gildong&pwd=1234&room=1강의실 
    
    

--%>

(input2.jsp)폼안의 데이터 출력



 <% request.setCharacterEncoding("UTF-8"); %>

   아이디:<%= request.getParameter("id") %><br>
   비번:<%= request.getParameter("pwd") %><br>
   선택된과일:
   <%-- 다중선택이 안됨. <%= request.getParameter("fruit") %> --%>
     <%
     String [] fruits = request.getParameterValues("fruit");
     for(int i = 0; i < fruits.length; i++)
     {
         out.print(fruits[i]+ " ");
     }
     %>
   <br>
   강의실:<%= request.getParameter("room") %><br>
   히든:<%= request.getParameter("hide") %><br>
   파일:<%= request.getParameter("myfile") %><br>
   운동:<%= request.getParameter("sports") %><br>
   비고:<%= request.getParameter("note") %><br>

   <hr color="pink">
   <%
   //만약, 폼 안의 name속성의 값을 모를 경우
    Enumeration<String> names =  request.getParameterNames();
    //["id","pwd","fruit","room","hide","myfile","sports","note"]

   while(names.hasMoreElements()){
        //out.print(names.nextElement()+"<br>");
       String name = names.nextElement();
       out.print(name +" : "+ request.getParameter(name)+"<br>");
   }

 %>
```

<페이지간 이동> a.jsp -----> b.jsp

  • HTML

    <a href="이동경로b.jsp">텍스트 또는 이미지</a>
    <form action="이동경로"> <input type="submit"> <button> </form>
  • JavaScript:

    location.href="이동할경로";
                    replace("이동할경로")                
                    폼이름.submit();  ---> 폼태그내의 action에 명시된 경로로 이동!!
  • JSP ★

    1. 포워드 이동
      • pageContext.forward(); ===> JSP페이지에서만 사용
      • requestDispatcher.forward(); ===> JSP와 Servlet 둘 다 사용 가능!!
      • 특징) 브라우저에 출력되는 페이지와 URL에 명시된 페이지가 서로 다름.
      • URL에 명시된 페이지와 이동한 페이지간에 request를 공유.
    2. 리다이렉트 이동
      • response.sendRedirect("이동경로");
      • 특징) 브라우저에 출력되는 페이지와 URL에 명시된 페이지가 서로 같음.
      • URL에 명시된 페이지와 이동한 페이지간에 session를 공유.

start.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>
<%-- start.jsp(요청페이지)  --%>
<body>
  <h3>start.jsp(요청페이지, 영역객체, 영역데이터 테스트)</h3>
   <%
      //데이터를 영역(page < request < session <  application)에 저장

      //pageContext.setAttribute(String key, Object value );
      String name="홍길동";
      pageContext.setAttribute("k1", name);//현재페이지 에서만 공유

      request.setAttribute("k2", "길라임");//요청관계에 있는 페이지간 공유
      session.setAttribute("k3", "김주원");//동일브라우저(동일접속)내에서 공유
      application.setAttribute("k4", "항상 즐거운 일 가득하세요~^^*");//동일서버(Tomcat)에서의 공유


      //out.print("k1저장데이터: "
      //       + pageContext.getAttribute("k1"));
      out.print("이름데이터: "+ name);


      //페이지 이동!!(1.forward, 2.redirect)
      //request.getRequestDispatcher("이동할 경로");
   RequestDispatcher  rd = request.getRequestDispatcher("/0711/end.jsp");
     //rd.forward(ServletRequest arg0, ServletResponse arg1);
     //rd.forward(request, response); // k2뜨려면!

     response.sendRedirect("end.jsp");
   %>
</body>
</html>

end.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>
<%-- end.jsp(응답페이지) --%>
<body>
   <h3>end.jsp(응답페이지, 영역데이터 출력)</h3>
   <hr>
   k1(pageContext): <%= pageContext.getAttribute("k1") %> <br>
   k2(request): <%= request.getAttribute("k2") %> <br>
   k3(session): <%= session.getAttribute("k3") %> <br>
   k4(application): <%= application.getAttribute("k4") %> <br>

</body>
</html>

+ Recent posts