Archive for the ‘ web ’ Category

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
    Iklan

TesĀ Koneksi

Tulisan ini dibuat untuk memeriksa apakah koneksi antara wordpress dan mukabuku masih berjalan sebagaimana mestinya.

RSA, 1st

Beberapa hari yang lalu saya aing googling mencari tutorial ajax eh malah ketemu ini. Baca sebentar tapi tidak terlalu dimasukkan di hati-halah. Kemarin chat dengan teman yang sedang develop web, trus kepikiran tentang artikel itu. Setelah share dengan teman tersebut, jadi tergelitik (diksi apa ini??) untuk mencoba implementasi pengamanan tambahan pada halaman login seperti yang diterangkan pada artikel itu.

Oya, inti dari artikel itu adalah prosedur login halaman (atau aplikasi) web yang jamak dilakukan sekarang, yaitu memasukkan username dan password (protokol yang digunakan adalah http) kemudian username dan password tersebut dikirimkan sebagai plain text ke server web tersebut untuk selanjutnya password dikonversi dengan md5 dan bersama-sama dengan user name, dicocokkan dengan database di server.

Apa yang jadi soal? Yang jadi soal adalah plain text itu, karena username dan password dikirim sebagai plaint text besar kemungkinan dicuri (percayalah ada saja orang yang mau melakukan hal ini) pada saat data itu mengalir melewati jaringan. Solusinya, diberikan keamanan tambahan pada halaman login tersebut dengan Javascript. Jadi sebelum username dan password dikirimkan, data itu dienkripsi dengan Asymmetric Key agar -setidaknya- menyulitkan orang yang menangkap data kita.

So sepulang dari kantor, langsung buka-buka buku Kriptografi karangan Pak Rinaldi Munir lagi. Sebenarnya sudah beli buku ini dari tahun lalu, tapi baru dibuka sekarang-haha.

baca buku Kriptografi sebentar, googling mencari mencari source code RSA siap pakai, kemudian baca-baca lagi buku, coba ngetik source code, ketiduran-hahaha.

Subuh setelah shalat (jangan lupa shalat, aing) mulai ngetik lagi tapi sampai tulisan ini dibuat, belum selesai juga algoritma RSAnya.

Oya, konversi desimal ke bilangan biner aing dapatkan di sini.

Google Translate

Bahasa Indonesia kini hadir dalam Google Translate. Dengan aplikasi ini kita bisa mentranslate dari dan ke bahasa ibu kita. Bahkan kita juga bisa menerjemahkan sebuah halaman web melalui layanan ini. Memang sih masih terdapat beberapa kekurangsesuaian (apakah kata ini ada di KBBI) terjemahan. Namun secara umum hasil terjemahan sudah cukup baik.

Aplikasi ini tentu akan makin memudahkan aing yang kerap (diksi yang bagus) browsing untuk mencari artikel, tutorial atau dukungan teknis di forum-forum web yang berbasis di luar negeri.

Btw kayaknya aing terlalu banyak menyertakan pranala khususnya wikipedia pada tulisan-tulisan yang dibuat, yah?