Building an Online Shop's Product Detail Page / Page 2

Building an Online Shop's Product Detail Page [con't]

Creating a shopping cart Mechanism – The Database

So far, we have created a fully functioning shop front for our bookshop. A user can currently view the books in their various genres, as well as select an individual book for more detailed viewing. What the user can't do is to actually buy a particular book…and this is exactly the kind of functionality that we want to give our application in the next couple of articles. In this section, we are going to look at how to create the tables that we will need for the shopping cart of our online shop.

Requirements

So what does a shopping cart actually do? A shopping cart must fulfill these basic requirements:

• Allow the customer to add items to the cart
• Allow for different quantities of each item
• Allow the customer to alter the quantities of an item
• Allow the customer to remove items from the cart

These are only the basic requirements of a typical shopping cart, you might add more depending on your needs.

The Database Tables

We already created a database in the previous article, so in this section we will not be creating a new database, because we actually want to link this shopping cart to the shop front application that we created earlier. First of all, we need a table that will hold information about the items that a particular user bought. We need a table that will:

• Somehow identify the user
• Hold the name and other information of the books that the user wants to buy
• Hold the quantity of the books that the user wants to buy.
• Store the date on which the user intends to buy a book.

Now, because I did not create a login script for this online shop, we need to find another way to identify a user of our online shop. The only other way, in the absence of a login script, is to use sessions. Sessions are started simply by calling the session_start() function and when you call this function a session ID is generated. The sessionID has about 32 alphanumeric characters. This id lasts throughout the execution time of a particular script. So far, we have worked out that we need:

• To identify the user that is currently browsing the books
• Provide the names of the books that the user wants to buy
• Store the quantity of books that a user wants to buy

This should give us some indication of what kind of table we should create to track a user's purchases. It should go something like this:

While the table structure above meets the requirements for tracking a user, it needs some optimization. For example, we know that databases work faster when dealing with numbers instead of text, therefore, if we remove all the information about a book (i.e the fields named books_*) that the user intends to buy and simply add the book id to the table, it will work equally effective but faster. Once we have the book id, we can simply run a query and retrieve all the information about the book from the books table. Therefore, the revised table should have the following fields:

Why the "date_added" field? This is just to strengthen the method of identifying the user. If we use the sessionID and date, we can identify the user more accurately. Now, copy and paste the following to create the cart_track table:

CREATE TABLE `cart_track` ( `cart_id` int(4) NOT NULL auto_increment, `session_id` varchar(32) NOT NULL default '', `bid` int(4) NOT NULL default '0', `date_added` date NOT NULL default '0000-00-00', `qty` smallint(4) NOT NULL default '0', PRIMARY KEY (`cart_id`) ) TYPE=MyISAM;

With the following sample data:

INSERT INTO `cart_track` VALUES (0, '', 2, '2006-12-17', 3); INSERT INTO `cart_track` VALUES (0, '00dce4959eeae8234a237ee7cdd36ce2', 1, '2006-12-19', 2); INSERT INTO `cart_track` VALUES (0, 'b4e7a3f842f76c29060aaae5eb60c8b7', 3, '2006-12-20', 4); INSERT INTO `cart_track` VALUES (0, 'b4e7a3f842f76c29060aaae5eb60c8b7', 4, '2006-12-19', 2); INSERT INTO `cart_track` VALUES (0, 'b4e7a3f842f76c29060aaae5eb60c8b7', 2, '2006-12-20', 8); INSERT INTO `cart_track` VALUES (0, 'b4e7a3f842f76c29060aaae5eb60c8b7', 4, '2006-12-19', 11); INSERT INTO `cart_track` VALUES (0, 'b4e7a3f842f76c29060aaae5eb60c8b7', 4, '2006-12-19', 3); INSERT INTO `cart_track` VALUES (0, '3d917a3f03182a86d6b14c3c74f7250a', 1, '2006-12-21', 1);

The second requirement for a shopping cart is when the user decides to checkout, at which point you should take the users name, mailing address and credit card details. We need a table that will hold a record of all of the data (except credit card numbers). A rough outline of the table would look something like this:

Order_id - generates a autonumber for each order Order_name - takes the name of the user Order_address - Delivery address Order_total - Total cost of the books Order_date - Date order was made Session - Identifies the user shipping cost

NOTE: In this application, we are not going to deal with actual payment of the order. See the Payments section below.

The outline above more than adequately meets the requirements; but please feel free to add more fields to suit. Our final table will look something like this:

CREATE TABLE `orders` ( `order_id` int(4) NOT NULL auto_increment, `order_name` varchar(50) NOT NULL default '', `order_address` text NOT NULL, `order_total` float(6,2) NOT NULL default '0.00', `order_date` datetime NOT NULL default '0000-00-00 00:00:00', `order_status` enum('processed','pending') NOT NULL default 'processed', `session` varchar(40) NOT NULL default '', `shipping_cost` decimal(6,2) NOT NULL default '0.00', PRIMARY KEY (`order_id`) ) TYPE=MyISAM;

Some sample data:

</div> </span> <h2>Guidelines for online Payment</h2> <p>Because there is such a vast array of payment systems out there, I've decided to leave that part out and to say just a few words about it. Several commerce methods exist when it comes time to pay for the purchases in the shopping cart. The "right" method for you depends on your business. Merchant accounts through banking institutions often require you to have a business license, a reseller's permit, and other pieces of paper proving you're a legitimate business. If you're simply a person who has a few items to sell, you might not want to go through all that paperwork. However, you still have options!</p> <p>Regardless of the payment method you choose, one thing is certain: If you are passing credit card information over the Web, you must do so over an SSL connection. You do not have to use this secure connection during the user's entire shopping experience, just from the point at which sensitive information is captured, such as the checkout form.</p> <p>Additional, fields<a name="idd1e65578"/><a name="idd1e65571"/> for the "orders" table should include the credit card number, expiration date, and the name on the credit card, if you are going to implement a payment system. Another nice feature is to repeat the user's shopping cart contents with an item subtotal, so the customer remembers what he's paying for and approximately how much the order will cost. Also at this point of the checkout sequence, you offer any shipping options you might have. Shipping and sales tax would be calculated in the next step of the process.</p> <p>From the point of clicking the submit button on the form, the checkout sequence depends on the payment method you are using. VeriSign's product is one of several transaction-processing gateways that exist for use by merchants. Your bank will usually provide a list of merchants it prefers you to use. If you stray from your bank's list of preferred vendors, be sure to research your selected vendor thoroughly, to avoid any delays with deposits and to ensure you're getting the best deal.</p> <h2>Conclusion</h2> <p>In this article we discussed the requirements for a shopping cart as well as its functions. We also created database tables to cater for those requirements. While creating these tables, we went through the normalization process to optimize and make the processing of data faster. In the next article, we will discuss in detail how to integrate the shop front application with the shopping cart. We will also look at the scripts that make the shopping cart work. </p> <p style="text-align: left; font-size: .7em;"> Original: January 8, 2010 <div style="float: right; margin-top: -15px;"> <script type="text/javascript"><!-- insertButtons(); //--> </script><br/><a href="index-2.html">[prev]</a> </div> </div></div> </div> <div id="right"><div class="image square quad" style='margin-bottom:20px;'> <!-- QS-AD: 'imu' start --> <script language="JavaScript"> var t=displayDFPTag("imu"); document.write(t); </script> <!-- QS-AD: 'imu' end --></div> <div id="ssn_widget_container"> <div id="ssn_widget_header"> <h5><img border="0" align="absbottom" alt="Justtechjobs.com" src="https://images.justtechjobs.com/images/webreference.gif"/>Find a programming school near you</h5> </div> <div id="ssn_widget_content"> <form inert id="SSN" name="populate" action="https://www.webreference.com/school-search-results.html" method="get"> <label>Zip Code:</label> <input name="pc" type="text" maxlength="5" value="" style="display:block;float:left;" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" /> <br/><br/> <label>Subject:</label> <select name="sub"> <option value="all">- Select All Subjects -</option> <optgroup label="Computers and Technology"> <option value="compapplications">Computer Applications</option> <option value="comeng">Computer Engineering</option> <option value="comscience">Computer Science</option> <option value="cnp" selected="selected">Computer Prog. - Software Dev.</option> <option value="gameprogramming">Computer Game Programming</option> <option value="webdesign">Web Design</option> <option value="webdevelopment">Web Development</option> <option value="internetsystems">Internet Systems</option> <option value="internetcertification">Internet Certification</option> <option value="databasedesign">Database Design and Development</option> <option value="infosystemsmgmt">Information Systems Management</option> <option value="itprojectmgmt">Information Technology Project Management</option> <option value="networkdesign">Network Design - Development</option> <option value="systemsanalyst">Systems Analyst</option> </select> <br/><br/> <label>Degree:</label> <select name="qual"> <option value="all" selected="selected">- Select All Degrees -</option> <option value="associate">Associate's</option> <option value="bachelor">Bachelor's</option> <option value="master">Master's</option> <option value="doctoral">Doctoral</option> <option value="certificate">Certificates</option> <option value="diploma">Diplomas</option> <option value="coursework">Coursework</option> <option value="mba">MBA</option> </select> <br style="clear:both;"/><br/> <input name="ct" type="radio" value="online" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />Online <input name="ct" type="radio" value="campus" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />Campus <input name="ct" type="radio" value="either" checked="checked" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />Both <br/><br/> <input type="submit" value="Submit" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" /> </form></div> </div><div class="image square quad" style='margin-bottom:20px;'> <!-- QS-AD: 'imu' start --> <script language="JavaScript"> var t=displayDFPTag("imu"); document.write(t); </script> <!-- QS-AD: 'imu' end --></div> <!-- request_uri: '/programming/php/Shopping_02/2.html' --> <div class="articlecategorysummary"> <iframe scrolling="no" frameborder="0" align="middle" src="https://webreference.com/sl/assetlisting/indexcd45.html?wsn=www.webreference.com&wpu=/programming/php/Shopping_02/2.html&lurl=https://o1.qnsr.com/cgi/r?WT.qs_dlk=WkaVXwrIZ78AAHyIJ7UAAAAS%20domain=None;;n=203;c=1395323;s=9530;x=7936;f=201308291521150;u=j;z=TIMESTAMP;k=https://assetform.webreference.com/controller&wpos=AssetListing&lyt=l9&mcss=https://www.webreference.com/imageserver/b2btechleadform/webreference/styles/style_email.css&css=https://www.webreference.com/hqb2b/css/qmp/qmp_default.css&title=Top%20White%20Papers%20and%20Webcasts" name="inneriframe" id="inneriframe" height="820px" width="340px;"></iframe> </div> <script type="text/javascript"> var updateIframe = false; var t = 0; function updateQMPIframe(){ if(!updateIframe) { if($('#inneriframe').contents().find('.asset').length > 0) { if($('#inneriframe').contents().find('#widget-title').text()=='Whitepapers and More'){ $('#inneriframe').contents().find('#widget-title').html('Recommended White Papers and Resources'); //hacky way of changing the QMP widget title } var height = $('#inneriframe').contents().find('#assetsListings').height(); var iframe = document.getElementById('inneriframe'); iframe.setAttribute( 'height', height+50); clearTimeout(t); } else { updateIframe = true; t = setTimeout('updateQMPIframe()', 3000); } } } t = setTimeout('updateQMPIframe()', 5000); </script> </div> </div> <div class="clear"></div> <div id="footer"> <div id="footer_content"> <div id="quad_bottom"class="quad" align='center' style='margin-left:auto;margin-right:auto;width:720px;'> <!-- QS-AD: 'lb' start --> <script language="JavaScript"> var t=displayDFPTag("lb"); document.write(t); </script> <!-- QS-AD: 'lb' end --> </div> <div class="footer_listing">   </div> <div class="footer_listing"> <span class="list-header">WebReference</span> <ul> <li class="first"><a href="../../../js/tips/index.html">Tip Archive</a></li> <li><a href="../../../about.html">About</a></li> <li><a href="../../../sitemap.html">Sitemap</a></li> <li><a href="../../../contact.html">Contact</a></li> <li><a href="../../../accountManagement87fb.html%3FformType=registrationForm.html">Subscribe</a></li> </ul> </div> <div class="footer_listing"> <span class="list-header">Topics</span> <ul> <li class="first"><a href="https://webreference.com/authoring.html">Web Authoring</a></li> <li><a href="../../../internet/index.html">The Internet and the Web</a></li> <li><a href="../../../multimedia/index.html">Multimedia</a></li> <li><a href="https://webreference.com/programming.html">Web Programming</a></li> <li><a href="../../../promotion/index.html">Website Promotion and Marketing</a></li> <li><a href="../../../experts/index.html">Contributors</a></li> </ul> </div> <div class="footer_listing"> <span class="list-header"><a href="https://www.developer.com/"><img src="../../../img/dev.com_logo.png" alt="Developer.com"></a></span> <ul> <li class="first"><a href="../../../terms.html">Terms Of Service</a></li> <li><a href="../../../licensing.html">Licensing and Permissions</a></li> <li><a href="../../../privacy.html">Privacy Policy</a></li> <li><a href="../../../mediakit/index.html">Advertising</a></li> <li><a href="https://e-newsletters.developer.com/">Newsletters</a></li> <!--<li><a href="https://e-newsletters.developer.com/announcement_list.html">E-mail Offers</a></li> --> </ul> </div> <div class="footer_listing">   </div> <div class="clear"></div> <div id="copyright"> Copyright © 2017 QuinStreet Inc. All Rights Reserved. </div> </div> <!-- Google Analytics --> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-48218803-1', 'auto'); ga('send', 'pageview'); </script> <!-- End Google Analytics --> </div> <!-- CREATE AJAX CONTAINERS --> <div id="ajax_alpha"></div> <div id="ajax_beta"></div> <script language="javascript" src="../../../scripts/shCore.js"> </script> <script language="javascript" src="../../../scripts/shBrushPhp.js"> </script> <script language="javascript" src="../../../scripts/shBrushXml.js"> </script> <script language="javascript" src="../../../scripts/shBrushJScript.js"> </script> <script language="javascript"> dp.SyntaxHighlighter.HighlightAll('code'); </script> <!-- FOR LIKE BUTTON --> <script src="https://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript"> </script> <div id="fb-root"></div> <script src="https://geoip.live/country-js/"></script> <script> function set_cookie(cname, cvalue, exdays) { const d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); let expires = "expires="+ d.toUTCString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; } set_cookie("user_country_code", user_country_code, 7); </script> <script type="text/javascript"> var sc_project=11145952; var sc_invisible=1; var sc_security="40b893f9"; </script> <script type="text/javascript" src="//www.statcounter.com/counter/counter.js" async></script> <noscript> <div class="statcounter"> <img class="statcounter" src="//c.statcounter.com/11145952/0/40b893f9/1/" alt="Web Analytics"> </div> </noscript> </body> <!-- Mirrored from www.webreference.com/programming/php/Shopping_02/2.html by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 29 Dec 2017 21:53:10 GMT --> </html>