JSP 액션 태그
- WebApp18
- 이상형 입력받기 (checkbox - DTO 활용)
/* ==================
FriendDTO.java
===================*/
package com.test;
public class FriendDTO
{
// 주요 속성 구성 : 이름은 각 name 속성값과 동일하게 구성하여야 useBean태그 사용이 쉽다
private String name, age, gender; //-- 나이(age)의 경우 연산 이벤트가 없으면 int 대신 String 도 가능
//private String type;
private String[] type;
//-- 이상형은 여러 개의 데이터가 동시에 전달되므로
//-- (즉, 다중선택이 가능하도록 구성하였기 때문에)
// 배열로 처리한다.
// 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[] getType() //-- 반환자료형 String[]
{
return type;
}
public void setType(String[] type) //-- 매개변수 자료형 String[]
{
this.type = type;
}
}
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Friend.jsp</title>
<style type="text/css">
*
{
font-family : 맑은 고딕;
color : #343;
text-align: center;
}
.table
{
border-collapse: collapse;
width: 50%;
margin : auto;
}
.table th, .table td
{
padding: 3px;
line-height: 150%;
text-align: center;
}
.table td
{
padding: 3px;
line-height: 150%;
text-align: left;
}
.table th
{
font-weight: bold;
background-color: #e2e0ef;
color : #745fe8;
}
.btn
{
font-weight: bold;
background-color: #c5b8fe;
color : white;
border: #c5b8fe;
border-radius: 50px;
}
.btn:hover
{
color: white;
background-color: #9f93c7;
border: #9f93c7;
}
</style>
<script type="text/javascript">
function sendIt()
{
// var f = document.myForm;
var f = document.forms[0];
// alert(f);
// 필수입력사항
if (!f.name.value)
{
alert("이름을 입력하세요.");
f.name.focus();
return;
}
// 기타 조건
/*
if (!f.age.value)
{
alert("나이를 입력하세요.");
f.age.focus();
return;
}
if (!f.gender.value)
{
alert("성별을 선택하세요.");
return;
}
var str = "";
//alert(f.type.length);
for (var i = 0; i < f.type.length; i++)
{
if (f.type[i].checked)
{
str += f.type[i].value;
if (i== f.type.length)
return;
if (i!=0)
str += " ";
}
}
//alert(str);
if (str=="")
{
alert("하나 이상의 이상형을 선택해주세요!");
return
}
*/
f.submit();
}
</script>
</head>
<body>
<div>
<h1>데이터 입력</h1>
<hr />
</div>
<!--
com.test.FriendDTO.java
friend_ok.jsp
-->
<div>
<form action="Friend_ok.jsp" method="post" name="myForm">
<table class="table" style="margine : auto;">
<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 name="gender" type="radio" id="male" value="남자"> 남자
</label>
<label>
<input name="gender" type="radio" id="female" value="여자"> 여자
</label>
</td>
</tr>
<tr>
<th>이상형</th>
<td>
<label>
<input type="checkbox" id="t1" name="type" value="아이유"> 아이유
</label>
<label>
<input type="checkbox" id="t2" name="type" value="유재석"> 유재석
</label>
<label>
<input type="checkbox" id="t3" name="type" value="박보검"> 박보검
</label>
<label>
<input type="checkbox" id="t4" name="type" value="김우빈"> 김우빈
</label>
<label>
<input type="checkbox" id="t5" name="type" value="수지"> 수지
</label>
</td>
</tr>
<tr>
<td colspan="2">
<button type="button" class="btn" onclick="sendIt()"
style="width: 100%; font-size: 16pt;">등록</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<!-- 인스턴스 생성 -->
<jsp:useBean id="friend" class="com.test.FriendDTO"></jsp:useBean>
<!-- 이 name 을 가진 -> property 를 *(모두) 설정해줘 : name 속성 동일해야하는 이유 -->
<!-- 서블릿 컨테이너가 name 속성이 동일하게 구성되어있어야 자동으로 받아올 수 있기 때문에 -->
<jsp:setProperty property="*" name="friend"/>
<!-- 반복문 필요 (다중 선택으로 넘어온 결과 값을 출력하기 위한 처리) -->
<%
String type = "";
if(friend.getType()!=null)
{
for(String t : friend.getType())
{
type += t + " " ;
}
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Friend_ok.jsp</title>
<style type="text/css">
*
{
font-family : 맑은 고딕;
color : #343;
text-align: center;
}
.table
{
border-collapse: collapse;
width: 50%;
margin : auto;
}
.table th, .table td
{
padding: 3px;
line-height: 150%;
text-align: center;
}
.table td
{
padding: 3px;
line-height: 150%;
text-align: left;
}
.table th
{
font-weight: bold;
background-color: #e2e0ef;
color : #745fe8;
}
.btn
{
font-weight: bold;
background-color: #c5b8fe;
color : white;
border: #c5b8fe;
}
.btn:hover
{
color: white;
background-color: #9f93c7;
border: #9f93c7;
}
</style>
</head>
<body>
<div>
<h1>등록 수신결과 확인</h1>
<hr />
</div>
<!--
com.test.FriendDTO.java
friend_ok.jsp
-->
<%--
<div>
내용
<h2>이름 : 홍길동</h2>
<h2>이름 : <%=friend.getName() %></h2>
<h2>나이 : 20</h2>
<h2>나이 : <%=friend.getAge() %></h2>
<h2>성별 : 남자</h2>
<h2>성별 : <%=friend.getGender() %></h2>
<h2>이상형 : 아이유 수지</h2>
<h2>이상형 : <%=type %></h2>
</div>
--%>
<div>
<table class="table" style="margine : auto;">
<tr>
<th>이름(*)</th>
<td>
<%=friend.getName() %>
</td>
</tr>
<tr>
<th>나이</th>
<td>
<%=friend.getAge() %>
</td>
</tr>
<tr>
<th>성별</th>
<td>
<%=friend.getGender() %>
</td>
</tr>
<tr>
<th>이상형</th>
<td>
<%=type %>
</td>
</tr>
</table>
</div>
</body>
</html>
- WebApp19
- include 액션 태그 : 여러 jsp 페이지들을 하나의 jsp 에 넣는 방법
- 현재는 잘 사용하지 않는 방법 (프레임 구성 X)
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Main.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<style type="text/css">
* {font-size: 9pt;}
</style>
</head>
<body>
<div>
<table style="width:400px;" border="1">
<tr>
<td colspan="2">
<!-- Top -->
<jsp:include page="Top.jsp"></jsp:include>
</td>
</tr>
<tr style="height: 300px;">
<td style="width:100px;">
<!-- Left -->
<jsp:include page="Left.jsp"></jsp:include>
</td>
<td>
Main(메인화면)
</td>
<tr>
<td colspan="2">
<!-- Bottom -->
<jsp:include page="Bottom.jsp"></jsp:include>
</td>
</tr>
</tr>
</table>
</div>
</body>
</html>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Top.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
상단 메뉴<br>
<a href="">로그인</a> | <a href="">회원가입</a> | <a href="">정보확인</a>
</body>
</html>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Left.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
좌측 메뉴<br>
<ul>
<li>
<a href="">게시판</a>
</li>
<li>
<a href="">방명록</a>
</li>
<li>
<a href="">일정관리</a>
</li>
</ul>
</body>
</html>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bottom.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
하단 메뉴<br>
<a href="">사이트 소개</a> |
<a href="">이용 약관</a> |
<a href="">도움말</a> |
<a href="">사이트 맵</a> |
</body>
</html>