Home
Laravel

Cara Integrasi Laravel 7 dengan Laravel-AdminLTE, Step by Step

Membuat create-project baru Laravel

Tentukan lokasi folder tempat project laravel akan dibuat, lalu buka command prompt, arahkan ke folder tersebut, ketik perintah composer untuk instalasi Laravel.

composer create-project --prefer-dist laravel/laravel nama_project

Instalasi Laravel-AdminLTE

Setelah kita berhasil membuat folder project Laravel, selanjutnya kita akan menginstal Laravel-AdminLTE.

composer require jeroennoten/laravel-adminlte

Instalasi Laravel/ui

Semejak make:auth dihilangkan dari Laravel, kita tidak bisa lagi membuat otentikasi langsung dengan perintah tersebut. Namun, kita bisa tetap membuat otentikasi dengan menginstal laravel/ui

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 CMD. Pada contoh di bawah ini, kita menggunakan CMD.

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

Memasukkan Folder Project ke dalam VSCode

Ketik dalam folder melalui CMD

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=laravel
DB_USERNAME=root
DB_PASSWORD=

Ubah isian, sesuaikan dengan database kalian.

Contoh:

DB_DATABASE=nama_database
DB_USERNAME=root
DB_PASSWORD=root

Simpan perubahan yang dilakukan.

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


Klik "REGISTER"


Isikan inputan form register. Klik tombol Register, setelah itu halaman akan reload dan masuk ke dalam home dashboard.


Tampak pada halaman Home Dashboard memiliki tampilan yang berantakan. Hal ini disebabkan karena kita tidak menginstal bootstrap sebagai ui sehingga tidak memiliki asset dalam folder public.

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, 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 Vavbar

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

Caranya? Pergi ke config/adminlte.php, lalu menuju ke bagian setting menu user

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

Ubah nilai false menjadi true

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

Jangan refresh dulu halamannya karena akan terjadi error. Pergilah ke app/User.php, dan tambahkanlah baris kode berikut tepat setelah bagian protected $casts atau sebelum penutup class User.

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';
}

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. Kalau bisa gunakan gambar persegi minimal 300x300 dengan ekstensi jpg atau png.

Buat folder baru di dalam folder public, namakan foldernya dengan nama images.

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

Contoh:

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

Hasilnya:



Menu Sidebar

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

Kita akan menambahkan menu Home dan menghapus menu-menu yang tidak diperlukan.

 'menu' => [
        [
            'text' => 'search',
            'search' => true,
            'topnav' => true,
        ],
        [
            'text' => 'blog',
            'url'  => 'admin/blog',
            'can'  => 'manage-blog',
        ],
        [
            '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:


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

P.S

Menggunakan Asset Bootstrap

Jika kita ingin memiliki asset bootstrap dalam folder public, gunakan perintah 

php artisan ui bootstrap

Lalu, install npm dan menjalankan proses compile asset

npm install && npm run dev

Compile Asset dengan Laravel - Mix

Jika kita ingin menggunakan Laravel - Mix untuk mengcompile asset agar lebih efisien sehingga tidak menggunakan banyak file asset. Install library atau package npm yang dibutuhkan AdminLTE:

Diantara library yang diinstal melalui npm, yaitu fontawesome, icheck-bootstrap, dan overlayscrollbars:

npm i @fortawesome/fontawesome-free icheck-bootstrap overlayscrollbars

Setelah selesai menginstal, berikutnya kita perlu mengimportnya ke file bootstrap.js yang berada di dalam folder resources/js. 

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

Tempatkan setelah window.$ = window.jQuery = require('jquery'); seperti yang terlihat di bawah ini:

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');
    require('overlayscrollbars');
    require('../../vendor/almasaeed2010/adminlte/dist/js/adminlte');
    require('bootstrap');
} catch (e) {}

Simpan ulang. Setelah itu buka file app.scss yang berada di dalam folder resources/sass, hapus semua isinya dan ganti dengan:

// 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';

Simpan ulang.

Langkah terakhir, pergi ke file config/adminlte.php, lalu set nilai enabled_laravel_mix dari false ke true

'enabled_laravel_mix' => true,

Simpan ulang, lalu jalankan perintah:

npm run dev

Proses compile asset akan dijalankan.

Jika kalian punya masalah mengenai popper.js yang tidak tampil dengan baik, kalian perlu mengubah versi jquery dan popper.js: 

npm uninstall jquery popper.js
npm i jquery@3.4.1 popper.js@1.16.0
npm run dev

Hal ini terjadi karena Laravel-AdminLTE menggunakan versi yang berbeda dengan versi yang digunakan di package.json Laravel, sehingga saat menggunakan Laravel - Mixer perlu disesuaikan kembali dengan versi Laravel-AdminLTE.

Post a Comment