Laravel 12 E-Commerce: Implementing Admin Delete Category
Hi everyone, welcome back to the Laravel E-Commerce Project Tutorial. This video covers the steps for implementing the functionality to delete existing categories in the admin panel, including the necessary controller logic, routing, and a confirmation prompt in the view.
1. Create Delete Logic and Route
Delete Function (`AdminController.php`)
In the `AdminController`, create the `delete_category` function. This function finds the category by ID, checks for and deletes the associated image file from the server, and then deletes the database record. It redirects the user back to the category listing page.
use IlluminateSupportFacadesFile;
public function delete_category($id)
{
// Find the category
$category = Category::find($id);
// Check if image exists and delete it
if (File::exists(public_path("uploads/categories")."/".$category->image)) {
File::delete(public_path("uploads/categories")."/".$category->image);
}
// Delete the database record
$category->delete();
// Redirect back to the category list
return redirect()->route("admin.categories");
}
Define Delete Route (`web.php`)
Create a `DELETE` route for the category deletion logic, passing the category ID as a parameter:
Route::delete("/admin/category/{id}/delete",[AdminController::class,"delete_category"])->name("admin.category.delete’);
2. Update View with Delete Form and Confirmation
Add Delete Form (`categories.blade.php`)
In the `categories.blade.php` view file, locate the table where the categories are listed and replace the static delete link with a form structure that sends a `DELETE` request:
<td>
<div class="list-icon-function">
<a href="{{ route("admin.category.edit", ["id" => $category->id]) }}">
<div class="item edit">
<i class="fa fa-edit"></i>
</div>
</a>
<form action="{{route("admin.category.delete",["id"=>$category->id])}}" method="POST">
@csrf
@method("DELETE")
<a href="javascript:void(0)" class="item text-danger delete">
<i class="fa fa-trash"></i>
</a>
</form>
</div>
</td>
Implement SweetAlert Confirmation (JavaScript)
To prevent accidental deletions, add JavaScript using a library like SweetAlert (assuming it'savailable) to display a confirmation dialog when the delete link is clicked. This script will intercept the click, display the alert, and only submit the form if the user confirms.
@push("scripts")
<script>
$(function() {
// Event listener for elements with the class ".delete"
$(".delete").on("click", function(e) {
e.preventDefault(); // Stop the default action (form submission)
var form = $(this).closest("form"); // Find the closest parent <form> element
// Show SweetAlert (sWal) confirmation dialog
swal({
title: "Are you sure?",
text: "You want to delete this record?",
type: "warning",
buttons: ["No", "Yes"],
confirmButtonColor: "#dc3545" // Bootstrap "danger" color
}).then(function(result) {
// Handle the user'schoice
if (result) {
form.submit(); // If "Yes" is clicked, submit the form
}
});
});
});
</script>
@endpush
3. Testing
Navigate to the Admin Categories page, click the Trash icon for a category, and confirm the deletion in the dialog box. The category and its image should be removed, and the page should refresh.
This concludes the implementation of the Admin Delete Category functionality.
