How do i display data by ID from mysql database - php

Question

id
product_title
product_desc
1000
Iphone 12
this is iPhone 12
1001
Iphone 11
this is iPhone 11
1002
Iphone X
this is iPhone X
1003
Iphone 8
this is iPhone 8
1004
Iphone 7
this is iPhone 7
I have a table called products that looks something like the table above. I displayed all the products on my page. But now I want to use bootstrap modal to display the product description when I clicked on the name of that particular product.( Exp: I click on the product name of iPhone 12 on my page. A boostrap modal will be displayed to show me the description of iPhone 12. )
My question is how can I display the description of that particular product that I click on? Now I am having an output of all the descriptions of the products in my modal.
This is the codes where I use to display the products
<div class="row form-group" id="myDIV">
<?php
$sql = "SELECT * FROM products WHERE product_status = 1 ORDER BY product_created DESC LIMIT 6";
$query = $conn->query($sql);
if (!mysqli_num_rows($query)) {
echo '
<div class="col-12">
<div class="badge badge-danger">No Products Found</div>
</div>
';
} else {
while ($row = $query->fetch_assoc()) {
?>
<div class="col-lg-3 col-md-4 col-6 form-group" style="padding: 0 8px 0 8px;">
<div class="product-wrapper">
<div class="card-body">
<h5 class="product-title" style="min-height: 39px;">
<span class="float-left" data-toggle="modal" data-target="#productdesc1">
<?php echo $row['product_title']; ?>
</span>
</h5>
View More
</div>
</div>
</div>
<?php
}
}
?>
</div>
These are the codes that I use for my bootstrap modals
<!-- The Modal -->
<div class="modal fade" id="productdesc1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- Modal body -->
<div class="modal-body">
<div class="float-right mb-3">
<button type="button" class="close" data-dismiss="modal" style="color:#ed1c25;">×</button>
</div>
<?php
$sql = "SELECT product_desc FROM products";
$query = $conn->query($sql);
if (!mysqli_num_rows($query)) {
echo '
<div class="col-12">
<div class="badge badge-danger">No Products Found</div>
</div>
';
} else {
while ($row = $query->fetch_assoc()) {
?>
<div class="mb-3">
<h5 class="product-title">Description</h5>
<p><?php echo $row['product_desc']; ?></p>
</div>
<?php
}
}
?>
</div>
</div>
</div>
</div>

Answer 1

i will show you make simple with jquery
first i add onlick ShowModalProduct() at your <a> and will look like this
View More
<?=$row['id'];?> its from foreach the data and will be parameter for show product_desc at javascript code
and then at the modal i will give id at each <div>
<div class="mb-3 hidden" id="products_<?=$row['id'];?>">
<h5 class="product-title">Description</h5>
<p><?php echo $row['product_desc']; ?></p>
</div>
and i use this jquery library
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
and add the script the function ShowModalProduct() will look like this, when the function fired, it will remove class hidden and add class show-desc
function ShowModalProduct(id){
$('#products_'+id).removeClass('hidden');
$('#products_'+id).addClass('show-desc');
$('#productdesc1').modal('toggle');
}
i forget to mention i add 2 class style to show/hide the div section, and when foreach the product desc first i add class hidden like this <div class="mb-3 hidden" id="products_<?=$row['id'];?>"> and include id at the sql (SELECT id,product_desc FROM products)
<style type="text/css">
.hidden{
display: none;
}
.show-desc{
display: block;
}
</style>
and i add onclick CloseModal() at button close modal like this
<button type="button" class="close" data-dismiss="modal" onclick="CloseModal();" style="color:#ed1c25;">×</button>
and then add the function script like this
function CloseModal(){
$(".show-desc").each(function(){
var id = $(this).attr('id');
$("#"+id).removeClass('show-desc');
$("#"+id).addClass('hidden');
});
$('#productdesc1').modal('hide');
}
so when the modal close, it will change all class show-desc to class hidden so when you showing another modal, the previous div not showing again
full code will look like this
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<style type="text/css">
.hidden{
display: none;
}
.show-desc{
display: block;
}
</style>
<body>
<div class="row form-group" id="myDIV">
<?php
$sql = "SELECT * FROM products WHERE product_status = 1 ORDER BY product_created DESC LIMIT 6";
$query = $conn->query($sql);
if (!mysqli_num_rows($query)) {
echo '
<div class="col-12">
<div class="badge badge-danger">No Products Found</div>
</div>
';
} else {
while ($row = $query->fetch_assoc()) {
?>
<div class="col-lg-3 col-md-4 col-6 form-group" style="padding: 0 8px 0 8px;">
<div class="product-wrapper">
<div class="card-body">
<h5 class="product-title" style="min-height: 39px;">
<span class="float-left" data-toggle="modal" data-target="#productdesc1">
<?php echo $row['product_title']; ?>
</span>
</h5>
View More
</div>
</div>
</div>
<?php
}
}
?>
</div>
<!-- The Modal -->
<div class="modal fade" id="productdesc1" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- Modal body -->
<div class="modal-body">
<div class="float-right mb-3">
<button type="button" class="close" data-dismiss="modal" onclick="CloseModal();" style="color:#ed1c25;">×</button>
</div>
<?php
$sql = "SELECT id,product_desc FROM products";
$query = $conn->query($sql);
if (!mysqli_num_rows($query)) {
echo '
<div class="col-12">
<div class="badge badge-danger">No Products Found</div>
</div>
';
} else {
while ($row = $query->fetch_assoc()) {
?>
<div class="mb-3 hidden" id="products_<?=$row['id'];?>">
<h5 class="product-title">Description</h5>
<p><?php echo $row['product_desc']; ?></p>
</div>
<?php
}
}
?>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script type="text/javascript">
function ShowModalProduct(id){
$('#products_'+id).removeClass('hidden');
$('#products_'+id).addClass('show-desc');
$('#productdesc1').modal('toggle');
}
function CloseModal(){
$(".show-desc").each(function(){
var id = $(this).attr('id');
$("#"+id).removeClass('show-desc');
$("#"+id).addClass('hidden');
});
$('#productdesc1').modal('hide');
}
</script>
</body>
</html>
if use ajax, change the function at script like this
function ShowModalProduct(id){
$.ajax({
url: 'GetProduct.php',
type: 'get',
data: {'id':id},
dataType: 'JSON',
success: function(response){
if(response==null){
alert('Data Not Found');
}else{
data = response;
$('#desc-product').html(data.product_desc);
$('#productdesc1').modal('toggle');
}
}
});
}
function CloseModal(){
$('#productdesc1').modal('hide');
}
and create new php file GetProduct.php for get detail product
<?php
$id_product = $_GET['id'];
$conn = mysqli_connect("localhost", "root", "","test"); //your config connection
$sql = "SELECT * FROM products WHERE product_status = 1 and id='".$id_product."' ";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
echo json_encode($row);
?>
full code at main file will like this
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<!--
<style type="text/css">
.hidden{
display: none;
}
.show-desc{
display: block;
}
</style>
-->
<body>
<div class="row form-group" id="myDIV">
<?php
$conn = mysqli_connect("localhost", "root", "","test"); //your config connection
$sql = "SELECT * FROM products WHERE product_status = 1 ORDER BY product_created DESC LIMIT 6";
$query = $conn->query($sql);
if (!mysqli_num_rows($query)) {
echo '
<div class="col-12">
<div class="badge badge-danger">No Products Found</div>
</div>
';
} else {
while ($row = $query->fetch_assoc()) {
?>
<div class="col-lg-3 col-md-4 col-6 form-group" style="padding: 0 8px 0 8px;">
<div class="product-wrapper">
<div class="card-body">
<h5 class="product-title" style="min-height: 39px;">
<span class="float-left" data-toggle="modal" data-target="#productdesc1">
<?php echo $row['product_title']; ?>
</span>
</h5>
View More
</div>
</div>
</div>
<?php
}
}
?>
</div>
<!-- The Modal -->
<div class="modal fade" id="productdesc1" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- Modal body -->
<div class="modal-body">
<div class="float-right mb-3">
<button type="button" class="close" data-dismiss="modal" onclick="CloseModal();" style="color:#ed1c25;">×</button>
</div>
<div class="mb-3">
<h5 class="product-title">Description</h5>
<p id="desc-product"></p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script type="text/javascript">
function ShowModalProduct(id){
$.ajax({
url: 'GetProduct.php',
type: 'get',
data: {'id':id},
dataType: 'JSON',
success: function(response){
if(response==null){
alert('Data Not Found');
}else{
data = response;
$('#desc-product').html(data.product_desc);
$('#productdesc1').modal('toggle');
}
}
});
}
function CloseModal(){
$('#productdesc1').modal('hide');
}
</script>
</body>
</html>

Answer 2

You can do this by two ways:
Set the modal in the item list, inside the foreach block, and but the item description inside the modal, but don't forget to change modal ID regarding the toggle button id.
Call an onclick event when user clicks on item name, the action accociated with this event calls ajax request to get element by ID from database, when the request success, set the retrieved data inside a modal and make it visible.