Intro:
The steps that we shall follow to enable the deletion of a product, are similar to some of the steps that we have taken to implement the editing feature.
- First, we shall create a route to make a delete request
- Then create a function inside the ProductsController to actually delete the product
- Finally, we shall call the delete route on clicking the delete button. This step is going to be a little different, you’ll realize by the end.
So let’s get started-
Steps:
1. Create a route to handle delete: Create a route similar to the one we created for edit, but call the function post() instead of get(). To the second parameter pass the name of the ProductsController class and the name of the function we want to execute, let’s pass ‘destroy’. We don’t yet have this function inside the ProductsController, we shall create it next. Route::post('/delete/{id}',[ProductsController::class,'destroy'])->middleware('auth');
2. Create a function inside the ProductsController to delete a product, name it destroy($id) add a parameter for the id of the product. public function destroy($id) { } Find the product by id, public function destroy($id) { $product=Product::find($id); } Finally, call the function delete() on the product model. After deletion, we shall load the dashboard page of the user. We can redirect the user to one of the controller action, the action we are interested in is showOwnProducts . To redirect the user to this action we have to call redirect()→action([ProductsController::class, 'showOwnProducts']) ****and pass the name of the controller and the name of the action the way we have been doing in the route file. public function destroy($id) { $product=Product::find($id); $product->delete(); return redirect()->action([ProductsController::class, 'showOwnProducts']); }
The complete code of the ProductsController looks like this:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use App\Models\Product;
class ProductsController extends Controller
{
//fetch products from the database
public function index()
{
$products=Product::orderBy('created_at','desc')->simplePaginate(15);
return view('products')->with('products',$products);
}
//fetch products by the seller id
public function showOwnProducts(){
$products=Product::where('user_id',Auth::id())->orderBy('created_at','desc')->simplePaginate(15);
return view('dashboard')->with('products',$products);
}
//Fetch a product by ID
public function show($id)
{
$product=Product::find($id);
return view('product')->with("product",$product);
}
//Load edit product form
public function edit($id)
{
$product=Product::find($id);
return view('edit')->with("product",$product);
}
//Add product information to the database
public function store(Request $request){
//validate the incoming data
$request->validate([
'title'=>'required',
'desc-sm'=>'required',
'desc-full'=>'required',
'price'=>'required|numeric',
'img'=>'required'
],
[
'title.required'=>'Please enter a title',
'desc-sm.required'=>'Please enter a short description',
'desc-full.required'=>'Please enter a full description',
'price.required'=>'Please enter the product price',
'price.numeric'=>'The price should be a number',
'img.required'=>'Please upload an image',
],
[
]);
//upload the image
$path = $request->file('img')->store('product_images');
//submit data
$product=new Product();
$product->title=$request->input('title');
$product->short_desc=$request->input('desc-sm');
$product->long_desc=$request->input('desc-full');
$product->price=$request->input('price');
$product->image_url=$path;
$product->user_id=Auth::id();
$product->save();
return redirect('/product/'.$product->id);
}
//Update the information of the product having the specified ID
public function update(Request $request,$id)
{
//validate
$request->validate([
'price'=>'numeric',
]);
//The the product by id
$product=Product::find($id);
//Check if an image is uploaded
if($request->hasFile('img'))
{
//upload the image
$path = $request->file('img')->store('product_images');
$product->image_url=$path;
}
//If title is not empty update
if(!empty($request->input('title')))
{
$product->title=$request->input('title');
}
//If short desc is not empty update
if(!empty($request->input('desc-sm')))
{
$product->short_desc=$request->input('desc-sm');
}
//If description is not empty update
if(!empty($request->input('desc-full')))
{
$product->long_desc=$request->input('desc-full');
}
//If price is not empty update
if(!empty($request->input('price')))
{
$product->price=$request->input('price');
}
$product->save();
return redirect('/product/'.$product->id);
}
//delete the product by id
public function destroy($id)
{
$product=Product::find($id);
$product->delete();
return redirect()->action([ProductsController::class, 'showOwnProducts']);
}
}3. Enclose the delete button inside a form and include a CSRF token: To protect the deletion operation from CSRF attacks we shall create the delete button in form of a form.
We shall create a form, specify the method to be POST, and action to be the route for delete. And add an input element of type submit, add all the classes we added earlier, and add ‘Delete’ as the value. Also add the @csrf directive.<form method="POST" action="/delete/{{$product->id}}"> @csrf <input type="submit" class="bg-red-300 rounded-full px-4 py-2 ml-1 shadow text-xs text-white" value="Delete"/> </form>
<x-base-layout>
<!-- Main content -->
<div class="flex m-4">
<!-- Left half -->
<div class="w-1/2 rounded overflow-hidden shadow">
<img class="object-cover w-full h-96" src="{{asset($product->image_url)}}"/>
</div>
<!-- Right half -->
<div class="w-1/2 rounded bg-white ml-2 p-6 shadow relative">
@if(Auth::id()==$product->user->id)
<div class="flex">
<a href="/edit/{{$product->id}}">
<div class="bg-blue-500 rounded-full px-4 py-2 shadow text-xs text-white">
Edit
</div>
</a>
<form method="POST" action="/delete/{{$product->id}}">
@csrf
<input type="submit" class="bg-red-300 rounded-full px-4 py-2 ml-1 shadow text-xs text-white" value="Delete"/>
</form>
</div>
@endif
<div class="font-semibold">{{$product->title}}</div>
<div class="text-sm text-gray-500">{{$product->short_desc}}</div>
<div class="text-xs text-gray-500 mt-2">{{$product->long_desc}}</div>
<!-- Seller Information -->
<div class="mt-4">
<div class="text-xs text-gray font-semibold">Sold by:</div>
<div class="text-sm text-gray-500">{{$product->user->name}}</div>
</div>
<div class="mt-2">
<div class="text-xs text-gray font-semibold">Phone number:</div>
@auth
<div class="text-sm text-gray-500">{{$product->user->phone}}</div>
@else
<div class="text-sm text-gray-500">**********<a href="/login" class="text-xs text-blue-500">(Login to view)</a></div>
@endauth
</div>
<div class="mt-2">
<div class="text-xs text-gray font-semibold">Email address:</div>
@auth
<div class="text-sm text-gray-500">{{$product->user->email}}</div>
@else
<div class="text-sm text-gray-500">**********<a href="/login" class="text-xs text-blue-500">(Login to view)</a></div>
@endauth
</div>
<!-- Product Price -->
<div class="absolute bottom-0 right-0 bg-green-500 px-4 py-2 m-6 rounded-full">
<div class="text-white font-bold text-sm">${{$product->price}}</div>
</div>
</div>
</div>
</x-base-layout>Now open the details page for a product and click the delete button.