#26 CRUD 게시판 - Update, Delete (수정, 삭제)

 

Delete (글 삭제하기)

 

글 삭제하기

 

이 삭제 버튼(id=btn-delete)를 누르면 게시글이 삭제되도록 자바스크립트가 동작하도록 할 것이다.

 

우선 detail.jsp에 다음 코드를 작성해 id를 설정한다.

board.js에 넘겨야 할 데이터는 id값을 찾아서 거기 있는 텍스트를 뽑아야 한다.

즉, {board.id}가 전달되어야 한다는 것이다.

 

이제 board.js로 가서,

 

자바스크립트를 작성한다. 그런데 이렇게 작성하면 삭제가 제대로 동작하지 않는다.

이걸 이해하기 위해서는 val()과 text() 정도는 이해하고 있어야 한다.

 

* 예시로 보는 html(), val(), text()

$(셀렉터).html : 태그, 문자열 모두 가져옴

var word = $("#daram").html();
<div id="daram"><span>다람쥐</span></div>

결과(word) : <span>다람쥐</span>

 

$(셀렉터).val() : 태그에 정의된 value 속성 값 확인할 때 사용

var word = $("#daram").html();
<input id="daram" type="text" value="다람">

결과(word) : 다람

 

$(셀렉터).text: 셀렉터 하위에 있는 자식 태그들의 문자열만 출력한다.

var word = $("#daram").html();
<div id="daram"><span>다람쥐</span></div>

결과(word) : 다람쥐

 

이제 왜 틀렸는지 보일 것이다.

val()이 아니라 다음과 같이 text()을 사용해야 한다.

 

 

BoardApiController에서 @DeleteMapping을 이용해 코드를 작성한다.

이제 boardService에서 삭제하기()를 만들어줘야 한다.

 

BoardService에 가서 글삭제하기()를 작성한다.

트랜잭션을 걸어주고, 걸어주는 김에 위에 미처 걸지 않았던

글목록과 글상세보기에도 트랜잭션을 걸어주자.

글목록과 글상세보기는 select만 하는거니 readOnly=true 설정해주자

 

글삭제하기가 완료되면 board.js에서 done이 실행되어

삭제가 완료되었습니다. 문구가 뜨고 "/"로 이동하게 된다.

 

 

글 삭제하기 실행결과

 

여기서 흐아암을 삭제해보겠다

상세보기를 누르면 로그인창이 뜨고 로그인을 하면,

 

상세보기창이 뜬다. 여기서 삭제를 누르면

 

삭제 문구가 뜨고

 

정상적으로 삭제된 모습이다.

 

데이터베이스를 확인해도 정상적으로 삭제된 것을 볼 수 있다.

 

 

 

+ 추가

수정과 삭제 버튼은 본인이 쓴 글일 때만 보여야 한다.

detail.jsp에서 다음과 같이 작성한다.

 

 

Update (글 수정하기)

 

글 수정하기

 

detail.jsp에서 수정버튼을 다음과 같이 다시 작성한다.

주소에 붙어서 옮겨지는 값은 DB쿼리의 where절에 담긴다.

 

BoardController로 가서 해당 링크에 대한 리턴을 작성한다.

이제 board/updateForm를 작성해야 한다.

board폴더에서 saveForm을 복사 붙여넣기하고 updateForm을 생성 후 수정하도록 하자

 

아무래도 글 수정이다 보니까 saveForm에서 몇 개만 수정하면 된다.

우선 board.id도 전달해야하니 숨겨진 입력 필드에다 제목과 내용에 그 board에 담겨있었던 title과 content를 주고

글 수정완료 버튼 id를 btn-update로 설정한다.

 

그러면 이제 자바스크립트(board.js)에서 board.id, board.title, board.content의 값을 들고와야한다.

 

board.js를 작성해보자

 

이제 BoardApiController로 가서 @PutMapping("/api/board")을 한 코드를 작성하면 된다.

 

 

다음으로 boardService에서 글수정하기()를 만들어줘야한다.

 

영속성 콘텍스트에 board가 딱 들어온 것이다. 

DB 테이블에 있는 board 데이터랑 동기화가 되었다는 것이다.

 

 

글 수정하기 실행결과

 

도토리 키재기 저 글을 수정해보자

 

여기서 수정 버튼을 누르면

 

title과 content가 기존 그대로 유지된 상태에서 수정할 수 있다.

 

 

문제없이 수정된 것을 확인할 수 있다.

DB의 board 테이블도 문제없이 저장된다.

 

이것으로 CRUD 게시판 제작이 끝났다!

 

 

 

 

 

 

학습자료 :

https://youtu.be/UKyviwswrP8

https://youtu.be/s5ZXZliTQq8