관리 메뉴

거니의 velog

(8) 자바 코드를 없애는 액션 태그 2 본문

Java_JSP

(8) 자바 코드를 없애는 액션 태그 2

Unlimited00 2023. 9. 13. 19:25

3. useBean, setProperty, getProperty 액션 태그 사용하기

* 화면 작업을 하는 디자이너 입장에서는 클래스 객체의 속성에 접근할 때 자바의 getter나 setter를 사용하는 것보다는 태그를 사용하는 것이 더 쉽다.

* 이번에는 useBean, setProperty, getProperty 액션 태그를 사용해 객체 생성부터 속성에 값을 저장하거나 가져오는 방법에 대해 알아보자. 본격적으로 useBean 액션 태그를 살펴보기 전에 먼저 자바 빈(Java bean)의 개념부터 살펴보자.


(1) 자바 빈을 이용한 회원 정보 조회 실습

* 자바 빈은 웹 프로그램, 즉 Java EE 프로그래밍 시 여러 객체를 거치면서 만들어지는 데이터를 저장하거나 전달하는 데 사용한다. 자바의 DTO(Data Transter Object) 클래스, VO(Value Object, 값 객체) 클래스와 같은 개념이라고 할 수 있다.

DTO란 ? 객체와 객체 사이에 데이터를 전달하는 용도로 사용하는 값 객체
* 자바 빈을 만드는 방법은 VO 클래스를 만드는 방법과 같으며 특징은 다음과 같다.

- 속성의 접근 제한자는 provate이다.

- 각 속성(attribute, property)은 각각의 setter/getter를 가진다.

- setter/getter 이름의 첫 글자는 반드시 소문자이다.

- 인자 없는 생성자를 반드시 가지며 다른 생성자도 추가할 수 있다.

* 그럼 자바 빈을 이용해 회원 테이블의 회원 정보를 조회한 후 출력해 보자.

1. sec01.ex01 패키지를 생성하고 MemberBean, MemberDAO 클래스를 추가한다. 그리고 실습 파일 member.jsp와 memberForm.html을 생성한다.

2. 회원 정보를 저장하는 MemberBean 클래스를 만들기 전에 다음의 회원 테이블을 보자.

3. 회원 테이블을 참고해 MemberBean 클래스를 작성한다. MemberBean 클래스의 속성은 회원 테이블의 각 컬럼 이름을 그대로 사용하며 자료형도 컬럼 이름의 자료형과 동일하게 선언한다.

package sec01.ex01;

import java.sql.Date;

public class MemberBean {
	
	private String id;
	private String pwd;
	private String name;
	private String email;
	private Date joinDate; // 회원 테이블의 컬럼 이름과 동일하게 이름과 자료형을 선언한다.
	
	public MemberBean() {}

	public MemberBean(String id, String pwd, String name, String email) {
		this.id = id;
		this.pwd = pwd;
		this.name = name;
		this.email = 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 getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

	public Date getJoinDate() {
		return joinDate;
	}

	public void setJoinDate(Date joinDate) {
		this.joinDate = joinDate;
	} 
	// getter/setter를 추가한다.
	
}

4. 회원 가입창에서 회원 정보를 입력한 후 member.jsp로 전송하도록 memberForm.html을 작성한다.

<!DOCTYPE html>
<html lang="ko">

    <head>
        <meta charset="UTF-8">
        <title>회원 가입창</title>
    </head>

    <body>
        <form method="post" action="member.jsp">
            <h1 style="text-align:center">회원 가입창</h1>
            <table align="center">
                <tr>
                    <td width="200">
                        <p align="right">아이디</p>
                    </td>
                    <td width="400"><input type="text" name="id"></td>
                </tr>
                <tr>
                    <td width="200">
                        <p align="right">비밀번호</p>
                    </td>
                    <td width="400"><input type="password" name="pwd"></td>
                </tr>
                <tr>
                    <td width="200">
                        <p align="right">이름</p>
                    </td>
                    <td width="400">
                        <p><input type="text" name="name"></p>
                    </td>
                </tr>
                <tr>
                    <td width="200">
                        <p align="right">이메일</p>
                    </td>
                    <td width="400">
                        <p><input type="text" name="email"></p>
                    </td>
                </tr>
                <tr>
                    <td width="200">
                        <p>&nbsp;</p>
                    </td>
                    <td width="400">
                        <input type="submit" value="가입하기" />
                        <input type="reset" value="다시입력" />
                    </td>
                </tr>
            </table>
        </form>
    </body>

</html>

5. member.jsp를 다음과 같이 작성한다. 전송된 회원 정보를 getParameter() 메서드를 이용해 가져온 후 MemberBean 객체를 생성하여 각 회원 정보를 속성에 설정한다. 그런 다음 MemberDAO의 addMember() 메서드를 호출해 인자로 전달한다. 새 회원을 추가한 후에는 다시 MemberDAO의 listMembers() 메서드를 호출해 모든 회원 정보를 조회하고 목록으로 출력한다.

<%@ page language="java"   contentType="text/html; charset=UTF-8"
    import="java.util.*,sec01.ex01.*" 
    pageEncoding="UTF-8"%>
<%
   request.setCharacterEncoding("UTF-8"); // 한글 인코딩을 설정한다.
%>

<%
   String id=request.getParameter("id");
   String pwd = request.getParameter("pwd");
   String name = request.getParameter("name");
   String email = request.getParameter("email"); // 전송된 회원 정보를 가져온다.
   
   MemberBean m = new MemberBean(id, pwd, name, email); // MemberBean 객체를 생성한 후 회원 정보를 속성에 설정한다.
   MemberDAO memberDAO = new MemberDAO();
   memberDAO.addMember(m); // 회원 정보를 테이블에 추가한다.
   List membersList = memberDAO.listMembers(); // 전체 회원 정보를 조회한다.
%>
<!DOCTYPE html>
<html lang="ko">

    <head>
        <meta charset="UTF-8">
        <title>회원 목록창</title>
    </head>

    <body>
        <table align="center" width="100%">
            <tr align="center" bgcolor="#99ccff">
                <td width="7%">아이디</td>
                <td width="7%">비밀번호</td>
                <td width="5%">이름</td>
                <td width="11%">이메일</td>
                <td width="5%">가입일</td>
            </tr>
            <%
	           if(membersList.size()==0){
	        %>
            <tr>
                <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++ ) { // for문을 이용해 memberList의 저장된 MemberBean 객체를 한 개씩 가져온 후 각 속성의 회원 정보를 다시 getter를 이용해 출력한다.
		              MemberBean bean = (MemberBean) 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>
            <%
	               } // end for
	
		        } // end if
	        %>
            <tr height="1" bgcolor="#99ccff">
                <td colspan="5"></td>
            </tr>
        </table>
    </body>

</html>

6. MemberDAO를 다음과 같이 작성한다. addMember() 메서드 호출 시 MemberBean 객체로 전달된 회원 정보를 getter를 이용해 가져온 후 insert문을 이용해 추가한다.

package sec01.ex01;

import java.sql.Connection;
import java.sql.Date;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import javax.naming.Context;
import javax.naming.InitialContext;
import javax.sql.DataSource;

public class MemberDAO {
	
	private Connection con;
	private PreparedStatement pstmt;
	private DataSource dataFactory;

	public MemberDAO() {
		try {
			Context ctx = new InitialContext();
			Context envContext = (Context) ctx.lookup("java:/comp/env");
			dataFactory = (DataSource) envContext.lookup("jdbc/oracle");
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	public List listMembers() {
		List list = new ArrayList();
		try {
			con = dataFactory.getConnection();
			String query = "select * from t_member order by joinDate desc "; // 회원 정보를 최근 가입일 순으로 조회한다.
			System.out.println("prepareStatememt: " + query);
			pstmt = con.prepareStatement(query);
			ResultSet rs = pstmt.executeQuery();
			while (rs.next()) {
				String id = rs.getString("id");
				String pwd = rs.getString("pwd");
				String name = rs.getString("name");
				String email = rs.getString("email");
				Date joinDate = rs.getDate("joinDate");
				MemberBean vo = new MemberBean();
				vo.setId(id);
				vo.setPwd(pwd);
				vo.setName(name);
				vo.setEmail(email);
				vo.setJoinDate(joinDate);
				list.add(vo); // 조회한 회원 정보를 MemberBean 객체의 속성에 저장한 후 다시 ArrayList에 저장한다.
			}
			rs.close();
			pstmt.close();
			con.close();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return list;
	}

	public void addMember(MemberBean memberBean) { // MemberBean 객체에 저장된 회원 정보를 전달한다.
		try {
			Connection con = dataFactory.getConnection();
			String id = memberBean.getId();
			String pwd = memberBean.getPwd();
			String name = memberBean.getName();
			String email = memberBean.getEmail(); // getter를 이용해 회원 정보를 가져온다.
			String query = "insert into t_member";
			query += " (id,pwd,name,email)";
			query += " values(?,?,?,?)";
			System.out.println("prepareStatememt: " + query);
			pstmt = con.prepareStatement(query);
			pstmt.setString(1, id);
			pstmt.setString(2, pwd);
			pstmt.setString(3, name);
			pstmt.setString(4, email);
			pstmt.executeUpdate();
			pstmt.close(); // 회원 정보를 추가한다.
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

7. 다음의 주소로 요청하여 회원 정보를 입력한 후 가입하기를 클릭한다.

- http://localhost:8090/pro13/memberForm.html

8. 새 회원이 추가된 후 다시 회원 정보를 조회하여 목록으로 출력하는 것을 볼 수 있다.


(2) 유즈빈 액션 태그를 이용한 회원 정보 조회 실습

* 앞에서 자바 빈을 사용해 회원 추가와 조회를 어떻게 하는지 살펴봤다. 그런데 이처럼 자바 코드로 이루어진 자바 빈을 자주 사용할 경우 화면이 복잡해 진다는 단점이 있다. 이러한 단점을 보완하기 위해 나온 것이 유즈빈 액션 태그이다.

* 유즈빈 액션 태그는 JSP 페이지에서 자바 빈을 대체하기 위한 태그로, 사용 형식은 다음과 같다.

<jsp:useBean id="빈 이름" class="패키지 이름을 포함한 자바 빈 클래스" [scope="접근범위"] />

* 여기서 id는 JSP 페이지에서 자바 빈 객체에 접근할 때 사용할 이름을 의미한다. class는 패키지 이름을 포함한 자바 빈 이름을, scope는 자바 빈에 대한 접근 범위를 지정하는 역할을 한다. 

(page, request, session, application을 가지며 기본값을 page 이다.)

* 앞의 예제를 기반으로 이번에는 유즈빈 액션 태그를 이용해 회원을 등록하고 조회해 보자. 계속해서 같은 예제로 살펴보는 이유는 두 태그의 차이를 올바로 이해하기 위해서이다.

1. 다음과 같이 실습 파일  member2.jsp를 추가한다.

2. member2.jsp를 다음과 같이 작성한다. 회원 가입 조회 시 MemberBean 클래스에 대한 유즈빈 액션 태그를 사용하려면 먼저 <jsp:useBean> 액션 태그를 이용하여 MemberBean 클래스에 대해 id가 m인 빈을 생성한다. 이는 직접 자바 코드로 MemberBean 객체를 생성하는 것과 같은 역할을 한다. 그런 다음 자바 코드에서 빈 id인 m을 이용해 회원 가입창에서 전달된 회원 정보를 setter를 통해 빈 속성에 설정한다.

<%@ page language="java"   contentType="text/html; charset=UTF-8"
    import="java.util.*,sec01.ex01.*" 
    pageEncoding="UTF-8"%>
<%
   request.setCharacterEncoding("UTF-8"); // useBean에 속성 값을 설정하기 전에 한글 인코딩 작업을 한다.
%>

<!-- 유즈빈 액션 태그로 id가 m인 MemberBean 객체를 만든다. -->
<jsp:useBean id="m" class="sec01.ex01.MemberBean" scope="page" />

<%
   String id=request.getParameter("id");
   String pwd = request.getParameter("pwd");
   String name = request.getParameter("name");
   String email = request.getParameter("email");
  
   // MemberBean m = new MemberBean(id, pwd, name, email); // 자바 코드에서 MemberBean 객체를 생성하지 않는다.
   m.setId(id);
   m.setPwd(pwd);
   m.setName(name);
   m.setEmail(email); // useBean에 전송된 회원 정보를 설정한다.

   MemberDAO  memberDAO=new MemberDAO();
   memberDAO.addMember(m);
   List membersList = memberDAO.listMembers(); // 회원 정보를 추가한 후 목록으로 출력한다.
%>
<!DOCTYPE html>
<html lang="ko">

    <head>
        <meta charset="UTF-8">
        <title>회원 목록창</title>
    </head>

    <body>
        <table align="center" width="100%">
            <tr align="center" bgcolor="#99ccff">
                <td width="7%">아이디</td>
                <td width="7%">비밀번호</td>
                <td width="5%">이름</td>
                <td width="11%">이메일</td>
                <td width="5%">가입일</td>
            </tr>
            <%
	           if(membersList.size()==0){
	        %>
            <tr>
                <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++ ) {
		              MemberBean bean = (MemberBean) 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>
            <%
	               } // end for

	            } // end if
	        %>
            <tr height="1" bgcolor="#99ccff">
                <td colspan="5"></td>
            </tr>
        </table>
    </body>

</html>

3. 마찬가지로 다음 주소로 요청하여 회원 가입창에 회원 정보를 입력하고 가입하기를 클릭한다.

- http://localhost:8090/pro13/memberForm.html

4. 자바 빈을 사용했을 때와 마찬가지로 추가된 새 회원과 함께 회원 목록을 출력한다.

* 눈으로 보는 출력 결과는 같지만 유즈빈 액션 태그를 사용하면 굳이 자바 코드를 사용하지 않고도 JSP 페이지에서 처리할 수 있다는 점에서 효율적이다.