부트스트랩으로 게시판 만들기_게시물 보기 화면 [3/3]

부트스트랩을 이용한 게시물 내용 출력 화면입니다. 다른 페이지의 뷰 및 로직은 아래 링크를 참조하시면 됩니다.

 

 

 

[· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 게시판 만들기_리스트 화면 [1/3]

[· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 게시판 만들기_글쓰기 화면 [2/3]

[· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 게시판 만들기_게시물 보기 화면 [3/3]

[· JSP & Servlet/- 기본 문법] - MVC 패턴의 게시판 만들기_계층형 게시판 로직 설계 [1/5]

[· JSP & Servlet/- 기본 문법] - MVC 패턴의 게시판 만들기_페이징 처리(오라클DB) [2/5]

[· JSP & Servlet/- 기본 문법] - MVC 패턴의 게시판 만들기_리스트 출력 로직 [3/5]

[· JSP & Servlet/- 기본 문법] - MVC 패턴의 게시판 만들기_글작성 로직 [4/5]

[· JSP & Servlet/- 기본 문법] - MVC 패턴의 게시판 만들기_게시물 보기 로직 [5/5]

 

 

전체 코드는 깃허브에 있습니다. 커밋 시점은 "add board" 입니다. 

https://github.com/codevang/hssweb

 

 

---

 

 

[ 답글 작성 버튼 ]

 

가장 먼저 게시물이 있는지를 확인해야 합니다. DTO객체를 정상적으로 받아오지 못할 경우를 제외하기 위해 조건문을 사용해 true일 경우에만 게시물 출력 로직을 전개합니다.

 

<!-- 게시물 내용  -->
<%
	BoardDTO dto = (BoardDTO) request.getAttribute("boardDTO");
	if (dto != null) {
%>

 

 

가장 윗쪽에 답글 버튼을 달았습니다. 답글 작성 또한 로그인한 사용자만 가능하도록 합니다. 여기서도 그리드의 row를 하나 만들고 col을 두개로 쪼갠 뒤, 오른쪽 col에 버튼 또는 메세지를 출력하도록 했습니다. 출력되는 col은 자동으로 사이즈를 지정하도록 해 최대한 오른쪽에 정렬되도록 합니다. 다른 방법으로 오른쪽 정렬을 시킬 수도 있겠지만 프론트를 잘 모르는 저는 그리드 사용이 제일 편해서 애용하는 편입니다. ㅎㅎ

 

로그인한 사용자

 

로그인 하지 않은 사용자

<!-- 답글 버튼, 로그인한 사용자만 답글쓰기 열어줌 -->
<div class="container my-3">
	<div class="row">
		<div class="col"></div>
		<div class="col-md-auto">
			<%
				if (session.getAttribute("userID") == null) {
			%>

			답글 작성은 로그인이 필요합니다.

			<%-- <% --%>
			<%
				} else {
			%>

			<%-- 답글작성 요청 시 가질 값을 미리 셋팅해서 요청(그룹은 같게, order와 Indent는 1증가) --%>
			<form action="boardWriter" method="post">
				<input type="hidden" name="bdGroup" value=<%=dto.getBdGroup()%>>
				<input type="hidden" name="bdOrder" value=<%=dto.getBdOrder() + 1%>>
				<input type="hidden" name="bdIndent"
					value=<%=dto.getBdIndent() + 1%>
				>
				<button type="submit" class="btn btn-secondary">답글쓰기</button>
			</form>

			<%
				}
			%>
		</div>
	</div>
</div>

 

 

 

---

 

 

[ 제목, 작성자, 조회수, 작성일 출력 ]

 

제목과 내용을 출력하는 폼은 테이블을 사용했습니다. 그리드로 row을 하나 만든 뒤 2줄짜리 테이블을 하나 넣어서 색을 입혀줍니다. 사실 화면 분할이 불필요하면 컨테이너만 하나 만들고 거기에 바로 테이블을 넣어줘도 될 것 같습니다. 테이블은 부트스트랩 홈페이지에 가면 몇 개 없어서 금방 코드를 찾을 수 있습니다.

 

제목을 출력할 테이블의 첫 줄 row는 두 컬럼(col)으로 쪼갠 뒤 왼쪽에는 제목과 작성자, 오른쪽에는 조회수와 작성일을 넣습니다. 테이블 안에서는 class에 text-right, text-center 등을 적용해서 글을 정렬하기가 편리합니다.

 

내용을 출력할 테이블은 col을 하나만 넣습니다. 따로 병합이나 이런 작업을 안하고 두개의 컬럼 밑에 하나의 컬럼만 생성해주면 알아서 한칸으로 인식합니다. 또한 내용은 엔터와 공백 등 모두 그대로 출력돼야 하므로 <pre> 태그 안에 출력해줍니다. 만약 <pre> 태그 없이 출력하게 되면 입력시에 사용했던 엔터 등의 공백들이 그대로 출력되지 않습니다.

 

<!-- 게시물 내용 출력 -->
<div class="container my-1">
	<div class="row">
		<table class="table">
			<thead>
				<tr class="table-active">
					<th scope="col" style="width: 60%"><%=dto.getBdTitle()%><br>
						<%=dto.getBdUserID()%></th>
					<th scope="col" style="width: 40%" class="text-right">조회 : <%=dto.getBdViewCount()%>
						<br> <%=dto.getBdDate()%></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><pre><%=dto.getBdContent()%></pre></td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

 

 

---

 

 

[ 메세지 출력 ]

 

만약 게시물이 하나도 없을 경우 출력해줄 부분입니다. DAO에서 게시물을 검색했을 때 하나도 없었다면 request 객체에 메세지를 담아 전송해주고, 메세지가 있는지 검색해서 출력해줍니다. 컨트롤러에서 리다이렉트가 아닌 포워딩 방식으로 제어권을 넘겨줬으므로, 아직 사용자에게 최종 응답이 가지 않은채로 request 객체가 살아있습니다. 만약 리다이렉트시켜서 다시 찾아오게 만든다면 request 객체 대신 session 등의 객체를 이용해 메세지를 전달해줘야 합니다.

 

역시 중간 정렬과 위아래 여백 등을 조절하기 위해 그리드 row를 하나 생성하고 col을 세조각으로 나눈 뒤, 자동 사이즈 조절 col을 이용해 중간에 출력해주도록 했습니다.

 

<%-- 게시물이 없을 경우 메세지 출력 (없거나 삭제된 게시물) --%>
<%
	} else {
		Object obj = request.getAttribute("bdViewerMsg");
		if (obj != null) {
			String msg = (String) obj;
%>

<div class="container">
	<div class="row">
		<div class="col"></div>
		<div class="col-md-auto"><%=msg%></div>
		<div class="col"></div>
	</div>
</div>

<%
		}
	}
%>

 

 

 

---

 

 

 

[ /board/boardViewer.jsp 전체 코드 ]

 

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

<!-- TOP 레이아웃 -->
<jsp:include page="/layout/topLayout.jspf" flush="false" />

<!-- 게시물 내용  -->
<%
	BoardDTO dto = (BoardDTO) request.getAttribute("boardDTO");
	if (dto != null) {
%>

<!-- 답글 버튼, 로그인한 사용자만 답글쓰기 열어줌 -->
<div class="container my-3">
	<div class="row">
		<div class="col"></div>
		<div class="col-md-auto">
			<%
				if (session.getAttribute("userID") == null) {
			%>

			답글 작성은 로그인이 필요합니다.

			<%-- <% --%>
			<%
				} else {
			%>

			<%-- 답글작성 요청 시 가질 값을 미리 셋팅해서 요청(그룹은 같게, order와 Indent는 1증가) --%>
			<form action="boardWriter" method="post">
				<input type="hidden" name="bdGroup" value=<%=dto.getBdGroup()%>>
				<input type="hidden" name="bdOrder" value=<%=dto.getBdOrder() + 1%>>
				<input type="hidden" name="bdIndent"
					value=<%=dto.getBdIndent() + 1%>
				>
				<button type="submit" class="btn btn-secondary">답글쓰기</button>
			</form>

			<%
				}
			%>
		</div>
	</div>
</div>


<!-- 게시물 내용 출력 -->
<div class="container my-1">
	<div class="row">
		<table class="table">
			<thead>
				<tr class="table-active">
					<th scope="col" style="width: 60%"><%=dto.getBdTitle()%><br>
						<%=dto.getBdUserID()%></th>
					<th scope="col" style="width: 40%" class="text-right">조회 : <%=dto.getBdViewCount()%>
						<br> <%=dto.getBdDate()%></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><pre><%=dto.getBdContent()%></pre></td>
				</tr>
			</tbody>
		</table>
	</div>
</div>


<%-- 게시물이 없을 경우 메세지 출력 (없거나 삭제된 게시물) --%>
<%
	} else {
		Object obj = request.getAttribute("bdViewerMsg");
		if (obj != null) {
			String msg = (String) obj;
%>

<div class="container">
	<div class="row">
		<div class="col"></div>
		<div class="col-md-auto"><%=msg%></div>
		<div class="col"></div>
	</div>
</div>

<%
		}
	}
%>



<!-- Bottom 레이아웃 -->
<jsp:include page="/layout/bottomLayout.jspf" flush="false" />