OpODab.com – Teringat materi kampus mengenai web programming, menggunakan bahasa pemrograman HTML ( Hypertext Markup Language ) dan bahasa pemrograman PHP ( Hypertext Preprocessor ). Projek sederhana yang cukup membingungkan adalah membuat sebuah projek untuk mengimplemantasi penggunaan looping menggunakan if .
Projek tersebut adalah untuk mmbuat sebuah kalkulator, simple kalkulator tepatnya. Kalkulator menggunakan bahasa pemrograman HTML pada tampilan awal dan menggunakan PHP pada proses selanjutnya. Dengan Tampilan yang sangat sederhana ini mungkin dapat menginspirasi pengunjung semua. Tampilan dapat anda lihat pada gambar di atas.
Simple kalkulator yang opodab maksud disini adalah kalkulator hanya berperan untuk pengurangan, penjumlahan, perkalian dan juga pembagian. Untuk selanjutnya anda kembangkan sendiri. Ok, lanjut kepada source codenya. Source code untuk tampilan pertama kalkulator tersebut, ( bisa dilihat tampilannya seperti gambar di atas ) kalkulator sederhana dengan PHP dan HTML adalah sebagai berikut, dengan filename index.html :
[<!-- * http://www.opodab.com * Use is subject to license terms. * * * @OpOWaeDab * --> <html> <head> <title>Kalkulator OpODab V0.1</title> </head> <body> <form action="kalkulator.php" method="post"> <table width="434" height="86" border="2" bordercolor="#FF0000"> <tr> <td align="center" valign="middle"><table width="416" border="0"> <tr> <td height="43" colspan="4" align="center" bgcolor="#D0E382"> <span class="style2">Kalkulator Sederhana Dengan PHP V0.1</span></td> </tr> <tr> <td height="41" align="center"> </td> </tr> <pre> <tr> <td width="117" align="center"> Bilangan 1 <input name="nilaiA"type="text" id="nilaiA" size="20" value=""/></td> <td width="99" align="center"> Operator <select name="operator"> <option>Pilih Operator</option> <option>+</option> <option>-</option> <option>/</option> <option>*</option> <option>%</option> </select></td> <td width="120" align="center"> Bilangan 2 <input name="nilaiB" type="text" id="nilaiB" size="20" /></td> </tr> </pre> <pre> <tr> <td height="43" colspan="4" align="center"> <input type="submit" value="Proses" /> <input type="reset" value="Hapus" /> </td> </tr> </pre> </table> </td> </tr> </table> </form> </body> </html>]
Dan untuk source code tampilan kedua kalkulator sederhana dengan PHP ketika proses di lanjutkan adalah sebagai berikut, dengan filename kalkulator.php :
[<!--
* http://www.opodab.com
* Use is subject to license terms.
*
*
* @OpOWaeDab
* -->
<html>
<head>
<title>Kalkulator OpODab V0.1</title>
</head>
<body>
<table width="434" height="86" border="2" bordercolor="#FF0000">
<tr>
<td align="center" valign="middle"><table width="416" border="0">
<tr>
<td height="43" colspan="4" align="center" bgcolor="#D0E382">
<span class="style2">Kalkulator Sederhana Dengan PHP V0.1</span></td>
</tr>
<tr>
<td height="41" align="center"> </td>
</tr>
<tr>
<pre>
<tr>
<td height="43" colspan="4" align="center">
<?php
$nilaiA = $_POST['nilaiA'];
$nilaiB = $_POST['nilaiB'];
$operator = $_POST['operator'];
if undefined$operator == 'Pilih Operator'){
echo "<span style='font-size:15px; color:red;'>anda belum memilih operator<br></span>";
$eksekusi = "Tekan Tombol Back";
}
if undefined$operator == '+') {
$eksekusi=$nilaiA + $nilaiB;
}
if undefined$operator == '-') {
$eksekusi=$nilaiA - $nilaiB;
}
if undefined$operator == '*') {
$eksekusi=$nilaiA * $nilaiB;
}
if undefined$operator == '/') {
$eksekusi=$nilaiA / $nilaiB;
}
if undefined$operator == '%') {
$eksekusi=$nilaiA % $nilaiB;
}
echo "Hasil <br>";
echo "$nilaiA ";
echo "$operator ";
echo "$nilaiB ";
echo "= ";
echo "$eksekusi";
?>
</td>
</tr>
</pre>
<pre><form action="index.html" method="post">
<tr>
<td height="43" colspan="4" align="center">
<input type="submit" value="Back" />
</td>
</tr></form>
</pre>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>]
Urutan kerja program kalkulator sederhana dengan PHP dan HTML adalah sebagai berikut :
Ketika user menjalankan file index.html akan muncul tampilan seperti pada gambar diatas, kemudian di lanjutkan oleh user untuk memasukkan data yang bertipe data integer, dan kemudian memilih operator yang ingin digunakan.
Operator hanya ada 4, yaitu penjumlahan, pengurangan, perkalian, dan pembagian. Anda dapat mengembangkannya sendiri nantinya. Setelah data sudah di inputkan oleh user dan telah memilih type operatornya kemudian proses dilanjutkan dengan menekan tombol proses.
Nah, ketika tombol proses ini di klik oleh user maka dilanjutkan dengan proses yang kedua, dengan memproses file yang tadi kita beri nama kalkulator.php. Setelah proses dikerjakan oleh file tersebut, maka akan muncul hasilnya pada halaman ini.
Sebelum menampilkan hasilnya, file yang kedua membaca terlebih dahulu data yang di inputkan oleh user juga membaca operator yang telah di pilih oleh user. Kemudian di proses oleh code if yang telah kita tetapkan pada file kalkulator.php.
Selanjutnya, jika Anda masih belum paham dengan source code diatas, maka Anda dapat bertanya dengan menggunakan form komentar yang telah opodab sediakan. Dan semoga artikel membuat kalkulator sederhana dengan html dan php ini dapat menginspirasi Anda semua.
Kritik dan saran senantiasa opodab nantikan untuk lebih baik lagi dalam menyampaikan informasi yang Anda butuhkan.
Ciao,
OpODab,