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
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
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
Langkah 5. Akhirnya memperbarui tabel database MySQL karyawan dengan data yang diubah di saveInlineEdit. php
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