#### What Will I Learn? - You will learn to make a simple calculator using PHP - You will learn to make the display more interesting using CSS - You will learn the function of function isset () #### Requirements - You have basic about PHP - You have basic about HTML - You have basic about CSS - you have basic operator arithmetic / math php - You must install XAMPP as a function running php or html by calling localhost in web address - Text Editor and a Browser #### Difficulty - Basic #### Tutorials Contents maybe you've heard by name calculators different times usually we are here to make a simple calculator using php, but you should be able to know the basics of php like form headling and form **$ _GET** and **$ _Post** most important must understand with the use arithmetic operator on **PHP**. before going any further you have to learn a few to make a calculator such as: - Handling Forms In PHP - Arithmetic or mathematical operator **PHP** - Basic HTML - Basic PHP #### Steps to create a calculator - in the first stage you have to do to design a calculator form using **Handling Forms In PHP** then you save in your project folder is up to make the folder what is important easy for you to remember it, **Handling Forms In PHP** file you created earlier save in **index.php**, here I save the location this project is in C/xampp/htdocs/calculator #### index.php

<!DOCTYPE html>
<html>
<head>
	<title>Membuat Kalkulator Sederhana Dengan PHP | Tantry</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://utopian.io/@tantry">Tantry</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>

![3.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517040154/cwqwfktjfaps2qicycdx.png) - in the second stage we will make a **css** file to be more interesting with the touch **css** display the better for us to create a form of course, here I create a css file with **style.css** name and for my storage location like **index.php**. #### 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;
}

![4.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517040181/h5syoui7rgfzkrbul81m.png) - at this stage we try the results we made earlier then all you have to do is open the browser and write the folder name you created earlier, here I use the folder calculator **localhost/htdocs/calculator/index.php** ![1.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517039658/ry61ia9gtlpz3dj992yl.png) #### Explanation - Here I will explain some about the Handling Forms In **PHP** syntax calculator that I made earlier because you think it is very simple but you must understand first some steps you must see carefully, the above calculator form you try to note in the form

<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>

- Here I use the **POST** method as a penanganna data in the number of inputs, on the number one I give with **'bil1'** and number two **'bil2'** while in the operator I create a name of the operation of each value that you can watch, I created in the process on the form **index.php** itself, for you want to empty the action is okay, because if the action is empty then with automatic action form to process the file on the form.

<?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 ()** function as data availability, so here I make checking the data to submit from the form, if the form is submitted then the automatic data in the input of the form I save on each variable

$bil1 = $_POST['bil1'];
$bil2 = $_POST['bil2'];
$operasi = $_POST['operasi'];

- Next I use the switch case function in **PHP** to check the selected operation before the form is submitted

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;			
}

- checking by using a **switch case** means checking what operators will be selected to calculate the number one and the number two in the input, so the operator that select less then the number one in less number two and so that continues to be done by the operator. on each operator I summarize into a result variable from its operation as we see in the **syntax** above, which summarizes the result into the **$hasil** variable, until here it means we already have the result of the arithmetic operation, then what we have to do is to display the result operation

<?php if(isset($_POST['hitung'])){ ?>
	<input type="text" value="<?php echo $hasil; ?>" class="bil">
<?php }else{ ?>
	<input type="text" value="0" class="bil">
<?php } ?>

- Check first whether the sumbit will work automatically that has the result by checking using the **switcs case**, for now live just show the results.

<input type="text" value="<?php echo $hasil; ?>" class="bil">

- If want form before display is zero **"0"**

<input type="text" value="0" class="bil">

- Here I do multiplication if you add or subtract and divide please change it ![2.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517040084/rolv2ju07rop9p0tsvac.png) ![5.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517040114/txevnyq2kbxbkam8zgaq.png) # Only this I can share if there is less please

Posted on Utopian.io - Rewarding Open Source Contributors