본문 바로가기
코리아 IT아카데미/grid·flex·mySql·jsp

18일차 | jsp3

by Sharon kim 2021. 12. 9.

ch08

order_list.txt

학습목표

JSP 페이지 액션 태그 이해하기

사용 모습
<jsp:forward page="로컬 url">

1. forwardTag1.html
2. forwardTag1_1.jsp
3. forwardTag1_2.jsp

1.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<h1>Forward Tag Example1</h1>
	<form action="forwardTag1_1.jsp" method="post">
		아이디 : <input type="text" name = "id"><p/>
		패스워드 : <input type="passward" name = "pwd"><p/>
		<input type="submit" value="보내기">
	</form>
	
</body>
</html>

2.

&amp;lt;jsp:forward page ="forwardTag1_1.jsp"/&amp;gt;

 

&amp;lt;jsp:forward page ="forwardTag1_2.jsp"/&amp;gt;

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>Forward Tag Example1</h1>
	Forward Tag의 포워딩 되기 전의 페이지 입니다.
	
	<%
	//get, post
		request.setCharacterEncoding("utf-8"); // post 방식 일 때 한글 깨짐 방지, get방식일때는 sever> sever.xml에서 바꿈
		
		String id = request.getParameter("id");
		String pwd = request.getParameter("pwd");
		//sendRedirect 개념과 비교 (forward 방식)
		//response.sendRedirect("forwardTag1_2.jsp");
	%>
	<%=id%>
	<%=pwd%>
	<jsp:forward page ="forwardTag1_1.jsp"/>
    //<jsp:forward page ="forwardTag1_2.jsp"/>
</body>
</html>

3.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<%
		//핵심! 액션 태그 forward 사용하면 실행에 제어권까지 받아서 처리할 수 있다.
		String id = request.getParameter("id");
		String pwd = request.getParameter("pwd");
	
	%>
	<h1>포워드 두번째 페이지</h1>
	
	당신의 아이디는 <%=id %>이고 패스워드는 <%=pwd %>입니다.
	
</body>
</html>

ch09

order_list.txt

1. forward2.html
2. forward2_1.jsp
3. a.jsp (b, ab, o)

1.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<h1>포워드 태그 응용하기</h1>
	
	<form action="forward2_1.jsp" method="post">
		혈액형별로 성격 테스트 <p/>
		당신의 혈액형은?<p/>
		
		<input type="radio" name="bloodType" value="a">A형<br/>
		<input type="radio" name="bloodType" value="b">B형<br/>
		<input type="radio" name="bloodType" value="o">O형<br/>
		<input type="radio" name="bloodType" value="ab">AB형<br/>
		<input type="submit" value="보내기">
	</form>
</body>
</html>

2.

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

    <%
    	request.setCharacterEncoding("utf-8");
    	
    	String name = "홍길동";
    	String bloodType = request.getParameter("bloodType");
    	String color = "red";
    	
    	String[] colors = new String[10];
    	System.out.println("name : " + name);
    	System.out.println("bloodType : " + bloodType);
    	
    %>
    
    <h1>포워드 태그 응용</h1>
    <!-- a.jsp  -->
    <!-- b.jsp  -->
    <!-- o.jsp  -->
    <!-- ab.jsp  -->
    <jsp:forward page='<%=bloodType + ".jsp" %>'>
    	<jsp:param value="<%=name %>" name="name"/>
    	<jsp:param value="red" name="color"/>
    </jsp:forward>

3.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%
		String name = request.getParameter("name");
		
		String bloodType = request.getParameter("bloodType");
		
		String color = request.getParameter("color");
		System.out.println(color);
	%>
	
	<h1 style="color:<%=color%>">A형</h1>
	<b><%=name %></b>님의 혈액형은 
	<b><%=bloodType %></b>형이고
	섬세한 성격의 소유자 입니다.

<!-- ab.jsp
	<h1 style="color:yellow">AB형</h1>
	<b><%=name %></b>님의 혈액형은 
	<b><%=bloodType %></b>형이고
	이상한 성격의 소유자 입니다.
-->

<!-- b.jsp
	<h1 style="color:blue">B형</h1>
	<b><%=name %></b>님의 혈액형은
	<b><%=bloodType %></b>형이고
	과감한 성격의 소유자입니다.
-->
<!-- o.jsp
	<h1 style="color:green">O형</h1>
	<b><%=name %></b>님의 혈액형은 
	<b><%=bloodType %></b>형이고
	쾌활한 성격의 소유자 입니다.
-->
</body>
</html>

ch10

order_list.txt

학습 목표 : 액션 태그 --> <jsp:useBean>
자바빈이라고도 불린다.

용어 정리 : 자바빈을 사용할 때 JSP에서는 액션태그 <jsp:userBean>을 사용한다.

개념 / 사용방법

회원가입 --> 데이터 베이스 공간 저장 (컬럼 id, email, phone)

데이터를 String --> "아이디 홍길동 비번 1234 이메일 abc@naver.com"

---------
구분하기 힘들다
---------

반대로 가지고 올 때도 String으로 가지고 온다고 하면 10명일 경우
"아이디 홍길동 비번 1234 이메일 abc@naver.com"
"아이디 홍길동 비번 1234 이메일 abc@naver.com"
"아이디 홍길동 비번 1234 이메일 abc@naver.com"
...
String -> 배열에 담아서 온다.
배열은 고정길이를 먼저 선언해야 한다.  String[]
그럼 가변 배열을 사용하자 --> ArrayList<String>

그래서 우리는 데이터 베이스에 컬럼과 맵핑되는 변수(멤버변수)만 있는 클래스를 만들기로 합니다.
그리고 그 변수에 데이터 베이스에 있는 값을 하나씩 넣을 수 있는 기술을 사용하기로 합니다.
그래서 그 클래스를 가변길이인 ArrayList에 저장하기로 합니다.

ArrayList<User> <--이것을 자바 진영에서는 자바 빈즈라고 부릅니다.
결론 : 여러 개의 데이터를 하나의 클래스에 담고 그 클래스를 (List, Map, Set)자료 구조에 
저장해서 사용할 때 자바빈즈라는 용어를 자주 사용한다.

1. member_join.jsp
2. member_join_proc.jsp
3. src/main/java --> 패키지를 만들고 MemberBean 클래스 만들기


(spring 에서는 useBean을 사용하지 않아도 맵핑이 된다. 

하지만 jsp에서는useBean을 사용해야한다.)
JSP 프로그래밍이라고 부릅니다. SPRING은 프레임 워크라고 합니다.

1.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
		<h2>회원 가입</h2>
		<form action="member_join_proc.jsp" method="post">
			<table width = "500" border="1">
				<tr height="50">
					<td width="150" align="center">아이디</td>
					<td width="350" align="center"><input type="text" name="id"
						size="40" placeholder="id를 넣으세요" value="questzz"></td>
				</tr>
				
				<tr height="50">
					<td width="150" align="center">패스워드 확인</td>
					<td width="350" align="center"><input type="password"
					 name="password" size="40" value="asd1234"></td>
				</tr>
				
				
				<tr height="50">
					<td width="150" align="center">이메일</td>
					<td width="350" align="center"><input type="email"
					 name="email" size="40" value="abc@naver.com"></td>
				</tr>
				
				<tr height="50">
					<td width="150" align="center">전화번호</td>
					<td width="350" align="center"><input type="tel"
					 name="tel" size="40" value="010-1234-1234"></td>
				</tr>
				
				<tr height="50">
					<td width="150" align="center">주소</td>
					<td width="350" align="center"><input type="text"
					 name="address" size="40" value="서울시 지구 봄동"></td>
				</tr>
				
				<tr height="50">
					<td width="150" colspan="2" style="padding-left:10px;" ><input type="submit" value="회원가입">
					<input type="reset" value="취소"></td>
				</tr>
				
				
			</table>
		
		</form>
	
</body>
</html>

2.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%
		request.setCharacterEncoding("utf-8");
	
		//20, 100
		//useBean
		//String id = request.getParameter("id");
		
	%>
	<!-- request로 넘어온 데이터를 자바 빈즈랑 맵핑 시켜주는 useBean 액션태그 -->
	<!-- 객체 생성 : MemberBean mbean = new MemberBean() -->
	<jsp:useBean id="mbean" class="com.company.aboutking.beans.MemberBean">
		<!-- 한번에 설정할 수 있다. -->
		<jsp:setProperty name = "mbean" property="*" />
		<!-- 필요하다면 하나씩 세팅도 가능하다. -->
	</jsp:useBean>
	
	<h2>당신의 아이디는 : </h2><jsp:getProperty name = "mbean" property="id" />
	<h2>당신의 패스워드는 : </h2><jsp:getProperty name = "mbean" property="password" />
	<h2>당신의 이메일은 : </h2><jsp:getProperty name = "mbean" property="email" />
	<h2>당신의 전화번호는 : </h2><jsp:getProperty name = "mbean" property="tel" />
	<!--<h2>당신의 주소는 : </h2><jsp:getProperty name = "mbean" property="address" />-- >
	
	<!-- 다른 방식도 사용이 가능하다 -->
	<p/>
	당신의 주소는 <%= mbean.getAddress()%>
	
</body>
</html>

3. src/main/java --> 패키지를 만들고 MemberBean 클래스 만들기

package com.company.aboutking.beans;

public class MemberBean {
	
	//반드시 form 태그에 name 값과 멤버 변수명이 같아야 됩니다. (JSP 기술)
	private String id;
	private String password;
	private String email;
	private String tel;
	private String address;
	
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getTel() {
		return tel;
	}
	public void setTel(String tel) {
		this.tel = tel;
	}
	public String getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}
	
	//getter, setter 
	
	
}

ch11

1. member_join2.jsp

2. member_join_proc2.jsp

3.

1.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
		<h2>학생관리 시스템</h2>
		<form action="member_join_proc2.jsp" method="post">
			<table width = "500" border="1">
				<tr height="50">
					<td width="150" align="center">학번</td>
					<td width="350" align="center"><input type="text" name="number"
						size="40" placeholder="학번을 넣으세요" value="20220768"></td>
				</tr>
				
				<tr height="50">
					<td width="150" align="center">평균학점</td>
					<td width="350" align="center"><input type="text"
					 name="grade" size="40" value="A+"></td>
				</tr>
				
				<tr height="50">
					<td width="150" align="center">전화번호</td>
					<td width="350" align="center"><input type="tel"
					 name="tel" size="40" value="010-1234-1234"></td>
				</tr>
				
				<tr height="50">
					<td width="150" align="center">부모님 성함</td>
					<td width="350" align="center"><input type="text"
					 name="parent" size="40" value="김땡땡"></td>
				</tr>
				
				<tr height="50">
					<td width="150" align="center">주소</td>
					<td width="350" align="center"><input type="text"
					 name="address" size="40" value="서울시 지구 봄동"></td>
				</tr>
				
				<tr height="50">
					<td width="150" colspan="2" style="padding-left:10px;" ><input type="submit" value="조회">
					<input type="reset" value="취소"></td>
				</tr>
				
				
			</table>
		
		</form>
	
</body>
</html>

2.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

	<%
		request.setCharacterEncoding("utf-8");
	
		//20, 100
		//useBean
		//String number = request.getParameter("number");
	%>
	
	<!-- request로 넘어온 데이터를 자바 빈즈랑 맵핑 시켜주는 useBean 액션태그 -->
	<!-- 객체 생성 : StudentBean Sbean = new StudentBean() -->
	<jsp:useBean id="Sbean" class="com.company.aboutking.beans.StudentBean">
		<!-- 한번에 설정할 수 있다. -->
		<jsp:setProperty name = "Sbean" property="*" />
		<!-- 필요하다면 하나씩 세팅도 가능하다. -->
	</jsp:useBean>
	
	<h2>당신의 학번은 : </h2><jsp:getProperty name = "Sbean" property="number" />
	<h2>당신의 평균 학점은 : </h2><jsp:getProperty name = "Sbean" property="grade" />
	<h2>당신의 전화번호는 : </h2><jsp:getProperty name = "Sbean" property="tel" />
	<h2>당신의 부모님은 : </h2><jsp:getProperty name = "Sbean" property="parent" />
	<!--<h2>당신의 주소는 : </h2><jsp:getProperty name = "Sbean" property="address" />-- >
	
	<!-- 다른 방식도 사용이 가능하다 -->
	<p/>
	당신의 주소는 <%= Sbean.getAddress()%>
	
</body>
</html>

3.

package com.company.aboutking.beans;

public class StudentBean {
	//멤버변수 5
	private String number;
	private String grade;
	private String tel;
	private String parent;
	private String address;
	
	//get, set
	public String getNumber() {
		return number;
	}
	public void setNumber(String number) {
		this.number = number;
	}
	public String getGrade() {
		return grade;
	}
	public void setGrade(String grade) {
		this.grade = grade;
	}
	public String getTel() {
		return tel;
	}
	public void setTel(String tel) {
		this.tel = tel;
	}
	public String getParent() {
		return parent;
	}
	public void setParent(String parent) {
		this.parent = parent;
	}
	public String getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}
	

	
}

ch12

1. member.jsp

2. memberProc.jsp

3. script.js

4.

1.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script language="JavaScript" src="script.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
	<table width="500" align="center" cellspacing="0" cellpadding="5">
		<tr>
			<td align="center" valign="middle" bgcolor="#DBBDBD">
				<table border="1" cellspacing="0" cellpadding="2" align="center">
					<form name="regForm" method="post" action="memberProc.jsp">
						<tr align="center" bgcolor="#00ADED">
							<td colspan="3">
								<font color="#FFFFFF"><b>회원 가입</b></font>
							</td>
						</tr>
						<tr>
							<td width="100">아이디</td>
							<td width="200"><input name="id" size="15" value="questzz"></td>
							<td width="200">아이디를 적어 주세요.</td>
						</tr>
						<tr>
							<td>패스워드</td>
							<td><input type="password" name="pwd" size="15" value="asd1234"></td>
							<td>패스워드를 적어주세요.</td>
						</tr>
						<tr>
							<td>패스워드 확인</td>
							<td><input type="password" name="repwd" size="15" value="asd1234"></td>
							<td>패스워드를 확인합니다.</td>
						</tr>
						<tr>
							<td>이름</td>
							<td><input name="name" size="15" value="김철수"></td>
							<td>고객실명을 적어주세요.</td>
						</tr>
						<tr>
							<td>생년월일</td>
							<td><input name="birthday" size="27" value="1990-08-01"></td>
							<td>생년월일을 적어주세요.</td>
						</tr>
						<tr>
							<td>이메일</td>
							<td><input name="email" size="20" value="abc@naver.com"></td>
							<td>이메일을 적어주세요.</td>
						</tr>
						<tr>
							<td colspan="3" align="center">
							<input type="button"value="회원가입" onclick="inputCheck()"> 
							&nbsp;<input type="reset" value="다시쓰기">
							 </td>
						</tr>
					</form>
				</table>
			</td>
		</tr>
	</table>
</body>
</html>

2.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>memberProc.jsp</title>
</head>
<body>
	<%
		request.setCharacterEncoding("utf-8");
		
		String id = request.getParameter("id");
		System.out.println("id : " + id);
		
		String pwd = request.getParameter("pwd");
		System.out.println("pwd : " + pwd);
		
		String repwd = request.getParameter("repwd");
		System.out.println("repwd : " + repwd);
		
		String name = request.getParameter("name");
		System.out.println("name : " + name);
		
		String birthday = request.getParameter("birthday");
		System.out.println("birthday : " + birthday);
		
		String email = request.getParameter("email");
		System.out.println("email : " + email);
	%>
	<!-- MemberBean2 regBean = new MemberBean2(); -->
	<jsp:useBean id="regBean" class="com.company.aboutking.beans.MemberBean2"/>
	<jsp:setProperty property="*" name="regBean"/>
	
	<h2>아이디  <jsp:getProperty property="id" name="regBean"/></h2>
	<h2>패스워드  <jsp:getProperty property="pwd" name="regBean"/></h2>
	<h2>이름  <jsp:getProperty property="name" name="regBean"/></h2>
	<h2>생년월일  <jsp:getProperty property="birthday" name="regBean"/></h2>
	<h2>이메일  <jsp:getProperty property="email" name="regBean"/></h2>
	
</body>
</html>

3. 해당 내용 빈칸일 시 alert 창 뜨기

/**
 * 
 */
$(document).ready(function(){})
function inputCheck(){
	
	if(document.regForm.id.value == ""){
		alert("아이디를 입력해 주세요.");
		document.regForm.id.focus();
		return;
	}
	if(document.regForm.pwd.value == ""){
		alert("비밀번호를 입력해 주세요.");
		document.regForm.pwd.focus();
		return;
	}
	if(document.regForm.repwd.value == ""){
		alert("비밀번호를 재입력해 주세요.");
		document.regForm.repwd.focus();
		return;
	}
	if(document.regForm.name.value == ""){
		alert("이름을 입력해 주세요.");
		document.regForm.name.focus();
		return;
	}
	if(document.regForm.birthday.value == ""){
		alert("생년월일을 입력해 주세요.");
		document.regForm.birthday.focus();
		return;
	}
	if(document.regForm.email.value == ""){
		alert("이메일을 입력해 주세요.");
		document.regForm.email.focus();
		return;
	}
	
	if(document.regForm.pwd.value != document.regForm.repwd.value){
		alert("비밀번호가 일치하지 않습니다.");
		document.regForm.repwd.focus();
		return;
	}
	
	document.regForm.submit();
}

4.

package com.company.aboutking.beans;

public class MemberBean2 {
	private String id;
	private String pwd;
	private String name;
	private String birthday;
	private String email;
	
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPwd() {
		return pwd;
	}
	public void setPwd(String pwd) {
		this.pwd = pwd;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getBirthday() {
		return birthday;
	}
	public void setBirthday(String birthday) {
		this.birthday = birthday;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	
	
}

 

 

'코리아 IT아카데미 > grid·flex·mySql·jsp' 카테고리의 다른 글

19일차 | Jsp3  (0) 2022.02.28
17일차 | jsp2  (0) 2021.12.09
16일차 | jsp1  (0) 2021.12.06
15일차 | jquery, http/서버 개념, postman으로 확인  (0) 2021.12.03
14일차 | json 파일 만들기, 프로그램 설치, 다이나믹 웹 프로젝트 만들기  (0) 2021.12.02

관련글

티스토리툴바