Popular Posts
-
Pengenalan PHP Tutorial yang saya tulis kali ini berhubungan dunia website yang menggunakan bahasa PHP. Sebelum masuk ke tips dan trik PHP... -
Catatan Penting: Data yang dapat dijumlahkan harus berupa angka atau data string yang dapat diubah menjadi angka ( string yang terdiri ata...
-
Halo smua ,, kali ini saya akan membagikan bagaimana cara untuk membuat submit form atau proses dari suatu form dengan menggunakan Ajax Jqu...
Selasa, 02 April 2013
Membuat Berita Dinding Auto Refresh Seperti Twitter dengan jQuery dan PHP
23.03 | 
Diposting oleh
Suparno, M.Pd
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 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`)
);
`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>
<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";
}
?>
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
Label:
Tutorial PHP
Langganan:
Posting Komentar (Atom)
0 komentar:
Posting Komentar