Laravel 11 E-Commerce - Admin Brand Page
Welcome back to the Laravel E-Commerce Project Tutorial! In this video, we will learn about creating a Laravel brand page for the admin.
Creating the Model and Migration for the Brand
Let's start by creating the model and migration for the brand. Go to the command prompt and run the command:
php artisan make:model Brand –m
Alright, the model and migration are created. Now, let's open the create_brands_table migration.
Go to the database directory, then migration, and from here, let's open the create_brands_table migration. Add the following columns:
public function up(): void
{
Schema::create('brands', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('slug')->unique();
$table->string('image')->nullable();
$table->timestamps();
});
}
Now, let's migrate the migration. Run the command:
php artisan migrate
Creating the Brands Page for Admin
Now, let's create the brands page for the admin to view all the brands. Go to the AdminController and create a new function here:
public function brands()
{
$brands = Brand::orderBy('id','DESC')->paginate(10);
return view("admin.brands",compact('brands'));
}
Next, go to the web.php file and create a route:
Route::get('/admin/brands',[AdminController::class,'brands'])->name('admin.brands');
Now, let's create this view. In the resources directory, go to the admin directory and create a new file called brands.blade.php.
Extend the layout:
@extends('layouts.admin')
@section('content')
@endsection
Now, go to the HTML template directory and from the admin folder, let's open brands.html in a text editor. Find the div with the class main-content, collapse it, and copy it.
Go to the brands.blade.php file and inside the content section, paste it and make the changes as follows:
@extends('layouts.admin')
@section('content')
<style>
.table-striped th:nth-child(1), .table-striped td:nth-child(1) {
width: 100px;
}
.table-striped th:nth-child(2), .table-striped td:nth-child(2) {
width: 250px;
}
</style>
<div class="main-content-inner">
<div class="main-content-wrap">
<div class="flex items-center flex-wrap justify-between gap20 mb-27">
<h3>Brands</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>
<div class="text-tiny">Brands</div>
</li>
</ul>
</div>
<div class="wg-box">
<div class="flex items-center justify-between gap10 flex-wrap">
<div class="wg-filter flex-grow">
<form class="form-search">
<fieldset class="name">
<input type="text" placeholder="Search here..." class="" name="name" tabindex="2" value="" aria-required="true" required="">
</fieldset>
<div class="button-submit">
<button class="" type="submit"><i class="icon-search"></i></button>
</div>
</form>
</div>
<a class="tf-button style-1 w208" href="{{route('admin.brand.add')}}"><i class="icon-plus"></i>Add new</a>
</div>
<div class="wg-table table-all-user">
<div class="table-responsive">
@if(Session::has('status'))
<p class="alert alert-success">{{Session::get('status')}}</p>
@endif
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Slug</th>
<th>Products</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach ($brands as $brand)
<tr>
<td>{{$brand->id}}</td>
<td class="pname">
<div class="image">
<img src="{{asset('uploads/brands')}}/{{$brand->image}}" alt="" class="image">
</div>
<div class="name">
<a href="#" class="body-title-2">{{$brand->name}}</a>
</div>
</td>
<td>{{$brand->slug}}</td>
<td><a href="{{route('admin.brand.products',['brand_slug'=>$brand->slug])}}" target="_blank">{{$brand->products()->count()}}</a></td>
<td>
<div class="list-icon-function">
<div class="item edit">
<i class="icon-edit-3"></i>
</div>
<div class="item text-danger delete">
<i class="icon-trash-2"></i>
</div>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="divider"></div>
</div>
</div>
</div>
@endsection
Add the pagination link here:
<div class="flex items-center justify-between flex-wrap gap10 wgp-pagination">
{{$brands->links('pagination::bootstrap-5')}}
</div>
Because we are using a Bootstrap 5 template, inside the links, just pass 'pagination::bootstrap-5' in single quotes.
Now, go to the admin.blade.php layout file and add the link for the brands as follows:
<li class="menu-item has-children">
<a href="javascript:void(0);" class="menu-item-button">
<div class="icon"><i class="icon-layers"></i></div>
<div class="text">Brand</div>
</a>
<ul class="sub-menu">
<li class="sub-menu-item">
<a href="#" class="">
<div class="text">New Brand</div>
</a>
</li>
<li class="sub-menu-item">
<a href="{{route('admin.brands')}}" class="">
<div class="text">Brands</div>
</a>
</li>
</ul>
</li>
Now, it's done. Let's check it out. Go to the admin page and click on the brands link. You will see the brands page, and when you add a brand, all brands will be displayed here.
So, in this way, you can create the admin brands page.
That's all about creating the brands page.
