Tutorial Dynamic Blade Component Laravel 8

byindeveloper •
0
Tutorial Dynamic Blade Component Laravel 8

Assalamualaikum, wr. wb. teman-teman. Jika sebelumnya kita sudah belajar sudah belajar Blade Component di Laravel 7, di tutorial ini kita akan belajar Dynamic Blade Component yang mana ini adalah fitur terbaru dari Laravel 8. Biasanya digunakan jika kita ingin merender komponen berdasarkan nilai dari suatu variabel.

Di Laravel 7 biasanya kita membuatnya seperti ini

<x-button title="Tambah Data"/>

Dimana data title tidak bisa dinamis, sedangkan di Laravel 8 kita dapat membuatnya seperti ini

<x-button :title="$variabel"/>

Damana data title dapat dinamis, tergantung nilai pada variable tersebut. Jangan lupa untuk menggunakan titik dua ( : ) sebelum properti. Dan setting variable di Controller atau route.

Agar tidak bingung yuk langsung praktik. Buka projek laravel 8 kalian. Disini saya menggunakan projek yang sudah saya upgrade dari Laravel 7 ke Laravel 8. Bisa dilihat disini cara upgradenya.


Pertama Buat Component

Ketikan perintah php artisan make:component Header pada terminal kalian, karena disini kita akan membuat komponen berupa header.

Sekarang cek pada App\View\Components\Header.php untuk Kelasnya, dan pada resources/views/components/header.blade.php untuk tampilannya atau blade filenya.

Sekarang silahkan buka file App\View\Components\Header.php 

Berikut tampilan kodenya, disini sudah saya edit untuk menambahkan variabel title dan mengeset-nya menjadi parameter di fungsi __construct seperti berikut:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Header extends Component
{
    public $title;

    public function __construct($title)
    {
        $this->title = $title;
    }


    public function render()
    {
        return view('components.header');
    }
}

Jika kita perhatikan terdapat dua fungsi pada kelas Button di atas:
Fungsi __contruct() dapat kita gunakan untuk passing data sedangkan fungsi render() untuk memanggil atau menampilkan file view yang telah dibuatkan laravel tadi.

Sekarang buka file resources/views/components/header.blade.php. Kemudian edit seperti berikut ini, jarena kita ingin membuat header pada navbar.

1
2
3
4
5
<div>
    <nav class="navbar navbar-expand-sm bg-light">
        <h3>{{$title}}</h3>
    </nav>
</div>

Kemudian setting variabelnya di controller agar valuenya bisa dinamis. Berikut potongan kode fungsi pada controller.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<?php

... 

public function index()
    {
        $title = "This is Header";
        $books = Book::all(); 

        return view('books.index', compact('books', 'title')); 
    }

...

Nama variabel yang kita buat adalah $title dengan value "This is Header". Jadi di view blade-nya kalian dapat memanggilnya seperti ini.

1
<x-header :title="$title"/>

Nilai pada properti title tergantung pada value yang di controller yang mana dapat kita ubah secara dinamis tanpa mengubahnya di view.

Berikut hasilnya:

Tutorial Dynamic Blade Component Laravel 8


Oke sekian tutorial kali ini, jika ada salah kata dalam penjelasan mohon maaf, Silahkan tanyakan di komen jika bingung, Semoga bermanfaat Wassalamualaikum, wr. wb.

Tags:

Posting Komentar

Lebih baru Lebih lama