17장 수정 처리

작업 파일 : /WebContent/board/modify.jsp

 

사용자가 수정하려는 작업은 크게 세 가지로 나누어 볼 수 있습니다.

 

• 내용만 수정하는 경우
• 첨부 파일만 수정하는 경우
• 내용+첨부 파일 모두를 수정하는 경우

위의 세 가지를 다시 두 가지로 함축하면 내용은 무조건 수정된다고 생각하고 첨부파일의 수정 여부만을 놓고 보면,

• 첨부파일을 추가하는 경우
• 첨부파일을 제거하는 경우
• 첨부파일을 부분 제거, 추가하는 경우

와 같을 것입니다. 이 부분은 실제로 BoardDao의 modifyR()에서 처리하겠지만 프로세스가 어떻게 흘러가는지 염두해 두고 진행해 주시기 바랍니다.

 

먼저 작업의 결과 동영상을 보도록 하겠습니다.

 

 

 

[modify.jsp 전체 코드]

<%@page import="bean.Page"%>
<%@page import="bean.BoardController"%>
<%@page import="bean.AttVo"%>
<%@page import="java.util.List"%>
<%@page import="bean.BoardVo"%>
<%@page import="bean.BoardDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:useBean id="p" class="bean.Page"/>
<jsp:setProperty property="*" name="p"/>
<%
	BoardController ctrl = new BoardController(request, response);
	ctrl.modify();
	BoardVo vo = (BoardVo)request.getAttribute("vo");
	List<AttVo> attList = vo.getAttList();
%>  


<div id='board'>
	<form name='frmBrd' id='frmInput' method='post' enctype='multipart/form-data'>
		<h2 class='title'>자유 게시물 수정</h2>
		<label>작성자</label>
		<input type='text' name='worker' value='<%=vo.getWorker()%>'><br/>
		
		<label>제 목</label>
		<input type='text' name='subject' size='70' value='<%=vo.getSubject()%>'><br/>
	
		<textarea rows="20" cols="90" name='content'><%=vo.getContent()%></textarea><br/>
	
		<label>파일첨부</label>
		<input type='file' name='attach' id='btnAttach' multiple/>
		<div id='attachList'></div>
	
		<%if(attList.size()>0){ %>
		<fieldset>
			<legend>첨부된 파일 목록</legend>
				<% for(AttVo att : attList){ 	%>
					<label class='attDel' >
						<img src="./upload/<%=att.getAttFile() %>" class='img'/>
						<div class='del_label'>
							<input type='checkbox' value='<%=att.getAttFile() %>' name='delFile'>삭제
						</div>
					</label>
				<%} %>
		</fieldset>
		<%} %>
		
		<div id='btnZone'>
			<input type='button' value='저장' id='btnUpdate' />
			<input type='button' value='취소' id='btnSelect'/>
			<input type='hidden' name='password'>
			<input type='hidden' name='serial'  value="<%=vo.getSerial()%>">
			<input type='hidden' name='findStr'  value="<%=p.getFindStr()%>">
			<input type='hidden' name='nowPage' value="<%=p.getNowPage()%>">
		</div>
	</form>
</div>

<script src = './js/file_upload.js'></script>
<script>
	upload.start('frmInput' , 'btnAttach', 'btnUpdate', 'attachList', 
				'./board/result.jsp?job=modifyR')
</script>

 

• 9~10행 : view화면에 있었던 findStr, nowPage정보를 가져와 Page 객체를 생성합니다.
• 11~16행 : 사용자의 용청 정보를 가지고 BoardController를 생성한 후 수정폼에 출력할 값을 가져오기 위해 ctrl.modify() 메서드를 호출합니다. ctrl.modify()가 호출되면 BoardVo, attList(첨부파일 정보)에 관한 정보가 request 객체에 담겨집니다.
• 34~46행 : attList항목에 데이터가 있으면 첨부 파일 정보를 표시해 줍니다. 이때 38행의 <label> 태그를 사용한 이유는 41행의 체크박스가 존재하는데 체크박스뿐만 아니라 <label>로 감싸준 이미지 태그를 클릭해도 체크박스에 체크가 되도록 하기 위해서입니다. 체크 박스가 선택되면 데이터가 수정될 때 선택된 항목을 첨부파일에서 제거하는 프로세스가 실행됩니다.
• 48~ 55행 : 현재 화면에서 이동 처리에 사용하는 버튼들입니다. 페이지를 이동할 때 항상 주의해야 할 점은 findSr(검색어), nowPage(현재 페이지), serial(게시물 번호)를 갖고 이동해야 한다는 점입니다.

이것으로 수정 폼에 대한 포스팅을 마치도록 하겠습니다.

 

[관련동영상-게시물 수정하기(묵음)]