Sebelum saya menjelaskan
tentang bagaimana caranya memadukan Blade dan Template Bootstrap, apakah ada
yang tau apa itu blade? Yaap… 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.
Sudah tau kan apa itu
Blade, karena sudah tau apa itu Blade, sekarang kita harus mengetahui dulu
dasar –dasar Blade agar bisa memadukan Blade dengan Template Bootstrap. Kita langsung
saja ke pembahasannya.
1.
DASAR
– DASAR BLADE
A. Menampilkan Data (echo)
Nama Saya : {{{$nama}}}
Jika
menggunakan PHP identic dengan
Nama Saya : <?php
echo $nama; ?>
Kita
juga bisa menggunakan fungsi dibawah ini
Nama Saya : {{$nama}}
B. Menampilkan Data setelah dilakukan Pengecekan
Fungsi
ini bermanfaat ketika proses pengecekan variabel. Jika ditemukan maka
menampilkan variabel itu sendiri, jika tidak akan menampilkan vaariabel
defaultnya. Lebih jelasnya lihat dibawah ini.
{{{isset($name)?$name : ‘Default’}}}
Atau
bisa menggunakan code dibawah ini yang lebih simple.
{{{$name or ‘Default’}}}
C. Menampilkan Raw Text dengan Curly
Braces
Untuk
menampilkan text raw dalam blade kita bisa menggunakan tanda @{{ … }} seperti
dibawah ini.
@{{Kalimat yang ingin ditampilkan}}
D. Menggunakan Statement (if Endif, If
Else Endif)
Untuk
menggunakan statement if di blade caranya seperti dibawah ini.
@if(‘A’==’A’)
@{{Betul
ini adalah A}}
@endif
Cara
menggunakan If Else di balde
@if(‘A’==’A’)
@{{Betul ini adalah A}}
@else
@{{Ini Bukan A}}
@endif
Menggunakan
If Elseif
@if(‘A’==’A’)
@{{Betul ini adalah A}}
@elseif(‘B’==’B’)
@{{Betul ini adalah B}}
@else
@{{Ini Bukan A dan B}}
@endif
E. Menggunakan Perulangan (For, Foreach,
While)
Untuk
menggunakan fungsi For maupun Foreach diblade caranya seperti dibawah ini.
For
@for($i = 0; $i
< 10; $i++)
{{$i}}
@endfor
Foreach
@foreach($users as
$user)
ID user {{$user->id}}
@endforeach
While
@while(true)
I’m looping forever.
@endwhile
F. Include Sub View
@include(‘nama
view’)
G. Memberikan Komentar
Untuk
memberikan komentar pada blade caranya seperti dibawah ini.
{{--Dengan begini
kalimat ini tidak akan tampil--}}
2. MEMADUKAN BLADE DENGAN TEMPLATE
BOOTSTRAP
Sekarang kita akan
membuat template sederhana dari bootstrap dengan memanfaatkan blade templating.
Secara sederhana untuk kerangka membuat layout dengan blade dan membaginya
menjadi bagian-bagian kecil seperti dibawah ini.
Untuk persiapan
membuat templating sederhana menggunakan laravel ini, yang harus dipersiapkan
adalah sebagai berikut :
1. Download
template bootstrap AdminLTE.
2. Dari
hasil download template bootstrap AdminLTE tadi, kita copy kan semua folder
yang ada ke folder ProjectLaravel dan taruh di folder public.
3. Untuk
file dashboard.html dan login.html copy kan ke folder ProjectLaravel lalu tarus
di resources/views.
4. Setelah
itu rename dashboard.html menjadi dashboard.blade.php dan login.html menjadi
login.blade.php.
Kemudian di file dashboard.blade.php cari code dibawah
ini:
Udah menjadi seperti ini.
Syntax code paling bawah
Ubah menjadi seperti ini
Selanjutnya syntax code di dashboard.blade.php kita
bagi dalam beberapa bagian, disini saya membaginya menjadi head, header,
sidebar, content, footer, sidebarControl, dan jscript. Pertama kita mengambil
syntax untuk head.
Ambil atau cut code di dashboard.blade.php diantara
<head> sampai dengan </head> dan paste ke head.blade.php.
Di dalam file dashboard.blade.php yang syntax codenya kita
ambil tadi ganti dengan syntax code menjadi seperti dibawah ini.
@include(‘head’)
Jadi dashboard.blade.php akan jadi seperti ini.
Masih di file dashboard.blade.php, sekarang kita akan mengambil
syntax untuk header.
Ambil atau cut code di dashboard.blade.php diantara
<header> sampai dengan </header> dan paste ke header.blade.php.
Di dalam file dashboard.blade.php yang syntax codenya kita
ambil tadi ganti dengan syntax code menjadi seperti dibawah ini.
@include(‘header’)
Jadi dashboard.blade.php akan jadi seperti ini.
Masih di file dashboard.blade.php, sekarang kita akan mengambil
syntax untuk sidebar.
Ambil atau cut code di dashboard.blade.php diantara
<aside class=”main-sidebar”> sampai dengan </aside> dan paste ke
sidebar.blade.php.
Di dalam file dashboard.blade.php yang syntax codenya kita
ambil tadi ganti dengan syntax code menjadi seperti dibawah ini.
@include(‘sidebar’)
Jadi dashboard.blade.php akan jadi seperti ini.
Masih di file dashboard.blade.php, sekarang kita akan mengambil
syntax untuk contet.
Ambil atau cut code di dashboard.blade.php diantara
<section class=”content”> sampai dengan </section> dan paste ke base.blade.php.
Tambahkan @extends(‘dashboard’), @section(‘content’) dan @stop maksudnya yaitu
file ini didefinisikan sebagai content dan turunan dari dashboard. Untuk lebih
jelasnya lihat gambar dibawah ini.
Di dalam file dashboard.blade.php yang syntax codenya kita
ambil tadi ganti dengan syntax code menjadi seperti dibawah ini.
@yield(‘content’)
Jadi dashboard.blade.php akan jadi seperti ini.
Masih di file dashboard.blade.php, sekarang kita akan mengambil
syntax untuk footer.
Ambil atau cut code di dashboard.blade.php diantara
<footer class=”main-footer”> sampai dengan </footer> dan paste ke footer.blade.php.
Di dalam file dashboard.blade.php yang syntax codenya kita
ambil tadi ganti dengan syntax code menjadi seperti dibawah ini.
@include(‘footer’)
Jadi dashboard.blade.php akan jadi seperti ini.
Masih di file dashboard.blade.php, sekarang kita akan mengambil
syntax untuk sidebarControl.
Ambil atau cut code di dashboard.blade.php diantara
<aside class=”control-sidebar control-sidebar-dark”> sampai dengan
</aside> dan paste ke sidebarControl.blade.php.
Di dalam file dashboard.blade.php yang syntax codenya kita
ambil tadi ganti dengan syntax code menjadi seperti dibawah ini.
@include(‘sidebarControl’)
Jadi dashboard.blade.php akan jadi seperti ini.
Masih di file dashboard.blade.php, sekarang kita akan mengambil
syntax untuk JavaScript.
Ambil atau cut code di dashboard.blade.php diantara
<!-- jQuery 2.2.3 --> sampai dengan </body> dan paste ke jscript.blade.php.
Di dalam file dashboard.blade.php yang syntax codenya kita
ambil tadi ganti dengan syntax code menjadi seperti dibawah ini.
@include(‘jscript’)
Jadi dashboard.blade.php akan jadi seperti ini.
Jika semuanya sudah selesai, sekarang kita bisa
melihat hasilnya seperti dibawah ini :
Sekarang kita akan membuat DataBarangController,
dengan perintah sebagai berikut:
Masukkan perintah php
artisan make:controller DataBarangController --resource. Ketikkan perintah
di atas dimana tempat project laravel berada, sebagai contoh project laravel
saya berada di c:\xampp\htdocs\Peweb,
untuk Pweb adalah nama folder
project laravel. File DataBarangController yang sudah dibuat bisa dilihat di
folder Project Laravel yaitu di app\Http\Controllers.
Selanjutnya masukkan code seperti dibawah ini pada
file web.php yang ada di routes
Selanjutnya kita buat file bernama index.blade.php dan
masukkan code seperti di bawah ini. Lalu pada resources/views kita buat folder
baru bernama data-barang dan simpan file index.blade.php di folder data-barang
tersebut.
Fungsi dari file index.blade.php adalah sebagai
content dari dashboard admin LTE.
Jika sudah, sekarang kita bisa melihat hasilnya dengan
url sebagai berikut :
http://localhost/Pweb/public/data-barang
Maka tampilannya akan berbeda dari tampilan awalnya
karena kita sudah mengganti isi dari content dashboard adminLTE tersebut.
Berikut sedikit ulasan tentang Memanfaatkan Template Blade pada Laravel.
Untuk ulasan selanjutnya mengenai Laravel bisa di lihat di postingan selanjutnya
Terimakasih 😊
Untuk ulasan selanjutnya mengenai Laravel bisa di lihat di postingan selanjutnya
Terimakasih 😊
