#08-Laravel-System Blade Template

Pada tulisan-tulisan sebelumnya saat menggunakan view file kita memanggil file xxxx.blade.php

Setiap website atau aplikasi yang kita bangun pasti kita buat dengan template yang dinamis.  karena kita pasti tidak ingin melakukan perubahan hampir di semua file jika ada perubahan kecil yang di lakukan.

Disini saya akan membuat contoh penerapan blade template secara lebih spesifik.

Langsung saja kita masuk ke contoh, di sini kita akan mencoba membuat 3 buah halaman dinamis dari controller Blog

Karena kita akan membuat 3 buah halaman sebagai contoh, maka sekarang buat 3 buah route pada belajar_laravel/routes/web.php.

// route blog
Route::get('/blog', 'BlogController@home');
Route::get('/blog/about', 'BlogController@about');
Route::get('/blog/contact', 'BlogController@contact');

Perhatikan route di atas :

  • Pada saat kita mengakses route /blog, maka yang akan dijalankan adalah method homeyang ada di dalam controller BlogController.
  • Pada saat kita mengakses route /blog/about, maka yang akan dijalankan adalah method about yang ada di dalam controller BlogController.
  • Pada saat kita mengakses route /blog/contact, maka yang akan dijalankan adalah method contact yang ada di dalam controller BlogController.

Karena route nya akan kita jalankan pada controller BlogController, sekarang kita buat dulu controller BlogControllernya, karena kita belum punya controller dengan nama BlogController.php.

Silahkan baca cara membuat controller laravel di sini.

Di sini saya membuat controller dengan menggunakan perintah php artisan.

Masuk ke direktori project laravel kita, dan ketik

php artisan make:controller BlogController

Setelah selesai membuat BlogController.php, sekarang kita buat method home, method tentang, method kontak lengkap dengan pemanggilan view nya masing-masing.

learning_laravel/app/Http/Controllers/BlogController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class BlogController extends Controller
{
    public function home(){
        $data['title']='Home';
		return view('home',$data);
	}

	public function about(){
		$data['title']='About Us';
		return view('about',$data);
	}

	public function contact(){
		$data['title']='Contact Us';
		return view('contact',$data);
	}
}

Perhatikan syntax di atas

  • Method home memanggil view home.blade.php
  • Method about memanggil view about.blade.php
  • Method contact memanggil view contact.blade.php

Nah sampai di sini kita akan membuat template master nya terlebih dulu.

Template master yang dimaksud di sini adalah template induk nya, buat sebuah view baru dengan nama master.blade.php.

learning_laravel/resources/views/master.blade.php

<html>
<head>
	<title>{{config('app.name')}}</title>
</head>
<body>
	<header>
		<h2>@yield('title')</h2>
		<nav>
			<a href="/blog">HOME</a>|
			<a href="/blog/about">TENTANG</a>|
			<a href="/blog/contact">KONTAK</a>
		</nav>
	</header>
	<hr/>
	<br/>
	<br/>
	<!-- title page -->
	<h3> {{$title}} </h3>
	<!-- view main content -->
	@yield('main')
	<br/>
	<br/>
	<hr/>
	<footer>
		<p>© <a href="https://ombagoes.com">ombagoes.com</a>. 2019 - 2020</p>
	</footer>
</body>
</html>

master.blade.php ini kita jadikan sebagai template induk dari template dinamis yang ingin kita buat, dimana pada master.blade.php ini kita buat segala sesuatu yang tidak berubah-ubah seperti menu, footer dan nama blog nya.

Oke, jadi sekarang semua view-view yang di panggil pada method yang akan kita hubungkan dengan template view master ini.

buat 3 buah view baru, yaitu view home, about dan contact.

learning_laravel/resources/views/home.blade.php

<!-- Menghubungkan dengan view template master -->
@extends('master')

<!-- title halaman -->
<!-- cara penulisan isi section yang pendek -->
@section('title', 'Home Page')

<!-- isi bagian main -->
<!-- cara penulisan isi section yang panjang -->
@section('main')

	<p>Ini Adalah Halaman Home</p>
	<p>Selamat datang !</p>

@endsection

learning_laravel/resources/views/home.blade.php

<!-- Menghubungkan dengan view template master -->
@extends('master')

<!-- title halaman -->
<!-- cara penulisan isi section yang pendek -->
@section('title', 'About Page')

<!-- isi bagian main -->
<!-- cara penulisan isi section yang panjang -->
@section('main')

	<p>Ini Adalah Halaman About</p>
	<p>Selamat datang !</p>

@endsection

learning_laravel/resources/views/contact.blade.php

Sampai di sini akan saya jelaskan dulu tentang fungsi-fungsi yang teman-teman lihat pada view master, dan view lainnya di atas.

Yaitu ada fungsi @extends(), @section, @yield.

Kita mulai dari view master.blade.php disana ada fungsi @yield() yang kita buat.

Fungsi @yield() berguna untuk bagian-bagian tertentu pada template website. dan nama bagian nya bisa kita tulis di dalam parameter fungsi @yield().

Seperti yang sudah kita buat, di sana kita membuat bagian judul_halaman dan bagian konten.

Nah, Selanjutnya pada bagian view lainnya, akan kita hubungkan ke template master.blade.php ini. dan tiap-tiap bagian @yield nya kita isi konten nya dari file view-view yang lainnya.

Lanjut ke view home, buka file home.blade.php.

dari gambar di atas saja pasti teman-teman sudah mengerti tentang penghubungan sistem template blade ini.

Pertama pada view home kita hubungkan dulu ke view master dengan menggunakan fungsi @extends. kemudian semua isi yang ada diantara fungsi @section akan di tampilkan pada bagian fungsi @yield.

Begitu juga dengan view kontak dan view tentang. intinya akan sama saja.

Sekarang kita buka web browser http://localhost:8000/blog

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>