Seri Pemrograman Web Dasar : Bagian 1 – Pengenalan dan Fundamental Pemahaman Web
Apa Itu Web?
Web, atau World Wide Web (WWW), adalah sistem informasi global yang memungkinkan kita mengakses berbagai jenis konten seperti teks, gambar, video, dan aplikasi melalui internet. Secara sederhana, web adalah kumpulan halaman-halaman yang saling terhubung dan dapat diakses menggunakan browser seperti Google Chrome, Mozilla Firefox, atau Safari.
Komponen Utama dalam Sistem Web
Untuk memahami bagaimana web bekerja secara fundamental, kita perlu mengenal tiga komponen utama:
1. Client (Klien)
- Ini adalah perangkat pengguna akhir seperti komputer, laptop, smartphone.
- Client menggunakan web browser untuk meminta informasi dari server.
- Browser bertugas menampilkan halaman web kepada pengguna.
2. Server
- Server adalah komputer khusus yang menyimpan data website (file HTML/CSS/JS), database serta menjalankan aplikasi backend.
- Server menerima permintaan dari client dan mengirimkan kembali data yang diminta.
3. Jaringan Internet
- Jaringan ini menghubungkan client dengan server sehingga komunikasi bisa terjadi.
Cara Kerja Dasar Permintaan Halaman Web
Proses dasar ketika kamu membuka sebuah situs web:
- Kamu mengetik alamat URL di browser (misalnya www.example.com).
- Browser mengirimkan permintaan HTTP ke server tempat situs tersebut berada.
- Server menerima permintaan tersebut lalu memprosesnya—bisa hanya mengambil file statis atau menjalankan program backend untuk menghasilkan konten dinamis.
- Server kemudian mengirimkan respons berupa kode HTML beserta sumber daya lain seperti CSS dan JavaScript ke browser kamu.
- Browser menerjemahkan kode tersebut menjadi tampilan visual halaman web yang bisa kamu lihat dan interaksikan.
Protokol HTTP / HTTPS
HTTP (Hypertext Transfer Protocol) adalah aturan komunikasi antara client dan server di dunia web.
- HTTP bersifat stateless, artinya setiap permintaan dianggap independen tanpa menyimpan status sebelumnya.
- HTTPS (HTTP Secure) merupakan versi aman dari HTTP dengan enkripsi SSL/TLS agar data tidak mudah disadap saat dikirim melalui internet.
Struktur Dasar Halaman Web: HTML & CSS & JavaScript
Untuk membuat sebuah halaman website sederhana diperlukan tiga teknologi utama:
a) HTML (HyperText Markup Language)
HTML berfungsi sebagai kerangka struktur konten pada halaman web — misalnya judul, paragraf teks, gambar dll.
Contoh:
<code><h1>Selamat Datang</h1>
<p>Ini paragraf pertama saya.</p>
b) CSS (Cascading Style Sheets)
CSS digunakan untuk mempercantik tampilan website — warna latar belakang, ukuran font hingga tata letak elemen-elemen di layar.
Contoh:
css<code>body {
background-color: #f0f0f0;
font-family: Arial;
}
h1 {
color: blue;
}
c) JavaScript
JavaScript memberikan kemampuan interaktif pada website — misalnya tombol klik berubah warna atau validasi form sebelum dikirim ke server.
Contoh:
javascript<code>document.querySelector('button').addEventListener('click', function() {
alert('Tombol ditekan!');
});
Website Statis vs Dinamis
Website Statis: Kontennya tetap sama setiap kali dibuka karena hanya terdiri dari file-file statis HTML/CSS/JS tanpa proses backend aktif—contohnya portofolio pribadi sederhana.
Website Dinamis: Kontennya dapat berubah sesuai interaksi pengguna karena ada proses backend—misalnya media sosial atau toko online dimana data produk ditarik langsung dari database secara real-time oleh program server-side seperti PHP atau Node.js.
Ringkasan Fundamental Pemahaman Web
| Konsep | Penjelasan Singkat |
|---|---|
| Client | Perangkat pengguna akhir + browser |
| Server | Komputer penyedia layanan/data |
| Internet | Jaringan penghubung client-server |
| HTTP/HTTPS | Protokol komunikasi antar perangkat |
| HTML | Bahasa markup struktur konten |
| CSS | Bahasa styling tampilan |
| JavaScript | Bahasa scripting interaktivitas |
Dengan memahami konsep-konsep dasar ini sebagai fondasi kuatmu dalam pemrograman web akan memudahkan belajar teknologi lanjutan berikutnya!