[스프링 게시판][5] 게시판 삭제 기능 구현

Git 주소 : github.com/sjinjin7/Blog_BoardProject

목표

 

게시판 삭제 기능 구현

 '게시판 수정(modify.jsp)' 페이지에서 '삭제' 버튼 추가와 버튼 기능 구현을 목표로 합니다. '삭제' 버튼을 눌렀을 때 해당 게시판 삭제가 이루어지고 '목록 페이지(list.jsp)'로 이동이 되며, 삭제가 완료되었다는 경고창을 띄울 것입니다. 

 

 

순서

1. Mapper 처리 및 테스트

2. Service 처리 및 테스트

3. Controller 처리 

4. View 처리

5. 테스트

 

1. Mapper 처리 및 테스트

 쿼리문 테스트

 

 '삭제' 기능에 사용될 쿼리문을 테스트 합니다. 삭제 기능에 사용할 쿼리문은 DELETE문입니다. WHERE 조건문에 '게시판 번호' 지정을 통하여, 특정 페이지만 삭제되도록 만듭니다. 

 

 
delete from vam_board where bno = '삭제할 게시판 번호';
 

 

 

BoardMapper.java 인터페이스 

 

 '삭제' 기능을 수행하는 쿼리를 실행할 메소드를 작성합니다. 반환 타입은 '수정'과 동일하게 int형으로 작성합니다. 삭제 쿼리가 성공을 하면 '1'을 반환하고, 실패하면 '0'을 반환합니다.

 

 
    /* 게시판 삭제 */
    public int delete(int bno);
 

 

그림 1

 

 

 

BoardMapper.xml 

 

 <delete>태그를 추가 후 앞서 테스트한 DELETE쿼리문을 활용하여 쿼리문을 작성합니다.

 

 
    <!-- 게시판 삭제 -->
    <delete id="delete">
    
        delete from vam_board where bno = #{bno}
    
    </delete>
 

 

그림 2

 

 

Mapper 메소드 테스트

 

 BoardMapperTests.java 에서 작성한 삭제 메소드를 Junit 테스트합니다.

 

 
    /* 게시판 삭제 */
    @Test
    public void testDelete() {
        
        int result = mapper.delete(23);
        log.info("result : " + result);
        
    }
 

 

그림 3

 

그림 4

 

 

2. Service 처리 및 테스트

BoardService.java 인터페이스

 

 BoardService.java 인터페이스에 '게시판 삭제' 메서드(delete())를 추가합니다. 앞서 Mapper 메소드와 같이 '게시판 번호(bno)'에 대한 정보만 있으면 되기 때문에 int형 변수를 파라미터로 부여합니다.

 

 
    /* 게시판 삭제 */
    public int delete(int bno);
 

 

그림 5

 

 

BoardService.impl.java 클래스

 

 BoardServiceimpl.java 클래스에 인터페이스에서 선언한 메소드를 구현합니다. 구현부에는 BoardMapper.java 인터페이스의 '게시판 삭제' 메소드를 호출합니다. int를 반환해야하기 때문에 return 값에서 Mapper 메소드를 호출합니다.

 

 
    /* 게시판 삭제 */
    @Override
    public int delete(int bno) {
        
        return mapper.delete(bno);
    }    
 

 

그림 6

 

 

BoardServiceTests.java

 

 작성한 Service 메소드를 테스트합니다. BoardServiceTests.java 클래스에 기존의 테스트 코드를 주석 처리한 후 아래의 코드를 추가하여 junit 테스트합니다.

 

 
    /* 게시판 삭제 */
     @Test
     public void testDelete() {
         
         int result = service.delete(22);
         log.info("result : " + result);
         
     }
 

 

그림 7

 

그림 8

 

 

3. Controller 처리

 게시판 삭제 요청을 처리하는 url 매핑 메소드를 작성합니다.

 

 
    /* 페이지 삭제 */
    @PostMapping("/delete")
    public String boardDeletePOST(int bno, RedirectAttributes rttr) {
        
        bservice.delete(bno);
        
        rttr.addFlashAttribute("result", "delete success");
        
        return "redirect:/board/list";
    }
 

 

그림 9

 

 

 - 삭제 쿼리를 실행하기 위해선 게시판 번호(bno)에 대한 정보가 필요로 하기 때문에 int형 변수를 파라미터로 부여하였고, 수정 기능 실행 후 리다이렉트 방식으로 리스트 페이지 이동시 데이터를 같이 전송하기 위해서 RedirctAttributes 객체를 파라미터로 부여합니다.

 

 - 리스트 페이지(list.jsp) 페이지 이동 시 수정이 완료되었음을 알리는 경고창을 띄우기 위해 "delete success" 스트링 데이터를 "result" 속성 값에 저장하는 addFlashAttribute() 메소드를 호출하였습니다. 

 

 - 리턴 타입은 String 타입으로 작성하였고, 리다이렉트(Redirect) 방식으로 리스트 페이지 이동을 하도록 작성하였습니다.

 

 

4. View 처리

 '수정 페이지(modify.jsp)'에서 '삭제'버튼을 추가하는 작업과 '목록 페이지(list.jsp)'에서 삭제 성공 경고창을 띄우기 위한 Javascript 작업을 해야 합니다.

 

삭제 버튼 추가(modify.jsp)

 

 버튼이 있는 태그에 '삭제' 버튼을 추가합니다.

 

 
        <a class="btn" id="delete_btn">삭제</a>
 

 

그림 10

 

 

 '삭제' 버튼 동작을 위해 아래의 Javascript 코드를 추가합니다.

 

 
    /* 삭제 버튼 */
    $("#delete_btn").on("click", function(e){
        form.attr("action", "/board/delete");
        form.attr("method", "post");
        form.submit();
    });
 

 

그림 11

 

 삭제 버튼임을 표시하기위해 버튼에 색을 추가하였습니다.

 

 
#delete_btn{
    background-color: #f3e3e7;
}
 

 

그림 15

 

 

 

 

목록 페이지 코드 추가(list.jsp)

 

 checkAlert() 메소드에 if 문을 추가하면 됩니다.

 

 
        if(result === "delete success"){
            alert("삭제가 완료되었습니다.");
        }
 

 

그림 12

 

 

 

5. 테스트

 삭제 기능이 정상적으로 동작하는지를 테스트합니다.

 

그림 13

 

그림 14

 

 

 

REFERENCE

•  

DATE

• 2020.02.24