[6주차 과제-2] 게시판 검색 구현

구현에 사용된 프로그램

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))

00. 검색 구현을 위해 boardIndex.php 업데이트

00-1) 검색할 폼 제작하기

<div id="search">
	<form method="GET" action="boardSearch.php">
		<select name="searchOption" id="search_option">
			<option value=boardTitle>제목</option>
			<option value=boardDetail>내용</option>
			<option value=userName>작성자</option>
		</select>
		<input type="text" id="search_bar" name="searchTxt" placeholder="검색 내용 입력해주세요"/>
		<input type="submit" value="Search" id="search_btn"/>
	</form> 
</div>

1. Form의 GET 메소드 방식으로 검색할 옵션과 검색한 내용을 boardSearch.php로 전달한다

2. select 태그를 통해 사용자가 검색할 옵션을 선택할 수 있게 만든다

01. 검색 기능을 구현

01-1) boardIndex.php를 베이스로 구현한다

01-2) boardIndex.php에서 받아온 option에 따라 sql 질의문을 작성한다

$option = $_GET['searchOption'];
$searchTxt = $_GET['searchTxt'];
    
if($option == "userName"){
	$cmpSql = "select * from userTB where $option like '%$searchTxt%';";
	$cmpRst = mysqli_query($con, $cmpSql);
	$id = mysqli_fetch_array($cmpRst);
	$userId = $id['userId'];
	$sql = "select * from userBoardTB where userId='$userId' order by boardDate asc limit $pageIdx, $pagePer;";
}else{
	$sql = "select * from userBoardTB where $option like '%$searchTxt%' order by boardDate asc limit $pageIdx, $pagePer;";
}
$rst = mysqli_query($con, $sql);

1. userName 같은 경우 userBoardTB에 존재하지 않기 때문에 userTB에서 userName을 통해 userId를 가져온다

2. boardTitle, boardDetail은 userBoardTB에 존재하기 때문에 사용자가 검색한 내용을 like를 통해 DB에 값을 가져온다

※ like를 사용한 이유는 사용자가 제목, 내용, 작성자의 일부만 입력해도 검색 내용이 나올 수 있어야하기에 사용했다

02. 페이징

02-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;

02-2) 페이징 구현

<div id="page_nums">
<?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>";
		}
?>
</div>

전체 코드

boardIndex.php

<?php
    include('./connect.php');
    //if($con) echo "ok\n";
    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);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Board</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./css/shared.css">
    <link rel="stylesheet" href="./css/boardIndex.css">
</head>
<body>
    <header>
        <a href="main.php" id="logo">Wlkate</a>
        <nav>
            <ul>
               <li><a href="boardIndex.php">Board</a></li>
               <li><a href="index.php">Login</a></li>
            </ul>
        </nav>
    </header>
    <main id="board_wrap" class="wrap">
        <section >
            <div id="board_header">
            	<p id="page_title">Wlkate 게시판</p>
            </div>
            <div id="board_main">
                <table id="board">
                <thead>
                    <tr>
                        <th width=100>No</th>
                        <th width=500>제목</th>
                        <th width=200>작성자</th>
                        <th width=200>작성일</th>
                        <th width=100>조회수</th>
                        <th width=100>추천수</th>
                    </tr>
                </thead>
                <?php 
                    while($arr = mysqli_fetch_array($rst)) {
                        $cmpId = $arr['userId'];
                        $idSql = "select * from userTB where userId = '$cmpId';";
                        $idRst = mysqli_query($con, $idSql);
                        $idArr = mysqli_fetch_array($idRst);
                
                ?>
                <tbody>
                    <tr align="center">
                        <td><?php echo $arr['boardIdx']; ?></td>
                        <td><a href="boardView.php?idx=<?php echo $arr['boardIdx']; ?>"><?php echo $arr['boardTitle']; ?></a></td>
                        <td><?php echo $idArr['userName']; ?></td>
                        <td><?php echo $arr['boardDate']; ?></td>
                        <td><?php echo $arr['boardViews']; ?></td>
                        <td><?php echo $arr['boardGood']; ?></td>
                    </tr>
                </tbody>
                <?php } ?>
            </table>
            </div>
            <div id="board_bottom">
                <div id="search">
                    <form method="GET" action="boardSearch.php">
                        <select name="searchOption" id="search_option">
                            <option value=boardTitle>제목</option>
                            <option value=boardDetail>내용</option>
                            <option value=userName>작성자</option>
                        </select>
                        <input type="text" id="search_bar" name="searchTxt" placeholder="검색 내용 입력해주세요"/>
                        <input type="submit" value="Search" id="search_btn"/>
                    </form> 
                </div>
                <div id="page_nums">
                <?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>";
                    }
                ?>
                </div>
                <div id="board_write">
                    <p><input type="button" value="글쓰기" onclick="location.href='boardWrite.php'" id="write_btn" class="form_btn"/></p>
                
                </div>
            </div>
        </section>
    </main>
</body>
</html>

boardSearch.php

<?php
    include('./connect.php');
   
    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;
    
    $option = $_GET['searchOption'];
    $searchTxt = $_GET['searchTxt'];
    
    if($option == "userName"){
        $cmpSql = "select * from userTB where $option like '%$searchTxt%';";
        $cmpRst = mysqli_query($con, $cmpSql);
        $id = mysqli_fetch_array($cmpRst);
        $userId = $id['userId'];
        $sql = "select * from userBoardTB where userId='$userId' order by boardDate asc limit $pageIdx, $pagePer;";
    }else{
        $sql = "select * from userBoardTB where $option like '%$searchTxt%' order by boardDate asc limit $pageIdx, $pagePer;";
    }
    $rst = mysqli_query($con, $sql);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Board</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./css/shared.css">
    <link rel="stylesheet" href="./css/boardIndex.css">
</head>
<body>
    <header>
        <a href="main.php" id="logo">Wlkate</a>
        <nav>
            <ul>
               <li><a href="boardIndex.php">Board</a></li>
               <li><a href="index.php">Login</a></li>
            </ul>
        </nav>
    </header>
    <main id="board_wrap" class="wrap">
        <section >
            <div id="board_header">
            	<p id="page_title">Wlkate 게시판</p>
            </div>
            <div id="board_main">
                <table id="board">
                <thead>
                    <tr>
                        <th width=100>No</th>
                        <th width=500>제목</th>
                        <th width=200>작성자</th>
                        <th width=200>작성일</th>
                        <th width=100>조회수</th>
                        <th width=100>추천수</th>
                    </tr>
                </thead>
                <?php 
                    while($arr = mysqli_fetch_array($rst)) {
                        $cmpId = $arr['userId'];
                        $idSql = "select * from userTB where userId = '$cmpId';";
                        $idRst = mysqli_query($con, $idSql);
                        $idArr = mysqli_fetch_array($idRst);
                
                ?>
                <tbody>
                    <tr align="center">
                        <td><?php echo $arr['boardIdx']; ?></td>
                        <td><a href="boardView.php?idx=<?php echo $arr['boardIdx']; ?>"><?php echo $arr['boardTitle']; ?></a></td>
                        <td><?php echo $idArr['userName']; ?></td>
                        <td><?php echo $arr['boardDate']; ?></td>
                        <td><?php echo $arr['boardViews']; ?></td>
                        <td><?php echo $arr['boardGood']; ?></td>
                    </tr>
                </tbody>
                <?php } ?>
            </table>
            </div>
            <div id="board_bottom">
            <div id="search">
                <form method="GET" action="boardSearch.php">
                    <select name="searchOption" id="search_option">
                        <option value=boardTitle>제목</option>
                        <option value=boardDetail>내용</option>
                        <option value=userName>작성자</option>
                    </select>
                    <input type="text" id="search_bar" name="searchTxt" placeholder="검색 내용 입력해주세요"/>
                    <input type="submit" value="Search" id="search_btn"/>
                </form> 
                </div>
            <div id="page_nums">
            <?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>";
                }
            ?>
            </div>
            <div id="board_write">
                <p><input type="button" value="글쓰기" onclick="location.href='boardWrite.php'" id="write_btn" class="form_btn"/></p>
            
            </div>
            </div>
        </section>
    </main>
</body>
</html>

'모의해킹 공부 > WEB 개발' 카테고리의 다른 글

[8주차 과제] 파일 업로드 & 다운로드 (0)	2023.05.16
[7주차 과제] 페이징(Paging) (0)	2023.05.15
[6주차 과제-1] 게시판 수정 & 삭제 (0)	2023.05.10
[5주차 과제-2] 게시판 쓰기 & 읽기 (0)	2023.04.30
[5주차 과제-1] 게시판 DB구축 & 메인 페이지 구현 (0)	2023.04.29

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Bandit10 Study

[6주차 과제-2] 게시판 검색 구현

'모의해킹 공부 > WEB 개발' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

[6주차 과제-2] 게시판 검색 구현

'모의해킹 공부 > WEB 개발' 카테고리의 다른 글

'모의해킹 공부/WEB 개발' Related Articles

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역