Novotel Infoplus: September 2012

AJAX Database table Display

Other web application transmit information to and from the sever using synchronous requests. This means you fill out a form, hit submit, and get directed to a new page with new information from the server.With AJAX when submit is pressed, JavaScript will make a request to the server, interpret the results and update the current screen. the user would never know that anything was even transmitted to the server.

For the purpose of this tutorial,I have created database called "oops" and then created the following table name "user".

CREATE TABLE IF NOT EXISTS `user` (
`id` int(30) NOT NULL AUTO_INCREMENT,
`FirstName` varchar(50) NOT NULL,
`Surname` varchar(50) NOT NULL,
`Age` varchar(50) NOT NULL,
`Country` varchar(50) NOT NULL,
`Job` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Dumping data for table `user`
--

INSERT INTO `user` (`id`, `FirstName`, `Surname`, `Age`, `Country`, `Job`) VALUES
(1, 'Oksana', 'Babiak', '22', 'Ukrane', 'Web Developer'),
(2, 'Larisa', 'Volk', '30', 'Ukrane', 'Web Designer'),
(3, 'Ruth', 'Allen', '39', 'USA', 'Teacher'),
(4, 'Lissa', 'Diction', '31', 'Australia', 'Programmer');

Next create the HTML file which contains AJAX code

<html>
<head>
<script type="text/javascript">
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","user.php?id="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<center><form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Oksana Babiak</option>
<option value="2">Larisa Volk</option>
<option value="3">Ruth Allen</option>
<option value="4">Lizza Dicton</option>
</select>
</form>
<br />
<div id="txtHint"><b>Person details will be listed here.</b></div></center>

</body>
</html>

Next create user.php which take data from MySQL table "user".

<?php
$id=$_GET["id"];

$con = mysql_connect('localhost', 'root', '');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}

mysql_select_db("oops", $con);

$sql="SELECT * FROM user WHERE id = '".$id."'";

$result = mysql_query($sql);

echo "<table bgcolor=#b2bdaf>
<tr bgcolor=#ffffff>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";

while($row = mysql_fetch_array($result))
{
echo "<tr bgcolor=#ffffff>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['Surname'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Country'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";

mysql_close($con);
?>

Above codes will be created following smooth application

Person details will be listed here.

Firstname	Lastname	Age	Hometown	Job
Oksana	Babiak	22	Ukrane	Web Developer

AJAX Change Text

AJAX is Asynchronous JavaScript and XML.If you have basic knowledge in Java Scripts and XML is enough for this lesson series. AJAX allows web pages to be updated by exchanging small amounts of data with the servers that it is possible to update parts of a web page, without reloading the whole page.

Importance of AJAX learning:-There are some instances like search auto suggestion we can not do without AJAX along with PHP JS or XML.Example of AJAX usage are Google Maps, Gmail, Youtube, and Facebook tabs.

I am not going to teach you all aspect of AJAX but i will try to present you most important usage example of AJAX

First Create following text file

Then create Following AJAX Script and save file in your root as html file and find the result

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
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("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","text.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>AJAX change this text Click The Button Bellow</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

Sunday, September 9, 2012

AJAX Database table Display

Saturday, September 8, 2012

AJAX Change Text