Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
Form
2
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
3
Membuat FORM Form dibuat menggunakan elemen FORM dan elemen INPUT.
4
Atribut-atribut FORM Elemen FORM memiliki atribut :
Action Method Name Elemen INPUT memiliki atribut : Type Size Maxlength
5
Contoh FORM <form action=“” method=“post” name=“form”>
Nama : <input type=“text” name=“nm”> <input type=“submit” value=“OK” name=“proses”> </form>
6
3 Hal Penting FORM Method
Method form menentukan bagaimana data inputan form dikirim dan diproses. Ada 2 macam method : POST dan GET Action 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.
7
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=“”)
8
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>
9
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
10
Contoh coding FORM File halaman form (form1.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>
11
Contoh coding FORM <?php If (isset($_POST[‘simpan’])) {
File halaman pemroses data inputan form (simpan.php) : <?php If (isset($_POST[‘simpan’])) { $nama=$_POST[‘nama’]; echo “Nama Anda : <b>$nama</b>”; } ?>
![Contoh coding FORM < php If (isset($_POST[‘simpan’])) {](http://slideplayer.info/slide/14248443/89/images/11/Contoh+coding+FORM+%3C+php+If+%28isset%28%24_POST%5B%E2%80%98simpan%E2%80%99%5D%29%29+%7B.jpg "File halaman pemroses data inputan form (simpan.php) : < php. If (isset($_POST[‘simpan’])) { $nama=$_POST[‘nama’]; echo Nama Anda : <b>$nama</b> ; } >")
12
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).
13
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>
14
/Form01.php?nama=Joko+Santosa&simpan=simpan
Disebut QUERY STRING
15
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
16
Elemen-elemen INPUT Text <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
17
Elemen-elemen INPUT Password <form action=“” method=“post”>
<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 “*”
18
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.
19
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
20
Elemen-elemen INPUT Checkbox <form action=“” method=“post”>
Hoby : <input type=“checkbox” name=“hb1” value=“Catur”>Catur <input type=“checkbox” name=“hb2” 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
21
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
22
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
23
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.
24
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”; } ?>
Presentasi serupa
