Booook!!

Seharian ini saya habiskan untuk gimana caranya bisa nampilin dependant dropdown list. Apa itu? Itu adalah disaat kamu mengubah value pada salah satu dropdown list, yang memberikan value baru ke dropdown list yang lain. Misalnya dropdown pertama berisi daftar Merk Mobil, jika dipilih salah satu Merk, maka dropdown kedua akan terisi dengan Seri apa saja milik Merk Mobil yang tadi dipilih.. Ngerti kan? Ngerti dooooong..

Nah, jadi begini, saya udah jungkir balik muter2 lapangan sepak bola seratus kali (eh, nggak deng), akhirnya saya menemukan referensi untuk ini dengan menggunakan XAJAX. Oyah, perlu diketahui juga, saya membangun website saya menggunakan CodeIgniter. Untuk webserver dan database-nya saya menggunakan Apache dan MySql yang diinstal dengan baik oleh MAMP ;)

Sebelum masuk ke cara-cara supaya bisa menampilkan dropdown list seperti yang saya jabarkan di atas ituh, yang kita perlukan adalah menginstal XAJAX ke dalam CodeIgniter. Cara ini udah ada disini, tapi gak papalah saya translate disini buat kamu yang males banget buka kamus yah.. Hihihi..

  1. Download versi terakhir XAJAX dari sini.
  2. Zip file yang telah di-download tadi. Kemudian pindahkan semua file dan subfolder yang terdapat di dalam folder xajax_core ke folder /application/libraries. Contohnya, saya pakai nama auction untuk root folder aplikasi web saya. Maka susunan folder setelah isi folder xajax_core saya pindahkan, bakal keliatan seperti ini:
  3. Ganti nama file xajax.inc.php menjadi xajax.php.
  4. Buat folder init, letakkan dalam folder application (/application/init). Buat file dalam folder init, beri nama init_ajax.php. Isi file dengan code berikut:
    //example of init_ajax file
    <?php if (!defined('BASEPATH')) exit('No direct script access allowed');
    if ( ! class_exists('xajax'))
    {
    require_once(APPPATH.'libraries/xajax'.EXT);
    }
    $obj =& get_instance();
    $obj->xajax = new xajax();
    $obj->ci_is_loaded[] = 'xajax';
    ?>
  5. Copy folder xajax_js dan semua isinya ke root folder aplikasi kamu. Nah, kalo di tempat saya, jadinya bentuk susunan folder saya akan seperti ini:
  6. Pilihan ini OPTIONAL, seandainya kamu menggunakan mod_rewrite (terutama untuk menghilangkan “index.php” yang biasanya muncul di url CI). Kamu harus tambahkan, xajax_js di dalam file .htaccess, seperti yang terlihat pada code di bawah.
    RewriteEngine on
    RewriteBase /
    RewriteCond $1 !^(index\.php|img|css|xajax_js|robots\.txt)
    RewriteRule ^(.*)$ /index.php/$1 [L]
  7. Sip.. udah selesai, instalasinya. Kalau mau nge-tes, XAJAX-nya udah jalan atau belum, bikin Controller file, namain aja dengan testxajax.php. Kemudian tuliskan code berikut ini di dalam file itu.
    <?php
    class Testxajax extends Controller
    {
    function Testxajax()
    {
    parent::controller();
    $this->load->library('xajax');
    $this->xajax->registerFunction(array('test_function',&$this,'test_function'));
    $this->xajax->processRequest();
    }
    function test_function($number)
    {
    $objResponse = new xajaxResponse();
    $objResponse->Assign("SomeElementId","innerHTML", "Xajax is working. Lets add: ".($number+3));
    return $objResponse;
    }
    function index()
    {
    $template['xajax_js'] = $this->xajax->getJavascript(base_url());
    $template['content'] = '<div id="SomeElementId"></div><input type="button" value="test" onclick="xajax_test_function(2);">';
    $this->load->view('test', $template);
    }
    }
    ?>
  8. Lalu buat view file dengan nama test.php, dan tuliskan code berikut.
    <html>
    <head>
    <title>Xajax 0.5 test</title>
    <?=$xajax_js?>
    </head>
    <body>
    <h1><?=$content?></h1>
    </body>
    </html>

Cara ngetesnya, (kalau dalam kasus saya), tinggal tuliskan http://localhost/auction/tetsxajax. Fff..saya ndak tau nih caranya gimana biar itu kode-kode bisa nampak bagus.. hiks.. Yang penting bisa dimengerti yah.. Next Post: Cara menggunakan XAJAX di CI untuk menampilkan dependent dropdown list ;)

Advertisement