Create Your Own Search Engine Using PHP, jQuery And MySQL

Last Updated : Jul 1, 2023

IN - PHP jQuery Ajax MySQL | Written & Updated By - Pragati

In this tutorial we will show you how to create a simple search engine using PHP, jQuery and 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.

You may also like create simple web crawler using PHP.

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Create Search Engine It Takes Only Three Steps:-

Make a HTML file and define markup and scripting
Make a PHP file to fetch and send results from database
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.

I hope this tutorial on search engine in php and mysql helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →

About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪