Skip to content

Home

Jump to bottom Edit New page
Wibisono Sastrodiwiryo edited this page Mar 4, 2026 · 37 revisions

Welcome to phpVB Framework Wiki

phpVB (PHP Vue Bootstrap) adalah framework web hybrid untuk pengembangan aplikasi pemerintahan Indonesia. Dirancang agar mudah dipahami dan dikembangkan oleh SDM terbatas di daerah, tanpa membutuhkan infrastruktur atau stack teknologi yang kompleks.

What is phpVB?

phpVB adalah framework MVC (Model-View-Controller) dengan arsitektur Hybrid Rendering — PHP+Twig merender layout halaman di server, Vue.js mengisi konten interaktif di client via AJAX. Pendekatan ini memungkinkan developer yang hanya menguasai PHP+HTML tetap bisa membangun halaman baru, sementara interaktivitas ditambahkan secara bertahap dengan Vue components.

Technology Stack

  • PHP 8.4+ — Backend logic, routing, dan server-side rendering
  • Twig 3.20+ — Template engine untuk layout dan struktur halaman
  • Vue.js — Reactive frontend untuk konten interaktif (tabel, form, notifikasi)
  • Bootstrap 5 — UI framework untuk tampilan responsif
  • MeekroDB — Database abstraction layer (MySQL/MariaDB)
  • FastRoute — URL routing
  • DI Container — Dependency injection & service management (v5.0.2+)
  • Interface Contracts — Clean architecture boundaries (v5.0.2+)

Filosofi: Hybrid Rendering

phpVB menganut arsitektur Hybrid Rendering yang membagi tanggung jawab rendering menjadi dua layer:

┌─────────────────────────────────────────────────────────┐
│  Browser                                                 │
│                                                          │
│  ┌─ Server-Rendered (PHP + Twig) ─────────────────────┐ │
│  │  Layout: Header, Sidebar, Breadcrumb, Footer        │ │
│  │  Struktur halaman: judul, wrapper, grid             │ │
│  │                                                      │ │
│  │  ┌─ Client-Rendered (Vue.js) ──┐  ┌─ Vue.js ──┐   │ │
│  │  │  Tabel data (AJAX browse)   │  │  Form      │   │ │
│  │  │  Pagination, search, sort   │  │  Modal     │   │ │
│  │  │  fetch → PHP API → JSON     │  │  Notif     │   │ │
│  │  └─────────────────────────────┘  └────────────┘   │ │
│  └──────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────┘

Mengapa hybrid?

  1. Mudah dipahami. Developer cukup mengerti PHP+HTML untuk membuat halaman baru. Vue hanya ditambahkan saat butuh interaktivitas (tabel dinamis, form multi-step, notifikasi real-time).

  2. Hosting sederhana. Cukup shared hosting PHP + MySQL — tidak perlu Node.js server, tidak perlu build pipeline di production. Upload file PHP, selesai.

  3. SEO & layanan publik. Halaman yang dirender server langsung bisa dibaca search engine dan ditampilkan tanpa menunggu JavaScript. Penting untuk portal publik.

  4. Debugging mudah. Masalah layout? Periksa Twig. Masalah data/interaksi? Periksa Vue component dan API-nya. Pemisahan ini mempercepat troubleshooting.

  5. Progressive enhancement. Halaman tetap berfungsi dengan HTML dasar dari Twig. Vue memperkaya pengalaman pengguna di atasnya.

Alur Kerja Hybrid

1. User klik link → Request ke PHP
2. PHP Router mencocokkan URL → Controller dipanggil
3. Controller menyiapkan data → Twig merender layout + placeholder Vue
4. Browser menerima HTML lengkap (layout sudah tampil)
5. Vue.js mount pada elemen <div id="app">
6. Vue fetch data via AJAX ke PHP API endpoints
7. Vue merender konten interaktif (tabel, form, dll)
8. User berinteraksi → Vue handle secara reaktif
9. Operasi CRUD → Vue POST ke PHP API → PHP proses → JSON response

Pendekatan ini berbeda dari SPA (Single Page Application) di mana seluruh rendering dilakukan di client. Dalam phpVB, server tetap mengontrol struktur halaman — Vue hanya bertanggung jawab untuk bagian konten yang membutuhkan interaktivitas.

History

Year Version Name Milestone
2001 0.1.0 phpMember Public release (GPL license)
2007-2011 2.x phpFramewerk Major improvements
2014 3.0 phpFramewerk KPU publication version
2017 4.0 gov2framework PSR-4, FastRoute, Twig
2021 4.1-4.2 phpVB Keycloak, components
2026 5.0.1 phpVB PHP 8.4, Enums, typed exceptions, testing
2026 5.0.2 phpVB DI Container, Contracts, HTTP layer, Config system

Original Author: Wibisono Sastrodiwiryo (wibi@alumni.ui.ac.id)
Organization: eGov Lab UI / Cyber Gov Labs
License: Copyleft (eGov Lab UI)

Tujuan & Prinsip Desain

phpVB dirancang dengan mempertimbangkan realitas pengembangan aplikasi di instansi pemerintah daerah:

  1. Mudah dikembangkan oleh SDM terbatas. Logika framework harus bisa dipahami oleh programmer PHP tingkat menengah. Tidak mengharuskan penguasaan tooling modern yang kompleks.

  2. Tidak butuh infrastruktur tinggi. Cukup shared hosting PHP + MySQL yang tersedia di mana-mana. Tidak memerlukan Node.js server, container orchestration, atau cloud services khusus.

  3. Bisa digunakan untuk layanan publik maupun internal. Template server-rendered mendukung SEO untuk portal publik, sementara Vue components mendukung interaktivitas untuk aplikasi internal.

  4. Progressive Web App (PWA) sebagai ekstensi. PWA digunakan untuk memperluas jangkauan ke mobile dan desktop (install ke home screen, cache assets) — bukan untuk menggantikan web sebagai platform utama.

Key Features

Government-Ready

Built-in authentication & authorization, SSO (Single Sign-On) integration, OAuth2/Keycloak support, RBAC (Role-Based Access Control), hierarchical data support (Provinsi → Kota → Kecamatan), dan multi-tenant via domain configuration.

Rapid Development

MVC architecture dengan CRUD generators, 7 reusable UI components, Twig template inheritance untuk layout, dan Vue.js integration untuk konten interaktif. Developer bisa membuat halaman CRUD lengkap dalam hitungan menit.

Security

JWT session management, SQL injection protection (prepared statements via MeekroDB), XSS protection (Twig auto-escaping), CSRF protection, role-based access control, dan superuser system.

Database

MeekroDB abstraction layer dengan DatabaseInterface contract untuk swappable backends. Mendukung MySQL/MariaDB, XML-based + .env configuration, hierarchical data, transactions, dan query builder. DatabaseConfig value object mendukung MySQL, PostgreSQL, SQLite, dan SQL Server.

Hybrid UI

Twig merender layout halaman (header, sidebar, footer, breadcrumb) di server. Vue.js merender konten interaktif (tabel data, form, modal, notifikasi) di client. Bootstrap 5 sebagai UI framework. Responsive design dengan Font Awesome icons. Template default saat ini adalah "cube" — semua template berbasis Bootstrap dan dinamai sesuai nama template, bukan nama CSS framework.

Architecture (Hybrid Rendering)

┌──────────────────────────────────────────────────────┐
│  HTTP Request                                         │
└──────────┬───────────────────────────────────────────┘
           │
┌──────────▼───────────────────────────────────────────┐
│  PHP Backend (Server-Side)                            │
│                                                       │
│  index.php → Application::boot() → Router::dispatch() │
│                      │                                │
│           ┌──────────┴──────────┐                     │
│           │                     │                     │
│    Page Request            API Request                │
│    (GET /myapp)            (GET /myapp/crud/browse/1) │
│           │                     │                     │
│    Twig merender           json_encode($data)         │
│    layout + placeholder    return JSON                │
│    HTML lengkap                                       │
└──────────┬──────────────────────┬────────────────────┘
           │                      │
┌──────────▼──────────────────────▼────────────────────┐
│  Browser (Client-Side)                                │
│                                                       │
│  HTML dari Twig langsung tampil (layout, sidebar,     │
│  header, footer sudah terlihat)                       │
│                                                       │
│  Vue.js mount → fetch data via AJAX → render konten   │
│  interaktif (tabel, form, pagination, notifikasi)     │
└──────────────────────────────────────────────────────┘

Quick Example

1. Create Simple Page

Model (apps/hello/model/index.php):

<?php namespace App\hello\model;

class index extends \Gov2lib\document {
    function __construct () {
        $this->templateDir = __DIR__."/../view";
        $path = explode("\\", __CLASS__);
        $this->className = $path[sizeof($path)-1];
        $this->controller = __DIR__."/../".$this->className.".php";
    }
}

Controller (apps/hello/index.php):

<?php namespace App\hello;

class index {
    function index () {
        global $doc;
        $doc->body("pageTitle", "Hello World");
        $doc->body("message", "Welcome to phpVB!");
    }
}

View (apps/hello/view/index.html):

<div class="container">
    <h1 class="title">{{ pageTitle }}</h1>
    <p class="subtitle">{{ message }}</p>
</div>

Route (apps/hello/xml/route.xml):

<route>
    <method>GET</method>
    <uri>/hello</uri>
    <handler>hello\model\index</handler>
</route>

Access: http://localhost/hello

2. CRUD Example

Model with database:

class items extends \Gov2lib\crudModel {
    function __construct () {
        global $config;
        // ... setup ...
        parent::__construct(trim($config->domain->attr['dsn']));
        $this->tbl->table = "items";
    }
}

Controller with CRUD:

class items {
    function browse($vars) {
        global $self, $doc;
        return $doc->responseGet($self->doBrowse($vars['scroll']));
    }
    
    function add($data) {
        global $self, $doc;
        $id = $self->doAdd($data);
        return $doc->response("is-success", "refreshTable", $id);
    }
}

Built-in Applications

App Purpose Features
home Default dashboard Landing page, API key display
gov2login Authentication Login, user management, RBAC, privilege
gov2option Configuration Options management, control panel
gov2survey Surveys Questionnaire builder, response collection
components UI Components 7 reusable components (nav, table, pagination, etc)

Built-in Components

  1. gov2nav - Navigation menu & breadcrumb
  2. gov2notification - Alert/notification system
  3. gov2search - Search interface
  4. gov2table - Data table with AJAX
  5. gov2pagination - Pagination controls
  6. gov2formfield - Dynamic form fields
  7. gov2button - Standardized buttons

Technology Stack

Backend

  • PHP 8.4+ - Core language
  • Composer - Dependency management
  • MeekroDB 2.5.1 - Database ORM
  • FastRoute 1.3+ - URL routing
  • Twig 3.20+ - Template engine
  • JWT (firebase/php-jwt) - Session tokens
  • Guzzle 7.8+ - HTTP client
  • OAuth2 (league/oauth2-client) - Authentication
  • phpdotenv 5.6+ - Environment variable management

Frontend

  • Vue.js 2.x - Reactive framework
  • Axios - HTTP requests
  • Bootstrap 5 - CSS framework
  • Font Awesome - Icons

Database

  • MySQL 5.7+ / MariaDB 10.3+

Web Server

  • Apache 2.4+ with mod_rewrite

Use Cases

phpVB Framework ideal untuk dua kategori aplikasi:

Layanan Publik — Portal informasi, layanan publik online, sistem pengaduan, survey & kuesioner. Halaman server-rendered (Twig) memastikan SEO dan aksesibilitas tanpa JavaScript.

Aplikasi Internal — Dashboard monitoring, reporting system, data management, workflow automation. Vue components memberikan interaktivitas yang kaya untuk tabel data, form multi-step, dan real-time notification.

Production Usage

phpVB telah digunakan di berbagai instansi pemerintah:

  • KPU (Sidalih v3)
  • BAPPENAS (KRISNA v2)
  • KemenPAN-RB (SAKIP next gen)
  • Various Pemda (Portal SDI / Satu Data Indonesia)

Getting Started

Prerequisites

  • PHP 8.4 or higher
  • MySQL/MariaDB 5.7+
  • Apache with mod_rewrite
  • Composer

Installation

# Clone repository
git clone https://github.com/org/phpVB.git

# Install dependencies
composer install

# Configure environment
cp core/config/config.local.xml.example core/config/config.local.xml

# Setup database
mysql -u root -p < schema.sql

# Configure Apache virtual host
# Access: http://phpvb.local

See Quick Start Guide for detailed instructions.

Documentation

Getting Started

Core Concepts

Features

Support

Documentation

Community

  • 🐛 Report bugs on GitHub Issues
  • 💬 Ask questions in Discussions
  • 📖 Browse Wiki for examples

Contact

Contributing

We welcome contributions!

  • Report bugs
  • Suggest features
  • Submit pull requests
  • Improve documentation
  • Share your projects

License

phpVB Framework is licensed under Copyleft (eGov Lab UI).

Quick Links

Welcome to phpVB! 🚀

Start building government applications with modern PHP framework.

Get Started →

Add a custom footer
Add a custom sidebar

Clone this wiki locally