<html>
<head>
<title>Tutorial <html>
<head>
<title>Tutorial Membuat Kalkulator Dengan PHP MySQL</title>
<!---digunakan untuk membuat judul-->
<link rel="stylesheet" type="text/css" href="style.css">
<!---penulisan internal css dalam tag body-->
</head>
<body>
<?php
<!---merupakan bahasa pemprograman yang diunakan-->
<!---digunakan untuk tidak menampilkan gema ketika skrip terbuka tidak berfungsi-->
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">
<!---dibagian input style diunakan sebagai kolom isian dari user-->
<h4 class="judul">KALKULATOR SEDERHANA</h4>
<!---digunakan untuk mengirim data ke suatu server untuk diolah-->
<form method="post" action="./">
<!---dibagian input style diunakan sebagai kolom isian dari user-->
<input type="text" name="bil1" class="bil" placeholder="Bilangan 1" required/>
<input type="text" name="bil2" class="bil" placeholder="Bilangan 2" required/>
<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"/>
<a href="./" style="text-decoration:none;"><input type="button" value="Hapus" class="tombol"/></a>
</form>
<?php if(isset($_POST['hitung'])){
?>
<input type="text" value="<?php echo $hasil; ?>" class="hasil"/>
<?php
}
else{
?>
<input type="text" value="0" class="hasil"/>
<?php
}
?>
</div>
</body>
</html></title>
<!---digunakan untuk membuat judul-->
<link rel="stylesheet" type="text/css" href="style.css">
<!---penulisan internal css dalam tag body-->
</head>
<body>
<?php
<!---merupakan bahasa pemprograman yang diunakan-->
<!---digunakan untuk tidak menampilkan gema ketika skrip terbuka tidak berfungsi-->
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">
<!---dibagian input style diunakan sebagai kolom isian dari user-->
<h4 class="judul">KALKULATOR SEDERHANA</h4>
<!---digunakan untuk mengirim data ke suatu server untuk diolah-->
<form method="post" action="./">
<!---dibagian input style diunakan sebagai kolom isian dari user-->
<input type="text" name="bil1" class="bil" placeholder="Bilangan 1" required/>
<input type="text" name="bil2" class="bil" placeholder="Bilangan 2" required/>
<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"/>
<a href="./" style="text-decoration:none;"><input type="button" value="Hapus" class="tombol"/></a>
</form>
<?php if(isset($_POST['hitung'])){
?>
<input type="text" value="<?php echo $hasil; ?>" class="hasil"/>
<?php
}
else{
?>
<input type="text" value="0" class="hasil"/>
<?php
}
?>
</div>
</body>
</html>
Script di atas adalah bagian dari cara membuat kalkulator dengan php mysql sederhana yang tentu belum lengkap karena style nya belum kita buat. Style akan kita buat menggunakan CSS tentunya agar tampilan halaman aplikasi kalkulator menjadi lebih menarik. Berikut adalah coding CSS tersebut;
Simpan sebagai style.css
body{
background:#d3d3d3;
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;
}
Buka web browser lalu akses url "localhost/kalkulator/index.php "maka akan tampil halaman kalkulator sederhana.
