[Spring] 게시판 프로젝트12 - 게시물 수정, 삭제

게시물 등록 과정에서 우리는 처음 등록페이지를 들어갈 때는 get, 입력폼을 작성하여 등록 버튼을 눌렀을 때는 post방식을 사용하였다. 아래의 컨트롤러 코드를 보면 확인할 수 있다.

(기존에 작성했던 코드임)

 

BoardController.java

//게시물 등록 화면
@GetMapping("/register")
    public void registerGET() {
}

//실제로 게시물을 등록하는 경우
@PostMapping("/register") // 글을 등록하는 경우에는 get방식이 아니라 post방식을 사용한다.
public String register(BoardVO board, RedirectAttributes rttr) { // RedirectAttributes :
    log.info("[CONTROLLER]register : " + board);
    service.register(board);
    rttr.addFlashAttribute("result", board.getBno());
    return "redirect:/board/list";
}

 

modify는 register와 매우 유사하다.

게시물을 수정하는 페이지로 넘어가는 경우에는 get방식을, 내용을 수정해서 수정버튼을 누르는 경우에는 post방식이 사용된다. 기존 코드는 post방식의 modify코드만 포함되어 있는데 get방식 부분을 새롭게 구현하던지, 혹은 /get매핑 메소드의 전달 방식과 동일하기 때문에(두 경우 모두 bno만 필요하기 때문에 service.get(bno)를 사용함) {"/get","modify"}와 같이 묶어서 작성해줄 수 있다.

 

//게시물 수정 화면
@GetMapping({"/get","/modify"})
public void get(@RequestParam("bno") Long bno, Model model) {
    model.addAttribute("board", service.get(bno));
}

//실제로 게시물을 수정하는 경우
@PostMapping("/modify")
public String modify(BoardVO board, RedirectAttributes rttr) {
    log.info("[ CONTROLLER ] modify:" + board);
    if (service.modify(board)) {
        rttr.addFlashAttribute("result", "success");
    }
    return "redirect:/board/list";
}

 

컨트롤러를 수정했다면 modify.jsp파일을 생성한다. modify.jsp파일은 get.jsp파일과 거의 유사한 코드이기 때문에 복사해서 사용한다. 복사한 코드에서 bno부분을 제외한 input태그들의 readonly속성을 삭제하고<form>태그를 추가해준다.

수정, 삭제, 목록 버튼을 만들어둔다. 

 

modify.jsp

<div class="panel-body">
    <form action="/board/modify" method="post">
        <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" rows="5" 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}'/>">
        </div>
        <button type="submit" data-oper="modify" class="btn btn-default">수정</button>
        <button type="submit" data-oper="remove" class="btn btn-default">삭제</button>
        <button type="submit" data-oper="list" class="btn btn-default">목록</button>
    </form>
</div>
<!-- /.panel-body -->

 

우리는 삭제 버튼을 누르면 /remove로, 목록 버튼을 누르면 /list로 이동하는 작업을 해야한다. 그러나 <form>태그에서 action속성을 '/board/modify'로 지정하였기 때문에 자바스크립트 코드에서 각각의 상황을 제어해주어야 한다. 이것을 버튼의 'data-oper' 속성을 이용하여 제어할 수 있다.

 

아래의 코드에서 디테일한 과정을 확인하자. 

간단히 원리를 설명하자면, form태그에서 걸어둔 submit액션을 강제로 막아버리고 data-oper값에 따라 기능에 해당하는 action값을 변경한 후 강제 submit 처리하는 것이다. (jQuery에 대한 이해가 필요하다.)

 

<script type="text/javascript">
	$(document).ready(function() {
		var formObj = $("form");
		$('button').on("click", function(e) { 		//모든 button태그에 대한 클릭 이벤트 처리
			e.preventDefault(); 			//버튼의 기본 submit() 동작 막기
			var operation = $(this).data("oper");	//data-oper 값 읽어오기
			console.log(operation);

			if (operation === 'remove') {
				if (confirm("게시글을 삭제하시겠습니까?") == true) {
					alert("게시글이 삭제되었습니다.");
					formObj.attr("action", "/board/remove");
				} else {
					return false;
				}
			} else if (operation === 'list') {
				//move to list
				formObj.attr("action", "/board/list").attr("method", "get");	//삭제인 경우 action값을 변경
				formObj.empty(); //list페이지로 이동시에는 form 데이터가 필요없으므로 내용을 비움
			} else {
				alert("게시글이 수정되었습니다.");
			}
			formObj.submit();
		})
	})
</script>

 

다시 get.jsp페이지로 돌아가서 해야할 작업이 있다. get.jsp에서 modify.jsp로 이동할 때 bno정보를 넘겨주어야 modify에서도 해당 번호에 맞는 처리를 할 수 있기 때문에 <form>태그를 사용하여 bno값을 넘겨주어야 한다. 그러나 bno값만 넘겨주면 되기 때문에 전체 테이블에 걸어두는 것이 아니라 <input>태그에 hidden속성을 준 bno를 넘겨준다.

 

<form id="operForm" action="/board/modify" method="get">
    <input type="hidden" id="bno" name="bno" value="<c:out value='${board.bno}'/>">
</form>

 

<form>태그의 submit은 자바스크립트로 처리한다. 

버튼의 data-oper값에 따라 openForm의 action 경로를 변경한 뒤 submit해준다.

 

<script type="text/javascript">
	$(document).ready(function() {
		var operForm = $("#operForm");
		$("button[data-oper='modify']").on("click", function(e) {
			operForm.attr("action", "/board/modify").submit();
		});
		$("button[data-open='list']").on("click", function(e) {
			operForm.find("#bno").remove();
			operForm.attr("action", "/board/list");
			operForm.submit();
		});
	});
</script>