Membuat Multiple Delete Dengan Ajax Javascript Part1

Haloo teman-teman Dumet School. Kembali lagi dengan saya di kursus Web Desaign. Kali ini saya akan membahas tentang cara Membuat Multiple Delete Dengan Ajax Javascript. Dimana pada kasus iniÂ data yang di tampilkan dan diedit berasal dari database dimana ada input type checkbox yang berfungsi untuk memilih id data yang akan dihapus.

Langkah pertama dalam Membuat Multiple Delete Dengan Ajax Javascript Part1 adalah teman-teman buat struktur databasenya seperti gambar di bawah ini.

Jika sudah teman-teman buat struktur html dan script ajax javascriptnya untuk menampilkan data dari database. Berikut ini struktur html dan script ajax javascript.

Struktur HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ujian - AJAX</title>
	<link rel="stylesheet" href="assets/bootstrap.min.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col text-center">
        <h3>Membuat Multiple Delete Dengan Ajax Javascript Part1</h3>
      </div>
    </div>

    <div class="row justify-content-center">
      <div class="col-lg-12">
        <div class="alert alert-success" id="alert" style="padding: 5px; display: none;"></div>
        <table class="table table-striped">
          <thead>
            <tr>
              <th width="10"><input type="checkbox" class="checked-all" /></th>
              <th width="30">No</th>
              <th>Title</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody id="posts">
          </tbody>
        </table>

        <p id="confirm">Apakah ingin di 
          <a href="" class="btn-danger btn-delete btn-sm btn">delete</a> ?</p>
      </div>
    </div>
  </div>

<script src="assets/jquery.min.js"></script>
<script src="assets/bootstrap.min.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Ujian - AJAX</title>

</head>

<body>

<h3>Membuat Multiple Delete Dengan Ajax Javascript Part1</h3>

</div>

<thead>

<tr>

<th>Title</th>

<th>Description</th>

</tr>

</thead>

</tbody>

</table>

<p id="confirm">Apakah ingin di

<a href="" class="btn-danger btn-delete btn-sm btn">delete</a> ?</p>

</div>

</body>

</html>

Function Ajax Javascript untuk menampilkan data

// FUNCTION AJAX
function load_ajax(method, url, data = null, callback) {
  const ajax = new XMLHttpRequest()
  ajax.open(method, url, true)
  let _params = ""

  if(method == 'POST' && data != null) {
    _params = data
  }

  ajax.onreadystatechange = function() {
    if(this.readyState === 4 && this.status === 200) {
      callback(this.responseText)
    }
  }

  ajax.send(_params)
}

//TAMPIL DATA
function generate_post(data){
  
  let elemen = document.getElementById("posts");
  elemen.innerHTML = "";
  let respon = JSON.parse(data);

  for(i=0; i<respon.length; i++){
    elemen.innerHTML += `<tr>
                          <td><input type="checkbox" class="checked" value="${respon[i].id}" /></td>
                          <td>${i+1}</td>
                          <td><span class="editdata" data-id="${respon[i].id}" data="title">${respon[i].title}</span></td>
                          <td><span class="editdata" data-id="${respon[i].id}" data="body">${respon[i].body}</span></td>
                        </tr>`;
  }
  let cek = document.querySelectorAll(".checked");
  delFunction(cek);
}

let app = {
  alert:function(messages, alert){
    var popup = document.querySelector("#alert");
    popup.style.display = "block";
    popup.innerHTML = `${messages}`;

    setTimeout(function() {
      popup.style.display = "none"
      popup.innerHTML = ''
    }, 2000)
  },
  show: function(value){
    load_ajax('GET', 'app/database.php', null, function(data) {
      generate_post(data)
    })
  }
}
App.show()

// FUNCTION AJAX

function load_ajax(method, url, data = null, callback) {

const ajax = new XMLHttpRequest()

ajax.open(method, url, true)

let _params = ""

if(method == 'POST' && data != null) {

_params = data

}

ajax.onreadystatechange = function() {

if(this.readyState === 4 && this.status === 200) {

callback(this.responseText)

}

ajax.send(_params)

}

//TAMPIL DATA

function generate_post(data){

let elemen = document.getElementById("posts");

elemen.innerHTML = "";

let respon = JSON.parse(data);

for(i=0; i<respon.length; i++){

elemen.innerHTML += `<tr>

<td><span class="editdata" data-id="${respon[i].id}" data="title">${respon[i].title}</span></td>

<td><span class="editdata" data-id="${respon[i].id}" data="body">${respon[i].body}</span></td>

</tr>`;

}

let cek = document.querySelectorAll(".checked");

delFunction(cek);

}

let app = {

alert:function(messages, alert){

var popup = document.querySelector("#alert");

popup.style.display = "block";

popup.innerHTML = `${messages}`;

setTimeout(function() {

popup.style.display = "none"

popup.innerHTML = ''

}, 2000)

show: function(value){

load_ajax('GET', 'app/database.php', null, function(data) {

generate_post(data)

})

}

App.show()

Kemudian kita buat file baru dengan nama show.php untuk melakukan request tampil ke database.

<?php 
$db = new Mysqli('localhost', 'dumet', 'school', 'webmaster');

$query = $db->query("SELECT * FROM shelli_posts ORDER BY id DESC");
$posts = [];

if($query->num_rows > 0) :
	while($row = $query->fetch_assoc()) :
		extract($row);

		$data = array(
			'id' => $id,
			'title' => $title,
			'body' => $body,
			'created_at' => $created_at
		);

		#push data
		array_push($posts, $data);

	endwhile;

	#output json
	echo json_encode($posts);
else:

	echo json_encode(array(
		'message' => 'No Posts Found'
	));

endif;

<?php

$db = new Mysqli('localhost', 'dumet', 'school', 'webmaster');

$query = $db->query("SELECT * FROM shelli_posts ORDER BY id DESC");

$posts = [];

if($query->num_rows > 0) :

while($row = $query->fetch_assoc()) :

extract($row);

$data = array(

'id' => $id,

'title' => $title,

'body' => $body,

'created_at' => $created_at

);

#push data

array_push($posts, $data);

endwhile;

#output json

echo json_encode($posts);

else:

echo json_encode(array(

'message' => 'No Posts Found'

));

endif;

Sampai disini pembahasan tentang cara Membuat Multiple Delete Dengan Ajax Javascript Part1. Kita Lanjutkan di pembahasan berikutnya part 2. Terima kasih.

Facebook DUMET School

Categories