Membuat Berita Dinding Auto Refresh Seperti Twitter dengan jQuery dan PHP
Kalau kita masuk ke halaman depan twitter.com, maka akan kita lihat semacam berita dinding yang menampilkan status atau berita terbaru dari para twitter. Berita terbaru tersebut ditampilkan secara scrolling, kemudian menngunakan efek fade in. Pada artikel kali ini kita akan belajar membuat seperti itu, dimana pada program kita kali ini, kita akan menampilkan lima berita terbaru secara scolling dan fade in (dari pudar mejadi jelas). Kemudian program kita secara periodik akan mengecek ke database, jika ada berita terbaru, maka akan langsung kita update di berita dinding.
Sekarang mari kita lihat algoritma dan kode dari program ini.
Algoritma
- Membuat database user dan berita
- Mengambil 5 berita terbaru dari database
- Memasukkan 5 berita ke dalam suatu variabel array, supaya gampang melakukan proses scrolling
- Melakukan scrolling 5 berita terbaru tersebut
- Mengecek berita terbaru setiap 4 detik, jika ada yang terbaru, tambahkan ke dalam variabel array untuk scrolling tersebut.
Kode Lengkapnya
Berikut adalah struktur tabel_user dan tabel_berita
CREATE TABLE `tabel_user` (
`nomor` int(5) NOT NULL auto_increment,
`userid` varchar(30) NOT NULL,
`password` varchar(30) NOT NULL,
`nama` varchar(30) NOT NULL,
`email` varchar(30) NOT NULL,
`photo` varchar(50) NOT NULL,
PRIMARY KEY (`nomor`)
);CREATE TABLE `tabel_berita` (
`nomor` int(5) NOT NULL auto_increment,
`user_nomor` int(5) NOT NULL,
`waktu` datetime NOT NULL,
`berita` tinytext NOT NULL,
PRIMARY KEY (`nomor`)
);