Blade Templates pada Laravel

06 Apr, 2016

Laravel

Hirzi Widyan Putra

Judul yang akan saya bahas kali ini adalah Belajar Blade Templates pada Laravel 5.2 , yap tutorial ini lanjutan dari tutorial sebelumnya. Seperti yang sudah saya bilang, jika sobat membaca tutorial ini, sobat juga harus sudah belajar mengenai tutorial-tutorial sebelumnya yang sudah saya post di Gilacoding tentunya.

Mengenai Array yang ada di dalam with kemaren, kita mengoper data di compact ke 1 variable dengan nama 'data' , tetapi ternyata kita bisa menggunakan compact tanpa menuliskan with lagi, karena data kita hanya sedikit. Jadi contoh script nya pada AboutController metode index seperti ini :

public function index() {
    $judul = 'gilacoding';
    $tanggal = '14-03-2012';
    return view('about', compact('judul', 'tanggal'));
}

Lalu di about.blade.php nya kita hilangkan tanda array nya menjadi nama variable nya saja :

Website saya : {{ $judul }} <br/>
Tanggal hosting : {{ tanggal }}

Kita tampilkan, hasilnya memang sama saja :

compact laravel

Selanjutnya saya ingin menjelaskan mengenai Escape, Misalnya kita memasukkan data yang ada tag html atau javascript nya akan otomatis ke render kalau tidak kita escape. Contoh misal pada data di AboutController tadi isi di data judul dan tanggal nya kita beri tag italic dan juga bold :

public function index() {
	$judul = '<i>gilacoding</i>';
	$tanggal = '<b>14-03-2012</b>';
    	return view('about', compact('judul', 'tanggal'));
}

Lalu pada about.blade.php :

Website saya : {{ $judul }} <br/>
Tanggal hosting : {{ $tanggal }} <br/>
<br/>
======== Tanpa Escape ======== <br/>
<br/>
Website saya : {!! $judul !!} <br/>
Tanggal hosting : {!! $tanggal !!} <br/>

Hasil :

data laravel

Yap, terlihat jelas kan. Yang tanpa escape tag bold dan italic nya ngerender tag html nya, {!! !!} ini saya pake juga kok karena backend nya saya nulis pake tinymce, jadi tag Paragraph, bold, italic, link, dsb. Otomatis ke render saat ditampilkan.

Kita lanjut ke Sistem Templating, misalnya kita punya beberapa halaman yang sama dan bagian header dan footer nya tetep itu-itu aja / ga berubah tapi content nya yang berubah-ubah. Biar ga bingung kita ke contoh nya langsung sob.

Buat blade baru, pada views kita buat juga folder dengan nama Templates, dan buat view nya dengan nama index.blade.php, Jadi struktur nya seperti ini :

struktur laravel

Kita isi dalam index.blade.php nya gini :

<!DOCTYPE html>
<html>
<head>
	<title>Latihan Blade Templates</title>
</head>
<body>
@include('templates.header')

	@yield('content')

@include('templates.footer')
</body>
</html>

Karena disitu saya include kan header dan footer nya di file lain juga jadi kita buat lagi file header.blade.php dan footer.blade.php dalam 1 folder templates, isi nya terserah saja.

header.blade.php :

<h1>INI HEADER</h1>

footer.blade.php :

<h1>INI FOOTER</h1>

Sekarang pada about.blade.php nya harus kita extends :

@extends('templates.index')
@section('content')

Website saya : {!! $judul !!} <br/>
Tanggal hosting : {!! $tanggal !!} <br/>

@stop

Ket :

pada extends kita memanggil index.blade.php yang merupakan pondasi halaman html kita yang berada di folder templates/index.blade.php,
Lalu nama yang ada di section disesuaikan dengan @yield pada index.blade.php,
@stop untuk mengakhiri section.

Kita tambahkan satu contoh lagi, kita buat halaman contact. Buat file contact.blade.php di folder views sejajar dengan about.blade.php, isi nya seperti ini :

@extends('templates.index')

@section('content')
Kontak saya :
	<ul>
		<li>+6280831233</li>
		<li>+6286552212</li>
		<li>+6282099499</li>
	</ul>
@stop

routes.php kita tambahkan url contact :

Route::get('/contact', 'AboutController@contact');

Dan pada AboutController tambahkan metode contact :

public function contact() {
    return view('contact');
}

Hasilnya :

Yap, header dan footer nya tetep sama tapi content nya berubah. Cara ini juga di pake di gilacoding loh, cuman ada tambahan yaitu sidebar nya juga saya include kan :D

Sekarang misal pada contact nomor telpon nya kita jadi kan array di AboutController pada metode contact akan kita oper nomor nya ke contact.blade.php, ikuti script nya begini :

public function contact() {
	$contacts = ['+6280831233', '+6286552212', '+6282099499'];
   	return view('contact')->with('contacts', $contacts);
}

Lalu di contact.blade.php nya seperti ini :

@section('content')
Kontak saya :

	@if(count($contacts))
	<ul>
		@foreach($contacts as $contact)
			<li>{{ $contact }}</li>
		@endforeach
	</ul>
	@else
	        <p>Contact tidak ditemukan</p>
	@endif
@stop

Ket :

Jika ingin menggunakan if else pada Laravel cukup dengan @if , @elseif, @else, dan untuk mengakhiri nya @endif,
Fungsi dari count didalam if adalah untuk cek data Array nya apakah ada, jika ada maka tampil, jika tidak ada / else maka menampilkan text di dalam @else,
@foreach($contacts as @contact) fungsi nya untuk melakukan perulangan, untuk mengakhiri nya menggunakan @endforeach.

Contoh jika Array pada about.blade.php di metode contact nya kita hapus :

public function contact() {
    $contacts = [];
    return view('contact')->with('contacts', $contacts);
}

Maka saat kita panggil url contact yang akan tampil seperti berikut :

Data array Laravel tidak tampil

Yap, data tidak ditemukan sesuai dengan yang sudah saya jelaskan tadi.

Sekian tutorial mengenai Blade Templates kali ini, yang sudah saya bahas diatas semua saya terapkan pada web ini loh sob :D jadi sayang banget kalo sobat tidak mempelajari nya.

Tunggu tutorial selanjutnya, pantau terus dan share jika bermanfaat sob!

Terimakasih.

Read Blade Templates pada Laravel

Blade Templates pada Laravel