Hai ketemu lagi dengan saya dan postingan ini masih melanjutkan postingan yang kemaren karena sangat panjang sekali jadi saya pisah jadi 2 Part. Dan pada part ke 2 ini saya akan membuat event actionnya. Jika sobat mengikuti dari awal pasti sudah mencoba dan semua actionnya belum ada yang jalan seperti saat tambah data, edit, hapus atau preview data satuan. Karena itu ada banyak juga jadi siap-siap ya…
Baca Juga :
Membuat Preview Data Satuan
Pertama kita pemanasan dulu membuat yang mudah yaitu preview data satuannya. Tombolnya yang ada di dalam tabel. Untuk tampilannya seperti dibawah ya.. dan ini adalah modal yang sudah pernah kita buat di part 1 jadi makanya jangan langsung lompat ke part 2 ini harus benar-benar mengikuti dari part 1.
Untuk memanggil modalnya kita berdasarkan klik tombol preview data pada setiap baris/record. Masih ingat kan bahwa di part 1 kita pernah membuat fungsi function ‘setDatatable()’ dan pada action preview ini kita menambahkan kodenya di dalam function ‘setDatatable()’ karena ini merupakan turunan dari tabelnya.
function setDatatable(){
...
table.buttons().container().appendTo( '#dataTable_wrapper .col-md-6:eq(0)' );
//dibawah sini
$('#dataTable tbody').on( 'click', '.view_data', function () {
let id = $(this).attr('id');
let jenis = "view_data_by_id";
$.ajax({
type: 'POST',
url: "mahasiswa_action.php",
data: {id:id, jenis:jenis},
dataType:'json',
success: function(response) {
$("#pNamaMahasiswa").html(response.nama_mahasiswa);
$("#pAlamat").html(response.alamat);
$("#pJurusan").html(response.jurusan);
$("#pJenisKelamin").html(response.jenis_kelamin);
$("#pTglMasuk").html(convertDateFromDB(response.tgl_masuk));
$("#pBiodata").html(decodeHTMLEntities(response.biodata));
$("#pFoto").attr("src", response.foto);
$("#viewModal").modal("show");
}
});
});
}
Penjelasan :
- Kita masih menggunakan file mahasiswa_action.php karena saya tidak mau boros file ya seperti saya yang dulu hehe… daripada kita bikin banyak file mahasiswa_preview.php, mahasiswa_simpan.php, mahasiswa_hapus.php, dlllllllll, maka kita lebih baik menggabungkan jadi 1 file dengan jenis yang berbeda-beda. contoh saat menampilkan data jenis ‘view_data’, saat preview data ‘view_data_by_id’, saat simpan data menjadi ‘tambah_data’ dll jadi kita juga mudah mencari querynya.
Selanjutnya kita ke file mahasiswa_action.php, dan paling bawah dan tentunya dalam tah <?php ?>, kita tambahkan kode dibawah
if (isset($_POST['jenis']) && $_POST['jenis']=="view_data_by_id") {
$id = anti($_POST['id']);
$query = "SELECT * FROM tbl_mahasiswa_expert WHERE id=? ORDER BY nama_mahasiswa ASC";
$dewan1 = $db1->prepare($query);
$dewan1->bind_param('i', $id);
$dewan1->execute();
$res1 = $dewan1->get_result();
while ($row = $res1->fetch_assoc()) {
$h['id'] = $row["id"];
$h['nama_mahasiswa'] = $row["nama_mahasiswa"];
$h['alamat'] = $row["alamat"];
$h['jurusan'] = $row["jurusan"];
$h['jenis_kelamin'] = $row["jenis_kelamin"];
$h['tgl_masuk'] = $row["tgl_masuk"];
$h['biodata'] = $row["biodata"];
$h['foto'] = $row["foto"];
}
echo json_encode($h);
}
Penjelasan :
– Untuk responsenya selalu json ya supaya lebih gampang untuk mengolah di javascriptnya.
Dan akhirnya selesai hanya seperti itu saja untuk menampilkan datanya ya.
Membuat Simpan/Tambah Data
Kedua yang cukup panjang yaitu kita menjalankan tombol tambah data. Untuk modalnya sudah saya bahas di part 1 kemaren ya jadi kalo sobat belum menambahkan kode html untuk modalnya maka sobat lihat dulu part 1, untuk tampilannya seperti dibawah
Untuk menampilkan modal ini jika pengguna mengeklik tombol tambah data saya menambahkannya di javascript dan ingat tambahnya di dalam tag “<script>…</script>”.
Selain di dalam tag “<script>…</script>”, kita menuliskan kode ini di dalam kode dibawah ya guys baik fungsi maupun action/eventnya
$(document).ready(function(){
//Kodenya di dalam sini
});
masukkan kode tambah datanya
$("#btnTambah").click(function(){
$('#modaltambah').modal({
focus: false
});
$('#form-data')[0].reset();
CKEDITOR.instances['biodata'].setData("");
s_Id = "";
resetWajib();
});
Penjelasan :
– Untuk menampilkan modal sebenarnya bisa cukup ‘$(‘#modaltambah’).modal();’ tapi karena di dalam modal terdapat CKEditor dan menu di CKEditor banyak fungsi modal juga maka jika kita tidak menambahkan ‘focus:false’ maka modal CKEditor tidak ada yang bisa aktif/digunakan karena fokusnya pada modal ‘#modaltambah’.
– Saat tambah data juga kita menambahkan fungsi untuk reset form jadi saat modal baru dibuka semua isian harus dalam keadaan kosong, dan tentunya fungsi untuk mengkosongkan CKEditor karena tidak hanya menggunakan reset untuk mengkosongkan CKEditor. Jika sobat tidak menambahkan ini maka setelah pengguna mengisi dan klik simpan maka saat akan tambah data lagi maka masih ada data yang telah disimpan sebelumnya.
– untuk s_Id = “” itu adalah session ID yang disimpan di javascriptnya contohnya untuk hapus data atau action lainnya.
Selanjutnya kita membuat fungsi simpanData(). Disini saya akan membuat simpan data sebagai function untuk memudahkan kita karena saya akan membuat simpan data ini bisa dengan 2 cara yaitu dengan KLIK TOMBOL SIMPAN dan dengan EVENT ENTER. Supaya tidak menulis ajax 2 kali jadi saya jadikan function dan function itu yang dipanggil 2 kali begitu lah kira-kira. Jika masih bingung coba dipahami baik-baik ya..
function simpanData(){
const foto = $('#foto').prop('files')[0];
let foto_lama = $('#foto_lama').val();
let biodata= CKEDITOR.instances['biodata'].getData();
let jenkel = $('input[name=jenkel]:checked').val();
let nama_mahasiswa = $('#nama_mahasiswa').val();
let tanggal_masuk = $('#tanggal_masuk').val();
let alamat = $('#alamat').val();
let jurusan = $('#jurusan').val();
let jenis = "";
if(s_Id==""){
jenis = "tambah_data";
} else {
jenis = "edit_data";
}
if (jenkel==undefined) {
$("#err_jenkel").html("Jenis Kelamin Harus Dipilih");
} else {
$("#err_jenkel").html("");
}
if (nama_mahasiswa=="") {
$("#err_nama_mahasiswa").html("Nama Mahasiswa Harus Diisi");
} else {
$("#err_nama_mahasiswa").html("");
}
if (alamat=="") {
$("#err_alamat").html("Alamat Mahasiswa Harus Diisi");
} else {
$("#err_alamat").html("");
}
if (jurusan=="") {
$("#err_jurusan").html("Jurusan Mahasiswa Harus Diisi");
} else {
$("#err_jurusan").html("");
}
if (tanggal_masuk=="") {
$("#err_tanggal_masuk").html("Tanggal Masuk Mahasiswa Harus Diisi");
} else {
$("#err_tanggal_masuk").html("");
}
if (nama_mahasiswa!="" && tanggal_masuk!="" && alamat!="" && jurusan!="" && jenkel!=undefined) {
let formData = new FormData();
formData.append('id',s_Id);
formData.append('nama_mahasiswa', nama_mahasiswa);
formData.append('jenkel', jenkel);
formData.append('alamat', alamat);
formData.append('jurusan', jurusan);
formData.append('tanggal_masuk', tanggal_masuk);
formData.append('biodata', biodata);
formData.append('jenis', jenis);
formData.append('foto', foto);
formData.append('foto_lama', foto_lama);
$.ajax({
type: 'POST',
url: "mahasiswa_action.php",
data: formData,
cache: false,
processData: false,
contentType: false,
beforeSend: () => {
Swal.fire({
html: 'Proses',
onBeforeOpen: () => {
Swal.showLoading()
},
allowOutsideClick: () => !Swal.isLoading()
});
},
success: function(response) {
if(response.code == 200){
Swal.fire({
type: 'success',
title: 'Sukses',
text: 'Data Berhasil Disimpan',
animation: false,
customClass: 'animated fadeInDown'
}).then((result) => {
$('#dataTable').DataTable().ajax.reload(null, false);
$('#modaltambah').modal('hide');
$('#form-data')[0].reset();
});
} else {
Swal.fire({
type: response.status,
title: response.message,
text: '',
})
}
},error: function(response) {
Swal.close();
console.log(response.responseText);
}
});
}
}
Penjelasan :
– Pada Ajax success saya mengambil response dari file mahasiswa_action.php nya ya, ini memudahkan kita untuk mengetahui bahwa action simpan ini berhasil atau tidak. Sobat juga bisa membuat validasi di file phpnya. Karena php itu sebagai backend aplikasi maka user tidak akan bisa melihat validasi apa aja yang ada di aplikasi kita. berbeda validasi pada javascript tersebut ya user bisa melihatnya jika klik Ctrl+U atau Inspect Element walaupun itu sebenarnya tidak penting juga karena validasi yang penting itu harus ada pada backend aplikasi.
– Oleh karena itu saya sendiri membuat perbedaan gagal dan berhasil pada responsenya yang tentunya dalam bentuk JSON, contoh :
Response sukses :
{"code":400,"status":"error","message":"Data Master Tidak bisa Diubah"}
Response gagal :
{"code":200,"status":"success","message":"Data Berhasil Diubah"}
Selanjutnya kita buat if elsenya ya brati terlihat jika response berhasil kodenya 200 dan jika response gagal kodenya 400. Sebenarnya bisa juga kita mainkan di ajax:success dan ajax:error tinggal kita mainkan header di php-nya saja, namun saya lebih suka jika response validasi tetap di ajax:success karena pada dasarnya ajax sukses dalam nge-hit url tersebut.
– Ada 1 lagi yang sobat harus tau, disinilah gunakna ‘let s_Id’, jadi session id ini untuk membedakan apakah itu SIMPAN DATA atau UBAH DATA. karena fungsi ini kita gabung untuk simpan data dan ubah data karena mirip yang beda hanya jenisnya saja untuk menentukan routingnya. Dan s_Id kita isi kapan? nanti saat action klik tombol edit padad tabelnya (Bisa dilihat di UBAH DATA).
Selanjutnya kita membuat eventnya, seperti yang sudah ada jelaskan diatas ada 2 event untuk memanggil dungsi simpanData() yaitu KLIK TOMBOL SIMPAN dan dengan EVENT ENTER, penulisannya
$("#btnSimpan").click(function(){
simpanData();
});
$('#form-data').keypress(function (e) {
if (e.which == 13) {
simpanData();
}
});
Penjelasan :
- Pertama adalah saat button dengan id ‘#btnSimpan’ diklik maka akan menjalankan fungsi simpan data.
- Kedua adalah saat apa yang ada dalam tag “<form id=”form-data”></form>” melakukan/memencet tombol ENTER maka akan menjalankan fungsi simpan data.
Gimana gampang kan kalo kita membuat function seperti saat menampilkan data pada part 1, kita cukup memanggil function saja.
Sebelum kita ke php, saya tambahkan beberapa fungsi lagi di javascriptnya jadi masih dibawah fungsi diatas kita tambahkan fungsi dibawah
$(".wajib").change(function(){
let name = $(this).attr('name');
$('#err_'+name).html("");
});
function resetWajib(){
let x = document.getElementsByClassName("wajib");
let i;
for (i = 0; i < x.length; i++) {
let name = x[i].name;
$('#err_'+name).html("");
}
}
let _validFileExtensions = [".jpg", ".jpeg", ".png", ".gif"];
function validate(file) {
var min = 1024*30; // MINIMAL 30kb
var maks = 1024*1024*2; // MAKSIMAL 2MB
if (file.type == "file") {
var sFileName = file.value;
if (sFileName.length > 0) {
var blnValid = false;
for (var j = 0; j < _validFileExtensions.length; j++) {
var sCurExtension = _validFileExtensions[j];
if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
blnValid = true;
break;
}
}
if (!blnValid) {
Swal.fire({
type: "warning",
title: "Warning!",
text: "Maaf Hanya Boleh File yang Berextensi : " + _validFileExtensions.join(", ")
})
file.value = "";
return false;
}
if (file.files[0].size < min) {
Swal.fire({
type: "warning",
title: "Warning!",
text: "File / Attachment terlalu kecil.\nMinimal besar file adalah 30kb."
})
file.value = "";
return false;
}
if (file.files[0].size > maks) {
Swal.fire({
type: "warning",
title: "Warning!",
text: "File / Attachment terlalu besar.\nMaksimal besar file adalah 2MB."
})
file.value = "";
return false;
}
}
}
return true;
}
$("#foto").change(function(){
validate(this);
});
Penjelasan :
– Pertama adalah fungsi untuk menghapus tulisan/validasi seperti ‘Nama Mahasiswa harus diisi’ karena jika sobat lihat pada modalnya di part 1 saya menuliskan seperti ini
<div class="form-group"> <label>Nama Mahasiswa</label> <input type="text" name="nama_mahasiswa" id="nama_mahasiswa" class="form-control wajib" required="true"> <p class="text-danger" id="err_nama_mahasiswa"></p> </div>
dibawah input terdapat tag ‘<p></p>’ yang berfungsi untuk menuliskan error/peringatan. Namun agar fungsi $(‘.wajib’).change() ini ada beberapa persyaratan ya..
- Di input text name=’nama_mahasiswa’ berartp di tag <p> id=’err_nama_mahasiswa’
- Di input text beri class dengan nama ‘wajib’
- Sobat bisa ganti-ganti namun sobat juga harus ganti di javascriptnya
– Selanjutnya adalah fungsi untuk validasi format file dari foto yang akan di upload. Namanya aja foto masa yang diupload .docx kan aneh, oleh karena itu kita kasih validasi pembatasan format filenya ya. Untuk memudahkan juga saya membuat function validate() buat mengantisipasi ada 2 upload di 1 aplikasi.
Dan Akhirnya kita selesai dengan JAVASCRIPT di simpan data ini. Selanjutnya kita kembali ke file mahasiswa_action.php yang sudah kita buat sebelumnya di part 1 dan kita tambahkan kode dibawah
if (isset($_POST['jenis']) && $_POST['jenis']=="tambah_data") {
$nama_mahasiswa = anti($_POST['nama_mahasiswa']);
$jenkel = anti($_POST['jenkel']);
$alamat = anti($_POST['alamat']);
$jurusan = anti($_POST['jurusan']);
$tanggal_masuk = anti($_POST['tanggal_masuk']);
$biodata = anti($_POST['biodata']);
$temp = "foto/";
if (isset($_FILES['foto']['tmp_name'])) {
$fileupload = $_FILES['foto']['tmp_name'];
$ImageName = $_FILES['foto']['name'];
$acak = rand(11111111, 99999999);
$ImageExt = substr($ImageName, strrpos($ImageName, '.'));
$ImageExt = str_replace('.','',$ImageExt);
$ImageName = preg_replace("/\.[^.\s]{3,4}$/", "", $ImageName);
$NewImageName = str_replace(' ', '', $acak.'.'.$ImageExt);
$foto = $temp . $NewImageName;
move_uploaded_file($fileupload, $temp.$NewImageName);
} else {
$foto = "foto/no-image.png";
}
//JIKA INGIN VALIDASI DI BACKEND/PHP
if($biodata=="") {
exit(json_encode(['code' => 400, 'status' => 'error', 'message' => 'Biodata Harus diisi']));
}
$query = "INSERT into tbl_mahasiswa_expert (nama_mahasiswa, alamat, jurusan, jenis_kelamin, tgl_masuk, biodata, foto) VALUES (?, ?, ?, ?, ?, ?, ?)";
$dewan1 = $db1->prepare($query);
$dewan1->bind_param("sssssss", $nama_mahasiswa, $alamat, $jurusan, $jenkel, $tanggal_masuk, $biodata, $foto);
$dewan1->execute();
echo json_encode(['code' => 200, 'status' => 'success', 'message' => 'Data Berhasil Disimpan']);
}
Penjesalan :
– Pada kode diatas terdapat fungsi anti() yang gunanya untuk memfilter semua inputan sehingga dapat menghindari SQL Injection dan fungsi itu sudah kita buat di part 1 ya jadi karena kita masih di 1 file, kita tidak perlu menuliskan lagi karena bisa dipakai berkali-kali. Namun pastinya bukan hanya anti() saja yang berungsi untuk menghindari SQL Injection, namun penulisan query juga dapat mempengaruhi karena kita menggunakan prepare statement dengan bind param. Tidak bosan-bosan saya mengingatkan hindari penggunakan query 1 baris seperti dibawah
mysqli_query("INSERT into tbl_mahasiswa_expert (nama_mahasiswa, alamat, jurusan, jenis_kelamin, tgl_masuk, biodata, foto) VALUES ($nama_mahasiswa, $alamat, $jurusan, $jenis_kelamin, $tgl_masuk, $biodata, $foto)")
penulisan query diatas sangat tidak dianjurkan karena gampang sekali terkena SQL Injection ya guys mungkin jika ada yang belum tahu. Dan berdasarkan pengalaman saya, penulisan Query tersebut tidak akan lolos security test. Begitu juga jika sobat menggunakan PDO, maka gunakanlah metode dengan prepare statement bukan yang 1 baris. Jangan karena lebih simpel dan lebih mudah penulisannya maka sobat gunakan, karena itu lebih mudah juga dibobol sistem yang sobat bikin nantinya dan akan membuat repot malah diakhirnya.
– Saat upload foto kita merename juga nama filenya ya jadi angka acak dengan fungsi rand(), ini untuk lebih aman juga dan tentunya menghindari gambar dengan nama file yang sama pasti nanti malah akan di replace. Namun jika pengguna tidak upload foto maka secara otomatis akan menjadi default ‘$foto = “foto/no-image.png”‘.
– Dan seperti yang sudah saya jelaskan diatas responsenya berupa JSON jadi kita perlu menggunakan ‘json_encode’ dan untuk validasi kita menambahkan fungsi exit() supaya sistem tidak melanjutkan ke bawahnya.
Dan akhirnya selesai lah membuat Action SIMPAN DATA ini panjang sekali bisa jadi 1 postingan ini seharusnya hehe…
Membuat Edit/Ubah Data
Selanjutnya kita membuat action Edit data yang bisa lebih pendek dari simpan data karena di fungsi simpanData() itu adalah gabungan dari simpan data dan ubah data jadi sangat memudahkan kita bukan?
Jadi disini kita seperti menambahkan View Data, yang pertama adalah menambahkan kode javascriptnya dalam ‘function setDatatable()’ karena ini juga turunan dari tabel, kodenya adalah sebagai berikut
$('#dataTable tbody').on( 'click', '.edit_data', function () {
resetWajib();
let id = $(this).attr('id');
s_Id = id;
let data = table.row( $(this).parents('tr') ).data();
$("#foto_lama").val(data["foto"]);
$("#nama_mahasiswa").val(data["nama_mahasiswa"]);
$("#alamat").val(data["alamat"]);
$("#jurusan").val(data["jurusan"]);
$("#tanggal_masuk").val(data["tgl_masuk"]);
CKEDITOR.instances['biodata'].setData(decodeHTMLEntities(data["biodata"]));
if(data["jenis_kelamin"] == "Laki-laki"){
$('#jenkel1').prop('checked', true);
} else {
$('#jenkel2').prop('checked', true);
}
$('#modaltambah').modal({
focus: false
});
});
jadi disini kita tidak perlu select ke database karena datatables sudah menyimpan history semua data/kolom yang ada pada JSON saat menampilkan data.
Selenjutnya kita membuat actionnya di mahasiswa_action.php seperti dibawah
if (isset($_POST['jenis']) && $_POST['jenis']=="edit_data") {
$id = anti($_POST['id']);
$nama_mahasiswa = anti($_POST['nama_mahasiswa']);
$jenkel = anti($_POST['jenkel']);
$alamat = anti($_POST['alamat']);
$jurusan = anti($_POST['jurusan']);
$tanggal_masuk = anti($_POST['tanggal_masuk']);
$biodata = anti($_POST['biodata']);
if($id == '1'){
exit(json_encode(['code' => 400, 'status' => 'error', 'message' => 'Data Master Tidak bisa Diubah']));
}
$temp = "foto/";
if (isset($_FILES['foto']['tmp_name'])) {
$fileupload = $_FILES['foto']['tmp_name'];
$ImageName = $_FILES['foto']['name'];
$acak = rand(11111111, 99999999);
$ImageExt = substr($ImageName, strrpos($ImageName, '.'));
$ImageExt = str_replace('.','',$ImageExt);
$ImageName = preg_replace("/\.[^.\s]{3,4}$/", "", $ImageName);
$NewImageName = str_replace(' ', '', $acak.'.'.$ImageExt);
$foto = $temp . $NewImageName;
move_uploaded_file($fileupload, $temp.$NewImageName);
if (anti($_POST['foto_lama']) != "" && $_POST['foto_lama'] != "foto/no-image.png") {
unlink($_POST['foto_lama']);
}
} else {
$foto = anti($_POST['foto_lama']);
}
$query = "UPDATE tbl_mahasiswa_expert SET nama_mahasiswa=?, alamat=?, jurusan=?, jenis_kelamin=?, tgl_masuk=?, biodata=?, foto=? WHERE id=?";
$dewan1 = $db1->prepare($query);
$dewan1->bind_param("sssssssi", $nama_mahasiswa, $alamat, $jurusan, $jenkel, $tanggal_masuk, $biodata, $foto, $id);
$dewan1->execute();
echo json_encode(['code' => 200, 'status' => 'success', 'message' => 'Data Berhasil Diubah']);
}
Penjelasan :
– Jika sobat bisa lihat diatas terdapat validasi, namun itu hanya untuk contoh saja jadi jika sobat ingin membuat validasi tinggal ubah saja namun yang terpenting adalah responsenya.
– Dan untuk fotonya saya tambahkan perintah untuk menghapus foto lama supaya tidak menjadi sampah nantinya, sobat bisa lihat perintahnya yaitu ‘unlink($_POST[‘foto_lama’])’
Dan Selesai fungsi ubah datanya. Gampang bukan? karena kita menggabungkan beberapa fungsi tambah data dan ubah datanya makanya pendek, coba kalo kita pisah semua tentu akan sangat panjang seperti tambah data.
Membuat Delete/Hapus Data
Selanjutnya adalah yang terakhir yaitu HAPUS DATA. dan ini masih mirip seperti view data dan edit data ya karena ini masih turunan tabel/action yang ada pada tabel dan setiap barisnya.
Jadi disini kita seperti menambahkan View Data & Ubah Data, yang pertama adalah menambahkan kode JAVASCRIPT dalam ‘function setDatatable()’ karena ini juga turunan dari tabel, kodenya adalah sebagai berikut
$('#dataTable tbody').on( 'click', '.hapus_data', function () {
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
animation: false,
customClass: 'animated tada',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.value) {
let id = $(this).attr('id');
let jenis = "delete_data";
$.ajax({
type: 'POST',
url: "mahasiswa_action.php",
data: {id:id, jenis:jenis},
success: function(response) {
if(response.code == 200){
Swal.fire({
type: response.status,
title: 'Sukses',
text: response.message,
animation: false,
customClass: 'animated bounce'
}).then((result) => {
$('#dataTable').DataTable().ajax.reload(null, false);
});
} else {
Swal.fire({
type: response.status,
title: response.message,
text: '',
})
}
},error: function(response) {
console.log(response.responseText);
}
});
}
})
});
karena saya menggunakan custom animasi dengan animate.css maka saya menambahkan kode dibawah
animation: false, customClass: 'animated tada',
Namun jika sobat ingin menggunakan animasi bawaan tinggal hapus saja kode tersebut, untuk kata-katanya sobat juga bisa ganti seenak sobat atau jika sobat ingin melihat macam-macam sweetalert bisa kunjungi postingan saya dibawah ini
Baca juga :
Cara Membuat SweetAlert dan Macam-Macamnya pada PHP
Terakhir kita tambahkan script di file mahasiswa_action.php dengan kode dibawah ini
if (isset($_POST['jenis']) && $_POST['jenis']=="delete_data") {
$id = anti($_POST['id']);
if($id == '1'){
exit(json_encode(['code' => 400, 'status' => 'error', 'message' => 'Data Master Tidak bisa Dihapus']));
}
$query = "SELECT * FROM tbl_mahasiswa_expert WHERE id=? LIMIT 1";
$dewan1 = $db1->prepare($query);
$dewan1->bind_param('i', $id);
$dewan1->execute();
$res1 = $dewan1->get_result();
while ($row = $res1->fetch_assoc()) {
$foto = $row['foto'];
if($foto!="foto/no-image.png"){
unlink($foto);
}
}
$query = "DELETE FROM tbl_mahasiswa_expert WHERE id=?";
$dewan1 = $db1->prepare($query);
$dewan1->bind_param("i", $id);
$dewan1->execute();
echo json_encode(['code' => 200, 'status' => 'success', 'message' => 'Data Berhasil Dihapus']);
}
Dan akhirnya selesai juga postingan ini butuh waktu berjam-jam untuk mempostingnya hehe… Oleh karena itu sobat juga harus ikuti step by step ya jangan asal copas saja tanpa tau apa yang dicopas. Saya yang posting saja sampe berjam-jam untuk menulis postingan sekaligus membuat project-nya jadi harusnya sobat juga cukup lama untuk membuat dan memahami ini tidak hanya 10 menit saja. Jika hanya sekedar copas script semua orang bisa tapi untuk memahami itu yang tidak semua orang bisa karena kita harus membaca benar-benar dan step by step makanya saya tidak hanya memposting index.php segambreng, mahasiswa_action.php segambreng, kita copas masukin ke file kita langsung jadi tapi akhirnya tidak tahu apa yang dicopas.
Oke sudah lah sekian postingan saya tentangMembuat CRUD Expert & Pencarian dengan JQuery, Ajax, Bootstrap Modal, SweetAlert dan WYSIHTML5 pada PHP. Cukup 2 Part saja.
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :
Waktu dipasang di localhost, lancar normal. Tapi swaktu dicoba di C Panel ada error : DataTables warning: table id=dataTable – No CSRF token.