Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Set Nilai Berdasarkan URL pada Address Bar

Pembaharuan 2018/05/04: Query String Parser

Gambar Situs Google Translate
Beberapa situs memiliki kemampuan untuk mengeset formulir-formulir mereka berdasarkan URL

Setelah sekian lama merasa penasaran tentang bagaimana cara Google Translate mengeset nilai pada formulir mereka berdasarkan URL, akhirnya Saya menemukannya! Fungsi ini digunakan untuk mengambil queri dari URL yang nantinya bisa kita gunakan untuk mengeset/menentukan nilai dari sebuah formulir atau apa saja berdasarkan queri pada URL:

function getUrlQueryString(param) {
    var outObj = {};
    var qs = window.location.search;
    if (qs !== "") {
        qs = decodeURIComponent(qs.replace(/\?/, ""));
        var paramsArray = qs.split("&");
        var length = paramsArray.length;
        for (var i = 0; i < length; ++i) {
            var nameValArray = paramsArray[i].split("=");
            nameValArray[0] = nameValArray[0].toLowerCase();
            if (outObj[nameValArray[0]]) {
                outObj[nameValArray[0]] = outObj[nameValArray[0]] + ";" + nameValArray[1];
            } else {
                if (nameValArray.length > 1) {
                    outObj[nameValArray[0]] = nameValArray[1];
                } else {
                    outObj[nameValArray[0]] = true;
                }
            }
        }
    }
    var retVal = param ? outObj[param.toLowerCase()] : qs;
    return retVal ? retVal : "";
}

Pembaharuan: 12 Juni 2012

function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
            return pair[1];
        }
    }
    return (false);
}
getQueryVariable('name');
getQueryVariable('url');
getQueryVariable('email');

Lebih sederhana.

Katakanlah kita memiliki URL seperti ini:

http://www.sitename.com?name=Taufik%20Nurrohman&url=http://latitudu.blogspot.com&email=mamamia@email.com

Dengan menggunakan fungsi di atas kita bisa mengambil karakter Taufik Nurrohman, http://latitudu.blogspot.com dan mamamia@email.com dari URL untuk diambil sebagai variabel, sehingga kita bisa mengeset nilai atribut suatu formulir atau elemen berdasarkan URL pada address bar seperti ini:

JavaScript

var username = getUrlQueryString("name"),
    usersite = getUrlQueryString("url"),
    usermail = getUrlQueryString("email");

document.getElementById('name').value = username;
document.getElementById('site').value = usersite;
document.getElementById('mail').value = usermail;
document.getElementById('view').src = usersite;

HTML

<input id="name" type="text" value="">
<input id="site" type="text" value="">
<input id="mail" type="text" value="">
<iframe id="view" src=""></iframe>

Sebagai contoh, di sini terdapat tiga buah URL yang sama namun dengan queri yang berbeda. Coba Anda kunjungi satu persatu. Saya harap Anda mengerti apa yang Saya maksudkan setelah ini:

http://tovic.github.com/dte-project/demo-javascript-set-value-from-url.html?name=Taufik%20Nurrohman&url=http://lie-out.blogspot.com
http://tovic.github.com/dte-project/demo-javascript-set-value-from-url.html?name=Mei%20Sari%27ah&url=http://ra-miftahul-jannah.blogspot.com
http://tovic.github.com/dte-project/demo-javascript-set-value-from-url.html?name=Taufik%20Nurrohman%20Saja&url=http://dte-feed.blogspot.com

Contoh nyata mengenai manfaat kode ini adalah untuk menciptakan alat-alat seperti Responsive Site Tester yang memiliki kemampuan untuk menyimpan data ke dalam queri URL, sehingga kita bisa menggunakan URL tersebut sebagai URL berbagi.


Referensi: Stack Overflow – Posting Data Into JavaScript From an URL

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 6 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!