[Spring][커뮤니티 사이트]다중 게시판 - 수정 & 삭제

Mapper.xml(Oracle)

<!-- 삭제 -->
<delete id="remove">
	<![CDATA[
		delete from board
		where bno = #{bno}
	]]>
</delete>

<!-- 수정 -->
<update id="modify">
	<![CDATA[
		update board
		set title = #{title} , content = #{content} , category = #{category}
		where bno = #{bno}
	]]>
</update>

Controller

	//게시판 삭제
	@GetMapping("/remove")
	public String remove(int bno) { 
		log.info("remove.."+bno);
		service.remove(bno)) 
        
		return "redirect:/board/lists";
	}
	
	//게시판 수정
	@GetMapping("/modify")
	public void modify(int bno,Model model) {
		log.info("get modify");
		model.addAttribute("board",service.detail(bno));
	}
	@PostMapping("/modify")
	public String modify(BoardVO board) {
		log.info("post modify.."+board);
		service.modify(board);
		
		return "redirect:/board/lists";
		
	}

• 수정 페이지로 이동은 GetMapping, 수정 완료 버튼 누를 시 PostMapping 으로 움직입니다.
• 수정 페이지는 상세보기 페이지와 똑같기에 수정페이지 화면에 상세보기 값을 넣어 주었습니다.

Service & DAO

//Service
	//삭제
	@Override
	public boolean remove(int bno) {
		log.info("remove..."+bno);
	
		return dao.remove(bno) == 1;
	}
	//수정
	@Override
	public boolean modify(BoardVO board) {
		log.info("modify.."+board);

		return dao.modify(board) == 1;
	}
    
    //DAO
    //삭제
	@Override
	public int remove(int bno) {
		return session.delete("mapper.board.remove",bno);
	}
	//수정
	@Override
	public int modify(BoardVO board) {
		return session.update("mapper.board.modify",board); 
	}

• 수정 , 삭제 Service 에서 boolean 타입을 주어서 값이 참이면 실행되게 하였습니다.

JSP(수정)

<form method='post' id='modifyForm'>
	  <input type='hidden' id='bno' name='bno' value='${board.bno}'>
	
	<div class="container">
		<h1>수정</h1>
     <div class="row row1">
      <table class="table">
        <tr>
			<th width=30% class="text-center">
				<select class="option" name="category" id="category">
					<option value="" selected>말머리 선택해주세요</option>
					<option value="1">일반</option>
					<option value="2">질문</option>
					<option value="3">공략</option>
					<option value="4">자랑</option>
				</select>
			</th>
		</tr>
        <tr>
         <th width=20% class="text-center warning">제목</th>
         <td width=30% class="text-center">
         	<input type="text" name="title"  value="${board.title}">
         </td>
         	
         <th width=20% class="text-center warning">작성일</th>
         <td width=30% class="text-center">${board.credate}</td>
        </tr>
        <tr>
         <th width=20% class="text-center warning">닉네임</th>
         <td width=30% class="text-center">${board.nickname}</td>
        </tr>
        <tr>
          <td colspan="4" class="text-left" valign="top" height="200">
          	<textarea name="content"  style="width:100%; height:100%">${board.content}</textarea>
          </td>
        </tr>
        <tr>
          <td colspan="4" class="text-right">
          	<button type='submit' id="upd_chk" class="btn btn-xs btn-info">수정</button>
          	<input type='button' onClick="history.go(-1)" class="btn btn-xs btn-success" value="이전" />
          </td>
        </tr>
      </table>
     </div>
   </div>

</form>

• 상세보기 페이지에서 수정 버튼을 클릭하면 수정 페이지로 오게 됩니다.(안에 내용은 카테고리 옵션을 제외 하고는  상세보기와 같습니다)

JS(수정 부분)

$(document).ready(function(){
//수정 확인 및 취소 메시지창 띄우기
	$("#upd_chk").on('click',function(){
		var updform = $('#modfiyForm');
		var update = confirm("수정 하시겠습니까?");
			
		if(update){
			alert("수정 되었습니다");
			updform.attr('action','${path}/board/modify').submit();
		}else{
			alert("취소 되었습니다.");
			return false;
		}
	})
	
	
//select option 값 가져오기!
	let category = '${board.category}';		
	//option 객체에 접근을 하면 배열 형태로 프로퍼티를 가지고 있음
	//jquery의 each메서드 사용해서 option객체가 가지고 있는 모든 요소에 순차적으로 접근하도록 함. 
	$("option").each(function(i,obj){
		if(category === $(obj).val()){
			$(obj).attr("selected", "selected");
		}
	});		
});

• 수정을 하고 수정 버튼을 클릭 시 한번 더 확인을 위해 메시지 창을 띄우게 하였습니다.
• 수정을 확인 시키면 .submit로 데이터 값이 넘어가며 취소 시 수정 페이지에 계속 있게 됩니다.
• 그리고 수정 페이지에 들어 왔을때 사용자가 게시글 카테고리 설정 값을 가져오기위해 option의 배열을 반복문을 통해 순차적으로 확인 후 사용자가 설정한 값이 나오면 수정페이지에서 그 값을 볼 수 있도록 하였습니다.

JS(삭제 부분)

$('#del_chk').on('click',function(){
	var delconfirm = confirm('삭제 하시겠습니까?');
	
	if(delconfirm){
		alert('삭제 되었습니다.');
	}else{
		alert('삭제 취소되었습니다.');
		return false;
	}
})

• 상세보기 화면에서 삭제 버튼에 대한 스크립트이다.
• 삭제 또한 수정과 같은 방법으로 한번 메시창을 띄워서 한번 더 확인시켜주기 위해서 만들었습니다.