formgetpostmethodMenengah3 mnt baca

GET vs POST Mendalam

Bedah tuntas perbedaan GET dan POST: ke mana data pergi, kapan memakai yang mana, dan contoh nyata form pencarian vs login.

Masalahnya: Data Pergi ke Mana?

Setiap form mengirim data ke server, tapi caranya ada dua dan akibatnya sangat berbeda. Pilih yang salah, dan kata sandi bisa nongol di URL, tersimpan di riwayat browser, lalu ikut terkirim saat link dibagikan. Memahami GET vs POST bukan teori kosong: ini keputusan keamanan dan kegunaan yang kamu buat di setiap form.

Perbedaan Fundamental

Perbedaan intinya cuma satu: di mana data ditaruh.

GET: data ditempel di URL sebagai query string, setelah tanda tanya. Contoh: /cari?q=kopi+susu&kota=bandung.
POST: data dikirim di dalam body request, tidak terlihat di URL.

html

<!-- GET: datanya terlihat di address bar -->
<form action="/cari" method="get">
  <input type="search" name="q" placeholder="Cari menu..." />
  <button type="submit">Cari</button>
</form>

<!-- POST: datanya disembunyikan dari URL -->
<form action="/login" method="post">
  <input type="email" name="email" placeholder="Email" />
  <input type="password" name="password" placeholder="Kata sandi" />
  <button type="submit">Masuk</button>
</form>

Setelah submit form GET, address bar berubah menjadi /cari?q=kopi+susu. Setelah submit form POST, URL tetap /login, bersih.

Kapan Pakai Apa: Aturan Keputusan

Jangan hafalkan daftar, pahami logikanya lewat tiga pertanyaan:

1. Apakah datanya sensitif? Kata sandi, token, data pribadi: selalu POST. URL tersimpan di riwayat browser, log server, dan bisa bocor saat link dibagikan. POST bukan enkripsi (tetap butuh HTTPS), tapi setidaknya data tidak terpampang di address bar.

2. Apakah aksinya mengubah sesuatu? Mendaftar, membeli, menghapus, mengirim pesan: POST. Mengambil atau mencari data tanpa mengubah apa-apa: GET boleh.

3. Apakah hasilnya perlu dibagikan atau di-bookmark? Hasil pencarian, filter katalog, halaman dengan parameter tampilan: GET, karena URL-nya bisa disalin dan dibuka lagi dengan hasil yang sama. Coba bayangkan hasil pencarian Google yang tidak bisa dibagikan: menyebalkan, kan? Itu karena Google memakai GET.

Contoh nyata sepasang:

html

<!-- Pencarian: GET, karena hasilnya layak di-bookmark dan dibagikan -->
<form action="/katalog" method="get">
  <input type="search" name="q" />
  <select name="kategori">
    <option value="minuman">Minuman</option>
    <option value="makanan">Makanan</option>
  </select>
  <button type="submit">Cari</button>
</form>
<!-- menghasilkan: /katalog?q=kopi&kategori=minuman -->

<!-- Login: POST, karena kredensial tidak boleh muncul di URL -->
<form action="/masuk" method="post">
  <label>Email: <input type="email" name="email" required /></label>
  <label>Kata sandi: <input type="password" name="password" required /></label>
  <button type="submit">Masuk</button>
</form>

Batasan yang Jarang Disadari

GET punya batas panjang URL (umumnya sekitar 2000 karakter, tergantung browser dan server). Form dengan textarea panjang atau banyak field bisa terpotong diam-diam kalau dipaksa lewat GET. POST praktis tidak punya batas ini.

Satu lagi: me-refresh halaman hasil POST memunculkan peringatan "kirim ulang data?" karena browser tidak mau menggandakan aksi (misalnya membayar dua kali). Me-refresh hasil GET aman saja, karena GET diasumsikan tidak mengubah apa-apa.

Kesalahan Umum: Salah vs Benar

html

<!-- SALAH: form login pakai GET, kata sandi muncul di URL -->
<form action="/masuk" method="get">
  <input type="email" name="email" />
  <input type="password" name="password" />
  <button type="submit">Masuk</button>
</form>
<!-- URL hasil: /[email protected]&password=rahasia123 -->

<!-- BENAR: login selalu POST -->
<form action="/masuk" method="post">
  <input type="email" name="email" />
  <input type="password" name="password" />
  <button type="submit">Masuk</button>
</form>

Kesalahan sebaliknya juga ada: form pencarian pakai POST sehingga hasilnya tidak bisa dibagikan atau di-bookmark. Dan satu jebakan: upload file wajib POST plus enctype="multipart/form-data", karena data biner tidak bisa ditempel di URL.

Catatan teknis: Tanpa atribut method, browser memakai GET. Jadi form tanpa method yang berisi data sensitif diam-diam membocorkannya lewat URL: selalu tulis method eksplisit. Nilai valid hanya get dan post (huruf kecil); sisanya diabaikan dan kembali ke GET.

Rangkuman

GET menaruh data di URL: cocok untuk pencarian dan filter yang hasilnya layak dibagikan. POST menyembunyikan data di body request: wajib untuk login, pendaftaran, dan semua aksi yang mengubah data. Tiga pertanyaan penentunya: sensitif? mengubah sesuatu? perlu dibagikan?

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Pilih Method yang Tepat

Playground berisi dua form dengan method tertukar: form pencarian pakai POST dan form login pakai GET. Perbaiki keduanya dengan method yang benar. Salah pilih method bisa membocorkan kata sandi lewat URL atau membuat hasil pencarian tidak bisa dibagikan, jadi keputusan kecil ini berdampak besar.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Method Tertukar</title>
</head>
<body>
  <h2>Cari Artikel</h2>
  <form action="/cari" method="post">
    <input type="search" name="q" />
    <button type="submit">Cari</button>
  </form>
  <h2>Masuk</h2>
  <form action="/masuk" method="get">
    <input type="email" name="email" />
    <input type="password" name="password" />
    <button type="submit">Masuk</button>
  </form>
</body>
</html>

Open Sandbox