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>

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

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

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

Only this I can share if there is less please

Posted on Utopian.io - Rewarding Open Source Contributors

Tutorial Creating Simple Calculator Using PHP