Cara membuat kalkulator sederhana menggunakan PHP

Cara Membuat Kalkulator Sederhana Dengan PHP

Berikut ini adalah beberapa file yang kita butuhkan untuk membuat aplikasi kalkulator sederhana dengan PHP ini.

index.php
style.css

Tahap pertama untuk membuat kalkulator dengan PHP yang harus di lakukan adalah kita design dulu form kalkulator nya. buat sebuah file PHP dengan nama index.php dalam folder project anda. lokasi folder project saya untuk membuat contoh kalkulator sederahana ini ada di http://localhost/malasngoding/kalkulator/

index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
	<title>Membuat Kalkulator Sederhana Dengan PHP | www.malasngoding.com</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="https://www.malasngoding.com">www.malasngoding.com</a>
		<form method="post" action="index.php">			
			<input type="text" name="bil1" class="bil" autocomplete="off" placeholder="Masukkan Bilangan Pertama">
			<input type="text" name="bil2" class="bil" autocomplete="off" placeholder="Masukkan 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>

dan berikan sentuhan cssnya

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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;
}
browser. http://localhost/malasngoding/kalkulator/
membuat kalkulator sederhana dengan php
Akan saya jelaskan sedikit tentang syntax php kalkulator yang saya buat di atas. perhatikan pada bagian form
1
2
3
4
5
6
7
8
9
10
11
<form method="post" action="index.php">			
	<input type="text" name="bil1" class="bil" autocomplete="off" placeholder="Masukkan Bilangan Pertama">
	<input type="text" name="bil2" class="bil" autocomplete="off" placeholder="Masukkan 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>
saya menggunakan method POST untuk penanganan data bilangan yang di input, pada bilangan satu saya memberikan nama dengan “bil1” dan bilangan dua dengan “bil2”. dan bagian operator nya saya memberikan nama operasi yang masing-masing value nya bisa anda perhatikan sendiri. untuk action nya saya membuatnya untuk di proses pada halaman index.php sendiri. bisa juga kalau actionnya di kosongkan maka dengan otomatis action form akan di proses pada file form tersebut sendiri.
kemudian perhatikan pada bagian penangkapan data dari form.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?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;			
	}
}
?>
function isset() berfungsi untuk memeriksa ketersediaan data. jadi di sini saya membuat pengecekan untuk data submit dari form. berarti jika form di submit maka data yang di inputkan dari form saya simpan pada masing-masing variabel.
1
2
3
$bil1 = $_POST['bil1'];
$bil2 = $_POST['bil2'];
$operasi = $_POST['operasi'];
baca lagi tentang penanganan form pada PHP.
selanjutnya saya menggunakan fungsi switch case pada php untuk mengecek operasi yang di pilih saat sebelum form di submit.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;			
}
Pengecekan dengan swtich case ini saya lakukan untuk memeriksa operator apa yang di pilih untuk menghitung bilangan satu dan bilangan dua yang di input, jadi jika operator yang di pilih adalah tambah berarti bilangan satu di tambah bilangan dua, jika operator yang di pilih adalah kurang maka berarti bilangan satu di kurang bilangan dua begitu juga seterusnya dengan operator kali dan bagi jika di pilih. dan masing-masing operasi yang di lakukan saya rangkum kedalam sebuah variabel hasil dari operasinya seperti yang dapat di lihat pada syntax di atas. saya merangkum hasilnya ke dalam variabel $hasil.
Sampai di sini berarti kita sudah memiliki hasil dari operasi aritmatikanya. kemudian yang harus kita lakukan adalah menampilkan hasil operasi nya.
1
2
3
4
5
<?php if(isset($_POST['hitung'])){ ?>
	<input type="text" value="<?php echo $hasil; ?>" class="bil">
<?php }else{ ?>
	<input type="text" value="0" class="bil">
<?php } ?>
kita periksa dulu apakah submit telah di lakukan seperti cara menangkap data dari form di atas tadi. kemudian jika form sudah di submit kan otomatis kita sudah memiliki hasilnya (hasil yang di dapat dari pengecekan menggunakan switch case di atas tadi). tinggal kita tampilkan saja
1
<input type="text" value="<?php echo $hasil; ?>" class="bil">
jika form belum di submit maka yang ingin saya tampilkan adalah nol “0”.
1
<input type="text" value="0" class="bil">
Mengisi nilai yang ingin di hitung
Hasil perhitungan
sekian tutorial membuat kalkulator sederhana dengan PHP.