Cara Integrasi Laravel 8 dengan

Laravel-AdminLTE
CafeteriaSEPTEMBER 14, 2020

ShareShare
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.
Pastikan laravel installer kalian sudah di-update ke versi 4.

D:\>laravel --version

Laravel Installer 4.0.3

Kemudian ketik:

laravel new nama_projectmu

Nama projectnya akan kami beri nama l8-adminlte (eldelapan strip adminlte).

laravel new 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:

composer require jeroennoten/laravel-adminlte

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

php artisan ui:auth

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

Publish File Asset, Configurasi, dan Translation

Laravel/AdminLTE
Jalankan perintah berikut untuk melakukan publish:

php artisan adminlte:install --interactive

Ketik: yes, yes, dan yes.

Hasil akhirnya bisa kita lihat
di config/adminlte.php, resources/views/vendor/adminlthe,
dan resources/lang/vendor/adminlte.

Instal Semua Asset Plugin

artisan adminlte:plugins install

Perintah ini akan menginstal semua plugin yang terdapat di AdminLTE dan
meletakkannya dalam folder public/vendor sehingg dapat kita panggil sesuai dengan
kebutuhan kita.

Install File AdminLTE dan Otentikasi Views dan Route

php artisan adminlte:install --only=main_views

php artisan adminlte:install --only=auth_views

Jalankan Server
php artisan serve

Buka Browser, ketik: localhost:8000

Halaman Welcome Laravel 8

Pergi ke halaman Register dengan klik menu “Register”

 Hal
aman Form Register Laravel-AdminLTE

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

Tampilan halaman dashboard Laravel

Tampak pada halaman Home Dashboard memiliki tampilan yang berantakan. Sekarang
untuk memperbaiki 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:

Halaman Dasboard Laravel-AminLTE

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.

Buk 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:
 Menu user dan foto avatar user

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 .jpg atau .png. Buat folder images di 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:

Foto avatar user dari public/umages

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 folder app/Http/Controllers, letakkan di dalam

method index:

public function index()

$user = auth()->user()->name;

return view('profile', compact('user'));

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

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 233, 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' => 'admin/settings',

'icon' => 'fas fa-fw fa-user',

],

'text' => 'change_password',

'url' => 'admin/settings',

 'icon' => 'fas fa-fw fa-lock',

],

],

Hasilnya:

Home Dashboard

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