7주차 과제(WEB)_2

이전: https://velog.io/@azurp158/7주차-과제WEB1

코드

#get_read_index.php 일부
else if($request == 'page'){
        $block = ceil($page/$page_num); #몇번째 block인지 계산
        $q = "SELECT COUNT(*) FROM board where title LIKE '%$word%' ORDER BY bid";
        $all = $conn->query($q)->fetch_row()[0];
        $end = ceil($all/$list_num); #마지막 페이지 번호
        
        $start_page = ($block - 1) * $page_num + 1; # block의 시작 page
        $end_page = min($end, $block * $page_num); # block의 끝 page
        
        $page_info = array('start_page' => $start_page, 'end_page' => $end_page, 'last_page' => $end);
        $rows['page_info'] = $page_info;
}

#read_index.php 일부
 <input type="hidden" name="cur_page" id = "cur_page" value = <?php echo $page; ?> >
    <p class = "pagerclass" id = "pager">
    </p>
    <input type="text" name="cur_word" id="cur_word" value = <?php echo $word;?> >
    <input type="submit" value="find" onclick="newload()">

#read_index.js 일부
function newload(){
  const word = document.getElementById('cur_word').value;
  location.href = 'read_index.php?word='+word+'&page=1'
}
...function Updatepage(response, current_page, current_word){
  const pager = document.getElementById('pager');
  pager.innerHTML = '';
  const {start_page, end_page, last_page} = response.page_info;

  const front_page = (start_page <= 1) ? 1 : start_page-1;
  const back_page = (end_page < last_page) ? end_page + 1 : last_page;

  const previousPage = document.createElement('a');
  previousPage.href = `/read_index.php?word=${current_word}&page=${front_page}`;
  previousPage.innerText = '<';
  previousPage.style.margin = '5px';
  pager.appendChild(previousPage);

  for (let i = start_page; i <= end_page; i++) {
    const pageLink = document.createElement('a');
    pageLink.href = `/read_index.php?word=${current_word}&page=${i}`;
    pageLink.innerText = i;
    pageLink.style.margin = '5px';
    if (i === parseInt(current_page)) {
      pageLink.className = 'active';
    }
    pager.appendChild(pageLink);
  }
  const nextPage = document.createElement('a');
  nextPage.href = `/read_index.php?word=${current_word}&page=${back_page}`;
  nextPage.innerText = '>';
  nextPage.style.margin = '5px';
  pager.appendChild(nextPage);

}

문제점 해결

• 페이지의 간격을 margin을 통해서 넓혔다.
• read_index.php가 get 메소드로 word와 page를 받게 만들어 검색 후에 페이지를 넘기더라도 아무 문제 없이 넘어가도록 만들었다.
• 화살표를 넘기면 음수가 되는 경우와 아무것도 출력하지 않는 경우가 생겼는데, js에 front_page(block 첫 페이지)와 end_page(block 마지막 페이지), json파일에 last_page(마지막 페이지)를 추가적으로 넘기게 만들어 오류가 생기지 않도록 만들었다.
• find 버튼을 눌렀을 때, AJAX 요청을 해 페이지가 변하지 않았는데, 버튼을 누르면 페이지를 새로 불러왔다. 뭔가 통일성이 없는 것 같아, find 버튼을 누를때 페이지를 새로 요청하는 방식으로 바꾸었다.