Indonesian (Bahasa Indonesia) translation by Amar Shaleh (you can also view the original English article)
Tutorial ini menunjukkan bagaimana menggunakan jQuery dan jGFeed plugin untuk mengambil Berita feed secara remote dan menulis hasil ke markup yang sudah ada. jGFeed adalah sebuah plugin jQuery yang memungkinkan Anda untuk mendapatkan 'setiap' RSS feed dari 'setiap' host dan mengembalikan sebuah objek JSON untuk penggunaan yang mudah.
Tutorial ini termasuk screencast tersedia untuk anggota Tuts + Premium.
Contoh kode dalam tutorial ini mungkin tidak bekerja di Internet Explorer 7 atau sebelumnya tetapi telah berhasil diuji pada Firefox, Safari, Chrome, dan IE8.
Langkah 1: Mengatur file untuk Tutorial
Sebelum kita mulai menulis kode apapun Mari kita membuat sebuah direktori mana untuk menempatkan file pembaca feed. Saya telah membuat sebuah direktori dalam Desktop saya disebut 'feedreader'. Di dalam direktori ini menciptakan lain satu disebut assets.
Kita juga akan perlu untuk men-download salinan sumber jGFeed. Anda dapat melakukannya di sini. Untuk contoh ini saya telah didownload file terkompresi dan ditempatkan di direktori 'assets'.
Akhirnya, mari kita membuat beberapa file teks kosong untuk menahan markup, javascript, dan style. Saya telah membuat struktur file berikut:
|-- assets | |-- feedreader.js | |-- jquery.jgfeed-min.js | `-- styles.css `-- index.html
Struktur file harus terlihat seperti:
Perhatikan bahwa index.html, feedreader.js dan styles.css harus kosong pada tahap ini.
Langkah 2: Markup
Kami markup untuk tutorial ini akan menjadi sangat sederhana, dan kita akan berasumsi bahwa Anda sudah tahu beberapa HTML, jadi kita akan memperkenalkan sekaligus.
Dalam file index.html kami kami akan link ke stylesheet yang kita akan menggunakan kemudian ke style dalam feed reader, kemudian tambahkan daftar link ke feed yang kita ingin mendapatkan dan akhirnya Tambahkan file javascript yang dibutuhkan untuk contoh.
Perhatikan bahwa kita menambahkan file Javascript pada akhir dari body. Ini adalah untuk meningkatkan kecepatan loading dirasakan halaman Anda, seperti browser dapat mulai menampilkan output tanpa harus menunggu untuk script dimuat.
Menambah index.html markup berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery + jGFeed AJAX Feed Reader Example</title> <link rel="stylesheet" href="assets/styles.css" type="text/css" /> </head> <body> <h1>jQuery + jGFeed AJAX Feed Reader Example</h1> <ul class="menu"> <li> <a class="ajax-feed-trigger" href="http://www.lupomontero.com/feed"> .lupomontero </a> </li> <li> <a class="ajax-feed-trigger" href="http://feeds.feedburner.com/nettuts"> Nettuts+ </a> </li> <li> <a class="ajax-feed-trigger" href="http://feeds.feedburner.com/jquery"> jQuery </a> </li> <li> <a class="ajax-feed-trigger" href="http://feeds2.feedburner.com/LearningJquery"> Learning jQuery </a> </li> </ul> <div id="ajax-feed-wrapper"> <div id="ajax-feed-container"> Click links above to fetch feeds </div> </div> <!-- Load jQuery, jGFeed and feedreader scripts --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script> <script type="text/javascript" src="assets/jquery.jgfeed-min.js"></script> <script type="text/javascript" src="assets/feedreader.js"></script> </body> </html>
Sekarang ketika kita membuka file ini di web browser kita harus melihat halaman berikut yang mengandung unsur-unsur awal untuk fee reader kami.
Perhatikan bahwa markup akan berfungsi fungsional untuk browser yang tidak menjalankan Javascript, dalam arti bahwa halaman akan masih menawarkan link yang valid ke feed, tetapi mereka akan jelas mengambil browser ke lokasi baru daripada menampilkan feed dalam pembaca kami .
Screencast penuh
Langkah 3: Menimpa pada link Default Onclick Event
Sejauh ini, ketika kita klik pada link browser kita akan diarahkan ke lokasi baru, lokasi yang ditentukan dalam link 'href' atribut. Ini adalah perilaku normal link, tetapi dalam kasus ini kita ingin mencegah browser akan di mana saja dan bukannya mengambil URL asynchronously, proses respon dan mencetak data dalam markup yang ada, berarti bahwa kita tidak harus meninggalkan situs dan news feed disajikan dengan cara yang kita inginkan.
Buka file kosong yang kita disimpan sebagai assets/feedreader.js (ini adalah di mana kita akan menulis script kami) dan menambahkan javascript berikut:
$(document).ready(function() { // Hook to click event for ajax-feed-trigger links $('a.ajax-feed-trigger').click(function(e) { // Prevent default click action e.preventDefault();
// Store reference to container object in local var var container = $('#ajax-feed-container');
// Empty container div and temporarily add "loading" style container.empty().addClass('loading');
// Get links href attribute var href = $(this).attr('href'); alert(href);
// Get feed using jGFeed
}); // End a.ajax-feed-trigger click event }); Kode di atas mengabaikan perilaku default pada link onclick event menggunakan jQuery's metode click pada semua tag 'a' class 'ajax-feed trigger'. Di dalam metode klik hal pertama yang kita lakukan adalah mencegah perilaku default menggunakan javascript's preventDefault(), maka kita kosong wadah div, tambahkan class loading yang akan memungkinkan kita untuk menambah style loading 'state' dan sekarang kita hanya menunjukkan nilai href atribut link diklik. Kami akan menggunakan panggilan untuk alert() untuk memeriksa bahwa kode kita bekerja sejauh ini.
Kembali pada browser, ketika kita klik pada link kita harus melihat dialog peringatan dengan URL link diklik.
Langkah 4: Mendapatkan News Feed sebagai JSON objek menggunakan jGFeed
Langkah berikutnya akan untuk mengirim request HTTP sebenarnya dengan jGFeed dan memeriksa bahwa kami mendapat response yang kami harapkan.
JGFeed plugin mengambil argumen sebagai berikut:
- url - URL feed yang Anda ingin muat
- callback - fungsi callback yang dipanggil setelah RSS feed dimuat
- num (opsional) - jumlah entri blog untuk memuat (defaultnya 3)
- key (opsional) - Google API key untuk menggunakan sementara loading RSS feed.
Info lebih lanjut tentang jGFeed:
http://jQuery-howto.blogspot.com/2009/05/Google-Feeds-api-jQuery-plugin.html
Dalam contoh ini kita akan memasukan nilai link href atribut sebagai url, fungsi callback anonim dan kami akan menentukan bahwa kita ingin membatasi hasil hingga 5.
Dalam assets/feedreader.js menambahkan panggilan ke jGFeed sehingga script sekarang harus terlihat seperti daftar di bawah ini:
$(document).ready(function() { // Hook to click event for ajax-feed-trigger links $('a.ajax-feed-trigger').click(function(e) { // Prevent
default click action e.preventDefault();
// Store reference to container object in local var var container = $('#ajax-feed-container');
// Empty container div and temporarily add "loading" style container.empty().addClass('loading');
// Get links href attribute var href = $(this).attr('href');
// Get feed using jGFeed $.jGFeed( href, function(feeds) { // Check for errors if (!feeds) { // there was an error container.append('Error fetching feed.'); return false; } }, 5 ); // End jGFeed }); // End a.ajax-feed-trigger click event }); Kita sekarang dapat menggunakan Firebug untuk melihat apa yang dilakukan jGFeed. Klik pada salah satu link, buka tab 'Net' di Firebug dan menemukan request JSON. Ini harus mengucapkan sesuatu seperti 'GET load?v1.0&callback=jsonp12'. Jika Anda memperluas pandangan Anda harus dapat melihat objek JSON dan data di dalamnya.
Langkah 5: Membangun Markup untuk setiap entri feed secara dinamis
Sekarang bahwa kita tahu bahwa kita mendapatkan data, kita dapat melanjutkan untuk melakukan sesuatu dengan itu. Dalam kasus ini kita ingin iterate melalui entri dalam feed dan menambahkan string dengan HTML markup yang ada wadah yang kami ciptakan dalam file index.html kami.
Namun, sebelum iterasi melalui entri kami perlu mempersiapkan wadah. Kita menyembunyikan div untuk memastikan bahwa kita tidak melihat apa-apa sampai kita telah selesai memanipulasi isi dari tag kontainer. Kami juga menghapus class loading ketika div tersembunyi dan menambahkan judul feed dalam tag judul.
Kami menggunakan for loop untuk lebih properti entries feed objek yang dikembalikan oleh jGFeed fungsi callback kita. Dalam loop kita hanya membangun sebuah string dengan beberapa HTML markup untuk menampilkan properti dari setiap entri. Pada akhir setiap iterasi, kita menambahkan string HTML ini ke wadah feed.
Setelah kami selesai mempopulasikan wadah div dengan semua entri yang kita sebut JQuery's show() metode untuk fade in div dan akhirnya membuatnya terlihat lagi.
$(document).ready(function() { // Hook to click event for ajax-feed-trigger links $('a.ajax-feed-trigger').click(function(e) { // Prevent default click action e.preventDefault();
// Store reference to container object in local var var container = $('#ajax-feed-container');
// Empty container div and temporarily add "loading" style container.empty().addClass('loading');
// Get links href attribute var href = $(this).attr('href');
// Get feed using jGFeed $.jGFeed( href, function(feeds) { // Check for errors if (!feeds) { // there was an error container.append('Error fetching feed.'); return false; }
container.hide(); container.removeClass('loading'); container.append('<h2>' + feeds.title + '</h2>');
// Process feed entries for (var i=0; i<feeds.entries.length; i++) { var entry = feeds.entries[i];
// Build HTML string for entry var html = '<div class="ajax-feed-item">'; html += '<hr /><h2><a href="' + entry.link + '">'; html += entry.title + '</a></h2>'; html += '<div
class="ajax-feed-date">'; html += entry.publishedDate + '</div>'; html += '<div class="ajax-feed-author"> Posted by '; html += entry.author + '</div>'; html += '<div
class="ajax-feed-content-snippet">'; html += entry.contentSnippet + '</div>'; html += '</div>';
container.append(html); }
container.show('slow'); }, 5 ); // End jGFeed }); // End a.ajax-feed-trigger click event }); Jika Anda mengklik salah satu link sekarang Anda akan melihat feed berita seperti ditunjukkan pada gambar di bawah.
Step 6: Menambahkan Link 'Read More' untuk menampilkan isi penuh dari entri feed
OK, contoh tampaknya bekerja cukup baik, tapi ada masih banyak mengutak-atik yang bisa kami lakukan. Dalam hal ini kita akan menambahkan 'Read more' jenis link yang akan menampilkan isi penuh entri. Sampai sekarang kami telah hanya menggunakan properti contentSnippet di setiap objek entri. Hal ini berguna karena kita ingin menampilkan entri dalam daftar kompak, tapi kami juga memiliki isi penuh di properti lain yang disebut 'content', jadi kami akan menambahkan selengkapnya (+/-) link yang akan beralih di antara potongan dan isi penuh sehingga kita dapat membaca full feed entri tanpa meninggalkan halaman kami.
Untuk melakukannya, pertama kita perlu menambahkan konten untuk string HTML kita membangun dalam loop, tetapi kita akan mengatur ketinggian div konten ke nol dan mereka overflow ke 'hidden' untuk menyembunyikan mereka karena kita hanya akan menggunakannya untuk menahan data aktual. Link kami hanya akan menukar isi dari div 'visible' potongan dengan div. konten 'invisible'
Tepat sebelum kami menampilkan feed pada akhir fungsi callback yang kita diberikan kepada jGFeed, kita juga perlu menambahkan onclick event handler untuk link 'Read more' kami. Kita melakukan ini dengan cara yang sama kita lakukan dengan link yang kita gunakan untuk mengambil feed, menggunakan jQuery's click() metode.
$(document).ready(function() { // Hook to click event for ajax-feed-trigger links $('a.ajax-feed-trigger').click(function(e) { // Prevent default click action e.preventDefault();
// Store reference to container object in local var var container = $('#ajax-feed-container');
// Empty container div and temporarily add "loading" style container.empty().addClass('loading');
// Get links href attribute var href = $(this).attr('href');
// Get feed using jGFeed $.jGFeed( href, function(feeds) { // Check for errors if (!feeds) { // there was an error container.append('Error fetching feed.'); return false; }
container.hide(); container.removeClass('loading'); container.append('<h2>' + feeds.title + '</h2>');
// Process feed entries for (var i=0; i<feeds.entries.length; i++) { var entry = feeds.entries[i];
// Build HTML string for entry var html = '<div class="ajax-feed-item">'; html += '<hr /><h2><a href="' + entry.link + '">'; html += entry.title + '</a></h2>'; html += '<div class="ajax-feed-date">'; html += entry.publishedDate + '</div>'; html += '<div class="ajax-feed-author"> Posted by '; html += entry.author + '</div>'; html += '<div class="ajax-feed-content-snippet">'; html += entry.contentSnippet + '</div>'; html += '<div id="ajax-feed-content-'+i; html += '" class="ajax-feed-content" '; html += 'style="height:0px; overflow:hidden;">'; html += entry.content + '</div>'; html += '<div><a class="ajax-feed-readmore" '; html += 'href="' + i + '">+</a></div>'; html += '</div>';
container.append(html); }
// Hook to click event for ajax-feed-trigger links $('a.ajax-feed-readmore').click(function(e) { // Prevent default click action e.preventDefault();
var content_id = $(this).attr('href'); var div_id = 'ajax-feed-content-' + content_id; var content_div = $('#' + div_id); var content_txt = content_div.html(); var snippet_div =
content_div.prev(); var snippet_txt = snippet_div.html();
// Swap text content between divs content_div.html(snippet_txt); snippet_div.html(content_txt);
if ($(this).html() === '-') { $(this).html('+'); } else { $(this).html('-'); } });
container.show('slow'); }, 5 ); // End jGFeed }); // End a.ajax-feed-trigger click event }); Pembaca harus sekarang menampilkan '+' dan '-' tombol yang toggle antara potongan konten dan isi penuh untuk setiap entri.
Langkah 7: Styling Reader
Feed reader sekarang bekerja... hurray! Tapi mari kita jujur, tidak terlihat sangat baik. Jadi mari kita menempatkan icing pada kue. Di bawah ini saya telah menyertakan beberapa style sebagai contoh bagaimana pembaca bisa mencoba. Anda mungkin telah memperhatikan bahwa kami digunakan class untuk setiap elemen dalam markup kami, sehingga harus relatif mudah untuk merujuk kepada setiap elemen kamiPada CSS selector dalam cara yang sama bahwa kami memilih mereka dengan jQuery.
/* Colours: red: #C74C44 dark red: #8C413A grey: #3F474C dark beige: #B5B095 beige: #DBD5B6 */
html { color: #F0F0F0; background-color: #8C413A; font-family: "Helvetica", sans-serif; }
body { font-size: 12px; margin: 10px 20% 30px 20%; }
div, ul, li { margin: 0; padding: 0; }
img { border: 0; }
li { list-style: none; }
h1, h2, h3 { font-size: 100%; font-weight: normal; }
h1 { color: #DBD5B6; font-size: 4.6em; line-height: 1.1em; text-shadow: 1px 1px 0.3em #3F474C; background-image: url(logo.png); background-repeat: no-repeat; padding: 16px 0 0 148px; margin: 0px; height: 114px; }
h2 { color: #DBD5B6; font-size: 2.6em; text-shadow: 1px 1px #3F474C; padding: 0; margin: 0 0 25px 0; }
a { color: #DBD5B6; text-decoration: none; }
ul.menu { margin: 44px 0px 24px 0px; padding: 0px; } ul.menu li { display: inline; margin: 0px 5px 0px 0px; padding: 12px; background-color: #3F474C; border: 1px solid #B5B095;
-moz-border-radius: 5px; -webkit-border-radius: 5px; font-size: 1.2em; text-shadow: 1px 1px #3F474C; } ul.menu li:hover { background-color: #B5B095; text-shadow: 1px 1px 0.2em #3F474C; }
div#ajax-feed-wrapper { padding: 20px; overflow: hidden; background-color: #C74C44; border: 1px solid #B5B095; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.loading { width: 36px; height: 36px; background-image: url(ajax-loader.gif); background-repeat: no-repeat; background-position: 20px 20px; }
div.ajax-feed-item { background-color: #8C413A; padding: 10px; margin-bottom: 10px; }
div.ajax-feed-item h3 { font-size: 1.8em; text-shadow: 1px 1px 0.3em #3F474C; padding: 0; margin: 3px 0 15px 0; }
div.ajax-feed-date, div.ajax-feed-author { font-size: 0.8em; }
div.ajax-feed-content-snippet { margin: 3px 0px 10px 0px; padding: 15px 5px 5px 5px; border-top: 1px solid #C74C44; text-shadow: 1px 1px #3F474C; }
a.ajax-feed-readmore { display: table-cell; padding: 1px 5px; border: 1px solid #DBD5B6; }
a.ajax-feed-readmore:hover { background-color: #B5B095; } Voila! Sekarang sudah terlihat jauh lebih baik ;-)
