Part I: Writing the basics - Calculator

**Brandon W** · 10-04-2008, 05:57 AM

G'day everyone.

This is my second tutorial so bare with me please

Second for CC anyway.

In this tutorial I will be showing you some of the basic things you can do with PHP. We will move onto more advanced features as you have noticed this is "Part I"....

In this one I will be showing you how to code the HTML and do all the simple stuff using mathematical operators in PHP. No functions and no tricky things in this part of the tutorial. Over the next couple of "Parts" I would like to change this script slowly from using powernum * powernum * powernum to something more simple. This can be done and will be done in the upcoming releases. We will also be changing these to files into something more simple, a include file full of functions which is then included into the calculator.php. Maybe even adding error messages if something is set. After that I would also like to add more support for more mathematical functions and eventually in the end turning it into Object Orientated Programming (commonly OO).

But as for now, in this one it will just be the HTML and basic PHP. The one reason I didn't make this into one tutorial was I would like beginners to learn the basics and work out a way to edit their code into a more readable/understandable script.

What have I got planned for the next one?
I would like to add support for the pow() function and move the variables declared at the start into a include file.

NOTE: I know most of you will be going on about this being basic, but wait till we get to the end. This is a step by step tutorial.

OK let's get cracking.

What are we trying to make?
A simple calculator that will be able to do addition, subtraction, multiplication, divion, ^2 and ^3. A live demo can be found here. Before you start writing this you need to have either a web server that supports PHP or PHP installed on your computer running with Apache.

OK, before you start this tutorial. You should have a basic knowledge of HTML as I won't be going over the HTML section. If you have any questions about it, feel free to ask in this thread.

Open up a new PHP file in any text editor or your favourite HTML editor. Save this as "calculator.php".
This will be the HTML section of our calculator.

In this place the following lines of code;

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Mathematical Calculator</title>

</head>



<body>



<center>

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

    <p>First number: <input type="text" name="val1" /> <br />

    Second number: <input type="text" name="val2" /><br />

    

    <input type="radio" name="opt" value="add"/> Addition <br />

    <input type="radio" name="opt" value="sub"/> Subtract <br />

    <input type="radio" name="opt" value="mul"/> Multiply <br />

    <input type="radio" name="opt" value="div"/> Divide

    </p>

    

    <p>

    To the power of: <input type="text" name="powernum" /><br />

    

    <input type="radio" name="power" value="power2"/> Power of 2 <br />

    <input type="radio" name="power" value="power3"/> Power of 3

    </p>

    <input type="submit" value="Submit" name="submit" />

</form>

</center>



</body>

</html>

All this does is insert two text boxes. One for the first number and the other for the second number. After that is a list of radio buttons, here the user will select what they would like to do with the two numbers entered above. Then you have another text box which the user will choose if they would like to find out the ^2 or ^3 of a inserted number. Then a submit button.

That is pretty straight forward if you understand HTML. If not feel free to ask any questions. Next is the PHP side of things.

Create a new PHP file in any text editor or your favourite HTML editor. Save this one as "action.php"
OK the code to enter there is.

Code:


<?php

$val1 = $_POST['val1'];

$val2 = $_POST['val2'];

$option = $_POST['opt'];

$powerval = $_POST['power'];

$powernum = $_POST['powernum'];

?>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Mathematical Calculator</title>

</head>



<body>



<?php

if ($option == add) {

    $answer = $val1 + $val2;

}

if ($option == sub) {

    $answer = $val1 - $val2;

}

if ($option == mul) {

    $answer = $val1 * $val2;

}

if ($option == div) {

    $answer = $val1 / $val2;

}

if ($powerval == power2) {

    $answerpower = $powernum * $powernum;

}

if ($powerval == power3) {

    $answerpower = $powernum * $powernum * $powernum;

}



echo "<br />";

if ($option == add) {

    echo "$val1 + $val2 <br />";

    echo "$answer";

}

if ($option == sub) {

    echo "$val1 - $val2<br />";

    echo "$answer";

}

if ($option == mul) {

    echo "$val1 * $val2<br />";

    echo "$answer";

}

if ($option == div) {

    echo "$val1 / $val2<br />";

    echo "$answer";

}

echo "<br />";

if ($powerval == power2) {

    echo "$powernum * $powernum<br />";

    echo "$answerpower";

}

if ($powerval == power3) {

    echo "$powernum * $powernum * $powernum<br />";

    echo "$answerpower";

}

?>



<center>

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

    <p>First number: <input type="text" name="val1" /> <br />

    Second number: <input type="text" name="val2" /><br />

    

    <input type="radio" name="opt" value="add"/> Addition <br />

    <input type="radio" name="opt" value="sub"/> Subtract <br />

    <input type="radio" name="opt" value="mul"/> Multiply <br />

    <input type="radio" name="opt" value="div"/> Divide

    </p>

    

    <p>

    Number: <input type="text" name="powernum" /><br />

    

    <input type="radio" name="power" value="power2"/> Power of 2 <br />

    <input type="radio" name="power" value="power3"/> Power of 3

    </p>

    <input type="submit" value="Submit" name="submit" />

</form>

</center>







</body>

</html>

Save this. Let's explain the code now

As you can see, the code from calculator.php has repeated itself. Which will be fixed in later versions of the code.

In this section.

Code:


<?php

$val1 = $_POST['val1'];

$val2 = $_POST['val2'];

$option = $_POST['opt'];

$powerval = $_POST['power'];

$powernum = $_POST['powernum'];

?>

What we have done is created variables for the input from calculator.php. As you can see in calculator.php we have set the method of the form to POST. This is when it comes in handy. It will transfer the data here. Using;

Code:


$_POST['NAME']

You can get the data from the input on the page before. The name is the name attribute given to a element previously entered.
In this case val1, the first number entered on the previous page, has been put into a variable called $val1. This can now be reffered to as $val1 instead of the long $_POST. This is done with the other input from the previous page making it easier to use the data.

Now variables are done. Let's move on;

Code:


<?php

if ($option == add) {

    $answer = $val1 + $val2;

}

if ($option == sub) {

    $answer = $val1 - $val2;

}

if ($option == mul) {

    $answer = $val1 * $val2;

}

if ($option == div) {

    $answer = $val1 / $val2;

}

if ($powerval == power2) {

    $answerpower = $powernum * $powernum;

}

if ($powerval == power3) {

    $answerpower = $powernum * $powernum * $powernum;

}

The opt name attribute is given to the radio buttons but we put it into a variable called option so we referr to that. We then use the value to see what the user has selected. If the radio button with the value of add was chosen it will execute;

Code:


$answer = $val1 + $val2;

This add's the values of $val1 and $val2, previously entered, and stores it in another variable by the name of answer. This is the same with the rest of the if statements. It checks the value of $option and executes the commands given in { & }. Now we have the answer to all our calculations from the user input. We need to somehow echo the answer.

We will do that using these lines of code.

Code:


if ($option == add) {

    echo "$val1 + $val2 <br />";

    echo "$answer";

}

if ($option == sub) {

    echo "$val1 - $val2<br />";

    echo "$answer";

}

if ($option == mul) {

    echo "$val1 * $val2<br />";

    echo "$answer";

}

if ($option == div) {

    echo "$val1 / $val2<br />";

    echo "$answer";

}

echo "<br />";

if ($powerval == power2) {

    echo "$powernum * $powernum<br />";

    echo "$answerpower";

}

if ($powerval == power3) {

    echo "$powernum * $powernum * $powernum<br />";

    echo "$answerpower";

}

What this does is it checks the value of $option again. This is done because instead of running the code this time it will echo $val1 and $val2 and the option selected. After that it shows the answer. It shows the values just in case the user made a mistake but doesn't it.

Now save this file and run it. You should have a completely working calculator!! If you liked this tutorial, keep an eye out in this forum or check my signature.

I have gone through and edited some things amongst the code to make it less repetitive. You can download the V1 and the edited version attached to this post. I am not going to explain it since it is your little project to find out how it works

Jordan · 10-04-2008, 09:09 AM

Nice tutorial! Full of information and very useful. Do you want contest points or +rep?

**Brandon W** · 10-04-2008, 03:54 PM

+rep please.

Contest points are really meaningless to me for tutorials anyway. Rep means that people respect you

**Xav** · 10-05-2008, 12:15 PM

Congratulations, Brandon! You have discovered the meaning of rep. I will be adding you to my Friends list.

**Brandon W** · 10-05-2008, 02:35 PM

Accepted. I know have 4 hehe

**Xav** · 10-06-2008, 01:23 PM

I see that in your Profile page. http://forum.codecall.net/members/brandon-w.html

**MeTh0Dz** · 10-06-2008, 01:24 PM

Xav you think people have respect for you because of your +rep.

LOL
LAWL

Wait at least one more.

LUL

**Xav** · 10-06-2008, 01:30 PM

Oh, come on, just one more...

ROFLMAO

**Brandon W** · 10-06-2008, 02:26 PM

haha! Here we go again.

I believe many people would actually respect Xav for what he does and how good of a friend he is. Not because he has a lot of Rep, but for him to get that rep people will have to give them to him? Which means has helped someone or shared something really nice or created a tutorial or something.

Also I was the one that said it first. Then Xav, why did you just mention Xav?

**MeTh0Dz** · 10-06-2008, 06:19 PM

Not really Brandom W, he begs for a lot of his rep.

Thread: Part I: Writing the basics - Calculator

LinkBack

Thread Tools

Search Thread

Display

Part I: Writing the basics - Calculator

Re: Part I: Writing the basics - Calculator

Re: Part I: Writing the basics - Calculator

Re: Part I: Writing the basics - Calculator

Re: Part I: Writing the basics - Calculator

Re: Part I: Writing the basics - Calculator

Re: Part I: Writing the basics - Calculator

Re: Part I: Writing the basics - Calculator

Re: Part I: Writing the basics - Calculator

Re: Part I: Writing the basics - Calculator

Thread Information

Users Browsing this Thread

Similar Threads

Algorithms - The Basics (PART 2)

TI 82 calculator tutorials Part 4 - Matrixes and Lists

TI 82 calculator tutorials Part 3 - Receiving Inputs

TI 82 calculator tutorials Part 1 - The very basics

Algorithms - The Basics (PART 1)

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions