Cheat Sheet Prompt

Panduan menulis perintah ke AI Builder untuk membangun website

1Dasar — Cara AI Bekerja

Pahami dua mode & tiga aturan emas agar hasilnya tepat sejak percobaan pertama.

🧭 Mode Plan

AI hanya menyusun rencana — tidak menyentuh file. Cocok untuk proyek baru atau ide yang masih kabur. Akhiri dengan menekan “Jalankan rencana ini”.

Mode PlanRencanakan website portfolio fotografi untuk fotografer pernikahan.

🔨 Mode Builder

AI langsung membuat/mengubah file dan tabel database. Cocok untuk membangun, mengubah, atau memperbaiki.

Mode BuilderBuat website portfolio fotografi pernikahan dengan galeri, halaman tentang, dan form kontak.

Tiga aturan emas

Sebut tujuan, bukan cuma nama. “Website untuk toko kue rumahan yang terima pesanan online” jauh lebih baik daripada “website toko kue”.
Sebut bagiannya satu per satu. Halaman apa, isi tiap bagian, data apa yang disimpan.
Satu prompt = satu perubahan besar. Untuk hal berbeda, kirim prompt terpisah agar mudah diperbaiki dan hemat kredit.

💡 Rumus prompt yang baik: [Jenis situs] untuk [siapa/tujuan], dengan [bagian-bagian], gaya [warna/suasana], dan [data yang perlu disimpan]

2Struktur & Halaman

Menentukan file, halaman, dan navigasi.

Halaman lengkapBuat website profil perusahaan dengan halaman: - index.html — hero, layanan, keunggulan, testimoni - tentang.html — sejarah, visi misi, tim - layanan.html — daftar layanan lengkap - kontak.html — form + peta + info Buat menu navigasi yang sama di semua halaman.

Struktur folderPisahkan CSS ke folder css/style.css dan JavaScript ke js/app.js. Gunakan file terpisah, jangan inline.

Layout dari awal

BuilderBuat layout grid: header lengket di atas, konten 3 kolom responsif, footer dengan 4 kolom tautan.

Menambah halaman

BuilderTambahkan halaman galeri.html dengan judul "Galeri", galeri foto grid masonry, dan tautkan ke menu.

💡 Responsif & aksesibilitas sudah jadi bawaan AI. Untuk memastikan, tulis: “pastikan responsif di HP dan semua gambar punya alt”.

3Desain & Gaya Visual

Cara menyebut warna, font, dan suasana dengan efektif.

Gaya visualGunakan desain modern minimalis: - Warna utama hijau tua (#14532d), aksen kuning (#facc15) - Font Poppins dari Google Fonts untuk judul, Inter untuk teks - Sudut membulat, bayangan halus, banyak ruang kosong - Tema terang (light mode)

Yang diinginkan	Cara menulis prompt
Warna spesifik	`warna utama #2563eb, latar krem #fef9f3`
Gaya umum	`gaya korporat bersih & profesional` / `playful & ceria`
Font	`font "Plus Jakarta Sans" dari Google Fonts`
Tema gelap	`dark mode dengan tombol pengalih tema`
Animasi	`animasi fade-in saat halaman di-scroll`
Ikon	`ikon dari Lucide (via CDN)`

Ikon & ilustrasi

BuilderPakai ikon Lucide dari CDN untuk fitur layanan. Gunakan placeholder gambar dari picsum.photos untuk sementara.

Tema gelap

BuilderTambahkan tombol pengalih tema terang/gelap di kanan atas. Simpan pilihan di localStorage dan ingat saat dibuka kembali.

⚠️ Tidak ada build step / npm. Library eksternal (Bootstrap, Tailwind CDN, Chart.js, dsb.) hanya bisa dimuat dari CDN lewat <script> atau <link>. Tulis jelas, mis. “pakai Bootstrap 5 dari CDN”.

4Responsive Design — Desktop / Mobile

Cara meminta tampilan yang berbeda di HP dan desktop, atau mengunci ke salah satu.

📐 Bawaan AI sudah responsif. Kalau tidak disebut, AI membuat tata letak yang menyesuaikan sendiri (desktop & mobile). Bagian ini untuk saat kamu butuh perilaku khusus — misal satu halaman hanya boleh untuk desktop, atau tampilan mobile jauh berbeda.

Pilih arah tampilan

Bawaan

Responsif (dua-duanya)

Tata letak menyesuaikan layar. Tidak perlu ditulis — ini default.

Desktop

Desktop-only

Halaman dirancang untuk layar lebar (mis. dashboard, tabel data).

Mobile

Mobile-only

Dirancang khusus layar HP (mis. aplikasi absensi, kalkulator).

Desktop-only

Halaman dibuat untuk layar lebar. Pengunjung HP melihat pesan “buka di desktop”.

BuilderHalaman dashboard ini khusus desktop. Jika dibuka di layar sempit (HP), sembunyikan isinya dan tampilkan pesan: "Halaman ini lebih nyaman dibuka di komputer. Silakan buka lewat layar yang lebih besar."

BuilderBuat layout desktop-only dengan lebar minimum 1200px, sidebar kiri tetap (fixed), dan area konten lebar. Kunci agar tidak "pecah" di layar kecil.

Mobile-only

Dirancang untuk HP: tombol besar, satu kolom, navigasi bawah.

BuilderBuat halaman ini khusus untuk HP: - Satu kolom, tombol besar & mudah disentuh - Bilah navigasi tetap di bawah layar - Lebar maksimal 480px, di tengah jika dibuka di desktop - Teks cukup besar untuk dibaca sambil berdiri

BuilderOptimalkan khusus layar HP: sembunyikan elemen yang hanya berguna di desktop, gunakan menu "hamburger", dan utamakan kecepatan serta area sentuh ≥ 44px.

Perilaku berbeda per ukuran layar

Kalau ingin elemen muncul/hilang atau berubah bentuk di ukuran tertentu:

Sembunyikan di HP

BuilderSembunyikan sidebar dan tabel lebar saat dibuka di HP, tapi tetap tampil utuh di desktop.

Ubah bentuk

BuilderDi desktop menu tampil mendatar di atas. Di HP, ubah jadi tombol hamburger yang membuka panel geser dari samping.

Kolom menyesuaikan

BuilderKatalog tampil 4 kolom di desktop, 2 kolom di tablet, 1 kolom di HP.

Tabel jadi kartu

BuilderTabel data di desktop, tapi berubah jadi daftar kartu bertumpuk saat di HP agar tidak perlu geser-geser.

Ukuran layar (titik henti umum)

Kalau mau menyebut angka pastinya, gunakan acuan ini:

Perangkat	Lebar layar	Sebutkan di prompt
📱 HP	< 640px	`di HP (di bawah 640px)`
📱 HP besar / tablet kecil	640–767px	`di layar sedang`
💻 Tablet	768–1023px	`di tablet (768–1023px)`
🖥️ Desktop	≥ 1024px	`di desktop (1024px ke atas)`
🖥️ Desktop lebar	≥ 1280px	`di layar lebar`

Kebutuhan	Cara menulis prompt
Kunci ke desktop	`halaman ini khusus desktop, tampilkan pesan "buka di komputer" kalau di HP`
Kunci ke mobile	`buat khusus HP, lebar maksimal 480px, rata tengah di desktop`
Elemen tertentu	`sembunyikan bagian statistik saat di HP`
Menu	`menu mendatar di desktop, hamburger di HP`
Grid katalog	`4 kolom desktop, 2 tablet, 1 HP`
Gambar	`gambar menyesuaikan lebar, tidak melebihi layar`
Font	`teks judul lebih kecil di HP (24px), lebih besar di desktop (40px)`
Orientasi	`susun berdampingan saat layar mendatar (landscape)`
Uji di HP	`pastikan tidak ada yang keluar batas layar atau perlu digeser`

Contoh: dashboard desktop-only

BuilderBuat dashboard admin khusus desktop: - Sidebar kiri tetap + konten lebar - Tabel data lengkap - Jika lebar layar < 1024px, ganti isi dengan pesan agar dibuka di komputer - Sembunyikan semua kontrol di layar kecil

Contoh: aplikasi mobile-only

BuilderBuat aplikasi absensi khusus HP: - Lebar maks 480px, rata tengah - Navigasi tab tetap di bawah - Tombol besar "Absen Masuk / Keluar" - Tampilkan jam besar di atas - Simpan riwayat ke database

💡 Cara menguji: buka situsmu di HP, atau di desktop tekan F12 lalu aktifkan mode perangkat (ikon HP) untuk melihat tampilan mobile tanpa perlu HP sungguhan.

⚠️ Penting: mobile-only / desktop-only berarti pengunjung dengan perangkat lain tidak bisa memakai situs. Pakai hanya bila memang disengaja (mis. alat internal pemilik). Kalau ingin semua bisa akses, cukup pakai responsif biasa (tulis: “pastikan rapi di HP maupun desktop”).

5SEO & Berbagi di Media Sosial

Agar situs muncul di Google dan tampil menarik saat tautannya dibagikan ke WhatsApp/media sosial.

🔎 AI tidak otomatis menambahkan informasi SEO. Sebut permintaan ini secara eksplisit agar situsmu mudah ditemukan dan tautannya tampil rapi saat dibagikan.

Judul & deskripsi (Google)

BuilderTambahkan informasi SEO di semua halaman: - Judul tab yang jelas (maks 60 karakter) - Deskripsi untuk Google (maks 160 karakter) - Nama brand di akhir judul Contoh: "Kopi Nusantara — Biji Kopi Lokasi Pilihan"

Pratinjau saat dibagikan (Open Graph)

BuilderSaat tautan dibagikan ke WhatsApp/Facebook/ Twitter, tampilkan pratinjau: - Judul & deskripsi singkat - Gambar pratinjau (1200×630) - Nama situs Tambahkan tag Open Graph untuk itu.

Ikon tab & perangkat

BuilderTambahkan favicon (ikon di tab browser) dan ikon untuk layar utama HP, lalu pasang di semua halaman.

Bahasa & mesin pencari

BuilderSetel bahasa halaman ke Indonesia (lang="id"), tambahkan sitemap sederhana dan izinkan Google mengindeks situs.

Contoh permintaan SEO lengkap

BuilderOptimalkan SEO untuk website toko kopi "Kopi Nusantara": - Judul: "Kopi Nusantara — Biji Kopi Lokasi Pilihan" - Deskripsi: "Beli biji kopi segar dari petani lokal. Pilihan arabika & robusta terbaik, dikirim ke seluruh Indonesia." - Gambar pratinjau: logo toko dengan latar cokelat - Favicon: biji kopi - Bahasa: Indonesia Tambahkan juga di halaman produk dan halaman tentang.

Kebutuhan	Cara menulis prompt
Muncul di Google	`optimalkan SEO agar muncul di pencarian Google, tambahkan judul dan deskripsi halaman`
Tautan rapi di WA	`buat pratinjau bagus saat tautan dibagikan ke WhatsApp dan media sosial`
Favicon	`tambahkan favicon berupa logo saya di tab browser`
Kata kunci	`sertakan kata "toko kue jakarta" dan "pesan kue online" secara alami`
Google Maps	`tambahkan lokasi toko yang terbaca Google (alamat, jam buka)`
Multi-halaman	`pastikan setiap halaman punya judul & deskripsi berbeda`

💡 Judul & deskripsi adalah yang paling penting. Kalau hanya sempat minta satu hal, minta itu — inilah yang muncul di hasil pencarian Google dan saat tautan dibagikan.

6Aksesibilitas — Mudah Dipakai Semua Orang

Membuat situs nyaman dipakai siapa saja, termasuk pengguna pembaca layar dan orang dengan gangguan penglihatan.

Gambar & teks alternatif

BuilderPastikan setiap gambar punya teks alternatif (alt) yang menjelaskan isinya, untuk pembaca layar. Gambar hiasan cukup diberi alt kosong.

Kontras & keterbacaan

BuilderPastikan kontras teks dan latar cukup (teks gelap di latar terang), ukuran font minimal 16px, dan jarak antarbaris nyaman.

Bisa dipakai tanpa mouse

BuilderPastikan semua tombol dan tautan bisa diakses dengan tombol Tab di keyboard, dan ada penanda jelas saat sedang difokus.

Form yang jelas

BuilderSetiap kolom form punya label yang jelas (ketik "Nama", bukan sekadar kotak kosong), dan pesan kesalahan mudah dimengerti.

Permintaan menyeluruhRapikan aksesibilitas situs: - Semua gambar punya teks alt - Kontras warna memadai - Bisa dinavigasi dengan keyboard (Tab) - Form punya label - Struktur judul berurutan (H1 lalu H2, bukan melompat) - Tombol punya area sentuh cukup besar di HP

💡 Kenapa penting? Situs yang aksesibel lebih ramah bagi semua orang — termasuk yang memakai HP sambil jalan, koneksi lambat, atau membaca di bawah sinar matahari. Bonusnya: penilaian Google juga lebih baik.

7Form & Validasi Input

Form yang benar menyimpan data dengan rapi dan memberi tahu pengunjung bila ada yang salah.

Form lengkap

BuilderBuat form pemesanan dengan: - Nama (wajib), Email (wajib, format email) - Nomor HP (wajib, hanya angka) - Alamat (wajib), Catatan (opsional) - Validasi saat dikirim: tandai kolom yang salah dengan pesan jelas - Setelah berhasil: tampilkan "Terima kasih, pesanan Anda sudah masuk" dan kosongkan form

Kolom pilihan & tanggal

BuilderForm pendaftaran acara: - Nama, email - Pilihan paket (dropdown: Reguler/VIP) - Tanggal kunjungan (date picker) - Jumlah orang (1-10) - Centang "Saya setuju syarat & ketentuan" Simpan ke database setelah valid.

Unggah berkas & gambar

BuilderForm dengan input gambar: - Pilih foto, tampilkan pratinjau sebelum kirim - Batasi ukuran maksimal 2 MB - Setelah dikirim, tampilkan gambar di galeri (ubah gambar jadi teks terenkode)

Menampilkan data masuk

BuilderForm kontak + daftar pesan masuk, tampilkan 10 terbaru dengan waktu kirim. Hanya saya (pemilik) yang bisa melihat daftarnya.

⚠️ Data dari form pengunjung tidak boleh disimpan hanya di browser. Minta AI menyimpannya ke database (lihat bagian Database) agar tidak hilang saat pengunjung menutup halaman.

8Animasi & Interaksi Lanjutan

Sentuhan dinamis agar situs terasa hidup — tanpa mengganggu.

Animasi saat menggulir

BuilderBuat elemen muncul halus (fade + naik) saat digulir ke bawah, dengan animasi bertahap antar-kartu. Jangan ganggu pembacaan.

Efek hover

BuilderTombol membesar sedikit & kartu terangkat saat kursor di atasnya, dengan transisi halus. Efek tetap wajar di layar sentuh (HP).

Galeri & lightbox

BuilderSaat gambar galeri diklik, buka tampilan besar (lightbox) dengan latar gelap, tombol tutup, dan panah untuk gambar berikutnya.

Tab & akordeon

BuilderBuat FAQ akordeon: pertanyaan diklik untuk membuka jawaban, panah berputar, hanya satu yang terbuka pada satu waktu.

Notifikasi & toast

BuilderSetelah form tersimpan, munculkan notifikasi kecil di pojok atas ("Data terkirim") yang hilang sendiri setelah 3 detik.

Mode gelap/terang

BuilderTombol pengalih tema terang/gelap, ingat pilihan pengunjung, ikuti pengaturan HP mereka secara otomatis saat pertama dibuka.

💡 Manis tapi jangan berlebihan. Animasi bagus untuk menuntun perhatian. Kalau terlalu banyak, situs terasa lambat dan membingungkan. Sebut: "animasi halus, tidak berlebihan".

9Gambar, Media & Ikon

Cara meminta gambar, ilustrasi, peta, video, dan ikon tanpa file sendiri.

🖼️ Situs user hanya berupa .html · .css · .js — tidak bisa menyimpan file gambar besar. Untuk gambar, gunakan tautan gambar dari internet (mis. layanan gratis) atau simpan sebagai teks terenkode di database.

Gambar sementara (placeholder)

BuilderGunakan gambar contoh dari picsum.photos untuk semua foto sementara, dengan ukuran yang sesuai. Nanti saya ganti dengan foto asli.

Ikon

BuilderPakai ikon dari Lucide (CDN) untuk fitur layanan: truk pengiriman, keamanan, dukungan 24 jam, dan garansi.

Ilustrasi

BuilderTambahkan ilustrasi dari unDraw untuk bagian "cara kerja" (3 langkah), gaya yang cocok dengan warna situs.

Peta lokasi

BuilderSematkan peta Google Maps untuk lokasi toko (Jl. Contoh No. 123, Jakarta) di halaman kontak dan footer.

Video YouTube

BuilderSematkan video YouTube (tautan: youtube.com/watch?v=XXXX) secara responsif di bagian profil perusahaan.

Ikut tampil cepat

BuilderMuat gambar secara bertahap (lazy load) dan tampilkan placeholder abu-abu sebelum gambar selesai termuat.

10Navigasi & Multi-Halaman

Mengatur banyak halaman dan tautan antar-halaman dengan rapi.

🔗 URL bersih otomatis: berkas tentang.html bisa dibuka lewat /tentang. Halaman 404.html kustom juga otomatis dipakai bila ada halaman yang tidak ditemukan.

Menu navigasi

BuilderBuat menu navigasi dengan logo di kiri, tautan halaman di tengah, dan tombol kontak di kanan. Menu menempel di atas saat digulir, dan jadi hamburger di HP.

Halaman 404 sendiri

BuilderBuat halaman 404.html yang ramah: pesan lucu, ilustrasi, dan tombol "Kembali ke beranda".

Navigasi bawah (HP)

BuilderUntuk aplikasi HP, buat bilah navigasi tetap di bawah dengan ikon beranda, riwayat, dan profil.

Tautan dalam halaman

BuilderBuat menu yang menggulir ke bagian dalam halaman (Tentang, Layanan, Kontak) dengan posisi tepat di bawah header.

11Kinerja & Kecepatan

Situs yang cepat lebih menyenangkan dan lebih disukai mesin pencari.

Ringan & cepat

BuilderBuat situs seringan mungkin: hindari perpustakaan besar kalau tidak perlu, muat gambar bertahap, dan gunakan CSS yang efisien.

Font cepat

BuilderMuat hanya 2 varian font (normal & tebal), dan tampilkan teks dengan font cadangan sampai font asli siap (agar tidak kosong).

Gambar hemat

BuilderGunakan gambar berukuran wajar (maks lebar 1600px), format modern, dan tentukan dimensi agar tata letak tidak bergeser.

Indikator memuat

BuilderSaat data sedang diambil dari database, tampilkan indikator memuat (spinner), dan pesan jelas bila gagal.

💡 Semua aset rakit.io sudah dikompresi (gzip) & di-cache, jadi situsmu memang cepat sejak awal. Fokus pada ukuran gambar — itu penyebab situs lambat yang paling umum.

12Konten & Tulisan

AI bisa menulis teksnya sekaligus — beri tahu siapa pembacanya.

Nada tulisan

BuilderTulis semua teks dengan nada ramah, hangat, dan sederhana (tanpa istilah rumit), seolah bicara ke teman.

Sasaran pembaca

BuilderTulis untuk ibu rumah tangga usia 30-50 yang baru mulai berbisnis online. Hindari istilah teknis, tonjolkan kemudahan.

Bagian penting

BuilderBuat judul utama yang menarik (headline), subjudul penjelas, dan tombol ajakan ("Pesan Sekarang", "Hubungi Kami").

Konten contoh

BuilderIsi dengan teks contoh yang masuk akal untuk bisnis kuliner rumahan di Bandung, 6 menu, 3 testimoni, dan informasi kontak.

💡 Semakin spesifik (siapa pembaca, bisnis apa, di mana), semakin bagus tulisan yang dihasilkan. Ganti "website bisnis" menjadi "website katering rumahan di Yogyakarta untuk acara keluarga".

13Keamanan & Data Pribadi

Melindungi data pengunjung dan menjaga agar tidak disalahgunakan.

Kebutuhan	Cara menulis prompt
Data sensitif	`tandai email, nomor HP, dan alamat sebagai data privat — hanya saya yang bisa lihat`
Form publik	`pengunjung hanya boleh mengirim, tidak boleh melihat daftar kiriman orang lain`
Anti-spam	`tambahkan kolom "ketik hasil 3+2" untuk mencegah bot mengirim form`
Data tidak hilang	`simpan semua data pengunjung ke database, jangan hanya di browser`
Kata sandi	`kalau ada area pribadi, jangan simpan kata sandi di situs — pakai pemilik saja`

⚠️ Prinsip aman: untuk data pengunjung yang bersifat pribadi (email, telepon, alamat), selalu atur sebagai khusus pemilik. Kamu melihat & mengelolanya lewat tab Database di editor.

14Integrasi Pihak Ketiga (CDN & Layanan)

Menambahkan layanan populer lewat CDN/tautan — tanpa server sendiri.

🔌 Tambahkan perpustakaan atau layanan lewat tautan (CDN). Sebutkan nama & sumbernya dengan jelas, mis. "pakai Chart.js dari CDN".

Kebutuhan	Prompt
Grafik & statistik	`tampilkan grafik penjualan bulanan pakai Chart.js dari CDN`
Peta	`sematkan Google Maps untuk lokasi Jl. Merdeka 10`
WhatsApp	`tambahkan tombol WhatsApp mengambang ke nomor 0812xxxx`
Instagram/sosial	`tambahkan tautan ke Instagram @tokosaya dan Facebook`
Video	`sematkan video YouTube youtube.com/watch?v=xxxx secara responsif`
Kerangka UI	`pakai Bootstrap 5 dari CDN untuk tata letaknya`
Tanggal	`pakai date picker yang rapi dan mudah dipakai di HP`
Kalender acara	`tampilkan kalender bulanan untuk memilih tanggal kunjungan`

15Tabel Data & Dashboard

Menampilkan banyak data dengan rapi, plus ringkasan angka dan grafik.

Tabel dengan sortir & cari

BuilderBuat tabel data barang dengan kolom Nama, Kategori, Jumlah, Harga. Bisa diurutkan per kolom, dicari, dan ada halaman (10 baris per halaman).

Ringkasan angka

BuilderDi atas tabel, tampilkan kartu ringkasan: total barang, total nilai (rupiah), dan jumlah barang dengan stok rendah.

Grafik

BuilderBuat grafik batang penjualan 6 bulan terakhir dan grafik lingkaran kategori produk terlaris (pakai Chart.js).

Tambah/ubah/hapus

BuilderForm tambah data, tombol ubah dan hapus di tiap baris dengan konfirmasi sebelum menghapus. Data langsung terbarui di tabel.

💡 Dashboard = desktop. Tabel lebar paling nyaman di layar besar. Minta: "tampilan tabel untuk desktop, dan jadi kartu bertumpuk di HP" (lihat bagian Responsive).

16Pola Prompt Lanjutan

Teknik agar hasil makin tepat, terutama untuk situs yang kompleks.

Iterasi bertahap (dari rencana ke hasil)

Alur terbaik1. Mode Plan: "Rencanakan aplikasi kasir untuk toko kelontong." 2. Baca & sesuaikan rencananya. 3. "Jalankan rencana ini." (mode Builder) 4. "Sekarang tambahkan fitur cetak struk." 5. "Perbaiki: stok berkurang otomatis setelah transaksi."

Konteks + permintaan

Beri contoh

BuilderBuat kartu produk seperti gaya marketplace, contoh tata letak: gambar di atas, nama, harga tebal, tombol "Beli" penuh lebar di bawah.

Sebut yang kamu tidak mau

BuilderBuat situs minimalis. JANGAN pakai warna mencolok, animasi berlebihan, atau tata letak yang ramai.

Rujuk bagian spesifik

BuilderDi halaman index.html, bagian hero: perbesar judul, tambahkan tombol kedua "Lihat Menu" di samping tombol "Pesan".

Minta perbaikan bertarget

BuilderTombol "Kirim" tidak berfungsi. Cek kenapa dan perbaiki agar form tersimpan ke database.

Saat hasil kurang pas

Masalah	Prompt perbaikan
Tata letak berantakan	`rapikan tata letak bagian layanan: sejajarkan ikon, judul, dan deskripsi dengan rapi`
Warna tidak cocok	`ganti aksen kuning jadi biru muda, sisanya tetap`
Terlalu penuh	`sederhanakan: tambah jarak antarbagian, kurangi elemen`
Fungsi error	`saat tombol diklik tidak terjadi apa-apa. Periksa dan perbaiki`
Belum responsif	`di HP tata letaknya rusak. Perbaiki agar rapi di layar kecil`
Ingin variasi	`buat 3 pilihan gaya hero, saya pilih salah satu`

💡 Satu pesan, satu tujuan. Umpan balik pendek & spesifik ("tombol terlalu kecil", "judul kurang tebal") jauh lebih efektif daripada mengulang seluruh permintaan.

17Database — Simpan & Tampilkan Data

Kekuatan utama rakit: situs bisa menyimpan data tanpa server sendiri. AI akan membuat tabelnya otomatis.

🗄️ Setiap project punya database bawaan. Data diakses dari JavaScript situs lewat fetch('/api/db/nama_tabel') — tanpa API key, tanpa CORS. Jangan gunakan localStorage untuk data yang dikirim pengunjung, karena localStorage hanya ada di browser satu orang.

Pola umum: pilih yang sesuai kebutuhan

Jenis situs / fitur	Prompt	Akses tabel
Buku tamu / komentar	`Buat buku tamu: form nama & pesan, daftar pesan terbaru di bawahnya.`	publik: list, create
Form kontak / pendaftaran	`Buat form kontak (nama, email, pesan). Kiriman hanya boleh dibaca pemilik.`	publik: create + email privat
Pendaftaran acara / RSVP	`Form pendaftaran seminar: nama, email, instansi, jumlah peserta.`	publik: create
Katalog produk	`Buat katalog produk (nama, harga, deskripsi, gambar) yang tampil di halaman dan bisa dilihat semua orang.`	publik: list
Polling / voting	`Buat polling: simpan pilihan pengunjung, tampilkan hasil dalam persentase.`	publik: list, create
Papan skor / leaderboard	`Simpan skor pemain (nama, skor) dan tampilkan peringkat tertinggi.`	publik: list, create
Pesanan (order)	`Form pesanan: nama, telepon, alamat, item, total. Hanya pemilik yang boleh melihat daftar pesanan.`	publik: create + data privat
Ulasan / rating produk	`Buat ulasan dengan nama, rating bintang 1–5, dan komentar.`	publik: list, create

Sebutkan tipe kolom

BuilderSimpan pendaftaran dengan kolom: nama (teks, wajib), email (teks, wajib, privat), telepon (teks, privat), tanggal_lahir (tanggal), jumlah_orang (angka), setuju_syarat (ya/tidak). Tampilkan konfirmasi setelah kirim.

Ingin melihat data sendiri?

Pengunjung anonim (belum ada akun). Jadi gunakan update/delete sebagai khusus pemilik — kamu melihat & mengelolanya lewat tab Database di editor.

BuilderSimpan data yang masuk, dan atur agar hanya saya (pemilik) yang bisa melihat, mengubah, dan menghapusnya.

💡 Contoh kombinasi kaya: “Buat toko online sederhana: katalog produk dari database (nama, harga, gambar, stok), keranjang di halaman, dan form checkout yang mengirim pesanan (nama, telp, alamat, item) — pesanan hanya bisa saya lihat.”

18Interaksi & Fitur JavaScript

Perilaku dinamis: filter, pencarian, keranjang, kalkulator, dan lainnya.

Pencarian & filter

BuilderTambahkan kotak pencarian dan filter kategori di atas katalog. Hasil menyaring langsung saat mengetik (tanpa reload).

Keranjang belanja

BuilderBuat keranjang: tombol "Tambah ke keranjang" di tiap produk, halaman keranjang dengan ubah jumlah dan total harga, lalu tombol checkout.

Kalkulator

BuilderBuat kalkulator harga: pilih paket, jumlah halaman, dan opsi tambahan, lalu tampilkan total secara langsung.

Slider / carousel

BuilderBuat slider gambar otomatis berganti tiap 5 detik, dengan tombol panah dan titik navigasi.

Modal / popup

BuilderSaat kartu produk diklik, buka modal berisi detail lengkap dan tombol tutup.

Unggah & tampilkan gambar

BuilderForm dengan input file gambar, tampilkan pratinjau sebelum dikirim. (kirim base64 ke database)

💡 Sebutkan perilakunya, bukan teknisnya. “Saat tombol diklik, total langsung berubah” lebih ampuh daripada “pakai addEventListener”. AI yang memilih cara teknisnya.

19Contoh Prompt Lengkap (Siap Pakai)

Tinggal salin, sesuaikan nama & detail, kirim ke mode Builder.

A · Undangan pernikahanBuat website undangan pernikahan digital untuk Rina & Dimas: - Cover dengan nama, tanggal, dan foto - Hitung mundur (countdown) ke hari acara - Detail acara: akad & resepsi (tanggal, waktu, lokasi + peta) - Buku ucapan: form nama & pesan, daftar ucapan terbaru - Konfirmasi kehadiran (nama, jumlah orang, hadir/tidak) Gaya elegan dengan warna sage green & krem, font serif "Playfair Display".

B · Toko online sederhanaBuat toko online untuk "Kopi Nusantara": - Katalog produk: nama, harga, deskripsi, gambar (dari database, bisa dilihat siapa saja) - Halaman detail produk dengan pilihan jumlah - Keranjang belanja dengan total harga - Form pemesanan (nama, telepon, alamat, catatan) → hanya saya yang bisa melihat - Halaman kontak dengan jam buka Warna cokelat kopi & krem, responsif.

C · Profil perusahaanBuat website profil PT Maju Jaya: - Beranda: hero, statistik angka, layanan unggulan, klien - Tentang: sejarah singkat, visi & misi, struktur tim - Layanan: 6 layanan dengan ikon dan deskripsi - Portofolio: galeri proyek dengan filter kategori - Blog sederhana: daftar artikel dari database - Kontak: form (nama, email, pesan), peta, info Gaya korporat biru tua & putih, font Inter.

D · Event & pendaftaranBuat website seminar "Digital Marketing 2026": - Hero dengan judul, tanggal, lokasi, tombol daftar - Agenda acara (rundown per jam) - Pembicara: foto, nama, jabatan, bio - Pendaftaran: nama, email, instansi, jumlah peserta → hanya saya yang bisa lihat - FAQ (accordion) - Hitung mundur ke hari acara Gaya modern ungu & putih.

E · Sistem inventaris (tabel)Buat aplikasi inventaris barang sederhana: - Tabel barang: nama, kategori, jumlah, harga, lokasi - Form tambah barang - Pencarian dan filter per kategori - Ringkasan: total barang, total nilai - Tampilkan peringatan jika stok di bawah 5 (dipakai internal — tabel hanya saya yang bisa kelola)

F · Kuis interaktifBuat kuis pilihan ganda tentang pengetahuan umum: - 10 pertanyaan, masing-masing 4 pilihan - Skor berjalan, umpan balik benar/salah - Halaman hasil dengan skor akhir - Simpan skor terbaik ke database dan tampilkan 5 tertinggi Gaya ceria, warna-warni, animasi halus.

20Memperbaiki & Mengubah

Cara mengoreksi hasil tanpa memulai dari nol.

Situasi	Prompt
Hasil kurang pas	`Perbaiki bagian hero: teksnya terlalu kecil dan tombolnya kurang menonjol. Buat lebih besar dan kontras.`
Ganti warna	`Ganti semua warna hijau menjadi biru navy, jaga sisanya.`
Ubah isi	`Ganti judul menjadi "Selamat Datang di Toko Kami" dan teksnya jadi lebih ramah.`
Susun ulang	`Pindahkan bagian testimoni ke bawah bagian harga.`
Tambah fitur	`Tambahkan tombol WhatsApp mengambang di kanan bawah.`
Perbaiki error	`Form tidak tersimpan saat dikirim. Cek dan perbaiki agar datanya masuk ke database.`
Kurangi/ubah gaya	`Terlalu ramai. Sederhanakan: kurangi warna, tambah ruang kosong.`

💡 Perbaikan makin presisi jika menyebut bagiannya. Sebut nama halaman/bagian (“di bagian footer”, “di halaman kontak”) agar AI mengubah yang tepat, bukan seluruh situs.

🔄 Semua perubahan bisa dibatalkan. Di mode Builder, perubahan ditampilkan dengan tombol Simpan / Batalkan sebelum diterapkan. Ada juga riwayat percakapan — buka kembali untuk melanjutkan.

21Batasan & Tips Teknis

Yang perlu diketahui agar tidak membentur dinding.

Aspek	Batas
Jenis file	.html · .css · .js saja
Ukuran per file	Maks 512 KB
Total per akun	Maks 20 MB (500 berkas/folder)
Panjang satu prompt	Maks 4.000 karakter
Kode server (PHP/Node sendiri)	Tidak bisa — pakai database bawaan
Build step / npm	Tidak ada — pakai CDN untuk library
Akun pengunjung	Belum ada — pengunjung anonim
Operasi database	read · create · update · delete
Tipe kolom database	text · number · boolean · date
Responsive	bawaan responsif · bisa dikunci mobile/desktop saja
SEO & pratinjau berbagi	harus diminta — AI tidak menambah otomatis
Gambar/media	lewat tautan — tidak bisa menyimpan file gambar sendiri

✅ Lakukan

Sebut tujuan & pengguna situs
Rinci bagian per bagian
Sebut data yang perlu disimpan
Satu perubahan besar per prompt
Pakai Mode Plan untuk ide yang belum matang
Sebutkan warna & font spesifik

🚫 Hindari

Prompt super singkat: “buat website”
Campur 5 perubahan berbeda dalam satu prompt
Minta PHP / backend sendiri
Simpan data penting di localStorage
Asumsi pengunjung punya akun
Ganti-ganti gaya tanpa menyebut bagiannya

⚠️ Hemat kredit AI. Setiap prompt memakai kredit (akun baru dapat bonus awal 20 kredit sekali, lalu 3 kredit gratis per hari, ditambah langganan & isi ulang). Rencanakan dulu dengan Mode Plan, baru jalankan — agar tidak bolak-balik memperbaiki.

★Template Prompt Universal

Salin, isi bagian dalam [ ], lalu kirim.

Buat website [jenis] untuk [siapa & tujuannya]. Halaman: - index.html — [bagian 1], [bagian 2], [bagian 3] - [halaman lain] — [isinya] Data yang perlu disimpan: [nama tabel + kolom + siapa yang boleh lihat/simpan]. Gaya: warna [utama] & [aksen], font [nama font], [modern/minimalis/elegan/ceria]. Pastikan responsif di HP dan mudah dipakai.