[{"data":1,"prerenderedAt":95},["ShallowReactive",2],{"\u002Fposts\u002Fmenampilkan-grafik-stok-produk?{\"username\":\"irezabdullah\"}":3},{"success":4,"message":5,"data":6},true,"Post retrieved successfully",{"post":7,"seriesInfo":25,"seriesItems":28,"seoDescription":94},{"id":8,"title":9,"slug":10,"body":11,"cover_image_path":12,"view_count":13,"part_number":14,"created_at":15,"updated_at":16,"category":17,"author":20},62,"Menampilkan Grafik Stok Produk","menampilkan-grafik-stok-produk","### 🎯 Tujuan\n\nMampu 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.\n\n---\n\n### 🧩 Materi & Langkah Praktik\n\n---\n\n#### **1. Tambahkan Route untuk Grafik**\n\nBagian ini menambahkan sebuah route baru khusus untuk menampilkan grafik. Route ini akan memanggil method `chart()` di `ProductController`.\n\nEdit file `routes\u002Fweb.php`:\n\n```php\nuse App\\Http\\Controllers\\ProductController;\n\nRoute::get('\u002Fproducts\u002Fchart', [ProductController::class, 'chart'])->name('products.chart');\n```\n\n---\n\n#### **2. Tambahkan Method `chart` di Controller**\n\nMethod ini mengambil **5 produk dengan stok terbanyak** dari database, kemudian mengirimkan data tersebut ke view bernama `products.chart`.\n\nEdit file `app\u002FHttp\u002FControllers\u002FProductController.php`:\n\n```php\npublic function chart()\n{\n    \u002F\u002F Ambil 5 produk dengan stok terbanyak\n    $products = Product::orderBy('stock', 'desc')->take(5)->get();\n\n    return view('products.chart', compact('products'));\n}\n```\n\n**Penjelasan:**\n\n* `orderBy('stock', 'desc')` → mengurutkan produk dari stok terbesar ke terkecil.\n* `take(5)` → mengambil hanya 5 produk teratas.\n* `compact('products')` → mengirim data ke view.\n\n---\n\n#### **3. Buat View Grafik Produk**\n\nDi tahap ini kita membuat file Blade yang akan menampilkan grafik Chart.js. Grafik akan memvisualisasikan nama produk (sumbu X) dan stoknya (sumbu Y).\n\nBuat file `resources\u002Fviews\u002Fproducts\u002Fchart.blade.php`:\n\n```html\n@extends('layouts.app')\n\n@section('content')\n\u003Cdiv class=\"container mt-4\">\n    \u003Cdiv class=\"d-flex justify-content-between align-items-center mb-3\">\n        \u003Ch2>📊 Grafik Stok Produk Terbanyak\u003C\u002Fh2>\n        \u003Ca href=\"{{ route('products.index') }}\" class=\"btn btn-secondary btn-sm\">Kembali\u003C\u002Fa>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"card shadow-sm\">\n        \u003Cdiv class=\"card-body\">\n            \u003Ccanvas id=\"productChart\" height=\"120\">\u003C\u002Fcanvas>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003C!-- Chart.js CDN -->\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fchart.js\">\u003C\u002Fscript>\n\n\u003Cscript>\n    const ctx = document.getElementById('productChart');\n\n    new Chart(ctx, {\n        type: 'bar',\n        data: {\n            labels: @json($products->pluck('name')), \u002F\u002F Nama produk\n            datasets: [{\n                label: 'Jumlah Stok',\n                data: @json($products->pluck('stock')), \u002F\u002F Jumlah stok\n                backgroundColor: [\n                    'rgba(54, 162, 235, 0.6)',\n                    'rgba(255, 206, 86, 0.6)',\n                    'rgba(75, 192, 192, 0.6)',\n                    'rgba(153, 102, 255, 0.6)',\n                    'rgba(255, 99, 132, 0.6)',\n                ],\n                borderColor: 'rgba(54, 162, 235, 1)',\n                borderWidth: 1\n            }]\n        },\n        options: {\n            responsive: true,\n            scales: {\n                y: {\n                    beginAtZero: true,\n                    ticks: { stepSize: 1 }\n                }\n            }\n        }\n    });\n\u003C\u002Fscript>\n@endsection\n```\n\n---\n\n#### 🧠 **Penjelasan Singkat Kode Chart.js**\n\n| Bagian                                    | Fungsi                                   |\n| ----------------------------------------- | ---------------------------------------- |\n| `labels: @json($products->pluck('name'))` | Daftar nama produk sebagai label grafik. |\n| `data: @json($products->pluck('stock'))`  | Data stok yang akan divisualisasikan.    |\n| `type: 'bar'`                             | Menggunakan grafik batang.               |\n| `backgroundColor`                         | Warna batang grafik.                     |\n| `responsive: true`                        | Grafik otomatis menyesuaikan layar.      |\n\nKode Chart.js berada **di bagian bawah file**, setelah elemen `\u003Ccanvas>`.\n\n---\n\n#### **4. Tambahkan Tombol Akses Grafik di Halaman Produk**\n\nSupaya user mudah mengakses grafik, tambahkan tombol pada halaman Index produk.\n\nEdit `resources\u002Fviews\u002Fproducts\u002Findex.blade.php`:\n\n```html\n\u003Cdiv class=\"d-flex justify-content-between align-items-center mb-3\">\n    \u003Ch2>Daftar Produk\u003C\u002Fh2>\n    \u003Ca href=\"{{ route('products.chart') }}\" class=\"btn btn-info\">Lihat Grafik Stok\u003C\u002Fa>\n\u003C\u002Fdiv>\n```\n\n---\n\n#### **5. Jalankan Aplikasi**\n\n1. Jalankan server Laravel:\n\n```bash\nphp artisan serve\n```\n\n2. Buka halaman `\u002Fproducts`\n3. Klik **“Lihat Grafik Stok”**\n4. Grafik akan tampil menampilkan **5 produk dengan stok terbanyak**\n\n---\n\n#### ✅ Struktur Folder Penting\n\n```\nproject-laravel\u002F\n├──📁 app\u002F\n│   └──📁 Http\u002F\n│       └──📁 Controllers\u002F\n│           └── ProductController.php       📌 \u003C-- Controller (CRUD + grafik)\n├──📁 resources\u002F\n│   └──📁 views\u002F\n│       └──📁 products\u002F\n│           ├── index.blade.php             📄 Daftar produk + tombol grafik\n│           ├── chart.blade.php             📊 Tampilan grafik stok\n│           ├── create.blade.php            📝 Form tambah produk\n│           └── edit.blade.php              🛠️ Form edit produk\n├──📁 routes\u002F\n│   └── web.php                            🗺️ \u003C-- Routing aplikasi\n```","https:\u002F\u002Fcdn.rezweb.my.id\u002Fposts\u002FNKSAkEVz7JM1UvfIUd2C544MgbTAgHOAKJ4aE0qn.jpg",753,11,"2025-11-12T06:32:01+07:00","2026-09-07T11:59:39+07:00",{"name":18,"slug":19},"LARAVEL","laravel",{"id":21,"name":22,"username":23,"avatar":24},1,"Irez Abdullah","irezabdullah","https:\u002F\u002Fcdn.rezweb.my.id\u002Favatars\u002Fd139726e-348f-4dab-95c6-bb87e2ad125e.jpeg",{"name":26,"slug":27},"Belajar Laravel dari Nol (Praktikum Web Framework) – Ringkas & Praktis","belajar-laravel-dari-nol-praktikum-web-framework-ringkas-praktis",[29,33,38,43,48,53,58,63,68,73,78,79,84,89],{"id":30,"slug":31,"title":32,"part_number":21},48,"pengenalan-web-framework-instalasi-laravel","Pengenalan Web Framework & Instalasi Laravel",{"id":34,"slug":35,"title":36,"part_number":37},49,"struktur-folder-routing-dasar","Struktur Folder & Routing Dasar",2,{"id":39,"slug":40,"title":41,"part_number":42},50,"blade-template-layouting-dengan-bootstrap-5-dmwo","Blade Template & Layouting dengan Bootstrap 5",3,{"id":44,"slug":45,"title":46,"part_number":47},51,"database-migration-qbsa","Database & Migration",4,{"id":49,"slug":50,"title":51,"part_number":52},52,"model-seeder","Model & Seeder",5,{"id":54,"slug":55,"title":56,"part_number":57},53,"controller-read-data-menampilkan-produk","Controller & Read Data (Menampilkan Produk)",6,{"id":59,"slug":60,"title":61,"part_number":62},54,"form-tambah-produk-create","Form Tambah Produk (Create)",7,{"id":64,"slug":65,"title":66,"part_number":67},55,"edit-update-produk","Edit & Update Produk",8,{"id":69,"slug":70,"title":71,"part_number":72},56,"hapus-produk-validasi-form","Hapus Produk & Validasi Form",9,{"id":74,"slug":75,"title":76,"part_number":77},63,"upload-file-gambar-dan-validasi-cpw3","Upload File (Gambar) dan Validasi",10,{"id":8,"slug":10,"title":9,"part_number":14},{"id":80,"slug":81,"title":82,"part_number":83},64,"login-dan-implementasi-middleware-at","Login Dan Implementasi Middleware",12,{"id":85,"slug":86,"title":87,"part_number":88},61,"membuat-dashboard-admin-dengan-statistik-dan-grafik","Membuat Dashboard Admin dengan Statistik dan Grafik",13,{"id":90,"slug":91,"title":92,"part_number":93},65,"teknik-debugging-di-laravel","Teknik Debugging di Laravel",15,"🎯 Tujuan Mampu menampilkan grafik sederhana berdasarkan produk dengan stok terbanyak menggunakan Chart.js, sehingga mahasiswa memahami cara mengambil data dari...",1788757405059]