Program web, pada dasarnya, adalah aplikasi yang dapat diakses melalui peramban (browser) internet. Untuk memahami cara kerjanya, kita perlu melihat contoh paling dasar, yaitu program web statis berbasis HTML. Program ini berfungsi sebagai fondasi visual dari hampir semua situs web yang ada saat ini. Tujuan utama dari contoh program web awal adalah untuk menyajikan informasi secara terstruktur dan mudah dibaca oleh pengguna, memanfaatkan standar inti web seperti HTML (HyperText Markup Language) untuk struktur, CSS (Cascading Style Sheets) untuk tampilan, dan JavaScript untuk interaktivitas.
Ketika kita berbicara mengenai contoh program web, kita sering kali merujuk pada skrip klien-sisi (client-side) yang dieksekusi sepenuhnya di browser pengguna. Meskipun saat ini program web modern sangat kompleks, melibatkan server-side scripting (seperti PHP, Python, atau Node.js), konsep dasar selalu berakar pada tiga pilar utama tadi. Contoh paling sederhana adalah sebuah berkas tunggal yang hanya berisi teks dan beberapa penanda.
Ini adalah implementasi minimalis yang dapat Anda buka langsung di browser tanpa memerlukan server. Program ini hanya menampilkan judul dan paragraf sederhana.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Program Web Mini</title>
</head>
<body>
<h1>Selamat Datang di Program Web Saya</h1>
<p>Ini adalah konten utama dari halaman web statis ini.</p>
<p>Program ini hanya membutuhkan satu berkas HTML.</p>
</body>
</html>
Dalam contoh di atas, tag <h1> mendefinisikan judul utama, sementara tag <p> digunakan untuk blok paragraf. Meskipun sederhana, kode ini sudah memenuhi syarat sebagai sebuah "program web" karena mampu dirender dan ditampilkan oleh agen pengguna (browser). Keberhasilan program ini diukur dari seberapa akurat browser dapat menginterpretasikan instruksi markup yang diberikan.
Program web menjadi jauh lebih dinamis ketika kita menambahkan JavaScript. JavaScript memungkinkan manipulasi elemen halaman (DOM), menangani peristiwa pengguna (seperti klik), dan melakukan komunikasi asinkron dengan server (AJAX). Untuk tujuan edukasi, kita bisa membuat program yang mengubah teks ketika sebuah tombol diklik. Ini adalah contoh program web yang melibatkan interaksi langsung.
Perhatikan bagaimana HTML menyediakan struktur, dan JavaScript menambahkan fungsionalitas.
<!DOCTYPE html>
<html lang="id">
<head>
<title>Program Web Interaktif</title>
</head>
<body>
<h2 id="status">Status Awal: Menunggu Aksi</h2>
<button onclick="ubahStatus()">Klik Saya</button>
<script>
function ubahStatus() {
document.getElementById('status').innerText = 'Status Diubah oleh JavaScript!';
alert('Aksi berhasil diproses!');
}
</script>
</body>
</html>
Fungsi ubahStatus() dipanggil saat event onclick pada tombol terjadi. Kode ini menunjukkan bahwa program web modern memerlukan lebih dari sekadar penanda; ia memerlukan logika yang dieksekusi sebagai respons terhadap input pengguna. Ini adalah lompatan signifikan dari program web statis murni, menjadikannya aplikasi fungsional di sisi klien.
Meskipun contoh di atas hanya menunjukkan sisi klien, program web yang kompleks (seperti e-commerce atau media sosial) selalu memerlukan sisi server (backend). Program web backend bertugas mengelola data, mengautentikasi pengguna, dan menghasilkan HTML dinamis sebelum dikirimkan ke browser. Contoh program web backend sering ditulis dalam bahasa seperti Python (menggunakan framework Django/Flask) atau PHP. Backend inilah yang memungkinkan program memiliki memori dan kemampuan menyimpan data secara permanen, yang tidak mungkin dilakukan hanya dengan HTML dan JavaScript sederhana. Pemahaman menyeluruh tentang program web harus mencakup interaksi antara klien (browser) dan server (backend) melalui protokol HTTP.