[Spring Boot 게시판] 17일차

1. 페이지네이션(daisy ui)을 활용하여 페이지메뉴 구현

    	 <div class="page-menu mt-3 flex justify-center">
             <div class="btn-group">
                 <c:forEach begin="1" end="20" var="i">
                     <a class="btn btn-md ${param.page == i ? 'btn-active' : '' }" href="?page=${i }">${i }</a>
                 </c:forEach>
			 </div>				
		 </div>

• ${param.page == i ? 'btn-active' : '' } : 삼항연산자를 사용하여 현재 페이지버튼에 'btn-active' 부여

2. 페이지메뉴의 크기를 게시물 갯수에맞게 동적으로 구현

1) ArticleController showList()

    	int pagesCount = (int)Math.ceil((double)articlesCount/itemsInAPage);
		model.addAttribute("articles", articles);
		model.addAttribute("board", board);
		model.addAttribute("articlesCount", articlesCount);
		model.addAttribute("page", page);
		model.addAttribute("pagesCount", pagesCount);

• pagesCount는 총 게시물갯수 / 페이지당 보여줄 게시물 갯수에 반올림한 값으로 페이지의 갯수를 의미 한다.
• JSP파일에서 pagesCount만큼 페이지버튼을 만들기위해 model.addAttribute("pagesCount", pagesCount)

2) list.jsp

   		 <div class="page-menu mt-3 flex justify-center">
			<div class="btn-group">
				<c:forEach begin="1" end="${pagesCount }" var="i">
					<a class="btn btn-md ${page == i ? 'btn-active' : '' }" href="?page=${i }">${i }</a>
				</c:forEach>
			</div>				
		 </div>

• 1부터 전달받은 pagesCount 즉 페이지 총갯수 만큼 반복문을 사용해 버튼을 구현

3. 페이지 메뉴의 최대크기 지정, 페이지 이동시 게시판정보가 누락되지 않도록

1) 페이지 메뉴의 최대 크기지정

    	<div class="page-menu mt-3 flex justify-center">
			<c:set var="pageMenuLen" value="5"/>
			<c:set var="startPage" value="${page - pageMenuLen >= 1 ? page - pageMenuLen : 1}"/>
			<c:set var="endPage" value="${page + pageMenuLen <= pagesCount ? page + pageMenuLen : pagesCount}"/>
			<div class="btn-group">
				<c:if test="${startPage>1 }">
					<a class="btn btn-md" href="?boardId=${board.id}&page=1">1</a>
				</c:if>
                
				<c:if test="${startPage > 2 }">
					<a class="btn btn-md btn-disabled" href="#">...</a>
				</c:if>
                
				<c:forEach begin="${startPage }" end="${endPage}" var="i">
					<a class="btn btn-md ${page == i ? 'btn-active' : '' }" href="?boardId=${board.id}&page=${i }">${i }</a>
				</c:forEach>
                
				<c:if test="${endPage < pagesCount-1 }">
					<a class="btn btn-md btn-disabled" href="#">...</a>
				</c:if>
                
				<c:if test="${endPage < pagesCount }">
					<a class="btn btn-md" href="?boardId=${board.id}&page=${pagesCount }">${pagesCount }</a>
				</c:if>
			</div>				
		</div>

• 현재 페이지에서 pageMenuLen 만큼 앞 뒤로 페이지 버튼을 구현하고자 한다.
• startPage부터 endPage까지 반복문을 이용해 페이지버튼을 구현
• 만약 1페이지라면 startPage는 1 - pageMenuLen 이므로 음수가 나오게 된다.
• ${page - pageMenuLen >= 1 ? page - pageMenuLen : 1} : 음수가 나오게되면 startPage는 1로 설정
• ${page + pageMenuLen <= pagesCount ? page + pageMenuLen : pagesCount} : endPage가 pagesCount(총 페이지 갯수) 보다 크다면 없는 페이지 버튼을 생성함으로 endPage를 pagesCount(총 페이지 갯수)로 설정
• 처음 페이지 버튼 과 마지막 페이지 버튼을 구현하고자 한다.
• ${startPage>1 } , ${endPage < pagesCount } : 1페이지 보다 startPage가 커야 버튼을 생성, pagesCount보다 endPage가 작다면 마지막 버튼 생성
• 현재 보여지고 있는 페이지 버튼에서 보여지지 않는 페이지버튼이 있다는 것을 표시하기위해 ... 버튼을 추가 예 (1 ... 3 4 5 6 ... 10)
• ${startPage > 2 }, ${endPage < pagesCount - 1 } : ... 를 버튼을 추가하기 위한 조건으로 앞단 버튼은 3페이지 이상부터
• 뒷단 버튼은 endPage가 뒤에서 3번째 페이지 부터 ...버튼을 추가

2) 페이지 이동시 게시판정보가 누락되지 않도록

   		<c:if test="${endPage < pagesCount }">
			<a class="btn btn-md" href="?boardId=${board.id}&page=${pagesCount }">${pagesCount }</a>
		</c:if>

• 페이지 이동시 주소에 boardId를 추가
• boardId를 추가하지 않는다면 기본값인 1로 설정 되기 때문에 boardId가 1인 게시판으로만 이동됨

4. 리스트에서 검색 타입에 따른 총 게시물 수 파악

1) 검색 타입과 검색키워드 파라미터 추가

    @RequestMapping("/usr/article/list")
	public String showList(Model model, @RequestParam(defaultValue = "1") int boardId,
			@RequestParam(defaultValue = "1") int page, @RequestParam(defaultValue = "title,body") String searchKeywordType,
			@RequestParam(defaultValue = "") String searchKeyword) {

• 게시물을 가져올때 검색타입과 키워드를 쿼리문에 추가하기위한 파라미터를 받음
• searchKeywordType은 제목,내용,작성날짜 등등 을 의미하는 파라미터

2) 총 게시물 수를 파악하는 쿼리문

	<select id="getArticlesCount" resultType="int">
		SELECT COUNT(*) FROM article
		WHERE boardId = #{boardId}
		<if test="searchKeyword !=''">
			<choose>
				<when test="searchKeywordType==title">
				AND title LIKE CONCAT('%',#{searchKeyword},'%')
				</when>
		    	<when test="searchKeywordType==body">
		    	AND body LIKE CONCAT('%',#{searchKeyword},'%')
		    	</when>
		    	<otherwise>
		    	AND (
		    		title LIKE CONCAT('%',#{searchKeyword},'%') OR
		    		body LIKE CONCAT('%',#{searchKeyword},'%')
		    	)
		    	</otherwise>  	
			</choose>
		</if>
	</select>

• 파라미터searchKeyword의 값이 없다면 defaultValue = ""이므로 if test="searchKeyword !=''"에 해당하므로 조건문(choose)이 실행되지 않는다.
• 검색타입에 searchKeyword가 포함되는 게시물 데이터를 가져옴
• 위의 코드에서 if test="searchKeyword !=''"를 작성하지 않는다면 예상되는 쿼리문은 searchKeyword의 defaultValue = ""이므로

	AND (
		title LIKE CONCAT('%','','%') OR
		body LIKE CONCAT('%','','%')
		)

• 위의 쿼리문으로 예상 하였으나 쿼리오류발생 defaultValue 의값이 제대로 적용되지 않는 것으로 보인다.