Tombol Edit :

<td> <button class="btn btn-warning btn-xs" data-toggle="modal" data-

target="#editData" onclick="showDetail(' . $row["id"] . ')">
<div class="fa fa-edit"></div> Edit </button>

Modal Edit :

<div class="modal fade" id="editData">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<h4 class="modal-title">Detail Data Plus Poin</h4>

<button type="button" class="close" data-dismiss="modal" aria-label="Close">

<span aria-hidden="true">&times;</span>

</button>

</div>

<div class="modal-body" id="modal-body-content">

</div>

<div class="modal-footer justify-content-between">

<button type="button" class="btn btn-default" data-dismiss="modal">Tutup</button>

<button type="button" class="btn btn-primary" id="editButton">Edit</button>

</div>

</div>

</div>

</div>

JAVA SCRIPT EDIT

<script>

function showDetail(id) {

// Mengambil data dari server menggunakan AJAX

$.ajax({

type: "POST",
 url: "get_detail.php", // Ganti dengan nama file PHP yang sesuai

data: {

id: id

},

success: function (response) {

// Menampilkan hasil pada modal

$("#modal-body-content").html(response);

$("#editData").modal("show");

});

</script>

MENAMPILKAN ISI DATA KE MODAL EDIT

Buat file get_detail.php

<?php

// Koneksi ke database (ganti dengan informasi koneksi Anda)

require("koneksi.php");

// Ambil data ID dari AJAX

$id = $_POST['id'];

// Query untuk mendapatkan detail data berdasarkan ID

$sql = "SELECT * FROM data_plus WHERE id = $id";

$result = $koneksi->query($sql);

if ($result->num_rows > 0) {

$row = $result->fetch_assoc();

?>

<form id="formEditData">

<input type="hidden" id="editId" name="editId" value="<?php echo $row['id']; ?>">

 <div class="form-group">

<label for="editNim">NIM:</label>

<input type="number" class="form-control" id="editNim" name="editNim" value="<?php

echo $row['nim']; ?>" required>

</div>

<div class="form-group">

<label for="editPoin">Poin:</label>

<input type="number" class="form-control" id="editPoin" name="editPoin" value="<?php

echo $row['poin']; ?>" required>

</div>

<div class="form-group">

<label for="editKeterangan">Keterangan:</label>

<textarea class="form-control" id="editKeterangan" name="editKeterangan" rows="3"

required><?php echo $row['keterangan']; ?></textarea>

</div>

<div class="form-group">

<label for="editTanggal">Tanggal:</label>

<input type="date" class="form-control" id="editTanggal" name="editTanggal" value="<?php

echo $row['tanggal']; ?>" required>

</div>

</form>

<?php

} else {

echo "Data tidak ditemukan";

// Tutup koneksi

$koneksi->close();

?>

Tambahan Java SCRIPT untuk menyimpan hasil perubahan :

<script>
 $(document ).ready(function () {

$("#editButton").click(function () {

// Mengambil nilai dari formulir

var id = $("#editId").val();

var nim = $("#editNim").val();

var poin = $("#editPoin").val();

var keterangan = $("#editKeterangan").val();

var tanggal = $("#editTanggal").val();

// Mengirim data ke server menggunakan AJAX

$.ajax({

type: "POST",

url: "edit_data.php", // Ganti dengan nama file PHP yang sesuai

data: {

id: id,

nim: nim,

poin: poin,

keterangan: keterangan,

tanggal: tanggal

},

success: function (response) {

// Handle respons dari server, misalnya tampilkan pesan sukses atau error

alert(response);

// Menutup modal setelah selesai

$("#editData").modal("hide");

});

});

});
</script>

TAMBAHKAN PHP UNTUK MENYIMPAN DATA

Buat file edit_data.php

<?php

require("koneksi.php");

// Ambil data dari formulir

$id = $_POST['id'];

$nim = $_POST['nim'];

$poin = $_POST['poin'];

$keterangan = $_POST['keterangan'];

$tanggal = $_POST['tanggal'];

// Query untuk mengubah data ke dalam database

$sql = "UPDATE data_plus SET nim = '$nim', poin = '$poin', keterangan = '$keterangan', tanggal =
'$tanggal'

WHERE id = '$id'";

if ($koneksi->query($sql) === TRUE) {

echo "Data berhasil diubah";

} else {

echo "Error: " . $sql . "<br>" . $koneksi->error;

// Tutup koneksi

$koneksi->close();

?>
 FUNGSI HAPUS

Tombol hapus :

<button class="btn btn-danger btn-xs" data-toggle="modal" data-

target="#hapusData" onclick="hapusDetail(' . $row["id"] . ')">

<div class="fa fa-trash"></div> Hapus </button>

Modal Hapus :

<div class="modal fade" id="hapusData">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<h4 class="modal-title">Hapus Data Plus Poin</h4>

<button type="button" class="close" data-dismiss="modal" aria-label="Close">

<span aria-hidden="true">&times;</span>

</button>

</div>

<div class="modal-body" id="modal-body-content">

</div>

<div class="modal-footer justify-content-between">

<button type="button" class="btn btn-default" data-dismiss="modal">Tutup</button>

<button type="button" class="btn btn-primary" id="hapusButton">Hapus</button>

</div>

</div>

</div>

</div>

JAVA SCRIPT HAPUS

<script>

function hapusDetail(id) {

// Mengambil data dari server menggunakan AJAX

$.ajax({

type: "POST",
 url: "get_hapus_detail.php", // Ganti dengan nama file PHP yang sesuai

data: {

id: id

},

success: function (response) {

// Menampilkan hasil pada modal

$("#modal-body-content").html(response);

$("#hapusData").modal("show");

});

</script>

BUAT FILE get_hapus_data.php

<?php

// Koneksi ke database (ganti dengan informasi koneksi Anda)

require("koneksi.php");

// Ambil data ID dari AJAX

$id = $_POST['id'];

// Query untuk mendapatkan detail data berdasarkan ID

$sql = "SELECT * FROM data_plus WHERE id = $id";

$result = $koneksi->query($sql);

if ($result->num_rows > 0) {

$row = $result->fetch_assoc();

?>

<form id="formEditData">

<input type="hidden" id="editId" name="editId" value="<?php echo $row['id']; ?>">

<h4> Apakah anda yakin menghapus data ?</h4>

 </form>

<?php

} else {

echo "Data tidak ditemukan";

// Tutup koneksi

$koneksi->close();

?>

JAVA SCRIPT TOMBOL HAPUS

$(document).ready(function () {

$("#hapusButton").click(function () {

// Mengambil nilai dari formulir

var id = $("#editId").val();

// Mengirim data ke server menggunakan AJAX

$.ajax({

type: "POST",

url: "hapus_data.php", // Ganti dengan nama file PHP yang sesuai

data: {

id: id

},

success: function (response) {

// Handle respons dari server, misalnya tampilkan pesan sukses atau error

// Menutup modal setelah selesai

$("#hapusData").modal("hide");

});

});

});
BUAT FILE hapus_data.php

<?php

require("koneksi.php");

// Ambil data dari formulir

$id = $_POST['id'];

// Query untuk mengubah data ke dalam database

$sql = "DELETE from data_plus WHERE id = '$id'";

if ($koneksi->query($sql) === TRUE) {

echo "Data berhasil dihapus";

} else {

echo "Error: " . $sql . "<br>" . $koneksi->error;

// Tutup koneksi

$koneksi->close();

?>