Ini adalah contoh cara mengimplementasikan tutorial Form Ajax Menggunakan jQuery untuk membuat sebuah shoutbox sederhana. Setidaknya contoh ini bisa lebih berguna daripada hanya sekedar menampilkan data yang barusan disubmit, seperti pada contoh tutorial tersebut.
Data yang disubmit dari form akan dimasukkan ke dalam database MySQL. Untuk itu perlu dibuat database dan tabelnya. Cukup 1 buah tabel saja supaya simple. Rancangan tabelnya seperti ini:
1 2 3 4 5 6 7 8 9 | CREATE TABLE `shoutbox` ( `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, `name` varchar(47) NOT NULL, `url` varchar(151) NOT NULL, `message` varchar(254) NOT NULL, `tanggal` datetime NOT NULL, `ip` varchar(31) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM; |
Proses pada form shoutbox ini sama seperti tutorial form sebelumnya, hanya saja di sini ada penambahan query INSERT ke database, dan setelah data berhasil disimpan ada query SELECT untuk menampilkan data.
Demo shoutbox ini bisa anda lihat di sini.
Anda bisa mendownload source code lengkapnya di sini:
keren keren…
sekalipun aq gak suka jQuery, tapi prlu diakuin jQuery itu emg powerfull.
macam ultra man gt..
[alasan gak suka, karena gak bisa aja hehe....]
powerful nang, bukan powerfull
demo sama yang di download kagak sama bokis akhhh
Mantap maz,,pengunjung setia di blog maz ari ni….hehehe
kog pinter maz arinya ia….
q kapan bisa pinter ya….
Udah tak sedot maz…hehehe
makasih suhu/guru besar…hehehe
wah! tutorial baru lagi nich..
Jamu psikologi kunjungi http://www.ajaxian.com jamu memang pahit
hebat…salam…
Mas ari rikuwes tutorial URL friendly nya dong
tutorial yang URL friendly blog laen gajebo semua 
Kalo disini kan bisa ada contohnya juga jadi lebih gampang dimengerti
wah thx banget nih gw dah coba ternyata pake ajax emang keren tapi guw ga ngerti nih yg js nya
wieh. .jadi semangat lagi ne nerusin proyek web. .hehew,boleh dunk klo da ksulitn hub mas ari
Mas,klo mau include kan filenya ke file lain gmn caranya? misalnya saya punya file index.php, dan shoutboxnya saya mau taruh di .
Supaya lebih mudah, sebaiknya shoutboxnya dipisah saja dari file index.php ke file tersendiri, misalnya shoutbox.php. Kemudian file tsb di-include menggunakan script seperti ini:
wah gmana cara includenya mas …..aku pemain baru nih
kalo mo include ya tinggal ketik kayak yg mas ari ketik:
di bagian atas file index.php nyah…begitu kira2…
kewl man, add to my bookmark, thank 4 the sample and keep up the good work
makasih mas tutorialnya,,
td sy dh dwnld smua yg bhubungan dg ajax. he..
nti sy coba,, klo ada yg susah sy tanya lagi…
mas.. sekalian pagingnya dong dikasih
Makasih bangedz
waduh sori banget.. belum sempat utak atik lagi script shoutboxnya.. sabar ya
mana pagingnyaaa ????
Ini sampel paging yang sederhana.. http://walnutz.net/database-programming/5-tutz-php-coders.html#post57
kok error ya, caranya nampilin gimana, kan tuh source code udah aku ekstrak, trus shoutbox.sql dah aku import ke phpmyadmin. index kujalanin. error. nah adakah tambahan untuk bisa nampilin. hehe thanks ya. masih pemula neh. perintah insert/select diletakkin dimana? hmm..ajarin ya.
konekdi.php nya belum diatur kali mba..
$host = ‘localhost’;
$user = ‘root’;
$pass = ‘vertrigo’; untuk $pass isinya tergantung web server yang anda pakai tergantung
$db_name = ‘jquery’; nama database
Makasih buat tutorialnya.
gimana caranya supaya komen shoutboxnya tampil banyak gak cuma 5
Mas Punya tutorial bikin polling yang dinamis menggunakan ajax ga….!!!poling yg biasa ga gokilll
maaf, saat ini saya belum punya (belum pernah bikin) polling menggunakan ajax
Sumpah keren banget….
mas,,gmna nerapin tutorial pertama mas yang click function dan submit form pada ajax menjadi 1 kek detail berita gtu,jadi setelah di klik read more muncul detail berita dengan ajax,terus ada form comment pake ajax juga..
mas demo ma yang didownload kog beda mas,,yang di download gak ada pagingnya ya??
Thx atas tutorialnya. Kalo di komputer tempat mengirim pesan langsung muncul karena pake ajax tapi jika di buka di komputer yg lain, mesti diresfreh dulu baru muncul.
Saya membuka shoutbox yg sama di dua komputer yg beda.
Gimana caranya supaya datanya selalu ke refresh. Jadi user lain yg lihat pesan yg kita kirimkan tdk perlu refresh lagi.
Makasih jawabannya
gunakan fungsi javascript
setInterval()untuk autoupdate setiap waktu yang ditentukan.. contoh ada di siniterlalu memberatkan blog ndak?
Mas mau nanya dikit dunk tentang shoutbox ini.
Tolong dijawab yah…..
Gimana codenya supaya pas selesai submit form data yang udah ditulis di field langsung clear otomatis berbarengan dengan terjadinya post data.
Soalnya data udah ke post(tampil) fieldnya masih yang kita isiin tadi ga ngereset.
Mksh kalo jawab ^_^
gunakan script ini utk mereset form:
jangan lupa kasih nama di form nya
wew,,,mantabs2 om artikel disini,,bisa tambah jago dah gw klo keseringan maen disini…..hehehehhe
oiia lupa,,,salam kenal ya om…hheheh
mas mau tanya kalo textfieldnya itu diganti dengan combobox yang terdapat data dari database
dan terdapat lebih dari 1 combobox
kemudia shout menampilkan datanya setelah
memilih combobox tersebut
kok ga sama ya dengn demonya.
demonya lebih bagus. boleh dibagi ga? hehe..
Terima Kasih tutorialnya sangat bermanfaat
mas, klao bikin form adminnya gimana?biar dia bisa edit2 yang udah di shout mas?
ass. bang admin alhamdulillah saya sangat bersyukur dengan adanya forum ne…!!!! boleh donk numpang namya.. masalah jquery? saya suada download shoutbox,, dan habkan saya sudah tempelin ke website saya… tapi knp ya pas saya submit ko’ ng mau muncul message yang saya inpu?
lebih jelasnya bisadi lihat di http://isamil.dikti.net thanks ya tutorialnya….
ass. bang admin alhamdulillah saya sangat bersyukur dengan adanya forum ne…!!!! boleh donk numpang namya.. masalah jquery? saya suda download shoutbox,, dan habkan saya sudah tempelin ke website saya… tapi knp ya pas saya submit ko\’ ng mau muncul message yang saya inpu?
lebih jelasnya bisadi lihat di http://isamil.dikti.net thanks ya tutorialnya….
ass. bang admin alhamdulillah saya sangat bersyukur dengan adanya forum ne…!!!! boleh donk numpang namya.. masalah jquery? saya suda download shoutbox,, dan habkan saya sudah tempelin ke website saya… tapi knp ya pas saya submit ko\\\’ ng mau muncul message yang saya inpu?
lebih jelasnya bisadi lihat di http://isamil.dikti.net thanks ya tutorialnya….
demo ama yang di download gak sama boss….
gimana bikin databasenya mas?
bingung nihhh… orang baruuu…
sebelumnya anda harus menginstall mysql dulu
kalau sudah anda buat database baru lewat mysql menggunakan perintah:
atau kalau mau lebih mudah gunakan tools seperti phpMyAdmin atau MySQL Front
ini simple gak pake database
http://www.misha-tattoo.de/content/shoutbox/
wah mas gatot ki urik,
moso demo karo downloadane bedo
hehee…
njaluk sik podho demone mas
Wah Sip makasih infonya
maaf mas, kok lagi-lagi di tempat saya muncul error ini ya:
Notice: Undefined variable: error in D:\WAMP\www\shoutbox\proses.php on line 13
apa settingan di komputer saya beda?
maaf, itu karena saya coding tanpa menampilkan notice, jadinya kelupaan menambahkan fungsi isset
pada tahap development sebaiknya semua error ditampilkan (untuk membiasakan coding yg baik) dengan cara menambahkan script error_reporting(E_ALL); atau diset lewat php.ini
silakan didownload lagi file nya
makasih dah dicoba, berhasil
Mas, terima kasih banget! wah, hebat sekali anda! Saya amat membutuhkan aplikasi chat ini untuk proyek web saya! Orang seperti Anda banyak dibutuhkan di Indonesia, ga pelit ilmu!!!