Selesaikan dulu dirimu sendiri

Halo, apa kabar? sudah setahun lebih sejak terakhir sayaaing menulis blog. Kali ini aing mencoba mengikat ilmu mengenai CakePHP. Sebenarnya bukan trik yang rumit, namun jika tak dituliskan pasti akan menimbulkan masalah jika di kemudian hari ingin mengaplikasikannya lagi. Mengaplikasikan apa? Mengaplikasikan Plugin JQuery untuk menangani tabel, yaitu DataTables, pada framework CakePHP. Sayangnya tampilan default dari DataTables menurut aing tidak terlalu menarik sehingga aing berpikir untuk menggunakan bantuan Twitter Bootstrap untuk mempermanis tampilan dan untungnya ternyata pada laman resmi DataTables sudah ada tutorial mengenai DataTables dan Twitter Bootstrap (baik versi 1 maupun 2). Yang digunakan dalam aplikasi ini:

1. CakePHP 2.2 RC1
2. DataTables 1.9.2
3. TwitterBootstrap 2.0.4
4. JQuery 1.7.2
5. sample database

Jika saat mengakses http://serper/customers (atau http://localhost/namafolder/customers) terdapat hasil seperti di bawah ini, proses kita mulai dari sini.

1. Salin berkas jquery.dataTables.min.js dan jquery-1.7.2.min.js ke folder app/webroot/js
2. Salin berkas bootstrap.min.css dan bootstrap-responsive.min.css ke folder app/webroot/css
3. Salin berkas glyphicons-halflings-white.png dan glyphicons-halflings.png dari folder milik bootstrap ke folder app/webroot/img
4. Buka berkas app/View/Layouts/default.ctp
5. Ganti

 echo $this->Html->css('cake.generic'); 

Menjadi

 echo $this->Html->css('bootstrap.min'); 

6. Tambahkan

 echo $this->Html->script(array('jquery-1.7.2.min', 'jquery.dataTables.min')); 

7. Buka berkas app/Controller/CustomersController.php
8. Tambahkan

 /** * datatables method * * @return void */ public function dataTables() { $customers = $this->Customer->find('all', array()); $this->set(compact('customers')); } 

9. Buat berkas app/View/Customers/dataTables.ctp
10. Tambahkan

<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
    $('#example').dataTable( {
        "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>"
    } );
  } );

  $.extend( $.fn.dataTableExt.oStdClasses, {
    "sWrapper": "dataTables_wrapper form-inline"
  } );
// ]]></script>
<table id="example" class="table table-striped table-bordered" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>customerNumber</th>
<th>customerName</th>
<th>contactLastName</th>
<th>contactFirstName</th>
<th>phone</th>
</tr>
</thead>
<tbody><?php foreach ($customers as $customer) { ?>
<tr>
<td><?php echo $customer['Customer']['customerNumber']; ?></td>
<td><?php echo $customer['Customer']['customerName']; ?></td>
<td><?php echo $customer['Customer']['contactLastName']; ?></td>
<td><?php echo $customer['Customer']['contactFirstName']; ?></td>
<td><?php echo $customer['Customer']['phone']; ?></td>
</tr>
<!--?php } ?--></tbody>
</table>

Jika saat mengakses http://serper/customers/datatables sudah didapatkan hasil seperti di bawah ini, maka kita telah sampai tujuan.

Mudah sekali bukan? Referensi:

1. http://datatables.net/blog/Twitter_Bootstrap
2. http://datatables.net/blog/Twitter_Bootstrap_2