JSP 개인프로젝트-영어 학습 사이트 만들기 (수강후기 상세보기 및 수정 삭제, 댓글 입력 및 삭제)

https://amongthestar.tistory.com/151?category=411827

JSP 개인프로젝트-영어 학습 사이트 만들기 (수강후기 게시판 전체보기, 게시글 입력)

이전글 https://amongthestar.tistory.com/150 JSP 개인프로젝트-영어 학습 사이트 만들기 (강의목록 전체보기, 상세보기) 이전글 (관리자 기능) https://amongthestar.tistory.com/149 JSP 개인프로젝트-영어 학..

amongthestar.tistory.com

지금까지 courseDetail.jsp 내에서 $.ajax을 통해 수강후기 전체글을 가져오고, 글쓰기 폼에서 후기등록 버튼을 눌렀을때 boardList로 이동하는 것까지 보았다.

오늘 포스팅할 내용은 수강후기 게시판에서 제목을 눌렀을 때 보이는 수강후기 글 상세보기 및 수정, 삭제와 그 밑에 달리는 댓글 입력하고 삭제하는 기능 구현이다.

제목을 누르면 boardDetail로 이동하여 다음과 같은 화면이 보인다. 댓글이 달려있다.

수강후기 전체 글의 껍데기인 listResult.jsp의 다음 코드에 의해 제목을 누르면 상세페이지로 이동한다.

<td><a href="/Tutoring/board/boardDetail?num=${board.num}">${board.subject}</a></td>

WBoardDetailAction.java

(수강후기 상세페이지 서블릿. 경로는 "/Tutoring/board/boardDetail"이다.)

package com.wboard.action;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
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 javax.servlet.http.HttpSession;

import com.wmember.model.WBoardDAO;
import com.wmember.model.WBoardDTO;


/**
 * Servlet implementation class BoardDetailAction
 */
@WebServlet("/board/boardDetail")
public class WBoardDetailAction extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public WBoardDetailAction() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		int num=Integer.parseInt(request.getParameter("num"));
		WBoardDAO dao=WBoardDAO.getInstance();
		WBoardDTO dto=dao.boardView(num);
		request.setAttribute("dto", dto);
		RequestDispatcher rd=request.getRequestDispatcher("detail.jsp");
		rd.forward(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

파라미터 값으로 넘어온 num을 인자로 하여 WBoardDAO의 boardView메소드를 수행하고, dto객체를 dto이름으로 담아서 detail.jsp로 이동한다.

<WBoardDAO의 boardView메소드>

//게시물 상세보기
	public WBoardDTO boardView (int num) {
		Connection con=null;
		Statement st=null;
		ResultSet rs=null;
		WBoardDTO dto=null;
		try {
			con=getConnection();
			st=con.createStatement();
			st.execute("update wboard set readcount = readcount+1 where num ="+num);
			String sql = "SELECT * FROM wboard WHERE num="+num;
			rs=st.executeQuery(sql);
			if(rs.next()) {
				dto=new WBoardDTO();
				dto.setNum(rs.getInt("num"));
				dto.setContent(rs.getString("content"));
				dto.setReadcount(rs.getInt("readcount"));
				dto.setReg_date(rs.getString("reg_date"));
				dto.setSubject(rs.getString("subject"));
				dto.setUserid(rs.getString("userid"));
				dto.setClassnum(rs.getInt("classnum"));
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			closeConnection(con, st, rs);
		}
		return dto;
	}

수강후기 글을 클릭할 때마다 조회수 (readcount)가 1씩 증가하도록 했다.

detail.jsp

수강후기 상세글 jsp이다.

수강후기 상세보기와 댓글 입력, 댓글 목록 영역으로 이루어져있다.

<div class="container">
<!-- 액션처리를 위한 값들 -->
<input type="hidden" id="num" name="num" value="${dto.num}"> <!-- 수강후기 게시글 번호 -->
<input type="hidden" id="classnum" name="classnum" value="${dto.classnum}">
<c:set var="classnum" value="${dto.classnum}" />
<!-- 수강 후기 글보기-->
<div><a href="/Tutoring/class/CourseDetail?num=${dto.classnum}"><b>〈</b> 뒤로가기</a></div>
<br/>
	  <h5>수강후기</h5>
	  <br/>
	  <table class="table table-bordered table-sm">
	  <tr>
	 	<td style="width: 15%; background-color: #f8f9fa; text-align: center">글번호</td>
	 	<td style="width: 40%;">${dto.num}</td>
	 	<td style="width: 30%; background-color: #f8f9fa; text-align: center">조회수</td>
	 	<td style="width: 15%; text-align: right;">${dto.readcount}</td>
	  </tr>
	  <tr>
	 	<td style="background-color: #f8f9fa; text-align: center;">작성자</td>
	 	<td>${dto.userid}</td>
	 	<td style="background-color: #f8f9fa; text-align: center;">작성일</td>
	 	<td style="text-align: right">${dto.reg_date}</td>
	  </tr>
	  <tr>
	 	<td style="background-color: #f8f9fa; text-align: center">제목</td>
	 	<td colspan="3">${dto.subject}</td>
	  </tr>
	  <tr style="height: 150px">
	 	<td style="background-color: #f8f9fa; vertical-align: middle; text-align: center">글 내용</td>
	 	<td colspan="3">${dto.content}</td>
	  </tr>
	</table>
<!-- 수강후기 글보기 끝 -->
<!-- 수정, 삭제 버튼 보이기 -->
<c:set var="loginUserid" value="${sessionScope.userid}" />
<c:set var="userid" value="${dto.userid}" />
<c:if test="${loginUserid eq userid}">
		<div align="center" id="button">
			<input type="button" id="upBoard" name="upBoard" value="수정 " class="btn btn-info btn-sm" onclick="location.href='boardview?num=${dto.num}'"> 
			<input type="button" id="delBtn" name="delBtn" value="삭제" class="btn btn-danger btn-sm" onclick="javascript:fdelete(${dto.num}, ${dto.classnum})">
		</div> 
		<br/>
</c:if>
<!-- 수정, 삭제 버튼 보이기 끝-->
<!-- 댓글 리스트 영역 -->
	<div id="commentResult">
	</div>
<!-- 댓글 리스트 영역 끝-->
<!-- 댓글 달기 영역-->
	<div id="commentDiv" align="center">
		<textarea rows="2" cols="20" id="msg" name="msg" class="table table-bordered table-sm"></textarea>
<c:if test="${not empty sessionScope.userid}">
		<input type="button" id="commentBtn" name="commentBtn" value="댓글 " class="btn btn-info btn-sm">
</c:if>
	</div>
	<br/>
<!-- 댓글 달기 영역 끝 -->
</div>

현재 로그인한 userid와 글의 userid가 같으면 수정, 삭제 버튼이 보이도록 <c:set>과 <c:if>문으로 처리했다.
댓글입력 버튼 또한 로그인을 하지 않으면 아예 보이지 않게 설정했다.
수강 후기 글을 클릭하자마자 댓글 리스트를 불러오도록 $.getJSON으로 처리했다.

$(document).ready(function(){
	//문서 열자마자 댓글 리스트를 불러옴
	$.getJSON("/Tutoring/board/commentList", 
				{num:$("#num").val()}, 
				function(d){
					var htmlStr="<table class='table table-striped'>";
					$.each(d.carr, function(key, val){ 
						htmlStr+="<tr>";
						htmlStr+="<th style='width:10%;'>"+val.userid+"</th>";
						htmlStr+="<td style='width:60%;'>"+val.msg+"</td>";
						htmlStr+="<td style='width:20%;'>"+val.reg_date+"</td>";
						
						if(val.userid == '${sessionScope.userid}'){
							htmlStr+="<td style='width:10%;'><a href='javascript:cdelete("+val.cnum+","+val.bnum+")'><img src='/Tutoring/img/delete.png' style='height:20px; width:20px;'></a></td>";
						}else{
							htmlStr+="<td></td>";
						}
						
						htmlStr+="</tr>";
					})
						htmlStr+="</table>";
						$("#commentResult").html(htmlStr);
				}
	)

commentList 서블릿에서 JSONObject과 JSONArray클래스를 이용하여 최종적으로 JSONObject 객체에 저장된 데이터를 $.each로 뿌린다.

CommentDTO.java

package com.wmember.model;

public class CommentDTO {
	private int cnum;
	private String userid;
	private String msg;
	private String reg_date;
	private int bnum;
	public int getCnum() {
		return cnum;
	}
	public void setCnum(int cnum) {
		this.cnum = cnum;
	}
	public String getUserid() {
		return userid == null ? "" : userid.trim();
	}
	public void setUserid(String userid) {
		this.userid = userid;
	}
	public String getMsg() {
		return msg == null ? "" : msg.trim();
	}
	public void setMsg(String msg) {
		this.msg = msg;
	}
	public String getReg_date() {
		return reg_date == null ? "" : reg_date.trim();
	}
	public void setReg_date(String reg_date) {
		this.reg_date = reg_date;
	}
	public int getBnum() {
		return bnum;
	}
	public void setBnum(int bnum) {
		this.bnum = bnum;
	}
}

CommentListAction.java

(댓글 리스트 실행하는 서블릿. 경로는 "/Tutoring/board/commentList"이다.)

package com.wboard.action;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;

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 javax.servlet.http.HttpSession;

import org.json.simple.JSONArray;
import org.json.simple.JSONObject;

import com.wmember.model.CommentDTO;
import com.wmember.model.WBoardDAO;


/**
 * Servlet implementation class CommentListAction
 */
@WebServlet("/board/commentList")
public class CommentListAction extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public CommentListAction() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		int bnum=Integer.parseInt(request.getParameter("num"));
		WBoardDAO dao=WBoardDAO.getInstance();
		ArrayList<CommentDTO> arr=dao.commentList(bnum);
		//arr를 json형태로 리턴
		JSONObject mainObj=new JSONObject();
		JSONArray jarr=new JSONArray();
		
		for(CommentDTO cd:arr) {
			JSONObject obj=new JSONObject();
			obj.put("bnum", cd.getBnum());
			obj.put("cnum", cd.getCnum());
			obj.put("msg", cd.getMsg());
			obj.put("userid", cd.getUserid());
			obj.put("reg_date", cd.getReg_date());
			jarr.add(obj);
		}
		mainObj.put("carr", jarr);
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out=response.getWriter();
		out.println(mainObj.toString());
	
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

파라미터 값으로 받아온 수강후기 글번호(num)를 bnum 변수에 저장하고, 그것을 인자로 하여 WBoardDAO.java의 commentList메소드를 수행한다.
불러온 곳으로 다시 값을 들고 가야하므로 JSONObject과 JSONArray클래스를 활용한다.

<WBoardDAO.java의 commentList메소드>

//코멘트 리스트 commentList
	public ArrayList<CommentDTO> commentList(int bnum){
		Connection con=null;
		Statement st=null;
		ResultSet rs=null;
		ArrayList<CommentDTO> arr=new ArrayList<CommentDTO>();
		try {
			con=getConnection();
			String sql="select * from wcomment_board where bnum="+bnum+ "order by cnum desc";
			st=con.createStatement();
			rs=st.executeQuery(sql);
			while(rs.next()) {
				CommentDTO comment=new CommentDTO();
				comment.setBnum(rs.getInt("bnum"));
				comment.setCnum(rs.getInt("cnum"));
				comment.setMsg(rs.getString("msg"));
				comment.setReg_date(rs.getString("reg_date"));
				comment.setUserid(rs.getString("userid"));
				arr.add(comment);
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			closeConnection(con, st, rs);
		}
		return arr;
	}

이로써 게시글 상세보기 및 댓글 전체 목록 (comment list)를 출력할 수 있다.

자신이 쓴 게시글일 경우 삭제하고 싶으면 삭제 버튼을 누르면 된다.

<input type="button" id="delBtn" name="delBtn" value="삭제" class="btn btn-danger btn-sm" onclick="javascript:fdelete(${dto.num}, ${dto.classnum})">

삭제 버튼에 onclick을 달아 자바스크립트 함수를 호출했다.

confrim 창에서 확인을 누르면 삭제 메소드를 호출하는 서블릿으로 이동한다.

//게시글 삭제 함수
function fdelete(num, classnum){
	if(confirm("게시물을 삭제 하시겠습니까?")){
		location.href="delete?num=${dto.num}&classnum=${dto.classnum}";
	}
}

WBoardDeleteAction.java

(삭제 메소드를 호출하는 서블릿. 경로는 "/Tutoring/board/delete"이다.)

package com.wboard.action;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.RequestDispatcher;
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 com.wmember.model.WBoardDAO;

/**
 * Servlet implementation class BoardDeleteAction
 */
@WebServlet("/board/delete")
public class WBoardDeleteAction extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public WBoardDeleteAction() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		int num=Integer.parseInt(request.getParameter("num"));
		int classnum=Integer.parseInt(request.getParameter("classnum"));
		WBoardDAO dao=WBoardDAO.getInstance();
		dao.boardDel(num);
		response.sendRedirect("/Tutoring/class/CourseDetail?num="+classnum);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

게시글 삭제 후에는 강의번호를 달고 다시 강의 상세정보 페이지로 이동한다.

<WBoardDAO.java의 boardDel메소드>

//게시글 삭제
	public void boardDel(int num) {
		Connection con=null;
		Statement st=null;
		try {
			con=getConnection();
			st=con.createStatement();
			String sql="delete from WBoard where num="+num;
			st.executeUpdate(sql);
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			closeConnection(con, st, null);
		}
	}

그렇다면 자신이 쓴 게시글을 어떻게 수정할 수 있을까? 앞서 글의 userid와 현재 로그인한 userid가 동일한 경우에만 수정버튼, 삭제버튼이 보이도록 했다.

<!-- 수정, 삭제 버튼 보이기 -->
<c:set var="loginUserid" value="${sessionScope.userid}" />
<c:set var="userid" value="${dto.userid}" />
<c:if test="${loginUserid eq userid}">
		<div align="center" id="button">
			<input type="button" id="upBoard" name="upBoard" value="수정 " class="btn btn-info btn-sm" onclick="location.href='boardview?num=${dto.num}'"> 
			<input type="button" id="delBtn" name="delBtn" value="삭제" class="btn btn-danger btn-sm" onclick="javascript:fdelete(${dto.num}, ${dto.classnum})">
		</div> 
		<br/>
</c:if>
<!-- 수정, 삭제 버튼 보이기 끝-->

수정 버튼을 누르면 onclick location에 의해 boardview로 num값을 달고 간다. num은 이 게시글의 번호이다. (WBoardDTO의 num)

지금은 게시글을 그냥 볼 수 있는 화면이고, 수정할 수 있도록 폼 양식이 살아있는 화면으로 바뀌어야한다.

WBoardViewAction.java

(게시글을 수정할 수 있는 화면으로 넘기는 서블릿. 경로는 "/Tutoring/board/boardview" 이다.)

package com.wboard.action;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
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 com.wmember.model.WBoardDAO;
import com.wmember.model.WBoardDTO;

/**
 * Servlet implementation class WBoardViewAction
 */
@WebServlet("/board/boardview")
public class WBoardViewAction extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public WBoardViewAction() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		int num=Integer.parseInt(request.getParameter("num"));
		WBoardDAO dao=WBoardDAO.getInstance();
		WBoardDTO dto=dao.boardView(num);
		request.setAttribute("dto", dto);
		RequestDispatcher rd=request.getRequestDispatcher("updateForm.jsp");
		rd.forward(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

파라미터 값으로 받아온 num을 인자로하여 WBoardDAO.java의 boardView 메소드를 수행한다.
dto객체를 dto이름에 담고 updateForm.jsp로 이동한다.

<WBoardDAO.java의 boardView 메소드>

앞서 나온 메소드와 동일하다. 두 개의 서블릿에서 동일한 메소드를 거쳐 다른 출력화면으로 가는 것이다.
listResult.jsp(수강후기 전체 목록)의 제목 클릭->boardDetail(WBoardDetailAction.java)->WBoardDAO의 boardView 메소드->detail.jsp
detail.jsp의 수정버튼 클릭->boardView(WBoardViewAction.java)->WBoardDAO의 boardView 메소드->updateForm.jsp

//게시물 상세보기
	public WBoardDTO boardView (int num) {
		Connection con=null;
		Statement st=null;
		ResultSet rs=null;
		WBoardDTO dto=null;
		
		try {
			con=getConnection();
			st=con.createStatement();
			st.execute("update wboard set readcount = readcount+1 where num ="+num);
			String sql = "SELECT * FROM wboard WHERE num="+num;
			rs=st.executeQuery(sql);
			if(rs.next()) {
				dto=new WBoardDTO();
				dto.setNum(rs.getInt("num"));
				dto.setContent(rs.getString("content"));
				dto.setReadcount(rs.getInt("readcount"));
				dto.setReg_date(rs.getString("reg_date"));
				dto.setSubject(rs.getString("subject"));
				dto.setUserid(rs.getString("userid"));
				dto.setClassnum(rs.getInt("classnum"));
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			closeConnection(con, st, rs);
		}
		return dto;
	}

updateForm.jsp

수강후기글을 수정할 수 있는 화면

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/include/header.jsp" %>    
<script>
//취소 함수
function back(){
	if(confirm("나가겠습니까? 변경사항은 저장되지 않습니다.")){
		location.href="/Tutoring/board/boardDetail?num=${dto.num}";
	}
}
</script>
<form action="/Tutoring/board/boardUpdate" method="post" id="wFrm">
<div class="container">
			<br/><br/>
			  <!-- 수강후기 등록하고자 하는 강의 번호 -->
			  <input type="hidden" id="classnum" name="classnum" value="${dto.classnum}">
			  
			  <!-- 게시글 번호 -->
			  <input type="hidden" id="num" name="num" value="${dto.num}">
			  
			  <div class="input-group mb-3"><div class="input-group-prepend">
			  	  <span class="input-group-text">작성자</span></div>
			      <input type="text" class="form-control" id="userid" name="userid" readonly="readonly" value="${dto.userid}">
			  </div>
			  <br/>
			  
			  <div class="input-group mb-3"><div class="input-group-prepend">
			      <span class="input-group-text">제목</span></div>
			      <input type="text" class="form-control" id="subject" name="subject" value="${dto.subject}">
			  </div>
			  <br/>
			  
			  <div class="input-group mb-3"><div class="input-group-prepend">
			      <span class="input-group-text">내용</span></div>
			      <textarea rows="5" cols="20" class="form-control" id="content" name="content">${dto.content}</textarea>
			  </div>
			  
			  <div class="button" align="center">
			 	  <input type="reset" class="btn btn-gray" value="취소" onclick="javascript:back()">
			 	  <input type="submit" class="btn btn-primary" value="수정">
			  </div>
			  <br/>
			</form>
</div>
<%@ include file="/include/footer.jsp" %>

자신이 쓴 글의 수정버튼을 누르면 밑의 이미지처럼 updateForm.jsp 화면으로 이동한다.

updateForm.jsp 폼 양식 안에서 자신이 쓴 글을 수정할 수 있다.

boardView 메소드를 거쳐 dto이름으로 저장된 dto 객체를 폼 양식 안에서 출력한다.
수정버튼을 누르면 수정할 수 있는 서블릿으로 이동한다.

WBoardUpdateAction.java

(수정할 수 있는 구현체를 연결하는 서블릿. 경로는 "/Tutoring/board/boardUpdate"이다.)

 package com.wboard.action;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
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 com.wmember.model.WBoardDAO;
import com.wmember.model.WBoardDTO;


/**
 * Servlet implementation class BoardUpdateAction
 */
@WebServlet("/board/boardUpdate")
public class WBoardUpdateAction extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public WBoardUpdateAction() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		RequestDispatcher rd=request.getRequestDispatcher("updateForm.jsp");
		rd.forward(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		WBoardDTO board=new WBoardDTO();
		board.setNum(Integer.parseInt(request.getParameter("num")));
		board.setContent(request.getParameter("content"));
		board.setSubject(request.getParameter("subject"));
		board.setUserid(request.getParameter("userid"));

		int num=Integer.parseInt(request.getParameter("num"));
		WBoardDAO dao=WBoardDAO.getInstance();
		dao.boardUpdate(board);
		response.sendRedirect("/Tutoring/board/boardDetail?num="+num);
	}

}

파라미터 값으로 받아온 게시글 번호, 내용, 제목, 아이디를 board객체에 저장한 후 이를 인자로 하여 WBoardDAO.java의 boardUpdate 메소드를 호출한다.
게시글 수정 후에는 수강후기 상세보기 페이지로 다시 이동한다.

<WBoardDAO.java의 boardUpdate 메소드>

//게시물정보 수정
	public int boardUpdate(WBoardDTO vo) {
		Connection con=null;
		PreparedStatement ps=null;
		int flag=0;
		try {
			con=getConnection();
			String sql="update WBoard set subject=?, content=?, reg_date=sysdate where num=?";
			ps=con.prepareStatement(sql);
			ps.setString(1, vo.getSubject());
			ps.setString(2, vo.getContent());
			ps.setInt(3, vo.getNum());
			flag=ps.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			closeConnection(con, ps);
		}
		return flag;
	}

지금까지의 진행과정:

1. 게시판 목록에서 제목을 클릭하여 게시글 상세보기

2. 댓글목록을 보기

3. 게시글 삭제하기

4. 게시글 수정버튼을 눌러서 수정할 수 있는 화면으로 이동 -> 수정하기

앞에서 댓글목록을 부르는 것은 했다.

그렇다면 댓글은 어떻게 입력할까?

수강후기글 상세보기 페이지인 detail.jsp에서 로그인되어 있을 경우에만 댓글 버튼이 보이도록 처리했다.

<!-- 댓글 달기 영역-->
	<div id="commentDiv" align="center">
		<textarea rows="2" cols="20" id="msg" name="msg" class="table table-bordered table-sm"></textarea>
<c:if test="${not empty sessionScope.userid}">
		<input type="button" id="commentBtn" name="commentBtn" value="댓글 " class="btn btn-info btn-sm">
</c:if>
	</div>
	<br/>
<!-- 댓글 달기 영역 끝 -->

자바스크립트 함수에서 댓글 버튼을 눌렀을 경우 ajax 함수를 통해 commentInsert 서블릿으로 이동한다.

//댓글 입력 버튼
	$("#commentBtn").on("click", function(){
		if($("#msg").val()==""){
			alert("댓글을 작성해주세요");
			$("#msg").focus();
			return false;
		}else{
			$.ajax({
				type: "get",
				url: "commentInsert",
				data: {"msg":$("#msg").val(), "num":$("#num").val()},
				success: function(d){
						var htmlStr="<table class='table table-striped'>";
						d=JSON.parse(d);
						$.each(d.carr, function(key, val){ 
							
							htmlStr+="<tr>";
							htmlStr+="<th>"+val.userid+"</th>";
							htmlStr+="<td>"+val.msg+"</td>";
							htmlStr+="<td>"+val.reg_date+"</td>";
							
							if(val.userid == '${sessionScope.userid}'){
								htmlStr+="<td style='width:10%;'><a href='a href='javascript:cdelete("+val.cnum+","+val.bnum+")'><img src='/Tutoring/img/delete.png' style='height:20px; width:20px;'></a></td>";
							}else{
								htmlStr+="<td></td>";
							}
							htmlStr+="</tr>";
						})
							htmlStr+="</table>";
							$("#commentResult").html(htmlStr);
				},
				error: function(e){
					alert("error:"+e);
				}
			})//ajax
		}
	})//commentBtn

commentInsert를 거쳐 돌아온 데이터는 JSON 형태로 파싱시켜 $.each로 값을 뿌린다.

WCommentInsertAction.java

(댓글 입력 처리 서블릿. 경로는 "/Tutoring/board/commentInsert"이다.)

package com.wboard.action;

import java.io.IOException;
import java.io.PrintWriter;

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 javax.servlet.http.HttpSession;

import com.wmember.model.CommentDTO;
import com.wmember.model.WBoardDAO;


/**
 * Servlet implementation class CommentInsertAction
 */
@WebServlet("/board/commentInsert")
public class CommentInsertAction extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public CommentInsertAction() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		String msg=request.getParameter("msg");
		int bnum=Integer.parseInt(request.getParameter("num"));
		HttpSession session=request.getSession();
		String userid=(String)session.getAttribute("userid");

		CommentDTO comment=new CommentDTO();
		comment.setBnum(bnum);
		comment.setMsg(msg);
		comment.setUserid(userid);
		WBoardDAO dao=WBoardDAO.getInstance();
		dao.commentInsert(comment);
		//commentList ArrayList에 담아 json으로 리턴
		response.sendRedirect("commentList?num="+bnum);

	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

댓글을 입력하고 나면 commentList 페이지로 게시글 번호를 달고 이동한다.

<WBoardDAO.java의 commentInsert 메소드>

//코멘트 추가 commentInsert
	public void commentInsert(CommentDTO comment) {
		Connection con=null;
		PreparedStatement ps=null;
		
		try {
			con=getConnection();
			String sql="insert into wcomment_board(cnum, userid, msg, reg_date, bnum) "
					+ "values(wcomment_board_seq.nextval,?,?,sysdate,?)";
			ps=con.prepareStatement(sql);
			ps.setString(1, comment.getUserid());
			ps.setString(2, comment.getMsg());
			ps.setInt(3, comment.getBnum());
			ps.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			closeConnection(con, ps);
		}
	}

댓글도 게시글과 마찬가지로 자신이 쓴 댓글이면 삭제 아이콘이 나타난다.

댓글 삭제또한 자바스크립트 함수 링크를 달아서 처리한다.

//댓글 삭제 함수
function cdelete(cnum, bnum){
	if(confirm("댓글을 삭제 하시겠습니까?")){
		$.getJSON("/Tutoring/board/cdelete", 
				{"cnum":cnum,"bnum":bnum}, 
				function(d){
					var htmlStr="<table class='table table-striped'>";
					$.each(d.carr, function(key, val){ 
						htmlStr+="<tr>";
						htmlStr+="<th style='width:10%;'>"+val.userid+"</th>";
						htmlStr+="<td style='width:60%;'>"+val.msg+"</td>";
						htmlStr+="<td style='width:20%;'>"+val.reg_date+"</td>";
						
						if(val.userid == '${sessionScope.userid}'){
							htmlStr+="<td style='width:10%;'><a href='javascript:cdelete("+val.cnum+","+val.bnum+")'><img src='/Tutoring/img/delete.png' style='height:20px; width:20px;'></a></td>";
						}else{
							htmlStr+="<td></td>";
						}
						
						htmlStr+="</tr>";
					})
						htmlStr+="</table>";
						$("#commentResult").html(htmlStr);
				}
	)
	}
}

CommentDeleteAction.java

(댓글 삭제 처리 서블릿. 경로는 "/Tutoring/board/cdelete"이다.)

package com.wboard.action;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.RequestDispatcher;
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 com.wmember.model.WBoardDAO;

/**
 * Servlet implementation class BoardDeleteAction
 */
@WebServlet("/board/cdelete")
public class CommentDeleteAction extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public CommentDeleteAction() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		int cnum=Integer.parseInt(request.getParameter("cnum"));
		int bnum=Integer.parseInt(request.getParameter("bnum"));
		WBoardDAO dao=WBoardDAO.getInstance();
		dao.commentDel(cnum);
		response.sendRedirect("/Tutoring/board/commentList?num="+bnum);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

삭제후에는 게시글번호를 달고 다시 commentList로 이동한다.

<WBoardDAO.java의 commentDel 메소드>

//댓글 삭제
	public void commentDel(int cnum) {
		Connection con=null;
		Statement st=null;
		try {
			con=getConnection();
			st=con.createStatement();
			String sql="delete from WComment_Board where cnum="+cnum;
			st.executeUpdate(sql);
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			closeConnection(con, st, null);
		}
	}

https://github.com/kkj0712/JspProject_Tutoring

kkj0712/JspProject_Tutoring

Contribute to kkj0712/JspProject_Tutoring development by creating an account on GitHub.

github.com

저작자표시 비영리 변경금지

'Learning > JSP' 카테고리의 다른 글

Mybatis 연동하기 (주소록 만들기1) (0)	2020.08.19
JSP 개인프로젝트-영어 학습 사이트 만들기 (강의 장바구니 담기 및 삭제) (0)	2020.08.19
JSP 개인프로젝트-영어 학습 사이트 만들기 (수강후기 게시판 전체보기, 게시글 입력) (0)	2020.08.18
JSP 개인프로젝트-영어 학습 사이트 만들기 (강의목록 전체보기, 상세보기) (0)	2020.08.18
JSP 개인프로젝트-영어 학습 사이트 만들기 (관리자 기능) (0)	2020.08.18

cozy coding

JSP 개인프로젝트-영어 학습 사이트 만들기 (수강후기 상세보기 및 수정 삭제, 댓글 입력 및 삭제)

WBoardDetailAction.java

detail.jsp

CommentDTO.java

CommentListAction.java

WBoardDeleteAction.java

WBoardViewAction.java

updateForm.jsp

WBoardUpdateAction.java

WCommentInsertAction.java

CommentDeleteAction.java

'Learning > JSP' 카테고리의 다른 글

티스토리툴바

JSP 개인프로젝트-영어 학습 사이트 만들기 (수강후기 상세보기 및 수정 삭제, 댓글 입력 및 삭제)

WBoardDetailAction.java

detail.jsp

CommentDTO.java

CommentListAction.java

WBoardDeleteAction.java

WBoardViewAction.java

updateForm.jsp

WBoardUpdateAction.java

WCommentInsertAction.java

CommentDeleteAction.java

'Learning > JSP' 카테고리의 다른 글

'Learning/JSP' Related Articles

티스토리툴바