🎯 මෙම මොඩියුලයේ ඉලක්කය:
JavaScript කේත විශාල ප්රමාණයක් ලිවීමෙන් තොරව, React හෝ Vue වැනි නවීන JavaScript රාමු මගින් ලැබෙන ගතික, තත්ය කාලීන පරිශීලක අත්දැකීමක්, Laravel Livewire නම් ප්රබල මෙවලම භාවිතයෙන් නිර්මාණය කිරීමට ඉගෙන ගැනීම.
Livewire component එකක් යනු PHP class එකක් සහ ඊට අදාළ Blade view ගොනුවක් යන දෙකේ එකතුවකි. Artisan විධානයකින් මෙය පහසුවෙන් සාදාගත හැක.
Livewire ස්ථාපනය කිරීම:
composer require livewire/livewire
Component එක සෑදීම:
php artisan make:livewire PointOfSale
මෙම විධානයෙන් පසුව ගොනු දෙකක් සෑදේ:
- PHP Class: `app/Livewire/PointOfSale.php`
- Blade View: `resources/views/livewire/point-of-sale.blade.php`
⭐ ප්රායෝගික පැවරුම: Livewire POS Component එක ගොඩනැගීම
පියවර 1: PHP Class එක (`PointOfSale.php`) සැකසීම
මෙම class එක තුළ අපගේ POS පද්ධතියේ සියලුම තර්කනය (logic) සහ දත්ත (properties) අඩංගු වේ.
// In app/Livewire/PointOfSale.php
namespace App\Livewire;
use Livewire\Component;
use App\Models\Product;
class PointOfSale extends Component
{
public $search = '';
public $cart = [];
public $total = 0;
public function addItem(Product $product)
{
// Logic to add product to cart array
// ...
$this->calculateTotal();
}
public function calculateTotal()
{
// Logic to calculate grand total
// ...
}
public function processSale()
{
// Logic to save sale details to the database (sales, sale_items tables)
// ...
$this->reset(); // Clear state after sale
}
public function render()
{
$products = $this->search === ''
? collect()
: Product::where('name', 'like', '%' . $this->search . '%')->get();
return view('livewire.point-of-sale', [
'products' => $products
]);
}
}
පියවර 2: Blade View එක (`point-of-sale.blade.php`) සැකසීම
මෙම view එක තුළ පරිශීලකයා දකින අතුරුමුහුණත සහ Livewire directives අඩංගු වේ.
<!-- In resources/views/livewire/point-of-sale.blade.php -->
<div>
<!-- Search Input -->
<input type="text" wire:model.live="search" placeholder="Search products...">
<!-- Search Results -->
<ul>
@foreach($products as $product)
<li wire:click="addItem({{ $product->id }})">{{ $product->name }}</li>
@endforeach
</ul>
<!-- Cart Items -->
<h3>Cart</h3>
<table>
@foreach($cart as $item)
<tr><td>{{ $item['name'] }}</td> <!-- ... --> </tr>
@endforeach
</table>
<h4>Total: {{ $total }}</h4>
<button wire:click="processSale">Complete Sale</button>
</div>
පියවර 3: Component එක ප්රධාන View එකට ඇතුළත් කිරීම
අවසාන වශයෙන්, `pos.blade.php` වැනි ප්රධාන view ගොනුවක් සාදා, එහි Livewire component එක ඇතුළත් කරන්න.
<!-- In resources/views/pos.blade.php -->
<x-app-layout>
<div class="container">
@livewire('point-of-sale')
</div>
</x-app-layout>
`routes/web.php` ගොනුවේ මෙම `pos` view එකට route එකක් සාදා පිවිසෙන්න. දැන් ඔබට පිටුව reload නොවී, තත්ය කාලීනව නිෂ්පාදන සෙවීමට සහ බිල්පතට එකතු කිරීමට හැකි වනු ඇත!