Matawebsite Promo Lebaran 2022

Membuat Komponen Reusable Pada Blade Template Laravel

date 01 Nov 2021
date Sulfikardi
date 797
date Web Design
Membuat Komponen Reusable Pada Blade Template Laravel

Pada part sebelumnya, kita telah membuat layout website menggunakan fitur dari blade, Ternyata, blade memiliki banyak fitur lainnya. Salah satunya adalah layout extension. Layout extension adalah fitur yang memungkinkan kita untuk menggunakan menggunakan kode program lain pada kode program lainnya. Contohnya adalah kita dapat menuliskan kode program untuk footer sekali saja dan menggunakannya disemua tampilan.

Kerangka tampilan yang akan kita buat meliputi layout yang akan kita gunakan di semua tampilan website, yaitu terdapat header, content, dan footer.

<!doctype html>

<html lang="en">

  <head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

 

    <!-- Bootstrap CSS -->

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    @include('layout.styling')

    <title>@yield('title')</title>

  </head>

  <body>

      @include('layout.header')

    @yield('content')
 

    @include('layout.footer')

    @include('layout.scripts')

    @yield('script')

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

 

    <!-- Option 2: Separate Popper and Bootstrap JS -->

    <!--

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

    -->

  </body>

</html>

  • @include adalah blade helper yang digunakan untuk mengikutikan kode program dari file lain. Helper ini akan menerima satu parameter, yaitu lokasi dari file yang akan dikutsertakan. Pada contoh diatas, paramter yang diberikan adalah layouts/header , artinya kita akan mengikutsertakan kode program dari file resources/views/layouts/header.blade.php
  • @yield adalah blade helper yang digunakan untuk menyediakan suatu tempat yang nantinya akan diisi oleh kode program dari file lain.

Kode program untuk bagian header akan kita pisahkan menjadi file baru yaitu header.blade.php . Berikut adalah kode programnya

<header>

    <h1>Halaman Header</h1>

</header>

Begitu pula untuk kode program pada bagian footer akan kita pisahkan menjadi file baru yaitu footer.blade.php . Berikut adalah kode programnya

<footer>

    <h3>Halaman Footer</h3>

</footer>

Untuk bagian title dan content-nya sendiri akan kita gunakan pada tiap halaman page untuk membuat tampilan yang berbeda sesuai keinginan kita. Berikut adalah kode program untuk tampilan home. 

@extends('layout.template')

@section('title', 'Halaman Home')

@section('content')

    <div class="container">

        <div class="row justify-content-center">

            <div class="col-md-6">

                <div class="card">

                    <div class="card-body">

                        <h6>Halaman Home</h6>

                        <ul>

                            <li>Data 1</li>

                            <li>Data 2</li>

                            <li>Data 3</li>

                            <li>Data 4</li>

                            <li>Data 5</li>

                        </ul>

                    </div>

                </div>

            </div>

        </div>

    </div>

@endsection

Matawebsite Promo Lebaran 2022
sul.png

Sulfikardi

Web Design & Web Programming

Halo, saya seorang Web Developer yang terbiasa mengembangkan website menggunakan HTML, CSS, Javascript, PHP, MYSQL, dan Laravel. Disini saya akan membagikan pengalaman saya dalam membangun dan mengembangan website yang responsif dan dinamis

Artikel Terkait

Halo, ada yang bisa kami bantu?
Daftar Sekarang