silver surfer

Web Hacking Study/Web Page 만들기

게시판 페이지 개발 (게시글 검색 기능, 게시글 검색 시 기간 설정)

silver surfer 2022. 6. 6.

** list.php

<body>의 <table> 태그 위에 추가

<div style="text-align: center; margin-bottom: 20px; font-size: 30px">
      <form action="search_result.php" method="get">
        <select name="category" id="search" onchange="info()">
          <option value="title"> 제목 </option>
          <option value="name"> 작성자 </option>
          <option value="content"> 내용 </option>
        </select>
        <input type="text" name="search" id="search_box" size="30" style="margin-left: 10px; margin-right: 10px;" autocomplete="off" />
        <button type="submit" class="s_btn">검색</button>
        <div>
          <input type = date name="date1">
          -
          <input type = date name="date2">
        </div>
      </form>
    </div>

select 요소가 변경되면 onchange 를 통해 info()를 호출한다.

 

 

<head>태그 사이 <script> 코드에서 function info() 추가

<script>
      function info() {
        var option = document.getElementById("search");
        var opt_value = option.options[option.selectedIndex].value;
        var info =""
        if(opt_value == 'title'){
          info="제목을 입력하세요";
        } else if(opt_value == 'name') {
          info = "작성자를 입력하세요";
        } else if(opt_value == 'content') {
          info = "내용을 입력하세요";
        }
        document.getElementById("search_box").placeholder = info;
      }
</script>

list.php 수정은 끝이다

 

 

이제 검색 결과를 처리해주는 php 파일을 새로 작성한다 (search_result.php)

코드는 list.php와 대부분 동일하고 검색 결과를 처리 및 출력하는 코드만 추가한다

 

** search_result.php

<?php
	session_start();
	$conn = mysqli_connect('localhost','root','mysql','board');

	$category = $_GET['category'];
	$search = $_GET['search'];
	$date1 = $_GET['date1'];
	$date2 = $_GET['date2'];
?>

category(카테고리 - 제목, 작성자, 내용), search(검색창 내용), date1(~부터), date2(~까지) 변수로 받는다

 

if($date1 && $date2) {
	$sql2 = "SELECT * FROM board WHERE $category LIKE '%$search%' 
    AND udate BETWEEN '$date1' AND '$date2' ORDER BY idx DESC LIMIT $page_start, $list_num";
} else {
	$sql2 = "SELECT * FROM board WHERE $category LIKE '%$search%' 
    ORDER BY idx DESC LIMIT $page_start, $list_num";
}
$result = mysqli_query($conn, $sql2);

date1, date2 값이 있으면 → board DB에서 해당 $category에 $search 내용이 포함되어있고, 날짜가 $date1~$date2 사이인 글을 가져온다.

 

 

검색 결과가 없을 경우 

<?php }
        if(!$search_result = mysqli_num_rows($result)) {?>
        	<tbody>
        		<tr style="color: red; background: #E6E4E7; opacity:0.6; font-size:17px; font-weight: bold;" align="center">
        			<td> x </td>
        			<td width="500">x</td>
        			<td width="100">x</td>
        			<td width="200">x</td>
        			<td>x</td>
        			<td>x</td>
        	</tbody>
<?php }

 

 

게시판 페이징 부분도 수정한다

<div style="text-align: center; margin-top: 10px; font-size: 20px">
      <?php
      if($page <= 1){
        echo "<a href=\"search_result.php?page=1&category=$category&search=$search&date1=$date1&date2=$date2\"> ◀ 이전 </a>";
      } else {
      	$pre = $page - 1;
        echo "<a href=\"search_result.php?page=$pre&category=$category&$search=$search&date1=$date1&date2=$date2\"> ◀ 이전 </a>";
      };
      ?>

       <?php 
       $per=1;
       while($per <= $total_page){
            if($page==$per){
                echo "<a href=\"search_result.php?page=$per&category=$category&search=$search&date1=$date1&date2=$date2\"> $per </a>";
            } else {
            echo "<a href=\"search_result.php?page=$per&category=$category&search=$search&date1=$date1&date2=$date2\"> $per </a>"; }
            $per++;
        }
        ?>

      <?php
      if($page >= $total_page){
        echo "<a href=\"search_result.php?page=$total_page&category=$category&search=$search&date1=$date1&date2=$date2\"> 끝 </a>";
      } else {
      	$next = $page + 1;
        echo "<a href=\"search_result.php?page=$next&category=$category&search=$search&date1=$date1&date2=$date2\"> 다음 ▶ </a>";
      };
      ?>
</div>

 

 

** search_result.php 전체 코드

<?php
	session_start();
	$conn = mysqli_connect('localhost','root','mysql','board');

	$category = $_GET['category'];
	$search = $_GET['search'];
	$date1 = $_GET['date1'];
	$date2 = $_GET['date2'];
?>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Board</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
        * {font-family: 'Noto Sans KR', sans-serif;}
        body {
          height: 100vh;
          background: url('bg.jpg') no-repeat center;
          background-size: cover;
          overflow: auto;
        }
        table {
              border-top: 1px solid #444444;
              border-collapse: collapse;
              color: #1F1821;
          }
        tr {
            border-bottom: 1px solid #444444;
            padding: 10px;
        }
        td {
            border-bottom: 1px solid #B8B7B9;
            padding: 10px;
        }

        a:link {
            color: #57A0EE;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }
        .btn {
          text-align: center;
          padding-top: 20px;
        }
        .read_btn {
          width: 700px;
          height: 200px;
          text-align: center;
          margin: auto;
          margin-top: 50px;
        }

        .read_btn1 {
          height: 50px;
          width: 100px;
          font-size: 20px;
          text-align: center;
          background-color: #FFFFFF;
          opacity: 0.9;
          border: 2px solid black;
          border-radius: 10px;
        }
        select {
          width: 80px;
          padding: .2em .5em;
          text-align: center;
          border: 1px solid #ffffff;
          border-radius: 5px;
          background-color: #D8D8D8;
          font-size: 15px;
        }
        input[type=text] {
          border: 0;
          border-radius: 5px;
          font-size: 17px;
          color: #240B3B;
          opacity: 0.8;
        }
        input[type=text]:hover
        {
            background : aliceblue;
        }
        input[type=date] 
        {
          border: 0;
          border-radius: 5px;
          background : aliceblue;
          font-size: 15px;
          color: #240B3B;
          margin-left: 5px;
          margin-right: 5px;
        }
        .s_btn {
          width: 50px;
          padding: .2em .6em;
          text-align: center;
          border: 1px solid #ffffff;
          border-radius: 5px;
          background-color: #CEECF5;
          font-size: 15px;
        }
        .s_btn:hover {
          background-color: #A9E2F3;
        }
    </style>
    <script>
      function info() {
        var option = document.getElementById("search");
        var opt_value = option.options[option.selectedIndex].value;
        var info =""
        if(opt_value == 'title'){
          info="제목을 입력하세요";
        } else if(opt_value == 'name') {
          info = "작성자를 입력하세요";
        } else if(opt_value == 'content') {
          info = "내용을 입력하세요";
        }
        document.getElementById("search_box").placeholder = info;
      }
    </script>
</head>
<body>
    <p style="font-size:25px; text-align:center; color: white;"><b>게시판</b></p>
    <div style="text-align: center; margin-bottom: 30px; font-size: 30px">
      <form action="search_result.php" method="get">
        <select name="category" id="search" onchange="info()">
          <option value="title"> 제목 </option>
          <option value="name"> 작성자 </option>
          <option value="content"> 내용 </option>
        </select>
        <input type="text" name="search" id="search_box" size="30" style="margin-left: 10px; margin-right: 10px;" autocomplete="off" />
        <button type="submit" class="s_btn">검색</button>
        <div>
	        <input type = date name="date1">
	        -
	        <input type = date name="date2">
    	</div>
      </form>
    </div>
    <table align=center>
        <thead align="center">
            <tr style="background: #AAA7B0; opacity:0.9; font-size:20px">
                <th width=70>번호</th>
                <th width=300>제목</th>
                <th width=120>작성자</th>
                <th width=120>작성일</th>
                <th width=70>조회수</th>
                <th width=70>좋아요</th>
            </tr>
       </thead>
        <?php
            $conn = mysqli_connect('localhost', 'root', 'mysql', 'board');

            $n_sql = "SELECT count(*) FROM board";
            $n_result = mysqli_query($conn,$n_sql);
            $row = mysqli_fetch_row($n_result);
            $num = $row[0];

            $list_num=5; //한 페이지에 보여줄 개수
            $page_num=3; //블록 당 보여줄 페이지 개수
            $page=isset($_GET['page'])? $_GET['page'] :1;

            $total_page = ceil($num/$list_num); //전체 페이지 수
            $total_block=ceil($total_page/$page_num); //전체 블록 수
            $now_block = ceil($page/$page_num); //현재 블록 번호

            $block_start=(($now_block-1)*$page_num)+1;// 블록의 시작 번호
            if($block_start <= 0){
              $block_start =1;
            }

            $block_end=$now_block*$page_num; //블록의 마지막 번호
            if($block_end>$total_page){
              $block_end=$total_page;
            }

            $page_start=($page-1) * $list_num;
            if($date1 && $date2) {
            	$sql2 = "SELECT * FROM board WHERE $category LIKE '%$search%' AND udate BETWEEN '$date1' AND '$date2' ORDER BY idx DESC LIMIT $page_start, $list_num";
            } else {
            	$sql2 = "SELECT * FROM board WHERE $category LIKE '%$search%' ORDER BY idx DESC LIMIT $page_start, $list_num";
       		}
            $result = mysqli_query($conn, $sql2);
            $cnt = $page_start+1;

            while($row = mysqli_fetch_array($result)){
        ?>
            <tbody>
                <tr align=center style="background: #E6E4E7; opacity:0.6; font-size:17px">
                    <td><?php echo $cnt;?></td>
                    <td width="500" align="center"><a href="read.php?idx=<?=$row['idx']?>"><?php echo $row['title'];?></a></td>
                    <td width="100" align="center"><?php echo $row['name'];?></td>
                    <td width="200" align="center"><?php echo $row['udate'];?></td>
                    <td><?php echo $row['hit'];?></td>
                    <td><?php echo $row['liked'];?></td>
                </tr>
                <?php
                $cnt++;
                ?>
            </tbody>
        <?php }
        if(!$search_result = mysqli_num_rows($result)) {?>
        	<tbody>
        		<tr style="color: red; background: #E6E4E7; opacity:0.6; font-size:17px; font-weight: bold;" align="center">
        			<td> x </td>
        			<td width="500">x</td>
        			<td width="100">x</td>
        			<td width="200">x</td>
        			<td>x</td>
        			<td>x</td>
        	</tbody>
        <?php }
        ?>
    </table>
     <div style="text-align: center; margin-top: 10px; font-size: 20px">
      <?php
      if($page <= 1){
        echo "<a href=\"search_result.php?page=1&category=$category&search=$search&date1=$date1&date2=$date2\"> ◀ 이전 </a>";
      } else {
      	$pre = $page - 1;
        echo "<a href=\"search_result.php?page=$pre&category=$category&$search=$search&date1=$date1&date2=$date2\"> ◀ 이전 </a>";
      };
      ?>

       <?php 
       $per=1;
       while($per <= $total_page){
            if($page==$per){
                echo "<a href=\"search_result.php?page=$per&category=$category&search=$search&date1=$date1&date2=$date2\"> $per </a>";
            } else {
            echo "<a href=\"search_result.php?page=$per&category=$category&search=$search&date1=$date1&date2=$date2\"> $per </a>"; }
            $per++;
        }
        ?>

      <?php
      if($page >= $total_page){
        echo "<a href=\"search_result.php?page=$total_page&category=$category&search=$search&date1=$date1&date2=$date2\"> 끝 </a>";
      } else {
      	$next = $page + 1;
        echo "<a href=\"search_result.php?page=$next&category=$category&search=$search&date1=$date1&date2=$date2\"> 다음 ▶ </a>";
      };
      ?>
    </div>
    <div class="read_btn">
      <button class="read_btn1" onclick="window.location.href='write.php'">글쓰기</button>&nbsp;&nbsp;
      <button class="read_btn1" onclick="window.location.href='main.php'">메인으로</button>
    </div>
</body>
</html>

 

** 구현

 

제목 검색

 

날짜로 검색

'Web Hacking Study > Web Page 만들기' 카테고리의 다른 글

게시판 페이지 개발 (좋아요/좋아요 취소)  (0) 2022.06.15
게시판 페이지 개발 (파일 업로드, 파일 다운로드)  (0) 2022.06.07
게시판 페이지 개발 (게시글 페이징)  (0) 2022.06.05
게시판 페이지 개발 (게시글 삭제 기능)  (0) 2022.05.30
게시판 페이지 개발 (게시글 수정 기능)  (0) 2022.05.29

댓글

티스토리툴바