Kalkulator CASIO Sederhana dengan PHP tanpa Javascript


Pembahasan kali ini hampir sama seperti pembahasan sebelumnya yaitu membuat kalkulator sederhana yang dapat melakukan perhitungan aritmatika dengan menggunakan bahasa pemrograman php. Yang berbeda dengan pembahasan post kali ini adalah kalkulator kali ini didesain semirip mungkin dengan kalkulator CASIO pada umunya namun dengan menghilangkan fungsi-fungsi seperti tan, sin, dll yang tidak mampu dihandle oleh function eval().
Nah, bagaimana coding php nya? Berikut kodingnya.
<html>
<head>
  <link href="style.css" rel="stylesheet" type="text/css">
  <title> Kalkulator CASIO dengan PHP tanpa JavaScript  </title>
</head>
<body>
    <?php 
  $teksSblmnya = null;
  if (isset($_POST["hapus"])) {
    $teksSblmnya=null;
    $nilai=null;
  }
  if (isset($_POST["ditekan"])) {
    $teksSblmnya=$_POST["screen"];
    $nilai=$_POST["ditekan"];
  }
  if (isset($_POST["hasil"])) {
    $teksSblmnya=$_POST["screen"];
  }
  if (isset($_POST["delete"])) {
    $teksSblmnya=$_POST["screen"];
  }
  ?>
  <div class="calc-outer">
    <div id="calculator" class="text-center">
     <div>
      <span class="casio">CASIO</span>
      <span class="fx">fx-350MS</span>        
    </div>
    <h3 id="timer" class="tag">S-V.P.A.M</h3>
    <form method="post" action="">
      <input type="text" name="screen" id="screen" class="screen" readonly placeholder="0" value=
          <?php 
          if (isset($_POST["ditekan"])) {
            if($teksSblmnya=="Salah")
            {
              echo $nilai;
            }
            else{
              echo $teksSblmnya, $nilai;
            }
          }
          elseif (isset($_POST["hasil"])) {
            try {
              $hasil = @eval('return '.$teksSblmnya.';');
              echo $hasil;
            } catch (ParseError $e) {
              echo "Salah";
            }
            $teksSblmnya=null;
          } 
          elseif (isset($_POST["delete"])) {
            $teksSblmnya=substr($teksSblmnya,0, -1);
            echo $teksSblmnya;
          }
          ?>
      ><br>
      <div>
      <button name="ditekan" value="7" class="keys">7</button>
      <button name="ditekan" value="8" class="keys">8</button>
      <button name="ditekan" value="9" class="keys">9</button>
      <button name="delete" value="DEL" class="keys del-ac">DEL</button>
      <button name="hapus" value="C" class="keys del-ac">C</button> 
      </div>
      <div>
      <button name="ditekan" value="4" class="keys">4</button>
      <button name="ditekan" value="5" class="keys">5</button>
      <button name="ditekan" value="6" class="keys">6</button>
      <button name="ditekan" value="*" class="keys">*</button>
      <button name="ditekan" value="/" class="keys">/</button>
      </div>
      <div>
      <button name="ditekan" value="1" class="keys">1</button>
      <button name="ditekan" value="2" class="keys">2</button>
      <button name="ditekan" value="3" class="keys">3</button>
      <button name="ditekan" value="+" class="keys">+</button>
      <button name="ditekan" value="-" class="keys">-</button>
     </div>
     <div>
      <button name="ditekan" value="0" class="keys">0</button>
      <button name="ditekan" value="." class="keys">.</button>
      <button name="ditekan" value="/100" class="keys">%</button>
      <button name="hasil" value="hasil" class="equal keys">=</button>   
    </div>
    <div>   
    </div>
  </form>
</div>
  <div>
    <span class="atribusi"> 2018. AZHAR AZZIZ AFIFI</span>
  </div>
</div>
</body>
</html>
Sedangkan untuk membuat tampilan menyerupai kalkulator casio, style css yang digunakan adalah seperti berikut,
@font-face{
 font-family:'digital-clock-font';
 src: url('font/digital-7 (mono).ttf');
}
@font-face {
  font-family: 'Play';
  font-style: normal;
  font-weight: 400;
  src: local('Play Regular'), local('Play-Regular'), url(font/6aez4K2oVqwIvtU2Gg.ttf) format('truetype');
}
@font-face {
  font-family: 'Russo One';
  font-style: normal;
  font-weight: 400;
  src: local('Russo One'), local('RussoOne-Regular'), url(font/Z9XUDmZRWg6M1LvRYsHOz8mM.ttf) format('truetype');
}
@font-face {
  font-family: 'Audiowide';
  font-style: normal;
  font-weight: 400;
  src: local('Audiowide Regular'), local('Audiowide-Regular'), url(font/l7gdbjpo0cum0ckerWCdlg_L.ttf) format('truetype');
}
@font-face {
  font-family: 'Black Ops One';
  font-style: normal;
  font-weight: 400;
  src: local('Black Ops One Regular'), local('BlackOpsOne-Regular'), url(font/qWcsB6-ypo7xBdr6Xshe96H3aDvbsg.ttf) format('truetype');
}
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400;
  src: local('Orbitron Regular'), local('Orbitron-Regular'), url(font/yMJRMIlzdpvBhQQL_Qq7dyg.ttf) format('truetype');
}
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 500;
  src: local('Orbitron Medium'), local('Orbitron-Medium'), url(font/yMJWMIlzdpvBhQQL_QJIVDh2qtU.ttf) format('truetype');
}
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 700;
  src: local('Orbitron Bold'), local('Orbitron-Bold'), url(font/yMJWMIlzdpvBhQQL_QIAUjh2qtU.ttf) format('truetype');
}
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 900;
  src: local('Orbitron Black'), local('Orbitron-Black'), url(font/yMJWMIlzdpvBhQQL_QI4UDh2qtU.ttf) format('truetype');
}
.atribusi{
  position: relative;
  float: left;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #cccccc;
  font-family: 'Orbitron', sans-serif;
  font-style: bold;
}
body{  
  background: #21242b;
}
.casio{
  margin-top:20px;
  margin-left: 25px;
  float:left;
  font-style: bold;
  font-weight: 700;
  font-family: 'Play', 'Russo One', sans-serif;
  font-size:1.4em;
  color: #acb4c1;
}
.tag{
  margin-top:60px;
  color:#ff7283;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-style: bold;
  font-size:1.3em;
}
.fx{
  font-size:1em;
  margin-top:20px;
  margin-right: 25px;
  color: #acb4c1;
  float:right;
  font-style:italic;
}
.screen{
  padding: 5px;
  width: 310px;
  margin-top:5px;
  margin-bottom:30px;
  height:60px;
  font: 35px bold;
  font-family: digital-clock-font;
  text-align:right;
  border-radius: 5px;
  background:#b6d1c2;
  box-shadow: 0px 0px 40px #2b4753;
}
#calculator{
  width: 350px;
  margin: 50px auto;
  border: 1px solid #000000;
  background: #3a5872;
  box-shadow: 0px 0px 40px #000;
  border: 2px solid #4d5368;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  border-bottom-left-radius: 2em;
  border-bottom-right-radius: 2em;
  text-align: center;
}
.keys{
  font-family: digital-clock-font;
  color: #fff;
  font-size: 1.1em;
  cursor: pointer;
  margin:2px;
  width: 58px;
  height: 40px; 
  border: 2px solid #4d5368;
  border-top-left-radius: .6em;
  border-top-right-radius: .6em;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  background: #939ab4;
}
.equal{

  width: 120px;
}
.del-ac{
  background: #c86e78;
}
Untuk demo webnya bisa diakses di sini

Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Aplikasi Rental Mobil Sederhana dengan C++ menggunakan Linked List

Gambar
Bahasa pemrograman C++ adalah salah satu bahasa pemrograman yang paling sering digunakan untuk belajar dasar-dasar pemrograman disamping penggunaan bahasa pascal. Bahasa sering digunakan karena kecepatan prosesnya yang super-super cepat. Dapat diibaratkan, bahasa C++ adalah seorang pelari sprinter yang mampu berlari sangat cepat tanpa takut didahului oleh lawan. Bahasa C++ biasa digunakan untuk membuat berbagai aplikasi yang basisnya teks (TUI), biasanya program yang dibangun menggunakan bahasa C++ tampilannya memang tidak terlalu menarik karena hanya hitam putih, namun untuk kecepatan, tidak bisa diragukan. Beberapa aplikasi yang bisa dibangun secara mudah dengan bahasa C++ adalah seperti kalkulator, ataupun yang lain. Kali ini, Baris Koding   ingin berbagi syntax untuk membuat aplikasi rental mobil bernama "Simply Rent Car". Aplikasi ini dibangun cukup kompleks untuk menangani berbagai proses yang terjadi pada peminjaman mobil, seperti untuk mengelola mobil, mengelola
Baca selengkapnya

Membuat Counter Sederhana dengan PHP

Gambar
Pernah mendengar counter antrian pada bank atau ditempat lain? konsep counter antrian sebenarnya sangat sederhana dan dapat dengan mudah diimplementasikan secara cepat pada web dengan menggunakan pemrograman PHP. Cara kerja counter adalah menambahkan satu nilai setiap kali tombol di klik. Nah, bagaimana implementasi pada bahasa pemrograman web seperti php? Berikut syntax php yang untuk counter <!DOCTYPE html> <html> <head> <title>COUNTER</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <?php if (isset($_POST["navigasi"])) { $navigasi=$_POST["navigasi"]; $nilai = $_POST["counter"]; } ?> <div class="container"> <form method="post" action=""> <div> <input type="text" name="counter" class="counter" value= <?php $nilai = @$_POST[&qu
Baca selengkapnya