[7주차 과제] 페이징(Paging)

구현에 사용된 프로그램

• OS Proxmox-ve-7.3-1
• Ubuntu-22.04.2
• Apache2 : Apache/2.4.52 (Ubuntu)
• PHP : PHP 8.1.2-1ubuntu2.11(cli)
• MySQL : mysql Ver 8.0.32-0ubuntu0.22.04.2 for Linux on x86_64 ((Ubuntu))

---

기존 주소 검색(useraddr.php)과 게시판 메인화면(boardIndex.php)에 코드 수정과 페이징 기법을 추가했다

웹 페이징(Paging) : 웹에서 페이징 기법은 사용자가 볼 수 있는 화면에 일정한 개수로 나눠서 보여주는 것

 

00. 주소 검색 기능 구현 업데이트 & 페이징

00-1) 주소 검색 기능 업데이트

<form method="GET" action="useraddr_ok.php" name="userAddrForm" id="addr_Form">
	<p>
		<input type="text" name ="addr" placeholder="주소 입력 : 동국로, 동국로 10">
		<input type="submit" class="form_btn"  value="검색">
	</p>
	<section id="addr_warp">
	<table>
	<?php
		$i=0;
		if($num > 0){
			while($arr = mysqli_fetch_array($rst)){
				$uaddr[$i] = $arr[1]. " ".$arr[8]." ".$arr[11]."-". $arr[12]." ".$arr[15];
	?>
		<tr>
		<td id="table_line">
			<p name="selBtn" id="selBtn" onclick="addrInput(<?php echo $i;?>)"> 
				<input name="selAddr" id="selAddr<?php echo $i;?>" type = "hidden" value = "<?php echo $uaddr[$i];?>"/> 
				<?php echo $uaddr[$i];?>
			</p>
		</td>	
		</tr>
		<?php 
			$i++;
			} 
		} else{
			 echo "주소가 없습니다!!";
		}
		?>    
	</table>
	</section>
</form>

기존 주소 검색 기능은 어떤 주소를 검색해도 검색한 첫 번째 주소만 선택이 되는 문제가 생겼다

문제를 해결하기 위해 검색할 주소 결과와 사용자가 선택할 태그의 id를 배열 형식으로 받아

사용자가 선택했을 때 그에 맞는 태그 ID를 리턴시킨다

 

00-2) 주소 검색기능 Javascript 업데이트

const addrInput = (i) =>{
    var addr = document.getElementById('selAddr'.concat(i)).value;
    opener.document.getElementById('user_address').value = addr;
    // console.log(document.getElementById('selAddr'.concat(i)).value);
    window.close();
}

useraddr.php에 id(seladdr+i)의 값을 변수로 받아서 기존 페이지(join.php)의 주소 검색부분 값에 넣는다

 

00-3) 주소검색 페이징

if(isset($_GET['page']))
	$page = $_GET['page'];
else
	$page = 1;
    	
$cntSql = "select * from userAddrTB 
           where concat(roadName,' ', bulidNumMain,'-', bulidNumSub,' ', buildNum) 
           like '%$userAddr%';";
           
$cntRst = mysqli_query($con, $cntSql);
$cnt = mysqli_num_rows($cntRst);
$pagePer = 6;
$pageIdx = ($page-1)*$pagePer + 1;
$pageIdx -= 1;
    
$sql = "select * from userAddrTB 
        where concat(roadName,' ', bulidNumMain,'-', bulidNumSub,' ', buildNum) 
        like '%$userAddr%' limit $pageIdx, $pagePer;";
        
$rst = mysqli_query($con, $sql);
$num = mysqli_num_rows($rst);

isset() 함수를 통해 page 값이 없으면 1로 주고, 있을 경우 GET방식을 통해 페이지를 가져온다

pagePer은 페이지마다 보여줄 개수를 의미한다

 

 <div id="page_nums">
	<?php
		if($page > 1){
			$pre = $page-1;
			echo "<a href=\"useraddr_ok.php?addr=$userAddr&page=1\" class=\"page_str\">[처음]</a>";
			echo "<a href=\"useraddr_ok.php?addr=$userAddr&page=$pre\" class=\"page_str\">[이전]</a>";
		}
		$totalPage = ceil($cnt / $pagePer);
		$pageNum = 1;

		while($pageNum <= $totalPage){
		if($pageNum == $page)
			echo "<a href=\"useraddr_ok.php?addr=$userAddr&page=$pageNum\" class=\"page_num\" id=\"cur_page\">$pageNum</a>";
		else
			echo "<a href=\"useraddr_ok.php?addr=$userAddr&page=$pageNum\" class=\"page_num\">$pageNum</a>";
			$pageNum++;
		}
		if($page < $totalPage){
			$post = $page+1;
			echo "<a href=\"useraddr_ok.php?addr=$userAddr&page=$post\" class=\"page_str\">[다음]</a>";
			echo "<a href=\"useraddr_ok.php?addr=$userAddr&page=$totalPage\" class=\"page_str\">[끝]</a>";
		}
	?>
</div>

---

01. 게시판 페이징 수정

01-1) 게시판 페이징 준비

if(isset($_GET['page']))
	$page = $_GET['page'];
else
	$page = 1;

$cntSql = "select * from userBoardTB;";
$cntRst = mysqli_query($con, $cntSql); 
$cnt = mysqli_num_rows($cntRst);
$pagePer = 10;
$pageIdx = ($page-1)*$pagePer + 1;
$pageIdx -= 1;
    
$sql = "select * from userBoardTB order by boardDate asc limit $pageIdx, $pagePer;";
$rst = mysqli_query($con, $sql);

 

01-2) 게시판 페이징 

<?php
	if($page > 1){
		$pre = $page-1;
		echo "<a href=\"boardIndex.php?page=1\" class=\"page_str\">[처음]</a>";
		echo "<a href=\"boardIndex.php?page=$pre\" class=\"page_str\">[이전]</a>";
	}
	$totalPage = ceil($cnt / $pagePer);
	$pageNum = 1;

	while($pageNum <= $totalPage){
		if($pageNum == $page)
			echo "<a href=\"boardIndex.php?page=$pageNum\" class=\"page_num\" id=\"cur_page\">$pageNum</a>";
		else
			echo "<a href=\"boardIndex.php?page=$pageNum\" class=\"page_num\">$pageNum</a>";
		$pageNum++;
 	}
	if($page < $totalPage){
		$post = $page+1;
		echo "<a href=\"boardIndex.php?page=$post\" class=\"page_str\">[다음]</a>";
		echo "<a href=\"boardIndex.php?page=$totalPage\" class=\"page_str\">[끝]</a>";
	}

?>

01-3) 게시판 검색 부분 페이징

<?php
	if($page > 1){
		$pre = $page-1;
		echo "<a href=\"boardSearch.php?searchOption=$option&searchTxt=$searchTxt&page=1\" class=\"page_str\">[처음]</a>";
		echo "<a href=\"boardSearch.php?searchOption=$option&searchTxt=$searchTxt&page=$pre\" class=\"page_str\">[이전]</a>";
	}
	$totalPage = ceil($cnt / $pagePer);
	$pageNum = 1;

	while($pageNum <= $totalPage){
		if($pageNum == $page)
			echo "<a href=\"boardSearch.php?searchOption=$option&searchTxt=$searchTxt&page=$pageNum\" class=\"page_num\" id=\"cur_page\">$pageNum</a>";
		else
 			echo "<a href=\"boardSearch.php?searchOption=$option&searchTxt=$searchTxt&page=$pageNum\" class=\"page_num\">$pageNum</a>";
		$pageNum++;
	}
	if($page < $totalPage){
		$post = $page+1;
		echo "<a href=\"boardSearch.php?searchOption=$option&searchTxt=$searchTxt&page=$post\" class=\"page_str\">[다음]</a>";
		echo "<a href=\"boardSearch.php?searchOption=$option&searchTxt=$searchTxt&page=$totalPage\" class=\"page_str\">[끝]</a>";
	}
?>

기존 게시판과 살짝 다른 부분은 다른 페이지로 넘어갈 때 GET메소드 방식의 파라미터를 같이 보내줘야한다

그래서 searchOption = $option 과 searchTxt = $searchTxt를 추가로 넣어줘야한다