Advanced Shopping Cart Tutorial with Php & MySqli Database

Hey everyone, Welcome to Advanced Shopping Cart Tutorial of Php and Mysqli Database. In this tutorial, we gonna learn very interesting things that haven’t learned. So we will start with the design of this shopping cart and then move on to create add to cart functionality. Now there are lots of things you need to know before you take this tutorial. Make sure you have the basic understanding of Php and MySqli database. Along with that, you should have a basic understanding of HTML and CSS.

So what kind of shopping cart tutorial are we gonna learn today?

Shopping Cart

Shopping Cart

we are going to make this shopping cart as shown above. So let’s get started and learn how to make this amazing tutorial.

Let’s get Started…!

Now the first thing you need is an IDE. In this tutorial, we going to learn use PHP storm IDE if you want you can use vs code or sublime text as well. Now the first thing we need is a web server. So we will start the XAMPP Web server to execute Php file in the browser.

So one’s we start the XAMPP web server don’t forget to start MySQL server as well. Then create a new Project and name it shopping. In this project, we going to create a new directory and name it Php. we will store class and component files in this folder so leave this folder as it is.

Create a new file index.php in the root directory. You are free to choose any name for this file. In this file, we will create a design and create add to cart functionality.

In this file, we going to create shopping cart design. Then start the session and create an add to cart functionality.


In this file, we will create add to cart functionality with app design. Don’t worry we added a comment on each statement to understand why we would use it.

Now, ones the app design is implemented with HTML we gonna style it. We used bootstrap to design and glorify the template but custom style also needed. So we will add some custom style using the style.css file. Create a new file style.css in the root directory. We already link this file to index.php using link tag( you can check that out in the head section of the index.php file).


This file is not much hard to understand. So we will create a new file to create a MySql Database and table.

If you want you can create a database and table using phpmyadmin user interface but I want to show you how to achieve it using PHP script. I wanted to show you how to create a PHP module that can access and use for any PHP application.

To create a Php module we going to use PHP class. Now create a new file in Php folder and name it CreateDb.php. Using this class we can call this class any time anywhere in the PHP program. So now let’s see how to create a Php module.


In this file, we had created class properties and class method. If you have a different username and password of the MySql database don’t forget to change that by specifying an argument to the constructor.

The best part of this class is you just need to call the constructor of this class. All Done! Ones you create a constructor a new database has been created with a defualt name. In this module, we have getData() method which we are using to get data from the table. 

I want to teach you how to make Php script to make the application much simpler that is why in this advance shopping cart tutorial we had created this PHP module.

Note : Don’t forget to insert values in the database otherwise you not going to get anything in the shopping cart.

Ones we have database and table we need to insert product information in the table. So using the following script we could do that. Open PHPMyAdmin and use this SQL query to store product information in the table.


Now the time is to create a new file in the PHP folder and name it component.php. In this file, we going to add two functions that can help us to create UI. But why we need to make functions to make UI? Now actually, Using function you can maintain your code separately and reuse the same code multiple times.

So let’s see what going to have in this file.


As you can see we have two functions in this file. Each function represents a different UI component. To specify the various text to the User interface. We going to use functions parameters to specify the various text using database values.

Now On top of the advanced cart project, you can see we have a header. I want to use that header more than ones so I put that in the separate file.

So Let’s create a new file in the PHP folder and name it header.php. 


In this file, we need to add just HTML tags that represent header because we will use this header in the body section of index.php and cart.php file.

Now the time is to create the cart.php file. Create a new file in the root directory and name it cart.php.

We going to use this file to list out cart items that can be stored in the session variable. On the top right corner of the header, you can see we will show how many cart items are there in the cart. So when you click on it we will redirect the user to the cart.php file. In this file, we going to display cart items details with there prices and total payable amount.

So in this file, we going to show all the product details store in the shopping cart.


lt;?php echo $total; ?></h6>
<h6 class=”text-success”>FREE</h6>

echo $total;


<script src=”” integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script>
<script src=”” integrity=”sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1″ crossorigin=”anonymous”></script>
<script src=”” integrity=”sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM” crossorigin=”anonymous”></script>

That’s it. All Done!

Now just execute your application using localhost server location. Just call index.php file to execute this application.

If you want to download this project just click on this link. Follow us on Instagram and youtube for more information.

Thank you…!