3

Shoutbox dengan PHP, SQLite, jQuery

Selasa, 12 Januari 2010. Kategori : Tutorial || Download Versi PDFQR Code

Hari ini kita akan membuat aplikasi web yaitu Shoutbox menggunakan PHP dan jQuery, tentu saja kurang lengkap rasanya tanpa SQLite.
Sama seperti dua tutorial sebelumnya, fungsi jQuery yang akan kita pakai adalah $.ajax untuk mengirim serta menerima data dari server.
Jalan dari localhost

Adapun alurnya kira-kira seperti ini :

  1. Saat aplikasi pertama kali dibuka maka akan dicek terlebih dahulu data terbaru dari server
  2. Lalu setiap 10 detik aplikasi mengecek lagi server akan adanya data baru
  3. Pada saat yang bersamaan aplikasi menunggu input user yang akan dikirimkan ke server
  4. Apabila ada input maka server akan memprosesnya lalu mengirimkan lagi ke aplikasi

Pengiriman dan penerimaan data dilakukan melalui GET agar lebih cepat prosesnya (bila dibandingkan POST ). Pada proyek kali ini aplikasi sangat tergantung dengan JavaScript, jadi apabila browser tidak mengaktifkannya maka data tidak akan muncul walaupun user tetap bisa mengirimkan shout ke server.

Pengecekan tiap 10 detik dilakukan oleh fungsi JavaScript setInterval :
setInterval('update()', 10000);
update() adalah fungsi jQuery yang meminta data baru dari server :
function update() { $.ajax({ type: 'get', data: 'minta', success: function(data) { $('#shout_text').empty().append(data); } }); return false; }

Server akan memproses GET yang bernilai minta dengan mengambil data dari database :
$tabel = $sqlite->arrayquery("SELECT ip, tanggal, shout FROM shout ORDER BY tanggal DESC"); foreach ($tabel as $li) { $tanggal = date('Y-m-d', strtotime($li['tanggal'])); echo '<li>'.$li['ip'].' : '.$li['shout'].' <span>['.$tanggal.']</span></li>'; }

Selesai! Cukup mudah kan?
Karena ini hanya tutorial sederhana jadi tidak ada pengecekan input, karena itu sebaiknya lakukan filtering input terlebih dahulu sebelum data diproses ke database.

Source bisa didownload langsung atau dilihat di GitHub

3 Komentar

  • GravatarDwiJumat, 12 Maret 2010

    mas, trima kasih atas tutorialnya, berguna sekali..
    tapi saya sedikit bingung mas, saya punya situs blog wordpress (self hosting), nah bagaimana caranya memasukkan shoutbox ini mas??

  • GravatarjenggoSabtu, 13 Maret 2010

    cukup di copy-paste ke 'bagian' yang diinginkan (sidebar kah, footerkah). jika ingin yang langsung install coba cari di wordpress.org (http://wordpress.org/extend/plugins/search.php?q=shoutbox)

  • GravatarsandipradanaMinggu, 20 Juni 2010

    coba dicoba dan dicoba biar mantap

Tulis Komentar