Pengertian Form
Form merupakan salah satu elemen dalam HTML yang digunakan untuk menerima input dari pengunjung. Melalui form pengunjung sebuah halaman web dapat melakukan interaksi dengan web tsb. Pengunjung dapat memasukan data melalui elemen2 input seperti textfield, checkbox, radio button, textarea, submit button, dropdown, dll. Selain itu pengunjung juga dapat melakukan pemilihan data menggunakan elemen select list atau dengan istilah lain combo box/drop-down list. Form membuat sebuah halaman web menjadi web interaktif dan dinamis, karena form merupakan satu-satunya sarana bagi pengembang website untuk mendapatkan informasi dari pengguna (user).
Berikut perintah dasar Form :
<form>
Input elements
</form>
Ada dua atribut yang digunakan pada elemen form yaitu method & action.
Method yang berfungsi sebagai pengirim data pada server dengan cara ke tujuan yaitu :
Get : Mengirim data pada server dengan cara meletakan data pada bagian akhir URL yang ditunjuk.
Post : Mengirim datanya secara terpisah.
Perbedaannya jika kita mengisi atribut method dengan get ( dimana ini adalah nilai default, seandainya kita tidak menuliskannya ) maka isian form akan terlihat pada url browser. Method get ini biasanya digunakan untuk query pencarian. Method post biasanya digunakan untuk data yang lebih sensitif seperti yang berisi password, atau registrasi user. Data hasil form tidak akan terlihat pada browser.
Action yang berfungsi menentukan lokasi dari script yang akan memproses data dari form.
Struktur dasar form akan terlihat sebagai berikut:
<form action="logindata.php" method="post">
...isi form...
</form>
Komponen pada Form
Sebuah website dinamis seringkali memerlukan interaksi antara browser client dan server bisa berupa pemasukan data teks, angka, atau upload file untuk diproses oleh server. Untuk mewadahi suatu data yang dikirimkan oleh browser client, dibutuhkan adanya FORM HTML. Penggunaan form misalnya untuk pendaftaran keanggotaan, pemasukan kode kartu kredit, login user, transaksi perbelanjaan, dan upload file.
Dalam FORM HTML terdapat beberapa komponen yang bisa digunakan, antara lain :
- Form : <FORM ACTION=action METHOD=method ENCTYPE=media type> </FORM>
- Text Box : untuk menginput data string ataupun angka. < INPUT TYPE=TEXT NAME=”nama_variabel” VALUE=”value”>
- Text Area : untuk menginput string ataupun angka yang terdiri atas banyak baris.
<textarea rows=” ” cols=” ” name=”nama_variabel”> </textarea> - Radio Button : untuk memilih satu pernyataan dari beberapa pernyataan yang disediakan.
<input type=”radio” name=”nama_variabel” value=” ”>Isi_Radio - Combo Box : untuk menampilkan daftar data <select name=”nama_variabel” value=” “><option>Combo1</option><option>Combo2</option></select>
- Submit : untuk mengirimkan semua variable data pada komponen-komponen form yang ada. <input type=”submit” name=”submit” value=”submit”>
- Reset : untuk membatalkan semua penginputan yang telah dituliskan. <input type=”reset” name=”reset” value=”reset”>
Berikut adalah salah satu contoh soal dengan input dan output
Buatlah script sehingga mendapatkan tampilan sebagai berikut :
Harga di dapat dari :
MOWILEX maka Harga = 20000
DANAPAINT maka Harga = 30000
CATYLAC maka Harga = 40000
Total Harga = Harga * Jumlah Beli
Diskon:
Jika Jumlah Beli >= 5 maka diskon 5% dari Total Harga
Jika Jumlah Beli >= 10 maka diskon 10% dari Total Harga
Selain itu diskon=0
Total Bayar = Total Harga - Diskon
Jika di Klik Kembali maka akan tampil ke tampilan input.
JAWABAN
Tampilan Input :
<html>
<head>
<title>Tugas03</title>
</head>
<body bgcolor="#8B0000">
<form action="tugas03.php" method="POST">
<h2>TOKO CAT GUNA BANGUN JAYA</h2><br>
<table border=0>
<tr>
<td>Nama Customer</td>
<td>:</td>
<td><input type="text" name="nama" size="25" ></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><textarea name="alamat" cols="25" rows="3" id="alamat"></textarea></td>
</tr>
<tr>
<td>Jenis CAT</td>
<td>:</td>
<td>
<label for="jenis"></label>
<select name="mrk_cat" id="mrk_cat">
<option value="Pilih">---PILIH---</option>
<option value="MOWILEX">MOWILEX</option>
<option value="DANAPAINT">DANAPAINT</option>
<option value="CATYLAC">CATYLAC</option>
</select>
</td>
</tr>
<tr>
<td>Warna Cat</td>
<td>:</td>
<td><input type="radio" name="warna" value="Merah">Merah <input type="radio" name="warna" value="Biru">Biru <input type="radio" name="warna" value="Kuning">Kuning</td>
</tr>
<tr>
<td>Jumlah Beli</td>
<td>:</td>
<td><input type="text" name="jumbel" size="5"></td>
</tr>
<tr>
<td height="50"><input type="submit" value="Hitung"> <input type="reset" value="Batal"></td>
</tr>
</table>
</form>
</body>
</html>
Tampilan Output
<html>
<head>
<title>Tugas03</title>
</head>
<body bgcolor="#8B0000">
<?php
$jenis=$_POST["mrk_cat"];
$warna=$_POST["warna"];
$jumlah=$_POST["jumbel"];
if
($jenis=="MOWILEX")
{$harga=20000;}
elseif
($jenis=="DANAPAINT")
{$harga=30000;}
elseif
($jenis=="CATYLAC")
{$harga=40000;}
else
{$harga="";}
$total=$harga*$jumlah;
if
($jumlah >=5)
{$diskon=$total*0.05;}
elseif
($jumlah >=10)
{$diskon=$total*0.10;}
else
{$diskon=0;}
$ttl=$total-$diskon;
?>
<h2>TOKO CAT GUNA BANGUN JAYA</h2>
<table width="400"border="0">
<tr>
<td colspan="3">-------------------------------------------------------------</td>
</tr>
<tr>
<td>Nama Customer</td>
<td>:</td>
<td><?php echo $_POST["nama"];?></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><?php echo $_POST["alamat"];?></td>
</tr>
<tr>
<td>Jenis Cat</td>
<td>:</td>
<td><?php echo $_POST["mrk_cat"];?></td>
</tr>
<tr>
<td>Warna</td>
<td>:</td>
<td><?php echo $_POST["warna"];?></td>
</tr>
<tr>
<td>Harga</td>
<td>:</td>
<td align="center"><?php echo $harga;?></td>
</tr>
<tr>
<td>Jumlah Beli</td>
<td>:</td>
<td><?php echo $_POST["jumbel"];?></td>
</tr>
<tr>
<td colspan="3">-------------------------------------------------------------( * )</td>
</tr>
<tr>
<td>Total Harga</td>
<td>:</td>
<td align="center"><?php echo $total;?></td>
</tr>
<tr>
<td>Diskon</td>
<td>:</td>
<td align="center"><?php echo $diskon;?></td>
</tr>
<tr>
<td colspan="3">-------------------------------------------------------------( - )</td>
</tr>
<tr>
<td>Total Bayar</td>
<td>:</td>
<td align="center"><?php echo $ttl;?></td>
</tr>
<tr>
<td colspan="3">--------------------------------------------------------------</td>
</tr>
<tr>
<td height="50" colspan="5"><a href="tugas03.html">Kembali</a></td>
</tr>
</table>
</body>
</html>
Semoga bermanfaat bagi yang membutuhkan, thanks...........
No comments:
Post a Comment