[스프링 게시판][4] 게시판 수정 기능 구현

Git 주소 : github.com/sjinjin7/Blog_BoardProject

목표

 

게시판 수정 기능 구현

 '게시판 조회(get.jsp)'에서 '수정' 버튼을 클릭 했을 때 '수정 페이지(modify.jsp)'로 이동이 되고, 내용을 변경 후 '수정 완료'버튼을 눌렀을때 DB에 저장된 기존의 데이터가 새로운데이터로 업데이트하는 기능을 목표로 합니다. 수정이 완료된 후 '목록 페이지(list.jsp)'로 이동 후, 수정이 완료되었다는 경고창을 뜨도록 만들 것입니다.

 

 

 

순서

1. Mapper 처리 및 테스트

2. Service 처리 및 테스트

3. Controller 처리 

4. View 처리

5. 테스트

 

 

1. Mapper 처리 및 테스트

쿼리문 테스트

 

 어느 행을 수정할지 지정 해주는 '게시판 번호(bno)', 수정이 될 대상인 '게시판 제목(title)', '게시판 내용(content)' 3개의 데이터가 수정을 수행하는 쿼리문에 필요로 합니다. '수정 날짜(updateDate)'또한 수정 대상이지만 DB의 현재의 시간을 반환하는 함수를 사용하여 수정할 것이기 때문에 필요로한 데이터는 3개입니다. 사용할 쿼리문은 아래와 같습니다.

 

 
-- Oracle
update vam_board set title='제목 수정', content='내용 수정', updateDate = sysdate where bno = 8;
 
-- MySQL
update vam_board set title='제목 수정', content='내용 수정', updateDate = now() where bno = 8;

 

그림 1

 

그림 2

 

 

BoardMapper 인터페이스

 

 '게시판 수정' 쿼리를 실행 할 메소드를 작성합니다. bno, title, content, writer에 대한 데이터가 필요로 하기 때문에 해당 변수들이 정의되어 있는 BoardVO를 파라미터로 추가합니다. 수정을 수행하는 메소드의 경우 반환 타입이 필요가 없습니다. 필요가 없긴 하지만 int형으로 설정할 경우 수정이 성공 시 1을 반환, 수정을 실패할 경우 0을 반환합니다. 

 

 
    /* 게시판 수정 */
    public int modify(BoardVO board);
 

 

그림 3

 

BoardMapper.xml

 

 인터페이스에서 작성한 메서드가 실행할 쿼리 태그를 작성합니다.

 

 
    <!-- 게시판 수정 -->
    <update id="modify">
        <!-- MySQL -->
        update vam_board set title = #{title}, content = #{content}, updatedate = now() where bno = #{bno}
        <!-- Oracle -->    
        update vam_board set title = #{title}, content = #{content}, updatedate = sysdate where bno = #{bno}
    </update>
 

 

그림 4

 

Mapper 메소드 테스트(BoardMapperTests.java)

 

BoardMapperTests.java에 '게시판 수정' 쿼리를 실행하는 mapper 메소드를 Junit 테스트합니다. 게시판 번호(bno)가 존재하는 것과 존재하지 않는 것을 각각 테스트하여 int 반환 값이 무엇인지 확인합니다.

 

 
    /* 게시판 수정 */
     @Test
     public void testModify() {
         
         BoardVO board = new BoardVO();
         board.setBno(8);
         board.setTitle("수정 제목");
         board.setContent("수정 내용");
         
         int result = mapper.modify(board);
         log.info("result : " +result);
         
     }
 

 

그림 5 존재한는 게시판 쿼리 실행

 

그림 6 존재하지 않는 게시판 쿼리 실행

 

 

2. Service 처리 및 테스트

BoardService.java 인터페이스

 

 '게시판 수정' Mapper 메소드를 호출하기 위한 메소드를 선언합니다. 해당 메소드에도 반환 타입은 int로 합니다. Controller에서 활용을 하지 않더라도 선택지를 넓혀주는 의미에서 반환 타입을 설정하였습니다.

 

 
    /* 게시판 수정 */
    public int modify(BoardVO board);
 

 

그림 7

 

 

BoardServiceImpl.java 인터페이스

 

 선언한 메소드를 구현합니다. 구현 내용은 Mapper 메소드 호출입니다. 

 

 
    /* 게시판 수정 */
    @Override
    public int modify(BoardVO board) {
        
        return mapper.modify(board);
    }
 

 

그림 8

 

 

Service 메소드 테스트(BoardServiceTests.java)

 

 테스트 코드는 Mapper 메소드 테스트 코드와 동일합니다.

 

 
    /* 게시판 수정 */
     @Test
     public void testModify() {
         
         BoardVO board = new BoardVO();
         board.setBno(8);
         board.setTitle("수정 제목");
         board.setContent("수정 내용");
         
         int result = service.modify(board);
         log.info("result : " +result);
         
     }     
 

 

그림 9

 

그림 10

 

 

3. Controller 처리 

 두개의 url 맵핑 메소드를 작성해야 합니다. 첫 번째는 조회 페이지(get.jsp)에서 수정 페이지(modify.jsp)로 이동할 수 있도록 해주는 메소드입니다. 두 번째 메소드는 수정 페이지(modify.jsp)에서 내용을 변경 후  "수정 완료" 버튼을 눌렀을 때 실행되는 메소드입니다.

 

수정 페이지 이동 메소드

 

 '수정 페이지 이동' 메소드(boardGetPageGET())는 '조회 페이지 이동' 메소드와 동일합니다. 수정하고자 하는 게시판의 내용을 출력해야 하기 때문입니다. 따라서 int 형 파라미터와 해당 게시판의 내용을 호출하는 Service 메소드(getPage())를 호출합니다.

 

 
    /* 수정 페이지 이동 */
    @GetMapping("/modify")
    public void boardModifyGET(int bno, Model model) {
        
        model.addAttribute("pageInfo", bservice.getPage(bno));
        
    }
 

 

그림 11

 

 

게시판 수정  메소드

 

페이지 수정 url 맵핑 메소드를 작성합니다. POST방식으로 아래와 같이 작성했습니다.

 

 
    /* 페이지 수정 */
    @PostMapping("/modify")
    public String boardModifyPOST(BoardVO board, RedirectAttributes rttr) {
        
        bservice.modify(board);
        
        rttr.addFlashAttribute("result", "modify success");
        
        return "redirect:/board/list";
        
    }
 

 

그림 12

 

 - 수정될 내용의 데이터를 가져오기 위해 BoardVO 클래스를 파라미터로 부여하였고, 수정 기능 실행 후 리다이렉트 방식으로 리스트 페이지 이동시 데이터를 같이 전송하기 위해서 RedirctAttributes 객체를 파라미터로 부여합니다.

 

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

 

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

 

 

4. View 처리

 'modify.jsp', 'list.jsp' 2개의 페이지 작업을 진행합니다.

 

수정 페이지('modify.jsp')

 

 'views/board' 경로에 "modify.jsp" 파일을 생성합니다. 생성 후 '조회 페이지(get.jsp)'의 모든 코드를 복사하여 '수정 페이지(modify.jsp)'에 붙여 넣습니다. 

 

 먼저 사용자가 수정하는 <input> 태그를 감싸는 <form> 태그를 새로 추가합니다. 해당 태그는 사용자가 수정한 데이터 내용을 서버에 전송하기 위한 목적입니다. 해당 from의 데이터는 POST 방식의 "board/modify" url 맵핑 메소드에 전송될 것이기 때문에 그에 맞게 속성과 속성 값을 추가합니다.

 

 
    <form id="modifyForm" action="/board/modify" method="post">
    </form>

 

그림 13

 

 

 

 기존의 버튼 코드는 지우고 새로운 3개의 버튼을 추가합니다. 각 버튼은 Javascript 코드를 통해 동작하도록 만들 것입니다. 생성할 버튼은 바로 목록 페이지로 이동할 수 있도록 해주는 '목록 페이지 버튼', 게시판 내용 일부를 변경 후 수정 기능을 실행하기 위한 '수정 완료 버튼', 수정 페이지(modify.jsp)에서 조회 페이지(get.jsp)로 이동 할 수 있도록 해주는 '수정 취소' 버튼이 있습니다.

 

 
        <a class="btn" id="list_btn">목록 페이지</a> 
        <a class="btn" id="modify_btn">수정 완료</a>
        <a class="btn" id="cancel_btn">수정 취소</a>
 

 

그림 14

 

 

 

 복사된 <script> 태그 내부의 코드는 지우고 아래의 코드를 추가합니다. 아래의 코드는 각 버튼이 동작하도록 해주는 Javascript 메소드 입니다.

 

 
 
    let form = $("#infoForm");        // 페이지 이동 form(리스트 페이지 이동, 조회 페이지 이동)
    let mForm = $("#modifyForm");    // 페이지 데이터 수정 from
    
    /* 목록 페이지 이동 버튼 */
    $("#list_btn").on("click", function(e){
        form.find("#bno").remove();
        form.attr("action", "/board/list");
        form.submit();
    });
    
    /* 수정 하기 버튼 */
    $("#modify_btn").on("click", function(e){
        mForm.submit();
    });
    
    /* 취소 버튼 */
    $("#cancel_btn").on("click", function(e){
        form.attr("action", "/board/get");
        form.submit();
    });    
 
 

 

그림 15

 

 

 

 기존 복사한 <input> 태그와 <textarea> 태그의 경우 "readonly" 속성이 추가되어있습니다. "게시판 제목"과 "게시판 내용"을 수정할 수 있도록 해당 태그에는 "readonly"속성을 지웁니다.

 

 

 

 

 

목록 페이지('list.jsp')

 

 수정 기능을 실행하는 메소드에서 '목록 페이지(list.jsp)'로 이동할 때 수정이 완료되었다는 표시창을 띄우기 위해 데이터를 함께 '목록 페이지'로 전송하였습니다. 전송된 데이터를 활용하여 경고창이 뜨도록 Javscript 코드를 추가하겠습니다.

 

 checkAlert() 메소드에 아래의 if문을 추가합니다.

 

 
        if(result === "modify success"){
            alert("수정이 완료되었습니다.");
        }
 
 

 

 

 

5. 테스트

아래의 사항들이 정상적으로 동작하는지 확인합니다.

 

- 조회 페이의 '수정 하기' 버튼(조회 페이지 -> 수정 페이지 이동)

- 수정 페이지의 '목록 페이지' 버튼 (수정 페이지 -> 목록 페이지 이동)

- 수정 페이지의 '수정 완료' 버튼 

    - 데이터베이스 수정 반영

    - 수정 완료 후 목록 페이지 이동

    - 목록 페이지서 경고창 확인

- 수정 페이지의 '취소' 버튼(수정 페이지 -> 조회 페이지 이동)

 

그림 19

 

그림 20

 

 

REFERENCE

•  

DATE

• 2020.02.23