[Normaltic's 취업반 과제] 게시글 삭제하기

테스트용 게시글을 등록합니다.

 

이미지와 글이 잘 등록되었습니다.

게시판에서도 잘 도출되는것을 확인할 수 있습니다.

삭제하기 버튼을 누르면

정말 삭제하시겠습니까? 라는 팝업이 나옵니다.

취소를 누르게 되면 그대로 그 팝업을 끄게 되고

확인을 누르면 삭제를 하고 삭제 완료 팝업이 뜨게 됩니다.

삭제가 잘 된 것을 확인할 수 있습니다.

open_contents.php

일단.. title과 writed_date를 쿼리문으로 보내서 그 두가지를 기준으로 게시물을 삭제할 예정이라서 그 두 가지를 delete_contents.php로 보낼 준비를 한다.

일단 이 것 두개도 다른 곳에서 GET방식으로 받아오는 것이기 때문에 받아오고

$title = $_GET['title'];
$writed_date = $_GET['writed_date'];

삭제하기 버튼을 누르게 되면

<button class="submit-button" name="delete" value="deletereview" onclick="confirmation()" type="submit">삭제하기</button>

해당 함수를 부르게 된다. 

confirmation()

그러면 js가 실행되게 되는데, 정말 삭제하시겠습니까라는 confirm창이 뜬다.

var answer = confirm("정말 삭제하시겠습니까?")

그 창에서 확인을 누르면 삭제완료 쪽으로

if (answer) {

      alert("삭제 완료")
      $.ajax({
        url: 'delete_contents.php',
        data: { 'title': '<?php echo $title; ?>', 'writed_date': '<?php echo $writed_date; ?>' },
        type: 'GET',
        success: function (result) {
          location.reload();
          // Do something with the result
        }
      });

    }

취소를 누르면 삭제 취소 쪽으로 이동한다.

else {
      // you do nothing here
      alert("삭제 취소")
    }

FULL CODE

[생략]

$title = $_GET['title'];
$writed_date = $_GET['writed_date'];

[생략]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">


  function confirmation() 
  {
    var answer = confirm("정말 삭제하시겠습니까?")
    if (answer) {

      alert("삭제 완료")
      $.ajax({
        url: 'delete_contents.php',
        data: { 'title': '<?php echo $title; ?>', 'writed_date': '<?php echo $writed_date; ?>' },
        type: 'GET',
        success: function (result) {
          location.reload();
          // Do something with the result
        }
      });

    }
    else {
      // you do nothing here
      alert("삭제 취소")
    }
  }

</script>

[생략]

<button class="submit-button" name="delete" value="deletereview" onclick="confirmation()" type="submit">삭제하기</button>

[생략]

delete_contents.php

간단하다.. 그냥 title이랑 writed_date받아와서 맞는거 있으면 해당 데이터를 지우는 것 뿐..

<?php
require_once ('connect_db.php');


  $title = $_GET['title'];
  $writed_date = $_GET['writed_date'];
  $table_name = "category_table";
 $sql_query = "DELETE FROM $table_name WHERE `title`='$title' and `writed_date`='$writed_date'";
  $sql_res = mysqli_query(connect_db(), $sql_query);
  


?>

 

 

중요 [Java Script] ajax

아 이거 얘기 안할 수 없지요.. 이것 때문에 3일을 고생했습니다

삭제 완료 부분에 보면 굉장히 생소한 코드가 보일 것이다.

바로 ajax라는 것인데, 해당 코드는 js에서 php로 코드를 이벤트를 넘겨주는 부분으로,

원래는 js는 클라이언트 단에서, php는 서버 단에서 각자 일을 하면서 간섭하지 않기 때문에 보안 측면에서도 그게 맞다고 생각하지만

php에서 제공하는 confirm의 경우에는 확인과 취소 중 어느 버튼을 눌러도 true가 return된다는 치명적인 단점이 있기 때문에 사용자가 어떤 버튼을 클릭했는지 특정할 수 없었다.

때문에 js에서 cinfirm을 띄운 후 확인과 취소 중 어떤 버튼을 클릭했는지 체크 한 후 이벤트를 발생시킬 수 밖에 없는데,

그런것 때문에 만들어 진 것이 ajax이다.

 

우선 ajax는 jquery를 기반으로 사용하기 때문에 해당 script를 불러와서 사용해야 하고

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

사용법은 이렇게 된다.

$.ajax({
        url: 'delete_contents.php',
        data: { 'title': '<?php echo $title; ?>', 'writed_date': '<?php echo $writed_date; ?>' },
        type: 'GET',
        success: function (result) {
          location.reload();
          // Do something with the result
        }
      });

url에는 어떤 php를 부를지

data에는 어떤 데이터를 넘길지

type은 method를 넘기면 된다. POST인지 GET인지 등등

지금 코드에는 success만 있는데, 원래는 fail, error등 결과값을 체크할 수 있다.

 

ref. https://life-with-coding.tistory.com/54

[웹][javascript] confirm() 으로 ajax 구문 실행

https://velog.io/@sorakim92/egov-ajax-2%EA%B0%9C%EC%9D%98-ajax-2%EA%B0%9C%EC%9D%98-submit-button-%EC%8B%9C-%EC%9D%BC%EC%96%B4%EB%82%A0-%EC%88%98-%EC%9E%88%EB%8A%94-%EC%98%A4%EB%A5%98

[egov, ajax] 2개의 ajax, 2개의 submit button 시 생길 수 있는 오류