<?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";
if(isset($_GET['del']))
{
$id=intval($_GET['del']);
$sql="delete from tblproducts where id=:cid";
$query2= $dbh->prepare($sql);
$query2->bindParam(':cid',$id,PDO::PARAM_STR);
$query2->execute();
if($query2->execute()) {
echo "<script>alert('product Deleted');</script>" ;
echo "<script>window.location.href ='index.php'</script>";
}else{
echo "<script>alert('Failed try again later.');</script>" ;
}
}
?>
<!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 insert and edit Mysql data with 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 insert and edit Mysql data with modal</h3>
<div class=" d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Add product</h6>
<div class="card-tools" style="float: right;">
<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#deposit" ><i class="fas fa-plus" ></i> Add Product
</button>
</div>
</div>
<div class="row ">
<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_data4 btn btn-sm btn-primary" id="<?php echo ($row->id); ?>" title="click to edit">Edit</a>
<a href="index.php?del=<?php echo $row->id;?>" class=" btn btn-sm btn-danger" data-toggle="tooltip" data-original-title="Delete" onclick="return confirm('Do you really want to delete?');"> Delete </a>
</td>
</tr>
<?php
$cnt=$cnt+1;
}
} ?>
</tbody>
</table>
</div>
<!-- start modal -->
<div class="modal fade" id="deposit">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<h4 >class="modal-title">Register New Product</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<?php @include("newproduct_form.php");?>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- start modal -->
<div id="editData4" class="modal fade">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit 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_update4">
<?php @include("edit_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_data4',function(){
var edit_id4=$(this).attr('id');
$.ajax({
url:"edit_product.php",
type:"post",
data:{edit_id4:edit_id4},
success:function(data){
$("#info_update4").html(data);
$("#editData4").modal('show');
}
});
});
});
</script>
</body>
</html>
Download
