~ We are changing the world with technology. ~

Matt Mullenweg

Reusable With Blade Component Laravel

Reusable With Blade Component Laravel

5650 Dilihat

Ngoding, kerap kali menjadi kegiatan yang amat sangat membosankan manakala terus melakukan hal yang sama secara berulang-ulang. Jika tujuannya untuk belajar, maka tidak ada salahnya untuk melakukan re-peating dan memang dianjurkan agar semakin mahir dalam melakukannya. Namun, berbeda halnya jika sudah masuk ranah production, yakni ranah untuk terus berkarya sembari saling kejar mengejar dengan deadline atau bisa disebut dengan ranah komersil. Selain mengedepankan kecepatan, kerapihan juga menjadi hal yang wajib diperhatikan agar aplikasi yang kita kerjakan bersifat maintainable.

Laravel telah menyediakan salah fitur yang menarik dalam blade templating yang dimilikinya, yakni Component. Component, memungkinkan kita untuk memenggal code yang dimiliki dengan tujuan agar dapat digunakan kembali tanpa harus menuliskan kembali semua bagiannya secara utuh. Serupa halnya dengan sections and layouts yang juga merupakan bagian dari fitur blade tempalting.

Baca Juga: Cara Mudah Deploy Laravel ke VPS

Reusable Panel With Component & Slot

Siapa sih yang tidak mengenal Bootstrap? Salah satu frontend framework ini memilki bagian yang menarik yakni Panel / Card (Bootstrap hanya salah satu contoh yang saya gunakan, banyak framework lainnya yang serupa). Dengan panel / card ini memungkinkan kita untuk mengelompokkan content sehingga menarik untuk dilihat.

Catatan: Agar lebih konsisten, saya ingin menyamakan persepsi. Karena sepanjang artikel ini akan menggunakan Bootstrap 4, dimana Panel dikenal sebagai Card. So, kedepannya saya hanya akan menggunakan kata Card.

Berikut potongan code yang dapat digunakan untuk membuat Card:

<div class="card">
    <div class="card-header">
        Featured
    </div>
    <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

Untuk menghindari penulisan code diatas secara berulang, maka dapat menggunakan Component & Slot. Adapun caranya adalah, buat folder components di dalam direktori resources/views, yang berguna untuk menyimpan semua component yang dimiliki nantinya. Kemudian buat file card.blade.php di dalam direktori components yang baru saja dibuat, lalu masukkan potongan code berikut:

<div class="card">
    <div class="card-header">
        {{ $header }}
    </div>
    <div class="card-body">
        {{ $slot }}
    </div>
</div>

Sehingga kamu dapat menggunakan component diatas disemua page yang kamu inginkan, adapun cara menggunakannya cukup sederhana:

@component('components.card')
    @slot('header')
      Component & Slot
    @endslot
​
    <p>Ini adalah card yang telah menggunakan blade component</p>
@endcomponent

Penjelasan: components.card adalah nama folder components dan file card.blade.php. @slot('header') berisi value yang akan dikirim ke variable $header yang telah didefinisikan pada component. Kemudian code yang diletakkan diluar @slot ..... @endslot akan me-replace variable $slot pada component.

Custom Component

Metode yang digunakan sebelumnya sudah menarik untuk membuat code yang kita miliki menjadi lebih rapi dan maintainable, tapi alangkah cukup merepokan jika memiliki struktur folder yang sangat kompleks untuk menyimpan component yang dimiliki. Yap!, karena setiap kali akan menggunakannya, maka diwajibkan untuk menuliskan path dimana custom component tersebut berada. So, Laravel menawarkan cara lain untuk mendefinisikannya terlebih dahulu, sehingga apabila akan digunakan, kita tidak perlu repot untuk menuliskan path secara lengkap. Misalnya seperti ini:

@card
    @slot('header')
        Component & Slot
    @endslot
​
    <p>Ini adalah card yang telah menggunakan blade component</p>
@endcard

Tampilan dari code diatas, masih sama seperti sebelumnya. Akan tetapi, penulisannya menjadi lebih ringkas lagi. Menarik bukan? So, untuk melakukannya, buka file app/Providers/AppServiceProvider.php, kemudian tambahkan use statement:

use Illuminate\Support\Facades\Blade;

Pada method Boot, tambahkan code berikut:

Blade::component('components.card', 'card');

Penjelasan: components.card adalah folder components yang didalamnya terdapat file card.blade.php. Sedangkan pada parameter kedua yakni card adalah syntax alias yang akan digunakan. Seperti yang kamu lihat diatas, kamu dapat menuliskannya dengan menggunakan syntax @card ... @endcard.

Baca Juga: Laravel Scount, Indexing Menggunakan Algolia Driver

Component inside component & Passing Variable.

Sesuai judul dari artikel ini, reusable, yang memungkin untuk menggunakan component yang telah didefinisikan, dimanapun kita inginkan. Termasuk, menggunakan component didalam component. Agar terlihat lebih menarik lagi, kita tambahkan challengenya, yakni mengirimkan variable ke dalam component tersebut. Sebagai contoh, kita akan membuat sebuah component dengan nama alert, dimana alert ini dapat menggunakan semua jenis alert yang dimiliki oleh bootstrap, diantranya: success, danger, warning, dll.

Untuk memulainya, buat file alert.blade.php di dalam folder components. Kemudian masukkan potongan code berikut:

<div class="alert alert-{{ $type }}">
    {{ $slot }}
</div>

Penjelasan: $type merupakan variable yang akan diterima dari view yang akan menggunakan component alert.

Ohya jangan lupa definisikan juga di dalam file AppServiceProvider.php agar syntaxnya menjadi lebih ringkas:

Blade::component('components.alert', 'alert');

Sehingga kamu dapat mengunakannya seperti ini:

@card
    @slot('header')
    Component & Slot
    @endslot
​
    @alert(['type' => 'danger'])
        Ini adalah custom component dengan alert.
    @endalert
@endcard

Penjelasan: Card merupakan component sebelumnya. Kemudian @alert(['type' => 'danger']) adalah component yang baru saja dibuat, dimana component tersebut mengirimkan variable dengan nama $type yang berisi value danger, dimana variable $type ini akan digunakan oleh alert component untuk menentukan jenis style alert yang akan digunakan. So, kata danger dapat kamu ganti sesuai dengan nama class alert yang dimiliki oleh Boostrap. Misal menjadi, success.

Full Stack Developer & Remote Worker salah satu perusahaan asal Australia. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Aplikasi E-Commerce Laravel 6 #18: Membuat Fitur Afiliasi Laravel

Aplikasi E-Commerce Laravel 6 #18: Membu...

Beragam cara atau teknik penjualan dilakukan guna mendongkrak transaksi pada sebuah bidang usaha, termasuk salah satu teknik marketing yang banyak digunakan adalah afiliasi. Berikut adalah cara membua...

Aplikasi E-Commerce Laravel 6 #17: Laporan Periode Date Range Laravel

Aplikasi E-Commerce Laravel 6 #17: Lapor...

Laporan memiliki peranan penting dalam mengevaluasi sebuah bisnis, termasuk dalam hal ini adalah transaksi jual beli. Fitur ini tidak lebih dari sekedar feed order, akan tetapi ada pembaca DaengWeb ya...

Aplikasi E-Commerce Laravel 6 #16: Integrasi Telegram Bot Laravel

Aplikasi E-Commerce Laravel 6 #16: Integ...

Membuat notifikasi dalam bentuk sosial chat akan lebih cepat tersampaikan kepada pemilik aplikasi karena di era ini orang-orang banyak menghabiskan waktunya dengan sosial media / chat. Berikut adalah...

Komentar