Sunday, December 27, 2009

PHP: Send information through URL

This lesson deals with a very important part of PHP and that is using the URL to send information between pages. I will be using very basic examples to show how things work. But it is up to you how well you can use these things for advance use.

To start with, there are different ways to pass information between pages. One very crude method will be to send the information through URL. For example you may have seen a lot of URL’s like this: http://www.domainname.com/index.php?id=1&name=xyz

This is what we call sending information through the URL. In the above example, two separate values are being passed, i.e. the “id” with a value of 1 and also the “name” with a value xyz.

We can fetch these values in another page and then use them for anything. So, to do that, let’s look at some code.

The plan is to make a link on one page which will pass the information to the second page. We will not be using a very complicated HTML code, so anyone can understand this.

So, the name of my first page is "tutorialPage01.php" and here is the code for the same:

<?php
echo '<a href="tutorialPage02.php?id=1&username=John">Click here to pass the information to the next page</a>';
?>

This is where I am sending the information with different variables. Now, we will set up the next page which is “tutorialPage02.php”. This is the page which we have linked to in the link tag. This page will take the information from the URL and will display the same on the page.

<?php
echo $_GET ['id'];
echo "<br />";
echo $_GET ['username'];
?>

Here we are doing very simple things. As the variable's values are already in the URL which is passed, we are directly displaying the values of the same on the page. First is the printing of the values stored in ‘id’, then we used a break operator to go to the next line and then we are printing the value stored in 'username'.

Saturday, December 5, 2009

Simple calculator using Javascript

The basic idea behind this tutorial is to use javascript to get a simple calculator which will take inputs from user like the two numbers and the operation that the user intends to perform and show the result.

Here, I have used a nested loop to show how they work. That is the reason this program will be actually difference rather than subtraction. Meaning, it will never give you a negative number. It will automatically subtract the smaller number from the larger number. And the same holds true for division. But if you understand the program, you can easily tweak the nested loop to get that thing solved. After all, you also need to work on something.

Ok. Lets start with the HTML code for the page. I have not included the javascript file instead of using it on the page. It is a good practice to keep all scripts in one file and then include them instead of having them on the HTML page.



The html file is here

Not able to embed the html code here, so its better to have the page physically uploaded and then sending a link. Anyways, check the link and you will get the HTMl code for the page.

Now we will look at the javascript and understand what is happening there.
// this function will take two numbers, an operator and then multiply the numbers as per the selected operator and return the result.
function doCalculation (input1, input2, operator){
//handling addition
if (operator == "Addition") {
return input1 + input2;
}
//handling multiplication
if (operator == "Multiply") {
return input1 * input2;
}
//handling division
if (operator == "Division") {
if (input1 > input2){
return input1 / input2;
}
else {
return input2 / input1;
}
}


//handling subtraction
if (operator == "Subtraction") {
if (input1 > input2){
return input1 - input2;
}
else {
return input2 - input1;
}
}


}

// this function takes the values from the form and shows the result as an alert and also in the text box.
function doSimpleCalc() {
number1 = parseFloat(document.calculator.number1.value);
number2 = parseFloat(document.calculator.number2.value);
//result = number1 + number2;
selectedOption = document.calculator.operator.value;
//alert (selectedOption);
result = doCalculation(number1, number2, selectedOption);


alert (result);
document.calculator.result_text.value = result;
}

Note:

If you see there are two functions in the java script. I could have done the whole thing using one function, but then the function would have been form dependent. Meaning, if my function is calculating and also displaying the result then it is interacting with the HTML of the page, which means it knows about the page and depends on them. If we change something on the page later on, our script might need to change. And also, we may have to write same code for different pages. So, its best to make on function which will do the main function. Here the main function is doCalculation. It takes the two numbers and the operator and will return the result. This way I can use this function where ever I want to and I know it will work without any problem. Try to make the functions as less complicated as possible so that you can use them anywhere.

Ok, so the doCalculation function is simple to understand. It takes three parameters input1, input2 and operator. The first two are the numbers which we will get from the user through the text box. And the third one is the operator which the operator will select from the drop down select option.