Cara Kerja Website

Sebelum mulai coding, penting untuk memahami bagaimana website bekerja. Dengan mental model yang benar, kamu akan lebih mudah memahami kenapa kita perlu HTML, CSS, JavaScript, PHP, dan database.

Analogi Sederhana: Restoran 🍽️

Bayangkan website seperti restoran:

Komponen	Di Restoran	Di Website
Pelanggan	Kamu yang pesan makanan	Browser (Chrome, Firefox)
Pelayan	Mencatat pesanan, antar makanan	HTTP Request/Response
Dapur	Tempat masak makanan	Server (PHP)
Resep	Cara membuat makanan	Kode program
Gudang Bahan	Tempat simpan bahan makanan	Database (MySQL)
Piring & Garnish	Penyajian yang cantik	HTML & CSS

Client dan Server

Website bekerja dengan model Client-Server:

┌─────────────┐         Request          ┌─────────────┐
│             │  ───────────────────────► │             │
│   CLIENT    │                           │   SERVER    │
│  (Browser)  │  ◄─────────────────────── │ (PHP+MySQL) │
│             │         Response          │             │
└─────────────┘                           └─────────────┘
     Kamu                                  Komputer lain

Client (Browser)

Komputer/HP kamu yang menjalankan browser
Mengirim request (permintaan) ke server
Menampilkan response (jawaban) dari server
Menjalankan HTML, CSS, dan JavaScript

Server

Komputer khusus yang menyimpan file website
Menerima request dari banyak client
Menjalankan PHP untuk memproses data
Menyimpan/mengambil data dari database
Mengirim response berupa HTML

HTTP: Bahasa Komunikasi

Client dan server berkomunikasi menggunakan protokol HTTP (Hypertext Transfer Protocol).

HTTP Request

Ketika kamu mengetik http://belajar.test/index.php di browser:

GET /index.php HTTP/1.1
Host: belajar.test
User-Agent: Chrome/120.0
Accept: text/html

Artinya:

GET — "Saya mau mengambil data"
/index.php — "File yang saya minta"
Host — "Dari website ini"

HTTP Response

Server menjawab dengan:

HTTP/1.1 200 OK
Content-Type: text/html

<!DOCTYPE html>
<html>
<body>
    <h1>Halo!</h1>
</body>
</html>

Artinya:

200 OK — "Berhasil, ini datanya"
Content-Type: text/html — "Ini adalah halaman HTML"
Sisanya adalah konten HTML yang akan ditampilkan

HTTP Methods

Ada beberapa jenis request yang bisa dikirim:

Method	Fungsi	Contoh Penggunaan
GET	Mengambil data	Buka halaman, cari data
POST	Mengirim data	Submit form, login
PUT	Update data	Edit profil
DELETE	Hapus data	Hapus postingan

:::tip Analogi

GET = "Lihat menu" (tidak mengubah apapun)
POST = "Pesan makanan" (membuat sesuatu baru)
PUT = "Ganti pesanan" (mengubah yang sudah ada)
DELETE = "Batalkan pesanan" (menghapus) :::

URL: Alamat Website

URL (Uniform Resource Locator) adalah alamat lengkap sebuah halaman:

https://www.contoh.com:443/produk/detail.php?id=123#ulasan
  │       │           │      │         │       │      │
  │       │           │      │         │       │      └── Fragment (bagian halaman)
  │       │           │      │         │       └── Query String (parameter)
  │       │           │      │         └── File yang diminta
  │       │           │      └── Path (folder)
  │       │           └── Port (biasanya tersembunyi)
  │       └── Domain (nama website)
  └── Protocol (http atau https)

Contoh URL di Local Development

Saat belajar, kita akan sering pakai URL seperti:

http://belajar.test/index.php
http://localhost:8000/produk.php?id=5
http://127.0.0.1/form.php

DNS: Buku Telepon Internet

Bagaimana browser tahu komputer mana yang harus dihubungi ketika kamu ketik google.com?

┌─────────────┐      "google.com"       ┌─────────────┐
│   Browser   │ ─────────────────────► │  DNS Server  │
│             │                         │              │
│             │ ◄───────────────────── │              │
└─────────────┘     "142.250.185.46"   └─────────────┘
       │
       │  Sekarang browser tahu
       │  harus ke IP mana
       ▼
┌─────────────┐
│   Server    │
│142.250.185.46│
└─────────────┘

DNS (Domain Name System) mengubah nama domain yang mudah diingat (google.com) menjadi alamat IP (142.250.185.46) yang dimengerti komputer.

:::info Analogi DNS itu seperti buku telepon:

Kamu cari nama: "Google"
Dapat nomor: "142.250.185.46"
Baru bisa telepon :::

Alur Lengkap: Dari Ketik URL sampai Tampil

Mari ikuti perjalanan lengkap saat kamu membuka http://toko.test/produk.php?id=5:

1. Kamu ketik URL di browser
        │
        ▼
2. Browser cari IP dari DNS
        │
        ▼
3. Browser kirim HTTP Request ke server
        │
        ▼
4. Server terima request
        │
        ▼
5. PHP dijalankan:
   - Baca parameter (id=5)
   - Query ke database MySQL
   - Ambil data produk
   - Generate HTML
        │
        ▼
6. Server kirim HTTP Response (HTML)
        │
        ▼
7. Browser terima HTML
        │
        ▼
8. Browser render HTML + CSS
        │
        ▼
9. JavaScript dijalankan (jika ada)
        │
        ▼
10. Halaman tampil di layar! 🎉

Static vs Dynamic Website

Static Website

Hanya HTML, CSS, JavaScript
Konten sama untuk semua pengunjung
Tidak perlu server khusus
Contoh: Landing page, portfolio

Dynamic Website

Menggunakan PHP/Python/Node.js + Database
Konten bisa berbeda tiap pengunjung
Butuh server yang menjalankan kode
Contoh: Toko online, media sosial, aplikasi web

Static Website:
Browser ──► Server ──► Kirim file HTML ──► Browser tampilkan

Dynamic Website:
Browser ──► Server ──► PHP proses ──► Query MySQL ──► Generate HTML ──► Browser tampilkan

Peran Setiap Teknologi

Sekarang kamu bisa memahami kenapa kita perlu belajar semuanya:

Teknologi	Dijalankan di	Fungsi
HTML	Browser (Client)	Struktur konten
CSS	Browser (Client)	Tampilan & styling
JavaScript	Browser (Client)	Interaktivitas
PHP	Server	Logika bisnis, proses data
MySQL	Server	Simpan & kelola data

:::tip Mental Model

Frontend (HTML, CSS, JS) = Yang dilihat & disentuh user
Backend (PHP, MySQL) = Yang bekerja di belakang layar :::

Latihan Pemahaman

Coba jawab pertanyaan ini:

Ketika kamu submit form login, HTTP method apa yang digunakan?
Kenapa password tidak boleh dikirim pakai GET?
Apa yang terjadi jika server mati?
Kenapa website e-commerce butuh database?

Jawaban

POST — karena mengirim data sensitif
Karena GET menampilkan data di URL, bisa dilihat orang lain
Browser akan menampilkan error (seperti "Server tidak dapat dihubungi")
Untuk menyimpan data produk, user, pesanan, dll yang bisa berubah-ubah

Selanjutnya

Sekarang kamu sudah paham cara kerja website! Mari lanjut ke Setup Tools → untuk menyiapkan environment development.

#Cara Kerja Website

#Analogi Sederhana: Restoran 🍽️

#Client dan Server

#Client (Browser)

#Server

#HTTP: Bahasa Komunikasi

#HTTP Request

#HTTP Response

#HTTP Methods

#URL: Alamat Website

#Contoh URL di Local Development

#DNS: Buku Telepon Internet

#Alur Lengkap: Dari Ketik URL sampai Tampil

#Static vs Dynamic Website

#Static Website

#Dynamic Website

#Peran Setiap Teknologi

#Latihan Pemahaman

#Selanjutnya