Tutorial Membuat CRUD Codeigniter Otomatis Dengan GROCERY

GROCERY CRUD adalah library open source yang digunakan untuk melakukan generate fitur CRUD (Create Read Update Delete) secara otomatis pada aplikasi berbasis web yang dibuat menggunakan framework codeigniter atau sering juga disebut dengam sebutan codeigniter CRUD Generator, karena hanya cukup dengan 5 baris script saja anda sudah mempunyai fitur CRUD yang powerfull. tentunya ini akan sangat bermanfaat jika anda sedang mengerjakan sebuah proyek yang memiliki banyak tabel master, dari pada membuat CRUD nya satu persatu lebih pakai pakai GROCERY CRUD saja untuk menghemat waktu pengerjaan proyek.

Integrasi Grocery CRUD Dengan Codeigniter

Untuk bisa menggunakan library ini tentunya kita harus melakukan integrasi GROCERY CRUD dengan proyek kita terlebih dahulu, silahkan ikuti intruksi berikut :

1. Download library GROCERY CRUD pada situs resminya grocerycrud.com.
2. extrack grocery-crud-1.5.7.zip kedalam project codeigniter.

Konfigurasi Dasar Codeigniter

untuk codeigniter yang baru di install/ fresh install maka ada beberapa konfigurasi sederhana yang harus anda dilakukan, salah satunya adalah setting base url nya, settingan ini bisa anda temukan pada application/config/config.php dan cari settingan berikut :

$config['base_url']='';

diganti menjadi :

$config['base_url'] = 'http://localhost/ci3/';

selanjutnya pengaturan koneksi database yang bisa anda temukan pada application/config/database.php

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'example',
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);

setelah itu kita perlu melakukan load otomatis untuk library dan helper yang akan sering kita gunakan, anda bisa melakukan konfigurasi ini pada file application/config/autoload.php :

$autoload['libraries'] = array('grocery_CRUD','database');
$autoload['helper'] = array('url');

sampai pada tahap ini anda sudah selesai melakukan konfigurasi codeigniter dan GROCERY CRUD.

Membuat Database Dan Tabel

GROCERY CRUD menyediakan database bawaan yang bisa kita gunakan untuk praktek, anda bisa menemukan file examples_database.sql.zip didalam source code GROCERY CRUD yang sudah anda download tadi, silahkan extrack file tersebut lalu butalah sebuah database baru dengan nama example dan lakukan import database melalui PhpMyadmin.

Cara Menggunakan GROCERY CRUD

salah satu kelebihan grocery crud yang powerfull adalah hanya dengan satu function dalam sebuah controller sudah bisa menghandle sebuah proses CRUD untuk sebuah tabel, misalnya anda punya sebuah function employees dalam controller Data maka anda sudah mempunyai fitur CRUD untuk tabel employees, dan jika anda ingin tambahkan fitur CRUD lain maka anda bisa membuat function baru pada controller yang sama sehingga lebih hemat file dan coding yang ditulis, sekarang silahkan buat sebuah file baru dengan nama Data.php pada folder controller dan tulis script berikut :

<?php

Class Data extends CI_Controller {

    function __construct() {
        parent::__construct();
    }

    function index() {
        
    }

    public function employees() {
        // instance object
        $crud = new grocery_CRUD();
        // pilih tabel yang akan digunakan
        $crud->set_table('employees');
        // simpan hasilnya kedalam variabel output
        $output = $crud->render();
        // tampilkan di view 
        //$this->_example_output($output);
        $this->load->view('template.php', $output);
    }

}

langkah selanjutnya kita akan membuat sebuah view untuk menampilkan hasil generate dari GROCERY CRUD, sebenarnya library ini sudah menyediakan sebuah view dengan nama example.php tapi terkadang kita punya template sendiri yang sudah kita buat sedemikian rupa untuk di integrasikan dengan proyek yang sedang kita kerjakan, oleh karena itu silahkan buat sebuah file baru dengan nama template.php pada folder view dan tulislah script berikut :

<!DOCTYPE html>
<html>
    <head>
        <title>GROCERY GRUD - Belajarphp.net</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <?php foreach ($css_files as $file): ?>
            <link type="text/css" rel="stylesheet" href="<?php echo $file; ?>" />
        <?php endforeach; ?>
        <?php foreach ($js_files as $file): ?>
            <script src="<?php echo $file; ?>"></script>
        <?php endforeach; ?>
    </head>
    <body>
        <div style='height:20px;'></div>  
        <div>
            <?php echo $output; ?>
        </div>
    </body>
</html>

setelah itu jangan lupa melakukan save untuk menyimpan perubahan lalu  untuk melihat hasilnya silahkan buka web browser dan akses url http://localhost/ci3/index.php/data/employees

Menampilkan Custom Field

jika pada script di atas kita menampilkan semua data dalam tabel employees maka kali ini kita akan belajar cara menampilkan beberapa kolom saja, GROCERY CRUD sudah menyediakan fungsi columns yang digunakan untuk menampilkan custom Field pada sebuah tabel, sebagai contoh misalnya kita hanya ingin menampilkan field firstName, lastName dan email dari tabel employees maka script nya menjadi seperti ini :

    public function employees() {
        // instance object
        $crud = new grocery_CRUD();
        // pilih tabel yang akan digunakan
        $crud->set_table('employees');
        // custom field yang ingin ditampilkan
        $crud->columns('lastName','firstName','email');
        // simpan hasilnya kedalam variabel output
        $output = $crud->render();
        // tampilkan di view 
        $this->load->view('template.php', $output);
    }

silahkan save dan refresh web browser untuk melihat perubahan, sekarang hasilnya menjadi seperti ini 

Menggunakan Validation

jika anda sudah terbiasa menggunakan library validation maka pada GROCERY CRUD  juga anda bisa melakukan hal yang sama untuk melakukan validasi data sebelum diproses, sebagai contoh misalnya kita ingin membuat validasi inputan email yang dimasukan oleh users harus berformat email maka kita bisa menggunagakan fungsi set_rule seperti dibawah ini

    public function employees() {
        // instance object
        $crud = new grocery_CRUD();
        // pilih tabel yang akan digunakan
        $crud->set_table('employees');
        // custom field yang ingin ditampilkan
        $crud->columns('firstName','lastName','email');
        // set validation rule
        $crud->set_rules('email','email','valid_email');
        $crud->set_rules('firstName','firstName','required');
        // simpan hasilnya kedalam variabel output
        $output = $crud->render();
        // tampilkan di view 
        $this->load->view('template.php', $output);
    }

jangan lupa lakukan save dan selanjutnya buka form untuk add data baru, silahkan kosongkan kolom firstName dan berikan format email yang salah pada kolom email kemudian klik save maka akan muncul warning seperti dibawah ini  untuk referensi validation rule yang bisa anda gunakan silahkan mengacu pada dokumentasi validation rule codeigniter 3.

Menampilkan Data Dari tabel Yang Berelasi

mungkin ini adalah salah satu bagian yang paling anda tunggu yaitu bagaimana cara nya menampilkan data dari tabel yang berelasi, jika anda mempelajari struktur database bawaan GROCERY CRUD GENERATOR maka anda akan menemukan tabel employees dan offices, kedua tabel ini berelasi dengan officeCode sebagai PK pada tabel offices dan menjadi FK pada tabel employees seperti gambar dibawah ini

lalu anda ingin menampilka field city sebagai pengganti pengganti field officeCode yang ada pada tabel employees sehingga scriptnya menjadi seperti ini

   public function employees() {
        // instance object
        $crud = new grocery_CRUD();
        // pilih tabel yang akan digunakan
        $crud->set_table('employees');
        // memberikan alias untuk kolom officeCode menjadi Office City
        $crud->display_as('officeCode', 'Office City');
        $crud->set_subject('Employee');
        // mengambil data city dari tabel offices berdasarkan relasi dari tabel officeCode
        $crud->set_relation('officeCode', 'offices', 'city');
        // simpan hasilnya kedalam variabel output
        $output = $crud->render();
        // tampilkan di view 
        $this->load->view('template.php', $output);
    }

silahkan save dan lakukan refresh pada web browser anda untuk melihat perubahansekarang field office City sudah muncul, itu tandanya kita sudah berhasil.

Upload File/ Upload Field

kasus selanjutnya adalah bagaimana caranya untuk membuat field yang akan kita gunakan sebagai interface untuk mengupload file ke server. dalam hal ini GROCERY CRUD Generator sudah menyediakan function set_field_upload dengan format seperti dibawah ini:

$crud->set_field_upload('NamaField','lokasiTujuan');

sehingga jika kita implementasikan secara menyeluruh makan script CRUD nya menjadi seperti ini

    public function employees() {
        // instance object
        $crud = new grocery_CRUD();
        // pilih tabel yang akan digunakan
        $crud->set_table('employees');
        // memberikan alias untuk kolom officeCode menjadi Office City
        $crud->display_as('officeCode', 'Office City');
        $crud->set_subject('Employee');
        // mengambil data city dari tabel offices berdasarkan relasi dari tabel officeCode
        $crud->set_relation('officeCode', 'offices', 'city');
        // menjadikan field file_url sebagai elemet upload pada form input data
        $crud->set_field_upload('file_url','assets/uploads/files');
        // simpan hasilnya kedalam variabel output
        $output = $crud->render();
        // tampilkan di view 
        $this->load->view('template.php', $output);
    }

silahkan save dan refresh untuk melihat perubahan nya, seperti yang anda lihat sekarang anda bisa langsung mengdownload file yang sudah anda upload melalui halaman baca data seperti dibawah ini

proses upload file menggunakan teknik ajax

anda juga bisa melakukan drop file dan arahkan ke dalam form untuk melakukan proses upload

Menambahkan Button Action Pada Halaman Utama

secara default library GROCERY CRUD hanya menampilkan button untuk untuk melihat detail data, button edit dan button delete, lalu jika anda ingin menambahkan custom button maka anda bisa menggunakan function add_action seperti dibawah ini

$crud->add_action('More', '', 'demo/action_more','ui-icon-plus');

sehingga jika kita implementasikan jadi seperti ini :

    public function employees() {
        // instance object
        $crud = new grocery_CRUD();
        // ganti themes
        $crud->set_theme('datatables');
        // pilih tabel yang akan digunakan
        $crud->set_table('employees');
        // memberikan custom button
        $crud->add_action('More', '', 'demo/action_more', 'ui-icon-plus');
        // simpan hasilnya kedalam variabel output
        $output = $crud->render();
        // tampilkan di view 
        $this->load->view('template.php', $output);
    }

jika anda lihat pada script line 5 maka anda akan menemukan fungsi set_theme, sesuai dengan nama nya bahwa fungsi ini digunakan untuk mengganti tema yang digunakan, GROCERY CRUD menyediakan 2 jenis theme yang bisa anda gunakan yaitu datatables dan flexigrid.

Fitur Callback GROCERY

untuk memudahkan developer dalam melakukan manipulasi bisniss proses maupun modifikasi tampilan, maka  GROCERY CRUD menyediakan sebuah fitur yang disebut callback,  dengan fitur ini kita bisa memberikan modifikasi pada textbox form atau membuat custom function yang akan dipanggil ketika sebuah proses di eksekusi.

contoh pertama adalah callback_add_field, fitur ini digunakan untuk memodifikasi kolom inputan, misalnya saya ingin memberikan kode area +62 sebelum textbox phone maka scriptnya jadi seperti ini

function employees(){
$crud = new grocery_CRUD();
 
$crud->set_table('offices');
$crud->set_subject('Office');
$crud->required_fields('city');
$crud->columns('city','country','phone','addressLine1','postalCode');
 
$crud->callback_add_field('phone',array($this,'add_field_callback_1'));
 
$output = $crud->render();
 
 $this->load->view('template.php', $output);
}
 
function add_field_callback_1()
{
return '+62 <input type="text" maxlength="50" value="" name="phone" style="width:462px">';
}

contoh kedua adalah callback_edit_field, fitur ini digunakan untuk memodifikasi kolom pada form edit, beda nya pada function ini kita bisa mendapatkan value dari kolom yang di edit, contoh script nya seperti ini :

    function offices() {
        $crud = new grocery_CRUD();

        $crud->set_table('offices');
        $crud->set_subject('Office');
        $crud->required_fields('city');
        $crud->columns('city', 'country', 'phone', 'addressLine1', 'postalCode');
        $crud->callback_edit_field('phone', array($this, 'edit_field_callback_1'));
        $output = $crud->render();
        $this->load->view('template.php', $output);
    }

    function edit_field_callback_1($value, $primary_key) {
        return '+62 <input type="text" maxlength="50" value="' . $value . '" name="phone" style="width:462px">';
    }

silahkan save dan refresh web browser yang anda gunakan untuk melihat perubahan

selanjutnya ada function callback_before_insert yang digunakan untuk memanggil function lain yang akan di eksekusi sebelum proses insert dilakukan, sebagai contoh kita akan melakukan pengecekan data kode POS yang di input oleh pengguna, jika kode pos nya dibiarkan kosong maka sistem akan menyimpan string “kosong” kedalam field, ini hanya  sekedar contoh saja, tentu pada implementasinya bisa dilakukan hal lain yang lebih luas, berikut scriptnya seperti dibawah ini :

    function offices() {
        $crud = new grocery_CRUD();
        $crud->set_table('offices');
        $crud->set_subject('Office');
        $crud->required_fields('city');
        $crud->columns('city', 'country', 'phone', 'addressLine1', 'postalCode');
        $crud->callback_before_insert(array($this, 'checking_post_code'));
        $output = $crud->render();
        $this->load->view('template.php', $output);
    }

    function checking_post_code($post_array) {
        if (empty($post_array['postalCode'])) {
            $post_array['postalCode'] = 'Not U.S.';
        }
        return $post_array;
    }

selain callback_before_insert, masih ada juga fungsi lain yang bisa anda gunakan seperti :

1. callback_after_insert
2. callback_before_update dan callback_after update
3. callback_after_delete dan callback_before_delete
4. callback_before_upload dan callback_after_upload

untuk keterangan lebih lanjut tentang fitur yang belum dibahas silahkan baca dokumentasi dari GROCERY CRUD.

Kesimpulan

dengan adanya library ini mempermudah pekerjaan developer dalam mengerjakan fitur CRUD dalam proyek yang sedang dikerjakan, performance nya pun terbilang cukup bagus karena sudah mengimplementasikan teknik ajax dalam memproses data.

Nuris Akbar SST, M.Kom

Senior Backend Web Developer Dengan Pengalaman Lebih Dari 8 Tahun, Sekarang Menjadi CTO Di Startup Globalvillage, Founder Academy Diigtal Dan Instruktur Training Di PT Brainamtics Cipta Informatika.

See author's posts