LaravelPemrograman

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. 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”

Halaman 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.

cafeteria

You may also like

Leave a reply

Your email address will not be published. Required fields are marked *

More in Laravel