Alpine.js ile Laravel’de Beğen ve Beğenme Butonu Nasıl Eklenir?
Merhaba, bu makalede Alpine.js ile Laravel’de dinamik beğenme ve beğenme kaldırma butonları nasıl ekleyeceğinizi adım adım göstereceğim. Bu özellik web sitenize interaktif bir deneyim katacak ve kullanıcıların içeriklerinizle etkileşim kurmasını sağlayacaktır.
Gerekli Paketler
Başlamadan önce aşağıdaki paketleri projenize yüklememiz gerekiyor:
- Alpine.js: https://alpinejs.org/ – Web sitenizde interaktif arayüz elemanları oluşturmak için kullanacağımız bir JavaScript çerçevesi.
- Livewire: https://laravel-livewire.com/ – Dinamik içerik güncellemeleri için kullanacağımız Laravel paketi.
Bu paketleri Composer aracılığıyla yüklemek için aşağıdaki komutları kullanabilirsiniz:
“`bash
composer require livewire/livewire
npm install alpinejs
“`
Livewire Komponent Oluşturma
İlk olarak, Livewire komponentini oluşturalım. Bu komponent, beğenme ve beğenme kaldırma işlevlerini ele alacak.
“`bash
php artisan make:livewire LikeButton
“`
Livewire Komponentini Ayarlama
Yeni oluşturulan LikeButton.php dosyasını açın ve aşağıdaki kodu ekleyin:
“`php
post = $post;
$this->isLiked = $post->isLikedByUser();
}
public function toggleLike()
{
if ($this->isLiked) {
$this->post->unlike();
} else {
$this->post->like();
}
$this->isLiked = !$this->isLiked;
}
public function render()
{
return view(‘livewire.like-button’);
}
}
“`
Bu kodda, post özelliği mevcut gönderiyi temsil ediyor. isLiked özelliği ise kullanıcının gönderiyi beğenip beğenmediğini gösterir. mount() metodu, gönderi bilgilerini alıp isLiked özelliğini ayarlar. toggleLike() metodu, beğenme ve beğenme kaldırma işlevini gerçekleştirir. render() metodu ise komponentin görünümünü oluşturur.
Komponentin Görünümünü Oluşturma
Şimdi, resources/views/livewire/like-button.blade.php dosyasını oluşturun ve aşağıdaki kodu ekleyin:
“`blade