Cara Membuat Tabel yang bisa Diedit dengan JQuery TableEdit PHP

Cara Membuat Tabel yang bisa diedit dengan Jquery TableEdit PHP – Hai ketemu lagi dengan saya dan pada kesempatan kali ini saya akan membahas tentang cara membuat tabel yang bisa di edit menggunakan JQuery TableEdit  menggunakan javascript ajax dan php. Terkadang kita ingin agar user edit data melalui tabelnya saja jadi tidak perlu ke menu baru untuk mempermudah pengguna juga dalam mengedit data. Berikut adalah cara membuat tabel yang bisa diedit.

Membuat Database MySQL

1. Pertama yang WAJIB ada yaitu sobat harus membuat sebuah database. Sobat bisa menggunakan tools bantu seperti navicat, heidi SQL atau lainnya. Sobat juga bisa membuatnya dengan mengakses url localhost/phpmyadmin -> klik tab Database dan tuliskan db_dewankomputer-> Klik tombol Create/Buat.

 

2. Buat tabel untuk mengetesnya dengan mengetikkan query dibawah ini pada tab SQL lalu klik tombol Kirim/Go

 

3. Untuk mencobanya agar sobat tidak memasukkan satu persatu maka sobat eksekusi saja query sql dibawah ini

 

Cara Membuat Tabel yang bisa Diedit

Setelah database sudah dibuat selanjutnya kita baru membuat datanya ditampilkan ke dalam tabel dan membuat sortnya. Berikut langkah-langkahnya :

1.Buat file koneksi.php yang berfugsi untuk menyambungkan aplikasi dengan database dan isikan dengan kode dibawah

isikan sesuai dengan host, user, password, dan nama database sobat. Untuk contoh di bawah ini saya berinama database dengan nama db_dewankomputer.

Jika sobat ingin tahu cara mengkoneksikan dengan dua database atau lebih dalam satu aplikasi maka sobat bisa kunjungi postingan dibawah ini

Cara Membuat Koneksi dengan Database MySQL bisa Dua atau Lebih Koneksi database/Multiple Connection dalam Satu Host maupun beda Host

 

2. Buat file index.php dan masukkan librari css dan js pada tag <head> seperti dibawah ini

Untuk librari css dan js saya menggunakan online karena hanya untuk keperluan demo, jika sobat ingin membuatnya untuk development maka sobat perlu mendownloadnya terlebih dahulu atau sobat bisa mendowload bersama project ini diakhir postingan. Karena kita menggunakan Ajax jadi kita wajib untuk memasukkan jquery.js/jquery.min.js.

 

3. Masih di file index.php selanjutnya isikan script dibawah pada tag <body>

 

4. Selanjutnya kita membuat javascriptnya seperti dibawah yang diletakkan pada file index.php

Sesuaikan kolom dengan project sobat.

 

5. Kemudian buat file action.php yang berfungsi untuk menyimpan script untuk update/delete data. Isinya adalah sebagai berikut

 

6. Selanjutnya jalankan project sobat maka akan muncul seperti gambar dibawah

Jika sobat sudah mengikuti langkah-langkah diatas seharusnya sudah benar dan hasilnya akan seperti gambar diatas. Sekian postingan saya tentang Cara Membuat Tabel yang bisa Diedit dengan JQuery TableEdit PHP. Jika ada salah kata saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah.

Baca juga :

Cara Membuat Multiple Edit Tabel dengan JQuery PHP

 

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

 

 

6 thoughts on “Cara Membuat Tabel yang bisa Diedit dengan JQuery TableEdit PHP

    1. kalo tombol edit dan delete tidak muncul mungkin js jquery & jquery.tabledit.min ada yg kurang atau mungkin javascriptnya ada yg kurang karena nambah tombolnya otomatis lewat script javascriptnya

Leave a Reply

Your email address will not be published. Required fields are marked *

5 × 1 =