Broad Network


Sending Shopping Cart Data to Database for ECMAScript and MySQL Web Development

Web Development Basics with ECMAScript and MySQL – Part 13

Web Development with ECMAScript and MySQL in Node.js

Foreword: In this part of the series, you will learn how to send the shopping cart data to the database for ECMAScript and MySQL web development.

By: Chrysanthus Date Published: 17 Jul 2016

Introduction

This is part 13 of my series, Web Development Basics with ECMAScript and MySQL. In this part of the series, you will learn how to send the shopping cart data to the database for ECMAScript and MySQL web development. I assume you have read the previous parts of the series, before reaching here; this is a continuation.

Shopping Cart String
You can assemble all the data in the shopping cart into a string and send to a ECMAScript file at the web server. This ECMAScript file will then extract the values from the string and send the data to the database server.

For the shopping Cart the following code can be used:

    <script type="text/ECMAScript">

        function formPurchaseStr()
            {
                purchaseStr = "";
                tableSize = document.getElementById("AT1").rows.length;

                if (tableSize > 1)
                    {
                        for (k=1; k<tableSize; ++k)
                            {
                                purchaseStr += "_" + "quantity=" + document.getElementById("AT1").rows[k].cells[0].innerHTML + "&" + "itemName=" + document.getElementById("AT1").rows[k].cells[1].innerHTML + "&" + "price=" + document.getElementById("AT1").rows[k].cells[2].innerHTML + "&" + "total=" + document.getElementById("AT1").rows[k].cells[3].innerHTML;
                            }

                        document.getElementById('purchaseStr').value = purchaseStr;

                        return true;
                    }
                else
                    {
                        alert('The Shopping Cart is empty!');
                        return false;
                    }
            }

    </script>

    <form method="POST" action="purchase.js" onsubmit="return formPurchaseStr()">
        Money Transfer Email: <input type="email" name="email">
        <input type="hidden" name="purchaseStr">
        <p style="text-align:center"><button type="submit">Purchase</button></p>
    </form>

This code is the HTML Form of the shopping cart plus an extra ECMAScript. The script is new here, but the fore is the one you saw in the previous part of the series. All of it should be in the aside element. Apart from the command,

    onunload="window.clearInterval(ti)"

all the code concerning the shopping cart is in the aside element. Do not confuse between the tables for the shopping cart and the table for the items (products). The two tables for the shopping cart are in the aside element. The table for the items (4 in this project) is not in the aside element; but it is in the same page as the aside element.
Let us now see how the ECMAScript for the HTML Form operates: There is one function in the script. The function begins by initializing 2 variables. One of the variables named, purchaseStr, will hold the complete string that has all the values of the shopping cart. The other variable named, tableSize, holds the size (length) of the big table.

The function has an if-construct. The rest of the code for the function is in the if-construct. The condition for the if-construct checks if the big table has selected values (not the headings) for purchase. It does this with the condition, (tableSize > 1). Remember, the big table has a header row, whose cell contents are not sent to the server. That is why the if-condition checks if tableSize is greater than 1 and not greater than 0.

If the condition returns false, then the if-construct alerts the user that he has not yet selected any item for purchase (“The Shopping Cart is empty!”). If the condition returns true, then the if-block is executed. The if-block uses a for-loop to build up the purchaseStr string. The string separates variable names and values with the = sign; it separates variable name/value pairs with the & sign; it separates item data (for rows) with the underscore. Do not confuse between this format of forming a string with what happens with the HTTP GET method. With the above string, the HTML Form sends the string to the server, as one un-separable string. The line after the for-loop above, assigns the string (value) to the hidden input text element of the shopping cart HTML Form. At the server, the CGI object will receive the string as one value. Then ECMAScript regular expression techniques will have to be used to split and extract data from the received string.

This code is the HTML Form of the shopping cart plus an extra ECMAScript. The script is new here, but the fore is the one you saw in the previous part of the series. All of it should be in the aside element. Apart from the command,

    onunload="window.clearInterval(ti)"

all the code concerning the shopping cart is in the aside element. Do not confuse between the tables for the shopping cart and the table for the items (products). The two tables for the shopping cart are in the aside element. The table for the items (4 in this project) is not in the aside element; but it is in the same page as the aside element.
Let us now see how the ECMAScript for the HTML Form operates: There is one function in the script. The function begins by initializing 2 variables. One of the variables named, purchaseStr, will hold the complete string that has all the values of the shopping cart. The other variable named, tableSize, holds the size (length) of the big table.

The function has an if-construct. The rest of the code for the function is in the if-construct. The condition for the if-construct checks if the big table has selected values (not the headings) for purchase. It does this with the condition, (tableSize > 1). Remember, the big table has a header row, whose cell contents are not sent to the server. That is why the if-condition checks if tableSize is greater than 1 and not greater than 0.

If the condition returns false, then the if-construct alerts the user that he has not yet selected any item for purchase (“The Shopping Cart is empty!”). If the condition returns true, then the if-block is executed. The if-block uses a for-loop to build up the purchaseStr string. The string separates variable names and values with the = sign; it separates variable name/value pairs with the & sign; it separates item data (for rows) with the underscore. Do not confuse between this format of forming a string with what happens with the HTTP GET method. With the above string, the HTML Form sends the string to the server, as one un-separable string. The line after the for-loop above, assigns the string (value) to the hidden input text element of the shopping cart HTML Form. At the server, the CGI object will receive the string as one value. Then ECMAScript regular expression techniques will have to be used to split and extract data from the received string.

In this project, the email (PayPal or MoneyBookers) will also be sent to the server as a separate name/value pair. In a commercial project, the user name should also be sent, so that the server uses it to know the name and address of the buyer. If the user does not have to login before buying, then the user’s credentials (name, address, credit card info or email) will have to be typed at the shopping cart, and sent to the server.

In a commercial project, you should ask PayPal or MoneyBookers to give you their code, that you will associate with the shopping cart. With this association, money will automatically be deducted from the buyer’s PayPal or MoneyBookers account.

At the Server
For the rest of this tutorial I will discuss what happens at the server. Everything being equal, there are two servers (software) in the Internet host computer (which is different from the client’s computer): one is the web server (e.g. Abyss Web Server) and the other is the database server (e.g. MySQL). There might even be the email server, making up to 3 software servers. The ECMAScript file that receives the dataset from the shopping cart HTML Form is in the web server.

One of the variable statements for the CGI object in the ECMAScript file, should be:

    var $purchaseStr = $obj.param('purchaseStr');

This string will have to be split and the item (product) values extracted. The ECMAScript regular expression syntax to split a string is:

    var arr = $subject.split(/(?:$simpleRegex)/);

This ECMAScript function returns an array. You would have to use this, 3 times: the first time is to split the string about the underscores into an array of items (row) data. Next, you split each item data about & to have name value/pairs. And then you split each name/value pair about = to have the names and values.

So you would finally have the values from the shopping cart in arrays. The script can then go on to connect to the database server, select a database and send the data into the Sales and SaleItems tables. In this case, sending data to the database is a transaction; so you would have to lock and unlock tables.

I will not give you any code for the ECMAScript file at the web server. If you have covered the pre-knowledge in the first part of this series, and if you have read all the parts of this series, then you should be able to write up the file yourself.

Email
The ECMAScript file can also send an email to the user to inform him of his transaction. I explained how to send such an email in one of the previous parts of the series.

Logged In
When a user is logged in, the password and username are saved in his computer for the session. These two values are available to every page of the site at the browser. They are two sessionStorage values. An HTML Form can read these values and send them to the server to connect to the database. So, the shopping cart HTML Form should read these values and send to the database server for connection to the database. In order to safe time and space I did not take this into account in the project of this series; you should be able to do that. So, once a user is logged in, HTML Forms in different pages, can enable him access the database from those different web pages.

Useful TRIGGER
We are toward the end of the series and it is good I tell you how to use a trigger to update the Products table for quantity-available when the purchase information is recorded at the database. The information here is for the Bookshop database of this series.

It is the SaleItems table that should have the trigger. For the user to use a trigger of the SaleItems table, the root user of the MySQL server has to give the user (buyer) the privilege as follows:

    grant TRIGGER on Bookshop.SaleItems to 'username';

A Trigger is associated with a database table. So the TRIGGER has to be coded to work for the SaleItems table. The trigger will be engaged on Insert; that is, when a row is inserted in the SaleItems table. The purpose of the trigger is to subtract the quantity of an item (product) inserted (sold) in the SaleItems table from the Products table on the quantity-available column. In that way, when an item is sold, the quantity available (inventory) in the Products table is updated. The user needs to also have the UPDATE privilege for the Products table. This is all I will talk about on Triggers in this series. If you have covered the prerequisite and if you have read all the parts of this series, then you should not have a problem coding triggers for web development.

Summary of Web Development
In web development, you have a browser for the client in the client’s computer. You have a host computer in the Internet. This Internet computer has the web server and the database server (in theory). The web server has the website. It has the hard coded web pages. The web server has a script language, such as ECMAScript. There are script files written in the scripting language in the web server. Each of these files is a program and carries out its own task. If the client wants something from the database, one of the script files will get it and send the result to the browser at the client’s computer. Any new web page to be formed and sent to the browser, is formed by these script files. Email is sent by a script file in the browser.

For this series, all the files developed can be downloaded in a zip folder from:

Bookshop Files

And this is the end of the series. It was a long ride, but rewarding.

Chrys

Related Links

Web Development Basics with ECMAScript and MySQL
ECMAScript Validation of HTML Form Data
Web Live Text Chart Application using ECMAScript and MySQL
More Related Links
Node Mailsend
EMySQL API
Node.js Web Development Course
Major in Website Design
Low Level Programming - Writing ECMAScript Module
ECMAScript Course

BACK

Comments

Become the Writer's Follower
Send the Writer a Message