Create Your Own Search Engine Using PHP, jQuery And MySQL

Datetime:2016-08-23 02:22:40          Topic: PHP  MySQL  jQuery           Share

Tags:-PHP jQuery Ajax MySQL

Everybody knows google its a search engine it lets people to search anything they wants to know without search engine we don't imagine internet will survive.Search Engine working is simple user type a word in search box and they get results from search engine database which is stored by there search crawler which is used to gathered webpage details like title, description, link etc.So, in this tutorial we will show you how to create a simple search engine using PHP, jQuery and MySQL.

See Demo

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'.

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.

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.





About List