This is the part 1 of 2 in Build a shopping cart with CakePHP and jQuery.

Build a shopping cart with CakePHP and jQuery (part 1)

Build a shopping cart with CakePHP and jQuery (part 2)

There are plenty of open source shopping cart in the market right now. However we think it is important for a developer to understand how a shopping cart works.



In this series we are going to build a simple shopping cart using CakePHP and jQuery. Please note, we focus on building the common functions of a shopping cart using CakePHP, such as adding product to shopping cart, removing product to shopping cart as well dynamically update shopping cart using ajax. Its purpose is to demonstrate the basics of building a shopping cart. Hence it is not a production ready piece; there are lots of features you need to add before it goes live for production.



This series is for beginners who are learning CakePHP. Let us get started.

Download link of entire source code is provided in part 2 of this series.

Table Of Content

1. Preparation

Download Bootstrap framework from this URL. We are using Bootstrap 3.0.2 in this series for the front-end design.

Extract downloaded zip file and remove original CSS and JavaScript files, we only need to keep their minified version.

Extract downloaded zip file and remove original CSS and JavaScript files, we only need to keep their minified version. Download CakePHP from this URL. We are using CakePHP 2.4.3 for this tutorial.

Create a database. We have created a database called "cakephp_shopping_cart". You can name the database based on your preference.

Setup CakePHP properly, make sure it can connect to database. If you are not familiar with setting up, read this page first. It will go through steps of setting up a basic CakePHP application.

Download "s4.jpg", "comment.jpg" and "note3.jpg" to CakePHP's directory "app/webroot/img/". These three images are used for the products' photos.

2. Database design

Design a very simple database table "products" as below. It stores products' information. The idea here is to demonstrate how CakePHP Model works with database table.

Import the database table via following codes:

Insert some sample products data as well. As you can see, we are not going to build a backend system to manage products in this series. Some sample products data are needed.

3. Install Bootstrap

In this step, we will place Bootstrap resources accordingly to CakePHP application.

Copy "fonts" folder from downloaded Bootstrap files to CakePHP's directory "app/webroot". Copy "bootstrap.min.css" file from downloaded Bootstrap files to CakePHP's directory "app/webroot/css". Copy "bootstrap.min.js" file from downloaded Bootstrap files to CakePHP's directory "app/webroot/js".

Now the "app/webroot" directory should look similar as below:

The highlighted parts are what we have added.

4. Edit default layout file

Now if you navigate to the installed CakePHP application, you should view a simple page as below, which indicates CakePHP has been installed properly.

In this step, we need to edit the "default.ctp" layout file. Specifically we need to load the Bootstrap resources (JavaScript and CSS files). And construct a simple layout for our shopping cart.

After editting, "app/View/Layouts/default.ctp" should look like below:

You have probably noticed, this is a very simple layout file. It has a top navigation bar with a content area. Pay attention to the right corner shopping cart icon. We have assigned an element ID "cart-counter" to it. We will use this ID to identify and update its value later in the application.

Now the application's default page should look alike below:

5. The end

In part 2 of this series. We are going to implement the core part of shopping cart. Displaying products from database, adding product to cart as well as updating shopping cart. Stay tuned!

Hopefully this simple tutorial helped you with your development.

If you like our post, please follow us on Twitter and help spread the word. We need your support to continue.

If you have questions or find our mistakes in above tutorial, do leave a comment below to let us know.

You might also want to check out course Up and Running with CakePHP from lynda.com.