How to Build a Shopping Cart Using CodeIgniter and jQuery _ Nettuts+

How to Build a Shopping Cart using CodeIgniter and jQuery | Nettuts+

1 de 21

http://net.tutsplus.com/tutorials/php/how-to-build-a-shopping-cart-using...

The Mobile Bundle Get $500+ Worth of Premium Files for Just $20 Advertise Here

How to Build a Shopping Cart using CodeIgniter and jQuery Philo Hermans on Dec 14th 2009 with 203 Comments and 0 Reactions

Tutorial Details Topic:CodeIgniter, jQuery Difficulty: Intermediate Estimated Completion Time: 30 minutes

Final Product What You'll Be Creating

CodeIgniter is an open source PHP web application framework with a lot of features. Recently, thanks to the latest update, a new feature was added to this framework, called the Cart Class. In this tutorial, we’re going to take advantage of this new class, and write a shopping cart system, with a touch of jQuery added in.

What is CodeIgniter? 24-01-2013 22:33

How to Build a Shopping Cart using CodeIgniter and jQuery | Nettuts+

2 de 21

http://net.tutsplus.com/tutorials/php/how-to-build-a-shopping-cart-using...

CodeIgniter is a powerful PHP framework with a very small footprint, built for PHP coders who need a simple and elegant toolkit to create full-featured web applications. If you’re a developer who lives in the real world of shared hosting accounts and clients with deadlines, and if you’re tired of ponderously large and thoroughly undocumented frameworks, CodeIgniter is for you!

In this tutorial, I am using the latest stable version of CodeIgniter, V1.7.2. This tutorial requires you to have some modest knowledge of CodeIgniter and the MVC pattern. The following tutorials will get you started right away! Everything You Need to Get Started by Ben Haines CodeIgniter From Scratch: Day 1 by Jeffrey Way

Resources Before we can start, we need to download CodeIgniter and jQuery. Click here to download CodeIgniter, and here to download jQuery. Alternatively, you can reference jQuery via Google’s CDN: http://ajax.googleapis.com/ajax/libs/jquery /1.3.2/jquery.min.js” type=”text/javascript

Folder Structure Before we start coding, I would like to create a solid structure for our application. I prefer to move the application folder out of the system folder; this is not required, but it makes the update process easier in the future. The final folder we need to create before beginning is the assets folder; this is where I store my images, Javascript, CSS and other assets. Let’s take a look at the final folder structure:

24-01-2013 22:33

How to Build a Shopping Cart using CodeIgniter and jQuery | Nettuts+

3 de 21

http://net.tutsplus.com/tutorials/php/how-to-build-a-shopping-cart-using...

Inside the folder assets/js, we place our jquery-1.3.2.min.js file, and an empty file called core.js. In this file, we will write our JavaScript. And one more thing remains: we need to create our stylesheet. So create a new file in assets/css called core.css.

Database We are going to retrieve our products from the database; so let’s go to PHPMyAdmin and create a table called CI_Cart.

And for those of you who want to copy and paste, the SQL Code… view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7.

CREATE TABLE `products` ( `id` int(128) NOT NULL auto_increment, `name` varchar(128) NOT NULL, `price` varchar(32) NOT NULL, `image` varchar(128) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Now, let’s insert some data into this table:

24-01-2013 22:33

How to Build a Shopping Cart using CodeIgniter and jQuery | Nettuts+

4 de 21

http://net.tutsplus.com/tutorials/php/how-to-build-a-shopping-cart-using...

Again – for those who would prefer to copy and paste: view plaincopy to clipboardprint? 1. INSERT INTO `products` VALUES(1, 'MacBook Pro', '1199', 'macbookpro.jpg'); 2. INSERT INTO `products` VALUES(2, 'MacBook Air', '1499', 'macbookair.jpg'); 3. INSERT INTO `products` VALUES(3, 'MacBook', '999', 'macbook.jpg'); There’s everything that needs to be done for our database in this tutorial.

Step 1: Application Config Before we can start using CodeIgniter, we have to setup our configuration. Open application/config/config.php, and change the following: view plaincopy to clipboardprint? 1. $config['base_url'] = "http://example.com"; Replace http://example.com with the url to your installation. Next, look for Global XSS Filtering located near the bottom of the config.php file. view plaincopy to clipboardprint? 1. $config['global_xss_filtering'] = FALSE; Let’s change FALSE to TRUE, in order to make this filter active when GET, POST or COOKIE data is encountered. Next, open application/config/database.php and enter your database information. view plaincopy to clipboardprint? 1. 2. 3. 4.

$db['default']['hostname'] = "localhost"; $db['default']['username'] = "root"; $db['default']['password'] = "root"; $db['default']['database'] = "CI_Cart";

24-01-2013 22:33

How to Build a Shopping Cart using CodeIgniter and jQuery | Nettuts+

5 de 21

http://net.tutsplus.com/tutorials/php/how-to-build-a-shopping-cart-using...

5. $db['default']['dbdriver'] = "mysql"; Next, open application/config/routes.php and change the default controller to “cart”: view plaincopy to clipboardprint? 1. $route['default_controller'] = "cart"; Now when someone visits the url to your application, the cart class will be loaded automatically. We have one more file to edit, so open application/config/autoload.php and autoload the following components: view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21.

/* | ------------------------------------------------------------------| Auto-load Libraries | ------------------------------------------------------------------| These are the classes located in the system/libraries folder | or in your system/application/libraries folder. | | Prototype: | | $autoload['libraries'] = array('database', 'session', 'xmlrpc'); */ $autoload['libraries'] = array('cart', 'database'); /* | ------------------------------------------------------------------| Auto-load Helper Files | ------------------------------------------------------------------| Prototype: | | $autoload['helper'] = array('url', 'file'); */ $autoload['helper'] = array('url', 'form');

Libraries database – Allows your application to connect with a database and makes the database class available. cart – Allows you to access the shopping cart class, more information. Helpers url – The url library allows you to access different methods to create and retrieve links, more information form – This library helps us with creating form. For more information…

Step 2: Cart Controller We changed our default controller to “cart,” but this controller does not yet exist. So, create a new file called application/controllers/cart.php and add the default controller structure. view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9.