Laravel Livewire Eğitimi

Eğitim Hakkında

Laravel Livewire ile reaktif arayüz geliştirme

Eğitim, Laravel Livewire 3 ile sunucu tabanlı reaktif arayüzleri işler. Bileşen yaşam döngüsü, wire:model ve wire:click, #[Computed] özellikleri, Form nesneleri ve doğrulama, olay yayma ve dinleme, canlı arama ve debounce, sayfalama, wire:loading, dosya yükleme, Alpine.js ile birlikte kullanım, Eloquent entegrasyonu, performans ve Pest ile Livewire testleri uygulamalı verilir.

Süre ve Format

2 Gün. Her gün dört modül; 1. gün Bileşenler, Veri Bağlama ve Form; 2. gün Olaylar, Gerçek Zamanlı Özellikler ve Test.

Seviye

Orta Seviye — Livewire bileşenleri, wire:model, olaylar, form nesneleri, dosya yükleme ve Alpine.js entegrasyonu

Öğrenme Metodu

Katılımcılar bir görev/proje yönetim paneli geliştirir; canlı arama, satır içi düzenleme, dosya yükleme ve bildirimleri Livewire ile yapar.

Neden Bu Eğitim?

⚡Sayfa Yenilemeden

Formlar, tablolar ve filtreler sayfa yenilenmeden güncellenir.

🧠Tek Dil Tek Yığın

Arayüz mantığını PHP içinde yazarak JavaScript bağımlılığını azaltırsınız.

🧪Test Edilebilir Arayüz

Livewire bileşenlerini Pest ile birim test düzeyinde doğrularsınız.

Anahtar Konular

laravel livewirelivewire 3wire:modellivewire formlivewire dosya yüklemealpine.js livewirelaravel reaktif arayüzlivewire testlivewire paginationlaravel frontend

“Sunucuda yazılan arayüz mantığı, tarayıcıda hızlı hissettirir.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve ortam gereksinimleri

1

Laravel temeli

Route, controller, Blade ve Eloquent kullanımı bilinmelidir.

2

PHP 8

Sınıf, arayüz, attribute ve tip bildirimlerine aşinalık gerekir.

3

Temel JavaScript

DOM olayı kavramı yeterlidir.

4

Ortam

PHP 8.2, Composer, Node.js ve bir veritabanı kurulu olmalıdır.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı Livewire bileşeni yazar, verileri bağlar ve formları doğrular.

Modül 1

Kurulum ve Bileşen

Livewire 3 kurulumu ve @livewireStyles/@livewireScripts
php artisan make:livewire ile bileşen oluşturma
Tam sayfa bileşeni ve Route::get(Component::class)
render() ve Blade görünümü
Tek kök element kuralı
Bileşen yaşam döngüsü: mount, hydrate, updated

Modül 2

Veri Bağlama

Public özellikler ve durum yönetimi
wire:model, .live, .blur, .debounce
wire:click ve eylem metotları
Eloquent modeli ve koleksiyon özellikleri
#[Computed] özellikleri ve önbellek
#[Locked] ile istemci değişikliğini engelleme

Modül 3

Form ve Doğrulama

Livewire Form nesneleri
#[Validate] özelliği ve kurallar
Gerçek zamanlı doğrulama
Hata mesajları ve @error
Oluşturma ve düzenleme formunu tek bileşende birleştirme
Başarı mesajları ve flash

Modül 4

Liste ve Arama

Canlı arama ve debounce
Sıralama ve filtre
WithPagination ve sayfalama
wire:loading ve wire:target
wire:key ile liste kararlılığı
Lazy yükleme (lazy) ve placeholder

Günün hedefiKatılımcı bileşenler arası iletişim ve dosya yükleme kurar, bileşenleri test eder.

Modül 1

Olaylar

dispatch ile olay gönderme
#[On] ile olay dinleme
Bileşenler arası veri akışı
Parent-child bileşen ve parametre geçişi
Modal ve bildirim bileşeni
Tarayıcı olayları ve JavaScript'e olay yollama

Modül 2

Dosya Yükleme

WithFileUploads trait
Geçici yükleme ve önizleme
Boyut ve tip doğrulama
store ile kalıcı depolama
S3 geçici yükleme
İlerleme göstergesi

Modül 3

Alpine.js Entegrasyonu

x-data ve $wire
@entangle ile iki yönlü durum
Dropdown ve modal örnekleri
Sunucu isteği olmadan istemci tarafı etkileşim
wire:ignore kullanımı
Livewire navigate (SPA benzeri gezinti)

Modül 4

Test ve Performans

Pest ve Livewire::test
set, call, assertSee, assertDispatched
Doğrulama ve yetki testleri
N+1 ve gereksiz render engelleme
Policy ile bileşen düzeyi yetkilendirme
Üretimde önbellek ve Octane notları

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Bileşen Yazımı

Livewire 3 bileşenleri ve yaşam döngüsünü kullanabilirsiniz.

✅

Veri Bağlama

wire:model ve Computed özellikleriyle etkileşimli arayüz kurabilirsiniz.

✅

Form Doğrulama

Form nesneleri ve gerçek zamanlı doğrulama yazabilirsiniz.

✅

Canlı Liste

Arama, sıralama ve sayfalama içeren tablolar geliştirebilirsiniz.

✅

Olay İletişimi

Bileşenler arası olay gönderip dinleyebilirsiniz.

✅

Dosya Yükleme

WithFileUploads ile önizlemeli yükleme yapabilirsiniz.

✅

Alpine Kullanımı

Alpine.js ile istemci tarafı etkileşimi birleştirebilirsiniz.

✅

Livewire Testi

Pest ile bileşen davranışını doğrulayabilirsiniz.

Kimler İçin Uygundur?

Laravel bilen
JavaScript çerçevesi öğrenmeden dinamik arayüz geliştirmek isteyen PHP geliştiricileri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Laravel bilen ve JavaScript çerçevesi öğrenmeden dinamik arayüz geliştirmek isteyen PHP geliştiricileri için uygundur.

Livewire ile Vue/React arasında nasıl seçim yapılır?

Livewire sunucu tabanlı çalışır ve ek JS çerçevesi gerektirmez; seçim ölçütleri eğitimde karşılaştırılır.

Livewire 2 projeleri için geçerli mi?

Eğitim Livewire 3 üzerinedir; 2'den 3'e geçişte değişen noktalar da belirtilir.

Performans sorunu çıkarır mı?

Gereksiz render ve büyük public özellikler sorun olabilir; bu yüzden ikinci gün performans önlemleri işlenir.

Sertifika verilir mi?

Digital Vizyon Akademi Katılım ve Başarı Sertifikası verilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika

LARAVEL LIVEWIRE EĞİTİMİ