Membuat Kalkulator Sederhana Dengan PHP

Hallo Sahabat Embah , Kali ini Embah Akan Memberikan Tutorial Bagaimana Cara Membuat Kalkulator Sederhana Dengan PHP , Sebelum Kita Membuat Kalkulator Sederhananya , Pertama Kita harus Siapkan File Diantaranya :

index.php
Style.css

Setelah Semua File Telah Kalian Buat maka selanjutnya kita kita design dulu form kalkulator nya. buat sebuah file PHP dengan nama index.php dalam folder project anda. lokasi folder project saya untuk membuat contoh kalkulator sederahana ini ada di http://localhost/kataembah/kalkulator/

Index.php

<!DOCTYPE html>
<html>
<head>
 <title>Membuat Kalkulator Sederhana Dengan PHP</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <?php 
 if(isset($_POST['hitung'])){
  $hit1 = $_POST['hit1'];
  $hit2 = $_POST['hit2'];
  $operasi = $_POST['operasi'];
  switch ($operasi) {
   case 'tambah':
    $hasil = $hit1+$hit2;
   break;
   case 'kurang':
    $hasil = $hit1-$hit2;
   break;
   case 'kali':
    $hasil = $hit1*$hit2;
   break;
   case 'bagi':
    $hasil = $hit1/$hit2;
   break;   
  }
 }
 ?>
 <div class="kalkulator">
  <h2 class="judul">
KALKULATOR</h2>
<form method="post" action="index.php">
   
   <input type="text" name="hit1" class="hit" autocomplete="off" placeholder="Masukkan Bilangan Pertama">
   <input type="text" name="hit2" class="hit" autocomplete="off" placeholder="Masukkan Bilangan Kedua">
   <select class="opr" name="operasi">
    <option value="tambah">+</option>
    <option value="kurang">-</option>
    <option value="kali">x</option>
    <option value="bagi">/</option>
   </select>
   <input type="submit" name="hitung" value="Hitung" class="tombol">           
  </form>
<?php if(isset($_POST['hitung'])){ ?>
   <input type="text" value="<?php echo $hasil; ?>" class="hit">
  <?php }else{ ?>
   <input type="text" value="0" class="hit">
  <?php } ?>   
 </div>
</body>
</html>

Dan Selanjutnya Kita Mempercantik Halamanya dengan css

Style.css

body{
 background: #F2F2F2;
 font-family: sans-serif;
}

.kalkulator{
 width: 335px;
 background: blue;
 margin: 100px auto;
 padding: 10px 20px 50px 20px;
 border-radius: 5px;
 box-shadow: 0px 10px 20px 0px #D1D1D1;
}

.hit{
 width: 300px;
 margin: 5px;
 border: none;
 font-size: 16pt;
 border-radius: 5px;
 padding: 10px; 
}

.opr{
 font-size: 16pt;
 border: none;
 width: 215px;
 margin: 5px;
 border-radius: 5px;
 padding: 10px;
}

.tombol{
 background: green;
 border-top: none;
 border-right: none;
 border-left: none;
 border-radius: 5px;
 padding: 10px 20px;
 color: #eee;
 font-size: 15pt;
 border-bottom:4px solid green;
}

.brand{
 color: #eee;
 font-size: 11pt;
 float: right;
 text-decoration: none;
 margin: 12px;
}

.judul{
 text-align: center;
 color: #eee;
 font-weight: normal;
}

Jika Semua Script Telah kalian buat , maka selanjutnya kita Jalankan Script tadi dan kita jalankan pada browser : http://localhost/kataembah/kalkulator/

Ok Gimana Hasilnya ?? Jika Mengalami Error Atau Kendala Dalam Script Tersebut Kamu Bisa Berikan Komentar diartikel ini , Ok sekian dari embah Semogga Bermanfaat ....

Referensi Script by : Disini

Membuat Kalkulator Sederhana Dengan PHP

No comments

Popular Posts