Tambah Tampil Data dengan PHP PDO + jQuery AJAX

Assalamu'alaikum wr. wb.

Pada tutorial kali ini kita akan belajar sesuatu yang baru teman-teman. Kalo pada tutorial-tutorial kita yang sebelumnya untuk pemrograman web khususnya PHP kita hanya menggunakan ekstensi mysql dan ekstensi mysqli, kali ini kita belajar tentang ekstensi PDO di PHP. Tak hanya itu pada tutorial kali ini kita juga akan belajar jQuery AJAX.

Bagi kalian yang belum tau apa itu jQuery AJAX silahkan baca :
Pengertian jQuery dan AJAX

Dan bagi kalian yang belum tau apa itu PDO extension PHP dan gimana cara mengaktifkannya, silahkan baca terlebih dahulu :
Pengertian PDO dan Cara Mengaktifkan PDO Extension

Kita akan membuat halaman web yang berisi CRUD PHP Ekstensi PDO dan jQuery AJAX tanpa refresh halaman (without reload page). Pertama kita akan membuat input (tambah) dan tampil data terlebih dahulu, untuk edit dan hapusnya silahkan ikuti pada tutorial selanjutnya.

Demo halaman tampil data seperti gambar dibawah :


Dan demo halaman input data seperti gambar dibawah :



Untuk membuat tampilan seperti diatas saya hanya menggunakan HTML dan CSS manual. Bagi kalian yang ingin mempercantik tampilan serta membuatnya menjadi responsive bisa ikuti tutorial ini :
Membuat Desain Web Responsive dengan Materializecss

Sebelum kita menggunakan PDO, alangkah lebih baiknya Anda faham terlebih dahulu apa itu pemrograman berorientasi objek (OOP). Artikelnya bisa dibaca disini :
Konsep Dasar Pemrograman Berorientasi Objek (OOP)

Sekedar informasi bawah sebenarnya tidak full OOP fungsi-fungsi dari proses yang saya buat manual, jadi yang OOP hanya fungsi bawaan dari PDO. Jadi agak semi prosedural.

Ok langsung saja, tutorial tambah dan tampil data dengan PHP ekstensi PDO + jQuery AJAX bisa kalian ikuti dibawah :



Jika ada yang kesulitan silahkan bertanya dikomentar. Jangan lupa like dan share tutorial-tutorial di blog kami.

Tutorial selanjutnyaEdit dan Hapus Data dengan PHP PDO + jQuery AJAX

Semoga bermanfaat, happy coding :)

Wassalamu'alaikum wr. wb.
Tambah Tampil Data dengan PHP PDO + jQuery AJAX
Item Reviewed: Tambah Tampil Data dengan PHP PDO + jQuery AJAX 9 out of 10 based on 10 ratings. 9 user reviews.

43 comments

gan saya mau tanya. inikan tanpa framework ya. kalau tutorial untuk menggunakan framework codeigniter ada gak gan. saya udh coba-coba tp gk bisa-bisa. maklum msh tahap belajar gan. mohon pencerahannya gan. terimakasih..

Mungkin ni bisa jadi referensi gan :
http://goo.gl/OEeNPq
https://goo.gl/O4XUuO

Tadi jenis kelaminnya pake select yak, sebaiknya bikin master data aja Gan. jadi yang di tertulis di databasenya cukup dengan kode angka ^_^

kalo soal itu mah terserah gan.
ane kan buat tutorial dasar buat pemula, jadi buat yang simple2 aja dulu.

Waktu klik tambah si dianya da mau load sendiri min, harus di refresh manual. apa yang salah minnn :(

This comment has been removed by the author.

Coba diteliti lagi, samain persis dulu dengan yg ada ditutorial.
Logikanya itu setelah tambah data div tampildata ngeload lagi file tampil.php jika proses tambah data pake jquery ajax nya sukses, proses nya ada di file index.php

This comment has been removed by the author.

Kalau untuk UPLOAD gambar/foto dengan AJAX gimana min?

Bisa aja gan, cuman untuk tutorialnya ane belum sempet buat.

Ada referensi gak min?

where is the source code? I looked on your facebook as well and found nothiong, can you help with small project? any skype?

Mau tanya min ini kenapa saya coba salahkan SQL query nya dan ga muncul notif error bla bla bla. cuman data ga tampil aja dan ga ada pesan error yg lain. jadi perintah
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
tidak menunjukan pesan error pada sql query-nya

Coba pelajari ini gan : http://php.net/manual/en/pdo.errorinfo.php

This comment has been removed by the author.

mas mau nanyak oya..
itukan cuman data biasa gimana kalau file gambar or lain nya...???
kan jika di proses oleh php kan harus name? bukan id..???
gimana tu jadi nya..??

Ada sendiri gan kalo mau upload gambar dengan jQuery Ajax. Maaf saya belum sempet buat tutorialnya.

file jquery.js nya mana min?

http://fawaiq.url.ph/js/jquery.js

bro kok saya ada pesan gagal menambahkan data, dan tidak mau refresh padahal coding sudah sesuai

Post yang sangat menarik. mampir juga gan Sinau Coding

...on line 12

Fatal error: Uncaught Error: Call to a member function setAttribute() on unknown in C:\xampp\htdocs\...
-------
Line 12 saya:
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

padahal udah sama kok masih error ya? mohon pencerahannya.

Sudah bisa gan, cuma nama variabel db harus sama dengan yang di file koneksi.php. thanks

Iya memang harus seperti gitu gan (Y)

tutorialnya mantap bos... terima kasih

Alhamdulillah, thanks.
Sama2 gan :)

Gan mau tanya untuk bagian validasi kan akan muncul alert apabila inputan kosong,
nah biar keluar validasi alert apabila nama yang diinput sama dengan yg di database apa yg harus ditambahkan dari code berikut :

if(nama == '' || jk == '' || alamat == '' || telp == ''){
alert("Inputan tidak boleh kosong");
} else (?????)

Dibagian else nya Anda buat lagi sql baru ke tabel tersebut where nama = inputan nama. Terus buat cek row pake num_rows, kemudian buat kondisi, if data lebih dari 0 maka munculin alert nama sudah ada di database, kemudian else nya baru isi sql tambah data baru.
Itu logikanya gan, semoga bermanfaat :)

Please contact me on : https://fb.com/yukcoding :)

Silahkan konsultasi ke https://fb.com/yukcoding :)

Ditutorial dah ada gan tinggal ngikutin dan ngetik ulang. Kalo ada kesulitan bisa konsultasi di https://www.facebook.com/yukcoding :)

punya saya kok ga bisa load gan......

Ada yang salah gan script-mu. Pastikan sama dengan yang ada di tutorial :)

Nompang Tanyak gan, kenapa di program saya datanya berhasil di input dan di edit setelah di refresh, tidal load otomatis gan>

Load halaman tampilnya buat pake jquery ajax gan, buat sama persis seperti yang ada di tutorial ini.

Gan ijin tanya. tutorial yang ada divideo saya sudah jalankan semua dan saya cek script sudah samapersis. saya ada kendala saat input tambah data, saat saya klik Button Simpan table Tampil tidak terisi, tetapi saya lihat di phpmyadmin databasenya ada dan masuk? mohon pencerahan ?

This comment has been removed by the author.

Ngobrol disini aja gan https://fb.com/yukcoding

sampah.. ambil dri website luar.. http://www.itechempires.com/2016/03/php-mysql-crud-create-read-update-delete-operations-using-jquery/
true?? cman di ganti warnanya doang..

Begini nih contoh netizen yang tidak baik. Belum diikuti tutorialnya udah ngata2in orang. Tutorial mirip seperti ini banyak sekali di internet, dan yang ane share adalah versi sendiri serta plus penjelasan lengkap. Di link yang ente share itu beda dengan script saya, dia terlalu ribet dan pake mysqli bukan PDO.
:capedeh

Emoticon? nyengir

Berkomentarlah dengan bahasa yang relevan dan sopan.. #ThinkHIGH! ^_^

Info

Just load it!