STUDY/programing

JSP 기초 : 게시판 만들기 7. 글 목록 및 뷰페이지

NightOwl 2018. 10. 24. 12:22
728x90

이전 글 보기 : 

2018/10/23 - [ 컴알못/Web] - JSP 기초 : 게시판 만들기 6. 글 등록 기능



동빈나님의 JSP 게시판 만들기 강의(자바 빈즈를 사용)가 이제 거의 끝나간다.




1. DB에서 글 목록 가져오기


DB에서 글 목록 가져오는 소스코드는 BbsDAO.java에

리스트에 담아 반환해주는 ArrayList<Bbs> 함수 생성




public ArrayList<Bbs> getList(int pageNumber){ 

String SQL = "SELECT * FROM BBS WHERE bbsID < ? bbsAvailable = 1 ORDER BY bbsID DESC LIMIT 10";

ArrayList<Bbs> list = new ArrayList<Bbs>();

try {

PreparedStatement pstmt = conn.prepareStatement(SQL);

pstmt.setInt(1, getNext() - (pageNumber -1) * 10);

rs = pstmt.executeQuery();

while (rs.next()) {

Bbs bbs = new Bbs();

bbs.setBbsID(rs.getInt(1));

bbs.setBbsTitle(rs.getString(2));

bbs.setUserID(rs.getString(3));

bbs.setBbsDate(rs.getString(4));

bbs.setBbsContent(rs.getString(5));

bbs.setBbsAvailable(rs.getInt(6));

list.add(bbs);

}

} catch (Exception e) {

e.printStackTrace();

}

return list; 

}


 




 2. 페이징 처리를 위한 nextpage 추가


BbsDAO.java에 boolean 함수 추가




//10 단위 페이징 처리를 위한 함수

public boolean nextPage (int pageNumber) {

String SQL = "SELECT * FROM BBS WHERE bbsID < ? bbsAvailable = 1 ORDER BY bbsID DESC LIMIT 10";

ArrayList<Bbs> list = new ArrayList<Bbs>();

try {

PreparedStatement pstmt = conn.prepareStatement(SQL);

pstmt.setInt(1, getNext() - (pageNumber -1) * 10);

rs = pstmt.executeQuery();

if (rs.next()) {

return true;

}

} catch (Exception e) {

e.printStackTrace();

}

return false; 

}


 




3. 페이지 넘김 버튼 추가


bbs.jsp



<%@page import="javax.security.auth.callback.ConfirmationCallback"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ page import="java.io.PrintWriter"%>

<%@ page import="bbs.BbsDAO"%>

<%@ page import="bbs.Bbs"%>

<%@ page import="java.util.ArrayList"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- 뷰포트 -->

<meta name="viewport" content="width=device-width" initial-scale="1">

<!-- 스타일시트 참조  -->

<link rel="stylesheet" href="css/bootstrap.css">

<title>jsp 게시판 웹사이트</title>

<style type="text/css">

a, a:hover {

color: #000000;

text-decoration: none;

}

</style>

</head>

<body>

<%

//로긴한사람이라면 userID라는 변수에 해당 아이디가 담기고 그렇지 않으면 null값

String userID = null;

if (session.getAttribute("userID") != null) {

userID = (String) session.getAttribute("userID");

}

int pageNumber = 1; //기본 페이지 넘버

//페이지넘버값이 있을때

if (request.getParameter("pageNumber") != null) {

pageNumber = Integer.parseInt(request.getParameter("pageNumber"));

}

%>

<!-- 네비게이션  -->

<nav class="navbar navbar-default">

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed"

data-toggle="collapse" data-target="bs-example-navbar-collapse-1"

aria-expaned="false">

<span class="icon-bar"></span> <span class="icon-bar"></span> <span

class="icon-bar"></span>

</button>

<a class="navbar-brand" href="main.jsp">JSP 게시판</a>

</div>

<div class="collapse navbar-collapse"

id="#bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

<li><a href="main.jsp">메인</a></li>

<li class="active"><a href="bbs.jsp">게시판</a></li>

</ul>

<%

//라긴안된경우

if (userID == null) {

%>

<ul class="nav navbar-nav navbar-right">

<li class="dropdown"><a href="#" class="dropdown-toggle"

data-toggle="dropdown" role="button" aria-haspopup="true"

aria-expanded="false">접속하기<span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="login.jsp">로그인</a></li>

<li><a href="join.jsp">회원가입</a></li>

</ul></li>

</ul>

<%

} else {

%>

<ul class="nav navbar-nav navbar-right">

<li class="dropdown"><a href="#" class="dropdown-toggle"

data-toggle="dropdown" role="button" aria-haspopup="true"

aria-expanded="false">회원관리<span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="logoutAction.jsp">로그아웃</a></li>

</ul></li>

</ul>

<%

}

%>

</div>

</nav>

<!-- 게시판 -->

<div class="container">

<div class="row">

<table class="table table-striped"

style="text-align: center; border: 1px solid #dddddd">

<thead>

<tr>

<th style="background-color: #eeeeee; text-align: center;">번호</th>

<th style="background-color: #eeeeee; text-align: center;">제목</th>

<th style="background-color: #eeeeee; text-align: center;">작성자</th>

<th style="background-color: #eeeeee; text-align: center;">작성일</th>

</tr>

</thead>

<tbody>

<%

BbsDAO bbsDAO = new BbsDAO();

ArrayList<Bbs> list = bbsDAO.getList(pageNumber);

for (int i = 0; i < list.size(); i++) {

%>

<tr>

<td><%=list.get(i).getBbsID()%></td>

<td><a href="view.jsp?bbsID=<%=list.get(i).getBbsID()%>"><%=list.get(i).getBbsTitle()%></a></td>

<td><%=list.get(i).getUserID()%></td>

<td><%=list.get(i).getBbsDate().substring(0, 11) + list.get(i).getBbsDate().substring(11, 13) + "시"

+ list.get(i).getBbsDate().substring(14, 16) + "분"%></td>

</tr>

<%

}

%>

</tbody>

</table>

<!-- 페이지 넘기기 -->

<%

if (pageNumber != 1) {

%>

<a href="bbs.jsp?pageNumber=<%=pageNumber - 1%>"

class="btn btn-success btn-arrow-left">이전</a>

<%

}

if (bbsDAO.nextPage(pageNumber)) {

%>

<a href="bbs.jsp?pageNumber=<%=pageNumber + 1%>"

class="btn btn-success btn-arrow-left">다음</a>

<%

}

%>

<!-- 회원만넘어가도록 -->

<%

//if logined userID라는 변수에 해당 아이디가 담기고 if not null

if (session.getAttribute("userID") != null) {

%>

<a href="write.jsp" class="btn btn-primary pull-right">글쓰기</a>

<%

} else {

%>

<button class="btn btn-primary pull-right"

onclick="if(confirm('로그인 하세요'))location.href='login.jsp';"

type="button">글쓰기</button>

<%

}

%>

</div>

</div>

<!-- 애니매이션 담당 JQUERY -->

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<!-- 부트스트랩 JS  -->

<script src="js/bootstrap.js"></script>

</body>

</html>


 



4. View 화면 만들기


BbsDAO.java에 글 내용 불러오는 내용 함수 추가



public Bbs getBbs(int bbsID) {

String SQL = "SELECT * FROM BBS WHERE bbsID = ?";

try {

PreparedStatement pstmt = conn.prepareStatement(SQL);

pstmt.setInt(1, bbsID);

rs = pstmt.executeQuery();

if (rs.next()) {

Bbs bbs = new Bbs();

bbs.setBbsID(rs.getInt(1));

bbs.setBbsTitle(rs.getString(2));

bbs.setUserID(rs.getString(3));

bbs.setBbsDate(rs.getString(4));

bbs.setBbsContent(rs.getString(5));

bbs.setBbsAvailable(rs.getInt(6));


return bbs;

}

} catch (Exception e) {

e.printStackTrace();

}

return null;


}


 




뷰 페이지 디자인 및

userID가 본인과 같을시 수정 삭제 버튼 추가


 view.jsp


<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ page import="java.io.PrintWriter"%>

<%@ page import="bbs.Bbs"%>

<%@ page import="bbs.BbsDAO"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- 뷰포트 -->

<meta name="viewport" content="width=device-width" initial-scale="1">

<!-- 스타일시트 참조  -->

<link rel="stylesheet" href="css/bootstrap.css">

<title>jsp 게시판 웹사이트</title>

</head>

<body>

<%

//로긴한사람이라면 userID라는 변수에 해당 아이디가 담기고 그렇지 않으면 null값

String userID = null;

if (session.getAttribute("userID") != null) {

userID = (String) session.getAttribute("userID");

}

int bbsID = 0;

if (request.getParameter("bbsID") != null) {

bbsID = Integer.parseInt(request.getParameter("bbsID"));

}

if (bbsID == 0) {

PrintWriter script = response.getWriter();

script.println("<script>");

script.println("alert('유효하지 않은 글 입니다.')");

script.println("location.href = 'bbs.jsp'");

script.println("</script>");

}

Bbs bbs = new BbsDAO().getBbs(bbsID);

%>



<!-- 네비게이션  -->

<nav class="navbar navbar-default">

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed"

data-toggle="collapse" data-target="bs-example-navbar-collapse-1"

aria-expaned="false">

<span class="icon-bar"></span> <span class="icon-bar"></span> <span

class="icon-bar"></span>

</button>

<a class="navbar-brand" href="main.jsp">JSP 게시판</a>

</div>

<div class="collapse navbar-collapse"

id="#bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

<li><a href="main.jsp">메인</a></li>

<li class="active"><a href="bbs.jsp">게시판</a></li>

</ul>



<%

//라긴안된경우

if (userID == null) {

%>

<ul class="nav navbar-nav navbar-right">

<li class="dropdown"><a href="#" class="dropdown-toggle"

data-toggle="dropdown" role="button" aria-haspopup="true"

aria-expanded="false">접속하기<span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="login.jsp">로그인</a></li>

<li><a href="join.jsp">회원가입</a></li>

</ul></li>

</ul>

<%

} else {

%>

<ul class="nav navbar-nav navbar-right">

<li class="dropdown"><a href="#" class="dropdown-toggle"

data-toggle="dropdown" role="button" aria-haspopup="true"

aria-expanded="false">회원관리<span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="logoutAction.jsp">로그아웃</a></li>

</ul></li>

</ul>

<%

}

%>

</div>

</nav>

<!-- 게시판 -->

<div class="container">

<div class="row">

<table class="table table-striped"

style="text-align: center; border: 1px solid #dddddd">

<thead>

<tr>

<th colspan="3"

style="background-color: #eeeeee; text-align: center;">글 보기 </th>

</tr>

</thead>

<tbody>

<tr>

<td style="width: 20%;"> 글 제목 </td>

<td colspan="2"><%= bbs.getBbsTitle() %></td>

</tr>

<tr>

<td>작성자</td>

<td colspan="2"><%= bbs.getUserID() %></td>

</tr>

<tr>

<td>작성일</td>

<td colspan="2"><%= bbs.getBbsDate().substring(0, 11) + bbs.getBbsDate().substring(11, 13) + "시"

+ bbs.getBbsDate().substring(14, 16) + "분"%></td>

</tr>

<tr>

<td>내용</td>

<td colspan="2" style="min-height: 200px; text-align: left;"><%= bbs.getBbsContent() %></td>

</tr>

</tbody>

</table>

<a href = "bbs.jsp" class="btn btn-primary">목록</a>

<%

//글작성자 본인일시 수정 삭제 가능 

if(userID != null && userID.equals(bbs.getUserID())){

%>

<a href="update.jsp?bbsID=<%= bbsID %>" class="btn btn-primary">수정</a>

<a href="delete.jsp?bbsID=<%= bbsID %>" class="btn btn-primary">삭제</a>

<%

}

%>

</div>

</div>





<!-- 애니매이션 담당 JQUERY -->

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<!-- 부트스트랩 JS  -->

<script src="js/bootstrap.js"></script>


</body>

</html>


 







특수문자 및 공백 출력시키기

글 제목과 글 내용에 .replaceAll 추가해준다.


<td>내용</td>

<td colspan="2" style="min-height: 200px; text-align: left;"><%= bbs.getBbsContent().replaceAll(" ", "&nbsp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\n", "<br/>") %>

</td>

 





728x90