php+mysql 게시판 만들기 강좌 #18-1. 회원 게시판 - 댓글의 수정및 삭제

 

 

view.php를 조금 수정한다.

/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 desc";

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

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

    $memoArray[]=$mrs;

}

?>

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

        <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

      if(isset($memoArray)){

        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

                if($ma->filename){

                ?>

                <img src="/data/<?php echo $ma->filename;?>" style="max-width:90%;">

                <?php }?>

                <br>  

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

  $("#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);

                  }

                }

        });

    });

</script>

<?php

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

?>

 

준비작업을 해준다. 우선 삭제부터 해볼건데 삭제를 클릭하면 해당 댓글을 삭제할 php 파일을 호출해서 삭제해주고 삭제가 되면 현재 보이고 있는 댓글을 감추기 위해 div에 아이디값을 부여해놨다.

이제 삭제 함수를 만들고 ajax에서 사용할 삭제용 php 파일을 만들어보자. 그전에 view.php를 조금 수정한다.

 

/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 desc";

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

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

    $memoArray[]=$mrs;

}

?>

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

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

  $("#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();

              }

            }

    });

  }

</script>

<?php

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

?>

이렇게 memo_del 함수를 만들어서 ajax를 통해 삭제할 준비를 한다. 이번엔 리턴값을 html이 아닌 json으로 받을것이다. json으로 받을때는 리턴값의 형식도 json으로 해주어야한다.

view.php를 수정했으니 memo_write.php도 수정해서 메모 등록시 화면을 동일하게 해준다.

/memo_write.php

 

<?php session_start();

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

ini_set( 'display_errors', '0' );

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

    echo "member";

    exit;

}

$memo  = $_POST['memo'];

$bid  = $_POST['bid'];

$memoid = $_POST['memoid']??0;

$sql="INSERT INTO memo

(bid, pid, userid, memo, status)

VALUES(".$bid.", ".$memoid.", '".$_SESSION['UID']."', '".$memo."', 1)";

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

if($result)$last_memoid = $mysqli -> insert_id;

echo "<div class=\"card mb-4\" id=\"memo_".$last_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\">".$memo."</p>

      <p class=\"card-text\"><small class=\"text-muted\">".$_SESSION['UID']." / now</small></p>

      <p class=\"card-text\" style=\"text-align:right\"><a href=\"javascript:;\" onclick=\"memo_modi(".$last_memoid.")\">수정</a> / <a href=\"javascript:;\" onclick=\"memo_del(".$last_memoid.")\">삭제</a></p>

    </div>

  </div>

</div>

</div>";

?>

   

아이디 부분과 수정 삭제 부분을 추가했다.

 

이제 memo_delete.php파일을 만들어보자.

 

/memo_delete.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;

}

$memoid = $_POST['memoid'];

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

$rs = $result->fetch_object();

if($rs->userid!=$_SESSION['UID']){

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

    echo json_encode($retun_data);

    exit;

}

$sql="update memo set status=0 where memoid=".$memoid;//status값을 바꿔준다.

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

if($result){

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

    echo json_encode($retun_data);

}else{

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

    echo json_encode($retun_data);

}

?>

       

소스는 간단한다. 본인이 쓴 댓글인지 확인하는 부분과 게시물의 상태값을 0으로 바꿔주면 된다. 리턴값 부분을 보면 조금다른데 json형태로 만들어서 리턴해주어야한다. 물론 html로 해도 되는데 화면에 뿌려줄게 아니라면 json으로 처리한다.

 

이번엔 수정을 해보자. 수정은 조금 더 복잡하다. 수정 버튼을 클릭하면 수정하려고 하는 댓글 부분을 숨기고 대신 수정창을 보여주어야 한다. 이부분을 ajax로 처리한다. 그리고 수정을 한 경우에 수정된 값을 입력해주고 그부분에 다시 댓글을 보여주게 한다. 우선 view.php를 수정한다.

 

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

}

?>

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

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

  $("#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";

?>

 

소스를 보면 memo_modi함수와 memo_modify함수가 있다. memo_modi는 화면에 수정할 수 있는 textarea를 보여주는 화면을 만드는 함수다. 여기서 사용하는 memo_modify.php는 아래와 같다.

 

/memo_modify.php

 

<?php session_start();

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

ini_set( 'display_errors', '0' );

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

    echo "member";

    exit;

}

$memoid = $_POST['memoid'];

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

$rs = $result->fetch_object();

if($rs->userid!=$_SESSION['UID']){

    echo "my";

    exit;

}

echo "<form class=\"row g-3\">

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

    <textarea class=\"form-control\" id=\"memo_text_".$rs->memoid."\" style=\"height: 60px\">".$rs->memo."</textarea>

  </div>

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

    <button type=\"button\" class=\"btn btn-secondary\" onclick=\"memo_modify(".$rs->memoid.")\" >댓글수정</button>

  </div>

</form>";

?>

       

역시나 간단한다. memo 테이블에서 해당하는 댓글을 가져와서 수정할 수 있도록 보여준다.

 

그리고 댓글 수정 버튼을 눌렀을때 수정해주고 화면에 다시 뿌려주는 함수는 memo_modify다. 여기서 사용하는 memo_modify_update.php를 보자.

 

/memo_modify_update.php

 

<?php session_start();

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

ini_set( 'display_errors', '0' );

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

    echo "member";

    exit;

}

$memoid = $_POST['memoid'];

$memo = $_POST['memo'];

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

$rs = $result->fetch_object();

if($rs->userid!=$_SESSION['UID']){

    echo "my";

    exit;

}

$sql="update memo set memo='".$memo."' where memoid=".$memoid;//status값을 바꿔준다.

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

echo "<div class=\"row g-0\">

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

    <div class=\"card-body\">

      <p class=\"card-text\">".$memo."</p>

      <p class=\"card-text\"><small class=\"text-muted\">".$_SESSION['UID']." / now</small></p>

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

    </div>

  </div>

</div>";

?>

       

 

변경된 값으로 update해준후 변경된 값을 화면에 뿌려준다. 조금 어렵지만 그대로 따라해보자. 이해가  잘 안된다면 일단 넘어가자.