Pernah kan ngalami, ketika kita melakukan pencarian di suatu Search Engine (Google, Yahoo, MSN), lalu kita masuk ke web yang merupakan hasil dari pencarian tersebut, namun setelah di dalam web tersebut, kata yang kita cari masih sulit untuk ditemukan, misalnya karena halaman web tersebut mengandung banyak isi.

Hal tersebut dapat dipermudah dengan memberikan warna berbeda (highlight) pada kata-kata yang dicari oleh pengguna.

Untuk memperjelas maksud tulisan ini, silakan anda masuk ke google.com, kemudian lakukan pencarian dengan kata kunci sebagai berikut:

kirim sms lewat pc

Saat artikel ini ditulis, keywords tersebut selalu menempatkan BengkelProgram.com sebagai top rank nomor 1 :)
Silakan anda klik link yang menuju ke BengkelProgram.com, dan anda akan melihat, kata-kata yang anda cari akan ditampilkan dengan warna yang berbeda dari warna artikel aslinya.
Hal tersebut juga berlaku untuk search engine lain, dan halaman lain tentunya.

Untuk dapat melakukan hal tersebut, syarat yang harus terpenuhi adalah, teknik penampilan situs anda harus memakai buffering. Bukan buffering OB milik PHP, tapi sebelum ditampilkan, halaman web anda harus tertampung dalam sebuah variabel.
Maksudnya, sebelum di-echo, semua output harus ditampung dalam sebuah variabel string, misalnya $data. Ketika semua output sudah siap ditampilkan, barulah di-echo $data.

Syarat ini diwajibkan karena sebelum ditampilkan, variabel $data mesti diolah dulu.

Ok, kita lanjutkan dulu. Kita anggap semua output telah dimasukkan dalam variabel $data.

Langkah melakukan pengolahan adalah sebagai berikut:

Cek apakah halaman web kita ini dipanggil melalui sebuah search engine. Caranya dengan melihat isi dari variabel $_SERVER['HTTP_REFERER']. Perintahnya sebagai berikut:

$doc_ref = $_SERVER['HTTP_REFERER'];

Variabel $doc_ref akan bernilai URL hasil dari serach engine. Jika anda melakukan pencarian seperti yang dicontohkan di atas, maka $doc_ref akan berisi:

http://www.google.co.id/search?hl=id&q=kirim+sms+lewat+pc&
meta=

Berikutnya adalah ngecek isinya:

$host_info = parse_url($doc_ref);

variabel $doc_ref di-parse (dipecah) ke dalam array $host_info. Isi dari $host_info akan berisi seperti ini:

Array
(
    [scheme] => http
    [host] => www.google.co.id
    [path] => /search
    [query] => hl=id&q=kirim+sms+lewat+pc&meta=
)

Yang kita butuhkan adalah item 'query', karena itu kita butuh mengambilnya.

$query = isset($host_info['query'])?$host_info['query']:"";

dari variabel tersebut, kita pecah menjadi bagian yang lebih jelas, dengan memisahkannya berdasarkan karakter '&' :

$querylist = explode("&", $query);

Berikutnya adalah mengolah isi dari $querylist:

foreach($querylist as $item)
{
   list($param, $value) = explode("=", $item);
   if (testParam(strtolower($host_info['host']), $param))
   {
      $value = rawurldecode($value);
      $value = str_replace("'", "", $value);
      $value = str_replace("\"", "", $value);
      $value = str_replace("+", " ", $value);
      $searchlist = explode(" ", $value);
      break;
   }
}

masing-masing bagian dilihat isinya, setelah dipisahkan berdasarkan karakter '=', ke dalam variabel $param dan $value. Selanjutnya dilihat apakah item tersebut merupakan 'ciri' dari search engine. Pengecekan itu dilakukan melalui fungsi testParam(). Jika memang item tersebut adalah bagian dari search engine, maka dilakukan langkah lebih lanjut:

$value diconvert menjadi karakter yang sebenarnya, dengan fungsi rawurldecode(). Kemudian semua tanda petik dibuang, dan tanda plus (+) dirubah jadi spasi. Setelah itu dimasukkan kedalam array $searchlist setelah dipecah berdasarkan karakter spasi.

Fungsi testParam() adalah sebagai berikut:

function testParam($host, $param)
{
   $listparam=array("yahoo."=>"p","google."=>"q","msn."=>"q");

   foreach($listparam as $part => $val)
   {
      if ((strpos($host, $part, 0))&&($param == $val)) return 1;
   }
   return 0;
}

seperti yang terlihat dalam fungsi tersebut, parameter dianggap benar, jika host-nya mengadung kata 'yahoo.' dan memiliki query 'p', atau 'google.' dan memiliki query 'q', dan seterusnya. Tentu saja anda bisa menambahkan sendiri kriteria search engine yang lain.

Langkah pengolahan selanjutnya adalah merubah kata-kata yang ditemukan, dengan menambahkan warna-warni... hihihi...

kita pilih warna-warna favorit. array key (yang depan) adalah warna depan (foreground), dan value-nya adalah warna background. Pada list di bawah ini, item pertama adalah tulisan dengan tulisan hitam di atas warna kuning.

$cols = array( "#000000" => "#ffff00",
               "#ffffff" => "#0000ff",
               "#ffffff" => "#00ff00",
               "#ffffff" => "#ff0000",
               "#ff0000" => "#ffff00");

Jumlahnya cuma 4 item, nanti akan dipilih secara urut, yang kalau kehabisan akan diulang dari awal. Silakan ditambahi jika ingin.

Selanjutnya, menerapkan warna-warna tersebut pada daftar kata yang ditemukan.

foreach($searchlist as $list)
{
   $fg = key($cols);      // ambil fg
   $bg = current($cols);  // dan bg

   if (!next($cols)) // jika kehabisan
      reset($cols);  // ulangi dari awal

   $data = preg_replace("/(.*)($list)(.*)/i", 
"\\1<span style=\"color: $fg; background-color: $bg\">\\2</span>\\3", 
           $data);
}

Hal yang menarik dari kode di atas adalah fungsi preg_replace(), yang membutuhkan RegEx (regular expression). Untung saja RegEx-nya cukup simple ;)

/(.*)($list)(.*)/i

mencari keseluruhan kata yang dimaksud, dan mengembalikan dalam bentuk rangkaian \1, \2, \3. \1 adalah karakter di sebelah kiri, \2 merupakan kata yang ditemukan, dan \3 karakter di sebelah kanan. Semuanya dibentuk menjadi sebuah <span></span> yang telah dimodifikasi warnanya.

Setelah looping selesai, maka variabel $data telah selesai diolah, dan siap di-echo.

Sekian.

Ingatlah, warna-warna itu hanya muncul jika web anda dilihat melalui search engine. Jadi kalo orang sudah hapal dengan situs kita, maka warna itu juga jarang muncul :)

Untuk script lengkapnya, silakan download di sini.

Selain bikin sendiri, ada cara lain yang lebih instan. Saya pernah bikin versi Javascript-nya. Silakan lihat artikel ini. Tapi sampai saat ini hanya berjalan di Internet Explorer :(

Met koding.