오늘의 코드
ajax로 댓글 작업을 마무리함
detail.jap
<%@page import="edu.web.domain.BoardVO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.7.1.js">
</script>
<%
BoardVO boardvo = (BoardVO) request.getAttribute("boardvo");
%>
<title>게시글 상세조회</title>
</head>
<body>
<form id="updateForm" action="" method="post">
<input type="hidden" id="boardId" name="boardId" value="${boardvo.boardId }">
<h2>게시글 상세조회 <button onclick="listForm()">뒤로가기</button></h2>
<label for="memberId">게시글 작성자:</label>
<input type="text" name="memberId" value="${boardvo.memberId }" readonly required> <br>
<label for="boardtitle">게시글 제목:</label>
<input type="text" id="boardtitle" name="boardtitle" value="${boardvo.boardTitle }" readonly required> <br>
<label for="boardcontent">게시글 내용:</label><br>
<textarea id="boardcontent" name="boardcontent" rows="4" cols="50" readonly>${boardvo.boardContent }</textarea>
<br>
<label for="boardDate">게시및수정 된 날짜:</label><br>
<input type="text" id="boardDate" name="boardDate" value="${boardvo.boardDateCreated }" readonly="readonly" required> <br>
<br>
<button onclick="updateForm()">게시글 수정하기</button>
<button onclick="deleteForm()">게시글 삭제하기</button>
</form> <br>
<div style="text-align: center;">
<input type="text" id="memberId">
<input type="text" id="replyContent">
<button id="btnAdd">작성</button>
</div>
<hr>
<div style="text-align: center;">
<div id="replies"></div>
</div>
<div>
<br><br><br><br><br><br><br><br>
</div>
<script type="text/javascript">
$(document).ready(function(){
getAllReplies(); // 함수 호출 코드 추가
$('#btnAdd').click(function(){
let boardId = $('#boardId').val(); // 게시판 번호 데이터
let memberId = $('#memberId').val(); // 작성자 데이터
let replyContent = $('#replyContent').val(); // 댓글 내용
let obj = {
'boardId' : boardId,
'memberId' : memberId,
'replyContent' : replyContent
};
console.log(obj);
// $.ajax로 송수신
$.ajax({
type : 'POST',
url : 'replies/add',
data : {'obj' : JSON.stringify(obj)}, // JSON으로 변환
success : function(result) {
console.log(result);
getAllReplies(); // 함수 호출 코드 추가
}
});
});
// 게시판 댓글 전체 가져오기
function getAllReplies() {
// 댓글을 가져오기 위해 boardId 필요
let boardId = $('#boardId').val();
// url에 boardId 전송
let url = 'replies/all?boardId=' + boardId;
// 가져올 데이터가 JSON이므로
// getJSON으로 파싱하는게 편리함
$.getJSON(
url,
function(data) {
// data : 서버에서 전송받은 list 데이터가 저장되어 있음.
// getJSON()에서 json 데이터는
// javascript object로 자동 parsing됨
console.log(data); // data의 타입은 object
let list = ''; // 댓글 데이터를 HTML에 표현할 문자열 변수
// $(컬렉션).each() : 컬렉션데이터를 반복문으로 꺼내는 함수
$(data).each(function(){
// this : 컬렉션의 각 인덱스 데이터를 의미
console.log(this);
// String을 date 타입으로 변경
let replyDataCreated = new Date(this.replyDateCreated);
list += '<div class="reply_item">'
+ '<pre>'
+ '<input type="hidden" id="replyId" value="' + this.replyId +'">'
+ this.memberId
+ ' ' // 공백
+ '<input type="text" id="replyContent" value="' + this.replyContent + '">'
+ ' '
+ replyDataCreated
+ '<button class="btn_update">수정</button>'
+ '<button class="btn_delete">삭제</button>'
+ '</pre>'
+ '</div>';
}); // end each()
$('#replies').html(list);
}
); // end getJSON
} // end getAllReplies()
// 수정 버튼을 클릭하면 선택된 댓글 수정
// on메서드를 사용해서 class이름이 같아도 찾아감
$('#replies').on('click', '.reply_item .btn_update', function(){
console.log(this);
// 선택된 댓글의 replyId, replyContent 값을 저장
// prevAll() : 선택된 노드 이전에 있는 모든 형제 노드를 접근
let replyId = $(this).prevAll('#replyId').val();
let replyContent = $(this).prevAll('#replyContent').val();
console.log("선택된 댓글 번호 : " + replyId + ", 댓글 내용 : " + replyContent);
// ajax로 데이터 전송하여
// 댓글 수정 기능 수행하고
// 수행 결과를 리턴하는 코드
// ajax 요청
$.ajax({
type : 'POST',
url : 'replies/update',
data : {
'replyId' : replyId,
'replyContent' : replyContent
},
success : function(result) {
console.log(result);
getAllReplies();
}
}); // end ajax()
}); // end #replies.on()
// 삭제 버튼을 클릭하면 선택된 댓글 삭제
$('#replies').on('click', '.reply_item .btn_delete', function(){
console.log(this);
// 선택된 댓글의 replyId, replyContent 값을 저장
// prevAll() : 선택된 노드 이전에 있는 모든 형제 노드를 접근
let replyId = $(this).prevAll('#replyId').val();
$.ajax({
type : 'POST',
url : 'replies/delete',
data : {
'replyId' : replyId,
},
success : function(result) {
console.log(result);
getAllReplies();
}
}); // end ajax()
}); // end #replies.on()
}); // end document
function listForm() {
let form = document.getElementById("updateForm");
form.method = "GET";
form.action = "list.do";
form.submit();
}
function updateForm() {
let form = document.getElementById("updateForm");
form.method = "GET";
form.action = "update.do";
form.submit();
}
function deleteForm() {
if (confirm('정말로 삭제 하시겠습니까?')) {
let form = document.getElementById("updateForm");
form.method = "POST";
form.action = "delete.do";
form.submit();
} else {
form.method = "GET";
location.href = "detail.do";
}
}
</script>
</body>
</html>Replycontroller.java
package edu.web.controller;
import java.io.IOException;
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.json.simple.parser.ParseException;
import edu.web.domain.ReplyVO;
import edu.web.persistence.ReplyDAO;
import edu.web.persistence.ReplyDAOImple;
@WebServlet("/replies/*")
public class ReplyController extends HttpServlet {
private static final long serialVersionUID = 1L;
private ReplyDAO dao;
public ReplyController() {
dao = ReplyDAOImple.getInstance();
}
@Override
protected void service(HttpServletRequest req,
HttpServletResponse resp) throws ServletException, IOException {
String requestURI = req.getRequestURI();
System.out.println(requestURI);
if(requestURI.contains("add")) {
System.out.println("add 호출 확인");
replyAdd(req, resp);
} else if(requestURI.contains("all")) {
System.out.println("all 호출 확인");
replyList(req, resp);
} else if(requestURI.contains("update")) {
System.out.println("update 호출 확인");
replyUpdate(req, resp);
} else if(requestURI.contains("delete")) {
System.out.println("delete 호출 확인");
replyDelete(req, resp);
}
}
// 전송된 데이터를 DB에 전달하여 댓글 삭제
// 삭제 후 성공 메시지를 클라이언트로 전송
private void replyDelete(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { // 예외처리
int replyId = Integer.parseInt(request.getParameter("replyId"));
int result = dao.delete(replyId);
if(result == 1) {
response.getWriter().append("success");
}
}
// 전송된 데이터를 DB에 전달하여 댓글 수정
// 수정 후 성공 메시지를 클라이언트로 전송
private void replyUpdate(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { // 예외처리
int replyId = Integer.parseInt(request.getParameter("replyId"));
String replyContent = request.getParameter("replyContent");
ReplyVO vo = new ReplyVO(replyId, 0, "", replyContent, null);
int result = dao.update(vo);
if(result == 1) {
response.getWriter().append("success");
}
}
// 게시글 번호를 바탕으로 DB에서 댓글 리스트 조회
// 조회된 댓글 리스트를 JSON 형태로 변경하여 클라이언트에 전송
private void replyList(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { // 예외처리
System.out.println("replyList()");
int boardId = Integer.parseInt(request.getParameter("boardId"));
List<ReplyVO> list = dao.select(boardId);
JSONArray jsonArray = new JSONArray();
for(int i = 0; i < list.size(); i++) {
JSONObject jsonObject = new JSONObject();
ReplyVO vo = list.get(i);
jsonObject.put("replyId", vo.getReplyId());
jsonObject.put("boardId", vo.getBoardId());
jsonObject.put("memberId", vo.getMemberId());
jsonObject.put("replyContent", vo.getReplyContent());
jsonObject.put("replyDateCreated", vo.getReplyDateCreated().toString());
jsonArray.add(jsonObject);
}
// 확인해 봅시다!
System.out.println(jsonArray.toString());
response.getWriter().append(jsonArray.toJSONString());
// toString() or toJSONString() 둘 다 됩니다.
}
// ajax 통신으로 댓글 JSON 데이터를 전송받아,
// DB에 저장하고, 저장에 성공하면 success 메세지를 다시 돌려줌
private void replyAdd(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String obj = req.getParameter("obj");
System.out.println(obj);
JSONParser parser = new JSONParser();
try {
JSONObject jsonObject = (JSONObject) parser.parse(obj);
int boardId = Integer.parseInt((String) jsonObject.get("boardId"));
String memberId = (String) jsonObject.get("memberId");
String replyContent = (String) jsonObject.get("replyContent");
ReplyVO vo = new ReplyVO(0, boardId, memberId, replyContent, null);
System.out.println(vo);
int result = dao.insert(vo);
if(result == 1) {
resp.getWriter().append("success");
}
} catch (ParseException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
package edu.web.persistence;
import java.util.List;
import edu.web.domain.ReplyVO;
public interface ReplyDAO {
int insert(ReplyVO vo);
List<ReplyVO> select(int boardId);
int update(ReplyVO vo);
int delete(int replyId);
}
package edu.web.persistence;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import edu.web.dbcp.connmgr.ConnMgr;
import edu.web.domain.ReplyVO;
public class ReplyDAOImple implements ReplyDAO, ReplyQuery {
private static ReplyDAOImple instance = null;
private ReplyDAOImple() {}
public static ReplyDAOImple getInstance() {
if(instance == null) {
instance = new ReplyDAOImple();
}
return instance;
}
@Override
public int insert(ReplyVO vo) {
int result = 0;
Connection conn = null;
PreparedStatement pstmt = null;
try {
conn = ConnMgr.getConnection();
pstmt = conn.prepareStatement(SQL_INSERT);
pstmt.setInt(1, vo.getBoardId());
pstmt.setString(2, vo.getMemberId());
pstmt.setString(3, vo.getReplyContent());
result = pstmt.executeUpdate();
System.out.println("reply insert 성공");
} catch (Exception e) {
e.printStackTrace();
} finally {
ConnMgr.close(conn, pstmt);
}
return result;
}
@Override
public List<ReplyVO> select(int boardId) {
List<ReplyVO> list = new ArrayList<>();
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
conn = ConnMgr.getConnection();
pstmt = conn.prepareStatement(SQL_SELECT_BY_BOARD_ID);
pstmt.setInt(1, boardId);
rs = pstmt.executeQuery();
int replyId;
String memberId;
String replyContent;
Date replyDateCreated;
ReplyVO vo = null;
while(rs.next()) {
replyId = rs.getInt(COL_REPLY_ID);
memberId = rs.getString(COL_MEMBER_ID);
replyContent = rs.getString(COL_REPLY_CONTENT);
replyDateCreated = rs.getTimestamp(COL_REPLY_DATE_CREATED);
vo = new ReplyVO(replyId, boardId, memberId, replyContent, replyDateCreated);
list.add(vo);
}
System.out.println("reply list 성공");
} catch (Exception e) {
e.printStackTrace();
} finally {
ConnMgr.close(conn, pstmt, rs);
}
return list;
}
@Override
public int update(ReplyVO vo) {
int result = 0;
Connection conn = null;
PreparedStatement pstmt = null;
try {
conn = ConnMgr.getConnection();
pstmt = conn.prepareStatement(SQL_UPDATE);
pstmt.setString(1, vo.getReplyContent());
pstmt.setInt(2, vo.getReplyId());
result = pstmt.executeUpdate();
System.out.println("reply update 성공");
} catch (Exception e) {
e.printStackTrace();
} finally {
ConnMgr.close(conn, pstmt);
}
return result;
}
@Override
public int delete(int replyId) {
int result = 0;
Connection conn = null;
PreparedStatement pstmt = null;
try {
conn = ConnMgr.getConnection();
pstmt = conn.prepareStatement(SQL_DELETE);
pstmt.setInt(1, replyId);
result = pstmt.executeUpdate();
System.out.println("reply delete 성공");
} catch (Exception e) {
e.printStackTrace();
} finally {
ConnMgr.close(conn, pstmt);
}
return result;
}
}
DAOImple
package edu.web.persistence;
public interface ReplyQuery {
public static final String TABLE_NAME = "REPLY";
public static final String COL_REPLY_ID = "REPLY_ID";
public static final String COL_BOARD_ID = "BOARD_ID";
public static final String COL_MEMBER_ID = "MEMBER_ID";
public static final String COL_REPLY_CONTENT = "REPLY_CONTENT";
public static final String COL_REPLY_DATE_CREATED = "REPLY_DATE_CREATED";
// INSERT INTO REPLY VALUES
// (REPLY_SEQ.NEXTVAL, ?, ?, ?, SYSDATE);
public static final String SQL_INSERT =
"INSERT INTO " + TABLE_NAME + " VALUES " +
"(REPLY_SEQ.NEXTVAL, ?, ?, ?, SYSDATE)";
// SELECT * FROM REPLY WHERE BOARD_ID = ?
// ORDER BY REPLY_ID DESC;
public static final String SQL_SELECT_BY_BOARD_ID =
"SELECT * FROM " + TABLE_NAME + " WHERE " + COL_BOARD_ID
+ " = ? ORDER BY " + COL_REPLY_ID + " DESC";
// UPDATE_REPLY SET
// REPLY_CONTENT = ?, REPLY_DATE_CREATED = SYSDATE
// WHERE REPLY_ID = ?;
public static final String SQL_UPDATE =
"UPDATE " + TABLE_NAME + " SET " +
COL_REPLY_CONTENT + " = ?, " + COL_REPLY_DATE_CREATED + " = SYSDATE "
+ " WHERE " + COL_REPLY_ID + " = ?";
// DELETE REPLY WHERE REPLY_ID = ?;
public static final String SQL_DELETE =
"DELETE " + TABLE_NAME + " WHERE "
+ COL_REPLY_ID + " = ?";
}쿼리문작성 완료
package edu.web.domain;
import java.util.Date;
public class ReplyVO {
private int replyId;
private int boardId;
private String memberId;
private String replyContent;
private Date replyDateCreated;
public ReplyVO() {}
public ReplyVO(int replyId, int boardId, String memberId, String replyContent, Date replyDateCreated) {
this.replyId = replyId;
this.boardId = boardId;
this.memberId = memberId;
this.replyContent = replyContent;
this.replyDateCreated = replyDateCreated;
}
public int getReplyId() {
return replyId;
}
public void setReplyId(int replyId) {
this.replyId = replyId;
}
public int getBoardId() {
return boardId;
}
public void setBoardId(int boardId) {
this.boardId = boardId;
}
public String getMemberId() {
return memberId;
}
public void setMemberId(String memberId) {
this.memberId = memberId;
}
public String getReplyContent() {
return replyContent;
}
public void setReplyContent(String replyContent) {
this.replyContent = replyContent;
}
public Date getReplyDateCreated() {
return replyDateCreated;
}
public void setReplyDateCreated(Date replyDateCreated) {
this.replyDateCreated = replyDateCreated;
}
@Override
public String toString() {
return "ReplyVO [replyId=" + replyId + ", boardId=" + boardId + ", memberId=" + memberId + ", replyContent="
+ replyContent + ", replyDateCreated=" + replyDateCreated + "]";
}
}
VO작성 완료
나머지 DB관련은 앞에서 처리완료
이렇게 상세 페이지에서 댓글 기능을 구현했다.
