Sabtu, 29 Oktober 2011

Membuat Security Number dengan menggunakan GD Library pada PHP

0 komentar

Anda pernah melihat angka-angka aneh yang dicorat-coret atau melengkung-lengkung ketika ingin mengisi form? Dan anda diharuskan untuk mengisi angka yang tertera disitu. Atau pada bagian komentar dibawah artikel ini anda juga akan menemukan security number. Saya banyak menerima email dan komentar bagaimana cara membuatnya, nah kali ini saya akan mengajarkan cara membuat security number.
Saya hanya mengajarkan bagaimana membuat Security Number ini, saya tidak akan mengajarkan bagaimana memasangnya di Wordpress, blogspot dan CMS-CMS lainnya. Terus terang pengetahuna saya mengenai Wordpress, blogspot, Jomlaa dan CMS-CMS lainnya hampir tidak tahu apa-apa. Terakhir kali saya memakai CMS sekitar tahun 2001 an waktu itu saya pakai PHPNuke, jadi saya tidak tahu apa-apa tentang CMS jaman sekarang. Tapi saya yakin CMS seperti Wordpress dan kawan-kawan pasti memiliki cara penanggulangan SPAM yang lebih baik daripada security number.

Apa sih gunanya Security Number?

Tentu saja untuk menanggulangi SPAM. Jika dalam website anda memiliki buku tamu atau sistem komentar yang tidak mengharuskan orang-orang untuk login untuk mengisinya, maka 100% website anda akan kena spam. Apa itu spam? jika anda menerima komentar yang tidak diinginkan pada buku tamu atau sistem komentar anda, maka anda bisa menyebutkan itu sebagai SPAM.
Para spammers melakukan SPAM biasanya dengan menggunakan software otomatis (istilah kerennya: bots) yang secara otomatis mengisi form-form yang ada di internet. Nah untuk mencegah software tersebut mengisi form, kita perlu menambahkan sebuah field yang hanya bisa diisi jika pengisinya adalah manusia. Bagaimana caranya? Dengan membuat sebuah angka acak yang ditampilkan sebagai gambar, nah kita diharuskan mengisi angka tersebut. Bagi kita mudah saja untuk mengisi angka, karena kita dapat dengan mudah melihatnya, tapi bagi software otomatis tadi tentu susah untuk membaca angka tersebut.
Software-software spammers sekarang sudah sangat canggih dan sudah mampu membaca security number!!!

CAPTCHA

Apa itu CAPTCHA? CAPTCHA merupakan sebuah program untuk menggenerate andka yang sulit dikenali oleh bots tadi tapi mudah dikenali oleh manusia. Algoritma CAPTCHA yang paling bagus diciptakan oleh Carnegie Mellon University, sayangnya algoritma CAPTCHA merupakan trademark dari Carnegie Mellon University dan algoritma tersebut tidak bisa sembarangan digunakan, algoritma tersebut digunakan oleh Yahoo, Google dan situs-situs besar lainnya. Tapi kita jangan menyerah, jika anda jago anda bisa membuat algoritma sendiri :)
Atau kita bisa juga menggunakan images, jadi kita memiliki kumpulan gambar huruf-huruf dan angka yang berbeda-beda, nah gambar tersebut kita tampilkan secara acak. Atau menggunakan cara saya, cara yang paling sederhana dan nggak perlu banyak mikir :) yaitu menggenerate angka acak biasa kemudian diatasnya kita coret-coret dengan acak. Seperti yang terlihat pada sistem komentar dibawah artikel ini, sangat sederhana :D

Memanfaatkan GD Library dan Session

Untuk membuat gambar didalam PHP kita tentu saja memanfaatkan GD Library. Saya tidak akan mengajarkan GD Library disini, silahkan anda lihat artikel saya yang lalu tentang dasar-dasar GD Library. Dan kita akan memanfaatkan sesssion untuk mengirim nilai pada security number tersebut agar lebih aman. Saya banyak melihat website yang menggunakan security number tetapi jawaban dari angka tersebut tersimpan di form, bisanya disimpan didalam <input type="hidden" />. Atau ada juga yang disimpan didalam link pada browsernya. Kalau begitu sama saja bohong, kita sama saja membuat security number plus jawaban dari angka tersebut. Nah, disini kita akan mengirim jawabannya dengan menggunakan Session, paling tidak agar terenkripsi lah. Oke tidak usah berlama-lama, sekarang anda coba lihat dulu seperti apa hasilnya yang akan kita buat disini.
Pertama-tama kita buat script PHP untuk menggenerate angkanya dulu, buatlah file capcay.php dan isilah dengan kode berikut ini:
<?
$sid=trim($HTTP_GET_VARS["sid"]);
session_id($sid);
session_start();
$angka = $HTTP_SESSION_VARS["angka"];
mt_srand((double)microtime()*1000000);
$jarak1 = mt_rand(0,10);
$jarak2 = mt_rand(0,10);
$jarak3 = mt_rand(0,10);
$jarak4 = mt_rand(0,10);
$ujung1 = mt_rand(0,60);
$ujung2 = mt_rand(0,60);
$ujung3 = mt_rand(0,60);
$ujung4 = mt_rand(0,60);
$ujung5 = mt_rand(0,60);
$ujung6 = mt_rand(0,60);
$ujung7 = mt_rand(0,60);
$ujung8 = mt_rand(0,60);
$warna1 = mt_rand(0,150);
$warna2 = mt_rand(0,150);
$warna3 = mt_rand(0,150);
$warna4 = mt_rand(0,150);
$warna5 = mt_rand(0,150);
$warna6 = mt_rand(0,150);
$height = 13; 
$width = 62; 
$im = ImageCreate($width, $height); 
$background = ImageColorAllocate($im, 255,255,255); 
$warnagaris = ImageColorAllocate($im, $warna1, $warna2, $warna3); 
$warnaangka = ImageColorAllocate($im, $warna4, $warna5, $warna6); 
ImageFill($im, 0, 0, $background); 
ImageLine($im, 0, $jarak1, $ujung1, $ujung2, $warnagaris); 
ImageLine($im, 0, $jarak2, $ujung3, $ujung4, $warnagaris); 
ImageLine($im, 60, $jarak3, $ujung5, $ujung6, $warnagaris); 
ImageLine($im, 60, $jarak4, $ujung7, $ujung8, $warnagaris); 
ImageString ($im, 6, 10, 0,  $angka, $warnaangka);
Imagejpeg($im); 
?>
Itu nanti akan menghasilkan images dalam format .jpg, tenang saja akan saya jelaskan nanti, sekarang buatlah file form.php dan isilah dengan kode berikut ini:
<?
$sid = session_id();
if(!$sid){
session_start();
$sid = session_id();
}
if ($submit) {
  if ($code!=$angka) {
    echo "Security number salah.<br />";
  } else {
    echo "Selamat Anda benar menuliskan angkanya";
  }
}
?>
<h4>Kirim Komentar:</h4>
<form method="post" action="<?=$PHP_SELF?>">
<p>
Security Number: <input type="text" name="code" class="textbox"  />
<?
mt_srand((double)microtime()*1000000);
$angka1 = mt_rand(0,9);
$angka2 = mt_rand(0,9);
$angka3 = mt_rand(0,9);
$angka4 = mt_rand(0,9);
$angka5 = mt_rand(0,9);
$angka="$angka1$angka2$angka3$angka4$angka5";
$HTTP_SESSION_VARS["angka"] = $angka;
?>
<img src="capcay.php?sid=<?=$sid?>" alt="Security Number" /> <br /><br />
<input type="submit" name="submit" value="Kirim Komentar" />
</p>
</form>
Silahkan anda jalankan form.php, muncul kan angkanya, cukup mudah kan? sekarang akan saya jelaskan satu persatu. Pertama-tama kita bahas form.php. Pada awal form.php kita memiliki kode:
<?
$sid = session_id();
if(!$sid){
session_start();
$sid = session_id();
}

Nah, kode tersebut berfungsi untuk mengambil nilai session yang nantinya akan kita kirim melalui form.php, karena pada awalnya kita belum mengirim apa-apa maka kita lewatkan saja kode tersebut dan langsung perhatikan formnya. PAda form kita memiliki field Security Number: <input type="text" name="code" class="textbox" />, ingat bahwa name nya adalahcode, nanti kita perlu melakukan pengencekan code ini dengan angka yang kita generate. Oke berikutnya kita akan menemui:
mt_srand((double)microtime()*1000000);
$angka1 = mt_rand(0,9);
$angka2 = mt_rand(0,9);
$angka3 = mt_rand(0,9);
$angka4 = mt_rand(0,9);
$angka5 = mt_rand(0,9);
$angka="$angka1$angka2$angka3$angka4$angka5";
$HTTP_SESSION_VARS["angka"] = $angka;
Disini kita membuat fungsi random, jadi saya membuat variabel $angka1 s/d $angka5 yang isinya adalah angka acak dari 0 sampai 9. Kemudian ke 5 angka tersebut digabung kedalam variabel angka, $angka="$angka1$angka2$angka3$angka4$angka5";. Nah setelah itu disini kuncinya, kita menyimpan variabel angka kedalam session angka dengan perintah$HTTP_SESSION_VARS["angka"] = $angka;. Yang nantinya session ini akan kita ambil pada awal kode tadi.
Sekarang kita akan membuat gambarnya, anda tentu sudah tahu cara menampilkan gambar pada HTML, disini yang kita load bukan gambar tetapi file PHP yang telah menjadi gambar <img src="capcay.php?sid=<?=$sid?>" alt="Security Number" />. Perhatikan, kita perlu mengirim nilai session tersebut kedalam capcay.php yang nantinya akan diproses oleh capcay.php. Nilai session tersebut sudah tersimpan pada variabel $sid karena pada awal kode kita sudah mengisi $sid dengan session $sid = session_id();. Sampai sini, sistem mulai memproses file cpacay.php dengan mengirim session yang berisi angka-angka yang benar. Kita akan bahas capcay.php belakangan. Dan ketika seseorang mengklik tombolnya maka sistem akan memproses kembali file form.php dari awal dan kembali mengambil session tersebut.
Karena anda telah menekan tombol submit, maka bagian kode dibagian atas ini akan dijalankan.
if ($submit) {
  if ($code!=$angka) {
    echo "Security number salah.<br />";
  } else {
    echo "Selamat Anda benar menuliskan angkanya";
  }
}
Itu merupakan kode sederhana untuk melakukan pengecekan apakah angka yang kita masukkan (variabel $code) sudah sama dengan angka yang kita generate yang tadi kita kirim melalui session (variabel $angka). Jika sudah sama silahkan anda tulis perintah yang diinginkan dan jika salah juga silahkan anda ingin sistem melakukan apa.
Oke, mudah kan sekarang kita akan bahas file capcay.php yang tadi kita panggil sebagai images. Sebenarnya file capcay.php hanya menggenerate angka yang kita kirim melalui session dan dicoret-coret. Jika anda membuka file capcay.php saja maka anda hanya akan menemukan coret-coretan tanpa adanya angka.
Pada bagian awal kode di file capcay.php kita akn menemukan kode seperti ini:
$sid=trim($HTTP_GET_VARS["sid"]);
session_id($sid);
session_start();
$angka = $HTTP_SESSION_VARS["angka"];
Kode tersebut berguna untuk mengambil session yang kita kirim pada form.php tadi, session tersebut tentu saja berisi angka acak yang kita buat pada form.php tadi. Dan kita simpan isinya pada variabel angka, $angka = $HTTP_SESSION_VARS["angka"];.
Setelah itu anda akan melihat variabel jarak, ujung dan warna. Untuk menggambar garis kita menggunakan fungsi imageline ( resource $image, int $x1, int $y1, int $x2, int $y2, int $color). Nah untuk mengisi x1, y1, x2, y2 dan warnasaya menggunakan nilai acak (random) yang saya simpan di variabel jarak, ujung dan warna. Dengan demikian garis-garis yang muncul dan warna yang muncul tidak akan pernah sama. Coba perhatikan kode berikut ini:
$height = 13; 
$width = 62; 
$im = ImageCreate($width, $height); 
$background = ImageColorAllocate($im, 255,255,255); 
$warnagaris = ImageColorAllocate($im, $warna1, $warna2, $warna3); 
$warnaangka = ImageColorAllocate($im, $warna4, $warna5, $warna6); 
ImageFill($im, 0, 0, $background); 
ImageLine($im, 0, $jarak1, $ujung1, $ujung2, $warnagaris); 
ImageLine($im, 0, $jarak2, $ujung3, $ujung4, $warnagaris); 
ImageLine($im, 60, $jarak3, $ujung5, $ujung6, $warnagaris); 
ImageLine($im, 60, $jarak4, $ujung7, $ujung8, $warnagaris); 
ImageString ($im, 6, 10, 0,  $angka, $warnaangka);
Imagejpeg($im); 
Variabel $width dan $height merupakan panjang dan tinggi bidang gambar kita. KEmudian kita membuat bidang gambar $im = ImageCreate($width, $height); yang disimpan dalam variabel $im. Setelah itu saya membuat background putih $background = ImageColorAllocate($im, 255,255,255); dan memberi warna pada garis dan angkanya, nilai warnanya acak yang telah kita buat pada variabel angka tadi $warnagaris = ImageColorAllocate($im, $warna1, $warna2, $warna3); dan warna angka$warnaangka = ImageColorAllocate($im, $warna4, $warna5, $warna6);.
Berikutnya kita menggambar bidangnya dengan memberi warna putih, ImageFill($im, 0, 0, $background);. Setelah itu kita membuat 4 coretan yang acak dan berbeda-beda dengan fungsi ImageLine($im, 0, $jarak1, $ujung1, $ujung2, $warnagaris);dst. Untuk menuliskan angka yang sudah kita dapatkan tadi, kita menggunakan fungsiimagestring (resource $image, int $font, int $x, int $y, string $string, int $color) dimana tadi kita menggunakan variabel $angka dan untuk warnanya kita menggunakan warna acak dari variabel $warnaangka, ImageString ($im, 6, 10, 0, $angka, $warnaangka);
Langkah terakhir adalah dengan membuatnya menjadi gambar jpg menggunakan fungsiImagejpeg($im);. Selesai sudah gambar anda sudah tampil yang berisi angka-angka acak, dan angka-angka itu juga dikirim melalui session agar kita bisa melakukan pengecekan.
Bingung? pada file capcay.php itu hanya berisi fungsi-fungsi dasar dari GD Library, jadi pastikan bahwa anda telah mengerti dasar-dasar GD Libary. Jika anda kreatif anda dapat menggambar coretan yang lebih bagus, angka yang lebih menarik dan semakin sulit dibaca. Tetapi perlu diingat juga dalam membuat security number jangan sampai terlalu sulit dibaca oleh manusia. Tujuan membuat security number agar manusia dapat dengan mudah membacanya, tetapi mesin akan kesulitan membacanya.
Jika gambar tidak muncul, pastikan GD Library anda sudah aktif. Tanyakan pada jasa penyedia hosting anda mengenai cara mengaktifkan GD Library di server anda.

newer post

Memperbesar bidang gambar dengan menggunakan CSS

0 komentar

Meneruskan artikel saya yang kemarin mengenai mengubah gambar pada mouse hover, dengan sedikit pengembangan dan trik maka kita bisa membuat bidang gambar menjadi besar ketika mouse hover. Sebelum kita lanjut anda lihat dulu apa yang akan kita buat disini.

Kode HTML

Oke, anda sudah tahu apa yang akan kita buat, sekarang akan saya ajarkan caranya. Kita hanya akan menggunakan CSS saja. Pertama-tama kita buat kode HTML nya terlebih dahulu, buatlah file HTML simpan dengan nama thumb.html, dan isilah dengan kode berikut ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Memperbesar bidang gambar dengan mouse hover</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css" media="all">@import "style.css";</style>
</head>
<body>
<a href="#"><img src="kelinci.jpg" alt="Kelinci" width="374" height="304" /></a>
</body>
</html>
Jika anda perhatikan, tidak ada yang aneh dengan kode HTMLnya, itu hanya kode HTML biasa saja dimana kita akan meload CSS pada file style.css. Dan didalam kode HTML nya kita tampilkan gambar yang akan kita beri efek. Jangan lupa untuk gambarnya silahkan anda save gambar kelinci dibawah ini.
Kelinci

Kode HTML

Sekarang, kita buat keajaibannya melalui CSS. Buatlah file style.css dan isilah dengan kode berikut ini:
a{
  display:block;
  width:250px;
  height:200px;
  overflow:hidden;
  position:relative;
  z-index:1;
  float:left;
  border:2px solid #000;
}
 
Pertama-tama kita akan membahas CSS untuk tag a terlebih dahulu. Kita spesifikasian panjang dan tinggi bidang gambar yang akan terlihat oleh tag a. Disini kita mengatur panjangnya 250px dan tingginya 200px, width:250px dan height:200px. Sekarang kita sudah memiliki bidangnya segitu, tapi gambar diluar bidang masih terlihat untuk itu perlu kita tutup kelebihannya (overflow) dengan overflow:hidden. Jangan lupda untuk menambahkan position:relativeagar posisi tag <a> mengikuti gambarnya. Jika anda lihat maka gambar yang ditampilkan sekarang sudah lebih kecil tetapi belum menengah, masih diambil dari sudut kiri atas (titik 0,0). Sekarang kita akan menengahkannya.
Oke, kita sudah berhasil memotong sebagian, sekarang tambahkan kode CSS berikut ini:
a{
  display:block;
  width:250px;
  height:200px;
  overflow:hidden;
  position:relative;
  z-index:1;
  float:left;
  border:2px solid #000;
}
a img{
  position:absolute;
  top:-42px;
  left:-70px; 
  border:2px solid #000;
}
Untuk menengahkannya, kita perlu menggeser tampilan images kita. Dalam contoh gambar saya ini saya menggeser imagesnya kekiri -70px dan keatas -42px, top:-42px; dan left:-70px;. Jangan lupa jika kita menggeser posisi kita perlu mengubah posisi gambarnya menjadiposition:absolute
Tiap-tiap gambar memiliki ukuran yang berbeda-beda karena itu untuk menengahkannya juga berbeda-beda ukurannya.
Jika anda lihat sekarang posisi gambarnya sudah ditengah. Sekarang kita tinggal membuat efek mouse hover sehingga gambarnya kelihatan semua. Tambahkan kode CSS berikut ini:
a{
  display:block;
  width:250px;
  height:200px;
  overflow:hidden;
  position:relative;
  z-index:1;
  float:left;
  border:2px solid #000;
}
a img{
  position:absolute;
  top:-42px;
  left:-70px; 
  border:2px solid #000;
}
a:hover{
  overflow:visible;
  z-index:1000;
  border:2px solid #000; 
}
 
Apa yang kita lakukan dengan hover? tentu saja hanya membuat overflownya menjadi terlihat lagi dengan perintah overflow:visible. Untuk lebih jelasnya silahkan perhatikan ilustrasi gambar berikut ini.
Ilustrasi Frames Hover
Mudah kan, selamat mencoba dan tentu saja kode diatas kompatibel disemua browser.
newer post

Menampilkan RSS di website dengan PHP, pelajari bagaimana memParsing RSS

0 komentar

RSS Logo BiruAnda tentu sudah mengetahui tentang RSS. Ya, RSS merupakan sebuah file yang dibuat dengan struktur XML yang fungsinya untuk menampilkan sepenggal informasi dari suatu website. Karena RSS merupakan file XML maka file tersebut bisa diakses oleh website lainnya, RSS reader ataupun software desktop. Kali ini kita akan mencoba menampilkan RSS dari suatu website di dalam website kita.
RSS menggunakan file XML, karena itu semua file RSS didunia harus sama. Maka struktur file RSS telah distandarkan agar apabila anda membuat aplikasi untuk membaca file RSS, maka aplikasi anda dapat membaca file RSS dari website manapun diseluruh dunia.

Sejarah RSS

Saya tidak akan bicara panjang lebar mengenai sejarah RSS, yang past RSS pertama kali diperkenalkan oleh Netscape pada tahun 1999 yang digunakan pada situs My.Netscape.com. Pada waktu itu RSS yang keluar pertama kali adalah RSS versi 0.9 dan kepanjangan RSS waktu itu adalah RDF Site Summary.
Tahukah anda, bahwa logo RSS yang berwarna orange dan ada gambar sinyal radio nya itu pertama kali digunakan oleh browser Mozilla Firefox pada tahun 2005. Dan untuk pertama kalinya Internet Explorer bekerjasam dengan Mozilla yaitu IE tertarik menggunakan icon RSS pada Firefox dan menggunakannya di browser IE7. Setelah itu Opera pun mengikutinya dan sekarang icon tersebut telah menjadi simbol RSS.
Sekarang RSS telah ada dalam versi RSS 2.0 dan kepanjangannya sudah ganti menjadi Really Simple Syndication. Bahkan variannya juga sudah mulai banyak seperti Atom dan Podcasts. Tetapi RSS masih tetap paling populer karena kemudahannya sampai saat ini. Oke sekarang jika anda menemukan website yang menyediakan RSS ini berarti anda dapat menampilkan sepenggalan berita pada website tersebut kedalam website anda. Dan karena RSS bentuknya XML anda tentu harus mengubah isi RSS tersebut / Parsing kebentuk yang kita inginkan, atau minimal enak dibaca. Karena RSS berbentuk XML maka kita perlu mengetahui dulu strukturnya. Perhatikan contoh struktur dari RSS website dhimasronggobramantyo.com:
<?xml version="1.0" encoding="utf-8"?>
    <rss version="2.0">
    <channel>
        <title>Belajar Web</title>
        
<link>http://www.dhimasronggobramantyo.com</link> 
        <description>Situs yang berisi 
artikel dan tutorial untuk membuat dan mengembangkan website</description>
        <language>en-us</language> 
        <lastBuildDate>Sat, 03 Nov 2007 
15:16:46 GMT</lastBuildDate>
        <ttl>10</ttl> 
        <image>
            
<title>dhimasronggobramantyo.com</title> 
            
<width>142</width> 
            
<height>18</height> 
            
<link>http://www.dhimasronggobramantyo.com</link> 
            <url>http://www.dhimasronggobramantyo.com/images/rssbutton.gif</url>

        </image>
        <item>
            <title>Aturan 
membuat Forms</title>
            
<link>http://www.dhimasronggobramantyo.com/Aturan_membuat_Forms_dan_bagaimana_membuat_Forms_yang_sesuai_prinsip_Web_Standards</link>
        <pubDate>Sat, 03 Nov 2007 03:14:56 
GMT</pubDate> 
        <description>Forms merupakan bagian 
terpenting dalam website, hampir semua website yang ada saat ini memiliki forms, 
entah itu hanya form sederhana untuk melakukan pencarian ataupu forms kompleks 
untuk pendaftaran anggota. Tetapi kadang kita meremehkan form, disini saya akan 
mengajarkan cara membuat form yang baik dan benar.</description> 
            </item>
            <item>
                
<title>Statistik Pengunjung pada bulan Oktober 2007</title>
            
<link>http://www.dhimasronggobramantyo.com/Statistik_Pengunjung_pada_bulan_Oktober_2007</link>
                
<pubDate>Fri, 02 Nov 2007 11:16:43 GMT</pubDate> 
                
<description>Saya berencana untuk memberikan informasi jumlah pengunjung website 
ini setiap bulannya. Dan inilah statistik kunjungan website untuk bulan Oktober 
2007. Saya menggunakan tools Google Analytics, dan karena website ini baru 
online tanggal 10 Oktober 2007, maka pengunjung bulan ini masih sedikit.</description>

            </item>
    </channel>
</rss>
Jika anda perhatikan struktur RSS diatas, maka anda dapat melihat bahwa RSS tersebut menampilkan 2 berita. Berita/informasi berada didalam <item>, dan didalamnya ada <title>,<link>, <pubDate> dan <description>. Nah nanti kita akan memparsing <item> dan menampilkannya diwebsite kita agar enak dilihat. Apa anda bisa membaca jika tampilannya seperti contoh diatas?
Mungkin anda bertanya-tanya, parsing tu seperti apa? oke, jika anda punya Internet Explorer 7 atau Mozilla Firefox. Silahkan buka RSS situs ini yaitu:http://www.dhimasronggobramantyo.com/newsrss.xml. Maka yang anda lihat bukan isi RSS nya seperti contoh diatas, tetapi sudah ditampilkan dengan baik. Ini karena IE7 dan Mozilla dapat memparsing RSS. Nah kita akan membuatnya dengan PHP.

Parsing RSS

Cara paling gampang untuk parsing RSS adalah dengan menggunakan Magpie RSS, sebuah class PHP yang dapat anda download dengan gratis. Tetapi saya senang dengan tutorial dari Kevin Yank dari Sitepoint. Karena kita bisa memanipulasi tampilan RSS kita. Disini kita akan menggunakan kode dari tutorial tersebut tetapi kita manipulasi agar kodenya lebih sederhana serta kita bisa menampilkan berapa jumlah RSS yang ingin kita tampilkan dan agar kita bisa menampilkan gambar dalam RSS tersebut.
Karena itu silahkan anda kunjungi tutorial aslinya untuk mengetahui fungsi-fungsi yang digunakan secara lebih detail. Karena saya hanya akan menerangkan bagian-bagian yang saya ubah dan tambahkan. Oke langsung saja kita coba, kodenya sedikit hanya satu file saja, nanti bisa anda manipulasi sendiri. Buatlah file rss.php dan isilah dengan kode berikut ini:
<?
  function startElement($parser, $name, $attrs) {
    global $insideitem, $tag, $title, $description, $link, $pubDate;
    if ($insideitem) {
      $tag = $name;
    } elseif ($name == "ITEM") {
      $insideitem = true;
    }
  }
  function endElement($parser, $name) {
    global $insideitem, $tag, $title, $description, $link, $pubDate, $i;
   if (!$i) {
      $i=1;
    }
    if (($name == "ITEM") && ($i<=5)) {
     $i++;
      printf("<h3><a href='%s' class=main target=_blank>%s</a></h3>%s<p>%s</p>",
    trim($link),trim($title), substr($pubDate,0,16), $description);
    $title = "";
    $description = "";
    $link = "";
    $pubDate="";
    $insideitem = false;
  }
}
function characterData($parser, $data) {
  global $insideitem, $tag, $title, $description, $link, $pubDate;
  if ($insideitem) {
    switch ($tag) {
    case "TITLE":
    $title .= $data;
    break;
    case "DESCRIPTION":
    $description .= $data;
    break;
    case "LINK":
    $link .= $data;
    break;
    case "PUBDATE":
    $pubDate .= $data;
    break;
    }
  }
  }
  $insideitem = false;
  $tag = "";
  $title = "";
  $description = "";
  $link = "";
  $pubDate ="";
  $xml_parser = xml_parser_create();
  xml_set_element_handler($xml_parser, "startElement", "endElement");
  xml_set_character_data_handler($xml_parser, "characterData");
  $fp = fopen("http://www.dhimasronggobramantyo.com/newsrss.xml","r");
  while ($datarss = fread($fp, 4096)) 
    xml_parse($xml_parser, $datarss, feof($fp))
  or die(sprintf("XML error: %s pada baris %d", 
  xml_error_string(xml_get_error_code($xml_parser)), 
  xml_get_current_line_number($xml_parser)));
  fclose($fp);
  xml_parser_free($xml_parser); 
  ?>
Silahkan anda coba jalankan, atau anda dapat melihatnya disini. Perlu diingat anda harus memiliki koneksi internet untuk mencobanya, karena kita mengambil RSS dari situs ini secara online. Oke jika kita perhatikan kodenya, kita memiliki 3 fungsi: startElement, endElement dancharacterData. Ketiga fungsi tersebut merupakan fungsi untuk memparsing dan membagi-bagi tag XML didalm RSS.
Nah saya akan menjelaskan mengenai fungsi yang telah saya ubah yaitu endElement. Jika anda perhatikan pada fungsi endElement saya menambahkan variabel $i. Variabel ini gunanya nanti untuk jumlah isi berita yang ingin ditampilkan dalam RSS. Dalam contoh diatas saya hanya ingin menampilkan 5 saja. Oke jika anda lihat diatas saya memasang kode:
  if (!$i) {
     $i=1;
   }
Nah disitu saya hanya melakukan pengecekan sederhana, jika belum ada variabel $i maka akan saya buat variabel $i dengan isinya 1. Kemudian kode berikutnya adalah seperti ini:
   if (($name == "ITEM") && ($i<=5)) {
    $i++;
    printf("<h3><a href='%s' class=main target=_blank>%s</a></h3>%s<p>%s</p>",
    trim($link),trim($title), substr($pubDate,0,16), $description);
    $title = "";
    $description = "";
    $link = "";
    $pubDate="";
    $insideitem = false;
  }
Kuncinya adalah pada pengecekan yang ini, dimana kita mengecek ($i<=5). Jika anda ingin menampilkan 10 isi RSS tersebut anda tinggal mengubahnya saja menjadi 10. Nah untuk menampilkan RSSnya kita menggunakan fungsi printf
    printf("<h3><a href='%s' class=main target=_blank>%s</a></h3>%s<p>%s</p>",
    trim($link),trim($title), substr($pubDate,0,16), $description);
Fungsi printf ini berfungsi untuk menampilkan pada layar sebuah teks dan variabelnya. Karena semua variabel yang ingin ditampikan bentuknya teks / string maka kita menggunakan %s. Dimana pada %s yang pertama isinya adalah trim($link), %s yang kedua isinya adalahtrim($title), %s yang ketiga isinya adalah substr($pubDate,0,16) dan seterusnya.
Nah, pada bagian printf inilah anda memasang kode HTML untuk mempercantik tampilan RSS anda. Mudah kan, selamat mencoba, mungkin penjelasan syaa kali ini agak kurang lengkap, karena saya menulis artikel ini terburu-buru agar diwebsite ini ada sesuatu yang baru. Sudah 1 bulan ini saya sibuk dan baru bisa menulis artikel baru sekarang, jadi jangan kaget kalau artikel diwebsite ini mulai jarang, tapi tenang saja saya sudah menyiapkan beberapa artikel menarik.
newer post
newer post older post Home