How to Build a Calculator Using PHP

In this tutorial, we are going to learn how to build a simple calculator using PHP. Our calculator can perform the following operations: addition, subtraction, multiplication, and division. HTML5 has been used to design the user interface.

The calculator application looks like the following:

We get the answer after clicking the 'Calculate' button.

Designing the user interface

The code for designing the user interface is as follows:

<form> <input type="text" name="num1" placeholder="Number 1"> <input type="text" name="num2" placeholder="Number 2"> <select name="operator"> <option>None</option> <option>Add</option> <option>Subtract</option> <option>Multiply</option> <option>Divide</option> </select> <br> <button type="submit" name="submit" value="submit">Calculate</button> </form> <p>The answer is:</p>

The <form> element has been used to design the form. By default, the form data is submitted with the GET method. The data sent with this method is visible in the URL.

The code for designing the user interface has been broken down into small chunks. Each small chunk of code has been explained as follows.

Text boxes: We have taken two text boxes that will be used to accept user inputs. The first text box inputs the first number while the second text box inputs the second number. The <input> elements with type="text" give you text boxes. We have named the text boxes with "num1" and "num2" using the name attribute. These names will help us identify the text boxes. The placeholder attribute specifies a text that is visible in the text box.

<input type="text" name="num1" placeholder="Number 1"> <input type="text" name="num2" placeholder="Number 2">

Drop-down list: A drop-down list has been taken, which has the following list items: None, Add, Multiply, Subtract, and Divide. The <select> element gives you a drop-down list. The <option> elements specify the list items.

<select name="operator"> <option>None</option> <option>Add</option> <option>Subtract</option> <option>Multiply</option> <option>Divide</option> </select>

Line break: We have used the <br> element after the <select> element to give a line break.

<br>

A button: The 'Calculate' button submits all the field information. The value of the type, name and value attributes is “submit” while “Calculate” is the visible text on the button.

<button type="submit" name="submit" value="submit">Calculate</button>

A paragraph: We have used a <p> element to define a paragraph. The content of this element is: "The answer is:". The answer of the calculation will be shown after this.

<p>The answer is:</p>

Performing the calculations

The code for performing the calculations is as follows:

<?php if(isset($_GET['submit'])) { $result1 = $_GET['num1']; $result2 = $_GET['num2']; $operator = $_GET['operator']; switch ($operator) { case "None": echo "You need to select a method!"; break; case "Add": echo $result1 + $result2; break; case "Subtract": echo $result1 - $result2; break; case "Multiply": echo $result1 * $result2; break; case "Divide": echo $result1 / $result2; break; } } ?>

PHP code is written between ‘<?php’ and ‘?>’. The above code has been broken down into small chunks. Each small chunk of code has been explained as follows.

Checking if the form data has been submitted: We need to check if the form data has been submitted. In other words, we have to check if the 'Calculate' button was clicked. The PHP statements inside the if block will be executed only if the isset() function returns TRUE. This function will return TRUE only if $_GET[‘submit’] is set. To explain more, the PHP statements inside the if block will be executed only if the form data has been submitted. $_GET[‘submit’] is a super global variable that gives us the value sent through the HTTP GET method. $_GET is an associative array, where ‘submit’ is its key. So $GET[‘submit’] will give us the value of the HTML element with name=’submit’.

if(isset($_GET['submit'])) {

Getting the entered values: We can fetch the values entered through the text boxes by using the $_GET[‘key’] superglobal. As explained in the previous section, this super global variable gives the value of an HTML element, where ‘key’ is the value of the name attribute of the HTML element. So in the code below, $_GET[‘num1’] and $_GET[‘num2’] give us the values entered through the text boxes with name=”num1” and name=”num2” respectively.

$result1 = $_GET['num1']; $result2 = $_GET['num2'];

Getting the selected operation: The user can select from the following operations: addition, subtraction, multiplication, and division. $_GET[‘operator’] gives you the selected operation.

$operator = $_GET['operator'];

Displaying the results: In the code below, the switch statement lets you perform a particular operation based on the value of $operator. For example, if the value of $operator is ‘Add’, our calculator will add the entered numbers. To give you another example, if the value of $operator is “subtract”, it will subtract the second value from the first one. We have used the following PHP operators to perform the calculations: ‘+’, ‘-’, ‘*’, and ‘/’, which are known as addition operator, subtraction operator, multiplication operator, and division operator respectively. The results are displayed using ‘echo’. If the user has not selected a method, the following message is shown: “You need to select a method!”. The ‘break’ statement lets you exit the switch statement.

switch ($operator) { case "None": echo "You need to select a method!"; break; case "Add": echo $result1 + $result2; break; case "Subtract": echo $result1 - $result2; Break; case "Multiply": echo $result1 * $result2; break; case "Divide": echo $result1 / $result2; break; }

This tutorial explained how to build a simple calculator using PHP. Although our calculator application may not be useful in real-life situations, this tutorial can help you grasp some basic concepts of HTML5 and PHP. I hope it was helpful!