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:
Ajax Shoutbox (7192 downloads)
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
taruknya dmn tuh mas?
gto kah? tapi kalo gto tetap ga bisa otomatis reset
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!!!
mas, kok shoutboxny beda ma demo,
gmn caranya ada paging d shoutboxny, ??
tolong upload skripny lagi mas
mas… bagus banget tutornya salam kenal…
mas bisa di emailin kah file seperti yang di demo, lebih mantab deh kayaknya…
sudah ada modifikasi dan penambahan fitur…
klo bisa tolong di emailin ya mas, trimakasih
it.nanang@yahoo.com
mas saya juga mau file yg sama di demo, kirimin ke email saya ya
eky_the_mostwanted@yahoo.co.id
mas saya juga mau file yg sama di demo, kirimin ke email saya ya
eky_the_mostwanted@yahoo.co.id
Makasih mas buat tutornya..
Oya..mas, gimana caranya supaya begitu pesannya dikirimkan..
di komputer lain shoutboxnya lgsg bs terupdate?
wah edan.. bisa bikin shoutbox sendiri.. mantap gan.. langsung tak praktekkan..
mas, kenapa shotbox sya g bisa keluar,,slalu eror di proses.php
mohon bantuannya..
errornya apa?
bos newbie nih
nerapinnya ke blogspot bagaimana caranya..
maaf bos buta sama yang namanya jquery mysql php ajax atau apalah..
trimakasih
pagingnya dunk sekalian, masa contohnya pake paging,tapi source codenya gk ada!!!
Wahhh.. Artikelnya bagus bangett..
sangat membantu saya yg masih newbie..
ditunggu artikel2 berikutnya..
terus berkarya tanpa lelah ya sob..
Good luck..
jangan lupa mampir ke gubuk saya..
http://www.gitarkeren.com
tukaran link yuk..!! Link anda sudah terpasang manis di tempat saya..
silahkan di cek.. http://www.gitarkeren.com
wah…datanya banyak kali…cara gabunginnya gimana?ada cara singkatnya g??
sorri masi belajar..
mas numpang naya dooonk..klo shouboxnya di pakein smiley emotion gmna caranya y???
thank you mas.. tutorialnya bagus sekali. you are very kind kalo kata orang jawa hehehe..
mantab banget om liat demo\’y
simple dan keren deh.
harus di coba nih.
makasih om dah share.
wah mantab om,
thank you …
harus pakai mysql, ya…
ajax, jquery, mysql waduh gak ngerti tuh,
bakalan beli buku lagi di gramedia tentang desain web,
artikel nya bagus, desain situs ini bagus dan rapi
keren lah pokoknya
keren shoutboxnya,.. makasih atas sharenya..
kok beda, sama yg di download..????
apakah program ini berasal dari orang Belanda?
[…] Shoutbox Sederhana Berbasis Ajax […]