스크롤링으로 페이징구현하기

PHP(Class)

by 김일국 2017. 8. 8. 21:42

쇼핑몰에서 자주 사용되는 스크롤링으로 다음페이지 내용을 페이지이동없이 출력하는부분을 벼르고 벼르다가 드디어 구현해 보게 되었습니다.

기본페이징: http://globalwing.co.kr/time-space/mobile/wp/list.html

스크롤페이징: http://globalwing.co.kr/time-space/mobile/wp/list_scroll.html

완벽하진 않지만, 그런데로 쓸만합니다.^^

파일을 2부분(jQuear디자인부분, DB쿼리부분)으로 나누었습니다.

===================================================================================================================

- 아래는 list_scroll.html 소스(하단의 jQuery 부분이 핵심)

===================================================================================================================

<?php
session_start();
define('DS', DIRECTORY_SEPARATOR);
define('GPLDIR', $_SERVER['DOCUMENT_ROOT'].DS.'time-space/manage');
include_once GPLDIR . '/core/config/default.php';
include_once GPLDIR_CLASS . '/GPLbase.class.php';
$GPLbase = new GPLmember($GPLcookie_domain, $GPLurl_default, $GPLpath_default);//상속받은 개체 멤버클래스 사용
$GPLdb5 =& $GPLbase->db5;//db 커넥션 오브젝트생성 MYSQL5
//아래 쿼리에 사용되는 워드프레스 테이블 명 wp_posts(게시물리스트), wp_terms(게시판ID)
//wp_term_relationships(게시판ID와 게시물의 관계), wp_postmeta(게시물과 첨부파일의 관계)
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="height=device-height,width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no;" />

<title>Time-Space Web Service</title>
<link rel="stylesheet" type="text/css" href="/time-space/mobile/css/reset.css">
<link rel="stylesheet" type="text/css" href="/time-space/mobile/css/style.css">
</head>
<body>
<?php
//게시판 공통변수 항상 페이지 상단에 위치
$MODE = $_REQUEST['MODE'];
$GUBN = $_REQUEST['GUBN'];
$SEARCH = $_REQUEST['SEARCH'];
$BOARD_ID = $_REQUEST['BOARD_ID'];
$BOARD_SEQ = $_REQUEST['SEQ'];
$now_page = $_REQUEST['now_page'];
//메뉴 변수
switch ($BOARD_ID) { //photo
case 'photo' : $BOARD_ID='14'; $title='사진게시판';break;
default   : $BOARD_ID='14'; $title='사진게시판';break;
}
?>
<?php
//페이징설정 넘버링 시작
$now_page = $_GET['now_page'];
//================ pageing 계산 code ======================================
// 1 - 현재 페이지 설정
if($now_page == ""){
  $now_page = 1;
}
// 2 - 블럭크기 설정
if($block_size == ""){
  $block_size = 7;
}
// 3 - 각 블럭의 start 페이지 값을 설정한다
if($now_page % $block_size == 0){
  $start_num = abs($now_page - $block_size + 1);    // 현재 페이지가 블럭의 마지막 페이지 일 경우 해당 블럭의 시작 페이지 번호를 정한다
}else{
  $start_num = floor($now_page/$block_size)*$block_size + 1; // 현재페이지가 블럭의 마지막 페이지가 아닐경우 시작 페이지를 지정한다
}
// 4 - 각 블럭의 end 페이지 값을 설정한다
$end_num = $start_num + $block_size - 1;
// 5 - 카운터 쿼리호출 (마지막 페이지에서 존재하지 않는 페이지 숫자를 없애주기 위해 토탈레코드 숫자를 구한다 )
//SELECT * from wp_posts where ID IN (SELECT object_id FROM `wp_term_relationships` where term_taxonomy_id = 14) order by ID desc
  $SQL = "SELECT";
  $SQL .= " COUNT(ID) AS COUNT";
  $SQL .= " FROM wp_posts";
  $SQL .= " WHERE ID IN (SELECT object_id FROM wp_term_relationships where term_taxonomy_id = $BOARD_ID)";
  $SQL .= " AND (post_title LIKE '%".$SEARCH."%'";
  $SQL .= " OR post_content LIKE '%".$SEARCH."%')";
  $result = $GPLdb5->GPLquery_fetch_assoc_one($SQL);
  if($result){
   $total_rec = $result['COUNT'];
  }
// 6 - 한페이지당 보여줄 레코드 수 설정
$recnum_per_page = 4;
// 7 - 불러오기 쿼리문에서 시작레코드 숫자 지정
if($now_page == 1){
  $st_limit = 0;
}else{
  $st_limit = $now_page * $recnum_per_page - $recnum_per_page;
}
// 8 - 이전 블럭 설정
$before_block = abs($start - 1);
// 9 - 다음 블럭 설정
$next_block = $end_num + 1;
?>
<article id="container">
<h2><a href="./list.html?BOARD_ID=$BOARD_ID" title=""><span>포토게시판</span></a></h2>

<span class="clear10"></span>
<div id="board_list_search">
  <form method="get" name="form_search" id="form_search" action="">
  <select name="GUBN" id="GUBN" class="type-select">
   <option selected="selected" value="1">ALL</option>
   <option value="2">subject</option>
   <option value="3">content</option>
  </select>
  <input type="text" name="SEARCH" id="SEARCH" size=15 class="type-text" value="">
  <input type="hidden" name="BOARD_ID" id="BOARD_ID" value="<?=$BOARD_ID?>">
  <button type="submit" class="type-submit">Search</button>
  </form>
</div>

<span class="clear10"></span>
<section class="main">
  <div id="list">

  </div>
  
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <div id="list_scroll"></div>
  <style>
  #loading {
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     position;
     display: block;
     opacity: 0.7;
     background-color: #fff;
     z-index: 99;
     text-align: center;
  }

  #loading-image {
    position: absolute;
    top: 100px;
    left: 240px;
    z-index: 100;
  }
  </style>
  <script>
  var idx = <?=$now_page?>;
  var now_page = <?=($now_page+1)?>;
  jQuery(document).ready(function () {
   var trident= navigator.userAgent.match(/Trident\/(\d)/i);
   var ie_num= (String(trident)).split(',');
   var reload_href_full ='list_more.html?GUBN=<?=$GUBN?>&SEARCH=<?=$SEARCH?>&BOARD_ID=<?=$BOARD_ID?>&now_page=<?=$now_page?>#list';
   jQuery("#list").load(reload_href_full).fadeIn(1000).delay(5000);
   jQuery(window).scroll(function() {
   if(now_page > <?=$end_num?>){jQuery(".btn_more").hide(); return true;} //페이지끝에 도달하면, 아래코드사용중지
   if (jQuery(window).scrollTop() == jQuery(document).height() - jQuery(window).height()) {
    //alert(idx);alert(now_page);//디버그
    var newDiv=document.createElement('div');
    newDiv.innerHTML= '<div id="loading"><img id="loading-image" src="ajax-loader.gif" alt="Loading..." /></div>';
    setTimeout(function(){
      if(ie_num[1]>=4) newDiv.innerHTML= '';
     newDiv.setAttribute('id','more'+idx);
     morediv = '#more'+idx;
     var reload_href_full ='list_more.html?GUBN=<?=$GUBN?>&SEARCH=<?=$SEARCH?>&BOARD_ID=<?=$BOARD_ID?>&now_page='+now_page+'#list';
     jQuery(newDiv).insertBefore('#list_scroll');
     jQuery(morediv).load(reload_href_full).fadeIn(1000).delay(5000);
    }, 1000);
   }
   });
   //스마트폰에서 사용하기 편리하게 MORE버튼 기능추가
   $('.btn_more').click(function(){
       var newDiv=document.createElement('div');
    newDiv.setAttribute('id','more'+idx);
    morediv = '#more'+idx;
    var reload_href_full ='list_more.html?GUBN=<?=$GUBN?>&SEARCH=<?=$SEARCH?>&BOARD_ID=<?=$BOARD_ID?>&now_page='+now_page+'#list';
    jQuery(newDiv).insertBefore('#list_scroll');
    jQuery(morediv).load(reload_href_full).fadeIn(1000).delay(5000);
   });
  });
  </script>
</section>
<span class="clear10"></span>
<button class="btn_more type-btn">MORE...</button>

<span class="clear10"></span>
<div id="board_list_search">
  <form method="get" name="form_search" id="form_search" action="">
  <select name="GUBN" id="GUBN" class="type-select">
   <option selected="selected" value="1">ALL</option>
   <option value="2">subject</option>
   <option value="3">content</option>
  </select>
  <input type="text" name="SEARCH" id="SEARCH" size=15 class="type-text" value="">
  <input type="hidden" name="BOARD_ID" id="BOARD_ID" value="<?=$BOARD_ID?>">
  <button type="submit" class="type-submit">Search</button>
  </form>
</div>
<span class="clear10"></span

</article>
</body>
</html>

===================================================================================================================

- 아래는 스크롤시 쿼리가 실행되는 부분 llist_more.html

하단의 다음부분이 핵심 <script> var idx = <?=$now_page?>; var now_page = <?=($now_page+1)?>;</script>

===================================================================================================================

<?php
session_start();
define('DS', DIRECTORY_SEPARATOR);
define('GPLDIR', $_SERVER['DOCUMENT_ROOT'].DS.'time-space/manage');
include_once GPLDIR . '/core/config/default.php';
include_once GPLDIR_CLASS . '/GPLbase.class.php';
$GPLbase = new GPLmember($GPLcookie_domain, $GPLurl_default, $GPLpath_default);//상속받은 개체 멤버클래스 사용
$GPLdb5 =& $GPLbase->db5;//db 커넥션 오브젝트생성 MYSQL5
//아래 쿼리에 사용되는 워드프레스 테이블 명 wp_posts(게시물리스트), wp_terms(게시판ID)
//wp_term_relationships(게시판ID와 게시물의 관계), wp_postmeta(게시물과 첨부파일의 관계)
?>
<?php
//게시판 공통변수 항상 페이지 상단에 위치
$MODE = $_REQUEST['MODE'];
$GUBN = $_REQUEST['GUBN'];
$SEARCH = $_REQUEST['SEARCH'];
$BOARD_ID = $_REQUEST['BOARD_ID'];
$BOARD_SEQ = $_REQUEST['SEQ'];
$now_page = $_REQUEST['now_page'];
//메뉴 변수
switch ($BOARD_ID) { //photo
case 'photo' : $BOARD_ID='14'; $title='사진게시판';break;
default   : $BOARD_ID='14'; $title='사진게시판';break;
}
?>
<?php
//페이징설정 넘버링 시작
$now_page = $_GET['now_page'];
//================ pageing 계산 code ======================================
// 1 - 현재 페이지 설정
if($now_page == ""){
  $now_page = 1;
}
// 2 - 블럭크기 설정
if($block_size == ""){
  $block_size = 7;
}
// 3 - 각 블럭의 start 페이지 값을 설정한다
if($now_page % $block_size == 0){
  $start_num = abs($now_page - $block_size + 1);    // 현재 페이지가 블럭의 마지막 페이지 일 경우 해당 블럭의 시작 페이지 번호를 정한다
}else{
  $start_num = floor($now_page/$block_size)*$block_size + 1; // 현재페이지가 블럭의 마지막 페이지가 아닐경우 시작 페이지를 지정한다
}
// 4 - 각 블럭의 end 페이지 값을 설정한다
$end_num = $start_num + $block_size - 1;
// 5 - 카운터 쿼리호출 (마지막 페이지에서 존재하지 않는 페이지 숫자를 없애주기 위해 토탈레코드 숫자를 구한다 )
//SELECT * from wp_posts where ID IN (SELECT object_id FROM `wp_term_relationships` where term_taxonomy_id = 14) order by ID desc
  $SQL = "SELECT";
  $SQL .= " COUNT(ID) AS COUNT";
  $SQL .= " FROM wp_posts";
  $SQL .= " WHERE ID IN (SELECT object_id FROM wp_term_relationships where term_taxonomy_id = $BOARD_ID)";
  $SQL .= " AND (post_title LIKE '%".$SEARCH."%'";
  $SQL .= " OR post_content LIKE '%".$SEARCH."%')";
  $result = $GPLdb5->GPLquery_fetch_assoc_one($SQL);
  if($result){
   $total_rec = $result['COUNT'];
  }
// 6 - 한페이지당 보여줄 레코드 수 설정
$recnum_per_page = 4;
// 7 - 불러오기 쿼리문에서 시작레코드 숫자 지정
if($now_page == 1){
  $st_limit = 0;
}else{
  $st_limit = $now_page * $recnum_per_page - $recnum_per_page;
}
// 8 - 이전 블럭 설정
$before_block = abs($start - 1);
// 9 - 다음 블럭 설정
$next_block = $end_num + 1;
?>
<script>
var idx = <?=$now_page?>;
var now_page = <?=($now_page+1)?>;
</script>
<ul>
  <?php
   //셀렉트
  $SQL = "SELECT";
  $SQL .= " ID as SEQ,post_title,post_content";
  $SQL .= " FROM wp_posts";
  $SQL .= " WHERE ID IN (SELECT object_id FROM wp_term_relationships where term_taxonomy_id=$BOARD_ID)";
  $SQL .= " AND (post_title LIKE '%".$SEARCH."%'";
  $SQL .= " OR post_content LIKE '%".$SEARCH."%')";
  $SQL .= " ORDER BY ID DESC LIMIT $st_limit , $recnum_per_page";
  $result = $GPLdb5->GPLexcute_query($SQL);
  $i=0;
  if($result){
   while($ROW = mysql_fetch_array($result)) {
   //썸네일 첨부파일 갯수
    $SQL = "SELECT";
    $SQL .= " COUNT(meta_id) AS FILE_CNT";
    $SQL .= " FROM wp_postmeta";
    $SQL .= " WHERE post_id = '".$ROW['SEQ']."'";
    $SQL .= " AND meta_key = 'gnu_bbs_file'";
    $FILE_ROW = $GPLdb5->GPLquery_fetch_assoc_one($SQL);
    $FILE_CNT = $FILE_ROW['FILE_CNT'];
  ?>
  <li>
       <a href="/time-space/mobile/wp/view_scroll.html?now_page=<?=$now_page?>&BOARD_ID=<?=$BOARD_ID?>&SEQ=<?=$ROW['SEQ']?>">
   <span>●</span> <?=cut_str($ROW[post_title],58,'...')?><br/>
    <?php
    //첨부파일 셀렉트
    /* 대표이미지(원본)추출 */
    $SQL = "SELECT";
     $SQL .= " guid";
     $SQL .= " FROM wp_posts";
     $SQL .= " WHERE ID IN (";
     $SQL .= " SELECT meta_value from wp_postmeta WHERE post_id = '".$ROW['SEQ']."'";
     $SQL .= " AND meta_key = '_thumbnail_id'";
     $SQL .= " )";
     $fileresult= $GPLdb5->GPLquery_fetch_assoc_one($SQL);
    if($fileresult){
    ?>
                       <span class="visual"><img src="<?=$fileresult['guid']?>" style="vertical-align:bottom;"><?=($FILE_CNT>1)?"(+".(($FILE_CNT)-1).")":"";?></span>
    <?php } ?>
   </a>
    </li>
  <?php $i++;
            }
        }
  ?>
  </ul>
  
  <div id="paging-wrap">
  <div id="board_list_paging">
   <ul>
    <?
    //================ pageing 출력 10번~12번 code ======================================
      if($start_num > 1){ // 10 - 이전 블럭 링크?>
      <a href="list_scroll.html?now_page=<?=$before_block?>&GUBN=<?=$GUBN?>&SEARCH=<?=$SEARCH?>&BOARD_ID=<?=$BOARD_ID?>" onFocus="blur()">
      <li>Prev</li>
      </a>
      <? } ?>
     <?
      for($i=$start_num; $i<=$end_num; $i++){ // 11 - 페이지 링크
     if(ceil($total_rec/$recnum_per_page) >= $i){
      if($now_page == $i){ ?>
      <a href="#"><li class="selected_page">
      <?=$i?>
      </li></a>
       <?    }else{ ?>
      <a href="list_scroll.html?now_page=<?=$i?>&GUBN=<?=$GUBN?>&SEARCH=<?=$SEARCH?>&BOARD_ID=<?=$BOARD_ID?>" onFocus="blur()">
      <li><?=$i?></li>
      </a>
     <?            }
     }
      } ?>
     <?
      if($end_num * $recnum_per_page < $total_rec){ // 12 - 다음 블럭 링크?>
      <a href="list_scroll.html?now_page=<?=$next_block?>&GUBN=<?=$GUBN?>&SEARCH=<?=$SEARCH?>&BOARD_ID=<?=$BOARD_ID?>" onFocus="blur()">
      <li>Nex<li>
      </a>
    <? }
    //====================================================================
    ?>
    </ul>
  </div>
  </div>

'PHP(Class)' 카테고리의 다른 글

워드프레스 권한 및 외부 post(프론트엔드포스트) 기능 (0)	2017.08.18
워드프레스 동영상 아카이브용 메인레이아웃 수정(Kboard기반) (0)	2017.08.14
워드프레스 테이블내용을 일반PHP로 출력하기02_뷰화면 (0)	2017.08.06
워드프레스 테이블내용을 일반PHP로 출력하기01_리스트화면 (0)	2017.08.05
노드js_그누보드와 연동_03 (0)	2017.07.23