Laravel 11 E-Commerce - Admin Edit Category
Welcome back to the Laravel E-Commerce Project Tutorial! In this video, we will learn about editing a category for admin.
Creating a New Function in AdminController
So, let's see how we can edit the category page. First, go to the AdminController and create a new function:
public function edit_category($id)
{
$category = Category::find($id);
return view('admin.category-edit',compact('category'));
}
Creating the Route
Now, let's create the route. So, go to the web.php file and create a new route:
Route::get('/admin/category/{id}/edit',[AdminController::class,'edit_category'])->name('admin.category.edit');
Creating the View
Now, create this view. So, go to the resource directory and create a new file, category-edit.blade.php file.
Now, open the category-add.blade.php file and let's copy all the text from this file and make changes as follows:
@extends('layouts.admin')
@section('content')
<div class="main-content-inner">
<!-- main-content-wrap -->
<div class="main-content-wrap">
<div class="flex items-center flex-wrap justify-between gap20 mb-27">
<h3>Category infomation</h3>
<ul class="breadcrumbs flex items-center flex-wrap justify-start gap10">
<li>
<a href="{{route('admin.index')}}"><div class="text-tiny">Dashboard</div></a>
</li>
<li>
<i class="icon-chevron-right"></i>
</li>
<li>
<a href="{{route('admin.categories')}}"><div class="text-tiny">Categories</div></a>
</li>
<li>
<i class="icon-chevron-right"></i>
</li>
<li>
<div class="text-tiny">New Category</div>
</li>
</ul>
</div>
<!-- new-category -->
<div class="wg-box">
<form class="form-new-product form-style-1" action="{{route('admin.category.update')}}" method="POST" enctype="multipart/form-data">
@csrf
@method('PUT')
<input type="hidden" name="id" value="{{$category->id}}" />
<fieldset class="name">
<div class="body-title">Category Name <span class="tf-color-1">*</span></div>
<input class="flex-grow" type="text" placeholder="Category name" name="name" tabindex="0" value="{{$category->name}}" aria-required="true" required="">
</fieldset>
@error("name") <span class="alert alert-danger text-center">{{$message}}</span> @enderror
<fieldset class="name">
<div class="body-title">Category Slug <span class="tf-color-1">*</span></div>
<input class="flex-grow" type="text" placeholder="Category Slug" name="slug" tabindex="0" value="{{$category->slug}}" aria-required="true" required="">
</fieldset>
@error("slug") <span class="alert alert-danger text-center">{{$message}}</span> @enderror
<fieldset>
<div class="body-title">Upload images <span class="tf-color-1">*</span></div>
<div class="upload-image flex-grow">
@if($category->image)
<div class="item" id="imgpreview">
<img src="{{asset('uploads/categories')}}/{{$category->image}}" alt="">
</div>
@endif
<div id="upload-file" class="item up-load">
<label class="uploadfile" for="myFile">
<span class="icon">
<i class="icon-upload-cloud"></i>
</span>
<span class="body-text">Drop your images here or select <span class="tf-color">click to browse</span></span>
<input type="file" id="myFile" name="image" accept="image/*">
</label>
</div>
</div>
</fieldset>
@error("image") <span class="alert alert-danger text-center">{{$message}}</span> @enderror
<div class="bot">
<div></div>
<button class="tf-button w208" type="submit">Update</button>
</div>
</form>
</div>
<!-- /new-category -->
</div>
<!-- /main-content-wrap -->
</div>
</div>
@endsection
@push("scripts")
<script>
$(function(){
$("#myFile").on("change",function(e){
const photoInp = $("#myFile");
const [file] = this.files;
if (file) {
$("#imgpreview img").attr('src',URL.createObjectURL(file));
$("#imgpreview").show();
}
});
$("input[name='name']").on("change",function(){
$("input[name='slug']").val(StringToSlug($(this).val()));
});
});
function StringToSlug(Text) {
return Text.toLowerCase()
.replace(/[^\w ]+/g, "")
.replace(/ +/g, "-");
}
</script>
@endpush
Creating a Function for Updating the Category
Now, go to the AdminController and let's create a function here for updating the category:
public function update_category(Request $request)
{
$request->validate([
'name' => 'required',
'slug' => 'required|unique:categories,slug,'.$request->id,
'image' => 'mimes:png,jpg,jpeg|max:2048'
]);
$category = Category::find($request->id);
$category->name = $request->name;
$category->slug = $request->slug;
if($request->hasFile('image'))
{
if (File::exists(public_path('uploads/categories').'/'.$category->image)) {
File::delete(public_path('uploads/categories').'/'.$category->image);
}
$image = $request->file('image');
$file_extention = $request->file('file')->extension();
$file_name = Carbon::now()->timestamp . '.' . $file_extention;
$this->GenerateCategoryThumbailImage($image,$file_name);
$category->image = $file_name;
}
$category->save();
return redirect()->route('admin.categories')->with('status','Record has been updated successfully !');
}
Creating the Route
Now, create the route:
Route::put('/admin/category/update',[AdminController::class,'update_category'])->name('admin.category.update');
Adding the Route to the Form Action
Now, add this route to the form action. After this, let's add the edit link on categories.blade.php file. So, open this file and inside the foreach, do the following:
<td>
<div class="list-icon-function">
<a href="{{route('admin.category.edit',['id'=>$category->id])}}">
<div class="item edit">
<i class="icon-edit-3"></i>
</div>
</a>
</div>
</td>
Checking the Result
Now, it's done. So, let's check it. Go to the Admin Categories Page. Now, let's click on the edit link. Then, change the category details and finally click on the update button. You will see the category will be updated.
So, in this way, you can edit the category.
That's all about creating an edit category page in the Laravel E-Commerce project.
