7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. JavaScript

Membangun RSS Feed Reader dengan jQuery dan jGFeed

Scroll to top
Read Time: 11 mins

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:

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:

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:

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:

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.

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.

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.

Voila! Sekarang sudah terlihat jauh lebih baik ;-)


Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.