Shoutbox Sederhana Berbasis Ajax

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: