Cara Integrasi Laravel 9 dengan Laravel AdminLTE

Era laravel 9 telah tiba. Resmi rilis pada 8 Februari 2022 kemarin dengan persyaratan PHP minimum versi 8.0 - 8.1. Walaupun Laravel AdminLTE pada saat tulisan ini dibuat belum mengeluarkan versi terbarunya yang mendukung Laravel 9 tetapi kita masih bisa melakukan penginstalan seperti biasanya.

Instalasi Laravel 9

Kita akan gunakan perintah composer untuk menginstal laravel 9.

composer create-project laravel/laravel adminlte-l9

Instalasi Laravel-AdminLTE

Masuk ke dalam folder adminlte-l9

cd adminlte-l9

Ketik perintah Composer berikut untuk melakukan instalasi package laravel-adminlte:

composer require jeroennoten/laravel-adminlte

Lanjutkan dengan perintah:

php artisan adminlte:install

Instal Laravel UI dengan perintah berikut:

composer require laravel/ui

Gunakan perintah di bawah ini untuk menggenerate file controller dan view blade yang akan menangani otentikasi seperti login, register, forget password, dan lain-lain.

php artisan ui bootstrap --auth

Lanjutkan dengan menginstall package npm dan menjalankan run untuk kompile.

npm install && npm run dev

Ada tambahan untuk kita instal

npm install resolve-url-loader@^5.0.0 --save-dev --legacy-peer-deps

Buat file webpack.mix.js

Sejak Laravel menggunakan Vite, file webpack.mix.js tidak tersedia sehingga kita harus menambahkan file tersebut di root folder. Lalu masukkan ke dalam file tersebut dengan isi sebagai berikut:

const mix = require('laravel-mix');
let productionSourceMaps = false;

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps(productionSourceMaps, 'source-map');

Instalasi package yang diperlukan

Bootstrap yang kita install melalui perintah php artisan ui bootstrap --auth adalah bootstrap 5 sehingga kita perlu menghapusnya dan menggantinya dengan bootstrap 4.

npm remove bootstrap
npm i bootstrap@4.6.1 -P

Hapus juga popperjs/core:

npm remove @popperjs/core

Install package lainnya:

npm i @fortawesome/fontawesome-free
npm i icheck-bootstrap
npm i overlayscrollbars
npm i cross-env@7.0.3 -D
npm i jquery@3.6.0 -P
npm i popper.js@1.16.1 -P
npm i autoprefixer@10.4.5 -P
npm i resolve-url-loader@5.0.0 -D
npm i sass-loader@12.1.0 -D
npm i @lgaitan/pace-progress@1.0.7 -P
npm i @sweetalert2/theme-bootstrap-4@5.0.11 -P
npm i @ttskch/select2-bootstrap4-theme@1.5.2 -P
npm i bootstrap4-toggle@3.6.1 -P
npm i datatables.net-bs4@1.12.1 -P 
npm i datatables.net-buttons-bs4@2.2.3 -P
npm i frappe-charts@1.6.2 -P
npm i select2@4.0.13 -P
npm i sweetalert2@11.4.24 toastr@2.1.4 -P

Ganti:

"scripts": {
    "dev": "vite",
    "build": "vite build"
},

Dengan:

"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
},

Membuat Database

mysql -u root -p
//ketik password user mysql atau root secara default jika kita belum pernah mengubahnya
create database adminltel9;
quit

Buka project kita dengan  teks editor yang anda inginkan seperti VSCode. Buka file .env dan edit pada bagian database:

DB_DATABASE=adminltel9
DB_USERNAME=root (sesuaikan dengan username database yang anda miliki)
DB_PASSWORD=root (sesuaikan dengan password database yang anda miliki)

Jalankan migrate:

php artisan migrate

Install View Auth

Ganti view blade login, register, lupa password, konfirmasi email, dll ke tampilan view blade adminlte.

php artisan adminlte:install --only=auth_views

Ketik: yes, pada pertanyaan yang muncul: The authentication views already exists. Want to replace the views? (yes/no) [no]:

Jalankan Server

php artisan serve

Buka Browser, ketik: localhost:8000.

Hasilnya:

Pergi ke halaman Register dengan klik menu "Register".

Isikan sesuai dengan form, lalu klik "Register" untuk menyimpan. Proses selanjutnya akan membawa anda langsung ke dashboard.

Berikutnya kita akan mengubah tampilan dashboard default dengan tampilan AdminLTE, caranya pergi ke resources/views/home.blade.php.

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Dashboard') }}</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    {{ __('You are logged in!') }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Hapus dan ganti dengan:

@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

Hasilnya:

Menampilkan Foto User di Top Navbar

Buka model User.php yang berada di dalam folder app/Models, tambahkan kode berikut setelah method $casts:

public function adminlte_image()
{
    return 'https://picsum.photos/300/300';
}

public function adminlte_desc()
{
    return 'That\'s a nice guy';
}

public function adminlte_profile_url()
{
    return 'profile/username';
}

Selanjutnya buka config/adminlte.php (baris 67 - 72).

'usermenu_enabled' => true,
'usermenu_header' => false,
'usermenu_header_class' => 'bg-primary',
'usermenu_image' => false,
'usermenu_desc' => false,
'usermenu_profile_url' => false,

Ubah nilainya menjadi seperti berikut:

'usermenu_enabled' => true,
'usermenu_header' => true,
'usermenu_header_class' => 'bg-primary',
'usermenu_image' => true,
'usermenu_desc' => true,
'usermenu_profile_url' => true,

Hasilnya:

Jika ingin menggunakan avatar atau foto profile yang tetap tidak berubah-ubah, kita bisa mempersiapkan gambar yang ingin kita jadikan avatar. Kita simpan dalam folder public, sebelumnya kita buatkan dulu folder images dalam folder publik, khusus untuk menyimpan gambar.

Buka kembali app/Models/users.php, lalu ganti method adminlte_images menjadi:

public function adminlte_image()
{
    return asset('images/avatar.jpg');
}

Anda bisa mengganti avatar.jpg sesuai dengan nama gambar yang anda miliki.

Hasilnya:

Lalu Bagaimana kalau kita ingin mengubah photonya tidak statis melainkan dinamis sesuai dengan foto yang kita simpan di database? Maka kita perlu menambahkan kolom foto atau avatar pada table user dan memanggilnya dengan Auth. Contoh:

public function adminlte_image()
{
    return asset('images/'.Auth::user()->avatar);
}

Pada judul berikutnya kita akan coba melakukannya. Sampai saat ini pembahasan dicukupkan sampai di sini. Selamat mencoba.