BLADE | Bagaimana peran Blade Di Laravel dan Cara menggunakannya

Baringin
0

 


Pendahuluan

    Blade adalah sistem templating yang disediakan oleh Laravel. Ini memungkinkan Anda untuk menggunakan sintaks yang lebih bersih dan ekspresif dalam tampilan Anda. Blade mengkompilasi template menjadi kode PHP biasa yang di-cache hingga template diubah, yang berarti ia menambahkan hampir nol overhead ke aplikasi Anda. 

    Ada beberapa konsep utama di dalam blace


1. Pewarisan Template (Template Inheritance):

    Bagi anda yang pernah membuad sebuah halaman web, kita anggaplah kita mendesain halaman 3 buah halaman web, yaiut halaman home, profil dan agenda. Masing-masing desain anda memiliki code untuk membuat header dan code untuk membuat footer . Nah pada tiap-tiap halaman memiliki kode yang sama untuk setiap header dan footer. Tentu anda mengulangi code ini untuk setiap halaman.

    Memanfaatkan teknologi blade, kode header dan code footer dapat diwariskan sehingga kita perlu membuat satu code saja dan dapat diakses oleh semua halaman.

    prinsip kerjanya  Anda dapat mendefinisikan tata letak (layout) dasar halaman dan kemudian memperluasnya di tampilan lain untuk mengurangi mengurangi duplikasi kode agar tidak terjadi pengulangan pembuatan code yang sama pada halaman yang berbeda.

    Ada 3 jenis teknologi yang disediakan oleh blade untuk menghindari duplikat ini:

  • @extends('layout') digunakan untuk mewarisi layout dari file layout.blade.php
  • @section('nama_section') ... @endsection digunakan untuk mengisi konten ke dalam section yang di definisikan di layout.
  • @yield('nama_section') digunakan untuk menampilkan isi section dari halaman yang mewarisi layout tersebut.
    Untuk pemahaman lebih lanjut kita bahas nanti pada pembuatan artikel tentang template.

2. Direktif Blade:

    Blade menyediakan direktif seperti @if, @elseif, @else, @foreach, dan @while untuk mengontrol alur logika dalam tampilan Anda. Ini memungkinkan Anda untuk menulis kode PHP dengan cara yang lebih bersih dan mudah dibaca.


Menampilkan Data:

    Data yang kita buat di dalam php, mungkin jadi data tersebut anda letakkan di controller atau satu file langsung dengan blade. Nah data tadi dapat ditampilkan menggunakan menggunakan sintaks {{ $variable }}. Sintak {{-- dan  --}} digunakan untuk membuat komentar di dalam file blade. Mari kita lihat contohnya:

<body>
    <!-- Data yang kita miliki -->
    @php
    $title = "LARAVEL";
    $subtitile = "Belajar Laravel"
    @endphp
    <!-- Data yang ditampilkan -->
    <h1>{{ $title }}</h1>
    <h3>{{ $subtitle }}</h3>
</body>



Komponen Blade:

    Komponen Blade memungkinkan Anda membuat potongan kode tampilan yang dapat digunakan kembali. @component('nama_komponen') ... @endcomponent digunakan untuk menggunakan komponen blade.

    Buatlah sebuah file baru di dalam resource/view/. Beri nama file tersebut dengan nama komponen.blade.php. Ketikkan perintah berikut:

@php
$alertClasses = [
'success' => 'background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; padding: 10px; margin-bottom: 10px;',
'danger' => 'background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; padding: 10px; margin-bottom: 10px;',
];
@endphp
<div style="background-color: lightblue; padding: 10px;">
    {{ $slot }}
</div>

    

    Script diatas adalah script css yang ditulis di php. Script tersebut akan kita akses menggunakan komponen blade. Oke, buka beranda.blade.php lagi, ketikkan program ini:

    <body>
        @component('komponen')
        <strong>Pesan Sederhana.</strong>
        @endcomponent
    </body>


Looping:

  • @foreach ($users as $user) ... @endforeach digunakan untuk melakukan looping.
  • @for ($i = 0; $i < 10; $i++) ... @endfor digunakan untuk melakukan looping dengan nilai yang sudah di tentukan.
Berikut contoh penulisannya:
    <body>
        @php
        $data=[1,50,33,4];
        @endphp
        @foreach($data as $d)
        {{ $d }}
        @endforeach
    </body>

Kondisional:

    Model pembuatan kondisional diblade adalah seperti berikut

    @if (kondisi 1)  Statement

    @elseif (kondisi2) ) Statement

     @else Statement

    @endif 


Berikut contohnya contoh:

<body>
    <?php
    $nilai = 80;
    if ($nilai > 90) {
        echo " Kompeten";
    } else {
        echo "Tidak Kompeten";
    }
    ?>
</body>

    

Jika menggunakan Blade kita dapat menulis seperti berikut:

<body>
    @php
    $nilai = 80;
    @endphp
    @if($nilai>90)
    Kompeten
    @else
    Tidak Kompeten
    @endif
</body>


    Lalu apa kelebihan menggunakan blade di dalam mendesain sebuah halaman web? Berikut kami uraikan beberapa kelebihannya:

  • Penulisan Sintaks yang bersih dan mudah untuk dibaca.
  • Pewarisan template sehingga mengurangi duplikat code.
  • Direktif yang kuat untuk kontrol logika.
  • Performa yang baik karena kompilasi template.

    Itulah sekilas pembahasan tentang blade yang akan banyak kita pakai nanti kedepannya. Semoga bermanfaat dan terimakasih.

Posting Komentar

0Komentar

Posting Komentar (0)