Teknik Grabbing (Mengambil Teks Dari Situs Lain) Dengan CURL

October 4th, 2010 | by rosihanari | 3,971 views | Cetak Artikel Ini Free Software Pernahkah Anda mendengar istilah Grabbing? Grabbing adalah teknik untuk mengambil teks atau secara umum obyek yang ada di suatu situs lain kemudian diletakkan ke web kita. Sebagai contoh yang sering saya jumpai adalah mengambil informasi kurs yang ada di web KlikBCA lalu menaruhnya ke web kita. Apabila kurs di KlikBCA berubah, maka secara otomatis informasi kurs yang ada di web kita pun akan berubah secara otomatis.Konsep grabbing ini berbeda dengan konsep web service karena data teks yang diambil melalui grabbing ini tidak disajikan dalam bentuk format tertentu seperti halnya XML atau JSON. Namun teks yang diambil berada di halaman web situs, atau dengan kata lain terselip di dalam kode-kode HTML.Untuk melakukan grabbing ini, kita bisa menggunakan CURL. Dengan CURL ini nanti, kita bisa baca semua kode HTML dari suatu situs lalu kita ambil informasi yang kita inginkan dan kemudian informasi tersebut kita tampilkan di web kita.Sekarang akan saya berikan cara membaca kode HTML dari suatu situs menggunakan CURL. Ini dia script functionnya

Function bacaHTML() di atas nantinya akan menghasilkan isi file HTML dari suatu situs. Sebagai contoh, misalkan Anda ingin menampilkan isi file HTML yang ada di halaman depan dari blog ini (http://blog.rosihanari.net), maka buat saja script berikut initest.php

Jika Anda jalankan script di atas, maka akan terlihat lucu. Misalkan Anda jalankan di localhost dengan URL http://localhost/test.php, maka akan muncul tampilan blog saya ini.

Oya syarat untuk bisa menjalankan script di atas, PC Anda haruslah terkoneksi dengan internet lho yaNah setelah kita bisa baca kode HTML dari suatu halaman situs, selanjutnya proses pengambilan suatu teks atau obyek tertentu yang kita inginkan. Caranya bagaimana tuh?? kan kode HTML itu banyak, lagian rumit gitu loh??? He 3x gak kok mudah sekali caranya. Ini dia idenya. Misalkan kode HTML yang dibaca tersebut berbentuk seperti ini

Contoh halaman web Ini judul Ini paragraf1. Ini paragraf1. TARGET 1 Ini paragraf1. Ini paragraf1. Ini paragraf2. Ini paragraf2. TARGET 2 Ini paragraf2. Ini paragraf2.

Dari contoh kode HTML di atas, misalkan kita akan mengambil teks TARGET 1. Bagaimana cara mendapatkannya? OK, jika kita lihat, bahwa teks TARGET 1 ini terletak di sebelah tag . Nah, cara mendapatkan TARGET 1 ini dengan memecah kode HTML nya menggunakan function explode() terhadap string tersebut atau dengan perintah$pecah = explode('', $kodeHTML);Hasil dari proses explode terhadap string tersebut akan diperoleh beberapa data array sbb:$pecah[0] yang berisi Contoh halaman web Ini judul Ini paragraf1. Ini paragraf1.$pecah[1] yang berisiTARGET 1 Ini paragraf1. Ini paragraf1. Ini paragraf2. Ini paragraf2.dan $pecah[2] yang berisi TARGET 2 Ini paragraf2. Ini paragraf2. Dari hasil pemecahan tersebut, tampak bahwa TARGET 1 terletak di dalam $pecah[1]. Proses berikutnya, kita lakukan proses pemecahan lagi, sekarang dilakukan terhadap string karena string ini terletak setelah TARGET 1 di dalam $pecah[1].$pecahLagi = explode('', $pecah[1]);Hasil dari proses pemecahan kedua ini dihasilkan array sbb:$pecahLagi[0] yang berisiTARGET 1$pecahLagi[1] yang berisi Ini paragraf1. Ini paragraf1. Ini paragraf2. Ini paragraf2.Nah akhirnya kita dapatkan string TARGET 1 yang ada di $pecahLagi[0]. Dengan demikian script lengkapnya adalah sbb:

OK teknik dasar grabbing sudah saya berikan, sekarang saatnya aksi yang sebenarnya yaitu mengambil informasi kurs yang ada di situs KlikBCA, perhatikan kotak merah pada gambar di bawah ini

Langkah pertama, kita buka dulu situsnya KlikBCA dan pelajari source codenya. Lalu carilah bagian dalam kode HTML source nya yang terdapat informasi kurs nya. Sepertinya informasi kursnya terletak di bagian ini

Kemudian, kita pilih kode tag yang terletak sebelum bagian informasi kurs. Saran saya, sebaiknya pilih beberapa tag sekaligus supaya unik (tidak ada yang sama) dalam satu halaman. Dan usahakan tag yang dipilih ini tidak memuat suatu teks yang bukan tag HTML. Dalam contoh ini misalnya kita ambil tag yang terletak sebelum informasi kurs seperti di bawah ini

Tag di atas terletak tepat di atas bagian yang kita tandai di atas. Selanjutnya dengan tag tersebut, kita akan melakukan proses exploding (pemecahan string).Sehingga scriptnya menjadi kursbca.php

Nah setelah Anda buat script di atas, cobalah Anda akses script tersebut melalui browser dengan contoh URL misalnya http:///mhs.php?jenis=L untuk menampilkan mahasiswa laki-laki. Jika dari pemanggilan script tersebut muncul tampilan seperti di bawah ini, maka scriptnya berjalan dengan sukses.

Lakukan hal yang sama untuk perempuan untuk mengecek scriptnya.Selanjutnya, kita akan buat halaman index atau halaman utama yang di dalamnya nanti terdapat combo box untuk memilih jenis kelamin mahasiswa dan script AJAX untuk memanggil script mhs.php tersebut secara asynchronous.Ini dia scriptnyaindex.phpview sourceprint?01.02.03.04.05.function ajax()06.{07.// membuat obyek XMLHttpRequest08.if (window.XMLHttpRequest)09.{10.// untuk IE7+, Firefox, Chrome, Opera, Safari11.xmlhttp=new XMLHttpRequest();12.}13.else14.{15.// untuk IE6, IE516.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");17.}18.19.// membaca jenis kelamin yang dipilih melalui combobox20.var pilih = document.getElementById("jenisKelamin").value;21.22.// menjalankan atau melakukan request script mhs.php?jenis=... secara asynchronous23.xmlhttp.open("GET","mhs.php?jenis=" + pilih);24.25.// membaca respon26.xmlhttp.onreadystatechange=function()27.{28.// jika request data telah sukses dan data hasil request sudah selesai diload29.// maka tampilkan data mahasiswa30.if (xmlhttp.readyState==4 && xmlhttp.status==200)31.{32.document.getElementById("showdata").innerHTML = xmlhttp.responseText;33.}34.// jika belum, maka tampilkan image loadingnya35.else document.getElementById("showdata").innerHTML = "";36.}37.38.// mengirim request ke server39.xmlhttp.send();40.}41.42.43.44.45.Ajax Loading Ala Facebook46.47.Pilih Jenis Kelamin48.49.Laki-laki50.Perempuan51.52.
53.54.55.56.57.Keterangan:Bila Anda perhatikan pada script index.php di atas terdapat bagianview sourceprint?1.2.Bagian itulah yang nantinya akan digunakan sebagai tempat untuk menampilkan data mahasiswa hasil request melalui perintah document.getElementById("showdata").innerHTML = xmlhttp.responseText;Namun, jika proses request belum selesai maka pada bagian tersebut nantinya akan diisi dengan image loadingdocument.getElementById("showdata").innerHTML = "";Oya, Anda dapat memperoleh image loading ala Facebook nya di http://rosihanari.net/ajaxfb/facebook.gif. Tinggal disave saja imagenya dan taruh di dalam folder yang sama dengan script mhs.php dan index.php di atas. OK, mudah bukan membuatnya?? Jika Anda ingin mencoba image loading yang lain silakan buat sendiri melalui situs http://ajaxload.info.