Laravel 11 E-Commerce - Admin Product Page
Welcome back to the Laravel E-Commerce Project Tutorial! In this video, we are going to learn about creating a Products Page for Admin.
Creating the Model and Migration for the Product
So, let's see how we can create the products page for admin. First of all, let's create the model and migration for the product. For that, go to the command prompt and run the command:
php artisan make:model Product –m
Alright, the model and migration are created. Now, let's open the product migration. So, go to the database directory and then migration. From here, let's open the create_products_table migration, and let's add columns:
public function up(): void
{
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('slug')->unique();
$table->string('short_description')->nullable();
$table->text('description');
$table->decimal('regular_price');
$table->decimal('sale_price')->nullable();
$table->string('SKU');
$table->enum('stock_status',['instock','outofstock']);
$table->boolean('featured')->default(false);
$table->unsignedInteger('quantity')->default(10);
$table->string('image')->nullable();
$table->text('images')->nullable();
$table->bigInteger('category_id')->unsigned()->nullable();
$table->bigInteger('brand_id')->unsigned()->nullable();
$table->timestamps();
$table->foreign('category_id')->references('id')->on('categories')->onDelete('cascade');
$table->foreign('brand_id')->references('id')->on('brands')->onDelete('cascade');
});
}
Migrating the Migration
Now, let's migrate the migration. So, go to the command and run the command:
php artisan migrate
Migration done!
Defining Relationships
Now, go to the brand model and here add a function for relating to the product:
public function products()
{
return $this->hasMany(Product::class);
}
Now, go to the category model and here add a function for relating to the product:
public function products()
{
return $this->hasMany(Product::class);
}
Now, go to the Product Modal and add the function:
public function category()
{
return $this->belongsTo(Category::class,'category_id');
}
public function brand()
{
return $this->belongsTo(Brand::class,'brand_id');
}
Creating the Products Page for Admin
Now, let's create the products page for admin for viewing all the products. For that, go to the AdminController and create a new function here:
public function products()
{
$products = Product::OrderBy('created_at','DESC')->paginate(10);
return view("admin.products",compact('products'));
}
Creating the Route
Now, create the route for this method:
Route::get('/admin/products',[AdminController::class,'products'])->name('admin.products');
Creating the View
Now, create the view for this function. So, go to the resources directory and create a new view file, Products.blade.php. Now, go to the template directory and let's open the products.html template file in a text editor. Now, from here, let's copy all the text and paste inside the products.blade.php file. Now, make changes here:
@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>Products</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">Products</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.product.add') }}"><i class="icon-plus"></i>Add new</a>
</div>
<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>Price</th>
<th>SalePrice</th>
<th>SKU</th>
<th>Category</th>
<th>Brand</th>
<th>Featured</th>
<th>Stock</th>
<th>Quantity</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach ($products as $product)
<tr>
<td>{{$product->id}}</td>
<td class="pname">
<div class="image">
<img src="{{asset('uploads/products/thumbnails')}}/{{$product->image}}" alt="" class="image">
</div>
<div class="name">
<a href="#" class="body-title-2">{{$product->name}}</a>
<div class="text-tiny mt-3">{{$product->slug}}</div>
</div>
</td>
<td>${{$product->regular_price}}</td>
<td>${{$product->sale_price}}</td>
<td>{{$product->SKU}}</td>
<td>{{$product->category->name}}</td>
<td>{{$product->brand->name}}</td>
<td>{{$product->featured == 0 ? "No":"Yes"}}</td>
<td>{{$product->stock_status}}</td>
<td>{{$product->quantity}}</td>
<td>
<div class="list-icon-function">
<div class="item eye">
<i class="icon-eye"></i>
</div>
<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 class="flex items-center justify-between flex-wrap gap10 wgp-pagination">
{{$products->links('pagination::bootstrap-5')}}
</div>
</div>
</div>
</div>
@endsection
Adding Links to the Admin Layout
Now, go to the admin.blade.php layout file and here add the link for add new product and products link:
<li class="menu-item has-children">
<a href="javascript:void(0);" class="menu-item-button">
<div class="icon"><i class="icon-shopping-cart"></i></div>
<div class="text">Products</div>
</a>
<ul class="sub-menu">
<li class="sub-menu-item">
<a href="{{route('admin.product.add')}}" class="">
<div class="text">Add Product</div>
</a>
</li>
<li class="sub-menu-item">
<a href="{{route('admin.products')}}" class="">
<div class="text">Products</div>
</a>
</li>
</ul>
</li>
Checking the Result
Now, it's done. So, let's check. So, go to the admin page, click on the products link, and you will see the products page. So, in this way, you can create a product page for admin. That's all about creating a product page for admin.
