In this tutorial we”ll be creating a shopping cart system with PHP and MySQL. The shopping cart system will allow our websites visitors to browse for products, add to cart products, and place orders.

Đang xem: Php shopping cart tutorial using sessions

We”ll be using the PDO interface to access our MySQL database with PHP as it will make it much easier for us to interact with our database and manipulate our tables.

The shopping cart system we”ll be creating will contain 4 products. These products are basically just gadgets/accessories that we”ll use as examples for this tutorial. You can add your own products later in the tutorial.

The Advanced package includes additional features and a download link to the source code.


Getting StartedCreating the Index FileCreating the Home PageCreating the Products PageCreating the Product PageCreating the Shopping Cart PageCreating the Place Order Page

1. Getting Started

There are a few steps we need to take before we create our shopping cart system. We need to set-up our web-server environment (if you haven”t already) and make sure we have the required extensions enabled.

1.1. Demos

Below you will find links to the shopping cart demos. The tutorial demo is what we”ll be creating. The Advanced demo is the package you can purchase at the end of the post. This includes more features and a download link to the source code.

1.2. Requirements

Make sure the PDO extension is enabled (it should be included and enabled by default).

1.3. What You Will Learn in this Tutorial

Template Design — Design a home page, products page, product page, shopping cart page, and place order page with HTML5 and CSS3, and learn how to implement the PHP templating system with HTML.GET and POST Requests — Create HTML forms and data request handling with PHP.Prepared SQL Queries — How to prepare SQL queries to prevent SQL injection.Basic Validation — Validating form data that is sent to the server.Session Management — Initialize sessions and store shopping cart products.

Xem thêm: Cách Sửa Lỗi Wps Writer (Tắt Autocorrect) &Mdash; Phần Mềm Wps Office

1.4. File Structure & Setup

We can now start our web server and create the files and directories we”re going to use for our shopping cart system.

Open XAMPP Control PanelNext to the Apache module, click StartNext to the MySQL module, click StartNavigate to XAMPPs installation directory (C:xampp)Open the htdocs directoryCreate the following directories and files:

File Structure

— shoppingcart|– functions.php|– index.php|– home.php|– products.php|– product.php|– cart.php|– placeorder.php|– style.css– imgs|– featured-image.jpg|– camera.jpg|– headphones.jpg|– wallet.jpg|– watch.jpg

Each file/directory will contain the following:

functions.php — This file will contain all the functions we need for our shopping cart system (template header, template footer, and database connection functions).index.php — This file will contain the master template (header, footer, etc) and basic routing so we can include the pages below.home.php — This file will be the home page that will contain a featured image and 4 recently added products.products.php — This file will be for displaying all products with basic pagination.product.php — This file will display a product (depends on the GET request) and will contain a form that will allow the customer to change the quantity and add to cart the product.cart.php — The shopping cart page that will populate all the products that have been added to cart, along with the quantities, total prices, and subtotal price.placeorder.php — A basic message that will be displayed to the user when they place an — The stylesheet (CSS3) we”ll use for our shopping cart website.imgs — Directory that will contain all the images for our shopping cart system (featured images, product images, etc). You can download the example images by clicking the file name in the file structure container.

2. Creating the Database and setting-up Tables

For this part, you will need to access your MySQL database, either using phpMyAdmin or your preferred MySQL database management application.

If you”re using phpMyAdmin, follow these instructions:

Navigate to http://localhost/phpmyadmin/Click the Databases tab at the topUnder Create database, type in shoppingcart in the text boxSelect utf8_general_ci as the collation (UTF-8 is the default encoding in HTML5)Click Create

Feel free to use your own database name, or use shoppingcart as the database name.

We can now proceed to create the products table. We”ll use this table to store all our products, along with the product name, description, image, price, RRP price, quantity, and the date added columns. We shall retrieve these products later on in the tutorial with PHP.

Click the database on the left side panel (shoppingcart) and execute the following SQL statement:

CREATE TABLE IF NOT EXISTS `products` (`id` int(11) NOT NULL AUTO_INCREMENT,`name` varchar(200) NOT NULL,`desc` text NOT NULL,`price` decimal(7,2) NOT NULL,`rrp` decimal(7,2) NOT NULL DEFAULT '0.00',`quantity` int(11) NOT NULL,`img` text NOT NULL,`date_added` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;INSERT INTO `products` (`id`, `name`, `desc`, `price`, `rrp`, `quantity`, `img`, `date_added`) VALUES(1, 'Smart Watch', 'Unique watch made with stainless steel, ideal for those that prefer interative watches.

On phpMyAdmin this should look like:


The above SQL statement code will create the products table with the following columns:

id — Unique ID for the product, this will be auto — The name of the product.desc — The description of the product.price — The price of the product.rrp — The retail pricing, if you want a product on sale you put the value higher than the price.date_added — The date the product was added, we”ll use this for sorting products.

The SQL statement will also insert 4 example products that we can use for testing purposes. You can change/remove them later on in the tutorial when we”ve implemented the code.

3. Designing the Shopping Cart System with CSS

Instead of using a library such as Bootstrap, I”ve decided to create a clean, crisp, and modern design with pure CSS3.

The Advanced package includes the SCSS file and the responsive design CSS code. You can easily change the color scheme, fonts, content size, etc, with SCSS.

Edit the style.css file and add the following code:

* {box-sizing: border-box;font-family: -apple-system, BlinkMacSystemFont, “segoe ui”, roboto, oxygen, ubuntu, cantarell, “fira sans”, “droid sans”, “helvetica neue”, Arial, sans-serif;font-size: 16px;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}html {height: 100%;}body {position: relative;min-height: 100%;color: #555555;background-color: #FFFFFF;margin: 0;padding-bottom: 100px; /* Same height as footer */}h1, h2, h3, h4, h5 {color: #394352;}.content-wrapper {width: 1050px;margin: 0 auto;}header {border-bottom: 1px solid #EEEEEE;}header .content-wrapper {display: flex;}header h1 {display: flex;flex-grow: 1;flex-basis: 0;font-size: 20px;margin: 0;padding: 24px 0;}header nav {display: flex;flex-grow: 1;flex-basis: 0;justify-content: center;align-items: center;}header nav a {text-decoration: none;color: #555555;padding: 10px 10px;margin: 0 10px;}header nav a:hover {border-bottom: 1px solid #aaa;}header .link-icons {display: flex;flex-grow: 1;flex-basis: 0;justify-content: flex-end;align-items: center;position: relative;}header .link-icons a {text-decoration: none;color: #394352;padding: 0 10px;}header .link-icons a:hover {color: #4e5c70;}header .link-icons a i {font-size: 18px;}header .link-icons a span {display: inline-block;text-align: center;background-color: #63748e;border-radius: 50%;color: #FFFFFF;font-size: 12px;line-height: 16px;width: 16px;height: 16px;font-weight: bold;position: absolute;top: 22px;right: 0;}main .featured {display: flex;flex-direction: column;background-image: url(imgs/featured-image.jpg);background-repeat: no-repeat;background-size: cover;height: 500px;align-items: center;justify-content: center;text-align: center;}main .featured h2 {display: inline-block;margin: 0;width: 1050px;font-family: Rockwell, Courier Bold, Courier, Georgia, Times, Times New Roman, serif;font-size: 68px;color: #FFFFFF;padding-bottom: 10px;}main .featured p {display: inline-block;margin: 0;width: 1050px;font-size: 24px;color: #FFFFFF;}main .recentlyadded h2 {display: block;font-weight: normal;margin: 0;padding: 40px 0;font-size: 24px;text-align: center;width: 100%;border-bottom: 1px solid #EEEEEE;}main .recentlyadded .products, main .products .products-wrapper {display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;padding: 40px 0 0 0;}main .recentlyadded .products .product, main .products .products-wrapper .product {display: block;overflow: hidden;text-decoration: none;width: 25%;padding-bottom: 60px;}main .recentlyadded .products .product img, main .products .products-wrapper .product img {transform: scale(1);transition: transform 1s;}main .recentlyadded .products .product .name, main .products .products-wrapper .product .name {display: block;color: #555555;padding: 20px 0 2px 0;}main .recentlyadded .products .product .price, main .products .products-wrapper .product .price {display: block;color: #999999;}main .recentlyadded .products .product .rrp, main .products .products-wrapper .product .rrp {color: #BBBBBB;text-decoration: line-through;}main .recentlyadded .products .product:hover img, main .products .products-wrapper .product:hover img {transform: scale(1.05);transition: transform 1s;}main .recentlyadded .products .product:hover .name, main .products .products-wrapper .product:hover .name {text-decoration: underline;}main > .product {display: flex;padding: 40px 0;}main > .product > div {padding-left: 15px;}main > .product h1 {font-size: 34px;font-weight: normal;margin: 0;padding: 20px 0 10px 0;}main > .product .price {display: block;font-size: 22px;color: #999999;}main > .product .rrp {color: #BBBBBB;text-decoration: line-through;font-size: 22px;padding-left: 5px;}main > .product form {display: flex;flex-flow: column;margin: 40px 0;}main > .product form input {width: 400px;padding: 10px;margin-bottom: 15px;border: 1px solid #ccc;color: #555555;border-radius: 5px;}main > .product form input {background: #4e5c70;border: 0;color: #FFFFFF;width: 400px;padding: 12px 0;text-transform: uppercase;font-size: 14px;font-weight: bold;border-radius: 5px;cursor: pointer;}main > .product form input:hover {background: #434f61;}main > .products h1 {display: block;font-weight: normal;margin: 0;padding: 40px 0;font-size: 24px;text-align: center;width: 100%;}main > .products .buttons {text-align: right;padding-bottom: 40px;}main > .products .buttons a {display: inline-block;text-decoration: none;margin-left: 5px;padding: 12px 20px;border: 0;background: #4e5c70;color: #FFFFFF;font-size: 14px;font-weight: bold;border-radius: 5px;}main > .products .buttons a:hover {background: #434f61;}main .cart h1 {display: block;font-weight: normal;margin: 0;padding: 40px 0;font-size: 24px;text-align: center;width: 100%;}main .cart table {width: 100%;}main .cart table thead td {padding: 30px 0;border-bottom: 1px solid #EEEEEE;}main .cart table thead td:last-child {text-align: right;}main .cart table tbody td {padding: 20px 0;border-bottom: 1px solid #EEEEEE;}main .cart table tbody td:last-child {text-align: right;}main .cart table .img {width: 80px;}main .cart table .remove {color: #777777;font-size: 12px;padding-top: 3px;}main .cart table .remove:hover {text-decoration: underline;}main .cart table .price {color: #999999;}main .cart table a {text-decoration: none;color: #555555;}main .cart table input {width: 68px;padding: 10px;border: 1px solid #ccc;color: #555555;border-radius: 5px;}main .cart .subtotal {text-align: right;padding: 40px 0;}main .cart .subtotal .text {padding-right: 40px;font-size: 18px;}main .cart .subtotal .price {font-size: 18px;color: #999999;}main .cart .buttons {text-align: right;padding-bottom: 40px;}main .cart .buttons input {margin-left: 5px;padding: 12px 20px;border: 0;background: #4e5c70;color: #FFFFFF;font-size: 14px;font-weight: bold;cursor: pointer;border-radius: 5px;}main .cart .buttons input:hover {background: #434f61;}main .placeorder h1 {display: block;font-weight: normal;margin: 0;padding: 40px 0;font-size: 24px;text-align: center;width: 100%;}main .placeorder p {text-align: center;}footer {position: absolute;bottom: 0;border-top: 1px solid #EEEEEE;padding: 20px 0;width: 100%;}This will be the stylesheet we”ll use for the shopping cart system.

Xem thêm: Mercedes Maybach Là Xe Gì – Maybach Và Mercedes Và Amg Là Anh Em Gần Nhau

4. Creating the Functions File

The functions.php file will contain all the functions we”re going to use in our shopping cart system which includes the template header, template footer, and the database connection functions.

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *