Last Updated on June 3, 2022 by
Membangun web app bisa nenjadi pekerjaan yang sulit terlebih jika Anda menggunakan tools seperti Vue dan React yang powerful dan juga kompleks. Seringkali, kompleksitas suatu framework membuat banyak developer mengalami kesulitan. Ditengah kesulitan ini, Larvel Livewire hadir sebagai salah satu solusi.
Table of Contents
Apa Itu Laravel Livewire?
Laravel adalah framework PHP yang sangat terkenal. Sejak lama, Laravel telah menjadi framework yang disukai oleh jutaan web developer di seluruh dunia. Kini, dengan kehadiran Livewire, banyak developer juga mulai menyukai tools ini dalam bekerja dengan bahasa pemrograman PHP.
Untuk kamu yang masih pemula atau belum familiar dengan Laravel mungkin akan bertanya-tanya. Apa itu Laravel Livewire?
Laravel Livewire adalah sebuah library yang memungkinkan Anda untuk membangun reactive and dynamic interface (antarmuka yang dinamis dan reaktif) menggunakan kode-kode Blade dan sedikit kode-kode JavaScript. Anda hanya akan menulis JavaScript untuk meneruskan data melalui browser event dan menanggapinya.
Ia juga bisa dikatakan sebagai fullstack framework untuk Laravel. Livewire dan Laravel adalah dua hal yang berbeda, di mana Laravel adalah sebuah framework untuk PHP sementara Livewire sendiri adakah framework untuk Laravel. Jadi dapat disimpulkan bahwa Laravel Livewire adalah bagian dari Laravel itu sendiri. Anda dapat menggunakan Livewire untuk memudahkan pekerjaan Anda dengan Laravel.
Livewire memungkinkan Anda untuk menerapkan fitur berikut tanpa memuat ulang halaman:
- pagination
- form validation
- notifications
- file uploads preview
Anda dapat menggunakannya untuk lebih banyak lagi. Fitur di atas hanyalah fitur paling umum yang mungkin ingin Anda terapkan di dalam sebuah aplikasi.
Bagaimana Cara Kerja Laravel Livewire?
Untuk membantu memudahkan Anda dalam memahami cara kerja Laravel Livewire, kami telah merangkumnya menjadi sebagai berikut.
- Livewire merender output komponen awal dengan halaman (seperti yang ada pada Blade juga termasuk). Dengan cara ini, website Anda pun menjadi lebih SEO friendly.
- Ketika interaksi terjadi, Livewire membuat permintaan AJAX ke server dengan data yang diperbarui.
- Server pada Livewire merender ulang seluruh komponen dan membuat respon dengan HTML baru.
- Livewire kemudian mengubah DOM dengan cerdas sesuai dengan hal-hal yang berubah.
Kelebihan dan Kekurangan Laravel Livewire
Sebagaimana framework dari berbagai bahasa pemrograman lainnya, Laravel Livewire juga memiliki berbagai kelebihan dan kekurangan.
Kelebihan
- Ramah pemula, karena permintaan AJAX dapat dibuat dengan sedikit atau tanpa pengetahuan JavaScript
- Ramah SEO, karena HTML dikirim ke browser pada rendering pertama
- Integrasi ke dalam halaman Laravel yang ada dimungkinkan
- Pengujian otomatis dimungkinkan karena rangkaian pengujian yang disertakan
Kekurangan
- Peningkatan beban server, karena semua perubahan status dilakukan melalui permintaan AJAX
- Pemecahan masalah yang lebih sulit dimungkinkan karena pencampuran logika back- dan frontend
Cara Install Laravel Livewire
Selanjutnya, yang pasti menjadi pertanyaan besar bagi Anda adalah bagaimana cara menginstall Laravel Livewire. Caranya sangat mudah! Pertama-tama yang And butuhkan adalah PHP versi 7.2.5 atau yang lebih tinggi dan Laravel 7.0 atau yang lebih tinggi. Kemudian, ikuti langkah-langkah berikut.
- Install Package Laravel Livewire
Penginstallan Laravel Livewire bisa dilakukan dengan mengikuti kode berikut.
composer require livewire/livewire
2. Masukkan aset
Tambahkan arahan Blade berikut di tag head, dan sebelum tag body akhir di template Anda.
<html> 2<head> 3 ... 4 @livewireStyles 5</head> 6<body> 7 ... 8 @livewireScripts 9</body> 10</html>
Anda juga menggunakan tag syntax sebagai alternatif
<livewire:styles /> 2... 3<livewire:scripts />
Itulah cara menginstal Laravel Livewire.Penginstalannya memang cukup mudah dan tidak membutuhkan banyak waktu sehingga cocok untuk Anda yang masih pemula atau tidak suka penginstalan framework, library, dan lainnya yang memakan waktu lama.
Konsep-Konsep Penting dalam Laravel Livewire
Ada beberapa konsep penting yang harus Anda ketahui untuk bekerja dengan Laravel Livewire yaitu.
1. Livewire Components
Komponen Livewire sangat mirip dengan komponen berbasis kelas Laravel Blade. Berikut ini adalah dua perbedaannya.
- Membuat komponen Laravel Blade
Anda akan membuat komponen Laravel Blade dengan menjalankan perintah berikut:
php artisan make:component Alert
Ini akan membuat file kelas Alert.php baru dan menempatkannya di folder App\Views\Components. Kemudian, template tampilan yang sesuai dibuat dan ditempatkan di resources/views/components. Untuk menampilkan komponen, Anda dapat menggunakan sintaks Blade ini: <x-alert/>.
- Membuat Komponen Livewire
Untuk membuat komponen Livewire, jalankan perintah berikut:
php artisan make:livewire Alert
Perintah ini akan menghasilkan dua file baru yaitu: app\Http\Livewire\Alert.php dan resources/views/livewire/alert.php. Anda bisa melakukan rendeer dengan kedua komponen tersebut.
Seperti yang Anda lihat, perintahnya terlihat sangat mirip. Satu-satunya perbedaan utama adalah bahwa dengan komponen Livewire, ada sinkronisasi waktu nyata (tidak diperlukan penyegaran halaman) antara kelas komponen dan template tampilannya.
2. Livewire Properties
Properti publik di kelas komponen Anda tersedia untuk tampilan templat komponen. Itu tidak berhenti di situ, nilai properti disinkronkan secara real time ke tampilan, sehingga ketika Anda memperbarui nilai properti dalam tampilan, itu secara otomatis diperbarui di kelas komponen.
//App\Http\Livewire\Alert.php
<?php
class Alert extends Component{
public $message = "pesan peringatan";
}
// livewire/alert.blade.php
<div>
<input wire:model="pesan">
<br/>
{{ $message }}
</div>
Untuk mengikat properti komponen ke elemen input html, Anda akan menggunakan sintaks berikut:
wire:model="property name"
Dengan mengetik di kotak input, Anda akan melihat nilai pembaruan $message secara real time. Ini sangat mirip dengan konsep pengikatan data dalam kerangka kerja seperti Vue.js, React, dan Angular. Pelajari lebih lanjut tentang properti Livewire di sini.
3. Livewire Actions
Sama seperti Anda bisa mengikat data di template tampilan ke properti publik komponen, Anda juga bisa memetakan peristiwa sisi klien ke metode di komponen Anda. Misalnya, Anda dapat merespons peristiwa klik, peristiwa keyup dan keydown, dan lain-lain. menggunakan metode yang ditentukan di kelas komponen Anda.
<?php
use Livewire\Component;
class PostAlert extends Component{
public $liked = true;
public function render(){
return view('livewire.post-alert');
}
public function toggleLike(){
$this->liked = !$this->liked;
}
}
// livewire/post-alert.blade.php
<div>
<h4>Seeing livewire action in action </h4>
<button class="btn btn-primary" wire:click="toggleLike()">
Like
</button>
@if ($liked)
<i class="fa fa-heart text-danger h4"></i>
@else
<i class="fa fa-heart text-secondary h4"></i>
@endif
</div>
Di kelas komponen di atas, kami membuat metode toggleLike() yang mengubah nilai properti yang disukai ke nilai Boolean yang berlawanan. Dalam tampilan template, kami memiliki tombol dan ikon hati yang berwarna merah atau abu-abu berdasarkan nilai properti yang disukai.
Banyak kasus penggunaan Livewire berkisar pada properti dan tindakan, dan karena itu, sangat penting untuk dipahami. Konsep-konsep ini dapat diterapkan pada hal-hal seperti membuat formulir, mengedit formulir, menghapus formulir, dll. Baca lebih lanjut tentang tindakan Livewire di sini.
4. Data Validation
Livewire membuat validasi data menjadi mulus. Untuk memvalidasi data yang berasal dari tampilan Templat formulir, Anda akan menulis properti $rules yang berisi aturan validasi Anda, seperti yang Anda lakukan di Laravel. Setelah itu, Anda memanggil $this→validate() dalam metode yang melakukan validasi.
class CreatePost extends Component
{
public $title, $body;
public $success;
protected $rules = [
'title' => 'required|string|max:220',
'body' => 'required'
];
public function render()
{
return view('livewire.create-post')
->extends('layouts.app')
->section('content');
}
public function create(){
$this->validate();
Post::create([
'title' => $this->ini adalah tutorial livewire
'slug' => Str::slug($this->ini adalah tutorial livewire),
'body' => $this->body,
'author_id' => auth()->id()
]);
$this->success = true;
}
}
// livewire/create-post
<div class="container">
@if ($success)
<div class="alert alert-success">
Post sukses dibuat
</div>
@endif
<form wire:submit.prevent="create">
<div class="form-group">
<label for="Post title">Post judul</label>
<input wire:model="title" type="text" name="judul" id="title" class="form-control" placeholder="judul post">
@error('title') <span class="error">{{ $message }}</span> @enderror
</div>
<div class="form-group">
<label for="Post body">Post Body</label>
<textarea name="body" id="body" placeholder="Body of post here..." wire:model="body" class="form-control"></textarea>
@error('body') <span class="error">{{ $message }}</span> @enderror
</div>
<div>
<button class="btn btn-primary" type="submit">Publish</button>
</div>
</form>
</div>
Dalam kode formulir di atas, ketika pengguna mengirimkan posting, dan tidak lulus validasi, kesalahan validasi ditampilkan, semua tanpa penyegaran halaman.
Itulah penjelasan tentang Laravel Livewire. Livewire berguna untuk menghubungkan kesenjangan antara backend dan frontend. Anda mendapatkan manfaat dari interaktivitas waktu nyata tanpa harus menulis banyak JavaScript sendiri. Jika Anda pernah menggunakan Vue.js sebelumnya, sangat mudah untuk melihat manfaat Livewire.
Livewire bukan pilihan tepat untuk aplikasi yang sangat menuntut di sisi klien. Tetapi dalam situasi di mana Anda menginginkan aplikasi yang dirender server dengan berbagai reaktivitas, Livewire akan melayani Anda dengan baik.
Jika Anda tertarik untuk tahu lebih banyak tentang pengembangan website dan aplikasi, kunjungi Web App sekarang juga!
Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.
