Menampilkan data secara realtime di php

Hal yang harus di kuasai pertama adalah ketika kita mempelajari sesuatu bahasa pemrograman yaitu pasti CRUD dimana kita tidak hanya menampilkan tetapi kita harus bisa memasukan data, menampilkan, menghapus, bahkan mengedit, disini saya ingin berbagi membuat CRUD tersebut, dan untuk CRUD kali ini saya ingin mengedit dan memasukan datanya di sebuah table tersebut, jadi tidak ada kolom input form dan sebagainya seperti biasa, oke jangan kemana-mana simak terus ya.

Untuk membuat live table ini saya gunakan ajax jquery, saya harapkan teman-teman sudah punya basicnya ya, html, css, jquery, php dan ajax tentunya, seperti judulnya saya bisa mengedit data itu denga mengkliknya, dan untuk memasukan data saya tinggal masukan di table row yang bawahnya, oke langsung saja disini kita ingin menampilkan terlebih dahulu.

Ini adalah tablenya dimana terdapat id: live_data itu untuk menampilkan data kita, dan result itu menampilkan feedback jika berhasil, dan sebagainya, oke jika sudah lanjut kita buat sebuah object app seperti ini:

var app itu adalah untuk proses ajax jquery kita, oke kita buat untuk menampilkan datanya.

Kita buat terlebih dahulu function shownya untuk proses menampilkannya, lalu data itu kita proses di webservicenya, dengan method get, dan jika berhasil responsenya akan kita tampilkan di id live_data, oke sekarang kita masuk ke webservice show.php nya, sekarang kita buat seperti ini:

Kunci dari live edit nantinya sebeneranya pada sebuah attribute HTML contenteditable tersebut, jadi kita bisa mengeditnya, dan disini bagaimana caranya kita bisa memproses data yang kita edit di contenteditable tersebut. Oke untuk kali ini saya rasa cukup untuk menampilkan saja ya.