Membuat Aplikasi Kalkulator dengan PHP


Script PHP Kalkulator - Pada kesempatan yang sangat baik ini saya akan berbagi mengenai Cara Membuat Aplikasi Kalkulator dengan PHP. Mungkin dari anda ada yang sedang mencari Script PHP kalkulator untuk tugas sekolah atau tugas kuliah.

Pada pembuatan Aplikasi Kalkulator dengan PHP ini hanya menggunakan 2 page saja yaitu page index.php dan style.css untuk mempercantik tampilan Aplikasi Kalkulator.


Silahkan buat folder nya terlebih dahulu di htdocs, di sini saya membuat folder dengan nama "kalkulator". Folder ini yang nantinya akan kita gunakan untuk menyimpan file index dan style.

Berikut adalah Script PHP Kalkulatornya:

index.php
Silahkan simpan script php kalkulator ini dengan nama index.php


<!DOCTYPE html>
<html>
<head>
<title>Kalkulator Sederhana Dengan PHP | www.jasaaplikasidanweb.web.id</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<?php 
if(isset($_POST['hitung'])){
$bil1 = $_POST['bil1'];
$bil2 = $_POST['bil2'];
$operasi = $_POST['operasi'];
switch ($operasi) {
case 'tambah':
$hasil = $bil1+$bil2;
break;
case 'kurang':
$hasil = $bil1-$bil2;
break;
case 'kali':
$hasil = $bil1*$bil2;
break;
case 'bagi':
$hasil = $bil1/$bil2;
break;
}
}
?>
<div class="kalkulator">
<h2 class="judul">KALKULATOR</h2>
<a class="brand" href="http://www.jasaaplikasidanweb.web.id">www.jasaaplikasidanweb.web.id</a>
<form method="post" action="index.php">
<input type="text" name="bil1" class="bil" autocomplete="off" placeholder="Bilangan Pertama">
<input type="text" name="bil2" class="bil" autocomplete="off" placeholder="Bilangan Kedua">
<select class="opt" 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="bil">
<?php }else{ ?>
<input type="text" value="0" class="bil">
<?php } ?>
</div>
</body>
</html>


style.css
Untuk mempercantik tampilan aplikasi kalkulator silahkan anda simpan script di bawah ini dengan nama style.css


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

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

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

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

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

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

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


Jika sudah, sperti biasa silahkan anda akses di browser dengan localhost/kalkulator, jika berhasil tampilan akan seperti di bawah ini


Lulusan mahasiswa 2015 yang mencoba mencari sedikit rejeki dari dunia pemrograman, kunjungi juga blog sederhana saya www.indraadikusuma.web.id banyak artikel seputar teknologi, dunia blog, SEO dll.

Disqus Comments