이제 스프링 프레임워크 기반으로 게시판 만들기 마지막 단계 View 역활인 jsp파일을 꾸며줄 차례입니다.
초기 제목 (2)번에서 HTML로 뼈대만 잡아줬을 때는 별다른 코드가 들어있지 않아 한꺼번에 몰아서 정리를 했지만 제목 (9)번 부터는 정리할 양이 많은 게시물은 하나씩 따로 잡아서 포스팅하겠습니다.
먼저 Board_List.jsp에서는 게시글 보기, 검색기능, 페이징처리, Ajax기능이 들어가 있습니다. 그 중 페이징 처리가 가장 어려워서 몇 번을 봐도 새로운 느낌이 많이 듭니다. 정리를 하는 이유도 이런 어려운 기능을 구현할때 여러번 반복해서 보기 위함일 수도 있겠네요.
■ Board_List.jsp 전체 소스코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ko"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>게시판 목록</title> <style type="text/css"> #layer1{ position:absolute; padding:5px; filter:alpha(opacity=50); width:250px; height:auto; background-color:white; border:2px #000000 dotted; visibility:hidden; } @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); body { font-family: 'Nanum Gothic', sans-serif; } </style> <script language="javascript" type="text/javascript" src="js/createXMLHttpRequest.js"></script> <script type="text/javascript"> console.log("${page.pagePerBlock}" + ":" + "${page.nowBlock}" + ":" + "${page.nowPage}") function check() { if (document.search.keyWord.value == "") { alert("검색어를 입력하세요."); document.search.keyWord.focus(); return; } document.search.submit(); } function list() { document.list.action = "boardList.action"; document.list.submit(); } function read(value) { document.read.action = "boardView.action"; document.read.seq.value = value; // 해당 게시글 번호 document.read.keyField.value = document.search.keyField.value; document.read.keyWord.value = document.search.keyWord.value; document.read.submit(); } function pagemove(i) { var nowPage = document.pagemove.nowPage.value; document.pagemove.nowPage.value = Number(nowPage) + Number(i); document.pagemove.submit(); } function blockmovef() { document.blockmovef.submit(); } function blockMoveb() { console.log("##" + document.blockmoveb.nowBlock.value); document.blockmoveb.submit(); } /////////////////////////////////////////////////////////////////////////////////// var xmlHttp; var xmlDoc; var message; function contentprev(seq) { var url = "boardAjax.action?seq=" + seq; //미리보기 서블릿 호출 xmlHttp = createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("get", url, true); xmlHttp.send(null); } function handleStateChange() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { xmlDoc = xmlHttp.responseText; document.getElementById("layer1").innerHTML = xmlDoc; } } } function showlayer(id) { if (document.all[id]) { document.all[id].style.visibility = "visible"; } else if (document.layers[id]) { document.layers[id].style.visibility = "visible"; } } function hidelayer(id) { if (document.all[id]) document.all[id].style.visibility = "hidden"; else if (document.layers[id]) document.layers[id].style.visibility = "hidden"; } function movetip() { layer1.style.marginTop = event.y + document.body.scrollTop + 10 +"px"; layer1.style.marginLeft = event.x + document.body.scrollLeft + 10 +"px"; } document.onmousemove = movetip; </script> </head> <body> <div id="layer1">게시물 본문 미리 보기</div> <marquee behavior="alternate" scrolldelay="100" direction="right"> 지훈이의 게시판입니다.</marquee> <form action="boardList.action" name="search" method="post"> <table border=0 width=800 cellpadding=5 cellspacing=0> <tr> <td align=left>▶전체게시물수 : ${page.totalRecord }개 ▶현재 페이지 ( <font color=red> ${page.nowPage+1 } / ${page.totalPage} 페이지</font>) </td> <td align=right valign=top> <select name="keyField" size="1"> <option value="name" <c:if test="${'name'==keyField }"> selected</c:if>> 이름 </option> <option value="title" <c:if test="${'title'==keyField }"> selected</c:if>> 제목 </option> <option value="content" <c:if test="${'content'==keyField }"> selected</c:if>> 내용 </option> </select><input type="text" size="16" name="keyWord" value="${keyWord }"> <input type="button" value="검색" onClick="check()"><input type="hidden" name="page" value="0"></td> </tr> </table> </form> <table class="bbs" width="800" height="200" border="2" bgcolor="D8D8D8"> <colgroup> <col width="50" /> <col width="450" /> <col width="100" /> <col width="100" /> </colgroup> <thead> <tr> <th>번 호</th> <th>제 목</th> <th>작성자</th> <th>작성일</th> <th>조 회</th> </tr> </thead> <tbody> <tr> <c:choose> <c:when test="${empty list }"> 등록된 글이 없습니다. </c:when> <c:otherwise> <c:set var="doneLoop" value="false" /> <c:forEach begin="${page.beginPerPage }" end="${page.beginPerPage + page.numPerPage -1}" var="i"> <c:if test="${not doneLoop }"> <tr> <td align=center>${list[i].seq }</td> <td> <!-- depth --> <c:if test="${list[i].depth != 0 }"> <c:forEach begin="0" end="${list[i].depth}"> </c:forEach> </c:if><a href="javascript:read(${list[i].seq })" onmouseover="contentprev('${list[i].seq}');showlayer('layer1');" onmouseout="hidelayer('layer1');">${list[i].title }</a> </td> <td align="center"><a href="mailto:${list[i].email}">${list[i].name }</a> <td align=center>${list[i].regdate }</td> <td align=center>${list[i].count }</td> </tr> <c:if test="${i+1 == page.totalRecord} }"> <c:set var="doneLoop" value="true" /> </c:if> </c:if> </c:forEach> </c:otherwise> </c:choose> </tbody> <tfoot> </tfoot> </table> <table border=0 width=800 cellpadding=5 cellspacing=0> <tr> <td align="left"><c:if test="${page.totalRecord !=0}">Page→ <c:if test="${page.nowBlock >0 }"> <a href="javascript:blockMoveb()"><font color="red"> 이전 ${page.pagePerBlock }개</font></a> </c:if> <c:set var="doneLoop2" value="false" /> <c:forEach begin="0" end="${page.pagePerBlock-1 }" var="i"> <c:if test="${not doneLoop2 }"> <a href="javascript:pagemove(${i })"> ${(page.nowBlock*page.pagePerBlock)+i+1}</a> <c:if test="${(page.pagePerBlock*page.nowBlock+i+1) == page.totalPage }"> <c:set var="doneLoop2" value="true" /> </c:if> </c:if> </c:forEach> <c:if test="${page.totalBlock > page.nowBlock+1 }"> <a href="javascript:blockmovef()"><font color="red"> 다음 ${page.pagePerBlock }개</font></a> </c:if> </c:if> </td> <td align=right> <a href="boardWrite.action">[글쓰기]</a> <a href ="javascript:list()">[목록으로]</a> </td> </tr> </table> <!-- 히든 정의 --> <form name="read" method="post"> <input type="hidden" name="seq"/><input type="hidden" name="keyField"/><input type="hidden" name="keyWord"/> </form> <form name="pagemove" method="POST" action="boardList.action" > <input type="hidden" name="nowBlock" value="${page.nowBlock}" /> <input type="hidden" name="nowPage" value="${page.nowBlock*page.pagePerBlock}" /> <input type="hidden"name="keyField" value="${keyField }" /> <input type="hidden"name="keyWord" value="${keyWord }" /> </form> <form name="blockmovef" method="get" action="boardList.action"> <input type="hidden" name="nowBlock" value="${page.nowBlock+1 }" /> <input type="hidden" name="nowPage" value="${(page.nowBlock+1)*page.pagePerBlock}" /> <input type="hidden" name="keyField" value="${keyField }" /> <input type="hidden" name="keyWord" value="${keyWord }" /> </form> <form name="blockmoveb" method="POST" action="boardList.action"> <input type="hidden" name="nowBlock" value="${page.nowBlock-1 }" /> <input type="hidden" name="nowPage" value="${(page.nowBlock-1)*page.pagePerBlock}" /> <input type="hidden" name="keyField" value="${keyField }" /> <input type="hidden" name="keyWord" value="${keyWord }" /> </form> <form name="list" method="GET"> <input type="hidden" name="reload" value="true"> </form> </body> </html> |
▲ Board_List.jsp 소스코드
휴 이클립스로 볼땐 몰랐는데 265줄이나 되네요. 하지만 list만 길지 나머지 5개의 jsp파일들은 짧으니 이번에 좀만 참으면 되겠죠... 순서는 자바스크립트, 검색기능, 목록구현, 페이징처리등으로 나눠서 하고 Ajax는 나중에 따로 게시물 하나를 잡아 정리하겠습니다.
■ 자바스크립트 (function)
자바스크립트를 게시판 프로젝트의 기능에 따라 나눌때 여기서 다룰 부분은 function 함수 밖에 없는것 같습니다. 자세한건 자바스크립트 카테고리를 만들어 작성하고 링크를 걸어 보기 편하도록 정리할 예정이에요. function은 주로 무엇을 호출할 때 사용되며, 사용하는 이유는 반복되는 코딩을 줄이기 위함입니다.
1 2 3 4 5 6 7 8 9 10 11 12 | function list() { document.list.action = "boardList.action"; document.list.submit(); } function read(value) { document.read.action = "boardView.action"; document.read.seq.value = value; // 해당 게시글 번호 document.read.keyField.value = document.search.keyField.value; document.read.keyWord.value = document.search.keyWord.value; document.read.submit(); } |
▲ 전체코드 중 40~51 줄에 해당
[1~3줄]
function list( ) → 밑에서 <a href ="javascript:list()">[목록으로]</a> 이 부분을 받아서 BoardList.action으로 submit 명령을 처리합니다. 즉 목록으로 버튼을 누르면 자바스크립트단의 list( )로 올라가죠.
[6~12줄]
function read(value) { } 는 전체 코드 184번째줄에 해당하는 <a href="javascript:read(${list[i].seq })" 이 부분에 해당하는 자바스크립트입니다. 마찬가지로 이 코드를 만나면 자바스크립트단의 read( )단으로 올라가지만 여기서는 게시글을 읽는 부분에 해당하기 때문에 value값을 주어 수행해야될 명령들이 나열되어 있습니다.
게시글 읽기는 아래에서도 하겠지만 for(int i=beginPerPage; i< beginPerPage + numPerPage); i++)로 해당하는 i값의 시퀀스를 찾아 출력하기 때문에 표현하면~~ ${list} i번째의 seq값은 → ${list[i].seq} 로 쓰게 됩니다. 아래 9~10번째 해당하는 코드는 search폼의 키필드와 키워드를 read폼의 키필드와 키워드에 저장합니다.
■ 검색기능 (search)
<form action="boardList.action" name="search" method="post"> <select name="keyField" size="1"> <option value="name" <c:if test="${'name'==keyField }"> selected</c:if>> 이름 </option> <option value="title" <c:if test="${'title'==keyField }"> selected</c:if>> 제목 </option> <option value="content" <c:if test="${'content'==keyField }"> selected</c:if>> 내용 </option> </select> <input type="text" size="16" name="keyWord" value="${keyWord }"> <input type="button" value="검색" onClick="check()"> <input type="hidden" name="page" value="0"></td> </form> |
▲ 전체코드 중 141~146 줄에 해당
해당 코드는 <body> 영역 안에 있는 검색기능의 뼈대 태그입니다. 이름 / 제목 / 내용 으로 3개의 select가 가능하게 하였습니다. 예를 들어 제목을 통해 검색하고 싶다면 option에서 title하나만 골라야 하기 때문에 size="1"이고요. 그리고 keyWord를 입력하고 클릭을 하면 onClick=check()"를 통해 자바스크립트이 check()로 올라갑니다.
①
function check() { if (document.search.keyWord.value == "") { alert("검색어를 입력하세요."); document.search.keyWord.focus(); return; } document.search.submit(); } |
자바스크립트 단의 check ( ) 코드입니다.
만약에 KeyWord 값이 없다면 "검색어를 입력하세요." 알림을 띄우고 포커스를 거기에 고정시키며,
그게 아니고 값이 있으면 폼 이름이 "search"인 폼 액션을 따라가게됩니다.
아까 폼 액션은 "boardList.action" 이였죠.
②
@RequestMapping(value="/boardList.action") public ModelAndView list(@RequestParam(required=false) Integer nowPage,@RequestParam(required=false)Integer nowBlock, @RequestParam(required=false) String keyField, @RequestParam(required=false) String keyWord) { ModelAndView view = new ModelAndView(); → → → List<BoardDto> list = boardService.boardList(keyField, keyWord); PageDto page = null; try{ page = boardService.pagingProc(nowPage, nowBlock, list.size()); } catch(Exception err){ System.out.println("now페이지와 now블럭이 존재하지 않아 0을 대입했습니다."); System.out.println("에러내용은 다음과 같습니다." + err); page = boardService.pagingProc(0, 0, list.size()); } view.addObject("dao", new BoardDaoImpl()); view.addObject("list", list); view.addObject("page",page); view.addObject("keyWord",keyWord); view.addObject("keyField",keyField); view.setViewName("Board_List"); return view; |
그럼 ListController.java의 "/boardList.action"이 수행하여 마지막 view를 리턴하고 처음 Board_List.jsp로 돌아옵니다.
여기서 검색기능의 과정만 경로를 추적해보면 List <BoardDto> list = boardService.boardList (keyField, keyWord);에서 키필드와 키워드값을 list에 저장하게 되니 boardService로 갑니다.
③
@Override public List<BoardDto> boardList(String keyfield, String keyword) { System.out.println("BoardService.BoardList( ) 접속됨"); return boardDao.boardList(keyfield, keyword); } |
그럼 boardService의 코드를 보느냐?? 아닙니다.
기능은 boardServiceImpl.java에 상속후 오버라이드해서 정의 해놓았죠.
이 코드를 보면 리스트는 또 boardDao의 기능을 받네요.
④
@Override public List<BoardDto> boardList(String keyfield, String keyword) { List<BoardDto> result = new ArrayList<BoardDto>(); System.out.println("정상적으로 값이 들어옴"); System.out.println(keyfield + "//" + keyword); result = BoardManager.boardList(keyfield, keyword); System.out.println(result.size()); return result; } |
⑤
public static List<BoardDto> boardList(String keyfield, String keyword){ List<BoardDto> list = null; SqlSession session = sqlMapper.openSession(); if(keyfield != null && keyword != null && keyfield !="" && keyword !=""){ Map<String, String> map = new HashMap<String, String> (); map.put("keyfield" , keyfield); map.put("keyword", keyword); list = session.selectList("boardSearch", map); session.close(); return list; }else { list = session.selectList("boardList"); session.close(); return list; } } |
이 코드는 BoardManager.java 파일의 list 부분입니다.
드디어 검색기능이 들어있는 boardSearch를 만날 수 있네요!!
list = session.selectList("boardSearch",map) 명령어를 만나
⑥
<select id="boardSearch" parameterType="map" resultType="BoardDto"> select * from tbl_board where ${keyfield} like '%${keyword}%' order by pos asc </select> |
BoardMapper.xml에 적혀있는 boardSearch의 SQL문을 실행하고
다시 보드매니저로 돌아와서 list로 리턴시킵니다.
그리고 역순으로 되돌아가서 컨트롤러에서 view를 리턴하고
Board_List.jsp 파일로 가는것이죠.
앞으로 다른 기능도 *.action으로 받으면 검색기능처럼 컨트롤러 갔다가 service → dao 이런 순서를 받고 mybaits로 리소스(DB)를 상호교환하여 dao → service → 컨트롤러 → view 의 순서를 밟게 됩니다. 솔직히 저도 지금 이렇게 설명은 하지만 맨땅에 헤딩으로 아무것도 안보고 다시 만들라고 하면 머리 아파서 못 만들겠네요.
▲ select버튼을 유지하는 화면
아참 <option value="title" <c:if test="${'title'==keyField }"> selected</c:if>> 제목 </option> 이 코드는 만약에 검색을 이름 / 제목 / 내용 중에 제목을 선택하고 검색버튼을 누르게 되면 검색후 선택된 제목버튼으로 유지 시킵니다. 글보다 그림으로 보시는게 바로 이해가 되실거에요.
■ 목록구현
<thead> <tr> <th>번 호</th> <th>제 목</th> <th>작성자</th> <th>작성일</th> <th>조 회</th> </tr> </thead> <tbody> <tr> <c:choose> <c:when test="${empty list }"> 등록된 글이 없습니다. </c:when> <c:otherwise> <c:set var="doneLoop" value="false" /> <c:forEach begin="${page.beginPerPage }" end="${page.beginPerPage + page.numPerPage -1}" var="i"> <c:if test="${not doneLoop }"> <tr> <td align=center>${list[i].seq }</td> <td> <c:if test="${list[i].depth != 0 }"> <c:forEach begin="0" end="${list[i].depth}"> </c:forEach> </c:if><a href="javascript:read(${list[i].seq })" onmouseover="contentprev('${list[i].seq}');showlayer('layer1');" onmouseout="hidelayer('layer1');">${list[i].title }</a> </td> <td align="center"><a href="mailto:${list[i].email}">${list[i].name }</a> <td align=center>${list[i].regdate }</td> <td align=center>${list[i].count }</td> </tr> <c:if test="${i+1 == page.totalRecord} }"> <c:set var="doneLoop" value="true" /> </c:if></c:if> </c:forEach> </c:otherwise> </c:choose> </tbody> |
▲ 전체코드 중 167~198 줄에 해당
필요한 부분만 보기 위해 생략했습니다. HTML의 테이블중 <colgroup> 태그로 <thead>에 번호 / 제목 / 작성자 / 작성일 / 조회 이렇게 5개로 구분을 하고 <tbody>에 각자의 기능을 넣었는데요. 여기서 EL과 JSTL을 정리한 글을 보고 오시면 이해가 조금이라도 도움이 될거라 생각합니다.
① 리스트에 아무 글이 없을때
<c:choose> <c:when test="${empty list }"> 등록된 글이 없습니다. </c:when> |
위 태그를 사용합니다.
② 리스트의 번호/제목/이름/날짜/카운트 표현방법
for(i=보고있는 페이지의 시작번호; i<(시작번호+한페이지의 게시물수) i++ ){ if (doneLoop가 False이면) 번호 → ${List[i]seq} 제목 → javascript:read(${List[i].seq })~~>${List[i].title}</a> 이름 → ${List[i].name} + 이름에 이메일 링크 걸어놓음 날짜 → ${List[i].regdate} 조회수→${List[i].count} } if (i+1이 총게시물수가 같으면){ doneLoop가 True } |
JSTL을 자바구문의 for문으로 쉽게 풀어 써봤습니다. 결국에는 seq가 총 게시물수보다 크지 않으면 루프가 False로 위와 같은 for문으로 각 내용들을 담아내지만, seq가 토탈 게시물보다 많아지면 루프가 True가 되어 빠져나오게 됩니다. 길어보이지만 이렇게 풀어 써놓으니 별거 아니죠?
■ 페이징 처리
<c:if test="${page.totalRecord !=0}">Page→ <c:if test="${page.nowBlock >0 }"> <a href="javascript:blockMoveb()"><font color="red"> 이전 ${page.pagePerBlock }개</font></a> </c:if> <c:set var="doneLoop2" value="false" /> <c:forEach begin="0" end="${page.pagePerBlock-1 }" var="i"> <c:if test="${not doneLoop2 }"> <a href="javascript:pagemove(${i })"> ${(page.nowBlock*page.pagePerBlock)+i+1}</a> <c:if test="${(page.pagePerBlock*page.nowBlock+i+1) == page.totalPage }"> <c:set var="doneLoop2" value="true" /> </c:if> </c:if> </c:forEach> <c:if test="${page.totalBlock > page.nowBlock+1 }"> <a href="javascript:blockmovef()"><font color="red"> 다음 ${page.pagePerBlock }개</font></a> </c:if> </c:if> |
▲ 전체코드 중 205~226 줄에 해당
이제 Board_List.jsp 의 꽃이라 불리는 페이징 처리에 대해서 알아볼 차례입니다. 제가 알고 있는 수준에서 작성한 것이라.. 이 코드보다 더 좋고 간결하고 가벼운 페이징 처리기법도 있을테니 다른 코드도 검색해서 보시길 바랍니다. 페이징 처리를 정리하기 위해 BoardServiceImpl . java의 페이징처리 구문도 가져오겠습니다.
public PageDto pagingProc(int nowPage, int nowBlock, int totalRecord) { int numPerPage = 5; int pagePerBlock = 4; int totalPage = (int)Math.ceil((double)totalRecord / numPerPage); int beginPerPage = nowPage * numPerPage; int totalBlock = (int)Math.ceil((double)totalPage / pagePerBlock); |
▲ BoardServiceImpl.java에서 페이징 처리 구문
① 이미 설정해 놓은 부분
▶ 한 페이지에 담을 게시물 개수 ${page.numPerPage} → 5개로 설정했음.
▶ 한 블럭이 몇개인지 ${pagePerBlock} → 4개로 설정했음 [블럭은 페이지 하단에 1,2,3,4/ 5,6,7,8/ 9,10,11,12 ]
▶ 전체 페이지 ${page.totalRecord} → ( 전체 게시글수 ÷ 한 페이지 담을 게시물 개수 ) 반올림
▶ 페이지 시작 번호 ${beginPerPage} → 현재페이지 × 한 페이지에 담을 게시물 개수
[ 이 부분은 어려워서 한번 짚고 넘어 가겠습니다.
현재 페이지 : 1 한 페이지에 담을 게시물 개수 : 5 → 시작번호는 5
현재 페이지 : 2 한 페이지에 담을 게시물 개수 : 5 → 시작번호는 10
현재 페이지 : 3 한 페이지 담을 게시물 개수 : 5 → 시작번호는 15
그러므로 1 페이지는 1~5, 2 페이지는 6~10을 가지고 있고
시작번호에 1을 더해주면 6이 되어 2페이지가 되고 6~10의 범위를 가집니다. ]
▶ 전체 블럭 ${totalBlock} → ( 전체 페이지 ÷ 한 블럭의 개수 ) 반올림
② Board_List.jsp에서 적용
<form name="blockmoveb" method="POST" action="boardList.action"> <input type="hidden" name="nowBlock" value="${page.nowBlock-1 }" /> <input type="hidden" name="nowPage" value="${(page.nowBlock-1)*page.pagePerBlock}" /> <input type="hidden" name="keyField" value="${keyField }" /> <input type="hidden" name="keyWord" value="${keyWord }" /> |
▲ Board_List.jsp의 blockmoveb에 해당하는 히든 Form
▶ 이전 페이지로 넘기기 → ${ javascript: blockmoveb() } 으로 보내고 자바스크립트에서 히든 폼으로 정보를 전송하여 코드를 가져왔습니다. blockmoveb는 ${page.nowBlock-1} 페이지의 현재블럭-1을 nowBlock의 값을 가지고,(페이지의 현재블럭-1) × 한 블럭당 갯수를 연산한 값을 nowPage로 가집니다.
예를 들어 5페이지에서 이전 페이지로 넘기면 넘겨지는 블럭은 2-1 = 1블럭을 가고, 1 × 4 = 4페이지를 현재 페이지로 이동하게 됩니다.
▶ 다음 페이지로 넘기기 → ${ javascript: blockmovef() }로 move 옆에 b는 back, f는 foward로 이전페이지 이동과 다음 페이지 이동을 구분한 것입니다. 방법은 이전 페이지와 동일하며 히든에서 now Block값과 nowPage값만 달리 주면 됩니다. 따로 그 부분만 가져오면 <input type="hidden" name="nowBlock" value="${page.nowBlock+1 }" /> 로 -1에서 +1로 변경해 주면 되고, <input type="hidden" name="nowPage" value="${(page.nowBlock+1)*page.pagePerBlock}" /> 나우 페이지도 이렇게 부호만 바꿔주면 되겠습니다.
function pagemove(i) { var nowPage = document.pagemove.nowPage.value; document.pagemove.nowPage.value = Number(nowPage) + Number(i); document.pagemove.submit(); } | cs |
▲ Board_List.jsp의 pagemove에 해당하는 자바스크립트
<form name="pagemove" method="POST" action="boardList.action"> <input type="hidden" name="nowBlock" value="${page.nowBlock }" /> <input type="hidden" name="nowPage" value="${(page.nowBlock)*page.pagePerBlock}" /> <input type="hidden" name="keyField" value="${keyField }" /> <input type="hidden" name="keyWord" value="${keyWord }" /> |
▲ Board_List.jsp의 pagemove에 해당하는 히든 Form
▶ 페이지 이동→ " ${ javascript: pagemove( ${i} ) "로 자바스크립트의 pagemove로 이동하여 명령을 수행한 뒤 히든 Form으로 갑니다. 자바스크립트 구문은 nowPage의 값을 문자열로 받아 저장하고 이동시킬 페이지 번호를 i로 정해 더합니다. 실질적으로 여기서 나우페이지는 var = nowpage = pagemove.nowPage.Value의 값을 저장받아 1,2,3 숫자가 아니기 때문에 앞에 Number를 붙여 숫자로 바꿨지만 기준 위치 0으로 봐도 무방하고 i를 더하면 해당 페이지로 넘겨주게 되는거죠.
'프로젝트 > 1.게시판만들기' 카테고리의 다른 글
| 게시판〃(13) 완성!! 출력 화면과 영상 (7) | 2015.12.15 |
|---|---|
| 게시판〃(12) AJAX로 본문 미리보기 구현 (0) | 2015.12.15 |
| 게시판〃(11) 메이븐 프로젝트로 Convert (2) | 2015.12.12 |
| 게시판〃(10) Board_Write / View / Update / Delete / Reply JSP파일 (1) | 2015.12.12 |
| 게시판〃(8) MyBatis로 DB 연동 (8) | 2015.12.07 |
| 게시판〃(7) SQL 데이타베이스 생성 (1) | 2015.12.07 |
| 게시판〃(6) Controller 패키지 작성 (0) | 2015.12.06 |
| 게시판〃(5) board.dao 와 board.service 패키지 (13) | 2015.12.06 |