Cara Integrasi Template AdminLTE dengan Laravel 5

Bagi kalangan programmer khususnya web programmer mungkin sudah tidak asing lagi bukan dengan template free yang cukup powerful ini?. Selain template ini bisa kita gunakan dengan gratis, adminLTE tidak kalah bagus dengan template dashboard berbayar lainnya. Ya meskipun tentu saja yang berbayar akan lebih bagus hehe Namun untuk programmer non profit atau yang belum ada budget untuk beli template premium, tidak ada salahnya bila mencoba template adminLTE.

Ketika kita memulai sebuah projek aplikasi berbasis web tentu hal pertama yang kita lakukan adalah membuat template yang dinamis bukan? memisahkan file index.html bawaanya adminLTE kedalam beberapa file. Biasanya sih 3 atau 4 file atau mungkin bisa lebih. Kita harus memisahkan header, navigasi, sidebar, konten dan footer. Tujuannya apa? agar template lebih dinamis dan tidak ada pengulangan kode.

Ketika kita membuat sebuah halaman biasanya yang berubah itu kontennya bukan? sedangkan header, navigasi, sidebar dan footer tidak berubah. Maka dari itu kita pisahkan elemen-elemen tersebut kedalam sebuah file agar kita tinggal memanggilnya ketika dibutuhkan.

Laravel sendiri adalah salah satu framework PHP yang lagi booming nih, dari tahun ke tahun penggunaannya semakin meningkat dalam pengembangan web. Perusahaan dan Startup pun biasanya memakai framework laravel untuk pengembangan projek webnya. Salah satunya adalah tempat saya bekerja, kami menggunakan laravel jika tidak ada spesifikasi tertentu yang mengharuskan kami menggunakan framework lain.

Jika setiap kali kita akan membuat projek baru kita harus memisahkan satu file index.html kedalam beberapa file akan cukup memakan waktu bukan? belum lagi kalau memisahkannya kurang teliti dan ada library javascript yang tidak terload maka cukup pusing juga benerinnya.

Nah, maka dari itu saya akan share salah satu package integrasi adminLTE dengan laravel 5. Nama packagenya adalah jeroennoten/laravel-adminlte. Kita tinggal menggunakan composer untuk mendownload package dan dependency nya kemudian tinggal pake deh. Gampang kan? hehe oke langsung aja kita ke langkah-langkah install packagenya.

Langkah 1: Pastikan sudah install composer

Jika kamu belum punya composer silahkan download installer composernya disini kemudian install composernya.

Langkah 2: Install Laravel 5

Kamu sudah install laravel? kalo belum bisa lihat disini untuk tutorial install laravel.

Langkah 3: Install Package

Installasi packagenya memiliki beberapa langkah.

1. Download source menggunakan composer

composer require jeroennoten/laravel-adminlte

2. Tambahkan service provider kedalam daftar providers di direktori config/app.php

JeroenNoten\LaravelAdminLte\ServiceProvider::class,

3. Publish assets (Memindahkan file asset dari package ke folder public)

php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\ServiceProvider" --tag=assets

Sampai disini proses instalasi berhasil dilakukan.

Langkah 4: Update Package

Untuk melakukan update, pertama update dulu package di composernya

composer update jeroennoten/laravel-adminlte

Kemudian publish ulang file hasil update tadi dengan menambahkan --force flag untuk menimpa file lama

php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\ServiceProvider" --tag=assets --force

Selamat package sudah versi terbaru dan siap digunakan ;)

Langkah 5: Cara Penggunaan

Untuk mulai menggunakan template silahkan buat file view blade dengan mengextend @extends('adminlte::page'). Berikut ini adalah list @yield yang digunakan:

• title : digunakan untuk <title> tag
• content_header : digunakan untuk judul halaman yang berada diatas konten
• content: merupakan keseluruhan isi konten
• css: css custom jika ingin memasukan css lain selain css adminLTE
• js: javascript custom jika ingin memasukan javascript lain

Berikut adalah contoh view blade penggunaan templatenya

{{-- resources/views/admin/dashboard.blade.php --}}

@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

Langkah 6: Mengubah konfigurasi

Untuk mengubah konfigurasi bawaan dari packagenya pertama  kita harus mempublish dulu confignya agar bisa bebas kita edit.

php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\ServiceProvider" --tag=config

Selanjutnya kita dapat langsung mengedit file konfigurasinya yang berada di config/adminlte.php. Di dalam file tersebut kita dapat mengubah list menu, warna tema, jenis layout dan lain-lain.

Langkah 7: Oprek sendiri templatenya

Jika kita ingin full control atau ingin mengubah template masternya tinggal publish view dari packagenya.

php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\ServiceProvider" --tag=views

Kemudian edit file yang ada di folder resource. Silahkan berkreasi sebagus mungkin, bahkan sampe gak keliatan kalo itu adalah template adminLTE hehe

Untuk configurasi lainnya silahkan buka github packagenya disini.

Dengan cara ini, setiap kali kita buat projek baru kita tinggal install dan pakai saja. Tidak usah repot-repot edit sendiri, pisahkan filenya dan lain-lain. Mudah bukan?

Happy kodingsanasini~