[13주차] 게시판 구현 #10 - 날짜,조회,추천 순 정렬 기능

저번 #9번 게시판 구현 글에서 좋아요 / 좋아요 취소 기능까지 구현에 성공했습니다.

 

이번에는 날짜 순, 조회수 순, 추천 순으로 정렬하는 기능을 구현해보겠습니다.

 

 

---

 

게시판 첫 화면에서 정렬 구현

 

우선, 현재 url 값을 받아오기 위해 $_SERVER['REQUEST_URI']함수로

$current_url이라는 변수에 저장합니다.

 

//현재 URL을 받음
$current_url = $_SERVER["REQUEST_URI"];

 

그 후, 저번 제목 / 작성자별 검색에서 사용했던 select와 option태그를 긁어와서 사용해보겠습니다.

 

게시판을 나타내는 noticeboard.php 다음 코드를 적당한 위치에 추가해줍니다.

 

<form action="<?php echo $current_url;?>" method="GET" style="margin: auto;">
    <select name="category" >
    <option value="date_order">날짜 순</option>
    <option value="hit_order">조회 순</option>
    <option value="thumbup_order">추천 수</option> 
    </select>
    <input type="submit" value="정렬">
</form>

 

코드 상단에 order by (정렬)을 관리할 $ord_ca란 변수를 생성해줍니다.

 

if(isset($_GET['ord_ca'])){
  $ord_ca = $_GET['ord_ca'];
} else {
  //정렬을 안했을 때
  $ord_ca = 'number';
}

GET으로 받은 값이 있다면 $ord_ca에 저장이 되고 받은 값이 없다면 디폴트는 number 순 정렬입니다.

number는 제 DB테이블에서 게시글 생성마다 부여되는 id입니다.

 

웹에서 보니 나쁘지 않은 것 같습니다.

탭도 잘 보여지고 있습니다.

 

 

$query2 = "SELECT * FROM board order by $ord_ca desc limit $start_num,$list";

쿼리문도 수정해줍니다. order by $ord_ca로 인해 선택한 값으로 정렬됩니다.

 

조회수 순 정렬을 눌렀는데 잘 정렬됩니다.

 

정렬은 잘 되었는데 select 태그의값이 다시 처음 날짜 순으로 되돌아가네요

 

그 다음은 페이징에도 코드를 추가해줘야 합니다.

 

기껏 정렬해놨더니 2 페이지를 누르는 순간 초기화되면 안되겠죠?

 

<a href='? 뒤에 get파라미터를 전달하면 문제 없이 전달됩니다.

<ul>
          <?php
          if($page <= 1)
          { //만약 page가 1보다 크거나 같다면
            echo "<li class='fo_re'>처음</li>"; //처음이라는 글자에 빨간색 표시
          } else {
            echo "<li><a href='?page=1&ord_ca=$ord_ca'>처음</a></li>"; //아니라면 처음글자에 1번페이지로 갈 수 있게 링크
          }
          if($page <= 1){    
          } else {
            $pre = $page -1;
            echo "<li><a href='?page=$pre&ord_ca=$ord_ca'>이전</a></li>"; //이전글자에 pre변수를 링크한다. 이러면 이전버튼을 누를때마다 현재 페이지에서 -1하게 된다.
          }
          for($i=$block_start; $i<=$block_end; $i++){ 
            //for문 반복문을 사용하여, 초기값을 블록의 시작번호를 조건으로 블록시작번호가 마지박블록보다 작거나 같을 때까지 $i를 반복시킨다
            if($page == $i){ //만약 page가 $i와 같다면 
              echo "<li class='fo_re'>[$i]</li>"; //현재 페이지에 해당하는 번호에 굵은 빨간색을 적용한다
            }else{
              echo "<li><a href='?page=$i&ord_ca=$ord_ca'>[$i]</a></li>"; //아니라면 $i
            }
          }
          if($block_num >= $total_block){ //만약 현재 블록이 블록 총개수보다 크거나 같다면 빈 값
          }else{
            $next = $page + 1; //next변수에 page + 1을 해준다.
            echo "<li><a href='?page=$next&ord_ca=$ord_ca'>다음</a></li>"; //다음글자에 next변수를 링크한다. 현재 4페이지에 있다면 +1하여 5페이지로 이동하게 된다.
          }
          if($page >= $total_page){ //만약 page가 페이지수보다 크거나 같다면
            echo "<li class='fo_re'>마지막</li>"; //마지막 글자에 긁은 빨간색을 적용한다.
          }else{
            echo "<li><a href='?page=$total_page&ord_ca=$ord_ca'>마지막</a></li>"; //아니라면 마지막글자에 total_page를 링크한다.
          }
          ?>
        </ul>

길어보이지만 사실 a 태그의 href 속성에 ord_ca=$ord_ca만 일일히 추가시켜준 것 뿐입니다.

이렇게 코딩하면 각 파라미터들이 리셋되지 않고 온전히 전달됩니다.

 

 

웹에서 테스트해보겠습니다.

 

게시판에 처음으로 들어가 1페이지이고 아무 정렬도 하지 않은 상태입니다.

 

조회 순 정렬을 한 상태입니다. select 태그가 조회 순인 이유는 스크린샷 찍으려고 일부러 한번더 선택해놔서 그렇습니다 ㅋ...

 

게시판 리스트는 조회수 순서대로 정렬되어 195인 게시글이 가장 위로 올라왔네요

 

2페이지를 눌러보니 url이 잘 전달됩니다. 기존에 ord_ca=hit 라는 조회수 정렬 파라미터만 존재했는데

거기에 얹어서 page=2가 전달되었습니다.

 

2페이지가 열려있는데도 조회수 별로 정렬되어있는 것을 볼 수 있습니다.

 

 

검색 시에도 정렬 구현하기

 

이제 검색을 했을 때도 정렬기능을 사용하기 위해 search_result.php에도 추가해줍니다.

 

글쓴이를 누르고 bg5294를 누르고 검색해보겠습니다.

 

 

검색 결과가 나왔습니다. 잘 안보이실 수도 있지만 33번 게시글은 조회수가 1이고, 32번 게시글은 조회수가 2 이므로

조회수 별이 아닌 그냥 번호 별 정렬입니다.

조회 순을 눌러 정렬해보겠습니다.

 

정렬을 누르니 기존에 url에 들어간 파라미터가 초기화되고 ord_ca 파라미터만 전달되는 것 때문에 화면이 안뜹니다...

 

코드를 살짝 수정해서

form 의 action으로 전달되는 url 을 바꿔주겠습니다.

상단 php코드에 변수 있는 곳 조심하고

다음과 같이 바꿔줬습니다.

 

search_result.php

$current_url =

"./search_result.php?category=$category&search=$search_title&page=1&pre_date=$pre_date&end_date=&end_date&

ord_ca=$ord_ca";

 

<form action="<?php echo $current_url;?>" method="GET" style="margin: auto;">
  <select name="ord_ca">
  <option value="date">날짜 순</option>
  <option value="hit">조회 순</option>
  <option value="thumbup">추천 순</option>
  </select>
  <input type="submit" value="정렬">
</form>

 

그럼 그림에서 확인할 수 있다시피 웹 상단에 현재 url을 출력하게 만들어놨는데

이 상태에서 조회 순 정렬을 누르면 전달되는 url과 출력되는 웹 url이 다릅니다.

 

form이 submit 할 때 get 파라미터를 초기화하는 것 같습니다.

방식을 바꿔야할 것 같네요

 

페이징을 구현할 때 사용했던 href=?파라미터 전달 방식이 오류 없이 전달되는 것으로 보아

이 방식을 차용하는 것이 좋아보입니다.

 

<?php echo'
    <select name="ord_ca" onchange="location.href=this.value">
    <option value="none">정렬 기준</option>
    <option value="?category='.$category.'&search='.$search_title.'&page=1&pre_date='.$pre_date.'&end_date='.$end_date.'&ord_ca=date">날짜 순</option>
    <option value="?category='.$category.'&search='.$search_title.'&page=1&pre_date='.$pre_date.'&end_date='.$end_date.'&ord_ca=hit">조회 순</option>
    <option value="?category='.$category.'&search='.$search_title.'&page=1&pre_date='.$pre_date.'&end_date='.$end_date.'&ord_ca=thumbup">추천 순</option> 
    </select>
';
?>

 

submit하는 정렬 버튼을 지워버리고 form태그도 지웠습니다.

대신, select태그에 onchange옵션을 넣고 location.href속성을 넣습니다.

this.value로 option에서 선택한 value값들을 받아 href로 전달합니다.

그리고 사용하는 변수들이 php변수들이므로 select태그부터 전체를 php로 감싸고 echo로 출력했습니다.

 

잘 되는지 한번 테스트해볼까요?

 

줄 수 있는 파라미터를 다 줘봤습니다. 글쓴이로 bg5294값을 줬고 시작일과 종료일도 설정했습니다

 

잘 출력되었습니다. 2페이지까지 나와있으므로 페이징 테스트도 할 수 있겠네요

 

조회 순으로 클릭해보겠습니다.

 

대박! 너무나 깔끔하게 정렬되었네요 이 상태에서 2페이지를 누른다면?

 

wow 아무런 하자없이 완벽하게 정렬이 구현되었습니다.

 

---

 

자 이렇게 정렬 구현을 구현해보았는데요

 

정렬시키는 쿼리문은 정말 쉽지만 그걸 유기적으로 웹 게시판에 녹여내는 게 머리를 좀 요구했던 것 같습니다.

이번 정렬을 구현하면서 form 태그를 2번 사용하면서 생길 수 있는 오류에 대해서 알게된 것 같습니다.

get 방식으로 전달하는 버튼이 2개면 파라미터가 중첩되지 않고 리셋된다는 것

 

봐주셔서 감사합니다!

 

 

 

 

---

소스 참조

https://chlolisher.tistory.com/99