oke kawan-kawan kita bertemu lagi di dokumedia.blogspot.com dalam kali ini saya akan berbagi ilmu tentang membuat kalkulator sederhana dengan PHP sebelum kita membuat kalkulator kita harus menginstal Apache terlebih dahulu pada percobaan ini saya menggunakan tool xampp karena di xampp sudah tersedia Apache, Mysql, FileZilla, Mercury dan Tomcat jadi gak usah menginstal satu demi satu cukup instal xampp sudah ada semua.
Okeeee langsung aja ke TKP
Pertama buat file css dan beri nama style.css
body, div, form, input, textarea, select,p {
margin: 0; padding: 0; border: 0; outline: none;
}
body {background: #F6F6F6 url('background.png'); color: #7c7873; font-family: 'YanoneKaffeesatzRegular'; }
p {text-shadow:0 1px 0 #fff; font-size:21px;}
#wrap {width:33%; margin:0px auto 0; height:300px;}
#form_wrap.hide:after, #form_wrap.hide:before {display:none; }
form {background:#f7f2ec;
position:relative;top:50px;overflow:hidden;
height:100px;width:400px;margin:0px 0px;padding:20px;
border: 1px solid #fff;
border-radius: 3px;
-moz-border-radius: 3px; -webkit-border-radius: 3px;
box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;
-moz-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 14px #fff;
-webkit-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;}
#form_wrap form {height: auto;}
label {
margin: 11px 20px 0 0;
font-size: 16px; color: #b3aba1;
text-transform: uppercase;
text-shadow: 0px 1px 0px #fff;
}
input[type=text], textarea, select {
font: 14px normal normal uppercase helvetica, arial, serif;
color: #7c7873;background:none;
width: 380px; height: 36px; padding: 0px 10px; margin: 0 0 10px 0;
border:1px solid #f8f5f1;
-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
-moz-box-shadow: inset 0px 0px 1px #726959;
-webkit-box-shadow: inset 0px 0px 1px #b3a895;
box-shadow: inset 0px 0px 1px #b3a895;
}
textarea { height: 80px; padding-top:14px;}
textarea:focus, input[type=text]:focus, select:focus {background:rgba(255,255,255,.35);}
.buttons {
text-shadow: 1px 1px 0px #f4d3ac;
color: #f8f3a3;
border: 1px solid #ea9a60;
background: #e1a757;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7a466) to(#e1a757));
background: -webkit-linear-gradient(#f7a466, #e1a757);
background: -moz-linear-gradient(#f7a466, #e1a757);
background: -ms-linear-gradient(#f7a466, #e1a757);
background: -o-linear-gradient(#f7a466, #e1a757);
background: linear-gradient(#f7a466, #e1a757);
-pie-background: linear-gradient(#f7a466, #e1a757);
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
box-shadow: #e3e3e3 0 1px 1px;
-moz-box-shadow: 0px 1px 1px rgba(000,000,000,0.1), inset 0px 1px 1px rgba(255,255,255,0.7);
-webkit-box-shadow: 0px 1px 1px rgba(000,000,000,0.1), inset 0px 1px 1px rgba(255,255,255,0.7);
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
padding: 6px 13px;
cursor: pointer;
line-height: 14px;
display: inline-block;
}
.buttons:hover {
text-shadow: 1px 1px 0px #ac6402;
color: #f4f4f4;
border: 1px solid #bf7044;
background: -moz-linear-gradient(#e07758, #f99564);
background: -ms-linear-gradient(#e07758, #f99564);
background: -o-linear-gradient(#e07758, #f99564);
background: linear-gradient(#e07758, #f99564);
-pie-background: linear-gradient(#e07758, #f99564);
}
/*Alert*/
.alert {
margin:0px auto 0;
width: 50%;
padding: 8px 35px 8px 14px;
margin-top: 10px;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.alert-error {
color: #ba4032;
background-color: #f2dede;
border-color: #eed3d7;
}
selanjutnya buat file javascript dan berinama calculator.js file javascript ini berfungsi untuk menonaktifkan inputan yang buka numerik
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode != 45 && (charCode != 46 || $(this).val().indexOf('.') != -1) && (charCode < 48 || charCode > 57))
return false;
return true;
}
setelah itu kita buat file php dengan nama index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Muhammad Zaenol Arifin</title>
<!--Disini kita memanggil file css yang bernama style.css-->
<link href="style.css" type="text/css" rel="stylesheet"/>
<!--Disini kita memanggil file js yang bernama calculator.js-->
<script type="text/javascript" src="calculator.js"></script>
<meta name="" content="">
</head>
<body>
<?php
//Disini kita membuat sebuah deklarasi variabel Nilai yang nilai default-nya 0
$Nilai=0;
//Disini kita membuat sebuat kondisi jika inputan name="Hitung" ada aksi maka akan menjalankan perintah yang ada didalamnya
if(isset($_POST['Hitung'])){
//Disini kita membuat Variabel X, Y dan Operator dimana Variabel X bernilai dengan name="X" dan Variabel Y bernilai name="Y" sedangkan Variabel Operator bernilai name="Operator" yang ada di form
$X = $_POST['X'];
$Y = $_POST['Y'];
$Operator = $_POST['Operator'];
//Disini kita membuat sebuah kondisi lagi dimana kondisinya jika variabel X kosong maka akan menampilkan pesan yang ada di kondisi ini
if(empty($X)){
echo '<div class="alert alert-error"><strong>Warning :</strong> Maaf Nilai Angka Ke-1 Tidak Boleh Kosong/Not Empty.</div>';
}
//Disini kita membuat sebuah kondisi lagi dimana kondisinya jika variabel Y kosong maka akan menampilkan pesan yang ada di kondisi ini
if(empty($Y)){
echo '<div class="alert alert-error"><strong>Warning :</strong> Maaf Nilai Angka Ke-2 Tidak Boleh Kosong/Not Empty.</div>';
}
//Disini kita membuat sebuah kondisi lagi dimana kondisinya jika variabel Operator kosong maka akan menampilkan pesan yang ada di kondisi ini
if(empty($Operator)){
echo '<div class="alert alert-error"><strong>Warning :</strong> Maaf Operator Aritmatika Tidak Boleh Kosong/Not Empty.</div>';
}
//Disini kita membuat sebuah kondisi lagi dimana kondisinya jika variabel X, Y dan Operator tidak kosong dan maka akan menjalankan perintah yang ada di dalam kondisi ini
if(!empty($X) && !empty($Y) && !empty($Operator)){
//disini ada sebuah kondisini lagi yang berfungsi untuk mengecek Operator Aritmatika dan melakukan perhitungannya dan hasilnya disimpan kedalam variabel Nilai
if($Operator=="+"){ $Nilai = $X+$Y; }else if($Operator=="-"){ $Nilai = $X-$Y; }
else if($Operator=="*"){ $Nilai = $X*$Y; }else if($Operator=="/"){ $Nilai = $X/$Y; }
}
}
//Disini kita membuat sebuat kondisi jika inputan name="Reset" di Klik maka akan mengosongkan Variabel X,Y dan Operator
if(isset($_POST['Reset'])){
$X="";
$Y="";
$Operator="";
}
?>
<div id="wrap">
<div id='form_wrap'>
<form id="contact-form" name="calculator" method="POST" action="?" autocomplete="off">
<p>Calculator</p>
<label for="nilai-x">Inputkan Nilai X : </label>
<input type="text" name="X" placeholder="Enter your variabel x" id="X" value="<?=$X;?>" onkeypress="return isNumberKey(event)">
<label for="name">Pilih Operator Matematika : </label>
<select name="Operator">
<option value=""></option>
<option value="+" <?php if($Operator=="+"){ echo "selected";}?>>Penjumlahan</option>
<option value="-" <?php if($Operator=="-"){ echo "selected";}?>>Pengurangan</option>
<option value="*" <?php if($Operator=="*"){ echo "selected";}?>>Perkalian</option>
<option value="/" <?php if($Operator=="/"){ echo "selected";}?>>Pembagian</option>
</select>
<label for="name">Inputkan Nilai Y : </label>
<input type="text" name="Y" placeholder="Enter your variabel y" id="Y" value="<?=$Y;?>" onkeypress="return isNumberKey(event)"/>
<label for="name">Hasil : </label>
<input type="text" name="H" placeholder="Hasil Perhitungan" id="H" readonly="" value="<?=$Nilai;?>"/>
<input type="submit" name ="Hitung" value="Hitung" class="buttons"/>
<input type="submit" name ="Reset" value="Clear" class="buttons"/>
</form>
</div>
</div>
</body>
</html>
Oke selesai deh
Untuk Melihat Demonya klik disini
0 Response to "Membuat Kalkulator dengan PHP"
Post a Comment