Thursday, 14 January 2016

Search using Ajax

Hi All,
Searching using Ajax is very important when we need to show the result in the same page without refreshing it.
It is composed of 2 steps

Step 1: Design the search page with Ajax function. Save this file as searchform.php

<html>
<head>
<script>
function loadDoc() {
//alert('HUP');
     var key=document.frmsearch.sname.value;
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
             document.getElementById("demo").innerHTML = xhttp.responseText;
        }
  };
  xhttp.open("GET", "searchstud.php?key="+key, true);
  xhttp.send();
}
</script>


</head>
<body >
<form name=frmsearch  method=post>
<center>Name <input type=text name=sname onkeyup="loadDoc()"><input type=button value='Search Student'onclick="loadDoc()">
</center>
</form>
<div id="demo" align=center><h2>Search Result</h2></div>
</body>
</html>

Step2. PHP code to search in the database based on the Name field in Student table. Save this file as searchstud.php

<?php
$con=mysql_connect("localhost","root","");
mysql_select_db("SNIT",$con);
$sname=$_GET['key'];

$sql="Select * from student where name like '%$sname%'";



$data=mysql_query($sql,$con);
echo "<table border=1 align=center width=50%>";
echo "<tr><th>Name</th><th>Roll No</th><th>Marks</th></tr>";
while($row=mysql_fetch_array($data))
{
$name=$row['name'];
$rollno=$row['rollno'];
$marks=$row['marks'];

echo "<tr><td>$name</td><td>$rollno</td><td>$marks</td></tr>";

}

mysql_close($con);

?>

Working of this program

Here when we type in the textbox the 'onkeyup' event of textbox triggers the Ajax function 'loadDoc' which in turn make an http connection with the searching php program 'searchstud.php'.
The result generated by the php program will be send back to the searchform.php and updated in the area specified by the <div> tag in the same page. 










Wednesday, 13 January 2016

Searching using Form

Hi All,

Searching is most important in any student project.

This requires 5 important steps. [You can skip step 1,2 and 3 if you already have Database, table and data ]

1. Create Database - SNIT

Query : CREATE DATABASE SNIT

2. Create Table - student

Query : CREATE TABLE student(name TEXT(20),rollno int(3),marks int(3))

3. Insert few records in the table

Query : INSERT INTO `SNIT`.`student` (`name`, `rollno`, `marks`) VALUES ('Raju', '18', '90'), ('Babu', '9', '81')

4. Design Search form - save it as searchform.html

<html>
<body>
<form name=frmsearch action=searchstud.php method=post>
Name <input type=text name=sname><input type=submit value='Search Student'>
</form>
</body>
</html>

5. Write PHP program to search and display records. - save it as searchstud.php

<?php
$con=mysql_connect("localhost","root","");
mysql_select_db("SNIT",$con);
$sname=$_POST['sname'];
$sql="Select * from student where name like '%$sname%'";

echo $sql;

$data=mysql_query($sql,$con);
echo "<table border=1 align=center width=50%>";
echo "<tr><th>Name</th><th>Roll No</th><th>Marks</th></tr>";
while($row=mysql_fetch_array($data))
{
$name=$row['name'];
$rollno=$row['rollno'];
$marks=$row['marks'];

echo "<tr><td>$name</td><td>$rollno</td><td>$marks</td></tr>";

}

mysql_close($con);

?>

NB: Also try the same code with other table containing more fields

All the best.