Todo Laravel Project - Form to edit todo tasks

In this Laravel project tutorial we will create an edit form for the todo tasks.

In the previous tutorial we created the TodoController to fetch detail of a specific todo task by id using the getTodoById method. Feel free to check that out.

The edit form

Create a new file edit.blade.php inside the resources/views directory. This will hold the edit form.

@extends('layouts.app')

@section('title', 'Edit - Todo Laravel - Yusuf Shakeel')

@section('content')
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 offset-sm-3 col-md-6 offset-md-3">
      
      <div class="my-3">

        @if (isset($todo))

          <h3 class="text-center">Edit Todo #{{ $todo->id }}</h3>

          <form action="/todo/{{ $todo->id }}" method="POST">
            {{ csrf_field() }}

            {{ method_field('PUT') }}

            <!-- Todo title -->
            <div class="form-group">
              <label for="todo-title" class="control-label">Title</label>
              <input type="text" 
                     name="todo-title" 
                     id="todo-title" 
                     class="form-control" 
                     value="{{ $todo->title }}"
                     maxlength="100" 
                     required>
            </div>

            <!-- Todo description -->
            <div class="form-group">
              <label for="todo-description" class="control-label">Description</label>
              <textarea name="todo-description" 
                        id="todo-description" 
                        class="form-control" 
                        rows="3" 
                        maxlength="5000" 
                        required>{{ $todo->description }}</textarea> 
            </div>

            <!-- Todo status -->
            <div class="form-group">
              <label for="todo-status" class="control-label">Status</label>
              <select class="form-control" id="todo-status" name="todo-status" required>
                @foreach (['ACTIVE', 'DONE', 'DELETED'] as $status)
                  @if ($status === $todo->status)
                    <option value="{{ $status }}" selected>{{ $status }}</option>
                  @else
                    <option value="{{ $status }}">{{ $status }}</option>
                  @endif
                @endforeach
              </select>
            </div>

            <div class="form-group">
              <p>Created: {{ $todo->created_at }}</p>
              <p>Last modified: {{ $todo->updated_at }}</p>
            </div>

            <!-- button -->
            <div class="float-right">
              <button type="submit" class="btn btn-primary">Update</button>
            </div>
          </form>
        @else
        <p class="text-center">Todo task does not exists!</p>
        @endif

      </div>

    </div>
  </div>
</div>
@endsection

In the above view we will be passing $todo which will hold the details of a particular todo task.

Then we will access the properties like title by writing the following code $todo->title.

In the above HTML code we are creating title input field, description textarea and status of the todo task using HTML select element.

We are also populating the fields with the todo task detail.

Since HTML forms only support POST and GET, PUT and DELETE methods will be spoofed by automatically adding a _method hidden field to your form.
- laravel.com documentation.

So, we have add the {{ method_field('PUT') }} in the form which will become the following.

<input type="hidden" name="_method" value="PUT">

So, if this form is submitted by clicking the Update button then the data for this form will be sent to the /todo/id URL as a PUT request. Where, id will be the id of the todo tasks that is getting updated.

Right now we don't have the logic to handle the edit form submission. We will be solving this in the coming tutorial so, please bear with me.

Wiring the view and controller

Now, lets wire the above view with the TodoController that we created in the previous tutorial.

Open the TodoController.php file which is inside the app/Http/Controllers directory.

Inside the getTodoById method return the view edit.blade.php by writing the following code.

return view('edit', ['todo' => $result]);

The TodoController.php file will look like the following.

<?php

namespace App\Http\Controllers;

use App\Todo;
use Illuminate\Http\Request;

class TodoController extends Controller
{
    public function getTodoById($id)
    {
      $todo = new Todo();

      $result = $todo->find($id);

      // return $result;
      return view('edit', ['todo' => $result]);
    }
}

So, in the above code we are passing the fetched todo task detail $result to the edit.blade.php view.

The passed data is referred by the $todo variable in the edit.blade.php file.

Loading the edit page

If we now visit the 127.0.0.1:8000/todo/1 page we will get to see the edit form prepopulated with the detail of the todo task having id 1.

Alright, we are able to load the todo task detail based on the id.

Note! The only way we can access this page is by manually entering the URL of this page with a proper id.

In the next tutorial we will add action button to the todo task list. So, if the user clicks on the edit button they will land on this page.

See you in the next tutorial. Have fun coding :-)