Reyza

tenang, senang, sederhana
See also: Other Geeks@INDC

Public

May 2011 - Posts

Memperbaiki “Kesalahan” SRC pada tag IMG dengan jQuery

Windows Live Writer sepertinya sudah menjadi tool yang lazim digunakan untuk menulis blog dan mempublish. Kenapa? karena kemudahannya tentu saja, menulis bisa kapan saja tanpa perlu terkoneksi dengan internet terlebih dahulu, menulis sangat gampang segampang menulis di MS Word, insert gambar pun juga sangat mudah karena gambar yang “ditempelkan” pada tulisan langsung terupload ke site. 

Misal site tersebut mempunyai domain “www.hahahihi.com” maka gambar yang telah disisipkan pada posting akan diubah menjadi tag HTML seperti berikut ini.

<img src="http://www.hahahihi.com/blog/reyza/gambar123.jpg" alt="gambar" />

Dari contoh diatas dapat dilihat bahwa gambar yang disisipkan akan mempunyai lokasi yang absolute berdasarkan domain site tersebut. Tidak akan menjadi masalah bila domain site tersebut akan selalu www.hahahihi.com, bagaimana bila ternyata domain tersebut berubah menjadi www.hihihaha.web.id ? Bila hal ini terjadi, dipastikan gambar pada setiap posting blog akan menghilang, karena tidak menemukan lagi domain www.hahahihi.com.

Solusinya ada 3 cara :

  1. User pemilih blog tinggal mengubah seluruh postingnya agar url gambar yang menggunakan domain www.hahahihi.com menjadi www.hihihaha.web.id :)
  2. Membuat script SQL untuk masuk ke setiap record pada tabel untuk menyimpan posting blog dan bermain-main regex dan kemudian mengubah www.hahahihi.com yang ada pada tag IMG menjadi www.hihihaha.web.id.
  3. Membuat script javascript dengan bantuan jQuery untuk mengubah www.hahahihi.com yang ada pada tag IMG menjadi www.hihihaha.web.id pada setiap halaman posting yang diakses oleh pengunjung.

Sepertinya cara ketiga lebih elegant dan lebih manusiawi, karena tidak perlu melakukan banyak pekerjaan susah dan mungkin beresiko terhadapat kesehatan data yang telah tersimpan. Cukup tiga langkah untuk membuat hal ini menjadi kenyataan :

1. Download class library jQuery dari http://jquery.com/.

2. Kemudian “daftarkan” lokasi file yang telah didownload pada langkah pertama.

<script src="http://www.hihihaha.web.id/script/jquery-1.4.1.min.js" type="text/javascript"></script>

3. Selanjutnya tinggal tambahkan baris berikut ini.

   1: $(document).ready(function() {
   2:     $("img[src^='http://www.hahahihi.com']")
   3:     .each(function() {
   4:         this.src = this.src.replace(/^http:\/\/www\.hahahihi\.com/, "http://hihihaha.web.id");
   5:     });
   6: });

Pada baris ke-1, berfungsi agar aksi didalamnya dilakukan setelah setelah content posting telah terload sempurna.

Pada baris ke-2, melakukan pengambilan seluruh objek elemen img, tetapi dengan filter bahwa hanya objek img dengan atribut yang mempunyai nilai awal http://www.hahahihi.com saja. Setelah semua objek didapat maka tinggal melakukan replace nilai pada atribut SRC agar http://www.hahahihi.com menjadi http://hihihaha.web.id seperti yang terlihat pada baris ke-4.

Share this post: | | | |
Posted: May 30 2011, 10:24 PM by reyza | with no comments
Filed under: ,