국비지원 68일차 - JSP 제약조건, MVC구조 모델2, jQuery size, plugin

JSP 제약조건
MVC 2모델은 모든 control을 Servlet이 해야한다.
jsp로 접근하는 것은 막는 것이다.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>MyWeb</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <!-- Prevent JSP access -->
  <security-constraint>
  	<web-resource-collection>
  		<web-resource-name>Prevent JSP</web-resource-name>
  		<description>prevent jsp</description>
  		<url-pattern>*.jsp</url-pattern>
  		<http-method>GET</http-method>
  		<http-method>POST</http-method>
  	</web-resource-collection>
  	<auth-constraint>
  		<role-name></role-name>
  	</auth-constraint>
  </security-constraint>
</web-app>

MVC구조 모델2

FrontController

package common.controller;

import java.io.FileInputStream;
import java.io.IOException;
import java.util.Enumeration;
import java.util.HashMap;
import java.util.Properties;

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

@WebServlet(
		urlPatterns = { "*.do" }, 
		initParams = { 
				@WebInitParam(
						name = "config", 
						value = "C:\\myjava\\workspace\\MVCweb\\WebContent\\WEB-INF\\Command.properties")
		})
public class FrontController extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private HashMap<String, Object> cmdMap = new HashMap<>();
	//Command.properties에 설정되어 있는 값들을 해쉬맵에 옮길 예정
	
	public void init(ServletConfig conf) throws ServletException {
		System.out.println("init()호출됨..");
		String props = conf.getInitParameter("config");
		System.out.println(props);
		Properties pr = new Properties();
		//Command.properties파일 정보를 Properties로 옮겨보자
		try {
			FileInputStream fis = new FileInputStream(props);
			pr.load(fis);
			if (fis!=null) fis.close();
			
			//pr의 key값들을 추출해보자.
			Enumeration<Object> en = pr.keys();
			while(en.hasMoreElements()) {
				String cmd = en.nextElement().toString();//key값 "/index.do"
				System.out.println("cmd= "+cmd);
				String className=pr.getProperty(cmd);//value값 "common.controller.IndexAction"
				if(className!=null) {
					className=className.trim();
				}
				System.out.println("className= "+className);
				//className의 클래스를 인스턴스화
				Class<?> cls = Class.forName(className);
				Object cmdInstance = cls.newInstance();
				//해당 클래스의 객체를 생성해줌
				cmdMap.put(cmd, cmdInstance);
			}//while() --
		} catch (Exception e) {
			e.printStackTrace();
		}
		
	}//init() ---

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

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		process(request,response);
	}
	
	protected void process(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException{
		
		//1. 클라이언트의 요청 URI를 분석해보자.
		String cmdUri = req.getServletPath();
		System.out.println("cmdUri= "+cmdUri);
		
		Object instance = cmdMap.get(cmdUri);
		if(instance==null) {
			System.out.println("action이 null");
			throw new ServletException("Action이 null");
		}
		
		AbstractAction action=(AbstractAction)instance;
		//서브컨트롤러(액션)가 수행할 메소드를 호출한다.
		try {
			action.execute(req, res);
			//execute에서는 로직을 수행한 뒤에 뷰페이지와 이동방식을 지정
			String viewPage=action.getViewPage();
			boolean isRedirect=action.isRedirect();
			if(isRedirect) {
				//redirect 방식으로 이동
				res.sendRedirect(viewPage);
			}else {
				//forward 방식으로 이동
				RequestDispatcher disp = req.getRequestDispatcher(viewPage);
				disp.forward(req, res);
			}
		} catch (Exception e) {
			e.printStackTrace();
			throw new ServletException(e);
		}
	}
}

 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
jQuery
size

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin :0;
            padding:0;
        }
        body{
            font-size: 9pt;
        }
        #info{
            border: 1px solid mediumblue;
            height: 120px;
            margin: 50px 0 0 100px;
            width: 500px;
        }
        #parent{
            border: firebrick 1px solid;
            position: absolute;
            width: 500px;
            height: 400px;
            left: 100px;
            top: 200px;
        }
        #fish{
            position: absolute;
            padding: 30px;
            margin: 50px;
            left:50px;
            top: 100px;
            border: 20px solid fuchsia
        }
    </style>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            var $fish = $('#fish');
            var $info = $('#info');
            var str = "기본 크기 폭 : "+$fish.width()+" 높이: "+$fish.height()+"<br>";
                str+= "기본크기+padding 폭 : "+$fish.innerWidth()+" 높이 : "+$fish.innerHeight()+"<br>";
                str+= "기본크기+padding+border 폭 : "+$fish.outerWidth()+" 높이 : "+$fish.outerHeight()+"<br>";
                str+= "기본크기+padding+border+margin 폭 : "+$fish.outerWidth(true)+" 높이 : "+$fish.outerHeight(true)+"<br>";
            $info.append(str);
        })
    </script>
</head>
<body>
    <div id="info">
        (padding=30px, border=20px, margin=50px)
        <br>
    </div>
    <div id="parent">
        <img src="images/fish.png" id="fish">
    </div>
</body>
</html>

plugin

jQuery 효과들을 미리 만들어 둔 사이트
http://www.dynamicdrive.com/

확대효과

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.magnifier.js"></script>
</head>
<body>
    <h1>jQuery Image Magnify Plugin</h1>
    <h2>이미지 요소에 클래스 속성으로 magnify를 반드시 지정해야 한다.</h2>
    <img src="images/fish.png" class="magnify" style="width:200px; height:150px" />
    <img src="images/fish.png" class="magnify" border="0" data-magnifyby="2" data-magnifyduration="1500"/>
    <!--data-magnifyby : 확대 배수 지정. 디폴트값은 3배
        data-magnifyto : 확대 배수를 픽셀 단위로 지정할 때
        data-magnifyduration : 확대 지속시간을 밀리세컨드 단위로 지정 디폴트 : 500-->
</body>
</html>