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

부트스트랩을 이용한 계층형 게시판 목록 만들기입니다. 로직은 JSP/서블릿 게시판에서 별도로 다루도록 하고, DB에서 데이터가 정상적으로 넘어온다는 가정하에 뷰를 구성합니다. 기존 로그인 화면을 만들었던 웹페이지에 계속 이어서 붙이도록 하겠습니다. 다른 페이지의 뷰 및 로직은 아래 링크를 참조하시면 됩니다.

 

 

[· 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의 배열과 페이징의 범위를 받아옵니다. 컨트롤러를 사용해서 페이지 배분만 해주고 있기 때문에 request 객체에 담아서 보내도록 했습니다. 또한 자바 클래스에서 JSP로 request 객체를 공유하기 위해서는 리다이렉트가 아닌 포워딩 방식을 사용해야 합니다. 리다이렉트는 사용자가 다시 해당 페이지를 요청하는 방식이므로 request 객체는 소멸됩니다.

 

일반 배열 대신 ArrayList와 같은 컬렉션을 쓸 경우, 제네릭 < >을 사용하게 되는데, 이 경우 타입 변환 시 unsafe warning이 계속 발생하게 됩니다. 어노테이션으로 warning을 막아주는 것 외에는 방법이 없기 때문에, 그냥 경고를 없애기 위해 일반 배열로 전환 후 전달합니다. 

 

<!-- 리스트 객체 -->
<%
	BoardDTO[] list = (BoardDTO[]) request.getAttribute("bdList"); // 리스트 정보
	int[] paging = (int[]) request.getAttribute("bdPaging"); // 페이징 정보
%>

 

 

테이블 헤더 부분입니다. 테이블은 먼저 헤더에서 컬럼을 만들어주고 시작합니다. 부트스트랩 홈페이지에서 테이블 양식을 가져와서 수정했습니다. 이쁜 표가 별로 없는데 커스터마이징 템플릿을 사용하면 좀 더 디자인된 테이블 양식을 얻을 수 있을 것 같습니다.

 

컬럼을 만들고 class에 "text-center"를 추가해서 가운데 정렬을 시킨 후 헤드 <thead>를 닫아줍니다. 

 

<table class="table table-hover">
	<thead>
		<tr>
			<th scope="col" class="text-center">제목</th>
			<th scope="col" class="text-center">글쓴이</th>
			<th scope="col" class="text-center">작성일</th>
			<th scope="col" class="text-center">조회수</th>
		</tr>
	</thead>

 

 

---

 

[ 테이블 바디 만들기 - 리스트 출력부분 ]

 

실제 게시물 리스트를 출력할 테이블 바디입니다. 하나의 게시물이 하나의 DTO 객체에 담겨 왔으므로 반복문 안에 담아줍니다. 또한 게시물 제목에는 인덴트(들여쓰기)를 적용해야 하기 때문에, 인덴트 값의 숫자만큼 반복문으로 공백을 주면 됩니다. HTML에서 공백은 "&nbsp"로 주면 된다고 하네요. 

 

또한 게시물에는 해당 게시물 번호로 링크를 걸어줍니다. 해당 게시물을 즐겨찾기할 수 있도록 get방식으로 걸어줬습니다. 대부분의 사이트에서 그렇게 사용하고 있는 것 같습니다. 링크를 걸면 파란색으로 변하는 부분은 text-reset 클래스를 적용해서 없앨 수 있습니다. 

 

표의 컬럼 크기는 <td> 태그 안에 style을 지정해서 해결할 수있습니다. 퍼센테이지를 적용해 비율로 정해줬습니다. 부트스트랩 4.0 버전에서 바뀐 부분이고, 그 미만 버전은 다르게 지정해줘야 한다고 합니다. 

 

• style="width: 10%" (부트스트랩 4.0 미만은 다르게 지정해줘야 함)

	<tbody>

		<%-- 리스트 출력 --%>
		<%
			if (list != null && paging != null) {
				for (int i = 0; i < list.length; i++) {
		%>

		<tr>
			<td style="width: 60%">
				<!-- 게시물 제목, 답글에 대한 인덴트 적용 -->
				<%
					if (list[i].getBdIndent() > 0) {
							for (int j = 0; j < list[i].getBdIndent(); j++) {
				%>
				&nbsp&nbsp&nbsp&nbsp
				<%
					}
				%>
				└ re:&nbsp
				<%
					}
				%>
				<a class="text-reset"
					href="board/requestBdCont?requestBdNum=<%=list[i].getBdNum()%>"
				> <%=list[i].getBdTitle()%></a>
			</td>
			<!-- 작성자, 작성일, 조회수 -->
			<td style="width: 10%" class="text-center"><%=list[i].getBdUserID()%></td>
			<td style="width: 20%" class="text-center"><%=list[i].getBdDate()%></td>
			<td style="width: 10%" class="text-center"><%=list[i].getBdViewCount()%></td>
		</tr>

		<%
			}
		%>

	</tbody>
</table>
<%
	}
%>

 

 

 

---

 

 

[ 페이징 목록 처리 ]

 

기능을 구현한 클래스에서 요청한 페이지에 대해, 출력할 페이지 목록의 범위를 배열로 보내줬으므로 그대로 써서 출력해주면 됩니다. 배열에서 정한 범위만큼 반복문으로 돌리고, 출력되는 글자는 <a> 태그를 이용해 링크를 걸어줍니다. 링크를 누를 때 요청하는 페이지가 다시 파라미터로 들어가야하므로 get 방식으로 요청 데이터를 보내줍니다.

 

<!-- 페이징 목록 처리 -->
<p class="text-center">

	<%
		for (int i = paging[0]; i <= paging[1]; i++) {
	%>

	<a class="text-reset" href="/boardChat?requestedPage=<%=i%>"><%=i%></a>&nbsp&nbsp

	<%
		}
	%>
</p>

 

 

---

 

 

[ 글쓰기 버튼 ]

 

리스트에서 작성하는 글은 새로 쓰는 글이므로, 계층 형성을 위한 정보는 디폴트로 지정해서 보내줍니다. input 태그의 타입을 "hidden"으로 주면 사용자에게는 보이지 않지만 버튼을 눌러 submit 될 때 파라미터로 같이 보내지게 됩니다. 보내진 파라미터는 작성 페이지에 그대로 전달돼서 DB에 입력되도록 합니다.

 

<!-- 새글쓰기 누를 때 -->
<form action="/board/boardWriter" method="post">

	<!-- 새글의 계층 정보 -->
	<input type="hidden" name="bdGroup" value="-1">
	<input type="hidden" name="bdOrder" value="0">
	<input type="hidden" name="bdIndent" value="0">
	<button type="submit" class="btn btn-secondary mb-3">새글쓰기</button>
</form>

 

 

---

 

 

[ 메세지 출력 ]

 

마지막으로 출력해줄 메세지가 생길 경우입니다. 만약 게시물이 하나도 없을 경우 기능 클래스에서 메세지를 담아주고, 메세지가 있을 경우 출력해줍니다. 

 

가운데 정렬을 하기 위해 row를 하나 만들어서 col로 3분할 해준 뒤, 메세지를 출력할 가운데 col을 메세지 내용에 따라 자동으로 크기가 변하도록 했습니다. 

 

• 그리드 col 자동 사이즈 지정 : class="col-md-auto"

<!-- 출력할 메세지가 담겨왔을 경우(게시물이 없을 경우 등) -->
<%
	Object obj = session.getAttribute("bdListMsg");
	if (obj != null) {
		String msg = (String) obj;
%>
<div class="container my-3">
	<div class="row">
		<div class="col"></div>
		<div class="col-md-auto"><%=msg%></div>
		<div class="col"></div>
	</div>
</div>
<%
	}
%>

 

 

 

---

 

 

 

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

 

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

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

<!-- 리스트 객체 -->
<%
	BoardDTO[] list = (BoardDTO[]) request.getAttribute("bdList"); // 리스트 정보
	int[] paging = (int[]) request.getAttribute("bdPaging"); // 페이징 정보
%>

<!-- 테이블 시작 -->
<table class="table table-hover">
	<thead>
		<tr>
			<th scope="col" class="text-center">제목</th>
			<th scope="col" class="text-center">글쓴이</th>
			<th scope="col" class="text-center">작성일</th>
			<th scope="col" class="text-center">조회수</th>
		</tr>
	</thead>
	<tbody>

		<%-- 리스트 출력 --%>
		<%
			if (list != null && paging != null) {
				for (int i = 0; i < list.length; i++) {
		%>

		<tr>
			<td style="width: 60%">
				<!-- 게시물 제목, 답글에 대한 인덴트 적용 -->
				<%
					if (list[i].getBdIndent() > 0) {
							for (int j = 0; j < list[i].getBdIndent(); j++) {
				%>
				&nbsp&nbsp&nbsp&nbsp
				<%
					}
				%>
				└ re:&nbsp
				<%
					}
				%>
				<a class="text-reset"
					href="board/requestBdCont?requestBdNum=<%=list[i].getBdNum()%>"
				> <%=list[i].getBdTitle()%></a>
			</td>
			<!-- 작성자, 작성일, 조회수 -->
			<td style="width: 10%" class="text-center"><%=list[i].getBdUserID()%></td>
			<td style="width: 20%" class="text-center"><%=list[i].getBdDate()%></td>
			<td style="width: 10%" class="text-center"><%=list[i].getBdViewCount()%></td>
		</tr>

		<%
			}
		%>

	</tbody>
</table>
<%
	}
%>

<!-- 페이징 목록 처리 -->
<p class="text-center">

	<%
		for (int i = paging[0]; i <= paging[1]; i++) {
	%>

	<a class="text-reset" href="/boardChat?requestedPage=<%=i%>"><%=i%></a>&nbsp&nbsp

	<%
		}
	%>
</p>


<!-- 새글쓰기 누를 때 -->
<form action="/board/boardWriter" method="post">

	<!-- 새글의 계층 정보 -->
	<input type="hidden" name="bdGroup" value="-1">
	<input type="hidden" name="bdOrder" value="0">
	<input type="hidden" name="bdIndent" value="0">
	<button type="submit" class="btn btn-secondary mb-3">새글쓰기</button>
</form>


<!-- 출력할 메세지가 담겨왔을 경우(게시물이 없을 경우 등) -->
<%
	Object obj = request.getAttribute("bdListMsg");
	if (obj != null) {
		String msg = (String) obj;
%>
<div class="container my-3">
	<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" />