🎯 Tujuan

Mampu menampilkan grafik sederhana berdasarkan produk dengan stok terbanyak menggunakan Chart.js, sehingga mahasiswa memahami cara mengambil data dari database dan menampilkannya dalam bentuk visual yang menarik.

🧩 Materi & Langkah Praktik

1. Tambahkan Route untuk Grafik

Bagian ini menambahkan sebuah route baru khusus untuk menampilkan grafik. Route ini akan memanggil method chart() di ProductController.

Edit file routes/web.php:

use App\Http\Controllers\ProductController;

Route::get('/products/chart', [ProductController::class, 'chart'])->name('products.chart');

2. Tambahkan Method chart di Controller

Method ini mengambil 5 produk dengan stok terbanyak dari database, kemudian mengirimkan data tersebut ke view bernama products.chart.

Edit file app/Http/Controllers/ProductController.php:

public function chart()
{
    // Ambil 5 produk dengan stok terbanyak
    $products = Product::orderBy('stock', 'desc')->take(5)->get();

    return view('products.chart', compact('products'));
}

Penjelasan:

• orderBy('stock', 'desc') → mengurutkan produk dari stok terbesar ke terkecil.
• take(5) → mengambil hanya 5 produk teratas.
• compact('products') → mengirim data ke view.

3. Buat View Grafik Produk

Di tahap ini kita membuat file Blade yang akan menampilkan grafik Chart.js. Grafik akan memvisualisasikan nama produk (sumbu X) dan stoknya (sumbu Y).

Buat file resources/views/products/chart.blade.php:

@extends('layouts.app')

@section('content')
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2>📊 Grafik Stok Produk Terbanyak</h2>
        <a href="{{ route('products.index') }}" class="btn btn-secondary btn-sm">Kembali</a>
    </div>

    <div class="card shadow-sm">
        <div class="card-body">
            <canvas id="productChart" height="120"></canvas>
        </div>
    </div>
</div>

<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    const ctx = document.getElementById('productChart');

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: @json($products->pluck('name')), // Nama produk
            datasets: [{
                label: 'Jumlah Stok',
                data: @json($products->pluck('stock')), // Jumlah stok
                backgroundColor: [
                    'rgba(54, 162, 235, 0.6)',
                    'rgba(255, 206, 86, 0.6)',
                    'rgba(75, 192, 192, 0.6)',
                    'rgba(153, 102, 255, 0.6)',
                    'rgba(255, 99, 132, 0.6)',
                ],
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: { stepSize: 1 }
                }
            }
        }
    });
</script>
@endsection

🧠 Penjelasan Singkat Kode Chart.js

Kode Chart.js berada di bagian bawah file, setelah elemen <canvas>.

4. Tambahkan Tombol Akses Grafik di Halaman Produk

Supaya user mudah mengakses grafik, tambahkan tombol pada halaman Index produk.

Edit resources/views/products/index.blade.php:

<div class="d-flex justify-content-between align-items-center mb-3">
    <h2>Daftar Produk</h2>
    <a href="{{ route('products.chart') }}" class="btn btn-info">Lihat Grafik Stok</a>
</div>

5. Jalankan Aplikasi

1. Jalankan server Laravel:

php artisan serve

2. Buka halaman /products
3. Klik “Lihat Grafik Stok”
4. Grafik akan tampil menampilkan 5 produk dengan stok terbanyak

✅ Struktur Folder Penting

project-laravel/
├──📁 app/
│   └──📁 Http/
│       └──📁 Controllers/
│           └── ProductController.php       📌 <-- Controller (CRUD + grafik)
├──📁 resources/
│   └──📁 views/
│       └──📁 products/
│           ├── index.blade.php             📄 Daftar produk + tombol grafik
│           ├── chart.blade.php             📊 Tampilan grafik stok
│           ├── create.blade.php            📝 Form tambah produk
│           └── edit.blade.php              🛠️ Form edit produk
├──📁 routes/
│   └── web.php                            🗺️ <-- Routing aplikasi