Laravel

Laravel Blade Template: Component ve Layout Rehberi

Laravel Blade template sistemi, PHP ile HTML görünüm katmanını düzenli biçimde bir araya getirir. Blade dosyaları .blade.php uzantısını kullanır, genellikle resources/views altında tutulur ve çalıştırılmadan önce düz PHP koduna derlenir. Bu rehberde veri yazdırmadan güvenli HTML çıktısına, layout ve component yapısından form hatalarına kadar gerçek bir proje düzeni kuracağız.

Blade yalnızca kısa sözdizimi sağlayan bir şablon motoru değildir. Tekrarlanan arayüz parçalarını component hâline getirmeyi, sayfa iskeletlerini ortaklaştırmayı ve koşullu görünümü okunabilir tutmayı sağlar. Güncel sözdizimi ve sürüme bağlı ayrıntılar için resmî Laravel Blade belgesini temel alın.

Laravel Blade template nedir?

Controller veya route, görünüm adını nokta gösterimiyle çağırır. view('posts.show') ifadesi resources/views/posts/show.blade.php dosyasını açar. Görünüme veriyi ikinci parametrede açıkça geçirmek, şablonun hangi değişkenlere bağlı olduğunu anlaşılır kılar:

public function show(Post $post): View
{
    return view('posts.show', [
        'post' => $post->load('author', 'tags'),
    ]);
}
Laravel Blade template dosya ve görünüm akışı
Controller veriyi görünüm dosyasına aktarır; Blade derlenmiş HTML çıktısını üretir.

İlişkili veriyi Blade döngüsü içinde tek tek sorgulamak N+1 problemine yol açabilir. İhtiyaç duyulan ilişkileri controller veya sorgu katmanında eager load edin. Model bağlantılarını doğru kurmak için Laravel Eloquent ilişkileri rehberini kullanabilirsiniz.

Blade ile güvenli veri yazdırma

Çift süslü parantez, değeri htmlspecialchars üzerinden escape ederek yazdırır. Kullanıcı tarafından üretilebilen başlık, yorum veya profil bilgileri için varsayılan tercihiniz bu olmalıdır:

<h2>{{ $post->title }}</h2>
<p>{{ $post->excerpt }}</p>

{!! $html !!} çıktıyı escape etmeden basar. Verinin tamamen güvenilir ve sunucu tarafında uygun bir HTML temizleyicisinden geçtiği kanıtlanmadıkça bu biçimi kullanmayın. Yalnızca strip_tags uygulamak, karmaşık XSS senaryolarına karşı yeterli bir güvenlik sınırı değildir.

Blade içinde JSON üretme

Bir PHP dizisini JavaScript’e aktarırken elle json_encode yazmak yerine Blade’in Js::from() yardımcısını kullanın. Bu yardımcı, veriyi script bağlamına daha güvenli biçimde yerleştirir:

<script>
    const chartData = {{ Js::from($chartData) }};
</script>

Modern arayüzlerde mümkünse büyük veri bloklarını HTML içine gömmek yerine kimliği doğrulanmış bir API uç noktasından alın. Blade ve JavaScript tarafının ikisi de {{ }} kullanıyorsa tek ifade için @{{ name }}, geniş bir blok için @verbatim tercih edilebilir.

Koşullar, döngüler ve loop değişkeni

@if, @unless, @isset, @auth ve @can gibi direktifler koşullu HTML üretir. Yetkisiz bir butonu gizlemek kullanıcı deneyimini iyileştirir; ancak gerçek yetkilendirme controller, Policy veya middleware tarafında da yapılmalıdır.

@can('update', $post)
    <a href="{{ route('posts.edit', $post) }}">Düzenle</a>
@endcan

@forelse ($posts as $post)
    <article>
        <h2>{{ $post->title }}</h2>
    </article>
@empty
    <p>Henüz yazı bulunmuyor.</p>
@endforelse

@forelse, boş liste durumunu ayrıca yönetir. Döngü içinde kullanılabilen $loop değişkeni; ilk veya son eleman, sıra numarası ve kalan öğe sayısı gibi bilgileri verir. Görünüm içinde ağır veri dönüşümü veya sorgu çalıştırmak yerine bu işi controller, ViewModel ya da servis katmanında tamamlayın.

Blade layout nasıl oluşturulur?

Laravel Blade component tabanlı layout örneği
Component tabanlı layout, ortak sayfa iskeletini tek dosyada tutar ve içeriği slot üzerinden alır.

Yeni bir proje düzeninde ortak iskeleti component olarak tanımlamak pratiktir. resources/views/components/layouts/app.blade.php dosyası şöyle olabilir:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $title ?? config('app.name') }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @stack('head')
</head>
<body>
    <x-navigation />
    <main>{{ $slot }}</main>
    @stack('scripts')
</body>
</html>

Bir sayfa bu layout’u aşağıdaki gibi kullanır:

<x-layouts.app>
    <x-slot:title>{{ $post->title }}</x-slot:title>

    <article>
        <h1>{{ $post->title }}</h1>
        <p>{{ $post->excerpt }}</p>
    </article>
</x-layouts.app>

@stack ve @push, yalnızca belirli sayfalarda gereken stil veya scriptleri layout içindeki kontrollü bir konuma taşır. Vite derleme sorunları yaşıyorsanız Laravel Vite ve Tailwind build hatası rehberini kontrol edin.

Template inheritance ne zaman kullanılır?

Mevcut projelerde @extends, @section ve @yield ile kurulan miras yapısı da geçerlidir. Çalışan bir sistemi sırf component yaklaşımı daha yeni göründüğü için topluca değiştirmeyin. Yeni, tekrar kullanılabilir arayüz parçalarında component; eski layout düzenini sürdüren sayfalarda inheritance kullanmak makul bir geçiş stratejisidir.

Anonymous Blade component ve attribute bag

PHP sınıfına ihtiyaç duymayan bir component, resources/views/components altında tek Blade dosyasıyla tanımlanabilir. Örneğin bir uyarı bileşeni:

@props([
    'type' => 'info',
])

<div {{ $attributes->class([
    'alert',
    'alert-success' => $type === 'success',
    'alert-danger' => $type === 'danger',
]) }} role="alert">
    {{ $slot }}
</div>

Kullanımı:

<x-alert type="success" class="mb-4">
    Kayıt başarıyla oluşturuldu.
</x-alert>

$attributes, çağrı sırasında verilen HTML niteliklerini component köküne taşır. class() ile koşullu sınıfları birleştirebilir, merge() ile varsayılan nitelikler tanımlayabilirsiniz. Component API’sini gereğinden fazla prop ile büyütmek yerine tek bir sorumlulukta tutun.

Blade form, CSRF ve validation hataları

POST, PUT, PATCH veya DELETE işlemi yapan formlarda CSRF korumasını atlamayın. HTML formu yalnızca GET ve POST desteklediği için güncelleme ve silme yöntemleri @method ile taklit edilir:

<form method="POST" action="{{ route('posts.update', $post) }}">
    @csrf
    @method('PUT')

    <label for="title">Başlık</label>
    <input
        id="title"
        name="title"
        value="{{ old('title', $post->title) }}"
        @error('title') aria-invalid="true" @enderror
    >

    @error('title')
        <p role="alert">{{ $message }}</p>
    @enderror

    <button type="submit">Kaydet</button>
</form>

old(), validation hatasından sonra kullanıcının girdiği değeri yeniden gösterir. Sunucu tarafı kuralları ve Form Request düzeni için Laravel validation rehberini uygulayın.

Blade performansı ve önbellek yönetimi

Laravel Blade view cache ve performans kontrolü
Blade dosyaları derlenmiş PHP olarak önbelleğe alınır; performans sorunu çoğunlukla sorgu ve component tasarımında aranmalıdır.

Blade görünümleri düz PHP’ye derlenip önbelleğe alındığı için küçük direktif farklarını mikro optimize etmek genellikle anlamlı değildir. Önce N+1 sorgularını, gereksiz büyük veri setlerini, döngü içinde çalışan servis çağrılarını ve tekrarlanan pahalı component işlemlerini ölçün.

Dağıtım sırasında görünüm önbelleğini üretmek için projenizin desteklediği Laravel sürümünde php artisan view:cache, temizlemek için php artisan view:clear kullanılabilir. Yeni görünümün yayına yansımadığı bir senaryoda yalnızca tarayıcı önbelleğini değil, uygulamanın derlenmiş view dosyalarını ve dağıtım sırasını kontrol edin.

Blade görünümü nasıl test edilir?

Feature test, route’tan dönen görünümü ve kullanıcıya görünen kritik içeriği birlikte sınar:

public function test_post_page_renders_title(): void
{
    $post = Post::factory()->create([
        'title' => 'Blade Test Yazısı',
    ]);

    $this->get(route('posts.show', $post))
        ->assertOk()
        ->assertViewIs('posts.show')
        ->assertViewHas('post', $post)
        ->assertSeeText('Blade Test Yazısı');
}

Test verisini tutarlı oluşturmak için Laravel Seeder ve Factory rehberinden yararlanabilirsiniz. Localization anahtarlarının görünümde ham hâlde kalmasını önlemek için Laravel çok dilli site rehberini de ilgili test kapsamına ekleyin.

Blade için pratik kontrol listesi

  • Kullanıcı verileri varsayılan {{ }} sözdizimiyle escape ediliyor mu?
  • Yetki yalnızca butonu gizlemekle bırakılmayıp sunucuda da doğrulanıyor mu?
  • Blade içinde sorgu veya ağır iş mantığı çalıştırılıyor mu?
  • Ortak arayüz parçaları, sorumluluğu dar component’lere ayrıldı mı?
  • Formlarda @csrf, doğru @method, old() ve @error var mı?
  • Component nitelikleri $attributes ile erişilebilir biçimde birleşiyor mu?
  • Dağıtım sonrası view cache ve kritik sayfalar test ediliyor mu?

Sıkça Sorulan Sorular

Laravel Blade template dosyaları nerede tutulur?

Varsayılan olarak resources/views dizisinde tutulur ve .blade.php uzantısını kullanır. Alt klasörler view('posts.show') gibi nokta gösterimiyle çağrılır.

Blade component ile include arasındaki fark nedir?

@include bir alt görünümü ekler. Component ise prop, slot ve attribute bag gibi daha belirgin bir arayüz sunar; tekrar kullanılabilir UI parçalarında genellikle daha iyi sınır oluşturur.

Blade içinde {!! !!} kullanmak güvenli mi?

Yalnızca içeriğin güvenilir ve uygun biçimde temizlendiği kanıtlandığında kullanılmalıdır. Kullanıcı girdisini escape etmeden yazdırmak XSS açığı oluşturabilir.

Blade dosyası değiştiği hâlde neden görünmüyor?

Yanlış view dosyası düzenlenmiş, dağıtım tamamlanmamış veya derlenmiş view önbelleği eski kalmış olabilir. Route’u, dosya yolunu ve gerekirse view:clear sonrasındaki çıktıyı kontrol edin.

Blade yerine React veya Vue kullanmak gerekir mi?

Hayır. Sunucu tarafında oluşturulan içerik ve klasik formlar için Blade çoğu zaman yeterlidir. Yoğun istemci durumu ve etkileşim gereken ekranlarda Livewire, Inertia ya da bağımsız bir JavaScript yaklaşımı değerlendirilebilir.

Sonuç

İyi bir Laravel Blade template yapısı; görünümü iş mantığından ayırır, çıktıyı varsayılan olarak escape eder, ortak iskeleti layout ve component’lerle tekrar kullanır ve form hatalarını erişilebilir biçimde gösterir. Önce sade bir dosya düzeni kurun; yalnızca gerçekten tekrar eden parçaları component’e dönüştürün. Performans sorunu olduğunda Blade sözdiziminden önce sorguları ve veri akışını ölçün.

ozgur

Özgür Bayram, WordPress, Laravel, yapay zekâ ve web performansı alanlarında çalışan bir yazılım geliştiricisidir. Bilim Meraklısı’nda teknoloji, yazılım, hosting, SEO ve dijital araçlar hakkında anlaşılır, uygulanabilir rehberler hazırlar. Amacı, teknik konuları sade bir dille anlatarak okuyucuların doğru kararlar vermesine ve sorunlarını güvenle çözmesine yardımcı olmaktır.

İlgili Makaleler

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu