php+mysql 게시판 만들기 강좌 #17. 회원 게시판 - 더보기 feat. Ajax

2022. 2. 3. 17:29

이부분은 좀 어렵기때문에 잘 모르겠으면 넘어가도 된다.

요즘은 모바일이 대세가 되면서 페이징은 눈에 잘 안보여서 더보기를 하는 경우가 늘어나고 있다. 게시판 리스트 아래에 더보기 버튼을 클릭하면 다음 페이지가 아래에 자동으로 붙어서 나오도록 작업해보자.

이 작업을 할려면 ajax라는것을 알아야한다. 여기선 길게 설명 안할테니 모르면 공부를 좀 하고 오자. 당연히 jquery도 알아야한다. jquery도 공부하고 오자.

모든 페이지에서 jquery를 사용하기 위해 header.php 파일을 수정해준다.

/inc/header.php

<?php session_start();

include $_SERVER["DOCUMENT_ROOT"]."/inc/dbcon.php";

ini_set( 'display_errors', '0' );

<!doctype html>

<head>

</head>

<body>

이렇게 jquery부분을 추가해준다. 저 링크 하나면 업데이트 걱정없이 항상 최신 버전을 사용할 수 있다.

이제 index.php를 수정해보자.

/index.php

<?php

include $_SERVER["DOCUMENT_ROOT"]."/inc/header.php";

$search_keyword = $_GET['search_keyword'];

if($search_keyword){

$search_where = " and (subject like '%".$search_keyword."%' or content like '%".$search_keyword."%')";

}

$pageNumber = $_GET['pageNumber']??1;//현재 페이지, 없으면 1

if($pageNumber < 1) $pageNumber = 1;

$pageCount = $_GET['pageCount']??10;//페이지당 몇개씩 보여줄지, 없으면 10

$startLimit = ($pageNumber-1)*$pageCount;//쿼리의 limit 시작 부분

$firstPageNumber = $_GET['firstPageNumber'];

$sql = "select * from board where 1=1";

$sql .= " and status=1";

$sql .= $search_where;

$order = " order by ifnull(parent_id, bid) desc, bid asc";

$limit = " limit $startLimit, $pageCount";

$query = $sql.$order.$limit;

//echo "query=>".$query."<br>";

$result = $mysqli->query($query) or die("query error => ".$mysqli->error);

while($rs = $result->fetch_object()){

$rsc[]=$rs;

}

//전체게시물 수 구하기

$sqlcnt = "select count(*) as cnt from board where 1=1";

$sqlcnt .= " and status=1";

$sqlcnt .= $search_where;

$countresult = $mysqli->query($sqlcnt) or die("query error => ".$mysqli->error);

$rscnt = $countresult->fetch_object();

$totalCount = $rscnt->cnt;//전체 게시물 갯수를 구한다.

$totalPage = ceil($totalCount/$pageCount);//전체 페이지를 구한다.

if($firstPageNumber < 1) $firstPageNumber = 1;

$lastPageNumber = $firstPageNumber + $pageCount - 1;//페이징 나오는 부분에서 레인지를 정한다.

if($lastPageNumber > $totalPage) $lastPageNumber = $totalPage;

if($firstPageNumber > $totalPage) {

echo "<script>alert('더 이상 페이지가 없습니다.');history.back();</script>";

exit;

}

<thead>

<tr>

</tr>

</thead>

<tbody>

<?php

$idNumber = $totalCount - ($pageNumber-1)*$pageCount;

foreach($rsc as $r){

//검색어만 하이라이트 해준다.

$subject = str_replace($search_keyword,"<span style='color:red;'>".$search_keyword."</

span>",$r->subject);

<tr>

<td><?php echo $r->userid?></td>

<td>

<?php

if($r->parent_id){

echo "  ";

}

<td><?php echo $r->regdate?></td>

</tr>

<?php }?>

</tbody>

</table>

</div>

<input type="text" class="form-control" name="search_keyword" id="search_keyword" placeholder="제목과 내용에서 검색합니다." value="<?php echo $search_keyword;?>" aria-label="Recipient's username" aria-describedby="button-addon2">

</div>

</form>

<!-- <p>

<a class="page-link" href="<?php echo $_SERVER['PHP_SELF']?>?pageNumber=<?php echo $firstPageNumber-$pageCount;?>&firstPageNumber=<?php echo $firstPageNumber-$pageCount;?>&search_keyword=<?php echo $search_keyword;?>">Previous</a>

</li>

<?php

for($i=$firstPageNumber;$i<=$lastPageNumber;$i++){

<li class="page-item <?php if($pageNumber==$i){echo "active";}?>"><a class="page-link" href="<?php echo $_SERVER['PHP_SELF']?>?pageNumber=<?php echo $i;?>&firstPageNumber=<?php echo $firstPageNumber;?>&search_keyword=<?php echo $search_keyword;?>"><?php echo $i;?></a></li>

<?php

}

<a class="page-link" href="<?php echo $_SERVER['PHP_SELF']?>?pageNumber=<?php echo $firstPageNumber+$pageCount;?>&firstPageNumber=<?php echo $firstPageNumber+$pageCount;?>&search_keyword=<?php echo $search_keyword;?>">Next</a>

</li>

</ul>

</nav>

</p> -->

<?php

if($_SESSION['UID']){

<?php

}else{

<?php

}

</p>

<?php

include $_SERVER["DOCUMENT_ROOT"]."/inc/footer.php";

이렇게 바꿨다. 페이징은 주석처리로 감춰놨다. 새로 만든 더보기 버튼을 누르면 다음 페이지가 151번 게시물 아래에 나타나게 된다.

더보기 버튼을 누르면 ajax를 이용해 다음페이지를 가져와서 151번 아래에 붙여주면 된다. 해보자.

/index.php

<?php

include $_SERVER["DOCUMENT_ROOT"]."/inc/header.php";

$search_keyword = $_GET['search_keyword'];

if($search_keyword){

$search_where = " and (subject like '%".$search_keyword."%' or content like '%".$search_keyword."%')";

}

$pageNumber = $_GET['pageNumber']??1;//현재 페이지, 없으면 1

if($pageNumber < 1) $pageNumber = 1;

$pageCount = $_GET['pageCount']??10;//페이지당 몇개씩 보여줄지, 없으면 10

$startLimit = ($pageNumber-1)*$pageCount;//쿼리의 limit 시작 부분

$firstPageNumber = $_GET['firstPageNumber'];

$sql = "select * from board where 1=1";

$sql .= " and status=1";

$sql .= $search_where;

$order = " order by ifnull(parent_id, bid) desc, bid asc";

$limit = " limit $startLimit, $pageCount";

$query = $sql.$order.$limit;

//echo "query=>".$query."<br>";

$result = $mysqli->query($query) or die("query error => ".$mysqli->error);

while($rs = $result->fetch_object()){

$rsc[]=$rs;

}

//전체게시물 수 구하기

$sqlcnt = "select count(*) as cnt from board where 1=1";

$sqlcnt .= " and status=1";

$sqlcnt .= $search_where;

$countresult = $mysqli->query($sqlcnt) or die("query error => ".$mysqli->error);

$rscnt = $countresult->fetch_object();

$totalCount = $rscnt->cnt;//전체 게시물 갯수를 구한다.

$totalPage = ceil($totalCount/$pageCount);//전체 페이지를 구한다.

if($firstPageNumber < 1) $firstPageNumber = 1;

$lastPageNumber = $firstPageNumber + $pageCount - 1;//페이징 나오는 부분에서 레인지를 정한다.

if($lastPageNumber > $totalPage) $lastPageNumber = $totalPage;

if($firstPageNumber > $totalPage) {

echo "<script>alert('더 이상 페이지가 없습니다.');history.back();</script>";

exit;

}

<thead>

<tr>

</tr>

</thead>

<?php

$idNumber = $totalCount - ($pageNumber-1)*$pageCount;

foreach($rsc as $r){

//검색어만 하이라이트 해준다.

$subject = str_replace($search_keyword,"<span style='color:red;'>".$search_keyword."</

span>",$r->subject);

<tr>

<td><?php echo $r->userid?></td>

<td>

<?php

if($r->parent_id){

echo "  ";

}

<td><?php echo $r->regdate?></td>

</tr>

<?php }?>

</tbody>

</table>

</div>

</div>

</form>

<!-- <p>

</li>

<?php

for($i=$firstPageNumber;$i<=$lastPageNumber;$i++){

<?php

}

</li>

</ul>

</nav>

</p> -->

<?php

if($_SESSION['UID']){

<?php

}else{

<?php

}

</p>

$("#more_button").click(function () {

var data = {//more_list_page.php에 넘겨주는 파라미터 값이다.

pageNumber : $('#nextPageNumber').val() ,

pageCount : <?php echo $pageCount;?>,

totalCount : <?php echo $totalCount;?>,

search_keyword : '<?php echo $search_keyword;?>'

};

$.ajax({

async : false ,

type : 'post' ,//post방식으로 넘겨준다. ajax는 반드시 post로 해준다.

url : 'more_list_page.php' ,

data : data ,//위에서 만든 파라미터들을 넘겨준다.

dataType : 'html' ,//리턴받을 형식이다. html말고 text난 json도 있다. json을 가장 많이 쓴다.

error : function() {} ,

success : function(return_data) {

if(return_data==false){

alert('마지막 페이지입니다.');

return;

}else{

$("#board_list").append(return_data);//table 마지막에 붙여준다. 반대는 prepend가 있다.

$("#nextPageNumber").val(parseInt($('#nextPageNumber').val())+1);//다음페이지를 위해 1씩 증가해준다.

}

});

return false;

});

</script>

<?php

include $_SERVER["DOCUMENT_ROOT"]."/inc/footer.php";

이번엔 리턴해주는 부분인 more_list_page.php를 만들어보자.

/more_list_page.php

<?php

include $_SERVER["DOCUMENT_ROOT"]."/inc/dbcon.php";

ini_set( 'display_errors', '0' );

$search_keyword = $_POST['search_keyword'];

if($search_keyword){

$search_where = " and (subject like '%".$search_keyword."%' or content like '%".$search_keyword."%')";

}

$pageNumber = $_POST['pageNumber']??1;//현재 페이지, 없으면 1

if($pageNumber < 1) $pageNumber = 1;

$pageCount = $_POST['pageCount']??10;//페이지당 몇개씩 보여줄지, 없으면 10

$startLimit = ($pageNumber-1)*$pageCount;//쿼리의 limit 시작 부분

$totalCount = $_POST['totalCount'];

$sql = "select * from board where 1=1";

$sql .= " and status=1";

$sql .= $search_where;

$order = " order by ifnull(parent_id, bid) desc, bid asc";

$limit = " limit $startLimit, $pageCount";

$query = $sql.$order.$limit;

$result = $mysqli->query($query) or die("query error => ".$mysqli->error);

while($rs = $result->fetch_object()){

$rsc[]=$rs;

}

$data="";

$idNumber = $totalCount - ($pageNumber-1)*$pageCount;

foreach($rsc as $r){

//검색어만 하이라이트 해준다.

$subject = str_replace($search_keyword,"<span style='color:red;'>".$search_keyword."</

span>",$r->subject);

$data.="

<tr>

<th scope=\"row\">".$idNumber."</th>

<td>".$r->userid."</td>

<td>";

if($r->parent_id){

$data.="  ";

}

$data.="<a href=\"/view.php?bid=".$r->bid."\">".$subject."</a></td>

<td>".$r->regdate."</td>

</tr>";

$idNumber--;

}

if($data){

echo $data;

}else{

echo false;

}

어떻게 보면 간단하다. <tr>부분만 만들어서 던져준다.

이렇게 만든 후 더보기 버튼을 눌러보자.

개발하다 힘들면 눌러.

https://www.zzarbang.com

'PHP강좌 > 게시판만들기강좌' 카테고리의 다른 글

php+mysql 게시판 만들기 강좌 #18-1. 회원 게시판 - 댓글의 수정및 삭제 (7)	2022.02.07
php+mysql 게시판 만들기 강좌 #18. 회원 게시판 - 댓글 (0)	2022.02.04
php+mysql 게시판 만들기 강좌 #16. 회원 게시판 - 페이징 (1)	2022.02.03
php+mysql 게시판 만들기 강좌 #15. 회원 게시판 - 답글 달기 (0)	2022.01.30
php+mysql 게시판 만들기 강좌 #14. 회원 게시판 - 검색하기 (1)	2022.01.30

아빠는개발자

php+mysql 게시판 만들기 강좌 #17. 회원 게시판 - 더보기 feat. Ajax

'PHP강좌 > 게시판만들기강좌' 카테고리의 다른 글

+ Recent posts

티스토리툴바