Codeigniter shopping cart v1.1 Part 1

I have updated the Codeigniter shopping cart 1.0 and you will see the outcomes in this blog soon.

Download Page

Updates are:

1. Backend moved to BeP(BackendPro)
2. Added Event calendar in BeP
3. Added Ajax Todo list system in BeP
4. Admin is controlled in Bep members
5. Added Menus module
6. Added Customer module
7. Added Order module
8. Creating a folder when you create a new category
9. jquery dataTables is added to the back-end table
10. jquery accordion is added to the back-end
11. Image/thumbnails upload bug fixed
12. Updated category reassign
13. Changed from Captcha to reCaptcha
14. Added email ordering option
15. And more

I wrote about the Todo list sytem and the event calendar modules in the previous entries. What I am going to do is I will write about ‘Back-end moved to Bep’.
I will cover the general things first and then I will trasfer existing controllers/modules/views to modules. After that I will cover createing new modules, namely menus, customers and order.
Ok, let’s start.

Changes in Bep

As usual we need to create navigation items. The procedure is the same as before when you created Messages and Calendar modules. I summarize what you need to do first.

1. Add module names in systems\apprication\language\english\backendpro_lang.php
2. Add icons in assets\icons
3. Add menu items in system\apprication\views\admin\menu.php
4. Go to the Bep and create Resources

backendpro_lang.php

Add the followings in backendpro_lang.php. We are going to add all the menu items.

$lang['backendpro_categories'] = 'Categories';
$lang['backendpro_customers'] = 'Customers';
$lang['backendpro_menus'] = 'Menus';
$lang['backendpro_orders'] = 'Orders';
$lang['backendpro_pages'] = 'Pages';
$lang['backendpro_products'] = 'Products';
$lang['backendpro_subscribers'] = 'Subscribers';

menu.php

And the following is for menu.php. It has Messages and Calendar menu. so if you are pasteing from the previous download please make it sure overwrite them.

<ul id="menu">
    <li id="menu_bep_home"><?php print anchor('admin',$this->lang->line('backendpro_dashboard'),array('class'=>'icon_house'))?></li>
    <?php if(check('System',NULL,FALSE)):?>
    <li id="menu_bep_system"><span class="icon_computer"><?php print $this->lang->line('backendpro_system')?></span>
        <ul>
            <?php if(check('Members',NULL,FALSE)):?><li><?php print anchor('auth/admin/members',$this->lang->line('backendpro_members'),array('class'=>'icon_group'))?></li><?php endif;?>
            <?php if(check('Access Control',NULL,FALSE)):?><li><?php print anchor('auth/admin/access_control',$this->lang->line('backendpro_access_control'),array('class'=>'icon_shield'))?></li><?php endif;?>
            <?php if(check('Settings',NULL,FALSE)):?><li><?php print anchor('admin/settings',$this->lang->line('backendpro_settings'),array('class'=>'icon_cog'))?></li><?php endif;?>
        </ul>
    </li>
    <?php endif;?>
    <li id="menu_bep_general"><span class="icon_general"><?php print $this->lang->line('backendpro_general')?></span>
        <ul>
            <li><?php print anchor('calendar/admin',$this->lang->line('backendpro_calendar'),array('class'=>'icon_calendar'))?></li>
            <li><?php print anchor('categories/admin',$this->lang->line('backendpro_categories'),array('class'=>'icon_category'))?></li>
            <li><?php print anchor('customers/admin',$this->lang->line('backendpro_customers'),array('class'=>'icon_user_suit'))?></li>
            <li><?php print anchor('menus/admin',$this->lang->line('backendpro_menus'),array('class'=>'icon_folder'))?></li>
            <li><?php print anchor('messages/admin',$this->lang->line('backendpro_messages'),array('class'=>'icon_comment'))?></li>
            <li><?php print anchor('orders/admin',$this->lang->line('backendpro_orders'),array('class'=>'icon_cake'))?></li>
            <li><?php print anchor('pages/admin',$this->lang->line('backendpro_pages'),array('class'=>'icon_page'))?></li>
            <li><?php print anchor('products/admin',$this->lang->line('backendpro_products'),array('class'=>'icon_color_swatch'))?></li>
            <li><?php print anchor('subscribers/admin',$this->lang->line('backendpro_subscribers'),array('class'=>'icon_user_red'))?></li>

        </ul>
    </li>
</ul>

Resources

Now you need to create Resources in the Bep. You need to create, Categories, Customers, Menus, Orders, Pages, Products and Subscribers.

Adding to autoload.php

We need to autoload form helper and form validation library. We can load it in every controller, but we can autoload it. Open system\application\config\autoload.php and add the following. Bep uses validation library which is deprecated, but it’s still in CI.

$autoload['libraries'] = array('form_validation','validation');

$autoload['helper'] = array('security', 'form');

Note:

If you use ‘Find in files’ in Komodo Edit to find ‘load->model(‘form’), you will find 9 results in Bep. You can delete that ones since you are now autoloading it. But for now I just leave them.

Adding jquery plug-ins

We are going to use jquery dataTables and jquery UI accordion in the back-end.

dataTables

Download dataTables, unzip and tranfer all the images in \dataTables-1.6.1\dataTables-1.6\media\images to ci_bep\assets\images folder and save jquery.dataTables.min.js in assets\js folder.

jqaccordion

Download jquery accordion and save jqaccordion.js in assets\js folder and jqaccordion.css in assets\css.

bep_assets.php

Please add this after Messages js in C:\xampp\htdocs\ci_bep\modules\site\config\bep_assets.php. And also add these in $config['asset_group']['ADMIN'] as follows. (Reminder: Don’t forget adding these css and js to your assets\css, assets\js folder.) jqyery UI is already loaded in Bep, so you just need to add in the assets_group.

I will explain TinyMCE a little bit later.

// Back-end dataTables js
$config['asset'][] = array('file'=>'jquery.dataTables.min.js', 'needs'=>'jquery');
$config['asset'][] = array('file'=>'demo_table.css');

// Back-end jqaccordion
$config['asset'][] = array('file'=>'jquery.accordion.js', 'needs'=>'jquery_ui');
$config['asset'][] = array('file'=>'jqaccordion.css');

// CI shopping cart front-end
$config['asset'][] = array('file'=>'customtools.js', 'needs'=>'jquery');
$config['asset'][] = array('file'=>'default.css');

// TINYMCE
$config['asset'][] = array('file'=>'tiny_mce.js');
$config['asset'][] = array('file'=>'tinymce.init.js', 'needs'=>'tiny_mce');

// Change $config['asset_group']['ADMIN'] to this
$config['asset_group']['ADMIN'] = 'bep_admin_layout|bep_admin_style|FlashStatus|forms|buttons|bep_navigation|treeview|bep_icons|bep_select_all|jquery_ui|admin|shoutbox|master|jquery.datepick|jquery.datepick.pack|coda|site|jquery.dataTables.min|jquery.accordion|demo_table|jqaccordion';

site.js

Add the following to the site.js

$(document).ready(function(){

	//configure the date format to match mysql date
	$('#date').datepick({dateFormat: 'yy-mm-dd'});

	$("#accordion").accordion();
		$(".status").click(function () {
      $(this).toggleClass("inactive");
    });

	$("#tablesorter_product").dataTable( {
		"aaSorting": [[ 1, "asc" ]],
		"iDisplayLength": 200,
                "oLanguage": {
			"sLengthMenu": 'Display <select>'+
				'<option value="20">20</option>'+
				'<option value="40">40</option>'+
				'<option value="60">60</option>'+
				'<option value="80">80</option>'+
				'<option value="100">100</option>'+
				'<option value="-1">All</option>'+
				'</select> records'
		}
  } );

  $("#tablesorter").dataTable( {
      "iDisplayLength": 40,
      "oLanguage": {
      "sLengthMenu": 'Display <select>'+
	'<option value="20">20</option>'+
	'<option value="40">40</option>'+
	'<option value="60">60</option>'+
	'<option value="80">80</option>'+
	'<option value="100">100</option>'+
	'<option value="-1">All</option>'+
	'</select> records'
      }
  } );

});

Add the following to demo_table.css

/***
 * For my website
 *
*/

#tablesorter, #tablesorter_product{
	clear: both;
	margin: 30px auto;

}
.sorting, .sorting_asc, .sorting_desc{
	font-size: 0.8em;
}
.sorting_desc{
	background-color: #DFDFDF;
}
.sorting_asc{
	background-color: #EFFFF1;

}

Extending site_controller

We need to extend the Site_controller and make Shop_controller.php. The Site_controller is extended Contoller and you can find as MY_Contoller.php in system\application\libraries\ folder.

In the folder of
C:\xampp\htdocs\ci_backendpro2\system\application\libraries\
create Shop_controller.php and paste the followings.

Please read comments in codes for the details.
–UPDATED 14 Feb 2010–

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
/**
 *
 *
 * @package         Codeingiter shopping cart v1.1
 * @author          Shin Okada
 * @copyright       Copyright (c) 2010
 * @license         http://www.gnu.org/licenses/lgpl.html
 * @link            http://www.okadadesign.no/blog
 *
 */

// ---------------------------------------------------------------------------

/**
 * Shop_Controller
 *
 * Extends the Site_Controller class so I can declare special Shop controllers
 *
 * @package
 * @subpackage     Controllers
 */
class Shop_Controller extends Site_Controller
{
	function Shop_Controller()
	{
		parent::Site_Controller();

		// Set container variable
		$this->_container = $this->config->item('backendpro_template_shop') . "container.php";

		// Set public meta tags
		//$this->bep_site->set_metatag('name','content',TRUE/FALSE);

		// Load the PUBLIC asset group in bep_assets.php
		$this->bep_assets->load_asset_group('SHOP');

		log_message('debug','BackendPro : Shop_Controller class loaded');

		// Loading language helper
		$this->load->helper('language');

		$this->load->module_language('webshop','webshop');
		// $this->lang->load('webshop');

		// From CI shopping cart
		// Still using PHP session here.
		session_start();
		// loading Norwegian language files
		// $this->config->set_item('language', 'norwegian');
		// $this->lang->load('norwegian_general', 'norwegian');
		// Loading all the module models here instead of autoload.php
		$this->load->module_model('categories','MCats');
		$this->load->module_model('menus','MMenus');
		$this->load->module_model('customers','MCustomers');
		$this->load->module_model('orders','MOrders');
		$this->load->module_model('pages','MPages');
		$this->load->module_model('products','MProducts');
		$this->load->module_model('subscribers','MSubscribers');

		// This part is used in all the pages so load it here
		// For customer login statu
		if(isset($_SESSION['customer_first_name'])){
			$this->data['customer_status']=1;
			$this->data['loginstatus']=lang('general_hello').$_SESSION['customer_first_name'].". ".lang('general_logged_in')."<br />
			<a href=\"index.php/".$this->lang->line('webshop_folder')."/logout \">Log out</a>";
		}else{
			$this->data['customer_status']=0;
			$this->data['loginstatus']="You are not logged in. <a href=\"index.php/".$this->lang->line('webshop_folder')."/login \">".lang('general_login')."</a>
			<br /><a href=\"index.php/".$this->lang->line('webshop_folder')."/registration \">".lang('general_register')."</a>";
		}
		// Total price will be displayed
		// handlekurv means shopping cart in Norwegian
		// sorry for this. I will use English in future.
		// It's too late and too much work to replace now.
		if(isset($_SESSION['totalprice'])){
			$this->data['handlekurv'] = $_SESSION['totalprice'];
		}else{
	  		$this->data['handlekurv'] =0;
		}

		// main nav
		// this is ugly, I need to add to setting and pull it here for $parentid
		$tree = array();
	    $parentid = 107;
		$this->MMenus->generateTree($tree,$parentid);
	    $this->data['mainnav'] = $tree;

	    // left category menu
	    // this is ugly too. Same as above.
	    $parentid=1;
		$this->data['navlist'] = $this->MCats->getCatNav($parentid);

		$mostsold= "most sold";
		$mostsold = $this->MProducts ->getFeaturedProducts($mostsold);
		$this->data['mostsold']= $mostsold;

		$newproduct = "new product";
		$newproduct = $this->MProducts ->getFeaturedProducts($newproduct);
		$this->data['newproduct']= $newproduct;
	}
}

/* End of Shop_controller.php */
/* Location: ./system/application/libraries/Shop_controller.php */

Add the following to C:\xampp\htdocs\ci_bep\system\application\libraries\MY_Controller.php at the end. It will not work without include_once.

include_once("Shop_controller.php");

Adding language items

Open C:\xampp\htdocs\ci_bep\system\application\language\english\backendpro_lang.php and add this at the end of general definitions.

/* CI Shoping cart */
$lang['general_login'] = 'Log in';
$lang['general_logout'] = 'Log out';
$lang['general_not_logged_in'] = 'You are not logged in';
$lang['general_cart'] = 'Cart';
$lang['general_shopping_cart'] ='Shopping Cart';
$lang['general_search_results'] ='Search Results';
$lang['general_name'] = "Name";
$lang['general_pass_word'] = "Password";
$lang['general_register'] = "Register";
$lang['genral_login_msg'] = "Or click <span class='login'>%s</span> if you are already registered.";
$lang['genral_logged_in'] = "You are logged in";
$lang['general_hello'] = "Hello ";
$lang['general_web_shop'] = 'Web shop';
$lang['general_check_out'] = 'Go to check out';

Adding to config\backendpro.php

Open
C:\xampp\htdocs\ci_bep\system\application\config\backendpro.php
and add the following for our shop.

$config['backendpro_template_shop'] = $config['backendpro_template_dir'] . "shop/"

Adding TinyMCE

We are going to use TinyMCE in creating and editing pages, products and sending email.
Download TinyMCE and open the tiny_mce folder and take out all the js files/folders in assets\js folder. We are going to use it for editing content.

Create assets\tinymce.init.js files and add the following.

  tinyMCE.init({
	// General options
	mode : "textareas",
	theme : "advanced",
	plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextCategory,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",

	// Theme options
	theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
	theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
	theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
	theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_statusbar_location : "bottom",
	theme_advanced_resizing : true,

	// Example content CSS (should be your site CSS)
	// content_css : "css/example.css",

	// Drop lists for link/image/media/template dialogs
	template_external_list_url : "js/template_list.js",
	external_link_list_url : "js/link_list.js",
	external_image_list_url : "js/image_list.js",
	media_external_list_url : "js/media_list.js",

	// Replace values for the template plugin
	template_replace_values : {
		username : "Some User",
		staffid : "991234"
	}
});

Now TinyMCE is ready for use.

You just need to add the following in a controller constructor or in a method.

$this->bep_assets->load_asset_group('TINYMCE');

To be continued

In the next article we start creating modules.