위로
아래
글 목록 페이지 테이블 생성
view 폴더에 BoardList.JSP를 만들고 테이블을 생성한다.
테이블 내용은 글 목록의 개수에 따라 달라지므로, 우선 테이블의 열 정보부터 입력한다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글 목록</title>
</head>
<body>
<div id="button">
<button type="button" id="btn" onclick="location.href='jb?command=writeForm'">글쓰기</button>
</div>
<table>
<tr>
<td colspan="6"> <h3>게시판</h3></td>
</tr>
<tr>
<th>순서</th>
<th>제목</th>
<th>작성자</th>
<th>조회수</th>
<th>작성일</th>
<th>IP</th>
</tr>
<!-- 테이블 내용 td -->
</table>
</body>
</html>
Controller 수정
글 목록 내용을 불러오기 위해서는 데이터베이스에서 이때까지 저장했던 데이터를 모두 불러올 필요가 있다.
그러기 위해서 BoardListAction.jsp를 제작했었다.
action/BoardListAction 페이지는 모든 과정이 끝난 후,
게시글 데이터를 포함하고 있는 DTO 객체의 리스트를 articles 속성으로,
리스트의 크기(객체의 개수)를 total 속성으로,
view/BoardList.jsp에 전달하도록 되어 있었다.
따라서, BoardList에 접속하는 사이트는 BoardListAction을 거쳐서 와야한다.
페이지 이동을 담당하는 Controller에서 BoardList에 접속하려는 시도를 BoardListAction으로 돌려준다.
switch(command) {
case "list" : {
page = "action/BoardListAction.jsp";
break;
}
case "writeForm" : {
page = "view/BoardWriteForm.jsp";
break;
default : {
page = "view/Error.jsp";
break;
}
}
글 목록 페이지 태그 라이브러리
게시글이 있을 때와 없을 때를 분리하려고 한다.
그러기 위해서는 태그 라이브러리의 c 태그를 사용해야 한다.
WEB-INF > lib 폴더에 jstl.jar 파일을 위치시키고, 태그라이브러리 중 c와 fn을 import한다.
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:choose>와 <c:when>을 이용한다.
<fn:length()>로 이전 페이지에서 받아온 articles 속성의 길이를 통해 게시글이 있는지 없는지 확인한다.
게시글이 없으면 테이블을 표시하지 않고,
게시글이 있으면 <c:forEach> 반복문을 통해 게시글 개수만큼 테이블을 표시한다.
<c:choose>
<c:when test="${fn:length(articles)==0}">
<table>
<tr><th colspan="6">게시글이 없습니다.</th></tr>
</table>
</c:when>
<c:when test="${fn:length(articles)>0}">
<table>
<tr>
<th>순서</th>
<th>글제목</th>
<th>작성자</th>
<th>조회수</th>
<th>작성일</th>
<th>IP</th>
</tr>
<c:forEach var="article" items="${articles}">
<tr>
<td>${article.rn}</td>
<td>${article.subject}</td>
<td>${article.writer}</td>
<td>${article.readcount}</td>
<td>${article.regdate}</td>
<td>${article.ip}</td>
</tr>
</c:forEach>
</table>
</c:when>
</c:choose>
글 보기 페이지를 연동하기 위해 미리 제목에 <a> 태그를 붙여놓는다.
<a href="jb?command=getContent&bno=${article.bno}">${article.subject}</a>
글쓰기 버튼 생성
표 위쪽으로
div 박스를 만들어 float : right를 주고 글쓰기 버튼을 생성한다.
<div id="div1">
<!-- <a href="jb?command=writeForm">글쓰기</a> -->
<!-- <button onclick="location.href='jb?command=writeForm'">글쓰기</button> -->
<input type="button" onclick="location.href='jb?command=writeForm'" value="글쓰기">
</div>
CSS
@charset "UTF-8";
* {margin : 0; padding : 0;}
body{ width:100%; background-color: #f6f6ee;}
table {
border-collapse:collapse;
width : 70%;
margin : 0 auto;
padding:10px;
border-radius: 25px;
}
table td, th {
border:1px solid #eeeeee;
border-collapse: collapse;
background-color: #ffffff;
padding:6px 10px 6px 10px;
font-weight: 300;
}
th {padding:5px; font-weight: bold;}
#button {
float : right;
margin-top : 20px;
margin-right : 15%;
margin-bottom : 5px;
padding : 3px;
}
.clear {clear: both;}
h3 {text-align : center; padding : 5px;}
a {text-decoration: none; color:black; font-style: none;}
a:hover {text-decoration: none; color:black; font-style: none;}
a:visited {text-decoration: none; color:black; font-style: none;}
a:active {text-decoration: none; color:black; font-style: none;}
게시글이 없을 때
게시글이 있을 때
전체 코드
더보기
<%@ 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="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시글 리스트</title>
<script src="jquery/jquery-3.7.0.min.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<h3>게시글 리스트(전체 게시글 수 : <c:out value="${totalCnt}"/>)</h3>
<div id="div1">
<input type="button" onclick="location.href='jb?command=writeForm'" value="글쓰기">
</div>
<c:choose>
<c:when test="${fn:length(articles)==0}">
<table>
<tr><th colspan="6">게시글이 없습니다.</th></tr>
</table>
</c:when>
<c:when test="${fn:length(articles)>0}">
<table>
<tr>
<th>순서</th>
<th>글제목</th>
<th>작성자</th>
<th>조회수</th>
<th>작성일</th>
<th>IP</th>
</tr>
<c:forEach var="article" items="${articles}">
<tr>
<td>${article.rn}<input type="hidden" name="bno" value="${article.bno}"></td>
<td>
<a href="jb?command=getContent&bno=${article.bno}">${article.subject}</a>
</td>
<td>${article.writer}</td>
<td>${article.readcount}</td>
<td>${article.regdate}</td>
<td>${article.ip}</td>
</tr>
</c:forEach>
</table>
</c:when>
</c:choose>
</body>
</html>@charset "UTF-8";
* {margin : 0; padding : 0;}
body{ width:100%; background-color: #f6f6ee;}
table {
border-collapse:collapse;
width : 70%;
margin : 0 auto;
padding:10px;
border-radius: 25px;
}
table td, th {
border:1px solid #eeeeee;
border-collapse: collapse;
background-color: #ffffff;
padding:6px 10px 6px 10px;
font-weight: 300;
}
th {padding:5px; font-weight: bold;}
#button {
float : right;
margin-top : 20px;
margin-right : 15%;
margin-bottom : 5px;
padding : 3px;
}
.clear {clear: both;}
h3 {text-align : center; padding : 5px;}
a {text-decoration: none; color:black; font-style: none;}
a:hover {text-decoration: none; color:black; font-style: none;}
a:visited {text-decoration: none; color:black; font-style: none;}
a:active {text-decoration: none; color:black; font-style: none;}