페이지 처리하기 및 detail을 Service를 이용하여 구현하기

1. 페이징 처리하기

검색을 적용한 후에 문제가 생긴 페이징 부분을 해결해보도록 하자.

현재 주소창을 보면 list?p=2를 통해서 2page로 넘어간 것을 볼 수 있다.

현재 총 11개의 데이터가 있는데 10개씩 끊으면 1번 게시물이 2page에 보여야하지만 보이지 않는다.

그 이유는 주소창을 보면 f(field)와 q(query) 파라미터가 전달되지 않았기 때문이다.

이는 키는 있지만 값이 전달되지 않은 것인데 서버 쪽에서는 값이 가지 않았기 때문에

null이 아닌 빈 문자열로 받는다. 따라서 아래와 같이 빈 문자열에 대한 처리를 해주도록 한다.

String field = "title";
if(field_ != null && !field_.equals("")) {
	field = field_;
}
		
String query = "";
if(query_ != null && !query_.equals("")) {
	query = query_;
}
		
int page = 1;
if(page_ != null && !page_.equals("")) {
	page = Integer.parseInt(page_);
}		
		
NoticeService service = new NoticeService();
List<Notice> list = service.getNoticeList(field, query, page);

2페이지로 이동했을 때 번호가 1인 게시글을 확인할 수 있다.

 

2. 현재 페이지 번호 처리 및 하이라이팅 하기

다음으로 아래의 사진과 같이 오른쪽 하단에 있는 현재 페이지 번호를 처리해보도록 하자.

p의 param이 필수가 아니라 옵션이기 때문에 처음에는 p 파라미터가 없어서

null이기 때문에 삼항 연산자 처리를 했다.

p가 null이거나 ""(빈 문자열)일 때 처리를 하기 위해서 EL 연산자 중 empty를 사용했다.

<div class="indexer margin-top align-right">
	<h3 class="hidden">현재 페이지</h3>
	<div><span class="text-orange text-strong">${(empty param.p)?1:param.p }</span> / 1 pages</div>
</div>

2페이지로 이동했을 때 위의 사진과 같이 결과를 확인할 수 있다.

 

그러고나서 중앙 하단에 보면 원하는 페이지로 넘어갈 수 있는 곳이 있다.

지금은 해당 페이지 뿐만 아니라 모든 페이지가 주황색으로 표시되어 있어서

현재 어떤 페이지를 보고 있는 것인지 정확히 알 수 없다.

<ul class="-list- center">
<c:forEach var="i" begin="0" end="4">
	<li><a class="-text- ${(page == (startNum+i))?'orange':'' } bold" href="?p=${startNum+i }&f=${param.f }&q=${param.q }" >${startNum+i }</a></li>
</c:forEach>			
</ul>

page가 현재 반복되는 번호와 같을 때 주황색으로 표시한다.

이때 page는 아래의 코드와 같이 이전에 정의했던 p 파라미터를 말한다.

<c:set var="page" value="${(empty param.p) ?1:param.p}"/>

2페이지일 때 2에 해당하는 부분만 하이라이팅이 된 것을 확인할 수 있다.

 

3. 마지막 페이지 처리하기

이때까지 게시물이 존재하지 않는 페이지도 아래와 같이 들어갈 수 있었다.

이를 해결하기 위해서는 총 게시물 갯수를 알아야 한다.

 

NoticeListController에 총 게시물 갯수를 알 수 있도록 아래의 코드를 추가한다.

int count = service.getNoticeCount(field, query);
req.setAttribute("count", count);

만약에 총 게시물 갯수가 100개라면 페이지당 10개의 게시물이 있을 수 있으므로

100/10 = 10으로 해서 마지막 페이지를 구할 수 있다.

하지만 게시물 갯수가 102개라면 2개의 게시물이 남는다.

이때 Math.ceil() 함수를 사용해서 10.2를 11.0으로 올림할 수 있다.

그러고나서 소숫점 아래를 잘라주기 위해서 JSTL을 사용하면 된다.

 

이를 사용하기 위해서 상단에 태그 라이브러리를 추가해준다.

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

 

fn:substringBefore을 통해서 .를 기준으로 아래를 다 버릴 수 있다.

<c:set var ="lastNum" value="${fn:substringBefore(Math.ceil(count/10), '.')}"/>

 

이렇게 구한 lastNum보다 작거나 같을 때까지만 page 번호가 생길 수 있게 한다.

<c:forEach var="i" begin="0" end="4">
<c:if test="${(startNum+i) <= lastNum }">
	<li><a class="-text- ${(page == (startNum+i))?'orange':'' } bold" href="?p=${startNum+i }&f=${param.f }&q=${param.q }" >${startNum+i }</a></li>
</c:if>
</c:forEach>

마지막 게시물이 존재하는 2페이지까지만 페이지가 보이는 것을 확인할 수 있고

오른쪽 하단에도 1 pages로 표시되는 것이 아니라 마지막 게시물이 있는 페이지로 보이는 것을 확인할 수 있다.

 

 

 

NoticedetailController를 Service를 이용하여 구현하기

Controller에서 데이터를 직접 생성하던 부분을 Service에서 구현한 내용을 사용해서 구현하고자 한다.

이는 사용자를 편리하게 하는 것이 아니라 개발자를 위한 것이라고 할 수 있다.

만약에 여러 사람이 나눠서 개발을 한다고 했을 때 한 사람은 사용자 입출력에 해당하는 부분을 개발할 수 있고,

다른 사람은 서비스에 해당하는 부분을 나눠서 개발할 수 있으므로 편리해진다.

package com.web.controller;

import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.web.entity.Notice;
import com.web.service.NoticeService;

@WebServlet(name="noticeDetailController", urlPatterns="/notice/detail")
public class NoticeDetailController extends HttpServlet {
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		int id = Integer.parseInt(req.getParameter("id"));
		
		NoticeService service = new NoticeService();
		Notice notice = service.getNotice(id);
		req.setAttribute("n", notice);
		
		req.getRequestDispatcher("/WEB-INF/view/notice/detail.jsp").forward(req, resp);
	}
}