We shall allow the user to edit and delete his own ads. With this you’ll also learn how to update and delete an item from the database using Eloquent models, I’ve already shown you how to read and create items, right. In this video, we shall display the edit and delete buttons on the product details page if the user viewing the page is the seller of the product.
1. First, open the file product.blade.php
2. At the top of the div for the right half we shall add an @if directive to check if Auth::id() is equal to the id of the seller of this product. @if(Auth::id()==$product→user→id) If this is true we shall display the buttons, otherwise, we’ll do nothing, so inside this if and the endif directives add div to contain the buttons, add class flex to it. @if(Auth::id()==$product->user->id) <div class="flex"> </div> @endif
Add two divs inside this div, add the texts for the buttons Edit and Delete.
3. Let’s add some classes to make these buttons beautiful: I’ll add bg-blue-500 to make the edit button blue, rounded-full to make the corners rounded, px-4 py-2 for some horizontal and vertical paddings, shadow let’s add some shadow, text-xs to make make the text smaller, text-white I’ll also make the text color white. Now add these to the edit button too, only changes that I’ll make are to change the background color to a little red with the class bg-red-300 and also add some margin to the left with ml-1 .
@if(Auth::id()==$product->user->id)
<div class="flex">
<div class="bg-blue-500 rounded-full px-4 py-2 shadow text-xs text-white">
Edit
</div>
<div class="bg-red-300 rounded-full px-4 py-2 ml-1 shadow text-xs text-white">
Delete
</div>
</div>
@endifThe complete code of the file product.blade.php currently looks like this .
<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">
<div class="bg-blue-500 rounded-full px-4 py-2 shadow text-xs text-white">
Edit
</div>
<div class="bg-red-300 rounded-full px-4 py-2 ml-1 shadow text-xs text-white">
Delete
</div>
</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>And if we open the details page for a product that has been posted by the logged in user, it look like this ….
Try changing the id on the URL, or opening this page for other products to see whether the buttons become invisible for the products added by other users.
And it works, so we don’t see the buttons on other’s products. Now let’s wrap these buttons inside anchor tags to make them clickable and pass the routes to be loaded to the href attributes.
Notice that we are also passing the product id to the routes as a parameter. But as we have not create these routes yet, they won’t work as of now. Reload the page and see yourself.
@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>
<a href="/delete/{{$product->id}}">
<div class="bg-red-300 rounded-full px-4 py-2 ml-1 shadow text-xs text-white">
Delete
</div>
</a>
</div>
@endifIf you click on the buttons, you’ll get ‘404 not found’ error.
Conclusion: We are proceeding towards our final product right! It feels good, only a few more steps and we are done…. at least for now. So in the next video we shall create the routes, views and the controller functions to handle the product edit request and then the product delete request.