🛒 Toko Elektronik - Web Admin Dashboard

Dashboard admin untuk mengelola toko elektronik yang menjual smartphone dan aksesoris.

📁 Struktur Folder

toko_elektronik/
├── assets/
│   ├── css/
│   │   └── style.css          # Styling untuk seluruh aplikasi
│   ├── js/
│   │   └── admin.js           # JavaScript untuk admin.php
│   └── images/                # Folder untuk menyimpan gambar lokal
├── dashboard.php              # Halaman dashboard utama
├── admin.php                  # Halaman kelola produk (CRUD)
├── data.sql                   # Struktur database (siap digunakan nanti)
└── README.md                  # Dokumentasi ini

🎯 Fitur Aplikasi

1. Dashboard (dashboard.php)

Menu: Dashboard

Perintah Eksekusi Bahasa Pemrograman:

a) Berbasis Teks

• Statistik total produk, stok, nilai inventori, dan kategori
• Alert peringatan stok rendah
• Tabel ranking produk termahal

b) Berbasis Grafik

• Bar Chart: Visualisasi jumlah produk per kategori
• Pie Chart: Distribusi kategori dalam bentuk diagram lingkaran
• Menggunakan Chart.js library untuk rendering grafik

c) Berbasis Multimedia

• Gambar: Galeri produk dengan thumbnail interaktif
• Video: Embedded YouTube video tutorial
• Audio: Audio player untuk notifikasi sistem

2. Kelola Produk (admin.php)

Menu: Produk

Fitur CRUD:

• ✅ Create: Tambah produk baru
• ✅ Read: Lihat daftar semua produk
• ✅ Update: Edit data produk
• ✅ Delete: Hapus produk

Field Data Produk:

• Thumbnail (URL gambar)
• Kategori (Dropdown: Iphone, Samsung, Xiaomi, dll)
• Nama Produk
• Harga (Rupiah)
• Stok (unit)
• Deskripsi

🚀 Cara Menggunakan

Saat Ini (Dengan Dummy Data)

1. Pastikan XAMPP sudah berjalan:

   • Jalankan Apache dari XAMPP Control Panel

2. Akses aplikasi melalui browser:

   http://localhost/electronic_dashboard/toko_elektronik/dashboard.php
   

3. Navigasi:

   • Klik menu Dashboard untuk melihat statistik dan grafik
   • Klik menu Produk untuk mengelola data produk

4. Data Dummy:

   • Data saat ini disimpan di SESSION (akan hilang jika browser ditutup)
   • Data awal: 3 produk (iPhone 13 Pro, Samsung Z Flip, Xiaomi Redmi Note 11 Pro)

Nanti (Dengan Database)

Ketika siap menggunakan database MySQL:

1. Import database:

   • Buka phpMyAdmin: http://localhost/phpmyadmin
   • Buat database baru atau import file data.sql
   • Jalankan query di file data.sql

2. Buat file koneksi database (config.php):

   <?php
   $host = 'localhost';
   $dbname = 'toko_elektronik';
   $username = 'root';
   $password = '';
   
   try {
       $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
       $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
   } catch(PDOException $e) {
       die("Koneksi gagal: " . $e->getMessage());
   }
   ?>

3. Ubah kode di admin.php dan dashboard.php:

   • Ganti $_SESSION['products'] dengan query database
   • Contoh:

     // Ganti ini:
     $_SESSION['products']
     
     // Dengan ini:
     $stmt = $pdo->query("SELECT * FROM produk");
     $products = $stmt->fetchAll(PDO::FETCH_ASSOC);

📊 Struktur Database (data.sql)

Tabel: produk

Field	Type	Deskripsi
id	INT(11)	Primary Key, Auto Increment
thumbnail	VARCHAR(255)	URL gambar produk
kategori	VARCHAR(100)	Kategori produk
produk	VARCHAR(255)	Nama produk
harga	DECIMAL(15,2)	Harga produk
stok	INT(11)	Jumlah stok
deskripsi	TEXT	Deskripsi produk
created_at	TIMESTAMP	Waktu dibuat
updated_at	TIMESTAMP	Waktu diupdate

Tabel: admin (Optional - untuk fitur login)

Field	Type	Deskripsi
id	INT(11)	Primary Key, Auto Increment
username	VARCHAR(50)	Username admin
password	VARCHAR(255)	Password (hashed)
nama	VARCHAR(100)	Nama lengkap
email	VARCHAR(100)	Email admin
created_at	TIMESTAMP	Waktu dibuat

🎨 Teknologi yang Digunakan

• Backend: PHP 7.4+
• Frontend: HTML5, CSS3, JavaScript
• Chart Library: Chart.js
• Icons: Font Awesome 6.4.0
• Database: MySQL (belum diimplementasi, struktur sudah siap)
• Server: Apache (XAMPP)

📝 Catatan Penting

1. Data Dummy:

   • Saat ini menggunakan PHP SESSION untuk menyimpan data
   • Data akan hilang jika session berakhir atau browser ditutup
   • Cocok untuk testing dan development

2. Struktur Siap Database:

   • File data.sql sudah berisi struktur tabel yang benar
   • Tinggal import ke database MySQL ketika siap
   • Minimal perubahan kode diperlukan untuk migrasi ke database

3. Responsive Design:

   • Layout responsif untuk mobile dan desktop
   • Sidebar menu yang interaktif

4. Keamanan (untuk production):

   • Tambahkan validasi input
   • Gunakan prepared statements untuk database
   • Hash password untuk fitur login
   • Sanitize data dari user input

🔄 Migrasi ke Database - Checklist

Ketika siap menggunakan database:

• Import data.sql ke MySQL
• Buat file config.php untuk koneksi database
• Update admin.php - ganti SESSION dengan query database
• Update dashboard.php - ganti SESSION dengan query database
• Test CRUD operations
• (Optional) Implementasi fitur login

📞 Support

Untuk pertanyaan dan bantuan, silakan hubungi developer.

---

Version: 1.0.0
Created: October 2025
Status: Development (Dummy Data)