ساخت ماشین حساب با Livewire در لاراول

Livewire یکی از قدرتمندترین ابزارهای توسعه در لاراول است که به توسعه‌دهندگان امکان می‌دهد بدون نیاز به نوشتن جاوا اسکریپت، کامپوننت‌های تعاملی بسازند. در این مقاله، به طور گام‌به‌گام نحوه ساخت یک ماشین حساب با Livewire را توضیح می‌دهیم. این مقاله به شما کمک می‌کند تا یک برنامه کاربردی بسازید.

پیش‌نیازها

برای شروع، اطمینان حاصل کنید که:

• لاراول 11 را روی سیستم خود نصب کرده‌اید.
• Livewire 3.5 را در پروژه خود راه‌اندازی کرده‌اید.
• محیط توسعه‌ای مانند Laravel Valet یا XAMPP را در اختیار دارید.

نصب Livewire

اگر Livewire را نصب نکرده‌اید، کافی است دستور زیر را در ترمینال اجرا کنید:

composer require livewire/livewire

پس از نصب، با اجرای دستور زیر فایل‌های لازم را منتشر کنید:

php artisan livewire:install

ایجاد کامپوننت ماشین حساب

برای ساخت ماشین حساب، ابتدا یک کامپوننت جدید به نام Calculator ایجاد می‌کنیم:

php artisan make:livewire Calculator

این دستور دو فایل زیر را ایجاد می‌کند:

1. app/Livewire/Calculator.php
2. resources/views/livewire/calculator.blade.php

پیاده‌سازی منطق ماشین حساب

به فایل app/Livewire/Calculator.php بروید و کد زیر را جایگزین کنید:

namespace App\Livewire;

use Livewire\Component;

class Calculator extends Component
{
    public $number1 = 0;
    public $number2 = 0;
    public $result = 0;
    public $error = '';

    public function updated($propertyName)
    {
        $this->validateOnly($propertyName, [
            'number1' => 'nullable|numeric',
            'number2' => 'nullable|numeric',
        ]);
    }

    public function add()
    {
        $this->resetError();
        $this->result = $this->number1 + $this->number2;
    }

    public function subtract()
    {
        $this->resetError();
        $this->result = $this->number1 - $this->number2;
    }

    public function multiply()
    {
        $this->resetError();
        $this->result = $this->number1 * $this->number2;
    }

    public function divide()
    {
        $this->resetError();
        if ($this->number2 == 0) {
            $this->error = 'Division by zero is not allowed.';
            $this->result = null;
        } else {
            $this->result = $this->number1 / $this->number2;
        }
    }

    private function resetError()
    {
        $this->error = '';
    }

    public function render()
    {
        return view('livewire.calculator');
    }
}

طراحی رابط کاربری

در فایل resources/views/livewire/calculator.blade.php، کد زیر را جایگزین کنید:

<div class="p-4 bg-gray-100 rounded-lg shadow-md w-96 mx-auto text-center">
    <h2 class="text-xl font-bold mb-4">claculator</h2>
    
    <input type="number" wire:model.debounce.500ms="number1" class="border p-2 rounded w-full mb-2" placeholder="first number">
    <input type="number" wire:model.debounce.500ms="number2" class="border p-2 rounded w-full mb-2" placeholder="second number">
    
    <div class="mt-2 space-x-2">
        <button wire:click="add" class="bg-blue-500 text-white px-4 py-2 rounded">+</button>
        <button wire:click="subtract" class="bg-red-500 text-white px-4 py-2 rounded">-</button>
        <button wire:click="multiply" class="bg-green-500 text-white px-4 py-2 rounded">×</button>
        <button wire:click="divide" class="bg-yellow-500 text-white px-4 py-2 rounded">÷</button>
    </div>
    
    @if($error)
        <div class="mt-4 text-red-600">{{ $error }}</div>
    @else
        <div class="mt-4 text-lg font-semibold">result: <span>{{ $result }}</span></div>
    @endif
</div>

نمایش کامپوننت در صفحه اصلی

برای نمایش کامپوننت در صفحه اصلی، فایل resources/views/welcome.blade.php را ویرایش کنید و کد زیر را اضافه کنید:

@livewire('calculator')

نتیجه‌گیری

در این مقاله، نحوه ساخت یک ماشین حساب ساده اما کارآمد با استفاده از Livewire در لاراول را بررسی کردیم. این پروژه پایه‌ای را می‌توان گسترش داد و قابلیت‌هایی مانند تاریخچه محاسبات و ذخیره‌سازی نتایج را اضافه کرد.

آیا این مقاله برای شما مفید بود؟ اگر سؤالی دارید یا پیشنهاداتی برای بهبود این پروژه دارید، در بخش نظرات کداکسپرت با ما در میان بگذارید!