Frontend dan Backend Adalah: Pengertian, Beda & Contohnya

Setiap kali Anda membuka sebuah website atau aplikasi, sebenarnya ada dua komputer yang bekerja bersamaan. Komputer pertama adalah perangkat di tangan Anda, entah laptop atau ponsel. Komputer kedua adalah server yang letaknya bisa ratusan kilometer jauhnya. Kode yang berjalan di masing-masing komputer itu punya nama sendiri: frontend dan backend.

Secara ringkas, frontend adalah bagian aplikasi yang berjalan di perangkat pengguna, sedangkan backend adalah bagian yang berjalan di server. Pembagian ini terdengar sederhana, tetapi konsekuensinya luas. Ia menentukan bahasa yang dipakai, cara aplikasi diamankan, tempat aplikasi di-hosting, hingga jalur karier seorang developer. Artikel ini membahas semuanya, dimulai dari pengertian masing-masing.

Apa Itu Frontend?

Frontend atau front end adalah seluruh kode yang dikirim ke perangkat pengguna lalu dijalankan di sana. Istilah ini juga sering ditulis front-end. Pada website, kode ini dijalankan oleh browser. Semua yang Anda lihat dan sentuh, dari tata letak, warna, tombol, hingga animasi saat menggulir halaman, adalah hasil kerja frontend.

Tiga bahasa menjadi fondasi frontend web. HTML menyusun struktur dan isi halaman. CSS mengatur tampilan. JavaScript membuat halaman bisa bereaksi, misalnya menampilkan pesan saat kolom email dikosongkan. Pada aplikasi mobile, peran yang sama dipegang bahasa lain seperti Kotlin di Android, Swift di iOS, atau Dart melalui Flutter.

Tugas frontend bisa diringkas menjadi empat hal:

1. Menampilkan data: mengubah data mentah dari server menjadi halaman yang enak dibaca.
2. Menerima interaksi: menangkap klik, ketikan, dan gerakan jari, lalu meneruskannya ke tempat yang tepat.
3. Menyesuaikan layar: memastikan halaman tetap rapi di layar 5 inci maupun monitor 27 inci. Kemampuan ini disebut responsive design (tampilan yang menyesuaikan ukuran layar).
4. Menjaga aksesibilitas: memastikan halaman tetap bisa dipakai pengguna pembaca layar atau pengguna yang hanya memakai keyboard.

Ada satu sifat frontend yang sering dilupakan pemula. Karena kodenya dikirim ke perangkat pengguna, kode itu sepenuhnya berada di tangan pengguna. Siapa pun bisa membukanya lewat menu View Source atau DevTools (panel pengembang bawaan browser), lalu membaca bahkan mengubahnya. Sifat inilah yang nanti menentukan banyak keputusan keamanan.

Apa Itu Backend?

Backend atau back end adalah kode yang berjalan di server dan tidak pernah dikirim ke perangkat pengguna. Pengguna hanya menerima hasil kerjanya, tidak pernah kodenya. Kalau Anda bertanya backend artinya apa dalam bahasa sehari-hari, jawabannya adalah "sisi belakang": bagian yang bekerja di balik layar tanpa pernah terlihat.

Pekerjaan backend umumnya meliputi:

1. Menjalankan logika bisnis: menghitung total belanja, ongkos kirim, potongan harga, dan aturan lain yang tidak boleh diubah pengguna.
2. Mengelola data: menyimpan, mengambil, dan memperbarui data di database.
3. Memeriksa identitas: memastikan pengguna yang meminta data memang berhak melihatnya. Proses ini disebut authentication (autentikasi) dan authorization (otorisasi).
4. Menyediakan pintu masuk: membuka API (Application Programming Interface) supaya frontend web, aplikasi mobile, dan sistem lain bisa meminta data.
5. Berbicara dengan layanan lain: menghubungi payment gateway, mengirim email, atau menjalankan pekerjaan terjadwal di malam hari.

Berbeda dengan frontend yang terbatas di dalam browser, kode backend punya akses penuh ke sistem operasi server. Dokumentasi MDN menyebut kode sisi server bisa ditulis dalam banyak bahasa, antara lain PHP, Python, Ruby, C#, dan JavaScript lewat Node.js.

💡 Kata "backend" punya dua makna yang sering tertukar. Dalam arsitektur aplikasi, backend berarti kode di server. Dalam CMS seperti WordPress, "backend" sering dipakai untuk menyebut panel admin (wp-admin), padahal panel itu sendiri tetap tampil di browser. Istilah front end dan back end sendiri lahir di dunia compiler: bagian depan membaca kode sumber, bagian belakang menghasilkan kode mesin.

Cara Kerja Frontend dan Backend: Menelusuri Satu Klik

Definisi di atas lebih mudah dipahami lewat contoh nyata. Mari kita telusuri apa yang terjadi saat Anda mengisi email dan kata sandi lalu menekan tombol Masuk di sebuah toko online.

1. Frontend memeriksa isian: JavaScript di browser mengecek apakah kolom email berisi tanda @ dan kata sandi tidak kosong. Kalau ada yang salah, pesan langsung muncul tanpa menghubungi server.
2. Frontend mengirim permintaan: isian dibungkus menjadi request HTTP (permintaan lewat protokol web) dan dikirim ke alamat API, misalnya POST /api/login.
3. Backend memeriksa ulang: server menerima permintaan, lalu memvalidasi isinya sekali lagi dari awal.
4. Backend bertanya ke database: server mencari akun dengan email tersebut dan membandingkan hash (sidik unik) kata sandinya.
5. Backend menjawab: server mengirim response (jawaban), biasanya dalam format JSON, berisi status berhasil atau gagal beserta penanda sesi.
6. Frontend menampilkan hasil: browser membaca jawaban itu lalu memindahkan Anda ke halaman akun, atau menampilkan pesan "kata sandi salah".

Seluruh perjalanan ini biasanya selesai dalam hitungan milidetik. Perhatikan bahwa frontend dan backend tidak pernah saling membaca kode. Keduanya hanya bertukar pesan lewat API dengan format yang sudah disepakati. Kesepakatan itulah yang membuat frontend dan backend bisa dikerjakan tim berbeda, bahkan dengan bahasa berbeda.

Perbedaan Frontend dan Backend dalam Satu Tabel

Setelah melihat alurnya, perbedaan front end dan back end bisa kita rangkum dari beberapa sisi berikut.

Baris pertama tabel adalah kunci semua baris lainnya. Pembeda frontend dan backend adalah tempat kode berjalan, bukan bahasanya. Buktinya, JavaScript bisa berada di dua sisi. Di browser ia menjadi frontend, sedangkan di server lewat Node.js ia menjadi backend. Framework seperti NestJS bahkan sepenuhnya dipakai untuk backend.

Kenapa Validasi di Frontend Saja Tidak Cukup

Konsekuensi paling praktis dari tabel di atas menyangkut keamanan. Karena kode frontend berada di tangan pengguna, setiap pemeriksaan yang hanya dilakukan di browser bisa dilewati. Pengguna cukup mematikan JavaScript, mengubah kode lewat DevTools, atau mengirim permintaan langsung ke API tanpa membuka halaman sama sekali.

Contohnya, form pendaftaran membatasi kolom umur minimal 17 lewat JavaScript. Pemeriksaan itu tidak berarti apa pun bagi orang yang mengirim permintaan langsung dengan curl, perkakas baris perintah untuk mengirim request HTTP:

curl -X POST https://contoh-toko.id/api/daftar \
  -H "Content-Type: application/json" \
  -d '{"email":"uji@contoh.id","umur":5}'

Permintaan di atas tidak pernah menyentuh form di browser. Kalau backend tidak memeriksa ulang nilai umur, angka 5 akan tersimpan ke database begitu saja.

OWASP, organisasi nirlaba yang menerbitkan panduan keamanan aplikasi web, menegaskan hal yang sama. Menurut OWASP, validasi input wajib dilakukan di sisi server karena validasi JavaScript di sisi klien bisa dilewati penyerang yang mematikan JavaScript atau memakai web proxy.

Aturan praktisnya bisa Anda pegang seperti ini: frontend memvalidasi demi kenyamanan, backend memvalidasi demi keamanan. Validasi di browser tetap berguna karena pengguna mendapat umpan balik instan. Namun, harga, stok, hak akses, dan semua aturan penting harus diputuskan ulang oleh backend.

Contoh Frontend dan Backend di Aplikasi Sehari-hari

Pembagian ini berlaku hampir di semua aplikasi yang Anda pakai. Tiga contoh berikut memperlihatkan di mana garis pembatasnya.

Toko online. Halaman katalog, foto produk, filter harga, dan keranjang belanja yang bisa digeser adalah frontend. Pengecekan stok, perhitungan ongkos kirim, pemotongan kupon, dan pencatatan pesanan adalah backend. Kupon yang Anda masukkan boleh dicek sekilas di browser, tetapi potongan harganya tetap dihitung server.

Aplikasi mobile banking. Layar saldo, tombol transfer, dan keyboard PIN adalah frontend yang terpasang di ponsel. Saldo sebenarnya, riwayat mutasi, dan proses pemindahan dana tersimpan di backend milik bank. Saat aplikasi menampilkan pesan seperti "backend connection error", artinya frontend di ponsel Anda gagal mendapat jawaban dari server bank. Aplikasinya sendiri berjalan normal, tetapi jembatannya terputus.

Website WordPress. Tema yang Anda lihat sebagai pengunjung adalah frontend: HTML, CSS, dan JavaScript yang dikirim ke browser. Di belakangnya, kode PHP WordPress mengambil artikel dari database MySQL lalu menyusunnya menjadi HTML sebelum dikirim.

Bahasa dan Framework Frontend dan Backend

Pilihan teknologi di masing-masing sisi cukup banyak. Daftar berikut merangkum yang paling sering Anda temui di lowongan kerja maupun proyek di Indonesia.

1. Frontend: bahasa HTML, CSS, JavaScript, dan TypeScript. Framework dan library yang populer antara lain React, Vue, Angular, Bootstrap, dan Tailwind CSS.
2. Backend: bahasa PHP, Python, JavaScript lewat Node.js, Go, dan Java. Framework yang sering dipakai adalah Laravel, Django, Express, NestJS, dan Spring Boot.
3. Data: bahasa kueri SQL dengan database seperti MySQL dan PostgreSQL, ditambah MongoDB atau Redis untuk kebutuhan khusus.

Framework di kedua sisi punya tujuan serupa, yaitu menyediakan kerangka kerja agar developer tidak menulis hal yang sama berulang kali. Bedanya, framework frontend fokus pada komponen tampilan. Framework backend fokus pada routing, akses database, dan autentikasi.

Untuk pemula, urutan belajar yang realistis adalah HTML dan CSS selama 3–4 minggu, lalu JavaScript dasar selama 1–2 bulan. Setelah itu, Anda baru perlu memilih: lanjut ke React atau Vue untuk frontend, atau ke PHP dengan Laravel maupun Node.js untuk backend. Jangan mempelajari dua framework sekaligus di tiga bulan pertama, karena konsep dasarnya justru jadi kabur.

Ketika Batas Frontend dan Backend Mulai Kabur

Pembagian dua sisi di atas adalah model dasarnya. Dalam praktik modern, Anda akan bertemu beberapa pola yang membuat batasnya tidak lagi setegas tabel tadi.

1. Server-side rendering (SSR): halaman frontend disusun terlebih dahulu di server, baru dikirim ke browser dalam bentuk HTML jadi. Tujuannya agar halaman tampil lebih cepat dan mudah dibaca mesin pencari. Framework seperti Next.js dan Nuxt memakai pola ini, sehingga developer frontend ikut menulis kode yang berjalan di server.
2. Backend for Frontend (BFF): satu backend kecil dibuat khusus untuk satu jenis frontend, misalnya satu untuk web dan satu untuk aplikasi mobile. Pola ini diberi nama oleh Phil Calçado di SoundCloud, lalu dipopulerkan lewat tulisan Sam Newman pada 2015. Ciri utamanya, BFF dipelihara oleh tim yang sama dengan tim antarmukanya.
3. Headless CMS: CMS hanya berperan sebagai backend penyedia konten lewat API, sementara tampilannya dibangun terpisah. Pendekatan ini kami bahas di artikel headless WordPress.
4. Backend as a Service dan serverless: layanan seperti Firebase menyediakan database, autentikasi, dan penyimpanan siap pakai. Developer frontend cukup menulis potongan fungsi kecil yang dijalankan lewat serverless computing, tanpa mengelola server sendiri.

Keempat pola ini tidak menghapus pembagian frontend dan backend. Semuanya tetap tunduk pada aturan yang sama: kode yang berjalan di perangkat pengguna tidak bisa dipercaya, dan kode di server yang memegang keputusan akhir.

Di Mana Frontend dan Backend Dijalankan

Perbedaan tempat berjalan juga menentukan tempat hosting-nya. Frontend yang hanya berisi berkas HTML, CSS, JavaScript, dan gambar disebut static files (berkas statis). Berkas seperti ini cukup disajikan oleh web server biasa, lalu bisa dipercepat dengan CDN yang menyimpan salinannya di banyak lokasi.

Backend membutuhkan lebih dari sekadar menyajikan berkas, karena ia harus menjalankan kode. Kebutuhannya bergantung pada bahasa yang dipakai:

• Backend PHP (termasuk Laravel dan WordPress) dijalankan per permintaan oleh web server. Karena itu, aplikasi PHP skala kecil hingga menengah sudah berjalan baik di layanan web hosting berbasis cPanel.
• Backend Node.js, Python, dan Go biasanya berupa proses yang harus terus hidup dan mendengarkan port tertentu. Proses seperti ini lebih cocok dijalankan di VPS Indonesia yang memberi akses root, sehingga Anda bebas memasang runtime dan pengelola proses.

Sebagai patokan, satu aplikasi PHP dengan pengunjung di bawah 10.000 per hari umumnya tidak membutuhkan VPS. Sebaliknya, backend Node.js yang harus melayani koneksi real-time seperti fitur chat hampir selalu membutuhkan server sendiri.

Kelemahan dan Pertimbangan Memisahkan Frontend dan Backend

Memisahkan frontend dan backend menjadi dua aplikasi berbeda memang memberi keleluasaan. Tim bisa bekerja paralel, dan satu backend bisa melayani web sekaligus aplikasi mobile. Namun, pemisahan ini punya harga yang perlu Anda perhitungkan sejak awal.

1. Dua proses deployment: setiap fitur baru bisa menyentuh dua aplikasi yang harus dirilis dengan urutan yang benar.
2. Urusan lintas domain: bila frontend dan backend berada di domain berbeda, browser akan memblokir permintaan sampai backend mengatur CORS dengan benar. Pengelolaan session dan cookie login juga ikut menjadi lebih rumit.
3. Perjalanan data lebih panjang: halaman yang dulu cukup satu kali permintaan kini membutuhkan beberapa panggilan API sebelum tampil lengkap.
4. Kontrak API harus dijaga: mengubah nama satu kolom di backend bisa membuat aplikasi mobile versi lama berhenti bekerja.
5. Risiko SEO: halaman yang seluruh isinya dirender JavaScript di browser lebih lambat terbaca mesin pencari dibanding halaman HTML jadi.

Oleh karena itu, pemisahan penuh bukan keharusan. Bayangkan tim berisi 1–3 orang yang membangun website perusahaan, blog, atau sistem internal sederhana. Bagi mereka, aplikasi monolith (frontend dan backend dalam satu aplikasi) seperti Laravel dengan Blade atau WordPress justru lebih efisien. Pemisahan mulai masuk akal saat Anda harus melayani lebih dari satu jenis frontend, misalnya web dan aplikasi mobile sekaligus.

Frontend Developer, Backend Developer, dan Fullstack

Pembagian kode ini juga melahirkan pembagian peran di dunia kerja. Frontend developer adalah orang yang membangun sisi tampilan: menerjemahkan desain menjadi halaman, mengurus kinerja di browser, dan memastikan tampilan konsisten di berbagai perangkat. Backend developer adalah orang yang merancang API, struktur database, keamanan, dan logika bisnis di server. Di beberapa perusahaan, peran ini disebut backend engineer.

Lalu, fullstack adalah sebutan untuk developer yang menguasai kedua sisi cukup dalam untuk membangun satu fitur dari database sampai tampilan. Peran ini justru yang paling banyak ditemui. Dalam Stack Overflow Developer Survey 2025, 27% responden menyebut diri sebagai full-stack developer. Angka itu disusul back-end developer sebesar 14,2% dan front-end developer sebesar 4,3%.

Kalau Anda masih bingung memilih, gunakan kecenderungan berikut sebagai titik awal:

• Condong ke frontend bila Anda menikmati detail visual, peduli pada pengalaman pengguna, dan senang melihat hasil kerja langsung di layar.
• Condong ke backend bila Anda lebih tertarik pada alur data, struktur database, keamanan, dan cara sebuah sistem tetap stabil saat diakses ribuan orang.

Keduanya bukan pilihan seumur hidup. Banyak developer memulai dari satu sisi selama 1–2 tahun, lalu melebar menjadi fullstack setelah memahami cara kerja sisi seberangnya.

Pertanyaan yang Sering Muncul

Mana yang lebih mudah dipelajari, frontend atau backend?

Frontend biasanya terasa lebih mudah di awal karena hasilnya langsung terlihat di browser. Backend terasa lebih abstrak karena hasilnya berupa data dan respons API. Namun, frontend modern punya tingkat kerumitan sendiri, terutama saat mengelola state dan kinerja aplikasi besar.

Apakah database termasuk backend?

Ya. Database adalah bagian dari sisi backend karena berjalan di server dan diakses lewat kode backend. Frontend tidak boleh terhubung langsung ke database seperti MySQL, sebab kata sandi database akan ikut terkirim ke perangkat pengguna. Layanan seperti Firebase memang bisa diakses dari browser, tetapi aksesnya tetap dijaga aturan keamanan di sisi server.

Apakah HTML dan CSS termasuk backend?

Tidak. HTML dan CSS selalu diproses di browser, jadi keduanya bagian dari frontend. Backend memang sering menghasilkan HTML, misalnya pada PHP atau WordPress, tetapi HTML itu tetap ditampilkan oleh browser.

Apakah JavaScript termasuk frontend atau backend?

Keduanya, tergantung tempat kodenya dijalankan. JavaScript yang berjalan di browser adalah frontend. JavaScript yang berjalan di server lewat Node.js adalah backend. Karena itu, seorang developer bisa menjadi fullstack dengan menguasai satu bahasa saja.

Berapa gaji frontend dan backend developer di Indonesia?

Menurut data Indeed Indonesia per September 2026, rata-rata gaji back end developer adalah Rp 8.762.389 per bulan dari 151 data. Rata-rata front end developer adalah Rp 8.034.611 per bulan dari 78 data. Selisihnya sekitar 9%, dan angka riil sangat bergantung pada pengalaman, kota, dan perusahaan.

Kesimpulan

Frontend adalah kode yang berjalan di perangkat pengguna dan bisa dilihat siapa saja. Backend adalah kode yang berjalan di server dan memegang data serta keputusan penting. Keduanya berkomunikasi lewat API, sehingga bisa dikerjakan dengan bahasa dan tim yang berbeda.

Dari pembagian itu lahir satu aturan yang layak Anda ingat sejak awal belajar: jangan pernah mempercayakan keamanan pada frontend. Untuk proyek kecil, menyatukan keduanya dalam satu aplikasi masih pilihan yang masuk akal. Pemisahan baru sepadan saat satu backend harus melayani beberapa jenis frontend.

Semoga artikel ini membantu.