Laravel Project
In this Laravel project tutorial we will create an edit action button for the todo tasks.
In the previous tutorial we created the Edit form for the todo task. Now we will add an edit action button that will take us to the edit page.
Open the app.blade.php file that is inside the resources/views/layouts directory.
app.blade.php
resources/views/layouts
In the head add the font awesome CSS file.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
Open the home.blade.php file and add the edit button using the following HTML code.
home.blade.php
<div> <a data-toggle="collapse" href="#collapse-id-{{ $todo->id }}">{{ $todo->title }}</a> <div class="btn-group btn-group-sm float-right" role="group" aria-label="Basic example"> <a href='/todo/{{ $todo->id }}' class="btn btn-secondary"><i class="fa fa-pencil"></i></a> </div> </div>
So, the home page will start to look like the following.
@extends('layouts.app') @section('title', '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 (count($todos) > 0) <ul class="list-group"> @foreach ($todos as $todo) <li class="list-group-item"> <div> <a data-toggle="collapse" href="#collapse-id-{{ $todo->id }}">{{ $todo->title }}</a> <div class="btn-group btn-group-sm float-right" role="group" aria-label="Basic example"> <a href='/todo/{{ $todo->id }}' class="btn btn-secondary"><i class="fa fa-pencil"></i></a> </div> </div> <div class="collapse" id="collapse-id-{{ $todo->id }}"> <div class="card card-body"> <div class="todo-description">{{ $todo->description }}</div> <hr> <p>Status: {{ $todo->status }}</p> <p title="{{ $todo->created_at }}">Created: {{ $todo->created_at->diffForHumans() }}</p> </div> </div> </li> @endforeach </ul> @else <p class="lead">No ACTIVE todo tasks</p> @endif </div> </div> </div> </div> @endsection
If we now open the home page we will get to see the following.
If the user clicks on the edit button then the todo task will be opened in the edit page.
Go ahead and add the edit button to the active.blade.php, done.blade.php and deleted.blade.php files.
active.blade.php
done.blade.php
deleted.blade.php
In case you need the code then please check my GitHub repository todo-laravel. You will find the code of this project there.
Alright, in the next tutorial we will handle the update request.
If you find the tutorials on this website helpful and interesting then please share the links.
See you in the next tutorial. Have fun coding :-)