Form Pengertian Form Form dalam web adalah satu

  • Slides: 24
Download presentation
Form

Form

Pengertian Form § Form dalam web adalah satu sarana untuk memperoleh data dari pengunjung

Pengertian Form § Form dalam web adalah satu sarana untuk memperoleh data dari pengunjung § Form ibarat formulir dalam dunia nyata, berisi nama formulir, beberapa pertanyaan, bagian untuk mengisi jawaban, dengan satu tujuan tertentu. § Data yang terkumpul digunakan oleh pembuat formulir untuk suatu kebutuhan si pembuat

Membuat FORM § Form dibuat menggunakan elemen FORM dan elemen INPUT. <form> <input> </form>

Membuat FORM § Form dibuat menggunakan elemen FORM dan elemen INPUT. <form> <input> </form>

Atribut-atribut FORM § Elemen FORM memiliki atribut : § Action § Method § Name

Atribut-atribut FORM § Elemen FORM memiliki atribut : § Action § Method § Name § Elemen INPUT memiliki atribut : § § Type Name Size Maxlength

Contoh FORM <form action=“” method=“post” name=“form”> Nama : <input type=“text” name=“nm”> <input type=“submit” value=“OK”

Contoh FORM <form action=“” method=“post” name=“form”> Nama : <input type=“text” name=“nm”> <input type=“submit” value=“OK” name=“proses”> </form>

3 Hal Penting FORM § Method form menentukan bagaimana data inputan form dikirim dan

3 Hal Penting FORM § Method form menentukan bagaimana data inputan form dikirim dan diproses. Ada 2 macam method : POST dan GET § Action form menentukan file pemroses data inputan form. Jika action ini dikosongkan (action=“”) maka dianggap pemrosesan data inputan form dilakukan di halaman yang sama. Jadi halaman form dan pemroses bisa dipisah atau dijadikan satu § Submit button Tombol yang berfungsi sebagai trigger (pemicu) pengiriman data dari form ke pemroses.

Berbagai cara Penanganan FORM § Menyatukan antara form dan pemroses Form inputan dan proses

Berbagai cara Penanganan FORM § Menyatukan antara form dan pemroses Form inputan dan proses pengolahan form dilakukan di halaman yang sama. Dengan cara ini, atribut action dikosongkan (action=“”)

Contoh coding FORM <html> <head><title>Pengolahan form</title></head> <body> <form action=“” method=“post” name=“myform”> Nama : <input

Contoh coding FORM <html> <head><title>Pengolahan form</title></head> <body> <form action=“” method=“post” name=“myform”> Nama : <input type=“text” name=“nm” size=“ 25”> <input type=“submit” value=“simpan” name=“spn”> </form> <? php //pemroses data inputan form If (isset($_POST[‘spn’])){ $nama=$_POST[‘nm’]; echo “Nama Anda : <b>$nama</b>”; } ? > </body> </html>

Berbagai cara Penanganan FORM § Memisahkan form dan pemrosesnya Proses pengolahan form dilakukan di

Berbagai cara Penanganan FORM § Memisahkan form dan pemrosesnya Proses pengolahan form dilakukan di halaman yang terpisah dengan form inputannya. Jika memakai cara ini, atribut action diisi dengan nama file pemroses data inputan form

Contoh coding FORM File halaman form (form 1. html): <html> <head><title>Pengolahan form</title></head> <body> <form

Contoh coding FORM File halaman form (form 1. html): <html> <head><title>Pengolahan form</title></head> <body> <form action=“simpan. php” method=“post” name=“myform”> Nama : <input type=“text” name=“nama” size=“ 25”> <input type=“submit” value=“simpan” name=“simpan”> </form> </body> </html>

Contoh coding FORM File halaman pemroses data inputan form (simpan. php) : <? php

Contoh coding FORM File halaman pemroses data inputan form (simpan. php) : <? php If (isset($_POST[‘simpan’])) { $nama=$_POST[‘nama’]; echo “Nama Anda : <b>$nama</b>”; } ? >

Method GET § Metode GET digunakan bila data yang dikirim sedikit. § Metode ini

Method GET § Metode GET digunakan bila data yang dikirim sedikit. § Metode ini menggunakan $_GET untuk memproses data. § Data yang dikirim dengan metode ini akan tampak pada URL di address bar browser shg tidak aman untuk data sensitif (misalnya password).

Contoh coding Method Get <html> <head><title>Pengolahan form</title></head> <body> <form action=“” method=“get” name=“myform”> Nama :

Contoh coding Method Get <html> <head><title>Pengolahan form</title></head> <body> <form action=“” method=“get” name=“myform”> Nama : <input type=“text” name=“nama” size=“ 25”> <input type=“submit” value=“simpan” name=“simpan”> </form> <? php If (isset($_GET[‘simpan’])) { $nama=$_GET[‘nama’]; echo “Nama Anda : <b>$nama</b>”; } ? > </body> </html>

/Form 01. php? nama=Joko+Santosa&simpan=simpan Disebut QUERY STRING

/Form 01. php? nama=Joko+Santosa&simpan=simpan Disebut QUERY STRING

Method POST § Metode POST menggunakan variabel array $_POST § Mampu menyimpan data dalam

Method POST § Metode POST menggunakan variabel array $_POST § Mampu menyimpan data dalam jumlah banyak § Datanya disimpan dalam tempat tersendiri dan tidak tergantung pada suatu variabel

§ Text Elemen-elemen INPUT <form action=“” method=“post”> Usia : <input type=“text” name=“tgl” size=“ 3”

§ Text Elemen-elemen INPUT <form action=“” method=“post”> Usia : <input type=“text” name=“tgl” size=“ 3” maxlength=“ 5”> <input type=“submit” value=“OK” name=“tombol”> </form> Atribut type menentukan jenis elemen input yang akan dibuat. Atribut name memberi nama inputan tersebut. Size menentukan lebar kotak input. Maxlength menentukan maksimal karakter yang dapat diinputkan dalam kotak input

Elemen-elemen INPUT § Password <form action=“” method=“post”> Password : <input type=“password” name=“pswd” size=“ 15”

Elemen-elemen INPUT § Password <form action=“” method=“post”> Password : <input type=“password” name=“pswd” size=“ 15” maxlength=“ 20”> <input type=“submit” value=“send” name=“proses”> </form> Elemen input tipe password tidak akan menampilkan karakter yang diinputkan pada kotak input dan diganti dengan karakter “*”

Elemen-elemen INPUT § Hidden <form action=“” method=“post”> Password : <input type=“hidden” name=“hdd” size=“ 15”

Elemen-elemen INPUT § Hidden <form action=“” method=“post”> Password : <input type=“hidden” name=“hdd” size=“ 15” maxlength=“ 20”> <input type=“submit” value=“send” name=“proses”> </form> Elemen input tipe hidden akan menyembunyikan karakter yang diinputkan pada kotak input.

Elemen-elemen INPUT § Radio <form action=“” method=“post”> Jenis kelamin : <input type=“radio” name=“j_kel” value=“pria”>Pria

Elemen-elemen INPUT § Radio <form action=“” method=“post”> Jenis kelamin : <input type=“radio” name=“j_kel” value=“pria”>Pria <input type=“radio” name=“j_kel” value=“wanita”>Wanita <input type=“submit” value=“send” name=“proses”> </form> Nama elemen input tipe radio harus sama untuk satu inputan. Atribut value untuk menentukan nilai data yang akan dikirim ke pemroses

Elemen-elemen INPUT § Checkbox <form action=“” method=“post”> Hoby : <input type=“checkbox” name=“hb 1” value=“Catur”>Catur

Elemen-elemen INPUT § Checkbox <form action=“” method=“post”> Hoby : <input type=“checkbox” name=“hb 1” value=“Catur”>Catur <input type=“checkbox” name=“hb 2” value=“game”>Game <input type=“submit” value=“send” name=“proses”> </form> Nama elemen input tipe checkbox berbeda untuk satu inputan. Atribut value untuk menentukan nilai data yang akan dikirim ke pemroses

Elemen-elemen INPUT § Select <form action=“” method=“post”> Band favorit : <select name=“band” size=3 multiple>

Elemen-elemen INPUT § Select <form action=“” method=“post”> Band favorit : <select name=“band” size=3 multiple> <option value=“Dmasiv”>D’masiv <option value=“Peterpan” selected>Peterpan <option value=“Raja”>Raja </select> <input type=“submit” value=“send” name=“proses”> </form> Elemen option digunakan untuk membuat pilihan-pilihan pada inputan

Elemen-elemen INPUT § Textarea <form action=“” method=“post”> Pesan : <textarea name=“psn” rows=“ 5” cols=“

Elemen-elemen INPUT § Textarea <form action=“” method=“post”> Pesan : <textarea name=“psn” rows=“ 5” cols=“ 70”> </textarea> <input type=“submit” value=“send” name=“proses”> </form> Atribut rows untuk mengatur tinggi (jumlah baris yang tampak) dan cols mengatur lebar kotak inputan

Elemen-elemen INPUT § Tombol Ada beberapa jenis tombol : § tombol submit <input type=“submit”

Elemen-elemen INPUT § Tombol Ada beberapa jenis tombol : § tombol submit <input type=“submit” value=“OK”> § Tombol reset <input type=“reset” value=“batal”> § Tombol general <input type=“button” value=“hitung” onclick=“script()”> Tombol reset untuk membatalkan pengiriman data inputan form sedang tombol general dapat digunakan untuk bermacam-macam fungsi.

Latihan <form name=“login” action=“” method=“post> Password : <input type=“password” name=“psw” size=“ 15” maxlength=“ 10”>

Latihan <form name=“login” action=“” method=“post> Password : <input type=“password” name=“psw” size=“ 15” maxlength=“ 10”> <input type=“submit” value=“login” name=“tlogin”> </form> <? php If (isset($_POST[‘tlogin’])){ if ($_POST[‘psw’]==“admin”){ echo “Login sukses”; }else{ echo “Anda tidak berhak menggunakan sistem”; } } ? >