Simple Calculator script for beginner[PHP]

Dec 7, 2012 | | 1 comment

Hello,

I think you are doing well. For, today i am going to share with a simple calculator script. Hope, you will learn  a lot from this. Let’s go for riding.

How it will look? I have posted an image for you.
Simple Calculator

Rs. 215.99 with Free Private Registration at GoDaddy.com!
advertise



First write some html lines-


<!doctype html><html><head><title>My Calculator</title></head><body></body></html>



In above lines we have created a html document with title name “My Calculator”.
Our calculator form will be inside <body> tags. Lets add more lines. Added lines will be with red color.


<!doctype html>
<html>
<head>
<title>My Calculator</title>

</head>
<body align="center">
<b> MY CALCULATOR</b>
<table border="0" cellpadding="3" cellspacing="0" align="center">
</table>
</body>
</html>


Next, we have added align=”center” for aligning the body content in the center of page. We added a text(our form heading) MY CALCULATOR in bold (<b>,</b>) tags.
We created a table with ‘0’ border, padding in cells with 3 and aligning it center.


<!doctype html>
<html>
<head>
<title>My Calculator</title>

</head>
<body align="center">
<b> MY CALCULATOR</b>
<table border="0" cellpadding="3" cellspacing="0" align="center">
<tr><td>

<form method="POST" action="">

<label for="First number">
First number:</label>
</td>
<td>

<inputtype="text"name="first_num"


maxlength="20"/>

</td>



</tr>


<br/>
<tr>
<td>
<label for="Second number">
Second number:</label>
</td>
<td><input type="text" name="sec_num" maxlength="20"/></td>
</tr>
<br/>
<tr>
<td>
<input type="submit" name="opt" value="+"/>
&nbsp;
<input type="submit" name="opt" value="-"/>
</td><td>

<input type="submit" name="opt" value="*"/>


&nbsp;
<input type="submit" name="opt" value="/"/>
&nbsp;
<input type="reset" value="RESET"</td>

</form>

</tr>

</table>

</body>
</html>


Next, we have created a form with method, action attributes.
Method is POST for uses in php script, it can also be GET but we don’t want to show query in url string so we used POST here.
I left action attribute empty which we will implement later.
You can see that two input type ‘text’ field is there for inputting numbers and four input type submit for +,-,*,/ respectively.

oh, one more input field with type ‘reset’ for resetting our form fields.

Now you can see our form is ready but wait we have not added PHP script for processing and small javascript.So, now the time.


<!doctype html>
<html>
<head>
<title>My Calculator</title>

</head>
<body align="center">
<b> MY CALCULATOR</b>
<table border="0" cellpadding="3" cellspacing="0" align="center">
<tr><td>

<form method="POST" action="<?php echo htmlentities($_SERVER[‘PHP_SELF’]);?>“>
<label for="First number">
First number:</label>
</td>
<td>

<inputtype="text"name="first_num"

onkeyup=”this.value=this.value.replace(/[^d]/,”)” placeholder=”enter only number”onfocus=”if(this.value==’enter only number’)this.value=”;” onblur=”if(this.value==”)this.value=’enter only number’;


maxlength="20"/>

</td>





</tr>


<br/>
<tr>
<td>
<label for="Second number">
Second number:</label>
</td>
<td><input type="text" name="sec_num"onkeyup="this.value=this.value.replace(/[^d]/,'')" placeholder="enter only number" onfocus="if(this.value=='enter only number')this.value='';" onblur="if(this.value=='')this.value='enter only number';

 maxlength="20"/></td>


</tr>
<br/>
<tr>
<td>
<input type="submit" name="opt" value="+"/>
&nbsp;
<input type="submit" name="opt" value="-"/>
</td><td>

<input type="submit" name="opt" value="*"/>


&nbsp;
<input type="submit" name="opt" value="/"/>
&nbsp;
<input type="reset" value="RESET"</td>

</form>
</tr>
</table>


</body>
</html>



We have added “<?php echo htmlentities($_SERVER[‘PHP_SELF’]);?>” in action attribute for processing in same page and htmlentities() is for changing characters to entities.

Some javascript is also added in input ‘text’ fields however it is not mandatory but essential for for safety because it allows users to insert only numbers.
You can learn javascript basics from various websites.
In this javascript code, regex(regular expression) technique is used for applying only numbers.

<!doctype html>
<html>
<head>
<title>My Calculator</title>

</head>
<body align="center">
<b> MY CALCULATOR</b>
<table border="0" cellpadding="3" cellspacing="0" align="center">
<tr><td>
<?php

if(!isset($_POST['opt']))
{?>


<form method="POST" action="<?php echo htmlentities($_SERVER[‘PHP_SELF’]);?>“>
<label for="First number">
First number:</label>
</td>
<td>

<inputtype="text"name="first_num"

onkeyup=”this.value=this.value.replace(/[^d]/,”)” placeholder=”enter only number”onfocus=”if(this.value==’enter only number’)this.value=”;” onblur=”if(this.value==”)this.value=’enter only number’;”


maxlength="20"/>

</td>





</tr>


<br/>
<tr>
<td>
<label for="Second number">
Second number:</label>
</td>
<td><input type="text" name="sec_num"onkeyup="this.value=this.value.replace(/[^d]/,'')" placeholder="enter only number" onfocus="if(this.value=='enter only number')this.value='';" onblur="if(this.value=='')this.value='enter only number';

 maxlength="20"/></td>


</tr>
<br/>
<tr>
<td>
<input type="submit" name="opt" value="+"/>
&nbsp;
<input type="submit" name="opt" value="-"/>
</td><td>

<input type="submit" name="opt" value="*"/>


&nbsp;
<input type="submit" name="opt" value="/"/>
&nbsp;
<input type="reset" value="RESET"</td>
</form>
</tr>
<tr>
<td>

<?php



else{

$first_num =$_POST['first_num'];

$sec_num =$_POST['sec_num'];
$option =$_POST['opt'];

echo "RESULT=";

switch($option){
case "+":
echo $first_num + $sec_num;
break;
case "-":
echo $first_num - $sec_num;
break;
case "*":
echo $first_num * $sec_num;
break;
case "/":
if($sec_num==0)
{echo "infinite";}
else{echo $first_num/$sec_num;}
default:
}}


?>

</td>
</tr>

</table>

</body>
</html>


Next, we have added PHP script for processing the form.

Starting with first <?php if(!isset($_POST[‘opt’])) {?> 
we have written  <?php ?> tags and used isset() within if and else structure for checking that if any of  the buttons (+,-,* ,/ and reset) is pressed or not.
If the buttons is not pressed, script will show the html form and if the any of the buttons is pressed, our script will go to else section and process the form according to button pressed.

For e.g., we have to add 5 and 9. simply write 5 in first input box and 9 in second input box and click ‘+’ button.
As the + button is pressed, php script now go to else {} part and add the number.

Lets, see how we have written our else part php script.
According to name attributes of input fields, we have created our variables like:

$first_num=$_POST[‘first_num’];
$sec_num=$_POST[‘sec_num’];

‘$_POST’ is because our form method is POST and ‘first_num’ is because our first input box has name attribute=’first_num’.
I’ve taken $first_num as variable name but you can name it anything according to the variable rules of PHP.

$option=$_POST[‘opt’];

$option is variable name for the name attribute of ‘opt’. Look at the code, we have declared name=’opt’ in four input field. We have declared a same variable for four input types because we want to use it in switch function.

echo “RESULT=”;
switch($option){
case “+”:
echo $first_num + $sec_num;
break;
case “-“:
echo $first_num – $sec_num;
break;
case “*”:
echo $first_num * $sec_num;
break;
case “/”:
if($sec_num==0)
{echo “infinite”;}
else{echo $first_num/$sec_num;}
default:
}}

echo “RESULT=”; is for printing RESULT= and after that switch() with the variable $option.
when we press ‘+’ button $first_num and $sec_num will store their respective values and ‘opt’ will hold the name attribute of ‘+’ submit type.
we have created cases in switch function for adding, subtracting, multiplying and dividing.
So, if name attribute=’opt’ of ‘+’ is pressed. $option will have value ‘+’ and it simply will go to case ‘+’ part thus adding the number and printing it with ‘echo’;

At last, in division case:

case “/”:
if($sec_num==0)
{echo “infinite”;}
else{echo $first_num/$sec_num;}


if denominator is 0, script will simply print ‘infinite’ and if not, it will go to else {}and print the result of $first_num/$sec_num.


I know, it is lengthy but helpful for beginners. Hope, you’ll find it useful!
Comment below or at facebook.


Thanks for reading!

Posted in: code gallery, php

One Response

Leave a Reply

Your email address will not be published. Required fields are marked *