How to make Search box & filter data in HTML Table from Database in PHP MySQL
By Super Admin |
May 21, 2021 |
PHP
How to search/retrieve data from database using php mysql
How to make Search box & filter data in HTML Table from Database in PHP MySQL
In this post, you will be learn how to make a search box in php and filter data in html table from database using php mysql.
so, we are filtering the data of user from database in php mysql by making a search box in html.
We are using Bootstrap v5 to design the user interface.
So, Lets get started to fetch data from database in php mysql:
Note: For better and detailed understanding. please watch out the Video above.
Step 1: Create table named users as shown below and filter or search the data of users.
CREATE TABLE `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`firstname` varchar(191) NOT NULL,
`lastname` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
);
Step 2: Create index.php file and paste the below code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Funda Of Web IT</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card mt-4">
<div class="card-header">
<h4>How to make Search box & filter data in HTML Table from Database in PHP MySQL </h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-7">
<form action="" method="GET">
<div class="input-group mb-3">
<input type="text" name="search" required value="<?php if(isset($_GET['search'])){echo $_GET['search']; } ?>" class="form-control" placeholder="Search data">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="card mt-4">
<div class="card-body">
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<?php
$con = mysqli_connect("localhost","root","","phptutorials");
if(isset($_GET['search']))
{
$filtervalues = $_GET['search'];
$query = "SELECT * FROM users WHERE CONCAT(firstname,lastname,email) LIKE '%$filtervalues%' ";
$query_run = mysqli_query($con, $query);
if(mysqli_num_rows($query_run) > 0)
{
foreach($query_run as $items)
{
?>
<tr>
<td><?= $items['id']; ?></td>
<td><?= $items['firstname']; ?></td>
<td><?= $items['lastname']; ?></td>
<td><?= $items['email']; ?></td>
</tr>
<?php
}
}
else
{
?>
<tr>
<td colspan="4">No Record Found</td>
</tr>
<?php
}
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Thanks for reading...