Tutorial CRUD Laravel Livewire SPA #3 : Install Laravel Livewire - Halo teman-teman semuanya, pada tutorial kali ini kita semua akan belajar bagaimana cara menginstall Package Laravel Livewire ddi dalam aplikasi/project kita.
Bagaimana Cara Kerja Livewire ?
Mungkin sebagian teman-teman ada yang bertanya seperti itu, jadi berikut ini beberapa alur kerja dari Livewire yang bisa teman-teman pahamai :
-
Livewire membuat output komponen awal dengan halaman (termasuk seperti Blade), dengan cara ini maka tentu saja akan SEO friendly.
-
Ketika interaksi terjadi, Livewire akan membuat permintaan AJAX ke server dengan data yang diperbarui.
-
Server merender ulang komponen dan merespons dengan HTML baru.
-
Livewire kemudian secara cerdas bermutasi DOM sesuai dengan hal-hal yang berubah.
Untuk installasi dari Livewire sendiri sangat mudah sekali jika teman-teman melihat langsung dari dokumentasi resminya. Langsung saja kita mulai.
Langkah 1 - Installasi Laravel Livewire
Silahkan teman-teman jalankan perintah dibawah ini untuk menginstall Laravel Livewire :
composer require livewire/livewire:^1.3.3
Disini teman-teman harus terhubung dengan internet, karena package ini akan langsung diunduh dari online deengan versi yang paling terbaru.
Langkah 2 - Memasang CSS & JavaScript dari Livewire
Selanjutnya kita akan memsang CSS & JavaScript dari Livewire di aplikasi yang akan kita buat nanti. Silahkan teman-teman buat sebuah folder baru dengan nama layouts di dalam folder resources/views. Dan di dalam folder layouts teman-teman buat sebuah file baru dengan nama app.blade.php
Kurang lebih struktur foldernya seperti berikut ini :
resources/views/
|── layouts
|── app.blade.php
|── welcome.blade.php
Silahkan teman-teman buka file app.blade.php dan masukkan kode berikut ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Laravel Livewire SPA - SantriKoding.com</title>
<link rel=“stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<livewire:styles/>
<livewire:scripts/>
</head>
<body>
<div class="container mt-5 mb-5">
<div class="row justify-content-center">
<div class="col-md-12">
</div>
</div>
</div>
</body>
</html>
Jika teman-teman perhatikan, disini kita menambahkan sebuah kode HTML dan kita memasang CSS & JavaScript dari Livewire pada bagian tag head.
<livewire:styles/>
<livewire:scripts/>
Sampai disini jika kita menjalankan aplikasi kita, maka belum terjadi apa-apa, untuk tutorial selanjutnya kita akan menginstall Turbolinks untuk membuat aplikasi kita menjadi SPA atau Single Page Application.
SOURCE CODE
Untuk teman-teman yang ingin mengunduh source codenya : https://github.com/maulayyacyber/CRUD-Laravel-Livewire-SPA
KESIMPULAN
Pada tutorial kali ini kita semua telah belajar bagaimana cara menginstall Laravel Livewire & memasang CSS & JavaScript dari Livewire di aplikasi kita.
Jika teman-teman ada pertanyaan atau kendala saat mencoba, silahkan teman-teman bisa bertanya melalui kolom komentar dibawah artikel ini.
Terima Kasih