[Day2] JSP/Servlet 2 - db연결 테이블 반환, 서블릿, request객체

[Day2] JSP/Servlet 2 [12/5]

ㄴ JSP 관련 설명 링크

db 연결해서 테이블 select 태그 선택하면 table 형식으로 반환하는 코딩

<form> action="" 서브밋 X -> jquery Ajax

1) 선택한 옵션의 selected 속성을 설정하면된다. ( jquery )

<%
     // JSP 기본 객체 (9가지) : request 객체 : url 가져옴. 
     String contextPath = request.getContextPath();
%>

<script>
  $("#selDept").change(function() {
	  // js    value, text
	  // jquery value, text
  	// 폼 태그 없이 서브밋..  BOM-W,L,N,S,H
  	//                      "/jspPro"
  	location.href = "<%= contextPath %>/days02/test01.jsp?deptno=" + $(this).val();
  }); // change
</script>
<script>
   // 1조 코딩                         ?deptno=30
   // $("#selDept option[value=<%=pdeptno%>]").attr("selected", true);
   
   // $("#selDept").val( "<%=pdeptno%>" );
   
   // EL ?deptno=30
   // empty  EL 연산자
   // param  EL 기본 객체
   $("#selDept").val( "${ empty param.deptno ? 10 :  param.deptno}" );
   
</script>
<script>
   // [ 전체 선택 구현 ]
   //$("table thead :checkbox")
   $("#ckbAll").change( function (){
	   $("table tbody tr")
	                .find("td:first-child :checkbox")
	                .prop("checked",  $(this).prop("checked") );
   }); // change
</script>

<script>
   // "선택한 empno 확인" 버튼을 클릭할때..
   $("#checkedEmpno").on("click" , function (){
	   
	   var empnos  = [];
	   
	   // $("table tbody :checkbox")  반복 checked 확인
	   $("table tbody :checkbox[name=ckbEmp]:checked").each(function(i, element) {
	   	   // console.log( i  +  " /  " + element )
	   	   // DOM 탐색
	   	   // var empno =  $(this).parent().next().html();
	   	   //  <input type="checkbox"  name="ckbEmp"  data-empno="7369">
	   	   var empno = $(this).data("empno");
	   	   
	   	   // console.log( empno );
	   	   empnos.push( empno );
	   }); //  each
	   
	   // $("#demo").html(  "<ul><li>" + empnos.join("</li><li>")  + "</li></ul>"    ) ;
	   
	    // 예)
	    // location.href="<%= contextPath %>/days02/test01_ok.jsp?empno=7499&empno=7500&empno=8763";
	    
	    location.href="<%= contextPath %>/days02/test01_ok.jsp?empno=" + empnos.join("&empno=");
	   
   }); // click
</script>

* 해당 페이지에서 클릭으로 해당 페이지 파라미터 날려주는 것 가능!

* 다른 페이지로 값 넘겨주는 것도 가능!

(form태그 없이)

서블릿(Servlet)

1. 서블릿(Servlet) 이란?

자바 웹 개발 필수 사항.

- JSP 표준이 나오기 전에 자바 웹 개발을 위해서 만들어졌다.

- 서블릿을 이용하면

"자바 클래스" -> 웹 개발.

[2]. 서블릿 구현 방법(과정)

1) [서블릿 규약]에 따라 자바 클래스 작성(선언) -- ???.java

ㄱ. 자바 클래스의 접근 지정자 : public

ㄴ. javax.servlet.http.HttpServlet 클래스 상속

ㄷ. service(), get(), post() 메서드를 오버라이딩 해야한다.

이클립스 개발 2+3 X

2) ???.java 을 컴파일 해서 ???.class 생성 ( 클래스파일 )

3) 클래스 파일을 /WEB-INF/classes 폴더에 이동.

ㄱ. web.xml 파일에 서블릿 클래스를 설정(등록).

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

예)

1) 서블릿 규약을 따는 자바 클래스 선언

days02 패키지 + Now.java 추가

NOW

package days02;

import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;

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

public class Now extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		super.doGet(request, response);
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		super.doPost(request, response);
	}

	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		response.setContentType("text/html; charset=UTF-8" );
		
		PrintWriter out = response.getWriter();
		out.println("<!DOCTYPE html>");
		out.println("<html>");
		out.println("<head>");
		out.println("<meta charset='UTF-8'>");
		out.println("<title>2022.12.05 서블릿</title>");
		out.println("</head>");
		out.println("<body>");
		
		Date now = new Date();
		String pattern = "yyyy-MM-dd hh:mm:ss";
		SimpleDateFormat sdf = new SimpleDateFormat(pattern);
		String strNow = sdf.format(now);
		
		out.println("> 현재 날짜, 시간 : " +  strNow);
		
		out.println("</body>");
		out.println("</html>");
	} // service

} // class

** alt shift s : 오버라이딩 -> do get, do post, service

2) web.xml Now.java 서블릿 등록.

  <!-- 서블릿 등록 + URL 매핑 설정 -->
  <servlet>
    <description>현재 날짜,시간을 응답하는 첫 번째 서블릿</description>
    <description>days02 패키지 선언된 서블릿</description>
    <servlet-name>now</servlet-name>
    <servlet-class>days02.Now</servlet-class>
  </servlet>
  <servlet-mapping>
     <servlet-name>now</servlet-name>
     <!-- *** URL 패턴 매핑 규칙 *** -->
     <!-- <url-pattern>http://localhost/jspPro/days02/now</url-pattern> -->     
     <url-pattern>/days02/now</url-pattern> 
     <url-pattern>/days02/now.htm</url-pattern> 
     <!-- <url-pattern>/test/now.ss</url-pattern> -->
     
      <!-- 올바른 url 패턴이 아니예요.  1/2/3/4  해당되지 않는다. -->
      <!-- <url-pattern>/test/*.ss</url-pattern> --> 
      <!-- <url-pattern>*.ss</url-pattern>  -->
      
     <!-- <url-pattern>/foo/bar/*</url-pattern>  -->
     <!-- <url-pattern>/baz/*</url-pattern>  -->
     <!-- <url-pattern>/catalog</url-pattern> --> 
     <!-- <url-pattern>*.bop</url-pattern>  -->     
  </servlet-mapping>

3) 서블릿 매핑 설정

요청URL -> 서블릿 호출-> 응답

http://localhost/jspPro[/days02/now] 요청

http://localhost/jspPro[/days02/now.htm] 요청

<a href="http://localhost/jspPro/days02/now">now 서블릿 호출</a><br>
<a href="http://localhost/jspPro/days02/now.htm">now 서블릿 호출</a><br>
<!-- web.xml url-pattern 설정 -->
<a href="http://localhost/jspPro/test/now.ss">now 서블릿 호출</a><br>
<a href="http://localhost/jspPro/today.ss">now 서블릿 호출</a><br>

Now.java

response.setContentType("text/html; charset=UTF-8" );

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

ㄴ. 서블릿 3.0 @WebServlet 어노테이션을 사용해서 등록 가능.

( tomcat8.5 -> jsp2.3 servlet4.0 EL3.0 )

days02.Hello.java 서블릿 클래스 생성.

src-main-java-days02 - servlet 생성

package days02;

import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;

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

/**
 * Servlet implementation class Hello
 */
/*
@WebServlet(
		description = "@WebServlet 어노테이션으로 두 번째 서블릿", 
		urlPatterns = { 
				"/hello.htm", 
				"/hello.ss", 
				"/hello"
		})
*/		
public class Hello extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Hello() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		response.setContentType("text/html; charset=UTF-8" );
		
		PrintWriter out = response.getWriter();
		out.println("<!DOCTYPE html>");
		out.println("<html>");
		out.println("<head>");
		out.println("<meta charset='UTF-8'>");
		out.println("<title>2022.12.05 서블릿</title>");
		out.println("</head>");
		out.println("<body>");
		 
		out.println("> 인사 : Hello~ "   );
		
		out.println("</body>");
		out.println("</html>");
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

<!-- 주의 :  -->
<!-- 기억 : Deployment Descriptor  - DD파일 = web.xml -->
<hr>
<a href="http://localhost/jspPro/hello.ss">hello 서블릿 호출</a><br>
<a href="http://localhost/jspPro/hello.htm">hello 서블릿 호출</a><br>
<a href="http://localhost/jspPro/hello">hello 서블릿 호출</a><br>

* DD파일 web.xml 에서 맵핑 확인 가능!

5) 톰캣 등의 컨테이너를 실행( 서버 재 시작.)

6) 웹 브라우저에서 확인.

서블릿은 jsp 보다 복잡하지만 MVC 패턴으로 개발할 때는 서블릿 이해 반드시

있어야 된다.

[3]. 서블릿 매핑 설정

4. 초기화 파라미터

[5]. URL 패턴 매핑 규칙 p 514

1) / 시작 /* 끝

예) /test/board/*

/days02/*

2) *. 시작 확장자에 대한 매핑

*.확장자명

예) *.htm

*.ss

3) 오직 / 만 있는 경우. ( 기본 서블릿 )

4) 위의 1~3 경우외에 정확하게 URL 매핑

예) /days02/now.html

서블릿 예제

0. ex03.jsp

ㄱ. get 이름/나이 -> Info 서블릿 클래스 전달

ㄴ. post 이름/나이 -> Info 서블릿 클래스 전달

설정 (jquery, css)

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

1. Info 서블릿 클래스 선언

2. /info

/days02/info.htm

* a링크 태그 -> ok jsp 로 이동

jspPro url 가져옴

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

1) 일반 get (servlet없이)

       정수 : <input type="text" id="n" name="n" value="10"> <br>
       <a href="<%= contextPath %>/days02/ex03_ok.jsp">ex03_ok.jsp</a>

   $("#tabs-1  a").click(function() {
   	    // event.preventDefault();
   	    // 1번
   	    /*
   	    var origHref =  $(this).attr("href");
   	   $(this).attr( "href" ,  origHref +"?n=" + $("#n").val()  );
   	   */
   	   
   	    // 2번
   	    $(this).attr("href", function (i, origHref){
   	    	return origHref +"?n=" + $("#n").val();
   	    });
   });

2) get, post + servlet

      <form>
         Name : <input type="text" id="name" name="name" value="홍길동"><br>
         Age : <input type="text" id="age" name="age" value="20"><br>      
         
         <input type="radio" name="method" value="get" checked="checked">GET 요청
         <input type="radio" name="method" value="post" >POST 요청
         <br>
           <!-- "/info", "/days02/info.htm" --> 
         <button type="button">전송(submit)</button>
      </form>

   // 탭-2 의 전송버튼을 클릭할 때...
   $("form button").on("click" , function (){
	   // 체크된 라디오 버튼
	   var method = $("#tabs-2 :radio:checked").val();
	   $("form")
	            .attr({
		                 //             /jspPro
					   "action":  "<%= contextPath %>/info"
					  , "method":	   method
				   })
	           .submit();
   });

servlet

package days02;

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

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

/**
 * Servlet implementation class Info
 */
//@WebServlet({ "/info", "/days02/info.htm" })
public class Info extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Info() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// Info 서블릿 을 GET 방식으로 요청할 때 호출되는 메서드
		response.setContentType("text/html; charset=UTF-8");
		String name = request.getParameter("name");
		int age =  Integer.parseInt(  request.getParameter("age")   );
		
		// 응답
		PrintWriter out =  response.getWriter();
		out
		   .append("GET 방식 요청")
		   .append( request.getContextPath() +"<br>" )
		   .append( "> 이름 : " + name +"<br>" )
		   .append( "> 나이 : " + age +"<br>" );
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// Info 서블릿 을 POST 방식으로 요청할 때 호출되는 메서드
		// > 이름 : íê¸¸ë  -  한글 깨지더라고..
		
		// 톰캣(8) 인코딩을 설정하지 않으면 -> GET    UTF-8
		//                                                     POST  ISO 8859-1
		// 홍길동-> 요청->  íê¸¸ë           ->  íê¸¸ë 
		// UTF-8            ISO 8859-1        UTF-8
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html; charset=UTF-8");
		
		String name = request.getParameter("name");
		int age =  Integer.parseInt(  request.getParameter("age")   );
		
		// 응답
		PrintWriter out =  response.getWriter();
		out
		   .append("POST 방식 요청")
		   .append( request.getContextPath() +"<br>" )
		   .append( "> 이름 : " + name +"<br>" )
		   .append( "> 나이 : " + age +"<br>" );
	}

}

[ request 객체] p 72

1. 웹브라우저 -> 요청 -> 웹서버

요청 정보 가지는 객체 request

2. 클라이언트가 전송한 쿠키, 헤더, 파라미터 정보 읽기 기능

3. 서버와 관련된 정보 읽기

// js 쿠키 : Cookie.js 파일 생성, document.cookie 속성

클라이언트 + 서버 관련 정보 읽기 표3.3 ( p 73 )

*** 1. contextPath(컨텍스트 루트) : <%= request.getContextPath() %>

*** 2. 클라이언트 IP 주소 : <%= request.getRemoteAddr() %>

*** 3. 요청 전송 방식 : <%= request.getMethod() %>

*** 4. 요청 URL : <%= request.getRequestURL() %>

*** 5. 요청 URI : <%= request.getRequestURI() %>

저작자표시

'👨‍💻 Web Development > JDBC | JSP | Servlet' 카테고리의 다른 글

[Day4] JSP/Servlet 4 - 웹작동원리, 테이블포워딩, accordion, tabs, 출력버퍼, JSP 기본객체9 (0)	2022.12.14
[Day3] JSP/Servlet 3 - request객체 파라미터, 리다이렉트, 포워딩, jstl, get/post (0)	2022.12.09
[Day1] JSP/Servlet 1 - 개요 (0)	2022.12.06
[Day5] JSP/JDBC 5 - transaction 처리, callable statement, reflection (0)	2022.11.02
[Day4] JSP/JDBC 4 - Board (0)	2022.11.01

[Day2] JSP/Servlet 2 - db연결 테이블 반환, 서블릿, request객체

[Day2] JSP/Servlet 2 [12/5]

'👨‍💻 Web Development > JDBC | JSP | Servlet' 카테고리의 다른 글

전체 카테고리

블로그 인기글

티스토리툴바

[Day2] JSP/Servlet 2 [12/5]

'👨‍💻 Web Development > JDBC | JSP | Servlet' 카테고리의 다른 글

전체 카테고리

최근 글

최근댓글

블로그 인기글

티스토리툴바