Laravel : Dengan Blade memberikan Cara Efisien Membuat Layout, Form, dan Komponen

Meningkatkan Produktivitas Pengembangan dengan Blade yang memberikan kemudahan dalam membangun interface

Photo by Bench Accounting on Unsplash

Saat ini cukup banyak orang-orang yang menggunakan teknologi laravel, terutama perusahaan memakai laravel sebagai sistem pendukung backoffice.

sebenarnya banyak teknologi framework php diluar sana seperti :

1. codeigniter
2. sympony
3. cake php
4. yii
5. dlln.

tetapi yang lebih populer serta komunitas yang cukup banyak adalah laravel. tidak semua framework php memiliki template engine bawaan.

Laravel memiliki berbagai fitur yang dapat mempermudahkan pengembang dalam mendevelop aplikasi. laravel kerap memiliki template engine sendiri yaitu blade.

Blade dirilis pada laravel 3 tepatnya pada tahun 2012. dengan blade, pengembang dapat mudah melakukan pengkodean PHP secara bebas terhadap interface yang dibangun.

Blade memang sangat membantu, ketika ingin menampilkan data dari controller, hasil fungsi, dan method. itu sangat mempermudahkan, apalagi blade yang sudah terinstall satu paket dengan laravel. tentu kita lebih hemat energi 😃

Dengan blade kita dapat membangun interface dengan mudah tanpa harus menggunakan react atau vue.js. tetapi semua itu memiliki kelebihan dan kekurangan.

Penggunaan blade itu cukup mudah, kamu harus menerapkan ekstensi .blade pada penamaan file. salah satu penerapannya melakukan proses code expression, ini lah dinamakan sebagai blade expression. sekarang apa yang kita dapat dari blade expression :

1. menjalankan operasi logika
2. menampilkan variabel
3. menjalankan method yang telah dibuat
4. dlln.

<h1>{{ $title }}</h1> 

code diatas merupakan salah satu penggunaan blade expression, menampilkan data sesuai dengan variabel yang telah ditentukan.

Kenapa memakai curly braces secara double, sesuai dengan penjelasan salah satunya berguna mencegah serangan XSS pada website, kamu juga bisa melihat penjelasan berikut pada dokumentasi resminya.

sumber: https://laravel.com/docs/11.x/blade

Membuat file blade

Menerapkan blade pada file harus menyertakan ekstensi .blade.php setelah namafile kamu. untuk penamaan file itu bebas, tetapi secara khusus penting penamaan harus sesuai dengan isi file contohnya, mengolah authentication. hal ini mempermudahkan kita dalam mencari file sesuai dengan kebutuhan.

#contoh penulis file dengan menerapkan blade
login.blade.php     

dengan penulisan nama file tersebut kamu telah siap untuk menggunakan template engine blade. menandakan bahwa file tersebut merupakan blade laravel.

jika tidak diterapkan ekstensi tersebut, blade tidak akan mengenali dan tidak menjalan fungsi lainnya seperti penggunaan directive blade.

Directive blade

Menurutku blade itu sebagai alat bantu yang dapat digunakan mempermudah developer, yang seharusnya code lebih panjang akan menjadi code yang mudah dibaca, singkat, dan reusable.

Blade directive pada laravel cukup banyak, kamu juga dapat melakukan banyak hal seperti pengkondisian, looping, pengecekan, dlln.

@if, @switch               -> melakukan pengkondisian
@foreach, @for, @while     -> melakukan perulangan
@class                     -> melakukan pengkondisian pada atribut class

dlln.

untuk penejelasan lebih lanjut kamu dapat kunjungi link berikut, https://laravel.com/docs/11.x/blade

Laravel sendiri juga memberikan kebebasan terhadap developer melakukan custom blade directive sesuai kebutuhan.

Blade component

Blade component merupakan salah satu fitur untuk mempermudahkan membuat tampilan halaman. beberapa orang terbantu dalam menerapkan seperti section maupun layout.

Tanpa menggunakan blade component, aplikasi tetap bisa tampil. tetapi dengan adanya component akan mempermudahkan kita dalam membuat tampilan aplikasi dan code dapat menjadi reusable.

untuk membuat component, kamu bisa menggunakan php artisan comand,

php artisan make:component namakomponen

itu akan menghasilkan 2 file sekaligus, yaitu view dan class. jika kamu ingin tanpa class atau disebut sebagai anonymous component kamu cukup tambahkan flag view

php artisan make:component namakomponen --view

untuk melakukan rendering kamu dapat melakukan seperti ini,

<x-namakomponen />   atau  <x-namakomponen> </x-namakomponen>

pembahasan topik blade component cukup panjang mungkin kedepannya akan membuat artikel khusus membahas blade component.

Membangun layout

Laravel memberikan kemudahan dalam membuat layout. sehingga kita tidak repot setiap membuat view harus mendeklarasikan kerangka awal code html terlebih dahulu.

untuk membuat layout alahkah baiknya jika kamu memahami blade component dan directive laravel. hal ini agar membantu dirimu dalam membuat interface dengan baik.

biasanya setiap membuat tampilan halaman, kita memerlukan kerangka dasar html anggap saja seperti ini,

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
      <p>content</p>
  </body>
</html>

dengan blade kita dapat melakukan satu file saja sebagai layout yang dapat dipergunakan ke semua view. tetap itu semua sesuaikan dengan kebutuhan mu.

untuk melakukan itu, kita memerlukan directive laravel yaitu :

@yield('namafile')

dan,

@section
  //content
@endsection

directive yield digunakan untuk menampilkan suatu component yang sudah di deklarasikan dengan directive section. Directive tersebut akan membuat code di file terpisah yang nantinya akan dipanggil oleh directive yield sesuai dengan nama yang didefinisikan pada section.

{{-- views/layouts/guest.index.php --}}

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
    </head>
    <body class="font-sans antialiased dark:bg-black dark:text-white/50">
        @include('partials.navbar')

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

{{-- views/index.blade.php --}}

@extends('layouts.guest')

@section('content')
    <div>
        <p>Hello world</p>
    </div>   
@endsection

code diatas merupakan contoh sederhana cara membangun layout. cara tersebut juga bisa digabungkan dengan blade component yang kamu butuhkan. untuk pembahasan lebih jelas mengenai ini, kamu dapat mengunjungi tautan berikut https://laravel.com/docs/11.x/blade#building-layouts

Bekerja dengan form

Laravel memiliki keamanan yang cukup baik. salah satu pengamanan yaitu directive csrf. directive ini memberikan pencegahan terhadap serangan CSRF. yang dimana hacker jahat dapat melakukan request dengan cara yang tidak sah. alhamdulillah laravel memudahkan kita untuk melakukan pecegahan itu. laravel juga memberikan directive khusus terhadap method request yang dimana biasanya itu hanya ada get dan post. kini laravel memberikan directive khusus seperti @post, @put, @patch, @delete. meniyisipkan directive method request memberikan pengamanan terhadap serangan CSRF. berikut contoh penggunaannya.

<form action="{{ route('posts.destroy', $post->id) }}" method="POST">
    @csrf
    @delete
    <button type="submit">Delete</button>
</form>

Bekerja dengan form tidak hanya dari segi keamanan. kita juga dapat bekerja dengan error pada field. menampilkan pesan error jika user tidak menginputkan nilai dengan benar. untuk menampilkan pesan error dapat menambahkan element component dan kita juga dapat menambahkan pada class input nya dengan cara menyisipkan directive error

<div>
    <label for="name">Name:</label>
    <input type="text" name="title" id="name" value="{{ old('title') }}" class="@error('title') border-red-500 @enderror">
    @error('title')
        <span class="text-red-500 text-sm">{{ $message }}</span>
    @enderror
</div>

agar dapat berjalan, kamu harus punya validasi yang dimana validasi tersebut akan melakukan pencocokan dengan data yang inputkan. sesuai dengan ketentuan yang diterapkan. lihatlah contoh code berikut,

use Illuminate\Http\Request;

class RegisterController extends Controller
{
    public function store(Request $request)
    {
        $request->validate([
            'title' => 'required|max:255',
            'email' => 'required|email|unique:users,email',
            'password' => 'required|min:6',
        ]);

        // Jika validasi lolos, simpan data atau lakukan aksi lainnya
        return redirect()->back()->with('success', 'Registration successful!');
    }
}

kamu perlu method validate untuk mencegah ketidak sesuai data yang dimasukan. dengan itu secara otomatis directive error akan menampilkan pesan yang telah dibuat.

Sebernanya masih banyak fitur-fitur yang keren yang belum dibahas pada artikel ini. tapi disini saya sudahi karena artikel kalau dibahas cukup panjang jika dibahas semuanya. terimah kasih sudah membaca, semoga bermanfaat terhadap kita semua.

jika ada kekeliruan terhadap pembahasan, aku minta maaf dan berharap ada yang meluruskan. semoga bermanfaat dan sampai jumpa diartikel berikutnya 😄

baca juga,

Laravel : Cara Install Laravel Breeze

Laravel : Route Group — basic