سلام دوستان
قبل از شروع این آموزش و بررسی آن که چرا استفاده از Livewire در Laravel 8 رو به افزایش است، قصد داریم مقداری در رابطه با Livewire آشنایی بیشتری رو پیدا کنیم، در نظر بگیرید امروزه برای ساخت وب اپلیکیشن های مدرن استفاده از ابزار های قدرتمندی مانند Vue و React بسیار متداول شده است، اما تسلط به این ابزار روند کار یک توسعه دنده فول استک را کند و دیوانه کننده میکند. Livewire یک فریم ورک قدرتمند بر پایه Ajax بوده که برای لاراول توسعه داده شده و به کمک آن ساختن رابط های پویا در پروژه شما ساده می گردد، بدون آنکه نیاز به نوشتن حتی یک خط کد Javascript داشته باشید می توانید از Livewire در پروژه های لاراول خود استفاده نمایید.

با در نظر گرفتن این مقدمه کوتاه می خواهیم با یک مثال استفاده از Livewire را بررسی کنیم به Livewire خوش آمدید.

مرحله اول: نصب Laravel و نصب Livewire

می توانید لاراول را با اجرای دستور زیر نصب کنید:

[pastacode lang=”php” manual=”composer%20create-project%20–prefer-dist%20laravel%2Flaravel%20learn-livewire%0A” message=”” highlight=”” provider=”manual”/]

اکنون می توانیم livewire را در این پروژه نصب کنیم

[pastacode lang=”php” manual=”composer%20require%20livewire%2Flivewire” message=”” highlight=”” provider=”manual”/]

مرحله دوم: ایجاد یک Livewire Component

برای ایجاد یک counter component از دستور زیر استفاده کی کنیم:

[pastacode lang=”php” manual=”php%20artisan%20make%3Alivewire%20counter%0A” message=”” highlight=”” provider=”manual”/]

با اجرای دستور فوق دو فایل با نام های Counter.php و counter.blade.php ایجاد می گردد.

Counter.php یک کلاس component است. و در آن متد render تعریف شده است، اگر از قبل با لاراول آشنایی داشته باشید فایل counter.blade.php باید برای شما آشنا باشد، بله درست متوجه شدید livewire از موتور Blade که ما به آن عادت داریم استفاده می کند، که می توان آن را در مسیر resources/views/livewire بررسی نمود.

فایل Counter.php را بصورت زیر تغییر دهید:

[pastacode lang=”php” manual=”%3C%3Fphp%0A%0Anamespace%20App%5CHttp%5CLivewire%3B%0Ause%20Livewire%5CComponent%3B%0A%0Aclass%20Counter%20extends%20Component%0A%7B%0A%20%20%20%20public%20function%20render()%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20return%20view(‘livewire.counter’)%3B%0A%20%20%20%20%7D%0A%7D” message=”Counter.php” highlight=”” provider=”manual”/]

همانطور که مشاهده می کنید Livewire دقیقا از قواعد و اصول Laravel تبعیت میکند.

مرحله سوم: فایل Component View

محتویات فایل counter.blade.php بصورت زیر تغییر می دهیم

[pastacode lang=”php” manual=”%3Cdiv%3E%0A%20%20%20%20%3Cp%3ECounting%20…%200%3C%2Fp%3E%0A%20%20%20%20%3Cbutton%3E%2B%3C%2Fbutton%3E%0A%20%20%20%20%3Cbutton%3E-%3C%2Fbutton%3E%0A%3C%2Fdiv%3E” message=”counter.blade.php” highlight=”” provider=”manual”/]

حال برای لود کردن این Livewire در هر جای پروژه در View ها از کد زیر استفاده می کنیم

[pastacode lang=”php” manual=”%40livewire(‘counter’)” message=”” highlight=”” provider=”manual”/]

برای استفاده از Livewire در Laravel 8 دستور زیر را اجرا و خروجی کار را بررسی فرمایید

[pastacode lang=”php” manual=”php%20artisan%20serve” message=”” highlight=”” provider=”manual”/]

بسیار خوب تبریک می گم شما موفق شدین اولین Component را در Livewire با موفقیت اجرا کنید.

مرحله چهارم: داینامیک کردن Component

در این مرحله برای داینامیک کردن Component فایل Counter.php را بصورت زیر ویرایش می کنیم:

[pastacode lang=”php” manual=”%3C%3Fphp%0A%0Anamespace%20App%5CHttp%5CLivewire%3B%0Ause%20Livewire%5CComponent%3B%0A%0Aclass%20Counter%20extends%20Component%0A%7B%0A%20%20%20%20public%20%24count%20%3D%200%3B%0A%20%20%20%20public%20function%20increment()%20%7B%0A%20%20%20%20%20%20%20%20%24this-%3Ecount%20%2B%3D%201%3B%0A%20%20%20%20%7D%0A%20%20%20%20public%20function%20decrement()%20%7B%0A%20%20%20%20%20%20%20%20%24this-%3Ecount%20-%3D%201%3B%0A%20%20%20%20%7D%0A%20%20%20%20public%20function%20render()%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20return%20view(‘livewire.counter’)%3B%0A%20%20%20%20%7D%0A%7D” message=”counter.php” highlight=”” provider=”manual”/]

و نیز فایل counter.blade.php را بصورت زیر ویرایش می کنیم

[pastacode lang=”php” manual=”%3Cdiv%3E%0A%20%20%20%20%3Cp%3ECounting%20…%20%7B%7B%24count%7D%7D%3C%2Fp%3E%0A%20%20%20%20%3Cbutton%20wire%3Aclick%3D’increment’%3E%2B%3C%2Fbutton%3E%0A%20%20%20%20%3Cbutton%20wire%3Aclick%3D’decrement’%3E-%3C%2Fbutton%3E%0A%3C%2Fdiv%3E” message=”counter.blade.php” highlight=”” provider=”manual”/]

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

علاقه ام از سالها قبل برنامه نویسی تحت وب بوده و هست ، همیشه سعی می کنم علاقه مندی های خودم رو در ضمیه برنامه نویسی با همه به اشتراک بذارم، مطالب اینجا بتونه مشکل یه نفر رو هم برطرف کنه اون حس خوب رضایت رو در من بوجود میاره ;)

2 نظر برای استفاده از Livewire در Laravel 8 ارسال شده است.

  1. نادر

    عمل نکرد.چرا؟

  2. نادر

    اسکریپت لایووایر رو صدا باید بکنیم.الان شد

ارسال نظر