Bagaimana mengirim data dari php ke html?

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

<form action="/somewhere_else">…</form>

Atribut 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 —

<form action="/somewhere_else">…</form>

<form action="https://example.com">…</form>

Di sini, kami menggunakan URL relatif — data dikirim ke URL berbeda dengan asal yang sama

<form action="/somewhere_else">…</form>

Ketika ditentukan tanpa atribut, seperti di bawah ini, data

<form action="/somewhere_else">…</form>

<form>…</form>

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

<form action="/somewhere_else">…</form>

<form action="/somewhere_else">…</form>

<form action="/somewhere_else">…</form>

<form action="/somewhere_else">…</form>

Bagaimana data dikirim tergantung pada atribut

<form action="/somewhere_else">…</form>

Atribut 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

<form>…</form>

Pertimbangkan bentuk berikut

<form action="http://www.foo.com" method="GET">
  <div>
    <label for="say">What greeting do you want to say?</label>
    <input name="say" id="say" value="Hi" />
  </div>
  <div>
    <label for="to">Who do you want to say it to?</label>
    <input name="to" id="to" value="Mom" />
  </div>
  <div>
    <button>Send my greetings</button>
  </div>
</form>

Karena metode

<form>…</form>

<form>…</form>

Data ditambahkan ke URL sebagai serangkaian pasangan nama/nilai. Setelah alamat web URL berakhir, kami menyertakan tanda tanya (

<form>…</form>

<form>…</form>

• <form action="http://www.foo.com" method="GET">
    <div>
      <label for="say">What greeting do you want to say?</label>
      <input name="say" id="say" value="Hi" />
    </div>
    <div>
      <label for="to">Who do you want to say it to?</label>
      <input name="to" id="to" value="Mom" />
    </div>
    <div>
      <button>Send my greetings</button>
    </div>
  </form>
  

  0, yang memiliki nilai

  <form action="http://www.foo.com" method="GET">
    <div>
      <label for="say">What greeting do you want to say?</label>
      <input name="say" id="say" value="Hi" />
    </div>
    <div>
      <label for="to">Who do you want to say it to?</label>
      <input name="to" id="to" value="Mom" />
    </div>
    <div>
      <button>Send my greetings</button>
    </div>
  </form>
  

  1

• <form action="http://www.foo.com" method="GET">
    <div>
      <label for="say">What greeting do you want to say?</label>
      <input name="say" id="say" value="Hi" />
    </div>
    <div>
      <label for="to">Who do you want to say it to?</label>
      <input name="to" id="to" value="Mom" />
    </div>
    <div>
      <button>Send my greetings</button>
    </div>
  </form>
  

  _2, yang memiliki nilai

  <form action="http://www.foo.com" method="GET">
    <div>
      <label for="say">What greeting do you want to say?</label>
      <input name="say" id="say" value="Hi" />
    </div>
    <div>
      <label for="to">Who do you want to say it to?</label>
      <input name="to" id="to" value="Mom" />
    </div>
    <div>
      <button>Send my greetings</button>
    </div>
  </form>
  

  3

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

<form>…</form>

Mari kita lihat sebuah contoh — ini adalah bentuk yang sama seperti yang kita lihat di bagian

<form>…</form>

<form>…</form>

<form action="http://www.foo.com" method="POST">
  <div>
    <label for="say">What greeting do you want to say?</label>
    <input name="say" id="say" value="Hi" />
  </div>
  <div>
    <label for="to">Who do you want to say it to?</label>
    <input name="to" id="to" value="Mom" />
  </div>
  <div>
    <button>Send my greetings</button>
  </div>
</form>

Saat formulir dikirimkan menggunakan metode

<form>…</form>

POST / HTTP/2.0
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13

say=Hi&to=Mom

Header

<form action="http://www.foo.com" method="GET">
  <div>
    <label for="say">What greeting do you want to say?</label>
    <input name="say" id="say" value="Hi" />
  </div>
  <div>
    <label for="to">Who do you want to say it to?</label>
    <input name="to" id="to" value="Mom" />
  </div>
  <div>
    <button>Send my greetings</button>
  </div>
</form>

GET /?say=Hi&to=Mom HTTP/2.0
Host: foo.com

Catatan. 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

1. Buka alat pengembang
2. Pilih jaringan"
3. Pilih Semua"
4. Pilih "foo. com" di tab "Nama".
5. 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

<form>…</form>

<form>…</form>

1. Jika Anda perlu mengirim kata sandi (atau data sensitif lainnya), jangan pernah menggunakan metode

   <form>…</form>
   

   3 atau Anda berisiko menampilkannya di bilah URL, yang akan sangat tidak aman
2. Jika Anda perlu mengirim data dalam jumlah besar, metode

   <form>…</form>
   

   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

<form>…</form>

<?php
  // The global $_POST variable allows you to access the data sent with the POST method by name
  // To access the data sent with the GET method, you can use $_GET
  $say = htmlspecialchars($_POST['say']);
  $to  = htmlspecialchars($_POST['to']);

  echo  $say, ' ', $to;
?>

Contoh ini menampilkan halaman dengan data yang kami kirimkan. Anda dapat melihat ini beraksi di contoh php-contoh kami. html — yang berisi contoh formulir yang sama seperti yang kita lihat sebelumnya, dengan

<form action="/somewhere_else">…</form>

<form>…</form>

<form action="/somewhere_else">…</form>

GET /?say=Hi&to=Mom HTTP/2.0
Host: foo.com

<form action="http://www.foo.com" method="POST">
  <div>
    <label for="say">What greeting do you want to say?</label>
    <input name="say" id="say" value="Hi" />
  </div>
  <div>
    <label for="to">Who do you want to say it to?</label>
    <input name="to" id="to" value="Mom" />
  </div>
  <div>
    <button>Send my greetings</button>
  </div>
</form>

Catatan. 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

<form action="http://www.foo.com" method="POST">
  <div>
    <label for="say">What greeting do you want to say?</label>
    <input name="say" id="say" value="Hi" />
  </div>
  <div>
    <label for="to">Who do you want to say it to?</label>
    <input name="to" id="to" value="Mom" />
  </div>
  <div>
    <button>Send my greetings</button>
  </div>
</form>

<form action="http://www.foo.com" method="POST">
  <div>
    <label for="say">What greeting do you want to say?</label>
    <input name="say" id="say" value="Hi" />
  </div>
  <div>
    <label for="to">Who do you want to say it to?</label>
    <input name="to" id="to" value="Mom" />
  </div>
  <div>
    <button>Send my greetings</button>
  </div>
</form>

• membentuk. html. Bentuk yang sama seperti yang kita lihat di bagian atas tetapi dengan

  <form action="/somewhere_else">…</form>
  

  1 diatur ke

  <form action="http://www.foo.com" method="POST">
    <div>
      <label for="say">What greeting do you want to say?</label>
      <input name="say" id="say" value="Hi" />
    </div>
    <div>
      <label for="to">Who do you want to say it to?</label>
      <input name="to" id="to" value="Mom" />
    </div>
    <div>
      <button>Send my greetings</button>
    </div>
  </form>
  

  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.

  <form action="http://www.foo.com" method="POST">
    <div>
      <label for="say">What greeting do you want to say?</label>
      <input name="say" id="say" value="Hi" />
    </div>
    <div>
      <label for="to">Who do you want to say it to?</label>
      <input name="to" id="to" value="Mom" />
    </div>
    <div>
      <button>Send my greetings</button>
    </div>
  </form>
  

  _5 pada dasarnya mengatakan "alihkan ke

  <form action="http://www.foo.com" method="POST">
    <div>
      <label for="say">What greeting do you want to say?</label>
      <input name="say" id="say" value="Hi" />
    </div>
    <div>
      <label for="to">Who do you want to say it to?</label>
      <input name="to" id="to" value="Mom" />
    </div>
    <div>
      <button>Send my greetings</button>
    </div>
  </form>
  

  6 saat formulir dikirimkan"
• salam. html. Templat ini hanya berisi baris yang merender dua bit data yang diteruskan ke sana saat dirender. Ini dilakukan melalui fungsi

  <form action="http://www.foo.com" method="POST">
    <div>
      <label for="say">What greeting do you want to say?</label>
      <input name="say" id="say" value="Hi" />
    </div>
    <div>
      <label for="to">Who do you want to say it to?</label>
      <input name="to" id="to" value="Mom" />
    </div>
    <div>
      <button>Send my greetings</button>
    </div>
  </form>
  

  _7 yang terlihat di atas, yang berjalan saat URL

  <form action="http://www.foo.com" method="POST">
    <div>
      <label for="say">What greeting do you want to say?</label>
      <input name="say" id="say" value="Hi" />
    </div>
    <div>
      <label for="to">Who do you want to say it to?</label>
      <input name="to" id="to" value="Mom" />
    </div>
    <div>
      <button>Send my greetings</button>
    </div>
  </form>
  

  6 dinavigasi ke

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

<form action="http://www.foo.com" method="POST">
  <div>
    <label for="say">What greeting do you want to say?</label>
    <input name="say" id="say" value="Hi" />
  </div>
  <div>
    <label for="to">Who do you want to say it to?</label>
    <input name="to" id="to" value="Mom" />
  </div>
  <div>
    <button>Send my greetings</button>
  </div>
</form>

POST / HTTP/2.0
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13

say=Hi&to=Mom

POST / HTTP/2.0
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13

say=Hi&to=Mom

Ada 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

POST / HTTP/2.0
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13

say=Hi&to=Mom

Jika Anda ingin mengirim file, Anda perlu melakukan tiga langkah tambahan

• Setel atribut ke

  <form>…</form>
  

  _4 karena konten file tidak dapat dimasukkan ke dalam parameter URL
• Tetapkan nilai menjadi

  POST / HTTP/2.0
  Host: foo.com
  Content-Type: application/x-www-form-urlencoded
  Content-Length: 13
  
  say=Hi&to=Mom
  

  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)
• Sertakan satu atau lebih

  POST / HTTP/2.0
  Host: foo.com
  Content-Type: application/x-www-form-urlencoded
  Content-Length: 13
  
  say=Hi&to=Mom
  

  _8 kontrol untuk memungkinkan pengguna Anda memilih file yang akan diunggah

Sebagai contoh

<form method="post" action="https://www.foo.com" enctype="multipart/form-data">
  <div>
    <label for="file">Choose a file</label>
    <input type="file" id="file" name="myFile" />
  </div>
  <div>
    <button>Send the file</button>
  </div>
</form>

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 baik 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

Bagaimana cara meneruskan data dari file PHP ke HTML?