Menggunakan Templat Blade Laravel

Seberapa penting sih blade di Laravel? hhmmm, karena blade disediakan untuk Laravel. Oke!, mungkin itu sebenarnya terjadi jika seseorang sudah tahu seberapa penting blade di Laravel. Jadi templat blade digunakan untuk membuat templat yang sederhana tetapi memiliki kehebatan tersendiri agar templat yang Anda buat bisa lebih dinamis. Hal yang penting templat blade tidak membuat aplikasi Anda lambat atau sering disebut overhead.

Daftar isi:

Dasar membuat blade

Pada dasarnya untuk membuat berkas blade sangatlah mudah, hanya tinggal menambahkan blade diakhir berkas. Akan tetapi karena blade bersamaan dengan ekstensi .php, contohnya Anda ingin membuat berkas users maka berkas itu menjadi users.blade.php.

Menampilkan data

Jika Anda sudah melihat tutorial kelima (Membuat View Pada Laravel) kelas ini pasti sudah tahu cara yang satu ini. Sebab cara berikut untuk mengirim variabel ke templat blade dan menampilkannya, perlu diketahui variabel bebas memiliki nilai baik dia berupa untai (String) ataupun larik (Array).

Route::get('halo', function() {
    return view('halo', [
        'nama' => 'Febri Hidayan'
    ]);
});

Kemudian didalam berkas blade-Nya Anda bisa mengeluarkan variabel dengan {{ }}, Jika variabel memiliki nilai larik Anda bisa menggunakannya dengan cara biasanya yaitu $variabel->nama (objek) atau $variabel['nama'] (Asosiatif).

Apa kabar {{ $nama }}

Membuat komentar

Agar Anda bisa membuat komentar di dalam blade bisa menggunakan cara dibawah ini. Adapun cara lain kalau dia hanya berupa untai (String) atau karakter bisa menggunakan komentar dari HTML (<!-- -->).

{{-- ini adalah komentar yang tidak akan diabaikan --}}

Catatan: Cara cepat membuat komentar blade dengan CTRL + /, jika tidak bisa silakan unduh plugin Blade Laravel.

Bermain dengan isset dan empty

Jika Anda sudah mengenal isset dan empty mungkin sudah tidak asing lagi untuk menggunakannya. isset untuk menguji suatu variabel ada (true) atau tidak, sedangkan empty apakah nilai dari suatu variabel kosong (true). Saya secara pribadi jarang menggunakan fungsi tersebut di blade.

@isset($nama)
    <p>Halo {{ $nama }}</p>
@endisset

@empty($nama)
    <small>Variabel tidak memiliki nilai</small>
@endempty

Pertanyaan if, elseif, else

Anda juga bisa membuat kondisi hingga kondisi bercabang, maka tidak ada salahnya suatu saat suatu kondisi dibawah ini akan digunakan dengan berbagai kondisi yang ada. Silakan untuk dicoba atau dilewatkan saja.

@if(count($data) === 1)
    Memiliki satu data
@elseif(count($data) > 1)
    Lebih dari satu data
@else
    Tidak memiliki data
@endif

Perulangan for, foreach, forelse, while

Bukan hanya sekedar penerapan kondisi tetapi Anda bisa menggunakan perulangan pada blade. Hal yang paling menarik setelah peningkatan versi Laravel ada penambahan fungsi yaitu perulangan @forelse yang mana Anda bisa menerapkan suatu kondisi jika data kosong makan di @empty bisa diterapkan info bawasannya data kosong.

@for ($i = 0; $i < 10; $i++)
    Hitung mulai dari 0 hingga 9 {{ $i }}
@endfor

@foreach ($users as $user)
    <p>ID pengguna {{ $user->id }}</p>
@endforeach

@forelse ($users as $user)
    <li>{{ $user->name }}</li>
@empty
    <p>Pengguna kosong</p>
@endforelse

@while (true)
    <p>Akan melakukan perulangan tak henti.</p>
@endwhile

Bermain jauh dengan otentikasi

Selain penggunakan kondisi untuk menerapkan beberapa validasi yang diinginkan ada bagian yang tak kala penting yaitu @auth dan @guest. Salah satu yang bisa dimanfaatkan jika suatu menu terdiri dari login dan Register yang akan tampil ketika suatu pengguna belum masuk ke aplikasi, maka bisa memanfaatkan @guest dan jika pengguna sudah masuk maka menu tersebut akan hilang.

@auth
    // Pengguna sudah masuk
@endauth

@guest
    // Pengguna belum masuk
@endguest

Catatan: Sebenarnya dari kedua fungsi diatas bisa ditembakan @else, silakan lihat pada tautan berikut Laravel UI. Pada tautan tersebut terdapat penerapan @guest dan @else.

Menggunakan include dan yield

Cara menggunakan include dan yield sangat berbeda tetapi pada intinya akan meletakan semua skrip templat yang lebih dinamis dan tidak berulang. Adapun include akan memanggil skrip yang diperlukan, sedangkan yield untuk membuat slot yang akan digunakan pada bagian konten templat yang diperlukan. Anda akan bisa membedakannya ketika sudah mempratekan bagian bonus. Lihat dibawah ini untuk contoh include dan yield.

Penggunaan include

<body>
    @include('include.navbar')

    <main>
        <!-- kontent Anda -->
    </main>

    @include('include.footer')
</body>

Penggunaan yield

<body>
    @include('include.navbar')

    <main>
        @yield('content')
    </main>

    @include('include.footer')
</body>

Bonus - Desain templat

Pada seri bonus ini, saya akan menggunakan kerangka kerja CSS Bulma lewat CDN saja agar lebih mudah dan singkat. Kuyyy! langsung saja.

1. Struktur berkas

views
|   index.blade.php
|
|---auth
|       login.blade.php
|       register.blade.php
|
|---includes
|       navbar.blade.php
|       footer.blade.php
|
|---layouts
|       default.blade.php
|

2. Menerapkan routing

Route::get('/', function() {
    return view('index');
})->name('home');

Route::get('login', function() {
    return view('auth.login');
})->name('login');

Route::get('register', function() {
    return view('auth.register');
})->name('register');

3. Berkas navbar.blade.php

<nav class="navbar has-shadow">
    <div class="container">
        <div class="navbar-brand">
            <a href="{{ route('home') }}" class="navbar-item">{{ config('app.name') }}</a>
            <a class="navbar-burger" data-target="navbarBasic">
                <span></span>
                <span></span>
                <span></span>
            </a>
        </div>
        <div class="navbar-menu" id="navbarBasic">
            <div class="navbar-end">
                <a href="{{ route('login') }}" class="navbar-item">Login</a>
                <a href="{{ route('register') }}" class="navbar-item">Register</a>
            </div>
        </div>
    </div>
</nav>

4. Berkas footer.blade.php

<footer class="footer">
    <div class="content has-text-centered">
        <p>
            By <strong>Febri Hidayan</strong>
        </p>
    </div>
</footer>

5. Berkas default.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.2/css/bulma.min.css' integrity='sha512-byErQdWdTqREz6DLAA9pCnLbdoGGhXfU6gm1c8bkf7F51JVmUBlayGe2A31VpXWQP+eiJ3ilTAZHCR3vmMyybA==' crossorigin='anonymous'/>
    <title>{{ $title ?? config('app.name') }}</title>
</head>
<body>
    @include('includes.navbar')

    <section class="section">
        <div class="container">
            @yield('content')
        </div>
    </section>

    @include('includes.footer')
</body>
</html>

6. Berkas index.blade.php

@extends('layouts.default')

@section('content')
<div class="card">
    <header class="card-header">
        <p class="card-header-title">
            Halo Semuanya
        </p>
    </header>
    <div class="card-content">
        Belajar Membuat Templat Sederhana
    </div>
</div>
@endsection

7. Berkas login.blade.php

@extends('layouts.default', [
    'title' => 'Login'
])

@section('content')
<div class="columns is-centered">
    <div class="column is-6">
        <div class="card">
            <header class="card-header">
                <p class="card-header-title">
                    Login
                </p>
            </header>
            <div class="card-content">
                <form action="" method="post">
                    @csrf
                    
                    <div class="field">
                        <label for="email" class="label">Alamat Email</label>
                        <div class="control">
                            <input type="text" name="email" id="email" class="input">
                        </div>
                    </div>

                    <div class="field">
                        <label for="password" class="label">Kata Sandi</label>
                        <div class="control">
                            <input type="password" name="password" id="password" class="input">
                        </div>
                    </div>

                    <div class="field">
                        <label class="checkbox">
                            <input type="checkbox" name="remember"> Ingat saya
                        </label>
                    </div>

                    <div class="field">
                        <button type="button" class="button is-fullwidth is-success">Login</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

8. Berkas register.blade.php

@extends('layouts.default', [
    'title' => 'Register'
])

@section('content')
<div class="columns is-centered">
    <div class="column is-6">
        <div class="card">
            <header class="card-header">
                <p class="card-header-title">
                    Register
                </p>
            </header>
            <div class="card-content">
                <form action="" method="post">
                    @csrf
                    
                    <div class="field">
                        <label for="name" class="label">Nama Lengkap</label>
                        <div class="control">
                            <input type="text" name="name" id="name" class="input">
                        </div>
                    </div>
                    
                    <div class="field">
                        <label for="email" class="label">Alamat Email</label>
                        <div class="control">
                            <input type="email" name="email" id="email" class="input">
                        </div>
                    </div>

                    <div class="field">
                        <label for="password" class="label">Kata Sandi</label>
                        <div class="control">
                            <input type="password" name="password" id="password" class="input">
                        </div>
                    </div>

                    <div class="field">
                        <label for="password_confirmation" class="label">Konfigurasi Kata Sandi</label>
                        <div class="control">
                            <input type="password" name="password_confirmation" id="password_confirmation" class="input">
                        </div>
                    </div>

                    <div class="field">
                        <button type="button" class="button is-fullwidth is-success">Register</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

Tetap semangat belajarnya dan jangan lupa tetap lihat dokumen resmi Laravel.