Shopping Cart using Codeigniter 1.7.2 Cart Library [part-1]

There are some improvements and additional changes in Codeigniter 1.7.2, one of them is shopping cart library (system/libraries/Cart.php). This class provide simple shopping cart functionality such as add to cart, view cart, and update/delete cart. With this library we can count item on cart, sub total, and total price items. To learn how to use it in codeigniter user guide , on library section. Although in user guide is complete enough explanation for some users, in this article i try to implement shopping cart using Codeigniter 1.7.2 Shopping Cart library.

Let’s do some preparation such as create new application from codeigniter source directory, create sample database with one simple table (name it product). In this article i will create some files, two controller (products, and cart), four view files (shopping home, view_cart, header, and footer). I think we don’t have to create model because we just review shopping cart functionality.

First create database containt product table like this:

CREATE TABLE IF NOT EXISTS `product` (
  `product_id` int(10) NOT NULL AUTO_INCREMENT,
  `product_sku` varchar(16) NOT NULL,
  `product_name` varchar(32) NOT NULL,
  `product_description` varchar(200) NOT NULL,
  `product_quantity` double(10,4) NOT NULL,
  `product_price` double(10,2) NOT NULL,
  `product_imgpath` varchar(128) NOT NULL,
  PRIMARY KEY (`product_id`),
  UNIQUE KEY `product_id` (`product_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

Prepare some configuration files in directory [yourapppath]/application/config/, Configure your application path in config.php and database setting in database.php. This shopping cart library using session and database so we must load library involved in autoload.php, for this article you have to load some helper too such as url, html and form helper. Insert some data to your product table for testing later, something like this:

<pre>INSERT INTO `product` (`product_id`, `product_sku`, `product_name`, `product_description`, `product_quantity`, `product_price`, `product_imgpath`) VALUES
(1, 's00001', 'black pantopel', 'sepatu pantopel hitam cibaduyut', 200.0000, 90000.00, 'images/shoes.jpg'),
(2, 'b00001', 'ubuntu hardy t-shirt', 't-shirt buat pencinta ubuntu', 200.0000, 50000.00, 'images/t-shirt.jpg');

First of all let’s create products controller file. If you want to route automatically to this controller you can edit variable $route['default_controller'] in [yourapppath]/application/config/route.php . These some codes for products.php

<?php
class products extends Controller{
	//controller constructor
	function products(){
		parent::Controller();
		$this->load->library('cart');
	}
	//default
	function index(){
		$this->view_products();
	}

	//display some product
	function view_products(){
		$q = $this->db->get('product');
		$data['items'] = $q;
		$data['ptitle']="CoderShop | Shopping Home";

		$this->load->view('shopping_home',$data);
	}
}
?>

Then we create a simple view for this controller, called shopping_home.php

<?=$this->load->view('header.php');?>
<div class="content">
<h3>List Products</h3>
	<ul>
	<?php foreach($items->result_array() as $r): ?>
    	<li>
			<?=form_open('cart/add')?>
            <?=img(base_url().$r['product_imgpath'])?><br />
			<?=form_submit('submit','Buy Now')?><br /> <br />
			<b>Price:</b> Rp <?=$r['product_price']?><br />
            <b>Name:</b> <?=$r['product_name']?><br />
			<b>Description:</b> <?=$r['product_description']?>

            <?=form_hidden('product_id',$r['product_id'])?>
			<?=form_close();?>
        </li>

    <?php endforeach;?>
    </ul>
</div>
<?=$this->load->view('footer.php');?>

Header code that must include in shopping_home view

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?=$ptitle?></title>
<script type="text/javascript" language="javascript" src="<?=base_url()?>script/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
	jQuery(document).ready(function($){

		<?php
			//Insert jQuery from controller
			if(isset($custom_jquery))
			{
				echo $custom_jquery;
			}

		?>
	});
</script>
<style media="screen" type="text/css">
@import url("<?=base_url()?>styles/default.css");
</style>
</head>
<body>
<div id="header">
	<div id="logo">
    	<h1>Coder Shop</h1>
    	<h4>shopping place for coder</h4>
    </div>
    <div id="shoppingbasket">
        <?
		$n=$this->cart->total_items();
		$m=$this->cart->format_number($this->cart->total());
		if($n>=2) $a = $n." items"; else $a = $n." item";
		?>
        <?
		if($n>0){
			anchor("cart","Total Rp ".$m);
			echo "<br />";
			anchor("cart",'View Cart('.$a.')');
       }else{
	   		anchor("cart",'Cart Empty');
		}
		?>
    </div>
    <div class="clearboth"></div>
</div>

<div id="navigation">
&raquo; <?=anchor('products','Products')?> | <?=anchor('cart','Cart')?>
</div>

Footer contain simple html;

<div id="footer">
copyright &copy; 2009 CoderStore
</div>
</body>
</html>

Here default CSS code to get your layout neat

@charset "utf-8";
/* CSS Document */
h1,h2,h3,h4 {
	margin: 0;
	padding: 0;
}
h1{
	color:#00CCFF;
}
h3{
	color:#555;
}
h4{
	color:#999;
}
.content {
	padding:4px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#333333;
}
ul {
	margin:0;
	list-style:none;
}
ul li{
	margin-bottom:20px;
	padding:0;
}
#footer {
	margin-top:5px;
	padding:4px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	border-top:dotted 1px #ccc;
}
img {
	margin-bottom:4px;
	padding:2px;
}
#header{
	padding:8px;
	height:auto;
}
#navigation {
	padding:4px;
	margin-top:10px;
	margin-bottom:10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10;
	border-top:1px dotted #CCC;
	border-bottom:1px dotted #CCC;
	color:#0099CC;
}
#navigation a:link, a:visited{
	color:#0099CC;
	text-decoration:none;
	padding:2px;
}
#navigation a:hover{
	text-decoration:line-through;
}
#logo{
	float:left;
	display:block;
}
.clearboth{
	clear:both;
	margin:0;
	padding:0;
}
table{
	border-top:solid 1px #CAEBF0;
	border-left:solid 1px #CAEBF0;
}
table th{
	border-bottom:solid 1px #CAEBF0;
	border-right:solid 1px #CAEBF0;
	background-color:#F3FCFC;
}
table tr td{
	border-right:solid 1px #CAEBF0;
	border-bottom:solid 1px #CAEBF0;
}

if you have done already create previous listed files,open your products controller in browser, http://[yourapppath]/index.php/products/ you will have preview as seen as this screenshot.

I think this time we have to save our work first, we will continue this tutorial on the next post

Related posts: