http-methodgetpostPemula4 mnt baca

GET dan POST: Dua Method yang Paling Sering Dipakai

Perbedaan GET dan POST, kapan memakai masing-masing, dan kenapa POST dipakai untuk data sensitif.

Membaca menu vs memesan makanan

Di restoran ada dua aksi dasar: membaca menu (melihat-lihat, tidak mengubah apa pun) dan memesan (meminta dapur melakukan sesuatu). HTTP membedakan kedua jenis aksi ini lewat method.

Method memberitahu server maksud dari request-mu. Dua yang paling sering dipakai:

  • GET: "tolong ambilkan data ini." Hanya membaca, tidak mengubah apa pun di server.
  • POST: "tolong proses data ini." Biasanya untuk membuat data baru, misalnya daftar akun atau kirim formulir.

Kenapa method harus ada

Tanpa method, server tidak tahu kamu mau apa. Request ke /pengguna bisa berarti "tampilkan daftar pengguna" atau "buatkan pengguna baru". Method menghilangkan ambiguitas: GET /pengguna berarti tampilkan, POST /pengguna berarti buatkan. Satu path, dua maksud yang jelas berbeda.

Contoh 1: GET mengambil data

http
GET /api/produk?kategori=kopi HTTP/1.1
Host: toko.contoh.id

"Ambilkan daftar produk dengan kategori kopi." Datanya diselipkan di URL lewat query string. Response-nya:

http
HTTP/1.1 200 OK
Content-Type: application/json

[{"id": 1, "nama": "Kopi Tubruk", "harga": 15000}]

Ciri khas GET: tidak punya body, semua parameter terlihat di URL, dan aman di-refresh berkali-kali tanpa efek samping.

Contoh 2: POST mengirim data

http
POST /api/pengguna HTTP/1.1
Host: toko.contoh.id
Content-Type: application/json

{"nama": "Omni", "email": "[email protected]"}

"Buatkan pengguna baru dengan data ini." Datanya ditaruh di body request (bagian setelah baris kosong), bukan di URL. Header Content-Type memberitahu server format body-nya: JSON.

http
HTTP/1.1 201 Created
Content-Type: application/json

{"id": 42, "nama": "Omni"}

Status 201 Created artinya "berhasil dibuat", lebih spesifik daripada 200.

Kesalahan umum pemula

Salah: mengirim password lewat GET. GET /login?password=rahasia123 menaruh password di URL: terlihat di address bar, tersimpan di history, tercatat di log server. Yang benar: pakai POST dengan body, dan wajib HTTPS.

Salah: memakai GET untuk aksi yang mengubah data. Contoh: GET /hapus-akun. Mesin pencari atau browser bisa "mengunjungi" URL itu tanpa sengaja dan menghapus akunmu. Yang benar: aksi yang mengubah atau merusak pakai POST atau DELETE.

Salah: mengira POST otomatis lebih aman dari GET. Keduanya sama-sama terbaca jelas kalau tanpa HTTPS. Keamanan datang dari enkripsi (HTTPS), bukan dari method.

Salah: me-refresh halaman hasil POST lalu kaget datanya terkirim dua kali. Browser memang mengirim ulang body saat refresh. Yang benar: pola POST-Redirect-GET, yaitu server menjawab redirect setelah sukses, jadi refresh hanya mengulang GET yang aman.

Latihan insting

Setiap kali melihat form di website, tanya dirimu: "ini GET atau POST?" Form pencarian biasanya GET (hasilnya bisa di-bookmark), form login selalu POST. Kalau tebakanmu selalu benar, method sudah jadi naluri.

Studi kasus: form pencarian vs form transfer bank

Dua form, dua method, dan alasannya fundamental. Form pencarian memakai GET:

html
<form action="/cari" method="GET">
  <input name="q" />
</form>

Hasilnya URL /cari?q=kopi yang bisa di-bookmark, di-share ke teman, dan di-cache browser. Inilah kekuatan GET: request yang aman dan bisa diulang.

Form transfer bank WAJIB POST:

html
<form action="/transfer" method="POST">
  <input name="nominal" />
</form>

Kalau pakai GET, nominal dan nomor rekening tercatat di history browser, log server, dan bisa terpicu ulang oleh refresh atau bot. Lebih parah: browser me-refresh halaman GET secara otomatis dalam situasi tertentu (misalnya tombol back), yang berarti transfer ganda.

Aturan praktisnya: kalau aksi bisa diulang tanpa bahaya (cari, filter, buka halaman), GET. Kalau mengulang berbahaya (bayar, kirim, hapus), POST atau method tulis lainnya. Satu keputusan method yang salah bisa berarti uang hilang.

Catatan teknis: GET bersifat idempotent (dilakukan 1 kali atau 10 kali hasilnya sama: tidak ada perubahan). POST tidak idempotent: dikirim dua kali bisa membuat dua data. Sifat ini penting saat menangani retry dan refresh.

Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

GET satu, POST satu

Pakai playground di atas (atau console):

  1. Lakukan GET ke https://jsonplaceholder.typicode.com/users/1 dan tampilkan name-nya.
  2. Lakukan POST ke https://jsonplaceholder.typicode.com/posts dengan body { title, body, userId } buatanmu sendiri.
  3. Catat perbedaan status code yang dikembalikan kedua request itu. Kenapa POST mengembalikan 201, bukan 200?