SIAP-RT — Sistem Informasi Administrasi Rukun Tetangga

Aplikasi web untuk mengelola administrasi pembayaran iuran, pengeluaran, data penghuni, dan rumah di perumahan.

Teknologi yang Digunakan

Persyaratan Sistem (Wajib)

• PHP ≥ 8.3
• Composer ≥ 2.x
• Node.js ≥ 20.x (LTS)
• npm ≥ 10.x
• MySQL ≥ 8.0
• Laragon (Full) — download di https://laragon.org/download/

---

Panduan Instalasi Lengkap (Laragon — Windows)

Panduan ini ditulis untuk pengguna yang belum familiar dengan terminal/command line. Setiap langkah memiliki opsi manual (copy-paste biasa) selain perintah terminal.

Yang Dibutuhkan

Pastikan semua sudah terinstall sebelum memulai:

---

Langkah 1 — Mulai Laragon

1. Buka Laragon dari desktop atau Start Menu.
2. Klik tombol Start All (pojok kiri bawah).
3. Pastikan status Apache dan MySQL berwarna hijau.

Jika Apache/MySQL tidak mau start, pastikan Laragon dijalankan sebagai Run as Administrator (klik kanan Laragon → Run as administrator).

---

Langkah 2 — Salin Project ke Folder Laragon

Tujuan: Memindahkan folder project ke dalam folder www Laragon agar bisa diakses oleh server.

Catatan path Laragon:

• Default Laragon terinstall di C:\laragon\. Jadi folder tujuan adalah C:\laragon\www\.

Opsi A — Salin Manual (Tanpa Terminal)

1. Buka File Explorer.
2. Buka folder Laragon Anda (default: C:\laragon\www\).
3. Copy-paste seluruh folder project ke dalam folder www\ sehingga menjadi:

   C:\laragon\www\siap-rt\
   

4. Pastikan isi folder siap-rt terlihat seperti ini:

siap-rt\
├── backend\
├── frontend\
├── docs\
└── README.md

Opsi B — Pakai Git (Terminal)

cd C:\laragon\www
git clone https://github.com/roselanesan/siap_rt.git siap-rt

---

Langkah 3 — Buat Database MySQL

Database siap_rt sekarang seharusnya sudah muncul di daftar database di sebelah kiri.

---

Langkah 4 — Setup Backend

4.1 Buka Terminal di Folder Backend

Cara Mudah:

1. Buka File Explorer.
2. Navigasi ke folder C:\laragon\www\siap-rt\backend\
3. Klik pada address bar (di atas, tempat alamat folder).
4. Ketik cmd lalu tekan Enter.
5. Terminal (Command Prompt) akan terbuka langsung di folder tersebut.

4.2 Install Dependency PHP

Ketik perintah berikut di terminal, lalu tekan Enter:

composer install

Apa yang dilakukan: Mengunduh semua library PHP yang dibutuhkan oleh Laravel (mirip seperti install aplikasi). Tunggu sampai selesai (biasanya 1-2 menit). Jika diminta pertanyaan, tekan Enter saja untuk menggunakan pilihan default.

4.3 Buat File Konfigurasi Environment

copy .env.example .env

Apa yang dilakukan: Menyalin file contoh konfigurasi menjadi file konfigurasi yang bisa di-edit. File .env berisi pengaturan database dan URL aplikasi.

4.4 Edit File .env (Konfigurasi Database)

1. Buka folder C:\laragon\www\siap-rt\backend\ di File Explorer.
2. Cari file bernama .env (bukan .env.example).
3. Klik kanan file .env → Open with → (atau VS Code).

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=siap_rt
DB_USERNAME=root
DB_PASSWORD=

5. Cari baris APP_URL=http://localhost dan ubah menjadi:

APP_URL=http://localhost:8000

6. Save file (Ctrl + S).

Catatan: Laragon default username MySQL adalah root dengan password kosong. Jika Anda pernah mengganti password MySQL Laragon, masukkan password tersebut di DB_PASSWORD=.

4.5 Generate Application Key

php artisan key:generate

Apa yang dilakukan: Membuat kunci rahasia unik untuk keamanan aplikasi. Harus dilakukan sekali saja.

4.6 Buat Tabel Database dan Data Awal

php artisan migrate:fresh --seed --force

Apa yang dilakukan: Membuat semua tabel database yang dibutuhkan dan mengisi data awal (1 akun admin, 20 rumah, 15 penghuni, 2 jenis iuran).

4.7 Buat Link Storage (Untuk Foto KTP)

php artisan storage:link

Apa yang dilakukan: Membuat symlink agar foto KTP yang di-upload bisa diakses dari browser.

4.8 Jalankan Server Backend

php artisan serve

Apa yang dilakukan: Menjalankan server backend Laravel di http://localhost:8000. Jangan tutup terminal ini — biarkan tetap terbuka.

Anda akan melihat pesan: Server running on [http://127.0.0.1:8000]

---

Langkah 5 — Setup Frontend

5.1 Buka Terminal BARU di Folder Frontend

1. Buka File Explorer.
2. Navigasi ke folder C:\laragon\www\siap-rt\frontend\
3. Klik pada address bar → ketik cmd → tekan Enter.
4. Terminal baru terbuka di folder frontend\.

Penting: JANGAN tutup terminal backend dari Langkah 4. Anda sekarang punya 2 terminal yang terbuka.

5.2 Install Dependency Node.js

npm install

Apa yang dilakukan: Mengunduh semua library JavaScript yang dibutuhkan oleh React (mirip seperti composer install untuk PHP). Tunggu sampai selesai.

5.3 Buat File Konfigurasi Frontend

copy .env.example .env

Apa yang dilakukan: Menyalin file konfigurasi Vite. Isinya sudah benar secara default (URL API mengarah ke http://localhost:8000/api). Tidak perlu diedit.

5.4 Build Aplikasi Frontend

npm run build

Apa yang dilakukan: Meng-compile kode React menjadi file HTML/CSS/JS yang bisa dibaca browser. Hasil build disimpan di folder frontend\dist\.

5.5 Copy Hasil Build ke Folder Public Backend

Cara Manual (Tanpa Terminal):

Cara Terminal (PowerShell):

xcopy C:\laragon\www\siap-rt\frontend\dist\* C:\laragon\www\siap-rt\backend\public\ /E /Y

---

Langkah 6 — Akses Aplikasi

1. Pastikan terminal backend (php artisan serve) masih berjalan.
2. Buka browser (Chrome, Edge, atau Firefox).
3. Buka halaman berikut:

http://localhost:8000

4. Anda akan melihat halaman Login.
5. Login dengan:

Setelah login, Anda akan masuk ke halaman Dashboard yang menampilkan ringkasan rumah, tagihan, grafik pemasukan vs pengeluaran.

---

Troubleshooting (Jika Ada Masalah)

---

Struktur Database

ERD (Entity Relationship Diagram)

erDiagram
    RUMAH ||--o{ RUMAH_PENGHUNI : memiliki
    PENGHUNI ||--o{ RUMAH_PENGHUNI : tinggal_di
    RUMAH ||--o{ TAGIHAN : ditagih
    PENGHUNI ||--o{ TAGIHAN : menerima
    JENIS_IURAN ||--o{ TAGIHAN : jenis_dari
    TAGIHAN ||--o{ PEMBAYARAN_DETAIL : dilunasi
    PEMBAYARAN ||--o{ PEMBAYARAN_DETAIL : mencakup
    RUMAH ||--o{ PEMBAYARAN : membayar
    PENGHUNI ||--o{ PEMBAYARAN : melakukan
    PENGHUNI ||--o{ PENGHUNI : kepala_keluarga_dari

    RUMAH {
        int id PK
        string nomor_rumah
        string blok
        string alamat
        string status
    }

    PENGHUNI {
        int id PK
        string nama_lengkap
        string foto_ktp
        string status_penghuni
        string no_telepon
        string status_menikah
        int kepala_keluarga_id FK
        string hubungan_dalam_keluarga
    }

    RUMAH_PENGHUNI {
        int id PK
        int rumah_id FK
        int penghuni_id FK
        date tanggal_mulai
        date tanggal_keluar
        string status_penghuni
    }

    JENIS_IURAN {
        int id PK
        string nama
        int nominal_default
    }

    TAGIHAN {
        int id PK
        int rumah_id FK
        int penghuni_id FK
        int jenis_iuran_id FK
        int bulan
        int tahun
        int nominal
        string status
    }

    PEMBAYARAN {
        int id PK
        int rumah_id FK
        int penghuni_id FK
        date tanggal_bayar
        string metode
        int total_dibayar
    }

    PEMBAYARAN_DETAIL {
        int id PK
        int pembayaran_id FK
        int tagihan_id FK
    }

    PENGELUARAN {
        int id PK
        string kategori
        string deskripsi
        int jumlah
        date tanggal
    }

Flowchart Alur Aplikasi

flowchart TD
    A[Login] --> B[Dashboard]
    B --> C[Kelola Penghuni]
    B --> D[Kelola Rumah]
    B --> E[Kelola Pembayaran]
    B --> F[Laporan]

    C --> C1[Tambah/Ubah Penghuni]
    C1 --> C2[Upload Foto KTP]

    D --> D1[Daftar Rumah]
    D1 --> D2[Detail Rumah]
    D2 --> D3[Riwayat Penghuni]
    D2 --> D4[Anggota Keluarga]
    D2 --> D5[Riwayat Pembayaran]
    D2 --> D6[Assign/Ganti Penghuni]

    E --> E1[Tab Tagihan]
    E --> E2[Tab Input Pembayaran]
    E --> E3[Tab Pengeluaran]
    E1 --> E1a[Generate Tagihan Bulanan]
    E1 --> E1b[Lunasi Tagihan Langsung]
    E2 --> E2a[Pilih Rumah & Iuran]
    E2a --> E2b[Bulanan atau Tahunan]
    E3 --> E3a[Input Pengeluaran Baru]
    E3 --> E3b[Riwayat Pengeluaran]

    F --> F1[Grafik Pemasukan vs Pengeluaran]
    F1 --> F2[Detail per Bulan]
    F2 --> F3[Rincian Pemasukan]
    F2 --> F4[Rincian Pengeluaran]

Keterangan Tabel

---

Fitur Utama

1. Dashboard — Ringkasan rumah, tagihan, grafik pemasukan vs pengeluaran 6 bulan terakhir.
2. Kelola Penghuni — Tambah/ubah data penghuni beserta foto KTP.
3. Kelola Rumah — Tambah/ubah rumah, assign penghuni, riwayat penghuni, riwayat pembayaran.
4. Anggota Keluarga — Tambah anggota keluarga di bawah kepala keluarga.
5. Kelola Pembayaran — Generate tagihan bulanan, catat pembayaran (bulanan/tahunan), kelola pengeluaran.

---

Informasi Tambahan

• Foto KTP disimpan di backend\storage\app\public\ktp\.
• Token autentikasi (Sanctum) disimpan di localStorage browser.
• Iuran bulanan di-generate otomatis untuk rumah berstatus Dihuni.
• Pembayaran tahunan menandai 12 tagihan lunas sekaligus dari bulan pembayaran.
• Pengeluaran tidak boleh melebihi saldo kas saat ini.

---

Rangkuman Hasil Tugas (Screenshot per Fitur)