CRUD: Create Task Form

The final part of this simple CRUD is Create and Edit forms. They will be similar, with a few differences. Let's start with adding a new task.

Link to Create Task Page

First, let's create a new Livewire component and add a link above the table to lead to the task creation route.

php artisan make:livewire Tasks/Create

routes/web.php:

<?php
 
use App\Livewire\Tasks;
use App\Livewire\Settings\Appearance;
use App\Livewire\Settings\Password;
use App\Livewire\Settings\Profile;
use Illuminate\Support\Facades\Route;
 
Route::get('/', function () {
    return view('welcome');
})->name('home');
 
Route::view('dashboard', 'dashboard')
    ->middleware(['auth', 'verified'])
    ->name('dashboard');
 
Route::middleware(['auth'])->group(function () {
    Route::redirect('settings', 'settings/profile');
 
    Route::get('settings/profile', Profile::class)->name('settings.profile');
    Route::get('settings/password', Password::class)->name('settings.password');
    Route::get('settings/appearance', Appearance::class)->name('settings.appearance');
 
    Route::get('tasks', Tasks\Index::class)->name('tasks.index');
    Route::get('tasks/create', Tasks\Create::class)->name('tasks.create'); 
});
 
require __DIR__.'/auth.php';

resources/views/livewire/tasks/index.blade.php:

<section>
    <x-alerts.success />
 
    <div class="flex flex-grow gap-x-4 mb-4"> 
        <flux:button href="{{ route('tasks.create') }}" variant="filled">{{ __('Create Task') }}</flux:button>
    </div>
 
    // ...
</section>

This is the visual result:

Now, let's build the page for the Create form.

Create Task: Empty "Skeleton" Page

In the Livewire component, we have this:

app/Livewire/Tasks/Create.php:

use Livewire\Component;
use Illuminate\View\View;
 
class Create extends Component
{
    public function render(): View
    {
        return view('livewire.tasks.create');
    }
}

So, we can add input with a button and create a form.

resources/views/livewire/tasks/create.blade.php:

<section class="max-w-5xl">
    <form wire:submit="save" class="flex flex-col gap-6">
        <flux:input
            wire:model="name"
            :label="__('Task Name')"
            required
            badge="required"
        />
 
        <div>
            <flux:button variant="primary" type="submit">{{ __('Save') }}</flux:button>
        </div>
    </form>
</section>

Now, when we click the "Create Task" link/button, we will see the form:

Now, let's add public property and save the task.

Binding and Saving

First, we will add a name property with validation.

app/Livewire/Tasks/Create.php:

use Livewire\Attributes\Validate;
 
class Create extends Component
{
    #[Validate('required|string|max:255')]
    public string $name = ''; 
 
    public function render(): View
    {
        return view('livewire.tasks.create');
    }
}

Now, we can add a save() method to validate and create a task.

app/Livewire/Tasks/Create.php:

use App\Models\Task;
use Livewire\Component;
use Illuminate\View\View;
use Livewire\Attributes\Validate;
 
class Create extends Component
{
    #[Validate('required|string|max:255')]
    public string $name = '';
 
    public function save(): void 
    {
        $this->validate();
 
        Task::create([
            'name' => $this->name,
        ]);
 
        session()->flash('success', 'Task successfully created.');
 
        $this->redirectRoute('tasks.index', navigate: true);
    } 
 
    public function render(): View
    {
        return view('livewire.tasks.create');
    }
}

We haven't added anything to show validation messages in the View. This is because we used Flux for the input. Flux is built specifically for Livewire, so when there is a validation error, it will be shown.

After creating a new task, we get redirected to the table, where we see our new task with a success alert!

In the next lesson, we will build the Edit Task form.

The repository for this starter kit project section is here on GitHub.