Blade Template Laravel
BLADE TEMPLATE LARAVEL
Disini kita akan mencoba membuat
implementasi penggunaan blade template laravel sederhana dengan menggunakan
bootstrap Adminlte.
Admin
LTE merupakan
sebuah template yang dibangun dengan framework css Bootstrap, salah satu template web berbasis bootstrap yang cocok digunakan
untuk dashboard admin. Desain yang dipakai berbentuk flat yang memang menjadi
tren disaat ini.
Blade adalah template engine yang disediakan oleh framework laravel atau
bawaan dari framework laravel. Blade adalah konversi dari bahasa pemrograman
PHP ke Blade itu sendiri agar lebih mudah dipahami dan lebih singkat. Kenapa
kita harus menggunakan Blade ?, karena dengan menggunakan blade dalam mengatur
layout web yang kita bangun akan lebih mudah. Mudah disini jika anda sudah
mengetahui dasar – dasar blade itu sendiri.
Untuk lebih jelasnya ikuti langka
dibawah ya.
- Download admin lte bebas download yang mana saja, atau bisa download di github https://github.com/almasaeed2010/AdminLTE
- Bikin
route di file web.php misalnya dengan nama admin lte. Yang akan dilakukan
disini yaitu pembuatan template dasar, jadi template tersebut bisa kita gunakan
beberapa kali dengan extends dari admin lte.
Keterangan: Dalam route diatas kita membuat url baru dengan nama adminlte, yang nantinya route ini akan merender view yang bernama admin lte. Jika langsung kita buka dengan http://localhost/didibener/public/adminlte maka akan error. Jadi ikuti dulu langkah selanjutnya.
- Buat view baru yaitu file adminlte.blade.php Isi dari adminlte.blade.php ini yaitu isi dari index.html yang ada dalam admin lte. Buka file index.html tersebut dan copy paste ke dalam file adminlte.blade.php.
- Jika kita coba buka kembali http://localhost/didibener/public/adminlte akan
muncul tampilan tapi belum sempurna artinya masih berantakan. Seharusnya
tampilan nya seperti dibawah ini:
- Untuk
membuat view adminlte sempurna yang harus dilakukan yaitu : Buat file head.blade.php
di directory C:\xampp\htdocs\didibener\resources\views\template yang sebelumnya kita
telah membuat folder template dalam views . Isi dari file head.blade.php yaitu
head yang ada di file adminlte.blade.php yang ditandai dengan tag <head> sampai </head> *hanya
isinya saja tidak dengan tag <head> nya. Lalu ubah link css
nya supaya
template admin lte bisa terlihat rapih. Kita tambahkan link
”{{url(‘Asset/...[isi ekstensi css nya tetap]...’)}}” untuk semua syntak
yang
berekstensi css. Lebih jelasnya lihat gambar dibawah:
- lalu Include file tersebut dalam adminlte.blade.php, seperti gambar dibawah:
- Buat file header.blade.php dalam directory yang sama dengan file head. Lakukan langkah yang sama seperti pada file head.blade.php. cut syntak header yang ada dalam adminlte.blade.php dari awal tag <header > sampai </header> lalu paste ke dalam file header.
- Buat file sidebar.blade.php. Dan lakukan langkah yang sama seperti sebelumnya.
- Buat file footer.blade.php. cut isi footer dalam adminlte.blade.php paste ke file footer.
- Buat file control-sidebar.blade.php. cut syntak dalam tag <aside class=”control-sidebar>.
- Buat file script.blade.php. cut semua syntak dengan tag <script>...</script> dan paste dalam file ini.
- Setelah dipisahkan maka isi file adminlte hanya 500 baris, tapi itu masih panjang karena template utamanya masih belum kita edit, template utama yaitu ‘content-wrapper’.
- Hapus
semua isi content-wrapper lalu ketikan “@yield(‘content’)”
- Hasilnya adalah seperti di bawah ini
- Buat
route kembali di web.php.
- Buat index.blade.php dalam directory
C:\xampp\htdocs\didibener\resources\views\data-barang yang sebelumnya kita membuat
folder data-barang terlebih dahulu.
- Lalu Buat controller baru dengan nama DataBarangController.php di direktory C:\xampp\htdocs\kel5\app\Http\Controllers.
18. Maka
kita buka dengan http://localhost/didibener/public/data-barang, data-barang ini kita tentukan dalam file route yang dibuat tadi.
Maka akan muncul seperti dibawah:
Komentar
Posting Komentar