How To Create new Search Engine like Google
Hi all
this tutorial will help you to create new custom search engine using like Google
There are many ways to create search engines first of all i am going to create search engine by using
the following technologies.
- PHP
- HTML
- CSS
- Bootstrap 4
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.
This is the New search engine i was created.
In order to Design this you need XAMP Server. You can download it from following link XAMPP
Download XAMPP according your system requirement.
next launch the server it will open window like below
You should start the Apache Server and MySQL database by just clicking on the start buttons.
after that open your browser type localhost in URL bar then you will see the PhpMyadmin you can Manage MySQL database by this way.
First create the PHP file named as search_insert.php
search_insert.php
<!DOCTYPE html>
<html>
<head>
<title> Our Search Engine </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
</head>
<body>
<div class="container">
<br>
<center> <h2> <b> Insert Website </b> </h2></center>
<br>
<form action="insert_site.php" method="post" enctype = "multipart/form-data">
<div class="form-group">
<div class="row">
<label class="col-sm-2" for="stitle"> SiteTitle </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="stitle" name="s_title" placeholder=" Enter site title" required>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-sm-2" for="slink"> Site Link </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="slink" name="s_link" placeholder=" Enter site link" required>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-sm-2" for="skey"> SiteKeywords </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="skey" name="s_key" placeholder=" Enter site keywords" required>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-sm-2" for="sdes"> SiteDescription </label>
<div class="col-sm-10">
<textarea class="form-control" id="sdes" name="s_des" placeholder=" Enter site Description" required>
</textarea>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-sm-2" for="simg"> SiteImage </label>
<div class="col-sm-10">
<input type="file" class ="form-control" name="simg" required>
</div>
</div>
<div class="form-group">
<div class="row">
<center>
<input type="submit" class="btn btn-outline-success" name="submit" value="Add Website">
<input type="reset" class="btn btn-outline-danger" name="cancel" value="Cancel">
</center>
</div>
<div>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>
<?php
mysql_connect("localhost", "root", "");
mysql_select_db("search");
if(isset($_POST["submit"]))
{
$s_title = addslashes($_POST["s_title"]);
$s_link = addslashes($_POST["s_link"]);
$s_key = addslashes($_POST["s_key"]);
$s_des = addslashes($_POST["s_des"]);
$_simg= addslashes($_FILES["simg"] ["name"]);
if(move_uploaded_file($_FILES["simg"] ["tmp_name"], "img/". $_FILES["simg"] ["name"]))
{
$sql = "insert into website(site_title, site_link, site_key, site_des, site_img) values('$s_title', '$s_link', '$s_key', '$s_des', '$_simg')";
$rs = mysql_query($sql);
if($rs)
{
echo "<script> alert('site uploaded successfully.') </script>";
}
else
{
echo "<script> alert('Uploading failed, please try again.') </script>";
}
}
}
?>
<html>
<head>
<title> Our Search Engine </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
</head>
<body>
<div class="container">
<br>
<center> <h2> <b> Insert Website </b> </h2></center>
<br>
<form action="insert_site.php" method="post" enctype = "multipart/form-data">
<div class="form-group">
<div class="row">
<label class="col-sm-2" for="stitle"> SiteTitle </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="stitle" name="s_title" placeholder=" Enter site title" required>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-sm-2" for="slink"> Site Link </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="slink" name="s_link" placeholder=" Enter site link" required>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-sm-2" for="skey"> SiteKeywords </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="skey" name="s_key" placeholder=" Enter site keywords" required>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-sm-2" for="sdes"> SiteDescription </label>
<div class="col-sm-10">
<textarea class="form-control" id="sdes" name="s_des" placeholder=" Enter site Description" required>
</textarea>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-sm-2" for="simg"> SiteImage </label>
<div class="col-sm-10">
<input type="file" class ="form-control" name="simg" required>
</div>
</div>
<div class="form-group">
<div class="row">
<center>
<input type="submit" class="btn btn-outline-success" name="submit" value="Add Website">
<input type="reset" class="btn btn-outline-danger" name="cancel" value="Cancel">
</center>
</div>
<div>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>
<?php
mysql_connect("localhost", "root", "");
mysql_select_db("search");
if(isset($_POST["submit"]))
{
$s_title = addslashes($_POST["s_title"]);
$s_link = addslashes($_POST["s_link"]);
$s_key = addslashes($_POST["s_key"]);
$s_des = addslashes($_POST["s_des"]);
$_simg= addslashes($_FILES["simg"] ["name"]);
if(move_uploaded_file($_FILES["simg"] ["tmp_name"], "img/". $_FILES["simg"] ["name"]))
{
$sql = "insert into website(site_title, site_link, site_key, site_des, site_img) values('$s_title', '$s_link', '$s_key', '$s_des', '$_simg')";
$rs = mysql_query($sql);
if($rs)
{
echo "<script> alert('site uploaded successfully.') </script>";
}
else
{
echo "<script> alert('Uploading failed, please try again.') </script>";
}
}
}
?>
I am going to write Search.php
<!DOCTYPE html>
<html>
<head>
<title> Our Search Engine </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
</head>
<body onload="ld()">
<script>
function ld()
{
document.search_box.search.focus();
}
</script>
<style>
body
{
margin: 12%;
}
</style>
<form name = "search_box" action = "result.php" method = "get">
<center>
<img src="img/Search.png" class="img-fluid" alt="Search">
<input type="text" class="form-control" name = "search" style="width:60%;margin-top:20px">
<input type = "submit" class="btn btn-outline-primary" value="Search Now" name="search_button" style="margin-top:20px">
</center>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>
<html>
<head>
<title> Our Search Engine </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
</head>
<body onload="ld()">
<script>
function ld()
{
document.search_box.search.focus();
}
</script>
<style>
body
{
margin: 12%;
}
</style>
<form name = "search_box" action = "result.php" method = "get">
<center>
<img src="img/Search.png" class="img-fluid" alt="Search">
<input type="text" class="form-control" name = "search" style="width:60%;margin-top:20px">
<input type = "submit" class="btn btn-outline-primary" value="Search Now" name="search_button" style="margin-top:20px">
</center>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>
Now create result.php
<!DOCTYPE html>
<html>
<head>
<title> Results Found </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<style>
.result
{
margin-left:10%; margin-right:25%; margin-top:12px;
}
</style>
</head>
<body>
<div class = "container-fluid">
<form action = "result.php" method = "get">
<div class="row" style="background:#f2f2f2">
<div class="col-sm-1">
<a href="search.php"><img src="img/Search.png" height="60px"></a>
</div>
<div class="col-sm-6" style="margin-left:15px">
<div class="input-group" style="margin-top:10px">
<input type="text" class="form-control" name="search">
<span class = "input-group-btn">
<input class = "btn btn-secondary" type = "submit" name="search_button" value="Go!">
</span>
</div>
</div>
</div>
</form>
</div>
<div class = "result">
<table>
<tr>
<?php
mysql_connect("localhost", "id359788_krishnakanth", "9603592104");
mysql_select_db("id359788_search");
if(isset($_GET["search_button"]))
{
$search = $_GET['search'];
if($search=="")
{
echo "<center> <b> Please write something in Search Box! </b> </center>";
exit();
}
$sql = "select * from website where site_key like'%$search%' limit 0, 5";
$rs = mysql_query($sql);
if(mysql_num_rows($rs)<1)
{
echo "<center> <h4> <b> Oops! Sorry, there is no result found to related the word. </b> </h4> </center>";
exit();
}
echo "<font size='+1' color='#1a1aff'> Images for $search </font>";
while($row = mysql_fetch_array($rs))
{
echo "<td>
<table style ='margin-top:10px'>
<tr>
<td>
<a target = '_blank'
href='images.php?id=$search'><img src ='img/$row[5]' height='100px'></a>
</td>
</tr>
</table>
</td>";
}
}
?>
</tr>
</table>
<?php
echo "<a target = '_blank' href='images.php?id=$search'><font size='+1' color='#1a1aff'> More Images for $search </font></a>";
echo "<hr>";
$sql1 = "select * from website where site_key like'%$search%' ";
$rs1 = mysql_query($sql1);
while($row1 = mysql_fetch_array($rs1))
{
echo "<a href='$row1[2]'<font size='4' color='#0000cc'> <b> $row1[1] </b> </font> </a> <br>";
echo "<font size='3' color='#009900'> $row1[2] </font> <br>";
echo "<font size='2' color='#666666'> $row1[4] </font> <br><br>";
}
?>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>
<html>
<head>
<title> Results Found </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<style>
.result
{
margin-left:10%; margin-right:25%; margin-top:12px;
}
</style>
</head>
<body>
<div class = "container-fluid">
<form action = "result.php" method = "get">
<div class="row" style="background:#f2f2f2">
<div class="col-sm-1">
<a href="search.php"><img src="img/Search.png" height="60px"></a>
</div>
<div class="col-sm-6" style="margin-left:15px">
<div class="input-group" style="margin-top:10px">
<input type="text" class="form-control" name="search">
<span class = "input-group-btn">
<input class = "btn btn-secondary" type = "submit" name="search_button" value="Go!">
</span>
</div>
</div>
</div>
</form>
</div>
<div class = "result">
<table>
<tr>
<?php
mysql_connect("localhost", "id359788_krishnakanth", "9603592104");
mysql_select_db("id359788_search");
if(isset($_GET["search_button"]))
{
$search = $_GET['search'];
if($search=="")
{
echo "<center> <b> Please write something in Search Box! </b> </center>";
exit();
}
$sql = "select * from website where site_key like'%$search%' limit 0, 5";
$rs = mysql_query($sql);
if(mysql_num_rows($rs)<1)
{
echo "<center> <h4> <b> Oops! Sorry, there is no result found to related the word. </b> </h4> </center>";
exit();
}
echo "<font size='+1' color='#1a1aff'> Images for $search </font>";
while($row = mysql_fetch_array($rs))
{
echo "<td>
<table style ='margin-top:10px'>
<tr>
<td>
<a target = '_blank'
href='images.php?id=$search'><img src ='img/$row[5]' height='100px'></a>
</td>
</tr>
</table>
</td>";
}
}
?>
</tr>
</table>
<?php
echo "<a target = '_blank' href='images.php?id=$search'><font size='+1' color='#1a1aff'> More Images for $search </font></a>";
echo "<hr>";
$sql1 = "select * from website where site_key like'%$search%' ";
$rs1 = mysql_query($sql1);
while($row1 = mysql_fetch_array($rs1))
{
echo "<a href='$row1[2]'<font size='4' color='#0000cc'> <b> $row1[1] </b> </font> </a> <br>";
echo "<font size='3' color='#009900'> $row1[2] </font> <br>";
echo "<font size='2' color='#666666'> $row1[4] </font> <br><br>";
}
?>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>
Now create images.php
<!DOCTYPE html>
<html>
<head>
<title> Results Found </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<style>
.result
{
margin-left:10%; margin-right:25%; margin-top:12px;
}
</style>
</head>
<body>
<div class="container-fluid">
<?php
$search = $_GET["id"];
mysql_connect("localhost", "id359788_krishnakanth", "9603592104");
mysql_select_db("id359788_search");
$sql = "select * from website where site_key like'%$search%' ";
$rs = mysql_query($sql);
while($row = mysql_fetch_array($rs))
{
echo "<a href='img/$row[5]' download><img src='img/$row[5]' height='200px' style='margin-top:'15px'></a> ";
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>
<html>
<head>
<title> Results Found </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<style>
.result
{
margin-left:10%; margin-right:25%; margin-top:12px;
}
</style>
</head>
<body>
<div class="container-fluid">
<?php
$search = $_GET["id"];
mysql_connect("localhost", "id359788_krishnakanth", "9603592104");
mysql_select_db("id359788_search");
$sql = "select * from website where site_key like'%$search%' ";
$rs = mysql_query($sql);
while($row = mysql_fetch_array($rs))
{
echo "<a href='img/$row[5]' download><img src='img/$row[5]' height='200px' style='margin-top:'15px'></a> ";
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>
After copying of all above PHP scripts place these files into follwing path
C:\xampp\htdocs\search_engine
in above search_engine is folder name create it whatever you want.
and you should create the two folder named as css, img same location
i am showing the location now
Now Lets create the database in PhpMyadmin
now create the table as website in search database
Now run the search_insert.php to insert the websites names ,link , keywords, site description, site images .
run to type this link in URL bar
http://localhost/search_engine/insert_site.php
then you will get the following page you can insert the details of site and click to add.
insert multiple websites for testing purpose
lets this time search the sites.
 | |||||||||||
| Search in search bar |
No comments:
Post a Comment