Panduan visual untuk Tuan Putri Ratih

Frontend itu etalase.
Backend itu dapurnya.

Website punya dua sisi: satu untuk kamu lihat dan sentuh, satu untuk mengolah data di belakang layar. Kalau tahu perannya, belajar web jadi jauh lebih masuk akal.

Kenali bedanya Coba simulasi
6 menit baca Tanpa istilah rumit Bahasa manusia

01 Jawaban singkat

Dua sisi, satu pengalaman.

Kalau cuma punya 10 detik, ingat dua kalimat di bawah ini. Sisanya cuma memperjelas.

01

Sisi klien · client-side

Frontend

Semua yang bisa kamu lihat dan sentuh di layar.

Tugasnya menampilkan halaman, membuat tombol bisa diklik, dan memastikan tampilan nyaman di HP maupun laptop.

  • Layout
  • Tombol
  • Form
  • Animasi
Berjalan diBrowser kamu
Bahasa umumHTML · CSS · JS
02

Sisi server · server-side

Backend

Semua yang bekerja di belakang layar.

Tugasnya memeriksa data, memproses pesanan, menjaga keamanan, lalu mengirim jawaban ke frontend.

  • Login
  • Pembayaran
  • Stok
  • Keamanan
Berjalan diServer
Bahasa umumNode · Python · PHP

02 Ibarat

Website itu
seperti restoran.

Pelanggan tidak perlu masuk dapur. Ia melihat menu, memesan lewat pelayan, lalu menerima hidangan. Website juga begitu.

01

Menu & meja

Frontend

Yang kamu lihat, pilih, dan sentuh. Tampilannya harus jelas dan nyaman.

02

Pelayan

API

Membawa pesanan ke dapur, lalu membawa jawabannya kembali ke mejamu.

03

Dapur

Backend

Mengolah pesanan, menghitung total, dan menjaga semua aturan tetap jalan.

04

Gudang

Database

Tempat bahan dan catatan disimpan. Dapur mengambil bahan dari sini.

Kalau kamu pesan nasi goreng

Kamu melihat menu, memesan lewat pelayan, koki memasak sambil mengecek bahan di gudang, lalu pelayan membawa hasilnya.

Di website: klik “Beli” → frontend kirim permintaan → backend cek stok & hitung total → database menyimpan pesanan → layar menampilkan “Berhasil!”

Database bukan backend. Database adalah gudangnya; backend adalah yang mengatur akses ke gudang itu.

03 Coba sendiri

Klik sekali.
Lihat dua sisi bekerja.

Ini simulasi sederhana pemesanan kopi. Kiri adalah yang kamu lihat; kanan adalah yang terjadi di belakang layar.

simulasi-pesanan.web Menunggu
Ini hanya simulasi. Tidak ada pesanan sungguhan.
Kopi Senja

Pesan cepat

Buka
Es Kopi Susu 1 × Rp22.000
1
Total Rp22.000
Pesanan diterima!

Nomor #KS-1024 · siap dalam 10 menit.

Coba klik tombol pesan.

Di balik layar

Aktivitas sistem

log
  1. 1
    Frontend Permintaan dimulai

    Tombol ditekan. Browser menyiapkan pesanan.

  2. 2
    API Pesanan diteruskan

    POST /api/pesanan dikirim ke server.

  3. 3
    Backend Stok & total dicek

    Es kopi susu tersedia. Total Rp22.000.

  4. 4
    Database Pesanan disimpan

    Pesanan baru dengan nomor #KS-1024.

  5. 5
    API Balasan dikirim

    Server menjawab: status: berhasil.

  6. 6
    Frontend Hasil ditampilkan

    Layar menampilkan “Pesanan diterima!”.

Siap menerima permintaan

04 Perbandingan

Beda perannya,
bukan siapa yang hebat.

Frontend dan backend adalah satu tim. Yang satu tidak menggantikan yang lain.

Perbandingan frontend dan backend
Yang dibandingkan FrontendEtalase BackendDapur
Berjalan di Browser atau HP pengguna Server milik pembuat website
Fokus utama Tampilan, kenyamanan, dan interaksi Logika, data, dan keamanan
Contoh tugas Mengatur tombol, form, warna, animasi Memeriksa password, stok, pembayaran
Bahasa & tools umum HTML, CSS, JavaScript, React Node.js, Python, PHP, Java, SQL
Yang dirasakan user Halaman terasa cepat, jelas, dan nyaman Data akurat, aman, dan fitur berjalan
Kalau bermasalah Halaman berantakan atau tombol tidak merespons Data gagal dimuat atau fitur error
Ibarat restoran Menu, meja, dan suasana Dapur dan gudang

Cara cepat mengingat: frontend mengurus pengalaman; backend mengurus data & logika. API menyambungkan keduanya.

05 Contoh nyata

Kamu sudah memakainya
tiap hari.

Tiga hal yang mungkin kamu buka hari ini, dan siapa yang mengerjakan apa di belakangnya.

Contoh 01

Login akun

Membuka Instagram, email, atau bank digital.

Di layar

Form email & password, tombol “Masuk”, pesan “Password salah”.

Di belakang

Mencocokkan password, membuat sesi aman, lalu mengambil data akun.

Data akun tersimpan di database.

Contoh 02

Belanja online

Memilih sepatu, masuk keranjang, lalu checkout.

Di layar

Katalog, keranjang, alamat pengiriman, dan tombol “Bayar”.

Di belakang

Cek stok, hitung ongkir & total, lalu proses pembayaran.

Stok dan riwayat pesanan disimpan.

Contoh 03

Feed media sosial

Scroll, menekan like, lalu melihat hati berubah merah.

Di layar

Postingan, animasi like, komentar, dan tombol share.

Di belakang

Memilih konten, menyimpan like, dan mengirim notifikasi.

Postingan dan like tersimpan sebagai data.

06 Sering ditanya

Masih ada yang
mengganjal?

Empat pertanyaan yang paling sering muncul saat pertama kali belajar web.

Apakah frontend cuma soal desain?

Bukan. Frontend juga mengatur interaksi: tombol yang bisa diklik, validasi form, animasi, dan mengambil data dari backend lewat API. Desain adalah bagiannya, tapi bukan satu-satunya.

Apakah backend selalu butuh database?

Hampir selalu, kalau ada data yang perlu diingat: akun, pesanan, stok, atau komentar. Database adalah tempat menyimpannya; backend yang mengatur cara membaca dan menulis data itu.

Baru mulai, belajar yang mana dulu?

Mulai dari HTML, CSS, lalu JavaScript. Setelah nyaman membuat tampilan dan interaksi, lanjut ke backend, API, dan database. Tidak perlu menguasai semuanya sekaligus.

Apa itu full-stack developer?

Orang yang bisa mengerjakan frontend dan backend. Istilahnya terdengar keren, tapi tetap dimulai dari satu langkah kecil: pahami dulu perbedaan perannya, seperti yang baru saja kamu baca.

07 Cek pemahaman

Sudah
nyangkut?

Tiga pertanyaan singkat. Tidak ada nilai rapor — ini cuma cara cepat mengecek apakah intinya sudah kamu pegang.

3 pertanyaan ±1 menit 0 tekanan
Pertanyaan 1 dari 3 0 benar

Pertanyaan 1

Kamu menekan tombol “Suka” dan ikonnya berubah merah. Bagian mana yang langsung mengurus perubahan itu?