Laravel 12 E-Commerce: Creating the Admin Product Page

Hi everyone, welcome back to the Laravel E-Commerce Project Tutorial. This video covers the steps for creating the Product management page for the admin panel.


1. Create Model and Migration for Product

First, create the new Product model and its associated database migration.

Create Model

Run the following command in the terminal:

php artisan make:model Product –m

Update Product Migration

Open the generated migration file (`create_products_table`) and add the necessary columns to the `products` table within the `up` method:

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("information")->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->unsignedBigInteger("category_id")->nullable();
$table->unsignedBigInteger("brand_id")->nullable();
$table->timestamps();
$table->foreign("category_id")->references("id")->on("categories")->onDelete("cascade");
$table->foreign("brand_id")->references("id")->on("brands")->onDelete("cascade");
});
}

Run Migration

Execute the migration to create the `products` table in the database:

php artisan migrate

2. Controller Function and Route Setup

Create Controller Function (`AdminController.php`)

In the `AdminController`, create a `products()` function to fetch all products, including their associated category and brand via eager loading, and paginate the results:

public function products()
{
$products = Product::orderBy("id","DESC")->with(["category","brand"])->paginate(10);
return view("admin.products",compact("products"));
}

Define Route (`web.php`)

Define the route for accessing the admin products page:

Route::get("/admin/products",[AdminController::class,"products"])->name("admin.products’);

3. Create View and Integrate Template

Create Products View

Create a new view file: `resources/views/admin/products.blade.php`. Extend the admin layout and integrate the HTML template content.

Display Products in Table

Inside the view, replace the static table body with a loop to display the dynamically fetched products, accessing related models and product attributes:

<tbody>
@foreach ($products as $product)
<tr>
<th scope="row">{{$loop->iteration}}</th>
<td>
<div class="custom d-flex align-items-center">
<div class="thumb_34 mr-15 mt-0">
<img class="img-fluid radius_50" src="{{asset("uploads/products")}}/{{$product->image}}" alt="{{$product->name}}"/>
</div>
<span class="f_s_12 f_w_600 color_text_5">{{$product->name}}</span>
</div>
</td>
<td>
<p>
<a href="#">
<span class="text-muted font_s_13">{{$product->reviews()->count()}} Reviews</span>
</a>
</p>
</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">
<a href="#" target="_blank">
<div class="item eye">
<i class="fa fa-eye"></i> </div>
</a>
</div>
</td>
</tr>
@endforeach
</tbody>
{{$products->links("pagination::bootstrap-5")}}


5. Final Check

After saving all files and navigating to the Admin page and clicking on Products, the product page should display correctly. Since no products have been added yet, the table will be empty. The next video will cover how to add new products.

This completes the setup for the Admin Product Page.