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.
