✔ 첫 번째 실습 (연산 결과 확인)
📃 Calc.jsp 에서 Calc_ok.jsp 페이지로 이동하여 결과 출력
# 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;
}
}
# Calc.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">
</head>
<body>
<div>
<h1>JSP 액션 태그 실습</h1>
<hr>
</div>
<div>
<!-- 첫 번째 방법 -->
<!-- <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>
1) 첫 번째 방법 - 기존에 하던 대로 request.getParameter("");
Calc.jsp 에서 form 태그는 아래와 같이 구성!
<form action="Calc_ok1.jsp" method="post" name="myForm">
# 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();
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">
</head>
<body>
<div>
<h1>첫 번째 방법 처리결과</h1>
<hr>
</div>
<div>
<!-- 결과 -->
<h2><%=str %></h2>
</div>
</body>
</html>➰ 체크할 내용 ➰
1) Calc ob = new Calc();
- 자바에서 우리가 설계한 클래스를 사용하기 위해 객체 생성이 필요하다.
이클립스 자동완성 기능을 사용하여 구문을 작성할 경우에는 import 구문이 자동으로 생성되지만,
자동 완성 기능을 사용하지 않을 경우, import 구문(@page import="cohttp://m.test.Calc")을 직접 작성하거나
생성 구문에 직접 (cohttp://m.test.Calc ob = new cohttp://m.test.Calc()) 작성하는 것도 가능하다!
2) 두 번째 방법 - jsp 액션 태그 사용
Calc.jsp 에서 form 태그는 아래와 같이 구성!
<form action="Calc_ok2.jsp" method="post" name="myForm">
# Calc_ok2.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"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Calc_ok2.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>두 번째 방법 처리결과</h1>
<hr>
</div>
<div>
<!-- 결과 -->
<h2><%=ob.result() %></h2>
</div>
</body>
</html>➰체크할 내용➰
1) <jsp:useBean> : 해당 구문은 인스턴스 생성하여 import 구문을 자동으로 처리한 것과 동일한 효과를 적용하게 된다.
2) <jsp:setProperty>
<jsp:setProperty property="su1" name="ob" value="<%=su1 %>"/> 해당 구문은
request.getParameter() 메소드를 통해 넘겨받은 데이터를 Calc 클래스를 기반으로 만들어진 ob 객체에
넘겨주기 위한 속성 지정 코드이다. 즉, ok1.jsp 의 ob.setSu1(su1); 와 같은 구문이다.
단,!!!!
만약, 속성 이름과 동일한 파라미터인 경우 getParameter 메소드 없이 바로 받을 수 있다. 생략 가능!
→ <jsp:setProperty property="su1" name="ob"/> 이렇게 value 값 없이 사용 가능! 동일한 경우에만!!!
3) <jsp:setProperty property="su1" name="ob"/>
① request.getParameter() 처리(서블릿 컨테이너가,,,) → 매개변수로 전달하기 위해 데이터 수신 처리
② Integer.parseInt() 처리 → 매개변수를 전달하기 위한 형 변환 처리
③ ob.su1 → ob.setSu1() 호출 처리
=> 최종적으로 ob → Calc 기반의 ob 객체의 su1 속성에 이전페이지로부터 넘겨받은 데이터를
적절한 타입(형) 으로 전달
2) 세 번째 방법 - jsp 액션 태그 사용 ("*")
Calc.jsp 에서 form 태그는 아래와 같이 구성!
<form action="Calc_ok3.jsp" method="post" name="myForm">
# 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="*" name="ob"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Calc_ok3.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>세 번째 방법 처리결과</h1>
<hr>
</div>
<div>
<!-- 결과 -->
<h2><%=ob.result() %></h2>
</div>
</body>
</html>➰체크할 내용➰
1) <jsp:setProperty property="*" name="ob"/>
: 자바에서 선언한 변수명과 name 속성명이 동일하다면
<jsp:setProperty property="su1" name="ob"/>
<jsp:setProperty property="su2" name="ob"/>
<jsp:setProperty property="op" name="ob"/>
위 세 줄의 코드를
<jsp:setProperty property="*" name="ob"/> 단 한 줄의 코드로 대체할 수 있다!
✔ 두 번째 실습 (간단한 기본 방명록 작성)
📃 Guest.jsp 에서 Guest_ok.jsp 페이지로 이동하여 결과 출력
# GuestDTO.java
package com.test;
public class GuestDTO
{
// 주요 속성 구성
private String userName; //-- 게시물 작성자
private String subject; //-- 게시물 제목
private String content; //-- 게시물 내용
// ※ 여기에서 사용하는 변수명(속성명)의 앞 두 글자는 소문자로 작성할 것~!!! check~!!
// numScore → getNumScore() / setNumScore()
// nScore → getNScore() / setNScore()
// getnScoer() / setnScore()
// getNscore() / setNscore()
// 와 같이 setter 가 속성명을 불러오는 과정에서
// 인식이 어긋나는 경우가 발생할 수 있기 때문...
// ※ 여기에서 사용하는 변수명(속성명)은
// HTML 의 form 태그에서 name 속성으로 지정하여 사용할 것.
// 그래야 속성 데이터 수신 및 속성 매핑을
// 액션 태그를 활용하여 자동으로 처리해줄 수 있기 때문...
// getter / setter 구성
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;
}
}
# 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">
<script type="text/javascript">
function sendIt()
{
//var f = document.forms[0]; 이건 내가 한거!
var f = document.myForm;
// :
// 체크 및 검증할 내용의 코드 작성 가능...
// :
f.submit();
}
</script>
</head>
<body>
<div>
<h1>간단한 기본 방명록 작성 실습</h1>
<hr>
</div>
<div>
<form action="Guest_ok.jsp" method="post" name="myForm">
<table class="table">
<tr>
<th>이름</th>
<td>
<!-- <input type="text" name="guestName" class="txt"> -->
<input type="text" class="txt" name="userName">
</td>
</tr>
<tr>
<th>제목</th>
<td>
<!-- <input type="text" name="guestTitle" class="txt"> -->
<input type="text" class="txt" name="subject">
</td>
</tr>
<tr>
<th>내용</th>
<td>
<!-- <textarea rows="5" cols="32" name="guestContents"></textarea> -->
<textarea rows="5" cols="32" name="content"></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit" class="btn" style="width: 100%;" onclick="sendIt()">방명록 작성</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>➰ 체크할 내용 ➰
1) form 에 접근하는 방법
- var f = document.forms[0]; : 문서 내의 첫 번째 form 에 접근하겠다!
- var f = document.myForm; : 이름이 'myForm'인 form 에 접근하겠다!
# Guest_ok.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<jsp:useBean id="ob" class="com.test.GuestDTO" scope="page"></jsp:useBean>
<jsp:setProperty property="*" name="ob"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Guest_ok.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>간단한 기본 방명록 작성 실습</h1>
<hr>
</div>
<div>
<h2>작성된 내용</h2>
<h3>이름 : <%=ob.getUserName() %></h3>
<h3>제목 : <%=ob.getSubject() %></h3>
<h3>내용 : <%=ob.getContent().replaceAll("\n", "<br>") %></h3>
</div>
</body>
</html>
✔ 세 번째 실습 (기본 정보 및 이상형 출력)
📃 Friend.jsp 에서 Friend _ok.jsp 페이지로 이동하여 결과 출력
# FriendDTO.java
package com.test;
public class FriendDTO
{
// 주요 속성 구성
private String name; //-- 이름
private String age; //-- 나이
private String gender; //-- 성별
private String[] idleType; //-- 이상형
// getter / setter 구성
public String getName()
{
return name;
}
public void setName(String name)
{
this.name = name;
}
public String getAge()
{
return age;
}
public void setAge(String age)
{
this.age = age;
}
public String getGender()
{
return gender;
}
public void setGender(String gender)
{
this.gender = gender;
}
public String[] getIdleType() //-- check~!!!
{
return idleType;
}
public void setIdleType(String[] idleType) //-- check~!!!
{
this.idleType = idleType;
}
}➰체크할 내용➰
1) 이상형 항목은 체크박스로 다중 선택이 가능하도록 구성하였기 때문에 여러개의 데이터가 동시에 전달된다.
따라서 String이 아닌 String 배열로 처리해야 한다! 배열로 getter / setter 구성~!!
# 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">
<style type="text/css">
.errMsg {color: red; display: none;}
</style>
<script>
function sendIt()
{
var f = document.myForm;
if (!f.name.value)
{
alert("이름 좀 입력해주세요,,,");
f.name.focus();
return;
}
f.submit();
}
</script>
</head>
<body>
<div>
<h1>데이터 입력</h1>
<hr>
</div>
<div>
<form action="Friend_ok.jsp" method="post" name="myForm">
<table class='table'>
<tr>
<th>이름(*)</th>
<td>
<input type="text" class="txt" name="name" id="name">
<span id="nameMsg" class="errMsg">이름을 입력해주세요.</span>
</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="여자"> 여자
</label>
</td>
</tr>
<tr>
<th>이상형</th>
<td>
<label>
<input type="checkBox" name="idleType" value="원빈"> 원빈
</label>
<label>
<input type="checkBox" name="idleType" value="천우희"> 천우희
</label>
<label>
<input type="checkBox" name="idleType" value="카리나"> 카리나
</label>
<label>
<input type="checkBox" name="idleType" value="정우성"> 정우성
</label>
<label>
<input type="checkBox" name="idleType" value="이동욱"> 이동욱
</label>
<label>
<input type="checkBox" name="idleType" value="한소희"> 한소희
</label>
<label>
<input type="checkBox" name="idleType" value="정해인"> 정해인
</label>
<label>
<input type="checkBox" name="idleType" 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>➰체크할 내용➰
1) 나는 입력한 name 을 받아올 때,
var userName = document.getElementById("name");
userName.value 이런 식으로 사용했는데,,,!!
var f = document.myForm;
f.name.value 이렇게도 사용 가능!! 왜 이런 생각을 못했을까~~~ → form 태그 안에 있는 name 값을 가져와라!
# Friend_ok.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<% request.setCharacterEncoding("UTF-8"); %>
<jsp:useBean id="ob" class="com.test.FriendDTO"></jsp:useBean>
<jsp:setProperty property="*" name="ob"/>
<%
String str= "";
if (ob.getIdleType() != null)
{
for (String temp : ob.getIdleType())
str += temp + " ";
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>등록 수신결과 확인</h1>
<hr>
</div>
<div>
<h2>이름 : <%=ob.getName() %></h2>
<h2>나이 : <%=ob.getAge() %></h2>
<h2>성별 : <%=ob.getGender() %></h2>
<h2>이상형 : <%=str %></h2>
</div>
</body>
</html>➰체크할 내용➰
1) 반복문 구성 시, body 영역에서 스크립릿 사용해서 출력할 수도 있고
DTO에서 메소드 정의 후, 메소드만 가져와서 출력할 수도 있고
jsp:setProperty 사용할 때, 이상형 출력 형태로 다시 덮어쓴 후 ob.getIdleType() 이렇게 출력할 수도 있고
방법은 매우 다양했다!
