Laravel 11 E-Commerce - Admin Show Orders

Welcome back to the Laravel E-Commerce Project Tutorial. In this video, we will learn about showing orders for admin.

Step 1: Create a New Function in AdminController

To show orders for admin, let's create a new function in the AdminController:

public function orders()
{
        $orders = Order::orderBy('created_at','DESC')->paginate(12);
        return view("admin.orders",compact('orders'));
}

Step 2: Create a Route for the Function

Now, create a route for this function:

Route::get('/admin/orders',[AdminController::class,'orders'])->name('admin.orders');

Step 3: Create the Orders View

Next, create a new view in the resources directory called orders.blade.php:

Now, extend the layout:

@extends('layouts.admin')
@section('content')
@endsection

Step 4: Design the Orders Page

Now, go to the template directory, then admin, and open the orders.html file in a text editor. Copy the main-content-inner div and add a foreach loop inside the table body 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>Orders</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">All Order</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>                
            </div>
            <div class="wg-table table-all-user">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th style="width: 80px">Order No</th>
                                <th>Name</th>
                                <th class="text-center">Phone</th>
                                <th class="text-center">Subtotal</th>
                                <th class="text-center">Tax</th>
                                <th class="text-center">Total</th>
                                {{-- <th class="text-center" style="width:260px;">Address</th> --}}
                                <th class="text-center">Status</th>
                                <th class="text-center">Order Date</th>
                                <th class="text-center">Total Items</th>
                                <th class="text-center">Delivered On</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($orders as $order)
                            <tr>
                                <td class="text-center">{{"1" . str_pad($order->id,4,"0",STR_PAD_LEFT)}}</td>  
                                <td class="text-center">{{$order->name}}</td>
                                <td class="text-center">{{$order->phone}}</td>
                                <td class="text-center">${{$order->subtotal}}</td>
                                <td class="text-center">${{$order->tax}}</td>
                                <td class="text-center">${{$order->total}}</td>
                                {{-- <td class="text-center">
                                    <p>{{$order->address}}</p>
                                    <p>{{$order->locality}}</p>
                                    <p>{{$order->city}}, {{$order->state}}, {{$order->zip}}</p>                                    
                                </td> --}}
                                <td class="text-center">{{$order->status}}</td>
                                <td class="text-center">{{$order->created_at}}</td>
                                <td class="text-center">{{$order->orderItems->count()}}</td>
                                <td>{{$order->delivered_date}}</td>
                                <td class="text-center">
                                    <a href="{{route('admin.order.items',['order_id'=>$order->id])}}">
                                    <div class="list-icon-function view-icon">
                                        <div class="item eye">
                                            <i class="icon-eye"></i>
                                        </div>                                        
                                    </div>
                                    </a>
                                </td>
                            </tr>
                            @endforeach                                  
                        </tbody>
                    </table>                
                </div>
            </div>
            <div class="divider"></div>
            <div class="flex items-center justify-between flex-wrap gap10 wgp-pagination">                
                
            </div>
        </div>
    </div>
</div>
@endsection

Step 5: Add Pagination Links

Now, let's show the pagination links. Add the following code between the wgp-pagination div:

 <div class="divider"></div>
 <div class="flex items-center justify-between flex-wrap gap10 wgp-pagination">                
        {{$orders->links('pagination::bootstrap-5')}}
</div>

Testing the Orders Page

Now it's done! Let's check. Refresh the page, click on orders, and you can see the orders. Now, let's place a new order. Go to the shop page, add some products to the cart, and click on proceed to checkout. Click on place an order, then go to the orders page, and you can see the orders.

In this way, you can show orders for admin.

That's all about showing orders for admin.