KetikSpasi: Menampilkan Posting Menggunakan TimeAgo JQUERY

Minggu, 25 Desember 2011

Menampilkan Posting Menggunakan TimeAgo JQUERY

Kalau kita amati pada saat update status ataupun berkomentar kita akan melihat format waktu seperti beberapa detik yang lalu, beberapa menit yang lalu (1 menit yang lalu, 2 minggu yang lalu, 2 tahun yang lalu) nah untuk membuat tampilan waktu posting tersebut kita akan menggunakan JQuery.
Contoh tampilan seperti pada gambar disamping kiri.

Buatlah tabel POSTING pada database yang terdiri dari field:

no_posting (varcher,10)

isi_posting (varcher, 300)

tgl_posting (timestamp)

Kalau sudah Ingat tgl_posting harus dalam TIMESTAMP.

Saya asumsikan anda sudah bisa membuat form untuk posting, yang akan saya bahas disini bagaimana cara menampilkan jam, hari, tahun pada postingan tersebut. Tutorial ini hanya membuat satu haaman misal TampilkanPosting.php yang didalamnya sudah ada skript untuk koneksi ke database.

Ikuti langkah-langkahnya berikut saya menggunakan DREAMWEAVER:

1. Download jquery.min.js disini DOWNLOAD

2. Download jquery.timeago.js disini DOWNLOAD

3.Tulis skript berikut diantara <head> Disini </head> pada halaman "TampilkanPosting.php " yang akan menampilkan hasil postingan.

contoh:

<head>

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.timeago.js" type="text/javascript"></script>
 <script type="text/javascript">
 jQuery(document).ready(function() {
   jQuery("abbr.timeago").timeago();
 });
 //skrift timeago atau waktu mundur
 </script>

//src ="TEMPAT ANDA MELETAKAN Jquery.min.js DAN jquery.timeout.js"


4. Buat RESORDSET dengan nama rsPosting yang berisi tabel posting dari database yang telah kita buat.

5.Tulis skript pada bagian BODY:

<body>

<td bgcolor="#FFFFCC"><span class="style1"><?php echo $row_rsPosting['no_posting']; ?></span></td>
       
<td bgcolor="#FFFFCC"><span class="style2"><?php echo $row_rsPosting['isi_posting']; ?> </td>
<td(<abbr class="timeago" title="<?php echo $row_rsPosting['tgl_posting']; ?>"><?php echo $row_rsPosting['tgl_posting']; ?></abbr>) </span></td>

6. Format tanggal dan Jam yang digunakan pada tutor ini menggunakan ISO 8601 atau iso-8859-1.


7.Perhatikan pada bagian tgl_posting, Class di setting pada timeago ini diambil dari jquery.timeago.js dan title berisi tanggal posting.

8. Atau alternatif cara penuliasn yang lainnya dapat seperti begini:
(<abbr class='timeago' title='".$b['tgl_posting']."'>".$b['tgl_posting']." </abbr>)
Berikut skript lengkapnya sebagai contoh:

include "terkoneksikan.php";
$i = 1;

//mengambil 5 berita terbaru dari database

$berita = mysql_query("SELECT * FROM status,user
WHERE user.no_user = status.no_user
ORDER by status.no_status DESC LIMIT 7");
while($b = mysql_fetch_array($berita)){
    echo "<div class=p id=drz$i>";
    echo "<img src='../avatar/".$b['foto']."' width=30 align=left><b><a href=../komunitas/teman_status.php?nama=" .$b['nama']." target=_parent>".$b['nama']." </a></b> <br>";
    echo "<font size=1>".$b['tgl_status']." (<abbr class='timeago' title='".$b['tgl_posting']."'>".$b['tgl_posting']." </abbr>)<br>Status: </font><font size=1>".$b['isi_status']."</font><br>";
    echo "</div>\n";
    $i++;
}



9. Untuk memodifikasi tulisan minutes ago, hours ago, anda bisa mengeditnya pada bagian jquery.timeago.js.


10. Untuk melihat hasilnya silahkan lihat di SCCONLINE

11. Alternatif lain yang menjadi sumber dari tutorial ini DI SINI