13. 게시물 수정과 삭제.

게시물의 수정 작업은 일반적으로 

1. 조회 페이지에서 직접 처리하는 방식

2. 별도의 수정/삭제 페이지를 만들어서 해당 페이지에서 수정과 삭제를 처리하는 방식

두 방법으로 많이 처리함.

 

조회 페이지에서는 GET 방식으로 처리되는 URL을 통해서 수정/삭제 버튼이 존재하는 화면을 볼 수 있게 제작.

 

수정 혹은 삭제 작업은 POST 방식으로 처리되고, 결과는 다시 목록(list)에서 확인하는 형태로 제작.

 

먼저 BoardController에서 수정 삭제가 가능한 화면으로 이동하는 메서드를 생성.

약간의 수정이 필요함.

@GetMapping({"/get", "/modify"})
	public void get(@RequestParam("bno")long bno, Model model) {
		
		log.info("get or modify");
		model.addAttribute("board", service.get(bno));
	}

@GetMapping이나 @PosetMapping 등에는 URL을 배열로 처리할 수 있으므로 하나의 메서드로 여러 URL을 처리 가능.

 

views 폴더에 modify.jsp 생성.

 

get.jsp와 비슷하니 복사 붙여넣고 modify라 이름 변경해도 상관없음.

 

jsp를 만들었다면 서버를 실행 후 확인 /board/modify?bno=45 이런식으로 확인.

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<%@include file="../includes/header.jsp"%>
<div class="row">
	<div class="col-lg-12">
		<h1 class="page-header">Board Modify/Delete</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 Modify/Delete
				<!-- /.panel-heading -->
				<div class="panel-body">
					<form>
						<div class="form-group">
							<label>BNO</label> <input class="form-control" name="bno"
								readonly="readonly" value='<c:out value="${board.bno}"/>'>
						</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>content</label>
							<textarea class="form-control" name="content" rows="5"><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}"/>'>
						</div>
						<div class="dox-footer">
							<button type="submit" class="btn btn-default" data-oper="modify">Modify</button>
							<button type="submit" class="btn btn-danger" data-oper="remove">Remove</button>
							<button type="submit" class="btn btn-info" data-oper="list">List</button>
						</div>

					</form>
				</div>
				<!-- /.panel-body -->
			</div>
			<!-- /.panel -->
		</div>
		<!-- /.col-lg-12 -->
	</div>


	<%@include file="../includes/footer.jsp"%>

 

form 태그는 action 속성과 method 속성을 달아줘야 하는데 스크립트 처리 예정.

 

먼저 버튼 3개를 생성. list, modify, remove 

 

버튼에 이벤트처리를 해야함. 

 

이벤트 처리 할 때는 기본동작을 먼저 막는게 좋음. ( preventDefault(); )

 

<script>
		$(document).ready(function() {
			
			var formObj = $("form");
			
			$(".btn").click(function(e) {
				e.preventDefault();

				var operation = $(this).data("oper");

				console.log(operation);
				
				if(operation === 'list'){
					self.location="/board/list";
				}else if(operation === 'remove'){
					formObj.attr("action","/board/remove")
					.attr("method", "post");
					formObj.submit();
				}else if(operation === 'modify'){
					formObj.attr("action","/board/modify")
					.attr("method", "post");
					formObj.submit();
				}

			});

		})
	</script>

 

 

form태그에 action과 method를 따로 지정을 안해가지고 attribute라는 속성을 가지고 추가함.

 

그리고 버튼이 이벤트가 잘 동작하는지 확인.

 

먼저 remove부터 확인. 

 

remove를 누르면 삭제가 되는지 확인해야함.

 

정상적으로 삭제처리가 완료됨. 혹시 모르니 데이터베이스도 확인.

 

 

 

바로 수정까지 테스트.

 

 

 

이렇게 수정과 삭제 작업이 끝남.