alexa-tracking

Membuat Dinamik Data Pada DataTables, CRUD + Bootstrap

Main Content

1024
1024
KASKUS
51
244
https://www.kaskus.co.id/thread/559ea1799478683d348b456a/membuat-dinamik-data-pada-datatables-crud--bootstrap
Membuat Dinamik Data Pada DataTables, CRUD + Bootstrap
Membuat Dinamik Data Pada DataTables, CRUD + Bootstrap

Apakah agan/aganwati, mempunyai Data sampe Ribuan atau Puluhan Ribu Baris ?
pasti akan berat ketika akses page data tersebut, mungkin ketika di akses data ter-load semua dan
itu akan menguras bandwith hosting/server anda emoticon-Frown
bahkan bisa membuat browser anda not responding emoticon-Ngakak (S)

Perlu di perbaiki jika seperti itu, karena semakin banyak data semakin lama performance website anda.
Yuk Disimak.

Yang Dibutuhkan

Spoiler for Yang Dibutuhkan:


1. Download script Data Tables, dan Bootstrap terlebih dahulu.

2. Nyalakan XAMPP, perlu di ketahui penulis memakai XAMPP versi V 1.8
PHP menggunakan versi 5.4. XAMPP bisa di download disini.

3. Setelah di download script Data Tables, buat 1 folder "datatablesku" lalu buat 1 folder lagi
yaitu "assets" lalu extract file script Data Tables yang sudah di download, lalu masukin
isi script tersebut kedalam folder "assets" kira kira seperti ini emoticon-Smilie

Spoiler for :


4. Setelah di download script Bootsrap, buka folder "assets" buat folder "bootsrap"
lalu extract file script Bootsrap yang sudah di download, lalu masukin isi script tersebut
kedalam folder "bootsrap" kira kira seperti ini emoticon-Smilie

Spoiler for :


5. Buka PhpMyAdmin, buat database baru dengan nama "datatables_ku" setelah itu
buka link ini lalu klik menu SQL, copy dan paste script pada link yang saya berikan
di text box SQL. Lalu klik kirim.

Spoiler for :


WARNING !!!

Tahap selanjutnya akan membahas tentang coding, pastikan pikiran sedang fresh, tidak banyak pikiran dll. Pastikan anda mengerti kodingan yang akan di bahas, jangan hanya copas lalu anda tidak mengerti inti dari coding yang di bahas, jika ada yang kurang/tidak mengerti atau penulis melakukan kesalahan. Silahkan komentar emoticon-Smilie

6. Pada folder "datatables_ku" buat file bernama "index.php" dengan script sebagai berikut

index.php from Pastebin.com

7. Setelah "index.php" maka buat file "serverSide.php" script ini untuk load data kita ke file
"index.php" berikut script nya.

serverSide.php from Pastebin.com

8. Nah script terakhir nih, yaitu membuat CRUD (CREATE, READ, UPDATE, DELETE)
Supaya datanya bisa di Tambah, Edit dan Di Hapus. Buat file "crud.php"
berikut scriptnya.

crud.php from Pastebin.com

Selesai deh lihat hasilnya gih emoticon-Smilie

Spoiler for Hasil:



Spoiler for Demo & Download:


UPDATE
Wah banyak yang tertarik ya, Malah ada yang nyaranin suruh bikin buku hahaha
Pada pengen tau cara join tablenya gimana hahaha. Nih sample/contoh cara join nya

joinServerside.php from Pastebin.com

Untuk Demonya klik disini

Spoiler for Sumber & Penulis:



emoticon-I Love Indonesia emoticon-Blue Guy Cendol (L) emoticon-Blue Guy Cendol (L) emoticon-Blue Guy Cendol (L) emoticon-Rate 5 Star emoticon-Rate 5 Star emoticon-Rate 5 Star emoticon-I Love Indonesia
mantep gan, crud nya ...
ane timpuk ente emoticon-Cendol (S)
Quote:Original Posted By zuperbayu
mantep gan, crud nya ...
ane timpuk ente emoticon-Cendol (S)


Makasih ya gan emoticon-Cendol (S) emoticon-Malu (S)



LEFGRIN.COM
MELAYANI JASA PEMBUATAN WEBSITE
makasih banyak gan,

script yang agan bagi bermanfaat buat ane, kebetulan ane lagi belajar bikin web pake php dan MySQL...

emoticon-Rate 5 Star dulu deh, hari ini cendol udah meluncur k orang lain emoticon-Hammer2
Quote:Original Posted By yusfida
makasih banyak gan,

script yang agan bagi bermanfaat buat ane, kebetulan ane lagi belajar bikin web pake php dan MySQL...

emoticon-Rate 5 Star dulu deh, hari ini cendol udah meluncur k orang lain emoticon-Hammer2


emoticon-Kiss (S) emoticon-Kiss (S)

Nice info gan...
Btw itu datanya di load all trus paging dari js ya?
Kalo data per baris besar dengan ribuan baris bakal tetep lemot, mending data di load per halaman, paging pake php (server side).
Quote:Original Posted By rontoil
Nice info gan...
Btw itu datanya di load all trus paging dari js ya?
Kalo data per baris besar dengan ribuan baris bakal tetep lemot, mending data di load per halaman, paging pake php (server side).


ini kagak di load semua gan,
ini di limit kok, coba aja buka script Serverside.php nya
setiap ganti pagging bakal load lagi, nyari data juga di load lagi emoticon-Smilie

kagak percaya ?
kalo pake mozilla install plugin "firebug"
agan nyalin consolenya. lalu ganti halaman atau cari data.
bakal muncul tuh beberapa proses action disitu emoticon-Smilie

kalo pake chrome, inspect element lalu liat tab network emoticon-Big Grin



LEFGRIN.COM
MELAYANI JASA PEMBUATAN WEBSITE
Quote:Original Posted By lefgrin


ini kagak di load semua gan,
ini di limit kok, coba aja buka script Serverside.php nya
setiap ganti pagging bakal load lagi, nyari data juga di load lagi emoticon-Smilie

kagak percaya ?
kalo pake mozilla install plugin "firebug"
agan nyalin consolenya. lalu ganti halaman atau cari data.
bakal muncul tuh beberapa proses action disitu emoticon-Smilie

kalo pake chrome, inspect element lalu liat tab network emoticon-Big Grin


Seep....
Nanti ane cobain dulu, ol pake hp soalnya....

Btw, thx 4 share....
Quote:Original Posted By rontoil


Seep....
Nanti ane cobain dulu, ol pake hp soalnya....

Btw, thx 4 share....


Hooh emoticon-Smilie


LEFGRIN.COM
MELAYANI JASA PEMBUATAN WEBSITE


Terimakasih udah share gan.. berguna banget buat pembelajaran ane yang masih nubie.
Quote:Original Posted By z4k1
Terimakasih udah share gan.. berguna banget buat pembelajaran ane yang masih nubie.


sip gan emoticon-Malu (S)
keep update ya gan, thank you banget sharing-nya. Saya berhari-hari berkelana nyari tutorial datatables, akhirnya baru berhasil dengan tutorial agan
cendol sent
keren gan
demo onlinenya ngacir
bedanya ma ini apaan gan ? lebih maknyos mana, soalnya ane sering pake beginian...https://github.com/IgnitedDatatables/Ignited-Datatables/
terima kasih infonya gan :0
mantap pake bt 3..pernah nyari tapi dapatnya yang bt 2 di pake di bt 3 gak jalan emoticon-Ngakak
Gan, ada contoh gak soal CRUD di editable punya jquery datatable?
saya lagi cari tutorial untuk menggunakan CRUD langsung di jquery datatable..
thanks before gan...
Semoga Bermanfaat yah ^_^
mantep om,,, ijin donlot buat jadi contoh program crud php+jquery buat ponakan ane emoticon-Big Grin
gan,,,kalo ane mau mindahin filter form yang di footer itu,,ke bagian tepat di bawah headernya (atas),,gimana yakk caranya ?? emoticon-Big Grin
yang kudu di edit yang bagian mana ??
Quote:Original Posted By fudo729
Gan, ada contoh gak soal CRUD di editable punya jquery datatable?
saya lagi cari tutorial untuk menggunakan CRUD langsung di jquery datatable..
thanks before gan...


Coba tengok disini gan,,
contoh yang bagian CellEditing DataGrid
Cekidot