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.
Contents
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 order.style.css — 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 incremented.name — 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
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.