Merhaba,

Laravelde yeniyim ve bir süredir denemeler yapıyorum.

Daha önce Laravel 6 versiyonu için oluşturduğum masraf yönetim altyapısını Laravel 8 ve Livewire kullanarak yeniden yazıyorum.

Şimdi bir örnek uygulama üzerinden seçime bağlı droprown menu (dynamic dependent dropdown) yapımına geçelim.

Sponsorlar ve Projeler olmak üzere 2 tablomuz olsun. Her sponsorun birden çok projesi olabilir ve projeler de sponsora bağlıdır.

Sponsoru seçtiğim zaman sponsora ait projeleri getirip bu projeler içinden seçim yaptırmak istiyorum.

Bu iş için pek çok kaynak ve yönerge araştırdım ama çeşitli hatalarla karşılaştım. Çalışan iyileştirilmiş kodları aşağıda paylaşıyorum. KOdlar evrensel olarak İngilizce dilindedir. Bende ne yazık ki Türkçe kod yazılmaması gerektiğini düşünüyorum.

Geçelim Kodlarımıza

Tablolar arası ilişki için Model dosyaları aşağıdaki gibi;

App/Models/projects.php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Projects extends Model
{ 
use HasFactory; 
protected $guarded = []; 
protected $primarykey = "id"; 

public function sponsors() {

return $this->belongsTo(Sponsors::class, 'sponsor_id'); }

}

App/Models/sponsors.php

namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use App\Model\Projects;

class Sponsors extends Model {
use HasFactory;
protected $guarded = [];
protected $primarykey = "id";
public function projects() {
return $this->hasMany(Projects::class);
}
}

Bu Model dosyaları ile tablolar arası ilişkiyi kurmuş olduk.

Sıra geldi Livewire'in sihirli dokunuşa.

!! Öncelikle projenizde Livewire kurulmuş, @livewirestyle ve @livewirescripts kodları view sayfanızda (ya da layout.app sayfanızda)eklenmiş olmalıdır. Livewire kurulumu konusunda livewire Quick Start tıklayarak ya da googleda arataark daha fazla bilgi alabilirsiniz.

Şimdi kurulumlar hazırsa Livewire Komponent eklyerek devam edelim.

Terminal kodu:

php artisan make:livewire projectSponsorDropdown

Bu komut bize view ve komponent dosyalarını otomatik olarak oluşturdu. oluşan dosyaların içi aşağıdaki gibi.

resources/views/livewire/project-sponsor-dropdown.blade.php

<div>
            <div class="form-group">
                <label for="sponsor_id">Sponsor Adı</label>
                <select name="sponsor_id" id="sponsor_id" wire:model="sponsor" class="form-control" >
                <option value=''>Seçiniz:</option>
                @foreach($sponsors as $sponsor)
                    <option value={{ $sponsor->id }}>{{ $sponsor->name }}</option>
                @endforeach
                </select>
            </div>

            @if(count($this->projects) > 0) 
                <div class="form-group">
                    <label for="project_id">Proje Adı</label>
                    <select name="project_id" id="project_id" wire:model="project" class="form-control {{ count($this->projects)==0 ? 'hidden' : '' }}" >
                    <option value=''>Seçiniz:</option>
                    @foreach($this->projects as $project)
                        <option value={{ $project->id }}>{{ $project->name }}</option>
                    @endforeach
                    </select>
                </div>
            @endif
</div>

Komponent içeriği,

App/Http/Livewire/ProjectSponsorDropdown.php

refreshData();
    }

    private function refreshData()
    {
        $this->sponsors = Sponsors::orderBy('name')->get();
        if (!empty($this->sponsor)) {
            $this->projects = Projects::where('sponsor_id', $this->sponsor)->get();
        }
    }

    public function render()
    {
        $this->refreshData();
        return view('livewire.project-sponsor-dropdown');           
}

Hepsi Bu kadar. Artık oluşturduğumuz livewire çoklu seçim dropdown ilişkisini istediğimiz form içerisinde aşağıdaki kodu kullanarak ekleyebiliriz.

@livewire('project-sponsor-dropdown')

Olası sorunlarınızı aşağıdaki yorum bölümüne yazabilirsiniz.