jQuery .submit() & Google Custom Search Engine ~ Belajar Blog

Bismillah. Alhamdulillah. Bagaimana dengan artikel sebelumnya tentang 'Membuat dan Memasang Google Custom Search Engine'? Mudah-mudahan telah berhasil dipasang pada blog anda. Kelemahan dari cara tersebut adalah ketika kita mengganti kata kunci (keyword) pada form input maka halaman hasil pencarian akan di-load (di panggil) ulang, dan reload halaman ini terjadi setiap mengganti kata kunci. Hal ini tentunya memperlambat proses pencarian dan kadang membuat kesal saat seseorang telah mencapai lelah untuk mencari sesuatu di internet. Bagaimana caranya agar halaman tidak di reload saat kita mengganti kata kunci lainnya, namun hasil pencarian tetap ditampilkan pada halaman tersebut? Disinilah kita membutuhkan bantuan script jQuery. jQuery .submit() yang akan mengambil alih event handler saat seseorang meng-klik tombol submit.

Demo jQuery Blogger Custom Searchn Engine

Deskripsi

Pada artikel sebelumnya, kita telah membahas tentang integrasi Google Custom Search Engine pada Blogger, namun bahasan materinya terlalu praktis bahkan nyaris tidak ada pemahaman materi yang lebih luas. Artikel tersebut justru hanya akan menjadi materi (copy paste) yang sangat sulit untuk dikembangkan lebih lanjut. Saya hanya berharap, dari setiap artikel yang diterbitkan, janganlah hanya tips trik yang instan tanpa mampu dipahami dengan baik namun lebih jauh anda mengembangkan sendiri sesuai imajinasi atau mungkin lebih sempurna. Mari kita sama-sama pelajari dan pahami.

jQuery .submit()

.submit() adalah metode lain atau metode yang lebih praktis untuk .bind('submit', handler) dalam variasi pertama, dan .trigger('submit') dalam variasi ketiga. Event submit akan dikirimkan ke sebuah elemen ketika pengguna mencoba untuk mengirimkan (submit) formulir (form). Form akan berhasil dikirimkan dengan meng-klik eksplisit <input type="submit">, <input type="image">, atau <button type="submit">, atau dengan menekan tombol Enter jika elemen form memiliki focus.

Harus diperhatikan pula bahwa event pengiriman formulir juga tergantung pada browser. Beberapa browser ada yang mampu mengirimkan formulir hanya dengan menekan tombol Enter jika input formulir berisi satu kolom teks, atau formulir bisa terkirim jika menekan tombol submit. Interface tidaklah harus bergantung pada perilaku tertentu, kecuali hal ini memang memaksa harus dengan mengamati event penekanan tombol untuk tombol Enter.

Sebagai contoh, perhatikan kode HTML dibawah ini:

<form id="target" action="tujuan.html">
 <input type="text" value="Ini hanya percobaan"/>
 <input type="submit" value="Kirim"/>
</form>
<div id="lain">
 Pemicu Lain
</div>

Event handler dibawah terlibat ke dalam form:

$('#target').submit(function() {
 alert('Handler untuk .submit() terpanggil');
 return false;
});

Ketika form (formulir) dikirimkan (submit), pesan akan tampil dengan isi "Handler untuk .submit() terpanggil". Hal ini terjadi sebelum pengiriman form yang sebenarnya, maksudnya seperti ini (sambil dibuka demonya disini):

Ketika kita klik tombol submit (<input type="submit" value="Kirim"/>) untuk mengirimkan input text (<input type="text" value="Ini hanya percobaan"/>) dari form dengan id #target ke halaman tujuan (action="tujuan.html") maka input text tidak akan dikirimkan ke URL tujuan tetapi langsung diambil alih (handle) oleh jQuery .submit() dengan memanfaatkan fungsi .preventDefault(). Atau jika terjadi kesalahan fungsi maka akan dikembalikan pada handle sebelumnya (return false;). Fungsi .preventDefault() sering digunakan untuk menghentikan (pada kasus tertentu dapat mengambil alih) sebuah event agar tidak langsung disampaikan pada tujuan. Contoh penggunaan fungsi .preventDefault() ada pada artikel sebelumnya. [1], [2], [3]. Jika kita menggunakan fungsi event .submit() maka event .preventDefault() sudah termasuk didalamnya tanpa harus dituliskan pada kode. (Lumayan membingungkan... Ngopi dulu...)

Atau, kita juga dapat memanfaatkan pemicu event secara manual ketika elemen lain diklik, contoh script jQuery-nya seperti dibawah ini:

$('#lain').click(function() {
  $('#target').submit();
});

Setelah code diatas dieksekusi, kemudian kita klik pada "Pemicu Lain", hal ini juga akan menampilkan pesan yang sama, yaitu "Handler untuk .submit() terpanggil". Lihat demonya disini. Ingat! Jika tanpa kode jQuery diatas, maka ketika kita klik tombol submit (<input type="submit" value="Kirim"/>) maka browser akan menuju dan membuka halaman URL tujuan (action="tujuan.html"). (Mudah-mudahan ada lampu listrik menyala diatas kepala... Cling...)

Mekanisme Kerja Google Custom Search Engine

Setelah memahami fungsi dari event jQuery .submit(), sekarang kita akan mencoba memahami bagaimana Google Custom Search Engine bekerja. Perhatikan gambar dibawah ini:

Ketika kita membuat sebuah mesin telusur sendiri menggunakan fasilitas Google Custom Search Engine, maka proses index halaman demi halaman blog kita akan segera dimulai. Google Custom Search Engine akan melakukan pengumpulan data pada blog kita secara bertahap dan sesuai edisi yang digunakan. (Untuk Edisi gratis, jumlah index halaman terbatas). Ketika seseorang memasukan sebuah kata kunci (keyword) pada Input Form kemudian mengirimkannya (submit) pada Google API CSE, maka Google API CSE akan mengambil data dari index server Google CSE. Setelah ditemukan kecocokan dengan kata kunci yang dimasukan pada Input Form, Google API CSE akan mengambilnya dari server Google CSE dan kemudian mengirimkan hasil pengambilan data tersebut ke Halaman Hasil Pencarian.

jQuery Google Custom Search Engine

jQuery .submit() sudah dipahami, dan mekanisme kerja Google Custom Search Engine juga sudah dipahami, waktunya kita memodifikasi script bawaan Google Custom Search Engine. Pada artikel sebelumnya kita sudah mengetahui bahwa script dari Form Input dan Google Custom Search Engine seperti dibawah ini:

Kode Form Input

<form id="searchform" action="/p/pencarian.html">
 <input id="searchq" name="q" type="search" placeholder="Cari..."/>
 <input class="searchbutton" name="sa" type="submit" value="Go" />
</form>

Kode Google API Custom Search Engine

google.load("search", "1", {
 language: "id",
 style : google.loader.themes.V2_DEFAULT
});
google.setOnLoadCallback(function () {
    var c = new google.search.CustomSearchControl("012345678901234567890:mdrcctmncrt", {});
    c.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var a = new google.search.DrawOptions;
    a.enableSearchResultsOnly();
    c.draw("cse", a);
    for (var a = {}, e = window.location.search.substr(1).split("&"), d = 0; d < e.length; d++) {
        var b = e[d].split("="),
            f = decodeURIComponent(b[0]);
        a[f] = b[1] ? decodeURIComponent(b[1].replace(/\+/g, " ")) : b[1]
    }
    a.q && c.execute(a.q, null, {
        oq: a.oq,
        aq: a.aq,
        aqi: a.aqi,
        aql: a.aql,
        gs_sm: a.gs_sm,
        gs_upl: a.gs_upl
    })
}, !0);

Hasil Perpaduan

Dibawah ini kode hasil perpaduan antara Google API CSE dengan jQuery .submit(). Saya tidak akan lagi menjelaskan secara detail, silahkan dipelajari untuk dipahami. Berikut hasil perpaduan kodenya:

$(function () {
    $("#searchform").submit(function () {
        var b = new google.search.CustomSearchControl("012345678901234567890:mdrcctmncrt", {});
        b.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
        var a = new google.search.DrawOptions;
        a.enableSearchResultsOnly();
        b.draw("cse", a);
        (a = $("#searchq").val()) && b.execute(a);
        return !1
    })
});

Keterangan:

Pada dasarnya kita hanya mengalihkan proses load dan mengganti proses eksekusi kode Google API CSE. Pada mulanya load dilakukan dengan:

google.setOnLoadCallback

kemudian di ganti dengan:

$("#searchform").submit

ID #searchform diambil dari ID form (Jika memahami penjelasan sebelumnya, pasti paham fungsi event ini)

Kemudian mengganti eksekusi yang pada mulanya seperti dibawah ini:

for (var a = {}, e = window.location.search.substr(1).split("&"), d = 0; d < e.length; d++) {
 var b = e[d].split("="),
  f = decodeURIComponent(b[0]);
 a[f] = b[1] ? decodeURIComponent(b[1].replace(/\+/g, " ")) : b[1]
}
a.q && c.execute(a.q, null, {
 oq: a.oq,
 aq: a.aq,
 aqi: a.aqi,
 aql: a.aql,
 gs_sm: a.gs_sm,
 gs_upl: a.gs_upl
})

menjadi seperti dibawah ini:

(a = $("#searchq").val()) && b.execute(a);
return !1

Namun hati-hati, saya telah melakukan perubahan nama variabel, dengan tujuan untuk membedakan, mana script Google API CSE yang asli, dan mana script Google API CSE hasil perpaduan dengan jQuery. Script hasil perpaduan ini memang harus diperhatikan dan dibandingkan dengan hati-hati.

Conditional Tag

Sudah dibahas diatas bahwa ketika kita menggunakan jQuery .submit() maka URL tujuan tidak akan dibuka oleh browser karena fungsi submit form diambil alih oleh jQuery. Ini akan memunculkan masalah ketika halaman hasil pencarian sedang tidak dibuka, maka keyword apapun yang kita masukan pada input form itu tidak akan menghasilkan apa-apa. Google API CSE tidak akan pernah memproses perintah apapun dari form jika halaman hasil pencarian sedang tidak dibuka. Jika demikian berarti kita membutuhkan suatu kondisi.

Kondisi ini akan mengatur kapan jQuery .submit() harus diload atau dieksekusi. Pada saat halaman yang sedang dibuka bukanlah halaman hasil pencarian maka input form masih menggunakan script Google API CSE aslinya, namun ketika halaman hasil pencarian sedang dibuka, maka jQuery .submit() juga telah dieksekusi dan siap untuk digunakan.

Solusi dari masalah ini adalah dengan menggunakan conditional tag, seperti contoh dibawah ini:

<b:if cond='data:blog.url == &quot;/p/pencarian.html&quot;'>
... Script jQuery Google API CSE ...
</b:if>

Bagaimana conditional tag ini bekerja? Silahkan baca disini.

Integrasi Pada Blog

Masih bingung? Mungkin harus mencoba dulu baru memahaminya. Kode jQuery Google API CSE dibawah ini silahkan digunakan pada blog anda. Ikuti langkahnya:

Langkah 1
Buka template blog anda
Langkah 2
Cari kode dibawah ini:

</body>

Langkah 3
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 2:

<b:if cond='data:blog.url == &quot;/p/pencarian.html&quot;'>
<script type='text/javascript'>
//<![CDATA[
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
$(function () {
    $("#searchform").submit(function () {
        var b = new google.search.CustomSearchControl("012345678901234567890:mdrcctmncrt", {});
        b.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
        var a = new google.search.DrawOptions;
        a.enableSearchResultsOnly();
        b.draw("cse", a);
        (a = $("#searchq").val()) && b.execute(a);
        return !1
    })
});
//]]>
</script>
</b:if>

Langkah 4
Simpan Template

Keterangan:

Kode Google API CSE yang telah dimasukan sebelumnya jangan dibuang, karena kita membutuhkan loadernya.
Ganti URL /p/pencarian.html sesuai dengan URL halaman hasil pencarian anda.
Buang framwork jQuery jika blog anda telah memasang framework jQuery.
Samakan atau ubah ID #searchform pada jQuery sesuai dengan ID Form Input anda (misal ID form input; <form id="searchform").
Jangan lupa untuk mengganti 012345678901234567890:mdrcctmncrt sesuai dengan kode yang anda peroleh dari Google CSE.
Samakan atau ubah ID #searchq pada jQuery sesuai dengan ID Input anda (misal ID Input; <input id="searchq" name="q")

Kesimpulan

Mudah bukan? Dari pembahasan diatas mudah-mudahan anda memahami bagaimana cara kerja jQuery .submit() dan Google API CSE dengan baik, sehingga kedepannya anda bisa melakukan modifikasi dan perbaikan yang lebih baik lagi dari pada apa yang sudah dibahas di atas. Sampai ketemu dipembahasan berikutnya (Rencananya membuat Blogger Search Ajax API). Happy Blogging :)

Belajar Blog

Wednesday, July 11, 2012