Day 52. [JSP/Servlet] 페이지네이션, 게시판별 카테고리

저번주에 이어서 오늘 한 분 나가셨다 ㅠㅠㅠ

친해지고 싶었던 분인데 ;-;

 

서버 프로그램 구현 - 개인 프로젝트

회원제 게시판

 

첨부파일, 페이지네이션, 게시판별 카테고리

인증(이메일), 댓글(비동기), 회원기능 구현

 

메세지 처리 페이지

> 로그인 실패 및 성공시 메시지

 

---

1. 필터 적용

 

package filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;

@WebFilter("/*")
public class CharsetFilter implements Filter {
	private String charset = "utf-8";
	private FilterConfig fc;
	
	@Override
	public void init(FilterConfig filterConfig) throws ServletException {
		// TODO Auto-generated method stub
		fc = filterConfig;
	}

	@Override
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
			throws IOException, ServletException {
		// TODO Auto-generated method stub
		request.setCharacterEncoding(charset);
		chain.doFilter(request, response); //  실제 서블릿이 수행할 일
	}

	@Override
	public void destroy() {
		// TODO Auto-generated method stub
	}
}

 

2. Bootstrap 5 Pagination으로 페이징 처리

 

<div class="pagination justify-content-center">
    <ul class="pagination">
    <c:if test="${page.prev}">
    	<li class="page-item"><a class="page-link" href="list${page.cri.params}&pageNum=${page.cri.pageNum - 1}">prev</a></li>
    </c:if>
    <c:forEach begin="${page.start}" end="${page.end}" var="p">
    	<li class="page-item ${p == page.cri.pageNum ? 'active' : ''}"><a class="page-link" href="list${page.cri.params}&pageNum=${p}">${p}</a></li>
    </c:forEach>
    <c:if test="${page.next}">
    	<li class="page-item"><a class="page-link" href="list${page.cri.params}&pageNum=${page.cri.pageNum + 1}">next</a></li>
    </c:if>
    </ul>
 </div>

https://www.w3schools.com/bootstrap5/bootstrap_pagination.php

Bootstrap 5 Pagination

 

3. Boorstrap 5 Select Menus 로 한페이지에 출력할 글 갯수 바꾸기

 

<div class="col-1">
    <select class="form-select form-amount"><!-- 앞에는 부트스트렙 클래스 뒤는 커스텀 클래스 -->
        <option ${page.cri.amount == 5 ? 'selected' : '' }>5</option>
        <option ${page.cri.amount == 10 ? 'selected' : '' }>10</option>
        <option ${page.cri.amount == 25 ? 'selected' : '' }>25</option>
        <option ${page.cri.amount == 50 ? 'selected' : '' }>50</option>
    </select>
</div>

<script>
        $(function(){
        	$(".form-amount").change(function(){
	        	location.href = 'list?amount=' + $(this).val() + "&category=${page.cri.category}&pageNum=${page.cri.pageNum}"
	        });        	
        })
</script>

 

https://www.w3schools.com/bootstrap5/bootstrap_form_select.php

Bootstrap 5 Select Menus