Anda di halaman 1dari 6

ONPHPID

ONPHPID > Tutorial Datatables > Cara Menggunakan Datatables Dengan PHP

ARTICLES

CARA MENGGUNAKAN DATATABLES DENGAN PHP


JANUARY 11, 2016 | ONPHPID | 0 COMMENTS

Dalam membuat sebuah website kebutuhan akan kemudahan dalam penggunaan, akses yang cepat merupakan dan enak dipandang adalah keinginan yang kita inginkan ataupun klien
inginkan. Selain multifungsi tampilan website yang sederhana juga menjadi sebuah sorotan penting, salah satunya dalam menampilkan sebuah list atau daftar data yang akan terus
bertambah panjang setiap kali ada penambahan. Mungkin tidak akan berpengaruh apapun ketika jumlahnya hanya sekitar puluhan.. tapi bagaimana jika data yang kita miliki hingga ribuan
? kira-kira seberapa banyak scrol akan kita putar?

Hal di atas akan lebih terlihat rapi apabila disajikan dalam bentuk table dengan pagination, dengan menu search, sort kolom. tapi apakah tidak ribet ? tidak jika kita menggunakan
datatables. sebuah plugin yang akan membantu kita dalam menyajikan data dalam bentuk table dengan tur search, sort, pagination dan display options.
Datatables sebenarnya adalah sebuah library jQuery atau JavaScript yang pada dasarnya dibuat dengan tujuan untuk memanipulasi data yang panjang menjadi sebuah data yang
pendek-pendek karena dibagi kedalam beberapa halaman dan hal tersebut menjadi salah satu alasan mengapa table yang dibuat oleh datatables sangat rapi dan interaktif. Selain itu
terdapat beberapa tur dari datatables yang dapat kita rasakan seperti menu search yang responsive, pagination, data sort dan display options yang akan membuat website kita tampak
lebih pro

Cara Implementasi Datatables


Untuk mengimplemntasikan datatables pada website buatan kita, kita perlu mempersiapakn beberapa tool :
1. Library Datatables yang bisa di unduh di https://datatables.net/download/packages
2. Mengikuti langkah-langkah berikut

Langkah-langkah menggunakan datatables


Buatlah sebuah folder dengan nama tutorial-datatables di dalam folder htdocs (jika kalian menggunakan XAMPP)
Buatlah folder assets dan le index.php di dalam folder tutorial-datatables yang sudah kita buat sebelumnya.
Lalu ekstrak le datatables yang baru kita download, lalu cari folder media yang berada di

examples/serverside

kemudian pindahkan folder css, js, images ke folder assets, inilah

yang akan menjadi modal kita untuk installasi datatables.


Setelah persiapan oke kita akan mulai mengetikan kode untuk menggunakan datatable.
kode yang pertama adalah pada le con g.php, di sini kita akan membuat koneksi database dengan mysqli object, silakan ketik atau Copy kode berikut :

1 <?php
2 /**
3
4
5
6
7
8
9
10
11
12
13
14
15
16

* @var informasi untuk koneksi database


*/
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'datatables';

/** koneksi ke database */


$db = new mysqli($dbhost, $dbuser, $dbpass, $dbname);

// check koneksi
if ($db->connect_error) {
die('Oops!! Terjadi error : ' . $db->connect_error);
}

kedua : bukalah browser ketikan localhost/phpmyadmin dan buat sebuah database sesuai dengan $dbname.
Ketiga : buatlah/bukalah index.php ketikan kode berikut :
1 <?php
2 // memanggil file config.php
3 require 'config.php';
4 ?>
5 <html>
6 <head>
7 <title>Cara Menggunakan Datatables</title>
8 </head>
9 <body>
10 <table id="example" class="display" cellspacing="0" width="100%">
11 <thead>
12 <tr>

13 <th>First Name</th>
14 <th>Last Name</th>
15 <th>Position</th>
16 <th>Office</th>
17 <th>Start Date</th>
18 </tr>
19 </thead>
20 <tfoot>
21 <tr>
22 <th>First Name</th>
23 <th>Last Name</th>
24 <th>Position</th>
25 <th>Office</th>
26 <th>Start Date</th>
27 </tr>
28 </tfoot>
29 </table>
30
31 </body>
32 </html>

keempat : pada bagian ini kita akan memulai menggunakan libary datatable. tambahkan script berikut sebelum tag </head>.
1 <link rel="stylesheet" type="text/css" href="assets/css/jquery.dataTables.css">

dan tambahkan script berikut sebelum tag </body>


1 <script type="text/javascript" src="assets/js/jquery.min.js"></script>
2 <script type="text/javascript" src="assets/js/jquery.dataTables.min.js"></script>

Kelima : pada bagian kelima silahkan perhatikan tag </tfoot>.. kita akan menambahkan kode PHP tepat setelah tag tersebut. dimana kode PHP tersebut berfungsi untuk memanggil data
ditable karyawan dari database yang sudah kita buat tadi.. lho tadikan belum membuat table..
Di sini kita tidak perlu membuat table. cukup copy dan paste-kan script SQL disini ke database.. bagaimana caranya ?

Cara untuk membuat table database dengan SQL


1. bukalah localhost/phpmyadmin
2. klik nama database yang sudah kita buat. dalam studi kasus ini adalah datatables
3. Cari Tombol SQL seperti berikut, lalu paste dan klik Go..

Nah sekarang kita sudah punya table karyawan selanjutnya adalah melakukan query pemanggilan data. seperti berikut :
1 <tbody>
2 <?php
3 $sql = "SELECT * FROM karyawan";
4 $query = $db->query($sql);
5
6 while ($row = $query->fetch_assoc()) :?>
7

<tr>

8
9
10

<td><?php echo $row['first_name'];?></td>


<td><?php echo $row['last_name'];?></td>
<td><?php echo $row['position'];?></td>

11 <td><?php echo $row['office'];?></td>


12 <td><?php echo $row['start_date'];?></td>
13 </tr>
14 <?php endwhile;?>
15 </tbody>

Ingat sisipkan kode diatas tepat dibawah tag </tfoot>


keenam : sebagai sentuhan terakhir untuk melakukan aksi agar datatables dapat berjalan tambahkan script berikut. dan letakkan di atas tag </body>
1 <script>
2 $(document).ready(function() {
3 $('#example').DataTable();
4 } );
5 </script>

Nah Demikian cara menggunakan datatables untuk melihat script penuhnya silahkan klik Disini.
Metode di atas adalah metode paling simple (zero con guration) dari datatables, karena metode ini paling sederhana maka akan terdapat sebuah masalah ketika data yang kita load
berjumlah ribuan hingga ratusan ribu seperti data kecamatan atau desa se-Indonesia. untuk menangani masalah tersebut kita bisa memanfaatkan fasilitas Server-Side dari Datatables
yang sudah onphpid tulis di cara Menangani banyak data dengan datatables.
Sekian tutorial PHP dari onphpid.com semoga bermanfaat dan selamat belajar.

SHARE THIS:

Anda mungkin juga menyukai