![[JSP/Servlet] 16. 댓글 - 수정과 삭제](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FU36kp%2FbtsBJeIjwRv%2FRyCJgsKCufQi8cnVNTqVu0%2Fimg.png)
[JSP/Servlet] 16. 댓글 - 수정과 삭제개발자가 되기까지 (2023.08.16~2024.04.15)/[Servlet] Basic Web2023. 12. 12. 14:36
Table of Contents
댓글 생성과 리스트 출력을 이해했다면 수정과 삭제는 크게 어렵지 않다.
만약, 댓글의 생성과 리스트 출력을 이해하지 못했다면
https://rlog0918.tistory.com/192 이곳을 참고하기 바란다.
CommentController.java
package controller;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
import org.json.simple.parser.JSONParser;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import domain.CommentVO;
import service.CommentSerivceImpl;
import service.CommentService;
@WebServlet("/cmt/*")
public class CommentController extends HttpServlet {
// ... (기존 코드)
case "modify":
try {
StringBuffer sb = new StringBuffer();
String line = null;
BufferedReader br =request.getReader(); // 댓글 객체
while((line = br.readLine()) != null ) {
sb.append(line);
}
log.info(">>>> sb >> {} ", sb.toString());
// 객체로 생성
// JSON은 전부 다 import org.json.simple 사용
JSONParser parser = new JSONParser();
JSONObject jsonObj = (JSONObject)parser.parse(sb.toString()); // key : value
// key를 이용하여 value를 추출
int cno = Integer.parseInt(jsonObj.get("cnoVal").toString());
String content = jsonObj.get("content").toString();
CommentVO cvo = new CommentVO(cno, content);
log.info("commentVO >>> {} ", cvo);
isOk = csv.modify(cvo);
log.info("modify >>> {} ", ((isOk > 0) ? "OK" : "Fail"));
// 결과 데이터 전송 => 화면에 출력 (response 객체의 body에 기록)
PrintWriter out = response.getWriter();
out.print(isOk);
} catch (Exception e) {
log.info(">>> comment remove error~!!");
e.printStackTrace();
}
break;
}
}
// ... (기존 코드)
}
CommentService.interface
package service;
import java.util.List;
import domain.CommentVO;
public interface CommentService {
int post(CommentVO cvo);
List<CommentVO> getList(int bno);
int modify(CommentVO cvo);
}
CommentServiceImpl.java
package service;
import java.util.List;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import controller.CommentController;
import domain.CommentVO;
import repository.CommentDAO;
import repository.CommentDAOImpl;
public class CommentSerivceImpl implements CommentService {
// ... (기존 코드)
@Override
public int modify(CommentVO cvo) {
log.info("comment modify check 2");
return cdao.update(cvo);
}
}
CommentDAO.interface
package repository;
import java.util.List;
import domain.CommentVO;
public interface CommentDAO {
int insert(CommentVO cvo);
List<CommentVO> getList(int bno);
int update(CommentVO cvo);
}
CommentDAOImpl.java
package repository;
import java.util.List;
import org.apache.ibatis.session.SqlSession;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import controller.CommentController;
import domain.CommentVO;
import orm.DatabaseBuilder;
public class CommentDAOImpl implements CommentDAO {
// ... (기존 코드)
@Override
public int update(CommentVO cvo) {
log.info("comment update check 3");
isOk = sql.update("CommentMapper.edit", cvo);
if(isOk > 0) sql.commit();
return isOk;
}
}
commentMapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="CommentMapper">
<!-- ... (기존 코드) -->
<update id="edit">
update comment set content = #{content}, regdate = now()
where cno = #{cno}
</update>
</mapper>
board_detail.js 파일에서 버튼을 눌렀을 때 댓글을 수정하도록 코드를 작성한다.
board.detail.js
console.log("comment js 시작합니다.");
console.log("[" + bnoVal + "]번 게시물");
// ... (기존 코드)
// 수정 : cno, content => result isOk
async function updateCommentFromServer(cnoVal, cmtText) {
try {
const url = "/cmt/modify";
const config = {
method : 'post',
headers :{
'Content-Type' : 'application/json; charset=utf-8'
},
// content:cmtText 이렇게 쓰면 content로 java에서 쓰면 된다.
body: JSON.stringify({cnoVal, content:cmtText})
}
const resp = await fetch(url, config);
const result = await resp.text();
return result;
} catch (error) {
console.log(error);
}
}
// 삭제버튼이 클릭되면... 수정버튼이 클릭되면...
document.addEventListener('click', (e)=>{
console.log(e.target);
// 수정 버튼이 클릭되면...
if(e.target.classList.contains('cmtModBtn')) {
let cnoVal = e.target.dataset.cno;
console.log(cnoVal);
let div = e.target.closest('div'); // 타겟을 기준으로 가장 가까운 div를 찾기
let cmtText = div.querySelector('.cmtText').value;
console.log(cmtText);
updateCommentFromServer(cnoVal, cmtText).then(result => {
// isOk
if(result > 0) {
alert('댓글 수정 성공~!!');
printCommentList(bnoVal);
}
})
}
})
댓글 수정 전 화면
댓글 수정 후 화면
마지막으로 댓글을 삭제하는 case remove 코드를 작성해보자.
CommentController.java
package controller;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
import org.json.simple.parser.JSONParser;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import domain.CommentVO;
import service.CommentSerivceImpl;
import service.CommentService;
@WebServlet("/cmt/*")
public class CommentController extends HttpServlet {
// ... (기존 코드)
case "modify":
try {
StringBuffer sb = new StringBuffer();
String line = null;
BufferedReader br =request.getReader(); // 댓글 객체
while((line = br.readLine()) != null ) {
sb.append(line);
}
log.info(">>>> sb >> {} ", sb.toString());
// 객체로 생성
// JSON은 전부 다 import org.json.simple 사용
JSONParser parser = new JSONParser();
JSONObject jsonObj = (JSONObject)parser.parse(sb.toString()); // key : value
// key를 이용하여 value를 추출
int cno = Integer.parseInt(jsonObj.get("cnoVal").toString());
String content = jsonObj.get("content").toString();
CommentVO cvo = new CommentVO(cno, content);
log.info("commentVO >>> {} ", cvo);
isOk = csv.modify(cvo);
log.info("modify >>> {} ", ((isOk > 0) ? "OK" : "Fail"));
// 결과 데이터 전송 => 화면에 출력 (response 객체의 body에 기록)
PrintWriter out = response.getWriter();
out.print(isOk);
} catch (Exception e) {
log.info(">>> comment remove error~!!");
e.printStackTrace();
}
break;
case "remove":
try {
int cno = Integer.parseInt(request.getParameter("cnoVal"));
isOk = csv.remove(cno);
log.info("remove >>> {} ", (isOk > 0 ? "OK" : "Fail"));
PrintWriter out = response.getWriter();
out.print(isOk);
} catch (Exception e) {
log.info(">>> comment remove error~!!");
e.printStackTrace();
}
break;
}
}
// ... (기존 코드)
}
CommentService.interface
package service;
import java.util.List;
import domain.CommentVO;
public interface CommentService {
int post(CommentVO cvo);
List<CommentVO> getList(int bno);
int modify(CommentVO cvo);
int remove(int cno);
}
CommentServiceImpl.java
package service;
import java.util.List;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import controller.CommentController;
import domain.CommentVO;
import repository.CommentDAO;
import repository.CommentDAOImpl;
public class CommentSerivceImpl implements CommentService {
// ... (기존 코드)
@Override
public int remove(int cno) {
log.info("comment remove check 2");
return cdao.delete(cno);
}
}
CommentDAO.interface
package repository;
import java.util.List;
import domain.CommentVO;
public interface CommentDAO {
int insert(CommentVO cvo);
List<CommentVO> getList(int bno);
int update(CommentVO cvo);
int delete(int cno);
}
CommentDAOImpl.java
package repository;
import java.util.List;
import org.apache.ibatis.session.SqlSession;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import controller.CommentController;
import domain.CommentVO;
import orm.DatabaseBuilder;
public class CommentDAOImpl implements CommentDAO {
// ... (기존 코드)
@Override
public int update(CommentVO cvo) {
log.info("comment update check 3");
isOk = sql.update("CommentMapper.edit", cvo);
if(isOk > 0) sql.commit();
return isOk;
}
@Override
public int delete(int cno) {
log.info("comment remove check 3");
isOk = sql.delete("CommentMapper.del", cno);
if(isOk > 0) sql.commit();
return isOk;
}
}
commentMapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="CommentMapper">
<!-- ... (기존 코드) -->
<update id="edit">
update comment set content = #{content}, regdate = now()
where cno = #{cno}
</update>
<delete id="del">
delete from comment where cno = #{cno}
</delete>
</mapper>
board_detail.js
console.log("comment js 시작합니다.");
console.log("[" + bnoVal + "]번 게시물");
// ... (기존 코드)
// 수정 : cno, content => result isOk
async function updateCommentFromServer(cnoVal, cmtText) {
try {
const url = "/cmt/modify";
const config = {
method : 'post',
headers :{
'Content-Type' : 'application/json; charset=utf-8'
},
// content:cmtText 이렇게 쓰면 content로 java에서 쓰면 된다.
body: JSON.stringify({cnoVal, content:cmtText})
}
const resp = await fetch(url, config);
const result = await resp.text();
return result;
} catch (error) {
console.log(error);
}
}
// 삭제 : cno => result isOk
async function removeCommentFromServer(cnoVal) {
try {
const url = '/cmt/remove?cnoVal='+cnoVal;
const resp = await fetch(url);
const result = await resp.text();
return result;
} catch (error) {
console.log(error);
}
}
// 삭제버튼이 클릭되면... 수정버튼이 클릭되면...
document.addEventListener('click', (e)=>{
console.log(e.target);
// 수정 버튼이 클릭되면...
if(e.target.classList.contains('cmtModBtn')) {
let cnoVal = e.target.dataset.cno;
console.log(cnoVal);
let div = e.target.closest('div'); // 타겟을 기준으로 가장 가까운 div를 찾기
let cmtText = div.querySelector('.cmtText').value;
console.log(cmtText);
updateCommentFromServer(cnoVal, cmtText).then(result => {
// isOk
if(result > 0) {
alert('댓글 수정 성공~!!');
printCommentList(bnoVal);
}
})
}
// 삭제버튼이 클릭되면...
if(e.target.classList.contains('cmtDelBtn')) {
let cnoVal = e.target.dataset.cno; // data-cno의 값을 추출
console.log(cnoVal);
removeCommentFromServer(cnoVal).then(result =>{
// result = isOk
if(result > 0) {
alert('댓글 삭제 성공~!!');
printCommentList(bnoVal);
}
})
}
})
댓글 삭제 전 화면
댓글 삭제 후 화면
여기서 끝이면 좋겠지만, 댓글 리스트는 게시물이 삭제 될 때도 함께 삭제 되어야 한다.
그러므로 BoardServiceImpl 클래스에서 게시물을 삭제할 때,
csv에게 댓글들을 다 지워달라는 method를 실행해 달라고 해야한다.
// 상단에 변수 선언 하고
private CommentServiceImpl csv = new CommentServiceImpl();
@Override
public int remove(int bno) {
log.info(">>>> remove check 2");
// 댓글 먼저 삭제하고 글 지우기
int isOk = csv.removeAll(bno);
return bdao.delete(bno);
}
BoardServiceImpl.java
package service;
import java.util.List;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import domain.BoardVO;
import domain.PagingVO;
import repository.BoardDAO;
import repository.BoardDAOImpl;
public class BoardServiceImpl implements BoardService {
private static final Logger log = LoggerFactory.getLogger(BoardServiceImpl.class);
private BoardDAO bdao;
private CommentServiceImpl csv = new CommentServiceImpl();
public BoardServiceImpl() {
bdao = new BoardDAOImpl();
}
// ... (기존 코드)
@Override
public int remove(int bno) {
log.info(">>>> remove check 2");
// 댓글 먼저 삭제하고 글 지우기
int isOk = csv.removeAll(bno);
return bdao.delete(bno);
}
// ... (기존 코드)
}
CommentServiceImpl.java
package service;
import java.util.List;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import controller.CommentController;
import domain.CommentVO;
import repository.CommentDAO;
import repository.CommentDAOImpl;
public class CommentServiceImpl implements CommentService {
// ... (기존 코드)
@Override
public int modify(CommentVO cvo) {
log.info("comment modify check 2");
return cdao.update(cvo);
}
@Override
public int remove(int cno) {
log.info("comment remove check 2");
return cdao.delete(cno);
}
public int removeAll(int bno) {
log.info("comment removeAll check 2");
return cdao.removeAll(bno);
}
}
CommentDAO.interface
package repository;
import java.util.List;
import domain.CommentVO;
public interface CommentDAO {
int insert(CommentVO cvo);
List<CommentVO> getList(int bno);
int update(CommentVO cvo);
int delete(int cno);
int removeAll(int bno);
}
CommentDAOImpl.java
package repository;
import java.util.List;
import org.apache.ibatis.session.SqlSession;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import controller.CommentController;
import domain.CommentVO;
import orm.DatabaseBuilder;
public class CommentDAOImpl implements CommentDAO {
// ... (수정 코드)
@Override
public int update(CommentVO cvo) {
log.info("comment update check 3");
isOk = sql.update("CommentMapper.edit", cvo);
if(isOk > 0) sql.commit();
return isOk;
}
@Override
public int delete(int cno) {
log.info("comment remove check 3");
isOk = sql.delete("CommentMapper.del", cno);
if(isOk > 0) sql.commit();
return isOk;
}
@Override
public int removeAll(int bno) {
log.info("comment removeAll check 3");
isOk = sql.delete("CommentMapper.delAll", bno);
sql.commit();
return isOk;
}
}
commentMapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="CommentMapper">
<!-- ... (기존 코드) -->
<update id="edit">
update comment set content = #{content}, regdate = now()
where cno = #{cno}
</update>
<delete id="del">
delete from comment where cno = #{cno}
</delete>
<delete id="delAll">
delete from comment where bno = #{bno}
</delete>
</mapper>
게시물 삭제 전 게시판 리스트와 DB의 comment TABLE
게시물 삭제 후 게시판 리스트와 DB의 comment TABLE
비로소 기본적이고 기초적인 홈페이지 만들기가 끝났다.
이 다음 게시물부터는 부가적인 기능을 하나씩 추가하거나 CSS를 하는 것으로 작성해 나가고자 한다.
[JSP/Servlet] 16. 댓글 - 수정과 삭제
(다음 게시물 예고편)
[JSP/Servlet] 17. 회원 출석부 만들기
728x90
@rlozlr :: 얼렁뚱땅 개발자
얼렁뚱땅 주니어 개발자
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!
![[JSP/Servlet] 18. 나의 게시물](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbdVZKD%2FbtsBUAcjLVd%2Fm2auc0pLhNRO0fmUNfx3I0%2Fimg.png)
![[JSP/Servlet] 17. 회원 출석부 만들기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbDneIu%2FbtsBHp4LDYW%2FoPQ6zbPPssmlXkcNEwn31k%2Fimg.png)
![[JSP/Servlet] 15. 댓글 - 등록과 리스트](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FtKQzE%2FbtsBJc4G4Ci%2FSzsnKrvfUb7zqXaRm08Pk0%2Fimg.png)
![[JSP/Servlet] 14. 게시글 파일첨부 - 수정과 삭제](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fd8MVQf%2FbtsBGpcK2Qj%2FSe9cRRrqgzMQgiUVVl6wk1%2Fimg.png)