Laravel 11 E-Commerce - Admin Create New Brand
Welcome back to the Laravel E-Commerce Project Tutorial! In this video, we will learn about adding a new brand.
Creating a New Function in AdminController
Let's start by creating a new function in the AdminController:
public function add_brand()
{
return view("admin.brand-add");
}
Now, create a route. Go to the web.php file and add:
Route::get('/admin/brand/add',[AdminController::class,'add_brand'])->name('admin.brand.add');
Creating the View
Now, let's create this view. Go to the resources directory and create a new file called brand-add.blade.php.
Here, let's extend the layout:
@extends('layouts.admin')
@section('content')
@endsection
Add the dashboard link:
{{route('admin.index')}}
Now, go to the template directory and open add-brand.html in a text editor. Copy the main-content-inner and paste it inside the brand-add.blade.php file, inside the content section. Just paste here 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>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">New Brand</div>
</li>
</ul>
</div>
<!-- new-category -->
<div class="wg-box">
<form class="form-new-product form-style-1" action="{{route('admin.brand.store')}}" method="POST" enctype="multipart/form-data">
@csrf
<fieldset class="name">
<div class="body-title">Brand Name <span class="tf-color-1">*</span></div>
<input class="flex-grow" type="text" placeholder="Brand name" name="name" tabindex="0" value="{{old('name')}}" aria-required="true">
</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="Brand Slug" name="slug" tabindex="0" value="{{old('slug')}}" aria-required="true">
</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">
<div class="item" id="imgpreview" style="display:none">
<img src="{{asset('images/upload/upload-1.png')}}" class="effect8" alt="">
</div>
<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">Save</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
Adding the Add New Brand Link
Now, let's add the add new brand link on the brands.blade.php file. Open this view file and add the link:
<a class="tf-button style-1 w208" href="{{route('admin.brand.add')}}"><i class="icon-plus"></i>Add new</a>
Storing the Brand
Now, let's check this. Refresh the page, click on the add new brand, and you can see the form.
Go to the AdminController and create a new function for storing the brand:
public function add_brand_store(Request $request)
{
$request->validate([
'name' => 'required',
'slug' => 'required|unique:brands,slug',
'image' => 'mimes:png,jpg,jpeg|max:2048'
]);
$brand = new Brand();
$brand->name = $request->name;
$brand->slug = Str::slug($request->name);
$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 added successfully !');
}
Now, let's create a route for this. Go to the web.php file and add:
Route::post('/admin/brand/store',[AdminController::class,'add_brand_store'])->name('admin.brand.store');
Now, go to the brand-add.blade.php view file and inside the form, add the action:
<form class="form-new-product form-style-1" action="{{route('admin.brand.store')}}" method="POST" enctype="multipart/form-data">
</form>
Checking the Result
Now, let's check this. Refresh the page and let's add a brand here. Enter the brand name, select the brand image, and click on submit. And here you can see the brand.
Add one more, click on submit, and the brand is added.
So, in this way, you can create the layout and implement the HTML template.
That's all about creating a new brand in the Laravel E-Commerce project.
