본문 바로가기
국비학원/수업기록

국비 지원 개발자 과정_Day54

by 루팽 2023. 2. 14.

REST(Representational State Transfer)

웹에서 데이터를 전송 및 처리하는 방법을 정의한 인터페이스

모든 데이터 구조와 처리방식은 REST에서 URL을 통해 정의되며, 그래서 매우 직관적으로 이해할 수 있음

HTTP Method를 통해서 Resource를 처리하며, CRUD를 통한 resource 조작을 할 때 사용

 

HTTP Method

REST를 지키면서 행위를 전달하는 방법

get 조회 - 링크를 걸 수 있다, 쿼리스트링이 헤더에 전달된다

post 생성

put 수정

delete 삭제

 

자바에는 http를 지원하는 api가 없다 → 브라우저에 요청사항 전달 위해서는 서블릿, JSP필요

 

HTTP(Hyper Text Transfer Protocol)

서버/클라이언트 모델을 따라 데이터를 주고 받기 위한 비상태프로토콜

HTTP는 인터넷에서 하이퍼텍스트를 교환하기 위한 통신 규약으로, 80번 포트를 사용

 

HTTPS(Hyper Text Transfer Protocol Secure)

HTTP에 데이터 암호화가 추가된 프로토콜

HTTPS는 HTTP와 다르게 443번 포트를 사용

네트워크 상에서 중간에 제3자가 정보를 볼 수 없도록 암호화를 지원

s는 시큐리티, 인증서 받음

 

HTML <form> 요소는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냄

<form action="" method="get" class="form-example">
// action에는 서블릿 혹은 JSP가 옴
// method에는 restful api가 옴

 

action

양식 데이터를 처리할 프로그램의 URI

<button>, <input type="submit"> (en-US), <input type="image"> (en-US) 요소의 formaction 특성으로 재정의할 수 있음

 

enctype

method 특성이 post인 경우, enctype은 양식 제출 시 데이터의 MIME 유형을 나타냄

  application/x-www-form-urlencoded

  기본값

  multipart/form-data

  <input type="file">이 존재하는 경우 사용

  text/plain

  HTML 5에서 디버깅 용으로 추가된 값

 

method

양식을 제출할 때 사용할 HTTP 메서드

  post

  POST 메서드. 양식 데이터를 요청 본문으로 전송 / 노출 X

  get

  GET 메서드. 양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송 / 노출 O

  dialog

  양식이 <dialog> 안에 위치한 경우, 제출과 함께 대화 상자를 닫음

 

target

양식 제출의 결과를 표시할 위치를 나타내는 표준 키워드 혹은 사용자 지정 이름

가능한 값은 브라우징 맥락(탭, 창, <iframe>)의 이름 또는 키워드

지정한 경우, 버튼의 양식 소유자가 가진 target 특성보다 우선함

  _self

  응답을 현재 브라우징 맥락에 표시함(기본값)

  _blank

  응답을 새로운 브라우징 맥락에 표시함

  보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있음

  _parent

  응답을 현재 브라우징 맥락의 부모에 표시함

  부모가 존재하지 않으면 _self와 동일하게 행동

  _top

  응답을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시함

  부모가 존재하지 않으면 _self와 동일하게 행동

 

전송 시 사용 가능한 태그

  1. <button type="submit" onclick="send()">전송</button>

  button의 기본 속성은 submit이므로 추가로 submit()를 호출하지 않아도 action의 페이지로 이동이 일어남

  -> 기존의 연결이 끊어지고 새로운 요청이 전송됨

  action = "XXX.html or XXX.jsp or XXX서블릿" -> 페이지가 새로 열림(새로운 화면)

  2. <input type="button" value="전송" onclick="send()" />

  submit속성이 디폴트가 아니라서 페이지 이동이 일어나지 않음

  3. <a href="javascript:send()">전송</a>

  submit속성이 디폴트가 아니라서 페이지 이동이 일어나지 않음

 

<0 - 연결용 페이지>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>a1.html</title>
  </head>
  <body>
    <h2>a1.html페이지</h2>
  </body>
</html>

 

<1 - <button type="submit" onclick="send()">전송</button>>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript">
      const send = () => {
        console.log("전송호출");
        // 아래와같이 코드를 쓰지 않아도 a1.html로 연결됨
        // document.querySelector("#f_test").submit();
      };
    </script>
  </head>
  <body>
    <form id="f_test" action="a1.html" method="get">
      <input type="text" name="" id="" />
      <!-- button은 기본 타입이 submit이라서 따로 호출하지 않아도 a1.html로 연결됨 -->
      <button type="submit" onclick="send()">전송</button>
    </form>
  </body>
</html>

 

<2 - <input type="button" value="전송" onclick="send()" />>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript">
      const send = () => {
        console.log("전송호출");
        // 아래와같은 코드를 써야만 a1.html로 이동함
        document.querySelector("#f_test").submit();
      };
    </script>
  </head>
  <body>
    <form id="f_test" action="a1.html" method="get">
      <input type="text" name="" id="" />
      <!-- submit속성이 디폴트가 아니라서 페이지 이동이 일어나지 않음 -->
      <!-- 바로 연결되게 하려면 타입을 submit으로 해줘야함 -->
      <input type="button" value="전송" onclick="send()" />
    </form>
  </body>
</html>

 

<3 - <a href="javascript:send()">전송</a>>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript">
      const send = () => {
        console.log("전송호출");
        // 아래와같은 코드를 써야만 a1.html로 이동함
        document.querySelector("#f_test").submit();
      };
    </script>
  </head>
  <body>
    <form id="f_test" action="a1.html" method="get">
      <input type="text" name="" id="" />
      <!-- submit속성이 디폴트가 아니라서 페이지 이동이 일어나지 않음 -->
      <a href="javascript:send()">전송</a>
    </form>
  </body>
</html>

 

<전송방지 1 - button onclick >

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>b.html</title>
    <script type="text/javascript">
      const send = (e) => {
        // 관전 포인트
        // 함수 파라미터로 넘기는 this는 button 객체이지 이벤트 객체가 아니다
        // 따라서 이벤트 방지 코드인 preventDefault는 먹지 않는다(주의!)
        console.log("전송호출" + e);
        e.preventDefault();
      };
    </script>
  </head>
  <body>
    <form id="f_test" action="a1.html" method="get">
      <input type="text" name="" id="" />
      <!-- 아래의 this는 이벤트가 아니라 버튼을 가리킨다 -->
      <button type="submit" onclick="send(this)">전송</button>
    </form>
  </body>
</html>

 

<전송방지 2 -  이벤트리스너 사용 >

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>b.html</title>
    <script type="text/javascript">
      const send = () => {
        console.log("전송호출");
      };
    </script>
  </head>
  <body>
    <form id="f_test" action="a1.html" method="get">
      <input type="text" name="" id="" />
      <button type="submit" id="btnSend">전송</button>
      <script>
        const btnSend = document.querySelector("#btnSend");
        btnSend.addEventListener("click", (event) => {
          event.preventDefault();
          console.log("전송버튼 클릭 - 전송방지");
          send();
        });
      </script>
    </form>
  </body>
</html>

<!-- 
  Event 인터페이스의 preventDefault() 메서드는
  어떤 이벤트를 명시적으로 처리하지 않은 경우,
  해당 이벤트에 대한 사용자 에이전트의 기본 동작을실행하지 않도록 지정합니다.
-->

 

<HelloServlet>

package com.day1;

import java.io.IOException;

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

import org.apache.log4j.Logger;

/*
 form 전송시 클라이언트측의 요청을 서블릿이 듣는다(받는다)
 method="get"이면 doGet호출
 method="post이면 doPost호출
 
 자바가 서블릿이 되기위한 조건은 반드시 HttpServlet을 상속받는 것이다
 상속을 받으면 doGet과 doPost를 오버라이딩 할 수 있는데
 이 함수의 파라미터를 통해서 request 요청 객체와 response 응답 객체를 주입받는다
 톰캣 서버에서 주입해줌
 
 웹서비스를 위해서는 URL 등록이 필수 -> 브라우저가 실행 주체이니까
 프로젝트에 필요한 URL등록은 annotation과 web.xml문서를 통해서 가능하다
 이 중 annotation은 자동이고 편하지만 수동처리와 비교해서 추가작업이 불가능한 단점이 있다
 xml문서를 통해서 객체를 등록하고 주입받는다
 이유는 spring 사용시 메이븐 레포를 이용한 프로젝트 생성인 경우에 xml문서로 환경설정함
 클래스 사이의 객체주입 관계도 xml문서로 처리 가능함
*/
public class HelloServlet extends HttpServlet {
	Logger logger = Logger.getLogger(HelloServlet.class);

	@Override
	public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
		System.out.println("doGet 호출");
		logger.info("doGet 호출 성공");
	}

	@Override
	public void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
		System.out.println("doPost 호출");
		logger.info("doPost 호출 성공");
	}
}

 

<HelloServlet - web.xml>

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://xmlns.jcp.org/xml/ns/javaee"
	xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
	id="WebApp_ID" version="4.0">
	<context-param>
		<param-name>log4jConfigLocation</param-name>
		<param-value>/WEB-INF/classes/log4.properties</param-value>
	</context-param>
	<servlet>
		<servlet-name>HelloServlet</servlet-name>
		<servlet-class>com.day1.HelloServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>HelloServlet</servlet-name>
		<url-pattern>/day1/hello.kh</url-pattern>
	</servlet-mapping>
</web-app>
<!-- 
	Deployment Descriptor 배치서술자
	spring maven방식 빌드 -> pom.xml파일에 등록
	
	web.xml문서를 수정하면 반드시 서버를 내렸다가 다시 기동할 것(주의!)
 -->

 

<get방식 한글처리>

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

<% 
	// 여기는 자바영역(자바 코딩 가능함) - 스크립틀릿
	// localhost:9000/common/hangulTest.jsp -> null찍힘
	// localhost:9000/common/hangulTest.jsp?mem_name=김춘추 -> 김춘추찍힘
	// 쿼리스트링으로 넘어오는 한글 처리 -> server.xml문서 URIEncoding="UTF-8" 추가하기!
	String name = request.getParameter("mem_name");
	out.print(name);
%>

<!-- 여기는 HTML영역 -->

 

<jsp:include>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a.jsp페이지</title>
</head>
<body>
	<h2>1번</h2>
	<!-- 액션태그 -->
	<jsp:include page="b.jsp" />
	<h2>include 다음에</h2>
</body>
</html>
<!-- 
	a.jsp페이지를 출력하다가 jsp include를 만나면
	그 자리에 b.jsp페이지의 출력 내용을 포함시킨다.
	
	a.jsp에는 자바코드도 올 수 있고 html코드도 올 수 있다
	그런데 자바코드가 어떻게 브라우저에서 실행되는가?
	document.write("<b>굵은글씨</b>"); 이런느낌
 -->

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>b.jsp 페이지</title>
</head>
<body>
	b.jsp페이지 내용부분입니다.
</body>
</html>

 

<jsp 변환>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!-- 
		확장자는 jsp이지만 마임타입은 html이다
		브라우저는 이 파일을 html문서로 판단함
		왜냐하면 1) page 다이렉티브에 contentType에 설정된 마임타입때문이다
		실행하면(URL주소에 해당 페이지를 요청하면)
		c.jsp -> (jsp-api.jar : jsp엔진, 컨테이너 - 톰캣에있음)
		-> c_jsp.java로 변경됨 -> (servlet-api.jar : 서블릿엔진)
		-> c_jsp.class로 변경됨 -> out.print() out은 jsp가 제공하는 내장객체(dos창 아닌 브라우저에 쓴다)
		-> 자바스크립트와 같은 원리(document.write)로 자바인데 브라우저에서 동작 가능함
-->
<script>
	document.write("<b>굵은글씨</b>")
</script>

 

<변환된 c_jsp.java파일>

/*
 * Generated by the Jasper component of Apache Tomcat
 * Version: Apache Tomcat/9.0.43
 * Generated at: 2023-02-14 05:13:50 UTC
 * Note: The last modified time of this file was set to
 *       the last modified time of the source file after
 *       generation to assist with modification tracking.
 */
package org.apache.jsp.common;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.jsp.*;

// 선언부 -> 그런데 HttpServlet아님 -> jsp엔진이 별도로 만든 파일
// jsp엔진이 c.jsp파일을 c_jsp.java로 변경해줌
// 이 말은 jsp컨테이너가 없는 apache서버, IIS서버는 서비스 불가
// 너희 회사 서버에 JSP컨테이너 있어? -> 없으면 동작x
public final class c_jsp extends org.apache.jasper.runtime.HttpJspBase
    implements org.apache.jasper.runtime.JspSourceDependent,
    org.apache.jasper.runtime.JspSourceImports {

  private static final javax.servlet.jsp.JspFactory _jspxFactory = javax.servlet.jsp.JspFactory.getDefaultFactory();

  private static java.util.Map<java.lang.String, java.lang.Long> _jspx_dependants;

  private static final java.util.Set<java.lang.String> _jspx_imports_packages;

  private static final java.util.Set<java.lang.String> _jspx_imports_classes;

  static {
    _jspx_imports_packages = new java.util.HashSet<>();
    _jspx_imports_packages.add("javax.servlet");
    _jspx_imports_packages.add("javax.servlet.http");
    _jspx_imports_packages.add("javax.servlet.jsp");
    _jspx_imports_classes = null;
  }

  private volatile javax.el.ExpressionFactory _el_expressionfactory;
  private volatile org.apache.tomcat.InstanceManager _jsp_instancemanager;

  public java.util.Map<java.lang.String, java.lang.Long> getDependants() {
    return _jspx_dependants;
  }

  public java.util.Set<java.lang.String> getPackageImports() {
    return _jspx_imports_packages;
  }

  public java.util.Set<java.lang.String> getClassImports() {
    return _jspx_imports_classes;
  }

  public javax.el.ExpressionFactory _jsp_getExpressionFactory() {
    if (_el_expressionfactory == null) {
      synchronized (this) {
        if (_el_expressionfactory == null) {
          _el_expressionfactory = _jspxFactory.getJspApplicationContext(getServletConfig().getServletContext())
              .getExpressionFactory();
        }
      }
    }
    return _el_expressionfactory;
  }

  public org.apache.tomcat.InstanceManager _jsp_getInstanceManager() {
    if (_jsp_instancemanager == null) {
      synchronized (this) {
        if (_jsp_instancemanager == null) {
          _jsp_instancemanager = org.apache.jasper.runtime.InstanceManagerFactory
              .getInstanceManager(getServletConfig());
        }
      }
    }
    return _jsp_instancemanager;
  }

  // 서블릿의 초기화 담당 - 톰캣서버(jsp엔진)가 생성하고 로딩해줌(개발자 책임 아니다)
  // 톰캣은 WAS(Web Application Server)
  public void _jspInit() {
  }

  // 자원 소멸해주는 함수 - 자동호출(컨테이너가 대신 해줌) -> 자원반납, 스레드반납 자동
  public void _jspDestroy() {
  }

  // 개발자가 작성한 코드는 모두 service()로 들어간다
  // jsp에 변수 선언하면 지역변수 -> <% %> 스크립틀릿 영역에 선언하면 다 지역변수
  // 서비스메소드 파라미터의 변수 -> 지역변수, 파라미터에 요청객체와 응답객체를 주입받는다(톰캣이 주입)
  // 톰캣-> jsp-api.jar + servlet-api.jar (컴파일: 고급언어(java)->저급언어(class)로 변환)
  // 서블릿은 싱글톤으로 관리된다 -> 하나이다
  // 서비스 메소드의 파라미터자리에 request객체와 response객체를 주입해주는 역할을 톰캣이 한다
  // 의존성 주입(제어역전, 내가 직접 인스턴스화x, 밖에서넣어줌)
  public void _jspService(final javax.servlet.http.HttpServletRequest request,
      final javax.servlet.http.HttpServletResponse response)
      throws java.io.IOException, javax.servlet.ServletException {

    if (!javax.servlet.DispatcherType.ERROR.equals(request.getDispatcherType())) {
      final java.lang.String _jspx_method = request.getMethod();
      if ("OPTIONS".equals(_jspx_method)) {
        response.setHeader("Allow", "GET, HEAD, POST, OPTIONS");
        return;
      }
      if (!"GET".equals(_jspx_method) && !"POST".equals(_jspx_method) && !"HEAD".equals(_jspx_method)) {
        response.setHeader("Allow", "GET, HEAD, POST, OPTIONS");
        response.sendError(HttpServletResponse.SC_METHOD_NOT_ALLOWED,
            "JSP들은 오직 GET, POST 또는 HEAD 메소드만을 허용합니다. Jasper는 OPTIONS 메소드 또한 허용합니다.");
        return;
      }
    }

    final javax.servlet.jsp.PageContext pageContext;
    javax.servlet.http.HttpSession session = null;
    final javax.servlet.ServletContext application;
    final javax.servlet.ServletConfig config;
    javax.servlet.jsp.JspWriter out = null;
    final java.lang.Object page = this;
    javax.servlet.jsp.JspWriter _jspx_out = null;
    javax.servlet.jsp.PageContext _jspx_page_context = null;

    try {
      response.setContentType("text/html; charset=UTF-8");
      pageContext = _jspxFactory.getPageContext(this, request, response,
          null, true, 8192, true);
      _jspx_page_context = pageContext;
      application = pageContext.getServletContext();
      config = pageContext.getServletConfig();
      session = pageContext.getSession();
      out = pageContext.getOut();
      _jspx_out = out;

      out.write("\r\n");
      out.write("<script>\r\n");
      out.write("\tdocument.write(\"<b>굵은글씨</b>\")\r\n");
      out.write("</script>");
    } catch (java.lang.Throwable t) {
      if (!(t instanceof javax.servlet.jsp.SkipPageException)) {
        out = _jspx_out;
        if (out != null && out.getBufferSize() != 0)
          try {
            if (response.isCommitted()) {
              out.flush();
            } else {
              out.clearBuffer();
            }
          } catch (java.io.IOException e) {
          }
        if (_jspx_page_context != null)
          _jspx_page_context.handlePageException(t);
        else
          throw new ServletException(t);
      }
    } finally {
      _jspxFactory.releasePageContext(_jspx_page_context);
    }
  }
}

 

<HelloServlet 출력>

package com.day1;

import java.io.IOException;
import java.io.*;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.log4j.Logger;

/*
 form 전송시 클라이언트측의 요청을 서블릿이 듣는다(받는다)
 method="get"이면 doGet호출
 method="post이면 doPost호출
 
 자바가 서블릿이 되기위한 조건은 반드시 HttpServlet을 상속받는 것이다
 상속을 받으면 doGet과 doPost를 오버라이딩 할 수 있는데
 이 함수의 파라미터를 통해서 request 요청 객체와 response 응답 객체를 주입받는다
 톰캣 서버에서 주입해줌
 
 웹서비스를 위해서는 URL 등록이 필수 -> 브라우저가 실행 주체이니까
 프로젝트에 필요한 URL등록은 annotation과 web.xml문서를 통해서 가능하다
 이 중 annotation은 자동이고 편하지만 수동처리와 비교해서 추가작업이 불가능한 단점이 있다
 xml문서를 통해서 객체를 등록하고 주입받는다
 이유는 spring 사용시 메이븐 레포를 이용한 프로젝트 생성인 경우에 xml문서로 환경설정함
 클래스 사이의 객체주입 관계도 xml문서로 처리 가능함
*/
public class HelloServlet extends HttpServlet {
	Logger logger = Logger.getLogger(HelloServlet.class);

	@Override
	public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
		System.out.println("doGet 호출");
		logger.info("doGet 호출 성공");
		res.setContentType("text/html;charset=UTF-8");
		PrintWriter out = res.getWriter();
		String msg = "안녕하세요";
		out.print("<font size=28px color=red>"+msg+"</font>");
	}

	@Override
	public void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
		System.out.println("doPost 호출");
		logger.info("doPost 호출 성공");
	}
}

 

<1 - table태그 먼저>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>부서관리</title>
<%@ include file="../../common/easyUI_common.jsp"%>
</head>
<body onload="dataGrid()">
	<table id="dg"></table>
	<script type="text/javascript">
		$('#dg').datagrid({
			title: '부서관리',
		  url:'datagrid_data.json',
		  columns:[[
		    {field:'code', title:'Code', width:100},
		    {field:'name', title:'Name', width:100},
		    {field:'price', title:'Price', width:100, align:'right'}
	    ]]
		});
	</script>
</body>
</html>

 

<2 - jquery ready사용, 태그 나중>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>부서관리1</title>
<%@ include file="../../common/easyUI_common.jsp"%>
</head>
<body onload="dataGrid()">
	<script type="text/javascript">
	// jquery에서 제공하는 ready 함수 - 의미: DOM 구성이 되었을 때 
	$(document).ready(function(){
		// dg가 누구인지 모르면 화면에 출력안됨
		$('#dg').datagrid({
			title: '부서관리',
		  url:'datagrid_data.json',
		  columns:[[
		    {field:'code', title:'Code', width:100},
		    {field:'name', title:'Name', width:100},
		    {field:'price', title:'Price', width:100, align:'right'}
	    ]]
		});
	})
	</script>
	<table id="dg"></table>
</body>
</html>

 

<3 - window load 사용, 태그나중>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>부서관리2</title>
<%@ include file="../../common/easyUI_common.jsp"%>
</head>
<body onload="dataGrid()">
	<script type="text/javascript">
	window.addEventListener("load", function(event){
		$('#dg').datagrid({
			title: '부서관리',
		  url:'datagrid_data.json',
		  columns:[[
		    {field:'code', title:'Code', width:100},
		    {field:'name', title:'Name', width:100},
		    {field:'price', title:'Price', width:100, align:'right'}
	    ]]
		});
	})
	</script>
	<table id="dg"></table>
</body>
</html>

 

<부서등록 - 기본페이지>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>부서관리3</title>
<%@ include file="../../common/easyUI_common.jsp"%>
<script type="text/javascript">
	const insertForm = () => {
		 console.log("insertForm 호출");
			// 부서등록 다이얼로그
			$('#dg_dept').dialog({
			    title: '부서정보등록',
			    width: 400,
			    height: 400,
			    closed: false,
			    cache: false,
			    href: 'insertForm.jsp',
			    modal: true
			});
		};
</script>
</head>
<body>
	<table id="dg"></table>
	<div id="toolbar">
		<a href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-add" plain="true" onclick="insertForm()">입력</a>
	</div>
	<div id="dg_dept"></div>
	<script type="text/javascript">
		// 부서관리 테이블
		$('#dg').datagrid({
			title: '부서관리',
		  url:'../dept.json',
		  toolbar: '#toolbar',
		  columns:[[
		    {field:'deptno', title:'부서번호', width:100},
		    {field:'dname', title:'부서명', width:100},
		    {field:'loc', title:'지역', width:100, align:'right'},
	    ]]
		});
   </script>
</body>
</html>

 

<부서등록 -  dialog>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>부서등록 - 다이얼로그</title>
<%@ include file="../../common/easyUI_common.jsp"%>
<script type="text/javascript">
	const insertAction = () => {
		console.log($("#_easyui_textbox_input1").val()
			+ ", " + $("#_easyui_textbox_input2").val()
			+ ", " + $("#_easyui_textbox_input3").val())
				
			const u_deptno = $("#_easyui_textbox_input1").val()
			const u_dname = $("#_easyui_textbox_input2").val()
			const u_loc = $("#_easyui_textbox_input3").val()
				
			$.ajax({
				method: "get",
				url: "/dept/insertAction.do?deptno="+u_deptno+"&dname="+u_dname+"&loc="+u_loc,
					success: function(data){
						console.log("톰캣서버에서 응답으로 보낸 값 => " + data)
					}
			})
	}
</script>
</head>
<body>
	<div style="margin: 20px 0;"></div>
	<div style="margin: 30px">
		<form id="f_dept" action="insertAction.do" method="get">
			<div style="margin-bottom: 20px">
				<input class="easyui-textbox" name="deptno" label="부서번호: "
					labelPosition="top" data-options="prompt:'Enter a deptNo'"
					style="width: 200px;">
			</div>
			<div style="margin-bottom: 20px">
				<input class="easyui-textbox" name="dname" label="부서명:"
					labelPosition="top" data-options="prompt:'Enter a deptName'"
					style="width: 300px;">
			</div>
			<div style="margin-bottom: 30px">
				<input class="easyui-textbox" name="loc" label="지역:"
					labelPosition="top" data-options="prompt:'Enter a Location'"
					style="width: 300px;">
			</div>
			<div style="text-align: center">
				<a href="javascript:insertAction()" class="easyui-linkbutton"
					iconCls="icon-ok" style="width: 200px; height: 32px">등록</a>
			</div>
		</form>
	</div>
</body>
</html>

 

<부서등록 - 서블릿 연결>

package com.day1;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.log4j.Logger;

public class DeptManager extends HttpServlet {
	Logger logger = Logger.getLogger(DeptManager.class);

	@Override
	public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
		logger.info("[[ doGet 호출 성공 ]]");
		String u_deptno = req.getParameter("deptno");
		String u_dname = req.getParameter("dname");
		String u_loc = req.getParameter("loc");
		res.setContentType("text/plain;charset=UTF-8");
		PrintWriter out = res.getWriter();
		out.print(u_deptno + ", " + u_dname + ", " +  u_loc);
	}

	@Override
	public void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
		logger.info("[[ doPost 호출 성공 ]]");
	}
}

 

<부서등록 - web.xml에 DeptServlet 추가>

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://xmlns.jcp.org/xml/ns/javaee"
	xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
	id="WebApp_ID" version="4.0">
	<context-param>
		<param-name>log4jConfigLocation</param-name>
		<param-value>/WEB-INF/classes/log4.properties</param-value>
	</context-param>
	<servlet>
		<servlet-name>HelloServlet</servlet-name>
		<servlet-class>com.day1.HelloServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>HelloServlet</servlet-name>
		<url-pattern>/day1/hello.kh</url-pattern>
	</servlet-mapping>
	<servlet>
		<servlet-name>DeptServlet</servlet-name>
		<servlet-class>com.day1.DeptManager</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>DeptServlet</servlet-name>
		<url-pattern>/dept/insertAction.do</url-pattern>
	</servlet-mapping>
</web-app>
<!-- Deployment Descriptor 배치서술자 spring maven방식 빌드 -> pom.xml파일에 등록 web.xml문서를 
	수정하면 반드시 서버를 내렸다가 다시 기동할 것(주의!) -->
저작자표시 비영리 변경금지 (새창열림)

'국비학원 > 수업기록' 카테고리의 다른 글

국비 지원 개발자 과정_Day56  (0) 2023.02.16
국비 지원 개발자 과정_Day55  (1) 2023.02.15
국비 지원 개발자 과정_Day53  (1) 2023.02.13
국비 지원 개발자 과정_Day52  (1) 2023.02.10
국비 지원 개발자 과정_Day51  (0) 2023.02.09

관련글

댓글

티스토리툴바