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.

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

 

3. Isikan data pada tbl_mahasiswa_search dengan mengetikkan query dibawah ini

 

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.

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

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>

 

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

Pada kode dibawah

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

Penjelasan :

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

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

 

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>

Selanjutnya memodifikasi kode javascript-nya menjadi seperti ini

Penjelasan :

Jika sebelumnya saat menampilkan kode javasciptnya cukup

sekarang menjadi

dan untuk mendapatkan datanya sobat tinggal memanggil

sehingga 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 :

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 :

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

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.

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

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

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

 

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

Sampai jumpa pada postingan saya selanjutnya..

13 thoughts on “Cara Menampilkan Datatables pada PHP dan Ajax

  1. Mas, bisa gak sewaktu view modal itu, datanya tidak diambil dari row/table , tapi dari variable Php yang sudah kita set(get) dari database. Misal $id = $row[‘id’]. Nah sewakti klik Modal, bagian ID nya kita isi dengan $id, bukan data[1].
    Terima kasih

    1. kalo dari javascript lgsg ngambil variabel php ngga bisa karena itu 2 bahasa yg berbeda php untuk server-side dan javascript untuk client-side
      kecuali $id disimpan dulu di html setelah itu baru diambil dari javascriptnya

    1. pada button detail ditambah seperti ini:
      data-id=""
      $id di echo di situ

      dan pada javascriptnya diubah jadi seperti ini:
      let id = $(this).attr("data-id");
      document.getElementById("id").value = id;

  2. mas saya mau tanya. saaya bikin table spt diatas, dan ada kolom untuk search jg. Tapi karena datanya ada 1000 lebih, pagenya loading terus..
    Lalu saya coba pakai fitur search data menggunakan Mysql dan php, tapi ternyata hanya bs search di page 1 aja, tdk bs search keseluruhan.
    Bagaimana caranya ya agar field search tsb bs search seluruh table?
    Terima kasih

    1. coba querynya di limit 10 kalo cepet brarti memang databasenya yg lambat namun jika sudah dilimit masih loading terus berarti kodenya ada yg salah,
      kalo search menggunakan plugin datatables seharusnya sudah ke semua data yg di tampilkan di tabel

Leave a Reply

Your email address will not be published. Required fields are marked *

two × two =