Cara Membuat CRUD (Create, Read, Update, Delete) Enkripsi / Deskripsi dengan Base64 pada PHP – Part 2 Insert 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(). Dan postingan kali ini adalah part2 dan akan membahas tentang cara insert data dan menyimpan datanya ter-enkripsi/ter-encoding ke dalam base64 menggunakan Ajax 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.
Untuk caranya saya sama seperti CRDU yang kedua yaitu menggunakan AJAX. Validasi untuk field input text, select dan radio button nanti akan saya bahas juga dalam postingan 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 Menyimpan Data dan Encode Base64 Menggunakan Ajax
Validasi yang dimaksud disini adalah peringatan bahwa field ini wajib diisi. Sebenarnya untuk form tambah data sudah dibuat pada part 1 namun belum ada actionnya jadi dika sobat klik simpan maka tidak terjadi apa-apa. Selain itu juga belum ada validasinya. Jadi kita perlu menambahkan validasinya disini. Kita ubah tag <form> menjadi seperti dibawah
<form method="post" class="form-data" id="form-data">
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label>Nama Mahasiswa</label>
<input type="hidden" name="id" id="id">
<input type="text" name="nama_mahasiswa" id="nama_mahasiswa" class="form-control" required="true">
<p class="text-danger" id="err_nama_mahasiswa"></p>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Jurusan</label>
<select name="jurusan" id="jurusan" class="form-control" required="true">
<option value=""></option>
<option value="Sistem Informasi">Sistem Informasi</option>
<option value="Teknik Informatika">Teknik Informatika</option>
</select>
<p class="text-danger" id="err_jurusan"></p>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Tanggal Masuk</label>
<input type="date" name="tanggal_masuk" id="tanggal_masuk" class="form-control" required="true">
<p class="text-danger" id="err_tanggal_masuk"></p>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Jenis Kelamin</label><br>
<input type="radio" name="jenkel" id="jenkel1" value="Laki-laki" required="true"> Laki-laki
<input type="radio" name="jenkel" id="jenkel2" value="Perempuan"> Perempuan
</div>
<p class="text-danger" id="err_jenkel"></p>
</div>
</div>
<div class="form-group">
<label>Alamat</label>
<textarea name="alamat" id="alamat" class="form-control" required="true"></textarea>
<p class="text-danger" id="err_alamat"></p>
</div>
<div class="form-group">
<button type="button" name="simpan" id="simpan" class="btn btn-primary">
<i class="fa fa-save"></i> Simpan
</button>
</div>
</form>
Kita tambahkan baris ini
<p class="text-danger" id="err_nama_mahasiswa"></p>
baris ini berfungsi untuk menampilkan pesan ketika data belum diisi.
Kemudian pada tag <script> kita tambahkan kode ajax sehingga akan menjadi seperti dibawah ini.
$("#simpan").click(function(){
var data = $('.form-data').serialize();
var jenkel1 = document.getElementById("jenkel1").value;
var jenkel2 = document.getElementById("jenkel2").value;
var nama_mahasiswa = document.getElementById("nama_mahasiswa").value;
var tanggal_masuk = document.getElementById("tanggal_masuk").value;
var alamat = document.getElementById("alamat").value;
var jurusan = document.getElementById("jurusan").value;
if (nama_mahasiswa=="") {
document.getElementById("err_nama_mahasiswa").innerHTML = "Nama Mahasiswa Harus Diisi";
} else {
document.getElementById("err_nama_mahasiswa").innerHTML = "";
}
if (alamat=="") {
document.getElementById("err_alamat").innerHTML = "Alamat Mahasiswa Harus Diisi";
} else {
document.getElementById("err_alamat").innerHTML = "";
}
if (jurusan=="") {
document.getElementById("err_jurusan").innerHTML = "Jurusan Mahasiswa Harus Diisi";
} else {
document.getElementById("err_jurusan").innerHTML = "";
}
if (tanggal_masuk=="") {
document.getElementById("err_tanggal_masuk").innerHTML = "Tanggal Masuk Harus Diisi";
} else {
document.getElementById("err_tanggal_masuk").innerHTML = "";
}
if (document.getElementById("jenkel1").checked==false && document.getElementById("jenkel2").checked==false) {
document.getElementById("err_jenkel").innerHTML = "Jenis Kelamin Harus Dipilih";
} else {
document.getElementById("err_jenkel").innerHTML = "";
}
if (nama_mahasiswa!="" && tanggal_masuk!="" && alamat!="" && jurusan!="" && (document.getElementById("jenkel1").checked==true || document.getElementById("jenkel2").checked==true)) {
$.ajax({
type: 'POST',
url: "form_action.php",
data: data,
success: function() {
$('.data').load("data.php");
document.getElementById("id").value = "";
document.getElementById("form-data").reset();
}, error: function(response){
console.log(response.responseText);
}
});
}
});
Penjelasan :
Pada baris dibawah ini berarti #simpan adalah maksudnya jika tombol dengan id=”simpan” diklik maka akan memanggil perintah selanjutnya
$("#simpan").click(function(){
Untuk mengirim datanya kita perlu menambahkan baris dibawah yang artinya kita mengambil semua nilai yang ada di dalam inputan pada form yang mempunyai class=”form-data”
var data = $('.form-data').serialize();
Untuk mengirim attachment/input file nanti caranya agak sedikit berbeda dan akan saya bahas pada postingan saya yang lainnya karena pada contoh kali ini saya tidak menyertakan upload file.
Baca Juga :
Cara Membuat Menu Filter & Search dengan Ajax Tanpa Loading pada PHP
Pada baris dibawah artinya kita mengambil isi yang telah diinputkan user pada field yang mempunyai id=”nama_mahasiswa”
var nama_mahasiswa = document.getElementById("nama_mahasiswa").value;
Pada baris dibawah merupakan script untuk menampilkan peringatan eror, ini adalah script yang telah kita tambahkan pada tag <form> yang berjenis paragraf dan mempunyai id=’err_nama_mahasiswa’
if (nama_mahasiswa=="") {
document.getElementById("err_nama_mahasiswa").innerHTML = "Nama Mahasiswa Harus Diisi";
} else {
document.getElementById("err_nama_mahasiswa").innerHTML = "";
}
Sedangkan script dibawah merupakan pengecekan secara keseluruhan, jika sudah terisi semua dan radio button sudah tercentang salah satu baru lah dijalankan fungsi ajaxnya
if (nama_mahasiswa!="" && tanggal_masuk!="" && alamat!="" && jurusan!="" && (document.getElementById("jenkel1").checked==true || document.getElementById("jenkel2").checked==true)) {
Berikut ini adalah fungsi ajaxnya
$.ajax({
type: 'POST',
url: "form_action.php",
data: data,
success: function() {
$('.data').load("data.php");
document.getElementById("id").value = "";
document.getElementById("form-data").reset();
}, error: function(response){
console.log(response.responseText);
}
});
sesuai yang tertulis diatas, kita menggunakan method POST karena tentunya lebih aman dibandingkan GET. untuk urlnya bernama form_action.php artinya kita perlu membuat file form_action.php untuk menjalankan aksinya. Jika sukses ada 2 baris yang perlu ditambahkan yaitu
Kode untuk merefresh tabel. Refresh disini bukanlah loading halaman web secara keseluruhan melainkan hanya tabelnya saja dan menggunakan ajax jadi tidak akan terasa oleh user dan tentunya lebih cepat dibandingkan dengan loading keseluruhan halaman. Kodenya adalah seperti dibawah
$('.data').load("data.php");
Kedua adalah mereset form isian tadi menjadi kosong, kodenya adalah seperti dibawah
document.getElementById("form-data").reset();
Selanjutnya adalah membuat file form_action.php yang berfungsi untuk menyimpan ke dalam database. Kemudian isikan dengan script dibawah ini
<?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();
?>
Seperti biasa saya menggunakan prepare statement dan bind karena ini merupakan cara yang dinilai paling aman ketimbang lainnya. Kemudian pada baris dibawah
$nama_mahasiswa = base64_encode( stripslashes(strip_tags(htmlspecialchars($_POST['nama_mahasiswa'] ,ENT_QUOTES))) );
Untuk mengencode atau membuat tulisan menjadi acakadul maka sobat hanya perlu menambahkan base64_encode() dan sisanya adalah kode untuk menghindari SQL Injextion ataupun XSS Attack. Sedangkan untuk $_POST[‘nama_mahasiswa’] tentunya untuk mendapatkan datanya.
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.
Jika sudah selesai maka jalankan http://localhost/dewan-crud-base64/
Jika sudah diisi semua dan klik simpan maka akan langsung tersimpan tanpa loading dan pada database akan terenkripsi atau menjadi kata acak. Jika tidak percaya sobat bisa lihat pada demo atau bisa download project. Masih ada 2 lagi yaitu Edit data dan hapus data yang belum berjalan. Namun itu akan saya bahas besok pada postingan saya selanjutnya.
Sekian postingan saya tentangCRUD Enkripsi / Deskripsi dengan Base64 pada PHP – Part 2 Insert Data. Jika ada salah atau ada yang kurang saya mohon maaf dan apabila masih ada eror bisa disampaikan pada kolom komentar dibawah.
Baca juga :
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :