🏠 Kembali ke Portal Utama (tawau.netlify.app) Bengkel AI Agentic TVET 2026
LEMBARAN AKTIVITI 2 (PROMPT ASAS)

BINA SISTEM WEB CRUD SIMPLE & DATABASE MYSQL

Panduan Pantas: Muka Depan Portal, Penerangan, Pendaftaran, Log Masuk Dwi-Peranan (Admin/User), CRUD Inventori, Ujian Localhost & Pengubahsuaian Tema Antaramuka
📁

Struktur Fail Projek Ringkas

ecomart_crud/
├── config/
│   └── db_connection.php       (Sambungan Database PDO)
├── database/
│   └── ecomart_db.sql          (Skrip Database & Jadual)
├── assets/
│   └── css/
│       └── styles.css          (Penggayaan CSS)
├── index.php                   (Muka Depan Portal Awam)
├── about.php                   (Penerangan Portal)
├── register.php                (Daftar Akaun Baharu)
├── login.php                   (Log Masuk Admin & User)
├── logout.php                  (Log Keluar Sesi)
├── user_dashboard.php          (Papan Pemuka User)
└── admin/
    ├── dashboard.php           (Papan Pemuka Admin)
    ├── product_list.php        (Papar & Cari Produk - READ)
    ├── product_add.php         (Tambah Produk - CREATE)
    ├── product_edit.php        (Kemaskini Produk - UPDATE)
    └── product_delete.php      (Padam Produk - DELETE)
1

Bina Database & Sambungan PHP (PDO)

Prompt Asas 1: Database & Sambungan
Bina pangkalan data MySQL 'database/ecomart_db.sql' dan fail sambungan PDO 'config/db_connection.php': 1. Jadual 'users': id, full_name, username, email, password (hashed), role ('admin' atau 'user'). 2. Jadual 'products': id, product_name, category, price, stock_quantity, description. 3. Masukkan data sampel: - Admin (username: admin, password: admin123) - User (username: ali_papar, password: user123) - 4 contoh produk hasil tani / kraftangan.
2

Muka Depan Portal & Penerangan Portal

Prompt Asas 2: Muka Depan & Penerangan
Bina fail 'index.php', 'about.php', dan 'assets/css/styles.css': 1. 'index.php' (Muka Depan): Sediakan Hero Banner yang menarik, ringkasan perkhidmatan portal EcoMart, 3 kad statistik komuniti, dan paparan 4 produk terkini dari database. 2. 'about.php' (Penerangan Portal): Terangkan latar belakang portal komuniti, matlamat kelestarian (ESD), dan nilai integriti (VBE). 3. Sediakan navigasi atas (Navbar) dan Footer yang kemas dan responsif.
3

Pendaftaran & Log Masuk Dwi-Peranan (Admin & User)

Prompt Asas 3: Autentikasi Pengguna
Bina modul akaun 'register.php', 'login.php', dan 'logout.php': 1. 'register.php': Borang daftar nama penuh, username, email, dan kata laluan. Simpan password menggunakan password_hash() dengan peranan default 'user'. 2. 'login.php': Borang log masuk username dan password menggunakan session: - Jika peranan 'admin' -> lencongkan ke 'admin/dashboard.php'. - Jika peranan 'user' -> lencongkan ke 'user_dashboard.php'. 3. 'logout.php': Musnahkan session dan kembali ke login.php.
4

Papan Pemuka Pengguna (User Dashboard)

Prompt Asas 4: User Dashboard
Bina fail 'user_dashboard.php': 1. Pastikan hanya pengguna yang telah log masuk boleh mengakses halaman ini. 2. Paparkan ucapan selamat datang dengan nama pengguna. 3. Paparkan katalog semua produk aktif berserta harga RM dan butang "Tempah".
5

Papan Pemuka Pentadbir & Modul CRUD Lengkap (Admin)

Prompt Asas 5: Modul CRUD Admin
Bina modul CRUD pentadbir di dalam folder 'admin/': 1. 'admin/dashboard.php': Papan pemuka admin yang memaparkan ringkasan jumlah produk dan jumlah pengguna. 2. 'admin/product_list.php' [READ]: Jadual senarai produk dari database dengan carian kata kunci serta butang Edit dan Padam. 3. 'admin/product_add.php' [CREATE]: Borang untuk admin menambah produk baharu ke dalam database. 4. 'admin/product_edit.php' [UPDATE]: Borang untuk admin mengemaskini maklumat dan stok produk sedia ada. 5. 'admin/product_delete.php' [DELETE]: Skrip untuk memadam rekod produk dengan popup pengesahan confirm().
6

Jalankan Sistem di Localhost & Uji (Run Local)

Prompt Asas 6: Jalankan di Localhost
Sila bantu saya jalankan sistem web ini secara lokal (localhost): 1. Sediakan langkah import pangkalan data 'database/ecomart_db.sql'. 2. Mulakan local server di port yang sesuai (contoh: port 8000 / 8080 / 8090) dan berikan pautan URL untuk saya akses di pelayar web. 3. Sediakan maklumat akaun log masuk demo (Admin & User) untuk saya uji semua modul sekarang.
🌐 MAKLUMAT AKSES PELAYAR (LOCALHOST):
• URL Muka Depan: http://localhost:8090
• Akaun Admin: admin / Kata Laluan: admin123
• Akaun User: ali_papar / Kata Laluan: user123
7

Pengubahsuaian Tema Antaramuka & Sumber Rujukan (UI Theming)

📌 Di Mana Mendapatkan Rujukan & Inspirasi Tema UI?
🎨 Palet Warna & Kod HEX: • Coolors.co (Jana 5 palet warna harmoni)
• ColorHunt.co (Koleksi palet popular)
• Realtime Colors (Pratonton UI web)
🔤 Tipografi & Fon Google: • Google Fonts
• Plus Jakarta Sans / Inter (Korporat/TVET)
• Outfit / Poppins (E-Commerce Mesra)
• Space Grotesk (Teknologi/Koding)
✨ Susun Atur & Komponen UI: • Dribbble.com (Cari: Dashboard UI)
• Uiverse.io (Glassmorphism & Butang CSS)
• Land-book (Inspirasi Landing Page)
Prompt 7A: Mengubah Skema Warna & Tema Subjek (Color Palette Switch)
Tolong ubah gaya tema dan skema warna sistem web saya di fail 'assets/css/styles.css': 1. Tukar palet warna utama berasaskan rujukan tema [PILIH: Biru Korporat / Moden Gelap / Pastel Automotif]: - Warna Utama (Primary): #2563eb (Biru Diraja) - Warna Utama Hover: #1d4ed8 - Latar Belakang Cerah: #f8fafc - Warna Teks: #0f172a 2. Tukar fon Google kepada 'Outfit' atau 'Inter'. 3. Kemaskini kad produk dan butang supaya mempunyai bucu sedikit melengkung (border-radius: 12px) dan bayang lembut (soft shadow).
Prompt 7B: Mengubah Gaya Moden (Glassmorphism / Dark Mode)
Tolong kemaskini antaramuka sistem web saya supaya mempunyai sentuhan gaya moden 'Dark Mode' dan 'Glassmorphism' di 'assets/css/styles.css': 1. Latar belakang gelap bergradien: background: linear-gradient(135deg, #0f172a, #1e293b). 2. Kad dan Papan Pemuka menggunakan kesan kaca lutsinar (Glassmorphism): - background: rgba(30, 41, 59, 0.7); - backdrop-filter: blur(10px); - border: 1px solid rgba(255, 255, 255, 0.1); 3. Warna teks cerah (#f1f5f9) dan teks pudar (#94a3b8). 4. Berikan sedikit kesan bersinar (Glow Effect) pada butang utama apabila kursor diletakkan di atasnya (hover).

🚀 Opsi Pantas: Prompt All-in-One (Bina & Run Sekaligus)

Gunakan prompt satu-langkah ini sekiranya ingin menjana keseluruhan sistem CRUD dan menjalankannya sekali gus.

Bina satu sistem web dinamik CRUD lengkap (PHP + MySQL + CSS) untuk "EcoMart Digital Enterprise" dan jalankan di localhost: 1. Pangkalan Data: ecomart_db.sql (jadual users & products) dan config/db_connection.php (PDO). 2. Muka Depan & Penerangan: index.php (hero banner, statistik, produk) dan about.php (info portal). 3. Autentikasi Dwi-Peranan: register.php, login.php (password_hash, session, lencongkan admin ke admin/dashboard.php dan user ke user_dashboard.php), dan logout.php. 4. Papan Pemuka User: user_dashboard.php (katalog produk & tempahan). 5. Modul CRUD Admin: - admin/dashboard.php (ringkasan statistik) - admin/product_list.php (Read & Search) - admin/product_add.php (Create) - admin/product_edit.php (Update) - admin/product_delete.php (Delete dengan pengesahan) 6. Reka Bentuk UI: Penggayaan CSS moden bertema hijau kelestarian (atau tema pilihan) menggunakan Google Fonts Plus Jakarta Sans di assets/css/styles.css. 7. Jalankan local server dan berikan pautan URL localhost bersama akaun demo untuk diuji.