Tutorial CRUD Laravel Livewire SPA #3 : Install Laravel Livewire


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder SantriKoding.com
Tutorial CRUD Laravel Livewire SPA #3 : Install Laravel Livewire

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


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

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