[Spring] 게시물의 수정/삭제 처리

[Spring] 게시물의 수정/삭제 처리

광고 한 번의 클릭은 개발자에게 매우 큰 도움이 됩니다!

1. 수정/삭제 페이지로 이동

Controller에서 수정/삭제가 가능한 화면으로 이동하는 것은 조회 페이지와 같습니다. 따라서 기존 get( ) 메서드를 조금 수정해서 화면을 구성합니다.

 

Controller 일부

@GetMapping이나 @PostMapping 등에는 URL을 배열로 처리할 수 있으므로, 위와 같이 하나의 메서드로 여러 URL을 처리할 수 있습니다.

 

브라우저에는 '/board/modify?seq_bno=20'과 같은 방식으로 처리하므로, views 폴더 내 modify.jsp를 작성합니다.

modify.jsp는 get.jsp를 copy, paste로 생성했습니다. 조회 페이지와는 다르게 '제목', '내용' 등을 수정할 수 있게 input 태그에 readonly 속성을 제거합니다. POST 방식으로 처리하는 부분을 위해서는 <form> 태그로 내용들을 감싸게 합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@include file="../includes/header.jsp" %>

	<div class="row">
		<div class="col-lg-12">
			<h1 class="page-header">Tables</h1>
		</div>
		<!-- /.col-lg-12 -->
	</div>
	<!-- /.row -->
	<div class="row">
		<div class="col-lg-12">
			<div class="panel panel-default">
				<div class="panel-heading">
					Board Read Page
				</div>
                 <!-- /.panel-heading -->
                 
                 <div class="panel-body">
                 	
                 	<form role="form" action="/board/modify" method="post">
                 	
                 	<div class="form-group">
                 		<label>Bno</label>
                 		<input class="form-control" name="seq_bno" 
                 			value='<c:out value="${board.seq_bno }" />' readonly="readonly">
                 	</div>
                 	
                 	<div class="form-group">
                 		<label>Title</label>
                 		<input class="form-control" name="title"
                 			value='<c:out value="${board.title }" />'>
                 	</div>
                 	
                 	<div class="form-group">
                 		<label>Text area</label>
                 		<textarea class="form-control" rows="3" name="content">
                 		<c:out value="${board.content }"/></textarea>
                 	</div>
                 	
                 	<div class="form-group">
                 		<label>writer</label>
                 		<input class="form-control" name="writer"
                 			value='<c:out value="${board.writer }" />' readonly="readonly">
                 	</div>
                 	
                 	<div class="form-group">
                 		<label>regdate</label>
                 		<input class="form-control" name="regdate"
                 			value='<fmt:formatDate pattern="yyyy/MM/dd" 
                 			value="${board.regdate }" />' readonly="readonly">
                 	</div>
                 	
                 	<div class="form-group">
                 		<label>updatedate</label>
                 		<input class="form-control" name="regdate"
                 			value='<fmt:formatDate pattern="yyyy/MM/dd" 
                 			value="${board.updatedate }" />' readonly="readonly">
                 	</div>
                 	
                 	<button type="submit" data-oper="modify" class="btn btn-default">Modify</button>
                 	<button type="submit" data-oper="remove" class="btn btn-default">Remove</button>
                 	<button type="submit" data-oper="list" class="btn btn-default">List</button>
                 	
                 	
                 	</form>
                 	
				</div>
            	<!-- /.panel-body -->
			</div>	
        	<!-- /.panel -->
		</div>
		<!-- /.col-lg-12 -->
	</div>
	<!-- /.row -->
	
<%@include file="../includes/footer.jsp" %>

<form> 태그는 action 속성을 '/board/modify'로 지정했지만, 삭제를 하면 '/board/remove'와 같이 action 속성의 내용을 수정해서 사용하게 됩니다. 등록일과 수정일은 나중에 VO로 수집되어야 하므로 날짜 포맷을 'yyyy/mm/dd'의 포맷으로 해야 합니다. 마지막에는 '수정/삭제/목록' 등의 버튼을 추가합니다.

JavaScript에서는 위 버튼에 따라 다른 동작을 할 수 있도록 해야 합니다.

Javascript에서는 <button> 태그의 'data-oper' 속성을 이용해서 원하는 기능을 동작하도록 처리합니다. <form> 태그의 모든 버튼은 기본적으로 submit으로 처리하기 때문에 e.preventDefault( )로 기본 동작을 막고 마지막에 직접 submit( )을 수행합니다.

 

코드 수정

아래와 같이 <form> 태그의 action과 method를 수정하고, <form> 태그의 모든 내용은 삭제하고 submit( ) 해도 됩니다.

 

2. 게시물 수정/삭제 확인

게시물의 수정처리와 삭제처리를 확인해볼 수 있습니다.

---

오늘은 게시물의 수정/삭제 처리에 대해서 알아보았습니다. 도움이 되셨다면 구독! 좋아요♥ 부탁드립니다!