[Day3] JSP/Servlet 3 - request객체 파라미터, 리다이렉트, 포워딩, jstl, get/post

[Day3] JSP/Servlet 3 [12/6]

 

request 객체 파라미터 

p 76  request 객체의 파라미터 읽기 메서드

    *** String      request.getParameter()  

    *** String[]   request.getParameterValues()

    

    Enumeration getparameterNames()

    Map               getParameterMap()

 

jsp

<form action="ex05_ok.jsp" method="post">
<!-- <form action="ex05_ok.jsp" method="get"> -->
   이름 : <input type="text" name="name" placeholder="이름을 입력하세요"><br>
   성별 : 
     <input type="radio" name="gender"  value="m" checked="checked"> 남자
     <input type="radio" name="gender"  value="f">여자<br>
    
   좋아하는 동물 :
      <input type="checkbox" name="pet" value="dog" checked="checked">개  
      <input type="checkbox" name="pet" value="cat">고양이  
      <input type="checkbox" name="pet" value="pig" checked> 돼지
      <br>    
   <input type="submit">
</form>

ok.jsp

   request.setCharacterEncoding("UTF-8");

    // 스크립트릿 : 자바코딩.
    // ?name=홍길동
    String name = request.getParameter("name");
    String gender = request.getParameter("gender"); // "m"  /  "f"
    
    // pet=dog&pet=cat
    String [] pets = request.getParameterValues("pet");

> 이름 : <%= name %><br>
> EL 이름 : ${  param.name }<br>
> 성별 : <%= gender.equals("m")? "남자" :"여자" %><br>
> 좋아하는 동물 : <%= Arrays.toString(pets) %><br>
<hr>
<%
	// request.getParameterNames(): 설명
	// ?[name]=admin&[gender]=m&[pet]=dog&pet=dog
	
	Enumeration<String> en = request.getParameterNames();
	while(en.hasMoreElements()){
		String pname = en.nextElement();
%>
	<li><%= pname %></li>
<%
	}
%>

<hr>
<ol>
<%
    //  pname,  pvalue 
	Map<String, String[]> map = request.getParameterMap();
	Set<Entry<String, String[]>> set = map.entrySet();
	Iterator<Entry<String, String[]>> ir = set.iterator();
	while(ir.hasNext()){
		Entry<String, String[]> entry = ir.next();
		String pname = entry.getKey();
		String[] pvalue = entry.getValue();
		%>
		<li><%= pname %> : <%= Arrays.toString(pvalue) %></li>
		<% 
	}
%>

---

    p 88 ~ request 기본 객체,  요청 헤더 정보 처리.

    p 89 표 3.6 헤더 메서드

    ***   String getHeader(String name)  지정한 이름의 헤더 값을 반환

    En       getHeaders(String name)     지정한 이름의 헤더 목록 반환

    ***  En       getHeaderNames()          모든 헤더 이름을 반환

    int       getIntHeader(String name)   지정한 헤더의 값을 정수로 반환

    long     getDateHeader( String name) 지정한 헤더의 값을 시간값으로 반환( 1970.1.1 ~  ms)

 

요청 헤드 목록 출력

 <ol>
 <%
    Enumeration<String>  en = request.getHeaderNames();
    while( en.hasMoreElements() ){
    	String headerName =  en.nextElement();
    	String headerValue = request.getHeader(headerName);
%>
     <li><%= headerName %> : <%= headerValue %></li>
<%    	
    } // while
 %>  
 </ol>

---

    p 90 JSP 기본  9가지 객체 : request  요청 객체

              1) 헤더 정보 읽기.

              

    p 90 JSP 기본객체 : [ response 응답 객체 ] 기능

* request 기본 객체가 웹 브라우저가 전송한 요청 정보를 담고있다면, reponse 기본 객체는 웹 브라우저에 보내는 응답 정보를 담는다.

 

 

    p 90 JSP 기본객체 : [ response 응답 객체 ] 기능

       1) 헤더 정보 입력(설정)

          p91  표 3.7  헤더 정보 추가 메서드

addDateHeader( name, long)            addHeader(name, value);           addIntHeader(name, value)                      setDateHeader()           setHeader()           setIntHeader()                      boolean  containsHeader( name )

          

          

       2) *** 리다이렉트(redirect) 하기  ***   p 93

          - 페이지 이동하는 기능

          - 사전적 의미 : 다른 방향으로 다시 보내다(전송하다)

             그림 3.19         리다이렉트 

               ㄱ.       클라이언트      <-      응답(지시)

                ㄴ.      클라이언트                요청  ->  

          -  웹 서버가 웹브라우저에게 다른 페이지로 이동하라고 응답을 하는 기능   

-> 클라이언트 웹브라우저 A가 B에게 요청  -> B가 C한테 요청하라고 말하는 지시가 바로 일어나지 않고 -> B가 다시 클라이언트에 갔다가 다시 C에게 요청 (리다이렉트)

 

          예) ex03.jsp                   인증 요청  ->      ex03_ok.jsp 

              아이디                                                  회원테이블         /아이디/비밀번호 확인

              비밀번호                                               인증 O -> 요청 페이지, 메인페이지 이동

                                                                          인증 X -> 로그인 페이지 이동

              [로그인]    

 

-jsp-

<%
    // 로그인 성공 ex03.jsp?id=admin&ok
    // 로그인 실패 ex03.jsp?error
   
    String ok = request.getParameter("ok");
    String error = request.getParameter("error");
    
    if(  ok != null ){  // 로그인 성공
%>
	<script>
	$(function (){
     alert("로그인 성공");
	});
    </script>
<%    
    }else if( error != null ){  // 로그인 실패
%>
    	<script>
    	 $(function (){
    		 alert("로그인 실패");
             $(":text").eq(0)
                                 .focus()
                                 .select();
    	 });         
        </script>
  <%     	
    }
%>

- script 태그는 서버가 아니라 응답하는 브라우저가 실행하는 것이기 때문에 퍼센트 밖에 둬야함!

- function으로 넣는 이유 : form 태그가 아래에 있기 때문에 인식하지 못함, function에 넣어줘야함! 

<form action="ex03_ok.jsp" method="get">
  아이디 : <input type="text"  name="id"  value="admin"><br>
  비밀번호 : <input type="password"  name="passwd"  value="1234"><br>
  <input type="submit"  value="logon"> 
</form>

 

-ok.jsp-

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
     String id = request.getParameter("id");
     String passwd = request.getParameter("passwd");
     
     // DB 연동 처리 X
     
     String location = "ex03.jsp";
     if(   id.equals("admin") && passwd.equals("1234") ){
    	 // 로그인 성공              : jsp 쿠키, 세션 
    	 location += "?id="+id+"&ok";
     }else{
    	 // 로그인 실패
    	 location += "?error";
     }
     
     response.sendRedirect(location);
     // js location.href=location
     
%>

 *주의 : jsp - 아래 파라미터 값 기억

<%       // ex03_02.jsp                                    param1 = null       // ex03_02.jsp?error                          param1 = ""       // ex03_02.jsp?error=404                  param1 = 404       String param1 =  request.getParameter("error");        %> param1 = <%= param1 %>

 

          예) ex04.jsp               ex04_ok.jsp

                로그인화면구성

                로그인성공 화면구성

                게시판   메뉴 - 로그인 O X 모두 사용

                

                설문조사 메뉴   - 로그인 O 사용

                일정관리 메뉴

 

-jsp-

	String ok = request.getParameter("ok");
	String error = request.getParameter("error");

<div id="logon">
	<form action="ex04_ok.jsp" method="get">
	  아이디 : <input type="text"  name="id"  value="admin"><br>
	  비밀번호 : <input type="password"  name="passwd"  value="1234"><br>
	  <input type="submit"  value="logon"> 
	</form>
</div>
<div id="logout">
    [${ param.id }]님 로그인하셨습니다.<br>
    <button>로그아웃</button>
</div>

<script>
   $("#logout").hide();
</script>

<a href="#">게시판 </a><br>

<%
     if(  ok != null ){  // 로그인 성공
 %>
 <a href="#">설문조사 </a><br>
 <a href="#">일정관리 </a><br>
 <script>
   $(function (){
	   alert("로그인 성공");
	   $("#logon").hide();
	   $("#logout").show();
   });
 </script>
 <%   	 
     }else if( error != null ) {  // 로그인 실패
 %>
       <script>
    	 $(function (){
    		 alert("로그인 실패");
             $(":text").eq(0)
                                 .focus()
                                 .select();
    	 });         
        </script>
 <%   	 
     }
%>

 

-ok.jsp-

<%@page import="java.net.URLDecoder"%>
<%@page import="java.net.URLEncoder"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
     String id = request.getParameter("id");
     String passwd = request.getParameter("passwd");
     
     // DB 연동 처리 X
     
     String location = "ex04.jsp";
     if(   id.equals("admin") && passwd.equals("1234") ){
    	 // 로그인 성공              : jsp 쿠키, 세션 
    	 
    	 // p 95 설명
    	 // ***** 리다이렉트 할 때 한글 파라미터가 포함되어 있다면 
    	 // 반드시 인코딩을 해야 한다. -> 디코딩을 해야 한다. 
    	 location += "?id="+ URLEncoder.encode( id , "UTF-8" )+"&ok";
    	                               // URLDecoder.decode(s, charset)
     }else{
    	 // 로그인 실패
    	 location += "?error";
     }
     
     response.sendRedirect(location);
     // js location.href=location
     
%>

---

   1. 리다이렉트( redirect )

   2. 포워딩( forward )                 

   차이점

   

   ex05.jsp -> 요청 ->

                <- 응답

                

  a  리다이렉트( redirect )링크 태그 클릭     ->       ex05_redirect.jsp?name=admin&age=20  -> 요청 ->  리다이렉트( finish.jsp)

                                                                 <- 응답     

  ex05_finish.jsp                                  -> 요청       ?name,age 파라미터 X                              

                                                             <- 응답    

 

-jsp-

<%
   String name = "admin";
   int age = 20;
%>
<!-- 
ex05_redirect.jsp?name=admin&age=20
ex05_forward.jsp?name=admin&age=20
 -->
<a href="ex05_redirect.jsp">리다이렉트( redirect )</a><br>
<a href="ex05_forward.jsp">포워딩( forward ) </a><br>

<script>
  $("a").on("click", function (){
	  $(this).attr("href", function (i, val){
		  return val +"?name=<%= name %>&age=<%= age %>";
	  });
  });
</script>

-redirect.jsp-

<%@page import="java.net.URLEncoder"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 <!-- 
<h3>ex05_redirect.jsp?name=admin&age=20</h3>
  -->
 <%
     // 세션, 쿠키 저장 X
     
    String name = request.getParameter("name");
    String age = request.getParameter("age");
 
     String location = String.format("ex05_finish.jsp?name=%s&age=%s"
    		 , URLEncoder.encode(name, "UTF-8") , age);
     response.sendRedirect(location);
     
     // 1. 이유 ? finish.jsp        name, age 파라미터 왜 출력.
     // 2. 해결방법 ? name, age 파라미터  출력 처리. 
 
 %>

-forward.jsp-

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 <!-- 
<h3>ex05_forward.jsp?name=admin&age=20</h3>
  -->
<%
     // 포워딩( forward )
     String path = "ex05_finish.jsp";
     RequestDispatcher dispatcher = request.getRequestDispatcher(path)  ;
     dispatcher.forward(request, response);
%>

-finish.jsp-

<%@page import="java.net.URLDecoder"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022. 12. 6. 오전 11:19:45</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<h3>ex05_finish.jsp</h3>

<%
      String name = request.getParameter("name");
%>

> name = <%=   URLDecoder.decode(name, "UTF-8") %><br>
> age =  ${ param.age }<br>

<script>
</script>
</body>
</html>

 

* 리다이렉트의 경우 원래 페이지로 응답한 후 다시 요청을 날리는 것이기 때문에 location값에 파라미터 넣어줘야함!

* 포워딩의 경우 원래 페이지로 돌아가지 않고 바로 페이지 이동

---

    1. 서블릿 사용

    2. a 링크(  http://localhost/jspPro/scott/dept )요청 -> 서블릿 객체 요청( ScottDept.java )

         [ get   방식 ]                                                                     doGet(){} 구현

         post 방식                                                                          doPost(){}  X

         // g + p                                                                                  service(){}

    3.  doGet(){

             // 1.부서 정보 select 코딩

             // 2.ArrayList<DeptDTO> list => request 객체 저장 

             // 3. 포워딩  ex06_dept.jsp  ( request [list]) ***   

         }

    

    [기억]

    프로젝트 할 때 경로 설정할 때 상대경로 X -> /jspPro/~~  context path(root)  꼭 설정.

    

    ** 서블릿 url-pattern 설정 체크

 

-jsp-

<a href="<%= contextPath %>/scott/dept">scott.dept(부서 정보)</a>

-scottdept.java- (servlet)

package days03;

import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.util.DBConn;

import domain.DeptDTO;


//@WebServlet("/scott/dept")
public class ScottDept extends HttpServlet {
	private static final long serialVersionUID = 1L;

	public ScottDept() {
		super(); 
	}

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 
		// System.out.println("ScottDept.doGet() 호출됨.");
		
		// 1. ArrayList<DeptDTO> list -> request 저장
		String sql = "SELECT deptno, dname, loc "
				+" FROM dept";
		Connection conn =  DBConn.getConnection();
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		ArrayList<DeptDTO> list = null;
		
		try{
			   pstmt = conn.prepareStatement(sql);
			   rs = pstmt.executeQuery();
			   
			   if( rs.next() ){
				   list = new ArrayList<DeptDTO>();
				   do{
					    
					    DeptDTO dto = new DeptDTO(
					    		   rs.getInt("deptno")
					    		   , rs.getString("dname")
					    		   , rs.getString("loc"));
					    
					    list.add(dto);
					    
				   }while( rs.next() );
			   } // if
			   
			   pstmt.close();
			   rs.close();
		   }catch(Exception e){
			   e.printStackTrace();
		   } finally{
			   DBConn.close();
		   } 
		
		request.setAttribute("list", list);

		// 2. 포워딩 ex06_dept.jsp

		//  /scott/ex06_dept.jsp
	// String path = "ex06_dept.jsp";  파일명 상대경로
	//  http://localhost/jspPro[/scott/ex06_dept.jsp]
		
		// /jspPro/scott/dept"
		// /jspPro/scott/ex06_dept.jsp"
		 //String path = "/days03/ex06_dept.jsp";  // 이해.
		
		//String path = "/ex06_dept.jsp";  // 이해.
		//http://localhost/jspPro[/ex06_dept.jsp]
		
		// String path = "days03/ex06_dept.jsp";  // 이해.
		//http://localhost/jspPro[/scott/days03/ex06_dept.jsp]
		
		String path = "/days03/ex06_dept_jstl.jsp";  // 이해.
		RequestDispatcher dispatcher = request.getRequestDispatcher(path);
		dispatcher.forward(request, response);
		
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

scott.dept(부서 정보) -> 서블릿 O     ->  ex06_dept.jsp                                404 X        포워딩   404

-dept.jsp-

<%@page import="java.util.Iterator"%>
<%@page import="domain.DeptDTO"%>
<%@page import="java.util.ArrayList"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
       String contextPath = request.getContextPath();
%>
<%
     // 파라미터 : request.getParameter(name)
     // request.setAttribute("list", list);
     ArrayList<DeptDTO> list =  (ArrayList<DeptDTO>)request.getAttribute("list");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022. 12. 6. 오후 12:12:23</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<h3>ex06_dept.jsp</h3>

<p>.</p>
<p>.</p>

<select id="selDept" name="deptno">
   <option>선택...</option>
<%
    if(  list != null ){   // 부서가 존재한다. 
    	
    	Iterator<DeptDTO>  ir = list.iterator();
        while(   ir.hasNext() ){
            DeptDTO dto =  ir.next();
%>
   <option value="<%= dto.getDeptno() %>"><%= dto.getDname() %></option>
<%            
        } // while
    }else{  // 1개의 부서도 존재하지 않는다. 
%>
   <option> 1개의 부서도 존재하지 않는다. </option>
<%    	
    }
%>  		
</select>

<script>
  $("#selDept")
         .wrap("<form></form>")
         .change( function (){
	             $(this)
	                  .parent()    // form
	                       .attr({      //      /jspPro
	                    	   action: "<%= contextPath %>/scott/emp" ,
	                    	   method: "get"
	                       })
	                       .submit();
         });
</script>

<script>
</script>
</body>
</html>

---

  1. select  태그에서 하나의 부서(option)를 선택

     -> 서브밋(submit)

     http://localhost/jspPro[/scott/emp]   GET 방식  +  선택한 부서번호(deptno = 20)

     

    jquery 사용.

     

  2. 서블릿(ScottEmp.java) 요청 - doGet() {  코딩}

    

  3.   서블릿(ScottEmp.java) doGet(){

        pdeptno = 20;

        ArrayList<EmpDTO> list ;

        request 저장

        포워딩  ex06_emp.jsp

    4. ex06_emp.jsp

        테이블         ArrayList<EmpDTO> list ;

        출력.

  }

 

-scottEmp.java-

package days03;

import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;  // Ctrl + Shift + O

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.util.DBConn;

import domain.DeptDTO;
import domain.EmpDTO;
 
// @WebServlet("/scott/emp")
public class ScottEmp extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public ScottEmp() {
        super(); 
    }
 
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// System.out.println("ScottEmp.doGet() 호출됨.");
		int pdeptno = 10;
	     try{
	    	 pdeptno =  Integer.parseInt( request.getParameter("deptno") );
	     }catch(NumberFormatException e){  }
	     //
	 
	    Connection conn  = DBConn.getConnection();
	    PreparedStatement  pstmt = null;
	    ResultSet rs = null; 
	    	    
	    // 1. 부서 정보 X
	    // 2. 해당 부서원 정보  
	    ArrayList<EmpDTO> empList = null;
	    String sql =      "SELECT * "
					           +" FROM emp "
					           +" WHERE deptno = ? "
					           +" ORDER BY ename ASC";
	     
	    		
	    try{
	    	 pstmt =  conn.prepareStatement(sql);
	    	 pstmt.setInt(1,  pdeptno );
	    	 rs =  pstmt.executeQuery();
	    	 
	    	 if( rs.next() ){
	    		empList = new ArrayList<>();
	    		do{
	    			//  empno,  ename,  job,  hiredate,  mgr,  sal,  comm,  deptno  
	    			EmpDTO dto = new EmpDTO(
	    					rs.getInt("empno")
	    					, rs.getString("ename")
	    					, rs.getString("job")
	    					, rs.getDate("hiredate")
	    					, rs.getInt("mgr")
	    					, rs.getDouble("sal")
	    					, rs.getDouble("comm")
	    					, rs.getInt("deptno")
	    					);
	        		empList.add(dto);
	    		}while( rs.next() );
	    	 } // if
	    	 
	    	 pstmt.close();
	    	 rs.close(); 
	   }catch(Exception e){
	   	e.printStackTrace();
	   } // try	    
	    DBConn.close();
	    
	    // 1. request 저장
	    request.setAttribute("empList", empList);
	    // 2. 포워딩
	    //String path = "/days03/ex06_emp.jsp";
	    String path = "/days03/ex06_emp_jstl.jsp";
	    RequestDispatcher dispatcher = request.getRequestDispatcher(path);
	    dispatcher.forward(request, response);
	    
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

 

-emp.jsp-

<%@page import="java.util.Iterator"%>
<%@page import="domain.EmpDTO"%>
<%@page import="java.util.ArrayList"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
   String contextPath = request.getContextPath();
%>
<%
     // request.setAttribute("empList", empList);
     ArrayList<EmpDTO> empList =  (ArrayList<EmpDTO>)request.getAttribute("empList");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022. 12. 6. 오후 2:47:59</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>

 table{
   width:100%;
   min-width: 700px;
 }
 
 table, th, td{
   border:1px solid gray;
 }

</style>
</head>
<body>
<h3>ex06_emp.jsp</h3>
<br>
<br>
<table>
  <thead>
    <tr>
     <th><input type="checkbox" id="ckbAll" name="ckbAll">전체 선택</th>
     <th>empno</th>
     <th>ename</th>
     <th>job</th>
     <th>hiredate</th>
     <th>mgr</th>
     <th>sal</th>
     <th>comm</th>
     <th>deptno</th>
    </tr>
  </thead>
  <tbody>
<%
     if( empList != null ){  // 사원 존재 O
    	 Iterator<EmpDTO> ir2 = empList.iterator();
    	 while( ir2.hasNext() ){
    		 EmpDTO dto = ir2.next();
%>
        <tr>
           <!-- <td><input type="checkbox"  name="ckbEmp"  data-속성명="속성값" data-속성명="속성값"></td> -->
           <td><input type="checkbox"  name="ckbEmp"  data-empno="<%= dto.getEmpno() %>"></td>
           <td><%= dto.getEmpno() %></td>
           <td><%= dto.getEname() %></td>
           <td><%= dto.getJob() %></td>
           <td><%= dto.getHiredate() %></td>
           <td><%= dto.getMgr() %></td>
           <td><%= dto.getSal() %></td>
           <td><%= dto.getComm() %></td>
           <td><%= dto.getDeptno() %></td>
        </tr>
<%    		 
    	 } // while
     }else{ // 사원 존재 X
%>
     <tr>
        <td colspan="9"  style="text-align: center">employee does not exist.</td>
     </tr>
<%    	 
     } // if
%>
  </tbody>
  <tfoot>
    <tr>
       <td colspan="9"  style="text-align: center">
          <button id="checkedEmpno">선택한 empno 확인</button>
       </td>
    </tr>
  </tfoot>
</table>


<a href="<%= contextPath %>/scott/dept">다시하기</a>

---

   [ JSTL ]  p 292    Chapter 12 표준 태그 라이브러리 (JSTL)

   1.  ex06_dept.jsp      /  ex06_emp.jsp 코딩 수정 

       ex06_dept_jstl.jsp / ex06_emp_jstl.jsp  복사 ,  붙이기.

       

   2. JSTL    

     - 커스텀 태그

        jsp:~~~> 액션태그와 같이 

        개발자 필요에 의해서 태그 정의해서 사용한다. 

     -  여러 개발자가 공통적으로 커스텀 태그를 만들기에 이것을 표준화시킨 태그가

        JSP Standard Tag Library( JSTL)

     -    변수 선언 + 태그, 함수 , 제어문 태그, URL 처리 + 태그, 출력 태그 등등 

     - p 294  표 12.1   JSTL 태그의  5가지  종류

         ***  1) 코어        : 변수, 제어문, URL 처리 태그  :  접두어( c ) :  http://java.sun.com/jsp/jstl/core

        2) XML

        3) 국제화

        4) 데이터베이스

        5) 함수

     - JSTL 사용하려면    jstl-1.2.jar 다운로드 

     

     JAVA+ JSP + Spring 필요한 라이브러리 

     https://mvnrepository.com/

     

web-inf 폴더에 위 링크에서 jstl 1.2다운 (usages 많은거), ojdbc도 받아서 여기 넣어야함!

 

 

<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>

dept.jstl

<%@page import="java.util.Iterator"%>
<%@page import="domain.DeptDTO"%>
<%@page import="java.util.ArrayList"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>

<%
       String contextPath = request.getContextPath();
%>
<% 
     // request.setAttribute("list 속성명", list);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022. 12. 6. 오후 12:12:23</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<h3>ex06_dept_jstl.jsp</h3>

<p>.</p>
<p>.</p>

<select id="selDept" name="deptno">
   <option>선택...</option>   
   
   <c:if test="${ not empty list }">
      <c:forEach items="${ list }"  var="dto">
         <option value="${ dto.deptno  }">${ dto.dname }</option>
      </c:forEach>
   </c:if>
   <c:if test="${ empty list }">
       <option> 1개의 부서도 존재하지 않는다. </option>
   </c:if> 
 
</select>

<script>
  $("#selDept")
         .wrap("<form></form>")
         .change( function (){
	             $(this)
	                  .parent()    // form
	                       .attr({      //      /jspPro
	                    	   action: "<%= contextPath %>/scott/emp" ,
	                    	   method: "get"
	                       })
	                       .submit();
         });
</script>

emp.jstl

<%@page import="java.util.Iterator"%>
<%@page import="domain.EmpDTO"%>
<%@page import="java.util.ArrayList"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>

<%
   String contextPath = request.getContextPath();   // EL  
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022. 12. 6. 오후 2:47:59</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>

 table{
   width:100%;
   min-width: 700px;
 }
 
 table, th, td{
   border:1px solid gray;
 }

</style>
</head>
<body>
<h3>ex06_emp_jstl.jsp</h3>
<br>
<br>
<table>
  <thead>
    <tr>
     <th><input type="checkbox" id="ckbAll" name="ckbAll">전체 선택</th>
     <th>empno</th>
     <th>ename</th>
     <th>job</th>
     <th>hiredate</th>
     <th>mgr</th>
     <th>sal</th>
     <th>comm</th>
     <th>deptno</th>
    </tr>
  </thead>
  <tbody>
  
  <c:if test="${ not empty empList }">
     <c:forEach items="${ empList }" var="dto">
         <tr>
           <!-- <td><input type="checkbox"  name="ckbEmp"  data-속성명="속성값" data-속성명="속성값"></td> -->
           <td><input type="checkbox"  name="ckbEmp"  data-empno="${ dto.empno }"></td>
           <td>${ dto.empno }</td>
           <td>${ dto.ename }</td>
           <td>${ dto.job }</td>
           <td>${ dto.hiredate }</td>
           <td>${ dto.mgr }</td>
           <td>${ dto.sal }</td>
           <!-- .PropertyNotFoundException: [com] 특성이 [domain.EmpDTO] 유형 -->
           <td>${ dto.comm }</td>
           <td>${ dto.deptno }</td>
        </tr>
     </c:forEach>
  </c:if>
  <c:if test="${ empty empList }">
     <tr>
        <td colspan="9"  style="text-align: center">employee does not exist.</td>
     </tr>
  </c:if>

  </tbody>
  <tfoot>
    <tr>
       <td colspan="9"  style="text-align: center">
          <button id="checkedEmpno">선택한 empno 확인</button>
       </td>
    </tr>
  </tfoot>
</table>


<a href="<%= contextPath %>/scott/dept">다시하기</a>

---

    ex07.jsp 페이지에서     

    form   get      -> Member.java ( doGet(){})    

    form   post    -> Member.java( doPost(){} )

*같은 데이터 날렸을 때 Member.java라는 서블릿 만드는데 각각 다르게 처리 

 

-jsp-

<%
    String contextPath = request.getContextPath();
%>

<form action="<%= contextPath %>/member/get" method="get">
name : <input type="text" name="name" value="홍길동"><br> 
age :  <input type="text" name="age" value="20"><br>
<input type="submit"  value="GET 전송">
</form>

<form action="<%= contextPath %>/member/post" method="post">
name : <input type="text" name="name" value="홍길동"><br> 
age :  <input type="text" name="age" value="20"><br>
<input type="button"  value="POST 전송">
</form>

<script>
  $("form:last-of-type :button").on("click", function (){
	  // 입력값에 대한 유효성 검사 한 후
	  // $(this).parent();
	  $(this).parents("form").submit();
  });
</script>

 

-Member.java-

package days03;

import java.io.IOException;
import java.net.URLEncoder;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

// 하나의 서블릿 Member 가지고
// doGet() 따로 처리
// doPost() 따로 처리..
@WebServlet({ "/member/get", "/member/post" })
public class Member extends HttpServlet {
	private static final long serialVersionUID = 1L;
      
    public Member() {
        super(); 
    }

    //    /member/get  + get
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		String name = request.getParameter("name");
		String age = request.getParameter("age");
		
		// 리다이렉트  
		// (주의) 한글 인경우 인코딩. 
		String location = String.format(
				"/jspPro/days03/ex07_ok.jsp?name=%s&age=%s"
				,  URLEncoder.encode( name , "UTF-8" )
				, age );
		response.sendRedirect(location);
	}
 
	//     /member/post  + post
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		
		String name = request.getParameter("name");
		System.out.println(  name );
		
		 // 포워딩. 
		 String path = "/days03/ex07_ok.jsp";
		 RequestDispatcher dispatcher = request.getRequestDispatcher(path);
		 dispatcher.forward(request, response);
	}

}

* 리다이렉트의 경우 /jspPro 부터 시작해야함!

 

-ok.jsp-

<%
   String name = request.getParameter("name");
%>
> Member 서블릿 :  name =  <%= name %><br>
> Member 서블릿 :  age =  ${ param.age }<br>

<br><br>
<a href="ex07.jsp">다시하기</a>

 

결과)

- get 리다이렉트의 경우 파라미터 넘어가지 않아서 URL에 넣어주는 방식으로 

- get은 다시하기 가능 -> url이 잘 잡힘

- post는 한글 깨지고

- post 다시하기 누르면 404에러 -> url 이 member로 잡힘 

 

---

   ex08.jsp    -> ex08_02.jsp  -> ex08_03.jsp

   이름                  주소

   나이                  연락처

   

   서브밋                 서브밋

 

-1.jsp-

<form action="ex08_02.jsp"  method="get">
  name : <input type="text" name="name" value="홍길동"><br> 
  age : <input type="text" name="age" value="20"><br>
  
  <input type="submit"  value="Next">
</form>

-2.jsp-

<form action="ex08_03.jsp"  method="get">
  address : <input type="text" name="address" value="서울 역삼동"><br> 
  tel : <input type="text" name="tel" value="010-1234-1234"><br>
  <input type="button" value="Prev" onclick="history.back()">
  <input type="submit"  value="Next">
</form>

-3.jsp-