Pelajari Laravel & Livewire: Panduan Lengkap untuk Pemula!

Daftar Isi

Pengantar Laravel & Livewire
Persiapan Lingkungan Pengembangan
Instalasi Laravel
Memahami Struktur Proyek Laravel
Mengenal Livewire
Membuat Komponen Livewire Pertama
Interaksi Komponen Livewire
Validasi Form dengan Livewire
Membuat CRUD dengan Laravel & Livewire
Deploy Aplikasi Laravel & Livewire
Sumber Belajar dan Channel Rekomendasi

1. Pengantar Laravel & Livewire

Laravel adalah framework PHP yang sangat populer untuk membangun aplikasi web modern dengan sintaks yang elegan dan mudah dipahami. Livewire adalah library full-stack untuk Laravel yang memungkinkan Anda membangun antarmuka interaktif tanpa menulis JavaScript secara langsung.

Dengan Laravel dan Livewire, Anda dapat membuat aplikasi web yang dinamis dan responsif dengan lebih cepat dan mudah.

2. Persiapan Lingkungan Pengembangan

Sebelum memulai, pastikan Anda sudah menyiapkan beberapa hal berikut:

PHP versi 8.1 atau lebih baru
Composer (Dependency Manager PHP)
Database MySQL atau MariaDB
Web server seperti Apache atau Nginx (atau gunakan built-in server Laravel)
Editor kode seperti VSCode

Ilustrasi komputer dengan layar menampilkan kode dan alat pengembangan software

Jika Anda belum menginstall PHP dan Composer, silakan kunjungi situs resmi PHP dan Composer untuk panduan instalasi.

3. Instalasi Laravel

Untuk membuat proyek Laravel baru, buka terminal dan jalankan perintah berikut:

composer create-project laravel/laravel nama-proyek-anda

Setelah instalasi selesai, masuk ke folder proyek:

cd nama-proyek-anda

Jalankan server development Laravel dengan perintah:

php artisan serve

Buka browser dan akses http://localhost:8000 untuk melihat halaman awal Laravel.

4. Memahami Struktur Proyek Laravel

Berikut adalah beberapa folder dan file penting dalam proyek Laravel:

app/ - Tempat kode aplikasi seperti Models, Controllers, dan Livewire Components
routes/ - File routing aplikasi (web.php, api.php)
resources/views/ - Template Blade untuk tampilan
database/ - Migrasi dan seeder database
public/ - Folder publik untuk assets dan index.php

Diagram struktur folder proyek Laravel dengan folder app, routes, resources, database, dan public

Memahami struktur ini sangat penting agar Anda dapat mengembangkan aplikasi dengan baik.

5. Mengenal Livewire

Livewire adalah library Laravel yang memungkinkan Anda membuat komponen interaktif tanpa menulis JavaScript secara eksplisit. Livewire menggunakan AJAX untuk komunikasi antara frontend dan backend.

Diagram alur kerja Livewire antara frontend dan backend menggunakan AJAX

Dengan Livewire, Anda dapat membuat UI yang dinamis dengan cara yang lebih sederhana dan terintegrasi dengan Laravel.

6. Membuat Komponen Livewire Pertama

Untuk membuat komponen Livewire, jalankan perintah berikut di terminal:

php artisan make:livewire Counter

Perintah ini akan membuat dua file:

app/Http/Livewire/Counter.php (class komponen)
resources/views/livewire/counter.blade.php (view komponen)

Contoh isi Counter.php :

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

Contoh isi counter.blade.php :

<div class="text-center">
    <h1 class="text-4xl font-bold mb-4">{{ $count }}</h1>
    <button wire:click="increment" class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">Tambah</button>
</div>

Untuk menampilkan komponen ini di view Laravel, gunakan:

<livewire:counter />

Jangan lupa untuk menginstall Livewire dengan perintah:

composer require livewire/livewire

Dan tambahkan directive Livewire di resources/views/layouts/app.blade.php atau file layout Anda:

<head>
    ...
    @livewireStyles
</head>
<body>
    ...
    @livewireScripts
</body>

7. Interaksi Komponen Livewire

Livewire memungkinkan Anda membuat interaksi yang kompleks seperti binding data, event, dan lifecycle hooks.

Contoh binding input:

<div>
    <input type="text" wire:model="name" placeholder="Masukkan nama" class="border p-2 rounded w-full mb-4" />
    <p>Halo, {{ $name }}!</p>
</div>

Pada class komponen, deklarasikan properti $name :

public $name = '';

Setiap perubahan input akan otomatis mengupdate properti dan tampilan.

Ilustrasi input teks dengan binding data real-time menggunakan Livewire

8. Validasi Form dengan Livewire

Livewire mendukung validasi form secara mudah menggunakan fitur Laravel Validator.

Contoh validasi form sederhana:

<div>
    <form wire:submit.prevent="submit">
        <input type="text" wire:model="email" placeholder="Email" class="border p-2 rounded w-full mb-2" />
        <@error('email')><span class="text-red-600 text-sm">{{ $message }}</span></@error>
        <button type="submit" class="mt-4 px-4 py-2 bg-indigo-600 text-white rounded">Kirim</button>
    </form>
</div>

Pada class komponen:

public $email = '';

public function submit()
{
    $this->validate([
        'email' => 'required|email',
    ]);

    // Proses data setelah validasi berhasil
    session()->flash('message', 'Email berhasil dikirim!');
}

Anda juga bisa menampilkan pesan sukses di view:

<div>
    @if (session()->has('message'))
        <div class="bg-green-100 text-green-700 p-3 rounded mb-4">
            {{ session('message') }}
        </div>
    @endif
</div>

9. Membuat CRUD dengan Laravel & Livewire

Berikut contoh sederhana membuat fitur CRUD (Create, Read, Update, Delete) menggunakan Livewire.

Model dan Migrasi

Buat model dan migrasi untuk data Task :

php artisan make:model Task -m

Isi migrasi database/migrations/xxxx_xx_xx_create_tasks_table.php :

public function up()
{
    Schema::create('tasks', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->boolean('completed')->default(false);
        $table->timestamps();
    });
}

Jalankan migrasi:

php artisan migrate

Membuat Komponen Livewire Task

Buat komponen Livewire:

php artisan make:livewire Tasks

Isi app/Http/Livewire/Tasks.php :

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Task;

class Tasks extends Component
{
    public $tasks;
    public $title;
    public $taskId;
    public $updateMode = false;

    public function render()
    {
        $this->tasks = Task::orderBy('created_at', 'desc')->get();
        return view('livewire.tasks');
    }

    public function resetInputFields()
    {
        $this->title = '';
        $this->taskId = null;
    }

    public function store()
    {
        $this->validate([
            'title' => 'required|min:3',
        ]);

        Task::create(['title' => $this->title]);

        session()->flash('message', 'Task berhasil ditambahkan.');

        $this->resetInputFields();
    }

    public function edit($id)
    {
        $task = Task::findOrFail($id);
        $this->taskId = $id;
        $this->title = $task->title;
        $this->updateMode = true;
    }

    public function cancel()
    {
        $this->updateMode = false;
        $this->resetInputFields();
    }

    public function update()
    {
        $this->validate([
            'title' => 'required|min:3',
        ]);

        if ($this->taskId) {
            $task = Task::find($this->taskId);
            $task->update(['title' => $this->title]);
            $this->updateMode = false;
            session()->flash('message', 'Task berhasil diperbarui.');
            $this->resetInputFields();
        }
    }

    public function delete($id)
    {
        Task::find($id)->delete();
        session()->flash('message', 'Task berhasil dihapus.');
    }
}

Isi resources/views/livewire/tasks.blade.php :

<div class="max-w-xl mx-auto p-4 bg-white rounded shadow">
    @if (session()->has('message'))
        <div class="bg-green-100 text-green-700 p-3 rounded mb-4">
            {{ session('message') }}
        </div>
    @endif

    @if($updateMode)
        <form wire:submit.prevent="update">
            <input type="text" wire:model="title" placeholder="Edit task" class="border p-2 rounded w-full mb-2" />
            @error('title')<span class="text-red-600 text-sm">{{ $message }}</span>@enderror
            <div class="flex space-x-2">
                <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">Update</button>
                <button type="button" wire:click="cancel" class="bg-gray-400 text-white px-4 py-2 rounded hover:bg-gray-500">Batal</button>
            </div>
        </form>
    @else
        <form wire:submit.prevent="store">
            <input type="text" wire:model="title" placeholder="Tambah task baru" class="border p-2 rounded w-full mb-2" />
            @error('title')<span class="text-red-600 text-sm">{{ $message }}</span>@enderror
            <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">Tambah</button>
        </form>
    @endif

    <ul class="mt-6 space-y-3">
        @foreach($tasks as $task)
            <li class="flex justify-between items-center border-b pb-2">
                <span>{{ $task->title }}</span>
                <div class="space-x-2">
                    <button wire:click="edit({{ $task->id }})" class="text-blue-600 hover:text-blue-800"><i class="fas fa-edit"></i></button>
                    <button wire:click="delete({{ $task->id }})" class="text-red-600 hover:text-red-800"><i class="fas fa-trash-alt"></i></button>
                </div>
            </li>
        @endforeach
    </ul>
</div>

Tambahkan komponen ini di halaman utama atau halaman yang Anda inginkan: