Laravel 11 E-Commerce - Admin Edit Brand
Welcome back to the Laravel E-Commerce Project Tutorial! In this video, we will learn about editing a brand.
Creating a New Function in AdminController
First, let's go to the AdminController and create a new function:
public function edit_brand($id)
{
$brand = Brand::find($id);
return view('admin.brand-edit',compact('brand'));
}
Creating the View
Now, let's create this view. Go to the resources directory and create a new file called brand-edit.blade.php.
Open the brand-add.blade.php file and copy all the text from here. Select all and copy. Now, open the brand-edit.blade.php file and paste it here.
Now, let's set the value property to the input field 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>Brand 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.brands')}}"><div class="text-tiny">Brands</div></a>
</li>
<li>
<i class="icon-chevron-right"></i>
</li>
<li>
<div class="text-tiny">Edit Brand</div>
</li>
</ul>
</div>
<!-- new-category -->
<div class="wg-box">
<form class="form-new-product form-style-1" action="{{route('admin.brand.update')}}" method="POST" enctype="multipart/form-data">
@csrf
@method('PUT')
<input type="hidden" name="id" value="{{$brand->id}}" />
<fieldset class="name">
<div class="body-title">Brand Name <span class="tf-color-1">*</span></div>
<input class="flex-grow" type="text" placeholder="Category name" name="name" tabindex="0" value="{{$brand->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">Brand Slug <span class="tf-color-1">*</span></div>
<input class="flex-grow" type="text" placeholder="Category Slug" name="slug" tabindex="0" value="{{$brand->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($brand->image)
<div class="item" id="imgpreview">
<img src="{{asset('uploads/brands')}}/{{$brand->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 New Function in AdminController for Updating
Now, go to the AdminController and create a new function here:
public function update_brand(Request $request)
{
$request->validate([
'name' => 'required',
'slug' => 'required|unique:brands,slug,'.$request->id,
'image' => 'mimes:png,jpg,jpeg|max:2048'
]);
$brand = Brand::find($request->id);
$brand->name = $request->name;
$brand->slug = $request->slug;
if($request->hasFile('image'))
{
if (File::exists(public_path('uploads/brands').'/'.$brand->image)) {
File::delete(public_path('uploads/brands').'/'.$brand->image);
}
$image = $request->file('image');
$file_extention = $request->file('image')->extension();
$file_name = Carbon::now()->timestamp . '.' . $file_extention;
$this->GenerateBrandThumbailImage($image,$file_name);
$brand->image = $file_name;
}
$brand->save();
return redirect()->route('admin.brands')->with('status','Record has been updated successfully !');
}
Creating the Route
Now, let's create the route for this function:
Route::put('/admin/brand/update',[AdminController::class,'update_brand'])->name('admin.brand.update');
Updating the View
Now, go to the brand-edit.blade.php file and add the action:
action="{{route('admin.brand.update')}}"
Add the @method directive and pass the method "PUT".
Adding the Edit Link
Now, go to the brands.blade.php file and add the link here for editing the brand:
<a href="{{route('admin.brand.edit',['id'=>$brand->id])}}">
<div class="item edit">
<i class="icon-edit-3"></i>
</div>
</a>
Checking the Result
Now, let's check. Refresh the page and click on the edit link. And here is the edit page.
Now, let's change the brand name and also change the image. Click on update, and here you can see the brand is updated.
So, in this way, you can edit the brand.
That's all about editing a brand in the Laravel E-Commerce project.
