Photo by Kaleidico on  Unsplash
Photo by Kaleidico on  Unsplash
Photo by Kaleidico on  Unsplash

Setelah belajar membuat tampilan dengan blade, ternyata masih ada bagian yang bisa kita perbaiki dari kode program tampilan web. Mari kita lihat kode program kita.

Berikut adalah kode program untuk tampilan daftar buku.

<html>
<head>
    <title>Book List</title>
</head>

<body>
<div style="background: #388BF2; font-size: 24px; color: white">
    Simple library app
</div>

<div style="margin-top: 20px; margin-bottom: 20px">
    <table border="1">
        <a href="/books/add"> Add new book</a>

        <thead>
            <td> No </td>
            <td> Title </td>
            <td> Author </td>
            <td> Publication </td>
            <td> Year </td>
            <td colspan="2"> Action </td>
        </thead>
        <tbody>
            @foreach($books as $index => $book)
                <tr>
                    <td> {{ $index + 1 }}</td>
                    <td> <a href="{{ url("/books", $book->id) }}" > {{ $book->title }} </a> </td>
                    <td> {{ $book->author }} </td>
                    <td> {{ $book->publication }} </td>
                    <td> {{ $book->year }}</td>
                    <td> <a href="{{ url("/books/edit", $book->id) }}"> Edit </a> </td>
                    <td>
                        <form method="POST" action="/books/{{$book->id}}">
                            {{ csrf_field() }}
                            {{ method_field('DELETE') }}

                            <div>
                                <input type="submit" value="Delete">
                            </div>
                        </form>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

<div style="background: #31B057; font-size: 20px; color: white">
    Created with love and willingness to learn
</div>
</body>
</html>

Berikut adalah kode program untuk tampilan form penambahan buku.

<html>
<head>
    <title>Add book</title>
</head>

<body>
<div style="background: #388BF2; font-size: 24px; color: white">
    Simple library app
</div>

<div style="margin-top: 20px; margin-bottom: 20px">
    <h3> Please fill the book detail </h3>
    <div>
        <form method="post" action="{{ url("/books") }}">
            {{ csrf_field() }}
            <div>
                <label>
                    Title
                    <input name="title"/>
                </label>
            </div>

            <div>
                <label>
                    Publication
                    <input name="publication"/>
                </label>
            </div>

            <div>
                <label>
                    Author
                    <input name="author"/>
                </label>
            </div>

            <div>
                <label>
                    Year
                    <input name="year" type="date"/>
                </label>
            </div>

            <button type="submit"> Add </button>
        </form>
    </div>
</div>

<div style="background: #31B057; font-size: 20px; color: white">
    Created with love and willingness to learn
</div>
</body>
</html>

Berikut adalah kode program untuk tampilan detail buku.

<html>
<head>
    <title>Book Detail</title>
</head>

<body>
<div style="background: #388BF2; font-size: 24px; color: white">
    Simple library app
</div>

<div style="margin-top: 20px; margin-bottom: 20px">
    <a href="/books"> Book list </a>

    <p> Here is the book detail </p>
    <p> Title <b> {{ $book->title }} </b> </p>
    <p> Publication <b> {{ $book->publication }} </b> </p>
    <p> Author <b> {{ $book->author }} </b> </p>
    <p> Year <b> {{ $book->year }} </b> </p>
</div>

<div style="background: #31B057; font-size: 20px; color: white">
    Created with love and willingness to learn
</div>
</body>
</html>

Berikut adalah kode program untuk tampilan form pengubahan data buku.

<html>
<head>
    <title>Edit book</title>
</head>

<body>
<div style="background: #388BF2; font-size: 24px; color: white">
    Simple library app
</div>

<div style="margin-top: 20px; margin-bottom: 20px">
    <a href="/books"> Book list </a>

    <h3> Please change the data you want yo update </h3>
    <div>
        <form method="post" action="{{ url("/books", $book->id) }}">
            {{ method_field('PUT') }}
            <div>
                <label>
                    Title
                    <input name="title" value="{{ $book->title }}"/>
                </label>
            </div>

            <div>
                <label>
                    Publication
                    <input name="publication" value="{{ $book->publication }}"/>
                </label>
            </div>

            <div>
                <label>
                    Author
                    <input name="author" value="{{ $book->author }}"/>
                </label>
            </div>

            <div>
                <label>
                    Year
                    <input name="year" type="date" value="{{ $book->year }}"/>
                </label>
            </div>

            <button type="submit"> Update </button>
        </form>
    </div>
</div>

<div style="background: #31B057; font-size: 20px; color: white">
    Created with love and willingness to learn
</div>
</body>
</html>

Pada keempat kode program diatas, kita bisa melihat kode program yang berulang, yaitu bagian title, header, content, dan footer ditulis berulang kali. Lalu apa yang yang bisa kita lakukan untuk memperbaiki kode program kita? Kode program berulang ini dapat kita sederhanakan dengan menuliskannya hanya satu kali saja. Bagaimana caranya?

Blade Template Engine

Pada part sebelumnya, kita sudah menggunakan fitur dari blade untuk memlakukan perulangan untuk menampilkan data dan menapilkan data dari sebuah variable. 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. Bagaimana caranya?

Membuat Kerangka Tampilan

Kerangka tampilan yang akan kita buat akan mengikuti layout yang sudah kita tentukan, yaitu terdapat header, content, dan footer.

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

    <body>
        @include('layouts/header')

        <div style="margin-top: 20px; margin-bottom: 20px">
            @yield('content')
        </div>

        @include("layouts/footer")
    </body>
</html>

Pada kode program diatas, kita bisa melihat bahwa kode program tersebut adalah kode program yang berulang kita tuliskan ditampilan kita. Kode program inilah yang akan menjadi kerangka, artinya kode program ini cukup dituliskan sekali saja, lalu bagian lainnya akan diisi oleh file lainnya.

  • @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

<div style="background: #388BF2; font-size: 24px; color: white">
    Simple library app
</div>

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

<div style="background: #31B057; font-size: 20px; color: white">
    Created with love and willingness to learn
</div>

Untuk bagian title dan content-nya sendiri akan kita masukkan jadi file lain. Berikut adalah kode program untuk tampilan daftar buku.

@extends('layouts.app')

@section('title')
    Book List
@endsection

@section('content')
<div style="margin-top: 20px; margin-bottom: 20px">
    <table border="1">
        <a href="/books/add"> Add new book</a>

        <thead>
            <td> No </td>
            <td> Title </td>
            <td> Author </td>
            <td> Publication </td>
            <td> Year </td>
            <td colspan="2"> Action </td>
        </thead>
        <tbody>
            @foreach($books as $index => $book)
                <tr>
                    <td> {{ $index + 1 }}</td>
                    <td> <a href="{{ url("/books", $book->id) }}" > {{ $book->title }} </a> </td>
                    <td> {{ $book->author }} </td>
                    <td> {{ $book->publication }} </td>
                    <td> {{ $book->year }}</td>
                    <td> <a href="{{ url("/books/edit", $book->id) }}"> Edit </a> </td>
                    <td>
                        <form method="POST" action="/books/{{$book->id}}">
                            {{ csrf_field() }}
                            {{ method_field('DELETE') }}

                            <div>
                                <input type="submit" value="Delete">
                            </div>
                        </form>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection

Pada kode program diatas, kita menggunakan dua blade helper lain yaitu @extends dan @section. Berikut adalah penjelasannya.

  • @extends adalah blade helper yang kita gunakan untuk menggunakan kode program lain sebagai kerangka atau landasan. @extends menerima satu parameter yaitu lokasi dari file yang akan digunakan sebagai kerangka. Pada contoh ini, parameternya adalah layouts.app, artinya kode program yang akan digunakan adalah resources/views/layouts/app.blade.php. Dengan menggunakan kode program dari app.blade.php, kita dapat menggunakan @yield yang terdapat pada kode program tersebut.
  • @section adalah blade helper yang kita gunakan untuk mengisi @yield yang terdapat pada kode program yang di-extends sebelumnya. Pada app.blade.php, terdapat dua @yield yaitu @yield('title') dan @yield('content'). artinya terdapat dua buat tempat untuk kita mengisi dengan kode program yang lain. @yeild akan dipasangkan dengan @section. Pada contoh kode program diatas, kode program yang terdapat diantara @section('title') dan @endsection akan mengisi bagian pada @yield('title') dan bagitu juga pada @section('content') dan @endsection akan mengisi bagian pada @yield('content').

Dengan menggunakan blade helper ini, kode program akan tersusun lebih rapi lagi. Kita dapat menyusun file-file berdasarkan kegunaannya masing-masing. Seperti contoh diatas, kita memisahkan file yang khusus menangani kerangka dan yang menangani konten dari.

Contoh lainnya adalah ketika kita ingin menambahkan sidebar pada semua tampilan, kita hanya perlu membuat satu file baru yaitu sidebar.blade.php dan kita tempatkan pada resources/views/layouts/sidebar.blade.php. Lalu file ini akan di include pada app.blade.php. Semua file yang meng-extends app.blade.php akan secara otomatis mendapatkan tampilan sidebar.

Masih banyak fitur blade lainnya yang belum kita pelajari pada artikel ini. Teman — teman dapat mempelajarinya pada dokumentasi laravel .

Oh ya, kode program yang sudah kita kerjakan selama series ini dapat diakses pada repositori ecojuntak/library .

Cappy Hoding! 🖖🏾