Cara Membuat Kalkulator Menggunakan Script PHP dan CSS Sederhana


Assalammualaikum Wr. Wb.

Kali ini saya akan share Cara Membuat Kalkulator Menggunakan Script PHP dan CSS Sederhana. sebelumnya kita harus menginstall XAMPP terlebih dahulu agar bisa membuka file .php nya.. jika sudah langsung saja saya bagi scriptnya.

Script PHP Kalkulator:

<html>
<head>
<title>Kalkulator Sederhana</title>
<style>
body{
color:#000;
background-image:url(background.jpg);
background-size:full;
background-color:#fff;
font-family:Tahoma, sans-serif;
font-size:18px;
margin:0;
padding:0;
}
input{
font-size:24px;
padding:6px;
border: 1px solid #000;
}
.panel{
background-color:skyblue;
box-shadow:0 2px 5px #000;
padding:18px;
line-height:28px;
margin:150px auto 2px;
max-width:380px;
}
.tombol{
color:#fff;
font-size:14px;
background-color:#212121;
boder-bottom:2px solid #000;
padding:8px;
margin:2px;
}
.tombol:hover{
background-color:orange;
}
a{
text-decoration:none;
color: #F57C00;
}
.footer{
max-width: 100%;
padding: 10px;
color: lime;
}
</style>
</head>
<body>
<?php
$bil1 = isset($_POST['bil1']) ? $_POST['bil1'] : NULL;
$bil2 = isset($_POST['bil2']) ? $_POST['bil2'] : NULL;
$hasil = isset($hasil) ? $hasil : 0;
if(isset($_POST['tambah'])){
$hasil = $bil1+$bil2;
}
if(isset($_POST['kurang'])){
$hasil = $bil1-$bil2; }
if(isset($_POST['kali'])){
$hasil = $bil1*$bil2;
}
if(isset($_POST['bagi'])){
$hasil = $bil1/$bil2;
}
if(isset($_POST['clear'])){
$hasil='';
$bil1='';
$bil2='';
}
if(isset($_POST['sqrt'])){
$hasil=sqrt($bil1);
}
if(isset($_POST['^2'])){
$hasil=($bil1*$bil1);
}
if(isset($_POST['%'])){
$hasil=($bil1*$bil2)/100;
}
if(isset($_POST['1/x'])){
$hasil=(1/$bil1);
}
echo '<div class="panel">'.
'<form action="" method="post">'.
'<div align="center">   KALKULATOR SEDERHANA    </div>'.
'<div align="center">=============================</div>'.
'<b>MASUKAN BILANGAN KE-1:</b><br/>'.
'<input type="text" name="bil1" value="'.$bil1.'"/><br/>'.
'<b>MASUKAN BILANGAN KE-2:</b><br/>'.
'<input type="text" name="bil2" value="'.$bil2.'"/><br/>'.
'<input class="tombol" type="submit" name="tambah" value="+"/>'.
'<input class="tombol" type="submit" name="kurang" value="-"/>'.
'<input class="tombol" type="submit" name="kali" value="X"/>'.
'<input class="tombol" type="submit" name="bagi" value=":"/>'.
'<INPUT class="tombol" type="submit" name="clear" value="C"/>'.
'<input class="tombol" type="submit" name="sqrt" value="sqrt"/>'.
'<input class="tombol" type="submit" name="^2" value="^2"/>'.
'<input class="tombol" type="submit" name="%" value="%"/>'.
'<input class="tombol" type="submit" name="1/x" value="1/X"/><br/>'.
'</form>'.
'<b>HASIL:</b><br/>'.
'<input type="text" value="'.$hasil.'" readonly/><br/>'.
'</div>';
?><br/><br/><br/><br/><br/>
<div class="footer">
Copyright © 14090008 & 14090018 | <a href="https://naufalhanifalbani.wordpress.com/">naufalhanifalbani.wordpress.com</a>, <a href="https://syahrulzzadie.blogspot.com/">syahrulzzadie.blogspot.com</a> | Jangan Lupa Kunjungi Blog Kami yaaa..
</div>
</body>
</html>
Atau download saja Scriptnya disini (Download ZIP)

Copy dan Paste di Notepad++ lalu Simpan Sebagai index.php di folder C:/xampp/htdocs/kalkulator/"taruh disini" (kalau belum ada folder kalkulator, buat sendiri saja).

Setelah disimpan, buka browser anda lalu ketikan http://localhost/kalkulator/ kemudian enter.

Berikut beberapa screenshot tampilan kalkulatornya :


  • Tampilan Utama Kalkulator.


  • Operasi hitung Penambahan.

 
  • Tampilan Operasi Hitung Pengurangan.


  •  Tampilan Operasi Hitung Perkalian.


  •  Tampilan Operasi Hitung Pembagian.



  •  Tampilan Tombol C / Clear.


  •  Tampilan Fungsi sqrt / Akar kuadrat.


  •  Tampilan Fungsi Bilangan Kuadrat.


  •  Tampilan Fungsi Tombol Persen.


  •  Tampilan Fungsi 1/X. 1 dibagi Bilangan Input.


Sekian dari saya. silahkan dicoba di pc/laptop anda masing-masing. Semoga Bermanfaat. :)

Wassalammualaikum Wr. Wb..

4 comments:

  1. makasih ya,saya bakal post ko link blognya di tugas saya
    sangat membantu saya

    ReplyDelete
  2. Mantap bro, tinggal dimodif jadi kalkulator scientific dan programmer.

    Sayangnya gak dibahas di sini yang dua itu tadi:
    http://rakifsul-sysmon-id.bitballoon.com/

    ReplyDelete