[JSP] 데이터 전송 방식 , Scope & Attribute , Hidden, Bean
by 무작정 개발반응형
2022.02.11(35일 차)
오늘은 jsp3폴더 시작하고 그전에 list.jsp 완성하고, 어제 퀴즈 설명
오후 3시에는 layout폴더 만들고 시작
웹에서 중요한 2가지 : 웹의 데이터 흐름 /
<jsp:useBean id=""></jsp:useBean>
Bean이라는 말이 들어가면 객체 생성!!!!!!!!!!! 1
이건 액션 태그이다 액션 태그는 2가지가 있다.
자바 빈즈(JavaBeans)의 활용과 관련된 액션 태그 ( 객체를 생성하는 액션 태그)
<jsp:useBean> : JSP 페이지 내에서 사용할 자바 빈즈 객체를 생성
<jsp:setProperty> : 생성된 자바 빈즈 객체의 멤버 변수 값을 지정
<jsp:getProperty> : 생성된 자바 빈즈 객체의 특정 멤버 변수 값을 반환
JSP의 실행 제어와 관련된 액션 태그
<jsp:forward> : 다른 JSP 페이지로 처리 제어권을 넘기고 다른 사이트로 이동할 때 사용한다.
<jsp:include> : 다른 JSP 페이지를 호출하여 실행한 후 돌아옴
<jsp:param> : 다른 JSP 페이지 실행 시 파라미터를 전달하기 위해 사용
외부 파일을 불러올 때 사용하는 것이 jsp:include (파일 : layout폴더)
다음으로는 forward랑 include 방식 (파일 : jsp3폴더 for1,2 파일)
forward방식 단점은 한글이 깨진다. forward방식은 별도의 한글 처리가 필요하다.
forward은 한글을 보낼 때 압축해서 보내고 풀어서 확인한다.
forward 방식은 주소가 바뀌지 않는다. + forward은 한글을 인코딩-디코딩해줘야 한다.
오후 3시 30분부터 jsp DB 연동 시작
오늘의 수업 내용
Web-Life-Cycle (Scope)
Web에는 life cycle 종류가 총 4가지가 있다.
Scope (영역) - 속성을 공유할 수 있는 유효 범위
Attribute (속성) - 공유되는 데이터
객체 범위 종류
(1) Application
- 서버가 유지되고 있는 동안 상태 유지 (ex. 모든 애플리케이션이 공유할 자원)
- 같은 애플리케이션 내에서 요청되는 페이지들은 애플리케이션 영역을 공유
★ JSP : Context클래스
★ Servlet : ServletContext클래스
(2) Session
- 세션이 설정돼서 세션 종료 때까지 상태 유지 (ex. 로그인 정보, 장바구니)
- 같은 브라우저 내에서 요청되는 페이지들은 세션 영역을 공유
★ JSP : session 내장 객체 사용
★ Servlet : HttpSession 클래스를 이용 세션 객체 얻기
HttpSession session=request.getSession();
(3) Request
- 다음 페이지까지 상태 유지(1대 1 관계) (ex. 게시판, 방명록)
- 요청을 받아서 응답하기까지 객체가 유효하다.
★ Servlet
RequestDispatcher rd =request.getRequestDispatcher("상대경로/파일명");
request.setAttribute("세션명",객체명);
rd.forward(request, response);
(4) Page
- 현재 페이지서만 상태 유지(해당 JSP페이지)
Hidden 태그를 이용한 데이터 전송
ex1.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
//ex1,2,3은 1대1관계라서 데이터를 session에 올려주고 받아주면서 해서 데이터를 넘겨준다.
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="ex2.jsp" method="post">
이름: <input type="text" name="userName" size="10"/><br/>
생일: <input type="text" name="userBirth" size="10"/><br/>
<input type="submit" value="다음"/> <!-- submit은 action을 찾아가서 action은 ex2를 찾아감 -->
</form>
</body>
</html>
ex2.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String userName = request.getParameter("userName");
String userBirth = request.getParameter("userBirth");
//session ex1에서 넘어온 데이터를 받아서 session에 올린다
//session.setAttribute("userName", userName);
//session.setAttribute("userBirth", userBirth);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- form 안에 있는것이 넘어간다. -->
<form action="ex3.jsp" method="post">
<!-- input type를 hidden으로 쓰면 우리 눈에는 데이터 값이 안보이지만 (숨겨져있다,)
데이터가 넘어가서 ex3으로 넘어간다. 보고싶으면 hidden을 text로 바꾸면 보인다.
-->
아이디: <input type="hidden" name="userId" size="10"/><br/>
패스워드: <input type="hidden" name="userPwd" size="10"/><br/>
<input type="text" name="userName" value= <%=userName %>>
<input type="text" name="userBirth" value=<%=userBirth %>>
<input type="submit" value="가입"/>
</form>
</body>
</html>
아이디 비밀번호 type을 hidden으로 하면 상단처럼 보이지 않는다. text타입으로 하면 하단 결과처럼 나온다.
ex3.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
//여기서는 session에 올라가있는 데이터를 getAttribute를 받아주는데 다운 캐스팅을 해준다.
//String userName = (String)session.getAttribute("userName");
//String userBirth = (String)session.getAttribute("userBirth");
String userName = request.getParameter("userName");
String userBirth = request.getParameter("userBirth");
String userId = request.getParameter("userId");
String userPwd = request.getParameter("userPwd");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
이름: <%=userName %><br/>
생일: <%=userBirth %><br/>
아이디: <%=userId %><br/>
패스워드: <%=userPwd %><br/>
</body>
</html>
여기까지 하면 JSP와 Sevlet에서 데이터를 옮기는 4가지 방법을 다 배웠다. 이 4가지 방법 말고는 데이터를 옮기는 방법이 없다.
1. getParmeter로 받기
2. Session으로 처리
3. Hidden으로 처리
4. setAttribute으로 받기 - 이건 Sevlet에서 배울 예정
Bean
- Bean을 활용하여 계산기 만들기
calc.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="calc_ok.jsp" method="post" >
<input type="text" name="su1" />
<select name="oper">
<option value="+">더하기</option>
<option value="-">빼기</option>
<option value="*">곱하기</option>
<option value="/">나누기</option>
</select>
<input type="text" name="su2">
<input type="submit" value=" = "/>
</form>
</body>
</html>
calc_ok.jsp
<%@page import="com.calc.Calc"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
//int su1 = Integer.parseInt(request.getParameter("su1"));
//int su2 = Integer.parseInt(request.getParameter("su2"));
//String oper = request.getParameter("oper");
/* Calc ob = new Calc(); //객체 생성
ob.setSu1(su1);
ob.setSu2(su2);
ob.setOper(oper);
String str = ob.sum(); //Calc 클래스의 sum()메서드 호출 */
%>
<jsp:useBean id="ob" class="com.calc.Calc" scope="page"/>
<jsp:setProperty property="*" name="ob"/>
<!-- 이렇게 하면 변수가 몇개가되든 알아서 찾아가게 할 수 있따. -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
결과: <%=ob.sum() %>
</body>
</html>
Calc 클래스
package com.calc;
public class Calc {
private int su1;
private int su2;
private String oper;
//개터세터
public int getSu1() {
return su1;
}
public void setSu1(int su1) {
this.su1 = su1;
}
public int getSu2() {
return su2;
}
public void setSu2(int su2) {
this.su2 = su2;
}
public String getOper() {
return oper;
}
public void setOper(String oper) {
this.oper = oper;
}
public String sum() {
String str = "";
int result = 0;
if(oper != null) {
if(oper.equals("+"))
result = su1 + su2;
else if(oper.equals("-"))
result = su1 - su2;
else if(oper.equals("*"))
result = su1 * su2;
else if(oper.equals("/"))
result = su1 / su2;
}
str = String.format("%d %s %d = %d", su1,oper,su2,result);
return str;
}
}
위의 문제는 Bean을 활용해서 계산기를 만드는 예제이다.
Bean이란?
반복적으로 코드를 따로 작성하여 재사용하기 위해 만들어진 클래스이다.
Bean은 속성과 메서드로 이루어져 있고, 데이터 처리를 담당한다.
Bean을 사용하면 JSP페이지의 로직 부분을 분리해서 코드를 재사용함으로써 효율을 높일 수 있다.
자바 빈즈(JavaBeans)의 활용과 관련된 액션 태그
<jsp:useBean> : JSP 페이지 내에서 사용할 자바 빈즈 객체를 생성
<jsp:setProperty> : 생성된 자바빈즈 객체의 멤버 변수 값을 지정
<jsp:getProperty> : 생성된 자바빈즈 객체의 특정 멤버 변수 값을 반환
JSP의 실행 제어와 관련된 액션 태그
<jsp:forward> : 다른 JSP 페이지로 처리 제어권을 넘기고 다른 사이트로 이동할 때 사용한다.
<jsp:include> : 다른 JSP 페이지를 호출하여 실행한 후 돌아옴
<jsp:param> : 다른 JSP 페이지 실행 시 파라미터를 전달하기 위해 사용
Bean 예제 2
- VO 데이터 전송
guest.jsp
<%@page import="java.util.Calendar"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
Calendar now = Calendar.getInstance();
int nowYear = now.get(Calendar.YEAR);
int nowMonth = now.get(Calendar.MONTH);
int nowDay = now.get(Calendar.DAY_OF_MONTH);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function sendIt() {
var f = document.myForm;
f.submit();
}
</script>
</head>
<body>
<form action="guest_ok.jsp" method="post" name="myForm">
이름: <input type="text" name="userName"/><br/>
제목: <input type="text" name="subject"/><br/>
내용: <input type="text" name="content"/><br/>
<input type="hidden" name="created"
value="<%=nowYear%>년 <%=nowMonth%>월 <%=nowDay%>일 "/>
<input type="button" value="글 올리기" onclick="sendIt();"/>
</form>
</body>
</html>guest_ok.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<jsp:useBean id="vo" class="com.calc.GuestVO" scope="page"/>
<jsp:setProperty property="*" name="vo"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
이름: <%=vo.getUserName() %><br/>
제목: <%=vo.getSubject() %><br/>
내용: <%=vo.getContent() %><br/>
날짜: <%=vo.getCreated() %><br/>
</body>
</html>GuestVO.java
package com.calc;
public class GuestVO {
private String userName;
private String subject;
private String content;
private String created;
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;
}
public String getCreated() {
return created;
}
public void setCreated(String created) {
this.created = created;
}
}
forward 예제
- 인코딩, 디코딩
한글의 경우 UTF-8 인코딩을 하지 않으면 글자가 깨지는 오류가 발생한다.
for1.jsp - 한글 데이터 전송 페이지
<%@page import="java.net.URLEncoder"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
//request.setCharacterEncoding("UTF-8");
String eng = "test";
String han = "테스트";
String kor = URLEncoder.encode(han, "UTF-8");
%>
<jsp:forward page="for2.jsp">
<jsp:param value="<%=eng %>" name="eng"/>
<jsp:param value="<%=kor %>" name="kor"/>
</jsp:forward>
<!-- 밑의 코딩은 실행이 안되서 지워도 된다. -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
한글 데이터 출력 페이지 - for2.jsp
<%@page import="java.net.URLDecoder"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
//request.setCharacterEncoding("UTF-8");
String eng = request.getParameter("eng");
String han = request.getParameter("kor");
String kor = URLDecoder.decode(han, "UTF-8");
//받은 eng kor를 밑에 body에서 찍는다.
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
포워딩된 데이터<br/>
eng: <%=eng %><br/>
kor: <%=kor %><br/>
</body>
</html>
오늘 마지막에 했던 성적처리페이지 만들기는 다음 글에 포스팅!
반응형
'Back-End > JSP & Struts & JDBC' 카테고리의 다른 글
| [JSP] 성적 처리 웹페이지 제작하기(DB연동) - (2) (0) | 2022.02.14 |
|---|---|
| [JSP] 성적 처리 웹페이지 제작하기(DB연동) - (1) (0) | 2022.02.13 |
| [JSP] Redirect, Forward, Session(세션) (5) | 2022.02.10 |
| [JSP & Servlet] JSP기초, get 방식, post 방식 (0) | 2022.02.10 |
| [JSP & Servlet] 자바스크립트(JavaScript)기초 (0) | 2022.02.09 |
블로그의 정보
무작정 개발
무작정 개발