Setelah atikel sebelumnya kita sudah berhasil menampilkan sebuah data di database dengan sebuah ajax, sekarang kita lanjutkan untuk menginsert datanya, menghapusnya, dan mengeditnya, bagi teman-teman yang belum melihat artkelnya, saya sarankan teman-teman lihat artikel saya sebelumnya ya.
Oke kemarin ada yang tanya file databasenya seperti apa, bisa lihat disini:
Sudah bisa ya untuk melihat saja, oke jika sudah kita langsung saja masuk untuk selanjutnya ya itu memasukan data, oke seperti yang saya tulis sebelumnya insert data yang kita pakai disini bukan menggunakan form insert ya, melainkan, table juga, dengan database kosong seperti ini:
1 2 3 4 5 6 |
<tr> <td></td> <td id="first_name" contenteditable></td> <td id="last_name" contenteditable></td> <td><button id="btn_add" class="btn btn-xs btn-success">+</button></td> </tr> |
bisa dilihat ya disini saya menggunakan contenteditable jadi dimana ada sebuah id first_name dan last_name dan sebuah id btn_add nanti kita akan pakai id itu semua, oke langsung kita lihat di jquery ajaxnya
1 |
$(document).on("click", "#btn_add", app.add) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
add: function(){ // console.log("tes") var first_name = $("#first_name").text() var last_name = $("#last_name").text() if(first_name == ""){ alert("Enter First name") return false } if(last_name == ""){ alert("Enter last name") return false } $.ajax({ url: "data.php", method: "POST", data: {type:"insert", first_name: first_name, last_name: last_name}, success: function(response){ alert(response) app.show() } }) } |
Jika kosong maka menimbulkan alert, jika berhasil data firstname dan lastname itulah yang kita ambil, dan prosesnya ada di data.php, oke sekarang kita lihat webservicenya:
1 2 3 4 5 6 7 8 9 |
if($_POST["type"] == "insert"){ $first_name = $_POST["first_name"]; $last_name = $_POST["last_name"]; $query = mysqli_query($koneksi, "INSERT INTO live_add_edit VALUES('', '$first_name', '$last_name') "); if($query){ echo "Data Berhasil dimasukan"; } } |
Seperti itulah query untuk insert sudah paham ya untuk insertnya, oke selanjutnya kita metode hapus, disini saya menggunakan button.
1 |
<button class="btn btn-xs btn-warning" data-id3="<?php echo $row["id"] ?>" id="hapus">X</button> |
1 |
$(document).on("click", "#hapus", app.hapus) |
langsung kita ke ajaxnya
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
hapus: function(){ var id = $(this).data("id3") var konfirm = confirm("Apakah Anda yakin") if(konfirm){ $.ajax({ url: "data.php", method: "POST", data: {type: "hapusData", id: id}, success: function(response){ $("#result").html("<div class='alert alert-danger'>"+response+"</div>").fadeIn("slow"); setTimeout(function(){ $("#result").html("").fadeOut("slow"); }, 2000) app.show() } }) } } |
Oke kita ambil idnya ya. sekarang kita masuk ke webservicenya
1 2 3 4 5 6 7 |
else if($_POST["type"] == "hapusData" ){ $id = $_POST["id"]; $query = mysqli_query($koneksi, "DELETE FROM live_add_edit WHERE id = '$id' "); if($query){ echo "Data Berhasil di HAPUS"; } } |
Cukup simple untuk webservice hapusnya, sekarang kita cek apakah berhasil
Oke sekarang kita update, Untuk updatenya teman-teman tinggal mengkilk data mana yang ingin kita update, langsung saja kita ke ajaxnya karena kita sudah tau menggunakan contenteditable,
1 2 3 4 5 6 7 8 9 10 |
$(document).on("blur", ".first_name", function(){ var id = $(this).data("id1"); var teks = $(this).text() app.editData(id, teks, "first_name"); }) $(document).on("blur", ".last_name", function(){ var id = $(this).data("id2"); var teks = $(this).text() app.editData(id, teks, "last_name"); }) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
editData: function(id, teks, nama_kolom){ $.ajax({ url: "data.php", method: "POST", data: {type: "edit", id: id, teks: teks, nama_kolom: nama_kolom}, success: function(response){ $("#result").html("<div class='alert alert-success'>"+response+"</div>").fadeIn("slow"); setTimeout(function(){ $("#result").html("").fadeOut("slow"); }, 2000) } }) } |
kita ke webservicenya
1 2 3 4 5 6 7 8 9 |
else if($_POST["type"] == "edit"){ $id = $_POST["id"]; $teks = $_POST["teks"]; $kolom_name = $_POST["nama_kolom"]; $query = mysqli_query($koneksi, "UPDATE webslesson_live_add_edit SET $kolom_name = '$teks' WHERE id = '$id' "); if($query){ echo "Data Berhasil di UPDATE"; } |
Oke sekarang kita coba mengupdatenya
Nah Sudah berhasil bukan, oke saya rasa cukup sampai disini belajar kita tentang cara membuat live table insert update delete ajax, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.