Storing and displaying the image stored as varbinary in MSSQL server using PHP (CodeIgniter)

Prabeen — Mon, 05 Jul 2010 13:11:53 +0000

I am not used to MSSql server with php . MSSQL server has very less documentation compared to Mysql . So here I am writing a short snippets to upload image to MSSQL server in field type ‘varbinary’ and display the image to browser using php framework codeIgniter. Using framework for php application development is always a good idea.

Here is a php snippet to store the uploaded image in the MSSQL server ( datatype = varbinay(MAX)) .

function do_upload()
	{
		$config['upload_path'] = './uploads/';
		$config['allowed_types'] = 'gif|jpg|png';
		$config['max_size']	= '100';
		$config['max_width']  = '1024';
		$config['max_height']  = '768';
 
		$this->load->library('upload', $config);
 
		if ( ! $this->upload->do_upload())
		{
			$error = array('error' => $this->upload->display_errors());
 
			$this->load->view('upload_form', $error);
		}	
		else
		{
			$data = $this->upload->data(); 
 
 
                        $dataString = file_get_contents($data['full_path']);
                        $arrData = unpack("H*hex", $dataString);
                        $data_string = "0x".$arrData['hex'];
                        // now we can insert the $data_string variable into the sql server using it respective sql query.
			delete_files($data['full_path']) // we don't want the image to be stored in the web server. 
                        //$this->load->view('upload_success', $data);
		}
	}

Now its little tricky to render the image in the browser that is stored in the MSSQL server ,varbinary(MAX) datatype.

$this->config->item('BASEURL');?>display_image/convert_image/$row->id?> width="74" height="53" />
 
// baseurl returns the base_url().'index.php/'  (my custom config) 
// display_image is controller name  
// convert_image is method name 
//$row->id returns the primary key of that particular image row.It is used for query to the database.

Now here is my controller to render image on the browser .

 if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
class Display_Image extends Controller
{ 
	function Display_Image() 
	{ 
		parent::Controller(); 
	} 
	function convert_image()
	{ 
 
		$row =  $this->my_model->get_row($this->uri->segment(3));// to get the image data from the database where my_model is model to fetch the row. 
                $image_data = $row->image; 
		header("Content-Type: image/jpeg");// to tell browser that content type is jpeg image.  
		print $image_data; 
 
	} 
 
} 
?>

This is how we can store and display image using MSSQL server in datatype varbinary (MAX).
I hope this information is helpful who are having hard time to find the solution .

Simple vertical accordion menu using JQuery

Prabeen — Tue, 08 Jun 2010 09:49:49 +0000

I saw various tutorial and jquery snippets to create accordion menu, but most of them were only on mousehover event but nothing with mouse out event.A hectic problem can persist when we try to render the accordion effect with mouseover and mouseout event. So we need to use jquery mouse event i.e ‘hover’ or ‘mouseenter’ and ‘mouseleave’.

What is the problem with ‘mouseover’ and ‘mouseout’ event?
Hovering over children element fires parent’s mouseout event which most of the time dont require.This is caused by event bubbling / propagation.

So we have to use ‘mouseenter’ and ‘mouseleave’ , or ‘hover’ event instead.
Note: Javascript does not provide the direct ‘hover’ event but we can get it using javascript framework eg. ‘Jquery’ .

DEMO

HTML Stucture


  
    
	 Category1 
        
             
		 subcategory1 
            
             
		 subcategory2 
	     
      
   
    
	 Category2 
      	
              
		 subcategory5 
	     
             
		  subcategory1 
	     
        
    
     
	 Category3 
      	
            
		 subcategory5 
	    
            
		 subcategory1

In the above html , ’selected’ class has been provided to ‘li’ to make that particular ‘li’ active.And also do not forget to provide the class ‘parentCategory’ to parent ‘li’.

Css for accordion Menu

>
#accordion
{width: 350px;margin: 0 auto;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;}
 
#accordion  ul
{list-style:none outside none;margin: 0px;padding: 0px;}
 
#accordion  ul li
{display: block;background: #ccc;border-bottom: 1px solid #e1e1e1;}
 
#accordion  ul li a
{font-weight: bold;color: #787878;padding: 4px 10px;}
 
#accordion  ul li li a
{font-weight: bold;color: #FFFFFF;padding: 3px 10px;}
 
#accordion  ul li ul
{padding: 0 0 0 0px;display:none;}
 
#accordion  ul li li
{display: block;background: #A6A6A6;border-bottom: 1px solid #ddd;}
 
#accordion a
{ display:block;text-decoration: none;}
>

Now its turn of main hero;
JQuery to render vertical accordion menu

<script>
jQuery(document).ready(function()
{
   jQuery("#accordion ul li.parentCategory").hover(function()
   {
      jQuery(this).find("ul").stop(true,true).slideDown(400).parent().siblings("li:not('.selected')").find('ul').slideUp(400);
   },function()
    {
         jQuery("li:not('.selected')").find("ul").slideUp(400);
 
    }).siblings('li.selected').find('ul').show();
});
script>

Category1
- subcategory1
- subcategory2

Category2
- subcategory5
- subcategory1

Category3
- subcategory5
- subcategory1

These kind of effects seems difficult to render……………… unless…. you get familiar with JQuery
DEMO

If you any kind of queries then please feel free to contact me. I will be pleased to help if something is related to my post.

Prabeen's Blog

Storing and displaying the image stored as varbinary in MSSQL server using PHP (CodeIgniter)

Simple vertical accordion menu using JQuery