Tag Archives: Codeigniter

Codeigniter Session Storage Alternative Method

The limit of a cookie is 4kb. If you choose to store codeigniter session data in the cookie then you should not exceed 4kb.

To store more than 4kb of session, you can set in config.php file with the following setting:

$config['sess_use_database']	= TRUE;

This allows you to store session data in database.

Refer to http://ellislab.com/codeigniter/user-guide/libraries/sessions.html on how to setup saving session data to database.

Alternative Method

An alternative method to store large session data without using database is to use CodeIgniter file-cache. This allows you to store session data into a file located in CodeIgniter cache folder.

Example:

function login(){
    $this->load->driver('cache');

    /* Do your user login validation here */
    $user_id = $this->myusermodel->verifyLogin();
    $this->session->set_userdata('users_id', $user_id);
    /* End of login validation */

    $session_data = $this->mymodel->get_my_big_data(); 
    $cache_user = array();
    $cache_user["session_data"] = $session_data;
    $this->cache->file->save('cu-' . $user_id, $cache_user, 100000000);
}

From example above, i store only the $user_id into the session and the rest into a cache file in the server. The cookie / session is now very small as it contains $user_id only.

Then, I save session data into a cache file. To ensure I am able to access the correct cache file when I want to retrieve the session data, I use ‘cu-‘ + $user_id  as the key. Note that the time-to-expire is set to unlimited as the data need to be used all the time.

About CodeIgniter Cache Library: http://ellislab.com/codeigniter/user-guide/libraries/caching.html#file

To retrieve session data:

function loadCache(){
    $this->load->driver('cache');
    $cache_id = 'cu-' . $this->session->userdata('users_id');
    $cache_user = $this->cache->file->get($cache_id);
    $session_data = $cache_user["session_data"];

    //Perform operation on $session_data here.
}

To retrieve session data, simply call $this->cache->file->get($cache_id). The returned object is exactly what has been saved.

Note: To ensure the safety of the cached data, ensure you put the cache folder outside of WWW or use .htaccess to disable access to any files in cache folder.

To change the location of the cache folder, modify the following in config.php file:

$config['cache_path'] = '/mydrive/safefolder/cache'; //Ensure this folder is writable by apache

Good luck on the implementation and have fun.

CodeIgniter Resize and Crop Image To Fit Container Div Example

When a user uploads an image to be displayed on a webpage, we need to make sure that the image has the following:

a) fits correctly into a fixed height and width container without overflowing or any blank space.
b) displays in full image resolution (without shrinking or expanding image using CSS width and height).
c) image displayed is not skewed or distorted and keeping image ratio.

References to CodeIgniter libraries:
http://ellislab.com/codeigniter/user-guide/libraries/file_uploading.html
http://ellislab.com/codeigniter/user-guide/libraries/image_lib.html

By using CodeIgniter framework, I manage to achieve the above.

Workflow:

1) Upload the raw image using standard file upload form. Upload handling backend:

$config['upload_path'] = './data/product/';
$config['allowed_types'] = 'gif|jpg|png';
$config['file_name'] = 'product.png';
$config['overwrite'] = TRUE;
$config['max_size']	= '0';
$config['max_width']  = '0';
$config['max_height']  = '0';	

$this->load->library('upload', $config);

if(!is_dir($config['upload_path'])){
   	mkdir($config['upload_path'], 0755, TRUE);
}

if (!$this->upload->do_upload("file_upload")){ //Upload file
			redirect("errorhandler"); //If error, redirect to an error page
		}else{
  ...

2) Next, we will do image resizing. Set the configuration as below:

   
$upload_data = $this->upload->data();
$image_config["image_library"] = "gd2";
$image_config["source_image"] = $upload_data["full_path"];
$image_config['create_thumb'] = FALSE;
$image_config['maintain_ratio'] = TRUE;
$image_config['new_image'] = $upload_data["file_path"] . 'product.png';
$image_config['quality'] = "100%";
$image_config['width'] = 231;
$image_config['height'] = 154;
$dim = (intval($upload_data["image_width"]) / intval($upload_data["image_height"])) - ($image_config['width'] / $image_config['height']);
$image_config['master_dim'] = ($dim > 0)? "height" : "width";

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

if(!$this->image_lib->resize()){ //Resize image
	redirect("errorhandler"); //If error, redirect to an error page
}else{
     ...

Explanation: “maintain_ratio” parameter is set to TRUE. From code above, the container size used for this example is (231px × 154px) (W × H).

Before resizing, we need to know whether to use width or height edge as the hard-value. After the original image has been resized, either the original image width’s edge or the height’s edge will be the same as the container width’s edge or the height’s edge respectively. The one that is same has the hard-value length. We determine this using calculation below:

Ratio = (Original Image Width / Original Image Height) – (Container Width / Container Height)

If the ratio > 0, then original image has longer width than container width. Hence, we take the height as hard-value as it has shorter height ratio.
If the ratio < 0, then original image has longer height than container height. Hence, we take width as hard-value as it has shorter width ratio.
if ratio = 0, both width or height can be the hard-value.

The purpose of doing this is to ensure resized image is able to fill the container completely without white spaces.

See visual description below:

Compare

Above shows container and image with different sizes.

Overlap

To determine which edge to be used as hard-value, we overlap the container and the original image. We will shrink the original image while keeping its ratio. The arrow indicates the shrinking direction. The edge of the image that first matches the container edge length will be the hard-value.

Image_07

When either one of the edge matches the container edge, we stop resizing. The orange box represents the final image.

3) After resizing the image, we will crop it to fit into the container. Set the configurations as below:

$image_config['image_library'] = 'gd2';
$image_config['source_image'] = $upload_data["file_path"] . 'product.png';
$image_config['new_image'] = $upload_data["file_path"] . 'product.png';
$image_config['quality'] = "100%";
$image_config['maintain_ratio'] = FALSE;
$image_config['width'] = 231;
$image_config['height'] = 154;
$image_config['x_axis'] = '0';
$image_config['y_axis'] = '0';

$this->image_lib->clear();
$this->image_lib->initialize($image_config); 

if (!$this->image_lib->crop()){
       	redirect("errorhandler"); //If error, redirect to an error page
}else{
	redirect("successpage");
}

Note that ‘x_axis‘ and ‘y_axis‘ are set to 0. We don’t need to crop away any parts. We will use width and height parameters to generate the image part that we need.

Final

Image resizing and cropping to fit into container is done.