20230807 _[46일차]_01. 게시판 댓글 삭제기능
추가된부분
[ LoginController ]
[ ResttController ]
join2.jsp 추가**
댓글 계정 옆쪽에 수정& 삭제버튼 추가
cedit () & cdel () 함수로 수정 & 삭제 기능 넣어줄 예정 (onclick으로)
여러개의 댓글 중 어떤 댓글을 삭제 or 수정할지 알기위해 아래처럼 해당댓글번호인 cno를 매개변수로 가지고 가면된다.
함수 만들어줌 (아래 댓글창 숨겨주는부분 위치 옮겨줌)
댓글 삭제 버튼 눌러보면 팝업이 뜨고
팝업 확인누르면 아래처럼 cno를 잘 가져온다.
이제 댓글을 삭제했을 때 다시 detail 페이지로 돌아가는 로직 만들자
BoardController 에서 만들자
bno, cno를 받을거라 Map 타입은 둘다 int로 해도 된다.
if조건문 걸어준다
=> 로그인했다면 (mid가 null이 아니라면), redirect로 (컨트롤러를 지나서) 다시 해당 게시글로 돌아간다.
.
값 들어왔는지 여부검사는 (bno&cno가 숫자인지 여부 체크) util에서 진행
obj로 받아와서 이걸 숫자로 바꾼 후에 true 또는 false 를 리턴하도록 해준다.
parseInt () 는 괄호안에 String이 들어와야 하는데 obj이 들어가려면 변환시켜줘야 한다.
아래처럼 받아온 obj값이 숫자라면 true 반환
보드컨트롤러에 이미 Util에 대한 autowired 되어있음
bno와 cno가 숫자인지 util에서 검사했고
util에서 숫자인 경우 true를 반환하니까 이 값으로 보드컨트롤러에서 if조건문 만들어준다.
그런데 아래처럼 bno 값이 없으면
에러가 난다. 이건 그냥 bno가 없어서
아래처럼 cno를 비우면
에러는 안나고 그냥 통과해서 detail페이지로 돌아온다. 이걸 막아줘야 한다.
아래처럼 출력해보려는데 안된다.. (로그인을 안했으니까..)
암튼 아래처럼 조건 걸어주고
bno와 cno의 값이 공백이 아니고, 숫자라면 콘솔창에 "여기로 들어왔습니다." 출력.
아래처럼 null값도 잡아줘야 한다.
잘 출력된다.
map에다가 session에서 가져온 mid도 넣어준다.
이제 map에는 bno, cno, mid 세개가 들어있다.
이제 결과값을 가져와서 result에 담고 출력해보자
조건문 key값 여부로도 가능
일단 로그인여부 검사하고
(로그인했다면) bno랑 cno값에 대한 검사 해주고 (null인지, 비어있는지, 숫자인지)
전부 통과하면 로직실행 (서비스에 일시켜서 result 받아온다.)
아니라면
redirect로 다시 원래페이지(해당글페이지)로 되돌아옴
암튼 서비스에서 cdel 실행
DAO에서도 cdel 실행
mapper에서 쿼리문 작성해주는데
comment 테이블에는 mid가 없으니 mid를 비교해서 m_no로 가져와준다
c_del을 0으로 세팅 (브라우저에서는 안보이지만 db에는 남아있도록)
로그인 하고나서 해당 계정으로 썼던 댓글을 지워보면 삭제가 되고
아래처럼 콘솔창에 result 값 1이 뜬다.
(c_del을 0으로 만들어서 브라우저에서는 안보이지만 db에는 남아있도록)
db에서 확인해보면 c_del 값이 0이다.
이제 본인이(해당계정) 쓴 댓글만 수정 / 삭제 버튼이 보이도록 만들어준다.
detail.jsp 에 조건문 추가해서 로그인했을때만 내가 쓴 댓글의 수정/삭제 버튼 보이게 해준다.
[ cdel 두번째방법 ]
detail.jsp에서
class를 줘서 .cdel (삭제버튼) 클릭했을때 삭제가 되는 기능을 jquery로 만들어보자 (일단 onclick은 작동안하게 1 붙여줌)
jquery function으로 삭제버튼 클릭했을 때 alert 띄우는 기능 만들었다.
삭제버튼 누르면 팝업이 뜬다.
여기에서 this는 클릭한 주체인 .cdel을 가르킨다.
$(this).parent() 는 클릭한 cdel의 부모를 가르킨다.
클릭하면 cdel 클래스의 부모 클래스의 text를 뽑아오는데
부모클래스는 cName이다.
cBox
> cName
> cdel
이번에는 부모의 div 요소를 .html() 로 가져와보자
이번에는 css로 부모요소의 색을 바꿔보자
jQuery / Method / .parent() – 부모 요소 선택하는 메서드 – CODING FACTORY
jQuery / Method / .parent() - 부모 요소 선택하는 메서드
.parent() .parent()는 어떤 요소의 부모 요소를 선택합니다. 문법 .parents( [selector] ) selector에 값이 없으면 부모 요소를 선택하고, 값이 있으면 부모 요소에 그 selector가 있어야 선택합니다. 예를 들어
www.codingfactory.net
[제이쿼리] 부모요소 선택하는 방법 parent(), parents(), closest() (webisfree.com)
[제이쿼리] 부모요소 선택하는 방법 parent(), parents(), closest()
제이쿼리(jQuery)를 사용하여 부모요소를 선택하거나 찾는 방법을 알아봅니다. 어떻게해야할까요? 부모요소에 접근하는 다양한 방법에 대하여 알아보고자 합니다.
webisfree.com
.siblings() | jQuery API Documentation
.siblings() | jQuery API Documentation
Description: Get the siblings of each element in the set of matched elements, optionally filtered by a selector. Given a jQuery object that represents a set of DOM elements, the .siblings() method allows us to search through the siblings of these elements
api.jquery.com
이번에는부모의 ( cName의 ) 형제요소를 찾아서 text를 뽑아보자
아래 애들이 형제요소들
아래처럼 부모의 형제들 중 cid의 text(cno)를 뽑아내고,
그걸 cno라는 변수에 담아서 주소창에 넣어주면
내가 삭제한 댓글번호를 잡아내 db로 보낼 수 있어서 댓글 삭제가 된다.
alert 띄울때 "삭제합니다" 뒤에 문법이 틀려도 팝업자체가 안뜰수도있다.
아래처럼 삭제버튼 누르면 cno를 잘 잡아온다.
댓글에서 가져온 cno를 사용해서 ajax로 기능을 만들어보자
한번 data 잡아서 팝업으로 띄워보자.
restcontroller에서 일단 0으로 리턴해서 값을 jsp로(cdelR로) 보내본다.
댓글에서 삭제버튼을 누르면 콘솔창에 bno와 cno가(글번호/댓글번호) 출력된다.
팝업에는 0이라고 뜬다.
아까 보드컨트롤러에서 만들어줬던 로직 그대로 가져온다.
로그인여부 & bno, cno 값 들어왔는지, 숫자인지여부(util) 검사 후 로직실행
BoardService 와 Util을 연결해준다.
result 를 상단에 선언해준다.
실행시켜서 가져온 값을 result에 넣고 따옴표를 넣어서 스트링으로 리턴한다.
아래 콘솔창에 삭제결과가 1이 뜬다 (일치하는 값이 1이라는 뜻)
ajax에서도 data 를 가져와서 팝업으로 잘 띄운다.
삭제도 잘된다.
아래처럼 부모의 부모를 부를때 콤마를 이용해서 여러번 사용가능하다.
ResttController 에서
json 객체 생성해서 result를 여기에 넣고 json을 string으로 리턴
이유는 모르겠지만 그냥 바로 부모요소를 불러오면 작동을 안해서
아래처럼 변수에 넣어준 후에 ajax에 넣어줬다.
commentList를 가져왔는데 그게 comment인 div박스안에 들어있어서
위에서 설정해준대로 ajax로 댓글을 삭제하면 comment인 div박스자체가 사라져서 모든 댓글이 사라졌던 거였다.
다시 위치를 바꿔주면 내가 삭제하려는 댓글만 삭제된다.
