Data display in modal

How to diplay Mysql data in modal using php

Source code

config.php

								
									<?php 
									// DB credentials.
									define('DB_HOST','localhost');
									define('DB_USER','root');
									define('DB_PASS','');
									define('DB_NAME','modaldb');
									// Establish database connection.
									try
									{
									$dbh = new PDO("mysql:host=".DB_HOST.";dbname=".DB_NAME,DB_USER, DB_PASS,array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"));
									}
									catch (PDOException $e)
									{
									exit("Error: " . $e->getMessage());
									}
									?>
								
							

index.php

								
									<?php
									session_start();
									error_reporting(0);
									include "config.php";

									?>

									<!DOCTYPE HTML>
									<html lang="en">
									<head>
										<meta charset="utf-8">
										<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
										<title>How to display data in modal</title>
										<!--Bootstrap -->
										<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
										<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
									</head>
									<body>
										<div class="container">
											<div> </div>
											<h3>How to display Mysql data in modal</h3>
											<div class="row mt-6">
												
												<table id="" class="table table-bordered">
													<thead>
														<tr>
															<th class="text-center">No</th>
															<th>Product Name</th>
															<th class="text-center">Product Category</th>
															<th class="text-center">Product Price</th>
															<th class="text-center">Posting Date</th>
															<th class=" text-center">Action</th>
														</tr>
													</thead>

													<tbody>
														<?php
														$sql="SELECT * from tblproducts ORDER BY id DESC";
														$query = $dbh -> prepare($sql);
														$query->execute();
														$results=$query->fetchAll(PDO::FETCH_OBJ);
														$cnt=1;
														if($query->rowCount() > 0)
														{
															foreach($results as $row)
															{ 
																?>
																<tr>
																	<td class="text-center"><?php echo htmlentities($cnt);?></td>
																	<td><?php  echo htmlentities($row->ProductName);?></td>
																	<td class="text-center"><?php  echo htmlentities($row->CategoryName);?></td>
																	<td class="text-center"><?php  echo htmlentities($row->ProductPrice);?></td>
																	<td class="text-center"><?php  echo htmlentities(date("d-m-Y", strtotime($row->PostingDate)));?></td>
																	<td class=" text-center">
																		<a href="#"  class=" edit_data5 btn btn-sm btn-primary" id="<?php echo  ($row->id); ?>" title="click to view">View</a>
																	</td>
																</tr>
																<?php
																$cnt=$cnt+1;
															}
														} ?>
													</tbody>
												</table>
											</div>
											<!--  start  modal -->
											<div id="editData5" class="modal fade">
												<div class="modal-dialog modal-md">
													<div class="modal-content">
														<div class="modal-header">
															<h5 class="modal-title">View product details</h5>
															<button type="button" class="close" data-dismiss="modal" aria-label="Close">
																<span aria-hidden="true">×</span>
															</button>
														</div>
														<div class="modal-body" id="info_update5">
															<?php @include("view_product.php");?>
														</div>
														<div class="modal-footer ">
															<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
														</div>
														<!-- /.modal-content -->
													</div>
													<!-- /.modal-dialog -->
												</div>
												<!-- /.modal -->
											</div>
											<!--   end modal -->
										</div>
										<!-- Loading Scripts -->
										<script src="js/jquery.min.js"></script>
										<script src="js/bootstrap-select.min.js"></script>
										<script src="js/bootstrap.min.js"></script>
										<script src="js/jquery.dataTables.min.js"></script>
										<script src="js/dataTables.bootstrap.min.js"></script>
										<script type="text/javascript">
											$(document).ready(function(){
												$(document).on('click','.edit_data5',function(){
													var edit_id5=$(this).attr('id');
													$.ajax({
														url:"view_product.php",
														type:"post",
														data:{edit_id5:edit_id5},
														success:function(data){
															$("#info_update5").html(data);
															$("#editData5").modal('show');
														}
													});
												});
											});
										</script>
									</body>
									</html>
								
							

view_product.php

								
									<?php
									session_start();
									error_reporting(0);
									include('config.php');
									?>
									<div class="card-body">
									  <?php
									  $eid=$_POST['edit_id5'];
									  $sql="SELECT * from tblproducts  where tblproducts.id=:eid";
									  $query = $dbh -> prepare($sql);
									  $query-> bindParam(':eid', $eid, PDO::PARAM_STR);
									  $query->execute();
									  $results=$query->fetchAll(PDO::FETCH_OBJ);
									  if($query->rowCount() > 0)
									  {
									    foreach($results as $row)
									    {
									      ?>
									      <h4 style="color: blue">Product Information</h4>
									      <table border="1" class="table table-bordered">
									        <tr>
									          <th>Product Name</th>
									          <td>
									            <?php  echo $row->ProductName;?>
									          </td>
									        </tr>
									        <tr>
									          <th>Category Name</th>
									          <td><?php  echo $row->CategoryName;?></td>
									        </tr>
									        <tr>
									          <th>Category Price</th>
									          <td><b>$</b> <?php  echo $row->ProductPrice;?></td>
									        </tr>
									        <tr>
									          <th>Posting Date</th>
									          <td><?php  echo htmlentities(date("d-m-Y", strtotime($row->PostingDate)));?></td>
									        </tr>
									      </table>
									      <?php 
									    }
									  } ?>
									</div>
								
							
Download

Comments

Doreen Akamp

How can I give you donation because you helped me so much

John Simith

This is the code that I was looking for very many years, thank you

Amanya Owen

This code worked for me thank you very much.

David Mwelwa

Your code are really helpful and easy to understand for beginners

Leave a Comment:

You Might Also Like

hostel booking

Hostel booking management system
Learn More
.

car rental

Car rental management system in Php
Learn More
.

student details

Student details management system
Learn More
.

Tourism

Tourism management system in Php and Mysql
Learn More

Latest Tutorial

sweet alerts

How to delete table row using sweet alert2
Learn More

piechart

How to create piechart with Mysql data
Learn More

register and login

How to register and login in php
Learn More

edit data

How to edit Mysql data in modal using php
Learn More