Setiap kali kamu membuka sebuah situs, sebenarnya kamu sedang melihat hasil kerja dua kelompok kode yang sangat berbeda, berjalan di dua tempat yang sangat berbeda pula. Satu bagian berjalan langsung di perangkatmu sendiri, di dalam browser, dan bisa kamu lihat dengan mata kepala sendiri. Bagian satunya berjalan jauh di sebuah mesin yang tak akan pernah kamu sentuh, dan ia tetap tersembunyi rapat dari pandanganmu. Dua sisi ini biasa orang sebut frontend dan backend.
Banyak pemula mengenal dua kata ini sekadar sebagai nama jabatan atau istilah keren di silabus kursus. Sayang sekali, karena bedanya sebenarnya jauh lebih sederhana sekaligus jauh lebih berguna: intinya soal di mana kode itu berjalan. Begitu kamu bisa membayangkan dua tempat itu dengan jelas, hampir semua hal lain tentang cara kerja web jadi ikut masuk akal. Jadi mari kita lihat dari satu sudut pandang yang sudah ada di depanmu tiap hari — browser.
Apa yang sebenarnya diterima browser
Ketika kamu mengetik alamat lalu menekan Enter, browser mengirim pesan singkat melintasi internet untuk meminta sebuah halaman. Sebuah mesin di suatu tempat menjawabnya, dan yang ia kirim balik sebagian besar hanyalah teks. Tepatnya tiga jenis teks: HTML (isi dan struktur halaman), CSS (tampilan — warna, font, jarak), dan JavaScript (perilaku — apa yang terjadi saat kamu mengeklik, mengetik, atau menggulir layar).
Browser membaca teks itu dan menyulapnya menjadi halaman yang kamu lihat. Inilah poin pentingnya: semua teks tadi sekarang sudah ada di komputermu. Ia dikirim kepadamu, dan browser bebas menampilkannya untukmu. Inilah yang disebut frontend.
Perangkatmu (browser) Sebuah server (entah di mana)
┌────────────────────┐ ┌────────────────────┐
│ "Kirim halaman │ minta → │ │
│ beranda" │ │ menentukan apa │
│ │ ← balasan │ yang dikirim balik │
│ menerima HTML, │ │ │
│ CSS, JavaScript │ │ │
└────────────────────┘ └────────────────────┘
FRONTEND BACKEND
(bisa kamu lihat) (tersembunyi darimu)Mau bukti bahwa frontend memang benar-benar ada di mesinmu? Hampir semua browser di komputer mengizinkan kamu klik kanan di halaman lalu memilih “View Page Source” (Lihat Sumber Halaman), atau membuka Developer Tools. Di situ akan tampil HTML mentah, gaya tampilannya, dan skripnya — bahan-bahan persis yang dipakai browser untuk menyusun apa yang kamu lihat. Tak ada yang menghalangimu membaca tiap barisnya.
Coba sendiri
Klik kanan di halaman ini lalu pilih “View Page Source”. Semua yang muncul di jendela itu adalah frontend — teks yang dikirim ke browsermu dan kini sudah duduk manis di perangkatmu.
Frontend: kode yang berjalan di tempat yang bisa kamu lihat
Frontend adalah segala hal yang terjadi di dalam browser. Tombol yang berubah warna saat kursor lewat di atasnya, menu yang membuka dengan halus, formulir yang memperingatkan “email ini sepertinya keliru” bahkan sebelum kamu menekan kirim — itu semua kode frontend yang sedang bekerja di perangkatmu, saat itu juga.
Karena berjalan di mesinmu, frontend punya dua sifat khas yang sebaiknya kamu pahami sejak awal:
- Ia terlihat. Siapa pun bisa membuka developer tools dan memeriksa HTML, membaca CSS, lalu menelusuri JavaScript-nya. Tidak ada rahasia sungguhan di dalam kode frontend.
- Ia ada di tangan pengunjung. Browser yang menjalankan kode itu milik pengunjung, bukan milik pemilik situs. Pengunjung yang ngotot bisa mengubah halaman secara lokal, memblokir sebuah skrip, atau menyuapinya masukan yang aneh-aneh.
Sifat kedua itu membawa konsekuensi yang sering baru disadari orang setelah kena batunya: kamu tidak pernah bisa sepenuhnya percaya pada apa pun yang dikatakan frontend, karena yang mengendalikannya adalah pengunjung. Harga yang muncul di halaman, penanda “kamu adalah admin”, pengecekan yang bilang sebuah formulir sudah valid — semuanya bisa diutak-atik dari sisi pengunjung. Berguna untuk membuat pengalaman terasa mulus, iya. Bisa dipercaya sebagai keputusan akhir, tidak.
Kalau kamu ingin perkenalan yang santai soal tiga bahasa frontend dan bagaimana ketiganya saling melengkapi, kategori frontend di blog ini mengupas HTML, CSS, dan JavaScript satu per satu.
Backend: kode yang berjalan di tempat yang tak bisa kamu lihat
Sekarang giliran tempat satunya. Backend adalah kode yang berjalan di server — mesin yang menerima permintaanmu tadi dan memutuskan apa yang harus dikirim balik. Kode ini tak pernah kamu lihat. Ia tidak dikirim ke browsermu; ia tetap tinggal di server, melakukan tugasnya, dan hanya hasilnya yang berjalan balik ke kamu.
Coba bayangkan saat masuk ke sebuah akun. Kamu mengetik nama pengguna dan kata sandi, browser mengirimnya, dan sesaat kemudian kamu entah berhasil masuk atau tidak. Semua yang terjadi di momen itu — mencocokkan kata sandi dengan data yang tersimpan, menentukan apakah kamu boleh masuk, mengambil datamu — terjadi di backend, jauh dari pandangan. Yang diterima browsermu hanyalah keputusan akhirnya.
Backend umumnya jadi tempat tinggal hal-hal yang wajib bisa dipercaya:
- Basis data asli berisi pengguna, pesanan, pesan, dan sebagainya.
- Aturan yang menentukan siapa boleh melakukan apa.
- Kunci rahasia dan kata sandi untuk berkomunikasi dengan layanan lain.
- Keputusan final atas setiap hal penting.
Kenapa semua itu disimpan di server? Karena server adalah tempat yang kamu kendalikan sebagai pemilik situs, dan pengunjung tidak. Berbeda dengan frontend, kode backend tidak pernah diserahkan ke pengunjung, jadi mereka tidak bisa membacanya apalagi menulis ulang. Justru itulah alasan pekerjaan yang sensitif ditaruh di sana.
Jebakan yang sering kena pemula
Jangan pernah menaruh rahasia — kunci API, kata sandi, aturan privat — di kode frontend. Karena frontend dikirim ke browser setiap pengunjung, “disembunyikan” di dalam JavaScript frontend itu sama sekali tidak tersembunyi. Rahasia tempatnya di backend.
Mengintip keduanya saling bicara
Frontend dan backend tidak hidup sendiri-sendiri; keduanya berdialog. Frontend mengirim permintaan (“kirim halaman beranda”, “simpan komentar ini”, “nama pengguna ini sudah dipakai belum?”) dan backend membalas dengan respons (“ini halamannya”, “tersimpan”, “ya, sudah dipakai”). Bolak-balik inilah yang jadi denyut nadi hampir setiap situs.
Dialog ini bisa benar-benar kamu saksikan. Buka Developer Tools di browser, cari tab Network (Jaringan), lalu muat ulang halaman. Akan muncul daftar setiap permintaan yang dikirim browser dan setiap respons yang ia terima. Ini salah satu jendela paling jernih untuk melihat hubungan frontend dan backend.
Frontend Backend
(browser) (server)
klik "Kirim komentar" ─── permintaan ──▶ cek kamu boleh atau tidak
simpan komentarnya
tampilkan "Terkirim!" ◀─── respons ──── balas "oke"Perhatikan bagaimana tugasnya terbagi. Frontend mengurus apa yang dilihat dan dilakukan pengguna. Backend mengurus apa yang harus disimpan dan dipercaya. Frontend bertanya; backend memutuskan. Tak ada yang lebih penting dari yang lain — sebuah situs butuh keduanya, sebagaimana restoran butuh ruang makan sekaligus dapur.
Perbandingan ringkas berdampingan
Berikut keseluruhan idenya, diringkas dalam tabel yang gampang kamu simpan di kepala:
| Pertanyaan | Frontend | Backend |
|---|---|---|
| Di mana ia berjalan? | Di browser pengunjung, di perangkat mereka | Di server yang kamu kendalikan |
| Bisakah pengguna melihat kodenya? | Bisa — lihat sumber, dev tools | Tidak — ia tak pernah keluar dari server |
| Bahasa utama | HTML, CSS, JavaScript | Banyak: misal JavaScript, Python, PHP, Java, Go, Ruby |
| Tanggung jawab utama | Apa yang kamu lihat dan klik | Apa yang disimpan dan diputuskan |
| Bisa dipercaya sebagai kata akhir? | Tidak — pengunjung yang mengendalikan | Ya — pemilik yang mengendalikan |
| Siapa pemilik mesinnya? | Pengunjung | Pemilik situs |
Ada catatan kecil tapi penting. Tabel itu menarik garis yang rapi, dan sebagian besar waktu garisnya memang serapi itu. Tapi web makin lama makin pintar. Sebagian sistem modern juga menjalankan JavaScript di server, dan sebagian halaman sudah dirakit sebagian di server sebelum dikirim ke browsermu. Jangan sampai itu bikin bingung. Pertanyaan dasarnya tidak pernah berubah: untuk potongan kode yang ini, di mana ia sebenarnya berjalan, dan bisakah pengunjung melihatnya? Jawab itu, dan kamu selalu tahu ia ada di sisi garis yang mana.
Dapur dan ruang makan
Kalau semua istilah teknis mulai bikin pusing, kembalilah ke gambaran ini. Sebuah restoran punya ruang makan — bagian yang dimasuki tamu, lengkap dengan menu, pencahayaan, dan meja-mejanya. Itulah frontend: bagian yang dilihat, disentuh, dan dipakai berinteraksi oleh orang, dan dibuat supaya terasa nyaman.
Restoran juga punya dapur — di balik pintu, terlarang bagi tamu. Di situlah bahan-bahan disimpan, resep dijaga, dan masakan benar-benar dimasak. Itulah backend. Tamu tak pernah melihatnya, dan itu memang disengaja: kamu tentu tidak mau orang asing nyelonong masuk dan mengobrak-abrik persediaan.
Tamu memesan dari ruang makan (sebuah permintaan), pesanan berjalan ke dapur, dapur mengerjakan bagian yang sesungguhnya, lalu sepiring hidangan jadi keluar (sebuah respons). Tamu menikmati makanannya tanpa perlu tahu cara dapur bekerja. Sebuah situs berjalan persis dengan cara yang sama.
Rangkuman
Pembagian antara frontend dan backend terlihat rumit sampai kamu memerasnya jadi satu pertanyaan saja: di mana kode itu berjalan?
- Frontend berjalan di browser pengunjung, di perangkat mereka. Ia adalah HTML, CSS, dan JavaScript yang menyusun apa yang kamu lihat — dan karena tinggal di mesin pengunjung, siapa pun bisa memeriksanya dan tak ada yang benar-benar rahasia di dalamnya.
- Backend berjalan di server yang kamu kendalikan. Ia tersembunyi dari pengunjung, dan justru itulah sebabnya pekerjaan yang harus dipercaya — data asli, aturan, rahasia — ditaruh di sana.
- Keduanya bicara tanpa henti: frontend mengirim permintaan, backend membalas dengan respons. Setiap potong dialog itu bisa kamu intip di tab Network browsermu.
Bagian terbaiknya, kamu sudah punya laboratorium yang sempurna untuk ini tepat di depan mata. Buka developer tools di situs mana pun, intip sumber halamannya, dan amati permintaan jaringan berseliweran. Dari sini, langkah lanjutan yang wajar adalah membiasakan diri dengan tiga bahasa frontend itu sendiri — apa peran HTML, CSS, dan JavaScript masing-masing — lalu mengintip bagaimana sebuah permintaan menemukan jalannya melintasi internet menuju server. Tiap topik itu jadi lebih ringan sekarang, setelah kamu tahu di mana kode itu berjalan.
