게시판 CRUD 기능 구현_쓰기, 수정

먼저 boardList.jsp에 글쓰기 버튼을 만든다.

<button type="button" id="writeBtn" onclick="location.href='<c:url value="/board/write"/>'">글쓰기</button>

onclick은 버튼을 클릭했을 때 발생하는 이벤트, 원래는 호출될 함수를 지정해줘야 하지만 함수 안에 들어갈 문장만 넣은 것이다.(함수의 내용이 짧을 때만)

location.href는 주소창에 주소(뒤에 적힌 주소)를 적고 이동하기 버튼을 누르는 것과 같다.

 

@GetMapping("write")
public String write(Model m){
    m.addAttribute("mode","new"); //mode에 값을 new로 준다.
    return "board"; //읽기와 쓰기에 사용되는데, 쓰기에 사용할때는 mode=new로 준다 -> jsp가 mode를 확인하고 알맞게 응답을 하도록 준다
}

 

board.jsp

mode의 값에 따라서, board의 화면이 달라지도록 함수를 작성해주었다.

    <h2>게시물 ${mode=="new" ? "글쓰기" : "읽기"}</h2>
    <form action="" id="form">
        <input type="hidden" name="bno" value="${boardDto.bno}">
        <input type="text" name="title" value="${boardDto.title}" ${mode=="new" ? '' :'readonly="readonly"'}>
        <textarea name="content" id="" cols="30" rows="10" ${mode=="new" ? '' :'readonly="readonly"'}>${boardDto.content}</textarea>

---

이제 제목과 내용에 글쓰기를 한 다음 그 내용들이 DB에 저장되는 과정을 수행한다.

등록 버튼을 누르면 write()함수가 실행된다 (PostMapping)

그러면 boardService.write를 호출해서 내용이 담긴 Dto를 DB에 저장한다.

 

그런 다음에

board/list를 redirect한다. redirect는 항상 GET방식이다.

list()가 게시물을 호출해서 게시물 목록을 가져온다.

 

board.jsp

<script>
    $(document).ready(function (){
        $('#listBtn').on("click",function (){
           location.href="<c:url value='/board/list'/>?page=&${page}&pageSize=${pageSize}";
        });

        $('#writeBtn').on("click",function (){
            let form = $('#form');
            form.attr("action","<c:url value='/board/write'/>");
            form.attr("method","post");
            form.submit();
        });

        $('#removeBtn').on("click",function (){
            if(!confirm("정말로 삭제하시겠습니까?")) return;
            let form = $('#form');
            form.attr("action","<c:url value='/board/remove'/>?page=&${page}&pageSize=${pageSize}");
            form.attr("method","post");
            form.submit();
        });
    });

 

BoardController.java

@PostMapping("/write")
public String write(BoardDto boardDto,Model m,HttpSession session,RedirectAttributes rattr){ //boardDto로 입력한 게시물의 내용을 받는다
    String writer=(String)session.getAttribute("id"); //세션에서 writer를 받아온다. getAttribute가 반환하는 것이 object라 형변환을 해준다.
    boardDto.setWriter(writer);
    try {
        int rowCnt = boardService.write(boardDto); //insert이기 때문에 결과를 rowCnt로 받는다
        
        if(rowCnt!=1)
            throw new Exception("Write failed"); //만약 write가 되지 않으면(1이라면), 예외를 던진다.
        
        rattr.addFlashAttribute("msg","WRT_OK"); //잘 처리됐으면 잘 처리됐다고 메세지를 준다 
        //새로고침했을때 메세지가 남아있을까봐 rattr로 처리해줌
        
        return "redirect:/board/list";
    } catch (Exception e) {
        e.printStackTrace();
        m.addAttribute("boardDto",boardDto); //예외가 나면 입력했던 내용을 다시 준다.
        m.addAttribute("msg","WRT_ERROR"); //메세지를 줘서 에러가 난 것을 알려준다. 
        return "board";
    }
}

 

boardList.jsp

<script>
    let msg ="${msg}"
    if(msg=="WRT_OK") alert("성공적으로 등록되었습니다.")
    if(msg=="Delete_OK") alert("성공적으로 삭제되었습니다.")
    if(msg=="DEL_ERR") alert("삭제에 실패하였습니다.")
</script>

 

board.jsp

<script>
    let msg="${msg}";
    if(msg=="WRT_ERR") alert("게시물 등록에 실패했습니다. 다시 시도해 주세요.");
</script>

---

게시판 읽기에서 게시판 수정으로 화면이 바뀌고,

readonly가 true에서 false로 바뀌면서 내용을 고칠 수 있게 된다.

등록 버튼을 누르면 Controller에 midify()메소드로 POST로 요청이 전송이 되고

Service의 modify를 호출하면 작성한 내용이 DB에 저장된다.

호출된 과정만 다르고 write랑 똑같다.

 

board.jsp

<script>
    $(document).ready(function (){
        $('#listBtn').on("click",function (){
           location.href="<c:url value='/board/list'/>?page=&${page}&pageSize=${pageSize}";
        });

        $('#modifyBtn').on("click",function (){
            //1.읽기 상태이면 수정 상태로 변경
            let form = $('#form');
            let isReadOnly=$("input[name=title]").attr('readonly');
            if(isReadOnly==true){
                $("input[name=title]").attr('readonly',false); //title, readonly를 false로 바꾼다
                $("textarea").attr('readonly',false); //content
                $("#modifyBtn").html("등록");
                $("h2").html("게시물 수정"); //h2태그의 내용을 "게시물 수정"으로 바꾼다.
            }
            
            //2. 수정 상태이면, 수정된 내용을 서버로 전송
            form.attr("action","<c:url value='/board/modify'/>");
            form.attr("method","post");
            form.submit();
        });

 

boardController.java

@PostMapping("/modify")
public String modify(BoardDto boardDto,Model m,HttpSession session,RedirectAttributes rattr){ //boardDto로 입력한 게시물의 내용을 받는다
    String writer=(String)session.getAttribute("id"); //세션에서 writer를 받아온다. getAttribute가 반환하는 것이 object라 형변환을 해준다.
    boardDto.setWriter(writer);
    try {
        int rowCnt = boardService.modify(boardDto); //insert이기 때문에 결과를 rowCnt로 받는다

        if(rowCnt!=1)
            throw new Exception("Modify failed"); //만약 write가 되지 않으면(1이라면), 예외를 던진다.

        rattr.addFlashAttribute("msg","MOD_OK"); //잘 처리됐으면 잘 처리됐다고 메세지를 준다
        //새로고침했을때 메세지가 남아있을까봐 rattr로 처리해줌

        return "redirect:/board/list";
    } catch (Exception e) {
        e.printStackTrace();
        m.addAttribute("boardDto",boardDto); //예외가 나면 입력했던 내용을 다시 준다.
        m.addAttribute("msg","MOD_ERROR"); //메세지를 줘서 에러가 난 것을 알려준다.
        return "board";
    }
}

 

boardMapper.xml

본인일때만 수정가능하도록 

writer=#{writer}

<update id="update" parameterType="BoardDto">
    UPDATE board
    SET   title = #{title}
      , content = #{content}
      , up_date = now()
    WHERE bno = #{bno} and writer=#{writer}
</update>

고친 내용

<script>
    $(document).ready(function (){
        $('#listBtn').on("click",function (){
           location.href="<c:url value='/board/list'/>?page=&${page}&pageSize=${pageSize}";
        });

        $('#modifyBtn').on("click",function (){
            //1.읽기 상태이면 수정 상태로 변경
            let form = $('#form');
            let isReadOnly=$("input[name=title]").attr('readonly');
            if(isReadOnly=='readonly'){
                $("input[name=title]").attr('readonly',false); //title, readonly를 false로 바꾼다
                $("textarea").attr('readonly',false); //content
                $("#modifyBtn").html("등록");
                $("h2").html("게시물 수정"); //h2태그의 내용을 "게시물 수정"으로 바꾼다.
                return
            }

            //2. 수정 상태이면, 수정된 내용을 서버로 전송
            form.attr("action","<c:url value='/board/modify'/>");
            form.attr("method","post");
            form.submit();
        });