Membuat Keranjang Belanja Dengan Penyimpanan Web HTML5

Dengan munculnya HTML5, banyak situs dapat mengganti plugin dan kode JavaScript dengan kode HTML sederhana yang lebih efisien seperti audio, video, geolokasi, dll. Tag HTML5 membuat pekerjaan pengembang menjadi lebih mudah sekaligus meningkatkan waktu buka halaman dan kinerja situs. Secara khusus, penyimpanan web HTML5 adalah pengubah permainan karena memungkinkan browser pengguna untuk menyimpan data pengguna tanpa menggunakan server. Jadi pembuatan penyimpanan web, memungkinkan pengembang front-end untuk mencapai lebih banyak di situs web mereka tanpa mengetahui atau menggunakan pengkodean atau basis data sisi server.

Situs web e-commerce online sebagian besar menggunakan bahasa sisi server seperti PHP untuk menyimpan data pengguna dan meneruskannya dari satu halaman ke halaman lain. Menggunakan kerangka kerja back-end JavaScript seperti Node.js, kita dapat mencapai tujuan yang sama. Namun, dalam tutorial ini, kami akan menunjukkan kepada Anda langkah demi langkah cara membuat keranjang belanja dengan HTML5 dan beberapa kode JavaScript kecil. Kegunaan lain dari teknik dalam tutorial ini adalah untuk menyimpan preferensi pengguna, konten favorit pengguna, daftar keinginan, dan pengaturan pengguna seperti nama dan kata sandi di situs web dan aplikasi seluler asli tanpa menggunakan database.

Banyak situs web dengan lalu lintas tinggi mengandalkan teknik kompleks seperti pengelompokan server, penyeimbang beban DNS, cache sisi klien dan sisi server, database terdistribusi, dan layanan mikro untuk mengoptimalkan kinerja dan ketersediaan. Memang, tantangan utama untuk situs web dinamis adalah mengambil data dari database dan menggunakan bahasa sisi server seperti PHP untuk memprosesnya. Namun, penyimpanan basis data jarak jauh harus digunakan hanya untuk konten situs web penting, seperti artikel dan kredensial pengguna. Fitur seperti preferensi pengguna dapat disimpan di browser pengguna, mirip dengan cookie. Demikian juga, saat Anda membuat aplikasi seluler asli, Anda dapat menggunakan penyimpanan web HTML5 bersama dengan database lokal untuk meningkatkan kecepatan aplikasi Anda. Jadi, sebagai pengembang front-end, kita perlu mencari cara untuk memanfaatkan kekuatan penyimpanan web HTML5 dalam aplikasi kita pada tahap awal pengembangan.

Saya telah menjadi bagian dari tim yang mengembangkan situs web sosial berskala besar, dan kami sangat menggunakan penyimpanan web HTML5. Misalnya, saat pengguna masuk, kami menyimpan ID pengguna yang di-hash dalam sesi HTML5 dan menggunakannya untuk mengautentikasi pengguna di halaman yang dilindungi. Kami juga menggunakan fitur ini untuk menyimpan semua pemberitahuan push baru — seperti pesan obrolan baru, pesan situs web, dan umpan baru — dan meneruskannya dari satu halaman ke halaman lain. Saat situs web sosial mendapatkan lalu lintas tinggi, ketergantungan total pada server untuk penyeimbangan beban mungkin tidak berfungsi, jadi Anda harus mengidentifikasi tugas dan data yang dapat ditangani oleh browser pengguna alih-alih server Anda.

Latar Belakang Proyek

Keranjang belanja memungkinkan pengunjung situs web untuk melihat halaman produk dan menambahkan item ke keranjang mereka. Pengunjung dapat meninjau semua item mereka dan memperbarui keranjang mereka (seperti menambah atau menghapus item). Untuk mencapai ini, situs web perlu menyimpan data pengunjung dan meneruskannya dari satu halaman ke halaman lain, hingga pengunjung membuka halaman checkout dan melakukan pembelian. Menyimpan data dapat dilakukan melalui bahasa sisi server atau sisi klien. Dengan bahasa sisi server, server menanggung beban penyimpanan data, sedangkan dengan bahasa sisi klien, komputer pengunjung (desktop, tablet, atau smartphone) menyimpan dan memproses data. Setiap pendekatan memiliki pro dan kontra. Dalam tutorial ini, kita akan fokus pada pendekatan sisi klien sederhana, berdasarkan HTML5 dan JavaScript.

Catatan : Untuk dapat mengikuti tutorial ini, diperlukan pengetahuan dasar tentang HTML5, CSS dan JavaScript.

File Proyek

Klik di sini untuk mengunduh file sumber proyek. Anda juga dapat melihat demo langsung.

Ikhtisar Penyimpanan Web HTML5

Penyimpanan web HTML5 memungkinkan aplikasi web untuk menyimpan nilai secara lokal di browser yang dapat bertahan dari sesi browser, seperti halnya cookie. Tidak seperti cookie yang perlu dikirim dengan setiap permintaan HTTP, data penyimpanan web tidak pernah ditransfer ke server; dengan demikian, penyimpanan web mengungguli cookie dalam kinerja web. Selain itu, cookie memungkinkan Anda untuk menyimpan hanya 4 KB data per domain, sedangkan penyimpanan web memungkinkan setidaknya 5 MB per domain. Penyimpanan web berfungsi seperti larik sederhana, memetakan kunci ke nilai, dan memiliki dua jenis:

• Penyimpanan sesi
  Ini menyimpan data dalam satu sesi browser, yang akan tersedia hingga browser atau tab browser ditutup. Jendela sembulan yang dibuka dari jendela yang sama dapat melihat penyimpanan sesi, dan begitu juga iframe di dalam jendela yang sama. Namun, beberapa jendela dari asal yang sama (URL) tidak dapat melihat penyimpanan sesi satu sama lain.
• Penyimpanan lokal
  Ini menyimpan data di browser web tanpa tanggal kedaluwarsa. Data tersedia untuk semua jendela dengan asal (domain) yang sama, bahkan ketika browser atau tab browser dibuka kembali atau ditutup.

Kedua jenis penyimpanan saat ini didukung di semua browser web utama. Ingatlah bahwa Anda tidak dapat meneruskan data penyimpanan dari satu browser ke browser lain, meskipun kedua browser mengunjungi domain yang sama.

Bangun Keranjang Belanja Dasar

Untuk membuat keranjang belanja, pertama-tama kita membuat halaman HTML dengan keranjang sederhana untuk menampilkan item, dan formulir sederhana untuk menambah atau mengedit keranjang. Kemudian, kami menambahkan penyimpanan web HTML ke dalamnya, diikuti dengan pengkodean JavaScript. Meskipun kami menggunakan tag penyimpanan lokal HTML5, semua langkah identik dengan penyimpanan sesi HTML5 dan dapat diterapkan ke tag penyimpanan sesi HTML5. Terakhir, kita akan membahas beberapa kode jQuery, sebagai alternatif kode JavaScript, bagi mereka yang tertarik menggunakan jQuery.

Tambahkan Penyimpanan Lokal HTML5 Ke Keranjang Belanja

Halaman HTML kami adalah halaman dasar, dengan tag untuk JavaScript eksternal dan CSS yang dirujuk di bagian kepala.

 <!doctype html> <html lang="en-US"> <head> <title>HTML5 Local Storage Project</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="rating" content="General"> <meta name="expires" content="never"> <meta name="language" content="English, EN"> <meta name="description" content="Shopping cart project with HTML5 and JavaScript"> <meta name="keywords" content="HTML5,CSS,JavaScript, html5 session storage, html5 local storage"> <meta name="author" content="dcwebmakers.com"> <script src="Storage.js"></script> <link rel="stylesheet" href="StorageStyle.css"> </head>

Di bawah ini adalah konten HTML yang muncul di badan halaman:

 <form name="ShoppingList"> <fieldset> <legend>Shopping cart</legend> <label>Item: <input type="text" name="name"></label> <label>Quantity: <input type="text" name="data"></label> <input type="button" value="Save"> <input type="button" value="Update"> <input type="button" value="Delete"> </fieldset> <div> <h2>Shopping List</h2> <table></table> <label><input type="button" value="Clear"> * Delete all items</label> </div> </form>

Menambahkan JavaScript Ke Keranjang Belanja

Kami akan membuat dan memanggil fungsi JavaScript doShowAll() di acara onload() untuk memeriksa dukungan browser dan untuk membuat tabel secara dinamis yang menunjukkan pasangan nama-nilai penyimpanan.

 <body onload="doShowAll()">

Atau, Anda dapat menggunakan acara onload JavaScript dengan menambahkan ini ke kode JavaScript:

 window.load=doShowAll();

Atau gunakan ini untuk jQuery:

 $( window ).load(function() { doShowAll(); });

Dalam fungsi CheckBrowser() , kami ingin memeriksa apakah browser mendukung penyimpanan HTML5. Perhatikan bahwa langkah ini mungkin tidak diperlukan karena sebagian besar browser web modern mendukungnya.

 /* =====> Checking browser support. //This step might not be required because most modern browsers do support HTML5. */ //Function below might be redundant. function CheckBrowser() { if ('localStorage' in window && window['localStorage'] !== null) { // We can use localStorage object to store data. return true; } else { return false; } }

Di dalam doShowAll() , jika fungsi CheckBrowser() mengevaluasi dukungan browser terlebih dahulu, maka akan secara dinamis membuat tabel untuk daftar belanja selama pemuatan halaman. Anda dapat mengulangi kunci (nama properti) dari pasangan nilai kunci yang disimpan di penyimpanan lokal di dalam loop JavaScript, seperti yang ditunjukkan di bawah ini. Berdasarkan nilai penyimpanan, metode ini mengisi tabel secara dinamis untuk menunjukkan pasangan nilai kunci yang disimpan di penyimpanan lokal.

 // Dynamically populate the table with shopping list items. //Step below can be done via PHP and AJAX, too. function doShowAll() { if (CheckBrowser()) { var key = ""; var list = "<tr><th>Item</th><th>Value</th></tr>\n"; var i = 0; //For a more advanced feature, you can set a cap on max items in the cart. for (i = 0; i <= localStorage.length-1; i++) { key = localStorage.key(i); list += "<tr><td>" + key + "</td>\n<td>" + localStorage.getItem(key) + "</td></tr>\n"; } //If no item exists in the cart. if (list == "<tr><th>Item</th><th>Value</th></tr>\n") { list += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td></tr>\n"; } //Bind the data to HTML table. //You can use jQuery, too. document.getElementById('list').innerHTML = list; } else { alert('Cannot save shopping list as your browser does not support HTML 5'); } }

Catatan : Anda atau kerangka kerja Anda akan memiliki metode pilihan untuk membuat simpul DOM baru dan menangani peristiwa. Untuk menjaga semuanya tetap jelas dan fokus, contoh kita menggunakan .innerHTML dan event handler sebaris meskipun kita biasanya menghindarinya dalam kode produksi.

Tip: Jika Anda ingin menggunakan jQuery untuk mengikat data, Anda cukup mengganti document.getElementById('list').innerHTML = list; dengan $('#list').html()=list; .

Jalankan Dan Uji Keranjang Belanja

Di dua bagian sebelumnya, kami menambahkan kode ke kepala HTML, dan kami menambahkan HTML ke formulir keranjang belanja dan keranjang. Kami juga membuat fungsi JavaScript untuk memeriksa dukungan browser dan mengisi keranjang dengan item di keranjang. Dalam mengisi item keranjang, JavaScript mengambil nilai dari penyimpanan web HTML, bukan database. Di bagian ini, kami akan menunjukkan kepada Anda bagaimana data dimasukkan ke dalam mesin penyimpanan HTML5. Artinya, kami akan menggunakan penyimpanan lokal HTML5 bersama dengan JavaScript untuk memasukkan item baru ke keranjang belanja, serta mengedit item yang ada di keranjang.

Catatan : Saya telah menambahkan bagian tips di bawah ini untuk menampilkan kode jQuery, sebagai alternatif dari yang JavaScript.

Kami akan membuat elemen div HTML terpisah untuk menangkap masukan dan pengiriman pengguna. Kami akan melampirkan fungsi JavaScript yang sesuai di acara onClick untuk tombol.

 <input type="button" value="Save"> <input type="button" value="Update"> <input type="button" value="Delete">

Anda dapat mengatur properti pada objek localStorage yang mirip dengan objek JavaScript normal. Berikut adalah contoh bagaimana kita dapat mengatur properti penyimpanan lokal myProperty ke nilai myValue :

 localStorage.myProperty="myValue";

Anda dapat menghapus properti penyimpanan lokal seperti ini:

 delete localStorage.myProperty;

Sebagai alternatif, Anda dapat menggunakan metode berikut untuk mengakses penyimpanan lokal:

 localStorage.setItem('propertyName','value'); localStorage.getItem('propertyName'); localStorage.removeItem('propertyName');

Untuk menyimpan pasangan nilai kunci, dapatkan nilai dari objek JavaScript yang sesuai dan panggil metode setItem :

 function SaveItem() { var name = document.forms.ShoppingList.name.value; var data = document.forms.ShoppingList.data.value; localStorage.setItem(name, data); doShowAll(); }

Di bawah ini adalah alternatif jQuery untuk fungsi SaveItem . Pertama, tambahkan ID ke input formulir:

 <label>Item: <input type="text" name="name"></label> <label>Quantity: <input type="text" name="data"></label>

Kemudian, pilih input formulir berdasarkan ID, dan dapatkan nilainya. Seperti yang Anda lihat di bawah, ini jauh lebih sederhana daripada JavaScript:

 function SaveItem() { var name = $("#name").val(); var data = $("#data").val(); localStorage.setItem(name, data); doShowAll(); }

Untuk memperbarui item di keranjang belanja, Anda harus terlebih dahulu memeriksa apakah kunci item tersebut sudah ada di penyimpanan lokal, lalu memperbarui nilainya, seperti yang ditunjukkan di bawah ini:

 //Change an existing key-value in HTML5 storage. function ModifyItem() { var name1 = document.forms.ShoppingList.name.value; var data1 = document.forms.ShoppingList.data.value; //check if name1 is already exists //Check if key exists. if (localStorage.getItem(name1) !=null) { //update localStorage.setItem(name1,data1); document.forms.ShoppingList.data.value = localStorage.getItem(name1); } doShowAll(); }

Di bawah ini menunjukkan alternatif jQuery.

 function ModifyItem() { var name1 = $("#name").val(); var data1 = $("#data").val(); //Check if name already exists. //Check if key exists. if (localStorage.getItem(name1) !=null) { //update localStorage.setItem(name1,data1); var new_info=localStorage.getItem(name1); $("#data").val(new_info); } doShowAll(); }

Kami akan menggunakan metode removeItem untuk menghapus item dari penyimpanan.

 function RemoveItem() { var name=document.forms.ShoppingList.name.value; document.forms.ShoppingList.data.value=localStorage.removeItem(name); doShowAll(); }

Tip: Mirip dengan dua fungsi sebelumnya, Anda dapat menggunakan pemilih jQuery di fungsi RemoveItem .

Ada metode lain untuk penyimpanan lokal yang memungkinkan Anda menghapus seluruh penyimpanan lokal. Kami memanggil fungsi ClearAll() dalam acara onClick dari tombol "Hapus":

 <input type="button" value="Clear">

Kami menggunakan metode yang clear untuk menghapus penyimpanan lokal, seperti yang ditunjukkan di bawah ini:

 function ClearAll() { localStorage.clear(); doShowAll(); }

Penyimpanan Sesi

Objek sessionStorage bekerja dengan cara yang sama seperti localStorage . Anda dapat mengganti contoh di atas dengan objek sessionStorage untuk mengakhiri data setelah satu sesi. Setelah pengguna menutup jendela browser, penyimpanan akan dihapus. Singkatnya, API untuk localStorage dan sessionStorage identik, memungkinkan Anda untuk menggunakan metode berikut:

• setItem(key, value)
• getItem(key)
• removeItem(key)
• clear()
• key(index)
• length

Keranjang Belanja Dengan Array Dan Objek

Karena penyimpanan web HTML5 hanya mendukung penyimpanan nilai nama tunggal, Anda harus menggunakan JSON atau metode lain untuk mengonversi larik atau objek Anda menjadi string tunggal. Anda mungkin memerlukan array atau objek jika Anda memiliki kategori dan subkategori item, atau jika Anda memiliki keranjang belanja dengan banyak data, seperti info pelanggan, info item, dll. Anda hanya perlu memasukkan item array atau objek ke dalam string untuk menyimpannya di penyimpanan web, dan kemudian meledak (atau membagi) mereka kembali ke array untuk menampilkannya di halaman lain. Mari kita lihat contoh dasar keranjang belanja yang memiliki tiga set info: info pelanggan, info barang, dan alamat surat khusus. Pertama, kita menggunakan JSON.stringify untuk mengubah objek menjadi string. Kemudian, kami menggunakan JSON.parse untuk membalikkannya kembali.

Petunjuk : Ingatlah bahwa nama kunci harus unik untuk setiap domain.

 //Customer info //You can use array in addition to object. var obj1 = { firstname: "John", lastname: "thomson" }; var cust = JSON.stringify(obj1); //Mailing info var obj2 = { state: "VA", city: "Arlington" }; var mail = JSON.stringify(obj2); //Item info var obj3 = { item: "milk", quantity: 2 }; var basket = JSON.stringify(obj3); //Next, push three strings into key-value of HTML5 storage. //Use JSON parse function below to convert string back into object or array. var New_cust=JSON.parse(cust);

Ringkasan

Dalam tutorial ini, kita telah mempelajari cara membuat keranjang belanja langkah demi langkah menggunakan penyimpanan web HTML5 dan JavaScript. Kami telah melihat cara menggunakan jQuery sebagai alternatif JavaScript. Kami juga telah membahas fungsi JSON seperti stringify dan parse untuk menangani array dan objek dalam keranjang belanja. Anda dapat membangun tutorial ini dengan menambahkan lebih banyak fitur, seperti menambahkan kategori dan subkategori produk sambil menyimpan data dalam larik multidimensi JavaScript. Selain itu, Anda dapat mengganti seluruh kode JavaScript dengan jQuery.

Kami telah melihat hal lain yang dapat dicapai pengembang dengan penyimpanan web HTML5 dan fitur lain apa yang dapat mereka tambahkan ke situs web mereka. Misalnya, Anda dapat menggunakan tutorial ini untuk menyimpan preferensi pengguna, konten favorit, daftar keinginan, dan pengaturan pengguna seperti nama dan kata sandi di situs web dan aplikasi seluler asli, tanpa menggunakan database.

Sebagai penutup, berikut adalah beberapa masalah yang perlu dipertimbangkan saat menerapkan penyimpanan web HTML5:

• Beberapa pengguna mungkin memiliki pengaturan privasi yang mencegah browser menyimpan data.
• Beberapa pengguna mungkin menggunakan browser mereka dalam mode penyamaran.
• Waspadai beberapa masalah keamanan, seperti serangan spoofing DNS, serangan lintas direktori, dan kompromi data sensitif.

Bacaan Terkait

• “Batas Penyimpanan Browser Dan Kriteria Penggusuran,” dokumen web MDN, Mozilla
• “Penyimpanan Web,” Standar Hidup HTML,
• “Minggu Ini Dalam HTML 5,” Blog WHATWG