Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Cara Membangun RSS Pembaca dengan jQuery Mobile

by
Read Time:15 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Putri (you can also view the original English article)

Dua kali sebulan, kita mengunjungi kembali beberapa posting favorit pembaca dari sepanjang sejarah Nettuts+. Tutorial ini pertama kali diterbitkan pada Oktober 2010.

Hari ini, kita akan terjun ke jQuery Mobile, yang, pada saat penulisan ini, dalam keadaan RC1. Kita akan membangun pembaca Tuts+ RSS sederhana, menggunakan PHP dan jQuery Mobile. Ketika kita selesai, Anda akan memiliki kemampuan untuk menambahkan proyek sederhana ini ke iPhone atau ponsel Android Anda dengan mengklik tombol, serta keterampilan untuk membangun aplikasi web seluler kustom Anda sendiri!


Langkah 1: Buat Garis Besar Proyek

Itu selalu membantu untuk menguraikan terlebih dahulu apa yang ingin/dicapai oleh proyek Anda.

  • Tampilkan daftar setiap situs Tuts+, beserta logo kotaknya
  • Tampilkan umpan untuk setiap situs, saat diklik
  • Buat *artikel* stylesheet dasar untuk merender setiap posting
  • Buat ikon Apple-touch untuk pengguna yang menambahkan "aplikasi" ke telepon mereka
  • Gunakan YQL untuk mengambil umpan RSS yang diinginkan
  • Menerapkan caching "file teks" bentuk dasar setiap tiga jam

Langkah 2: Mulai

Langkah selanjutnya adalah mulai membuat proyek kita. Silakan membuat folder baru -- beri nama sesuai keinginan -- dan tambahkan file header.php baru. *Perhatikan bahwa proyek ini menggunakan PHP. Jika Anda tidak terbiasa dengan bahasa ini, jangan lewatkan bagian PHP! Dalam file ini, kita akan mereferensikan ponsel jQuery, stylesheetnya, dan aset apa pun yang dibutuhkan. Jika hanya untuk tetap teratur, saya telah menempatkan file header.php saya di dalam folder include/.

Ada beberapa hal yang perlu diperhatikan di sini.

  1. Diperlukan dokumen HTML5. Tetapi Anda harus menggunakannya!
  2. Tag X-UA-Compatible memaksa IE untuk menggunakannya sebagai mesin rendering terkini
  3. Kita perlu referensi stylesheet jQuery Mobile. Anda dapat menggunakan CDN mereka, dan menghemat bandwidth!
  4. Jika Anda ingin menentukan ikon kapan pengguna menambahkan halaman web Anda ke layar beranda iPhone (atau Android) mereka, tambahkan tag link, dengan atribut rel ikon apple-touch-icon.
  5. Kita mereferensikan versi terbaru dari jQuery: 1.4.3
  6. Terakhir, kita memuat file skrip seluler jQuery (saat ini dalam Alpha 1)

Struktur Dasar

Framework kerja jQuery Mobile dapat diaktifkan dengan menerapkan atribut data-* unik ke kode Anda. Struktur dasar untuk sebagian besar situs akan terlihat mirip dengan:

Tambahkan kode di atas ke file index.php baru, di dalam root proyek Anda.

Kita harus memberi tahu jQuery tentang proyek. Misalnya, cobalah untuk tidak menganggap setiap file sebagai halaman. Secara teknis, Anda dapat membuat beberapa halaman sekaligus, dengan menambahkan atribut data-role="page" tambahan. Ini disebut sebagai halaman dalam.

Lebih lanjut, framework ini memiliki pengaturan dan stylings khusus untuk header, area konten utama, dan footer. Untuk memberi tahu jQuery Mobile tentang lokasi elemen-elemen ini, kita menambahkan atribut berikut.

  • data-role="header"
  • data-role="content"
  • data-role="footer"
No Data Attributes AppliedNo Data Attributes AppliedNo Data Attributes Applied

Tidak ada atribut data-role yang telah diterapkan.

Data AppliedData AppliedData Applied

Atribut Data-role diterapkan.

Langkah 3: Daftar Situs Tutorial

Sekarang struktur halaman index.php sudah selesai, kita dapat mengisi setiap bagian dengan mark-up khusus Tuts+.

  • Header: Di bagian ini, kita hanya menyisipkan grafik Tuts+, dan memberikan teks alternatif jika gambar dimatikan.
  • Content: Di area konten, kita perlu mendaftar semua situs tutorial, dan menerapkan ikon unik di sebelah setiap tajuk. Kita juga menautkan ke halaman baru, site.php yang akan menangani proses pengambilan umpan RSS. Untuk kenyamanan, ketika kita menautkan ke site.php, juga melewati nama situs yang dipilih, melalui querystring: siteName=nettuts.
  • Footer: Di bagian bawah, untuk saat ini, kita hanya akan menambahkan tautan ke Tuts+.

jQuery Mobile menawarkan sejumlah besar kelas CSS yang bermanfaat, termasuk ikon ul-li-icon. Ketika diterapkan pada gambar, itu akan melayang ke kiri, dan menerapkan margin-kanan senilai 10px.

Our project so farOur project so farOur project so far

Pada titik ini, situs kita akan terlihat seperti gambar di atas.

Transisi Halaman

Karena jQuery akan memuat halaman lokal secara tidak sinkron dengan AJAX, kita dapat menentukan sejumlah transisi halaman keren. Standarnya adalah efek geser-kiri atau geser-kanan dasar yang disadari sebagian besar pengguna ponsel sentuh. Untuk mengganti default, gunakan atribut data-transition pada tag jangkar.

Available Transitions

  • slide
  • slideup
  • slidedown
  • pop
  • flip
  • fade

Langkah 4: ListViews

Ehh - gambar, yang ditunjukkan di atas, masih terlihat seperti situs web. Kita perlu membuat beberapa hal lebih mirip telepon. Jawabannya adalah menggunakan atribut data-role="listview". Tonton apa yang terjadi ketika kita melakukan tidak lebih dari menerapkan atribut ini ke daftar unordered pembungkus.

Using the listview data-role attributeUsing the listview data-role attributeUsing the listview data-role attribute

Wow - sungguh peningkatan! Lebih baik lagi, kita memiliki akses ke rol tema, yang memungkinkan, dengan perubahan satu huruf, untuk mengganti tema warna.

Theme A
Theme B
Theme E

List Dividers

Sekarang, bagaimana jika kita ingin membagi daftar situs tutorial ini? Dalam situasi ini, kita dapat memanfaatkan data-role="listdivider", yang dapat diterapkan ke elemen <li>.

List DividerList DividerList Divider

Ini, juga, dapat menerima stylings rol bertema tema. Mereka dapat diatur di dalam induk <ul>..

Divider Theme
Pelajari lebih lanjut tentang pembagi daftar.

Perhatikan bahwa kita tidak akan menggunakan pembagi untuk aplikasi khusus ini.


Langkah 5: CSS

jQuery Mobile menangani banyak format, namun, kami masih, tentu saja, membutuhkan stylesheet kita sendiri untuk melakukan tweaker. Sebagai contoh, melihat gambar-gambar di atas, kita dapat melihat bahwa ikon tutorial perlu sedikit ditekan. Selain itu, saya ingin menggunakan Tuts+ red untuk warna background heading dan footer, daripada hitam standar.

Buat folder baru, CSS, dan tambahkan stylesheet baru -- Saya akan memanggil milik saya: mobile.css. Dalam file ini, pertama-tama akan memperbaiki posisi ikon:

Selanjutnya, kita akan membuat beberapa kelas, dinamai berdasarkan situs tutorial masing-masing. Kelas-kelas ini akan berisi pemformatan/warna khusus untuk situs. Misalnya, Nettuts+ memiliki warna hijau lebih gelap, sedangkan MobileTuts+ berwarna kuning.

Itu seharusnya baik untuk saat ini. Langkah terakhir untuk index.php adalah menerapkan kelas .tuts ke elemen header dan footer. Dengan begitu, header dan footer akan memberikan warna background yang benar.

Added the Tuts ColorAdded the Tuts ColorAdded the Tuts Color

Langkah 6: YQL, PHP, dan Caching

Sekarang, saatnya untuk menjauh dari tata letak, dan bekerja pada fungsi. Setiap tautan yang dibuat diarahkan ke site.php?SiteName="siteName". Mari kita lanjutkan dan buat file itu sekarang.

Meskipun ini adalah aplikasi yang relatif kecil, kita tetap harus berusaha untuk mengikuti praktik terbaik. Dalam hal ini, itu berarti bahwa kita harus menyimpan PHP sesedikit mungkin dalam dokumen kita. Sebagai gantinya, kita akan menggunakan site.php sebagai controller . File ini akan menangani logika awal, dan kemudian, di bagian bawah, memuat template HTML kita.

Menetapkan Nama Situs

Untuk mengambil umpan RSS yang diinginkan, pertama-tama kita perlu menangkap nama situs yang awalnya diklik pengguna. Jika Anda akan merujuk ke langkah sebelumnya, ketika ditautkan ke site.php, kita juga memberikan nama situs melalui querystring. Dengan PHP, ini dapat dengan mudah diambil, dengan $_GET['siteName']. Namun, bagaimana jika, karena alasan yang aneh, nilai ini tidak ada? Mungkin site.php diakses langsung ?? Kita harus menetapkan situs default untuk mengimbangi situasi ini.

Jika $_GET['siteName'] kosong, kita akan menetapkan "nettuts" ke variabel, $siteName. Kalau tidak, itu akan sama dengan nama situs masing-masing.

Keamanan

Meskipun ini adalah proyek kecil, mari kita juga mencoba mengatur beberapa keamanan. Untuk mencegah pengguna secara otomatis menetapkan nilai yang berpotensi berbahaya ke kunci siteName, mari pastikan bahwa nilainya sebenarnya adalah nama salah satu situs tutorial.

Fungsi in_array() memungkinkan kita untuk menentukan apakah suatu nilai -- dalam kasus kami, nilai $siteName -- sama dengan salah satu item dalam array $siteList.

Caching

Pada akhirnya, kita akan menggunakan YQL yang sangat baik untuk melakukan pertanyaan. Pikirkan YQL sebagai API untuk API. Daripada harus mempelajari dua puluh API yang berbeda, sintaks seperti-SQL YQL memungkinkan Anda untuk hanya mempelajari satu. Namun, meskipun YQL melakukan sedikit caching sendiri, mari kita juga menyimpan RSS feed ke file teks di server. Dengan begitu, kita dapat sedikit meningkatkan kinerja.

Kita mulai dengan membuat variabel baru, $cache, dan membuatnya sama dengan lokasi penyimpanan file yang di-cache.

Kode di atas menunjuk ke direktori file saat ini, dan kemudian ke folder cache, dan, akhirnya, nama situs yang dipilih.

Saya telah memutuskan bahwa file cache ini harus diperbarui setiap tiga jam. Dengan demikian, kita dapat menjalankan pernyataan if cepat, dan menentukan kapan terakhir kali file diperbarui. Jika file tidak ada, atau pembaruan lebih lama dari tiga jam yang lalu, kita meminta YQL.

YQL sangat mudah diajak bekerja sama. Dalam kasus, kita akan menggunakannya untuk tujuan yang sangat sederhana: ambil umpan RSS, dalam bentuk JSON, dari situs yang dikirimkan melalui querystring, melalui siteName. Anda dapat bereksperimen dengan berbagai perintah dengan menggunakan konsol YQL.


YQL ConsoleYQL ConsoleYQL Console

Untuk meminta umpan RSS, kita menggunakan perintah: SELECT * FROM feed WHERE url="path/to/rss/feed".

  • Nettuts+ Feed: http://feeds.feedburner.com/nettuts
  • Psdtuts+ Feed: http://feeds.feedburner.com/psdtuts
  • Vectortuts+ Feed: http://feeds.feedburner.com/vectortuts
  • dll.

Membangun Jalan

Demi keterbacaan, kita akan membangun query YQL di beberapa bagian.

Demi keterbacaan, kita akan membangun query YQL di beberapa bagian. Sekarang, kita hanya perlu memasukkannya ke dalam query SELECT. Untungnya, semua situs tutorial menggunakan Feedburner! Pastikan Anda urlencode query untuk mengganti karakter khusus.

Oke, jalannya sudah siap; mari gunakan file_get_contents() untuk mengambil umpan!

Dengan asumsi bahwa $feed sekarang sama dengan JSON yang dikembalikan, kita dapat menyimpan hasilnya dalam file teks. Namun, mari kita pastikan dulu bahwa data telah dikembalikan. Selama sesuatu dikembalikan dari kueri, jumlah $feed->query->count akan sama dengan nilai yang lebih besar dari nol. Jika ya, kita akan membuka file cache, menulis data ke file, dan akhirnya menutupnya.

Tampaknya membingungkan, tetapi sebenarnya tidak. Fungsi fopen() menerima dua parameter:

  • File yang akan dibuka: Kita menyimpan jalur ini dalam variabel $cache di bagian atas halaman. Perhatikan bahwa, jika file ini tidak ada, itu akan membuat file untuk Anda.
  • Akses hak istimewa: Di sini, kita dapat menentukan hak istimewa yang tersedia. w adalah singkatan dari "write."

Selanjutnya, kita buka file itu, dan tulis isi $feed (data RSS JSON yang dikembalikan) ke file, dan tutup.

Menggunakan File Cached

Di atas, kita pertama kali memeriksa apakah file yang di-cache lebih dari tiga jam.

Tapi bagaimana kalau tidak? Dalam hal ini, kita menjalankan pernyataan else, dan mengambil konten file teks, daripada menggunakan YQL.

Terakhir, kita tidak bisa berbuat banyak dengan RSS JSON feed sampai mendekode dengan PHP.

Dan itu harus dilakukan untuk controller kita! Dengan tidak adanya logika, mari sertakan template HTML.

Inilah terakhir site.php. Klik pada ikon rentangkan untuk melihatnya.


Langkah 7: Templat Situs

Di akhir langkah sebelumnya, kita memuat di templat (atau tampilan). Silakan dan buat folder views itu, dan file site.tmpl.php. Silakan beri nama sesuai keinginan Anda. Selanjutnya, kita akan memasukkan HTML.

Tempat Menarik Di Atas

  • Perhatikan bagaimana kita mengikuti tata letak dasar yang sama: header, area konten, footer.
  • Karena templat ini akan digunakan untuk setiap situs tutorial Tuts+, kita perlu mengatur judul secara dinamis. Untungnya, jika Anda ingat, nama situs melewati querystring, dan disimpan dalam variabel $siteName (seperti, "nettuts"). Untuk menggunakan huruf besar huruf pertama, dan menerapkan tanda tangan + setelah nama, kita akan menjalankan variabel melalui ucwords() (huruf besar huruf pertama dari setiap kata dalam string), dan menambahkan "+". <h1><?php echo ucwords($siteName).'+'; ?></h1>
  • Kita akan segera menampilkan jumlah komentar untuk setiap posting di sebelah judul. Kita dapat, sekali lagi, menggunakan ThemeRoller untuk menatanya, melalui atribut data-counttheme="e".
Site Template Thus Far

Memfilter Umpan

Pada titik ini, kita memiliki akses ke objek $feed yang berisi umpan RSS. Untuk membedah objek ini, Anda bisa print_r($ feed), atau menggunakan konsol YQL untuk tampilan yang lebih cantik. Kita akan menggunakan yang terakhir dalam hal ini. Coba lihat.


Dissecting the feedDissecting the feedDissecting the feed

Untuk mengambil data untuk setiap posting, kita perlu memfilter melalui: $feed->query->results->item. PHP membuat ini mudah dengan foreach().

Dalam pernyataan foreach(), kita sekarang dapat mengakses nilai yang diinginkan dengan komentar $item->title, atau $item->comments, yang masing-masing akan menampilkan judul, dan nomor komentar. Tambahkan berikut ini di dalam tag <ul>.

Dalam kode di atas, kita membuat item daftar, berisi judul posting, jumlah komentar, dan tautan ke article.php yang juga berisi nama situs dan tautan permanen (ke artikel asli di situs Tuts+ ) dalam string-query.

Saat kita melihat halaman yang diperbarui di browser, tada!

Recent article list

Perhatikan bagaimana jumlah komentar dalam gelembung kuning, dan melayang ke kanan? Itu karena kita menerapkan atribut data-counttheme="e" ke daftar unordered pembungkus. Alangkah nyaman.

Hmm... Saya rasa teksnya terlalu besar untuk judul yang panjang ini. Kunjungan singkat ke Firebug menunjukkan bahwa saya dapat menargetkan tag h2 dengan kelas .ui-li-heading. Mari kita kembali ke stylesheet kita (mobile.css), dan tambahkan aturan baru:

Itu lebih baik.

Applying a smaller heading sizeApplying a smaller heading sizeApplying a smaller heading size

Langkah 8: Menampilkan Posting Lengkap

Langkah terakhir adalah membangun article.php, yang akan menampilkan seluruh posting. Seperti halnya site.php, article.php akan berfungsi sebagai controller, dan akan meminta artikel yang dipilih dengan YQL, dan memuat tampilan yang sesuai.

Jika Anda telah mengikuti, kode di atas akan terlihat sedikit lebih akrab bagi Anda. Ketika kita memuat halaman ini, dari site.php, kita melewati dua item, melalui string kueri:

  • Nama Situs: Berisi nama situs tutorial yang saat ini dipilih
  • Orig Link: Tautan ke posting asli di situs tutorial

Perbedaannya dengan permintaan YQL, kali ini, adalah bahwa kita mencocokkan guid (tautan asli) dengan postingan yang diklik pengguna (atau ditekan). Dengan cara ini, satu posting akan dikembalikan. Lihat contoh permintaan YQL ini untuk mendapatkan ide yang lebih baik tentang apa yang saya maksud.

New YQL queryNew YQL queryNew YQL query

Templat Artikel

Di bagian bawah kode di atas, kita memuat file template untuk halaman artikel: views/article.tmpl.php. Kita akan membuat file itu sekarang.

Ah - sangat familiar. Kita sudah membahas templat ini. Satu-satunya perbedaan adalah bahwa, kali ini, karena hanya ada satu posting dari permintaan YQL untuk ditampilkan, kita tidak perlu repot dengan pernyataan foreach().

Unstyled Article PageUnstyled Article PageUnstyled Article Page
Halaman artikel yang tidak distil

Pada titik ini, sendiri, langkah selanjutnya adalah mulai menerapkan gaya yang Anda inginkan ke artikel. Saya tidak melihat perlunya membahasnya dalam tutorial ini, karena semuanya tergantung pada selera pribadi. Ini versi super-minimal saya.

Minimally styled article pageMinimally styled article pageMinimally styled article page
Menerapkan ukuran font, tinggi garis, bantalan, dan pemformatan gambar.

Footer Terkunci

Satu hal terakhir: di bagian footer artikel, kita menautkan ke posting asli di Nettuts+. Dalam kondisi saat ini, pembaca hanya akan melihat ketika mereka mencapai bagian bawah artikel. Mari kita mengunci footer ke bagian bawah titik pandang saat ini setiap saat. Kita dapat menggunakan atribut data-position untuk mencapai ini.

Itu lebih baik!


Dilakukan!

Dan, dengan kerja yang relatif sedikit, kita telah berhasil membangun pembaca RSS seluler untuk situs Tuts+. Ini tentu dapat diperluas untuk menyediakan fitur tambahan, pengecekan kesalahan, dan peningkatan kinerja, tetapi ini diharapkan akan membantu Anda memulai! Jika Anda ingin memotong proyek dan membuatnya lebih baik, tentu saja... lakukan! Terima kasih telah membaca, dan pastikan untuk merujuk ke dokumentasi jQuery Mobile untuk lebih jelasnya. Saya tidak ragu bahwa Anda akan menemukan lebih banyak tutorial seluler jQuery di situs saudara kita, Mobiletuts+.

Tambahkan Pembaca ke Layar Beranda iPhone Anda

Advertisement
Did you find this post useful?
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.