Cara Membuat CRUD (Create, Read, Update, Delete) Enkripsi / Deskripsi dengan Base64 pada PHP – Part 1 Menampilkan 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().
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.
Seperti biasa pada postingan tentang CRUD saya bagi menjadi beberapa part dan pada part yang pertama ini saya ingin membahas tentang cara menampilkan data yang telah diencoding menggunakan base64. Sobat cukup ikuti cara dibawah ini. Untuk caranya saya sama seperti CRUD yang kedua yaitu menggunakan AJAX. 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
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_dewankomputer-> 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
1 2 3 4 5 6 7 8 |
CREATE TABLE `tbl_mahasiswa_base64` ( `id` int(11) PRIMARY KEY NOT NULL AUTO_INCREMENT, `nama_mahasiswa` varchar(255) NOT NULL, `alamat` text NOT NULL, `jenis_kelamin` varchar(255) NOT NULL, `tgl_masuk` varchar(255) NOT NULL, `jurusan` varchar(255) NOT NULL, ) |
Pada tanggal masuk kita tidak membuatnya menjadi format date karena kita juga akan membuatnya terencode. Jika sobat ingin menampilkan dengan tipe date agar bisa di sort berdasarkan tanggal tertua dan termuda maka sobat tidak perlu meng-encode kolom tanggal.
3. Isikan data pada tbl_mahasiswa_base64 dengan mengetikkan query dibawah ini
1 2 3 4 5 |
INSERT INTO `tbl_mahasiswa_base64` VALUES (4, 'QXJpZWwgVGF0dW0=', 'SmFrYXJ0YQ==', 'UGVyZW1wdWFu', 'MjAxOS0wMy0xMw==', 'VGVrbmlrIEluZm9ybWF0aWth'); INSERT INTO `tbl_mahasiswa_base64` VALUES (5, 'TWVyaWFtIEJlcmxpbmE=', 'UGFkYW5n', 'UGVyZW1wdWFu', 'MjAxOS0wMy0xMw==', 'U2lzdGVtIEluZm9ybWFzaQ=='); INSERT INTO `tbl_mahasiswa_base64` VALUES (6, 'RGV3YW4=', 'SmFrYXJ0YQ==', 'TGFraS1sYWtp', 'MjAxOS0wMy0wMQ==', 'U2lzdGVtIEluZm9ybWFzaQ=='); INSERT INTO `tbl_mahasiswa_base64` VALUES (7, 'S29tcHV0ZXI=', 'Q2lsYWNhcA==', 'TGFraS1sYWtp', 'MjAxOS0wMy0wNw==', 'VGVrbmlrIEluZm9ybWF0aWth'); INSERT INTO `tbl_mahasiswa_base64` VALUES (8, 'QWhtYWQgWWFuaQ==', 'UHVyd29rZXJ0bw==', 'TGFraS1sYWtp', 'MjAxOS0wMy0wMQ==', 'VGVrbmlrIEluZm9ybWF0aWth'); |
Menampilkan Data dari Database MySQL dengan Ajax
Untuk mempercantik tampilan saya menggunakan bootstrap 4 dan saya tidak membutuhkan datatables seperti pada CRUD ajax sebelumnya karena nanti kita akan membuat search sendiri. Langsung saja saya berikan tutorialnya yaitu :
1. Pertama
buatlah folder pada htdocs, pada contoh saya beri nama folder dewan-crud-base64.2. Buatlah file koneksi.php pada folder project sobat dan isikan dengan script dibawah
1 2 3 4 5 6 7 8 9 |
<?php define('HOST','localhost'); define('USER','root'); define('PASS',''); define('DB1', 'db_dewankomputer'); // Buat Koneksinya $db1 = new mysqli(HOST, USER, PASS, DB1); ?> |
isikan sesuai dengan host, user, password, dan nama database sobat. Untuk contoh di bawah ini saya berinama database dengan nama db_dewankomputer.
Jika sobat ingin tahu cara mengkoneksikan dengan dua database atau lebih dalam satu aplikasi maka sobat bisa kunjungi postingan dibawah ini
3. Buatlah file index.php pada folder sobat dan isikan dengan script dibawah ini
Di paling atas atau pada baris pertama diatas tag <html> kita tambahkan baris berikut untuk membuat session csrf_token
1 2 3 4 5 6 7 |
<?php //Mengirimkan Token Keamanan Ajax Request (Csrf Token) session_start(); if (empty($_SESSION['csrf_token'])) { $_SESSION['csrf_token'] = bin2hex(random_bytes(32)); } ?> |
Pada tag <head>
1 2 |
<!-- Csrf Token --> <meta name="csrf-token" content="<?= $_SESSION['csrf_token'] ?>"> |
Karena kita menggunakan Ajax maka kita perlu csrf token untuk membatasi siapa saja yang bisa mengakses url. Ini berfungsi untuk keamanan dalam pertukaran datanya.
Kemudian tambahkan css untuk mempercantik tampilan pada contoh kali ini saya menggunakan bootstrap.
1 2 3 4 |
<!-- 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"> |
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.
Pada tag <body> bagian bawah isikan
1 2 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.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 atau nanti sobat bisa download project di akhir postingan.
Pada tag <body> isikan script dibawah
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<nav class="navbar navbar-dark bg-primary"> <a class="navbar-brand" href="index.php" style="color: #fff;"> Dewan Komputer </a> </nav> <div class="container"> <h2 align="center" style="margin: 30px;">CRUD Ajax Encoding / Decoding Base64</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="row mb-3"> <div class="col-sm-12"><h4>Cari</h4></div> <div class="col-sm-3"> <div class="form-group form-inline"> <label>Jurusan</label> <select name="s_jurusan" id="s_jurusan" class="form-control"> <option value=""></option> <option value="Sistem Informasi">Sistem Informasi</option> <option value="Teknik Informatika">Teknik Informatika</option> </select> </div> </div> <div class="col-sm-4"> <div class="form-group form-inline"> <label>Keyword</label> <input type="text" name="s_keyword" id="s_keyword" class="form-control"> </div> </div> <div class="col-sm-4"> <button id="search" name="search" class="btn btn-warning"><i class="fa fa-search"></i> Cari</button> </div> </div> <div class="data"></div> </div> <div class="text-center">© <?php echo date('Y'); ?> Copyright: <a href="https://dewankomputer.com/"> Dewan Komputer</a> </div> |
4. Pada tag <body> paling bawah kita buat script dibawah untuk menampilkan tabelnya dan menjalankan menu searchnya
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<script type="text/javascript"> //Mengirimkan Token Keamanan $.ajaxSetup({ headers : { 'Csrf-Token': $('meta[name="csrf-token"]').attr('content') } }); $(document).ready(function(){ $('.data').load("data.php"); $("#search").click(function(){ var jurusan = $("#s_jurusan").val(); var nama_mahasiswa = $("#s_keyword").val(); $.ajax({ type: 'POST', url: "data.php", data: {jurusan: jurusan, nama_mahasiswa:nama_mahasiswa}, success: function(msg) { $('.data').html(msg); } }); }); }); </script> |
Penjelasan :
1. Pada kode dibawah adalah untuk mengirim csrf token saat menggunakan Ajax. Sobat bisa menempatkan kode ini pada main.js yang mana file tersebut kita indludekan di setiap file sehingga kita tidak perlu menambahkan kode ini pada setiap file atau pada setiap Ajax. Cara ini lebih memudahkan kita karena kita hanya sekali menuliskan kode dibawah. Kode ini adalah kode yang akan dikirimkan setiap kita membuat ajax.
1 2 3 4 5 |
$.ajaxSetup({ headers : { 'Csrf-Token': $('meta[name="csrf-token"]').attr('content') } }); |
5. Buat file data.php yang berfungsi untuk reload data menggunakan ajax sehingga aplikasi sobat tidak perlu loading saat menyimpan data atau ada data update. Isikan data.php dengan script dibawah ini
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<h3 align="center" class="bg-success pb-1 pt-1 text-white">Data Setelah Di Decoding dengan Base64</h3> <table class="table table-striped table-bordered" style="width:100%"> <thead> <tr> <td>No</td> <td>Nama Mahasiswa</td> <td>Alamat</td> <td>Jurusan</td> <td>Jenis Kelamin</td> <td>Tanggal Masuk</td> <td>Action</td> </tr> </thead> <tbody> <?php include 'koneksi.php'; $s_jurusan=""; $s_nama_mahasiswa=""; if (isset($_POST['jurusan'])) { $s_jurusan = $_POST['jurusan']; $s_nama_mahasiswa = $_POST['nama_mahasiswa']; } $no = 1; $search_jurusan = '%'. $s_jurusan .'%'; $search_nama_mahasiswa = '%'. $s_nama_mahasiswa .'%'; $query = "SELECT * FROM tbl_mahasiswa_base64 WHERE from_base64(jurusan) LIKE ? AND from_base64(nama_mahasiswa) LIKE ? ORDER BY id DESC"; $dewan1 = $db1->prepare($query); $dewan1->bind_param('ss', $search_jurusan, $search_nama_mahasiswa); $dewan1->execute(); $res1 = $dewan1->get_result(); if ($res1->num_rows > 0) { while ($row = $res1->fetch_assoc()) { $id = $row['id']; $nama_mahasiswa = $row['nama_mahasiswa']; $alamat = $row['alamat']; $jurusan = $row['jurusan']; $jenis_kelamin = $row['jenis_kelamin']; $tgl_masuk = $row['tgl_masuk']; ?> <tr> <td><?php echo $no++; ?></td> <td><?php echo base64_decode($nama_mahasiswa); ?></td> <td><?php echo base64_decode($alamat); ?></td> <td><?php echo base64_decode($jurusan); ?></td> <td><?php echo base64_decode($jenis_kelamin); ?></td> <td><?php echo base64_decode($tgl_masuk); ?></td> <td> <button id="<?php echo $id; ?>" class="btn btn-success btn-sm edit_data"> <i class="fa fa-edit"></i> Edit </button> <button id="<?php echo $id; ?>" class="btn btn-danger btn-sm hapus_data"> <i class="fa fa-trash"></i> Hapus </button> </td> </tr> <?php } } else { ?> <tr> <td colspan='7'>Tidak ada data ditemukan</td> </tr> <?php } ?> </tbody> </table> <?php $db1->close(); ?> |
6. Untuk keamanan karena kita menggunakan header pada ajax, kita perlu membuat file csrf.php kemudian isikan dengan script dibawah
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 setelah ditambahkan csrf terjadi error dengan pasan ‘No CSRF Token’ berarti sobat belum mengirimkan csrf saat membuat ajax. Script saat mengirimkan seharusnya ada pada main.js atau file php menggunakan kode $.ajaxSetup().
– Jika sobat sudah mengirimkan dan masih ERROR yang sama mungkin kasusnya seperti yang pernah saya alami, pada ajaxSetup saya mengirimkan Csrf-Token namun yang terkirim malah csrf-token, sehingga sobat harus mengganti pada kode $headers[‘Csrf-Token’] menjadi $headers[‘csrf-token’].
-Sedangkan jika sobat mengalami error Wrong csrf token berarti token yang dikirimkan tidak sama, mungkin penyebabnya sessionn belum dimulai sehingga sistem membuat session cesr_token baru. Untuk kasus inisobat perlu menambahkan kode session_start();
7. Jika sobat jalankan http://localhost/dewan-crud-base64/ maka akan muncul hasilnya seperti gambar dibawah
Padahal yang ada pada database hanyalah kata yang tidak bisa dibace seperti gambar dibawah
Eitssss………. tunggu dulu ini masih belum selesai. Jika sobat melakukan search untuk menemukan baris dengan nama mahasiswa ‘Dewan’ namun sobat mencarinya denga kata kunci ‘dewan’ maka tidak akan ketemu. Dulu saya pernah membuat aplikasi membuat base64 sperti ini dan ini akan menjadi masalah karena User tidak mau peduli dengan masalah itu dan pasti maunya untuk dipermudah dan jika kita tidak bisa mencarinya dengan Sensitive Case maka itu sama saja aplikasi yang kita buat tidak berguna. Oleh karena itu sebelum sobat membuatnya menggunakan base64, akan saya berikan contoh ini supaya tidak mengalami kesalahan yang sama.
Cara Membuat Search Sensitive Case dengan Base64 pada PHP
Perlu sobat ketahui, database mysql/mariadb juga support untuk encode/decode data menggunakan base64. Seperti yang sudah saya contohkan sebelumnya, untuk langsung meng-encode data bisa dengan perintah berikut
1 |
SELECT TO_BASE64("Dewan Komputer") |
Dan untuk meng-decode data yang sudah di encode adalah dengan perintah dibawah
1 |
SELECT FROM_BASE64("RGV3YW4gS29tcHV0ZXI=") |
Dan untuk membuatnya bisa mencari dengan huruf yang sensitive case / tidak melihat besar kecil huruf maka sobat juga harus mengkonvertnya terlebih dahulu ke dalam format utf8mb4. Sehingga pada perintah untuk menampilkan data pada tabelnya di file data.php sobat ubah menjadi seperti dibawah
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$query = "SELECT * FROM tbl_mahasiswa_base64 WHERE CONVERT ( from_base64 ( jurusan ) USING utf8mb4 ) LIKE ? AND ( CONVERT ( from_base64 ( nama_mahasiswa ) USING utf8mb4 ) LIKE ? OR CONVERT ( from_base64 ( alamat ) USING utf8mb4 ) LIKE ? OR CONVERT ( from_base64 ( jurusan ) USING utf8mb4 ) LIKE ? OR CONVERT ( from_base64 ( jenis_kelamin ) USING utf8mb4 ) LIKE ? OR CONVERT ( from_base64 ( tgl_masuk ) USING utf8mb4 ) LIKE ? ) ORDER BY id DESC"; $dewan1 = $db1->prepare($query); $dewan1->bind_param('ssssss', $search_jurusan, $search_nama_mahasiswa, $search_nama_mahasiswa, $search_nama_mahasiswa, $search_nama_mahasiswa, $search_nama_mahasiswa); $dewan1->execute(); $res1 = $dewan1->get_result(); while ($row = $res1->fetch_assoc()) { } |
Dengan query diatas selain untuk convert ke utf8mb4 dan menjadikan pencarian tidak lagi sensitif terhadap besar kecil huruf tapi juga dapat mencari ke semua kolom.
Jika tabel sudah tampil dan search bisa dengan huruf besar maupun kecil berarti tandanya Ajax sudah bekerja sedang sempurna. Sisanya kita nanti tinggal menjadikan action berjalan. Sekian postingan saya tentang CRUD Enkripsi / Deskripsi dengan Base64 pada PHP – Part 1 Menampilkan Data. Jika ada pertanyaan atau eror silahkan tinggalkan pada kolom komentar dibawah. Sampai ketemu pada postingan saya selanjutnya.
Baca juga :
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :
kak, kok database nya gak bisa di impor ya ?
coba di execute saja querynya
Saya coba pk tools online decode hasilnya muncul kembali plain text nya, gmn caranya
supaya tidak bisa di decode org lain. apakah harus menambahkan salt atau yg lainnya,.
yg namanya base_64 pasti bisa di decode mas bahkan di mysql/mariadb juga ada fungsi bawaannya jadi ngga perlu pake tools jg bisa..
jika ingin menggunakan saltr bisa lihat di artikel dibawah
https://dewankomputer.com/2019/04/02/membuat-crud-create-read-update-delete-enkripsi-deskripsi-pada-php-ajax/
siap matur suwun infonya, bagaimana untuk enkripsi php seperti ioncube spy data sensitif tetap aman walaupun kebobolan di databasenya