Arsitektur berdampingan

Dua cara membuat halaman

flowchart LR
    subgraph IMS["IMSMART"]
        direction TB
        B1["Browser"] -- "1 permintaan halaman" --> P["Server PHP"]
        P -- "2 cek sesi, baca database, susun HTML" --> DB1[("MySQL")]
        P -- "3 halaman jadi (HTML)" --> B1
    end
    subgraph SIA["SIAPS-IMUS"]
        direction TB
        B2["Browser<br/>React berjalan di sini"] -- "1 ambil file tampilan" --> WA["Worker App"]
        B2 -- "2 minta data (JSON)" --> WP["Worker API (Hono)"]
        WP -- "3 baca atau tulis" --> DB2[("D1")]
    end

Intinya:

• IMSMART — server menyusun halaman utuh lalu mengirimnya. Satu permintaan, satu halaman.
• SIAPS-IMUS — browser memuat aplikasi sekali, lalu terus meminta data saja ke API.

Tabel perbandingan

Aspek	IMSMART	SIAPS-IMUS
Struktur	Banyak folder aplikasi mandiri	Enam repositori, tiap repositori berisi api/ dan app/
Pembagian tugas	Satu file PHP mengurus tampilan dan logika	Backend (API) dan frontend (App) dipisah
Tempat berjalan	Server hosting (cPanel)	Cloudflare Workers
Database	MySQL/MariaDB, satu database per aplikasi	D1 (SQLite), satu D1 per aplikasi
Akses data	Query SQL ditulis langsung (mysqli, PDO)	Drizzle ORM dari skema TypeScript
Identitas login	Sesi di server	Token JWT di browser
Hak akses	Peran diperiksa di tiap halaman	Peran diperiksa di penjaga (middleware) API
Berbagi kode	Salin folder aplikasi per unit	Repositori disalin dari satu cetakan
Penerapan	Unggah berkas + impor .sql	wrangler deploy + migrasi database
Pengelompokan	Per unit: PGTK, SD, MSW, Yayasan	Per bidang: Baitul Mal, Dakwah, Usaha, LT-SD, LT-MSW, LT-Tahfidz

Cara data mengalir saat menyimpan nilai

IMSMART

sequenceDiagram
    participant F as Formulir nilai
    participant P as File PHP
    participant DB as MySQL
    F->>P: POST data nilai
    P->>DB: INSERT
    P-->>F: redirect + pesan sukses

SIAPS-IMUS

sequenceDiagram
    participant F as Formulir (React)
    participant M as Middleware
    participant R as Rute + Zod
    participant DB as D1 via Drizzle
    F->>M: POST /api/v1/nilai-sumatif + token
    M->>M: cek token
    M->>R: teruskan
    R->>R: validasi data
    R->>DB: INSERT
    R-->>F: JSON data dan message

Apa yang sama

• Pemisahan data master (siswa, guru, kelas) dan data transaksi (nilai, pembayaran).
• Login, peran pengguna, dan menu per peran.
• Format laporan tabel dan ekspor.
• Satu aplikasi untuk satu bidang kerja.