#Ajax - #PHP

Membuat CRUD menggunakan Ajax PHP – Hapus Data

By Muzanni
7 January 2024
Ajax PHP

Membuat crud menggunakan ajax php pada operasi hapus data pada database. Artikel ini lanjutan dari artikel sebelumnya mengenai bagaimana cara menginput data menggunakan ajax jquery.

Dalam menghapus data menggunakan ajax jquery dan php yang digunakan sebagai proses pada saat hapus data. Seperti yang sudah di jelaskan sebelumnya ajax merupakan salah satu fitur yang disediakan oleh jquery. Dengan kata lain ajax lebih dikenal dengan nama ajax jquery.

Membuat CRUD menggunakan Ajax PHP

Oke sobat malasngoding.com fokus artikel ini yaitu bagaimana membuat operasi hapus data menggunakan ajax jquery. Untuk membuat operasi hapus data diharapkan mengikuri tahapan-tahapan berikut :

Baca Juga Materi Membuat CRUD PHP lainnya :

Mempersiapkan Tombol Hapus

Langkah awal yaitu mempersiapkan tombol hapus. Tombol hapus ini letaknya di tabel yang menampilkan data. Adapun tabelnya sebagai berikut:

Gambar diatas pada tabel yang menampilkan data terdapat tombol hapus. Nah tombol hapus itu yang kita buat. Adapun script buat tombol tersebut adalah sebagai beriktu :

1	<button id="<?php echo $d['user_id']; ?>" class="btn btn-danger btn-sm hapus_data"> <i class="fa fa-trash"></i> Hapus </button>

Jika mengikuti materi membuat crud menggunakan ajax sql sebelumnya tombol ini berada dalam file data.php Jika sobat belum mengikutinya silahkan ikuti tutorial sebelumnya disini.

Untuk membuat tombol hapus tersebut kita memerlukan id dari setiap data. Disini dapat dilihat id="<?php echo $d['user_id']; ?>" yang menandakan id dari tombol tersebut yaitu id dari setiap data user. dan juga memerlukan sebuah class dimana class ini nantinya kita panggil kedalam ajax. Pada tombol diatas saya menggunakan class="hapus_data".

Adapun script lengkapnya untuk menampilkan tombol hapus pada data.php adalah sebagai berikut :

<thead>

<tr>

<th scope="col">Jenis Kelamin</th>

<th scope="col">Kontak</th>

<th scope="col">Alamat</th>

</tr>

</thead>

<tbody>

<?php

include "koneksi.php";

$no=1;

$data=mysqli_query($koneksi, "SELECT * FROM user");

while ($d=mysqli_fetch_array($data)) {

<tr>

<td>

<button id="<?php echo $d['user_id']; ?>" class="btn btn-danger btn-sm hapus_data"> <i class="fa fa-trash"></i> Hapus </button>

</td>

</tr>

<?php

}

</tbody>

</table>

Proses Hapus Menggunakan Ajax Jquery

Tahap selanjutnya yaitu membuat proses hapus menggunakan ajax. Perhatikan script lengkapnya sebagai berikut :

$(document).on('click', '.hapus_data', function(){

var id = $(this).attr('id');

$.ajax({

type: 'POST',

url: "hapus.php",

data: {id:id},

success: function(response) {

//setelah simpan data, update data terbaru

tampil_data()

}

});

Berikut penjelasan singkat yang dapat membantu sobat lebih memahami script diatas.

$(document).on('click', '.hapus_data', function(){ fungsi javascript dimana script ini akan dijalan ketika tombil hapus di tekan.
var id = $(this).attr('id'); adalah script yang digunakan untuk menangkap data id yang dikirim

$.ajax({

type: 'POST',

url: "hapus.php",

data: {id:id},

success: function(response) {

//setelah simpan data, update data terbaru

tampil_data()

}

});

Script diatas adalah proses ajax untuk menghapus data. Dalam potongan kode diatas dapat dilihat bahwa tipe/method yang digunakan untuk mengirim data yaitu POST, url yang digunakan untuk script php menghapus data hapus.php dan data yang dikirim berupa id.

Proses Hapus Data PHP

Tahapan terakhir yaitu membuat proses hapus data menggunakan php. Siapkan sebuah file dengan nama hapus.php dan berikut scriptnya

<?php

include('koneksi.php');

$id = $_POST['id'];

mysqli_query($koneksi,"delete from user where user_id='$id'");

Pada script diatas dalam dilihat bahwasanya terlebih dahulu kita menginclude file koneksi yang menghubungkan dengan database. Selanjutnya menangkap id yang dikirim sebelumnya. Terakhir yaitu perintah sql untuk menghapus data.

Kesimpulan

Materi ini sangat bergantung pada materi sebelumnya. Adapun script lengkap dan file yang berkaitan dengan materi artikel ini sebagai berikut:

index.php

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

<!DOCTYPE html>

<head>

<title>Malasngoding.com - CRUD AJAX PHP MYSQLI </title>

</head>

<body>

<br>

<center><h2>CRUD AJAX PHP MYSQLI - HAPUS DATA</h2></center>

</div>

<label>Jenis Kelamin</label>

<option>--pilih--</option>

<option value="perempuan">Perempuan</option>

</select>

</div>

<label>Kontak</label>

</div>

<label >Alamat</label>

</div>

<button type="submit" id="tombol_simpan" class="btn btn-primary">Submit</button>

</div>

</form>

</div>

</div>

</body>

integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

$(document).ready(function () {

tampil_data();

});

// tampilkan data

function tampil_data() {

$.ajax({

url: 'data.php',

type: 'get',

success: function(data) {

$('#tampil_data').html(data);

}

});

}

// tambah data

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

//validasi form

$('#form_input').validate({

rules: {

nama: {

required: true

kelamin: {

required: true

kontak: {

required: true

alamat: {

required: true

}

submitHandler: function (form) {

$.ajax({

type: 'POST',

url: "simpan.php",

data: $('#form_input').serialize(),

success: function () {

//setelah simpan data, update data terbaru

tampil_data()

}

});

//kosongkan form nama dan jurusan

document.getElementById("nama").value = "";

document.getElementById("kelamin").value = "";

document.getElementById("kontak").value = "";

document.getElementById("alamat").value = "";

return false;

}

});

// hapus data

$(document).on('click', '.hapus_data', function(){

var id = $(this).attr('id');

$.ajax({

type: 'POST',

url: "hapus.php",

data: {id:id},

success: function(response) {

//setelah simpan data, update data terbaru

tampil_data()

}

});

</script>

</html>

data.php

<thead>

<tr>

<th scope="col">Jenis Kelamin</th>

<th scope="col">Kontak</th>

<th scope="col">Alamat</th>

</tr>

</thead>

<tbody>

<?php

include "koneksi.php";

$no=1;

$data=mysqli_query($koneksi, "SELECT * FROM user");

while ($d=mysqli_fetch_array($data)) {

<tr>

<td>

<button id="<?php echo $d['user_id']; ?>" class="btn btn-danger btn-sm hapus_data"> <i class="fa fa-trash"></i> Hapus </button>

</td>

</tr>

<?php

}

</tbody>

</table>

hapus.php

<?php

include('koneksi.php');

$id = $_POST['id'];

mysqli_query($koneksi,"delete from user where user_id='$id'");

Untuk lebih mudah memahami materi CRUD menggunakan Ajax PHP diharapkan sobat untuk mengikuti materi dari awal. List materi dari awal dapat dilihat pada list berikut :