📘 Panduan Implementasi

Pasang di Kantor Tanpa npm

SIPELOK versi ini murni HTML + CSS + JavaScript murni + PHP + MySQL. Tidak perlu Node.js, tidak perlu build, tidak perlu install paket apa pun. Yang dibutuhkan hanya XAMPP (Apache + PHP + MySQL).

01 · Arsitektur

Sederhana & Mandiri

Frontend: file statis (index, loket, scan, admin, panduan.html) — jalan di browser apa pun.
Backend: satu berkas api/api.php (tanpa framework) + config.php.
Database: MySQL skema database/sipelok.sql (5 tabel).
Foto atribut disimpan sebagai file di api/uploads/, bukan di database.
Tanpa server (mis. dibuka langsung dari file) aplikasi otomatis jadi Mode Demo (localStorage) — tetap bisa dicoba.

02 · Instalasi (±10 menit)

Langkah demi Langkah

Instal XAMPP

Unduh dari apachefriends.org, instal, lalu jalankan Apache dan MySQL dari XAMPP Control Panel.

Salin folder aplikasi

Salin seluruh folder sipelok ke C:\xampp\htdocs\ sehingga menjadi C:\xampp\htdocs\sipelok\.

C:\xampp\htdocs\sipelok\
├─ index.html      ← beranda / hub
├─ loket.html      ← layar PC front office
├─ scan.html       ← presensi di HP petugas
├─ admin.html      ← rekap & pengaturan
├─ panduan.html    ← halaman ini
├─ css/ js/        ← aset statis
├─ api/            ← api.php, config.php, uploads/
└─ database/       ← sipelok.sql

Buat database

Buka http://localhost/phpmyadmin → menu Import → pilih file database/sipelok.sql → Go. Database sipelok beserta 5 tabel akan terbuat.

Sesuaikan config (opsional)

Nilai bawaan sudah cocok dengan XAMPP. Ubah bila perlu, dan ganti API_KEY agar aman.

// api/config.php
define('DB_HOST', 'localhost');
define('DB_NAME', 'sipelok');
define('DB_USER', 'root');
define('DB_PASS', '');            // XAMPP default: kosong
define('API_KEY', 'ganti-dengan-kunci-rahasia');

Buka aplikasi

Akses http://localhost/sipelok/. Jika badge di kanan atas berubah menjadi MySQL Aktif, berarti berhasil. Masuk admin: admin / bpskonawe — segera ganti sandi di Admin → Akun.

03 · Akses dari HP Petugas

Satu Jaringan Kantor

Agar HP petugas bisa membuka halaman scan, HP dan PC server harus satu jaringan (Wi-Fi kantor). Gunakan alamat IP komputer, bukan localhost.

Cek IP PC server: buka CMD, ketik ipconfig → catat IPv4 Address (mis. 192.168.1.10).
Di PC loket, buka http://192.168.1.10/sipelok/loket.html.
QR yang tampil otomatis berisi alamat tersebut — HP petugas tinggal scan QR, tidak perlu mengetik.
Bila Windows Firewall memblokir, izinkan Apache pada jaringan privat.

💡 Gambar QR membutuhkan internet pada PC penampil. Jika kantor offline, halaman scan tetap menampilkan tautan yang bisa diketik manual di HP.

04 · Endpoint API

Referensi api.php

Aksi	Metode	Keterangan
`?action=ping`	GET	Cek hidup API + database
`?action=bootstrap`	GET	Seluruh data (petugas, presensi, jadwal, akun, sesi)
`?action=sig`	GET	Sidik jari perubahan (dipoll utk sinkronisasi)
`?action=save&table=…`	POST	Simpan baris (butuh X-Sipelok-Key)
`?action=delete&table=…&id=…`	POST	Hapus satu baris (butuh X-Sipelok-Key)
`?action=clear&table=…`	POST	Kosongkan tabel (butuh X-Sipelok-Key)

Table yang valid: petugas, records, jadwal, accounts, sessions. Kunci dikirim via header X-Sipelok-Key.

05 · Uji Koneksi

Coba Langsung dari Halaman Ini

// Hasil uji akan tampil di sini…

06 · Checklist Rilis

Sebelum Dipakai Petugas

Centangan tersimpan di browser ini.