본문 바로가기
국비 과정/JSP

국비 - 1011 ( javabeans , template )

by 코딩호야 2022. 10. 11.

javabeans  활용 예제

HTML 페이지

<title>Join Form Test</title>
<style type="text/css">
#formArea{
	margin : auto;
	width : 500px;
	border : 1px solid red;
	text-align: center;
}

h1{
	text-align : center;
}
table{
	width:500px;
	margin: auto;
	text-align: center;
}


</style>
</head>
<body>

	<section id="formArea">
	<h1> 회원 정보 입력 </h1>
	<form action="joinChk.jsp" method="post">
	<table>
		<tr>
			<td><label for="id">아이디 : </label></td>
			<td><input type="text" name="id" id="id"></td>			
		</tr>
		<tr>
			<td><label for="pass">비밀번호 : </label></td>
			<td><input type="password" name="pass" id="pass"></td>    <!-- label과 input 을 연동시키기 위해서 for의 pass와 type의 pass와 동일하게 맞추는것이다.   -->
																	<!--  id 의 pass 는 jsp 페이지와 연동시키기위한 pass이다 . -->
		</tr>
		<tr>
			<td><label for="name">이름 : </label></td>
			<td><input type="text" name="name" id="name"></td>
		</tr>
		<tr>
			<td><label for="sex"> 성별 : </label></td>
			<td>
			<input type="radio" name="sex" value="1" id="sex" checked="checked"> 남
			<input type="radio" name="sex" value="2">여
			</td>
		</tr>
		<tr>
			<td><label for="hobby"> 취미 : </label></td>
			<td>
			<input type="checkbox" name="hobby" value="등산" id="hobby"> 등산
			<input type="checkbox" name="hobby" value="여행" id="hobby" checked="checked"> 여행
			<input type="checkbox" name="hobby" value="낚시" id="hobby"> 낚시
			<input type="checkbox" name="hobby" value="여행" id="hobby"> 여행
			<input type="checkbox" name="hobby" value="독서" id="hobby"> 독서
			</td>
		</tr>
		
	
		<tr>
			<td><label for = "age"> 나이 : </label></td>
			<td><input type="text" name="age" id="age"></td>
		</tr>
		<tr>
			<td><label for="email"> 이메일 : </label></td>
			<td><input type="text" name="email" id="email"></td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="submit" value="가입">&nbsp;&nbsp;
				<input type="reset" value="취소">
			</td>
		</tr>
		
	
	</table></form>
	</section>

</body>
</html>

HTML 출력 화면

label 의 for 값과  input 의 type 값을 동일하게 맞춰서  라벨값을 눌러도 텍스트에 포커스가 갈수 있도록 설정해주었고

input 의 id 값은  JSP 페이지에 property 값과 일치시켜 JSP 페이지와 연동시켜주었다.

 

 

JSP 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<% request.setCharacterEncoding("utf-8"); %>
<jsp:useBean id="join" class="javabean.JoinBean"/>
<jsp:setProperty property="*" name="join"/>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 가입 입력 정보 확인 페이지</title>
<style type="text/css">

	table{
	width : 400px;
	border : 2px dotted green;
	}
	h1{
	text-align:center;
	}
	</style>
</head>
<body>
	<table>
		<tr>
			<td><b>아이디 : </b></td>
			<td><jsp:getProperty property="id" name="join"/></td>
		</tr>
		<tr>
			<td><b>비밀번호 : </b></td>
			<td><jsp:getProperty property="pass" name="join"/></td>
		</tr>
		<tr>
			<td><b>이름 : </b></td>
			<td><jsp:getProperty property="name" name="join"/></td>
		</tr>
		<tr>
			<td><b>성별 1 : </b></td>
			<td><jsp:getProperty property="sex" name="join"/></td>
		</tr>
		
		<tr>
			<td><b>성별 222 : </b></td>
			<td><jsp:getProperty property="sex2" name="join"/></td>
		</tr>
		
		<tr>
			<td><b>취미 1 : </b></td>
			<td><jsp:getProperty property="hobby" name="join"/></td>
		</tr>
		<tr>
			<td><b>취미 22 : </b></td>
			<td><jsp:getProperty property="hooby" name="join"/></td>
		</tr>
		
	
		
		<tr>
			<td><b>나이 : </b></td>
			<td><jsp:getProperty property="age" name="join"/></td>
		</tr>
		
		<tr>
			<td><b>이메일 : </b></td>
			<td><jsp:getProperty property="email" name="join"/></td>
		</tr>
	
		
		
	</table>

</body>
</html>

위쪽의  <jsp:setProperty property="*" name="join"/>  코드로 property 에 " * " 를 적용시켜서 모든값을 set 해준다.

값이 많을때는 " * "  를 활용해준다

 

 

 

 

 

 

JAVA 페이지

public class JoinBean {
	
	private String id;
    private String	pass;
	private String name;
	private int sex;
	private int age;
	private String email;
	private String[] hobby;
	
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPass() {
		return pass;
	}
	public void setPass(String pass) {
		this.pass = pass;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getSex() {
		return sex;
	}
	
	
	public String getSex2() {
		String sss = "";
		if(sex==1) {
			sss = "남자";
		}
		else {
			sss = "여자";
		}
		return sss;
	}
	
	
	public void setSex(int sex) {
		this.sex = sex;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	
	
	public String[] getHobby() {
		return hobby;
	}
	
	public String getHooby() {
		
		String hhh = "";
		
		for(int i=0;i<hobby.length-1;i++) {	 
			// 마지막 콤마(,)를 나오지 않게 하기위해서 i<hobby.length - 1 까지 for문을 돌리고 아래에서 마지막값을 따로저장해준다.
			
			hhh += hobby[i] + " ,";
			
		}
		hhh += hobby[hobby.length-1];	// 마지막 콤마(,)를 나오지않게 하기위해 마지막값은 따로 저장
		
		return hhh;
	}
	
	public void setHobby(String[] hobby) {
		this.hobby = hobby;
	}
	
	
	
	
}

값이 하나인 것들은 그대로  set 과 get 을 이용해서 JSP 페이지와 연동시켜주어서 동일하게 전달 받았지만

성별 과 취미는 두가지이상 선택지가 있거나  전달받을 값이 두가지 이상이기때문에  위처럼 성별1, 취미1 에서 보여지듯이  원하는 값으로 출력되지 않는다 .

그래서 성별은  새로운 메서드를 만들어   if 문으로 조건을 넣어서  성별 222 처럼 남자 , 여자로 출력되게 만들었고   취미는  여러가지를 받아야하므로  getHopby() 라느 새로운 메서드를 만들어서 

for 문으로  배열속에 저장되어있는 것들을 모두 출력해서  취미 22 에 보여지듯이 출력하게 만들었다.

 

 

template 예제

template 로 간단한 홈페이지 틀 만들기

 

JSP 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
 <% 
 	String pagefile=request.getParameter("page");
 	if(pagefile==null){pagefile="saleitem";}
 %>
<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title>Template_1 Test</title>
<style>
	table{
		margin : auto;
		width : 960px;
		color : gray;
		border : 1px solid gray;
	}

</style>
</head>
<body>
	<table>
		<tr> 
			<td height="43" colspan=3 align=left>
				<jsp:include page="top.jsp"/>	<!--  include page는 실행 결과가 삽입된다. -->
			</td>
		</tr>
		<tr> 
			<td width="40%" align=right valign=top><br>
				<jsp:include page="left.jsp"/>
			</td>
			<td colspan=2 align=center>
				<jsp:include page='<%=pagefile + ".jsp" %>'/>
			</td>
		</tr>
		<tr>
			<td></td>
			 <td width="100%" height="40">
			 	<jsp:include page="bottom.jsp"/>
			 </td>
			<td></td>
		</tr>
		</table>

</body>
</html>

 

페이지 첫화면은

String pagefile=request.getParameter("page");

if(pagefile == null){pagefile="saleitem"; }

코드를 통해  pagefile 이 null 이라면  

pagefile 에 saleitem 을  담고 아래에있는  <jsp:include page='<%=pagefile + ".jsp" %>'/> 코드를통해  pagefile 에 담긴 saleitem + jsp 가 된다. 첫화면에는  saleitem.jsp 페이지가 아래처럼 출력이된다. 

 

아래에 saleitem.jsp   코드이다

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

<img src="../images/back5.jpg" width="200px" height="200px">
<b>세일 상품 입니다~~~</b><br>
<b>세일 상품 입니다~~~</b><br>
<b>세일 상품 입니다~~~</b><br>
<b>세일 상품 입니다~~~</b><br>
<b>세일 상품 입니다~~~</b><br>
<b>세일 상품 입니다~~~</b><br>
<b>세일 상품 입니다~~~</b><br>
<b>세일 상품 입니다~~~</b><br>
<b>세일 상품 입니다~~~</b><br>

 

그리고 각각 신상품 , 인기상품 , 세일상품에  JSP page 를 이용해 링크를 걸어두고  누를시에 각각의 페이지가 출력되도록 되어있다.

 

각각의 링크를 걸어둔 JSP 페이지 코드

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

<a href="./template_1.jsp?page=newitem">신상품</a><br><br>
<a href="template_1.jsp?page=bestitem">인기상품</a><br><br>
<a href="template_1.jsp?page=saleitem">세일상품</a><br><br>
</p>

신상품 , 인기상품 JSP 코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<img src="../images/back2.jpg" width="200px" height="200px">
    <b>신상품 목록입니다.</b><br>
    <b>신상품 목록입니다.</b><br>
    <b>신상품 목록입니다.</b><br>
    <b>신상품 목록입니다.</b><br>
    <b>신상품 목록입니다.</b><br>
    <b>신상품 목록입니다.</b><br>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<img src="../images/back1.jpg" width="200px" height="200px">
<b>인기상품 목록입니다.!!</b><br>
<b>인기상품 목록입니다.!!</b><br>
<b>인기상품 목록입니다.!!</b><br>
<b>인기상품 목록입니다.!!</b><br>
<b>인기상품 목록입니다.!!</b><br>

 

이처럼  각각 페이지를 따로 만들어놓고 링크를 걸어서 서로 연동할 수 있게 만들수 있다. 

저작자표시 (새창열림)

'국비 과정 > JSP' 카테고리의 다른 글

국비 - 1017 ( 게시판 폼 만들기 )  (0) 2022.10.17
국비 - ( JSP MVC 패턴 )  (4) 2022.10.12
국비 - 1006 ( response , page context , 액션태그)  (0) 2022.10.06
국비 - 1005 ( Implicit Object(내장객체) request , exception)  (2) 2022.10.05
국비 - 1004 JSP(Java Server Page)  (0) 2022.10.04

관련글

티스토리툴바