Cara Membuat CRUD (Create, Read, Update, Delete) Enkripsi / Deskripsi dengan Base64 pada PHP – Part 3 Edit dan Hapus Data – Hai sobat pada kesempatan kali ini saya akan membahas lagi-lagi tentang CRUD, namun pada CRUD yang ini saya akan membuat datanya terenkripsi. Sebenarnya Base64 ini lebih ke encoding dan fungsinya memang seperti base64_encode(). Pada postingan kali ini saya akan membahas langsung cara Edit data dan Hapus data karena untuk hapus data scriptnya sama seperti postingan saya sebelumnya tentang CRUD Ajax juga.
Baca juga :
CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP
Sebenarnya apa itu encoding dan apa bedanya dengan enkripsi kalau begitu? Encoding itu adalah suatu fungsi untuk menyamarkan data saja. Dengan encoding kita bisa menggunakannya pada banyak sistem aplikasi atau kita bisa membuat encoding dan decoding pada banyak bahasa pemrograman bahkan di query mysql sekalipun. Setelah di encoding ini juga nanti bisa dikembalikan ke teks aslinya. Berbeda dengan enkripsi, dengan enkripsi kita membutuhkan key pada saat enkripsi untuk mendeskripsikan/mengembalikan ke teks aslinya. Ada juga yang namanya Hash dan ini biasanya dibuat untuk mengenkripsi password dan ada yang mengatakan hash itu one way enkripsi tapi nyatanya bisa saja dikembalikan ke aslinya lhoo.. tapi saya tidak akan membahas Hash disini dan saya akan membahas CRUD dengan enkripsi yang hanya bisa dibaca menggunakan keynya saja pada postingan saya selanjutnya mungkin setelah postingan CRUD dengan base64 ini.
Pada tutorial kali ini hanya berbeda sedikit tapi disini kita akan membahas encoding dan decoding sekaligus. Sobat cukup ikuti cara dibawah ini. Untuk koneksi databasenya masih menggunakan MySQLi dengan metode Object Oriented. Jika sobat belum mengetahuinya maka sobat bisa membaca dengan klik link dibawah
Cara Membuat Koneksi dengan Database MySQL menggunakan PHP
Cara Update Data Base64 dengan Ajax pada PHP
Pada kali ini tidak perlu membuat form lagi karena kita akan menggunakan form sebelumnya yang digunakan untuk tambah data. Hanya tambah 1 baris saja untuk menambahkan id value. Langsung saja saya berikan tutorialnya :
1. Tambahkah pada tag <form> dengan baris dibawah. Bisa dimana saja yang penting ada dalam antara tag <form>…</form>. Baris ini berfungsi untuk nantinya menyimpan id dari baris data yang ingin kita ubah.
<input type="hidden" name="id" id="id">
2. Kemudian pada file data.php yang pernah kita buat pada tutorial Part 1, tambahkan baris ini pada tag <script>…</script>
<script type="text/javascript">
function reset(){
document.getElementById("err_nama_mahasiswa").innerHTML = "";
document.getElementById("err_alamat").innerHTML = "";
document.getElementById("err_jurusan").innerHTML = "";
document.getElementById("err_tanggal_masuk").innerHTML = "";
document.getElementById("err_jenkel").innerHTML = "";
}
$(document).on('click', '.edit_data', function(){
$('html, body').animate({ scrollTop: 0 }, 'slow');
let id = $(this).attr('id');
$.ajax({
type: 'POST',
url: "get_data.php",
data: {id:id},
dataType:'json',
success: function(response) {
reset();
document.getElementById("id").value = response.id;
document.getElementById("nama_mahasiswa").value = response.nama_mahasiswa;
document.getElementById("tanggal_masuk").value = response.tgl_masuk;
document.getElementById("alamat").value = response.alamat;
document.getElementById("jurusan").value = response.jurusan;
if (response.jenis_kelamin=="Laki-laki") {
document.getElementById("jenkel1").checked = true;
} else {
document.getElementById("jenkel2").checked = true;
}
}, error: function(response){
console.log(response.responseText);
}
});
});
$(document).on('click', '.hapus_data', function(){
var id = $(this).attr('id');
$.ajax({
type: 'POST',
url: "hapus_data.php",
data: {id:id},
success: function() {
$('.data').load("data.php");
}, error: function(response){
console.log(response.responseText);
}
});
});
</script>
Penjelasan :
Pada baris dibawah berfungsi untuk mereset kembali atau mengosongkan pesan mandatory atau harus diisi jika user menghapus semua isinya dan klik edit. Karena kita sudah mengeset bahwa semua field mandatory atau harus diisi baik saat tambah baru maupun saat edit data.
function reset(){
document.getElementById("err_nama_mahasiswa").innerHTML = "";
document.getElementById("err_alamat").innerHTML = "";
document.getElementById("err_jurusan").innerHTML = "";
document.getElementById("err_tanggal_masuk").innerHTML = "";
document.getElementById("err_jenkel").innerHTML = "";
}
Untuk mendapatkan id dari baris yang ingin kita edit, kita mengambilnya dari id yang telah disimpan pada id tombol, fungsi javascripnya adalah sebagai berikut
let id = $(this).attr('id');
Cara diatas bisa dilakukan karena sebelumnya kita membuat tombol editnya di dalam tabel pada data.php menjadi seperti ini
<button id="<?php echo $id; ?>" class="btn btn-success btn-sm edit_data"> <i class="fa fa-edit"></i> Edit </button>
button id pasti berbeda setiap barisnya karena itu merupakan id dari mahasiswa tersebut.
$.ajax({
type: 'POST',
url: "get_data.php",
data: {id:id},
dataType:'json',
success: function(response) {
reset();
document.getElementById("id").value = response.id;
document.getElementById("nama_mahasiswa").value = response.nama_mahasiswa;
document.getElementById("tanggal_masuk").value = response.tgl_masuk;
document.getElementById("alamat").value = response.alamat;
document.getElementById("jurusan").value = response.jurusan;
if (response.jenis_kelamin=="Laki-laki") {
document.getElementById("jenkel1").checked = true;
} else {
document.getElementById("jenkel2").checked = true;
}
}, error: function(response){
console.log(response.responseText);
}
});
Seperti yang sobat bisa dilihat pada script Ajax, untuk type kita menggunakan POST pastinya dan url adalah get_data.php dengan kata lain kita harus membuat file get_data.php yang berfungsi untuk mengambil seluruh data mahasiswa berdasarkan id yang kita dapatkan pada button id. dataType kita set json karena nanti hasil dari get_data.php adalah berformat json kemudia nhasilnya kita ambil pada response code bagian
success: function(response) {
Setelah mendapatkan datanya baru kita isikan nilai pada setial field dan radio button nya.
Untuk hapus data mirip dan langsung saya gabungkan disini karena sama persis dengan tutorial CRUD sebelumnya.
3. Buat file get_data.php dan isikan dengan script dibawah ini
<?php
session_start();
include 'koneksi.php';
include 'csrf.php';
$id = $_POST['id'];
$query = "SELECT * FROM tbl_mahasiswa_base64 WHERE id=? ORDER BY id DESC";
$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'] = base64_decode($row["nama_mahasiswa"]);
$h['alamat'] = base64_decode($row["alamat"]);
$h['jurusan'] = base64_decode($row["jurusan"]);
$h['jenis_kelamin'] = base64_decode($row["jenis_kelamin"]);
$h['tgl_masuk'] = base64_decode($row["tgl_masuk"]);
}
echo json_encode($h);
$db1->close();
?>
Dari kode diatas akan menghasil kan data seperti dibawah
{"id":5,"nama_mahasiswa":"Andre","alamat":"Purwokerto","jurusan":"Sistem Infomasi","jenis_kelamin":"Laki-laki","tgl_masuk":"2019-01-01"}
Dan data inilah yang nantinya akan ditangkap oleh Ajax dan dipisah-pisah untuk kemudian dimasukkan ke dalam field-fieldnya. Namun sebelum dikirimkan kita mendecodenya terlebih dahulu, caranya hanya dengan menambahkan base64_decode() seperti contoh diatas.
Pada baris include ‘csrf.php’ merupakan script untuk mengamankan dalam pertukaran data saat menggunakan Ajax. Jika tidak ada header maka siapapun dan dimanapun baik menggunakan local ataupun menggunakan server online dapat menginsert data melalui url pada Ajax. File csrf.php ini kita include-kan ke setiap file yang merupakan file action yang menggunakan Ajax dalam pertukaran datanya. Jika sobat mengalami ERROR pada baris ini berarti sobat perlu kembali ke part 1.
4. Kemudian buat file hapus_data.php untuk menuliskan script untuk menghapus data seperti dibawah ini
<?php
session_start();
include 'koneksi.php';
include 'csrf.php';
$id = $_POST['id'];
$query = "DELETE FROM tbl_mahasiswa_base64 WHERE id=?";
$dewan1 = $db1->prepare($query);
$dewan1->bind_param("i", $id);
$dewan1->execute();
echo json_encode(['success' => 'Sukses']);
$db1->close();
?>
Pada baris include ‘csrf.php’ merupakan script untuk mengamankan dalam pertukaran data saat menggunakan Ajax. Jika tidak ada header maka siapapun dan dimanapun baik menggunakan local ataupun menggunakan server online dapat menginsert data melalui url pada Ajax. File csrf.php ini kita include-kan ke setiap file yang merupakan file action yang menggunakan Ajax dalam pertukaran datanya. Jika sobat mengalami ERROR pada baris ini berarti sobat perlu kembali ke part 1.
5. Terakhir kita ubah file form_action.php menjadi seperti dibawah
<?php
session_start();
include 'koneksi.php';
include 'csrf.php';
$id = stripslashes(strip_tags(htmlspecialchars($_POST['id'] ,ENT_QUOTES)));
$nama_mahasiswa = base64_encode( stripslashes(strip_tags(htmlspecialchars($_POST['nama_mahasiswa'] ,ENT_QUOTES))) );
$jenkel = base64_encode( stripslashes(strip_tags(htmlspecialchars($_POST['jenkel'] ,ENT_QUOTES))) );
$alamat = base64_encode( stripslashes(strip_tags(htmlspecialchars($_POST['alamat'] ,ENT_QUOTES))) );
$jurusan = base64_encode( stripslashes(strip_tags(htmlspecialchars($_POST['jurusan'] ,ENT_QUOTES))) );
$tanggal_masuk = base64_encode( stripslashes(strip_tags(htmlspecialchars($_POST['tanggal_masuk'] ,ENT_QUOTES))) );
if ($id == "") {
$query = "INSERT into tbl_mahasiswa_base64 (nama_mahasiswa, alamat, jurusan, jenis_kelamin, tgl_masuk) VALUES (?, ?, ?, ?, ?)";
$dewan1 = $db1->prepare($query);
$dewan1->bind_param("sssss", $nama_mahasiswa, $alamat, $jurusan, $jenkel, $tanggal_masuk);
$dewan1->execute();
} else {
$query = "UPDATE tbl_mahasiswa_base64 SET nama_mahasiswa=?, alamat=?, jurusan=?, jenis_kelamin=?, tgl_masuk=? WHERE id=?";
$dewan1 = $db1->prepare($query);
$dewan1->bind_param("sssssi", $nama_mahasiswa, $alamat, $jurusan, $jenkel, $tanggal_masuk, $id);
$dewan1->execute();
}
echo json_encode(['success' => 'Sukses']);
$db1->close();
?>
Script diatas terlihat kita membuat fungsi pengecekan terlebih dahulu dengan if else. Jika idnya kosong berarti itu merupakan tambah data baru dan jika id tidak kosong berarti itu adalah update data. Dengan cara itu kita tidak perlu membuat file action banyak-banyak toh isinya hanya sedikit baris code.
Pada baris include ‘csrf.php’ merupakan script untuk mengamankan dalam pertukaran data saat menggunakan Ajax. Jika tidak ada header maka siapapun dan dimanapun baik menggunakan local ataupun menggunakan server online dapat menginsert data melalui url pada Ajax. File csrf.php ini kita include-kan ke setiap file yang merupakan file action yang menggunakan Ajax dalam pertukaran datanya. Jika sobat mengalami ERROR pada baris ini berarti sobat perlu kembali ke part 1.
6. Jika sobat klik tombo edit dalam tabel maka field-fieldnya akan secara otomatis terisi seperti gambar dibawah
Sekian postingan saya tentang CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP – Part 3 Update Data. Pada pada postingan selanjutnya adalah hapus data. Jika ada salah kata saya mohon maaf, jika masih ada yang error atau ada yang kurang bisa di sampaikan pada kolom komentar dibawah.
Baca juga :
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :