Membuat 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.

Dan demo halaman input dan tampil 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.



Atau ini



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.
Membuat Tambah & Tampil Data dengan PHP PDO + jQuery AJAX
Item Reviewed: Membuat Tambah & Tampil Data dengan PHP PDO + jQuery AJAX 9 out of 10 based on 10 ratings. 9 user reviews.

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 :(

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

Komentar ini telah dihapus oleh pengarang.

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

Komentar ini telah dihapus oleh pengarang.

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 ?

Komentar ini telah dihapus oleh pengarang.

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

Gan kok ketika saya klik tambah, tabel yang lama juga ikut ditampilkan. Jadi ada dua tabel yang muncul. Mohon petunjuknya. Terima kasih ilmunya

admin, mau tanya bagaimana caranya supaya data yang diinputkan itu tidak ada yang sama saat menginputkan kembali dengan data yang sama? karna pas saya coba masih bisa diinputkan. mohon bantuannya.

Cek lagi bagian script jquery nya gan. Sesuaiin dengan yang ada di tutorial

Tinggal nambahin validasi gan. Jadi sebelum insert ke database cek dulu apakah data sudah ada, kalo ada tampilkan pesan alert kalo tidak ada yang sama baru insert datanya ke db.

tolong mas upload source codenya, kita bukannya cm mau copas tapi kuota anak kos om tau aja kan, klo sembari nonton youtube ksian kita bang. thanks

Silakan ngobrol lewat inbox disini gan https://fb.me/yukcoding

coba: $insert = $db->prepare("INSERT INTO tb_anggota(nama, jk, alamat, telp) VALUES(?, ?, ?, ?)");

cuman kurang tanda tutup kurung akhir saja kalo di saya. Makasih untuk YukCoding

Mas,
Ini aku udah coba
Script insert pake ajax jquery pdo
Tak coba awalnya bisa masuk datanya berhasil di insert ke Database
Tapi ketika mau coba masukin lagi Ko Gagal yah... Kenapa Mas???

Emoticon? nyengir

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

Info

Agar tidak ketinggalan update menarik :

Follow instagram @yukcoding
Subscribe youtube YukCoding Media

Happy coding :)
Just load it!