Mari kita lihat secara seksama agar dapat membuat kalkulator seperti di atas :
<html>
<head><title>Web Penjumlahan</title></head>
<body>
<h1>KALKULATOR CABE</h1>
<form method="post">
<table>
<tr> <td align="center">Angka 1</td>
<td><input type="number" name="angka1" required/></td>
</tr>
<tr><td></td></tr>
<tr><td colspan="2" align="center" >
<select name="pilih">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</td></tr>
<tr><td></td></tr>
<tr> <td align="center">Angka 2</td>
<td><input type="number" name="angka2" required/></td>
</tr>
</tr>
<tr><td></td></tr>
<tr><td colspan="2" align="center" >
<input type="submit" name="jumlahkan" value="Hitung">
</td></tr>
<tr><td></td></tr>
<?php
$penjumlahan=$_POST["pilih"];
if($penjumlahan=="+"){
$hasil = $_POST["angka1"] + $_POST["angka2"];
}elseif($penjumlahan=="-"){
$hasil = $_POST["angka1"] - $_POST["angka2"];
}elseif($penjumlahan=="*"){
$hasil = $_POST["angka1"] * $_POST["angka2"];
}elseif($penjumlahan=="/"){
$hasil = $_POST["angka1"] / $_POST["angka2"];
}
?>
<tr>
<td align="center">Hasil</td>
<td><input type="text" name="hasil" disabled value="<?=$hasil;?>"></td>
<td></td>
</table>
</form>
</body>
</html>
Sedikit penjelasan tentang kalkulator di atas mengapa disebut "Kalkulator Cabe" yaitu kalkulator sederhana yang biasa digunakan hanya untuk pertambahan pengurangan perkalian pembagian saja. Kalkulator ini biasa digunakan di pasar oleh para pedagang untuk membantu menghitung dengan mudah dalam melayani pembeli.
Pada kode di atas permasalahannya harus di tunjukan bagaimana jika field kosong maka akan muncul tampilan sebagai berikut
Dengan begitu sedikit ditambahkan pada
a. <input type="number" name="angka1" required/>
b. <input type="number" name="angka2" required/>
agar muncul tulisan peringatan seperti di atas
Untuk pilihan "tambah,kurang,kali,bagi" saya gunakan combo box agar para pengguna dapat mudah memilih salah satu dari kebutuhan yang diinginkan.
<select name="pilih">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
Dengan ini lah anda dapat meringkas tampilan kalkulator dengan combo box.
Tombol hitung guna untuk melanjutkan perintah atau menunjukan hasil dari jumlah field yang diisi di field "Angka1,Angka2" <input type="text" name="hasil" disabled value="<?=$hasil;?>"
Demikian penjelasan saya tentang Kalkulator Cabe,jika ingin menambahkan ide baru silahkan tambahkan komen di bawah.
Terima Kasih.
