Mengenal Fitur Terbaru Laravel 7 - New Blade Components

Hallo teman-teman jika berbicara soal framework yang satu ini kita pasti dan sudah seharusnya tidak lagi kaget dengan kecepatan update versinya, yups.. benar framework laravel telah rilis versi terbarunya yaitu versi laravel 7 😀 . Oke jangan kaget terlebih dahulu karena baru saja beberapa bulan yang lalu rilis laravel versi 6 dan sekarang sudah ada versi 7 nya.

Yang perlu teman-teman ketahui bahwasanya laravel sekarang akan mengupdate versi mayor realesee nya setiap 6 bulan 1 kali jadi jika dalam 6 bulan kedepan akan ada versi 8 jangan kaget ya heheh.

Okeh langusng saja kita bahas Mengenal Fitur Terbaru Laravel 7 – New Blade Components, di versi 7 ini laravel menambahkan beberapa fitur yang keren menurut saya salah satunya adalah components. Mungkin di dalam benak teman-teman yang sudah berlajar tentang vue.js “Apakah compoenent di laravel 7 seperti yang di vue js atau framework javascript lainya ? ” saya bisa bilang hampir mirip teman-teman.

Bayang kan kita bisa membuat custom component lalu component tersebut bersidat reusable atau dapat di gunakan kembali untuk modeul atau project yang lainya. Keren bukan ? 😀

Oke langsung saja silahkan teman-teman install larvel terbarunya dan pastikan PHP yang terinstall di komputer teman-teman sesuai dengan Server Requirements nya si laravel ya, silahkan jalankan perintah berikut :

composer create-project --prefer-dist laravel/laravel blade-components

Jika sudah terinstall maka kita bisa memulai membuat component nya dengan perintah artisan make:component serpti ini teman-teman misal kita ingin membuat satu component bernama SideBar :

php artisan make:component SideBar

jika sudah menjalankan perintah di atas maka di dalam project folder kita akan meuncul folder baru di lokasi App\View\Components seperti ini

JIka di buka file SideBar.php maka isinya akan serpti ini :

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class SideBar extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('components.side-bar');
    }
}

Di salam file SideBar.php memiliki 2 methods yang pertama adalah magic method __construct() dan nag ke dua adalah method render yang dimana keduanya memiliki fungsi masing-masing yang berbeda.

Method render pada file Sidebar.php berfungsi sebagai render view component yang ada di dalam folder resources/views/components karena jika kita membuat sebuah component maka laravel akan membuat dua buah file yang pertama adalah SIdeBar.php yang ada di App\View\Components dan yang ke dua adalah file side-bar.blade.php yang berada di resources/views/components.

Oke untuk selanjutnya kita akan coba implementasi dari compoennt sidebar tersebut dan bisa apa sih compoennt tesersebut.

Silahkan teman-teman buat route baru seperti berikut ini :

Route::get('/component', function () {
    return view('example');
});

Lalu kita buat file resources/views/example.blade.php dan isikan dengan starter template bootsrap ini :

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Belajar laravel 7</title>
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <h3>This is my main content</h3>
            </div>
            <div class="col-md-4">
                
            </div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <#script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <#script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <#script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

note: remove # pada tag script

lalu di dalam resources/views/components/side-bar.blade.php kita kita buat sederhana seperti ini , saya akan menunjukan cara kerja dari component nya :

<div>
    <h3>This is my side bar</h3>
</div>

nah sekarang kita akan mencoba menampilkan compoennt kita ke dalam example.blade.php sehingga menjadi seperti ini :

<div class="container">
        <div class="row">
            <div class="col-md-8">
                <h3>This is my main content</h3>
            </div>
            <div class="col-md-4">
                <x-side-bar></x-side-bar>
            </div>
        </div>
    </div>

jika di lihat kita telah menambahakan tag elemen baru bernam <x-side-bar></x-side-bar>, nah tag tersebut merupakan perwujudan dari componen side-bar.blade.php, Sudah mirio dengan vue js kan ? heheh.

Jika di jalankan maka hasilnya akan seperti ini :

Okeh untuk saat ini cukup sampai di sini tentang Mengenal Fitur Terbaru Laravel 7 – New Blade Components kita akan bahas lebih mendalam lagi tentang Blade Component karena masih cukup banyak yang kita bisa manfaatkan dari fitur tersebut.

Mengenal Fitur Terbaru Laravel 7 – New Blade Components

Kategori