SiputGila dan Logika URL Palsunya

Dulu, sebelum SiputGila benar-benar matang, aku membangunnya tanpa bantuan backend. Semua berjalan sepenuhnya di sisi client: semua link dan data disimpan dalam file .JSON, lalu diolah dengan JavaScript.

Meski hanya menggunakan JavaScript tanpa library, aku berhasil membuat alur seperti yang aku inginkan, yaitu menampilkan URL file “palsu” yang dapat diakses, seolah-olah file benar-benar disimpan di server sendiri.

Di sini aku pakai logika sederhana: kalau URL saat ini sama persis dengan salah satu path yang ada di JSON, misalnya siputgila.my.id/file/test.txt, maka browser akan otomatis redirect ke URL asli file-nya, misalnya example.com/file/0/test.txt.

Alurnya kurang lebih seperti ini:

Ambil data JSON dari URL

Pertama, aku ambil data dari file JSON di server berdasarkan nama halaman yang sedang dibuka, lalu menyimpannya ke variabel bernama jsonData. Jadi, begitu halaman dimuat, dia cek URL untuk tahu nama terakhir di path (misalnya nintendo kalau URL-nya /rom/nintendo), lalu cari file JSON bernama nintendo.json di folder /static/, ambil isinya.

let jsonData; // Deklarasikan variabel jsonData di luar fungsi fetch
var namafile = window.location.pathname.split('/').filter(Boolean).pop(); // Mengambil elemen terakhir

var api = '/static/' + namafile + '.json';

fetch(api)
   .then(response => response.json())
   .then(data => {
      // Sekarang kamu memiliki data JSON dari URL
      jsonData = data; // Simpan data JSON dalam variabel jsonData

Buat tabel dari data JSON

Data yang dipakai buat bikin tabel semuanya diambil dari properti results dalam file JSON, yang isinya array data hasil pencarian. Aku juga sengaja ngejalanin cek redirect di DOMContentLoaded biar kalau orang buka URL langsung ke salah satu name, dia otomatis dilempar ke URL asli.

const tableBody = document.getElementById('table-body');

      // Loop melalui data JSON dan tambahkan baris baru ke dalam tabel
      jsonData.results.forEach(result => {
         const row = tableBody.insertRow();
         const nameCell = row.insertCell(0);
         const sizeCell = row.insertCell(1);

         // Buat tag pertama dengan atribut tertentu
         const tagPertama = document.createElement('tag-pertama');
         tagPertama.classList.add('namaClass');

         // Tambahkan tag pertama ke dalam sel pertama
         nameCell.appendChild(tagPertama);

         // Buat ikon dengan Font Awesome
         const icon = document.createElement('i');
         icon.classList.add('fa', 'fa-file-archive');

         // Tambahkan ikon ke dalam tag pertama
         tagPertama.appendChild(icon);

         // Buat tautan dengan format <a href="nama web/path saat ini/name-pada-json/">name-pada-json</a>
         const link = document.createElement('a');
         link.href = `https://www.siputgila.my.id${window.location.pathname}/${result.name.replaceAll(" ", "_")}`;
         link.textContent = result.name;
         // Tambahkan class ke dalam tag <a>
         link.classList.add('leftSpace'); // Gantilah 'namaClass' dengan nama class yang kamu inginkan
         link.addEventListener('click', handleLinkClick); // Tambahkan event listener

         // Tambahkan tautan ke dalam tag pertama
         tagPertama.appendChild(link);

         // Tambahkan size ke sel kedua
         sizeCell.textContent = result.size;
      });


      // Tambahkan event listener untuk menangani redirect berdasarkan "name"
      document.addEventListener('DOMContentLoaded', () => {
         const pathName = window.location.pathname;
         jsonData.results.forEach(result => {
            if (`/${result.name}/` === pathName) {
               window.location.href = result.url;
            }
         });
      });

Periksa URL yang diakses

Setelah data dari JSON didapatkan, table sudah muncul, aku lanjut nambahin kode ini di bawahnya. Fungsinya? Buat meriksa apakah ada data atau URL yang salah.
Sebenarnya bagian ini lebih tepat disebut penanganan error saat ambil file JSON dari server. Kalau filenya nggak ada atau servernya lagi error, langsung kasih pesan error ke user biar nggak bingung.

.catch(error => {
      // Tangani kesalahan jika terjadi saat mengambil data JSON
      showError('Failed to fetch JSON data: ' + error);

   });

// Fungsi untuk menampilkan pesan kesalahan
function showError(message) {
   const errorDiv = document.createElement('div');
   errorDiv.textContent = message;
   document.body.appendChild(errorDiv);
}

Tangani klik pada tautan

Di sini aku pastiin juga data yang diklik memang ada di dalam file JSON. Jadi tautan nggak cuma asal klik ke URL, tapi selalu dicek dulu ke datanya supaya valid. Kalau datanya nggak ketemu, user langsung dikasih tahu kalau filenya nggak ada.

// Fungsi untuk menangani klik pada tautan
function handleLinkClick(event) {
   event.preventDefault(); // Mencegah tindakan default dari tautan

   // Dapatkan nama dari tautan yang diklik
   const itemName = this.textContent;

   // Cari item dalam data JSON berdasarkan nama yang cocok
   const selectedItem = jsonData.results.find(item => item.name === itemName);

   if (selectedItem) {
      // Lakukan redirect ke URL yang sesuai
      window.location.href = selectedItem.url;
   } else {
      // Tampilkan pesan kesalahan
      alert('{"error":"File not found!"}');
   }
}



Kurang lebih begitu cara kerjanya. Semoga catatan kecil ini bisa jadi inspirasi buat teman-teman yang juga suka otak-atik halaman web tanpa backend.
Kalau ada yang ingin didiskusikan, jangan sungkan untuk tanya. Selamat bereksperimen!

Related posts: