Laravel Livewire Component ile Çok Fonksiyonlu Form Örneği

Herkese selamlar, bu yazıda oluşturacağımız bir Livewire Component ile hem oluşturma hem de düzenleme işlemlerini bir arada nasıl yapabileceğimizi göreceğiz. Önce boş bir proje oluşturarak hazırlığımızı yapalım.

composer create-project laravel/laravel livewire
cd livewire
composer require livewire/livewire
composer require laravel/ui
php artisan ui:auth bootstrap
# Yarn Kullanıyorsanız
yarn
yarn build
# NPM Kullanıyorsanız
npm run install
npm run build

composer create-project laravel/laravel livewire

cd livewire

composer require livewire/livewire

composer require laravel/ui

php artisan ui:auth bootstrap

# Yarn Kullanıyorsanız

yarn

yarn build

# NPM Kullanıyorsanız

npm run install

npm run build

Yukarıdaki komutları sırayla çalıştırdıysak elimizde boş bir projemiz oluşmuş demektir. Ardından Blog adında bir model ve onun için bir migration oluşturalım.

php artisan make:model Blog

1	php artisan make:model Blog

En yalın haliyle Blog model içeriği şu şekilde olabilir;

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Blog extends Model
{
    use HasFactory;

    protected $fillable = [
        'title',
        'content'
    ];
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Blog extends Model

{

use HasFactory;

protected $fillable = [

'title',

'content'

];

}

Ardından migration dosyamızı oluşturalım ve içeriğini güncelleyelim.

php artisan make:migration create_blogs_table

1	php artisan make:migration create_blogs_table

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('blogs', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('content');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('blogs');
    }
};

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

return new class extends Migration

{

/**

* Run the migrations.

public function up(): void

{

Schema::create('blogs', function (Blueprint $table) {

$table->id();

$table->string('title');

$table->text('content');

$table->timestamps();

});

}

/**

* Reverse the migrations.

public function down(): void

{

Schema::dropIfExists('blogs');

}

};

Tablolarımızı oluşturalım.

php artisan migrate

1	php artisan migrate

Şimdi de rota, controller ve view içeriklerimizi hazırlayalım.

php artisan make:controller BlogController

1	php artisan make:controller BlogController

<?php

namespace App\Http\Controllers;

use App\Models\Blog;

class BlogController extends Controller
{
    public function index()
    {
        $blogs = Blog::all();

        return view('blogs.index', compact('blogs'));
    }

    public function create()
    {
        $title = 'Create a New Blog';
        return view('blogs.form', compact('title'));
    }

    public function edit(Blog $blog)
    {
        $title = 'Edit a Blog';
        return view('blogs.form', compact('title', 'blog'));
    }
}

<?php

namespace App\Http\Controllers;

use App\Models\Blog;

class BlogController extends Controller

{

public function index()

{

$blogs = Blog::all();

return view('blogs.index', compact('blogs'));

}

public function create()

{

$title = 'Create a New Blog';

return view('blogs.form', compact('title'));

}

public function edit(Blog $blog)

{

$title = 'Edit a Blog';

return view('blogs.form', compact('title', 'blog'));

}

web.php içeriğine aşağıdaki satırları ekleyelim.

Route::get('/blogs', [App\Http\Controllers\BlogController::class, 'index'])->name('blogs.index');
Route::get('/blogs/create', [App\Http\Controllers\BlogController::class, 'create'])->name('blogs.create');
Route::get('/blogs/{blog}', [App\Http\Controllers\BlogController::class, 'edit'])->name('blogs.edit');

Route::get('/blogs', [App\Http\Controllers\BlogController::class, 'index'])->name('blogs.index');

Route::get('/blogs/create', [App\Http\Controllers\BlogController::class, 'create'])->name('blogs.create');

Route::get('/blogs/{blog}', [App\Http\Controllers\BlogController::class, 'edit'])->name('blogs.edit');

php artisan make:view blogs/index

1	php artisan make:view blogs/index

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header d-flex justify-content-between">
                        <span>{{ __('Blogs') }}</span>
                        <a href="{{ route('blogs.create') }}" class="btn btn-sm btn-success">Create a New Blog</a>
                    </div>

                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <td>Title</td>
                                            <td class="col-2">Actions</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($blogs as $blog)
                                            <tr>
                                                <td>{{ $blog->title }}</td>
                                                <td>
                                                    <a href="{{ route('blogs.edit', $blog) }}" class="btn btn-sm btn-info col-12">Edit</a>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td class="text-center" colspan="2">Henüz bir kayıt eklenmemiş.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@extends('layouts.app')

@section('content')

<span>{{ __('Blogs') }}</span>

<a href="{{ route('blogs.create') }}" class="btn btn-sm btn-success">Create a New Blog</a>

</div>

<thead>

<tr>

<td>Title</td>

<td class="col-2">Actions</td>

</tr>

</thead>

<tbody>

@forelse($blogs as $blog)

<tr>

<td>{{ $blog->title }}</td>

<td>

</td>

</tr>

@empty

<tr>

<td class="text-center" colspan="2">Henüz bir kayıt eklenmemiş.</td>

</tr>

@endforelse

</tbody>

</table>

</div>

@endsection

php artisan make:view blogs/form

1	php artisan make:view blogs/form

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header d-flex justify-content-between">
                        <span>{{ __($title) }}</span>
                        <a href="{{ route('blogs.index') }}" class="btn btn-sm btn-success">Blogs</a>
                    </div>

                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                @if(isset($blog))
                                    @livewire('Blogs.Form', ['blog' => $blog])
                                @else
                                    @livewire('Blogs.Form')
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@extends('layouts.app')

@section('content')

<span>{{ __($title) }}</span>

<a href="{{ route('blogs.index') }}" class="btn btn-sm btn-success">Blogs</a>

</div>

@if(isset($blog))

@livewire('Blogs.Form', ['blog' => $blog])

@else

@livewire('Blogs.Form')

@endif

</div>

@endsection

Artık view dosyalarımız da hazır olduğuna göre asıl konuya geçebiliriz. Öncelikle component dosyamızı oluşturalım.

php artisan make:livewire Blogs/Form

1	php artisan make:livewire Blogs/Form

Aşağıdaki gibi bir çıktı almış olmalısınız.

 COMPONENT CREATED  🤙

CLASS: app/Livewire/Blogs/Form.php
VIEW:  resources/views/livewire/blogs/form.blade.php

COMPONENT CREATED 🤙

CLASS: app/Livewire/Blogs/Form.php

VIEW: resources/views/livewire/blogs/form.blade.php

Ardından önce view içeriğini hazırlayalım.

<div>
    <div class="row mb-3">
        <label for="title" class="col-md-4 col-form-label text-md-end">{{ __('Title') }}</label>

        <div class="col-md-6">
            <input wire:model="title" id="title" type="text" class="form-control @error('title') is-invalid @enderror" name="title" value="{{ old('title') }}" required autocomplete="title" autofocus>

            @error('title')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>
    </div>

    <div class="row mb-3">
        <label for="content" class="col-md-4 col-form-label text-md-end">{{ __('Content') }}</label>

        <div class="col-md-6">
            <textarea wire:model="content" id="content" class="form-control @error('content') is-invalid @enderror" name="content" required autocomplete="content"></textarea>

            @error('content')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <button wire:click.prevent="save" class="btn btn-success d-block ms-auto">Save</button>
        </div>
    </div>
</div>

<div>

<label for="title" class="col-md-4 col-form-label text-md-end">{{ __('Title') }}</label>

@error('title')

<strong>{{ $message }}</strong>

</span>

@enderror

</div>

<label for="content" class="col-md-4 col-form-label text-md-end">{{ __('Content') }}</label>

@error('content')

<strong>{{ $message }}</strong>

</span>

@enderror

</div>

</div>

Şimdi son olarak component içeriğini hazırlayalım.

<?php

namespace App\Livewire\Blogs;

use App\Models\Blog;
use Livewire\Attributes\Rule;
use Livewire\Component;

class Form extends Component
{
    #[Rule('required|min:3|max:80')]
    public ?string $title = null;
    #[Rule('required|min:3|max:1000')]
    public ?string $content = null;

    public ?Blog $blog = null;

    public function mount(?Blog $blog = null){
        if ($blog && $blog->exists){
            $this->blog = $blog;
            $this->title = $blog->title;
            $this->content = $blog->content;
        }else{
            $this->blog = new Blog();
        }
    }

    public function render()
    {
        return view('livewire.blogs.form');
    }

    public function save(){
        $this->validate();

        $this->blog->fill([
            'title' => $this->title,
            'content' => $this->content,
        ])->save();

        $this->title = null;
        $this->content = null;

        return redirect()->route('blogs.index');
    }
}

<?php

namespace App\Livewire\Blogs;

use App\Models\Blog;

use Livewire\Attributes\Rule;

use Livewire\Component;

class Form extends Component

{

#[Rule('required|min:3|max:80')]

public ?string $title = null;

#[Rule('required|min:3|max:1000')]

public ?string $content = null;

public ?Blog $blog = null;

public function mount(?Blog $blog = null){

if ($blog && $blog->exists){

$this->blog = $blog;

$this->title = $blog->title;

$this->content = $blog->content;

}else{

$this->blog = new Blog();

}

public function render()

{

return view('livewire.blogs.form');

}

public function save(){

$this->validate();

$this->blog->fill([

'title' => $this->title,

'content' => $this->content,

])->save();

$this->title = null;

$this->content = null;

return redirect()->route('blogs.index');

}

Bu component içinde gördüğünüz gibi mount içinde $blog değerini dışarıdan alıyoruz veya kendimiz oluşturuyoruz. Böylelikle düzenleme veya oluşturma işlemlerinden hangisi için component çağrılırsa form içerikleri ona uygun şekilde hazırlanacağı için farklı amaçlar için kullanılmasında herhangi bir sakınca oluşmuyor.

Burada karşınıza çıkabilecek ilk farklılık doğrulama işleminde oluşturma ve düzenleme formları için farklı kuralların olabileceği durumu. Bunu da basit bir if kontrolü ile rahatlıkla yapabilirsiniz.

Faydalı olması dileğiyle..

Bir sonraki yazıda görüşmek üzere.

Laravel Livewire Component ile Çok Fonksiyonlu Form Örneği

İlk Yorumu Siz Yapın

Bir yanıt yazın Yanıtı iptal et