Admin Template Dashboard Codeigniter 4 (CI4)

Setiap kali mengembangkan aplikasi, banyak coding yang ditulis berulang baik dari sisi tampilan (layout) maupun dari sisi server termasuk database. Hal tersebut tentu sangat melelahkan, untuk mengatasi permasalahan tersebut, kami memperkenalkan template aplikasi yaitu Admin Template Dashboard Codeigniter 4 (CI4)

Admin Template Dashboard Codeigniter 4
Admin Template Dashboard Codeigniter 4

Setelah sebelumnya kami memperkenalkan Admin Template PHP yang dikembangkan menggunkan PHP dengan struktur coding native,  kali ini kami akan memperkenalkan Admin Template PHP yang dikembangkan menggunakan framework PHP yang populer digunakan yaitu Codeigniter 4.

I. Fitur Admin Template Dashboard Codeigniter 4 (CI4)

Admin Template Codeigniter 4 yang kami kembangkan ini memiliki fitur yang sama dengan Admin Template PHP yang kami kembangkan menggunakan PHP Native diantaranya yaitu:

1. Login System

Seperti umumnya aplikasi, Admin Template Codeigniter 4 ini juga menyediakan fitur sistem login yang digunakan untuk melakukan pembatasan akses terhadap data.

Halaman Login
Halaman Login

2. User Manager

Admin Template ini sudah menyediakan module manajemen user sehingga Anda dapat dengan mudah mengelola user yang ada, baik menambah, mengedit dan menghapus user.

User Manager
User Manager – Admin Template Codeigniter 4

3. Menu Manager

Ketika membuat aplikasi, umumnya menu ditulis secara hard code (ditulis manual di coding nya), karena umumnya membuat menu by sistem merupakan pekerjaan yang rumit, mulai dari mengatur hierarki menu (parent dan child), menambahkan icon, membuat menu ter highlight ketika membuka halaman yang sesuai, menu yang hanya tampil untuk role tertentu, dll

Dengan aplikasi admin template ini, Anda dapat dengan mudah mengelola menu pada aplikasi, diantaranya:

  • Pengaturan hierarki menu dapat dilakukan dengan sangat mudah, cukup drag n drop pada menu yang ada;
  • Dapat dengan mudah melakukan pengaturan menu mana saja yang akan tampil ketika user login dengan role tertentu;
  • Icon dapat dipilih dengan mudah (tersedia ratusan icon dari Font Awesome 5);
  • Menu akan otomatis ter highlight ketika membuka halaman yang telah ditentukan;
  • Dan berbagai kemudahan lainnya.

Berikut contoh tampilannya:

Menu Manager Admin Template Dashboard Codeigniter 4
Menu Manager Admin Template Dashboard Codeigniter 4

4. Module Manager

Dalam Admin Template ini, halaman yang akan ditampilkan diassign ke module, dengan sistem ini, kita dapat dengan mudah mengelola halaman yang ada, seperti menambah halaman, mengaktifkan dan menonaktifkan halaman, membatasi akses halaman untuk user dengan role tertentu, menentukan judul halaman, dan lainnya. Semua itu dapat dikelola dengan mudah melalui halaman module manager.

Pengaturan Module Pada Admin Template Codeigniter 4
Pengaturan Module Pada Admin Template Codeigniter 4

5. Role Manager

Admin Template Codeigniter 4 ini dikembangkan dengan mengakomodir Role Based Access Control (RBAC) di mana akses data (membaca, mengedit, menghapus data – CRUD) ditentukan oleh role (peran) dari user yang login ke sistem.

Misal role Administrator diperbolehkan membaca, mengedit, dan menghapus semua data, sedangkan role user biasa hanya diperbolehkan untuk membaca dan mengedit data miliknya sendiri dan tidak diperkenankan menghapus data apapun.

Semua pengaturan hak akses tersebut dikelola by sistem, jauh lebih mudah dibanding cara konvensional dengan menuliskan code di aplikasi.

Aplikasi ini memungkinkan user untuk memiliki role lebih dari satu, misal user bisa memiliki role sebagai user biasa dan web developer, dengan model seperti ini, user dapat diberi kelompok akses data yang beragam.

Module Role Manager
Module Role Manager

6. Assign Role Ke User

Setelah mendefinisikan role, maka selanjutnya kita perlu meng-assign role tersebut ke user, sehingga dapat ditentukan, user berperan sebagai apa, apakah administrator, user biasa atau role lainnya. Dengan module assign role ke user, maka pengaturan ini dapat dilakukan dengan mudah.

Sebagaimana disebutkan sebelumnya, pada aplikasi ini, user dapat diberikan role lebih dari satu, misal user dapat diberi hak akses sebagai user biasa dan sebagai web developer.

Berikut ini contoh tampilan halaman Assign Role Ke User:

Assign Role Ke User
Module Assign Role Ke User

7. Assign Module Ke Role

Selanjutnya kita perlu mengatur halaman (module) yang boleh diakses oleh user, yaitu dengan meng assign module ke role, sehingga user dengan role tertentu hanya dapat mengakses halaman tertentu.

Sebagai contoh, user dengan role user biasa tidak diperkenankan mengakses halaman menu. Dengan pengaturan seperti itu, maka jika user tersebut hendak mengakses halaman menu, maka otomatis akan tertolak.

Untuk mengakomodir keperluan tersebut, kami telah menyediakan halaman untuk mengelola assign module ke role sehingga Anda dapat dengan mudah dapat meng assign module yang diinginkan ke role tertentu

Contoh tampilannya adalah sebagai berikut:

Assign Module ke Role
Assign Module ke Role

8. Assign Menu Ke Role

Agar sinkron antara module yang di assign ke role tertentu dengan menu yang tampil pada aplikasi, maka kita perlu meng assign menu ke role, sehingga menu yang ditampilkan sesuai dengan menu yang di assign ke role tersebut.

Misal, jika user dengan role user biasa tidak diperbolehkan untuk mengakses menu “Menu” maka ketika user tersebut login, menu tersebut tidak perlu kita tampilkan pada daftar menu aplikasi.

Untuk keperluan tersebut, Aplikasi sudah menyediakan halaman Assign Menu ke Role, sehingga Anda akan dengan mudah mengatur menu apa saja yang akan ditampilkan ketika user dengan role tertentu login ke dalam sistem.

Berikut contoh tampilan halaman Assign Menu ke Role

Assign Menu ke Role
Assign Menu ke Role

9. Setting Website

Tentu Anda ingin meyakinkan user bahwa aplikasi canggih yang Anda kembangkan adalah buatan Anda sendiri, hal ini biasanya terlihat dari judul aplikasi, deskripsi aplikasi, logo, icon, dll

Dengan Aplikasi Admin Template Codeigniter 4 ini, Anda dapat dengan mudah mengatur semua itu, sehingga akan terlihat oleh user bahwa aplikasi ini adalah hasil karya Anda sendiri.

Untuk mengatur semua itu, Anda tidak perlu lagi mengedit secara manual, Anda cukup mengakses halaman Setting Website dan semua pengaturan tersebut dapat dilakukan dengan mudah.

Berikut contoh halaman setting website

Halaman Setting Website
Halaman Setting Website – Admin Template Codeigniter 4

10. Personalisasi Layout

Kami memperhatikan setiap detil layout dari aplikasi yang kami kembangkan ini, sehingga selain canggih, juga terlihat menarik dan nyaman bagi user.

Tentu kriteria menarik dan nyaman bagi setiap user berbeda beda, untuk mengakomodir keperluan tersebut, kami telah menyediakan halaman Setting Layout, dimana user dapat melakukan personalisasi tampilan aplikasi, seperti melakukan pengaturan tema warna aplikasi, pengaturan jenis dan ukuran huruf, dll.

Anda, sebagai Administrator dapat melakukan pengaturan default untuk semua user, namun demikian, user dapat melakukan pengaturan sendiri sesuai dengan tampilan yang diinginkan.

Berikut contoh halaman Setting Layout:

Setting Layout - Admin Template Dashboard Codeigniter 4
Setting Layout – Admin Template Dashboard Codeigniter 4

11. Builtin Script

Admin Template Codeigniter 4 yang kami kembangkan ini sudah menyertakan beberapa contoh script CRUD penting yang sering digunakan, Script ini dapat Anda gunakan sebagai template, contoh, atau ide untuk mengembangkan aplikasi Anda

Beberapa contoh script CRUD yang tersedia diantaranya adalah:

CRUD Multiple File Upload

Script ini menyediakan contoh form input dengan file upload dinamis, dimana user dapat memilih file yang ingin diupload dengan jumlah yang fleksibel

Disamping itu, setelah file terupload, kita dapat meng edit (menu edit) apakah ingin menghapus file tersebut atau menambahkan file lainnya.

Contoh tampilan CRUD Multiple Fileupload adalah sebagai berikut:

Multiple Fileupload - Admin Template Dashboard Codeigniter
Multiple Fileupload – Admin Template Dashboard Codeigniter

CRUD Image Upload Dengan Preview Image

Script lain yang biasanya rumit adalah form input dengan pilihan file image yang disertai dengan preview image yang akan diupload.

Pada contoh script ini, preview image akan langsung muncul beserta dengan detail file image tersebut, yaitu nama file image, tipe image dan ukuran file image.

Image Upload Dengan Preview
Image Upload Dengan Preview

CURD Dengan options dinamis

Pada script ini, form input terdapat options dinamis, dimana user dapat memilih satu atau lebih options yang telah disediakan.

Pada contoh kali ini, user dapat memilih daftar nama penghadap dan nama penanggung jawab. Berikut contoh tampilannya:

Options Dinamis - Admin Template Codeigniter
Options Dinamis – Admin Template Codeigniter

CRUD Dengan Input Dinamis

CRUD selanjutnya yang cukup rumit adalah membuat form dengan input dinamis, dimana jumlah form input dapat ditambah dan dikurangi oleh user sesuai kebutuhan oleh user.

Menjadi rumit karena selain proses input data pada database yang dinamis, pada halaman edit kita juga perlu menyesuaikan form yang ada sesuai dengan banyaknya data yang diinput oleh user

Aplikasi ini telah menyediakan contoh input dinamis, sehingga dapat memberikan Anda ide bagaimana membuat form input dinamis

Input Dinamis
Input Dinamis

Data Tables

Hal berikutnya yang cukup rumit adalah penyajian data dalam bentuk tabel. Hal yang sering menjadi kendala adalah pagination dan pencarian data, atau fitur sorting data berdasarkan kolom tertentu (jika ada).

Untuk mengatasi masalah tersebut, tersedia plugin Data Tables. Data Tables telah menyediakan berbagai fitur penyajian data seperti pagination, sorting data berdasarkan kolom, searching data, dll.

Berikut ini contoh tampilan Data Tables pada Admin Template yang kami kembangkan

Data Tables Admin Template Codeigniter 4
Data Tables Pada Admin Template Codeigniter 4

Data Tables Ajax

Kendala penyajian data berikutnya adalah jika data yang disajikan jumlah nya banyak, misal ribuan, maka jika dilakukan menggunakan client side processing (tabel disajikan semua baru kemudian diatur layoutnya – paginationnya) maka akan sangat berat.

Untuk mengatasi hal tersbut, biasanya digunakan teknologi ajax, dimana data ditampilkan bertahap sesuai dengan jumlah data yang ingin disajikan per halaman. Hal ini dapat dilakukan dengan plugin Data Tables dengan request data Ajax.

Admin Template ini telah menyediakan contoh penyajian data ini, lengkap dengan manipulasi row yang akan ditampilkan seperti menampilkan gambar dan opsi EDIT dan DELETE pada setiap baris yang ditampilkan.

Berikut ini contoh tampilan Data Tables Ajax pada contoh script yang disertakan

Data Tables Ajax - Admin Templat Dashboard Codeigniter 4
Data Tables Ajax – Admin Templat Dashboard Codeigniter 4

12. Quality Code dan Database

Meskipun menggunakan framework, tidak semua programmer memiliki konsep dan pemahaman yang baik tentang coding yang berkualitas.

Admin Template Codeigniter 4 ini kami kembangkan dengan menerapkan coding best practice, dimana kode ditulis dengan baik dan efisien, sehingga mudah untuk Anda dikembangkan

Disamping dari sisi aplikasi, kami juga memperhatikan detil bagaimana database di desain sehingga Anda akan yakin dengan keandalan pada aplikasi yang akan Anda kembangkan.

Berikut struktur File dan Folder aplikasi:

Struktur Folder Admin Template
Struktur Folder Admin Template

Fitur Lain

Selain berbagai fitur menarik diatas, Admin Template ini juga memiliki fitur menarik lainnya, diantaranya:

  • Aplikasi ini menggunakan google font secara offline, sehingga Anda tidak perlu khawatir jika aplikasi ini dijalankan secara offline karena bentuk font akan tetap, tidak berubah;
  • Builtin Breadcrumb. Di setiap halaman yang ditampilkan akan muncul link breadcrumb sesuai dengan lokasi halaman tersebut;
  • Menggunakan berbagai plugin modern, seperti Bootstrap 4, Bootbox, Google Font, Data Tables, Fontawesome 5, Jquery 3, Swttalert 2, dll.
Breadcrumb
Breadcrumb

III. Live Demo Admin Template Dashboard Codeigniter 4 (CI4)

Agar memiliki gambaran seperti apa fungsionalitas dan tampilan dari aplikasi Admin Template Codeigniter 4 yang kami kembangkan, Anda dapat mencoba demo aplikasinya dengan mengklik tautan berikut ini:

IV. Investasi

Untuk mendapatkan Admin Template yang canggih ini, anda cukup join menjadi member premium Jagowebdev.com melalui halaman ini Setelah join Anda dapat langsung mendownload dan menggunakannya.

Benefit menjadi member premium adalah selain mendapatkan Admin Template ini, Anda juga dapat mendownload semua produk jagowebdev.com yaitu: ebook, cheatsheet, dan aplikasi lainnya.

Biaya investasi saat ini termasuk ringan, biaya dapat berubah sewaktu waktu seiring dengan content yang ditambahkan

Segera join sekarang

Register Sekarang

2 Feedback dari pembaca

Silakan tinggalkan komentar

Newsletter

Jadilah yang pertama tahu berita terbaru dari Jagowebdev.com

Like Us

  1. Trik Coding Cepat dan Efisien Pada PHP [Update 13/12/2020]

  2. PHP Admin Template Dashboard

  3. Prefix Tabel Pada Database, Perlukah?

  4. Same Origin Policy – Apa dan Bagaimana Mengatasinya?

  5. JSONP Dengan Javascript dan jQuery – Lintas Domain

  6. JSON Pada Javascript – Panduan Lengkap

  7. JSON Pada Dokumen HTML

  8. JSON Dari Database – PHP dan MySQL

  9. Memahami JSON Pada PHP

  10. Panduan Lengkap Memahami JSON