Implementing Welcome Popup in CakePHP Part : 2

This post is the second part of my previous article Implementing Welcome Popup in CakePHP. As I told you we'll add some more feature in the simple popup, so in this post what we are going to add is color fields for dynamic background, font color in popup and some route related stuff.

New fields added are,

bg : background color

fcl : title font color

mbg : middle div background color

mfcl : middle div font color

Please run the below SQL command to create our popups table with new fields.

CREATE TABLE IF NOT EXISTS `popups` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(200) NOT NULL,
  `content` text NOT NULL,
  `firstvisit` tinyint(2) NOT NULL,
  `delay` int(10) NOT NULL,
  `bg` char(7) NOT NULL DEFAULT '0085FF',
  `fcl` char(7) NOT NULL DEFAULT 'FFF',
  `mbg` char(7) NOT NULL DEFAULT '81BDF3',
  `mfcl` char(7) NOT NULL DEFAULT 'FFF',
  PRIMARY KEY (`id`)
)

Add New Fields

Now we add the new input fields in our index.ctp which resides in app/View/Popups folder.After adding new fields file looks like,

<?php 
 echo $this->Form->create();
 echo $this->Form->input('title');
 echo $this->Form->input('content',array('type'=>'textarea'));
?>
<label>First time</label>
<?php 
 echo $this->Form->checkbox('firstvisit');
 echo $this->Form->input('delay');
 echo $this->Form->input('id', array('type' => 'hidden'));
 echo $this->Form->input('bg');
 echo $this->Form->input('fcl');
 echo $this->Form->input('mbg');
 echo $this->Form->input('mfcl');
 echo $this->Form->end('Save');
?>

As we are saving the color code in the database , its recommended to have color picker as a input. Please read below post:

How to Integrate the Color Picker in Cakephp

So now with the Farbtastic helper new inputs will be as below,

echo $this->Farbtastic->input('Popup.bg','Background Color');
echo $this->Farbtastic->input('Popup.fcl','Font Color');
echo $this->Farbtastic->input('Popup.mbg','Middle Background Color');
echo $this->Farbtastic->input('Popup.mfcl','Middle Font Color');

add script code,

<script charset="utf-8" type="text/javascript"> 
    $(document).ready(function() { 
        <?php  
            echo $this->Farbtastic->readyJS('Popup.bg');  
            echo $this->Farbtastic->readyJS('Popup.fcl'); 
            echo $this->Farbtastic->readyJS('Popup.mbg'); 
            echo $this->Farbtastic->readyJS('Popup.mfcl'); 
        ?> 
    }); 
</script>

Open element "popup.ctp" add the following code at the end of file.

<style>
.popup{
 background: <?php echo $data['Popup']['bg'];?>;
}

.p_content{
 background: <?php echo $data['Popup']['mbg'];?>;
 color:<?php echo $data['Popup']['mfcl'];?>
}

.p_title{
color:<?php echo $data['Popup']['fcl'];?>
}
</style>

Routing

Let's say you have admin prefixes setup(this means you have admin prefix added in core.php file),

       Configure::write('Routing.prefixes', array('admin'));

then definitely you don't want this popup to be displayed for all of the admin actions. To restrict the popup for such actions do as suggested below,

Add the below code in your AppController.php file

public function beforeRender() {
if(isset($this->params['admin'])){
Configure::write('admin.prefixes', true);
}
}

Add this condition in the default.ctp file.(you can add other conditions also as per you requirements)

if(!Configure::read('admin.prefixes')){
echo $this->element('popup');
}

Change the request action in the popup.ctp element from

$data=$this->requestAction('/Popups/display');

to,

$data=$this->requestAction(array('controller'=>'popups','action'=>'display','admin'=>true));

Popup module as admin action,

Add the prefix "admin" against the below actions of PopupsController.php file.

 -- index()
 -- display()

Change the view file name of popups ,from index.ctp to admin_index.ctp

Result

Thats it..!! now you have new welcome popup with new color fields, you can change the colors of the background , font color as your wish. you can access you popup configuration with admin prefix in the URL.

Let me know if you face any issue in implementing this changes.

PHP Dev Zone