Kuchwizzy
JF-Expert Member
- Oct 1, 2019
- 1,072
- 2,308
Tangu nianze kuitumia kwenye baadhi ya projects, imetokea kuwa my favorite
Ni recommended zaidi kwa PHP dev ambaye hutaki Kuhangaika na Javascript na mda huo huo unataka kutengeneza Rich user experience kwenye web app yako.
Warning
Hii quick guide, sio beginners friendly ina assume msomaji angalau ni intermediate Laravel dev.
Overview
Livewire ni Laravel Package inayokuwezesha kutengeneza Dynamic User Interface (Part ya UI inayo interact na mtumiaji in real time) bila kuhitaji msaada wowote wa Javascript au Javascript frameworks kama Vuejs na React
Architecture
Architecture ya Livewire ni rahisi mno, kimsingi Livewire ina divide User Interface ya application into components
Kama ilivyo Vuejs na React, ila tofauti ni kwamba components za Livewire ni PHP Classes na sio Javascript functions
Kila component ina its own state na methods au actions zinazo tumika ku access na ku modify hio state.
Installation
Kama tayari una Laravel project, run hii command kwenye root directory ya project yako
Baada ya installation kukamilika, tengeneza blade file lenye jina la livewire-example.blade.php ndani ya resources/views folder
Kisha add hizi blade directives kama ifuatavyo
Hizo directives mbili zinaenda ku include CSS na Javascript codes zinazotumiwa na Livewire behind the scene
Baada ya hapo, run hii artisan command kuunda Livewire component
Hii command itaenda ku generates files mbili kwenye project yako
Moja Post.php na lingine post.blade.php
Post.php lina act kama logic layer ya component yako, huku post.blade.php lita act kama presentation layer au view
Kwenye Post.php utakutana na codes za namna hii
render method inahusika ku render component yako kwenye DOM
post.blade.php lenyewe halina chochote kwa sasa zaidi ya empty div tags
kuona nini tunaweza fanya kwa kutumia livewire, tunaweza tengeneza Model na some testing data za kutumia
Run hii artisan command ku generate Model Class na migration file kwa ajiri ya Database
Then, ku generate testing data, tuta generate Seeder
Fungua posts_table migration file, then add hizi lines of code,
Tume keep our database simple, just table moja ya post, post ina title na _description _
Then, ku populate database yetu with testing data, add hizi codes ndani ya run method ya PostTableSeeder.php
Usisahau ku import Post Model
Kwenye Post Model, specify which attributes ni mass assignable
Kwenye case yetu ni title na description
So
Then kwenye DatabaseSeeder.php add hii line of code
Now, run hizi commands
Sasa tunaweza rudi kwenye components yetu na kuanza kuitumia
Kwa mfano, tunaweza display list of posts kwenye view kama ifuatavyo
Ndani ya render method
Then kwenye post.blade.php component tunaweza ku access hizi data kwa kutumia foreach directive
Kisha include component yako kwenye livewire-example.blade.php
Then kwenye web.php file, add this
Then uki visit, localhost:8000/livewire-example utaona posts zako
Kitu kizuri kuhusu livewire, ni kwamba huhitaji controller tena
Let say tunataka tu delete post, kitu pekee tutakacho fanya ni ku add method kwa ajiri ya hilo action
Mfano kabla ya render method, add
Mechanism
Behind the scene, Livewire inatumia AJAX kuzungumza na web server, kisha inafanya kazi ya ku mutates DOM kila state au data kwenye app yako inapo change bila ya wewe kuhofu.
Kuna vitu vingi sana vikubwa unaweza kuvifanya with Livewire, kama upo interested visit hapa
Laravel Livewire Documentation
Kama upo interested na Livewire au Programming in general na ungependa ujifunze zaidi just leave a comment
Full stack developer, 0748333586
Ni recommended zaidi kwa PHP dev ambaye hutaki Kuhangaika na Javascript na mda huo huo unataka kutengeneza Rich user experience kwenye web app yako.
Warning
Hii quick guide, sio beginners friendly ina assume msomaji angalau ni intermediate Laravel dev.
Overview
Livewire ni Laravel Package inayokuwezesha kutengeneza Dynamic User Interface (Part ya UI inayo interact na mtumiaji in real time) bila kuhitaji msaada wowote wa Javascript au Javascript frameworks kama Vuejs na React
Architecture
Architecture ya Livewire ni rahisi mno, kimsingi Livewire ina divide User Interface ya application into components
Kama ilivyo Vuejs na React, ila tofauti ni kwamba components za Livewire ni PHP Classes na sio Javascript functions
Kila component ina its own state na methods au actions zinazo tumika ku access na ku modify hio state.
Installation
Kama tayari una Laravel project, run hii command kwenye root directory ya project yako
Code:
composer require livewire/livewireBaada ya installation kukamilika, tengeneza blade file lenye jina la livewire-example.blade.php ndani ya resources/views folder
Kisha add hizi blade directives kama ifuatavyo
Code:
<head> @livewireStyles</head>
<body> @livewireScripts</head>Hizo directives mbili zinaenda ku include CSS na Javascript codes zinazotumiwa na Livewire behind the scene
Baada ya hapo, run hii artisan command kuunda Livewire component
Code:
php artisan make:livewire PostHii command itaenda ku generates files mbili kwenye project yako
Moja Post.php na lingine post.blade.php
Post.php lina act kama logic layer ya component yako, huku post.blade.php lita act kama presentation layer au view
Kwenye Post.php utakutana na codes za namna hii
Code:
namespace App\Http\Livewire',
use Livewire\Component',
class Post extends Component
{
public function render()
{
return view('livewire.post')',
}
}post.blade.php lenyewe halina chochote kwa sasa zaidi ya empty div tags
Code:
<div> </div>kuona nini tunaweza fanya kwa kutumia livewire, tunaweza tengeneza Model na some testing data za kutumia
Run hii artisan command ku generate Model Class na migration file kwa ajiri ya Database
Code:
php artisan make:model Post -mThen, ku generate testing data, tuta generate Seeder
Code:
php artisan make:seeder PostTableSeederFungua posts_table migration file, then add hizi lines of code,
Code:
$table->string('title')',
$table->text('description')',Tume keep our database simple, just table moja ya post, post ina title na _description _
Then, ku populate database yetu with testing data, add hizi codes ndani ya run method ya PostTableSeeder.php
Code:
$posts = [
[
'title' => 'Python',
'description' => 'General purpose programming language widely used in data science and AI'
],
[
'title' => 'PHP',
'description' => 'A server side scripting language widely used in web development '
]
]',
foreach($posts as $post) {
Post::create($post)
}Usisahau ku import Post Model
Kwenye Post Model, specify which attributes ni mass assignable
Kwenye case yetu ni title na description
So
Code:
protected $fillable = ['title', 'description ']',Then kwenye DatabaseSeeder.php add hii line of code
Code:
$this->call(PostTableSeeder::class) ',Now, run hizi commands
Code:
php artisan migrate && php artisan db:seedSasa tunaweza rudi kwenye components yetu na kuanza kuitumia
Kwa mfano, tunaweza display list of posts kwenye view kama ifuatavyo
Ndani ya render method
Code:
public function render() {
$posts = Post::all()',
return view('livewire.post', ['posts => $posts])',
}Then kwenye post.blade.php component tunaweza ku access hizi data kwa kutumia foreach directive
Code:
<div>
@foreach($posts as $post)
<div><h1>$post->title</h1></div>
@endforeach
</div>Kisha include component yako kwenye livewire-example.blade.php
Code:
<body>
@livewire('post')
</body>Then kwenye web.php file, add this
Code:
Route::get('/livewire-example', function () {
return view('livewire-exampe) ',
})',Then uki visit, localhost:8000/livewire-example utaona posts zako
Kitu kizuri kuhusu livewire, ni kwamba huhitaji controller tena
Let say tunataka tu delete post, kitu pekee tutakacho fanya ni ku add method kwa ajiri ya hilo action
Mfano kabla ya render method, add
Code:
public function deletePost($id)
{
Post::findOrFail($id) ->delete()',
}Mechanism
Behind the scene, Livewire inatumia AJAX kuzungumza na web server, kisha inafanya kazi ya ku mutates DOM kila state au data kwenye app yako inapo change bila ya wewe kuhofu.
Kuna vitu vingi sana vikubwa unaweza kuvifanya with Livewire, kama upo interested visit hapa
Laravel Livewire Documentation
Kama upo interested na Livewire au Programming in general na ungependa ujifunze zaidi just leave a comment
Full stack developer, 0748333586
