BELAJAR MENERAPKAN TEMPLATE ADMINLTE DI LARAVEL

3

Pada artikel kali ini akan dibahas bagaimana cara menerapkan sebuah template pada laravel agar bisa dipakai dan memudahkan kita dalam membangun sebuah web. Template yang dipakai adalah AdminLTE versi 2.4.2. Sebelum mulai menerapkan template tersebut, hendaknya kita faham dulu konsep blade pada laravel. Blade adalah sebuah template engine bawaan laravel yang berfungsi untuk memudahkan kita dalam mengatur layout web yang kita bangun. Agar tidak bertele-tele langsung saja kita mulai pembahasannya.

  1. Langkah pertama ekstrak file template AdminLTE anda dan tempatkan di folder public yang ada di dalam folder instalan laravel anda. Contohnya nama folder instalan laravel penulis adalah kel1, sehingga file AdminLTE yang sudah di ekstrak tadi ditempatkan pada direktori C:\xampp\htdocs\kel1\public.
  2. Selanjutnya ganti nama folder AdminLTE menjadi asset, atau nama lain pun bisa asalkan benar dalam pengaksesannya nanti. Agar seragam, kita coba ubah saja namanya menjadi asset.
  3. Buat sebuah file baru pada folder resources/views dan beri nama adminlte.blade.php
  4. Saat ini file yang dibuat tersebut masih kosong. Untuk mengisinya cari file index.html di dalam asset (folder AdminLTE yang sudah diubah namanya tadi) lalu copy semua isi filenya dan paste menjadi isi file adminlte.blade.php
  5. Setelah selesai coba kita perhatikan script yang ada pada adminlte.blade.php, disana akan terdapat beberapa link yang berekstensi .css dan .js
  6. Silahkan ubah link tersebut, sesuaikan dengan lokasi filenya pada folder asset kita. Misalnya link:

1

Diubah menjadi:

2

  1. Selanjutnya kita coba akses di browser dengan mengetikan http://localhost/kel1/public/asset/ dan jika sudah benar maka akan muncul tampilan sebagai berikut:

3

  1. Sampai disini kita sudah berhasil menerapkan template tersebut ke laravel, namun jika diperhatikan, script yang ada pada file adminlte.blade.php sangat panjang dan kita bisa mempersingkat script tersebut dengan membagi-bagi isinya. Caranya buat folder baru dengan nama template di resources/views.
  1. Buat file baru di folder itu dengan nama head.blade.php
  2. Kembali ke script adminlte.blade.php dan cari sintak <head> dan </head> kemudian cut konten yang ada di dalamya, ingat hanya kontennya saja, <head> dan </head> nya tidak usah ikut di cut.
  3. Buka file head.blade.php di folder template yang sudah dibuat tadi dan paste konten yang tadi sudah di cut dari adminlte.blade.php
  4. Setelah itu kembali ke file adminlte.blade.php dan isi bekas konten yang di cut tadi dengan sintak @include(‘template.head’). sehingga hasil akhirnya menjadi:

4

  1. Lakukan hal yang sama pada sintak lain yang bisa dipisahkan dari script, misalnya konten yang ada di dalam <aside> dan </aside>, kita bisa cut konten tersebut, paste di file baru pada folder template dan beri nama aside.blade.php dan pada file adminlte.blade.php ditambahkan @include(‘template.aside’) sehingga sintaknya menjadi:

5

  1. Hal yang sama bisa kita lakukan pada konten lain, misalnya konten yang ada di antara <header> dan </header>.
  2. Setelah selesai, coba buka kembali browser, lalu coba akses seperti tadi ke http://localhost/kel1/public/asset/ . bagaimana hasilnya? Tidak terjadi apapun? Jika tidak ada tampilan yang berubah dan tidak error berarti anda berhasil ! karena tujuan konten yang dipindah-pindah barusan untuk mempersingkat script yang ada pada adminlte.blade.php

 

Sekian untuk bahasan kali ini, semoga bermanfaat, jika masih belum puas silahkan eksplore dan otak-atik sendiri templatenya sesuai keinginan anda. Jangan takut error, karena error adalah sahabat ^^

 

Referensi:

http://salatigadev.com/belajar-blade-template-di-laravel-5/

http://id-laravel.com/post/blade-bagian-1-berkenalan-dengan-template-engine

 

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

w

Connecting to %s

Buat situs web atau blog gratis di WordPress.com.

Atas ↑

%d blogger menyukai ini: