Pada kesempatan kali ini saya akan membahas lagi tentang CRUD. Ya ini merupakan hal yang paling standar dalam belajar pemrograman. Tapi karena saya sudah membahas banyak tentang CRUD jadi kali ini saya akan sedikit naik tingkat lagi karena apa, karena saya akan membahas CRUD yang menyimpan datanya terenkripsi ke dalam database MySQL/MariaDB. Setelah sebelumnya saya juga pernah membahas seperti ini tapi menggunakan base64 encode. Tentunya saya membuat standar saja ya, sobat bisa sesuaikan sesuai kebutuhan. Cara kerjanya gampang, pengguna input seperti biasa namun saat akan disimpan kita enkripsi terlebih dahulu dan enkripsi pada kali ini yang saya gunakan adalah metode “AES-256-CBC” karena enkripsi tersebut bisa juga untuk di deskripsi tentunya menggunakan key ya jadi sobat bisa membuat keynya dinamis mengikuti setiap user/pengguna atau statis yang mana sudah di deklarasikan dan bisa dipanggil berkali-kali.Untuk key juga buatlah yang susah dan panjang dan tidak perlu bisa di hafalkan agar tidak ada orang yang bisa mengira-ngira sehingga data yang ada di database ini hanya bisa tampil dengan benar hanya di aplikasi yang kita buat ini.Membuat Database MySQL
1. Pertama yang WAJIB ada yaitu sobat harus membuat sebuah database. Sobat bisa menggunakan tools bantu seperti navicat, heidi SQL atau lainnya. Sobat juga bisa membuatnya dengan mengakses url localhost/phpmyadmin -> klik tab Database dan tuliskan db_anonsecteam-> Klik tombol Create/Buat.
2. Buat tabel untuk mengetes nantinya apakah benar-benar terkoneksi atau belum dengan mengetikkan query dibawah ini pada tab SQL lalu klik tombol Kirim/Go
CREATE TABLE `tbl_mahasiswa_enkripsi` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nama_mahasiswa` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
`alamat` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
`jenis_kelamin` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
`tgl_masuk` date NOT NULL,
`jurusan` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 67 CHARACTER SET = latin1 COLLATE = latin1_swedish_ci ROW_FORMAT = Compact;
1
2
3
4
5
6
7
8
9
CREATE TABLE `tbl_mahasiswa_enkripsi` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nama_mahasiswa` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
`alamat` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
`jenis_kelamin` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
`tgl_masuk` date NOT NULL,
`jurusan` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 67 CHARACTER SET = latin1 COLLATE = latin1_swedish_ci ROW_FORMAT = Compact;
Pada tanggal masuk kita tidak membuatnya menjadi format date karena kita juga akan membuatnya terenkripsi. Jika sobat ingin menampilkan dengan tipe date agar bisa di sort berdasarkan tanggal tertua dan termuda maka sobat tidak perlu mengenkripsi kolom tanggal.
3. Isikan data pada tbl_mahasiswa_enkripsi dengan mengetikkan query dibawah ini
INSERT INTO `tbl_mahasiswa_enkripsi` VALUES (1, 'RmwxWnVLd2VQSHIzbUZRUE15Y3dLdz09', 'c1o4QUk1WTRnU3VnNHpld05Ob0Ezdz09', 'aTEzSE93UTBWQkVBeGZ0TEpRYXlRZz09', '2019-10-08', 'NlJaaTA1SGxJczkrRG14S0JpYzMrVlphQ0xma0VKRkVMM2cyT29YbDRmVT0=');
INSERT INTO `tbl_mahasiswa_enkripsi` VALUES (2, 'ZWVQTi9ad284bnNHY05HVnI2U3pXZz09', 'Njd6bTIrSW8vU2pLa3ljMmtHekFEUT09', 'aTEzSE93UTBWQkVBeGZ0TEpRYXlRZz09', '2019-08-28', 'TzR1NFZkUjhRS0lIR3NDMmJVaSt5UGI5YW5xcGxXRWNFVDVpK3dUN3Y4OD0=');
1
2
INSERT INTO `tbl_mahasiswa_enkripsi` VALUES (1, 'RmwxWnVLd2VQSHIzbUZRUE15Y3dLdz09', 'c1o4QUk1WTRnU3VnNHpld05Ob0Ezdz09', 'aTEzSE93UTBWQkVBeGZ0TEpRYXlRZz09', '2019-10-08', 'NlJaaTA1SGxJczkrRG14S0JpYzMrVlphQ0xma0VKRkVMM2cyT29YbDRmVT0=');
INSERT INTO `tbl_mahasiswa_enkripsi` VALUES (2, 'ZWVQTi9ad284bnNHY05HVnI2U3pXZz09', 'Njd6bTIrSW8vU2pLa3ljMmtHekFEUT09', 'aTEzSE93UTBWQkVBeGZ0TEpRYXlRZz09', '2019-08-28', 'TzR1NFZkUjhRS0lIR3NDMmJVaSt5UGI5YW5xcGxXRWNFVDVpK3dUN3Y4OD0=');
Membuat CRUD Enkripsi & Deskripsi AES-256-CBC
1. Langsung saja tidak usah berlama-lama, caranya seperti biasa sobat perlu membuat file koneksi.php terlebih dahulu.
koneksi.php
<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB1', 'db_dewankomputer');
// Buat Koneksinya
$db1 = new mysqli(HOST, USER, PASS, DB1);
//Mengirimkan Token Keamanan Ajax Request (Csrf Token)
session_start();
if (empty($_SESSION['csrf_token'])) {
$_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB1', 'db_anonsecteam');
// Buat Koneksinya
$db1 = new mysqli(HOST, USER, PASS, DB1);
//Mengirimkan Token Keamanan Ajax Request (Csrf Token)
session_start();
if (empty($_SESSION['csrf_token'])) {
$_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
?>
isikan sesuai dengan host, user, password, dan nama database sobat. Untuk contoh di bawah ini saya berinama database dengan nama db_anonsecteam
Untuk csrf_token bisa sobat masukkan ke dalam file ini atau sobat juga bisa membuat file baru contohnya auth.php untuk membuat CSRF Token untuk keamanan dalam mengirimkan data ajax.
2. Kemudian buat file csrf.php untuk melakukan pengecekan csrf saat ada request ajax yang akan di include di setiap file aksi yang dipanggil lewat ajax. Berikut adalah script di csrf.php :
csrf.php
<?php
header('Content-Type: application/json');
//Mengirimkan Token Keamanan
if (empty($_SESSION['csrf_token'])) {
$_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
$headers = apache_request_headers();
if (isset($headers['Csrf-Token'])) {
if ($headers['Csrf-Token'] !== $_SESSION['csrf_token']) {
exit(json_encode(['error' => 'Wrong CSRF token.']));
}
} else {
exit(json_encode(['error' => 'No CSRF token.']));
}
?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
header('Content-Type: application/json');
//Mengirimkan Token Keamanan
if (empty($_SESSION['csrf_token'])) {
$_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
$headers = apache_request_headers();
if (isset($headers['Csrf-Token'])) {
if ($headers['Csrf-Token'] !== $_SESSION['csrf_token']) {
exit(json_encode(['error' => 'Wrong CSRF token.']));
}
} else {
exit(json_encode(['error' => 'No CSRF token.']));
}
?>
Catatan :
Jika $headers[‘Csrf-Token’] menghasilkan error atau muncul peringatan No CSRF Token sobat bisa menggantinya dengan $headers[‘csrf-token’] atau $headers[‘Csrf-token’].
3. Buat file fungsi.php yang mana file ini berisi fungsi untuk mengenkripsi ataupun mendeskripsi datanya. Saya sarankan jika sobat ingin membuat sebuah fungsi maka digabungkan dalam 1 file saja seperti contoh ini sehingga jika sobat ingin menggunakannya berkali-kali tidak perlu membuat fungsinya lagi walaupun tinggal copas saja. Jika fungsinya tidak di 1 file maka jika ada perubahan apalagi error maka sobat harus mengganti satu per satu fungsinya. Mending kalau sobat hafal fungsinya dipakai dimana aja kalo ngga kan hanya buang-buang waktu saja. Isi fungsi.php adalah sebagai berikut :
fungsi.php
<?php
function convert($action, $string) {
$output = false;
$encrypt_method = "AES-256-CBC";
$secret_key = 'rer54etrg5eysdkjhf8ds7gfdubfd8sfydvf';
$secret_iv = 'g5gtghh45dsnfiu73b38b83fb873fb8';
// hash
$key = hash('sha256', $secret_key);
// iv - encrypt method AES-256-CBC expects 16 bytes - else you will get a warning
$iv = substr(hash('sha256', $secret_iv), 0, 16);
if( $action == 'encrypt' ) {
$output = openssl_encrypt($string, $encrypt_method, $key, 0, $iv);
$output = base64_encode($output);
}
else if( $action == 'decrypt' ){
$output = openssl_decrypt(base64_decode($string), $encrypt_method, $key, 0, $iv);
}
return $output;
}
function anti($string) {
$output = stripslashes(strip_tags(htmlspecialchars($string ,ENT_QUOTES)));
return $output;
}
?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php
function convert($action, $string) {
$output = false;
$encrypt_method = "AES-256-CBC";
$secret_key = 'rer54etrg5eysdkjhf8ds7gfdubfd8sfydvf';
$secret_iv = 'g5gtghh45dsnfiu73b38b83fb873fb8';
// hash
$key = hash('sha256', $secret_key);
// iv - encrypt method AES-256-CBC expects 16 bytes - else you will get a warning
$iv = substr(hash('sha256', $secret_iv), 0, 16);
if( $action == 'encrypt' ) {
$output = openssl_encrypt($string, $encrypt_method, $key, 0, $iv);
$output = base64_encode($output);
}
else if( $action == 'decrypt' ){
$output = openssl_decrypt(base64_decode($string), $encrypt_method, $key, 0, $iv);
}
return $output;
}
function anti($string) {
$output = stripslashes(strip_tags(htmlspecialchars($string ,ENT_QUOTES)));
return $output;
}
?>
Penjelasan :
– Fungsi convert() adalah untuk mengenkripsi dan deskripsi data.
– Fungsi anti() adalah untuk memfilter data untuk menghindari SQL Injection.
4. Buatlah file index.php pada folder sobat dan isikan dengan script dibawah ini
Pada tag <head>
<!-- Csrf Token -->
<meta name="csrf-token" content="<?= $_SESSION['csrf_token'] ?>">
<!-- Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<!-- Datatable -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
1
2
3
4
5
6
7
8
<!-- Csrf Token -->
<meta name="csrf-token" content="<?= $_SESSION['csrf_token'] ?>">
<!-- Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<!-- Datatable -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
Bootstrap digunakan untuk mempercantik tampilan dan juga tombol. Fontawesome digunakan untuk menampilkan logo pada tombol dan datatable digunakan untuk mempercantik tampilan tabel dan membuat search, pagination, kolom warna warni dll. Untuk paling atas saya menambahkan meda csrf-token untuk keamanan dalam mengirim Ajx request. Karena jika tidak ditambah itu maka nanti bisa saja orang lain menambahkan data dari local menggunakan aplikasi/tools buatan contohnya seperti postman atau bahkan menggunakan program seperti localhost. Tentunya ini belum cukup, akan lebih aman lagi jika ditambah pengecekan sesi login juga.
Pada tag <body> bagian bawah isikan
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- DataTable -->
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
1
2
3
4
5
6
7
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- DataTable -->
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Karena ini hanya demo maka saya menggunakan css dan js online. Jika untuk kepentingan development disarankan untuk mendownload terlebih dahulu librarinya.
Pada tag <body> isikan script dibawah
<div class="container">
<h2 align="center" style="margin: 30px;">CRUD Ajax Enkripsi / Deskripsi Data</h2>
<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>
<hr>
<div class="data"></div>
</div>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- DataTable -->
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Mengirimkan Token Keamanan
$.ajaxSetup({
headers : {
'Csrf-Token': $('meta[name="csrf-token"]').attr('content')
}
});
//load data tabel
$('.data').load("data.php");
// Action untuk simpan
$("#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 Mahasiswa 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() {
// untuk merefresh data
$('.data').load("data.php");
document.getElementById("id").value = "";
document.getElementById("form-data").reset();
}, error: function(data) {
console.log(data.responseText)
}
});
}
});
});
</script>
Penjelasan :
– sobat bisa lihat pada script bagian ini “$nama_mahasiswa = convert(“decrypt”, $row[‘nama_mahasiswa’]);”, itu adalah script untuk mendeskripsi data dari database sehingga bisa dibaca oleh manusia.
– untuk lainnya untuk edit_data, hapus_data, dll saya menggunakan Ajax dan Datatable. Jadi untuk penjelasannya jika blum tau maka sobat bisa lihat pada postingan CRUD sebelumnya karena sudah banyak saya jelaskan itu.
Seperti yang sobat lihat, file koneksi.php dan fungsi.php saya include-kan sehingga kita hanya membuat 1 kali dan bisa kita pakai berkali-kali tanpa perlu membuatnya di setiap filenya.
7. Seperti yang sobat lihat pada file data.php pada bagian ajax edit_data kita memanggil file get_data.php yang berfungsi untuk menampilkan data yang ingin di edit. File get_data.php kita isikan dengan script dibawah ini
<?php
include 'koneksi.php';
include 'fungsi.php';
$id = $_POST['id'];
$query = "SELECT * FROM tbl_mahasiswa_enkripsi 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'] = convert("decrypt", $row["nama_mahasiswa"]);
$h['alamat'] = convert("decrypt", $row["alamat"]);
$h['jurusan'] = convert("decrypt", $row["jurusan"]);
$h['jenis_kelamin'] = convert("decrypt", $row["jenis_kelamin"]);
$h['tgl_masuk'] = $row["tgl_masuk"];
}
echo json_encode($h);
?>
Penjelasan :
untuk funsinya sama seperti saat di file data.php yaitu convert() untuk mendeskripsikan data.
8. Terakhir adalah buat file hapus_data.php yang berfungsi untuk menyimpan aksi untuk menghapus data. Isinya sama seperti crud yang sebelumnya
hapus_data.php
<?php
include 'koneksi.php';
include 'csrf.php';
$id = $_POST['id'];
$query = "DELETE FROM tbl_mahasiswa_enkripsi WHERE id=?";
$dewan1 = $db1->prepare($query);
$dewan1->bind_param("i", $id);
$dewan1->execute();
echo json_encode(['success' => 'Sukses']);
$db1->close();
?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
include 'koneksi.php';
include 'csrf.php';
$id = $_POST['id'];
$query = "DELETE FROM tbl_mahasiswa_enkripsi WHERE id=?";
$dewan1 = $db1->prepare($query);
$dewan1->bind_param("i", $id);
$dewan1->execute();
echo json_encode(['success' => 'Sukses']);
$db1->close();
?>
9. Jika sudah jadi maka hasilnya akan tampil
Bagaimana mudah bukan? saya hanya membuat contoh sederhanya saja. Sobat bisa kembangkan sesuai kebutuhan sobat. Untuk CRUD kali ini tidak saya pisah-pisah dan banyak yang tidak saya jelaskan karena saya kira jika ingin membuat dengan cara ini sobat sudah mengerti dasar-dasar CRUD yang sudah sering juga saya bahas pada postingan saya yang sebelum-sebelumnya.
Sekian postingan saya tentang Membuat CRUD (Create, Read, Update, Delete) Enkripsi pada PHP & Ajax. Jika ada pertanyaan atau eror silahkan tinggalkan pada kolom komentar dibawah. Sampai ketemu pada postingan saya selanjutnya.
THANKS to : seven ghost team:)