블로그 댓글쓰기

2020. 6. 12. 17:13

detail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@include file="../include/nav.jsp"%>

<div class="container">

	<button type="button" class="btn btn-light" onclick="back(${param.page})">뒤로가기</button>

	<c:if test="${sessionScope.principal.id == detailDto.boardDto.board.userId}">

		<a href="/blog/board?cmd=update&id=${detailDto.boardDto.board.id}" class="btn btn-warning">수정</a>
		<!-- 하이퍼링크는 get방식만 사용 -->
		<button type="button" class="btn btn-danger" onclick="deleteById(${detailDto.boardDto.board.id})">삭제</button>

	</c:if>


	<br /> <br />


	<h6>
		작성자 : <i>${detailDto.boardDto.username}</i> 조회수 : <i>${detailDto.boardDto.board.readCount}</i>
	</h6>

	<br />

	<h3>${detailDto.boardDto.board.title}</h3>

	<div class="container p-3 my-3 border">${detailDto.boardDto.board.content}</div>

	<hr />
	<!-- 댓글 박스 -->
	<div class="row bootstrap snippets">
		<div class="col-md-12">
			<div class="comment-wrapper">
				<div class="panel panel-info">
					<div class="panel-heading m-2">
						<b>Comment</b>
					</div>
					<div class="panel-body">
						<textarea id="reply__write__form" class="form-control" placeholder="write a comment..." rows="3"></textarea>
						<br>
						<button onclick="replyWrite(${detailDto.boardDto.board.id}, ${sessionScope.principal.id})" type="button" class="btn btn-primary pull-right">댓글쓰기</button>
						<div class="clearfix"></div>
						<hr />
						<!-- 댓글 리스트 시작-->
						<ul id="reply__list" class="media-list">

							<c:forEach var="replyDto" items="${detailDto.replyDtos}">
								<!-- 댓글 아이템 -->
								<li class="media"><img onerror="this.src='/blog/image/userProfile.png'" src="${replyDto.userProfile}" alt="" class="img-circle">
									<div class="media-body">
										<strong class="text-primary">${replyDto.username}</strong>
										<p>
											${replyDto.reply.content} <br /> <br />
										</p>
									</div></li>
							</c:forEach>
						</ul>
						<!-- 댓글 리스트 끝-->
					</div>
				</div>
			</div>

		</div>
	</div>
	<!-- 댓글 박스 끝 -->

</div>

<script>

	function replyWrite(boardId, userId) {
		var data = {
			boardId : boardId,  // 키값은 변수가 안 들어가서 문제 없다
			userId : userId,
			content : $("#reply__write__form").val()
		}
		
		$.ajax({
			
			type: "post",
			url: "/blog/reply?cmd=writeProc",
			data : JSON.stringify(data),
			contentType : "application/json; charset=utf-8",
			dataType: "json"
			
		}).done(function (result) {
			
			$("#reply__list").empty();
			
			// 정상 응답
			// 1. reply__list를 찾아서 내부를 비우기
			// 2. ajax 재호출 findAll()
			// 3. reply__list를 찾아서 내부에 채워주기

			for (var replyDto of result) {
				
				var string = "<li class=\"media\"><img onerror=\"this.src='/blog/image/userProfile.png'\" src=\""+replyDto.userProfile+"\" alt=\"\" class=\"img-circle\">\r\n" + 
				"					<div class=\"media-body\">\r\n" + 
				"					<strong class=\"text-primary\">"+replyDto.username+"</strong>\r\n" + 
				"					<p>\r\n" + 
				"						"+replyDto.reply.content+" <br /> <br />\r\n" + 
				"					</p>\r\n" + 
				"				</div></li>";
				  
				$('#reply__list').append(string);
			
			}
			
// 		    result.forEach(replyDto => {
	    	
//				var string = "<li class=\"media\"><img onerror=\"this.src='/blog/image/userProfile.png'\" src=\""+replyDto.userProfile+"\" alt=\"\" class=\"img-circle\">\r\n" + 
//				"					<div class=\"media-body\">\r\n" + 
//				"					<strong class=\"text-primary\">"+replyDto.username+"</strong>\r\n" + 
//				"					<p>\r\n" + 
//				"						"+replyDto.reply.content+" <br /> <br />\r\n" + 
//				"					</p>\r\n" + 
//				"				</div></li>";
			  
//			$('#reply__list').append(string);
	        
//		    });
			
		}).fail(function (result) {
			
		});
		
		
// 		$.ajax({
// 			type: "post",
// 			url: "/~~/~",
// 			success: function name() {}, 
// 			error : function name() {}
// 		});
		
	}
</script>

<script src="/blog/js/detail.js"></script>

<%@include file="../include/footer.jsp"%>

자바스크립트에 replyWrite함수를 만들어 준다

boardId와 userId를 매개변수로 받아서 ajax로 통신하여 값(댓글배열)을 받아온다.

결과가 정상이면 댓글들을 모두 지우고

댓글배열을 통해 다시 댓글들을 생성해준다.

ReplyController

package com.cos.blog.controller;

import java.io.IOException;

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.cos.blog.action.Action;
import com.cos.blog.action.reply.ReplyWriteProcAction;


@WebServlet("/reply")
public class ReplyController extends HttpServlet {
	private final static String TAG = "ReplyController : ";
	private static final long serialVersionUID = 1L;
       
    public ReplyController() {
        super();
    }
    

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doProcess(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doProcess(request, response);
	}
	
	protected void doProcess(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// http://localhost:8000/blog/user?cmd=join
		String cmd = request.getParameter("cmd");
		System.out.println(TAG+"router : "+cmd);
		Action action = router(cmd);
		action.execute(request, response);
	}
	
	public Action router(String cmd) {
		if(cmd.equals("writeProc")) {
			return new ReplyWriteProcAction();
		}
		return null;
	}
	

}

ReplyWriteProcAction

package com.cos.blog.action.reply;

import java.io.BufferedReader;
import java.io.IOException;
import java.util.List;

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

import com.cos.blog.action.Action;
import com.cos.blog.dto.ReplyResponseDto;
import com.cos.blog.model.Reply;
import com.cos.blog.repository.ReplyRepository;
import com.cos.blog.util.Script;
import com.google.gson.Gson;

public class ReplyWriteProcAction implements Action{

	@Override
	public void execute(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		BufferedReader br = request.getReader();
		StringBuffer sb = new StringBuffer();
		String input = null;
		
		while ((input = br.readLine()) != null) {
			sb.append(input);
		}
		
		System.out.println(sb.toString());
		
		Gson gson = new Gson();
		Reply reply = gson.fromJson(sb.toString(), Reply.class);
		
		ReplyRepository replyRepository = ReplyRepository.getInstance();
		
		int result = replyRepository.save(reply);
		
//		Script.outText(Integer.toString(result), response);
		if(result == 1) {
			List<ReplyResponseDto> replyDtos = replyRepository.findAll(reply.getBoardId());
			
			Script.outJson(gson.toJson(replyDtos), response);
			
		} else {
			Script.back("댓글 달기에 실패하였습니다", response);
		}
		
		// ReplyRepository 연결 - save(reply)
		// save 성공하면 1, 실패하면 0, -1
		// Script.outText() 응답
		
	}

}

스트링빌더나 스트링버퍼를 사용하여 ajax에서 온 데이터를 조합한다

gson으로 json데이터를 자바객체로 만든다

데이터베이스에 댓글을 저장하고 결과값을 리턴받는다

결과값이 성공이면 댓글들을 새로받아와서 json으로 만든 뒤 ajax에게 돌려보내준다

ReplyRepository.java

package com.cos.blog.repository;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.cos.blog.db.DBConn;
import com.cos.blog.dto.ReplyResponseDto;
import com.cos.blog.model.Board;
import com.cos.blog.model.Reply;
import com.cos.blog.model.Users;

public class ReplyRepository {
	private static final String TAG = "ReplyRepository : "; // TAG 생성 (오류 발견시 용이)
	private static ReplyRepository instance = new ReplyRepository();

	private ReplyRepository() {
	}

	public static ReplyRepository getInstance() {
		return instance;
	}

	private Connection conn = null;
	private PreparedStatement pstmt = null;
	private ResultSet rs = null;

	// 글쓰기
	public int save(Reply reply) { // object 받기(안에 내용 다 받아야 하니까)
		final String SQL = "INSERT INTO reply(id, userid, boardid, content, createDate) "
				+ "VALUES(REPLY_SEQ.nextval,?,?,?,sysdate)";
		try {
			conn = DBConn.getConnection(); // DB에 연결
			pstmt = conn.prepareStatement(SQL);
			pstmt.setInt(1, reply.getUserId());
			pstmt.setInt(2, reply.getBoardId());
			pstmt.setString(3, reply.getContent());
			// 물음표 완성하기
			return pstmt.executeUpdate();
		} catch (SQLException e) {
			e.printStackTrace();
			System.out.println(TAG + "save : " + e.getMessage());
		} finally {
			DBConn.close(conn, pstmt, rs);
		}
		return -1; // 실패시
	}

	// 회원정보 수정
	public int update(Board board) { // object 받기(안에 내용 다 받아야 하니까)
		final String SQL = "";
		try {
			conn = DBConn.getConnection(); // DB에 연결
			pstmt = conn.prepareStatement(SQL);
			// 물음표 완성하기
			return pstmt.executeUpdate();
		} catch (SQLException e) {
			e.printStackTrace();
			System.out.println(TAG + "Update : " + e.getMessage());
		} finally {
			DBConn.close(conn, pstmt, rs);
		}
		return -1; // 실패시
	}

	
	// 회원정보 삭제
	public int deleteById(int id) { // object 받기(안에 내용 다 받아야 하니까)
		final String SQL = "";
		try {
			conn = DBConn.getConnection(); // DB에 연결
			pstmt = conn.prepareStatement(SQL);
			// 물음표 완성하기
			return pstmt.executeUpdate();
		} catch (SQLException e) {
			e.printStackTrace();
			System.out.println(TAG + "Delete : " + e.getMessage());
		} finally {
			DBConn.close(conn, pstmt, rs);
		}
		return -1; // 실패시
	}

	
	public List<ReplyResponseDto> findAll(int boardId) {

		StringBuffer sb = new StringBuffer();
		sb.append("SELECT r.id, r.userid, r.boardId, r.content, r.createDate, u.username, u.userProfile ");
		sb.append("FROM reply r INNER JOIN users u ");
		sb.append("ON r.userid = u.id ");
		sb.append("WHERE boardId = ? ");
		sb.append("ORDER BY r.id DESC ");

		final String SQL = sb.toString();
		List<ReplyResponseDto> replyDtos = new ArrayList<>();

		try {
			conn = DBConn.getConnection();
			pstmt = conn.prepareStatement(SQL);
			pstmt.setInt(1, boardId);
			rs = pstmt.executeQuery();

			while (rs.next()) {

				Reply reply = Reply.builder()
						.id(rs.getInt(1))
						.userId(rs.getInt(2))
						.boardId(rs.getInt(3))
						.content(rs.getString(4))
						.createDate(rs.getTimestamp(5))
						.build();

				ReplyResponseDto replyDto = ReplyResponseDto.builder().reply(reply).username(rs.getString(6))
						.userProfile(rs.getString(7)).build();

				replyDtos.add(replyDto);

			}

			return replyDtos;
		} catch (SQLException e) {
			e.printStackTrace();
			System.out.println(TAG + "findAll(boardId) : " + e.getMessage());
		} finally {
			DBConn.close(conn, pstmt, rs);
		}
		return null; // 실패시
	}
	

	// 회원정보 다 찾기
	public List<Reply> findAll() { // object 받기(안에 내용 다 받아야 하니까)
		final String SQL = "";
		List<Reply> replys = new ArrayList<>();
		try {
			conn = DBConn.getConnection(); // DB에 연결
			pstmt = conn.prepareStatement(SQL);
			// 물음표 완성하기

			// while 돌려서 rs -> java오브젝트에 집어넣기
			return replys;
		} catch (SQLException e) {
			e.printStackTrace();
			System.out.println(TAG + "findAll : " + e.getMessage());
		} finally {
			DBConn.close(conn, pstmt, rs);
		}
		return null; // 실패시
	}

	// 회원정보 한 건 찾기
	public Reply findById(int id) { // object 받기(안에 내용 다 받아야 하니까)
		final String SQL = "";
		Reply reply = new Reply();
		try {
			conn = DBConn.getConnection(); // DB에 연결
			pstmt = conn.prepareStatement(SQL);
			// 물음표 완성하기

			// if 돌려서 rs -> java오브젝트에 집어넣기
			return reply;
		} catch (SQLException e) {
			e.printStackTrace();
			System.out.println(TAG + "findById : " + e.getMessage());
		} finally {
			DBConn.close(conn, pstmt, rs);
		}
		return null; // 실패시
	}

}

댓글 저장

댓글 xss 공격 막기

결과

'Web > Jsp' 카테고리의 다른 글

블로그 댓글 지우기 (0)	2020.06.15
get / post 방식 (0)	2020.06.12
블로그 댓글보기 (0)	2020.06.12
사진 업로드 (0)	2020.06.11
자바스크립트 on 이벤트 (0)	2020.06.11

Jaybon 의 지식창고

블로그 댓글쓰기

'Web > Jsp' 카테고리의 다른 글

+ Recent posts

티스토리툴바