Pertemuan 5 : Integrasi AdminLTE Dengan Laravel 5.4

AdminLTE dan Laravel

Template Website merupakan salah satu bahan dokumen atau file yang sangat di butuhkan dalam hal pembuatan website. Pada dasarnya, seorang webmaster perlu mengetahui pengertian template website itu sendiri sebelum membangun sebuah website.Template atau Theme merupakan dokumen atau file yang berisikan model-model tambahan yang akan muncul pada saat proses pembuatan dokumen lain. Sedangkan Website merupakan situs atau halaman di Internet yang menyediakan informasi dan tertanam pada World Wide Web (www).

Dari pengertian 2 kata diatas, Pengertian Template Website itu adalah sebuah desain tampilan halaman dengan berisikan dokumen file model-model tambahan yang dikodekan dalam bahasa program dan siap pakai.

Template AdminLTE adalah salah satu template yang paling sering digunakan oleh web developer sebagai backend template pada proyek yang sedang dikerjakan. template ini dibuat menggunakan framework bootsrap yang merupakan framework CSS yang paling banyak digunakan di kalangan web desainer sekarang.
Template AdminLTE juga bisa kita integrasikan dengan berbagai framework web salah satunya adalah Laravel. Untuk fungsi dan keunggulan laravel, sudah saya bahas pada postingan sebelumnya.

Memadukan AdminLTE Dengan Laravel
Sebelum kita masuk pada cara memadukan AdminLTE dengan laravel, sebelumnya kita harus mengetahui dan memahami mengenai Template Blade pada laravel. Blade adalah template engine yang disediakan oleh framework laravel. Blade adalah konversi dari bahasa pemrograman PHP ke Blade itu sendiri agar mudah dipahami dan lebih singkat.
Setelah memahami Blade, selanjutnya kita akan mulai memadukan AdminLTE kedalamnya. Pertama kita ubah file route (web.php)yang ada dalam folder routes dengan menambahkan syntax :

Route::get('/adminlte', function () {

return view('adminlte');

});

Selanjutnya buat file adminlte.blade.php dan simpan kedalam folder views.

Masukan seluruh file template AdminLTE kedalam folder public dalam project laravel dan ganti nama foldernya menjadi assets (sesuai keinginan).

Cari file index.html dalam template AdminLTE, kemudian copy syntax didalamnya ke file adminlte.blade.php yang ada dalam folder views project laravel.

Ubah sedikit bagian syntax yang berfungsi memanggil data di folder lain seperti gambar dibawah :

Syntax diatas berfungsi untuk memanggil (menerapkan) bootstrap kedalam template. Selanjutnya ubah juga seperti gambar dibawah ini :

Syntax diatas berfungsi untuk memanggil javascript untuk menampilkan animasi dalam template. Supaya gambar (foto) dapat terbaca, ubah syntax berikut :

Sekarang kita coba jalankan project laravel sesuai routenya :

Jika semua langkah benar, maka akan tampil tampilan Template AdminLTE seperti gambar diatas ketika project dipanggil (dijalankan).

Akan tetapi, karena syntax dari AdminLTE ini, sangat kompleks dan memiliki banyak baris, untuk proses edit nya cukup memakan waktu dan juga ketelitian yang ekstra. Maka dari itu selanjutnya kita akan membagi syntaxnya kedalam beberapa bagian dengan tujuan untuk mempermudah proses edit.

Pertama buat folder baru dalam views dengan nama template yang berfungsi menampung bagian syntax yang di pecah.

Kita pisahkan bagian head dengan cara cut bagian head dari syntax yang ada dalam adminlte.blade.php kemudian buat file baru dengan nama head.blade.php dan masukan syntax yang tadi di cut serta simpan dalam folder template.

Selanjutnya, pidsahkan bagian header. Hampir sama dengan bagian head, namun simpan file baru dengan nama header.blade.php kedalam folder template. Cut syntax dari <header> sampai </header>.

Pisahkan bagian <aside class="main-sidebar"> sampai </aside> dan simpan file barunya dengan nama sidebar-left.blade.php karena syntax ini adalah syntax untuk sidebar sebelah kiri yang memuat main side bar template.

Kemudian pisahkan juga bagian <aside class="control-sidebar control-sidebar-dark"> sampai </sidebar> dan simpan dengan nama file sidebar-right.blade.php karena syntaxnya berisi sidebar sebelah kanan yang memuat pengaturan.