NEW!! » Premium Support - PHP, MySQL, Dll Buku Query MySQL Lihat Detail » x

PHP Admin Template Dashboard

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 7 dan bisa untuk versi dibawahnya, minimum versi 5.4 ddengan database MariaDB / MySQL. Teknik pemrograman menggunkan teknik struktural
  • Menggunakan Framework Bootstrap terbaru, yaitu: 4.3
  • Menggunakan framework javascript jQuery terbaru, yaitu 3.4
  • Menggunakan HTML 5
  • Menggunakan Font Awesome 5
  • Berbagai plugin 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.

Halaman Login
Halaman Login

2. User Manager

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

Halaman User Manager
Halaman User Manager

3. 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.

PHP Admin Template - Menu Manager
Halaman Menu Manager

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

Edit Menu - PHP Admin Template
Edit Menu
Edit Menu - Pilih Icon - PHP Admin Template
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.

Highlight Menu Pada Menu Manager
Highlight Menu Pada Menu Manager

4. 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.

Halaman Module Manager Pada PHP Admin Dashboard Template
Halaman Module Manager Pada PHP Admin Dashboard Template

5. 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

Halaman Role Manager
Halaman Role Manager

6. 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

Halaman Assign Role ke User
Halaman Assign Role ke User

7. 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.

Halaman Assign Role ke Module
Halaman Assign Role ke Module

8. 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

Halaman Assign Role ke Manu
Halaman Assign Role ke Manu

9. 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:

Setting Website Untuk Halaman Login - PHP Admin Template
Setting Website Untuk Halaman Login
Setting Website Pada Helaman Utama
Setting Website Pada Helaman Utama

10. 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

PHP Admin Template - Pengaturan Tampilan
PHP Admin Template – Pengaturan Tampilan
Tampilan PHP Admin Template - Grey Dark
Tampilan PHP Admin Template – Grey Dark

11. 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:

Lingkungan Pengambangan Production
Lingkungan Pengambangan Production

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

Lingkungan Pengembangan Development
Lingkungan Pengembangan Development

12. Built In Script

PHP Admin Template yang kami bangun sudah menyediakan beberapa script CRUD penting terkait input data, dengan demikian akan sangat membantu Anda memudahkan mengembangkan fitur aplikasi. Beberapa Script CRUD yang tersedia diantaranya adalah

CRUD Form dengan multiple file upload

Admin Template - Multiple File Upload dengan Deskripsi File
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.

CRUD Form dengan image upload disertai preview image

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

Admin Template - Image Upload dengan Preview
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.

CURD Form dengan options dinamis

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

Admin Template - Form Dinamis - Multiple Options
Admin Template – Form Dinamis – Multiple Options

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

CRUD Data dengan Input Dinamis

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

Admin Template - Input Dinamis
Admin Template – Input Dinamis

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

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, sehingga akan memudahkan Anda menyajikan data dalam bentuk tabel. Berikut contoh tampilannya:

Data Tables - PHP Admin Template
Data Tables – PHP Admin Template

Data Tables Ajax

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. 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

Data Tables Ajax - PHP Admin Template
Data Tables Ajax – PHP Admin Template

13. 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:

Struktur Folder PHP Admin Template Dashboard
Struktur Folder PHP Admin Template Dashboard

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 ditampilkanBreadcrumb PHP Admin Template
  • 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

III. 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:

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

IV. 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.

38 Feedback dari pembaca

Silakan tinggalkan komentar

Newsletter

Jadilah yang pertama tahu berita terbaru dari Jagowebdev.com

Jasa Konsultasi PHP MySQL Website Dengan Ahlinya

Like Us

  1. Trik Coding Cepat dan Efisien Pada PHP [Update 14/11/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