Spring:11 게시판 리스트 페이징과 검색 기능, 선택 기능 추가-3

1. 페이징 기능 추가하기

1. pagingVO 생성하기

총 레코드 수, 총 페이지 수, 한 페이지당 표시할 레코드 수와 현재 보고 있는 페이지, 시작페이지

package com.mycampus.myappy.vo;

public class PagingVO {

	private int totalRecord;          // (DB)총 레코드 수(DB에 있는)
	private int totalPage;            // (뷰)총 페이지 개수(하단에 나타날 총 개수)
	private int onePageRecord = 5;    // (DB)한 페이지당 표시할 레코드 수
	private int pageNum = 1;          // 현재 보고 있는 페이지
	private int startPage = 1;        // 시작 페이지

	public int getTotalRecord() {
		return totalRecord;
	}
	public void setTotalRecord(int totalRecord) {
		this.totalRecord = totalRecord;
		
		// 총페이지수 
		if(totalRecord%onePageRecord==0) { // 나머지 레코드가 없을 때(나누어떨어질때)
			totalPage = totalRecord/onePageRecord;
		}else { // 나머지 레코드가 있을 떄(나누어 떨어지지 않을 때)
			totalPage = totalRecord/onePageRecord+1;
		}
	}
	public int getTotalPage() {
		return totalPage;
	}
	public void setTotalPage(int totalPage) {
		this.totalPage = totalPage;
	}
	public int getOnePageRecord() {
		return onePageRecord;
	}
	public void setOnePageRecord(int onePageRecord) {
		this.onePageRecord = onePageRecord;
	}
	public int getPageNum() {
		return pageNum;
	}
	public void setPageNum(int pageNum) {
		this.pageNum = pageNum;
	}
	public int getStartPage() {
		return startPage;
	}
	public void setStartPage(int startPage) {
		this.startPage = startPage;
	}
}

예) setTotalRecord

(1) totalRecord가 20개, onePageRecord 5개(임의)
20을 5로 나누면 4로 떨어지기 때문에 totalPage(하단에 나타날 페이지 개수)는 4개가 된다.
(2) totalRecord가 31개, onePageRecord 5개(임의)
31을 5로 나눈면 몫은 6이고, 나누어 떨어지지 않기 때문에 몫인 6+1=7이어서 totalPage는 7개가 된다.

2. Mapper.xml에 쿼리문 작성하기

- 총 레코드 수를 가져온다.
- select count(no) cnt from board

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.mycampus.myappy.dao.BulletinBrdDAO">
	<select id="boardList" resultType="com.mycampus.myappy.vo.BulletinBrdVO">
		select no, subject, userid, views, date_format(writedate, '%m/%d %H:%i') writedate
		from board order by no desc limit ${onePageRecord}
	</select>
    <select id="totalRecord" resultType="int">
		select count(no) cnt from board
	</select>
</mapper>

3. DAO, Service, ServiceImpl에 totalRecord메서드 구현하기

매개변수를 BulletinBrdVO를 PagingVO pVO로 변경한다. 그리고 리턴되는 데이터는 BulletinBrdVO 객체로!

package com.mycampus.myappy.dao;
import com.mycampus.myappy.vo.PagingVO;
public interface BulletinBrdDAO {
	//게시판 리스트 보기
	public List<BulletinBrdVO> boardList(PagingVO pVO); 매개변수를 PagingVO로 변경
	// 총 레코드 수
	public int totalRecord(PagingVO pVO);
}

package com.mycampus.myappy.service;
import com.mycampus.myappy.vo.PagingVO;
public interface BulletinBrdService {
	//게시판 리스트 보기
	public List<BulletinBrdVO> boardList(PagingVO pVO);
	// 총 레코드 수
	public int totalRecord(PagingVO pVO);
}

package com.mycampus.myappy.service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.mycampus.myappy.dao.BulletinBrdDAO;
import com.mycampus.myappy.vo.PagingVO;

@Service
public class BulletinBrdServiceImpl implements BulletinBrdService {

	@Autowired
	BulletinBrdDAO dao;
    
    @Override
	public List<BulletinBrdVO> boardList(PagingVO pVO) {
		return dao.boardList(pVO);
	}

	@Override
	public int totalRecord(PagingVO pVO) {
		return dao.totalRecord(pVO);
	}
}

4. Controller에 기존에 맵핑했던 bulletinBrdList를 수정하기

총 레코드 수를 Service에서 가져와서 PagingVO에 totalRecord로 세팅한다.

	// board/bulletinBrdList 맵핑주소
	@GetMapping("bulletinBrdList")
	public ModelAndView boardList(PagingVO pVO) {
		ModelAndView mav = new ModelAndView();
		
		// 총 레코드 수
		pVO.setTotalRecord(service.totalRecord(pVO));
		
		//DB처리
		mav.addObject("list", service.boardList(pVO));
		mav.addObject("pVO", pVO);
		
		mav.setViewName("board/bulletinBrdList");
		// WEB-INF/views/board/bulletinBrdList.jsp -> servlet-context.xml에서 설정
		return mav;
	}

5. bulletinBrdList.jsp 리스트에 페이징 부분을 넣고 수정하기

중간에 페이지번호는 forEach문으로 생성했다.

<!-- 페이징 -->
<ul class="paging">
	<!-- 이전페이지 -->
	<!-- 현재페이지 == 1와 같을때 그냥 이전 표시, 1보다 크다면 현재페이지-1 -->
	<c:if test="${pVO.pageNum==1}">
		<li>이전</li>
	</c:if>
	<c:if test="${pVO.pageNum>1}">
		<li><a href="/myappy/board/bulletinBrdList?pageNum=${pVO.pageNum-1}">이전</a></li>
	</c:if>
	
	<!-- 페이지 번호 -->                <!-- 1-5, 6-10, 11-15 VO에 있는 숫자가 바뀌면 자동으로 바뀌게 됨 -->              
	<c:forEach var="p" begin="${pVO.startPage}" end="${pVO.startPage+pVO.onePageCount-1}" >
		<!-- 총 페이지 수보다 하단에 표시할 페이지번호가 작거나 같을 때 -->
		<!-- 현재 페이지에 배경색을 칠한다. -->
		<c:if test="${p<=pVO.totalPage}">
			<c:if test="${p==pVO.pageNum}">
				<li style="font-weight:bold">
			</c:if>
			<c:if test="${p!=pVO.pageNum}">
				<li>
			</c:if>
			<a href="/myappy/board/bulletinBrdList?pageNum=${p}">${p}</a>
		</c:if>
	</c:forEach>
		
	<!-- 다음페이지 -->
	<!-- 현재 페이지 == 총페이지와 같을 떄 그냥 다음 표시, 현재 페이지 보다 총페이지가 크면 현재페이지+1 -->
	<c:if test="${pVO.pageNum==pVO.totalPage}">
		<li>다음</li>
	</c:if>
	<c:if test="${pVO.pageNum<pVO.totalPage}">
		<li><a href="/myappy/board/bulletinBrdList?pageNum=${pVO.pageNum+1}">다음</a></li>
	</c:if>
</ul>

/*페이징*/
.paging{
	margin:30px 0;
	height:30px;
}
.paging>li{
	float:left;
	padding-right:30px;
	margin-top:20px;
}

6. 하단에 페이지 번호를 누를 때 넘어가는 것만 구현하면 된다.(DB와 연동)

bltnBrdMapper.xml

쿼리문에서 offset을 이용해 몇 번째 인덱스부터 가져올 것인지 정한다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.mycampus.myappy.dao.BulletinBrdDAO">
	<select id="boardList" resultType="com.mycampus.myappy.vo.BulletinBrdVO">
		select no, subject, userid, views, date_format(writedate, '%m/%d %H:%i') writedate
		from board order by no desc limit ${onePageRecord} offset ${offsetIndex}
	</select>
</mapper>

PagingVO

위에서 사용했던 PagingVO에 offsetIndex를 추가한다.
현재 보고 있는 페이지에 따라서 DB에서 5개씩을 가지고 와야 한다.

package com.mycampus.myappy.vo;

public class PagingVO {

	private int pageNum = 1;          // 현재 보고 있는 페이지
	private int offsetIndex = 0;      // (DB)offset -> 몇 번째 행부터 가져올건지
    
	public void setPageNum(int pageNum) {
		this.pageNum = pageNum;
		//offset의 위치 계산
		setOffsetIndex((pageNum-1)*onePageRecord);
		//페이지 번호의 시작값
		startPage = ((pageNum-1)/onePageRecord*onePageRecord)+1;
	}

	public int getOffsetIndex() {
		return offsetIndex;
	}
	public void setOffsetIndex(int offsetIndex) {
		this.offsetIndex = offsetIndex;
	}
	
}

setOffsetIndex((pageNum-1)*onePageRecord);
만약 현재페이지가 1이면 [0[(처음)부터 가지고 오기 ~
만약 현재페이지가 2이면 [5]6부터 가지고 오기 ~
만약 현재페이지가 3이면 [10]11부터 가지고 오기 ~
startPage = ((pageNum-1)/onePageRecord*onePageRecord)+1;
만약 현재페이지가 5이면 (4/5)*5-1 -> 시작 페이지는 계속 1
만약 현재페이지가 6이면 (5/5)*5+1 -> 시작 페이지는 6으로 변경!
만약 현재페이지가 11이면 (11/5)*5+1 -> 시작 페이지는 11로 변경!

2. 검색 기능 추가하기

1. List페이지에 검색폼을 추가한다.

bulletinBrdList.jsp

	<!-- 검색 -->
	<div>
		<form method="get" action="/myappy/board/bulletinBrdList" id="searchFrm">
			<select name="searchKey">
				<option value="subject">제목</option>
				<option value="content">글내용</option>
				<option value="userid">작성자</option>
			</select> 
			<input type="text" name="searchValue" id="searchValue" /> 
			<input type="submit" value="Search"/>
		</form>
	</div>

2. Mapper.xml에 쿼리문을 작성한다.

검색한 데이터를 DB로 보내서 찾아야한다.

만약 클라이언트가 text input에 내용을 입력하면 searchKey로 구분을 하고, searchValue와 동일한 데이터를 DB에서 가지고 온다.

bltnBrdMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.mycampus.myappy.dao.BulletinBrdDAO">
	<select id="boardList" resultType="com.mycampus.myappy.vo.BulletinBrdVO">
		select no, subject, userid, views, date_format(writedate, '%m/%d %H:%i') writedate
		from board 
		<if test="searchValue!=null">
			where ${searchKey} like '%${searchValue}%'
		</if>
		order by no desc limit ${onePageRecord} offset ${offsetIndex}
	</select>
</mapper>

3. VO에 데이터를 담을 객체를 만든다.

PagingVO에 searchKey와 searchValue의 getter setter를 만든다.

package com.mycampus.myappy.vo;

public class PagingVO {
	
	private String searchKey;
	private String searchValue;
	
	public String getSearchKey() {
		return searchKey;
	}
	public void setSearchKey(String searchKey) {
		this.searchKey = searchKey;
	}
	public String getSearchValue() {
		return searchValue;
	}
	public void setSearchValue(String searchValue) {
		this.searchValue = searchValue;
	}
}

4. 리스트에서 검색했을 때 키에 맞는 데이터를 가져온다.

아무것도 적지 않으면 검색어를 입력하세요 알림이 뜨게 한다.(js로 구현)

만약 검색창에 내용이 있으면 &(앰퍼샌드)로 key와 value를 가져온다.(앰퍼샌드(&)는 서로 다른 데이터 조각들로 분리한다. 서버단 프로그램에게 하나의 이름과 값의 짝이 어디에서 끝나는지 구분해준다.)

<c:if test='${pVO.searchValue!=null}'> &searchKey=${pVO.searchKey} &searchValue=${pVO.searchValue} </c:if>
페이징 한 곳에다가 추가해준다. 페이징이 boardList의 매개변수로 오기 때문

bulletinList.jsp

<script>
	$(function(){
		$("#searchFrm").on(submit, function(){
			if($("#searchValue").val()==''){
				alert("검색어를 입력하세요");
				return false;
			}
		});	
	});
</script>

<!-- 페이징 -->
        <ul class="paging">
		<!-- 이전페이지 -->
		<c:if test="${pVO.pageNum==1}">
			<li>이전</li>
		</c:if>
		<c:if test="${pVO.pageNum>1}">
			<li><a href="/myappy/board/bulletinBrdList?pageNum=${pVO.pageNum-1}
				<c:if test='${pVO.searchValue!=null}'>
				&searchKey=${pVO.searchKey}&searchValue=${pVO.searchValue}
				</c:if>">이전</a></li>
		</c:if>

		<!-- 페이지 번호 -->
		<c:forEach var="p" begin="${pVO.startPage}" end="${pVO.startPage+pVO.onePageRecord-1}">
			<c:if test="${p<=pVO.totalPage}">
				<c:if test="${p==pVO.pageNum}">
					<li style="font-weight: bold">
				</c:if>
				<c:if test="${p!=pVO.pageNum}">
					<li>
				</c:if>
				<a href="/myappy/board/bulletinBrdList?pageNum=${p}
					<c:if test='${pVO.searchValue!=null}'>
					&searchKey=${pVO.searchKey}&searchValue=${pVO.searchValue}
					</c:if>">${p}</a>
			</c:if>
		</c:forEach>

		<!-- 다음페이지 -->
		<c:if test="${pVO.pageNum==pVO.totalPage}">
			<li>다음</li>
		</c:if>
		<c:if test="${pVO.pageNum<pVO.totalPage}">
			<li><a href="/myappy/board/bulletinBrdList?pageNum=${pVO.pageNum+1}
				<c:if test='${pVO.searchValue!=null}'>
					&searchKey=${pVO.searchKey}&searchValue=${pVO.searchValue}
				</c:if>">다음</a></li>
		</c:if>
	</ul>

검색하면 잘 나오지만 하단에 필요 없는 페이지까지 나오게 된다. 이것을 삭제해야 한다.

5. 검색할 때 데이터에 맞는 총 레코드 수를 가져온다.

총 레코드 수를 가져오는 미리 구현했던 totalRecord 메서드를 사용한다.
<if test="searchValue!=null"> where ${searchKey} like '%${searchValue}%' </if> totalRecord에 추가한다.

BltnBrdMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.mycampus.myappy.dao.BulletinBrdDAO">
	<select id="totalRecord" resultType="int">
		select count(no) cnt from board
		<if test="searchValue!=null">
     	            where ${searchKey} like '%${searchValue}%'		
		</if>
	</select>
</mapper>

저작자표시

'멀티캠퍼스 풀스택 과정 > 백엔드' 카테고리의 다른 글

Spring:13 Interceptor(인터셉터) -5 (0)	2022.03.19
Spring:12 게시판 글 수정, 삭제(한 레코드와 여러 레코드) 구현 -4 (0)	2022.03.19
Spring:10 게시판 리스트 글 등록하고 보여주고 조회수증가 -2 (0)	2022.03.18
Spring:9 게시판 리스트생성, DB연결, 글등록폼 생성 -1 (0)	2022.03.18
Spring:8 아이디 중복검사(ajax 이용)-5 (0)	2022.03.18

소소하게 매일

Spring:11 게시판 리스트 페이징과 검색 기능, 선택 기능 추가-3

1. 페이징 기능 추가하기

1. pagingVO 생성하기

2. Mapper.xml에 쿼리문 작성하기

3. DAO, Service, ServiceImpl에 totalRecord메서드 구현하기

매개변수를 BulletinBrdVO를 PagingVO pVO로 변경한다. 그리고 리턴되는 데이터는 BulletinBrdVO 객체로!

4. Controller에 기존에 맵핑했던 bulletinBrdList를 수정하기

5. bulletinBrdList.jsp 리스트에 페이징 부분을 넣고 수정하기

6. 하단에 페이지 번호를 누를 때 넘어가는 것만 구현하면 된다.(DB와 연동)

bltnBrdMapper.xml

PagingVO

2. 검색 기능 추가하기

1. List페이지에 검색폼을 추가한다.

bulletinBrdList.jsp

2. Mapper.xml에 쿼리문을 작성한다.

bltnBrdMapper.xml

3. VO에 데이터를 담을 객체를 만든다.

PagingVO에 searchKey와 searchValue의 getter setter를 만든다.

4. 리스트에서 검색했을 때 키에 맞는 데이터를 가져온다.

bulletinList.jsp

검색하면 잘 나오지만 하단에 필요 없는 페이지까지 나오게 된다. 이것을 삭제해야 한다.

5. 검색할 때 데이터에 맞는 총 레코드 수를 가져온다.

BltnBrdMapper.xml

'멀티캠퍼스 풀스택 과정 > 백엔드' 카테고리의 다른 글

티스토리툴바

Spring:11 게시판 리스트 페이징과 검색 기능, 선택 기능 추가-3

1. 페이징 기능 추가하기

1. pagingVO 생성하기

2. Mapper.xml에 쿼리문 작성하기

3. DAO, Service, ServiceImpl에 totalRecord메서드 구현하기

매개변수를 BulletinBrdVO를 PagingVO pVO로 변경한다. 그리고 리턴되는 데이터는 BulletinBrdVO 객체로!

4. Controller에 기존에 맵핑했던 bulletinBrdList를 수정하기

5. bulletinBrdList.jsp 리스트에 페이징 부분을 넣고 수정하기

6. 하단에 페이지 번호를 누를 때 넘어가는 것만 구현하면 된다.(DB와 연동)

bltnBrdMapper.xml

PagingVO

2. 검색 기능 추가하기

1. List페이지에 검색폼을 추가한다.

bulletinBrdList.jsp

2. Mapper.xml에 쿼리문을 작성한다.

bltnBrdMapper.xml

3. VO에 데이터를 담을 객체를 만든다.

PagingVO에 searchKey와 searchValue의 getter setter를 만든다.

4. 리스트에서 검색했을 때 키에 맞는 데이터를 가져온다.

bulletinList.jsp

검색하면 잘 나오지만 하단에 필요 없는 페이지까지 나오게 된다. 이것을 삭제해야 한다.

5. 검색할 때 데이터에 맞는 총 레코드 수를 가져온다.

BltnBrdMapper.xml

'멀티캠퍼스 풀스택 과정 > 백엔드' 카테고리의 다른 글

관련글

티스토리툴바