Pada video ini, kita akan belajar mengenai cara berinteraksi dengan pengguna, dengan menggunakan form pada HTML. Form adalah salah satu elemen pada HTML, yang memungkinkan user untuk memasukkan data dan mengirimkannya ke server. Biasanya kita menggunakan form pada halaman login, halaman registrasi, halaman hubungi kami, atau pada halaman-halaman lain dimana kita membutuhkan data dari pengguna.

Berikut adalah contoh kodenya. Di sebelah kiri adalah kode form dalam bentuk HTML. Perhatikan pada saat membuat tag form, ada 2 buah attribute yang bisa kita gunakan. Attribute pertama yang bisa kita tambahkan adalah action, yang bisa kita isi dengan URL yang akan menerima data yang dikirimkan oleh form ini. Apabila action tidak diisi, maka secara default data dikirim kembali ke url yang sama.

Attribute kedua yang bisa ditambahkan adalah method, yaitu metode yang digunakan untuk mengirimkan data. Kalau tidak diisi, maka secara default metode yang digunakan adalah get. Pada contoh ini, kita menggunakan metode get.

Nantinya, setelah pengguna menekan tombol submit, maka browser akan mengirimkan 2 buah data, yaitu data email dan data password. Berhubung metode yang digunakan adalah get, maka data ini bisa kita akses pada PHP dengan menggunakan variable $_GET. Perhatikan kode di sebelah kanan. Untuk mengakses data email, kita bisa menggunakan variable $_GET dengan index ‘email’. Index ‘email’ disini diambil dari nilai attribute name pada input. Kemudian untuk mengakses data password, kita bisa menggunakan variable $_GET dengan index ‘password’.

Agar lebih jelas, kita coba praktek ya. Kita buat file baru dengan nama form.php. Di dalam file ini kita akan membuat form. Walaupun nama filenya menggunakan ekstension .php, namun isinya adalah HTML ya. Jadi pertama kita ketik dulu html:5 untuk menuliskan boilterplate. Kita ubah judulnya menjadi Registrasi.

Di dalam body, kita tambahkan tag h1 untuk menuliskan judulnya Registrasi. Setelah itu kita buat tag form. Pada video ini, kita isi attribute action dengan nilai display.php. Artinya nanti data form akan dikirim ke file display.php, yang pada saat ini masih belum ada ya, nanti akan kita buat. Kemudian kita tambahkan attribute method dengan nilai get.

Kita tambahkan tag input untuk menerima data dari pengguna. Tag pertama kita beri nama “email”. Kemudian kita buat tag input kedua dengan nama “password”. Kita simpan dan coba lihat hasilnya di browser.

Sekarang kita memiliki 2 buah kotak yang bisa kita gunakan untuk memasukkan data email dan password. Namun kotaknya berada di baris yang sama ya. Untuk memisahkan kotaknya menjadi 2 baris, kita tambahkan tag br diantara kedua tag input. Berhubung jaraknya masih kurang, kita tambahkan tag br satu kali lagi.

Nah, sekarang masalahnya tidak ada keterangan yang menjelaskan kotak ini kegunaannya untuk menyimpan data apa. Jadi di sebelum tag input yang pertama, kita tambahkan dahulu kata Email. Sedangkan di sebelum tag input yang kedua, kita tambahkan kata Password.

Kalau kita refresh. Sekarang sudah ada keterangan ya, kotak pertama adalah untuk email. Sedangkan kotak kedua adalah untuk password. Namun perhatikan bahwa tulisan email dan password ini adalah tulisan biasa ya. Kalau kita arahkan kursor mouse ke atas tulisan email, maka kursor berubah menjadi seperti huruf I. Dan kalau tulisannya kita klik, maka tidak terhubung ke kotak input.

Untuk memperbaiki hal ini, kita tambahkan tag label. Lalu kita pindahkan tulisan email dan tag input ke dalam tag label.

Kita simpan dan refresh browser. Sekarang perhatikan perbedaannya antara email dengan password ya. Kalau mouse kita arahkan ke atar tulisan email, maka kursornya tidak berubah. Lalu kalau kita klik, maka kotak email di sebelahnya menerima fokus. Apapun yang kita ketik akan masuk ke kotak email.

Sedangkan password masih menggunakan cara lama. Kalau kita arahkan mouse ke atas password, maka kursornya berubah menjadi I. Lalu kalau kita klik, fokusnya tidak pindah ke kotak password. Untuk memperbaikinya kita tambahkan tag label dan kita masukkan kata password dan input-nya ke dalam tag label. Sekarang password sudah seperti email ya.

Untuk mengirimkan data, kita perlu tombol submit. Kita tambahkan tag button, dengan attribute type=”submit”. Sedangkan teksnya adalah Daftar. Untuk memindahkan tombol ke bawah, kita tambahkan 2 buah tag br.

Form kita sudah jadi. Kita coba masukkan huruf a dan b. Lalu tekan tombol Daftar. Kemudian terjadi error ya. Perhatikan URL berubah menjadi menuju ke file display.php. Sedangkan kita masih belum membuat file yang bersangkutan.

Jadi kita tambahkan lagi file display.php. Pertama kita tambahkan dahulu html boilterplate. Kita ubah judulnya menjadi Berhasil. Kemudian di dalam tag body, kita tambahkan juga tag h1 dengan teks Berhasil.

Tujuan dari kode display.php adalah untuk menampilkan kembali data yang dikirimkan oleh pengguna pada file form.php. Ingat kembali ya. Ada 2 buah data yaitu email dan password.

Kita buat div pertama dahulu. Isinya adalah email. Lalu untuk mengakses data email, kita menggunakan variable $_GET dengan index [‘email’]. Nilai index ini adalah nilai dari attribute name pada tag input sebelumnya.

Setelah itu kita buat div kedua dengan teks Password. Kemudian untuk mengakses nilainya, kita echo nilai variable $_GET dengan index [‘password’].

Kita refresh browser. Dan sekarang data yang dikirim dari form sebelumnya sudah berhasil kita tangkap pada file display.php. Kita bisa melihat nilai email adalah a, yang kita ambil dari variable $_GET[‘email’]. Sedangkan nilai password adalah b yang diambil dari variable $_GET[‘password’]. Biasanya nilai yang dikirimkan oleh pengguna ini disimpan ke dalam database, untuk digunakan pada modul lainnya. Namun berhubung materi kita masih belum mencakup database, maka untuk sementara kita tampilkan ke layar dahulu.

Yang perlu diperhatikan disini adalah, berhubung metode form yang kita gunakan adalah get, maka data dikirimkan ke file display.php dalam bentuk URL. Perhatikan URL pada browser. Setelah nama file display.php, diikuti oleh tanda tanya dan data pada form sebelumnya. Data pertama bernama email dengan nilai a. Kemudian dipisahkan oleh tanda &. Lalu data kedua bernama password dengan nilai b.

Jadi kelemahan utama dari metode get ini adalah datanya bisa kelihatan di URL. Hal ini menyebabkan data menjadi tidak aman, terutama untuk data sensitif seperti password. Selain itu, pengguna juga bisa mengubah data langsung dari url-nya. Misalkan kita ubah passwordnya menjadi ‘andi’. Kita bisa ubah langsung dari URL. Lalu tekan enter. Dan kemudian tulisan password pada body juga turut berubah menjadi ‘andi’.

URL juga memiliki keterbatasan dalam jumlah karakter, dimana sebaiknya tidak melebihi 2.000 karakter. Kalau jumlah data yang kita kirim banyak dan semuanya ditaruh di dalam URL, maka otomatis URL-nya menjadi panjang. Dan kalau jumlah karakternya terlalu banyak, takutnya ada sebagian data yang tidak berhasil diterima oleh server. Oleh karena itu, lebih baik form menggunakan metode post, yang akan kita bahas di materi berikutnya.

Kita bisa memberikan nilai post pada attribute method. Data akan dikirimkan ke server dengan metode post. Pada metode post, data disembunyikan dari user. Jadi data tidak tampil pada URL seperti metode get, sehingga datanya lebih aman, dan jumlah data juga bisa menjadi lebih banyak karena sudah tidak dibatasi oleh jumlah karakter pada URL.

Nantinya pada kode server PHP, apabila kita ingin mengakses data, kita mesti menggunakan variable $_POST. Jadi nama variable-nya sesuai dengan nama method ya. Kalau metode get menggunakan variable $_GET. Sedangkan metode post menggunakan variable $_POST.

Ini adalah contoh kodenya. Hanya ada sedikit perbedaan dibandingkan dengan kode sebelumnya ya. Di sebelah kiri, nilai attribute method kita ganti menjadi post. Sedangkan di sebelah kanan, kita mengakses data yang dikirimkan oleh pengguna dengan menggunakan variable $_POST.

Kita coba praktek. Pertama kita copy paste dahulu kode dari form.php. File yang baru kita beri nama form_post.php. Isinya hanya perlu diubah sedikit, tepatnya pada tag form. Kita ubah attribute action menjadi display_post.php. Kemudian method kita ubah menjadi post.

Kemudian kita copy paste juga file display.php. Yang barunya kita beri nama display_post.php. Untuk sementara isinya tidak kita ubah ya.

Kita coba jalankan file form_post.php. Kita coba isi email misalkan skysen@gmail.com. Kemudian passwordnya adalah admin123. Kita tekan tombol Daftar.

Nah, pada file display_post tidak tampil apa-apa ya. Mengapa? Karena disini kita mengakses data form menggunakan variable $_GET. Sedangkan metode form adalah post. Jadi disini mesti kita ubah dahulu dari $_GET menjadi $_POST.

Kita simpan dan refresh browser. Perhatikan kalau kita menggunakan metode post, pada saat kita refresh, browser mengeluarkan warning bahwa data form mesti dikirim ulang. Kita tekan tombol continue. Sekarang kita baru bisa mengakses data yang dikirimkan oleh form. Perhatikan bahwa tulisan URL-nya tidak disertai dengan data dari form ya, sehingga datanya menjadi lebih aman. Biasanya untuk formulir yang mengandung data sensitif, lebih disarankan menggunakan metode post.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.