Pengeditan tabel sebaris menggunakan jquery ajax php dan mysql

Selama mengembangkan proyek PHP, terkadang kita perlu mengimplementasikan edit di tempat atau pengeditan sebaris untuk memungkinkan pengguna mengedit konten di halaman yang sama dengan mengkliknya. Dalam tutorial ini kita akan menjelaskan cara menangani edit di tempat atau pengeditan inline menggunakan jQuery dengan PHP dan MySQL

Table of Contents Show

Bagaimana cara mengambil data dari MySQL menggunakan jQuery ajax dan php?
Bagaimana cara mengedit sebaris di php?
Bagaimana cara memasukkan data ke dalam database MySQL menggunakan jQuery AJAX php?
Bagaimana cara memperbarui data dalam database menggunakan Ajax dan php?

Anda mungkin juga suka

Buat Tabel Langsung yang Dapat Diedit dengan jQuery, PHP dan MySQL
Tinggal Tambah Edit Hapus datatables Records dengan Ajax, PHP dan MySQL

Dalam tutorial ini kita akan menggunakan HTML contenteditable Attribute untuk menangani inline editing. Di sini kita akan menetapkan nilai Atribut contenteditable sebagai true seperti contenteditable="true" yang akan memungkinkan pengguna untuk mengedit konten saat mengklik konten di halaman

Setiap kali pengguna akan mengedit atau mengubah data kolom dan fokus, itu akan memanggil fungsi PHP menggunakan Ajax untuk memperbarui data yang diubah ke dalam tabel MySQL

File berikut diperlukan untuk contoh edit sebaris ini

db_connect. php. File ini digunakan untuk membuat koneksi dengan MySQL
indeks. php. File ini digunakan untuk menampilkan catatan ke dalam tabel dan opsi pengeditan sebaris
fungsi. js. File ini berisi fungsi JavaScript untuk mengubah nilai dan membuat permintaan Ajax ke PHP
simpanInlineEdit. php. File ini akan dipanggil atas permintaan ajax dan memperbarui data ke MySQL

Langkah 1. Anda perlu memasukkan file css bootstrap dan perpustakaan jQuery ke bagian kepala halaman

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>

Langkah 2. Anda perlu membuat file koneksi db_connect. php untuk koneksi database MySQL dengan PHP

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "phpzag_demos";
$conn = mysqli_connect($servername, $username, $password, $dbname) 
or die("Connection failed: " . mysqli_connect_error());

Langkah 3. Anda perlu mendapatkan record dari tabel MySQL dan menampilkannya di halaman dengan opsi pengeditan di index. php

<?php
$sql = "SELECT id, employee_name, employee_salary, employee_age 
FROM employee LIMIT 10";
$resultset = mysqli_query($conn, $sql) or 
die("database error:". mysqli_error($conn));
?>
<table class="table table-condensed 
table-hover table-striped bootgrid-table">
<thead>
<tr>
<th>Employee Name</th>
<th>Salary</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<?php
while( $rows = mysqli_fetch_assoc($resultset) ) {
?>
<tr>
<td contenteditable="true" 
data-old_value="<?php echo $rows["employee_name"]; ?>"
 onBlur="saveInlineEdit(this,'employee_name','<?php 
echo $rows["id"]; ?>')" 
onClick="highlightEdit(this);"><?php echo $rows["employee_name"]; ?></td>
<td contenteditable="true" 
data-old_value="<?php echo $rows["employee_salary"]; ?>" 
onBlur="saveInlineEdit(this,'employee_salary','<?php echo 
$rows["id"]; ?>')" onClick="highlightEdit(this);"><?php 
echo $rows["employee_salary"]; ?></td>
<td contenteditable="true" data-old_value="<?php 
echo $rows["employee_age"]; ?>" 
onBlur="saveInlineEdit(this,'employee_age','<?php 
echo $rows["id"]; ?>')" 
onClick="highlightEdit(this);"><?php echo $rows["employee_age"]; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>

Pada kode di atas, saya telah menampilkan catatan karyawan dengan atribut HTML contenteditable="true" untuk membuat kolom dapat diedit dan juga atribut data-old_value untuk menyimpan nilai lama untuk diperiksa sebelum membuat permintaan Ajax untuk memperbarui nilai yang diubah dalam tabel database MySQL. Saya telah menggunakan fungsi saveInlineEdit() pada acara blur untuk memperbarui nilai yang diubah dan fungsi highlightEdit() untuk menyorot kolom dalam mode edit

Langkah 4. Sekarang perlu membuat permintaan jQuery AjAX ke fungsi PHP untuk memperbarui data yang diubah ke MySQL menggunakan skrip PHP
Ini adalah fungsi JavaScript saveInlineEdit yang memeriksa nilai yang diubah. Jika nilainya diubah maka akan membuat permintaan Ajax ke fungsi PHP saveInlineEdit. php dengan memberikan nilai yang diperlukan. Akhirnya setelah permintaan edit berhasil, perbarui atribut data data-old_value dengan nilai yang diperbarui untuk memeriksa nilai yang diubah untuk membuat permintaan Ajax

function saveInlineEdit(editableObj,column,id) {
// no change change made then return false
if($(editableObj).attr('data-old_value') === editableObj.innerHTML)
return false;
// send ajax to update value
$(editableObj).css("background","#FFF url(loader.gif) no-repeat right");
$.ajax({
url: "saveInlineEdit.php",
type: "POST",
dataType: "json",
data:'column='+column+'&value='+editableObj.innerHTML+'&id='+id,
success: function(response) {
// set updated value as old value
$(editableObj).attr('data-old_value',editableObj.innerHTML);
$(editableObj).css("background","#FDFDFD");
},
error: function () {
console.log("errr");
}
});
}

Langkah 5. Akhirnya memperbarui tabel database MySQL karyawan dengan data yang diubah di saveInlineEdit. php

<?php
$sql = "UPDATE employee set " . $_POST["column"] . " = '".$_POST["value"]."'
 WHERE id=".$_POST["id"];
mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
?>

Langkah 6. Untuk menjalankan contoh ini, Anda memerlukan tabel database MySQL dengan catatan. Jadi Anda hanya perlu menjalankan kode ini untuk membuat tabel MySQL dan memasukkan data untuk menjalankan contoh

CREATE TABLE IF NOT EXISTS 'employee' (
'id' int(11) NOT NULL AUTO_INCREMENT COMMENT 'primary key',
'employee_name' varchar(255) NOT NULL COMMENT 'employee name',
'employee_salary' double NOT NULL COMMENT 'employee salary',
'employee_age' int(11) NOT NULL COMMENT 'employee age',
PRIMARY KEY ('id')
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='datatable 
demo table' AUTO_INCREMENT=58 ;
INSERT INTO 'employee' ('id', 'employee_name','employee_salary', 'employee_age')
 VALUES
(1, 'Tiger Nixon', 320800, 61),
(2, 'Garrett Winters', 170750, 63),
(3, 'Ashton Cox', 86000, 66),
(4, 'Cedric Kelly', 433060, 22),
(5, 'Airi Satou', 162700, 33),
(6, 'Brielle Williamson', 372000, 61),
(7, 'Herrod Chandler', 137500, 59),
(8, 'Rhona Davidson', 327900, 55),
(9, 'Colleen Hurst', 205500, 39),
(10, 'Sonya Frost', 103600, 23);

Anda mungkin juga suka

Bangun Sistem Obrolan Langsung dengan Ajax, PHP & MySQL
Buat Kalender Acara dengan jQuery, PHP, dan MySQL
Bangun Sistem Faktur dengan PHP & MySQL
Sistem Notifikasi Dorong dengan PHP & MySQL
Buat Kartu Bootstrap dengan PHP dan MySQL
Bangun Sistem Manajemen Konten dengan PHP & MySQL
Ubah Unix Timestamp Menjadi Waktu Tanggal yang Dapat Dibaca di PHP
Ajax Drop Down Data Seleksi Memuat dengan PHP & MySQL
Sistem Manajemen Inventaris dengan Ajax, PHP & MySQL
Seret dan Jatuhkan Unggah File menggunakan jQuery dan PHP
Muat Konten Dinamis di Bootstrap Popover dengan Ajax, PHP & MySQL

Ini adalah contoh sederhana untuk menerapkan fungsionalitas edit sebaris dalam proyek PHP Anda dengan jQuery. Anda dapat melihat demo langsung dari tautan Demo. Jika Anda ingin mengunduh skrip demo yang sedang berjalan, Anda dapat mengunduh skrip dari tautan Unduh di bawah ini