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

Posted on

Halo rekan rekan , kali ini saya akan memberikan source code php yang pastinya dapat saya jamin kamu akan amat menyukainya. Di kasus ini kita akan melibatkan bantuan dari Ajax Jquery. Penasaran ??? Oke seketika saja.
Sahabat Tau kan Twitter ?? kalau kita masuk ke halaman depan twitter.com, karenanya 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. Di artikel kali ini kita akan belajar merancang seperti itu, dimana di 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, seandainya ada berita terbaru, karenanya akan seketika kita update di berita dinding.

twitter-wall

Sekarang ini mari kita lihat algoritma dan kode dari program ini.

Algoritma :

  1. Membangun database user dan berita
  2. Mengambil 5 berita terbaru dari database
  3. Memasukkan 5 berita ke pada suatu variabel array, supaya gampang menjalankan proses scrolling
  4. Mengerjakan scrolling 5 berita terbaru tersebut
  5. Mengecek berita terbaru setiap 4 detik, seandainya ada yang terbaru, tambahkan ke pada variabel array bagi scrolling tersebut.

Berikut Kode Lengkapnya
Berikut ialah 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. Di 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: “ahir=”+nomorakhir,
        cache: false,
        success: function(msg){
            if(msg!=””)”);
                nomorakhir = data[0];
                brt.push(data[1]); //tambahkan berita baru ke array brt[] di posisi ahir
                jumlah++;
                rotasi = jumlah;
           
        }
    });
    var waktucek = setTimeout(“cek()”,4000);
}
function putar(){
    if(jumlah>4){                   //kita putar atau scroll seandainya 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); //kegunaan bagi melakuan scrolldown
        $(“#s”+i).fadeIn(3000);     //fungdi bagi 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 bermanfaat bagi pengecekan
$ahir = mysql_query(“SELECT nomor FROM tabel_berita ORDER BY nomor DESC LIMIT 1”);
$a = mysql_fetch_array($ahir);
$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. Di Halaman cekdata.php, bagi 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 “<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”;

?>

Demikianlah dari saya dan selamat mencoba.

Unduh Source Code Lengkapnya di link dibawah ini :

Download

Leave a Reply

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