Pengaturan & Tutorial Koneksi

Panduan lengkap menghubungkan Admin Panel dengan halaman utama

Status Koneksi

Terhubung

Masukkan path relatif (misal: index.html) atau URL lengkap jika berbeda domain

Klik untuk menguji koneksi ke halaman utama

Cara Kerja Koneksi

Penting! Admin panel dan halaman utama harus berada di domain yang sama agar bisa saling terhubung melalui localStorage.

Bagaimana Data Tersimpan?

Semua pengaturan yang Anda ubah di Admin Panel disimpan di localStorage browser. Ketika halaman utama (index.html) dibuka, ia akan membaca data dari localStorage yang sama dan menerapkan perubahan secara otomatis.

Tutorial Setup Langkah demi Langkah

1

Upload Kedua File ke Hosting

Upload file index.html dan admin.html ke folder yang sama di hosting cPanel Anda.

public_html/ ├── index.html ← Halaman utama website └── admin.html ← Panel admin
2

Akses Admin Panel

Buka admin panel melalui browser dengan menambahkan /admin.html di URL website Anda.

https://yourdomain.com/admin.html
3

Konfigurasi URL Halaman Utama

Di bagian "Status Koneksi" di atas, masukkan URL atau path halaman utama:

index.html https://yourdomain.com/index.html /landing/index.html
4

Edit Konten di Tab Lainnya

Gunakan menu di sidebar untuk mengedit berbagai bagian website:

  • Branding & Logo - Logo, nama brand, favicon
  • Hero Section - Headline dan subheadline
  • Harga & Paket - 2 paket pricing
  • URL & Links - Semua link tombol
  • Footer - Copyright dan disclaimer
5

Simpan & Preview

Setelah mengubah pengaturan, klik tombol "Simpan Perubahan" lalu buka tab "Preview Website" atau kunjungi halaman utama untuk melihat hasil.

FAQ - Pertanyaan Umum

Apakah perubahan langsung terlihat di website?

Ya! Setelah Anda klik "Simpan Perubahan", data langsung tersimpan. Ketika halaman utama di-refresh, perubahan akan langsung terlihat.

Mengapa perubahan tidak muncul di halaman utama?

Pastikan kedua file (admin.html dan index.html) berada di domain yang sama. localStorage hanya bisa diakses dalam domain yang sama. Jika berbeda domain, Anda perlu menggunakan metode lain seperti API server.

Bagaimana cara mengamankan halaman admin?

Untuk keamanan lebih, Anda bisa:
1. Rename file admin.html ke nama acak (misal: kelola-xyz123.html)
2. Gunakan .htaccess untuk password protect folder admin
3. Simpan admin.html di subdomain terpisah dengan proteksi

Apakah data pengaturan hilang jika browser di-clear?

Ya, karena data disimpan di localStorage browser. Untuk solusi permanen, Anda perlu menyimpan pengaturan di database server. Namun untuk penggunaan sederhana, localStorage sudah cukup selama Anda tidak menghapus data browser.

Bagaimana jika ingin mengelola dari perangkat berbeda?

Karena localStorage bersifat per-browser, pengaturan dari perangkat satu tidak otomatis tersedia di perangkat lain. Untuk skenario multi-device, Anda perlu backend database. Alternatif sederhana: export pengaturan ke JSON lalu import di perangkat lain.

Export & Import Pengaturan

Backup pengaturan Anda atau pindahkan ke perangkat lain.

Branding & Logo

Atur identitas visual website Anda

Logo & Identitas

Teks yang muncul di header sebagai logo

Klik atau drag gambar ke sini
PNG, JPG, SVG (max 500KB)

Preview

Upload favicon
ICO, PNG (32x32 atau 64x64 px)

Favicon Preview

Hero Section

Atur konten bagian utama halaman

Konten Hero

Gunakan <span class="highlight">teks</span> untuk highlight gradient

Gunakan <strong>teks</strong> untuk bold

Harga & Paket

Atur informasi harga untuk 2 paket yang ditampilkan

Paket 1 (Kiri)

Paket 2 (Kanan) - Featured

Paket ini ditampilkan dengan highlight khusus (border hijau)

Hasil yang Ditampilkan

Angka yang ditampilkan di section "Contoh Hasil"

URL & Links

Atur semua link dan URL di website

Link Utama

Masukkan URL lengkap termasuk https://

Link untuk tombol Login di header

Link untuk semua tombol "Coba Sekarang"

Link Footer

Footer

Atur konten bagian footer website

Konten Footer

Preview Website

Lihat hasil perubahan Anda

Live Preview

Buka di Tab Baru