CakePHP 2 + DataTables + Twitter Bootstrap 2

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.

Gambar

  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
  6.  echo $this->Html->css('cake.generic'); 

    Menjadi

     echo $this->Html->css('bootstrap.min'); 
  7. Tambahkan
  8.  echo $this->Html->script(array('jquery-1.7.2.min', 'jquery.dataTables.min')); 
  9. Buka berkas app/Controller/CustomersController.php
  10. Tambahkan
  11.  /** * datatables method * * @return void */ public function dataTables() { $customers = $this->Customer->find('all', array()); $this->set(compact('customers')); } 
  12. Buat berkas app/View/Customers/dataTables.ctp
  13. Tambahkan
  14. 
    <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.
    Gambar
    Mudah sekali bukan? Referensi:

    1. http://datatables.net/blog/Twitter_Bootstrap
    2. http://datatables.net/blog/Twitter_Bootstrap_2
  1. No trackbacks yet.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: