Panduan Deploy & FAQ - Toko Online

✓
Node.js versi 18 atau lebih baru. Cek dengan perintah node -v di terminal. Belum ada? Unduh versi LTS di nodejs.org. Pengguna Windows cukup jalankan file .msi-nya.
✓
Terminal / Command Prompt. macOS: aplikasi Terminal. Windows: gunakan Git Bash (disarankan) atau PowerShell. Git Bash bisa diunduh di git-scm.com.
✓
Akun Cloudflare gratis. Dibuat di Langkah 2. Hanya butuh email aktif.
✓
File template yang sudah diekstrak. Ekstrak file ZIP yang Anda terima, lalu ingat lokasi foldernya.
✓
(Opsional) Domain sendiri dan akun Fonnte kalau ingin balasan WhatsApp otomatis. Keduanya bisa ditambahkan belakangan.

💡 Tidak perlu bisa coding. Setelah deploy pertama, semua isi website diubah lewat dashboard admin di browser.

Daftar Akun Cloudflare

Buka dash.cloudflare.com/sign-up.
Isi email aktif dan password, lalu klik Sign Up.
Cek kotak masuk email Anda, klik tautan verifikasi dari Cloudflare (jangan lupa cek folder Spam).
Login ke dashboard. Selesai — tanpa kartu kredit, tanpa biaya.

⚠️ Penting: daftar dengan email milik Anda sendiri. Semua data website (konten, produk, password admin) tersimpan di akun ini. Simpan email & password-nya baik-baik. Satu akun bisa dipakai untuk banyak website.

Jalankan `deploy.sh`

Buka terminal, masuk ke folder template, lalu jalankan:

cd toko-online
chmod +x deploy.sh
./deploy.sh

Di Windows (Git Bash) perintahnya sama. Kalau muncul error izin akses, jalankan bash deploy.sh.

Script akan mengerjakan semuanya otomatis:

Memeriksa Node.js dan memasang Wrangler (alat deploy Cloudflare).
Membuka browser untuk login Cloudflare — klik Allow.
Membuat database D1 dan penyimpanan KV.
Mengisi ID database & KV ke wrangler.toml, termasuk membuat kunci rahasia acak.
Membuat tabel database, lalu deploy ke Cloudflare Pages.

Di akhir akan muncul alamat website dan alamat admin. Contoh:

🌐 Website:  https://toko-online.pages.dev
🔧 Admin:    https://toko-online.pages.dev/admin.html
📝 Login admin: admin / admin128

💡 Proses pertama kali mengunduh beberapa file, jadi butuh 1–2 menit. Kalau browser tidak terbuka otomatis, salin tautan yang muncul di terminal ke browser Anda.

Membuat D1 & KV secara Manual

deploy.sh sudah membuat keduanya otomatis. Bagian ini dipakai kalau script berhenti di tengah jalan, atau kalau Anda ingin membuatnya sendiri dari dashboard.

a. Buat database D1

Jalankan dari folder template:

npx wrangler d1 create toko-online-db

Catat nilai database_id yang muncul di layar.

b. Buat KV Namespace

npx wrangler kv namespace create toko-online-kv

Catat nilai id yang muncul.

c. Tempel kedua ID ke `wrangler.toml`

Buka file wrangler.toml dengan editor teks (Notepad, TextEdit, VS Code), lalu isi bagian berikut:

[[d1_databases]]
binding = "DB"
database_name = "toko-online-db"
database_id = "tempel-id-d1-di-sini"

[[kv_namespaces]]
binding = "KV"
id = "tempel-id-kv-di-sini"

d. Siapkan tabel & deploy ulang

npx wrangler d1 execute toko-online-db --file=./schema.sql
npx wrangler pages deploy ./public --project-name=toko-online

⚠️ Jangan mengubah nama binding (DB dan KV) — kode template mencari nama persis itu. Kalau ID salah, website akan menampilkan error no such database.

Login Admin Pertama Kali & Ganti Password

Buka https://toko-online.pages.dev/admin.html (ganti dengan alamat website Anda).
Login dengan username admin dan password admin128 (huruf kecil semua).
Setelah masuk, klik menu 🔒 Ganti Password di sidebar.
Isi password baru (minimal 6 karakter) dan konfirmasi, lalu klik Ganti Password.
Login ulang memakai password baru Anda.

🚨 WAJIB GANTI PASSWORD

Password default admin128 diketahui siapa pun yang pernah membaca dokumentasi ini. Selama belum diganti, orang lain bisa masuk dan mengubah isi website Anda. Ganti segera setelah login pertama. Password disimpan dalam bentuk terenkripsi (hash) di database, bukan teks biasa.

Mengubah Konten dari Dashboard Admin

Semua isi website diubah dari dashboard admin — tanpa menyentuh kode. Berikut menu yang tersedia:

Menu	Yang bisa diatur
🏠 Beranda / Hero	Banner, judul, dan subjudul toko
📁 Kategori	Kategori produk untuk filter di halaman depan
📦 Produk	Produk + harga + gambar + link pesan WhatsApp
⭐ Testimoni	Ulasan pembeli
📞 Kontak	Kontak toko + nomor WhatsApp
🌐 Social Media	Akun sosial media toko
⚙️ Pengaturan	Nama toko, tagline, logo, SEO, WhatsApp otomatis
🔒 Ganti Password	Ubah password admin

Tips mengelola konten

•
Setiap halaman punya tombol Simpan. Tunggu notifikasi hijau muncul sebelum pindah menu.
•
Gambar diisi dengan URL gambar yang diawali https://. Bisa memakai link dari Imgur, Cloudinary, atau hosting gambar lain. Pastikan gambarnya bisa dibuka publik.
•
Urutan menentukan posisi tampil (isi angka: 1, 2, 3, …).
•
Perubahan biasanya langsung tampil. Kalau belum, refresh paksa dengan Ctrl+Shift+R (Windows) atau Cmd+Shift+R (Mac).
•
Judul & deskripsi SEO diisi di menu Pengaturan supaya website Anda mudah ditemukan di Google.

Menghubungkan Domain Sendiri

Alamat *.pages.dev sudah cukup untuk mulai. Kalau ingin tampil lebih profesional, ikuti langkah berikut.

Beli domain di registrar mana pun — Cloudflare Registrar, Niagahoster, Rumahweb, Namecheap, dan lainnya.
Tambahkan domain ke Cloudflare: dashboard Cloudflare → Add a site → masukkan nama domain → pilih paket Free. Cloudflare akan memberi dua alamat nameserver.
Ganti nameserver di tempat Anda membeli domain dengan dua alamat dari Cloudflare (contoh: dana.ns.cloudflare.com). Proses ini butuh 5 menit sampai 24 jam.
Buka Cloudflare → Workers & Pages → pilih project toko-online → tab Custom domains → Set up a domain → ketik domain atau subdomain (contoh: namatoko.com atau www.namatoko.com) → Set up.
Selesai. Sertifikat HTTPS dibuat otomatis dan gratis.

💡 Kalau domain Anda sudah dikelola Cloudflare, cukup lakukan langkah 4 saja.

Mengatur Nomor WhatsApp

Ada dua bagian yang perlu diatur. Bagian A wajib, bagian B opsional.

A. Nomor WhatsApp yang tampil di website

Masuk ke dashboard admin → menu Kontak atau Pengaturan → isi kolom Nomor WhatsApp, lalu simpan. Gunakan format kode negara tanpa tanda plus dan tanpa angka 0 di depan.

✅ Benar : 6281234567890
❌ Salah : 081234567890
❌ Salah : +62 812-3456-7890

Nomor ini dipakai tombol WhatsApp melayang, tombol pada form kontak, dan tombol pesan pada setiap produk. Nomor bawaan template adalah 6281234567890 — pastikan sudah diganti.

B. Balasan WhatsApp otomatis (opsional)

Masuk ke menu Pengaturan → bagian WhatsApp Integration → pilih mode:

•
Fonnte API — paling mudah. Daftar di fonnte.com, hubungkan nomor WhatsApp Anda dengan memindai QR, lalu salin token ke kolom API Key. Cocok untuk pemula.
•
WAHA Webhook — untuk yang ingin menjalankan sendiri di server/VPS. Perlu keahlian teknis lebih.
•
Kosongkan saja kalau tidak perlu. Form kontak tetap berfungsi: pengunjung diarahkan membuka WhatsApp Anda secara manual.

C. Cara mengetes

Buka website Anda di HP → klik tombol WhatsApp → pastikan nomor tujuan dan isi pesannya sudah benar. Kalau salah, ulangi bagian A.

Troubleshooting

Kesalahan yang paling sering terjadi dan cara mengatasinya.

❌ `node: command not found` atau `'node' is not recognized`

Node.js belum terpasang, atau terminal belum dibuka ulang setelah instalasi. Pasang Node.js versi LTS dari nodejs.org, lalu tutup dan buka ulang terminal.

❌ `npx: command not found`

Biasanya karena Node.js tidak terpasang sempurna. Unduh ulang installer Node.js versi LTS (npm dan npx sudah termasuk di dalamnya).

❌ `wrangler: command not found`

Jalankan npm install -g wrangler, tunggu selesai, lalu ulangi perintah sebelumnya.

❌ Login admin gagal: "Username atau password salah"

Pastikan username admin dan password admin128, semuanya huruf kecil. Kalau password sudah pernah diganti dan lupa, ikuti cara reset di poin berikutnya.

❌ Lupa password admin

Jalankan perintah ini dari folder template, lalu login kembali dengan admin / admin128:

npx wrangler d1 execute toko-online-db --command "DELETE FROM settings WHERE key IN ('admin_password_hash','admin_password_salt')"

Jangan lupa segera ganti password lagi dari menu 🔒 Ganti Password.

❌ Halaman admin kosong / "Gagal memuat konten"

Binding database dan KV di wrangler.toml belum benar. Pastikan database_id dan id KV sudah terisi, lalu deploy ulang dengan npx wrangler pages deploy ./public --project-name=toko-online.

❌ Error `no such database` (kode 10021)

ID database di wrangler.toml salah atau databasenya sudah dihapus. Buka dashboard Cloudflare → D1, salin ID terbaru, tempel ke wrangler.toml, lalu deploy ulang.

❌ API error 500 / "Database not initialized"

Tabel database belum dibuat. Jalankan:

npx wrangler d1 execute toko-online-db --file=./schema.sql

❌ Perubahan konten tidak muncul

Refresh paksa halaman dengan Ctrl+Shift+R (Windows) atau Cmd+Shift+R (Mac). Cloudflare juga menyimpan versi cache singkat, jadi tunggu 1–2 menit lalu muat ulang.

❌ Deploy gagal karena nama project sudah dipakai

Ganti --project-name dengan nama lain yang belum dipakai, contoh --project-name=toko-online-saya.

❌ Tombol WhatsApp membuka nomor yang salah

Nomor bawaan 6281234567890 belum diganti. Ubah di menu Kontak atau Pengaturan, ingat format 62… tanpa angka 0 atau tanda plus di depan.

❌ Gambar tidak muncul

Pastikan URL-nya lengkap dan diawali https://, serta gambarnya bisa dibuka publik (bukan tautan halaman Google Drive). Untuk Google Drive, ubah izin file menjadi Anyone with the link lalu pakai link langsungnya.

❌ WhatsApp otomatis tidak mengirim pesan

Token Fonnte salah atau kedaluwarsa, atau perangkat WhatsApp-nya terputus. Buka dashboard Fonnte, sambungkan ulang dengan memindai QR, lalu salin token baru ke menu Pengaturan.

❌ Domain belum bisa dibuka setelah dipasang

Perubahan nameserver butuh waktu sampai 24 jam. Pastikan nameserver di tempat Anda membeli domain sudah persis sama dengan yang diberikan Cloudflare. Kalau subdomain, pastikan ditulis lengkap (contoh: www.namatoko.com).

❌ `wrangler login` tidak bisa membuka browser

Ini terjadi kalau Anda menjalankan perintah di server tanpa tampilan grafis (VPS). Solusi paling mudah: lakukan deploy dari komputer atau laptop Anda sendiri. Kalau harus di server, gunakan perintah npx wrangler login --browser=false dan buka tautan yang muncul di perangkat lain yang punya browser.

❌ Keranjang belanja hilang saat ganti browser atau HP

Keranjang disimpan di browser pengunjung (localStorage), bukan di server. Ini normal — keranjang akan muncul lagi setelah pengunjung menambahkan produk pada perangkat itu.

❌ Filter kategori tidak menampilkan produk apa pun

Pastikan setiap produk sudah diberi Kategori yang sama dengan nama kategori yang Anda buat.

FAQ (Pertanyaan yang Sering Ditanyakan)

Klik pertanyaan untuk melihat jawabannya. Versi teks juga tersedia di file FAQ.md.

1. Apakah saya butuh kartu kredit untuk deploy? +

Tidak. Semua layanan yang dipakai template ini (Cloudflare Pages, Workers, D1, dan KV) punya paket gratis dan tidak meminta kartu kredit saat pendaftaran. Anda hanya perlu email aktif.

2. Berapa biaya hosting per bulan? Ada biaya tersembunyi? +

Rp0. Paket gratis Cloudflare sudah lebih dari cukup untuk website UMKM: 100.000 request per hari, database D1 5 GB, dan penyimpanan KV 1 GB. Biaya baru muncul kalau trafik Anda sudah sangat besar, dan itu pun sifatnya opsional. Satu-satunya pengeluaran opsional adalah domain sendiri (±Rp150–200 ribu per tahun).

3. Bisakah pakai domain sendiri, bukan alamat pages.dev? +

Bisa, dan gratis. Anda cukup membeli domain, memindahkannya ke Cloudflare, lalu menambahkannya di menu Custom domains pada project Pages Anda. Sertifikat HTTPS dibuat otomatis. Langkah lengkapnya ada di Langkah 7 halaman panduan.

4. Berapa lama proses deploy dari nol? +

Sekitar 10–20 menit untuk pertama kali, sudah termasuk membuat akun Cloudflare dan mengunduh Node.js. Deploy berikutnya (saat ganti konten kode) hanya butuh 1–2 menit.

5. Apakah saya harus bisa coding? +

Tidak. Setelah deploy pertama berhasil, seluruh isi website (teks, gambar, produk, artikel) diubah dari dashboard admin di browser. Kode hanya perlu disentuh kalau Anda ingin mengubah warna atau tata letak.

6. Apakah bisa dipakai tanpa WhatsApp? +

Bisa. WhatsApp bersifat opsional. Kalau Anda kosongkan nomor WhatsApp di menu Pengaturan, tombol WhatsApp melayang dan tombol pesan via WA akan hilang otomatis — pengunjung cukup melihat informasi kontak biasa.

7. Bagaimana cara update template setelah saya beli? +

Simpan email bukti pembelian Anda, lalu kirim permintaan update ke penjual. Anda akan menerima folder versi terbaru. Cara update: timpa file di folder public/ dan functions/ dengan versi baru (jangan sentuh wrangler.toml), lalu jalankan npx wrangler pages deploy ./public --project-name=nama-project. Semua konten Anda tersimpan di database D1, jadi tidak akan hilang.

8. Akun Cloudflare-nya milik siapa? Apakah data saya aman? +

Milik Anda sepenuhnya. Anda yang mendaftar, Anda yang login, dan penjual tidak punya akses apa pun ke akun, database, maupun password admin Anda. Simpan baik-baik email dan password Cloudflare Anda.

9. Apa saja batas paket gratis Cloudflare? +

Pages: 500 build/deploy per bulan. Workers: 100.000 request per hari. D1: 5 juta baris dibaca dan 100.000 baris ditulis per hari, penyimpanan 5 GB. KV: 100.000 baca dan 1.000 tulis per hari. Untuk website UMKM, angka ini sangat lega.

10. Bisakah hosting di tempat lain, misalnya Netlify atau VPS? +

Secara teknis bisa, tapi tidak praktis. Bagian tampilan (HTML/CSS) bisa dipindah ke hosting apa pun, tetapi backend-nya memakai Pages Functions, D1, dan KV yang khusus Cloudflare. Kalau dipindah, backend harus ditulis ulang. Kami sangat menyarankan tetap di Cloudflare karena gratis dan paling mudah.

11. Bagaimana kalau saya lupa password admin? +

Tenang, masih bisa direset. Jalankan perintah berikut di terminal dari folder template, lalu login lagi dengan admin / admin128:

npx wrangler d1 execute toko-online-db --command "DELETE FROM settings WHERE key IN ('admin_password_hash','admin_password_salt')"

Setelah itu segera ganti password lagi dari menu 🔒 Ganti Password.

12. Apakah bisa ada lebih dari satu admin? +

Saat ini template memakai satu akun admin (username admin). Kalau Anda perlu beberapa pengelola, bagian login bisa dikembangkan lebih lanjut oleh developer — struktur datanya sudah siap ditambah.

13. Bisakah saya ganti warna, logo, dan font? +

Logo, nama, dan tagline diubah langsung dari menu Pengaturan. Untuk warna, buka public/index.html dan ubah nilai primary dan accent pada bagian tailwind.config. Font diatur di baris @import pada public/css/style.css.

14. Apakah saya boleh menjual ulang template ini? +

Tidak. Lisensi template ini untuk pemakaian pada website Anda sendiri atau website klien Anda (satu pembelian untuk satu website). Anda tidak boleh menjual ulang, membagikan ulang, atau mendistribusikan file template ini sebagai produk.

15. Apakah ada dukungan kalau saya kesulitan? +

Ada. Sebelum menghubungi kami, coba dulu bagian Troubleshooting di halaman panduan — sebagian besar kendala umum sudah ada solusinya di sana. Kalau masih bingung, hubungi kami lewat WhatsApp dengan menyertakan tangkapan layar pesan error yang muncul agar lebih cepat dibantu.

Masih bingung? 😊

Coba ulangi langkahnya dengan teliti, sebagian besar kendala sudah ada solusinya di bagian Troubleshooting di atas. Kalau tetap tidak berhasil, hubungi kami lewat WhatsApp dengan menyertakan tangkapan layar pesan error yang muncul.

Hubungi via WhatsApp

Daftar Isi

Prasyarat