Ngorei Doc
v.4.0.2

Single Page Application

Ngorei Framework memiliki Komponen Single Page Application yang memungkinkan Anda membuat aplikasi satu halaman yang dinamis dengan mudah. SPA adalah aplikasi web yang memuat satu halaman HTML tunggal dan memperbarui konten secara dinamis tanpa perlu memuat ulang seluruh halaman.

Keunggulan SPA di Ngorei Framework

  • Performa lebih cepat karena tidak perlu memuat ulang seluruh halaman
  • Pengalaman pengguna yang lebih mulus (smooth user experience)
  • Mengurangi beban server karena hanya memuat data yang diperlukan
  • Mendukung navigasi tanpa reload halaman
  • Integrasi mudah dengan REST API
Klik Single Page
<a 
  encode="true"
  singlePage="{
    'elementById': 'targetElement',  
    'endpoint': 'path/to/endpoint',  
    'forceReload': true,        
    'data': {                      
      key1: 'value1',
    }
  }">
  Klik Single Page
</a>

Parameter yang Tersedia

Parameter Deskripsi
encode Set "true" untuk mengenkode data
elementById ID elemen target yang akan diperbarui
endpoint Path endpoint untuk mengambil data
forceReload Memaksa reload konten (true/false)
data Object berisi data yang akan dikirim
const Tds = new Ngorei();
window.singlePage = function(data) {
  try {
    // Decode data jika diperlukan
    const e = Tds.Helper().Decode(data);
    // Simpan ke session storage
    Tds.Network().sessionStorage().add({
      key: e.endpoint,
      data: e
    }).then(result => {
      console.log(result);
    });
    // Render halaman
    Tds.Render().SinglePageApp(e);
  } catch (error) {
    console.log("Data gagal diproses:", e);
  }
};

const Tds = new Ngorei();
 Tds.Network().sessionStorage()
 .latest().then(result =>{
  if (!result || !result.data) {
     console.warn('Data sesi tidak ditemukan');
     return;
   }
   Tds.Render().latSinglePageApp(result);
 })
  • Event Handling:
    • Data di-decode menggunakan helper jika diperlukan
    • Data disimpan ke session storage untuk penggunaan selanjutnya
    • Halaman dirender menggunakan Tds.Render().SinglePageApp()
  • Render Page Latest:
    • Mengambil data terakhir dari session storage