Do you want to create a local search engine which works like Google..?
In this post, we can learn how to do it in 20 minutes in 10 steps using PHP.
Step 1 - 7 : for Front - end Step 8 - 10 : for back - end
Step 1 : Download WAMP / XAMP (based on the operating system you use)
For Windows, 32 / 64 bit OS : Download from here.
Step 2 : Install WAMP / XAMP
For Windows, Run the downloaded .exe file and simply forward until installation finished.
Step 3 : Open the localhost & Phpmyadmin
Now, Open browser and test whether http://localhost is working or not.
It will list out the Apache webserver, PHP version as a sample page.
Similarly, test phpmyadmin as http://localhost/phpmyadmin/
It will show the databases and recent tables.
Step 4: Design the front-end Search page in HTMlL
Use any text-editor like Notepad or Notepad++ and type the basic HTML code.
save as : index.html in wamp installed location (Directory(c) :/wamp/www/index.html)
<html>
<head>
<title>Google Search</title>
<link rel="stylesheet" type=text/css" href="main.css">
</head>
<body>
<p>
<div class="topDiv">
<div style="float:left;padding-left:20px;padding-top:8px;"> <img src="google.png" height="50" width="100"> </div> <br>
<input type="text" id="go" class="field" name="go">
<input type="submit" name="search" id="submit" value="Google Search">
</div><br>
<div id="search_query"></div>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="instant.js"></script>
</body>
</html>
Note : Run the HTML page after completing all below steps .
Step 5 : Write code for instant.js
Type similar to index.html and save as instant.js
$('#go').keyup(function(){
var search_query=$(this).val();
$.post('search.php',{search_query : search_query},function(searchq) {
$('#search_query').html(searchq);
});
});
Step 6: Download the Jquery code from Official jquery.com Website
Official Site Download
If you face difficulties, Put instant message from our website form.We'll send via. email.
Step 7: Write the PHP code as below
Here,Database name : searchengine & Table name : search (in Database)
Type and save as "search.php" as you made & save in same location as above.
<?php mysql_connect("localhost","root",""); $testdb=mysql_select_db("searchengine"); if(isset($_POST['search_query'])){ $search_query=mysql_real_escape_string(htmlentities($_POST['search_query'])); echo "<div class=\"searchText\">Search</div><hr/>"; $search_query_x=explode(" ",$search_query); $query=""; foreach($search_query_x as $search_each){ if($search_query_x) $query.="keywords LIKE '%$search_each%'"; else $query.="AND keywords LIKE '%$search_each%'"; } $query="SELECT * FROM search WHERE $query"; $run=mysql_query($query); $nr=mysql_num_rows($run); if($nr==0){ echo "Sorry, there are no matching result for <b>$search_query</b><br> 1.Try more general words.<br> 2.Try different words with similar meaning.<br> 3.Please check your spelling.<br>"; } else { echo "$nr results found !<p>"; while($rr=mysql_fetch_assoc($run)) { $title=$rr['title']; $desc=$rr['desc']; $url=$rr['url']; echo" <div class='width: 400px;'> <div class='title'><a href='$url'><b>$title</b></a></div> <div class='desc'>$desc</div> <div class='url'>$url</div> </div><br> "; } } } ?>
That's great. You finsihed configuring on front-end.
Step 8 : Creating database,table & configuring the table structure
Now , go to http://localhost/phpmyadmin
i) Create new database
Select databases - > Create database -> give name as " searchengine" -> click "Create".
ii) create a table
Now select searchengine database from left side links.
In the foll. Page, Type table name as " search ", number of columns - based on your requirement (sample like 4)
Now, it will ask for Name, Type, Length / Values , Default etc.,
In Name column, include the following : id, title, desc, keywords, url
In Type column, specify int for id & text for others.
Other things no change.
Press Go.
iii) Adding the values to table rows.
At this stage, your table has a structure.
Click Browse on the table header.
Enter the values like Flipkart,Sanpdeal.
Complete all entries & press Go.
That's it. configuartion is done.
Step 9 : Matching front - end & Back -end assigned values.
Step 10 : In Database, The configuration will be made as below
Finally. Run the index.html file, which shows instant results on typing as in Google Search Page,
That's sounds great..The local search engine is ready. In the same way, can extend for different applications. Good luck.
If you have any queries, drop a message in the Instant Contact Form in the right corner of the webpage.
0 comments:
Post a Comment