Menguasai Laravel + Livewire dalam 14 Hari

Tujuan: paham struktur folder Laravel dan bikin project pertama.

Sub-topik

• Refresh PHP: variabel, array, function, class/OOP dasar
• Membuat project Laravel baru
• Mengenal folder penting: routes/, app/, resources/views/, public/, .env
• Menjalankan server development

# Cara resmi terbaru (butuh Laravel installer)
composer global require laravel/installer
laravel new belajar-app

# Atau langsung via composer
composer create-project laravel/laravel belajar-app

cd belajar-app
php artisan serve   # buka http://127.0.0.1:8000

Tujuan: paham bagaimana URL diproses jadi respon.

Sub-topik

• Route: GET, POST, parameter, named route
• Controller: memisahkan logika dari route
• Request & Response, redirect

use App\Http\Controllers\SiswaController;

Route::get('/', fn() => view('welcome'));

// Route dengan parameter
Route::get('/siswa/{id}', [SiswaController::class, 'show']);

// Named route — memudahkan bikin link
Route::get('/dashboard', [DashboardController::class, 'index'])
    ->name('dashboard');

php artisan make:controller SiswaController

class SiswaController extends Controller {
    public function show($id) {
        return view('siswa.show', ['id' => $id]);
    }
}

Tujuan: bikin tampilan yang bisa menampilkan data & dipakai ulang.

Sub-topik

• Sintaks Blade: {{ }}, @if, @foreach
• Layout & @extends, @section, @yield
• Components & @include

@extends('layouts.app')

@section('content')
  <h1>Daftar Siswa</h1>
  @if($siswa->isEmpty())
    <p>Belum ada data.</p>
  @else
    <ul>
      @foreach($siswa as $s)
        <li>{{ $s->nama }}</li>
      @endforeach
    </ul>
  @endif
@endsection

Tujuan: bikin & kelola struktur tabel lewat kode (bukan klik-klik di phpMyAdmin).

Sub-topik

• Konfigurasi .env untuk database
• Migration: bikin tabel via kode
• Seeder & Factory: mengisi data contoh

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=belajar_app
DB_USERNAME=root
DB_PASSWORD=

php artisan make:migration create_siswa_table
php artisan migrate

Schema::create('siswa', function (Blueprint $table) {
    $table->id();
    $table->string('nama');
    $table->string('nis')->unique();
    $table->string('kelas')->nullable();
    $table->timestamps();
});

Tujuan: CRUD (Create, Read, Update, Delete) data tanpa nulis SQL mentah.

Sub-topik

• Model & konsep ORM
• Query dasar: all(), find(), where(), create()
• Mass assignment & $fillable

php artisan make:model Siswa -m

class Siswa extends Model {
    protected $fillable = ['nama', 'nis', 'kelas'];
}

// Create
Siswa::create(['nama' => 'Budi', 'nis' => '2024001']);

// Read
$semua  = Siswa::all();
$satu   = Siswa::find(1);
$kelas7 = Siswa::where('kelas', '7')->get();

// Update
$satu->update(['kelas' => '8']);

// Delete
$satu->delete();

Tujuan: paham relasi antar tabel & menyimpan data dari form.

Sub-topik

• Relasi: hasMany, belongsTo, belongsToMany
• Form + CSRF protection
• Validasi request dasar

// app/Models/Kelas.php
public function siswa() {
    return $this->hasMany(Siswa::class);
}

// app/Models/Siswa.php
public function kelas() {
    return $this->belongsTo(Kelas::class);
}

// Pakai: ambil semua siswa dari kelas tertentu
$kelas->siswa;  // otomatis join

Tujuan: paham apa itu komponen Livewire & bikin yang pertama. Ini titik balik roadmap!

Sub-topik

• Install Livewire 3
• Anatomi komponen: class PHP + view Blade
• Property publik & auto-render

composer require livewire/livewire

# Bikin komponen pertama
php artisan make:livewire Counter

Perintah di atas membuat 2 file: app/Livewire/Counter.php (otak) dan resources/views/livewire/counter.blade.php (wajah).

use Livewire\Component;

class Counter extends Component {
    public $count = 0;

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

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

<div style="text-align:center">
    <button wire:click="decrement">-</button>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">+</button>
</div>

Tujuan: menghubungkan input form ke property secara otomatis.

Sub-topik

• wire:model — two-way binding
• wire:model.live vs .blur vs default (defer)
• Actions dengan parameter

// Component
public $search = '';

public function render() {
    return view('livewire.cari-siswa', [
        'hasil' => Siswa::where('nama', 'like', "%{$this->search}%")->get(),
    ]);
}

<input type="text" wire:model.live="search" placeholder="Cari nama...">
<ul>
  @foreach($hasil as $s)
    <li>{{ $s->nama }}</li>
  @endforeach
</ul>

Modifier binding

Tujuan: memvalidasi input & paham kapan kode dijalankan.

Sub-topik

• Validasi dengan atribut #[Validate]
• Menampilkan pesan error
• Lifecycle hooks: mount(), updated(), hydrate()

use Livewire\Attributes\Validate;

class TambahSiswa extends Component {
    #[Validate('required|min:3')]
    public $nama = '';

    #[Validate('required|unique:siswa,nis')]
    public $nis = '';

    public function simpan() {
        $this->validate();
        Siswa::create(['nama' => $this->nama, 'nis' => $this->nis]);
        session()->flash('sukses', 'Siswa tersimpan!');
        $this->reset();
    }
}

<form wire:submit="simpan">
    <input wire:model="nama">
    @error('nama') <span class="err">{{ $message }}</span> @enderror
    <button type="submit">Simpan</button>
</form>

Tujuan: pagination, loading state, event antar komponen.

Sub-topik

• Pagination bawaan Livewire (WithPagination)
• Loading state: wire:loading
• Events: dispatch() & listeners antar komponen
• Flash message & konfirmasi hapus

use Livewire\WithPagination;

class DaftarSiswa extends Component {
    use WithPagination;

    public function render() {
        return view('livewire.daftar', [
            'siswa' => Siswa::paginate(10),
        ]);
    }
}

<!-- Muncul otomatis saat request berjalan -->
<div wire:loading>Memuat...</div>

{{ $siswa->links() }}  <!-- tombol pagination -->

Tujuan: merapikan form kompleks & menangani upload foto.

Sub-topik

• Form Objects — memisahkan logika form (fitur Livewire 3)
• File upload dengan WithFileUploads
• Preview & validasi file

use Livewire\WithFileUploads;

class UploadFoto extends Component {
    use WithFileUploads;

    #[Validate('image|max:1024')] // max 1MB
    public $foto;

    public function simpan() {
        $path = $this->foto->store('foto-siswa', 'public');
        // simpan $path ke database
    }
}

Tujuan: menambahkan sistem login siap-pakai.

Sub-topik

• Laravel Starter Kit (berbasis Livewire + Volt)
• Middleware auth untuk proteksi route
• Cek user login: auth()->user()

# Saat bikin project baru, pilih starter kit Livewire
laravel new app-sekolah

# Pilih: Livewire starter kit → sudah termasuk
# login, register, profile, dashboard
npm install && npm run build
php artisan migrate

Route::get('/dashboard', Dashboard::class)
    ->middleware('auth');

Tujuan: memakai komponen UI siap-pakai (tombol, modal, dropdown) supaya tampilan profesional cepat. Detail lengkap ada di section FLUX vs TallStackUI di bawah.

composer require livewire/flux

<flux:button variant="primary" wire:click="simpan">Simpan</flux:button>
<flux:input wire:model="nama" label="Nama Siswa" />
<flux:badge color="green">Aktif</flux:badge>

Tujuan: app Anda bisa diakses siapa saja lewat domain. Detail langkah & GitHub ada di section GitHub & Deployment.

Ringkasan alur deployment

1. Push kode ke GitHub (jangan sertakan .env!)
2. Siapkan server (VPS: DigitalOcean, Contabo, atau layanan seperti Laravel Forge / Ploi)
3. Clone repo di server
4. Set environment production (.env, APP_ENV=production)
5. Optimasi: cache config, route, view, build aset
6. Set web server (Nginx) mengarah ke folder public/

composer install --optimize-autoloader --no-dev
php artisan migrate --force
php artisan config:cache
php artisan route:cache
php artisan view:cache
npm ci && npm run build