NexaJs - Integrasi PHP dan JavaScript

NexaUI Framework menyediakan integrasi yang mulus antara PHP dan JavaScript melalui fitur setJsController(). Fitur ini memungkinkan Anda mengirim data dari controller PHP ke JavaScript frontend tanpa perlu membuat API endpoint terpisah.

Cara Kerja

Data dikirim dari controller PHP menggunakan setJsController(), disimpan dalam session, dan kemudian tersedia di JavaScript melalui objek global NEXA. Framework secara otomatis menangani serialisasi, keamanan, dan pengiriman data.

Penggunaan di Controller PHP


// Di controller PHP
public function index(): void
{
    // Data yang ingin dikirim ke JavaScript
    $jsData = [
        'user_info' => [
            'name' => 'John Doe',
            'email' => 'john@example.com',
            'role' => 'developer'
        ],
        'page_data' => [
            'current_time' => date('Y-m-d H:i:s'),
            'items_count' => 42
        ],
        'config' => [
            'api_endpoint' => '/api/v1',
            'refresh_interval' => 5000
        ]
    ];

    // Kirim data ke JavaScript
    $this->setJsController($jsData);
    
    // Render template
    $this->render('example/index');
}

Mengakses Data di JavaScript

Data yang dikirim melalui setJsController() tersedia di objek global NEXA:


// Akses objek NEXA
console.log(NEXA);

// Akses data controller
const userData = NEXA.controllers.data.user_info;
console.log('User name:', userData.name);

// Menggunakan utilitas helper
const apiEndpoint = NEXA.utils.getData('config').api_endpoint;
console.log('API endpoint:', apiEndpoint);

// Mendapatkan info sumber data
const sourceInfo = NEXA.utils.getSourceInfo();
console.log('Data from:', sourceInfo.controller);

Fitur Real-time Updates

NexaJs mendukung pembaruan data real-time melalui polling:


// Mulai polling untuk pembaruan setiap 5 detik
NEXA.utils.startRealtime();

// Atau dengan interval kustom (2 detik)
NEXA.utils.startRealtime(2000);

// Mendengarkan perubahan data
document.addEventListener('nexaDataUpdate', function(event) {
    console.log('Data berubah!', event.detail.newData);
    // Update UI di sini
});

// Berhenti polling kapan saja
NEXA.utils.stopRealtime();

Struktur Objek NEXA

Properti	Deskripsi
`NEXA.url`	URL dasar aplikasi
`NEXA.baseDir`	Direktori dasar aplikasi
`NEXA.name`	Nama aplikasi
`NEXA.isLoggedIn`	Status login pengguna (boolean)
`NEXA.userId`	ID pengguna yang login (null jika tidak login)
`NEXA.csrfToken`	Token CSRF untuk keamanan form
`NEXA.apiBase`	URL dasar untuk API
`NEXA.controllers`	Data dari controller PHP
`NEXA.utils`	Utilitas dan helper functions
`NEXA._debug`	Informasi debug (untuk development)

Helper Methods

Method	Deskripsi
`NEXA.utils.getControllerData()`	Mendapatkan semua data dari controller
`NEXA.utils.getData(key, defaultValue)`	Mendapatkan data spesifik dengan key
`NEXA.utils.isFromHome()`	Cek apakah data dari HomeController
`NEXA.utils.getSourceInfo()`	Info tentang controller sumber data
`NEXA.utils.makeRequest(url, options)`	Helper untuk membuat request fetch dengan CSRF token
`NEXA.utils.startRealtime(interval)`	Mulai polling untuk pembaruan data real-time
`NEXA.utils.stopRealtime()`	Hentikan polling real-time
`NEXA.utils.showDebug()`	Tampilkan informasi debug di konsol

Contoh Kasus Penggunaan

1. Form Validation


// Controller PHP
public function form(): void
{
    $formConfig = [
        'fields' => [
            'name' => ['required' => true, 'min_length' => 2],
            'email' => ['required' => true, 'type' => 'email'],
            'age' => ['required' => false, 'min' => 18, 'max' => 100]
        ],
        'messages' => [
            'name_required' => 'Name is required',
            'email_invalid' => 'Please enter a valid email'
        ]
    ];

    $this->setJsController($formConfig);
    $this->render('form/index');
}


// JavaScript di form/index.html
document.addEventListener('DOMContentLoaded', function() {
    const formConfig = NEXA.controllers.data;
    const form = document.getElementById('user-form');
    
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const name = form.elements.name.value;
        const email = form.elements.email.value;
        
        // Validasi menggunakan konfigurasi dari controller
        const nameField = formConfig.fields.name;
        if (nameField.required && name.length === 0) {
            showError('name', formConfig.messages.name_required);
            return;
        }
        
        // Lanjutkan validasi lainnya...
        
        // Kirim form jika valid
        form.submit();
    });
});

2. Dashboard Real-time


// Controller PHP
public function dashboard(): void
{
    $dashboardData = [
        'stats' => [
            'users_online' => $this->getUsersOnlineCount(),
            'total_sales' => $this->getTotalSales(),
            'pending_orders' => $this->getPendingOrdersCount()
        ],
        'last_updated' => date('Y-m-d H:i:s')
    ];

    $this->setJsController($dashboardData);
    $this->render('dashboard/index');
}


// JavaScript di dashboard/index.html
document.addEventListener('DOMContentLoaded', function() {
    // Render initial dashboard
    updateDashboard(NEXA.controllers.data);
    
    // Start real-time updates
    NEXA.utils.startRealtime(10000); // Update setiap 10 detik
    
    // Listen for updates
    document.addEventListener('nexaDataUpdate', function(event) {
        updateDashboard(event.detail.newData);
    });
    
    function updateDashboard(data) {
        document.getElementById('users-online').textContent = data.stats.users_online;
        document.getElementById('total-sales').textContent = data.stats.total_sales;
        document.getElementById('pending-orders').textContent = data.stats.pending_orders;
        document.getElementById('last-updated').textContent = data.last_updated;
    }
});

Best Practices

Gunakan setJsController() untuk data yang perlu diakses segera di frontend
Hindari mengirim data sensitif seperti password atau token akses
Gunakan real-time updates hanya jika diperlukan untuk mengurangi beban server
Struktur data dengan jelas dan konsisten untuk memudahkan akses di JavaScript
Untuk data yang sangat besar atau sering berubah, pertimbangkan API endpoint terpisah

Debugging

NexaJs menyediakan beberapa alat debugging untuk membantu pengembangan:


// Tampilkan informasi debug di konsol
NEXA.utils.showDebug();

// Akses informasi debug langsung
const debug = NEXA._debug;
console.log('Session ID:', debug.session_id);
console.log('Session Data Keys:', debug.session_data_keys);

// Akses URL dengan parameter debug
// http://your-site.com/app/main.js?debug=1

Tip: Untuk melihat data mentah yang dikirim oleh controller, akses http://your-site.com/app/main.js?live=1