Livewire, Laravel için dinamik sayfalar oluşturmanızı sağlayan pakettir. Vue, React jQuery gibi paketlere ihtiyac duymadan dinamik arayüzler oluşturur. Hemen kurulumuyla başlayalım;
composer require livewire/livewire npm install && npm run dev php artisan migrate
Jetstream ile sıfırdan bir projede yükleyecekseniz;
composer require laravel/jetstream php artisan jetstream:install livewire npm install && npm run dev php artisan migrate
Ana şablon blade dosyası;
//layouts/app.blade.php
<html>
<head>
...
@livewireStyles
</head>
<body>
{{ $slot }} //full page components
...
@livewireScripts
</body>
</html>
config ve diger kodları projenizde yayınlamak isterseniz;
php artisan livewire:publish --config php artisan livewire:publish --assets
Örnek bir component oluşturalım;
php artisan make:livewire Post\\Show php artisan make:livewire Post/Show php artisan make:livewire post.show
Bu üç komut da aynı işlemi yapar ve 2 dosya oluşturur.
-app/Http/Livewire/Post/Show.php
-resources/views/livewire/Post/Show.blade.php
Örnek Show.php dosyası;
class ShowPost extends Component
{
public $post;
public function mount(Post $post)
{
$this->post = $post;
}
}
Bu component’ı başka sayfalarda kullanacaksanız import işlemi şu şekilde yapılır;
//import component
<livewire:show-posts />
@livewire('show-posts')
<livewire:nav.show-posts />
//passing parameter
<livewire:show-post :post="$post">
@livewire('show-post', ['post' => $post])
Livewire’da route kullanımı;
Route::get('/post', ShowPosts::class);
Route::get('/post/{id}', ShowPost::class);
Form Örneği
<form wire:submit.prevent="save">
<input type="text" wire:model="post.title">
<textarea wire:model="post.content"></textarea>
<button type="submit">Save</button>
</form>
Validation İşlemi;
use App\Post;
class PostForm extends Component
{
public Post $post;
protected $rules = [
'post.content' => 'required|string|max:500',
];
public function save()
{
$this->validate();
$this->post->save();
}
}
Detaylı Validation
public $email;
protected $rules = [
'email' => 'required|email',
];
protected $messages = [
// 'name.required' => 'The :attribute cannot be empty.',
'email.required' => 'The Email Address cannot be empty.',
'email.email' => 'The Email Address format is not valid.',
];
protected $validationAttributes = [
'email' => 'email address'
];
public function updated($propertyName)
{
$this->validateOnly($propertyName);
}
public function saveContact()
{
$validatedData = $this->validate();
Contact::create($validatedData);
}
Real-time validation yapmak için updated metodları tanımlanır, Böylelikle her değer değiştiğinde validation kuralları tetiklenir.
protected $rules = [
'name' => 'required',
'phone' => 'required|min:3|max:15',
'status' => 'required',
];
public function updated($propertyName)
{
$this->validateOnly($propertyName);
}
public function store()
{
$contact = $this->validate();
$contact = Contact::create([
'name' => $this->name,
'phone' => $this->phone,
'status' => $this->status
]);
$this->resetInput();
session()->flash('message', 'Contact ' . $contact['name'] . ' was created');
return redirect()->to('/contacts');
}
Event Aksiyonlar
<button wire:click="doSomething">Do Something</button>
<input wire:keydown.enter="doSomething">
<form wire:submit.prevent="save"><button>Save</button></form>
//passing parameter
<button wire:click="addTodo({{ $todo->id }}, '{{ $todo->name }}')">Add Todo</button>
public function addTodo($id, $name){ ... }
public function addTodo(Todo $todo, $name){ ... }
Default şablonu değiştirme;
Varsayılan olarak resources/views/layouts/app.blade.php şablonu kullanılır. Bunu değiştirmek için view metoduna aşağıdaki gibi düzenleme yapılır;
class ShowPosts extends Component
{
...
public function render()
{
return view('livewire.show-posts')
->layout('layouts.base');
}
}
İlk Yorumu Siz Yapın