Membuat halaman admin dengan bootstrap

Halo teman Rumah Coding, pada artikel kali ini kita akan membahas tentang Rekomendasi dashboard admin Bootstrap.

Dalam pembuatan aplikasi berbasis website, kita pasti membutuhkan tempat untuk user mengatur data baik input, edit dan hapus. Dashboard admin adalah tempat untuk mengatur, mengkoordinir flow data sistem yang sudah kita buat secara User Interface.

Dalam kesempatan kali ini, saya akan memberikan 3 rekomendasi dashboard admin Bootstrap yang sering digunakan.

• AdminLTE 3

Admin LTE 3 adalah template boostrap yang pertama saya gunakan, dan ini juga sebagai template yang paling favaorit bagi para pemula sampai menengah. Admin LTE 3 adalah template admin yang sangat responsive dan telah menggunakan framework bootstrap 4.6.1. Karena menggunakan boostrap 4 maka Admin LTE ini sangat mudah dikustomisasi dan digunakan.

Download

Live Preview

• SBAdmin 2

SB Admin 2 menggunakan bootstrap 4 dan memiliki tampilan yang lebih sederhana dari Admin LTE 3. Template ini sangat simple dan rapi dalam struktur codingannya. Meski tidak memiliki library custom sebanyak Admin LTE 3, tapi SB Admin 2 telah memberikan snippet code, pages, dan penggunaan library-library lain yang umum digunakan oleh pengembang web. salah satu kelebihan dari template yang satu ini adalah ringan. SB Admin 2 hanya memiliki ukuran sebesar 6 MB saja (compressed).

Cocok buat  yang sedang belajar web programming sampai pengerjaan project yang membutuhkan efisiensi size dalam pembuatan aplikasi, dimana plugin bisa ditambahkan manual sesuai kebutuhan.

Download

Live Preview

• Stisla

Stisla adalah salah satu template admin bootstrap buatan orang Indoensia, pembuatnya adalah Muhamad Nauval Azhar. Stisla memberikan banyak fitur serba guna dan gratis untuk diunduh. Dalam laman resmi stisla mengatakan, bahwa simple version dan pro version sama saja, artinya kalian bisa menikmati semua fitur yang diberikan.

Stisla di desain untuk kalian dan klien kalian, terintegrasi dengan 30+ library pihak ketiga dan banyak komponen lainnya. Sehingga kamu bisa mengembangkan aplikasi dengan lebih mudah. Stisla menyediakan javascript APIs untuk memudahkan interaksi antar komponen, kemudian semua halaman HTMLnya bebas error, karena semuanya telah diverifikasi oleh W3C.

Download

Live Preview

Sebenarnya masih banyak dashboard-dashboard yang masih bisa digunakan secara gratis, kalian bisa explore lebih untuk mencarinya. Namun disini saya memberi rekomendasi yang umumnya digunakan para developer serta fungsi yang efisiensi.

Penggunaan template dashboard admin ini dimaksudkan agar mempermudah dan mempercepat pengerjaan project kita, jadi kita bisa lebih fokus dalam pembuatan logic aplikasi kita.

Di kesempatan lain akan saya buat tutorial penerapan masing-masing dashboard admin pada PHP dan Laravel. Ditunggu saja ya teman-teman Rumah Coding.

Demikian artikel kali ini tentang 3 Rekomendasi Dashboard Admin Bootstrap, semoga bermanfaat dan jangan lupa untuk terus berlatih.

Sebagai permulaan bagi teman-teman yang belum tahu. Bootstrap itu adalah framework frontend yang sangat populer saat ini. Bootstrap Menyediakan berbagai tampilan untuk memudahkan kita dalam pengembangan aplikasi web yang responsive.

Saat ini, sudah banyak sekali template-template website yang sudah terintegrasi dengan bootstrap, dari yang gratis hingga yang berbayar. Sebagai rujukan teman-teman bisa klik tautan ini untuk melihat berbagai template bootstrap https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/ atau https://www.creative-tim.com/bootstrap-themes/free ada banyak model template yang bisa kita gunakan. Dan template-template ini biasanya menyediakan fitur yang sangat lengkap, dari mulai tampilan dashboardnya, tombolnya, formnya, tabelnya dan komponen-komponen lainnya biasa sudah tersedia untuk langsung kita gunakan.

Di bawah ini saya tampilkan video review salah satu template bootstrap yaitu admin-lte versi 2. Berikut videonya.

Bagaimana Cara Mengintegrasikan Template Bootstrap di Localhost

Cara ini bisa kita terapkan hampir di semua template website yang menggunakan html, css, javascript dan Php. jadi teman-teman jangan bingung. cara ini bisa kita gunakan untuk memasang template-template lainnya. 

Pada tutorial kali ini saya akan mengintegrasikan template admin-LTE ke project localhost kita. Teman-teman bisa download terlebih dahulu templatenya disini "download".

Sebelum kita mulai saya asumsikan teman-teman sudah menginstall xampp terlebih dahulu di komputernya masing-masing.

• 1. Download dan ekstrak template yang sudah kita download sebelumnya.

• 2. Letakkan folder hasil ekstrak tadi di dalam htdocs kita

• 3. Ubah nama folder dengan nama yang diinginkan, karena nama folder ini nantinya akan digunakan untuk local domain yang akan kita akses nantinya. Disini saya merubah nama folder menjadi project
• 4. Hidupkan webservice teman-teman
• 5. lalu ketik url localhost/project. Dan .... berhasil. Cukup mudah bukan untuk mengintegrasikan template yang kita buat di project kita. Hasilnya akan tampak seperti gambar di bawah ini.

Dan untuk diperhatikan, saat kita menjalankan localhost/namafolder di browser, maka program akan otomatis mencari file index, jadi pastikan file index teman-teman ada dan tersimpan di dalam project yang kita buat, karena jika tidak maka tampilannya akan seperti gambar di bawah ini.

Di tutorial-tutorial selanjutnya, insyaAllah saya akan membuat aplikasi webnya secara bertahap dengan template yang sudah kita implementasikan pada tutorial kali ini. 

Sekian tutorial Cara Pasang Template Bootstrap di Localhost Server Cepat dan Mudah. Dan mudah-mudahan tulisan saya ini membantu teman-teman sekalian. Ada pertanyaan, kritik, dan saran bisa disampaikan di kolom komentar di bawah ini. Happy Coding !!!.