Tutorial Grocery CRUD Lengkap

Hi Sobat Jagowebdev, pada kesempatan kali ini kami ingin membahas tentang tutorial grocery CRUD, aplikasi generator CRUD otomatis untuk aplikasi berbasis PHP lengkap dengan cara penggunaannya.

Note: Halaman DEMO (Versi Upgrade) diperlukan login. Setelah mengklik tautan Demo (Versi Upgrade), Sobat akan diarahkan pada halaman login, setelah login klik kembali tautan Demo (Versi Upgrade)

Lebih detail mengenai versi upgrade dapat dilihat di bagian bawah artikel ini.

Daftar Isi:

I. Apa Itu Grocery CRUD?

Seperti disebutkan sebelumnya, Grocery CRUD adalah sebuah library yang dapat digunakan untuk menggenerate halaman CRUD (Create, Read, Update, Delete) secara otomatis untuk aplikasi yang dikembangkan menggunakan bahasa pemrograman PHP atau lebih mudahnya dapat dikatakan bahwa grocery crud adalah php crud generator.

Pada versi gratisnya, Grocery CRUD hanya tersedia untuk framework Codeigniter (baik versi 3 maupun versi 4), oleh karena itu Grocery CRUD ini juga populer disebut CRUD Generator Codeigniter atau Codeigniter CRUD Generator.

Grocery CRUD ini disebut sebut sangat powerfull, kenapa demikian? karena untuk menggenerate CRUD, hanya diperlukan lima baris code saja, sehingga dengan tools ini kita dapat membuat aplikasi CRUD dengan cepat. Tools ini juga powerfull karena mampu bekerja dengan tabel yang berelasi baik satu ke banyak maupun banyak ke banyak.

II. Versi Grocery CRUD

Terdapat dua versi Grocery CRUD yaitu versi free dan versi enterprise. Versi free bebas digunakan tanpa dipungut biaya, versi free ini direlease dengan lisensi MIT License. Adapun untuk versi enterprise untuk dapat menggunakannya perlu membeli lisensi.

Baik versi free maupun versi enterprise, kedua memiliki source code yang berbeda, sehingga versi free bukanlah versi trial dari versi enterprise nya.

Grocery CRUD versi FREE

Sebagaimana disebutkan sebelumnya bahwa pada versi free, grocery CRUD hanya dapat digunakan pada framework codeigniter, selain itu theme yang digunakan hanya bisa menggunakan theme flexigrid dan datatables dimana tampilan kedua theme ini terlihat sangat jadul.

Grocery CRUD Versi Enterprise

Versi enterprise merupakan versi yang utama dari aplikasi ini, versi yang sangat terawat dan memiliki perhatian khusus (wajar saja karena berbayar). Harga versi enterprise ini adalah 29 Euro atau sekitar 600rb. Code pada versi enterprise ini sama sekali berbeda dari code yang ada versi free.

III. Grocery CRUD Theme

Grocery crud versi free memiliki 3 theme yaitu

• Flexigrid (pre installed)
• Datatables (pre installed)
• Bootstrap (berbayar)

Penting diperhatikan bahwa theme ini diperuntukkan hanya untuk grocery crud free, sehingga jika kita membeli Bootstrap theme bukan berarti kita akan menggunakan versi enterprise dari aplikasi ini. Dalam websitenya disebutkan bahwa membeli theme bootstrap seolah olah kita memberikan support kepada pengembangan grocery crud versi free.

Theme flexigrid menggunakan sistem server side (ajax) sehingga data yang diload hanya yang diperlukan saja sehingga theme ini efektif digunakan ketika bekerja dengan data dalam jumlah besar sedangkan untuk theme datatables menggunakan sistem client side, dimana data terlebih dahulu di load semuanya baru kemudian diorganisir, sehingga theme ini cocok digunakan untuk data yang tidak terlalu banyak, data yang banyaknya kurang dari 1000 baris.

Untuk theme bootstrap sistem load datanya menggunakan sistem server side (ajax) sama dengan yang digunakan pada flexigrid, namun dengan style bootstrap, untuk mencoba demonya silakan kunjungi halaman berikut: https://www.grocerycrud.com/v1.x/demo/bootstrap_theme_v5/

IV. Grocery CRUD Codeigniter

Grocery CRUD dapat digunakan diberbagai framework PHP seperli Codeigniter, Laravel, Zend Framework, Symfony, dan PHP native (melalui composer). Untuk versi free, Grocery CRUD hanya tersedia untuk Codeigniter, sehingga yang paling populer atau sering disebut adalah grocery crud codeigniter.

Grocery CRUD Codeigniter telah mensupport Codeigniter versi 3 dan versi 4, untuk Grocery CRUD Free versi 1, Codeigniter yang disupport adalah versi 3 sedangkan Grocery CRUD Free versi 2, yang disupport adalah Codeigniter versi 4, hingga artikel ini ditulis, versi stabil yang tersedia adalah versi 2.0.1.

Pengembangan selanjutnya yaitu versi 3 Beta rencananya akan direlease tahun 2023 ditujukan untuk verisi enterprise, belum ada informasi untuk pengembangan versi gratisnya.

V. Perbedaan Versi Free dan Versi Enterprise

Perbedaan versi free dan enterprise sebagain telah disinggung pada tulisan sebelumnya. Untuk lebih jelasnya berikut perbandingan versi free dan versi enterprise dalam bentuk tabel

Fitur	Free	Enterprise
Theme	Flexigrid (ajax) Datatables (Clientside) Bootstrap 3,4,5 (ajax – Berbayar)	Single theme (ajax)
Framework	Codeigniter 3,4	Codeigniter Laravel Zend Framework Symfony
PHP Native	Tidak	Ya
View data, form add, edit	Pindah Halaman	Modal Pop Up
Harga	Free	Mulai 29 Euro

VI. Tutorial Grocery CRUD Codeigniter – Instalasi

Seperti telah diabahas sebelumnya bahwa Grocery CRUD versi free hanya tersedia untuk framework Codeigniter, untuk itu pada artikel kali ini yang kami bahas adalah bagaimana cara instalasi grocery crud pada Codeigniter.

Pada tutorial kali ini, environment yang kami gunakan adalalah:

• Grocery CRUD versi 2.0.1
• Codeigniternya versi 4.2.10
• PHP Versi 8.1.10

Cara instalasinya adalah sebagai berikut

1. Install dan Setup Codeigniter 4

Jika Sobat belum menginstall Codeigniter, pertama tama install terlebih dahulu Codeigniter 4, caranya download Codeigniter pada halaman resminya, pada contoh kali ini saya menggunakan Codeigniter versi terbaru yaitu versi 4.2.10, selanjutnya ekstrak file hasil download tersebut ke folder htdocs, pada contoh kali ini saya ekstrak di folder htdocs/grocerycrud

Selanjutnya jalankan local development server, caranya:

1. Buka command prompt dan arahkan cursor ke lokasi tempat codeigniter di ekstrak
2. Jalankan perintah php spark serve sebagai berikut

Setelah server berhasil berjalan, tes apakah codeigniter dapat berjalan dengan baik, buka browser dan buka halaman http://localhost:8080, jika berhasil maka akan muncul halaman sebagai berikut:

Setelah Codeigniter berhasil diinstal, selanjutnya kita perlu menyesuaikan routing Codeigniter, caranya buka file app\Config\Routes.php kemudian uncomment bagian $routes->setAutoRoute(false); dan ganti argumen false menjadi true, sebagai berikut:

Dengan mengaktifkan autoroute, maka Codeigniter secara otomatis akan membaca pattern pada url kemudian memanggil controller (file dan class) dan action sesuai alamat url tersebut. Dengan autotoute, kita tidak perlu lagi menuliskan routing satu per satu.

Selanjutnya ubah file config database, caranya buka file app\Config\Database.php kemudian cari variabel $default, setelah itu isikan root pada bagian username dan grocerycrud pada bagian database, contoh sebagai berikut:

Note: nama database grocerycrud ini nantinya akan kita gunakan untuk menginstall database Grocery CRUD

2. Install Grocery CRUD

2.1. Copy File PHP Grocery Crud

Selanjutnya download grocery crud. Untuk mendownload versi terbaru, buka halaman: https://www.grocerycrud.com/docs/download

Note: Pada versi 2.0.1 yang saya gunakan ini, jika dijalankan pada PHP 8.1 maka akan terdapat error pada file app\Libraries\GroceryCrud.php, error ini sudah kami perbaiki, jika Sobat mendownload di halaman resminya namun tidak bisa berjalan di PHP versi 8.1, Sobat dapat mendownload versi 2.0.1 yang sudah kami perbaiki disini.

Setelah didownload ekstrak file tersebut, contoh hasil ekstraknya adalah sebagai berikut:

Setelah diekstrak, copy file sesuai dengan folder pada Codeigniter, pada contoh diatas, copykan file GroceryCrud.php yang ada pada app\Libraries ke folder app\Libraries yang ada pada Codeigniter, disaya file tersebut saya copy ke htdocs\grocerycrud\app\Libraries, lakukan hal yang sama untuk file lainnya.

Untuk folder aseets yang ada di dalam folder public, copykan folder assets tersebut kedalam folder public Codeigniter, disaya htdocs\grocerycrud\public.

Setelah dicopy semua, maka struktur nya menjadi sebagai berikut:

├── app
│   ├── Config
│   │   ├── GroceryCrud.php
│   ├── Controllers
│   │   ├── Examples.php
│   ├── Libraries
│   │   └── GroceryCrud.php
│   ├── Models
│   │   └── GroceryCrudModel.php
│   ├── Views
│   │   ├── example.php
│   └── index.html
├── public
│   ├── assets
│   │   ├── grocery_crud
│   │   ├── index.html
│   │   └── uploads

2.2. Load file SQL

Setelah semua file dicopy, langkah selanjutnya adalah load file sql yang disertakan pada file download grocery crud ke dalam database, caranya:

1. Buat database dengan nama grocerycrud.
2. Ekstrak file examples_database.sql.zip, pada hasil ekstrak akan muncul file examples_database.sql, selanjutnya load file sql tersebut pada database yang telah kita buat tadi (database grocerycrud).

Jika berhasil maka akan muncul tabel sebagai berikut:

2.3. Jalankan Grocery CRUD

Selanjutnya mari kita tes apakah Grocery CRUD dapat berjalan dengan baik, buka browser kemudian buka halaman http://localhost:8080/examples/offices_management jika berhasil, maka akan muncul tampilan sebagai berikut:

Tampilan diatas menggunakan tema flexigrid (tema default), pada tema ini, data diload menggunakan sistem ajax dimana data yang diload hanya data yang diperlukan, silakan mengexplore tema ini dengan mencoba coba fitur fitur yang ada pada tema tersebut.

Sebagai catatan, tampilan Grocery CRUD Free jauh berbeda dengan tampilan demo yang ada di website Grocery CRUD karena di web Grocery CRUD yang ditampilkan adalah versi enterprise.

VII. Tutorial Grocery CRUD – Fitur Penting Grocery CRUD

Grocery CRUD memiliki banyak fitur yang dapat digunakan untuk CRUD, semuanya dapat dibaca di halaman Documentation nya, berikut ini beberapa fitur penting yang perlu untuk diketahui yaitu:

VII. 1 Fitur Read

1. Read: Mengganti Tema Grocery CRUD

Pada versi gratis ini terdapat dua tema yang dapat digunakan, yaitu flexigrid dan datatables, flexigrid (pada contoh sebelumnya) merupakan tema default, untuk mengganti tema default ini, buka file app\Config\GroceryCrud.php kemudian cari baris public $default_theme = 'flexigrid'; selanjutnya ganti flexigrid dengan datatables.

Jika kita ingin mengganti tema pada bagian tertentu dari aplikasi, gunakan method setTheme(), misal buka file app\Controllers\Examples.php selanjutnya pada bagian method customers_management tambahkan baris $crud->setTheme('datatables') sebagai berikut:

Ketika dijalankan, hasil yang kita peroleh adalah sebagai berikut:

Tema datatables ini terlihat tidak menarik dan usang, selain itu, jika tabel memiliki banyak kolom maka tabel akan melewati batas tepi kanan (seperti gambar diatas)

2 Read: Mengganti Tampilan Nama Kolom

Secara default, grocery crud akan menggunakan nama kolom tabel database sebagai nama kolom tabel yang ditampilkan misalkan pada contoh diatas, pada tabel customers terdapat kolom dengan nama CustomerName, maka pada tabel yang ditampilkan, nama kolomnya juga CustomerName, bentuk tampilan seperti ini tentu kurang nyaman dilihat, kita dapat menggantinya yaitu menggunakan method displayAs().

Sebagai contoh pada file app\Controllers\Examples.php method orders_management() terdapat script berikut:

public function orders_management() {
	$crud = new GroceryCrud();
	$crud->setRelation('customerNumber','customers','{contactLastName} {contactFirstName}');
	$crud->displayAs('customerNumber','Customer Name');
	$crud->setTable('orders');
	$crud->setSubject('Order');
	$crud->unsetAdd();
	$crud->unsetDelete();

	$output = $crud->render();
	return $this->_exampleOutput($output);
}

Pada script diatas terdapat perintah $crud->displayAs('customerNumber','Customer Name'); perintah tersebut akan mengganti judul kolom dari customerName menjadi Customer Name sebagai berikut:

3. Read: Memilih Kolom Yang Ditampilkan

Untuk memiih kolom yang ditampilkan maka gunakan method fields() contoh seperti pada file app\Controllers\Examples.php method offices_management(), pada method tersebut terdapat script $crud->columns(['city','country','phone','addressLine1','postalCode']); yang artinya hanya kelima kolom tersebut yang ditampilkan pada tabel.

4. Read: Tidak menampilkan kolom tertentu

Agar kolom tertentu pada tabel database tidak ditampikan maka gunakan method unsetColumns(), sebagai contoh pada file app\Controllers\Examples.php method products_management(), pada method tersebut terdapat script $crud->unsetColumns([‘productDescription’]); dengan demikian maka semua kolom tabel products akan ditampilkan kecuali kolom productDescription.

5 Read: Menampilkan Data Tabel Lain Yang Berhubungan (one to one, one to many)

Fitur berikutnya yang penting diketahui bahwa dengan grocery crud ini kita dapat mengubungkan tabel satu dengan yang yang lain, caranya yaitu menggunakan method setRelation(), contoh penggunaan ada pada file app\Controllers\Examples.php method orders_management(), pada method tersebut terdapat script berikut:

$crud->setRelation('customerNumber','customers','{contactLastName} {contactFirstName}');
$crud->displayAs('customerNumber','Customer');
$crud->setTable('orders');

Script diatas dapat dibaca sebagai berikut:

1. Gunakan tabel orders ($crud->setTable())
2. Ganti tampilan nama kolom customerNumber menjadi Customer ($crud->displayAs())
3. Hubungkan kolom customerNumber pada kolom orders dengan kolom customerNumbers pada tabel customers kemudian saat data ditampilkan ganti data cutomerNumber dengan data contactLastName dan contactFirstName ($crud->setRelation())

Hasilnya akan muncul kolom Customer dengan isi nama depan dan nama belakang customer

Contoh lain adalah method employees_management() pada file app\Controllers\Examples.php, pada method tersebut terdapat script:

$crud->setTable('employees');
$crud->setRelation('officeCode','offices','city');
$crud->displayAs('officeCode','Office City');

Script diatas berarti bahwa:

1. Gunakan tabel employees ($crud->setTable())
2. Hubungkan kolom officeCode pada tabel employees dengan kolom officeCode pada tabel offices kemudian tampilkan data city pada kolom officeCode ($crud->setRelation())
3. Ganti tampilan nama kolom officeCode menjadi Office City($crud->displayAs())

Hasil yang diperoleh adalah sebagai berikut:

6 Read: Menampilkan Data Tabel Lain Yang Berhubungan (many to many) Grocery CRUD setRelationNtoN

Selain one to many, dengan grocery crud juga dapat menghubungkan tabel yang satu dengan tabel yang lain yang memiliki derajad relasi many to many, caranya yaitu menggunakan method setRelationNtoN(), sebagai contoh method film_management() pada file app\Controllers\Examples.php, pada method tersebut terdapat script sebagai berikut:

$crud->setTable('film');
$crud->setRelationNtoN('actors', 'film_actor', 'actor', 'film_id', 'actor_id', 'fullname');
$crud->setRelationNtoN('category', 'film_category', 'category', 'film_id', 'category_id', 'name');
$crud->unsetColumns(['special_features','description','actors']);

Ketika dijalankan hasilnya tampak seperti gambar berikut:

Pada script diatas, kita ingin menampilkan nama kategori dari film dimana satu film dapat memiliki lebih dari satu kategori, sehingga disini terdapat juction table (tabel penghubung) yang bernama film_category, tabel ini berperan sebagai penghubung antara tabel film dan tabel category.

Tabel film_category memiliki dua kolom yaitu kolom film_id yang menghubungkan tabel film_category dengan tabel film dan kolom category_id yang menghubungkan tabel film_category dan tabel category.

Pada script diatas, script yang digunakan untuk menghubungkan tabel film dan tabel category adalah:

$crud->setRelationNtoN('category', 'film_category', 'category', 'film_id', 'category_id', 'name');

Berikut penjelasan argumen yang ada pada method setRelationNtoN() diatas urut dari yang paling kiri:

1. category : merupakan nama judul kolom yang akan ditampilkan pada tabel datagrid
2. film_category : merupakan nama tabel penghubung (juction tabel) antara tabel film dengan tabel category
3. category : merupakan nama tabel yang akan dihubungkan (tabel film akan dihubungkan dengan tabel category)
4. film_id : merupakan nama kolom yang menghubungkan tabel film_category dengan tabel film
5. category_id : merupakan nama kolom yang menghubungkan antara tabel film_category dengan tabel category
6. name : merupakan nama kolom yang ingin diambil datanya (nama kolom pada tabel category).

Mungkin Sobat bertanya tanya untuk apa setRelationNtoN yang satunya lagi yaitu:

$crud->setRelationNtoN('actors', 'film_actor', 'actor', 'film_id', 'actor_id', 'fullname');

script ini berfungsi nantinya untuk keperluan add/edit data saja, sehingga dibagian bawah terdapat script

$crud->unsetColumns(['special_features','description','actors']);

yang berfungsi agar kolom actors tidak ditampilkan, namun ketika kita masuk ke halaman add/edit, maka terdapat isian actors yang berisi daftar nama actor yang berasal dari tabel actors seperti tampak pada gambar berikut:

7. Read: Memodifikasi Data Kolom Yang Ditampilkan

Data yang ditampilkan pada tabel datagrid dapat kita manipulasi sesuai dengan keperluan sebagai contoh pada file app\Controllers\Examples.php pada method products_management() terdapat script sebagai berikut:

Dengan script diatas maka data kolom buyPrice yang ditampilkan akan memiliki akhiran simbol euro ( € ) sebagai berikut:

VII. 2 Fitur Add/Edit

Setelah kita membahas fitur read, fitur selanjutnya yang kita bahas adalah fitur add dan edit:

1. Add/Edit: Menampilkan Semua Kolom Pada Halaman Add/Edit.

Untuk menampilkan semua kolom tabel pada halaman add/edit maka tidak ada script yang dijalankan, misal pada method customer_menagement pada file app\Controllers\Examples.php

public function customers_management()
{
	$crud = new GroceryCrud();
    	$crud->setTable('customers');
	$crud->setTheme('datatables');
	$output = $crud->render();
	return $this->_exampleOutput($output);
}

Dengan script diatas maka semua kolom pada tabel customers akan ditampilkan baik pada halaman add maupun halaman edit.

2. Add/Edit: Menampilkan Kolom Tertentu Pada Halaman Add/Edit Sekaligus.

Secara default, pada halaman add atau edit, Grocery CRUD akan menampilkan semua kolom yang ada pada tabel database seperti contoh pada bagian sebelumnya, namun demikian Sobat dapat memilih kolom apa saja yang diperkenankan untuk di tambahkan atau diubah datanya, caranya yaitu menggunakan method fields(), misal pada method film_management() yang ada pada file app\Conteollers\Examples.php sebagai berikut:

$crud->fields(['title', 'description', 'actors' ,  'category' ,'release_year', 'rental_duration', 'rental_rate', 'length', 'replacement_cost', 'rating', 'special_features']);

Pada script tersebut maka kolom yang menjadi argumen method fileds(), yaitu title, description, dst, akan ditampilkan pada halaman add (tombol Add Record) maupun pada halaman edit (tombol icon pencil pada baris tabel) sebagai berikut:

3. Add: Menampilkan Kolom Tertentu Hanya Pada Halaman Tambah Data

Untuk menampilkan kolom tertentu hanya pada halaman tambah data saja, maka gunakan method addFields() misal

public function customers_management()
{
	$crud = new GroceryCrud();
    	$crud->setTable('customers');
    	$crud->addFields(['customerName', 'addressLine1', 'addressLine1']);
	$output = $crud->render();
	return $this->_exampleOutput($output);
}

dengan method ini, maka kolom customerName, addressLine1, dan addressLine2 akan ditampilkan pada halaman tambah data sedangkan pada halaman edit data semua kolom akan ditampilkan, kenapa? karena kita tidak melakukan pengaturan apapun pada halaman edit data. Berikut contoh tampilan pada halaman tambah data:

4. Edit: Menampilkan Kolom Tertentu Hanya Pada Halaman Edit Data

Untuk menampilkan kolom tertentu hanya pada halaman edit data saja, maka gunakan method editFields(), misal pada method customers_management() yang ada pada file app\Controllers\Examples.php kita edit script nya menjadi berikut:

public function customers_management()
{
	$crud = new GroceryCrud();
    	$crud->setTable('customers');
    	$crud->editFields(['customerName', 'addressLine1', 'addressLine1']);
	$output = $crud->render();
	return $this->_exampleOutput($output);
}

Maka ketika kita buka halaman edit data data (klik tombol icon pensil pada tabel data), maka akan muncul kolom customerName, addressLine1, dan addressLine2, akan tetapi ketika membuka halaman tambah data maka semua kolom akan ditampilkan.

5. Add/Edit: Validasi Kolom

Untuk validasi isian kolom pada Grocery CRUD kita dapat menggunakan method setRule(), setRules(), dan requiredFields().

5.1. setRule()

Pada method setRule() Grocery CRUD menerapkan sistem yang berbeda antara versi Free dan versi Enterprise. Pada versi free, validasi dengan method setRule() mengikuti validasi pada codeigniter 4 yang dokumentasinya dapat dibaca disini. sedangkan method setRule() pada versi Enterprise menggunakan library Valitron.

5.2. setRules()

Method setRules() merupakan kombinasi dari method setRule(). Format penulisan method setRules() ini adalah sebagai berikut:

[
    'fieldName' => 'fieldName',
    'rule' => 'rule',
    'parameters' => 'parameters'
]

Format diatas berlaku baik pada versi free maupun versi enterprise, sebagai contoh:

$crud->setRules(
    [
        [
            'fieldName' => 'creditLimit',
            'rule' => 'min',
            'parameters' => '100'
        ],
        [
            'fieldName' => 'postalCode',
            'rule' => 'lengthBetween',
            'parameters' => ['4','6']
        ],
    ]
);

Pada contoh diatas berarti bahwa kolom creditLimit minimal memiliki jumlah karakter 100 karakter sedangkan kolom postal Code minimal jumlah karakternya adalah 4 sedangkan maksimal jumlah karakternya adalah 6.

5.3. requiredFields()

Method requiredFields() merupakan method bawaan dari Grocery CRUD. Method ini digunakan untuk memvalidasi bahwa kolom harus diisi, method ini dapat digunakan baik pada versi free maupun versi enterprise, dengan menggunakan method ini, maka:

1. Nama kolom isian akan diberi tanda bintang merah yang menandakan bahwa kolom tersebut harus diisi.
2. Akan dilakukan validasi client side, yang artinya sebelum data dikirim ke server makan akan dilakukan validasi dengan javascript.
3. Akan dilakukan validasi secara server side, yaitu setelah data dikirim ke server dan sebelum data disimpan kedalam database, server akan melakukan validasi.

Contoh penggunaan method ini ada pada method offices_management() yang ada pada file app\Controllers\Examples.php sebagai berikut:

 public function offices_management () {
        $crud = new GroceryCrud();
        $crud->setTable('offices');
        $crud->setSubject('Office');
        $crud->requiredFields(['city']);
        $crud->columns(['city','country','phone','addressLine1','postalCode']);
        $crud->setRead();

        $output = $crud->render();
        return $this->_exampleOutput($output);
 }

Ketika membuka halaman edit, label kolom City memiliki tanda asterik (*) yang menandakan bahwa kolom city harus diisi, ketika kolom tersebut tidak diisi dan di klik tombol Update changes maka akan muncul pesan error bahwa kolom city harus diisi dan inputan city akan memiliki garis tepi merah, sebagai berikut:

6. Menonaktifkan Add, Edit, dan Delete

Grocery CRUD memungkinkan kita untuk menonaktifkan fitur add, edit, maupun delete. Untuk menonaktifkan fitur add, maka kita gunakan method unsetAdd(), untuk menonaktifkan fitur edit kita gunakan method unsetEdit(), dan untuk menonaktifkan fitur delete, kita gunakan method unsetDelete().

Sebagai contoh pada method orders_management() file app\Controllers\Examples.php terdapat script terdapat script sebagai berikut:

public function orders_management() {
	$crud = new GroceryCrud();
        $crud->setRelation('customerNumber','customers','{contactLastName} {contactFirstName}');
        $crud->displayAs('customerNumber','Customer Name');
        $crud->setTable('orders');
        $crud->setSubject('Order');
        $crud->unsetAdd();
        $crud->unsetDelete();

        $output = $crud->render();
	return $this->_exampleOutput($output);
}

Pada script diatas terdapat baris method $crud->unsetAdd(); dan $crud->unsetDelete(); sehingga ketika data ditampilkan, maka tombol Add Record tidak muncul dan icon delete pada baris tabel juga tidak muncul. Jika kita paksakan untuk membuka halaman tambah data, maka akan muncul pesan error sebagai berikut:

VIII. Versi Upgrade

Grocery CRUD versi free telah kami kembangkan secara intensif sehingga memiliki tampilan yang lebih menarik dan lebih fresh. Di artikel ini, versi yang telah dikembangkan ini kami sebut sebagai versi upgrade.

Versi upgrade ini kami kembangkan di lingkungan pengembangan Admin Templace Codeigniter 4, tidak berdiri sendiri, sehingga untuk menggunakan versi upgrade ini, Sobat juga harus menggunkan Admin Template CI4.

Pada versi upgrade ini, kami menerapkan style Bootstrap 5 pada theme flexigrid dan datatables sehingga tampilan theme menjadi lebih menarik dan kekinian, selain itu, kami juga melakukan banyak update seperti menghilangkan penggunaan jQuery UI yang secara resmi sudah tidak dikembangkan lagi, menggunakan library datatables terbaru, menggunakan library datepicker terbaru, dll.

Berikut beberapa update yang kamui lakukan:

VIII.1. Menerapkan Style Bootstrap 5 Pada Grocery CRUD

Setelah menerapkan style Bootstrap 5 maka tampilan theme flexigrid menjadi seperti gambar berikut ini:

Selanjutnya untuk thema datatables, tampilannya menjadi seperti gambar berikut:

VIII.2 Menggunakan Flatpickr untuk data time picker

Secara default Grocery CRUD menggunakan jQuery UI untuk date time picker nya, tampilan date picker ini terlihat usang, pada versi upgrade ini, kami menggunakan library flatpickr sebagai date time pickernya sehingga terlihat menarik dan kekinian berikut contoh tampilannya:

VIII.3 Menggunakan Select2

Pada versi upgrade ini kami telah menerapkan library Select2 sebagai pengganti dropdown select sehingga tampilan dropdown select (baik single maupun multiple) menjadi lebih menarik dan kekinian. Contoh tampilannya adalah sebagai berikut:

VIII.4. Menggunakan Bootstrap Modal

Secara default Grocery CRUD menggunakan standard javascript alert, di versi upgrade ini, kami telah mengganti alert tersebut dengan bootstrap modal (library bootbox) sehingga lebih menarik dan modern. Contoh tampilannya adalah sbeagai berikut:

VIII.5. Menggunakan Sweetalert Untuk Notifikasi

Untuk notifikasi data yang dihapus, kami menggunakan library Sweetalert sehingga tampilan notifikasi menjadi lebih menarik. Adapun contoh tampilannya adalah sebagai berikut:

Demikian beberapa fitur dari versi upgare Grocery CRUD, untuk mencoba versi lengkapnya, silakan mencoba demo nya pada halaman https://codeliro.com/demo/admin-template-ci4/grocery-crud-flexigrid

VIII. Admin Template Codeigniter 4

Untuk mendapatkan Admin Template Codeigniter 4 (didalamnya termasuk Grocery CRUD Free) silakan kunjungi halaman Admin Template Dashboard Codeigniter 4 (CI4)

IX. Download

Jika sobat menginginkan Grocery CRUD versi free apa adanya, sobat dapat mendownloadnya dengan mengklik tombol berikut:

Note: File download tersebut didalamnya sudah termasuk Codeigniter versi 4.2.10

X. Penutup

Demikian tutorial Grocery CRUD semoga bermanfaat. Untuk cara penggunaan lebih lanjut, sobat dapat membaca dokumentasinya disini.

Salam,

Jagowebdev