Blade Templates

Muhammad Iqbal - Aug 2 - - Dev Community

Blade Templates pada Laravel adalah sistem templating yang dirancang untuk mempermudah pembuatan tampilan (views) dalam aplikasi. Blade menyediakan sintaks yang bersih dan sederhana, serta fitur-fitur canggih untuk meningkatkan produktivitas pengembang. Berikut adalah beberapa kegunaan utama Blade Templates pada Laravel:

A. Sintaks yang Bersih dan Sederhana:

  • Blade menggunakan sintaks yang mirip dengan PHP, tetapi lebih bersih dan mudah dibaca.
  • Misalnya, untuk mencetak variabel, cukup gunakan {{ $variable }}.
   <h1>Hello, {{ $name }}</h1>
Enter fullscreen mode Exit fullscreen mode

B. Layouts dan Sections:

  • Blade memungkinkan penggunaan layout untuk menghindari pengulangan kode dan mempermudah pengelolaan tampilan yang konsisten.
  • Sections memungkinkan kamu untuk mendefinisikan area yang bisa diisi oleh template turunan.

Layout:

   <!-- resources/views/layouts/app.blade.php -->
   <!DOCTYPE html>
   <html>
   <head>
       <title>App Name - @yield('title')</title>
   </head>
   <body>
       <div class="container">
           @yield('content')
       </div>
   </body>
   </html>
Enter fullscreen mode Exit fullscreen mode

Template Turunan:

   <!-- resources/views/child.blade.php -->
   @extends('layouts.app')

   @section('title', 'Page Title')

   @section('content')
       <p>This is the content of the page.</p>
   @endsection
Enter fullscreen mode Exit fullscreen mode

C. Blade Directives:

  • Blade menyediakan berbagai direktif seperti @if, @foreach, @for, @while, @switch, dan banyak lagi untuk mengontrol logika dalam template.
   @if ($user->isAdmin())
       <p>Welcome, admin!</p>
   @else
       <p>Welcome, user!</p>
   @endif
Enter fullscreen mode Exit fullscreen mode

D. Komponen dan Slots:

  • Blade mendukung penggunaan komponen dan slot untuk membuat tampilan yang lebih modular dan reusable.

Membuat Komponen:

   <!-- resources/views/components/alert.blade.php -->
   <div class="alert alert-{{ $type }}">
       {{ $slot }}
   </div>
Enter fullscreen mode Exit fullscreen mode

Menggunakan Komponen:

   <!-- resources/views/welcome.blade.php -->
   @component('components.alert', ['type' => 'danger'])
       This is an error alert.
   @endcomponent
Enter fullscreen mode Exit fullscreen mode

E. Blade Include:

  • Menggunakan @include untuk menyisipkan tampilan lain ke dalam template.
   @include('partials.header')
   <div class="content">
       @yield('content')
   </div>
   @include('partials.footer')
Enter fullscreen mode Exit fullscreen mode

F. Menangani Data yang Diberikan:

  • Blade memudahkan pengiriman data dari controller ke tampilan dan penanganan data tersebut dalam template.
   // Dalam controller
   public function show($id)
   {
       $user = User::find($id);
       return view('user.profile', ['user' => $user]);
   }
Enter fullscreen mode Exit fullscreen mode
   <!-- resources/views/user/profile.blade.php -->
   <h1>{{ $user->name }}</h1>
   <p>{{ $user->email }}</p>
Enter fullscreen mode Exit fullscreen mode

G. Blade Service Injection:

  • Mendukung injeksi service langsung dalam template.
   @inject('metrics', 'App\Services\MetricsService')

   <div>
       Monthly Revenue: {{ $metrics->monthlyRevenue() }}
   </div>
Enter fullscreen mode Exit fullscreen mode

H. Extending Blade:

  • Membuat custom Blade directives untuk memperluas fungsionalitas.
   // Dalam service provider
   Blade::directive('datetime', function ($expression) {
       return "<?php echo ($expression)->format('m/d/Y H:i'); ?>";
   });
Enter fullscreen mode Exit fullscreen mode
   @datetime($user->created_at)
Enter fullscreen mode Exit fullscreen mode

Kesimpulan

Blade Templates pada Laravel mempermudah dan mempercepat proses pengembangan tampilan dengan menyediakan sintaks yang bersih, fitur-fitur canggih seperti layouts, sections, komponen, dan slot, serta mendukung logika kontrol dan injeksi service. Blade membantu menjaga kode tampilan tetap rapi, terorganisir, dan mudah dipelihara.

. . . . . . . . . . . . . . . . . . .
Terabox Video Player