Admin Template Dashboard Codeigniter 4 merupakan admin template yang dikembangkan berbasis framework codeigniter 4 atau sering disebut CI4.

I. Builtin Module

Admin template ini sudah dilengkapi berbagai module umum yang umumnya digunakan sebagai basis pengembangan aplikasi, baik aplikasi sederhana maupun aplikasi yang kompleks, adapun module yang sudah disertakan adalah sebagai berikut:

1. Login System

Setiap aplikasi umumnya membatasi pengguna dengan user authentication menggunakan sistem login. Aplikasi admin template ini sudah dilengkapi dengan fitur tersebut, sehingga Anda tidak perlu repot repot membangun sistem login

2. User Manager

Fitur penting selanjutnya adalah module untuk mengelola user yang ada, baik menambahkan mengedit maupun menghapus user. Aplikasi ini juga sudah disertakan fitur untuk mengelola user

3. Menu Manager

Dalam suatu aplikasi, suatu hal yang rumit dilakukan adalah membuat sistem menu, dimana pengaturan hierarki menu (parent - child) dapat dilakukan secara mudah dan otomatis. Aplikasi ini sudah menyediakan module tersebut lengkap dengan pengaturan icon (terdapat pilihan ratusan icon dari Font Awesome 5) 

Berapa pengaturan yang dapat dilakukan pada module menu manager adalah sebagai berikut:

  1. Menambah, mengedit, menghapus menu yang ada.
  2. Menambahkan icon pada menu.
  3. Mengatur hierarki menu dengan mudah, cukup dengan drag and drop.
  4. Mengatur menu yang ditampilkan sesuai dengan role user yang login.

4. Module Manager

Pada Admin Template Codeigniter 4 yang kami kembangkan ini, setiap halaman/module dari aplikasi dapat dikelola dengan mudah melalui menu module manager, dengan demikian kita dapat dengan mudah menambah, mengedit, menghapus, maupun menonaktifkan module/halaman yang ada.

5. Role Manager

Pada admin template ini, setiap user momiliki role/peran tertentu yang nantinya role ini mempengaruhi halaman/module apa saja yang boleh diakses oleh user dengan role tersebut.

Aplikasi ini sudah menyediakan halaman role manager, dimana Anda dapat dengan mudah mengelola (menambah, mengedit, menghapus) role yang ada. Disamping itu, Anda juga dapat mengatur halaman default yang otomatis terbuka ketika user dengan role tertentu login ke dalam sistem.

6. Assign Role ke User

Pada halaman ini, Anda dapat dengan mudah meng assign role ke user. Admin template ini memungkinkan Anda untuk meng-assign lebih dari role ke satu user, misal user A memiliki role sebagai user biasa dan web developer. Dengan sistem seperti ini, pengaturan hak akses dapat dilakukan lebih fleksibel dibanding sistem dimana user hanya bisa memiliki satu role.

7. Assign Module ke Role

Pada umumnya aplikasi, setiap user memiliki role/peran dan setiap role memiliki hak akses berbeda beda. Hak akses (seperti melihat, menambahkan, mengubah, maupun menghapus data) setiap role harus dapat dikelola dengan mudah.

Dengan admin template ini, pengaturan hak akses tersebut dapat dilakukan dengan mudah. Melalui halaman Assign Module ke User, Anda dapat dengan mudah mengatur module/halaman apa saja yang diperbolehkan diakses oleh role tertentu.

8. Assign Menu ke Role

Pada module Assign menu ke role, Anda dapat dengan mudah melakukan pengaturan menu apa saja yang akan ditampilkan ketika user dengan role tertentu login ke dalam sistem.

Hal ini untuk mempermudah user mengakses module yang telah diassign ke role yang dimiliki oleh user tersebut, misal user dengan role Super User diperbolehkan untuk mengakses halaman user, maka menu user perlu kita assign ke role editor tersebut, sehingga ketika user dengan role Super User tersebut login, menu user akan muncul.   

9. Setting Website

Sebagai pengambang aplikasi, Anda tentu ingin meyakinkan user bahwa aplikasi yang Anda kembangkan adalah buatan Anda sendiri. Tenang saja, kami sudah memikirkan hal tersebut.

Aplikasi Admin template yang kami kembangkan ini, memungkinkan Anda untuk mengcustom material aplikasi seperti logo, favicon, header, footer, warna, dll, sehingga aplikasi akan terlihat uni k dan meyakinkan bahwa aplikasi tersebut merupakan ciptaan Anda sendiri

10. Personalisasi Layout 

Dalam mengembangkan aplikasi, kami memperhatikan dengan detil layout dari aplikasi sedemikian rupa sehingga aplikasi dapat terlihat menarik dan user friendly, yang tentunya akan membuat user betah berlama lama menggunakan aplikasi. 

Tentunya kriteria menarik ini berbeda beda bagi setiap user. Untuk mengakomodir hal tersebut, admin template codeigniter 4 ini telah menyediakan menu bagi user untuk mengkustomisasi layout dari aplikasi sesuai selera user tersebut. Adapun yang dapat dikustomisasi adalah:

  1. Warna tema aplikasi
  2. Warna sidebar
  3. Jenis dan ukuran huruf

II. Builtin Script

Selain berbagai module pengembangan aplikasi, admin template codeigniter 4 ini juga dilengkapi dengan berbagai contoh script, dari yang sederhana hingga yang kompleks. Dengan contoh script ini, Anda cukup melakkukan memodifikasi script yang ada sesuai dengan aplikasi yang anda kembangkan.

Selain itu, dengan berbagai contoh script yang ada, Anda akan memiliki gambaran bagaimana admin template ini bekerja sehingga dapat mempercepat learning curve ketika mengembangkan aplikasi dengan template ini.

Berikut ini beberapa contoh built in script yang ada:

1. CURD Multiple File Upload

Aplikasi ini telah disertakan form input data dengan file upload dinamis, yang artinya user dapat mengupload file dengan jumlah yang tidak terbatas. Setelah disubmit, user dapat mengedit file tersebut, apakah akan dihapus atau ditambahkan file lainnya

2. CURD Image Upload Dengan Preview Image

Script lainnya yang dapat digunakan adalah form upload image disertai dengan preview image. Pada form ini, setelah user memilih gambar yang ingin diupload, otomatis preview gambar tersebut akan muncul disamping data lainnya yaitu nama, jenis, dan ukuran file.

Selain itu, ketika melakukan editing data, preview gambar juga akan muncul dan dengan mudah dapat dilakukan perubahan data gambar (upload ulang gambar lainnya).

3. CURD Dengan Options Dinamis

Pada contoh script ini, form dilengkapi dengan options dinamis dimana user dapat memilih options lebih dari satu. Options dinamis pada form ini menggunakan library select2.

Pada halaman editing data, options yang telah dipilih ini akan muncul sesuai dengan data yang dipilih dan dapat dengan mudah dilakukan perubahan data.

4. CURD dengan Input Dinamis

CURD yang cukup rumit dilakukan adalah membuat form dengan input dinamis, dimana user dapat dengan mudah menambahkan/mengurangkan jumlah inputan yang ada. 

Aplikasi ini sudah disertai dengan contoh form dengan input dinamis, Anda cukup menyesuaikannya dengan kebutuhan aplikasi Anda.

5. Data Tables

Ketika menyajikan data dalam bentuk tabel, banyak hal yang perlu kita perhatikan, diantaranya pagination, search data, dan sorting data.

Hal tersebut akan terasa rumit jika kita lakukan secara manual, solusi mudahnya adalah menggunakan plugin data tables, dimana semua keperluan penyajian data dengan format tabel dapat dilakukan dengan mudah.

Aplikasi admin template ini telah menyediakan contoh script bagaimana cara menyajikan data menggunakan plugin data tables.

6. Data Tables Ajax 

Penyajian data menggunakan data tables biasa akan menjadi masalah jika data yang ditampilkan jumlahnya besar, misal ribuan. Kendala umum yang terjadi adalah browser menjadi sangat lambat ketika menampilkan tabel.

Hal ini disebabkan karena broser perlu merender dan menampilkan semua tabel terlebih dahulu kemudian dengan javascript mengaturnya sesuai dengan setting yang ada di data tables.

Untuk mengatasi hal tersebut, solusinya adalah menggunakan data tables dengan request ajax dimana data yang di load dan ditampilkan hanya yang diperlukan saja (sesuai dengan halaman yang ditampilkan)

Aplikasi ini sudah menyertakan contoh data tables dengan request AJAX, yang tentunya dengan coding yang efektif dan efisien, sehingga untuk menggunakannya sesuai kebutuhan, Anda tidak perlu melakukan banyak perubahan.

7. Smart Upload Excel 

Admin Template ini disertakan sampel script Smart Upload Excel. Script ini akan otomatis membaca baris pertama file excel sebagai kolom tabel dan baris berikutnya sebagai data yang akan diinsert ke dalam tabel. Dengan metode ini, Anda tidak perlu repot mendefinisikan nama tabel pada coding Anda.

Script sudah dioptimasi sehingga sebanyak apapun data excel yang diupload, Anda tidak akan mengalamai error yang disebabkan memory overload, untuk data yang besar, Anda cukup memperbesar Waktu eksekusi query saja. Di konfigurasi standar (120 second) script dapat mengupload data sebanyak 35.000 data

8. Smart Download Excel 

Script Smart Download Excel akan memudahkan Anda untuk membuat script untuk mengekspor data tabel database ke file excel. Anda cukup mendefinisikan nama tabel yang ingin diekspor datanya dan script akan otomatis menggenerate data tabel tersebut dan mengekspornya ke bentuk file excel.

Cara kerja script ini yaitu script akan membaca nama dan tipe data kolom tabel database kemudian menuliskannya pada baris pertama file excel, selanjutnya, pada baris berikutnya, script akan menulis data tabel tersebut sesuai dengan tipe data kolom.

9. PDF & Kirim Email 

Contoh script berikutnya adalah generate file PDF dari berbagai resource. Pada contoh script yang disertakan, PDF digenerate dengan menggabungkan berbagai gambar dan teks HTML.

Selain itu, file PDF hasil generate tadi juga bisa langsung dikirim via email via attachment. Email sudah mengakomodir berbagai konfigurasi server, mulai dari server standar (shared hosting, email hositng, GMail OAuth 2, maupun Amazon SES. 

10. RBAC 

Dilengkapi contoh script untuk penerapan RBAC. Untuk detil penerapan RBAC ini bisa dibaca melalui user manual aplikasi.

III. Quality Code dan Database

Sama sama menggunakan framework, coding antara satu programmer dengan programmer yang lain tentu berbeda disamping itu, tidak semua programmer memiliki pemahaman yang baik bagaimana coding yang berkualitas, efisien, baik dan benar.

Sebagaimana tradisi kami dalam mengembangkan aplikasi, Admin Template Codeigniter 4 ini kami kembangkan dengan prinsip coding best practice, dimana code ditulis dengan baik dan efisien, sehingga mempermudah Anda dalam mengembangkan aplikasi.

Selain coding dari sisi aplikasi, kami juga memperhatikan detil bagaimana database didesain dan dikembangkan, yang tentunya sesuai dengan kaidah desain database yang baik dan benar, dengan demikian Anda akan merasa tenang karena aplikasi yang Anda kembangkan adalah aplikasi yang handal, yang tidak membawa masalah di kemudian hari.

IV. Fitur Lain 

Selain berbagai fitur handal diatas, aplikasi Admin Template Codeigniter 4 CI4 yang kami kembangkan ini memiliki berbagai fitur menarik lainnnya yaitu:

  • Aplikasi menggunakan google font secara offline, sehingga bentuk font akan tetap baik ketika aplikasi dijalankan secara online maupun offline.
  • Builtin Breadcrumb. Dengan fitur ini, setiap halaman yang ditampilkan akan muncul link navigasi menuju halaman tersebut.
  • Menggunakan plugin modern yang sudah teruji keandalannya, diantaranya: Font Awesome 5, Bootstrap 4, Google Font, jQuery 3, Data Tables, Sweet Alert2, Tiny MCE 5, dll

V. HMVC

Aplikasi ini juga sudah disertakan versi HMVC (Hierarical Model View Controller) penjelasan lebih lanjut mengenai model HMVC ini dapat dibaca di: https://jagowebdev.com/hmvc-pada-codeigniter-4/

Note: Aplikasi ini aktif di kembangkan di maintain

Version History

Versi 1.0 (19 Desember 2020)

Initial release

Versi 1.1 (04 Januari 2021)

  • Perbaikan menu Setting Web  yaitu pada live preview background logo pada login dan pada aplikasi
  • Perbaikan bug: ukuran logo pada login dan aplikasi tidak menyesuaikan container
  • Perbaikan script multiple file upload, menjadi bisa edit judul file dan deskripsi
  • Perbaikan link pada hasil tampilan multiple fileupload
  • Perbaikan script multiple file options
  • Perbaikan user manual, penambahan contoh pembuatan module

Versi 1.5 (28 Januari 2021)

  • Penambahan sampel script Smart Upload Excel
  • Penambahan sampel script Smart Download Excel
  • Penambahan sampel script Ekspor PDF dan Kirim Email
  • Bug Fixes

Versi 1.6 (31 Januari 2021)

  • Perbaikan mendasar pada class dan method terkait RBAC.
  • Penambahan contoh script penerapan RBAC. Detil penerapan RBAC dapat dibaca di user manual aplikasi.

Versi 1.6.1 (01 Februari 2021)

  • Perbaikan bug pada module user: data tables pada view user

Versi 1.6.2 (04 Februari 2021)

  • Perbaikan menu Website Setting, upload image

Versi 1.6.3 (17 Februari 2021)

  • Perbaikan fitur Remember Me
  • Menggabungkan script App/Controllers/Base.php ke file App/Controllers/BaseController.php
  • Perbaikan module logout
  • Perbaikan module Setting Website
  • Perbaikan tabel database

Versi 1.6.4 (22 Februari 2021)

  • Perbaikan fitur image upload (bisa hapus gambar)
  • Perbaikan menu update profil user dan module menu Image Upload
  • Bug Fix: Data profil (termasuk profil picture) di menu bar tidak langsung terupdate ketika profil diupdate

Versi 1.7 (07 Maret 2021)

  • Penambahan fitur sistem registrasi user
  • Penambahan fitur reset password
  • Penambahan fitur kirim ulang link aktivasi
  • Penambahan menu setting registrasi
  • Penambahan fitur custom CSRF
  • Pemisahan beberapa fungsi pada app/Controllers/BaseController.php ke app/Filters/Bootstrap.php
  • Perbaikan beberapa bug
  • Penambahan content pada user manual aplikasi

Versi 1.8 (09 Maret 2021)

  • Update Codeigniter ke versi 4.1.1.
  • Update kompatibilitas ke PHP versi 8.
  • Update library MPDF ke versi terbaru.
  • Bug fix: Membuat menu tanpa mengassign module.
  • Bug fix lainnya

Versi 1.9 (01 April 2021)

  • Penambahan module grafik
  • Bug Fixes

Versi 1.9.1 (18 April 2021)

  • Penambahan nomor urut pada data tables ajax
  • Disable sort pada kolom no urut dan kolom action (module datatables dan datatables ajax)
  • Bug fixes.

Versi 2.0.0 (31 Mei 2021)

Penambahan sampel script sebagai berikut:

  • Penambahan sampel script File Picker
  • Penambahan sampel script Gallery
  • Penambahan sampel script Drag and Drop
  • Penambahan sampel script Artikel dengan TinyMCE sebagai WYSIWYG editor 
  • Penambahan sampel script Stream Download

Penambahan plugin sebagai berikut:

  • Flatpicker
  • Dropzone
  • JWD File Picker
  • Prism JS
  • TinyMCE
  • Dragula

Perbaikan beberapa bug diantaranya:

  • Perbaikan datatables ajax pada login user
  • Perbaikan penambahan menu sehingga support menu eksternal (tanpa module)

Versi 2.1.0 (03 Juli 2021)

  • Update Code Igniter ke versi terbaru 4.1.3
  • Memperbaiki bug pada CSRF Token dimana sering muncul pesan error Token Tidak Sesuai
  • Perbaikan module data tables, add/edit data error ketika disertakan image
  • Penambahan button Copy, Expor Excel, Expor CSV, dan Expor PDF pada module Data Tables

Versi 2.1.1 (31 Juli 2021)

  • Perbaikan bug: setelah login redirect ke halaman default
  • Perbaikan bug: global cek role action sebelumnya masih menampilkan halaman yang direstrict
  • Perbaikan module Role yang error ketika belum ada module yang di assign ke role tersebut
  • Ditambahkan versi HMVC

Versi 2.2.0 (17 Agustus 2021)

  • Update Framework Bootstrap v5.1.0
  • Update Framework jQuery v3.6.0
  • Update Library Paragonie v2.2.0
  • Bug fixes

Versi 2.2.1 (30 Agustus 2021)

  • Update datatables terbaru v1.11.0
  • Update datatables bootstrap 5
  • Bug Fixed: Contoh module Data Tables 
  • Bug Fixed: Upload excel error jika ada kolom excel yang kosong
  • Bug Fixed: Datatables error ketika data kosong. 
  • Bug Fixed: Datatables upload image error.
  • Bug Fixed: Role user (login user) error ketika membuka datatables.
  • Bug Fixed: Menu tidak aktif tetap muncul

Screenshot

Comment

Silakan login untuk meninggalkan komentar
  • Mas masih belum bisa ya, untuk chartnya apabila datanya tidak ada harusnya gak muncul datanya di chart

    • Belum mas, bisa dicoba dibuat logic nya mas, misal:

      if (empty($data)) {

      echo 'Data tidak ditemukan';

      }

  • Ada Peringatan seperti ini kenapa ya?

    Warning: require_once(D:\ci4\public\index.php): failed to open stream: No such file or directory in D:\ci4\system\Commands\Server\rewrite.php on line 45

    Fatal error: require_once(): Failed opening required 'D:\ci4\public\index.php' (include_path='\xampp\php\PEAR') in D:\ci4\system\Commands\Server\rewrite.php on line 45

    • HafidzVIP
    • 2021-08-24 22:09:47

    Sejak februari 2021 sampai sekarang menggunakan templat ci4 ini saya sangat apresiasi dengan respon dan update dari admin.

    harapan saya kedepanya, agar templat ini bisa menjadi basic project yg kebih komplek kiranya admin dapat mempertimbangkan untik menambah fitur REST API. 

     

    sehingga data dari aplikasi ini bisa dengan mudah di konsumsi oleh project lain ????

    • Terima kasih banyak atas apresiasinya mas dan terima kasih atas masukan nya tentang REST API, akan kami pertimbangkan untuk development berikutnya

  • pak yang terbaru ada error , 

    untuk halaman user , menu datatables : https://prnt.sc/1qgsgys , dan datatables ajax https://prnt.sc/1qgshec

    • Terima kasih informasinya mas, akan kami perbaiki pada release berikutnya

  • pak agus, Bagaimana cara mengubah halaman tampilan default (builtin/user) setelah user pengguna berhasil login ?
    contohnya mengubah halaman builtin/user menjadi halaman beranda.

    terimakasih

  • selamat pagi pak agus,

    ijin bertanya. jika menampilkan tabel menggunakan where dengan 2 kondisi kolom yang berbeda bagaimana ya pak?

    pada script BaseController.php

    public function whereOwn($column = null)
        {
            if (!$column)
                $column = $this->config->checkRoleAction['field'];

            if ($this->actionUser['read_data'] == 'own') {
                return ' WHERE ' . $column . ' = ' . $_SESSION['user']['id_user'];
            }

            return ' WHERE 1 = 1 ';
       }

     

    DataModel yang akan ditampilkan

    public function getSiswa($where = null)
        {
            $sql = 'SELECT * FROM siswa' . $where;
            $result = $this->db->query($sql)->getResultArray();
            return $result;
       }

    Saya coba query bisa,.

     

    Jika akan menambahkan filter data selain kolom id_user_created menggunakan kolom is_valid = 0  bagaimana pak?

    Terimakasih pak,.

    • RafliVIP
    • 2021-08-18 17:22:24

    menu yang ini tidak ada judul role nya pak.

    • RafliVIP
    • 2021-08-11 19:45:13

    Gimana cara membuat Role baru mas?

    Saat di submit error.

    mysqli_sql_exception #1048

    Column 'id_module' cannot be null 

     

    • Error tersebut terjadi karena id_module pada tabel role tidak boleh berisi NULL harusnya bisa berisi NULL, coba download yang terbaru mas, load ulang databasenya pakai sql yang baru. 

        • RafliVIP
        • 2021-08-13 22:40:14

        ErrorException

        hash_equals(): Expected known_string to be a string, null given

        APPPATH\Libraries\Auth.php at line 100

        sudah download yang terbaru, muncul error seperti diatas

        • Itu bug mas, akan kami perbaiki di release berikutnya, terima kasih

  • maaf mas boleh tanya

    saya simpen project seperti di bawah ini 

     

    di app/Config/App.php seperti ini

     

    di app/Config/Datanase.php seperti ini

     

    saya jalanin http://localhost:8181/admin_template_hmvc halaman nya bisa nampil

    tapi pas saya pake php spark serve

     

    lalu buka halama pake link http://localhost:8080/ ada error 

     

    mohon pencerahannya mas

    • Desainnya seperti itu mbak, pakainya apache langsung, bukan spark, karena assets nya kita load dari public (dibagian header.php), misal http://localhost/hmvc/public/images/jagowebdev.png, jika menggunakan spark akan error karena spark start nya di folder public.

  • Sore Pak Agus

    mau tanya kenapa saya sudah rubah 

    app/config/app.php sepert ini kenapa masih error ya

     

     

    errornya seperti ini

     

    • Desainnya pakainya apache langsung, bukan spark, karena assets nya kita load dari public (dibagian header.php), misal http://localhost/hmvc/public/images/jagowebdev.png, jika menggunakan spark akan error karena spark start nya di folder public.

  • Dear Mas Agus,

    erorr ini kenapa ya? padahal controller regitster nya ada