Membuat Multiple Delete Dengan Ajax Javascript Part2

Hallo teman-teman Dumet School, kembali lagi bersama saya Shelli Ripati di Kursus Web Design. Sebelumnya kita sudah membuat struktur html dengan function untuk menampilkan data. Nah sekarang pada artikel tentang Membuat Multiple Delete Dengan Ajax Javascript Part2 kita akan membahas tentang function multiple delete.

Teman-teman bisa tambahkan function delete di dalam app dan event change untuk checkbox yang kemudian ambil data berdasarkan id yang di checked kemudian data tersebut dikirim ke file delete.php untuk melakukan request hapus ke database berdasarkan id. Berikut ini script event change yang harus di buat.

// DELETE
function delFunction(cek, limit) {
  let iddelete =[];

  // delete all
  let cekall = document.querySelectorAll(".checked-all")[0];
  cekall.onchange = function(){
    if(cekall.checked) {
      for (var i = 0; i < cek.length; i++) { 
        cek[i].checked = true;
        let values = cek[i].value;
        iddelete.push(values);
      }
    } else {
      for (var i = 0; i < cek.length; i++) {
        cek[i].checked = false;
        iddelete = [];
      }
    }
  }

  // delete each
  for(var j=0; j<cek.length; j++){
    cek[j].onchange = function(){
      if(this.checked){
        this.checked = true;
        let val = this.value;
        iddelete.push(val);
      }else{
        this.checked = false;
        cekall.checked = false;
        let val = this.value;
        var index = iddelete.indexOf(val);
        iddelete.splice(index,1);
      }
    }
  }

  // konfirm delete
  let del = document.querySelectorAll('.btn-delete')[0];
  del.onclick = function(e){
    e.preventDefault()
    let konfirm = confirm("Apakah Yakin Dihapus?");
    if(konfirm == true){
      app.delete(iddelete, limit);
      app.show(limit);
    }   
  }

Nah Langkah Selanjutnya untuk Membuat Multiple Delete Dengan Ajax Javascript Part2, teman-teman buat function delete seperti di bawah ini.

delete: function(id){
    let that = this
    load_ajax('GET', 'app/delete.php?id='+id, null, function(data){
      let response = JSON.parse(data)
      if(response.success) {
        that.alert(response.messages)
      }
      that.show()
    })
  }

Dan terakhir kita buat file baru dengan nama delete.php di folder app yang berisi perintah SQL untuk melakukan delete data berdasarkan id yang kita checked.

<?php 

$db = new Mysqli('localhost', 'dumet', 'school', 'webmaster');
$id = $_GET['id'];

$query = $db->query("DELETE FROM shelli_posts WHERE id IN ($id)");
$output = array();
if($query) :
	$output = array(
			'success' => true, 
			'messages' => 'Successfully Post Delete'
		);
else:
	$output = array(
		'success' => false, 
		'messages' => 'Errors not found'
	);
endif;

echo json_encode($output);
?>

Demikian artikel tentang Membuat Multiple Delete Dengan Ajax Javascript Part2. Teman-teman bisa buka di browser masing-masing dan akan seperti ini tampilannya.

Sampai jumpa, semoga bermanfaat dan selamat mencoba.

Membuat Multiple Delete Dengan Ajax Javascript Part2

Kategori