justBoard14 댓글 구현(4)

organize/프로젝트

justBoard14 댓글 구현(4)

001cloudid 2024. 10. 15. 12:41

728x90

지난번 reply 테이블에 board 테이블의 no를 외래키로 지정했다.

그리고 다음과 같이 추가 수정했다.

content.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>글 읽기</h1>
<table >
<tr><td>글번호</td><td>${boardDTO.no}</td></tr>
<tr><td>글쓴이</td><td>${boardDTO.id}</td></tr>
<tr><td>조회수</td><td>${boardDTO.readcount}</td></tr>
<tr><td>작성일</td><td>${boardDTO.writetime}</td></tr>
<tr><td>글제목</td><td>${boardDTO.subject}</td></tr>
<tr><td>글내용</td><td>${boardDTO.content}</td></tr>
</table>
<div style="display: center">
<c:if test="${!empty sessionScope.id }">
	<c:if test="${sessionScope.id eq boardDTO.id}">
<a href="${pageContext.request.contextPath}/board/update?no=${boardDTO.no}"><input type="button" value="글 수정"></a> <a href="${pageContext.request.contextPath}/board/delete?no=${boardDTO.no}"><input type="button" value="글 삭제"></a>
	</c:if>
</c:if>
<a href="${pageContext.request.contextPath}/board/list"><input type="button" value="글 목록"></a>
</div>
<hr>
댓글<br>
<form action="${pageContext.request.contextPath}/board/replyInsertPro" method="post">
<input type="hidden" name="no" value="${replyDTO.no }">
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br>
<textarea rows="5" cols="30" style="width: 792px; height: 60px" placeholder="내용을 작성해주세요." name="replyContent"></textarea><br>
<span style="float: right;"><input type="checkbox" name="replyHidden" value="true">비밀글 <input type="hidden" name="replyHidden" value="false"><input type="submit" value="작성"></span>
</form>
댓글 목록<br>
<c:forEach var="replyDTO" items="${replyList}">
<tr>
<td>${replyDTO.id}</td><td>${replyDTO.replyContent}</td>
</tr>
</c:forEach>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

BoardController

	@PostMapping("/replyInsertPro")
	public String replyInsertPro(ReplyDTO replyDTO, Model model) {
		System.out.println("BoardController replyInsertPro()");
		boardService.replyInsert(replyDTO);
		return "redirect:/board/content?no="+replyDTO.getNo();
	}
    
	@GetMapping("/content")
	public String content(BoardDTO boardDTO, ReplyDTO replyDTO, Model model) {
		System.out.println("BoardController Content()");
		boardDTO = boardService.getBoard(boardDTO); //글에 대한 정보
		boardService.readCount(boardDTO); //조회수
		
		List<ReplyDTO> replyList = boardService.getReplyList();
		
		model.addAttribute("boardDTO",boardDTO);
		model.addAttribute("replyDTO",replyDTO);
		return "board/content";
	}

BoardService 변화 없음

	public void replyInsert(ReplyDTO replyDTO) {
		System.out.println("BoardService replyInsert()");
//		replyDTO.setNum(boardDAO.getMaxNum()+1); //댓글 번호(PK) 값 설정
		replyDTO.setReplyWriteTime(new Timestamp(System.currentTimeMillis())); //댓글 작성 시간
		boardDAO.replyInsert(replyDTO);
	}

	public List<ReplyDTO> getReplyList() {
		System.out.println("BoardService getReplyList()");
		return boardDAO.getReplyList();
	}

BoardDAO 변화없음

	public void replyInsert(ReplyDTO replyDTO) {
		System.out.println("BoardDAO replyInsert()");
		sqlSession.insert(namespace+".replyInsert", replyDTO);
	}

	public List<ReplyDTO> getReplyList() {
		System.out.println("BoardDAO getReplyList()");
		return sqlSession.selectList(namespace+".getReplyList");
	}

boardMapper

	<insert id="replyInsert">
		insert into reply(num,id,replyContent,replyHidden,replyWriteTime,`no`)
		values(#{num},#{id},#{replyContent},#{replyHidden},#{replyWriteTime},#{no})
	</insert>
	
	<select id="getReplyList" resultType="com.mystory001.domain.ReplyDTO">
		select *
		from reply
		where `no` = #{no}
		order by replyWriteTime desc
	</select>

화면

댓글을 작성하면 내가 원하는 방향으로 된다.

reply 테이블 조회를 했을 때 위는 수정하기 전, 아래는 수정 후이기 때문에 no의 값이 차이가 있다.

제대로 들어갔음에도 content.jsp에서 보이지 않는 것은 문제가 있다. 이 부분부터 수정해보도록 하자.

replyList.toString()을 출력해보니 비어있음을 알 수 있다.

게시글 번호 전달 확인을 위해 게시 글번호를 전달 및 boolean값 설정

BoardController

	@GetMapping("/content")
	public String content(BoardDTO boardDTO, ReplyDTO replyDTO, Model model) {
		System.out.println("BoardController Content()");
		boardDTO = boardService.getBoard(boardDTO); //글에 대한 정보
		boardService.readCount(boardDTO); //조회수
		
	    List<ReplyDTO> replyList = boardService.getReplyList(boardDTO.getNo()); // 게시글 번호를 사용
	    System.out.println(replyList.toString()); // 디버깅을 위한 로그 출력
	    model.addAttribute("boardDTO", boardDTO);
	    model.addAttribute("replyDTO", replyDTO);
	    model.addAttribute("replyList", replyList); // 댓글 리스트 추가
		return "board/content";
	}
    
	@PostMapping("/replyInsertPro")
	public String replyInsertPro(ReplyDTO replyDTO, Model model) {
		System.out.println("BoardController replyInsertPro()");
		boardService.replyInsert(replyDTO);
		return "redirect:/board/content?no="+replyDTO.getNo();
	}

BoardService

	public void replyInsert(ReplyDTO replyDTO) {
		System.out.println("BoardService replyInsert()");
		replyDTO.setReplyHidden(false); //Boolean값으로 설정
		replyDTO.setReplyWriteTime(new Timestamp(System.currentTimeMillis())); //댓글 작성 시간
		boardDAO.replyInsert(replyDTO);
	}

	public List<ReplyDTO> getReplyList(int no) {
		System.out.println("BoardService getReplyList()");
		return boardDAO.getReplyList(no);
	}

BoardDAO

	public void replyInsert(ReplyDTO replyDTO) {
		System.out.println("BoardDAO replyInsert()");
		sqlSession.insert(namespace+".replyInsert", replyDTO);
	}

	public List<ReplyDTO> getReplyList(int no) {
		System.out.println("BoardDAO getReplyList()");
		return sqlSession.selectList(namespace+".getReplyList", no);
	}

boardMapper 변화없음

	<insert id="replyInsert">
		insert into reply(num,id,replyContent,replyHidden,replyWriteTime,`no`)
		values(#{num},#{id},#{replyContent},#{replyHidden},#{replyWriteTime},#{no})
	</insert>
	
	<select id="getReplyList" resultType="com.mystory001.domain.ReplyDTO">
		select *
		from reply
		where `no` = #{no}
		order by replyWriteTime desc
	</select>

content.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>글 읽기</h1>
<table >
<tr><td>글번호</td><td>${boardDTO.no}</td></tr>
<tr><td>글쓴이</td><td>${boardDTO.id}</td></tr>
<tr><td>조회수</td><td>${boardDTO.readcount}</td></tr>
<tr><td>작성일</td><td>${boardDTO.writetime}</td></tr>
<tr><td>글제목</td><td>${boardDTO.subject}</td></tr>
<tr><td>글내용</td><td>${boardDTO.content}</td></tr>
</table>
<div style="display: center">
<c:if test="${!empty sessionScope.id }">
	<c:if test="${sessionScope.id eq boardDTO.id}">
<a href="${pageContext.request.contextPath}/board/update?no=${boardDTO.no}"><input type="button" value="글 수정"></a> <a href="${pageContext.request.contextPath}/board/delete?no=${boardDTO.no}"><input type="button" value="글 삭제"></a>
	</c:if>
</c:if>
<a href="${pageContext.request.contextPath}/board/list"><input type="button" value="글 목록"></a>
</div>
<hr>
댓글<br>
<form action="${pageContext.request.contextPath}/board/replyInsertPro" method="post">
<input type="hidden" name="no" value="${replyDTO.no }">
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br>
<textarea rows="5" cols="30" style="width: 792px; height: 60px" placeholder="내용을 작성해주세요." name="replyContent"></textarea><br>
<span style="float: right;"><input type="checkbox" name="replyHidden" value="true">비밀글 <input type="hidden" name="replyHidden" value="false"><input type="submit" value="작성"></span>
</form>
댓글 목록<br>
<%-- <c:forEach var="replyDTO" items="${replyList}"> --%>
<!--     <tr> -->
<%--         <c:if test="${replyDTO.replyHidden ne 1}"> --%>
<%--             <td>${replyDTO.id}</td><td>${replyDTO.replyContent}</td><td>${replyDTO.replyWriteTime}</td> --%>
<%--         </c:if> --%>
<%--         <c:if test="${replyDTO.replyHidden eq 1}"> --%>
<!--             <td>비밀글입니다.</td> -->
<%--             <c:if test="${sessionScope.id eq replyDTO.id or sessionScope.id eq boardDTO.id}"> --%>
<%--                 <td>${replyDTO.id}</td><td>${replyDTO.replyContent}</td><td>${replyDTO.replyWriteTime}</td> --%>
<%--             </c:if> --%>
<%--         </c:if> --%>
<!--     </tr> -->
<%-- </c:forEach> --%>
<c:if test="${not empty replyList}">
    <c:forEach var="replyDTO" items="${replyList}">
        <tr>
				<c:if test="${replyDTO.replyHidden == false}">
				    <td>작성자 : </td><td>${replyDTO.id}</td>
				    <td>내용 : </td><td>${replyDTO.replyContent}</td>
				    <td>작성시간 : </td><td>${replyDTO.replyWriteTime}</td><br>
				</c:if>
				<c:if test="${replyDTO.replyHidden == true}">
				    <td><b>비밀댓글</b></td>
                <c:if test="${sessionScope.id eq replyDTO.id or sessionScope.id eq boardDTO.id}">
                    <td>작성자 : </td><td>${replyDTO.id}</td>
                    <td>내용 : </td><td>${replyDTO.replyContent}</td>
                    <td>작성시간 : </td><td>${replyDTO.replyWriteTime}</td><br>
                </c:if>
            </c:if>
        </tr>
    </c:forEach>
</c:if>
<c:if test="${empty replyList}">
    <p>댓글이 없습니다.</p>
</c:if>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

로그인을 하지 않았을때

일단 구현하는데 급급해서 정리되지 않은 jstl 코드를 수정하고 위의 그림과 같이 로그인이 되지 않았을 때 글을 작성하지 못하도록 댓글 창을 숨기는 작업을 하도록하자.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 650px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>글 읽기</h1>
<table >
<tr><td>글번호</td><td>${boardDTO.no}</td></tr>
<tr><td>글쓴이</td><td>${boardDTO.id}</td></tr>
<tr><td>조회수</td><td>${boardDTO.readcount}</td></tr>
<tr><td>작성일</td><td>${boardDTO.writetime}</td></tr>
<tr><td>글제목</td><td>${boardDTO.subject}</td></tr>
<tr><td>글내용</td><td>${boardDTO.content}</td></tr>
</table>
<div style="display: center">
<c:if test="${!empty sessionScope.id }">
	<c:if test="${sessionScope.id eq boardDTO.id}">
<a href="${pageContext.request.contextPath}/board/update?no=${boardDTO.no}"><input type="button" value="글 수정"></a> <a href="${pageContext.request.contextPath}/board/delete?no=${boardDTO.no}"><input type="button" value="글 삭제"></a>
	</c:if>
</c:if>
<a href="${pageContext.request.contextPath}/board/list"><input type="button" value="글 목록"></a>
</div>
<hr>
<c:if test="${empty sessionScope.id }">
<p><b>댓글은 회원만 작성 및 확인 할 수 있습니다. 확인을 위해서 회원 가입해주세요.</b></p><br>
</c:if>
<c:if test="${!empty sessionScope.id }">
댓글<br>
<form action="${pageContext.request.contextPath}/board/replyInsertPro" method="post">
<input type="hidden" name="no" value="${replyDTO.no }">
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br>
<textarea rows="5" cols="30" style="width: 792px; height: 60px" placeholder="내용을 작성해주세요." name="replyContent"></textarea><br>
<span style="float: right;"><input type="checkbox" name="replyHidden" value="true">비밀글 <input type="hidden" name="replyHidden" value="false"><input type="submit" value="작성"></span>
</form>
댓글 목록 <sub>비밀 댓글은 굵게 표시됩니다.</sub><br>
<c:if test="${empty replyList }">
작성된 댓글이 없습니다. 
</c:if>
<c:if test="${!empty replyList}">
    <c:forEach var="replyDTO" items="${replyList}">
        <tr>
				<c:if test="${replyDTO.replyHidden == false}">
				    <td>작성자 : </td><td>${replyDTO.id}</td>
				    <td>내용 : </td><td>${replyDTO.replyContent}</td>
				    <td>작성시간 : </td><td>${replyDTO.replyWriteTime}</td><br>
				</c:if>
				<c:if test="${replyDTO.replyHidden == true}">
				    <c:if test="${empty sessionScope.id}">
				    <td><b>권한이 없습니다.</b></td>
				    </c:if>
                <c:if test="${sessionScope.id eq replyDTO.id or sessionScope.id eq boardDTO.id}">
                    <td><b>작성자 : </b></td><td><b>${replyDTO.id}</b></td>
                    <td><b>내용 : </b></td><td><b>${replyDTO.replyContent}</b></td>
                    <td><b>작성시간 : </b></td><td><b>${replyDTO.replyWriteTime}</b></td><br>
                </c:if>
            </c:if>
        </tr>
    </c:forEach>
</c:if>
</c:if>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

댓글 수가 많아지면 화면에 이상하게 나타나서 해당 페이지만 높이를 높였다.

로그인 했을 때

비로그인

작성일이나 댓글 작성 시간에 소수점 시간까지 나타 낼 필요는 없을 것 같다. 또한 보기에도 지저분하다고 느껴진다.

날짜 형식 변경

JSTL fmt로 날짜 형식을 변경해보자. jsp상단에 fmt를 선언하는 것하고 사용하면 된다.

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

날짜 형식에

<fmt:formatDate pattern="yyyy-MM-dd hh:mm:ss" value="${}" />

여기서 주의할 점은 월은 대문자 M(Month), 분은 소문자 m(minute). 분보다 월이 더 큰 개념이라고 외워두고 더 큰 개념이니까 큰 거 → 대문자 이렇게 좀 유치하지만 외워두자

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 650px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>글 읽기</h1>
<table >
<tr><td>글번호</td><td>${boardDTO.no}</td></tr>
<tr><td>글쓴이</td><td>${boardDTO.id}</td></tr>
<tr><td>조회수</td><td>${boardDTO.readcount}</td></tr>
<tr><td>작성일</td><td><fmt:formatDate pattern="yyyy-MM-dd hh:mm:ss" value="${boardDTO.writetime}"/></td></tr>
<tr><td>글제목</td><td>${boardDTO.subject}</td></tr>
<tr><td>글내용</td><td>${boardDTO.content}</td></tr>
</table>
<div style="display: center">
<c:if test="${!empty sessionScope.id }">
	<c:if test="${sessionScope.id eq boardDTO.id}">
<a href="${pageContext.request.contextPath}/board/update?no=${boardDTO.no}"><input type="button" value="글 수정"></a> <a href="${pageContext.request.contextPath}/board/delete?no=${boardDTO.no}"><input type="button" value="글 삭제"></a>
	</c:if>
</c:if>
<a href="${pageContext.request.contextPath}/board/list"><input type="button" value="글 목록"></a>
</div>
<hr>
<c:if test="${empty sessionScope.id }">
<p><b>댓글은 회원만 작성 및 확인 할 수 있습니다. 확인을 위해서 회원 가입해주세요.</b></p><br>
</c:if>
<c:if test="${!empty sessionScope.id }">
댓글<br>
<form action="${pageContext.request.contextPath}/board/replyInsertPro" method="post">
<input type="hidden" name="no" value="${replyDTO.no }">
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br>
<textarea rows="5" cols="30" style="width: 792px; height: 60px" placeholder="내용을 작성해주세요." name="replyContent"></textarea><br>
<span style="float: right;"><input type="checkbox" name="replyHidden" value="true">비밀글 <input type="hidden" name="replyHidden" value="false"><input type="submit" value="작성"></span>
</form>
댓글 목록 <sub>비밀 댓글은 굵게 표시됩니다.</sub><br>
<c:if test="${empty replyList }">
작성된 댓글이 없습니다. 
</c:if>
<c:if test="${!empty replyList}">
    <c:forEach var="replyDTO" items="${replyList}">
        <tr>
				<c:if test="${replyDTO.replyHidden == false}">
				    <td>작성자 : </td><td>${replyDTO.id}</td>
				    <td>내용 : </td><td>${replyDTO.replyContent}</td>
				    <td>작성시간 : </td><td><fmt:formatDate pattern="yyyy-MM-dd hh:mm:ss" value="${replyDTO.replyWriteTime}" /></td><br>
				</c:if>
				<c:if test="${replyDTO.replyHidden == true}">
				    <c:if test="${empty sessionScope.id}">
				    <td><b>권한이 없습니다.</b></td>
				    </c:if>
                <c:if test="${sessionScope.id eq replyDTO.id or sessionScope.id eq boardDTO.id}">
                    <td><b>작성자 : </b></td><td><b>${replyDTO.id}</b></td>
                    <td><b>내용 : </b></td><td><b>${replyDTO.replyContent}</b></td>
                    <td><b>작성시간 : </b></td><td><b><fmt:formatDate pattern="yyyy-MM-dd hh:mm:ss" value="${replyDTO.replyWriteTime}" /></b></td><br>
                </c:if>
            </c:if>
        </tr>
    </c:forEach>
</c:if>
</c:if>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

날짜 포멧을 변경하였고, 추가적으로 다른 회원은 비밀 댓글이 작성되었는지 알 수 없다.

댓글이 많아지면 이렇게 되서 높이를 높였는데 이렇다. 댓글 작성 칸을 줄이고 페이지 처리하면 문제 없을 것 같다만.. 해결방안을 하면서 찾아보도록 해야겠다.

남은 작업은 댓글 수정, 삭제, 페이지 처리

728x90

'organize > 프로젝트' 카테고리의 다른 글

justBoard15 댓글 구현(6) 完 (0)	2024.11.11
justBoard15 댓글 구현(5) 댓글 페이지 처리 (0)	2024.10.20
justBoard13 댓글 구현(3) 데이터 (0)	2024.10.13
justBoard12 댓글 구현(2) 화면 (1)	2024.10.12
justBoard11 댓글 구현(1) DB (6)	2024.10.10

현재글justBoard14 댓글 구현(4)

001cloudid