Scribd Logo
Upload

Welcome to Scribd!

  • Creative Problem3: Develop An Application For Implementing A Shopping Cart For Achieving Web Services of Intelligent Shopping

    Uploaded by

    Chandra pratap
    27 views5 pages

    Original Title

    Problem3

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    27 views5 pages

    Creative Problem3: Develop An Application For Implementing A Shopping Cart For Achieving Web Services of Intelligent Shopping

    Uploaded by

    Chandra pratap

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    Creative Problem3: 

     Develop an application for


    implementing a shopping cart for achieving web
    services of Intelligent Shopping.

    To build our shopping cart, we first create an HTML page with a


    simple cart to show items, and a simple form to add or edit the
    basket. Then, we add HTML web storage to it, followed by
    JavaScript coding. Although we are using HTML5 local storage
    tags, all steps are identical to those of HTML5 session storage
    and can be applied to HTML5 session storage tags. Lastly, we’ll
    go over some jQuery code, as an alternative to JavaScript code,
    for those interested in using jQuery.

    <!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">
    <script src="Storage.js"></script>
    <link rel="stylesheet" href="StorageStyle.css">
    </head>

    <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" onclick="SaveItem()">


    <input type="button" value="Update" onclick="ModifyItem()">
    <input type="button" value="Delete" onclick="RemoveItem()">
    </fieldset>
    <div id="items_table">
    <h2>Shopping List</h2>
    <table id="list"></table>
    <label><input type="button" value="Clear" onclick="ClearAll()">
    * Delete all items</label>
    </div>
    </form>

    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');
    }
    }

    Run And Test The Shopping Cart

    In the previous two sections, we added code to the HTML


    head, and we added HTML to the shopping cart form and
    basket. We also created a JavaScript function to check for
    browser support and to populate the basket with the items
    in the cart. In populating the basket items, the JavaScript
    fetches values from HTML web storage, instead of a
    database. In this part, we’ll show you how the data are
    inserted into the HTML5 storage engine. That is, we’ll
    use HTML5 local storage in conjunction with JavaScript
    to insert new items to the shopping cart, as well as edit an
    existing item in the cart.
    Summary

    To build a shopping cart step by step using HTML5 web


    storage and JavaScript. We’ve seen how to use jQuery as
    an alternative to JavaScript. We’ve also discussed JSON
    functions like stringify and parse to handle arrays and
    objects in a shopping cart. this tutorial by adding more
    features, like adding product categories and subcategories
    while storing data in a JavaScript multi-dimensional
    array. Moreover, we can replace the whole JavaScript
    code with jQuery.
    We’ve seen what other things developers can accomplish
    with HTML5 web storage and what other features they
    can add to their websites. For example, you can use this
    tutorial to store user preferences, favorited content, wish
    lists, and user settings like names and passwords on
    websites and native mobile apps, without using a
    database.
    To conclude, here are a few issues to consider when
    implementing HTML5 web storage:
     Some users might have privacy settings that prevent
    the browser from storing data.
     Some users might use their browser in incognito
    mode.
     Be aware of a few security issues, like DNS spoofing
    attacks, cross-directory attacks, and sensitive data
    compromise.

    You might also like