Tag: tutorial

  • Apa Itu Context di Laravel 12? Propagasi Data ke Log dan Queued Jobs

    Pernah debugging log produksi dan bingung karena entri log tidak punya info konteks — tidak tahu request mana, user mana, atau proses apa yang menghasilkannya? Laravel 12 punya solusi bawaan untuk ini: fitur Context.

    Context di Laravel 12 bukan sekadar contextual binding di service container. Ini adalah fitur tersendiri yang memungkinkan Anda menyimpan data kontekstual yang otomatis disertakan di semua log dan dipropagasi ke queued jobs.

    Apa Itu Context di Laravel 12?

    Fitur Context (diperkenalkan di Laravel 11, tersedia di Laravel 12) adalah mekanisme penyimpanan data per-request yang:

    • Otomatis disertakan di setiap entri log selama request berlangsung
    • Dipropagasi ke queued jobs yang di-dispatch dalam request yang sama
    • Bersifat isolasi per-request — tidak bocor ke request lain

    Bayangkan Anda mau melacak semua aktivitas dari satu user dalam satu request. Dengan Context, cukup simpan sekali di awal, dan semua log selanjutnya otomatis menyertakan data itu.

    Cara Menggunakan Context

    Import facade-nya:

    use Illuminate\Support\Facades\Context;
    

    Simpan data ke context:

    // Di middleware atau awal request
    Context::add('user_id', auth()->id());
    Context::add('request_id', (string) Str::uuid());
    Context::add('ip', request()->ip());
    

    Setelah ini, semua log yang dibuat selama request akan otomatis menyertakan data tersebut:

    Log::info('Pengguna membuka halaman checkout');
    // Output log:
    // [2025-04-18 10:00:00] local.INFO: Pengguna membuka halaman checkout
    // {"user_id":42,"request_id":"abc-123","ip":"192.168.1.1"}
    

    Tidak perlu manual menambahkan data ke setiap pemanggilan Log::info().

    Propagasi ke Queued Jobs

    Ini bagian yang paling berguna. Saat Anda men-dispatch job dalam sebuah request, data context ikut terbawa:

    // Di controller
    Context::add('order_id', $order->id);
    ProcessPayment::dispatch($order); // context ikut ke job ini
    
    // Di dalam ProcessPayment job
    public function handle()
    {
        // Context::get('order_id') tersedia di sini
        Log::info('Memproses pembayaran');
        // log otomatis menyertakan order_id dari context
    }
    

    Tanpa fitur ini, Anda harus manually passing data context ke setiap job sebagai parameter.

    Hidden Context: Data yang Tidak Masuk ke Log

    Context punya dua lapisan: context biasa (masuk ke log) dan “hidden context” (tidak masuk ke log, tapi tetap dipropagasi ke jobs). Berguna untuk data sensitif seperti token:

    Context::addHidden('auth_token', $token); // tidak muncul di log
    Context::getHidden('auth_token');          // tapi bisa diambil di job
    

    Membaca dan Memanipulasi Context

    // Ambil satu nilai
    $userId = Context::get('user_id');
    
    // Ambil semua context
    $all = Context::all();
    
    // Cek keberadaan key
    if (Context::has('order_id')) { ... }
    
    // Hapus key tertentu
    Context::forget('request_id');
    
    // Hapus semua
    Context::flush();
    

    Praktis: Middleware untuk Context Otomatis

    Buat middleware yang mengisi context di setiap request:

    namespace App\Http\Middleware;
    
    use Closure;
    use Illuminate\Support\Facades\Context;
    use Illuminate\Support\Str;
    
    class AddRequestContext
    {
        public function handle($request, Closure $next)
        {
            Context::add('request_id', (string) Str::uuid());
            Context::add('user_id', auth()->id() ?? 'guest');
            Context::add('url', $request->url());
    
            return $next($request);
        }
    }
    

    Daftarkan di bootstrap/app.php dan semua log di aplikasi Anda otomatis punya konteks yang kaya tanpa perubahan di kode lain.

    Kalau Anda sedang membangun aplikasi Laravel dan butuh tim pengembang yang familiar dengan fitur-fitur modern Laravel 12, kami di Arrazy Inovasi siap membantu dari konsultasi hingga pengembangan penuh.

    Lihat layanan pengembangan aplikasi kami →

  • Apa Itu Contract di Laravel 12? Penjelasan Simpel + Contoh Kode

    Bayangkan Anda membangun fitur notifikasi. Hari ini kirim via email, bulan depan ditambah WhatsApp, tahun depan mungkin push notification. Kalau kode Anda langsung bergantung ke implementasi email spesifik, setiap perubahan akan memaksa Anda menyentuh banyak file sekaligus.

    Di sinilah Contract di Laravel 12 berguna.

    Apa Itu Contract di Laravel 12?

    Contract di Laravel adalah sekumpulan interface yang mendefinisikan “kontrak perilaku” sebuah layanan. Mereka berada di namespace Illuminate\Contracts dan tidak berisi implementasi — hanya daftar method yang harus dipenuhi oleh siapapun yang mengimplementasikannya.

    Singkatnya: Contract mendefinisikan apa yang bisa dilakukan, bukan bagaimana melakukannya.

    Perbedaan Contract dan Interface Biasa

    Secara teknis, Contract Laravel adalah interface PHP biasa. Yang membedakannya adalah tujuan dan skala: Contract Laravel menstandardisasi layanan inti framework (cache, queue, auth, storage, dll.) sehingga Anda bisa menukar implementasinya tanpa mengubah kode yang memakainya.

    Contoh: Illuminate\Contracts\Cache\Store mendefinisikan method get, put, forget, dll. Baik driver Redis maupun Memcached sama-sama mengimplementasikan contract ini — kode Anda tidak perlu tahu mana yang aktif.

    Membuat Contract Sendiri

    Selain contract bawaan Laravel, Anda bisa membuat contract untuk layanan buatan sendiri. Contoh sederhana untuk layanan notifikasi:

    // app/Contracts/NotificationServiceContract.php
    namespace App\Contracts;
    
    interface NotificationServiceContract
    {
        public function send(string $recipient, string $message): bool;
    }
    

    Lalu buat implementasinya:

    // app/Services/EmailNotificationService.php
    namespace App\Services;
    
    use App\Contracts\NotificationServiceContract;
    
    class EmailNotificationService implements NotificationServiceContract
    {
        public function send(string $recipient, string $message): bool
        {
            // logika kirim email
            return true;
        }
    }
    

    Binding Contract ke Service Container

    Daftarkan binding di AppServiceProvider atau service provider khusus:

    use App\Contracts\NotificationServiceContract;
    use App\Services\EmailNotificationService;
    
    public function register(): void
    {
        $this->app->bind(
            NotificationServiceContract::class,
            EmailNotificationService::class
        );
    }
    

    Setelah itu, gunakan contract via dependency injection di controller atau class lain:

    use App\Contracts\NotificationServiceContract;
    
    class OrderController extends Controller
    {
        public function __construct(
            private NotificationServiceContract $notifier
        ) {}
    
        public function store(Request $request)
        {
            // ... proses order
            $this->notifier->send($request->email, 'Pesanan diterima!');
        }
    }
    

    Besok ketika Anda ingin ganti ke WhatsApp, cukup buat WhatsAppNotificationService, ubah satu baris binding di service provider — tidak ada yang berubah di controller.

    Kapan Sebaiknya Menggunakan Contract?

    Contract paling berguna ketika:

    • Implementasi layanan bisa berubah di masa depan (storage, payment gateway, notifikasi)
    • Anda ingin membuat unit test yang tidak bergantung ke implementasi nyata (mock mudah dibuat dari interface)
    • Tim besar — contract menjadi “dokumen hidup” yang mendefinisikan API internal antar modul

    Untuk fungsi sederhana yang tidak akan berubah, Contract justru menambah kompleksitas yang tidak perlu. Gunakan dengan pertimbangan, bukan sebagai aturan baku.

    Contract vs Facade di Laravel

    Laravel punya Facade yang memberikan akses statis ke layanan container. Contract dan Facade sering digunakan untuk tujuan serupa, tapi berbeda pendekatan. Facade lebih ringkas untuk kode cepat; Contract lebih eksplisit dan mudah di-mock saat testing. Untuk aplikasi skala besar dengan banyak unit test, Contract umumnya lebih direkomendasikan.

    Kalau Anda sedang membangun aplikasi Laravel dan butuh konsultasi arsitektur atau tim pengembang, kami di Arrazy Inovasi siap membantu.

    Lihat layanan pengembangan aplikasi kami →

  • Tutorial Laravel 12 Job Batching: Implementasi, Progress, dan Error Handling

    Bayangkan Anda perlu kirim email ke 5.000 pengguna sekaligus, atau proses 1.000 gambar setelah upload. Kalau dijalankan satu per satu lewat queue biasa, Anda tidak tahu kapan semuanya selesai, dan tidak bisa jalankan aksi “setelah semua beres”.

    Job Batching di Laravel menyelesaikan masalah ini. Artikel ini membahas cara kerjanya, implementasi lengkap dengan contoh kode, dan cara handle error dalam batch.

    Apa Itu Job Batching?

    Job Batching memungkinkan Anda mengelompokkan beberapa job ke dalam satu batch, lalu mendefinisikan callback yang dijalankan:

    • Saat semua job berhasil (then)
    • Saat ada job yang gagal (catch)
    • Saat semua job selesai (berhasil atau gagal) (finally)

    Setup: Membuat Tabel Batch

    php artisan make:batches-table
    php artisan migrate

    Ini membuat tabel job_batches yang menyimpan status setiap batch.

    Membuat Job yang Batchable

    Job harus implement ShouldQueue dan gunakan trait Batchable:

    <?php
    
    namespace AppJobs;
    
    use AppModelsUser;
    use AppMailPromotionMail;
    use IlluminateBusBatchable;
    use IlluminateBusQueueable;
    use IlluminateContractsQueueShouldQueue;
    use IlluminateFoundationBusDispatchable;
    use IlluminateQueueInteractsWithQueue;
    use IlluminateSupportFacadesMail;
    
    class SendPromotionEmail implements ShouldQueue
    {
        use Batchable, Dispatchable, InteractsWithQueue, Queueable;
    
        public function __construct(
            private User $user
        ) {}
    
        public function handle(): void
        {
            // Cek apakah batch sudah di-cancel
            if ($this->batch()->cancelled()) {
                return;
            }
    
            Mail::to($this->user)->send(new PromotionMail());
        }
    }

    Mengirim Batch

    use AppJobsSendPromotionEmail;
    use IlluminateSupportFacadesBus;
    
    $users = User::where('subscribed', true)->get();
    
    $batch = Bus::batch(
        $users->map(fn ($user) => new SendPromotionEmail($user))->toArray()
    )->then(function (Batch $batch) {
        // Dijalankan saat semua job berhasil
        Log::info("Batch selesai: {$batch->totalJobs} email terkirim.");
    })->catch(function (Batch $batch, Throwable $e) {
        // Dijalankan saat ada job yang gagal
        Log::error("Batch error: {$e->getMessage()}");
    })->finally(function (Batch $batch) {
        // Selalu dijalankan saat batch selesai (berhasil atau tidak)
        Cache::forget('promotion-batch-running');
    })->name('Kirim Email Promosi')
      ->allowFailures()  // batch tetap lanjut meski ada job gagal
      ->dispatch();
    
    // Simpan ID batch untuk monitor progress
    return $batch->id;

    Monitor Progress Batch

    Ambil info batch berdasarkan ID:

    use IlluminateSupportFacadesBus;
    
    $batch = Bus::findBatch($batchId);
    
    // Info yang tersedia
    $batch->id;
    $batch->name;
    $batch->totalJobs;
    $batch->pendingJobs;
    $batch->failedJobs;
    $batch->processedJobs();  // totalJobs - pendingJobs
    $batch->progress();       // 0-100 persen
    $batch->finished();       // apakah sudah selesai
    $batch->cancelled();      // apakah di-cancel
    

    Contoh endpoint API untuk polling progress:

    Route::get('/batches/{batchId}/progress', function (string $batchId) {
        $batch = Bus::findBatch($batchId);
    
        if (!$batch) {
            return response()->json(['error' => 'Batch tidak ditemukan'], 404);
        }
    
        return response()->json([
            'progress'     => $batch->progress(),
            'total'        => $batch->totalJobs,
            'processed'    => $batch->processedJobs(),
            'failed'       => $batch->failedJobs,
            'finished'     => $batch->finished(),
        ]);
    })->middleware('auth');

    Cancel Batch

    $batch = Bus::findBatch($batchId);
    $batch->cancel();

    Job yang belum diproses akan skip sendiri karena pengecekan $this->batch()->cancelled() di awal method handle().

    Batch dengan Job Berantai

    Anda bisa chain batch: jalankan batch kedua setelah batch pertama selesai:

    Bus::batch([
        new ProcessImages($product),
        new GenerateThumbnails($product),
    ])->then(function (Batch $batch) use ($product) {
        // Setelah gambar dan thumbnail selesai, generate sitemap
        GenerateSitemap::dispatch();
    })->dispatch();

    Praktis: Batch untuk Impor CSV

    Skenario umum: impor data dari file CSV besar.

    <?php
    
    namespace AppJobs;
    
    use IlluminateBusBatchable;
    use IlluminateBusQueueable;
    use IlluminateContractsQueueShouldQueue;
    
    class ImportCsvRow implements ShouldQueue
    {
        use Batchable, Queueable;
    
        public function __construct(private array $row) {}
    
        public function handle(): void
        {
            if ($this->batch()->cancelled()) return;
    
            Product::updateOrCreate(
                ['sku'  => $this->row['sku']],
                ['name' => $this->row['name'], 'price' => $this->row['price']]
            );
        }
    }
    
    // Di controller
    $rows  = CsvParser::parse($file);
    $jobs  = collect($rows)->map(fn ($row) => new ImportCsvRow($row));
    
    $batch = Bus::batch($jobs->toArray())
                ->name('Import Produk')
                ->allowFailures()
                ->dispatch();
    
    return redirect()->route('imports.progress', $batch->id);

    Baca Juga

    Butuh tim untuk implementasi background processing di aplikasi Laravel Anda? Lihat layanan pengembangan aplikasi kami.

  • Notification di Laravel 12: Email, Database, dan Channel Kustom

    Hampir semua aplikasi web butuh notifikasi: konfirmasi order, reset password, atau pemberitahuan saat ada komentar baru. Laravel punya sistem notifikasi yang cukup fleksibel: satu kelas bisa kirim ke email, database, Slack, dan channel lain sekaligus.

    Artikel ini membahas cara kerja notification di Laravel 12, mulai dari membuat kelas notifikasi, kirim via email dan database, sampai membuat channel kustom.

    Membuat Kelas Notifikasi

    php artisan make:notification OrderConfirmed

    File dibuat di app/Notifications/OrderConfirmed.php:

    <?php
    
    namespace AppNotifications;
    
    use AppModelsOrder;
    use IlluminateBusQueueable;
    use IlluminateNotificationsNotification;
    use IlluminateNotificationsMessagesMailMessage;
    use IlluminateContractsQueueShouldQueue;
    
    class OrderConfirmed extends Notification implements ShouldQueue
    {
        use Queueable;
    
        public function __construct(
            private Order $order
        ) {}
    
        public function via(object $notifiable): array
        {
            return ['mail', 'database'];
        }
    
        public function toMail(object $notifiable): MailMessage
        {
            return (new MailMessage)
                ->subject("Order #{$this->order->id} Dikonfirmasi")
                ->greeting("Halo, {$notifiable->name}!")
                ->line("Order Anda telah kami terima dan sedang diproses.")
                ->action('Lihat Detail Order', route('orders.show', $this->order))
                ->line("Terima kasih sudah berbelanja.");
        }
    
        public function toDatabase(object $notifiable): array
        {
            return [
                'order_id' => $this->order->id,
                'message'  => "Order #{$this->order->id} dikonfirmasi",
                'url'      => route('orders.show', $this->order),
            ];
        }
    }

    Notifiable Trait

    Model yang ingin menerima notifikasi harus menggunakan trait Notifiable. Model User bawaan Laravel sudah menyertakan ini:

    use IlluminateNotificationsNotifiable;
    
    class User extends Authenticatable
    {
        use Notifiable;
    }

    Untuk model lain — misalnya Admin atau Customer — tambahkan trait yang sama.

    Mengirim Notifikasi

    // Lewat instance model
    $user->notify(new OrderConfirmed($order));
    
    // Lewat Notification facade (tanpa model spesifik)
    Notification::send($users, new OrderConfirmed($order));
    
    // On-demand — kirim ke email tanpa model User
    Notification::route('mail', 'admin@example.com')
                ->notify(new OrderConfirmed($order));

    Karena kelas ini implement ShouldQueue, notifikasi akan diproses di background queue, tidak memperlambat response HTTP.

    Notifikasi Email: Kustomisasi Template

    Untuk kontrol penuh atas tampilan email, publish template bawaan Laravel:

    php artisan vendor:publish --tag=laravel-mail

    Template disimpan di resources/views/vendor/mail/. Edit sesuai kebutuhan brand Anda.

    Kalau mau pakai Markdown template yang lebih kaya:

    php artisan make:notification OrderShipped --markdown=mail.order.shipped

    Template dibuat di resources/views/mail/order/shipped.blade.php:

    @component('mail::message')
    # Order Anda Dalam Perjalanan
    
    Pesanan **#{{ $order->id }}** sedang dikirim ke alamat Anda.
    
    @component('mail::button', ['url' => $trackingUrl])
    Lacak Pengiriman
    @endcomponent
    
    Estimasi tiba: **{{ $order->estimated_arrival }}**
    
    Salam,
    {{ config('app.name') }}
    @endcomponent

    Notifikasi Database

    Untuk simpan notifikasi di database (biasanya untuk fitur notifikasi in-app), buat tabel dulu:

    php artisan make:notifications-table
    php artisan migrate

    Ambil notifikasi yang belum dibaca:

    // Semua notifikasi
    $notifications = auth()->user()->notifications;
    
    // Hanya yang belum dibaca
    $unread = auth()->user()->unreadNotifications;
    
    // Tandai sudah dibaca
    auth()->user()->unreadNotifications->markAsRead();
    
    // Tandai satu notifikasi sudah dibaca
    $notification->markAsRead();

    Channel Kustom

    Kalau perlu kirim via WhatsApp, Telegram, atau sistem internal, buat channel kustom:

    <?php
    
    namespace AppNotificationsChannels;
    
    use IlluminateNotificationsNotification;
    
    class WhatsAppChannel
    {
        public function send(object $notifiable, Notification $notification): void
        {
            $message = $notification->toWhatsApp($notifiable);
    
            // Kirim via WhatsApp API
            app(WhatsAppService::class)->send(
                $notifiable->phone,
                $message
            );
        }
    }

    Daftarkan di method via():

    public function via(object $notifiable): array
    {
        return [WhatsAppChannel::class, 'database'];
    }
    
    public function toWhatsApp(object $notifiable): string
    {
        return "Order #{$this->order->id} Anda sudah dikonfirmasi.";
    }

    Baca Juga

    Butuh tim yang bantu implementasi sistem notifikasi di aplikasi Laravel Anda? Lihat layanan pengembangan aplikasi kami.

  • Keunggulan Laravel Volt: Mengapa Single-File Component Lebih Efisien

    Setelah cukup banyak pakai Livewire biasa, saya coba beralih ke Volt di salah satu proyek internal. Hasilnya memang ada perbedaan yang terasa, terutama saat nambah fitur baru atau onboarding developer junior ke proyek.

    Artikel ini membahas keunggulan nyata Laravel Volt dibanding cara penulisan Livewire sebelumnya, lengkap dengan contoh kode perbandingan.

    1. Single-File Component: Logika dan Template Dalam Satu Tempat

    Livewire biasa butuh dua file per komponen. Volt hanya butuh satu.

    Livewire biasa:

    // app/Livewire/SearchBox.php
    class SearchBox extends Component
    {
        public string $query = '';
    
        public function updatedQuery(): void
        {
            // filter results
        }
    
        public function render()
        {
            return view('livewire.search-box');
        }
    }
    
    {{-- resources/views/livewire/search-box.blade.php --}}
    <div>
        <input wire:model.live="query" />
    </div>

    Volt (satu file):

    <?php
    
    use function LivewireVolt{state};
    
    state(['query' => '']);
    
    $updatedQuery = fn() => /* filter results */;
    
    ?>
    
    <div>
        <input wire:model.live="query" />
    </div>

    Lebih sedikit file = lebih mudah navigasi, lebih mudah review PR.

    2. Computed Properties yang Lebih Eksplisit

    Livewire v2 punya computed properties tapi agak tersembunyi. Volt mengekspos ini dengan cara yang lebih jelas:

    <?php
    
    use AppModelsProduct;
    use function LivewireVolt{state, computed};
    
    state(['category' => 'all']);
    
    $products = computed(function () {
        return $this->category === 'all'
            ? Product::paginate(12)
            : Product::where('category', $this->category)->paginate(12);
    });
    
    ?>
    
    <div>
        <select wire:model.live="category">
            <option value="all">Semua</option>
            <option value="elektronik">Elektronik</option>
        </select>
    
        @foreach ($this->products as $product)
            <p>{{ $product->name }}</p>
        @endforeach
    
        {{ $this->products->links() }}
    </div>

    Computed property otomatis di-cache selama satu request, tidak dihitung ulang setiap setiap kali template render.

    3. Lifecycle Hooks yang Lebih Bersih

    Volt mendukung lifecycle hooks Livewire dengan cara yang lebih ringkas:

    <?php
    
    use AppModelsCart;
    use function LivewireVolt{state, mount, updated};
    
    state(['quantity' => 1, 'productId' => null]);
    
    mount(function (int $productId) {
        $this->productId = $productId;
    });
    
    updated('quantity', function () {
        if ($this->quantity < 1) $this->quantity = 1;
        if ($this->quantity > 99) $this->quantity = 99;
    });
    
    $addToCart = function () {
        Cart::addItem($this->productId, $this->quantity);
        $this->dispatch('cart-updated');
    };
    
    ?>
    
    <div>
        <input wire:model="quantity" type="number" />
        <button wire:click="addToCart">Tambah ke Keranjang</button>
    </div>

    4. Form Handling yang Lebih Bersih

    Volt mendukung Form Objects dari Livewire v3:

    <?php
    
    use AppLivewireFormsContactForm;
    use function LivewireVolt{form};
    
    form(ContactForm::class, 'contact');
    
    $submit = function () {
        $this->contact->submit();
        $this->reset('contact');
    };
    
    ?>
    
    <form wire:submit="submit">
        <input wire:model="contact.name" />
        <input wire:model="contact.email" />
        <textarea wire:model="contact.message"></textarea>
        <button type="submit">Kirim</button>
    </form>

    5. Lebih Mudah Dipahami oleh Developer Baru

    Ini mungkin yang paling terasa di tim. Dengan Volt, developer yang baru bergabung cukup buka satu file untuk memahami apa yang dilakukan sebuah komponen. Tidak perlu loncat antara dua file untuk trace logika.

    Baca Juga

    Tertarik membangun aplikasi dengan Laravel + Livewire + Volt? Lihat layanan pengembangan aplikasi kami.

  • Cara Instalasi Laravel Volt di Laravel 12: Via Breeze dan Livewire Langsung

    Laravel Volt sudah termasuk dalam Livewire v3, jadi cara installnya lebih mudah dari yang Anda bayangkan. Artikel ini membahas dua jalur instalasi: lewat Laravel Breeze, dan langsung lewat Livewire.

    Prasyarat

    • PHP 8.1 atau lebih baru
    • Laravel 10 ke atas (disarankan Laravel 12)
    • Composer

    Jalur 1: Install via Laravel Breeze

    Ini jalur paling umum. Breeze menyediakan scaffolding autentikasi lengkap sekaligus menginstall Volt.

    # Buat project Laravel baru
    composer create-project laravel/laravel nama-project
    cd nama-project
    
    # Install Breeze
    composer require laravel/breeze --dev
    
    # Install dengan opsi Livewire (Volt sudah termasuk)
    php artisan breeze:install livewire
    
    # Install dependencies Node.js dan build assets
    npm install && npm run dev
    
    # Jalankan migration
    php artisan migrate

    Setelah ini, Anda langsung punya halaman login, register, dan dashboard yang sudah jalan dengan Livewire + Volt.

    Jalur 2: Install Livewire + Volt Langsung

    Kalau tidak butuh scaffolding autentikasi dari Breeze:

    # Di project Laravel yang sudah ada
    composer require livewire/livewire
    
    # Volt sudah termasuk di dalam package livewire/livewire v3
    # Aktifkan Volt dengan publish config
    php artisan livewire:publish --config

    Tambahkan direktif Livewire di layout utama Anda (resources/views/layouts/app.blade.php):

    <html>
    <head>
        ...
        @livewireStyles
    </head>
    <body>
        {{ $slot }}
        @livewireScripts
    </body>
    </html>

    Konfigurasi Path Komponen Volt

    Secara default, komponen Volt disimpan di resources/views/livewire/. Anda bisa konfigurasi lewat app/Providers/AppServiceProvider.php:

    <?php
    
    namespace App\Providers;
    
    use Illuminate\Support\ServiceProvider;
    use Livewire\Volt\Volt;
    
    class AppServiceProvider extends ServiceProvider
    {
        public function boot(): void
        {
            // Tambah folder komponen Volt
            Volt::mount([
                resource_path('views/livewire'),
                resource_path('views/pages'),  // tambahan
            ]);
        }
    }

    Membuat Komponen Volt Pertama

    php artisan make:volt search-box

    File dibuat di resources/views/livewire/search-box.blade.php:

    <?php
    
    use function Livewire\Volt\{state};
    
    state(['query' => '']);
    
    ?>
    
    <div>
        <input
            wire:model.live.debounce.300ms="query"
            placeholder="Cari..."
            class="border rounded px-3 py-2"
        />
    
        @if($query)
            <p>Mencari: {{ $query }}</p>
        @endif
    </div>

    Gunakan di halaman Blade mana saja:

    <livewire:search-box />

    Verifikasi Instalasi

    # Pastikan Livewire terinstall
    composer show livewire/livewire
    
    # Jalankan server dan cek halaman yang ada komponen Volt
    php artisan serve

    Kalau komponen muncul dan reaktif (bisa klik/input tanpa reload halaman), instalasi berhasil.

    Baca Juga

    Mau membangun aplikasi web interaktif dengan Laravel + Livewire? Lihat layanan pengembangan aplikasi kami.

  • Perbedaan Laravel Volt dan Laravel Breeze: Kapan Pakai Yang Mana?

    Saat mulai proyek Laravel baru, salah satu pertanyaan yang sering muncul adalah: pakai Breeze atau Volt? Keduanya dari ekosistem Laravel, tapi perannya sangat berbeda.

    Artikel ini menjelaskan perbedaan Laravel Volt dan Laravel Breeze, bukan untuk memilih yang “lebih baik”, tapi untuk memahami kapan masing-masing dipakai.

    Laravel Breeze: Starter Kit Autentikasi

    Laravel Breeze adalah starter kit yang menyediakan scaffolding autentikasi: login, register, reset password, verifikasi email, dan konfirmasi password.

    Breeze bisa diinstall dengan beberapa pilihan frontend:

    • Blade (default) — tanpa JavaScript framework
    • Livewire — menggunakan Livewire untuk interaktivitas
    • Inertia + Vue
    • Inertia + React
    • API (untuk SPA atau mobile)

    Ketika Anda pilih opsi Livewire saat install Breeze, Volt sudah termasuk di dalamnya.

    composer require laravel/breeze --dev
    php artisan breeze:install livewire

    Laravel Volt: Cara Tulis Komponen Livewire

    Volt bukan starter kit. Volt adalah API untuk menulis komponen Livewire dalam format single-file.

    Perbedaannya dengan Livewire biasa: tidak perlu file class PHP terpisah. Logika dan template ada dalam satu file Blade:

    <?php
    use function LivewireVolt{state};
    
    state(['search' => '']);
    
    $results = computed(function () {
        return Article::where('title', 'like', "%{$this->search}%")->get();
    });
    ?>
    
    <div>
        <input wire:model.live="search" placeholder="Cari artikel..." />
        @foreach ($this->results as $article)
            <p>{{ $article->title }}</p>
        @endforeach
    </div>

    Perbandingan Langsung

    Aspek Breeze Volt
    Fungsi utama Scaffolding autentikasi API tulis komponen Livewire
    Diinstall terpisah? Ya, via Composer Sudah termasuk di Livewire v3
    Menghasilkan file? Ya (routes, views, controllers) Tidak — hanya mengubah cara penulisan
    Bisa dipakai tanpa yang lain? Ya Ya (tapi butuh Livewire v3)
    Wajib? Tidak Tidak

    Hubungan Keduanya

    Breeze dan Volt bukan saingan. Keduanya bisa dipakai bersamaan. Skenario yang paling umum:

    1. Install Breeze dengan opsi Livewire → Volt otomatis terinstall
    2. Gunakan Volt untuk menulis komponen-komponen interaktif di aplikasi Anda
    3. Halaman autentikasi (login, register) sudah di-generate Breeze

    Kalau Anda tidak butuh autentikasi siap pakai, bisa install Livewire dan Volt langsung tanpa Breeze.

    Kapan Tidak Perlu Breeze?

    • Proyek API-only (tidak ada view)
    • Autentikasi sudah diimplementasi custom
    • Menggunakan Jetstream (alternatif Breeze yang lebih lengkap)

    Baca Juga

    Butuh tim yang bantu setup Laravel + Livewire untuk proyek Anda? Lihat layanan pengembangan aplikasi kami.

  • Apa Itu Laravel Volt dan Bagaimana Cara Kerjanya

    Kalau Anda pernah pakai Livewire di Laravel, mungkin sudah tahu betapa nyamannya bikin komponen reaktif tanpa harus tulis JavaScript. Laravel Volt membawa pengalaman itu selangkah lebih jauh dengan sintaks single-file component yang lebih bersih.

    Artikel ini menjelaskan apa itu Laravel Volt, bagaimana cara kerjanya, dan di mana Volt cocok dipakai.

    Apa Itu Laravel Volt?

    Laravel Volt adalah API baru untuk Livewire v3 yang memungkinkan Anda menulis komponen Livewire dalam satu file Blade, tanpa class PHP terpisah.

    Sebelum Volt, sebuah komponen Livewire butuh dua file:

    1. app/Livewire/Counter.php — class dengan logika
    2. resources/views/livewire/counter.blade.php — template

    Dengan Volt, keduanya bisa dalam satu file counter.blade.php:

    <?php
    
    use function LivewireVolt{state, computed};
    
    state(['count' => 0]);
    
    $increment = fn() => $this->count++;
    $decrement = fn() => $this->count--;
    
    ?>
    
    <div>
        <h1>{{ $count }}</h1>
        <button wire:click="increment">+</button>
        <button wire:click="decrement">-</button>
    </div>

    Lebih ringkas, dan semua yang perlu dibaca ada dalam satu file.

    Perbedaan Volt Class API vs Functional API

    Volt mendukung dua cara penulisan. Functional API (contoh di atas) lebih ringkas untuk komponen sederhana. Class API cocok untuk komponen yang lebih kompleks karena lebih terstruktur:

    <?php
    
    use LivewireVoltComponent;
    
    new class extends Component {
        public int $count = 0;
    
        public function increment(): void
        {
            $this->count++;
        }
    
        public function decrement(): void
        {
            $this->count--;
        }
    } ?>
    
    <div>
        <h1>{{ $count }}</h1>
        <button wire:click="increment">+</button>
        <button wire:click="decrement">-</button>
    </div>

    Apa Yang Volt Sederhanakan?

    Volt bukan framework baru, melainkan layer di atas Livewire v3. Yang berubah:

    • Satu file per komponen: tidak perlu buka dua file sekaligus saat edit
    • Co-location: logika dan template ada di satu tempat, lebih mudah dipahami konteksnya
    • Lebih sedikit boilerplate: tidak perlu bikin class, register namespace, dll.

    Yang tetap sama: cara Livewire bekerja (wire:click, wire:model, $refresh, dll.) tidak berubah sama sekali.

    Kapan Pakai Volt vs Livewire Biasa?

    Volt cocok untuk komponen yang:

    • Logikanya tidak terlalu besar (kurang dari ~100 baris)
    • Tidak perlu di-extend atau di-inherit komponen lain
    • Berdiri sendiri dan tidak terlalu banyak dependency

    Tetap pakai Livewire class biasa kalau:

    • Komponen butuh extend dari base class kustom
    • Logikanya sudah terlalu panjang dan butuh dipisah ke service
    • Tim lebih familiar dengan pola class-based

    Baca Juga

    Tertarik membangun aplikasi dengan stack Laravel + Livewire? Lihat layanan pengembangan aplikasi kami.

  • Migration di Laravel: Panduan Lengkap dengan Contoh Kode

    Setiap developer Laravel pasti sudah kenal migration. Tapi banyak yang belum tahu fitur-fitur migration yang lebih dalam: cara rollback aman, modifikasi kolom tanpa data hilang, atau cara buat index yang tepat.

    Artikel ini membahas migration di Laravel dari dasar sampai teknik yang dipakai di proyek production.

    Apa Itu Migration?

    Migration adalah cara Laravel mengelola struktur database lewat kode PHP, bukan lewat SQL manual. Setiap migration adalah “version control” untuk database Anda.

    Keuntungannya: semua developer di tim punya struktur database yang sama, dan perubahan terlacak di git.

    Membuat Migration

    # Buat tabel baru
    php artisan make:migration create_articles_table
    
    # Modifikasi tabel yang sudah ada
    php artisan make:migration add_published_at_to_articles_table
    
    # Migration sekalian dengan model dan factory
    php artisan make:model Article -m

    File migration dibuat di folder database/migrations/ dengan timestamp sebagai prefix.

    Struktur Migration

    Migration punya dua method: up() untuk apply, down() untuk rollback.

    <?php
    
    use IlluminateDatabaseMigrationsMigration;
    use IlluminateDatabaseSchemaBlueprint;
    use IlluminateSupportFacadesSchema;
    
    return new class extends Migration
    {
        public function up(): void
        {
            Schema::create('articles', function (Blueprint $table) {
                $table->id();
                $table->foreignId('user_id')->constrained()->cascadeOnDelete();
                $table->string('title');
                $table->string('slug')->unique();
                $table->text('content');
                $table->enum('status', ['draft', 'published'])->default('draft');
                $table->timestamp('published_at')->nullable();
                $table->timestamps();
                $table->softDeletes();
            });
        }
    
        public function down(): void
        {
            Schema::dropIfExists('articles');
        }
    };

    Tipe Kolom yang Paling Sering Dipakai

    $table->id();                    // bigint unsigned auto-increment primary key
    $table->string('name');          // VARCHAR(255)
    $table->string('code', 10);      // VARCHAR(10)
    $table->text('body');            // TEXT
    $table->longText('content');     // LONGTEXT
    $table->integer('qty');          // INT
    $table->bigInteger('views');     // BIGINT
    $table->decimal('price', 10, 2); // DECIMAL(10,2)
    $table->boolean('is_active');    // TINYINT(1)
    $table->date('birth_date');      // DATE
    $table->timestamp('sent_at');    // TIMESTAMP
    $table->timestamps();            // created_at + updated_at
    $table->softDeletes();           // deleted_at
    
    // Relasi
    $table->foreignId('user_id')->constrained(); // FK ke tabel users
    $table->foreignId('category_id')
          ->nullable()
          ->constrained()
          ->nullOnDelete();

    Modifikasi Kolom yang Sudah Ada

    Gunakan change() untuk modifikasi kolom tanpa hapus tabel:

    public function up(): void
    {
        Schema::table('articles', function (Blueprint $table) {
            // Perluas panjang kolom
            $table->string('title', 500)->change();
    
            // Jadikan nullable
            $table->text('summary')->nullable()->change();
    
            // Tambah kolom baru
            $table->string('meta_title')->nullable()->after('title');
    
            // Hapus kolom
            $table->dropColumn('old_field');
    
            // Rename kolom
            $table->renameColumn('body', 'content');
        });
    }
    
    public function down(): void
    {
        Schema::table('articles', function (Blueprint $table) {
            $table->string('title', 255)->change();
            $table->dropColumn('meta_title');
            $table->renameColumn('content', 'body');
        });
    }

    Index untuk Performa Query

    Index yang tepat bisa membuat query jauh lebih cepat:

    Schema::create('orders', function (Blueprint $table) {
        $table->id();
        $table->foreignId('user_id')->constrained();
        $table->string('status');
        $table->timestamp('ordered_at');
        $table->timestamps();
    
        // Index tunggal
        $table->index('status');
    
        // Composite index — sangat berguna untuk filter gabungan
        $table->index(['user_id', 'status']);
        $table->index(['status', 'ordered_at']);
    
        // Unique constraint
        $table->unique(['user_id', 'order_number']);
    });

    Kapan tambah index: Kolom yang sering dipakai di WHERE, ORDER BY, atau JOIN. Jangan tambah index di semua kolom. Terlalu banyak index justru memperlambat operasi insert/update.

    Menjalankan Migration

    # Jalankan migration yang belum dijalankan
    php artisan migrate
    
    # Lihat status migration
    php artisan migrate:status
    
    # Rollback migration terakhir
    php artisan migrate:rollback
    
    # Rollback beberapa batch
    php artisan migrate:rollback --step=3
    
    # Reset semua migration
    php artisan migrate:reset
    
    # Drop semua tabel lalu migrate ulang (pakai di development)
    php artisan migrate:fresh --seed

    Migration di Production: Aturan Aman

    Beberapa hal yang penting saat deploy migration ke production:

    1. Jangan hapus kolom langsung: kalau kode masih pakai kolom tersebut, bisa error. Deprecate dulu, hapus di deploy berikutnya.
    2. Tambah kolom nullable atau dengan default: kolom NOT NULL tanpa default di tabel besar bisa lock tabel saat migration berjalan.
    3. Test rollback sebelum deploy — pastikan method down() bisa dijalankan tanpa error.
    4. Backup dulu — sebelum migration yang modifikasi struktur tabel penting.

    Baca Juga

    Kalau Anda butuh tim untuk bangun aplikasi Laravel dari awal sampai production, lihat layanan pengembangan aplikasi kami.

  • Tutorial PostgreSQL di Laravel: Setup, JSONB, dan Full-Text Search

    Laravel secara default menggunakan MySQL. Tapi kalau proyek Anda butuh fitur seperti JSON columns yang lebih canggih, full-text search bawaan, atau JSONB, PostgreSQL adalah pilihan yang solid.

    Artikel ini membahas cara setup PostgreSQL di Laravel, termasuk konfigurasi, perbedaan dengan MySQL, dan fitur-fitur PostgreSQL yang bisa dimanfaatkan langsung dari Eloquent.

    Instalasi dan Konfigurasi

    Pastikan extension PHP untuk PostgreSQL sudah aktif:

    # Ubuntu/Debian
    sudo apt install php-pgsql
    
    # Cek apakah sudah aktif
    php -m | grep pdo_pgsql

    Edit file .env:

    DB_CONNECTION=pgsql
    DB_HOST=127.0.0.1
    DB_PORT=5432
    DB_DATABASE=nama_database
    DB_USERNAME=postgres
    DB_PASSWORD=password_anda

    Tidak perlu ubah konfigurasi lain. Laravel sudah punya driver PostgreSQL bawaan.

    Perbedaan Sintaks Migration

    Sebagian besar sintaks migration sama antara MySQL dan PostgreSQL. Perbedaan utama ada di beberapa tipe data:

    Schema::create('products', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->decimal('price', 10, 2);
    
        // PostgreSQL: pakai jsonb, bukan json biasa
        $table->jsonb('metadata')->nullable();
    
        // PostgreSQL: UUID native
        $table->uuid('external_id')->unique();
    
        // Enum di PostgreSQL butuh cast berbeda
        $table->string('status')->default('active');
    
        $table->timestamps();
    });

    Tips: Di PostgreSQL, pakai jsonb daripada json. JSONB disimpan dalam format binary yang lebih efisien untuk query dan indexing.

    Query JSON dengan PostgreSQL

    PostgreSQL punya operator JSON yang sangat powerful. Di Laravel, Anda bisa pakai operator -> dan ->> langsung di Eloquent:

    // Cari produk berdasarkan field di dalam JSON
    $products = Product::where('metadata->category', 'elektronik')->get();
    
    // Atau dengan whereJsonContains
    $products = Product::whereJsonContains('metadata->tags', 'promo')->get();
    
    // Query nested JSON
    $products = Product::where('metadata->specs->weight', '>', 500)->get();
    

    Contoh migration dengan index JSONB:

    Schema::create('products', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->jsonb('metadata')->nullable();
        $table->timestamps();
    });
    
    // Tambah index GIN untuk performa query JSONB
    DB::statement('CREATE INDEX products_metadata_gin ON products USING GIN (metadata jsonb_path_ops)');
    

    Full-Text Search

    PostgreSQL punya full-text search bawaan yang bisa langsung dipakai tanpa plugin tambahan:

    // Migration: tambah kolom tsvector
    $table->tsvector('search_vector')->nullable();
    
    // Isi kolom tsvector saat insert/update
    DB::statement("
        UPDATE articles
        SET search_vector = to_tsvector('indonesian', coalesce(title, '') || ' ' || coalesce(content, ''))
    ");
    
    // Query full-text search
    $results = Article::whereRaw(
        "search_vector @@ plainto_tsquery('indonesian', ?)",
        [$keyword]
    )->get();

    Untuk proyek besar, buat trigger PostgreSQL agar search_vector otomatis diperbarui saat data berubah.

    UUID sebagai Primary Key

    PostgreSQL mendukung UUID natively. Cara pakai di Laravel 12:

    Schema::create('orders', function (Blueprint $table) {
        $table->uuid('id')->primary()->default(DB::raw('gen_random_uuid()'));
        $table->string('status');
        $table->timestamps();
    });

    Di model:

    <?php
    
    namespace AppModels;
    
    use IlluminateDatabaseEloquentModel;
    use IlluminateDatabaseEloquentConcernsHasUuids;
    
    class Order extends Model
    {
        use HasUuids;
    }

    Transaksi dan Savepoint

    PostgreSQL mendukung nested transaction lewat savepoint. Di Laravel ini otomatis dipakai saat Anda nested DB::transaction():

    DB::transaction(function () {
        $order = Order::create([...]);
    
        DB::transaction(function () use ($order) {
            // Ini pakai savepoint di PostgreSQL
            // Kalau gagal, hanya bagian ini yang di-rollback
            foreach ($order->items as $item) {
                Inventory::decrement($item->product_id, $item->qty);
            }
        });
    
        $order->update(['status' => 'confirmed']);
    });

    Koneksi Multiple Database

    Kalau Anda pakai MySQL dan PostgreSQL bersamaan, tambahkan konfigurasi di config/database.php:

    'connections' => [
        'mysql' => [
            'driver' => 'mysql',
            // ...
        ],
        'pgsql' => [
            'driver'   => 'pgsql',
            'host'     => env('PGSQL_HOST', '127.0.0.1'),
            'port'     => env('PGSQL_PORT', '5432'),
            'database' => env('PGSQL_DATABASE'),
            'username' => env('PGSQL_USERNAME'),
            'password' => env('PGSQL_PASSWORD'),
        ],
    ],

    Di model, tentukan koneksi yang dipakai:

    class AnalyticsEvent extends Model
    {
        protected $connection = 'pgsql';
    }

    Baca Juga

    Butuh tim yang berpengalaman setup aplikasi Laravel dengan PostgreSQL di production? Lihat layanan pengembangan aplikasi kami.