سلام دوستان
قبل از شروع این آموزش و بررسی آن که چرا استفاده از 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 برای شما باز کنه.
موفق و پیروز باشید.
عمل نکرد.چرا؟
اسکریپت لایووایر رو صدا باید بکنیم.الان شد