kembali lagi di blog kuasai teknologi kali ini saya akan membawa materi tutorial tentang membuat Form dengan input dan pemrosesan terpisah, maksudnya disini terpisah adalah reloadnya dari halaman 1 ke halaman 2 dengan menampilkan data yang ada pada halaman 1, selanjutnya simak penjelasannya di bawah ini.
Form di HTML5 dikenal dengan adanya tag <form> dan di tutup dengan </form> . Di dalam tag pembuka <form> diikuti dengan atribut action dan method. Action menjelaskan ke halaman yang digunakan untuk memproses input, smentara method digunakan untuk mengatur cara mem-parsing konten. Ada 2 method yang biasa digunakan.
- GET: Variabel akan bisa dilihat di URL
- POST: Variabel akan disembunyikan dan tidak terlihat di URL, lebih secure dan cocok untuk memparsing informasi yang penting, seperti password.
Selain itu anda harus juga mengerti sintaks pembuatan form, yang terpenting adalah atribut "name" di masing-masing objek form (misalnya input atau text area). Atribut name ini penting karena nantinya digunakan untuk memanggil variabel di form lainnya.
Berikut ini adalah kode untuk menerima masukan user. Kode ini bisa disimpan dalam format HTML atau PHP karena tidak ada kode PHP di dalamnya dan hanya berfungsi untuk merender form dan menentukan actionnya, seperti gambar di bawah ini.
 |
| gambar 1 |
Apabila dijalankan pada browser tampilannya seperti gambar 2 di bawah ini:
 |
| gambar 2 |
Untuk memproses Anda perlu membuat terlebih dahulu file tangkapaninput.php. Yang harus di perhatikan adalah nama dari objek-objek form yang akan di gunakan untuk mengambil nilai variabel. Cara mengambilnya adalah dengan menggunakan sintaks $_POST['nama_variabel']." misalnya untuk mengambil variabel yang diisikan di kotak dengan name = "nama" maka digunakan sintaks $_POST['nama']. sperti ambar di bawah ini adalah file tangkapinput.php nya:
 |
| gambar 3 |
Script yang ada pada gambar 3 akan mengambil variabel-variabel yang dimasukkan dari from yang ada pada gambar 1 yang kemudian ditampilkan dengan memanfaatkan label untuk me-layout-nya.
Gambar 3 apabila dijalankan pada browser maka tampilannya akan seperti di bawah ini:
Data yang ada di gambar 4 ini adalah Data yang di isi oleh user pada Gambar 2 di atas dan hasilnya seperti gambar di atas.
Mungkin sampai disini dulu penjelasan tutorial kali ini
Gambar 3 apabila dijalankan pada browser maka tampilannya akan seperti di bawah ini:
 |
| gambar 4 |
Data yang ada di gambar 4 ini adalah Data yang di isi oleh user pada Gambar 2 di atas dan hasilnya seperti gambar di atas.
Mungkin sampai disini dulu penjelasan tutorial kali ini
jangan lupa di praktikan lansung...
No comments:
Post a Comment