Blade Error Directive Pada Laravel 5.8.13

Sore ini dapat email dari Laravel News, terdapat beberapa perubahan pada Laravel 5.8.13 yang salah satunya adalah Directive Blade terbaru untuk menangani error. Walaupun mungkin Blade ini sudah mulai ditinggalkan oleh frontend developer karena beralih ke vuejs atau reactjs, namun saya tertarik membahasnya di tulisan pendek ini.

Biasanya teman-teman yang masih menggunakan blade di proyek laravelnya menuliskan error seperti ini diatas form:

@if ($errors->any())
    <div class="alert alert-danger">
        Terdapat kesalahan.<br><br>
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form action="{{ route('user.store') }}" method="POST">
    @csrf
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Name:</strong>
                <input type="text" name="name" class="form-control" placeholder="Name">
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group ">
                <strong>Email:</strong>
                <input type="text" name="email" class="form-control" placeholder="Email" />
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 text-center">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>
</form>

Untuk menghandle error kita menggunakan directive blade yaitu IF pada contoh diatas ya.

Atau jika spesifik ingin menampilkan satu per satu error dapat menggunakan blade dengan directive seperti berikut ini:

@if($errors->has('email'))
    <div class="alert alert-danger">
        Terdapat kesalahan pada email: <br />
        <span>{{ $errors->first('email') }}</span>
    </div>
@endif

Tidak ada perbedaan cara dalam menuliskan error diatas tentunya, pastikan teman-teman menyesuaikan dengan proyek yang teman-teman buat.

Mungkin ada user yang ingin tampilan seperti: jika error, tolong mas inputan yang error itu diwarnai merah ya

Seketika kita ubah untuk menghandle warna merah itu seperti berikut ini:

<form action="{{ route('user.store') }}" method="POST">
    @csrf
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Name:</strong>
                <input type="text" name="name" class="form-control @if($errors->has('email')) border border-danger @endif" placeholder="Name">
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group ">
                <strong>Email:</strong>
                <input type="text" name="email" class="form-control @if($errors->has('email')) border border-danger @endif" placeholder="Email" />
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 text-center">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>
</form>

Jika temen-temen lihat diatas, saya menambahkan @if blade directive di input name dan email. Ini juga bisa dipakai temen-temen untuk menampilkan border merah jika inputan terjadi kesalahan.

Lalu apa itu Blade Error Directive pada Laravel?

Nah Laravel dengan versi yang 5.8.13 ini mengeluarkan fitur blade error directive seperti kode dibawah ini:

@error('email')
    <span>{{ $message }}</span>
@enderror

Dengan kode seperti diatas, teman-teman cukup menuliskan @error lalu diikuti dengan parameter string key dari error yang ingin ditampilkan. Contoh diatas adalah ingin mengecek error tersebut memiliki key email atau tidak.

Lalu apa enaknya?

Jika temen-temen lihat kembali waktu kita ingin mengubah inputan merah jika terjadi error. Kita bisa menuliskan kode menjadi lebih pendek. Jadi kira-kira seperti berikut ini jika menggunakan blade error directive:

<form action="{{ route('user.store') }}" method="POST">
    @csrf
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Name:</strong>
                <input type="text" name="name" class="form-control @error('name') border border-danger @enderror" placeholder="Name">
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group ">
                <strong>Email:</strong>
                <input type="text" name="email" class="form-control @error('email') border border-danger @enderror" placeholder="Email" />
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 text-center">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>
</form>

Jadi lebih pendek dan mudah dibaca bukan? 🙂

Inget ya Blade Error Directive ini baru ada di Laravel 5.8.13. Jadi jika ingin menggunakannya, temen-temen harus update dulu ke versi itu 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: