Superdit.com » Codeigniter

Simple Ajax Pagination With JQuery and Codeigniter

aditia rahman — Tue, 22 Nov 2011 01:41:31 +0000

Codeigniter pagination class is really useful for me, it help to cut the repetitive task when we are creating pagination with large data, today I want to share a little of my thought, using codeigniter pagination class with ajax jquery. Here I show with a simple codeigniter code. This post only show the code example, cause i don’t think it necessary to provide a downloadable code.

Controller

Here are the controller, to make it easier the data in this example using a static array variable, so it very easy for us to get the data by the array index, and we need to load the url helper and of course the pagination library.

load->helper('url');
    $this->load->library('pagination');

    $config['base_url']   = site_url('user/index');
    $config['total_rows'] = count($data_paging);
    $config['per_page']   = 5;

    $data['user'] = array();

    for ($i=$start; $i<$start+$config['per_page']; $i++) {
      if (isset($data_paging[$i])) {
        $data['user']['name'][] = $data_paging[$i];
      }
    }

    $this->pagination->initialize($config);
    $data['pagination'] = $this->pagination->create_links();

    if ($this->input->post('ajax')) {
      $this->load->view('user/ajax_index', $data);
    } else {
      $this->load->view('user/index', $data);
    }
  }
}

?>

View

The jquery code I added on the top of the page, and these are where the idea lies, put the pagination content on some div element with unique id, and with jquery you can applied the click function on each pagination link. The content that will be updated is div#content you can add a loading message by your self, the ajax content will update not only the data but the pagination too.




  CodeIgniter Ajax Jquery Pagination

Ajax View

Codeigniter Layout Library For Autoload Frequently Used Views

aditia rahman — Mon, 02 May 2011 02:33:54 +0000

I came up with idea how to automatically load most used layout in Codeigniter, basically I came from CakePHP that automated all default layout, in this case we can call it views part of MVC, when creating codeingniter application usually I follow the documentation when load some views from controller, something like this code

$data['page_title'] = 'Your title';
$this->load->view('header');
$this->load->view('menu');
$this->load->view('content', $data);
$this->load->view('footer');

Or the worse before this sometimes I include the header and footer directly on the view file, well these method really wasting time, an make the code on the views not really well organized.

This post is my little idea to automatically load most used layout part in Codeigniter using our custom library, Lets get through the code, first create a library file in application/libraries/ for example My_Layout.php, and these all the code for the library

header)
        {
            $this->load->view($this->header, $data);
            $data = '';
        }

        // load content, can be more than one views
        if (is_array($views))
        {
            foreach ($views as $view)
            {
                $this->load->view($view, $data);
                $data = '';
            }
        }
        else
        {
            $this->load->view($views, $data);
        }

        // load footer
        if ($this->footer)
        {
            $this->load->view($this->footer);
        }
    }
}

Basically this library just manipulating the default view function, I set $header and $footer attributes as values that most common used name, but you can change it on the fly, the content function load three main view, first the header, we can set the header to FALSE if do not wan to load it, and if the header load first the dynamic data that came from controller, loaded too, in case we need a dynamic data on the header. Second, the content, this section can be consist more than one views, and the last is footer, similar to header it can be loaded or not.

Sample Usage

This is the sample usage in controller, using single view.

load->library('MY_Layout');
    }

    public function test()
    {
        $data['title'] = 'dynamic_string';

        $this->my_layout->content('user/test', $data);
    }
}

Using More Than One Views

To use two or more layout you can assign the views as array

$data['title'] = 'dynamic_string';
$views = array(
    'menu' => 'menu',
    'content' => 'user/test'
);

$this->my_layout->content($views, $data);

Header & Footer

You can set your own header and footer by directly set the its properties, to your header value, or maybe just set to FALSE to turn the header or footer off.

$this->my_layout->header = 'user/custom_user_header';
// or turn off header
$this->my_layout->header = FALSE;

That’s all hope that can give you some idea to start with, or maybe you can give some more features to this library to make it better, and easy to use.

[Opinion] Why PHP Developers Choose CodeIgniter

aditia rahman — Mon, 28 Mar 2011 04:09:44 +0000

Codeigniter is one of the most popular php framework out there, that have been used by many php developers around the world. This post is just my own opinion from my technical experience while using codeigniter. This graphic below is taken from google trends to compare codeigniter search popularity, than any other popular php framework.

The first php framework I use is cakephp, it has a lot more features than codeigniter, very detail documentation too, for the first time it will take some time to understanding, exploring the features and find some other reference online.

Below I mention some my opinion why people choose codeigniter, some may show it lack of features, but behind the lack of features, codeigniter can be use to get an easy understanding of php framework, and the most important thing is to get the job done as soon as possible. please note that this reason maybe for a who are new with php framework

1) Do Not Have Command Line

Most of php framework come a command line feature, I haven’t fell the benefit command line in the real project, but this article will help you to get an idea why command line is useful, my point is not much web application need to have command line.

2) Do Not Have ORM

ORM is very useful when dealing so many database tables, but in simple web application this feature do not need to use, when I first learn php framework, I don’t really know about ORM, and when I read the ORM section I feel like that it need to be in every web application. The good thing I learn about what ORM is, the bad thing is if we are in hurry, it will cost more time.

3) Great Documentation

Codeigniter documentation sure really written well, even for developer who are not familiar to MVC pattern codeigniter documentation is one of good place to start, it is not really perfect but you can get the most out of the features here.

4) No Plugin

Since version 2 codeigniter remove plugins, from it feature, because he ambiguous with “Library” and “Helper”. It good to not to make a term confusion.

5) Performance

Codeigniter not really the fastest but one of the fastest, also I never test it by myself, cause I think it doesn’t really necessary, this two benchmark maybe can be as your benchmark reference (benchmark 1, benchmark 2), but don’t rely on these to much cause “Hello World” application benchmark cannot measure overall performance when the web goes live.

The conclusion is I’m not saying codeigniter is the best php framework, but it really good for everyone to getting started with php framework. One point, It will save more time when learning all the framework scope, but if you are a experience php developer and have more time to learn why not trying some more advanced framework like Symfony or Zend Framework.

Extjs: Simple User Managament Using Codeigniter

aditia rahman — Thu, 09 Dec 2010 08:07:28 +0000

Hello again this is another post of ExtJS, this post is to showing my little idea how to manage user permission in ExtJS component, In this post I not showing the full source code, just a little part of the code to get the idea how it works, however the complete source code still available on the download link at the end of this post.

This example is a simple user management that user can manipulate other user data and users groups, user need to logged in to the system to do some action, and the feature are:

- Add, Update, Delete Users
- Add, Update, Delete Groups
- Administrator cannot be deleted or updated

Which mean it will take different action button in the application screen, depend on the users groups, what is not handled in this example is user restriction, if a group have granted to modify certain user, it can modify whole user although it is the administrator.

The image is the file structure that I have created on this example, there will be a form and two grid panel in this application, a usual login form with label and textfield, a grid contain user data with the toolbar menu and a grid contain group data.

In the database we need to make a relation between user and groups and here the sql code that I created, for both groups and users table

-- Table structure for table `groups`

CREATE TABLE IF NOT EXISTS `groups` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `user_add` int(1) NOT NULL,
  `user_edit` int(1) NOT NULL,
  `user_delete` int(1) NOT NULL,
  `group_add` int(1) NOT NULL,
  `group_edit` int(1) NOT NULL,
  `group_delete` int(1) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;

-- Table structure for table `users`

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `group_id` int(11) NOT NULL,
  `username` varchar(50) NOT NULL,
  `password` varchar(100) NOT NULL,
  `real_name` varchar(150) NOT NULL,
  `email` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

The groups table contains id, group name and all the action that user can do to the application, from the user_add field until group_delete column the value only contains 1 or 0, which mean 1 for user can do this action and zero otherwise, The idea to managing user interface is by disabling the button on the toolbar based on the user group permissions and this are generated from groups table, so we need to give a unique Id for each button.

As well in the controller there are two controller that we need to create, user controller in application/controllers/user.php and group controller in application/controllers/group.php. Inside the user controller create the function for login and fetching users session inside user controller

public function ext_login()
{
    $cond = array(
        'username' => $_POST['textusername'],
        'password' => $_POST['textpassword']
    );
    $query = $this->db->get_where('users', $cond);
    if ($query->num_rows() != 0)
    {
        $row = $query->row();

        // get group detail
        $g_cond = array(
            'id' => $row->group_id
        );
        $g_query = $this->db->get_where('groups', $g_cond);
        $g_row = $g_query->row();

        // pass the the info to session
        $this->session->set_userdata('u_id', $row->id);
        $this->session->set_userdata('u_name', $_POST['textusername']);
        $this->session->set_userdata('g_id', $g_row->id);
        $this->session->set_userdata('g_u_add', $g_row->user_add);
        $this->session->set_userdata('g_u_edit', $g_row->user_edit);
        $this->session->set_userdata('g_u_delete', $g_row->user_delete);
        $this->session->set_userdata('g_g_add', $g_row->group_add);
        $this->session->set_userdata('g_g_edit', $g_row->group_edit);
        $this->session->set_userdata('g_g_delete', $g_row->group_delete);

        echo "{success:true}";
    }
    else
    {
        echo "{success:false, error:'User not found!'}";
    }
}

public function ext_get_session()
{
    $output = "{success:true, sessions: {";
    $output .= "u_id: '".$this->session->userdata('u_id')."',";
    $output .= "u_name: '".$this->session->userdata('u_name')."',";
    $output .= "g_id: '".$this->session->userdata('g_id')."',";
    $output .= "g_u_add: '".$this->session->userdata('g_u_add')."',";
    $output .= "g_u_edit: '".$this->session->userdata('g_u_edit')."',";
    $output .= "g_u_delete: '".$this->session->userdata('g_u_delete')."',";
    $output .= "g_g_add: '".$this->session->userdata('g_g_add')."',";
    $output .= "g_g_edit: '".$this->session->userdata('g_g_edit')."',";
    $output .= "g_g_delete: '".$this->session->userdata('g_g_delete')."'";
    $output .= "}}";
    echo $output;
}

The ext_get_sessions function above is to get session and pass it to the browser, and in the login function the session value will be defined when user logged in to the system, ext_get_sessions function will be used in the permissions.js, I’m sure you can add the logout function contain the code to unset all the sessions value and here the permissions function look like inside the permissions.js

 function setPermissions() {
    Ext.Ajax.request({
        url: BASE_URL + 'user/ext_get_session',
        method: 'POST',
        success: function(o) {
            var obj = Ext.util.JSON.decode(o.responseText);
            // set enable/disable grid panel
            if (obj.sessions.u_id != '') {
                Ext.getCmp('fLogin').setDisabled(true);
                Ext.getCmp('gUsers').setDisabled(false);
                Ext.getCmp('gGroups').setDisabled(false);
                Ext.getCmp('userLabel').setText('Welcome "'+obj.sessions.u_name+'"');
            } else {
                Ext.getCmp('fLogin').setDisabled(false);
                Ext.getCmp('gUsers').setDisabled(true);
                Ext.getCmp('gGroups').setDisabled(true);
                Ext.getCmp('userLabel').setText('Please Login');
            }

            // set users toolbar button
            if (obj.sessions.g_u_add == '1') {
                Ext.getCmp('tbUserAdd').setDisabled(false);
            } else {
                Ext.getCmp('tbUserAdd').setDisabled(true);
            }
            if (obj.sessions.g_u_edit == '1') {
                Ext.getCmp('tbUserEdit').setDisabled(false);
            } else {
                Ext.getCmp('tbUserEdit').setDisabled(true);
            }
            if (obj.sessions.g_u_delete == '1') {
                Ext.getCmp('tbUserDelete').setDisabled(false);
            } else {
                Ext.getCmp('tbUserDelete').setDisabled(true);
            }

            // set groups toolbar button
            if (obj.sessions.g_g_add == '1') {
                Ext.getCmp('tbGroupAdd').setDisabled(false);
            } else {
                Ext.getCmp('tbGroupAdd').setDisabled(true);
            }
            if (obj.sessions.g_g_edit == '1') {
                Ext.getCmp('tbGroupEdit').setDisabled(false);
            } else {
                Ext.getCmp('tbGroupEdit').setDisabled(true);
            }
            if (obj.sessions.g_g_delete == '1') {
                Ext.getCmp('tbGroupDelete').setDisabled(false);
            } else {
                Ext.getCmp('tbGroupDelete').setDisabled(true);
            }
        }
    });
}

As you can see on the code above, I manipulate the ExtJS component based on “Id”, so we need to to add Id properties for the required component, here a part of login form script and the form id I called it ‘fLogin’ ( assets/js/login.js )

// part of login.js
var loginForm = new Ext.FormPanel({
    id: 'fLogin'
});

function fnLogin() {
    loginForm.getForm().submit({
        success: function() {
            setPermissions();
            strUsers.load();
        },
        failure: function(form, o) {
            if (typeof(o.response) != 'undefined') {
                var json = o.response.responseText;
                var r = Ext.util.JSON.decode(json);
                Ext.Msg.alert('Login failed', r.error);
            }
        }
    });
}

Now part of the user script in ExtJS ( assets/js/user.js )

// part of user.js
var tbUsers = new Ext.Toolbar({
    items: [{
        text: 'Add',
        id: 'tbUserAdd'
    }, '-', {
        text: 'Edit',
        id: 'tbUserEdit'
    }, '-', {
        text: 'Delete',
        id: 'tbUserDelete'
    }, '->', {
        text: '',
        xtype: 'label',
        style: 'color:#0066cc;font-weight:bold;',
        id: 'userLabel'
    }, '-', {
        text: 'Logout'
    }]
});

var gridUsers = new Ext.grid.GridPanel({
    id: 'gUsers'
});

In the group script (assets/js/group.js)

var tbGroups = new Ext.Toolbar({
    items: [{
        text: 'Add',
        id: 'tbGroupAdd'
    }, '-', {
        text: 'Edit',
        id: 'tbGroupEdit'
    }, '-', {
        text: 'Delete',
        id: 'tbGroupDelete'
    }]
});

var gridGroups = new Ext.grid.GridPanel({
    id: 'gGroups'
});

For the adding and editing users and group I’m using a pop up window that have form to be submitted inside it, and for delete action I’m just using simple alert confirmation box. Well I think it is too much if I show all the code in this post, just go to the download link if you want to see full source code of this example, and here some of the screen capture.

Download Source

Drag and Drop Shopping Cart Using ExtJS and CodeIgniter Cart

aditia rahman — Sat, 21 Aug 2010 09:55:23 +0000

This is my other post about simple usage of ExtJS with CodeIgniter, this time I want to create a simple drag and drop shopping cart, I have learn about how to use the cart class in CodeIgniter that I have posted in the previous post, i’m using MySQL for the storing the product data. I prepared the mockup it something like this

Let just get started to the code:

1. Prepare The Database

Create table named “ci_extjs_cart” or with other name that you desired, next create the table and here the sql code

CREATE TABLE IF NOT EXISTS `products` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(64) DEFAULT NULL,
  `price` varchar(32) DEFAULT NULL,
  `image` varchar(128) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

And this are the sample data (I already included the sample image on the code that you can download)

INSERT INTO `products` (`id`, `name`, `price`, `image`) VALUES
(1, 'HP - 20 Inch Widescreen Flat-Panel LCD Monitor', '169', 'hp.jpg'),
(2, 'Gateway - 20 Inch Widescreen Flat-Panel LCD Monitor', '159', 'gateway.jpg'),
(3, 'Apple - 30 Flat-Panel TFT-LCD Monitor', '1799', 'apple.jpg'),
(4, 'Acer - 24 Inch Flat-Panel LED-LCD Monitor', '299', 'acer.jpg'),
(5, 'Asus - 24 Inch Widescreen Flat-Panel LCD Monitor', '249', 'asus.jpg');

2. Setting Up CodeIgniter

First time to get hand dirty with a framework is to set all the config file (in folder: “application/config/”). The four files that we have to configure are:

config.php

$config['base_url']	= "http://localhost/ci_extjs_cart/";

database.php

$db['default']['hostname'] = "localhost";
$db['default']['username'] = "root";
$db['default']['password'] = "admin";
$db['default']['database'] = "ci_extjs_cart";
$db['default']['dbdriver'] = "mysql";

routes.php

$route['default_controller'] = "product";

The default controller is set to product controller, in this step we have not create the controller yet, but it will be.

autoload.php

$autoload['libraries'] = array('database', 'session');
$autoload['helper'] = array('url');

4. Setting Up ExtJS on CodeIgniter

Like always I always included ExtJS file on separate folder from Codeigniter

5. Create a Controller and a View

The Controller, create file product.php inside the controllers folder, the very usual method on the controller is the contrustion and the index method, in the construction method the codeigniter cart class loaded.

load->library('cart');
    }

    public function index()
    {
        $this->load->view('product/index');
    }
}

The View, create the view file inside views folder “index.php”, the first step to preparing the view is to preparing the HTML layout, include the ExtJS file, and create a basic layout style in CSS.



  
    
    
    
    
    

    
    Extjs Image Gallery Using DataView

The Ext.ready function is still empty, inside this function all the ExtJS component will be placed, and I always using BASE_URL value that have value of site_url(); function, to make it easier when accessing a url.

6. Get Product List

The Controller, this is the method the get all the product data, and sending the data as json format.

public function ext_get_all()
{
    $query = $this->db->get('products');
    $product_arr = array();
    foreach($query->result() as $key => $data)
    {
        $product_arr[] = array(
            'id'    => $data->id,
            'name'  => $data->name,
            'price' => $data->price,
            'image' => $data->image
        );
    }
    echo json_encode(array('products' => $product_arr));
}

The View, this is the code for creating the product list in dataview, and a function to make the dataview draggable.

var proxyProduct = new Ext.data.HttpProxy({
    url: BASE_URL + 'product/ext_get_all', method: 'POST'
});

var strProduct = new Ext.data.JsonStore({
    proxy: proxyProduct,
    root: 'products',
    fields: [
        'id', 'name', 'price', 'image'
    ]
});

strProduct.load();

var tplProduct = new Ext.XTemplate(
    '',
        '',
        '',
        '{name}',
        '$ {price}',
    '',
    ''
);

var dvProduct = new Ext.DataView({
    autoScroll: true, store: strProduct, tpl: tplProduct,
    autoHeight: false, height: 200, multiSelect: false,
    overClass: 'x-view-over', itemSelector: 'div.thumb-wrap',
    emptyText: 'No product to display',
    style: 'border:1px solid #99BBE8;',
    listeners: {
        render: initializeItemDragZone
    }
});

function initializeItemDragZone(v) {
    v.dragZone = new Ext.dd.DragZone(v.getEl(), {
        getDragData: function(e) {
            var sourceEl = e.getTarget(v.itemSelector, 10);
            if (sourceEl) {
                d = sourceEl.cloneNode(true);
                d.id = Ext.id();
                return v.dragData = {
                    sourceEl: sourceEl,
                    repairXY: Ext.fly(sourceEl).getXY(),
                    ddel: d,
                    itemData: v.getRecord(sourceEl).data
                }
            }
        },

        getRepairXY: function() {
            return this.dragData.repairXY;
        }
    });
}

var panelProduct = new Ext.Panel({
    id: 'images-view',
    frame: true,
    width: 620,
    autoHeight: true,
    title: 'Product DataView',
    style: 'margin:0 auto;',
    items: [dvProduct]
});

panelProduct.render('top');

7. Create The Cart (Using EditorGridPanel)

The Controller, we will create some basic function to manipulating the cart I try to explain them in the separate way, but still in the same controller

7.1 Get All Cart

public function ext_get_cart()
{
    if ($this->cart->total_items() != 0)
    {
        foreach($this->cart->contents() as $product)
        {
            $cart_arr[] = array(
                'rowid' => $product['rowid'],
                'id'    => $product['id'],
                'qty'   => $product['qty'],
                'name'  => $product['name'],
                'price' => $product['price'],
                'subtotal' => $product['subtotal']
            );
        }
        $cart_arr[] = array(
            'rowid' => '',
            'id'    => '',
            'qty'   => '',
            'name'  => '',
            'price' => 'Total:',
            'subtotal' => ''.$this->cart->total().''
        );
        echo json_encode(array('cart' => $cart_arr));
    }
    else
    {
        $cart_arr[] = array();
        echo json_encode(array('cart' => $cart_arr));
    }
}

This function is to getting all the available product in the cart in the session, if the cart is not empty then just loop through the cart function “$this->cart->contents()” and put this to array. I add another array to showing the total value from the cart, this will be treated different in the ExtJS grid, and send it as json format

7.2 Add a Product to Cart

public function ext_add_cart()
{
    if ($_POST['rowid'] == '')
    {
        $data = array(
            'id'    => $_POST['id'],
            'qty'   => 1,
            'price' => $_POST['price'],
            'name'  => $_POST['name']
        );
        $this->cart->insert($data);
    }
    else
    {
        $data = array(
          'rowid'   => $_POST['rowid'],
          'qty'     => intval($_POST['qty']) + 1
        );
        $this->cart->update($data);
    }
    echo '{success:true, total: "'.$this->cart->total().'"}';
}

You must be can see in the add cart function there are conditional statement that updating the cart instead insert a new data to cart, well this is to handle if a user adding the product that already available on the cart, so the cart must be updating only the quantity.

7.3 Update a Product Quantity

public function ext_update_cart()
{
    $data = array(
      'rowid'   => $_POST['rowid'],
      'qty'     => $_POST['qty']
    );
    $this->cart->update($data);
    echo '{success:true}';
}

This function is to updating a product quantity on the cart, I make the quantity editable on the grid so the user can easy put the number of a product that he desired, and to deleting a product from cart the user have to put zero value on the quantity editable grid.

7.4 Clear Cart

public function ext_clear_cart()
{
    $this->cart->destroy();
    echo '{success:true}';
}

Well nothing really hard in this function, using “$this->cart->destroy()” all the cart clear.

7.5 The Cart

var strCart = new Ext.data.JsonStore({
    root: 'cart',
    fields: [
        'rowid', 'id', 'qty', 'name', 'price', 'subtotal'
    ],
    proxy: new Ext.data.HttpProxy({
        url: BASE_URL + 'product/ext_get_cart', method: 'POST'
    })
});
strCart.load();

var cb_select = new Ext.grid.CheckboxSelectionModel();

function showDollar(val) {
    if (val == '' || val == 'Total:') {
        return val;
    }
    else {
        return '$ ' + val;
    }
}

var panelCart = new Ext.grid.EditorGridPanel({
    frame: true, border: true, stripeRows: true,
    store: strCart, loadMask: true, title: 'Your Cart (Drag Here)',
    style: 'margin:0 auto;font-size:13px;',
    height: 220, width: 500, sm: cb_select,
    columns: [{
        header: 'rowid',
        dataIndex: 'rowid',
        hidden: true,
        hideable: false
    }, {
        header: 'id',
        dataIndex: 'id',
        hidden: true,
        hideable: false
    }, {
        header: "Product Name",
        dataIndex: 'name',
        sortable: true,
        width: 280
    }, {
        header: "Qty",
        align: 'center',
        width: 40,
        dataIndex: 'qty',
        menuDisabled: true,
        editor: new Ext.form.TextField({
            allowBlank: false,
            vtype: 'alphanum',
            id: 'qtyField'
        })
    }, {
        header: "Price",
        dataIndex: 'price',
        sortable: true,
        align: 'right',
        renderer: showDollar,
        width: 80
    }, {
        header: "Subtotal",
        sortable: true,
        align: 'right',
        width: 80,
        renderer: showDollar
    }],
    listeners: {
        'afteredit': function() {
            var sm = panelCart.getSelectionModel().getSelections();
            panelCart.getSelectionModel().clearSelections();
            Ext.Ajax.request({
                method: 'POST',
                url: BASE_URL + 'product/ext_update_cart',
                params: {
                    rowid: sm[0].get('rowid'),
                    qty: Ext.getCmp('qtyField').getValue()
                },
                success: function() {
                    strCart.load();
                }
            });
        }
    },
    buttons: [{
        text: 'Clear Cart',
        handler: function() {
            Ext.Ajax.request({
                url: BASE_URL + 'product/ext_clear_cart',
                method: 'POST',
                success: function() {
                    strCart.load();
                }
            });
        }
    }, {
        text: 'Check Out',
        handler: function() {

        }
    }]
});

panelCart.render('bottom');

var formPanelDropTargetEl =  panelCart.getView().scroller.dom;

var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
    notifyDrop  : function(ddSource, e, data){
        panelCart.getSelectionModel().selectAll();
        var sm = panelCart.getSelectionModel().getSelections();
        panelCart.getSelectionModel().clearSelections();

        data.itemData.rowid = '';
        for (i=0; i<=sm.length-1; i++) {
            if (sm[i].get('id') == data.itemData.id) {
                data.itemData.rowid = sm[i].get('rowid');
                data.itemData.qty = sm[i].get('qty');
                // so can out from loop
                i = sm.length;
            }
        }

        Ext.Ajax.request({
            url: BASE_URL + 'product/ext_add_cart',
            method: 'POST',
            params: {
                'id': data.itemData.id,
                'price': data.itemData.price,
                'name': data.itemData.name,
                'rowid': data.itemData.rowid,
                'qty': data.itemData.qty
            },
            success: function() {
                strCart.load();
            }
        });
        return(true);
    }
});

That’s all for the Cart features, there is CheckboxSelectionModel component, this component is to check whether the product is already on the cart, you can see it used on notifyDrop inside the dropTarget you have to add, the expected result is something like this.

Download Source

Understanding CodeIgniter Cart Class

aditia rahman — Wed, 04 Aug 2010 06:21:20 +0000

Cart is one of the most important feature when creating an online store. In this post I want to have more understanding about Cart Class in CodeIgniter, cause maybe come in handy in the future, you can see how many new online store out there open in business, and in this internet age, online store seems the must have for many people who have retail business, in this post I’m not writing about how to use it in some example, the code I posted in here just copying from the original cart class documentation, but i’m included the link to the example usage of this class on the section 4 below.

1. What is Cart Class in CodeIgniter?

First from the official documentation

- The Cart class utilizes CodeIgniter’s Session Class to save the cart information to a database, so before using the Cart class you must set up a database table as indicated in the Session Documentation , and set the session preferences in your appliction/config/config.php file to utilize a database. -

which mean this class save the cart from the users and save it to database, you have to create this table

CREATE TABLE IF NOT EXISTS  `ci_sessions` (
	session_id varchar(40) DEFAULT '0' NOT NULL,
	ip_address varchar(16) DEFAULT '0' NOT NULL,
	user_agent varchar(50) NOT NULL,
	last_activity int(10) unsigned DEFAULT 0 NOT NULL,
	user_data text NOT NULL,
	PRIMARY KEY (session_id)
);

You can change the table name, but it have to be adapted to the config.php

$config['sess_cookie_name']		= 'ci_session';
$config['sess_expiration']		= 7200;
$config['sess_encrypt_cookie']	= FALSE;
$config['sess_use_database']	= FALSE;
$config['sess_table_name']		= 'ci_sessions';
$config['sess_match_ip']		= FALSE;
$config['sess_match_useragent']	= TRUE;
$config['sess_time_to_update'] 	= 300;

When you add an array data to the cart class, the data would be inserted to ci_sessions table in user_data field. Saving data to cart class is have to be in array format, it can be single or multidimensional array, this code I take from the original documentation

// the single array
$data = array(
   'id'      => 'sku_123ABC',
   'qty'     => 1,
   'price'   => 39.95,
   'name'    => 'T-Shirt',
   'options' => array('Size' => 'L', 'Color' => 'Red')
);

// the multidimensional array
$data = array(
   array(
           'id'      => 'sku_123ABC',
           'qty'     => 1,
           'price'   => 39.95,
           'name'    => 'T-Shirt',
           'options' => array('Size' => 'L', 'Color' => 'Red')
        ),
   array(
           'id'      => 'sku_567ZYX',
           'qty'     => 1,
           'price'   => 9.95,
           'name'    => 'Coffee Mug'
        ),
   array(
           'id'      => 'sku_965QRS',
           'qty'     => 1,
           'price'   => 29.95,
           'name'    => 'Shot Glass'
        )
);

// insert the data
$this->cart->insert($data);

The required index in the array are id, qty, price, name you can add the additional index but you can’t use that four index and the options index is optional, in case you want to save another information of the product for example, T-Shirt with the same product id but different size. The last thing from the array is you can’t use another words that reserved, they are rowid and subtotal.

2. Displaying The Items



cart->contents() as $items): ?>

	


  QTY
  Item Description
  Item Price
  Sub-Total






	
	   $i.'[qty]', 'value' => $items['qty'], 'maxlength' => '3', 'size' => '5')); ?>
	  
		

			cart->has_options($items['rowid']) == TRUE): ?>

				
					cart->product_options($items['rowid']) as $option_name => $option_value): ?>

						: 


					
				

			

	  
	  cart->format_number($items['price']); ?>
	  $cart->format_number($items['subtotal']); ?>
	






   
  Total
  $cart->format_number($this->cart->total()); ?>

QTY	Item Description	Item Price	Sub-Total
$i.'[qty]', 'value' => $items['qty'], 'maxlength' => '3', 'size' => '5')); ?>	cart->has_options($items['rowid']) == TRUE): ?> cart->product_options($items['rowid']) as $option_name => $option_value): ?> :	cart->format_number($items['price']); ?>	$cart->format_number($items['subtotal']); ?>
	Total	$cart->format_number($this->cart->total()); ?>

The code above is to displaying the current cart on the web pages, and theres a hidden field on the form this is used when we want to updating the cart, the difference between insert and update is, insert function is to adding new items to the cart, yet the update function is to updating items on the cart whether the quantity the options or something else, so when you updating the cart you need the rowid to pass it through. Here is the code

$data = array(
   'rowid' => 'b99ccdf16028f015540f341130b6d8ec',
   'qty'   => 3
);

$this->cart->update($data);

// or a multi-dimensional array

$data = array(
   array(
           'rowid'   => 'b99ccdf16028f015540f341130b6d8ec',
           'qty'     => 3
        ),
   array(
           'rowid'   => 'xw82g9q3r495893iajdh473990rikw23',
           'qty'     => 4
        ),
   array(
           'rowid'   => 'fh4kdkkkaoe30njgoe92rkdkkobec333',
           'qty'     => 2
        )
);

$this->cart->update($data);

3. The Available Function

$this->cart->insert();
- Permits you to add items to the shopping cart, as outlined above. -

$this->cart->update();
- Permits you to update items in the shopping cart, as outlined above. -

$this->cart->total();
- Displays the total amount in the cart. -

$this->cart->total_items();
- Displays the total number of items in the cart. -

$this->cart->contents();
- Returns an array containing everything in the cart. -

$this->cart->has_options(rowid);
- Returns TRUE (boolean) if a particular row in the cart contains options. This function is designed to be used in a loop with $this->cart->contents(), since you must pass the rowid to this function, as shown in the Displaying the Cart example above. -

$this->cart->options(rowid);
- Returns an array of options for a particular product. This function is designed to be used in a loop with $this->cart->contents(), since you must pass the rowid to this function, as shown in the Displaying the Cart example above. -

$this->cart->destroy();
- Permits you to destroy the cart. This function will likely be called when you are finished processing the customer’s order. -

$this->cart->product_options(rowid);
- This function not described in the documentation but used in the example, this is to get the available options on the product. -

4. The Examples

I’m not providing any code from this post, these tutorial below can provide you to get started with this cart class. Maybe I’ll post the different tutorial from these. Just enjoy it.

CodeIgniter From Scratch: Shopping Cart ( link )

How to Build a Shopping Cart using CodeIgniter and jQuery ( link )

Cropping Image To Square Dimension With CodeIgniter

aditia rahman — Wed, 14 Jul 2010 09:21:03 +0000

I’ve posted similar article before but this time I want to do it with codeigniter, codeigniter have a powerful image manipulation class, in this post I will use it to make thumbnail square from image, let get directly to the code. I make the function inside the controller, this code is cropping image that already located on the server so the image path (not URL) have to be defined.

If you have dynamic variable to locate image on the server you can create function to check image type wheter is .png, .gif or .jpg then use the PHP GD function (imagecreatefromjpeg or imagecreatefrompng or imagecreatefromgif) to get the image width and height, in this code below it assume the image only in .jpg format.

And if you want to crop image from the uploaded file by the user it will make it easier, cause when you use codeigniter file uploading class there’s a built in property to get uploaded image width and image height automatically after the image was uploaded.

public function crop()
{
    $img_path = 'uploads\capsamples.jpg';
    $img_thumb = 'uploads\capsamples_thumb.jpg';

    $config['image_library'] = 'gd2';
    $config['source_image'] = $img_path;
    $config['create_thumb'] = TRUE;
    $config['maintain_ratio'] = FALSE;

    $img = imagecreatefromjpeg($img_path);
    $_width = imagesx($img);
    $_height = imagesy($img);

    $img_type = '';
    $thumb_size = 100;

    if ($_width > $_height)
    {
        // wide image
        $config['width'] = intval(($_width / $_height) * $thumb_size);
        if ($config['width'] % 2 != 0)
        {
            $config['width']++;
        }
        $config['height'] = $thumb_size;
        $img_type = 'wide';
    }
    else if ($_width < $_height)
    {
        // landscape image
        $config['width'] = $thumb_size;
        $config['height'] = intval(($_height / $_width) * $thumb_size);
        if ($config['height'] % 2 != 0)
        {
            $config['height']++;
        }
        $img_type = 'landscape';
    }
    else
    {
        // square image
        $config['width'] = $thumb_size;
        $config['height'] = $thumb_size;
        $img_type = 'square';
    }

    $this->load->library('image_lib');
    $this->image_lib->initialize($config);
    $this->image_lib->resize();

    // reconfigure the image lib for cropping
    $conf_new = array(
        'image_library' => 'gd2',
        'source_image' => $img_thumb,
        'create_thumb' => FALSE,
        'maintain_ratio' => FALSE,
        'width' => $thumb_size,
        'height' => $thumb_size
    );

    if ($img_type == 'wide')
    {
        $conf_new['x_axis'] = ($config['width'] - $thumb_size) / 2 ;
        $conf_new['y_axis'] = 0;
    }
    else if($img_type == 'landscape')
    {
        $conf_new['x_axis'] = 0;
        $conf_new['y_axis'] = ($config['height'] - $thumb_size) / 2;
    }
    else
    {
        $conf_new['x_axis'] = 0;
        $conf_new['y_axis'] = 0;
    }

    $this->image_lib->initialize($conf_new);

    $this->image_lib->crop();
}

CRUD using CodeIgniter and EXTJS Grid – Part 3

aditia rahman — Tue, 13 Jul 2010 03:55:08 +0000

This is the final post of the series CodeIgniter and Extjs CRUD, if you want to read the previous posts, here the first part and the second part of this post. Basically we already finish all the crud feature on the second part this only another common feature to add in the application, so we will add a quick search field on the grid, and what you need is the search grid plugin, I’m using the extjs example search field plugin from this extjs grid tutorial, you can download the complete code and find this file searchfield.js and put it your desire folder, in this post i put on the “assets/js/ext/plugins/” folder. Now all you have to do just include the js file in the view file and change the controller method.

This is what to be included in view “system/views/user/index.php”

Create and add new search field plugin to the grid toolbar

// the new search field
var searchUsers = new Ext.app.SearchField({
    store: strUsers,
    params: {start: 0, limit: 10},
    width: 180,
    id: 'fieldUsersSearch'
});

// add to the toolbar grid
var tbUsers = new Ext.Toolbar({
    items:[{
        text: 'Add',
        icon: BASE_ICONS + 'user_add.png',
        handler: function() {
            var User = gridUsers.getStore().recordType;
            var u = new User({
                fullname: 'New Full Name',
                email: 'New Email',
                country: 'Water Seven',
                occupation: 'Occupation',
                birthdate: '1899-10-10'
            });
            gridUsers.stopEditing();
            strUsers.insert(0, u);
            gridUsers.startEditing(0, 0);
        }
    }, '-', {
        text: 'Save Selected',
        disabled: true,
        id: 'btnSave',
        icon: BASE_ICONS + 'save.gif',
        handler: updateUsers
    }, '-', {
        text: 'Delete',
        icon: BASE_ICONS + 'user_delete.png',
        handler: deleteUsers
    }, '->', searchUsers]
});

Alternatively you can use saki grid search plugin follow this link http://gridsearch.extjs.eu/

And a little modification in controller “system/controller/user.php”

When you add search grid and doing a search query, the search field will give $_POST['query'] to the server and all we have to do is check whether the $_POST['query'] is set or not, if is set then do some query LIKE, in codeigniter you can see on the active record class .

public function ext_get_all()
{
    $start = isset($_REQUEST['start']) ? $_REQUEST['start'] : 0;
    $limit = isset($_REQUEST['limit']) ? $_REQUEST['limit'] : 10;

    if (isset($_POST['query']))
    {
        $this->db->like('users.fullname', $_POST['query']);
        $this->db->or_like('users.email', $_POST['query']);
        $this->db->or_like('users.occupation', $_POST['query']);
        $this->db->or_like('users.birthdate', $_POST['query']);
        $this->db->or_like('countries.country_name', $_POST['query']);
    }

    $this->db->select('users.*, countries.country_name');
    $this->db->from('users');
    $this->db->join('countries',
            'countries.id = users.country_id');
    $this->db->order_by('users.fullname');

    $this->db->limit($limit, $start);

    $query = $this->db->get();
    $results = $this->db->count_all('users');
    $arr = array();
    foreach ($query->result() as $obj)
    {
        $arr[] = $obj;
    }
    echo '{success:true,results:'. $results .
            ',rows:'.json_encode($arr).'}';
}

you can download all the source code in this post and here the final screen thumbnail result from all the of the post

Download Source

CRUD using CodeIgniter and EXTJS Grid – Part 2

aditia rahman — Mon, 12 Jul 2010 07:45:48 +0000

This post is continuation of the part 1, in part 1 we already created the Extjs grid with pagination and load the store grid from the database, in this part we will add the save, edit and delete feature to that grid, and for make it easier it will use the editor grid.

First Edit The View ( in “application/views/user/index.php” )

We will use the editorGrid, one of them should be editable on the combobox field and the value is fetched from the database, so we create country store component and set like the code below (in this step we haven’t created the method to get all countries. it described in the controller section).

var strCountries = new Ext.data.Store({
    reader: new Ext.data.JsonReader({
        fields: ['id', 'country_name'], root: 'countries'
    }),
    proxy: new Ext.data.HttpProxy({
        url: BASE_URL + 'user/ext_get_all_countries', method: 'POST'
    })
});

Now edit the toolbar so it can manipulate the grid and the data inside it, the “Add” button is to creating new data by adding the new row on the grid, and the user has to double click the new row to be edited. “Save Selected” button is to save the selected row button, it means user have to click the button and select the row to be saved, means can save multiple row at the save time. Last is “Delete” button that can be delete multiple row.

var tbUsers = new Ext.Toolbar({
    items:[{
        text: 'Add',
        icon: BASE_ICONS + 'user_add.png',
        handler: function() {
            var User = gridUsers.getStore().recordType;
            var u = new User({
                fullname: 'New Full Name',
                email: 'New Email',
                country: 'Water Seven',
                occupation: 'Occupation',
                birthdate: '1899-10-10'
            });
            gridUsers.stopEditing();
            strUsers.insert(0, u);
            gridUsers.startEditing(0, 0);
        }
    }, '-', {
        text: 'Save Selected',
        disabled: true,
        id: 'btnSave',
        icon: BASE_ICONS + 'save.gif',
        handler: updateUsers
    }, '-', {
        text: 'Delete',
        icon: BASE_ICONS + 'user_delete.png',
        handler: deleteUsers
    }]
});

function updateUsers() {
    var sm = gridUsers.getSelectionModel();
    var sel = sm.getSelections();
    var data = '';
    for (i = 0; i
And don’t forget to change the grid panel component from Ext.grid.GridPanel to Ext.grid.EditorGridPanel and add the editor property to each column like this one.
columns: [
    cbGrid, {
        header: "Fullname",
        dataIndex: 'fullname',
        width: 180,
        editor: new Ext.form.TextField({
            allowBlank: false
        })
    }, {
        header: "Email",
        dataIndex: 'email',
        width: 180,
        editor: new Ext.form.TextField({
            allowBlank: false,
            vtype: 'email'
        })
    }, {
        header: "Country",
        dataIndex: 'country_name',
        width: 120,
        editor: new Ext.form.ComboBox({
            id: 'cbCountry',
            triggerAction: 'all',
            store: strCountries,
            valueField: 'id',
            displayField: 'country_name'
        })
    }, {
        header: "Occupation",
        dataIndex: 'occupation',
        width: 120,
        editor: new Ext.form.TextField({
            allowBlank: false
        })
    }, {
        header: "Birth",
        dataIndex: 'birthdate',
        width: 80,
        renderer : Ext.util.Format.dateRenderer('d/m/Y'),
        editor: new Ext.form.DateField({
            format: 'd/m/Y',
            allowBlank: false
        })
    }
]

Second Edit The Controller (in “application/controllers/user.php”)
Add new function inside the controller to get all the countries, add user, edit user and delete user. The first snippet below is function to get all the countries data, ideally I always create another controller because it accessing the different table and this country data have “has one” relationship to user controller, but in this post to make it fast I put that function in the same controller.
public function ext_get_all_countries()
{
    $this->db->order_by('country_name');
    $query = $this->db->get('countries');
    $json = "{'countries':[";
    foreach($query->result() as $data)
    {
        $json .= '{"id":"'.$data->id .
                '", country_name:"' . $data->country_name.'"},';
    }
    $json .= "]}";
    echo $json;
}

And next is adding function for adding new data and edit existing data, you can see below there are looping when inserting the data, it because from the Extjs grid send multiple value, so I need to break down in array using explode function ini PHP, and there some converting date format cause the Extjs given the different date format when converting to string than mysql.
public function ext_update()
{
    /* ex ext date: 1899-11-27T00:00:00
       mysql : YYYY-MM-DD */

    $records = explode('||', $_POST['postdata']);

    foreach ($records as $row)
    {
        $field = explode(';', $row);

        $birthdate = substr($field[5], 0, 10);

        $data = array(
            'fullname' => $field[1],
            'email' => $field[2],
            'occupation' => $field[4],
            'birthdate' => $birthdate
        );

        if (is_numeric($field[3]))
        {
            $data['country_id'] = $field[3];
        }
        else
        {
            $data['country_id'] = 1;
        }

        if (is_numeric($field[0]))
        {
            $this->db->where('id', $field[0]);
            $this->db->update('users', $data);
        }
        else
        {
            $this->db->insert('users', $data);
        }
    }
}

And the last is to delete all selected row from the grid, it is the way from the above snippet, the id that we want to deleted

consolidated in one string, and php explode it to an array
public function ext_delete()
{
    $records = explode(';', $_POST['postdata']);
    foreach($records as $id)
    {
        $this->db->where('id', $id);
        $this->db->delete('users');
    }
}

Well that for the part two, most feature have already been added for the CRUD grid, for part just for finishing I may add a quaick search field on the grid, and here’s below the complete code from this post.
Download Source

CRUD using CodeIgniter and EXTJS Grid – Part 1

aditia rahman — Sat, 10 Jul 2010 02:50:42 +0000

In this post I want to share how to create simple CRUD (create, read, update, delete) using codeigniter ExtJS editor grid. In this first part, we will setup the database schema, codeigniter and extjs. I limited this first part, only setup fetching data from database and pagination grid in extjs grid.

1. Create Database Schema

The table that we will use is two tables with “has one” relationship, namely users table with foreign key country_id and countries table that store all the countries data, so when we want to know the country name from the users we have to get from the countries table, and here the sql for creating the table.

--
-- Table structure for table `countries`
--

CREATE TABLE IF NOT EXISTS `countries` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `country_name` varchar(150) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=102 ;

-- --------------------------------------------------------

--
-- Table structure for table `users`
--

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `fullname` varchar(150) NOT NULL,
  `email` varchar(100) NOT NULL,
  `country_id` int(11) NOT NULL DEFAULT '1',
  `occupation` varchar(150) NOT NULL,
  `birthdate` date NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=26 ;

2. Setup Codeigniter

Like we always do in previous tutorial, there are the files that we have to setup: config.php, database.php, autoload.php and route.php, all this files are inside the same folder in codeigniter namely “application/system/config”, and don’t forget to setup the extjs file.
config.php file

$config['base_url'] = "http://localhost/ci_extjs_crud/";

database.php file

$db['default']['hostname'] = "localhost";
$db['default']['username'] = "root";
$db['default']['password'] = "";
$db['default']['database'] = "ci_extjs_crud";
$db['default']['dbdriver'] = "mysql";

autoload.php file

$autoload['libraries'] = array('database');
$autoload['helper'] = array('url');

route.php file

$route['default_controller'] = "user";

we will create user class so set the default route to user and the extjs file looks on my project folder (inside codeigniter)

I already remove only the used extjs file so, it much smaller than the fresh copy

3. Create The Controller

Create file image.php inside codeigniter controller folder and add this code below, this class only have 3 function. First function is to initialize the controller class, the index function only to render the view file and the ext_get_all function is to get the data from database that will displayed on the grid, you can see inside that function there are code to handle the pagination and the related table, the output from this function have to be in JSON format, so it will make easier to be displayed on Extjs grid.

load->view('user/index');
    }

    public function ext_get_all()
    {
        $start = isset($_REQUEST['start']) ? $_REQUEST['start'] : 0;
	$limit = isset($_REQUEST['limit']) ? $_REQUEST['limit'] : 10;

        $this->db->select('users.*, countries.country_name');
        $this->db->from('users');
        $this->db->join('countries',
                'countries.id = users.country_id');

        $this->db->limit($limit, $start);

        $query = $this->db->get();
        $results = $this->db->count_all('users');
        $arr = array();
        foreach ($query->result() as $obj)
        {
            $arr[] = $obj;
        }
        echo '{success:true,results:'. $results .
                ',rows:'.json_encode($arr).'}';
    }
}

4. Create The View

Create file index.php inside folder “application/views/user/”, just include the extjs file on the header that linked to file that we already setup on the step 2, and add this code below in the javascript tag (whatever you like whether in the separate file or in the same file)

The first screenshot from this tutorial is something like this and you can download all the code below, i have included the sql schema and all the extjs file that needed in this post.

Download Source