Create Your Own Search Engine Using PHP, jQuery And MySQL

Tuesday, Jan 24, 2017

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.You may also like create simple web crawler using PHP.


See Demo
Create Your Own 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.

Subscribe Our Newsletter And Get Tutorials
And Offers Via Email

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.