Tutorial Cara Membuat dan Menggunakan Blade Component Laravel 7

byindeveloper •
1
Tutorial Cara Membuat dan Menggunakan Blade Component Laravel 7

Assalamualaikum, wr. wb. teman-teman. Jika sebelumnya kita sudah belajar cara upgrade ke Laravel 7, maka pada tutorial kali ini kita akan belajar serta mengeksplore salah satu fitur terbaru di Laravel 7 ini, yaitu Blade Component.

Sebenarnya pada versi sebelumnya sudah terdapat blade component, namun pada versi terbaru ini, kita dipermudah untuk pembuatannya. Di versi sebelumnya untuk memanggil component biasanya kita menggunakan syntax awal @componentname dan diakhiri dengan syntax @endcomponentname. Sedangkan pada versi terbaru ini, kita dapat memanggil component hanya dengan syntax <x-namacomponent />

Creating Component

Langsung aja kita praktekkan sekarang. Oh ya, jika pada versi sebelumnya kita membuatnya secara manual, pada versi ini kita dipermudah dengan adanya perintah artisan untuk membuat component. Sekarang buka projek Laravel 7 kalian. Lalu ketikkan perintah ini pada terminal kalian untuk membuat component.

php artisan make:component Button

 Oke kita telah membuat component dengan nama Button, otomatis kita telah dibuatkan dua file yaitu
pada App\View\Components\Button.php untuk Kelasnya
dan pada resources/views/components/button.blade.php untuk tampilannya atau blade filenya.


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

Berikut tampilan kodenya:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Button extends Component
{

    /**
     * Create a new component instance.
     *
     * @return void
     */

    public function __construct()
    {
       //
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('components.button');
    }
}

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/button.blade.php. Berikut adalah isi defaultnya dari Laravel.

1
2
3
<div>
    <!-- He who is contented is rich. - Laozi -->
</div>

Sekarang silahkan Modifikasi kodenya menjadi seperti ini.

1
2
3
<div>
    <button>Ini Button</button>
</div>

Rendering Component

Untuk me-render atau menampilkan component yang kita buat tadi, kita cukup menggunakan syntax <x-componentname> , karena nama component kita tadi Button maka kita cara menulisnya <x-button> menggunakan style kebab-case.

Sekarang tambahkan syntax tersebut pada file view welcome.blade.php bawaan Laravel. Berikut contoh penerapannya yang sudah saya modifikasi pastinya.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="container text-center">
            <h1>Wellcome Page</h1>
            <x-button />
        </div>
    </body>
</html>

Sekarang silahkan jalankan aplikasi kalian, maka component button yang kita buat tadi akan tampil seperti berikut:

Tutorial Cara Membuat dan Menggunakan Blade Component Laravel 7

Passing Data ke Component

Untuk passing data ke component dapat kita lakukan melalui fungsi __contruct(). Pada contoh kali ini kita mem-passing data berupa type button dan title button. Hal penting yang harus diperhatikan adalah hak akses yang kita berikan harus public agar dapat diakses oleh kelas lain.

Berikut adalah modifikasi kode pada kelas Button:

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

namespace App\View\Components;

use Illuminate\View\Component;

class Button extends Component
{

    //data yang akan kita passing
    public $type; 
    public $title;

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

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

Kemudian pada file button.blade.php modifikasi kodenya menjadi seperti berikut untuk menggunakan data yang sudah kita set pada Kelas tadi. Cara menuliskannya {{ $data }} seperti di bawah ini.

1
2
3
<div>
    <button class="btn btn-{{$type}}">{{$title}}</button>
</div>

Langkah terakhir, kita harus mengatur value apa yang ingin kita berikan pada data tersebut. Untuk mengaturnya dapat kita letakkan pada / seperti atribut HTML seperti berikut. Jika kalian pernah menggunakan vue js, cara ini hampir sama dengan penggunaan props pada vue js.

1
<x-button type="success" title="Tambah Data"/>

Note: kode di atas potongan dari file welcome.blade.php jadi kalau kita jalankan maka hasilnya seperti berikut.

Tutorial Cara Membuat dan Menggunakan Blade Component Laravel 7
Mudahkan? Oke sekian dulu tutorial kali ini, silahkan kalian eksplore sendiri trik-trik lain dari Blade Component ini. Semoga bermanfaat, mohon maaf jika ada penjelasan yang kurang jelas, silahkan tanyakan dikolom komentar, atau email saja jika malu, hehehe. Wassalamualaikum, wr. wb.
Tags:

1 Komentar

  1. Irham Muliyawan20 Mei 2020 pukul 01.53

    Apakah di componen tsb kita bisa memberikan coding event, seperti dlm programming Visual Programming Desktop (VB/Delphi)?

    BalasHapus
Lebih baru Lebih lama