Spring Security 게시판 수정 및 삭제

[asel0joo]

3. 게시판 수정하기(Upload), 삭제하기(Delete)

• post.jsp

  <main class="mt-5 pt-5">
          <div class="container px-4">
              <!-- 제목 -->
              <!-- insert된 article_Board_type이 '공지사항'이면  -->
              <c:if test="${boardDto.article_Board_type eq '공지사항'}">
                  <!-- 제목 : 공지사항 -->
                  <!-- 게시판 목록이동 a태그 사용 -->
                  <h2 class="writing-header mb-3">
                      <a id="noticeList">공지사항</a> 
                  </h2>
              </c:if>
              <!-- insert된 article_Board_type이 '이벤트'이면  -->
              <c:if test="${boardDto.article_Board_type eq '이벤트'}">
                  <!-- 제목 : 이벤트/행사-->
                  <h2 class="writing-header mb-3">
                      <a id="eventList">이벤트/행사</a>    
                  </h2>
              </c:if>
  
              <form id="form" class="frm" action="ycc/board/post" method="post">
                  <div class="card mb-4">
                      <div class="card-body">
                          <!-- 게시글 정보 -->
                          <input type="hidden" name="article_id" value="${boardDto.article_id }">
                          <h4 class="title" >${boardDto.article_title }</h4>
                          <p class="writingInfo">작성자 : ${boardDto.user_id} |
                              게시일 : <fmt:formatDate value="${boardDto.article_date }" pattern="yyyy-MM-dd" type="date"/> 
                              | 조회수 : ${boardDto.article_viewcnt }
                          </p>
                          <hr>
                          <!-- 내용 -->
                          <p class="content" >${boardDto.article_contents }</p>                           
                      </div>
                  </div>              
  
                  <div class="row pb-5" style="float:right">
                      <div class="col-auto px-1" >
                          <a id="listBtn" class="btn btn-outline-secondary" ><i class="bi bi-justify"></i>목록</a>  
                      </div>
                      <!-- 본인이 쓴 게시글에만 수정, 삭제 가능 -->
                      <!-- 세션 아이디와 boardDto에 저장되 아이디가 같으면 수정, 삭제 버튼 활성화 -->
                      <sec:authorize access="isAuthenticated()">
                      <sec:authentication property="principal" var="pinfo"/>
                          <c:if test="${pinfo.member.user_id eq boardDto.user_id}">
                              <div class="col-auto px-1">
                                  <button type="button" class="btn btn-outline-success" id="modifyBtn"><i class="bi bi-pen"></i>수정</button>
                              </div>
                              <div class="col-auto px-1">
                                  <button type="button" class="btn btn-outline-danger" id="deleteBtn"><i class="bi bi-trash3"></i>삭제</button>
                              </div>
                          </c:if>
                      </sec:authorize>
                       <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}">
                 </div>
             </form>
  
                 <!-- 이전글, 다음글  -->
                 <div class="prevNext">
                      <table class="table table-bordered table-hover" style="border-radius:5px;">
                          <colgroup>
                              <col width="120px;">
                              <col width="auto;">
                          </colgroup>
                              <tbody>
                                  <tr>
                                      <th scope="row" class="text-center table-primary">이전글<i class="bi bi-caret-up-fill"></i></th>
                                          <td class="pre" id="preTitle"> 
                                              <c:if test ="${preView.preId != 9999}">
                                                  <a style="text-decoration: none; color: black;"
                                                   href="<c:url value="/board/post?article_id=${preView.preId  }"/>">  
                                                  ${preView.preTitle}</a>
                                              </c:if>
                                              <c:if test = "${preView.preId == 9999}">
                                                  <div class="fs-6" style="font-size: bold;">이전글이 없습니다.</div>
                                              </c:if>
                                          </td>
                                  </tr>
                                  <tr>
                                      <th scope="row" class="text-center table-primary">다음글<i class="bi bi-caret-down-fill"></i></th>
                                          <td  class="next" id="nextTitle">
                                              <c:if test ="${nextView.nextId != 9999}" >
                                                  <a style="text-decoration: none; color: black; "
                                                   href="<c:url value="/board/post?article_id=${nextView.nextId  }"/>">
                                                  ${nextView.nextTitle}</a>
                                              </c:if>
                                              <c:if test ="${nextView.nextId == 9999}">
                                                  <div class="fs-6" style="font-size: bold;">다음글이 없습니다.</div>
                                              </c:if>
                                          </td>
                                  </tr>
                              </tbody>
                      </table>
                  </div>
                  </div>
          </main>

① 아이디가 일치하지 않으면 수정, 삭제버튼 숨김

② 아이디가 일치하면 수정, 삭제버튼 노출

• post.jsp

  
  //수정하기 버튼 클릭 시, 데이터 불러와 write페이지로 이동
  $("#modifyBtn").on("click", function() {
  if(!confirm("수정하시겠습니까?")) return;
  let article_id = ${boardDto.article_id }
  let form = $("#form")
  form.attr("action", "<c:url value='/board/edit${searchItem.queryString}' />")
  form.attr("method", "get")
  form.submit()
  })

//삭제하기 버튼 클릭 시 작동 $("#deleteBtn").on("click", function() { if(!confirm("정말로 삭제하시겠습니까?")) return;

let form = $("#form")
form.attr("action","<c:url value='/board/remove${searchItem.queryString}' />")
form.attr("method", "post")
form.submit()

})

1. **게시글 수정하기(Uplodad) 로직**
    1) 게시글 정보 불러오기 → 글 수정 페이지 open → 글 수정 내용 DB 업데이트
- write.jsp
```html
<form action='<c:url value="/board/edit1" />' name="writeForm" method="post">
    <div class="container mt-5">
        <h3 class="posttitle pt-3">글쓰기</h3>
            <hr>
                <!-- 게시판 유형 선택 시 value값이 DB에 저장  -->
                <select class="form-select mb-2"  id="boardType" name="article_Board_type" style="width: 180px;">
              <option selected disabled="disabled">선택해주세요.</option>
              <option value="공지사항">공지사항</option>
              <option value="이벤트">이벤트/행사</option>
        </select>
                <input type="text" class="form-control mb-3" id="title" name="article_title"
                 placeholder="제목을 입력해주세요" value="${boardDto.article_title }">
            <textarea class="summernote mb-5" id="contents" name="article_contents"  >
            ${boardDto.article_contents}</textarea>                             
        <div class="m-5" style="text-align: center;">
            <input class="btn btn-primary mx-3" id="regBtn" type="button" onclick="regCheck()" value="등록하기" >
            <input class="btn btn-secondary" type="button" value="취소하기">
        </div>
        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}">
    </div>
</form>

<script>

//summernot 
$('.summernote').summernote({
    height: 400,
    lang: "ko-KR"
  });

//등록하기 버튼 클릭 시 작동
function regCheck() {
    // 게시판 유형 값이 없으면 alert창 띄우기 
    if($("#boardType option:selected").val()=="선택해주세요."){
        alert("게시판 유형을 선택해주세요.")
    }
    //title에 값이 없으면 alert창 띄우고 ,focus
    else if($("#title").val()== ""){
        alert("제목을 입력해주세요");
        document.writeForm.article_title.focus();
    }
    //contents에 값이 없으면 alert창 띄우고 ,focus
    else if($("#contents").val()==""){
        alert("내용을 입력해주세요");
        document.writeForm.article_contents.focus();
    }
    //title, contents에 값이 있으면 submit 후 alert창 띄우기 
    else if($("#title").val()!="" && $("#contents").val()!="") {
        document.writeForm.submit();
        alert("등록되었습니다.")
    }

}

  </script>

• 게시글 정보 불러오기

• BoardController.java

  //게시글 수정페이지로 이동
  @GetMapping("/edit")
  public String getArticleEdit(Integer article_id, Model m) {
  
  //boardMapper.xml에 select값을 가져오는 로직
  try {
      BoardDto boardDto = boardService.getArticleEdit(article_id);
      m.addAttribute("boardDto", boardDto);
  } catch (Exception e) {e.printStackTrace();}
  return "board/edit";
  }

• BoardServiceImpl.java

  //수정하기 : 데이터 가져오기
  @Override
  public BoardDto getArticleEdit(Integer article_id) throws Exception {
  
      return boardDao.articleEdit(article_id);
  }

• BoardDaoImpl.java

  //수정하기 : 데이터 가져오기
  @Override
  public BoardDto articleEdit(Integer article_id) throws Exception {
  
      return session.selectOne(namespace + "articleEdit", article_id);
  }

• boardMapper.xml

  <!-- 수정하기 : article 테이블의 게시글 수정 데이터 가져오기 -->
  <select id="articleEdit" parameterType="int" resultType="BoardDto">
  SELECT 
      article_id, article_Board_type, article_date, user_id, article_title, article_contents, article_viewcnt
  FROM article
  where article_id = #{article_id}
  </select>

• 글 수정내용 DB 업로드 로직

• BoardController.java

  //게시글 수정(등록)
  @PostMapping("/edit1")
  public String modify(BoardDto boardDto, Principal principal) {
  
  boardDto.setUser_id(principal.getName());
  //등록버튼 누를 시 수정됨
  try {
      boardService.modify(boardDto);
      if(boardDto.getArticle_Board_type().equals("공지사항") ) {
          //insert 후 공지사항 게시판으로 보여줌
          return "redirect:/board/notice";                    
      }
      //boardDto에서 받은 board-type이 "E"이면 이벤트/행사 게시판에 
      else if(boardDto.getArticle_Board_type().equals("이벤트") ) {
          //insert 후 이벤트 게시판으로 보여줌 
          return "redirect:/board/event";
      }
  } catch(Exception e) {e.printStackTrace();}
  
  return "redirect:/board/notice";
  }

• BoardServiceImpl.java

  //수정하기 : 등록하기 버튼
  @Override
  public void modify(BoardDto boardDto) throws Exception {
  
  boardDao.update(boardDto);
  }

• BoardDaoImpl.java

  //수정하기 : 데이터 등록하기
  @Override
  public void update(BoardDto boardDto) throws Exception {
   session.update(namespace+"update", boardDto);
  }

• boardMapper.xml

  <!-- 수정하기 :  article 테이블에 게시글 수정(등록버튼 누를 시)-->
  <update id="update" parameterType="BoardDto">
  UPDATE article
  SET article_date=now(),article_Board_type=#{article_Board_type}, article_title=#{article_title}, article_contents=#{article_contents}
  WHERE article_id= #{article_id} and user_id = #{user_id}
  </update>

수정할 데이터 불러오기, 수정 내용 DB 업데이트 완료!

① 수정할 데이터 불러오기, 삭제버튼 클릭

② 수정한 내용 정상적으로 update 됨

③ 데이터도 성공적으로 들어감

2. 게시글 삭제하기(Delete) 로직

   • BoardController.java

     
     //게시글 삭제
     @PostMapping("/remove")
     public String remove(Integer article_id) {

   try { //삭제할 게시글 데이터 가져오기 BoardDto tmpboard=boardService.getArticleEdit(article_id);

   if(boardService.remove(article_id)== 1) {
      //boardDto에서 받은 board-type이 "N"이면 공지사항게시판에 insert
      if(tmpboard.getArticle_Board_type().equals("공지사항") ) {
         //insert 후 공지사항 게시판으로 보여줌
         return "redirect:/board/notice";               
      }
      //boardDto에서 받은 board-type이 "E"이면 이벤트/행사 게시판에 insert
      else if(tmpboard.getArticle_Board_type().equals("이벤트") ) {
         //insert 후 이벤트 게시판으로 보여줌 
         return "redirect:/board/event";
      }
   }

   } catch (Exception e) {e.printStackTrace();}

   return "redirect:/board/notice"; }

• BoardServiceImpl.java

  //삭제하기
  @Override
  public int remove(Integer article_id) throws Exception {
  
  return boardDao.delete(article_id);
  }

• BoardDaoImpl.java

  //삭제하기
  @Override
  public int delete(Integer article_id) throws Exception {
  
  return session.delete(namespace+"delete", article_id);
  }

• boardMapper.xml

  <!-- 삭제하기 :  article 테이블에 게시글 삭제-->
  <delete id="delete" parameterType="int">
  delete from article 
  where article_id = #{article_id}    
  </delete>

① 삭제버튼 클릭

② 해당 게시물 삭제됨