Form Handling (Pengolahan Form)

Mata Kuliah: Pemrograman Berbasis Web


🧭 1. Pengertian Form Handling

https://images.openai.com/static-rsc-4/d2PiSkLj12E5ZiDzwS5ReBxIxD2_K8xQpOaAK1-oo-GMd51FLSx3Cmdg9HLhhwqNfLaqrYa-VmqLxrfJakrsd8DNwK3XnwouDLirQntiPDIMN-L8Iv9tA0m_zriJaXqAenE2szQ_neUVKQ1XQdTN2UcuRfbOjChANiAhXEkLqnonZZm-NCBZU8qlD05HwukS?purpose=fullsize
https://images.openai.com/static-rsc-4/OnqvN8_IglyRin57DInVQ9f3bCSXGGC33syJzuzSQu1te5u81ds1UAdSPlECzzjbczzgWf1Vs9ZTKef6WncT8mVhUcnTJuR2AhDEQWigCJmQArif_TQiygc35vMttbdm3aQSDtlhNuVb4HhmIKT-9m_Fzd_kuP9fQs9QK5VxpNbx3Ip6mXx3UI6mONlw8AGN?purpose=fullsize
https://images.openai.com/static-rsc-4/rFnqygMvQe1deHloMkjXyCFUDuDfevyZk72v6Ow4Ydw7Cy0tc8qZ0Ou_y_wFtmvU99wot1nRoxkQvuUUe5Z39PCgRO9K3C4JUxNMBH4IhCtSI1mDaWVZ93_h3dUJqno9S8QdsIWOu7OqMj339DoP7KKdxAs6OYMAHQTvSCjS2blhZ9OhJOJkGyAQ8INhb6NU?purpose=fullsize

8

πŸ“– Deskripsi

Form Handling adalah proses menerima, mengirim, dan mengolah data dari pengguna melalui form HTML ke backend (misalnya PHP).

🧠 Narasi

Setiap kali pengguna mengisi formβ€”seperti login, registrasi, atau pencarianβ€”data tersebut dikirim ke server untuk diproses. Proses inilah yang disebut form handling. Tanpa form handling, web tidak bisa menerima input pengguna secara dinamis.


🧩 2. Struktur Dasar Form HTML

https://images.openai.com/static-rsc-4/yw5mM-HsNXQZdq8_XxntcyBAJf8xDOeRVmYbgmOwW5mnl3B6mcbE2xkW5Fk3XU26uQgPccFclnLJZvyjq0XpmGwh4BiyeE2VWullpgX2ntjBV8ewtSK2XSP7Ii1zqMF0rscALlw6lDCk1RF9oikPBZAAFt3Pt63OhM3cClVQ-pWXKboNzKsswaSa9AQiWIV4?purpose=fullsize
https://images.openai.com/static-rsc-4/O4xMeolbZHLztXiCN-83pbaZy4G4BZ5empa2He_bG_7olea6WJcaPu3938Mx27cTabxVhTGZr9xr7B6loGNXcpI9gkvsWY0WujvCA6cPDuPiosXx2HsrRu8dyD3LLooK1f8oDwmkRkWX_izURn8NaylckgipUnEznwlE5olflrLxlnVOaICGcMrKGUTE0KVa?purpose=fullsize
https://images.openai.com/static-rsc-4/cGtu8LkcREGvmCMzDqCSTAZt86w0EWmtsfnISBxLdMC3ZFoGb9sDWGCpvATZfmpkVozhnI-wPHCuGFqt5nZrCo08qKHmbwUjTWGTZQDAErTLuT4fQoOgG6wZt33XIVIzsqa9uvrd7wW6lNskkhOXr3s6f79WVthGwtd6jcWhdPKxblnGqyRg0S3pow7soU4p?purpose=fullsize

8

πŸ“– Deskripsi

Form HTML terdiri dari beberapa elemen utama:

🧱 Tabel Elemen Form

ElemenFungsi
<form>Wadah utama
<input>Input data
<label>Keterangan
<button>Tombol submit

πŸ’» Contoh

<form action="proses.php" method="POST">
Nama: <input type="text" name="nama">
<button type="submit">Kirim</button>
</form>

🧠 Narasi

Form berfungsi sebagai jembatan antara pengguna dan server.


πŸ”„ 3. Metode Pengiriman Data (GET vs POST)

https://images.openai.com/static-rsc-4/rFnqygMvQe1deHloMkjXyCFUDuDfevyZk72v6Ow4Ydw7Cy0tc8qZ0Ou_y_wFtmvU99wot1nRoxkQvuUUe5Z39PCgRO9K3C4JUxNMBH4IhCtSI1mDaWVZ93_h3dUJqno9S8QdsIWOu7OqMj339DoP7KKdxAs6OYMAHQTvSCjS2blhZ9OhJOJkGyAQ8INhb6NU?purpose=fullsize
https://images.openai.com/static-rsc-4/656_CKm-HQ9VNFU7nVvCZX9rq5gAF_3oryetsbzym_0NHu69o1A4wnA0BY6u0Nyj9W2l9FCUaNBysmptHDCtHuD9r1xyH6h6qN63A55cyW9xM6aqSXz61ssHGWuzD4s7iu2Jue85_Sb84nW-6zFfua8uthcKur2-8b-BhZX454w0OhBncxwszDraXC4ziAfD?purpose=fullsize
https://images.openai.com/static-rsc-4/Dg8z9W54ymoDGNCbPR2lvYOMI_2oNz-lkXW6VLsWAjJ2iE0eVjk7Zo0F-eaPABhFh6SGqmY3TD1kwlnQTfPD8Vx80SECYGMfpaQONNa2yRKpveOlzNLU0iyoFiFC1ndzaXwdjGsvs-rQ-JqaIdbBAlTeJ9b4pCdN2QluaqGdLjd5Y6AeSvCsYNgMHzaNlCuz?purpose=fullsize

7

πŸ“– Deskripsi

Data form dapat dikirim menggunakan dua metode:

🧱 Tabel Perbandingan

AspekGETPOST
Lokasi dataURLBody
KeamananRendahLebih aman
KapasitasTerbatasBesar

🧠 Narasi

Gunakan:

  • GET β†’ untuk pencarian
  • POST β†’ untuk data sensitif (login, password)

πŸ“₯ 4. Mengambil Data Form di Backend (PHP)

https://images.openai.com/static-rsc-4/tAXQzS304VO6D0Ow3zppvMutzVLd3Y2mVCW9k6ovkrAVcO01iIhsv1s1qzoy-4gsrn0x2330USFejFzmHaGJZahHO6S_oXvTwaW9AAK4TpxhFVRJq4eeQ-OgYweHpSAu9lGDXhsHgXxn276uJlMtAY1geTEyoom-TRdfdN5xwiYVYmXzrU1IiuDRTVDF2H7U?purpose=fullsize
https://images.openai.com/static-rsc-4/ruBFfcFhg24TKl5jGphmunaY0myWHsxUMQODz9JbMNMw4wGrU03_qlPIIdewqYHUcyuNqvsB9FsGuP7LjK-EmG8-_TQxcr9S3lLWr8j7YOoQW5hdOVKUTcNjpcHn2vDQKg7YeHLs0rCDk8OGnZcvoJn_xLuQJxNT7okLOh_XBekNfqlbOKB5JCquDaYI5WsE?purpose=fullsize
https://images.openai.com/static-rsc-4/kPgh5rLNPqDpz7zswCY0KO6OW89aB8z7XIhb829tvBU4pJVC-4aKIuWCWw9WbAOKZKUHJWe7tddMXggd5e65Jk4SuysleeSg4O_lkAKTSKZq8qjlI1DrsTprtMzF4l51XQ9OGGdNaKTH2LGrYIeHZq1RJAukJx6UJ0UORNEH0H73_rsS7Sqhy8ukotBv6gwS?purpose=fullsize

7

πŸ“– Deskripsi

PHP menggunakan superglobal untuk mengambil data.

πŸ’» Contoh

$nama = $_POST['nama'];
echo $nama;

🧠 Narasi

$_POST dan $_GET adalah variabel khusus untuk menangkap data dari form.


βœ… 5. Validasi Form

https://images.openai.com/static-rsc-4/vZ6OL1dgnwwaHvQW8JTCYLmJGzJl1SDe1cZetuFxJ3xDOjoNO2-GEhcANB0bXgSyA8Ek0kiHhTSXMyLfl11naofKLTZyG33PqN9ln2fqbcGVUbC-81n1End677SJ03E3TY753lHcxLXjJEaG31DLB9dPlf59fZqndbR4C-zAQxKHdDaBHjTOsfNkgz8UeW99?purpose=fullsize
https://images.openai.com/static-rsc-4/qTL2wbYrjKVZ7e3McGI_3GJY6IdIWXkWfhVzUPrFOYamP4NRti5AMKR_7XpBORhGFg3QgQjThHHHb8tJhc79PHZZAYcV83ZyXFzkdkF3eFpwDnmetGvZO1RJa7KiOZ7NK5Ggk-KuLqHmRM4T7YAO3pPSRLzAzyQIh2GLsxqL8suSism_PJovEv7yFJ1Z3ooU?purpose=fullsize
https://images.openai.com/static-rsc-4/u2FjECAcJbFRirZPsw7P2aAZm4L6r_reHbG1Uu6ateDQ4giUTEpOaFdqDUDCTTkZEo9hD1nUDSPPndzpHXGoP8U5Rsb5lQg0Dqsbw6lq08yByvPMsffaFkUfgXNasNRWGkifvqp15vg3mAoYuXDUfy-gbcR0Cg4iFzXkxg847ZlTapjHktmhzM0Zs8-nfKTX?purpose=fullsize

6

πŸ“– Deskripsi

Validasi memastikan data yang dimasukkan benar.

🧱 Jenis Validasi

JenisKeterangan
Client-sideHTML/JavaScript
Server-sidePHP

πŸ’» Contoh

if (empty($_POST['nama'])) {
echo "Nama wajib diisi";
}

🧠 Narasi

Validasi penting untuk menjaga kualitas dan keamanan data.


πŸ” 6. Keamanan Form Handling

https://images.openai.com/static-rsc-4/KhRci0iidJqUDBjA2bN5MjNUipsY3Pl2N-BOukgJ3syZWF72VO4uSLEPw8l1qEry6ztJ9fiQCQpiKtItwNhQx5J8UvUo8hhWcD92pmih9vCscM9TN2zQJi3jEFfYPHTRCSh8gj53qK5FCBRt16Tk0DVhzB76ppWNYDWIEXB30v6aBb6JwHnJbR_k7ggyZFNt?purpose=fullsize
https://images.openai.com/static-rsc-4/DJ5CPriKH4cuIUzv6vgDDsIMmwHNxFoKrPzj8wYIloWv_Z0SXFI6TSF0fxyvx6zM0CXqxhH1lj2Gxiohw8nS70kqo1JT4EfDH1hei99X6z1hzn6NO5iPDnKBml4jtT5nn6FC6u6frX-c-6yhi3hiFSBT2e0WirRHcf3-wTmAqTuKeEdjhq3TSVjp4rD00RLD?purpose=fullsize
https://images.openai.com/static-rsc-4/HuwRUT46lPm_xEYz6QBWYnJx58RqTPbVzYGpS7PSr0WVtK3-Jd_YuMQj_FT2lHb-5tXblT3uPbpu7txqqm6Xu2avCX7efrk4ePN11YmKmCJNxbiiVp8vIIK7BuWjxFKJFcVVWA6S_-BS-VEzRo7-wtX2vLftWfNZpirzBfWgxJEytC6XP7K_zILtrCyOoPO9?purpose=fullsize

7

πŸ“– Deskripsi

Form rentan terhadap serangan.

🧱 Teknik Keamanan

TeknikFungsi
SanitasiMembersihkan input
ValidasiMemastikan data valid
EscapeMencegah XSS

πŸ’» Contoh

$nama = htmlspecialchars($_POST['nama']);

🧠 Narasi

Tanpa keamanan, form bisa menjadi pintu masuk serangan seperti SQL Injection.


πŸ“‚ 7. Form dengan Banyak Input

https://images.openai.com/static-rsc-4/c7EAUlFjGCShd98RshV9C17R1vU0emZb0Uv81pfyO2B0JOL_S5QLFrIb6FG8-3ycQ_EvO_yr6pxO7Ns8HnJRgiMeqB4YHdpAnm0u5atDszCae3qnZu6Vh8W7-cXuZ75AG4rzEkK_3R5bQWQqVeBv2LSyz_LeABNul1C6WcTH4r-Ahe9wSnPKOEp6VDmE2GMn?purpose=fullsize
https://images.openai.com/static-rsc-4/PFm4Xn7ZovptjbJEVysRRnlS3wgEZRvgVZc-TXIEbfaR9ooVHEd3JAI3vfQasYSTZZ9_4ixW36Ei5Y4GruUZnFaD6B8wK0iTlmVw5vjUWm85CsNNnM8rEkkXs9SJZ3rh4yIrJhZgAYCzirxbL1dS8VwPsQxgoNtlSVjZaBLboyL9M7LantFnPzZ-s_GxCDx9?purpose=fullsize
https://images.openai.com/static-rsc-4/ZE_9z_UX_rHt99P1tWd_BMxGvsBMo9UvssDihQ3rn-ZEhHqmp45j7nmCYeo1aFc14l9KXwCASDAjhQkrPRoUtJfB7L1wvXQkwY-PBuQ9FhsVf5iQOr7G2532XOKYoeMeZjhNAHbjlnFRYhcTEqI_V0wcjWSWBMdl1ZHUeFsBEGU4i3GuRFnV1EpP_xtY9S3e?purpose=fullsize

7

πŸ“– Deskripsi

Form dapat memiliki berbagai jenis input.

🧱 Jenis Input

InputFungsi
textTeks
radioPilihan tunggal
checkboxPilihan banyak
selectDropdown

πŸ’» Contoh

<input type="radio" name="jk" value="L"> Laki-laki
<input type="radio" name="jk" value="P"> Perempuan

🧠 Narasi

Berbagai input memungkinkan pengumpulan data yang lebih kompleks.


πŸ“Ž 8. Upload File dengan Form

https://images.openai.com/static-rsc-4/UbPvsf83dxOIkXGQGYnoWFGTImLWwu37mrbltadEPM8raNlfOTiSCnhu8-wYHNw5BcgxZg4689ISJ2FAFQv8VHhQ9eNEBT09SjfBu3DUlaQigmYOkGZe44WxbpNplJeIng13nAQpv-SSwimyyy9w0PB_h_BMNyVYXDT2LyWgsvEnHUM26zwlz6cK9ZNrpzyP?purpose=fullsize
https://images.openai.com/static-rsc-4/IY-_AXOF9nyKpOp4dpVnlNqnIocOe40Tzc9Ad0TgWJ96Z7fsgRvN5-bTwsvKFAHeIWk7HZKsasDFmSyidgCiLODMl-fGC2hX58TWSdQkGtNy5-thdj3mghwyAz9pR6A12SijLigv57S5Wm-JJgllq2CAxcL4Y0mlanABIs1HnL-YBMnLJfmWR9j_5aFGeJnA?purpose=fullsize
https://images.openai.com/static-rsc-4/V2u6DMeedt5kkefuLoovb4JYllkqJZ5U7EXzUSPDV1gKER3GZ4Pgq7KNAGP_j2XdfT4CvLSi2uCNi8C9XrSNofGOZuwVHYgcgXIccL8ivc6ssoXZrahDSv6ZxU2aT8I7CooFPlj9dRkTGx0D4tVuyezFRGT7zD-rkfM7GD87EcU0hc9hsRiAm3ZPoK0eDvlL?purpose=fullsize

7

πŸ“– Deskripsi

Form dapat digunakan untuk upload file.

πŸ’» Contoh

<form method="POST" enctype="multipart/form-data">
<input type="file" name="file">
</form>

🧠 Narasi

enctype="multipart/form-data" wajib digunakan untuk upload file.


πŸ”„ 9. Redirect dan Feedback

https://images.openai.com/static-rsc-4/rFnqygMvQe1deHloMkjXyCFUDuDfevyZk72v6Ow4Ydw7Cy0tc8qZ0Ou_y_wFtmvU99wot1nRoxkQvuUUe5Z39PCgRO9K3C4JUxNMBH4IhCtSI1mDaWVZ93_h3dUJqno9S8QdsIWOu7OqMj339DoP7KKdxAs6OYMAHQTvSCjS2blhZ9OhJOJkGyAQ8INhb6NU?purpose=fullsize
https://images.openai.com/static-rsc-4/fgADbGp2y4gKvXTMZwyUHI30eGxEw2v2JXxDfNEIubxj2MUg6-OpCaBxGea2_LQynWAm7YRNpUqhOC4z3_92AOfXkrIx4CJCe3i-U-8flz0wJqh9A0ZGs9MeZQTPlS0X7Ar1OrQ1MpJGW0tmFijwPTlmoOPf9uym6VHlSZe451EPPJOnoKHlPnzYPfoWL4En?purpose=fullsize
https://images.openai.com/static-rsc-4/04Og-TvzX3o7JJjT2wrrpFXaaCV-dTjh8W_9xhOOM5Z1u4M20UGouT073bL9cUxc4P0lwDng-JEaqxrJ92eZrfEoUsjEMpGtwp1ficpyqD7BWvHXYGPqVUpIudSiIt5ACjmh861l9b0akWW7APWbrBApxFTe_RRUX-EbQ1XZquY7Zt_y84ctiVUEzCJmuwNG?purpose=fullsize

7

πŸ“– Deskripsi

Setelah proses, user perlu feedback.

πŸ’» Contoh

header("Location: sukses.php");

🧠 Narasi

Feedback meningkatkan pengalaman pengguna.


⚠️ 10. Kesalahan Umum

https://images.openai.com/static-rsc-4/964j97oXDIUC-EQM_5K4S-e-piS9AmGVMsNCTaIMdcKHL-ig4mcbD7M3FpGuc7IL0xp-bb40qFwUHecQ3UULdIgJLQldyhwMyGP3npwkgM6DQq9WLplcc_JRMWeWneAduSeLjiwGkp6ek4nf2dvHOkXH3jFeb2oIcZYUBhWnU91WzSEid3L8bAIr50jeLOyp?purpose=fullsize
https://images.openai.com/static-rsc-4/1CtIRnyFSAiXpKOYjBTDhKTcwoAoeUBaNoC3BTPs_dSsE40IEXFyZAMRqHpnLVCczSpm0M9w7j9jlMmPDDXTxaw7xMmXc8ZXnIOTQOu5rIciR0mr24-sYz0_tJKYPsA9Aal-8d-koV0oryw0sa_-8l2nwOgDMFz1CGvBYi2QTAyL0fbO-tiLmKkh_Vdqek39?purpose=fullsize
https://images.openai.com/static-rsc-4/jN7DOUw5kzmF3epR6MJG8_iNA5PiCkrTYDMviDfnZLVfEBgteNwfLzDxRoAHKWNiuRKrhQ9Pn4tRnbzksWbd3yS8pTZvE5VrSdzLJCMGJH52ZV-OnVgtl_ir49sbg4zxw4FzXYQ0xsv3-ltfEMMAD-aTq7Pp085QS0aEMFf30kYHAMw6WCxJ12gKfy0aC20_?purpose=fullsize

8

πŸ“– Deskripsi

Kesalahan yang sering terjadi:

  • Tidak ada atribut name
  • Salah method
  • Tidak validasi

🧠 Narasi

Kesalahan kecil dapat menyebabkan data tidak terkirim.


πŸ§ͺ 11. Studi Kasus Mini Project

🎯 Tugas

Buat sistem:

  • Form registrasi
  • Validasi input
  • Simpan data
  • Tampilkan hasil

🎯 12. Kesimpulan

  • Form adalah dasar interaksi web
  • GET & POST memiliki fungsi berbeda
  • Validasi dan keamanan sangat penting
  • Backend memproses data form

πŸŽ“ Penutup

Materi ini menjadi dasar untuk:
➑️ CRUD PHP + MySQL
➑️ Sistem login
➑️ Web aplikasi dinamis