@if(count($images) > 0)<\/p>\n
- \n @foreach($images as $index => $image)<\/p>\n
- \n
temporaryUrl() }}” alt=”Y\u00fcklenen resim” width=”100″>
\n
Laravel Livewire’da \u00c7oklu Resim Se\u00e7imiyle \u00c7al\u0131\u015fmak<\/p>\n
Merhaba! Bug\u00fcn Laravel Livewire’da \u00e7oklu resim se\u00e7imi nas\u0131l entegre edilece\u011fini ve bir web uygulamas\u0131na nas\u0131l uygulanaca\u011f\u0131n\u0131 a\u00e7\u0131klayaca\u011f\u0131m. Livewire, kullan\u0131c\u0131 aray\u00fczlerini olu\u015fturmak ve dinamik, ger\u00e7ek zamanl\u0131 g\u00fcncellemeler sa\u011flamak i\u00e7in m\u00fckemmel bir ara\u00e7t\u0131r ve onu resim y\u00fckleme ve d\u00fczenleme \u00f6zellikleri i\u00e7in ideal k\u0131lar.<\/p>\n
Livewire, resim se\u00e7imi ve y\u00fckleme i\u015flevselli\u011fini kolayla\u015ft\u0131rmak i\u00e7in bir dizi \u00f6zellik sa\u011flar. Livewire bile\u015fenleri, sunucuyla etkile\u015fimde bulunmak ve \u00f6n u\u00e7tan gelen de\u011fi\u015fiklikleri dinamik olarak i\u015fleyerek kullan\u0131c\u0131lara sorunsuz bir deneyim sunar. Bu makale, bu \u00f6zelliklerinden baz\u0131lar\u0131n\u0131 kullanarak \u00e7oklu resim se\u00e7imi ger\u00e7ekle\u015ftiren basit bir Livewire bile\u015feni nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 g\u00f6sterecektir.<\/p>\n
Ba\u015flamak i\u00e7in bir Laravel projesi olu\u015fturman\u0131z gerekir. Bir projeniz yoksa, a\u015fa\u011f\u0131daki komutla yeni bir proje olu\u015fturabilirsiniz:<\/p>\n
“`bash
\ncomposer create-project laravel\/laravel my-livewire-app
\n“`<\/p>\n
Projeniz olu\u015fturulduktan sonra, Livewire’\u0131 projenize kurun:<\/p>\n
“`bash
\ncomposer require livewire\/livewire
\n“`<\/p>\n
Daha sonra, Livewire’\u0131 uygulaman\u0131zda \u00e7al\u0131\u015ft\u0131rman\u0131z gerekir. A\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
“`bash
\nphp artisan livewire:install
\n“`<\/p>\n
Livewire art\u0131k kuruldu\u011funa g\u00f6re, bir Livewire bile\u015feni olu\u015fturmak i\u00e7in haz\u0131r\u0131z.<\/p>\n
\u00d6ncelikle, yeni bir Livewire bile\u015feni olu\u015fturaca\u011f\u0131z. Terminalde a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
“`bash
\nphp artisan make:livewire ImageUpload
\n“`<\/p>\n
Bu komut, `ImageUpload.php` adl\u0131 bir dosya olu\u015fturacak ve `app\/Http\/Livewire` klas\u00f6r\u00fcnde bulacaks\u0131n\u0131z.<\/p>\n
\u015eimdi, `ImageUpload.php` dosyas\u0131na a\u015fa\u011f\u0131daki kodu ekleyin:<\/p>\n
“`php
\nimages[] = $image;
\n }<\/p>\n
public function removeImage($index)
\n {
\n unset($this->images[$index]);
\n }
\n}
\n“`<\/p>\n
Bu kod, kullan\u0131c\u0131 taraf\u0131ndan se\u00e7ilen g\u00f6r\u00fcnt\u00fcleri depolayan bir `images` dizisi tan\u0131mlar. `addImage` ve `removeImage` metodlar\u0131, g\u00f6r\u00fcnt\u00fcler eklemek ve kald\u0131rmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n
Bir sonraki ad\u0131m, `resources\/views\/livewire\/image-upload.blade.php` adl\u0131 bir g\u00f6r\u00fcn\u00fcm dosyas\u0131 olu\u015fturmakt\u0131r. Bu dosyaya a\u015fa\u011f\u0131daki kodu ekleyin:<\/p>\n
“`blade<\/p>\n
@if(count($images) > 0)<\/p>\n