Klasemen Piala Dunia di Blog Anda

Bulan Juni 2006 adalah bulannya Piala Dunia. Hampir semua orang rasanya pada demam piala dunia. Baik itu yang menang penggemar berat olah raga sepakbola seperti saya atau yang sekedar hanya menjadi penggemar musiman saja.Info yang paling sering ditanyakan soal pertandingan piala dunia ini mungkin dapat dikategorikan menjadi 4.

- Skor pertandingan si A lawan si B berapa?
- Siapa yang mencetak gol?
- Klasemen sekarang bagaimana?
- Siapa top skornya?

Nah, mengacu pada 4 hal tersebut di atas, saya berinisiatif menambahkan info-info tersebut ke dalam blog. Karena saya dan banyak orang lainnya tidak mungkin menonton semua pertandingan sekaligus setiap hari. Gile bo, bisa-bisa ga sekolah, ga ke kampus atau ga ke kantor.
Nah berikut ini saya akan membahas program kecil yang saya buat untuk mengumpulan informasi-informasi tersebut di atas.

Ummm, sebelumnya mohon maaf banget kalo yang dibahas di sini mungkin terlalu teknis. Sebagai gambaran, saya menggunakan PHP5-CLI (Command Line Interface). Namun skrip berikut ini dapat juga diakses sebagai sebuah skrip web. Oleh karena itu artikel ini lebih ditujukan untuk mereka yang mengerti akan pemrograman PHP dan struktur penulisan HTML. Nah mari di mulai pembahasannya.

Silakan download link ini untuk memahami pembahasan yang ada.

Program yang ada digunakan untuk menampilkan informasi klasemen (Groups & Standing) Piala Dunia 2006. Hasil program ini akan ditampilan di sidebar blog, namun sebenarnya Anda dapat menempatkannya di bagian manapun dari blog Anda. Contohnya dapat dilihat di http://kidy.blogspot.com

Buka link di atas, mari kita bicarakan baris-per-baris.

Baris 2-8 adalah program identifier. Ga perlu dibahas karena hanya kebiasaan saya saja untuk membuat penjelasan singkat di setiap header program.

Baris 10 saya memasukkan sebuah class library untuk emulasi HTTP Client. Yah kasarnya saya membuat emulasi sebuah browser.

Baris 11 adalah deklarasi URL tempat kita ingin mengambil informasi klasemen. Banyak situs di internet yang dapat dijadikan sebagai referensi klasemen sementara piala dunia. Namun akan lebih akurat isinya jika kita mengambil dari official websitenya kan?

Baris 12-15 adalah implementasi dari library yang dipanggil pada baris 10. Blok ini bekerja dengan proses sebagai berikut:

- Baris 12, inisialisasi obyek dari class HttpClient
- Baris 13 mengakses URL yang didefinisikan di baris ke 10. Analoginya seperti jika kita mengakses URL tersebut melalui sebuah web browser dengan mengetikkan alamatnya di address bar trus klik "Go".
- Baris 14 menampung hasil proses dari baris 13 yang berisi respon dari URL bersangkutan ke dalam sebuah variabel string. Analoginya, jika kita umpakan sebuah web browser, maka bagian ini adalah yang bertugas menampilkan isi URL ke dalam browser. $body akan berisi source code HTML dari situs Yahoo tersebut.
- Baris 15 adalah proses memindahkan isi data $body di baris 14 menjadi sebuah bentuk array dengan karakter newline sebagai pemisah. Data array tersebut diberi nama $data.
- Sedangkan variabel $start baris 16 digunakan sebagai penanda yang akan di bahas di baris berikutnya.Seperti yang dijalaskan di atas, baris 12 hingga 15 berhubungan erat dengan baris 10. Nah, Anda dapat mengganti blok tersebut dengan perintah-perintah dasar PHP seperti kombinasi fsockopen-fwrite-fread atau fopen-stream_get_content. How to buat baca socket ga usah dijelasin di sini yah. Cukup RTFM.

Baris 18-32 berisi definisi CSS yang akan digunakan untuk menampilkan informasi klasemen.

Kunci dari program ini adalah bagaimana kita membaca data dan menemukan pattern-pattern yang menjadi penanda data bagian mana yang ingin kita ambil. Nah dari baris 35 permasalahan di mulai. Bentuk asli tampilan situsnya dapat dilihat pada gambar 1 - Tampilan asli situs Fifa World di bawah ini.

Nah, kita harus menata ulang (reformat) tampilannya dengan hanya mengambil informasi-informasi yang diperlukan saja. Contohnya dapat dilihat di gambar 2 - Rancangan sidebar blog.

Baris 33 adalah awal proses perulangan untuk membaca data array $data yang dibahas di baris 15. Setiap satu baris HTML dianggap sebagai satu buah data array.

Baris 35 adalah awal inti program. Baris ini bertugas membaca setiap baris baca dan mencari awal pattern yang akan kita gunakan. Penanda blok informasi data klasemen adalah HTMLtag yfifa-w-gp-and-standings yfifa-w-gp-and-standing-rightMargin. Jadi data akan mulai diproses setelah tag tersebut ditemukan. Cukup ribet sih. Source HTMLnya sendiri dapat Anda lihat di sini. Beruntung sekali blok informasi itu pada source ditulis dalam satu baris yang sangat panjang. Jadi mempermudah kita untuk memprosesnya.

Baris 36 memberikan nilai 1 ke variabel $start untuk menunjukkan bahwa blok data sudah ditemukan. Teruskan proses parsing data selama $start = 1.

Baris 37 menyalin baris data array yang berhasil ditemukan tadi ke dalam variabel lain dengan nama $content.

Baris 38 melakukan proses penggantian karakter petik satu (') menjadi karakter backtick(`). Hal ini dilakukan supaya tidak terjadi masalah saat penulisan bentuk javascript yang nantinya mengakibatkan informasi yang telah kita proses tidak dapat ditampilkan di website.

Blok baris 39-50 saling berpasangan dengan blok baris 52-62. Blok 39-50 bertugas membuat sebuah daftar pattern teks yang harus dicari untuk diganti (replace) dengan daftar teks yang ada di blok 52-162.

Contoh penjelasan baris 43 dengan 56 :

Jika ditemukan teks <A href="http://www.budweiser.com" target=_blank><img height=18 src="(.*?)" width=80 border=0></A> maka hapus teks tersebut. Tanda (.*?) merupakan simbol regular expression yang berarti sembarang teks/huruf. Nah hal ini akan mengakibatkan gambar bendera yang ada didepan nama negara akan hilang seperti terlihat pada Gambar 2 di atas.

Baris 63 memanfaatkan preg_replace, kita akan membaca isi variabel $content dan mencari teks sebagaimana didefinisikan di $pattern kemudian mengubahnya dengan isi $replace.

Baris 64 menyimpan hasil proses baris 63 ke dalam bentuk penulisan javascript.

Mulai baris 66. Ada start, maka sudah seharusnya ada stop. Baris 66 memberitahukan sistem untuk berhenti melakukan parsing jika sudah menemukan tag html</div> dan</td>.

Baris 67 mengembalikan nilai $start dan $counter menjadi 0 supaya data tidak di proses lagi di perulangan berikutnya.

Baris 71-73 berfungsi menuliskan hasil parsing data tadi kedalam sebuah javascript file. Mungkin Anda akan bertanya, mengapa kok repot-repot harus menuliskan hasilnya ke dalam js file? Kenapa kok tidak langsung saja mencetak isi $tables langsung? Toh hasilnya sama saja.

Anda benar. Hasil skrip ini dapat diakses dengan setidaknya 2 cara.

script language="javascript" src="http://alamat.blog.anda/infoGroupStandings.php"

atau

script language="javascript" src="http://alamat.blog.anda/tables.js"

Anda harus perhatikan pula pemakaian resource yang akan terjadi jika user langsung mengakses infoGroupStandings.php. Klasemen pertandingan kan rata-rata hanya berubah 3 kali dalam sehari. Jadi buat apa Anda harus selalu mengakses langsung ke Yahoo, fetch HTML, parsing lagi ? Itu hanya akan menyia-nyiakan pemakaian resource server saja. Oleh karena itu saya memilih menyimpan hasil proses ke dalam sebuah file statis bernama tables.js tersebut. Dengan asumsi sumber data hanya berubah 3x sehari setiap kali selesai pertandingan, maka saya cukup menjalankan program ini minimal 3 kali sehari pula setiap selesai pertandingan dengan bantuan crontab.

Contoh crontabnya adalah :

#!/bin/sh
PHP_BIN=/usr/local/bin/php
15,45 0-4,20-23 * * * $PHP_BIN /home/kidy/bin/wc2006/infoGroupStandigs.php 2>&1

Oh iya, saya menggunakan sebuah server Linux untuk keperluan ini. Jika Anda memakai Windows, Anda dapat memanfaatkan Task Scheduller atau install freeware pycron.

Nah semoga artikel ini dapat membantu menyemarakkan blog Anda dengan pernak-pernik Piala Dunia. Jika perlu penjelasan tambahan, Anda dapat nongkrongin penulis di blogfam.com :)

*** (nuy kidy)

Posted on July 6, 2006 10:15 AM | Permalink