Learning PHP(credit to w3 School) – PHP and AJAX Collection-1


Have a Happy Learning PHP to all !!!!!!!!!!

today Guys I extracted data From :

Big Credit to W3 School For the Resources!!!!

Enjoy Reading this article, Learning Php Programming.I  extracted all this data, for all who does’nt wants  always to hook into internet connection, or either seldom to connect due to very poor connection. Maybe for some reason tired of online always, Especially to those who owns a tablet or maybe smartphones. Great to share this to y’all. For easy reading eventhought without internet connection you can read this article already. All you have to do is install Evernote onto your devices,laptops, PC desk, tablets, smartphones.. To download Evernote

EverNote Download – here’s the link :Source 1

But for those who got a very strong connection and rather read online here’s the link in w3 School: Click the Logo to jump into the Site:

AJAX Introduction

AJAX is about updating parts of a web page, without reloading the whole page.


What is AJAX?

AJAX = Asynchronous JavaScript and XML.

AJAX is a technique for creating fast and dynamic web pages.

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.

Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.


How AJAX Works

AJAX


AJAX is Based on Internet Standards

AJAX is based on internet standards, and uses a combination of:

  • XMLHttpRequest object (to exchange data asynchronously with a server)
  • JavaScript/DOM (to display/interact with the information)
  • CSS (to style the data)
  • XML (often used as the format for transferring data)

lamp  AJAX applications are browser- and platform-independent!


Google Suggest

AJAX was made popular in 2005 by Google, with Google Suggest.

Google Suggest is using AJAX to create a very dynamic web interface: When you start typing in Google’s search box, a JavaScript sends the letters off to a server and the server returns a list of suggestions.


Start Using AJAX Today

In our PHP tutorial, we will demonstrate how AJAX can update parts of a web page, without reloading the whole page. The server script will be written in PHP.

If you want to learn more about AJAX, visit our AJAX tutorial.

PHP – AJAX and PHP

AJAX is used to create more interactive applications.


AJAX PHP Example

The following example will demonstrate how a web page can communicate with a web server while a user type characters in an input field:

Example

Start typing a name in the input field below:

First name:Suggestions:


Example Explained – The HTML Page

When a user types a character in the input field above, the function “showHint()” is executed. The function is triggered by the “onkeyup” event:

<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
{
document.getElementById(“txtHint”).innerHTML=””;
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“txtHint”).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,”gethint.php?q=”+str,true);
xmlhttp.send();
}
</script>
</head>
<body><p><b>Start typing a name in the input field below:</b></p>
<form>
First name: <input type=”text” onkeyup=”showHint(this.value)”>
</form>
<p>Suggestions: <span id=”txtHint”></span></p></body>
</html>

Source code explanation:

If the input field is empty (str.length==0), the function clears the content of the txtHint placeholder and exits the function.

If the input field is not empty, the showHint() function executes the following:

  • Create an XMLHttpRequest object
  • Create the function to be executed when the server response is ready
  • Send the request off to a file on the server
  • Notice that a parameter (q) is added to the URL (with the content of the input field)

The PHP File

The page on the server called by the JavaScript above is a PHP file called “gethint.php”.

The source code in “gethint.php” checks an array of names, and returns the corresponding name(s) to the browser:

<?php
// Fill up array with names
$a[]=”Anna”;
$a[]=”Brittany”;
$a[]=”Cinderella”;
$a[]=”Diana”;
$a[]=”Eva”;
$a[]=”Fiona”;
$a[]=”Gunda”;
$a[]=”Hege”;
$a[]=”Inga”;
$a[]=”Johanna”;
$a[]=”Kitty”;
$a[]=”Linda”;
$a[]=”Nina”;
$a[]=”Ophelia”;
$a[]=”Petunia”;
$a[]=”Amanda”;
$a[]=”Raquel”;
$a[]=”Cindy”;
$a[]=”Doris”;
$a[]=”Eve”;
$a[]=”Evita”;
$a[]=”Sunniva”;
$a[]=”Tove”;
$a[]=”Unni”;
$a[]=”Violet”;
$a[]=”Liza”;
$a[]=”Elizabeth”;
$a[]=”Ellen”;
$a[]=”Wenche”;
$a[]=”Vicky”;//get the q parameter from URL
$q=$_GET[“q”];//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint=””;
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint==””)
{
$hint=$a[$i];
}
else
{
$hint=$hint.” , “.$a[$i];
}
}
}
}

// Set output to “no suggestion” if no hint were found
// or to the correct values
if ($hint == “”)
{
$response=”no suggestion”;
}
else
{
$response=$hint;
}

//output the response
echo $response;
?>

Explanation: If there is any text sent from the JavaScript (strlen($q) > 0), the following happens:

  1. Find a name matching the characters sent from the JavaScript
  2. If no match were found, set the response string to “no suggestion”
  3. If one or more matching names were found, set the response string to all these names
  4. The response is sent to the “txtHint” placeholder

PHP – AJAX and MySQL

AJAX can be used for interactive communication with a database.


AJAX Database Example

The following example will demonstrate how a web page can fetch information from a database with AJAX:

Example

Person info will be listed here…

Example Explained – The MySQL Database

The database table we use in the example above looks like this:

id FirstName LastName Age Hometown Job
1 Peter Griffin 41 Quahog Brewery
2 Lois Griffin 40 Newport Piano Teacher
3 Joseph Swanson 39 Quahog Police Officer
4 Glenn Quagmire 41 Quahog Pilot

Example Explained – The HTML Page

When a user selects a user in the dropdown list above, a function called “showUser()” is executed. The function is triggered by the “onchange” event:

<html>
<head>
<script>
function showUser(str)
{
if (str==””)
{
document.getElementById(“txtHint”).innerHTML=””;
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“txtHint”).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,”getuser.php?q=”+str,true);
xmlhttp.send();
}
</script>
</head>
<body><form>
<select name=”users” onchange=”showUser(this.value)”>
<option value=””>Select a person:</option>
<option value=”1″>Peter Griffin</option>
<option value=”2″>Lois Griffin</option>
<option value=”3″>Glenn Quagmire</option>
<option value=”4″>Joseph Swanson</option>
</select>
</form>
<br>
<div id=”txtHint”><b>Person info will be listed here.</b></div></body>
</html>

The showUser() function does the following:

  • Check if a person is selected
  • Create an XMLHttpRequest object
  • Create the function to be executed when the server response is ready
  • Send the request off to a file on the server
  • Notice that a parameter (q) is added to the URL (with the content of the dropdown list)

The PHP File

The page on the server called by the JavaScript above is a PHP file called “getuser.php”.

The source code in “getuser.php” runs a query against a MySQL database, and returns the result in an HTML table:

<?php
$q=$_GET[“q”];$con = mysqli_connect(‘localhost’,’peter’,’abc123′,’my_db’);
if (!$con)
{
die(‘Could not connect: ‘ . mysqli_error($con));
}mysqli_select_db($con,”ajax_demo”);
$sql=”SELECT * FROM user WHERE id = ‘”.$q.”‘”;

$result = mysqli_query($con,$sql);

echo “<table border=’1’>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>”;

while($row = mysqli_fetch_array($result))
{
echo “<tr>”;
echo “<td>” . $row[‘FirstName’] . “</td>”;
echo “<td>” . $row[‘LastName’] . “</td>”;
echo “<td>” . $row[‘Age’] . “</td>”;
echo “<td>” . $row[‘Hometown’] . “</td>”;
echo “<td>” . $row[‘Job’] . “</td>”;
echo “</tr>”;
}
echo “</table>”;

mysqli_close($con);
?>

Explanation: When the query is sent from the JavaScript to the PHP file, the following happens:

  1. PHP opens a connection to a MySQL server
  2. The correct person is found
  3. An HTML table is created, filled with data, and sent back to the “txtHint” placeholder

PHP Example – AJAX and XML

AJAX can be used for interactive communication with an XML file.


AJAX XML Example

The following example will demonstrate how a web page can fetch information from an XML file with AJAX:

Example

CD info will be listed here…

Example Explained – The HTML Page

When a user selects a CD in the dropdown list above, a function called “showCD()” is executed. The function is triggered by the “onchange” event:

<html>
<head>
<script>
function showCD(str)
{
if (str==””)
{
document.getElementById(“txtHint”).innerHTML=””;
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“txtHint”).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,”getcd.php?q=”+str,true);
xmlhttp.send();
}
</script>
</head>
<body><form>
Select a CD:
<select name=”cds” onchange=”showCD(this.value)”>
<option value=””>Select a CD:</option>
<option value=”Bob Dylan”>Bob Dylan</option>
<option value=”Bonnie Tyler”>Bonnie Tyler</option>
<option value=”Dolly Parton”>Dolly Parton</option>
</select>
</form>
<div id=”txtHint”><b>CD info will be listed here…</b></div></body>
</html>

The showCD() function does the following:

  • Check if a CD is selected
  • Create an XMLHttpRequest object
  • Create the function to be executed when the server response is ready
  • Send the request off to a file on the server
  • Notice that a parameter (q) is added to the URL (with the content of the dropdown list)

The PHP File

The page on the server called by the JavaScript above is a PHP file called “getcd.php”.

The PHP script loads an XML document, “cd_catalog.xml“, runs a query against the XML file, and returns the result as HTML:

<?php
$q=$_GET[“q”];$xmlDoc = new DOMDocument();
$xmlDoc->load(“cd_catalog.xml”);$x=$xmlDoc->getElementsByTagName(‘ARTIST’);

for ($i=0; $i<=$x->length-1; $i++)
{
//Process only element nodes
if ($x->item($i)->nodeType==1)
{
if ($x->item($i)->childNodes->item(0)->nodeValue == $q)
{
$y=($x->item($i)->parentNode);
}
}
}

$cd=($y->childNodes);

for ($i=0;$i<$cd->length;$i++)
{
//Process only element nodes
if ($cd->item($i)->nodeType==1)
{
echo(“<b>” . $cd->item($i)->nodeName . “:</b> “);
echo($cd->item($i)->childNodes->item(0)->nodeValue);
echo(“<br>”);
}
}
?>

When the CD query is sent from the JavaScript to the PHP page, the following happens:

  1. PHP creates an XML DOM object
  2. Find all <artist> elements that matches the name sent from the JavaScript
  3. Output the album information (send to the “txtHint” placeholder)

PHP Example – AJAX Live Search

AJAX can be used to create more user-friendly and interactive searches.


AJAX Live Search

The following example will demonstrate a live search, where you get search results while you type.

Live search has many benefits compared to traditional searching:

  • Results are shown as you type
  • Results narrow as you continue typing
  • If results become too narrow, remove characters to see a broader result

Search for a W3Schools page in the input field below:

The results in the example above are found in an XML file (links.xml). To make this example small and simple, only six results are available.


Example Explained – The HTML Page

When a user types a character in the input field above, the function “showResult()” is executed. The function is triggered by the “onkeyup” event:

<html>
<head>
<script>
function showResult(str)
{
if (str.length==0)
{
document.getElementById(“livesearch”).innerHTML=””;
document.getElementById(“livesearch”).style.border=”0px”;
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“livesearch”).innerHTML=xmlhttp.responseText;
document.getElementById(“livesearch”).style.border=”1px solid #A5ACB2″;
}
}
xmlhttp.open(“GET”,”livesearch.php?q=”+str,true);
xmlhttp.send();
}
</script>
</head>
<body><form>
<input type=”text” size=”30″ onkeyup=”showResult(this.value)”>
<div id=”livesearch”></div>
</form></body>
</html>

Source code explanation:

If the input field is empty (str.length==0), the function clears the content of the livesearch placeholder and exits the function.

If the input field is not empty, the showResult() function executes the following:

  • Create an XMLHttpRequest object
  • Create the function to be executed when the server response is ready
  • Send the request off to a file on the server
  • Notice that a parameter (q) is added to the URL (with the content of the input field)

The PHP File

The page on the server called by the JavaScript above is a PHP file called “livesearch.php”.

The source code in “livesearch.php” searches an XML file for titles matching the search string and returns the result:

<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load(“links.xml”);$x=$xmlDoc->getElementsByTagName(‘link’);//get the q parameter from URL
$q=$_GET[“q”];

//lookup all links from the xml file if length of q>0
if (strlen($q)>0)
{
$hint=””;
for($i=0; $i<($x->length); $i++)
{
$y=$x->item($i)->getElementsByTagName(‘title’);
$z=$x->item($i)->getElementsByTagName(‘url’);
if ($y->item(0)->nodeType==1)
{
//find a link matching the search text
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
{
if ($hint==””)
{
$hint=”<a href='” .
$z->item(0)->childNodes->item(0)->nodeValue .
“‘ target=’_blank’>” .
$y->item(0)->childNodes->item(0)->nodeValue . “</a>”;
}
else
{
$hint=$hint . “<br /><a href='” .
$z->item(0)->childNodes->item(0)->nodeValue .
“‘ target=’_blank’>” .
$y->item(0)->childNodes->item(0)->nodeValue . “</a>”;
}
}
}
}
}

// Set output to “no suggestion” if no hint were found
// or to the correct values
if ($hint==””)
{
$response=”no suggestion”;
}
else
{
$response=$hint;
}

//output the response
echo $response;
?>

If there is any text sent from the JavaScript (strlen($q) > 0), the following happens:

  • Load an XML file into a new XML DOM object
  • Loop through all <title> elements to find matches from the text sent from the JavaScript
  • Sets the correct url and title in the “$response” variable. If more than one match is found, all matches are added to the variable
  • If no matches are found, the $response variable is set to “no suggestion”

PHP Example – AJAX RSS Reader

An RSS Reader is used to read RSS Feeds.


AJAX RSS Reader

The following example will demonstrate an RSS reader, where the RSS-feed is loaded into a webpage without reloading:

RSS-feed will be listed here…

Example Explained – The HTML Page

When a user selects an RSS-feed in the dropdown list above, a function called “showRSS()” is executed. The function is triggered by the “onchange” event:

<html>
<head>
<script>
function showRSS(str)
{
if (str.length==0)
{
document.getElementById(“rssOutput”).innerHTML=””;
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“rssOutput”).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,”getrss.php?q=”+str,true);
xmlhttp.send();
}
</script>
</head>
<body><form>
<select onchange=”showRSS(this.value)”>
<option value=””>Select an RSS-feed:</option>
<option value=”Google”>Google News</option>
<option value=”MSNBC”>MSNBC News</option>
</select>
</form>
<br>
<div id=”rssOutput”>RSS-feed will be listed here…</div>
</body>
</html>

The showRSS() function does the following:

  • Check if an RSS-feed is selected
  • Create an XMLHttpRequest object
  • Create the function to be executed when the server response is ready
  • Send the request off to a file on the server
  • Notice that a parameter (q) is added to the URL (with the content of the dropdown list)

The PHP File

The page on the server called by the JavaScript above is a PHP file called “getrss.php”:

<?php
//get the q parameter from URL
$q=$_GET[“q”];//find out which feed was selected
if($q==”Google”)
{
$xml=(“http://news.google.com/news?ned=us&topic=h&output=rss&#8221;);
}
elseif($q==”MSNBC”)
{
$xml=(“http://rss.msnbc.msn.com/id/3032091/device/rss/rss.xml&#8221;);
}$xmlDoc = new DOMDocument();
$xmlDoc->load($xml);

//get elements from “<channel>”
$channel=$xmlDoc->getElementsByTagName(‘channel’)->item(0);
$channel_title = $channel->getElementsByTagName(‘title’)
->item(0)->childNodes->item(0)->nodeValue;
$channel_link = $channel->getElementsByTagName(‘link’)
->item(0)->childNodes->item(0)->nodeValue;
$channel_desc = $channel->getElementsByTagName(‘description’)
->item(0)->childNodes->item(0)->nodeValue;

//output elements from “<channel>”
echo(“<p><a href='” . $channel_link
. “‘>” . $channel_title . “</a>”);
echo(“<br>”);
echo($channel_desc . “</p>”);

//get and output “<item>” elements
$x=$xmlDoc->getElementsByTagName(‘item’);
for ($i=0; $i<=2; $i++)
{
$item_title=$x->item($i)->getElementsByTagName(‘title’)
->item(0)->childNodes->item(0)->nodeValue;
$item_link=$x->item($i)->getElementsByTagName(‘link’)
->item(0)->childNodes->item(0)->nodeValue;
$item_desc=$x->item($i)->getElementsByTagName(‘description’)
->item(0)->childNodes->item(0)->nodeValue;

echo (“<p><a href='” . $item_link
. “‘>” . $item_title . “</a>”);
echo (“<br>”);
echo ($item_desc . “</p>”);
}
?>

When a request for an RSS feed is sent from the JavaScript, the following happens:

  • Check which feed was selected
  • Create a new XML DOM object
  • Load the RSS document in the xml variable
  • Extract and output elements from the channel element
  • Extract and output elements from the item elements

PHP Example – AJAX Poll

AJAX Poll

The following example will demonstrate a poll where the result is shown without reloading.

Do you like PHP and AJAX so far?

Yes:
No:


Example Explained – The HTML Page

When a user choose an option above, a function called “getVote()” is executed. The function is triggered by the “onclick” event:

<html>
<head>
<script>
function getVote(int)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“poll”).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,”poll_vote.php?vote=”+int,true);
xmlhttp.send();
}
</script>
</head>
<body><div id=”poll”>
<h3>Do you like PHP and AJAX so far?</h3>
<form>
Yes:
<input type=”radio” name=”vote” value=”0″ onclick=”getVote(this.value)”>
<br>No:
<input type=”radio” name=”vote” value=”1″ onclick=”getVote(this.value)”>
</form>
</div></body>
</html>

The getVote() function does the following:

  • Create an XMLHttpRequest object
  • Create the function to be executed when the server response is ready
  • Send the request off to a file on the server
  • Notice that a parameter (vote) is added to the URL (with the value of the yes or no option)

The PHP File

The page on the server called by the JavaScript above is a PHP file called “poll_vote.php”:

<?php
$vote = $_REQUEST[‘vote’];//get content of textfile
$filename = “poll_result.txt”;
$content = file($filename);//put content in array
$array = explode(“||”, $content[0]);
$yes = $array[0];
$no = $array[1];

if ($vote == 0)
{
$yes = $yes + 1;
}
if ($vote == 1)
{
$no = $no + 1;
}

//insert votes to txt file
$insertvote = $yes.”||”.$no;
$fp = fopen($filename,”w”);
fputs($fp,$insertvote);
fclose($fp);
?>

<h2>Result:</h2>
<table>
<tr>
<td>Yes:</td>
<td>
<img src=”poll.gif”
width='<?php echo(100*round($yes/($no+$yes),2)); ?>’
height=’20’>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<img src=”poll.gif”
width='<?php echo(100*round($no/($no+$yes),2)); ?>’
height=’20’>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>

The value is sent from the JavaScript, and the following happens:

  1. Get the content of the “poll_result.txt” file
  2. Put the content of the file in variables and add one to the selected variable
  3. Write the result to the “poll_result.txt” file
  4. Output a graphical representation of the poll result

The Text File

The text file (poll_result.txt) is where we store the data from the poll.

It is stored like this:

0||0

The first number represents the “Yes” votes, the second number represents the “No” votes.

Note: Remember to allow your web server to edit the text file. Do NOT give everyone access, just the web server (PHP).

Advertisements

One thought on “Learning PHP(credit to w3 School) – PHP and AJAX Collection-1

  1. Cool blog! Is your theme custom made or did you download it
    from somewhere? A design like yours with a few simple tweeks would
    really make my blog stand out. Please let me know where you
    got your theme. Cheers

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s