Menerapkan Dashboard AdminLTE Pada Laravel 7 dan laravel 8

Kembali lagi di kodekreasi.com . Pada artikel kali ini saya akan membahas tentang cara Menerapkan Dashboard AdminLTE Pada Laravel 7 dan laravel 8 . Sebagai seorang developer tentu kalian sudah tidak asing lagi dengan yang namanya halaman dashboard atau yang sering disebut dengan halaman administrator bukan. Halaman dashboard biasanya digunakan oleh seorang administrator sebuah sistem untuk memanage konten dari halaman antarmuka pada sistem tersebut. Salah satu template yang cukup populer yang sering digunakan para pengembang untuk membuat halaman dashboard adalah AdminLTE. AdminLTE adalah salah satu template admin yang cukup populer dan tentunya open source sehingga kalian dapat dengan gratis menggunakan template tersebut. Themplate AdminLTE sendiri dibangun menggunakan bootstrap dan bersifat responsive.

Untuk menggunakan template AdminLTE di laravel 7 dan laravel 8 dapat dilakukan dengan beberapa cara namun yang cukup mudah adalah menggunakan package dari jeroennoten yaitu jeroennoten/Laravel-AdminLTE . Dengan menggunakan package tersebut kalian tidak perlu susah-susah memisahkan bagian dari adminLTE satu persatu dan kalian cukup menggunakan composer untuk memasang nya pada Laravel kalian.

Menerapkan Dashboard AdminLTE Pada Laravel 7 dan Laravel 8

Pertama-tama, kita harus menginstall laravel 7 atau laravel 8 terlebih dahulu menggunakan composer . Ketikkan perintah berikut ini melalui cmd atau terminal untuk memulai installasi laravel 7 atau laravel 8 pada komputer kalian.

composer create-project --prefer-dist laravel/laravel blogcomposer create-project --prefer-dist laravel/laravel AdminLTE

Tunggu sampai proses installasi paket-paketnya selesai.

Masuk ke directori project laravel kalian menggunakan perintah berikut.

cd AdminLTE

Install Laravel UI Dan Generate Authentikasi Laravel

Untuk informasi pada tutorial ini saya akan menggunakan scafollding bootstrap menggunakan laravel/ui . Walaupun sebenarnya untuk laravel versi 8 sendiri untuk masalah UI sekarang menggunakan Laravel Jetstream ( baca informasi lengkapnya di sini ) namun kita tetap masih bisa menggunakan laravel/ui pada laravel 8 . Laravel Jetstream pada laravel 8 sendiri dirancang menggunakan framework Tailwind CSS sehingga salah satu pilihan mengapa kita menggunakan scafollding bootstrap milik laravel/ui pada tutorial ini dikarenakan pada AdminLTE sendiri juga dibagun menggunakan bootstrap. Untuk melakukan installasi Laravel/ui dapat dilakukan dengan menggunakan perintah berikut ini :

composer require laravel/ui

Setelah itu jalankan perintah berikut untuk membuat authentikasi user seperti login,register, reset password dll.

php artisan ui:controllers   //untuk membuat controller authentikasi
php artisan ui:auth          //untuk membuat view authentikasi

Membuat Database

Berhubung pada tutorial ini saya menggunakan xampp jadi terlebih dahulu kita jalankan xampp kita dan kemudian buka phpmyadmin dengan cara ketikkan url http://localhost/phpmyadmin pada browser kalian .

Untuk membuat database baru dapat dilakukan dengan cara menekan menu baru atau new pada bagian sidebar dan kemudian isikan nama database yang akan kalian buat . Sebagai contoh pada artikel ini saya membuat sebuah database dengan nama AdminLTE , kalian dapat memberi nama database yang kalian buat sesuai kebutuhan kalian tidak harus AdminLTE. Berikut adalah hasil capture proses yang saya kerjakan :

Setting file .env laravel untuk melakukan koneksi ke database yang telah kalian buat seperti berikut.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=AdminLTE   //isikan nama database kalian
DB_USERNAME=root       //isikan username database kalian
DB_PASSWORD=           //isikan password database kalian

Lakukan migration pada laravel dengan menggunakan perintah berikut ini:

php artisan migrate

Migration disini berfungsi untuk mengenerate tabel-tabel yang terbentuk saat kita menjalankan perintah untuk membuat authentikasi menggunakan laravel UI ke database yang telah kita buat sehingga kita tidak perlu lagi repot-repot membuat tabel satu persatu melalui phpmyadmin. Berikut adalah hasilnya :

Menginstall AdminLTE dengan composer menggunakan package dari jeroennoten/Laravel-AdminLTE

Setelah proses installasi laravel UI dan generate Authentikasi laravel selesai selanjutnya kita akan menginstall package jeroennoten/Laravel-AdminLTE menggunakan composer dengan perintah seperti berikut ini.

composer require jeroennoten/laravel-adminlte

Setelah menginstall package dari jeroennoten serta menginstall kemudian kita harus mempublish file-file assets dan konfigurasi dari AdminLTE. Berikut adalah perintahnya.

php artisan adminlte:install --interactive

Dan hasilnya akan terbentuk file-file baru di config/adminlte.php, resources/views/vendor/adminlthe, dan resources/lang/vendor/adminlte.

Dari hasil perintah diatas ternyata setelah kita amati pada foder public file-file plugin seperti datepicker,select2 dll belum ikut disertakan . Untuk menginstall file-file plugin tersebut dapat dilakukan dengan menggunakan scribt berikut.

artisan adminlte:plugins install

Perintah diatas digunakan untuk menginstall semua plugin yang terdapat di AdminLTE dan meletakkannya dalam folder public/vendor .

Secara optional kita juga dapat menginstall plugin-plugin yang hanya kita butuhkan pada AdminLTE seperti misalnya kita hanya ingin menginstall plugin datepicker saja maka dapat dilakukan dengan menggunakan perintah berikut ini :

php artisan adminlte:plugins install --plugin=daterangepicker

Dari hasil scribt diatas maka plugin yang akan terinstall di folder public/vendor hanyalah plugin datepicker.

Setelah itu install tampilan utama serta tampilan authentikasi milik AdminLTE untuk menggantikan tampilan authentikasi default yang dimiliki laravel.

php artisan adminlte:install --only=main_views
php artisan adminlte:install --only=auth_views

Jalankan project laravel kalian dengan menggunakan perintah berikut :

php artisan serve

Buka Browser, ketik:

http://localhost:8000 

Atau jika kalian menggunakan xampp kalian bisa meletakkan project kalian di folder htdocs dan kemudian kalian dapat mengaksesnya melalui url seperti berikut pada browser kalian :

http://localhost/nama_project_kalian/public

Berikut adalah hasil dari penerapan dashboard AdminLTE pada laravel 7 dan 8 yang telah kita kerjakan :\

Halaman utama

Halaman Login

Halaman Register

Kemudian cobalah melakukan registrasi account baru melalui form registrasi yang telah kita buat. Ketika kita berhasil registrasi maka kita akan dibawa ke halaman dasboard , Namun ketika dihalaman dashboard …. ta..ra ,, tampilan pada halaman dashboard masih berantakan .

Untuk memperbaiki hal tersebut buka file resources/views/home.blade.php pada text editor kalian dan kemudian rubah isinya menjadi seperti berikut ini :

@extends('adminlte::page')
@section('title', 'Dashboard')
@section('content_header')
    <h1>Dashboard</h1>
@stop
@section('content')
    <p>Welcome to this beautiful admin panel.</p>
@stop
@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
@stop
@section('js')
    <script> console.log('Hi!'); </script>
@stop

Maka tampilan dari dashboard akan menjadi seperti berikut ini :

Untuk melakukan perubahan konfigurasi dari menu-menu pada sidebar AdminLTE , penambahan plugin baru, atau pengaktifan icon dan lain-lain dapat dilakukan melalui file config pada config/adminlte.php .

Sekian artikel dari saya mengenai Cara Menerapkan Dashboard AdminLTE Pada Laravel 7 dan laravel 8 kali ini semoga dapat berguna bagi kalian semua.

Incoming Search Terms :

• cara memasukan template ke laravel
• laravel 7 adminlte
• menerapkan admin lte di laravel
• laravel adminlte
• template login laravel
• bower_components adminlte
• cara install adminlte di laravel
• template adminlte php