Blognya Mas Afandi

Terima pesanan Program aplikasi WEB, VB, ANDROID, DLL

Home » CSS » HTML » MySQL » Pemrograman Berbasis Web » PHP » MEMBUAT KALKULATOR SEDERHANA DI PHP DENGAN AUTO SUBMIT/LOAD
Monday, June 30, 2014

MEMBUAT KALKULATOR SEDERHANA DI PHP DENGAN AUTO SUBMIT/LOAD

di
Assalamualaikum Wr. Wb.
Uke gan, Sekarang ane akan berbagi gimana membuat kalkulator sederhana diphp menggunakan auto load.
ya.. mungkin sudah banyak yang tau bagaimana membuat kalkulator sederhana. disini saya akan menjelaskan dan berbagi ilmu yang beda.
seperti tampilan ini gan..
uke.. untuk membuatnya pertama agan buka editor,

kemudian jangan lupa komputer agan sudah terinstal xampp, jadi untuk menjalankan aplikasi ini dijalankan melalui xampp/htdocs.
letakkan/simpan program yang agan buat didalam folder htdocs tersebut.
pertama ketikkan program dibawah ini dan simpan dengan nama index.php
tapi sebelumnya buat folder baru didalam htdocs. misalkan folder latihan. jadi simpan file tersebut didalam folder latihan tersebut.

<!DOCTYPE html> <!-- Tag pertama ciri-ciri HTML5 -->
<html>   <!-- Tag Dasar dalam HTML, untuk memulai atau membuka kode HTML -->
<head>  <!-- Tag Awal pembuka 'Head' HTML -->
<title>Membuat Kalkulator Sederhana</title><!-- Tag Title untuk menampilkan Title pada Tab Browser -->
</head>

<body>
<?
 // kondisi perhitungan
 if (($_REQUEST['operasi']=="*") && (!empty($_REQUEST['bil1'])) || (!empty($_REQUEST['bil2']))){   
    //jika dipilih operasi (*) dan bilangan 1 atau bilangan 2 tidak kosong maka 
  $hasil=$_REQUEST['bil1'] * $_REQUEST['bil2']; //dilakukan proses perkalian
 }elseif (($_REQUEST['operasi']=="/") && (!empty($_REQUEST['bil1'])) || (!empty($_REQUEST['bil2']))){ 
    //jika dipilih operasi (/) dan bilangan 1 atau bilangan 2 tidak kosong maka 
  $hasil=$_REQUEST['bil1'] / $_REQUEST['bil2']; //dilakukan proses pembagian
 }elseif (($_REQUEST['operasi']=="+") && (!empty($_REQUEST['bil1'])) || (!empty($_REQUEST['bil2']))){ 
    //jika dipilih operasi (+) dan bilangan 1 atau bilangan 2 tidak kosong maka 
  $hasil=$_REQUEST['bil1'] + $_REQUEST['bil2']; //dilakukan proses penjumlahan
 }elseif (($_REQUEST['operasi']=="-") && (!empty($_REQUEST['bil1'])) || (!empty($_REQUEST['bil2']))){ 
    //jika dipilih operasi (-) dan bilangan 1 atau bilangan 2 tidak kosong maka 
  $hasil=$_REQUEST['bil1'] - $_REQUEST['bil2']; //dilakukan proses pengurangan
 }

?>
<form action="" method="post" name="form">
<center> <!-- Tag Center berfungsi untuk mengatur tata letak suatu objek, hingga batas penutup Tag Center --> 
  <fieldset style="width:50%;">  <!-- Tag fieldset berfungsi untuk menampilkan sebuah Frame/Garis Tepi. -->
    <legend><b>Kalkulator Sederhana</b></legend>  <!-- Tag legend untuk memberikan judul/teks pada Frame diatas,
              Tag '<b>' berfungsi untuk membuat Font/teks bercetak tebal. -->
<table border="0">
  <tr>
    <td align="right">Masukkan Bilangan Pertama</td> <!--Membuat kolom judul bilangan pertama dengan rata kanan-->
    <td>:</td>
 <!--Membuat kolom textfield bil1 dengan rata kanan, value diambilkan dari bilangan yang terakhir diinputkan-->
    <td><input name="bil1" id="bil1" type="text" value="<?=$_REQUEST['bil1']?>" maxlength="15"></td><!--Membuat kolom judul dengan rata kanan-->
  </tr>
  <tr>
    <td align="right">Masukkan Bilangan Kedua</td> <!--Membuat kolom judul bilangan kedua dengan rata kanan-->
    <td>:</td>
 <!--Membuat kolom textfield bil2 dengan rata kanan, value diambilkan dari bilangan yang terakhir diinputkan-->
    <td><input name="bil2" id="bil2" type="text" value="<?=$_REQUEST['bil2']?>" maxlength="15"></td>
  </tr>
  <tr>
    <td align="right">Pilih Operasi Hitung</td> <!--Membuat kolom judul operasi hitung kedua dengan rata kanan-->
    <td>:</td>
 <!--Membuat kolom pilihan (list) operasi, value yang ditampilkan dari operasi yang terakhir dipilih-->
    <td><select name="operasi" id="operasi" onChange="this.form.submit()">
      <option value="<?=$_REQUEST['operasi']?>"><?=$_REQUEST['operasi']?></option>
      <option value="*">*</option> <!--Menampilkan pilihan (*)-->
      <option value="/">/</option> <!--Menampilkan pilihan (/)-->
      <option value="+">+</option> <!--Menampilkan pilihan (+)-->
      <option value="-">-</option> <!--Menampilkan pilihan (-)-->
    </select></td>
    </tr>
  <tr>
    <td align="right" valign="top">Hasil</td> <!--Membuat kolom judul Hasil dengan rata kanan-->
    <td valign="top">:</td>
 <!--Membuat kolom textfield Hasil dengan rata kanan, value diambilkan dari bil1 dioperasikan pada bil2-->
    <td><input type="text" name="hasil" id="hasil" style="height:50px;font-size:18px;" size="25" value="<?=$hasil?>" readonly></td>
  </tr>
</table> <!-- Tag Penutup tabel. -->
</form> <!-- Tag Penutup Form, yaitu untuk membatasi objek yang termasuk Form didalamnya -->
</fieldset> <!-- Tag Penutup fieldset/Frame -->
</center> <!-- Tag Penutup Center, untuk membatasi area yang ditampilkan ditengah halaman -->

</body> <!-- Tag Penutup Body -->
</html> <!-- Tag Penutup HTML -->

Kemudian setelah itu untuk memberikan tampilan yang menarik bisa ditambahkan beberapa script css, letakkan script dibawah ini sebelum tag </head>..

 


<style> /*Tag Style digunakan untuk membuat model dan gaya tampilan*/

table{ /*untuk mengatur model table*/
 padding:10px 10px 10px 10px; /*padding, margin digunakan untuk mengatur jarak letak*/
 margin:10px 10px 10px 10px;
}
legend,fieldset{ /*untuk mengatur tampilan dari tag legend dan fieldset*/
 font-family:Century Gothic; /*model font yang digunakan*/
 font-size:18px;  /*ukuran font*/
 border-radius:10px; /*radius untuk mengatur sudut dari sebuah objek*/
}
textarea{ /*untuk mengatur tampilan dari textarea*/
 font-family:Century Gothic;
 height:45px;
 width:500px;
 background-color: #ffffff;
   border: 1px solid #cccccc;
 border-radius:5px;
 padding-left:10px;
}
 /*untuk mengatur tampilan dari input bertipe submit dan reset (tombol)*/
input[type="submit"]{
 background-color:#0CF;
 border-color:transparent;
 padding:10px 20px 10px 20px;
 font-weight:bold;
}
input[type="reset"]{
 background-color:#F00;
 border-color:transparent;
 padding:10px 20px 10px 20px;
 font-weight:bold;
}
 /*untuk mengatur tampilan dari input dialog*/
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
select,
.uneditable-input {
 font-weight:bold;text-align:right;padding-right:10px;
 font-family:Century Gothic;
 height:30px;
 padding-left:10px;
   background-color: #ffffff;
   border: 1px solid #cccccc;
 border-radius:5px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
       -o-transition: border linear 0.2s, box-shadow linear 0.2s;
          transition: border linear 0.2s, box-shadow linear 0.2s;
}
</style> <!--Tag penutup Style -->
Share on Facebook
Share on Twitter
Share on Google+

Related : MEMBUAT KALKULATOR SEDERHANA DI PHP DENGAN AUTO SUBMIT/LOAD