Apa itu Livewire dan Bagaimana Cara Menginstallnya?
Livewire adalah salah satu library yang memungkinkan pengembang web untuk membuat interaksi antara frontend dan backend lebih mudah. Diciptakan oleh Caleb Porzio, Livewire merupakan salah satu alat paling populer di kalangan pengembang web pada tahun 2021. Livewire membantu kita mengurangi jumlah kode JavaScript yang harus ditulis untuk membuat aplikasi web yang lebih dinamis.
Dalam dunia web development, Livewire menerapkan konsep SPA (Single Page Application) tanpa harus menulis banyak code JavaScript. Misalnya, ketika kita mengklik sebuah link, Livewire tidak langsung me-refresh halaman. Sebaliknya, Livewire adalah javascript yang mengambil data dari server pada saat klik, dan menampilkan data yang diperlukan tanpa mengubah url yang ditampilkan pada web-browser.
Livewire membuat interaksi user menjadi lebih mudah dan lebih cepat dalam hal mengubah data dari backend ke frontend dan sebaliknya tanpa harus lagi mengeksekusi Javascript. Hal ini membuat aplikasi menjadi lebih cepat, lebih bertenaga dan lebih mudah dikembangkan.
Untuk menginstall Livewire, pertama-tama kita perlu memiliki Laravel 7 atau 8 terlebih dahulu pada komputer kita. Kemudian, kita dapat mengikuti langkah-langkah berikut:
1. Buka terminal dan cd ke direktori Laravel yang sudah kita buat sebelumnya.
2. Kemudian, ketikkan perintah composer require livewire/livewire
3. Langkah selanjutnya adalah menambahkan Livewire pada file konfigurasi “config/app.php“
“`
‘providers’ => [
// …
Livewire\LivewireServiceProvider::class,
],
‘aliases’ => [
// …
‘Livewire’ => Livewire\Livewire::class,
],
“`
4. Setelah itu, kita perlu membuat file JavaScript baru yang bernama “bootstrap.js“ di dalam direktori “resources/js/“ lalu tambahkan baris kode berikut pada “bootstrap.js“:
“`
window.livewire = require(‘livewire’);
“`
5. Terakhir, kita harus meng-compile JavaScript kita agar Livewire bisa berjalan. Caranya adalah dengan menjalankan perintah:
“`
npm install && npm run dev
“`
Dengan begitu, Livewire sudah terinstall pada komputer kita dan siap digunakan untuk mempercepat pengembangan aplikasi web yang kita buat.
Membuat Komponen Livewire Pertama Anda
Banyak developer Indonesia yang merasa kesulitan saat memutuskan pemilihan teknologi yang tepat untuk pengembangan aplikasi web mereka. Livewire, sebuah teknologi modern dan inovatif, merupakan solusi untuk masalah tersebut. Bagi para pemula yang ingin memulai mempelajari Livewire, tutorial ini akan memberikan langkah-langkah mudah dalam membuat komponen Livewire pertama Anda.
Pertama-tama, Anda perlu membuka terminal di komputer Anda dan menciptakan proyek baru menggunakan Laravel seperti biasa. Setelah itu, Anda harus menginstal Livewire menggunakan Composer. Setelah pemasangan Livewire berhasil dilakukan, maka Anda dapat mulai membuat komponen Livewire pertama Anda.
Komponen Livewire pertama Anda akan berfungsi seperti kotak input, yang memungkinkan Anda memasukkan teks ke dalam suatu kolom atau input. Anda akan membuat komponen ini dengan menambahkan file php baru di dalam direktori / http / Livewire. Beri nama file tersebut sesuai nama yang telah Anda tentukan. Sebagai contoh, nama file dapat Anda beri “nama-komponen-livewire.php”.
Selanjutnya, Anda perlu menambahkan kode yang diperlukan untuk membentuk komponen Livewire pertama Anda. Tahap ini cukup penting dan memerlukan beberapa kode untuk membuatnya tersambung dengan proyek dan menampilkan kotak input.
“`
<? php
namespace App \ Http \ Livewire;
use Livewire \ Component;
class NamaKomponenLivewire extends Component
{
public $nama = ‘Anda’;
public function render ()
{
return view (‘livewire.nama-komponen-livewire’);
}
}
?>
“`
Setelah Anda menambahkan beberapa kode ke file tersebut, langkah selanjutnya adalah mengkonfigurasinya dan me-render file tersebut agar dapat diakses di aplikasi Anda. Anda harus membuat file View Laravel baru dan menambahkan kode berikut:
“`
“`
Sekarang kita sudah punya dua file yang terhubung ke satu sama lain. File yang pertama bertanggung jawab untuk membuat komponen Livewire, sementara file kedua bertanggung jawab untuk menampilkan kotak input. Ketika kotak input dikirim, data akan disimpan dalam variabel php yang ada di dalam file komponen pertama Anda dan dapat diakses kembali nantinya.
Komponen Livewire pertama Anda sekarang telah sukses dibuat! Anda bisa menambahkan fungsi-fungsi lain atau mengubah eksisting selayaknya Anda membuat fitur untuk input suara, tema dark/light dan lain-lain. Konsep pada tutorial ini adalah dasar Livewire untuk membantu Anda mengembangkan aplikasi web dengan cepat.
Terakhir, Anda perlu melakukan beberapa perubahan pada file web.php di direktori routes dan memberikan route ke halaman blade Anda. Online community di manapun di Indonesia setiap hari memperbaiki cara mereka dalam mengembangkan Aplikasi, dan tutorial ini akan membantu Anda dalam membuat komponen Livewire pertama Anda.
Komunikasi Antara Komponen Livewire
Setelah mempelajari cara menghubungkan komponen pada Livewire, saatnya kita membahas bagaimana komponen-komponen tersebut saling berkomunikasi untuk saling memberikan informasi.
Komunikasi antara komponen pada Livewire adalah salah satu hal yang sangat penting untuk membuat sebuah halaman web yang dinamis dan interaktif. Kita bisa membuat interaksi antara komponen seperti dropdown dengan tabel, input dengan button, atau hal-hal lain yang kreatif.
Untuk mempermudah pembahasan, kita akan fokus pada dua hal penting dalam komunikasi antar komponen pada Livewire, yaitu EventEmitter dan Listener.
EventEmitter
EventEmitter pada Livewire berguna ketika kita ingin mengirimkan sebuah perintah atau informasi dari suatu komponen ke komponen lainnya. Misalnya, kita ingin membuat sebuah dropdown yang berisi pilihan kategori produk, kemudian ketika kita memilih salah satu kategori, maka tabel produk akan berubah sesuai dengan kategori yang dipilih.
Untuk membuat EventEmitter, kita bisa menggunakan directive wire:click atau wire:change pada element HTML yang kita inginkan. Kemudian, pada controller Livewire, kita bisa membuat fungsi yang akan mengeksekusi perintah ketika EventEmitter di-trigger.
Contoh:
<div wire:click="$emit('kategoriDipilih', $kategoriId)">
</div>
public function pilihKategori($kategoriId)
{
// logika untuk mengubah tabel produk
}
Pada contoh di atas, ketika elemen div di-click, maka sebuah EventEmitter dengan nama “kategoriDipilih” akan dipancarkan. EventEmitter tersebut akan membawa sebuah parameter yaitu $kategoriId. Setelah itu, pada fungsi pilihKategori di controller Livewire, kita dapat memanipulasi data yang diterima dari EventEmitter tersebut.
Listener
Setelah EventEmitter dipancarkan, selanjutnya adalah bagaimana caranya agar sebuah komponen bisa menerima EventEmitter tersebut dan melakukan tindakan yang seharusnya. Untuk itu, kita memerlukan sebuah Listener.
Untuk membuat Listener, kita bisa menggunakan directive wire:listen pada suatu komponen. Directive ini akan menunggu EventEmitter yang dipancarkan oleh komponen lain dan akan mengeksekusi kode yang terdapat pada Listener ketika EventEmitter berhasil diterima.
Contoh:
<div wire:listen="kategoriDipilih">
// logika untuk memberikan tindakan ketika EventEmitter diterima
</div>
Pada contoh di atas, ketika EventEmitter dengan nama “kategoriDipilih” dipancarkan, maka kode di dalam Listener tersebut akan dijalankan.
Seperti yang kita lihat pada contoh di atas, EventEmitter dan Listener pada Livewire sangatlah simple dan mudah digunakan. Namun, hal ini memberikan fleksibilitas bagi developer untuk berkreasi dan menciptakan halaman web yang dinamis dan interaktif.
Menerapkan Kerangka Bootstrap pada Livewire
Livewire dan Bootstrap adalah dua teknologi frontend yang populer di antara pengembang web di Indonesia. Livewire memungkinkan pengembang untuk membangun aplikasi web interaktif dengan menggunakan PHP, sedangkan Bootstrap adalah kerangka CSS yang populer dan umum digunakan untuk desain web responsif. Dalam tutorial ini, Anda akan belajar cara mengintegrasikan kerangka Bootstrap ke dalam proyek Livewire Anda.
Langkah pertama untuk memulai tutorial ini adalah dengan menambahkan Bootstrap ke proyek Laravel dengan menggunakan npm. Pastikan Anda telah menginstal Node.js di komputer Anda. Kemudian, buka terminal Anda dan masuk ke direktori proyek Laravel. Jalankan perintah berikut:
npm install bootstrapSetelah instalasi selesai, buka berkas app.css atau buat jika belum ada, yang terletak di dalam folder resources/css pada proyek Anda. Kemudian, Anda perlu menambahkan kerangka Bootstrap ke berkas tersebut:
@import '~bootstrap/dist/css/bootstrap.css';Dengan menghubungkan dan mengimpor kerangka Bootstrap ke berkas CSS utama Anda, Anda siap untuk menggunakannya dalam proyek Livewire Anda.
Langkah selanjutnya adalah membuat komponen Livewire yang akan menggunakan Bootstrap. Anda dapat menggunakan salah satu contoh proyek Livewire yang telah Anda buat sebelumnya.
Misalnya, kita akan membuat sebuah form kontak dengan menggunakan Bootstrap. Buka berkas utama untuk komponen Livewire Anda dan tambahkan kode berikut:
<form>
<div class="form-group">
<label for="name">Nama</label>
<input type="text" class="form-control" id="name" wire:model="name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" wire:model="email">
</div>
<div class="form-group">
<label for="subject">Subjek</label>
<input type="text" class="form-control" id="subject" wire:model="subject">
</div>
<div class="form-group">
<label for="message">Pesan</label>
<textarea class="form-control" id="message" rows="5" wire:model="message"></textarea>
</div>
<button type="submit" class="btn btn-primary" wire:click="submitForm">Kirim</button>
</form>Cara kerja komponen ini adalah Anda membuat form dengan empat field: nama, email, subjek, dan pesan. Kemudian, Anda memiliki tombol “Kirim” yang akan mengirimkan data form ke server melalui metode submitForm. Metode submitForm akan mengumpulkan data dari masing-masing field dan mengirimkannya ke server menggunakan Livewire.
Anda mungkin telah memperhatikan bahwa setiap input field dan tombol “Kirim” dilengkapi dengan atribut wire:model. Ini memungkinkan Livewire untuk memantau perubahan di setiap field secara real-time dan menangkap data form saat dikirim.
Setelah Anda menambahkan kode di atas, Anda harus membuat CSS untuk membuat form terlihat lebih baik. Untuk ini, Anda dapat menambahkan beberapa aturan CSS ke dalam berkas app.css. Contohnya dapat dilihat di bawah ini:
.form-group label {
font-weight: bold;
}
.btn-primary {
background-color: #007bff;
}Dalam contoh di atas, aturan CSS ini mengubah tampilan form dengan memberi tebal pada label dan mengubah warna tombol “Kirim” menjadi biru (Seperti Bootstrap warna biru)
Sekarang, Anda sudah siap menggunakan Bootstrap pada proyek Livewire Anda. Yuk, cobalah di rumah!
