22 September 2017

Create a Search Engine Using PHP, jQuery And MySQL

Create a Search Engine Using PHP, jQuery And MySQL

To Create Search Engine It Takes Only Three Steps:-
  1. Make a HTML file and define markup and scripting
  2. Make a PHP file to fetch and send results from database
  3. Make a CSS file and define styling


Step 1.Make a HTML file and define markup and scripting
We make a HTML file and save it with a name search.html
<html>
<head>
<link type="text/css" rel="stylesheet" href="search_style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function do_search()
{
 var search_term=$("#search_term").val();
 $.ajax
 ({
  type:'post',
  url:'get_results.php',
  data:{
   search:"search",
   search_term:search_term
  },
  success:function(response) 
  {
   document.getElementById("result_div").innerHTML=response;
  }
 });
 
 return false;
}
</script>
</head>
<body>
<div id="wrapper">

<div id="search_box">
 <form method="post"action="get_results.php" onsubmit="return do_search();">
  <input type="text" id="search_term" name="search_term" placeholder="Enter Search" onkeyup="do_search();">
  <input type="submit" name="search" value="SEARCH">
 </form>
</div>

<div id="result_div"></div>

</div>
</body>
</html>

In this step we create a form to enter word to search we attach onkeyup event in textbox which calls do_search() function to get results because we want to get results while pressing key, we give both options to user he will get results by typing a word or by clicking on search button.We create a do_search() function which do an ajax call to 'get_results.php' page and get the search results and display in 'result_div'.You may also like highlight words on search using JavaScript.


Step 2.Make a PHP file to fetch and send results from database
We make a PHP file and save it with a name get_results.php
// Database Structure 
CREATE TABLE `search` (
 `title` text NOT NULL,
 `description` text NOT NULL,
 `link` text NOT NULL,
 FULLTEXT KEY ('title','description')
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1

<?php
if(isset($_POST['search']))
{
 $host="localhost";
 $username="root";
 $password="";
 $databasename="sample";
 $connect=mysql_connect($host,$username,$password);
 $db=mysql_select_db($databasename);

 $search_val=$_POST['search_term'];
 
 $get_result = mysql_query("select * from search where MATCH(title,description) AGAINST('$search_val')");
 while($row=mysql_fetch_array($get_result))
 {
  echo "<li><a href='http://talkerscode.com/webtricks/".$row['link']."'><span class='title'>".$row['title']."</span><br><span class='desc'>".$row['description']."</span></a></li>";
 }
 exit();
}
?>

In this step we create a database table called 'search' and enter some sample webpage details like title, description and link and we add fulltext key to title and description column because we only search in title and description text to find results.Then we get the search term and create a mysql query to get results we use fulltext searching to search in database.You can view our jQuery form validation tutorial to validate form.


Step 3.Make a CSS file and define styling
We make a CSS file and save it with a name search_style.css
body
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:100%;
 font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
 background-color:#F2F2F2;
}
#wrapper
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:995px;
}
#wrapper h1
{
 margin-top:50px;
 font-size:45px;
 color:#585858;
}
#wrapper h1 p
{
 font-size:18px;
}
#search_box input[type="text"]
{
 width:450px;
 height:45px;
 padding-left:10px;
 font-size:18px; 
 margin-bottom:15px;
 color:#424242;
 border:none;
}
#search_box input[type="submit"]
{
 width:100px;
 height:45px;
 background-color:#585858;
 color:white;
 border:none;
}
#result_div
{
 width:555px; 
 margin-left:220px;
}
#result_div li
{ 
 margin-bottom:20px;
 list-style-type:none;
}
#result_div li a
{
 text-decoration:none;
 display:block;
 text-align:left;
}
#result_div li a .title
{
 font-weight:bold;
 font-size:18px;
 color:#5882FA;
}
#result_div li a .desc
{
 color:#6E6E6E;
}

That's all, this is how to create your own search engine using using PHP, jQuery and MySQL. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Start typing and press Enter to search