Building A Simple Shopping Cart Using PHP

Please Visit The New Post Location Simple Developer

Hello there! When I started learning PHP, I began like most other people; the basics. I then promised to show you how to create a simple shopping cart. I have to warn you beforehand, this is not really a complex version. I figured it is smart to start with a simpler version then add more functionality to it as we proceed. So, let us get to it. I am going to do this in reverse, that is, show you snapshots of the cart then dissect the code. So, here we go!

shoppingcart

Assuming you were looking for oil, spark plugs and tires for your good old truck, you would visit Crazy Auto Store and add them to the cart. As shown above, you enter the quantities into the input area. Simple right? Assuming you have done that, and hit ‘Submit Your Order’ button: Here is what you will see:

confirmationpage

Yeah, when I said it was going to be simple, I meant it. Now let us take a look at both the [HTML] and [PHP] that made the above possible!

HTML FILE (store.html)


<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <head>
        <title>Crazy Auto Store</title>
        <link rel="stylesheet" href="index.css" />
    </head>
    <body>
        <div class="container">
          <form action="store.php" method="post">
             <h1>Welcome To Crazy Auto Store!</h1>
             <hr />
             <label for="oil">Oil Quantity: </label><input type="text"
             name="oil" max="3" maxlength="3" /><br />
             <label for="sparks">Sparks Quantity: </label><input
             type="text"
             name="sparks" max="3" maxlength="3" /><br />
             <label for="tires">Tires Quantity: </label><input
             type="text" name="tires" max="3" maxlength="3" /><br />
             <br />
             <button type="submit">Submit Your Order</button>
             <br />
             <hr />
             <div id="footer">
               <p>Copyright 2013 &copy; Crazy Auto Store Inc</p>
             </div>
         </form>
        </div>
    </body>
</html>

That is the html file (store.html). As you can see, I linked an external css file for presentation. Now that we have got that out of the way, we can look back at the first snapshot and see where it came from. Let us get the PHP file started.

PHP FILE (store.php)

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <head>
        <title>Crazy Auto Store</title>
    </head>
    <body>
        <div class="summary">
           <h1>Below is your order summary:</h1>
           <hr />
           <?php
               //declare the variables here
               $oilqty = 0;
               $sparksqty = 0;
               $tiresqty = 0;
               $total = 0;

               //Now let us get the values from the form
               if(isset($_POST['oil'])){
                  $oilqty = &$_POST['oil'];
               }
               if(isset($_POST['sparks'])){
                  $sparksqty = &$_POST['sparks'];
               }
               if(isset($_POST['tires'])){
                  $tiresqty = &$_POST['tires'];
               }
               $total = $oilqty + $sparksqty + $tiresqty;
               echo '<b>You ordered on </b>'. date('H:i, jS F Y'). ':';
               echo '<br />';
               echo '<b> '.$oilqty. '</b> Oil Containers <br />';
               echo '<b> '.$sparksqty. '</b> Spark Plugs </br />';
               echo '<b> '.$tiresqty. '</b> New Tires <br />';
               echo '<b> '.$total. ' Total Items </b>';
           ?>
           <hr />
           <p>Copyright 2013 &copy; Crazy Auto Store Inc </p>
        </div>
    </body>
</html>

Again, I used my own css here. This should do it. That is all you need to accomplish what I showed you in the snapshots. Easy right? Just a brief explanation for the php file:
You might have noticed a couple of things: isset() and $_POST[]. I used the isset() method to check whether the values of (oil,sparks, tires) are set in the $_POST[] array. So I have already answered the ‘what is the $_POST[]’ thingy. When you click submit after filling up the form, the data you entered is stored in that $_POST array, that way, you can access them later and do some calculations or magic!

Next time, I will be building on top of what I did today, to add more functionality to our shopping cart! Think about shipping, discounts and more stuff! I hope to see you around and if you have any questions, please let me know and I will be glad to talk to you. Take care!

NOTE: Please Visit my brand new blog at

Simple Developer

Thank you!

Advertisements

6 thoughts on “Building A Simple Shopping Cart Using PHP

  1. In:
    store.html
    Place the inputs inside the labels.
    If you really require them outside, then use it properly.
    The label@for requires an id, not a name. Use an id of the input element it refers to.

    The tag button does not have a @type. Use @type=”submit” (it was already smart of you to use a instead of an , nice ;))


    //declare the variables here
    13 $oilqty = null;
    14 $sparksqty = null;
    15 $tiresqty = null;
    16 $total = null;”

    null?
    no! 0! (an integer)

    BTW, use:
    $oilqty = &$_POST[‘oil’];
    instead of:
    $oilqty = $_POST[‘oil’];

    Just… don’t make copys of variables without need.

    1. Great points thanks. About placing inputs outside the labels, I have not seen that kind of thing before. Perhaps I should give it a reading. Either way, much appreciated!!

      I just noticed that issue about the button! Let me fix them ASAP. I have not used copying in PHP before and from now on, I know what needs to be done! Thanks

      1. “About placing inputs outside the labels, I have not seen that kind of thing before. Perhaps I should give it a reading. Either way, much appreciated!!”
        You just did. But you didn’t do it properly.

        BTW, if you are doing it in HTML5, then do it better to suit the HTML5 itself!

  2. Heya this is kinda of off topic but I was wanting to know if blogs use WYSIWYG editors or if
    you have to manually code with HTML. I’m starting a blog soon but have no coding know-how so I wanted to get advice from someone with experience. Any help would be enormously appreciated!

I know you want to say something, say it!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s