Skip to content

Instantly share code, notes, and snippets.

@dwijonarko

dwijonarko/delete.php

Last active December 1, 2019 01:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dwijonarko/62e09fee223a387078a074f5ee8f4c46 to your computer and use it in GitHub Desktop.
Save dwijonarko/62e09fee223a387078a074f5ee8f4c46 to your computer and use it in GitHub Desktop.
Download ZIP
Ajax Modal
Raw
delete.php
<?php
$mysqli = new mysqli('localhost','root','root','poltekom_web');
$id = $_GET['id'];
$stmt = $mysqli->prepare("DELETE FROM biodata WHERE id=?");
echo $mysqli->error;
$stmt->bind_param("i",$id);
if ($stmt->execute()) {
echo "Data berhasil dihapus";
} else {
echo $stmt->error;
echo "Periksa kembali form anda";
}
Raw
edit.php
<?php
$mysqli = new mysqli('localhost','root','root','poltekom_web');
$id = $_GET['id'];
$stmt = $mysqli->prepare("SELECT * FROM biodata WHERE id=?");
$stmt->bind_param("i",$id);
$stmt->execute();
$result = $stmt->get_result();
$row = $result->fetch_array(MYSQLI_ASSOC);
echo json_encode($row);
Raw
modal-lengkap.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modal</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body class="container">
<h2>Modal</h2>
<a href="#" class="btn btn-small btn-primary" id="showModal">Add Data</a>
<div id="notification"></div>
<!-- Modal -->
<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Form Biodata</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<form action="save.php" method="POST" id="form-biodata">
</div>
<div class="modal-body ">
<div class="form-group ">
<input type="hidden" id="id" name="id" >
<input type="text" class="form-control" id="first" name="first" placeholder="Your First Name">
</div>
<div class="form-group ">
<input type="text" class="form-control" id="last" name="last" placeholder="Your Last Name">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
</div>
</div>
<div id="table-biodata"></div>
<script src="jquery-3.4.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
getData();
$("#showModal").click(function(){
$('#first').val("");
$('#last').val("");
$('#form-biodata').attr('action','save.php');
$('#formModal').modal('show');
});
$('#table-biodata ').on('click','.delete',function(e){
var r = confirm("Anda yakin akan menghapus");
if (r == true) {
deleteData($(this).attr('data'));
} else {
e.preventDefault();
}
});
$('#table-biodata ').on('click','.edit',function(e){
editData($(this).attr('data'));
});
});
$("#form-biodata").submit(function(e){
e.preventDefault();
var action = $(this).attr('action');
var method = $(this).attr('method');
var form_data = $(this).serialize();
$.ajax({
url:action,
type:method,
data:form_data
}).done(function(response){
$('#notification').addClass('alert alert-success');
$('#notification').html(response);
$("#first").val('');
$("#last").val('');
$('#formModal').modal('hide')
getData();
$('#notification').fadeTo(2000, 500).slideUp(500, function(){
$("#notification").slideUp(500);
});
});
});
function getData(){
$.ajax({
url:'table.php'
}).done(function(response){
$('#table-biodata').html(response);
})
}
function deleteData(id){
$.ajax({
url:'delete.php',
data:{'id':id}
}).done(function(response){
console.log(response);
getData();
});
}
function editData(id){
$.ajax({
url:'edit.php',
data:{'id':id}
}).done(function(response){
var json = $.parseJSON(response);
$('#first').val(json.first);
$('#last').val(json.last);
$('#id').val(json.id);
$('#form-biodata').attr('action','update.php');
$('#formModal').modal('show');
console.log(response);
});
}
</script>
</body>
</html>
Raw
save.php
<?php
$mysqli = new mysqli('localhost','root','root','poltekom_web');
$first = $_POST['first'];
$last = $_POST['last'];
$stmt = $mysqli->prepare("INSERT INTO biodata (first,last) VALUES (?,?)");
echo $mysqli->error;
$stmt->bind_param("ss",$first,$last);
if ($stmt->execute()) {
echo "Data berhasil disimpan";
} else {
echo $stmt->error;
echo "Periksa kembali form anda";
}
Raw
table.php
<?php
$mysqli = new mysqli('localhost','root','root','poltekom_web');
$result = $mysqli->query("SELECT * FROM biodata");
?>
<table class="table">
<tr>
<th>#</th>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Action</th>
</tr>
<?php foreach($result as $user) : ?>
<tr>
<td> <?php echo $user['id'] ?></td>
<td> <?php echo $user['first'] ?> </td>
<td> <?php echo $user['last'] ?> </td>
<td>
<a href="#" class="edit" data="<?php echo $user['id'] ?>">Edit</a>
<a href="#" class="delete" data="<?php echo $user['id'] ?>">Delete</a>
</td>
</tr>
<?php endforeach ?>
</table>
Raw
update.php
<?php
$mysqli = new mysqli('localhost','root','root','poltekom_web');
$first = $_POST['first'];
$last = $_POST['last'];
$id=$_POST['id'];
$stmt = $mysqli->prepare("UPDATE biodata SET first=?, last=? WHERE id=? " );
echo $mysqli->error;
$stmt->bind_param("ssi",$first,$last,$id);
if ($stmt->execute()) {
echo "Data berhasil disimpan";
} else {
echo $stmt->error;
echo "Periksa kembali form anda";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment