(80)[Web]16일차: ((JSP)) ■ JSP 액션 태그(JSP Action Tag) ■, F_WebApp16~19

1. 2023.12.18(월)

■■■ JSP 액션 태그(JSP Action Tag) ■■■

 

○ 개요

    JSP 액션 태그는 클라이언트 혹은 서버에 어떤 동작을 수행하도록 명령을 내리는 태그로 
    JSP 페이지 안에서 자바 빈즈를 사용할 수 있도록 하는 액션 태그와 페이지를 활용할 수 있도록 하는 액션 태그로 나눌 수 있다.

    - JSP 빈과 관련된 액션 태그

    `<jsp:useBean>`, `<jsp:setProperty>`, `<jps:getProperty>`

 

    - JSP 페이지 모듈과 요청흐름 처리를 위한 액션 태그

    `<jsp:include>`, `<jsp:forward>`, `<jsp:param>` 등

 

○ 형식 및 구조

 

    `『<jsp:액션태그 속성="값"> 태그에 들어있는 내용</jsp:액선태그>』`

    `『<jsp:액션태그 속성="값">』` <- 태그에 들어있는 내용이 없을 경우

 

 

※ 스코프(Scope)

 

    JSP 액션 태그를 통해 생성된 객체는 그 객체가 사용될 수 있는 스코프 혹은 라이프사이클(Life Cycle : 생명주기) 속성을 갖는데, 이것은 생성된 객체의 레퍼런스가 어디에서 사용될 수 있고, 언제 삭제될 것인지를 기술한다.

    - page

        생성된 객체는 단일 클라이언트의 요청에 의해 생성된 페이지 내에서 접근하여 사용될 수 있다.
        생성된 객체는 실질적으로 pageContext 에 저장된다.

 

    - request

        생성된 객체는 단일 클라이언트의 요청이 처리되는 동안에 접근하여 사용될 수 있다.
        request가 page 와 다른 점은 `request` 에서는 `forward` 나 `include` 를 사용해서 
        다른 페이지로 제어가 이동되는 경우에도 객체에 접근하여 사용할 수 있다.
        생성된 객체는 실질적으로 HttpServletRequest 에 저장된다.

    - session

        생성된 객체는 사용자의 세션이 유지되는 어느 곳에서나 접근하여 사용될 수 있다.
        생성된 객체는 실질적으로 HttpSession에 저장된다.

    - application

        생성된 객체는 웹 응용프로그램의 라이프 사이클 동안에 웹 응용프로그램에 소속된 임의의 Servlet 과 JSP 에서 접근하여 사용될 수 있다.
        생성된 객체는 실질적으로 ServletContext 에 저장된다.

○ <jsp:param>

    <jsp:param> 태그는 요청한 페이지로 저오를 전달할 때 사용하는 태그로 현재 페이지에서 요청한 페이지로 인자(parameter)와 인자값(value) 형태로 넘겨준다.

    <jsp:param name="paramName" value="var" />

    ※ 이 태그는 단독으로 사용하지 못하고 
        <jsp:inclue> 나 <jsp:forward> 태그의 내부에 기술하여 사용한다.

    - name  속성

        포함되는 JSP 페이지에 전달할 파라미터의 이름을 표시.

    - value 속성

        전달할 파라미터 값을 표시. 이때, value 속성 값으로 표현식을 사용하는 것도 가능하다.

 

○ <jsp:forward>

    <jsp:forward> 태그는 현재 머물고 있는 JSP 페이지에서 URL로 지정한 특정한 페이지로 넘어갈 때 사용하는 태그로
    현재 페이지에서 조건에 따라 서로 다른 페이지를 호출할 경우 사용된다. 이 태그의 특이한 점은 현재 페이지에 대한 URL만 나타날 뿐 제어가 넘어간 특정 페이지의 URL 이 전혀 나타나지 않는다는 점이다.
    클라이언트의 웹 브라우저 주소란에 보이는 URL 과 실제 브라우저에서 읽어들이고 있는 문서가 서로 다르기 때문에
    사용자는 이러한 상황이 벌어지고 있는 지를 감지할 수 없다.
    그리고 제어가 넘어갈 때 request 내부 객체도 같이 전달된다.
 

 <jsp:formard page="이동할페이지이름" />

 

    - page 속성

        이동할 페이지의 이름을 기술하며 page 속성의 값인 이동할 페이지의 이름은 웹 어플리케이션 상대 경로나, 웹 어플리케이션 절대 경로로 지정할 수 있고, 표현식을 사용할 수도 있다.

    - <jsp:forward> 액션 태그에서 <jsp:param> 태그로 프로그램의 제어가 이동할 페이지에 파라미터 값을 전달할 수 있으며
        전달받은 값은 『request.getParameter("파라미터이름")』으로 넘겨받는다.

 

        <jsp:forward page="이동할페이지이름">
            <jsp:param naem="paramName1" value="var1">
            <jsp:param naem="paramName2" value="var2">
        </jsp:forward page="<%=url%>" />

    - 단순히 page 속성에 지정된 페이지로 이동하는데 그치는 것이 아니라 이동할 페이지에 자신의 정보를 파라미터 형식으로 전달할 수 있는 것이다.

        <jsp:forward page="view.jsp" />
        <%
            String url = "/To.jsp";
        %>
        </jsp:forward>

 

○ <jsp:include>

    <jsp:includa> 태그는 웹페이지를 공통된 페이지를 모듈화하여 레이아웃을 구성(작성)할 수 있도록 지원한 태그이다.
    include 디렉티브(<@ include>)와 함께
    다른 페이지를 현재 페이지에 포함시킬 수 있는 기능을 가진 태그이다.
    단, include 디렉티브는 단순하게 소스의 내용이 텍스트로 포함되지만 <jsp:include> 액션 태그를 포함시킬 페이지의 처리 결과를 포함시킨다는 점에서 차이를 갖는다.
    포함되는 페이지 html, jsp, Servlet 페이지 모두 가능하며 include 디렉티브는 주로 조각 코드를 삽입할 때 사용되고, <jsp:include>액션 태그는 페이지를 모듈화 할 때 사용된다.
     즉, 템플릿 페이지를 작성할 때 주로 사용된다는 것이다.또한, <jsp:include>액션 태그 같은 request 기본 객체를 공유한다.

     <jsp:include page="url" flush="false" />

    - page 속성

        현재 페이지에 결과가 포함될 대상의 페이지와 이름

    - flush 속성

        출력 버퍼의 플러시 유무
        포함될 페이지로 이동할 때 현재 페이지가 지금까지 출력 버퍼에 저장한 결과를 어떻게 처리할지를 결정한다.
        flush 속성의 값은 false로 설정하는 것이 일반적이다.
        flush 속성의 값을 true로 지정할 경우 일단 출력 버퍼의 내용을 웹 브라우저로 전송하게 되는데
        이 때, 헤더 정보도 함께 전송된다. 해더 정보가일단 웹 브라우저로 전송되고 나면 이후 헤더 정보를 추가하더라도 결고가 반영되지 않는다.

        <jsp:include page="url" flush="false"> 
            <jsp:param naem="paramName1" value="var1">
            <jsp:param naem="paramName2" value="var2">
        </jsp:include>

 

 

※ 자바 빈즈(Java Bean)

    JSP 페이지에 화면 출력 부분과 로직들이 섞여 있는 형태로 작성할 경우 JSP 페이지를 이해하기 어렵고 디자이너와 협업도 어려워 진다.  
    또한, JSP 페이지에 화면 출력 부분과 로직들이 혼재한 형태의 코드는 재사용을 하는 것도 어려워지게 된다.  
    JSP에서는 자바로 작성한 클래스 중에 자바빈즈 구약에 맞게 작성된 클래스를 JSP 에서 사용 가능하게 하였으며,  
    이를 통해 프리젠테이션(웹 디자이너 측)부분과 비즈니스 로직(개발자 측)을 처리하는 부분을 분리하여 작성할 수 있다.  
    이렇게 함으로써 웹의 내용으로부터 웹의 표현 부분을 분리하게 되고 동적인 웹 페이지 제작을 위한 개발과 관리에 있어 명확한 분리가 가능하다.  
    또한, 동일 기능이 페이지 구성이 달라서 반복적으로 사용 되는 경우 웹 페이지를 효율적으로 작성, 수정하려면 반복적으로 사용되는 코드를 재사용할 수 있어야 한다.  
    빈은 이와 같은 효율적인 코딩 작업을 가능하게 된다.  

    현재 개발되었거나 개발중인(작업 중인) 프로그램들은 모두 MVC 기법에 의 해 개발되고 있다.  
    MVC 기법은 프로그램을 모델(Model), 뷰(View), 컨트롤러(Controller)로 나누어 개발을 하는데...  
    Model 은 로직을 가지고 있는 부분으로 DB와 연동하는 부분이고  
    View 는 사용자에게 제공하는 화면으로 UI(User Interface)에 해당하며,  
    Controller 는 View 와 Model 사이에서 흐름을 제어하는 개념이다.  

    JAP 페이지 MVC 에서 View 에 해당하고, 바로 이 View 를 모듈화 하는 것이 템플릿 페이지이며, 자바 빈즈는 Model에 해당한다고 볼 수 있다.  

○ <jsp:useBean>

    <jsp:useBean> 액션 태그는 자바객체를 생성하거나 기존에 만들어져 있는 객체를 반환한다.

    <jsp:useBean id="name" scope="page|request|sesseion|application" typeSpec />

    - id 속성

        객체 인스턴스르 식별하는 이름으로 대소문자를 엄격하게 구분한다.
        한 번 생성된 Bean 이 소멸할 때 까지는 같은 id 를 중복해서 사용할 수 없다.

    - scope 속성

    객체 참조 범위로 기본값(default)은 page 이다.

        ·page

        객체 참조는 service() 호출이 종료될 떄 소멸.

 

        ·request

        HttpsevletRequest 객체가 소멸되지 않는 한 존재하며,컨테이너에 의해 생성된 서블릿은 HttpServletRequest 의 setAttribute() 메소드를 이용하여 객체를 HttpServletRequest 에 바인딩 시킨다.

        ·sesstion

        객체는 클라이언트의 요청과 구별되며, session 이 살아있는 동안에 존재하며, 컨테이너에 의해 생성된 서블릿은 HttpSession 의 putBalue(String key,Object value)메소드를 이용하여 객체를 HttpSession 에 바인딩 시킨다.

        ·application

        가장 수명(생명주기)이 길다. SevletContext 의 setAttribute()를 통해 객체를 SevletContext 에 바인딩시킨다.

    - typeSpec 속성

        class="class_name" |
        class="class_name" type="type_name"|
        type="type_name" class="class_name" |
        beanName="bean_name" type="type_name" |
        tpe="type_name" beanName="bean_name" |
        type="type_name"

 

        · class

        완전한 형태의 클래스 이름으로 beanName 이 정의되어 있지 않은 상황이라면 반드시 정의해야 한다.

        · beanName

        java.beans.Beans 클래스의 instantiate() 메소드에 ㅏ용할 vean 이름으로 type 과 beanName 을 지정한 경우에는 class를 생략할 수 잇다.
        주로 class 인자를 쓰지 않을 경우 사용한다. 내부적으로 컨테이너는 id 와 scope 를 이ㅛㅇ해서 객체를 찾는다.
        이 과정에서 만약 찾지 못할 경우 현재 클래스 로더로 instantiate() 메소드를 호출하는데, 이때 bena 의 이름을 인자로 전달한다. 이 인스턴스의 생성이 실패하게 되면 예외가 발생한다.

        · type클래스의 형(Type)을 지정하는, 생략 가능한 특성이다.

        객체가 이 특성으로 지정된 형(type)이 아닐 경우 ClassCastException 예외가 발생하게 된다.

    <jsp:useBean id="name" scope="page" typeSpec>

        <jsp:setProperty name="bean_name" prop_expr />

    <%

        // 스크립릿을 이용하여 다른 속성 값을 호출하는 기능을 가진 함수를 호출할 수 있다.

    %>

    </jsp:useBean>

 

○ <jsp:setProperty>

 

    <jsp:setProperty> 액션 태그는 자바 빈에 속성 값을 할당한다. name 속성에 기술된 이름에 해당하는 bean 클래스는 <jsp:Bean> 액션 태그를 이용해서 이 액션이 나타나기 전에 미리 정의되어야 한다.

    <jsp:setProperty name="bean_name" prop_expr />

    - name 속성

        <jsp:userBean> 액션 태그에 의해 정의된 bean 인스턴스 이름
    

    - prop_expr

   property="*" |
        property="property_name" |
        property="property_name" param="parameter_name" |
        property="property_name" value="parameter_value" |

        · property

            값을 설정하고자 하는 bean 속서의 이름으로 『"*"』으로 설정하면 ServeletRequest 안에 모든 인자들 중 bean 속성과 데이터타입이 일치하는 것을 찾아서 각각의 속성들을 각가의 인자들의 값으로 설정한다.
            값이 『""』인 경우 속성은 변하지 않는다.

        · param

            bean 속성에 설정하고자 하는 값을 파라미터에서 지정하고자 할 경우 사용한다.

        · value 

            bean 속성에 설정할 값을 지정하며 하나의 <jsp:setProperty> 액션 태그가 param 과 value 를 동시에 가질 수 없다.

○ <jsp:getProperty>

    <jsp:getProperty> 액션 태그는 bean 의 속성값을 얻는데 사용한다.

    bean의 속성값을 얻어 String 으로 변환한 다음 출력 스트림으로 보낸다.

    <jsp:getProperty name="name" property="property_name">

 

    - name 속성

        속성을 얻고자 하는 bean의 인스턴스 이름

    - property 속성

        얻고자 하는 속성의 이름

---

F_WebApp16: JSP 액션 태그 실습

1,2,3 방법 모두 결과는 동일

ㄴ/WebApp16/src/com/test

ㄴㄴCalc.java

/* =======================
	Calc.java
========================== */

package com.test;

public class Calc
{
	// 주요 속성  구성
	private int su1;		//-- 피연산자1 (정수 형태)
	private String op;		//-- 연산자 (문자열 형태)
	private int su2;		//-- 피연산자2 (정수 형태)
	
	// 생성자 정의 하지 않음(사용자 정의 생성자 없음)
	// -> default 생성자 자동 삽입
	
	// getter / setter 구성
	public int getSu1()
	{
		return su1;
	}
	public void setSu1(int su1)
	{
		this.su1 = su1;
	}
	public String getOp()
	{
		return op;
	}
	public void setOp(String op)
	{
		this.op = op;
	}
	public int getSu2()
	{
		return su2;
	}
	public void setSu2(int su2)
	{
		this.su2 = su2;
	}
	
	// 메소드 추가
	public String result()
	{
		String result = "";
		
		int s=0;
		if(op != null)
		{
			if(op.equals("+"))
				s = su1 + su2;
			else if(op.equals("-"))
				s = su1 - su2;
			else if(op.equals("*"))
				s = su1 * su2;
			else if(op.equals("/"))
				s = su1 / su2;
			
			result = String.format("%d %s %d = %d", su1, op, su2, s);
		}
		
		return result;
	}
	
}

ㄴ/WebApp16/WebContent

ㄴㄴCalc.jsp_JSP 액션 태그 실습

<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Calc.jsp</title>
<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="section">

<div>
	<h1>JSP 액션 태그 실습</h1>
</div>

<div class="layout">
	<!-- 첫 번재 방법 -->
	<!-- <form action="Calc_ok1.jsp" method="post" name="myForm"> -->
	
	<!-- 두 번재 방법 -->
	<!-- <form action="Calc_ok2.jsp" method="post" name="myForm"> -->
	
	<!-- 세 번재 방법 -->
	<form action="Calc_ok3.jsp" method="post" name="myForm">
		<table class="table">
			<tr>
				<th>첫 번째 정수</th>
				<td><input type="text" name="su1" class="txt"></td>
			</tr>
			<tr>
				<th>연산자</th>
				<td>
					<select name="op">
						<option value="+">더하기</option>
						<option value="-">빼기</option>
						<option value="*">곱하기</option>
						<option value="/">나누기</option>
					</select>
				</td>
			</tr>
			<tr>
				<th>두 번째 정수</th>
				<td><input type="text" name="su2" class="txt"></td>
			</tr>
			<tr>
				<td colspan="2">
					<button type="submit" class="btn" style="width: 100%;"> = </button>
				</td>
			</tr>
			
		</table>
	</form>
</div>

</body>
</html>

ㄴㄴCalc_ok1.jsp_첫 번째 방법 처리결과

<%@page import="com.test.Calc"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
	// 이전 페이지(Calc.jsp)로 부터 넘어온 데이터 수신
	// -> su1, su2, op
	String strSu1 = request.getParameter("su1");
	String strSu2 = request.getParameter("su2");
	String op = request.getParameter("op");
	
	int su1, su2;
	su1 = su2 = 0;
	String str="";
	
	if(strSu1.equals("") || strSu2.equals("") || strSu1==null || strSu2==null)
		response.sendRedirect("Calc.jsp");
	else{
		su1 = Integer.parseInt(strSu1);
		su2 = Integer.parseInt(strSu2);
		
		// 자바에서 우리가 설계한 클래스를 사용하기 위해... 객체생성
		Calc ob = new Calc();
		//-- 이클립스 자동완성 기능을 사용하여 구문을 작성할 경우
		//		『@page import="com.test.Calc"』이 구문도 함께 생성되어 처리됨.
		//		혹은 자동완성 기능을 사용하지 않을 경우도
		//		『@page import="com.test.Calc"』이와 같은 구문을 직접 작성해서
		//		해당 클래스를 사용할 수 있도로 처리해 주어야 함.
		//		또는, 생성 구문에 직접 『com.test.Calc ob=new com.test.Calc();』
		//		와 같이 작성하는 거도 가능함.
		
		ob.setSu1(su1);
		ob.setSu2(su2);
		ob.setOp(op);
		
		str = ob.result();
	}
	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Calc_ok1.jsp</title>
<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="section">

<div>
	<h1>첫 번째 방법 처리결과</h1>
</div>
	
<div class="layout">
	<h2><%=str %></h2>
</div>

</body>
</html>

ㄴㄴCalc_ok2.jsp_두 번째 방법 처리결과

<%@page import="com.test.Calc"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%/* 
	// 이전 페이지(Calc.jsp)로 부터 넘어온 데이터 수신
	// -> su1, su2, op
	String strSu1 = request.getParameter("su1");
	String strSu2 = request.getParameter("su2");
	String op = request.getParameter("op");
	
	int su1, su2;
	su1 = su2 = 0;
	String str="";
	
	if(strSu1.equals("") || strSu2.equals("") || strSu1==null || strSu2==null)
		response.sendRedirect("Calc.jsp");
	else{
		su1 = Integer.parseInt(strSu1);
		su2 = Integer.parseInt(strSu2);
		
		Calc ob = new Calc();
		
		ob.setSu1(su1);
		ob.setSu2(su2);
		ob.setOp(op);
		
		str = ob.result();
	}
	*/
%>
<%
	/* String strSu1 = request.getParameter("su1");
	int su1 = Integer.parseInt(strSu1); */
%>

<!-- Calc 클래스의 객체를 현재 페이지에서 사용할 수 있도록 지정 -->
<jsp:useBean id="ob" class="com.test.Calc"></jsp:useBean>
<!-- 이 구문은 스크립릿 영역에서
	『com.gets.Calc ob = new com.test.Cals();』
	을 작성하여 import 구문을 자동으로 처리한 것과
	마찬가지 효과를 적용하게 된다. -->
	
<!-- requset.getParameter() 메소드를 통해 넘겨받은(전달받은) 데이터를 
	『Calc』 클래스를 기반으로 만들어진 『ob』객체에 넘겨주기 위 한 속성 지정 -->
<%-- <jsp:setProperty property="su1" name="ob" value="<%=su1 %>"/> --%>
<!-- 이 구문은 Calc_ok1.jsp 의 『ob.setSu1(su1);』과 같은 구문 -->

<!-- check~!!! -->
<!-- ※ 속성 이름과 동일한 파라미터인 경우
	『getParameter()』메소드 없이 바로 받을 수 있다. -->
	
	
<!-- ob.su1 = xxx; -->
<jsp:setProperty property="su1" name="ob"/>
<!-- ① request.getParameter() 처리 -> 매개변수를 전달하기 위한 데이터 수신 처리 -->
<!-- ② Integer.parseInt() 처리 	-> 매개변수를 전달하기 위한 형 변환 처리 -->
<!-- ③ ob.su1 						-> ob.setSu1() 호출 처리 -->
<!-- ==> 최종적으로 ob -> Calc 기반의 ob 객체의 su1 속성에
		이전 페이지로부터 넘겹다은 데이터를 적절한 데이터타입(형)으로 전달 -->
		
<jsp:setProperty property="su2" name="ob"/>
<jsp:setProperty property="op" name="ob"/>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Calc_ok2.jsp</title>
<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="section">

<div>
	<h1>두 번째 방법 처리결과</h1>
</div>
	
<div class="layout">
	<%-- <h2><%=str %></h2> --%>
	<h2><%=ob.result() %></h2>
</div>

</body>
</html>

ㄴㄴCalc_ok3.jsp_세 번째 방법 처리결과

<%@page import="com.test.Calc"%>
<%@ page contentType="text/html; charset=UTF-8"%>

<%-- 
<jsp:useBean id="ob" class="com.test.Calc"></jsp:useBean>
<jsp:setProperty property="su1" name="ob"/>	
<jsp:setProperty property="su2" name="ob"/>
<jsp:setProperty property="op" name="ob"/>
 --%>

<jsp:useBean id="ob" class="com.test.Calc"></jsp:useBean>
<jsp:setProperty property="*" name="ob"/>
<!-- **※주의! java의 변수명과 jsp의 name 속성값이 같아야 사용가능** -->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Calc_ok3.jsp</title>
<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="section">

<div>
	<h1>세 번째 방법 처리결과</h1>
</div>
	
<div class="layout">
	<%-- <h2><%=str %></h2> --%>
	<h2><%=ob.result() %></h2>
</div>

</body>
</html>

---

F_WebApp17: 간단한 기본 방명록 작성 실습

 

ㄴ/WebApp17/src/com/test

ㄴㄴGuestDTO.java

/*
	GuestDTO.java
*/
package com.test;

public class GuestDTO
{
	// 주요 속성 구성
	private String userName;		//-- 게시물 작성자
	private String subject;		//-- 게시물 제목
	private String content;		//-- 게시물 내용
	
	//※ 여기에서 사용하는 변수명(속성명)의 앞 두글자는 소문자로 작성할 것 ~!!! check~!!!
	//	numScore 	-> getNumscore()/ setNumScore()
	//	nScore		-> getNScore()	/ setNScore()
	//				-> getnScore()	/ setnScore()
	//				-> getNScore()	/ setNscore()
	//	와 같이 setter 가 속성명을 불러오는 과정에서 인식이 어긋나는 경우가 발생할 수 있기 때문
	
	// ※ 여기에서 사용하는 변수명(속성명)은 HTML 의 form 태그에서 name 속성으로 지정하여 사용할 것.
	// 그래야 속성 데이터 수신 및 속성 매핑을 액션 태그를 사용하여 처리해 줄 수 있기 때문.
	
	public String getUserName()
	{
		return userName;
	}
	public void setUserName(String userName)
	{
		this.userName = userName;
	}
	public String getSubject()
	{
		return subject;
	}
	public void setSubject(String subject)
	{
		this.subject = subject;
	}
	public String getContent()
	{
		return content;
	}
	public void setContent(String content)
	{
		this.content = content;
	}
}

ㄴ/WebApp17/WebContent

ㄴㄴGuest_ok.jsp_간단한 기본 방명록 작성 실습

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

<%
	request.setCharacterEncoding("UTF-8");
%>

<jsp:useBean id="guest" class="com.test.GuestDTO" scope="page"></jsp:useBean>
<jsp:setProperty property="*" name="guest"/>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Guest_ok.jsp</title>
<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="section">

<div>
	<h1>간단한 기본 방명록 작성 실습</h1>
	<hr />
</div>

<div>
	<h2>작성된 내용</h2>
	<!-- <h3>이름: 홍길동</h3>
	<h3>제목: 어쩌구저쩌구</h3>
	<h3>내용: 이러쿵 저렁쿵 궁시렁 궁시렁</h3> -->
	
	<h3>이름: <%=guest.getUserName() %></h3>
	<h3>제목: <%=guest.getSubject() %></h3>
	<h3>내용: <%=guest.getContent().replaceAll("\n","<br>") %></h3>
	
</div>

</body>
</html>

ㄴㄴGuest.jsp_간단한 기본 방명록 작성 실습

<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Guest.jsp</title>
<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="section">

<script type="text/javascript">

function formSubmit()
{
	//alert("확인");
	var uName = document.getElementById("userName");
	var uTitle = document.getElementById("subject");
	var uCon = document.getElementById("content");
	
	var f = document.myForm;
	
	if(uName.value == "" || uTitle.value == "" || uCon.value == "" ||uName.value == null || uTitle.value == null || uCon.value == null )
	{
		return;
	}
	
	f.submit();
}

</script>

<div>
	<h1>간단한 기본 방명록 작성 실습</h1>
	<hr />
</div>

<div class="layout">
	<form action="Guest_ok.jsp" method="post" name="myForm">
		<table class="table">
			<tr>
				<th>이름</th>
				<td><input type="text" class="txt" name="userName" id="userName"></td>
			</tr>
			<tr>
				<th>제목</th>
				<td><input type="text" class="txt" name="subject" id="subject"></td>
			</tr>
			<tr>
				<th>내용</th>
				<td><textarea cols="30" rows="5" name="content" id="content"></textarea></td>
			</tr>
			<tr>
				<td colspan="2">
					<button type="button" class="btn" style="width: 100%;" onclick="formSubmit()">방명록 작성</button>
				</td>
			</tr>
		</table>
	</form>
</div>

</body>
</html>

---

 

 

F_WebApp18: 데이터 입력과 등록 수신결과 확인

 

ㄴ/WebApp18/src/com/test

ㄴㄴFriendDTO.java

package com.test;

public class FriendDTO
{
	// 주요 속성 구성
	private String name, gender;		//-- 이름, 성별
	private int age;					//-- 나이
	//private String checkGruop;
	private String[] checkGruop;		//-- 이상형
	//-- 이상형은 여러 개의 데이터가 동시에 전달되므로
	//(즉, 다중 선택이 가능하도록 구성하였기 때문에)
	//배열로 처리할 수 있다.
	
	// getter / setter
	public String getName()
	{
		return name;
	}
	public void setName(String name)
	{
		this.name = name;
	}
	public String getGender()
	{
		return gender;
	}
	public void setGender(String gender)
	{
		this.gender = gender;
	}
	public int getAge()
	{
		return age;
	}
	public void setAge(int age)
	{
		this.age = age;
	}
	public String[] getCheckGruop()
	{
		return checkGruop;
	}
	public void setCheckGruop(String[] checkGruop)
	{
		this.checkGruop = checkGruop;
	}
	
	public String result()
	{		
		String result = "";
		if(checkGruop != null)
		{
			for(String item: checkGruop)
				result += "["+ item + "]";
		}
		
		return result;
	}
	
}

ㄴ/WebApp18/WebContent

ㄴㄴFriend_ok.jsp_등록 수신결과 확인

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
%>

<jsp:useBean id="ob" class="com.test.FriendDTO" scope="page"></jsp:useBean>
<jsp:setProperty property="*" name="ob"/>

<!-- 반복문 필요(다중 선택으로 넘어온 결과값을 출력하기 위한 처리) -->
<%
	String str = "";
if(ob.getCheckGruop() != null)
{
	for(String temp: ob.getCheckGruop())
	{
		str += temp+"";
	}
}
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Friend_ok</title>
<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="section">

<div>
	<h1>등록 수신결과 확인</h1>
	<hr />
</div>

<ul>
	<li>이름: <%=ob.getName() %></li>
	<li>나이: <%=ob.getAge() %></li>
	<li>성별: <%=ob.getGender() %></li>
	<li>이상형(방법1): <%=ob.result() %></li>
	<li>이상형(방법2): <%
		for (String s : ob.getCheckGruop())
	    {%>
	    <%=s %>
	  <%} %>
	</li>
	<li>이상형(방법3): <%=str %></li>
</ul>


</body>
</html>

ㄴㄴFriend.jsp_데이터 입력

<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Friend.jsp</title>
<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="section">
<script type="text/javascript">
function sendIt()
{
	var f = document.myForm;
	
	if(!f.name.value)
	{
		alert("이름입력")
		f.name.focus();
		return;
	}
	f.submit();
}
</script>

<div>
	<h1>데이터 입력</h1>
	<hr />
</div>

<!-- com.test.FriendDTO -->
<!-- Friend_ok.jsp -->

<div class="layout">
	<form action="Friend_ok.jsp" method="post" name="myForm">
		<table class="table">
			<tr>
				<th>이름(*)</th>
				<td><input type="text" class="txt" name="name"></td>
			</tr>
			<tr>
				<th>나이</th>
				<td><input type="text" class="txt" name="age"></td>
			</tr>
			<tr>
				<th>성별</th>
				<td>
					<label><input type="radio" name="gender" value="남자">남자</label>
					<label><input type="radio" name="gender" value="여자" checked>여자</label>
				</td>
			</tr>
			<tr>
				<th>이상형</th>
				<td>
					<label><input type="checkbox" name="checkGruop" value="원빈">원빈</label>
					<label><input type="checkbox" name="checkGruop" value="천우희">천우희</label>
					<label><input type="checkbox" name="checkGruop" value="카리나">카리나</label>
					<label><input type="checkbox" name="checkGruop" value="정우성">정우성</label>
					<label><input type="checkbox" name="checkGruop" value="이동욱">이동욱</label>
					<label><input type="checkbox" name="checkGruop" value="한소희">한소희</label>
					<label><input type="checkbox" name="checkGruop" value="정해인">정해인</label>
					<label><input type="checkbox" name="checkGruop" value="수지">수지</label>
				</td>
			</tr>
			<tr>
				<td colspan="2"><button type="button" class="btn" style="width: 100%;" onclick="sendIt()">등록</button></td>
			</tr>
		</table>
	</form>
</div>

</body>
</html>

---

 

F_WebApp19: 상단메뉴, 좌측메뉴, 메인화면, 하단메뉴 레이아웃

ㄴ/WebApp19/WebContent

ㄴㄴBottom.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

하단 메뉴<br>
<a href="">사이트소개</a> |
<a href="">이용약관</a> |
<a href="">도움말</a> |
<a href="">사이트맵</a> |

</body>
</html>

ㄴㄴLeft.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

좌측 메뉴 <br>

<ul>
	<li><a href="">게시판</a></li>
	<li><a href="">방명록</a></li>
	<li><a href="">일정관리</a></li>
</ul>

</body>
</html>

ㄴㄴMain.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Main.jsp</title>
<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="section">
<!-- include 액션태그가 예전만큼 중요도가 높진 않다.(iframe 사용함) -->

<div class="layout">
	<table class="table" border="1" style="width: 400px;">
		<tr>
			<td colspan="2">
				<!-- Top -->
				<jsp:include page="Top.jsp"></jsp:include>
			</td>
		</tr>
		<tr style="height: 300px;">
			<td>
				<!-- Left -->
				<jsp:include page="Left.jsp"></jsp:include>
			</td>
			<td>Main(메인화면)</td>
		</tr>
		<tr>
			<td colspan="2">
				<!-- Bottom -->
				<jsp:include page="Bottom.jsp"></jsp:include>
			</td>
		</tr>
	</table>
</div>

</body>
</html>

ㄴㄴTop.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

상단 메뉴<br>
<a href="">로그인</a> |
<a href="">회원가입</a> |
<a href="">정보확인</a> |

</body>
</html>