Shopping Cart with HTML Table for Web Development with Perl and MySQL

Web Development Basics with Perl and MySQL – Part 10

Using Apache Web Server

Foreword: In this part of the series, I talk about Shopping Cart with HTML Table for Web Development with Perl and MySQL.

By: Chrysanthus Date Published: 28 Apr 2016

Introduction

This is part 10 of my series, Web Development Basics with Perl and MySQL. In this part of the series, I talk about Shopping Cart with HTML Table for Web Development with Perl and MySQL. I assume you have read the previous parts of the series, before reaching here; this is a continuation.

What is a Shopping Cart?
There is no standard technical definition for shopping cart. In this project, a shopping cart is a small area in a number of web pages with the same information. The information can be arranged in rows. Each row can have the quantity of the item the user wants, the name of the item, the unit price for the item, and the total price for the number of the item needed. The shopping cart should also have the grand total for all the items needed. All the pages are of the same site.

So a user (client) can go to an ecommerce website and choose what he wants in different web pages of the site. As he chooses the items, they appear on the shopping cart. After making his choices, he can click a submit button on the shopping cart to send the information to the Internet database server. In this project, before clicking the button, he has to type his PayPal or Moneybookers email address first. It is this email address that the Bookshop will use to collect the money, from the buyers account. In practice, buying using the email address is more involving than this. Usually the PayPal or Moneybookers company, gives the owner of the site (Bookshop) a piece of code that has to be part of one of the files of the site; however, I will not go into that.

In some cases the shopping cart is in a separate window. However, you can have the same shopping cart on different pages, in one window (as well as other web page content).

Shopping Cart Today as Active Client Pages Technology
With conventional web development, a user has to input data into a web page. The information will go to the Internet server, analyzed and then a feedback is sent to the browser. The user then analyzes the feedback mentally, then input another data which is sent to the server for another feedback to come again. This client-server movement continues until the user completes his transaction. Today, so far as shopping cart is concerned, this to-and-fro client-server movement is unnecessarily time consuming.

There is no standard shopping cart technology at the moment. The shopping cart technology I give you here is my own innovation and it is more formal.

Now, at the client, all the information for the shopping cart is coming from the user (user’s mind). So, if the to-and-fro client-server movement can be avoided, some transaction time would be saved. If the user’s browser and operating system are not too high for his computer, then any shopping cart analysis at his computer will be practically instantaneous.

Now, the DOM Table features allow us to manipulate data in tabular form, in a web document. The ECMAScript (standard for JavaScript and other client scripts) can do calculations and analysis at the client. The DOM timer (setInterval()) function is there for regular updating of an HTML element (Table) in a web document. The ECMAScript “window.opener” property (see below) would receive a data string from an opened window. So you have all the tools for shopping cart to be created and updated at the client browser page. While the user is shopping, no information goes to the server (by Active Client Pages technology), until he is ready to commit his decisions to the server. With that, I came up with the principles (innovation) outlined in this part of the series (Active Client Pages).

The principles outlined in this tutorial, will produced, a shopping cart of Active Client Pages technology, in a web development site.

HTML Element to contain the Table for Shopping Cart
The rows of the shopping cart should be in an HTML Table. The shopping cart will have two tables instead of one: one table is for the item rows and the other is for the grand total. The one for the grand total can have just one row and it will be directly below the one with the individual items. The one for the individual items grows in size as the user shops. There is an email input text field and a submit button below the table for grand total. The email field is for the PayPal or MoneyBookers email. When the submit button is clicked, all the information in the shopping cart is sent to the server.

It is good to place all these elements in the HTML aside element and float the aside element to the right of the page. The ECMAScript and the timer function should also be in the aside element. So the shopping cart should be in an aside element (floated to the right). Any web page of the site that needs a shopping cart should have this same aside element with same content. Note: the items to be bought are not in the aside element. Note: the ECMAScrit that prepares the form dataset should also be in the aside element.

Well, I have to stress here that putting the shopping cart in the aside element is my preference. If you do not like the aside element for it, you can put it anywhere you like.

Operation of the Shopping Cart
The items to be bought are not in the aside element. However, the items and the aside element should be on the same page. When the user clicks an item, a new window with the details of the item opens. This window has a field for the user to type in the number of items he wants for the product. When the “Send to Shopping Cart” button is clicked, the name of the item selected and its quantity will be stored in an ECMAScript variable in the shopping cart web page. If the user does not want the item, he would simply dismiss the opened window without clicking the “Send to Shopping Cart” button, and nothing will be stored in the variable. The timer function (operating regularly at short intervals) will read this variable and have the two tables of the shopping cart updated. When the user has finished making his choices, he will type his Paypal or MoneyBookers email address in any page that has the shopping cart and then click submit. There is an ECMScript that prepares a Form dataset from the information in the shopping cart. When the submit button is clicked, the script prepares the dataset and send to the server.

HTML Elements Needed
The following suffices for the aside element:

    <aside style="float:right"></aside>

Inside the aside element (between the two tags) will be the big table and the small one. The following will suffice for the big table:

    <table id="AT1">
        <thead>
            <tr><th>Quantity</th><th>Item Name</th><th>Unit Price</th><th>Total Price ($)</th></tr>
        </thead>
    </table>

If you find the table to be too wide, you can abbreviate some of the headings. For example, you can type in, “Unit Price” as “U. Price”; you can type in “Total Price” as “T. Price”.

The rows in the big table will be inserted by DOM as the items are selected by the buyer. Below the above table you will type the table for the grand total. The following will suffice for the small one row table:

    <table id="AT2">
        <tfoot>
            <tr><th>                                    Grand Total ($):</th><th></th></tr>
        </tfoot>
    </table>

Of course you can modify the aside element and/or tables by adding colors, borders and other esthetic features. The alignment of columns between the two tables may not be perfect. You can allow things that way. It is possible to have perfect alignment between the two tables or have all the data of the two tables in one table. The problem is, by doing that, you may end up with code that works for one browser and does not work for another. So my advice is that you allow the simple alignment above, and do not really change the code.

DOM Features Needed
Row counting in a table begins from zero (0). To insert a new row at the last position, the following syntax is used:

    tableObject.insertRow(-1)

For the first table above, you would type:

        document.getElementById('AT1').insertRow(-1);

So, if there were no row, the first row would be inserted. If there were 1 row, the second row would be inserted. If there were 2, the third would be inserted, etc.

To delete a particular row, use the following syntax:

    tableObject.deleteRow(index)

where index is the row position beginning from zero. For example, to delete the third row off the first (big) table above, you would type:

    document.getElementById('AT1').deleteRow(4);

The following expression will return a reference to a table row:

    document.getElementById("ID").rows[index]

This expression can be used to set or return the content of a row. The following expression returns the reference to a table cell:

    document.getElementById("ID").rows[rowIndex].cells[cellIndex]

This expression can be used to set or return the content of a cell.

The sessionStorage Object
A session string for a row in the first table above, would be something like:

    sessionStorage.item = "quantity=2&name=Book B&price=9.99";

The string in quotes, looks like the HTML Form GET string. The difference is that the GET string cannot have any space (above, there is a space between “Book” and “B”).

Unfortunately, for your browser, the sessionStorage may not work to solve the problem of sending data from an opened window to the opener window (the opener window is the window that opened the new window. I have been in the web design field for more than 10 years and I have learned many tricks. There is a way out (solution) if the sessionStorage does not work as expected in your browser (or your client’s browser).

Instead of using the sessionStorage, you can have a global ECMAScript variable in the opener page. Let the global variable be,

    var newStoreStr;

The opened window should have a script to execute the following command,

    window.opener.newStoreStr =  "quantity=2&name=Book B&price=9.99";

In this statement, the opener property refers to the opener window. And so the string value is assigned to the newStoreStr variable in the opener window. This solution works with all browsers. In my opinion, you should use it instead of sessionStorage, which is still to be implemented in all browsers for the different circumstances in which they are needed.

Splitting the Stored String
The ECMAScript string object has a method called the split() method. This method splits the string (subject) into an array of sub strings. This is the syntax:

    var arr = subject.split([separator])

The subject is the stored string to be split. It is not changed after the split. The separator is a regex. The array contains the sub strings separated, with each separation in an array element.  The following code splits the above string into, “quantity=2”, “name=Book B” and “price=9.99”, using & as the separator:

        <script type="text/ecmascript">
            var subject = sessionStorage.item1;

            var arr = subject.split(/&/);

            alert(arr[0]);
            alert(arr[1]);
            alert(arr[2]);
        </script>

The value of arr[0] is “quantity=2”. The value of arr[1] is “name=Book B” and the value of arr[2] is “price=9.99”. Each array value can further be split about, “=” still using the split method (function). We shall use this principle to split each stored row of items string. After the two level splitting, the values are placed in the shopping cart in one row.

The parseInt and parseFloat ECMAScript Function
When a number is a string or is from a table cell (still a string), before you can use it as an integer, you have to convert it into a proper integer first. To do this, you use the parseInt function as follows:

    properInt = parseInt("numberString");

If numberString represented a float (real number with decimal point), the decimal point and the decimal part of the number would be removed returning only the integer part as a proper integer. If numberString represented an integer (whole number), then the proper integer would simply be returned. You can use a proper integer in calculations. You cannot use a string in calculations.

When a number is a string or is from a table cell (still a string), before you can use it as a float, you have to convert it into a proper float first. To do this, you use the parseFloat function as follows:

    properFloat = parseFloat("floatString");

The proper float can now be used in calculations. You cannot use a string that represents a float in calculations.

The Timer Function
The ECMAScript timer code is something like:

    function functionCall()
        {

        }

   ID = window.setInterval("functionCall()", millisec)

The functionCall() function is what actually updates the two tables. The setInterval() function simply calls the functionCall() function regularly. The setInterval() function has to be cleared after it has finished its work, with a statement like:

    window.clearInterval(ID);

The best place to put the clearInterval() call is in the onunload event attribute in the body element, that has the shopping cart (in aside element). Apart from this, the rest of the shopping cart code is in the aside element.

Do not confuse between the shopping cart tables and the items table. The shopping cart tables have the buying information, while the items table has the items (images) still to be bought. The items table is in the same page as the aside element but not in the aside element.

Image onclick event
Each image will have the onclick event attribute. When an image is clicked, a window will open showing the details of the corresponding item. The user can type the number of the items he wants and then click “Send to Shopping Cart” for the window to close and the information be sent to the shopping cart. I will give you the code of the opened window later in the series. The thing to note here is, that each image has the onclick event attribute to open a window.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

Shopping Cart with HTML Table for Web Development with Perl and MySQL

Web Development Basics with Perl and MySQL – Part 10

Using Apache Web Server

Introduction

Related Links

Comments