Color Picker in Cakephp 2.x

Hello friends welcome to findnerd. In this blog we are going to integrate color picker in Cakephp. There are many colors picker jquery plugins available, here we are going to use Farbtastic jquery color picker.

Lets begin to integrate Farbtastic color picker, just follow the following steps in order to do so:

First Step: Download Farbtastic

Go to the following link: http://acko.net/dev/farbtastic and download the latest version from there and extract it.

Now copy the following images into the directory app/webroot/img

• mask.png
• marker.png
• wheel.png

Now get the colorpicker icon in order to show and hide button. For this, you need to go to http://www.iconfinder.net/icondetails/5185/16/ and download the image and save it as color.png and copy it inside app/webroot/img/icon/ folder.
 

Second Step: Copy CSS & JS of Farbtastic

• Please copy farbtastic.css file and paste it inside the following directory: app/webroot/css
• Please copy farbtastic.js file and paste it inside the following directory: app/webroot/js

Note: You need to change the paths for images in farbtastic.css from url(wheel.png) to url(../img/wheel.png) for all 3 images.
 

Step Three: Now write down the following code given below in FarbtasticHelper.php in the directory app/View/Helper/

<?php 

class FarbtasticHelper extends Helper  { 
    var $helpers = array('Javascript', 'Html');  

    /** 
    *    Add the JS/CSS to your header  
    *     
    */ 

    function includeHead() { 
        $str = ''; 
        $str .= $this->Html->script('farbtastic'); 
        $str .= $this->Html->css('farbtastic'); 
        return $str; 
    }

    function input($name, $label='') { 
        $icon_file = '../img/icon/color.png'; // update to wherever your icon is. 
        list($model, $fieldname) = split('\.', $name); 

        if (empty($label)) { 
            $label = Inflector::Humanize($fieldname); 
        } 

        if(isset($this->data[$model][$fieldname])) { 

            $color_value = str_replace("#", "", $this->data[$model][$fieldname]); // expects an RGB string, strips any incoming '#' character 

        } 

        else { 
            $color_value = "000000"; // black 
        } 

      $str = ''; 
      $str .= '<div class="input text colorpicker">'; 
      $str .= '<label for="'.$model.Inflector::Camelize($fieldname).'">'.$label.'</label>';      $str .= '<input name="data['.$model.']['.$fieldname.']" type="text" maxlength="7" value="#'.$color_value.'" id="'.$model.Inflector::Camelize($fieldname).'" class="farbtastic-input" />'; 

      $str .= '<img id="farbtastic-picker-icon-'.Inflector::Camelize($fieldname).'" src="'.$icon_file.'" alt="Color Picker" title="Color Picker" class="farbtastic-picker-icon">'; 

      $str .= '<div style="display:none;" class="farbtastic-picker" id="farbtastic-picker-'.Inflector::Camelize($fieldname).'"></div>'; 

      $str .= '</div>'; 
      return $str; 
    } 

    /** 
    *    Add the jQuery magic to the $(document).ready function 
    *    Farbtastic-ize the input, make the button show/hide the color picker div 
    */
function readyJS($name) { 
        list($model,$fieldname) = split('\.',$name); 
        $str = ''; 
        $str .= ' $("#farbtastic-picker-'.Inflector::Camelize($fieldname).'").farbtastic("#'.$model.Inflector::Camelize($fieldname).'"); '; 
        $str .= ' $("#farbtastic-picker-icon-'.Inflector::Camelize($fieldname).'").click( function() { $("#farbtastic-picker-'.Inflector::Camelize($fieldname).'").toggle("slow"); }); '; 
       return $str; 
    } 
}?>

Lets understand how to use this helper with the following example given below:
Create table called 'cars'.

 

CREATE TABLE cars (id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,name VARCHAR(50),color CHAR(7));

Create file CarsController.php and write down the following code in it:

 

<?php

class CarsController extends AppController {

    public $helpers = array('Html', 'Form','Farbtastic');

    public function index() {
        $this->set('cars', $this->Car->find('all'));
    }


   public function add() {
        if ($this->request->is('post')) {
            $this->Car->create();
            if ($this->Car->save($this->request->data)) {
                $this->Session->setFlash(__('Your record has been saved.'));
                return $this->redirect(array('action' => 'index'));
            }

            $this->Session->setFlash(__('Unable to add your record.'));
        }
    }

}

?>

You can see here we have included the helpers array, and in this array we have included Farbtastic.

Now for listing of records create index.ctp inside /app/View/Cars/ folder and write the following code in it:

<h1>Cars</h1>
<table>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Color</th>
    </tr>
    <?php foreach ($cars as $car): ?>
    <tr>
        <td><?php echo $car['Car']['id']; ?></td>
        <td><?php echo $car['Car']['name']; ?></td>
        <td><?php echo $car['Car']['color']; ?></td>
    </tr>
    <?php endforeach; ?>
    <?php unset($car); ?>
</table>

For adding new records you need to create add.ctp file in folder /app/View/Cars/

Create one file "add.ctp" for adding new record.

<?php
        echo $this->Farbtastic->includeHead();
?>
<h1>Add Car</h1>
<?php
        echo $this->Form->create('Car');
        echo $this->Form->input('name');
        echo $this->Farbtastic->input('Car.color');
        echo $this->Form->end('Save Car');
?>
<script type="text/javascript" charset="utf-8">
 $(document).ready(function() {
        <?php  echo $this->Farbtastic->readyJS('Car.color');   ?>
    });
</script>

You can see here how the color input has been written:
    echo $this->Farbtastic->input('Car.color');

Go to localhost/cars/add and then you can see the color-picker integrated!

Thanks for reading.