How to Navigate and Display Database Records Using PHP
In this PHP tutorial, we will see how to to retrieve product information from a database and display it within an HTML form.
Users can navigate through the products by using navigation buttons, and the form fields will dynamically update to show the details of the selected product.
Project Source Code:
<?php
// Connect to the database
require_once "db_connect.php";
// Define the SQL query to select all products from the "product" table
$query = "SELECT * FROM `product`";
// Prepare the SQL statement
$stmt = $conn -> prepare($query);
// Execute the SQL statement
$stmt->execute();
// Fetch all the results from the statement and store them in an array
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
// Initialize an empty array to store the products
$products = array();
foreach( $results as $row ){
$product = array("id"=>$row["id"],
"name"=>$row["name"],
"price"=>$row["price"],
"image"=>$row["image"]
);
// Add the product array to the products array
array_push($products, $product);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Data Navigation</title>
<style>
body{ font-family:Arial, sans-serif; background-color:#f2f2f2; }
form{ background-color:#fff; padding:20px; width:500px; margin: 25px auto;
border-radius:5px; box-shadow: 0 0 10px rgba(0,0,0,0.2); }
h1{ text-align:center; color:#333; margin-bottom:20px; }
.form-row{ margin:10px 0; }
input{ padding:10px; margin:10px 0; border:1px solid #ccc;
border-radius:4px; box-sizing:border-box; width:100%; }
button{ background-color:#4caf50; color:#fff; padding:10px 20px; border:none;
border-radius:4px; cursor:pointer; margin-top:10px; width:24%;
font-size:16px; }
button:hover{ background-color:#45a049; }
#image{ display:flex; align-items:flex-start; }
#image label{ margin-right:10px; }
#image img{ margin:10px; width:50%; height:150px; border-radius:5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
</style>
</head>
<body>
<form id="product-form">
<h1>Product Information</h1>
<div class="form-row">
<label for="product-id">ID:</label>
<input type="text" id="product-id" name="product-id">
</div>
<div class="form-row">
<label for="product-name">Name:</label>
<input type="text" id="product-name" name="product-name">
</div>
<div class="form-row">
<label for="product-price">Price:</label>
<input type="text" id="product-price" name="product-price">
</div>
<div class="form-row">
<div id="image">
<label for="product-image">Image:</label>
<img id="product-image" src="">
</div>
</div>
<div class="form-row">
<button type="button" id="btn-first">First</button>
<button type="button" id="btn-prev">Previous</button>
<button type="button" id="btn-next">Next</button>
<button type="button" id="btn-last">Last</button>
</div>
<script>
// convert the PHP array to a JavaScript object in JSON format.
const products = <?php echo json_encode($products); ?>
// Get the buttons
const btnFirst = document.getElementById('btn-first');
const btnNext = document.getElementById('btn-next');
const btnPrevious = document.getElementById('btn-prev');
const btnLast = document.getElementById('btn-last');
// Define a variable to keep track of the current index
let currentIndex = 0;
// Function to update the form fields based on the current index
function updateForm(){
const product = products[currentIndex];
document.getElementById('product-id').value = product.id;
document.getElementById('product-name').value = product.name;
document.getElementById('product-price').value = product.price;
document.getElementById('product-image').src = product.image;
}
// Function to handle button clicks
function handleButtonClick(e)
{
switch(e.target.id){
case 'btn-first':
currentIndex = 0;
break;
case 'btn-prev':
currentIndex = Math.max( currentIndex - 1, 0 );
break;
case 'btn-next':
currentIndex = Math.min( currentIndex + 1, products.length - 1 );
break;
case 'btn-last':
currentIndex = products.length - 1;
break;
default:
break;
}
updateForm();
}
// Add event listeners to the buttons
btnFirst.addEventListener('click', handleButtonClick);
btnNext.addEventListener('click', handleButtonClick);
btnPrevious.addEventListener('click', handleButtonClick);
btnLast.addEventListener('click', handleButtonClick);
// Initialize the form
updateForm();
</script>
</body>
</html>
Code Explanation:
PHP Section: This PHP code connects to a database using "db_connect.php," defines and executes an SQL query to select all products from a "product" table, fetches and stores the results in an array, and constructs an array of product information.
HTML/JavaScript Section: This code generates an HTML form with fields for product information.
It includes navigation buttons (First, Previous, Next, Last) to move between products and applies CSS styles.
JavaScript manages button clicks, updates form fields with product data, and keeps track of the current product.
listeners are added for button interaction, and the form is initialized through the updateForm function.
OUTPUT:
if you want the source code click on the download button below
Download Projects Source Code