Krijimi i një Sistemi Filtrimi Produktesh në Kohë Reale me Livewire në Laravel – Pjesa 1

Mirë se vini në këtë udhëzues të plotë mbi përdorimin e Livewire për të ndërtuar një sistem filtrimi produktesh në kohë reale me Laravel. Ky udhëzues është i përshtatshëm për fillestarët dhe ata që duan të përmirësojnë aftësitë e tyre.

Çfarë Do Të Ndërtojmë

Filtrimi dinamik i produkteve është një funksionalitet i zakonshëm në aplikacionet moderne e-commerce. Në këtë udhëzues, do të krijojmë një sistem të pasur filtrimi që do të ofrojë:

• Filtrim të produkteve sipas kategorisë, çmimit dhe disponueshmërisë në kohë reale.
• Mundësi për të pastruar ose rivendosur filtrat lehtësisht.
• Ndërveprime pa rifreskime të faqes.
• Një ndërfaqe tërheqëse për përdoruesit.

Në përfundim të këtij udhëzuesi, do të keni një sistem filtrimi dhe njohuritë për ta zgjeruar atë me veçori të avancuara si filtrat e ruajtur, animacionet dhe më shumë. Le të fillojmë duke konfiguruar ambientin tonë dhe duke krijuar blloqet bazë të aplikacionit tonë.

Pse të Përdorni Livewire për Filtrim në Kohë Reale?

Livewire është një paketë e Laravel që thjeshton ndërtimin e aplikacioneve dinamike dhe reaktive, duke ju lejuar të shkruani shumicën e logjikës në PHP dhe të arrini përgjegjshmërinë e framework-eve moderne JavaScript. Ja disa arsye pse Livewire është perfekt për këtë rast:

• Integrohet në mënyrë të përsosur me ekosistemin e Laravel, duke ulur kompleksitetin e zhvillimit.
• Përditësimet në kohë reale menaxhohen lehtësisht me ndërlidhjen reaktive të të dhënave.
• Eliminon nevojën për framework-e frontend të veçanta si React ose Vue.
• Logjika backend dhe frontend shkruhet në një vend, gjë që e bën më të lehtë për fillestarët dhe më efikase.

Konfigurimi i Projektit Laravel

Le të fillojmë duke krijuar një projekt të ri Laravel:

composer create-project laravel/laravel livewire-filtering

Shkoni te direktoria e projektit:

cd livewire-filtering

Startoni serverin e zhvillimit:

php artisan serve

Hapni http://localhost:8000 në shfletuesin tuaj për të parë faqen e mirëseardhjes të Laravel.

Instalimi i Livewire

Tani, do të instalojmë Livewire. Ekzekutoni komandën e mëposhtme:

composer require livewire/livewire

Pas instalimit, publikoni konfigurimet dhe asetet e Livewire:

php artisan livewire:publish

Me Livewire të instaluar, jemi gati të krijojmë komponente dhe të shtojmë interaktivitet në aplikacionin tonë.

Krijimi i një Database dhe Konfigurimi i Laravel

Do të na duhet një databaze për të ruajtur të dhënat e produkteve. Krijoni një databaze të re me emrin livewire_filtering duke përdorur një mjet si phpMyAdmin ose MySQL Workbench.

Ndryshoni skedarin .env me kredencialet e databazës tuaj:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=livewire_filtering
DB_USERNAME=root
DB_PASSWORD=yourpassword

Ekzekutoni komandën e migrimit të Laravel për të krijuar tabelat bazë:

php artisan migrate

Tani aplikacioni juaj Laravel është i lidhur me një databaze dhe gati për të ruajtur të dhëna.

Krijimi i një Komponente Livewire

Le të krijojmë komponentin tonë të parë Livewire për filtrimin e produkteve:

php artisan make:livewire ProductFilter

Kjo gjeneron dy skedarë:

• Nje klasë PHP te app/Http/Livewire/ProductFilter.php, ku do të përkufizojmë logjikën për filtrimin e produkteve.
• Nje shabllon Blade te resources/views/livewire/product-filter.blade.php, që do të shfaqë produktet e filtruara.

Dizajnimi i Shfaqjes së Produkteve

Do të na duhet një strukturë bazë për të shfaqur produktet në mënyrë dinamike. Le të krijojmë modelin Product së bashku me skedarin e tij të migrimit:

php artisan make:model Product -m

Kjo komandë gjeneron një model Product te app/Models/Product.php dhe një skedar migrimi te direktoria database/migrations.

Redaktoni skedarin e migrimit për të përcaktuar strukturën e tabelës:

Schema::create('products', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->decimal('price', 8, 2);
    $table->string('category');
    $table->boolean('available')->default(true);
    $table->timestamps();
});

Ekzekutoni migrimin:

php artisan migrate

Mbushni databazën me produkte shembull duke përdorur një seeder:

php artisan make:seeder ProductSeeder

Te skedari seeder, shtoni të dhëna shembull:

use App\Models\Product;

class ProductSeeder extends Seeder
{
    public function run()
    {
        Product::create(['name' => 'Laptop', 'price' => 1000, 'category' => 'electronics', 'available' => true]);
        Product::create(['name' => 'Sofa', 'price' => 500, 'category' => 'home', 'available' => false]);
        Product::create(['name' => 'Watch', 'price' => 150, 'category' => 'fashion', 'available' => true]);
        Product::create(['name' => 'Headphones', 'price' => 200, 'category' => 'electronics', 'available' => true]);
        Product::create(['name' => 'Table', 'price' => 300, 'category' => 'home', 'available' => true]);
        Product::create(['name' => 'Shirt', 'price' => 50, 'category' => 'fashion', 'available' => false]);
        Product::create(['name' => 'Phone', 'price' => 800, 'category' => 'electronics', 'available' => true]);
        Product::create(['name' => 'Bed', 'price' => 700, 'category' => 'home', 'available' => true]);
        Product::create(['name' => 'Shoes', 'price' => 100, 'category' => 'fashion', 'available' => true]);
        Product::create(['name' => 'Camera', 'price' => 400, 'category' => 'electronics', 'available' => false]);
        Product::create(['name' => 'Chair', 'price' => 150, 'category' => 'home', 'available' => true]);
        Product::create(['name' => 'Jeans', 'price' => 70, 'category' => 'fashion', 'available' => true]);
    }
}

Ekzekutoni seeder-in:

php artisan db:seed --class=ProductSeeder

Hapat e Radhës

Tani kemi konfiguruar projektin tonë Laravel, instaluar Livewire, krijuar një databaze dhe përgatitur strukturën bazë të produkteve. Në pjesën tjetër të këtij udhëzuesi, do të fokusohemi në ndërtimin e funksionalitetit të filtrimit të produkteve, duke shtuar interaktivitet në kohë reale me Livewire dhe shfaqur produktet në mënyrë dinamike në aplikacionin tonë.

Pyesni për çdo paqartësi ose ndani progresin tuaj në komentet më poshtë.

Pjesa 2: Ndërtimi i Logjikës Bazë të një Filtri Produktesh me Livewire