Cara membuat dashboard admin dengan bootstrap

Ketika mengembangkan sebuah aplikasi berbasis web dengan PHP dan MySQL, maka hal pertama dan mendasar yang kita perlukan adalah membuat wadah dari aplikasi tersebut. Nah pada kesempatan kali ini, kita akan membahas mengenai salah satu wadah yang dapat digunakan yaitu PHP Admin Template.

I. Tentang PHP Admin Template

Di internet, banyak sekali kita temui berbagai macam admin template yang siap digunakan, namun demikian umumnya hanya front end nya saja, kita perlu membuat backend nya dari awal, dan juga, banyak fitur yang tidak terpakai, sehingga malah cuman boros space.

Untuk itu, pada kesempatan kali ini kami mencoba untuk memberi kemudahan dengan mengembangkan PHP Admin Template, yang berupa Admin Template yang dikembangkan menggunakan bootstrap framework untuk CSS nya dan jQuery untuk framework javascriptnya.

Baiklah, mari kita langsung lihat detail PHP Admin Template yang kami kembangkan:

II. Environment Yang Digunakan

PHP Dashboad Admin template kami kembangkan menggunakan software sebagai berikut:

  • PHP 8 (Tested XAMPP 7.4.0 – PHP 7.4.10 dan XAMPP 8.0 – PHP 8.1.2) dan bisa untuk versi dibawahnya, minimum versi 5.4 dengan database MariaDB / MySQL (Tested XAMPP 7.4.10 dan XAMPP 8.1 – Maria DB 10.4.x).
  • Metode pemrograman menggunakan metode struktural
  • Menggunakan Framework Bootstrap terbaru, yaitu: 5
  • Menggunakan Framework Javascript jQuery terbaru, yaitu 3.6
  • Menggunakan HTML 5
  • Menggunakan CSS 3
  • Menggunakan Font Awesome 5
  • Berbagai plugin PHP, Javascript, dan CSS

Rencananya kedepan akan terus dikembangkan sehingga kompatibel dengan versi terbaru masing masing komponen tersebut

III. Fitur Admin Template

PHP Admin template yang kami kembangkan sudah cukup memadahi untuk And mulai mengembangkan aplikasi. Fitur yang ada antara lain adalah sebagai berikut:

1. Login System

Seperti pada umumnya aplikasi yang memiliki fitur login, di aplikasi ini kami juga menyediakan halaman untuk login user. Fitur login ini bersifat offline dimana terdapat satu user administrator kemudian user tersebut dapat menambahkan user lain dengan role tertentu.

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Admin-Template-Codeigniter-4-Login-System

2. Sistem Registrasi

Aplikasi Admin template ini dilengkapi dengan sistem registrasi dimana user dapat secara mandiri melakukan registrasi. Form registrasi telah dilengkapi dengan password strength meter yang dapat digunakan sebagai indikator kekuatan password.

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Form Registrasi Akun

Pengaturan registrasi yang ada memungkinkan user untuk melakukan registrasi dengan metode verifikasi:

  • Email (melalui email konfirmasi). Setelah mendaftar, user akan memperoleh link aktivasi akun yang dilikim ke email yang didaftarkan
  • Langung. Setelah mendaftar, akun langsung aktif, user dapat langsung login ke sistem.
  • Verifikasi Admin. Setelah mendaftar, akun perlu diaktifkan oleh Administrator.
Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Setting Registrasi

3. Sistem Lupa Password (Reset Password)

Di sistem yang ideal, tidak seorangpun tahu password user yang terdaftar, bahkan administrator sistem maupun database Administrator tidak boleh tahu. Kalaupun bisa tahu, hanya sebatas hashed password yang tersimpan pada database (yang mustahil untuk diketahui password yang sebenarnya).

Karena tidak ada yang tahu password user, maka sekali lupa, tidak akan ada yang bisa memberitahu password user tersebut. Untuk mengakomodir hal tersebut, maka perlu dibuat menu reset password.

Cara kerjanya adalah user menginput alamat email yang digunakan saat user mendaftar ke sistem.

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Form Reset Password

Selanjutnya, sistem akan mengirim link reset password ke email user, melalui link tersebut, user diarahkan ke halaman reset password untuk membuat password baru.

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Form Buat Password Baru

Adakalanya ketika user melakukan registrasi, link aktivasi tidak terkirim ke email user, sehingga user tidak bisa melakukan aktivasi akun. Untuk mengakomodir hal tersebut, telah disediakan module untuk kirim ulang link aktivasi.

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Form Kirim Ulang Link Aktivasi

5. User Manager

Didalam aplikasi Admin template ini, sudah tersedia halaman user manager, dihalaman ini administrator dapat dengan mudah mengelola user yang ada di sistem.

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Halaman User Manager

6. Menu Manager

Pada umumnya admin template, jika ingin menambahkan menu kita harus menulis code secara manual ke file HTML yang ada, dan jika ada perubahan maka kita juga harus mengubah code yang telah kita tulis tersebut

Pada PHP Dashboard yang kami kembangkan ini, sudah tersedia modul menu manager, dimana kita dapat dengan mudah membuat dan mengelola menu yang ada.

Menu manager ini juga sudah dilengkapi fitur drag and drop yang akan mempermudah mempermudah Anda dalam menyusun hirarki menu.

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Halaman Menu Manager

Selain itu tersedia ratusan pilihan icon Fontawesome 5 yang akan nenambah menarik menu yang anda buat

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Edit Menu

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Edit Menu – Pilih Icon

Fitur menarik lainnya adalah, menu yang ada di PHP Admin Template ini juga sudah otomatis ter highlight sesuai dengan halaman yang saat itu dibuka, termasuk sub menu yang ada di dalamnya.

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Highlight Menu Pada Menu Manager

7. Module Manager

Cara paling mudah mengelola halaman aplikasi adalah dengan menggunakan module untuk assign halaman. Aplikasi PHP Admin Template ini sudah menggunakan module untuk setiap halaman yang ditampilkan.

Dengan module manager ini, kita dapat dengan mudah mengatur module apakah ingin mengaktifkan, menonaktifkan module maupun menambah atau menghapus module.

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Halaman Module Manager Pada PHP Admin Dashboard Template

8. Role Manager

PHP Admin Template yang kami kembangkan menggunakan sistem Role Based Access Control untuk mengatur hak akses dari setiap user. Pada module Role ini, kita dapat mengatur role (peran) user yang ada di aplikasi, misal apakah user bertindak sebagai Administrator, User biasa, atau Web Developer, dll

Role ini nantinya menentukan hak akses ke setiap data yang ada di setiap module. Hak akses ini meliputi boleh tidaknya membaca data, menambahkan data, mengubah atau menghapus data (CURD) baik semua data yang ada maupun data milik user itu sendiri.

Misal Administrator boleh mengubah dan menghapus semua data, sedangkan user biasa hanya boleh mengubah datanya sendiri namun tidak boleh menghapus data yang ada, meskipun data tersebut miliknya.

Berikut ini contoh tampilan halaman role manager

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Halaman Role Manager

9. Assign Role Ke User

Berikutnya kita perlu memberikan role kepada masing masing user, agar masing masing user memiliki hak akses sesuai yang diinginkan, misal user A kita beri role administrator, user B sebagai web developer, dll.

Untuk keperluan tersebut telah tersedia module Assign Role ke User. Di module ini, dengan mudah kita dapat mengelola role dari masing masing user.

Berikut ini adalah contoh tampilannya

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Halaman Assign Role ke User

10. Assign Role ke Module

Selanjutnya, kita juga perlu menentukan role apa boleh meng akses module apa, sehingga jika role tersebut tidak kita beri akses, misal ke halaman (module) menu, maka ketika user dengan role tersebut mengakses halaman menu maka otomatis akan tertolak.

Atau role tersebut hanya kita beri akses ke module tertentu namun hanya boleh membaca data miliknya sendiri, maka ketika user dengan role tersebut membuka halaman tersebut, maka user hanya melihat data miliknya sendiri (data yang dia input) dan tidak bisa membaca data user lain. Disamping itu user tidak bisa membuat, mengubah, maupun menghapus data yang ada.

PHP Admin Template yang kami kembangkan sudah menyediakan module untuk mengelola itu semua, sehingga Anda dapat dengan mudah mengatur hak akses role ke module.

Berikut contoh tampilannya.

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Halaman Assign Role ke Module

11. Assign Role ke Menu

Agar mudah mengakses module yang ada, maka kita perlu menyediakan menu, sehingga user tinggal mengklik menu yang ada, maka otomatis halaman module terbuka sesuai link yang ada di menu tersebut

Nah, agar menu yang tampil sesuai dengan module yang telah diassign ke role, maka kita perlu meng assign role ke menu, sehingga ketika user login, menu yang muncul sesuai dengan module yang di assign ke role user tersebut.

Mungkin Anda yang bertanya, kenapa tidak langsung di link kan saja antara menu dan module, sehingga kita cukup mengatur role ke module saja, menu yang muncul ya otomatis sesuai dengan module yang di assign ke role tersebut.

Jawabnya tidak bisa

Karena menu bisa bervariasi, menu bisa memiliki sub menu dan bisa juga menu tidak link ke module, misal menu yang hanya berfungsi sebagai referensi atau yang link ke halaman eksternal. Dengan demikian, mau tidak mau kita perlu secara semi manual meng assign role ke menu.

Berikut contoh tampilan halaman assign role ke menu

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Halaman Assign Role ke Manu

12. Setting Website

Tentu ketika mengembangkan aplikasi kita ingin aplikasi tersebut bersifat unik, yang beda dengan yang lain. Pada admin template pada umumnya, kita harus mengubah code yang sudah ada dengan cara trial dan error. Dan jika ada perubahan lagi kita perlu membuka code editor mencari baris code yang sesuai kemudian merubahnya

Ribet…..

Pada aplikasi PHP Admin Template yang kami bangun ini, Anda tidak perlu ribet melakukan semua itu, semua nya dapat dengan mudah Anda atur melalui module Setting Website, mulai dari logo Login, Logo aplikasi, nama aplikasi, Fav icon, dan lain lain.

Berikut contoh tampilan halaman setting website:

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Setting Website Untuk Halaman Login

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Setting Website Pada Helaman Utama

13. Setting Layout

Disamping kemudahan manajemen content, kami juga memperhatikan dengan detail bagaimana aplikasi dapat menarik untuk dilihat, lebih personalized bagi user.

Untuk itu, kami telah menyediakan menu untuk mengatur layout/tampilan dari aplikasi, mulai dari warna header, warna sidebar, jenis huruf (font family), ukuran huruf (font size), dll

Anda dapat melakukan pengaturan layout default yang akan digunakan oleh semua user, namun demikian, user juga dapat mengatur sendiri tampilan yang mereka sukai, sehingga ketika mereka login, tampilan yang muncul sesuai dengan pengaturan yang telah mereka buat

Berikut contoh halaman pengaturan tampilan

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
PHP Admin Template – Pengaturan Tampilan

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Tampilan PHP Admin Template – Grey Dark

14. Lingkungan Pengebangan

PHP Admin Template mendukung lingkungan pengambangan development dan production

Pada lingkungan pengembangan production, jika terjadi error pada aplikasi, hanya ditampilkan pesan kesalahan umum, misal seperti gambar berikut ini:

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Lingkungan Pengambangan Production

Sedangkan pada lingkungan pengembangan development, akan ditampilkan pesan error sesuai dengan pesan kesalahan yang ada, misal seperti gambar berikut:

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Lingkungan Pengembangan Development

15. Quality Code dan Database

Disni, kami selalu menerapkan best practice baik dari sisi penulisan code maupun penyusunan database.

Code PHP Admin template ini dibuat dengan rapi dan terstruktur, termasuk penempatan file dan foldernya sehingga akan mempermudah Anda ketika mendevelop aplikasi menggunakan template ini.

Disamping itu, database juga didesain sesuai dengan kaidah desain database yang baik dan benar, dengan demikian pengembang akan lebih yakin dengan keandalan aplikasi yang akan dikembangkan.

Berikut struktur folder aplikasi:

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Struktur Folder PHP Admin Template Dashboard

IV. Built In Script

PHP Admin Template yang kami bangun sudah menyediakan beberapa script penting yang akan sangat membantu Anda mengembangkan fitur aplikasi. Beberapa diantaranya adalah script CRUD dinamis, script upload dan download excel, expor PDF, kirim email, dll

1. CRUD Form dengan multiple file upload

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Admin Template – Multiple File Upload dengan Deskripsi File

Dengan module ini, Anda akan mudah meembuat inputan dengan file upload dinamis yang biasanya akan banyak memakan waktu jika dibuat dari awal, karena selain input, kita juga harus memikirkan bagaimana caranya file tersebut di edit dan dihapus.

2. CRUD Form dengan image upload disertai preview image

Module ini menyediakan Form dengan file upload sudah disertai dengan preview image yang akan diupload.

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Admin Template – Image Upload dengan Preview

Pada menu edit, maka gambar yang telah diupload sebalumnya akan muncul, jika ingin diganti, maka akan muncul preview image yang akan diupload.

3. CURD Form dengan options dinamis

Module ini menyajikan CRUD data dengan options dinamis, dinama dimana jumlah data yang dipilih bisa bervariasi

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Admin Template – Form Dinamis – Multiple Options

Pada contoh diatas, user dapat memilih siapa saja yang menjadi penanggung jawab.

4. CRUD Data dengan Input Dinamis

Admin dashboard yang kami bangun juga menyediakan module dengan input form dinamis

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Admin Template – Input Dinamis

Pada contoh diatas, user dapat menambahkan data nama penghadap dengan jumlah banyak sekaligus

5. Chain Select (Chained Dropdown) Dengan PHP, MySQL, dan Javascript jQuery

Aplikasi Admin Template yang kami kembangkan ini telah dilengkapi dengan contoh script chain select (chained dropdown) dimana user memilih wilayah secara berjenjang mulai dari propinsi, kabupaten, kecamatan, dan kelurahan. Dengan contoh script ini akan memudahkan Anda ketika ingin menyimpan data alamat. Dengan contoh script chain select ini, Anda tidak perlu repot repot membuat chain select dari awal

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap

Chain select ini menggunakan teknologi ajax, cara kerjanya adalah: pertama tama user memilih data propinsi, berdasarkan data propinsi tersebut, sistem mengambil data kabupaten dari server untuk kemudian ditampilkan ke user dalam bentuk menu dropdown, setelah user memilih data kabupaten, sistem mengambil data kecamatan dari server dan menampilkannya ke user, terakhir, berdasarkan data kecamatan tersebut, sistem mengambil data kelurahan dari server dan menampilkannya ke user.

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap

Chain select ini menggunakan data wilayah propinsi, kabupaten, kecamatan, dan kelurahan offline (disertakan dalam aplikasi admin template). Data ini telah disesuaikan sehingga memiliki struktur yang baik yang mudah dan siap untuk digunakan sehingga Anda tidak perlu repot repot mencarinya di internet.

6. Data Tables

Salah satu hal yang rumit terkait penyajian data adalah adalah penyajian data dalam bentuk tabel, karena minimal kita harus menyusun layout tabel, membuat pagination, membuat menu pencarian, belum lagi jika perlu menambahkan sorting data berdasarkan kolom tabel. Namun demikian, semua kerumitan tersebut diatas dapat di atasi dengan mudah mengunakan plugin data tables.

PHP Admin Template yang kami kembangkan telah menyertakan contoh penggunaan plugin data tables dengan pemrosesan data client side, dengan tambahan kolom foto dan kolom action yang berisi tombol edit dan delete, kolom foto dan action ini telah didesain sehingga tidak dapat disort. Berikut contoh tampilannya:

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Data Tables Pada PHP Admin Template

7. Data Tables Ajax Berbasis PHP dan MySQL

Kelemahan data tables client side adalah ketika data yang ditampilkan jumlahnya banyak, misal ribuan rows, maka pemrosesan tabel akan sangat lambat karena selain menunggu semua data di load terlebih dahulu, Data Tables harus memparsing tabel dengan jumlah row yang sangat banyak

Kelemahan tersebut dapat diatasi menggunakan Data Tables dengan pemrosesan data server side, dimana data yang di load hanya data yang diperlukan saja. Admin Template yang kami kembangkan telah dilengkapi dengan contoh script tersebut lengkap dengan manipulasi data pada tabel seperti menampilkan gambar dan menambahkan tombol edit dan delete. Selain itu contoh script ini juga sudah mengakomodir kolom dengan pengaturan dinamis seperti mendisable sort untuk kolom nomor, foto, dan action, sehingga kolom tersebut tidak dapat disort. Dengan contoh script ini, Anda akan mendapatkan ide bagaimana menerapkan Data Tables pada PHP Admin Template.

Perlu Anda ketahui, contoh script Data Tables Ajax ini kami desain sedemikian rupa sehingga ringkas, efektif dan sangat efisien, sehingga dapat Anda jadikan template jika sewaktu waktu Anda ingin menampilkan data menggunakan Data Tables dengan pemrosesan server side (ajax)

Berikut ini contoh tampilannya.

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Data Tables Ajax Pada PHP Admin Template

8. Smart Upload Excel

Script php upload excel yang kami sertakan akan memudahkan Anda membuat script upload excel dengan php. Script didesain agar dapat mengupload banyak data sekaligus, di server konfigurasi standar (max_execution_time = 120), dapat mengupload hingga 40 ribu data. Script upload juga otomatis mendeteksi baris excel yang nantinya akan digunakan sebagai nama kolom tabel database, sehingga Anda tidak perlu repot menenentukan kolom kolom yang ingin diinsert datanya.

Dengan desain script yang ada, Anda tidak perlu khawatir terjadi out of memory karena banyaknya data yang diupload, Anda cukup menyesuaikan waktu eksekusi saja (max_execution_time) jika data excel yang diupload jumlahnya terlalu banyak.

Berikut ini contoh tampilannya

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Contoh Script PHP Upload Excel Dengan Jumlah Data Besar

9. Smart Download Excel

Script php download/expor excel yang kami sertakan akan memudahkan Anda mengembangkan script PHP untuk meng ekspor data dari database ke file excel. Script didesain agar dapat menulis data ke file excel dengan jumlah yang besar, di server konfigurasi standar (max_execution_time = 120), dapat mengekspor data hingga 100.000 lebih data.

Script ini akan otomatis mengambil data semua nama kolom tabel, kemudian menjadikannya sebagai baris pertama excel, selanjutnya isi tabel akan ditulis dibaris kedua dan seterusnya. Program juga otomatis mendeteksi tipe data kolom tersebut sehingga tipe data pada output file excel akan lebih akurat.

Dengan desain script yang ada, Anda tidak perlu khawatir terjadi out of memory karena banyaknya data yang didownload, Anda cukup menyesuaikan waktu eksekusi saja (max_execution_time) jika data excel yang diupload jumlahnya terlalu banyak.

Berikut ini contoh tampilannya

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Smart Ekspor Excel – PHP Ekspor Database ke Excel Dengan Jumlah Besar

10. Kirim Email

Admin Template ini sudah dilengkapi smart tool yang akan memudahkan Anda untuk mengirim email. Untuk dapat mengirim email Anda hanya perlu melakukan sedikit pengaturan, tidak perlu ribet.

Aplikasi ini telah mendukung berbagai provider untuk mengirim email, yaitu Shared Hosting, Email Hosting, GMAil Standard (Less Secure Application), GMail OAuth2, dan AmazonSES.

Pada contoh script yang disertakan, script dapat mengirim HTML email dengan attachment berupa file PDF menggunakan provider email hosting dengan konfigurasi standar.

Berikut ini contoh tampilannya

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
PHP Kirim Email dengan PHPMailer dan Oauth2 Google

11. Ekspor PDF

Pada Admin Template ini, tersedia juga contoh script untuk ekspor data ke PDF. Contoh script kali ini adalah menggenerate kartu identitas (dengan menggabungkan beberapa gambar dan teks) menjadi sebuah file pdf, file pdf hasil generate tersebut otomatis akan terdownload.

Berikut ini contoh tampilannya

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Generate File PDF Dengan PHP

12. PHP Javascript Charts

Pada kondisi tertentu kita perlu membuat laporan berupa chart atau grafik dari data hasil pengolahan database. Aplikasi Admin Template ini telah dilengkapi contoh script PHP untuk mengambil data dari database kemudian menampilkannya dalam bentuk grafik/chart menggunakan library javascript.

Di internet tersedia banyak library untuk menampilkan chart/grafik, yang pasti akan membuat Anda bingung untuk memilih. Disini, kami telah memilihkan untuk Anda library chart terbaik yang free untuk digunakan baik untuk tujuan komersial maupun non komersial, yaitu ECharts, Apex Charts, dan Charts.js

Berikut contoh tampilan bar chart dan pie chart dari masing masing library tersebut.

Contoh tampilan ECharts

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
PHP – Javascript Chart ECharts

Contoh tampilan Amex Charts

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
PHP – Javascript Chart ApexCharts

Contoh tampilan Chartjs

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
PHP – Javascript Chart Chartjs

Data dari contoh grafik diatas diambil dari database secara dinamis menggunakan PHP. Script Javscript untuk menampilkan grafik juga telah didesain sedemikian rupa sehingga dapat menampilkan chart dengan atribut yang lebih informatif.

Dari ketiga library diatas, kami merekomendasikan library Echart karena library ini memiliki fitur yang lengkap. Jika Anda ingin menggunakan yang simpel, dapat menggunakan AmexChart atau Chart.js, menurut kami, Amex Chart lebih baik dibanding Chart.js karena memiliki fitur yang lebih komplit.

13. File Picker

Aplikasi Admin Template ini telah kami lengkapi dengan plugin Jwd File Picker, plugin yang kami kembangkan sendiri. Plugin ini bermanfaat untuk memudahkan Anda memilih file untuk berbagai keperluan, seperti file image untuk gallery, file untuk halaman download file, file image untuk artikel, dll. Selain itu, plugin ini juga telah dilengkapi dengan drag n drop file uploader.

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Plugin File Picker – File Manager

Beberapa fitur dari plugin JWD File Picker ini:

  • Mudah digunakan.
  • Dapat mengakomodir semua jenis file, baik file image, video, dokumen, dll
  • Menggunakan database untuk menampung properties file, termasuk metadata file.
  • Dilengkapi dengan drag n drop file uploader yang dapat digunakan untuk upload satu atau banyak file sekaligus.
  • Dilengkapi dengan halaman manajemen file untuk mengelola file yang telah diupload.
  • Kompatibel dengan plugin tinymce.

Berikut contoh tampilan module File Picker Manager

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
File Picker Manager – Mengelola File Yang Diupload

Berikut contoh penggunaan untuk feature image artikel:

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Filepicker Untuk Memilih Feature Image

Berikut contoh file picker sebagai pengganti file browser

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Filepicker Sebagai Pengganti File Browser

Berikut contoh penggunaan filepicker pada plugin Tinymce

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Filepicker Pada Tinymce WYSIWYG Text Editor

14. Ajax Drag And Drop

Fitur yang saat ini sering digunakan ketika melakukan pengaturan adalah kemampuan untuk melakukan drag and drop element. Aplikasi admin template ini, telah dilengkapi dengan contoh module gallery dimana dimodule tersebut kita dapat melakukan pengaturan image dengan cara drag and drop.

Pada module gallery, kita dapat mengaktifkan dan menonaktifkan kategori dengan menggesernya ke panel Aktif atau Non Aktif , selain itu Anda dapat mengubah urutan kategori yang ingin ditampilkan dengan menggesernya keatas maupun kebawah, ketika melakukan drop, maka data pada database akan otomatis terupdate.

Contoh sebagai berikut:

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Ajax Drag and Drop Pada Kategori Gallery

Contoh lain drag and drop adalah pengaturan urutan image yang ada di dalam gallery, contoh tampilannya adalah sebagai berikut:

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Ajax Drag and Drop Pada Image Gallery

15. TinyMCE

Ingin mengintegrasikan WYSIWYG pada text aditor? dengan Admin Template ini, Anda dapat melakukannya dengan mudah, kami telah menyertakan contoh text editor dengan integrasi WYSIWYG populer yaitu TinyMCE. contoh penggunaannyadapat dilihat di module Artikel.

TinyMCE yang kami sertakan ini juga sudah terintegrasi dengan plugin File Picker diatas, sehingga akan mempermudah Anda ketika ingin menyisipkan gambar pada editor.

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Tinymce Pada Admin Template PHP

16. Stream Download

Ketika kita menyediakan file untuk didownload, terkadang kita ingin hanya user yang telah login saja yang boleh mendownload file tersebut. Selain itu kita juga ingin mencatat siapa saja yang mendownload file tersebut.

Untuk tujuan tersebut, tidak mungkin jika kita menyediakan direct download, dimana link download langsung menuju file yang dimaksud, untuk itu, kami telah menyediakan contoh module dimana kita dapat melakukan berbagai hal sebelum user dapat mendownload file tersebut, termasuk mengecek status user (guest/login) dan mencatat file yang didownload user tersebut.

Module tersebut dapat diakses melalui menu Stream Download. Berikut contoh tampilannya:

Cara membuat dashboard admin dengan bootstrap
Cara membuat dashboard admin dengan bootstrap
Stream Download – Membatasi Akses File Download

V. User Manual

File download aplikasi ini juga sudah disertakan user manual sebanyak 46 halaman (dan terus dilengkapi), termasuk tutorial membuat halaman CRUD dan RBAC di admin template ini. Dengan user manual ini Anda akan dengan cepat dan mudah memahami alur dari aplikasi Admin Template ini.

VI. Fitur Lain

Selain berbagai fitur menarik diatas, terdapat fitur lain yang

  • Aplikasi didesain untuk dapat menggunakan google font secara offline. Dengan demikian tidak perlu khawatir jika aplikasi anda berjalan secara offline, anda tetap dapat menggunakan google font
  • Built-in breadcrum. Disetiap halaman modul, otomatis muncul breadcrumb sesuai dengan module yang ditampilkan
    Cara membuat dashboard admin dengan bootstrap
    Cara membuat dashboard admin dengan bootstrap
  • Menggunakan bahasa pemrograman struktural sehingga lebih memudahkan siapapun untuk menggunakan aplikasi ini. Kenapa tidak OOP saja? Kedepan rencana akan dikembangkan menggunakan teknik OOP menggunakan Framework Code Igniter
  • Pada bagian front end, menggunakan beberapa plugin terbaru diantaranya Bootstrap 4, jQuery 3.4, Bootbox, Bootstrap Datepicker, dan Sweealert

VII. Live Demo dan Contoh Aplikasi PHP Admin Template

Agar memiliki gambaran seperti apa aplikasi PHP Admin Template yang kami kembangkan, silakan mencoba demo aplikasi dengan mengklik tautan berikut ini:

LIVE DEMO – PHP ADMIN TEMPLATE

Beberapa aplikasi telah dikembangkan menggunakan Admin Template ini, diantaranya aplikasi cetak kartu mahasiswa, untuk mencobanya, silakan klik tautan berikut ini

LIVE DEMO – APLIKASI CETAK KARTU

Note: Pembuatan module tidak dapat dilakukan otomatis. Untuk mendapatkan gambaran bagaimana pembuatan module pada aplikasi ini, silakan membaca user manual aplikasi di: https://jagowebdev.com/members/public/files/User Manual – PHP Admin Template Jagowebdev.pdf

VIII. Investasi

Jika sobat tertarik untuk menggunakan template ini, sobat dapat berinvestasi dengan join sebagai member premium dan langsung dapat mendownload dan menggunakannya.

Member premium di jagowebdev akan senantiasa mendapatkan free update dari setiap content yang diupdate, meskipun sudah melewati jangka waktu membership.

Dengan menjadi member premium, selain PHP Admin Template, Anda juga akan mendapatkan semua resource yang tersedia untuk member seperti e-book, cheatsheet, dan aplikasi lain, termasuk aplikasi cetak kartu diatas.

Demikian pembahasan mengenai PHP Admin Template

Semoga bermanfaat
Salam

Subscibe Now

Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com

Komitmen Kami: Kami senantiasa menghargai privasi Anda dan tidak akan membagikan identitas Anda ke pihak manapun.