SQL Master: Cheat Sheet & Live Playground 🚀

Selamat datang di SQL Master! Ini adalah proyek mandiri interaktif yang dirancang khusus sebagai pengingat dan media belajar rumus-rumus kueri SQL. Proyek ini berjalan sepenuhnya di peramban (browser) Anda tanpa membutuhkan server atau database eksternal.

---

✨ Fitur Utama

1. Rumus Kueri SQL (Cheat Sheet):

   • Dilengkapi panduan lengkap dari SELECT dasar, penyaringan (WHERE), pencarian kata (LIKE), pengurutan (ORDER BY), pembatasan (LIMIT), pengelompokan (GROUP BY), hingga klausa penyaringan agregat (HAVING).
   • Setiap rumus dilengkapi dengan tombol Salin Contoh dan Coba Kueri yang otomatis mengarahkan Anda ke Live Playground.

2. Visualisasi Interaktif JOIN:

   • Diagram Venn interaktif menggunakan grafik SVG dinamis.
   • Pilih tipe JOIN (INNER JOIN, LEFT JOIN, RIGHT JOIN, FULL JOIN) dan diagram Venn akan menyala secara visual, menampilkan kueri SQL-nya, serta memperlihatkan simulasi baris tabel data yang cocok secara real-time.

3. Katalog Tipe Data SQL:

   • Ringkasan komprehensif untuk tipe data Numeric, Karakter/Teks, Waktu/Tanggal, serta tipe data modern lainnya lengkap dengan ukuran memori penyimpanan dan contoh kueri pembuatannya.

4. Live SQL Playground & Schema Browser:

   • Tulis kueri SQL pilihan Anda di terminal konsol dan eksekusi secara langsung.
   • Dilengkapi panel struktur database (schema browser) interaktif untuk melacak kolom, tipe data, serta Primary Key dan Foreign Key pada tabel simulasi e-commerce (customers, products, orders).
   • Mendukung manipulasi data langsung (INSERT, UPDATE, DELETE, dan CREATE TABLE). Anda dapat melakukan perubahan dan datanya akan tersimpan sementara di memori browser!
   • Fitur Format SQL untuk merapikan penulisan huruf besar (kapitalisasi) untuk keyword utama SQL secara otomatis.

5. Pencarian Real-Time:

   • Filter cepat di bagian atas halaman untuk menemukan rumus atau tipe data tertentu secara instan ketika Anda mengetik.

---

📁 Struktur Berkas Proyek

sql-cheat-sheet/
├── index.html       # Struktur halaman utama (Semantic HTML5)
├── index.css        # Desain visual modern (Glassmorphism & Neon Accent)
├── data.js          # Pusat data dokumentasi & data tabel awal
├── sql-engine.js    # Mesin parsing & eksekusi SQL berbasis JS
├── app.js           # Pengendali antarmuka (DOM Controllers & Events)
└── README.md        # Panduan penggunaan proyek ini (Dokumen ini)

---

🚀 Cara Menjalankan Proyek

Sangat mudah! Karena proyek ini dibangun menggunakan teknologi web murni (Vanilla HTML, CSS, dan JavaScript), Anda hanya perlu membuka berkas index.html langsung di peramban web kesayangan Anda:

1. Buka Menggunakan Browser:

   • Cari berkas index.html di dalam direktori C:\Users\ncexs\.gemini\antigravity-ide\scratch\sql-cheat-sheet.
   • Klik kanan pada index.html dan pilih Open with... lalu pilih browser Anda (Chrome, Edge, Firefox, Safari).
   • Alternatif: Seret (drag and drop) berkas index.html langsung ke tab baru browser Anda.

2. Gunakan Live Server (Opsional):

   • Jika Anda memiliki ekstensi "Live Server" di VS Code atau IDE Anda, Anda cukup klik kanan berkas index.html lalu pilih Open with Live Server.

---

💡 Tips & Trik Playground

• Pintasan Keyboard: Saat mengetik kueri SQL di terminal konsol, gunakan kombinasi tombol Ctrl + Enter (atau Cmd + Enter di Mac) untuk menjalankan kueri Anda secara cepat!
• Reset Database: Jika Anda melakukan kueri modifikasi (INSERT, UPDATE, DELETE) dan ingin mengembalikan tabel e-commerce ke kondisi semula, cukup klik tombol Reset Database Mock berwarna merah muda di pojok kiri bawah sidebar navigasi.
• Format SQL: Klik tombol Format SQL di bagian bawah editor konsol untuk merapikan spasi dan otomatis mengonversi keyword SQL Anda menjadi huruf kapital agar terlihat rapi dan profesional!

---

Selamat Belajar & Selamat Mencoba! Semoga proyek pengingat ini bermanfaat untuk meningkatkan keahlian kueri database Anda. 💻✨