본문 바로가기
웹 개발/JSP

[Web_JSP] 23

유리rr 2022. 6. 11. 14:40

실습(MVC(board))

- [Web_JSP] 22 이어서

 

 

1. reply.js

/**
 * 
 */

let replyList;
let check = false;

getList();

//댓글 등록
function insert(){
	let $content = $("#content").val();
	$.ajax({
		url: contextPath + "/board/ReplyWriteOk.re",
		type: "post",
		data: {boardNumber: boardNumber, replyContent: $content},
		success: function(){
			$("#content").val("");
			getList();
		} 
	});
} 

//댓글 목록
function getList(){
	$.ajax({
		url: contextPath + "/board/ReplyListOk.re", //요청할 URL
		type: "get", //실행할 서블릿 메소드 방식
//		data를 통해 JS 객체를 JSON으로 전송할 때 contentType은 text로 설정해야 한다.
		data: {"boardNumber": boardNumber}, //전송할 데이터(JS Object 형식으로 전송)
		contentType: "application/json; charset=utf-8", //전송할 데이터의 타입
		dataType: "json", //받을 데이터의 타입
		success: showList
	});
}

//댓글 목록
function showList(replies){
	replyList = replies;
    var text = "";
    if(replies != null && replies.length != 0){
        $.each(replies, function(index, reply){
            text += "<div id='reply'>"
            text += "<p class='writer'>" + reply.memberId +"</p>"
            text += "<div class='content' id='content"+ index +"' style='width:100%'>"
            text += "<pre>" + reply.replyContent + "</pre>"
            text += "</div>"
            if(memberNumber == reply.memberNumber){
                text += "<input type='button' id='ready" + index + "' class='primary' value='수정' onclick='readyToUpdate(" + index + ")'>";
                text += "<input type='button' id='ok" + index + "' class='primary' style='display:none;' value='수정 완료' onclick='update(" + index +")'>";
                //버튼 마다 삭제할 댓글의 번호를 같이 전달한다.
                text += "<input type='button' id='remove" + index + "' class='primary' value='삭제' onclick='remove(" + reply.replyNumber + ")'>"
            }
            text += "</div>"
        });
    }else{
        //댓글 없음
        text = "<p>댓글이 없습니다.</p>";
    }

   $("#replies").html(text);
}


//댓글 수정 버튼 클릭
function readyToUpdate(index){
	if(check){
		alert("이미 수정중인 댓글이 있습니다.");
		return;
	}
	var div = $("#content" + index);
	var updateReady = $("#ready" + index);
	var updateOk = $("#ok" + index);
	var remove = $("#remove" + index);
	console.log(remove);
	remove.replaceWith("<input type='button' id='cancel" + index +"' value='취소' onclick='updateCancel(" + index + ")'>");
	div.replaceWith("<textarea name='replyContent' id='content" + index +"' style='resize:none; border-radius:0; background:white'>" + div.text() + "</textarea>");
	
	check = true;
	
	updateReady.hide();
	updateOk.show();
}

//댓글 수정 취소
function updateCancel(index){
	
	check = false;
	
	var div = $("#content" + index);
	var updateReady = $("#ready" + index);
	var updateOk = $("#ok" + index);
	var cancel = $("#cancel" + index);
	
	updateReady.show();
	updateOk.hide();
	
	cancel.replaceWith("<input type='button' id='cancel" + index +"' value='삭제' onclick='remove(" + replyList[index].replyNumber + ")'>");
	div.replaceWith("<div class='content' id='content"+ index +"' style='width:100%'><pre>" + replyList[index].replyContent + "</pre></div>");	
}


//댓글 수정
function update(index){
	$.ajax({
		url: contextPath + "/board/ReplyUpdateOk.re",
		type: 'post',
//		JSON으로 데이터 전달할 때에는 아래와 같이 전달하고,
//		contentType:text로 반드시 설정한다. 생략 가능!
		data: {replyNumber: replyList[index].replyNumber, replyContent: $("#content" + index).val()},
		success: function(){
			getList();
			check = false;
		}
	});
}

//댓글 삭제
function remove(replyNumber){
	$.ajax({
		url: contextPath + "/board/ReplyDeleteOk.re",
		type: 'get',
		data: {replyNumber: replyNumber},
		success: function(){
			getList();
		}
	});
}

 

 

 

2. BoardMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http//mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="Board">

	<select id="selectAll" parameterType="map" resultType="boardDTO">
		select board_number, board_title, board_content, member_id, board_date, read_count 
		from tbl_board b join tbl_member m 
		on b.member_number = m.member_number
		order by 1 desc limit #{startRow}, #{rowCount}
	</select>
	
	<!-- 게시글 전체 개수  -->
	<select id="getTotal" resultType="_int"> 
		select count(board_number) from tbl_board
	</select>
	
	<!-- 게시글 상세보기(전체 정보 조회) -->
	<select id="selectDetail" parameterType="_int" resultType="boardDTO">
		select board_number, board_title, board_content, b.member_number, member_id 
		from tbl_board b join tbl_member m
		on  b.member_number = m.member_number and board_number = #{boardNumber}
	</select>
	
	<!-- 조회수 -->
	<update id="updateReadCount" parameterType="_int">
		update tbl_board
		set read_count = read_count + 1
		where board_number = #{boardNumber}
	</update>
	
	<!-- 최근 게시글 번호 -->
	<select id="getSeq" resultType="_int">
		select board_number from tbl_board
		order by 1 desc limit 0, 1
	</select>
	
	<!-- 게시글 작성 -->
	<insert id="insert" parameterType="boardVO">
		insert into tbl_board (board_title, board_content, member_number, board_date) 
		values(#{boardTitle}, #{boardContent}, #{memberNumber}, now())
	</insert>
	
	<!-- 게시글 삭제 -->
	<delete id="delete" parameterType="_int">
		delete from tbl_board where board_number = #{boardNumber}
	</delete>
	
	<!-- 게시글 수정 -->
	<update id="update" parameterType="boardVO">
		update tbl_board
		set board_title=#{boardTitle}, board_content=#{boardContent}
		where board_number = #{boardNumber}
	</update>
	
</mapper>

 

 

 

3. BoardDetailOk.java

package com.board.app.board;

import java.io.IOException; 

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.board.app.action.Action;
import com.board.app.action.ActionInfo;
import com.board.app.domain.dao.BoardDAO;
import com.board.app.domain.dao.FileDAO;

public class BoardDetailOk implements Action {

	@Override
	public ActionInfo execute(HttpServletRequest req, HttpServletResponse resp) throws IOException {
		//사용자가 선택한 게시글 번호를 파라미터로 전달받는다.
		int boardNumber = Integer.parseInt(req.getParameter("boardNumber"));
		int page = Integer.parseInt(req.getParameter("page"));
		
		BoardDAO boardDAO = new BoardDAO();
		FileDAO fileDAO = new FileDAO();
		ActionInfo actionInfo = new ActionInfo();
		
		//게시글 번호로 조회한 게시글의 전체 정보를 requestScope에 저장한다.
		req.setAttribute("board", boardDAO.selectDetail(boardNumber));
		req.setAttribute("page", page);
		req.setAttribute("files", fileDAO.select(boardNumber));
		
		//상세보기로 왔다면, 조회수를 1 증가시켜준다.
		boardDAO.updateReadCount(boardNumber);
		
		//requestScope에 데이터를 담았기 때문에 forward로 페이지까지 req객체를 유지한다.
		actionInfo.setRedirect(false);
		actionInfo.setPath("/app/board/boardDetail.jsp");
		
		return actionInfo;
	}

}

 

 

 

4. ReplyWriteOk.java

package com.board.app.reply;

import java.io.IOException;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.board.app.action.Action;
import com.board.app.action.ActionInfo;
import com.board.app.domain.dao.ReplyDAO;
import com.board.app.domain.vo.ReplyVO;

public class ReplyWriteOk implements Action {

	@Override
	public ActionInfo execute(HttpServletRequest req, HttpServletResponse resp) throws IOException {
		req.setCharacterEncoding("UTF-8");
		
		ReplyVO replyVO = new ReplyVO();
		ReplyDAO replyDAO = new ReplyDAO();
		
		replyVO.setReplyContent(req.getParameter("replyContent"));
		replyVO.setBoardNumber(Integer.parseInt(req.getParameter("boardNumber")));
		replyVO.setMemberNumber((Integer)req.getSession().getAttribute("memberNumber"));
		
		replyDAO.insert(replyVO);
		
		return null; 
	}

}

 

 

 

5. ReplyUpdateOk.java

package com.board.app.reply;

import java.io.IOException;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.board.app.action.Action;
import com.board.app.action.ActionInfo;
import com.board.app.domain.dao.ReplyDAO;
import com.board.app.domain.vo.ReplyVO;

public class ReplyUpdateOk implements Action {

	@Override
	public ActionInfo execute(HttpServletRequest req, HttpServletResponse resp) throws IOException {
		req.setCharacterEncoding("UTF-8");
		 
		ReplyVO replyVO = new ReplyVO();
		ReplyDAO replyDAO = new ReplyDAO();
		
		replyVO.setReplyNumber(Integer.parseInt(req.getParameter("replyNumber")));
		replyVO.setReplyContent(req.getParameter("replyContent"));
		
		replyDAO.update(replyVO);
		
		return null;
	}

}

 

 

 

6. ReplyDeleteOk.java

package com.board.app.reply;

import java.io.IOException;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.board.app.action.Action;
import com.board.app.action.ActionInfo;
import com.board.app.domain.dao.ReplyDAO;

public class ReplyDeleteOk implements Action {

	@Override
	public ActionInfo execute(HttpServletRequest req, HttpServletResponse resp) throws IOException {
		req.setCharacterEncoding("UTF-8");
		
		new ReplyDAO().delete(Integer.parseInt(req.getParameter("replyNumber")));
		
		return null;
	}

}

 

 

 

7. ReplyFrontController.java

package com.board.app.reply;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.board.app.action.ActionInfo; 

public class ReplyFrontController extends HttpServlet {
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doProcess(req, resp);
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doProcess(req, resp);
	}

	protected void doProcess(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String requestURI = req.getRequestURI();
		String contextPath = req.getContextPath();
		String command = requestURI.substring(contextPath.length());
		
		switch(command) {
		case "/board/ReplyListOk.re":
			new ReplyListOk().execute(req, resp);
			break;
		case "/board/ReplyWriteOk.re":
			new ReplyWriteOk().execute(req, resp);
			break;
		case "/board/ReplyUpdateOk.re":
			new ReplyUpdateOk().execute(req, resp);
			break;
		case "/board/ReplyDeleteOk.re":
			new ReplyDeleteOk().execute(req, resp);
			break;
		}
		
	}
}

 

 

 

 

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

'웹 개발 > JSP' 카테고리의 다른 글

[Web_JSP] 24  (0) 2022.06.12
[Web_JSP] 22  (0) 2022.06.10
[Web_JSP] 21  (0) 2022.06.09
[Web_JSP] 20  (0) 2022.06.08
[Web_JSP] 19  (0) 2022.06.07

'웹 개발/JSP' Related Articles

티스토리툴바