14_관리자>회원조회>전체회원 (페이징처리+검색)

오늘은 본격적으로 메인에 공동구매 게시물 띄우기 전에,,,!

공동구매 더미데이터 INSERT 하기가 빡세므로...그거 INSERT 하면서 

공동구매 게시물 페이징 처리 연습도 할 겸,,,

관리자 > 회원조회 > 전체회원 부분을 먼저 진행할 예정이다 !~!~!~!

 

일단 필요한 데이터를 쿼리문으로 작성하고

모두 회원의 ID, 이름으로 검색할 수 있고, 페이징처리 작업을 해야한다.

---

mybatis + Oracle 로 페이징+검색 처리하기,,!!

 

페이징처리는 아래 블로그들을 공부하면서 작성했돠....어렵..

https://freehoon.tistory.com/112

Spring 블로그 만들기 - 9. 페이징(pagination)

https://velog.io/@tjddnths0223/%ED%8E%98%EC%9D%B4%EC%A7%95-%EC%B2%98%EB%A6%AC

[스프링] 페이징(검색) + 오라클(Mybatis)

 

---

▶ Pagination.java : 페이징처리

public class Pagination
{
	private int page;			// 현재 페이지 번호
	private int range;			// 각 페이지 범위 시작 번호
	private int listCnt;			// 전체 리스트 개수
	private int pageCnt;			// 전체 페이지 개수
	private int startPage;			// 각 페이지 범위 시작 번호
	private int endPage;			// 각 페이지 범위 끝 번호
	private int startList;			// 각 페이지의 목록 시작 번호
	private int listSize = 10;		// 한 페이지당 보여질 리스트의 개수
	private int rangeSize = 5;		// 한 페이지 범위에 보여질 페이지 개수
	
	// 이전 페이지 여부, 다음 페이지 여부
	private boolean prev, next;

		//		:
        //getter/setter 전체 생성 (생략,,)
        // 		:
	
	public void pageInfo(int page, int range, int listCnt) 
	{
		this.page = page;		// 현재 페이지 정보
		this.range = range;		// 현재 페이지 범위 정보
		this.listCnt = listCnt;		// 게시물의 총 개수
		
		// 전체 페이지 수 = 전체 리스트 개수 / 한 페이지당 리스트의 개수
		this.pageCnt = (int)Math.ceil((double)listCnt/listSize);
		
		// 각 페이지 범위의 시작 번호
		this.startPage = (range - 1) * rangeSize + 1; 
		
		// 각 페이지 범위의 끝 번호
		this.endPage = range * rangeSize;
		
		// 목록 시작 번호
		this.startList = (page - 1) * listSize + 1;
		
		// 이전 버튼 상태
		this.prev = range == 1 ? false : true;
		
		// 다음 버튼 상태
		this.next = endPage >= pageCnt ? false: true;
		// ┌→ 마지막 페이지 번호 > 페이지의 총 개수라면, 
		if (this.endPage >= this.pageCnt)
		{
			// 마지막 페이지 번호 = 페이지의 총 개수로 설정
			this.endPage = this.pageCnt;
			// [다음 페이지] 버튼 비활성화
			this.next = false;
		}
	}
}

 

▶Search.java: 검색 (getter/setter 만 있음)

public class Search extends Pagination
{
	// 검색타입, 키워드
	private String searchType, keyword;

	public String getSearchType()
	{
		return searchType;
	}

	public void setSearchType(String searchType)
	{
		this.searchType = searchType;
	}

	public String getKeyword()
	{
		return keyword;
	}

	public void setKeyword(String keyword)
	{
		this.keyword = keyword;
	}
}

 

▶ 검색 및 페이징처리를 적용한 SQL 구문 (Oracle)

1) DAO Interface

//--▷전체회원 수
public int memberCount(Search search) throws Exception;

//--▷전체회원 목록 
public ArrayList<MemberDTO> allMemberList(Search search) throws Exception;

2) DAO XML

<!-- 전체회원 수 -->
<select id="memberCount" resultType="java.lang.Integer">
    SELECT COUNT(*) AS COUNT
    FROM VIEW_ALLMEMBERLIST
    <choose>
        <when test="searchType neq ''">
            WHERE LOWER(${searchType}) LIKE '%'||LOWER(#{keyword})||'%'
        </when>
    </choose>	
</select>

<!-- 전체회원 목록 -->
<select id="allMemberList" resultType="com.test.mybatis.MemberDTO">
    SELECT NUM, ID, NAME, NICKNAME, TEL, REPORT_COUNT, REGIST_DATETIME
    FROM
    (
        SELECT ROWNUM RNUM, T.*
        FROM 
        (
            SELECT ROWNUM AS NUM, VA.*
            FROM VIEW_ALLMEMBERLIST VA
            <choose>
                <when test="searchType neq ''">
                    WHERE LOWER(${searchType}) LIKE '%'||LOWER(#{keyword})||'%'
                </when>
            </choose>
            ORDER BY NUM DESC
        ) T
        <!-- startList = 각 페이지의 목록 시작번호 -->
        <!-- listSize  = 한 페이지당 보여질 리스트의 개수 -->
        WHERE ROWNUM <![CDATA[<]]> #{startList} + #{listSize}
    ) 
    WHERE RNUM <![CDATA[>=]]> #{startList}	
</select>

 

▶ Controller

@RequestMapping("/admin_memberall.lion")
public String memberAll(HttpServletRequest request, Model model
                      , @RequestParam(required = false, defaultValue = "1") int page
                      , @RequestParam(required = false, defaultValue = "1") int range
                      , @RequestParam(required = false, defaultValue = "") String searchType
                      , @RequestParam(required = false, defaultValue = "") String keyword) throws Exception
{
 	
    //					:
    
    IAdminDAO dao = sqlSession.getMapper(IAdminDAO.class);
    Search search = new Search();
    search.setSearchType(searchType);
    search.setKeyword(keyword);

    // 전체 게시글 개수
    int listCnt = dao.memberCount(search);
    search.pageInfo(page, range, listCnt);
    ArrayList<MemberDTO> allMemberList = dao.allMemberList(search);
    
    model.addAttribute("pagination", search);
    model.addAttribute("allMemberList", allMemberList);
    return "/WEB-INF/view/admin_member_all.jsp";
}

 

▶ View페이지 

1) javascript

// 검색
$(function()
{
    $('#btnNavbarSearch').click(function()
    {
        e.preventDefault();
        var url = window.location.pathname;
        url += "?searchType=" + $('#searchType').val();
        url += "&keyword=" + $('#keyword').val();

        location.href = url;
    });
});


// 이전 버튼
function fn_prev(page, range, rangeSize)
{
    var page = (range - 1) * rangeSize;
    var range = range - 1;

    var url = window.location.pathname;
    url += "?page=" + page;
    url += "&range=" + range;
    url += "&searchType=" + $('#searchType').val();
    url += "&keyword=" + $('#keyword').val();

    location.href = url;
}

// 페이지 번호 클릭
function fn_pagination(page, range, rangeSize, searchType, keyword)
{
    var url = window.location.pathname;
    url += "?page=" + page;
    url += "&range=" + range;
    url += "&searchType=" + $('#searchType').val();
    url += "&keyword=" + $('#keyword').val();

    location.href = url;
}

// 다음 버튼
function fn_next(page, range, rangeSize)
{
    var page = parseInt(range * rangeSize) + 1;
    var range = parseInt(range) + 1;

    var url = window.location.pathname;
    url += "?page=" + page;
    url += "&range=" + range;
    url += "&searchType=" + $('#searchType').val();
    url += "&keyword=" + $('#keyword').val();

    location.href = url;
}

 

2) jsp파일 (검색바 & 페이지목록 수정)

<!-- searchBar -->
<select class="form-select" name="searchType" id="searchType" aria-label="Default select example">
    <option value="ID" ${pagination.searchType == 'ID' ? 'selected="selected"' : '' }>이메일(ID)</option>
    <option value="NAME" ${pagination.searchType == 'NAME' ? 'selected="selected"' : '' }>이름</option>
</select> 
<input class="form-control" type="text" name="keyword" id="keyword" 
value="${pagination.keyword }" aria-label="Search for..." aria-describedby="btnNavbarSearch" />
<button class="btn btn-primary" id="btnNavbarSearch" type="button"><i class="fas fa-search"></i></button>

<!-- page navigation -->
<nav aria-label="Page navigation example">
    <ul class="pagination justify-content-center">
        <c:if test="${pagination.prev }">
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous"
                onclick="fn_prev('${pagination.page }', '${pagination.range }', '${pagination.rangeSize }')"> 
                <span aria-hidden="true">&laquo;</span></a>
            </li>
        </c:if>
        <c:forEach begin="${pagination.startPage }" end="${pagination.endPage }" var="idx">
            <li class="page-item <c:out value="${pagination.page == idx ? 'active' : '' }"/>">
                <a class="page-link" href="#" 
                onclick="fn_pagination('${idx}', '${pagination.range }', '${pagination.rangeSize }')"> ${idx } </a>
            </li>
        </c:forEach>
        <c:if test="${pagination.next }">
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Next"
                onclick="fn_next('${pagination.page}', '${pagination.range }', '${pagination.rangeSize }')"> 
                <span aria-hidden="true">&raquo;</span></a>
            </li>
        </c:if>
    </ul>
</nav>

 

---

<최종 완료 화면>

한 페이지당 10명의 회원 정보를 볼 수 있고, 페이지목록은 5개씩 보여진다.

현재 총 회원 수는 99명이다.

1 페이지 ( 90~99번까지)

1페이지

2 페이지(80~89번까지)

2페이지

마지막 페이지: 다음 버튼 (>>) 없음

마지막 페이지 &rarr; 다음 버튼(>>) 없음

이메일 검색 시,

이름 검색 시,

끄읏~!