Description
A developer's journey through code. I build, I break, and I write about it. Explore articles on modern software development, programming tips, and more.
How to implement a functional search bar using PHP
Published in: 2025-01-09 14:13:46 Author: SunshineIHCTS Section: PHP and MySQL
In this article, we will explore how to implement a basic yet effective search bar functionality within a PHP application. I will focus on a scenario where we have a list of blog posts retrieved from a database and want to enable users to quickly find specific posts based on their search queries.
1. Initial Setup (index.php)
HTML Structure:
-
Create a simple HTML form with an input field for the search query and a submit button.
-
Include the necessary CSS for styling the search bar and the list of blog posts.
PHP Code:
-
Connect to your database (in this case, 'implement_database').
-
Fetch all blog posts from the 'blog' table using a SQL query.
-
Display the fetched blog posts.
In my case I have created a php file (index.php) where I have my HTML, CSS and PHP codes as I explained above, in my code I have displayed a list of blog posts in the database implement_search from table blog. I have provided the source code below:
<!-- CODE BY SUNSHINEIHCTS || VISIT SUNSHINEIHCTS.ME FOR MORE -->
<?php
$host = "localhost";
$database = ""; //put your database name
$user = ""; //put your database user
$password = ""; //put your database password
/* connect to database */
$connection = mysqli_connect($host, $user, $password, $database) or die("Error loading web pages, failed to connect to database");
?>
<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
<style>
body {
font-family: sans-serif;
margin: 0;
}
.container {
width: 90%;
max-width: 960px;
margin: 0 auto;
}
.search-container {
display: flex;
align-items: center;
border: 1px solid #000; /* Black border */
border-radius: 5px;
padding: 5px;
width: 30%;
margin: 10px;
}
.search-input {
border: none;
outline: none;
padding: 5px;
font-size: 16px;
flex-grow: 1;
}
.search-button {
background-color: #000; /* Black button */
color: #fff; /* White text */
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
.blog-post {
display: inline-block;
width: 30%;
margin: 1%;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
vertical-align: top;
}
.blog-post img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
.blog-post h2 {
margin: 0 0 10px;
}
.blog-post p {
margin: 0;
font-size: 14px;
color: #666;
}
</style>
</head>
<body>
<div class="container">
<h1>My Blog Posts</h1>
<div class="search-container">
<form action="search.php" method="post">
<input type="text" name="search" class="search-input" placeholder="Search here...">
<button type="submit" class="search-button">Search</button>
</form>
</div>
<div class="row">
<?php
$sql = "SELECT * FROM blog ORDER BY id DESC";
$query = mysqli_query($connection, $sql);
while($result = mysqli_fetch_assoc($query)) {
?>
<div class="blog-post">
<img src="<?php echo $result['image'] ?>" alt="Thumbnail">
<h2><?php echo $result['title'] ?></h2>
<p><?php echo $result['description'] ?></p>
</div>
<?php
}
?>
</div>
</div>
</body>
</html>
2. Implementing Search Functionality (search.php)
Retrieve Search Term:
-
Get the search term submitted from the form using $_POST['search']
Construct Search Query:
-
Create a SQL query using the LIKE operator to search for the term within the 'title' column of the 'blog' table.
Execute Query and Display Results:
-
Execute the search query and fetch the results.
-
Display the search results in an HTML list.
-
If no results are found, display an appropriate message (e.g., "No results found.").
In my case I simply made a dublicate of the index.php and renamed it search.php because of the form action"search.php" then I made the necessary changes to the search.php following the steps I provided above. I will also share the code below:
<!-- CODE BY SUNSHINEIHCTS || VISIT SUNSHINEIHCTS.ME FOR MORE -->
<?php
$host = "localhost";
$database = "implement_search";
$user = "root";
$password = "";
/* connect to database */
$connection = mysqli_connect($host, $user, $password, $database) or die("Error loading web pages, failed to connect to database");
?>
<!DOCTYPE html>
<html>
<head>
<title>Search results</title>
<style>
body {
font-family: sans-serif;
margin: 0;
}
.container {
width: 90%;
max-width: 960px;
margin: 0 auto;
}
.search-container {
display: flex;
align-items: center;
border: 1px solid #000; /* Black border */
border-radius: 5px;
padding: 5px;
width: 30%;
margin: 10px;
}
.search-input {
border: none;
outline: none;
padding: 5px;
font-size: 16px;
flex-grow: 1;
}
.search-button {
background-color: #000; /* Black button */
color: #fff; /* White text */
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
.blog-post {
display: inline-block;
width: 30%;
margin: 1%;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
vertical-align: top;
}
.blog-post img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
.blog-post h2 {
margin: 0 0 10px;
}
.blog-post p {
margin: 0;
font-size: 14px;
color: #666;
}
</style>
</head>
<body>
<div class="container">
<h1>My Blog Posts</h1>
<div class="search-container">
<form action="#" method="post">
<input type="text" class="search-input" placeholder="Search here...">
<button type="submit" class="search-button">Search</button>
</form>
</div>
<?php
//check if form is submitted
if(isset($_POST["search"])) {
$search = $_POST["search"];
}
//check for available results
$term = $search;
$content_search = "SELECT * FROM blog WHERE title LIKE '%$term%' ORDER BY id DESC";
$query_content_search = mysqli_query($connection, $content_search);
$result_content_search = mysqli_fetch_assoc($query_content_search);
if (empty($result_content_search)) {
echo "<p style='color: red; font-size: 30px;'>No result found, try another search term!<p>";
} else{
?>
<div class="row">
<?php
$sql = "SELECT * FROM blog WHERE title LIKE '%$term%' ORDER BY id DESC";
$query = mysqli_query($connection, $sql);
while($result = mysqli_fetch_assoc($query)) {
?>
<div class="blog-post">
<img src="<?php echo $result['image'] ?>" alt="Thumbnail">
<h2><?php echo $result['title'] ?></h2>
<p><?php echo $result['description'] ?></p>
</div>
<?php
}
?>
</div>
<?php
}
?>
</div>
</body>
</html>
You may like:
Copyright © 2018 - 2026 SunshineIHCTS | All rights reserved. Powered by 
Comments section
You need to be logged in to comment, Login or Register.Approved comments:
No comments yet! be the first to comment