Bu yazımızda gelin Laravel’deki Component konusuna bir bakalım.
Laravel’de Blade üzerinde sık tekrarladığımız şeyler olur.
Örneğin tüm CRUD işlemlerinde, işlem yapıldıktan hemen sonra, kullanıcıya işlemin sonucunu göstermek isteriz.
(İşleminiz başarılı şekilde kayıt edildi, Form’da hatalar bulundu vs. gibi)
Tüm CRUD işlemlerinde bu şablonu tekrarlıyorsak ve hemen hemen aynı şeyleri yapıyorsak neden onu bir Component haline getirmeyelim. İşte component’lerin asıl amacı da bu.
Component’ler Klasik PHP‘deki include komutuna benzer şekilde ancak işler, ancak daha yeteneklidirler ve parametre alabilirler.
Şimdi bu söylediklerimizi örnekler ile açıklayalım ama önce bir component oluşturalım.
php artisan make:component Alert
Bu komut sayesinde Laravel bizim için 2 tane dosya oluşturulacak.
Birincisi app/View/Components klasöründe altında Alert.php isimli Class dosyasıdır. İçeriği de tam olarak şöyle :
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class Alert extends Component
{
/**
* Create a new component instance.
*
* @return void
*/
public function __construct()
{
//
}
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\Contracts\View\View|\Closure|string
*/
public function render()
{
return view('components.alert');
}
}
İkinci dosya ise resources/views/component klasörü altında alert.blade.php ismindeki Blade dosyası.
İşte bu blade dosyası içerisine sık kullandığınız HTML/Blade kodlarını yazabilir ve istediğiniz Blade dosyası içerisinde kullanabilirsiniz.
Bunu kullanmak içinse tem yapmamız gereken ilgili yere <x-alert />şeklinde komut yazmak.
Dikkat ettiğiniz gibi, <x- yazdıktan hemen sonra component’in ismini (component’in class ismini) yazıyoruz.
alert.blade.php dosyasına istediğiniz kodu yazabilirsiniz. Bu kod <x-alert /> komutu görülen yerlere otomatik olarak enjekte edilecektir.
Ayrıca alert component’ine göndermek istediğiniz bir parametre olursa bunu da HTML attribute ile gönderebilirsiniz.
<x-alert type="error" :message="$message"/>
Bu örnekte type isminde bir parametreyi ve aynı zamanda message isminde bir parametreyi component’e göndermiş olduk. type ismindeki parametreye “error” şeklinde bir string atadık.
message isimli parametreye ise $message ismindeki bir değişkeni atadık. Dikkat ederseniz değişken ataması yaparsan ilgili parametrenin hemen ömüne iki nokta üstüste işareti (:) koyuyoruz.
Şimdi de gönderdiğimiz bu değişkenleri component’in construct metodunda tanımlamalıyız.
Bu sayede component render edilince otomatik olarak view’a aktarılmış olacaktır.
Yani bu değişkenleri view’a göndermek için sizin ayrıca bir şey yapmanıza gerek yok.
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class Alert extends Component
{
public $type;
public $message;
public function __construct($type, $message)
{
$this->type = $type;
$this->message = $message;
}
public function render()
{
return view('components.alert');
}
}
Gördüğünüz gibi; type ve message isminde 2 adet parametreyi component’e gönderdik.
Component‘in construct metodunda da bu 2 adet parametreyi tanımladık.
Şimdi component’inizin Blade’inin içinde şu şekilde bir kullanım ile bu parametrelere erişebilirsiniz..
<div class="alert alert-{{ $type }}">
{{$message}}
</div>
İşte bu kadar kolay 🙂