Hi all..

I'm back with a new small tutorial!

Introducation

A tutorial to integrate Ajax, Php And Database ( Im using MySQL) + Visitor Tracking!

Here you can enter values to some input fields, and by clicking some enter button, ( or u can call the function on some other event) those values will be sent to the database, along with visitor details ( IP Address, Input Value, Visitor Agent etc)! Those values will be stored in some database and you can retrieve the same using some simple php code and even deleted some
rows from those databases!

Requirements:

• Some Basic knowledge in in Php
• Some Basic knowledge in in Ajax
• Some Basic knowledge in in SQL

If you don't have these requirements, then don't worry!! Have a look at those cool articles! ( Click on those above links)
You can learn the basics in some minutes ( Yes.. Its true)

So Shall we start??

Stage 1: Create Database Table

Ok, First we have to analyze the requirements, we have to store the Input value, Ip address, visitor agent and timestamp in database! Remember, we need to create some Index field for the database

So, Im creating 5 fields, slno, test, ipaddr, agent, timer!
here is the SQL statement to run!
Im going to name the table as ajax





Stage 2: Design Main Interface Page
Now we are going to design one User interface, where we need to show one textbox and one button!
Clicking that button, should send the values to the database in the background!



The main interface is over! Now we have to create the Ajax script to send the values to some script file using that we have to store the values in the database!

Usually, Ajax script will have the same format only, we need to change some little attributes only!

The following is the General format for Ajax!

Thanks to w3schools: http://www.w3schools.com/ajax/ajax_browsers.asp

Im going to modify this script and the modified one will be like this!



var word = document.getElementById('test').value;
var queryString = "?word=" + word;
ajaxRequest.open("GET", "php_ajax_input_script.php" + queryString, true);
ajaxRequest.send(null);
//alert(queryString);


Please have a look at those in red color!!
Im getting the value from that textbox named "test" and storing that in variable "word"
Then we have to pass the value in query string!
So we are attaching that to query string by assigning the value to "word"
And we are calling one new script file, where it will get values from the query string and store it to database!
If you need to check whether the script is called or not, we can display the value in some alert box!
We are going to call this on button click like this:

<input class="button" onClick="ajaxFunction();" value="Enter" type="button">

So, the final main page will look like this!




Stage 3: Create Script File to pass the values to database

We can get visitor IP address by this and storing that to variable:$ClientIP


if (isset($_SERVER['HTTP_X_FORWARDED_FOR'])) {
$ClientIP = $_SERVER['HTTP_X_FORWARDED_FOR'];
} else {
$ClientIP = $_SERVER['REMOTE_ADDR'];
}

We can get hostname also using php script! But here we are not going to get at this time, because it will slow down the process, and also will waste one database field! We can get it later while displaying the values!

Next we have to get visitor agent! For that we can use like this:

$ClientAgent = $_SERVER['HTTP_USER_AGENT'];

We can get current time stamp using this:

$MyTimeStamp = time();

And get the field value from the url ( Query String)

$word = $_GET['word'];

Now we can insert those values to the database by using this query:

$query = "INSERT INTO ajax(ipaddr, agent, test, timer) VALUES('$ClientIP', '$ClientAgent', '$word','$MyTimeStamp')";

So final page will look like this:



Now, If you enter some values in the input field and click that enter button, the value will be send to the background script file using query string and the script will get values from that query string and store that values in the database along with ipaddr, visitor agent and timestamp!

You can try this script here:

Fun.niranvv.com/test/php_ajax_input.php

Enter some values there in that page and it will call script here:

Fun.niranvv.com/test/php_ajax_input_script.php

You can check the database values here:

Fun.niranvv.com/test/php_ajax_output.php

You can even delete values from those databases!!
Feel free to play with those pages! You can delete those values from database!
Im using one separate demo database for this tutorial!
So no issues with playing with those pages and live databaases!

:: Part 1 Over ::


Part 2: Updating one status message on the main page after running the script successfully
( Part 2: Over :: Check it here)
Part 3: Displaying the values from the database using php and deleting those values by checking the checkboxes as displayed here:
Fun.niranvv.com/test/php_ajax_output.php
Part 4: Integrating Part 2 and Part 3 to display the updated table in the same page itself!!
( Part 3 and Part 4 are integrated here



Love,
Niru

This post has been edited by Niru: Apr 15 2007, 09:55 AM

hi Niru this is really very great.

I really wanted to learn AJAX and now your tutorial has helped me to understand it better. Hope to learn more from you.

Hi Niru, excellent tutorial, simple, direct and easy to follow, for a while i'm learning this to apply in a new project that i'm just developing, congratulations and i hope that you can publish shortly the nexts parts.

Best regards,

So , now we can move to the next section!!

Part 2: Displaying updated status message on the main page!

So, what we are going to do is, we have to display one status message on the main page after calling the background script file and after the successful insertion of values to the database!

Phase 1:

I'm going to show the values inserting to database one one new div!

So, Insert one DIV in main page and give some unique ID to that div! Im giving 'ajaxDiv' as the ID for the DIV!!

<div id='ajaxDiv'>Its Div Named "ajaxDiv". Your result will display here.....</div>


Phase 2:

Now we have to edit the background script file to echo some status message in the response over successful insertion of the values to database!

I'm editing the execute query function and inserting one more line to display the values like this:

if ($word != "")
{
$qry_result = mysql_query($query) or die(mysql_error());
echo "Updated Successfully with values IP :$ClientIP<br>Visitor Agent: $ClientAgent<br>Input Word: $word<br>Current Time Stamp: $MyTimeStamp";
}
else
{
echo '<b>Hacking Attempt!!</b>';
}

Thats over in the background script path!!
This will return the values while calling the script in the background!

Phase 3:

Now we have to write the values to the new div named "ajaxDiv" which is already created in the phase 1 in this Part 2
We can assign values to the div by using "
DivID.innerHTML = some value

We can get the string value from the response by using this function:
Request.responseText

So, we are going insert one function in the javascript path like this:

// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}

Now the modifications are over!

So the final page will be like this:

Main interface (php_ajax_input.php)


Background script file (php_ajax_input_script.php)


Check the updated page here:
Fun.niranvv.com/test/php_ajax_input.php

..:: Part 2 Over ::..

Part 3 ( Coming Next ): Displaying the values from the database using php and deleting those values by checking the checkboxes as displayed here: Fun.niranvv.com/test/php_ajax_output.php

Update: Part 3 and Part 4 are integrated here:
Ajax+php+sql=simply Superb!(with Visitor Tracking) :: Section 2 (retrive Values From Database And Dynamic Update!)

This post has been edited by Niru: Apr 20 2007, 07:17 AM

"visitar tracking" concept was very useful for learning ajax and how to use ajax.thanking you....

-arasapandy

Nice tutorial!

I have a question, is it possible to store the retrieved results by Ajax in JavaScript variables instead of writing the results in a div html label??

I want to do this because I want to retrieve some data that would be used by some JavaScript functions that are already included in the page.

All the updates work fine....

Best regards,

Superb ....

I haven't read the whole tutorial (I don't have much time due to exams ), but I'm going to try this one out when I have some spare time to do some programming (probably not until february ). Looks to be a great tutorial (just the way I like them).

@musthafa: don't forget to read theb board rules . Post that only contain 'great', 'super', ... and other 'useless' (they don't have an added value for the post) remarks can be tagged as spam and you'll lose credits for that.

This post has been edited by wutske: Dec 28 2007, 01:06 PM

Nice tutorial, I've always wondered on how ajax works, and was confused when reading other tutorials, you've really explained this good, hopefully I'll be able to add another programming language to the list of ones that I know!