UFUK   UÇAR

Merhaba, bu yazıda Laravel ile Component oluşturma hakkında bilgiler vereceğim.

Başlamadan söyleyeyim Laravel 8 ile devam edeceğiz.

O zaman başlayalım.

Bildiğiniz gibi component lerin bize en bilinir faydası tekrar tekrar kullanılabilir olmasıdır.

Bunu bir örnek üzerinden anlatacağım.

Mesela bir Alert component iniz var. Tüm CRUD işlemleri sonrasında devamlı eğer işlem sorunsuz olduysa ekrana bir success mesajı, bir hata var ise ekrana da bir error mesajı verdirmek isteriz.

Bu da bize kod kalabalığından başka bir şey getirmez.

Gelin bu işi nasıl çözeceğimize bir bakalım.

Öncelikle elimizde olanlar şunlar;

1. Post Model
2. Post Controller
3. Update Blade
4. Create Blade

Şimdi devam edelim.

Bir tane component oluşturalım ve adı Alert Olsun.

php artisan make:component Alert

Yukarıdaki komut bize iki adet şey verecek.

Birincisi, app altında bir tane View dizini açacak ve içine de Components adında başka bir dizin açacak. Buraya Alert.php adında bir class geldiğini görebilirsiniz.

İkincisi ise, resources altında views altında açılan component dizini. Burada da alert.blade.php adında bir blade dosyası bulunacak.

Öncelikle, oluşturduğumuz component'i kullanabilmek için AppServiceProvider içine eklememiz gerekiyor.

<?php

namespace App\Providers;

use App\View\Components\Alert;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    
    public function register()
    {
        
    }

    public function boot()
    {
        Blade::componentNamespace('alert', Alert::class);
    }
}

Yukarıdaki kısma dikkat edin.

Evet, artık component i   <x-alert /> olarak kullanabiliriz.

Şİmdi Alert.php dosyamızı açalım ve içeriğini şu şekilde değiştirelim. Sizde içerisi boş gelecektir.

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{

    public $tip;  // danger ya da success
    public $mesaj; // kullanıcıya göstermek istediğimiz mesaj

    public function __construct( $tip, $mesaj )
    {
        $this->tip = $tip;
        $this->mesaj = $mesaj;
    }

    public function render()
    {
        $mesaj = $this->mesaj;
        $tip   = $this->tip;

        return view('components.alert', [
            'mesaj' => $mesaj,
            'tip'   => $tip
        ]);
    }
}

Yukarıdaki kod ile şunu söylüyoruz.

Ben dışarıdan $tip ve $mesaj adından 2 adet değer alıyorum ve bunu component view içinde gösteriyorum.

render kısmında ise bu değerleri view içine gönderiyoruz.

Peki component view nasıl olacak? O da şu şekilde.

<div class="alert alert-{{ $tip }}">

    {{ $mesaj }}

</div>

Tahmin edebileceğiniz gibi Bootstrap kullanıyoruz.

Devam edelim.

Diyelim ki sadece başlık bilgisinin girildiği bir sistemimiz var. Haliyle şu şekilde bir form yapınız olmalı.

 <form action="{{ route('savePost') }}" method="POST">

       @csrf
       <div class="form-group">
           <label for="title">Title</label>
           <input type="text" class="form-control" id="title" name="title" />
        </div>

        <button type="submit" class="btn btn-primary">Submit</button>
                        
</form>

Controller içindeki yapımız ise şu şekilde.

public function savePost(Request $req)
{

    try {

        $post = new Post();
        $post->title = $req->title;

        $post->save();

        $mesaj =  [
                    'flash'=> 'true',
                    'tip' => 'success',
                    'mesaj' => 'Post Created Successfully !'
        ];


        return redirect()->back()->with($mesaj);

    }catch (\Exception $e) {

        $mesaj =  [
            'flash'=> 'true',
            'tip' => 'danger',
            'mesaj' => 'There is an error occured! '.$e->getMessage()
        ];

        return redirect()->back()->with($mesaj);
    }

}

Herhangi bir kontrol yapmıyorum basit olsun diye.

Burada yaptığımız işlemi try-catch içine almışız.

Ne olursa olsun işlem bittiğinde de geldiği sayfaya geri döndürüyoruz.

Döndürürken de  bir  mesaj adında bir dizi gönderiyoruz.

Amacımız  flash mesaj göstermek.

Eğer işlem başarılı ise tip  değeri success, aksi halde ise danger.

Gelelim bunları nasıl kullanacağımıza.

Create Blade içine gelelim ve formumuzun üstüne şu kodları yapıştıralım.

@if ( session()->has('flash') )
  
  <x-alert tip="{{ session()->get('tip') }}" mesaj="{{ session()->get('mesaj')  }}" />

@endif

Yukarıda controller içinden gönderdiğimiz mesaj dizisinin elemanlarını kullanıyoruz.

Eğer flash adında bir session  var ise oluşturduğumuz component çalışacak.

Dikkat ettiyseniz başında x var. Evet, oluşturduğumuz componentleri bu şekilde kullanabiliriz.

Parametreleri ise yine session ile gönderdiğimiz için burada yakalıyoruz.

Bootstrap kullandığımız için alert.blade.php dosyamız, eğer gelen tip, danger ise

<div class="alert alert-danger">

    {{ $mesaj }}

</div>

olacak. Yok eğer başarılı ise

<div class="alert alert-success">

    {{ $mesaj }}

</div>

Mesaj olarak da yine session da gönderdiğimiz mesaj değerini yazdırıyoruz.

Eğer her şey düzgün ise kaydet e bastığımızda şöyle bir ekran olacak.

Eğer bir sorun oluştu ise bir hata mesajı alınacaktır. Benim hata mesajım şu şekilde.

Evet, hepsi bu kadar..