;

ننشئ واجهات جذابة وسهلة الاستخدام ...

مرحبًا بك!

نسعد بانضمامك إلينا ونتمنى لك تجربة مميزة.

تطوير الويب
تطوير الويب
التسويق عبر الويب
التسويق عبر الويب
الدعم الفني
الدعم الفني
استضافه المواقع
استضافه المواقع

معلومات التواصل

وسائل التواصل

خطوة - NextStep | اكتشف لارافيل لايفواير | تطوير واجهات تفاعلية بسهولة

تعرف على لارافيل لايفواير، المكتبة الرائعة لتطوير واجهات تفاعلية بسهولة وسرعة، بدون الحاجة لكتابة جافاسكريبت كثير.

خطوة - NextStep | اكتشف لارافيل لايفواير | تطوير واجهات تفاعلية بسهولة
خطوة - NextStep | اكتشف لارافيل لايفواير | تطوير واجهات تفاعلية بسهولة

🚀 Laravel Livewire

ثورة في تطوير الويب بـ PHP فقط - بدون JavaScript!

بناء واجهات تفاعلية ديناميكية كما في React أو Vue، ولكن باستخدام PHP بحت!

🤔 ما هو Livewire بالضبط؟

Livewire هو مكتبة مفتوحة المصدر لإطار عمل Laravel تسمح لك ببناء واجهات ويب تفاعلية وديناميكية باستخدام PHP فقط، دون الحاجة لكتابة أي كود JavaScript.

🔍 فكرة عمل Livewire:

// Livewire يعمل كجسر بين PHP و JavaScript 1. تكتب الكود بـ PHP (المتحكم + العرض) 2. Livewire يترجمه تلقائياً لـ JavaScript 3. المستخدم يتفاعل مع الواجهة 4. البيانات تذهب للخادم وتعود تلقائياً 5. الواجهة تتحدد دون تحديث الصفحة

🎯 ليه تختار Livewire؟

✅ لا حاجة لـ JavaScript

ابن تطبيقات كاملة بـ PHP فقط

⚡ تطوير أسرع

لا تنتقل بين اللغات، ركز على PHP

🔗 تكامل تام

يعمل مع Eloquent, Blade, Validation

🔄 تحديثات حية

تحديث البيانات دون تحديث الصفحة

🚀 كيف تبدأ؟ - خطوة بخطوة

الخطوة 1: التثبيت

composer require livewire/livewire

الخطوة 2: تضمين Livewire في مشروعك

<head> @livewireStyles </head> <body> // محتوى موقعك @livewireScripts </body>

الخطوة 3: إنشاء أول مكون Livewire

php artisan make:livewire Counter
ملاحظة: هذا الأمر ينشئ ملفين تلقائياً:
• app/Http/Livewire/Counter.php (الكلاس)
• resources/views/livewire/counter.blade.php (العرض)

💡 مثال عملي: عداد تفاعلي

الجزء 1: الكلاس (PHP)


<?php 
namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component 
{ 
    public $count = 0;

    public function increment() 
    { 
        $this->count++; 
    } 

    public function decrement() 
    { 
        $this->count--; 
    } 

    public function resetCounter() 
    { 
        $this->count = 0; 
    }

    public function render() 
    { 
        return view('livewire.counter'); 
    } 
}
?>

الجزء 2: العرض (Blade)


            <div style="text-align: center; padding: 20px;">

                <h1 style="font-size: 3em; color: #ff2d20;">{{ $count }}</h1>

                <button wire:click="increment" style="background: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px; margin: 5px;">➕ زيادة</button>

                <button wire:click="decrement" style="background: #f44336; color: white; padding: 10px 20px; border: none; border-radius: 5px; margin: 5px;">➖ نقصان</button>

                <button wire:click="resetCounter" style="background: #ff9800; color: white; padding: 10px 20px; border: none; border-radius: 5px; margin: 5px;">🔄 إعادة تعيين</button>

            </div>

الجزء 3: الاستخدام في أي صفحة

<livewire:counter />

🎮 أهم أوامر Livewire

🖱️ wire:click

تنفيذ دورة عند النقر

<button wire:click="doSomething">انقر هنا</button>

📝 wire:model

ربط البيانات ثنائي الإتجاه

<input type="text" wire:model="name"><p>مرحباً {{ $name }}</p>

📤 wire:submit

عند إرسال النموذج

<form wire:submit.prevent="save"><button type="submit">حفظ</button></form>

⏳ wire:loading

عرض محتوى أثناء التحميل

<div wire:loading>جاري التحميل...</div>

🔥 مثال متقدم: بحث لحظي في المنتجات

الكلاس (PHP)


<?php 
namespace App\Http\Livewire; 

use Livewire\Component; 
use App\Models\Product; 

class ProductSearch extends Component 
{ 
    public $search = ''; 
    public $products = []; 

    public function updatedSearch() 
    { 
        $this->products = Product::where('name', 'like', '%'.$this->search.'%')
            ->orWhere('description', 'like', '%'.$this->search.'%')
            ->limit(10)
            ->get(); 
    } 

    public function render() 
    { 
        return view('livewire.product-search'); 
    } 
} 
?>

العرض (Blade)


          <div> 
              <input type="text" wire:model="search" placeholder="ابحث في المنتجات..." style="width: 100%; padding: 10px; margin-bottom: 20px;"> 

              <div wire:loading>🔍 جاري البحث...</div> 

              <div wire:loading.remove> 
                  @foreach($products as $product) 
                      <div class="product-item"> 
                          <h3>{{ $product->name }}</h3> 
                          <p>{{ $product->description }}</p> 
                          <span>السعر: ${{ $product->price }}</span> 
                      </div> 
                  @endforeach 

                  @if($search && $products->isEmpty()) 
                      <p>لا توجد نتائج للبحث "{{ $search }}"</p> 
                  @endif 
              </div> 
          </div>

💡 نصائح ذهبية للمبتدئين

1. ابدأ بالمشاريع الصغيرة

لا تبدأ بمشروع ضخم، جرب العداد، نموذج الاتصال، قائمة المهام أولاً

2. استخدم wire:model.defer للأداء

للتحديثات غير الحرجة، استخدم defer لتأجيل الإرسال للخادم

<input type="text" wire:model.defer="username">

3. تعلم دورة حياة المكون

افهم الدوال مثل mount(), hydrate(), updated()

public function mount() { // تنفذ مرة واحدة عند تحميل المكون } public function updated($propertyName) { // تنفذ عند تحديث أي خاصية }

🎯 متى تستخدم Livewire؟

✅ نعم - استخدم Livewire

  • لوحات التحكم والإدارة
  • النماذج المعقدة
  • التطبيقات الداخلية
  • مواقع المحتوى الديناميكي
  • عندما تريد تطوير سريع

❌ لا - تجنب Livewire

  • التطبيقات شديدة التفاعل (مثل Figma)
  • الألعاب في المتصفح
  • عندما تحتاج تحكم كامل في الـ DOM
  • إذا كان فريقك يتقن JavaScript جيداً

🏆 الخلاصة

Livewire غير طريقة تطوير الويب بـ Laravel وجعل بناء التطبيقات التفاعلية أسهل وأسرع!

المميز الأهم: يمكنك بناء تطبيقات ويب حديثة وتفاعلية وأنت تركز على لغة PHP فقط التي تعرفها وتحبها!