Cara Integrasi Laravel 8 dengan Laravel-AdminLTE

Tepat 8 September 2020 kemarin, Laravel mengeluarkan versi mayor terbarunya, yaitu Laravel 8. Laravel versi anyar ini membawa perubahan yang banyak dalam framework Laravel. Sebagai pengguna Laravel kita harus kembali menyesuaikan kembali dengan perubahan tersebut, tidak hanya bagi kita yang baru memulai mempelajarinya di versi 6 atau 7.

Sebagai pengembang web, tentu kita perlu yang namanya dashboard atau halaman administrator yang berfungsi untuk memanage konten di halaman muka web. AdminLTE merupakah salah satu dari template admin Bootstrap yang cukup populer digunakan sebagai halaman dashboard bagi aplikasi berbasis web, termasuk juga digunakan untuk aplikasi Laravel.

Mengintegrasikan Laravel dengan AdminLTE bisa dengan mudah kita lakukan dengan menggunakan paket Laravel-AdminLTE yang menggunakan AdminLTE versi 3 (Bootstrap 4). Tulisan ini adalah update dari tulisan sebelumnya yang menggunakan Laravel 7 sehingga ada bagian-bagian yang punya kesamaan dalam proses inetgrasi.

Instalasi Laravel 8

Pertama-tama kita harus instalasi Laravel 8, kami menggunakan Laravel Installer. Jika kalian belum menginstal Laravel Installer di komputer kalian, gunakan perintah berikut untuk melakukan instalasi:

composer global require laravel/installer

Untuk update Laravel Installer kalian bisa melakukannya dengan cara:

composer global update laravel/installer
//atau
composer global remove laravel/installer
composer global require laravel/installer

Jika kalian pengguna Windows, kalian harus menambahkan variable 'laravel' pada Environment Variables agar bisa memanggil perintah Laravel Installer.

%USERPROFILE%\AppData\Roaming\Composer\vendor\bin

Pastikan laravel installer kalian sudah di-update ke versi 4.

D:\>laravel --version
Laravel Installer 4.2.5

Kemudian ketik:

laravel new nama_projectmu

Nama projectnya akan kami beri nama l8-adminlte.

laravel new l8-adminlte

Bila kalian lebih suka menggunakan via composer kalian bisa menggunakan perintah berikut:

composer create-project laravel/laravel l8-adminlte

Tunggu hingga proses selesai.

Application ready! Build something amazing.

Instalasi Laravel-AdminLTE

Setelah berhasil membuat folder project Laravel 8, selanjutnya menginstal package Laravel-AdminLTE. Masuk ke dalam folder project l8-adminlte:

cd l8-adminlte

Kemudian ketik perintah Composer berikut untuk melakukan instalasi package laravel-adminlte:

composer require jeroennoten/laravel-adminlte

Setelah itu lanjutkan dengan perintah berikut:

php artisan adminlte:install

Perintah di atas akan menambahkan vendor asset di folder public, juga akan mempublish file config di folder config, yaitu adminlte.php, dan juga file translasi di resources/lang/vendor

Instalasi Laravel/ui

Jika sebelumnya di versi Laravel 7 kita masih bisa menemukan Frontend Scaffolding untuk UI, saat ini di versi 8, untuk urusan UI, Laravel menggunakan Laravel Jetstream. Namun, bukan berarti kita tidak bisa menggunakan laravel/ui di Laravel 8 karena laravel/ui di versi 7 pun hanyalah opsional.

composer require laravel/ui

Generate Controller dan View 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

Kemudian akan muncul permintaan untuk menjalankan perintah "npm install && npm run dev", jalankan perintah berikut:

npm install && npm run dev

Jika muncul pesan berikut:

Additional dependencies must be installed. This will only take a moment.
Running: npm install resolve-url-loader@^3.1.2 --save-dev --legacy-peer-
 deps
Finished. Please run Mix again.

Jalankan kembali:

npm run dev

Membuat Database

Kalian bisa membuat database menggunakan PhpMyAdmin, HeidiSQL, atau menggunakan Command Prompt. Pada contoh di bawah ini, kita menggunakan Command Prompt.

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

Kami memberi nama databasenya sesuai dengan nama folder projectnya l8-adminlte. Anda bisa menyesuaikan untuk nama database anda sesuai dengan project anda.

Memasukkan Folder Project ke dalam VSCode

Ketik dalam folder melalui command prompt:

code .

Bila perintah ini gagal mungkin kalian belum mengatur settingan pada VSCode, caranya kalian bisa lihat di sini.

Setting Database di .env Laravel

Buka file .env lalu tujulah pada baris berikut:

DB_DATABASE=l8_adminlte
DB_USERNAME=root
DB_PASSWORD=

Sesuaikan dengan database anda, misal:

DB_DATABASE=l8_adminlte
DB_USERNAME=root
DB_PASSWORD=root

Jalankan Migrate

php artisan migrate

Replace View Auth Laravel dengan View Auth Laravel AdminLTE

Kita perlu mengubah tampilan login, register, dll bawaan view auth dari laravel/ui ke tampilan Auth Laravel 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

Pergi ke halaman Register dengan klik menu "Register".

Isikan ke dalam form untuk data user. Klik tombol "Register", setelah itu anda akan masuk ke dalam dashboard.

Tampak pada halaman Home Dashboard default laravel UI.

Sekarang untuk mengubah tampilannya kita akan mulai menggunakan tampilan layout dan asset AdminLTE.

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 semua isinya 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

Bila kita perhatikan di isi sebelah kanan atas, terlihat nama user, yaitu Admin, di sebelah namanya sebenarnya kita bisa menampilkan foto atau avatar kaena versi Laravel-AdminLTE saat ini sudah mendukung untuk menampilkan avatar.

Buka model User.php yang kini 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, lalu tuju bagian setting menu user pada baris nomor 67 - 72 .

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

Set 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:

Foto User akan tampil berbeda-beda setiap kali kita refresh halaman karena memangil url https://picsum.photos/300/300. Kita bisa menggantinya dengan memanggil gambar yang kita miliki di dalam folder public.

Siapkan gambar yang akan kita gunakan sebagai foto user. Gunakan gambar persegi minimal 300×300 dengan ekstensi .jpgatau .png. Buat folder imagesdi dalam folder public. Letakkan gambar tersebut ke dalam folder public/images.

Lalu buka kembali file app/User.php, ganti url yang mengarah ke situs picsum.photo dengan url path folder yang baru kita bua, yaitu images/nama_file_gambar.extension.

Misal, gambar yang kami untuk avatar adalah incognito.png

public function adminlte_image()
{
    return asset('images/incognito.png');
}

Hasilnya:

Bila kalian ingin menggunakan avatar yang dinamis sesuai dengan user yang login maka kalian perlu menambahkan kolom pada table user, misal "avatar" untuk menyimpan nama file image yang akan digunakan sebagai avatar.

Jadi kalian bisa memanggilnya sebagai berikut:

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

Mengubah Link Profile

URL pada link Profile secara default adalah /profile/username sehingga kita perlu mengubahnya, caranya pergi ke Models/Users.php.

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

Karena kita belum memiliki kolom username pada table users, jadi kita akan menggantinya dengan:

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

Sehingga sekarang url link profile kita adalah /profile. Selanjutnya pergi ke routes/web.php dan letakkan baris kode berikut:

Route::get('/profile', [App\Http\Controllers\ProfileController::class, 'index'])->name('profile');

Kemudian kita buat ProfileController dengan perintah artisan:

php artisan make:controller ProfileController --resource

Pada file ProfileController di dalam folderapp/Http/Controllers, letakkan di dalam method index:

...
use Illuminate\Support\Facades\Auth;

class ProfileController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $user = Auth::user()->name;
        return view('profile', compact('user'));
    }

Pastikan kalian telah menambahkan use Illuminate\Support\Facades\Auth di atas agar tidak terjadi error:

Class 'App\Http\Controllers\Auth' not found

p>Lalu, kita pergi ke resources/views, dan buat file baru dengan nama profile.blade.php, isinya:

@extends('adminlte::page')

@section('title', 'Profile')

@section('content_header')
<h1>Profile</h1>
@stop

@section('content')
<p>Hello {{ $user }}, welcome to your profile page</p>
@stop

@section('css')
<link rel="stylesheet" href="/css/admin_custom.css">
@stop

@section('js')
<script> console.log('Hi!'); </script>
@stop

Hasilnya:

Menu Sidebar

Untuk edit menu sidebar, pergi ke config/adminlte, lihat pada bagian menu items.

Kita akan menambahkan menu dashboard dan menghapus menu-menu yang tidak diperlukan pada sidebar.

Buka config/adminlte.php, pergi ke baris nomor 266, ubah menjadi:

'menu' => [
    [
        'text'   => 'search',
        'search' => true,
        'topnav' => true,
    ],
    [
        'text' => 'Dashboard',
        'url'  => '/home',
        'icon' => 'fas fa-fw fa-home',
    ],
    ['header' => 'account_settings'],
    [
        'text' => 'profile',
        'url'  => 'profile',
        'icon' => 'fas fa-fw fa-user',
    ],
    [
        'text' => 'change_password',
        'url'  => 'change-password',
        'icon' => 'fas fa-fw fa-lock',
    ],
],

Hasilnya:

Laravel Mix

Jika kalian ingin menggunakan satu file asset saja untuk css dan js, seperti app.css dan app.js sehingga tampil lebih ringkas maka kalian perlu mengkompile asset dari vendor yang diperlukan menggunakan Laravel Mix.

Sebelumnya kalian perlu menginstal fontawesome, icheck-bootstrap, dan overlayscrollbars:

npm i @fortawesome/fontawesome-free icheck-bootstrap overlayscrollbars
npm i --save-dev @babel/plugin-external-helpers

Setelah selesai menginstal, buka file boostrap.js yang berada dalam folder resources/js, tambahkan setelah baris window.$ = window.jQuery = require('jquery');:

require('overlayscrollbars');
require('../../vendor/almasaeed2010/adminlte/dist/js/adminlte');

Kemudian buka file app.scss yan berada dalam folder sass, replace isinya dengan isi sebagai berikut:

// Fonts
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic');
@import '~@fortawesome/fontawesome-free/css/all.css';
// OverlayScrollbars
@import '~overlayscrollbars/css/OverlayScrollbars.css';
// iCheck
@import '~icheck-bootstrap/icheck-bootstrap.css';
// AdminLTE
@import '../../vendor/almasaeed2010/adminlte/dist/css/adminlte.css';
// Bootstrap
// Already imported by AdminLTE
//@import '~bootstrap/scss/bootstrap';

Berikutnya buka file config adminlte.php di folder config lalu ubah nilai pada baris 210 dari false menjadi true

'enabled_laravel_mix' => true,

Terakhir jalankan perintah:

npm run dev

Jika terdapat masalah pada menu yang tidak bisa diklik atau tampilannya seperti berikut:

Buka kembali file bootstrap.js, perhatikan pada baris berikut:

require('../../vendor/almasaeed2010/adminlte/dist/js/adminlte');

Ganti dengan:

require('../../public/vendor/adminlte/dist/js/adminlte');

Alternatif lain, yaitu dengan menambahkan pada section js:

@section('js')
    <script src="{{ asset('vendor/adminlte/dist/js/adminlte.min.js') }}"></script>
@stop

Cukup sampai di sini pada pembahasan cara integrasi Laravel dengan Laravel-AdminLTe. Semoga bermanfaat.

(Post ini telah diperbaharui pada: 8 Mei 2021)

Cafeteria ID

Cara Integrasi Laravel 8 dengan Laravel-AdminLTE

Instalasi Laravel 8

Instalasi Laravel-AdminLTE

Instalasi Laravel/ui

Generate Controller dan View laravel/ui

Membuat Database

Memasukkan Folder Project ke dalam VSCode

Setting Database di .env Laravel

Jalankan Migrate

Replace View Auth Laravel dengan View Auth Laravel AdminLTE

Jalankan Server

Menampilkan Foto User di Top Navbar

Mengubah Link Profile

Menu Sidebar

Laravel Mix

Post a Comment

Cara menjalankan Aplikasi Laravel Hasil Clone dari GitHub

Jadwal dan Jam Besuk Rumah Sakit UNS

Cara Memasukkan Aplikasi Project Laravel ke Repositori Github

Cara Menambahkan PATH ke dalam Environment Variables di Windows

Cara Membuka VSCode Melalui Command Prompt