(Tutorial PHP) Membuat Berita Dinding Auto Refresh Seperti Twitter dengan jQuery dan PHP

Halo sahabat Belajar Pintar PHP, kali ini saya akan memberikan source code php yang tentunya bisa saya jamin anda akan sangat menyukainya. Pada kasus ini kita akan melibatkan bantuan dari Ajax Jquery. Penasaran ??? Oke langsung saja.
Anda Tau kan Twitter ?? 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.

Berikut 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`)

);

1. Pada halaman index.php, Copy-kan kode php di bawah ini :

<html>

<head>

<title>Berita dinding seperti  twitter</title>

<style>

body{background-color:#93C9FF;font-family:verdana;font-size:10pt}

#papan{width:600;height:300;border:#efefef 1px solid;

background-color:white;overflow:hidden}

.p{background-color:white;height:70;text-align:left;

border-bottom:#cdcdcd 1px solid;padding:5}

.x{background-color:white;height:70;text-align:left;

border-bottom:#cdcdcd 1px solid;display:none;padding:5}

a{color:#306DA3;text-decoration:none}

</style>

<script type="text/javascript"  src="jquery-1.4.3.min.js"></script>

<script>

var i = 5;

var jumlah;

var brt = new Array();

var rotasi = 5;

var nomorakhir;

var posisiar;

$(document).ready(function(){

    jumlah =  $("#jumlahberita").html();

    jumlah =  parseInt(jumlah);

    nomorakhir =  $("#nomorakhir").html();

     for(x=1;x<=jumlah;x++){

        brt[x] =  $("#drz"+x).html(); //mengambil berita ,menjadi array brt[]

    }

    cek();

    putar();

});

function cek(){

    $.ajax({

        url:  "cekdata.php",

        data:  "akhir="+nomorakhir,

        cache:  false,

        success:  function(msg){

             if(msg!=""){

                 data = msg.split("||");

                 nomorakhir = data[0];

                 brt.push(data[1]); //tambahkan berita baru ke array brt[] di posisi  akhir

                 jumlah++;

                 rotasi = jumlah;

            }

        }

    });

    var waktucek  = setTimeout("cek()",4000);

}

function putar(){

     if(jumlah>4){                    //kita putar atau scroll jika jumlah berita lebih dari 4

         $("#papan").prepend("<div id=drz"+i+"  class=x><span  id=s"+i+">"+brt[rotasi]+"<br></span></div>");

         $("#s"+i).hide();

        $("#drz"+i).slideDown(400);  //fungsi untuk melakuan scrolldown

         $("#s"+i).fadeIn(3000);      //fungdi untuk menampilkan berita secara fade in

         rotasi--;

        i++;

         if(rotasi<=(jumlah - 5)){

             rotasi = jumlah;

        }

    }

    var  waktuputar = setTimeout("putar()",4000);

}

</script>

</head>

<body>

<center>

<br>

<div id=papan>

<?php

include "koneksi.php";

$i = 1;

//mengambil 5 berita terbaru dari database

$berita = mysql_query("SELECT * FROM tabel_berita,tabel_user

WHERE tabel_user.nomor=tabel_berita.user_nomor

ORDER by tabel_berita.nomor DESC LIMIT 5");

while($b = mysql_fetch_array($berita)){

    echo  "<div class=p id=drz$i>";

    echo  "<img src='".$b['photo']."' align=left><b><a  href=#>".$b['nama']."</a></b> ";

    echo  "<font  size=1>".$b['waktu']."</font><br>".$b['berita']."<br>";

    echo  "</div>\n";

    $i++;

}

//mengambil nomor terakhir, yang nanti berguna untuk  pengecekan

$akhir = mysql_query("SELECT nomor FROM  tabel_berita ORDER BY nomor DESC LIMIT 1");

$a = mysql_fetch_array($akhir);

$akhirnya = $a['nomor'];

?>

</div>

<?php

$j = $i - 1;

echo "<span id=jumlahberita  style='display:none'>$j</span>";

echo "<span id=nomorakhir  style='display:none'>$akhirnya</span>";

?>

<p>

<script>

function buka(id,no){

     window.open("formberita.php?userid="+id+"&no="+no,"","width=500,height=400,toolbar=0");

}

</script>

Tes kirim pesan dari :<p>

<ul>

<li><a  href="javascript:buka('alex',1)">Alex</a>

<li><a  href="javascript:buka('budi',2)">Budi</a>

<li><a  href="javascript:buka('Mitha',3)">Mitha</a>

<li><a  href="javascript:buka('bagas',4)">Bagas</a>

<li><a  href="javascript:buka('Luthor',5)">Luthor</a>

</ul>

</body>

</html>

2. Pada Halaman cekdata.php, untuk mengecek berita terbaru di database copy-kan code dibawah ini kedalam halaman cekdata.php :

<?php

include "koneksi.php";

$a = $_GET['akhir'];

$berita = mysql_query("SELECT * FROM  tabel_berita,tabel_user

WHERE tabel_user.nomor=tabel_berita.user_nomor

AND tabel_berita.nomor>$a");

while($b = mysql_fetch_array($berita)){

    echo  $b[0]."||";

    echo  "<img src='".$b['photo']."' align=left><b><a  href=#>".$b['nama']."</a></b> ";

    echo  "<font  size=1>".$b['waktu']."</font><br>".$b['berita']."<br>\n";

}

?>

Sekian dari saya dan selamat mencoba.

Download Source Code Lengkapnya pada link dibawah ini :

Download

14 Komentar

fulan23 Januari 2013 pukul 01.01
gak jelas gan scriptnx n ada script yg lengkap g tuk membuat ajax yg ketika ada data masuk di database langsung tampil data tersebut di browser tanpa direfresh n tolong dishare ya n ni emailku: amazing_coy@yahoo.co.id
BalasHapus
Balasan
Anonim30 Januari 2013 pukul 04.12
Tidak jelas dalam struktur databasenya klo databsenya dibuat 2 berati tidaknyambung sama scriptnya, sedangkan klo nam tabelnya bisa tapi tdik di jelaskan untuk relasi databasenya???
BalasHapus
Balasan
Ivan Silalahi30 Januari 2013 pukul 15.58
@Anonim:
anda membuat komentar untuk menjatuhkan blog ini atau memburuk-burukan blog ini ??

saya rasa script diatas benar dan sudah saya buktikan ,,

jadi mungkin kesalahan ada pada anda, bukan pada blog kami ,

thanks
BalasHapus
Balasan
Anonim5 Februari 2013 pukul 07.18
mungkin dia kebingungan karena dilihat di databasenya kosong , padahal semua script berjalan dengan lancar , tetapi ada bagian bagian tertentu yg orang orang tertentu tidak dpt memahaminya .
didalam databasenya pada tabel tabel_user itu sebaiknya isikan mas Ivan agar mempermudah pemahaman orang banyak.
terima kasih...
BalasHapus
Balasan
Anonim5 Februari 2013 pukul 07.22
kalau untuk waktu asalnya gimana mas tuh ya?
kaya di twitter & facebook gitu yg 1 minute ago , 2 minutes ago .yg kaya begitu . mohon pencerahannya.
BalasHapus
Balasan
Ivan Silalahi5 Februari 2013 pukul 23.24
Untuk semua yang mengalami masalah dalam pembuatan program diatas, saya sudah menyediakan link download source code buat anda semua pada akhir postingan ini. thanks
BalasHapus
Balasan
My Jobseeker12 Februari 2013 pukul 05.55
thx infonya sangat bermanfaat coment back ia and jangan lupa follow jga untuk mempererat pertemanan di dunia maya http://rizkyadipranata04.blogspot.com/
BalasHapus
Balasan
Dani Blogger6 Oktober 2013 pukul 20.55
gak bisa di download link nya mati gan. gimana ini
BalasHapus
Balasan
I'm AJUN14 November 2013 pukul 00.40
Selama sore,
Terimakasih sebelumnya, setelah saya coba, scriptnya dapat saya gunakan.
Namun bisakah tampilan nya tidak bergerak-gerak terus?
Bagaimana supaya tampilannya bergerak ke bawah hanya ketika ada data baru saja?
BalasHapus
Balasan
Unknown7 Desember 2013 pukul 01.06
terima kasih banyak master ivan, sudah saya coba dan berhasil. sangat membantu,,,
BalasHapus
Balasan
Unknown30 Juni 2014 pukul 22.41
Komentar ini telah dihapus oleh pengarang.
BalasHapus
Balasan
Anonim27 November 2014 pukul 07.46
Kalo Membuat Foto Dinding Auto Refresh Seperti Twitter dengan jQuery dan PHP, gimana...? Boleh copas source codenyeeee...

Thank
BalasHapus
Balasan
Anonim1 Desember 2014 pukul 20.36
Ok, Thank. Mas Maaf Bade Nimba Ilmu. Kalo (Tutorial PHP) Membuat FOTO Dinding Auto Refresh Twitter dengan jQuery dan PHP gimana...? Ditunggu Source Cosdenya Neeh... Mksh
BalasHapus
Balasan
Berita CPNS ASN PPPK19 September 2020 pukul 21.51
Terimakasih tutorial membuat Berita Dinding Auto Refresh
BalasHapus
Balasan

Tambahkan komentar

(Tutorial PHP) Membuat Berita Dinding Auto Refresh Seperti Twitter dengan jQuery dan PHP

Algoritma :

Download

14 Komentar

Cara Membuat Form Entry Data, Edit/Update, Hapus Di PHP

Fungsi Tanggal dan Waktu (Date/Time) pada PHP

Tutorial Array PHP Lengkap dengan Contoh dan Pembahasan

CodeIgniter PHP : (Buku Tutorial CodeIgniter PHP Bahasa Indonesia)

(Tutorial PHP) Membuat Berita Dinding Auto Refresh Seperti Twitter dengan jQuery dan PHP

Algoritma :

Download

Tutorial terkait lainnya

14 Komentar