Shoutbox Sederhana Berbasis Ajax

16 Dec 2008 65,235 views

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:

Download Ajax Shoutbox Version 0.1

75 Comments

  1. danang says:

    keren keren…:D
    sekalipun aq gak suka jQuery, tapi prlu diakuin jQuery itu emg powerfull.
    macam ultra man gt..

    [alasan gak suka, karena gak bisa aja hehe....]

  2. rhio says:

    Mantap maz,,pengunjung setia di blog maz ari ni….hehehe

    kog pinter maz arinya ia…. :)

    q kapan bisa pinter ya…. :(

  3. rhio says:

    Udah tak sedot maz…hehehe :)

    makasih suhu/guru besar…hehehe

  4. Rivai says:

    wah! tutorial baru lagi nich.. :)

  5. kebenaran says:

    Jamu psikologi kunjungi http://www.ajaxian.com jamu memang pahit

  6. ciayo says:

    hebat…salam…

  7. Rivai says:

    Mas ari rikuwes tutorial URL friendly nya dong :D tutorial yang URL friendly blog laen gajebo semua :D
    Kalo disini kan bisa ada contohnya juga jadi lebih gampang dimengerti :D

  8. nin3_drag0n says:

    wah thx banget nih gw dah coba ternyata pake ajax emang keren tapi guw ga ngerti nih yg js nya

  9. invisible says:

    wieh. .jadi semangat lagi ne nerusin proyek web. .hehew,boleh dunk klo da ksulitn hub mas ari:D

  10. invisible says:

    Mas,klo mau include kan filenya ke file lain gmn caranya? misalnya saya punya file index.php, dan shoutboxnya saya mau taruh di .

    • gawibowo says:

      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:

      <?php include('shoutbox.php'); ?>
  11. june says:

    kewl man, add to my bookmark, thank 4 the sample and keep up the good work

  12. dimas says:

    makasih mas tutorialnya,,
    td sy dh dwnld smua yg bhubungan dg ajax. he..
    nti sy coba,, klo ada yg susah sy tanya lagi…

  13. hamid says:

    mas.. sekalian pagingnya dong dikasih :)
    Makasih bangedz

  14. hamid says:

    mana pagingnyaaa ????

  15. vie says:

    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.

    • darun says:

      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

  16. DeBroer says:

    Makasih buat tutorialnya.

  17. aa says:

    gimana caranya supaya komen shoutboxnya tampil banyak gak cuma 5

  18. badut says:

    Mas Punya tutorial bikin polling yang dinamis menggunakan ajax ga….!!!poling yg biasa ga gokilll

  19. Sugix says:

    Sumpah keren banget….

  20. darun says:

    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??

  21. Irones says:

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

  22. afdil says:

    terlalu memberatkan blog ndak?

  23. ajax says:

    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 ^_^

  24. wibi says:

    wew,,,mantabs2 om artikel disini,,bisa tambah jago dah gw klo keseringan maen disini…..hehehehhe

  25. wibi says:

    oiia lupa,,,salam kenal ya om…hheheh

  26. hendipra says:

    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

  27. frozenade says:

    kok ga sama ya dengn demonya.

    demonya lebih bagus. boleh dibagi ga? hehe.. :D

  28. HTML says:

    Terima Kasih tutorialnya sangat bermanfaat :)

  29. johan says:

    mas, klao bikin form adminnya gimana?biar dia bisa edit2 yang udah di shout mas?

  30. pasole says:

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

  31. pasole says:

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

  32. pasole says:

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

  33. asakim says:

    demo ama yang di download gak sama boss….

  34. wiyono says:

    gimana bikin databasenya mas?
    bingung nihhh… orang baruuu…

    • gawibowo says:

      sebelumnya anda harus menginstall mysql dulu
      kalau sudah anda buat database baru lewat mysql menggunakan perintah:

      CREATE DATABASE namatadabase;

      atau kalau mau lebih mudah gunakan tools seperti phpMyAdmin atau MySQL Front

  35. Hariez says:

    wah mas gatot ki urik,
    moso demo karo downloadane bedo :(
    hehee…
    njaluk sik podho demone mas :D

  36. puguh says:

    Wah Sip makasih infonya

  37. fadli says:

    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?

    • gawibowo says:

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

  38. ilham says:

    makasih dah dicoba, berhasil :D

  39. Haryo Bergas says:

    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!!!

  40. eky says:

    mas, kok shoutboxny beda ma demo,

    gmn caranya ada paging d shoutboxny, ??

    tolong upload skripny lagi mas

  41. nanang says:

    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

  42. eky says:

    mas saya juga mau file yg sama di demo, kirimin ke email saya ya

    eky_the_mostwanted@yahoo.co.id

  43. philip says:

    Makasih mas buat tutornya..

    Oya..mas, gimana caranya supaya begitu pesannya dikirimkan..
    di komputer lain shoutboxnya lgsg bs terupdate?

  44. alle says:

    wah edan.. bisa bikin shoutbox sendiri.. mantap gan.. langsung tak praktekkan..

  45. Chandra says:

    mas, kenapa shotbox sya g bisa keluar,,slalu eror di proses.php
    mohon bantuannya..

  46. benazer says:

    bos newbie nih
    nerapinnya ke blogspot bagaimana caranya..
    maaf bos buta sama yang namanya jquery mysql php ajax atau apalah..

    trimakasih

  47. irfan says:

    pagingnya dunk sekalian, masa contohnya pake paging,tapi source codenya gk ada!!!

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

    :)

  49. yudi newbie says:

    wah…datanya banyak kali…cara gabunginnya gimana?ada cara singkatnya g??

    sorri masi belajar..

  50. ichi says:

    mas numpang naya dooonk..klo shouboxnya di pakein smiley emotion gmna caranya y???

  51. william says:

    thank you mas.. tutorialnya bagus sekali. you are very kind kalo kata orang jawa hehehe..

  52. Oemar says:

    mantab banget om liat demo\’y
    simple dan keren deh.
    harus di coba nih.

    makasih om dah share.

  53. kocu says:

    wah mantab om,
    thank you … :)

  54. GoblogInside says:

    harus pakai mysql, ya… :(

  55. Klik Sekali says:

    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

  56. keren shoutboxnya,.. makasih atas sharenya..

  57. dedin says:

    kok beda, sama yg di download..????

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CAPTCHA