Laravel Project
In this Laravel project tutorial we will create delete action button for the todo tasks.
The purpose of this delete button is to permanently delete a todo task from our database.
Open home.blade.php file which is inside the resources/views directory and create the delete button.
home.blade.php
resources/views
<button class="btn btn-secondary todo-delete-btn" data-id="{{ $todo->id }}"><i class="fa fa-trash"></i></button>
So, our home page code 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> <button class="btn btn-secondary todo-delete-btn" data-id="{{ $todo->id }}"><i class="fa fa-trash"></i></button> </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 visit the home page we will get to see the delete button.
script.js
For this example we will using JavaScript code to handle the click event and also make AJAX request to delete the todo tasks.
Create a new file script.js inside the public/js directory.
public/js
The public directory includes all the assets such as images, JavaScript, and CSS. The index.php file inside the public directory is the entry point for all the requests entring our Laravel application.
public
index.php
Since the delete button will be included in all the pages for all the todo tasks so, it is better that we include it inside the master layout app.blade.php file.
Open the app.blade.php file which is inside the resources/views/layouts directory and at the bottom of the page include this script.js file by writing the following line.
app.blade.php
resources/views/layouts
<script type="text/javascript" src="{{ asset('js/script.js') }}"></script>
And inside the head include the csrf-token meta tag.
csrf-token
<meta name="csrf-token" content="{{ csrf_token() }}">
This will be used by Laravel application to prevent CSRF attack.
We will handle click event using JavaScript code. So, open the script.js file that we created inside the public/js directory and write the following code.
Note! I am using jQuery for this.
$(function(){ // handle delete button click $('body').on('click', '.todo-delete-btn', function(e) { e.preventDefault(); // get the id of the todo task var id = $(this).attr('data-id'); // get csrf token value var csrf_token = $('meta[name="csrf-token"]').attr('content'); // now make the ajax request $.ajax({ 'url': '/todo/' + id, 'type': 'DELETE', headers: { 'X-CSRF-TOKEN': csrf_token } }).done(function() { console.log('Todo task deleted: ' + id); window.location = window.location.href; }).fail(function() { alert('something went wrong!'); }); }); });
In the above code we are taking the id of the todo task from the delete button's data-id attribute.
data-id
We are also taking the csrf-token content value from the meta tag.
Finally we are making an AJAX request to the /todo/id by sending DELETE request.
/todo/id
Note! We will work on the delete request handling code in the next tutorial.
Add the delete action button to all the todo lists in the active.blade.php, done.blade.php and deleted.blade.php file.
active.blade.php
done.blade.php
deleted.blade.php
See you in the next tutorial. Have fun developing.