Cara Kerja Internet & Web

Kenapa ini penting

Setiap hari kamu membuka website tanpa berpikir. Tetapi sebagai developer, kamu akan sering bertemu masalah yang hanya bisa dipecahkan kalau paham apa yang terjadi di balik layar. Contohnya: "Kenapa website saya tidak bisa dibuka padahal kodenya benar?" (mungkin DNS belum menyebar), "Kenapa gambar tidak muncul?" (mungkin server membalas 404), atau "Kenapa browser bilang situs ini tidak aman?" (mungkin belum memakai HTTPS). Modul ini memberi kamu peta besar. Peta ini akan terus terpakai saat nanti belajar fetch() di JavaScript, membuat API di Next.js, atau men-deploy website.

Konsep inti

Internet vs web

Internet adalah jaringan raksasa yang menghubungkan miliaran komputer lewat kabel, serat optik, dan sinyal radio. Web (World Wide Web) adalah salah satu layanan yang berjalan di atas internet: kumpulan halaman yang saling terhubung lewat link. Email, game online, dan WhatsApp juga memakai internet, tetapi bukan "web". Analogi: internet adalah jaringan jalan raya, web adalah salah satu jenis kendaraan yang lewat di sana.

Client dan server

• Client adalah perangkat (dan software) yang meminta sesuatu. Browser di laptop atau HP kamu adalah client.
• Server adalah komputer yang melayani permintaan itu. Ia menyimpan file website atau menjalankan program yang menghasilkan halaman.

Analogi warung makan: kamu (client) memesan nasi goreng ke pelayan, dapur (server) memasak, lalu pelayan mengantarkan piringnya. Satu dapur bisa melayani banyak pelanggan sekaligus.

IP address dan DNS

Setiap perangkat di internet punya alamat angka yang disebut IP address, misalnya 172.66.147.243 (IPv4) atau versi panjang seperti 2606:4700::6812:1a78 (IPv6). Manusia susah menghafal angka, jadi dibuatlah DNS (Domain Name System), semacam buku telepon internet yang menerjemahkan nama domain seperti example.com menjadi IP address.

Bagian-bagian sebuah URL:

Untuk punya website sendiri, kamu butuh dua hal: domain (dibeli/disewa tahunan di registrar) dan hosting (tempat file website disimpan dan dilayani). Nanti di modul GitHub kamu akan belajar hosting gratis lewat GitHub Pages.

TCP/IP, HTTP, dan HTTPS

Data di internet dipecah menjadi paket-paket kecil. IP mengurus alamat pengiriman paket, TCP memastikan paket sampai lengkap dan berurutan. Di atasnya ada HTTP (HyperText Transfer Protocol), "bahasa" percakapan antara browser dan server. HTTPS adalah HTTP yang dibungkus enkripsi TLS, sehingga isi percakapan (password, nomor kartu) tidak bisa diintip orang di tengah jalan, misalnya di Wi-Fi kafe. Sekarang hampir semua situs wajib HTTPS; browser menandai situs HTTP biasa sebagai "Not secure".

Percakapan HTTP selalu berpola request (permintaan) dan response (jawaban). Request punya method: GET (ambil data), POST (kirim data baru), PUT/PATCH (ubah), DELETE (hapus). Response punya status code:

Cara gampang menghafal: 2xx berhasil, 3xx dialihkan, 4xx salah di sisi client, 5xx salah di sisi server.

Apa yang terjadi saat kamu mengetik URL lalu menekan Enter

1. Browser membaca URL dan menentukan protokol, domain, dan path.
2. DNS lookup: browser mencari IP dari domain (cek cache dulu, kalau tidak ada tanya DNS resolver milik provider internet).
3. Koneksi TCP dibuka ke IP tersebut, lalu TLS handshake untuk HTTPS (kedua pihak sepakat soal kunci enkripsi dan browser memeriksa sertifikat situs).
4. HTTP request dikirim, misalnya GET /artikel/git.
5. Server memproses dan membalas response: status code, header, dan isi (biasanya HTML).
6. Browser membaca HTML dan menemukan file lain yang dibutuhkan (CSS, JavaScript, gambar, font), lalu meminta semuanya lewat request tambahan.
7. Render: HTML diubah menjadi DOM (pohon elemen), CSS menjadi CSSOM, keduanya digabung menjadi render tree, lalu browser menghitung posisi dan ukuran (layout), mewarnai piksel (paint), dan menyusun lapisan (composite). JavaScript dijalankan dan bisa mengubah DOM kapan saja.

Peran HTML, CSS, dan JavaScript

Ibarat rumah: HTML adalah struktur (dinding, pintu, ruangan), CSS adalah tampilan (cat, perabot, tata letak), dan JavaScript adalah perilaku (lampu otomatis, bel pintu). Memisahkan ketiganya memudahkan kerja tim dan perawatan. Prinsip progressive enhancement mengajarkan: buat isi inti tetap bisa diakses dengan HTML saja, lalu tambahkan CSS dan JavaScript sebagai lapisan peningkat. Kamu juga harus ingat bahwa kamu tidak pernah tahu pasti browser, ukuran layar, atau kecepatan internet pengunjung, jadi kode web harus ditulis dengan hati-hati.

Contoh kode

Kamu bisa "mengintip" percakapan HTTP dan DNS langsung dari terminal. Perintah di bawah sudah diuji di macOS (di Windows, curl dan nslookup juga tersedia di PowerShell).

# 1. Tanya DNS: berapa IP dari example.com?
nslookup example.com
# → Name:    example.com
# → Address: 172.66.147.243
# → (IP bisa berbeda di tempatmu, satu domain bisa punya beberapa IP)

# 2. Minta header response saja (-I) dari sebuah situs HTTPS
curl -I https://example.com
# → HTTP/2 200
# → content-type: text/html; charset=utf-8

# 3. Coba versi http:// (tanpa S) dari github.com
curl -I http://github.com
# → HTTP/1.1 301 Moved Permanently
# → Location: https://github.com/
# Artinya: server menyuruh browser pindah ke versi HTTPS

Berikut bentuk request dan response HTTP mentah, supaya kamu terbayang isinya:

GET /artikel/git HTTP/1.1
Host: blog.contoh.id
User-Agent: Mozilla/5.0
Accept: text/html

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 128

<!DOCTYPE html>
<html lang="id"><head><title>Belajar Git</title></head>
<body><h1>Belajar Git</h1></body></html>

Kesalahan umum

• Menganggap internet dan web itu sama. Web hanya salah satu layanan di atas internet. Bedanya penting saat nanti belajar WebSocket, email, atau API.
• Panik melihat 404 lalu mengedit kode. Cek dulu path dan nama file, termasuk huruf besar-kecil. Server Linux membedakan Foto.jpg dan foto.jpg.
• Membuka file HTML dengan file:/// lalu heran fetch() gagal. Banyak fitur browser butuh halaman dilayani lewat http://. Pakai server lokal seperti Live Server (modul 4).
• Mengira HTTPS berarti situsnya pasti aman/terpercaya. HTTPS hanya menjamin koneksi terenkripsi, bukan bahwa pemilik situs jujur. Situs penipuan pun bisa pakai HTTPS.
• Mengganti DNS domain lalu langsung panik karena belum berubah. Perubahan DNS butuh waktu menyebar karena hasilnya di-cache (bisa beberapa menit sampai jam).

Latihan

1. Mudah, Uraikan URL https://shop.tokoku.co.id/produk/sepatu?warna=hitam#ulasan menjadi protokol, subdomain, domain, TLD, path, query, dan fragment.
2. Sedang, Jalankan curl -I ke tiga situs favoritmu (pakai https://), catat status code dan nilai header content-type. Lalu coba satu URL yang pasti tidak ada, misalnya https://example.com/halaman-ngasal. Status apa yang kamu dapat?
3. Menantang, Tulis dengan kata-katamu sendiri urutan langkah dari mengetik https://developer.mozilla.org sampai halaman tampil, minimal 7 langkah, dan sebutkan di langkah mana HTTPS membuat perbedaan.

curl -I https://example.com
# → HTTP/2 200
curl -I https://developer.mozilla.org
# → HTTP/2 302   (dialihkan ke /en-US/, wajar)
curl -I https://example.com/halaman-ngasal
# → biasanya 404 (tidak ditemukan)

Ringkasan

• Internet adalah jaringannya, web adalah layanan halaman yang berjalan di atasnya.
• Browser (client) meminta, server melayani; polanya selalu request lalu response.
• DNS menerjemahkan nama domain menjadi IP address.
• HTTPS = HTTP + enkripsi TLS; status code 2xx berhasil, 3xx dialihkan, 4xx salah client, 5xx salah server.
• Browser merender halaman lewat DOM, CSSOM, layout, paint, dan composite.
• HTML untuk struktur, CSS untuk tampilan, JavaScript untuk perilaku.