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

Aplikasi POS/Kasir

Melanjutkan proyek kecil-kecilan yang dulu, saya aing baru saja menyelesaikan Aplikasi POS/Kasir untuk UKM/Minimarket, masih menggunakan PHP yang kali ini menggunakan Framework Codeigniter dan ORM Doctrine.

Kali ini aing mencoba membuatnya semudah mungkin, sejak instalasi sampai penggunaan. Pengguna tidak perlu lagi mengedit berkas PHP dan melakukan proses ekspor database saat instalasi. Cukup memberikan nama database (menggunakan RDBMS Mysql) yang akan digunakan, username dan password database, sisanya akan dilakukan oleh aplikasi yang diberinama LantingR ini.

Fitur yang ditawarkan:

  • Proses instalasi yang mudah
  • Kustomisasi Nama, Alamat dan Telepon Toko/Minimarket, akan ditampilkan saat pencetakan struk penjualan
  • Empat kategori pengguna yaitu Administrator, Manajer, Operator Pembelian dan Operator Penjualan yang memiliki menu masing-masing
  • Mudah menambahkan printer untuk tiap komputer (jika menggunakan banyak komputer kasir), cukup memberikan nama printer dan IP komputer
  • Mendukung tiga ukuran kertas struk penjualan, A4 (untuk printer Dot Matrix), 80mm, dan 74mm (POS Printer)
  • Satu produk yang dijual dapat memiliki lebih dari satu harga jual, misalnya Rp10.000 untuk pcs dan Rp55.000 untuk 1/2 lusin.
  • Produk dapat dilengkapi dengan kode barcode
  • Dapat membuat barcode sendiri, barcode dapat dicetak pada kertas label ukuran 105 (ukuran 24 X 37 mm)
  • Kasir dapat menggunakan barcode scanner atau mengetik nama barang, saat mengetik nama produk, LantingR otomatis akan mencarikan nama produk
  • Kasir dapat memilih hanya menyimpan transaksi penjualan atau mencetak struk penjualan (LantingR akan sekaligus menyimpan transaksi)
  • Laporan Pembelian dan Penjualan tersedia dalam bentuk spreadsheet untuk jangka waktu tahunan, bulanan dan harian
  • Laporan Persediaan produk/barang dalam bentuk spreadsheet, disertai animasi pie chart pada halaman pengunduh

Tampilan LantingR kurang lebih demikian:

Kasir Awal

Tampilan Awal Halaman Kasir

Kasir

Tampilan Halaman Kasir Saat Transaksi

Laporan Pembelian Tahunan

Tampilan Halaman Laporan Pembelian Tahunan

Penjualan Bulanan

Tampilan Halaman Laporan Penjualan Bulanan

Penjualan Harian

Tampilan Halaman Laporan Penjualan Harian

Persediaan Barang

Tampilan Halaman Laporan Persediaan Barang

Tertarik untuk mencobanya? Silahkan unduh di sini. Segala saran, komentar, kritik, makian, silahkan disampaikan melalui blog ini.

Tips sederhana untuk Codeigniter

Halo, lama tidak menulis, dan masih punya hutang Codeigniter untuk pemula, saya aing ingin menulis beberapa tips sederhana saat menggunakan CI.

Karena baru teringat dua ide, kali ini baru dua tips yang akan ditulis, yaitu: (1) menghilangkan index.php dalam URL, (2) manajemen folder core CI a la aing.

Aplikasi diujicobakan pada server lokal dan diberi nama coba (http://localhost/coba), menggunakan Codeigniter versi 2.0.0. Mari kita mulai.

Pertama, tips menghilangkan index.php pada URI. Saat pertama kali menggunakan CI, jika ingin mengakses fungsi fungsi1 dalam controller halo maka kita akan mengetikkan http://localhost/coba/index.php/halo/fungsi1. Dengan tips ini kita cukup mengetikkan http://localhost/coba/halo/fungsi1. Tips ini sebenarnya sudah ada di tulisan ini.

  1. Buat berkas .htaccess di folder coba.
  2. <IfModule mod_rewrite.c>
     RewriteEngine On
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
     RewriteRule ^(.*)$ /coba/index.php/$1 [L]
    </IfModule>
    <IfModule !mod_rewrite.c>
     ErrorDocument 404 /coba/index.php
    </IfModule>
    
  3. Ubah berkas config.php di folder coba/system/application/config.
  4. //baris berisi $config['index_page'] = 'index.php'; ubah menjadi
    $config['index_page'] = '';
  5. Coba buka http://localhost/coba/halo/fungsi1, semoga tidak ada masalah.

Kedua, manajemen folder core CI. Codeigniter memisahkan antara core framework dengan alikasi/situs kita, karena itu mudah bagi kita jika ingin menggunakan core CI terbaru tanpa merubah aplikasi/situs kita. Umumnya saat pertama kali mengekstraksi berkas CI kita akan mendapatkan tiga folder yaitu application, system, dan user_guide. Jika aplikasi kita ada dalam folder coba, bila menggunakan xampp pada Windows ada di htdocs/coba, maka dalam folder coba tersebut terdapat tiga folder application, system, dan user_guide.

Jika kita memiliki banyak aplikasi yang menggunakan core CI yang sama, tidak ada salahnya kita cukup menggunakan satu core CI. Misalnya kita punya 3 aplikasi yaitu coba, coba1, coba2, dalam tiap folder tersebut cukup tersedia satu folder saja yaitu folder application, tidak perlu menyertakan folder system (dan user_guide). Jadi dalam folder htdocs terdapat empat folder yaitu coba, coba1, coba2, dan system.

Ilustrasi folder, modus umum.

  • htdocs
    • coba
      • application
      • system
      • user_guide
    • coba1
      • application
      • system
      • user_guide
    • coba2
      • application
      • system
      • user_guide

Ilustrasi folder, setelah dipisahkan core CI.

  • htdocs
    • coba
      • application
    • coba1
      • application
    • coba2
      • application
  • system

Untuk menggunakan modus tersebut cukup merubah berkas index.php pada folder coba.

//baris berisi $system_path = "system"; ubah menjadi
$system_path = "../system";

Silahkan dicoba apakah aplikasi coba dapat digunakan.

Folder system dapat diubah namanya agar memudahkan kita untuk mengidentifikasi versi CI, misalnya diubah menjadi system_ci_2 (karena menggunakan CI 2.0.0), jangan lupa mengubah berkas index.php agar nama system sesuai dengan yang baru saja kita ubah.

Sepertinya cukup untuk tips CI, semoga bermanfaat.

Codeigniter untuk pemula, eps 4

Halo, kembali lagi dengan serial Codeigniter untuk pemula. Mulai episode ini saya aing akan mencoba menggunakan studi kasus untuk mempermudah klinik Codeigniter kita. Studi kasus yang dipilih adalah membuat aplikasi Point of Sales (POS) sederhana untuk minimarket.

Pertama kita akan menyiapkan database aplikasi kita, tentu saja menggunakan doctrine sebagai alat bantu. Kita tetap manggunakan database yang telah kita gunakan di episode sebelumnya. Mari mulai membuat model untuk database kita.

  1. Buat berkas category.php di folder ci/application/models/. Berkas ini dipakai untuk mendefinisikan tabel Kategori Produk yang dijual, mendefinisikan bisa berarti tentukan dulu struktur tabel melalui model sisanya doctrine yang menangani.

    <?php
    //membuat kelas Category yang merupakan perluasan
    //dari Doctrine_Record
    class Category extends Doctrine_Record{
        //membuat fungsi untuk mendefinisikan tabel
        public function  setTableDefinition() {
            //tabel ini akan bernama 'category'
            //memiliki kolom 'tittle', 'active'
    
            //kolom bernama 'tittle' dengan jenis string dan panjang
            //255 karakter
            $this->hasColumn('tittle', 'string', 255);
            //kolom bernama 'active' dengan jenis boolean, hanya
            //kategori yang aktif saja yang dapat digunakan
            //saat menghapus kategori, kita hanya akan merubah
            //kolom active menjadi FALSE
            $this->hasColumn('active', 'boolean');
        }
    
        //membuat beberapa opsi untuk tabel
        public function  setUp() {
            //tabel ini memiliki relasi one to many
            //dengan tabel product
            $this->hasMany('Product as Products', array(
                //local adalah kolom pada tabel category
                //yang dijadikan acuan untuk relasi
                'local'     => 'id',
                //foreign adalah kolom pada tabel product
                //yang menjadi foreign key pada relasi
                'foreign'   => 'category'
            ));
        }
    }
    ?>
    
  2. Buat berkas product.php di folder ci/application/models/ untuk menampung daftar produk.

    <?php
    //membuat kelas Product
    //turunan dari Doctrine_Record
    class Product extends Doctrine_Record{
        //mendefinisikan kolom table
        public function  setTableDefinition() {
            //tabel ini bernama 'product'
            //memiliki kolom 'name', 'price', 'discount', 'active'
            //'category', 'stock'
    
            //kolom bernama 'name' dengan jenis string dan panjang
            //255 karakter
            $this->hasColumn('name', 'string', 255);
            //kolom bernama 'price' dengan jenis integer
            $this->hasColumn('price', 'integer', 4);
            //kolom bernama 'discount' dengan jenis float
            //diskon berupa persentase harga, bukan nilai rupiah
            $this->hasColumn('discount', 'float', 4);
            //kolom bernama 'category' isinya adalah
            //integer id dari kategori barang yang terdapat
            //dalam tabel category
            $this->hasColumn('category', 'integer', 4);
            //kolom bernama 'stock' bertipe integer
            //berisi stok yang tersedia untuk produk ini
            $this->hasColumn('stock', 'integer', 4);
            //kolom bernama 'active' dengan jenis boolean, hanya
            //produk yang aktif saja yang dapat diakses
            $this->hasColumn('active', 'boolean');
        }
    
        //membuat beberapa opsi untuk tabel
        public function  setUp() {
            //Timestampable akan membuat tabel memiliki dua kolom tambahan
            //kolom Created at dan Edit at
            $this->actAs('Timestampable');
            //tabel ini memiliki relasi many to one dengan
            //tabel category
            $this->hasOne('Category', array(
                //local adalah kolom pada tabel ini
                //yang dijadikan acuan untuk relasi
                'local'     => 'category',
                //foreign adalah kolom pada tabel category
                //yang menjadi key yang dituju
                'foreign'   => 'id'
            ));
            //tabel ini memiliki relasi one to many dengan
            //tabel transaction_detail yang menampung daftar barang
            $this->hasMany('Transaction_detail as Transaction_details', array(
                //local adalah kolom pada tabel ini
                //yang dijadikan acuan untuk relasi
                'local'     => 'id',
                //foreign adalah kolom pada tabel transaction_detail
                //yang menjadi key yang dituju
                'foreign'   => 'transaction'
            ));
        }
    }
    ?>
    
  3. Buat berkas cashier.php di folder ci/application/models/ untuk mendefinisikan tabel berisi daftar nama kasir beserta password yang dapat mengakses aplikasi ini.

    <?php
    //membuat kelas Cashier
    //turunan dari Doctrine_Record
    class Cashier extends Doctrine_Record{
        //mendefinisikan kolom table
        public function  setTableDefinition() {
            //tabel ini bernama cashier
            //memiliki kolom 'username', 'name', 'password', 'active'
    
            //kolom bernama username bertipe string digunakan
            //untuk login
            $this->hasColumn('username', 'string', 255);
            //kolom name bertipe string digunakan untuk ditampilkan
            //dalam layar dan cetakan nota penjualan (jika disediakan)
            $this->hasColumn('name', 'string', 255);
            //kolom password bertipe string
            $this->hasColumn('password', 'string', 255);
            //kolom bernama 'active' dengan jenis boolean, hanya
            //kasir yang aktif saja yang dapat membuka aplikasi
            $this->hasColumn('active', 'boolean');
        }
    
        //membuat beberapa opsi untuk tabel
        public function  setUp() {
            //tabel ini memiliki relasi one to many dengan
            //tabel transaction
            $this->hasMany('Transaction as Transactions', array(
                //local adalah kolom dalam tabel ini yang dijadikan
                //referensi pada tabel transaction
                'local'     => 'id',
                //foreign adalah kolom dalam tabel transaction
                //yang berhubungan dengan tabel ini
                'foreign'   => 'cashier'
            ));
    
            //ini berguna agar password akan dienkripsi sebelum diinsert
            //password adalah nama kolom, md5Password adalah fungsi enkripsi
            $this->hasMutator('password', 'md5Password');
        }
    
        //fungsi enkripsi (fungsi mutator)
        public function md5Password($value){
            //string ini akan ditambahkan pada string password sebelum
            //keduanya dienkripsi menggunakan metode md5, untuk menambah
            //kekuatan keamanan saja
            $salt = '#*r4H@51A!@-*%';
            //menyetel kolom password menjadi hasil enkripsi searah dengan md5
            $this->_set('password', md5($salt.$value));
        }
    }
    ?>
    
  4. Buat berkas transaction.php di folder ci/application/models/ untuk menampung daftar transaksi penjualan. Tabel ini hanya berisi informasi kasir, nilai total transaksi dan waktu transaksi, informasi mengenai produk yang dijual dalam transaksi ada dalam tabel transaction_detail.

    <?php
    //membuat kelas Transaction
    //turunan dari Doctrine_Record
    class Transaction extends Doctrine_Record{
        //mendefinisikan kolom tabel
        public function  setTableDefinition() {
            //tabel ini bernama transaction
            //memiliki kolom 'cashier', 'total', 'active'
    
            //kolom cashier berisi id kasir yang melayani
            $this->hasColumn('cashier', 'integer', 4);
            //kolom total berisi total nilai transaksi
            $this->hasColumn('total', 'float', 4);
            //kolom bernama 'active' dengan jenis boolean, hanya
            //transaksi yang aktif saja yang dapat diakses
            $this->hasColumn('active', 'boolean');
        }
    
        //membuat beberapa opsi untuk tabel
        public function  setUp() {
            //Timestampable akan membuat tabel memiliki dua kolom tambahan
            //kolom Created at dan Edit at
            $this->actAs('Timestampable');
            //tabel ini memiliki relasi one to many dengan
            //tabel transaction_detail yang menampung daftar barang
            //dalam transaksi tersebut
            $this->hasMany('Transaction_detail as Transaction_details', array(
                //local adalah kolom pada tabel ini
                //yang dijadikan acuan untuk relasi
                'local'     => 'id',
                //foreign adalah kolom pada tabel transaction_detail
                //yang menjadi key yang dituju
                'foreign'   => 'transaction'
            ));
            //tabel ini memiliki relasi many to one
            //dengan tabel cashier
            $this->hasOne('Cashier', array(
                //local adalah kolom pada tabel ini
                //yang dijadikan acuan untuk relasi
                'local'     => 'cashier',
                //foreign adalah kolom pada tabel cashier
                //yang menjadi key yang dituju
                'foreign'   => 'id'
            ));
        }
    }
    ?>
    
  5. Buat berkas transaction_detail.php di folder ci/application/models/ berisi detail barang dalam transaksi.

    <?php
    //membuat kelas Transaction_detail
    //turunan dari Doctrine_Record
    class Transaction_detail extends Doctrine_Record{
        //mendefinisikan kolom tabel
        public function  setTableDefinition() {
            //tabel ini bernama transaction_detail
            //memiliki kolom 'product', 'price', 'quantity',
            //'discount', 'transaction', 'active'
    
            //kolom product mengacu pada id product
            $this->hasColumn('product', 'integer', 4);
            //kolom price adalah harga produk pada saat
            //transaksi, kolom ini perlu karena dimungkinkan
            //terjadi perbedaan harga suatu produk
            $this->hasColumn('price', 'integer', 4);
            //kolom quantity adalah jumlah produk yang
            //dibeli dalam transaksi
            $this->hasColumn('quantity', 'integer', 4);
            //kolom discount berisi diskon yang dikenakan
            //pada produk tersebut pada saat transaksi terjadi
            //sama seperti harga, diskon juga mungkin berubah
            $this->hasColumn('discount', 'float', 4);
            //kolom transaction mengacu pada id transaksi
            $this->hasColumn('transaction', 'integer', 4);
            //kolom bernama 'active' dengan jenis boolean, hanya
            //detail transaksi yang aktif saja yang dapat diakses
            $this->hasColumn('active', 'boolean');
        }
    
        //membuat beberapa opsi untuk tabel
        public function  setUp() {
            //tabel ini memiliki relasi many to one
            //dengan tabel transaction
            $this->hasOne('Transaction', array(
                //local adalah kolom pada tabel ini
                //yang dijadikan acuan untuk relasi
                'local'     => 'transaction',
                //foreign adalah kolom pada tabel cashier
                //yang menjadi key yang dituju
                'foreign'   => 'id'
            ));
            //tabel ini memiliki relasi many to one
            //dengan tabel product
            $this->hasOne('Product', array(
                //local adalah kolom pada tabel ini
                //yang dijadikan acuan untuk relasi
                'local'     => 'product',
                //foreign adalah kolom pada tabel cashier
                //yang menjadi key yang dituju
                'foreign'   => 'id'
            ));
        }
    }
    ?>
    
  6. Nah, sudah selesai membuat model untuk tabelnya, sekarang waktunya membuat model itu dalam database, saatnya merasakan manfaat doctrine. Buat berkas doct.php di folder ci/application/controllers/ adalah kontroler yang membantu kita menangani pembuatan database

    <?php
    //membuat kelas Doct yang digunakan
    //untuk mengelola database
    class Doct extends Controller{
        //membuat fungsi make_table, digunakan
        //untuk membuat tabel berdasarkan model
        function make_table(){
            //membuat tombol POST yang memicu pembuatan tabel
            echo 'Sudah yakin bahwa tabel tidak ada?<br />
                <form action="" method="POST">
                <input type="submit" name="action" value="Buat Tabel"><br />';
    
            //jika tombol bernama "action" diklik
            if($this->input->post('action')){
                //Doctrine akan membuat tabel berdasarkan model
                Doctrine::createTablesFromModels();
                //Jika berhasil, tampilkan tulisan
                echo "Berhasil membuat Tabel";
            }
        }
    }
    ?>
    
  7. Melalui browser buka http://localhost/ci/doct/make_table dan phpmyadmin.

    http://localhost/ci/doct/make_tablephpmyadmin

  8. Setelah mengeksekusi Buat Tabel, hasilnya adalah seperti ini.
  9. Mari mengisi data pada tabel kita, buat folder dummy pada folder ci/application/
  10. Buat berkas data.yml pada ci/application/dummy/.

    cashier:
      Kasir1:
        username: code
        name: Kasir Pertama
        password: code
        active: 1
      Kasir2:
        username: igniter
        name: Kasir Kedua
        password: igniter
        active: 1
    Category:
      Kategori1:
        tittle: Makanan
        active: 1
      Kategori2:
        tittle: Minuman
        active: 1
    Product:
      Produk1:
        name: Coke
        price: 5000
        discount: 0
        Category: Kategori2
        stock: 10
        active: 1
      Produk2:
        name: Gatorade
        price: 7000
        discount: 0
        Category: Kategori2
        stock: 5
        active: 1
      Produk3:
        name: Roti Boy
        price: 10000
        discount: 0
        Category: Kategori1
        stock: 15
        active: 1
      Produk4:
        name: Pizza Slice
        price: 15000
        discount: 0
        Category: Kategori1
        stock: 5
        active: 1
    
  11. Rubah berkas doct.php
    <?php
    //membuat kelas Doct yang digunakan
    //untuk mengelola database
    class Doct extends Controller{
        //membuat fungsi make_table, digunakan
        //untuk membuat tabel berdasarkan model
        function make_table(){
            //bagian ini tidak diubah
        }
    
        //membuat fungsi load_data yang akan mengisi tabel dengan
        //data yang diload dari folder /application/dummy
        function load_data(){
            //buat tombol submit untuk mentrigger fungsi
            echo 'Semua data pada tabel akan dihapus.<br />
                <form action="" method="POST">
                <input type="submit" name="action" value="Isi Tabel"><br />';
    
            //lakukan pengisian data
            //jika terdapat inputan POST berisi "action"
            if($this->input->post('action')){
                //untuk menghindari foreign key yang berhubungan, error
                Doctrine_Manager::connection()->execute('SET FOREIGN_KEY_CHECKS = 0');
                //meload data
                Doctrine::loadData(APPPATH.'/dummy');
                echo "Berhasil mengambil data";
            }
        }
    }
    ?>
    
  12. Buka http://localhost/ci/doct/load_data kemudian eksekusi tombol load data, setelah itu buka phpmyadmin.

  13. Jika isi tabel mengalami perubahan, tandanya eksekusi kode kita berhasil. Jika kita buka tabel category dan product

Kita baru saja merasakan kemudahan yang ditawarkan oleh doctrine, pertama kita membuat tabel beserta relasinya dengan sekali klik, selanjutnya kita mengisi tabel itu lagi-lagi dengan sekali klik. Struktur berkas yml (dibaca yaamel) juga tidak terlalu sukar dimengerti, kan? Hoho.

Oke, untuk episode kali ini sepertinya cukup, episode depan kita mulai dengan membuat kontroler untuk aplikasi POS kita. Happy Coding

Codeigniter untuk pemula, eps 3

M dari pattern MVC pada Codeigniter akan dibantu oleh Doctrine. Referensi bagus ada di sini, jika sudah melihat link tersebut, hampir tidak ada alasan untuk meneruskan membaca tulisan yang saya aing buat. Jika berkeras meneruskan membaca tulisan ini, mari kita mulai. Hahaha.

  1. Pertama mari kita ubah dulu berkas config.php di ci/application/config/.
    //seperti nama variabelnya, base_url adalah nilai statis
    //yang berisi path utama situs/aplikasi web kita
    $config['base_url']	= "http://localhost/ci/";
    
  2. Download doctrine, pada saat tulisan ini dibuat, doctrine stabil yang tersedia adalah versi 1.2.3.
  3. Ekstrak berkas Doctrine-1.2.3.tgz, akan didapatkan folder Doctrine-1.2.3 dan berkas package.xml dalam folder hasil ekstraksi. Dalam folder Doctrine-1.2.3 terdapat folder Doctrine dan 2 berkas, LICENSE dan Doctrine.php
  4. Buat folder plugins/doctrine/lib/ di ci/application/.
  5. Salin atau potong folder Doctrine dan berkas Doctrine.php dari folder hasil ekstraksi ke ci/application/plugins/doctrine/lib/.
  6. Buat berkas doctrine_pi.php di ci/application/plugins/.
     <?php
    // system/application/plugins/doctrine_pi.php
    
    // load Doctrine library
    require_once APPPATH.'/plugins/doctrine/lib/Doctrine.php';
    
    // load database configuration from CodeIgniter
    require_once APPPATH.'/config/database.php';
    
    // this will allow Doctrine to load Model classes automatically
    spl_autoload_register(array('Doctrine', 'autoload'));
    
    // we load our database connections into Doctrine_Manager
    // this loop allows us to use multiple connections later on
    foreach ($db as $connection_name => $db_values) {
    
    	// first we must convert to dsn format
    	$dsn = $db[$connection_name]['dbdriver'] .
    		'://' . $db[$connection_name]['username'] .
    		':' . $db[$connection_name]['password'].
    		'@' . $db[$connection_name]['hostname'] .
    		'/' . $db[$connection_name]['database'];
    
    	Doctrine_Manager::connection($dsn,$connection_name);
    }
    
    // CodeIgniter's Model class needs to be loaded
    require_once BASEPATH.'/libraries/Model.php';
    
    // telling Doctrine where our models are located
    Doctrine::loadModels(APPPATH.'/models');
    
    // (OPTIONAL) CONFIGURATION BELOW
    
    // this will allow us to use "mutators"
    Doctrine_Manager::getInstance()->setAttribute(
    	Doctrine::ATTR_AUTO_ACCESSOR_OVERRIDE, true);
    
    // this sets all table columns to notnull and unsigned (for ints) by default
    Doctrine_Manager::getInstance()->setAttribute(
    	Doctrine::ATTR_DEFAULT_COLUMN_OPTIONS,
    	array('notnull' => true, 'unsigned' => true));
    
    // set the default primary key to be named 'id', integer, 4 bytes
    Doctrine_Manager::getInstance()->setAttribute(
    	Doctrine::ATTR_DEFAULT_IDENTIFIER_OPTIONS,
    	array('name' => 'id', 'type' => 'integer', 'length' => 4));
    
    

    berkas tersebut aing salin dari sini.

  7. Buat tabel dengan nama ci di Mysql.
  8. Ubah berkas database.php di folder ci/application/config/.
    $db['default']['hostname'] = "localhost";
    $db['default']['username'] = "ci";
    $db['default']['password'] = "ci";
    $db['default']['database'] = "ci";
    $db['default']['dbdriver'] = "mysql";
    
  9. Ubah berkas autoload.php dalam folder ci/application/config/.
    //dengan ini, CI akan meload doctrine sebagai plugin
    $autoload['plugin'] = array('doctrine');
    

Oke, sampai di sini kita sudah siap untuk mulai membuat Model.

  1. Buat berkas user.php di folder ci/application/models/.
    <?php
    //membuat kelas User yang merupakan perluasan
    //dari Doctrine_Record
    class User extends Doctrine_Record{
        //membuat fungsi untuk mendefinisikan tabel
        public function  setTableDefinition() {
            //tabel ini, akan bernama 'user' secara default,
            //memiliki kolom 'username', 'password', dan 'real_name'
            $this->hasColumn('username', 'string', 255);
            $this->hasColumn('password', 'string', 255);
            $this->hasColumn('real_name', 'string', 255);
        }
    }
    ?>
    
  2. Buat berkas controller dengan nama pengguna.php di ci/application/controllers/.
    <?php
    
    //membuat kelas Pengguna
    class Pengguna extends Controller{
        //membuat fungsi tambah yang berguna untuk menambah
        //pengguna (menginput data dalam tabel user)
        function tambah(){
            //mendefinisikan variabel $p dengan perilaku
            //seperti kelas User
            $p = new User();
            //variabel $p cukup merujuk pada nama kolom
            //yang telah didefinisikan oleh kelas User untuk
            //mengisi nilainya
            $p->username = 'ci';
            $p->password = 'ci';
            $p->real_name = 'codeigniter';
            //simpan ke dalam tabel
            $p->save();
    
            //tampilkan pesan
            echo "Silahkan cek database ci di Mysql";
        }
    }
    
    ?>
    
  3. Buat tabel user pada Mysql. Kolom yang tersedia adalah id, username, password, dan real_name

    CI Eps 3 Img 1

    Membuat Tabel user

  4. Buka http://localhost/ci/pengguna/tambah

    CI Eps 2 Img 2

    Mengakses Controller pengguna

  5. Periksa tabel user pada Mysql. 

    CI Eps 3 Img 3

    Sukses Menambah Satu Baris Data pada Tabel user

Yap, sukses kita menggunakan doctrine sebagai alat bantu kita. Sejauh ini sepertinya tidak ada kendala yang berarti dalam penggunaan doctrine. Tapi menurut ini, doctrine tidak bisa digunakan jika PHP yang kita gunakan adalah versi 4 (dan di bawahnya).

Oke, sepertinya cukup sekian dulu mengenai doctrinenya, happy coding.

Codeigniter untuk pemula, eps 2

Setelah sukses, semoga, dengan instalasi Codeigniter (CI), maka sekarang saatnya menjajal framework ini. Oh, ya, sebagai bantuan, saya aing menggunakan IDE Netbeans.

Pertama kita akan membuat controller dan view yang akan menampilkan hello world.

  1. Buat berkas hello.php di ci/application/controllers/.
    <?php
    
    //membuat kelas Hello
    class Hello extends Controller{
        //membuat fungsi default yang akan dipanggil kelas ini
        public function index(){
            //buat variabel $vars yang merupakan array
            //dimana key text berisi teks "Halo Dunia"
            $vars['text'] = "Halo Dunia";
            //controller ini meload tampilan dari file
            //hello_view.php yang terdapat dalam folder
            //ci/application/views/, yang digunakan cukup
            //nama berkas, tidak perlu ekstensi berkas.
            //dalam menampilkan file hello_view, variabel
            //$vars diikutsertakan
            $this->load->view('hello_view', $vars);
        }
    
    ?>
  2. Buat berkas hello_view.php di ci/application/views/.
    <?php
    
    //tampilkan variabel $text
    //variabel ini berasal dari $vars['text']
    //yang terdapat dalam controller hello.php
    echo $text;
    
    ?>
    
  3. Buka alamat http://localhost/ci/index.php/hello melalui browser Anda. Hasilnya kurang lebih seperti ini.
    CI Eps 2 Img 1

    Hello World

     

Lihat, kita butuh minimal dua berkas hanya untuk menampilkan hello world. Dengan metode lama, aing hanya butuh satu berkas, katakanlah, hello.php saja. Tapi dengan pattern MVC, aing bisa memisahkan antara bagaimana mengelola yang akan ditampilkan, dan bagaimana menampilkan. Terhindar dari spaghetti code dan segala macam masalah turunannya, bisa membuat template tampilan, dan pada akhirnya terasa betul memangkas waktu membuat situs/aplikasi dengan PHP. Mari kita lanjutkan.

Kedua, buat url situs/aplikasi kita lebih cantik dengan menghilangkan index.php.

  1. Buat berkas .htaccess di ci/.
        RewriteEngine On
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule ^(.*)$ /ci/index.php/$1 [L]
    
        ErrorDocument 404 /ci/index.php
    
  2. Buka berkas config.php di ci/application/config/. Rubah baris yang berisi:
    $config['index_page'] = "index.php";

    Menjadi:

    $config['index_page'] = "";
  3. Melalui browser, buka http://localhost/ci/hello.

    CI Eps 2 Img 2

    Tanpa index.php

Lebih rapi kan, url kita sekarang? Hoho.

Mengenai controller, kita dapat membuat banyak fungsi di dalamnya. Misalnya selain fungsi index, kita ingin menambahkan fungsi fungsi1 yang dapat diakses melalui http://localhost/ci/hello/fungsi1/, hello adalah nama controller, fungsi1 adalah nama fungsi.

  1. Tambahkan ini ke dalam controller hello (ci/application/controllers/hello.php).
        //membuat fungsi default yang akan dipanggil kelas ini
        public function index(){
            //bagian ini tidak diubah
        }
    
        //membuat fungsi fungsi1
        public function fungsi1($parameter1, $parameter2){
            //membuat variabel $vars dengan key param1
            //yang berisi sama dengan variabel $parameter1 yang
            //diinput oleh user
            $vars['param1'] = $parameter1;
            //membuat variabel $vars dengan key param2
            //yang isinya sama dengan nilai variabel $parameter2
            $vars['param2'] = $parameter2;
            //fungsi fungsi1 meload tampilan dari file
            //hello_fungsi1_view.php variabel $vars diikutsertakan
            //fungsi fungsi1 bisa saja meload tampilan dari file
            //hello_view.php, sama seperti fungsi index, namun kali
            //ini kita gunakan saja file yang berbeda
            $this->load->view('hello_fungsi1_view', $vars);
        }
  2. Buat berkas file hello_fungsi1_view.php di ci/application/views/.
    //tampilkan variabel $param1
    echo 'Parameter 1: ' . $param1 . '<br />';
    //tampilkan variabel $param2
    echo 'Parameter 2: ' . $param2;
    
    ?>
  3. Buka http://localhost/ci/hello/fungsi1.
    CI Eps 2 Img 3

    Fungsi1

    Ups, sepertinya ada yang keliru, Missing argument dan Undefined variable. Oh, ya, fungsi1 membutuhkan 2 parameter, parameter1 dan parameter2.

        //membuat fungsi fungsi1
        public function fungsi1($parameter1, $parameter2){
    
  4. Buka http://localhost/ci/hello/fungsi1/peremeter1/peremeter2.

    CI Eps 2 Img 4

    Fungsi1 dengan 2 Parameter

Yap, url yang benar adalah http://localhost/ci/hello/fungsi1/peremeter1/peremeter2. Sekarang kita bisa menerka, hello adalah nama controller, fungsi1 adalah nama fungsi yang terdapat dalam controller hello, peremeter1 adalah nilai parameter pertama yang dibutuhkan oleh fungsi fungsi1, peremeter2 adalah nilai parameter kedua yang dibutuhkan oleh fungsi fungsi1. Untuk menyiasati ketiadaan parameter yang diberikan oleh pengguna, kita dapat mendefinisikan nilai parameter pada controller.

  1. Ubah controller hello.php.
        //membuat fungsi fungsi1
        public function fungsi1($parameter1 = 0, $parameter2 = 'pemereter2'){
    
  2. Buka http://localhost/ci/hello/fungsi1.

    CI Eps 2 Img 5

    Fungsi1 Setelah Diperbaharui

  3. Sekarang kita coba memasukkan parameter pada url, buka http://localhost/ci/hello/fungsi1/1001.
    CI Eps 2 Img 6

    Fungsi1 dengan Nilai Parameter1

    Kita memasukkan nilai 1001 sebagai nilai parameter1, sedang parameter2 karena tidak diberi nilai, tetap menampilkan nilai default yang kita tentukan dalam controller.

Sepertinya cukup sekian episode 2 dari perkenalan kita dengan Codeigniter. Saran dan kritik sangat diharapkan. Episode depan sepertinya akan berisi tentang M dari pattern MVC, semoga.

Codeigniter untuk pemula, eps 1

Setelah sekian lama (bahasa hiperbolis) tidak posting, kali ini saya aing akan mencoba rutin menulis mengenai pengalaman menggunakan Codeigniter (untuk selanjutnya disingkat menjadi CI).

Apa itu CI? Menurut situs resminya, CI merupakan framework PHP yang didesain dengan jejak kaki yang kecil (oke, mungkin bukan terjemahan yang tepat), dan dibuat untuk pemrogram PHP yang membutuhkan alat bantu yang elegan dan sederhana untuk membangun situs yang paripurna.

CI menggunakan konsep MVC untuk membangun situs yang kita butuhkan. Dengan konsep tersebut, kita lebih mudah mengorganisasikan pembuatan situs kita. Memang berdampak pada makin banyaknya file PHP yang harus kita buat dan edit (minimal 2, Controller dan View) namun konsep MVC akan menghindarkan kita dari spaghetti code yang sering menimpa terutama pemrogram pemula seperti aing.

Cerita mengenai rocker yang berpaling menjadi pemrogram bisa didapatkan dari tulisan lain yang tersebar di jagad maya, jadi tak perlu berpanjang kalam lagi, mari kita mulai (markimul) episode pertama CI untuk pemula.

  1. Unduh CI dari situs resminya. Saat tulisan ini dibuat, versi yang tersedia dalam situs tersebut adalah versi 1.7.2, berkas yang diunduh berupa berkas terkompresi zip sebesar 2,1 mb dengan nama Codeigniter_1.7.2.zip.
  2. Ekstrak berkas tersebut dalam folder web Anda, akan didapatkan folder bernama CodeIgniter_1.7.2. Jika menggunakan Windows dan Xampp maka folder web (biasanya) ada di C:\xampp\htdocs\. Jika menggunakan keluarga linux seperti ubuntu dan Lamp maka foldernya ada di var\www\. Untuk pengguna Lamp jangan lupa untuk menyetel permission untuk other, folder access: Access files dan file access: Read-only.
  3. Ganti nama folder CodeIgniter_1.7.2 menjadi ci. Ini untuk kemudahan pengaksesan saja.
  4. Melalui browser, buka alamat http://localhost/ci. Jika tidak ada aral melintang, maka hasilnya adalah seperti di bawah ini. 

    CI Eps 1 Img 1

    Hasil Instalasi CI

  5. Mari kita buka folder ci kita untuk lebih mengenal CI. 
    CI Eps 1 Img 2

    Folder ci

     

    Dalam folder ci kita temukan folder system dan user_guide dan berkas index.php dan license.txt. Yang menangani situs kita adalah folder system dan file index.php, folder user_guide bisa dipindahkan atau dihapuskan, file license.txt perlu dibaca untuk mengetahui mengenai lisensi CI.

  6. Buka folder system
    CI Eps 1 Img 3

    Folder system

     

    Isi folder system adalah folder:

    • application
    • cache
    • codeigniter
    • database
    • fonts
    • helpers
    • language
    • libraries
    • logs
    • plugins
    • scaffolding

    dan file index.html.

  7. Folder application adalah tempat aplikasi kita bernaung, untuk selanjutnya folder yang kita buka adalah folder-folder yang ada di dalam folder application ini. 
    CI Eps 1 Img 4

    Folder application

     

    • config
    • controllers
    • errors
    • helpers
    • hooks
    • language
    • libraries
    • models
    • views

    dan file index.html. Folder yang akan sering diakses adalah controllers, view, kadang tapi jarang, models, dan lebih jarang lagi, helpers.

    Model dalam MVC menurut bibi wiki, menangani interaksi aplikasi atau situs dengan database. Nah, untuk membantu kita dalam menangani database, kita akan menggunakan doctrine. Doctrine adalah ORM (Object Relational Mapper) untuk PHP, mudahnya, ORM berguna memetakan tabel dalam database menjadi kelas (class) pada aplikasi kita. Ah, nanti kita lihat lagi mengenai doctrine ini, kita kembali pada folder CI kita.

  8. Pindahkan folder application dari dalam folder system ke folder ci, jadi dalam folder ci terdapat folder application, system, dan user_guide (jika belum dihapus). Hal ini terutama berguna sekali jika kita telah mengunggah folder situs kita pada web hosting yang kita gunakan, dengan begitu bila ada perubahan pada situs atau aplikasi web kita, cukup folder application yang kita perbaharui, bisa dengan mengunggah keseluruhan isi folder maupun berkas-berkas individual yang baru saja kita perbaharui.
  9. Buka http://localhost/ci, seharusnya tidak ada perubahan tampilan yang kita dapatkan. Sampai di sini, proses instalasi CI sudah berhasil, meski belum ada gunanya untuk kita. :ngakak

Oke, cukup sekian tulisan mengenai proses instalasi CI, semoga bermanfaat, pada tulisan selanjutnya kita akan berkenalan dengan doctrine, dan mulai membuat beberapa controller dan view, dan sedikit model, untuk membuat situs pertama kita.