Tutorial jQuery : Membuat News Ticker RSS Blog Dengan jQuery

Gara-gara bangun kesiangan, akhirnya saya tidak jadi balik ke pulau seberang. Lantaran tadi malam keliling untuk berwisata kuliner bersama salah seorang teman, dan ketika sampai di rumah saya langsung mengerjakan proyek yang masih mangkrak. Kebetulan yang memberi proyek ini adalah teman saya di kampus, sebut saja namanya mas Heri. Mas Heri ini ingin membuat sebuah web e-commerce dengan produk sandal. Dan dia menginginkan adanya slide produk layaknya sebuah news ticker. Sebenarnya sudah banyak blog yang menyediakan tutorial dalam membuat sebuah newsticker, baik itu dengan cara yang rumit maupun dengan cara yang gampang. Tapi kebanyakan cara pembuatannya memang sulit, maka dari itu saya berinisiatif untuk membuat news ticker sendiri. Lagi-lagi kali ini saya menggunakan bantuan jQuery, sekalian untuk memperdalam pengetahuan saya tentang jQuery. Setelah membaca dokumentasi di web jQuery.com, akhirnya saya memutuskan untuk menggunakan fungsi .prepend(). Dokumentasi selengkapnya, bisa dibaca di http://api.jquery.com/prepend/.

Setelah baca mantera jQuery yang lainnya, akhirnya saya menemukan juga logika untuk membuat news ticker sederhana. Kira-kira cara kerjanya seperti ini :

Data yang terakhir/data yang paling bawah diambil terlebih dahulu, dengan menghapusnya dari barisan yang ditampilkan. Kemudian memindahkannya ke atas/ke urutan yang paling depan, dan ditampilkan dengan effect slidedown menggunakan fungsi .slideDown() dari jQuery. Saya buatkan dalam sebuah function, yang dipanggil dalam hitungan waktu tertentu dengan menggunakan fungsi setInterval(). Kira-kira scriptnya seperti di bawah ini :

function slideNews()
	{
	    akhir = $('ul#kotakticker li:last').hide().remove();
	    $('ul#kotakticker').prepend(akhir);
        $('ul#kotakticker li:first').slideDown("slow");
	}
setInterval(slideNews, 5000);

Dan untuk syntax tampilan html-nya, kira-kira seperti di bawah ini :

<ul id="kotakticker">
    <li> Berita 1 </li>
    <li> Berita 2 </li>
    <li> Berita 3 </li>
    <li> Berita 4 </li>
    <li> Berita 5 </li>
</ul>

Nah, karena pada studi kasus kali ini yang akan saya tampilkan adalah RSS blog, lebih tepatnya blog saya pribadi (numpang ngeksis) maka saya menggunakan sedikit syntax php untuk menampilkan cuplikan RSS yang diambil dari RSS feed yang sudah disediakan wordpress (karena blog saya menggunakan engine wordpress)

Menampilkan RSS Blog WordPress Dengan PHP

<?php
    function startElement($parser, $name, $attrs) {
    global $insideitem, $tag, $title, $description, $link, $pubDate;
    if ($insideitem) {
    $tag = $name;
    } elseif ($name == "ITEM") {
    $insideitem = true;
    }
    }
    function endElement($parser, $name) {
    global $insideitem, $tag, $title, $description, $link, $pubDate, $i;
    if (!$i) {
    $i=0;
    }
    if (($name == "ITEM") && ($i<=3)) {
    $i++;
    printf("<li><b><a href='%s' target=_blank>%s</a></b><p style=' text-align:justify;'><span style='font-size:11px;'>%s %s</span></p></li>",
    trim($link),trim($title), substr($pubDate,0,16), $description);
    $title = "";
    $description = "";
    $link = "";
    $pubDate="";
    $insideitem = false;
    }
    }
    function characterData($parser, $data) {
    global $insideitem, $tag, $title, $description, $link, $pubDate;
    if ($insideitem) {
    switch ($tag) {
    case "TITLE":
    $title .= $data;
    break;
    case "DESCRIPTION":
    $description .= $data;
    break;
    case "LINK":
    $link .= $data;
    break;
    case "PUBDATE":
    $pubDate .= $data;
    break;
    }
    }
    }
    $url = "http://gedelumbung.com/wp-rss.php";
    $insideitem = false;
    $tag = "";
    $title = "";
    $description = "";
    $link = "";
    $pubDate ="";
    $xml_parser = xml_parser_create();
    xml_set_element_handler($xml_parser, "startElement", "endElement");
    xml_set_character_data_handler($xml_parser, "characterData");
    $fp = fopen($url,"r");
    while ($datarss = fread($fp, 100000))
    xml_parse($xml_parser, $datarss, feof($fp)) or die(sprintf("XML error: %s pada baris %d",
    xml_error_string(xml_get_error_code($xml_parser)),
    xml_get_current_line_number($xml_parser)));
    fclose($fp);
    xml_parser_free($xml_parser);
    ?>

Dan inilah hasil akhirnya :

Gampang kan cara pembuatannya…??? Kalau masih belum jelas, silahkan download file akhirnya di bawah postingan ini. Semoga bisa bermanfaat untuk rekan-rekan yang kebetulan sedang mencari contoh news ticker sederhana dengan jQuery.

Happy Blogging and Keep Coding

Cheerrrsss….!!!!