Masalah template

Bila anda membaca tulisan sebelumnya. Saya mau share kejadian lain lagi. Yaitu saat user meminta css, js dan gambar yang anda gunakan diganti.

Ini adalah sesuatu yang mengejutkan dan untungnya mudah. Mudah sampai akhirnya saya menyadari bahwa sesuatu memang mudah saat dikatakan. Design yang bagus adalah design yang meletakkan tampilannya (setting) di file css atau file external. Bukan di dalam codingnya itu sendiri.

Hal sama berlaku untuk Js atau Javascript. Terutama Javascript yang mengandung jquery dan biasa diletakkan di akhir html yang sedang anda gunakan. Misal anda ingin memakai show modal lalu scriptnya diletakkan dibawah karena saat di coba diletakkan di header (di dalam tag head) ternyata tidak berjalan.

Tapi nantinya pengalaman dari anda ini akan makin bagus dan meletakkan js di bawah html itu dapat dihindari atau dikurangi. Semua memiliki proses, dan ada bagusnya kita memperhatikan dan selalu mencoba.
Ada 2 hal yang membuatku tidak habis pikir dalam masalah template yang berikut ini. Tetapi sebelum masuk kedalam masalah, saya akan masuk ke cerita gimana ini terjadi. Saya mendapat informasi bahwa font untuk menu bukan arial tetapi verdana! Memang tidak ada bedanya, tetapi bagi temanku itu berbeda. Untungnya templatenya memakai css external dan saya cukup perbaiki dari css tidak ubah coding (ingat kalau mengubah coding artinya harus edit beberapa file lainnya).

Lalu saya uji di lokal dan untungnya langsung berhasil. Menu sesuai permintaan. Sampai saya menemukan tidak semudah itu. Setelah berhasil di upload ke internet, saya mencoba kembali dan menemukan kondisi tidak berubah (tampilan tetap sama) padahal cssnya sudah di ubah! dan tampilan di saya OK.

Setelah inspeksi barulah saya menemukan sesuatu yang menyebalkan. Ternyata css yang dipanggil adalah css lama bukan css baru! ini ternyata masalah CACHE dimana css yang lama itu masih terbaca sebagai css yang dipanggil oleh templatenya. Walaupun dari pihak saya sudah upload filenya.

Cara memperbaikinya adalah masuk dan buka alamat cssnya lalu refresh. Saat kembali ke template maka tampilan akan benar. Namun ini tidak masuk akal bila memakai cara barusan, jadi saya meminta untuk melakukan ctrl-f5 yang artinya refresh benar-benar!

CTRL+F5

cara ini efektif bila templatenya berubah (hint ini belum masuk css dan js). Dimana template yang saya ubah (salah satu paragraf) saat di refresh masih tetap?!? Tetapi ternyata cara ini gagal saat berurusan dengan CSS (yang di include) di HTML tersebut. Tetapi memanfaatkan CTRL+F5 juga bukan solusi yang baik bila kita sedang melakukan presentasi didepan klien.

Ada saran yaitu memakai header expire. Dimana kita setting expirenya kemarin, tetapi solusinya tetap tidak berguna saat browser kita memutuskan menyimpan cache dan memakai cache tersebut. Cara yang kupakai adalah memaksa browser untuk mengambil nilai terbaru. Biasanya koding yang saya gunakan diberi tambahan ?t=xxxx. xxx disini adalah angka random yang di generate sendiri.

Dengan angka random, browser dipaksa membuka halaman terbaru karena dianggap yang dibuka halamannya beda. Walau demikian cara ini tidak di anjurkan bila status website anda sudah publish. Karena akan merusak tampilan dan pandangan orang terhadap situs anda. Benar2 solusi yang membingungkan.

Di lain pihak, cara ini ternyata juga efektif untuk css dan js. Dimana saya melakukan ini di css dan js yang di include yaitu:

tes.css?123 

dengan cara ini saya bisa memaksa css nya terpanggil yang baru. Tetapi tidak akan bijaksana bila digunakan pada js yang ukurannya besar (bahkan ada js yang ukurannya melebihi 500kb). walau demikian cara ini lebih baik dihindari, kecuali anda membuat cara memanggil css memakai php seperti

css.php?f=style

saya melihat bahwa cara ini malah lebih efektif dan untungnya bisa dimanipulasi agar selalu update. Walau saya belum mencoba tetapi updatenya bisa dijamin kok. Apalagi dengan pake php untuk manggil, kita bisa menambahkan header() yang memberi nilai expire mundur.

Kesimpulan:

• Browser terkadang membuat cache yang kita tak inginkan.
• cara membuat browser tidak memakai cache adalah memaksa dia membaca file yang baru dengan memberi tambahan get yang sebenarnya random.
• memaksa membaca file yang baru dapat merugikan bila yang dipanggil besar. Jadi gunakan untuk file yang kemungkinannya berukuran kecil.
• memanfaatkan php memanggil css disarankan. Karena bisa diberi perintah expire sehingga yang dipanggil adalah yang terbaru tanpa memberikan tambahan get yang random seperti sebelumnya.

Akhir kata, masih banyak cara menuju roma.