Servlet&JSP

Step02_DB (jsp UPDATE)

bono.html 2022. 8. 16. 13:03

 

본 게시글은 이전 게시글에서 만든 페이지에 UPDATE기능을 추가하는 내용의 게시글이다.

2022.08.16 - [Servlet&JSP] - Step02_DB (jsp DELETE)

 

 

index.jsp

<%@ 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>인덱스 페이지 입니다.</h1>
	<ul>
		<li><a href="member/list.jsp">회원목록보기</a></li>
	</ul>
</body>
</html>

index.jsp

 

 

list.jsp

<%@page import="test.member.dto.MemberDto"%>
<%@page import="java.util.List"%>
<%@page import="test.member.dao.MemberDao"%>
<%@page import="test.util.DbcpBean"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//MemberDao 객체의 참조값을 얻어와서
	MemberDao dao=MemberDao.getInstance();
	//회원목록을 얻어온다.
	List<MemberDto> list=dao.getList();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/member/list.jsp</title>
</head>
<body>
<div class="container">
	<a href="insertform.jsp">회원추가</a>
	<h1>회원 목록입니다.</h1>
	<table>
		<thead>
			<tr>
				<th>번호</th>
				<th>이름</th>
				<th>주소</th>
				<th>수정</th>
				<th>삭제</th>
			</tr>
		</thead>
		<tbody>
		<%for(MemberDto tmp:list) {%>
			<tr>
				<td><%=tmp.getNum() %></td>
				<td><%=tmp.getName() %></td>
				<td><%=tmp.getAddr() %></td>
				<td>
					<a href="updateform.jsp?num=<%=tmp.getNum() %>">수정</a>
				</td>
				<td>
					<a href="delete.jsp?num=<%=tmp.getNum() %>">삭제</a>
				</td>
			</tr>
		<%} %>
		</tbody>
	</table>
</div>
</body>
</html>

list.jsp

 

 

수정 링크를 추가했다. 링크를 누르면 updateform.jsp?num 으로 이동한다.

예시에서 a태그 코드는 form 태그에서 사용하던 get 방식과 유사하다.

2022.08.12 - [Servlet&JSP] - Step01_Servlet(form연결하기, get post 비교, Servlet jsp 비교)

 

 

MemberDao.java

이전 게시글에서 사용하던 MemberDao에서 update메소드를 추가하였다.

아래의 코드는 추가한 update메소드이며 위에서 만들어둔 dbupdate 템플릿을 활용하여 일부(sql 문과 바인딩)만 수정하였다.

특정 회원 정보를 리턴해주는 getData 메소드도 추가하였다.

 

update 메소드

   public boolean update(MemberDto dto) {
      Connection conn = null;
      PreparedStatement pstmt = null;
      int updatedRowCount = 0;
      try {
         conn = new DbcpBean().getConn();
         //실행할 sql 문
         String sql = "UPDATE member"
               + " SET name=?, addr=?"
               + " WHERE num=?";
         pstmt = conn.prepareStatement(sql);
         //? 값을 바인딩 할게 있으면 바인딩하기
         pstmt.setString(1, dto.getName());
         pstmt.setString(2, dto.getAddr());
         pstmt.setInt(3, dto.getNum());
         //insert, update, delete 를 수행하고 변화되 row 의 갯수를 리턴 받기
         updatedRowCount = pstmt.executeUpdate();
      } catch (Exception e) {
         e.printStackTrace();
      } finally {
         try {
            if (pstmt != null)
               pstmt.close();
            if (conn != null)
               conn.close();
         } catch (Exception e) {
         }
      }
      //변화된 row 의 갯수가 0 보다 크면 작업 성공
      if (updatedRowCount > 0) {
         return true;
      } else {//그렇지 않으면 작업 실패
         return false;
      }
   }

getData 메소드

   public MemberDto getData(int num) {
	      MemberDto dto=null;
	      Connection conn = null;
	      PreparedStatement pstmt = null;
	      ResultSet rs = null;
	      try {
	         //Connection 객체의 참조값 얻어오기 (Connection Pool 에서 하나 가져오기)
	         conn = new DbcpBean().getConn();
	         //실행할 sql 문 작성
	         String sql = "SELECT name, addr"
	               + " FROM member"
	               + " WHERE num=?";
	         //sql 문을 전달하면서 PreparedStatement 객체의 참조값 얻어오기
	         pstmt = conn.prepareStatement(sql);
	         //? 에 값을 바인딩 할게 있으면 한다.
	         pstmt.setInt(1, num);
	         //select 문 수행하고 결과를 ResultSet 으로 받아온다.
	         rs = pstmt.executeQuery();
	         //반복문 돌면서 ResultSet 의 cursor 를 한칸씩 내린다.
	         while (rs.next()) {
	            //cursor 가 위치한 곳의 칼럼 데이터 추출해서 어딘가에 담기 
	            dto=new MemberDto();
	            dto.setNum(num);
	            dto.setName(rs.getString("name"));
	            dto.setAddr(rs.getString("addr"));
	         }

	      } catch (Exception e) {
	         //혹시 예외가 발생한다면 예외정보를 콘솔에 출력해서 에러의 원인 찾기 
	         e.printStackTrace();
	      } finally {
	         try {
	            if (rs != null)
	               rs.close();
	            if (pstmt != null)
	               pstmt.close();
	            if (conn != null)
	               conn.close(); //Connection 반납
	         } catch (Exception e) {
	         }
	      }
	      return dto;
	   }

 

 

updateform.jsp

<%@page import="test.member.dao.MemberDao"%>
<%@page import="test.member.dto.MemberDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//1. get 방식 파라미터로 전달되는 수정할 회원의 번호를 읽어온다.
	int num=Integer.parseInt(request.getParameter("num"));
	//2. DB에서 수정할 회원의 정보를 얻어온다.
	MemberDto dto=MemberDao.getInstance().getData(num);
	//3. 수정할 회원의 정보를 form 에 출력해서 응답한다.
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/member/updateform.jsp</title>
</head>
<body>
	<div class="container">
		<h1>회원 정보 수정 폼</h1>
		<form action="update.jsp" method="post">
			<!-- input type="hidden" 은 화면상에 보이지는 않지만 폼을 전송하면 같이 전송된다 -->
			<input type="hidden" name="num" value="<%=dto.getNum()%>"/>
			<div>
				<label for="num">번호</label>
				<!-- 
					번호는 primary key로 사용이 되기 때문에 수정을 하지 않는다.
					그래서 수정할 필요가 없기 때문에 disabled로 설정한 것이다.
					하지만 disabled로 설정하면 form 전송했을때 전송도 되지 않는다.
					이런 이유 때문에 input type="hidden"으로 수정할 회원의 번호가
					폼으로 전송될때 같이 전송되도록 해 놓은 것이다.
				 -->
				<input type="text" id="num" value="<%=dto.getNum()%>" disabled/>
			</div>
			<div>
				<label for="name">이름</label>
				<input type="text" name="name" id="name" value="<%=dto.getName()%>"/>
			</div>
			<div>
				<label for="addr">주소</label>
				<input type="text" name="addr" id="addr" value="<%=dto.getAddr()%>"/>
			</div>
			<button type="submit">수정확인</button>
			<button type="reset">취소</button>
		</form>
	</div>
</body>
</html>

 

정보를 입력할 수 있는 form을 구성하였다. form action을 설정해서 버튼 클릭시 update.jsp로 이동한다.

 

번호는 primary key로 사용하고 있기 때문에 수정하면 안된다. 그래서 번호에 해당하는 input을 disabled로 설정하였다. 이러면 번호는 화면에는 보이지만 disabled로 설정했기 때문에 form을 전송할때 정보가 전송되지 않는다.

따라서 type="hidden"의 input을 별도로 만들어 화면에는 보이지 않지만 번호 정보를 같이 전송하게 코드를 작성하였다.

 

입력된 정보를 서버로 전달하는 type인 submit과 입력된 정보를 초기화하는 type인 reset으로 버튼을 분류하였다.

 

 

update.jsp

<%@page import="test.member.dto.MemberDto"%>
<%@page import="test.member.dao.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
   request.setCharacterEncoding("utf-8");

   //1. 폼 전송되는 수정할 회원의 정보를 읽어온다.
   int num=Integer.parseInt(request.getParameter("num"));
   String name=request.getParameter("name");
   String addr=request.getParameter("addr");
   //MemberDto 객체에 수정할 회원의 정보를 담는다.
   MemberDto dto=new MemberDto(num, name, addr);
   //2. DB 에 수정 반영한다.
   boolean isSuccess=MemberDao.getInstance().update(dto);
   //3. 응답한다.
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/member/update.jsp</title>
</head>
<body>
   <div class="container">
      <h1>알림</h1>
      <%if(isSuccess){ %>
         <p>
            <strong><%=num %></strong> 번 회원의 정보를 수정 했습니다.
            <a href="list.jsp">확인</a> 
         </p>
      <%}else{ %>
         <p>
            수정 실패! <a href="updateform.jsp?num=<%=num%>">다시 시도</a>
         </p>
      <%} %>
   </div>   
</body>
</html>

update.jsp