Tutorial CRUD Laravel Livewire SPA #3 : Install Laravel Livewire


Fika Ridaul Maulayya
Software Engineer | Content Creator | Founder & Author di SantriKoding.com

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

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


Fika Ridaul Maulayya
Software Engineer | Content Creator | Founder & Author di SantriKoding.com

Jika Anda menyukai konten kami, silakan pertimbangkan untuk membeli kopi untuk kami.
Terima kasih atas dukungan Anda!

Buy me a coffeeBuy me a coffee
KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami

KOMENTAR