Creating Simple Calculator using PHP

If you are visual learner and prefer video tutorial then here you go.

There is possibility that playing this is at your current location is not approcriate then you can go through the article and you will get the same knowledge.

Introduction

In this article we are going to learn about creating Simple Calculator using PHP. Simple Calculator means a calculator which is capable of doing simple operation like add, subtract, product (multiply) and division.

Prerequistes

Understanding of basic HTML
php installation
basic php knowledge

Get Started

Create One folder learn( you can name folder anything ).
Open the folder in your editor and create one new file index.php.

As I told you our calculator is capable of doing only three jobs(tasks).

Addition
Subtraction
Multiplication
Division

We require atleast two number to perform any of these operations. We will crete two input field for getting user input. We will require four different button of four different operations.

We are going to write all the things in one file. We don’t require multiple file to do build this calculator.

Creting UI for Calculator

 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


<!DOCTYPE html>
<html lang="en">
<head>
    <title>PHP - Calculator</title>
</head>
<body>

    <form action="<?= $_SERVER['PHP_SELF'] ?>" method="get">
        <!-- Number 1 -->
        <div>
            <label for="num1">Number 1</label>
            <input type="number" name="num1" id="num1" value="<?= $x ?>">
        </div>

        <!-- Number 2 -->
        <div>
            <label for="num2">Number 2</label>
            <input type="number" name="num2" id="num2" value="<?= $y ?>">
        </div>

        <!-- Result -->
        <div>
            <label for="result">Result</label>
            <input type="number" id="result" disabled>
        </div>

        <!-- Operation -->
        <div>
            <input type="submit" value="add" name="operation">
            <input type="submit" value="sub" name="operation">
            <input type="submit" value="pro" name="operation">
            <input type="submit" value="div" name="operation">
        </div>


    </form>
</body>
</html>

If you will see the output of the above image then you will find that you have a simple calculator with 3 input box and four button.

Let’s come to php

Now we need to write php for making the calculor working

 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


<?php
    $error = "";
    $x = "";
    $y = "";
    $result = "";
    if(isset($_GET['operation'])){
        $x = $_GET['num1'];
        $y = $_GET['num2'];
        $op = $_GET['operation'];

        if(is_numeric($x) && is_numeric($y)){
            switch($op){
                case 'add' : $result =  $x  + $y;
                    break;
                case 'sub' : $result =  $x  - $y;
                    break;
                case 'pro' : $result =  $x  * $y;
                    break;
                case 'div' : $result =  $x  / $y;
                    break;
            }
        }else{
            $error = "Enter Number first";
        }

        
        
    }


?>

Learning

Here are the things which you might you have learned from this article.

switch : The switch statement is similar to a series of IF statements on the same expression.
$_GET (PHP Global Variables) : This is used to get data from the url.
isset : It checks if the variable is defined and also not NULL.
is_numeric : Finds whether a variable is a number and not other than that.

Final Code

If you want the complete code and want to run in locally in your computer then here you go.

 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
58
59
60
61


<?php
    $error = "";
    $x = "";
    $y = "";
    $result = "";
    if(isset($_GET['operation'])){
        $x = $_GET['num1'];
        $y = $_GET['num2'];
        $op = $_GET['operation'];

        if(is_numeric($x) && is_numeric($y)){
            switch($op){
                case 'add' : $result =  $x  + $y;
                    break;
                case 'sub' : $result =  $x  - $y;
                    break;
                case 'pro' : $result =  $x  * $y;
                    break;
                case 'div' : $result =  $x  / $y;
                    break;
            }
        }else{
            $error = "Enter Number first";
        }   
        
    }

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Question 1</title>
</head>
<body>
    <h1>PHP - Simple Calculator Program</h1>
    <form action="<?= $_REQUEST["self"]?>" method="GET">
        <div>
            <input type="number" name="num1" id="num1" value="<?= $_GET["num1"] ?>">
            <label for="num1">Number 1</label>
        </div>
        <div>
            <input type="number" name="num2" id="num2" value="<?= $_GET["num2"] ?>">
            <label for="num2">Number 2</label>
        </div>
        <div>
            <input type="text" id="result" value="<?= $result ?>" disabled>
            <label for="result">Result</label>
        </div>
        <div>
            <input type="submit" value="Add" name="add">
            <input type="submit" value="Subtract" name="subtract">
            <input type="submit" value="Product" name="product">
            <input type="submit" value="Division" name="division">
        </div>
    </form>
</body>
</html>