240130 HTML 홈페이지 만들기

오늘은 관리자 페이지 게시글 관리에

게시글 검색 기능 만들기

 

일단 JSP 에 input 창과 제출할 버튼 만듦

<div class="search">
  <input type="text" id="search"/>
  <button id="searchBtn">검색</button>
</div>

 

제이쿼리에 클릭 시 실행할 함수 만들기

$("#searchBtn").click(function() {
  let search = $('#search').val();
  // alert(search);
  location.href="./board?search=" + search;
});

 

이제 GET 방식으로 받기 때문에

서블릿의 doget 쪽에 값을 받아 실행하는 메소드 작성, DAO 메소드 오버로딩

    if (request.getParameter("search") == null 
        || request.getParameter("search").isBlank()) {
      list = dao.boardList();
    } else {
      list = dao.boardList(request.getParameter("search"));
    }

 

DAO 에서는 쿼리문에 WHERE 조건문을 추가하여 검색

    String sql = "SELECT b.board_no, b.board_title, m.mname, b.board_date, b.board_del, "
        + "(select COUNT(*) from visitcount v where v.board_no = b.board_no) AS 'count', "
        + "(SELECT COUNT(*) FROM comment c WHERE c.board_no = b.board_no) AS comment "
        + "FROM board b JOIN c23c_26.member m ON b.mno = m.mno " 
        + "WHERE b.board_title LIKE concat('%', ?,'%') "
        + "OR m.mname LIKE concat('%', ?,'%') " // '%?%'
        + "ORDER BY board_no desc " + "LIMIT 0, 15";

 

홈페이지에 출력해보기

<tbody>
  <c:forEach items="${list }" var="row">
    <tr class="row${row.del }">
      <td class="bno">${row.no }</td>
      <td><a href="../detail?no=${row.no }">${row.title }</a></td>
      <td>${row.mname }</td>
      <td>${row.date }</td>
      <td>${row.ip }</td>
      <td>${row.count }</td>
      <td>${row.comment }</td>
      <td><input type="hidden" id="del" value="${row.del }" /> 
        <c:if test="${row.del eq 0 }"> <i class="xi-eye changeDel"></i></c:if>
        <c:if test="${row.del eq 1 }"> <i class="xi-eye-off-o changeDel"></i></c:if>
      </td>
    </tr>
  </c:forEach>
</tbody>

 

페이징 버튼도 추가, 기존 게시글 보는 것에서 1 ~ 10, 11 ~ 20 이렇게 되도록 수정해 봄

<div class="paging">
  <button class="pageBtn" onclick="paging(1)">‍🥔‍</button>
  <button class="pageBtn" <c:if test="${param.page - 10 lt 1 }">disabled="disabled"</c:if>
    onclick="paging(${param.page - 1})">🥕</button>
  <c:forEach begin="${startPage }" end="${startPage + 9 }" var="p">
    <button class="pageBtn" <c:if test="${page eq p }">id="currentBtn"</c:if>
      onclick="paging(${p})">${p }</button>
  </c:forEach>
    <button class="pageBtn"<c:if test="${param.page + 10 gt totalPage }">disabled="disabled"</c:if>
      onclick="paging(${param.page + 1})">🥕</button>
  <button class="pageBtn" onclick="paging(${totalPage})">🥔</button>
</div>

 

페이지 계산하는 것은 이번엔 서블릿에서 작성, 더 좋은 공식이 있을 순 있는데,,

일단 급한 내 머리로 만들어 봄

    int page;
    int totalCount = dao.totalCount();
    
    int totalPage;
    if (totalCount % 15 == 0) {
      totalPage = totalCount / 15;
    } else {
      totalPage = totalCount / 15 + 1;
    }
    
    if (request.getParameter("page") == null || request.getParameter("page").equals("")) {
      page = 1;
    } else {
      page = Util.str2Int2(request.getParameter("page")); 
    }
    
    page = page > totalPage ? totalPage : page; 
    
    int startPage;
    if (page <= 10) {
      startPage = 1;
    } else if (page % 10 == 0) {
      startPage = (page - 1) / 10 * 10 + 1;
    } else {
      startPage = (page / 10 * 10) + 1;
    }

 

여기서 검색 결과도 같이 넣어서 해야하는데 그건 좀만 있다가 작성할 예정

 

--> 댓글 관리랑 ip 관리도 같이 넣으라고 하였는데 팀 프로젝트 한다고 못만듬.. 내일