php+mysql 게시판 만들기 강좌 #19. 회원 게시판 - 추천, 반대

요즘 게시판들은 대부분 추천 반대 버튼이 있다. 추천 반대 기능을 만들어 보자. 이것도 ajax를 이용할것이다. 

 

우선 테이블을 하나 만들어보자. 추천이나 반대를 누를때 누가 어떤 게시물에 했는지 기록하는 테이블이다.

 

CREATE TABLE `recommend` (
  `reid` int(11) NOT NULL AUTO_INCREMENT,
  `bid` int(11) DEFAULT NULL,
  `userid` varchar(100) DEFAULT NULL,
  `type` varchar(10) DEFAULT NULL,
  `regdate` datetime DEFAULT current_timestamp(),
  PRIMARY KEY (`reid`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4;

 

전에도 얘기했지만 이것이 최선은 아니다. 다른 설계도 가능할것이고 그게 더 좋을 수도 있다. 지금은 이렇게 따라해보자.

 

view.php 추천과 반대 버튼을 추가하고 두 버튼을 눌렀을때 ajax를 호출하도록 작업해보자

 

/view.php

<?php

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

$bid=$_GET["bid"];

$result = $mysqli->query("select * from board where bid=".$bid) or die("query error => ".$mysqli->error);

$rs = $result->fetch_object();

$query="select * from memo where status=1 and bid=".$rs->bid." order by memoid asc";

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

while($mrs = $memo_result->fetch_object()){

    $memoArray[]=$mrs;

}

$query2="select type,count(*) as cnt from recommend r where bid=".$rs->bid." group by type";

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

while($recs = $rec_result->fetch_object()){

  $recommend[$recs->type] = $recs->cnt;

}

?>

      <h3 class="pb-4 mb-4 fst-italic border-bottom" style="text-align:center;">

        - 게시판 보기 -

      </h3>

      <article class="blog-post">

        <h2 class="blog-post-title"><?php echo $rs->subject;?></h2>

        <p class="blog-post-meta"><?php echo $rs->regdate;?> by <a href="#"><?php echo $rs->userid;?></a></p>

        <hr>

        <p>

          <?php echo $rs->content;?>

        </p>

        <div style="text-align:center;">

          <button type="button" class="btn btn-lg btn-primary" id="like_button">추천&nbsp;<span id="like"><?php echo number_format($recommend['like']);?></span></button>

          <button type="button" class="btn btn-lg btn-warning" id="hate_button">반대&nbsp;<span id="hate"><?php echo number_format($recommend['hate']);?></span></button>

        </div>

        <hr>

      </article>

     

      <nav class="blog-pagination" aria-label="Pagination">

        <a class="btn btn-outline-secondary" href="/index.php">목록</a>

        <a class="btn btn-outline-secondary" href="/write.php?parent_id=<?php echo $rs->bid;?>">답글</a>

        <a class="btn btn-outline-secondary" href="/write.php?bid=<?php echo $rs->bid;?>">수정</a>

        <a class="btn btn-outline-secondary" href="/delete.php?bid=<?php echo $rs->bid;?>">삭제</a>

      </nav>

      <div style="margin-top:20px;">

        <form class="row g-3">

          <div class="col-md-10">

            <textarea class="form-control" placeholder="댓글을 입력해주세요." id="memo" style="height: 60px"></textarea>

          </div>

          <div class="col-md-2">

            <button type="button" class="btn btn-secondary" id="memo_button">댓글등록</button>

          </div>

        </form>

      </div>

      <div id="memo_place">

      <?php

        foreach($memoArray as $ma){

      ?>

        <div class="card mb-4" id="memo_<?php echo $ma->memoid?>" style="max-width: 100%;margin-top:20px;">

          <div class="row g-0">

            <div class="col-md-12">

              <div class="card-body">

                <p class="card-text"><?php echo $ma->memo;?></p>

                <p class="card-text"><small class="text-muted"><?php echo $ma->userid;?> / <?php echo $ma->regdate;?></small></p>

                <p class="card-text" style="text-align:right"><a href="javascript:;" onclick="memo_modi(<?php echo $ma->memoid?>)">수정</a> / <a href="javascript:;" onclick="memo_del(<?php echo $ma->memoid?>)">삭제</a></p>

              </div>

            </div>

          </div>

        </div>

      <?php }?>

      </div>

<script>

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

    if(!confirm('추천하시겠습니까?')){

      return false;

    }

     

      var data = {

          type : 'like' ,

          bid : <?php echo $bid;?>

      };

          $.ajax({

              async : false ,

              type : 'post' ,

              url : 'like_hate.php' ,

              data  : data ,

              dataType : 'json' ,

              error : function() {} ,

              success : function(return_data) {

                if(return_data.result=="member"){

                  alert('로그인 하십시오.');

                  return;

                }else if(return_data.result=="check"){

                  alert('이미 추천이나 반대를 하셨습니다.');

                  return;

                }else if(return_data.result=="no"){

                  alert('다시한번 시도해주십시오.');

                  return;

                }else{

                  $("#like").text(return_data.cnt);

                }

              }

          });

  });

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

    if(!confirm('반대하시겠습니까?')){

      return false;

    }

     

      var data = {

          type : 'hate' ,

          bid : <?php echo $bid;?>

      };

          $.ajax({

              async : false ,

              type : 'post' ,

              url : 'like_hate.php' ,

              data  : data ,

              dataType : 'json' ,

              error : function() {} ,

              success : function(return_data) {

                if(return_data.result=="member"){

                  alert('로그인 하십시오.');

                  return;

                }else if(return_data.result=="check"){

                  alert('이미 추천이나 반대를 하셨습니다.');

                  return;

                }else if(return_data.result=="no"){

                  alert('다시한번 시도해주십시오.');

                  return;

                }else{

                  $("#hate").text(return_data.cnt);

                }

              }

          });

  });

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

   

        var data = {

            memo : $('#memo').val() ,

            bid : <?php echo $bid;?>

        };

            $.ajax({

                async : false ,

                type : 'post' ,

                url : 'memo_write.php' ,

                data  : data ,

                dataType : 'html' ,

                error : function() {} ,

                success : function(return_data) {

                  if(return_data=="member"){

                    alert('로그인 하십시오.');

                    return;

                  }else{

                    $("#memo_place").append(return_data);

                  }

                }

        });

    });

  function memo_del(memoid){

    if(!confirm('삭제하시겠습니까?')){

      return false;

    }

   

    var data = {

        memoid : memoid

    };

        $.ajax({

            async : false ,

            type : 'post' ,

            url : 'memo_delete.php' ,

            data  : data ,

            dataType : 'json' ,

            error : function() {} ,

            success : function(return_data) {

              if(return_data.result=="member"){

                alert('로그인 하십시오.');

                return;

              }else if(return_data.result=="my"){

                alert('본인이 작성한 글만 삭제할 수 있습니다.');

                return;

              }else if(return_data.result=="no"){

                alert('삭제하지 못했습니다. 관리자에게 문의하십시오.');

                return;

              }else{

                $("#memo_"+memoid).hide();

              }

            }

    });

  }

  function memo_modi(memoid){

    var data = {

        memoid : memoid

    };

   

    $.ajax({

          async : false ,

          type : 'post' ,

          url : 'memo_modify.php' ,

          data  : data ,

          dataType : 'html' ,

          error : function() {} ,

          success : function(return_data) {

            if(return_data=="member"){

              alert('로그인 하십시오.');

              return;

            }else if(return_data=="my"){

              alert('본인이 작성한 글만 수정할 수 있습니다.');

              return;

            }else if(return_data=="no"){

              alert('수정하지 못했습니다. 관리자에게 문의하십시오.');

              return;

            }else{

              $("#memo_"+memoid).html(return_data);

            }

          }

    });

  }

  function memo_modify(memoid){

    var data = {

        memoid : memoid,

        memo : $('#memo_text_'+memoid).val()

    };

    $.ajax({

          async : false ,

          type : 'post' ,

          url : 'memo_modify_update.php' ,

          data  : data ,

          dataType : 'html' ,

          error : function() {} ,

          success : function(return_data) {

            if(return_data=="member"){

              alert('로그인 하십시오.');

              return;

            }else if(return_data=="my"){

              alert('본인이 작성한 글만 수정할 수 있습니다.');

              return;

            }else if(return_data=="no"){

              alert('수정하지 못했습니다. 관리자에게 문의하십시오.');

              return;

            }else{

              $("#memo_"+memoid).html(return_data);

            }

          }

    });

    }

</script>

<?php

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

?>

 

추천과 반대를 눌렀을때 각각 반응한 스크립트를 넣어줬다. 그리고 기존의 추천과 반대수를 가져와서 각각 넣어준다.

이제 ajax에서 호출하는 파일을 만들어보자.

/like_hate.php

 

<?php session_start();

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

ini_set( 'display_errors', '0' );

if(!$_SESSION['UID']){

    $retun_data = array("result"=>"member");

    echo json_encode($retun_data);

    exit;

}

$bid = $_POST['bid'];

$type = $_POST['type'];

$resultcheck = $mysqli->query("select reid from recommend where userid='".$_SESSION['UID']."' and bid=".$bid) or die("query error => ".$mysqli->error);//동일한 게시물에 대해 추천이나 반대를 한 기록이 있는지 확인

$rsc = $resultcheck->fetch_object();

if($rsc->reid){

    $retun_data = array("result"=>"check");

    echo json_encode($retun_data);

    exit;

}

$sql="INSERT INTO recommend

(bid, userid, type)

VALUES(".$bid.", '".$_SESSION['UID']."', '".$type."')";

$mysqli->query($sql) or die($mysqli->error);//어떤 게시물에 누가 추천이나 반대를 했는지 저장

$result = $mysqli->query("select count(*) as cnt from recommend where type='".$type."' and bid=".$bid) or die("query error => ".$mysqli->error);//해당 게시물에 추천이나 반대가 몇개인지 확인

$rs = $result->fetch_object();

if($result){

    $retun_data = array("result"=>"ok", "cnt"=>$rs->cnt);

    echo json_encode($retun_data);

}else{

    $retun_data = array("result"=>"no");

    echo json_encode($retun_data);

}

?>

       

동일한 게시물에 같은 아이디로는 추천이나 반대를 한번만 할 수 있게 햇다. 그리고 마지막에 추천이나 반대의 토탈을 구해서 리턴해준다. 그리고 화면에 뿌려준다.

 

 

소스가 길어지고 파일이 많아졌지만 기본적인 흐름은 비슷하다.