728x90
2일 전 화면 구성에 대해서 테이블 생성과 DTO를 만들었다.
오늘은 화면 구성을 구현하고 다음에 기능을 구현하도록 할 예정이다.
board/content.jsp에 대충 hr태그와 textarea태그를 넣어서 검사를 통해 크기 조정을 해보았다.
추가해야 할 부분은 등록하는 버튼, 작성자, 비밀글 체크박스가 될 것이다. 추가해야 할 부분을 추가해보았다.
<%@ 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="" method="post">
<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">비밀글 <input type="submit" value="작성"></span>
</form>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>
뭔가 그럴싸해보인다. 생각보다 나쁘지 않다고 느껴진다.
다음으로는 댓글 목록이 필요하다. 댓글 목록은 댓글 아래 작성자 내용으로 보이게 하려고 한다. 이는 댓글 목록을 가져와 반복문을 통해 출력하면 된다.
<%@ 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/replyUpdatePro" method="post">
<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">비밀글 <input type="submit" value="작성"></span>
</form>
<hr>
댓글 목록<br>
이곳에 댓글 목록이 나타남. 작성자 - 댓글 내용 순으로
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>
댓글을 작성 → 페이지가 새로고침 → 현재 페이지로 구현하고 싶다. 대부분의 사이트의 경우 ajax로 구현하여 부분만 업데이트 되는 식으로 되어있는 것을 쉽게 확인 할 수 있고, 이 방법은 꽤나 오래된 방법이지 않을까 싶지만 기본부터 다지는 것이 중요하다고 생각되어서 이 방법으로 구현하고 그 후 ajax를 이용해서 구현해 볼 생각이다.
내가 구현하고자하는 방법을 어떻게 구현해야할지 감이 오지 않아 검색을 해보았다. 현재 JSP 페이지에서 댓글을 작성하고, 작성 후 현재 글을 새로 고침하는 기능을 추가하려면 댓글 작성 후 댓글 목록을 포함한 같은 페이지로 리다이렉트해야한다.
즉, 코드로 보자면 먼저 댓글 작성 후 리다이렉트
@PostMapping("/replyUpdatePro")
public String replyUpdatePro(ReplyDTO replyDTO) {
boardService.replyUpdatePro(replyDTO);
return "redirect:/board/content?no=" + reply.getBoardNo(); // 댓글이 작성된 게시글로 리다이렉트
}
다음으로 JSP 페이지에서 댓글 목록 표시
@GetMapping("content")
public String viewPost(BoardDTO boardDTO,ReplyDTO replyDTO, Model model) {
BoardDTO boardDTO = boardService.getBoard(boardDTO);
List<Reply> reply = boardService.getCommentsByPostId(boardDTO);
model.addAttribute("boardDTO", boardDTO);
model.addAttribute("replyDTO", replyDTO);
return "viewPost"; // 게시글 뷰 JSP
}
정리하자면 1. 댓글 작성 후 해당글로 리다이렉트하여 새로 고침된 상태로 보여줌 2. 댓글 목록을 가져와 JSP에서 반복문을 통해 출력.. 막상 이렇게 하려고나니 jQuery작성하는게 조금 복잡하긴하지만 ajax로 구현하는 게 더 편하겠다는 생각이 든다...
다음에는 본격적으로 구현하는 작업을 해 볼 생각이다.
728x90
'organize > 프로젝트' 카테고리의 다른 글
| justBoard14 댓글 구현(4) (0) | 2024.10.15 |
|---|---|
| justBoard13 댓글 구현(3) 데이터 (0) | 2024.10.13 |
| justBoard11 댓글 구현(1) DB (6) | 2024.10.10 |
| justBoard10 마무리 (5) | 2024.09.30 |
| justBoard9 (1) | 2024.09.29 |