Cara Menampilkan Datatables pada PHP dan Ajax

Hai ketemu lagi dengan saya dan pada kesempatan kali ini saya akan memposting tentang cara menampilkan data pada tabel menggunakan plugin Datatable. Plugin ini sangat membantu sekali bagi para programmer. Kenapa? karena dengan plugin ini kita tidak perlu membuat lagi pagination, search dan lain-lainnya itu dimana jika kita membuat fitur itu tanpa plugin akan menghabiskan waktu yang lama. Berbeda jika kita menggunakan plugin datatables ini, secara otomatis plugin ini akan membuat tampilan search, pagination dan lain-lain yang tentunya memudahkan dan enteng karena plugin ini menggunakan javascript.

Walaupun saya sudah mencontohkan cara penggunaan ini si setiap postingan saya tentang CRUD tapi itu hanya sebagian kecil dari cara penggunaan plugin ini. Dan disini saya akan memfokuskan cara dalam penggunaan plugin ini. Tapi mungkin saya tidak bisa membuat dalam 1 postingan karena fiturnya sangat banyak. Jadi pada postingan pertama ini saya hanya akan membahas tentang menampilkan yang paling standar yaitu pada kode php dan yang agak sedikit kompleks yaitu menggunakan ajax. Sobat tinggl pilihh mana kesukaan sobat, kalo saya sendiri lebih suka membuat dengan ajax karena lebih enak untuk di buat ini itu. Oke langsung saja saya contohkan cara penggunaannya.

Baca Juga :

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

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_search`  (
  `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` date NOT NULL,
  `jurusan` varchar(255) NOT NULL
)

 

3. Isikan data pada tbl_mahasiswa_search dengan mengetikkan query dibawah ini

INSERT INTO `tbl_mahasiswa_search` VALUES (1, 'Dewan Komputer', 'Cilacap', 'Laki-laki', '2019-01-01', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (2, 'Sule', 'Jakarta', 'Laki-laki', '2019-01-01', 'Teknik Informatika');
INSERT INTO `tbl_mahasiswa_search` VALUES (3, 'Maemunah', 'Yogyakarta', 'Perempuan', '2019-01-01', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (4, 'Siti', 'Semarang', 'Perempuan', '2019-01-01', 'Teknik Informatika');
INSERT INTO `tbl_mahasiswa_search` VALUES (5, 'Andre', 'Purwokerto', 'Laki-laki', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (6, 'John Smith', 'Njojog', 'Laki-laki', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (7, 'Adam Levine', 'Prapatan Ciamis', 'Laki-laki', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (10, 'Sudirman', 'Jakarta', 'Laki-laki', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (11, 'Ahmad Yani', 'Jakarta', 'Laki-laki', '2019-01-22', 'Teknik Informatika');
INSERT INTO `tbl_mahasiswa_search` VALUES (12, 'Suprapto', 'Jakarta', 'Laki-laki', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (13, 'Adul', 'Medan', 'Laki-laki', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (14, 'Komeng', 'Palangkaraya', 'Laki-laki', '2019-01-22', 'Teknik Informatika');
INSERT INTO `tbl_mahasiswa_search` VALUES (15, 'Dono', 'Riau', 'Laki-laki', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (16, 'Kasino', 'Jakarta', 'Laki-laki', '2019-01-22', 'Teknik Informatika');
INSERT INTO `tbl_mahasiswa_search` VALUES (17, 'Indro', 'Purbalingga', 'Laki-laki', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (18, 'Titik Puspa', 'Purwokerto', 'Perempuan', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (19, 'Meriam Belina', 'Cilacap', 'Perempuan', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (20, 'John Gundulmu', 'Jakarta', 'Laki-laki', '2019-01-22', 'Teknik Informatika');
INSERT INTO `tbl_mahasiswa_search` VALUES (21, 'Adele', 'Jakarta', 'Laki-laki', '2019-01-22', 'Teknik Informatika');
INSERT INTO `tbl_mahasiswa_search` VALUES (22, 'Jokowi', 'Jakarta', 'Laki-laki', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (23, 'Megawati', 'Medan', 'Perempuan', '2019-01-22', 'Teknik Informatika');
INSERT INTO `tbl_mahasiswa_search` VALUES (24, 'Prabowo', 'Palangkaraya', 'Laki-laki', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (25, 'Raisa', 'Riau', 'Perempuan', '2019-01-22', 'Teknik Informatika');
INSERT INTO `tbl_mahasiswa_search` VALUES (26, 'Luna Maya', 'Jakarta', 'Perempuan', '2019-01-22', 'Teknik Informatika');
INSERT INTO `tbl_mahasiswa_search` VALUES (27, 'Dery', 'Purbalingga', 'Laki-laki', '2019-01-22', 'Sistem Informasi');
INSERT INTO `tbl_mahasiswa_search` VALUES (28, 'Septian', 'Purwokerto', 'Laki-laki', '2019-01-22', 'Sistem Informasi');

 

Menampilkan Data ke Datatables dengan PHP

Untuk mempercantik tampilannya saya menggunakan bootstrap 4. Tidak usah berlama-lama, saya akan memberikan contohnya, yaitu sebagai berikut

1. Pertama buatlah folder pada htdocs, pada contoh saya beri nama folder dewan-datatables.

2. Buatlah file koneksi.php pada folder project sobat dan isikan dengan script dibawah. Saya segaja tidak membuat file koneksi pada satu file dengan menu search seperti kebanyakan tutorial karena dalam penerapannya itu tidaklah mungkin jika kita membuat file koneksinya pada setiap halaman karena akan sangat susah nanti jika akan mengimplementasikan atau memindahkan server kita harus ganti satu per satu. Oleh karena itu kita harus membuatnya pada satu file saja dan jika ingin pindah server kita akan menggantinya di file ini saja.

<?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 Menggunakan PHP – Part 3

 

3. Untuk mempercantik tambahkan librari bootstrap dan saya menggunakan fontawesome untuk icon-nya dan tentunya library datatables. Jika aplikasi yagn sedang sobat buat sudah ada librari-librari tersebut tentu tidak perlu menambahkan lagi. Kode dibawah letakkan pada tag <head> dan saya mencontohkan degan librari cs dan js online. Jika sobat ingin menggunakan untuk keperluan development tentu sobat harus mendownloadnya terlebih dahulu siwebsite resminya atau pada project ini di akhir postingan. Kodenya adalah sebagai berikut

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.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.19/css/dataTables.bootstrap4.min.css">

kode diatas baru kode css-nya saja, agar lebih rapi saya anjurkan agar dipisah untuk css & js-nya. Selanjutnya tambahkan kode dibawah ini di dalam tag <body> paling bawah yang berarti di atas </body>

<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.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>

 

4. Selanjutnya pada file index.php, dalam tag <body> kita tambahkan kode ini yang berfungsi untuk menampilkan data dari databasen ke dalam tabel

<div class="table-responsive">
	<table id="data" 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>Aksi</td>
	        </tr>
	    </thead>
	    <tbody>
	        <?php
	            include 'koneksi.php';
	            $no = 1;
	            $query = "SELECT * FROM tbl_mahasiswa_search ORDER BY id DESC";
	            $dewan1 = $db1->prepare($query);
	            $dewan1->execute();
	            $res1 = $dewan1->get_result();
                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 $nama_mahasiswa; ?></td>
	                <td><?php echo $alamat; ?></td>
	                <td><?php echo $jurusan; ?></td>
	                <td><?php echo $jenis_kelamin; ?></td>
	                <td><?php echo $tgl_masuk; ?></td>
	                <td><button style='font-size: 11px;' class='btn btn-primary' id='detail' name='detail' title='Lihat Detail'><i class='fa fa-search'></i></button></td>
	            </tr>
	        <?php } ?>
	    </tbody>
	</table>
</div>

Pada kode dibawah

<div class="table-responsive">

berfungsi untuk membuat tampilan tabel responsive dan bisa di scroll ke samping pada saat pengguna membuka aplikasi melalui smartphone atau jika kolom terlalu banyak.

Kode diatas merupakan kode sederhana seperti kita menampilkan dengan php pada umumnya. Namun kode tersebut belum berarti sobat sudah memanggil datatablesnya. Untuk membuat tabel berikut menjadi datatables yaitu dengan menambahkan kode javascript seperti dibawah yang diletakkan di tag <body> paling bawah atau diatas tag </body> dan yang pasti tidak boleh diatas dari datatables.js

<script type="text/javascript">
    $(document).ready(function() {
        $('#data').DataTable();
    });
</script>

Penjelasan :

– Untuk membuat tabel yang sobat buat menjadi terkoneksi dengan datatables adalah pada kode

$('#data').DataTable();

yang mana ‘#data’ sama dengan id=’data’ jika dalam 1 halaman terdapat 2 atau lebih datatables dari pada mendefinisikan satu persatu bisa juga di letakkan pada class menjadi ‘.data’ sama dengan class=’data’. Berikut adalah contoh tabel id yang mengkoneksikan dengan datatable

<table id="data" class="table table-striped table-bordered" style="width:100%">

 

5. Eitzz belum selese karena pada contoh ini saya tidak hanya memberikan contoh untuk menampilkan data ke datatables saja. Pada contoh juga saya tambahkan action lihat detail, jadi sobat juga bisa tahu bagaimana jika nanti akan ada action. Jika sobat hanya menampilkan saja cukup sampai kode diatas. Namun jika ingin menambahkan action pada contoh adalah actino lihat detail yang mana akan muncul modal. Kodenya adalah sebagai berikut :

Pertama yaitu membuat modalnya. Modal cukup satu saja jadi tidak perlu per baris ada modalnya, letakkan dibawah tag </table>

<div id="viewModal" class="modal fade mr-tp-100" role="dialog">
    <div class="modal-dialog modal-lg flipInX animated">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel" >View Data</h4>
                <button type="button" class="close" data-dismiss="modal" >
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
            </div>
            <div class="modal-body">
            	<div class="form-group">
            		<label>ID</label>
            		<input type="text" id="id" class="form-control" readonly="">
            	</div>
            	<div class="form-group">
            		<label>Nama Mahasiswa</label>
            		<input type="text" id="nama_mahasiswa" class="form-control" readonly="">
            	</div>
            	<div class="form-group">
            		<label>Alamat</label>
            		<input type="text" id="alamat" class="form-control" readonly="">
            	</div>
            	<div class="form-group">
            		<label>Jurusan</label>
            		<input type="text" id="jurusan" class="form-control" readonly="">
            	</div>
            	<div class="form-group">
            		<label>Jenis Kelamin</label>
            		<input type="text" id="jenis_kelamin" class="form-control" readonly="">
            	</div>
            	<div class="form-group">
            		<label>Tanggal Masuk</label>
            		<input type="text" id="tgl_masuk" class="form-control" readonly="">
            	</div>
            </div>
            <div class="modal-footer">
            	<button class="btn btn-default" data-dismiss="modal">
            		Close
            	</button>
            </div>
        </div>
    </div>
</div>

Selanjutnya memodifikasi kode javascript-nya menjadi seperti ini

<script type="text/javascript">
    $(document).ready(function() {
        let table = $('#data').DataTable();

        $('#data tbody').on( 'click', '#detail', function () {
	        var current_row = $(this).parents('tr');
	        if (current_row.hasClass('child')) {
	            current_row = current_row.prev();
	        }
	        var data = table.row( current_row ).data();
	        console.log(data)

	        document.getElementById("id").value = data[0];
	        document.getElementById("nama_mahasiswa").value = data[1];
	        document.getElementById("alamat").value = data[2];
	        document.getElementById("jurusan").value = data[3];
	        document.getElementById("jenis_kelamin").value = data[4];
	        document.getElementById("tgl_masuk").value = data[5];

	        $("#viewModal").modal("show");
	    });

    });
</script>

Penjelasan :

Jika sebelumnya saat menampilkan kode javasciptnya cukup

$('#data').DataTable();

sekarang menjadi

let table = $('#data').DataTable();

dan untuk mendapatkan datanya sobat tinggal memanggil

var current_row = $(this).parents('tr');
if (current_row.hasClass('child')) {
    current_row = current_row.prev();
}
var data = table.row( current_row ).data();

sehingga https://dewankomputer.com/2019/04/03/cara-menampilkan-datatables-pada-php-dan-ajax/saat sobat mengeklik pada 1 baris maka “data” adalah isi array dari  semua kolom pada tabel maka untuk memanggilnya sobat hanya perlu mengganti kodenya saja seperti data[0] atau data[1]. dan document.getElementById(“nama_mahasiswa”).value merupakan kode untuk mengisi inputtext atau jenis form lainnya dengan id=’nama_mahasiswa’.

Jadi hasilnya akan seperti dibawah

Jika klik salah satu data

Bagaimana mudah bukan. Untuk selanjutnya kita akan coba dengan ajax.

 

Menampilkan Data ke Datatables dengan AJAX & PHP

Pada contoh kali ini plugin css dan javascript tetap sama, namun yang membedakan adalah pada tag <tabel> dan javascriptnya. Step-stepnya bisa dilihat dibawah :

1. Pertama yaitu membuat tag tabel seperti dibawah :

<table id="data" class="table table-striped table-bordered" style="width:100%">
</table>

Jika ingin menggunakan Ajax sobat bisa hanya seperti itu atau bisa juga menambahkan kode <thead> saja untuk header tabelnya. Namun kali, semua akan saya tulis di javascriptnya jadi jika sobat ingin hidden kolom akan sangat mudah.

Untuk modal menampilkan detail datanya masih sama seperti diatas ya.. jadi pad tag <body> yang berubah hanya <table> menjadi lebih singkat.

 

2. Selanjutnya adalah membuat kode javascriptnya, seperti dibawah :

<script type="text/javascript">
    $(document).ready(function() {
        var table = $('#data').DataTable({
	        responsive: true,
	        "ajax": {
	            "type": "POST",
	            "url": "get_data.php",
	            "timeout": 120000,
	            "dataSrc": function (json) {
	                if(json != null){
	                    return json
	                } else {
	                    return "";
	                }
	            }
	        },
	        "sAjaxDataProp": "",
	        "width": "100%",
	        "order": [[ 0, "asc" ]],
	        "aoColumns": [
	            {
	                "mData": null,
	                "title": "No",
	                render: function (data, type, row, meta) {
	                    return meta.row + meta.settings._iDisplayStart + 1;
	                }
	            },
	            {
	                "mData": null,
	                "title": "Nama Mahasiswa",
	                "render": function (data, row, type, meta) {
	                    return data.nama_mahasiswa;
	                }
	            },
	            {
	                "mData": null,
	                "title": "Alamat",
	                "render": function (data, row, type, meta) {
	                    return data.alamat;
	                }
	            },
	            {
	                "mData": null,
	                "title": "Jurusan",
	                "render": function (data, row, type, meta) {
	                    return data.jurusan;
	                }
	            },
	            {
	                "mData": null,
	                "title": "Jenis Kelamin",
	                "render": function (data, row, type, meta) {
	                    return data.jenis_kelamin;
	                }
	            },
	            {
	                "mData": null,
	                "title": "Tanggal Masuk",
	                "render": function (data, row, type, meta) {
	                    return data.tgl_masuk;
	                }
	            },
	            {
                    "mData": null,
                    "title": "Aksi",
                    "sortable": false,
                    "render": function (data, row, type, meta) {
                        let btn = '';

                        if(data.nama_mahasiswa != "Dery"){
                            btn += "<button style='font-size: 11px;' class='btn btn-primary' id='detail' name='detail' title='Lihat Detail'><i class='fa fa-search'></i></button>";
                        }

                        return btn;
                    }
                }
	        ]
	    });

	    $('#data tbody').on( 'click', '#detail', function () {
	        var current_row = $(this).parents('tr');
	        if (current_row.hasClass('child')) {
	            current_row = current_row.prev();
	        }
	        var data = table.row( current_row ).data();

	        document.getElementById("id").value = data["id"];
	        document.getElementById("nama_mahasiswa").value = data["nama_mahasiswa"];
	        document.getElementById("alamat").value = data["alamat"];
	        document.getElementById("jurusan").value = data["jurusan"];
	        document.getElementById("jenis_kelamin").value = data["jenis_kelamin"];
	        document.getElementById("tgl_masuk").value = data["tgl_masuk"];

	        $("#viewModal").modal("show");
	    });

    });
</script>

Penjelasan :

– Kode diatas merupakan kode untuk menampilkan datanya pada tabel menggunakan Ajax. Header kolom pada tabel adalah pada kode ini “title”: “Alamat”.

– Pada kode diatas juga saya contohkan untuk tidak menampilkan tombol detail jika nama_mahasiswa adalah Dery seperti pada kode dibawah

if(data.nama_mahasiswa != "Dery"){

Sobat bisa menggantinya jika status=’Tidak Aktif’ atau sebagainya.

– Untuk pemanggilan nama kolomnya juga bisa menggunakan nama kolom yang ada pada kolom datatabase atau yang di deklarasikan di ajaxnya.

document.getElementById("nama_mahasiswa").value = data["nama_mahasiswa"];

Setelah sebelumnya kita menggunakan urutan arraynya disini kita bisa menggunakan nama kolomnya

 

3. Masih belum selesai loh. Selanjutnya adalah membuat file get_data.php seperti pada url Ajax yang sudah kita buat

"url": "get_data.php",

Kita membuat file karena kita menggunakan native PHP. Jika sobat menggunakan framework seperti code igniter, laravel atau lainnya, maka sobat hanya perlu memanggil routingnya saja pada url jadi tidak masalah mau menggunakan apa saja jika kita menggunakan Ajax karena yang membedakan hanya di backend aplikasinya.

pada get_data.php isikan dengan kode berikut

<?php
    include 'koneksi.php';
    $i = 1;
    $query = "SELECT * FROM tbl_mahasiswa_search ORDER BY id DESC";
    $dewan1 = $db1->prepare($query);
    $dewan1->execute();
    $res1 = $dewan1->get_result();
    while ($row = $res1->fetch_assoc()) {
        $data[$i]['id'] = $row['id'];
        $data[$i]['nama_mahasiswa'] = $row['nama_mahasiswa'];
        $data[$i]['alamat'] = $row['alamat'];
        $data[$i]['jurusan'] = $row['jurusan'];
        $data[$i]['jenis_kelamin'] = $row['jenis_kelamin'];
        $data[$i]['tgl_masuk'] = $row['tgl_masuk'];

        $i++;
	} 

    $out = array_values($data);
    echo json_encode($out);
?>

Kode diatas merupakan kode untuk mengambil data dari database kemudian mengubahnya menjadi format json.

Jika dijalankan maka hasilnya akan sama saja seperti dibawah

 

Kalo saya anjurkan cara yang enak adalah menggunakan Ajax karena cara itu bisa dipakai dimana saja. Bedanya hanya di backend aplikasi. Karena menggunakan native PHP, backend aplikasi untuk menampilkan datanya adalah pada file get_data.php, sedangkan jika kita menggunakan framework adalah pada routingnya. Cara ini juga sering saya lakukan pada saat saya membuat aplikasi menggunakan framework Laravel atau bahkan dengan bahasa pemrograman Java framework Spring boot. Sekian postingan saya tentang Cara Menampilkan Datatables pada PHP dan Ajax. Masih banyak fitur-fitur dari datatables yang bisa kita pakai namun akan saya bahas terpisah satu persatu karena jika tidak akan panjang sekali postingan ini dan saya nulisnya pun bisa berhari-hari hehe.

Untuk pengamanan saat menggunakan Ajax sudah saya bahas dipostingan CRUD dengan Ajax jadi saya tidak membahasnya disini karena disini hanya menampilkan data saja.

Baca juga :

CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP

Membuat CRUD (Create, Read, Update, Delete) Enkripsi & Deskripsi pada PHP & Ajax

Membuat CRUD Expert & Pencarian dengan JQuery, Ajax, Bootstrap Modal, SweetAlert dan WYSIHTML5 pada PHP

 

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