Apa Itu Backend dan API? Memahami Cara Kerja Website

1. Apa Itu Frontend?#

Frontend adalah bagian aplikasi yang berinteraksi langsung dengan pengguna.

Ketika membuka website, kita melihat berbagai elemen seperti:

• Judul dan paragraf.
• Gambar dan tombol.
• Menu navigasi.
• Formulir.
• Daftar artikel.
• Notifikasi.

Semua itu merupakan bagian dari antarmuka yang ditampilkan kepada pengguna.

Dalam pengembangan web, frontend biasanya menggunakan tiga teknologi utama.

1
<h1>Selamat Datang di BapakGabut</h1>
2

3
<button type="button">Lihat Artikel</button>

1
button {
2
  background-color: #2563eb;
3
  color: white;
4
  padding: 10px 16px;
5
}

1
const tombol = document.querySelector("button");
2

3
tombol.addEventListener("click", () => {
4
  alert("Halo, Gabuters!");
5
});

2. Apa Itu Backend?#

Backend adalah bagian aplikasi yang menjalankan proses di sisi server atau lingkungan komputasi yang tidak langsung dikendalikan oleh browser pengguna.

Backend biasanya menangani pekerjaan seperti:

• Menerima permintaan dari frontend.
• Memvalidasi data.
• Menjalankan aturan bisnis.
• Mengatur autentikasi dan otorisasi.
• Mengambil atau menyimpan data.
• Berkomunikasi dengan database atau layanan lain.
• Mengirim hasil pemrosesan kepada frontend.

Bayangkan kita mempunyai formulir kontak.

Pengunjung mengisi nama, email, dan pesan.

Frontend bertugas menampilkan formulir serta membantu memeriksa input.

Backend dapat bertugas menerima data, melakukan validasi ulang, menyimpannya, lalu mengirim respons.

Dengan demikian, frontend dan backend mempunyai tanggung jawab yang berbeda.

3. Apa Itu Server?#

Istilah server sering muncul ketika membahas backend.

Secara sederhana, server dapat merujuk pada komputer atau lingkungan yang menyediakan layanan, maupun program yang menerima dan merespons permintaan.

Contohnya, ketika browser meminta sebuah halaman, web server dapat mengirimkan file HTML, CSS, dan JavaScript.

Dalam aplikasi lain, server dapat menjalankan program backend yang menerima data dan menghasilkan respons JSON.

Jadi, server tidak selalu berarti satu komputer fisik besar yang berada di ruang khusus.

Aplikasi server juga bisa berjalan di:

• Laptop pengembang.
• Virtual Private Server (VPS).
• Mesin virtual.
• Container.
• Layanan cloud.

Untuk belajar, kita bahkan bisa menjalankan server di komputer sendiri.

Nantinya, kita akan menggunakan Node.js untuk membuat HTTP server sederhana.

4. Bagaimana Browser Berkomunikasi dengan Server?#

Sekarang kita lihat alur ketika pengguna membuka website.

Secara sederhana, prosesnya seperti ini:

1
Pengguna membuka website
2
           |
3
           v
4
Browser mengirim HTTP request
5
           |
6
           v
7
Server menerima permintaan
8
           |
9
           v
10
Server memproses permintaan
11
           |
12
           v
13
Server mengirim HTTP response
14
           |
15
           v
16
Browser menampilkan hasil

Dua istilah penting dalam proses tersebut adalah request dan response.

1
GET /artikel

1
POST /api/pesan

1
{
2
  "id": 1,
3
  "judul": "Belajar JavaScript",
4
  "kategori": "Programming"
5
}

5. Apa Itu API?#

API adalah singkatan dari Application Programming Interface.

Secara umum, API merupakan antarmuka yang memungkinkan suatu komponen perangkat lunak menggunakan fungsi atau layanan komponen lain melalui aturan yang telah ditentukan.

API tidak selalu berkaitan dengan internet.

Sebagai contoh, JavaScript di browser menyediakan DOM API untuk mengakses elemen HTML.

Namun, dalam seri Backend dan API ini, kita akan lebih banyak membahas Web API, khususnya API yang diakses melalui HTTP.

Bayangkan frontend ingin mengambil daftar artikel dari backend.

Frontend tidak harus mengetahui bagaimana backend menyimpan dan mengolah data.

Frontend cukup mengirim permintaan ke alamat API yang disediakan.

Contohnya:

1
GET /api/artikel

Backend kemudian mengembalikan data yang sesuai.

Dengan pendekatan ini, frontend dan backend dapat dikembangkan sebagai bagian yang saling berkomunikasi melalui antarmuka yang disepakati.

6. Mengenal Endpoint API#

Endpoint adalah titik akses tertentu yang disediakan API untuk menerima permintaan.

Contohnya, sebuah aplikasi artikel mungkin mempunyai endpoint:

1
GET /api/artikel

Untuk mengambil daftar artikel.

1
GET /api/artikel/1

Untuk mengambil detail artikel dengan ID tertentu.

1
POST /api/artikel

Untuk membuat artikel baru.

1
DELETE /api/artikel/1

Untuk meminta penghapusan artikel dengan ID tertentu.

Contoh tersebut menggambarkan rancangan API sederhana.

Endpoint bukan hanya alamat URL.

Kita juga perlu memperhatikan HTTP method yang digunakan.

Request GET dan POST ke path yang sama dapat mempunyai tujuan berbeda.

Nanti kita akan membahas HTTP method lebih lengkap pada artikel berikutnya.

7. Apa Itu JSON?#

Ketika frontend dan backend bertukar data, salah satu format yang sangat umum digunakan adalah JSON.

JSON merupakan singkatan dari JavaScript Object Notation.

Formatnya mudah dibaca dan banyak digunakan oleh berbagai bahasa pemrograman.

Contohnya:

1
{
2
  "nama": "BapakGabut",
3
  "kategori": "Programming",
4
  "jumlahArtikel": 10,
5
  "aktif": true
6
}

JSON terlihat mirip dengan object JavaScript, tetapi keduanya tidak sepenuhnya sama.

Contohnya, JSON mewajibkan nama properti ditulis menggunakan tanda kutip ganda.

JSON juga tidak mendukung function sebagai nilai.

Dalam JavaScript, kita bisa mengubah object menjadi string JSON menggunakan:

1
const artikel = {
2
  judul: "Belajar JavaScript",
3
  kategori: "Programming"
4
};
5

6
const json = JSON.stringify(artikel);
7

8
console.log(json);

Sebaliknya, kita bisa mengubah string JSON yang valid menjadi nilai JavaScript menggunakan:

1
const teksJSON =
2
  '{"judul":"Belajar JavaScript","kategori":"Programming"}';
3

4
const data = JSON.parse(teksJSON);
5

6
console.log(data.judul);

Hasilnya:

1
Belajar JavaScript

Untuk sekarang, cukup pahami bahwa JSON merupakan salah satu format yang sering digunakan untuk pertukaran data antara frontend dan backend.

8. Studi Kasus: Formulir Kontak BapakGabut#

Sekarang kita gunakan contoh yang sudah akrab.

Pada mini project JavaScript sebelumnya, kita membuat formulir kontak.

Pengunjung dapat mengisi:

• Nama.
• Email.
• Pesan.

Kemudian JavaScript melakukan validasi.

Namun, hasilnya hanya ditampilkan di browser.

Mari bayangkan kita ingin mengembangkan formulir tersebut menjadi fitur sungguhan.

1
Nama: Gabuters
2
Email: gabuters@example.com
3
Pesan: Halo, saya ingin bertanya.

1
POST /api/pesan

1
{
2
  "nama": "Gabuters",
3
  "email": "gabuters@example.com",
4
  "pesan": "Halo, saya ingin bertanya."
5
}

1
{
2
  "berhasil": true,
3
  "pesan": "Pesan berhasil diterima."
4
}

1
Pengunjung
2
    |
3
    v
4
Formulir HTML
5
    |
6
    v
7
JavaScript Frontend
8
    |
9
    | HTTP Request
10
    v
11
Backend API
12
    |
13
    | Validasi dan pemrosesan
14
    v
15
HTTP Response
16
    |
17
    v
18
JavaScript Frontend
19
    |
20
    v
21
Notifikasi di halaman

9. Mengapa Validasi Harus Ada di Backend?#

Pertanyaan ini penting.

Jika JavaScript di frontend sudah memeriksa input, mengapa backend harus memeriksanya lagi?

Karena frontend berjalan di lingkungan pengguna.

Pengguna dapat mengubah kode yang dijalankan di browser, menonaktifkan JavaScript tertentu, atau mengirim request langsung menggunakan aplikasi lain.

Karena itu, backend tidak boleh menganggap seluruh data yang diterima pasti valid atau aman.

Misalnya, formulir membatasi pesan maksimal 200 karakter.

Frontend dapat membantu pengguna mematuhi batas tersebut.

Namun, backend tetap perlu memeriksa panjang pesan sebelum memprosesnya.

Selain validasi, backend juga perlu menerapkan aturan otorisasi untuk operasi yang membutuhkan izin.

Contohnya, endpoint penghapusan artikel tidak boleh mengizinkan sembarang pengguna menghapus artikel hanya karena mereka mengetahui alamat endpoint.

Validasi dan otorisasi merupakan dua hal berbeda.

Validasi memeriksa apakah data sesuai aturan.

Otorisasi memeriksa apakah suatu pihak memiliki izin melakukan tindakan tertentu.

Kita akan mengenal praktik dasarnya secara bertahap.

10. Apa Perbedaan Backend dan Database?#

Backend dan database sering disebut bersamaan, tetapi keduanya bukan hal yang sama.

Backend adalah bagian aplikasi yang memproses request dan menjalankan logika aplikasi.

Database adalah sistem untuk menyimpan, mengelola, dan mengambil data.

Misalnya, pengunjung mengirim pesan.

Backend menerima request, memvalidasi isi pesan, kemudian meminta database menyimpannya.

Alurnya dapat digambarkan sebagai berikut:

1
Frontend
2
   |
3
   v
4
Backend API
5
   |
6
   v
7
Database
8
   |
9
   v
10
Backend API
11
   |
12
   v
13
Frontend

Namun, tidak semua backend harus menggunakan database.

Backend sederhana dapat mengembalikan data yang ditulis langsung di dalam program.

Kita juga bisa menyimpan data sementara di memori.

Hanya saja, data yang disimpan di memori biasanya hilang ketika proses server dihentikan atau dimulai ulang.

Karena itu, database menjadi penting ketika aplikasi membutuhkan penyimpanan data yang bertahan lebih lama.

Pada seri ini, kita akan mempelajari backend terlebih dahulu.

Setelah itu, kita akan masuk ke seri Database.

11. Apakah Backend Harus Menggunakan Bahasa Tertentu?#

Tidak.

Backend dapat dibuat menggunakan berbagai bahasa dan runtime.

Contohnya:

• JavaScript dengan Node.js.
• Python.
• PHP.
• Java.
• Go.
• C#.

Masing-masing mempunyai ekosistem, kelebihan, dan pendekatan yang berbeda.

Pada seri ini, kita memilih JavaScript karena sebelumnya sudah mempelajari dasar-dasarnya.

Dengan begitu, kita tidak perlu langsung belajar sintaks bahasa baru.

Namun, ada hal penting yang perlu dipahami.

JavaScript yang berjalan di browser berbeda lingkungannya dengan JavaScript yang berjalan di Node.js.

Browser menyediakan API seperti:

1
document.querySelector()

Sedangkan Node.js menyediakan API untuk kebutuhan server, termasuk membuat HTTP server.

Kita tidak bisa menggunakan document secara langsung dalam program Node.js biasa karena lingkungan Node.js tidak menyediakan DOM browser.

Sebaliknya, Node.js dapat menyediakan kemampuan untuk menjalankan server HTTP menggunakan modul bawaannya.

12. Apa Itu Node.js?#

Node.js adalah runtime JavaScript yang memungkinkan kita menjalankan JavaScript di luar browser.

Salah satu penggunaannya adalah membangun aplikasi backend.

Dengan Node.js, kita dapat membuat program yang:

• Menerima HTTP request.
• Mengirim HTTP response.
• Membaca dan menulis file.
• Menjalankan proses di server.
• Berkomunikasi dengan layanan lain.

Node.js bukan bahasa pemrograman baru.

Bahasa yang digunakan tetap JavaScript.

Yang berbeda adalah lingkungan dan API yang tersedia.

13. Mengenal Konsep Client dan Server#

Sekarang kita rapikan dua istilah yang sering digunakan.

14. Apakah API Sama dengan REST API?#

Tidak sepenuhnya.

API merupakan istilah umum untuk antarmuka komunikasi antarkomponen perangkat lunak.

REST adalah gaya arsitektur untuk sistem terdistribusi yang mempunyai sejumlah prinsip dan batasan.

Istilah REST API biasanya digunakan untuk API HTTP yang dirancang mengikuti prinsip REST.

Dalam praktik sehari-hari, kita sering melihat API HTTP yang menggunakan:

1
GET /api/artikel
2
POST /api/artikel
3
PUT /api/artikel/1
4
DELETE /api/artikel/1

Pola tersebut umum digunakan pada API berbasis resource.

Namun, penggunaan HTTP method dan URL seperti itu saja belum otomatis membuktikan bahwa seluruh batasan REST sudah dipenuhi.

Untuk seri pemula ini, kita akan mempelajari praktik dasar pembuatan API HTTP dengan pendekatan yang umum digunakan pada REST API.

Kita akan membahas konsepnya lebih detail pada artikel berikutnya.

15. Kesalahan Pemahaman yang Sering Terjadi#

16. Latihan Pemahaman#

Sebelum masuk ke materi teknis, coba jawab pertanyaan berikut.

1
POST /api/pesan

17. Penutup#

Pada artikel pertama seri Backend dan API ini, kita sudah memahami beberapa konsep dasar.

Frontend adalah bagian aplikasi yang berinteraksi dengan pengguna.

Backend menangani pemrosesan di sisi server.

Server menyediakan layanan dan merespons permintaan.

API menyediakan antarmuka komunikasi antarkomponen perangkat lunak.

Kita juga memahami bahwa frontend dan backend dapat bertukar data melalui HTTP request dan response, sering kali menggunakan format JSON.

Selain itu, kita mengenal Node.js sebagai runtime untuk menjalankan JavaScript di luar browser.

Pada seri ini, kita akan menggunakan Node.js native terlebih dahulu tanpa Express.

Namun, sebelum membuat server sendiri, ada beberapa konsep yang perlu kita pahami lebih dalam.

Apa perbedaan GET, POST, PUT, dan DELETE?

Apa arti status 200, 404, atau 500?

Bagaimana JSON dikirim melalui HTTP?

Pada artikel berikutnya, kita akan membahas Mengenal HTTP, JSON, dan REST API untuk Pemula.

Sampai jumpa di artikel berikutnya, Gabuters!