--- title: "Krijimi i një Sistemi Filtrimi Produktesh në Kohë Reale me Livewire në Laravel – Pjesa 1" description: "Ky është një udhëzues i plotë mbi përdorimin e Livewire për të ndërtuar një sistem filtrimi produktesh në kohë reale me Laravel." url: "https://sajdoko.al/blog/krijimi-i-nje-sistemi-filtrimi-produktesh-ne-kohe-reale-me-livewire-ne-laravel/" language: "sq" content_signal: "ai-train=no, search=yes, ai-input=yes" --- # Krijimi i një Sistemi Filtrimi Produktesh në Kohë Reale me Livewire në Laravel – Pjesa 1 15 Nëntor 2024·5 minuta lexim·[Development](https://sajdoko.al/blog/category/development-sq/) Ky udhëzues konfiguron një projekt Laravel për filtrimin e produkteve me Livewire. Përfshin instalimin, bazën e të dhënave dhe strukturën e produkteve që do të përdorim në seri. ## Ç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](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 Projekti Laravel, instalimi i Livewire dhe struktura e bazës së të dhënave janë gati. Në pjesën tjetër do të ndërtojmë ndërfaqen e filtrimit dhe shfaqjen e produkteve. 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](https://sajdoko.al/blog/ndertimi-i-logjikes-baze-te-nje-filtri-produktesh-me-livewire/) - [Development](https://sajdoko.al/blog/category/development-sq/) - [Laravel](https://sajdoko.al/blog/category/laravel-sq/) ## Keni një projekt në mendje? Na shkruani dhe përgjigjemi me një vlerësim konkret brenda një dite pune. [Kontakto →](https://sajdoko.al/kontakt/) ## Lini një koment [Anulo](https://sajdoko.al/blog/krijimi-i-nje-sistemi-filtrimi-produktesh-ne-kohe-reale-me-livewire-ne-laravel/?format=markdown#respond) ## Postime Së Fundi - [Softuer për menaxhimin e flotës: çfarë ju duhet përveç GPS-it?](https://sajdoko.al/blog/softuer-menaxhimi-flotes-pervec-gps/) - [CRM me porosi apo platformë standarde SaaS: Llogaritja e kostove dhe efikasitetit për biznesin](https://sajdoko.al/blog/crm-me-porosi-apo-platforma-standarde-per-biznesin/) - [Zhvillimi software nearshore në Shqipëri: Pse kompanitë evropiane po zgjedhin inxhinierët shqiptarë](https://sajdoko.al/blog/zhvillimi-software-nearshore-ne-shqiperi-avantazhet-e-tregut/) - [Integrimi i pagesave me kartë në Shqipëri (2026): krahasimi i bankave, komisionet dhe si funksionon teknikisht](https://sajdoko.al/blog/pagesa-online-me-karte-shqiperi/) - [Optimizimi i arkëtimit dhe performancës në WooCommerce: Si të eliminoni vonesat gjatë blerjes](https://sajdoko.al/blog/optimizimi-i-checkout-dhe-ngarkeses-ne-woocommerce/) ## Komente Së Fundi S’ka komente për shfaqje.