Membuat CRUD Expert, Upload & Filter/Pencarian & Pencarian dengan JQuery, Ajax, Bootstrap Modal, SweetAlert dan WYSIHTML5 pada PHP – PART 1 MENAMPILKAN DATA

Hai sobat ketemu lagi dengan saya. .Tidak bosan-bosan saya memposting tentang cara membuat CRUD dengan Ajax. Dan pada kesempatan kali ini saya akan memposting CRUD Expert yang sudah lama sebenarnya ingin saya posting tetapi karena sangat-sangat malas jadi baru sempat posting hehe…

Pada CRUD ini saya BAGI-BAGI menjadi BEBERAPA PART karena sangat panjang ya guys hehe akan butuh waktu seharian atau bahkan lebih kalo saya harus bikin projectnya dan posting artikel seperti ini. Saya sarankan sobat lihat dari part ke part karena di sini juga saya akan membuat beberapa fungsi yang tidak saya bahas lagi di part selanjutnya jika sudah saya bahas di part ini.

Part pertama ini saya akan membuat data tertampil terlabih dahulu. Seperti biasa saya tidak suka berepot-repot ria membuat 100% custom, saya menggunakan beberapa plugin disini karena plugin/librari ini gratis, antara lain

1. Bootstrap untuk mempercantik tampilan dan juga saya akan menggunakan fitur ‘Modal’.
2. Datatables untuk membuat lebih rapi karena sudah ada pagination, searching, dll secara otomatis.
3. JQuery untuk memudahkan fungsi di aplikasi karena sudah banyak fungsi bawaan yang sangat berguna.
4. SweetAlert untuk mempercantik tampilan pesan ‘Alert’.
5. CKEditor sebagai WYSIHTML5 dengan fitu yang cukup lengkap.
6. Animate.css untuk memberikan beberapa animasi.
7. Font Awesome untuk menampilkan icon-icon pada aplikasi.
8. dan lain-lain.

Untuk fiturnya kita menambahkan live search atau pencarian langsung seperti pada postingan saya sebelumnya dan karena kita menggunakan Ajax jadi kita bisa membuat pencarian, tambah, edit, hapus data ini TANPA LOADING. Dan tidak seperti tutorial sebelumnya juga yang tidak ada upload datanya, pada kali ini saya contohkan juga bagaimana jika dengan upload gambar/foto.

Langsung saja kita mulai mencoba, 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

Sekali lagi saya sarankan jika sobat sudah terlanjur membuat aplikasi membuat mysql_query maka ubahlah menjadi mysqli_query atau PDO karena cara itu sudahlah tidak aman. Dan untuk langkah untuk mengeksekusi querynya menggunakan prepare statement dan bind param. Seperti apakah itu nanti akan saya jelaskan pada tutorial dibawah.

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

CREATE TABLE `tbl_mahasiswa_expert`  (
  `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,
  `biodata` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL,
  `foto` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
)

 

3. Isikan data untuk sampel di awal pada tbl_mahasiswa_expert dengan mengetikkan query dibawah ini

INSERT INTO `tbl_mahasiswa_expert` VALUES (1, 'Dewan Komputer', 'Cilacap', 'Laki-laki', '2019-01-01', 'Sistem Informasi', '', 'foto/no-image.png');
INSERT INTO `tbl_mahasiswa_expert` VALUES (2, 'Sule', 'Jakarta', 'Laki-laki', '2019-01-01', 'Teknik Informatika', '<p>tes</p>\r\n', 'foto/no-image.png');
INSERT INTO `tbl_mahasiswa_expert` VALUES (3, 'Maemunah', 'Yogyakarta', 'Perempuan', '2019-01-01', 'Sistem Informasi', '', 'foto/no-image.png');
INSERT INTO `tbl_mahasiswa_expert` VALUES (4, 'Tukul Arwana', 'Surabaya', 'Laki-laki', '2019-01-16', 'Teknik Informatika', '<p>yge</p>\r\n', 'foto/no-image.png');

 

Menampilkan Data dari Database MySQL dengan Ajax

Untuk mempercantik tampilan saya menggunakan bootstrap 4 dan datatables. Langsung saja saya berikan tutorialnya yaitu :

1. Pertama buatlah folder pada htdocs, pada contoh saya beri nama folder dewan-crud-ajax dan didalamnya juga buat folder foto dan dalam folder foto beri gambar dengan nama file noi-image.png yang gunanya untuk menampilkan gambar default jika pengguna tidak memasukkan gambar seperti contoh dibawah

2. Buatlah file koneksi.php pada folder project sobat dan isikan dengan script dibawah

<?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

Cara Membuat Koneksi dengan Database MySQL bisa Dua atau Lebih Koneksi database/Multiple Connection dalam Satu Host maupun beda Host

 

3. Buat file auth.php untuk membuat otentifikasinya dan untuk keamananya. Isikan dengan kode dibawah

<?php
//Membuat Token Keamanan Ajax Request (Csrf Token)
session_start();
if (empty($_SESSION['csrf_token'])) {
  $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}

//CEK LOGIN USER JIKA ADA TAMBAHKAN DIBAWAH INI

?>

Catatan :

Nama file bisa terserah sobat, jika sobat sudah memiliki file yang mirip dengan ini maka sobat bisa tambahkan saja di file tersebut. Karena pada contoh kali ini tidak ada session loginnya maka tidak ada pengecekan otentifikasi login, namun jika pada aplikasi sesungguhnya maka alangkah baiknya untuk ditambahkan pengecekan sesi login.

 

4. 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 dan pengecekan login (jika ada)

<?php
include 'auth.php';
?>

Pada tag <head>

<!-- 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.

<!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- SweetAlert -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.min.css">

    <!-- 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.21/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.bootstrap4.min.css">

    <!-- Animasi -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <style type="text/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.

Selanjutnya masukkan javascript sebenarnya ini bisa juga diletakkan pada tag <head> namun supaya lebih gampang saya sarankan letakkan pada tag <body> bagian bawah supaya lebih rapi dan lebih mudah dicari jadi pisah antara css dan javascript

<!-- JQuery -->
<script src=" https://code.jquery.com/jquery-3.5.1.js "></script>

<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- DataTable -->
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>

<!-- CKEditor -->
<script src="https://cdn.ckeditor.com/4.15.0/standard/ckeditor.js"></script>

<!-- Sweet Alert -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.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. Untuk plugin CKEditor juga versi standar ya pada url tersebut. Untuk versi Expertnya bisa di download langsung ke websitenya atau bisa juga di download di bawah nanti.

 

5. Selanjutnya barulah kita membuat tampilan HTML-nya, kurang lebih seperti dibawah ini. Namun sebelum itu saya beri gambarannya dulu untuk tampilannya nanti akan jadi seperti pada gambar.

Untuk navbar sama footer kreasi sendiri ya saya fokus ke modal dan tabelnya. Pertama kita buat tablenya terlebih dahulu yaitu cukup seperti dibawah

<marquee><h2>CRUD Expert & Pencarian dengan Ajax, Bootstrap Modal, SweetAlert dan WYSIHTML5 pada PHP TANPA LOADING</h2></marquee>

<div class="mb-3">
 	<fieldset class="border p-2">
	    <legend class="w-auto f"><h6>Pencarian</h6></legend>

        <div class="row">
		    <div class="col-sm-3">
		        <div class="form-group form-inline">
		            <label class="mr-3">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 class="mr-3">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>
	</fieldset>
</div>

<button style="margin-bottom: 20px;" id="btnTambah" class="btn btn-primary"> 
	<i class="fa fa-plus"></i> Tambah Data 
</button>

<div>
 	<fieldset class="border p-3">
	    <legend class="w-auto f"><h6>Data Mahasiswa</h6></legend>
    	<table id="dataTable" class="table table-striped table-bordered" width="100%"></table>
	</fieldset>
</div>

Jika sobat bingung kok cuma tabel, mana thead, tbody atau tfootnya??? itu nanti akan kita buat lewat javascriptnya saja.

Selanjutnya kita membuat modalnya, kode ini bisa diletakkan atas script html tabel ataupun dibawahnya tidak masalah seenaknya sobat aja. Disini saya akan membuat 2 modal yaitu modal untuk menambah/mengedit data (kita gabung) dan modal untuk view data. Pertama kita akan membuat modal untuk menambah/mengedit data yang tampilannya adalah sebagai berikut

untuk tampilan WYSIHTML5 saya menggunakan CKEditor, untuk yang masih bingun dengan plugin ini bisa kunjungi juga di postingan saya sebelumnya

Memasang Text Editor CKEditor WYSIHTML5 pada PHP dengan Mudah

untuk penulisan modal ini adalah sebagai berikut

<!-- MODAL TAMBAH & EDIT -->
<div class="modal fade" id="modaltambah" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" width="100%">
    <div class="modal-dialog modal-xl rotateInDownLeft animated">
        <div class="modal-content">
            <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <form method="post" class="form-data" id="form-data">
            	<div class="row">
            		<div class="col-sm-6">
            			<div class="form-group">
							<label>Foto</label>
							<input type="hidden" name="foto_lama" id="foto_lama">
							<input type="file" name="foto" id="foto" class="form-control">
						</div>
            			<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>
						<div class="form-group">
							<label>Jenis Kelamin</label><br>
							<input type="radio" name="jenkel" id="jenkel1" value="Laki-laki" class="wajib"> Laki-laki
							<input type="radio" name="jenkel" id="jenkel2" value="Perempuan" class="wajib"> Perempuan
							<p class="text-danger" id="err_jenkel"></p>
						</div>
						<div class="form-group">
							<label>Alamat</label>
							<textarea name="alamat" id="alamat" class="form-control wajib" required="true"></textarea>
							<p class="text-danger" id="err_alamat"></p>
						</div>
						<div class="form-group">
							<label>Jurusan</label>
							<select name="jurusan" id="jurusan" class="form-control wajib" 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 class="form-group">
							<label>Tanggal Masuk</label>
							<input type="date" name="tanggal_masuk" id="tanggal_masuk" class="form-control wajib" required="true">
							<p class="text-danger" id="err_tanggal_masuk"></p>
						</div>
            		</div>
            		<div class="col-sm-6">
            			<div class="form-group">
							<label>Biodata</label>
							<textarea name="biodata" id="biodata" class="form-control" required="true"></textarea>
						</div>
            		</div>
            	</div>
                
				<div class="form-group">
					<button type="button" name="simpan" id="btnSimpan" class="btn btn-primary">
						<i class="fa fa-save"></i> Simpan
					</button>
					<button type="button" class="btn btn-secondary" data-dismiss="modal">
						<i class="fa fa-times"></i> Close
					</button>
				</div>

                <div class="box-footer"></div>
            </form>
       </div>
        </div>
    </div>
</div>
<!-- END MODAL TAMBAH & EDIT -->

Selanjutnya kita membuat view untuk melihat/preview datanya, kurang lebih tampilannya seperti dibawah

penulisannya cukup seperti dibawah

<!-- MODAL VIEW -->
<div id="viewModal" class="modal fade mr-tp-100" role="dialog">
    <div class="modal-dialog modal-lg rollIn animated">
        <div class="modal-content">
            <div class="modal-body">
            	<button type="button" class="close" data-dismiss="modal" >
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>

            	<div class="container row">
					<div class="col-sm-6">
						<div class="form-group">
							<img src="" id="pFoto" height="100px">
						</div>
					</div>
					<div class="col-sm-6">
						<div class="form-group">
							<label><strong>Nama Mahasiswa</strong></label>
							<p class="text-break" id="pNamaMahasiswa"></p>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="form-group">
							<label><strong>Jenis Kelamin</strong></label>
							<p class="text-break" id="pJenisKelamin"></p>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="form-group">
							<label><strong>Alamat</strong></label>
							<p class="text-break" id="pAlamat"></p>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="form-group">
							<label><strong>Jurusan</strong></label>
							<p class="text-break" id="pJurusan"></p>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="form-group">
							<label><strong>Tanggal Masuk</strong></label>
							<p class="text-break" id="pTglMasuk"></p>
						</div>
					</div>
					<div class="col-sm-12">
						<div class="form-group">
							<label><strong>Biodata</strong></label>
							<p class="text-break" id="pBiodata"></p>
						</div>
					</div>
				</div>
            </div>
        </div>
    </div>
</div>
<!-- END MODAL VIEW -->

Catatan :

supaya terlihat lebih menarik saya tambah animasi untuk memunculkan modal seperti dibawah

<div class="modal-dialog modal-lg rollIn animated">

terlihat dengan kita menambahkan animate.css pada aplikasi kita selanjutnya kita cukup menambahkan class “rollIn animated” untuk animasi lainnya bisa dilihat di sini.

 

6. Pada step sebelumnya kita baru membahas tampilan/HTML saja ya di index.php, selanjutnya kita baru membuat javascriptnya masih di index.php, tentunya kode ini dimasukan dalam tag “<script>…</script>”. Untuk kode/fungsinya saya pisah-pisah ya guys.. biar ngga tinggal copas semua terus kelar akhirnya ngga tau apa yang nanti sobat copas ini

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




});

 

 

– Pertama kita membuat ajaxSetup jadi ini seperti masternya, kita cukup sekali saja menuliskannya otomatis akan berlaku setiap kita memanggil ajax, dan jangan lupa DIMASUKKAN DI DALAM TAG DIATAS

//Mengirimkan Token Keamanan
$.ajaxSetup({
    headers : {
        'Csrf-Token': $('meta[name="csrf-token"]').attr('content')
    }
});

 

 

– Kita set CKEditor-nya dengan menuliskan kode dibawah

CKEDITOR.replace('biodata', {
	language: 'en', // id, es, en, dll
	width: '100%',
	height: 230,
	toolbar: [
		{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
		{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
		'/',
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] },
		{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
		{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
		{ name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
		'/',
		{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
		{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
		{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
		{ name: 'others', items: [ '-' ] },
		{ name: 'about', items: [ 'About' ] }, 
	]
});

 

 

– Selanjutnya adalah menuliskan script untuk menampilkan data ke dalam tabel/datatables dan pencariannya tentunya

let s_Id = "";
let table = "";
setDatatable();
function setDatatable(){
	let jenis = "view_data";
	let jurusan = $('#s_jurusan').val();
	let keyword = $('#s_keyword').val();

	table = $('#dataTable').DataTable({
    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
    "destroy": true,
    "paging": true,
    "sorting": true,
    "responsive": true,
    "ajax": {
        "type": "POST",
        "url": "mahasiswa_action.php", //URL
        "data": {jenis:jenis, jurusan:jurusan, keyword:keyword}, // PARAM
        "timeout": 120000,
        "dataSrc": function (json) {
            if(json != null){
                return json
            } else {
                return "";
            }
        }
    },
    "sAjaxDataProp": "",
    "width": "100%",
    "order": [[ 0, "asc" ]],
    "dom": "Bfrtip",
    "buttons": [
        'copyHtml5',
        {
            extend: 'excelHtml5',
            filename: 'Data Mahasiswa',
            title: 'Rekap Data Mahasiswa',
            footer: true,
            exportOptions: {
                columns: [0, 1, 2, 3, 4, 5, 6, 7],
                orthogonal: 'export'
            },
        },
        'csvHtml5',
        {
            extend: 'pdfHtml5',
            filename: 'Data Mahasiswa',
            title: 'Rekap Data Mahasiswa',
            footer: true,
            exportOptions: {
                columns: [0, 1, 2, 3, 4, 5, 6, 7],
                orthogonal: 'export',
                modifier: {
			orientation:'landscape'
		}
            },
        },
        'colvis'
    ],
    "aoColumns": [
        {
            "name": "No", "title": "No",
            "data": null,
            render: function (data, type, row, meta) {
                return meta.row + 1;
            }
        },
        {
            "data": null,
            "name": "Foto",
            "title": "Foto",
            "render": function (data, row, type, meta) {
                var al = "";
                if(row === "export"){
                    al += data.foto;
                } else {
                	al += `<img class="mr-1" src="`+data.foto+`" height="30px" />`;
                }
                return al;
            }
        },
        {
            "data": null,
            "name": "Nama Mahasiswa",
            "title": "Nama Mahasiswa",
            "render": function (data, row, type, meta) {
                var al = "";
                if(row === "export"){
                    al += data.nama_mahasiswa;
                } else {
                    al += potongDeskripsi(data.nama_mahasiswa);
                }
                return al;
            }
        },
       	{"data": "alamat", "name": "Alamat", "title": "Alamat"},
       	{"data": "jurusan", "name": "Jurusan", "title": "Jurusan"},
       	{"data": "jenis_kelamin", "name": "Jenis Kelamin", "title": "Jenis Kelamin"},
        {
            "data": null,
            "name": "Tgl Masuk",
            "title": "Tgl Masuk",
            "render": function (data, row, type, meta) {
                var al = "";
                if(row === "export"){
                    al += convertDateFromDB(data.tgl_masuk);
                } else {
                    al += convertDateFromDB(data.tgl_masuk);
                }
                return al;
            }
        },
        {
            "data": null,
            "name": "Biodata",
            "title": "Biodata",
            "render": function (data, row, type, meta) {
                var al = "";
                if(row === "export"){
                    al += data.biodata;
                } else {
                    al += potongDeskripsi(jQuery(decodeHTMLEntities(data.biodata)).text());
                }
                return al;
            }
        },
        {
            "data": null,
            "name": "Aksi",
            "title": "Aksi",
            "width": "90px",
            "render": function (data, row, type, meta) {
                return `<button id="`+data.id+`" class="btn btn-primary btn-sm view_data" title="Lihat Data"> <i class="fa fa-search"></i></button>
                <button id="`+data.id+`" class="btn btn-success btn-sm edit_data" title="Edit Data"> <i class="fa fa-edit"></i></button>
                <button id="`+data.id+`" class="btn btn-danger btn-sm hapus_data" title="Hapus Data"> <i class="fa fa-trash"></i></button>
                `;
            }
        }
    ]
});

	table.buttons().container().appendTo( '#dataTable_wrapper .col-md-6:eq(0)' );
}

Penjelasan :

– Fungsi ini adalah fungsi untuk menampilkan data ke tabel sekaligus action dari tombol yang ada di dalam tabel seperti view, edit dan hapus. Jadi jika kita ingin merefresh tabel kita tidak perlu loading seluruh halaman tapi kita cukup memanggil fungsi

setDatatable();

– Pada fungsi diatas terdapat url mahasiswa_action.php namun akan kita bahas nanti pada step 7

 

 

– Membuat fungsi custom javascript. Jika sobat lebih teliti tidak hanya copas pasti sobat sadar jika ada fungsi yang asing yaitu potongDeskripsi(), convertDateFromDB() dan decodeHTMLEntities(). Fungsi tersebut adalah fungsi custom yg mempunyai fungsi masing-masing seperti

• potongDeskripsi() adalah fungsi untuk menampilkan preview biodata/nama supaya tidak terlalu panjang sehingga jika terlalu panjang maka akan menjadi ‘…’
• convertDateFromDB() adalah fungsi untuk mengkonvert tanggal menjadi format indonesia
• decodeHTMLEntities() adalah untuk mengkonvert biodata karena pada kolom biodata kita menggunakan CKEditor jadi yang tersimpan adalah kode HTML

function decodeHTMLEntities(text) {
  return $("<textarea/>")
    .html(text)
    .text();
}

function convertDateFromDB(x){
	let al = "";
	let bulan = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];

	let tgl = x.split("-")[2];
	let bln = bulan[Math.abs(x.split("-")[1])-1];
	let thn = x.split("-")[0];

	if (x=="" || x==null) {
		al = "";
	} else {
		al = tgl + " " + bln + " " + thn;
	}

	return al;
}

function potongDeskripsi(string){
	let hasil = "";

	if (string=="" || string==null) {
		hasil = "";
	} else if(string.length > 15){
		hasil = string.substr(0, 15) + "...";
	} else {
		hasil = string;
	}
	return hasil;
}

– Selanjutnya https://dewankomputer.com/2019/04/08/membuat-crud-expert-pencarian-dengan-jquery-ajax-bootstrap-modal-sweetalert-dan-wysihtml5-pada-php-part-1-menampilkan-data/adalah membuat action tampildata/pencariannya

$("#btnCari").click(function(){
	setDatatable();
});

$("#s_jurusan").change(function(){
	setDatatable();
});

$("#s_keyword").keyup(function(){
	setDatatable();
});

Sangat gampang bukan dalam membuat loading/live search ini kita tinggal memanggil setDatatable(); pada setiap event sehingga tabel secara otomatis akan merefresh sendiri. Namun cara ini tentunya akan memberatkan database jika terdapat banyak data dan banyak user karena setiap 1 huruf pada kolom keyword ditulis, sistem akan mencari/memanggil query. Jika ini menurut sobat terlalu berat maka sobat bisa menggunakan 1 event saja yaitu even saat #btnCari/tombol cari diklik.

 

 

7. Nah akhirnya javascript sudah selesai, selanjutnya kita membuat file mahasiswa_action.php dan masukkan script dibawah ini

<?php
session_start();
include 'koneksi.php';
include 'csrf.php';

function anti($text){
	return $id = stripslashes(strip_tags(htmlspecialchars($text, ENT_QUOTES)));
}

if (isset($_POST['jenis']) && $_POST['jenis']=="view_data") {
	$data = [];
	$jurusan = '%' . anti($_POST['jurusan']) . '%';
	$keyword = '%' . anti($_POST['keyword']) . '%';

	$query = "SELECT * FROM tbl_mahasiswa_expert WHERE jurusan LIKE ? AND nama_mahasiswa LIKE ? ORDER BY nama_mahasiswa ASC";
	$dewan1 = $db1->prepare($query);
	$dewan1->bind_param('ss', $jurusan, $keyword);
	$dewan1->execute();
	$res1 = $dewan1->get_result();
	while ($row = $res1->fetch_assoc()) {
	    $data[] = $row;
	}
	echo json_encode($data);
}

?>

Penjelasan :

– Pada kode diatas terdapat fungsi anti() yang gunanya untuk memfilter semua inputan sehingga dapat menghindari SQL Injection. Dan 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. Hindari penggunakan query 1 baris seperti dibawah

mysqli_query("SELECT * FROM tbl_mahasiswa_expert WHERE jurusan LIKE '%$jurusan%' AND nama_mahasiswa LIKE '%$keyword%' ORDER BY nama_mahasiswa ASC")

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.

 

8. Eitss belum selese ya guys, kita buat lagi securitynya. Pada step ini kita buat security Ajaxnya yaitu membaca headernya seperti yang sudah dibahas di atas yang ajaxSetup itu lho…

Seperti yang terlihat di mahasiswa_action.php paling atas kita meng-includekan file csrf.php jadi selanjutnya kita buat file csrf.php dan masukkan script dibawah ini’

  <?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.']));
    }
  ?>

Pasti sobat bertanya-tanya untuk apa file ini???

Fungsinya adalah memvalidasi/mengecek apakah sesi csrf pada aplikasi dan sesi yang dikirimkan oleh Ajax sama..

Jika tidak sama maka akan muncul pesan ‘Wrong CSRF token.’ atau jika tidak ada csrfnya maka akan muncul pesan ‘No CSRF token.’

Karena jika tidak ada csrf maka siapapun dapat nge-hit url Ajax sobat misal

url ajax : https://dewankomputer.com/tambah_mahasiswa.php

param : nama_mahasiswa, jenis_kelamin, jurusan, dll

terus buka aplikasi postman dan kita isi url dan parameternya saat kita hit maka setiap hit di postman akan masuk ke aplikasi  atau yang lebih parah orang bisa bikin aplikasi curl yang melooping sampe 1.000.000 kali yang isinya ngehit url tersebut dengan isi parameternya sama semua maka di database kita akan tersimpan juga 1.000.000 kali. Bahaya bukan?

makanya hati-hati jika sobat lihat artikel-artikel di blog lain karena blog lain tidak memperdulikan itu jadi hanya dasarnya saja tanpa memperdulikan securitynya.

Gunakanya header pada Ajax dan csrf itu adalah untuk menghindari itu karena jika orang lain hit url dengan postman apalagi bikin aplikasi curl maka data tidak akan bisa masuk dan langsung gagal/diblok tanpa kita membuang resource untuk query ke database. Karena jika looping 1.000.000 kali apalagi 1.000.000.000.000 kali maka server database kita yang akan down apalagi jika aplikasi kita di shared hosting.

-Sedangkan 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’].

 

Oke untuk hari ini cukup segitu aja. Harusnya jika sobat mengikuti step by step maka data contoh yang sudah dimasukkan sebelumnya bisa tampil. Jika mungkin ada fungsi yang terlewat saya masukkan pada postingan sobat bisa tinggalkan komentar dibawah.

Ternyata part 1 sangat panjang sekali sampai berjam-jam membuatnya dan karena ini tentang CRUD Expert saya harap yang mengunjungi postingan ini juga sudah expert jadi mungkin bisa 2 Part saja tidak seperti tutorial CRUD yang pertama bisa sampai 4 Part karena untuk pemula agar tidak bingung. Kita selesaikan di Part selanjutnya sampai bertemu di part selanjutnya.

Baca Juga :

Membuat CRUD Expert & Pencarian dengan JQuery, Ajax, Bootstrap Modal, SweetAlert dan WYSIHTML5 pada PHP – PART 2 ACTION SIMPAN, PREVIEW, EDIT, HAPUS

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :
Demo