Setelah data formulir divalidasi di sisi klien, Anda boleh mengirimkan formulir. Dan, karena kami membahas validasi di artikel sebelumnya, kami siap mengirimkannya. Artikel ini membahas apa yang terjadi saat pengguna mengirimkan formulir — ke mana data pergi, dan bagaimana kami menanganinya saat sampai di sana?
Prasyarat. Literasi komputer dasar, pemahaman tentang HTML, dan pengetahuan dasar tentang HTTP dan pemrograman sisi server. Objektif. Untuk memahami apa yang terjadi saat data formulir dikirimkan, termasuk mendapatkan ide dasar tentang bagaimana data diproses di serverPertama, kita akan membahas apa yang terjadi pada data saat formulir dikirimkan
Pada dasarnya, web menggunakan arsitektur klien/server yang dapat diringkas sebagai berikut. klien [biasanya browser web] mengirimkan permintaan ke server [sebagian besar waktu server web seperti Apache, Nginx, IIS, Tomcat, dll. ], menggunakan protokol HTTP. Server menjawab permintaan menggunakan protokol yang sama
Formulir HTML pada halaman web tidak lebih dari cara mudah yang ramah pengguna untuk mengonfigurasi permintaan HTTP untuk mengirim data ke server. Hal ini memungkinkan pengguna untuk memberikan informasi yang akan disampaikan dalam permintaan HTTP
Catatan. Untuk mendapatkan gambaran yang lebih baik tentang cara kerja arsitektur klien-server, baca modul langkah pertama pemrograman situs web sisi server kami
Elemen
…
0 menentukan bagaimana data akan dikirim. Semua atributnya dirancang untuk memungkinkan Anda mengonfigurasi permintaan yang akan dikirim saat pengguna menekan tombol kirim. Dua atribut terpenting adalah danAtribut menentukan kemana data akan dikirim. Nilainya harus berupa URL relatif atau absolut yang valid. Jika atribut ini tidak tersedia, data akan dikirim ke URL halaman yang berisi formulir — halaman saat ini
Dalam contoh ini, data dikirim ke URL absolut —
…
4…
Di sini, kami menggunakan URL relatif — data dikirim ke URL berbeda dengan asal yang sama
…
Ketika ditentukan tanpa atribut, seperti di bawah ini, data
…
0 dikirim ke halaman yang sama dengan formulir yang ada…
Catatan. Dimungkinkan untuk menentukan URL yang menggunakan protokol HTTPS [HTTP aman]. Saat Anda melakukan ini, data dienkripsi bersama dengan permintaan lainnya, meskipun formulir itu sendiri dihosting di halaman tidak aman yang diakses menggunakan HTTP. Di sisi lain, jika formulir dihosting di halaman aman tetapi Anda menentukan URL HTTP tidak aman dengan atribut tersebut, semua browser menampilkan peringatan keamanan kepada pengguna setiap kali mereka mencoba mengirim data karena data tidak akan dienkripsi
Nama dan nilai kontrol formulir non-file dikirim ke server sebagai
…
7 pasangan yang digabungkan dengan ampersand. Nilai …
1 harus berupa file di server yang dapat menangani data yang masuk, termasuk memastikan validasi sisi server. Server kemudian merespons, umumnya menangani data dan memuat URL yang ditentukan oleh atribut …
1, menyebabkan pemuatan halaman baru [atau penyegaran halaman yang ada, jika …
1 menunjuk ke halaman yang sama]Bagaimana data dikirim tergantung pada atribut
…
2Atribut menentukan bagaimana data dikirim. Protokol HTTP menyediakan beberapa cara untuk melakukan permintaan;
Untuk memahami perbedaan antara kedua metode tersebut, mari kita mundur dan mempelajari cara kerja HTTP. Setiap kali Anda ingin menjangkau sumber daya di Web, browser mengirimkan permintaan ke URL. Permintaan HTTP terdiri dari dua bagian. header yang berisi sekumpulan metadata global tentang kemampuan browser, dan badan yang dapat berisi informasi yang diperlukan server untuk memproses permintaan khusus
Metode GET
Metode
…
_3 adalah metode yang digunakan oleh browser untuk meminta server mengirimkan kembali sumber daya yang diberikan. "Hai server, saya ingin mendapatkan sumber daya ini. " Dalam hal ini, browser mengirimkan badan kosong. Karena isi kosong, jika formulir dikirim menggunakan metode ini, data yang dikirim ke server ditambahkan ke URLPertimbangkan bentuk berikut
What greeting do you want to say?
Who do you want to say it to?
Send my greetings
Karena metode
…
_3 telah digunakan, Anda akan melihat URL …
7 muncul di bilah alamat browser saat Anda mengirimkan formulirData ditambahkan ke URL sebagai serangkaian pasangan nama/nilai. Setelah alamat web URL berakhir, kami menyertakan tanda tanya [
…
8] diikuti dengan pasangan nama/nilai, masing-masing dipisahkan dengan ampersand […
9]. Dalam hal ini, kami mengirimkan dua bagian data ke server
0, yang memiliki nilaiWhat greeting do you want to say? Who do you want to say it to? Send my greetings
1What greeting do you want to say? Who do you want to say it to? Send my greetings
_2, yang memiliki nilaiWhat greeting do you want to say? Who do you want to say it to? Send my greetings
3What greeting do you want to say? Who do you want to say it to? Send my greetings
Permintaan HTTP terlihat seperti ini
GET /?say=Hi&to=Mom HTTP/2.0
Host: foo.com
Catatan. Anda dapat menemukan contoh ini di GitHub — lihat get-method. html [lihat juga langsung]
Metode POST
Metode
…
_4 sedikit berbeda. Ini adalah metode yang digunakan browser untuk berbicara dengan server saat meminta respons yang mempertimbangkan data yang diberikan dalam isi permintaan HTTP. "Hai server, lihat data ini dan kirimkan saya kembali hasil yang sesuai. " Jika formulir dikirim menggunakan metode ini, data ditambahkan ke badan permintaan HTTPMari kita lihat sebuah contoh — ini adalah bentuk yang sama seperti yang kita lihat di bagian
…
3 di atas, tetapi dengan atribut yang disetel ke …
4
What greeting do you want to say?
Who do you want to say it to?
Send my greetings
Saat formulir dikirimkan menggunakan metode
…
_4, Anda tidak mendapatkan data yang ditambahkan ke URL, dan permintaan HTTP terlihat seperti itu, dengan data disertakan dalam badan permintaan sebagai gantinyaPOST / HTTP/2.0
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13
say=Hi&to=Mom
Header
What greeting do you want to say?
Who do you want to say it to?
Send my greetings
_9 menunjukkan ukuran tubuh, dan header GET /?say=Hi&to=Mom HTTP/2.0
Host: foo.com
0 menunjukkan jenis sumber daya yang dikirim ke server. Kita akan membahas header ini nantiCatatan. Anda dapat menemukan contoh ini di GitHub — lihat post-method. html [lihat juga langsung]
Permintaan HTTP tidak pernah ditampilkan kepada pengguna [jika Anda ingin melihatnya, Anda perlu menggunakan alat seperti Firefox Network Monitor atau Chrome Developer Tools]. Sebagai contoh, data formulir Anda akan ditampilkan sebagai berikut di tab Jaringan Chrome. Setelah menyerahkan formulir
- Buka alat pengembang
- Pilih jaringan"
- Pilih Semua"
- Pilih "foo. com" di tab "Nama".
- Pilih "Header"
Anda kemudian bisa mendapatkan data formulir, seperti yang ditunjukkan pada gambar di bawah ini
Satu-satunya hal yang ditampilkan kepada pengguna adalah URL yang dipanggil. Seperti yang kami sebutkan di atas, dengan permintaan
…
_3 pengguna akan melihat data di bilah URL mereka, tetapi dengan permintaan …
4 mereka tidak akan. Ini bisa menjadi sangat penting karena dua alasan- Jika Anda perlu mengirim kata sandi [atau data sensitif lainnya], jangan pernah menggunakan metode
3 atau Anda berisiko menampilkannya di bilah URL, yang akan sangat tidak aman…
- Jika Anda perlu mengirim data dalam jumlah besar, metode
4 lebih disukai karena beberapa browser membatasi ukuran URL. Selain itu, banyak server membatasi panjang URL yang mereka terima…
Apapun metode HTTP yang Anda pilih, server menerima string yang akan diuraikan untuk mendapatkan data sebagai daftar pasangan kunci/nilai. Cara Anda mengakses daftar ini bergantung pada platform pengembangan yang Anda gunakan dan kerangka kerja khusus apa pun yang mungkin Anda gunakan dengannya
PHP menawarkan beberapa objek global untuk mengakses data. Dengan asumsi Anda telah menggunakan metode
…
_4, contoh berikut hanya mengambil data dan menampilkannya kepada pengguna. Tentu saja, apa yang Anda lakukan dengan data itu terserah Anda. Anda dapat menampilkannya, menyimpannya dalam database, mengirimkannya melalui email, atau memprosesnya dengan cara lain
Contoh ini menampilkan halaman dengan data yang kami kirim. Anda dapat melihat ini beraksi di contoh php-contoh kami. html — yang berisi contoh formulir yang sama seperti yang kita lihat sebelumnya, dengan
…
2 dari …
4 dan …
1 dari GET /?say=Hi&to=Mom HTTP/2.0
Host: foo.com
9. Saat dikirimkan, ia mengirimkan data formulir ke php-example. php, yang berisi kode PHP yang terlihat pada blok di atas. Saat kode ini dieksekusi, output di browser adalah
What greeting do you want to say?
Who do you want to say it to?
Send my greetings
0Catatan. Contoh ini tidak akan berfungsi saat Anda memuatnya ke browser secara lokal — browser tidak dapat menginterpretasikan kode PHP, jadi saat formulir dikirimkan, browser hanya akan menawarkan untuk mendownload file PHP untuk Anda. Agar berfungsi, Anda perlu menjalankan contoh melalui semacam server PHP. Pilihan bagus untuk pengujian PHP lokal adalah MAMP [Mac dan Windows] dan AMPPS [Mac, Windows, Linux]
Perhatikan juga bahwa jika Anda menggunakan MAMP tetapi tidak menginstal MAMP Pro [atau jika uji coba waktu demo MAMP Pro telah kedaluwarsa], Anda mungkin kesulitan membuatnya berfungsi. Agar berfungsi kembali, kami menemukan bahwa Anda dapat memuat aplikasi MAMP, lalu pilih opsi menu MAMP > Preferensi > PHP, dan atur "Versi Standar. " sampai "7. 2. x" [x akan berbeda tergantung pada versi apa yang telah Anda instal]
Contoh ini menunjukkan bagaimana Anda akan menggunakan Python untuk melakukan hal yang sama — menampilkan data yang dikirimkan pada halaman web. Ini menggunakan kerangka kerja Flask untuk merender template, menangani pengiriman data formulir, dll. [lihat python-contoh. py]
from flask import Flask, render_template, request
app = Flask[__name__]
@app.route['/', methods=['GET', 'POST']]
def form[]:
return render_template['form.html']
@app.route['/hello', methods=['GET', 'POST']]
def hello[]:
return render_template['greeting.html', say=request.form['say'], to=request.form['to']]
if __name__ == "__main__":
app.run[]
Dua templat yang dirujuk dalam kode di atas adalah sebagai berikut [ini harus berada di subdirektori yang disebut
What greeting do you want to say?
Who do you want to say it to?
Send my greetings
1 di direktori yang sama dengan file
What greeting do you want to say?
Who do you want to say it to?
Send my greetings
2, jika Anda mencoba menjalankan contoh sendiri]- membentuk. html. Bentuk yang sama seperti yang kita lihat di bagian atas tetapi dengan
1 diatur ke…
4. Ini adalah template Jinja, yang pada dasarnya adalah HTML tetapi dapat berisi panggilan ke kode Python yang menjalankan server web yang terdapat dalam kurung kurawal.What greeting do you want to say? Who do you want to say it to? Send my greetings
_5 pada dasarnya mengatakan "alihkan keWhat greeting do you want to say? Who do you want to say it to? Send my greetings
6 saat formulir dikirimkan"What greeting do you want to say? Who do you want to say it to? Send my greetings
- salam. html. Templat ini hanya berisi baris yang merender dua bit data yang diteruskan ke sana saat dirender. Ini dilakukan melalui fungsi
_7 yang terlihat di atas, yang berjalan saat URLWhat greeting do you want to say? Who do you want to say it to? Send my greetings
6 dinavigasi keWhat greeting do you want to say? Who do you want to say it to? Send my greetings
Catatan. Sekali lagi, kode ini tidak akan berfungsi jika Anda hanya mencoba memuatnya langsung ke browser. Cara kerja Python sedikit berbeda dari PHP — untuk menjalankan kode ini secara lokal, Anda harus , lalu instal Flask menggunakan
What greeting do you want to say?
Who do you want to say it to?
Send my greetings
9. Pada titik ini, Anda harus dapat menjalankan contoh menggunakan POST / HTTP/2.0
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13
say=Hi&to=Mom
0, lalu arahkan ke POST / HTTP/2.0
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13
say=Hi&to=Mom
1 di browser AndaAda banyak teknologi sisi server lain yang dapat Anda gunakan untuk penanganan formulir, termasuk Perl, Java,. Bersih, Ruby, dll. Pilih saja yang paling Anda sukai. Meskipun demikian, perlu dicatat bahwa sangat jarang menggunakan teknologi ini secara langsung karena ini bisa rumit. Lebih umum menggunakan salah satu dari banyak kerangka kerja berkualitas tinggi yang memudahkan penanganan formulir, seperti
- Django untuk Python [sedikit lebih berat daripada Flask, tetapi dengan lebih banyak alat dan opsi]
- Ekspres untuk Node. js
- Laravel untuk PHP
- Ruby On Rails untuk Ruby
- Boot Musim Semi untuk Java
Perlu dicatat bahwa meskipun menggunakan kerangka kerja ini, bekerja dengan formulir tidaklah mudah. Tapi itu jauh lebih mudah daripada mencoba menulis sendiri semua fungsionalitas dari awal, dan akan menghemat banyak waktu
Catatan. Ini di luar cakupan artikel ini untuk mengajari Anda bahasa atau kerangka kerja sisi server apa pun. Tautan di atas akan memberi Anda bantuan, jika Anda ingin mempelajarinya
Mengirim file dengan formulir HTML adalah kasus khusus. File adalah data biner — atau dianggap demikian — sedangkan semua data lainnya adalah data teks. Karena HTTP adalah protokol teks, ada persyaratan khusus untuk menangani data biner
Atribut ini memungkinkan Anda menentukan nilai header HTTP
GET /?say=Hi&to=Mom HTTP/2.0
Host: foo.com
0 yang disertakan dalam permintaan yang dibuat saat formulir dikirimkan. Header ini sangat penting karena memberi tahu server jenis data apa yang dikirim. Secara default, nilainya adalah POST / HTTP/2.0
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13
say=Hi&to=Mom
3. Dalam istilah manusia, ini berarti. "Ini adalah data formulir yang telah dikodekan ke dalam parameter URL. "Jika Anda ingin mengirim file, Anda perlu melakukan tiga langkah tambahan
- Setel atribut ke
_4 karena konten file tidak dapat dimasukkan ke dalam parameter URL…
- Tetapkan nilai menjadi
7 karena data akan dipecah menjadi beberapa bagian, satu untuk setiap file ditambah satu untuk data teks yang disertakan dalam badan formulir [jika teks juga dimasukkan ke dalam formulir]POST / HTTP/2.0 Host: foo.com Content-Type: application/x-www-form-urlencoded Content-Length: 13 say=Hi&to=Mom
- Sertakan satu atau lebih
_8 kontrol untuk memungkinkan pengguna Anda memilih file yang akan diunggahPOST / HTTP/2.0 Host: foo.com Content-Type: application/x-www-form-urlencoded Content-Length: 13 say=Hi&to=Mom
Sebagai contoh
Choose a file
Send the file
Catatan. Server dapat dikonfigurasi dengan batas ukuran untuk file dan permintaan HTTP untuk mencegah penyalahgunaan
Setiap kali Anda mengirim data ke server, Anda perlu mempertimbangkan keamanan. Formulir HTML sejauh ini merupakan vektor serangan server yang paling umum [tempat di mana serangan dapat terjadi]. Masalahnya tidak pernah datang dari form HTML itu sendiri — mereka datang dari bagaimana server menangani data
Artikel keamanan situs web dari topik pembelajaran sisi server kami membahas beberapa serangan umum dan potensi pertahanan terhadapnya secara mendetail. Anda harus pergi dan memeriksa artikel itu, untuk mendapatkan gambaran tentang apa yang mungkin
Jadi, bagaimana Anda melawan ancaman ini? . Aturan yang paling penting adalah. jangan pernah mempercayai pengguna Anda, termasuk diri Anda sendiri;
Semua data yang datang ke server Anda harus diperiksa dan dibersihkan. Selalu. Tanpa pengecualian
- Melarikan diri dari karakter yang berpotensi berbahaya. Karakter spesifik yang harus Anda waspadai bervariasi tergantung pada konteks di mana data digunakan dan platform server yang Anda gunakan, tetapi semua bahasa sisi server memiliki fungsi untuk ini. Hal yang harus diperhatikan adalah urutan karakter yang terlihat seperti kode yang dapat dieksekusi [seperti perintah JavaScript atau SQL]
- Batasi jumlah data yang masuk untuk mengizinkan hanya yang diperlukan
- File yang diunggah kotak pasir. Simpan di server yang berbeda dan izinkan akses ke file hanya melalui subdomain yang berbeda atau bahkan lebih baik melalui domain yang sama sekali berbeda
Anda seharusnya dapat menghindari banyak/sebagian besar masalah jika Anda mengikuti ketiga aturan ini, tetapi selalu merupakan ide yang bagus untuk mendapatkan peninjauan keamanan yang dilakukan oleh pihak ketiga yang kompeten. Jangan berasumsi bahwa Anda telah melihat semua kemungkinan masalah
Seperti yang telah kami singgung di atas, mengirim data formulir itu mudah, tetapi mengamankan aplikasi bisa jadi rumit. Ingatlah bahwa pengembang front-end bukanlah orang yang harus menentukan model keamanan data. Dimungkinkan untuk melakukan validasi formulir sisi klien, tetapi server tidak dapat mempercayai validasi ini karena tidak memiliki cara untuk benar-benar mengetahui apa yang sebenarnya terjadi di sisi klien
Jika Anda telah menyelesaikan tutorial ini secara berurutan, Anda sekarang tahu cara memberi markup dan memberi gaya pada formulir, melakukan validasi sisi klien, dan memiliki beberapa ide tentang mengirimkan formulir