Konten Dinamis pada Laman Web Statis

Banyak website sederhana, seperti yang dibuat menggunakan platform blog, secara bawaan bekerja secara statis. Artinya, konten yang tampil hari ini cenderung sama persis dengan yang tampil besok, kecuali Anda mengubahnya secara manual di editor.

Namun, bagaimana jika Anda ingin mengambil input dari form dan menampilkan data yang selalu berubah dan terbaru? Ini membutuhkan interaksi dinamis, di mana laman website harus "berbicara" dengan sebuah pusat data secara otomatis.

Kami akan menjelaskan bagaimana Anda dapat mencapai konten dinamis tanpa perlu menyewa server yang mahal, hanya dengan menggunakan tiga komponen sederhana: Laman HTML, Pusat Data Sederhana, dan Jembatan Skrip Otomatis.


1. Laman HTML Statis (Frontend)

Laman website adalah antarmuka yang dilihat oleh pengunjung, tempat formulir input berada dan data hasil ditampilkan. Kunci agar laman ini menjadi dinamis adalah dengan menyisipkan kode JavaScript.

JavaScript berfungsi sebagai pemohon data. Ia bertanggung jawab mengirimkan permintaan data (misalnya, data yang baru diisi di formulir) dan menerima balasan. Setelah balasan diterima, JavaScript-lah yang memasukkannya ke dalam laman web, membuat konten terlihat hidup.

Contoh sederhana bagaimana JavaScript "memohon" data dari jembatan skrip:


// JavaScript mengirim permintaan data terbaru
fetch('URL_UNIK_JEMBATAN_ANDA', {
    method: 'GET'
})
.then(response => response.json())
.then(data => {
    // Memasukkan hasil pemrosesan (misalnya, angka total) ke dalam website
    document.getElementById('hasil').innerHTML = 'Data total hari ini: ' + data.total;
});


2. Pusat Data Sederhana (Database)

Sebagai ganti database tradisional yang rumit, kita menggunakan spreadsheet online yang mudah diakses. Setiap baris di spreadsheet ini adalah satu data, dan setiap kolom adalah detail dari data tersebut.

Pusat Data ini menyimpan semua yang dibutuhkan sistem, mulai dari entri data yang dikirim dari formulir, hingga catatan kode keamanan rahasia harian.


3. Jembatan Skrip Otomatis (Backend/API)

Inilah komponen paling penting. Jembatan Skrip adalah lingkungan pemrograman online yang bertindak sebagai "penerjemah" dan "penjaga gerbang" antara laman HTML dan Pusat Data Sederhana. Jembatan ini memiliki logika yang cerdas.

A. Menerima dan Memproses Input (Logika POST)

Ketika formulir di website di-submit, data dikirim ke Jembatan Skrip. Jembatan ini menjalankan logika yang tidak bisa ditembus oleh pengunjung, seperti:

  • Memeriksa apakah kode keamanan rahasia (PIN) yang dimasukkan sudah benar untuk hari ini.
  • Memastikan integritas data. Jembatan bisa menolak data jika sudah ada (pencegahan duplikasi), atau sebaliknya, secara cerdas memperbarui (menimpa) data lama jika data yang sama diinput kembali (logika update).

Kode di Jembatan Skrip yang menangani input data:


function doPost(permintaan) {
  // Ambil data dari website
  let input = permintaan.parameter;
  
  // Periksa keabsahan kode keamanan
  if (input.kode_rahasia !== PIN_HARI_INI) {
    return kirimPesanError("Kode salah.");
  }

  // Lanjutkan memproses dan menyimpan/memperbarui data di spreadsheet
  // ...
}

B. Menyediakan Konten Dinamis (Logika GET)

Saat laman tampilan dibuka, ia meminta data dari Jembatan Skrip. Jembatan Skrip tidak hanya mengambil semua isi spreadsheet, tetapi juga memprosesnya terlebih dahulu, seperti:

  • Penyaringan: Hanya mengambil data yang relevan (misalnya, hanya menampilkan data yang tanggalnya sama dengan hari ini, atau hanya yang sudah disetujui untuk dipublikasikan).
  • Perhitungan: Melakukan perhitungan (misalnya, menjumlahkan semua angka dari data yang tersaring) dan mengirimkan angka total tersebut ke website bersama dengan data tabel.

Kesimpulan

Dengan Jembatan Skrip Otomatis, kita berhasil membuat website statis Anda bertindak layaknya aplikasi web sungguhan. Laman HTML berfungsi sebagai antarmuka yang ringan dan responsif, sementara Jembatan Skrip mengurus semua logika keamanan, validasi, pembaruan, dan pemrosesan data di belakang layar. Hasilnya, pengunjung dapat melihat informasi yang selalu baru dan akurat, tanpa perlu kerumitan server konvensional.

Oleh Opan
Dipostkan November 25, 2024
Seorang guru matematika yang hobi ngeblog dan menulis. Dari ketiganya terwujudlah website ini sebagai sarana berbagi pengetahuan yang saya miliki.

Demi menghargai hak kekayaan intelektual, mohon untuk tidak menyalin sebagian atau seluruh halaman web ini dengan cara apa pun untuk ditampilkan di halaman web lain atau diklaim sebagai karya milik Anda. Tindakan tersebut hanya akan merugikan diri Anda sendiri. Jika membutuhkan halaman ini dengan tujuan untuk digunakan sendiri, silakan unduh atau cetak secara langsung.

Banyak Dilihat

Arsip

Kategori