In this article, you going to see display store data in div using PHP. To do this we going to check every details step by step.
Let’s start with this topic step by step: (Display data Div)
It is similarly to retrieve data from phpMyadmin.
Or you can say that search and display data from database.
Actually you going to see in this fetch data from database in PHP using search button.
It is ajax in PHP using Jquery with example.
To do this functionality successfully first we have to create table in database.
You can using create statement SQL query.
CREATE TABLE `employ` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`phone` varchar(255) NOT NULL,
`created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=latin1;After executing this query a table is created name employ in database.
Next step is insert data in database in phpMyadmin using insert statement SQL query.
If you want know more about phpMyAdmin, check with below link book which is a step-by-step instructional guide to get you started easily with phpMyAdmin and teach you to manage and perform database functions on your database.
Mastering phpMyAdmin 3.4 for Effective MySQL Management
OR,
Mastering PHP, MySQL and Javascript: A Step-by-Step Guide to Creating Dynamic Websites
With the help of below syntax of insert statement of SQL query data get insert.
INSERT INTO table_name
VALUES (value1, value2, ...);Using insert statement data get inserted in phpMyadmin.
With the help of below example you understand Ajax in PHP.
How to fetch data from database in PHP using search button also get understand easily.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Display table in PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
table, td{
width:300px;
text-align:center;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding:5px;
}
</style>
</head>
<body>
<div class="searchDiv">
<input class="titlesearch" type="text" name="fnname" id="fnname" placeholder="Search Name">
<button class="btnSearch" name="btnSearch" id="btnSearch" >Search</button>
</div>
<!-- This div will contain a list of all jobs that match our search term -->
<div id="search_results" style="padding:5px;"></div>
<script type="text/javascript">
$(document).ready(function() {
//Add a JQuery click listener to our search button.
$('#btnSearch').click(function(){
//get the titlesearch that is being search for
//from the search_box.
var titlesearch = $('#fnname').val().trim();
//Carry out a GET Ajax request using JQuery
$.ajax({
//The URL of the PHP file that searches MySQL.
url: 'getdata.php',
data: {
titlesearch: titlesearch
},
success: function(returnData){
$('#search_results').html('');
//Parse the JSON that we got back from search.php
var results = JSON.parse(returnData);
//Loop through our employee array and append their
//names to our search results div.
$('#search_results').append("<table >");
$('#search_results').append("<tr>");
$('#search_results').append("<th>Name");
$('#search_results').append("</th>");
$('#search_results').append("<th>Email");
$('#search_results').append("</th>");
$('#search_results').append("<th>Phone");
$('#search_results').append("</th>");
$.each(results, function(key, value){
$('#search_results').append("</tr>");
$('#search_results').append("<tr>");
$('#search_results').append("<td>"+value.name+"</td>");
$('#search_results').append("<td>"+value.email+"</div>");
$('#search_results').append("<td>"+value.phone+"</div>");
$('#search_results').append("</tr>");
});
$('#search_results').append("</table>");
//If no employees match the name that was searched for, display a
//message saying that no results were found.
if(results.length == 0){
$('#search_results').html("<div class='divtitle'>No Jobs with that name were found!</div></br>");
}
}
});
});
});
</script>
</body>
</html>In the above code, you see that I have created one input box and search button to fetch data from the database by adding value in the text-box.
“Store Data in an Array using PHP with example”
First you have add value into the text-box and on click of button call Ajax by value passing to it using URL.
Using URL you can pass data in Ajax.
The URL is path of the code snippet in which you can see, how data get fetch data from database and return successful result.
Final result return in Jquery ajax.
This result is finally return in div with the help of jquery.
From the below code you come to understand successfully.
<?php
//MySQL username.
$dbUser = 'root';
//MySQL password.
$dbPassword = '';
//MySQL host / server.
$dbServer = 'localhost';
//The MySQL database your table is located in.
$dbName = 'phpdatabase';
//Connect to MySQL database using PDO.
$pdo = new PDO("mysql:host=$dbServer;dbname=$dbName", $dbUser, $dbPassword);
//Get the name that is being searched for.
$titlesearch = isset($_GET['titlesearch']) ? trim($_GET['titlesearch']) : '';
//The simple SQL query that we will be running.
$sql = "SELECT * FROM `employ` WHERE `name` LIKE :titlesearch";
//Add % for wildcard search!
$titlesearch = "%$titlesearch%";
//Prepare our SELECT statement.
$statement = $pdo->prepare($sql);
//Bind the $name variable to our :name parameter.
$statement->bindValue(':titlesearch', $titlesearch);
//Execute the SQL statement.
$statement->execute();
//Fetch our result as an associative array.
$results = $statement->fetchAll(PDO::FETCH_ASSOC);
//Echo the $results array in a JSON format so that we can
//easily handle the results with JavaScript / JQuery
echo json_encode($results);
?>
I hope you liked my this article. If you have any queries or any question regarding this, Feel free to comment on Me.
