Sarıkaya Dev Logo
design

Laravel Folio ve Volt Kullanarak Basit Bir Çevrimiçi Mağaza Oluşturun

March 13, 2025

Laravel Folio, rotaları tanımlamak için dosya tabanlı bir yaklaşım sunar. Ve Volt, Livewire v3'e tek dosyalı bileşenler ve isteğe bağlı yeni bir kompozisyon API'si sunar .


Bu yeni araçları ve prensipleri benimsemek üretkenliğinizi artırabilir ve Laravel ile web uygulamaları oluşturma şeklinizi dönüştürebilir. Basit bir çevrimiçi mağaza oluşturarak size göstereyim.


Başlamadan önce canlı demoyu deneyin .

Yeni Dummy Store projenizi oluşturun

Yeni projenizi oluşturmak için Laravel'in resmi yükleyicisini kullanın:


Laravel Folio

İlk olarak Laravel Folio adlı paketi kurmak gerekiyor .


Laravel Folio, yönlendirmeye yeni bir yaklaşımdır. Bir routes.phpdosya aracılığıyla yönlendirmeleri bildirmek yerine, belirli bir adlandırma kuralını izleyen görünümler oluştururuz.

Bunu Composer aracılığıyla çekelim:




composer require laravel/folio




Kurulum tamamlandıktan sonra, Servis Sağlayıcısını eklemeliyiz (buradan Folio'nun davranışlarını özelleştirebilir ve ara yazılımlar ekleyebilirsiniz) ve pagesFolio tarafından kullanılacak dizini oluşturmalıyız:

sh

sh
php artisan folio:install

Yeni dizin resources/views/pages.

Livewire v3 ve Volt'u yükleyin


Daha önce Livewire'ı denemediyseniz, öncelikle becerilerinizi geliştirmenizi öneririm. En azından biraz Livewire bilginiz olmadan Volt sizin için pek işe yaramayacaktır.

Volt, Livewire v3 ile tek dosyalı bileşenleri mümkün kılıyor ve ayrıca isteğe bağlı bir kompozisyon API'si ekliyor.

Bir projeye kurulduğunda, tamamen ona bağımlı olduğundan Livewire v3'ü de içerir. Aşağıdaki komutu kullanarak yükleyelim:

Komut:

sh

sh
composer require livewire/volt

Daha sonra Volt'un Servis Sağlayıcısını yayınlayarak süreci sonlandırıyoruz:



Komut:

sh

sh
php artisan volt:install

Laravel Folio'yu en iyi şekilde kullanmak istediğimiz için, app/Providers/VoltServiceProvider.phpyöntemde kullanılan dizideki iki öğeyi değiştirelim mount():

Dosya

VoltServiceProvider.php

php
namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Livewire\Volt\Volt;

class VoltServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        Volt::mount([
-            resource_path('views/livewire'),
-            resource_path('views/pages'),
+            resource_path('views/pages'),
+            resource_path('views/livewire'),
        ]);
    }
}

Bu şekilde Volt, sayfa klasöründe yeni bileşenler oluşturmak istediğimizi anlayacaktır.


Laravel Folio'nun çalışır durumda olduğunu doğrulayın

resources/views/welcome.blade.phpİlk sayfanızı oluşturmak için . içindeki route bildirimini de kaldırmanızı öneririm routes/web.php. Laravel Folio sayesinde artık buna ihtiyacımız olmayacak.


Sonra, yeni oluşturulan klasöre gidin resources/views/pages. İçinde .gitkeepkaldırabileceğiniz bir tane var. index.blade.phpBiraz geçici metin oluşturun ve ekleyin.

Dosya

index.blade.php

html
<h1>Hello, world!</h1>

Son olarak, http://127.0.0.1:8000 adresini ziyaret edin (hala çalıştığından emin olun ). "Merhaba, dünya!"php artisan serve yazan bir sayfa görürseniz , Folio kullanıma hazır demektir.


Standart komuta benzer şekilde , tüm Folio'ya özgü rotaların listesini görüntülemek için route:listde çalıştırabilirsiniz .php artisan folio:list


Düzeni oluştur

Basitlik adına inanılmaz derecede basit bir düzen kullanacağız. Aşağıda gördüğünüz kod, tarayıcıların işleyebileceği geçerli HTML'dir. Tailwind CSS Play CDN, normal bir proje için tipik derleme sürecini atlamamızı sağlayacaktır. Tahmin edebileceğiniz gibi, bunu üretimde yapmanız önerilmez.


Bir dosya oluşturun resources/views/components/layouts/app.blade.phpve şu kodu yapıştırın:






Dosya

app.blade.php

php
<html class="bg-gray-50 text-gray-600">
    <title>{{ config('app.name') }}</title>

    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                container: {
                    center: true,
                    padding: '1rem',
                },
            }
        }
    </script>

    <div class="container py-16">
        {{ $slot }}
    </div>
</html>

Son olarak, http://127.0.0.1:8000 adresini ziyaret edin (hala çalıştığından emin olun ). "Merhaba, dünya!"php artisan serve yazan bir sayfa görürseniz , Folio kullanıma hazır demektir.


Standart komuta benzer şekilde , tüm Folio'ya özgü rotaların listesini görüntülemek için route:listde çalıştırabilirsiniz .php artisan folio:list


Düzeni oluştur

Basitlik adına inanılmaz derecede basit bir düzen kullanacağız. Aşağıda gördüğünüz kod, tarayıcıların işleyebileceği geçerli HTML'dir. Tailwind CSS Play CDN, normal bir proje için tipik derleme sürecini atlamamızı sağlayacaktır. Tahmin edebileceğiniz gibi, bunu üretimde yapmanız önerilmez.


Bir dosya oluşturun resources/views/components/layouts/app.blade.phpve şu kodu yapıştırın:



Volt kullanarak ilk Livewire bileşeninizi oluşturun

Çevrimiçi mağazamızın ana bileşeni olan sepeti oluşturarak başlayalım. İçeride, eklenen ürünleri listeleyeceğiz ve kullanıcılara sayfayı yeniden yüklemelerine gerek kalmadan bunları kaldırma olanağı vereceğiz.



Dosya

app.blade.php

php
<html class="bg-gray-50 text-gray-600">
    <title>{{ config('app.name') }}</title>

    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                container: {
                    center: true,
                    padding: '1rem',
                },
            }
        }
    </script>

    <div class="container py-16">
        {{ $slot }}
    </div>
</html>

Son olarak, http://127.0.0.1:8000 adresini ziyaret edin (hala çalıştığından emin olun ). "Merhaba, dünya!"php artisan serve yazan bir sayfa görürseniz , Folio kullanıma hazır demektir.


Standart komuta benzer şekilde , tüm Folio'ya özgü rotaların listesini görüntülemek için route:listde çalıştırabilirsiniz .php artisan folio:list


Düzeni oluştur

Basitlik adına inanılmaz derecede basit bir düzen kullanacağız. Aşağıda gördüğünüz kod, tarayıcıların işleyebileceği geçerli HTML'dir. Tailwind CSS Play CDN, normal bir proje için tipik derleme sürecini atlamamızı sağlayacaktır. Tahmin edebileceğiniz gibi, bunu üretimde yapmanız önerilmez.


Bir dosya oluşturun resources/views/components/layouts/app.blade.phpve şu kodu yapıştırın:



Volt kullanarak ilk Livewire bileşeninizi oluşturun

Çevrimiçi mağazamızın ana bileşeni olan sepeti oluşturarak başlayalım. İçeride, eklenen ürünleri listeleyeceğiz ve kullanıcılara sayfayı yeniden yüklemelerine gerek kalmadan bunları kaldırma olanağı vereceğiz.



Dosya

app.blade.php

php
<html class="bg-gray-50 text-gray-600">
    <title>{{ config('app.name') }}</title>

    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                container: {
                    center: true,
                    padding: '1rem',
                },
            }
        }
    </script>

    <div class="container py-16">
        {{ $slot }}
    </div>
</html>


Volt kullanarak ilk Livewire bileşeninizi oluşturun

Çevrimiçi mağazamızın ana bileşeni olan sepeti oluşturarak başlayalım. İçeride, eklenen ürünleri listeleyeceğiz ve kullanıcılara sayfayı yeniden yüklemelerine gerek kalmadan bunları kaldırma olanağı vereceğiz.



Terminal

sh

sh
php artisan make:volt Cart

Bu komut resources/views/pages/cart.blade.php'de yeni bir bileşen oluşturacaktır . Livewire'ı kullanmanın geleneksel yolundan farklı olarak, ayrı bir PHP sınıfına ihtiyacımız yoktur, bu da süreci hızlandırır ve kod tabanını basitleştirir.

cart.blade.php

cart.blade.ph

php
<?php

use function Livewire\Volt\state;

state('count', fn () => cache()->get('count', 0));

$remove = function () {
    if ($this->count > 0) {
        cache()->put('count', --$this->count);
    }
};

?>

<x-layouts.app>
    @volt
        <div>
            <div>
                <a href="/">
                    ← Back
                </a>
            </div>

            @if ($count)
                <div class="grid gap-8 mt-8">
                    @foreach (range(1, cache()->get('count')) as $item)
                        <div class="flex items-center justify-between gap-4">
                            <div class="flex items-center gap-4">
                                <img src="https://via.placeholder.com/256x256.png/f3f4f6" width="128" height="128" />

                                <div>
                                    <div>{{ fake()->sentence(2) }}</div>
                                    <div class="font-bold text-2xl">${{ rand(10, 100) }}</div>
                                </div>
                            </div>

                            <button
                                class="bg-red-400 text-white rounded py-2 px-3 text-sm font-bold"
                                wire:click="remove"
                            >
                                Remove
                            </button>
                        </div>
                    @endforeach
                </div>
            @else
                <p class="mt-16 font-light text-center text-3xl">
                    Your cart is empty.
                </p>
            @endif
        </div>
    @endvolt
</x-layouts.app>

Parçalayın:

Yukarıdaki kodu incelemek için bir dakikanızı ayırın. Dikkat edilmesi gereken birkaç şey şunlardır:


  1. Laravel Folio, sepet için otomatik olarak bir rota oluşturdu. Tekrar, bunu çalıştırarak görebilirsiniz php artisan folio:list.

  3. @voltBileşen , içindeki ayrı bir dosya yerine yönergenin içine sarılır resources/views/livewire. Bu onu anonim bir bileşen yapar.
  4. Bir veritabanı, geçişler, modeller, fabrikalar vb. kurmak yerine, öğelerin sayısını depolamak için önbelleği kullanırız. Bu şekilde öğrenmeye odaklanabiliriz. Açıkçası, bunu üretimde böyle yapmazsınız.
  5. Öğeler fake()yardımcı kullanılarak rastgele üretilir. Bu büyük bir zaman kazancıdır.
  6. Öğeleri kaldırmak için bir düğmeyle temel bir düzen sağladım. Tıklandığında, adlı bir Livewire metodunu çağırır remove(). Volt'un yeni bildirimsel API'sinde, remove()metodu bir değişkenin içindeki bir kapanış olarak tanımlarız.
  7. @phpLivewire kodu PHP etiketleri arasında tanımlanmıştır. Direktifi Volt ile ilgili herhangi bir şeyi kurmak için kullanamazsınız .
  8. $countYardımcıyı kullanmanın başlangıç ​​durumunu tanımlarız state(). Önbellekten değeri getiren bir kapatma içerir.
  9. Yöntemde remove(), azaltmadan önce sayımın 0'dan büyük olduğundan emin oluruz. Daha sonra, yeni değeri önbelleğe kaydederiz.


Mantıklı mı? Şimdi ana sayfamızı ve bileşenlerini oluşturmaya başlayabiliriz, çünkü hala sepetimize ürün ekleyemiyoruz!


Öğe bileşenini oluşturun

Bir sonraki adımımız bir Itembileşen oluşturmaktır. Mağazamızda satın alınabilecek bireysel ürünleri temsil eder. Bu sefer, bileşeni oluşturmak için Volt yerine Livewire kullanacağız. Bunu resources/views/livewireklasörün içinde istiyoruz.


Terminal

sh

sh
php artisan make:livewire Item

Komut yürütüldüğünde, içinde oluşturulan dosyayı kaldırın app/Livewire/Item.phpve 'a gidin resources/views/livewire/item.blade.php. Sonra, şu kodu ekleyin:


Dosya

item.blade.php

php
<?php

use function Livewire\Volt\state;

state('done', false);

$add = function () {
    $this->dispatch('product-added-to-cart');

    $this->done = true;
};

?>

<div>
    <img src="https://via.placeholder.com/512x512.png/f3f4f6" alt="Product Image" />

    <div class="flex items-start justify-between mt-4">
        <div>
            <div>{{ fake()->sentence(2) }}</div>
            <div class="text-2xl font-bold">${{ rand(10, 100) }}</div>
        </div>

        <button
            class="px-3 py-2 text-sm font-bold text-white bg-blue-600 rounded disabled:bg-gray-200 disabled:text-gray-400"
            @if ($done) disabled @endif
            wire:click="add"
        >
            @if ($done)
                Added
            @else
                Add to Cart
            @endif
        </button>
    </div>
</div>

Bu bileşende:

  1. Tıklandığında metodu çağıran bir "Sepete Ekle" butonumuz var .add()

  3. Düğmeyi devre dışı bırakmak ve bunun yerine "Eklendi" mesajını görüntülemek için adlı bir durum değişkeni $doneayarlanır .true
  4. Fonksiyon add(), bir ürünün eklendiğini belirten bir olay gönderir. Bu olayı bekleyen bileşen (sepet önizlemesi) önbellekteki değeri artıracaktır (bir sonraki adımda yapacağımız şey budur).

Sepet önizleme bileşenini oluşturun

Sepet önizleme bileşeni, kullanıcının alışveriş sepetinin mini bir gösterimi olacak ve kullanıcıların sepet sayfasına gitmeden kaç ürün eklediklerini hızlı bir şekilde görmelerine olanak tanıyacak.


Bunu nasıl yaratabileceğimizi anlatalım:




Terminal

sh

sh
php artisan make:livewire CartPreview

Şimdi, düzenle resources/views/pages/cart-preview.blade.php:


Dosya

cart-preview.blade.php

php
<?php

use function Livewire\Volt\{on,state};

state('count', fn () => cache()->get('count', 0));

on(['product-added-to-cart' => function () {
    cache()->put('count', ++$this->count);
}]);

?>

<a href="/cart">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="inline-block mr-1 w-6 h-6 translate-y-[-2px]"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" /></svg>

    <span class="font-bold">
        {{ $count }}
    </span>
</a>

Bu bileşende:

  1. Sepetteki ürün sayısını bir durum değişkeni ( count) kullanarak takip ediyoruz. Başlangıç ​​değeri, önbellekte bulunan değere eşittir.

  3. product-added-to-cartBir dinleyici , sayımın güncellenmesi için olayı bekler .
  4. Kullanıcı arayüzü, 'nin geçerli değerini görüntüler count.

Ana sayfayı oluştur

Ana sayfa yazmamız gereken en basit kod parçasıdır. Sadece daha önce yazdığımız bileşenleri düzenler. Aşağıdaki kodu ekleyin resources/views/pages/index.blade.php:

Dosya

index.blade.php

php
<x-layouts.app>
    <div class="text-right">
        <livewire:cart-preview />
    </div>

    <div class="grid grid-cols-3 gap-8 mt-8">
        @foreach (range(1, 9) as $item)
            <livewire:item />
        @endforeach
    </div>
</x-layouts.app>
  1. Bu basit bir Blade bileşenidir.
  2. Fonksiyonu kullanarak dokuz öğeden oluşan bir dizi oluşturuyoruz range(). Unutmayın, hepsi rastgele oluşturulmuştur.


Uygulamanızı bir SPA'ya dönüştürünwire:navigate

Çevrimiçi mağazamız zaten oldukça etkileyici. Peki ya size onu minimum çabayla geliştirebileceğimizi söyleseydim? Livewire v3, adında yeni bir HTML niteliğiyle birlikte gelir wire:navigate. Kullanıldığında, tüm sayfayı yeniden yüklemek yerine yalnızca yeni HTML'yi alır ve geçerli olanı değiştirir.


wire:navigateBağlantıdaki özniteliği sepete ekleyelim resources/views/livewire/cart-preview.blade.php:



Dosya

cart-preview.blade.php

php
-<a href="/cart">
+<a href="/cart" wire:navigate>
    …
</a>

Kendiniz nasıl hissettiğinizi görmeden önce, ana sayfaya geri dönen bağlantıyı unutmayın resources/views/pages/cart.blade.php:

Dosya

cart.blade.php

php
-<a href="/">
+<a href="/" wire:navigate>
    ← Back
</a>

Şimdi bunu tarayıcınızda test edin. Bu da işin en güzel yanı, değil mi?


Çözüm

Kullanıcı dostu bir çevrimiçi mağaza oluşturmak için bu üç güçlü paketi nasıl entegre edeceğinizi inceledik. Artık JavaScript'te uzman olmasanız bile, modern SPA benzeri web uygulamalarını hızla oluşturmak için gereken temel bilgiye sahipsiniz.


Bu kod üzerinde daha fazla zaman harcamak istiyorsanız, geliştirebileceğiniz birkaç alan şunlardır:



3 + 0 =