진이의 Developer Story

(5) Spring+MyBatis 게시판 만들기 - VIEW 작성 본문

Java/Spring

(5) Spring+MyBatis 게시판 만들기 - VIEW 작성

JIN3260 2016. 1. 20. 14:26

여태까지 작업한 내용의 중간 결과입니다.
그 많은 셋팅과 클래스를 작성했지만 결과물이 고작 이것밖에 안된다니...

하지만 기본 셋팅 이후에 하나씩 추가하는 작업은 그리 어렵지 않습니다 ^^
지금은 리스트를 불러오기만 가능하지만, 글작성, 글보기, 조회수 증가 등등은
기존에 작성했었던 클래스를 약간 수정만 해주면 전부 가능합니다!!

지금은 VIEW를 먼저 작성해봐야 겠지요?
(1) list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<link rel="stylesheet" href="resources/css/style.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js">
<html>
<head>
<title>게시판 리스트</title>
</head>
<body>
	<table class="bbs" border="1" cellspacing="0">
		<caption>게시판 리스트</caption>
		<colgroup>
			<col width="100">
			<col>
			<col width="110">
			<col width="100">
			<col width="80">
		</colgroup>
		<thead>
			<tr>
				<th scope="col">글번호</th>
				<th scope="col">제목</th>
				<th scope="col">글쓴이</th>
				<th scope="col">날짜</th>
				<th scope="col">조회수</th>
			</tr>
		</thead>
		<tbody>
			<c:forEach items="${list }" var="list">
				<tr>
					<td class="idx">${list.idx }</td>
					<td class="title">
						<a href="getBoardView.do?idx=${list.idx }">${list.title }</a>
					</td>
					<td class="name">${list.id }</td>
					<td class="date">${list.date }</td>
					<td class="hit">${list.hit }</td>
				</tr>
			</c:forEach>
		</tbody>
	</table>
</body>
</html>

여기서 여러분이 아셔야 할 내용은 JSTL을 어떻게 사용하는지만 아시면 될듯합니다.
지난번 컨트롤러에서 리턴해준 model 값을 출력해주는 부분인데요.
<c:foreach> 문을 통해서 list를 순회하며 하나의 객체씩 꺼내와서 게시판을 구성해주는 부분입니다.

그리고 내용도 내용이지만, 외모를 담당해주는 스타일시트 또한 중요합니다.
아래는 스타일 시트의 소스코드 내용입니다.

/* 게시판 리스트 목록 */
.bbs, .bbs th, .bbs td {
	border: 0
}

.bbs a {
	color: #383838;
	text-decoration: none
}

.bbs {
	width: 100%;
	border-bottom: 1px solid #999;
	color: #666;
	font-size: 12px;
	table-layout: fixed
}

.bbs caption {
	display: none
}

.bbs th {
	padding: 5px 0 6px;
	border-top: solid 1px #999;
	border-bottom: solid 1px #b2b2b2;
	background-color: #f1f1f4;
	color: #333;
	font-weight: bold;
	line-height: 20px;
	vertical-align: top
}

.bbs td {
	padding: 8px 0 9px;
	border-bottom: solid 1px #d2d2d2;
	text-align: center;
	line-height: 18px;
}

.bbs .date, .bbs .hit .idx {
	padding: 0;
	font-family: Tahoma;
	font-size: 11px;
	line-height: normal
}

.bbs .title {
	text-align: left;
	padding-left: 15px;
	font-size: 13px;
}

.bbs .title .pic, .bbs .title .new {
	margin: 0 0 2px;
	vertical-align: middle
}

.bbs .title a.comment {
	padding: 0;
	background: none;
	color: #f00;
	font-size: 12px;
	font-weight: bold
}

.bbs tr.reply .title a {
	padding-left: 16px;
	background: url(첨부파일/ic_reply.png) 0 1px no-repeat
}
/* //게시판 리스트 목록 */

css 파일을 만든 뒤, 위의 내용을 COPY&PASTE 해주시고, src/main/webapp/resources/css 폴더 안에 넣어주시면 완료입니다~

'Java > Spring' 카테고리의 다른 글

Invocation of destroy method 'close' failed on bean with name 'sqlSessionTemplate'  (0) 2016.01.21
JUnit MyBatis 테스트  (2) 2016.01.20
(4) Spring+MyBatis 게시판 만들기 - 클래스 작성  (12) 2016.01.20
(3) Spring+MyBatis 게시판 만들기 - MyBatis 셋팅  (34) 2016.01.20
(2) Spring+MyBatis 게시판 만들기 - DB 셋팅  (0) 2016.01.20
공유하기 링크
'Java/Spring' Related Articles more
Comments