Dokumen Blueprint Arsitektur

Sistem Platform
YUKTA

Platform hybrid LMS & Social Learning yang mempertemukan santri, pemuda, dan talenta dalam satu ekosistem berkembang, bermanfaat, dan berkelanjutan.

18+

Modul Fitur

Tabel Database

Level User

Fase Build

Gulir ke bawah

01 — Ringkasan Eksekutif

Mengapa YUKTA Hadir

Latar belakang masalah dan solusi yang ditawarkan platform.

Problem

Santri lulus pesantren kurang skill dunia kerja, tidak bisa lanjut kuliah
Santri aktif haus ilmu umum & skill menghasilkan uang (halal)
Remaja putus sekolah / broken home tidak akses pendidikan formal
Usia target: SMP akhir hingga SMA akhir (15–19 tahun)
Tidak ada wadah yang mengakomodir minat-bakat sekaligus monetisasi

Solution — YUKTA

Wadah digital pembelajaran skill dunia (bisnis, marketing, dll)
Kolaborasi talent, vendor, mentor dalam satu ekosistem
Sistem poin → dompet digital → tarik tunai (insentif nyata)
Anti-mainstream: gabungan LMS + Medsos + Game Edukasi
Goal: semua pihak bebas finansial, berkecukupan, berbagi manfaat

Filosofi Nama

Arab — يُؤْتَ (Yu'ta): Diberi, dianugerahi (QS. Al-Baqarah: 269).
Jawa Timuran — "Yuk ta": Ajakan santai akrab, "Ayo lah, ayo dong".
Sanskerta — Yukta: Connected, suitable, skilful, joined, endowed — terhubung, tepat, dibekali, selaras.
Kesimpulan: YUKTA = Wadah yang mengajak pemuda untuk terhubung & terbekali agar dianugerahi kebaikan yang banyak.

02 — Arsitektur Sistem

High-Level Architecture

Gambaran besar bagaimana komponen sistem saling terhubung.

Diagram Arsitektur (Logical View)

┌──────────────────────────────────────────────────────────────┐
│                      CLIENT LAYER                            │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌───────────┐  │
│  │ Browser  │  │ Mobile   │  │ Gmail    │  │ Midtrans  │  │
│  │ (Web)    │  │ Browser  │  │ OAuth    │  │ Payment   │  │
│  └────┬─────┘  └────┬─────┘  └────┬─────┘  └─────┬─────┘  │
└───────┼──────────────┼──────────────┼──────────────┼─────────┘
        └──────────────┴──────┬───────┴──────────────┘
                              │ HTTPS
┌─────────────────────────────┼────────────────────────────────┐
│                  PRESENTATION LAYER                          │
│                   (PHP 8.2 + JS)                            │
│  ┌────────┐ ┌────────┐ ┌────────────┐ ┌──────────┐         │
│  │Landing │ │ Auth   │ │ Dashboard  │ │ Admin    │  ...     │
│  └───┬────┘ └───┬────┘ └─────┬──────┘ └────┬─────┘         │
└──────┼──────────┼─────────────┼─────────────┼───────────────┘
        └──────────┴──────┬──────┴─────────────┘
                            │
┌───────────────────────────┼─────────────────────────────────┐
│                  BUSINESS LOGIC LAYER                        │
│                   (PHP Classes)                              │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐      │
│  │ UserMgmt │ │CourseMgr │ │ PointSys │ │ VCardGen │      │
│  │ Auth     │ │ LMS      │ │ Wallet   │ │ AI Proxy │      │
│  └────┬─────┘ └────┬─────┘ └────┬─────┘ └────┬─────┘      │
└───────┼─────────────┼─────────────┼─────────────┼───────────┘
        └─────────────┴──────┬──────┴─────────────┘
                              │ PDO
┌─────────────────────────────┼────────────────────────────────┐
│                      DATA LAYER                              │
│  ┌──────────────────┐        │       ┌──────────────────┐   │
│  │  MySQL 8.x       │◄───────┴──────►│  File Storage    │   │
│  │  (24 Tabel)      │               │  /uploads/*      │   │
│  └──────────────────┘               └──────────────────┘   │
└─────────────────────────────────────────────────────────────┘
                              │
┌─────────────────────────────┼────────────────────────────────┐
│                  EXTERNAL INTEGRATIONS                        │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌───────────┐  │
│  │ Google   │  │ DeepSeek │  │ Midtrans │  │ WhatsApp  │  │
│  │ Identity │  │ AI API   │  │ PGW API  │  │ (opsional)│  │
│  └──────────┘  └──────────┘  └──────────┘  └───────────┘  │
└─────────────────────────────────────────────────────────────┘

4 Layer

Client → Presentation → Business Logic → Data. Pola MVC ringan tanpa framework berat.

Single Server

Semua berjalan di 1 shared hosting cPanel. PHP 8.2, MySQL, Apache. Tidak butuh microservice.

API Eksternal

Hanya 3 API luar: Google OAuth, DeepSeek AI, Midtrans Payment. Semua via PHP cURL dari backend.

03 — User Flow

Alur Perjalanan Pengguna

Flow utama dari pengunjung awam hingga menjadi member aktif.

Flow Registrasi & Onboarding

Landing Page
yukta.id

Klik "Masuk"

Halaman Login
3 opsi auth

Sudah
punya akun?

Registrasi
Form/Gmail/WA

Verifikasi

Dashboard
Member Free

Flow Upgrade PRO

Klik "Upgrade PRO"

Info PRO & Harga

Pilih metode

Manual Transfer
Upload bukti

Admin cek & konfirmasi

PRO Aktif

Catatan Flow Midtrans

Flow Midtrans (auto): user bayar di halaman Midtrans → callback webhook ke api/midtrans-webhook.php → sistem auto-aktifkan PRO tanpa campur tangan admin. Jika payment gagal/expired → status = expired, user bisa coba lagi.

04 — Role & Permission

4 Level Pengguna

Matriks hak akses setiap role dalam sistem.

Level 1

Owner / Superadmin

Akun tertinggi. Kendali penuh atas seluruh sistem, pengaturan global, dan finansial platform.

Level 2

Admin / Manajemen

Membantu owner: konten, kursus, game level, verifikasi pembayaran, moderasi.

Level 3

Mentor

Buat/mengelola materi kursus, pasarkan produk/jasa di slot iklan, narasumber.

Level 4

Member

Pengguna utama. Belajar, bermain, posting, kumpul poin, tukar saldo. Free & PRO.

Fitur / Aksi	Superadmin	Admin	Mentor	Member Free	Member PRO
Akses Panel Admin
Kelola Pengaturan Global
Kelola Admin Lain
CRUD Konten (Kutipan, Berita, Produk)
CRUD Kursus & Materi
Verifikasi Pembayaran Manual
Akses Kursus Free
Akses Kursus Premium
Generate Virtual Card
Posting di Bacaanku
Main Edu Game & Kumpul Poin
Tukar Poin → Saldo → Tarik Tunai

05 — Database Schema

24 Tabel MySQL

Desain skema relasional untuk seluruh fitur platform.

1. users — Data pengguna utama

Kolom	Tipe	Constraint	Keterangan
id	INT	PK AI	Primary key
username	VARCHAR(50)	UNIQUE NOT NULL	Untuk URL vcard
nama_lengkap	VARCHAR(100)	NOT NULL	Nama tampilan
email	VARCHAR(150)	UNIQUE	Nullable jika daftar via WA
no_wa	VARCHAR(20)	UNIQUE	Format 62xxx
password	VARCHAR(255)		Hash bcrypt, null jika OAuth
google_id	VARCHAR(100)	UNIQUE	Google OAuth ID
avatar	VARCHAR(255)		Path foto profil
role	ENUM	NOT NULL	'superadmin','admin','mentor','member'
is_pro	TINYINT(1)	DEFAULT 0	0=Free, 1=PRO
pro_expiry	DATETIME		Null jika bukan PRO
total_poin	INT	DEFAULT 0	Dihitung dari transaksi
wallet_balance	DECIMAL(12,2)	DEFAULT 0	Saldo Rupiah
is_active	TINYINT(1)	DEFAULT 1	Banned = 0
created_at	DATETIME		Waktu registrasi
updated_at	DATETIME		Terakhir update

2. daily_quotes

id             INT PK AI
content         TEXT NOT NULL
author          VARCHAR(100)
scheduled_date  DATE // NULL = tampil kapan saja
is_active       TINYINT(1) DEFAULT 1
created_at      DATETIME

3. fyi_news

id             INT PK AI
title          VARCHAR(200) NOT NULL
content        TEXT // isi lengkap
image          VARCHAR(255)
is_active       TINYINT(1) DEFAULT 1
created_at      DATETIME

4. featured_products

id             INT PK AI
title          VARCHAR(200)
description    TEXT
image          VARCHAR(255)
link           VARCHAR(500)
vendor_id      INT FK→users.id
is_active       TINYINT(1) DEFAULT 1
created_at      DATETIME

5. vcards

id             INT PK AI
user_id        INT FK→users.id
prompt         TEXT
images         JSON
generated_html LONGTEXT
slug           VARCHAR(50) UNIQUE
views          INT DEFAULT 0
created_at      DATETIME

6. game_levels

id             INT PK AI
level          INT
type           ENUM('quiz','cleanup','explore')
scene_image    VARCHAR(255) // 360 image
objects_data   JSON // posisi, jawaban
question       TEXT
options        JSON // array 4 opsi
correct_index  INT
time_limit     INT // detik
is_active       TINYINT(1) DEFAULT 1
created_at      DATETIME

7. game_progress

id             INT PK AI
user_id        INT FK→users.id
level_id       INT FK→game_levels.id
completed      TINYINT(1) DEFAULT 0
score          INT DEFAULT 0
time_spent     INT // detik
attempts       INT DEFAULT 0
updated_at      DATETIME

8. bacaanku_posts

id             INT PK AI
user_id        INT FK→users.id
image          VARCHAR(255) NOT NULL
description    TEXT
tags           VARCHAR(500)
likes_count    INT DEFAULT 0
comments_count INT DEFAULT 0
is_active       TINYINT(1) DEFAULT 1
created_at      DATETIME

9-10. bacaanku_likes & _comments

// bacaanku_likes
id       INT PK AI
post_id  INT FK
user_id  INT FK
created_at DATETIME

// bacaanku_comments
id       INT PK AI
post_id  INT FK
user_id  INT FK
comment  TEXT
created_at DATETIME

11. courses

id             INT PK AI
title          VARCHAR(200)
description    TEXT
category       VARCHAR(100)
thumbnail      VARCHAR(255)
type           ENUM('free','premium')
is_sequential  TINYINT(1) DEFAULT 0
instructor_id  INT FK→users.id
is_active       TINYINT(1) DEFAULT 1
created_at      DATETIME

12-13. course_materials & _progress

// course_materials
id             INT PK AI
course_id      INT FK
bab_number     INT
title          VARCHAR(200)
content_type   ENUM('pdf','ppt','img',
                 'audio','video','zip')
file_path      VARCHAR(500)
created_at      DATETIME

// course_progress
id         INT PK AI
user_id    INT FK
material_id INT FK
completed  TINYINT(1) DEFAULT 0
updated_at  DATETIME

14-15. kreatif_posts & _comments

// kreatif_posts
id             INT PK AI
user_id        INT FK
title          VARCHAR(200)
description    TEXT
category       ENUM('ide_bisnis','karya_desain',
  'karya_tulis','prototype','lainnya')
image          VARCHAR(255)
likes_count    INT DEFAULT 0
comments_count INT DEFAULT 0
is_featured    TINYINT(1) DEFAULT 0
created_at      DATETIME

// kreatif_comments — struktur sama

16. relaxing_videos

id             INT PK AI
title          VARCHAR(200)
description    TEXT
video_url      VARCHAR(500)
thumbnail      VARCHAR(255)
duration       INT // detik
category       ENUM('hujan','hutan','laut',
  'gunung','kota_malam','perkopian')
is_loop         TINYINT(1) DEFAULT 1
is_active       TINYINT(1) DEFAULT 1
sort_order     INT DEFAULT 0
created_at      DATETIME

17. point_transactions

id             INT PK AI
user_id        INT FK→users.id
type           ENUM('earn_post','earn_like',
  'earn_comment','earn_game','earn_course','redeem')
points         INT // +/-
reference_id   INT
description    VARCHAR(255)
created_at      DATETIME

18. wallet_transactions

id             INT PK AI
user_id        INT FK
type           ENUM('credit','debit')
amount         DECIMAL(12,2)
status         ENUM('pending','success','rejected')
method         VARCHAR(50)
description    VARCHAR(255)
created_at      DATETIME

19. point_redemptions

id             INT PK AI
user_id        INT FK
points_spent   INT
money_amount   DECIMAL(12,2)
status         ENUM('pending','approved','rejected')
verified_by    INT FK
notes          TEXT
created_at      DATETIME
processed_at    DATETIME

20. pro_payments

id             INT PK AI
user_id        INT FK
amount         DECIMAL(12,2)
duration_days  INT // 30,90,365
payment_method ENUM('manual','midtrans')
proof_image     VARCHAR(255)
midtrans_order_id VARCHAR(100)
status         ENUM('pending','success',
                    'expired','rejected')
verified_by    INT FK
created_at      DATETIME

21. withdrawal_requests

id             INT PK AI
user_id        INT FK
amount         DECIMAL(12,2)
bank_name      VARCHAR(100)
account_number VARCHAR(50)
account_holder VARCHAR(150)
status         ENUM('pending','processed','rejected')
verified_by    INT FK
notes          TEXT
created_at      DATETIME
processed_at    DATETIME

22-24. Tabel Pendukung

// sessions
id         VARCHAR(128) PK
user_id    INT FK
ip_address VARCHAR(45)
user_agent TEXT
expires_at DATETIME

// settings (key-value)
id             INT PK AI
setting_key    VARCHAR(100) UNIQUE
setting_value  TEXT
updated_at      DATETIME

// password_resets
email      VARCHAR(150)
token      VARCHAR(255) UNIQUE
expires_at DATETIME

Catatan Desain DB

Denormalization ringan pada likes_count & comments_count untuk mengurangi COUNT query saat load beranda. JSON columns pada game_levels.objects_data menyimpan posisi x,y objek 360 secara fleksibel. Cron job diperlukan untuk cek pro_expiry tiap jam, reset leaderboard, dan bersihkan session expired.

06 — Struktur File

Directory Tree

Organisasi file di server cPanel public_html.

yukta.id/
- index.php ← Landing Page
- login.php / register.php / logout.php
- auth-google.php ← OAuth callback
- auth-process.php ← Handler login/register
- dashboard.php ← Beranda member
- virtual-card.php / edu-game.php
- bacaanku.php / ruang-kursus.php
- kursus-detail.php / ruang-kreatif.php
- ruang-santai.php / profil.php
- dompet.php ← Saldo & riwayat
- upgrade-pro.php
- vcard/
  - index.php ← Public viewer: yukta.id/vcard/{username}
- admin/
  - index.php (dashboard)
  - users.php / quotes.php / news.php
  - products.php / courses.php
  - course-materials.php / edu-games.php
  - bacaanku-moderate.php / kreatif-moderate.php
  - santai-videos.php / payments.php
  - redemptions.php / withdrawals.php
  - settings.php
- api/
  - generate-vcard.php ← Proxy DeepSeek
  - game-checkpoint.php / midtrans-webhook.php
  - midtrans-init.php / like-comment.php
  - upload.php ← Unified upload
- config/
  - database.php ← PDO connection
  - app.php ← Constants, API keys
- includes/
  - auth-check.php / pro-check.php
  - admin-check.php / functions.php
  - csrf.php
- assets/
  - css/
    - style.css / dashboard.css / admin.css
  - js/
    - app.js / dashboard.js
    - vcard.js / edugame.js
    - admin.js
  - img/
    - logo.svg / og-image.jpg
- uploads/
  - avatars/ / vcard/ / bacaanku/
  - kreatif/ / courses/ / game-scenes/
  - payments/ / .htaccess ← Disable PHP exec
- .htaccess ← Rewrite vcard URL
- cron-pro-check.php ← Cron expirasi PRO

.htaccess — Rewrite Rules

# yukta.id/.htaccess
RewriteEngine On

# Rute vcard publik: yukta.id/vcard/{username}
RewriteRule ^vcard/([a-zA-Z0-9_-]+)$ vcard/index.php?u=$1 [L,QSA]

# Blok akses langsung ke folder sensitif
RewriteRule ^(config|includes)/ - [F]

# Security headers
Header set X-Content-Type-Options "nosniff"
Header set X-Frame-Options "SAMEORIGIN"

07 — Fitur: Landing Page

Halaman Depan yukta.id

Simpel, jelas, memikat. Pertama kali dilihat pengunjung.

Layout Wireframe

┌────────────────────────────────────────────┐
│ [Logo YUKTA]                [Masuk/Join]  │ ← Navbar fixed
├────────────────────────────────────────────┤
│         Hero Section                       │
│    [Gambar/ilustrasi pendukung]           │
│         JUDUL BESAR                        │
│    "Terhubung, Terbekali, Dianugerahi"    │
│         Tagline 1-2 baris                  │
│    [ Gabung Sekarang — Gratis ]           │ ← CTA
├────────────────────────────────────────────┤
│    3 Kolom Fitur Unggulan                  │
│  [Belajar Skill] [Karya Kreatif] [Cari]   │
├────────────────────────────────────────────┤
│    Cara Kerja (3 langkah)                  │
├────────────────────────────────────────────┤
│    Testimoni / Social Proof                │
├────────────────────────────────────────────┤
│  © 2025 YUKTA. All rights reserved.       │ ← Footer
└────────────────────────────────────────────┘

Teknis Visual

Background: video loop atau gradien animasi. Warna: teal/emerald + warm gold. Font: Space Grotesk. Scroll animations via IntersectionObserver.

SEO & Meta

Open Graph tags untuk share WA/IG. Meta description 155 char. OG image 1200x630. Structured data JSON-LD Organization.

Performa

Gambar WebP + lazy loading. CSS critical inline. JS defer. Target LCP < 2.5s. Tanpa framework CSS berat.

08 — Fitur: Auth System

Login & Registrasi

3 metode autentikasi yang saling melengkapi.

Email + Password

Input nama, email, no.WA, password. Validasi format, min 8 char, cek duplikat.

Google OAuth

Klik "Masuk dengan Google" → consent → callback. Username auto dari email. Tetap input no.WA.

No. WA + Password

Registrasi via nomor WA. Input nama, no.WA, password. WA sebagai identitas, bukan OTP login.

Saran: Flow Google OAuth Lebih Baik

Setelah consent Google, cek apakah google_id sudah terdaftar. Jika belum: redirect ke halaman "Lengkapi Profil" meminta: (1) Username (pre-fill dari email, bisa diedit), (2) Nomor WA (wajib), (3) Set password opsional. Jika sudah: langsung set session dan masuk dashboard.

09 — Fitur: Dashboard Member

Beranda Setelah Login

3 kotak kaca transparan + 6 menu utama di atas video background.

Layout Dashboard

┌──────────────────────────────────────────────┐
│ [Logo]                      [Avatar] Nama   │
├──────────────────────────────────────────────┤
│       VIDEO BACKGROUND (loop 10s)            │
│   pemandangan desa, pegunungan, awan         │
│   ┌────────────────────────────┐            │
│   │  Kata Mutiara Harian  [✕] │ ← Glass    │
│   └────────────────────────────┘   card     │
│   ┌────────────────────────────┐   fade-in  │
│   │  Fakta Menarik        [✕] │            │
│   │  [Baca selengkapnya →]    │            │
│   └────────────────────────────┘            │
│   ┌────────────────────────────┐            │
│   │  Produk Unggulan       [✕] │            │
│   └────────────────────────────┘            │
│   ┌─────────┐ ┌─────────┐ ┌─────────┐     │
│   │Virtual  │ │Edu Game │ │Bacaanku │     │ ← Row 1
│   │Card PRO │ │         │ │         │     │
│   └─────────┘ └─────────┘ └─────────┘     │
│   ┌─────────┐ ┌─────────┐ ┌─────────┐     │
│   │Ruang    │ │Ruang    │ │Ruang    │     │ ← Row 2
│   │Kursus   │ │Kreatif  │ │Santai   │     │
│   └─────────┘ └─────────┘ └─────────┘     │
└──────────────────────────────────────────────┘

Glass Cards

Background: rgba(255,255,255,0.06) + backdrop-filter: blur(16px). Border: 1px solid rgba(255,255,255,0.1). Animasi: translateY(30px)+opacity 0 → normal, stagger 200ms. Tutup: klik ✕ → fade out → sessionStorage simpan. Admin: aktif/nonaktif, atur konten, jadwalkan kutipan.

6 Tombol Menu

Style: Kartu + icon besar 28px + label. Hover: glow + scale. Grid: 3 kolom, responsif 2 kolom mobile. Warna: Tiap tombol punya accent warna berbeda. Badge: Virtual Card dapat badge "PRO" di pojok kanan atas.

10 — Fitur: Virtual Card

AI-Powered VCard Generator

Input deskripsi → AI generate halaman portofolio web unik.

Alur Generate

Buka Virtual Card

Cek is_pro?

Form Prompt + Upload

Tag @file gambar

Klik Generate

PHP → DeepSeek API

Simpan → yukta.id/vcard/{username}

Implementasi

Upload: Maks 5 gambar, max 2MB each. Ketik @ → dropdown nama file. API: Backend PHP kirim system prompt + user prompt + file list ke DeepSeek via cURL. Output: HTML+CSS+JS satu string, simpan di vcards.generated_html. Limit: Maks 3 vcard per member.

Keamanan Output AI

Sandbox: Output di-render dalam iframe dengan sandbox attribute. Sanitasi: Hapus tag <script>. CSP: Header Content-Security-Policy ketat di halaman vcard. Fallback: Jika AI gagal/timeout → error message + coba lagi.

System Prompt untuk AI

"Kamu adalah web designer. Buatkan halaman portofolio/virtual card satu halaman (single HTML file dengan inline CSS & JS). Desain modern, elegan, responsive. Gunakan animasi CSS menarik. Tanpa framework. Warna tema sesuai deskripsi user. Gambar user di path: /uploads/vcard/{filename}. Output HANYA kode HTML, tanpa penjelasan."

11 — Fitur: Edu Game

360 Virtual Room Game

Game edukasi berbasis panorama 360 dengan kontrol gyro dan swipe.

Type: Quiz Level

Scene: Panorama 360 via Three.js SphereGeometry. Objek: 4 kotak jawaban di posisi koordinat tertentu. Mekanik: User gerakkan HP (gyro) atau swipe untuk arahkan scope putih ke jawaban benar. Detection: Scope dalam radius objek → highlight hijau → ketuk atau tahan 3 detik. Feedback: Benar → partikel hijau + naik level. Salah → efek merah + coba lagi.

Type: Cleanup Level

Scene: Panorama 360 lingkungan ada sampah (desa, taman). Objek: 5-10 sampah di posisi acak. Mekanik: Arahkan scope → hijau → ketuk/tahan 3 detik dengan countdown circle → objek hilang animasi shrink+fade. Scoring: Tiap sampah = poin. Bonus waktu. Finish: Semua terkumpul → pesan edukasi lingkungan.

Spesifikasi Teknis

Library: Three.js CDN + DeviceOrientationControls. Fallback: Drag mouse jika tidak ada gyro. Scope: SVG circle fixed tengah layar 60px, stroke putih → hijau saat aimed. Detection: Raycaster dari kamera center ke posisi objek 3D. Checkpoint: POST ke api/game-checkpoint.php saat level selesai. Leaderboard: SUM(score) GROUP BY user_id ORDER BY DESC LIMIT 20.

Pseudocode: Game Loop Core
// edugame.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, w/h, 0.1, 1000);
// Sphere + equirectangular texture, side: BackSide

let controls;
if (hasGyroscope()) {
    controls = new DeviceOrientationControls(camera);
} else {
    controls = new ManualDragControls(camera);
}

const raycaster = new THREE.Raycaster();
const center = new THREE.Vector2(0, 0);

function animate() {
    requestAnimationFrame(animate);
    controls.update();
    raycaster.setFromCamera(center, camera);
    const hits = raycaster.intersectObjects(objects);
    if (hits.length > 0) highlightScope('green');
    else highlightScope('white');
    renderer.render(scene, camera);
}

canvas.addEventListener('click', () => {
    if (currentTarget) handleHit(currentTarget);
});

12 — Fitur: Bacaanku

Social Reading Feed

Instagram-style grid untuk membangun budaya baca.

Algoritma Grid

Grid 3 kolom, pengisian per baris:
┌──────────┬──────────┬──────────┐
│ POPULER#1│  RANDOM  │  RANDOM  │ ← Baris 1
│ (top)    │  (pool)  │  (pool)  │
├──────────┼──────────┼──────────┤
│ POPULER#2│  RANDOM  │  RANDOM  │ ← Baris 2
├──────────┼──────────┼──────────┤
│ POPULER#3│  RANDOM  │  RANDOM  │ ← Baris 3
└──────────┴──────────┴──────────┘

Logic: pool_populer = ORDER BY (likes+comments) DESC
       pool_random = WHERE id NOT IN(populer) RAND()
       Loop: 1 populer + 2 random per baris
       Implementasi: server-side PHP rendering

Sistem Poin

Posting baru	+5 poin
Memberikan like	+2 poin
Menulis komentar	+3 poin
Selesaikan level game	+3 poin
Selesaikan bab kursus	+4 poin

Anti-Spam Rules

Posting: Maks 5/hari/user, cooldown 5 menit. Like: Tidak bisa like sendiri, permanent (no unlike). Komentar: Min 3 char, maks 10/post/user, deteksi duplikat. Poin cap: Maks 100 poin/hari dari Bacaanku.

13 — Fitur: Ruang Kursus

Learning Management System

Modul belajar dengan tracking progress dan mode runtut.

Daftar Kursus

┌──────────────────────────────────────────┐
│ [Pencarian: Cari kursus...]              │
│ [Filter Kategori ▼]                      │
├──────────────────────────────────────────┤
│ ┌────────────┐  ┌────────────┐          │
│ │ [Thumbnail]│  │ [Thumbnail]│          │
│ │ Nama Kursus│  │ Nama Kursus│          │
│ │ ████░░ 60% │  │ ███░░░ 30% │ ← Progress
│ │ 12 Bab     │  │ 8 Bab      │          │
│ └────────────┘  └────────────┘          │
│ ┌────────────┐  ┌────────────┐          │
│ │ [Thumbnail]     PREMIUM │          │ ← Badge
│ │ [Kunci]    │  │ [Kunci]    │ ← Jika belum PRO
│ └────────────┘  └────────────┘          │
└──────────────────────────────────────────┘

Detail Kursus

Header: judul, thumbnail besar, deskripsi, mentor, jumlah bab. Daftar bab: accordion/sidebar list, icon tipe file + status selesai/belum. Mode Runtut: Bab 2+ terkunci sampai bab sebelumnya selesai. Mode Bebas: Semua terbuka. Progress = (selesai/total) × 100%.

Tipe Materi

PDF/PPT: Embed via iframe atau tautan download. Video: HTML5 video player, track waktu tonton. Audio: Custom audio player, track durasi. Gambar: Lightbox gallery. ZIP: Tautan download saja. Semua file disimpan di /uploads/courses/.

14 — Fitur: Ruang Kreatif

Wadah Unjuk Gigi & Ide

Tempat sharing karya dan ide bisnis kreatif antar member.

Saran Konsep: "Pitch Corner"

Karena kamu bilang masih bingung konsepnya, ini usulan saya:

Konsep: "Pitch Corner" — Semi-Forum dengan Vote System

Setiap post di Ruang Kreatif punya 2 tab: "Karya" (portofolio, desain, tulisan, foto) dan "Ide Bisnis" (proposal singkat, mockup, MVP). Member lain bisa memberikan Upvote atau Downvote (seperti Reddit), plus komentar diskusi.

Fitur spesifik:
• Post yang mendapat 50+ upvote otomatis dapat badge "Trending" dan muncul di highlight dashboard.
• Admin/Mentor bisa memberikan badge "Validated by Mentor" pada post yang dinilai punya potensi nyata.
• Ada tombol "Mau Kolaborasi" — jika user klik, sistem kirim notifikasi ke pemilik post (bisa via WA link). Ini memfasilitasi koneksi antar talent.
• Kategori: Ide Bisnis, Karya Desain, Karya Tulis, Prototype/Demo, Lainnya.
• Tidak ada sistem poin di sini (untuk menjaga kualitas, bukan kuantitas). Poin hanya dari Bacaanku & Game & Kursus.

Layout Ruang Kreatif

┌──────────────────────────────────────────┐
│ [Tab: Semua] [Karya] [Ide Bisnis]        │
│ [Pencarian...]         [Sort: Trending▼]  │
├──────────────────────────────────────────┤
│ ┌──────────────────────────────────┐     │
│ │ [Gambar]  Nama Karya/Ide         │     │
│ │ oleh @username · 2 jam lalu      │     │
│ │ Kategori: Ide Bisnis             │     │
│ │ Deskripsi singkat...             │     │
│ │ ▲ 42  ▼ 3  💬 8  🤝 Mau Kolaborasi│  │
│ │ [Badge: Trending]                │     │
│ └──────────────────────────────────┘     │
│ ┌──────────────────────────────────┐     │
│ │ [Gambar]  Karya Desain Logo...   │     │
│ │ ▲ 28  ▼ 1  💬 5  🤝 Mau Kolaborasi│  │
│ └──────────────────────────────────┘     │
└──────────────────────────────────────────┘

15 — Fitur: Ruang Santai

Video Menenangkan

Video alam durasi panjang / looping untuk menemani belajar atau bersantai.

Saran Konsep: "Ambient Room"

Lebih dari sekadar video player — buat pengalaman "virtual cozy room":

• Katalog visual: Grid thumbnail video dengan kategori (Hujan, Hutan, Laut, Gunung, Kota Malam, Perkopian). Setiap thumbnail punya preview 3 detik saat di-hover.
• Mini player floating: Setelah pilih video, buka di mini player yang bisa di-drag ke pojok manapun layar. User bisa tetap browsing fitur lain sambil video tetap bermain.
• Sound mixer: Untuk video bertema "coffeeshop" atau "hutan", sediakan slider untuk mix suara (misal: suara hujan 60% + suara kopi 30% + suara burung 10%). Ini bikin pengalaman jadi unik dan personal.
• Timer tidur: Fitur "Sleep Timer" — set 15/30/60 menit, video otomatis fade-out perlahan lalu berhenti. Cocok buat yang pakai untuk tidur.
• Video source: Upload sendiri ke server (mp4, terbatas kuota) ATAU embed dari YouTube (lebih hemat storage). Rekomendasi: embed YouTube + beberapa video premium self-hosted.

Layout Ruang Santai

┌──────────────────────────────────────────┐
│ [Kategori: Hujan Hutan Laut Gunung ...] │
│ [Pencarian...]                           │
├──────────────────────────────────────────┤
│ ┌────────┐ ┌────────┐ ┌────────┐       │
│ │ [Thumb]│ │ [Thumb]│ │ [Thumb]│       │
│ │ Hujan  │ │ Hutan  │ │ Laut   │       │
│ │ 2:00:00│ │ 1:30:00│ │ 3:00:00│       │
│ │ ▶ Play │ │ ▶ Play │ │ ▶ Play │       │
│ └────────┘ └────────┘ └────────┘       │
│ ┌────────┐ ┌────────┐ ┌────────┐       │
│ │ [Thumb]│ │ [Thumb]│ │ [Thumb]│       │
│ │ Gunung │ │KotaMLM │ │Perkopian│      │
│ └────────┘ └────────┘ └────────┘       │
├──────────────────────────────────────────┤
│ Setelah Play → Mini Player Floating:     │
│ ┌──────────────────────┐                 │
│ │ ▶ Hujan Di Hutan 🔊──│ ← Draggable   │
│ │ [Slider Volume] [⏱] │                 │
│ └──────────────────────┘                 │
└──────────────────────────────────────────┘

16 — Sistem Poin & Dompet Digital

Dari Poin → Saldo → Tarik Tunai

Sistem insentif yang nyata dan transparan.

Sistem Poin

Sumber poin: Post Bacaanku (+5), Like (+2), Komentar (+3), Game level (+3), Kursus bab (+4). Tracking: Setiap transaksi dicatat di point_transactions dengan type, reference_id, timestamp. Anti-farming: Daily cap per aktivitas. Cooldown antar aksi. Deteksi anomali (misal 50 like dalam 1 menit = flag).

Dompet Digital

Redeem poin: Event tetap (misal 1000 poin = Rp150.000). User ajukan redeem → status pending → admin approve → poin dikurangi, saldo bertambah. Tarik tunai: User isi form rekening → admin proses manual transfer → status berubah jadi processed. Rekening perusahaan: Sebagai rekber/pengelola dana.

Saran: Fase Awal Tanpa Payment Gateway

Untuk fase awal (MVP), sistem poin → saldo → tarik tunai bisa sepenuhnya manual oleh admin tanpa integrasi Midtrans. Ini mengurangi kompleksitas signifikan. Midtrans hanya dipakai nanti untuk payment PRO membership (fase 3+). Penukaran poin bisa dilakukan via form + verifikasi admin.

17 — Member PRO

Upgrade & Benefit

2 opsi pembayaran: manual dan otomatis via Midtrans.

Opsi 1: Manual Transfer

1. User lihat info PRO + nomor rekening/QRIS di halaman upgrade-pro.php.
2. User transfer.
3. User upload bukti transfer (gambar) ke sistem.
4. Status: pending.
5. Admin cek di panel admin → approve/reject.
6. Jika approve: is_pro=1, pro_expiry=NOW()+duration, kirim notifikasi WA ke user.

Opsi 2: Midtrans (Auto)

1. User klik "Bayar via Midtrans".
2. Backend panggil api/midtrans-init.php → dapat Snap Token.
3. Popup Midtrans Snap Payment muncul (pilihan: QRIS, VA, e-wallet, CC).
4. User bayar.
5. Midtrans kirim webhook ke api/midtrans-webhook.php.
6. Backend verifikasi signature → auto update is_pro=1 + pro_expiry.
7. Tanpa campur tangan admin.

Benefit PRO vs Free

Akses kursus premium	Free	PRO
Generate Virtual Card (AI)	Free	PRO
Badge PRO di profil	Free	PRO
Prioritas tampil di leaderboard	Free	PRO

18 — Panel Admin

Kendali Penuh dari Backend

Semua pengaturan konten dan operasional dari satu panel.

Konten

CRUD kutipan motivasi (buat banyak, jadwalkan tampil). CRUD berita FYI (judul + konten lengkap). CRUD produk unggulan (gambar + link WA). Atur video Ruang Santai (upload/embed YouTube).

Kursus & Game

Buat/edit kursus (judul, kategori, tipe free/premium, mode runtut). Upload materi per bab (drag & drop reorder). Buat level Edu Game (upload gambar 360, tentukan posisi objek, atur pertanyaan/jawaban).

Operasional

Verifikasi pembayaran manual PRO. Approve/reject redeem poin → saldo. Proses tarik tunai. Moderasi post Bacaanku & Kreatif (hapus, ban user). Statistik: total user, PRO user, poin terredeem, kursus terpopuler.

19 — Integrasi API

3 API Eksternal

Semua dipanggil dari backend PHP via cURL, tidak ada API key di frontend.

Google Identity

Paket: google/apiclient via Composer atau cURL langsung ke token endpoint. Flow: OAuth 2.0 server-side flow. Data: Ambil name, email, sub (google_id), picture. Simpan: google_id di tabel users.

DeepSeek AI

Endpoint: api.deepseek.com/v1/chat/completions. Model: deepseek-chat atau deepseek-coder. Panggil: Dari api/generate-vcard.php via cURL POST. System prompt: Instruksi ketat untuk output HTML saja. Timeout: 30 detik max.

Midtrans PGW

SDK: Midtrans PHP SDK via Composer. Snap: getSnapToken untuk popup payment. Webhook: Notification handler di api/midtrans-webhook.php, verifikasi signature key. Server key: Hanya di backend config.

20 — Keamanan

Hardening Sistem

Langkah-langkah keamanan wajib untuk platform.

Input & Output

SQL Injection: 100% prepared statements (PDO). Tidak ada query langsung dari user input. XSS: htmlspecialchars() untuk semua output ke HTML. CSP header di setiap halaman. CSRF: Token per form, divalidasi di server. Upload: Validasi MIME type (bukan hanya extension), rename file random, folder uploads non-PHP-executable via .htaccess.

Session & Auth

Password: bcrypt hash (password_hash/PASSWORD_BCRYPT). Session: PHP native session, regenerasi ID setiap login. Cookie: HttpOnly + Secure + SameSite=Strict. Rate limit: Login maks 5x per 15 menit per IP. Admin: Double-check role di setiap halaman admin (bukan hanya redirect, tapi also check di query level).

21 — Fase Pengembangan

Roadmap 6 Fase

Urutan build yang realistis untuk shared hosting tanpa tim besar.

Fase 1 — Foundation

Setup Infra & Auth

Konfigurasi cPanel, buat database 24 tabel, sistem login/register (3 metode), session management, struktur file, middleware auth-check/admin-check. Landing page statis.

1-2 mingguPHP + MySQLGoogle OAuth

Fase 2 — Core Member

Dashboard + Bacaanku + Poin

Dashboard dengan video background dan 3 glass cards. Menu Bacaanku (posting, like, komentar, grid algorithm). Sistem poin (earning + transaction log). Dompet digital (redeem manual oleh admin).

2-3 mingguJavaScriptFile UploadGrid Algorithm

Fase 3 — LMS

Ruang Kursus + Member PRO

CRUD kursus dan materi dari admin. Halaman kursus member dengan progress tracking. Mode runtut. Sistem PRO membership (manual transfer dulu). Halaman profil member.

2 mingguLMS LogicPRO Gate

Fase 4 — Game & Kreatif

Edu Game + Ruang Kreatif

Integrasi Three.js untuk game 360. Buat 3-5 level awal (quiz + cleanup). Checkpoint + leaderboard. Ruang Kreatif (Pitch Corner) dengan vote + kolaborasi.

3-4 mingguThree.jsGyroscopeGame Logic

Fase 5 — AI & Payment

Virtual Card AI + Midtrans

Integrasi DeepSeek API untuk vCard generator. Halaman vcard publik. Integrasi Midtrans untuk auto payment PRO. Ruang Santai (video embed + mini player).

2-3 mingguDeepSeek APIMidtrans SDKiFrame Sandbox

Fase 6 — Polish

Animasi, Optimasi, Launch

Polish animasi (fade-in, transitions, micro-interactions). Optimasi performa (lazy loading, caching). Testing lengkap (cross-browser, mobile). Beta testing dengan 20-50 user. Launch resmi.

2 mingguPerformanceTestingLaunch

Estimasi Total

Total waktu: 12-16 minggu (3-4 bulan) untuk 1 developer full-time. Jika part-time (4 jam/hari), perkiraan 6-8 bulan. Fase 1-2 bisa diluncurkan sebagai MVP dalam 4-5 minggu part-time untuk mulai menarik user awal.

22 — Model Revenue

Sumber Pendapatan Platform

Bagaimana YUKTA menghasilkan uang secara berkelanjutan.

Member PRO Subscription

Paket bulanan (Rp49.000), 3 bulan (Rp129.000), tahunan (Rp399.000). Sumber revenue utama. Target 500 PRO member di tahun pertama.

Slot Iklan Produk

Mentor/vendor bayar tampil di kotak "Produk Unggulan" dashboard. Rp150.000/minggu atau Rp500.000/bulan. Rotasi iklan jika lebih dari 1 sponsor.

Kursus Premium Berbayar

Kursus khusus dijual terpisah di luar subscription PRO. Misal "Business Mastery" Rp199.000 sekali beli. Revenue split: 70% mentor, 30% platform.

Kolaborasi Vendor

Kerjasama brand/UMKM lokal yang target market-nya sesuai (pemuda). Partnership fee atau revenue sharing dari penjualan via referral link platform.

Donasi / Sosial

Fitur donasi sukarela bagi user yang ingin mendukung platform. Transparansi penggunaan dana melalui laporan publik bulanan di dashboard.

Layanan Jasa (Future)

Fase lanjutan: jasa pembuatan website UMKM (memanfaatkan AI vCard sebagai base), konsultasi bisnis oleh mentor, jasa desain oleh member berbakat.

23 — Tech Stack

Teknologi yang Digunakan

Semua stack disesuaikan dengan constraint shared hosting cPanel.

Layer	Teknologi	Versi	Keterangan
Backend	PHP	8.2	Procedural + OOP class helper, tanpa framework
Database	MySQL	8.x	24 tabel, relasional, InnoDB engine
DB Driver	PDO	Built-in	100% prepared statements
Frontend CSS	Tailwind CSS	CDN v3.4	Utility-first, tanpa build step
Frontend JS	Vanilla JS	ES6+	Tanpa framework, modular per halaman
Font	Space Grotesk + JetBrains Mono	Google Fonts	Heading + monospace code
Icons	Font Awesome	6.5 CDN	Icon set lengkap
3D Engine	Three.js	CDN r160+	Khusus Edu Game (360 panorama)
AI API	DeepSeek	v1	VCard generator, via PHP cURL proxy
OAuth	Google Identity	OAuth 2.0	Login via Google, PHP cURL
Payment	Midtrans	Snap API v2	PHP SDK via Composer, webhook
Server	Apache cPanel	Shared	.htaccess rewrite + security headers
Cron	cPanel Cron Jobs	—	Cek PRO expiry tiap jam, cleanup session

Kenapa Tidak Pakai Framework?

Pertimbangan: (1) Shared hosting cPanel limit memory ~256MB, Laravel bisa makan 50-80MB hanya bootstrap. (2) Tanpa framework = full kontrol, tidak ada "magic" sulit debug. (3) Performa lebih ringan, hanya load yang dibutuhkan. (4) Untuk 1 developer, overhead framework sering tidak sebanding. Strategi: Tetap terstruktur: folder config/, includes/, class helper terpisah, consistent naming convention — ini "framework-nya sendiri" tanpa vendor lock-in.

YUKTA

Mengajak, Terhubung, Terbekali, Dianugerahi.

Blueprint ini adalah fondasi. Langkah selanjutnya adalah eksekusi Fase 1.

24 Tabel

18+ Fitur

6 Fase

6 Revenue

Dokumen Blueprint Arsitektur Sistem YUKTA v1.0 — 2025

Sistem PlatformYUKTA