Media Pengembangan Web & App | by APPKEY

Pembuatan WebsiteLaravelMengenal Laravel Livewire, Apa Bedanya dengan Laravel pada Umumnya?

Mengenal Laravel Livewire, Apa Bedanya dengan Laravel pada Umumnya?

-

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.

Apa Itu Laravel Livewire?

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.

  1. 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.

Artikel Terkait  Prototype Produk : Mencoba Memahami No-Code Untuk Membangun Prototype

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.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Rekomendasi 10 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

4 Cara Mengatasi Autentikasi Google Play Store dengan Cepat dan Mudah

Apakah Anda sedang mengalami masalah autentikasi Google Play Store? Permasalahan autentikasi Google Play Store adalah permasalahan umum sering dialami...

7 Aplikasi Membuat Aplikasi Android Secara Offline

Aplikasi membuat aplikasi android saat ini banyak dicari penekun IT untuk membuat aplikasi Android secara offline tanpa harus menggunakan...

Rekomendasi 10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

Domain Google? Apa Bedanya Dengan Domain Biasa?

Saat memutuskan untuk membuat website menjadi salah satu bentuk media digital marketing Anda dalam bersaing di zaman digital ini,...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya