- Perubahan di Laravel Livewire 4
- Langkah 1 - Installasi Livewire
- Langkah 2 - Publish Konfigurasi (Opsional)
- Langkah 3 - Membuat Layout Aplikasi
- Kesimpulan
Halo teman-teman semuanya. Pada artikel sebelumnya, kita telah berhasil membuat Model dan Migration, serta menjalankan migrate untuk membuat struktur tabel posts di database.
Perubahan di Laravel Livewire 4
Sebelum kita masuk ke proses installasi, ada baiknya teman-teman memahami terlebih dahulu beberapa perubahan penting yang diperkenalkan di Laravel Livewire 4. Hal ini sangat penting agar kita tidak lagi menggunakan pola lama Livewire 2 atau 3 yang sudah mulai ditinggalkan.
Livewire 4 membawa pendekatan yang lebih modern, lebih rapi, dan lebih selaras dengan konsep Single Page Application (SPA), namun tetap menggunakan Blade dan PHP sebagai fondasi utamanya.
Salah satu perubahan paling besar di Livewire 4 adalah diperkenalkannya konsep Page Component. Pada versi sebelumnya, kita biasanya membuat component di folder app/Livewire dan menghubungkannya dengan route menggunakan class-based routing. Di Livewire 4, kita bisa langsung membuat component yang sekaligus berperan sebagai halaman penuh (full page), tanpa perlu controller sama sekali.
Livewire 4 juga memperkenalkan pola Single File Component, di mana logic dan view bisa ditulis dalam satu file Blade. Di dalam file tersebut, kita menuliskan class Livewire menggunakan sintaks:
new class extends Component
{
// logic livewire
};
Pendekatan ini membuat struktur project menjadi lebih ringkas dan mudah dipahami, terutama untuk aplikasi berbasis CRUD seperti yang akan kita bangun.
Selain itu, Livewire 4 kini menyediakan cara resmi untuk mengatur layout dan title halaman langsung dari component, tanpa perlu lagi menggunakan @extends atau @section seperti sebelumnya. Kita bisa menggunakan method:
$this->view()
->layout('layouts::app')
->title('Judul Halaman');
Dan masih banyak lagi perubahan lainnya, selengkapnya bisa cek disini:
Pada artikel kali ini, kita akan belajar bagaimana cara melakukan installasi dan konfigurasi Laravel Livewire 4 di dalam project Laravel yang sudah kita siapkan. Tahapan ini penting agar kita bisa mulai membuat komponen Livewire yang dinamis dan interaktif tanpa banyak JavaScript.
Langkah 1 - Installasi Livewire
Silahkan teman-teman jalankan perintah berikut di dalam terminal/CMD dan pastikan sudah berada di dalam root project Laravel:
composer require livewire/livewire:^4.0
Perintah ini akan menginstall package Livewire 4 beserta semua dependensinya.
Langkah 2 - Publish Konfigurasi (Opsional)
Livewire bersifat zero-config, artinya kita bisa langsung menggunakannya tanpa konfigurasi tambahan. Namun, jika teman-teman ingin melakukan penyesuaian seperti kustom namespace atau behavior, silakan jalankan perintah di bawah ini:
php artisan livewire:publish --config
Perintah di atas akan menghasilkan file konfigurasi livewire.php di folder config.
Langkah 3 - Membuat Layout Aplikasi
Layout akan kita gunakan sebagai template induk untuk semua halaman yang nanti akan menggunakan Livewire.
Silahkan teman-teman jalankan perintah berikut:
php artisan livewire:layout
Jika berhasil, maka kita akan mendapatkan file layout baru di:
resources/views/components/layouts/app.blade.php
Silahkan buka file tersebut dan ubah semua kodenya menjadi seperti berikut:
resources/views/components/layouts/app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ $title ?? config('app.name') }}</title>
@livewireStyles
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500&family=Quicksand:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
body {
background-color: lightgray;
font-family: 'Quicksand', sans-serif
}
</style>
</head>
<body>
<div>
<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
<div class="container">
<a href="/" wire:navigate class="navbar-brand">HOME</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0" role="search">
<a href="https://santrikoding.com" target="_blank" class="btn btn-success">SANTRIKODING.COM</a>
</ul>
</div>
</div>
</nav>
</div>
{{ $slot }}
@livewireScripts
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Di atas, kita meletakkan direktif @livewireStyles pada bagian <head> untuk memanggil CSS Livewire, dan @livewireScripts di bagian bawah <body> untuk memanggil JavaScript Livewire yang diperlukan agar komponen bisa bekerja secara interaktif.
kemudian kita juga menambahkan CSS dan JS dari Bootstrap, ini bertujuan agar kita lebih mudah dalam membuat user interface-nya.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
Karena ini adalah induk template, maka untuk me-render setiap view yang meng-extends layout ini kita bisa gunakan kode $slot.
{{ $slot }}
Kesimpulan
Pada artikel ini kita telah belajar bersama-sama bagaimana cara melakukan installasi Livewire 4, publish konfigurasi Livewire (jika diperlukan), serta membuat layout dasar yang akan digunakan sebagai template induk di dalam aplikasi kita.
Pada artikel selanjutnya, kita akan mulai belajar cara menampilkan data dari database menggunakan Livewire 4, sehingga aplikasi yang kita bangun akan mulai terasa dinamis dan interaktif.
Terima kasih
SAWERIA
Memuat komentar...