Simpanan Data menggunakan HTML5 dan Garlic.js

Sebagai pengguna, kadang kala kita berhadapan dengan masalah-masalah teknikal atau tidak disengaja seperti tertutup pelayar web, komputer kaku atau “not responding” bahkan mungkin komputer ditutup secara tiba-tiba. Lebih malang lagi jika masalah itu tadi berlaku semasa kita sedang melakukan urusan penting dalam web.

Bayangkan, semasa korang tengah isi borang untuk melakukan permohonan biasiswa yang panjang. Tiba-tiba, pelayar web “not responding” dan ini selalunya disebabkan tab yang dibuka terlalu banyak. Maka, dengan pantas korang tekan Task Manager dan tutup. Bila borang tersebut dibuka, semua data yang korang masukkan tadi hilang dan perlu ditaip balik.

Melalui HTML5 dan jQuery, terdapat sebuah “plugin” yang dibangunkan menggunakan platform jQuery yang dapat mengatasi masalah ini. Dikenali sebagai Garlic.js.

Mempunyai fungsi yang amat berbeza dengan Garlic Naan yang selalu korang makan dengan Ayam Tandoori tu, Garlic.js akan menyimpan nilai dalam sesebuah borang, dan data akan dihapuskan selepas sahaja borang web itu dihantar.

Ini bermakna, kalau rosak atau “not responding” secara tiba-tiba, data masih tersimpan dengan selamat. Pemasangan Garlic.js, boleh dikatakan agak mudah kerana pembangun web perlu import jQuery dan fail sumber Garlic.js itu tadi, dan menambahkan attribute baru pada borang web.

Pertama, seperti dokumen HTML5 yang lain, ia perlu dimulakan dengan meletakkan tags HTML5 pada baris paling awal sesebuah dokumen.

<!DOCTYPE html>

Seterusnya, masukkan fail jQuery dan Garlic.js pada bahagian HEAD, fail ini boleh didapati dari laman web rasmi Garlic.js. Tujuan meletakkan kod ini pada bahagian HEAD adalah untuk memanggil sebaik dokumen dimuat turun dalam pelayar web. Untuk kemudahan, korang boleh salin dan tampal sahaja kod dibawah ini didalam laman web.

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
 <script type="text/javascript" src="http://cdn.omar.my/garlic/garlic.min.js"></script>

Akhir sekali, letakkan attribute “rel” pada borang web tersebut. Attribute Ini akan mengekalkan semua data dan nilai dalam borang tersebut.

<form data-persist="garlic" method="POST">
 Nama: <input type="text" required/>
 </form>

Sekarang, borang web tadi akan menyimpan data yang dimasukkan ke dalam apa-apa borang input. Sebagai contoh, pengguna memasukkan “Aina” sebagai nama. Nilai “Aina” tadi akan disimpan ke dalam objek localStorage dari Web Storage. Ini bermakna, walaupun pengguna tadi menutup tab, menutup pelayar, hatta mematikan komputer, nilai “Aina” tadi akan kekal sehinggalah borang dihantar atau browser cache dibuang.

Sebenarnya, pelbagai perkara lagi korang boleh lakukan dengan Garlic.js ini seperti validasi Javascript AJAX, mendapatkan nilai dari pangkalan data dan juga menyimpan data secara berterusan.


Komen telah ditutup