Mr. Bipin S. Rupadiya: PHP - Search records using AJAX and PDO

Part-5: Search records using AJAX and PDO in PHP

In part five, we do the search operation on our MySQL table. We use prepared statement to execute our query using PHP-PDO object. In SQL query we use like operator so it match record like the input we get from search.html file. To do the search object we use the AJAX technology to pass the request to search.php file. The file search.php is exactly similar to display.php file, just a where condition is added to do the search operation. If we do the smart work then one file display.php or search.php is enough to do both operation just an if condition is required that check the request parameter whether search criteria is provided or not? To keep it simple I have use to separate file that would be helpful to beginners.

In search operation we use two file

search.html and
search.php

for search.html, I am writing two code. One that does not use AJAX to make the simple search and Second then utilize the power of AJAX in search operation.

1. search.html

<!DOCTYPE html>
<html>
<body>
<form method="GET" action="search.php">
Name :<input type="text" name="txtName" required><br/>
<input type="submit" value="Search">
<input type="reset" value="Clear"><br/>
</form>
</body>
</html>

2. search-ajax.html

<html>
<head>
<script>
function doSearch(str)
{
if (str.length == 0)
{
document.getElementById("txtSearchResult").innerHTML = "";
return;
}
else
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("txtSearchResult").innerHTML = xmlhttp.responseText; }
}
xmlhttp.open("GET", "search.php?txtName=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<center>
<form>
Search Name: <input type="text" onkeyup="doSearch(this.value)">
</form>
<p>
<span id="txtSearchResult"></span>
</p>
</center>
</body>
</html>

3. search.php

<?php
require "conn.php";
try
{
$name="%".$_GET["txtName"]."%";
$stmt = $conn->prepare("SELECT id, name, email, phone FROM tbl where name LIKE ?");

$stmt->execute(array($name));

$result = $stmt->fetchAll();

if( ! $result)
{
print('No Records Found');
}
else
{
/*
$cc=$stmt->columnCount(); // count total number of columns
$rc=$stmt->rowCount(); // count total number of rows
echo "row count = $rc";
echo "Column count = $cc";
*/
echo "<table border='1' align='center' cellpadding='5px' cellspacing='2px'>";
//while($row = $stmt->fetch())
echo "<tr><th>Name</th><th>Email</th><th>Phone</th><th colspan='2'></th></tr>";
foreach($result as $row)
{
echo "<tr>";

echo "<td>";
echo $row['name'];
echo "</td>";
echo "<td>";
echo $row['email'];
echo "</td>";
echo "<td>";
echo $row['phone'];
echo "</td>";

echo "<td>";
$search_str=$row['id'];
echo "<a href='edit.php?id=$search_str'>Edit</a>";
echo "</td>";

echo "<td>";
$search_str=$row['id'];
echo "<a href='delete.php?id=$search_str'>Delete</a>";
echo "</td>";
echo "</tr>";

}
echo "</table>";
}
}
catch(PDOException $e)
{
echo "Error: " . $e->getMessage();
}
$conn = null;
echo "</table>";
?>

This example is divided in multiple part.

Part-1: Configure and Setup the MySQL database connection using PDO.
Part-2: Create a MySQL Database and a table using PDO.
Part-3: Insert record using prepared statement in PDO.
Part-4: Display Records using prepared statement.
Part-5: Search records using AJAX and PDO in PHP.
Part-6: Update Record using prepared statement in PDO.
Part-7: Delete Record using prepared statement in PDO.

Mr. Bipin S. Rupadiya

Pages

PHP - Search records using AJAX and PDO

Part-5: Search records using AJAX and PDO in PHP

1. search.html

2. search-ajax.html

3. search.php

This example is divided in multiple part.

5 comments: