Membuat E-commerce sederhana di Laravel #Part 10 - Membuat halaman Order User

Berikut adalah tutorial langkah demi langkah untuk membuat halaman pengguna yang dapat melihat daftar pesanan mereka dan memeriksa status pesanan:

Sebelum ke langkah berikutnya. Silahkan ikuti tutorial sebelumnya tentang Manajemen order di administrator

Langkah 1: Tambahkan Route untuk Halaman Order

Buka file routes/web.php dan tambahkan route untuk halaman daftar pesanan pengguna.

use App\Http\Controllers\UserOrderController;

Route::middleware(['auth'])->group(function () {
    Route::get('/orders', [UserOrderController::class, 'index'])->name('user.orders');
    Route::get('/orders/{order}', [UserOrderController::class, 'show'])->name('user.orders.show');
});

Langkah 2: Buat Controller untuk Mengelola Order

Jalankan perintah berikut untuk membuat controller:

php artisan make:controller UserOrderController

UserOrderController.php

Tambahkan method untuk menampilkan daftar pesanan dan detail pesanan.

namespace App\Http\Controllers;

use App\Models\Order;
use App\Models\Category;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class UserOrderController extends Controller
{
    /**
     * Menampilkan daftar pesanan pengguna.
     */
    public function index()
    {
        $categories = Category::all();
        $orders = Order::where('user_id', Auth::id())->latest()->get();
        return view('frontend.orders.index', compact('orders','categories'));
    }

    /**
     * Menampilkan detail pesanan.
     */
    public function show(Order $order)
    {
        $categories = Category::all();

        if ($order->user_id !== Auth::id()) {
            abort(403, 'Unauthorized action.');
        }

        return view('frontend.orders.show', compact('order','categories'));
    }
}

Langkah 3: Buat View untuk Menampilkan Order

Buat File View frontend/orders/index.blade.php

File ini akan menampilkan daftar pesanan pengguna.

@extends('layouts.frontend')

@section('content')
<div class="container my-4">
    <h1 class="mb-4">Your Orders</h1>
    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Order ID</th>
                    <th>Status</th>
                    <th>Total</th>
                    <th>Created At</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($orders as $order)
                    <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td>{{ $order->id }}</td>
                        <td>{{ ucfirst($order->status) }}</td>
                        <td>${{ number_format($order->total, 2) }}</td>
                        <td>{{ $order->created_at->format('d M Y, H:i') }}</td>
                        <td>
                            <a href="{{ route('user.orders.show', $order->id) }}" class="btn btn-primary btn-sm">View</a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center">No orders found</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection

Buat File View frontend/orders/show.blade.php

File ini akan menampilkan detail pesanan.

@extends('layouts.frontend')

@section('content')
<div class="container my-4">
    <h1>Order Details</h1>
    <div class="card">
        <div class="card-header">
            <strong>Order ID:</strong> {{ $order->id }}
        </div>
        <div class="card-body">
            <p><strong>Status:</strong> {{ ucfirst($order->status) }}</p>
            <p><strong>Total:</strong> ${{ number_format($order->total, 2) }}</p>
            <p><strong>Order Date:</strong> {{ $order->created_at->format('d M Y, H:i') }}</p>
            <h5>Items:</h5>
            <ul>
                @foreach ($order->items as $item)
                    <li>{{ $item->product->name }} (x{{ $item->quantity }}) - ${{ number_format($item->price, 2) }}</li>
                @endforeach
            </ul>
        </div>
    </div>
</div>
@endsection

Langkah 4: Update Model Order

Tambahkan relasi di model Order untuk menghubungkan detail pesanan dan produk.

Order.php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Order extends Model
{
    use HasFactory;

    protected $fillable = ['user_id', 'status', 'total'];

    public function items()
    {
        return $this->hasMany(OrderDetail::class);
    }
}

OrderDetail.php

Tambahkan relasi ke produk.

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class OrderDetail extends Model
{
    use HasFactory;

    protected $fillable = ['order_id', 'product_id', 'quantity', 'price'];

    public function product()
    {
        return $this->belongsTo(Product::class);
    }
}

Langkah 5: Update Layout Frontend

Tambahkan link ke halaman orders di menu navigasi pengguna yang sudah login.

<li><a href="{{ route('user.orders') }}">My Orders</a></li>

Langkah 6: Testing

Login sebagai user dan tambahkan beberapa pesanan.

Akses halaman /orders untuk melihat daftar pesanan.

Klik tombol "View" untuk melihat detail pesanan.