실무에서 일하고 있지만

너무 많이 부족하다...

 

기본기도 부족하고 용어도 모르다보니

업무 로직 숙지만으로도 벅찬데 더더욱 혼동되고 벅차져서

 

근무시간 08:30 to 06:30 까지는 과제 및 업무를 맡고

            07:00 to 08:30 까지는 당일 업무 정리 및 보충

 

            09:00 to 10:30 까지는 Easy ABAP 2.0 교재를 기반으로 기본을 다지고자 한다.

 

'SAP > Easy ABAP' 카테고리의 다른 글

Ch 03 OPEN SQL & NATIVE SQL - 2  (0) 2021.01.14
Ch 03 OPEN SQL & NATIVE SQL - 1  (0) 2021.01.12
Ch 02 Data Type - 2  (0) 2021.01.08
Ch 02 Data Type - 1  (0) 2021.01.07
Ch 01 Package & CTS  (0) 2021.01.05

코드번들링

  • 특정확장자마다 정해진 작업을 하도록 정해진것
  • 파일을 묶어주는것 (기본적으로 하나, 분리도 가능)
  • 주로 자바스크립트를 위함이지만, HTML, CSS, 이미지 등도 변환
  • webpack 구조
  • Webpack, Parcel, browserify등...
  • 파일 관리 도구

Babel

  • 자바스크립트 컴파일러 (변환도구)
  • 최신버전 자바스크립트 문법은 브라우저가 이해 못함
  • Babel이 브라우저가 이해할 수 있는 문법으로 변환

JSX

  • JavaScript ( JS ) + XML ( X)
  • HTML과 유사 구문
  • 자바스크립트 확장
  • 자바스크립트 내부에 마크업 코드 작성
  • Babal이 JSX로더 이용해서 JSX 동작
  • 컴파일 최적화
  • 가독성 좋음, 시각적 도움

'React.JS' 카테고리의 다른 글

React 개요, 시작  (0) 2019.09.07
프론트앤드 라이브러리/프레임워크 ?!  (0) 2019.09.07

React

  • 유저 인터페이스 만드는데 사용

  • 라이브러리, 오직 View만!

  • 데이터가 변경되면 변이 하는것이 아니라!

  • 기존 뷰 빠이

  • 새로운 뷰 생성( 랜더링 )

    • but 브라우저는 DOM기반이어서 계속 생성하면 성능적 문제가 발생, 리소스 많이 먹음...
    • VirtualDOM으로 해결하자!
    • 정말 변화가 필요한곳만!
    • RealDom과 VirtualDOM 변화 부분 비교해서 바뀐 부분 Patch!
      • (약간, git 협업할때랑 비슷하네..?)
  • 엄밀히 말하면 뷰를 업데이트하는게 아니라 Reconciliation(조화)과정을 거치는 것

    DOM이란? (Document Object Model)
    문서 객체 모델!
    내가 작성한 코드가 브라우저에 파싱되면 DOM
    HTML , XML문서의 프로그래밍API
    문서 구조표현
    
    참조
    https://shldhee.github.io/2018/04/08/DOM/
    https://css-tricks.com/dom/
    
    Virtual DOM참조 
    https://youtu.be/muc2ZF0QIO4

'React.JS' 카테고리의 다른 글

코드번들링, Babel, JSX  (0) 2019.09.10
프론트앤드 라이브러리/프레임워크 ?!  (0) 2019.09.07

프론트엔드 라이브러리?

  • 웹사이트 만들기 위해서는 필수적인것은 아님
  • 정적페이지라면 자바스크립트 없이 HTML, CSS도 가능
  • 동적으로는 자바스크립트 사용

but, 요즘은 웹앱!

  • 동적으로 표현필요

  • 프로젝트 규모 커지고

  • 다양한 인터페이스적용한다면?! 없이 프레임워크 없이는 힘들어진다.

프론트엔드 프레임워크/라이브러리 3대장

  • Angular
    • 다양한 기능 내장
    • 다국어지원
    • 이미 많이 사용, 사용률 높음
    • 타입스크립트 사용 거의... 강제!
  • Vue
    • 입문 쉽고
    • 모듈 번들러 없이, CDN으로 불러옴
    • 공식 라우터, 상태관리 라이브러리 존재
    • 리액트 장점 앵귤러 장점 믹싱?!
번들러 : 지정한 단위 파일들을 하나로 만들어서 요청대 대한 응답으로 전달할 수 있는 환경 만들어주는 것
CDN (Content Delivery Network) : 정적컨텐츠 캐싱이 목적
  • React
    • 컴포넌트에 집중
    • 프레임워크가 아닌 라이브러리
    • 공식 라우터, 상태관리 라이브러리 없이 서드파티
잠깐!
프레임워크 : 필수코드, 알고리즘, DB연동 같은 기능이 어느정도 구성되어있는 뼈대
            인터페이스의 집합

라이브러리 : 특정 기능에 대한 API(도구 / 함수) 모은 집합

그럼 이 둘의 차이는?
라이브러리는 애플리케이션의 흐름을 직접 제어
프레임워크는 애플리케이션 코드가 프레임워크에 의해 사용되는 것

'React.JS' 카테고리의 다른 글

코드번들링, Babel, JSX  (0) 2019.09.10
React 개요, 시작  (0) 2019.09.07

190718_Day69 서플릿 필터, 리스너, 파일업로드

<서블릿 필터>

  • 사용자 요청에 따라 서블릿이나 JSP의 실행 전후, 필요에 따라 기능을 추가, 삭제해주는 역할

  • 보통 클라이언트의 요청을 서블릿이 받기 전에 가로채어 필터에 작성된 내용을 수행 하는 것

  • 인증, 로깅/감사, 이미지변환, 데이터압축, 암호화 등..

  • javax.servlet.Filter

  • util이라는 패키지에 넣어봤습니다~

  • 환경설정 필요

    • Web.xml (WEB-INF안에)

      <?xml version="1.0" encoding="UTF-8"?>
      <web-app version="3.0" 
               xmlns="http://java.sun.com/xml/ns/javaee" 
               xmlns:xml="http://www.w3.org/XML/1998/namespace" 
               xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
               xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
                    http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd ">
      
       <!-- 리스너 등록(0718오후) -->
       <listener>
           <listener-class>t0718.MyListener</listener-class>
       </listener>
      
       <!-- 전체 서블릿과 JSP에서 공유할 데이터 (text) 정의 -->
       <context-param>
           <param-name>common</param-name>
           <param-value>진꼬복 많이 받으세요 :)</param-value>
       </context-param>
      
       <!-- 경로 변경시 이미지 쉽게 루트 변경하려면! -->
        <context-param>
           <param-name>imgPath</param-name>
           <param-value>/TomTest/image</param-value> <!-- 이제 여기만 고치면 되네! -->
       </context-param>
      
       <context-param>
           <param-name>rootPath</param-name>
           <param-value>/TomTest</param-value>
       </context-param>
      
       <!-- 필터 클래스 등록 -->
       <filter>
           <filter-name>enc</filter-name> <!-- 아무거나! -->
           <filter-class>util.enc.EncFilter</filter-class>
           <init-param>
               <description>설명은 여기에 적어, encoding초기값</description>
               <param-name>encType</param-name>
               <!-- 얘를 EncFilter.java에서 가져다 씀 -->
               <param-value>UTF-8</param-value> 
               <!-- EncFilter 무시하고 이 값으로 감 -->
           </init-param>
       </filter>
       <filter-mapping>
           <filter-name>enc</filter-name> <!-- 아무거나! -->
           <url-pattern>*.jsp</url-pattern>
       </filter-mapping>              
      
        <!-- 서블릿 클래스 등록 -->
        <servlet>
          <servlet-name>my</servlet-name>
          <servlet-class>t0708.MyServlet</servlet-class>
          <init-param>
             <param-name>youName</param-name>
             <param-value>아무개</param-value>
          </init-param>
        </servlet>
      <!-- (서블릿 클래스에 매핑될) 가상의 경로 설정 -->
      <servlet-mapping>
        <servlet-name>my</servlet-name>
        <url-pattern>/gildong/my</url-pattern>
        <!-- url-pattern엘리먼트 내의 맨 앞의 '/'는  (컨텍스트)루트를 의미!!
                        예) /gildong
              ===> http://localhost:8282/TomTest/gildong
         -->
      </servlet-mapping>         


      <!-- 카운트 서블릿등록 -->
      <servlet>
         <servlet-name>cnt</servlet-name>
         <servlet-class>com.encore.t0708.CountServlet</servlet-class>
      </servlet>

      <!-- 카운트 서블릿에 매핑할 가상경로 정의 -->
      <servlet-mapping>
         <servlet-name>cnt</servlet-name>
         <url-pattern>/cnt</url-pattern>
      </servlet-mapping>

      <!-- 카운트 서블릿등록2 -->
      <servlet>
         <servlet-name>cnt2</servlet-name>
         <servlet-class>com.encore.t0708.CountServlet2</servlet-class>
      </servlet>

      <!-- 카운트 서블릿에 매핑할 가상경로 정의2 -->
      <servlet-mapping>
         <servlet-name>cnt2</servlet-name>
         <url-pattern>/cnt2</url-pattern>
      </servlet-mapping>

      <!-- 파라미터서블릿등록 -->  
      <servlet>
         <servlet-name>param</servlet-name>
         <servlet-class>com.encore.t0709.ParamServlet</servlet-class>
      </servlet>

      <!-- 파라미터서블릿에 대한 가상경로 등록 -->  
      <servlet-mapping>
         <servlet-name>param</servlet-name>
         <url-pattern>/0709/result</url-pattern>
      </servlet-mapping>


      <!-- 
        <error-page>는  에러발생동기와   ==>   <error-code>  또는  <exception-type>
                                         에러발생시 이동할 페이지의 정보를 저장   ==>  <location>
      -->

     <!-- 
      <error-page>
        <error-code>500</error-code>
        <exception-type>java.lang.ArithmeticException</exception-type>
        <location>/0711/error.jsp</location>
      </error-page> 
     -->

      <!-- 
          <welcome-file-list>에는 페이지 명시 없을 때 보여줄 화면 페이지를 설정

         - 페이지 명시하는 경우 : http://192.168.0.96:8282/TomTest/hello.jsp
         - 페이지 명시하지 않는 경우 : http://192.168.0.96:8282/TomTest

         <welcome-file>태그 중 위쪽에 명시된 페이지가 우선 순위가 높다.
                 만약 TomTest폴더 밑에 아래의 index.html, index.jsp, hello.jsp파일이 
                 전부 있다면 index.html이 화면에 자동 출력됨. 
       -->

      <session-config>
          <session-timeout>1</session-timeout>
          <!-- TomTest(WebContext) 안에 모든 페이지에 대해 '분' 단위의 세션유지 시간 설정 -->
      </session-config>

      <welcome-file-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>hello.jsp</welcome-file>
      </welcome-file-list>


    </web-app>

EncFilter.java

package util.enc;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;

public class EncFilter implements Filter
{
    private String encType;

    @Override
    public void init(FilterConfig config) throws ServletException
    {
        // System.out.println("init()");
        // config 통해서 web.xml에 정의된 param을 읽기 가능
        encType = config.getInitParameter("encType");
    }

    @Override
    public void destroy()
    {
        // System.out.println("destroy()");
    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException
    {
        // System.out.println("doFilter()");

        if (encType != null) // web.xml에 encType이 정의되었다면
        {
            request.setCharacterEncoding(encType);
        } else
        {
            request.setCharacterEncoding("UTF-8");
        }
        // doFilter와 페이지 연결 하려면
        chain.doFilter(request, response);
        // 다른 필터 혹은 요청 페이지와의 연결 진행
    }
}

input.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>입력폼</title>
</head>
<%-- input.jsp  (입력폼) --%>
<body> 
   <h3>입력폼</h3>
   <hr>
   <%
     String youName =  getServletConfig().getInitParameter("youName");
     out.print("당신의 이름은 "+ youName+"<br>");

     //application == ServletContext
     String msg = application.getInitParameter("common");
     out.print("<font color=green>서버의 메시지 :["+msg+"]</font><br>");
   %>
   ${book }<br>
     책제목: ${book.title } <br>
   <form method="post" action="result.jsp"> 
          이름: <input type="text" name="username"><br>
      <button>전송</button>
   </form>

</body>
</html>

result.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>파라미터 전송결과</title>
</head>
<%--result.jsp --%>
<body>
  <h3>파라미터 전송결과</h3>
  <hr>
    전달 이름: 
    <%= request.getParameter("username") %>
</body>
</html>

web.xml에서 t0708/MyServlet 부분 서블릿 추가

ServletConfig 는 하나

ServletContext 는 여러개!

MyServlet.java(t0708)

package t0708;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class MyServlet extends HttpServlet{
  //서블릿 : 한개의 웹페이지 화면을 구성!!

   @Override
   public void init() throws ServletException {
      System.out.println("init()");
   }

   @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       System.out.println("service()");
       //서블릿 서비스 메소드 == 웹브라우저 서비스!! ==> HTML 서비스
       //request:클라이언트(사용자, 브라우저), response : 서버를 각각 의미


       // (한글)문자집합 설정
       response.setContentType("text/html;charset=UTF-8");
       // text/html => MIME형식
       // 입력:text 출력:html => out.print() 메소드를 통해 전달되는 text를 브라우저에게 html해석하시오!
       //text:plane; text:xml; 이런식으로 형식을 줄 수 있다!

       PrintWriter out = response.getWriter();
       //PrintWriter out ==> 브라우저 출력 객체를 의미함.
       //out.print("HTML코드(텍스트)");

       out.print("<html><head><title></title></head>");
       out.print("<body><h3>ServletTest</h3></hr>");

       //190708 여기 추가
       //web.xml에 등록된 initParam데이터 가져오기
       ServletConfig config = getServletConfig(); // 현재 서블릿
           String name = config.getInitParameter("youName");
           String name2 = getInitParameter("youName");
           out.print("name : " + name + ", name2 : " + name2 );
       ServletContext application = getServletContext();
       //TomTest와 같은 웹어플리케이션

       String commonTxt = application.getInitParameter("common");
       out.print("<font color=green>" + commonTxt + "</fong><br>");



       out.print(application.getAttribute("book" + "<br>"));
       //이 위까지 190708 추가

       for (int i = 0; i < 10; i++) {
           if(i%2==0)
           out.println("<b><font color = red>용진</font></b><br>");
           if(i%2==1)
            out.println("<b><font color = blue>진주</font></b><br>");
    }
       out.print("</body></html>");
    }

    @Override
    public void destroy() {
       System.out.println("destroy()");
    }

}

input.jsp에 추가

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>입력폼</title>
</head>
<%-- input.jsp  (입력폼) --%>
<body> 
   <h3>입력폼</h3>
   <hr>
   <%
     String youName =  getServletConfig().getInitParameter("youName");
     out.print("당신의 이름은 "+ youName+"<br>");

     //application == ServletContext
     String msg = application.getInitParameter("common");
     out.print("<font color=green>서버의 메시지 :["+msg+"]</font><br>");
   %>
   ${book }<br>
     책제목: ${book.title } <br>
   <form method="post" action="result.jsp"> 
          이름: <input type="text" name="username"><br>
      <button>전송</button>
   </form>

</body>
</html>
  • 어디에 쓰는데 이걸? 이미지 한곳에 모아놨었는데, 그 폴더에 없고 예를 들어 coffee 폴더 안에 있어...경로가 달라졌어!

  • 그럼 그림 안나옴 ㅠㅠ

  • 이미지 수십개 썼으면, 해당 jsp 가서 다 수정할거야? 아니지?

  • 문제가 되는 페이지에 가서 수정하는게 아니라

    • web.xml에 등록하고

        <context-param>
           <param-name>imgPath</param-name>
           <param-value>/TomTest/image</param-value> <!-- 이제 여기만 고치면 되네! -->
       </context-param>
      • 해당하는 imgPath value값만 바꾸면 된다!

      • 0717에 service.jsp에서 사진을

        <img src="<%= application.getInitParameter("imgPath")%>/ebi.gif" width="400" height="300">
        
        <img src="${initParam.imgPath }/ebi.gif" width="400" height="300">
        • 이렇게 수정함, 적용 잘 됨!
        • 너무 길면 ${initParam.imgPath }

<리스너>

  • 특정 인터페이스를 구현하는 자바클래스
  • web.xml의 리스너 설정 항목에 기술해두면 웹 애플리케이션 시작 시 자동으로 실행되어 모든 애플리케이션에서 참조할 객체 생성등을 수행

web.xml 에 리스터 등록

 <listener>
     <listener-class>t0718.MyListener</listener-class>
 </listener>

MyListener.java

package t0718;

import javax.servlet.ServletContext;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;

public class MyListener implements ServletContextListener
{
    @Override
    public void contextDestroyed(ServletContextEvent sce)
    {
        // 끝날 때
        //System.out.println("contextDestroyed");
    }

    @Override
    public void contextInitialized(ServletContextEvent sce)
    {
        // 시작할 때
        //System.out.println("contextInitialized");

        //전체 웹어플리케이션에서 공유할 객체 저장
        ServletContext application = sce.getServletContext();
        application.setAttribute("book", new Book());
    }
}

<파일 업로드>

  • 사용자(클라이언트) PC내의 파일 -> 서버의 특정 디렉토리에 저장!
  • <파일업로드 규칙>
    1. form태그의 method속성은 반드시 post!
    2. form태그의 속성 enctype="multipart/form-data" 추가!
      • 폼내의 데이터들을 text가 아닌 stream으로 전송!
      • input.jsp
    • 참고) enctype = "application/x-www-form-urlencoded"
      • 기본값
      • form태그내의 name데이터들을 text로 전달!
  • <파일 업로드 구현>
    1. inputFile.jsp : 폼제공
    2. resultFile.jsp : inputstream을 통해 파일 업로드 구현, 실행

inputFile.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>입력폼</title>
</head>
<%--inputFile.jsp --%>
<body>
  <h3>입력폼</h3>
  <hr>
  <form action="resultFile.jsp" method="post"
        enctype="multipart/form-data" >
       이름: <input type="text" name="username"><br>
       파일: <input type="file" name="myfile"><br>
       <button>전송</button>
  </form>
</body>
</html>

resultFile.jsp

<%@page import="java.io.FileWriter"%>
<%@page import="java.io.InputStreamReader"%>
<%@page import="java.io.BufferedReader"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>결과페이지</title>
</head>
<%--resultFile.jsp --%>
<body>
  <h3>결과페이지</h3>
  <hr>

     이름: <%=request.getParameter("username") %> <br>
     파일: <%=request.getParameter("myfile") %> <br>
  <hr color="red">
  <%
     ServletInputStream sis = request.getInputStream();

     BufferedReader  br = new BufferedReader
                         (new InputStreamReader(sis,"UTF-8"));

     String delimiter = br.readLine();//구분자역할을 하는 문자열
     //"------WebKitFormBoundarys29EFHDUPZj87Yvt"

     String str;
     int count=0;
     while( (str=br.readLine())  !=  null ){
         count++;
        // out.print(str+"<br>");
        if(str.contains("name=\"myfile\"")){
            System.out.println(count+"째줄에서 myfile을 찾았다!!");

            //파일명 찾기
            int startIdx = str.lastIndexOf("=")+2;
            int endIdx = str.length()-1;

            String fileName = str.substring(startIdx, endIdx);
                  //"애국가.txt"
            FileWriter fw = new FileWriter
                (application.getRealPath("/upload/")+ fileName);
                  //e:/jaelee/workspace2/TomTest2/upload/애국가.txt

            br.readLine();
            br.readLine();//두줄 skip


            while( (str=br.readLine()) != null  ){
                if(str.contains(delimiter)) break;
                out.print(str+"<br>");//브라우저화면 출력
                fw.write(str+"\r\n");//파일 출력
            }//while
             fw.close();
        }//if
     }//while

     //애국가.txt파일의 내용을 브라우저 화면에 출력하자!!
     //애국가.txt파일을  upload폴더에 생성하고 내용을 파일출력하자!!

  %>

</body>
</html>

<파일 업로드 툴>

http://www.servlets.com

  • cos-20.08.zip

위의 툴을 사용해서 만들어 보자!

압축 풀고 lib 폴더에 jar 파일 넣고 빌드패스!

inputFile2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>입력폼</title>
</head>
<%--inputFile.jsp --%>
<body>
  <h3>입력폼(파일업로드 : COS.jar - MultipartRequest 객체 사용 )</h3>
  <hr>
  <form action="resultFile2.jsp" method="post"
        enctype="multipart/form-data" >
       이름: <input type="text" name="username"><br>
       파일: <input type="file" name="myfile"><br>
       <button>전송</button>
  </form>
</body>
</html>

resultFile2.jsp

<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@ 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>

  <%
   //MultipartRequest(HttpServletRequest request, String saveDirectory)
   //MultipartRequest(HttpServletRequest request, String saveDirectory, 
                   //String encoding)
   //MultipartRequest(HttpServletRequest request, String saveDirectory, 
            //int maxPostSize, String encoding, FileRenamePolicy policy)

    String saveDir=application.getRealPath("/upload");
    //---> "e:/jaelee/workspace2/TomTest/upload"
    int maxSize=  5     * 1024   * 1024; //업로드 될 파일의 크기 제한, 단위:byte
          //     5byte    5Kb       5Mb 

    MultipartRequest mreq = new MultipartRequest
    (request,saveDir, maxSize, "UTF-8", new DefaultFileRenamePolicy());
        //MultipartRequest생성자 호출 == 파일업로드 !

        out.print("파일 업로드 성공 ~ !");
        String name = mreq.getParameter("username");


    %>
    <br>
    이름 : <%= name %><br>
    원본파일명 : <%= mreq.getOriginalFileName("myfile") %><br> 
    저장파일명 : <%= mreq.getFilesystemName("myfile") %><br> 

</body>
</html>

궁금상자
context-param
init-param

context-param(컨텍스트 초기화 파라미터)
    - <web-app> 항목내 작성
    - 범위 : 웹 애플리케이션 내에 모든 서블릿, jsp


init-param(서블릿 초기화 파라미터)
    - <servlet> 항목내 작성
    - 범위 : <init-param>항목을 포함하는 서블랏만

190717_Day68 <회원가입 미션>


<미션2>
==> 사용자인증JSP : Model1사용, DAO만 Model2개발방식!!

userinput.jsp (사용자정보 입력폼, 회원가입폼)

userprocess.jsp (사용자정보  DB저장)
  - insert

userconfirm.jsp (로그인 화면폼)

confirmprocess.jsp (로그인 처리: 아이디, 비번에 대한 존재와 일치를 체크)
  - select

modifyuser.jsp (사용자정보 수정폼)
  - select

modifyprocess.jsp (사용자정보 DB수정처리)
  - update

deleteid.jsp (사용자정보 DB삭제, 회원탈퇴)
  - delete

confirmid.jsp (아이디 중복여부 처리)
  - select

service.jsp   <------- sessionT3.jsp내용 복사

========
테이블명: UserInfo
<SQL스크립트 DDL>

drop table userinfo;

create table userinfo(
  id      varchar2(20) constraint userinfo_pk primary key,
  pass    varchar2(20) not null,
  name    varchar2(30) not null,
  jumin   varchar2(14) not null, --'960302-1012345'
  birth   varchar2(10), --'1996-03-02'
  zip     number(5)    not null,
  addr    varchar2(300),
  email   varchar2(50)  not null,
  job     varchar2(30)  not null
);
---> userinfo.sql 저장, 실행
---> UserInfo.java (9개의 속성 정의)
-----------------------------------------------------------------------------
작업순서)
   회원정보입력  ---> 로그인처리  ---> 수정처리
   ---> 삭제처리  ---> 아이디 중복처리   ---> 유효성검사

1. userinput.jsp(입력폼,회원가입폼)에서 '월'과 '일'에 대한 숫자 출력.
     월: 01~09~12 (자바for문을 통해 출력)

2. UserInfo.java작성 (테이블의 한 레코드 표현)

3. UserInfoDAO.java작성      

4. DB insert작업(userprocess.jsp)
    DAO의 insert호출  ---> 호출결과에 따라 적당한 메시지 출력

5. userconfirm.jsp (로그인화면)  ---이동--> confirmprocess.jsp
    - UserInfoDAO의 selectLogin() 메소드 구현
    - 로그인 처리
     - 호출결과에 따라 적당한 메시지 출력
     - 로그인 성공시 세션적용(설정)   

6. 수정폼에 기존 데이터 뿌리기
     - UserInfoDAO클래스내에 select()메소드 구현
     - 호출 후 결과값을 HTML에 뿌려주기


7. 수정폼에 입력된 데이터를 실제 DB에 반영
     - UserInfoDAO클래스내에 modify()메소드 구현
     - 수정항목: 비번,우편번호,주소,이메일,직업
     - 호출 결과에 따라 적당한 메시지(table) 출력

8. 삭제(회원탈퇴)버튼 클릭시 - deleteid.jsp
     - 정말 삭제할지를 확인 (JavaScript confirm창)
     - DB에서 삭제처리
     - 호출 결과에 따라 적당한 메시지(table) 출력

9. 입력폼에 있는 '아이디 중복확인'에 대한 처리
   ---> confirmid.jsp  (window.open처리)

10. 입력폼과 수정폼의 데이터 입력에 대한 유효성검사.
    (빈값, 주민번호에 대한 숫자체크와 자릿수,
        이메일에 대한 유효성검사- gildong1004@naver.com)
     - [영문자와 숫자조합6~15]@[영문자].[영문자]
     ----> javascript처리 ----> validateCheck()함수 추가

userinput.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>사용자등록</title>  
   <script type="text/javascript">
      function birthChange(){
          console.log('birthChange')
          var jumin1 = document.frm.jumin1.value ;//'960302'
          var birthYear = jumin1.substr(0, 2);//'96'
          var ch = document.frm.jumin2.value.charAt(0);//'1012345' ==> '1'

          if(ch=='1' || ch=='2' || ch=='5' || ch=='6'){
              birthYear = '19'+ birthYear 
          }else{//ch='3' '4' '7' '8'
              birthYear = '20'+ birthYear 
          }          
          document.frm.year.value = birthYear;
          document.frm.month.value = jumin1.substr(2, 2);//'03'
          document.frm.day.value  = jumin1.substr(4, 2);//'02'
      }//birthChange

      function ckid(){
          var id = document.frm.id.value;
          if(id==''){
              alert('아이디를 입력!!');
              return;
          }

          window.open('confirmid.jsp?id='+ id,'confirm',
                  'toolbar=no,location=no,status=no,'
                  +'menubar=no,scrollbars=no,resizable=no,'
                  +'width=300,height=200,top=200,left=300');

      }//ckid

      function validateCheck(){
          var f = document.frm; // f == 폼 엘리먼트 객체

          //정규식 정의
          var jumin1Exp = new RegExp("^[\\d]{6}$");
          var jumin2Exp = /^[\d]{7}$/;
          var yearExp = /^[\d]{4}$/;
          var zipExp = /^[\d]{5}$/;
          var idExp = /^[a-zA-Z0-9]{6,20}$/;
          var emailExp = /^[a-zA-Z0-9]+@[a-zA-Z]+\.[a-zA-Z]+$/;

          if(!idExp.test( document.frm.id.value))
          {
             alert('아이디는 6~20자리!!'); 
             //document.frm.id.focus();
             f.id.focus();
          }else if (f.pass.value=='')
          {
             alert('비번 입력');
              f.pass.focus();
          }else if (f.pass2.value=='')
          {
              alert('비번 확인 입력');
               f.pass2.focus();
           }else if (f.pass.value!= f.pass2.value)
          {
              alert('비밀번호가 일치하지 않습니다.');
              f.pass.value = ''; f.pass2.value='';
               f.pass.focus();
           }else if (f.name.value=='')
          {
              alert('이름 입력');
               f.name.focus();
           }
           /* else if (f.jumin1.value=='')
          {
              alert('주민번호입력');
               f.jumin1.focus();
           }else if (isNaN(f.jumin1.value))
            {
                alert('주민번호에 숫자만 입력!');
            }else if (f.jumin1.value.length != 6 )
            {    
               alert('주민번호에 6자리 숫자만 입력');     
            }  
          이거보다는 정규식 쓰는게 더 좋음*/
          else if (!jumin1Exp.test(f.jumin1.value)||
                   !jumin2Exp.test(f.jumin2.value))
             {
                 alert('잘못된 주민번호 입력입니다.');
                 f.jumin1.value=''; f.jumin2.value='';
                f.jumin1.focus();
             }else if (!yearExp.test(f.year.value))
             {
                 alert('생년에 4자리 수 입력!');
                 f.year.value='';
                 f.year.focus();
             }else if (!zipExp.test(f.zip.value))
             {
            alert('잘못된 우편번호');
            f.zip.value='';
            f.zip.focus();
             }else if(!emailExp.test(f.email.value))
             {
                 alert('이메일 빼애애액!');
                 f.email.value='';
                 f.email.focus();
             }else if(f.job.value == '==선택==') 
             {
                 alert('직업 선택!');
             }else{
              //올바른, 프로그램에서 원하는 데이터 입력시
              f.submit();
          }
       }//validateCheck()

   </script>
</head>
<%-- userinput.jsp --%>
<body>
  <center>
  <form name="frm" action="userprocess.jsp" method="post">
  <table width="600" border="0" cellpadding="5" >
      <tr bgcolor="#3399cc">
         <td><font size="4" color="white">사용자정보입력</font>
      </tr>
      <tr>
         <td>안녕하세요. 이 페이지를 자유롭게 이용하려면
               먼저 회원가입을 하셔야 합니다.<br>
               아래의 사항들을 빠짐없이 기록해 주세요.
         </td>
      </tr>
  </table>
  <table border="1" cellpadding="5" width="600">
      <tr>
         <td width="100" bgcolor="#ffcccc">사용자ID<font color="red">*</font></td>
        <td colspan="3"><input type="text" name="id"> 
         <input type="button" value="중복확인" onclick="ckid()">
          <font color="blue">(6자리~20자리)</font>
         </td>
      </tr>
      <tr>
         <td width="100" bgcolor="#ffcccc">비밀번호<font color="red">*</font></td>
         <td><input type="password" name="pass"> </td>
         <td width="100" bgcolor="#ffcccc">비번확인</td>
         <td><input type="password" name="pass2"> </td>
      </tr>
      <tr>
         <td width="100" bgcolor="#ffcccc">사용자이름<font color="red">*</font></td>
         <td colspan="3"><input type="text" name="name"> </td>
      </tr>
      <tr>
         <td width="100" bgcolor="#ffcccc">주민번호<font color="red">*</font></td>
         <td colspan="3">
              <input type="text" name="jumin1" size="6" maxlength="6"
                      style="height:23px" >
              -
              <input type="password" name="jumin2" size="7" maxlength="7"
                      style="height:23px" onblur="birthChange()"></td>
      </tr>
      <tr>
         <td width="100" bgcolor="#ffcccc" >생년월일</td>
         <td colspan="3">
         <input type="text" name="year" size="4" maxlength="4">년
         <select name="month">
         <% for(int i=1; i<13; i++){ 
             if(i<10){%>
                <option>0<%=i%></option>  <%}
             else{ %>
                <option><%=i%></option>
            <%}//else
         }//for %>   
         </select>월          
         <select name="day" >
         <c:forEach begin="1"  end="31" var="i">
           <c:if test="${i<10 }"><option>0${i}</option></c:if>
           <c:if test="${i>9 }"><option>${i}</option></c:if>
         </c:forEach>   
         </select>일          
          </td>
      </tr>
      <tr>
         <td width="100" bgcolor="#ffcccc">우편번호<font color="red">*</font></td>
         <td colspan="3">
            <input type="text" name="zip" size="5" maxlength="5"></td>
      </tr>
      <tr>
         <td width="100" bgcolor="#ffcccc">주소</td>
         <td colspan="3"><input type="text" name="addr" size="50"></td>
      </tr>
      <tr>
         <td width="100" bgcolor="#ffcccc">E-Mail<font color="red">*</font></td>
         <td colspan="3"><input type="text" name="email" size="30"></td>
      </tr>
      <tr>
         <td width="100" bgcolor="#ffcccc">직업<font color="red">*</font></td>
         <td colspan="3">
               <select name="job" >
                <% 
                 String jobs[]={"==선택==","학생","공무원","언론/출판","군인/경찰","일반사무직",
                   "영업직","기술/전문직","보건/의료","자영업","주부","기타" };
                  pageContext.setAttribute("jobs", jobs);
                %>
                <c:forEach items="${jobs }" var="jobName">  
                  <option>${jobName }</option>
                </c:forEach>              
               </select>
         </td>
      </tr>
      <tr align="center">
         <td colspan="4">
         <%--
             <script>
                 fuction validateCheck()
                 {
                     if(반값이라면)
                     {
                         alert('입력하세요')
                       }else
                       {
                           frm.submit();
                       }
                 }
             </script>
             =========================이렇게 하거나
             등록 을 submit으로 하고 싶다면
             <script>
                 fuction validateCheck()
                 {
                     if(반값이라면)
                     {
                         alert('입력하세요')
                         return false;
                       }else
                       {
                           return true;
                       }
                 }
             </script>
             <input type = "submit" value="등록"
                 onclick="reuturn validateCheck()">
          --%>
           <input type="button" value="등록" onclick="validateCheck()" >
           <input type="reset" value="취소">
         </td>
      </tr>
  </table>
  </form>
  </center>
</body>
</html>
  • 주민번호 입력하면, onblur 통해서 birthChange() 메소드 호출하고, 해당 메소드 내에서 주민번호 앞자리 jumin1 을 substr 통해 나누고 나눈 값을 통해 다음에 들어가는 생년월일 value 넣어줌

UserInfo.java (t0717.vo안에)

    private String id;
    private String pass;
    private String name;
    private String jumin;
    private String birth;
    private int zip;
    private String addr;
    private String email;
    private String job;
    public String getId()

        //애네들 getter setter, Constructor using field toString 까지 생성

UserInfoDAO.java

package t0717.dao;


import java.sql.SQLException;
import java.util.List;

import t0717.vo.UserInfo;
import com.ibatis.sqlmap.client.SqlMapClient;

import iba.MySqlMapClient;

public class UserInfoDAO {//DAO(Data Access Object) DB전담클래스

    SqlMapClient sqlMap;//XML문서내의 sql문 호출

    public UserInfoDAO() {
       sqlMap = MySqlMapClient.getSqlMapInstance();
    }

    public boolean create(UserInfo user) {
        try {
            sqlMap.insert("userinfo.create", user);
            return true;
        } catch (SQLException e) {
            e.printStackTrace();
        }
       return false;    
    }//create


    public boolean modify(UserInfo user) throws SQLException {
        if(sqlMap.update("userinfo.modify", user) == 1) {
            return true;
        }

        return false;
    }//modify

    public boolean remove(String id) throws SQLException {
        if(sqlMap.delete("userinfo.remove", id) == 1) { //삭제된 행의 갯수가 1이라면
            return true;
        }
        return false;
    }


    public UserInfo select(String id) throws SQLException {//수정폼 (DB ---> HTML)
        return (UserInfo) sqlMap.queryForObject("userinfo.select",id);
    }


    public List<UserInfo> selectAll() {return null;}

    public String selectLogin(String id) throws SQLException {
       return (String) sqlMap.queryForObject("userinfo.selectLogin", id );
    }//selectLogin

    public Integer selectExistId(String id) throws SQLException {
           return (Integer) sqlMap.queryForObject("userinfo.selectExistId", id );
        }//selectExistId
}
  • 어레이와 리스트
    • 공통점 묶어준다, 인덱스
    • 차이점 고정, 가변

userinfo.sql

drop table userinfo;

create table userinfo(
  id      varchar2(20) constraint userinfo_pk primary key,
  pass    varchar2(20) not null,
  name    varchar2(30) not null,
  jumin   varchar2(14) not null, --'960302-1012345'
  birth   varchar2(10), --'1996-03-02'
  zip     number(5)    not null,
  addr    varchar2(300),
  email   varchar2(50)  not null,
  job     varchar2(30)  not null
);

SELECT * FROM USERINFO;
  • 테이블 생성

userinfo.xml(mapper안에 생성시 ibatis)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE sqlMap PUBLIC "-//iBATIS.com//DTD SQL Map 2.0//EN" "http://www.ibatis.com/dtd/sql-map-2.dtd" >
<!-- userinfo.xml -->

<sqlMap namespace="userinfo">
   <typeAlias alias="user" type="t0717.vo.UserInfo"/>

   <insert id="create" parameterClass="user">
      insert into userinfo (id,pass,name,jumin,birth,zip,addr,email,job) 
         values (#id#,#pass#,#name#,#jumin#,#birth#,#zip#,#addr#,#email#,#job#)
   </insert>

   <update id="modify" parameterClass="user">
      update userinfo 
      set pass=#pass#, zip=#zip#, addr=#addr#, email=#email#, job=#job#
      where id = #id#
   </update>

   <delete id="remove" parameterClass="String">
      delete from userinfo
         where id=#id#
   </delete>

   <!-- 매개변수 id,pass에 대한 로그인 처리 -->
   <select id="selectLogin" parameterClass="String"
                            resultClass="String" >
      <!-- select count(*) from userinfo where id=id and pass=pass -->
      select pass from userinfo where id=#id#
   </select>

   <!-- 수정폼(HTML)에 출력할 내용 조회 -->
   <select id="select" parameterClass="String"
                       resultClass="user">
      select id,pass,name,jumin,birth,zip,addr,email,job
      from userinfo
      where id=#id#
   </select>

   <!-- 중복된 아이디 조회 -->
   <!-- 유무만 확인하면 되니까 count사용 -->
   <!-- select 결과가 여러개 나올수 있다. vo 또는 map으로 resultClass를 사용하야 한다. -->
   <select id="selectExistId" parameterClass="String" resultClass="int">
      select count(*)
      from userinfo
      where id=#id#
   </select>

</sqlMap>

userprocess.jsp

<%@page import="t0717.dao.UserInfoDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:useBean class="t0717.vo.UserInfo" id="user"/>
<%--  UserInfo  user = new UserInfo(); --%>
<%  System.out.println("userBean실행==>"+ user);  %>
<% request.setCharacterEncoding("UTF-8"); %>
<jsp:setProperty name="user" property="*" />
<%--   user.setId(request.getParameter("id"));    --%>
<%  System.out.println("setProperty실행==>"+ user);  


    String jumin = request.getParameter("jumin1")
                   +"-"+request.getParameter("jumin2");

    String birth = request.getParameter("year")+"-"+
                   request.getParameter("month")+"-"+
                   request.getParameter("day");
    user.setJumin(jumin);
    user.setBirth(birth);

    System.out.println("setJumin,setBirth실행==>"+ user);
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>가입처리결과</title>
</head>
<body>
  <center>     
  <%
       //폼안의 데이터 얻기: String data = request.getParameter("name속성값");

      UserInfoDAO dao = new UserInfoDAO();
      if(dao.create(user)){
  %>
     <table width="330" border="0" cellpadding="5">
         <tr bgcolor="#3399cc">
           <td><b>[${param.name }]님 가입을 축하합니다.</b></td>
         </tr>
         <tr>
           <td>
              입력하신 내용대로 가입이 완료되었습니다.<br>
              님께서 요청하신 아이디와 패스워드입니다.
              <p align="center">아이디: ${param.id }<br>
                                패스워드: ${param.pass }<br><br>
                 <a href="userconfirm.jsp">로그인 화면</a>                   
              </p>
           </td>
         </tr>
      </table>
    <%}else{ %> 
     <table width="330" border="0" cellpadding="5">
        <tr bgcolor="#3399cc">
          <td><b>가입이 되지않았습니다.<br>
                    입력내용을 다시 한번 확인해 주세요.</b></td>
        </tr>
        <tr>
          <td>            
             <p align="center">입력이 정확한 경우에도 가입이 되지 않는 경우
              관리자에게 문의하여 주십시요.  <br>  
                <a href="javascript:history.back()">이전화면</a>               
             </p>
          </td>
        </tr>
     </table> 
      <%} %>
  </center>
</body>
</html>
  • jsp:useBean 액션 태그

    • <jsp:useBean id="빈이름" class="자바빈클래스이름" scope="범위"/>

    • id : JSP 페이지에서 자바빈 객체에 접글할 때 사용할 이름을 명시한다.

    • class : 패키지이름을 포함한 자바빈 클래스의 완전한 이름을 입력한다.

    • scope : 자바빈 객체가 저장될 영역을 지정한다. (page, request, session, application 중 하나, 기본값은 page)

    • JSP 페이지에서 사용할 자바빈 객체를 생성하고 지정한 영역에 저장을 한다.

    • 지정한 영역에 이미 id 속성에서 지정한이름의 속성 값이 존재할 경우 객체를 새로 생성하지 않고 기존에 존재하는 객체를 그대로 사용한다.

    • 각 scope의 영역별로 공유할 데이터를 쉽게 저장할 수 있다.

    출처: https://gangzzang.tistory.com/entry/JSP-액션태그-jspuseBean [갱짱.study]

sqlMapConfig.xml 에 xml파일 등록!

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE sqlMapConfig PUBLIC "-//iBATIS.com//DTD SQL Map Config 2.0//EN" "http://www.ibatis.com/dtd/sql-map-config-2.dtd" >
<sqlMapConfig>
<!-- sqlMapConfig.xml
     ==> iBatis프레임워크(sqlMapper프레임워크)에 대한 환경설정
 -->
  <properties resource="./iba/conn.properties"/>
  <settings
      cacheModelsEnabled="true"
      enhancementEnabled="true"  
      lazyLoadingEnabled="true"
      maxRequests="30"
      maxSessions="25"
      maxTransactions="10"
      useStatementNamespaces="true"
  />

  <transactionManager type="JDBC">
     <dataSource type="SIMPLE">
        <property name="JDBC.Driver" value="${driver}"/>
        <property name="JDBC.ConnectionURL" value="${url}"/>
        <property name="JDBC.Username" value="${user}"/>
        <property name="JDBC.Password" value="${password}"/>
     </dataSource>
  </transactionManager> 

  <!-- ★  앞으로 sql문 추가되는 xml파일을 등록 ★  -->
  <sqlMap resource="./mapper/counter.xml"/>
  <sqlMap resource="./mapper/emp.xml"/>
  <sqlMap resource="./mapper/userinfo.xml"/>


</sqlMapConfig>
  • 앞으로 귀찮으면
  • < sqlMap resource="./mapper/*.xml"/> 해도 됨.

service.jsp (로그인 성공 후 접속 할 수 있는 페이지)

<%@ 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>
<%-- service.jsp --%>
 <%
       String login = (String)session.getAttribute("login");

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

 %>
 <body>     
     <center>
     <p>    
        <img src="<%= application.getInitParameter("imgPath")%>/ebi.gif" width="400" height="300">
        <img src="${initParam.imgPath }/ebi.gif" width="400" height="300">
     </p>
     <p class="normalbold">이 페이지는 사용자 인증을 받아야 볼 수 있죠!</p>    
     <p class="normal">감사합니다....</p>
     <p class="normal"><a href="userconfirm.jsp">로그아웃</a></p>
     </center>
 </body>
</html>
  • confirmprocess.jsp 에 로그인 성공시 성공 정보(login)을 success로 남기는 세션정보를 추가해야 한다.

confirmprocess.jsp

<%@page import="t0717.dao.UserInfoDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>로그인 처리</title>    
   <script type="text/javascript">
       function movePage(upDel){ //upDel에는 up 또는 del이 들어감
          if(upDel=='up')
          location.href='modifyuser.jsp?id=${param.id}';  // 수정페이지이동
          else
          {
                   if(confirm('정말탈퇴하시겠습니까?'))
                   {
                      location.href='deleteid.jsp?id=${param.id}';  // 삭제처리페이지이동
                   }
          }
       }
   </script>
</head>
<body>
   <%
        String id = request.getParameter("id");
        String pass =  request.getParameter("pass");

        UserInfoDAO dao = new UserInfoDAO();
        String dpass = dao.selectLogin(id);
        if(dpass != null){//아이디 O
            if(dpass.equals(pass)){//아이디O , 패스워드 일치

                //로그인 성공 정보를 세션에 남기기 (세션 로그인)
                  session.setAttribute("login", "success");
                  //session.setAttribute("loginID", id);
                %>
        <table width="280" border="0" cellpadding="5">
              <tr bgcolor="#3399cc">
                <td><b>로그인 성공</b></td>
              </tr>
              <tr>
                <td>
                   입력하신 아이디와 패스워드를<br> 확인했습니다.
                   <br><br>                 
                    <input type="button" value="회원정보수정" onclick="movePage('up')">

                    <input type="button" value="회원탈퇴" onclick="movePage('del')" >
                   <br><br>
                   <a href="service.jsp">서비스화면</a>
                </td>
              </tr>
           </table>
            <% }else{//아이디O , 패스워드 불일치%>
        <table width="280" border="0" cellpadding="5">
              <tr bgcolor="#3399cc">
                <td><b>로그인 실패</b></td>
              </tr>
              <tr>
                <td>
                   패스워드가 틀립니다.<br>
                   패스워드를 다시한번 확인해 주시기 바랍니다.<br><br>
                   <a href="userconfirm.jsp">로그인화면</a>
                </td>
              </tr>
           </table>           
            <% }
        }else{//아이디 X%>
        <table width="280" border="0" cellpadding="5">
              <tr bgcolor="#3399cc">
                <td><b>로그인 실패</b></td>
              </tr>
              <tr>
                <td>
                   다시 아이디를 확인하세요.<br>
                   만약 가입하지 않으신 경우 신규가입을 하시기 바랍니다.<br><br>
                   <a href="userinput.jsp">신규가입</a>
                </td>
              </tr>
          </table>    

        <% }%>
  </center>
</body>
</html>
  • 조건( 로그인 성공, 실패 (아이디틀림, 비밀번호 틀림) ) 에 따라 뜨는 페이지를 테이블을 설정하게 함.
  • 로그인 성공시 세션 정보를 남김

service.jsp

<%@ 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>
<%-- service.jsp --%>
 <%
       String login = (String)session.getAttribute("login");

       if(login ==null  || !login.equals("success")){//로그인 하지 않았다면!!
           response.sendRedirect("userconfirm.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>
  • 이건 전에 만들 서비스 창

modifyuser.jsp

<%@page import="t0717.vo.UserInfo"%>
<%@page import="t0717.dao.UserInfoDAO"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>사용자수정</title>
    <script type="text/javascript" src="/TomTest/js/check.js"></script>
</head>
<%
    UserInfoDAO dao = new UserInfoDAO();
    UserInfo user = dao.select(request.getParameter("id"));
    System.out.println("user>>>"+ user);
    String []jumin=user.getJumin().split("-");//"960302-2012345"
                                              //{"960302","2012345"}
    String []birth = user.getBirth().split("-");//"1996-03-02"
                                               //{"1996","03","02"}

    pageContext.setAttribute("user", user);



%>
<body>
    <center>
        <form name="frm" action="modifyprocess.jsp" method="post">
            <table width="600" border="0" cellpadding="5">
                <tr bgcolor="#3399cc">
                    <td><font size="4" color="white">사용자정보수정</font>
                </tr>
            </table>
            <table border="1" cellpadding="5" width="600">
                <tr>
                    <td width="100" bgcolor="#ffcccc">사용자ID</td>
                    <td colspan="3">
                        <%-- <input type="text" name="id" value="<%= user.getId()%>"></td> --%>
                        <input type="text" name="userid" value="${user.id }" disabled>
                        <input type="hidden" name="id" value="${user.id }"> 
                        <%-- disabled는 못받아와, 그래서 hidden씀 --%>

                    </td>

                </tr>
                <tr>
                    <td width="100" bgcolor="#ffcccc">비밀번호</td>
                    <td><input type="password" name="pass" value="${user.pass }">
                    </td>
                    <td width="100" bgcolor="#ffcccc">비번확인</td>
                    <td><input type="password" name="pass2" value="${user.pass }">
                    </td>
                </tr>
                <tr>
                    <td width="100" bgcolor="#ffcccc">사용자이름</td>
                    <td colspan="3"><input type="text" name="name"
                        value="${user.name }" readonly></td>

                </tr>
                <tr>
                    <td width="100" bgcolor="#ffcccc">주민번호</td>
                    <td colspan="3"><input type="text" name="jumin1" size="6"
                        maxlength="6" style="height: 23px" value="<%= jumin[0]%>" readonly>
                        - <input type="password" name="jumin2" size="7" maxlength="7"
                        style="height: 23px" value="<%= jumin[1]%>" readonly></td>
                </tr>
                <tr>
                    <td width="100" bgcolor="#ffcccc">생년월일</td>
                    <td colspan="3"><input type="text" name="year" size="4"
                        maxlength="4" value="<%= birth[0]%>" disabled>년 <select
                        name="month" disabled>
                            <option><%=birth[1] %></option>
                    </select>월 <select name="day" disabled>
                            <option><%=birth[2] %></option>
                    </select>일</td>
                </tr>
                <tr>
                    <td width="100" bgcolor="#ffcccc">우편번호</td>
                    <td colspan="3"><input type="text" name="zip" size="5"
                        maxlength="5" value="${user.zip }"></td>
                </tr>
                <tr>
                    <td width="100" bgcolor="#ffcccc">주소</td>
                    <td colspan="3"><input type="text" name="addr" size="50"
                        value="${user.addr }"></td>
                </tr>
                <tr>
                    <td width="100" bgcolor="#ffcccc">E-Mail</td>
                    <td colspan="3"><input type="text" name="email" size="30"
                        value="${user.email }"></td>
                </tr>

                <tr>
                    <td width="100" bgcolor="#ffcccc">직업</td>
                    <td colspan="3"><select name="job">
                            <% 
                String jobs[]={"==선택==","학생","공무원","언론/출판","군인/경찰","일반사무직",
                   "영업직","기술/전문직","보건/의료","자영업","주부","기타" };
                for(int i=0; i<jobs.length; i++){
                    if(jobs[i].equals(user.getJob()))
                      out.print("<option selected>"+ jobs[i] +"</option>");
                    else
                      out.print("<option>"+ jobs[i] +"</option>");

                } %>
                    </select></td>
                </tr>
                <tr align="center">
                    <td colspan="4"><input type="button" value="수정" onclick = validateCheck()>
                     <input
                        type="reset" value="취소"></td>
                </tr>
            </table>
        </form>
    </center>
</body>
</html>

modifyprocess.jsp

<%@page import="t0717.dao.UserInfoDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:useBean class="t0717.vo.UserInfo" id="user" />
<% request.setCharacterEncoding("UTF-8"); %>
<jsp:setProperty property="*" name="user" />

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>수정처리</title>
</head>
<body>
    <center>
        <%
             UserInfoDAO dao = new UserInfoDAO();
            try
            {
             if(dao.modify(user)){
         %>
        <table width="280" border="0" cellpadding="5">
            <tr bgcolor="#3399cc">
                <td><b>수정성공</b></td>
            </tr>
            <tr>
                <td>수정이 잘되었습니다<br>
                <br> <a href="service.jsp">서비스페이지</a>
                </td>
            </tr>
        </table>
        <%}else{ %>
        <table width="280" border="0" cellpadding="5">
            <tr bgcolor="#3399cc">
                <td><b>수정실패</b></td>
            </tr>
            <tr>
                <td>정보수정이 되지않았습니다.<br> 입력내용을 다시확인하시고 다시수정하시기 바랍니다.<br>
                <br> <a href="javascript:history.go(-1)">이전화면</a>
                </td>
            </tr>
        </table>
        <%} }

            catch(Exception e)
            { %>
                <table width="280" border="0" cellpadding="5">
            <tr bgcolor="#3399cc">
                <td><b>수정실패</b></td>
            </tr>
            <tr>
                <td>정보수정이 되지않았습니다.<br> 입력내용을 다시확인하시고 다시수정하시기 바랍니다.<br>
                <br> <a href="javascript:history.go(-1)">이전화면</a>
                </td>
            </tr>
        </table>

            <%}

        %>
    </center>
</body>
</html>

confirmid.jsp

<%@page import="t0717.dao.UserInfoDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

    <script>
        //opener : 부모 window객체
        //var id = opener.document.frm.id.value;
        //alert('입력(부모)창의 아이디 : ' + id) 
        //이렇게는 안됨, request 사용하기
    </script>

</head>
<%-- confirmid.jsp --%>
<body>
  <center>
  <%--주소?id=yong 이렇게 나오게 하려면 --%>
  <%
      String id = request.getParameter("id");
      System.out.println("파라미터 아이디 : " + id);
      UserInfoDAO dao = new UserInfoDAO();
      if( dao.selectExistId(id) == 1){ //아이디 존재 하면 1 아니면 0
  %>
          <table width="280" border="0" cellpadding="5">
               <tr bgcolor="#3399cc">
                 <td><b>사용불가능</b></td>
               </tr>
               <tr>
                 <td>
                    이미 사용중인 아이디입니다.<br>
                    다른 아이디를 선택하십시요!!
                 </td>
               </tr>
            </table> 
            <input type="button" value="닫기" onclick="window.close()">  
    <% }else{ %>

            <table width="280" border="0" cellpadding="5">
               <tr bgcolor="#3399cc">
                 <td><b>사용가능</b></td>
               </tr>
               <tr>
                 <td>
                     사용가능한 아이디입니다^^*
                 </td>
               </tr>
            </table> 
                <a href="javascript:self.close()">창닫기</a>
                <% } %>         
   </center>
</body>
</html>

deleteid.jsp

<%@page import="t0717.dao.UserInfoDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
  <center> 
  <%
      String id = request.getParameter("id");
      UserInfoDAO dao = new UserInfoDAO();
      if(dao.remove(id))
      {
          session.invalidate();
      %>
      <table width="280" border="0" cellpadding="5">
              <tr bgcolor="#3399cc">
                <td><b>삭제성공</b></td>
              </tr>
              <tr>
                <td>
                   삭제가 잘되었습니다.<br>
                   이용해 주셔서 감사합니다.
                   <br><br>
                   <a href="service.jsp">서비스페이지</a>
                </td>
              </tr>
    </table>  


      <%    

      }else
      { %>
          <table width="280" border="0" cellpadding="5">
              <tr bgcolor="#3399cc">
                <td><b>삭제실패</b></td>
              </tr>
              <tr>
                <td>
                   삭제가 되지않았습니다.<br>
                   잠시 후 다시 시도해 보시기 바랍니다.<br><br>
                   <a href="javascript:history.go(-1)">이전화면</a>
                </td>
              </tr>
     </table>

      <%}
  %>        
   </center>
</body>
</html>


190715_Day66 JSP 기본객체, 액션, 표현 언어 (EL), 커스텀 태그, JSTL (표준태그 라이브러리)


<복습>

  • Java Server Page(서버스크립트)

    • 서버스크립트 : 서버에서 실행 ( JVM 위에서 실행 )
  • 확장자는 파일명.jsp

    • HTML + Java코드

      • HTML : js, css
      • Java : 기본태그, 기본객체
      <html>
          <head>
              <style>
                  엘리먼트에 대한 CSS정의
              </style>
              <script>
                  자바스크립트 문법( 태그와 스타일에 대한 조작 )
              </script>
          </head>
          <!-- hello.jsp -->
          <body>
              <%! 선언적인 요소 ( 자바클래스의 멤버 요소 ) %>
              <% service()메소드 내에 들어갈 코드 ( 메소드 호출, 조건문, 반복문 ) %>
              <%= 표현식, 출력식 out.print()메소드로 변환 %>
              <%-- JSP주석 (브라우저에 전달 X) --%> 
              <!-- htrml주석(브라우저에 전달 O), HTML주석 안의 JSP태그들은 실행됨!211111111111111111 -->
      
      
      <%!   int su;  %>
      <%   su=200;
           A obj = new A();    %>

      <%= "안녕" %>
      <h3>나 헤딩 타이틀</h3> 
      <% for(int i=0; i<3; i++) {  %>
         <font color=red>안녕<%=i%></font><br>          
      <% } %>          

    </body>
</html>
```

 hello.jsp에 대한 브라우저 (URL)요청

1. hello_jsp.java ( 서블릿 )페이지 유무

2. ```java
   public class hello_jsp extends HttpServlet
   {
       public void init(){}
       public void service(HttpServletRequest request, HttpServletResponse response)
       {
           //브라우저 서비스 -> MVC에서는 Controller
           PageContext    pageContext = new PageContext();
           HttpSession    session = new HttpSession();
           ServletContext application = new ServletContext();
           ServletConfig  config = new ServletConfig();
           JspWriter      out = new JspWriter();
           Object         page = this;
           ===> JSP기본객체

             ------------------작성된 JSP---------------------------    
             out.print("<html>");
             out.print("<head>");
             out.print("<style>");
             out.print("엘리먼트에 대한 CSS정의");
             out.print("</style>");
             out.print("<script>");
             out.print("자바스크립트 문법 (태그와 스타일에 대한 조작)");
             out.print("</script>");
             out.print("</head>");
             out.print("<body>  ");
             out.print("<!-- HTML주석 (브라우저에 전달O), HTML주석안의 JSP태그들은 실행됨!!   -->");
             su=200;
              A obj = new A(); 
              out.print("안녕");
              out.print("<h3>나 헤딩 타이틀</h3>"); 
            for(int i=0; i<3; i++) { 
               out.print("<font color=red>안녕");
               out.print(i);
               out.print("</font><br>");          
            }          
             out.print("</body>");
             out.print("</html>");    


          }//service
       public void destroy(){}
   }

    <body> 
       <%
            int sum=50;
            String name="gildong";
       %>
       <script>
            var str="홍길동";
            document.write(str); // 출력됨 
            document.write(sum); //출력 안됨, sum이 스크립트내에 없네?, null혹은 undifind 
            document.write(<%= sum %>); //출력 됨
            document.write(<%= name %>); //출력 안됨, document.write(gildong); 이 되어버림
            document.write('<%= name %>'); // 출력 됨
            var su=<%=sum%>; // 잘됨~ , 반대의 경우(자바에 뿌려주는)에는 ajax ? 써야 한다.
            document.write('이름='+ <%=name%>); // 안됨, 위에서와 같은 이유. 문자열 + 변수가 된다., '이름='+ ' + <%=name%> + '이렇게 감싸버리면 가능하지만, 그렇게 안하고 '이름 = <%=name%>' 으로 처리한다!         
       </script>
       <%
           out.print(str); //안됨. %가 먼저 실행되는데 여기서는 위의 홍길동은 없는 상태!
       %>
     </body>
   ```

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

종류)

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

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

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

    • 현재 JSP실행에 대한 context정보를 참조하기 위해 사용.
    • 서블릿 클래스에서는 사용하지 못함.
  4. session(javax.servlet.http.HttpSession)
    (세션 == 접속)
    ---> 브라우저를 통해 URL요청을 했을때 서버에서는 각브라우저를 식별할수 있는 번호를 부여!!

           서버측 메모리에 기억하고 있다가 브라우저가 또다른 (URL)요청을 할 때 같은 Client인지 비교.
    • 클라이언트에 대한 세션정보를 처리하기 위해 사용.
    • 비연결형 프로토콜 HTTP
      (한 페이지가 출력된 다음에 서버와 클라이언트 연결은 끊어짐.)에 대해
      마치 계속 연결되어있는 것처럼 해주는 메커니즘.
    • 쿠키는 사용자PC에 세션은 서버에 사용자와 관련된 정보를 보관.
  5. application(javax.servlet.ServletContext)

    • ServletContext를 기억하기

    • 웹서버의 애플리케이션 처리와 관련된 정보를 참조하기 위해 사용.

개발자를 위한 서버정보)
getServerInfo()

  • JSP/서블릿 컨테이너의 이름과 버전을 리턴

    getMajorVersion()

  • 컨테이너가 지원하는 서블릿 API의 Major버전정보 리턴

    getMinorVersion()

  • 컨테이너가 지원하는 서블릿 API의 Minor버전정보 리턴

서버자원정보)
getMimeType(filename)

  • 지정된 파일에 대한 MIME Type을 리턴

    getResource(path)

  • path에 지정된 자원을 URL객체로 리턴

    getResourceAsStream(path)

  • path에 지정된 자원을 InputStream객체로 리턴

    getRealPath(path)

  • path에 지정된 자원의 파일시스템의 실제 경로 리턴

※영역 객체 종류

pageContext

  • pageContext.getRequest();

    request

  • request.getSession();

    session

  • session.getServletContext();

    application

  • ServletContext application = request.getSession().getServletContext();

getContext(path)

  • path에 지정된 자원의 컨텍스트 정보를 리턴

    getRequestDispatcher(path)

  • path에 지정된 자원을 위한 request dispatcher를 생성

로그관련정보)
log(message)

  • 문자열 message의 내용을 로그 파일에 기록.

    log(message, exception)

  • 예외상황에 대한 정보를 포함하여 로그 파일에 기록.

  1. out(javax.servlet.jsp.JspWriter)

    • 사용자에게 전달하기 위한 output스트림을 처리.
    • 브라우저 출력객체

    주요메소드)
    getBufferSize()

    • 출력버퍼의 크기를 byte로 알려준다.
      getRemaining()
    • 남아있는 버퍼의 크기 중 사용 가능한 비율을 알려준다.
      clearBuffer()
    • 버퍼에 있는 컨텐츠를 모두 지운다.
      flush()
    • 버퍼를 비우고 output stream도 비운다.
      close()
    • output stream을 닫고 버퍼를 비운다.
      println(content)
    • content내용을 newline과 함께 출력
      print(content)
    • content내용을 출력
  2. config(javax.servlet.ServletConfig)

    • 현재 JSP에 대한 초기화 환경을 처리하기 위해 사용.
  3. page(java.lang.Object)

    • 현재 JSP페이지에 대한 클래스정보.
  4. exception(java.lang.Throwable)

    • 예외 처리를 위해 사용.

<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>application객체 테스트</title>
</head>
<%-- application_test.jsp --%>
<body>
    <h3>application(ServeltContext) 객체 테스트</h3>
    <hr>
    1. 서블릿 컨테이너 이름 : <%= application.getServerInfo() %><br>
     2. 서블릿 API버전: <%= application.getMajorVersion() %>.<%=application.getMinorVersion() %>
      <br>
      3. 현재 Context(= 현재 웹어플리케이션, 제품, TomTest)의 실제경로(서버의 디스크경로):
      <%= application.getRealPath("") %><br>
      <%
          //application.log("기록할 메시지") --> 필요한 정보 기록
          //문제 ) 어떤 사용자 (ip)가 어떤 요청을 했는지(get,post) 파일로 작성해 보세요.
        String addr = request.getRemoteAddr(); // 접속 클라이언트의 ip정보
        String method = request.getMethod(); // HTTP 요청방식("get", "post")
        String protocol = request.getProtocol(); // Http 요청 버전 : 1.0 1.1
        String uri = request.getRequestURI();

        //서버에서 모니터링한 결과를 기록!!
        String info="▶접속한 클라이언트 정보◀ protocol:"+ protocol+
                  ", 요청방식:"+ method +", 접속 IP:"+ addr+", 경로:"+uri+
                 "("+ new Date() +")";
        System.out.println(info); // 서버콘솔 출력
        out.print(info); // 브라우저 출력
        application.log(info); // 파일 출력 ( 기록 )
      %>    

</body>
</html>


※JSP액션(Action)

  • JSP페이지간 흐름 제어
  • 자바애플릿 지원 - 보안때문에 지원 끝남.
  • 자바빈즈 컴포넌트와 JSP 상호 작용 지원

액션종류)

  1. include : 다른 페이지를 현재 페이지에 포함시킨다.

    <jsp:include page = "포함될 페이지 경로"/>
    jsp: 접두사 prefix

    ​ ===>포함될 페이지를 먼저 실행하고, 그 결과물을 현재페이지에 포함

<%@include file = "포함될 페이지 경로"%>
===> 현재 페이지에 먼저 포함, 전체 컴파일!

★주의)

​ < jsp:include > 의 태그명은 ? include
​ 그럼 jsp: 는 뭔데? 접두사 prefix 라고 한다.
​ 확장자 jsp문서내에 prefix붙는 태그는 전부 자바요소 를 태그로 표현
​ 무슨말이야?? html 의 탈을 쓴 java?

​ JVM에서 실행이 되어지고 시작과 끝이 명확해야 한다.

  • <jsp:include > => 시작태그만 명시하면 에러!

  • <jsp:include ></ jsp:include > (O)

  • <jsp:include /> (O)

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>include_action 테스트</title>
    </head>
    <!-- include_action -->
    <body>
       <h3>include_action.jsp</h3>
       <hr color="red">
       <%
           int su=300;
       %>
    
       <%-- <jsp:include page="application_test.jsp"/> --%>
       <%@include file="application_test.jsp" %>
    </body>
    </html>
  1. forward : 현재페이지의 제어를 다른 페이지로 전달( 페이지 이동 )

    • 형식)

      <jsp:forward page="이동할경로"/>
      <%@ 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>
      <%-- forward_action.jsp --%>
      <body>
          <h3>forward_action.jsp</h3>
          <jsp:forward page="application_test.jsp"/>
      </body>
      </html>
  1. useBean : 클래스 객체를 생성하고 사용할 범위를 설정할 때 지정.

    • 형식)

      <jsp:useBean class="pack(package명).A(클래스)" id='obj'/>
              ===> 의미 : A obj = new A();
      <% A obj = new A(); %> <!-- 에러발생 중복 생성 -->
      
      <jsp:useBean class = "pack.A" id = 'obj' scope="page"/>
      <jsp:useBean class = "pack.A" id = 'obj' scope="request"/>
          <%
              A obj;
              if(request영역에 obj라는 A클래스 객체가 존재하지 않는다면)
              {
                  obj = new A();
              }else{
                  obj = request.getAttribute("obj");
              }
          %>
      
      <jsp:useBean class = "pack.A" id = 'obj' scope="session"/>
      <jsp:useBean class = "pack.A" id = 'obj' scope="application"/>
      
      <영역 scope속성>
          scope='page'    (기본값) : 현 페이지에서만 객체 사용
          scope='request' : request호출 관계에 있는 페이지간의 객체 공유
                          (forward를 통한 페이지 이동을 했을 경우)
          scope='session' : 'sesstion'
                          동일브라우저(같은 세션간)내에 표시되는 페이지간의 객체 공유
          scope='application'
                          동일 서버내 ( 동일 Context-TomTest )에서 서비스 되어지는 모든 페이지간의 객체 공유
  1. setProperty : useBean의 세터메소드 호출

    • 형식)

      <jsp:setProperty name = "useBean에서 사용한 id"
                      property = "속성명" value = "데이터"/>
  2. getProperty :useBean의 게터메소드

    • 형식)

      <jsp:getProperty name="useBean에서 사용한 id"
                       property="속성명" />
  • 예)

    <jsp:useBean class = "test.Person" id="p"/>
            -->> test.Person p = new test.Person();
    <jsp:setProperty name ="p" property = "age" value="13"/>
            -->> p.setAge(Interger.parseInt("13"));
    <jsp:getProperty name = "p" property = "age"/>
            -->> out.print(p.getAge());

<!-- Person.java 만들고 나서-->
<%@page import="t0715.Person"%>
<%@ 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>
<%-- useBean_action.jsp 
     <useBean>태그는 특정 클래스의 객체 생성을 하는 역할.
--%>
<jsp:useBean class="t0715.Person"  id="p" scope="page"/> 
<%
    //Person p = new Person(); ==> 에러발생!! 중복된 지역변수 p를 사용하였음!!
    //즉, <jsp:useBean>의 id속성은 변수명으로 사용됨
%>  
<body>
  <h3>useBean_action.jsp</h3>
  <hr>
  <%
     p.setName("나길동");
  %>
  <jsp:setProperty property="age" name="p" value="13"/>
  <%--  p.setAge(13); --%>
  <jsp:setProperty property="job" name="p" value="학생"/>
  <%= p %>
  <br>
  이름1: <jsp:getProperty property="name" name="p"/><br>
  이름2: <%= p.getName() %><br>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <jsp:useBean class="t0715.Person"  id="p" scope="session"/> <!-- 여기서 scope 바뀔때마다 전달 유무가 바뀜. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>useBean액션 영역 테스트</title>
</head>
<!-- useBean_action_scope.jsp -->
<body>
    <h3>useBean 액션 영역 테스트</h3>
  <% 
     p.setName("나길동");

     //move.jsp이동
     request.getRequestDispatcher("move.jsp")
            .forward(request, response);
  %>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <jsp:useBean class="t0715.Person"  id="p" scope="session"/> 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
    <%-- move.jsp --%>
<body>
  <h3>move.jsp</h3>
  <hr>
      사람정보 : <%= p %>
</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>
</head>
<!-- useBean_action2.jsp -->
<body>
    <h3>사람정보등록</h3>
    <hr>
    <form action="insertProcess.jsp" method="post">
        이름 : <input type="text" name="name"><br>
        나이 : <input type="text" name="age"><br>
        직업 : <input type="text" name="job"><br>
            <input type="submit" value="등록">
    </form>

</body>
</html>
<%@page import="t0715.Person"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

    <jsp:useBean class = "t0715.Person" id="vo"/> <!-- 추가 -->
    <% request.setCharacterEncoding("UTF-8"); %>


    <jsp:setProperty property="*" name="vo"/>


    <%-- 
    <jsp:setProperty property = "age" name="vo"/> 
    => vo.setAge(Integer.parseInt(request.getparameter("age")));
     --%> <!-- 추가 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>입력처리</title>
</head>
<%-- insertProcess.jsp --%>
<body>
    <h3>DB입력처리</h3>
    <hr>
    <%
    /*
    여지것 이렇게 해왔었지만! 이젠 달라
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        String job = request.getParameter("job");
        Person vo = new Person();
        vo.setName(name);
        vo.setAge(Integer.parseInt(age));
        vo.setJob(job);
    */
        //PersonDao dao = new PersonDao();
        //dao.insert(vo);

    out.print(vo);
    %>
</body>
</html>

< < 표현 언어 > > Expression Language : EL

  • 처음 JSTL ( JSP Standard Tag Library)에서 소개

  • 현재 JSP 스펙에 포함되어 사용

  • 자바빈즈 속성 값을 보다 쉽고 제약을 덜 받은 방법으로 사용하기 위해 나온 것

  • JSP파일이 useBean액션태그나 표현식등으로 복잡해 지는 것을 막고 MVC에서 일종의 템플릿 코드처럼 사용할 수 있도록 해줌.

  • 문법)

    - 표현언어는 '$'로 시작
    - 모든 내용을 '{표현식}'과 같이 구성
    --> ${    } ※참고 : <script> $ (     )</script>
        -----                    ------
        Java { 중괄호 } EL        JavaScript ( 소괄호 ) jQuery
    - 표현식에는 기본적으로 변수명 혹은 ' 키명.속성명' 구조를 갖는다.
                                    영역객체.setAttribute("키값", vo)
                                    request.setAttribute("p", vo)
                                    ${p.name}
    - 표현식에 부가적으로 숫자, 문자열, boolean, null과 같은 상수값도 가능
    - 표현식에는 기본적인 연상 가능
    <%
        int su - 10;
    %>
    <script> var i=<%= su %>; </script>
    <input type = text value =<%= su%> name = age>
    
    <% <%=su%> s {} %> 불가능, 둘다 html 내에 써야 한다.
  • 속성접근)

    ${person.name}   또는  ${person["name"]}  :  out.print(person.getName()) 
    ${row[0]} : row라는 이름의 컬렉션의 첫번째 아이템
    
    ---> 데이터를 영역에 저장
    request.setAttribute("p" , new Person("길동"));
    
    ---> 데이터를 영역에서 조회
    Person p = (Person)request.getAttribute("p");
    out.print(p.getName());
    
    ---> 위의 두 줄을 EL로 표현  : ${p.name}
    
    ${sessionScope.p.name}   request와 session영역에 공통적으로 'p'키값이 정의  
  • 내장객체)

    pageScope, requestScope, sessionScope, applicationScope,
    param, paramValues, header, headerValues, initParam, cookie, pageContext         
    
           <%
           out.print(데이터);  ----> JSP페이지내에서는 out에 대한 자료형 선언을 하지 않았다.
           %>
    
    ${ param.username }
    ----->  String name = request.getParameter("username");
    out.print(name);             

<%@page import="t0715.Person"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EL테스트</title>
</head>
<%--el_test.jsp --%>
<body>
    <h3>EL (표현언어 = 출력언어)테스트</h3>
    <%
        //영역에 데이터 저장 - > MVC에서는 주로 Contoller가 담당!
        //영역객체.setAttribute(String key, Object value);
        pageContext.setAttribute("k1","기묘진");
        request.setAttribute("k2","이진뿐"); //자주사용
        session.setAttribute("k3", "이비키"); //자주사용
        application.setAttribute("k4", "대한민국");

        request.setAttribute("k5", new Person("김유신", 14, "화랑"));
        session.setAttribute("k5", "송혜교");
        application.setAttribute("k5", "박보검");
        int su=33;
    %>
    <h3>ExpresstionLanguage(표현언어EL = 출력언어) 테스트 </h3>
    <hr>
    k1: <%= pageContext.getAttribute("k1") %><br>
    k2: <%= request.getAttribute("k2") %><br>
    k3: <%= session.getAttribute("k3") %><br>
    k4: <%= application.getAttribute("k4") %><br>
    k5(request): <%= request.getAttribute("k5") %><br>
    k5(session): <%= session.getAttribute("k5") %><br>
    k5(application):<%= application.getAttribute("k5") %><br>
    su: <%= su %><br>>
    존재하지 않는 k6? : <%= request.getAttribute("k6") %>
    <hr color="red">
    K1 : ${k1 }<br>
    K2 : ${k2 }<br>
    K3 : ${k3 }<br>
    K4 : ${k4 }<br>
    K5 : ${k5 }<font color=red>영역구분없이 키값만 출력하면 page, request, session, application 순으로 가장 가까운 데이터 출력</font><br>
    K5(request) : ${request.k5 }<br>
    K5(session) : ${session.k5 }<br>
    K5(application) : ${applicationScope.k5 }<br>
    su(영역객체X, 지역변수) : ${su }<font color = blue>지역변수는 사용불가<br>
                                                su를 키값으로 인식</font><br>
    K6(정의되지 않은 키값) : ${k6 }<font color=" blue">없는 키값은 빈문자열 출력</font> <br>
     <hr color="orage">
  <h3>입력폼</h3>
  <form action="print.jsp" method="post">
        이름: <input type="text" name="username"><br>
        나이: <input type="text" name="userage"><br>
     <button type="submit">전송</button>
  </form>
    </body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>파라미터 데이터 출력</title>
</head>
<%-- print.jsp 
     <form action='print.jsp'>
        <input name='username'>  ==> 파라미터
     </form>

     print.jsp?age=13  ==> 파라미터
--%>
<body>
   <h3>파라미터 데이터 출력</h3>
     이름 : <%= request.getParameter("username") %><br>
     나이 : <%= request.getParameter("userage")  %><br>
     아무거나(존재하지 않는 파라미터): <%= request.getParameter("any")%><br>
  <hr color="blue">
   이름 : ${param.username }<br>
   나이 : ${param.userage}<br>
  아무거나 : [[${param.any }]]
     <%--
         ${a }    ---->  영역에서 a키를 찾아서  키에 저장된 데이터를 바로 출력

         ${a.b }  ---->  a키에 저장된 값은 반드시 클래스여야만 함!!
                                              만약 A클래스가 저장되어 있다면  A클래스내의 getB()메소드의 리턴값을 얻어서 출력                                              

         ${param.a}  ----> 폼태그내의 name속성에 저장된 값을 기준으로 데이터 얻고  화면에 출력
      --%>     

</body>
</html>

<커스텀 태그> Custom(사용자 정의) Tag

  • JSP페이지에서 반복적인 프로그램 로직을 캡슐화하기 위해 고안.

  • 기본적으로 제공되는 태그 이외에 사용자가 확장한 태그라는 의미에서
    붙여진 이름.

    커스텀태그 사용이유)

  1. 비즈니스 로직으로부터 화면 표현을 분리

  2. 비즈니스 로직의 캡슐화

  3. 보다 손쉬운 웹 페이지 제작

    종류)
    JSP 1.2커스텀태그
    JSP 2.0커스텀태그

<JSP 1.2커스텀태그 요소>

  1. 태그 핸들러 클래스(Tag Handler Class) .class
    • 자바 클래스 파일로 태그의 동작을 구현해놓은 파일.
  2. 태그 라이브러리 기술자(Tag Library Descriptor) .tld (XML문법)
    • 태그이름등 태그 정보 및 태그 핸들러 클래스와의 관계를 기술.
  3. TagSupport
    • doStartTag() : 시작태그를 만날 때 호출
    • doEndTag() : 끝태그를 만날 때 호출
    • doAfterBody() : 태그바디가 있을 때 처리를 위해 자동호출

예제) WEB-INF/classes/MyTagHandler.class
WEB-INF/tld/myTag.tld

<< TLD스키마 >>

  • WEB-INF 밑에 tld 만들고 xml file 생성
  • MyTag.tld 로 이름 짓고 아래 부분 넣기
<taglib xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd"
    version="2.0">
package t0715;

import java.io.IOException;

import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.TagSupport;

public class MyTagHandler extends TagSupport{
    //태그를 만났을때 실행할 (로직적인)코드를 기술

    @Override
    public int doStartTag() throws JspException {
        JspWriter out = pageContext.getOut(); //브라우저 출력객체

        try {
           for(int i=0; i<10; i++) {
             if(i%2==0)
               out.print("<font color=blue>안녕,커스텀태그~!!</font>");
             else
               out.print("<font color=red>안녕,커스텀태그~!!</font>");
             out.print("<br>");
           }
        } catch (IOException e) {
            e.printStackTrace();
        }

        return SKIP_BODY;//엘리먼트의 본문이 없는 경우  ----> 내용없음  ---> 빈태그
    }//doStartTag
}
<?xml version="1.0" encoding="UTF-8"?>
<taglib xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd"
    version="2.0">
    <!--  WEB-INF/tld/myTag.tld -->
    <description>커스텀태그테스트</description>
    <tlib-version>1.2</tlib-version>
    <short-name>MsgTag</short-name>

    <!--  태그정의(태그이름, 매핑할 클래스 -->

   <tag>
      <name>gildong</name>
      <tag-class>t0715.MyTagHandler</tag-class>
      <body-content>empty</body-content>
   </tag>

      <tag>
      <name>lime</name>
      <tag-class>t0715.MyTagHandler</tag-class>
      <body-content>empty</body-content>
   </tag>

   </taglib>

이제 테스트

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

<%--JSP 1.2 방식의 커스텀태그 --%>
<%@taglib uri="/WEB-INF/tld/myTag.tld" prefix="my" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>커스텀태그</title>
</head>
<!-- customTag_test.jsp                                                                                                                                  -->
<body>
  <h3>커스텀태그 테스트</h3>
  <hr>
  <my:gildong/>
  <hr>
  <my:lime/>
</body>
</html>

<JSP 2.0커스텀태그 요소>

  1. 태그파일 .tag
    • 몇가지 제약사항을 제외하고 대부분 JSP파일과 동일한 구성을 갖음.
    • WEB-INF/tags 폴더에 저장.

예) WEB-INF/tags/juwon.tag ----------> 파일명 == 태그명, 태그에 매핑할 로직 정의

juwon.tag

<%@tag import="t0715.Product"%>
<%@ tag language="java" pageEncoding="UTF-8"%>

<%@attribute name ="border" %>
<%@attribute name ="color" %>
<!--
    WEB-INF/tags/juwon.tag(JSP문법과 흡사)
    저장파일명 == 태그명
    ==> HTML + JAVA
 -->

 <h3><jsp:doBody/></h3>
 <%
     Product p = new Product();
     String []list = p.getProductList();
 %>
<table border="${border }" bgcolor="${color }" cellpadding="5">
   <%
      for(int i=0; i<list.length; i++){
          out.print("<tr><td>"+list[i]+"</td></tr>");
      }
   %>
 </table>

Product.java

package t0715;

public class Product
{
    String []productList = {"item1", "item2", "item3", "item4", "item5"};

    public String[] getProductList (){
        return productList;
    }
}

customTag_test.jsp

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

<%--JSP 1.2 방식의 커스텀태그 --%>
<%@taglib uri="/WEB-INF/tld/myTag.tld" prefix="my" %>

<%--JSP 2.0 --%>
<%@taglib tagdir = "/WEB-INF/tags" prefix="you" %>
<%-- taglib지시어는 확장된 태그(커스텀태그)를 현재문서에서 사용하고자 할 때 기술 --%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>커스텀태그</title>
</head>
<!-- customTag_test.jsp                                                                                                                                  -->
<body>
  <h3>커스텀태그 테스트</h3>
  <hr>
  <my:gildong/>
  <hr>
  <my:lime/>
  <hr color = pink>
  <you:juwon border="10" color="pink">상품목록</you:juwon>
</body>
</html>

JSP Standard Tag Library 표준태그 라이브러리

  • JSP페이지에서 많이 사용되는 논리적인 판단, 반복처리, 포맷처리를 위한
    커스텀 태그를 표준으로 만들어서 정의한 것.
  • http://search.maven.org
    --------> 검색: jstl

종류)

  1. 코어(변수지원, 흐름제어, URL처리)
  1. XML (XML코어, 흐름제어, XML변환)
  1. 국제화 (지역, 메시지형식, 숫자 및 날짜 형식)
  1. 데이터베이스(SQL)
  1. 함수(컬렉션 처리, String 처리)

<코어태그>

  1. 변수지원 : set, remove
    JSP페이지 안에서 ----->  <c:set>   <c:remove>  
  2. 흐름제어 : if, choose, forEach, forTokens
  3. URL처리 : import, redirect, url
  4. 기타 : catch, out

jstl-1.2.jar 파일 빌드패스 하고

input_age.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>나이입력</title>
</head>
<%--input_age.jsp --%>
<body>
  <h3>나이입력</h3>
  <hr>
  <form action="jstl_test.jsp">
     나이: <input type="text" name="age"><br>
     <button>입력</button>
  </form>
</body>
</html>

jstl_test.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib  uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSTL테스트</title>
</head>
<%-- jstl_test.jsp --%>
<body>
    <h3>JSTL(JSP Standard Tag Library)테스트</h3>
    <hr>
    <%--<% if(조건식){} %> --%>
    <c:if test="true">
        HTML마크업, text<br>
        조건식 참일때 실행<br>
    </c:if>

    <c:if test="some text">
        Some Text
    </c:if>

    <c:if test="${2<3 }">
        2는 3보다 작다 <br>
    </c:if>

    <%-- 나이테스트 --%>
    <c:if test="${param.age < 20 }">
        <font color="pink">나이가 20미만입니다!!</font>
    </c:if>

    <c:if test="${param.age >= 20 }">
        <font color="pink">나이가 20이상입니다!!</font>
    </c:if>

    <c:if test="${param.age >= 20 && param.age < 30 }">
        <font color="blue">20대입니다.</font><br>
    </c:if>
    <hr>
    <%--나이 20대 , 30대 체크 --%>
    <c:choose> <%-- if~else if~else문과 유사 --%>
        <c:when test="${param.age<20 || param.age>39 }">
            <font color = "blue">나이가 20대 또는 30대가 아닙니다.</font><br>
        </c:when>

        <c:when test="${param.age < 30}">
            <font color = "blue">나이가 20대입니다.</font><br>
        </c:when>

        <c:otherwise>
            <font color = "blue">나이가 30대입니다.</font><br>
        </c:otherwise>
    </c:choose>
    <hr>
    <h4>forEach테스트</h4>

    <%-- 
    <c:forEach begin ="0" end ="10" var = "i" varStatus="stat" step="2">
        카운트 : ${stat.count},
        JSTL 안녕~ + ${i }<br>
    </c:forEach>
    --%>

        <%-- JSTL 안녕~! 홀수줄은 빨강, 짝수줄은 파랑으로 총 10줄을 출력하시오 --%>
        <c:forEach begin ="1" end ="10" var = "i" varStatus="stat">
            <c:if test= "${stat.count % 2 == 1}">
            <font color="red">하이</font><br>
            </c:if>

            <c:if test= "${stat.count % 2 == 0}">
            <font color="blue">안녕</font><br>
            </c:if>
        </c:forEach>
</body>
</html>

'클라우드 기반 웹 개발자 과정 공부' 카테고리의 다른 글

190712_Day65 JSP  (0) 2019.07.12
190711_Day64 JSP  (0) 2019.07.11
190710_Day63 JSP  (0) 2019.07.10

190713_Development Tools 카테고리 시작.

 

Slack


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

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

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