Laravel 12 E-Commerce: Implementing Admin Edit Category
Hi everyone, welcome back to the Laravel E-Commerce Project Tutorial. This video covers the steps for implementing the functionality to edit existing categories in the admin panel.
1. Controller Function and Route Setup
Create Edit Function (`AdminController.php`)
In the `AdminController`, create a function to fetch the category record by its ID and pass it to the edit view:
public function edit_category($id)
{
$category = Category::find($id);
return view("admin.category-edit",compact("category"));
}
Define Route for Edit View (`web.php`)
Create the GET route for accessing the category edit form:
Route::get("/admin/category/{id}/edit",[AdminController::class,"edit_category"])->name("admin.category.edit’);
Create and Setup Edit View (`category-edit.blade.php`)
Create the view file at `resources/views/admin/category-edit.blade.php`. For the form structure, you can copy the content from `category-add.blade.php` or `brand-edit.blade.php`.
2. Update Edit View Form with Existing Data
Modify `category-edit.blade.php` to include the hidden ID field, populate the input values with existing data, and correctly display the current category image.
Form Structure and Hidden Fields
Update the form action, method, and add the hidden input for the category ID:
<div class="card-body">
<form action="{{route("admin.category.update")}}" method="POST" enctype="multipart/form-data" data-parsley-validate>
@csrf
@method("PUT")
<input type="hidden" name="id" value="{{$category->id}}"/>
<!-- ... other form fields ... -->
</form>
</div>
Input Population and Image Display
Set the `value` attributes and display the image conditionally (similar to the Brand Edit page):
<!-- Name and Slug Inputs -->
<input type="text" class="form-control" name="name" placeholder="" value="{{$category->name}}" required data-parsley-trigger="change">
<input type="text" class="form-control" name="slug" placeholder="" value="{{$category->slug}}" required data-parsley-trigger="change">
<!-- Image Preview -->
<div class="mb-3">
@if($category->image)
<img id="image-preview" src="{{asset("uploads/categories")}}/{{$category->image}}" alt="Image Preview" style="max-width: 120px; height: auto;">
@else
<img id="image-preview" src="" alt="Image Preview" style="display: none; max-width: 120px; height: auto;">
@endif
</div>
3. Implement Update Logic and Route
Update Function (`AdminController.php`)
Create the `update_category` function to handle the `PUT` request. It validates the data (excluding the current category'sslug from the uniqueness check), handles image replacement (deleting the old image), and saves the changes.
use IlluminateSupportFacadesFile;
public function update_category(Request $request)
{
// 1. Validation: Slug unique check excludes the current category'sID
$request->validate([
"id" => "required",
"name" => "required",
"slug" => "required|unique:categories,slug," . $request->id,
"image" => "nullable|mimes:png,jpg,jpeg|max:2048"
]);
// 2. Find Category and Update Basic Details
$category = Category::find($request->id);
$category->name = $request->name;
$category->slug = Str::slug($request->name);
// 3. Handle Image Upload and Deletion of Old Image
if($request->hasFile("image")){
// Delete old image if it exists
if(File::exists(public_path("uploads/categories/")."/".$category->image))
{
File::delete(public_path("uploads/categories/")."/".$category->image);
}
// Handle new image upload and naming
$image = $request->file("image");
$file_extention = $request->file("image")->extension();
$file_name = Carbon::now()->timestamp.".".$file_extention;
// Generate thumbnails and save image
$this->GenerateCategoryThumbailsImage($image, $file_name);
$category->image = $file_name;
}
// 4. Save Changes and Redirect
$category->save();
return redirect()->route("admin.categories")->with("status", "Category has been updated succesfully!");
}
Define Route for Update (`web.php`)
Create the PUT route for the update logic:
Route::put("/admin/category/update",[AdminController::class,"update_category"])->name("admin.category.update’);
4. Final Link Update (`categories.blade.php`)
Ensure the Edit link on the categories listing page points to the correct edit route, passing the category ID:
<a href="{{route("admin.category.edit",["id"=>$category->id])}}">
<div class="item edit">
<i class="fa fa-edit"></i>
</div>
</a>
5. Testing
After saving all changes, navigate to the Admin Categories page, click the Edit icon for a category, verify the form is pre-filled, make changes, and submit the form to test the update functionality.
This concludes the implementation of the Admin Edit Category functionality.
