Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Kalkulator Sederhana Dengan PHP

Assalam'mualikum wr wb

  pada kesempatan kali ini saya akan membagikan sebuat tutorial cara membuat kalukator sederhana dengan php , eamang banyak sekali aplikasi untk menghitung angka tapi apa salahnya kalau kita buat sendiri :) , walau pun itu sedarhana.

Cara membuat kalkulator sederhna dengan PHP
   sebelum membuat codingnya kalian buat terlebih dahulu file - file berikut :
  1.  style.css
  2. index.php

 kemudian simpan di folder kalkulator di dalam htdocs kalian. jika belum ada silahkan buat terlebih dahulu
pertama yg harus dibuat script untuk index-nya copy script di bawah :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kalkulator</title>
<link rel="stylesheet" href="reset.css">
</style>
</head>
<body>
<div class="container">
<div class="header">Kalkulator</div>
<div class="content">
<form action="" method="post">
<div>
<input type="number" name="angka1" placeholder="Masukan Angka..." autofocus class="angka">
</div>
<div style="margin-top: 10px;">
<input type="number" name="angka2" placeholder="Masukan Angka..." class="angka">
</div>
<div style="margin-top: 10px;">
<select name="aritmatika">
<option value="">--- Pilih Operator ---</option>
<option value="tambah">+ (Pertambahan)</option>
<option value="kurang">- (Pengurangan)</option>
<option value="kali">* (Perkalian)</option>
<option value="bagi">/ (Pembagian)</option>
</select>
<button type="submit" name="hasil">Hasil</button>
</div>
</form>
<?php
if (isset($_POST['hasil'])) {
$angka1 = $_POST['angka1'];
$angka2 = $_POST['angka2'];
$aritmatika = $_POST['aritmatika'];
switch ($aritmatika) {
case 'tambah':
$hasil = $angka1 + $angka2;
break;
case 'kurang':
$hasil = $angka1 - $angka2;
break;
case 'kali':
$hasil = $angka1 * $angka2;
break;
case 'bagi':
$hasil = $angka1 / $angka2;
break;
default:
$hasil = 0;
break;
}
}
 ?>
<div style="margin-top: 10px;"> <?php if (isset($_POST['hasil'])) {?>
<input type="text" name="hasil" value="<?= $hasil; ?>" disabled class="hasil">
<?php } else {?>
<input type="text" name="hasil" value="0" disabled class="hasil">
<?php } ?>
</div>
</div>
<div class="footer"> Copy Right &copy; <a href="#">Fauzi</a> 2001.
</div>
</div>
</body>
</html>

dan berikan sentuhan cssnyasupaya tampilan terlihat lebih elegan


body{
background-color: #ddd;
}
.container{
margin: 0 auto;
margin-top: 100px;
width: 320px;
}
.header{
background-color: #ea0d0d;
padding: 16px;
text-align: center;
color: #fff;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
font-size: 26px;
border-bottom: 3px solid salmon;
transition: 1s;
}
.content{
height: auto;
background-color: #eee;
padding: 10px;
}
.angka {
width: 278px;
font-size: 22px;
padding: 10px;
}
.hasil {
width: 278px;
font-size: 22px;
padding: 10px;
text-align: center;
color: black;
}
select {
padding: 10px;
width: 210px; text-align: center;
font-size: 18px;
}
button {
cursor: pointer;
width: 70px;
font-size: 18px;
border: 1px solid silver;
text-align: center;
padding: 10px;
display: inline-block;
transition: all 0.8s,color 0.3s 0.3s;
background-color: red;
color: black;
width: 80px;
}
button:hover{
color: black;
box-shadow: 300px 0 0 0 salmon inset;
}
.footer{
border-top: 3px solid salmon;
padding: 5px;
text-align: center;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background-color: #ea0d0d;
}
.footer a{
color: black;
text-decoration: none;
transition: .5s ease-in-out;
}
.footer a:hover,.footer a:focus{
color: #fff;
}

kemudian coba jalankan pada browser kalian : http://localhost/kalkulator

Penjelasan Script :
 1. Saya menggunakan metode post
 2.function isset() berfungsi untuk memeriksa keteresediaan data. jadi disini saya membuat
pengecakan untuk data submit dari from. jika form di submit maka data yang di inputkan dari
form di simpan pada masing - masing variabel
 3.funsi switchcase pada php untuk mengecek  operasi yg di pilih saat sebelum form di submit

Download Scriptnya


bagaimana menarik bukan ? tentang tutorial membuat kalkulator sederhana dengan php, jika ada yg mau di tanyakan silahkan tinggalkan comment di bawah yang relavan dan jangan lupa like fanspage xodeku agar mendapat artikel update lainnya :)

wassalamualikum wr wb

Fauzi Pnd
Fauzi Pnd Adalah seorang pemuda yang suka mempelajari hal-hal yang baru sambil nyari duid.

2 komentar untuk "Membuat Kalkulator Sederhana Dengan PHP"

  1. Casino Slot Machines & Games - Mapyro
    Try your 진주 출장마사지 luck on the Slots floor, and 공주 출장안마 hit jackpot 광주광역 출장샵 in a range of thrilling game titles from Megaways™, 광주광역 출장샵 Starburst™, Check out the 남원 출장마사지 games list

    BalasHapus