본문 바로가기
JSP 웹프로그래밍

JSP #7 : 액션 태그 (230105)2

by haheehee 2023. 1. 5.

++ 액션 태그 (Action tag) ++

- JSP에서 객체 생성과 공유, 페이지 이동과 전달, 태그 파일 작성 등에 필요한 기능을 제공하는 커스텀 태그

- 표준 액션

- 커스텀 태그 기반 (하지만, 별도의 taglib 지시어 없이 jsp 접두어 사용)

- JSP에서 프로그램적인 요소를 많이 구현하거나 컨트롤러로 활용할 때 유용

- JSP 파일에서 커스텀 태그의 구조적인 특징을 살려 HTML 형태로 프로그램 요소를 처리할 수 있기 때문에 간편

Action Tag Description
jsp:forward request와 response 객체를 포함해 다른 페이지로 포워드
jsp:include 다른 페이지의 실행 결과 포함
jsp:useBean 자바 빈즈 객체를 생성, 불러옴
jsp:setProperty 자바 빈즈 객체의 속성(멤버변수)에 값 할당
jsp:getProperty 자바 빈즈 객체의 속성값을 출력
jsp:param include, forward 액션 사용할 때, 파라미터 값을 수정, 추가

++ Java Bean(자바 빈) ++

- 자바의 재활용 가능한 컴포넌트 모델

- 웹 개발에만 국한되지 않음

- POJO라는 단순한 구조

  • Plain Old Java Object(POJO): 특정 기술이나 프레임워크에 종속하지 않고 기본 생성자와 멤버 변수에 대한 getter /setter 메서드를 제공, 직렬화할 수 있는 자바 클래스
  • 엔티티 클래스 (DO(Data Object)) : 기본적으로 테이블 칼럼인 private 멤버 변수와 getter/setter 메서드로 구성

- 빈객체(Bean 객체) : VO라고 부른다!!

 

- 인자가 없는 생성자로 구성

- 직렬화 구조 가능 (파일 / 네트워크를 통해 객체를 주고받을 수 있는 구조)

- getter, setter 메서드를 통해 멤버 변수에 접근

 


++ useBean Action ++

- JSP에서 자바 빚 객체를 생성, 참조하는 액션

- JSP를 뷰 역할로 사용하면 useBean 사용x

- JSP 페이지에서 자바 빈을 대체하기 위한 태그

 

  1. useBean을 이용해 만든 객체의 범위는 지정하는 속성인 scope에 주어진 id의 객체가 있는지 확인
  2. 객체가 없으면 새로 생성하고, 해당 scope에 저장
<jsp:useBean id="빈 이름" class="패키지 이름을 포함한 자바 빈 클래스 이름" [scope="접근범위"] />
<jsp:useBean id="instanceName" scope="page|request|session|application"
    class="packageName.className" type="packagename.className"
    beanName="packageName.className">
</jsp:useBean>

- id : 자바 빈을 특정 scope에 저장하거나 가져올 때 이름 (해당 인스턴스를 참조하기 위한 변수명)

- scope : 해당 클래스 타입의 객체를 저장하거나 가지고 오는 범위. (내장 객체의 일부)

- class : 생성, 참조하는 객체의 클래스명 (패키지명까지 명시)

- type : 특정 타입의 클래스를 명시할 때 사용 (추상클래스, 추상 인터페이스, 일반적인 클래스, / class속성의 클래스에서 상속, 구현이 이루어져야 한다.)

- beanName : type과 beanName을 사용해 class속성 대체

 

- HTML 폼에서 입력한 값을 자바 객체로 연동할 때 주로 사용

- 회원가입 페이지에서 id, 이름, 번호, 주소, 이메일 등 정보를 입력하고 가입할 때. 입력값을 받아 Member 객체에 넣고, 이를 db에 저장하기 위한 메서드 호출 시 인자 전달에 사용


useBean Action 실습

https://hhahee.tistory.com/88

 

JSP : database와 연동 (230106)

Database와 연동해보기~.~ 데이터베이스와 회원정보 연동하기 DB먼저! - VO - DAO - Servlet 순서로 ++ DB ++ t_member 테이블 생성 데이터도 생성해보았다 ㅋㅋㅋ ++ VO++ 생성해놓은 Dynamic Web Project에 database.tes

hhahee.tistory.com

위 페이지에서, 마지막 실습인

자바 빈을 이용한 회원 정보 조회

실습에서 member.jsp파일만 수정하면 된다.

<%@ page language="java" contentType="text/html; charset=utf-8" 
	import="java.util.*, database.test.ex03.*" pageEncoding="utf-8" %>
<% 
	request.setCharacterEncoding("utf-8");
%>
<jsp:useBean id="m" class="database.test.ex03.MemberBean2" scope="page" />
<jsp:setProperty name="m" property="*" />

<%
	/*String id = request.getParameter("id");
	String pwd = request.getParameter("pwd");
	String name = request.getParameter("name");
	String email = request.getParameter("email");
	MemberBean2 m = new MemberBean2(id, pwd, name, email); s*/
	
	MemberDAO2 memberDAO = new MemberDAO2();
	memberDAO.addMember(m); 
	List membersList = memberDAO.listMembers();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>회원 정보 출력 창</title>
</head>
<body>
	<table border="1" align="center">
		<tr align="center" bgcolor="#99ccff">
			<td width="7%"><b>아이디</b></td>
			<td width="7%"><b>비밀번호</b></td>
			<td width="5%"><b>이름</b></td>
			<td width="11%"><b>이메일</b></td>
			<td width="5%"><b>가입일</b></td>
		</tr>
		<%
		if(membersList.size() == 0) {
		%>
			<tr align=center>
				<td colspan="5">
					<p align="center"><b><span style="font-size: 9pt;">
							등록된 회원이 없습니다. </span></b></p>
				</td>
			</tr>
		<%
		} else {
				for(int i=0; i<membersList.size(); i++) {
					MemberBean2 bean = (MemberBean2) membersList.get(i);
		%>
			<tr align=center>
				<td><%=bean.getId() %></td>
				<td><%=bean.getPwd() %></td>
				<td><%=bean.getName() %></td>
				<td><%=bean.getEmail() %></td>
				<td><%=bean.getJoinDate() %></td>
			</tr>
		<%
				}
			}
		%>
			<tr height="1" bgcolor="#99ccff">
				<td colspan="5"></td>
			</tr>
	</table>
</body>
</html>

member2.jsp 파일.

서블릿코드에서 useBean 액션 코드로 바꾼것!!

 

↓↓↓

// 1 (member3.jsp)
<jsp:setProperty name="m" property="id" value='<%= request.getParameter("id") %>' />
<jsp:setProperty name="m" property="pwd" value='<%= request.getParameter("pwd") %>' />
<jsp:setProperty name="m" property="name" value='<%= request.getParameter("name") %>' />
<jsp:setProperty name="m" property="email" value='<%= request.getParameter("email") %>' />

// 2 (member4.jsp)
<jsp:setProperty name="m" property="id" param="id" />
<jsp:setProperty name="m" property="pwd" param="pwd" />
<jsp:setProperty name="m" property="name" param="name" />
<jsp:setProperty name="m" property="email" param="email" />

// 3 (member5.jsp)
<jsp:setProperty name="m" property="id" />
<jsp:setProperty name="m" property="pwd" />
<jsp:setProperty name="m" property="name" />
<jsp:setProperty name="m" property="email" />

// 4 (member6.jsp)
<jsp:setProperty name="m" property="*" />

1 ~ 4는 모두 같은 결과!

 

param="id" 는

value='<%= request.getParameter("id") %>' 와 같다. 

들어오는 이름과 객체의 이름이 같다면 param자체를 생략해도 된다.

 

마지막 4번째것으로 하면, 인자들을 하나하나 코딩하지 않아도 된다.

 


++ include Action ++

- 다른 페이지를 포함 (include 지시어와 동일) 하지만, 처리과정이 다르다!

  • include 지시어 : include된 파일 구조를 모두 포함 -> 하나의 파일로 컴파일해 처리
  • include 액션 : include된 파일을 각각 호출하여, 처리된 결과만 포함
// include 액션을 사용해 'main.jsp'에 'head.jsp'를 포함시켰다면..
// main.jsp를 호출하면 head.jsp 실행결과가 포함되어 출력

// main.jsp
<jsp:include page="head.jsp">
    <jsp:param name="title" value="My Homepage"/>
</jsp:include>

// head.jsp
<%= request.getParameter("title") %>

include Action 실습

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
	request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>include1.jsp</title>
</head>
<body>
	안녕하세요. 쇼핑몰 중심 JSP 시작입니다.
	<br>
	<jsp:include page="test_image.jsp" flush="true">
		<jsp:param name="name" value="전구" />
		<jsp:param name="imgName" value="light.jpg" />
	</jsp:include>
	<br>
	안녕하세요. 쇼핑몰 중심 JSP의 끝부분 입니다.
</body>
</html>

first.jsp파일

<jsp:include page="test_image.jsp" flush="true">    : test_image.jsp를 동적으로 포워딩

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
	request.setCharacterEncoding("utf-8");
	String name = request.getParameter("name");
	String imgName = request.getParameter("imgName");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>image test</title>
</head>
<body>
	<br><br>
	<h1>이름은 <%=name %>입니다. </h1><br><br>
	<img src ="./..\images\<%=imgName%>" />
</body>
</html>

result.jsp

param Action 태그로 전달된 매개변수를 getParameter() 메소드로 불러온다.

사친출처 : pixabay

 


++ forward Action ++

- 클라이언트 요청을 다른 페이지로 전환

- response.sendRedirect() (리디렉션)과 유사

  • redirection : 서버가 클라이언트에게 새로운 페이지로 다시 접속하게 응답을 보냄. 응답받은 클라이언트가 다시 새로운 페이지로 접속
  • forward 액션 : 클라이언트가 새롭게 접속하는 것이 아닌, 서버에서 내부적으로 새로운 페이지로 이동 -> 그 페이지의 내용을 클라이언트에게 응답하여 전달

- 단순한 페이지 이동이라면 redirection이 적합

- 최초 request를 유지해야하거나, request의 setAttribute()로 속성값을 저장하고 이것을 유지하면서 페이지 이동을 해야한다면 ==> forward액션!!!

- 파라미터 추가 가능

// main.jsp
<jsp:forward page="result.jsp">
    <jsp:param name="title" value="My Homepage" />
<jsp:forward>

// result.jsp
<%= request.getparameter("title") %>

forwardAction 실습

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
	request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>login page</title>
</head>
<body>
	<h1>아이디를 입력하지 않았습니다. 아이디를 입력해 주세요.</h1>
	<form action="result.jsp" method="post">
		아이디 : <input type="text" name="userId"><br>
		비밀번호 : <input type="password" name="userPw"><br>
		<input type="submit" value="로그인">
		<input type="reset" value="다시 입력">
	</form>
</body>
</html>

login.jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>login-result</title>
</head>
<body>
	<%
		String userId = request.getParameter("userId");
		if(userId.length() == 0) {
	%>
		<jsp:forward page="login.jsp" />
	<%
		}
	%>
	
	<h1>환영합니다. <%=userId %>님</h1>
</body>
</html>

result.jsp

if문 바로 안에 RequestDispatcher를 사용해 포워딩하지 않아도 된다. 

아이디를 입력하지 않았다면, 다시 <jsp:forward>태그로 로그인창으로 포워딩해준다.

아무것도 입력하지 않고 로그인 버튼 누르면,

<jsp:forward>태그로인해 다시 로그인창 불러온다.

값을 입력해준 후, 

로그인 버튼을 누르면, 

매개변수 값을 불러와 값 출력


forwardAction 실습2

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
	request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>login page</title>
</head>
<body>
	<%
		String msg = request.getParameter("msg");
		if(msg != null) {
	%>
		<h1> <%=msg %> </h1>
	<%
		}
	%>
	
	<form action="result2.jsp" method="post">
		아이디 : <input type="text" name="userId"><br>
		비밀번호 : <input type="password" name="userPw"><br>
		<input type="submit" value="로그인">
		<input type="reset" value="다시 입력">
	</form>
</body>
</html>

login2 JSP파일

<form>태그 위에 브라우저에서 접속할 때, msg값을 가져와서 표시.

최초 접속시에는 null이기 때문에 아무것도 표시하지 않는다.

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
	request.setCharacterEncoding("utf-8");
%>
<%!
	String msg = "아이디를 입력하지 않았습니다. 아이디를 입력해 주세요.";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>login-result</title>
</head>
<body>
	<%
		String userId = request.getParameter("userId");
		if(userId.length() == 0) {
	%>
		<jsp:forward page="login2.jsp" >
			<jsp:param name="msg" value="<%=msg %>" />
		</jsp:forward>
	<%
		}
	%>
	<h1>환영합니다. <%=userId %>님</h1>
</body>
</html>

result2 JSP파일

아이디를 입력하지 않았다면, 

<jsp:param>액션 태그를 사용하여 오류 메세지를 login2로 전달

아이디를 입력하지 않고 

로그인 버튼을 누르면, 오류메세지가 나온다.

아이디와 비밀번호를 입력하면

result창으로 이동!

 

 

 

 

 

 

 

 

 

(출처 : 짧고 굵게 배우는 JSP 웹 프로그래밍과 스프링 프레임워크(황희정))

댓글