[포트폴리오 페이지]_16단계_CRUD 게시판 구현_(Update 기능)

[환경]

 

개발툴 : IntelliJ

DB : oracle

프레임워크 : spring , mybatis

사용 언어 : ES6, Java , Html5 , CSS

---

완성 화면]

테이블에서 row 클릭시

데이터 수정후 수정하기 버튼 클릭시 화면전환

5556 -> 55567 로 변경된 모습

---

개발 목표 : SPA 로 구현한 게시판에서 row Read 후 한단계 더 Depth 으로 수정하기 페이지구현,

뒤로가기 버튼 클릭시 이전 정보 보이게 구현 & 작성자가 아닐 경우 삭제, 수정 버튼 안보이게 구현

---

1] 상세화면 jsp 소스코드

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <div id="contentwrap2">
        <h2> 제목 : <span class="title">${title}</span></h2>
        <p> 작성자 : <span class="writer">${writer}</span> </p>
        <p> 내용 : <span class="boardcontent">${content}</span> </p>
        <p>작성일자 : <span class="date">${regdate}</span> </p>

        <button class="backbtn">뒤로가기</button>
        <button class="updatebtn" style="display: none">수정하기</button>
        <button class="rmbtn" style="display: none">게시글 삭제</button>
    </div>
</body>
</html>
<script src='/js/jquery-3.6.0.min.js?ver=1'></script>

<script>
    $(document).ready(function(){

        let $localstorage = $commons.storage.g_variable;
        let writercheck = "${writer}";
        let bno = "${bno}";
        let rmbtn = document.querySelector('.rmbtn');
        let backbtn = document.querySelector('.backbtn');
        let $history = $commons.history;
        let changecontent =document.querySelector('#content');
        let $common = $commons.history
        let upbtn = document.querySelector('.updatebtn');




        // authcheck
        if( writercheck === $localstorage.getValue("loginUser")){
            rmbtn.style.display = '';
            upbtn.style.display = '';
        }

        //수정
        upbtn.onclick = function(){
            //history set
            let historycontent = document.querySelector('#contentwrap2');
            let id = _commons().util.random();
            $history.sethistory("/board/updateboard.do",historycontent,id);


            let url = "/board/updateboard.do";
            let date = "${regdate}";
            let json ={
                title : "${title}",
                content : "${content}",
                regdate : date.toString(),
                bno : "${bno}"
            }
            $('#content').load(url,json,function(){
            })
        }


        rmbtn.onclick = function(){
            
        }


        backbtn.onclick = function(){
            let link = $history.gethistory("/board/selectboarddetail.do");
            let oldElement = document.querySelector('div#contentwrap2');
            changecontent.replaceChild(link.content,oldElement);
        }



    });


</script>

우선 해당 if 문을 통해 LocalStorage에 저장된 로그인 정보를 비교하여, 게시글의 작성자와 동일할 경우에만 표시

if( writercheck === $localstorage.getValue("loginUser")){
    rmbtn.style.display = '';
    upbtn.style.display = '';
}

 

이벤트는 총 3가지이나 삭제는 다음포스팅에 다루고

지금은 업데이트 버튼, 뒤로가기 버튼을 구현하였습니다.

 

2-1] 업데이트 버튼 이벤트

upbtn.onclick = function(){
    //history set
    let historycontent = document.querySelector('#contentwrap2');
    let id = _commons().util.random();
    $history.sethistory("/board/updateboard.do",historycontent,id);


    let url = "/board/updateboard.do";
    let date = "${regdate}";
    let json ={
        title : "${title}",
        content : "${content}",
        regdate : date.toString(),
        bno : "${bno}"
    }
    $('#content').load(url,json,function(){
    })
}

업데이트 버튼을 클릭하게 되면 게시글을 수정할 수 있는 페이지로 이동하게 됩니다.

이동한 페이지에서도 취소 기능을 구현할 것이기 때문에 취소시 다시 해당 화면으로 돌아가기 위한

history객체를 생성합니다.

history 객체는 다음 포스트 참고.

https://yn971106.tistory.com/93

[포트폴리오 페이지]_12단계_SPA 구현을 위한 History 객체 만들기

 

load() 함수를 이용해서 해당 url 을 매핑하는 컨트롤러에 json 형식의 데이터를 전송합니다.

현제 보고있는 게시글의 제목, 작성자, 작성일자 , bno 를 전달하고

content 부분의 element 에 controller 가 지정하는 jsp 파일을 로딩하게 됩니다.

 

2-2] Controller

@RequestMapping("/board/updateboard.do")
public ModelAndView Updateboard(@RequestParam Map<String, String> map){
    System.out.println("수정화면 진입");

    String title = map.get("title");
    String content = map.get("content");
    String regdate = map.get("regdate");
    String bnostring = map.get("bno");
    Integer bno = Integer.parseInt(bnostring);

    ModelAndView mv = new ModelAndView("menu/updateboard");
    mv.addObject("title", title);
    mv.addObject("content", content);
    mv.addObject("regdate", regdate);
    mv.addObject("bno",bno);

    return mv;
}

해당 컨트롤러는 ModelAndView 로 화면 mapping 과 데이터 전송을 동시에 합니다.

받아온 Json 형식의 파일을 key value로 나누고 

ModelAndView 생성자에 이동할 url 매핑과 addObject로 전달할 데이터를 쌓습니다.

그리고 이를 리턴합니다.

 

3-1] Updateboard.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<div id="updateboardcontent">
    <h2>제목 : <input type="text" value="${title}" class="titletext"/> </h2>
    <h2>내용 : <input type="text" value="${content}" class="contenttext"/> </h2>


    <button class="backbtn">뒤로가기</button>
    <button class="updatebtn">수정하기</button>
</div>
</body>
</html>
<script src='/js/jquery-3.6.0.min.js?ver=1'></script>

<script>
    $(document).ready(function(){

        let upbtn = document.querySelector('.updatebtn');
        let backbtn = document.querySelector('.backbtn');
        let $history = $commons.history;
        let content = document.querySelector('#content');

        let titletx = document.querySelector('.titletext');
        let contenttx = document.querySelector('.contenttext');


        upbtn.onclick = function(){

            fetch("/board/update.do",{
                method: "POST",
                headers: {
                    'content-type' : 'application/json'
                },
                body : JSON.stringify({
                    title: titletx.value,
                    content: contenttx.value,
                    bno: "${bno}"
                })
            });

            let url = 'menu/menu1.do'
            $('#main_content').load(url,function(){

            });

        }


        backbtn.onclick = function(){
            let oldelement = document.querySelector('#updateboardcontent');
            let back = $history.gethistory("/board/updateboard.do");
            console.log(back.content);
            content.replaceChild(back.content,oldelement);
            $history.deletehistory("/board/updateboard.do");
        }

    });


</script>

새롭게 열린 jsp 에서는

 

input type="text' 형식의 데이터를 기입받을 곳 을 생성하고 value에 전달받은 값을 넣음으로써 이전에 무슨 값이였는지를 알려주도록 설정하였습니다.

 

뒤로가기 버튼과, 수정할 정보를 입력하고 확정지을 버튼

총 2개의 버튼을 생성하였습니다.

 

3-2] 업데이트 버튼

upbtn.onclick = function(){

    fetch("/board/update.do",{
        method: "POST",
        headers: {
            'content-type' : 'application/json'
        },
        body : JSON.stringify({
            title: titletx.value,
            content: contenttx.value,
            bno: "${bno}"
        })
    });

    let url = 'menu/menu1.do'
    $('#main_content').load(url,function(){
        $history.deletehistory("/board/updateboard.do");
    });

}

fetch 를 사용하여 해당 url에 json 형식의 데이터를 보냅니다.

 

데이터는 input 에 입력받은 값 2개를 전달하고, 이전에 controller 에서 전달받은 bno = 게시글의 고유 번호 까지 

총 3개의 데이터를 전달합니다.

 

통신이 끝나면 게시판이 있는 menu1을 다시 새롭게 불러오고 이전의 history를 삭제합니다.

 

3-3] Controller

@RequestMapping("/board/update.do")
@ResponseBody
public void updateBoard(@RequestBody Map<String,String> map )throws Exception{
    System.out.println("업데이트 진입");

    String title = map.get("title");
    System.out.println("title = " + title);
    String content = map.get("content");
    System.out.println("content = " + content);
    String Stringbno = map.get("bno");
    System.out.println("Stringbno = " + Stringbno);
    
    Integer bno = Integer.parseInt(Stringbno);

    boardService.boardUpdate(title,content,bno);


}

update 이기 때문에 반환값이 필요 없으니 해당 컨트롤러는 반환값이 없는 void 로 지정합니다.

 

마찬가지로 받아온 값을 key value 로 나누고 이를 boardUpdate 서비스에 전달합니다.

 

※service, serviceImpl , BoardMapper 생략

 

3-4] Mapper.xml

<update id="boardUpdate">
    update board set title = #{title} , content = #{content} where bno = #{bno}
</update>

업데이트를 하는 게시글은 bno가 일치하는 게시글이며,

전달받은 제목, 내용 을 해당하는 컬럼에 업데이트를 합니다.

 

업데이트 통신이 끝나면, 앞서 설명한 방식으로 menu1 로 리프레시 됩니다.

 

4] 뒤로가기 버튼

backbtn.onclick = function(){
    let oldelement = document.querySelector('#updateboardcontent');
    let back = $history.gethistory("/board/updateboard.do");
    console.log(back.content);
    content.replaceChild(back.content,oldelement);
    $history.deletehistory("/board/updateboard.do");
}

이전에 해온 방식대로, 돌려놓을 history 객체를 url 을 이용해서 찾고

변경할 element를 선택하고

replaceChild 로 바꾸고

마지막에는 해당 히스토리를 삭제하는 이벤트입니다.

 

다음 포스팅에서는 Delete 삭제를 구현해보도록 하겠습니다.

감사합니다.